Tuesday, March 13, 2018

Smashing Newsletter #201: Sketch Layers, Fun in CSS, and Motion Sickness

The funny side of CSS, a detailed look into font files and tons of free online learning resources. A new issue with useful goodies and techniques.
Smashing Newsletter

Dear Friend,

It can feel as if we are subject to a neverending onslaught of things we need to learn. At Smashing, we hope to try and make that a little easier by publishing articles and tutorials that get to the heart of the subject. A great example of this is our top article of the last couple of weeks, "How GDPR Will Change The Way You Develop." If there is any subject that matters to web designers and developers that you think we should be covering, please do let us know anytime.

Of course, we are not the only place publishing great learning material. In this Smashing newsletter, we highlight a list of over 620 programming and computer science courses that are free to join, as well as a number of other great articles and techniques from the community.

Keep learning!
— Rachel (@rachelandrew)


Table of Contents

1. Free Online Learning Resources
2. Loading Third-Party Scripts
3. Motion Sickness And The Web
4. Automating Padding And Spacing For Your Sketch Layers
5. See What's Inside Your Font File
6. How To Create A Dynamic Date Icon
7. The Funny Side Of CSS
8. Freebie: Icon Set With Extinct Animals
9. Upcoming in Smashing Membership
10. Upcoming Workshops With Vitaly Friedman
11. New on Smashing Job Board
12. Popular Articles This Month

1. Free Online Learning Resources

CSS Custom Properties (aka CSS Variables) bring the power of variables like we know them from CSS preprocessors to CSS. This means less repetition, better readability, and more flexibility. And, unlike their preprocessor fellows, CSS Variables are a part of the DOM which has a lot of benefits.

Learn CSS Variables for free

To get you started with CSS Variables, Scrimba brought a free series of eight interactive screencasts to live. Each of them is between three to five minutes long and come with a coding challenge at the end to test your newly-aquired knowledge.

If that's not enough, also be sure to check out the list of online programming and computer science courses that Dhawal Shah put together. You'll find more than 620 courses from universities across the globe. The perfect occasion to learn something new! (cm)


SmashingConf San Francisco (Apr 17-18)

"Coming to Smashing Conferences fundamentally changed how I develop websites." — Ryan Chittenden

With our third SmashingConf San Francisco taking place at the Palace of Fine Arts on April 17 & 18, we want to explore strategies for making outstanding and fast experiences, and what we all need to know today, to be more productive and make smarter decisions tomorrow.

SmashingConf SF 2018

One track, two conference days, 14 brilliant speakers, and just 500 available seats. Save $100 and make your experience even more memorable by attending one of our workshops, too. Check the speakers →


2. Loading Third-Party Scripts

So you've optimized your site but performance still isn't as you expected it to be? The reasons could be third-party scripts, social sharing buttons, video player embeds, advertising iframes, or even analytics and metrics scripts. Things that happen in the background that you can't control... or can you?

Loading Third-Party Scripts

To help you find and fix issues related to third-party JavaScript, Addy Osmani and Arthur Evans wrote a helpful guide. You'll learn to identify third-party scripts, how to measure their impact in your page and how to load them efficiently. By the way, Addy will be speaking at our next month's SmashingConf San Francisco, as well.(cm)


3. Motion Sickness And The Web

A cool scrollytelling experience, an animated graph that starts to move, or other kinds of animation might be pleasant surprises for users who don't have any problems with processing motion. However, motion-sensitive people might experience the same interaction as hostile and dangerous. In effect, they leave your site before you can even say "Come back!"

Your Interactive Makes Me Sick

In order to help designers and developers detect and circumvent problematic behaviors, Eileen recently shared some valuable tips and examples on how you can incorporate interactive elements into your page that don't cause any processing issues. (cm)


Our sponsor:

Explore And Test Complex And Innovative Data-Driven Apps

Have you tried Qlik Playground yet? It's a free programming environment where you can learn about, use and experiment with Qlik's Associative Engine and APIs. By accessing public data sets (including your own GitHub data) through our APIs, you can create cool data-driven apps using powerful search, data retrieval without writing queries, out-of-the-box charts with a single line of code and more. Start playing now!

Qlik Playground


4. Automating Padding And Spacing For Your Sketch Layers

Buttons. When designing in Sketch, there is no easy way to handle them. Luckily, a little Sketch plugin now makes everything a lot smoother: Paddy automates padding and spacing for your Sketch layers so you don't have to adjust them manually each time anew.

Paddy

If you want to give it a try, be sure to check out Grady Kelly's introduction into how to integrate the mighty little helper into your workflow. (cm)


5. See What's Inside Your Font File

