For the 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 etc..

Please note that not all Frameworks, CSS, HTML & Other Web Resources that been posted through my monthly handpicked roundups will be included in this post.… so lets start.

January

Poor Man’s Styleguide

The Poor Man’s Styleguide is a pragmatic frontend styleguide. It’s quick-and-dirty, and designed to be copied and pasted into your CMS of choice.

Fabricator

Fabricator is a tool for building website UI toolkits

Colordrop

With Colordrop you can color a website by dragging and dropping a color droplet from a palette.  Just drag any colour from the colour palette (it’s Material Design specific) to a website and color designated areas of it (like sections or texts).

One can drag a colour from the colour palette and drop it on any area that lights up with a blue outline, including text elements.  Once the droplet that you are dragging gets dropped on a content area, a fun little Google Material like animation happens and the whole area gets filled with a coloured circle.

Colorfitler

Colofilter.css lets you easily add duotone filters to photos using CSS. It’s a cool effect, but doesn’t work in every browser, so make sure you don’t use it on anything mission-critical.

Milligram

Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It’s not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.

Appolo

Appolo is a set of plugins and themes for Jekyll to create a static portfolio website for app developers to showcase their work, It’s minimalistic theme and playful animations make it perfect to display the apps you’ve made along with the responsive design looks delightful on desktop or mobile. It also comes with a set of plugins to remove the hassle of formatting your apps pages

February

MJML

MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices.

Commerce.js

Commerce.js Full-stack eCommerce API for developers & designers, where you can rapidly create beautiful eCommerce experiences.

Designer Bio Generator

Generate your next twitter or website bio.

Adsvise

Adsvise is a free tool created to help designers and marketers get through the mental maze of online ad research.

Flexo

Flexo is a grid system based on flex property, and works 100% CSS.

Crab CSS

Crab is a small CSS Framework based on Flexbox

Reindeer.css

Reindeer.css is a lightweight customizable CSS framework for frontend developers.

Takeoff

Takeoff is the landing page template for your mobile apps. Its simple and intuitive layout retains your visitors’ attention, and guide them through your killer features.

Loading Buttons

Loading Buttons are simple, animated buttons that show loading indicators that change to show whether the button action was successful or not.

Structor

Structor is a user interface builder for React. It’s a fast and handy tool for visual construction of UIs from pre-created components, and eliminates routine tasks.

March

Smartmockups

Smartmockups is a brand new online tool for designers, marketers and developers. Smartmockups curated a collection of the best free product mockups you can present your design like a boss!

It’s useful when you need to present your design to a client or just showcase your work in a portfolio. All mockups are ready for both your personal and commercial projects, all you have to do is upload your image and download the final image. Yes, it’s that simple! Enjoy the power of product mockups without opening Photoshop.

PintSize

Pintsize is built with designers in mind. It aims to make building custom responsive CSS grids used in your designs simple and acurate while maintaining a flexible system for developers.

CSSCO

Photographic filters made with CSS

Fansoro

Fansoro is an Open Source, fast and light-weighted file-based Content Management System. That’s Easy to install, upgrade and use. Fansoro provides basic API’s for plugins, themes and core developers! Content in Fansoro is just a simple files written with markdown syntax in pages folder. You simply create markdown files in the pages folder and that becomes a page.

Truck

Truck provides you with the tools for creating amazing Web apps for mobile devices. When you are using themes, these will gives you the native look and feel of Android, iOS and Windows Phone from one code base. This is a true write-once, deploy-everywhere framework.

This tool inspired by the mechanics of trucks, just think of your app like a truck. All trucks share a certain structures: a fuel tank, engine and a body.

Truck has a standalone DOM library called Wheels, which is a light version of jQuery. It gives you 80% of the functionality of jQuery. Functions and properties that were esoteric or rarely used got left out. It accomplishes this in under 1,800 lines of code, compared to jQuery’s 9,000 plus lines of code. What it lacks from jQuery’s API, it makes up for with Models, Mediators, Views, automated data binding, plugins, Promises and Fetch. Truck reduces the amount of code you have to write to get things done.

StringBean

The featherweight responsive of the StringBean CSS Framework been based on a 16-point system, rather than the traditional 12-point system that you see in other frameworks.

Sometimes, 12 is just too few, especially on a high resolution screen, such as 4K – at 4K, there where String Bean comes into its own, it gives the developer the power to divide the screen up in more finite segments providing you with greater control over the widths of content on your site, especially at higher resolutions.

