In this fifth round of my end of the year round up of SomeWhat Creative’s What’s New for Designers & Developers roundup, In these type of roundups I like to show what’s new for Web Designers and Developers. So let cut to the chase, today’s post I will be focusing on all the new, great and random type of frameworks, browsers extensions, and design software extensions, html5, new podcasts, new CMS’s, Books, things for sketch and browser extensions etc..

I want to say that not every web resource item that got featured in each of the monthly roundups will be listed, as the list is huge anyway. I will also be splitting this best of into each month.

January

CSS Cheat Sheet

A reference for CSS goodness.

Buy Me A Coffee

Best way to receive donations from your audience. Set up your free ‘Buy Me A Coffee’ page today!

Bob Ross Lipsum

Bob Ross lorem ipsum quotes generator

React Starter Kit

A free, 5-part video course with interactive code examples that will help you learn React.

Learn CSS Grid for free

Learn CSS Grid with these 14 interactive screen-casts to take you from beginner to advanced

Chart

Chart is a Sketch plugin for creation the most popular charts by real or random data.

Hexi Flexi Grid

Hexi-Flexi Grid is an SCSS component, built on the CSS Grid layout, that creates a hexagonal lattice. The mixin includes a number of customizeable settings to control the size, layout and look of the hex grid.

Specificity Visualizer

A visual way to analyze the specificity of selectors in CSS.

Tracy

Convert your monochrome sketches, drawings or hand lettering to SVG

30 Seconds of Code

Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.

February

Href Tools

Href Tools is a collection of free online tools to get your work done faster.It’s about bringing the most useful tools at one place with good UX (and UI) .

Carbon

Create and share beautiful images of your source code.Start typing or drop a file into the text area to get started.

Cloudflare Workers

Cloudflare Workers lets you run JavaScript on Cloudflare’s edge, deploying globally to over 120+ data centers around the world in less than 30 seconds. Your code can intercept and modify any request made to your website, make outbound requests to any URL on the Internet, and replace much of what you might need to configure your CDN to do today.

Beeceptor

Beeceptor is an HTTP proxy for (hosted) rest APIs. Get started in seconds by intercepting API calls and building rules to mock response.

Oh My Grids!

OMG is a curated collection of Articles, Videos and Tutorials on CSS Grids from around the web

CSS Gridish

CSS Gridish takes design specs of your product’s grid and builds out several resources for your team to use

AnimTrap

AnimTrap is a CSS Framework for animations. Its like bootstrap for JS animations. All you need is to import AnimTrap and use it for animations in your webapp easily.

Logo Comparison Tool

Logo Comparison Tool lets you showcase your logo concepts in one simple image, and quickly get feedback from your friends.

LinkMiner

LinkMiner is an easy-to-use backlink checker tool focusing on backlinks that matter. Use it to improve your SEO game.

Purgecss

Purgecss is a tool to remove unused CSS. It can be used as part of your development workflow. Purgecss comes with a JavaScript API, a CLI, and plugins for popular build tools.

Boilerform

Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.

Gifme

With the Gif.me sketch plugin you can play gifs and videos inside sketch app while you’re designing.

Unused Style Remover

Unused Style Remover is a Sketch plugin which removes unused layer and text styles.

March

30 Seconds of CSS

30 seconds of CSS is a curated collection of useful CSS snippets you can understand in 30 seconds or less. Inspired by 30 seconds of code.

Atomic Bulldog Grid

Atomic Bulldog is a Scss(Sass) boilerplate base on atomic design methodology. It integrates Node KSS to automatically generate a live styleguide/pattern library.

Website Starter Kit from Glitch

A free, 4-part video course with interactive code examples to learn to make a website using HTML, JS, CSS and Node.js

CSS Palette

CSS Palette is an app which lets you transform your website’s stylesheet or URLs into beautiful, COPY-PASTE ready color palettes.

Twitimagefix

Twitter recently made it so that any tweeted image gets a ton of ugly JPEG compression added to it… The exception is, if you upload a picture with transparency in it. This app takes any image you drop on it, and gives it back to you as a PNG with one pixel at 99% opacity, which is enough for Twitter to consider it “a transparent image”.

Brandmark V2

Brandmark.io has been completely revamped, with tons of new logo styles, unique fonts and AI technologies packed into the backend.

April

1.1.1.1 by Cloudflare

1.1.1.1 is the fastest, privacy-first consumer DNS service powered by Cloudflare and no, this is not a joke.

Gitkube

Gitkube is tool for building and deploying docker images on Kubernetes using git push.

Pose

Declarative animation system for HTML, SVG & React

HueSnap

HueSnap is a product that allows you to grab colors from your uploaded images and create beautiful palettes to share with creatives just like you.

Coding for Designers

