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>