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.
How do you know which error you are catching in JavaScript? Here we look at how to differentiate between different types of errors so your application can recover.
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.
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
Unredacter
Shows you why you should never ever ever use pixelation as a redaction technique.
How to Try it Out
Install the dependencies:
npm install
Then start with
npm start
That's it.
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.png with that. I recommend doing it in GiMP.
Make note of the block size. (It's just size of each pixelated block) Replace blockSize in the code with that.
Get the CSS just right. This is the hardest and most time-consuming part. Try entering it into test.html and view it in Chrome…
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…
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…
Tip: Shave up to 90% off the size of Google Fonts by declaring only characters you need with &text: bit.ly/fonts-text. If self-hosting, see bit.ly/subfont
In this Hasty Treat, Scott and Wes talk about how best to explore and contribute to code on GitHub repos.
CodePen Radio – *With Adam Argyle*
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! 👋
](https://res.cloudinary.com/practicaldev/image/fetch/s--Art0ja8w--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.dribbble.com/users/257709/screenshots/17552573/media/a6a2c23cf17f6a213b7a34ed08164a1c.png)
](https://res.cloudinary.com/practicaldev/image/fetch/s--1fbkbqpO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.dribbble.com/users/26642/screenshots/17548912/media/8aa87ef805eb933d4ee985db2d6e5769.png)
](https://res.cloudinary.com/practicaldev/image/fetch/s--cCZY284v--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.dribbble.com/users/1996505/screenshots/17551000/media/fe125121dfe927add1c9df24f62908d1.png)
