Frontend on David Lang

Vite vs Webpack: Why Developers Are Switching

Tue, 08 Feb 2022 00:00:00 +0000

Vite uses native ES modules in development for near-instant cold starts. Webpack remains ubiquitous in enterprise codebases-but Vite won the greenfield race by 2022.

Development Experience

Vite serves source files directly; the browser requests modules on demand. Webpack bundles the entire graph before serving-slower as projects grow.

Production Builds

Vite uses Rollup for optimized production bundles. Tree-shaking, code splitting, and asset handling are comparable to Webpack 5.

Migration Tips

Replace webpack.config.js with vite.config.ts. Use import.meta.env instead of process.env for env variables. Check plugins-most popular React libraries ship Vite templates.

React 18: Concurrent Features and the New Root API

Sat, 15 Jan 2022 00:00:00 +0000

React 18 introduced concurrent rendering, automatic batching, and a new root API. These changes improve perceived performance without rewriting your entire app.

createRoot

import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

The legacy ReactDOM.render is deprecated. createRoot enables concurrent features.

Suspense and Transitions

useTransition marks updates as non-urgent-keeping the UI responsive during heavy re-renders:

const [isPending, startTransition] = useTransition();

function handleTab(tab) {
  startTransition(() => setActiveTab(tab));
}

Strict Mode Changes

Strict Mode double-invokes effects in development to surface side-effect bugs. Audit useEffect cleanup functions before upgrading.

Tailwind CSS: Rapid UI Development

Fri, 05 Mar 2021 00:00:00 +0000

Tailwind CSS is a utility-first framework-you compose designs from small classes in markup instead of writing custom CSS files for every component.

Why Teams Adopt Tailwind

Development speed increases when you do not context-switch between JSX and separate stylesheets. Design tokens (spacing, colors, typography) stay consistent through configuration. PurgeCSS removes unused classes in production builds.

Example Component

function Card({ title, children }) {
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow">
      <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
      <div className="mt-2 text-gray-600">{children}</div>
    </div>
  );
}

Customizing the Theme

Extend tailwind.config.js with brand colors and fonts. Use @apply sparingly in CSS modules for repeated patterns.

Modern JavaScript ES2020: Top Features You Should Know

Sat, 28 Nov 2020 00:00:00 +0000

ECMAScript 2020 added practical features that reduce boilerplate and improve null-safety. If you are still avoiding optional chaining, now is the time to adopt it.

Optional Chaining and Nullish Coalescing

const city = user?.address?.city ?? 'Unknown';

?. short-circuits on null or undefined. ?? returns the right side only when the left is null or undefined-unlike ||, it preserves 0 and ''.

BigInt and globalThis

BigInt handles integers beyond Number.MAX_SAFE_INTEGER. globalThis provides a standard way to access the global object in browsers and Node.

CSS Grid Layout: Building Responsive Designs

Sun, 14 Jun 2020 00:00:00 +0000

CSS Grid is a two-dimensional layout system-rows and columns together-making it ideal for page layouts, dashboards, and card grids that Flexbox alone struggles with.

Defining a Grid

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

.sidebar { grid-column: 1; grid-row: 2; }
.main    { grid-column: 2; grid-row: 2; }

Responsive Patterns

Use repeat(auto-fit, minmax(280px, 1fr)) for card layouts that reflow without media queries. Named grid areas improve readability:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
}

Grid vs Flexbox

Use Grid for page-level structure; use Flexbox for aligning items inside a component (nav links, button groups). They complement each other.