In my journey as a frontend web developer, I have come across some tools and techniques I hope I knew earlier. I wish to share them with you and hopefully, contribute to your web development knowledge and save you some resources.

1. Bootstrap has its importance

For some developers, bootstrap hinders developers knowing the basics of HTML, CSS and some Javascript because codes are literally handed out; little thinking, add this, maybe that and we are good to go. Simple? But that not always the case. Some designs require using bootstrap to save time or serve as the foundation for other designs.
Here is an example of using the bootstrap carousel as the foundation for testimonial slider in angular.

Bootstrap Carousel Code

Angular Code

Result

For me, it is highly required for every developer to know their onions when it comes to HTML, CSS, and Javascript and also know that bootstrap can effectively speed up development. I prefer to stick to the Block-Element-Modifier (BEM) as much as I can but sometimes, the codebase becomes difficult to maintain which is one of the main reasons why bootstrap was designed. Hence, I recommend understanding at least the basics of HTML, CSS, and Javascript (who knows, it might be an apt measure just in case of any bootstrap apocalypse) and then use bootstrap when necessary.

2. SASS is beautiful and not difficult

Getting started with SASS (Syntactically Awesome Style Sheets) is very easy and this tutorial shows why if you start SASS, you might hardly ever want to write plain CSS ever again. SASS Mixins are like return functions which you can design to accept variable and use default values if null. SASS documentation is simple to use and understand.

P.S: I use SCSS (Sassy CSS) which used the same syntax as SASS but wraps codes in curly brackets like CSS. Both SCSS and SASS use the same documentation website.

3. IDE Shortcuts and Extensions

IDE Shortcuts makes development a lot faster. To achieve this, you need Emmet for IDE. Here is the Emmet cheat-sheet for faster development across IDE.
Extensions like Live SASS Compiler help convert SASS, LESS or SCSS to CSS on each file save.
There are extensions like Web Server for Chrome which can help you serve local folders over the network, using HTTP. It also runs offline.

4. Version Control is a Norm

Yes, version control is a norm in software development and there will be many times it will be the savior. Version control is easy to not abide. It is eminent to stick to it for easier understand and control of software. There are standards for using version controls on bugs and features such as Andela's git naming conventions and best practices. Udacity has an awesome course on Version Control.

5. Scaffolding really saves time.

Scaffolding frequently refers to a quick set up skeleton for an application. In most cases, Scaffolding is referred to as a backend process. An example of scaffolding is typing html on the sublime text IDE or ! in Visual studio code IDE and hitting tab. Both will result in the basic boilerplate for most HTML pages. One basic challenge for most beginner frontend developers is auto-refresh of browser contents on saving file change without having to click the refresh button on the browser. I discovered Yeoman solves this challenge and at the same time providing you with basic scaffolds for HTML, CSS and JS, test files and task runner. On installing yeoman, you ask to choose SCSS, Bootstrap or CSS, Behavior-Driven Development (BDD) or Test-Driven Development (TDD) and pull out package manager dependencies. This saves you time need to setup browser-sync, write basic boilerplates, and create important task runners that help make development faster, better and stick close to standards.
Using Yeoman GitHub repo instructions

6. Task Runners

Task runners are scripts that help automate numerous development process for web development. These processes can be converting SASS to CSS, spin up servers or serving the latest code files in the IDE on the browser during development, serving CSS on save without refreshing the browser, minify and uglify code, and compress (gzipping) codes. Task Runners help optimize codes and improve performance on the web. Major task runners are Grunt and Gulp.
I mainly use Gulp which is an open-source task runner that uses javascript syntax to perform web automation and tooling. Gulp is very easy to start with and has a detailed documentation. It requires Node and npm to work. Gulp uses command in gulpfile.js for tooling which is written in javascript. In the file, you can specify which process to run when developing and that for production. Fortunately, Yeoman can help scaffold web apps that have gulp scripts for important task runners like minifying, uglifying, compressing images, and gzip on production as well as other tasks like browser-sync for development. This article does justice to how to harness the power of task runner.

7. There are easier ways to host your work for the world to see

I use services like Netlify to showcase my works. Projects files or folder can be drag and dropped to deploy or lined to an online repository like Github and which updates automatically for nay change on the project. Netlify allows one to run the production script from deploy terminal if task runners like gulp where used in the project.

8. Web auditing and Checking Performance

Modern browsers provide tools for analysis codes and show ways to improve on them for the web. There are also online tools like Google Pagespeed Insights.
On modern browsers, Ctrl + Shift + i exposes the developer tool. Here you can check the performance of any website by going to the performance tab and then, click the start recording performance, record or profile button (the text is dependent on the browser). The result shows chart(s) on how long it takes the website to render, paint, etc.

For Google Chrome, you can use the audit tab to run analysis and get feedback on what to improve on the website.

Udacity has two amazing courses - Browswe Rendering Optimization and Website Performance Optimization to help improve web application performance.

Conclusion

As developers grow, we tend to use front-end frameworks for web development. These frameworks may use CLIs and scripts for web automation and tooling. This can be seen with the Angular CLI which has commands to help scaffold components, etc. This article is a solution for developers who are yet to start using frameworks or seeking fast and effective ways to scaffold web applications to be built on plain HTML, CSS, and JavaScript. Furthermore, there are quality documents, videos, and tutorials on how to set up processes to make our applications better such as Progressive Web Application, efficient web forms, etc. This makes these processes easy to learn and apply.
Finally, we all at some points in our career, look back at previous challenges and laugh at how hard it took us to figure it out. Every aspect of life learning is like that, including front-end web development. Consistent learning, discipline, keeping to standards, and refusing to stay on the ground when we fail makes us better.

I will appreciate it if you can share the techniques you learned in your career that you would love to have known earlier.

References

• https://stackoverflow.com/a/235027/5765188
• https://www.smashingmagazine.com/2016/06/harness-machines-productive-task-runners/
• https://yeoman.io/
• https://www.udacity.com/course/web-tooling-automation--ud892
• https://www.udacity.com/course/version-control-with-git--ud123
• https://github.com/andela/bestpractices/wiki/Git-naming-conventions-and-best-practices
• https://www.udacity.com/course/website-performance-optimization--ud884
• https://www.udacity.com/course/browser-rendering-optimization--ud860
• https://www.vojtechruzicka.com/chrome-audit-lighthouse/