Are you a frontend developer or are you applying for your first job as a frontend developer? Here are the things I have learned in the first year working as a frontend developer for a big consultant company in Denmark. My main experience is in the frontend framework Angular, but I believe the points in this posts will benefit you no-matter what framework you work in.
To construct this post I had a conversation with chatGPT about the point I have experienced and what else it things I should considerate. So in this post you can find ChatGPTs answer to “What are the unspoken rules for frontend developers” and further explanation to the points I find important to elaborate on. Last you will find the checklist I have next to my desk when developing frontend.
As a consultant I am assigned a task with a description of the task at hand, a link to a design with a design system and user acceptance criterias. Based on this information I should be able to solve the task. But as you quickly learn there is some unspoken rules and requirements when it comes to frontend. If you know the rules your life as a frontend developer will become much easier with fewer pull request comments and QA (Quality Assurance) tasks.
What are the unspoken rules for frontend developers?
- Use a consistent coding style throughout your project.
- Optimize for performance and load time.
- Test your code on different devices and browsers.
- Keep your code well-documented and easy to understand for other developers.
- Don’t rely on layout frameworks too heavily; try to understand and use the underlying HTML and CSS concepts.
- Keep accessibility in mind when designing and coding.
- Use animation to make good user experience.
- Use version control and collaborate with other developers effectively.
- Don’t use hacky solutions; try to find a clean, efficient solution to problems.
- Be open to feedback and constructive criticism.
It is time to go into details, how do we manage to incorperate these points into our daily routines.
How to use a consistent coding style throughout our project
- Choose a coding style guide: There are several coding style guides available for Angular, such as the AngularJS Style Guide or the John Papa Angular Style Guide. Choose one that best fits your team’s needs and preferences.
- Install a linter: A linter is a tool that helps enforce coding style guidelines by analyzing your code and identifying potential issues. For Angular, you can use tools such as TSLint or ESLint.
- Set up a linter configuration file: Create a configuration file for your linter that specifies the coding style rules you want to follow. This can include things like indentation, line length, and naming conventions.
- Use an automated formatter: An automated formatter is a tool that automatically reformats your code to match your chosen coding style. This can be especially helpful when working with a large codebase or when working with multiple developers who may have different coding styles.
- Review and enforce coding style guidelines: It’s important to regularly review and enforce coding style guidelines to ensure that your codebase is consistent and easy to read. This can be done through code reviews, automated tools, or manual checks.
- Document your coding style guidelines: Make sure to document your coding style guidelines in a central location, such as a readme file or style guide document, so that all team members are aware of them. This will help ensure that everyone is following the same guidelines and that the codebase remains consistent.
How to optimize for performance and load time in Angular
- Use lazy loading for modules: Lazy loading allows you to load only the required modules and components as needed, rather than loading everything at once. This can significantly improve the performance and load time of your application.
- Use Angular Universal for server-side rendering: Server-side rendering allows you to pre-render the HTML on the server, which can improve the initial load time of your application.
- Use the Angular Compiler: The Angular Compiler can optimize your code by removing unnecessary code and inlining small functions, resulting in faster execution and a smaller bundle size.
- Use a CDN for static assets: Storing static assets such as images and fonts on a CDN can reduce the load time of your application, as the assets will be served from a location closer to the user.
- Use caching: Caching allows you to store frequently used data and assets in the browser, reducing the need to fetch them from the server on subsequent visits.
- Minimize the number of HTTP requests: Each HTTP request takes time to complete, so reducing the number of requests can improve the overall performance and load time of your application.
- Optimize images: Using properly sized and optimized images can reduce the load time of your application.
- Use a performance monitoring tool: Tools such as Lighthouse or Webpagetest can help you identify performance bottlenecks and suggest ways to improve them.
How to test our code on different devices and browsers.
There are several ways to test your code on different devices and browsers:
- Use an emulator or simulator: Many IDEs (Integrated Development Environments) have built-in emulators or simulators that allow you to test your code on different devices and browsers. For example, Android Studio has an emulator that you can use to test your Android app on different devices and browsers.
- Use a remote testing service: There are several services that allow you to remotely test your code on different devices and browsers. For example, BrowserStack and Sauce Labs offer a wide range of devices and browsers that you can use to test your code.
- Use real devices: You can also test your code on real devices by installing it on your own devices or borrowing devices from friends or colleagues. This is a good option if you want to test your code on specific devices or if you want to test how it performs in real-world conditions.
- Use automated testing tools: There are several tools that allow you to automate the testing process by running tests on different devices and browsers. For example, Playwright where you can create end-to-end test.
It’s generally a good idea to test your code on as many devices and browsers as possible to ensure that it works correctly and performs well.
How to keep code well-documented and easy to understand for other developers.
There are several ways to keep your code well-documented and easy to understand for other developers:
-
Use clear and concise naming conventions for variables, functions, and classes. This will help other developers easily understand the purpose of each component in your code.
-
Include comments in your code to explain the purpose of each function or block of code. This will help other developers understand the logic behind your code.
-
Use clear and descriptive error messages to help other developers understand what went wrong in case of an error.
-
Document the inputs, outputs, and dependencies of each function or class. This will help other developers understand the requirements and dependencies of your code.
-
Use consistent formatting and indentation in your code to make it easier to read and navigate.
-
Regularly update your documentation as you make changes to your code to keep it up-to-date and accurate.
- Follow the SOLID principles
By following these guidelines, you can make your code more understandable and easier for other developers to work with.
How to keep accessibility in mind when designing and coding?
There are several steps you can take to ensure that your designs and code are accessible:
- Use semantic HTML: Use HTML tags that accurately describe the content of your page, such as <h1> for headings, <p> for paragraphs, and <img> for images. This will help assistive technologies, such as screen readers, understand the structure of your page.
- Add alt text to images: Alt text is a description of an image that is displayed when the image cannot be displayed, such as when a user is using a screen reader. Make sure to add alt text to all images to provide context and information to users who cannot see them.
- Make sure your site is responsive: Responsive design ensures that your site is easy to use and navigate on any device, including mobile phones, tablets, and desktop computers. This is especially important for users with disabilities who may be using assistive technologies, such as screen readers, that are optimized for specific devices.
- Use clear and concise language: Avoid using jargon or complex language that may be difficult for users with cognitive or learning disabilities to understand. Use clear, concise language that is easy to read and follow.
- Test your site for accessibility: Use tools such as the Web Content Accessibility Guidelines (WCAG) to test your site for accessibility issues. This will help you identify any issues and make necessary changes to ensure that your site is accessible to all users.
- You can read more about WCAG for Angular
How do I use animation to make good user experience.
Here are some steps you can follow to become good at making animations in frontend:
- Learn the basics of HTML, CSS, and JavaScript: These are the fundamental technologies used to create animations in frontend. Make sure you have a good understanding of how they work before attempting to make animations.
- Experiment with different animation libraries: There are many libraries and frameworks that make it easier to create animations in frontend, such as Animate.css, Velocity.js, and GSAP. Experiment with different libraries to find the one that works best for you.
- Practice, practice, practice: The more you practice making animations, the better you will become at it. Find projects to work on that involve animating elements, and try to come up with creative ways to use animations in your projects.
- Learn from others: There are many resources available online that can help you learn how to create animations in frontend. Follow blogs and tutorials, and watch videos and webinars from experts in the field.
- Keep up with the latest trends and techniques: The field of frontend animation is constantly evolving, so it’s important to stay up to date with the latest trends and techniques. Follow industry news and take courses or attend workshops to stay current.
Checklist
This is a lot to remember so I have created a checklist that you can print out and have next to your computer while coding. The checklist is separated into three; Before, During and After starting a new task.
I hope this can help you and make your development process more clean and fun.
You can find a link to the design here.
If you have any questions or things to add to the checklist please leave a comment and I will love to get your imputs.
Have a great day and happy coding 👩🏽💻
