Todos of a frontend developer

Many moons ago, i read an article detailling out the steps a frontend developer takes when implementing a rather small component for the web. I think it was a card layout? Sadly, i haven't saved the link. I recall it being a smashing magazine article, but there it ends.

Equally many moons i wanted to make my own list of recurring tasks.

Not every task in the list is always necessary. They depend on whether the task is a component or setting up a whole website or debugging and fixing an error or the experience already made in the past with a piece of functionality or …. Also, we work with CMSes, so the task list also involves these parts.

• HTML: define the markup, check on additional accessibility requirements and implement them.
• QA backend work: check the work done by my backend colleagues. Does it fulfill all the requirements? Does data fit the frontend output, can the frontend adjust, can the backend adjust?
• CSS layout considerations, grid, flexbox, columns or the goold old block.
• Overall code architecture. Is there already something existing in the project i can re-use? Is an abstraction in order? Are basic settings like colors, spacing etc used? Is the design deviating?
• If design is deviating from existing standards of the site, run rounds with the designer to see if we can make it fit and keep it simple.
• Other CSS work
• JS, whatever is necessary.
• QA frontend work: prepare content for all component variants and check them on browsers, screen sizes, screen readers, keyboard only, what else?.
• QA future editor work: Check the work flow of an editor. Is all the UI copy of the CMS understandable? Are all required fields marked as required? The best storybook setup will not cover your pitfalls when working with CMSes and editors.
• QA for approval: prepare content on test server, pass instructions to QA person / client for approval
• Documentation: anything relevant for my fellow coders and future-me to add to code comments or the Readme? Create or update the documentation for editors.
• Deployment, live check, communication with project manager / client.