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)
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)
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)
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)
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)
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)
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)
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.