Smashing Newsletter: Issue #205

Editorial Do you remember the good ol’ days when the generic personal pronoun “we” was used to make little web shops appear slightly bigger than they actually were? In fact, it may have been just one person freelancing from home in slippers and a bathrobe. Still, that profound “we” made the company sound more serious, and hence more trustworthy, didn’t it? Truth be told, there were times when we’ve all pretended to be somebody else just to get projects we wouldn’t be entrusted with otherwise, and I’ll be the first to admit that I am as guilty of it as everybody else. These days, when so many things around us are heavily exaggerated and deceptive, authenticity remains one of the few qualities that people can genuinely connect to. Too often, however, it’s not exhibited through a website at all, regrettably creating a vague image of a yet another obscure entity covered with corporate stock photos and meaningless jargon. While every brand promises to disrupt or be different, nothing truly feels disruptive or any different, and thus causes alienation and skepticism. So what if we try to infuse a bit of personality into our designs? What if we make people think for a blink of a second to create an opportunity for our customers to connect with us? What if we introduce imperfection to appear slightly more humane and approachable? What if we replace all stock photos with custom illustrations, and all trendy components such as Parallax with [dynamic CSS Grid compositions](https://labs.jensimmons.com/)? What about finding and using a distinct [design signature](https://www.webconf.asia/)? You don't have to go [overboard](https://www.bloomberg.com/features/elon-musk-goals/) but we could experiment and play and try something new. Now, of course not everybody will like it, and some people will find it annoying, confusing, misleading, or just childish. Very much like we find it difficult to connect to some people, we might experience the same issue with an interface that attempts to show its humane side. But isn’t it worth it? When everything is remarkably similar and doesn’t really stand for anything, isn’t it worth striving for our product to be genuinely loved by many people for the price of being genuinely disliked by a few?
Embedding personality into the design process will also be a topic of our upcoming Smashing Book 6, which we’ll pre-release on June 12th. Smashing Members can start reading it already, way before official release! You could 🎉 [become one of us](https://www.smashingmagazine.com/membership), too! Let’s think out of the box every once in a while, — Vitaly ([@smashingmag](https://www.twitter.com/smashingmag))

Table of Contents 1. [Give Your Stylesheets A Performance Boost](#a1) 2. [Flexbox Fallbacks For CSS Grid](#a2) 3. [Feminism Has A New (Type)Face](#a3) 4. [Tips And Tricks For Working With VS Code](#a4) 5. [A Super-Lightweight Text Input Mask](#a5) 6. [Self-Hosting Google Fonts (Without The Hassle)](#a6) 7. [On Weaponized Design](#a7)

1. Give Your Stylesheets A Performance Boost

Stylesheets should be performant and easy to maintain. Often, they are not. Maybe you weren’t aware of the problem or maybe the solutions you considered to improve the status quo were too expensive — no worries, giving your stylesheets a performance boost now is as easy as never before. Thanks to CSS Blocks.

Brought to life by the dev team at LinkedIn, the open-source tool analyzes and rewrites your stylesheets and templates. Powerful performance techniques like code-splitting, critical inlining, and tree shaking allow the tool to optimize selectors and boil the file size down to a minimum. Additional productivity features such as deep IDE integration or build-time errors for common coding mistakes — think typos — are also on board. (cm)

2. Flexbox Fallbacks For CSS Grid

CSS Grid is fantastic. However, it doesn’t work as expected in all browsers yet. That doesn’t mean that you should refrain from using Grid altogether, though. You only need to have the right fallback in place.

A resource that’ll help you progressively enhance without fear, comes from Una Kravets. Grid to Flex, as it’s called, shows different examples of how you can fall Grid layouts back to Flexbox. The project is open source, so if there’s a fallback you consider useful for fellow developers, don’t hesitate to submit it.

Speaking of Grid: Dan Netherton’s CSSGr.id makes it a breeze to generate the code for a grid. You simply tell the tool how many grid items and columns you want your grid to have, set the padding between the items, as well as some other specs, and — tadaaa! — you get the grid code all ready to be copied and pasted. (cm)

3. Feminism Has A New (Type)Face

A feminist typeface? Of course! The Feminist Letters advocates for gender equality by giving feminist topics like equal pay, reproductive rights, women’s health, and assaults a voice.

Each letter calls attention to one particular issue. Represented by ovaries, “T” stands for “Taking control of your body”, for example. The “E” is represented by a ballot and illustrates “election”. A rose and its leaf make up the letter “F” for “family leave”. An unusual typeface with a very important message. Download it for free and take a stand for womens’ rights. (cm)

4. Tips And Tricks For Working With VS Code

Visual Studio Code is known and loved for its powerful features. But are you really making full use of its capabilities? Burke Holland and Sarah Drasner claim you don’t, so to change that, they share all the best things about VS Code that nobody ever bothered to tell you.

From automatically updating HTML img tags with the correct size of the image to using font ligatures for better readability when coding, or using log points to log information out from your application, this lovely resource shares 17 valuable tips that’ll make your workflow even more efficient. (cm)

5. A Super-Lightweight Text Input Mask

How do you handle input masks? Do you code them from scratch or do you have a favorite library you keep using? An alternative that might be worth taking a closer look at now comes from Loz Jackson: the input mask library Text Mask.

Text Mask lets you create input masks for phone, date, email, zip code, and anything else you could possibly need. And the best part: With less than 4KB gzipped, it has a tiny fooprint. Support for pasting, browser auto-fill, and other operations a user would expect when interacting with a form are also built in. No third-party dependencies needed, and it works on mobile, too. (cm)

6. Self-Hosting Google Fonts (Without The Hassle)

More than 800 web fonts are part of Google Web Fonts — among them some real gems as well as a little tool that now makes working with Google Fonts more efficient (and most importantly, hassle-free): meet Mario Ranftl’s google-webfonts-helper.

While your User-Agent usually determines the best font format to use, Mario’s helper gives you more control: It lets you download your desired font in all formats directly, and it helps get it ready for local hosting, too. Charset customization is also built-in, and you can copy and paste the CSS to use the font in your project right away. A nice detail: There’s a “Best Support” CSS version if you need to support older browsers and a “Modern Browsers” CSS if supporting old browsers isn’t relevant. Handy. (cm)

7. On Weaponized Design

Facebook influencing the voting behavior of its users through psychology research enabled by interface and systems design. Twitter silencing notifications sent to trolling victims when they are added to malicious Twitter lists. Ad tech on an e-commerce website informing a father of his teen daughter’s unannounced pregnancy. You’ve probably heard these stories before. All of them are examples of weaponized design.

Put simply, weaponized design is the contrary of ethical design. Design that has gone plain wrong, design that wasn’t created for people with lived experiences but for user-storied design abstracts. The “Our Data Our Selves” blog published a thought-provoking article on the topic. It examines how the lived experiences of users are often at odds with how these systems are designed, when this might become a real danger, and how you can do better. An important read. (cm)

May 8, 2018 Smashing Newsletter: Issue #205

Previous Issues