Smashing Newsletter: Issue #106

This newsletter issue was sent out to 176,974 newsletter subscribers on Tuesday, April 1st 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

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.

Editorial3
Smashing NightConf42, taking place in a quite daunting location on Halloween this year.

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.

Ah, you’re probably thinking that this is one of those April Fool’s Day pranks? Well, maybe, but maybe not6. See you in October? ;-)

— 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.”

Animated … Kiiiitttens!19

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.

Web Experiments All The Way23

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.

A Happy Little Parade Of Preloaders30

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!

Oranges, Pickles And CSS Selectors33

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?36

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.

We're Sorry, Little Mouse!40

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!

Posh, Superstar And Epical Cats47

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?

Everybody wants to have a fast website, but often you can optimize just so far. So the question about performance becomes a matter of compromise: between heavy visual eye-candy for Retina displays and a reasonable file size on mobile devices; between client’s need for a fancy slideshow and the number of JavaScripts required. We do need boundaries and constraints, but more specifically a clear understanding of what we want to achieve. In fact, we, of course, can set a performance budget50 and try to keep the website’s size within that budget. But how would the budget look like? How fast is fast enough?

How Fast Is Fast Enough?51

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.

Good Riddance, Caps Lock Key?57

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?

Cat Memes From Analogue Times61

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.

Full-Day Smashing Workshops64
At one of the Smashing front-end workshops, with Ben Bodien. Image credit: (Marc Thiele65)

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:

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).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://lanyrd.com/2014/smashing-nightconf/
  3. 3 http://lanyrd.com/2014/smashing-nightconf/
  4. 4 http://lanyrd.com/2014/smashing-nightconf/
  5. 5 http://www.twitter.com/NightConf
  6. 6 http://lanyrd.com/2014/smashing-nightconf/
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16 #a10
  17. 17 #a11
  18. 18 #
  19. 19 http://dribbble.com/iconka/projects/151578-Cat-Power
  20. 20 http://dribbble.com/iconka/projects/151578-Cat-Power
  21. 21 #
  22. 22 http://demo.famo.us/
  23. 23 http://demo.famo.us/
  24. 24 http://demo.famo.us/
  25. 25 http://marcus-experiments.tumblr.com/
  26. 26 http://dribbble.com/shots/1480083-Fun-Buttons
  27. 27 https://www.behance.net/gallery/VICE-VERSA-diagonal-UI-optimized-for-a-single-hand-IX/12419409
  28. 28 #
  29. 29 http://pixelbuddha.net/freebie/flat-preloaders
  30. 30 http://pixelbuddha.net/freebie/flat-preloaders
  31. 31 http://jxnblk.github.io/loading/
  32. 32 #
  33. 33 http://flukeout.github.io/
  34. 34 http://flukeout.github.io/
  35. 35 #
  36. 36 http://wtfhtmlcss.com/
  37. 37 http://wtfhtmlcss.com/
  38. 38 #
  39. 39 http://shortcatapp.com/
  40. 40 http://shortcatapp.com/
  41. 41 http://shortcatapp.com/
  42. 42 #
  43. 43 https://www.behance.net/gallery/Posh-Cats/15478635
  44. 44 https://www.behance.net/gallery/Epical-cats/4562183
  45. 45 http://edge.neocha.com/chinese-creatives/iconic-cats-illustration-series-from-shanghai-based-illustrator-a-ke/
  46. 46 https://www.behance.net/gallery/Sets-With-Cute-Cats/5595059
  47. 47 http://edge.neocha.com/chinese-creatives/iconic-cats-illustration-series-from-shanghai-based-illustrator-a-ke/
  48. 48 http://mashable.com/2010/10/21/why-does-the-web-love-cats/
  49. 49 #
  50. 50 http://timkadlec.com/2013/01/setting-a-performance-budget/
  51. 51 http://timkadlec.com/2013/01/setting-a-performance-budget/
  52. 52 http://timkadlec.com/2014/01/fast-enough/#comment-1200946500
  53. 53 https://docs.google.com/presentation/d/19R_E5B__kdE55L1bTpS6IFKbYbHq-PQKKky4do5Yc6A/present#slide=id.g105c64d69_146
  54. 54 https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
  55. 55 https://docs.google.com/presentation/d/19R_E5B__kdE55L1bTpS6IFKbYbHq-PQKKky4do5Yc6A/present#slide=id.p
  56. 56 #
  57. 57 http://www.slate.com/articles/technology/technology/2010/12/good_riddance.html
  58. 58 http://s-ak.buzzfed.com/static/imagebuzz/web03/2010/5/15/13/caps-lock-control-32258-1273943674-103.jpg
  59. 59 http://www.slate.com/articles/technology/technology/2010/12/good_riddance.html
  60. 60 #
  61. 61 http://www.brainpickings.org/index.php/2013/10/14/the-big-new-yorker-book-of-cats/
  62. 62 http://www.brainpickings.org/index.php/2013/10/14/the-big-new-yorker-book-of-cats/
  63. 63 #
  64. 64 https://www.flickr.com/photos/marcthiele/13216913243/
  65. 65 https://www.flickr.com/photos/marcthiele/13216913243/
  66. 66 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-munich.html
  67. 67 http://smashingconf.com/ny-2014/workshops/fabio-carneiro
  68. 68 http://smashingconf.com/ny-2014/workshops/jonathan-snook
  69. 69 http://smashingconf.com/ny-2014/workshops/mark-boulton
  70. 70 http://smashingconf.com/ny-2014/workshops/dan-rose
  71. 71 http://smashingconf.com/ny-2014/workshops/brian-suda

The Smashing Newsletter Team prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' Web with the latest tips and tricks for designers and Web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

Advertising
  1. 1

    Hi,

    Nice article, im working on making PixelBuddha loaders in css3/less. You can check a little preview of the work here: http://jsbin.com/bahah/16 .

    0

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