RSS feed
All postsEXPLORE TOPIC

#frontend

Mike·
···

Stealing your way to original design with Dan Mall

Mall is a capable, arguably influential designer and writer on the web. It's always cool to see how the sausage is made, but even cooler to see that a person with his credentials has a framework for creative "theft" as a basis for starting new designs.

When you're experienced, you start to internalize these kinds of layout patterns. But while recently working on a website, I realized I hadn't designed one in a very long time and was pretty unfamiliar with the nuts and bolts of a site these days. This would've been a great way to get rolling, and I might try it for the next iteration.

DiscussJul 4, 2017
Mike·
···

Inline validation considered harmful

Just kidding, this article didn't really use that word. And rather than an alarmist view, this is a fairly measured take. However, most of the arguments are actually against realtime (onblur) validation, not inline validation.

I spent two years dealing with some serious problems that were born entirely out of the fact that an application used realtime+inline validation. And that was primarily in a series of wizard-like dialogs, which really didn't make any sense (the pattern of "disable the continue button until validation is cleared" would've worked well).

Our problems included:

  • forms that didn't require a certain order to filling them out, but validation that did
  • false positives triggered by mouse actions that left users in an unresolvable state if they clicked "wrong"
  • field groups often in a false-positive state (point #4 in the article)

This isn't the same as saying that per-field validation is wrong, and I still strongly believe in that, but this article has a lot of solid points.

DiscussJun 27, 2017
Mike·
···

It's grid time!

Firefox and Chrome have now officially launched support for CSS grid. Months of saving Rachel Andrew talks in your Pocket account and saying "I'll get to that soon, it won't be ready for a couple years anyway" have finally paid off!

I'm kind of stoked to get into it. Here's a CSS-Tricks primer.

DiscussMar 12, 2017
Mike·
···

Front End Style Guides by Anna Debenham

I'm still pretty into design systems and style-guide driven design, and I'm encouraged that the faddish nature of the conversation around these methods is passing into general wisdom and best practice. But there's still a lot of knowledge that has yet to be put "out there."

Brad Frost and Anna Debenham, who co-hosted a podcast together last year, are two of the biggest public proponents to recently release books on the subject. Whereas Frost's focuses more on the "why" and the philosophy of style-guide-driven design, Debenham's is very much a "how" book.

She first goes through some of the methodologies and techniques that help break designers of the nasty habit of designing by pages: style tiles, element collages, and component libraries. Then she covers the advantages of style guides.

From there, it's all practical. She focuses most of the book on the step by step process of implementing your first style-guide-driven redesign or creation of a component library. Throughout, she answers questions that real people doing real things with real style guides are going to ask: how rigid should I be, what tools should I use, what about maintenance once it's built... etc.

Overall, it's a short read but dense with useful, practical information from that rare breed — a developer who can write and explain concisely and clearly. If you've gotten on board the philosophical train of style guides but aren't sure where to start, it's a good buy at $8. Get it here.

DiscussJan 13, 2017
Mike·
···

In praise of Jeet

EDIT: I spent a lot of time using Jeet on a lot of sites and apps once I discovered it. Thanks, Jeet.

I've used a lot of CSS frameworks, minimal grids, etc etc. I've even made my own, which frankly would've worked for this site. But it didn't work for the more complex purpose I had hoped to apply it to, so I ended up using Jeet, which is a variation on what this site actually uses.

This site uses Lost Grid, a PostCSS based system that's pretty neat. But its creator's earlier work, Jeet (for Stylus or Sass), is a pretty beautiful creation on its own. Awesomely, it's now being maintained again by someone else, so it feels alive and pretty safe to use. That's nice because I'm just not quite ready to throw PostCSS-based tools into production yet. I need speed, and speed means familiarity. That means Sass. I'd encourage anyone looking for a grid that is only a grid to look at Jeet.

DiscussJul 7, 2016
Mike·
···

Semantics vs Objects and other scary CSS animals

I suppose it was only a matter of time. The backlash always appears. It's a pretty old argument to be honest, the idea of getting "back to basics" or "using the web as it was meant to be used." But the reason that front end devs have gotten a bit away from these kinds of methods of styling is that it doesn't support everything that everyone wants to do anymore.

I'd still say that if you're making a website — even if you're working with atomic or styleguide-driven design — you're better off taking advantage of HTML elements, ARIA roles, and the cascade to style your site. But in the world of applications where structure is arbitrary and markup is not necessarily the most readable thing in the world (and guess what, this is often out of our hands), being reusable and "bulletproof" is more important to a lot of front end folks.

It's funny because this debate appears just as I'm finally considering adopting BEM in a project. I love — and need— the idea of a self-contained piece of UI that I can drop anywhere. At its best, this is front-end methodology as UX improvement, because the consistency of those pieces of UI helps the overall experience. Even without that benefit, it aids in speed of dev. Embarrassingly, perhaps the main reason that I gravitated toward BEM is that I'm sick of figuring out what to call things as I place HTML elements on a page.

DiscussMay 17, 2016
Mike·
···

Put the "designers should code" debate to rest

Good read. The likelihood of that debate ever ending is small. But the point here is awesome. It's not about your skillset. It's about the fact that you're trying to describe a Picasso by farting.

It took me several years to come to that opinion and it hasn’t changed much, but it wasn’t the coding that was important. It was the movement away from symbolic representations of that which we were designing. It was about not using flat images as a poor proxy for something that’s different for different people on different devices in different browsers.
DiscussSep 4, 2015