DEV Community: codeyStein

The CSS Gradient Handbook: Mastering Techniques, Tops

codeyStein — Mon, 11 Sep 2023 12:00:00 +0000

CSS gradients, a topic which doesn't seem of much importance at once. There is so much you can do with gradients in CSS I am honestly blown away. Before writing this article the only thing I knew was how to create basic two-colored gradients, (I sometimes forgot how to do that too), but now I realize how much more CSS gradients have to offer!

What Are CSS Gradients And How Do They Work?
Working with Linear Gradients
- Changing Gradient Directions
- Using Angles
Creating Gradients with Multiple Colors
Using Radial Gradients
- Positioning The Center of a Gradient
- Radial Gradient Shape
- Sizing Radial Gradients
Working with Conic Gradients
- Positioning The Center of a Conic Gradient
- Using Angles
Creating Repeating Gradients
- Repeating Linear Gradients
- Repeating Radial Gradients
- Repeating Conic Gradients
Advanced Techniques
- Specifying Color Positions
- Create Harsh Lines
- Create Gradient Hints
- Create Stacked Gradients
- Opacity and Overlays
Online Resources
Final Thoughts

Gradient Magic: Elevate Your Web Design With CSS Gradients

What Are CSS Gradients And How Do They Work?

You can set boring solid colors in CSS pretty easily, it's one of the first things we learn when learning CSS, however, you can also create smooth color gradients with CSS. Before writing this article, I honestly had no idea that you could do so much with gradients, I only knew how to make two-colored gradients; turns out, that gradients can do a lot more than that.

Colors gradients in CSS are defined with the CSS image data type, meaning they can be used anywhere you can use the image data type. They are made by smoothly transitioning between two or multiple colors. There are three main types of gradients:

Linear Gradients (goes directions: up, down, left, right, and diagonally),
Radial Gradients (defined by their center point, then expands from that point),
Conic Gradients (rotated around a center point)

However, you can also make some pretty cool patterns by repeating gradients using the functions: reapting-linear-gradient(), reapting-radial-gradient(), and reapting-conical-gradient() respectfully.

Basic syntax example:

<gradient-type>-gradient(direction, color1, color2, color3, ...);

CSS gradients are rendered by the browser, meaning that they can be resized without any noticeable delay loss of quality, unlike traditional raster images.

Working with Linear Gradients

Let's start with the basics, then work our way up. Linear gradients, you've probably used them. They create progress in a straight line. You need at least two colors to define a linear gradient, which will be shown in a top-down direction if no direction or angle is specified.

Linear gradient syntax:

linear-gradient(<direction-angle>, first-color, ..., last-color)

Here's a basic example:

  .gradient {
        background-color: purple; // For browsers that do not support gradients, which shouldn't be a problem, will be treated as a fallback

      background-image: linear-gradient(red, blue); // Will be shown if browser does support
  }
    ```
{% endraw %}



![Basic linear gradient example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8zxulu6xikfuy22ui3c.png)

### Changing Gradient Directions
 By default, gradients progress from top to bottom, you can change this by writing the desired direction before specifying your colors, like this:
{% raw %}

```CSS
  .gradient {
        background-color: purple;

      background-image: linear-gradient(to right, red, blue);
  }

Easy enough, right?
Here are some other direction options for linear gradients:

(default) to bottom - sets the direction of colors to be north to south.
to top - sets the direction of colors to be north to south.
to right - sets the direction of colors to be west to east.
to left - sets the direction of colors to be east to west.

You can also define diagonal angles using directions:

to bottom right - sets the direction of colors to be northwest to southeast.
to bottom left - sets the direction of colors to be northeast to south-est.
to top right - sets the direction of colors to be southeast to northwest.
to top left - sets the direction of colors to be southwest to south-east.

Simple example using to bottom right:

  .gradient {
        background-color: purple;

      background-image: linear-gradient(to bottom right, red, blue);
  }

Using Angles

Accustomed to over-engineering things like the typical programmer? (JK, you can also use angles to achieve more specific angles) Don't worry, you can also use angles to define directions, like this:

  .gradient {
        background-color: purple;

      background-image: linear-gradient(110deg, red, blue);
  }

Angles can be confusing. Here's a quick but very useful to use when working with angles, thanks mdn web docks!

Creating Gradients with Multiple Colors

You can also create gradients with multiple color stops too, you don't have to limit yourself to only two. You can specify where you want your color stops to be, however, by default, they will be spaced evenly.

Here's an example of a rainbow (7 colors) gradient with no direction or angle specified (top-down):

  .gradient {
        background-color: purple;

      background-image: linear-gradient(red,orange,yellow,green,cyan,blue,violet);

  }

However, you can also use directions:

  .gradient {
        background-color: purple;

      background-image: linear-gradient(to right, red,orange,yellow,green,cyan,blue,violet);

  }

Or angles:

  .gradient {
        background-color: purple;

      background-image: linear-gradient(70deg, red,orange,yellow,green,cyan,blue,violet);

  }

Using Radial Gradients

Radial gradients are similar to linear gradients except, unlike linear gradients, they don't progress in a straight line but instead are defined by their center point and then expand from that point.

Radial gradient syntax:

radial-gradient(<shape size> at <position>, color1, color2, color3, ...);

Like linear gradients, to create a simple radial gradient, you only need two colors. By default, the colors will be evenly distributed, and the shape will match the aspect ratio of its container, by default elliptical.

A simple radial gradient can be defined like this:

  .gradient {
        background-color: purple;

      background-image: radial-gradient(red, blue);
  }

Positioning The Center of a Gradient

Radial gradients are defined by their center, however, you can also specify the center of the gradient using keywords (similar to how we position linear-gradients), percentages, or absolute values.

  .gradient {
        background-color: purple;

      background: radial-gradient(at 0% 45%, red, blue);
  }

Radial Gradient Shape

Radial gradients can have the shape of either a circle or ellipse; ellipse being the default value.

Here's an example of a circle radial gradient

  .gradient {
        background-color: purple;

      background-image: radial-gradient(circle, red, blue);
  }

Sizing Radial Gradients

You can also specify the size of radial gradients, kind of like how you would specify the position of a linear-gradient.

There are 4 total keywords you could use to specify the size of a gradient:

(default) farthest-corner
closest-corner,
closest-side,
farthest-side

farthest-corner (default) example:

Makes the gradient reach the farthest corner of its container. This means it will extend from the center to the point where it is farthest from the center.

  .gradient {
        background-color: purple;

  background-image: radial-gradient(
    ellipse farthest-corner at 90% 90%,
    red,
    yellow 10%,
    blue 50%,
    green
  );
}

