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
Animation Techniques for Adding and Removing Items From a Stack
Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when you hover over it? Easy. Animating the position and size of an element in a performant way that also affects the position of other elements? Tricky! That’s exactly what we’ll get into here in this article. A common example is removing an item from a stack of items. The items stacked on top need to fall downwa..
Read more- 0 Comment
ShopTalk Goes Video
Dave and I slapped up a little videos section of the ShopTalk website. Twelve so far! They are short-ish, between 10-20 minutes, each focused on one fairly specific thing. We’re kinda just dipping our toes here — we don’t even have a real proper name for them yet! The place to subscribe to them is YouTube, and you might actually be subscribed already as we’ve been publishing them right to the CSS-Tricks YouTube Channel. There is a direct RSS feed as well if you’re c..
Read more- 0 Comment