DEV Community: Ustariz Enzo

VSCode: Awesome Multi-cursors/selection Tricks

Ustariz Enzo — Thu, 27 Jan 2022 08:40:05 +0000

Hey fellow creators

Learn some multi-cursors and selection tricks that you can use in VSCode!

If you prefer to watch the video version, it's right here :

1. [ctrl + alt + arrow down|up].

It will simply create some multi-cursors below or above your line.

If you want to exit the multi-cursor, press escape.

2. [pushed mouse wheel + go down|up].

It will create some multi-cursors too, it's a bit faster than the one above.

3. [ctrl + d].

[ctrl + d] will help you find some occurrences. For example, if you want to change several divs into paragraphs, pressing [ctrl + d] after highliting one will allow you to do that faster!

4. [ctrl + shift + l].

You can also find all occurrences at once after highliting something with [ctrl + shift + l]. For example, this will select all the divs!

5. [alt + click].

Finally, you can use [alt + click] to place a new cursor wherever you want.

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Animated Side Navigation in pure HTML/CSS

Ustariz Enzo — Tue, 25 Jan 2022 12:57:21 +0000

Hey fellow creators

You want to add an animated side navigation to your website? Here’s how to do it in pure HTML & CSS!

If you prefer to watch the video version, it's right here :

1. The basic files.

Start with the usual HTML "head" tags and with an empty body for now.

For the CSS file, start with a simply reset and select a dark color for the background of the body:

*, ::before, ::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #222;
    font-family: Raleway, Helvetica, sans-serif;
    position: relative;
}

2. Create a nav in HTML.

Create a nav that contains a wrapper with a container and three dots:

<nav class="side-nav">
      <div class="wrapper">
        <div class="three-dots-container">
          <div class="dot d1"></div>
          <div class="dot d2"></div>
          <div class="dot d3"></div>
        </div>
      </div>
</nav>

Below it, add a nav-bloc, inside of which there’ll be a SVG icon:

<nav class="side-nav">
      <div class="wrapper">
        <div class="three-dots-container">
          <div class="dot d1"></div>
          <div class="dot d2"></div>
          <div class="dot d3"></div>
        </div>
                <div class="nav-bloc">
          <svg
            aria-hidden="true"
            focusable="false"
            data-prefix="far"
            data-icon="file"
            class="svg-inline--fa fa-file fa-w-12"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 384 512"
          >
            <path
              d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z"
            ></path>
          </svg>
                </div>
      </div>
</nav>

Inside that bloc but below the SVG, add the sub-navigations with all the links:

<div class="nav-bloc">
        ...
        <div class="sub-nav">
            <h2>Subtitle 1</h2>
            <ul>
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Link</a>
              </li>
            </ul>
     </div>
</div>

3. Style the navigation.

Start by adding a width to the SVG file so that it’ll no longer take up the whole page:

svg {
    width: 20px;
}

Let’s style the side-nav by putting it on the left-side of the screen with a fixed position:

.side-nav {
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
}

Then, give the wrapper a lighter background and make it as high as the viewport:

.wrapper {
  background: #333;
  height: 100vh;
  width: 75px;
}

Style the dots container and the dots themselves so that you have three colored dots at the top of the navigation bar:

.three-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.dot {
  flex-shrink: 0;
  margin: 10px 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
}

.d1 {background: crimson;}
.d2 {background: yellow;}
.d3 {background: lightgreen;}

Next, create a design for each bloc inside the nav (even though for now, the nav only has one bloc), along with some effects upon hover:

.nav-bloc {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f21e;
}

.nav-bloc:hover {
  background: rgb(24, 24, 24);
}

4. Create the animation for the nav to slide from the left.

Style the sub-nav:

.sub-nav {
  padding: 0px;
  width: 200px;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #333;
  z-index: -1;
  color: white;
  /* Hidden at the left side */
  transform: translateX(-100%);
  transition: transform 0.2s ease-in-out;
  border-right: 2px solid #000;
  border-left: 2px solid #000;
}

Now, whenever you hover the icon, you want to make the sub-nav slide to the right. In order to do that:

.nav-bloc:hover .sub-nav {
  transform: translateX(75px);
}

(75pixels is the width of the wrapper)

Here’s how it works: the sub-nav, which is the child of the nav-block, will have a new stacking context (with the z-index: -1): it will try to refer to the oldest element with a stacking context, which is the side-nav since it has a fixed position (which also creates a new stacking context).

Therefore, the sub-nav will refer to the side-nav, meaning it’ll go behind the nav-bloc and the wrapper.

5. Style the icon.

Replace the following code:

svg{
    width: 20px;
}

with:

.nav-bloc svg {
  width: 25px;
  fill: #f2f2f2;
  transition: fill 0.2s ease-in-out ;
}

