decodering @decodering - Tumblr Blog

Raspberry Pi 4 3D printed portable CyberDeck

More then just some Cosplay this CyberDeck is a useful tool, a portable hardware hacking platform. The “brains” of which is the latest model Raspberry Pi 4 (4GB) SBC and even though its brand new the existing documented projects using any version RasPi are seemingly endless just like the ad-on “hats” and are all compatible with each other.

#hardware

Microsoft releases Cascadia Code, a mono-spaced font for terminals and coding editors

Cascadia Code was announced this past May at Microsoft’s Build event. [...] This font is most recommended to be used with terminal applications and text editors such as Visual Studio and Visual Studio Code.

Open source, using the SIL Open Font license.

(via reddit)

#fonts #coding

Every Layout

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

#css

Inter font family

The Inter font family now has extra weights and a variable version. (via)

#fonts #ui

Ikonate

Fully customisable and accessible vector icons. All free and open-source.

#svg #icons

USWDS is a library of code, tools, and guidance to help government teams design and build fast, accessible, mobile-friendly government websites backed by user research and modern best practices.

Documentation: v2.designsystem.digital.gov

With USWDS 2.0 we’re introducing a design system that’s built to grow with your needs — to help teams build better, more engaging websites for the American public.

The ‘magic number’ system for choosing accessible colour combinations is very clever.

Each USWDS system color has a numeric grade (like the 50 in red-50). The difference between any two grades is what we call the magic number. Colors with magic numbers of 40+ achieve AA Large contrast, magic numbers of 50+ achieve AA contrast, and magic numbers of 70+ achieve AAA contrast.

The update also offers a new, free, open-source typeface called Public Sans -- a neutral typeface for interfaces, headings, and body text.

#accessibility #fonts

CSS Grid for Designers

Johna Paolino, product design at the New York Times:

CSS Grid makes it easy to create grid tracks using CSS — grid tracks are just a fancy way of saying columns and rows. The 12-column grid popularized by Bootstrap was a smart solution at the time, but CSS Grid gives us many more layout options.

#css #design

Inter UI

Inter UI is a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens.

The family features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.

Free and open source.

#fonts

Guesstimate

Guesstimate is great at making estimates of things that aren't certain. You can forecast your earnings from a new venture, predict the amount of time a big project will take, or experiment with scientific theories. People have used it to optimize video games, understand lottery payoffs, and estimate the costs of childcare.

Free (to create public models) and open source.

#misc

Pew Research Center Internet & Technology Fact Sheets

Useful and reliable stats about internet use.

Social Media Fact Sheet

Mobile Fact Sheet

Internet/Broadband Fact Sheet

(via @SusannahFox)

#misc

When do the :hover, :focus, and :active pseudo-classes apply?

Ire Aderinokun:

The :hover, :focus, and :active pseudo-classes allow us to style elements in response to how a user interacts with it. Depending on the device being used, these pseudo-classes become active at different points (or not at all).

#css

CSS Gradient

CSS Gradient is a happy little website and free tool that lets you create a gradient background for websites. Besides being a css gradient generator, the site is also chock-full of colorful content about gradients from technical articles to real life gradient examples like Stripe and Instagram.

#css

Meta Tags

Meta Tags is a tool to debug and generate meta tag code for any website. With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

I was sure this handy little page had some upsell for a WordPress plugin when I first saw it. Anyway, it's still a neat resource with some good info.

#meta

Discover the web design trends, techniques, and tools that will define website and digital product design in 2019 — and beyond.

John Moore Williams:

Designers have an … anxious … relationship with the idea of trends. On one hand, following the crowd feels wrong — after all, isn’t creativity doing anything but what everyone else is doing? To this line of thinking, the only value in knowing what’s trendy is knowing what you’re pushing against. You can’t simply do the opposite of a trend, of course. But knowing what the trends are makes it easier to subtly comment on and/or critique them.

#design