DEV Community: Mateusz Hadryś

Gradient Text In CSS

Mateusz Hadryś — Mon, 11 Jan 2021 15:29:06 +0000

It can be hard to make a website stand out.

So here’s a little trick that will improve any landing page or header: Use gradient text.

Just make sure to not overuse it. Gradients should never be used for longer text. Instead, use them to make headings or specific words more eye-catching.

What might surprise you — especially if you have prior experience with design tools — is that you can’t set a gradient as the text color directly. For example color: linear-gradient(yellow, red); won’t work.

But gradient text can be achieved in CSS, it just requires a few extra steps.

It’s best to start with some big, preferably bold text. This will make the gradient more visible and the text more readable.

The text I’ll be using is styled using the font shorthand with the following values:

font: bold 120px Poppins, sans-serif;

Step 1: Add a Gradient

First, we need to add the gradient as a background.

By default the gradient will go from top to bottom, but we can also specify a direction.

If you want a horizontal gradient, to right will do the trick, but a slight angle like 60deg looks more natural.

background-image: linear-gradient(60deg, #E21143, #FFB03A);

If you want to learn how to create any gradient you want, or simply need a refresher, check out my Ultimate Guide to CSS Gradients.

Step 2: Clip It

Now, we need to make the gradient only show where the text is. We can do that by using background-clip.

To learn more about this and other background properties, check out my article explaining all background properties.

You might already know that this property lets us clip the background to the border, padding, or content box of an element.

But it can also clip the background to the text.

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
}

If you try this code, it will look like the gradient just disappeared. That’s because the gradient is under the text.

Step 3: Reveal It

To show the gradient underneath our text, we need to make the text transparent. We can do that by setting color: transparent.