Virtually all resources aimed at teaching people how-to code introduce the code itself too soon. In doing so, many fundamental and empowering concepts remain hidden and out of reach. These resources often lack explanations of why a coding concept exists as it does. Additionally, these resources rarely consider designers directly. Coding for Designers is the response to this unfortunate reality.

MailDev

MailDev is a simple way to test your projects’ emails during development with an easy to use web interface that runs on your machine.

Web Design Trends 2018 eBook

A book about Web Design Trends for 2018

Restyb

restyb is a smart database with a RESTful API which can be used from any application or code.

May

Smart CSS Grid

Minimal Responsive Grid System

Material

Daemonite’s Material UI is a cross-platform and fully responsive front-end interface based on Google Material Design developed using Bootstrap 4.

Inger.io

Stay ahead of deprecating APIs

CSS Blocks by Linkedin

CSS Blocks is an ergonomic, component-oriented CSS authoring system that compiles to high-performance stylesheets.

Code The Web Weekly

A weekly email packed with tutorials from Code The Web and around the internet.

Front-End Design Checklist

The Design Checklist for Front-End Developers is an exhaustive list of elements which can help developers to analyse and understand web designs and ensure the quality of their Front-End development.

Front-End Developer Handbook 2018

Front-End Developer Handbook 2018 is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2018.

June

Boilerplate README.md Template

Boilerplate for Readme.md on Github

Mort

Dead CSS detection

Fluent Kit

A library introducing Fluent Design to the Web, built on top of the most popular frameworks to keep the development process as simple as possible.

Katana

Katana is sharp CSS Layout System made with Flexbox

Screely

Screely instantly turns your screenshot or design into a beautiful image you can share anywhere.

BotTalk

BotTalk is platform to create Complex Alexa Skills and Google Assistant Actionswith simple markup language. No Programming. So Servers. No Headache. Write once – deploy everywhere.

30 seconds of interviews

30 seconds of interviews is curated list of common interview questions and answers.

FeaturedHQ

FeaturedHQ is a free featured image resource for bloggers and content marketers.

July

Cover Letter Emails

CoverLetterEmails.com is a app to help you easily send nicely formatted, html emails in your job search. Nicely formatted emails using HTML are difficult to configure right, we set them up and create a great interface for you to track, test and send cover letters.

Strawberry CSS

Strawberry is a new flexbox based CSS micro-framework. A set of common flexbox’s utilities focused on making your life easier and faster with nested flexboxes.

Twemoji

Twitter’s open source emoji has you covered for all your project’s emoji needs. With support for the latest Unicode emoji specification, featuring 2,841 emojis, and all for free.

Browser Smart

Browser Smart is a general guide to a more informed decision when choosing a browser. This makes the job of developers easier by ensuring that users engage their applications with standards-based, capable browsers.

Critters

Critters is a Webpack plugin that inlines your app’s critical CSS and lazy-loads the rest.

Grid System Library

A huge library of grid system for iOS, Android and Bootstrap. Easy way to start your project with this set.

Cirrus

A fully responsive CSS and UI framework with custom design controls and simplistic structure. Components are customisable and work with your CSS.

60 Columns Grid System

60 Grid System is Starter Grid for the CSS Grid.

Fugue

Getting high-quality sound for a video, game or UI is often time-consuming and costly. To solve this pain, the Icons8 team launches Fugue, a site that contains heap of stock music which is free for a link.

August

Turtle CSS

TurtleCSS was an experiment for me to learn more about css frameworks and how actually they work. Turtle is loosely based on Milligram CSS Frawework but lot has changed. Turtle is lightweight , fast and easy to use.

Zeroqode Plugins for Bubble

Zeroqode Plugins for Bubble are turnkey solutions to handle complex API integrations with no code, introduce advanced features into the logic of your Bubble app, or add a fancy visual effect to your design to make your product really stand out.

Zave

Save your most commonly used websites for personal reference or share them with the world.

Instagram Analyzer

It’s a Python application that analyses all your Instagram media. It collects location data, uses reverse geocoding provided by LocationIQ and prints locations, countries and cities you’ve visited so far, as well as how many times.

Unused CSS

Easily find and remove unused CSS rules

SimpleBar

Custom scrollbars made simple, lightweight,easy to use and cross-browser.

StyleURL

StyleURL is the easiest way for developers & designers to collaborate on CSS changes.

CSS Duotone Generator

Create CSS Duotones quickly for free.

coolHue

Coolest handpicked Gradient Hues and Swatches for your next super amazing stuff. coolHue has 60 coolest Gradients. You can also personalize the coolHue Palette as per as your taste.

ModestaCSS

A clean CSS framework made to be dark and responsive.

TermSheets

Create animated terminal presentations. Export as SVG, animated GIF, or HTML+CSS.

Font Memory Game

