There are many tools available that help improve the development of a website or that assist with development, UX and monitoring. Here is a short list of tools for webmasters and developers.
Improving the quality of a website
Google Lighthouse
Google Lighthouse is a tool that helps improve the quality of a website’s pages. It runs audits on accessibility, on PWA performance and on search engine optimisation. The tool belongs to Google, is open source and is relatively simple to use. Once you give it a URL, it runs a series of tests and generates a report on the quality and performance of the page. After that, all that is left to do is review the blocking factors highlighted in the audits and apply the appropriate improvements. Numerous help pages can be consulted for each improvement in order to guide the user on the strategy to adopt.
GTmetrix
GTmetrix is a platform that generates a performance report on a website’s loading speed, drawing on several existing complementary tools. It gathers all the data, brings it together and turns it into an audit with a detailed view of performance, loading time, page weight and the number of requests used to load it. GTmetrix grades all this data on a scale from A to F, with A being the best score and F the worst. In its improvement recommendations, it also indicates the priority of each issue to be fixed in order to help you.
Dareboost
Dareboost is an online platform for analysing your website’s performance. It is also possible to compare your site with a competitor’s, or simply to monitor competitors’ site performance. Dareboost is simple and intuitive to use: to get started, you enter the URL and the environment in which the platform will analyse the website (desktop, mobile, etc.). The analysis returns the site’s overall performance score along with the problems, the possible improvements and the elements that are working well. In addition, the platform has the advantage of offering the ability to watch the various loading stages of a page’s elements in slow motion. This makes it possible to identify blocking sources and find solutions.
Software and tools
JetBrains
JetBrains is an IT company specialising in publishing software and tools for developers, enabling them to increase their efficiency. Its extensive collection notably includes IDEs (Integrated Development Environments) such as PhpStorm and WebStorm, but also collaboration tools such as Space, which makes it possible to communicate with the team, track projects and obtain a host of other information. The company’s policy is to provide tools and software for many programming languages: “Whatever technologies you use, there’s a JetBrains tool to match.”
Can I Use
Can I Use is a website that lets you check all CSS and HTML compatibility across different browsers. You simply enter the element you are interested in. Can I Use then displays, in a table, its compatibility across different browsers and also across different versions of those browsers. When compatibility is not 100%, the site indicates the best practice to adopt in a note.
Web.dev
Web.dev is a solution created by Google that is divided into two parts: learning and website auditing. In the learning section you will find a multitude of content sorted by theme, such as security, PWAs, metrics and SEO. Through its articles, it gives advice and best practices for succeeding. In the analysis and audit section, Google uses its Lighthouse tool (mentioned above) to measure various aspects of the site: performance, best practices, SEO and accessibility. Improvement advice is given based on the results obtained.
Libraries
Pattern
Pattern is a CSS library offering background patterns to fill in the monotonous white background of websites. This library also makes it possible to add separators or to fill a typeface with a pattern. The 12 patterns on offer can be customised in terms of size and colour. Pattern can be combined with the Bootstrap library.
Font Awesome
Font Awesome is an open source icon font. It was built in CSS, LESS and SASS. The icons are vector-based, which means the icon retains its full quality whatever its size. To use it, you first need to include the font via a CDN. After that, all you have to do is go to the Font Awesome site, choose the icon, copy the class and add it to a tag. The documentation on the official Font Awesome site sets out precisely the steps to follow in order to use the icons.
Coolors
The Coolors website makes it possible to find the right combination of colours to use for your website. You can choose how many colours you want, between 2 and 10 different colours. Pressing the space bar cycles through colours, allowing you to judge which ones work well together and which do not. As soon as a colour you like appears, you can lock it in order to find the other colours. This site is perfect for designers, and the generator also gives the hexadecimal code of the colour so that you can use it.
Tools that help or make website development, monitoring and optimisation easier are very widely used. They deliver savings in time, efficiency and quality.
