Forem: Amir-Lotfi

Preact an alternative to React?

Amir-Lotfi — Mon, 31 Oct 2022 07:33:27 +0000

I recently heard about Preact and learned that high-traffic sites like IKEA, Bing, Etsy, and others use Preact, so I got curious about it. I wanted to know how Preact works under the hood and the similarities and differences between react and preact, so I decided to learn it. This series is my journey learning preact and my thoughts on it.

I recommend signing up and creating a preact code in nexuscode.online to follow along.

Like React, Preact uses virtual DOM. A Virtual DOM is a simple description of a tree structure using objects:

let vdom = {
  type: 'p',         // a <p> element
  props: {
    class: 'big',    // with class="big"
    children: [
      'Hello World!' // and the text "Hello World!"
    ]
  }
}

Preact provides a way to construct these descriptions, which can then be compared against the browser's DOM tree. Each part of the tree is compared, and the browser's DOM tree is updated to match the structure described by the Virtual DOM tree.

Instead of describing how to update the DOM in response to things like keyboard or mouse input, we only need to describe what the DOM should look like after that input is received. It means we can repeatedly give Preact descriptions of tree structures, and it will update the browser's DOM tree to match each new description – regardless of its current structure.

There are three ways to create Virtual DOM trees with Preact.

createElement(): a function provided by Preact
HTM: HTML-like syntax you can write directly in JavaScript
JSX: HTML-like syntax that can be compiled into JavaScript

createElement

The simplest approach would be calling Preact's createElement() function directly.

import { createElement, render } from 'preact';

let vdom = createElement(
  'p',              // a <p> element
  { class: 'big' }, // with class="big"
  'Hello World!'    // and the text "Hello World!"
);

render(vdom, document.body);

The code above creates a Virtual DOM "description" of a paragraph element. The first argument to createElement is the HTML element name. The second argument is the element's "props" - an object containing attributes (or properties) to set on the element. Any additional arguments are children for the element, which can be strings (like 'Hello World!') or Virtual DOM elements from additional createElement() calls.

The last line tells Preact to build a real DOM tree that matches our Virtual DOM "description" and to insert that DOM tree into the body of a web page.

JSX

JSX lets us describe our paragraph element using HTML-like syntax. JSX must be compiled by a tool like Babel or you can use nexuscode.online to compile JSX inside your browser and see the result instantly. Let’s rewrite the previous example using JSX without changing its functionality.

import { createElement, render } from 'preact';

let vdom = <p class="big">Hello World!</p>;

render(vdom, document.body);

HTM

HTM is an alternative to JSX that uses standard JavaScript-tagged templates, removing the need for a compiler. If you haven't encountered tagged templates, they're a special type of String literal that can contain ${expression} fields.

import { h, render } from 'preact';
import htm from 'htm';

const html = htm.bind(h);

function App() {
  return html`
    <p class="big">Hello World!</p>
  `;
}

render(html`<${App} />`, document.body);

All of these examples produce the same result: a Virtual DOM tree that can be given to Preact to create or update an existing DOM tree.
In the next chapter, we’re going to learn about components and events.

Please share your ideas and ask any questions you have or share your code via nexuscode.online in the comments section below.

How to create neon text using vanilla CSS

Amir-Lotfi — Tue, 28 Jun 2022 05:00:07 +0000

Learn how to implement neon effects using CSS, a technique for adding glowing to text.

To add a glow effect to the text, we need text-shadow property. The text-shadow property accepts a comma-separated list of shadows that applies to the text. Each shadow is described by some combination of X and Y offsets from the text, blur radius, and color.

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

Creating glow effect

First, we need to add a white glow to the outer edges of the text’s letters with a small blur radius. Next, we add the red glow by adding multiple shadows separated by a comma. We need all these shadows so that they can be stacked over one another to add more depth to the glow. To increase the size of the glow effect, we would increase the blur radius of shadows.

