Rather than using a third-party build system we can create our own custom system tailored to our requirements. This allows us to have more control over the build process and customize it to our needs. The following is the minimal set of required tasks: Watching for changed files using Chokidarhttps://www.npmjs.com/package/chokidar Typescript Babel Bundling with Rolluphttps://rollupjs.org/ PostCSS The post will discuss how to implement these tasks in a custom build system in w Node environment using Node 20.x, and how to enhance it further with additional tasks. Configuration files Before we start writing the build script, we need to set up...
Typescript is a superset of Javascript.It provides type checking and object-oriented programming features on top of Javascript. This post will explore Typescript and some basic areas: What it is How it works Installation Configuration Background Typescript is a superset of Javascript that adds type checking and additional features to Javascript. It is a statically typed language, the type of a variable is known at compile time. This allows for better error checking and code completion in an IDE and prevents many common runtime errors in Javascript front-end code. All valid Javascript code is also valid Typescript code but not all...
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...
