Welcome to my Weekly Digest #7 of this year.
This weekly digest contains a lot of interesting and inspiring articles, videos, tweets, podcasts, and designs I consumed during this week.
Pokemon was first created in 1996. In the twenty years, it has become one of the most recognizable franchises in the world. Yet, after all that, there are still only a total of 893 unique Pokemon. With AI, we can change that.
The File System Access API is a web API that allows read and write access to a user’s local files. It unlocks new capabilities to build powerful web applications, such as text editors or IDE
s, image editing tools, improved import/export, all in the frontend. Let’s look into how to get started using this API.
Lua is a lightweight dynamic scripting language often embedded into other programs like World of Warcraft and Roblox. Its minimal syntax makes it easier to learn than Python, while being much more performant than other interpreted languages.
Context in React is a super valuable tool, but can it replace a state manager? Let's find out!
Top 7 ways to write CSS code in a React or Next.js app. Learn the tradeoffs between different tools like CSS Modules, CSS-in-JS, Sass, Tailwind, Bootstrap, component libraries, and more.
Never ever ever use pixelation as a redaction technique
Shows you why you should never ever ever use pixelation as a redaction technique.
How to Try it Out
Install the dependencies:
Then start with
How to Crack Your Own Pixelated Image
This is a bit manual and not at all streamlined. I think you'll see why. If someone feels like taking a shot at making this process more in-app, I'm all ears. What do I look like, an Electron developer? But yea here it is:
Crop your image down to just the pixelated area. No borders, no other text. Replace
secret.pngwith that. I recommend doing it in GiMP.
Make note of the block size. (It's just size of each pixelated block) Replace
blockSizein the code with that.
Get the CSS just right. This is the hardest and most time-consuming part. Try entering it into
test.htmland view it in Chrome…
KeyCastr, an open-source keystroke visualizer
KeyCastr, an open-source keystroke visualizer.
brew install --cask keycastr
Enabling Accessibility API Access
KeyCastr requires access to the macOS Accessibility API in order to receive your key events and broadcast the keystrokes you are interested in.
On newer versions of macOS (10.15+) there is a new Input Monitoring menu under Security & Privacy within the System Preferences app, and KeyCastr will appear there automatically the first time you run it. Simply unlock this menu and check the box next to KeyCastr to enable it.
On older versions of macOS, or if for some reason the app doesn't appear under the Input Monitoring menu (or if you want to pre-enable it) then you may manually add it to the list of apps in the Accessibility menu.
To add KeyCastr to the list click the + button and select KeyCastr from the file…
Record and replay the web
I have joined Github Sponsors and highly appreciate your sponsorship.
rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.
rrweb is mainly composed of 3 parts:
- rrweb-snapshot, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
- rrweb, including two functions, record and replay. The record function is used to record all the mutations in the DOM; the replay is to replay the recorded mutations one by one according to the corresponding timestamp.
- rrweb-player, is a player UI for rrweb, providing GUI-based functions…
by Halo Mobile
In this Hasty Treat, Scott and Wes talk about how best to explore and contribute to code on GitHub repos.
Chris grabbed Adam intending to chat about all sorts of CSS stuff and his work at Google and on VisBug. But then they chatted pretty much the entire time about color and what’s coming there to the web platform.
Thank you for reading, talk to you next week, and stay safe! 👋