egghead.io

TypeScript is a typed superset of JavaScript: every valid JavaScript program is also valid TypeScript, but TypeScript adds optional static types that a compiler checks before your code ever runs. You use it by installing the typescript package, writing .ts files, and compiling them to plain .js with the tsc command. It fits best when a codebase grows past a few files or several people, where catching type errors at build time is cheaper than debugging them at runtime. For a throwaway script, plain JavaScript is usually faster to write.

What TypeScript actually adds

TypeScript does not change how JavaScript runs. Browsers and Node.js still execute JavaScript, so the types are erased during compilation. What you gain is a checking pass:

• Static type checking — the compiler reads your annotations and flags mismatches before execution.
• Earlier error detection — mistakes like calling a method that does not exist surface in your editor or in tsc, not in production.
• Better tooling — editors use the type information for autocomplete, inline documentation, and safe rename/refactor operations.
• Self-documenting interfaces — function signatures and object shapes describe intent without extra comments.

The trade-off is a build step and some annotation overhead. Types are optional, so you can adopt them gradually.

The basic workflow

1. Install the compiler

npm install --save-dev typescript

This adds tsc to your project. You can also install it globally, but a local dev dependency keeps the version consistent across machines and CI.

2. Write a .ts file

function greet(name: string): string {
  return `Hello, ${name}`;
}

console.log(greet("Ada"));

The : string annotations tell the compiler what name and the return value must be. If you call greet(42), tsc reports an error instead of letting it fail silently at runtime.

3. Compile

npx tsc greet.ts

Expected result: a greet.js file next to the source, containing the same logic with the type annotations removed. That .js file is what Node.js or the browser runs.

4. Add a config file

For anything beyond one file, create a tsconfig.json so you do not repeat flags:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

Then just run npx tsc. strict: true turns on the stricter checks, including strictNullChecks, which is where most real-world type safety comes from. Turning it on later in a large project is painful, so enable it early.

Key features with examples

Type annotations

let count: number = 0;
let names: string[] = ["Ada", "Grace"];

Annotations can be omitted when TypeScript can infer the type, which it does for most assignments.

Interfaces

interface User {
  id: number;
  email: string;
  nickname?: string; // optional
}

function sendWelcome(user: User) {
  console.log(`Welcome, ${user.nickname ?? user.email}`);
}

An interface describes the shape an object must have. Passing an object missing id or email is a compile error.

Generics

function first<T>(items: T[]): T | undefined {
  return items[0];
}

const n = first([1, 2, 3]);      // n: number | undefined
const s = first(["a", "b"]);     // s: string | undefined

Generics let one function work across types while keeping the relationship between input and output. T is a placeholder filled in at the call site.

Using TypeScript in an existing JavaScript project

You do not have to convert everything at once:

1. Add typescript and a tsconfig.json with "allowJs": true so .js files are included.
2. Rename files to .ts one at a time, starting with the most central modules.
3. Add types to function boundaries first — parameters and return values — and let inference handle the internals.
4. Turn on strict once the obvious errors are cleared.

Most build tools and bundlers accept TypeScript through a loader or plugin, so you rarely need to run tsc by hand in a modern setup. In monorepos, tools like Lerna manage multiple JavaScript/TypeScript packages from one repository, and each package can carry its own tsconfig.json while sharing a base config. That is a common reason teams introduce TypeScript: a shared type contract between packages catches breaking changes at build time rather than at integration.

Common sticking points

• any everywhere — annotating everything as any disables the checks you installed TypeScript for. Prefer unknown and narrow it.
• Ignoring strictNullChecks — most runtime crashes come from null/undefined, which this flag catches.
• Types at runtime — TypeScript types do not exist after compilation, so you still need runtime validation for data from APIs, files, or user input.
• Build configuration drift — mismatched target/module settings between tsconfig.json and your bundler cause confusing errors; keep them aligned.

If your goal is safer JavaScript in a growing codebase, start with a tsconfig.json, enable strict, and convert files incrementally. If you are writing a small script that will not be maintained, plain JavaScript remains the simpler choice.

Lerna is a build system for managing and publishing multiple JavaScript or TypeScript packages from a single repository. It fits teams that keep several interdependent packages together and need coordinated versioning, publishing, and task running. If you only have one package, or your packages never share code or releases, Lerna adds overhead without much benefit.

