DEV Community: JSDev Space

Building a CSS Structure That Stays Maintainable

JSDev Space — Sun, 12 Jul 2026 08:35:16 +0000

How to Organize CSS Like a Professional

Every developer has experienced it.

You open a CSS file that seemed perfectly reasonable a few months ago, only to find hundreds or even thousands of lines of styles with no obvious structure. Similar selectors appear in different places. Properties are arranged randomly. Duplicate rules have accumulated over time. Making a small change suddenly feels risky.

The problem isn't CSS itself. It's organization.

Well-organized CSS is easier to read, review, debug, and extend. It reduces merge conflicts, helps new team members understand the codebase faster, and makes future refactoring far less painful.

Professional developers rarely rely on memory alone. They follow consistent rules that make every stylesheet predictable.

In this guide, you'll learn practical techniques for organizing CSS in projects of any size.

Start With a Clear File Structure

The first step is deciding where styles belong.

A single stylesheet might work for a landing page, but larger projects benefit from splitting styles into logical sections.

A common structure looks like this:

styles/
│
├── base/
│   ├── reset.css
│   ├── typography.css
│   └── variables.css
│
├── layout/
│   ├── header.css
│   ├── footer.css
│   └── grid.css
│
├── components/
│   ├── button.css
│   ├── card.css
│   ├── modal.css
│   └── form.css
│
├── pages/
│   ├── home.css
│   └── dashboard.css
│
└── utilities.css

Instead of searching through one massive file, you immediately know where to look.

Keep Related Rules Together

CSS should tell a story.

When styles for the same component are scattered throughout multiple files, understanding that component becomes difficult.

Instead of this:

.button {
    padding: 12px;
}

.card {
    border-radius: 12px;
}

.button:hover {
    background: blue;
}

.card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

Group related selectors together.

.button {
    padding: 12px;
}

.button:hover {
    background: blue;
}

.button:disabled {
    opacity: .5;
}

.card {
    border-radius: 12px;
}

.card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}

Everything related to the button lives in one place.

Follow a Consistent Property Order

One of the biggest differences between beginner and professional CSS is property organization.

Compare these examples.

Random order:

.card {
    background: white;
    display: flex;
    margin: 24px;
    border-radius: 12px;
    position: relative;
    padding: 20px;
    width: 300px;
}

Structured order:

.card {
    position: relative;
    display: flex;

    width: 300px;
    margin: 24px;
    padding: 20px;

    background: white;
    border-radius: 12px;
}

The second version is easier to scan because similar properties are grouped together.

Many teams follow an order similar to:

Positioning
Display
Flexbox/Grid
Size
Spacing
Typography
Colors
Borders
Effects
Transitions
Animations

Consistency matters more than the exact order you choose.

Automate Property Sorting

Manually sorting CSS properties works for small files.

It doesn't scale.

As projects grow, automatic organization becomes much more reliable than relying on every developer to remember the same rules.

A CSS organizer can automatically reorder properties into a consistent structure every time you save or format a file.

This removes unnecessary discussions during code reviews and keeps the codebase consistent regardless of who wrote the original styles.

Use Meaningful Class Names

Naming has a bigger impact than many developers realize.

Compare these examples.

Poor naming:

.box2 {}
.blue {}
.big {}

Better:

.product-card {}
.user-avatar {}
.navigation-menu {}

Descriptive names communicate intent instead of appearance.

If a blue button later becomes green, the class .primary-button still makes sense.

A class named .blue-button does not.

Avoid Deep Selector Nesting

Deeply nested selectors quickly become difficult to maintain.

Example:

.dashboard .sidebar .menu ul li a span {
    color: #333;
}

Changing the HTML structure may break the selector entirely.

Instead, keep selectors relatively flat.

.menu-link-label {
    color: #333;
}

Simple selectors are easier to reuse and generally perform better.

Reduce Duplication

Repeated styles usually indicate an opportunity to create a reusable utility or shared component.

Instead of:

.card {
    border-radius: 12px;
}

.modal {
    border-radius: 12px;
}

.dropdown {
    border-radius: 12px;
}

Consider introducing a reusable utility where appropriate.

The less duplicated code you maintain, the fewer places you need to update when requirements change.

Separate Layout From Appearance

Layout properties determine where an element lives.

Appearance properties determine how it looks.

Keeping these responsibilities separate makes components more flexible.

For example:

.card {
    display: flex;
    gap: 16px;
}

.card-theme {
    background: white;
    border-radius: 12px;
}

Now different themes can reuse the same layout.

Use CSS Variables

Magic numbers eventually become difficult to manage.

Instead of repeating values:

.button {
    color: #2563eb;
}

.link {
    color: #2563eb;
}

.badge {
    color: #2563eb;
}

Define variables once.

:root {
    --primary-color: #2563eb;
}

.button {
    color: var(--primary-color);
}

.link {
    color: var(--primary-color);
}

.badge {
    color: var(--primary-color);
}

Changing one variable updates the entire design system.

Leave Breathing Room

Whitespace improves readability.

Compare these examples.

Compressed:

.card{display:flex;padding:16px;background:white;}

Readable:

.card {
    display: flex;
    padding: 16px;
    background: white;
}

Modern editors collapse code automatically when needed, so there is little benefit to writing compressed CSS during development.

Organize Components Instead of Pages

Many developers initially create files like:

home.css
about.css
contact.css

This works until components begin appearing on multiple pages.

Instead, organize around reusable UI elements.

button.css
card.css
modal.css
table.css

Components naturally scale as projects grow.

Document Unusual Decisions

Most CSS doesn't need comments.

Occasionally, however, a workaround deserves an explanation.

For example:

/* Safari flexbox bug workaround */

/* Required for sticky header inside nested scroll container */

Future developers, including your future self, will appreciate the context.

Review CSS Like Code

CSS deserves the same attention as JavaScript.

During code reviews, ask questions like:

Can this selector be simplified?
Is this property duplicated elsewhere?
Does this component already exist?
Can a CSS variable replace this value?
Is the naming consistent?

Small improvements during reviews prevent large problems later.

Build Consistency Into Your Workflow

Professional teams don't rely on memory.

They automate consistency wherever possible.

Use formatting tools.

Use linters.

Use automatic property organization.

The less time spent discussing formatting, the more time remains for solving real problems.

Common Mistakes

Several patterns appear repeatedly in growing codebases:

Mixing layout and component styles in the same file.
Using inconsistent property ordering.
Creating deeply nested selectors.
Duplicating declarations across multiple components.
Naming classes based on appearance instead of purpose.
Hardcoding colors and spacing values throughout the project.
Allowing formatting styles to differ between developers.

None of these issues are difficult to fix individually. Together, however, they gradually make a stylesheet harder to maintain.

Conclusion

Professional CSS isn't defined by clever selectors or complex animations.

It's defined by consistency.

When every stylesheet follows the same structure, every component uses the same naming conventions, and every property appears in a predictable order, development becomes faster and collaboration becomes easier.

Organization also pays dividends over time. Six months from now, you'll spend less time searching, less time debugging, and less time wondering why a particular rule exists.

Good CSS isn't just code that works. It's code that remains understandable long after it was written.

If you find yourself repeatedly reorganizing properties by hand, consider using an automatic CSS organizer as part of your workflow. Tools like JSTools CSS Organizer automatically sort CSS properties into a consistent order, making stylesheets easier to read, review, and maintain as your project grows.

If you find yourself repeatedly reorganizing properties by hand, consider using an automatic CSS organizer as part of your workflow. Let your tools handle repetitive formatting so you can focus on building better interfaces.

Cleaning Extra and Repeated Spaces in String Values with RegExp

JSDev Space — Fri, 03 Jul 2026 03:44:32 +0000

Sometimes the smallest data-cleaning problem becomes one of the most annoying: a string looks normal, but it contains extra spaces, tabs, line breaks, non-breaking spaces, or other whitespace characters.

This is especially common when text comes from users, spreadsheets, Word documents, copied web pages, exports, forms, or manually maintained directories.

The goal is simple:

"  Eat   more   soft\tFrench\nbread  "

should become:

"Eat more soft French bread"

In other words:

replace repeated whitespace with a single space;
remove spaces from the beginning and end of the string.

The Excel Analogy: TRIM()

Excel has a well-known function called TRIM().

It removes extra spaces from text, leaving only single spaces between words. This is useful when data is imported from other systems and may contain unnecessary spaces.

For example:

"  Eat more of these soft French rolls,  and drink some tea  "

becomes:

"Eat more of these soft French rolls, and drink some tea"

That is usually exactly what we want before comparing values, doing lookups, joining datasets, or saving user-entered text.

Why This Matters

When working with user data, string values are often used for matching records.

For example:

matching names from two exports;
joining rows from different systems;
comparing manually entered values;
cleaning reference data;
preparing text before saving it to a database.

A small invisible character can break the match.

These two strings may look almost identical:

"John Smith"
"John   Smith"

or:

"John Smith"
"John\tSmith"

but for code, databases, and lookup operations, they are different values.

That is why basic string normalization is often worth doing before comparison or storage.

The Solution

The compact solution is based on a regular expression:

\s+

It means: “find one or more whitespace characters.”

Then we replace every such sequence with a single ordinary space and trim the result.

JavaScript

function purge(value) {
  return value.replace(/\s+/g, " ").trim();
}

Example:

