Tuesday, December 9, 2014

Smashing Newsletter #126: CSS, Games and Xmas Experiments

With CSS tools, advent calendars and creative front-end experiments. Issue #126 Tuesday, Dec. 9th 2014 181,367 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

Your email inbox is drowning, isn't it? For some reason, all those emails somehow manage to find their way into our inbox, filling it up with necessary but also with unnecessary content which at some point becomes very difficult to tell apart. Isn't it time to take charge of the inbox and perhaps use a clever strategy or two to keep only the most important content on your daily radar?

It's crucial to tell apart which emails are important and which are just wasting your precious time.

You might want to set up a monthly reminder to take 5 minutes to unsubscribe from email notifications from LinkedIn or Facebook, as well as general reminders and updates. Actually, it might even be a good idea to do it right away, too, and perhaps unsubscribe from a few newsletters along the way. Or use Unroll.me or Sanebox to make those subscriptions easier to discover and unsubscribe from.

What about setting up separate folders with labels for all newsletters? You might even be as rigid as setting up an automatic removal of all emails older than 60 days into your Archive mailbox. Or, for specific emails that require quick action, create a filter called "action" folder and move criticial emails there. Also, keep in mind that not every email needs a reply, so how about learning a few keyboard shortcuts to quickly move an email to archive?

Sometimes there is just so much you can do to keep your inbox clean, but with a little bit of strategic thinking, you might at least be able to keep an eye on the important stuff, and that's what matters most anyway. So what strategies do you use to keep inbox zero?

Happy emailing!
– Vitaly (@smashingmag)

Table of Contents

1. Great Design Is Open
2. Creating Animations And Interactions With Physical Models
3. Studying And Refactoring CSS With CSS Dig
4. Counting Down To Christmas With Unique Web Experiments
5. Advent Calendars For Web Designers
6. Digital Warmth With Digital Firelog
7. Digital Trip: A Creative Game Experiment
8. Learning Has Never Been Easier

1. Great Design Is Open

Design is fundamentally collaborative. It's about sharing experiences, missteps, and, lastly, also resources. That's when the best ideas grow — with the input of others. It's fantastic to see that a lot of designers live by this credo, sharing their resources and projects freely with their fellow peers as a part of the open design movement.

Great Design Is Open

Pixelapse is such a place for sharing. UI kits are among the open design projects which you'll find there, icon packs, templates for wireframing, themes and many more treasures that may come in handy in your own projects. Time to give back to the community yourself, don't you think? Admittedly, it takes some courage to expose your work to the potential critique of others, but who knows what might grow out of it. (cm)

2. Creating Animations And Interactions With Physical Models

Physics-based animations and interactions are becoming more and more common in UI. They help create rich experiences that feel more natural to our innate expectations. In his article on Creating Animatinos With Physical Models, Ralph Thomas elaborates on some basic physical models, different kinds of interactions and animations that can be constructed from them. You'll notice that the article is not only a crash course explaining basic principles, but also includes a good number of examples for you to experience with these concepts.

Creating Animations And Interactions With Physical Models

Learn about different parameters such as spring constant and damping for buttons, acceleration when working on transitions, rebound which is used in slide-to-unlock animations, deceleration and friction which make your sliders more realistic or constant velocity for a moving showcase. Find out how to start combining different parameters in order to create experiences that will definitely delight your users! (ml)

3. Studying And Refactoring CSS With CSS Dig

Even if we tend to use smart CSS methodologies in our projects, keeping the code clean isn't easy — particularly if you are taking over the code from your colleague(s) and there is no pattern library in place just yet. Your only option then is to explore the partly undocumented third-party code, and try your best to figure out what has been done and clean up the code along the way.

Studying And Refactoring CSS With CSS Dig

There are some quite useful tools to help you though! CSS Dig is a Chrome extension that analyzes CSS and shows occurrencies and counts of every single CSS property. Stylify.me and PasteUp-Palette both collect all the different colors on a page. Besides, you can find unused CSS with a few Grunt/Gulp tasks, too. (vf)


4. Counting Down To Christmas With Unique Web Experiments

Imagine you're on board of the polar express, traveling through windy plains covered in snow. The white landscape is magical; snowflakes dance outside your window, the sun is shining through the icy sky, and with every breath you take, the glass gets covered a bit more with an icy mist which, in order to catch another glimpse of the beauty outside, you carefully wipe off with your hand.

Counting Down To Christmas With Unique Web Experiments