.gradient-text {
  background-image: linear-gradient(60deg, #E21143, #FFB03A);
  background-clip: text;
  color: transparent;
}

You might be tempted to use the background shorthand here. Don’t.

Unfortunately, the background shorthand version of background-clip doesn’t support the text keyword.

Fallback

If you must support Internet Explorer, you'll have to fallback to a flat color.

Wrap everything we've written before in an @supports rule. This way it'll only be rendered in modern browsers.

Then, outside of the @supports block, set a fallback color for the text. It should probably be a color that appears in your gradient and works well with the rest of the design.

.gradient-text {
  color: red;
}

@supports (background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(60deg, #E21143, #FFB03A);
    background-clip: text;
    color: transparent;
  }
}

Make sure the fallback comes before the actual gradient styles.

NOTE: Even though the @supports rule itself is also not supported in IE, everything inside will still be ignored, which is exactly what we want.

Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. Follow me for more web development tips.

Some other articles you might enjoy

Ultimate Guide to CSS Gradients

Mateusz Hadryś — Tue, 29 Dec 2020 18:57:02 +0000

Gradients are back.

They are bold, eye-catching, and playful. When used correctly they can breathe life into a drab and lifeless design.

In this article, I'll show you how to create gradients in CSS, so you can make your websites stand out.

What this article is about

This article aims to explain both the syntax and concepts behind CSS gradients. Topics covered include:

Linear & Radial gradient syntax
What are color stops?
Changing the direction of linear gradients
How CSS angles work?
Changing the size, shape & position of radial gradients

But first, let's get one thing out of the way…

Gradients are Images in CSS

For this reason, we need to set gradients as a background-image. You might think it's obvious, but I had trouble remembering that at first.

I used to try and set gradients as background-color all the time. If you have trouble remembering this like me, use the background shorthand.

Fastest Way to Set CSS Backgrounds

Mateusz Hadryś ・ Dec 21 '20

#webdev #tutorial #css

It lets us use the same property for colors and images. Including gradients.

Linear Gradients

A linear gradient is made up of two basic components: direction and color-stops.

Color Stops

Color stops define what colors make up the gradient and optionally, where to put them.

We can add as many color stops as we want. By default, they'll be spaced evenly along the gradient line.

Color stops also allow us to set the starting position of each color manually. We do so by adding a percentage (with 0% being the start of the gradient and 100% its end ) after the color.

/* The GIF below animates between these 3 gradients */
background: linear-gradient(yellow, red 10%, blue);
background: linear-gradient(yellow, red 50%, blue);
background: linear-gradient(yellow, red 90%, blue);

We can also set an ending position for a color, if we want a color to take up more space.

background: linear-gradient(yellow, red 25% 75%, blue);

Here are a few examples of manually positioned color stops

/* Automatic Positions */
background: linear-gradient(lightpink, crimson, indigo);

/* Manual Starting Positions */
background: linear-gradient(lightpink 40%, crimson 50%, indigo 60%);

/* Manual Starting & Ending Positions */
background: linear-gradient(lightpink 0% 20%, crimson 35% 65%, indigo 80% 100%);

Direction

By default, a gradient goes from top to bottom.

background: linear-gradient(yellow, red);

To get a gradient going from one side to the opposite side, write to *, where * is one of four keywords: top, bottom, left, and right.

For example: to left gives us a right-to-left gradient.

By using two keywords, we get a gradient going from one corner to the opposite corner.

For example: to bottom right gives us a gradient going from the top-left to the bottom-right corner.

If you need more precision than side-to-side or corner-to-corner, you can specify a custom angle.

CSS Angles

There are four different angle units in CSS, but we're only going to focus on two: degrees deg and turns turn.

Degrees - a value from 0 to 360 with a deg unit, where 0deg = to top, 90deg = to right, etc.

background: linear-gradient(150deg, yellow, red);

Turns are exactly what they sound like: 360 degree turns. This means that: 0.5turn = 180deg, 0.25turn = 90deg, etc.

There's one thing you need to remember. CSS angles work differently than the ones you remember from school. They resemble a clock. Starting at the top and going clockwise.

The gradient's direction is indicated by the spinning arm. The corresponding angle in degrees is shown in the center.

Negative Angles

An angle can also be a negative number, like: -90deg or -0.25turn. Negative values represent counter-clockwise angles. So for example -45deg is the same as 315deg.

// Detect dark theme var iframe = document.getElementById('tweet-1341791778521948161-227'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1341791778521948161&theme=dark" }

Radial Gradients

Radial gradients are different from linear gradients in one important way. Instead of progressing in a straight line, the colors radiate outwards from a single point.

The area of a radial gradient is defined by the origin point's position, the ending shape, and its size.

Let's look at these three components in more detail.

Position

By default, the origin point is in the center of the element. We can change that by writing at *, where * is one or two length or percentage values indicating the origin point's coordinates.

/* These two declarations do the same */
background: radial-gradient(at 100% 100%, yellow, red);
background: radial-gradient(at bottom right, yellow, red);

background: radial-gradient(at 20% 70%, yellow, red);

Setting the origin's position works exactly like the background-position property. You can read more about it in the article below.

All CSS Background Properties Explained in 5 Minutes

Mateusz Hadryś ・ Dec 16 '20

#css #webdev #tutorial #beginners

Shape

By default, the gradient spans the entire area of the element. This means that if the element is not a square, the gradient will stretch and become an ellipse.

If we want the gradient to stay a circle - regardless of the container's proportions - we need to set the gradient's shape to circle.

background: radial-gradient(circle, yellow, red);

color-stop positions are adjusted in this example to better illustrate the differences

Size

The ending shape's size is defined by where its edge meets the element.

Which part of the element? That can be set with one of four keywords: closest-side, closest-corner, farthest-side, and farthest-corner.

You can see all size & shape combinations below. The gradient area is marked using light ellipses and circles, and the 0% and 100% points are marked with a dark arrow.

Even though farthest-corner and closest-corner might look identical, they produce very different results when the origin position is not in the center.

We can also specify an absolute value for the ending shape's size, using a length value (radius) in case of circles and two percentages (horizontal and vertical radius) in case of an ellipse.

Putting it all together

We can combine changing the shape, size, and position. All three values make up the first parameter of radial-gradient(). That's why we only put one comma after them.

background: radial-gradient(circle closest-side at bottom right, yellow, red);

All three values are optional and default to: ellipse farthest-corner at center center.

Here are a few examples of radial gradients, for you to get used to the syntax:

/* A */
background: radial-gradient(lightpink, crimson, indigo);
/* B */
background: radial-gradient(closest-side, lightpink, crimson, indigo);
/* C */
background: radial-gradient(closest-side at 40% 65%, lightpink, crimson, indigo);

/* D */
background: radial-gradient(circle, lightpink, crimson, indigo);
/* E */
background: radial-gradient(circle closest-side, lightpink, crimson, indigo);
/* F */
background: radial-gradient(circle 120px at 30% 75%, lightpink, crimson, indigo);

This should be enough to craft almost any gradient you want.

A few more advanced bits of info as well as conic and repeating gradients will be discussed in part 2. Follow me on Twitter to be notified when it's released.

Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. Follow me for more web development tips.

Some other articles you might enjoy

Fastest Way to Set CSS Backgrounds

Mateusz Hadryś — Mon, 21 Dec 2020 16:36:27 +0000

Speed is essential in web development. Especially when prototyping.

If you're not a 150WPM typing ninja, adding a background can be time consuming. And let's be honest...

Who wants to type background-*: value; 8 times?

background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;

That's a lot of typing, and a lot of space. We can use the background shorthand to turn all of that into a single line:

background: scroll padding-box border-box transparent none 0% 0%/auto repeat;

Neat, huh?

In this article I want to show you how this shorthand works, and the rules you need to follow for it to work.

If you're not familiar with all of the properties above, please take a minute to read my quick introduction to background properties before reading this article. It will help you understand what's going on.

All CSS Background Properties Explained in 5 Minutes

Mateusz Hadryś ・ Dec 16 '20

#css #webdev #tutorial #beginners

Required Properties

You might be thinking to yourself now:

Okay, it's nice that they're on the same line. But do I still need to write all of these values?

No. Unlike the font shorthand, all properties in the background shorthand are optional.

Full Text Styling With a Single Line of CSS

Mateusz Hadryś ・ Nov 11 '20

#css #webdev #tutorial

Be careful though.

If you don’t include a value for one of the properties, its default value will be used. Even if you’ve defined that property earlier.

Order of Properties

The order of properties doesn't matter. With a few small exceptions:

Position & Size

background-size can only come immediately after background-position, and the two have to be separated with a slash (/).

This means you can't set background-size without background-position using this shorthand.

There are two ways to work around that though:

Use the default background-position value, which is: 0% 0%. For example 0% 0%/50% would set background-size to 50% and keep background-position unchanged.
Set background-size separately after the background shorthand. Like this:

background: url("cat.png");
background-size: 50%;

IMPORTANT: If you try setting background-size in the shorthand using one of its keywords (cover or contain) without the background-position the whole background property will be treated as invalid and ignored.

📦 Origin & Clip

Because the values of background-origin and background-clip heavily overlap...

border-box
padding-box
content-box
text - This one's the exception. It's available only for background-clip.

...setting them using the shorthand works a bit differently.

If you only include one of the box values, it will be used for both background-origin and background-clip.

If you include two, the first one will be used for background-origin and the second one for background-clip.

If you don't use any, both properties will keep their default values.

This is why I've labeled them as box in the images.

NOTE: As far as I know, background-clip's text value is not supported by the background shorthand. So if you want to create gradient text, you will have to set background-clip separately.

Multi Value Syntax

A few of the background properties can accept more than one value. It's important to keep those values next to each other and in the correct order.

background-size - If two values are provided, the first sets the width of the image, and the second its height.

background-repeat - If two values are provided, the first sets the repeat behavior for the horizontal (x) axis, and the second for the vertical (y) axis.

background-position - If two values are provided, the first controls the image's horizontal position, and the second its vertical position.

🎨 Color & Image

The background shorthand allows you to set a color or image as a background. You can even set both.

Wait, why would I need both?

Setting a fallback background-color can be useful in many cases:

If the image URL is broken or the image takes a long time to load, the background color can be a good placeholder.
If the image contains transparency the background color will be visible underneath.
If the value of background-repeat is other than repeat or round, there are likely to be areas not covered by the image. Those areas will be filled with the background color. You can see this above, in the background-repeat example image.

Gradients

Have you ever tried to set a gradient as the background-color, only to be surprised that it doesn't work?

Ultimate Guide to CSS Gradients

Mateusz Hadryś ・ Dec 29 '20

#css #tutorial #webdev #design

That's because gradients are images in CSS. This is where the background shorthand comes in handy.

// Detect dark theme var iframe = document.getElementById('tweet-1341050093722603521-607'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1341050093722603521&theme=dark" }

Layers

Just like all other background-* properties, the background shorthand can accept multiple comma-separated layers.

background: url(cat.png) no-repeat scroll, 
            url(grass-texture.jpg) repeat local green;

There is just one thing you have to keep in mind. An element can only have one background-color, and it has to be on the last (bottom) layer. Otherwise the entire property will be treated as invalid.

Cheatsheet

If you ever need a reminder, here’s a handy cheatsheet 😃

Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. Follow me for more web development tips.

Another article you might enjoy

Some other articles you might enjoy

All CSS Background Properties Explained in 5 Minutes

Mateusz Hadryś — Wed, 16 Dec 2020 21:02:22 +0000

I remember when I first tried setting an image background in CSS.

What I thought would be a simple task took me down a rabbit hole of learning 8 different background-* properties. It took me hours to figure out what they all did and how they interacted.

Now, I want to teach you everything you need to know about CSS background. In minutes instead of hours.

🎨 Color

Property: background-color
Default Value: transparent

The most commonly used background property. It lets us change the color of an element's background.

The color can be specified using rgb, hsl or hex notation.

/* Without Transparency */
background-color: rgb(0,0,0);
background-color: hsl(0,0%,0%);
background-color: #000000;

/* With 50% Transparency */
background-color: rgba(0,0,0,0.5);
background-color: hsla(0,0%,0%,0.5);
background-color: #0000007F;

You can also use one of the 140 predefined colors, or the transparent keyword.

📷 Image

Property: background-image
Default Value: none

The star of the show. Almost all other background properties modify it in some way.

It allows us to set an image as the element's background.

To do it, use the url() function with a relative or absolute URL as its parameter. The URL should be wrapped in quotes " or apostrophes '.

When you choose to go with a relative URL, remember that it's relative to the stylesheet, not the webpage.

background-image: url("image.png");

But why can't we just write the URL without some fancy function? Because there are other image sources in CSS. For example: gradients.

background-image: linear-gradient(red,yellow);

Yeah, gradients are images in CSS. If you find this hard to remember like me, use the background shorthand. It does the remembering for you 😄

Fastest Way to Set CSS Backgrounds

Mateusz Hadryś ・ Dec 21 '20

#webdev #tutorial #css

Repeat

Property: background-repeat
Default Value: repeat

background-repeat determines what happens, if the image is smaller than the element it serves as a background for.

The possible values of background-repeat are better shown than told:

Size

Property: background-size
Default Value: auto auto

This property controls the size of the background image. Most of the time it's used with one of two keywords:

cover - It fills (covers) the entire area of the element with the image, without stretching. Even if it means that parts of the image won't be visible.
contain - The opposite of cover. It makes sure that the entire image fits (is contained) in the element, without squashing.

Unless background-size is set to no-repeat, setting background-size: contain will result in image tiling.

The value of background-size can also be a percentage or length (px,cm,em etc.).

A percentage value is relative to the element's size, or more specifically the area specified by background-origin. More on that property later.

background-size can be set using a one-value or two-value syntax.

When only one value is provided, it sets the image's width. Height is set automatically to preserve proportions.
When two values are provided, the first one sets the width, and the second sets the height.

When using two values, the image might get stretched. To prevent stretching, set one value using a length/percentage and the other using the auto keyword.

Position

Property: background-position
Default Value: 0% 0%

Maybe you've noticed that when we change an element's size, it stays glued to the top-left corner. We can change that by using background-position.

There are four keywords we can use: top, bottom, left, and right. As well as any length or percentage value.

Just like background-size, we can use a one-value or two-value syntax.

When using one value, it sets the image's horizontal (x-axis) position. The vertical (y-axis) position defaults to 50%.
When using two values, the first sets the horizontal position and the second: vertical.

NOTE: Length values set the distance of the image's top-left corner from the element's top-left corner. Percentage and keyword values set the position of the image's mid-point on a given axis.

Combining background-position: center with background-size: cover or contain is an easy way to achieve responsive images, that scale well with the element and the page.

Attachment

Property: background-attachment
Default Value: scroll

background-attachment allows you to control how your background image reacts to scrolling.

Possible values are:

scroll - Scrolls with the page, but not with the element's contents.
fixed - Fixed to the viewport. Acts like a window to something behind the page.
local - Scrolls with the page and the element's contents.

If you're confused by that, don't worry. It's tricky to understand without examples. Play around with the demo below until you get a better feeling for how this property works.

Origin

Property: background-origin
Default Value: padding-box

This property sets the background's origin. It uses three keywords:

border-box - The background starts at the outer edge of the border. It goes under it, which you can see if the border is semi-transparent, dashed, or dotted.
padding-box - The background starts at the inner edge of the border.
content-box - The background starts where the element's content does.

Both background-position and background-size are relative to the box set by this property.

Clip

Property: background-clip
Default Value: border-box

Even though background-clip shares most of its values with background-origin and their results might look similar, they are actually quite different.

This property doesn't modify the position of the background in any way.

It clips the background to the selected box. This means that any parts of the background outside the area set by this property will not be visible.

border-box - The background is clipped to the outer edge of the border. It will be visible under the border, padding and content.
padding-box - The background is clipped to the inner edge of the border. It will be visible under the padding and content.
content-box - The background is clipped to the content area. It will only be visible under the element's content.
text - The background will only be visible under the element's text content. Make sure to set color: transparent to see the background. This can be used to achieve some cool effects like: gradient text.

NOTE: If the area set by background-clip is smaller than the one set by background-origin the outer parts of the image will be cut off. Make sure there's nothing important there.

Layers

All background properties, except background-color accept multiple values, separated by commas. That's because every element can have multiple background layers.

background-image: url(cat.png), url(grass-texture.jpg);
background-repeat: no-repeat, repeat;
background-attachment: scroll, local;
background-image: green;

The first (leftmost) value corresponds to the top layer. The last (rightmost) value, is the bottom layer.

But managing layers across multiple properties can get messy pretty quickly. For example: What if you decide to add another image layer at the top of the layer stack but forget to update other `background-` properties?*

This problem can be prevented by using the background shorthand.

I hope this introduction made this topic easier to understand, and can serve as a reference, if you ever need a refresher.

Thanks for reading. If you have any questions, ask in the comments. Follow me for more web development tips.

Full Text Styling With a Single Line of CSS

Mateusz Hadryś — Wed, 11 Nov 2020 16:26:06 +0000

Am I the only one who always thought the font shorthand was too confusing to use?

Well, I finally decided to start using it.

Now I want to share with you what I've learned. All the quirks, gotchas and use-cases.

It's a very useful tool, if you're willing to play by its rules.

What does it do?

The font shorthand allows you to set almost all font-related properties with a single line of CSS.

Including:

font-style
font-variant
font-weight
font-size
line-height
font-family
font-stretch - this one is not used as often, and won't be discussed in this article

Required properties

Out of these, only font-size and font-family are required. If you omit either, the whole line will be ignored. All other properties can be omitted.

Be careful though.

If you don't specify a property, it will be reset to its default value. Even if you've defined that property earlier. Including in a parent element.

font-kerning and font-size-adjust will also be reset by this shorthand, even though they can't be set by it.

Order of Properties

The order of properties allows for some flexibility, but there are a few rules.

Style, Variant & Weight

font-style, font-variant, and font-weight have to come before font-size. Their individual order doesn't matter though.

If you don't remember what these properties do, here's a quick reminder:

font-style - allows you to choose between normal, italic, and oblique styles of the font. Oblique is basically the same as italic but uses the same glyphs as the normal font, just slanted.
font-variant - allows you to choose between the normal, and small-caps variants of the font.
font-weight - allows you to choose the thickness (weight) of the font. Either by using keywords like normal, bold, lighter, bolder or a numeric value from 100 to 900.

Font Family

font-family always has to be last.

It can be a keyword or font name. If the font name contains spaces, it should be wrapped in quotation marks.

You can also specify additional fallback fonts, separated by commas. They will be used (from left to right), if the preferred font is unavailable.

/* keyword */
font: 15px serif;
/* font name */
font: 15px "Playfair Display";
/* font name with keyword fallback */
font: 15px "Playfair Display", serif;
/* font name with 2 fallbacks: font name and keyword */
font: 15px "Playfair Display", Merriweather, serif;

Font Size & Line Height

font-size and line-height are right in the middle. After font-style, font-variant, and font-weight. But before font-family.

line-height has to come right after font-size, separated with a slash (/). If you don't specify line-height, the slash should also be omitted.

Gotchas & Use-Cases

The overriding behavior of the font shorthand can make it a bit unpredictable. For this reason it's best suited for small websites, quick prototyping, and experimentation.

Cheatsheet

If you ever forget the exact order and rules of this shorthand, here's a handy cheatsheet 😃

Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. Follow me for more web development tips.

Another article you might enjoy

Beautiful Custom List Styles Using Modern CSS

Mateusz Hadryś ・ Oct 12 '20 ・ 7 min read

#css #tutorial #webdev #design

Beautiful Custom List Styles Using Modern CSS

Mateusz Hadryś — Mon, 12 Oct 2020 16:53:45 +0000

Lists don't have to be boring.

And with the new ::marker pseudo-element, making them interesting doesn't have to be painful either. The browser support for this pseudo-element used to be spotty, but with its addition in Chrome 86, it'll soon be universal.

I'm going to show you how to make your lists stand out.

We're going to cover:

Built-in list styles
Changing the color of list markers
Emoji list bullets
CSS counters
Custom image bullets
Fully custom list markers using ::before

Built-In Styles

Let's begin by changing the look of list markers using the built-in styles. We do so, by using the list-style-type property. There are a few style options for both ordered and unordered lists to choose from:

These are just the most common options. The full list can be found on MDN.

Custom Styles

The ::marker pseudo-element lets us change the style of the list marker (bullet/number). using a subset of CSS properties. The allowed properties are:

All font properties (font-size, font-family etc.)
color
animation and transition properties
direction, text-combine-upright, unicode-bidi
and content

Let's see what it can do.

🌈 Changing the Color

The most basic way to make your lists look better, is to change the color of the list markers. We can do that just like we would change the color of normal text.

What if you need to support older browsers? You can apply the color to the li and wrap the text inside it in another element. Like this:

HTML

<ul>
  <li><span class="text-wrapper">Muffin candy canes<span></li>
  <li><span class="text-wrapper">Fruitcake powder cookie<span></li> 
  <li><span class="text-wrapper">Biscuit muffin liquorice<span></li>
</ul>

CSS

ul { color: #0E6FC9; }
.text-wrapper { color: black; }

Or create a fully custom marker with ::before. More on that later.

Custom Text

You might be thinking: Okay, but is changing color all that ::marker can do?

No. Far from it. It lets us to change the content of the list marker, by using the aptly named content property.

You can use any text as content, including Unicode symbols like the ones above or even emoji...

🔫 Emoji Bullets

As I said above, you can use emoji as list markers.

li::marker {
  content: "😁"
}

But you probably don't want to use the same emoji for every list item. To fix that, we can set our emojis in a data-* attribute in HTML.

<ul>
  <li data-emoji="🤪">Oat cake jelly beans</li>
  <li data-emoji="😴">Croissant cotton candy</li> 
  <li data-emoji="🤠">Jelly beans muffin tiramisu</li>
</ul>

And retrieve them in CSS using the attr() function.

li::marker {
  content: attr(data-emoji);
}

We can even change the marker's content on hover using the :hover pseudo-class.

li:hover::marker {
  content: "🤯";
}

And here's the result.

Okay, but what about ordered lists? Can we change their markers' content like this?

Custom Ordered Lists

To change the content of an ordered list marker, we need to know which item it belongs to. We need to know its position in the list. That's where CSS counters come in.

We need to create a counter on the list, and increment it on every list item. Then retrieve the current value of the counter using the counter() CSS function. We use the result of this function as the value of the content property.

/* Import fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Sigmar+One&display=swap');

ol {
  list-style-position: inside;
  /* Start counter */
  counter-reset: list;
}

li {
  font-family: 'Raleway', sans-serif;
  /* Increment counter on each list item */
  counter-increment: list;
}

li::marker {
  font-family: "Sigmar One", cursive;
  /* Use counter to display the current number */
  content: "Step " counter(list) ". ";
}

Let's go through the code, to understand what's happening.

We use counter-reset to create a new counter named list. The name is arbitrary and completely up to you. But why is the property called counter-reset? Because the counter is actually global and we need to reset its value on every list. That's why we have to set it on the ol and not the list items.

We've created our counter, but it's useless if its value never changes. We need to increment it on every list item. To do that we set counter-increment: list; on our <li>'s.

Now that we have an auto-incrementing value, we use it in the content property of our marker. And here's where the magic happens. We can combine the value of our counter with other strings, optionally separated by whitespace.

A FEW NOTES:

In the example, I imported some fonts from Google Fonts. It's not necessary but I'm using it to distinguish between the list item's content and the marker.
Because the marker's content in the example got pretty long, it was possible for it to go off the screen in some circumstances. That's why I used list-style-position: inside; to move the marker inside the list item's box.
You can put a number after the counter name to start from a different value. It would look something like this: counter-reset: list 5; and the first three items of that list would have numbers 6, 7, and 8.
Counters can be used on any html element, not just lists.

Custom Image Bullets

Okay, we can change the color, style, and text content of list markers, but what if we want something completely custom? We'll have to use images.

To do that, we set an image as the marker's content using the url() CSS function.

Fully Custom List Markers

If all of the above options still aren't enough for you, there's still one more option. One that allows us to do anything we want with our list markers. It's more work and a bit of a hack, but it's useful if all else fails.

We can use the ::before pseudo element to create our own markers. This method allows us to create custom backgrounds for our markers, easily scale image bullets and more.

Clear the defaults

Before we can create our own markers, we have to get rid of the default ones.

ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

This gives us a blank canvas to work with.

Note: This can create accessibility issues, so you should add role="list" to the list in your HTML

<ol role="list">
  <li>Latvia</li>
  <li>China</li>
  <li>Portugal</li>
</ol>

Create the marker

When using ::before you have access to all CSS properties and not just a subset like with ::marker.

You are however responsible for setting the marker’s content, spacing between the marker and the list item’s text, and proper alignment.

As an example, here’s how to create the objectively best-looking list of all time. Explanations are included in the comments.

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

body {  
  background: center/contain no-repeat linear-gradient(135deg, red,orange,yellow,green,blue,violet); 
  color: red;
  font: italic bold 3.2rem cursive;
  text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black;
  letter-spacing: 3px;
}

ol {
  /* Remove defaults */
  margin: 0;
  padding: 0;
  list-style: none;

  /* Use CSS grid for spacing between list items */
  display: grid;
  gap: 20px;

  /* Create counter */
  counter-reset: list;
}

li {
  /* Use CSS grid for spacing between marker and list item contents */
  display: grid;
  grid-template-columns: min-content 500px;
  column-gap: 20px;

  /* Increment counter */
  counter-increment: list;
}

li::before {
  /* Set content to an empty string */
  content: counter(list);

  /* Add a background image for the marker */
  background: center/contain no-repeat url("path/to/image.png");

  /* Add animation */
  animation: 3s linear 1s infinite spin;

  /* Create the box and center its contents */
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Additional text styles */
  color: white;
}

The above code results in this:

A few notes:

Using the background property for the marker's image allows us to scale and adjust it more easily.
If you want to create custom image bullets for an unordered list using ::before & background, you have to set content: "" in order for the marker to be rendered.

That's all, you're now a master of list styling.

Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments.

Ultimate Guide to CSS Gradients

Mateusz Hadryś ・ Dec 29 '20

#css #tutorial #webdev #design

How to use multiple versions of node on Windows

Mateusz Hadryś ・ Jun 15 '19

#node #javascript #webdev #tutorial

4 Ways to Get All Characters in a String in JavaScript

Mateusz Hadryś — Mon, 17 Aug 2020 19:01:26 +0000

How to get all characters in a string?

This question might sound simple at first, but in JavaScript nothing is ever what it seems.

If you google "How to get all characters in a string" or "How to get an array of characters from string", you will most likely find something like:

var chars = "Some string".split("")

// or...

var str = "Some string"
for (var i = 0; i < str.length; i++) {
  console.log(str.charAt(i))
}

...and people arguing if you should use str.charAt() or the bracket notation.

However, these answers are usually pretty old and don't take into account one important issue...

Emoji 🔥☠️

Or more generally: surrogate pairs. Most characters in javascript are encoded using 2 bytes, but that’s not enough to encode every symbol. To deal with this problem, emoji and some other rare symbols are encoded with a pair of 2-byte characters — a surrogate pair.

Surrogate pairs didn’t exist when JavaScript was created, so some parts of the language still treat these symbols like 2 separate characters. You can copy this snippet into your browser console to see for yourself:

"💩".length
// returns 2

This can make the above methods sometimes return incorrect results, like this:

"💩".split("") // returns ["�", "�"]

ES6 to the rescue!

ES6 introduced the concept of iterators and along with it, a solution to the surrogate pairs problem.

Array.from()

The simplest way to create an array from any iterable, including strings.

const str = "✨𝄞💩"
const chars = Array.from(str)
// chars is now: ["✨","𝄞","💩"]

Spread operator

The shortest way to do it, but sacrificing readability.

const str = "✨𝄞💩"
const chars = [...str]
// chars is now: ["✨","𝄞","💩"]

For...of loop

The most versatile and performant of the bunch.

const str = "✨𝄞💩"
for (let char of str) {
  console.log(char)
}
// Logs to the console:
// "✨"
// "𝄞"
// "💩"

RegExp unicode flag

If you're feeling fancy you can also use a regular expression with the unicode flag.

const str = "✨𝄞💩"
const chars = str.match(/./gu)
// chars is now: ["✨","𝄞","💩"]

Browser support

All of the above are ES6 features, which at this point, is supported pretty much everywhere, with the exception of internet explorer. If you need to support internet explorer you should transpile your code with a tool like Babel. Or just use one of the old methods, but be aware of their limitations.

Thanks for reading.

If you know other clever ways to turn strings into character arrays, let me know in the comments, I always like learning new things.

Read, Edit & Write Files in Client-Side JavaScript

Mateusz Hadryś ・ Dec 19 '19 ・ 15 min read

#javascript #webdev #programming

All CSS Background Properties Explained in 5 Minutes

Mateusz Hadryś ・ Dec 16 '20 ・ 6 min read

#css #webdev #tutorial #beginners

Read, Edit & Write Files in Client-Side JavaScript

Mateusz Hadryś — Thu, 19 Dec 2019 22:40:04 +0000

Lately I've been working on a side-project, which was based around reading and manipulating files to generate custom thumbnails for Vivaldi browser's speed dials. I was able to do it all inside the browser, without any server-side processing, and I want to share with you everything that I've learned.

This guide covers:

using objectURLs and FileReader to read files from the user's filesystem
getting a file's information like: size, type and more
showing previews of selected image files
handling errors and loading states
CHEATSHEET AT THE END

It also acts as an introduction to my guide on using the Canvas API, which is coming very soon, so stay tuned for that!

Selecting files from the filesystem

To allow your users to select a file from their device, you will first have to create an input with the type of file.

<input type="file" id="inputElement" />

To actually get the files from this input, you will need to access the files property of the input element. It's best to do that by registering a change event listener on the input element. This way a callback function will be called every time a user selects a file.

The way you do that will depend on the framework you're using. To make this guide as widely applicable as possible, we will be using vanilla JS.

// get a reference to the inputElement in any way you choose
const inputElement = document.getElementById("inputElement")

// get the value once
inputElement.files[0]

// get the value every time the user selects a new file
inputElement.addEventListener("change", (e) => {
  // e.target points to the input element
  const selectedFile = e.target.files[0]
})

The resulting selectedFile is a File object.

Properties of files

The file input gives us File objects, so in addition to the contents of the file itself, we have access to some additional information, such as:

name - the file's name, including the extension but without the path (e.g. "cat_photo.png")
size - the file's size in bytes. To get the size in a more human readable format, you can use a library like filesize or bytes. For simple use cases, you can even write your own conversion logic.
type - the file's MIME type (e.g. "text/plain", "image/png")
lastModified - the last modified date of the file, represented as the number of milliseconds since the Unix epoch (January 1, 1970 at midnight). You can use the Date constructor to convert this timestamp to a more useful javascript Date object.

Files also have two other properties: File.lastModifiedDate and File.webkitRelativePath, the first of which is deprecated and the other non-standard, so you should probably avoid using them. Keep in mind that all of these properties are read-only.

Files & Blobs

In addition to File, javascript has another way of representing files, called Blob

Blob contains a generic file's data, along with information about its size and type. File is actually just a more specialised Blob, used to represent specifically files in a user's filesystem. It inherits all of Blob's methods and properties and contains some additional information about the file's name and last modified date.

These two are basically interchangeable, and you can use one almost everywhere you can use the other. If you absolutely need to convert them though, you can do so using the other type's constructor.

const file = new File([blob], "fileName", { type: blob.type })
const blob = new Blob([file], { type: file.type })

Reading the contents of files

Okay, so we know how to select and get information about files, but how do we actually read what's inside them? Well, that depends on what kind of file it is and what you want to do with it. For the purposes of this article, we will only focus on images and text files.

The most flexible and well-supported method of reading a file's contents is the FileReader API. It's an event driven API, so instead of simply calling a function and getting the file's contents, we must take some extra steps.

Let's start with reading a text file:

const inputElement = document.getElementById("inputElement")

inputElement.onchange = (e) => {
  const file = inputElement.files[0]
  if (!file) return
  const reader = new FileReader()
  reader.onload = (e) => {
    // e.target points to the reader
    const textContent = e.target.result
    console.log(`The content of ${file.name} is ${textContent}`)
  }
  reader.onerror = (e) => {
    const error = e.target.error
    console.error(`Error occured while reading ${file.name}`, error)
  }
  reader.readAsText(file)
}

First we get the file input element, and register a change event listener on it by assigning a callback function to its onchange property
We get the selected file
We check if a file was actually selected and if not, (which might happen for example if a user clicks 'cancel' in the selection window) we exit the function
Next, we create an instance of FileReader
Then we register any event handlers we might need. To access the file contents we only really need the load event, which triggers when the read operation has finished succesfully. However it's usually a good idea to register an error handler as well. A full list of possible events is available a bit further into the article, along with some error handling tips, so keep reading 😉
After all event listeners are registered, we initiate the read operation by calling one of the readAs methods, in this case readAsText
After the reading operation is finished, the file contents will be available in the reader.result property, which we can access inside the load event handler (the reader.onload callback function).

Quick tip: You can access the reader inside an event handler in multiple ways: reader === e.target === this. Keep in mind that this is not available in arrow functions.

reader.onchange = () => console.log(reader.result) // closure
reader.onchange = (e) => console.log(e.target.result) // event target
reader.onchange = function() => console.log(this.result) // 'this'

Error Handling

In case of an error, the error event handler is called, and you can find the Error object in reader.error. Possible error codes are:

FileError.NOT_FOUND_ERR - the file was not found
FileError.NOT_READABLE_ERR - the file could not be read
FileError.SECURITY_ERR - there was a security issue
FileError.ABORT_ERR - thrown when reader.abort() is called while there's no read operation in progress

Most of the time there is no need to differentiate between these error types, maybe except for ABORT_ERR which is generally harmless and can be ignored.

Ready State

The read operation is asynchronous, so don't try accessing reader.result right after the readAs call. If you really need to check the reader.result value outside of the load event handler, make sure to first check the value of reader.readyState, which will be one of 3 values:

0 - The reader has been created, but no readAs method was called yet. (EMPTY)
1 - One of the readAs methods has been called. A read operation is in progress, and no errors have occurred yet. (LOADING)
2 - The operation has finished. This could mean one of three things: the File has been read succesfully, a read error has occured, or reader.abort() was called and the operation was canceled. (DONE)

The reader.result property will be populated only in case of a successful read operation. In all other cases it will be null.

const reader = new FileReader()
// readyState is 0, result is null
reader.onload = () => {
  // readyState is 2, result is the file's content
}
reader.onerror = () => {
  // readyState is 2, result is null
}
// readyState is 0, result is null
reader.readAsText(file)
// readyState is 1, result is null

The same applies to reader.error which should be accessed inside the error event handler.

FileReader Event Types

We've already explored the two most common read event types, now let's quickly cover the rest. FileReader has six event types:

load - triggered when a read operation is successfully completed
error - triggered when a read operation encounters an error
progress - triggered periodically while a File or Blob is being read and contains information about the progress of the operation. Can be used to implement loading bars.
abort - triggered when a read operation is cancelled, i.e. when reader.abort() is called
loadstart - triggered when a read operation starts
loadend - triggered when a read operation is finished, regardless of if it succeeded or failed

You've probably noticed that FileReader events work similarly to regular DOM events. I find that thinking about them as such makes it a lot easier to understand their non-linear, asynchronous nature.

Sidenote: Just as with DOM events, it's possible to register event handlers by using addEventListener, or by assigning a callback function to the "oneventname" property of a reader.

Blob.text()

It's also worth noting that for reading text files there exists a newer and simpler method: Blob.text(). Remember that File is just a Blob with some added functionality, so it inherits all of Blob's methods, including this one. This means you can use this method on both Blobs and Files.

// using promise.then()
file.text().then(text => /* do something */);
// using async/await
const text = await file.text();

Doesn't it look nicer? I think it does, but there's a catch. This API is quite new and the browser support is still pretty poor.

Working with images

Now that we know how to read text files, let's move on to something more exciting: images. To illustrate this topic, we're going to build a simple preview of the selected image.

File types

First let's make sure that the selected file is actually an image. We can do that with the help of the accept attribute.

<!-- any image type will be accepted -->
<input type="file" accept="image/*" />
<!-- only .png, .jpg, and .gif files will be accepted -->
<input type="file" accept="image/png, image/jpeg, image/gif" />

The accept attribute, allows you to specify what kind of files the user will be allowed to select. It uses a comma-separated list of unique file type specifiers. Each type specifier can be in one of the following formats:

A case-insensitive filename extension, starting with a period (".") character. For example: .jpg, .JPEG, .gif, .doc
A MIME type, for example: image/jpeg, image/png, text/plain, audio/wav
image/* which means "any image file"
audio/* which means "any audio file"
video/* which means "any video file"

You can mix and match these to suite your particular use-case.

HTML validation isn't perfect though. For example, on Windows it will only hide the files not matching your criteria, but you can still select "All files (*.*)" or use drag-and-drop to select any file you want. All of this means that it's also a good idea to check the file type inside your javascript code.

// allows any image file
if (file.type.startsWith("image/")) {
  /* handle the files */
}

