#web
Cancel a fetch request using AbortController
Finally I learned how to abort a fetch, see the post
React useEffect and fetch API
by @Jaime.
Continue reading →
Articles tagged with #web (31)
#react
React: Hooks vs. Saga
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.
Continue reading →
#HTML
CSS Preloading - Superior To Bundling?
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.
Continue reading →
#HTML
HTML Element <dfn>
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.
Continue reading →
#tools
Learning nginx
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.
Continue reading →
Resource Timing - Part 3 (Waterfall Chart)
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.
Resource Timing - Part 2 (Loading Dependencies)
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.
Resource Timing - Part 1 (The API)
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.
#learning
Tim Berners-Lee about WWW
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.
Continue reading →
#web
Web API ValidityState
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.
Continue reading →
#javascript
NodeJS Architecture Applied
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!
Continue reading →
CSS - rem and em
[this is a draft]
Which unit to use, rem, em or even px (just to mention the most common units) when writing CSS seems to be an ongoing discussion. For people entering the space of web development the hurdle just gets higher, the complexity is continuously growing. There are
more units than ever, I counted 21, there is more sites to learn from. It is not easy to figure out where and how to start.
I will try to analyze this a bit applying what I know and have learnt over the last 25 years of web development.
#web
Pseudo-Class :defined Under the Hood
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.
Continue reading →
#web
HTML Elements not Upgradable to CBEs
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.
Continue reading →
#web
CSS writing-mode Property
MDN says
about CSS property writing-mode:
Continue reading →
#javascript
Lets Make the JavaScript World Accessible (Again)
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?
Continue reading →
Learning CSS Grid - 2???? [this is a draft]
Below, I use the aliases grid-template-rows and grid-template-columns for grid-template:
Learning CSS Grid - Basics [this is a draft]
Finally I need a CSS grid. Here is my intro to it. If you prefer a video this one (28 minutes) explains grid basics very well. But before learning CSS grid, I need to answer the question if I need it. I know flexbox quite ok, so why not use flexbox.
#javascript
hq - Static Server, No Bundling
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.
Continue reading →
#web
Learning reddit
I posted the following on reddit, finding out that the bot does not permit it. Read how I discovered reddit, finally.
Continue reading →
#a11y
Disclosure Widgets - by Adrian Roselli
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
#web
How Does JavaScript Behave when Cookies are Disabled?
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.
Continue reading →
#web
Setting a Cookie: use Max-Age!
@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.
Continue reading →
#web
The Unicode Character for the Hamburger Menu Icon ☰
In short ☰ <!-- 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
#javascript
Deno 1.0, TypeScript 3.9
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/
Continue reading →
#web
Clone Behavior of <script> Tag
I wanted to scriptNode.cloneNode(true) and expected it to re-evaluate the JS of the node, but it didn't.
Continue reading →
#web
CSS Reset
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.
Continue reading →
#web
Learned From "Don't Make Me Think"
The things I took away for me until now, while I am still reading the book:
Continue reading →
#web
We don’t give people a website any more
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.
Continue reading →
#web
The History of the Web
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.
Learn about URL parsing in real life 📺
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 ...