Front end Engineering. Beyond Front end Development 🚀

The now of front end development

Modern Front end development transcends beyond writing the traditional HTML, CSS, and JavaScript. There are a lot of skills and tools a modern front end developer should have to aside from the traditional HTML, CSS, and JavaScript. These skills will give you the ability not only to develop but also to engineer world-class products. In

As Michele Riva puts it in his article Front end Development is Dead. The old way of building for the web is long gone.

In this article, I’ll introduce you to practices, technologies, and tools that will make you stand out as a front end developer

Web Accessibility

Accessibility (or a11y for short) is the practice of making products easy for users to use and interact with regardless of their condition or impairment. A11y encourages developers to create intuitive user experiences that makes user interaction with the web feels more natural.

Web Accessibility tips:

• Include proper _alt_ text for images.

Use the alt attribute to provide a meaningful description of images

<img src="https://res.cloudinary.com/ejiro/image/upload/glasses.png" alt="blue light anti glare computer glasses" /></span>

Metal Frame Anti-blue Light Computer Glasses

The value in the alt attribute will accessible to screen readers and it will be displayed if the image fails to load. If images are for decorative / styling purposes only, you may leave alt attribute value empty but always include an alt tag.

• Accessible forms

Ensure each form fields have its own explicit label tag. Associate input elements with label tags using the for and id attribute for the label and input elements respectively. Ensure the for and id attributes’ values matches

Email</label>
<input type="email" id="email" name="email" />

Use the appropriate input type. Check this out for more

Progressive Web Apps

Progressive web apps (or PWA for short) are application software that looks and feels like a native application but it’s built with core web technologies, including HTML, CSS, and JavaScript. PWAs are made possible through the web manifest and service worker. It is designed to work on any platform that uses a standards-compliant browser.

As a modern front end developer, the ability to build PWAs that are available offline through caching, launchable from the home screen, offers push notifications will make you an outstanding developer. Below is a snippet of what makes a basic PWA possible.

_index.html_

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('service-worker.js')
    .then(reg=> {
      console.log('Registering service worker...', reg);
    })
    .catch(err => {
      console.error('Registration failed:', err);
    });
  });
}

_service-worker.js_

self.addEventListener('install', event => {
  console.log('installing service worker...😎');
  self.skipWaiting();
});
self.addEventListener('activate', event => {
  console.log('Service worker activating...');
});
self.addEventListener('fetch', event => {
  console.log('Fetching:', event.request.url);
});

Learn more about PWAs here

Web Performance

Web performance refers to the speed with which web pages are rendered on users’ browsers. Some developers careless about the load time of a webpage as long as it “works” but as a developer who wants to build world-class products, web performance optimisation skill is important

Useful tips and tools

• compress and minify your assets. Including HTML, CSS JavaScript, images — JavaScript minifier
• Preload files and assets with high priority ASAP — Resource prioritization

<link rel="preload" as="script" href="high-priority.js">

• make use of web storage APIs for the offline capability of your app
• Analyse your page speed performance using tools like PageSpeed Insights, GTMetrix
• Use only images that are needed
• Reduce the number of HTTP request on your web app

NPM

Node Package Manager (NPM for short) is a package manager for JavaScript and it’s also the default package manager for the Nodejs. A modern front end developer should be able to install npm packages and use them to develop products efficiently. It is unlike for one to be considered a front end developer in 2020 and beyond without being able to use NPM packages.

You don’t have to create your own packages, 90% of the time, chances are that packages to solve your problem and boost your developer experience already exist in the NPM registry. Most of the time you’re like going to be installing npm install express --save, uninstalling npm uninstall express --save dependencies and using them to build feature-rich web apps.

Popular packages on NPM registry are

• React
• Express
• Webpack
• Vue
• Axios
• Babel runtime

Conclusion

Front end engineering has never been more interesting and challenging. A whole lot more than the traditional HTML, CSS, and a bit of JavaScript is expected from front end engineers. I hope I have been able to convince you to level up from just being a front end dev to becoming someone who can engineer web applications.

Thanks for making it to the end. If want more awesome articles like this, Follow me on twitter and on hashnode for more 🚀