// only allows specified types
if (["image/png", "image/jpeg"].includes(file.type)) {
  /* handle the files */
}

Or you could set up separate processing flows for different file types

// assuming that processImage and processText are functions
if (file.type.startsWith("image/")) {
  reader.onload = processImage
  reader.readAsDataURL(file)
} else if (file.type.startsWith("text/")) {
  reader.onload = processText
  reader.readAsText(file)
}

Unfortunately startsWith() and includes() don't work in older browsers like Internet Explorer, so if you need to support them, you might want to look into some workarounds or polyfills.

Also, keep in mind that "any image file" will match (among others):

images with less-than-perfect browser support, like webp
images with transparency, like png
animated images, like gif's

So make sure you support all of these functionalities, or explicitly specify only the types you plan on supporting.

Data URLs & Object URLs

To display a selected image, we will need an HTML img and a URL for the img.src attribute. There are two different ways to represent an image file as a URL: a dataURL and objectURL. There are some important differences between the two, so let's quickly run through them.

DataURL

It's the result of reader.readAsDataURL(). It's a string containing the file's type and the actual binary data of the file, encoded using base64.

It's format can vary a bit depending on the type of data it represents, but for most files it looks like this: data:<mediatype>;base64,<data>, where <mediatype> is a MIME type and <data> is the base64-encoded file.

