Today I learnt

To remember more of the little things I learn, I want to write them down. I'll update this page whenever I find something worth to log. Most of this will be around web development, but I don't want to limit myself to that. Let's see where this leads to.
  • Drawing with linear gradients

    In VirtualCoffee.io Frontend Friday Folks, we have to create divs that resemble a given image on CSSBattle.dev. Lately, I've tried to do the puzzles by styling them with background: linear-gradient(). When you find out a way how to draw it like that, it always feels like a hack of the puzzle itself.

  • srcdoc sets an iframes doctype implicitly, Quirks mode expands the body height

    When working on the Puzzle iframe for the Frontend Friday Folks, I had trouble centering the image. I had the same code result in the Chrome Dev Tools as in CSSBattle.dev, when inspecting the elements, so I didn't realize why it still looked different. It looks like when using the srcdoc on an iframe element, the iframe sets the doctype implicitly. When writing into the iframe through contentWindow.write, it doesn't set a doctype for the iframe and hence it stays in Quirks mode. Quirks mode seems to expand the body height, without having to set html,body { height: 100% } or something similar.

  • `::before` and `::after` are siblings, nested and `display: inline` in a div

    I can never really remember how they work and during this Frontend Friday Folks puzzle, we looked into that again. It seems to be easier to nest divs than using the pseudo elements here. So to understand it better: <div><::before>content in ::before</::before>content of div<::after>content in ::after</::after></div>

  • Strings in JavaScript are iterable without using `split`

    When using for (const c of string) { ... }, it's not necessary to do a string.split('') before. If you want to string.map() or string.filter() though, you need to split it first.

  • A `.github` repository for templates, code of conduct, etc.

    I tried template repositories and forking them before, but it always felt a bit weird. Thanks to Bekah from VirtualCoffee.io, I learnt that you can have a .github repository instead of a folder in each of your projects to hold your templates. Credit goes to Bekah's blog post!

  • Check whether form is valid or not with CSS

    There is a selector called :invalid! Thanks to Travis Barnette for pointing that out in VirtualCoffee and to Justin Noel for asking this question. Up to that point, I thought you can only check validity with JavaScript enabled...!

  • `box-decoration-break` for inline padding over lines

    The box-decoration-break property allows styling boxes on inline element breaks across multiple lines. By setting it to `clone`, it will create multiple boxes, one for each line. It's necessary to add `-webkit-box-decoration-break` as well to make it work on most browsers currently.

  • pnpm install --prod=false

    This not really documented feature allows me to override the `NODE_ENV="development"` setting. If `pnpm install --dev` is used, it will only install the `devDependencies`. `pnpm install --prod` would only install the regular `dependencies`. To ensure both are installed, `pnpm install --prod=false` helps.

  • Svelte layout resets reset server side as well

    If you use a +layout@.svelte somewhere, it resets the +layout.server.ts as well. Need to be aware of that, that this is done implicitly and doesn't need a separate +layout@.server.ts.

  • CSS border-radius "from" and "to" can be styled

    Using border-radius with / allows setting its horizontal and vertical values differently to each other. So a corner does not need to be symmetrical.

  • Pasting an image into VSCode Markdown creates a file

    I knew that pasting into GitHub uploads the image. Doing the same thing in VSCode when you are editing a Markdown file was new to me: It creates the image next to the saved Markdown file. An untitled / unsaved Markdown editor does NOT work - it has to be an actual file!