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 #165

Quick Summary

Table of Contents

This newsletter issue was sent out to 197,704 newsletter subscribers on Tuesday, September 6th 2016. If you are not subscribed yet, feel free to subscribe to our email newsletter anytime.

Do you like surprises? As you may (or may not) know already, Smashing Magazine is celebrating its 10th anniversary this month. But what’s a celebration without proper surprises? In fact, we’ve been baking something brand new in the oven, and we’re looking forward to releasing the first sneak preview very, very soon!

Surprise, surprise!

We are busy with the SmashingConf Freiburg coming up next week, so you might not hear from us much, but don’t worry, that’s the calm before the real storm kicks in. Nothing too groundbreaking, but a little something that we’ve been preparing for years. Excited? Well, just keep an eye on Smashing Magazine’s front page next week. You’ve been warned! ;-)

Always be ready for surprises! – Vitaly (@smashingmag)

Table of Contents

  1. Build Apps By Authoring HTML
  2. Responsive Typography
  3. A Comparison Of Web Animation Techniques
  4. Build Your First React.js App, Step By Step
  5. Using Feature Queries Today
  6. Services To Host Your Webinars
  7. The Periodic Table Of Motion
  8. Upcoming Smashing Workshops
  9. New On Smashing Job Board
  10. Smashing Highlights (From Our Archives)
  11. Recent Articles On Smashing Magazine