Because it actually contains the file's data, it can be used anywhere after it's generated, without the need for the original file. Pretty cool!

ObjectURL

Also known as blob URL. It's the result of URL.createObjectURL(). It is a newer API, but still pretty well supported. It won't however work in IE version 9 and lower.

It's faster and more concise than FileReader but it comes with its own set of headaches and limitations. In contrast to dataURL, it doesn't contain any file data. It's just a reference to a file. Another important difference is the fact that URL.createObjectURL() is synchronous.

The objectURL has to be revoked when it is no longer needed. The browser will do it automatically when the document is unloaded, however for optimal performance and memory usage, you shouldn't rely on that behavior, especially in large applications with many objectURLs. Instead you should explicitly call URL.revokeObjectURL() when the url is no longer needed, for example in the image.onload event handler, which we will discuss later.

Sidenote - to get the base64-encoded file data from a dataURL, simply extract the part of the string after the comma, like this: dataUrl.slice(dataUrl.indexOf(",") + 1)

Displaying selected images

Most of the time objectURLs and dataURLs can be used interchangeably, but they each have their own strengths and weaknesses. This means you should probably learn both and choose which one to use on a case-by-case basis. Let's look at examples of both of them, to get a better feeling for how each one works.

<!-- HTML markup for the next two examples -->
<input type="file" id="inputElement" accept="image/*" />
<div id="previewContainer">
  <!-- The preview will go here -->
