Frame of Mind
05 Oct 2023
Front-end Pain
Being a front-end developer is painful. Getting that perfect design that balances usability, elegance, and functionality, then trying to make that into a reality with very clunky and finicky code can be an awful experience. Not only that, but you have to reiterate that same design onto multiple different screens and ratios. What about if the user has a wide screen monitor? It might look good on a 4:3 monitor, but what about if the user views the same website on a mobile device? It is very annoying. That’s where the beauty of frameworks come into play.
Frameworks
Think of frameworks like website templates. They help you keep consistent website designs across many devices and make sure that you don’t have to deal with formatting your design for every single device in the universe. There are many different types of frameworks for all kinds of development that can fit your needs. Need a light framework that can load pages fast? Use PureCSS. Need a framework that supports utility? Use TailwindCSS. Need a framework that can help produce beautiful layouts and designs? Use Semantic UI. One of the most popular frameworks that I have been learning to use is called Bootstrap. It is a CSS framework that helps keep consistent designs, especially on mobile devices. Whatever you design for the computer, it can fit it and make it look nice on mobile devices for you. For example, this is my attempt at replicating the National Park Services webpage for the Yellowstone National Park.
Learning Bootstrap
Learning Bootstrap was like learning a new but better version of HTML and CSS. The variety of classes that help with positioning and making your elements better looking was a big learning curve but overall helped enhance how the web page looked and also decrease development time compared to just using HTML and CSS. One of the most useful classes that I tend to use a lot is the padding and margin classes. Instead of having to go into the CSS file and give each part different padding and margins, you can use the classes to give each element their own padding and margin. For example, instead of using the CSS and giving each element padding of 40px, you can use the class “p-5” and it will apply padding of 3em which is around 40px. This vastly shortens the development time since you only had to type 3 characters instead of 3 lines of code!
There comes a cost…
Frameworks are really good, but they can come at a cost. You might notice nowadays that a lot of modern websites can be really slow at loading just for it to load a single article. This is because they use a lot of frameworks and load them all at once. A lot of the frameworks nowadays are used for data collecting and analytics so that the company knows what their users are doing and how to better adapt to get more profit from their audience. Some frameworks are better than others at collecting certain data so some websites decide that it’s better to pile them on top of each other to get the best of both worlds. Although this is a good thing for the company, the user experience suffers because of this greed. Pop-ups for ads, cookies, loading many images, background videos, and analytical tools can cause the loading time to increase tenfold or more depending on how many frameworks are used in the website.
What is best?
Depending on the circumstances of what you want to develop, having a framework might be the best help for you. Having no framework and working on pure CSS and HTML is completely fine as long as you acknowledge that it may not be fit for everyone. It also helps you learn a lot more about how HTML, CSS, and JavaScript work, and if you know how frameworks like Bootstrap and Tailwind work, you might use that knowledge to make your own templates that you can apply to your future projects to make your life easier. The most important thing for developing your website is the user experience. Usability, functionality, and how clean your website looks are the core principles to making a good website and frameworks are one of the best tools that can help you achieve those goals. Of course, that depends on your frame of mind. (I had to.)