The core problem Lerna solves

A monorepo puts many packages in one repository. That makes sharing code easy, but it creates coordination work:

• Which packages changed since the last release?
• What version should each changed package get?
• In what order should packages be published so dependencies exist first?
• How do you run a build or test across all packages without doing it manually?

Lerna addresses these by understanding the dependency graph between your packages and acting on it.

How Lerna manages a monorepo

Versioning

Lerna tracks which packages changed and updates their versions together or independently. It supports two common modes:

• Fixed mode: all packages share one version number and are released together.
• Independent mode: each package gets its own version, so you can release only what changed.

The choice matters. Fixed mode is simpler and suits tightly coupled packages. Independent mode gives finer control but requires more discipline.

Publishing

When you publish, Lerna determines the correct order based on inter-package dependencies, so a package that depends on another is published after its dependency. It can also create git tags and update changelogs as part of the release.

Running tasks across packages

Lerna can run a command (build, test, lint) across multiple packages, and it can scope that to only the packages affected by recent changes. This is the part that saves the most time in large repos, because you avoid rebuilding everything on every change.

Lerna and Nx

Lerna is now part of the Nx ecosystem. The relationship matters when you choose tooling:

• Lerna handles the monorepo versioning and publishing workflow.
• Nx provides the broader task running, caching, and project graph capabilities.

In practice, Lerna can use Nx under the hood for task execution and caching. If you already use Nx, Lerna fits as the release layer. If you only need publishing and versioning, Lerna can stand alone.

Lerna vs. plain npm/yarn workspaces

Workspaces solve dependency linking. Lerna solves the release and task-orchestration layer on top. Many projects use both: workspaces for installation, Lerna for versioning and publishing.

When Lerna is the right choice

Consider Lerna when:

• You maintain multiple packages that depend on each other.
• You need repeatable, ordered releases rather than manual npm publish per package.
• You want to run builds or tests only for packages affected by a change.
• You are already in or moving toward the Nx ecosystem.

Look elsewhere when:

• You have a single package.
• Your packages are released independently by different teams with no shared release process.
• You only need local linking and never publish.

Where to start

Begin with the Lerna documentation at lerna.js.org. The typical first steps are initializing Lerna in an existing repository, defining your package locations, and choosing fixed or independent versioning before your first release. Getting the versioning mode right early avoids a painful migration later.

React is a JavaScript library for building user interfaces out of reusable components. You reach for it when a page needs to change state without a full reload — feeds, dashboards, editors, shopping carts — and you want to describe those changes declaratively instead of hand-editing the DOM. It handles the view layer only; routing, data fetching, and build tooling come from other libraries or a framework like Next.js.

The core ideas

Components

A component is a function that returns markup. You compose small ones into larger ones, which is why React scales from a button to a whole application.

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

JSX

JSX is the HTML-like syntax inside JavaScript. It compiles to plain function calls, so it is not a template language you have to learn separately — expressions, loops, and conditionals are just JavaScript.

Props and state

• Props are inputs passed down from a parent. They are read-only inside the component.
• State is data a component owns and can change. Changing state re-renders that component and its children.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

The mental model: UI is a function of state. You update the data, React works out the minimal DOM changes.

What people build with it

How React relates to Next.js and other tools

React is the library; Next.js is a framework built on top of it that adds routing, server rendering, and data fetching. The distinction matters when you pick a starting point:

• Plain React (via a bundler like Vite) — you assemble routing and rendering yourself. Good for SPAs and learning the fundamentals.
• Next.js — file-based routing and server-side rendering out of the box. Good for sites where SEO and first-load speed matter.

Both are common in the same stack. For example, a site can be built on Next.js for routing and rendering while a headless CMS handles content editing — TinaCMS, for instance, describes itself as adding real-time visual editing to React websites and stores content as Markdown in a Git repo, which keeps the content portable and readable by other tools.

Starting a React app

