In this fifth round of my end of the year round up of SomeWhat Creative’s Monthly HandPicked Goodies for Designers & Developers roundup, In these type of roundups I like to showing 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 would like 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 be also splitting this best of into each month.

January

Yoga

Yoga is a cross-platform layout engine enabling maximum collaboration within your team by implementing an API familiar to many designers and opening it up to developers across different platforms.

Bttn.css

Awesome buttons for awesome projects!

Petal

Petal, a modern, light CSS UI framework developed at Shakr. Based on LESS.

Plumber

Create better looking documents and speed up CSS development by adding vertical rhythm to your page.

BucketBot

If you use Amazon S3 storage to host your or your clients’ files, you know how frustrating it could get to manage these files. The BucketBot Slack Bot simplifies immensely the operations required to upload your files to the cloud and make them available to the Web, harnessing both, the ease of the Slack user interface and the power of Amazon S3.

TinyFaces

Tiny Faces is a free crowd-sourced avatar gallery to use in your personal or commercial projects

Truman Grade – Chrome & Opera Extension

Truman Grade is the easiest way to determine which sites protect your money, privacy, and information.

February

Mockup Generator

Mockup Generator is a macOS app built with AngularJS/Electron that sits in your menu bar allowing you to capture screenshots of your favourite websites and wrap them in device mock-ups.

JotForm4

JotForm 4.0 lets you build forms on any device, so you can create beautiful forms in less time and be more productive.

QuickColor

Quickly apply fills from the global or document color palettes to selected elements

Matterwiki

A simple and beautiful wiki for teams

WebSlides

WebSlides makes HTML presentations easy.Just the essentials and using lovely CSS.

Public APIs

This is an attempt to categorise different APIs scoured from the web which make their resources available for consumption.

Front-End Developer Handbook 2017

This 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 2017.

Graaf

A collection of pure CSS grid overlays for designing

Luxbar

Featherweight, Responsive, CSS Only Navigation bar

Element

Element, a Vue 2.0 based component library for developers, designers and product managers, with a set of design resources.

Color Creator Templates

A set of Photoshop, Sketch and Affinity Designer documents that use base colors to generate larger palettes. It’s a bit like an advanced color picker, in the form of a document.

Bukket – Chrome Extension

The First Ever All-in-One Screenshot, Screen Capture and Recording app! Everything made possible within the browser.

March

Blox

An online marketing tool, designed for small businesses

Spacegrid CSS

A basic, responsive grid layout to help you get started on your next project.

Accessible Color Palette Builder

An Elm-based prototype to help designers build accessible color palettes.

DatoCMS

DatoCMS is a fully customizable administrative area for your static websites. Use your favorite website generator, let your clients publish new content independently, host the site anywhere you like.

Hex Naw

Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility. Plug in your palette or color system and let Hex Naw do the rest.

Docsify

docsify generates your documentation website on the fly. Unlike GitBook, it does not generate static html files. Instead, it smartly loads and parses your Markdown files and displays them as website. All you need to do is create an index.html to start and deploy it on GitHub Pages.

CloudBleedCheck

CloudBleedCheck allows you to check if a domain name is affected by CloudBleed bug.

Lottie

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

Moving to HTTPS

A community site to help site owners migrate to HTTPS with a simple tested process. Allowing you to filter the plan based on multiple platforms (WordPress, Magento, and more), hosting environments (cPanel, Apache, and more) along with the level of control / access you have over the site.

Typographic Email

This is a responsive email template that is optimized for readability.

Propeller

Propeller is a front-end responsive framework based on Google’s Material Design Standards & Bootstrap.

Web Gradients

WebGradients is a free collection of 180 linear gradients that you can use ascontent backdrops in any part of your website.

HTML References

htmlreference.io is a free guide to HTML. It features all elements and attributes.

Speakemoji

emoji you always know. now speakable.

The HTML5 Robot

Let the robot choose what semantic tag is right for your HTML5 element

Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of your web apps.

Website Launch Checklist

Simple Website Launch Checklist

Clean My Forks

A free, helpful tool to clean your old GitHub forks.

Zero SSL

Free SSL Certificates and Free SSL Tools for your website.

CSSPeeper – Chrome Extension – Free

CSS Peeper is a CSS viewer tailored for Designers. Get access to the useful styles with our Chrome extension. Our mission is to let Designers focus on design, and spend as little time as possible digging in a code.

