Frontend Masters Boost – Page 24 – Helping Your Journey to Senior Developer

CC

I’ve had this Tweet bookmarked for months now from Brian Lovin who does a classic and well-deserved wrist-slapping of flashy design at the cost of communication. It’s all-too-easy to focus on exotic micro-interactions that will get likes on social media, but fail to communicate what a product does or tell a compelling story.

Criticism of form over function is a tale as old as time. People line up to criticize Frank Lloyd Wright, as Regina Cole wrote:

His roofs were improperly supported, they say. His buildings leak. They waste energy, are maintenance nightmares, have no garages, inadequate closets and as for the kitchens…

Makes you wonder what the development parallel is. I think it’s adding Kubernetes to the stack of a startup that hasn’t established product market fit yet.

CC

I feel like I’ve always been in the minority on this: I don’t think you should use target="_blank" on links. Unless you have a very good reason, that is, like there is currently-playing media that would stop, or a user has unsaved work you don’t want to interrupt. But I find that most people disagree, and have their own philosophy like “links to external sites should open in a new tab”. Jason Grigsby digs into this and enumerates the reasons people think this way, which is stuff like “well then they can get back to the original site easier”. That makes a smidge of sense, but it breaks the back button which I feel like is a stronger reason not to do it. And much crappier reasons like “it increases our time-on-site metric in Google Analytics.”

CC

Jermey Keith visited a school doing this exact project, and I thought it was a great idea for learning:

There’s a specific module his students are partaking in that’s right up my alley. They’re given a PDF inheritance-tax form and told to convert it for the web.

You could make doing this job really well a whole full-stack experience, but it starts with a great front end.

I genuinely get excited by the potential for progressive enhancement here. Sure, there’s the obvious approach of building in layers; HTML first, then CSS, then a sprinkling of JavaScript. But there’s also so much potential for enhancement within each layer.

Got your form fields marked up with the right input types? Great! Now what about autocomplete, inputmode, or pattern attributes?

Got your styles all looking good on the screen? Great! Now what about print styles?

Got form validation working? Great! Now how might you use local storage to save data locally?

I also love how with web forms, you don’t have to look at fields that are only required in certain circumstances. That’s implemented with progressive disclosure.

CC

Matej Latin has rejected the vast majority of portfolios he’s seen in his career for one reason, a “linear design process”:

By “linear design process” I mean cookie-cutter case studies that always read the same. The designer learned about a problem, conducted user interviews, created user personas, proceeded to sketches, then mockups and wireframes, made everything beautiful through visual design, created a prototype, and tested it with five users. Everything was perfect so they also created a design system which is not a design system but a style guide. But they call it a “design system” because it’s trendy and a keyword for the recruiters.

🌶️. I take the point: it feels fake and easy to see through. A real project is never this clean. The process is more like a squiggle.

Latest Articles

Tackling CSS Specificity

Writing a TodoMVC App with Modern Vanilla JavaScript

The Beat

Subscribe

Wanna write?

Did you know?

Latest Articles

Tackling CSS Specificity

Writing a TodoMVC App with Modern Vanilla JavaScript

The Beat

Flashy Landing Pages

Arguments for opening links in a new tab or window

Project Idea: Convert a PDF Form to a Web Form

A design portfolio mistake