Editor's Pick
enflake: A package that alters JavaScript's core built-in standard objects
Enflake is a package that alters JavaScript's core built-in standard objects such as Array.push and JSON.parse in ways that would make them act unreliably - all without throwing errors nor causing direct exceptions that would make issues traceable to the enflake package.
Because Enflake modifies core objects, issues could easily trickle down to other packages and cause fun-to-trace issues over the entire project.
Enflake, by default, allows the flakified methods to act like they normally do most of the time which ensures that problems are only caught when it's already too late projects that use this don't immediately collapse into rubbles.
Selling points
- turns popular built-in methods into unreliable versions of themselves
- easy to insert into any js/ts project
- very subtle
- untraceable
- will not cause exceptions that will be traceable to this package
My favorite example: Date.now(): returns the timestamp for yesterday.
Accessibility
Why Are There No Mobile Accessibility Guidelines in WCAG?
WCAG was not originally written for mobile and it still shows. How do current guidelines fall short and how can it be fixed?
virtual-screen-reader: Virtual Screen Reader is a screen reader simulator for unit tests
This package aims to supplement your testing by enabling you to automate a Virtual Screen Reader for unit test workflows the same as you would for mouse or keyboard based scenarios.
CSS
diving into mathjax css injection attack
on june 7th, 2024, @cloud11665 discovered that it is possible to inject arbitrary css style through math mode of README files on GitHub (tweet here.) this write-up is a summary of how to achieve the injection and how it is possible.
Custom Top and Bottom CSS Container Masks
Here’s the use case: You have a design where the top and/or bottom section of a website has a custom shape defining its transition to the container before and/or after it. Essentially, it’s a shape mask on the top or bottom of the container with the actual content in the section sandwiched in-between.
Well it turns out that a lot of the methods out there to achieve this effect are pretty old, quite involved, and come with a lot of limitations. Thinking, there must be a better way, I set out to figure it out.
JavaScript
Morphing Arbitrary Paths in SVG
While the SVG format gives us a way to morph between two paths with the same number of points using <animate>, we can use a few tricks to morph between arbitrary paths too!
biscuitman: Biscuitman is a super lightweight open-source privacy consent manager for your website
The goal was to make something as small as possible and versatile enough that I could drop it on my optimized sites for basic use, adhering to GDPR.
- Stores consent in localStorage, exposes in window.Consent and through custom events fired on document
- Handles consent granulated by custom sections (e.g. essential, performance, analytics...)
- Optionally shows user specific cookie details
- Fully customizable strings so you can serve localized strings if you want
- Overridable localStorage key, consent global
- Simple flat configuration object
- Injects scripts when granular consent is granted (<script data-consent="analytics" type="text/plain" src="..."></script>)
- Injects embedded <script> from script tags with src properties on onload (tidier markup)
- Works without CSS (thanks to <dialog> and <details>)
- Mobile-first
- Browser support: >= 2% browserlist (No IE support, but its not impossible)
- show more functionality for long disclaimer text
- link for privacy policy in any string
Generating ZIP Files with Javascript - Blog - Josh Martin's Website
I recently created a project called Hinge Trends and apart of the project was to take a set of in memory images, zip those images into a zip file then start a download all from inside the browser. The Library I used for creating the ZIP files is called JSZip and the documentation for how to extract a zip files is pretty good. However, the documentation on how to create a zip file is pretty bad and out of date.
htmx: Simplicity in an Age of Complicated Solutions
Front-end development is rife with examples of complexity. The engineering culture among many front-end developers seems to be one where simplicity is a dirty word. There are towering levels of abstraction, comically complicated and long build processes, bad performance, horrible tooling, and buggy applications, and everybody seems fine with this.
enflake: A package that alters JavaScript's core built-in standard objects
Enflake is a package that alters JavaScript's core built-in standard objects such as Array.push and JSON.parse in ways that would make them act unreliably - all without throwing errors nor causing direct exceptions that would make issues traceable to the enflake package.
Because Enflake modifies core objects, issues could easily trickle down to other packages and cause fun-to-trace issues over the entire project.
Enflake, by default, allows the flakified methods to act like they normally do most of the time which ensures that problems are only caught when it's already too late projects that use this don't immediately collapse into rubbles.
Selling points
- turns popular built-in methods into unreliable versions of themselves
- easy to insert into any js/ts project
- very subtle
- untraceable
- will not cause exceptions that will be traceable to this package
My favorite example: Date.now(): returns the timestamp for yesterday.
Miscellaneous
Frontend as part of the engineering culture
My opinion on how we can do better as engineers and leaders in treating the discipline of frontend development.