Smashing Daily #42: Security, LocalStorage, Idling

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!

An Introduction To Content Security Policy—HTML5 Rocks

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.

Client Side Security

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 focus and blur events to turn network activity on and off.

I Want A DAMNodeInserted Event!

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.

Crafting Minimal Circular 3-D Buttons With CSS

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.

Circular Buttons with CSS

LocalStorage: Use It, Don’t Abuse It

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.

Adding Phone Numbers To Web Pages With HTML5 & Microdata

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.

Extremely Thin Borders

Reading List

Do you want more to read? Here’s an excellent reading list by Bruce Lawson.

Last Click

Hacker Typer

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.

Type Like a Pro

Previous Issues

For previous Smashing Daily issues, check out the Smashing Daily Archive.

Vasilis van Gemert is the Principal Front-end Developer at Mirabeau in The Netherlands and a board member of Fronteers. His aim is to close the gap between design and (front-end) development. He believes the excess of knowledge he has can be better used by others, by more creative and smarter people. You can follow him on Twitter.

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top