In this edition of The Smashing Daily we have interesting links about client-side security, about localStorage, about circular buttons, about clickable telephone numbers, about half-pixels, about typing like a movie star, and much more. Enjoy!
More and more application logic is moving from the server to the client. This means that more and more security logic should move to the client, too. The Web Application Security Working Group is working on the specifications of the Content Security Policy which does exactly that: it adds layers of security to the client. Mike West explains how they work.
A Usage Saver Pattern For HTML Apps
Bandwidth can be pretty expensive (especially on mobile), so you might want to think about using it only when your app really needs it. One way to do this, explains Joe Stagner, is actually pretty easy: using the
blur events to turn network activity on and off.
Daniel Buchner wanted a
DAMNodeInserted event so he created one that works in most modern browsers. If you’re not sure why you’d want an event like that, be sure to read the comments.
You can actually create circular buttons with CSS only. Brandon Pierce explains how to do it in this detailed tutorial. I love his use of the words not a big deal when he shows the fall-backs for ancient IE versions. A good thing to remember is that these CSS buttons will look much better on retina displays (everybody in the future will eventually have one) than an image.
There are some rumors about localStorage—the worst of which claims it would slow things down. It can slow things down when used without caution. Pamela Fox created this excellent presentation in which she explains how to use it to make your website better.
My mobile phone turns all numbers that look like a phone number into a link which will open my phone app. Not all phones do this (and desktop browsers definitely don’t), so you might want to make all telephone numbers clickable. Dudley Storey explains how to do this. But I would ignore his advice about Skype though, that’s a very future unfriendly thing to do!
Mobile Web In High Resolution
As you may already know, on Apple’s retina displays, one pixel is usually drawn by two pixels (yes, that’s crazy, I know). Sometimes you might want to create a really, really thin border on retina displays—you can’t use
border-width: 0.5px, but Brad Birdsall figured out a way to do it. Not yet sure how it works out on the new retina MacBook display.
Do you want more to read? Here’s an excellent reading list by Bruce Lawson.
If you want to impress your boss while you’re idling at work, you may want to fire up this incredibly useful—useful in this case only—Web app. It makes you look like a hacker from a movie.
- 1 http://www.html5rocks.com/en/tutorials/security/content-security-policy/
- 2 http://www.html5rocks.com/en/tutorials/security/content-security-policy/
- 3 http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/
- 4 http://css-tricks.com/circular-3d-buttons/
- 5 http://css-tricks.com/circular-3d-buttons/
- 6 https://localstorage-use-not-abuse.appspot.com/
- 7 http://demosthenes.info/blog/536/Adding-Phone-Numbers-To-Web-Pages-With-HTML5-amp-Microdata
- 8 http://www.brucelawson.co.uk/2012/reading-list-19/
- 9 http://hackertyper.com/
- 10 http://hackertyper.com/
- 11 www.smashingmagazine.com/the-smashing-daily-archive/
- 12 www.smashingmagazine.com/the-smashing-daily-archive/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.