Babel’s plugin macros and codegen give us a new dimension to manipulate source code at compile time
In JavaScript, we can have a static value in the source code. For example, a counter that starts at 0. We can also have a dynamic value in the source code. For example, new Date() will return the current time object at runtime.
But can we get a value specifically for compile-time processing (e.g. we want to display a timestamp when this version of code is compiled)?
Yes, we can. preval.macro is perfect for this kind of task.
Babel is a JavaScript transpiler. It enables us to write modern JavaScript that will be transpiled to ES5 JavaScript. In addition, Babel…
An introduction to JavaScript template literals, tagged template literals, and well-known tag libraries
Have you ever written code similar to this?
The console message shows 1 + 2 + 3 = 6.
The output is beautiful, but the code to compose it is ugly and confusing (line 4). Let’s beautify it by using template literals and tagged template literals.
Template Literals
According to MDN Web Docs:
“Template literals are string literals allowing embedded expressions.
…
Template literals are enclosed by backtick (
`) characters instead of double or single quotes.”
Template literals allow placeholders (${ }). Any expression in ${expression} will be evaluated and interpolated into the string.
For example, the previous code can be…
Sharing some online interview experience for software development jobs
The software development job market is hot, regardless of the current social distancing protocols. Major companies are starting to see the productivity gained through working from home.
It is now a different landscape for software developers. Suddenly, we are open to any position in the country. Being a remote employee is no longer a concern. We may never meet our coworkers in person, and employees who were hired after the pandemic have yet to find an opportunity to visit their companies.
Remote, remote, and remote.
The pandemic has forever changed the software industry. Inevitably, the interview process has been adapted…
A deep dive into the button, icon, typography, modal, select, table, and tree components
What is a UI design system?
It is a collection of components governed by UI standards for patterns, themes, styles, and design philosophies that can be reused to build applications.
The Ant Design system is an open source code for enterprise-level UI design languages and React UI library. It comes with a set of high-quality React components, with theme customization capability. It is built with i18n and has been localized for dozens of languages.
Since it was created on April 24, 2015, the Ant Design system has received about 5,000 stars on GitHub and over half a million weekly downloads…
A step-by-step comparison for resolving Git conflicts
A Git repository is a version control system that tracks file changes. With a large number of software developers working off different branches, merging everyone’s work and resolving conflicts becomes an ongoing challenge.
In a previous article, Git references, commits, and branches are described. Assisted by a handful of Git commands, we have demonstrated how to recover from a merge mess.
In this article, we are going to use examples to show how to avoid a merge mess using the choices of merge, squash, rebase, and pull.
The Conflict Case
We have created a repository with conflicts, which can be cloned by the…
An in-depth discussion on git references, commits, and branches
Have you used Git version control system for your project?
The answer is probably “yes, every day,” if you’re a software developer.
Git is the most widely used modern version control system in the world. Since it was created by Linus Torvalds in 2005, it’s played an important role coordinating work among programmers, who collaboratively develop source code during software development.
Git provides speed, data integrity, and support for distributed, non-linear workflows. It also brings pain and messed-up operations.
There are official Git documents and many blogs and guides. However, it is still difficult to master the Git version control…
Understand its data types, structures, built-in datasets, and more
R is a programming language and free software environment for statistical computing and graphics representation and reporting that is supported by the R Foundation for Statistical Computing. R is evolved from the programming language S, which is a statistical programming language developed primarily by John Chambers, Rick Becker, and Allan Wilks of Bell Laboratories.
R was initially written by Ross Ihaka and Robert Gentleman at the Department of Statistics of the University of Auckland in Auckland, New Zealand. R made its first appearance in 1993, and version 1.0 was released on February 29, 2000.
R is widely used in the…
A step-by-step guide for bundling JavaScript projects from the scratch
Rollup is a module bundler for JavaScript that compiles small pieces of code into something larger and more complex, such as a library or application. It has more than 19,000 stars on GitHub and over 3 million weekly downloads from the npm registry.
Here’s the npm trends for major bundlers on the market:
Module formats illustrated with Rollup examples
Modern JavaScript projects need a bundler to compile small pieces of code into something larger and more complex, such as a library or application. The popular bundlers are webpack, Rollup, Parcel, RequireJS, and Browserify. They transform JavaScript code into modules that can be loaded as one bundle.
A bundle can be arranged in different formats. In this article, we are going to present real examples of the CJS, AMD, UMD, ESM, System, and IIFE formats.
Bundlers and Formats
This is a standard HTML file that includes a stylesheet on line 5 and a JavaScript file on line 6:
Putting all JavaScript code…
Implement and customize D3 line and bar charts
In a previous article, “Easier D3.js — Render C3 Charts With React Functional Components,” we noted that C3 allows us to build charts quickly without knowing all of the complexity of D3. Using C3 to create a chart is just a few lines of code.
In another article, “5 Steps to Render D3.js With React Functional Components,” we mentioned that D3 provides rich features to construct graphical representations. Take charts as an example — D3 can customize every detail of axes, shapes, tool tips, texts, colors, and animation.
In this article, we’re going to dive into D3 line and bar…