farthest-side example

Makes the gradient reach the farthest side of its container. Meaning that it will extend from the center to the point where it's at the farthest point of the center, reaching the edge of its container.

I found this one a little confusing at first, as well as the difference between farthest-corner and farthest-side; the example demonstrates the difference as well as what it does a little bit easier:

  .gradient {
        background-color: purple;

      background-image: radial-gradient(
        ellipse farthest-side at 90% 90%,
        red,
        yellow 10%,
        blue 50%,
        green
      );
}

closest-corner example:

This makes the gradient reach the closest corner of its container. Meaning that it will extend from the center to the point where it's closest to the center.

  .gradient {
        background-color: purple;

      background-image: radial-gradient(
        ellipse closest-corner,
        red,
        yellow 10%,
        blue 50%,
        green
      );
}

closest-side example:
Makes the gradient reach the closest side of its container. This means that if you're using radial-gradient as a background, it will extend from the center, to the point where it's closest to the center making it stop before it reaches the edge of the container.

Similar to farthest-side, the difference between the closest-corner and closest-side is more evident in an example:

  .gradient {
        background-color: purple;

      background-image: radial-gradient(
        ellipse closest-side,
        red,
        yellow 10%,
        blue 50%,
        green
      );        
}

Working with Conic Gradients

In my opinion, the most fun of the three, the conic gradient creates a gradient that rotates around a center point. Which leads to different fun effects. When used with the right colors and the right angle, it might look just like a cone (hence the name, "conic").

Like the linear-gradient and radial-gradient, they require at least two colors. A conic gradient will not accept an absolute value for the color stops, but instead degrees or percentages. Color stops are start at the top, and then progress in a clockwise direction.

Syntax:

conic-gradient(from <angle> at <position>, firstColor <degree>, ..., finalColor <degree>)

By default, the angle is set to 0deg and the position is centered. If no angle is specified, if no degree is specified in a color stop, they will be spread equally.

RELATED: ⭐️ Five Underated CSS Properties You NEED to Try Out!

Basic Example:

  .gradient {
        background-color: purple;

      background-image: conical-gradient(red, blue);
  }

Positioning The Center of a Conic Gradient

Similar to radial gradients, you can position the center point that a gradient will rotate around using key terms, percentages, or absolute values using the keyword at.

  .gradient {
        background-color: purple;

          background-image: conical-gradient(at 0%, 75%, red, blue);
  }

Using Angles

from <angle>, specifies the starting angle by which the conic gradient will be rotated. You can also define the angle for specific color stops by including a degree after it.

  .gradient {
        background-color: purple;

        background-image: conic-gradient(from 90deg, red, yellow, blue);
  }

In this example, we specified from 90deg, meaning that our gradient will run through the colors red, yellow, and blue starting at 90 degrees.

Creating Repeating Gradients

By default, we can't repeat the color stops in a linear-gradient, radial-gradient, or conical-gradient. However, we have the equivalent repeating-linear-gradient, repeating-radial-gradient, and repeating-conical-gradient functions that do allow this type of functionality.

Repeating gradients allows us to create cool and interesting patterns using only CSS and the power of gradients.

Repeating Linear Gradients

In the following example, we have a repeated linear gradient at 45 degrees. It starts in red, then we have another red color stop at 5px then we have a blue color stop at 5px, and a final blue color stop at 10px. The different reds and blues color stops create the repeating striped pattern.

  .gradient {
        background-color: purple;

        background-image: repeating-linear-gradient(
        45deg, 
        red, 
        red 5px,
        blue 5px,
        blue 10px
  );
  }

Repeating Radial Gradients

Here, we have a similar example, except with a radial gradient, meaning it will expand from the center point outward, and not progress in a linear line.

  .gradient {
        background-color: purple;

      background: repeating-radial-gradient(
        red,
        red 5px,
        blue 5px,
        blue 10px
      );
  }

Repeating Conic Gradients

In this example, we have a repeated conic gradient that starts with red at 0 degrees (at the top of a circle) until it reaches 50 degrees. Then we have a final blue color stop that starts from blue until we reach 90 degrees. This is then repeated.

  .gradient {
        background-color: purple;

      background: repeating-conic-gradient(
          red 0deg 50deg,
          blue 50deg 90deg
      );
  }

Advanced Techniques

Specifying Color Positions

By default, color-stop positions will range from 0% to 100%, however, we can specify where we want to position each of our color stops using absolute values, and percentages.

  .gradient {
        background-color: purple;

      background: linear-gradient(to right, blue 16px, red, yellow 75%);
  }

Create Harsh Lines

However, we may also want to create harsh or more abrupt lines with no gradual transitioning between. In this example, where we have two colors, we have our first color stop, red, which goes through it reaches 50% of the container's height, after that, we have an abrupt change to blue with no gradual transition between the two.

  .gradient {
        background-color: purple;

      background: linear-gradient(to bottom right, red 50%, blue 50%);
  }

Create Gradient Hints

Gradient hints allow you to transition from one color to another in specific percentages, or absolute values of a gradient. Here's an example comparing a default linear gradient with a gradient that has a color hint.

Gradient hint:

  .gradient {
        background-color: purple;

        background-image: linear-gradient(red, 10%, blue);
  }

Basic linear gradient, with no hint.

Create Stacked Gradients

Opacity and Overlays

Gradients can even be stacked on top of one another. The gradients will still be visible as long as the top ones aren't fully opaque.

This is better understood with an example:

  .gradient {
        background-color: purple;

      background:
        linear-gradient(
            217deg,
            rgba(255, 0, 0, 0.8),
            rgba(255, 0, 0, 0) 70.71%
         ), 
        linear-gradient(
          127deg, 
          rgba(0, 255, 0, 0.8),
          rgba(0, 255, 0, 0)
          70.71%
        ),
          linear-gradient(
          336deg,
          rgba(0, 0, 255, 0.8),
          rgba(0, 0, 255, 0) 70.71%
        );
  }

In this example, we're combining three different gradients to create a singular image. Our first gradient starts at 217 degrees (or a more-or-less to bottom-left direction), with the first color stop being red with an alpha value of 0.8. Then our second color stop is also red, except we have no alpha value (alpha values are needed to get an overlaying gradient) but instead, we specify the color stop's position to end at 70.71%. This is repeated with each gradient, with the only thing that changes being the color (the second gradient uses green, and the third one uses blue), as well as the degree of the gradient.

