2020 looks set to be a busy year at Smashing. While half of the world seems to be just returning to work, we've already announced a new book and finalized the line-up for our brand new SmashingConf venue of Austin.
Our latest Smashing Book is the Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen and Kim Andersen. The aim of ethical design is to grow sustainable business by treating people well, and this book will help you navigate the toolbox of ethics whether you are a designer, developer, product manager, lawyer or in management.
The book will be released late February, and you can sign up for updates on the book website to be reminded when it launches. To get a preview of some of the thinking that author Trine Falbe has been doing on the subject, read this article on Smashing Magazine: Ethical Design: The Practical Getting Started Guide.
In SmashingConf news, the team is very excited about SmashingConf Austin. I published a post today sharing our complete line-up, the workshops, and the things that we are looking forward to doing together in Austin.
It is not marketing hype to say that tickets sell fast — last year we sold out of three of our events long before the event date. Now is a really great time to think about convincing your boss, deciding on your workshop, and joining us in Austin.
I hope I’ll see you there!
— Rachel Andrew, editor-in-chief
Table of Contents
- Self-Hosting Static Assets
- Tiny Helpers For Web Developers
- Find Browser Default Styles
- Sketchy Illustrations With Personality
- A Guide To Fighting Online Tracking
- Real-World Color Palette Inspiration
- Free Usability Heuristics Posters
- Upcoming In Smashing Membership
- Our Next Smashing Workshops
Self-hosting static assets is an efficient way to make your websites faster and at the same time prevent your users from potential tracking by third-party CDNs. And even if it can seem counter-intuitive at first sight, it’s one of the quickest wins to improve performance, as Harry Roberts points out. If you want to learn more about the benefits of hosting static assets on your own origin — and the risks that third-party solutions bring along — be sure to check out Harry’s article “Self-Host Your Static Assets”.
When it comes to fonts, the question if self-hosting is the better approach is a bit more complex since fonts have their own peculiarities and performance optimizations. Barry Pollard takes an in-depth look at the example of Google Fonts, how they work, and under which circumstances you might want to consider to let Google handle delivery for you despite the performance benefits that self-hosting brings along. Valuable insights guaranteed. (cm)
Minifying an SVG, extracting CSS from HTML, or checking your color palette for accessibility — we all know those moments when we need a little tool to help us complete a task quickly and efficiently. If you ever find yourself in such a situation again, Tiny Helpers might have just the tool you’re looking for.
Maintained by Stefan Judis, Tiny Helpers is a collection of free, single-purpose online tools for web developers. The tools cover everything from APIs, accessibility, and color, to fonts, performance, regular expressions, SVG, and unicode. And if you know of a useful tool that isn’t featured yet, you can submit a pull request with your suggestion. One for the bookmarks. (cm)
Do you need to look up a browser default style for a particular element? Well, Browser Default Styles has got your back.
Built by Nathan Shepherd, the site lets you search against any element for standardized and default styles from all major rendering engines (WebKit, Blink, Gecko, Trident). Browser Default Styles is released under an MIT License, so you are welcome to make contributions and changes. A useful little helper. (cm)
Illustrations can help convey a message, add some personality and wit to a rather minimal design, or just bring a smile to our faces. Pablo Stanley’s Open Doodles certainly achieve all of these things.
Open Doodles is a set of 33 illustrations of people: dancing people, rollerskating people, people stroking a dog, reading a book, doing meditation, listening to music, and much more. All of them different personalities, some rather calm, others bursting with energy. The two-toned illustrations are available for free download in SVG and PNG versions and with the help of the color generator, you can adjust the colors to your liking. Free for personal and commercial use. (cm)
It’s no secret that we’re being tracked online. And while we can’t stop all of it, there are things we can do to fight back.
In his New York Times article, Tim Herrera dives deeper into the data companies collect about us and how they share it with third parties, into “secret scores” and shocking third-party reports that list our delivery service orders and private Airbnb messages from years ago. Besides being a good reminder to be more wary of handing out our data, the article features links to tools and practical tips for preventing advertiser tracking. A must-read. (cm)
There are a lot of fantastic sites out there that help you find inspiring color palettes. However, once you have found a palette you like, the biggest question is still left unanswered: how should you apply the colors to your design? Happy Hues is here to help.
Designed by Mackenzie Child, Happy Hues gives you color palette inspiration while acting as a real-world example for how the colors could be used in your design. Just change the palette, and the Happy Hues site changes its colors to show you what your favorite palette looks like in an actual design. Clever! (cm)
Back in 1994, Jakob Nielsen wrote an article for Nielsen Norman Group, outlining general principles for interface design: the 10 usability heuristics. Today, decades later, these heuristics still serve as a checklist for interface designers. A fact that inspired the folks at Agente Studio to create a set of posters dedicated to them.
Each of the ten beautifully-designed posters illustrates and explains one of Nielsen’s heuristics. The posters are CC-licensed and can be downloaded and printed for free after you shared the page on social media. JPEG and EPS formats are available. (cm)
We are also looking into a slightly more interactive format for our Smashing TV sessions. We kindly invite you to submit your questions or actual mock-ups of your work in the Membership channel (#tv), so our speakers can review and provide feedback to your current projects — live!
- “TypeScript For Smashing People” with Stefan Baumgartner— Jan. 29 at 17:00 London time
- Smart Interface Design Patterns, video course with Vitaly Friedman, January 2020
Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉
In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.
- 🇯🇵 Awwwards Conference (Jan 20) in Tokyo, Japan.
- 🇳🇱 Awwwards Conference (Feb 19) in Ams, Netherlands.
- 🇺🇦 Projector Practicum (Feb 21–23) in Kyiv, Ukraine.
- 🇺🇸 SmashingConf SF (Apr 21–22) in San Francisco, USA.
- 🇺🇸 SmashingConf Austin (Jun 9–10) in Austin, Texas, USA.
- 🇩🇪 SmashingConf Freiburg (Sep 7–8) in Freiburg, Germany.
- 🇺🇸 SmashingConf New York (Oct 20–21) in New York, USA.
Or, if you’d like to run an in-house workshop at your office, please get in touch with Vitaly at firstname.lastname@example.org and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.
You can always unsubscribe with just one click.
- Custom Dropdowns, CSS, Performance and Building Tools
- Hybrid CSS Positioning, Free Fonts, Push Notifications
- Black Illustrations, CSS, Data Science and Licenses
- SmashingConf Live, Speed Profiler, CSS and SVG
- Custom CSS Cascades, Focus Blocks and CORS
- React, Accessible Components, Terminal, Video Player
- BEM, DOM Scripting, SVG Masks, Vintage Games, Posters
- Design Checklists, Passwords, Dropdowns and Tooltips
- Accessible Inputs, Console, Free Illustrations, SVG
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.