Open in app

Sign In

Write

Sign In

Nathan Sebhastian
Nathan Sebhastian

1.3K Followers

Home

About

Published in

Bits and Pieces

·Jan 11, 2022

Is Vite Better than Webpack?

Fixing Webpack’s developer experience with Vite: A modern JavaScript build tool — Webpack is a bundler-based build tool, which means that to serve your application, it needs to crawl, process, and concatenate your application’s entire JavaScript file. This applies to the dependencies and the application code that you write. This is the reason why building an application for development and starting a…

JavaScript

5 min read

Is Vite Better than Webpack?
Is Vite Better than Webpack?
JavaScript

5 min read


Published in

Bits and Pieces

·Nov 24, 2021

React with TypeScript Cheatsheet

Table of Contents: · Table of Contents: · How to type React props ∘ Creating a type alias for the props ∘ Typing optional props ∘ List of types for React component props · How to type React function components · How to type React hooks ∘ Typing useState hook ∘ Typing useEffect and useLayoutEffect hooks…

React

15 min read

React with TypeScript Cheatsheet
React with TypeScript Cheatsheet
React

15 min read


Published in

Bits and Pieces

·Oct 5, 2021

Implementing Atomic Design with React and Bit

Using Bit to compose independent React components, bottom-up, from atoms to full pages. — Atomic design is a methodology for designing and developing user interfaces in a modular manner by putting the focus on building components rather than applications. Modern user interfaces are composed of many small UI elements in the form of labels, buttons, links, and cards that are combined together. …

React

6 min read

Implementing Atomic Design with React and Bit
Implementing Atomic Design with React and Bit
React

6 min read


Published in

Bits and Pieces

·Sep 28, 2021

Introduction to Rome — An All-in-One JavaScript Dev Toolchain

A complete development environment for your web dev needs — Building a modern JavaScript project with front-end libraries like React, Vue, or Angular requires you to configure many development tools so that they can process your JavaScript code. As you may already know, a huge amount of separate development tools are available in the JavaScript ecosystem for various purposes: Webpack…

JavaScript

6 min read

Introduction to Rome — An All-in-One JavaScript Toolchain
Introduction to Rome — An All-in-One JavaScript Toolchain
JavaScript

6 min read


Published in

Bits and Pieces

·Sep 22, 2021

Create React Components from The Command Line with Agrippa

Agrippa is a development tool that allows you to generate new React components from the command line. It reduces the amount of boilerplate code you need to write when creating React components. A boilerplate is a chunk of code that serves as a template for a software project. Boilerplate components…

React

6 min read

Create React Components from The Command Line with Agrippa
Create React Components from The Command Line with Agrippa
React

6 min read


Published in

Bits and Pieces

·Sep 16, 2021

CSS Flexbox vs Grid layout

Understanding the differences between the two CSS layout models. — Flexbox and Grid are two CSS layout models that can be used to create complex web application layouts with just a couple of CSS rules. This tutorial will help you understand the differences between Flexbox and Grid CSS layout models and a recommendation on when to use one over the…

CSS

9 min read

CSS Flexbox vs Grid layout
CSS Flexbox vs Grid layout
CSS

9 min read


Published in

Bits and Pieces

·Aug 24, 2021

Introduction to Atomic Layout for React Applications

Learn how to create a grid-based layout for your React components. — Atomic Layout is a lightweight React library that allows you to generate a grid-based responsive layout for your components. Modern CSS libraries like styled-components and emotion are incredibly useful because they allow you to create isolated, local CSS that applies only to the intended specific components. But since both libraries…

JavaScript

6 min read

Introduction to Atomic Layout for React Applications
Introduction to Atomic Layout for React Applications
JavaScript

6 min read


Published in

Bits and Pieces

·Aug 17, 2021

Understanding Webpack’s Code Splitting Feature

Learn how to speed up initial load time with Webpack’s code splitting feature (with examples using React) — The main purpose of Webpack is to prepare your JavaScript files so that they can be consumed by the browser. It does so by scanning your JavaScript code from an entry point (usually the index.js file) and then following the import statements that are written in that entry point. Webpack…

JavaScript

7 min read

Understanding Webpack’s Code Splitting Feature
Understanding Webpack’s Code Splitting Feature
JavaScript

7 min read


Published in

Bits and Pieces

·Jun 11, 2021

Trying Out React 18 Alpha Release

The React Team has recently released a new alpha version of React 18. The main addition to this new version is concurrent features that improve the performance of your React application. The notable features you can already try in React 18 are as follows: The new ReactDOM.createRoot() API replacing ReactDOM.render() …

JavaScript

7 min read

Trying Out React 18 Alpha Release
Trying Out React 18 Alpha Release
JavaScript

7 min read


Published in

Frontend Weekly

·Jun 9, 2021

Create a Rich Visual Workspace for React Development with Bit Harmony

IMPORTANT: Since Bit Harmony is still in its beta phase it is likely that some of the steps in this tutorial will no longer be relevant. If that happens, please check with the official docs. Bit Harmony is a new version of Bit that offers a modern approach to develop…

JavaScript

12 min read

Create a rich visual workspace for React development with Bit Harmony
Create a rich visual workspace for React development with Bit Harmony
JavaScript

12 min read

Nathan Sebhastian

Nathan Sebhastian

1.3K Followers

Web Developer and Writer. Sharing what I learn on productivity and success.

Following
  • Eve Arnold

    Eve Arnold

  • Nick Wignall

    Nick Wignall

  • Tony Stubblebine

    Tony Stubblebine

  • Trey Huffine

    Trey Huffine

  • Nick Wolny

    Nick Wolny

See all (18)

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech

Teams