Dear Friend,
Along with much of the Smashing team, I'm just back from the SmashingConf that took place in San Francisco last week. We enjoyed two conference days packed with learning, along with several full-day workshops running either side of the conference days. There was even a conference running club, with a few of us enjoying the scenic views from Crissy Field along to the Golden Gate Bridge.
We'll be releasing the videos soon, however, for readers from North America (or those of you who fancy a trip to lovely Toronto), we have announced our final SmashingConf Toronto lineup. Also, the tickets are available as of now! Just like with the magazine, the conferences aim to give you practical advice from your peers, along with a lot of fun, networking, and (as always) a few surprises!
Let's keep learning from each other,
— Rachel (@rachelandrew)
Table of Contents
1. The State Of Front-End 2018
Front-end is a field that's changing and evolving constantly. While staying on top of things is a challenge even for professional front-end developers, what about people who want to get started with front-end engineering, or even managers, CTOs, and others who want to gain deeper insights into it? To give a concise overview over the current state of all things front-end, Cody Lindley wrote the Front-End Developer Handbook 2018.
Aimed at potential and practicing devs, but also everybody else who's curious to understand front-end, this handbook discusses the practice of front-end engineering and the tools that are used today. A selection of learning resources make it a valuable read even for the experienced developer. You can read the book in the browser or download it for free in PDF, ePUB, and Kindle formats. (cm)
SmashingConf Toronto (June 26-27)
What would be the best way to improve your skills and learn? How about by observing designers and developers working live? Well, starting from this year, we'll be exploring new conference formats, and one of them is a focus on talks without… slides! Our new SmashingConf Toronto 2018 (June 26–27) will be full of interactive live sessions, showing how web designers design and how web developers build — including setup, workflow, design shortcuts, debugging, naming conventions, and everything in between.
Meet SmashingConf Toronto 2018 (June 26–27), a conference without... slides! Expect live interactive sessions instead.
2. Getting To Grips With Webpack
Webpack helps you transform, bundle, or package just about any resource or asset, mainly JavaScript files for usage in the browser. If you haven't worked with webpack yet (or feel your skills could need a bit of polishing), Sean Larkin brought the Webpack Learning Academy to life.
Currently, the academy offers two free, self-paced online courses that get you familiar with everything webpack-related. "The Web Fundamentals" course teaches you how to set up an environment correctly and how to make webpack work for your project. "The Core Concepts" dives deep into how webpack works and, well, its underlying concepts. While both courses are free, you can also choose to pay for them in order to give something back and support the webpack open source project which makes it all possible. (cm)
3. Meet Paul Slab, A Fresh Slab Serif
A slab serif that works well as a display font just like for body copy? That's Paul Slab. The font family designed by Fargus Meiser and Lukas Bischoff includes eight weights, three of them can be downloaded and used for free in personal projects.
Paul Slab shines with its fresh and minimalist look. It comes with extended language support, fractions, arrows, super- and subscripts, and some other finesses. A real beauty, crafted with attention to detail. (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 the Qlik Associative Engine and APIs. By accessing public data sets (including your own Spotify or GitHub data) through their APIs, you can create beautiful visualizations and 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!
4. Accessibility Inspector Is Coming To Firefox
Have you ever wondered what your site might look like to a screen reader user? Or maybe you've heard about barriers that make it hard or even impossible for them to use your site? To help you detect and eliminate accessibility hurdles, the Firefox Developer Tools now come with an Accessibility Inspector. It is currently available in the Nightly build, and will be implemented in the stable version starting from Firefox 61 (due for beta in May, the release is scheduled for July).
The new Accessibility Inspector is not meant to be an evaluation tool and, thus, won't give you hints on whether your site is WCAG compliant, as Marco Zehe explains. Instead, it helps you inspect and understand the hierarchical tree of objects which assistive technologies use to translate your website for screen reader users. Marco explains in detail how you can make use of it. (cm)
5. Front-End Design Checklist
It may sometimes feel as if designers and front-end developers speak different languages, but that doesn't mean that smooth and seamless communication isn't possible. To help them facilitate their collaboration when working together on a project and ensure coherence in the way they interact, David Dias put together the Front-End Design Checklist.
The checklist helps designers and developers get their work in sync: Designers can make sure their creative files meet the requirements of a web project, while developers can review all elements delivered by the creative team and ensure everything's correct before they dig into the code. A simple yet efficient step towards better communication. (cm)
6. Create And Animate Images With CSS
A good challenge not only helps you evolve and improve your skills, but also teaches you something valuable along the way that is worth sharing with others. Well, José Rosário did just that. He accepted a challenge of coming up with a technique that's a bit different than the other ones available out there.
José loves to play with CSS and had the urge to turn an image into a piece of code which could be animated later. The undertaking was successful, and José now walks us step by step through the process — from turning a photo into CSS, optimizing the code, and, finally, animating it. Useful! (cm)
Our sponsor: Online Masters in Information Design and Strategy
Learn to drive effective digital communication.
7. Mix And Match Robots In Sketch
Who doesn't have a sweet spot for robots? Well, Pablo Stanley sure does, and his free Sketch library Bottts is now spreading some love for the little fellows.
Bottts lets you create cute and funny robot illustrations with just a few clicks. To give your robot a soul and some attitude, just mix and match different frames, antennas, sensors, accessories, and colors. How about a curious and friendly robot? Or rather a fierce fellow? Only your imagination is the limit. Have fun! (cm)
8. 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 valuable content from it, too. Coming up next:
- Smashing TV 📺 "Checkout UX Findings" with Christian Holst — Apr 26
- Smashing Book 6 📖 Chapter Sneak Peek on "Making Design Systems Work In The Real World" by Laura Elizabeth — Apr 30
- New coupons and discounts 💰 — Apr 30
- Smashing TV 📺 "Accessibility Audit Live" with Marcy Sutton — May 10
- Conference videos 🎥 from SmashingConf San Francisco 2018 — May 15
We really appreciate the kind support of our members! You should become one of us, too. ;-)
9. Upcoming Workshops With Vitaly Friedman
🇵🇱 Gdansk, Infoshare, May 22–23
🇨🇦 Toronto, SmashingConf, June 25–28
🇩🇪 Freiburg, SmashingConf, Sept. 10-11
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!
10. New On Smashing Job Board
- Sr. Full-Stack Developer at Sticker Mule (Anywhere)
"We created Sticker Mule to be the best place to work and shop. That means making ordering fast, simple and fun while creating a stable, low stress and enjoyable place for talented people to work." - Drupal Developer at Sullivan (New York, NY)
"Experience in an agency environment and ability to work with changing scopes and requirements Ability and eagerness to learn new and/or emerging technologies." - Back-End Developer at Grow (Norfolk, VA)
"Our developers create industry-leading digital work for some of the most recognized brands on the planet."
11. Popular Articles This Month
- Art Directing For The Web With CSS Grid Template Areas
If you're at all serious about web design or development, you need to be serious about learning and using CSS Grid, too. Andrew Clarke explains how. - How To Design Emotional Interfaces For Boring Apps
When your product deals with repetitive tasks, it's hard to keep users excited about it. That's where UI comes into play. Let's talk about elements that make an interface more emotional. - Best Practices With CSS Grid Layout
In some ways, we are all still so new to CSS Grid Layout. A lot of folks keep asking about best practices that are available out there. Rachel Andrew ran a survey and shares the results as well as her thoughts in this article.
The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research).
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