About The Author

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol’ web with the latest tips and tricks for … More about The Smashing…

Smashing Newsletter: Issue #172

Quick Summary

Table of Contents

This newsletter issue was sent out to 233,520 newsletter subscribers on Tuesday, December 13th 2016. If you are not subscribed yet, feel free to subscribe to our email newsletter anytime.

December is a quite magical month of the year. Not only because everything gets slower, giving you time to reflect and plan ahead, but also because it pulls you away from the routine of the working day. The new year always stands for new beginnings, so once you’ve returned from your break, your perspective on your tools, techniques and workflow may look quite different. After all, who doesn’t have a little side project to explore something new during the calm holiday season?

advent calendar box templates

Luckily, the community is right here to distract you with all kinds of fancy techniques, strategies and tools. Just like every year, 24ways, the advent calendar for web geeks, has opened its doors this year as well, with 24 upcoming articles highlighting the new challenges and possibilities on the web. So does 12 devs of Xmas and Web Advent Today as well. UXMas is an advent calendar for UX geeks, while Performance Calendar provides the speed geek’s favorite time of the year.

There are advent calendars for pretty much everybody: JavaScript, Sysadmin topics, Content Strategy and general Xmas Experiments. Also, if you’re into programming puzzles, Advent of Code is a series of tricky puzzles for a variety of skill levels. Now, this will keep you busy for a while!

Not enough? Well, then snuggle up and get cozy in these cold, breezy days with a couple of handy smashing books, like the Sketch Handbook or Inclusive Design book, and maybe even get prepared for next year’s SmashingConf San Francisco (early-bird prices available only until late December)!

Have fantastic holidays, and don’t work too hard! – Vitaly (@smashingmag)

Table of Contents

  1. A Little Help From Santa
  2. The Design Kids Are Here!
  3. A Visual Guide To CSS Properties
  4. 10×16 = Eye And Ear Candy
  5. One Day, One Experiment
  6. Responsive Layouts With Style Scoping
  7. Free Video Course: Learn Vanilla JavaScript In 30 Days
  8. Upcoming Smashing Workshops
  9. New On Smashing Job Board
  10. Smashing Highlights (From Our Archives)
  11. Recent Articles On Smashing Magazine