[](#)1. Build Apps By Authoring HTML

A good number of HTML/CSS authors aren’t quite comfortable with writing JavaScript. However, it shouldn’t be an obstacle for publishing on the web. And even developers often find HTML quicker to work with. That’s why Lea Verou decided to compile a list of useful JavaScript libraries that get by without the need to write a single line of JS: Markapp.

Markapp

So far, Markapp includes 14 libraries to help you design responsive UI elements, build flexible widgets and validate your forms. If you have a resource worth adding, don’t hesitate to help expand the list by forking the project on GitHub. Definitely one for the bookmarks. (cm)

[](#)2. Responsive Typography

When it comes to typography, web design still has some catching up to do — especially compared to its big brother print. Time to push things forward! Tim Brown, head of typography for Adobe Typekit and Adobe Type, now came up with a technique coined as “CSS locks”.

CSS Locks

Inspired by the locks used in canal and river navigation to raise and lower vessels between stretches of water, the CSS lock (which is essentially a specific kind of value calculation) can make typography more flexible. It could be used to flex letter-spacing, word-spacing and margins relative to the width of a text block, to employ variable fonts depending on the font-size at which the type is set, or any other kind of fluid behavior you can think of. Jake Giltsoff’s Responsive Typography Prototype, by the way, builds upon this idea and provides a simple way to calculate CSS locks and the type values around them. (cm)

[](#)3. A Comparison Of Web Animation Techniques

Imagine you need to create a small animation that makes a simple ball bounce. Which technique would you use? CSS? Vanilla JS? The Web Animations API? Something entirely different? Choices are plenty.

Bouncy Ball

To compare the different options you have when it comes to web animation, Bouncy Ball recreates a bouncing ball with nine of the most popular and common animation techniques — Velocity, CSS, Vanilla JS, jQuery and the Web Animations API, Greensock, P5.js, SMIL and mo.js. Each technique is illustrated with the source code, the actual animation and some short and sweet information as well as links to further resources. A nice starter to shed some light into the jungle of web animation. (cm)

[](#)4. Build Your First React.js App, Step By Step

You want to build your first React.js app? Well, then the React.js tutorial on Plotly Academy is a good place to get started. In it, Max Stoiber, creator of the React Boilerplate, takes you from the React basics to building your first real-world app — in only six chapters.

Plotly

Learn to structure your app and how to fetch data from an API, to integrate a third-party library in it, and to handle application state with Redux. Also, you’ll get insights into increasing performance and avoiding mutation bugs and, last but not least, to test your app thoroughly with Jest. A valuable all-in-one package. Now go and create something amazing! (cm)

[](#)5. Using Feature Queries Today

The @supports rule in CSS, also known as feature queries, are a powerful tool that has the makings to become your new favorite thing. Why? Well, they let you check if a particular CSS property or value is supported by the browser or not, and then apply styling based on that — or not if it’s not supported. Let’s say, for example, you want to make a drop cap at the beginning of a text, but not all browsers understand initial-letter. @supports checks whether initial-letter is supported, and, if yes, applies the styling for the initial letter to your text. If it’s not supported, well, no drop cap. Sounds promising, doesn’t it?

CSS Feature Queries

Jen Simmons shares these and more tips all about feature queries in a comprehensive article over on the Mozilla Hacks blog. Feature queries currently work in all versions of Firefox, Chrome and Opera that were released after mid-2013, also in every version of Edge and in Safari 9. Once they are fully supported, they can help us do complex things for browsers that support CSS Grid while providing layout options for the browsers that don’t. Exciting times are ahead! (cm)

[](#)6. Services To Host Your Webinars

When you’re hosting a webinar, a Q&A session, or an online summit, you’ll need a stable and reliable platform for video conferencing. To connect with your audience over live video, Crowdcast might be for you. You can create an event (either public or unlisted), invite your audience to join, and Crowdcast automatically handles registration. To give attendees a voice, the service even lets you include realtime polls, chats, and Q&As in the conversation. Also, viewers can be invited to the screen and become broadcasters themselves. Another nice feature is the instantly available replay option. If you want to give Crowdcast a try, there’s a one-week trial available. Regular plans start at $29 per month.

Crowdcast

An alternative might be Zoom. Up to 50 interactive video participants and, depending on the package, 100 to 10,000 view-only attendees can participate in a webinar. Especially handy is the dual-screen support which shows the presenter and their slides at the same time. Sessions can also be recorded. Webinar plans start at $14.99 per month for one host. (cm)

[](#)7. The Periodic Table Of Motion

In a periodic table, elements are arranged by vicinity to their neighbor. A genius concept. But what could a periodic table of design look like? A system to categorize animation, for example? Well, Kazuki Akamine shows us — with his Motion Periodic Table.

Periodic Table Of Motion

The table was created as a graduation project at the Musashino Art University and shows little pieces of animation and how they correlate with each other. As you click on an “element”, you get some further information about it (sometimes even a short explanation of how to recreate the effect in Aftereffects) and see a little experiment of what comes forth when you blend the animation with another one into something entirely new. Beautiful! One small drawback: The site is only available in Japanese, but with the help of Google Translate you’ll find your way around quite easily. (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.

SmashingConf Barcelona

Workshops at SmashingConf Barcelona

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:

  • Web Developer (One Year Position) at Whitney Museum of American Art (New York, NY) “A full-time temporary position is available in the Digital Media department for a full stack web developer. The Digital Media department is responsible for creative direction, content strategy, implementation, and management for all of the Museum’s public-facing digital products, including the museum’s website, visitor app, and digital signage system.”
  • Senior Front-End Engineer at ÜberResearch GmbH (Europe, (remote)) “At ÜberResearch, we are looking for a capable Senior Front End Engineer (f/m) and are offering a place in an experienced and well skilled technical team, a clear vision of the technological and engineering excellence we are aiming for, and the exciting setting of an agile start-up working on both sides of the pond.”
  • Front-End Web Developer at Simple Square (North America) “We are a boutique web design agency that specializes in helping creative professionals achieve their online goals. We are looking for a skilled and reliable web developer to be responsible for front-end development. You will work closely with our small and dedicated team on a contract basis to develop customized website solutions for our clients. Hours of work will vary depending on the projects and clients we are working with at the time, but we expect to start with an average of 5-10 hours of work/week.”

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

  • Hey Designers: Stop Being An Afterthought There are reasons you’re still saying the same thing after all these years — still talking about how it always seems like design gets tacked on to the end of the process. You should be at the concept meeting, you say, where you can make a real difference.
  • Improving Smashing Magazine’s Performance: A Case Study Looking back at the early days of our redesign, some of our decisions seem to be quick’n’dirty fixes rather than sound long-term solutions. Our advertising constraints pushed us to compromises. Legacy browsers drove us to dependencies on (relatively) heavy JavaScript libraries. Our technical infrastructure led us to heavily customized WordPress plugins and complex PHP logic. With every new feature added, our technical debt grew, and our style sheets, markup and JavaScript weren’t getting any leaner.
  • Designing The Words: Why Copy Is A Design Issue The relationship between copy and design has been covered many times on Smashing Magazine. Working in a content-focused industry, we need to keep this issue pretty close to heart; creating great copy is pointless if it is visually uninspiring or unreadable. Likewise, if the content doesn’t deliver, then even the most attractive page won’t hold the reader’s attention.

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

Design Articles

Coding Articles

Inspiration, Freebies, Misc.