These are some of the tools that I use all the time during development.
The advent calendar for web geeks. For twenty-four days each December they publish a daily dose of web design and development goodness to bring everyone a little Christmas cheer.
Explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
The core ideas and principles behind agile development.
Nifty things you can do with CSS, like making interesting shapes, or speech bubbles, or pull-out quotes.
Great infographic with a checklist of things to bear in mind for accessibility and inclusive design.
Useful tools for developers
This is the go-to site for questions and answers about coding. It has questions and answers on just about every programming language that you can think of – PHP, Python, Java, Ruby, JavaScript, jQuery, Angular, and more. And every environment you can think of – Windows, iOS, Android, and so on. And every mark-up and styling language – HTML, XML, CSS, and Sass. Stack Overflow has an awesome community of people willing to help complete strangers, which I think is amazing.
This is the equivalent site to Stack Overflow for asking user experience questions (usability and accessibility). These include everything from usability testing to user interfaces, UI patterns, mobile UI, material design, and more. You can learn from reading other people’s answers, or contribute your own.
This is a library of design solutions for various elements of the user interface, such as forms, logging in, logging out, registration, menus, headers, footers, and the rest. It is very useful for seeing what layout and information architecture solutions others have come up with.
CSS generators
There are CSS generators for Box Shadow, Text Shadow, Border Radius, Gradients, Buttons, and layout. There are many different ones, so pick the one that you like.
HTML color palette
There are many HTML colour code sites out there. One of my favourites is color-hex, because it provides all the tints and shades of each HTML colour.
Paletton – The Color Scheme Designer
This tool shows you different colours side-by-side, and what they look like to people with colour-blindness.
Freepik is a great tool for creating icons and buttons, and ensuring that you have consistent user interfaces throughout your applications.
A free streamlined web app that helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes.
Material is a metaphor, a system for uniting style, branding, interaction, and motion under a consistent set of principles.
A lightweight version of material design.
An icon set for use with material design.
A huge online database of Unicode characters.
Tool for checking whether your colour contrast is accessible and WCAG 2.0 compliant.
Great tool for generating CSS animations.
This is a showcase of snippets of code for doing cool stuff, such as cutting-edge CSS, jQuery and Angular.
A friendly community where you can build open-source apps
Places for testing your code. Quite often, users of Stack Overflow will post working examples and solutions on Plunker or jsFiddle.
regex101.com – Regular Expressions 101
Online regex tester for PHP, PCRE, JavaScript and Python that highlights pattern and matches on the fly. This is an awesome tool for testing your regular expressions and seeing what results they will return. Most people find regex a tad unpredictable, so this is a really useful tool.
Great for testing your PHP online in a neutral environment.
There are various JSON validation tools available, so pick the one you like best. A good validator can pretty-print your JSON for you, and highlight any errors in it.
PrettyPrint
There are tools available for tidying and validating most coding languages. Just search for pretty print and the name of the language, and there will probably be a tool available. One that I find useful for HTML, CSS, and JavaScript is DirtyMarkup, which will clean up your code for you as well as tidying it.
This is a desktop app for sending requests to web services to test that they are behaving as you expected. It’s a powerful GUI platform to make your API development faster & easier, from building API requests through testing, documentation and sharing. There’s a free Postman App for Mac, Windows, Linux or Chrome.
Leave a Reply