Editor's Pick
remoteStorage - a simple library that combines the localStorage API with a remote server to persist data across browsers and devices
Storing data in localStorage is useful, but it's not a good solution when you store data that needs to be shared across multiple devices or browsers.
For instance, let's say you want to show a welcome modal to all new users that sign up for your product. If you use localStorage to track if a user has already seen this modal, your users will continue to get the experience over and over again every time they switch devices or browsers.
That's where remoteStorage comes in. Using the same API as localStorage, remoteStorage allows you to easily read and write data on the fly while maintaining state across browsers and devices in order to provide a better user experience.
CSS
Using CSS Houdini to extend styling and layout capabilities
CSS Houdini frees developers of the constraints associated with traditional CSS, enabling them to efficiently create unique designs and animations. CSS Houdini can extend CSS styling and even create new features that aren’t part of the standard CSS toolkit, all without the reduction in performance that’s associated with polyfills.
In this article, we’ll explore CSS Houdini’s definition, functionality, and unique contributions to frontend development. We’ll also explore several use cases. It’s important to note that CSS Houdini is still in the experimental phase as of this writing, so it does not have full browser support.
HTML
Just because you can doesn't mean you should: the <meter> element
A more tangible use case for the <meter> element would be to indicate something like available storage space, or percentage of remaining budget on a service where your plan only allows you a certain number of events or entities: an example of this would be Sentry, where your plan has a limit to the number of events/errors it'll accept, depending on how much money you throw at them.
The key UX thing here, though, is that if it's important information it should be accompanied by a numerical value. A meter is good for an at-a-glance sense of how much of something has been used, but you need to present it alongside the actual value for it to be at all useful.
JavaScript
Mastering CSS Transitions in React
React itself does not inherently support CSS transitions. We have to reach for additional libraries that simplify this integration. One exceptionally pleasant library to work with is ‘react-transition-group’. This library is built and maintained by the team at React, ensuring seamless integration and up-to-date features.
28 Advanced NextJS features everyone should know
This is a guide about some lesser-known features of NextJS. I've included things in this article that I have not seen in NextJS applications that I've worked on. Maybe these features are more popular than I am aware, but anyway, hopefully you come across some features that are new to you.
Pipeline Operator
As of early 2024, the pipeline operator is in Stage 2 and is not an ECMAScript language standard. At the moment TC39 is working on discussing its implementation.
For me, the pipeline operator is the most anticipated feature of the language, so today I want to see how it works and what the beautiful JavaScript of the future will look like.
Hidden Reactivity Tricks in Angular Templates
Let me show you some tricks you can use to add reactivity to your templates, even when it looks impossible.
I’ll show you how to make any field of an object reactive, and you will not even need the async pipe to get the updates.
Polly.JS - Record, Replay, and Stub HTTP Interactions
Polly.JS is a standalone, framework-agnostic JavaScript library that enables recording, replaying, and stubbing of HTTP interactions. By tapping into multiple request APIs across both Node & the browser, Polly.JS is able to mock requests and responses with little to no configuration while giving you the ability to take full control of each request with a simple, powerful, and intuitive API.
Effects.js - Algebraic effects in javascript with scoped handlers, multishot delimited continuations and do notation
Algebraic effects are based on two primary concepts: effects and handlers. Effects are just a representation of an action that can be performed. Handlers will catch the performed effects and can choose to resume the continuation with a result (like a promise), resume the continuation multiple times (like a array), or not resume at all and cancel the computation (like an exception). Handlers can also transform the result of the computation (into a promise, an array, etc).
To learn more about algebraic effects, see here.
Algebraic effects bring a multitude of advantages:
- dependency injection
- programming in direct-style (like async await - but for any data structure: promises, arrays, generators, etc)
- maintaining code pure (referentially transparent) while working with effects
- many control flow constructs can be expressed with only algebraic effects: async/await, coroutines/fibers, generators, exceptions, backtracking, react hooks & suspense, and more
- combining monads (almost any monad can be represented as an effect, which neatly allows it to be used together with other effects)
remoteStorage - a simple library that combines the localStorage API with a remote server to persist data across browsers and devices
Storing data in localStorage is useful, but it's not a good solution when you store data that needs to be shared across multiple devices or browsers.
For instance, let's say you want to show a welcome modal to all new users that sign up for your product. If you use localStorage to track if a user has already seen this modal, your users will continue to get the experience over and over again every time they switch devices or browsers.
That's where remoteStorage comes in. Using the same API as localStorage, remoteStorage allows you to easily read and write data on the fly while maintaining state across browsers and devices in order to provide a better user experience.
2024 Predictions by JavaScript Frontend Framework Maintainers
Maintainers and creators from Angular, Next.js, React and Solid share the improvements they're planning in 2024.
JSON Web Tokens are actually great, just not for sessions
Half of the internet is saying: "Just use JSON Web Tokens 😎🔥" and half of the crypto-community is shouting: "DON'T USE JSON WEB TOKENS!!! ☠️☠️". Who is right? who is wrong? As always, it's not that simple.
Navigating the New Era of Angular: Zoneless Change Detection Unveiled
The Angular framework has always been at the forefront of advancing web application development. In its latest stride towards efficiency and performance optimization, the Angular team has introduced an intriguing feature: provideZonelessChangeDetection. This new functionality heralds a shift towards a 'zoneless' future. Let's delve into the technicalities of this feature and understand its implications.
Miscellaneous
When “Everything” Goes Wrong: NPM Dependency-Hell Campaign
What a way to open 2024! NPM user account gdi2290, aka PatrickJS, published a troll campaign to the NPM registry by uploading a package named “everything”, which relies on every other public NPM package, resulting in millions of transitive dependencies.
It doesn’t seem PatrickJS realized the headache his troll would cause to some users. Two days after the prank packages were published, he created an issue and shared that he is unable to delete the packages since the NPM mechanism prevents deletion of published packages once they are being used by other projects and calls for help from NPM support team.
This act of digital mischief by PatrickJS echoes past incidents, highlighting ongoing challenges in package management and the cascading effects of dependencies within the NPM ecosystem. The situation underlines the comedic yet serious consequences of such pranks in the developer community.
BBEdit 15 is here
Most on the front end have probably never heard of this editor, but it is still alive and kicking. It was the bomb back in the mid-late 90s with its built-in FTP function. No builds, no pipelines, your deploy was editing files directly on the server and if you were lucky, you had one dev/staging server.
Shoelace: A forward-thinking library of web components.
- Works with all frameworks
- Works with CDNs
- Fully customizable with CSS
- Includes a dark theme
- Built with accessibility in mind
- First-class React support
- Built-in localization
- Open source