A Themeable React Data Grid With Great UX-Focused Features
(This is a sponsored post.) KendoReact can save you boatloads of time because it offers pre-built componentry you can use in your app right away. They look nice, but more importantly, they are easily themeable, so they look however you need them to look. And I’d say the looks aren’t even the important part. There are lots of component libraries out there that focus on the visuals. These components tackle the hardest interactivity problems in UI/UX, and do it with grace, s..
Read more- 0 Comment
Websites We Like: MD Nichrome
Here’s a beautiful website: it’s a type specimen for Mass-Driver’s ever-so-lovely type family MD Nichrome. There’s a ton of nifty animations and graphics explaining all the features inside… If you’re wondering how those animations work, they’re actually styled <video> elements. There’s lots of great graphic design touches as well, such as how the letters below trail off and fade away… That little bit of CSS is neat. It makes sure ..
Read more- 0 Comment
The Single Page App Morality Play
Baldur Bjarnason brings some baby bear porridge to the discussion of Single Page App (SPA) vs. Multi Page App (MPA). Single-Page-Apps can be fantastic. Most teams will mess them up because most teams operate in dysfunctional organisations. Multi-Page-Apps can also be fantastic, both in highly functional organisations that can apply them when and where they are appropriate and in dysfunctional ones, as they enforce a limit to project scope. Both approaches can be good a..
Read more- 0 Comment
Considerations for Using Markdown Writing Apps on Static Sites
If you run or have recently switched to a static site generator, you might find yourself writing a lot of Markdown. And the more you write it, the more you want the tooling experience to disappear so that the content takes focus. I’m going to give you some options (including my favorite), but more importantly, I’ll walk though features that these apps offer that are especially relevant when choosing. Here are some key considerations for Markdown editing apps to help th..
Read more- 0 Comment
The Options for Password Revealing Inputs
In HTML, there is a very clear input type for dealing with passwords: <input type="password"> If you use that, you get the obfuscated bullet-points when you type into it, like: •••••••• That’s the web trying to help with security. If it didn’t do that, the classic problem is that someone could be peering over your shoulder, spying on what you’re entering. Easier than looking at what keys your fingers press, I suppose. But UX has evo..
Read more- 0 Comment
Scroll Shadows With JavaScript
Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It’s just good UX. You can actually pull it off in CSS, which I think is amazing and one of the great CSS tricks. Except… it just doesn’t work on iOS Safari. It used to work, and then it broke in iOS 13, along with some other useful CSS things, with no explanation why and has never been fixed. So, now, if you really want scroll shadows (I think th..
Read more- 0 Comment
Conditional Border Radius In CSS
Ahmad Shadeed documents a bonafide CSS trick from the Facebook CSS codebase. The idea is that when an element is the full width of the viewport, it doesn’t have any border-radius. But otherwise, it has 8px of border-radius. Here’s the code: .card { border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))); } One line! Super neat. The guts of it is the comparison between 100vw and 100%. Essentially, the border-radius comes out to 8px most of the time..
Read more- 0 Comment
Branching Strategies in Git
This article is part of our “Advanced Git” series. Be sure to follow us on Twitter or sign up for our newsletter to hear about the next articles! Almost all version control systems (VCS) have some kind of support for branching. In a nutshell, branching means that you leave the main development line by creating a new, separate container for your work and continue to work there. This way you can experiment and try out new things without messing up the production code bas..
Read more- 0 Comment
ct.css — Performance Hints via Injected Stylesheet Alone
This is some bonafide CSS trickery from Harry that gives you some generic performance advice based on what it sees in your <head> element. First, it’s possible to make a <style> block visible like any other element by changing the display away from the default of none. It’s a nice little trick. You can even do that for things in the <head>, for example… head, head style, head script { display: block; } From there, Harry gets very clever..
Read more- 0 Comment
Quickly Testing CSS Fallbacks
Dumb trick alert! Not all browsers support all features. Say you want to write a fallback for browsers that doesn’t support CSS Grid. Not very common these days, but it’s just to illustrate a point. You could write the supporting CSS in an @supports blocks: @supports (display: grid) { .blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr)); gap: 1rem; } } Then to test the fallback, you quickly chang..
Read more- 0 Comment