Avoid These Front-End Development Mistakes!

Avoiding common front-end development mistakes is essential if you want your website or web app to perform optimally and provide a smoother user experience.

You can keep your code clean, efficient, and user-friendly with a few simple tips.

Using Inline Styles

Inline styles can seem quick and much easier to apply specific styles to an element. However, if you want to change colour or button size, you will have to edit every single element with a




Welcome to my normalized page

3. Start with a basic version that works everywhere, then add advanced moden features for modern browsers.

4. Utilise cross-browser testing tools to test on various browser/device combinations.

5. Use autoprefixers to automatically add vendor prefixers to CSS properties for better compatibility.

a. Before autoprefixer

.example {
        display: flex;
        transition: transform 1s;
        user-select: none;
        background-image: linear-gradient(to bottom, #fff, #000);
}

b. After autoprefixer

.example {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-transition: -webkit-transform 1s;
        transition: -webkit-transform 1s;
        transition: transform 1s;
        transition: transform 1s, -webkit-transform 1s;
        -webkit-user-select: none;
              -moz-user-select: none;
                -ms-user-select: none;
                        user-select: none;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
        background-image: linear-gradient(to bottom, #fff, #000);
}

Remember, the goal is to provide a good user experience for most visitors, not pixel-perfect consistency across all browsers. Regular testing and iterative improvements are key.

Learn how to fix cross-browser compatibility issues when developing websites and web applications.

Neglecting Image & Video Optimisation

Many front-end developers underestimate the impact of unoptimized media files on website performance.

Large image and video files can significantly slow down your website, leading to poor user experience, increased bounce rates, and potentially negative impacts on search engine rankings.

Solution:

1. Optimise images:

• Convert images to modern formats like WebP, which offer better compression without quality loss.
• Use tools like ImageOptim, TinyPNG, or Squoosh for efficient image compression.
• Implement responsive images using the srcset attribute to serve appropriate sizes for different devices.

2. Implement lazy loading

• Use the loading="lazy" attribute on images and iframes not immediately visible on page load.
• For older browsers, consider using Intersection Observer API or lazy loading libraries.

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg"> 
    <img src="image.jpg" alt="Description" loading="lazy">
picture>

3. Handle videos carefully

• Compress videos without significant quality loss using tools like HandBrake.
• For larger files, consider hosting videos on platforms like YouTube or Vimeo and embedding them on your site.
• Use adaptive bitrate streaming for longer videos to adjust quality based on the user’s connection speed.

4. Leverage browser caching

• Set appropriate cache headers for your media files to reduce server requests on repeat visits.

Inconsistent Code Formatting

Code can be difficult to read and maintain when the formatting is inconsistent. It can lead to confusion, slower development times, and more bugs.

    
        
    
    

Inconsistent heading
Text with inconsistent code

Solution:

1. Set clear coding guidelines:

Use a separate file for HTML, CSS and JavaScript for a clear structure when there is more than one developer contributing to the same project.

Utilise linters to catch errors and inconsistencies and formatters to ensure everyone in your team writes the code in the same style.

HTML:

 lang="en">

         charset="UTF-8">
         name="viewport" content="width=device-width, initial-scale=1.0">
        
         rel="stylesheet" href="style.css">


        
Consistent Heading
        
Text with consistent code
        

style.css:

h1 {
        font-size: 22px;
        color: green;
}

p {
        font-size: 14px;
        color: red;
}

script.js:

function showAlert() {
        alert('Hello!');
}

const variable = 5;

if (variable > 2) {
        alert('Variable is greater than 2');
}

2. Set up pre-commit hooks:

Use tools like Husky to run linters and formatters before each commit. This will ensure code styles across the team is consistent.

For instance, you can include the following Husky configuration in your package.json file.

{
    "scripts": {
        "lint": "eslint .",
        "lint:fix": "eslint . --fix",
        "format": "prettier --write ."
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run lint && npm run format"
        }
    }
}

You will need to install Husky, ESLint, and Prettier in your project: npm install --save-dev husky eslint prettier.

This will help to automatically run the linter and formatter before each of your commit, ensuring that your codes will always be formatted.

3. Use consistent naming conventions:

Adopt clear and consistent naming for variables, functions, classes, and file names. These naming conventions help maintain consistency across your codebase:

• Variables and funcions, use camelCase.

// Variables
let userName = 'John Doe';
const maxLimit = 100;

// Function
function calculateTotal(price, quantity) {
    return price * quantity;
}

• Classes use PascalCase.

class UserProfile {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }
}

