dmesg --follow
[ 68673720.000 ] posts.x: @davidsenra you will love this!  |   [ 68673600.000 ] posts.x: https://t.co/vhJifvV8y9  |   [ 68673600.000 ] posts.x: This Jay-Z documentary, In 8, is exceptional! Nearly 6 hours of intimate conversation between @sc and the brilliant @RickRubin. It’s rare to get such…  |   [ 68662260.000 ] posts.x: Full talk on turning re-prompted fixes into linters, including the OpenAPI drift fix and the skill-writing whack-a-mole:  |   [ 68662260.000 ] posts.x: Re-prompting an agent to fix the same sloppy pattern over and over isn't a workflow, it's a sign the rule should live in code, not in your head…  |   [ 68650020.000 ] posts.x: ↻ @willcb: me: kinda fucked up how many people are offloading their whole lives to muse or instinct or grokbot or whatever claude: yeah  |   [ 68650020.000 ] posts.x: ↻ @iamdevloper: signs you've become the senior dev: you're the only one who understands the deploy script you're the only one who remembe…  |   [ 68649720.000 ] posts.x: Gooooooooood morning! Brazil Oberon Cerrado. Roasted 110 seconds past first crack. Milk chocolate and almond.  |   [ 68647800.000 ] posts.x: @Saanvi_dhillon “Git expert” is a weird flex, though, isn’t it?  |   [ 68610720.000 ] posts.x: @sujee_dev @dkundel @aiDotEngineer Thanks mate!  |   [ 68600580.000 ] posts.x: Full talk on the Codex app server protocol and what you can build on top of the Codex harness:  |   [ 68600580.000 ] posts.x: A lot of engineers assume building their own agent interface means writing their own agent harness from scratch. @dkundel, Developer Experience Lead…  |   [ 68564580.000 ] posts.x: Full talk on why Reducto deleted their all-in-one MCP server and rebuilt it around fewer, state-aware tools and visible agent uncertainty:  |   [ 68564580.000 ] posts.x: A single massive MCP file worked fine as a curated demo and broke the moment Reducto's own team got hold of it. @abhiarya, who works on product…  |  
corey@gallon.me:~/til$
apropos
/writing 8 pieces · long form /til 27 notes · small /conferences 20 write-ups /snips 2 · links, quotes /projects 64 things that run /speaking 3 talks · rooms /courses 1 taught · cohorts connect follow ⋅ subscribe about.md who this is
CONTENTS 1 min
Emmet Abbreviations in VSCode FIG 1 FIG 2start html file.png FIG 3enter completes.png FIG 4div.png FIG 5div complete.png FIG 6span purple.png FIG 7span purple complete.png FIG 8span purple id.png FIG 9span purple id complete.png FIG 10div class id.png FIG 11div class id complete.png FIG 12CSS selectors.png FIG 13div purple span cyan.png FIG 14div purple span cyan complete.png FIG 15header nav ul li.png FIG 16header nav ul complete.png FIG 17header nav ul li 3.png FIG 18header nav ul li 3 complete.png FIG 19header nav ul li 3 text.png FIG 20header nav ul li 3 text complete.p FIG 21header nav ul li 3 text 1 2 3.png FIG 22header nav ul li 3 text 1 2 3 comp FIG 23zero padded.png FIG 24zero padded complete.png FIG 25add sibling elements.png FIG 26add sibling elements complete.png FIG 27group elements.png FIG 28group elements complete.png FIG 29combo.png FIG 30combo complete.png
~/til/emmet-abbreviations-in-vscode.md
-rw-r--r-- 328 words 1 min30 figures 2024-10-10

Emmet Abbreviations in VSCode

FIGURE 1 ⋅ Emmet Abbreviations in VSCode

Apparently there’s this plugin for many IDEs called Emmet which makes writing HTML very fast!

Here’s the Emmet Cheat Sheet

Here’s a great video on it:

https://www.youtube.com/watch?v=V8vizNQKtx0

Start all HTML projects by just typing !:

start html file.png
FIGURE 2 ⋅ start html file.png

Then, hit ENTER (not Tab) to complete to this boilerplate!

