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. I think I should add sections for these tips...

• 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!

• WebRTC sends different things depending on browser

  It's been a while that I've encountered bigger differences in browser implementations. I was surprised to learn that Chrome sends ArrayBuffer and Firefox sends Blobs through a WebRTC data channel when you send a file. It's crucial to allow both and it's possible to get from a Blob to an ArrayBuffer by using await data.arrayBuffer().

• Docker compose ports may send an empty response if local service is running

  Took me a while today and I thought my docker setup is broken: If you have a local service serving the same port, the port will send an empty result. Ensure stopping all services potentially blocking the port - not just docker services.

• Radial gradient shortcut to "circle" is "1q"

  When using a radial-gradient, we're often using a circle instead of an ellipse. A shorthand for this is using 1q instead of the circle keyword, to make the radial-gradient with a 1:1 aspect ratio - a.k.a. a circle.