DEV Community: Veranika Kasparevych

9 new CSS features that are quietly firing your JavaScript.

Veranika Kasparevych — Sun, 26 Jul 2026 10:56:52 +0000

So Chrome dropped CSS Wrapped 2025 and I've been spelunking through all 22 features like a raccoon in a recycling bin. And I noticed something: a suspicious number of them exist for one reason only – to take over a big chunk of the UI JavaScript you've been dutifully writing since forever.

No more onclick handlers to open a dialog. No more 40-line carousel scripts. No more IntersectionObserver just to highlight a menu item. The web platform looked at all of that, sighed, and said "I got this."

Here are 9 features that replace a surprising amount of UI JavaScript, each with the old JS way next to the shiny new CSS way.

Small honesty note before we start: a few of these (command, commandfor, closedby, interestfor) are technically HTML attributes, not CSS proper. They shipped alongside the CSS stuff under the "CSS Wrapped" banner, so I'm bundling them in. And these are fresh – some are Chromium-only right now, and a couple are still behind flags or Canary-only. Support is moving fast, so check the Baseline widget or Can I Use for today's status.

All demos feature cats. No further justification will be provided.

1. Open a dialog without JavaScript – `command` & `commandfor`

The classic way to open a <dialog> is to grab it in JS and call showModal(). Which means an onclick, which means JavaScript, which means you've left the cozy world of markup.

The old way (JS):

<button onclick="document.querySelector('#adopt').showModal()">
  Adopt Mr. Whiskers
</button>
<dialog id="adopt">Are you a worthy human?</dialog>

The new way (just HTML):

<button commandfor="adopt" command="show-modal">Adopt Mr. Whiskers</button>
<dialog id="adopt">Are you a worthy human?</dialog>

commandfor points at an ID (just like a label's for), and command takes a built-in action. The buttons mirror the JS methods you already know:

show-modal → dialog.showModal()
close → dialog.close()
show-popover → el.showPopover()
hide-popover → el.hidePopover()
toggle-popover → el.togglePopover()

Nice bonus: this one already went Baseline – it works in Chrome, Firefox, and Safari today, so you can actually ship it.

And if you want your own action, prefix it with -- and catch it with a command event (this part still needs a little JS, since custom logic is, well, logic):

<img id="cat" src="cat.jpg" alt="Cat" />
<button commandfor="cat" command="--throw-confetti">🎉</button>

document.querySelector('#cat').addEventListener('command', (e) => {
  if (e.command === '--throw-confetti') {
    // make it rain catnip
  }
});

Zero JS for the common dialog-opening cases. The onclick graveyard grows.

2. Close that dialog by clicking outside – `closedby`

You know the drill: open a modal, then write a click listener on the backdrop AND a keydown listener for the Esc key, just so users can dismiss it like a civilized popover. Popovers got this for free. Dialogs didn't… until now.

The old way (JS):

dialog.addEventListener('click', (e) => {
  if (e.target === dialog) dialog.close();
});
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') dialog.close();
});

The new way (one attribute):

<button commandfor="adopt" command="show-modal">Adopt</button>
<dialog id="adopt" closedby="any">
  Mr. Whiskers is reviewing your application...
</dialog>

closedby lets you explicitly control how a dialog can be dismissed, with three values:

any – clicking the backdrop or pressing Esc closes it, just like popover="auto"
closerequest – Esc (or a platform close gesture) closes it
none – neither; you close it yourself via close()

One gotcha worth knowing: if you don't set closedby, the behavior depends on how the dialog was opened. A dialog shown with showModal() already closes on Esc (it behaves like closerequest), while a non-modal one behaves like none. So the real win here is closedby="any" – that's the click-outside-to-close behavior you used to hand-roll.

Two listeners gone. One attribute. Chef's kiss. 👌

3. Tooltips on hover, no JavaScript – `interestfor` + `popover=hint`

Hovercards and tooltips are everywhere, and they're always a pile of JS: mouseenter, mouseleave, focus, blur, a timeout so it doesn't flicker, and some sad fallback for touch users. The new interestfor attribute does a lot of that dance natively.

The old way (JS): ...honestly too long to paste. You know it. Timeouts, four event listeners, a setTimeout you forgot to clear.

