This article was published 4 years ago, therefore the contents of this post may be out of date.

This is the fifth of my yearly roundup of What’s New for Designers & Developers for 2020, in this roundup, I will be focusing on showing you what were some of the all the new, great and random type of frameworks, checklist for web designers, css frameworks, new CMS’, guides, php frameworks, boilerplates and more

I want to mention that not every resources that been featured in each of my roundups will be featured in today’s post, as I feel that this list could be enormous. So for your piece of reading pleasure, I will be splitting up the best of these resources into month of release. So lets get in to it.

January

The CCPA Compliance Checklist

The Ccpa Compliance Checklist

After the launch of GDPR, many companies are being confronted with a new legislation, the CCPA. For those of you that are preparing, here’s a checklist that will assist you.

Pico.css

Pico Css

Pico.css is a lightweight CSS library with elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

BubbleCMS

Bubble Cms

The content of a chatbot should be managed by the people who are most familiar with it. Bubble CMS was developed to make this possible and with the help of predefined templates, structured conversations can be configured in an instant.

Colorsinspo

Colors Inspo

Colorsinspo is all in one resource for finding everything about color with extreme ease. No more surfing on internet to find the right color combinations & tools, resource!We’ve got you covered. We simplify the process of choosing colors for your design.

February

Developer’s Guide to Content Creation

The Developer's Guide To Content Creation

Manage the content process from ideation to promotion. You’ll learn how to define your target audience, a blog mission statement, and a content calendar. You’ll learn four ways to generate ideas & best practices for improving readability and accessibility.

Blobz

Blobz

Blobz is a free tool for making pure CSS animated responsive blobs. Select the one from gallery and easily customize it using CSS variables.

Griddle

Griddle Css Framework

Griddle is a CSS framework created with CSS Grid and Flexbox. At it’s core, is CSS Grid. The CSS specification that is quickly becoming the new standard when creating UI layouts and grids. Start creating intrinsic layouts for all modern browsers today.

Design System Checklist

Design System Checklist

Build better design systems, this is a open-source checklist to help you plan, build and grow your design system.

Cheat Sheets Dev

Cheat Sheets Dev

Developer community built to share the most used and popular programming snippets, in a simplistic way.

Wolff

Wolff

Wolff is a ridiculously small and lightweight PHP framework with useful functions and utilities.It’s small, fast, scalable and easy. The perfect solution for building small and medium-sized web applications.

March

Snapfont

Snapfont Beta

SnapFont makes it easier to test any font on any webite. All you need to do is to install the Snapfont browser extension.

GitHub CLI Beta

Github Cli

Introducing an easier and more seamless way to work with GitHub from the command line—GitHub CLI, now in beta.You can install GitHub CLI today on macOS, Windows, and Linux, and there’s more to come as we iterate on your feedback from the beta.

Mailbrew

Mailbrew

Save hours of time spent checking sites and scrolling feeds, by receiving automated email digests on the things you love. Pick your sources, and get the content you need on your schedule.

Responsive Website Test

Responsive Website Test

This easy to use tool by Pastel lets you test your website across mobile, tablet, and desktop breakpoints.

MailCanvas

Mailcanvas

Mailcanvas is a email template design tool, without writing code. You can export html code and use it in any ESP like mailchimp, sendgrid, hubsport, campaign monitor, marketo, constant contact, mailgun.

UI Diff

Ui Diff

Instead of comparing only seperate components by themselves, with ui-diff you can test your entire screens to see what have changed throughout your entire website in just a couple of clicks. And now, it’s free.

Learn CSS Positioning

Learn Css Positioning

Are you ready to start learning about how positioning works in CSS? This interactive article is for you.

April

SplitCSS

Split Css

SplitCSS is an API that fully executes the web page (unlike CLI tools) and returns only the CSS that the web page is using.

Leaf PHP v2

Leaf Php

Leaf introduces a cleaner and much simpler structure to the PHP language while maintaining it’s flexibility. With a simple structure and a shallow learning curve, it’s an excellent way to rapidly build powerful and high performant web apps and APIs.

hCaptcha

Hcaptcha

Did you realize every time you “click on the car” you are helping to train a single Giganticcompany’s machine learning systems for free? hCaptcha turns this model around. When you use hCaptcha, companies bid on the work your users do as they prove their humanity. You get the rewards.

Frontend Mentor

Frontend Mentor

Frontend Mentor is an front-end challenges mimic a real-life workflow. Each one includes designs (mobile & desktop), a style guide, and a project brief. The rest is up to you! This means you get access to professional designs and can build your experience of creating websites.

Crono

Crono

With Crono, you can make your application do something in the future: send an HTTP request every morning at dawn, email your users on their birthday, call yourself in 15 minutes… all that and more in just 2 lines of code.

Focussist

Focussist

Tired of using cumbersome project management tools? Or not having enough visibility into the big picture? Keep scrolling the landing page to see why Focussist is the answer.