purge("  Hello\t\tworld\nfrom   JavaScript  ");
// "Hello world from JavaScript"

Python

import re

def purge(value: str) -> str:
    if isinstance(value, str):
        return re.sub(r"\s+", " ", value).strip()
    return value

Example:

purge("  Hello\t\tworld\nfrom   Python  ")
# "Hello world from Python"

VBA / VBScript

Function Purge(str_in)
  Set objRegExp = CreateObject("VBScript.RegExp")

  With objRegExp
    .Pattern = "\s+"
    .Multiline = True
    .Global = True
  End With

  Purge = Trim(objRegExp.Replace(str_in, " "))
End Function

What Does `\s` Match?

In many regular expression engines, \s matches common whitespace characters, including:

Character	Meaning
`\f`	form feed
`\n`	line feed
`\r`	carriage return
`\t`	tab
`\v`	vertical tab
space	regular space

Depending on the language and regex engine, it may also match additional Unicode whitespace characters.

Where This Should Be Used

This kind of cleanup is useful for short text fields:

names;
titles;
labels;
categories;
search values;
addresses;
reference data;
one-line form inputs.

It is not always appropriate for long-form text.

For example, if a user writes an article, comment, essay, Markdown document, or text with intentional line breaks, blindly replacing all whitespace may destroy formatting.

So the rule is simple:

Use this for compact string values, not for rich multi-paragraph content.

If you're just getting started with regular expressions—or simply need a quick reference while writing patterns—take a look at this comprehensive Regex Cheat Sheet. It covers the most common character classes, quantifiers, groups, lookarounds, flags, and practical examples that work across modern JavaScript and many other regex engines.

Frontend or Backend?

Ideally, both.

Frontend cleanup improves user experience and gives immediate feedback. Backend cleanup protects the database and keeps data consistent even if the frontend changes later.

Applications evolve. Forms get replaced. APIs get reused. Admin panels appear. Imports are added.

Normalizing important string fields on the backend is usually a good safety net.

Final Thought

This is a tiny helper, but it solves a very real problem.

A single line of RegExp can prevent broken lookups, duplicated records, inconsistent labels, and annoying invisible whitespace bugs.

For compact user-entered string values, this is one of those small utilities that quietly makes the whole system cleaner.

Working With Massive JSON Responses

JSDev Space — Wed, 01 Jul 2026 21:36:41 +0000

Working With Massive JSON Responses Without Losing Performance

Every developer eventually encounters it.

You make an API request expecting a few hundred objects, and instead receive a response that's tens—or even hundreds—of megabytes. Suddenly your browser freezes, your editor becomes sluggish, and your application consumes gigabytes of memory.

Large JSON responses aren't unusual anymore. Analytics platforms, cloud providers, search engines, AI services, ecommerce catalogs, IoT systems, and data export endpoints routinely generate enormous payloads.

The good news is that handling massive JSON efficiently is mostly about choosing the right techniques. This guide covers the best practices that help you inspect, process, and optimize large JSON datasets without overwhelming your tools or your users.

Understand Why Large JSON Is Expensive

Before optimizing, it's helpful to know where the cost comes from.

When an application receives JSON, it usually goes through several stages:

Download the response.
Store it as a string.
Parse it into objects.
Allocate memory for every property.
Traverse the resulting object graph.

For a 100 MB JSON file, peak memory usage can easily exceed 300 MB because both the raw string and the parsed objects coexist temporarily.

This explains why applications often run out of memory long before reaching the actual file size.

Don't Pretty-Print Gigantic Responses Immediately

Pretty-printing is useful—but formatting a huge document all at once can consume significant CPU time and memory.

Instead:

inspect only the sections you need
collapse large objects
expand nodes on demand
search before formatting

If you need to examine a large payload in the browser, using a dedicated formatter designed for large documents can make navigation much easier. Tools like JSON Formatter allow you to validate, format, collapse, and inspect JSON without manually editing thousands of lines.

Stream Instead of Loading Everything

One of the biggest mistakes is reading an entire response before processing it.

Instead of:

const response = await fetch(url);
const data = await response.json();

consider streaming whenever possible.

Node.js streams let you process incoming data incrementally instead of waiting for the complete response.

Benefits include:

lower memory usage
faster processing
earlier results
better scalability

Streaming becomes essential once payloads exceed dozens of megabytes.

Prefer Pagination

Sometimes the simplest optimization is requesting less data.

Instead of downloading:

GET /users

prefer:

GET /users?page=1&limit=100

Advantages include:

smaller responses
quicker rendering
reduced bandwidth
improved caching
lower server load

APIs that expose pagination almost always perform better for both clients and servers.

Filter Data at the Source

Avoid requesting fields you never use.

Many APIs support field selection.

Example:

GET /products?fields=id,name,price

instead of downloading:

descriptions
images
reviews
metadata
audit history

Reducing unnecessary properties often has a greater impact than optimizing parsing.

Compress Responses

JSON compresses exceptionally well.

Typical compression ratios:

Format	Approximate Size
Raw JSON	100 MB
Gzip	12–20 MB
Brotli	8–15 MB

Always enable compression for API responses unless latency requirements dictate otherwise.

Parse Only Once

Repeated parsing is surprisingly common.

Avoid:

JSON.parse(jsonString);

JSON.parse(jsonString);

JSON.parse(jsonString);

Instead:

const data = JSON.parse(jsonString);

Then reuse the parsed object throughout your application.

Search Before Expanding

Suppose your response contains:

150,000 objects
20 nested arrays
thousands of repeated structures

Scrolling manually becomes impractical.

Instead, search for:

IDs
property names
timestamps
user names
error codes

Efficient searching reduces the amount of JSON you actually need to inspect.

Validate Before Processing

Large files often contain subtle syntax problems.

Examples include:

missing commas
invalid escape sequences
broken UTF-8
truncated downloads

Always validate JSON before feeding it into production systems.

A formatter that performs validation while parsing can quickly identify malformed documents and pinpoint syntax errors before they propagate through your application.

Avoid Deep Copies

This pattern becomes expensive:

const clone = JSON.parse(JSON.stringify(data));

For massive objects, it duplicates the entire structure.

Prefer:

shallow copies
targeted updates
immutable libraries
structuredClone() where appropriate

Deep copying large datasets often doubles memory consumption.

Don't Keep Everything in Memory

Many applications only need a fraction of the response at any given moment.

Instead of storing:

Entire dataset

consider:

loading pages
processing chunks
writing intermediate results
caching only active records

Memory is usually the first bottleneck when working with large JSON.

Use a Dedicated Desktop Viewer

Very large JSON files can become difficult to work with inside a browser or a code editor. If you regularly inspect multi-megabyte or even gigabyte-sized documents, a dedicated desktop application can provide a smoother experience with features like tree navigation, search, formatting, validation, and large-file handling.

For developers who frequently work with API responses, log files, or exported datasets, JSON Studio offers a purpose-built environment for viewing, formatting, and exploring JSON without cluttering your primary editor.

Use Incremental Rendering

Rendering 100,000 rows simultaneously is rarely necessary.

Modern frontend frameworks support techniques such as:

virtualization
infinite scrolling
lazy rendering
windowing

Only visible elements should exist in the DOM.

This dramatically improves responsiveness.

Generate Types Automatically

Large APIs often contain hundreds of properties.

Writing TypeScript interfaces manually becomes tedious and error-prone.

Instead, generate them directly from sample JSON using a JSON to TypeScript Converter. Automatically generated interfaces help keep frontend models synchronized with backend responses while reducing manual maintenance.

Split Large Configuration Files

Instead of maintaining:

config.json

with 20,000 lines, consider organizing data into:

config/
    database.json
    auth.json
    cache.json
    logging.json

Smaller files are:

easier to review
easier to validate
easier to merge
easier to understand

Consider NDJSON for Streaming

Traditional JSON requires parsing the entire document.

Newline-delimited JSON (NDJSON) stores one JSON object per line.

Example:

{"id":1,"name":"Alice"}
{"id":2,"name":"Bob"}
{"id":3,"name":"Charlie"}

Advantages:

stream processing
incremental parsing
lower memory usage
ideal for logs
excellent for ETL pipelines

Monitor Parsing Performance

Measure before optimizing.

Useful metrics include:

download time
parse time
memory usage
rendering time
garbage collection frequency

Performance profiling often reveals that parsing isn't the actual bottleneck.

Cache Responsibly

If responses rarely change, caching can eliminate repeated downloads.

Popular strategies include:

HTTP caching
CDN caching
IndexedDB
local storage (for smaller payloads)
server-side caching

Caching reduces both bandwidth and latency.

Avoid Giant Responses Whenever Possible

Sometimes optimization isn't enough.

Ask whether the API should return:

summaries
aggregates
filtered datasets
paginated results
compressed archives

A well-designed API minimizes unnecessary data transfer from the beginning.

Best Practices Checklist

Before working with a large JSON response, consider the following:

Stream instead of loading everything.
Enable gzip or Brotli compression.
Request only the fields you need.
Paginate large datasets.
Validate JSON before processing.
Search instead of manually browsing.
Avoid deep cloning.
Render incrementally.
Cache when appropriate.
Generate TypeScript interfaces automatically.
Split large configuration files into smaller units.
Measure memory and parsing performance.

Final Thoughts

Large JSON responses are a reality of modern software development, but they don't have to become a performance problem.

