CSS-Tricks Screencasts

p class=wp-block-paragraphAndy Bell joins me to talk through his CSS methodology he calls a href=https://piccalil.li/blog/cube-css/ rel=nofollow noopenerCUBE CSS/a. That#8217;s strongC/strongomposition, strongU/strongtility, strongB/stronglock, and strongE/strongxception.hellip;/p

p class=wp-block-paragraphOne of the whole points of the Shadow DOM is that it provides encapsulation. No styles out, no styles in. But there are ways #8220;through#8221; the Shadow DOM, and one of them that is pretty cool and useful is using hellip;/p

p class=wp-block-paragraphThis is the last video in our little series on using Notion. We#8217;ve covered how Notion is great for working on web development teams. But another thing that makes Notion great is that it#8217;s useful for emyourself/em too. hellip;/p

p class=wp-block-paragraphSnook published an article titled #8220;a href=https://snook.ca/archives/html_and_css/overlapping-header-with-css-grid rel=nofollow noopenerOverlapping Header with CSS Grid/a#8221; where he looks at a header design pattern that I feel transcends trends and has been popular forever. The idea is that the header is oversized and the hellip;/p

p class=wp-block-paragraphThis is the second video in 3-video series on using a href=https://bit.ly/chrisnotion rel=nofollow noopenerNotion/a. In Part 1 we covered a lot of ground on what Notion is how it#8217;s great for any team, and web development teams in particular./p

p class=wp-block-paragraphIn this video, hellip;/p

p class=wp-block-paragraphI#8217;m a big fan of a href=https://bit.ly/chrisnotionweb rel=nofollow noopenerNotion/a, particularly for keeping teams in sync. I work on teams of developers, and I find it works particularly well for that. If I had to sum it up really quickly, I#8217;d tell Notion hellip;/p

p class=wp-block-paragraphMasking in CSS is one way to hide parts of the element and show others. Another is codeclip-path/code, but let#8217;s not focus on that today. em#8220;Masks are images; Clips are paths#8221;/em is one way to think about the a href=https://css-tricks.com/clipping-masking-css/#article-header-id-0difference/ahellip;/p

p class=wp-block-paragraphThe fact that lists render their markers emoutside/em their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. Moving them inside the box feels better and safer, but hellip;/p

p class=wp-block-paragraphIt#8217;s a bonafide emphenomenon/em!/p

p class=wp-block-paragraphI#8217;m talking about the idea of image hosting services that allow you to strongmanipulate the URL to the image in order to transform it/strong. In other words, if you need multiple copies of an hellip;/p

p class=wp-block-paragraphSFC as in #8220;Single File Component#8221; which is something a href=https://vuejs.org/v2/guide/single-file-components.html rel=nofollow noopenerthat Vue offers/a and Vue people seem to love. I#8217;ve written emvery little/em Vue in my days, but I#8217;m a fan! We recently started supporting Vue SFC#8217;s on CodePen, so this hellip;/p