To understand how these are overlayed, here are the three gradients put separately:

Gradient one:

Gradient two:

Gradient three:

Due to them having an alpha value, when combined we see a mixture of these three gradients.

Online Resources

Before we end, I want to mention a few online resources that have helped me understand CSS gradients better, as well as provide some online resources that make the creation of these complicated creatures easier, if you have read through this article (which btw, I admire you if you did and appreciate it very much), you might have noticed that they might not be the most fun thing to work with.

The MDN Web Docs: Using CSS Gradients have been a huge help in the creation of this article, their docs are well-written (and open-source).
- w3school's docs on CSS gradients are appropriate for beginners
- Both CSS gradients (Chris Coyier) and A Complete Guide to CSS Gradients (Geoff Graham) from CSSTricks are awesome articles that are worth the read! ## Final Thoughts This has been the longest article I've written (characters). So I help it's of much help for you to understand gradients. My idea to write an article about gradients was actually to teach web developers and designers how to effectively use gradients to enhance their users' web experience, but it kind of turned out looking kind of like a documentation : / (which btw, if you're stuck choosing colors, this article about color psychology might be the way to create effective and engaging designs and logos).

🏠 Home Page

🔥 Color Psychology for Web Developers Enhance User Experience and Engagement

Color Psychology for Web Developers Enhance User Experience and Engagement

codeyStein — Mon, 04 Sep 2023 12:00:00 +0000

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site, thanks!

Colour psychology is a powerful tool for developers and designers alike. Understanding the fundamentals of color psychology is essential for creating effective designs and having a better user experience.

In this article, we'll learn how to use color psychology effectively, and how each colour can impact your design and when you should use each colour. If you find this useful, share it to someone who might be able to use this and bookmark this article so you can go through it again when you're creating a new design!

Introduction
What Is Color Psychology
red
orange
yellow
green
blue
purple
brown
black
white
conclusion

Introduction

Take a look at these three successful brand logos:

What do they all have in common? They are all red, and they are all in the fast-food industry.
But why did they choose red?

What about these two:

What do they all have in common? They are black logos for luxurious brands. But why did they choose black?

Color psychology is why.

Have you ever seen a meditation app logo with warm, red colors? Or a website educating people about
planting trees with purple colors?

What Is Color Psychology

colour psychology is the study of how different color hues cause different human behaviors.
People's emotions can be influenced by the various characteristics of a color. In design,
this is an important subject, as we can use this to our advantage to make more engaging designs,
which is what we'll learn in this article.

Red

Red shows anger, excitement, energy, war, danger, strength, power, passion, courage, determination,
attention, and love. It's the colour of fire and it stimulates hunger, it's used to create urgency,
draw attention, caution, and encouragement.

This is why most fast food logos are red. And also why this is a good option if you're making another fast-food greasy restaurant as red will stimulate hunger and draw attention.

Examples

orange

Orange is a combination of red and yellow. It shows joy, sunshine, and tropics. It represents enthusiasm,
fascination, happiness, creativity, determination, attraction, success, and encouragement. It shows
communication, and fun, draws attention, and expresses freedom.

If you're creating creative agency branding, orange would be a perfect color. It shows great communication,
success, and creativity.

Examples

yellow

Yellow is used to stimulate awareness, energize, affect mood, and draw attention. It's the colour of sunshine
and it's associated with joy, happiness, intellect, and energy. It's associated with food. Bright yellow is
used to get attention.

Yellow is a colour that demonstrates positivity and happiness, which is why yellow would work in a home decor brand,
for a warm and welcoming experience.

Examples

green

Green is commonly referred to as the colour of nature. It stands for growth, health, wealth, freshness,
and relaxation. Dark green is commonly associated with money.

Green is directly related to nature, which you can use it to promote 'Green products', an environmental
organization, or anything that is closely related to nature and ecological awareness. But remember that
a dull, dark green can also represent money, making it suitable for a finance app.

Example

blue

The colour of the sky and the sea is blue. Blue stands for trust, loyalty, wisdom, confidence, intelligence, and truth. It evokes calmness and it's commonly associated as the colour of tranquility. It
can be found in various cleaning products, air, and sky (e.g.: airlines), water, and sea.

If you're building a financial app or a bank branding, blue is a very good idea to use. Blue shows trust,
reliability, security, and confidence. Blue is widely used in the finance industry for this reason.

Examples

purple

Purple is a colour very rarely found in nature. It is commonly preferred by pre-adolescent children. It's
a combination of blue (stability), and red (energy). It is commonly referred to as the colour of
royalty. It is related to power, nobility, luxury, and ambition, and it expresses wealth and
extravagance. It's associated with wisdom, dignity, independence, creativity, mystery, and magic.

Purple represents luxury and royalty making it a good option for luxury brands. But it could also
be used for video games; purple is a color that pre-adolescents really like. What's another thing
pre-adolescents also like? Games! Purple also symbolizes magic and mystery making it perfect for
a magic video game.

Examples

brown

Brown can give a feeling of warmth, security, and earthiness. People associate neutral and natural
with brown. It's commonly used to evoke feelings related to the natural world, as well as
connoting organic wholesome feelings in general. It also provokes feelings related to comfort,
high quality, strength, and honesty.

If you're creating branding for an organic food company (or anything organic/agricultural-related
really), brown would work great; it would create a feeling of comfort, high quality, and obviously,
a sense of nature, earthiness, and warmth.

Examples

black

Black shows strongness, and boldness. It can also represent that someone or something is mysterious and rebellious. It's a timeless, classic, and elegant colour.

Knowing this, black would be a great color to use for a luxurious fashion brand. Black shows sophistication, and elegance, perfect for a logo for a fashion brand.

Examples

white

White is associated with innocence and purity. It's a simple, and clean colour and can symbolize perfection. It is used to show luxury, open-mindedness, purity, cleanness, and perfection.

Meditation and mental health apps would benefit from using white as it conveys a sense of mental clarity and open-mindedness. White would help users feel in a peaceful full state of mind giving its purity, and perfection.

Examples

conclusion

If you're a designer or a front-end developer, understanding the principles of color psychology is essential as it can significantly enhance your user's experience and greatly increase analytics; However, if not used effectively, it can diminish everything as well. I hope you learned how colours can have a meaningful impact on your users as well as some ways each colour can be used. Thanks for reading, if you found this article useful, I would suggest bookmark it in your browser (or devto) so you can make sure to use these practices when working on a new design, and share it to someone who might find it useful too!

🔥 RegExp Basics: Its Not That Bad!

🏠 Home Page