The new way:

<button interestfor="whiskers-card">Mr. Whiskers</button>

<div id="whiskers-card" popover="hint">
  7 years old · loves naps · mild distrust of vacuums
</div>

interestfor fires when the user "shows interest" – hovering with a mouse OR focusing with a keyboard – and it works on <a> tags too, not just buttons. Pairing it with the new popover="hint" is the magic combo: hint popovers are ephemeral and don't close your other open popovers, so layered UI (a tooltip on top of a menu) just works.

Want to tune the flickery feeling? There's a CSS property for that!

That's a huge chunk of tooltip boilerplate – hover, focus, timers, touch handling – replaced for simple hover/focus hints. (Full tooltip libraries still earn their keep for collision detection, viewport flipping, and interactive tooltips, so don't rip yours out just yet.)

4. A `<select>` you can actually style – `appearance: base-select`

Be honest: how many times have you reached for a JS dropdown library (or built your own with a <div> soup, ARIA roles, and keyboard handlers) just because the native <select> couldn't be styled? Those days are ending.

The new way (CSS):

select,
::picker(select) {
  appearance: base-select;
}

::picker(select) {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 4px;
}

option {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem;
  border-radius: 8px;
}

option:checked { 
  background: #efecfb; 
}

That single switch opts the <select> into a fully stylable mode. Now you can style the button, the dropdown list (::picker(select)), and every <option> – colors, fonts, spacing, even animations. The picker renders in the top layer, so it won't get clipped by overflow: hidden parents, and the browser still handles flipping it when there's no room below.

Bonus: in this new customizable <select> model (once you've opted in with base-select), options can contain rich HTML – like a little cat avatar next to each name:

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="whiskers">
    <span class="avatar">🐱</span>
    <span class="name">Mr. Whiskers</span>
    <span class="description">Senior nap consultant</span>
  </option>
  <option value="pixel">
    <span class="avatar">🐈‍⬛</span>
    <span class="name">Pixel</span>
    <span class="description">Keyboard warmth specialist</span>
  </option>
</select>

That <selectedcontent> element inside the button is new too: it clones the chosen option's markup into the button, so the selected state shows the same rich content. Want the avatar in the button but not the long description? Just hide it:

selectedcontent .description {
  display: none;
}

Native dropdown. Custom looks. No library for the common cases. We've waited years for this one.

5. A carousel with zero JavaScript – `::scroll-button()` & `::scroll-marker()`

Carousels are the reason half of us learned to hate front-end. Scroll listeners, index tracking, dot navigation, disabled arrow states, accessibility... It's a whole weekend. CSS now generates the buttons and dots for you.

The new way:

<ul class="cat-gallery">
  <li><img src="whiskers.jpg" alt="Mr. Whiskers judging you" /></li>
  <li><img src="pixel.jpg" alt="Pixel asleep on a keyboard" /></li>
  <li><img src="mochi.jpg" alt="Mochi making biscuits" /></li>
</ul>

.cat-gallery {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.cat-gallery > li {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.cat-gallery::scroll-button(left) { 
  content: "⬅" / "Previous cat"; 
}

.cat-gallery::scroll-button(right) { 
  content: "➡" / "Next cat"; 
}

.cat-gallery { 
  scroll-marker-group: after; 
}

.cat-gallery > li::scroll-marker {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.cat-gallery > li::scroll-marker:target-current {
  background: currentColor;
}

The ::scroll-button() pseudo-elements are real, focusable buttons that the browser automatically disables when scrolling isn't possible in that direction (one of the most annoying things to do by hand). The content: "⬅" / "Previous cat" syntax even gives you an accessible label after the slash.

The ::scroll-marker dots behave like anchor links – click one and you jump to that cat – and :target-current styles whichever one is in view. (You might still reach for JS for autoplay, lazy-loading, or analytics.)

And here's an underrated part: because these are real, browser-native controls, they inherit keyboard support and accessibility semantics that hand-rolled JS carousels usually have to reimplement from scratch.

6. Scroll-spy navigation, hold the JavaScript – `scroll-target-group`

You know that nav where the current section highlights as you scroll? The "scroll-spy"? That's a clear example of the IntersectionObserver boilerplate. Now it's two CSS lines on a normal list of anchor links.

The old way (JS):

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    const link = document.querySelector(`a[href="#${entry.target.id}"]`);
    if (entry.isIntersecting) link.classList.add('active');
    else link.classList.remove('active');
  });
});
sections.forEach((s) => observer.observe(s));

