Dear Friend,
Looking back at the past years of your life, what was some of the most useful and wise advice you've received? When I look back into my own experiences, there are a few things that have stayed with me longer than others.
Impression matters. Never overpromise, but always overdeliver a little bit. For every project, pick an extra little thing (perhaps a nice print stylesheet or a matching font fallback?) and deliver it along with the entire package. Never respond to critique right away. Take it as is, write it down, and process it later. Also, never kill an idea in a meeting; it's better to find out exactly why somebody came up with it, and why they believe it's so important. Ideas need to solve a problem, and while its initial form might go against your hunches, you could implement the solution in a variety of ways.
In the spirit of the upcoming New Year, we've asked for the best advice you've ever received, and it was fantastic to see a stream of remarkable replies come in. Take a look, too, and share your advice with us so that we can collect them all into a standalone article here on Smashing Magazine. Also, if you think there are other questions everybody could benefit from — let us know! We'd love to make it happen! :-)
Happy holidays everyone, and here's one to a truly wonderful, smashing and peaceful new year. Let it be the best year of your life!
Stay smashing!
— Vitaly (@smashingmag)
Table of Contents
1. Keep Your Team's Code Consistent
Keeping code formatting consistent in a team can be tricky. Everyone has their habits and reconciling them is a rather painful undertaking. That's where Prettier comes in. Described as "opinionated code formatter," the tool removes all original styling from the code you write (only styling that won't affect the AST, of course) and ensures that all outputted code conforms to a consistent style.
How does it work? Well, Prettier disregards the original styling by parsing it away, and re-prints the parsed AST with its own rules, taking the maximum line length into account and wrapping the code where necessary. It works with JavaScript (including ES2017), CSS, Less, and SCSS, JSON, Markdown, GraphQL, and a few other languages, and seamlessly integrates with some code editors. A great way to finally put an end to internal debates over formatting and focus on the things that really matter instead. (cm)
2. HTML5 Accessibility In Major Browsers
Accessibility is key. But which HTML5 features are accessibly supported by major browsers, and which ones should you better supplement with ARIA or other additional workarounds? The Paciello Group ran tests to find out and collected the results on HTML5 Accessibility.
The features were tested in Chrome, Firefox, Safari, Edge and Internet Explorer. To get the green tick, the browser has to correctly map the feature to the platform accessibility layer. Full keyboard accessibility is required, too. To make it easier to find what you're looking for, the features are divided into categories ranging from sections and groupings to properties. Useful! (cm)
SmashingConf London (Feb 7-8)
Performance matters. We're excited to venture to London for our brand-new conference dedicated to web performance. Dealing with ads, third-party scripts, A/B testing, HTTP/2, debugging, JAM stack, PWAs, web fonts loading, memory/CPU perf, and service workers.
New formats, evening sessions and genuine, interesting conversations. Note: Conference tickets are almost gone. Get the last tickets →
3. Debugging PWAs With Dev Tools
Progressive Web Apps cater for better mobile experiences even outside of native apps. And, luckily for you as developers, browsers provide a good set of tools around them. Especially Chrome. A comprehensive article by Write Software shares tips for how you can use Dev Tools to debug your PWAs.
The article mainly focuses on Chrome's Dev Tools and takes a detailed look at the Application panel which groups many elements that come in handy when inspecting Progressive Web Apps — the manifest which unlocks the 'Add to home screen' option, for example, Service Workers, or the 'Clear storage' tab to manage storage size. Firefox is covered, too. To make your learning as practical as possible and put your newly acquired knowledge to the test, there's a real-world example that you can follow along. (cm)
4. Performant Image Placeholders With SVG
When it comes to performance optimization, fast-loading images are key. But what do you show when the image hasn't loaded yet? There are a variety of solutions for image placeholders out there — maybe you've already tried to keep the space empty to prevent content from jumping around, or rendering a tiny, blurry version of the image which then transitions to the full one. What renders as a placeholder has a significant impact on how the user perceives performance. José M. Pérez now describes a very elegant solution: SVG-based placeholders with geometric shapes.
What makes SVG such a great fit is the fact that you can easily control the level of detail (and, thus, the size of the placeholder), and it's highly compressible and easy to manipulate with CSS and JavaScript, too. In fact, an SVG placeholder can be as small as 640 bytes, and even if you want more detail, you can get it at a small payload. Worth giving it a try. (cm)
5. Open Source Etiquette
Open source software is bringing people with all kinds of skills and backgrounds together to work on one common project. To make this undertaking as smooth and enjoyable as possible for everyone involved, we all should take some time to reflect on how we work together, as Kent C. Dodds and Sarah Drasner argue. Their Open Source Etiquette Guidebook provides a bullet point list of tips for both maintainers and users that help make the open source community a friendlier place.
The guideline for everyone who participates in open source (and every other sort of collaboration, too, of course) should interiorize: Be polite, respectful and kind. Maintainers could, for example, use labels like "help wanted" or "beginner friendly" to guide people to issues they can work on if they are new to a project. Users could suggest a solution to the problem when they open an issue. It's little things like these that make a change. (cm)
Our sponsor: Online Masters in Information Design and Strategy
Learn to drive effective digital communication.
6. The State Of JavaScript 2017
"JavaScript is great!" "JavaScript is a mess!" No matter your opinion, one thing is for sure: The JavaScript world is ever-changing and richer than ever. To get a better understanding of the JavaScript ecosystem, Raphaël Benitte, Sacha Greif, and Michael Rambeau asked more than 28,000 developers all over the world questions on topics ranging from front-end frameworks and state management, to build tools and testing libraries.
Some of their findings: When it comes to front-end frameworks, React is the dominant player, but Vue is making big gains while Angular loses popularity. In the competitive testing landscape, the fight between the frameworks is far from settled, but Jest and Enzyme stand out from the crowd with very high satisfaction ratings. And NPM and Webpack are still the kings of build tools. For more insights into the JavaScript universe, be sure to check out the study. (cm)
7. Type With Pride
One of the world's most powerful designs certainly is the Rainbow Flag. Designed by artist and LGBTQ activist Gilbert Baker, it has gained fame in LGBTQ activities and protests all around the globe. To honor Baker who passed away in March this year, New Fest and NYC Pride partnered up with Fontself to create a free font inspired by the design language of the flag. Its name: Gilbert.
Bold, unique and a bit playful, that's probably how to best describe the font. Originally, it was designed for striking headlines and statements that could live on banners for protests; now it is being built into a whole family of weights and styles. Gilbert is available as a standard vector font and a color font in OpenType-SVG formats. And as a little bonus, there's also a motion-ready resource which you can use for animation, video or social posts, for example. Be colorful! (cm)
8. New On Smashing Job Board
Here are some of the most recent job openings at Smashing Jobs:
- Lead UX Designer at Flaconi GmbH (Berlin, Germany)
"Flaconi is a dynamic e-commerce company situated in the heart of Berlin. We are looking for passionate employees, who are willing to co-create our story of success pro-actively. Our corporate culture: team spirit, flat hierarchies and a lot of fun during work." - Front-End Lead Developer at Colony (London, UK)
"Colony is seeking a highly experienced front-end developer to take a lead role in the direction of our award-winning video-on-demand (VOD) technology, working post-acquisition on an exciting new consumer sports product." - Middleweight Web Developer at Farrows (Norwich, UK)
"We're seeking an energetic, ambitious and talented individual to join our digital team as a full-time Web Developer. We want someone who loves a challenge, is keen to make a difference, loves good design and has the skills to deliver."
9. Most Popular Articles This Month
- Debugging CSS Grid Layouts With Firefox Grid Inspector
Whether you're starting to learn about CSS Grid or already use it in production, Firefox's Grid Inspector is very useful. This article covers known and obscure features of Firefox DevTools that can come in handy when you're building and debugging CSS Grid. - Welcome To The Next Level Of Mobile App Development
Building a mobile app usually costs a lot of money and takes months to launch. Nick Babich explains how you can use Dropsource (a free visual platform for building mobile apps) to make building your own native app faster and simpler. - Understanding CSS Layout And The Block Formatting Context
There are a few concepts in CSS layout that can really enhance your CSS game once you understand them. One of them is the Block Formatting Context. Rachel Andrew explains what it is, why it is important in CSS layout, and how to create one.
10. Most Recent Articles On Smashing
- How To Use Underlined Text To Improve User Experience
Links have become one of the most common and recognizable features of our online experience. In this article, we'll explain the concept of underlining text and how to use it to improve the web experience. - Breaking The Rules: Using SQLite To Demo Web Apps
Most potential users will want to try out the software or service before committing any time and money. Some products work great by just giving users a free trial, while other apps are best experienced with sample data already in place. Often this is where the age-old demo account comes into play.
The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Markus Seyfferth (ms), 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