May

Shorthand

Shorthand Css

Shorthand is a free and open source CSS framework, that allows you to make unique and modern design without writing any CSS.

Boilerplato

Boilerplato

A powerful tool and a concept of creating boilerplate source code from a template. It defines a protocol on how to generate bootstrap boilerplate source code for a project/app very easily.

Pattern.css

Pattern.css

CSS only library to fill your empty background with beautiful patterns.

Backstage

Backstage Developer Portal

Meet the first open-source developer portal that puts the developer experience first. With a unified frontend for all your infrastructure tooling, Backstage gets developers up and running faster, which makes them happier.

BEM Cheat Sheet

Bem Cheat Sheet

This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components.

IMAP API

Imap Api

IMAP API is a self hosted application for accessing IMAP accounts over REST API. IMAP API daemon connects to user’s IMAP account, translates API requests to IMAP and also sends webhooks for changes like new or deleted emails.

LinkPreview

Linkpreview

Preview Web Links with the free API service. Get JSON Response for any URL.

Selectors Explained

Selectors Explained

A CSS selector to plain English translator.

No Deploy Friday

Don't Deploy On Friday

It was scientifically proven that deploying on a Friday evening increases the chance of having a broken production server on the weekend. No Deploy Friday is a GitHub Action that will make sure that you don’t do it.

June

Norde Source

Norde Source Svg Icon Manager And Editor

Norde Source makes it easy to customise entire icon sets to fit your brand. Built for designers, developers, marketers and anyone who works with a lot of icons.

CapRover

Caprover

CapRover is an extremely easy to use app/database deployment & web server manager for your NodeJS, Python, PHP, ASP.NET, Ruby, MySQL, MongoDB, Postgres, WordPress and more applications!

Engineering Evaluations

Devplan

Identify your current strengths and weaknesses using the DevPlan self-evaluation tool. Compare your scores across our engineering ladder and use them to create a professional development plan which focuses on your growth areas.

New.css

New.css

It’s not going to make you a fancy carousel. It’s not going to give you 12 different column elements. All it does is turn basic HTML into something that the Smithsonian isn’t going to request for their _History of Computing_ exhibit.

SEO Cheat Sheet

Seo Cheat Sheet

When it comes to SEO there are a lot of things you need to consider to keep your website up to date. This tool aims to help you with the technical side of On-Page SEO and includes a sorted list of best practices.

Toolbase.io

Toolbase

A recommendation engine for the best SaaS tools that shows tailored results based on the size of your company, its industry and biggest pain points. Also, deeply curated lists of SaaS business tools and for the digital transformation of your organisation.

Untools

Untools Tools For Better Thinking

Collection of thinking tools and frameworks to help you solve problems, make decisions and understand systems.

ServerAuth

Serverauth

ServerAuth allows you to secure your server’s SSH access, by restricting who can login, and when. Our in-built scheduling system allows you to restrict when each of your team members can log into your servers, making it great for remote teams and contractors!

July

Lyt

Lyt

Lyt is a flexible and highly configurable CSS layout library. Designed to be tweaked. The goal is to get rid of bigger framework environment and allow custom styles with easy layout creation. Lyt can be configured to be pleasing to use with every framework.

Pest

Pest

Pest is a Testing Framework with a focus on simplicity. It was carefully crafted to bring the joy of testing to PHP.

mono/color

Monocolor

mono/color is a very small yet full-featured, simple and beautiful CSS-only framework built with responsivity, readability, modularity, and a dual-theme in mind.

SwiftUI Inspector

Swiftui Inspector

SwiftUI inspector for Figma is here. Enhance your development workflow by copying and pasting element styles from your Figma files into your Xcode project. This greatly reduces the amount of time it takes to take your designs to code.

Database Diagram Generator

Database Diagram Generator

Automatically generate an interactive ER Diagram (ERD) from your existing SQL cloud database.

SmartDB

Smart Db

SmartDB is a platform for serverless mySQL instances on your own AWS account. Your database will grow with its challenges – without you even noticing. Stop paying for database capacities you don’t need – and reduce your costs by half!

HarperDB

Harperdb

HarperDB is a distributed database focused on making data management easy. It has an intuitive REST API & supports NoSQL & SQL including joins. HarperDB leverages standard interfaces so that you can use the reporting & analysis tools that best meet your needs.

SocialSizes 3.0

Social Sizes Verison 3

SocialSizes 3.0 includes template for Sketch, Figma, Adobe XD & Photoshop. You can see all sizes and download templates separately for Facebook, Instagram, Twitter, YouTube, Pinterest, Twitch, ProductHunt, VK and more. New: Get notified when a size changes!

August

FrontAid CMS

Front Aid Cms

FrontAid CMS is a decoupled and Git-based content management system. Content is stored in your own Git repository in the JSON text format. It works with all your current tools and you always own your data.

Mailgo

Mailgo