.neon-text {
  text-shadow: 
    #FFFFFF 0 0 12px,
    #A91079 0 0 25px,
    #A91079 0 0 35px,
    #A91079 0 0 45px;
  text-align: center;
  font-size: 2.5rem;
  color: #fff;
}

Adding the flickering effect

One thing you might notice about neon signs is that some of them — particularly older ones — tend to flicker. The light kind of goes in and out. We can do the same sort of thing with CSS animations.

To achieve that, we create a custom animation named neon using @keyframes. Then we move the shadows to the keyframe. The keyframe should apply and completely remove the shadows at chosen points during animation to create the flickering effect.

@keyframes neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: 
    #FFFFFF 0 0 12px,
    #A91079 0 0 25px,
    #A91079 0 0 35px,
    #A91079 0 0 45px;
  }

  20%, 24%, 55% {
    text-shadow: none;
  }
}

Finally, we call the animation where we want the light to flicker.

.neon-text {
  animation: neon 3s infinite alternate;
  text-align: center;
  font-size: 2.5rem;
  color: #fff;
}

You can see the working animation and play with the final code at nexuscode.online

Challenge your skills

Fork the code in the link above and experiment with various hues and colors as well as blur radius sizes, and don’t forget to try out different animations, too. Leave a comment if you’ve created a neat shadow effect you want to share.
Thanks for reading.

Creating Morphing Animations with CSS

Amir-Lotfi — Sun, 26 Jun 2022 06:17:36 +0000

Learn how to implement morphing using CSS, a technique for transforming one appearance into another.

What is morphing?

Morphing is a technique where you transform one appearance into another. It’s a shape-shifting animation where a two-dimensional object, say an image or a figure or similar, turns into a different shape.

In this article for simplicity, we create a div that alternates between a square and a circle.

Define a div element with spinner class. Give the spinner basic demotions and animate it with a custom animation named Morph that takes 2 seconds and runs forever.

.spinner {
  width: 100px;
  height: 100px;
  animation: Morph 2000ms infinite;
}

To make the element change its shape we need to define a custom animation named Morph. When the Morph animation is in 0 and 100 present, we set the border radius to 50% so the element shapes like a circle, and we set the border-radius to 0 when the animation is at 50% so it changes back to square.

Next, let's rotate the element and change its color during shape-shifting to give it a nice look. To do that we need to set the background color for each step and add a transform property that rotates the element between 0 and 180 degrees during animation steps.

@keyframes Morph {
 0%, 100% {
   border-radius: 50%;
   transform: rotate(0deg);
   background-color: pink;
 }
 50% {
   border-radius: 0%;
   transform: rotate(180deg);
   background-color: lightblue;
 }
}

Finally, our morphing animation works and you can see and play with the final code at nexuscode.online

What is Throttle, What is the Throttle use, and how to create Throttle?

Amir-Lotfi — Mon, 20 Jun 2022 17:00:55 +0000

These days applications are more complicated than ever. Meanwhile, users expect no lag or slowdown in user experience, which makes the developer's job more difficult. Fortunately, there are many hacks like throttle; that can help with performance without sacrificing functionality. In this tutorial, we will learn about the throttle and its implementation.

What is Throttle?

Throttle is a function that takes a callback as an argument and executes the callback only once during a given timeout. Throttle will call the callback passed to it every time the timeout ends as long as the trigger for the callback is still happening.

What is the Throttle use?

The throttle is used for performance optimization. When you have recurring events like scrolling, resizing, or drag and drop, you can use the throttle to restrict the code execution, thus reducing resource use.

How to create Throttle?

To create throttle, fork this template which provides a slider that updates the dom on event input. We learn how to create and add throttle to the slider in the following steps.

Step one, define throttle function.

Create a function; named throttle that takes the callback function and timeout as arguments and returns a closure that executes the callback with arguments passed to it.

function throttle(callback, timeout = 1000) {
    // pass arguments to callback
    return (...args) => {
        callback(...args)
    }
}