The fastest path is a scaffolding tool. With Vite:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Expected result: a dev server starts (Vite prints the local URL, typically http://localhost:5173) and you see the default page. Edit src/App.jsx, save, and the browser updates without a manual refresh.

If you want a content-driven site instead, TinaCMS documents a one-command start:

npx create-tina-app@latest my-blog

That scaffolds a Markdown repository ready for editing. Note that TinaCMS publishes a pricing page, so check current terms there rather than assuming the hosted editing experience is free — the open-source toolkit and any paid tiers are separate questions.

Common sticking points

• State updates look asynchronous. Reading count right after setCount gives the old value. Use the updater form (setCount(c => c + 1)) when the next value depends on the previous one.
• Mutating props or state directly. React compares references; mutate an array in place and it may not re-render. Create a new array or object instead.
• Reaching for global state too early. Most sharing is solved by lifting state to a common parent. Add a state library only when prop drilling becomes the actual problem.
• Confusing React with the whole app. React renders the view. Persistence, auth, and content live elsewhere — decide those separately.

Choosing whether to use it

Pick React when your interface has meaningful interactive state and you want a component model that a large ecosystem supports. Skip it for mostly static pages where plain HTML and a little JavaScript are simpler, or when a server-rendered framework alone already covers your needs. If you are already on Next.js, you are already using React — the remaining decision is where your content lives, not whether to adopt the library.

Web development is the work of building and maintaining websites and web applications — turning a design into functioning pages and features that run in a browser. It covers everything from writing HTML, CSS, and JavaScript on the front end to configuring servers, databases, and content management systems on the back end. If you're deciding whether to learn it, hire for it, or scope a project, the key distinction is this: design decides how a site looks and feels, development makes it work.

Web development vs. web design

The two roles overlap, but they answer different questions.

A designer might hand off a responsive layout; a developer turns it into HTML and CSS that renders correctly across browsers and devices. On small projects one person may do both. On larger ones they're separate roles with a handoff in between.

The front end and the back end

Web development is usually split into two halves.

Front end (client side) — everything the user sees and interacts with in the browser:

• HTML structures content
• CSS controls layout, color, and responsive behavior
• JavaScript adds interactivity, from form validation to full single-page interfaces

Back end (server side) — everything that happens on the server:

• A server-side language (for example PHP, Python, Ruby, or Node.js) handles logic and requests
• A database stores content, users, and other data
• Server configuration and APIs connect the two

A contact form is a simple example: the front end collects and validates the input, then the back end receives it, stores or emails it, and returns a response. When people say "full-stack," they mean someone comfortable on both sides.

Common types of web development work

Not all projects are the same shape, and that affects who you hire.

• Static sites — fixed pages, often hand-coded or generated. Fast and cheap to host; best for simple, rarely changing content.
• CMS builds — sites built on platforms like WordPress or Drupal so non-technical staff can edit content. Bean Creative lists both WordPress and Drupal among its platforms, which is typical for agencies serving education, non-profit, and association clients that need ongoing content control.
• Web applications — interactive tools with logins, data, and business logic, closer to software than a brochure site.
• Mobile and cross-platform work — responsive design, plus native iOS or Android apps when a project needs them. Bean Creative's scope includes app development alongside web, which reflects how often the two are now planned together.

A typical project workflow

Most builds follow a similar arc, whether in-house or with an agency:

1. Planning and discovery — define goals, audience, content, and technical constraints.
2. Design — wireframes and visual design, including responsive breakpoints.
3. Development — build templates and components, integrate the CMS or back end, connect any third-party services.
4. Testing — check across browsers and devices, verify accessibility, fix bugs, and test forms and integrations.
5. Deployment — launch on a hosting environment, then monitor and maintain.

The handoff between design and development is where projects most often stall. Agreeing early on how designs translate to real components — and who owns responsive behavior — prevents most of that friction.

Skills and roles on a team

A project may need some or all of these:

• Front-end developer — HTML, CSS, JavaScript, responsive and accessible markup
• Back-end developer — server languages, databases, APIs, security
• Full-stack developer — both, useful on smaller teams
• CMS specialist — platform setup, theming, and editor experience
• Designer / UI-UX — layout, interaction, and visual systems
• Project manager or producer — scope, timeline, and client communication

For a small marketing site, one capable developer may be enough. For a web application with accounts and data, expect at least a front-end and back-end specialist, plus design.

When you need a developer vs. a designer

• You need a designer when the problem is how something looks, reads, or flows — a new brand, a confusing navigation, a redesign.
• You need a developer when the problem is how something functions — a broken form, a slow site, a CMS that won't do what you need, an integration with another system.
• You need both when you're building something new or substantially changing an existing site.

A useful test: if the fix is a picture or a layout, it's design. If the fix is behavior, data, or infrastructure, it's development.

Common pitfalls

• Treating design and development as the same job. They need different skills, and assuming one person covers both can lead to a polished mockup that never ships well.
• Skipping responsive planning. Mobile behavior should be decided in design, not patched in code later.
• Underestimating maintenance. Sites need updates, security patches, and content changes long after launch.
• Choosing a platform before defining requirements. Picking WordPress or Drupal first, then discovering it doesn't fit, is expensive to undo.

If you're learning: start with HTML, CSS, and JavaScript, build a few small projects end to end, then add a back-end language and a CMS. If you're hiring: match the role to the problem, and confirm the team covers both the front end and whatever runs behind it.

Online courses are structured learning programs delivered over the internet, usually as a sequence of video lessons, readings, quizzes, and assignments. They work best when you match the format to your schedule and goal: self-paced courses suit flexible learners, cohort-based courses suit people who need deadlines, and live courses suit those who want real-time feedback. The main risks are outdated content, expired discount coupons, and courses you never finish.

The three formats, and what each demands from you

Many platforms mix these — a self-paced course with optional live Q&A, for example. Read the course page to see which model you're actually buying.

How to judge a course before you commit

Check these in order, because each one can disqualify a course on its own:

1. Last-updated date. For fast-moving fields like programming or AI tooling, content more than a year or two old may teach deprecated methods. For stable subjects like accounting fundamentals, age matters less.
2. Instructor credentials. Look for verifiable work or teaching history, not just a polished intro video. A short bio with no traceable background is a yellow flag.
3. Syllabus depth. A list of vague module titles ("Introduction to X") tells you less than a breakdown showing what you'll build or produce.
4. Certificate value. A certificate of completion proves attendance, not competence. It carries weight when an employer or licensing body recognizes the provider; otherwise treat it as a personal milestone.
5. Accreditation, if it matters to your goal. For degree-track or professional-credit courses, confirm the accrediting body independently rather than trusting the sales page.
6. Refund window. Note the deadline and what it excludes — many platforms only refund if you've consumed little of the course.

Free versus paid, and the coupon trap

Free courses are a legitimate way to sample a subject or a teaching style before paying. The trade-off is usually support, graded feedback, and certificates.

Discount coupons are where people lose time. Coupon aggregator sites list promotional codes that expire quickly, and a page full of dead links wastes more effort than the discount saves. DiscUdemy, for example, positions itself around this problem: its site states it deletes expired coupons and reports figures such as 2,721 active coupons, 14,440 removed coupons, and over 24 million coupons given out. Its own headings — "Used Coupon," "Viewed Coupon," "Active Coupon," "Expired Attempt," "Removed Coupon" — show the lifecycle it tracks. Treat those numbers as the site's own claims, not an independent audit, and still verify a code at checkout before planning around it.

Practical rule: if a coupon fails, don't hunt for a replacement for more than a few minutes. Compare the full price against the value of the certificate and support, and decide on that basis.

A completion plan that survives week three

Most people quit online courses in the first few weeks, not at the end. Reduce that risk with a plan set before you start:

• Block recurring time. Two 45-minute sessions a week beat an ambitious "five hours every weekend" that collapses after one busy Saturday.
• Set a finish date and work backward. Divide total content hours by your weekly hours to get a realistic end date, then add 20% buffer.
• Do something with each module. Write a summary, build a small project, or explain the concept to someone. Passive video-watching produces weak retention.
• Track progress visibly. A simple checklist of modules keeps momentum better than a percentage bar you ignore.
• Decide your exit rule up front. If the course is outdated or poorly taught, drop it early rather than "finishing" something you've stopped learning from.

Common failure points to watch for

• Outdated content in technical subjects, especially anything tied to specific software versions or APIs.
• Broken links to downloadable resources, code repositories, or supplementary material — check these in the first week while a refund may still be possible.
• Expired coupons that make a "free" course cost full price at checkout.
• Refund deadlines that pass while you're still deciding whether the course is any good.
• Certificate confusion — assuming a certificate has professional weight it doesn't carry.

If you verify the format, the freshness of the content, and the real price before enrolling, and then protect a recurring time slot, you'll avoid most of what makes online courses feel like wasted money.