Smashing Newsletter: Issue #223

Editorial

The web is a beautifully diverse and unpredictable place. It’s a place that never rests; with ongoing battles and discussions on everything from workflow and design systems to naming conventions and JavaScript chunking. It’s a place that’s hard to navigate in confidence as things evolve and retire every day — turning planning and maintenance of every project into an adventure with an unpredictable (and often unfortunate) turn of events.

That’s why we produce Smashing Books: printed and digital books that tackle concrete problems which designers and developers around the world struggle with just like you. We put our heart and soul into content and design, and work with wonderful authors who are happy to share what they’ve learned and what worked (or didn’t) for them.

One of our recent releases, the Form Design Patterns book, is a practical guide to designing and building better web forms.

Most recently, we published Design Systems by Alla Kholmatova and Form Design Patterns by Adam Silver, as well as the Smashing Book 6: New Frontiers in Web Design — all of the books examine problems while suggesting practical solutions in order to get better (and faster!) results.

Take a look around; perhaps some of the books help you and your company as well. If not, no hard feelings, but we have quite a few releases coming up this year that just might gauge your attention. ;-) Happy reading!

Yours truly,
Vitaly Friedman (@smashingmag)

Unifying The Developer Experience
A Customizable Font For Programming
SmashingConf San Francisco 2019
Be Safe On The Internet
Simple, Pure Vanilla Autocomplete
Creative CSS Grid Experiments
Persist Live Style Changes With Chrome DevTools
Financial Calculations Made Easy
Hey, From The Future
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Unifying The Developer Experience

Setup can take up quite some time when you’re starting a new project. That’s where mhy comes in. Described as a zero-config, out-of-the-box, multi-purpose toolbox and development environment, it creates a unified developer experience that takes care of the tech in every stage of a project so that you can focus on your code instead. Mhy comes pre-configured with Babel and React. Promising! (cm)

2. A Customizable Font For Programming

Input, a font family created by David Jonathan Ross, is specifically tailored to the requirements that reading code and data brings along. To cater for a delightful reading experience when scanning many lines of code at once, it offers monospaced and proportional fonts — all with a broad range of widths, weights, and styles that make code formatting richer than ever. You can download Input for free for private use. (cm)

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

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. The next one is SmashingConf San Francisco in April, followed by SmashingConf Toronto in June.

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

For 2019, we encourage speakers to show how they work, design and build, live on stage. Take a seat, open your laptop, open a blank canvas and make something wonderful in 40 mins — together with the audience. Session covering live debugging and live redesign, accessibility and security audits, sketching, debugging and refactoring.

In San Francisco, we’re happy to welcome new and old friends — Brad Frost, Sara Soeuidan, Miriam Suzanne, Steve Schoger, Katie Sylor-Miller, and so many other speakers. Of course, tickets are available, and we’d love to welcome you there, too!

4. Be Safe On The Internet

Do you think you’ve done everything you can do to protect your privacy when browsing the web? The open-source Security Checklist helps you keep track of the things that you might want to consider to stay safe — from secure passwords to protecting your SIM card from hijacking and changing your DNS settings. Accompanied by further reading resources that dive deeper into each topic, the checklist also makes a great reminder to share with less tech-savvy friends and family. (cm)

5. Simple, Pure Vanilla Autocomplete

If you need a simple solution to implement autocomplete into your search, you might want to check out autoComplete.js.

Built by Tarek Rafaat, the library is made of pure vanilla JavaScript and progressively designed for speed and versatility. It supports different types of data source, multi-keyword search, different types of search logic, and a row of other nifty features. You can give it a try in this live demo. (cm)

6. Creative CSS Grid Experiments

The mighty powers of CSS Grid paired with creative ideas are the foundation of Olivia Ng’s CSS Grid Experiments. Her Codepen demos show off what Grid is capable of in rather unusual — and very entertaining! — ways. Among the gems are a train ticket to Hogwarts, makeup palettes that use grid inside flex, the Internet Periodic Table, a lovely Grid shelf, and much more. Inspiration is guaranteed! (cm)

7. Persist Live Style Changes With Chrome DevTools

Did you know that you can make changes to the CSS in Chrome DevTools that will persist even when you refresh the page? To do so, go to Sources > Overrides, “select folder for overrides”, then “enable local overrides”. Every time you make an edit in DevTools, it copies the original file to a different folder, applies to the changes you made to the copy, and serves that copy once you reload the page. A small trick that makes tinkering with CSS in the browser so much quicker and safer. (cm)

8. Financial Calculations Made Easy

For those occasions when you need to incorporate financial calculations into your application, Finance.js is worth taking a closer look at. It can calculate amortizations, growth rates, discount factors, payback periods, returns on investment, and much more. Built with pure JavaScript, the library gets by without any dependencies. Nice! (cm)

9. Hey, From The Future

Did you ever want to send a message to your past self? To share a piece of advice that could have inspired you to see or do things differently? Hey From The Future turns the idea into a community project: It lets you read messages from people that they wish they had when they were your age. And you can share your messages with people of a certain age, too, of course. Now, what’s your advice? (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 also improved video quality since we moved to using the Zoom platform. We hear a rumour that one of our recent webinars isnominated 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 two webinars?

Coming up next:

Smashing TV (Today!) : “How A Screen Reader User Surfs The Web” with Léonie Watson (Feb 5, 11:00 AM Eastern). Most people see the web, but Léonie went blind in her twenties, and now develops using a screen reader to hear the web. How does that work? What can you do to make your site more accessible? She’ll show you, using some well-known sites, and some that are the work of our Smashing Members. This will be eye-opening, we guarantee.
Smashing TV: “The How And Why Of Semantic HTML” with Mandy Michael (Feb 12, 9:00 AM Eastern). Forget philosophical purity—what are the demonstrable, practical adantages of choosing the correct HTML elements over
soup and spaghetti? There are lots. Find out in this webinar. (Note the earlier time.)
Smashing TV: “Using Firefox DevTools to understand modern layout techniques” with Chen Hui Jing (Feb 19, 08:00 AM Eastern). DevTools are great for debugging, but the newer releases of Firefox include tools that are great for helping you learn new CSS layout techniques by allowing you to visualise them. This webinar will explain a variety of modern CSS layout techniques through live demonstrations using Firefox DevTools, and provide real-world use cases of how such techniques allow designs to better adapt across a broad range of viewports.

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:

Tel Aviv, Israel, UX Salon, March 11

Innsbruck, Austria, ScriptConf, March 29

San Francisco, USA, SmashingConf, April 15 & 18

Toronto, Canada, SmashingConf, June 24 & 27

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!

February 5, 2019 Smashing Newsletter: Issue #223

Previous Issues