Smashing Newsletter: Issue #220

Editorial

On Thursday, Microsoft confirmed the rumors: its Edge browser will now use Chromium (the open-source engine that powers Chrome, Opera, Vivaldi and other browsers) instead of its own proprietary engine that is based on Internet Explorer’s Trident.

The business reasons for this are clear: sites will work better in Edge if they use Chromium because that’s what developers optimize for. I used the same reasoning five years ago when I announced Opera’s switch to webkit.

Most web developers will have an easier time testing their work, especially as many use Mac computers, and Edge is currently Windows-only. But an easier testing regime isn’t a reason to be happy about this news: the wider ramifications for the web don’t look so good.

Henceforth on Windows, the dominant desktop OS, the only non-Chromium browser will be Firefox which has a declining market share and is nowhere on mobile. Mozilla has reacted to the news by asking people to install Firefox and try it for a week. The big danger is that developers will also stop testing in Firefox, so sites won’t work, so consumers switch to Chrome, and a vicious circle continues to a monoculture on Windows.

At Smashing, we love the open web. So we remind you to test your projects in Firefox! If you haven’t used it for a while, there are some great devtools, especially for CSS Grids. We find those to be an integral part of the development process — not just testing at the end.

We love Google Chrome, but a monoculture is always harmful. Don’t let Chromium become the new IE6.

Happy keeping the web open!
— Bruce (@brucel)

Free eBook: CSS Animation 101
Mobile Checkout Best Practices
SmashingConf San Francisco 2019)
Security Lessons Learned From The Past
Free Font Based On Historical Eye Charts
How To Run Custom Audits With Lighthouse
Google Sheets API Instead Of CMS
Do You Have The Design Eye?
Patterns In Islamic Art
Upcoming In Smashing Membership

1. Free eBook: CSS Animation 101

CSS animation can be overwhelming to learn all at once. To bridge the gap between theory and practice, Donovan Hutchinson has now released a free eBook that gives you a solid introduction to the topic: CSS Animation 101. It covers everything from why we animate to making your animations accessible and more advanced examples and tools. After finishing it, you should feel confident enough to apply your newly acquired skills to a real-life project. (cm)

2. Mobile Checkout Best Practices

More and more people are using their smartphones to shop online. So what’s to keep in mind when optimizing the checkout flow for mobile devices? Anna Kaley from the Nielsen Norman Group uses recent research findings to outline some of the most important design guidelines for an optimal mobile checkout experience. A concise overview of the seemingly small and often-overlooked details that will delight your users. (cm)

3. SmashingConf San Francisco 2019 (Apr 16-17)

We like breaking out of the predictable patterns. We take pride in putting our heart and soul into crafting friendly, inclusive and practical events, and SmashingConf San Francisco 2019 won’t be an exception. Expect live debugging, live sketching, live designing and live coding. Check the topics.

Meet SmashingConf, a friendly, inclusive event for people who care about their work. With front-end & UX techniques you can bring back to your team and apply right away.

Wonderful speakers such as Brad Frost and Anna Migas are already revealed. And if you need to convince your manager, we’ve prepared a neat Convince Your Boss PDF (417 KB) for your manager’s approval. Ah, early birds are now available as well. Off to the tickets!

4. Security Lessons Learned From The Past

With online banking, social media, and the Internet of Things, the stakes of a security breach have become much higher as in the early days of the web. For the 24 Ways advent calendar, Katie Fenn takes a look at how critical mistakes brought down several early websites and how we can learn from them to protect our sites today. An insightful journey through bad input validation, SQL injection, cross-site request forgery and scripting, and the powerful allies that help us stay safe. (cm)

5. Free Font Based On Historical Eye Charts

You probably know the charts which ophthalmologists and optometrists use to estimate visual acuity. The characteristic letter set is based on a strict 5×5 grid that dates back to 1862. However, it is limited to 10 letters only. The free font Optician Sans changes that. It expands the idea of the original, and turns it into a full font that completes the alphabet and adds numbers and special characters in the typical eye chart look. (cm)

6. How To Run Custom Audits With Lighthouse

Custom audits are useful for a lot of things: web testing, QA, SEO testing, and web performance custom metrics. If you haven’t wrapped your head around running your own custom audits yet, Aymen Loukil has got your back. He shows how to use Google’s open-source tool Lighthouse to run automated tests against a web page and generate a report with passed and failed tests — results which you can use to improve performance, accessibility, SEO, or the quality of your PWA, for example. (cm)

7. Google Sheets API Instead Of CMS

Some projects require you to think outside the box. When Adam Quinlan was working on a site for a restaurant where the owner needed a CMS to edit the specials menu on a daily basis, Adam decided to not use a bloated CMS but a Google sheet instead. This makes the site easy to edit while it remains flat from static side generators. Nice! Check out the CodePen to tinker with the idea. (cm)

8. Do You Have The Design Eye?

So, you think no-one is better than you when it comes to assessing if something is centered or slightly off? Well, then here’s a challenge for you: It’s Centred That. The little game created by the folks at the UX design and web development studio Supremo takes your design eye to the ultimate test: You’re presented with shapes and need to decide if the dot is placed in the center. But beware, what sounds easy, is actually harder than you’d think. Will you make it through all 10 levels? (cm)

9. Patterns In Islamic Art

The Islamic world has brought forth an incredibly rich heritage of architectural decoration, a heritage that deserves to be better known and that has a lot to offer not only to art historians, as David Wade points out. To make the beauty accessible to everyone, he started Pattern in Islamic Art, a showcase of more than 4,000 images of patterns and other design features drawn from this artistic tradition. No matter if you are up for some eye candy or want to investigate the underlying construction of the complex geometries, the site is a real treasure chest. (cm)

10. Upcoming In Smashing Membership

While we added our newest book Form Design Patterns to the Smashing Membership only a few weeks ago, we are already working on two new titles which we’ll release early next year! All future eBooks are included in the Smashing Membership.

Coming up next:

📺 Smashing TV: “Design With Ethics” with Trine Falbe. (Dec 11, 11:00 AM Eastern)
📺 Smashing TV: “State Of The Web In South-East Asia” with Eka Jayani Ayuningtyas, Chen Hui Jing and Sophia Lucero. (Dec 18, 11:00 AM Eastern. Rescheduled: Note earlier time!)

We are most grateful for your support which allows us to bring you great content, pay all our authors fairly, and reduce advertising on the site. (You could become a Member, too! 😉)

December 11, 2018 Smashing Newsletter: Issue #220

Previous Issues