RegExp Basics: It's Not That Hard!

codeyStein — Mon, 16 Jan 2023 23:01:32 +0000

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site

First of all, let me apologize for the late post but I was sick this weekend and busy with school. Now, onto the topic for today; Regular expressions in JavaScript was a topic that I always felt scared to try. But it's something an engineer (JavaScript or not) will eventually have to touch
on, and something I never thought would be as useful as it is. My goal today is for you to understand basic RegExp concepts without feeling overwhelmed.

Introduction
Regexp Search Method
RegExp Replace Method
RegExp Modifiers & Patterns
Conclusion

Introduction

Regular Expressions (regexp) in JavaScript are used to search and replace both independent characters, or more complicated patterns.

Before we get started with learning some basic regex methods let's first understand its syntax, which looks something like this:

/pattern/modifiers

for example, if we have:

/thenetblog/g

then we will be doing a global search for the pattern 'thenetblog'. easy enough right?

Regexp Search Method

As I mentioned before, regexp is commonly used to both search, and replace a pattern of text. The search() method will return the position of the match (if found), else it will return -1.

Syntax:
text.search(/pattern/modifiers)

let searchThis = "the best blog is The Net Blog fr"
let pattern = searchThis.search(/The Net Blog/i)
// expected return: 17

console.log(pattern)
// tip: console log is your friend when testing!

Good so far? Great, cause this next part is not that hard either!

RELATED: ⭐️ Five USEFUL JavaScript Array Methods You MIGHT Not Know!

Regexp Replace method

The replace() method will replace the indicated pattern with a string of text.

Syntax:

text.replace(/pattern/modifiers, "replaced text")

Example:

let replaceThis = "The Quick Brown Fox Jumps Over The Lazy Dog"
let pattern = replaceThis.replace(/Dog/i, "Cat")

console.log(pattern)
// should return: "The Quick Brown Fox Jumps Over The Lazy Cat"

RegExp Modifiers & Patterns

Patterns and Modifiers can help us perform more complicated searches, and can help us to find some special characters that can only be searched with patterns.

Basic Modifiers

These are some of the more basic and common modifiers

Patterns

Patterns can easily be identified as they are commonly placed between brackets or braces.