.nav-bloc:hover svg {
  fill: #50bddf;
}

6. Style the inside of the navigation.

Style the title and links of the navigation:

.sub-nav h2 {
  font-family: open sans, sans-serif;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
}
.sub-nav ul {
  list-style-type: none;
}
.sub-nav li {
  padding: 15px 20px;
}
.sub-nav li:hover {
  background: rgba(160, 160, 160, 0.555);
}
.sub-nav li a {
   color: #f2f2f2;
   text-decoration: none;
}

Now you can create other blocs for your navigation! Check out the source code to see what this nav looks like with several blocs (and with some content next to it).

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Frost Effect in CSS

Ustariz Enzo — Mon, 24 Jan 2022 11:55:44 +0000

Hey fellow creators

How to create a glassomophorism (frost effect) in CSS?

If you prefer to watch the video version, it's right here :

1. The HTML structure.

Create a button inside two divs:

<div class="home">
      <div class="container">
        <button>Welcome</button>
      </div>
</div>

2. Style your button.

Add an image to the background of the page:

.home {
    background: url("https://images.unsplash.com/photo-1631515998058-69359a50da68?ixlib");
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-size: cover;
    height: 100vh;
    padding-top: 125px;
}

Now style the container that will look frosted:

.container {
    margin: auto;
    width: 450px;
    height: 275px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);   
    border-radius: 5px;
    position: relative;
    z-index: 1;
    background: inherit;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

(The z-index will create a new stacking context).

You do inherit the background of the page at the same position (if you comment it, you’ll see that otherwise you inherit the background as a whole inside of that container, which isn’t what we want!).

Next, style the button:

.container button {
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-family: Lora;
    background: #b6604f;
    color: #f1f1f1;
    font-size: 27px;
    padding: 15px 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}

3. Add the frost effect!

You need to use the pseudo-element before in order to create that effect:

.container::before {
    content: "";
    position: absolute;
    background: inherit;
    z-index: -1;
    inset: 0;
    filter: blur(10px);
    margin: -20px;
}

The z-index will also create a new stacking context, but since the pseudo-element before is kind of a child of the container, it will always stay at the top of the container.

Bravo, you are done!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Linear Gradient Animation in CSS

Ustariz Enzo — Tue, 18 Jan 2022 08:11:52 +0000

Hey fellow creators

You can’t really create a hover animation between two linear gradients in CSS, but there’s a way around it... Let’s learn what it is in less than a minute!

If you prefer to watch the video version, it's right here :

1. The HTML structure.

Create a card with a title:



<div class="card">
      <div class="layer"></div>
      <h1>São Paulo</h1>
</div>

2. Style the card.

Give the card a width and a height, center it and its content and add a background:



