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.
Here is an example of using the bootstrap carousel as the foundation for testimonial slider in angular.
Bootstrap Carousel Code
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.
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.
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.
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
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
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 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.
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,
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,
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.
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.