Container-Adapting Tabs With “More” Button
2.5.2018
Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways.
There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve....
Wakamai Fondue
1.5.2018
Roel Nieskens released a tool that lets you upload a font file and see what’s inside, from how many characters it contains to the number of languages it supports. Here’s what you see once you upload a font, in this case Covik Sans Mono Black:
Why is this data useful? Well, I used this tool just...
Solved With CSS! Dropdown Menus
1.5.2018
A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites.
Let’s see if we can make...
Code Challenge #9: Build A Scroll-Spy Navbar
1.5.2018
A navigation bar is undoubtedly a really important element considered while designing websites and web pages. In a website, it's utilized in navigating around the site through specific links. Howev
Change Python Version
1.5.2018
Python plays a major role at Mozilla; much of our website backends and tooling are written in the powerful language. Want to build Firefox? You’ll need to make sure you have the proper Python version, which I recently found out had been upgraded. Despite installing and verifying I had...
Animating Progress
30.4.2018
Jonathan Snook on the complexity of animating the <progress> element. If you’re unfamiliar, that’s the element that spits out a bar chart-like visual that indicates a position between two values:
This example has custom styles, but you get the point.
Jonathan's post shows off a method...
Collective #411
30.4.2018
cssgr.id * Ivy * Lifefaker * VS Code Extensions * Unavatar * load-asset * Figurine * Heartbeat Function
Collective #411 was written by Pedro Botelho and published on Codrops
Building a Mini Invoicing Application with Vue and NodeJS - JWT Authentication and Sending Invoices
30.4.2018
In the previous parts of the series, we looked at how to create the User Interface of our Invoicing Application that allowed users to create and view existing invoices. In this final part of the se
Finger-friendly numerical inputs with `inputmode`
30.4.2018
Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms — just use a <input...
Practical Jokes in the Browser
28.4.2018
I know April Fool’s Day is at the beginning of this month, but hey, now you’ve got a year to prepare. Not to mention a gool ol’ practical joke can be done anytime.
Fair warning on this stuff… you gotta be tasteful. Putting someone’s stapler in the jello is pretty hilarious unless it’s somehow...
CSS Blocks
27.4.2018
A new entry into the CSS-in-JS landscape! Looks like the idea is that you write an individual CSS file for every component. You have to work in components, that's how the whole thing works. In the same isle as styled-components, css-modules, and glamorous.
Then you write :scope { } which is...
WDRL — Edition 226: npm6, Postgres 10, Vanity Metrics, Palantir, And Leaning Into The Moment
27.4.2018
Hey,
last week I couldn’t manage to send out a newsletter so here’s everything from the past two weeks. The previous week I spent on a client work week to meet the remote team and while they’re extremely healthy for team work, to make progress with your company but they’re also exhaustive due...