Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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 Rocks1

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 Security2

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!3

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 CSS4

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 CSS5

LocalStorage: Use It, Don’t Abuse It6

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 & Microdata7

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 List8

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

Last Click

Hacker Typer9

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 Pro10

Previous Issues11

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

Footnotes

  1. 1 http://www.html5rocks.com/en/tutorials/security/content-security-policy/
  2. 2 http://www.html5rocks.com/en/tutorials/security/content-security-policy/
  3. 3 http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/
  4. 4 http://css-tricks.com/circular-3d-buttons/
  5. 5 http://css-tricks.com/circular-3d-buttons/
  6. 6 https://localstorage-use-not-abuse.appspot.com/
  7. 7 http://demosthenes.info/blog/536/Adding-Phone-Numbers-To-Web-Pages-With-HTML5-amp-Microdata
  8. 8 http://www.brucelawson.co.uk/2012/reading-list-19/
  9. 9 http://hackertyper.com/
  10. 10 http://hackertyper.com/
  11. 11 www.smashingmagazine.com/the-smashing-daily-archive/
  12. 12 www.smashingmagazine.com/the-smashing-daily-archive/

↑ Back to top Tweet itShare on Facebook

Advertisement

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

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top