William Le

William Le

Front-end developer working in ReactJS. Excited about web technologies, and building “insanely great” products. I’m here to share stuff I’m learning!

William's Posts

How to Detect Idle Browser Tabs with the Page Visibility API

Knowing when users aren't using your site is important too, especially for performance! Let's see how the page visibility JavaScript API allows us to do that.

Styling Scrollbars with CSS: The Modern Way to Style Scrollbars

Let's look at how we can now easily style browser scrollbars using only CSS, thanks in large part to a new W3C spec proposal: CSS Scrollbars.

Quick Tour of date-fns, a Simple JavaScript Date Library

Learn what date-fns, a lightweight alternative to Moment.js for date formatting and manipulation in JavaScript, has to offer.

A Sneak Peek at React Router v6

A look at the new features and changes coming up with the release of React Router version 6.

A Simple Guide to Error Boundaries in React

With simple code snippets and interactive demos, you'll learn about Error Boundaries in React; a way for components to degrade gracefully in cases of errors.

Using the Fullscreen API

Immerse users by taking them fullscreen! You'll see how to use the simple Fullscreen API in JavaScript to create fullscreen web experiences!

5 Tips to Improve the Performance of Your React Apps

Here's an up-to-date (March 2020) guide on performance optimization for React apps. We'll cover things such as memo, PureComponent, React.lazy and Suspense.

Taking a Look at the GitHub CLI Tool

Now GitHub's features are in your terminal, thanks to the GitHub CLi! Let's explore what you can do with it.

How to Use localForage for Easy Async Browser Storage

Storing data in the browser can be much easier than you think, thanks so localForage, a JavaScript library that simplifies asynchronous storage!

Create Staggering Animations in React

How to create visually appealing entrance/exit animations with React, styled-components (or your CSS-in-JS lib of choice) and the CSS transition-delay property.

Using the CSS line-height Property to Improve Readability

Quickly learn all about the CSS line-height property, the values it can take and some best practices that result in text that's easy to read.

How to Use the CSS :root Pseudo-Class Selector

In CSS, the :root pseudo-class is similar to the html selector, but with a subtle difference. Learn all about it in this post.

When Should You Use the CSS !important Rule?

The !important rule in CSS is powerful, but its effects can surprise you. Let's go over it in this post.

String Pluralization in JavaScript Using Simplur

Plural/singular nouns in languages present interesting coding problems. A simple JavaScript library called Simplur comes to the rescue!

How to Use Keyboard Listeners in Vanilla JavaScript

Keyboard listeners are a powerful feature of JavaScript, and in this post you'll understand all about them!

The Mighty CSS z-index Property

In CSS, z-index is a property that allows you to access the 3rd dimension and is most often used to ensure an element appears under or on top of other elements.

How To: Publishing Your First Package to npm

It's a lot easier to Open Source your JavaScript and Node.js code than you think, thanks to the npm package registry and the publish command from the npm CLI!

Tricks for Using CSS translateZ() and perspective()

Here are some things you might not know about the CSS translateZ() and perspective() functions for 3D translations.

What's the Spread Operator Used For in JavaScript?

A short guide about the JavaScript spread operator, introduced with ES6/ES2015, and some of it's practical uses.

npm vs Yarn Commands Cheat Sheet

Here's a handy reference for npm and Yarn commands that you can use to refresh your memory or to help you in moving from one package manager to the other.

What is the preventDefault Event Method in JavaScript?

Learn about the all-powerful preventDefault method available on event objects in JavaScript.

A Simple Way to Animate Scrolling Effects in JavaScript

Did you know there's a native way to animate scrolling with JavaScript? Let's go over how it's done in this post.

react-notifications-component, a Powerful React Notifications Library

The react-notifications-component React component library will save you tons of time with notifications inside of your React apps.

What's the Difference Between var, let and const in JavaScript?

Learn how and when to use the const, let or var variable keywords in JavaScript and some of the differences between them.

The Difference Between Promise.all and Promise.race in JavaScript

In this short post we take a look at 2 useful methods available on the JavaScript Promise object: Promise.all and Promise.race.

Reasons Why You Should Never Use eval() in JavaScript

You may have never heard of the eval function in JavaScript, and that's probably for a good reason! It should almost never be used and here we explain why.

