Article From Dmitrii
Dmitrii SuroviaginDmitrii Suroviagin
inFR Media

Article From Dmitrii

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Edit!!

10 min read
Basecoat: shadcn/ui's Magic, But Minus React

External content

Ronan BerderRonan Berder
injavascriptweekly

Basecoat: shadcn/ui's Magic, But Minus React

Basecoat UI is a lightweight, framework-agnostic component library built with Tailwind CSS. It brings the design system and accessibility benefits of shadcn/ui to any web stack—no React required. Ideal for developers working with plain HTML, Flask, Rails, Laravel, Django, or other traditional stacks, Basecoat offers clean, readable markup without the clutter of excessive utility classes. Key features include: - Lightweight: No runtime JavaScript; only minimal Alpine.js for interactive components. - Easy to use: Apply simple classes like btn or input for immediate styling. - Accessible: Components adhere to accessibility best practices. - Dark mode ready: Integrates seamlessly with your Tailwind configuration. - Extendable and themable: Customize styles using Tailwind or CSS variables; fully compatible with shadcn/ui themes. - Free and open source: Available under the MIT license.

frontend
tailwind
css
accessibility
4 min read
tscircuit: Use React for Building Electronics Projects

External content

tscircuit Inc.tscircuit Inc.
injavascriptweekly

tscircuit: Use React for Building Electronics Projects