</div>

Using FileReader & dataURLs

const inputElement = document.getElementById("inputElement")
const previewContainer = document.getElementById("previewContainer")

inputElement.onchange = (e) => {
  const file = e.target.files[0]
  if (!file) return
  const reader = new FileReader()
  reader.onload = (e) => {
    const img = document.createElement("img")
    const dataURL = e.target.result
    img.src = dataURL
    previewContainer.appendChild(img)
  }
  reader.readAsDataURL(file)
}

We register a change event listener on the file input
Inside the onchange callback, we get the selected file and create an instance of FileReader
We register a load event listener on the reader
Inside the onload callback we create a new image element,
Then we get the dataURL from reader.result (remember, e.target points to the reader) and assign it to the img.src attribute like we would in HTML
Once the src attribute is set, we append the entire img element to the DOM as a child of our previewContainer. (We actually could have just created the img tag in HTML and updated the src attribute in javascript, but doing it this way actually prepares us for working with multiple images at once, and manipulating images in a Canvas)
When everything is set, we start the read operation using reader.readAsDataURL(file), which will trigger our onload listener when it finishes reading the file.

Using objectURLs

const inputElement = document.getElementById("inputElement")
const previewContainer = document.getElementById("previewContainer")

inputElement.onchange = (e) => {
  const file = e.target.files[0]
  if (!file) return
  const img = document.createElement("img")
  img.onload = (e) => {
    URL.revokeObjectURL(e.target.src) // optional, but recommended
  }
  const objectURL = URL.createObjectURL(file)
  img.src = objectURL
  previewContainer.appendChild(img)
}

