When Heather Lee started a new job a year ago as a full-stack engineer at Digit, she felt confident in her back-end skills. Her front ends skills, not so much.
She didn’t know any React Native or Next.js. She’d used Angular while working at Salesforce, but only a little. To hit the ground running in her new role, she’d need to get caught up on some new technologies — and fast.
She took an online course on React and browsed Digit’s past pull requests to see how engineers structured their front-end code. She watched YouTube videos on how to recreate Spotify’s user interface or build swipe gestures. Most importantly, she said, she learned as she went.
Within the year, she’d collaborated with a coworker to build the front end of Digit’s student loans payment manager. She’d also helped create a new version of Digit’s homepage.
“That actually required some custom work for the bottom sheet. So I was able to use an NPM patch package — along with referencing old issues with that package — to build something that we needed,” she said. “And that’s really exciting.”
Sometimes, a new job requires more robust front-end development skills. Or maybe rounding out your front-end knowledge is a personal goal. Either way, here are tips from Lee and Greg Rice, a lead software engineer at Cognizant Softvision, on how to expand your know-how:
Tips to level up your front-end developer skills:
- Start with a text file. You can copy-paste source code into a text file, edit it and run it without a compiler.
- Start small. Break functionalities down into manageable chunks, then learn one at a time.
- Build your own app or dashboard. A dashboard that mitigates some inefficiencies on the back end will make your team happy — and you a better front-end coder.
- Ask where people learned stuff.
- Browse internal projects and pull requests. This helps you learn how experienced front-end developers think.
- Pull the camera back. Even as a novice, start forming opinions on the technologies you’re learning.
Start With a Text File
If you’re brand new to front-end development, start by getting familiar with JavaScript.
Go to any webpage, right-click and select “View Source” to see the source code, and copy and paste that source code into any notepad or text-only application. Then, modify and run the code to see how your changes show up. You don’t need a compiler for this — just save the text file as an .HTML file and run it in any browser. Rice recommended starting with a particularly interactive page, like a login page.
Once JavaScript starts making sense, branch out to building terminals or experimenting with docker containers, Rice said. As you get more advanced and start playing with increasingly complex web pages, you may need some tools to help make the source code readable by decompressing or de-minifying it.
Beware: For established back-end developers, JavaScript will feel counterintuitive.
“It’s a very flexible language, which is upsetting for a lot of people coming from a back-end world,” Rice said.
Despite its challenges, foundational JavaScript knowledge makes an engineer more marketable, he added: “Being able to understand from a computer science point of view what the language can do — how you take nothing and turn it into something — is very important.”
Start Small
Comfortable with JavaScript? Next, move on to some chunkier problems — but do them one piece at a time.
Finding project parts to tackle should be easy: Just ask coworkers if they need any help, Rice said. If you’re not 100 percent confident in your abilities, that’s OK. Just throw your component up for code review and learn as you go.
“You don’t want to be hassled with creating an entire site all by yourself just to learn front end,” he said. “People have little things that they want help with. For example, CSS is tricky and it doesn’t make everybody happy to work on it. So if you want to learn how to deal with it, helping someone else with their problem is a great place to start.”
When you divide your desired functionalities into smaller components, you’re less likely to get overwhelmed. When Lee started at Digit, team leaders gave her “really, really small” projects so she could get acquainted in small doses with end-to-end testing and how code interacts with simulators. From there, she took on larger and larger assignments, but she still sees experienced front-end developers break down large tasks into tiny, manageable pieces.
“My coworker just wrote a really cool NPM package that allows you to get a logo from [technology solution] Plaid and then fill that out into like a nice rounded square,” Lee said. “So she broke that down into several different parts. One part is determining the majority color in that particular image, and the rest is filling in that image.”
Build Your Own App or Dashboard
Building apps in her free time is another way Lee built her front-end coding skills. She’s currently working on one that lists and displays the properties of make-up and skin care products. Here are some grab-and-go ideas from Lee for developers looking to learn through app-building:
- Build your own personal portfolio.
- Replicate a favorite website’s animations.
- Try to integrate face or touch ID with a React Native mobile app.
- Write a MERN (MongoDB, Express, React and Node) stack application that displays information about one of your hobbies.
When you’re on the clock, creating a dashboard that mitigates back-end development inefficiencies is a great way to build front-end skills — especially if your role is back-end focused. This one is a twofer: new front-end competencies and a helpful tool for your team. Lee tried this in one of her previous roles.
“We had a very manual release step where at every bi-monthly release, we had to submit by hand a list of every feature or ticket that was going out in that particular release,” she wrote in an email. “This was prone to errors and difficult to manage. I wrote a dashboard in Angular that automated this process by ingesting GitHub webhooks.”
Ask Where People Learned Stuff
Wondering where a coworker picked up a skill? Ask.
There are tons of online resources for developers looking to learn — the trick will be finding the right one for your purposes. Lee recommended reading the issues sections of GitHub projects to learn how to tailor existing packages to your needs. That way, beginners don’t feel like they need to reinvent the wheel.
“If you want to build a React Native bottom sheet, there’s a package for it, but it doesn’t do exactly what you want,” she said. “The fun part is going through the issues section, because a lot of people probably have the same problem as you.”
But be careful — for novices, browsing GitHub could bring more confusion than clarity.
“It’s kind of like drinking from a fire hose,” Rice said. “If you’re just starting out, a lot of that can be overwhelming, and there’s a benefit to picking and choosing where you get your information.”
A more accessible option may be a company Slack channel dedicated to a particular language or framework. If your company doesn’t have one, check for outside groups that communicate on Slack and welcome newcomers. And don’t worry about shooting out questions, Rice said — any experienced developer has been there at some point.
“It gives somebody a chance to pay it forward — or backward, however you look at it,” he said. “Everyone understands how frustrating it is to be stuck on a problem. So in general, the people in those positions are more than happy to help.”
Here are other helpful learning resources Rice and Lee mentioned:
- YouTube: Here are Lee’s favorite videos on how to recreate Spotify’s UI and how to build a swipe gesture in React Native.
- Udemy: Here’s the course Lee took in React.
- Expo Snacks: This page lets you play with React Native with no computer set-up.
- Start React Native: For $9 a month, this site offers modules that show how to build declarative gestures and animations.
- Grasshopper: Rice recommended this app for beginner JavaScript learners.
Browse Internal Projects and Pull Requests
Sometimes, your company’s existing projects are the best way to examine how front-end code is structured. Lee, for example, browsed past pull requests to get familiar with navigation bar set-ups and state management tools like Redux.
For Rice, browsing pull requests in other teams’ repositories is a relatively new learning trick, but it’s one he plans to hang on to. Peering into the workflows and discussions of one of Cognizant’s globally distributed teams can reveal entirely new ways of thinking, he said. Over the last few weeks, he and a coworker had been reading other teams’ discussions on how to improve their codebases, and Rice was “fascinated.”
“I hadn’t done that before, but it was really educational because the people who were involved — one I knew and one I didn’t — were in this dialogue that was kind of inspiring,” he said. “It was a different style of reviewing [code] that I was really intrigued by. There were these pretty long, in-depth discussions in the comments about the concepts being used for each of these things they were trying to accomplish.”
Pull the Camera Back
You may be a front-end novice, but don’t sell yourself short — you can still form opinions on larger questions and debates within that developer community. In fact, Rice said, it’s essential.
“I look for people who have nuanced ideas about technical things without diving too deep into any particular technology, people who are just able to speak thoughtfully,” he said.
For instance, as you learn how to use React and Angular, take some time to learn why both are used and their relative merits. Rice also mentioned topics like the use of frameworks versus libraries and the set-up of module bundler Webpack. Front-end testing, unit testing and CI/CD pipelines are more things to keep in mind as you learn. Even if you’re practicing JavaScript in a notepad app, you can use Bitbucket or Github to make your own pull requests and create a tiny pipeline for your builds, Rice added.
“These things aren’t new for most people,” he said, “But understanding them and being able to say, ‘Yes, I appreciate them,’ or, ‘No, I don't, for these reasons,’ is important. As opposed to, ‘Sure, we can just do that.’”
No matter how skilled you get at front-end coding, there are always ways to get better. Collaborate with a designer. Sign up for a hackathon. Once you learn React Native and its built-in animation package, go a level deeper and install a library that runs animations on native threads. A willingness to learn new things, Rice said, is what makes a good developer a good developer.
“Saying that you’re X-type of code developer, like a JavaScript developer, sells yourself short a little,” he said. “One of my favorite coworkers is just like, ‘Well I haven’t done that language before, but how hard can it be?’ And he dives into it. I can try to emulate that, to hop in and try something.”
