CSS-Tricks Screencasts

<p><a href="https://jetpack.com/" rel="noopener">Jetpack</a> sponsored this video, which goes into what Jetpack is and can do for your site.</p> <p>These are my words though! I’m a big Jetpack fan and I run Jetpack on all my self-hosted WordPress sites. It does a ton …</p>

<p>The internet is, without metaphor, just a bunch of servers tied together with wires. Without servers, we’d have no way to share our creations with the world. Yet, in a bit of a paradox, servers are <em>less</em> essential to our …</p>

<p>Sarah Drasner and I dig into <a href="https://vuejs.org/" rel="noopener">Vue</a>! Vue is a very popular JavaScript framework that is absolutely exploding. Sarah is on the core team and is about the most passionate fan of Vue I’ve ever known. …</p>

<p>I saw a <a href="https://dribbble.com/shots/4180696-Add-Material-options" rel="noopener">Dribbble shot the other day by Eli Brumley</a> that had a cool interactive effect. A simple circular blue button, when clicked, expands into a small menu itself. I <a href="https://blog.codepen.io/documentation/pro-features/professor-mode/" rel="noopener">fired up Professor Mode on CodePen</a> to let people …</p>

<p>This is a talk I’ve given at a couple of conferences recently. It’s about four different properties in CSS:</p> <ol> <li><a href="https://css-tricks.com/almanac/properties/s/shape-outside/">shape-outside</a></li> <li><a href="https://css-tricks.com/almanac/properties/o/offset-path/">offset-path</a></li> <li><a href="https://css-tricks.com/almanac/properties/c/clip/">clip-path</a></li> <li>d</li> </ol>…

<p><a href="https://twitter.com/TheLarkInn" rel="noopener">Sean Larkin</a> joins me to talk about <a href="https://webpack.js.org/" rel="noopener">Webpack</a>! </p> <p>I doubt I’m alone in being a bit confused about what the heck <a href="https://webpack.js.org/" rel="noopener">Webpack</a> is and does. Even if you’re actively using a project that uses it! We’re just going to …</p>

<p><a href="https://ericportis.com/" rel="noopener">Eric Portis</a> joins me to dig into the world of responsive images.</p> <p>We start at the basics. Responsive images are specifically images in HTML and exist because of a desire for better performance. Images are probably the biggest culprit in …</p>

<p>CSS-Tricks itself is a WordPress site, and one in which WordPress is a perfect fit for. Between things like the login and permissions system, blogging, pages, custom post types, forums, eCommerce, and more, CSS-Tricks makes use of a huge swath …</p>

<p>It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it’s becoming something we should learning. …</p>

<p>Time for another pairing screencast! This time I have <a href="https://www.zachleat.com/" rel="noopener">Zach Leatherman</a> on, from <a href="https://www.filamentgroup.com/" rel="noopener">Filament Group</a>. Zach has done a lot of research, writing, and speaking about web font loading the past few years. He’s got <a href="https://www.zachleat.com/web/comprehensive-webfonts/" rel="noopener">a comprehensive guide</a> on …</p>

<p><a href="https://www.sublimetext.com/" rel="noopener">Sublime Text</a> is a pretty darn popular code editor. Despite its popularity and all the good things I’ve heard about it, I still lean heavily on other editors (Coda being my go-to for most projects) and have never given Sublime …</p>

<p>Sometimes, to start a journey into learning something huge and complex, you need to learn something small and simple. JavaScript is huge and complex, but you can baby step into it by learning small and simple things. If you’re a …</p>

<p>In this screencast I pair up with <a href="http://www.brianmuenzenmeyer.com/" rel="noopener">Brian Muenzenmeyer</a> who, among other things, works on <a href="http://patternlab.io/" rel="noopener">Pattern Lab</a>. Specifically, the <a href="https://github.com/pattern-lab/patternlab-node" rel="noopener">Node version</a> of Pattern Lab, along with <a href="https://twitter.com/geoffpursell" rel="noopener">Geoff Pursell</a>. </p> <p>I should point out: <strong>this screencast barely scratched the surface </strong>…</p>