StringBean also has 6 breakpoints, instead of the traditional 4, so you can implement your design with: xsmall, small, medium, large, mega-hd, and mega-uhd.

Codepad

Codepad is a place for developers to share & save code snippets. Join the community!

Cask

Cask is  lightweight grid system, built with calc, Cask lets you create responsive, scalable, grids with calc and Sass.

Gutenberg

Gutenberg is a flexible and simple–to–use web typography starter kit for web designers and developers. It’s a small step towards a better typography on the web. Beautiful typographic styles can be made by setting base type size, line-height (leading) and measure (max-width).
(at the time of posting Gutenberg is a work–in–progress )

ArnoldC

ArnoldC is a programming language based on the one liners of Arnold Schwarzenegger

MocKit 2.0

Beautiful iPhone 6 mockup built with HTML and CSS.

Resizer by Google

Resized is an interactive view that helps designers test material design breakpoints across desktop, mobile and tablet.

Formsubmit

Formsubmit sends all your form submissions to your email without having a need for any coding at all. You don’t even require a backend.

Sketchsheets

Ready to print device templates for UI & UX designers.  All files contain a blank and dotted grid template in .png and .pdf formats.

365cons – A Daily Icon Diary

Every day in 2016, Amy is going to post a new icon, exploring various styles to practice design and technique. Oh, and since it’s a diary, each one will relate to something in my life that day.

Hamburgers

Tasty CSS-animated hamburgers, click (or tap) each one to see it animate.

April

Good Copy

The Front (people behind Good Copy) is to help people communicate better. Usually, it means building the best communication software possible, but today Front are doing something different. They are releasing a collection of emails that we think have great copy called Good Copy, so the everyone can get inspiration for their own communication.You never have too many examples. The approach is really focused on the copy, not the design of the emails.That’s why it’s plain text: easy to search, easy to copy and paste the content and adapt it to your own “style”!

Privacy

Privacy gives you a new card number for every transaction, this protects you from card fraud, data breaches, and identity theft. Privacy is the first payments product that keeps your personal information private. And the best thing is, it’s even easier than using your regular credit card online.

Privacy Visa Cards may be used everywhere Visa debit cards are accepted. Their mission is to build elegant, usable software that protects your privacy and security. You deserve the best. Protect yourself online without sacrificing convenience and ease of use.

Imgix Page Weight Tool

Find out if images are slowing down your web pages. Learn how to take steps to optimise them better.

Colovely

A simple colorful HEX, RGB & HSL generator.

Grd

A CSS grid framework using Flexbox that is simple as it’s provides just 2 base classes Grid and Cell and some modifiers, it’s light-weight being only 512 bytes (Gzipped) and it’s flexible so its asy to use Flexbox features.

Dataproofer

A proofreader for your data, which is currently in beta… Every day, more and more data is created. Journalists, analysts, and data visualizers turn that data into stories and insights.But before you can make use of any data, you need to know if it’s reliable. Is it weird? Is it clean? Can I use it to write or make a viz?

This used to be a long manual process, using valuable time and introducing the possibility for human error. People can’t always spot every mistake every time, no matter how hard they try. Data proofer is built to automate this process of checking a dataset for errors or potential mistakes.

OpenBazaar

OpenBazaar is a different way to do online commerce. Instead of visiting a website, you download and install a program on your computer that directly connects you to other people looking to buy and sell goods and services with you.

This peer to peer network isn’t controlled by any company or organization – it’s a community of people who want to engage in trade directly with each other. OpenBazaar is an open source project to create a decentralized network for peer to peer commerce online using Bitcoin that has no fees and no restrictions.

Lifejacket

lifejacket is an open source, extremely lightweight CMS / website building platform for web designers and developers who wanting to fill the gap between static html websites that require FTP access and direct code editing and a full fledged CMS platform such as WordPress or Drupal.

Site creators can easily create sites, editing the HTML and CSS, leveraging front end frameworks, javascript, PHP, and other technologies as needed – while giving their client the ability to update select portions of content via an admin console, without the fear of breaking layouts or other code.

Browser.html

Browser.html is a research project aimed at building an experimental Servo browser in HTML.

UIDB

Search for Specific examples of UI from around the web.

May

MaintainableCSS

Write CSS without worrying that overzealous, pre-existing styles will cause problems. MaintainableCSS is an approach to writing modular, scalable and of course, maintainable CSS.

UTM Builder

UTM Builder is a free online tool that makes it simple to tag URLs with only a few questions about its placement.

StarWarsIntro.css

