dmesg --follow
[ 66934380.000 ] posts.x: Full talk on the three brakes for PR review, from tautological tests to a retro skill that compounds:  |   [ 66934380.000 ] posts.x: More AI generated code doesn't automatically mean more throughput, it just means more PRs nobody has time to review. @mattpocockuk, Director at AI…  |   [ 66925620.000 ] posts.x: Full talk on distilling loops into versioned agent recipes, and measuring them by valued work per watt:  |   [ 66925620.000 ] posts.x: A guy named AJ once built a bot that went on Reddit for car prices and inventory, then put dealers head to head to outbid each other. That's the…  |   [ 66881460.000 ] posts.x: Full talk on how to build an LLM recommender that's bilingual in English and semantic IDs, and why that makes feeds more token-efficient than chat…  |   [ 66881460.000 ] posts.x: Recommendation systems follow the same power law scaling curve as large language models, and the field is still early on it. @devanshtandon_, a…  |   [ 66862560.000 ] posts.x: Full talk on Spotify's generative personalization system, the NEO training recipe behind it, and how they grounded their LLM judges:  |   [ 66862560.000 ] posts.x: One in four US Premium subscribers on Spotify interact with its recommendation system every day. "Teaching LLMs to Speak Spotify" is @moustaki and…  |   [ 66854760.000 ] posts.x: Full talk on Numalab, the gesture system built to give a shape display its own body language:  |   [ 66854760.000 ] posts.x: An AI's first spontaneous act, given a body instead of a chat window, was to breathe. @cyrusclarke, a researcher at MIT Media Lab, gave it that body…  |   [ 66842160.000 ] posts.x: Full talk on the six month cutoff gap and what it takes to get a coding agent to actually check its blind spots:  |   [ 66842160.000 ] posts.x: Most models are already stale the day they ship: Exa's own graph shows roughly a six month gap between a model's knowledge cutoff and its release…  |   [ 66837480.000 ] posts.x: Listened to this episode of @FoundersPodcast this morning. As is so frequently the case, immediately bought the book after finishing the episode. Ari…  |   [ 66834900.000 ] posts.x: @GeoffreyHuntley Yeah, that seems low to me.  |  
corey@gallon.me:~/til$
apropos
/writing 7 pieces · long form /til 27 notes · small /conferences 15 write-ups /snips 2 · links, quotes /projects 61 things that run /speaking 3 talks · rooms /courses 1 taught · cohorts 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