CSS-Tricks Screencasts

<p>With <a href="https://www.mailpoet.com/?aff=8638" rel="noopener">MailPoet</a> and <a href="https://woocommerce.com/?aff=8638" rel="noopener">WooCommerce</a>, we can build <a href="https://woocommerce.com/create-a-paid-newsletter-with-woocommerce/?aff=8638" rel="noopener">a paid subscription newsletter</a> into a <a href="https://wordpress.com/?aff=8638" rel="noopener">WordPress</a> website. Our only costs are transaction fees, whatever WordPress hosting we might need, and a yearly fee for WooCommerce Subscriptions, making it a very cost-friendly …</p>

<p>I think Astro is a pretty cool bit of technology for building websites! Should we call it a framework? We’ll get into that in the video. How can we call it a framework if it asks you to “bring your …</p>

<p>I paired up with <a href="https://twitter.com/sonicdmg" rel="noopener">David Jones-Gilardi</a> of DataStax to go through <a href="https://github.com/datastaxdevs/appdev-week3-graphql" rel="noopener">one of the workshops</a> they have put together (with <a href="https://www.youtube.com/channel/UC5DNytAJ6_FISueUfzZCVsw" rel="noopener">Ania Kubów</a>, who has <a href="https://www.youtube.com/watch?v=g8COh40v2jU" rel="noopener">a video</a> you should watch as well) that does a good job of showcasing how …</p>

<p>This is the video version of <a href="https://css-tricks.com/how-do-you-make-a-layout-with-pictures-down-one-side-of-a-page-matched-up-with-paragraphs-on-the-other-side/">a blog post we did</a> asking the question: How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?</p> <p>It’s a satisfying answer because …</p>

<p>I get a hands-on performance review with <a href="https://timkadlec.com/" rel="noopener">Tim Kadlec</a> of <a href="https://webpagetest.org/" rel="noopener">WebPageTest</a>! This is a real honor as Tim is a real performance guru who knows WebPageTest in and out. I’m all about <s>getting a little free consulting</s> helping y’all …</p>

<p>I’m joined by <a href="https://twitter.com/chris__sev?lang=en" rel="noopener">Chris Sev</a> from <a href="https://www.digitalocean.com/" rel="noopener">Digital Ocean</a> to talk about their new <a href="https://try.digitalocean.com/css-tricks/?utm_medium=partner&utm_source=csstricks&utm_campaign=global_brand_video_en&utm_content=conversion" rel="noopener">App Platform</a>. We’re going to use it to build a little website. The site will be blog-like: posts with IDs, titles, content, and the more dynamic …</p>

How it works <p>You apply <code><a href="https://css-tricks.com/almanac/properties/p/position/#sticky">position: sticky;</a></code> to an element along with a <code>top</code>, <code>left</code>, <code>right</code>, or <code>bottom</code> threshold and it will “stick” in that position when the threshold is passed, as long as there is room …</p>

<p>In this video, I’m joined by <a href="https://twitter.com/accessibility20" rel="noopener">Preety Kumar</a> of <a href="https://www.deque.com/css-tricks/" rel="noopener">Deque</a> to take a look at their <a href="https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US" rel="noopener">DevTools plugin</a> for <a href="https://www.deque.com/axe/" rel="noopener">axe</a>. Short story: this is an <em>amazing</em> plugin that helps you quickly find accessibility problems on any website, <em>then helps </em>…</p>

<p><a href="https://pages.cloudflare.com/" rel="noopener">Cloudflare Pages</a> is Jamstack hosting, meaning it’s a static file host that runs your builds and lets you do <a href="https://www.cloudways.com/blog/cloudflare-hosting/?id=1223312&data1=ArticleLink" target="_blank" rel="noreferrer noopener">dynamic things</a> with JavaScript and services. You might normally think of Cloudflare as something you put in front of your site’s …</p>

<p>Like so many things CSS, there is all sorts of little stuff to know, even something as minuscule as centering a list marker.</p> <p>A reader wrote in with a screenshot of what they were trying to accomplish — basically an …</p>

<p>Joshua Comeau crowd-coined the term <a href="https://www.joshwcomeau.com/react/boop/" rel="noopener">“boop”</a> (high five, <a href="https://twitter.com/cobra_winfrey/status/1324104607539306497" rel="noopener">Adam Kuhn</a>). These are sorta like hover/focus states, except that they aren’t. Your thingies — things like links, buttons, etc. — should still have those states. A “boop” is a more …</p>

<p>Fair warning: you aren’t going to need this every day! I just happened to be looking at <a href="https://github.com/PavelLaptev/warp-svg" rel="noopener">a neat little SVG warping tool</a> that had a feature where my mouse scroll wheel (or trackpad) could be used to zoom the …</p>

