Day: November 12, 2021

As a web developer, there’s always something you can learn every day and grow. You can learn design principles, user experience, user interface design, and user behaviors through analytics data. Or, you can branch yourself into servers such as installing and running a server package yourself.

In this round of the series, we’ve put together different resources from tools, podcasts, articles, and a lot more where you can learn multiple disciplines beyond just creating the website itself. Let’s get started!

UI Glass Generator

Glassy user-interface is making a comeback. We can see it now is an integral part of the new interface design in Windows, and macOS. Thanks to the latest CSS feature, we can also adopt a similar interface for the website, and this tool will make it even easier and quicker to create one.

You can use the GUI to adjust the color, opacity, and background of your website and it will generate the CSS that you can copy and paste.

VS Code Fortnite Theme

A Fortnite-inspired theme for Visual Studio Code. It comes with some special effects by enabling the Fortnite: Enable Legendary option. If you enjoy the game and the flares while coding, this VSCode theme is for you.

MakerStations

This site collects desk setups from various professionals (designers, developers, writers, etc.). Not only that it presents these for inspiration but also dig into the owner’s personalities and reasons behind the setup.

If you’re currently looking inpiration for your new desk setup, look no further. You’ll surely find some good ones in MakerStations.

React.js ARIA

A collection of React.js functions that helps in creating accessible UI components and design systems for your web application.

It’s designed to deliver the best possible interactive experience for users whether they’re using a keyboard, mouse, or assistive device. It’s a great initiative from Adobe for a better web.

React Hooks Testing Library

Hooks is a concept in React.js for creating components less rigid and we can create custom Hooks aside from the ones provided built-in.

Now if you have come across a situation where you’d like to perform an automated test for the custom Hook, this library will come in handy. It provides the pattern to test your custom React.js Hook as close as when it’s used within a real component.

WiFi Card

This tool makes sharing WiFi credentials more convenient using QR code. You simply need to enter the WiFi name and the password. Print and attach it somewhere in the room.

Umami

Umami is an open-source application to collect analytic data. It’s easy to install in your own server or VPS with minimum requirements. You only need Node.js and MySQL (or PostgreSQL). It’s a great application if you’re looking for an alternative to Google Analytics where you own and control all the data.

The CSS Podcast

Run by Google Developer Advocates duo, Una Kravets and Adam Argyle, you will learn so much about CSS; from practical tips, accessibility, performance, and much more. It’s one of the best quality sources to learn CSS and web development in general.

Fosscard

Discord is rising as an interactive communication tool for communities. You can join various groups including groups for web development and programming, to chat with the community or make a voice or video call.

Discord is a SaaS though. If you’re looking for a self-host where you can have more control, Fosscard can be a good alternative.

Clean Code PHP

A collection of advice to write PHP codes that are readable, reusable, and most importantly maintainable. It’s a great resource where you can learn some pracatical tips; such as how to best name variables, how to structure conditional block, and how to name a function and the arguments, to name a few.

MiniCLI

A tiny PHP library to build Command Line Interface (CLI). It provides the base structure to register your custom command lines as well as the helper and utility functions to handle user input and the output. A great starting for creating a PHP-based command line.

UniformCSS

A generator and utility-first CSS framework built with Sass. It’s a mix of the good of both worlds in which you can leverage the flexibility of utility-first workflow while still have the power of Sass such as the variables, mixins, and functions.

Layout Generator

An online tool to generates a base layout for your website. It utilizes Grid for the layout and provides GUI to generate the layout. For example, you can set the number of columns, rows, and alignments. I find it’s a more intuitive way to generate a layout with CSS Grid.

Fower

Utility-first CSS methodology is getting quite popular. It offers flexibility to be scaleable on small or large websites. If you’re into writing CSS-in-JS for your web application and lean-to a utility-first CSS approach to compose the styles, you might be interested in trying this library.

Fower is framework-agnostic so you can apply it in various frameworks such as React.js, Vue.js, and Svelt, or plain JavaScript.

RTL WTF

A great source to learn tips, use cases, and best practices to build a website for the right-to-left writing direction such as Arabic and Hebrew. This website should be on your bookmark.

Notistack

A React.js library that makes it easy to display “toast” notifications on your web app. It’s highly configurable that allows you to present the best possible user experience.

To name a few, you can set the number of maximum notifications, prevent duplicates by not showing notifications with the same message, and set the type of transition.

Kopio

An open-source server application that you can use to run and manage backups in your own cloud servers. Kopia also provides a nice desktop application that runs on Windows, macOS, and Linux where you can manage it conveniently such as to create a snapshot and restore the snapshot.

Web Components DevTools

Web Component allows you to create a custom component that the browser can understand and render. If you’ve come across to require build custom Web Component, you will be needing this Chrome extension that allows you to debug the Web Component on the browser.

Fluid Typography

A handy little tool to create text size that scales with the window size. The tool helps you generate the style that allows the text on your website to look great and proportional on any screen.

MillionJS

A tiny JavaScript library (less than 1KB) to create an interactive user interface for your website. It implements Virtual DOM behind the scene and some unique approaches that make it fast to render on the browser.

I think it can be a good alternative to some more established frameworks like React.js and Vue.js, especially if you just need to just the bare of Virtual DOM.

The post Fresh Resources for Web Designers and Developers (July 2021) appeared first on Hongkiat.

Today is the world of inclusive technology – websites, apps, and tech gadgets that are made for people with different kinds of abilities and inabilities. So when you’re designing a website, you include features that make your design accessible to as many people as possible. And this is where accessibility tools come into play.

