Mountains
On every mountain there is a path, although it may not be seen from the valley.
Blag
Static Checklist
- Create CSS for static checklists
- Create facebook share image for static checklists
- Write blog post about static checklist CSS
I decided that the next feature I wanted on my blag was the ability to add static checklists. I had an initial concept for how I wanted them to work. It revolved around using
[data-*]attributes to specify the checked state of list items, which would override the default list item styling.Scalable videos with aspect ratio
Earlier today I found a question that had been bugging me for some time. How do you preserve an element's aspect ratio when it's scaled? I hadn't yet found the answer, so I did some quick googling, and quickly found out about a simple trick to preserve aspect ratio with only CSS and a bit of extra markup.
Mumford and sons
I'd drag my testicles through a mile of broken glass just to hear them fart through a walkie-talkie.
Bookmark this site
A client requested that we add a bubble on the mobile version of the website to tell users to bookmark the page to their home screen on iPhone.
In related news, the '90s called and asked for their terrible user experience back.
Grouplove "Ways to Go"
Permalink: Grouplove "Ways to Go"This one's been stuck in my head the last few days.
Africa (cover)
Permalink: Africa (cover)Mike Masse and Jeff Hall perform an absolutely amazing acoustic cover of "Africa".
CSS selectors you should code without
Sara Vieira's recent post on webdesignerdepot titled "10 CSS selectors you shouldn't code without" is well-intended but starts off on the wrong foot.
The problem lies with selector number one on the list: the universal selector (
*).Double Data
I keep seeing people write CSS and jQuery selectors to act on elements with
[data-*]attributes where the initial selector is a class. More often than not the class adds more bloat to the code and ends up becoming a secondary point of failure.Why bother writing
$('.foo').data('bar');when the data should really be accessed using$('[data-bar]').data('bar')?This changes the HTML markup from:
<div class="foo" data-bar="lorem ipsum dolor sit amet">...</div>to:
<div data-bar="lorem ipsum dolor sit amet">...</div>How nice is that? No class! One less thing to forget.
Quick Google Hangouts
Recently I've been needing to do some video conferencing at work. "Google Hangouts" has been the video conferencing app of choice. For the uninitiated it can be difficult to figure out how to start a hangout for a group of people on video chat.
It's quite simple really. Just go to https://plus.google.com/hangouts/_ and you'll be redirected to a new google hangout. The ID will be appended to the end of the URL which will look something along the lines of
https://plus.google.com/hangouts/_/abc123abc123abc123abc123abc123.You can then copy and paste the generated URL to share it with anyone who should join the call.