Issue #10 - Web Development Tools
When learning web development, we start by learning a specific language such as HTML, CSS, and JavaScript. But as you start working and creating websites, you'll find that putting together a toolkit of resources is necessary for your development workflow.
In a previous newsletter , I meant to go through a variety of development-related tools, but I realized that I had so many just for picking colors! So, this newsletter will cover some non-color-related resources that I like to use.
CSS Tools
caniuse.com
CSS is constantly changing, so I often check caniuse.com to search for specific CSS properties and see information about browser support, known issues, and resources for workarounds and fixes. All you have to do is search for the property name.
CSS Stats
CSS Stats is a free and open source tool that can be used to analyze your CSS files. Enter a domain name and it will run an audit and provide information such as the file size and the number of CSS rules, selectors, declarations and properties used. There are also visualizations of grouped styles used, such as colors and typography.
Another useful stat is the specificity score. A lower specificity score makes for better maintainability. These stats can help you identify issues and can assist when refactoring your CSS .?
The visualizations are also useful for creating style guides to document properties such as hex color values, font-sizes, or font-family names.
You can also analyze the results to make any necessary adjustments to the design. For example, maybe you have two or three similar shades of blue. By using just one shade, you can make your designs more consistent. This is just one example, but CSS Stats can help you identify other areas where you can improve your CSS for better maintainability and consistency.
领英推荐
Accessibility Tools
WAVE Web Accessibility Evaluation Tools
To increase accessibility, a great tool to check out is the WAVE Web Accessibility Tool . It allows you to test your website and identify potential issues for people with disabilities.
W3C Markup Validation Service
HTML is used to structure a web page and provide meaning to the content, not just for the browser to interpret and display the content but also for assistive technologies. Proper use of HTML is important for accessibility. The W3C has a free markup validation service that can be used to test your HTML. You can use a URL to run a check, upload an HTML file, or add the code right into the text field.
The check may return some warnings or errors. Warnings are usually recommendations based on best practices. You may or may not need to fix them. However, errors should definitely be fixed. The validator is generally pretty clear about what the errors are.
If you'd like to learn more about tools for web developers, I recently updated my very first LinkedIn Learning course, "Workflow Tools for Web Developers ." Check it out!
Got some of your own favorite tools? Share in the comments!
You can also subscribe to this newsletter on Substack .
Generative AI, Prompt Engineering and Full Stack Development. LinkedIn Top Voice. Senior Staff Instructor at LinkedIn, Instructor at Stanford University.
1 年Great set of tools here, loved CSS Stats. Keep up the good work.
Web Developer
1 年Would like to recommend this website as well. Just found it out when looking into the package.json from one react project :) https://browsersl.ist/#q=%3E+0.2%25+and+not+dead