<p>In this pairing screencast, I hang out with <a href="https://twitter.com/mdeegill" rel="noopener">Dee Gill</a>. We take a look at some layout stuff for a new app she’s working on: <a href="https://tinge.io/" rel="noopener">Tinge</a>. She had a design mockup she was working from, so we peak …</p>

<p>In this pairing screencast, <a href="https://css-tricks.com/author/sdrasner/">Sarah Drasner</a> joins me and guides me through some of my very first learnings of React. We tackle some “real world” style functionality: a comment form. </p> <p>This turned out to be a pretty useful bit of …</p>

<p>I pair with <a href="http://philipwalton.com/" rel="noopener">Philip Walton</a> (who works for Google on Google Analytics) in this screencast. It complements the case-study we put together: <a href="https://css-tricks.com/learning-use-google-analytics-effectively-codepen/">Learning to Use Google Analytics More Effectively at CodePen</a>. </p> <p>I learned a ton about how Google Analytics …</p>

<p>In this video <a href="http://notlaura.com/" rel="noopener">Lara Schenck</a> and I pair up, and she teaches me all about <a href="https://codex.wordpress.org/Child_Themes" rel="noopener">child themes</a> in WordPress. It’s like a podcast that you watch too!</p> <p>We straight up create one, starting from the Twentysixteen theme, which provided a …</p>

<p><a href="https://twitter.com/getify" rel="noopener">Kyle Simpson</a>, partly in an effort to rejuvenate his enthusiasm for working with JavaScript at all, started building a game. He’s not really a “game developer” (or at least, wasn’t at the time!) but tackled this anyway for the …</p>

<p>On the design of CSS-Tricks as I record this, one of the things I wanted to add was a “Front End Design & Development Jobs” widget, powered by the <a href="http://codepen.io/jobs" rel="noopener">CodePen Job Board</a>. Those jobs are available <a href="http://codepen.io/jobs.json" rel="noopener">as JSON data</a>…</p>

<p>There isn’t just a single CSS property that you reach for when hiding and showing things in CSS. There are a bunch of considerations that we’ll go over in this video.</p> <p>For instance, there is the <a href="https://css-tricks.com/almanac/properties/d/display/"><code>display</code></a> property in which …</p>

<p>You know <em>about</em> responsive images. It’s about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly the right image it needs, without giving it …</p>

<p>This is the video screencast version of a blog post I did not long ago: <a href="https://css-tricks.com/useful-flexbox-technique-alignment-shifting-wrapping/">Useful Flexbox Technique: Alignment Shifting Wrapping</a>. I was at a <a href="http://blog.codepen.io/meetups/" rel="noopener">CodePen Meetup</a> and used it as a quick show-and-tell demo and it was kinda …</p>

<p>I published a written post about this idea of the <a href="https://css-tricks.com/server-side-mustard-cut/">Server Side Mustard Cut</a>. So if you’re into reading and checking out code samples and stuff, that’s the place for you. In this video I just walk through all …</p>

<p>We just recently moved to “HTTPS everywhere” right here on CSS-Tricks. <a href="https://css-tricks.com/moving-to-https-on-wordpress/">I wrote up a blog post</a> detailing the steps to get there. This video is a companion to that, talking through the steps, as I know some folks prefer …</p>

<p>Rather than a typical screencast, this is a video taken of my talk SVG is for Everybody recorded by the Treehouse gang at <a href="http://blendconf.com/" rel="noopener">BlendConf</a>. Of course there is far too much about SVG to cover in just one talk, …</p>

<p>In this video, I prattle on about a particular “real world” situation I was in involving how I handle the <a href="http://blog.codepen.io/meetups/" rel="noopener">CodePen Meetups</a> page.</p> <p>At the very beginning days of CodePen Meetups, we just had a single one planned. It was …</p>

<p>Animating SVG is a bit unique in that there are three distinctly different ways you can approach animating it. …</p>

<p><strong>Warning:</strong> this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don’t write any code.</p> <hr /> <p>A “build process” is all the stuff that happens between the code …</p>

<p>I’m probably a bit rare in that I rather enjoyed trying to keep up on the responsive images thing. It’s an interesting problem that bred lots of interesting solutions. The whole thing is starting to wrap up now though, now …</p>

