Fresh Resources for Web Designers and Developers (April 2022)
Developing website is not always about coding. You’d also need a good sense of design to make the site usable, accessible, and actually looking good for the users.
So, in this round of the series, we are going to explore more on some of these resources around design category. You’ll find tools for composing animation on the browser, high-quality mockups, animated icon library, a couple of CSS libraries, and a lot more.
Without further ado, let’s jump in to see the full list.
Fresh Resources for Web Designers and Developers (March 2022)
PHP, despite being dubbed as a "dead" language, keeps improving over the years. With the latest release of... Read more
Lexical
A Facebook open-source initiative, Lexical is a JavaScript library to build a rich-text editor with focus on performance, accessibility, and extensibility. These allow developers to add new functionalities to their needs.
At the time of this writing, Lexical is in active development and provides React.js binding.
Rocket
A full-stack boilerplate to build modern static website with JavaScript. It comes with the essential tools to create a functional website such as automatic code splitting, routing, and components with everyting pre-configured so you can focus on being productive.
Ls Graphics
A collection of high-quality mockups of a wide range of product presention. These include ceramic cups, postcards, mac studio, macbook pro, iPhone, variety of packages, and a lot more.
All these mock-ups are free and can be used in personal or commercial projects. They are also available in Photoshop, Sketch, XD and Figma.
Warp
A Terminal application built from the ground-up with Rust. It’s fast and packed with features that you would not find in a traditional Terminal such as the ability use multiple cursors and autocompletion and suggestions similar to a text editor and that makes it feels modern.
Components AI
A collection of web tools, generators, and editors for HTML, CSS, and SVG. You’ll find a tool to generate color theme, gradients, SVG graphics in 2D or 3D and a few more. These tools can be handy to boost productivity a nice user interface.
SpruceCSS
A CSS framework built with Sass. It provides Variables, Mixins, Functions, as well as the base styles for common elements such as all the Typographics elements, Buttons, Forms, and Tables.
It also accounts for the color accessibility as well as internationalisation by supporting RTL styles out of the box.
It’s a framework that provides a solid foundation for your website
Motion Tools
A Chrome DevTools extensions that allows you to inspect, record, and play CSS animation right on the browser. A handy tool to debug CSS animation and that can help you to create a more compeling animation.
Ladle
Ladle is designed as a drop-in alternative to Storybook with focus on performance and ease of use. It is a tool to develop and test components. It’s fast; it loads or reloads changes instantly no matter how many components are rendered.
Patterns
A free e-book by Addy Osmani and Lydia Hallie that covers design paterns on building web application with JavaScript. Here you will find some tips and tricks to better architect your applications that will result in better code.
Tooling
Another handy collection of tools for web developers. It includes a tool to generate QR code, hash, text diff, and some data converters such as JSON to TypeScript, HTML to Markdown, JSON to Rust, and a few more. It’s the tool you’d need to have in your bookmark.
Open by Design
Open by Design provides a curated list of UI design for app and website. Each design is available in Figma format and you may use it for both personal or commercial use.
Are you out of inspiration for your next app or web design? Look no further. You should have it in your bookmark.
unDraw
unDraw provides a collection of high-quality illustrations. You can customise the base color to match your design, select one of the illustrations, and download in SVG or PNG format.
Are you not able to design? No problem. Undraw can make your website instantly look professional and aesthetically pleasing.
Screely
A handy tool that allows you to create a browser mockup quickly. Simply drop the image on the webpage and it will show a couple of options where you can select the browser frame styles, background colors, spacing, and an option to download it as PNG image.
useAnimations
A collection of animated icons built for Lottie framework. It includes a number of icons such as the loading icons on various styles, social media icons, navigation icons, and a lot more. These icons will guarantee to make your website more engaging.
Twind
Twind is a kind of CSS-in-JS implementation for TailwindCSS. It provides the utility functions to output the Tailwind class name, and it will render the styles.
Twind is framework agnositc, which allows you to use in a bare HTML and any framework including React.js, Vue.js, and Lit Element.
TailBlocks
A collection of more than 60+ layout blocks built with TailwindCSS. You can find some common layouts for content, blog, form, e-Commerce, CTA and a lot more. If you’re going to use TailwindCSS, using these blocks is a good start to boost your productivity.
Front-end Practice
Provides a collection of projects that you can work on to assess your front-skills. Projects are grouped into 3 Levels – on Level 1, you’ll get to develop simple one page layout while on Level 3 you will be challenged with a more complex layout that consist more elements.
Bedrock Layout
A React.js library that provides utility components that make it easier to arrange your content with common layout patterns. For example, you can use MasonryGrid component to show content in Masonry grid. Or, the Frame which allows you to crop media in a sepcific ratio.
You can install this library through NPM, and look into some real-case examples it provides on the website to get you up an running immediately.
AdonisJS
A full-stack JavaScript framework to build modern website. AdonisJS highlights some features that you can usually find in an MVC framework such as the Routing, Controller, Middleware, Validation, and Template engine. If you used Laravel or Ruby on Rail, you will immediately feel at home.
Sampler
Sampler is a Shell or Terminal utility that can visualise processes or activities happening in your computer (much like what we see on a sci-fi movie) such as the network traffic, RAM and CPU usage, and Docker container stats to name a few. If you’d like to impress your family or friends, this the one you need to install in your computer.
