Smashing Newsletter #172: Front-End Tips, Element Queries and A Little Help From Santa

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. Issue #172 • Tuesday, December 13th 2016 • 233,520 readers • [View in the browser] [Smashing Email Newsletter] Dear Friends, 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? [Winter is a great time for designers and developers, with legendary advent calendars appearing annually.] Winter is a great time for designers and developers, with legendary advent calendars appearing annually. 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) --------------------------------------------------------------- Our sponsor: Simplify Website Administration With The New Plesk Creating and running web projects can be frustrating, especially if your tools don't play well with one another. The recently updated [Plesk Onyx] was built to integrate with all the amazing tools you use. It has a neat Let's Encrypt and Slack integration, supports automated deploys through Git, creating multiple Docker containers at once, manages all the CMSs (plugins included), and so much more. Check out their [demo and free trial]. [plesk] --------------------------------------------------------------- 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) --------------------------------------------------------------- Our sponsor: GraphicStock Is Giving You 7 Days To Download Anything You Want Most stock image platforms ask you to pay per image or purchase an expensive monthly subscription with download limits. The idea behind [GraphicStock] is different. They grant you access to over 300,000 images with no download limitations and for a low yearly fee of USD 99. There's a free 7-day trial available, and anything that you download during the trial period is yours to keep and use forever. [Happy downloading]! [GraphicStock] --------------------------------------------------------------- 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) --------------------------------------------------------------- Our sponsor: Online Masters in Information Design and Strategy [Ad] Learn to drive effective digital communication. --------------------------------------------------------------- 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 - [Scalable Design Systems] with Nathan Curtis (April 3rd) - [Building Performant Websites] with Tim Kadlec (April 3rd) - [Smart Responsive UX Design Patterns] with Vitaly Friedman (April 3rd) - [Hands-On Checkout Optimization Workshop] with Christian Holst (April 6th) - [Advanced SVG Animation] with Sarah Drasner (April 6th) - [Advanced CSS Layouts With Flexbox And CSS Grids] with Rachel Andrew (April 6th) - [Creative Data Visualization Techniques] with Nadieh Bremer (April 6th) - [New Front-End Adventures In Responsive Design] with Vitaly Friedman (April 6th) Our Public Workshops - Zurich, Switzerland — [Smart Responsive Design Patterns] Swiss Mobile Devs, Feb. 24th, 2017 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 - [How Creating A Design Language Can Streamline Your UX Design Process] - [Best Practices For Animated Progress Indicators] - [The Atomic Workflow — People, Process, And Making Design Systems Happen] - [Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator] Coding Articles - [GPU Animation: Doing It Right] - [Progressive Web AMPs] - [How To Build A SpriteKit Game In Swift 3 (Part 1)] - [How To Build A SpriteKit Game In Swift 3 (Part 2)] - [How To Build A SpriteKit Game In Swift 3 (Part 3)] Inspiration, Freebies, Misc. - [Christmas Goodies: Free Winter- And Holiday-Inspired Icon Sets (EPS, AI, PNG)] - [Freebie: Christmas Advent Icon Set (25 Icons, AI, EPS, SVG, PNG, PDF)] - [Christmas Wallpaper Calendars: December 2016] - [Breaking Out Of The Box: Design Inspiration (December 2016)] - [Brush Lettering: It Only Gets Better After Practice (Part 2)] - [Web Development Reading List #162: Server Side React, Inclusive Design And The Web Worldwide] - [Web Development Reading List #161: Restyling Form Elements, HTTP/2 HPACK, And The Empathy Vacuum] - [Getting The Sketch Workflow Right: Meet “The Sketch Handbook”] --------------------------------------------------------------- Editorial image credits: [Tina D.] Sent to truly [smashing] readers via [Mailchimp]. We sincerely appreciate your kind support. You rock. Email: newsletter@smashingmagazine.com [Follow us on Twitter] • [Join us on Facebook] [Smashing Freddie: Sent via Mailchimp.] The authors are: Cosima Mielke (cm), Iris LjeÅ¡njanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools). [unsubscribe] • [update preferences] • [view in your browser]