# Vanilla JavaScript Published articles for Vanilla JavaScript. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## How to Handle Styled Unicode Text in JavaScript DevFeed: [How to Handle Styled Unicode Text in JavaScript]() Original publisher: [Read original article]() Author: Mohsin Qureshi Published: 2026-10-25T10:19:58Z Content type: article Language: en Sources: [SitePoint]() Topics: [JavaScript](), [case folding](), [Emoji]() Tags: [how-to](), [javascript](), [styled](), [text](), [unicode](), [vanilla-javascript]() ### AI overview Styled Unicode letters such as hello are distinct code points from plain "hello," so ordinary equality and substring search do not match them. The excerpt recommends preserving users' original text for display and deriving a separate NFKC, case-normalized representation for search when the product requires those forms to match. Apply transformations by field: NFC can standardize canonically equivalent sequences, while NFKC can erase compatibility distinctions; neither should be applied destructively to all content. Unicode property escapes support international letters and numbers, but are not a security policy for identifiers, where confusables need separate restrictions. Normalization also does not solve character counting: use code-point iteration or Intl.Segmenter for grapheme counts, depending on the need. Test varied scripts, combining marks, styled letters, and emoji through validation, search, storage, and length handling. ### Source excerpt null Continue reading How to Handle Styled Unicode Text in JavaScript on SitePoint. ## Your JavaScript Character Counter Is Probably Wrong: Unicode Explained DevFeed: [Your JavaScript Character Counter Is Probably Wrong: Unicode Explained]() Original publisher: [Read original article]() Author: Mohsin Qureshi Published: 2026-10-14T14:38:28Z Content type: tutorial Language: en Sources: [SitePoint]() Topics: [JavaScript](), [Front end](), [Encoding]() Tags: [ascii](), [browser](), [javascript](), [typography](), [unicode](), [vanilla-javascript]() ### AI overview JavaScript string length counts UTF-16 code units, which can differ from the characters users perceive. This tutorial explains the distinction among code units, code points and grapheme clusters, and shows how to use Intl.Segmenter for user-facing character counts and truncation. It also covers normalization, aligning frontend validation with backend limits, and testing text handling with emoji, combining marks, flags and non-Latin scripts. ### Source excerpt null Continue reading Your JavaScript Character Counter Is Probably Wrong: Unicode Explained on SitePoint. ## How to Build Smarter Marketplace Search with Vanilla JavaScript DevFeed: [How to Build Smarter Marketplace Search with Vanilla JavaScript]() Original publisher: [Read original article]() Author: Jhon-Harry Published: 2026-10-05T09:14:58Z Content type: tutorial Language: en Sources: [SitePoint]() Topics: [JavaScript](), [hybrid-search](), [search-engines]() Tags: [how-to](), [javascript](), [node-js](), [search](), [vanilla-javascript]() ### AI overview This tutorial shows how to build marketplace search with vanilla JavaScript using structured listing data, text normalization, multi-term matching, weighted scoring, filters, sorting, debounced input, and helpful empty states. It also explains when a small in-memory search should give way to a server-side index. ### Source excerpt null Continue reading How to Build Smarter Marketplace Search with Vanilla JavaScript on SitePoint. ## Building a 33-Ending Capacitor Game Without a Framework or Custom Backend DevFeed: [Building a 33-Ending Capacitor Game Without a Framework or Custom Backend]() Original publisher: [Read original article]() Author: Eugene Kozlovsky Published: 2026-09-28T11:30:24Z Content type: article Language: en Sources: [HackerNoon]() Topics: [Full Stack Development](), [Angular]() Tags: [backend](), [css3](), [fine-state-machines](), [gamedev](), [google-play-testing](), [hidden](), [html5](), [mobile](), [nichlyst](), [offline](), [revenuecat](), [shipaton](), [vanilla-javascript](), [webview-performance]() ### AI overview The article describes building NICHLYST, an offline mobile narrative game, on an aging 8 GB PC in wartime Kyiv. It explains the choice of vanilla JavaScript, CSS, and HTML5 wrapped with Apache Capacitor, and a modular JSON loader designed to work without a heavyweight framework or custom backend. It also discusses the game's finite resource ledger, testing, and planned Shipaton submission. ### Source excerpt How an indie builder created a zero-framework, offline mobile game on an 8 GB PC in wartime Kyiv, using Git color gates, strict FSM, and RevenueCat. ## The Case for Tri-State Dark Mode Toggles DevFeed: [The Case for Tri-State Dark Mode Toggles]() Original publisher: [Read original article]() Author: Bramus! Published: 2026-08-18T08:26:19Z Content type: article Language: en Sources: [Bram.us]() Topics: [Dark Mode](), [User Experience](), [JavaScript](), [Users]() Tags: [css](), [dark-mode](), [implementing](), [original-content](), [ux](), [vanilla-javascript](), [website]() ### AI overview The article argues that website dark mode controls should offer three choices--system, light, and dark--instead of a binary light/dark switch. It discusses user intent, persisted preferences, and local visual feedback, drawing on a Vanilla JavaScript implementation and a related UX debate. ### Source excerpt Adding a Dark Mode toggle to your website is a nice touch that many users appreciate. When implementing one, the default instinct for many developers is to reach for a simple binary switch: Light on one side, Dark on the other. While a two-state control might seem like the most straightforward solution, I firmly believe it's flawed from a user experience perspective. Instead, we should all be using tri-state controls. Let me explain why. ## Build a Dependency Injection Container in Vanilla JavaScript DevFeed: [Build a Dependency Injection Container in Vanilla JavaScript]() Original publisher: [Read original article]() Author: anton liberant Published: 2026-08-02T00:00:00Z Content type: tutorial Language: en Sources: [JavaScript Development]() Topics: [Dependency injection](), [JavaScript]() Tags: [dependency-injection](), [javascript](), [vanilla-javascript]() ### AI overview A tutorial builds a lightweight dependency injection container in vanilla JavaScript, using declared component metadata instead of TypeScript, decorators, or runtime reflection. It covers class, factory, and value providers; singleton, scoped, and transient lifetimes; recursive dependency resolution; circular dependency detection; and an example application architecture that keeps domain objects independent from the container. The implementation is presented as an experiment rather than a production-ready framework. ### Source excerpt Learn how to build a dependency injection container in vanilla JavaScript with singleton, scoped, and transient lifetimes, all without TypeScript. ## What's new in Apollo Client 3.10 DevFeed: [What's new in Apollo Client 3.10]() Original publisher: [Read original article]() Author: Lenz Weber-Tronic Published: 2024-04-25T12:26:16Z Content type: release Language: en Sources: [Apollo Blog]() Topics: [apollo-client](), [Software Testing](), [Test automation]() Tags: [announcement](), [api](), [apollo](), [apollo-client](), [experimental](), [graphql](), [javascript](), [react](), [resolvers](), [schema](), [stable](), [testing](), [tests](), [tools](), [vanilla-javascript](), [what-s-new]() ### AI overview Apollo Client 3.10 adds experimental schema-based testing utilities that let tests alter resolvers to simulate changing results. The excerpt presents this as an alternative to the existing testing approach and says the schema can be used with Mock Service Worker or another new option to simulate a GraphQL server; both approaches use the real link chain instead of a mocked one. It also adds a function to the client class for using hook functionality in vanilla JavaScript or other frameworks. Finally, an API introduced as alpha in 3.9 is now stable; it starts a query outside React, such as in a router action, and later attaches to the generated result with a hook. ### Source excerpt Apollo Client 3.10 has just been released, and we want to provide you with an overview of what's new: - Introducing new experimental schema-based testing utilities - New API: - reaches "stable" status Let's take a look: Introducing new experimental schema-based testing utilities In Apollo Client 3.10, we are introducing new schema-based testing utilities under the import. This adds two new tools: You can modify the resolvers inside your tests to simulate changing results. ## Using Bootstrap Native with Phoenix LiveView DevFeed: [Using Bootstrap Native with Phoenix LiveView]() Original publisher: [Read original article]() Author: José Valim Published: 2020-06-16T00:00:00Z Content type: tutorial Language: en Sources: [Dashbit Blog]() Topics: [Bootstrap](), [phoenix](), [JavaScript](), [Webpack](), [Front end](), [Web Development](), [Sass]() Tags: [bootstrap](), [forms](), [javascript](), [liveview](), [phoenix](), [sass](), [tutorials](), [vanilla-javascript](), [webpack]() ### AI overview A step-by-step tutorial for integrating Bootstrap Native with Phoenix LiveView. It explains how to avoid the full jQuery dependency by using Bootstrap components implemented in vanilla JavaScript, configure Webpack and Sass assets, and reapply JavaScript hooks when LiveView injects dynamic content. ### Source excerpt A step by step description on how to use Bootstrap Native with Phoenix LiveView. ## Frameworkless JavaScript Part 2: Templates and Rendering DevFeed: [Frameworkless JavaScript Part 2: Templates and Rendering]() Original publisher: [Read original article]() Author: Jack Tarantino Published: 2017-01-08T18:19:00Z Content type: tutorial Language: en Sources: [Jacopo Tarantino]() Topics: [JavaScript](), [Code](), [Framework]() Tags: [best-practices](), [code](), [frameworks](), [how-to](), [javascript](), [templates](), [templating](), [vanilla-javascript]() ### AI overview This tutorial explains how to implement basic HTML templating and string interpolation with vanilla JavaScript, using native APIs and methods instead of libraries or frameworks. ### Source excerpt This article is one in a series about writing client-focused JavaScript without the help of libraries and frameworks. It's meant to help developers remember that they can write good code on their own using nothing but native APIs and methods. For more, check out the original article on writing small