Being a developer I sometimes want to know what tools, technologies/frameworks, and libraries are being used on a website but it is hard to know all of them. I know there are tools and browser add ons such as https://www.wappalyzer.com/ which can tell you what libraries and tech is used to develop a website.
But by writing this post I just want to acknowledge the following technologies/frameworks, because we have been using these for Free for so many years/months now and we are also earning our livelihoods from Softwares and Websites developed on top of these technologies.
Just imagine if these powerful and amazing technologies were paid, Whoa!! Don’t even want to go down that road. LOL :D.
All hail to Open Source and contributors to it.
So let’s explore what resources I have used to develop this website.
Duh! I know it’s kind of stupid of me even mentioning these 2 technologies as no website or app can run without these but there they are on each and every website in the world, some are only running on these two.
Now this is a CSS Framework that has amazed me ever since i started using this. It is very lightweight and extremely customizable. This is a modern day CSS Framework that plays really well with dev tools like Webpack, PostCSS, Gulp, etc…
One of the best features that you will love about this is its ability to optimize itself according to the CSS classes used in your project, which leaves a CSS file of MB’s to some KB’s, mine on this site is around 80 KB, which if I do not optimize or purge would be about 2.5 MB, which will include all the CSS classes offered by the framework which we are not even using on the website.
Just give this a try, you are going to love it. I am sure.
This one also needs no introduction, around 30% of websites on the web uses WordPress as a primary tool to run & manage their websites. Like some still believe that WordPress is just a blog software, you would be amazed to see how many high end performance websites are using WordPress, from eCommerce Stores to Large Scale Web Applications.
With the WordPress the possibility is endless if you use it the right way and try to use more of WordPress and less of your own code.
AOS is an animation library that works on page loads and page scroll. Although it does not have a lot of animations to choose from, it is simple to use and works seamlessly.
Hover.css is a CSS style script that you can include in your website to have ho animation on hover of an element. It features a lot of good hover animation styles and if you are not looking for something complicated, I think you will not have to look for any other alternative than hover.css for your buttons hover styles.
Below is the list of dev tools that I have used while developing this website. I am not going to write a whole bunch of things about this tool, so you can read about them in your own time from the links mentioned besides their names.
- Webpack – https://webpack.js.org/
- Webpack Build Notifier – https://www.npmjs.com/package/webpack-build-notifier
- @fullhuman/postcss-purgecss – https://github.com/FullHuman/postcss-purgecss
- Autoprefixer – https://www.npmjs.com/package/autoprefixer
- CSS Loader – https://www.npmjs.com/package/css-loader
- Extract Loader – https://www.npmjs.com/package/extract-loader
- Mini CSS Extract Loader – https://www.npmjs.com/package/mini-css-extract-plugin
- Post CSS Loader – https://www.npmjs.com/package/postcss-loader
- SASS Loader – https://www.npmjs.com/package/sass-loader
- Style Loader – https://www.npmjs.com/package/style-loader
- URL Loader – https://www.npmjs.com/package/url-loader