A comparison between Rollup and Webpack for React apps.

Image for post
Image for post

Webpack has been the most popular bundling tool for front-end development with React, and since both Create React App and Next.js used Webpack by default, I never bothered to learn about other bundlers before.

But I got curious about how to use Rollup lately, so I decided to explore Rollup and see if it offers anything interesting for React developers. Rollup is a module bundler for JavaScript that works similarly to Webpack, but is said to have easier configuration and smaller build size.

This tutorial will show you how to create a React-Rollup starter app from scratch and how Rollup…


Image for post
Image for post

JavaScript has a bad date handling API because the Date object implementation was copied directly from Java’s Date Class. Java maintainers eventually deprecated many of Date class methods and created the Calendar Class in 1997 to replace it.

But JavaScript’s Date API never got a proper fix, which is why we have the following problems with it today:

  • Date object is mutable
  • Messy API for date and time computations (for example, adding and subtracting days )
  • Only support UTC and the local timezone
  • Parsing date from a string is unreliable
  • No support for non-Gregorian calendars

Currently, there’s no way to…


Image for post
Image for post

Zero is a web framework that simplifies modern web development by allowing you to mix different programming languages and libraries when developing your web application.

You can write your application code in a mix of Node.js, React, Vue, Python, or even regular HTML. Zero will manage your project’s dependencies and serve them all for you.

Here are some of the main benefits of using Zero Server:

  • Automatic dependency and configuration management
  • Built-in file-system and API routing
  • Dynamic routing support
  • Support for SSR and SSG
  • Support for popular web development languages and libraries

Languages and libraries supported by Zero include:

  • Node.js…

Image for post
Image for post

ES2021 or ES12 is scheduled for release sometime in June 2021. Here are some new features that you can expect from the ECMAScript proposal status from TC39:

  • String.prototype.replaceAll
  • Promise.any
  • WeakRefs and finalizer
  • Logical Assignment Operators
  • Numeric separator

This post will help you to understand the use of each new feature, starting from the first one.

The String replaceAll() method

The String.prototype.replaceAll() method allows you to replace all occurrences of a substring with another string that you defined. Currently, the .replace() method only replace the first occurrence of the substring while ignoring the rest:

const queryString = 'q=query+string+parameters'; const withSpaces = queryString.replace('+', ' '); console.log(withSpaces)…

Image for post
Image for post

Aleph is a JavaScript framework that offers you the best developer experience in building modern web applications with React while using Deno for server-side operations.

Aleph allows you to build React application that uses server-side rendering by default. Since it uses Deno, it doesn’t need to use Webpack for import statements.

This also means you don’t need to install packages to the node_modules folder and write the package.json file. All dependencies can be imported using ESM URL and managed by Aleph.js. For example, you can use the global ESM CDN called esm.sh to import any libraries that you need:

import…

Image for post
Image for post

When you need to filter an array with multiple values or criteria, you can use the .filter() and write multiple validations in the callback function.

If you need a reminder on the filter method, here's a quick introduction. Otherwise, Let's see an example of multiple filters in action.

Let’s say you have an array of numbers as follows:

let numbers = [3, 7, 2, 15, 4, 9, 21, 14];

You want to filter the numbers to include only those higher than 3 and lower than 17.

Here’s how you do it with .filter():

let numbers = [3, 7, 2, 15…

Image for post
Image for post

GSAP or GreenSock Animation Platform is a JavaScript animation library that helps you to create fast and silky smooth animations for your interface. It provides simple APIs that grants you full control over your animation sequences, but easy enough to understand and use for simple animations

This tutorial will show you two things:

  • How to use GSAP in React for simple animations
  • How to create reusable animation components with React and GSAP. These components will then be exported to Bit’s virtual monorepo, to make them available to other web projects.

If you’re already familiar with GSAP, you can skip ahead…


Image for post
Image for post

Reversing an array with certain restrictions is one of the most common challenges you will find in job interviews and coding quizzes.

This tutorial will show you five ways to reverse an array in JavaScript with and without the reverse method, along with code snippets that you can use.

How to Reverse an Array in JavaScript with the Reverse Method

When you need to reverse an array in JavaScript, you can use the reverse method, which will put the last element first and the first element last:

let numbers = [1, 2, 3, 4, 5];
let reversedNumbers = numbers.reverse();

console.log(reversedNumbers);
// [5, 4, 3, 2, 1]

But keep in mind that…


— It’s not server-side rendering.

Image for post
Image for post

The year 2020 has been a crazy ride for all of us. For this end of the year holiday season, the React Team has recently announced exciting research into a new way to build React apps with React Server Components.

Please keep in mind that React Server Components is still under development and not recommended for production yet. The feature is completely optional and you can still write your component like you do today.

You can watch the one-hour talk and the demo here, but here’s a 5-minute guide that highlights and explains the important bits.

Also, if you’re curious…


Image for post
Image for post
Serverless React search with Fuse.js

The search function is one of the most important features of a software application. Search sites like Google and DuckDuckGo have helped millions of users to navigate through the internet and quickly find what they’re looking for in mere seconds.

You may find that you need to include a search function into your React application, but you don’t want to set up a dedicated server just to handle the search. Is there a way to add a simple search into a React application?

Yes, there is. Fuse.js is a powerful and light-weight search library that’s built to handle search within…

Nathan Sebhastian

A senior software developer with experience in full-stack JavaScript. More tutorials on web development at https://sebhastian.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store