April

Abstract App

Abstract is here to help with the other half of design work: managing changes, documenting the work, and keeping everyone informed. It’s a version controlled workflow, built on Git, and seamlessly integrated with Sketch.

Extension Boilerplate

A foundation for building cross browser extensions for Chrome, Firefox & Opera from a single code base.

Colormind

Colormind is a deep learning AI that knows color theory. It can generate color palettes from scratch, or it can take your input and intelligently fill in the blanks.

Git Showcase

Get noticed with a rockstar Portfolio

Front End Center

Screencasts on the web platform for web professionals. Two episodes every month on browsers, performance, tooling & techniques, you can subscribe for $15 per month.

Formatic

Formatic is the best way to collect feedback so you can make better business decisions. Start surveying in minutes.

adJelly Size Guide 2.0

adJelly’s size guide is a free tool created to help designers, marketers & small business owners get through the mental maze of online ad research.

Ratio Buddy

RatioBuddy is a happy little tool to help you calculate aspect ratios.

Burst

Free photography for entrepreneurs, discover photos to fuel your next project

Slinky

Export your Sketch designs 
as HTML email templates

Waffle Grid System

An easy to use flexbox grid system.

Tent CSS

Tent CSS is unglamorously simple and robust. The framework is designed to be used as a foundation for building websites. Tent leaves application and kitchen sink development to other frameworks.

With zero Javascript dependencies, Tent CSS is as the name says, just CSS (Sass too). So yeah, you’re not going to see fancy components like tab drawers, accordions, and carousels in this framework.

Spectre.css

Spectre.css is a lightweight and responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.

Responsive Font Calulator

Easily generate responsive font values for embedding directly into your stylesheet.

Netlify CMS

An open-source CMS for your Git workflow

May

iotaCSS

Smart open source SASS based OOCSS framework built for scale.

Grid Garden

Grid Garden is a game where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.

RAGrid.css

Flows and rags like text, Works like auto-layout by aligning and distributing, Uses recognizable attributes instead of classes and Capable of 12-column layouts & masonry and it’s tiny.

CSS Grid

CSS Grid simplifies existing layout patterns and adds new possibilities for graphic design.It’s a layout framework without the framework.

Mega Tags

The most complete social media meta tag generator, just plug in your site’s information and generate the most accurate social media meta tags for Twitter, Facebook, Pinterest, LinkedIn, and Google

Huntr

A Kanban board for your job applications

Bootsnote

Boostnote is an open source note-taking app made for programmers just like you.

CSS Grid Cheat Sheet

Your ultimate CSS grid visual guide

Griddy

Learn the CSS Grid.

Haul

Haul is a command line tool for developing React Native apps

Boilrplate

A curate directory of boilerplates to help you start your projects!

Explodal

The Most Explosive Modal on the Web, 97.32% CSS and one tiny line of JS and a wee gif

Load Speed Test

Test load speeds from six locations at one time to ensure your site is working as expected.

Confetti for Sketch

Generate gorgeous confetti patterns in 1 click.

June

Papersize

PaperSizes is a simple, free resource for finding the international standards for paper sizes. In total, papersizes.io lists dimensions of over 250 international paper sizes in mm and inches!

Microtip

A modern, elegant and minimal, css only tooltip library

GitHub Marketplace

GitHub Marketplace Tools to build on and improve your workflow

Swifty Knobs

SwiftyKnob allows you to easily add knobs in your iOS apps. If you are unfamiliar with knobs, they are basically curved progress bars. You can use them to show profile completion, stats or just about anything else!

Mirr.io for Sketch

Mirr.io is a lightweight tool to bring your designs to life — without leaving Sketch.

FontJoy

Generate font combinations with deep learning

Documentation Agency

Documentation Agency writes your product or library documentation.

What email service should I use?

Have you ever wondered what email service you should use? Just answer a handful of questions and we’ll tell you which one is right for you, so you can get started quicker.

Postleaf

Postleaf is a beautifully designed open source blogging platform built for the modern publisher.

SVGito

SVGito is a little web app for optimizing SVG graphics. Optimizations include cleaning up Sketch’s inside/outside border markup, replacing use elements, and removing useless fill rules. Best when used before other optimizers, like SVGO.”

Twitter Corners

