DEV Community

Cover image for Web Development Bad Habits to Kick

Web Development Bad Habits to Kick

Liz Laffitte on February 24, 2021

Cover photo by mohamed abdelghaffar from Pexels 1. Not Designing for Mobile First You know what’s difficult? Taking a complex, intricat...
Collapse
 
davwheat profile image
David Wheatley

Do not use a button just to "style a link". Buttons are intended to perform actions on the current page.

Side note: also please don't use anchor elements which have onclick event handlers and a placeholder href (e.g. #) -- use a button instead.

Collapse
 
lizlaffitte profile image
Liz Laffitte • Edited

I wasn’t very clear with this. Often I see people using divs with an internal link where they should probably use a button element. For example, opening modals, paging through multi-page forms, etc.

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡ • Edited

this does not depend on the place you put'em but the context where the items are and the most important is what the user expect to happen. Most UX studies reveal that there are many differences depending on the professional market it's web app is working, cultural history, target of the web app and so.

If your users expect a button (layout) which triggers an action (logic) that according to standards or for convenience needs to be an "a" tag then use an "a" tag and add the proper styles to make it look like a button instead of being stubborn and use a button (which merely purpose is to trigger a "submit" in its context).

If we start talking about A11Y or this kind of things that nobody takes care of excepting when you need to build an application for people with some particular disability (usually never) then it's another story and we can discuss with that in mind.

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
lofibytes profile image
Jillian S. Estrella (she/her)

Being cruel to people isn't a good look, and certainly doesn't make a positive contribution to this community. Folx are here to learn, not to exchange vitriol.

Collapse
 
davwheat profile image
David Wheatley

Yeah, that I completely agree with. :)

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
bclonan profile image
Bradley Morgan Clonan

Because they're crappy coders but amazing at code exercises.

Collapse
 
charlieleedham profile image
CharlieLeedham

Another thing would be to stop worrying about using the latest tech, developers get so caught up not wanting to use jquery cause its becoming out dated and want to use Vue yet they have no experience using Vue and there's projects that need to be done in company, learn tech in your own time but as for bringing new tech into the business don't worry about it unless they are paying u time and research on it, cause by the time you learn Vue, react, angular etc, another tech would come out, it all does the same job at the end of the day, just another boring old website, if u are so desperate in making sure u are relevant in the market, learn VR or machine learning etc, something that's different, cause learning Web frameworks would only lead to new frameworks and then more and then more, does the same job, get it done

Collapse
 
lizlaffitte profile image
Liz Laffitte

I agree, if the only reason you’re learning a new framework is because you think you should, you’re on the wrong path. BUT if you really enjoy learning new ones, I say go for it. Just learn it well before jumping to the next one.

Collapse
 
aarone4 profile image
Aaron Reese

Disagree with both comments. Learning new tech to be more productive and keep company applications at the leading edge of functionality which is a competitive advantage. Old tech is getting impossible to recruit for. Experienced Devs have retired and new Devs aren't interested in being onboarded, otherwise they would all be learning COBOL.

Thread Thread
 
lizlaffitte profile image
Liz Laffitte

That’s a good point. However, I do think trying to learn EVERY new framework to stay competitive isn’t the best course of action. If you’re learning specific new frameworks used by companies or sectors or cities you’re interested in, I get it.

Thread Thread
 
joellau profile image
Joel Lau

as with all things, balance is important. can't lean in either direction too heavily

Collapse
 
danabaiardi profile image
DanaBaiardi

I am a div lover πŸ˜…

Collapse
 
lizlaffitte profile image
Liz Laffitte

I am also a little div crazy. πŸ™ˆ

Collapse
 
krishan111 profile image
Krishan111

I found this post really helpful especially the 4th part. Thanks For Posting

Collapse
 
iamcoderanddev profile image
Nick Williams

I too loved this post

Collapse
 
jennawagnercode profile image
Jenna Wagner

I guess this link would also help you @krishan111 searchenginejournal.com/10-importa...

Collapse
 
brandonwallace profile image
brandon_wallace

Designing a website mobile first is definitely a fabulous idea. It is a lot easier to create a website that way. It is a nice challenge to be able to design something that looks appealing to the eye on a small mobile screen.

Collapse
 
sqlrob profile image
Robert Myers

Speaking more as a user, I hate mobile first. Too often it turns into "mobile only". I have the space, use it to full advantage. Just looking at this page, there's a huge amount of white space on the sides, why? There's close to a thousand px of whitespace if I keep things maximized, and it's not like I'm using a 4K screen.

Collapse
 
godwindaniel10 profile image
Godwin Daniel

Do not be like me , I use ( text-align ) to center everything in a div container (e.g image, text buttons ) .