<p>I 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 …</p>

<ul class="wp-block-list"><li><strong><code>static</code>:</strong> the default </li><li><strong><code>relative</code>:</strong> allows you to nudge around with <code>top</code>/<code>right</code>/<code>bottom</code>/<code>left</code>, making <code>z-index</code> work, gives you a positioning context</li><li><strong><code>absolute</code>:</strong> <code>top</code>/<code>right</code>/<code>bottom</code>/<code>left</code> moves the element </li></ul>…

<p>The <a href="https://www.stackbit.com/" rel="noopener">Stackbit</a> app helps you kick out a new Jamstack site <em>very</em> quickly. Pick a theme, a static site generator, and a CMS and it’ll get a repo going for you on the double. Stackbit has gotten much more powerful …</p>

<p>Kyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn’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/snippets/css/complete-guide-grid/">grid</a>. We didn’t go from 0 to 100 here, but …</p>

<p>Stupid simple, right? It is! But it’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’ll mostly talk about a …</p>

<p>Jetpack can help <a href="https://jetpack.com/features/traffic/automatic-publishing/?aff=8638" rel="noopener">automate your site’s social media</a>. </p> <p>It’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="noopener">improve your site’s search</a>, <a href="https://jetpack.com/upgrade/backup/?aff=8638" rel="noopener">back it up</a>, and <a href="https://jetpack.com/support/security-features/?aff=8638" rel="noopener">protect it</a>. But it’s a …</p>

<p>Tara Z. Manicsic joined me for this video, setting up the very basics of <a href="https://scully.io/" rel="noopener">Scully</a>, which is a Static Site Generator for Angular — nay, <em>the</em> SSG for Angular, as Tara pointed out to me.</p> <p>I don’t know much Angular …</p>

<p>As amazing as Git is for handling your source code, you can certain <em>git</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 …</p>

<p>Andy Bell joins me to talk through his CSS methodology he calls <a href="https://piccalil.li/blog/cube-css/" rel="noopener">CUBE CSS</a>. That’s <strong>C</strong>omposition, <strong>U</strong>tility, <strong>B</strong>lock, and <strong>E</strong>xception.…</p>

<p>One of the whole points of the Shadow DOM is that it provides encapsulation. No styles out, no styles in. But there are ways “through” the Shadow DOM, and one of them that is pretty cool and useful is using …</p>

<p>This is the last video in our little series on using Notion. We’ve covered how Notion is great for working on web development teams. But another thing that makes Notion great is that it’s useful for <em>yourself</em> too. …</p>

<p>Snook published an article titled “<a href="https://snook.ca/archives/html_and_css/overlapping-header-with-css-grid" rel="noopener">Overlapping Header with CSS Grid</a>” 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 …</p>

<p>This is the second video in 3-video series on using <a href="https://bit.ly/chrisnotion" rel="noopener">Notion</a>. In Part 1 we covered a lot of ground on what Notion is how it’s great for any team, and web development teams in particular.</p> <p>In this video, …</p>

<p>I’m a big fan of <a href="https://bit.ly/chrisnotionweb" rel="noopener">Notion</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’d tell Notion …</p>

<p>Masking in CSS is one way to hide parts of the element and show others. Another is <code>clip-path</code>, but let’s not focus on that today. <em>“Masks are images; Clips are paths”</em> is one way to think about the <a href="https://css-tricks.com/clipping-masking-css/#article-header-id-0">difference</a>…</p>

<p>The fact that lists render their markers <em>outside</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 …</p>

<p>It’s a bonafide <em>phenomenon</em>!</p> <p>I’m talking about the idea of image hosting services that allow you to <strong>manipulate the URL to the image in order to transform it</strong>. In other words, if you need multiple copies of an …</p>

<p>SFC as in “Single File Component” which is something <a href="https://vuejs.org/v2/guide/single-file-components.html" rel="noopener">that Vue offers</a> and Vue people seem to love. I’ve written <em>very little</em> Vue in my days, but I’m a fan! We recently started supporting Vue SFC’s on CodePen, so this …</p>

<p>I had a dumb little issue the other day where a <em>nested</em> list didn’t quite have the right spacing. I was only adding <code>margin-bottom</code> on the list elements and the lists themselves, but that meant there was no space between …</p>

<p><strong>Fair warning:</strong> I’m no expert on this stuff, I’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>I have an iOS simulator up in this video, …</p>

<p>Using 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’s possible, but it involves a little trickery. In this …</p>

