Hot tips are spicy lil' nuggets related to web development and tooling that I share on my twitter account. I've logged them here to make them easier to find.
🔥 CSS Variables are perfect for overwriting parts of a definition that can’t be broken up like text-shadows, transforms or gradients
2444140
🔥 VS Code now has a shrinking tabs option - no more scrolling for your tabs!
"workbench.editor.tabSizing": "shrink"
45896130
🔥 With CSS variables, you can overwrite values when authoring HTML with an inline style attribute
52914881
🔥 Use CSS object-fit: contain; and object-fit: cover; to scale 100% width and 100% height images as large as they will go without messing up aspect ratios.
Works with <video> in most browsers except IE+Edge
634149171
🔥 You can set and use variables inside a CSS declaration. Handy for when you need the same value more than once!
809240291
🔥 VS @code just launched Live Share, which means you can do pair programming and code sharing right from your editor!
681286330
🔥 Since :before and :after are first class CSS Grid items, this “lines on either side” design can easily be accomplished in ~10 lines of CSS
2.4K503359
🔥 Text Pastry is a super handy plugin for inserting incremental numbers at each cursor. Available for VS Code, Sublime and Atom.
2555562
🔥 CSS Grid doesn’t do masonry/pinterest layout, but if you pre-define a few consistent sizes, grid-auto-flow: dense; works really well!
21934110
🔥 In Emmet, you can use $@15 to start numbering from any number.