So, what’s the secret? The secret is understanding the wide range of capabilities required to drive your projects. This means understanding how front-end development responsibilities are split up into various slices and identifying the gaps that your team needs help with.
After working on web development application projects/products for over 20 years, I have been asked many questions around the skills and talents that are necessary to collaborate on initiatives successfully. Many of those conversations end up with discussions around who takes care of what within our development team. In this blog, I wanted to discuss the vast amount of knowledge that is required, especially around front-end developers, to execute and deliver world class experiences centered around web development and application work. Ready to learn more? Let’s dive in!
As web projects have naturally evolved to be more complex, the skills and talent to be a leading developer have evolved as well. And if you are taking on a juicy project with various sets of complexities, it is hard to depend on one person. These kinds of projects are always team-oriented, which means a balancing act between different levels of experience as well as sphere of influence.
Let’s start with some basics… at Alliance Systems we are asked frequently and in various ways:
This article will focus on Front-end Development, so let’s begin by defining this world. Front-end development is sometimes also known as client-side development. These kinds of developers focus on the creation of HTML, CSS, and JavaScript to deliver the interfaces we interact with on a daily basis. These interfaces are delivered to us through online browsers such as Google Chrome, Apple Safari, Mozilla Firefox, and more. As technology has improved, the techniques and complexity for coding these interfaces have improved, but this has resulted in rapid dynamic growth. It means the roles of our front-end developers has evolved as well.
If you take the time to think about some of these dynamics, you begin to quickly realize how much effort goes into building and designing anything worth note. Here are a few examples:
What device do people use?
Desktops, laptops, tablets, mobile phones, smart watches, IoT products… the list continues to grow and shows no sign of slowing down.
Think about how many browsers are in the market… did you know that they don’t all follow the same protocols for development? And there are slight differences on how they render the interface; how do developers deal with these changes?
What kinds of systems and programming languages do developers use? There are many variations and not all languages are the same, do depending on need, developers need to be well rounded to some degree.
What are some of the main goals for development to consider for front-end?
Accessibility – the need for equality of content and functionality being delivered to everyone despite device and or being handicapped or impaired.
Performance – not all sites or applications are built the same when it comes to performance. How fast systems render interfaces and results can be critical to success.
Speed on Delivery – how quickly developers deliver accurate and functional solutions that are ready for a production environment can save time and money.
In order to truly accomplish the main goals, we have to deep dive into several categories to fully understand important aspects that our clients expect when delivering professional solutions. This includes taking a look at the following core categories:
Development
» JavaScript / jQuery
» Frameworks
» Version Control
Practical Concepts
» Cross Browser Challenges
» Compliance Standards
» Web Performance
Tools and Process
» Testing Debugging
» Preprocessors
» API Services
Development
Development
JavaScript & Libraries
JavaScript is a scripting language. Within our industry refer to a term dynamic. Elements that are animated, re-fresh, or interact with users in real-time are typically controlled with programmed scripting logical conditions. Here are some examples that you have seen throughout some of the sites you may use on a daily basis:
- Interactive web forms
- Animation sequences
- Slideshows and banners
- Autocomplete field functions
JavaScript can leverage libraries that front-end developers use so they don’t have to program every line of code from scratch. Popular JS libraries include React, Angular, Vue, and Svelte. These libraries that allow us to quickly prototype and develop the much more complex applications This saves time and energy and makes everyone happy.
Frameworks
Version Control
A few examples of version control systems that are well known are Git (Subversion). If you are a developer that is starting out, gaining trust and experience of these systems is important for your career, so start early and get organized.
Practical Concepts
Responsive Design
According to global stats, mobile leads the charge now with 54.46% of online traffic compared to 42.63% for desktop and 2.91% for tablets (as of February 2021). This shift, caused by many factors, is driving development shops to take a mobile-first approach on designs and execution. The usage statistics can’t be ignored; developing sites or applications without considering a mobile-first approach will lag behind in many aspects of customer experience and satisfaction. What was once a nice to have is now the norm.
What does this mean for front-end developers? It means they have to carefully consider a strategic approach to how their code will render across a bunch of devices with limited real estate; with accuracy and a smart way to maintain the code set in a streamlined way. From large screens with hi resolutions to smaller laptops to tablets and mobile phones and various sizes with no standards, it is a challenge that plagues our industry and increases complexity. In some instances, development teams and curate a very personalized experience per device.
It also means that design and development teams should not be working in silos. They should be collaborating side by side along with content and data analysts to think about the communication strategy at various levels across limitations of screen real estate. Much easier said than executed. Consequently, designers and developers have to play nice.
ADA and Accessibility Compliance
Semantic markup and understanding tagging and around accessibility and compliance standards are very important. Achieving compliance means understanding how to circumnavigate the rules around connecting to 3rd party devices, systems, and keeping code maintained for compatibility. These are all based around WCAG 2.1, ADA, s508 & other regulatory bodies.
Various disabilities affect people using system interfaces in various ways:
Blindness
Motor Impairment
Cognitive Disorders
Color Blindness
Macular Degeneration
Epilepsy
Blurred Vision
Older Age
Why most websites fail compliance and here are some high-level examples:
Menus: failed mostly because navigation is not compatible with keyboard inputs. Not being able to easily navigation dropdowns. Not being able to toggle and navigate menus prevents a huge problem. Most web designers ignore the programming required because it is considered as extra, but not deemed necessary.
Images: half failed because of the lack of ALT attributes – ability to properly describe the objects within an image. If an image contains text, it can also be included in the ALT attributes. Speech readers can quickly read off this meta data to help people with disabilities.
Popups: very few pass this test even when using “accessible” popup plugins and services. Examples for failure include: Keyboard input functionality needs to control popup with standard options like be able to navigate popup sections by tabbing, being able to close popups with the ESC key. Popups must include a “role” attribute equal to “dialog”.
Forms: Example: When a form is submitted and errors are present, the keyboard focus must be taken to the invalid field. User should receive explanation in both visual and code to any screen readers for the issues with this field. If there are multiple errors, the process needs to cycle until all fields have no issues.
Buttons: Most websites use SPAN, DIV or A (Link) but they don’t tag code appropriately with assignment of ROLE=BUTTON. This is a default to various disability tech systems and allows screen readers to properly understand buttons.
WCAG – is based on four core principles
- Information must be perceivable
- User interface components and navigation must be operable
- Information and operation of interface must be understandable
- Content must be robust enough to be interpreted by a wide range of assistive technologies
Some front-end developers specialize in compliance to make site experiences usable by all disabled people with variance for all types of conditions.
Web Performance
While websites and web applications can look beautiful and make a great first impression, the performance scores behind the scenes can be awful. Very much like a super sleek looking sports car with crap engine under the hood. The internal pluming is rarely seen and understood by many, yet these structures that deliver the presentation and logic to interactive web project matter when it comes to how they perform.
While this article isn’t meant to dive into the particulars of performance, it ultimately is defined as how long it takes for content, graphics, videos, and data results to load. As we all know, we are in an era where people have on-demand and real-time needs, and when sites are slow, most of us prefer to re-search and visit another competing site as opposed to wait for long periods.
There are various tools out there that provide front-end developers with a mechanism to score performance based on the several factors. Front-end developers that familiarize themselves with effective process and optimized speed results can generate some great scores which in turn deliver an overall better user experience. When you consider web applications that offer solutions at scale to large populations it has lasting impact.
Tools and Process
Testing and Debugging
I hate when people say developers aren’t creative people. They are some of the most creative people I know when it comes to problem solving and how they approach and tackle mental challenges. Being able to troubleshoot coding issues can be as much and art as it is science. Again, another way I see developers being really creative.
From unit testing to UI testing to common debugging, having the chops to problem solve is always key no matter where you position is within the development team.
Browser Web Developer Tools
Though there are various sets of tools available for developers, modern browsers coming with dev tools built-in to assist teams in testing. An easy way to describe this environment is leveraging what is called an Inspector Tool and Script Console. The inspector side allows for reviewing HTML/CSS and the effects of any changes made to these code sets, while the console allows you to view errors that stem from any scripting. The combination of these are tools extremely helpful.
Preprocessors
CSS Preprocessors can be considered a subset of web development. Front-end developers sometimes leverage this technology to speed up CSS coding. The vision here is scaling your style sheets and making them inherently easier to manage. It can help with formatting and making CSS easier to read and review. Two popular solutions are SASS and LESS, but there are more options popping up and evolving to make our cascading style sheets better into the future.
API Services
Data and how it is consumed to be used within the interfaces of the applications we develop is paramount. Learning to collaborate with designers is one facet we discussed earlier in this article. However, front-end developers need to collaborate with their other half; back-end developers. API Services allow developers to consume data by pulling or pushing data and then interacting with those data points.
API stands for Application Programming Interface. A fund way to break this down would be as follows (within the context of APIs):
-
Application… programs that we use
-
Programming… the logic and code that developers create
-
Interface… the common boundary used between shared applications to communicate
Due to APIs being somewhat of an abstract concept for people outside our industry, here is a helpful description:
To help visualize this concept, imagine an API as the middleman between a programmer and an application. This middleman accepts requests and, if that request is allowed, returns the data. The middleman also informs programmers about everything they can request, exactly how to ask for it and how to receive it.
Many applications that we commonly use in our daily lives tap into these API services and many people are not aware of it, nor should they. However, front-end developers see at as access to data (their treasure). Sometimes the data comes from external sources and sometimes it is served from internal databases. The challenge comes down to the amount of data, complexity of business logic rules and frequency of retrieval.
In summary…
Front-end developers are more than just people that know a little HTML and CSS. They are at the heart of core production teams and interact and collaborate with various team members to deliver great digital experiences.
If you are a business owner considering hiring a team or a web developer, now you have a better understanding for the breadth of knowledge it takes to be good. If you are a newbie and interested in a career as a developer, this may be a path for you. If you are an executive considering hiring additional talent on your team, now you have a better understanding for the potential gaps that may exist depending on your business model and projects.
Alliance Systems loves participating in web application initiatives that help SMBs with aspects of digital transformation and or product design. Talk to one of our specialists and get a FREE consultation to prepare for your journey.
Developing great digital products is our passion. Alliance Systems loves working with SMBs to help guide them on their digital transformation and digital product initiatives.