Twitter Corners for your Website

Bot Store

Easily customise and deploy chatbots, or browse the directory for inspiration.

Mixfont

Mixfont is a fun and simple way to discover new fonts that work well together. Start the Generator!

Typefont

Typefont allows you to recognize the font of a text in a photo using a set of algorithms and libraries with the goal to obtain accurate results with the image as only input avoiding other manual processes. This is the only open source project of its kind.

Obnoxious.css

Animations for the strong of heart, and weak of mind.

Pingy CLI

The Simple Frontend Build Tool

Ambiance

Ambiance generates beautiful colour palettes so that you use them* on that awesome Illustration, on that really fancy and modern User Interface or just stare at them in peace.

Typography Handbook

A concise, referential guide on best web typographic practices.

Style Guide Guide

A boilerplate for creating superb style guides

July

Avoidting

Avoid meetings by appearing busy. Fill your agenda with random meetings so you look unavailable and can get some real work done.

Cloudflare Apps

Powerful tools built by world-class developers, delivered by Cloudflare, easily added to your website.

Rebass

Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

Free, Fee or Flee?

Sometimes it’s hard to tell whether a project is worth doing or if a client is just taking advantage of your eagerness to work. So RGD has created this tool to help you decide whether to work for FREE, charge a FEE or save yourself some pain and FLEE – with suggestions for what to say if you choose to walk (or run) away.

Site Relic

Test how fast your website is on Mobile & Desktop.

Web Launch Checklist

A simple website launch checklist to keep track of the most important enrichment possibilities for a website.

CoolHue

Coolest handpicked Gradient Hues for your next super amazing stuff.

repropCSS

A CSS reprocessor using <style> tags

React Native UI Kitten

Mobile framework with easily customisable elements

Matte Mockups

Free collection of CSS3 phones & tablets mockups. Place GIF, Video or any custom markup inside a minimalistic device and get cool presentation of your project.

Data Gif Maker

Google’s new project allows you to create an easy gif comparing two elements by filling out a simple form.

Bojler

Bojler is an email boilerplate and a guideline for writing HTML code that will render correctly across each of the most popular email clients.

Spellbook of Modern Web Dev

A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development

MetaMask – Chrome Extension

MetaMask is an extension for accessing Ethereum enabled distributed applications, or “Dapps” in your normal Chrome browser!

August

GatsbyJS

Blazing-fast static site generator for React

Loaders.css

Delightful and performance-focused pure css loading animations.

Wireframe

Minimal wire framing.

InvoiceTemplate

Create beautiful invoices in seconds

API List

A Collective List Of APIs. Build Something.

Slate

Slate helps you create beautiful, intelligent, responsive API documentation.

Shoelace

Shoelace.css is a starter kit, not a framework. Think of it as a CSS reset sprinkled with helpful components. Bootstrap users will find it familiar, yet refreshing.

GraphCMS

GraphCMS is a GraphQL Based Headless Content Management SystemIt lets you build a hosted GraphQL backend for your apps and gives you all the tools you need to manage your content, prcing is from $0 to $349 per month (depending on what features/options you want)

Fractures

fractures helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.

Storybook

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

FontDrop

FontDrop is a new kind of productivity tool for professionals who use typography to create design material in any kind of graphical editing tool: Photoshop, Illustrator, InDesign.

Chain

Dynamic color relations in Sketch.

September

Icondrop

Enhance your designs with high-quality icons from iconscout.

Map Generator 2.0 – Sketch App Plugin

Map Generator better than ever! Just design beautiful map interfaces, mobile applications and more in less time with Map Generator 2.0. Now powered by Google and Mapbox.

Logo Rank

Logo Rank is an AI system that understands logo design. It’s trained on a million+ logo images to give you tips and ideas. It can also be used to see if your designer took inspiration from stock icons.

Vivfy

Vivify is free CSS animation library.

TurretCSS

Turret is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.

Baseline Type

Baseline Type is a resource for anyone looking to easily improve the typography on their website.

Web Development & Beyond eBook

This eBook is a definitive guide on how to become a web developer and successful freelancer

Learn Code The Hard Way

Learn Code The Hard Way courses are the most effective system for learning the basics of computer programming, designed specifically for complete beginners. The courses have helped millions of people a year just like you, from all over the world, from all different age groups and skill levels.

WhatRuns – Browser Extension