Star Wars Intro is a small CSS Library to build your own Star Wars-esk intro. You can use it for a movie marathon you’re hosting, a browser game intro, a fan site, or pretty much anything else.

RichCSS

RichCSS is a new CSS framework providing default structures for reusable css elements. Its built around an Architectural Style that organises your code in a way that allows reusability of your css, versioning, the use of css plugins and the ease of using it.

RichCSS is bringing convention and organization to CSS that anyone can understand and use.

Microsoft Bot Framework

Build and connect intelligent bots to interact with your users naturally wherever they are, from text/sms to Skype, Slack, Office 365 mail and other popular services.

Flexbox Grid

Flexbox Grid is a grid system that based on the flex display property.

Styleguide

Devbridge Styleguide helps you create, share, and automate a living visual style library of your brand. Share your digital brand standards, improve team collaboration, and implement an independent easily-extendable modular structure.

Wall Script 8

Wall Script is a social network software, built with PHP, jQuery, RESTful, Oembed, PDO and OAuth. This helps you to understand social networking concepts, and to build your own social network website.

It’s lightweight and powerful, with its secure(token based APIs) and a easy way to understand the concepts, plus it comes with a responsive and user friendly interface.

Carrd

Carrd is a simple, free and fully responsive one-page sites for pretty much anything.

Fontea

700 Google fonts in your Photoshop ( PS 2014/2015 only). Source are not breaking native experience. It’s a part of Photoshop, it’s a plugin.

Icon Font Sketch Plugin

This plugin helps you easily insert and manage icons from icon fonts – such as FontAwesome, Ion or Material Design Icons – in your Sketch designs.

Sketch Runner

Runner helps you to get around Sketch quicker by giving you an intuitive interface to supercharge your daily workflow. Stop searching through your menu & start running commands directly from your keyboard.

June

Think With Google – Test Your Site

Test how mobile-friendly your site is.

CSS Purge

Saving the web 1kb at a time.

Family.SCSS

Family.scss is a set of 24 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way.

Flex Layout Attribute

Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — ‘layout’ and ‘self’.

HyperDev

HyperDev is the developer playground for building full-stack web apps, fast  Combining automated deployment, instant hosting and collaborative editing, HyperDev gets you straight to coding.  You just code. It just runs.

A-Frame

A-Frame is a open-source framework for creating 3D and virtual reality experiences on the web.

Vital

Vital is a minimally invasive CSS framework for modern web applications. Vital is a reverse approach to “everything and the kitchen sink” CSS frameworks.

SyntaxDB

SyntaxDB allows users to quickly look up syntax for programming languages. SyntaxDB is designed for programmers who often need to do a Google search for their syntax needs.

Placeholders.Pics

The lightest way to include placeholder pictures in your designs. All images are lovingly served up as sub-kilobyte, fully optimised Scalable Vector Graphics (SVG) in any size or color you need. You can even add a short label to keep track of what goes where in your designs and mockups.

Wait! Animate

WAIT! Animate provides an easy way to calculate the keyframe percentages so that you can insert a delay between each animation iteration. Below are some example animations to demonstrate how this is achieved. Below that is a config tool to add waits to your own animations without the need for JavaScript.

Cutestrap

Cutestrap is a sassy, opinionated CSS Framework which is a tiny alternative to Bootstrap.

Cutestrap supports vertical rhythm, consistent pattern for form fields, it’s 8kb minified with smart defaults for all default elements (Conventional), CSS specificity is very low in the class hierarchy (which is Configurable), it’s a solid foundation for a living styleguide using KSS.

Simple Grid

Simple Grid is a 12-column, lightweight CSS grid to help you quickly build responsive websites. Download the CSS stylesheet, add the appropriate classes to your markup, and you’re off to the races. It’s that simple.

Each column is contained within rows, which are contained within a container. The container is set to a maximum width of 960px, but you can edit without having to break anything.

Font Face Observer

Font Face Observer is a fast and simple web font loader. You can use it to load fonts and customise your browser’s font loading behaviour.

Atomic Docs

Atomic Docs is a front end style guide generator and SASS component manager. Atomic Docs is built in PHP and SASS. Inspired by Brad Frost’s Atomic Design principles.

BlazeCSS

Blaze_CSS is a open source modular CSS framework providing great structure for building websites quickly. Blaze fills the gap between monolithic frameworks like Bootstrap, UIKit and Semantic, and “micro” ones such as Skeleton, Milligram and Min.

July

Mega Boilerplate

