It’s easy for developers to make mistakes. However, we can prevent them if we know about them beforehand.
In this article, we’ll look at mistakes that newbie front-end developers often make that we can all do more to avoid.
Not Using Responsive Web Design
With the proliferation of mobile devices around the world, we have to consider them when building our app.
If we didn’t use responsive design, mobile users viewing our app would be looking at lots of tiny text and having to scroll vertically and horizontally to see anything.
We have to make sure that mobile users are considered in any design.
Lack of Input Validation
Input validation is important. We can’t just trust users to input everything in the right format.
Therefore, we should check their input on the client-side — to tell users when they’ve input something different from what we’re looking for.
Mistakes are easy to make but also malicious attackers may take advantage of the lack of validation to launch attacks.
Cross-Browser Compatibility Issues
Different browsers may render pages differently. We should test everything on a variety of browsers when developing our code.
Most browsers are standards-based, so this should be less of a problem now — but problems can still arise.
If we’re still targeting Internet Explorer, then we definitely should test with IE to make sure that we’ve fixed any issues there.
Using Outdated HTML
Outdated HTML just isn’t good. We have to keep abreast of the latest HTML standards so we can take advantage of them.
If it’s available in the browsers that we’re targeting or available as a polyfill, then we can use it.
For layout, we should use flexbox and grid, instead of float. Also, semantic HTML has been the paradigm for years, so we shouldn’t use things like font styling tags.
Use of Website Builder Tools
Website builder tools don’t help us much with front-end developers. They’re only used for people that don’t know how to code to build websites quickly.
However, if we’re front-end developers, then we can code. So we shouldn’t rely on them to build web apps or websites.
Not Considering Details
There are many details to consider when we’re building the front end — it’s hard to catch all the little things that can be missed.
Ask the designer who’s designed what you’re building to look at your work so that you have chance to catch any flaws in your design.
Fancy and Tiny Fonts
Fancy or tiny fonts are no good. They’re weird and hard on the eyes.
Just use fonts that are known to be easy to read.
Broken Links
Never ignore broken links. They don’t provide users with a good experience.
If we have lots of links to check, we may want to write scripts or tests to check them all.
Auto-playing Audio and Video
Auto-playing audio and video are always annoying. Most people can’t wait to stop them from playing.
This is especially frustrating when people are using mobile devices with less processing power where we have to wait longer for them to load and stop.
Just stop putting them on our websites.
Relying on jQuery
jQuery is an outdated library for manipulating the DOM, adding animations, and also has some functions for data manipulation.
A lot of the functionality has been incorporated into the standard JavaScript API. Therefore, we shouldn’t use it since it just adds to the bloat of our app and doesn’t provide extra utility that we can’t get with the JavaScript standard library on the browser.
If we want to use jQuery for something, we should look for their plain JavaScript equivalent or implement it ourselves.
Conclusion
Responsive design is a must for most front end web apps. Unless we really don’t want mobile users to use our app, then we should adopt responsive design now.
Outdated technologies like jQuery and old HTML conventions shouldn’t be used.
Trusting the user too much is a bad idea. We should make sure that we check and sanitize their inputs so that we won’t run into problems later.
Finally, we should think of the user. Don’t play audio and video automatically and fix broken links.