Instead , you should use the right property ( display: flex ;
Align-item: center
Justify-content: center

Collapse
 
ironcladdev profile image
Conner Ow

The DIV-Happy one is like my most-used bad habit. I do design stuff for mobile view, but after I've gotten it down in a computer's view first. If I make a navbar, I'll design what it looks like on a computer first and then add media queries to make it responsive.

Collapse
 
chidioguejiofor profile image
Chidiebere Ogujeiofor • Edited

Nice article.

One question I have is that is a link styled to look like a button (the link has no onclick but just goes to a new different page) a bad habit ? If so I'd like to learn why

Collapse
 
aarone4 profile image
Aaron Reese

Because a button is expected to trigger an action within the context of the page. A link is a navigation tool. The confusion often comes from the action (e.g. form submit) also has the side effect of a navigation.

Collapse
 
lizlaffitte profile image
Liz Laffitte • Edited

I don’t think so! I often create a btn class that gives links the padding, background color and box-shadow to look like a physical button. It would be using a div with an a tag where you SHOULD use a button element.

I found this article really interesting, and it touches on how screenreaders interact differently with links and buttons: css-tricks.com/use-button-element/

Collapse
 
chidioguejiofor profile image
Chidiebere Ogujeiofor

Nice. thanks a lot. I wanted to be sure I wasn't doing the wrong thing all along

Also I learnt a ton from the article about buttons.

Thread Thread
 
lizlaffitte profile image
Liz Laffitte

Of course! I am growing and learning right there with you.

Collapse
 
icecoffee profile image
Atulit Anand

Great article thanks
I'm a beginner but still I wanna say "mobile first approach sucks"

Collapse
 
lizlaffitte profile image
Liz Laffitte

Interesting! Do you mean you don’t like the process or that you don’t like the concept? What’s you’re preferred approach?

Collapse
 
icecoffee profile image
Atulit Anand • Edited

Such a wonderful day it is thanks for replying.
Generally I tend to make desktop version first and afterwards I add or remove sections accordingly.
The approach to make a mobile first version seems pretty decent when it comes to using only floats . But grids makes the process way swift and easy.

Thread Thread
 
lizlaffitte profile image
Liz Laffitte

I totally get it! I think flexbox makes responsive design a lot easier.

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

Hi i'm gonna made some puns from a side and to the other:

half of the issues you mentioned are designers concern and not from developer side. Consistent design and Mobile first is something that needs to be achieved on design side, then a layout builder (that does not need to be a programmer) mocks it with html and CSS (on the perfect world the designer would itself provide the HTML and CSS being a Web Designer instead shitty .psd files or similar things that graphic designers does when working on a job that it's over its skills -> digital responsive design, but this is another story).

The rest of "bad habits" are simplified to: use HTML elements for and how it's intended for. Apart from that there are tones of opinionated stuff around front-end layout and styling which, being html and css not programming languages they are interpreter-dependant so... maybe i'm getting old but if something fits for your needs, use it, just make sure you understood what you are using and what is intended for.

Collapse
 
lizlaffitte profile image
Liz Laffitte • Edited

True, some are related to design. When working on a small team, for small businesses, or for personal projects (so from my experience), you tend to find yourself doing double duty as developer and designer.

I tend to be pretty opinionated in my personal blog posts πŸ˜‚. This one was inspired by a particularly frustrating experience with a very pretty website that didn't work very well. It's not meant to an end-all-by-all guide, but rather some things to think about that I come across often.

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

I know your situation and I've lived it myself but... Then, to avoid this kind of issues you'll need to dig deeper in Color theory, Shape and Form, digital composition and a pair more of subjects if you want to properly design a good product and even that, you'll make mistakes because it's a completely different job even being related...

just try to focus in what it serves you and always apply the KISS principle so you don't get burnt down by tedious processes and the feeling that you can't get further :)

Collapse
 
ndom91 profile image
Nico Domino

What do you guys think about anchors vs. buttons in SPA navigation.

i.e. if in a todo-list, you hover over the todo and a "view details" link appears. This will take you to a separate page, but still inside that tab / SPA.

Should this be a button or anchor?

Collapse
 
aarone4 profile image
Aaron Reese

Look at the user concepts. If it LOOKS like a panel opened in the list (even if the URL changed) then use a button (style). If it looks like a new page use a link style. But most of all, be consistent.

Collapse
 
szhabolcs profile image
Nagy Szabolcs

Really interesting, I'll for sure use semantic elements as well in the future, they seem to make the code even more readable πŸ˜„

 
keithn profile image
Keith Nicholas

EVERY is a bit of a strawman, the argument was about someone introducing a web framework. It mentions Vue, which is actually one of the easiest to progressively introduce into a web page.

Collapse
 
ifirestone profile image
Ivan Firestone

One of the hardest things for newbie.... Experience talking here.... Been there done all the mistakes....

Collapse
 
ra1nbow1 profile image
Matvey Romanov

As a professional developer and a team leader, I think that it is really annoying habits

Collapse
 
kbenjamin92 profile image
Kipp Benjamin Jr.

Great post!

Collapse
 
ashleyo profile image
Ashley Oliver

May I add, do proof-read. Especially for grammar. Have someone else to do it if that's not your skill set. Expecting visitors to guess what you actually meant is just exhibiting your disdain.

Collapse
 
rivertwilight profile image
RiverTwilight

Useful but just 5 tips? Hope to read more.

Collapse
 
yoursunny profile image
Junxiao Shi

I'm intrigued with screen readers. Can't they just call me by telephone and I read the page to them? Then I don't need to bother with alt and aria tags anymore.

Collapse
 
phongduong profile image
Phong Duong

I always don't satisfy with my website's UI because it looks ugly when comparing to other sites. But I am also too lazy to redesign or improve it. πŸ˜‚πŸ˜‚

Collapse
 
babs_tinapa profile image
Babatunde Victor

Hard coding ful path got to me. For me, it gets boring writing links over and over again. As much as possible I use partial links on pages, links and images. Thank you for this 😊

Collapse
 
moniruzzamansaikat profile image
Moniruzzaman Saikat

Thanks for such an amazing post