Today I learnt
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 aniframe
element, the iframe sets the doctype implicitly. When writing into the iframe throughcontentWindow.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 sethtml,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 astring.split('')
before. If you want tostring.map()
orstring.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. Ifpnpm install --dev
is used, it will only install thedevDependencies
.pnpm install --prod
would only install the regulardependencies
. 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 sendsBlobs
through a WebRTC data channel when you send a file. It's crucial to allow both and it's possible to get from aBlob
to anArrayBuffer
by usingawait 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.