Smashing Newsletter: Issue #106
- April 1st, 2014
- 1 Comment
We love organizing conferences, but more specifically, we love creating memorable, lasting experiences. This is why we’ve started planning something quite… different! A Smashing NightConf42—yes, you’ve read it right! A conference that will take place at night, in a yet to be announced, quite daunting location. When? On Halloween this year, of course! If you want to experience a conference of a lifetime, this is the one to pay attention to.
The conference will start at exactly 11:59 PM and run all night until 4:59 AM. As usual, two days, one track, a truly smashing party, a number of late workshops and quite a few fantastic speakers. Since the conference will take place in a quite spectacular, cozy location, only few tickets will be available. Bringing along Batman costumes and similar accessories is highly recommended. Interested? Follow @NightConf on Twitter5 and stay updated.
— Vitaly (@smashingmag)
Table of Contents
01. Animated… Kiiiitttens!7
02. Web Experiments All The Way8
03. A Happy Little Parade Of Preloaders9
04. Oranges, Pickles And CSS Selectors10
05. WTF, HTML And CSS?11
06. We’re Sorry, Little Mouse!12
07. Posh, Superstar And Epical Cats13
08. How Fast Is Fast Enough?14
09. Good Riddance, Caps Lock Key?15
10. Cat Memes From Analogue Times16
11. Full-Day Smashing Workshops17
181. Animated … Kiiiitttens!
A Reddit user once asked Tim Bernes-Lee: “What was one of the things you never thought the internet would be used for, but has actually become one of the main reasons people use the internet?” He simply answered, “Kittens.”
Most of us could probably live without the tremendous amount of badly animated kitten pictures, however, Denis Sazhin actually has done a great job designing a nice deck of animated cats20 in all circumstances. Some of them are funny, others just weird, and some are a bit scary. An amusing GIF collection for various occasions! (ml)
212. Web Experiments All The Way
As the Web matures, we can look forward to many new features that change the way we present online content. Some of the new techniques now available even offer a much better reading experience, including visual effects, audio, video, transitions and interactive elements. Famou.us2422 highlights some of the interesting techniques, demos and experiments that can help you take storytelling to the next level.
Whether it’s a new tilt-shift technique, a text that reacts to audio, objects that animate all over the screen, or even a dynamic scroll that changes colors, Famou.us2422 has them all covered. And if you happen to be looking for more interface inspiration, make sure to visit Marcus Eckert’s UI Experiments25, Fun Buttons26 and Vice Versa: Diagonal UI Concept27, too. (ml)
283. A Happy Little Parade Of Preloaders
Preloaders are definitely not popular among online users, but who said that’s an excuse to neglect their design and rely on a dull default look instead? To put an end to those gray, spinning circles and make loading times more colorful, Pixel Buddha has released a set of happy animated preloaders29. And you know what? They’re of course free, too.
The preloaders are all made up of simple shapes, but unlike their common counterparts, their movements go far beyond simple spinning; imagine little bouncing balls, different colored dots that orbit each other, groups of dots doing cartwheels, and even circles that fold up into quarters. Fitting perfectly into your projects, the preloaders are available in three sizes and in GIF, AEP as well as PNG formats in the resolutions 32×32px, 64×64px and 128×128px. And if you need a more scalable solution, perhaps you’ll prefer to stick with SVG preloaders31 instead. Waiting will now be a lot more pleasant — guaranteed! (cm)
324. Oranges, Pickles And CSS Selectors
Imagine you’re sitting at a table, and on it is a bento box with an orange. Next to that box, you’ll find a pickle on a fancy plate as well as a pickle on a plain white plate. Now, your task is to select the pickle on the fancy plate, but not with your hands — and not with a fork either! Come on, you’re a pro, you can do it this with… a CSS selector!
That’s basically the essence of CSS Diner34. Designed by Luke Pacholski, it’s a nice little game that tests your CSS selector skills. In each of the 26 levels, you’ll see a table, set differently each time. The challenge is to select one particular element on the table by typing in the matching CSS selector. To help you picture the given scene in code, an HTML viewer visualizes it in markup form. And if that’s not enough, there are also short descriptions telling you more about the type of selector that is supposed to be used — great for beginners who want to dive deeper into the subject. Now who said CSS isn’t fun? (cm)
355. WTF, HTML And CSS?
Although HTML and CSS have been around for a long time, there are still workarounds that just make you want to scream out loud. Some are issues might be fixed in the near future, while others are long fixed dilemmas that are still in our heads and cause us to produce redundant or bad code.
“WTF, HTML and CSS?37“, curated by Mark Otto, is a list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas. Fortunately, you can use it to stay sane knowing that some of your encountered issues are commonly known and beyond your ability to fix. Others will be useful to resolve that issue that kept bugging you for years. (ml)
386. We’re Sorry, Little Mouse!
Have you ever thought about how many times you had to interrupt your flow to reach for your mouse? Definitely too many to count, and with an average of 1.5 seconds passing by for the hand-to-the-mouse-click-hand-back-to-the-keyboard-movement, your mouse robs you quite a bit of time. Well, not anymore. Shortcat4139 is a keyboard tool for Mac OS X that lets you “click” buttons and control your apps with a few keystrokes.
Shortcat4139 supports all applications that come with Mac OS X and most other applications as well. By simply activating the tool with a keyboard shortcut, you can type a few letters that match the UI element you want to click on, and Shortcat starts searching the current active window and the menu bar for your desired element. All you then have to do is hit enter, and voilà, you saved a click. The tool also lets you change settings in your system, switch chats in Skype or tabs in Chrome, browse the Web, and much more. A real productivity booster! (cm)
427. Posh, Superstar And Epical Cats
Yep, you get more cats! Fancy Posh Cats43, stunning Epical Cats44, funny iconic Superstar Cats45 and sets with Cute Cats46. Even if you think you’ve seen enough cats to last a lifetime, we promise you it’s still worth clicking on each one of these links! We’ve all noticed that cats are a huge hit on the Internet, but have you thought about why that is so? Well, we have!
Amy-Mae Elliot once brought up the million dollar question48, i.e. why in the world does the Web love cats so much? Is it because they’re cute, or not cute? Is it all a cat conspiracy? Amy tries to answer a good number of questions and comes up with some quite interesting and amusing answers that will help you understand these wonderful creatures a little bit more. (ea)
498. How Fast Is Fast Enough?
The obvious metrics is that you want your website to be around 20% faster52 than your competitor’s website, but you might want to quantify it. Paul Irish has recommended53 to shoot for delivering the critical-path view (above the fold) in the first 14kb of the page, keep 60fps scrolling and 60fps transitions, 200ms server response time and the WebPageTest’s Speed Index54 of under 1000. You can find more details in Paul’s Performance Tooling Slidedeck55. Good stuff! (vf)
569. Good Riddance, Caps Lock Key?
Who wants to live forever? The Highlander? Hmm, the Highlander actually had no choice. What about the Caps Lock key? Does the Caps Lock key want to live forever? Looks like it’s a bit tired… poor ol’ thing. It’s come so far. Introduced with the first typewriters in the 1800s, it’s made it ALL THE WAY from the old Remington to occupying prime real estate on fancy Apple notebooks.
Lately, the wannabe Highlander among the computer keys hasn’t gotten that much attention. It feels redundant and terrified by the danger of being replaced. “Caps Off” campaigns have been launched. Some folks have even pryed the key off58 of the keyboard. The world can be such a cruel place. The Caps Lock key often dreams of the good old days when capitalization was the only way to emphasize words. How many sweet moments does the world still have set aside for our old friend? IS IT ALL DECIDED FOR THE CAPS LOCK KEY? People have already said “Good Riddance59“, but Caps Lock is still around… (ea)
6010. Cat Memes From Analogue Times
Cats have become a real phenomenon on the Web. Considering all those cute, clumsy and grumpy kittens that appear on our screens almost on a daily basis, it’s easy to forget that cats also have a long history as creative muses in literature and poetry. Time to take that cat content to a bit more sophisticated level for a change, don’t you think?
A rich source for all things cat is The Big New Yorker Book of Cats62. The book is entirely dedicated to cats, spanning nearly nine decades of cat-coddling articles, essays, short stories, poems, cartoons, covers and other pieces of literature and art from the New Yorker archives. Nevertheless, before your mind gets blown away by too many kitties, you may want to start off slowly with a similar article on Brain Pickings. Featuring some highlights of the feline gatherings in the book, the article dives deep into recurring cat themes, the golden age of cat-themed covers, and the much interpreted characteristics of the little creatures. Cat memes aren’t even as new as most of us would’ve thought! (cm)
6311. Full-Day Smashing Workshops
There are so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, so what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our Front-End & RWD workshops are all about: full practical days that will help you become a better front-end warrior, today.
In fact, we’ve got a couple of practical, hands-on workshops coming up in different locations very soon. Here’s a brief overview of some:
- Responsive Web Design66 with Vitaly Friedman (Munich, DE),
- Responsive HTML Email67 with Fabio Carneiro (New York, US),
- Scalable CSS Architecture68 with Jonathan Snook (New York, US),
- Grid Design69 with Mark Boulton (New York, US),
- Photoshop + RWD70 with Dan Rose (New York, US),
- SVG and Data Visualization71 with Brian Suda (New York, US).
Also, if you’d like us to run an in-house workshop at your office, just get in touch with Vitaly at vitaly[at]smashingconf[dot]com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy! (vf)
The authors in this newsletter are: Melanie Lang (ml), Cosima Mielke (cm), Esther Arends (ea), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://lanyrd.com/2014/smashing-nightconf/
- 3 http://lanyrd.com/2014/smashing-nightconf/
- 4 http://lanyrd.com/2014/smashing-nightconf/
- 5 http://www.twitter.com/NightConf
- 6 http://lanyrd.com/2014/smashing-nightconf/
- 7 #a1
- 8 #a2
- 9 #a3
- 10 #a4
- 11 #a5
- 12 #a6
- 13 #a7
- 14 #a8
- 15 #a9
- 16 #a10
- 17 #a11
- 18 #
- 19 http://dribbble.com/iconka/projects/151578-Cat-Power
- 20 http://dribbble.com/iconka/projects/151578-Cat-Power
- 21 #
- 22 http://demo.famo.us/
- 23 http://demo.famo.us/
- 24 http://demo.famo.us/
- 25 http://marcus-experiments.tumblr.com/
- 26 http://dribbble.com/shots/1480083-Fun-Buttons
- 27 https://www.behance.net/gallery/VICE-VERSA-diagonal-UI-optimized-for-a-single-hand-IX/12419409
- 28 #
- 29 http://pixelbuddha.net/freebie/flat-preloaders
- 30 http://pixelbuddha.net/freebie/flat-preloaders
- 31 http://jxnblk.github.io/loading/
- 32 #
- 33 http://flukeout.github.io/
- 34 http://flukeout.github.io/
- 35 #
- 36 http://wtfhtmlcss.com/
- 37 http://wtfhtmlcss.com/
- 38 #
- 39 http://shortcatapp.com/
- 40 http://shortcatapp.com/
- 41 http://shortcatapp.com/
- 42 #
- 43 https://www.behance.net/gallery/Posh-Cats/15478635
- 44 https://www.behance.net/gallery/Epical-cats/4562183
- 45 http://edge.neocha.com/chinese-creatives/iconic-cats-illustration-series-from-shanghai-based-illustrator-a-ke/
- 46 https://www.behance.net/gallery/Sets-With-Cute-Cats/5595059
- 47 http://edge.neocha.com/chinese-creatives/iconic-cats-illustration-series-from-shanghai-based-illustrator-a-ke/
- 48 http://mashable.com/2010/10/21/why-does-the-web-love-cats/
- 49 #
- 50 http://timkadlec.com/2013/01/setting-a-performance-budget/
- 51 http://timkadlec.com/2013/01/setting-a-performance-budget/
- 52 http://timkadlec.com/2014/01/fast-enough/#comment-1200946500
- 53 https://docs.google.com/presentation/d/19R_E5B__kdE55L1bTpS6IFKbYbHq-PQKKky4do5Yc6A/present#slide=id.g105c64d69_146
- 54 https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
- 55 https://docs.google.com/presentation/d/19R_E5B__kdE55L1bTpS6IFKbYbHq-PQKKky4do5Yc6A/present#slide=id.p
- 56 #
- 57 http://www.slate.com/articles/technology/technology/2010/12/good_riddance.html
- 58 http://s-ak.buzzfed.com/static/imagebuzz/web03/2010/5/15/13/caps-lock-control-32258-1273943674-103.jpg
- 59 http://www.slate.com/articles/technology/technology/2010/12/good_riddance.html
- 60 #
- 61 http://www.brainpickings.org/index.php/2013/10/14/the-big-new-yorker-book-of-cats/
- 62 http://www.brainpickings.org/index.php/2013/10/14/the-big-new-yorker-book-of-cats/
- 63 #
- 64 https://www.flickr.com/photos/marcthiele/13216913243/
- 65 https://www.flickr.com/photos/marcthiele/13216913243/
- 66 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-munich.html
- 67 http://smashingconf.com/ny-2014/workshops/fabio-carneiro
- 68 http://smashingconf.com/ny-2014/workshops/jonathan-snook
- 69 http://smashingconf.com/ny-2014/workshops/mark-boulton
- 70 http://smashingconf.com/ny-2014/workshops/dan-rose
- 71 http://smashingconf.com/ny-2014/workshops/brian-suda