a new concept of mailto and tel links

GlitchTip

Glitch Tip

Every error from your project collected in real time and stored in one place, for an affordable price.

Halfmoon

Halfmoon

Halfmoon is a responsive front-end framework, designed for quickly building beautiful dashboards and product pages. Built-in dark mode, optional JavaScript library (no jQuery), Bootstrap like classes, and cross-browser compatibility (including IE11).

StyleStage

Style Stage

A modern CSS showcase styled by community contributions. Add your stylesheet!

Developer Handbook 2020

Developer Handbook 2020

An opinionated guide on how to become a professional Web/Mobile App Developer.

September

Nice Ice

Nice Ice

Gather feedback from your users with one line of code.

Umami

Umami

Umami is a simple, easy to use, self-hosted web analytics solution. The goal is to provide you with a friendlier, privacy-focused alternative to Google Anaytics and a free, open-sourced alternative to paid solutions. Umami collects only the metrics you care about and everything fits on a single page.

CCSS – CrypticCSS

Ccss

CCSS is an opinionated, low level utility to deal with CSS style objects. It’s not an out-of-the-box styling solution, instead it focuses on helping you deliver your own, custom tools. However, we also deliver some solutions built on top of CCSS.

Stitches

Stitches

Stitches is a fully-typed CSS-in-JS library featuring near-zero runtime, server-side rendering, multi-variant support, and a best-in-class developer experience.

Prompt API

Prompt Api

Prompt API is a highly curated API marketplace with a focus on reliability and scalability. It allows API developers to monetize their APIs, while letting others building the next big thing much easier and faster.

October

Pixie

Pixie Labs

Pixie gives developers instant application performance data. With Pixie, developers don’t need to change code, manually set up ad-hoc dashboards or compromise on how much data they can observe. Pixie Community is in Public Beta and is free forever!

Terminal Cheat Sheet

Terminal Cheat Sheet

All the knowledge you need to get up and running on terminals across operating systems. You might be an aspiring developer. Perhaps you just want to brush up on some basic terminal commands. Available in English, Spanish, and Arabic.

Asatru PHP Framework

Asatru Php

Asatru PHP Framework is a lightweight PHP framework designed for rapid application development.It provides dynamic routing, a view templating engine, ORM style database queries, security features and a handy CLI tool.

PageSpeed Compare

Pagespeed Compare

Compare performance metrics (lab and field data) of your pages against each other or your competitors. PageSpeed Compare makes use of Google PageSpeed Insights which is powered by Lighthouse and Chrome UX Report.

A11yresources

A11y Resources

a11yresources is a growing list of 200+ accessibility tools and resources. Hand-curated and updated daily.

November

IrisQL

Irisql

IrisQL is a GraphQL prototyping tool that auto-generates GraphQL schema through an interactive GUI. IrisQL lets users input object types, fields and their relationships. It visualizes those objects and relationships in a dynamic graph.

Checka11y.css

Checka11y.css

A CSS stylesheet to quickly highlight a11y concerns.

The Good Line-Height

The Good Line Height

Have you ever needed to create a type scale following an 8 point baseline grid, or really any grid, and had to spend extra time figuring out what should be the right line-height for every text size in the scale? No worries! The line-height calculates the exact number so it always fits the baseline grid!

Hey API Listt

Hey Api Listt

1000+ APIs at one place. You can filter and search as well. Includes funniest 🐈🐈🐈 Cat APIs to complex weather APIs. Includes APIs from IndieHackers to APIs from Enterprises. All APIs under one roof. A one stop for all blog posts around APIs.

Create Full Stack

Create Full Stack

Generate a TypeScript full stack with one command.

OrbitCSS

Orbit Css

OrbitCSS is a modern and simple CSS framework built around the CSS Flexbox module, making it easy to design flexible, responsive layouts. This is a CSS only framework.

December

Hatch

Hatch Framework

Hatch is a full fledged cloneable framework with more than 2200 classes to design your next amazing website in minimum time

phpAnalytics

Php Analytics

phpAnalytics is a privacy focused, web analytics software solution. It provides detailed web traffic reports, such as Realtime, Overview, Acquisitions, Behavior, Geographic, Technology, Events, and more.

Upptime

Upptime

Upptime is the open-source uptime monitor and status page, powered entirely by GitHub.

Patrn

Patrn

Patrn is a framework focused sole on layout capabilities for prototyping, building interfaces, or experimentation.

Seasonal.css

Seasonal.css

Seasonal.css supplies a seasonal colour scheme based on the day of the year.

Atomic Design Checklist

Atomic Design Checklist

This is a checklist to help you build atomic design systems by keeping in check your design components, their variants, modifiers, sizes, and states as well.

DeployHero

Deploy Hero

Ready to start deploying your Git repositories? Automatically deploy code to your server whenever you push to the repository.

Share

What’s New for Designers & Developers from 2020: Tools & Web Resources