[](#)1. A Little Help From Santa

Christmas is coming closer, and, well, who doesn’t want to gift their loved ones the perfect gift? If you’re still not sure what to put under the tree this year, the folks at Brooklyn-based digital agency Huge might have just the right suggestion for you. They recently shared the gifts they’re giving and the ones they’d like to get in return, and assembled a holiday gift guide out of it that has something for nearly everyone — coffee connoiseurs, typophiles, wannabe barkeepers, hobby chefs, outdoor lovers, the kids, and the kids at heart.

Holiday Gift Guide

If you’re on the hunt for something extra-geeky to surprise your favorite developer buddy or perhaps your teen nephew, also be sure to browse by Think Geek. Just because things can’t get any geekier than a Back To The Future Flux Capacitor Wristwatch or lightsaber chopsticks, can they? (cm)

[](#)2. The Design Kids Are Here!

If you’ve just graduated from design school and are about to gain a foothold in the design industry, it’s good to have a network of like-minded people to make the transition into professional life a bit smoother. The Design Kids, a global community of students and new-fledged designers, attempts to provide just that network.

The Design Kids

The concept behind it is simple, yet powerful. It aims to bring students, grads and pros together in local meet-ups, design events and competitions to bridge the gap between the graphic design industry and college. To get young designers a step closer to landing their dream job, the platform also hosts job and internship listings and provides professional advice. A selection of cities in the US, Canada, Australia and New Zealand are already covered on The Design Kids; Europe and South America will follow hopefully soon. (cm)

[](#)3. A Visual Guide To CSS Properties

When front-end designer Jeremy Thomas was looking for a simple CSS reference guide but couldn’t find any, he decided to make one himself. And, well, the result of his endeavor is nothing short of impressive: CSS Reference.

CSS Properties

CSS Reference lists the most popular CSS properties (nearly 130 in total) and visualizes their effect with illustrated (sometimes even animated) examples. A cool additional feature: You can click on a property, and it will be copied to your clipboard so you can paste it into your code and use it right away. Perfect to refresh your CSS know-how. (cm)

[](#)4. 10×16 = Eye And Ear Candy

The end of the year is traditionally the time for countdowns and best-of lists. A music countdown of the special sort that is not only bound to make music but also make design lovers’ hearts skip a beat is 10×16. Its mission: 19 visual artists count down their ten favorite albums of 2016 — by reimagining their cover art. Eye and ear candy guaranteed!

10×16

Among the featured designers are names like Jessica Hische, Adam R. Garcia, Damien Correll, and Erik Marinovich. While their styles are as diverse as the music on the albums themselves, one shared color palette keeps all artwork visually together without making it boring. By the way, if you want to tune in to one of the newly discovered albums, there’s a sample song embedded for each one. Happy browsing! (cm)

[](#)5. One Day, One Experiment

When we were little, Christmas was a time of magic and wonders. As we grew older, that feeling of sweet anticipation which we felt back then as the big day approached has faded or even vanished completely. A lovely project that could bring back some of that wonder to our December days are the Christmas Experiments that David Ronai started back in 2012 and that have now returned for a 2016 edition.

Christmas Experiments

Each day up to Christmas, the project reveals another jaw-dropping digital experiment — be it a mini game or some other interactive experiment — to highlight the skills of top web creatives just like of promising newcomers. And, well, surprises are guaranteed indeed. One day you might smash a piñata, the next you’ll need to save Christmas and help Santa get back on track after a night of partying. But, psst, we won’t reveal more just yet. Go and see for yourself. (cm)

[](#)6. Responsive Layouts With Style Scoping

Style scoping. Tommy Hodgins has been experimenting with the CSS concept for the past couple of years even though all development for supporting style scoping has been stopped. Why? Well, paired with any kind of responsive query, style scoping provides a powerful new way to build responsive layouts, as Tommy describes in a recent blog post.

Style Scoping

The essential idea behind style scoping is that you can select an element anywhere in your document and make it a point of reference as you write styles. That’s especially useful to make sure that certain styles are contained within the scope of the element they apply to and prevent them from being applied to anything else on the page. By adding responsive conditions to scoped styles, you can build “self-responsive” modules that adjust themselves based on their size or the size of the container, not the global viewport. Even though there is no specification for style scoping, JavaScript plugins such as EQCSS or an additional build step make it possible to use it in all browsers. Tommy Hodgins describes how. (cm)

[](#)7. Free Video Course: Learn Vanilla JavaScript In 30 Days

You’ve tried to wrap your head around JavaScript but still don’t feel comfortable using it? Then go ahead and build things. Lots of things. Yes, 1,000 things! That’s the advice Wes Bos gives, and that’s also the foundation of his new free JavaScript 30 video course.

JavaScript 30

The course will teach you the JavaScript fundamentals — in 30 days. No frameworks, no compilers, no libraries, no boilerplate. Instead, you’ll learn plain, vanilla JavaScript by building 30 things with 30 tutorials. To follow along with the exercises, you should already have a basic understanding of JS, though. Signing up for the course is free, just enter your email address, and you’ll get all videos and starter files instantly delivered to your inbox. (cm)

[](#)8. Upcoming Smashing Workshops

With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

Smashing Public Workshops

Workshops at SmashingConf San Francisco 2017

Our Public Workshops

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.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!

[](#)9. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • Senior Cloud Engineer at The American Institutes for Research (Washington) “We are currently seeking a Senior Cloud Engineer to join our team in the Washington, DC office.”
  • Senior Ruby on Rails Developer at Ben Kinney Companies Tech Division (Bellingham, Washington) “We’re looking for someone with a passion for programming and for writing beautiful code who’ll join a team of exceptional developers.”
  • UX Designer at PVH Europe BV (Tommy Hilfiger & Calvin Klein) (Amsterdam, The Netherlands) “We are looking for a talented User Interface Designer to create amazing user experiences.”

[](#)10. Smashing Highlights (From Our Archives)

  • Why Performance Matters, Part 3: Tolerance Management When technical performance optimizations reach certain limits, psychology and perception management might help us to push the limits further. Waiting can consist of active and passive phases; for the user to perceive a wait as a shorter one, we increase the active phase and reduce the passive phase of the wait. But what do we do when the event is a purely passive wait, with no active phase at all? Can we push the limits even further?
  • Design Principles: Visual Weight And Direction Every element on a web page exerts a visual force that attracts the eye of the viewer. The greater the force, the more the eye is attracted. These forces also appear to act on other elements, imparting a visual direction to their potential movement and suggesting where you should look next.
  • “Be Careful: Trends Come And Go” As one of the top designers on Dribbble, Jan Martin attracts many followers with his visual design skills. Unlike many designers, Jan is incredibly humble about what he has achieved. “Stop following what the visionary designers think,” he says. “There is no wrong or right way. We need to create our own things and always design with our heart.”

[](#)11. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.