Web Testing
Websites always have too many technical details to pay attention to, and there is a need for a faster and easier way to test if a site is reliable or if a feature is in place. You can refer to the tools below to assist in development.
Lighthouse
Lighthouse is an automated website auditing tool that helps improve the quality of web pages, providing various feedback such as performance, accessibility, PWA, and SEO. You can test online from PageSpeed Insights or use Lighthouse-ci to automate the entire testing process. This feature is also built into the Chrome browser, and for Firefox, there is a corresponding browser extension available.
Mozilla Observatory
Mozilla Observatory helps over 240,000 websites by providing recommendations. It offers options for testing HTTP, TLS, SSH, and third-party assessments. If you want to test HTTP Headers, this is a good choice.
OpenGraph.xyz
Developers use the <meta> tag to further describe the entire website, like Facebook’s Open Graph or Twitter’s Cards Markup. But how can you check if the content you’ve written can be read correctly?
OpenGraph is a website that can help check if your published site is correctly fetching the <meta> tags on Facebook, Twitter, LinkedIn, and Discord.
Image Optimization
Responsive Image Breakpoints Generator
A picture is worth a thousand words; images are an essential element of web pages but often cause optimization issues. As we enter the era of responsive websites, not only does the layout need to adapt to devices, but images also need to be optimized accordingly. The tools recommended below can help in writing or debugging your site more quickly.
Responsive Image Breakpoints Generator is a website that helps front-end developers write and customize responsive image tags more quickly. Just input the following requirements:
- Resolution Range
- Size Step
- Maximum Images
You can quickly get previews of images in all sizes.
Respimagelint
Respimagelint is a handy image linter that can be stored in your bookmarks; just click it to check the images on the current page against 18 rules, reviewing potential issues with images on the entire page and listing solutions. If you’re looking to optimize images and try best practices, this tool will provide excellent insights.
Development Tools
Modern Fluid Typography Editor
In the new CSS version, you can use clamp to implement fluid font sizes. The Modern Fluid Typography Editor can help you easily visualize and plan the range and size of fluid typography.