We register a change event listener on the file input
Inside the onchange callback, we get the selected file and create a new image element
We register a load event handler on the image
Inside the onload callback, URL.revokeObjectURL() will revoke the objectURL once the image is fully loaded and the url is no longer needed. This step is not necessary, but highly recommended. Keep in mind that if you are going to need that url somewhere else later, you shouldn't revoke it yet.
Once the image is fully loaded, we won't need the objectURL anymore. So inside the onload callback, we revoke that url. To do that, we pass it as an argument to URL.revokeObjectURL(). We can get the url straight from the image's src attribute.
We create the objectURL, by passing the selected file as an argument to URL.createObjectURL() and assign it to the img.src attribute.
Once the src attribute is set, we append the entire img element to the DOM as a child of our previewContainer.

Sidenote: Elsewhere you might see images created by using the Image constructor i.e. const img = new Image(). Most of the time it's equivalent to document.createElement("img") and I've never had any problems with either of them. However there might be some edge cases (described in this StackOverflow thread), which seem to make the latter a more reliable option.

FileList

Before we move on to reading multiple files, let's clear something up. The files property isn't actually an Array, even though it looks like one 😮. It's a special FileList data type. This means it doesn't have access to the normal array methods (like map, forEach, reduce), so to iterate over the list you will have to get creative. I will show you a few different ways to do this, but if you want to know more, check out this StackOverflow thread.

