Editor's Pick
Mastering DOM manipulation with vanilla JavaScript
Whether you're developing or using a web component in any framework, you need to work with the DOM at a certain level. Knowing the browser DOM APIs and how to use them is crucial to web development. A website that introduces the APIs, highlights common problems, and provides answers to popular questions can be incredibly useful.
That's why I've put together this collection of resources:
- No external libraries, just native browser APIs
- Small, easy-to-understand examples
- Live demos
- Tips and best practices included
- Real-life use cases
- Works with modern browsers
CSS
Pure CSS Neural Network / AI...it's easier than you think
No, you didn't read that title wrong. It is possible to build a neural network in pure CSS.
However, training that neural network is next to impossible (with CSS) due to limitations on how many calc() statements you can have that rely on previous ones. So we won't do that here.
Now, the point of this article is not to advocate for building neural networks in CSS (you shouldn't), but instead to introduce you to a couple of CSS tricks I had to use to get this to work.
Control Pixel Art Sprites With CSS Scroll-Driven Animations
These fancy, new, CSS scroll-driven animations are proving to be pretty darn powerful. I found Bramus' concept of using them to detect scroll direction intriguing, and after experimenting a bit, discovered that detecting multiple axes allows you to directionally control an image sprite! Without JavaScript! This involves creating stepped sprite animations for each direction and running them when that direction is detected.
Star Wars Scene Transition Effects in CSS
You know those wipe transitions between scenes in Star Wars movies? Have you ever thought it would be awesome to recreate them with CSS? Probably not, but, well, here we are.
Surprising Facts About New CSS Selectors
I went down a bit of a rabbit-hole recently learning about CSS Nesting, specifically regarding the new & selector. I heard that it behaves like the :is() selector, and in the course of researching, I learned a lot about how these new selectors work.
The first thing to know is that is() and its siblings :not(), :has(), and :where() are a new type of selector called functional pseudo-classes. We’ve had simple pseudo-classes like :hover for a long time, but the ability to pass a selector list as a parameter is what distinguishes these four into a new category.
JavaScript
The nuances of base64 encoding strings in JavaScript
Understand and avoid common problems when applying base64 encoding and decoding to strings.
Things you forgot (or never knew) because of React
If you don't often look beyond established comfortable defaults, you might be surprised to learn just how far the world of frontend has moved away from React, and how big that gap continues to grow.
Mastering DOM manipulation with vanilla JavaScript
Whether you're developing or using a web component in any framework, you need to work with the DOM at a certain level. Knowing the browser DOM APIs and how to use them is crucial to web development. A website that introduces the APIs, highlights common problems, and provides answers to popular questions can be incredibly useful.
That's why I've put together this collection of resources:
- No external libraries, just native browser APIs
- Small, easy-to-understand examples
- Live demos
- Tips and best practices included
- Real-life use cases
- Works with modern browsers
re-re-reselect — Simplifying React state management
Complex web applications have complex state management solutions. And managing those solutions - and especially their interactions with each other - is hard! Here at Causal, we were running into this problem more and more as our frontend grew and sources of truth proliferated. So we decided to build a solution from the ground up that allows reading from and subscribing to multiple stores with one simple interface. In this blog post, we’ll explain the problem we set out to solve, describe our solution, and look under the hood at how we’ve optimized it to be better than useSelector.
Scrapy Javascript Rendering: The 4 Best Scrapy Libraries to Scrape JS Heavy Websites
In this guide we will go through the best javascript rendering libraries for Scrapy so you can scrape modern websites with ease.
dflex: The sophisticated Drag and Drop library you've been waiting for
DFlex is a Javascript library for modern Drag and Drop apps. It's built with vanilla Javascript and implemented an enhanced transformation mechanism to manipulate DOM elements. It is by far the only Drag and Drop library on the internet that manipulates the DOM instead of reconstructing it and has its own scheduler and reconciler.
Headless Component: a pattern for composing React UIs
As React UI controls become more sophisticated, complex logic can get intertwined with the visual representation. This makes it hard to reason about the behavior of the component, hard to test it, and necessary to build similar components that need a different look. A Headless Component extracts all non-visual logic and state management, separating the brain of a component from its looks.
Miscellaneous
10 hard-to-swallow truths they won't tell you about software engineer job
Last weekend I had a chance to talk with some students who just got their degree. They are pursuing their first software engineer job. In conversation with them, I learned that they have a pretty wrong perception of this job. This is because the reality for these new kids is so skewed.
HTTP Archive: Page Weight
This report tracks the size and quantity of many popular web page resources. Sizes represent the number of bytes sent over the network, which may be compressed.
You can select a start date as far back as November 2010 and an end date as recent as last month.