Working in tech often means your capabilities are defined by your tools. Luckily, browser apps becoming more complicated and demanding, there are more versatile and powerful tools being developed to keep up. Publishing a list of the best web dev tools is always a little contentious as it’s more about matching up the tool with the project.
So instead, here’s a (very) short list of what we’re using and loving at the moment.
What’s a framework?
Front-end frameworks (also known as CSS or JS frameworks) are bundles of standardised, pre-written code which developers can use to dive straight in to new projects. It’s important to match your framework to your project’s needs, as they vary from very simple to extremely complex.
We like: Bootstrap 4
Bootstrap 4 is the latest version of the popular Bootstrap CSS framework. It’s an open-source framework (so it’s free to download and use, and users can suggest features/changes), and contains design templates for interface components like typography, buttons, forms, and navigation. It’s currently the most popular framework for developing responsive (mobile-first) websites.
Why do we love it?
Mobile-first is quickly becoming the standard in web design and development. Bootstrap 4 has already been tried and tested across all browsers and devices, which means that individual developers don’t have to spend time and energy running all those individual tests themselves.
As recently as 5-7 years ago, developers still had to do browser and device testing themselves. Pre-made frameworks like Bootstrap 4 mean the work can get done much more quickly and efficiently.
It’s not only the testing process that becomes more efficient though, it’s the coding process. If a designer comes up with a custom section of a website and want it to include, for example, a full screen, responsive slider with nav arrows AND dot nav. Back in the day, a developer would have to code the whole thing from scratch, taking roughly 32 hours of solid work. With the native Bootstrap ‘carousel’ functionality, most of the required code is already done. With a little CSS on top to customise the design, it’s done, keeping project costs and stress levels low.
What’s a stylesheet?
A stylesheet is a bundle of stylistic rules that define how a web page or application should apply certain styles to the HTML tags so that the document or page appears as it should to the viewer. Developers can define their own variations and apply them wherever they like, but there are also rules that can be applied to all the basic HTML elements.
We like: SASS/SCSS
SCSS is a variation of the CSS coding language. CSS is used to specify a web document’s colours, layouts, and fonts: essentially the aesthetic or stylistic elements. SCSS (‘Sassy CSS’), is the main syntax for SASS (‘Stylistically Awesome Style Sheets’), which is a syntax that builds on top of CSS.
Why do we love it?
Firstly, the name. Sassy CSS? Sounds like the kind of language we’d like to use.
In all seriousness, it’s super easy to use and generally simplifies your (or your web developer’s) life.
Let’s say you have a page with 9 buttons on it, and they’re all pink.
With CSS, you would need to write some code each time to colour the button pink. If you want to change the colour, you have to go to 9 spots and make the changes. It’s not too bad if you’re just dealing with a couple pages. Now imagine you’re doing that for 50 pages, or a hundred.
“I could just do a find and replace” I hear you say.
You could, although it would still be unnecessarily time consuming and labour intensive for larger scale projects. Think about what could happen if a layperson goes in and makes an error somewhere and you have to go and cross check each one individually…
SCSS lets you sidestep that whole headache by defining a global colour for your buttons. Making a change to the global color, and viola! The change is translated to all of them. While it might not always be what you want, when it’s good, it’s great.
We like: Vue.js
Why do we love it?
Vue allows developers to make dynamic decisions around responsive front end interfaces and provides a range of options to bring creative designs to life. Finally, thanks to its MVVM architecture, Vue.js facilitates two way communication and makes it very easy to handle HTML blocks (similarly to Angular.js).
What do you love using at the moment? Why do you like it?