Paul Irish goes on a walk through of some awesome Google Chrome DevTools features. Some of the great features to learn about:
-
Edit and save files right in the browser with workspaces. You can view changes live and persist changes ma...
By tag: html
Develop right in Chrome DevTools ... with Sass too! (Google I/O 2013)
*
Web Components in Action (Google I/O 2013)
A very interesting walk through of web components from a talk at Google I/O 2013 by Matthew McNulty and Alex Komoroske. These folks have developed a javascript library po...
*
Jekyll and static sites (The Web Ahead on 5by5)
In this podcast, Jen Simmons talks to Young Hahn and Dave Cole on the Web Ahead (on the 5by5 network) about Jekyll and static sites. Lots of interest here.
*
Building a simple banner heading effect using HTML and CSS
Add a bit of style to headings or other information with a pure HTML and CSS banner effect.
First Steps
Let's look at how to create the effect used in this box. First we need some sample HTML to use in our examples:
...
*
Building a banner heading effect using HTML and CSS: Part 2
We take a look at how to add a bit of extra flourish to a pure HTML and CSS banner. We’re going to add a tail to an existing banner. You’ll need to use the code for the effect already created in part 1.
A forked tail
Le...
*
Multi-column lists losing their bullets
If you’re trying the CSS columns property, or its various browser prefixed variants, you may notice your bullet points disappearing. This can happen on Chrome and to a lesser extent on Opera.
The Problem
Take the following HTML for a list:
...*
A simple Nanoc filter to compress HTML using Nokogiri
When using Nanoc, there are standard filter options for compressing CSS and minifying javascript, but there’s no equivalent for HTML. However, we can use Nokogiri to trim our HTML a little by removing some whitespace and getting rid of comments.
To do this, we’re going to build a custom Nanoc filter. Create a
new file in lib/f...
*