Because I keep forgetting this, an entry on the blog so that my future self can find it back easily: CSS: Want your first 5 list items to be bold? li:nth-of-type(-n + 5) {font-weight: bold;} Start with the # of list items you want to impact, then increment backward with -n. — Estelle Weyl (@estellevw) …
Tag Archives: code
CSS: Select first
Create animated GIFs of your code with Recoded
Like Carbon or Ray, but the output is an animated GIF. Beware though: the generated GIFs are HUUUUUGE. The embedded animation above originally was a 14MB GIF. Converted to an MP4, it’s only 163kB. Recoded →Recoded Source (GitHub) → Via Joan Léon
Scrollycoding – A New Way to Write Code Walkthroughs
The past few months Rodrigo Pombo has been working on Code Hike, a new way to write code walkthroughs for blogs or docs. Recently he shared this preview of the step scroller (“scrollycoding”) component. Looks great! Scrollycoding Demo →
Authenticate with sudo using Touch ID
Turns out it’s possible to authenticate with sudo using Touch ID, as per this (old) tweet by Cabel: Pro MacBook Pro Tip: have a Touch Bar with Touch ID? If you edit /etc/pam.d/sudo and add the following line to the top… auth sufficient pam_tid.so …you can now use your fingerprint to sudo! — Cabel (@cabel) …
Ray.so – Create beautiful code
Like Carbon, but a bit different. Ray.so →
Multi-line Highlights in CSS
These lines aren’t injected using ::after or the like, but are done via backgrounds. The key CSS property you’re looking for is display: inline; though, as set on the p elements; without it, it won’t work. That last swipe effect also uses box-decoration-break clone; so that each line animates in parallel.
Bohemian Rhapsody
🙂 🙂 In case you forgot the lyrics, here’s an ace rendition of the original (don’t mind the default thumbnail, the video works fine): (via)
carbon-cli – Carbon, from the CLI
carbon-cli is a CLI tool which interacts with the aforementioned Carbon, allowing you to create beautiful images of your source code. Installation per NPM/Yarn, or run it directly using npx npm i -g carbon-cli Usage is quite simple: carbon -f file.js carbon-cli – Carbon, from the CLI →
Generate code screenshots straight from within Visual Studio Code with Polacode
Remember those really nice screenshots of code, generated with Carbon? Polacode is an extension for Visual Studio Code that offers (somewhat) the same functionality directly inside the IDE. Polacode – Polaroid for your Code →
Create and share beautiful images of your source code with Carbon
Carbon is a great tool to create lovely source code screenshots you can share. Just start typing, or drop a file into the textarea. An example image generated by Carbon is included above. Supports several themes and syntaxes. Carbon →