Then wrap the function slider in throttle like below. You can pass the timeout as the second argument.

const slide = throttle(() => {
    placeholder.innerText = slider.value;
})

Now the function slider executes through the throttle.

Step two, add the timeout stage.

Define a variable named wait that indicates the timeout stage. The wait variable default value must be false to execute the callback at the first trigger. After the first callback execution, we set the variable wait to true and add; a condition before the callback to ignore future calls if the throttle is in the timeout stage.

function throttle(callback, timeout = 1000) {
  let wait = false
  return (...args) => {
    if (wait) return
    callback(...args)
    wait = true
  }
}

Now, the callback executes for the first time, but other triggers get ignored, and we can test that by sliding the slider thumb.
To execute other callback triggers, we have to add a setTimeout with a delay equal to the timeout argument to reset the wait variable and end the timeout stage.

function throttle(callback, timeout = 1000) {
  let wait = false
  return (...args) => {
    if (wait) return
    callback(...args)
    wait = true

    setTimeout(() => {
      wait = false
    }, timeout)
  }
}

Step three, queue the calls.

Now the throttle works, but there is a problem it ignores the last trigger. We can test that by sliding the slider thumb again before the timeout ends. To resolve that issue, we need to queue the last trigger during the timeout stage and execute the last trigger at the end of the timeout.
To do that, we need a variable name queue to store the last trigger arguments if we are in the timeout stage.

function throttle(callback, timeout = 1000) {
  let wait = false
  let queue = null
  return (...args) => {
    if (wait) {
        return queue = args
    }
    callback(...args)
    wait = true

    setTimeout(() => {
      wait = false
    }, timeout)
  }
}

Then to execute queued trigger, we need a function that runs the callback, and we have to run that function after the timeout ends.
Therefore, define a function named queuedTasks. Inside that function, call the callback with queued arguments. After the callback execution, empty the queue by setting its value to null. Then, add a condition at the beginning of queuedTasks to check if the queue is empty, so we end the waiting stage. In the end, define a setTimeout that calls queuedTasks again to execute triggers that happened in the timeout stage.

function throttle(callback, timeout = 1000) {
  let wait = false
  let queue = null

  const queuedTasks = () => {
    if (queue == null) {
      return wait = false
    }

    callback(...queue)
    queue = null
    setTimeout(queuedTasks, timeout)
  }

  return (...args) => {
    if (wait) {
      return queue = args
    }

    callback(...args)
    wait = true

    setTimeout(queuedTasks, timeout)
  }
}

Now the slider should work just fine and excessive calls get ignored which improves the application performance. You can see the final code here.

To conclude

The throttle can optimize your application performance and gives it a premium look that can directly translate to an increase in user engagement and monetization of your application.

Challenge your skills

A little while ago, I wrote a tutorial on how to create a scroll to top button. In that tutorial, I wrote a small piece of javascript code that toggles a class to the scroll to top button according to scroll position. That javascript code performance can be improved with the throttle. As a challenge, fork that code and try adding throttle to it and share your code with others in the comment section below.

How to create a scroll to top button with vanilla JS & CSS

Amir-Lotfi — Sat, 11 Jun 2022 05:57:46 +0000

In this tutorial, you will learn in a few short steps how to create a scroll to top button with CSS inset shorthand and vanilla JavaScript.

Scroll to top button can be very helpful for websites with lots of content, pages with infinite scrolling, or mobile devices with a small screen that can cause the content scroll to extend.

You can follow along with this tutorial by forking this template.

Step one, create the button

To create a scroll button, use an anchor tag with href="#" this makes the browser return to the top of the page when clicked, or you can use a custom Id to return to a specific part of the page.

<a href="#">scroll-to-top</a>

Step two, position and style the button

To make the button position fixed relative to the viewport, you need to set position: fixed on the anchor tag. When the element position is fixed, it gets removed from the normal document flow and then positioned with top, right, bottom, and left properties relative to the viewport.