Most bottlenecks stem from loading too much data at once, parsing it repeatedly, or rendering more than users can actually see. By streaming responses, requesting only the fields you need, validating payloads early, and adopting incremental processing techniques, you can handle datasets containing millions of records while keeping your applications responsive.

As a final tip, invest in tools that simplify your workflow. A capable JSON formatter makes massive payloads easier to inspect and validate, while automatic TypeScript generation eliminates hours of repetitive work and helps ensure your application's types stay aligned with your API. Small improvements like these add up quickly when working with large-scale JSON every day.

Why Direct S3 Uploads Beat Proxying Images Through Your Backend

JSDev Space — Mon, 29 Jun 2026 07:29:49 +0000

A practical look at how presigned URLs simplify architecture, reduce server load, and fit naturally into Progressive Web Apps.

Adding image uploads to a Progressive Web App seems simple at first.

The traditional approach is familiar. A browser uploads a file to the application server, the server stores it in S3, and every future request for that image passes through the backend for permission checks.

It works.

Until traffic starts growing.

One developer recently shared how an image upload feature eventually led to a complete redesign of the application's storage architecture.

The original design looked perfectly reasonable

The application supported several kinds of images.

Some were uploaded for AI processing.

Others became preview images that could be public or private.

Some files existed only temporarily and could be removed after processing.

The first implementation followed the classic pattern.

The client uploaded every file to the backend.

The backend stored it in an S3 compatible object store.

When users later requested an image, the backend verified permissions, downloaded the object from storage, and streamed it back to the browser.

Nothing about this architecture seemed unusual.

The problems appeared only after looking at the data flow.

Proxying every image becomes expensive

Every uploaded file passed through the backend twice.

Once during upload.

Once again during download.

That meant application servers spent a significant amount of time moving files instead of processing business logic.

Bandwidth usage increased.

Long lived connections accumulated.

Scaling the application meant adding servers simply to proxy images between browsers and object storage.

Caching also became more complicated.

Because every request passed through the application layer, integrating a CDN or taking advantage of browser caching required additional work.

For a Progressive Web App, the architecture felt even less natural.

PWAs already rely on Service Workers to cache assets locally and provide offline access. Routing every image through the backend reduced many of those advantages.

Presigned URLs changed everything

Instead of transferring files through the backend, S3 compatible storage can generate presigned URLs.

A presigned URL is a temporary signed link that grants permission to upload or download a specific object for a limited period of time.

The backend still performs authentication and authorization.

Instead of receiving the file itself, it generates a temporary upload URL.

The browser then uploads the image directly to object storage.

The same idea applies to downloads.

Rather than proxying the file, the backend returns a temporary download URL that gives the client secure access without exposing the storage bucket publicly.

As a result, the application server is responsible only for permissions, quotas, and metadata.

Large binary files never pass through it.

One additional requirement

Direct browser uploads require CORS to be configured on the storage bucket.

A minimal configuration typically allows the application's origin while permitting the HTTP methods needed for uploads and downloads.

{
  "CORSRules": [
    {
      "AllowedOrigins": [
        "https://example.com"
      ],
      "AllowedMethods": [
        "GET",
        "PUT",
        "POST"
      ],
      "AllowedHeaders": [
        "*"
      ]
    }
  ]
}

Once this policy is in place, browsers can communicate with S3 or MinIO directly while remaining within the browser's security model.

The final workflow became much simpler

The browser first requests permission to upload a file.

The backend validates quotas, user permissions, and upload limits before generating a short lived presigned URL.

The browser uploads the image directly to object storage.

After the upload completes, the application stores only the file metadata and associates it with the appropriate record.

When the image is requested later, the backend generates a temporary download URL instead of streaming the file itself.

This design dramatically reduces backend traffic while preserving complete control over who can access each object.

Why this architecture works well for PWAs

Progressive Web Apps benefit naturally from direct object storage access.

Images downloaded through temporary URLs can be cached by the Service Worker and stored for offline use.

Future requests can often be served directly from the local cache without contacting either the backend or object storage.

The backend becomes smaller, simpler, and easier to scale.

Object storage performs the job it was designed for, while the application focuses on authentication, authorization, and business logic.

Moderation remained independent

Image moderation also fit naturally into the new design.

Once an upload was registered, the file entered a moderation workflow before becoming visible to other users.

Because uploads no longer passed through the backend itself, moderation operated independently from the transfer process.

This separation made it easier to replace manual review with automated image classification later without changing the storage architecture.

Key takeaways

Moving to presigned URLs eliminated unnecessary network traffic and significantly reduced backend load.

The architecture became easier to scale because application servers no longer acted as file proxies.

It also aligned much better with how Progressive Web Apps handle offline caching through Service Workers.

The approach does introduce a few responsibilities.

Presigned URLs should have short expiration times.

Unused uploads should be cleaned up periodically.

Permission checks should always happen before generating a signed URL.

Beyond that, the solution is surprisingly straightforward.

Sometimes the best optimization isn't making the backend faster.

It's allowing the backend to step out of the way entirely.

25 JSON Mistakes Every Developer Makes

JSDev Space — Thu, 25 Jun 2026 23:57:52 +0000

A developer's guide to debugging syntax flaws, escaping characters, and parsing data without the headaches.

JSON (JavaScript Object Notation) is the backbone of modern web communication. It’s human-readable, lightweight, and universally supported. Yet, because its specification is incredibly strict, even seasoned developers regularly trip over its syntax.

Here are 25 of the most common JSON mistakes, categorized by syntax, data types, environments, and architecture—along with exactly how to avoid them.

The Syntax Traps

1. Using Single Quotes

JavaScript, Python, and PHP let you use single quotes (') for strings. JSON absolutely forbids it. All keys and string values must use double quotes (").

Wrong: {'name': 'Alex'}
Right: {"name": "Alex"}

2. Trailing Commas

Leaving a comma after the last item in an object or array is standard practice in modern programming languages to keep git diffs clean. In JSON, it causes a fatal parsing error.

Wrong: {"id": 1, "status": "active",}
Right: {"id": 1, "status": "active"}

3. Missing Commas Between Elements

On the flip side, when manually editing JSON or generating it via string concatenation, it’s easy to forget commas separating key-value pairs or array items.

Wrong: {"a": 1 "b": 2}
Right: {"a": 1, "b": 2}

4. Unquoted Keys

In standard JavaScript objects, keys don't need quotes unless they contain special characters. In JSON, every single key must be wrapped in double quotes.

Wrong: {username: "dev_123"}
Right: {"username": "dev_123"}

5. Mismatched Brackets or Braces

In deeply nested structures, forgetting to close a curly brace } or a square bracket ] will immediately break the parser.

6. Misplacing Object/Array Notation

Using curly braces {} where square brackets [] belong (or vice versa)—such as wrapping a flat list of items in an object without assigning keys.

Wrong: {"apple", "banana"}
Right: ["apple", "banana"]

Data Type Misconceptions

7. Serializing `undefined`

JSON has no concept of undefined. If you pass a JavaScript object containing an undefined value to JSON.stringify(), that key will be completely stripped out.

Result: JSON.stringify({ data: undefined }) becomes {}. Use null instead if you need to preserve the key.

8. Relying on `NaN` and `Infinity`

Numeric values like NaN (Not a Number), Infinity, and -Infinity are not supported by the JSON specification.

Result: JSON.stringify({ value: NaN }) converts the value to null ({"value": null}).

9. Forgetting JSON Doesn’t Have a Date Type

JSON has no native Date data type. When you stringify a Date object, it turns into an ISO timestamp string. If you don't parse it back manually on the receiving end, it stays a string.

Example: {"created_at": "2026-06-26T00:00:00.000Z"} is just text until you pass it to new Date().

10. Forgetting Hexadecimal, Binary, or Octal Numbers

JSON numbers must be base-10. You cannot use 0x, 0b, or leading zeros for octals.

Wrong: {"mask": 0xFF}
Right: {"mask": 255}

11. Storing Functions or Methods

JSON is strictly for static data. You cannot serialize functions, closures, or class methods. Attempting to do so will result in the property being skipped or throwing an error.

12. Treating Comments as Valid

