Favicons Next To External Links
May
26
2012
32
A couple of techniques and food for thought around the idea of adding a favicon next to links on websites.
HTML for Icon Font Usage
May
24
2012
Where are we at right now in terms of the best markup for using icon fonts? Let’s cover some options I think are currently the best.…
SASS vs. LESS
May
16
2012
“Which CSS preprocessor language should I choose?” is a hot topic lately. I’ve been asked in person several times and an online debate has been popping up every few days it seems. It’s nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let’s do this thing.
Really short answer: SASS
Slightly longer answer: SASS is better on a whole bunch of different fronts, but if you are …
Which responsive images solution should you use?
May
11
2012
There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques.
The spreadsheet has the data, but let’s digest it through thinking about it through the lens of practical questions.…
Opt-in Typography
May
7
2012
I recently heard Chris Eppstein give a talk (slides) about creating better stylesheets and using SASS to do it. There were a couple of surprising bits in there, one of which was about “opt-in typography.” The idea was that instead of setting global styles for typographic elements like p, ul, ol, h1, h2, etc that you would instead apply those styles as a class, perhaps .text. …
Latest Snippets
- Glowing Blue Input Highlights
- Mixins for Rem Font Sizing
- Base64 Encode of 1x1px Transparent GIF
- Post Data to an iframe
- Append / Prepend Files
- Subdirectories URL Internally Redirect to Query String
- Support Tabs in Textareas
- Lazy Loading Images
- Remove Specific Value from Array
- Paste Events
- Remove LI Elements From Output of wp_nav_menu
- Remove Width and Height Attributes From Inserted Images
- Calendar Function
- Create Data URI’s
Latest Screencast
#111: Get Yourself Preprocessing in Just a Few Minutes
There is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple project in which we use Jade and Sass on. We use CodeKit to watch the project, which not only makes the preprocessing trivially easy, but helps in more ways like refreshing the browser, injecting styles, and optimizing images.
Links from the video:
Hot Links
WordPress Meet Responsive Design →
Ian Stewart, Sara Cannon and I are featured in this lovely little (free) book on Responsive Web Design and WordPress. It's a part of the new Code Poet, a new thingy by Automattic full of high quality resources on WordPress development.
The real conflict behind <picture> and @srcset →
Jason Grigsby explains it. Essentially: Browsers use a "pre-parser" to find resources in a document it will later need. This plays a huge role in making them fast. It can't wait around for layout information, which is exactly what responsive images need to make a smart call.
Coda 2 →
This will be worth giving a real shot.