Frontend Development at 2wav

by Gretchen Wieshuber, Creative Director

If you’re curious about how programmers create appealing and intuitive experiences on websites, this article will give you some insight.

Aleksandra Dooley is the primary frontend developer at 2wav. She takes the mockups and specs provided by me, and replicates them using HTML, CSS, and Javascript.

The CyberTalent Bridge project has been a big undertaking, and Aleksandra is responsible for the front end. Below is an example of my mockup followed by a screen capture of the live site. They are remarkably similar.

Aleksandra points out some considerations that are not obvious on the surface. First of all, we always design for mobile. Even when a project will be used primarily on the desktop, it has to look good on mobile. Many of our projects are “mobile first” and are then designed to look good on wider screens. Either way, the frontend developer must check her work on a variety of widths.

Secondly, Aleksandra adds hover states and animations that let the user know the application is working. Feedback is necessary for a happy user. Whenever possible, a little bit of delight is added to make the experience more enjoyable.

The main tool that Aleksandra uses is Visual Studio Code. But before she writes a line of code, she determines which pieces of the app will become components, i.e., which pieces will be used more than once. By creating them once and reusing them, it saves time and ensures that the component looks and operates the same wherever it is used throughout the web application. She prints out and marks up the mockups, drawing boxes around the components and giving them names.

As a designer, I create global styles, and Aleksandra does the same. She has a repository of global styles for each project that includes colors, font specs, spacing, and more. This improves efficiency and consistency.

One challenge Aleksandra faces in CyberTalent Bridge is that it keeps going through changes as it evolves. When we start a project, we don’t know what we don’t know. As we make discoveries along the way, the app has to encompass new ideas. Decisions that made sense in the beginning might not make sense after revisions. She is adjusting her code every time a major change happens.

CyberTalent Bridge started with a simple idea: take one government cybersecurity framework that describes tasks, and one that describes peoples’ talents, and reduce them to a common language to recommend the best talent for each task. As we worked on it, we discovered that a lot of other capabilities are needed to make the app useful in the real world. Aleksandra noted that we added organizations, teams, recommendations, skills gaps, exports, and are now working on an API to coordinate with the Cyber Secure Dashboard.

The CyberTalent Passport is another major piece of this project. Each person has a Passport that describes their job positions, competencies, and certifications. The Passport has some unique features to its interface. The CyberTalent Bridge also has a user management area. Aleksandra is responsible for the frontend of all of it.

Aleksandra became a programmer by going through a bootcamp. She is a living example that you don’t need a Computer Science degree to become a developer. Start by reading books, watching online videos, or taking a bootcamp course. Do your own projects to gain skill. Her degree is in Biomedical Sciences, which shows that almost anyone can become a programmer if you have the desire.

Someone moving into frontend development should be prepared to use Google, YouTube, and Stack Overflow to solve problems. Backend development is a bigger undertaking, and Aleksandra is becoming more proficient in backend as she spends time with the 2wav team.

CyberTalent Bridge has been a turning point for Aleksandra. Being the principal frontend developer, both making mistakes and fixing them, has been a learning experience.

As a designer, I appreciate how well Aleksandra stays true to my mockups. She has the ability to code new components that are compatible with the existing design without needing micromanaging. Her suggestions for improving user experience are well-received.