// use a 'for' loop
for (let i = 0; i < files.length; i++) {
  /* ... */
}

// use a 'for...of' loop
for (let file of files) {
  /* ... */
}

// below, I used 'forEach' as an example but it'll work with any array method

// call the function with a bound 'this'
Array.prototype.forEach.call(files, file => {/* ... */})
[].forEach.call(files, file => {/* ... */})

// use ES6 spread syntax to transform it into an Array
[...files].forEach(files, file => {/* ... */})

// use Array.from() to transform it into an Array (equivalent to spread syntax)
Array.from(files).forEach(files, file => {/* ... */})

You might also have noticed that even though we've only been working with a singe file (until now), we always had to write files[0]. That's because regardless of whether the multiple attribute is set or not, inputElement.files is always a FileList. This means that even if the input only accepts a single file, you still have to provide the index, which in the case of an only item is 0.

// get number of selected files
let numFiles = inputElement.files.length

let file
// get a single file
file = inputElement.files[0]
// or using the special 'FileList.item()' method
file = inputElement.files.item(0)

Sidenote - According to the w3c working draft, FileList might be replaced by a regular Array in the near future. Fingers crossed 🤞

The FileList interface should be considered "at risk" since the general trend on the Web Platform is to replace such interfaces with the Array platform object in ECMAScript [ECMA-262]. In particular, this means syntax of the sort filelist.item(0) is at risk; most other programmatic use of FileList is unlikely to be affected by the eventual migration to an Array type.

Reading Multiple Files

By default the file input only allows us to select a single file. To allow selecting multiple files at once, add the multiple attribute to the html element.

<input type="file" multiple />

In this example I'll be using FileReader because it's asynchronous and won't block the UI when processing many files. But if you want to you can use objectURLs instead and in most cases you should be fine.

