• Posted on

    Browsing the web - Learn web development | MDN

    I really like this explanation of what happens in between the user entering a web address into the browser and the browser displaying the result.

    1. The web browser requests the resource you want to access from the web server it is stored on.
    2. If the request is successful, the web server sends a response back to the web browser containing the requested resource.
    3. In some cases, the requested resource will then fire off more requests, which will result in more responses.
    4. When all of the resources have been requested, the web browser parses and renders them as required, before displaying the result to the user.

  • Posted on

    Just like a word document can be displayed in a word processing application, a web page is simply an HTML document that can be displayed in a web browser. The only difference is that a web page can embed a variety of different types of resources such as styles, fonts, images, scripts, and so on.

  • Posted on

    Ana Tudor wrote on Mastodon:

    Stupid #CSS question because I’m losing my mind here: why isn’t calc(.5*a) working? What am I missing? It doesn’t seem to be working in any browser.

    Ana is trying to use calc(.5 * a) as a part of the relative color syntax, presumably to create semi transparent outlines. But it is not working because calc(.5 * a) is an invalid property value. As Valtteri Laitinen replied, it should actually be alpha in there instead of a.

    .class {
      outline-color: rgb(from currentcolor r g b / calc(0.5 * a)); /* ❌ invalid */
      outline-color: rgb(
        from currentcolor r g b / calc(0.5 * alpha)
      ); /* ✅ valid */
    }

  • Posted on

    I was reading Manuel Matuzovic’s article on meta theme color and came across this snippet:

    index.html
    <style>
      :root {
        --theme: blue;
      }
    </style>
    <meta name="theme-color" content="var(--theme)" />

    I wish it was possible to access custom properties outside the <style> tag in the <head>. It would keep things DRY.

  • Posted on

    Sorting strings that contain numbers in JavaScript

    Recently, I was reading Jan Miksovsky’s article on how he built a basic static site generator using plain JS with zero dependencies.

    While exploring the source code, I noticed the following bit of code:

    // For sorting in natural order
    const naturalOrder = new Intl.Collator(undefined, {
      numeric: true,
    }).compare;

    I was totally unaware of the Intl.Collator API and that it can be used for sorting. This sent me down a bit of a rabbit hole.

    I learned that my mental model of how JavaScript’s default array sort() works is wrong. I also learned a counter-intuitive detail about its behavior with numbers. But, most importantly, I learned about better ways to handle sorting correctly in JavaScript, including the neat Intl.Collator API that Jan’s code led me to discover.

    Consider the following array of numbers:

    const array = [9, 8, 7, 60, 5];
    array.sort();

    Now, what do you think is the result?

    As someone who is not a JavaScript expert, I thought the output would be the following:

    Terminal window
    [5, 7, 8, 9, 60]

    I was wrong. The correct output is the following:

    Terminal window
    [5, 60, 7, 8, 9]

    Now, it was important to understand why I was wrong.

    The default sorting behaviour

    By default, when no compare function is provided, the sort() method converts each element into a string and then compares these strings character by character based on their sequences of UTF-16 code unit values. (JavaScript strings use the UTF-16 character encoding).

    When we sort the array in my example using the default sort(), the numbers are first converted to strings. Then, the comparison starts with the UTF-16 code unit value of the first character of each string. The character ‘6’ in ‘60’ has a UTF-16 code unit value of 54, which is lower than the code unit values for ‘7’ (55), ‘8’ (56), and ‘9’ (57). The rest of the string (‘0’ in ‘60’) is only considered if the first characters are the same. This is why ‘60’ appears before ‘7’, ‘8’, and ‘9’ in the sorted output.

    "5".charCodeAt(0); // Output: 53
    "60".charCodeAt(0); // Output: 54
    "7".charCodeAt(0); // Output: 55
    "8".charCodeAt(0); // Output: 56
    "9".charCodeAt(0); // Output: 57

    Sorting Numbers Correctly

    If you are specifically sorting an array that contains only numbers, the standard way to achieve correct numeric sorting is to provide a simple compare function:

    const numbersArray = [9, 8, 7, 60, 5];
    numbersArray.sort((a, b) => a - b);
    

    // Output: [5, 7, 8, 9, 60]

    This compare function subtracts b from a. If the result is negative, a comes first. If positive, b comes first. If zero, their order doesn’t change relative to each other. This correctly orders numbers based on their mathematical value.

    Natural Sorting with the Intl.Collator API

    However, the simple (a - b) approach works reliably only for pure numbers. What about sorting strings that contain numbers, like filenames? This is where the Intl.Collator API with the numeric: true option shines. It provides the natural sorting behavior that correctly handles numbers alongside other characters.

    const naturalOrder = new Intl.Collator(undefined, {
      numeric: true,
    }).compare;
    

    // Note: Passing `undefined` as the locale uses the default locale of the browser's runtime.
    // You could specify a locale string like 'en-US' here if needed.
    

    const array = [9, 8, 7, 60, 5];
    array.sort((a, b) => naturalOrder(a, b));
    // Output: [5, 7, 8, 9, 60]

    By passing the compare method of the Intl.Collator instance to sort(), we override the default string comparison. The Intl.Collator object, configured with numeric: true, knows how to compare ‘60’ and ‘7’ such that 60 is treated as a single number and correctly placed after 7, 8, and 9.

    This API is incredibly useful for sorting strings that contain numbers in a human-expected way, such as lists of filenames like IMG_1.png, IMG_2.png, IMG_10.png, IMG_20.png.

    const files = ["IMG_2.png", "IMG_1.png", "IMG_10.png", "IMG_20.png"];
    files.sort();
    // Output: ['IMG_1.png', 'IMG_10.png', 'IMG_2.png', 'IMG_20.png']
    

    files.sort((a, b) => naturalOrder(a, b));
    // Output: ['IMG_1.png', 'IMG_2.png', 'IMG_10.png', 'IMG_20.png']

    How numeric: true works under the hood

    When numeric: true is set, the collator detects numeric substrings inside the strings and parses those substrings as actual numbers, not as sequences of digits. And then it compares the numbers numerically, not character by character.

    Conclusion

    For simple numeric arrays, (a, b) => a - b is your go-to. For more complex natural sorting needs with strings containing numbers, the Intl.Collator API provides a robust and locale-aware solution.

  • Posted on

    Missed Connections - Jim Nielsen’s Blog

    Jim Nielsen on the personal connections formed on the internet.

    You could search the world and find someone who saw what you see, felt what you feel, went through what you’re going through.

    And how these connections are increasingly being lost when we prompt an impersonal LLM instead.

  • Posted on

    Today I learned, grid-auto-columns and grid-auto-rows size implicit tracks as well as any explicit tracks that are not explicitly sized by by grid-template-rows or grid-template-columns.

    Until now, I was under the impression that grid-auto-rows and grid-auto-columns size only implicit grid tracks.

  • Posted on

    Why is `grid-row: 1/-1` not working?

    The grid-row grid-placement property is shorthand for grid-row-start and grid-row-end.

    .grid-item {
      grid-row: 1/-1;
      /* is equivalent to */
      grid-row-start: 1;
      grid-row-end: -1;
    }

    In the above declaration, we use integers to position and size the grid item by line numbers.

    As per the spec:

    Numeric indexes in the grid-placement properties count from the edges of the explicit grid. Positive indexes count from the start side (starting from 1 for the start-most explicit line), while negative indexes count from the end side (starting from -1 for the end-most explicit line).

    The important bit is the explicit grid. This begs the question …

    What is the explicit grid?

    As per the spec:

    The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container by specifying its explicit grid tracks.

    Simply put, the explicit grid consists of manually defined rows and columns.

    The size of the explicit grid is determined by the larger of the number of rows/columns defined by grid-template-areas and the number of rows/columns sized by grid-template-rows/grid-template-columns. Any rows/columns defined by grid-template-areas but not sized by grid-template-rows/grid-template-columns take their size from the grid-auto-rows/grid-auto-columns properties. If these properties don’t define any explicit tracks the explicit grid still contains one grid line in each axis.

    That last bit is what leads to line -1 being the same line as 1 because the explicit grid still contains one grid line in each axis.

    What is the implicit grid?

    As Manuel Matuzovic puts it:

    If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid.

    Conclusion

    Paraphrasing Jen Simmons:

    • -1 is the last line of the explicit grid
    • If you haven’t defined any explicit rows, then all your rows are implicit
    • For implicit rows, -1 is the same line as 1
    • Define explicit rows and grid-row: 1/-1 will work as expected

    Further Reading

  • Posted on

    Why Swiss Trains are the Best in Europe - YouTube

    I love this bit from the video where Jason quotes Enrique Peñalosa, the former mayor of Bogotá, Colombia:

    A developed country is not where the poor have cars. It’s where the rich use public transportation.

    But why is it important that wealthy people take public transportation? Because, as Jason mentions,

    […] for better or for worse, these people are likely to have the power and political influence to demand efficient service.

  • Posted on

    Just Build Websites - Jim Nielsen’s Blog

    Jim Nielsen uses his experience with golf as a metaphor to explain that the key to success in web development comes from actual practice — building websites — rather than obsessing over what tools, frameworks and technologies others are using.

  • Posted on

    Personal branding is like your credit score

    Personal branding is about bringing focus to your touchpoints with the world (of strangers) so that the right kinds of people can find you and remember you. You make use of the attention when you really need it. But it is good to be in the consideration set.

  • Posted on

    Crowdstruck (Windows Outage) - Computerphile - YouTube

    Dr. Steve Bagley explains in layman’s terms what an operating system is:

    […] Imagine the difference between a house and a hotel. If you own a house, you can decide how to use the rooms, what color to paint the walls. But if that house becomes a hotel, you might give people the option to change the air conditioning temperature, but you wouldn’t let them fit air conditioning into their room without permission from the building owner. And it’s a bit the same with a computer. The operating system is a bit like the people who run the hotel in that it’s controlling all the resources for the system. So if Microsoft Word crashes, these days it’s not going to take down your computer because the operating system is set up in such a way that it can access resources that have been assigned to it and clean that up, and everything else continues hunky-dory.

    And what happens if the operating system crashes and you get the blue screen of death (BSoD):

    At that point, the thing that’s in charge of controlling everything has gone wrong, is corrupted, and can no longer run. So there’s pretty much no option at that point other than to halt the machine, say something’s gone wrong, and let the user reboot and restart.