The pace of our industry has become mind-boggling. Everything is changing so fast that it’s hard to keep up, which can be confusing, especially if you’re just starting out. Equally, if you’re working in a thriving studio, it can be hard to slow down and find the time and space you need to learn in order to move faster.
However, keeping your skill set up-to-date is critical in an industry that moves as fast as ours. The more skilled you are, the more easily you can solve problems that command a premium price for your time.
Basic HTML, CSS, and JavaScript knowledge is assumed as your foundation, as well as an understanding of factors like website security, but what kind of skills beyond this do you need to get ahead in our industry? We’ve invited a bunch of designers and developers to suggest actionable advice to help you move faster as a front-end developer.
You might also like: Prove Yourself: 4 Ways to Demonstrate Your Expertise.
1. Focus
The key to learning fast as a front-end developer is focus, found self-taught freelance web designer and developer Zell Liew.
“Focus on what you need to learn to accomplish your goals,” he said. “You don't have to know every CSS property or master every JavaScript framework out there. You only need what you need.”
Zell explained that, if you’re focused, you'll pay attention to the right articles, the right people, and the right details, which lets you gain knowledge faster and retain information longer.
Software developer and consultant Dustin Ewers agreed: "Keeping up with the JavaScript ecosystem is nearly impossible. Instead of trying to keep up on every framework that comes out, focus on fundamentals. Fundamentals last longer than the latest trend. Also, learn the basic concepts that modern JavaScript frameworks use. For example, React is much easier if you have a decent grasp of functional programming.”
Also read Zell’s article on what makes a good front-end developer.
You might also like: The 20 Best Atom Packages for Front End Developers.
2. Use your experience
Senior visual designer at Allstate Gina DeConti, pointed out that whether you are a visual designer or a developer, what you are actually doing is solving problems for your clients. She recommended using your experience to your advantage.
“Each life phase that you have gone through has taught you valuable lessons and given you insight,” she said. “You can use that wisdom to see obstacles from different perspectives. Let your experience guide you to see how things connect and relate to each other in ways that someone with less maturity might miss."
Tip: Using your experience also means predicting your users' needs. For example, your previous experience working with clients may have shown you that zooming on product images is an oft-requested theme feature, which means you can use jQuery image zoom to bring this functionality to your clients without being asked. This type of foresight helps build your credibility.
3. Learn to visualize code
Software code can appear to be intimidating at first glance, but just like English, it’s only a language for describing what to do, pointed out web developer Leon Brown.
“Every problem can be broken down to a collection of simple steps that are easy to understand,” he explained. “For creatives, learning to visualize these steps goes a long way in being able to write and make sense of code.”
Leon advised that learning how to make good use of whitespace and indentation is definitely a must.
“This is the equivalent of English grammar, where paragraphs, full stops and commas are used to give clarity to the description. Good use of whitespace and indentation allows you and other people to make sense of complicated code.”
Here’s an example of how visualizations are used for learning math:
4. Spend time on your initial setup
One of the frustrations that cause a huge impact on speed is with the initial setup and maintenance of a development environment, found freelance front-end developer Simon Owen.
“There are lots of things we can do to help us in our day-to-day lives and rapidly speed things up,” he explains. “This could be something like an alias for git to g, a function for s to open the current working path in Sublime Text, installing tools such as Node and npm to allow us to download dependencies, or setting up our favorite themes to help us scan code quickly.”
Simon has been writing about what he’s been up to in the first six months of his freelance career, and has put together a screencast series that will help guide you on how to set up an automated development environment process along with automating the installation of apps, macOS customization, demystifying what actually happens when you run various common Terminal commands, and a whole host of various things to speed up your day to day development workflow.
You might also like: The 20 Best Visual Studio Code Extensions for Front End Developers.
5. Get to know your IDE
As you will spend the majority of your time in the integrated development environment (IDE), creative developer Dave Stewart recommended diving into it to learn it inside out.
“Learn the shortcut keys for finding and opening, window navigation, find and replace, and coding assistance. Discover if it does clever things like multiple text selection, insertion, deletion, and replacement. Learn how to find and select next word, expand selection, move lines and blocks up and down. Make sure you can hyperlink through your code in your IDE as if the program was running in Chrome DevTools.”
Dave’s tool of choice is WebStorm by JetBrains. "It leaves the lighter but cooler Visual Studio Code in the dust when it comes to functionality and productivity. Yes, you have to pay for it, but all craftsmen should be paying for good tools—programmers are no exception.”
Check out Dave’s list of top WebStorm features and shortcuts.
6. Leverage Git’s difftool to change the way you code
Ray Villalobos, full-stack design/development teacher and senior staff instructor at Lynda.com/LinkedIn Learning, recommended a little Git trick that lets you store snapshots of your files at any moment, and also compare those snapshots with previous commits or branches by using specialized comparison tools.
“Use the commit command to lock in a state and then get yourself a decent difftool (another git command) that visualizes differences,” he explained. “You can compare your code between commits or branches. GitHub Desktop will do this for you in a cross-platform way. Kaleidoscope is my go to difftool for Mac. Some editors like Visual Studio Code will show you the differences as you type.”
If you’re into GitHub, Ray suggested a hidden visualization tool you can access using this formula: https://github.com/USERNAME/PROJECTNAME/compare/BRANCH01…BRANCH02. He uses this when he creates courses, so that you can compare your work with each of his finished branches.
7. Code slower
It may sound surprising, but one way to move faster as a front-end developer is to actually code slower.
“Too many people focus on writing code quickly without building a strategic foundation that allows agile change management later,” warned web developer Leon Brown, author of No Nonsense Programming Concepts: A Jargon-Free Introduction to Writing Software Systems. “Anything that's visual has a high risk of change later in the development lifecycle.”
Craig Cooper, founder of Shopify Experts agency Pilgrim Marketing, agreed, saying he always codes as if he was going to reuse the code over and over again in different places, and as if he’d come back to it in two years and need to instantly understand everything.
Leon suggested writing instructions slower and taking the time to think about the design of the system to identify where there is risk of change. Create code like abstract art, and create certain features in a way that can also be called to do other features that have similar definitions.
“I used this concept for the last project I worked on,” Leon explained. “It came in really handy at the end when alterations were requested. These changes would have been problematic and required additional time if I didn't write the code to be easily changeable from the start.
“Fortunately, the late changes that would have taken days to create and test only took minutes. The strategic design also meant that a lot of testing requirements could be avoided. Testing is often a requirement that's forgotten about.”
You might also like: Announcing Shopify Partner Academy Technical Exams: Test Your Knowledge and Elevate Your Craft.
8. Ask for help
Catt Small, senior product designer at Etsy, noticed that a lot of people are afraid to admit they are feeling challenged by a code problem.
“The best front-enders and quickest learners ask questions all the time,” she pointed out. “CSS and JavaScript are ever-changing. Remembering everything is impossible.”
As a great way to facilitate a question-friendly environment, Catt suggested pair programming: sit at a computer (or screenshare) and work on your challenging problems with someone else, regardless of their knowledge level.
“Having more eyes on your work can spark new ideas and help you find solutions you couldn't think of alone.”
9. Don't skimp on soft skills
Over the years, consultant Dustin Ewers has learned that the key to good software is getting the ‘boring’ stuff right. You should spend more time working on soft, evergreen skills, whose value is often underestimated. Not all problems can be solved with a technical solution, and many job listings actually ask for soft skills before any tech skills.
“Interpersonal skills are a force multiplier for developers”, Dustin explained. “A decent developer with strong interpersonal skills is going to win over a genius developer that can't talk to people.”
Dustin specifically recommended learning about communication, conflict resolution, stress management, and metalearning (learning how to learn). “These skills will pay huge dividends over the course of your career."
10. Learn by doing
For designer, writer, and speaker Christopher Murphy, the best way to learn is to teach. Once or twice a year he picks up a new tool, plays with it, and puts together a slide deck to share with his studiomates over a lunch and learn.
“By building a short presentation—nothing too extravagant!—you force yourself to truly get to grips with a tool,” he advised. “Right now I’m exploring Kirby for a side project I’m working on and, as I learn, I’m building a short Keynote presentation. Not only can I share this with my colleagues, but I can also refer to it down the line as an aide memoire. Win, win.”
Even if you don’t want to venture into teaching, you should just try things out. As Zell Liew pointed out, “You will make mistakes, no matter how hard you try to make things perfect. But that’s okay. Just give yourself the permission to make mistakes and correct them later.”
Hone the right skills
As it turns out, the most important skills aren’t about the latest framework and whether you need to learn React or Vue. It’s more important to realize you can’t learn (or even master) everything, not to freeze, to develop your foundation, and really concentrate on those communication skills. And if you understand how to learn, it will help you develop skills faster and to a higher standard.
Also, remember the bigger picture—how your code will be used by other people and what kind of experience you provide. As Zell said, “don't get stuck wondering what you should do next. Pick something and go.”
Read more
- Build Forms on Shopify: How to Use Liquid to Build Robust Forms for Shopify Themes
- Free Webinar] Developing with Shopify: Using JavaScript to Add Ecommerce to Any Website
- Build an Eye-Catching Non-Rectangular Header Design
- 10 Ways to Create Delightful and User-Friendly Web Animation
- 5 Easy-to-Implement Website Maintenance Tips for Your Client's Ecommerce Business
- Enhancing the Ecommerce Experience: Recent Updates to Shopify’s Online Store and Liquid
- How to Use PWA and AMP for User Centered Design
- A Modern Approach to CSS Pt. 2: Building Resources
What do you do to keep your front end developer skills sharp? Let us know in the comments below!