• Constants use UPPER_SNAKE_CASE.

const MAX_USERS = 100;
const API_BASE_URL = 'https://api.example.com';

• File names generally use kebab-case, except for React components which use PascalCase.

// File names: Use kebab-case for most files
user-profile.js
api-service.js

// Component files in React: Use PascalCase
UserProfile.jsx
NavigationBar.jsx

• CSS classes use kebab-case.

.user-profile {
    background-color: #f0f0f0;
}

.user-name {
    font-weight: bold;
}

By following these conventions:

• Your code becomes more readable and predictable.
• It’s easier for team members to understand and navigate the codebase.
• You reduce the cognitive load when switching between different parts of your project.

Ignoring Responsive Design

A non-responsive design will drive away visitors and lead to poor mobile experience. Users often access websites on both mobile and desktop.

Solution:

1. Design with a mobile-first approach in mind.

2. Use flexible layouts (e.g., Flexbox or Grid).

3. Implement responsive images.

4. Utilise CSS media queries to adjust layouts and styles based on screen size.

a. Example on media queries usage:

/* Base styles (mobile-first approach) */
.container {
    width: 100%;
    padding: 15px;
}

.nav-menu {
    display: none; /* Hide menu by default on small screens */
}

/* Tablet and larger screens */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }

    .nav-menu {
        display: flex; /* Show menu on larger screens */
        justify-content: space-between;
    }
}

/* Desktop screens */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

In practice, responsive designs often cater to more screen sizes than just the three shown in our example. While our simplified version demonstrates the principle with breakpoints at 768px (tablet) and 1024px (desktop), real-world projects typically use a more nuanced approach.

For instance, popular CSS frameworks like Bootstrap use a series of breakpoints to create a more flexible system:

• Extra small (xs): < 576px
• Small (sm): ≥ 576px
• Medium (md): ≥ 768px
• Large (lg): ≥ 992px
• Extra large (xl): ≥ 1200px
• Extra extra large (xxl): ≥ 1400px

These additional breakpoints allow for finer control over how your layout adapts across a wider range of devices.

The exact breakpoints you choose should depend on your specific design and the devices your users are likely to use.

Neglecting Accessibility

Neglecting web accessibility creates a non-inclusive experience for users with disabilities. This creates a barrier that prevents users from navigating, understanding and interacting with online content effectively.

Solution:

Add semantic HTML elements such as

Don’t forget to provide alt text for images and use contrast colours for readability. Ensure your entire website or web app is navigable via keyboard shortcuts.

-- 1. Semantic HTML -->

<header>
    <h1>Website Titleh1>
    <nav>
        <ul>
            <li><a href="#home">Homea>li>
            <li><a href="#about">Abouta>li>
            <li><a href="#contact">Contacta>li>
        ul>
    nav>
header>

<main>
    <article>
        <h2>Article Titleh2>
        <p>Article content goes here...p>
    article>
main>

<footer>
    <p>&copy; 2024 Your Companyp>
footer>

-- 2. Text alternatives -->

<img src="logo.png" alt="Company Logo:A blue circle with a white star">

-- 3. Keyboard navigation -->

<button onclick="submitForm()" onkeypress="submitForm()">Submitbutton>

-- 4. Color contrast (This would be in your CSS) -->

<style>
    body {
        color: #333; /* Dark gray text */
        background-color: #fff; /* White background */
    }
style>

-- 5. Accessible forms -->

<form>
    <label for="name">Name:label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Submitbutton>
form>

-- 6. ARIA labels for complex widgets -->

<div id="tabs" role="tablist">
    <button id="tab1" role="tab" aria-selected="true" aria-controls="panel1">Tab 1button>
    <button id="tab2" role="tab" aria-selected="false" aria-controls