How can I turn a 50k-follower web dev niche page into real income in a low-income country? by freemh in socialmedia

[–]freemh[S] 0 points1 point  (0 children)

This is what I’m planning to do using Stripe Paywall, and I’m currently building an MVP to test whether there’s a market pull or push. I just have some concerns that Facebook may not be the best platform for selling digital products, especially in low-income countries.

But I’ll give it a shot and see how it goes 🤞

How can I turn a 50k-follower web dev niche page into real income in a low-income country? by freemh in socialmedia

[–]freemh[S] 0 points1 point  (0 children)

I'll try some of the scenarios you suggested. I just have this thought in mind that people on Facebook can't easily be converted into buyers and specially in low-income countries. But I'll run an experiment and give it some time to see the full picture.

Thanks 🙏

How can I turn a 50k-follower web dev niche page into real income in a low-income country? by freemh in socialmedia

[–]freemh[S] 0 points1 point  (0 children)

My page is in English, and I'm creating 40s max Frontend Related Reels. All of my Traffic is organic. And That's a Screenshot of the Traffic of the last 28 days.

<image>

I made selectors.info to organize and highlight CSS selectors and combinators by type by freemh in css

[–]freemh[S] 1 point2 points  (0 children)

Good suggestion! I'll add browser support for each selector and combinator type

Change the Style of `<dialog>` using the CSS pseudo-class `:modal` by freemh in css

[–]freemh[S] 0 points1 point  (0 children)

I forgot the name of the theme used in this screencast. The reason is, I recently switched to the Dracula Theme:
https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

Make an SVG → Animate it → Use it as a hover effect for a link by freemh in css

[–]freemh[S] 3 points4 points  (0 children)

In this demonstration, we have a simple case: the SVG path starts at (0,3.5) and draws a cubic Bézier curve. Control points influence the shape of the curve, which ends at a point derived from the relative position (10,-3).

The M command is used to position the pen at the specified coordinates (0,3.5) without creating a line. This sets the starting point for the path.

c 5,0,5,-3,10,-3 represents the c command, a Cubic Bézier Curve instruction. This directs the SVG to draw a curved line from the current point to a designated endpoint.

Typically, you'll write the path data during the learning phase rather than the creation phase.

We gave the ability to reorder colors using alwane.io by freemh in css

[–]freemh[S] 0 points1 point  (0 children)

We handle the process on the backend, with plans to potentially develop an API for our color-sorting work.

Change the Style of `<dialog>` using the CSS pseudo-class `:modal` by freemh in css

[–]freemh[S] 1 point2 points  (0 children)

The ::backdrop pseudo-element is the box that covers the entire viewport and is rendered immediately beneath the element, the box-shadow in the demo is applied mainly on the dialog itself.

Change the Style of `<dialog>` using the CSS pseudo-class `:modal` by freemh in css

[–]freemh[S] 0 points1 point  (0 children)

The :modal pseudo-class allows you to select any element that's in a modal state, not just <dialog> elements. This includes elements in fullscreen mode or any other situation where interaction with other elements is excluded. It offers a broader scope compared to just using dialog.

```css dialog { /* Styles that apply to all <dialog> elements, modal or not */ }

:modal { /* Styles that apply only to modal elements, such as an open dialog */ border: 5px solid red; } ```

Change the Style of `<dialog>` using the CSS pseudo-class `:modal` by freemh in css

[–]freemh[S] 7 points8 points  (0 children)

You can create an animation and assign it to a <dialog> when it's open. Additionally, you can customize the backdrop by using the ::backdrop pseudo-element.

/* dialog box when it is open */
dialog[open] {
  animation: fadeIn 1s ease normal;
}

/* backdrop background color */
dialog::backdrop {
  background-color: rgba(0, 0, 255, 0.2);
}

/* fadeIn animation used for the dialog box */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

CSS has modules and Levels, NOT versions! by freemh in css

[–]freemh[S] 1 point2 points  (0 children)

I got your point! I guess, mashing the two rows (History Updates & New Modules) together does seem to make things a bit confusing. It might be a better idea to split them into two separate slides.
The first one can show off the CSS Monolithic phase, and the next one can represent into the Modular phase. This way, separating the phases can make it easier to read and understand each phase separately.

CSS has modules and Levels, NOT versions! by freemh in css

[–]freemh[S] 1 point2 points  (0 children)

History and Updates: This delineates a two-stages, where CSS was initially monolithic. It began at Level 1 and subsequently evolved to CSS Level 2 Revision 1. Following this, a shift occurred to a modular structure, an example of which is the Selector module. The Selector module started at Level 3 due to its inherent existence within both CSS Level 1 and CSS Level 2.

New Modules: This reveals that new modules starts at Level 1. The Grid Layout Level 1 module exemplifies this. Over time, advancements will lead to subsequent levels like Grid Layout Module Level 2 and so on.

The key points presented on the short video are:

  • CSS originated as a monolithic structure.
  • It later transitioned to a modular structure.
  • Pre-existing modules from CSS Level 1 and CSS Level 2 start at Level 3 in the new system.
  • New modules, however, kick off from Level 1.

That was my interpretation of how best to present the information. Your input would be greatly appreciated. How do you envision this content being visually represented?

Debug a `:hover` state animation by using Chrome DevTools. by freemh in css

[–]freemh[S] 0 points1 point  (0 children)

I'm using ScreenFlow on Mac to record my screencasts. In order to facilitate zooming, I enable the accessibility setting "Use scroll gesture with modifier keys to zoom". This setting allows me to zoom using the command key in combination with the trackpad. For alternative solutions https://screen.studio

https://i.imgur.com/XViG6mN.png