Search
Styling a Web Component
8.1.2019
This confused me for a bit here so I'm writing it out while it's fresh in mind. Just because you're using a web component doesn't mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of your website. Like this:
See...
Making SVG icon libraries for React apps
14.12.2018
Nicolas Gallagher:
At Twitter I used the approach described here to publish the company’s SVG icon library in several different formats: optimized SVGs, plain JavaScript modules, React DOM components, and React Native components.
There is no One True Way© to make an SVG icon system. The only...
Collective #475
10.12.2018
CodyHouse Components * The State of Web Browsers * Goodbye, EdgeHTML * What is the Shadow DOM? * Pure CSS Pink
Collective #475 was written by Pedro Botelho and published on Codrops
An Introduction and Guide to the CSS Object Model (CSSOM)
10.12.2018
If you've been writing JavaScript for some time now, it's almost certain you've written some scripts dealing with the Document Object Model (DOM). DOM scripting takes advantage of the fact that a web page opens up a set of APIs (or interfaces) so you can manipulate and otherwise deal with elements...
Collective #474
6.12.2018
Pika * Shapy * A CSS Venn Diagram * ncc * Building a Simple Virtual DOM from Scratch * Screenshoteer * ForgJs
Collective #474 was written by Pedro Botelho and published on Codrops
Collective #471
26.11.2018
Progress-estimator * Felipe * Fibre * Electricity * Hue * What, exactly, is the DOM? * Essential TypeScript Types * Canvas Proximity Mask
Collective #471 was written by Pedro Botelho and published on Codrops
Collective #436
26.7.2018
Page Lifecycle API * Keyframes * Rockstar * Terminalizer * Malvid * Callback Exercises * DOM-wait * Pure CSS Stack * Weird things variable fonts can do
Collective #436 was written by Pedro Botelho and published on Codrops
Build a state management system with vanilla JavaScript
25.7.2018
Managing state is not a new thing in software, but it’s still relatively new for building software in JavaScript. Traditionally, we’d keep state within the DOM itself or even assign it to a global object in the window. Now though, we’re spoiled with choices for libraries and frameworks to help...
Adding Particle Effects to DOM Elements with Canvas
23.7.2018
Let’s take a look at how to make web pages more visually capable by combining the freedom of <canvas> with HTML elements. Specifically, we will be creating a basic HTML-to-particle effect, but the same technique could be used for many kinds of effects.
Before we begin, feel free to grab...
WDRL — Edition 235: Colorblind, Grid in IE, Service Worker Quota and Extending Native DOM Elements
13.7.2018
Hey,
The web continues to amaze me. With all its variety and different changes to the platform it’s hard to see a straight pattern, if there’s even (just) one. But it’s wonderful to see what is being changed, which features are added to the platform, which ones get deprecated, and how browsers...
Unused
11.7.2018
I recently wrote Here’s the thing about "unused CSS" tools, where I tried to enumerate all the challenges any tool would have in finding truly "unused" CSS. The overarching idea is that CSS selectors match elements in the DOM, and those elements in the DOM come from all sorts of places: your static...
How React Reconciliation Works
17.5.2018
React is fast! Some of that speed comes from updating only the parts of the DOM that need it. Less for you to worry about and a speed gain to boot. As long as you understand the workings of setState(), you should be good to go. However, it’s also important to familiarize yourself with how this...
Get a React Component by DOM Node
15.5.2018
Retrieving a React component’s DOM node is fairly simple from within the component itself, but what if you want to work backward: retrieve a component’s instance by DOM node? This is a task that the old Dojo Toolkit’s Dijit framework allowed with the dojo.byId method, so it made...
Managing Heading Levels In Design Systems
3.5.2018
Heydon Pickering looks into how to give a React component a certain heading (like <h1>, <h2>, etc.) depending on its context and thereby ensure that the DOM is still perfectly accessible for screen readers. Why is using the right heading important though? Heydon writes in...