Frontend Masters Blog – Page 54 – Helping Your Journey to Senior Developer

CC

Looks like Mandy Michael has been busy lately! I’m just seeing her fairly new Text Effects site, which has a growing collection of cool looks for text with demos and tutorials (GOLD!). Then I noticed her Variable Fonts site has kind of joined the fray with a similar design and a third site, Text Lab as well with really progressive demos.

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.

Featured

Simulating Crop Marks

Popular

Latest Articles

The Beat

Featured

Simulating Crop Marks

Popular

Latest Articles

The Beat

Text Effects

Flashy Landing Pages

Arguments for opening links in a new tab or window

Project Idea: Convert a PDF Form to a Web Form

Subscribe

Wanna write?