{"id":1283,"date":"2008-11-03T15:21:18","date_gmt":"2008-11-03T22:21:18","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=1283"},"modified":"2012-10-24T07:11:30","modified_gmt":"2012-10-24T14:11:30","slug":"video-screencasts","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/","title":{"rendered":"Video Screencasts"},"content":{"rendered":"
\n
\"\"<\/a><\/dd>\n
#115<\/span>: Don’t Overthink It Grids<\/dt>\n
Running time: 17:19<\/dd>\n
Almost every site on the internet needs some kind of grid. Grids don’t have to be a big complicated framework. You can create one yourself with just a few lines of CSS.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#114<\/span>: Let\u2019s Do Simple Stuff to Make Our Websites Faster<\/dt>\n
Running time: 28:01<\/dd>\n
Four things, none of which are even as hard as making CSS sprites, but have huge possible performance gains on your website.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#113<\/span>: Creating and Using a Custom Icon Font<\/dt>\n
Running time: 21:46<\/dd>\n
Learn how to use and why using a font for the icons on your site is a good idea. We’ll also combine several icons from different sets together, map them how we want them, and use that streamline set.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#112<\/span>: Using CodePen<\/dt>\n
Running time: 12:53<\/dd>\n
A quick intro to CodePen, an app for sharing and playing with front end code. What it is, how to use it, and some of its specific features.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#111<\/span>: Get Yourself Preprocessing in Just a Few Minutes<\/dt>\n
Running time: 19:50<\/dd>\n
There is nothing to be scared of. Native apps can make it trivially easy to start using preprocessor languages in your web projects right now.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#110<\/span>: Quick Overview of CSS Position Values<\/dt>\n
Running time: 13:34<\/dd>\n
A beginner-level overview of the different values for CSS position<\/code> and what they do.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#109<\/span>: Getting off FTP and onto Git Deployment with Beanstalk<\/dt>\n
Running time: 25:57<\/dd>\n
I take my own personal website and move it to a local dev environment, then make a Git repository on Beanstalk which deploys via FTP. This workflow is superior in all ways to “going commando”.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#108<\/span>: Using Chartwell<\/dt>\n
Running time: 15:37<\/dd>\n
Chartwell is a font you can use on the web or in desktop apps that makes building pie charts, line graphs, and bar charts extremely easy.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#107<\/span>: LiveReload, a Menu Bar App for Preprocessors and Speedy Developement<\/dt>\n
Running time: 10:59<\/dd>\n
LiveReload is a menu bar app for the Mac that watches folders for you and preprocesses the files for you, then reloads the browser window for you, speeding up development.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#106<\/span>: Use BrowserStack for Live Web-Based Cross Browser Testing<\/dt>\n
Running time: 7:35<\/dd>\n
BrowserStack is the holy grail of cross-browser testing. Test in real live interactive browsers. Your own virtual machine pumped right through the web for you to see and use.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#105<\/span>: Using SpriteCow<\/dt>\n
Running time: 21:46<\/dd>\n
An example of creating your own sprite image and using SpriteCow to help with the CSS.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#104<\/span>: Quick Tip: Use Dropbox to Make a Public URL for Anything<\/dt>\n
Running time: 1:57<\/dd>\n
Even if you are developing locally, or working on a site that is otherwise not public, you can get a quick public URL for it by saving it out from the browser and chucking those files into your public Dropbox folder.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#103<\/span>: Integrating FitVids.js into WordPress<\/dt>\n
Running time: 20:58<\/dd>\n
Generally, fluid width designs don’t handle embedded video very well, especially videos from popular sharing sites like YouTube where the copy and paste code specifies exact pixel sizes. In this video we use the jQuery plugin FitVids.js to fix that.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#102<\/span>: Braindump on Responsive Web Design<\/dt>\n
Running time: 25:50<\/dd>\n
In which I show and explain the very basics of what “responsive web design” has come to mean. Then I go all over the place and show examples, related resources, relevant people, tips and tricks, and more.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n
\n
\"\"<\/a><\/dd>\n
#101<\/span>: Let\u2019s Suck at GitHub Together<\/dt>\n
Running time: 18:25<\/dd>\n
Even a couple of dopes like us can manage to get a project onto GitHub. And that’s most of the battle. Once it’s there, there are all sorts of advantages.<\/p>\n
<\/div>\n<\/dd>\n<\/dl>\n","protected":false},"excerpt":{"rendered":"

#115: Don’t Overthink It Grids Running time: 17:19 Almost every site on the internet needs some kind of grid. Grids don’t have to be a big complicated framework. You can create one yourself with just a few lines of CSS. #114: Let\u2019s Do Simple Stuff to Make Our Websites Faster Running time: 28:01 Four things, […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-archive.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18979,"url":"https:\/\/css-tricks.com\/video-screencasts\/115-dont-overthink-it-grids\/","url_meta":{"origin":1283,"position":0},"title":"#115: Don’t Overthink It Grids","date":"October 24, 2012","format":false,"excerpt":"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 (like flexbox and grid layout) that will be very great\u2026","rel":"","context":"With 47 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":165577,"url":"https:\/\/css-tricks.com\/video-screencasts\/132-quick-useful-case-sass-math-mixins\/","url_meta":{"origin":1283,"position":1},"title":"#132: A Quick Useful Case for Sass Math and Mixins","date":"March 13, 2014","format":false,"excerpt":"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 the container. Not too difficult, as we know from not\u2026","rel":"","context":"With 31 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18157,"url":"https:\/\/css-tricks.com\/lodge\/v10\/019-building-a-simple-grid\/","url_meta":{"origin":1283,"position":2},"title":"#019: Building a Simple Grid","date":"September 10, 2012","format":false,"excerpt":"The site design is shaping up to be very grid-like. Our modules will lay out very cleanly into a grid. But aren't grids complex and weird? And maybe we should go use some fancy framework out there? Nah. They're easy. We'll set a simple one up in just a few\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18162,"url":"https:\/\/css-tricks.com\/lodge\/v10\/020-finishing-the-grid-and-setting-up-modules\/","url_meta":{"origin":1283,"position":3},"title":"#020: Finishing the Grid and Setting Up Modules","date":"September 10, 2012","format":false,"excerpt":"Continuing the concept of \"Don't Overthink It Grids\", we get gutters going on in the grid by just using some simple padding. We keep the padding number consistant by reusing our global $padding variable. You'll find that we use that number a ton as we do our styling. We style\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18684,"url":"https:\/\/css-tricks.com\/lodge\/v10\/127-building-the-single-video-page-part-2\/","url_meta":{"origin":1283,"position":4},"title":"#127: Building the Single Video Page, Part 2","date":"October 2, 2012","format":false,"excerpt":"In this screencast we'll finish up code-wranglin' the template for single videos. We start by getting organized in our CSS a bit. Some of the videos.scss file is global to video-related pages. Some is specific to the archival pages and some is specific to single video pages. For now, it\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18250,"url":"https:\/\/css-tricks.com\/lodge\/v10\/032-making-the-grid-responsive\/","url_meta":{"origin":1283,"position":5},"title":"#032: Making The Grid Responsive","date":"September 12, 2012","format":false,"excerpt":"We start out with playing with our blog post module, fiddling around with spacing. We also add the little colored square in the upper left of the module, a visual signifier of the type of content that it is. The next change we make is to lessen some of the\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1283"}],"version-history":[{"count":134,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283\/revisions"}],"predecessor-version":[{"id":376709,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283\/revisions\/376709"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1283"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}