Last Week I Learned #2
Hey and welcome to the second part of Last Week I Learned. The purpose of this is to share small nuggets of knowledge that can help you in your everyday life as a developer.
If you have anything that you think might suit here, let me know in the comments.
Here are the gems I've stumbled upon this week. Enjoy!
Monday
What SSH keys are active right now?
Yeah, I kept fiddling around with all those keys. Here's how you list all the active ones:
ssh-add -l or ssh-add -L
Hygen takes the pain of scaffolding away.
In my Competence Group at 13|37, we’re trying to make the most DX maximized setup for an app. In one of our books, Modern Frontend Architecture, Hygen is mentioned and oh my, isn’t that’s just a swell tool. It’s well worth the 10-15 minutes it takes to learn and master. It's like Yeoman for Yeoman.
Type: module in package.json
It makes node treat everything as EcmaScripts Modules (e.g: import thing from ‘thing’) instead of Common.js (E.g: const thing = require(‘thing’)). But it’s also a hassle since it opts us out from using require(), but you can circumvent that by naming the files with common.js imports from .js to .cjs.
This article gives a good overview of ESM and Common.js and how to make peace between them.
Tuesday
How to track emails via analytics:
Make your own poor mans salesforce:
Wednesday
Modify your webpack config without ejecting it from CRA
CRACO (Create React App Config Override) lets you do mods to webpack, babel, etc… without ejecting.
Word of the day: Blit
To “blit” is to copy bits from one part of a computer's graphical memory to another part. This technique deals directly with the pixels of an image and draws them directly to the screen, which makes it a swift rendering technique.
Caveats with Canvas
ctx.getImageData is disabled if you have drawn an image originating on a different domain than the web page itself. So, how can you (ab)use CORS here? If some third party can decide which "image" URL to load?
In general loading images from other hosts works fine with img/svg (because it’s needed to make the web work for users as it always has) but the issue is that you could then load image data in the usual way (meant for the user but not the website) but funnel it through canvas to then send the data back up to your/other’s servers (as the malicious website). To prevent websites from stealing data using the user’s auth, if the content in a canvas is foreign, trying to extract the canvas data is disallowed by browsers to prevent the data from subsequently being allowed to influence network requests back up to the website as that would leak information to the server which it wouldn’t otherwise have access to… if the host of the images is cool with another origin accessing the data, it has to set Access-Control-Allow-Origin headers saying so explicitly (another workaround if you don’t control the host is using a proxy that has access to the data and can set relevant headers/have necessary origin)?
Thursday
What subdomains are available on this second-level domain?
Found this gem for getting a list of subdomains: nmmapper
Also: Found out (obviously) that the string before the top domain is called “second-level domain”.
Clip-path is supported by all major browsers…
….So why won’t we see more of this? It’s fantastic and funny! (I don’t care if it’s a silly design trend, I want this all over the web!
Friday
Convert video to Gif
As easy as ffmpeg -i target.mp4 output.gif
Pad numbers in bash
Since I’m no h4ck3r of higher grade but lazy (as all good developers), I usually automate boring tasks and tend to do so in bash. Not because I’m good at it (yes, I just googled “how to for-loop in bash”), but it’s right there in the terminal.
Today I was grabbing a sequence of 24 images with padded number names (like 01.png) and just wanted to download them all
#!/bin/bash
for i in $(seq -f "%02g" 1 24); do # use (-f) in seq to set padded zeros
curl -O "https://asitewithimages/images-dir/$i.png" # save with the same name
done
That's all folks! Have a great week and let me know if you found this helpful!