What follows is a grouping of some tools that you, as a developer or designer, can try on your next project. This list is by no means exhaustive, or a “top ten” of anything, but are simply suggestions to those looking for something new. I hope you enjoy the tools mentioned. Let’s get started!
10 Tools to Try With Your Next Web Project
Inspect is an app that syncs perfectly between your design files and tooling. It helps you easily maintain design files between Sketch, Inspect and InVision and keep all synced with a single click.
Inspect bridges the gap between designer and developer. Generate working code as you design, provide measurements, colors, and design assets with genuine ease and collaborate with a messaging system while maintaining up-to-date project information and notes.
To get started you’ll need Sketch. Once you have Sketch installed you’ll also need Craft. Craft is a suite of plugins that lets you design with real data in mind and allows for the syncing to take place between InVision and Sketch. Create a new project from InVision and then switch back to Sketch. I’d also suggest taking a look at InVision Studio.
Archetype is digital typography design made easy. It works with Google Fonts live in the browser using best practices such as creating a modular scale and baseline grids that are consistent and reusable.
All styling set up with archetype generates developer-friendly code for easy handoff.
Changes and updates are instant and easily shareable by allowing users to export to CSS or to Sketch. You also have the ability to download your chosen font set used for your design. Save projects using your Google account and come back to your work at any time.
If you use version control, work on open source projects, or conduct code review amongst team members, Probot might be your angel in disguise. Probot is a community-driven set of apps to automate and improve your workflow with GitHub.
You can explore all the open source and free to use on any project apps or build your own. Some apps provided currently are Stale, to automatically close stale issues and pull requests that accumulate during a project, or reminders to create reminder notifications for your project issues and team members.
Have you ever received a PSD and wished you could convert it to a Sketch file? Well you’re in luck. Avocode (another intersting tool to try as well) has been kind enough to give the community a free tool to do such a job. Browse to the URL and upload your PSD. Here’s a roadmap and list of features the conversion process supports.
Also keep in mind that Photoshop and Sketch are significantly different tools. It can only convert design elements that can be created in both of these design apps; Sketch and Photoshop. It cannot convert nor imitate Photoshop features that are not included in the Sketch app.
Optimizing images can significantly improve Web page load time, resulting in improved user retention and satisfaction. Website Speed Test is an image analysis tool that can scan any site with a live URL. It provides detailed optimization insights on how changes to image size, format, quality and encoding parameters can improve page load speed.
Results can be shared and once the analysis is complete, each image noted in your results can be downloaded in optimized format or other format alternatives such as webp or jpeg-xr.
WordPressPerformance Test: The Best Selling WordPress Themes on ThemeKeeperIan Yates
PerformancePerformance Enhancement: How to Load Images Using in-view.jsLouie Rootfield
Animista is a place where you can play with a collection of pre-made css animations, tweak them and get only those you’ll actually use. Copy the generated code or download a single CSS file to use.
If you see something you like during your work, click the heart icon, or browse your other favorites at anytime by clicking the funnel icon. Animista gives you all kinds of pre-made and custom options to fine tune your motion sequence including 3D options along with your typical 2D transformations. Code can be minified and piped through Autoprefixer in order to ensure you get the most useable code possible for browser support.
AnimationGet Started With Web AnimationIan Yates
Animation10 Recommended GitHub Repos for Motion on the WebDennis Gaebel
Hero Patterns is a collection of repeatable SVG background patterns for you to use on your web projects. Each background pattern you select is converted into a repeatable background and encoded in base64 to use in your CSS file of choice. Adjust individual properties such as foreground color, background color and foreground opacity while you make your design decisions.
Currently the app lets you choose between 87 different patterns and has quite a variety considering the small amount of patterns provided.
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g fill-rule="evenodd"><g fill="#000"><path opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z" /><path d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z" /></g></g></svg>
You can also download the unstyled svg as you can see from the code snippet above. This is perfect for those who don’t want to use the base64 option or wish to customize the pattern further.
SVGSVG for Web Designers in 60 SecondsKezz Bracey
SVGSVG Brilliance: 10 Inspiring Examples From Around the WebDennis Gaebel
Cushion brings peace of mind for self-employed individuals running their own business. It helps to provide better insight and “bring a calm to the everyday rollercoaster ride that is freelancing.”
It offers a 14 day trial (no credit card required), and if you’re hooked during your trial, plans start at $5 per month; also known as the “moonlighter” plan. This app helps to cover your bases when you need:
- Project Scheduling
- Expense Tracking
- Spreadsheet Export
- Invoice Tracking
- Monthly Income View
- and more…
Cushion is considering a mobile app for the future, but doesn’t offer one at this time as the focus is on building a fully-featured web app. If you’re specifically looking for bank account integration (and this is a deal breaker for you) the unfortunate news is that the app doesn’t have a bank feed, but you can import your bank statement as a
.csv file. Give it run for yourself, you have nothing to lose.
A couple of notable features regarding this tool are:
- On launch, keyboard focus shifts to the modal window container
- The modal window is described via optional modal heading
- Traps the keyboard focus within the modal when active/visible
- Closes the window on
- Closes the window on overlay mouse
- Sets keyboard focus back to the launcher element on window close
- Add your own custom close controls!
- Add your own custom controls which send focus to somewhere else on the page!
- Transparent border for Windows High Contrast themes
Launchy also has many CSS classes available on its generated elements for custom styling. Check out the style.scss file for class names and an example on how you might want to style your modal windows. The project is also available as an npm package:
npm i launchy-modal-window. Truly an accessible modal window done right.
Formcore is an open-source project (described as “light-weight and validated forms”) by the Filament group and is a set of form patterns such as show/hide password, character counter, credit card input and validation, multi-line text inputs that expands as the user types, plus much more.
There are a number of other features incorporated like normalizing the behavior of
<input type="number"> form fields, works to enforce the
maxlength attribute, and also works around bugs with
<input type="number"> in Safari 6 and Firefox desktop to mention a few.
If you’re building forms on the web (and I’ll wager you are) then this might be a good one to try with your next project involving form inputs.
Now that we’ve reached the end of our list what are your thoughts? Did one spark your attention igniting your will to try it out? Were you unimpressed and have others to suggest? Let us know in the comments below. Happy web building everyone!