A Guide for Refs in React

Here's how to use the createRef method or the useRef hook to interact with DOM nodes directly in your React apps.

Understanding the JavaScript typeof Operator

In this post you'll learn about the JavaScript typeof operator; what it can be used for and how to use it.

The New globalThis JavaScript Property

Learn about globalThis, a new cross-platform API for interacting with the global object in JavaScript.

Using getBoundingClientRect to Get an Element's Size and Position

getBoundingClientRect is part of the JavaScript DOM API and allows to get various data about the size/position of elements.

offsetWidth and offsetHeight in JavaScript

Learn how to use offsetWidth and offsetHeight in JavaScript to calculate the pixel dimension of elements.

clientWidth and clientHeight in JavaScript

Learn how to use clientWidth and clientHeight in JavaScript to calculate the pixel dimension of elements.

Back to Basics: Event Handling in React

In this article we cover handling events for React apps with some of the popular events like click and text input.

Back to Basic: What are Props in React and How to They Work?

Let's remove the mystique behind what React props are: they're just function arguments!

An Easy Way to Know When React Components Enter the Browser Viewport

Use the React Visibility Sensor library to determine when React components have entered the viewport.

Progressive Enhancements for Loading Images Using React Image

You can't always tell when an image will fail, but you can prepare for it, thanks to the React Image library for React apps!

React Icons Gets You Access to Hundreds of Open Source Icons

Font Awesome and Material Design icons are just some of the icon libraries included with React Icons, a library for icons in your React apps.

Back to Basics: CSS Transitions for Simple Animations

CSS isn't just for creating static designs. Make your designs come to life with CSS transitions!

Get a Performance Boost in React with PureComponent

Learn how pure components work in React and why they're useful via some handy visual learning aids that'll help you grasp the concept in no time.

In-Depth Look at How Events Propagate in JavaScript

Event propagation is a tricky subject in JavaScript. Let's look at a few demos to gain a better understanding of how it all works.

Optimizing the switch Statement in JavaScript

Learn how to get the most out of the JavaScript switch statement.

Using Lightboxes to Create Stunning Image Galleries in React

Learn how to use the fslightbox-react package to create sleek image galleries in your React apps.

Practical Guide to Using CSS Position Relative & Absolute

Learn practical tips for using position: relative and position: absolute in CSS to create engaging visual elements.

Understanding CSS Float

Learn how to use CSS float positioning, as well as some of the pitfalls when using it for layouts on the web.

Understanding the res Object in Express.js

The res object in Express.js lets you send and control the HTTP response that you send back over the network. Let's explore how res works.

Understanding the req Object in Express.js

Learn about one of the most ubiquitous variables in Express.js: req, the object that contains all the information you need about the incoming request.

How to Use __dirname in Node.js

Learn about one of Node.js' oldest tools for getting the location of your files: the __dirname variable.

Adding Sound FX to Your React Apps

Learn how to use the UIfx library to employ sound effects for your React web apps.

Extracting Dominant Colors From Images in React Using react-palette

Here's how to get colors from an image in React using an npm package called react-palette.

How to Craft Animations in React with React Simple Animate

Using "react-simple-animate", learn how to create sophisticated animations using simple APIs

Super Clean, Refactor-Friendly Import Statements in React

Use absolute imports with Create React App 3 to get super clean, refactor-friendly import statements.

Take a Tour: New Features in Create React App v3

Here's a handy guide to get up-to-speed with the latest release of Create React App, version 3.

Learn How to Build Responsive Websites in React Without CSS

Build responsive websites in React without using CSS @media queries. It's a lot easier than you think.

Battle of the Routers: Reach Router vs React Router

Let's see how Reach Router compares with React Router by looking at side-by-side code snippets.

Getting 60fps Animations in React

Some tips and tricks for React.js developers to create smooth, fast and fluid 60fps animations.

Using "window" the React Way with react-fns

Use HTML5 APIs in your React apps using a declarative idiom with the react-fns utility library.

A New Way to Handle Events in React

Skip boilerplate code and learn how to write more concise event handlers for your React code.

Creating Compositional Components in React With this.props.children

Gain a better understanding of the unique perks of this.props.children.

Atomic SetState Updates in React

Learn how to manage React state with functional precision

🕵 Search Results

🔎 Searching...