Libraries and frameworks for a budding front end developer<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tby Cameron Tebbenham-Small, Design Enterprise Studio Member, March 2022<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tSo, you\u2019ve made your first website, maybe even a few, but now you want to look ahead and advance to an intermediate level. Let me introduce you to the wonderful world of CSS and JavaScript libraries frameworks by exploring a few that I have used in my own workflows. But firstly, what are frameworks and libraries and how do they differ?<\/strong><\/p>A coding library is a collection of standard functionalities \u2013 pieces of reusable code that enable developers to skip a great many steps that have likely already been accomplished by developers before them. These could be maths functions, interactive web-forms or other that are then inserted into your code as a supplementary function. Think of it like adding an extra chair to your room \u2013 you\u2019ve already done some decorating, but don\u2019t want to build a full new Ikea chair so get something premade that fits the job.<\/p>
If a library is like a piece of furniture, a framework is the entire room \u2013 if not the entire house. A framework sets the shape and layout of your website\/webapp in a fundamental way. They are the scaffolding for your entire project, which more often than not may happen to also contain libraries inside of it. This is extremely useful if you intend to make things like single page applications with optimised UI rendering, want to neatly structure every aspect of your project or don\u2019t want to code every single function from scratch.<\/p>
As a front-end developer, I\u2019ll be focusing on a couple different frameworks for both CSS and JavaScript \u2013 but will for the most part skip explanations about back-end support.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/framework-vs-library.png\")
\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tCSS<\/h1>
CSS frameworks can be boiled down into two main categories \u2013 those that pre-style elements and those that don\u2019t. The former is often easier to learn, while the latter offers more choice in how you style your elements. As such I will discuss one of each that I have personally used.\u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/CSS3_logo_and_wordmark.svg.png\")
\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tBootstrap<\/h2>
You cannot search for a CSS framework without seeing Bootstrap, and for good reason. Initially branded \u201cTwitter Blueprint\u201d and created by a couple of developers at Twitter to encourage styling consistency, it became often source and freely available in 2011. That is, essentially, the purpose of all CSS frameworks \u2013 consistency. The more consistent your styling within a website, the better the flow of navigation, information and efficiency for the end user.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/bootstrap-logo.svg\")
\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tBenefits<\/h3>
Bootstrap\u2019s own website describes itself as being a customisable \u201cresponsive mobile-first\u201d tool that features grid systems, prebuilt components and JavaScript plugins. It even features support for Sass \u2013 an extension for CSS that enables a host of extra functionality such as in-CSS nesting, mixins etc, a potential topic for further reading. Bootstrap is highly desirable for its ease of use and responsive structure, as evident in the fact that according to Stack Share even in 2022, over 50,000 companies use bootstrap. These include big names such as Twitter, Udemy, Spotify, Snapchat and more.<\/p>
\u00a0<\/p>
\u201cBootstrap is highly desirable for its ease of use and responsive structure\u201d<\/em><\/p>\u00a0<\/em><\/p>Bootstrap is also one of the easiest CSS frameworks to dive into as as many of the elements (such as buttons) come pre-styled. Documentation is extensive and Bootstrap has a vibrant community that is always coming up with new themes and styles.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/bootstrap-snippets-1024x313.png\")
\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\tBootstrap Snippets - https:\/\/getbootstrap.com\/docs\/5.1\/examples\/<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tDrawbacks<\/h3>
However, with that ease of entry comes a few limitations. Firstly, there is a saying that once you\u2019ve seen one Bootstrap site \u2013 you\u2019ve seen them all. While not necessarily true, it is harder to make each site look and feel distinct. This is because of all that pre-styling previously discussed. Further, unless you use the minified version, you will end up with a much larger CSS file containing hundreds of classes that you will never use. While you can of course set up your own external CSS file and override some of Bootstrap\u2019s presets, with or without the dreaded \u201c!important\u201d tag (such as changing danger\/primary\/secondary for main colours), developers who prefer granularity in their design might want to stay away.<\/p>
This leads me to the second CSS framework and perhaps my new favourite\u2026<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tTailwind<\/h2>Tailwind is all about efficiently writing vanilla CSS inline with your HTML in a way that gives freedom to the developer. In fact, Tailwind\u2019s motto is that \u201cMost CSS frameworks do too much\u201d. This results in a lightweight framework that only gives you as much as you need to get the task done. CSS coding becomes mostly unnecessary, but you still need to know how CSS works. Tailwind is a framework that will grow with your understanding of CSS in way that is very rewarding for the active developer<\/span><\/h3>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/Tailwind_CSS_Logo.svg.png\")
\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tTailwind\u2019s motto is \u201cmost CSS frameworks do too much.\u201d<\/em><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/tailwind-grids-1024x531.png\")
\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\tTailwind grids - https:\/\/tailwindcss.com\/docs\/grid-template-columns<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tBenefits<\/h3>
Tailwind differs from Bootstrap in that it doesn\u2019t pre-style your content for you. Instead, it packages vanilla CSS into single line phrases and allows you to keep all your CSS inline without cluttering up your HTML files. What\u2019s more, media breakpoints are easily incorporated by adding a prefix to whatever other class you want to use. For example, you could set the width to be 24 rem on a mobile device (w-24) and 48 on a medium sized screen (md:w-24). This also allows you to choose whether you want your project to be mobile or desktop first \u2013 unlike Bootstrap which is explicitly mobile-first.<\/p>
This is a form of Atomic CSS, whereby an element\u2019s classes denote how the element will look. If the element has a class list of \u201ctext-center text-white bg-black p-4\u201d you can expect to see centred white text on a black background, with a padding of 4 rem. I particularly love the use of rem for sizing because it is tied to the root font size. This ensures that all your elements are scaled proportionate to each other. All these Tailwind Classes can be found in a handy, searchable cheat sheet: https:\/\/tailwindcomponents.com\/cheatsheet\/<\/a><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/atomic-css.png\")
\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\tJohn Polacek (2017)- https:\/\/css-tricks.com\/lets-define-exactly-atomic-css\/<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tDrawbacks<\/h3>
As previously mentioned, strong CSS knowledge is required to make the most use out of Tailwind, unless you make heavy use out of community pre-styled assets. Further, in my experience, Tailwind is harder to initially set up than Bootstrap for a few reasons.<\/p>
Firstly, you\u2019ll want to use PostCSS or Sass to make the most use out of all Tailwind\u2019s features. In Visual Studio Code, this can be done by installing the PostCSS Language Support extension and installing postcss-cli via npm. You will also likely want to install Tailwind CSS IntelliSense at the same time as it autocompletes Tailwind classes similar to how Emmet functions.<\/p>
Next, you\u2019ll need to follow the Tailwind installation instructions and set up a config file which tells Tailwind which files to scan for its classes, and finally run the build\/watch command to auto-generate the necessary CSS.\u00a0 It may sound complicated, but once you\u2019ve done it the first time, you\u2019ll be set.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/tailwind-get-started-1024x481.png\")
\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\tTailwind CSS Installation - https:\/\/tailwindcss.com\/docs\/installation<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tJavaScript<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tReact JS<\/h2>
Though it is often described as such, technically React JS is not a framework \u2013 it\u2019s a library, albeit a very powerful one originally created by a Facebook engineer in 2011. Most articles tend to blur the line between frameworks and libraries \u2013 especially when React is involved – and it provides an excellent first step into what JavaScript frameworks look like.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/reactjs-icon.svg\")
\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tAt its core, front end development is all about portraying information and allowing for easy navigation between said information. React JS does this better than most and is highly in demand. As of 2021 React is the most used web framework\/library among developers and is also the most desired by developers according to Statista and the 2021 Stackoverflow Developer Survey.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/react.png\")
\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\tThe Virtual DOM<\/h3>
It is specialized in the creation of sophisticated user interfaces and just as its name suggests, React reacts to changes in the Virtual DOM (Document Object Model) in a way that boosts performance and load times.<\/p>
Normally, you would use HTML to update the DOM, but when you need to dynamically alter content on the page without constantly reloading the page, you need something more. React uses a form of JavaScript called JSX to selectively update the exact components that need updating \u2013 without needing to alter the entire DOM. This optimises the user interaction process from a technical standpoint, reducing load times and boosting performance.<\/p>
Components<\/h3>
React JS uses reusable and declarative components to break down complex UIs into their base components. These can then be freely reused across the entire application. Similarly to how Tailwind and Bootstrap essentially let you write CSS inside your HTML files, JSX allows you to write full HTML inside your JavaScript files. This, when properly managed, can result in incredibly cleanly organised file structures where different elements of your web-app become self-contained and easily manageable components. No more scrolling through thousands of lines of code to find that one thing you need to change.<\/p>
Community and Plugins<\/h3>
Lastly, React is constantly being updated and has a plethora of plugins and extra resources such as React Router, which enables powerful page routing despite the single page nature of React applications. This means that you can have a single index.html file that is dynamically updated with whatever content you need to show according to your JS files. If you liked the sound of Bootstrap for CSS, there is also a React specific variant called Reactstrap to sink your teeth into. More of a mobile fan? React Native has you covered, allowing you to convert your web-centric code into a fully usable mobile application.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t![\"\"](\"https:\/\/designenterprisestudio.com\/wp-content\/uploads\/2022\/05\/react-routing-1024x368.png\")
\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\tReact Router - https:\/\/reactrouterdotcom.fly.dev\/docs\/en\/v6\/getting-started\/installation<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t
by Cameron Tebbenham-Small, Design Enterprise Studio Member, March 2022<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
So, you\u2019ve made your first website, maybe even a few, but now you want to look ahead and advance to an intermediate level. Let me introduce you to the wonderful world of CSS and JavaScript libraries frameworks by exploring a few that I have used in my own workflows. But firstly, what are frameworks and libraries and how do they differ?<\/strong><\/p> A coding library is a collection of standard functionalities \u2013 pieces of reusable code that enable developers to skip a great many steps that have likely already been accomplished by developers before them. These could be maths functions, interactive web-forms or other that are then inserted into your code as a supplementary function. Think of it like adding an extra chair to your room \u2013 you\u2019ve already done some decorating, but don\u2019t want to build a full new Ikea chair so get something premade that fits the job.<\/p> If a library is like a piece of furniture, a framework is the entire room \u2013 if not the entire house. A framework sets the shape and layout of your website\/webapp in a fundamental way. They are the scaffolding for your entire project, which more often than not may happen to also contain libraries inside of it. This is extremely useful if you intend to make things like single page applications with optimised UI rendering, want to neatly structure every aspect of your project or don\u2019t want to code every single function from scratch.<\/p> As a front-end developer, I\u2019ll be focusing on a couple different frameworks for both CSS and JavaScript \u2013 but will for the most part skip explanations about back-end support.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t CSS frameworks can be boiled down into two main categories \u2013 those that pre-style elements and those that don\u2019t. The former is often easier to learn, while the latter offers more choice in how you style your elements. As such I will discuss one of each that I have personally used.\u00a0<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t You cannot search for a CSS framework without seeing Bootstrap, and for good reason. Initially branded \u201cTwitter Blueprint\u201d and created by a couple of developers at Twitter to encourage styling consistency, it became often source and freely available in 2011. That is, essentially, the purpose of all CSS frameworks \u2013 consistency. The more consistent your styling within a website, the better the flow of navigation, information and efficiency for the end user.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t Bootstrap\u2019s own website describes itself as being a customisable \u201cresponsive mobile-first\u201d tool that features grid systems, prebuilt components and JavaScript plugins. It even features support for Sass \u2013 an extension for CSS that enables a host of extra functionality such as in-CSS nesting, mixins etc, a potential topic for further reading. Bootstrap is highly desirable for its ease of use and responsive structure, as evident in the fact that according to Stack Share even in 2022, over 50,000 companies use bootstrap. These include big names such as Twitter, Udemy, Spotify, Snapchat and more.<\/p> \u00a0<\/p> \u201cBootstrap is highly desirable for its ease of use and responsive structure\u201d<\/em><\/p> \u00a0<\/em><\/p> Bootstrap is also one of the easiest CSS frameworks to dive into as as many of the elements (such as buttons) come pre-styled. Documentation is extensive and Bootstrap has a vibrant community that is always coming up with new themes and styles.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t However, with that ease of entry comes a few limitations. Firstly, there is a saying that once you\u2019ve seen one Bootstrap site \u2013 you\u2019ve seen them all. While not necessarily true, it is harder to make each site look and feel distinct. This is because of all that pre-styling previously discussed. Further, unless you use the minified version, you will end up with a much larger CSS file containing hundreds of classes that you will never use. While you can of course set up your own external CSS file and override some of Bootstrap\u2019s presets, with or without the dreaded \u201c!important\u201d tag (such as changing danger\/primary\/secondary for main colours), developers who prefer granularity in their design might want to stay away.<\/p> This leads me to the second CSS framework and perhaps my new favourite\u2026<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Tailwind\u2019s motto is \u201cmost CSS frameworks do too much.\u201d<\/em><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Tailwind differs from Bootstrap in that it doesn\u2019t pre-style your content for you. Instead, it packages vanilla CSS into single line phrases and allows you to keep all your CSS inline without cluttering up your HTML files. What\u2019s more, media breakpoints are easily incorporated by adding a prefix to whatever other class you want to use. For example, you could set the width to be 24 rem on a mobile device (w-24) and 48 on a medium sized screen (md:w-24). This also allows you to choose whether you want your project to be mobile or desktop first \u2013 unlike Bootstrap which is explicitly mobile-first.<\/p> This is a form of Atomic CSS, whereby an element\u2019s classes denote how the element will look. If the element has a class list of \u201ctext-center text-white bg-black p-4\u201d you can expect to see centred white text on a black background, with a padding of 4 rem. I particularly love the use of rem for sizing because it is tied to the root font size. This ensures that all your elements are scaled proportionate to each other. All these Tailwind Classes can be found in a handy, searchable cheat sheet: https:\/\/tailwindcomponents.com\/cheatsheet\/<\/a><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t As previously mentioned, strong CSS knowledge is required to make the most use out of Tailwind, unless you make heavy use out of community pre-styled assets. Further, in my experience, Tailwind is harder to initially set up than Bootstrap for a few reasons.<\/p> Firstly, you\u2019ll want to use PostCSS or Sass to make the most use out of all Tailwind\u2019s features. In Visual Studio Code, this can be done by installing the PostCSS Language Support extension and installing postcss-cli via npm. You will also likely want to install Tailwind CSS IntelliSense at the same time as it autocompletes Tailwind classes similar to how Emmet functions.<\/p> Next, you\u2019ll need to follow the Tailwind installation instructions and set up a config file which tells Tailwind which files to scan for its classes, and finally run the build\/watch command to auto-generate the necessary CSS.\u00a0 It may sound complicated, but once you\u2019ve done it the first time, you\u2019ll be set.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t Though it is often described as such, technically React JS is not a framework \u2013 it\u2019s a library, albeit a very powerful one originally created by a Facebook engineer in 2011. Most articles tend to blur the line between frameworks and libraries \u2013 especially when React is involved – and it provides an excellent first step into what JavaScript frameworks look like.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t At its core, front end development is all about portraying information and allowing for easy navigation between said information. React JS does this better than most and is highly in demand. As of 2021 React is the most used web framework\/library among developers and is also the most desired by developers according to Statista and the 2021 Stackoverflow Developer Survey.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t It is specialized in the creation of sophisticated user interfaces and just as its name suggests, React reacts to changes in the Virtual DOM (Document Object Model) in a way that boosts performance and load times.<\/p> Normally, you would use HTML to update the DOM, but when you need to dynamically alter content on the page without constantly reloading the page, you need something more. React uses a form of JavaScript called JSX to selectively update the exact components that need updating \u2013 without needing to alter the entire DOM. This optimises the user interaction process from a technical standpoint, reducing load times and boosting performance.<\/p> React JS uses reusable and declarative components to break down complex UIs into their base components. These can then be freely reused across the entire application. Similarly to how Tailwind and Bootstrap essentially let you write CSS inside your HTML files, JSX allows you to write full HTML inside your JavaScript files. This, when properly managed, can result in incredibly cleanly organised file structures where different elements of your web-app become self-contained and easily manageable components. No more scrolling through thousands of lines of code to find that one thing you need to change.<\/p> Lastly, React is constantly being updated and has a plethora of plugins and extra resources such as React Router, which enables powerful page routing despite the single page nature of React applications. This means that you can have a single index.html file that is dynamically updated with whatever content you need to show according to your JS files. If you liked the sound of Bootstrap for CSS, there is also a React specific variant called Reactstrap to sink your teeth into. More of a mobile fan? React Native has you covered, allowing you to convert your web-centric code into a fully usable mobile application.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\tCSS<\/h1>
\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\tBootstrap<\/h2>
\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\tBenefits<\/h3>
\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\tDrawbacks<\/h3>
Tailwind<\/h2>
Tailwind is all about efficiently writing vanilla CSS inline with your HTML in a way that gives freedom to the developer. In fact, Tailwind\u2019s motto is that \u201cMost CSS frameworks do too much\u201d. This results in a lightweight framework that only gives you as much as you need to get the task done. CSS coding becomes mostly unnecessary, but you still need to know how CSS works. Tailwind is a framework that will grow with your understanding of CSS in way that is very rewarding for the active developer<\/span><\/h3>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\tBenefits<\/h3>
\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\tDrawbacks<\/h3>
\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\tJavaScript<\/h1>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
React JS<\/h2>
\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\tThe Virtual DOM<\/h3>
Components<\/h3>
Community and Plugins<\/h3>
\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t