On the Polypane website you can find an interactive Specificity Calculator. Paste in any selector from CSS Selectors Level 4 — yes, that includes those special cases :is(), :where(), :not(), etc. — and out comes the Specificity. CSS Specificity Calculator →
Tag Archives: tool
htmlq – Command-line HTML Processor
Similar to how jq allows you to extract content from JSON files on the CLI, htmlq allows you extract content from HTML files. Like jq, but for HTML. Uses CSS selectors to extract bits of content from HTML files. You can pass in a local HTML file, but also pipe it to cURL requests. For …
Convert a JavaScript Style Object to CSS Custom Properties with this Little Helper Tool
Enter your Style Object on the left, hit the button, and see the Custom Properties on the right.
quicktype — Convert JSON into gorgeous, typesafe code in any language.
Generate models and serializers from JSON, schema, and GraphQL for working with data quickly & safely in any programming language. Just paste in some JSON object, choose your output language, and voila! quicktype — Convert JSON into gorgeous, typesafe code in any language →
Automatically Generate Regular Expressions from User Input with grex
grex is a library as well as a command-line utility that is meant to simplify the often complicated and tedious task of creating regular expressions. It does so by automatically generating a single regular expression from user-provided test cases. The resulting expression is guaranteed to match the test cases which it was generated from. As …
Continue reading “Automatically Generate Regular Expressions from User Input with grex“
Easily write Twitter threads with ThreadStart
Whenever I write a Twitter Thread I carefully lay out my planned tweets in advance in a text editor. After manually adjusting my sentences to have tweetable parts, I tweet them out one by one. Quite a cumbersome work, where ThreadStart can do the heavy lifting for me instead: Creating a Twitter thread without guidance …
Continue reading “Easily write Twitter threads with ThreadStart”
VoCSSels — Easily create 3D CSS & HTML Voxel Models
Crazy work by Jamie Coulter: Build your own 3D CSS and HTML models, export them to CodePen and share with the community. Simply Draw, Extrude, Paint and export! VoCSSels — Easily create 3D CSS & HTML Voxel Models → ❤️ Be sure to give his work a heart on CodePen there.
Easily generate a <feColorMatrix> with SVG Color Matrix Mixer
Easily generate nice looking Color Matrix Filters for your images For use with the <feColorMatrix /> SVG filter. SVG Color Matrix Mixer →
Remotion – Create videos programmatically in React
Remotion is a suite of libraries building a fundament for creating videos programmatically using React. Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc. Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem Also comes with a handy player …
Continue reading “Remotion – Create videos programmatically in React”
Easily see the JavaScript Keyboard Event KeyCodes with keycode.info
Handy helper tool by Wes Bos: simply press any key and see the results for KeyboardEvent.which, KeyboardEvent.key,KeyboardEvent.code, etc. As a user with an AZERTY keyboard layout I often have a broken experience on sites that respond to first row of keys, e.g. QWERTY. As those sites respond to KeyboardEvent.key — which differs from layout to …
Continue reading “Easily see the JavaScript Keyboard Event KeyCodes with keycode.info”