Becoming a well rounded frontend engineer

With the type of work we do at DiUS, knowing just a single field of development is not quite enough. The best frontend engineers I’ve worked with have always been well rounded across the application stack – from the front to the back – and the best ones also have an appreciation of design (e.g. graphics, branding, UI design, UX design). So let me help…

The frontend is even more complex these days, with frameworks blurring the line between frontend and backend (e.g. Next.js), and some with no backend at all. It can be hard to decide where to start your learning – the goal is not to be a specialist at everything, but to become a well rounded engineer.

This blog post is based on my own experiences and what I’ve found useful for me. There’s nothing groundbreaking here, but hopefully it’ll provide some ideas on how you might also be able to expand your thinking beyond the technology.

Learning from side projects

Through the course of my career, I’ve always dabbled in side projects as a way to keep learning and experimenting with technology.

Everyone has their own way of learning. For me, I’m motivated by solving my own problems, rather than solving something as part of a structured learning course. That’s not to say there isn’t any value in following a course or tutorial – I think they can provide some basic principles which you can build upon. They also make good reference material. But solely relying on them to learn from has not been as effective in my experience.

I learn through building things and seeing things work (or break) as part of a personal project. It’s more satisfying and motivating when you’re solving your own problems – when you get stuck, you’re more willing to try and solve the problem to the end, as opposed to revealing an answer as part of a course or tutorial.

Setting your goal

There are different approaches to setting goals:

• Build something that will solve a problem you might have.
• Build something experimental and totally useless, yet fun.

Add some requirements to your project that will force you to learn something new. Some examples include:

• If you wanted to learn CSS – find a website or an app that you’re inspired by, base your design off this, and as a challenge for yourself, recreate the look and feel.
• If you wanted to learn about state management – aim to have it consume and interact with another API or service so you can learn how to fetch, persist and manipulate data, while keeping it in sync with your frontend.
• If you wanted to learn about performance (e.g. page load speed) – build something and try to optimise it after as an exercise.
• If you wanted to learn about production infrastructure – set a goal to deploy your app somewhere. Maybe it’s as simple as sending something up the Netlify or Vercel. Though, if you want to learn the primitive way, then try and get something deployed on AWS with CDK. Maybe you can add a CDN in front of it as well.

The main thing to consider is having an achievable goal, as aiming for something simple helps with motivation. For example, if you wanted to learn more about API communications and asynchronous loading, then your project should involve some sort of dynamic data.

Managing your goal

• Use a kanban board to manage your goals e.g. trello/asana as its motivating to see things move across the board. This will also help you hone your skills, breaking down more complex behaviours into meaningful tasks, which will also help with your day-to-day work. The kanban board will also help you remember the stage of your side project. I don’t know about you, but I quite often go months without looking at a side project, so it’s handy having a visual representation of where I’m at. 
• Draw the UI you want on paper or use something like Balsamiq to build a wireframe. If you’re a little more adventurous and want to actually design something in detail, use Figma or Sketch.
• Use git and feature branches as you would for your day-to-day work.

Disadvantages of side projects

• Sometimes you just want to ship things, fast. So writing tests, making components accessible (screen reader friendly), building in cross device support etc. are probably not on your mind – this is fine! The goal is to continue to achieve things and keep yourself motivated.
• It takes a lot of personal time outside of working hours, so it’s important to work on something you’re passionate about. Set realistic goals about what you can complete and in what timeframe. 
• Choose a project that resonates with you, whether that’s a short course or a side project. You’re going to be more invested in something that correlates with how you learn and your interests.  

Frontend learning resources

Here are a few frontend learning resources I follow: 

• A List Apart has high quality and thought provoking content. I’ve learnt a lot from this resource over the years, especially about UX and various UI design patterns.
• CSS-TRICKS offers interesting CSS and other frontend related things.
• Smashing Magazine has general articles on web development.
• JavaScript Weekly is a newsletter with useful curated news on the JS side of things.

Getting started with frontend

If you’re just starting out, I’d recommend building the simplest website without any of the JavaScript frameworks as they add complexity to someone learning the basics. Just use pure HTML and CSS as understanding how to make a website from scratch is important. Optimise for what you want to learn. Getting started is difficult with the myriad of tools and frameworks out there.