Another important one is the (x|y|z) which searches for alternatives separated with the | character (Couldn't include in the table as markdown uses the same character to create tables.)

Conclusion!

While admittedly scary at first, RegExp is an incredibly useful tool, which is not only used in JavaScript, but other languages and software accept RegExp too!

I appreciate you spending your time reading this post, if you'd like to read more, here you go:

🏠 Home Page

🔥 Configuring NeoVim with Lua: What You Should Know

Why I Use Qutebrowser as My Daily Browser (But You Probably Shouldn't)

codeyStein — Mon, 09 Jan 2023 09:00:00 +0000

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site

Qutebrowser is an amazing and very unique browser. The modern browser today is filled with unnecessary features, and qutebrowser helps eliminates that and makes browsing the web... Just browsing the web! Like any other browser though, Qutebrowser has its cons and trade-offs.

Attribution for crown asset used in thumbnail.

What is Qutebrowser?
Why Even Bother Learning Qutebrowser Anyways?
What's Wrong With Qutebrowser?
Final Thoughts

What Is Qutebrowser?

Qutebrowser is an open-source browser based on the QtWebEngine written in Python (which is surprisingly fash for Python). Qutebrowser is keyboard-driven, and uses Vim keymaps (for the most part), to boost your productivity. Similar to [dwb (https://bitbucket.org/portix/dwb/src/master/), if you're familiar with that.

Why Even Bother Learning Qutebrowser Anyways?

I asked the same thing. [Their website (https://qutebrowser.org/doc/faq.html) has a lot of good reasons, but my ones are for productivity reasons. You never realize how many distractions a modern browser nowadays has, and how much they slow you down. Qutebrowser eliminates all of that and not only that, but their keybinds make it so you don't even need to touch your mouse! That's just one small bit of why I use qutebrowser, here are some bullet points:

Vim and Other Keybinds (insanely boosts productivity)
Built-in ad-blocker (sadly doesn't work on YouTube.)
It allows for crazy customization.
The whole project is Open-source, and maintained with donations

Ever since I started using Qutebrowser I've, seen a huge productivity boost in my developer workflow, which is the main reason why I use it, not only as a developer but for everyday web browsing. The customization part, while not as important, I'm a big fan of (especially as I spend hours in my dotfiles trying to make them look as clean as possible), and I appreciate how Qutebrowser makes it easy to make my browser look the way I want it to look.

But most importantly, qutebrowser is a browser, and nothing else. This is exactly what I look for in a browser, I don't need a fancy start page filled with distracting ads and bloated with trackers. And the good thing is, if you need them, then Qutebrowser makes it easy to add them!

RELATED: ⭐️ Configuring NeoVim with Lua: What You Should Know

What's Wrong With Qutebrowser?

So I've talked about how great Qutebrowser is for me so far, but would I recommend it? It depends...

Qutebrowser Forms

I do have to admit, I miss auto-fill in some forms. I'm usually not a big fan of them for some security concerns (especially when using chromium-based browsers), but I do find that they save some time, and they are honestly useful in some cases, so hopefully, that's something that they add soon.

Qutebrowser Security and Privacy

While qutebrowser doesn't steal your data and does try to block some trackers, it is not nearly as much as what you can get using a Firefox or Chromium extension. Another thing worth mentioning is as the QtWebEngine is chromium based, it does allow google to add some little sneaky things here and there.

Other

other smaller things are a bit annoying about Qutebrowser (mainly the lack of extensions), like no password managers, some weird ad block problems, and videos... are just a pain, but that's not too much of a problem with me since I don't watch YouTube on my laptop, but don't expect to get the smoothest experience when watching videos.

Final Thoughts & Conclusion

Qutebrowser is a great browser, and I don't see myself going back to another browser anytime soon, but it's not for everyone, and it (like any other browser) of course has its cons.

I appreciate you spending your time reading this post, if you'd like to read more, here you go:

🏠 Home Page

🔥 Configuring NeoVim with Lua: What You Should Know

Configuring Neovim with Lua: What You Should Know

codeyStein — Mon, 02 Jan 2023 10:00:00 +0000

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site

NeoVim is such an amazing and powerful tool. It's insanely fast, flexible, and clean. I honestly can't believe I used to use vimscript to set it up, but anyways, in today's article, I'm going to show you how to start making your neovim config! But before we continue though, I'd like to give a big shout-out to Chris@machine's NeoVim from Scratch series, and ThePrimeagen, since a lot of my config is based on theirs.

But Why
Starting
Configuring Settings
Using and Setting Remaps
Plugins?
Conclusion

But why?

Before we get started, you must understand why pairing NeoVim with Lua will make such a big difference. Here are some key points of why using Lua is more beneficial than vimscript:

Organisation - NeoVim allows you to use a more clean-looking file Structure.
Faster - Lua is a lot faster than vimscript
Plugins - Specifically talking about Packer here, it makes making amazing plugins easier.
It's Lua - Let me justify a bit, vimscript is a scripting language, specifically made to configure Vim. On the other hand, Lua is an actual programing language, which allows the editor to do so many more amazing things!

And don't worry, vimscript can still be used if it is needed, which I'm going talk a little about here.

Starting

First, I'd recommend you make sure to have the latest version of NeoVim installed. You can get the latets on their releases page. Let's start by having a quick look at the tree of my personal config tree.

.
├── after
│   └── plugin
│       ├── autopairs.lua
│       ├── cmp.lua
│       ├── dashboard.lua
│       ├── lualine.lua
│       ├── nvim-tree.lua

│       ├── telescope.lua
│       └── treesitter.lua
├── init.lua
├── lua
│   └── user
│       ├── packer.lua
│       ├── remaps.lua
│       └── settings.lua
└── plugin
    └── packer_compiled.lua

5 directories, 12 files

As you can see, we have three head directories and one file in the parent directory. One of the most important files will be the init.lua file; it's the file that NeoVim will look for on every startup. If you have configured neovim before, it's similar to the init.vim file or vimrc in Vim. You must remember to require each file you want to use in the lua/user directory.

Next, we have our after directory, which only has a plugin folder inside. Inside that plugin directory, we have all of our configuration for our plugins, which we'll talk about later.

Our lua directory, is probably the one we'll be visiting the most. Here, inside our personal user directory we've split all our Lua files. The packer.lua our plugins (which we'll talk about later), the remaps.lua file is for our remaps, which we'll configure later too, and finally, our settings.lua file, where our settings are at (we'll talk about that next).

Just a quick note: you might notice we have a user directory in our lua directory. This can be named anything, some people name it after themselves, but I prefer to keep it as user. This directory, however, is important as it prevents our Lua files from interfering with other Lua files.

You don't have to worry about the plugin directory too much for now.

I wanted to address quickly: you can still use vimscript if you really need by using vim.cmd[],

vim.cmd [[
  # vim script goes here!
  syntax enable
]]

Configuring Settings

Let's start by making our editor feel a little bit more comfortable. This can easily be done by changing some of the editor's settings. Inside of lua/settings.lua or however you want to call your settings file. To make things look cleaner, I made two variables to reference the vim API. Setting up your settings is easy; the way I did it is using the following method:

local o = vim.o

o.myOption = myValue

-- Example:
o.number = true
o.history = 50
o.mouse = 'a'

On the examples above I used the scope for general settings, but of course, there are many more:

vim.o - for general settings
vim.wo - for for window-scoped options.
vim.bo - for for buffer-scoped settings.
vim.g - for for global variables, which you're commonly use for plugins.
vim.opt - to set global, window, and buffer options. Basiclly :set

If you want to see more options and what they change to the edtior, you can use :help options

Using and Setting Remaps

Remaps, while you can live without them, definitely make the developer experience a lot more comfortable, and sometimes can even boost productivity. They are also easy to set up. So In our remaps.lua file inside of lua/user we'll do:

Mode - refers to what mode the remap is for. You're gonna have to use an abreviation though, which you can find the list of here.
Function - can be either a command from the bar, or a key combination (in the same format you define the remap)
For additional arguments, you might want to use :help vim.keymap.set().

-- Some variables to be more organized
local opts = { noremap = true, silent = true } -- Commonly used option
local keymap = vim.api.nvim_set_keymap -- Calls the vim api

-- Basic Syntax:
keymap("mode", "<remap>", "function") -- more info about what these mean above.

-- Example:
keymap("n", "<C-e>", ":NvimTreeToggle<cr>", opts)
--     ^^^ will run ":NvimTreeToggle", which is a plugin that I'll talk about later

To get an idea of some remaps you might like, you can check out my personal remap file

Plugins

Plugins are a big part of neovim (and honestly one of my favorites) because they make it so easy to use Lua to make plugins, which allows the community to create amazing plugins! While there are multiple plugin managers available, I found I liked packer.nvim
the most. To get started you need a packer.lua file. In this file, we'll first install Packer, and then I added some other optional commands [(thanks to chris@machine)(https://github.com/LunarVim/Neovim-from-scratch), like making Packer use a popup window. If we move a little further down, we'll see some of the actual plugins. To install plugins you can use the following:

-- Simple syntax:
use "github/repo"

-- For more options:
use({
        'github/repo',
        -- other options, but I'd recommend using a separate config file for each plugin
})

-- Example:
use({'nvim-treesitter/nvim-treesitter', run = ':TSUpdate'})
-- ^^^ Installs nvim-treesitter, and runs ':TSUpdate' on load

Again, you can check out my config to get an idea of the plugins that I use. But here are some of my personal favorites:

treesitter - Better syntax highlighting,
gruvbox - my color scheme
telescope - fuzzy finder

Most plugins require, or you'll most likely want to configure them. Now, you can configure your plugins in the packer.lua file, but I'd recommend creating a separate file for each plugins you want to configure in after/plugin. The first thing you'll have to do in every configure file is require your plugin, then you can simply follow the docs of each specific plugin. Here are my plugin config files, which again are heavily inspired from NeoVim from Scratch.

Conclusion

I hope that you learnt at least one thing new while reading today. In short, we've learnt the basics of how to define new remaps, set settings, and use a plugin manager to use.. well plugins!

I appreciate you spending your time reading this post, if you'd like to read more here you go:

🏠 Home Page

🔥 Goodbye 2022, and What to Expect in the Fututre

Goodbye 2022 (And what to expect in the future)

codeyStein — Mon, 26 Dec 2022 12:00:00 +0000

Man, a LOT has happend this year. And first of all, I want to say that I owe it all to you, thank you for the continius support that keeps me writing these articles. I had a lot of fun during these two months (I know, it feels like a lot more).

Some Statistics
My Best Preforming Articles
What To Expect?
Reflexion

Some Statistics

Before we start, I know some of you want to see some real numbers, so here you go!

I wrote 10 Articles,
4139 words,
Got 232 followers on dev.to,
1198 reactions on dev.to,
And 96 page views on my blog page,
And 2391 post views on dev.to

My Best Performing Articles

3. Why I chose Hugo (and why you should too)

I am still a little surprised at how well this article performed as it was my first one, I talked about why I chose Hugo to do this website, and why I think it's a decent option if you're looking to make your very own static site. Feel free to check it out if you want to!

2. Five Underrated CSS Properties You NEED To Try Out!

One of the things I love most about writing articles has to be how much I learn by creating them! You'd be surprised to know how much I learned while researching for these, and this article is no exception. I'm very sure I didn't know at least half of these before creating the article.

1. Five FREE Apis You Need for Your Next Project

Like I said, in the past article, I learned a lot, but I still remember the happiness I felt when I went through the analytics. I was very surprised when I saw how well this was performed.

What to expect?

Apart from some personal ones, here are some of my goals for 2023:

First of all, as you probably didn't know, I used to post videos on YouTube (but I stopped...), and now I even kind of cringe at myself looking back at those videos. But I do want to give that style of content creation another chance.
I want to improve my English and grammar skills (it's not my first language), so I'd love to hear what you think of my writing skills

I don't plan to stop writing articles and haven't even thought about taking a break anytime soon.

Reflexion

This has been a great two months of a year, I enjoyed starting to write articles and hope to continue. And I sincerely thank all of you for supporting me through this year, and I hope to see you next year too! Happy holidays!

I appreciate you spending your time reading this post, if you'd like to read more here you go:

🏠 Home Page

Last Post

🔥 Five Time Saving React Libraries You MUST Try!

⭐️ STOP! Use this instead of create-react-app

Five Time Saving React Packages You MUST Try!

codeyStein — Mon, 19 Dec 2022 09:00:00 +0000

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site

React is a powerful tool, but sometimes you might find yourself spending way too much
time creating simple elements, that really shouldn't take that long. Today I'll be showing you five
React packages (plus bonus) that save you tons!

react-icons - Library for the most famous icons
react-color - Color picker comopnent
react-tostify - React notifications made easy!
react-datepicker - Simple package for a date picker component!
react-modal - Add modals to your website easily
(BONUS) react-spinners - Easy loading indicator component
Conclusion

react-icons - Library for the most famous icons

Let's start with the one that you probably already heard of or even used if you've been using React
in your projects for a while. If you haven't already, this is a MUST try. The package we
will be using is react-icons, it includes thousands of icons from the most famous providers
including FontAwesome, Feather Icons, and Material Design.

Installation:

# Using NPM
$ npm install react-icons --save
# Using yarn
$ yarn add react-icons

Their documentation includes examples and well... documentation

react-color - Color picker comopnent

This simple react package includes multiple easy-to-use color picker components for your website.
You will deffenetly find one that you will like as there are multiple options to choose from, or
they even make it easy to create your own!

Installation:

# Using NPM
$ npm install react-color --save
# Using yarn
$ yarn add react-color

Live Demo

Documentation

react-toastify - React notifications made easy!

I'm sure you've come across toast notifications at some point. But have you ever thought about
adding them to your website? Well, react-toastify makes that extremely easy and gives you a handful
of props for customization too. But my favorite thing about this package so far is its interactive
playground.

Installation:

# Using NPM
$ npm install react-toastify --save
# Using yarn
$ yarn add react-toastify

Live demo/playground

Documentation

react-datepicker - Simple package for a date picker component!

A date picker is something you will have to use at some point in your React journey. This
simple, lightweight package makes it easy to do just that!

Installation:

# Using NPM
$ npm install react-datepicker --save
# Using yarn
$ yarn add react-datepicker

Live demo

Documentation

(BONUS) react-spinners - Easy loading indicator component

I just had to include this one. I'm sure you've wondered at some point how some websites add these
cool-looking loading indicators to their website. They're not a must-have but deffenetly add
something that spices up your website just a little more.

Installation:

# Using NPM
$ npm install react-spinners --save
# Using yarn
$ yarn add react-spinners

Live Demo

Documentation

Conclusion

As you probably noticed, these are all simple components, but you'd be surprised to figure out
how much time you can waste adding these to your website.

I appreciate you spending your time reading this post, and if you'd like to read more here you go:

🏠 Home Page

Last Post

🔥 Five USEFUL Array Methods you MIGHT not know!

⭐️ STOP! Use this instead of create-react-app

5 USEFUL javascript array methods you might NOT know!

codeyStein — Mon, 12 Dec 2022 13:00:04 +0000

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site

Welcome! I don't want to spend too much time in the introduction this time, but today I will (hopefully) teach you and show you technically six array methods that you probably didn't know!

concat()
some()
entries()
find() and findIndex()
copyWithin()
Conclusion

concat()

The concat array method returns a new array populated with two or more arrays merged. It does not alter any existing arrays, but rather creates a new one.

Example:

const foo = [1, 2, 3';`¡
const bar = [4, 5, 6];

const foobar = foo.concat(bar);
// expected return: [1, 2, 3, 4, 5, 6]

some()

This array method tests whether or not at least one element in the array passes a test. It returns true if it finds at least one element that returns true in the provided function (callback function), else it returns false.

Example:

const foobar = [7, 13, 23];

const isValid = (elm) => elm > 13

console.log(foobar.some(isValid))
// expected return: true

entries()

The entries method returns a new Array iterator object that contains the key/value of each index of an array.

Example:

const foobar = ['a', 'b', 'c']
const iterator = foobar.entries()

console.log(iterator.next().value)
// expected return: Array [0, "a"]

console.log(iterator.next().value)
// expected return: Array [1, "b"]

console.log(iterator.next().value)
// expected return: Array [2, "c"]

find() and findIndex()

Returns the first element in an array that passes a test in the provided arrow function. If no element matches, then it returns undefined.

Example:

const foobar = [10, 15, 20, 25, 30]

const test = foobar.find(elm => elm > 18)

console.log(test)
// expected return: 20

findIndex is very similar, but instead only returns the index, and if no element matches the test provided, then returns -1. The example above is expected to return 3.

copyWithin()

I'm not even gonna lie, I still find this one a bit confusing because of the syntax, but might be useful in some situations. This method copies array elements to another position of the same array.

syntax: array.copyWithin(target, start, end)

Note that the end and start parameters are not required and if not specified, will use the first or last elements of the array.

Example:

const foobar = ["a", "b", "c"]
console.log(foobar.copyWithin(2, 0, 2))
// expected return: Array ["a", "b", "a"]

Conclusion

Did you know all of these? Because to be honest, I didn't either until I finished writing this article hahaha. But now that I do, I can think of plenty of situations where these might come in useful.

I appreciate you spending your time reading this post, if you'd like to read more here you go:

🔥 STOP! Use this instead of create-react-app!

🏠 Home Page

STOP! Use This Instead Of Create-React-App

codeyStein — Mon, 05 Dec 2022 13:29:33 +0000

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site

In 2022, using create-react-app might not be the greatest, not because it's a bad tool, but because there are other alternatives that offer a lot more and overall are just a lot more practical to use, today I'll be showing you why you should stop using creacte-react-app, and some better alternatives to it too!

What Is CRA?
Advantages of CRA
Why Not CRA?
Vite
NextJS
Final Thoughts

What Is CRA?

Create-React-App or CRA for short, is a tool mantained by FaceBook (like react), that makes the proccess of using and initializing a React app much faster and easier by just running npx create-create-app my-app in a terminal.

Advatages of CRA

Get started by just running npx create-ract-app my-app in a terminal.
No need to learn extra stuff just to start using React.
You can rely on using the built-in react-scripts to build your app.

Why Not CRA?

First of all, you might not care about this, but it is very slow, sure it only takes one command on the terminal, but that one command also takes a long time to set up. And while this can be an advantage for some people, there isn't really configuration apart from setting the name of the app (which is actually optional), and it's also not a good practice to use a blind setup, which is essentially just running npx create-react-app . without really knowing what it is doing, and while it might seem like something small, it can lead to a very bad and dangerous habbit.

CRA Sucks

Vite

Vite pronounced /vit/, is simply amazing. It is fast, allows for both ready-to-go configuration that is easy to change, and essentially just solves all the problems that CRA has, and even has some additional features too!

It is super easy to get started with Vite and there is really no hard learning curve either. If you want to learn more about all the awesome things Vite can do, Check out this repo.

NextJS

Next up (get it), we have NextJS. I LOVE NextJS, especially for bigger projects, some of my favourites from NextJS include:

Good SEO (unlike CRA)
Amazing preformance
Good for projects that can scale.

it's just a must-try if you are building any type of dashboard, interactive UI, static websites, or even just single web pages. A great example of how next is used is by looking at some famous companies like Netflix that have used it!

Final Thoughts

CRA is not practicalin 2022, there are wayyy better options that allow for even more features than CRA (and look good on a resume) and it isn't even that hard to learn all of these new technologies.

Five Underated CSS Properties You NEED To Try Out!

codeyStein — Mon, 28 Nov 2022 16:00:00 +0000

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site

Helloooo! Today I'm gonna be talking about 5 CSS properties (or actually 3 properties, and 2 pseudo classes), that I think deserve more love.

accent-color
caret-color
::selection (pseudo class)
user-select
:empty (pseudo class)
Final Thoughts

accent-color

To start of, this is a great css property just to add a little bit of more detail to your user-interface. This property applies to the input types:

<progress>
<input type="checkbox">
<input type="range">
<input type="radio">

The accent-color property allows you to very set the accent color (what you often see in radio-buttons, checkboxes, etc) to whatever color you'd like!

Example:

progress {
  accent-color: red;
}

input[type=checkbox] {
  accent-color: red;
}

input[type=radio] {
  accent-color: red;
}

input[type=range] {
  accent-color: red;
}

caret-color

While barley noticable, the caret-color works perfecly with the accent-color property, and is a very nice little detail you should consider adding and using.

Example:

input {
  caret-color: red;
}

selection (pseudo class)

While I know this is not really very unknown, I still don't see it used enough. The simple ::selection pseudo element can very easily spice up your website by changing the styles of selected elements.

Example:

::selection {
  background: red;
  color: white;
}

backdrop-filter

Like the selection property, this might not be the most unnknown property, but I still don't see it used enough. The backdrop-filter property allows you to apply a variety of filters to the area behind an element.

Options:

blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
sepia()
saturate()

Example:

div.background {
  background: url(image.jpg) no-repeat center;
  background-size: cover;
  height: 100px;
  width: 100px;
}

div.filterbox {
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: sepia(100%);
  width: 50px;
  height: 100px;
}

empty (pseudo class)

The empty pseudo class matches every element that has no children. This can be either element nodes or text (includind whitespaces). A fun usecase for this is for example when image is loading.

div {
width: 60px;
height: 60px;
background: grey;
}

div:empty {
  border: 2px solid red;
}

Final Thoughts

That's it for today's list, there are of course there are a lot more tha I haven't mentioned, but I appreciate you spending your time reading this post, if you'd like to read more here you go:

🔥 Goodbye Firebase, Hello SupaBase

🏠 Home Page

Goodbye Firebase, Hello Supabase

codeyStein — Mon, 21 Nov 2022 14:00:00 +0000

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site

Ok so we all know Firebase, a handful of tools aimed for app and web developers. Mainly used for their docuement-based database, their authentication using various social services or email and a realtime database. Supabase is a fairly new open-source alternative (unlike Firebase which is mantained by google), offer some similar tools for an afforable price too and with easy to understand and learn API.

What Is SupaBase
SupaBase's Main Features
Similarities
Differences
Final Thoughts

What Is SupaBase?

Supabase is an open-source alternative to FireBase. Unlike FireBase which uses a document-based database system, SupaBase uses a relational database managment system called PostSQL which allows it to be open-source, and allows you to easily do queries using SQL, comes with a handful of extensions and plugins, and it's very commonly used for transactional workloads (apps or webapps that need near-instant response queries.)

SupaBase's Main Features

A few key features of SupaBase include:

Storage - host images and videos with breeze,
Auth - Easy-to-implement auth system using SQL based rule engine,
Realtime - Any changes done in a database will be instantly change in your application,
Edge Functions - javascript/typescript functions which deploy globally.
Auto-Generated API which heavily improves developer expirience by allowing you to do queries from the client.,

Similarities

They both enhance the developer expirence by making it a lot easier to create databases, you can very easily create projects straight from the browser, without any extra software or tools. Both SupaBase and FireBase provide a UI-based dashboard to manage and debug your data in realtime. The two of them also allow you to easily comunicate with your database from the client. SupaBase uses subapase-js which is their equivelent to the FireBase SDK, they can both be used on the client and on a node-js environment.

Differences

The biggest difference between FireBase and SupaBase is probably how FireBase uses a document-based database and SupaBase uses postgresSQL they both have their own pros and cons, but there are some other pretty important differences other too like a big one for me is SupaBase is open-source which I've explained in this article., which does allow it to be hosted for free and makes it more secure. In terms of pricing FireBase charges you for reads, writes, and deletes (which has their own pros and cons), SupaBase on the other hand charges based on how much storage is used which allows for unlimited API requests and unlimited Auth users. We of course have to talk about preformance too, SupaBase did a benchmarking repo to compare their preformance versus FireBase's on which they found out SupaBase surpases FireBase by 4x on number of reads per second, and 3x on writes per second.

Final Thoughts

SupaBase is deffenetly worth checking out and giving out a try not only your next project, but if you'd really want to you can even try to migrate from FireBase to SupaBase on an existing project. They've basiclly got everything you'll need and offer them for a good price too.

I appreciate you spending your time reading this post, if you'd like to read more here you go:

🔥 Five Free APIs you NEED for your next project - My Last Post

🏠 Home Page

Five FREE apis you NEED for your next project!

codeyStein — Mon, 14 Nov 2022 17:10:00 +0000

Quick Plug before we get started: If you like what you read, feel free to read more over at my blog site, or read this article in my blog site

Hi! Welcome, or welcome back to a new blog post! I'm gonna be sharing with you some awesome FREE apis that you can easily implement into your projects as they don't require any api keys or authentication! Without wasting any more time, let's get started!

QR Tag API
EVA - Email Validation API
GeographQL
Image Charts
Free Forex API
Fun Bonus: EmojiHub

1. QR tag API

Simple api that allows you to generate QR codes! There are multiple use cases for this, and while you can use it as a fun little feature for your project, it could also work as project itself!

The cool thing about this is that you can specify a lot of perameters like the size of the image, or the format like SVG or PNG.

URL Endpoint: https://qrtag.net/api/qr(_transparent)(_[size]).[png|svg](?url=[URL])

Example: https://www.qrtag.net/api/qr_12.svg?url=https://the-net-blog.netlify.app

Response:

2. EVA - Email Validation API

EVA is a simple API that allows you to identify spam emails or fake emails with blazinlgly fast performance!

URL Endpoint: https://api.eva.pingutil.com/email?email=[email]

Example: `https://api.eva.pingutil.com/email?email=test@mail7.io

Response:
{ "status": "success", "data": { "email_address": "test@mail7.io", "domain": "mail7.io", "valid_syntax": true, "disposable": true, "webmail": false, "deliverable": true, "catch_all": true, "gibberish": false, "spam": false } }

3. GeographQL

Get information about countries, states, cities using GraphQL

URL Endpoint:https://api.geographql.rudio.dev/graphql

Queries: cities, city, state, states, country, countries

Example Response for a city query:
{ "data": { "city": { "id": 127759, "name": "Los Angeles", "state_id": 4655, "country_id": 236, "country_code": "US", "latitude": 34.05223, "longitude": -118.24368 } } }

4. Image Charts

Create any type of chart image you can think of! I even learnt some new type of charts while going through their documentation.

Might not be the easiest thing to get started with, but this can definitely spice up your websites and in my opinion worth giving a try.

URL Endpoint: https://image-charts.com/chart ?cht=<chart_type> &chd=<chart_data> &chs=<chart_size> &...additional_parameters...

Example URL: https://image-charts.com/chart?chs=700x190&chd=t:60,40&cht=p3&chl=Hello%7CWorld&chan&chf=ps0-0,lg,45,ffeb3b,0.2,f44336,1%7Cps0-1,lg,45,8bc34a,0.2,009688,1

Response:

5. Free Forex API

The Free Forex API gives real-time information about foreign exchange rates, and as the name implies it is of course free to use, but they are strict when it comes to abusing their service.

URL Endpoint: https://www.freeforexapi.com/api/

Example URL: https://www.freeforexapi.com/api/live?pairs=EURGBP,USDJPY

Response:
{ "rates":{ "EURGBP":{ "rate":0.891724, "timestamp":1532429549281 }, "USDJPY":{ "rate":111.1307, "timestamp":1532429549281 } }, "code":200 }

Fun Bonus: EmojiHub

EmojiHub returns random emojis from already filtered categories and groups. As well as get all the emojis from one specific group. Who knows, maybe you might find a good use for this!

URL Endpoint: emojihub.yurace.pro/api/[Option]

Example : emojihub.yurace.pro/api/random

Response:
{ name: "hugging face", category: "smileys and people", group: "face positive", htmlCode: [ "🤗" ], unicode: [ "U+1F917" ] }

I appreciate you spending your time reading this post, if you'd like to read more here you go:

🔥 What Is Open-source? A Simple Introduction - My Last Post

🏠 Home Page

DEV Community: codeyStein

The CSS Gradient Handbook: Mastering Techniques, Tops

Table Of Contents

Gradient Magic: Elevate Your Web Design With CSS Gradients

What Are CSS Gradients And How Do They Work?

Working with Linear Gradients

Using Angles

Creating Gradients with Multiple Colors

Using Radial Gradients

Positioning The Center of a Gradient

Radial Gradient Shape

Sizing Radial Gradients

farthest-corner (default) example:

farthest-side example

closest-corner example:

Working with Conic Gradients

Positioning The Center of a Conic Gradient

Using Angles

Creating Repeating Gradients

Repeating Linear Gradients

Repeating Radial Gradients

Repeating Conic Gradients

Advanced Techniques

Specifying Color Positions

Create Harsh Lines

Create Gradient Hints

Create Stacked Gradients

Opacity and Overlays

Online Resources

Color Psychology for Web Developers Enhance User Experience and Engagement

Table Of Contents

Introduction

What Is Color Psychology

Red

Examples

orange

Examples

yellow

Examples

green

Example

blue

Examples

purple

Examples

brown

Examples

black

Examples

white

Examples

conclusion

RegExp Basics: It's Not That Hard!

Table Of Contents

Introduction

Regexp Search Method

Regexp Replace method

RegExp Modifiers & Patterns

Basic Modifiers

Patterns

Conclusion!

Why I Use Qutebrowser as My Daily Browser (But You Probably Shouldn't)

Table of Contents

What Is Qutebrowser?

Why Even Bother Learning Qutebrowser Anyways?

What's Wrong With Qutebrowser?

Qutebrowser Forms

Qutebrowser Security and Privacy

Other

Final Thoughts & Conclusion

Configuring Neovim with Lua: What You Should Know

Table Of Contents

But why?

Starting

Configuring Settings

Using and Setting Remaps

Plugins

Conclusion

Goodbye 2022 (And what to expect in the future)

Table Of Contents