A development guide to building React components with the latest technologies

Image for post
Image for post
Image credit: Author

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. …


A hands-on guide on how to build a Web application using HTML, CSS, and JavaScript

Image for post
Image for post
Image credit: Author

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.html and style.css.
Image for post
Image for post

Open the empty index.html, and type !. …


A JavaScript guide to array transformations for interview prep and daily coding

large vine growing up and over a pergola with view of house behind
large vine growing up and over a pergola with view of house behind
Image credit: Author

Array is a list-like object, which has methods to perform traversal and mutation operations. We have reviewed array APIs in another article. Today we are going to look at some popular interview questions for array transformations.

Rotate One-Dimension Array

Given an array, we can rotate each element by k steps. If the end of the array is reached, the element will rotate to the beginning of the array. Use [1, 2, 3, 4, 5 , 6, 7] as an example. Rotating the array by one step will result in [7, 1, 2, 3, 4, 5 , 6]. Rotating the array by two steps will result in [6, 7, 1, 2, 3, 4, 5 ]. Rotating the array by nine steps will result in [6, 7, 1, 2, 3, 4, 5 ]. …


A JavaScript guide to backtracking for interview prep and daily coding

photo down the length of a covered arcade with repeating architectural features
photo down the length of a covered arcade with repeating architectural features
Image credit: Author

In a previous article, we discussed dynamic programming, which is a method to solve a larger problem by building up a solution solving smaller subproblems. It uses optimal substructure.

In this article, we are going to focus on another hot topic: backtracking.

Backtracking is a general algorithm for finding all or some solutions to a computational problem that incrementally builds candidates to the solutions while abandoning each partial candidate (backtracks). A partial candidate is abandoned either because it cannot possibly be completed to a valid solution or because the problem needs to find all valid solutions.

What are the differences between dynamic programming and backtracking? …


A JavaScript guide to Roman numerals for interview prep and daily coding

Image for post
Image for post
Image credit: Author

Roman numerals are a numeral system that originated from ancient Rome. It remains used today in some occasions. Modern usage of Roman numerals employs seven symbols, each is assigned an integer value:

  • I: 1
  • V: 5
  • X: 10
  • L: 50
  • C: 100
  • D: 500
  • M: 1000

A Roman numeral is composed with upper cases of MDCLXVI. It is written with the largest symbol at the left and the smallest symbol at right, consist with Arabic numerals. For example, MDCLXVI stands for 1666 (1000 + 500 + 100 + 50 + 10 + 5 + 1). …


A JavaScript guide to dynamic programming for interview prep and daily coding

Picture of a covered stone walkway, with a long series of stone archways and pillars.
Picture of a covered stone walkway, with a long series of stone archways and pillars.
Image credit: Author

After discussing how to prepare string manipulation interview questions, we are going to focus on another hot topic: dynamic programming.

Dynamic programming is a method to solve a larger problem by building up a solution to solving smaller subproblems.

An iterative implementation, eager and pre-caching, is usually preferred because it takes less time and memory. However, dynamic programming with iteration is harder to think through.

An iterative implementation is also called tabulation. …


JavaScript string manipulation for interview prep and daily coding

drawing of woman and rabbit on blue background
drawing of woman and rabbit on blue background
Image credit: Author

A string is a sequence of characters. It is either a constant or a variable. It is an essential data type in a programming language. In this article, we focus on JavaScript string manipulation. However, the principle and algorithms can be applied to other languages as well.

When you are presented with a technical interview, the interviewer is looking for a few things:

  • How good is your programming skill?
  • How up-to-date is your language skill?
  • How good is your problem-solving skill?

This interview series prepares you for a successful technical interview, but it is also useful for daily coding.

In the code gist format, we list important features of a JavaScript string, which is the foundation of programming skill. There are properties and methods that have existed for 20 years, as well as features in ES2021. You may already know all of them. If there is anything unclear, you know where you need to study some more. …


Create React App and the Server-Side Rendering

Image for post
Image for post
Image credit: Author

In the previous article, we described how to make a production build and deploy it to a server. Naturally, the next step is the server-side rendering. We are going to walk through the process by converting Create React App to a server-side rendered application.

Terminologies

What is client-side rendering (CSR)?

It is a technology that a browser downloads the minimal HTML page, which uses JavaScript to render and fills the content.

CSR may take longer for the initial page loading, but the subsequent loading would be faster. …


Create React App and the Production Build

Image for post
Image for post
Image credit: Author

Create React App is an integrated toolchain for the best user and developer experience. It has many things out of the box that we can jump onto and start coding immediately.

After finishing development, we need to make a production build and deploy it to a server. In this article, we walk through the build and deploy process.

Run Create React App in Development Mode

Install Create React App, and run it out of box:

npx create-react-app my-app
cd my-app
npm start
Image for post
Image for post

Form the Network tab, we see 10 requests in the development mode:

  • localhost: the main entry index.html for the root directory
  • bundle.js: the Webpack bundle…

Learn the exponentiation, nullish coalescing, optional chaining, and pipeline operators

Image for post
Image for post
Photo by Shahadat Rahman on Unsplash

Technical Committee 39 (TC39) is a group of JavaScript experts who work on the standardization of ECMAScript.

The TC39 process has a number of stages:

  • Stage 0 (Strawperson): Take input for the specification.
  • Stage 1 (Proposal): Propose the high-level API for review.
  • Stage 2 (Draft): Precisely describe the syntax and semantics using formal spec language.
  • Stage 3 (Candidate): Designated reviewers have signed off on the current spec text.
  • Stage 4 (Finished): The addition is ready for inclusion in the formal ECMAScript standard.

After stage 4, proposals will be included in the next revision of ECMAScript. When the spec goes through its yearly ratification as a standard, the proposal is ratified as part of it. …

About

Jennifer Fu

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