tscircuit is an open-source electronics design platform that brings the paradigms of web development into the realm of hardware design. By leveraging React and TypeScript, it allows developers to define electronic circuits using JSX-like syntax, enabling the creation of schematics, PCB layouts, and even 3D previews directly from code. The platform offers a comprehensive toolchain, including a component registry, package manager, command-line interface, and AI-assisted design tools. This ecosystem facilitates the design, simulation, and manufacturing of printed circuit boards (PCBs), streamlining the transition from concept to production. A notable feature is the browser-based playground, [snippets.tscircuit.com](https://snippets.tscircuit.com/), which provides an interactive environment for designing and sharing circuits without the need for local setup.

react
typescript
opensource
open-source
7 min read
TanStack DB: A Reactive Client Store with Fast Real-Time Sync

External content

TanStackTanStack
injavascriptweekly

TanStack DB: A Reactive Client Store with Fast Real-Time Sync

TanStack DB is a reactive client-side data store designed to enhance the capabilities of TanStack Query by introducing collections, live queries, and optimistic mutations. It leverages a TypeScript implementation of differential dataflow to provide sub-millisecond query performance, fine-grained reactivity, and robust transaction primitives. TanStack DB is backend-agnostic and incrementally adoptable, allowing integration with various data sources such as REST APIs, GraphQL, or custom sync engines. Developers can define typed collections, execute live queries with support for joins and aggregates, and perform optimistic mutations with lifecycle support. The library also offers adapters for frameworks like React and Vue, facilitating seamless integration into existing applications.

Tanstack Query
ui
ux
typescript
7 min read
Fx 36.0: A Command-Line JSON Viewer & Processing Tool

External content

Anton MedvedevAnton Medvedev
injavascriptweekly

Fx 36.0: A Command-Line JSON Viewer & Processing Tool

**Fx** is a terminal-based JSON viewer and processor written in Go, designed for developers who need to inspect and manipulate JSON and YAML data efficiently. It features an interactive TUI (Text User Interface) that allows users to navigate complex data structures with ease, utilizing familiar JavaScript syntax for data transformation. Fx supports streaming JSON, enabling it to handle large files and real-time data streams effectively. Additional features include support for JSON comments, trailing commas, big integers, and terminal autocompletion for bash, zsh, and fish shells. The tool is distributed as a single self-contained binary, making installation straightforward.

JSON
go
javascript
opensource
5 min read
jsdiff 8.0: A JavaScript Text Diffing Implementation

External content

Kevin Decker
injavascriptweekly

jsdiff 8.0: A JavaScript Text Diffing Implementation

**jsdiff** is a JavaScript library that provides text differencing capabilities, allowing developers to compare strings and identify differences at the character, word, or line level. It supports various diffing methods, including `diffChars`, `diffWords`, and `diffLines`, and can generate unified patches for version control workflows. The library is based on the Myers diff algorithm and is available under the BSD-3-Clause license. An online demo is available at [incaseofstairs.com/jsdiff](http://incaseofstairs.com/jsdiff/), enabling users to experiment with different diffing strategies in real-time.

javascript
opensource
open-source
5 min read
'I Think the Ergonomics of Generators is Growing on Me'

External content

Alex MacArthurAlex MacArthur
injavascriptweekly

'I Think the Ergonomics of Generators is Growing on Me'

In his article, Alex MacArthur explores JavaScript generator functions, which have been part of the language since ES2015 but remain underutilized. He delves into the iterator and iterable protocols that underpin generators, providing clear examples to illustrate their mechanics. MacArthur shares his personal journey of experimenting with generators, highlighting their advantages in scenarios like on-demand value generation and infinite sequences. He concludes that, while not universally applicable, generators offer ergonomic benefits and a compelling mental model for certain use cases.

javascript
webdevelopment
developertools
8 min read
Svelte Sonner: A Toast Notification Component for Svelte

External content

Robert SorianoRobert Soriano
injavascriptweekly

Svelte Sonner: A Toast Notification Component for Svelte

Svelte Sonner is a Svelte adaptation of Emil Kowalski's popular React toast library, Sonner. It offers an opinionated, accessible, and customizable toast notification system tailored for Svelte applications. With the release of v1.0.1, Svelte Sonner introduced compatibility with Svelte 5, incorporated Svelte runes and snippets, and achieved feature parity with the original React version. Notably, it supports custom components, promise-based toasts, and a headless mode for advanced customization. A dedicated documentation site is forthcoming.

svelte
react
frontend
open-source
opensource
5 min read
Building a React App with GitHub Copilot

External content

Kedasha Kerr (GitHub)Kedasha Kerr (GitHub)
injavascriptweekly

Building a React App with GitHub Copilot

The author provides a comprehensive, step-by-step guide to developing a modern React application using GitHub Copilot and Copilot Chat within Visual Studio Code. The tutorial walks readers through setting up the project, creating login and registration forms, implementing authentication via an API, and adding features like a dashboard, sidebar navigation, and trip management. Throughout the process, the author demonstrates how Copilot's AI-powered suggestions can streamline development, assist in resolving errors, and enhance the overall coding experience.

react
githubcopilot
11 min read
Feedsmith: A Fresh New Web Feed Parser and Generator

External content

Maciej LamberskiMaciej Lamberski
injavascriptweekly

Feedsmith: A Fresh New Web Feed Parser and Generator

**Feedsmith** is a modern, high-performance JavaScript library designed for parsing and generating a variety of feed formats, including RSS, Atom, JSON Feed, RDF, and OPML. It supports numerous popular namespaces such as Podcast, iTunes, Dublin Core, Media RSS, and GeoRSS, making it suitable for a wide range of applications, from podcasting to content syndication. The library offers a universal `parseFeed` function that automatically detects and parses the feed format, returning a structured, object-oriented representation of the feed. Feedsmith emphasizes performance and type safety, providing TypeScript definitions for each feed format and achieving 99% code coverage through an extensive test suite. Its design ensures compatibility with both Node.js and modern browsers, and its tree-shakable architecture allows developers to include only the necessary components, optimizing bundle size. The latest release, version 1.9.0, introduced support for the GeoRSS namespace, implemented the Atom Threading namespace, and added missing namespace types to Atom, RSS, and RDF feeds. Additionally, it removed iTunes support from RDF feeds to align with current standards.

javascript
RSS
JSON
podcasting
typescript
opensource
5 min read
Regular Expressions in JavaScript

External content

Adebayo AdamsAdebayo Adams
injavascriptweekly

Regular Expressions in JavaScript

The author offers a thorough introduction to regular expressions in JavaScript, aimed at developers with a basic understanding of the language. The article begins by illustrating the efficiency of regex over traditional string manipulation methods, such as extracting email addresses from text. It then delves into the creation of regex patterns using both literal notation and the `RegExp` constructor. Advanced topics covered include named capturing groups, lookaheads, and lookbehinds, with practical examples demonstrating their use. The guide also addresses common pitfalls and provides best practices to avoid them, making it a valuable resource for developers seeking to enhance their text processing skills in JavaScript.

---