An introduction to Gatsby that is a robust and fast static site generator
What is The Great Gatsby?
It is a novel written by American author, F. Scott Fitzgerald, in 1925. The book follows a cast of characters living in the fictional towns of West Egg and East Egg on prosperous Long Island in the summer of 1922. Many literary critics consider it one of the greatest novels ever written.
Today we are talking about another Gatsby, a free and open source framework based on React that helps developers build blazing fast websites and applications.
When starting a new React app, you may consider React team’s recommendation:
- If you’re learning React or creating a new single-page app, use Create React App. …
Details of Node.js 15 new features, including throw on unhandled rejections and V8 8.6 language features
Node.js 15 was released October 20, 2020. It comes with a number of major features:
- Throw on unhandled rejections
- V8 8.6 language features
- NPM 7
- Experimental support for QUIC
- N-API Version 7
- Refinement of the Async Local Storage APIs
Let’s explore what they are and how to use them.
Use NVM to Explore Node
In a previous article, we provided instructions on using NVM (Node Version Manager) to manage Node.js and NPM versions. In our environment, we had Node.js 12.16.0 and NPM 6.14.8 installed. By running nvm install node, we installed Node.js 15.4.0 and NPM7.0.15.
We have two windows open, one is set to Node.js 12, and the other one is set to Node.js …
Detailed explanations for npm 7 features, including peer dependencies, package and yarn lock files, workspaces, etc.
npm@7.0.0 was released on October 13, 2020, and was shipped with Node.js v15.0.0 on October 20, 2020.
npm 7 is a major release, which includes many new features:
- Peer dependency automatic installation
- Package and yarn lock files enhancement
- Workspace support
- Use of
package.exports npxchanges- npm CLI command changes
Let’s go into details to explore what they are and how to use them.
Use NVM to Explore npm
In a previous article, we have provided instructions on how to use NVM (Node Version Manager) to manage Node and npm versions. In our environment, we had Node 12.16.0 and npm 6.14.8 installed. By running nvm install node, we installed Node 15.4.0 …
Set up NVM with Node.js 15 and upgrading NPM 7
Node.js 15 was released on October 20, 2020. It comes with npm 7 and many new features. Are you ready to try it out?
But wait a minute: Node.js 15 and npm 7 come with breaking changes. Will the upgrade mess up your existing projects?
Yes, potentially it could.
Luckily, we have NVM (Node Version Manager), which can help us mitigate the risk. Let’s take a walkthrough nvm and be confident enough to upgrade node.js and npm versions.
Install NVM
nvm manages node.js and npm versions. It’s designed to be installed per-user and invoked per-shell. …
An introduction to dark mode and a number of implementation approaches
In terms of web design, a light-on-dark color scheme (also called black mode, dark mode, dark theme, or night mode) is a color scheme that uses light-colored text, icons, and UI elements on a dark background.
The opposite color scheme is called dark-on-light color scheme, light mode, or light theme.
Computer screens start with dark mode by the imitation of cathode-ray tubes used back then. When light mode was introduced in WYSIWYG (what-you-see-is-what-you-get) word processors to simulate ink on paper, the skeuomorphic approach gained popularity. And quickly, light mode became the norm.
Since the year 2015, especially for the last couple of years, dark mode has gained a lot of traction. …
A development guide to building React components with the latest technologies
In a previous article, we built React tabs using Recoil, Styled Components, and Storybook.js. Here we’ll walk through advanced input fields: ClearableInput and MultiValueClearableInput. The development process can be applied to daily coding work. It’s also a frequently asked interview question, fitting easily within the one-hour interview time frame.
Since an input field is self-contained, useState is well-suited for state management. We don’t need to use Recoil for external state management in this case.
Create React App is used to set up the React coding environment:
npx create-react-app my-app
cd my-app
npm startSet up Styled Components for dependencies in your package.json: …
An in-depth guide on how to upgrade Create React App-based projects to the latest version
Create React App is a quick way to scaffold a React project. It can be easily generated by the command npx create-react-app <project name>. Then you have the latest packages and the execution environment for a React project. It is convenient and effective.
Everything is great when it is fresh.
As time goes on, there will be new versions of Create React App that have new features and under-the-hood improvements. What then?
In this article, we’ll use Create React App 4 (CRA 4) as an example to walk through the process of upgrading Create React App-based projects.
Upgrade react-scripts
The official documentation recommends running the following command to…
An interview guide for DOM, document fragments, virtual DOM, React fragments, incremental DOM, and shadow DOM
The virtual DOM is a core concept of React. It’s a representation of the UI that’s kept in memory and synced with the actual DOM. The React DOM maintains the virtual DOM by reconciling the differences locally. The changes are inserted into the actual DOM based on the React pulling schedule.
DocumentFragment is an interface that defines the minimal document object without a parent. It’s used as a lightweight version of Document and stores DOM objects. Document fragments have no effect on the actual DOM. But their children can be added to the actual DOM on demand.
The virtual DOM and document fragments use the same concept to improve the UI performance. Is the virtual DOM derived from document fragments? …
A development guide to building React components with the latest technologies
In a previous article, we introduced Recoil, the state management library that’s been available since May 2020. For managing states, Recoil is simpler and more effective than Context API and Redux. We have been using it for our projects ever since.
In another article, we introduced styled components, a JavaScript library that allows us to write CSS inside a JavaScript file. As a result, components can run independently, without relying on any external CSS files.
Storybook is a tool for UI development. It makes development faster and easier by isolating components. …
A hands-on guide on how to build a Web application using HTML, CSS, and JavaScript
Web development has advanced to framework era. However, interview is a time limited experience. Frequently, a frontend job interview requests building a simplified Web application, with restricted resource of HTML, CSS, and JavaScript, and possibly, without internet access to check syntax.
In this article, we use limited resource to build a Web application.
VSCode Preparation
We use VSCode to set up the working environment for HTML, CSS, and JavaScript.
- Create a directory, named as
js. - Create two empty files in the directory:
index.htmlandstyle.css.