Mega Boilerplate is a starter project generator that focuses on simplicity and ease of use, while providing you with flexibility of choices. It was inspired by the Hackathon Starter, but unlike it, you can customise any part of your application stack, from web framework and database to CSS preprocessor and client-side JavaScript framework.

Currently, generators are primarily limited to Node.js web apps, but it will expand support for other platforms and languages in the near future.

Astrum

Astrum is a lightweight pattern library designed to be included with any web project.  It’s non-opinionated and doesn’t expect you to write your markup or code in any particular way.

Wing

Wing is a minimal CSS Framework that provides a base of styles, and you don’t even need to learn a gazillion class names, all of your elements will be styled automatically. Not to mention, that unlike Bootstrap or other popular Frameworks, Wing is only 4kb minified.

Tootik

Tootik is a pure CSS Tooltip library. It looks great on all modern browsers, easy peasy to use.

ThimbleCSS

A nimble CSS framework built with Flex Box for the modern web. As this framework been built with Flex box you can use unlimited columns, center anything, stretch columns or re-order your content.

Type Anything

Type Anything lets you customise the most necessary font settings for your next project. From font families and letter spacing to font weights.

Pills

Pills is a simple, responsive, and tiny CSS grid for humans. It’s 4kb, Mobile First Grid System, HTML5 Boilerplate Head, Inspired by Simplicity and Control, It’s IE8+, Firefox, Chrome, Safari, Opera friendly, plus it’s free to use and abuse.

Legacy

A tool to make your design life easier. Built for Designers.

Type Terms

Type Terms is the animated typographic cheat sheet. If you are new to typography or you wanting  to refresh your memory, then Type Terms is the perfect tool for you.

Refind

Refind is the home for the best links on the web.Save and discover what matters most to you.

Ghostbot

The Burner text-messaging bot that helps you ghost away from fleeting relationships — without the emotional baggage.

WrenchMode

Maintenance Happens, this app will help make it seamless for you & your users.

Forestry

A simple CMS for Jekyll and Hugo sites, it’s been built for devs who hate bloat

August

ChromeLens

ChromeLens is a set of developer tools that allow developers to code websites better suited for the visually impaired.

Website Downloader

Download all the HTML source code and assets of any website.

Responsive HTML Email

Responsive HTML Email Templates

Sharing Buttons

Super fast and easy Social Media Sharing Buttons. no JavaScript and no tracking.

ColorCubo

ColorCubo is a new colour palette manager that is quick, simple & easy!

The Security Checklist

A practical security guide for web developers

FormBucket

Groovy Form Handling and Automation for Static Sites

Modulr

A fast and modular approach to building powerful web and mobile interfaces.

PerfTool

Collect information about your website and display it in an easy-to-digest manner.

GitHub Repository Size

Automatically adds repository size to GitHub’s repository summary.

Macgyver

API Marketplace for Developers by Developers

Type Nugget

Type Nugget is an online typesetting tool that gives you fine control over a robust base for hella fine web type, all via a pleasant user interface.

Winstrap

The Bootstrap theme for Microsoft design language

September

AccessURL – Chrome Extension – Free

Share accounts without giving away your password

Wing

A minimal CSS framework, thats provides a base of styles, and you don’t even need to learn a gazillion class names, all of your elements will be styled automatically. Not to mention, that unlike Bootstrap or other popular Frameworks, Wing is only 4kb minified.

Minireset.css

minireset.css is a tiny modern CSS reset

Radiobox CSS

Tiny set of CSS3 animations meant for your radio inputs.

Concise Framework

Concise CSS, a framework written in SASS that’s lightweight and easy-to-use.

Iceberg

Iceberg is a front end boilrplate that helps you to start your web projects.

October

Inbox When Ready for Gmail – Chrome Extension

A extension that hides your Gmail inbox by default, so you can search your archive or compose messages without getting distracted.

Sharechat

Sharechat is a free file sharing with chat and storage.

Shutterstock Photoshop Plugin

Access Shutterstock’s 100mm+ stock images inside Photoshop

SpinThatShit

SpinThatShit is a set of SCSS mixins for single element loaders and spinners

Shopify for iOS & Android

Run your entire Shopify store right from your phone

Mail.WTF

Disposable Anonymous Email

cssFilters

A visual tool to create custom and instagram like photo filters in css.

Yellow Lab Tools

Online test to help speeding up heavy web pages

Text Spinners

Pure text, CSS only, font independent1, inline loading indicators

Leaflet

an open-source JavaScript libraryfor mobile-friendly interactive maps

Wenk

