Always experiment first

This is a quickie post! One of the things people getting into doing websites is that they mess up their ways of working by developing straight into production. Back in the days this often meant FTP, making changes locally on files and then copying the files into production.

There is however a big problem with this way of working: production site is optimized for production use! This means there are things like caching that come into your way. You might end up doing some silly things like disabling caching on your production .htaccess file, or something similar.

The above is solving the wrong issue. What you should instead consider is how you do your work. Instead of developing straight into production (and then having problems) you should isolate your development from production.

To do this there are multiple ways. One way is to have a local production environment. However this has one downfall: you may need to gain access to it from your phone for testing things out. So, while most of your development can happen on your local machine there are times you need to opt-out. But how?

One solution is to use services like Codepen: instead of trying our your new stuff in production you can write the stuff you need to experiment with in isolation. This way you can even develop and debug on your phone! It is possible to plug or connect a keyboard to your phone.

Another alternative is to go for frameworks. Tools like Astro and publish to Vercel lets you skip a lot of the issues and complexity related to development vs production, such as the caching problem. Astro provides it's own local development environment, and you can also build a production static site locally and then serve it with for example npx http-server public. While there is some initial learning curve to Astro and Vercel they also let you avoid getting neck deep into some other topics when you're focusing in just getting things done.

So what to learn from here? Always consider your ways of working before solving problems by writing more code. If you're making a new feature or learning some new cool CSS and you're still not sure if things work ok in a multitude of different browsers, experiment in isolation! It saves you time and allows fast iteration.