Smashing Daily #47: Box-Sizing, Searching, SVG
A tutorial about timed notifications with CSS, a presentation about mobile Web performance, a story about box-sizing, everything you need to know about unicode, the most important skill for a Web developer and a great article that explains SVG clipPath. All this, and more, in today’s Smashing Daily. Enjoy!
Performance is important, but the lessons we learned from desktop Web performance are not always sufficient when we’re working with mobile Web. Estelle Weyl created this presentation in which she explains in depth the things you should know about performance when working on mobile websites. You should definitely click through it.
Here’s a nice tutorial by Manoela Ilic for creating timed notifications with CSS animations (notifications that disappear after a while).
Here’s a great post by David Storey which starts off as a story about Web development and Web design, and how it has evolved over the last decades from a combination of tables to a wonderful set of techniques. Later, it turns into a post which looks at all the pros and cons of using
box-sizing: border-box. A great read.
One of the most important skills a Web developer needs is that they should know how to search for things that they don’t know, or can’t remember—they must know how to google. Here are some great tips for people who want to work on that skill.
There’s an easy way to emulate touch events in Chrome for the desktop, and Martin Kool explains how to do it.
One of the best things about HTML5 is that instead of copying and pasting this code
from an arbitrary Web page, we can now just write down, from memory, this code:
. Yes, it’s true that we can remember it. But what does it mean, and what does it do, exactly? Paul Tero explains.
If you’re organizing a conference or an event and you’re about to invite people to speak, be sure to check this simple list of questions one needs to answer with the invitation.
Do you need more to read? Here’s an excellent reading list by Bruce Lawson with links about the Web industry, Web standards and more.
In this nice tutorial Sawyer Hollenshead explains how you can use SVG clipPath for some great-looking effects. Never worked with SVG before? Then why not start here?
- 1 http://estelle.github.com/mobileperf/
- 2 http://estelle.github.com/mobileperf/
- 3 http://tympanus.net/codrops/2012/06/25/timed-notifications-with-css-animations/
- 4 http://tympanus.net/codrops/2012/06/25/timed-notifications-with-css-animations/
- 5 http://generatedcontent.org/post/25832131984/box-sizing
- 6 http://www.johntedesco.net/blog/2012/06/21/how-to-solve-impossible-problems-daniel-russells-awesome-google-search-techniques/
- 7 http://martinkool.com/post/24459554064/emulate-touch-events-in-chrome
- 8 http://coding.smashingmagazine.com/2012/06/06/all-about-unicode-utf8-character-sets/
- 9 http://coding.smashingmagazine.com/2012/06/06/all-about-unicode-utf8-character-sets/
- 10 http://www.la-grange.net/karl/conference
- 11 http://www.brucelawson.co.uk/2012/reading-list-20/
- 12 http://sawyerhollenshead.com/writing/23/using-svg-clippath/
- 13 http://sawyerhollenshead.com/writing/23/using-svg-clippath/
- 14 www.smashingmagazine.com/the-smashing-daily-archive/
- 15 www.smashingmagazine.com/the-smashing-daily-archive/