Instead of creating everything from scratch, here’s a list of cool accessibility tools for designers. From creating color combinations according to WCAG standards to adding different reading modes to your website, these tools are a must-haves for every designer. Take a look at the list to know about each tool in detail.

1. Stark

Stark a feature-filled accessibility tool that helps web and mobile designers to add accessibility features into their UI designs to make their designs work for everyone. Either you are designing a product from scratch or updating your existing design system, it gives you a hassle-free way to create accessible products at any level.

One of the best things about this tool is that it integrates seamlessly with Figma, Sketch, Adobe XD, and Google Chrome and readers support all through the product lifecycle. Some of the accessibility features that the tool can add to your design are contract checker, colorblind generator, rapid contrast checking, and many more.

• Supports: Figma, Adobe XD, Sketch
• Stark Price: Free
• Premium app/subscriptions? Yes (Check pricing)

2. ColorSafe

To make your website accessible for users with different visual capabilities, ColorSafe offers a bunch of features that are very easy to integrate in your design. It enables you to create visually beautiful and functionally accessible color palettes as well as text and background contrast ratios based on WCAG guidelines.

The working of this tool is pretty simple. All you have to do is enter a background color and determine the styling of your text and ColorSafe will do the rest. Once you decide the text-to background contrast ratio, you can apply it in your design and test the results.

• Supports: Browser
• ColorSafe Price: Free
• Premium app/subscriptions? No

3. Contrast

Just as the name says, Contrast is an accessibility tool that takes the manual labour out of color contrast ratio testing and does it quickly and automatically. Created by two professional designers who knew how badly such a tool was needed from the aspect of usability and aesthetics.

Being a user-friendly tool, the tool gives you precise color contrast information (contrast score) according to the WCGA standards and updates the entire app in a jiffy. At the time of writing, however, it is available for macOS only.

• Supports: macOS
• Contrast Price: $6.99
• Premium app/subscriptions? Yes

4. Color Review

Color Review is a simple web-based tool that helps you in making an informed decision about which colors and color combinations to use in your UI design, especially when it comes to creating a design for people who perceive colors differently than others.

Built on the basis of WCAG standards of visual design, the tool tool works on two levels I.e., AA and the more strict one AAA. There’s also a Color Review app available for OS X, Windows, iPhone, and Android with interesting features like swatches and eyedrops and and requires you to sign up to get it.

• Supports: Browser
• Color Review Price: Free
• Premium app/subscriptions? No

5. Colorable

Colorable is a web-based color combination contrast tester that enables you to decide upon the most suitable background to text contrast ratio for your website or mobile app’s interface design. With a pass/ fail score based on WCAG accessibility guidelines, you are able to make your UI universally accessible for users – especially those with visual impairments.

With this tool you can take a set color palette and instantly get contrast values different types of combinations. To use it just enter an array of color strings or an object with color strings as values and it will return a list of color combinations for these colors along with their WCAG contrast values.

• Supports: Browser
• Colorable Price: Free
• Premium app/subscriptions? No

6. The A11y Project

Offering a beautiful, accessible and inclusive digital experience, the A11y Project upholds the value of providing equal opportunities when it comes to design and tech. It helps you in developing completely accessible products by the dint of an array of wonderful resources like backgrounds, icons, color palettes, and helpful guides.

The best thing about this tool is that it is created and constantly updated by a community of talented individuals. Moreover, there’s an option to help you conduct an accessibility audit through a comprehensive checklist according to the accessibility guidelines.

• Supports: Browser
• The A11y Project Price: Free
• Premium app/subscriptions? No

7. Contrast Grid

When you’re working on a huge web or mobile app design project, you have a many choices to make in terms of color combinations. Contrast Grid is a tool that enables you to test a number of foreground and background color combinations.

The web-based tool has a simple interface in which you can manually enter different colors that you want to use as rows and columns and it will create a grid that is compliant with WCAG 2.) minimum contrast requirements. You can then copy the grid code for HTML or CSS and even share your grid on Twitter.

• Supports: Browser
• Contrast Grid Price: Free
• Premium app/subscriptions? No

8. Clrs.cc

Clrs.cc is a sort of library or repository of different color combinations that give you a good dose of inspiration for creating accessible user interface for color blind or visually challenged individuals. From light to dark background, you’ll find many interesting options of color combos.

There are total of 90 color combinations on the site along with their respective contrast values as well as AA or AAA values. You can choose any of these background to text ratios or simply mix and match to create one of your own.

• Supports: Browser
• Clrs.cc Price: Free
• Premium app/subscriptions? No

9. Who Can Use

Who Can Use is an interesting tool that helps web and graphic designers understand how different color combinations and color contrasts affect people with different visual disabilities. Using plugins like Chroma.js and Color-blind, it helps in making your designs inclusive for everyone.

Keeping the recommendations of WCAG in consideration, this intuitive tool features a background color picker with slider and tells you the contrast ratio and WCAG grading of each color. Moreover, with each color you get to see how this color will be seen by people of different vision types along with a simulation run.

• Supports: Browser
• Who Can Use Price: Free
• Premium app/subscriptions? No

10. ColorBox

Colorbox is a simple tool that enables you to create color combinations for accessible UIs that make your website usable for visually challenged users. You can either one color and many colors and manually adding hue, saturation, and brightness values.

The tool also allows you to import color codes to get the appropriate color combination options, an option to export the selected color information as color codes that you can integrate in your web design as well as sharing the URL of the color information that you select.

• Supports: Browser
• ColorBox Price: Free
• Premium app/subscriptions? No

The post 10 Best Accessibility Tools For Designers appeared first on Hongkiat.