Web News

Time Saving Tips for Front-End Developers

May 14, 2024
May 28, 2024
Episode Number:

Sometimes web development deadlines can come up faster than expected, or even worse, your workload may overwhelm the amount of time you have left until a deliverable is due. When this happens, it's easy to panic, procrastinate, or even quit altogether. Thankfully, development has a lot of wiggle room in how tasks are performed and can typically be worked on anywhere (in office, at home, on-the-go). This week, Matt and Mike discussed how to save time when you're working on your website's UI, more specifically, Matt reflected on a recent busy week where he pulled out all the stops on time saving while doing front-end development.


Also available on...
...and many more, check your podcast app!

Who’s in This Episode?

Show Notes

How to support the show


Prices subject to change and are listed in USD

  • Support the show from as little as ~$1/month
  • Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
  • Help support the HTML All The Things Podcast: Click Here

Learn with Scrimba

We receive a monetary kickback when you use our link

  • Learn to code using Scrimba with their interactive follow along code editor
  • Join their exclusive discord communities and network to find your first job!
  • Use our affiliate link to learn more

Show Notes


  • On paper it may seem that the best way to develop websites is to take your time and do it properly
  • With that in mind, it may seem that developing slowly and as perfectly as possible would be the best approach
  • While this method may result in a highly polished product, the time investment is extremely highsome text
    • The development process and time invested also do not play well with changes that may need to be made rapidly as designs and content needs change
  • In my last episode, we explored ways to develop websites quickly using custom code, no-code, and hiring web dev agencies to help get the job donesome text
    • In this episode, I want to explore how to save time when you're coding your own UI
    • I picked up these tips and tricks along the way from my custom coded websites as well as ones created on Webflow

Make "notes" in your CSS classes

  • If you want to take an existing class (ie .content-box) and make a new content box that is similar, but you don't want to simply add a new class on top (ie .content-box .new) then add notes to your new classsome text
    • Copy the entire .content-box class with all its properties
    • Add a "note" at the beginning of it ".new-content-box"
    • The idea is that now your content box will look the same, but you have free reign over changing properties and breaking it entirely - you can always go back and copy + paste the original .content-box properties again
    • Make your work glanceable to make it faster to work on

When to start over: preservation is sometimes overrated

  • When you're working on a project that already has a similar page, or section, that you're trying to work with it makes sense to copy + paste that existing section then start working on modifying it
  • Sometimes, modifications can take longer than the creation of a new like-element:some text
    • Strictly laid out sections (ie CSS Grid-heavy)
    • Complex CSS structure (ie class name standards - hard to use if you're unfamiliar, but should it be disturbed?)
    • Preserving in a production environment (can't change existing classes, due to their use elsewhere)
    • Too much hacking (ie using padding instead of margin, to get results you want)
    • Too many and too complex "combo classes"

Work now, refactor later

  • When under the demands of high-speed development, you may have no choice but to work quick enough to get the job done without worrying about how it looks, is commented, or how efficient it is
  • The idea behind this is that you work to get it functioning, then you spend less time refactoring it later to "tune it up"
  • Benefitssome text
    • You get work done quickly
    • Get feedback faster
    • Can make changes quicker (since you aren't worried about how it works/looks yet)
  • Downfallsome text
    • Refactoring can introduce new bugs
    • It's easy to miss things when refactoring
  • The Realitysome text
    • This method is a necessary evil to deliver solutions quickly, while still allotting time (hopefully) to strive towards perfection

Isolate your work

  • If you're still waiting for final approvals, or don't want to disturb a production environment - isolate your work
  • Instead of tiptoeing around the risk of changing a page that is in production, it much less stressful and much more responsible to isolate your work to a development area of some sort
  • In an isolated environment you can work quickly, without worry about the public seeing a WIP - feedback, changes and experimentations can be done rapidly without worry that an experiment may take too long to make and analyze while the public suffers

Get Unstuck and Continue

  • If you get stuck on a problem, spend some time trying to solve it, and if you're stumped - move on to the rest of your work and come back to the problem
  • If you're given 5 pages to make and you get stuck halfway on the first onesome text
    • You don't want to hit the deadline having just solved your problem and finished one page
    • It looks much better finishing 4.5/5
    • And working on the other pages may give you an idea of the solution

Cliché but true: Get Started

  • Don’t sit there marveling at the amount of work you need to do and get started - you're almost always faster than you think