πŸ”₯ There are 446 Hot Tips!!

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.

← Prev 10 please

Page 26 of 45

10 More please β†’

πŸ”₯ 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.

809214167

πŸ”₯ Multiple caret trick in VS Code/Sublime/Atom. Did this neat trick in my React course that everyone asks about - enjoy!

1K2413415

πŸ”₯CSS Variables and CSS grid have the same browser support so you can use vars to define row/col/gap and update with JS

3867630

πŸ”₯ ResizeObserver is coming to browsers, which means we can have resize events on a per-element basis. (Element queries anyone?!)

986350211
← Prev 10 please

Page 26 of 45

10 More please β†’