Time Saving Tips for Front-End Developers

How to support the show

Patreon

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

Introduction

• 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