Tagged with #web

Finally I learned how to abort a fetch, see the post React useEffect and fetch API by @Jaime.

I am currently working on a React Native app that uses redux saga heavily. My main concern with it is the traceability of code that goes together, the modularization. It is hard, if not impossible to know what belongs together, what is needed in combination with what.

Do you want to speed up CSS file loading? Do you also see this waterfall chart in the Network Tab of your DevTools? There is a simple measure to help the browser optimize loading assets. Preload them.
I think it is superior to bundling. It is less complex and has better caching behavior.

HTML is getting more and more semantic it seems. I am seriously wondering what this means for building things like a blog, like this one here. It becomes more and more reasonable to write pure HTML, instead of markdown, doesn't it? Maybe I am just late and just learned about some HTML elements now. What a shame.

Until today I was just a copy+paster of nginx configs. I thought I had my share back when I learned and undestood apache very well, so why learn another one. But my nextcloud setup and letsencrypt that comes with it has an nginx "bundled", so I would like to understand things a bit better. So I started reading the docs and will take my notes here.

This is post #3 in the category "Browser Tools", focusing on understanding the loading times by charting them in a Waterfall chart. In part 1 and part 2 about Resource Timing I covered the attributes startTime, responseEnd, duration and initiatorType. Now I want to understand what happens after a resource starts loading and what do some attributes mean, like fetchStart, requestStart and responseStart, to mention the most relevant ones.

This is post #2 about Resource Timing, with a focus on understanding loading dependencies. In part 1 "Resource Timing - The API" I covered the attributes responseEnd and startTime. Now I will try to show how the API can be used to see which resources block each other, which is the step to understand before optimizing site speed, a very essential step to know what is the right thing to optimize.

I want to explore the Resource Timing API, one of the Performance APIs, accessible via window.performance in all modern browsers.
This post is the start of a series of blog posts about browser tools, in which I look into any kind of tools or APIs in and around the browser, things web developers will hopefully find useful.

Actually Sir Tim Berners-Lee put the headline "Answers for Young People" above this article, but this is by far not only for the younger people. I can highly recommend to read it.

It was the @standardsbot that made me learn and look up ValidityState. While that bot tweets weird stuff, there is always a learning in it. This time it was about ValidityState.

The article Node.js, Dependency Injection, Layered Architecture, and TDD: A Practical Example, Part 1 by @Carlos González gives a very good introduction of how to structure a (TypeScript/JavaScript) app. He links articles that allow one to dive deeper into underlying concepts and still explains the big picture very well. Great job Carlos!

The CSS pseudo-class :defined is for defined (custom) elements, sure. But what does "defined" really mean? While reading about upgrading CBEs I came across the definition for it. Let me quote the DOM spec a bit.

More HTML provides a CBE (Customized Built-in Element) for upgrading heading tags such as H1, H2, ... to render a link-icon beside them, as many know it from github readme files.
I wanted to upgrade all picostitch sites automatically by just including a <script> which upgrades all headings on the page and adds this functionality.
It is not possible to upgrade a parsed and rendered element (like an H1) afterwards.

MDN says about CSS property writing-mode:

Lea's article Today’s Javascript, from an outsider’s perspective states yet another time that our JavaScript environment needs a reboot. I also mentioned the topic a couple of times. But what shall we do?

Lately I am coming a across a couple of those tools that promise to remove the bundling overhead and pain from our projects. I already mentioned snowpack.

I posted the following on reddit, finding out that the bot does not permit it. Read how I discovered reddit, finally.

A disclosure widget is a simple control whose sole purpose is to hide or show stuff. See his article for very in depth content on how to use <details> and <summary> tags. https://adrianroselli.com/2020/05/disclosure-widgets.html

With latest privacy awareness I believe cookies are also one sensitive topic. I have no numbers, but I guess there are more people who have cookies disabled then we believe. If not, I learned something here.

@Peter Coles wrote "HTTP Cookies: What's the difference between Max-age and Expires?" in 2009, but he has updated the article later and there is the answer for wether to use "expires" and/or "max-age" when you set cookies.

In short &#9776; <!-- Results in ☰ -->
See it in use, here is the commit I just made for this site. Look at the bottom right or top left on smaller screens. found at https://www.abeautifulsite.net/the-unicode-character-for-menu-icons

TypeScript 3.9 was released. Since I am basically a fan of making code safer and better to understand, that's what I use types for, I see nothing interesting to me in this release. But I also use TypeScript in a much simpler way than the cracks and fans. https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/

I wanted to scriptNode.cloneNode(true) and expected it to re-evaluate the JS of the node, but it didn't.

First search result for "CSS reset" is by the mighty Eric Meyer https://meyerweb.com/eric/tools/css/reset/ from quite some time ago. And looking up the source of his site I see the reset is not really included, also no modified version as far as I saw it. Next I came across https://cssreset.com/what-is-a-css-reset/ which nicely explains the whys and also states the cons. Unfortunately the latter article is missing a date, so I can't say how old this knowledge is. That's why I was so very keen on having all items properly dated on my blog.

The things I took away for me until now, while I am still reading the book:

The headline is a quote from Hammer and Nails by Stuart Langridge where he states how we make every user's browser a "fat client" (I called it that) by making them work far beyond rendering some HTML+CSS.

In October 17, 1990 IMDb started as a unix script.
December 25, 1990 Tim Berners-Lee releases WorldWideWeb (later Nexus) on Christmas day, the first ever browser for the web.
August 6, 1991 Tim Berners-Lee responding to a thread on the alt.hypertext Usenet newsgroup, publicly announces the World Wide Web project for the first time. The History of the Web has so interesting stuff. Very worth a read. A great site to spend a lot of time on.

There is a uXSS bug in Chrome on iOS, which is actually a WebKit bug. But Chrome fixes it on iOS by crashing the browser, because this was the fastest way to fix it. Alright ...