enter completes.png
FIGURE 3 ⋅ enter completes.png

Start by typing the name of the tag you want … then hit ENTER (not Tab) to complete.

e.g. div (ignore Cursor’s autocomplete suggestions behind it)

div.png
FIGURE 4 ⋅ div.png

Then, ENTER:

div complete.png
FIGURE 5 ⋅ div complete.png

That works with any HTML element. It gets even better, though. You can quickly generate CSS and other HTML attributes.

For example, a <span> with the CSS class purple:

span purple.png
FIGURE 6 ⋅ span purple.png

ENTER completes it to:

span purple complete.png
FIGURE 7 ⋅ span purple complete.png

Similarly, adding an id= attribute to an element:

span purple id.png
FIGURE 8 ⋅ span purple id.png

ENTER completes to:

span purple id complete.png
FIGURE 9 ⋅ span purple id complete.png

You can complete all of the attributes you want for an element by chaining them as so:

div class id.png
FIGURE 10 ⋅ div class id.png

ENTER completes to:

div class id complete.png
FIGURE 11 ⋅ div class id complete.png

You can write these things the way that CSS Selectors are written.

CSS selectors.png
FIGURE 12 ⋅ CSS selectors.png

So, a <div> with a class of purple and a child <span> with class cyan is:

div purple span cyan.png
FIGURE 13 ⋅ div purple span cyan.png

ENTER completes to:

div purple span cyan complete.png
FIGURE 14 ⋅ div purple span cyan complete.png

You can nest all of your elements similarly:

header nav ul li.png
FIGURE 15 ⋅ header nav ul li.png

Becomes:

header nav ul complete.png
FIGURE 16 ⋅ header nav ul complete.png

If you wanted 3 <li> elements as children of the <ul>, you can use * multiplication:

header nav ul li 3.png
FIGURE 17 ⋅ header nav ul li 3.png

Becomes:

header nav ul li 3 complete.png
FIGURE 18 ⋅ header nav ul li 3 complete.png

Want to add text to each of those <li> elements? Use the { } operators:

header nav ul li 3 text.png
FIGURE 19 ⋅ header nav ul li 3 text.png

Becomes:

header nav ul li 3 text complete.png
FIGURE 20 ⋅ header nav ul li 3 text complete.png

Add numbers to those list items:

header nav ul li 3 text 1 2 3.png
FIGURE 21 ⋅ header nav ul li 3 text 1 2 3.png

Becomes:

header nav ul li 3 text 1 2 3 complete.png
FIGURE 22 ⋅ header nav ul li 3 text 1 2 3 complete.png

The $ operator can be used in any other attribute also. e.g. .class$ becomes .class-1, .class-2, etc …

Add additional $ to zero-pad the numbers.

zero padded.png
FIGURE 23 ⋅ zero padded.png

Becomes:

zero padded complete.png
FIGURE 24 ⋅ zero padded complete.png

Add sibling elements using the + operator.

add sibling elements.png
FIGURE 25 ⋅ add sibling elements.png

Becomes:

add sibling elements complete.png
FIGURE 26 ⋅ add sibling elements complete.png

Group elements together to implement more complex, yet readable, structures. For example, if we wanted a <header> with a <nav> child, then the <main> and <footer> siblings as before, we can group with the ( ) operators.

group elements.png
FIGURE 27 ⋅ group elements.png

Becomes:

group elements complete.png
FIGURE 28 ⋅ group elements complete.png

Let’s combo it up! We want:

  • Header
    • H2, with text
    • Nav
      • Ordered List
      • 5 list elements, with links (anchor tags)
  • Main
  • Footer

To accomplish this, we write:

combo.png
FIGURE 29 ⋅ combo.png

Which becomes:

combo complete.png
FIGURE 30 ⋅ combo complete.png

Building Forms using Emmet

corey@gallon.me:~$ tail -f /writing Attach to the stream. An email when I have something worth sending. Replies encouraged!
corey@gallon.me:~$ ls -lt /til ↑2024-10-15 neofetch for Linux system info summary
▸2024-10-10 Emmet Abbreviations in VSCode ⋅ you are here
↓2024-10-06 Installing Racket (Scheme) in WSL