CSS-Tricks Screencasts

p class=wp-block-paragraphI had a dumb little issue the other day where a emnested/em list didn#8217;t quite have the right spacing. I was only adding codemargin-bottom/code on the list elements and the lists themselves, but that meant there was no space between hellip;/p

p class=wp-block-paragraphstrongFair warning:/strong I#8217;m no expert on this stuff, I#8217;m just playing around with video on the web and addressing some issues I have when showing off video clips in blog posts./p

p class=wp-block-paragraphI have an iOS simulator up in this video, hellip;/p

p class=wp-block-paragraphUsing CSS grid to make a grid, is, well, the whole point. But what if you want all those grid items to maintain an aspect ratio, like a 1:1 square? It#8217;s possible, but it involves a little trickery. In this hellip;/p

pI wanted to make sure you understand exactly what a href=https://percy.io/ rel=nofollow noopenerPercy/a can do for you, hence the title. When you commit a change to your websites Git repo, like in a Pull Request workflow most of us live in, Percy will hellip;/p

pThis is the basics of how I work locally with a WordPress site, and then getting it to production./p

pa href=https://share.getf.ly/k96n2f rel=nofollow noopenerFlywheel/a is a emsponsor/em of CSS-Tricks, and I#8217;m glad they are because they make great products. Flywheel is at the heart hellip;/p

pa href=https://twitter.com/mattgperry rel=nofollow noopenerMatt Perry/a from Framer and I take a look at the React animation library a href=https://www.framer.com/motion?utm_source=youtube#038;utm_medium=launch_post#038;utm_campaign=FR-owned-css-tricks rel=nofollow noopenerFramer Motion/a. /p

pFirst, we take a look at how simple the API is. You control everything very declaratively through props on elements in your JSX. hellip;/p

p(This is a sponsored video I worked on between us at CSS-Tricks and a href=https://wfl.io/css-tricks rel=nofollow noopenerWebflow/a. I think Webflow is a fascinating product for building websites that is, in my opinion, in a category all to itself at the moment. It hellip;/p

pThere is a feature of Chrome DevTools that lets you:/p

ol

liSee the code of any given resource the current web page is using (like CSS and JavaScript)./li

li#8220;Pretty Print#8221; it (format it for readability)/li

liSave it to disk/li

listrongUse that /strong/li/olhellip;

pAnd by #8220;we#8217;re#8221;, I mean us, front-end developers ;)/p

p class=explanationa href=https://full-stack.netlify.com/ rel=nofollow noopenerHere#8217;s the website/a that goes with this talk./p

pThis is a talk I put together where I postulate that, over time, the breadth of what front-end developers are able to do hellip;/p

pI find that 98% of all my SVG usage comes from pre-created SVG files or vector art in some design software that I ultimately export as SVG. Not super often am I hand-manipulating the coordinates of things in the SVG hellip;/p