Once you’re happy with your basic understanding of HTML and CSS, it’s time to progressively enhance your HTML and add in some interactivity. I’d recommend using a tool such as Stimulus which is a lightweight and powerful way to apply sprinkles of JavaScript to your HTML.

What about React?

React is widely used for the majority of web based projects and you can find a lot of third party components pre-built to rapidly develop apps. The caveat is that some of these components might be over-engineered or difficult to customise with how you want to build your app. Also, React components can be quite heavy in terms of bundled file size.

Alternatives to React?

Svelte is a nice alternative that promotes less JavaScript on the frontend and hence supports lighter weight websites. Marko is another nice one too. But with both, the ecosystem is a lot smaller than React. 

What about Tailwind for CSS?

Tailwind is great! I love using it as there’s plenty of prebuilt Tailwind components/blocks out there that you can drop into your project. It’s concise and saves typing, however, I’d recommend not using it if you’re trying to learn CSS. The abstraction adds another layer of complexity to learning CSS. If you’re starting out, I’d recommend just using SASS or straight up raw CSS. Use BEM to keep your CSS namespaced. But if you’re aiming for rapid development, Tailwind may be a good option.

Should I use TypeScript?

If you’re just starting out, TypeScript can get in the way, but it can also be a blessing in catching incorrect data structures. I’d recommend using it at some point and making it a habit.

What could I choose for a side project?

If I were to start a side project now, I’d be optimising for speed of development over performance. I would choose Next.js as it lets you get straight into building things and focus on solving your own problems – which is exactly how I stay motivated to learn more. 

Using Next.js comes at the expense of leaving out the knowledge of setting up build systems and things like handling the routing of an application. But I think these are problems which you can leave for future projects that you want to build from scratch. Next.js with a Supabase backend can let you build a fully featured application, quickly. Deploy to Vercel, and you’re live!

Another interesting framework I’ve found recently is Payload CMS. It’s a headless CMS, but you can use it to build out your backend with some simple schema definitions to persist your data. It comes with an API for your data out of the box and built in auth. This can speed up your time to value while you focus on learning.

If I was optimising for speed of the application, I would take a look at either Stimulus with Turbo, Svelte Kit or Marko with a Fastify server, as your application would be lightning fast by using these frameworks, though you may trade off in development speed.

Working with UI/UX designers

Working with designers shouldn’t be an “us vs them” affair, so I think a well balanced frontend engineer should not only look at it from a technical lens, but also from an art and design point of view. I personally enjoy art and design, and seeing things evolve over the years, especially in terms of web design, branding, graphics and advertising.

Keeping up with design trends

In order to keep an open mind, it helps to keep up to date with design trends. Some of it is exactly that, trends, but it’s still important to have an understanding from this perspective. Sometimes we build things to look great and provide a great experience through a trendy design. Of course there should be utility in it, but we should be open to these trends as much as we’re accepting of proven patterns.

My favourite design resources

I really enjoy following the current visual design trends as seeing the direction design moves is important as a frontend engineer. 

Seeing how visual design changes and seeing new patterns in UI can be a predictor of what eventually makes it into the mainstream. It’s also just enjoyable to be inspired by visual design trends – it might give you ideas of what you want to build for yourself. Here are some of my favourite design resources: 

• Typewolf is mainly focused on typography, but the sites they feature usually have a beautiful visual form, with an emphasis on typography and layout.
• Minimal Gallery is full of nicely designed websites. 
• Awwwards has lots of interesting websites from around the world, sometimes a bit over the top, but interesting nevertheless.
• Brand New is not really related to the web, but I love to just browse their Friday Likes segment. Interestingly, a lot of trends in print make it to the web (and vice versa) in terms of typography, colour, structure.
• Cargo is a hosted website as a service with premade templates, but it always has interesting examples of the websites they host. Some websites don’t have the best UX, but the point is to open up your mind to different aesthetics that are pushing the boundaries of design.

I hope this gives you useful ideas on how you can find ways to broaden your skills across multiple domains in order to make yourself a more well rounded engineer. It’s not about being a perfect engineer who can do everything, but about being a balanced engineer who has a broad understanding to make decisions, along with a common understanding with those who you may be working with.