CSS-Tricks Screencasts

p class=wp-block-paragraphJoshua Comeau crowd-coined the term a href=https://www.joshwcomeau.com/react/boop/ rel=nofollow noopener#8220;boop#8221;/a (high five, a href=https://twitter.com/cobra_winfrey/status/1324104607539306497 rel=nofollow noopenerAdam Kuhn/a). These are sorta like hover/focus states, except that they aren#8217;t. Your thingies — things like links, buttons, etc. — should still have those states. A #8220;boop#8221; is a more hellip;/p

p class=wp-block-paragraphFair warning: you aren#8217;t going to need this every day! I just happened to be looking at a href=https://github.com/PavelLaptev/warp-svg rel=nofollow noopenera neat little SVG warping tool/a that had a feature where my mouse scroll wheel (or trackpad) could be used to zoom the hellip;/p

p class=wp-block-paragraphI probably should have learned this long ago, but alas, here we are. Turns out you can tell what function you want JSX to use. Yep, JSX really only has one primary transformation that it does. It turns angle brackets hellip;/p

ul class=wp-block-listlistrongcodestatic/code:/strong the default /lilistrongcoderelative/code:/strong allows you to nudge around with codetop/code/coderight/code/codebottom/code/codeleft/code, making codez-index/code work, gives you a positioning context/lilistrongcodeabsolute/code:/strong codetop/code/coderight/code/codebottom/code/codeleft/code moves the element /li/ulhellip;

p class=wp-block-paragraphThe a href=https://www.stackbit.com/ rel=nofollow noopenerStackbit/a app helps you kick out a new Jamstack site emvery/em quickly. Pick a theme, a static site generator, and a CMS and it#8217;ll get a repo going for you on the double. Stackbit has gotten much more powerful hellip;/p

p class=wp-block-paragraphKyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn#8217;t as up-to-date on modern CSS layout tools like a href=https://css-tricks.com/snippets/css/a-guide-to-flexbox/Flexbox/a and a href=https://css-tricks.com/complete-guide-css-grid-layout/CSS Grid/a. We didn#8217;t go from 0 to 100 here, hellip;/p

p class=wp-block-paragraphStupid simple, right? It is! But it#8217;s fun to think about for a few minutes and count a bunch of different ways we could do it. And what do I mean by a line anyway? We#8217;ll mostly talk about a hellip;/p

p class=wp-block-paragraphJetpack can help a href=https://jetpack.com/features/traffic/automatic-publishing/?aff=8638 rel=nofollow noopenerautomate your site#8217;s social media/a. /p

p class=wp-block-paragraphIt#8217;s a pretty small feature compared to all the huge stuff Jetpack can do, like a href=https://jetpack.com/support/search/?aff=8638 rel=nofollow noopenerimprove your site#8217;s search/a, a href=https://jetpack.com/upgrade/backup/?aff=8638 rel=nofollow noopenerback it up/a, and a href=https://jetpack.com/support/security-features/?aff=8638 rel=nofollow noopenerprotect it/a. But it#8217;s a hellip;/p

p class=wp-block-paragraphTara Z. Manicsicnbsp;joined me for this video, setting up the very basics of a href=https://scully.io/ rel=nofollow noopenerScully/a, which is a Static Site Generator for Angular — nay, emthe/em SSG for Angular, as Tara pointed out to me./p

p class=wp-block-paragraphI don#8217;t know much Angular hellip;/p

p class=wp-block-paragraphAs amazing as Git is for handling your source code, you can certain emgit/em (lol) yourself into trouble. What if you make a change to a file and you want to get rid of the change? What if you just hellip;/p