Recognizing different styles of fonts is one of the most challenging parts of typography. This game helps you train your eyes to notice the smallest details.

September

CSS Scan

Inspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle (neither longhand styles).

Fonty

Fonty is a simple tool for testing web fonts directly on live sites

Hourly Rate Calculator

This calculator for freelancers to use as a guide to costs, billable hours and desired profit.

Picular

Google, but for colors.

PDFShift

Convert HTML to PDF online with PDFShift’s lightning-fast and powerful API.

Grid

Learn all about the properties available in CSS Grid Layout through simple visual examples.

Review Scraper API

An API to use reviews in your apps with no scraping, headless browsers, maintenance or technical overhead required then it’s return a standard JSON format for reviews from 50+ review sites including Amazon, Tripadvisor, Yelp, Capterra, G2 Crowd, Trulia and more.

App Icon Generator

Generate icons and images for mobile apps, android and iOS. No need to upload or download. Works on your browser.

The Node.js Handbook

The Node.js Handbook is a handy resource to learn Node.js. You can browse it online, or download it as PDF, ePub or Mobi.

October

GHuser

GHuster turns your GitHub profile into a beautiful profile page.

Blogmill

Blogmill is a Node.js based dynamic CMS and website creation tool. Influenced by other popular CMS solutions this offers a fast intuitive way to create a CMS for any type of data and a frontend website to consume that data. It is a work in progress so feel free to contribute!

Fileshifter

Fileshifter.io is the easiest way to convert file between different formats. Whether you want to convert images to pdf’s or .mov to .mp4 files, we’ve got you covered. Furthermore, it’s completely free and the file limit is up to 1GB, so don’t hold back!

Trendy Palettes

Curated collection of beautiful hand-made color palettes

ColorBox

Colorbox is a tool to produce color sets open-sourced by Lyft’s design team.

ZeroHeight

zeroheight makes it easy for teams to create design system documentation collaboratively using online styleguides that are synced with Sketch components, integrated with code examples and easy for anyone to contribute to.

LogChimp

LogChimp is a way to keep customers in the loop about your product.

Vapid

Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.

MockCodes

MockCodes is for beginner frontend developer willing to sharpen their HTML+CSS skills by completing handcrafted design mockups in a 30 day challenge. Request early access to real world HTML+CSS challenges specially crafted for you.

November

Accessibility Cheatsheet

Practical approaches to Universal Design for makingyour website/webapp accessible to everyon.

Fancy Border Radius

When you use eight values specifying border-radius in CSS, you can build organic looking shapes.

CSS Layout Cookbook

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

Favicon Checker

Compare your favicons on all major web browsers, including native dark and light modes.

Site Audit

Site audit for your site from terminal.

NoisyCreators

NoisyCreators is a free gallery of dot grid sheets perfect for sketching your idea. You can use them to sketch logo, apps , fonts, websites , icons or just for doodles. Every week new templates will be added. No registration or login. Easy and fast download. Free your creativity.

My Octocat by Github

Take a break from your build and create an Octocat that’s all you, from whisker tip to tail.

CSS Generator

Code generator and visual editor for CSS options.Grab final code as CSS, SASS, SCSS, LESS compatible with all browsers, including browser-prefixes when necessary.

Wave

Wave is a Software as a Service Starter kit. With Wave you can have a fully functional SAAS application in minutes with features such as authentication, billing, invoices, user profiles, user roles, and much more! Wave integrates seamlessly with Stripe or Braintree and is fully documented to help you build the SAAS of your dreams!

Prototype Hand-off by Avocode

Prototype Hand-off by Avocode is a new way to share Sketch, XD, and Figma prototypes with developers. Just import your prototype and invite developers to click between connected screens and hotspots. Once they understand the flow, they can access design specs, assets and code from any artboard of the flow.

December

HelloForms

HelloForms was created to simplify and stream-line contact forms for static websites. Why create a back-end page that has to connect to a mail server, handle file attachments, etc when you can submit your form to your HelloForms link and we handle all of that for you?

Gridsome

Gridsome is a blazing fast Vue-powered static site generator for building websites for any CMS or data source. It uses an internal GraphQL data layer for all data, and can generate thousands of pages in seconds. Gridsome is heavily inspired by Gatsby (A React.js alternative).

BestSnipp

Best place to find your dream codes.

Hue

Hue is a collection of hand-picked colour palettes for inspire your design and make beautiful website and app.

FigmaSCSS

Convert your Figma styles to .SCSS

Renamer

Renamer is a Sketch App Plugin, where you can select multiple layer(s)/group(s)/artboard(s) and rename all of them with just a single click or a quick shortcut.

CSS File Icons

Pure CSS file icons for popular extensions

Share

What’s New for Designers & Developers from 2018: Frameworks & Other Web Resources Edition