JSON does not support comments (// or /* */). Adding them to explain your configuration files will cause parsers to reject the entire file. If you need comments, consider using JSONC or YAML instead.

String and Character Escaping

13. Unescaped Double Quotes

If your text data contains literal double quotes (e.g., dialogue or HTML attributes), they must be escaped using a backslash (\").

Wrong: {"quote": "He said "Hello" "}
Right: {"quote": "He said \"Hello\" "}

14. Unescaped Control Characters (Newlines)

You cannot hit "Enter" inside a JSON string value to create a newline. Multi-line text must use explicit control characters like \n or \r\n.

Wrong:

{"text": "Line one
Line two"}

Right: {"text": "Line one\nLine two"}

15. The Backslash Pitfall

Because the backslash (\) is the escape character in JSON, if your data includes literal backslashes (like Windows file paths or regex patterns), you must escape the backslash itself (\\).

Wrong: {"path": "C:\Users\Admin"}
Right: {"path": "C:\\Users\\Admin"}

Code and Environment Errors

16. `JSON.parse()` on an Object (or `JSON.stringify()` on a String)

Passing something that is already a JavaScript object to JSON.parse() will trigger an [object Object] error. Similarly, stringifying an already stringified JSON creates a mess of escaped slashes ("{\"a\":1}").

17. Forgetting that JSON Keys are Case-Sensitive

{"userId": 1} and {"userid": 1} are entirely different keys. Typos in casing are a leading cause of silent frontend bugs where values show up as undefined.

18. Assuming Object Key Order is Guaranteed

While modern environments often preserve insertion order for object keys, the JSON specification does not guarantee key order. Never write logic that relies on keys appearing in a specific sequence.

19. Vulnerable Evaluation (`eval()`)

Historically, developers used eval("(" + jsonString + ")") to parse JSON. This is a catastrophic security vulnerability that allows for Remote Code Execution (RCE). Always use JSON.parse().

Advanced and Architectural Mistakes

20. Truncating Large Integers (The `BigInt` Issue)

JavaScript numbers are double-precision floats, which lose precision above $2^{53} - 1$ (Number.MAX_SAFE_INTEGER). If your backend passes a massive 64-bit ID as a pure number, the frontend will corrupt it during parsing.

The Fix: Pass large IDs as strings: {"id": "9223372036854775807"}.

21. Silent Failures due to Missing `try...catch`

JSON.parse() is a synchronous, blocking operation that throws a hard error if the input string is invalid. Failing to wrap it in a try...catch block means an unexpected network payload can instantly crash your entire app.

22. Circular References

If Object A references Object B, and Object B references Object A, calling JSON.stringify(A) will throw a TypeError: Converting circular structure to JSON. You must break the cycle or use custom replacer functions.

23. Confusing JSON with JavaScript Object Literals

Just because they look similar doesn't mean they are the same. JS objects allow unquoted keys, functions, trailing commas, and single quotes; JSON allows none of these.

24. Misinterpreting Empty Payloads

An empty string "" is not valid JSON. Attempting to run JSON.parse("") will throw an unexpected end-of-input error. A blank payload must at least be an empty object {} or array [].

25. Manually Editing JSON without a Linter

Whether you are configuring a package.json or fixing an API payload on the fly, typing raw JSON without formatting tools is an open invitation for bugs.

How to Handle and Prevent JSON Errors Easily

You don't have to keep all 25 rules memorized to write flawless payloads. The best defense is utilizing dedicated tooling to catch mistakes before they hit production:

Use a Dedicated Validator: Before pasting or sending JSON config files, drop them into the JSON Formatter & Validator. It will instantly beautify your structure, validate the syntax against official specs, and cleanly point out the exact line causing a headache.
Automate in your IDE: Keep extensions like Prettier active in your editor to auto-format files on save and strip out illegal trailing commas.
Defensive Coding: Always safely handle dynamic parsing with a standard block:

try {
    const cleanData = JSON.parse(incomingPayload);
} catch (err) {
    console.warn("Invalid JSON structure received:", err.message);
    // fallback smoothly here
}

We Stopped Using Next.js for AI SaaS and Switched to Astro

JSDev Space — Mon, 15 Jun 2026 22:41:29 +0000

Building an AI Directory with Astro, Drizzle and PostgreSQL

Every AI startup seems to begin with the same stack:

Next.js
React
Prisma
PostgreSQL
Tailwind

For a long time, we did exactly the same.

Then we started building AI products that weren't just applications. They were content-heavy platforms:

AI directories
AI tool databases
Blog-driven SaaS products
Alternative pages
Comparison pages
Programmatic SEO content

And that's where things became interesting.

The majority of our pages didn't actually need React.

They needed speed.

They needed SEO.

They needed to rank.

They needed to load instantly.

So we started experimenting with Astro.

A year later, Astro became our default choice for almost every AI product we launch.

In this article I'll explain the exact stack we use today, why we replaced parts of our previous architecture, and what we'd choose if we had to build a new AI SaaS from scratch in 2026.

Why AI Products Have Different Requirements

Many AI startups make the mistake of treating everything as an application.

But when you look at successful AI businesses, a huge percentage of their traffic comes from content:

Tool pages
Category pages
Blog articles
Comparison pages
Alternative pages
Documentation

These pages don't need hydration.

They don't need client-side JavaScript.

They don't need React running everywhere.

They need to be fast.

Astro's "ship zero JavaScript by default" philosophy turned out to be exactly what we needed.

...

The Stack We Use Today

Frontend

Astro
TypeScript
Tailwind CSS
MDX

Backend

Astro API Routes
PostgreSQL
Drizzle ORM

Infrastructure

Vercel
Neon
Cloudflare

Authentication

Better Auth

Resend

Analytics

Umami

Nothing revolutionary.

Nothing trendy.

Just tools that let us move quickly.

...

Why We Chose Drizzle Over Prisma

One thing we learned after multiple projects is that abstraction has a cost.

Prisma is excellent.

But for teams comfortable with SQL, Drizzle often feels closer to the database and easier to reason about.

A schema definition looks like SQL instead of an entirely separate layer of abstractions.

That simplicity becomes valuable as projects grow.

...

PostgreSQL Is Still Winning

Every year there's a new database trend.

Every year PostgreSQL remains the safest bet.

For an AI directory or AI SaaS, PostgreSQL can handle:

Search
Categories
Tags
User collections
Reviews
Favorites
Analytics

Without introducing additional infrastructure.

In many cases, adding Elasticsearch or another search engine is simply unnecessary.

...

The Biggest Growth Lever Isn't AI

This might be controversial.

But the biggest growth lever for most AI startups isn't AI.

It's SEO.

Thousands of founders spend weeks improving prompts while completely ignoring their content architecture.

One well-ranked page can generate traffic for years.

That's why our architecture prioritizes:

Static generation
Fast page loads
Clean HTML
Structured content
Programmatic SEO

Astro excels at all of these.

...

What We'd Build Today

If we were starting from zero tomorrow:

Astro
TypeScript
PostgreSQL
Drizzle ORM
Better Auth
Tailwind CSS
Resend
Vercel

That's it.

No microservices.

No Kubernetes.

No distributed systems.

No unnecessary complexity.

The goal isn't to build impressive infrastructure.

The goal is to build something users actually want.

Final Thoughts

The most valuable lesson we've learned is that simplicity compounds.

Every dependency adds maintenance.

Every service adds operational overhead.

Every abstraction eventually leaks.

The stack above isn't exciting.

That's exactly why it works.

It lets small teams ship quickly, iterate rapidly, and focus on solving real problems instead of maintaining infrastructure.

By the way, this exact architecture powers our AI discovery platform:

👉 NextWeekAI Directory

If you're building an AI SaaS, AI wrapper, AI directory, or content-driven startup, Astro is worth a serious look.

Friday Links #38 — Frontend Signals, AI Coding & JavaScript Releases

JSDev Space — Thu, 21 May 2026 09:41:57 +0000

Welcome to Friday Links #38 — another curated collection of updates from the fast-moving JavaScript and frontend ecosystem.

This week brings a mix of framework news, AI-assisted developer tooling, fresh open-source releases, experimental projects, performance discussions, and modern engineering ideas shaping how we build for the web. From React and TypeScript to Node.js, tooling, and AI workflows, here are the stories, launches, and links worth checking out.

📢 Special partner message

🗓️ React Norway — Oslo, June 5 🇳🇴

Join 350+ React and full-stack developers for a unique single-track conference with a strong “Rock & React” vibe, great talks, community energy, and modern web engineering discussions.

🎟️ Use code `TWIR` for 10% off your ticket.

🧠 Language & Runtime Updates

TypeScript 6.0 Is Official — And It’s Preparing the Road to TypeScript 7

One of the biggest ecosystem updates remains TypeScript 6.0.

This release is not just another incremental version bump. It acts as a transition layer between the current JavaScript-based compiler and the upcoming native TypeScript 7 compiler. According to the TypeScript team, 6.0 is effectively the bridge release that prepares projects for the future architecture.

Some notable changes include:

alignment with future TS 7 behavior
deprecations aimed at modern ESM workflows
simplified DOM library behavior
stricter compiler rules
migration tooling for upcoming changes

The broader direction is clear: TypeScript is increasingly optimizing for modern evergreen runtimes, ESM tooling, and native performance improvements.

Bun’s Rust Rewrite Has Been Merged

The Bun story continues.

One of the more talked-about updates recently: Bun’s experimental Rust rewrite effort has now been merged, generating substantial discussion across developer communities. Questions quickly emerged around maintainability, AI-assisted code generation quality, and long-term runtime strategy.

At the same time, Bun keeps strengthening its position inside the TypeScript ecosystem.

Developers increasingly evaluate Bun not just as a runtime, but as a broader replacement for parts of the traditional Node toolchain:

package manager
bundler
test runner
TypeScript execution environment
server runtime

The “Should new TypeScript projects start with Bun?” conversation is becoming more common.

Deno 2.8 ships this week with a focus on improving the developer experience around TypeScript, ESM, and modern JavaScript features.

📜 Articles & Tutorials

Install web apps with the new HTML install element

Prompts are advisory. Structure is binding.

Building an Astro Blog While Exploring Fate

An Excruciatingly Detailed Guide To SSH

How To Make Your Text Look Futuristic

MASTER THE NODE.JS INTERNALS

Let’s Use the Nonexistent ::nth-letter Selector Now

Hardening TanStack After the npm Compromise

The Modern React Stack Explained for 2026

Using safe-area-inset to build mobile-safe layouts

What's new in Node.js 26

The Truth About GPT Shortcuts and “Secret” AI Commands

Fixing JavaScript observability, one library at a time

Your Recursion Is Lying to You

HTTP/3 Over QUIC in Node.js

Async React: Building Non-Blocking UIs with useTransition and useActionState

Better fluid sizing with round()

Moving away from Tailwind, and learning to structure my CSS

600+ million people write right-to-left: 2 fixes your app needs

Gap decorations: Now available in Chromium

5 Docker Compose Settings Missing From Most Production Setups

A few ways of specifying per-theme colours in only CSS

When to use (and not use) CSS shorthand properties

How to Make The Fluffiest Grass With Three.js

⚒️ Tools

Open-source Discord alternative GoofCord has been released, promising a faster, cleaner, and far more customizable experience than the official client.

According to the project, GoofCord:

runs noticeably faster than the standard Discord client, with fewer slowdowns and UI hiccups;
blocks built-in telemetry and user data collection;
supports password-encrypted conversations;
allows screen sharing at any resolution and frame rate;
lets users choose which application audio gets streamed;
automatically updates your status based on games, music, or videos;
supports Vencord, Equicord, and Shelter customization plugins out of the box;
includes global hotkeys that keep working even when the app is minimized;
supports audio streaming on Linux, while also running on Windows and macOS.

Awesome CUDA Books is a new curated list of resources for learning CUDA programming, covering everything from beginner-friendly introductions to advanced optimization techniques.

An open-source project called tokenspeed (including an online version) has been released to make LLM token throughput easier to understand visually.

Most local LLM benchmarks report raw generation speed:

47 tokens/sec on an M3
180 tokens/sec on an RTX 4090
500 tokens/sec on Groq

But unless you've actually watched tokens stream at those speeds, those numbers can feel pretty abstract.

tokenspeed solves that problem.

It’s a terminal utility that simulates token streaming at any speed you choose, allowing you to see what different throughput numbers actually look like in practice.

Instead of reading benchmark figures in isolation, you can visually compare generation speeds and better understand the real-world difference between various hardware setups, runtimes, and inference environments.

Pica 10.0 Brings Modern Browser Image Resizing to TypeScript and ESM

Counterfact Turns OpenAPI Specs Into Live API Simulators

Introducing deepsec: The security harness for finding vulnerabilities in your codebase

Feed validation service

SVG Studio Brings Layer-Based SVG Animation to the Browser

phantom-ui Creates Structure-Aware Skeleton Loaders from the DOM

cssdb Tracks the Implementation Status of Modern CSS Features

React Review Audits Pull Requests for React Anti-Patterns

Cascade - An Icon Set Built Around CSS Concepts

flexboxle Turns CSS Flexbox Practice Into a Daily Puzzle

Typescale AI Helps Generate Typography Systems and Design Tokens

ASCII Sketch Brings Diagram Drawing to the World of ASCII Art

agentmemory is a persistent memory layer designed for AI coding agents, helping them retain context across sessions instead of starting from scratch every time.

SecretScanner is an open-source tool for discovering passwords, API keys, tokens, and other sensitive data hidden inside applications.

It scans Docker images and file systems to uncover secrets that may be buried in configs, binaries, or application files.

What Models? is an open-source online tool that helps you find local AI models that can realistically run on your hardware without exhausting system resources.

Enter your PC specs — GPU, VRAM, and RAM — and the service generates a compatibility list showing suitable models, including the AI project name, quantization format, inference speed, and context window.

📚 Libs

A repository featuring 10,000+ ready-to-use APIs has been released, covering everything from automation and web scraping to AI integrations and market intelligence.

The collection includes APIs for:

automation — handling repetitive workflows, recurring tasks, and everyday operational processes;
data extraction — scraping websites, parsing pages, and pulling structured information from across the web;
analytics — gathering market, competitor, and business intelligence data;
e-commerce — tracking products, monitoring prices, and analyzing market trends;
social media — collecting posts, measuring audience engagement, and identifying emerging trends;
AI integrations — connecting to language models, processing content, and generating structured outputs;
job market analysis — tracking vacancies, salary trends, and new career opportunities;
real estate — searching, monitoring, and analyzing property listings for personal use or investment research.

easy-vibe, an open educational project for learning vibe coding, has been released.

The course includes four levels, from beginner basics to building AI product prototypes, deployment, databases, and cross-platform development.
It covers nine domains and 80+ interactive topics with animations and visuals, ranging from computer fundamentals to advanced AI workflows.
The knowledge base evolves continuously alongside new AI models, prompting techniques, and development practices.

Alien Signals describes itself as “the lightest signal library”, combining ideas from Vue, Preact, and Svelte into an extremely small reactive system.

MDXEditor 4.0 - A Rich Markdown Editor Component

Claude Cookbooks is a collection of notebooks and recipe-style examples demonstrating useful, creative, and sometimes unexpected ways to work with Claude.

GitClassic Offers a Lightweight Alternative to Browsing GitHub

⌚ Releases

Node.js 22.22.3 (LTS)

Jest 30.4.0 Improves ESM, Temporal, and React 19 Support

Bun 1.3.14 Expands Image APIs, HTTP Support, and Node Compatibility

Syncpack 15.0 has been released, bringing new features to the dependency management tool widely used in large JavaScript monorepos, including projects at Electron, Cloudflare, and Vercel.

pnpm 11.1 Introduces New Commands for Debugging, Security, and GitHub Packages

Mozilla Thunderbird 151.0 Released

Angular 22 Release Candidate Lands Ahead of June Launch

ESLint Config Inspector 3.0

TypeORM 1.0 Released

ESLint v10.4.0 released

Relay 21.0, Rolldown 1.0.1, Critical 8.0, SQL Formatter 15.8,

Shiki 4.1, Redux Toolkit 2.12.0, React Redux 9.3, Next.js 16.2.6 & 15.5.18 Security Releases,

PixiJS 8.17, Ant Design 6.4.0, react-qr-scanner 2.6, styled-components v7, Storybook 10.4

📺 Videos

Why React Developers Are Leaving Next.js for TanStack

Learn Tanstack Start in 30 Minutes

Why React Native is Still King in 2026

It was more fun before AI

Is Software Engineering Dead?

The Future of SEO: Building AI-Ready Sites with Astro & AEO

🗞️ News & Updates

The End of an Era: Iconic Ask.com Domain Hits the Auction Block

The digital landscape is losing another piece of its foundation. Ask.com, one of the web's original search heavyweights, has officially put its domain name up for sale.

According to reports from Domain Incite, the high-stakes sale is being spearheaded by domain brokers Andrew Miller (ATM Holdings) and Larry Fisher (LPL Financial). Miller didn't mince words about the magnitude of the listing, calling it "one of the most valuable domain assets to ever hit the market."

Creator of C++ Criticizes Vibe Coding

jarne Stroustrup, the creator of C++, delivered a sharp critique of vibe coding in a recent interview. His argument: AI-generated code may look convincing in demos, but in real systems it often creates bugs, bloated codebases, security issues, and maintenance problems. The burden usually lands on senior engineers, who end up reviewing, debugging, and rewriting prompt-generated code instead of moving faster.

Large GitHub Security Incident: Malicious VS Code Extension Linked to 3,800 Repository Breach

A major security incident has hit GitHub, and the company has already confirmed that an unauthorized compromise took place.

According to preliminary findings, attackers gained access to at least 3,800 repositories. GitHub is still investigating the full scope of the breach and determining what systems, credentials, or internal data may have been affected.

The incident reportedly originated from a compromised VS Code extension. The malicious extension infected a GitHub employee’s machine, giving attackers a foothold that eventually led to access inside GitHub’s internal environment.

The investigation is ongoing, and the company continues to assess the scale of the impact. The case is another reminder that development tooling and third-party extensions can become critical attack vectors, especially inside large engineering organizations.

An OpenAI model has disproved a central conjecture in discrete geometry

That’s it for Friday Links #38.

Every week the developer ecosystem delivers new frameworks, smarter tooling, unexpected experiments, and enough releases to overflow your bookmarks folder. Our goal stays simple: surface the useful updates, interesting ideas, and projects that deserve a spot on your radar.

Thanks for reading — and if something here sparked an idea, taught you something new, or saved you a few hours, share it with another developer.

Friday Links #36: New JavaScript Tools, Frameworks, and Research

JSDev Space — Fri, 13 Mar 2026 11:47:27 +0000

The JavaScript ecosystem never slows down. Every week brings new tools, framework updates, performance benchmarks, and occasionally discoveries that reshape how we think about existing platforms.

Subscribe to JavaScript Friday Links

This week’s highlights cover a broad spectrum of topics. The release of Solid 2.0 Beta introduces a redesigned async model that simplifies reactive workflows. New benchmarking data compares modern JavaScript minifiers and shows how tools like SWC, Oxc, and Minify are redefining build performance. At the same time, researchers used AI-assisted analysis to uncover multiple previously undiscovered vulnerabilities in Firefox — demonstrating how machine learning is increasingly being used to audit complex codebases.

In this week’s Friday Links, we’ve collected the most interesting stories, tools, and discussions worth your attention.

🧠 Ecosystem Highlights

TypeScript 6 Prepares the Path to TS7

The TypeScript team released an early preview of TypeScript 6.

This release is mainly about internal changes preparing for the future Go-based compiler planned for TypeScript 7.

Key goals:

faster compilation
reduced memory usage
better incremental builds
improved large project performance

Large monorepos could see dramatic speed improvements once the Go compiler lands.

Deno 2.7 Improves Node Compatibility

The latest Deno runtime release continues improving Node compatibility.

Highlights:

improved npm integration
Node API compatibility
Temporal API stabilization

Example:

const now = Temporal.Now.instant()
console.log(now.toString())

📜 Articles & Tutorials

Under the hood: Security architecture of GitHub Agentic Workflows

Beating JavaScript Performance Limits With Rust and N-API: Building a Faster Image Diff Tool

The Different Ways to Select <html> in CSS

The Big Gotcha of Anchor Positioning

Valibot vs Zod: A Lightweight Validation Alternative

How to steal npm publish tokens by opening GitHub issues

How to Decode a VIN in JavaScript

Why Blindly Using JSON.parse() Can Be Dangerous

Making a Flappy Bird clone using pure HTML and CSS, no JavaScript

How to build a pnpm monorepo, the right way

React is changing the game for streaming apps with the Activity component

Using CSS animations as state machines to remember focus and hover states with CSS only

You Don’t Know HTML Tables

5 React Hooks Techniques to Improve Component Performance

Tailwind CSS v4 vs MUI, Ant Design & Styled Components

Designing an Efficient LRU Cache Step by Step

Howto Deploy OpenClaw and Build Your Personal AI Second Brain

⚒️ Tools

Repomix — Turn Any Repo Into a Single AI-Readable File

Repomix packs an entire repository into a single AI-friendly document.

Cursor Cloud Telegram Connector

npmx is an experimental tool designed to improve npm package exploration.

Wely — Lightweight Web Component Framework

Ink allows developers to build CLI tools using React components.

Cron Expression Generator

📚 Libs

Node File Trace - determines exactly which files a Node application needs to run.

JavaScript Minification Benchmarks: SWC Still Leads

RevoGrid - High-Performance Data Grid Component

VMPrint - A pure-JS, tiny typesetting engine with bit-perfect PDF output on everything—from Cloudflare Workers to the browser.

markdown-to-jsx - A very fast and versatile markdown toolchain. Output to AST, React, React Native, SolidJS, Vue, HTML, and more!

clipboardy - Access the system clipboard (copy/paste)

⌚ Releases

Solid v2.0.0 Beta: The <Suspense> Era Comes to an End

After a long experimental phase, Solid 2.0 has released its first beta, introducing native asynchronous reactivity as a core feature of the framework.

In this new model, reactive computations can directly return Promises or async iterables, and Solid’s reactive graph will automatically suspend and resume around those async operations. This removes much of the complexity developers previously had to manage when dealing with asynchronous state.

One notable change is that <Suspense> has been retired. For initial renders, it is now replaced by a simpler component called <Loading>.

Astro 6 is here!

Node.js 25.8.0 (Current)

ESLint v10.0.3 released

Ember 6.11 Released

Ionic Framework 8.8

React Native 0.85 RC.0, pnpm 10.32, Jest 30.3, Recharts 3.8,
OpenPlayer.js 3.0.2, Prisma 7.5, SQLite JS 1.3, React Helmet Async 3.0, Preact 10.29.0

📺 Videos

Build Your Own Video Sharing App – Loom Clone with Next.js and Mux JavaScript Tutorial

You Can Just Ship Agents: Architecting for the Agentic Era | Dom Sipowicz, Vercel

The Future of TypeScript

Build Your Own Video Sharing App – Loom Clone with Next.js and Mux JavaScript Tutorial

Cloudflare just slop forked Next.js…

7 new open source AI tools you need right now…

NEW Tanstack Hotkeys Library is Amazing

🎤 Talks & Podcasts

Why are we building CodePen v2? — CodePen Radio 419

Stop putting secrets in .env

🗞️ News & Updates

The web industry is gradually shortening the maximum lifespan of TLS certificates.

Starting March 15, 2026, the limit will drop from 398 days to 200 days. The timeline continues with further reductions: 100 days in 2027, and by 2029 the maximum validity period will shrink to just 47 days.

Because of these changes, Heroku recommends enabling automatic certificate renewal to avoid unexpected expirations and potential service disruptions.

Eleventy is now Build Awesome

🔐 Security

Supply-Chain Attacks Target Developers

Researchers recently discovered malicious GitHub repositories disguised as job assignments.

When opened in VS Code they may execute scripts automatically.

Developers should always review:

.vscode/tasks.json
.vscode/settings.json
package.json

🔗 thehackernews

vm2 Sandbox Escape Vulnerability

A critical vulnerability was discovered in vm2, a sandbox library used for executing untrusted JavaScript.

This vulnerability allows escaping the sandbox and executing arbitrary code.

🔗 github.com/patriksimek/vm2

Researchers at Brave discovered that web agents often leak user information — even when explicitly instructed not to.

In a study involving 1,080 runs on Amazon and eBay, agents powered by GPT-4o, O3, and O4-mini repeatedly exposed data to third-party services that had nothing to do with the task they were performing.

Examples included:

inserting conversation history into search fields
revealing personal details through interaction patterns
unintentionally sending contextual data to external services

The findings highlight a growing concern: AI web agents may unintentionally expose sensitive user information through their behavior, even when privacy safeguards are in place.

The Anthropic team recently analyzed the Firefox codebase using Claude and uncovered 14 critical vulnerabilities that had gone unnoticed for years.

In total, the investigation led to the discovery of 22 security issues, all of which were assigned CVE identifiers and addressed in Firefox 148.

Some of these vulnerabilities had reportedly been present in the codebase for over a decade, highlighting how AI-assisted analysis can help uncover deeply hidden security flaws in large, mature software projects.

How we got hit by Shai-Hulud: A complete post-mortem

That’s all for this week’s JavaScript roundup.

The ecosystem continues to evolve rapidly, and keeping track of new tools, releases, and discoveries can be challenging. Weekly collections like Friday Links aim to surface the most meaningful updates so developers can stay informed without being overwhelmed.

If you came across an interesting library, experiment, or article this week, consider sharing it — the next edition might include it.

Mastering JavaScript map(): Hidden Pitfalls and Smarter Patterns

JSDev Space — Mon, 17 Nov 2025 00:00:50 +0000

JavaScript’s Array.prototype.map() is simple on the surface yet surprisingly deep once you inspect how callbacks, types, coercion, and encoding work under the hood. One of the most infamous examples — [1,2,3].map(parseInt) — looks harmless but produces confusing output that often appears in interviews.

This guide breaks everything down clearly: how map() really works, why parseInt misbehaves, how NaN is detected, how wrapper objects make "text".length possible, and why emoji “length” is unintuitive. Each section includes modern examples and best-practice patterns.

1. How `map()` Actually Works

1.1 Syntax and Basic Behavior

map() creates a brand-new array using your callback’s return values. The original array is never modified.

const transformed = sourceList.map(
  (itemValue, itemPosition, originalList) => {
    return /* computed value */;
  },
  optionalThisArgument
);

1.2 Practical Examples

Example 1: Transforming numbers

const baseNumbers = [2, 5, 10];
const doubledValues = baseNumbers.map(num => num * 2);
console.log(doubledValues); // [4, 10, 20]

Example 2: Mapping object properties

const studentRecords = [
  { nickname: 'Lara' },
  { nickname: 'Tomas' }
];
const extractedNames = studentRecords.map(entry => entry.nickname);

Example 3: Using map() on array-like structures

const pseudoArray = { 0: 'x', 1: 'y', length: 2 };
const uppercased = Array.prototype.map.call(pseudoArray, val => val.toUpperCase());

1.3 Sparse Arrays and Missing Elements

const weird = [7, , 21];
const output = weird.map(unit => unit * 3);

2. Understanding `parseInt()` — and Why It Breaks with `map()`

2.1 Parsing Rules

parseInt('0xA', 16);   // 10
parseInt('10', 8);     // 8
parseInt('7.8', 10);   // 7
parseInt('xy', 10);    // NaN

3. Why `[1, 2, 3].map(parseInt)` Gives `[1, NaN, NaN]`

3.1 The Output

console.log([1, 2, 3].map(parseInt)); // [1, NaN, NaN]

3.2 The Real Reason

map() passes (value, index, array) while parseInt expects (string, radix).

3.3 Correct Solutions

['1', '2', '3'].map(str => parseInt(str, 10));
['1', '2', '3'].map(Number);

4. Special Numeric Values: `NaN` and `Infinity`

4.1 Properties of `NaN`

Number.isNaN(value);  
isNaN(value);

5. Wrapper Objects

"hello".length;

6. UTF-16, Unicode, and Emoji Length Issues

Array.from("👩‍💻").length;

7. Interviewer Expectations

Higher-order function comprehension
Callback mechanics
Debugging ability
Understanding coercion and Unicode

Conclusion

map() touches many deeper JS concepts, from number parsing to Unicode. Mastering these details helps you write safer, clearer, more predictable code — and ace interview challenges.

TypeScript Generics: The Magic Behind Flexible, Type-Safe Code

JSDev Space — Fri, 07 Nov 2025 07:26:45 +0000

For many developers, the first encounter with TypeScript generics can feel perplexing. Symbols like <T> appear abstract and mathematical — yet they unlock one of the language’s most powerful features. Generics make it possible to write code that is both type-safe and highly reusable, allowing developers to define patterns that adapt to different data structures without losing type precision.

This article examines the concept of generics in depth: what they are, why they matter, and how they elevate the architecture of TypeScript projects — from simple utility functions to enterprise-level abstractions.

🧩 Understanding Generics — From Function Parameters to Type Parameters

In plain JavaScript, functions often lose type context:

function mirror(value) {
  return value;
}

const n = mirror(42);       // returns 42, but type info is lost
const s = mirror("hello");  // returns "hello", but type info is lost

TypeScript addresses this with type parameters:

function mirror<T>(value: T): T {
  return value;
}

const n = mirror(42);       // number
const s = mirror("hello");  // string
const b = mirror(true);     // boolean

Here, <T> acts as a placeholder for a concrete type — a type variable that TypeScript infers automatically. This allows the function to maintain flexibility while preserving safety.

⚙️ The Fundamentals of Generics

1. Generic Classes

A simple example is a type-safe stack implementation:

class SafeStack<T> {
  private store: T[] = [];

  push(item: T): void {
    this.store.push(item);
  }

  pop(): T | undefined {
    return this.store.pop();
  }

  peek(): T | undefined {
    return this.store[this.store.length - 1];
  }

  count(): number {
    return this.store.length;
  }
}

const numbers = new SafeStack<number>();
numbers.push(10);
numbers.push(20);

const words = new SafeStack<string>();
words.push("hello");
words.push("world");

2. Multiple Type Parameters

Functions can also define relationships between multiple types:

function pairOf<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}

const one = pairOf("age", 25);      
const two = pairOf(1, true);        
const three = pairOf("config", { debug: true });

3. Constrained Generics

Developers can restrict what a generic type can accept:

interface WithLength {
  length: number;
}

function measure<T extends WithLength>(item: T): number {
  return item.length;
}

measure("hello");        
measure([1, 2, 3]);      
measure({ length: 5 });  
// measure(42);          // Error: number has no length

💼 Practical Use Cases

1. Generic API Responses

Generics are extremely useful in API and data-handling layers:

interface ApiResponse<T> {
  success: boolean;
  data: T;
  message?: string;
  timestamp: number;
}

async function apiFetch<T>(url: string, opts?: RequestInit): Promise<ApiResponse<T>> {
  const res = await fetch(`/api/${url}`, opts);
  const json = await res.json();
  return json as ApiResponse<T>;
}

interface User {
  id: number;
  name: string;
  email: string;
}

interface Product {
  id: number;
  title: string;
  price: number;
  category: string;
}

const userRes = await apiFetch<User>("users/1");
console.log(userRes.data.name);

const prodRes = await apiFetch<Product>("products/12");
console.log(prodRes.data.price);

2. Utility Function Libraries

Generic utilities enhance flexibility and type inference:

function filterList<T>(arr: T[], test: (item: T, i: number) => boolean): T[] {
  return arr.filter(test);
}

function mapList<T, U>(arr: T[], mapper: (item: T) => U): U[] {
  return arr.map(mapper);
}

function pick<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

function combine<T extends object, U extends object>(a: T, b: U): T & U {
  return { ...a, ...b };
}

These functions scale seamlessly across data structures, avoiding repetitive type definitions.

3. Type-Safe React Hooks

In React applications, generics help ensure predictable form and state handling:

import { useState, useCallback } from "react";

function useForm<T extends Record<string, any>>(initial: T) {
  const [form, setForm] = useState<T>(initial);

  const update = useCallback(<K extends keyof T>(key: K, val: T[K]) => {
    setForm((prev) => ({ ...prev, [key]: val }));
  }, []);

  const reset = useCallback(() => setForm(initial), [initial]);

  return { form, update, reset, setForm };
}

This design makes custom hooks fully type-aware — every field and update operation is validated at compile time.

🧠 Advanced Generic Techniques

Conditional Types

type IsString<T> = T extends string ? "yes" : "no";
type A = IsString<string>; 
type B = IsString<number>; 

type UnwrapArray<T> = T extends (infer U)[] ? U : never;
type Numbers = UnwrapArray<number[]>; 
type Words = UnwrapArray<string[]>;

Mapped Types

type Optional<T> = { [K in keyof T]?: T[K] };
type Immutable<T> = { readonly [K in keyof T]: T[K] };

interface User {
  id: number;
  name: string;
  email: string;
}

type PartialUser = Optional<User>;
type ReadonlyUser = Immutable<User>;

⚠️ Common Pitfalls and Best Practices

Avoid overengineering.

Excessively complex generic signatures reduce readability.
Use default type parameters.

   interface PageOptions<T = any> {
     page: number;
     size: number;
     filter?: (x: T) => boolean;
   }

Leverage type inference.

   function buildArray<T>(...items: T[]): T[] {
     return items;
   }

   const nums = buildArray(1, 2, 3);    
   const texts = buildArray("a", "b");  
   const mix = buildArray(1, "two");

🏁 Conclusion

Generics are one of TypeScript’s defining strengths. They allow developers to build systems that are expressive, safe, and reusable — without compromising flexibility. By thinking in terms of generic patterns rather than fixed types, teams can write libraries, hooks, and utilities that adapt naturally to any use case.

Understanding generics is more than mastering syntax; it’s about adopting a mindset where code scales with types. Once internalized, generics turn abstract type definitions into practical tools that make TypeScript both elegant and powerful.

Read more about JavaScript Development and subscribe to our weekly newsletter.

Friday Links #30 — JavaScript Updates, Tools, and Inspiration

JSDev Space — Fri, 17 Oct 2025 13:12:03 +0000

Welcome to Friday Links #30, your curated roundup of the week’s most notable happenings in the JavaScript world. From emerging frameworks and performance breakthroughs to creative experiments and open-source gems, this week’s collection is packed with fresh insights and practical discoveries for web developers.

📜 Articles & Tutorials

Open Social

The future of large files in Git is Git

Best Practices for Building Agentic AI Systems: What Actually Works in Production

Howto Use JavaScript reduce() Like a Pro

How I Built a Full-Stack React Framework 4x Faster Than Next.js With 4x More Throughput

Here's How To Build Fullstack Agent Apps (Gemini, CopilotKit & LangGraph)

Run Express.js on Cloudflare Workers

Next.js App Router: Dynamic, Grouped, Parallel & Intercepted

GitHub Copilot CLI: How to get started

CSS :is() :where() the Magic Happens

The thing about contrast-color

Modern CSS Round-Out Tabs

Mastering Ethers.js — From MetaMask to Smart Contracts

Building Web3 Frontends with React and wagmi

15 Recent Node.js Features that Replace Popular npm Packages

Building an Async Combobox with useSuspenseQuery() and useDeferredValue()

HTML’s Best Kept Secret: The <output> Tag

⚒️ Tools

Mirrow: A DSL for Dynamic SVG Creation and Animation — Instead of treating SVGs as static graphics, Mirrow reimagines them as interactive, code-defined visuals. It introduces a domain-specific language (DSL) that lets you generate and animate SVGs programmatically, making them flexible, reusable, and expressive. Visit the playground to experiment with Mirrow syntax and bring your own SVG animations to life in real time.

ogImage.click

Make Graph

ai-digest: A CLI for Summarizing Your Entire Codebase — This command-line tool automatically compiles your entire project into a single, structured Markdown file. Perfect for feeding into Claude projects, custom ChatGPTs, or AI code assistants, it gives large models full context of your codebase for analysis, documentation, or refactoring.

Crosspost - A JavaScript utility for posting across multiple social networks at once

stackoverflow.ai

n8n-MCP - A MCP for Claude Desktop / Claude Code / Windsurf / Cursor to build n8n workflows for you

📚 Libs

memvid - Video-based AI memory library. Store millions of text chunks in MP4 files with lightning-fast semantic search. No database needed.

PageLM - PageLM is a community driven version of NotebookLM & a education platform that transforms study materials into interactive resources like quizzes, flashcards, notes, and podcasts.

Twake Drive - The open-source alternative to Google Drive.

ReactToPrint - Print React components in the browser

jsonriver - A simple, fast streaming JSON parser built on standards.

xmlbuilder2 - An XML builder for node.js

Coding Agent Template - Multi-agent AI coding platform powered by Vercel Sandbox and AI Gateway

IsAgent SDK - A lightweight SDK for building agent-specific experiences in your app.

react-map-gl - React friendly API wrapper around MapboxGL JS

reactylon - A powerful multiplatform framework built on top of Babylon.js and React, designed to create interactive and immersive XR experiences.

PlayCanvas Model Viewer - 3D Model Viewer supporting glTF and 3D Gaussian Splats

⌚ Releases

React Compiler v1.0 — The React team has officially declared the compiler stable and ready for production use. It automatically applies memoization optimizations based on static code analysis, reducing unnecessary re-renders and improving performance without manual tweaks. You can still rely on useMemo and useCallback for fine-grained control when needed, but many optimizations are now handled seamlessly by the compiler itself.

React Native 0.82 - A New Era

Bun 1.3 Released

Node.js v24.10.0 (Current)

Next.js 16 (beta) released

New Release: CrateDB 6.0

llama.ui v2.38.2 released

playwright v1.56.0 released

Happy DOM v20.0 released

openai-node v6.4.0 released

React Admin v5.12.0, TanStack Router 1.133, React Hook Form v7.65.0, Pixijs v8.14.0

📺 Videos

RabbitMQ Crash Course #1 – Setup, Queues & Why Message Brokers Matter Node js + Docker

React Coding Interview: Kent C. Dodds, Jack Herrington & Roadside Coder Solve React HARD Question

Meta's most dystopian product yet...

99% of Developers Don't Get PostgreSQL

AI Coding Sucks

Big Tech Is Faking Revenue

Extremely Underrated Programming Skills

🎤 Talks & Podcasts

CSS Podcast 93: State queries in 2025

🗞️ News & Updates

🕹️ The JS13KGames 2025 competition has wrapped up, and the winners have been announced! Explore this year’s top entries — all built in under 13KB of JavaScript — to play inventive mini-games or dive into their clever, size-optimized source code.

npm Adopts OIDC for Trusted Publishing in CI/CD Workflows

Triplex Goes Open Source and Moves to Poimandres

🤖 Mastra, a rapidly growing TypeScript-based AI framework founded by former members of the Gatsby team, has secured a $13 million seed round to accelerate development and expand its ecosystem of AI tools for developers.

That’s a wrap for this edition of Friday Links! Keep exploring, building, and sharing your favorite finds with the community. Check back next Friday for another round of JavaScript updates, tools, and ideas that push the web forward.

Understanding CSS Priority — The Cascade Explained

JSDev Space — Thu, 16 Oct 2025 15:11:30 +0000

Mastering the Priority of CSS Styles

CSS Cascading and Specificity are the foundation of how browsers decide which styles to apply. In this article, we’ll explore how multiple CSS rules interact and which one takes precedence — from classic specificity formulas to modern @layer rules.

🤔 Let’s Start with a Simple Example

When multiple CSS classes are applied to one element:

<div class="blue red green">What color is this text?</div>

.blue { color: blue; }
.red { color: red; }
.green { color: green; }

The final color is green.

This happens because CSS follows a cascading order, where later declarations take precedence when all else is equal.

🕰️ The Birth of Cascading

When CSS was first introduced in 1996, cascading was its key concept.

The design goals were:

🎯 Predictability: Developers can reason about the final result.
⚙️ Flexibility: Allow style overrides and inheritance.
⚖️ Balance: Respect both author and user styles.

This concept, created by Håkon Wium Lie, was meant to handle conflicts between multiple sources — author styles, user styles, and browser defaults.

⚖️ The System of Cascading Priorities

🎯 Specificity Formula

Specificity is represented as a four-part tuple:

(Inline, ID selectors, Class/Attribute/Pseudo-class, Element selectors)

Style Type	Weight	Example
Inline style	1000	style="color: red"
ID selector	100	#header
Class/attribute/pseudo-class	10	.active, [type=text]
Element selector	1	div, p
Universal selector	0	*

🔍 Real Examples

/* Specificity: (0, 0, 1, 1) = 11 */
div.blue { color: blue; }

/* Specificity: (0, 1, 0, 0) = 100 */
#content { color: red; }

/* Specificity: (0, 0, 2, 1) = 21 */
div.blue.active { color: green; }

/* Inline style: (1, 0, 0, 0) = 1000 */
<div style="color: yellow;">

⚠️ Note: Ten class selectors will never outweigh a single ID selector.

📝 Overriding Rules at Equal Priority

When selectors share the same specificity, source order decides which one wins.

.blue { color: blue; }
.red { color: red; }
.green { color: green; }

HTML order doesn’t matter — only the CSS definition order does:

<div class="green blue red">Green</div>
<div class="red green blue">Green</div>
<div class="blue red green">Green</div>

🎨 Priority in Complex Scenarios

<!DOCTYPE html>
<html>
<head>
<style>
  div.red { color: red; }           /* 11 */
  .blue.text { color: blue; }       /* 20 */
  #content { color: green; }        /* 100 */
  .yellow { color: yellow; }        /* 10 (later defined) */
</style>
</head>
<body>
  <div id="content" class="red blue text yellow">
    What color is this?
  </div>
</body>
</html>

✅ Result: Green — because the ID selector has the highest priority.

If the ID is removed, blue.text (20) wins over red (11).

⚡ The Power of `!important`

.blue { color: blue !important; }
.red { color: red; }
.green { color: green; }

!important overrides all other declarations, even with lower specificity.

💡 Usage Tips

✅ Use for overriding library defaults or utility classes.

❌ Avoid in component-level styles — it leads to “priority wars.”

🛠️ Best Practices in CSS Architecture

A recommended CSS priority structure:

/* 1. Reset styles — lowest priority */
* { margin: 0; padding: 0; }

/* 2. Base elements */
h1, h2, h3 { font-family: Arial, sans-serif; }

/* 3. Layout classes */
.container { max-width: 1200px; }

/* 4. Components */
.button { padding: 8px 16px; }

/* 5. States */
.button.active { background: blue; }

/* 6. Utilities — highest */
.text-center { text-align: center !important; }

🎯 Avoiding Conflicts

Use BEM naming:

   .card__title--highlighted { color: red; }

Instead of deeply nested selectors:

   .card .content .title.highlighted { color: red; }

Modular CSS-in-JS:

   const styles = {
     title: { color: "red" },
     subtitle: { color: "blue" },
   };

Custom properties for flexibility:

   .theme-blue { --primary-color: blue; }
   .button { color: var(--primary-color, gray); }

🆕 Modern CSS: Cascade Layers

CSS now includes the powerful @layer feature:

@layer base, components, utilities;

@layer base {
  h1 { color: black; }
}

@layer components {
  .title { color: blue; }
}

@layer utilities {
  .text-red { color: red; }
}

Cascade order: base < components < utilities

This gives fine-grained control and clarity for large projects.

🔮 Logical Properties and Modern Trends

As CSS evolves with globalization and layout flexibility, logical properties change how cascading behaves:

.text {
  margin-inline-start: 20px;
  margin-left: 10px;
}

In browsers supporting logical properties, margin-inline-start takes precedence over margin-left.

DEV Community: JSDev Space

Building a CSS Structure That Stays Maintainable

How to Organize CSS Like a Professional

Start With a Clear File Structure

Keep Related Rules Together

Follow a Consistent Property Order

Automate Property Sorting

Use Meaningful Class Names

Avoid Deep Selector Nesting

Reduce Duplication

Separate Layout From Appearance

Use CSS Variables

Leave Breathing Room

Organize Components Instead of Pages

Document Unusual Decisions

Review CSS Like Code

Build Consistency Into Your Workflow

Common Mistakes

Conclusion

Cleaning Extra and Repeated Spaces in String Values with RegExp

The Excel Analogy: TRIM()

Why This Matters

The Solution

JavaScript

Python

VBA / VBScript

What Does \s Match?

Where This Should Be Used

Frontend or Backend?

Final Thought

Working With Massive JSON Responses

Working With Massive JSON Responses Without Losing Performance

Understand Why Large JSON Is Expensive

Don't Pretty-Print Gigantic Responses Immediately

Stream Instead of Loading Everything

Prefer Pagination

Filter Data at the Source

Compress Responses

Parse Only Once

Search Before Expanding

Validate Before Processing

Avoid Deep Copies

Don't Keep Everything in Memory

Use a Dedicated Desktop Viewer

Use Incremental Rendering

Generate Types Automatically

Split Large Configuration Files

Consider NDJSON for Streaming

Monitor Parsing Performance

Cache Responsibly

Avoid Giant Responses Whenever Possible

Best Practices Checklist

Final Thoughts

Why Direct S3 Uploads Beat Proxying Images Through Your Backend

25 JSON Mistakes Every Developer Makes

The Syntax Traps

1. Using Single Quotes

2. Trailing Commas

3. Missing Commas Between Elements

4. Unquoted Keys

5. Mismatched Brackets or Braces

6. Misplacing Object/Array Notation

Data Type Misconceptions

7. Serializing undefined

8. Relying on NaN and Infinity

9. Forgetting JSON Doesn’t Have a Date Type

10. Forgetting Hexadecimal, Binary, or Octal Numbers

11. Storing Functions or Methods

12. Treating Comments as Valid

String and Character Escaping

13. Unescaped Double Quotes

14. Unescaped Control Characters (Newlines)

15. The Backslash Pitfall

Code and Environment Errors

16. JSON.parse() on an Object (or JSON.stringify() on a String)

17. Forgetting that JSON Keys are Case-Sensitive

18. Assuming Object Key Order is Guaranteed

19. Vulnerable Evaluation (eval())

Advanced and Architectural Mistakes

20. Truncating Large Integers (The BigInt Issue)

What Does `\s` Match?

7. Serializing `undefined`

8. Relying on `NaN` and `Infinity`

16. `JSON.parse()` on an Object (or `JSON.stringify()` on a String)

19. Vulnerable Evaluation (`eval()`)

20. Truncating Large Integers (The `BigInt` Issue)

21. Silent Failures due to Missing `try...catch`

🎟️ Use code `TWIR` for 10% off your ticket.

1. How `map()` Actually Works

2. Understanding `parseInt()` — and Why It Breaks with `map()`

3. Why `[1, 2, 3].map(parseInt)` Gives `[1, NaN, NaN]`

4. Special Numeric Values: `NaN` and `Infinity`

4.1 Properties of `NaN`