How many characters does a font include? Which OpenType features and languages does it support? FontDrop shows you everything you want to know about a font at a glance.

FontDrop

Just drop your OpenType or TrueType file (OTF, TTF, and WOFF are supported) onto the site, and it will show you all the details around that font. You can play around with the OpenType features to see how they influence the font's look, see different sizes of the font in a waterfall chart, and even what it will look like when used in a table with data. Handy! (cm)


Our sponsor:

Online Masters in Information Design and Strategy

Ad

Learn to drive effective digital communication

6. How To Create A Dynamic Date Icon

When Terence Eden wanted a generic calendar icon for his contact page, he wondered if he could create something that was a bit more useful as those paper calendar skeuomorphs you see frequently. A dynamic icon, maybe?

Dynamic Date Icon

What came out of this idea is a clever SVG calendar icon which always displays the current date. If you want to tinker with the concept, be sure to check out Terence's short how-to guide for more details. (cm)


7. The Funny Side Of CSS

CSS brings our designs to life, but the coding language also makes for a good laugh. Don't believe it? Well, then take this: #titanic {float: none;}. Or how about #tower-of-pisa { font-style: italic; }?

CSS Puns

Saijo George has a sweet spot for CSS jokes and puns like these. That's why he dedicated an entire site to them with a beautiful, animated illustration accompanying each pun. Geeky humor at its best. (cm)


8. Freebie: Icon Set With Extinct Animals

The Pinta Island Tortoise, the Tasmanian Tiger, the Great Auk. All of them share the same sad story: They have become extinct in recent years. To tribute them and all the conservation efforts of many people and organizations, the Shock Family and ByPeople created a free icon set.

Extinct Animals Icon Set


9. Upcoming In Smashing Membership

We have a Smashing Membership that helps us keep the site alive and go ad-free. You can make a difference as well, and get valueable content from it, too. Coming up next:

  • Peek preview ๐Ÿฆ — first chapters of the Smashing Book 6
  • eCommerce Checklist 2018 — with common eCommerce issues you might need to consider to ensure that your conversion rate is solid,
  • Smashing TV ๐Ÿ“บ — Seeing The Pages For The Components, Mar 29, a webinar with Dan Rose
  • Smashing TV ๐Ÿ“บ — Auditing Performance, Live, Apr 5, with Tim Kadlec,
  • Smashing Community ๐ŸŽช — A new community board (Spectrum) and coaching new voices in the industry.

...Plus a seasoned selection of fancy cats. We kindly appreciate the support of our dear members. You can become one of us, too. ;-)


10. Upcoming Workshops With Vitaly Friedman

๐Ÿ‡ธ๐Ÿ‡ฐ Bratislava, ExperienceConf, March 26–27
๐Ÿ‡บ๐Ÿ‡ธ San Francisco, SmashingConf SF, April 16–19
๐Ÿ‡ต๐Ÿ‡ฑ Gdansk, Infoshare, May 22–23
๐Ÿ‡จ๐Ÿ‡ฆ Toronto, SmashingConf, June 25–28

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!


11. New On Smashing Job Board

Here are some of the most recent job openings at Smashing Jobs:

  • Senior User Researcher at Twitter (San Francisco, CA)
    "As a Senior Researcher you will help everyone focus on the user/advertiser. In this role, you will create understanding and empathy around advertiser needs, stated and unstated, for your entire product team including designers, product managers, and engineers."
  • Senior Graphic Designer (Product) at Rifle Paper Co. (New York City, NY)
    "Daily projects include developing new designs and reimagining art for across all product categories (paper, home, gifts, collaborations), and brainstorming fun ways to package our products."
  • Programmer/Analyst at San Bernardino Community College District (Camarillo, CA)
    "Under general supervision, assists in developing systems for computer applications; analyzes and develops programs codes, and performs other programming tasks at a difficult and complex level in broad application areas."

12. Popular Articles This Month

  • How GDPR Will Change The Way You Develop
    GDPR requires you to be more thoughtful about the sites and services you build, more transparent about the ways you collect and use data, more considerate of your users, and more thorough in your development and documentation processes.
  • Using Media Queries For Responsive Design In 2018
    This article will take a look at the use of media queries for responsive design today, how they work alongside Flexbox and Grid Layout, and also have a look at what is coming in the future.
  • Bringing Together React, D3, And Their Ecosystem
    React and D3.js are great tools to help us deal with the DOM and its challenges. They can surely work together, and we are empowered to choose where to draw the line between them.

The authors are: Cosima Mielke (cm), Iris Ljeลกnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.
Follow us on Twitter Join us on Facebook



No comments:

Post a Comment