CSS-Tricks Screencasts-logo

CSS-Tricks Screencasts

Technology Podcasts >

CSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design.

CSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design.
More Information

Location:

United States

Description:

CSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design.

Language:

English


Episodes

#171: Movable Stacked Card Row in CSS

4/29/2019
More
The same basic idea as the cards on the homepage of v17 of this site. See the Pen Moving Cards by Chris Coyier (@chriscoyier) on CodePen.… Read article

Duration:00:13:34

#170: Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project

3/4/2019
More
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. Some things work easily, some don't. Sometimes it's my fault. Sometimes the docs are unclear. Sometimes changes have happened under our feet. We have to battle through it all. We've got a little plan here. What we want to do … Read article

Duration:00:42:30

#169: How to Think Like a Front-End Developer

2/7/2019
More
This is a video from my talk at WordCamp US. 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 the problems we face, how to approach them, and the tools we have at our disposal. We’ll look at how Gutenberg might fit into our lives as front-end developers. It's my first time giving this talk, and I will be … Read article

Duration:00:43:07

#168: CSS-in-JS

1/9/2019
More
I'm joined by Dustin Schau 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 in files that you up in the head all on your own. Dustin is a perfect guide for this, as he created a great exploratory tool called CSS in JS Playground and also has a brand new … Read article

Duration:01:11:12

#167: Sponsored Videos for Jetpack and WooCommerce

12/5/2018
More
This is a compilation of four videos I've done over the last few months for a sponsorship with Automattic. It's mostly about Jetpack, a WordPress plugin I quite like and that we use here at CSS-Tricks), but also touches on setting up WooCommerce to create a personal store.… Read article

Duration:00:17:59

#166: Learn to Integrate Visual Testing with Percy

10/25/2018
More
Did you know that you can set up a review system so that every pull request you make shows you exactly what has changed visually on your site? That's exactly what Percy does. It assumes what you have on master is correct (configurable) and, when you do a pull request, it literally takes screenshots and compares them to the screenshots of what is on master. If anything has changed, it lets you know, just like unit or integration tests would. … Read article

Duration:00:36:44

#165: Building Your Backend with Serverless Functions

10/18/2018
More
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 and we talk to that database via serverless functions (i.e. Node.js JavaScript functions running on AWS Lambda via Netlify's extremely easy and powerful integration). Put the JavaScript files in a folder and they'll be deployed and runnable!… Read article

Duration:00:29:06

#164: Basic WooCommerce Walkthrough

8/17/2018
More
WooCommerce is a powerful and flexible eCommerce plugin for WordPress. Wanna sell subscriptions or memberships? WooCommerce can do that? Digital downloads? Yep. Appointments and bookings? Sure. But the meat and potatoes of eCommerce, so to speak, is selling a physical product and shipping it and WooCommerce does that great as well. That's exactly what we do on CodePen's store. We aren't exactly in the eCommerce business as our primary thing, so we wanted something easy to … Read article

Duration:00:11:24

#163: First Steps with Serverless

7/6/2018
More
David Wells, from Netlify, 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 possibilities. Links from the video: WebtaskCode.xyzNetlify's support of cloud functionsThe Power of Serverless for Front-End Developerscreate-react-app-lambdanetlify-faunadb-exampleReact… Read article

Duration:00:21:36

#162: What the Heck is Serverless?

7/5/2018
More
David Wells, from Netlify, and I take a crack at answering this question in an understandable way. Are there still servers involved? Of course, but you don't manage them, scale them, or pay for them when you aren't using them. It really is a different model that deserves a new name. Better yet, they enable front-end developers like us to do more than we ever thought we could. We'll cover a variety of use cases that might get you … Read article

Duration:00:23:41

#161: Jetpack

6/14/2018
More
Jetpack sponsored this video, which goes into what Jetpack is and can do for your site. 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 both feature-wise and performance-wise. In this video, we look at a WordPress site I recently spun up where Jetpack was essentially the first plugin I installed. … Read article

Duration:00:19:13

#160: The All-Powerful Front-End Developer

6/6/2018
More
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 less essential to our work than they've ever been. We can now do things on the front-end that used to require a back end. When we do need a backend, our front-end skills can be put to work, giving us some surprisingly powerful new … Read article

Duration:01:23:10

#159: Learning Vue

5/12/2018
More
Sarah Drasner and I dig into Vue! 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. … Read article

Duration:01:22:00

#158: An Expando Button Menu

2/19/2018
More
I saw a Dribbble shot the other day by Eli Brumley that had a cool interactive effect. A simple circular blue button, when clicked, expands into a small menu itself. I fired up Professor Mode on CodePen to let people watch as I built, but I also recorded it so I could talk my way through it and publish it here.… Read article

Duration:00:35:34

#157: A Tale of Four Properties

10/3/2017
More
This is a talk I've given at a couple of conferences recently. It's about four different properties in CSS: shape-outsideoffset-pathclip-path… Read article

Duration:00:42:45

#156: Let’s Talk About Webpack

7/9/2017
More
Sean Larkin joins me to talk about Webpack! I doubt I'm alone in being a bit confused about what the heck Webpack is and does. Even if you're actively using a project that uses it! We're just going to scratch the surface here, but hopefully while talking it out in a way that will make sense to you. One thing that helps me think about (a little, anyway, I'm no expert) is that while you do need to configure … Read article

Duration:00:56:24

#155: Responsive Images, WordPress, and Cloudinary

6/22/2017
More
Eric Portis joins me to dig into the world of responsive images. 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 the overall weight of websites. If we can avoid sending too many pixels across the network, we should. After all, a screen that is only 720 pixels wide doesn't need a 2000 pixel wide image, even if it's a 2x … Read article

Duration:00:53:03

#154: A Poster Child WordPress Site

5/15/2017
More
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 of what WordPress is capable of.… Read article

Duration:00:27:42

#153: Getting Started with CSS Grid

2/20/2017
More
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. I started reading a few posts and playing around with the syntax the past couple of weeks, but asked my fellow CSS-Trickster Miriam Suzanne to grok through it with me on a video hangout.… Read article

Duration:00:47:26

#152: Font Loading with Zach Leatherman

1/30/2017
More
Time for another pairing screencast! This time I have Zach Leatherman on, from Filament Group. Zach has done a lot of research, writing, and speaking about web font loading the past few years. He's got a comprehensive guide on it! There are some problems with the default way that custom fonts are loaded. As in, just linking up a font in some CSS through @font-face. Even the way Google Fonts provides you to use their fonts Zach calls … Read article

Duration:00:56:36