This beautiful scenario is just one of the digital experiments that form part of this year's Christmas Experiments advent calendar. Each day leading up to Christmas, the advent calendar unveils a new front-end experiment created by another digital artist. We don't want to spoil more surprises (we've now already told you about the polar experience which Guillaume Gouessan has created), but one thing is for sure. The wintery masterpieces all explore the limits of the web, pushing it always further — and that by using open web technologies, by the way. We are already excited to see what the next year has in store for us!

Pssst! For those of you with Christmas fever, there's a great free icon set available for download, as well as Xmasify that will give any website that instant holiday feeling! (cm)

5. Advent Calendars For Web Designers

It has almost become a tradition over the last couple of years. With December kicking in, advent calendars for designers and developers appear all over the place, with insightful articles and helpful techniques shared by professionals throughout the entire month.

Advent Calendars For Web Designers

Good ol' 24ways is a general advent calendar for web geeks, publishing both technical and design pieces every day during the month of December. Performance Calendar feature articles related to web performance and front-end optimization. UXMas is dedicated to user experience, FreeFont-Advent to freely available fonts, Sys-Advent for system administrators, Type Workhip with type and lettering features and Responsive Advent calendar with funny, heart-warming, and nostalgic festive videos. There are even advent calendars available in German and in French, too! Now that should be enough for the holidays. Happy advent calendar reading, everyone! (vf)

6. Digital Warmth With Digital Firelog

Some things captivate our sight, letting our imagination explore the unexplored and dive away from reality into those remote, distant places. It could be the sound of waves or water, perhaps a fresh breeze of air and chirping birds, or even dancing flames of fire with a sound of crackling firelogs. In fact, it's the warmth and the calmness of the last one that makes it so difficult to turn your eyes away from the heating flames.

Digital Warmth With Digital Firelog

Can you reproduce it digitally? Obviously, you can't. But you can design illustrations and produce short videos to play around the theme of cracking firelogs. What if artists, illustrators, animators, directors, and creative coders tried to bring the traditional Yule Log back and into the digital age? Well, this is exactly what Watch Yule Log is all about. A lovely little project which allows us all to gather 'round and "warm up our hearts and hands" on the site. Warm and cozy indeed! (vf)

7. Digital Trip: A Creative Game Experiment

It's remarkable what we can do with web technologies today. Modern browsers have hardly any limits anymore; even full-fledged 3D has already become a reality, such as Digital Trip, a short browser game that beautifully illustrates and proves this fact.

Digital Trip: A Creative Game Experiment

The open-sourced game was coded by Dmitry Akimov and is based on WebGL that tells quite a story about modern web technologies and the capabilities of the web. You can use your keyboard, an external device or webcam to control it and collect web-themed objects and cryptocoins. The game is quite meta and a fascinating example of creative coding. In case you want to dig deeper into its underlying anatomy, you'll also find the source on GitHub. Be aware though... the game is pretty addictive! (cm)


8. Learning Has Never Been Easier

With so many techniques, tools, libraries, 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 front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.

Learning Has Never Been Easier

Please note that you can also subscribe to our Events Mailing List to stay informed about upcoming Smashing events. Of course, you can opt out from the list anytime. We fully respect your privacy and would never give your data to third parties.

Full-Day Workshops in Whistler, Canada:

Upcoming Online Workshops:

Full-Day Workshop in Edinburgh, UK:

Full-Day Workshop in Atlanta, GA, USA:

Full-Day Workshops at SmashingConf LA:

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!

New on Smashing Job Board

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

  • UI / UX Designer at ZipfWorks (Santa Monica, CA)
    We're looking for a talented and ambitious UI / UX Designer to join our product team and lead the design for a range of our software products spanning desktop, tablet, mobile, and wearables.

  • Project Manager at t8y.com gmbh (Hamburg, DE)
    Als Project Manager leitest Du selbständig und eigenverantwortlich digitale Entwicklungsprojekte, bzw. Teilprojekte, die einen signifikanten technischen Anteil haben.

  • UX Designer at Ellucian (Salt Lake City, UT)
    Ellucian is looking for a talented UX Designer who knows that magic is in the details and has an impressive design portfolio showing both visual and interaction brilliance.

Smashing Highlights (From Our Archive)

  • How To Use Photos To Sell More Online
    As a photographer and UX designer, I pay particular attention to the effectiveness of photography when I'm testing with users. Regardless of the context, users rarely fail to comment on or be influenced by photography when shopping online.

  • An Introduction To Full-Stack JavaScript
    Nowadays, with any Web app you build, you have dozens of architectural decisions to make. And you want to make the right ones: You want to use technologies that allow for rapid development, constant iteration, maximal efficiency, speed, robustness and more.

  • New High-Quality Free Fonts
    Every now and then, we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice out there is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don't have to.

Recent Articles On Smashing Magazine

Editorial post image credits: 10ch

Workshop post image credits: Dennis Wong

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

The authors are: Cosima Mielke (cm), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser

No comments:

Post a Comment