Because we've already done most of this before, I'll only use comments to call out important bits of the code. If you skipped the previous sections, I recommend you go back and catch up, I'll wait 😉

<!-- Modified HTML from the previous example. Notice the 'multiple' attribute -->
<input type="file" id="inputElement" accept="image/*" multiple />
<ul id="previewList">
  <!-- The previews will go here, inside individual list items -->
</ul>

const inputElement = document.getElementById("inputElement")
const previewList = document.getElementById("previewList")

inputElement.onchange = (e) => {
  const files = Array.from(e.target.files) // transform FileList into an Array

  files.forEach((file) => {
    if (!file) return // if you use a regular 'for' loop, use continue instead

    // if the file isn't an image, we skip it
    if (!file.type.startsWith("image/")) return

    // create a separate reader for every file to avoid conflicts
    const reader = new FileReader()

    reader.onload = (e) => {
      const listItem = document.createElement("li")
      const img = document.createElement("img")

      const dataURL = e.target.result
      img.src = dataURL
      img.height = 100 // set a uniform height for all images (optional)

      listItem.appendChild(img)
      previewList.appendChild(listItem)
    }

    reader.readAsDataURL(file)
  })
}

As you can see, we create a separate FileReader instance for every file. The same could probably be achieved by calling readAsDataURL inside a loadend event handler, but this does the job and is probably faster anyway.

Cheatsheet

Here’s a cheatsheet of the entire file-handling flow, including all classes and methods involved.

I hope this guide was clear and got you the answers you needed. If something was unclear, or you would like me to expand on some topic, let me know in the comments 💬 All constructive criticism is welcome.

Like I said at the beginning I'm currently working on part 2 of this guide, which will cover the Canvas API, so consider following me here, or onmy twitter 🐦 to know when it comes out.

Also, if you're a Vivaldi fan like I am, check out my Vivaldi Thumbnail Generator, it's a free tool I created because I was tired of creating thumbnails manually. It uses a lot of the concepts from this post and you can check out the entire source code on GitHub.

4 Ways to Get All Characters in a String in JavaScript

Mateusz Hadryś ・ Aug 17 '20

#javascript #webdev #beginners #programming

Ultimate Guide to CSS Gradients

Mateusz Hadryś ・ Dec 29 '20

#css #tutorial #webdev #design

How to use multiple versions of node on Windows

Mateusz Hadryś — Sat, 15 Jun 2019 22:20:02 +0000

Whether you're coming from linux, or are new to node. You're probably going to need to work with multiple versions of node at some point. Whether you're working on multiple projects or want it for testing purposes, a node version manager is a very useful tool. On linux it's easy, just install nvm and you're set. On windows it's not that simple... or is it?

nvm-windows to the rescue!

It's a fully-featured command line node version manager for Windows. It even comes with a simple gui installer, which is great.

Here are the steps to getting up and running with nvm-windows

If you have any version of node installed already, make sure to uninstall it first. Make sure to also remove any remaining node and npm directories (e.g. "C:\Program Files\nodejs" and "C:\Users<user_name>\AppData\Roaming\npm")
Get the installer from the releases page: https://github.com/coreybutler/nvm-windows/releases
Go through the installation process, nvm will be added to your PATH automatically
Run cmd or any terminal emulator you might be using
Use the command nvm install version_number where version_number is the version of node you want to install (e.g. 8 or 10)
Repeat the above command for every version you need
Finally, run nvm use full_version_number where full_version_number is the full version of node you want to currently use (e.g. 8.16.0 or 10.0.0)

Can I use Yarn with nvm-windows?

Yes... but... Unfortunately, there are some issues with using yarn alongside nvm-windows. Basically, if you want to use yarn with nvm-windows, you will have to uninstall yarn (If you installed it using the gui installer). Then you will have to install it using npm install --global yarn every time you switch the node version. There are also issues when installing packages globally with yarn (https://stackoverflow.com/questions/43108816/can-yarn-and-nvm-coexist-on-windows), so you may have to use npm for that anyway.

What about WSL?

If you're coming from linux you might be tempted to try running the regular nvm on WSL. It might work for you, but I personally had many issues with it, so I don't recommend it. WSL2 might solve those issues though, so fingers crossed.

More info

If you need further information, run nvm without any arguments to show the list of available commands or visit the GitHub page of the project: https://github.com/coreybutler/nvm-windows

Thanks for reading

When I first found nvm-windows I thought it would be hacky and difficult to set up, but it surprised me, so I decided to write this to show others how easy node version management actually is on Windows.

DEV Community: Mateusz Hadryś

Gradient Text In CSS

Step 1: Add a Gradient

Step 2: Clip It

Step 3: Reveal It

Fallback

Some other articles you might enjoy

Ultimate Guide to CSS Gradients

What this article is about

Gradients are Images in CSS

Fastest Way to Set CSS Backgrounds

Mateusz Hadryś ・ Dec 21 '20

Linear Gradients

Color Stops

Direction

CSS Angles

Negative Angles

Radial Gradients

Position

All CSS Background Properties Explained in 5 Minutes

Mateusz Hadryś ・ Dec 16 '20

Shape

Size

Putting it all together

Some other articles you might enjoy

Fastest Way to Set CSS Backgrounds

All CSS Background Properties Explained in 5 Minutes

Mateusz Hadryś ・ Dec 16 '20

Required Properties

Full Text Styling With a Single Line of CSS

Mateusz Hadryś ・ Nov 11 '20

Order of Properties

Position & Size

📦 Origin & Clip

Multi Value Syntax

🎨 Color & Image

Gradients

Ultimate Guide to CSS Gradients

Mateusz Hadryś ・ Dec 29 '20

Layers

Cheatsheet

Another article you might enjoy

Some other articles you might enjoy

All CSS Background Properties Explained in 5 Minutes

🎨 Color

📷 Image

Fastest Way to Set CSS Backgrounds

Mateusz Hadryś ・ Dec 21 '20

Repeat

Size

Position

Attachment

Origin

Clip

Layers

Other articles you might enjoy

Full Text Styling With a Single Line of CSS

What does it do?

Required properties

Order of Properties

Style, Variant & Weight

Font Family

Font Size & Line Height

Gotchas & Use-Cases

Cheatsheet

Another article you might enjoy

Beautiful Custom List Styles Using Modern CSS

Mateusz Hadryś ・ Oct 12 '20 ・ 7 min read

Beautiful Custom List Styles Using Modern CSS

Built-In Styles

Custom Styles

🌈 Changing the Color

Custom Text

🔫 Emoji Bullets

Custom Ordered Lists

Custom Image Bullets

Fully Custom List Markers

Clear the defaults

Create the marker

Other articles you might enjoy