Tool for comparing CSS frameworks
Hi, I’m Alexander. I have been actively studying and doing web development for about a year now. It all started with the removal of the client of your favorite game and the search for the mentor. Improving web development, he created the CSS Comparator project. The very essence of the project is to compare CSS frameworks in terms of size and other popular and modern parameters. When creating a project, commercial objectives are not pursued. This article is mainly intended to receive feedback from other web developers.
This is already my third project at the moment, and since it will be interesting and useful for both beginners and experienced web developers, I decided to write an article about it.
It all started with the fact that my colleague was looking for a CSS framework for size, and the first answer that Google offers is:
So the idea came up - the creation of a product that would compare popular CSS frameworks, in terms of size, as well as other parameters. There are only two people working on the project - I, as a front-end web developer, and my colleague who was involved in scraping at Golang. The first prototype of the project had a rather simplified view:
Unlike popular alternatives, our project has a filter for accessibility (dependency), dependency-free (no dependency on JavaScript, jQuery etc.), as well as links to Gitter chat and Stack Overflow.
Then the project passed completely to me. In early July 2019, work began on it. The first desire was to give the product a more expressive appearance, as well as of course the addition of filtering and sorting by size. To reflect the needed results, you just need to specify the required size (in bytes) in the corresponding input field:
A size chart is also available separately:
Like filtering by size, filtering by the number of questions on Stack Overflow and the number of stars on GitHub. After all, it is known that every web developer spends a lot of time looking for the right information. In this regard, I decided to add relevant links and links to the forum, if one exists. These solutions will help to significantly facilitate and speed up the development, because all the necessary links are "at hand". And filtering will help to find a framework that is more popular among users.
Of course, in the days of smartphones, it was impossible not to add data on the adaptability of frameworks, and filtering by it in the multiselect:
In general, the information posted on the framework card can be schematically depicted by the following list:
And the filtration unit and the card as a whole have the following form:
On the client side, HTML5, CSS3 (layout using Flexbox) and pure JavaScript without using third-party libraries and frameworks are used. GitHub stars, and all sizes of frameworks are obtained from open Api using a Golang scraper, and cron-jobs are updated weekly.
The scraper itself works quite simply. Data on the number of stars on GitHub obtained from the above json (for each of its own frameworks), which is located in the Bootstrap example by reference. And the sizes are calculated as follows - the dev and prod versions of CSS are loaded, and then the prod version is archived in gzip format.
Therefore, I will further tell what is happening on the client.
Filtering is performed by checkboxes using the onChecked function, which takes 3 parameters:
$ element - the checkbox itself
name - filter name
filter - the filter itself.
Using accessibility filtering as an example, the entire code will look like this:
Sorting is performed by a similar function
According to analysts, the average attendance of the project is about 10 users per day. For future plans, this is adding a list of available components (navbar, button, etc.) followed by a comparison of their sizes. Also, creating static static pages using all the compared frameworks and comparing their sizes and loading speed. And, if the project will be popular - the addition of a scraper by updating the number of questions on Stack Overflow and the number of users in Gitter.
This is already my third project at the moment, and since it will be interesting and useful for both beginners and experienced web developers, I decided to write an article about it.
It all started with the fact that my colleague was looking for a CSS framework for size, and the first answer that Google offers is:
So the idea came up - the creation of a product that would compare popular CSS frameworks, in terms of size, as well as other parameters. There are only two people working on the project - I, as a front-end web developer, and my colleague who was involved in scraping at Golang. The first prototype of the project had a rather simplified view:
Unlike popular alternatives, our project has a filter for accessibility (dependency), dependency-free (no dependency on JavaScript, jQuery etc.), as well as links to Gitter chat and Stack Overflow.
Then the project passed completely to me. In early July 2019, work began on it. The first desire was to give the product a more expressive appearance, as well as of course the addition of filtering and sorting by size. To reflect the needed results, you just need to specify the required size (in bytes) in the corresponding input field:
A size chart is also available separately:
Like filtering by size, filtering by the number of questions on Stack Overflow and the number of stars on GitHub. After all, it is known that every web developer spends a lot of time looking for the right information. In this regard, I decided to add relevant links and links to the forum, if one exists. These solutions will help to significantly facilitate and speed up the development, because all the necessary links are "at hand". And filtering will help to find a framework that is more popular among users.
Of course, in the days of smartphones, it was impossible not to add data on the adaptability of frameworks, and filtering by it in the multiselect:
In general, the information posted on the framework card can be schematically depicted by the following list:
- Framework name
- Company developer
- GitHub Stars
- Availability accessibility
- Javascript dependency
- License
- Adaptability
- Dimensions
- Number of Questions on Stack Overflow
- Number of users Gitter chat
- Forum
And the filtration unit and the card as a whole have the following form:
On the client side, HTML5, CSS3 (layout using Flexbox) and pure JavaScript without using third-party libraries and frameworks are used. GitHub stars, and all sizes of frameworks are obtained from open Api using a Golang scraper, and cron-jobs are updated weekly.
The scraper itself works quite simply. Data on the number of stars on GitHub obtained from the above json (for each of its own frameworks), which is located in the Bootstrap example by reference. And the sizes are calculated as follows - the dev and prod versions of CSS are loaded, and then the prod version is archived in gzip format.
Therefore, I will further tell what is happening on the client.
Filtering is performed by checkboxes using the onChecked function, which takes 3 parameters:
$ element - the checkbox itself
name - filter name
filter - the filter itself.
Using accessibility filtering as an example, the entire code will look like this:
const FILTER_ACCESSIBILITY = "accessibility"; function matchAll(framework) { return true; } function matchAccessibility(framework) { return framework.accessibility; } const matchStateMap = { [FILTER_ACCESSIBILITY]: matchAll, }; function match(frameworks) { const result = frameworks .filter(matchStateMap[FILTER_ACCESSIBILITY]); // other filtration return result; } function $(id) { return document.getElementById(id); } function render(list) { const views = new Array(list.length); for (let i = 0; i < list.length; i++) { const item = list[i]; views[i] = `<h2><a href="${item.siteUrl}" target="_blank">${item.name} v${item.version}</a></h2>`; } $("demo").innerHTML = views.join(""); } function onChecked($element, name, filter) { $element.addEventListener("click", function () { if ($element.checked) { matchStateMap[name] = filter; } else { matchStateMap[name] = matchAll; } render(match(frameworks)); }); } const $accessibilityCheckbox = $("js-checkbox-accessibility"); onChecked($accessibilityCheckbox, FILTER_ACCESSIBILITY, matchAccessibility);
Sorting is performed by a similar function
let compare = null; const matchStateMap = { [FILTER_ACCESSIBILITY]: matchAll, // ... }; function match(frameworks) { const result = frameworks .filter(matchStateMap[FILTER_ACCESSIBILITY]); // other filtration // sort O(N *ln(N)), so better first match, than sort if (compare !== null) { result.sort(compare); } return result; } function sortByStars(a, b) { // DESC return b.repository.stars - a.repository.stars; } function onSort($element, sort) { $element.addEventListener("click", function () { compare = sort; render(match(frameworks)); }); } const $moreStars = $("js-sort-by-stars"); onSort($moreStars, sortByStars);
According to analysts, the average attendance of the project is about 10 users per day. For future plans, this is adding a list of available components (navbar, button, etc.) followed by a comparison of their sizes. Also, creating static static pages using all the compared frameworks and comparing their sizes and loading speed. And, if the project will be popular - the addition of a scraper by updating the number of questions on Stack Overflow and the number of users in Gitter.
All Articles