A few days ago, I was teaching Angular, and people asked me why I was doing this with my signals inside Angular services:readonly data = signal(‘value’).asReadonly();Why am I using read-only twice? Isn’t this redundant?First, let’s say I only do this:export class DataService {data = signal(‘value’).asReadonly();}Other components can inject that service, and the following is prevented, which is good if we want to ensure components can’t change the value of a Signal:export class AppComponent {data = inject(DataService).data;constructor() {// This doesn’t compile because our signal isn’t writabledata.set(“New value”);}But a developer could still break things and create all sorts of problems by doing…
Author: drweb
Last updated: November 15, 2023. It is often useful to get the current index value inside a loop. But the index value is not immediately available in a for…of loop. For example, trying to access the index value after the current value of the iterable being looped through causes an error to be thrown: const array = [“x”, “y”, “z”]; for (value, index of array) { // Uncaught SyntaxError: Invalid left-hand side in for-loop console.log(index); console.log(value); }; The solution is to transform the iterable from a simple iterable (no nesting) into an array of arrays, in which each nested array…
January 9, 2025 When we published our advice on the simplest and best way to take some static local files and make a proper online website out of them, we recommended Netlify. That holds true. But there is some trepidation, as once in a while you’d hear a horror story about usage blowing up unexpectedly and a user being stuck with a big bill. This is a problem not isolated to Netlify, but happened there too. That’s a scary prospect for anyone, as unlikely as it may be. So I think it’s notable that Netlify announced a free plan which…
Welcome to the stylish arena where CSS Grid and Flexbox, the two titans of CSS layout techniques, face off in a duel of elegance, efficiency, and flexibility. Whether you’re a budding web designer or a seasoned developer looking to brush up your skills, understanding the differences between these two powerful layout systems is essential. So, grab your popcorn, and let’s dive into this fun and informative comparison! Round 1: The Concept Corner CSS Grid: The Architect Imagine CSS Grid as the master architect of web layouts, offering a two-dimensional system that lets you manage both rows and columns with precision.…
Last updated: November 27, 2023. Want to know if an object is empty? With an array you can do this by checking the value of its length property. But this is not possible with an object: /* Checking if array is empty */ const array = []; console.log(array.length); // 0 const arrayIsEmpty = array.length === 0; console.log(arrayIsEmpty); // true /* Checking if object is empty */ const obj = {}; console.log(obj.length); // undefined const objIsEmpty = obj.length === 0; console.log(objIsEmpty); // false The problem with the above code that leads to the incorrect result for the object is length property…
January 21, 2025 Just in case you didn’t know, you don’t need a page to have ID’s on elements anymore in order to jump down to a particular place. We’ve reached support across all major browsers to link to Text Fragments, like: https://frontendmasters.com/courses/#:~:text=Web%20Performance%20Fundamentals%2C%20v2 The #:~: syntax is kinda funky, but here we are, and it’s not too hard to get your hands on: Chromium browsers have a “Copy Link to Highlight” option in the context menu when you right-click highlighted text. Cool People Link to Text Fragments — David Bushell What I’m just learning is that you can style the selected fragment…
Last updated: November 27, 2023. You can use the JSZip library to extract file data from a zip file. First, you need to import JSZip into your project, for example by inserting the following CDN link from cdnjs into your project before usage: The data is output in blob format, which contains the raw file data. The data could also come from a HTTP request. In the below example, data is extracted from a zip file acquired from a fetch request: fetch(‘./my_zip_file.zip’) .then(res => res.blob()) .then(data => { extractFiles(data); }); function extractFiles(inputFiles) { JSZip.loadAsync(inputFiles) .then(res => { for (key of…
Welcome to the racetrack of the web, where the race for speed is relentless, and the contenders are always gearing up for the next lap. In the world of web development, CSS (Cascading Style Sheets) has been a key player, defining the look and feel of websites since the dawn of digital aesthetics. But how has CSS evolved in terms of speed? Buckle up, as we dive into a journey through time, exploring the turbocharged evolution of CSS, without a single dance metaphor in sight. The Starting Line: The Early Days In the beginning, CSS was like a classic car:…
You know those One Time Password inputs? The UI is typically 4 or 6 numbers with individual inputs. Just from today… Here’s the UI the Safeway app uses in the Pharmacy section to log in. Here’s how Substack authenticates. Brad Frost was blogging about them recently. They certainly have some issue! Here’s one he spells out that I agree with wholeheartedly: I don’t like the pattern where each digit is its own text box. It’s an affordance that’s supposed to make things clearer, but it doesn’t (for me at least). Can I paste? Where do I paste? Is my paste going to…
Let’s dive into this magical world of CSS where we can create some truly eye-catching effects without needing to resort to any complex sorcery. Today, we’re exploring the holographic CSS effect. You know, that shiny, futuristic look that makes your website elements feel like they’re about to leap off the screen? Yep, that’s what we’re gonna demystify. The CSS Holographic Effect First off, the holographic effect in CSS is like the unicorn of web design. It’s not just about slapping on some glitter, it’s about creating depth, movement, and a touch of futurism, all while making sure it doesn’t look…