This post will cover a technique to style adjacent siblings using CSS selectors and the :has pseudo-class as described in Selecting Previous Siblingshttps://frontendmasters.com/blog/selecting-previous-siblings/ by Chris Coyier. The idea is that we style the target elements using nested selectors, and then use universal selectors, the parent selector and the has pseudo-class to style the adjacent selectors in both directions. This is the basic structure for the page: css .card { &:hover { / Styles for the card being hovered / / next card / & + { } / next card after that / & + + { } / previous...
When it comes down to printing web pages we haven't had much control over the output. The browser would just render the page as it is and print it. But with the introduction of CSS Paged Media, we can now control how the page is rendered when printed. This post will cover how to use CSS Paged Media to control the layout of the printed page and some tricks to make the printed page look better. How does Paged Media Work? CSS Paged Media is a module of CSS that defines how documents are formatted for print or other types...
When they were first introduced in ES6/ES2015, Template Literalshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Templateliterals created a new, easier IMO, way to produce strings of text, either on their own or interpolated with variables. Tagged template literals let you parse a template literal with a function. This further enhances This post provides a brief overview of template and tagged template literals and cover String Literals and Tagged String Literals Review of String Concatenation When Javascript was first introduced, strings were created by manually concatenating strings and variables. For example: js const firstName = 'John'; const lastName = 'Wick'; const fullNameCoolness = firstName + ' ' +...
HTMXhttps://htmx.org/, or Hypertext Markup Extensions, is a JavaScript library that allows developers to build web applications using HTML instead of JavaScript. It was created by Carson Gross and was initially released on November 24, 2020. You can integrate HTMX into an HTML document by adding a script tag that links to the HTMX library. HTMX extends HTML with custom attributes that allow developers to: Access AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in HTML Dynamically update web pages Insert server responses into specific parts of a web page without redrawing the entire page HTMX uses HTML attributes to: Swap...
Style tokens, also known as design tokens, are named, reusable values that represent design elements like colors, fonts, spacing, and other visual attributes within a design system, allowing for consistent application of styles across different platforms and codebases by replacing static values with descriptive names; essentially, they act as a centralized repository for design decisions, ensuring uniformity throughout a product. This post will look at whether design tokens are still relevant, how to generate them with Style Dictionaryhttps://amzn.github.io/style-dictionary// and how to use design tokens in a PostCSS workflow. Why use design tokens? For smaller bespoke projects, design tokens may seem...
Splitting.jshttps://splitting.js.org/ is a JavaScript library that splits text into characters, words, and lines. It can be used to create interesting text animations and effects. However, there are times when it can be overkill since we don't always need the full functionality it provides. This post will show you how to split text into characters using Javascript and how you can use this technique to style characters individually. Splitting text into characters Rather than manually wrapping each character in a span tag, we can use Javascript to split the text into characters and wrap each character in a span tag. We...
It All Led to ‘Dune’https://www.indiewire.com/p/denis-villeneuve-career-lookback-interview/ is a very interesting and challenging page to dissect. It has many different elements and APIs that can be used to create a similar page. In this post, we will go through the different elements and APIs that can be used to create a similar page. General Observations The most intersting aspect of the page is that it uses WordPress as a CMS so deciphering the added complexity is a very interesting exercise. It also appears that the site is using Animate On Scrollhttps://wordpress.org/plugins/animate-on-scroll/ WordPress plugin and the corresponding JS library,the full site editor and,...
It appears that the CSS Working Group has decided to add masonry layouts as part of the CSS Grid Level 3https://drafts.csswg.org/css-grid-3/ specification. IMO this sucks but it appears to be a done deal that will hurt developers in the long run but, since it's a done deal it's time to move forward and learn how to work with it. Before we look at the details of how to work with the new masonry layout, I'll take a brief detour and explain why I think it's a bad idea. Why I think it's a bad idea In Help us choose the...
For the most part opening and reading files synchronously in the browser is not a big deal since the files are seldom large enough to cause any performance issues and reading from the local file system is faster than downloading from the web or external resources. When working in certain types of applications it may be better to work with streams since we can't know how large the files users will upload to the application are and that may block the main thread can cause perceived performance issues. This post will revisit the file system access API code from a...
Node.js has always supported Common.js as the module system. When building a package we use modules.export to define the elements in the package that can be consumed by other modules: js // file: myMath.js function adda, b { return a + b; } modules.exports = add; This is the traditional way of defining modules in Node.js: js const add = require'myMath'; Ecmascript developed a module system as a standard way to import and export When building a package we use export to define the elements in the package that can be consumed by other modules: js function adda, b {...