Wenk is a Lightweight tooltip available in pure CSS, cssnext using PostCSS, Less or SCSS.

WYSIWYG CSS

Style your TinyMCE or Markdown generated content with a single CSS class

Open Color

Open color is a color scheme for UI design. You can use it for font, background, border etc.

Mini.css

mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework

Flynn

Flynn is a platform for hosting and running your applications, databases, websites, and services at scale. It creates running applications directly from your code, connects all of your microservices, and more.

Jpeg

Convert any major image format into a highly optimized JPEG

November

Bad Ad Johnny – Chrome Extentsion – Free

The only ad-blocker with a personality that lives up to its promise of protecting you against ads, malware, and spyware, all without being a sellout! COMMIT TO THE CAUSE Add To Chrome For Free

Bootstrap 4 Cheat Sheet & Classes List Reference

The Bootstrap 4 Cheat Sheet helps you find documentation for common CSS classes, components, and grids. Use the sortable table below and be sure to download the free 12-page PDF cheat sheet. Download Cheat Sheet

Templates by EmailOctopus

Nine great templates, all for free, from EmailOctopus, their know that creating HTML emails is hard. The tables, the confusing client support, the inline CSS. So they giving away three beautiful email packs, completely free.

Choo

A 5kb framework for creating sturdy frontend applications

The SaaS CTO Security Checklist

This is a basic checklist that all SaaS CTOs (and anyone else) can use to harden their security. Security shouldn’t feel like a chore. Select your startup stage and use these rules to improve your security. This list is far from exhaustive, incomplete by nature since the security you need depends on your assets.

The App Launch Checklist

The App Launch Checklist Actionable insights on how to successfully launch and grow your app.

Vue Material

Vue Material is lightweight framework built exactly according to the Material Design specs. Build powerful and well-designed web apps that can can fit on every screen.

ARC

ARC is a React starter kit based on the Atomic Design methodology. It’s progressive, which means that you can start with the basic boilerplate and try the other features when you are comfortable.

December

Accessiblity Guidelines

Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project.

Cyclotron

Cyclotron is a platform for creating and hosting dashboards, independent of any single data source. It’s a batteries-included solution for loading and visualizing data without programming. It’s the CMS of dashboarding.

Ant Design

Ant Design React is dedicated to providing a good development experience for programmers.

Formbase

Better default styles for common input elements.

CSSPIN

CSS Spinners and Loaders are Modular, Customisable and Single HTML Element Code

CSS Reference

cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

Radar

Modern tools to help you beat fraud, fully integrated with your payments.

Fictoan

Fictoan is an intuitive, minimalist, responsive HTML+CSS boilerplate.  Fictoan uses straightforward, self-explanatory and intuitive class names. No cols, spans, MDs, LGs and such.  This is mainly for newbies just starting to learn code(moi), but are put off by complex systems like Bootstrap or Foundation.

Eve

Eve is a programming language and IDE based on years of research into building a human-first programming platform. From code embedded in documents to a language without order, it presents an alternative take on what programming could be – one that focuses on us instead of the machine.

Funcssion

funcssion is a set of really simple CSS classes, with a single purpose, inspired by the philosophy behind pure functions.

Font Style Matcher

If you’re using a web font, you’re bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you’ve chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.

Blueprint

Blueprint is a collection of React UI components that cover the majority of the common interface elements, patterns, and interactions on the web. Using Blueprint ensures that you’ll end up with an elegant and easy-to-use UI, freeing you to focus on building your product—not the atomic pieces that comprise it.

Gitmoji

An emoji guide for your commit messages

StockJo

StockJo is a collection of free stock Photography,Textures,Video,Mockups,Fonts ,Audio,Vectors and Graphics,Colours,Tools,Softwares,Web Resources & HTML Templates

Copio

Copio is copying and pasting layers finally comes to Photoshop

Alter

Turn text into an image.

Write.as

Write.as is built for productivity. It’s simple enough for you to concentrate on your thoughts, and powerful enough to support the most prolific writer.

McGriddle

A Sass library designed to help you build based on a grid system.

Mention

Mention is clean and minimalistic theme with few nice features, scroll indicator and reading time.

Free Icon Design Guide Book

Want to create your first icon set, but have no idea where to start? Or maybe you just want to earn some money on the side by selling stock icons? Or do you shoot for the stars and plan to kickstart your career as an icon designer specializing in custom icons? This icon design guide that will answer all the questions you might have.

The Sketch Handbook

The Sketch Handbook will guide you through every aspect of Sketch in 12 jam-packed chapters