The new way (CSS):

<nav class="menu">
  <a href="#kittens">Kittens</a>
  <a href="#seniors">Distinguished Seniors</a>
  <a href="#chonkers">Absolute Units</a>
</nav>
<section id="kittens">…</section>
<section id="seniors">…</section>
<section id="chonkers">…</section>

html { 
  scroll-behavior: smooth; 
}

section { 
  scroll-margin-top: 4rem; 
}

.menu {
  position: sticky;
  top: 0;
  background: white;
  scroll-target-group: auto;
}

.menu a:target-current {
  color: hotpink;
  font-weight: bold;
}

scroll-target-group: auto turns your anchor links into connected scroll-markers, and :target-current styles whichever link points at the section you're currently looking at.

7. Know if something is stuck or snapped – scroll-state queries

Ever wanted to style a sticky header differently once it actually sticks? Or fade the non-active items in a snap-scroller? Traditionally: scroll event listeners, getBoundingClientRect(), throttling, tears. Now CSS can just ask.

The new way (CSS): declare a scroll-state container, then query it with a container query stuck, snapped, scrollable and scrolled. Note that which element becomes the container depends on the state you're querying.

One rule to remember: you can't style the container itself, only its descendants. That's why every example below styles a child.

So, to dim every cat card except the one snapped into view:

.cat-shelf {
  display: flex;
  gap: 1rem;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  > div {
    container-type: scroll-state;
    scroll-snap-align: center;
    flex: 0 0 70%;

    > * {
      transition: opacity 0.5s ease;
    }

    @container not scroll-state(snapped: x) {
      > * { opacity: 0.25; }
    }
  }
}

<div class="cat-shelf">
  <div><figure>🐱</figure></div>
  <div><figure>🐈‍⬛</figure></div>
  <div><figure>😺</figure></div>
  <div><figure>🙀</figure></div>
</div>

And the sticky header classic – shadow only once it actually sticks:

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;

  > nav {
    transition: box-shadow 0.3s ease;

    @container scroll-state(stuck: top) {
      box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
    }
  }
}

Quick sanity check if you see nothing: run CSS.supports('container-type: scroll-state') in the console. false means your browser, not your code.

Declarative, performant, and you didn't touch a single scroll event. Cards stay visible, headers stay shadowless, nothing breaks.

Bonus points: combine this with section 6 – give your scroll-spy nav position: sticky plus a scroll-state(stuck: top) shadow, and you've got two of this article's features working the same demo.

8. Staggered animations without hardcoding indices – `sibling-index()` & `sibling-count()`

Want your list of cats to fade in one after another? The old trick was hardcoding --index: 1, --index: 2... with :nth-child, or worse, looping in JS to set inline styles. Fragile, ugly, breaks the moment the list changes.

The old way (JS):

document.querySelectorAll('.cat').forEach((cat, i) => {
  cat.style.setProperty('--index', i);
});

The new way (pure CSS):

.cat {
  transition: opacity 0.25s ease, translate 0.25s ease;
  /* sibling-index() is 1-based, so subtract 1 to start the first item at 0s */
  transition-delay: calc(0.1s * (sibling-index() - 1));

  @starting-style {
    opacity: 0;
    translate: 1em 0;
  }
}

<div id="shelter">
  <div class="cat">🐱 Mr. Whiskers</div>
  <div class="cat">🐈‍⬛ Pixel</div>
  <div class="cat">😺 Mochi</div>
  <div class="cat">🙀 Baguette</div>
</div>

sibling-index() gives each element its position among siblings – so the stagger math automatically adapts when cats are added or removed. Append a new cat to the container, and it slides in with a delay matching its position.

And sibling-count() gives the total, which unlocks the smarter version: a fixed total stagger duration, no matter how many cats show up. Ten cats or a hundred, the whole cascade always finishes in half a second:

.cat {
  transition-delay: calc(0.5s / sibling-count() * (sibling-index() - 1));
}

9. Dynamic styling from data attributes – `if()` & typed `attr()`

Here's the final boss of "I only used JavaScript to change a style." You read a data- attribute, run an if, and toggle a class. CSS can now react to those attribute values directly – no class-toggling round-trip.

First, attr() grew up. It used to only spit out strings into content. Now it can be typed and used on any property:

.cat-card {
  background: attr(data-color type(<color>), gray);
}

<div class="cat-card" data-color="hotpink">Currently: delighted</div>

And here's the part that makes it dynamic: change the attribute – from JS, from your framework, from anywhere – and the style updates instantly. The logic lives in CSS; JS only touches the data:

card.dataset.color = 'mediumseagreen';

(One deliberate exception: attr() can't construct URLs – attributes may hold tokens you don't want leaking into requests, so the <url> type is blocked by design.)

And if() brings ternary-style conditionals straight into your values – no @media block ceremony for a single property:

.layout {
  display: flex;
  flex-direction: column; /* fallback for browsers without if() */
  flex-direction: if(media(orientation: landscape): row; else: column);
}

if() works with media(), supports(), and style() queries. Combine it with typed attr() and you get styling driven directly by your HTML data. The solid, works-today version compares discrete values – note this one reads a keyword from data-mood, not a color:

.cat-card {
  --mood: attr(data-mood type(<custom-ident>), unknown);
  border: 3px solid;
  border-color: if(
    style(--mood: delighted): hotpink;
    style(--mood: grumpy): darkred;
    else: gray
  );
}

<div class="cat-card" data-mood="delighted">Mr. Whiskers is delighted</div>
<div class="cat-card" data-mood="grumpy">Pixel is grumpy</div>
<div class="cat-card" data-mood="sleepy">Mochi is… unaccounted for</div>

Range comparisons are the true bleeding edge. To compare a custom property as a real number or percentage inside style(), you must register it with @property first – otherwise CSS treats it as an opaque string – and even then, range syntax inside if() is the newest piece of this whole article:

@property --rain {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.cat-card {
  --rain: attr(data-rain-percent type(<percentage>), 0%);
  background: gold;
  background: if(style(--rain > 45%): steelblue; else: gold);
}

<div class="cat-card" data-rain-percent="20%">Rain: 20% – outdoor zoomies</div>
<div class="cat-card" data-rain-percent="80%">Rain: 80% – window judgment</div>

The thing you reached for element.classList.toggle() to do? CSS can now handle it directly. It still can't fetch data, change attributes, or run real logic – but for "style X based on a value that's already in the DOM," the JS middleman is optional now.

So... is JavaScript fired? 🐱

Nah. JavaScript is fine – it's still doing the heavy lifting for actual logic, data, and state. But a huge chunk of the JS we write isn't logic, it's plumbing: opening dialogs, closing them, tracking scroll position, highlighting nav, toggling classes based on data attributes. CSS Wrapped 2025 is basically the platform reclaiming all that plumbing so we can stop writing it.

Less code to ship, less to break, more accessible by default, and it works even if your JS bundle face-plants. That's a win in every bowl.

Go check the full CSS Wrapped 2025 for the other 13 features I didn't cover, poke around MDN, and verify support before you ship.

Did I miss your favorite JS-saver from this year's drop? Tell me in the comments – and which cat you'd adopt.

"That's what she Set!" - mastering data with 7 new JavaScript Set methods

Veranika Kasparevych — Fri, 12 Jan 2024 14:51:27 +0000

In this article, I will be spilling the beans on the coolest, latest methods that probably will turn the Set object into a rockstar. I noticed these new methods in July and finally was able to test them in Safari. All of them are fresh ways to play with data, do crazy intersections, and make unions so smooth you'll wonder how you ever lived without them.

So, 7 new Set methods are under construction now and I will show you the way they interact with data:

difference()
intersection()
isDisjointFrom()
isSubsetOf()
isSupersetOf()
symmetricDifference()
union()

Now, let's delve into these methods and see how they elevate the power of Sets in handling data.

We will be working on these two wonderful Sets containing the employees of two best offices of the Dunder Mifflin paper company:


const scrantonOfficeEmployees = new Set([ "Michael Scott", "Jim Halpert", "Pam Beesly", "Dwight Schrute", "Angela Martin", "Stanley Hudson", "Phyllis Smith", "Ryan Howard", "Kelly Kapoor", "Oscar Martinez", "Kevin Malone", "Meredith Palmer", "Creed Bratton", "Toby Flenderson", "Jan Levinson" ]);


const stamfordOfficeEmployees = new Set([ "Jim Halpert", "Andy Bernard", "Karen Filippelli", "Josh Porter", "Tony Gardner" ]);


const dunderMifflinEmployees = new Set([...scrantonOfficeEmployees, ...stamfordOfficeEmployees]);

The difference() method of Set instances takes a set and returns a new set containing elements in this set but not in the given set:


dunderMifflinEmployees.difference(scrantonOfficeEmployees);

// Output: Set (4) {"Andy Bernard", "Karen Filippelli", "Josh Porter", "Tony Gardner"}

The intersection() method of Set instances takes a set and returns a new set containing elements in both this set and the given set:


stamfordOfficeEmployees.intersection(scrantonOfficeEmployees);  

// Output: Set (1) {"Jim Halpert"}

The symmetricDifference() method of Set instances takes a set and returns a new set containing elements which are in either this set or the given set, but not in both:


stamfordOfficeEmployees.symmetricDifference(scrantonOfficeEmployees);  

// Output:  Set (18) {"Andy Bernard", "Karen Filippelli", "Josh Porter", "Tony Gardner", "Michael Scott", "Pam Beesly", "Dwight Schrute", "Angela Martin", "Stanley Hudson", "Phyllis Smith", "Ryan Howard", "Kelly Kapoor", "Oscar Martinez", "Kevin Malone", "Meredith Palmer", "Creed Bratton", "Toby Flenderson", "Jan Levinson"}

The union() method of Set instances takes a set and returns a new set containing elements which are in either or both of this set and the given set:


stamfordOfficeEmployees.union(scrantonOfficeEmployees);  

// Output: Set (19) {"Jim Halpert", "Andy Bernard", "Karen Filippelli", "Josh Porter", "Tony Gardner", "Michael Scott", "Pam Beesly", "Dwight Schrute", "Angela Martin", "Stanley Hudson", "Phyllis Smith", "Ryan Howard", "Kelly Kapoor", "Oscar Martinez", "Kevin Malone", "Meredith Palmer", "Creed Bratton", "Toby Flenderson", "Jan Levinson"}

The isSubsetOf() method of Set instances takes a set and returns a boolean indicating if all elements of this set are in the given set:


new Set(["Michael Scott", "Jim Halpert"]).isSubsetOf(scrantonOfficeEmployees);  

// Output: true

The isSupersetOf() method of Set instances takes a set and returns a boolean indicating if all elements of the given set are in this set:


scrantonOfficeEmployees.isSupersetOf(new Set(["Michael Scott", "Jim Halpert"])); 

// Output: true

The isDisjointFrom() method of Set instances takes a set and returns a boolean indicating if this set has no elements in common with the given set:


stamfordOfficeEmployees.isDisjointFrom(dunderMifflinEmployees);  

// Output: false

Stay tuned for further updates and enhancements to the Set object's capabilities. You can keep track of all the details on the official Mozilla documentation.

Create your own NPM package using TypeScript, Prettier, Eslint and Jest

Veranika Kasparevych — Sun, 03 Sep 2023 13:51:24 +0000

In this article, we're diving deep into the world of creating your own NPM packages using a potent combination of TypeScript, Prettier, ESLint, and Jest. By the end, you'll not only have a clear understanding of how to set up your development environment but also the knowledge to package your code for easy sharing with the developer community.

Before you begin, ensure that you have Node.js and NPM (Node Package Manager) installed on your machine by running this in your terminal:

node -v
npm -v

Step 1: Decide on a package name and check its availability.

Taking into consideration official package name guideline pick the right name for your package and check if it is available here.

Step 2: Create a new directory for your project

mkdir <project-name>
cd <project-name>

Create the src directory, this will be the main directory for all our TypeScript source files. Inside the src directory, create a file named index.ts.

mkdir src && touch src/index.ts

Step 3: Init the package

Run the following command for package initialization, answer all the questions in the command line questionnaire and press enter.

npm init

You can skip all of them (you can easily update it later) or simply run npm init --yes to receive a list of default values. Open the folder using your IDE.

Step 4: Install all the necessary dependencies - create configuration and ignore files

Typescript

In your project directory, install TypeScript as a development dependency:

npm install --save-dev typescript

Then run:

tsc --init

This command will generate a tsconfig.json file in your project directory that contains default compiler options for your TypeScript project.

Replace the default config for these settings below, feel free to add anything you want.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
},

  "include": ["src"],
  "exclude": ["node_modules", "src/**.test.ts"]
}