WhatRuns is a new but advanced browser extension that helps you identify web technologies used on any website. Our proprietary pattern recognition algorithm efficiently detects even the latest web technologies and plugins used on websites.

October

EveryPixel

Stock image search engine powered by AI.

Pictogon

Pictogon is the fastest and easiest way to create image maps. Making static images interactive can greatly improve the user experience of any website.

Stripe Elements

Stripe Elements are rich, pre-built UI components that help you create your own pixel-perfect checkout flows across desktop and mobile.

src2png

Turn your source code into beautiful syntax-highlighted images. Great for presentations.

Frames for Sketch

Create awesome websites & apps using powerful design system.

Alembic for Sketch

A Sketch plugin that extracts a color palette from any layer that contains bitmap data.

TypeStrap

TypeStrap is for those who want more control over their typography. It’s a CSS based type kit using the principles of Modular Scale and built on Bootstrap 4.

Micro

a modern and intuitive terminal-based text editor

Khroma

The AI color tool for designers where you can discover, search, & save color combinations you’ll love.

Brand Identity Guide

This brand identity design checklist is designed to take you through the necessary steps to build a total branding package for a company.

Visual Inspector – Chrome Extension

Chrome extension for designers to make temporary edit in websites without coding

November

Sketch Syntax Higlighter

Automatically highlight the syntax of any code snippet, right within Sketch.

Fontisto

Fontisto gives you scalable vector icons that can instantly be customized: size, color, drop shadow and anything that can be done with the power of CSS.

HEML

HEML is an open source markup language for building responsive email. It gives you the native power of HTML without having to deal with all of the email quirks. HEML makes building emails as easy as building websites.

Assets

A place to upload, organize and share your logos, images and other brand assets.

Let’s Enhance

Let’s Enhance uses machine learning to enhance low resolution JPEG images, boosting resolution 4x times

GitHub Community Forum

The open source community proves that when creative people get together on an open platform, great things happen: Code gets better, new technologies emerge, and the way we build software changes. Now there’s a new way to connect with developers around the world. Join the GitHub Community Forum to ask questions, swap stories, and share ideas!

Balloon.css

Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.

Shortcuts.Design

Shortcuts.design is a small website that lists every shortcut a designer ever wants to know, all designapps in one place and in a simple and clear way. It’s very usefull for beginning designers to quickly charge their workflow, when you switched to a new designtool or when you just want a reference for repeating actions!

December

PiTunnel

PiTunnel is a service for remotely accessing your Raspberry Pi, and the projects that you build on it. All you need is a network connection and PiTunnel does the rest. Device Monitor and Remote Terminal tunnels are enabled by default, and you can also create your own custom tunnels to access services running on your Raspberry Pi.

DesignEvo

DesignEvo is a free online logo maker with 3000+ templates that anyone can use to create a unique logo in minutes.

Realize

Enhance your workflow by automating the most common tasks and using the best performing Golang live reloading.

Designercize

Random prompt generator for whiteboard design practice.

Novi

Novi Builder is an intuitive and feature-rich drag-and-drop HTML builder, which includes the features and extensions that allow both end-users and web design experts to feel the ease of importing any HTML websites, creating multiple pages, editing design blocks, working with the presets, exporting and publishing of websites on the servers, etc.

Cloudinary Video Player for Developers

An open source project based on the popular VideoJS player framework. The player can be initiated with a single line of code. It supports video transcoding and manipulation, HLS & MPEG-DASH adaptive bitrate streaming, customizable themes, recommended videos, playlist creation, user engagement tracking, Google Analytics integration and more.

Tapwater

Tapwater creates a timeline for a project as it progresses. By including only the most important information in a linear, easy-to-follow flow, you and your team can effectively keep track of deliverables, milestones, and most importantly, the future.

Typography Scanner

typoscan is a designer tool which can help you to scan typography of your favorite website

Overtime

Easy time-overlap tables for remote teams.

The Design Directory

An growing directory ofdesigners & studios producingamazing stuff.

SketchCleaner

Sketch plugin that helps you get your design files as clean as a whistle.

Versioning for Photoshop & Illustrator

Versioning for Photoshop & Illustrator, Sync your design files and see how they evolve over time

Share

The Best HandPicked Goodies for Designers & Developers from 2017: CSS, Frameworks & Other Web Resources Edition