<p>I wanted to make sure you understand exactly what <a href="https://percy.io/" rel="noopener">Percy</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 …</p>

<p>This is the basics of how I work locally with a WordPress site, and then getting it to production.</p> <p><a href="https://share.getf.ly/k96n2f" rel="noopener">Flywheel</a> is a <em>sponsor</em> of CSS-Tricks, and I’m glad they are because they make great products. Flywheel is at the heart …</p>

<p><a href="https://twitter.com/mattgperry" rel="noopener">Matt Perry</a> from Framer and I take a look at the React animation library <a href="https://www.framer.com/motion?utm_source=youtube&utm_medium=launch_post&utm_campaign=FR-owned-css-tricks" rel="noopener">Framer Motion</a>. </p> <p>First, we take a look at how simple the API is. You control everything very declaratively through props on elements in your JSX. …</p>

<p>(This is a sponsored video I worked on between us at CSS-Tricks and <a href="https://wfl.io/css-tricks" rel="noopener">Webflow</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 …</p>

<p>There is a feature of Chrome DevTools that lets you:</p> <ol> <li>See the code of any given resource the current web page is using (like CSS and JavaScript).</li> <li>“Pretty Print” it (format it for readability)</li> <li>Save it to disk</li> <li><strong>Use that </strong></li></ol>…

<p>And by “we’re”, I mean us, front-end developers ;)</p> <p class="explanation"><a href="https://full-stack.netlify.com/" rel="noopener">Here’s the website</a> that goes with this talk.</p> <p>This is a talk I put together where I postulate that, over time, the breadth of what front-end developers are able to do …</p>

<p>I 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 …</p>

<p>The same basic idea as the cards on the homepage of v17 of this site. …</p>

<p class="explanation">Fair warning! This isn’t a speedy, straightforward, expert-driven plow-through of how to set up these technologies. Although, by the end, we do successfully get it all going. This is about documenting the real-world experience of doing this kind of work. …</p>

<p>This is a video from my talk at WordCamp US. </p> <blockquote><p>Let’s take a peek at what front-end development has become these days. Starting from what the role is, where we sit, and the expectations of us. Then we’ll get into </p></blockquote>…

<p>I’m joined by <a href="https://dustinschau.com/" rel="noopener">Dustin Schau</a> in this video and he is going to take me on a tour of the world of what has come to be known as CSS-in-JS. That is, doing your styling entirely in JavaScript, rather than …</p>

<p>This is a compilation of four videos I’ve done over the last few months for a sponsorship with Automattic. It’s mostly about <a href="https://jetpack.com/?aff=8638" rel="noopener">Jetpack</a>, a WordPress plugin I quite like and that <a href="https://css-tricks.com/jetpack/">we use here at CSS-Tricks</a>), but also …</p>

<p>Did you know that you can set up a review system so that <strong>every pull request you make shows you exactly what has changed visually on your site?</strong></p> <p>That’s exactly what <a href="https://percy.io/" rel="noopener">Percy</a> does. It assumes what you have on master …</p>

<p>David Wells & Chris Coyier talk about how you can build an app hosted on Netlify statically but still have a backend database to power it. We use the classic TODO app example where the database is powered by FaunaDB …</p>

<p><a href="https://woocommerce.com/?aff=8638" rel="noopener">WooCommerce</a> is a powerful and flexible eCommerce plugin for WordPress. Wanna sell <a href="https://woocommerce.com/products/woocommerce-subscriptions/?aff=8638" rel="noopener">subscriptions</a> or <a href="https://woocommerce.com/products/woocommerce-memberships/?aff=8638" rel="noopener">memberships</a>? WooCommerce can do that? <a href="https://docs.woocommerce.com/document/digital-downloadable-product-handling/?aff=8638" rel="noopener">Digital downloads</a>? Yep. <a href="https://woocommerce.com/products/woocommerce-bookings/?aff=8638" rel="noopener">Appointments and bookings</a>? Sure. </p> <p>But the meat and potatoes of eCommerce, so to speak, is …</p>

<p>David Wells, from <a href="https://netlify.com/?utm_source=css-tricks&utm_medium=display&utm_campaign=0718" rel="noopener">Netlify</a>, and I take some baby steps into building things with Serverless. We’ll mostly be looking at cloud functions here and how using them from an otherwise static hosting environment means you’ve unlocked all sorts of …</p>

<p>David Wells, from <a href="https://netlify.com/?utm_source=css-tricks&utm_medium=display&utm_campaign=0718" rel="noopener">Netlify</a>, and I take a crack at answering this question in an understandable way. </p> <p>Are there still servers involved? Of course, but you don’t manage them, scale them, or pay for them when you aren’t using …</p>