Let's break down what each part of this configuration does:

"compilerOptions": This section defines the compiler options for TypeScript.
"include": This array specifies which files and directories TypeScript should include in the compilation process. In this configuration, it's set to include the "src" directory, which contains your TypeScript source code.
"exclude": This array specifies which files and directories TypeScript should exclude from the compilation process. Here, it's excluding two things: "node_modules" - you don't need to compile these since they are already in JavaScript and "src/**.test.ts" - this is a common convention for test files, ensuring that they are not compiled as part of your regular code.

Eslint

Install ESLint core library along with TypeScript support - parser that allows ESLint to understand TypeScript code and plugin with a set of recommended TypeScript rules as a development dependency:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Create .eslintrc.json with a set of rules for eslint.

touch .eslintrc.json

You can add more rules to make code more consistent and avoid bugs.

{
    "root": true,
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": { "project": ["./tsconfig.json"] },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {},
    "ignorePatterns": ["src/**/*.test.ts"]
}

Prettier

Install Prettier as a development dependency:

npm install --save-dev prettier

Create a configuration file in the project root for Prettier configuration. These settings define how your code should be formatted when using the tool.

touch .prettierrc

For example:

{
  "trailingComma": "all",
  "tabWidth": 2,
  "singleQuote": false,
  "printWidth": 120
}

This is the most basic config adding trailing commas wherever possible, specifying the number of spaces to be used for each level of indentation, sticking to double quotes for string literals, and defying the maximum line width before code lines are automatically wrapped or formatted

Prettier and ESLint may generate issues when common rules overlap. The best solution here is to use eslint-config-prettier to disable all ESLint rules that are irrelevant to code formatting, as Prettier is already good at it.

npm install --save-dev eslint-config-prettier

To make it work you need to go to the .eslintrc file and add it to Prettier at the end of your extends list to disable any other previous rules from other plugins.

{
    "root": true,
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": { "project": ["./tsconfig.json"] },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {},
    "ignorePatterns": ["src/**/*.test.ts"]
}

Jest

Finally, install Jest for unit tests and ts-jest preset (a Jest transformer with source map support that lets you use Jest to test projects written in TypeScript).

npm install --save-dev jest ts-jest @types/jest

You don't need to create a configuration file, the basic configuration can be stored in package.json:

  "jest": {
    "verbose": true,
    "preset": "ts-jest"
  }

The verbose option instructs Jest to display detailed information during test execution and "preset" specifies a configuration preset to use for running Jest tests. In this case, it's set to "ts-jest". The "ts-jest" preset is designed for projects that use TypeScript for their source code. It configures Jest to work seamlessly with TypeScript, allowing you to write and run tests for TypeScript code.

Step 5: Update scripts in `package.json`

After installing all the dependencies update your scripts in package.json:

  "scripts": {
    "dev": "tsc --watch",
    "build": "tsc",
    "lint": "eslint ./src",
    "format": "prettier ./src --write",
    "test": "jest"
  }

You can also add magic scripts that can automate the whole process!

Step 6: Init git repository and add `.gitignore` file

The last configuration thing, I swear 😁

git init
echo "node_modules" >> .gitignore
echo "# <project-name>" >> README.md
git add . && git commit -m "initial commit"

Create a remote repository and add it to the project:

git remote add origin git@github.com:<gh-account>/<project-name>.git
git branch -M main
git push -u origin main

Step 7: And finally write the code!

Open the index.ts file and implement your functionality.

Step 8: Test it using Jest.

Add some unit tests for your code.

Remember to update package.json if you didn't answer the questions.

Step 9: Test it locally using npm link.

Once you have your NPM package stored locally on your machine, you can test it before publishing.

Within the original NPM package directory, execute the npm link command in your terminal. This command enables us to mimic the installation of the NPM package without actually publishing it to the NPM registry.

Following that, it's necessary to establish a link to this package from within your test directory. Create any test file and run npm link <project-name>. From now on you can use your package to test it.

Step 10: Package publishing

First of all, specify which files you want to publish and add them to .package.json file.

  "files": [
    "dist/**/*"
  ]

Only the dist folder will be included in the published package! (README.md and package.json are added by default).

If you already have an account, run npm login to log in to your NPM account. In case you don't have any you can run the command: npm adduseror sign up here.

Then run:

npm publish

Now browse your package on npmjs.

The URL is https://npmjs.com/package/<project-name>.

Updating your NPM package

After you have made some changes you can easily update your npm package using the following command:

npm version patch

Find more information about bumping a new package version here.

Then run:

npm publish

Best practices

Readme: Create a comprehensive README.md file for your package. Explain what the package does, how to install and use it, and provide examples.
Documentation: Consider generating documentation for your package, so it will be easier for users to understand and utilize your package.
Versioning: Follow semantic versioning guidelines to ensure that users can understand the impact of updates before they install them.
Continuous Integration: Set up a CI/CD pipeline that automatically runs tests, linters, and builds before publishing. This ensures that only quality code is released.
License: Choose an appropriate open-source license for your package. Include a LICENSE file in your project directory.

Conclusion

Publishing an NPM package involves more than just code — it's about sharing your expertise and solutions with the development community. By integrating TypeScript, Prettier, ESLint, and Jest, you've already set a strong foundation for your package's quality. With the steps outlined in this article, you can confidently publish packages and updates to them, knowing that you're providing valuable tools for fellow developers. Happy publishing!

DEV Community: Veranika Kasparevych

9 new CSS features that are quietly firing your JavaScript.

1. Open a dialog without JavaScript – command & commandfor

2. Close that dialog by clicking outside – closedby

3. Tooltips on hover, no JavaScript – interestfor + popover=hint

4. A <select> you can actually style – appearance: base-select

5. A carousel with zero JavaScript – ::scroll-button() & ::scroll-marker()

6. Scroll-spy navigation, hold the JavaScript – scroll-target-group

7. Know if something is stuck or snapped – scroll-state queries

8. Staggered animations without hardcoding indices – sibling-index() & sibling-count()

9. Dynamic styling from data attributes – if() & typed attr()

So... is JavaScript fired? 🐱

"That's what she Set!" - mastering data with 7 new JavaScript Set methods

Create your own NPM package using TypeScript, Prettier, Eslint and Jest

Step 1: Decide on a package name and check its availability.

Step 2: Create a new directory for your project

Step 3: Init the package

Step 4: Install all the necessary dependencies - create configuration and ignore files

Typescript

Eslint

Prettier

Jest

Step 5: Update scripts in package.json

Step 6: Init git repository and add .gitignore file

Step 7: And finally write the code!

Step 8: Test it using Jest.

Step 9: Test it locally using npm link.

Step 10: Package publishing

Updating your NPM package

Best practices

Conclusion

1. Open a dialog without JavaScript – `command` & `commandfor`

2. Close that dialog by clicking outside – `closedby`

3. Tooltips on hover, no JavaScript – `interestfor` + `popover=hint`

4. A `<select>` you can actually style – `appearance: base-select`

5. A carousel with zero JavaScript – `::scroll-button()` & `::scroll-marker()`

6. Scroll-spy navigation, hold the JavaScript – `scroll-target-group`

8. Staggered animations without hardcoding indices – `sibling-index()` & `sibling-count()`

9. Dynamic styling from data attributes – `if()` & typed `attr()`

Step 5: Update scripts in `package.json`

Step 6: Init git repository and add `.gitignore` file