Smashing Newsletter: Issue #225

Editorial

Last week, I attended the CSS Working Group face-to-face meeting in San Francisco. Whenever there are any new CSS features coming up, I like to share the news on Smashing Magazine, like I recently did about the subgrid feature for CSS Grid Layout. I do this partly to encourage feedback for these features, but also in order to demonstrate that these are features people need and want, and have real use cases for real web developers.

Showing that there are use cases that we need and want is really important. What I’ve learned as part of the CSS Working Group, and by working alongside browser engineers, is that CSS is implemented in these browsers by very small teams. Google, Mozilla or Microsoft might be pretty big companies, but the number of browser engineers is small. Like any team working on a product, priorities need to be decided. Which CSS feature is the most important to work on? Part of the information that goes into that decision is whether anyone actually has a need for that thing.

So, I write about these upcoming features, or features only implemented in one browser to help raise awareness. If you don’t know what is out there, it is hard to get excited about it! I’d encourage you to do the same: blog or tweet about the things you want. Comment on posts about them. It will be noticed, and can help keep key features in the spotlight and hopefully higher up the priority list.

Let’s keep pushing the web forward!
— Rachel Andrew (@rachelandrew)

New React Resources At A Glance
A Boilerplate For Forms
SmashingConf Toronto 2019
The Dark Side Of The Grid
Minimal Analytics
CSS Algorithms Explained
JavaScript Loading Priorities In Chrome
Font-Size-Controlled SVG Icons
Web Accessibility On The Top 1 Million Home Pages
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. New React Resources At A Glance

Do you work with React? If so, then React Resources is for you. Maintained by Kristian Heruc, the site collects resources on all kinds of React-related topics: from articles and tutorials to podcasts and conferences. The focus lies on new content, so to help you stay on top of things, React Resources displays the newest resources first. There is also a weekly newsletter in which Kristian shares a selection of the best resources. (cm)

2. A Boilerplate For Forms

Working with forms can be a pain. Luckily, a little HTML and CSS boilerplate are here to help: Andy Bell’s Boilerform provides baseline BEM-structured CSS and appropriate attributes on elements to make the process more straightforward. Take a look at the pattern library to see it in action! (cm)

3. SmashingConf Toronto 2019 (June 25-26)

The web is diverse and fascinating because it’s designed and built by people who are diverse and fascinating. Every year, we’re happy to bring some of these wonderful people together at SmashingConf — to share what they learned in a friendly, diverse and inclusive space.

For our second SmashingConf Toronto, we’ll explore the bright and dark sides of front-end and UX: Service Workers, Design Across Cultures, Design Systems, Calm Design, Performance, Vue.js, Animation, Designing for Touch, and much more to come! Plus a bunch of hands-on workshops that focus on design, front-end and UX.

SmashingConf Toronto is a friendly, inclusive event focused on real-world problems and solutions. Convince Your Boss PDF (249 KB).

In Toronto, we’re happy to welcome new and old friends — Amber Case, Brad Frost, Jenny Shen, Scott Jehl, Sarah Drasner and so many other groovy speakers. Tickets are available, and we’d love to welcome you there, too! (bl)

4. The Dark Side Of The Grid

Where there is light, there is shadow. In “The Dark Side Of The Grid”, a three-part article series in the making, Manuel Matuzović takes a look at the potential implementation pitfalls that CSS Grid brings along and how you can circumvent them to improve the user experience and accessibility. The first part focuses on semantics while the second looks into how you can avoid to unintentionally confuse your users. (cm)

5. Minimal Analytics

Tracking page views without having to add external libraries saves bandwidth and improves loading times. The Minimal Google Analytics Snippet that David Künnen built makes it possible. Once added to your website or single page application, it sends page views directly to the Google Analytics API, reducing the impact of your analytics setup from approximately 73KB with Google Tag Manager and Analytics to 1.5KB. (cm)

6. CSS Algorithms Explained

“A CSS algorithm is a well-defined declaration or set of declarations that produces a specific styling output.” Lara Schenck adopted this practice in her development workflow, and it has been working well for her. If you’d also like to give it a try, Lara now takes you through the process step by step on how to write your own CSS algorithm — from pseudo-coding it on a scratch pad to setting up your workspace and optimizing the algorithm. (cm)

7. JavaScript Loading Priorities In Chrome

How do browsers schedule and execute scripts? How do they interpret techniques like <script defer> or <link rel=preload>? To better assess how JavaScript loading priorities influence your site’s performance, Addy Osmani shares a handy overview over script scheduling in Chrome. (cm)

8. Font-Size-Controlled SVG Icons

Sometimes a quick little tip is of invaluable worth. Andy Bell shares a handy one for working with SVG icons recently: When you set your icon’s width and height to 1em, you can contextually size it with font-size. The accompanying Codepen shows how it works in action. (cm)

9. Web Accessibility On The Top 1 Million Home Pages

For a recent accessibility analysis, the folks at Web AIM examined data from the top 1,000,000 home pages. The result: 97.8% of home pages had detectable WCAG2 failures. The most common failures were low contrast, missing alt text, empty links, and missing form labels. Interesting — and quite disconcerting — insights that show how much catching up we have to do to make the web accessible to everyone. (cm)

10. Upcoming In Smashing Membership

We’ve been increasing the amout of webinars (without increasing the price of membership — it still starts at just $5 a month!) and have also improved video quality since we moved to using the Zoom platform. We hear a rumor that one of our recent webinars is nominated for Best Supporting Appearance by a Belarusian when Vitaly took over so Bruce could have an afternoon to hunt for more talented members of our industry to help you learn from Smashing TV. Who knows what awards await our next webinars?

Coming up next:

Smashing TV with Maxim Salnikov, “Progressive Web Applications For Production In 1-2-3 (Part 1)”
Today, Mar 5, 11:00 AM Eastern
In part one of this three-part hands-on coding series, we’ll look at why the idea of Progressive Web Apps has become so popular, which APIs are in the game, and where (browsers/platforms) PWAs work. Feel free to either just watch, or code along too!
Smashing TV with Simon Owen, “Dotty About Dotfiles!”
Mar 12, 11:00 AM Eastern
A dotfile, literally, is a filename that starts with a dot. In projects they’re often used for configuration. In the same way, we can add dotfiles at the root directory of a user to power up our development machine setup with super powers!

We are most grateful for your support which allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. (You could become a Member, too and join us in Smashingland where everyone is beautiful and you never get merge conflicts. )

11. Our Next Smashing Workshops

In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next:

UX Salon (March 11) in Tel Aviv, Israel.

ScriptConf (March 29) in Innsbruck, Vienna, Linz, Austria.

SmashingConf (April 15 & 18) in San Francisco, USA.

A Day With (May 10-15) in Cluj-Napoca, Brasov, Bucharest, Romania.

SmashingConf (June 24 & 27) in Toronto, Canada.

Or, if you’d like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy!

March 5, 2019 Smashing Newsletter: Issue #225

Previous Issues