Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #172

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 newsletter1 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 templates2

Luckily, the community is right here to distract you with all kinds of fancy techniques, strategies and tools. Just like every year, 24ways3, 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 Xmas4 and Web Advent Today5 as well. UXMas6 is an advent calendar for UX geeks, while Performance Calendar7 provides the speed geek’s favorite time of the year.

There are advent calendars for pretty much everybody: JavaScript8, Sysadmin topics9, Content Strategy10 and general Xmas Experiments11. Also, if you’re into programming puzzles, Advent of Code12 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 Handbook13 or Inclusive Design14 book, and maybe even get prepared for next year’s SmashingConf San Francisco15 (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 Santa16
  2. The Design Kids Are Here!17
  3. A Visual Guide To CSS Properties18
  4. 10×16 = Eye And Ear Candy19
  5. One Day, One Experiment20
  6. Responsive Layouts With Style Scoping21
  7. Free Video Course: Learn Vanilla JavaScript In 30 Days22
  8. Upcoming Smashing Workshops23
  9. New On Smashing Job Board24
  10. Smashing Highlights (From Our Archives)25
  11. Recent Articles On Smashing Magazine26

271. 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 guide28 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 Guide29

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 Geek30. Just because things can’t get any geekier than a Back To The Future Flux Capacitor Wristwatch or lightsaber chopsticks, can they? (cm)

312. 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 Kids32, a global community of students and new-fledged designers, attempts to provide just that network.

The Design Kids33

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)

343. 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 Reference35.

CSS Properties36

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)

374. 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×1638. Its mission: 19 visual artists count down their ten favorite albums of 2016 — by reimagining their cover art. Eye and ear candy guaranteed!

10×1639

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)

405. 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 Experiments41 that David Ronai started back in 2012 and that have now returned for a 2016 edition.

Christmas Experiments42

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)

436. 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 layouts44, as Tommy describes in a recent blog post.

Style Scoping45

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)

467. 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 3047 video course.

JavaScript 3048

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)

498. 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 Workshops50

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.com60 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!

619. New On Smashing Job Board

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

  • Senior Cloud Engineer63 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 Developer64 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 Designer65 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.”

6610. Smashing Highlights (From Our Archives)

  • Why Performance Matters, Part 3: Tolerance Management67
    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 Direction68
    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”69
    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.”