Although, there is a shorthand for positioning properties called inset.
Inset works just like margin shorthand, which is used to set margin-top, margin-right, margin-bottom, and margin-left all in one.

syntax

inset: top right bottom left

When auto is used as a value for inset, it considers that value omitted.
Therefore you can use inset like the one below to position your button in the bottom right corner of the viewport.

inset: auto 2em 2em auto;

To put things together, add a class scrollToTopBtn to the anchor tag and style your button like the one below.

.scrollToTopBtn {
  color: #f2f2f2;
  background-color: #151515;
  text-decoration: none;
  border-radius: 25px;
  position: fixed;
  outline: none;
  z-index: 100;
  padding: 0.75em 1.5em;
  inset: auto 2em 2em auto;
}

Step three, make the button responsive

Now the scroll to top button is styled, placed correctly, and it works. But there is a problem, the button always is visible. To fix that you need to use JavaScript to hide and show the button according to page scroll.

To do that, first, get the button and store it in a variable.

const scrollToTopBtn = document.querySelector(".scrollToTopBtn");

Then get the root element of the document for the offset values.

const rootElement = document.documentElement;

Next, you should register an event listener on scroll event to calculate the button visibility status.

const handleScroll = () => {}
document.addEventListener("scroll", handleScroll);

The handleScroll function will be called every time the user scrolls.

After that, you need the total number of pixels that can be scrolled, and to get that inside the handleScroll function, you need to subtract scrollHeight by clientHeight to get the total amount of pixels that can get scrolled.

const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;

Now that you have the maximum number of pixels that can be scrolled, you need to divide it by the amount the page has been scrolled to get the scrolled ratio between 0 and 1. Using scroll ratio you can condition the location that you want to hide and show the button. The closer you get to 1, the more the user has to scroll before seeing the button.

if ((rootElement.scrollTop / scrollTotal) > 0.25) {
    // Show the button
    scrollToTopBtn.classList.add("isVisible")
} else {
    // Hide the button
    scrollToTopBtn.classList.remove("isVisible")
}

Finally, to make it work, you first need to add opacity: 0; to the scrollToTopBtn class to hide the button on page load. Then add class isVisible with opacity: 1; to the button when the page scroll passes the ratio you chose. Last but not least, add transition: all 250ms ease-in-out; to scrollToTopBtn class for animating the button.

.scrollToTopBtn {
  color: #f2f2f2;
  background-color: #151515;
  text-decoration: none;
  border-radius: 25px;
  position: fixed;
  outline: none;
  z-index: 100;
  opacity: 0;
  padding: 0.75em 1.5em;
  inset: auto 2em 2em auto;
  transition: all 250ms ease-in-out;
}

.isVisible {
  opacity: 1;
}

Step four, fix unwanted clicks

When scroll to top button is hidden, it still can be clicked, which is not supposed to happen. To fix that problem, add pointer-events: none; to class scrollToTopBtn to ignore the click event and add pointer-events: auto; to class isVisible to bring back the click event to the button when it's visible.

.scrollToTopBtn {
  color: #f2f2f2;
  background-color: #151515;
  text-decoration: none;
  border-radius: 25px;
  position: fixed;
  outline: none;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  padding: 0.75em 1.5em;
  inset: auto 2em 2em auto;
  transition: all 250ms ease-in-out;
}

.isVisible {
  pointer-events: auto;
  opacity: 1;
}

Step five, add smooth scroll to the page

Now scroll to top button works perfectly still, you can add a nice touch to your website with smooth scroll. To do that, just add scroll-behavior: smooth; to the html tag.

html {
  scroll-behavior: smooth;
}

To conclude

Scroll to top button is a simple yet useful feature that can improve user experience of your website drastically. In this tutorial, I showed you how to build scroll to top button with just a few lines of code without any library. You can see and play with the final code at NexusCode.online