<p>I had a little design situation come up where I was making a fluid grid of boxes with floats. I wanted to specify how many boxes across a row was very easily, and have them flush against both edges of …</p>

<p>In this video we tackle a little front end layout problem that would have been pretty much impossible without flexbox. I wrote up <a href="https://css-tricks.com/boxes-fill-height-dont-squish/">an article about it</a> too, for easier reference of code.…</p>

<p>There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. The list goes on and on. Using different tools for all of them is …</p>

<p><a href="http://docs.emmet.io/" rel="noopener">Emmet</a> is an add-on for code editors that allows you to write HTML and CSS more quickly. </p> <p>On the HTML front, it allow you to write <a href="http://docs.emmet.io/abbreviations/" rel="noopener">abbreviations</a> for HTML. For instance …</p>

<p><a href="https://github.com/h5bp/Effeckt.css" rel="noopener">Effeckt.css</a> is an in-progress open source project that aims to provide performant, quality CSS transitions and animations for web designers. The idea is to provide as little UI and JavaScript as possible so that you can extract an effect to …</p>

<p>A template is a chunk of HTML that you need to inject onto the page. Often templates are created “server side” – in that they come to the JavaScript fully formed and just need to be put into the DOM. …</p>

<p>Should Modernizr be part of every modern web project? Not necessarily. In this screencast I talk about how you need Modernizr when you plan to do something specifically different depending on its browser support determination. …</p>

<p>This is a presentation I gave at a conference just once in December 2012. In this screencast I give it one last time to you, o’ CSS-Tricks subscriber.…</p>

<p>This is a presentation I gave at conferences in late 2012 and early 2013. In this screencast I give it one last time to you, o’ CSS-Tricks subscriber. …</p>

<p>The buttons on CSS-Tricks, at the time of this video, have a faux 3D effect. They look like a blue brick you are looking at from above at an angle. When you press down on them, their :active state is …</p>

<p>Forever we all made 16×16 graphics and got them into the .ico format somehow. I probably used <a href="http://tools.dynamicdrive.com/favicon/" rel="noopener">this converter tool</a> a million times. Somewhere along the line it started to get more confusing. Browsers can support .png favicons too. And …</p>

<p>The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. They require customization. For instance, a feature article for a news site isn’t just a title and content anymore. It’s a title, optional subtitle, …</p>

<p>I’ve never messed with creating custom <a href="http://www.sublimetext.com/" rel="noopener">Sublime Text</a> snippets before. So when James Nowland <a href="https://gist.github.com/jnowland/5151162" rel="noopener">sent one in</a>, I took the opportunity to learn. …</p>

<p>In this screencast we live answer more forums posts with no planning whatsoever. I don’t think we hit a homerun on any of the threads we look at, but that’s the lesson. You don’t have to have the answers to …</p>

<p><a href="http://blog.codepen.io/documentation/pro-features/" rel="noopener">CodePen PRO</a> offers a slew of new features. You can read about them, but much better to show them right?</p> <p>[Deep awesome voice]: and this is just the beginning.…</p>

<p>I’ve never in my life submitted a “Pull Request” on GitHub. I wanted to give it a shot, so this video is capturing the moment of me attempting to figure it out. Fair warning, this isn’t a succinct, quick tutorial. …</p>

<p>In this screencast we pop over to <a href="https://css-tricks.com/forums/">The Forums</a> to answer as many questions as we can. The point is just to have a little fun and show you how easy it is to contribute to the community. Become a …</p>

<p>Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that’s a grid. There are new layout methods in CSS that are getting closer to prime time …</p>

<p>I present four really simple things you can do to make your websites faster. Nothing even as complex as making image sprites (which ain’t that complicated). These are all easy wins with big possible performance gains. Plus, we handle a …</p>

<p>As we’ve said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single download. But they are even more awesome than …</p>

<p><a href="http://codepen.io/" rel="noopener">CodePen</a> is an app for sharing and playing around with front end code. I made it with some friends of mine: Alex Vazquez and Tim Sabat. In this typical ramble-ridden screencast I introduce what it is, what it’s for, how …</p>