This is JS (and) Crafting #11 - December 11th, 2023. Every Monday you will receive a hand-selected collection of links about JavaScript and how to craft better software.
This is JS (and) Crafting #10 - December 4th, 2023. Every Monday you will receive a hand-selected collection of links about JavaScript and how to craft better software.
Layouting a site with CSS is initially easy. It becomes fun and more difficult when it shall become responsive, when you have a special design in mind and when one browser does not work as expected.
The site Solved by Flexbox
by @philwalton
is a great resource where he shows six major use cases and describes the solutions.
I am working on the <pico-viewport-stats> element
examples. The web site is a simple HTML page, which I stripped down to the bare minimum. A bit too much!
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.
: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.
writing-mode Property
MDN says
about CSS property writing-mode:
Below, I use the aliases grid-template-rows and grid-template-columns for grid-template:
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.
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.
This is JS (and) Crafting #6 - April 3rd, 2017. Every Monday you will receive a hand-selected collection of links about JavaScript and how to craft better software. Let's get started ...
This is JS (and) Crafting #5 - March 27th, 2017. Every Monday you will receive a hand-selected collection of links about JavaScript and how to craft better software. Let's get started ...
This is JS (and) Crafting #3 - March 13th, 2017. Every Monday you will receive a hand-selected collection of links about JavaScript and how to craft better software. Let's get started ...
Myth - a simpler alternative to all the CSS transformers out there?