7011. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 https://www.flickr.com/photos/littlestuffme/8961739529
  3. 3 https://24ways.org
  4. 4 http://12devsofxmas.co.uk/
  5. 5 http://web.advent.today/
  6. 6 http://uxmas.com/
  7. 7 http://calendar.perfplanet.com/2016/
  8. 8 https://remysharp.com/2016#december
  9. 9 http://sysadvent.blogspot.lt/
  10. 10 https://gathercontent.com/advent-calendar
  11. 11 http://christmasexperiments.com/
  12. 12 http://adventofcode.com/
  13. 13 https://www.smashingmagazine.com/sketch-handbook/
  14. 14 https://www.smashingmagazine.com/inclusive-design-patterns/
  15. 15 https://smashingconf.com/
  16. 16 #a1
  17. 17 #a2
  18. 18 #a3
  19. 19 #a4
  20. 20 #a5
  21. 21 #a6
  22. 22 #a7
  23. 23 #a8
  24. 24 #a9
  25. 25 #a10
  26. 26 #a11
  27. 27 #
  28. 28 https://magenta.as/a-holiday-gift-guide-for-design-and-tech-snobs-945c56c33ce4#.e2yd87zj5
  29. 29 https://magenta.as/a-holiday-gift-guide-for-design-and-tech-snobs-945c56c33ce4#.e2yd87zj5
  30. 30 https://www.thinkgeek.com/gifts/
  31. 31 #
  32. 32 http://thedesignkids.org/
  33. 33 http://thedesignkids.org/
  34. 34 #
  35. 35 http://cssreference.io/
  36. 36 http://cssreference.io/
  37. 37 #
  38. 38 http://10x16.com/
  39. 39 http://10x16.com/
  40. 40 #
  41. 41 http://christmasexperiments.com/
  42. 42 http://christmasexperiments.com/
  43. 43 #
  44. 44 http://codepen.io/tomhodgins/post/how-style-scoping-works-with-element-queries
  45. 45 http://codepen.io/tomhodgins/post/how-style-scoping-works-with-element-queries
  46. 46 #
  47. 47 https://javascript30.com/
  48. 48 https://javascript30.com/
  49. 49 #
  50. 50 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
  51. 51 https://shop.smashingmagazine.com/products/workshop-nathan-curtis-SF-2017
  52. 52 https://shop.smashingmagazine.com/products/tim-kadlec-http2-performance
  53. 53 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-design-SF-2017
  54. 54 https://shop.smashingmagazine.com/products/workshop-chris-holst-SF-2017
  55. 55 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-SF-2017
  56. 56 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-sf-2017
  57. 57 https://shop.smashingmagazine.com/products/workshop-nadieh-bremer-sf-2017
  58. 58 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-SF-2017
  59. 59 https://swissmobidevs.org/workshop-vitaly-friedman-smart-responsive-design-patterns/
  60. 60 mailto:vitaly@smashingconf.com
  61. 61 #
  62. 62 http://jobs.smashingmagazine.com/
  63. 63 http://jobs.smashingmagazine.com/j/Senior-Cloud-Engineer/2453728
  64. 64 http://jobs.smashingmagazine.com/j/Senior-Ruby-on-Rails-Developer/2453665
  65. 65 http://jobs.smashingmagazine.com/j/UX-Designer/2453340
  66. 66 #
  67. 67 https://www.smashingmagazine.com/2015/12/performance-matters-part-3-tolerance-management/
  68. 68 https://www.smashingmagazine.com/2014/12/design-principles-visual-weight-direction/
  69. 69 https://www.smashingmagazine.com/2013/12/interview-with-designer-jan-martin/
  70. 70 #
  71. 71 https://www.smashingmagazine.com/2016/12/how-creating-a-design-language-can-streamline-your-ux-design-process/
  72. 72 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
  73. 73 https://www.smashingmagazine.com/atomic-design-workflow/
  74. 74 https://www.smashingmagazine.com/2016/11/enhancing-grid-design-guideguide-plugin-photoshop-illustrator/
  75. 75 https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
  76. 76 https://www.smashingmagazine.com/2016/12/progressive-web-amps/
  77. 77 https://www.smashingmagazine.com/2016/11/how-to-build-a-spritekit-game-in-swift-3-part-1/
  78. 78 https://www.smashingmagazine.com/2016/12/how-to-build-a-spritekit-game-in-swift-3-part-2/
  79. 79 https://www.smashingmagazine.com/2016/12/how-to-build-a-spritekit-game-in-swift-3-part-3/
  80. 80 https://www.smashingmagazine.com/2016/12/christmas-goodies-free-winter-and-holiday-inspired-icon-sets/
  81. 81 https://www.smashingmagazine.com/2016/12/freebie-christmas-advent-icon-set-25-icons-ai-eps-svg-png-pdf/
  82. 82 https://www.smashingmagazine.com/2016/11/christmas-wallpaper-calendars-2016/
  83. 83 https://www.smashingmagazine.com/2016/12/breaking-out-of-the-box-design-inspiration-december-2016/
  84. 84 https://www.smashingmagazine.com/2016/12/brush-lettering-it-only-gets-better-after-practice-part-2/
  85. 85 https://www.smashingmagazine.com/2016/12/web-development-reading-list-162/
  86. 86 https://www.smashingmagazine.com/2016/12/web-development-reading-list-161/
  87. 87 https://www.smashingmagazine.com/sketch-handbook/

↑ Back to top Tweet itShare on Facebook

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

  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