1 Line of Spec a Day

Xaver Fleer — Fri, 18 Jun 2021 21:44:44 +0000

...keeps JavaScript guesswork away.

Why?

JavaScript is a wonderful language. Also a horrible one. Telling enough: Douglas Crockford's seminal book JavaScript the good parts contains many pages on The Bad Parts and The Aweful Parts.

Life is too short for guesswork what JavaScript does and for hoping it to do the right thing. On my quest to mastery I start a new challenge: Reading (at least) 1 line of Spec a Day.

How long will it take?

The spec has about 30 000 characters. Divide this by 60 characters per line leads to 500 days. This is 1 year 4 months and 15 days. Of course, I can read more than just one sentence a day to speed the process up. But the goal is just 1 line per day.

Why just one line?

Big tasks are hard to master. Perseverance is key. If I want to finish reading the spec I need to make reading a habit. This can only either achieved by strong willpower (which is difficult for me as father of a newborn) or by starting it gradually with a minimally exhausting task per day (it is hard for me to argue that 1 line of code is too much to read at any given day)

What are my main learnings?

It's actually possible to read the whole spec in a reasonable amount of time.

#1LineOfSpec #1/N

How I Use CSS Grid for Sticky Headers

Xaver Fleer — Wed, 07 Oct 2020 20:30:28 +0000

Adam Racki's great blog post made me realize that it is possible to use display: grid to create sticky headers. As much as the contribution inspired me, it also confused me (why all this complexity in the code examples??). Here is what I took from it:

Sticky headers traditionally get positioned with display: absolute; or display: fixed;.
While this does work, there is a much more elegant syntax with display: grid.

Demo:

Code

HTML

<!DOCTYPE html>
<html>

<head>
  <title>Sticky Header</title>
  <meta charset="UTF-8" />
</head>

<body id="wrapper">
  <h1 id="sticky">A Panda Bear</h1>
  <main id="scroll-element">
  <img alt="A panda bear" height="500px" src="https://images.unsplash.com/photo-1526716121440-dc3b4f254a0a"/>
  </main>
</body>

</html>

CSS

#wrapper { height: 500px; display: grid; }
#scroll-element { overflow: auto; }

What's the magic?

tbh, there is none (as with everything you understand).

Really, what's going on?

Together the heading and the content are larger than what can be shown at once. The image is stands for lot of content. It has a fixed (large) height.

The CSS rule overflow: auto; allows the browser to scroll the id="scroll-element".

The header with id="sticky" is always completely shown since the id="scroll-element" can shrink and overflow.

That's it.

DEV Community: Xaver Fleer