.card {
  width: 400px;
  height: 400px;
  border-radius: 25px;
  margin: 100px auto;
  position: relative;
  z-index: 1;
  background: linear-gradient(to right, #2193b0, #6dd5ed); 
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.card h1 {
  color: #f1f1f1;
  font-size: 50px;
  text-transform: uppercase;
}

Create a new layer with the pseudo-element after:



.card::after {
  content:"";
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background: linear-gradient(to right, #8a2387, #e94057, #f27121);
  position: absolute;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

It will take up the whole size of the card but with a new color. It will be located between the content and the container. It has no opacity for now.

Finally, add a different opacity to the pseudo element when you hover the card:



.card:hover::after {
  opacity: 1;
}

Now you have a transition between your two linear gradients! Check out source code here to see the final outcome!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

CSS Reset

Ustariz Enzo — Mon, 10 Jan 2022 11:00:10 +0000

Hey fellow creators

A CSS reset is a nice way to start from a blank canvas in HTML/CSS and in web development in general, because some HTML elements have default values to their properties.

If you prefer to watch the video version, it's right here :

1. The short reset I use in most of my videos and tutorials.

Here’s the code you can add to your CSS style that will remove all of the margin and padding:

*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

It will also take into account the padding and the borders when calculating the height and the width of an element thanks to the "border-box" value.

2. But there’s another option!

If you want a more complete CSS reset, you can simply google Reset CSS and you’ll find the famous "mayer CSS reset" : https://meyerweb.com/eric/tools/css/reset/

It's a very popular way to reset the value of a lot of property when starting a new project.
Here it is :

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

This will allow you to have a nice and clean canvas to work from!
There are a lot of different CSS resets and you can literraly build your own if you have some preferences.

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Spinning Loader in pure CSS!

Ustariz Enzo — Fri, 07 Jan 2022 15:22:26 +0000

Hey fellow creators

Learn how to create a spinning loader in pure CSS in less than a minute!

If you prefer to watch the video version, it's right here :

1. The HTML structure.

Start by creating an empty div:

<div class"circle"></div>

2. Create this circle in CSS.

.circle{
    margin: 100px auto 0;
    width: 275px;
    height: 275px;
    border-radius: 50%;
    border: 6px solid crimson;
}

This will create a large red circle in the middle of your page.

3. Modify the colours of your circle!

Modify the colours as shown below so that only the top and the bottom of the circle are red, and the rest is transparent:

.circle{
    ...
    border: 6px solid transparent;
    border-top-color: crimson;
    border-bottom-color: crimson;
}

4. Add the animation!

Create the animation so that your loader spins:

.circle{
    ...
    animation: spin 1s ease-in-out infinite;
}

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

You could replace ease-in-out by linear if you like. You can also play with the thickness of the border! It's up to you ;)

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Array Destructuring in JS!

Ustariz Enzo — Wed, 22 Dec 2021 14:59:24 +0000

Hey fellow creators

Destructuring is a nice way to create some variables from an array or an object! Let's learn how to do it in less than a minute.

If you prefer to watch the video version, it's right here :

1. The syntax.

You have to follow the same syntax every time. For example:

const array = ["#ff0000", "#008000", "#0000ff"];

const [red, green, blue] = array;

console.log(red, green, blue);

If you look in your console, you'll see that each name is linked to its colour:

2. You can also give some default values.

You can give some default values, just in case that array is empty:

const array = [];

const [red = "1", green = "2", blue = "3"] = array;

console.log(red, green, blue);

In your console will therefore show "1 2 3".

3. You can also ignore some values!

Remove one colour name from the array but leave the comma:

const array = ["#ff0000", "#008000", "#0000ff"];

const [red = "1", , blue = "3"] = array;

console.log(red, blue);

It'll ignore the second value and simply create a constant for red and blue:

4. Create a constant for all the remaining parts of an array.

const fruits = ["kiwi", "strawberry", "lemon"];

const [first, ...others] = fruits;

console.log(first, others);

It created one constant for the first element and an array of the remaining element named "others" :

You now know how destructuring works in Javascript!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

Happy coding!

Enzo.

Performant Pulse Animation in CSS!

Ustariz Enzo — Tue, 21 Dec 2021 09:29:15 +0000

Hey fellow creators

You'd like to add a button with a pulse animation to your app? You can learn how to do it in CSS in less than a minute!

1. Create a button

This is a really simple step, but create a button in your HTML file:

<button>Go</button>

2. Let's style the button

Center the button as well as the text inside it, and make it a circle:

body{
    font-family: Arial, Helvetica, sans-serif;
    background: #333;
}

button{
    position: absolute; /* centering */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex; /* centering the content */
    justify-content: center;
    align-items: center;
    width: 100px; 
    height: 100px;
    border-radius: 50%; /* make it a circle */
    font-size: 20px;
    border: none;
       cursor: pointer;
}

3. Create the pseudo-element.

Some are using box-shadow to achieve that stuff, me included before I knew it was bad for performance.
So I simply replaced box shadow by a pseudo-element that grows and disapears at the same time with the performant "transform" and "opacity" properties.

button::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;  /* behind the parent */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f1f1f1;
    top: 0;
    left: 0;
    animation: pulse 1.4s infinite ease-out;  /* animation configuration */
}

Create the keyframe:

@keyframes pulse {
    to {
        transform: scale(1.4);
        opacity: 0;
    }
}

And, there you go, the pseudo element will expand and hide at the time, thus creating what we want, with good performance (no repaint). 🔥

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Learn how to use the forEach method in JS!

Ustariz Enzo — Mon, 20 Dec 2021 09:23:06 +0000

Hey fellow creators,

The forEach method is really handy when you’re working with arrays or nodelists.
It allows you to run a callback function for each element in those containers.
Let’s learn how to use it in less than a minute!

If you prefer to watch the video version, it's right here :

1. How to use it.

To use it, you need to feed it with a callback function, which can take up to three parameters.
Those parameters are:

The current value
The index
And the array/nodelist that you’re working with.



const array = [1, 2, 3];

array.forEach((current, index, arr) => {
    console.log(current, index, arr);
});

Take a look in your console/terminal and you’ll see:

2. Let’s create three buttons to have a real example.

In an HTML file, create three buttons:



<button data-action="modify">Modify</button>
<button data-action="delete">Delete</button>
<button data-action="update">Update</button>

In your JS file, select the buttons:



const buttons = document.querySelectorAll('button');

The .queryAll method returns a nodelist, and the nodelists also have access to the forEach method in their prototype.

Thus, we can use it to attach an event listener to each button :



buttons.forEach(btn => {
    btn.addEventListener('click', (e) => {
        alert(e.target.getAttribute
        ('data-action'))
    })
});

This is a basic example but you now know how useful this method is!
You can easily avoid code repetition.

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

How to Create a Marquee in HTML/CSS!

Ustariz Enzo — Sun, 19 Dec 2021 08:51:03 +0000

Hey fellow creators

Learn how to create a marquee in HTML/CSS only in less than a minute!

If you prefer to watch the video version, it's right here :

1. The HTML structure.

Create a basic HTML structure with a container and then a "p" with some text inside:

<div class="marquee-container">
    <p class="marquee">
        LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME
    </p>
</div>

2. Style the page.

Start by styling the container by making sure its overflow is hidden:

.marquee-container{
    display: flex;
    align-items: center;
    background: #25284c;
    overflow: hidden;
}

Then style the text however you want, but most importantly create an animation:

.marquee{
    font-size: 100px;
    line-height: 1.3;
    font-family: sans-serif;
    padding: 24px 0;
    color: #fff;
    white-space: nowrap;
    animation: marquee 3.5s infinite linear; /* notice the infinite */
}

Add a pseudo element ::after with the exact same text as the one in the "p" :

.marquee:after{
    content: "LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME";
}

3. Create the animation.

Now create the animation itself:

@keyframes marquee{
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-50%)
    }
}

It will make the div containing the text go to the left, you can put 50% if you want to animate it to the right.

After 50% of the width it will reset to the beginning of the animation without a flinch, thus starting the animation again and again.

This, indeed, can only work if we are using the same text in the p tag and the after.

There you go, you've now created a nice smooth marquee!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

How to Code an API Call with React!

Ustariz Enzo — Sat, 18 Dec 2021 08:16:11 +0000

Hey fellow creators

Let's code an API Call with React.
This is pretty common and you need to master it if you want to use React.

If you prefer to watch the video version, it's right here :

1. The hooks you need!

You need to import two hooks:

import {useState, useEffect} from "react";

function App(){
    return(
        <div className="app">
            <h1>React API Call</h1>
        </div>
    )
}

export default App;

Now create your state which will start at false since at first you don't have any data:

import {useState, useEffect} from "react";

function App(){

    const [imgURL, setImgURL] = useState(false);

    return(
        <div className="app">
            <h1>React API Call</h1>
        </div>
    )
}

export default App;

2. Fetch an API

Find a random image API and do a fetch when the component is mounted, using the hook useEffect().

Let's start by simply logging the response of the fetch to check if it's working:

useEffect(() => {
    fetch('https://source.unsplash.com/random/600x800')
    .then(res => console.log(res))
}, [])

It will be triggered after the first render of the component!

Since the response is not JSON, you don't need to parse it, you can just extract the URL from it.

useEffect(() => {
    fetch('https://source.unsplash.com/random/600x800')
    .then(res => setImgURL(res.url))
}, [])

Now you can add the image to your JSX:

return(
        <div className="app">
            <h1>React API Call</h1>
            {imgURL && <img src={imgURL} />}
        </div>
    )

You're using the short circuit operator, meaning that it'll only render the image if imgUrl is true.

If you refresh the page, you'll see that you have a different image each time!

This is how you can do a pretty basic API call with React!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

The Arrow Function in JS!

Ustariz Enzo — Fri, 17 Dec 2021 10:14:06 +0000

Hey fellow creators

The arrow function exists since 2015 and is quite different from the classic functions. Let’s see how !

If you prefer to watch the video version, it's right here :

1. How to use an arrow function.

Here is the basic syntax, we don't need the "function" keyword and we put it by default in a constant, that way we won't have hoisting issues.

const add = (a,b) => {
    return a + b;
}

console.log(add(2,2));

If you have just a return, you can use the short version.

const add = (a,b) => a + b;

If you have one parameter (but only one), you can remove the parenthesis which would make it even more concise:

const add = a => a;

It’s very useful when you use it with some higher order function like the map.() method:

const multiplied = array.map(num => num * 2)

2. The difference between a classic function and an arrow function.

The main difference between the classic and arrow function is the value of "this".

If you use a classic function as the value of a property in an object, "this" will refer to the calling context, i.e. the obj where the function is defined :

const obj = {
    a: 5,
    foo: function() {
        console.log(this)
    }
}

obj.foo() // {a: 5, foo: ƒ}

Otherwise, if you use an arrow function, "this" will return the global object.

const obj = {
    a: 5,
    foo: () => {
        console.log(this)
    }
}

obj.foo() // Window Object

In that case, this will refer to the parent of the calling context, thus the global object.

Instead of refering the direct context, it will refer to the parent of that context.

You need to keep that difference in mind when you are dealing with functions and the "this" keyword.

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

Enzo.