Editor's Pick
Look ma, no React! Why I recoded my portfolio site with vanilla everything
A developer needs a website to prove they can build a website. A new dev might feel tempted to "flex" their bleeding edge skills to the market by showing they can make websites with modern tools like React, Gatsby, Next, headless CMS, SCSS and Tailwind. In reality it is more of a flex in this SPA era to show you know how to make a website the old-fashioned way.
Note: editor's pick is not a sponsored or paid post in any way.
CSS
Scroll progress animations in CSS
Scroll-driven animations are coming to CSS! In this post, we'll look at a few types of animations and learn how to link them to the scroll progress of a container.
Note: The features in this post here have limited browser support at the time of writing. It's best to use Chrome Canary but you can also enable experimental features in Chrome 115 or later to follow along with the examples.
Writing CSS In 2023: Is It Any Different Than A Few Years Ago?
CSS is evolving faster than ever. With all of the new features that are now available — and forthcoming — since we got Flexbox and Grid years ago, the way we write CSS is evolving, too. In this article, Geoff Graham shares which features have had the most influence on his current approaches to CSS, as well as those that have not (at least yet).
No CSS Club
The modern web is literally Satan and will probably eat your first-born child if we don't do anything about it, and quick! (had to increase the hyperbolism from the other websites; interestingly, the NoJS Club, which until now has arguably been the most radical of *.clubs, does not have much hyperbole, which really is a shame).
To do what the Web was initally intended for (that is, make information accessible via the Internet), all you need is to serve HTML documents. If you need "style" that just means you're trying to cover up your lack of interesting information.
The new @font-face syntax
Using variable fonts and color fonts with @font-face. The new @font-face syntax has been supported since Safari 17, Firefox 106 and Chrome 108.
chota - a micro CSS framework
- Super light-weight. Just ~3kb (minified + gzipped).
- No preprocessor, just plug-n-play
- Magical 12 column grid
- Easy to extend with CSS variables
- Comes with a handful of components & utilities
- Good Semantics
- Easy dark mode switch
- Supports icons out-of-the-box
Lightning CSS - an extremely fast CSS parser, transformer, bundler, and minifier
Lightning CSS is over 100x faster than comparable JavaScript-based tools. It can minify over 2.7 million lines of code per second on a single thread.
JavaScript
AnimateReactNative.com - Premium and Custom React Native animations
Why spend hours reinventing the wheel when you can leverage our extensive collection of animation components? Whether you're looking for eye-catching effects, smooth transitions, or interactive elements, we've got you covered. From basic animations like fades and slides to more advanced ones like parallax and particle effects, you'll find a diverse range of options to choose from.
Canvas-Txt - Multiline text on HTML5 Canvas
A miniscule library to render text on HTML5 Canvas with ZERO dependencies.
- Multiline text
- Auto line breaks
- Horizontal Align
- Vertical Align
- Justify Align
- Easy Debugging
- Improved Performance
awesome-nodejs - Delightful Node.js packages and resources
Curating the best Node.js modules and resources.
Angular Signals & Observables: Differences
Angular 16 brought a new (for Angular) reactivity primitive, and Angular Signals will be, unavoidably, compared to Observables. I’ll highlight their differences.
Mastering React Context API in 2023: Best Practices and Examples
React Context API is a feature in React that provides a way to share data between components without passing the props down manually at every level. It allows you to manage global states in your application and avoid prop drilling.
Mastering React Context API in 2023 is essential for building scalable and efficient applications. It simplifies state management and reduces the complexity of passing data between components.
Coding Randomized Zelda Patterns
The new Zelda game uses repeated patterns to build a cohesive world. Let's write code to generate these patterns and then print them with a robot!
Awesome SvelteKit
79 Awesome Examples of SvelteKit in the Wild.
Whereas Svelte is a component framework, SvelteKit is an app framework (or "metaframework", depending on who you ask) that solves the tricky problems of building something production-ready.
How React 18 Improves Application Performance
Learn how React 18's concurrent features like Transitions, Suspense, and React Server Components improve application performance.
React 18 has introduced concurrent features that fundamentally change the way React applications can be rendered. We'll explore how these latest features impact and improve your application's performance.
ArrowJS - Reactive interfaces with no build tools & native JavaScript
ArrowJS is a tool for programming reactive interfaces using native JavaScript. It’s 2Kb, requires no build tools, has no virtual DOM, and is blazing fast.
Variable scope, closure
This article has a good explanation on how scope, closures and the Lexical Environment in javascript operates.
Tixy tutorial - Match visual patterns with Javascript
Learn Javascript logic, maths and expressions by solving puzzles in a simple visual grid
UX
web-toolkit - a web UI framework based on GTK's Adwaita theme
This is a web toolkit using GTK's default theme, Adwaita. The framework is currently usable but is to be considered in alpha state, as a few parts are still raw and the API is subject to change until the 1.0.0 release.
Direct demo link here.
Google is testing new Rewarded Ad Gate beta program for publishers
The program will give publishers an opportunity to monetize their most engaged users.
"If the user chooses not to view a short ad, they won’t be able to access the site until their page views reset the following month or they choose to view the ad."
Locking users out until they view an advert. Brilliant! This looks like a great way to get rid of a loyal audience on your website.
Miscellaneous
WordPress Playground - Experience a WordPress that runs entirely in your browser
How is this possible? Playground uses the latest, cutting-edge technologies to make the key WordPress dependencies work in JavaScript.
- PHP runs as a WebAssembly binary
- MySQL is replaced for SQLite via a WordPress plugin
- Web server is implemented in JavaScript as a Service Worker
Look ma, no React! Why I recoded my portfolio site with vanilla everything
A developer needs a website to prove they can build a website. A new dev might feel tempted to "flex" their bleeding edge skills to the market by showing they can make websites with modern tools like React, Gatsby, Next, headless CMS, SCSS and Tailwind. In reality it is more of a flex in this SPA era to show you know how to make a website the old-fashioned way.
the html review
Remember when the internet used to be creative and fun? Here are some poetic instruments, interactive fictions, illustrated essays, movable lyrics, linguistic gardens, and pixelated memories.
Software Development Job Postings on Indeed in the United States
Quite the pandemic hiring/firing wave.
Adobe-Alternatives - a list of alternatives for Adobe software
Originally collected by @XdanielArt and improved upon by the community. Feel free to open issues or pull requests, or create an image (for easy sharing) out of the data.
Forager - Browse Millions of Leaked API keys Found With TruffleHog
Trufflehog is an open-source secret scanning engine that detects sensitive credentials such as passwords and API keys – secrets that are inadvertently exposed by individuals and organizations.
Forager finds live API keys (verified with TruffleHog) finds the emails they’re associated with, and lets that company view the details of the exposure. You can also view redacted information for other companies in case you want to give them a heads up, but only they will be able to view the details.