As every designer or developer knows, anything that can save you just a little bit of time everyday is truly priceless. So, what we have for you today will delight you. We have 50 fantastic resources and tools for developers and designers that have all been released this year and have one common goal: To in one way or another offer a time-saving solution to many of the modern design and development issues you may have.
Tools that will help save you time? You can’t beat that can you!
The post has been split into into the following categories: CSS & HTML Tools, CSS, HTML & PHP Frameworks, Javascript Tools, Javascript Frameworks and finally Web Based Apps.
Something worth noting about this post is that it doesn’t include any jQuery resources. If you are looking for jQuery specific resources, you should check out last months 30 New jQuery Plugins Worth Taking a Look At.
Resources and Tools for Developers and Designers
CSS & HTML Tools
CSS Trashman
CSS Trashman will automatically refactor your CSS and generate a new stylesheet for your site. It works by examining your site's live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the pixel.
Prepros
Prepros is a web based app that will compile Less, Sass, Scss, Compass, Coffeescript, Stylus, Jade, Slim, Markdown and Haml files with live browser refresh.
CSS Modal
CSS Modal is built out of pure CSS and they work on all screen sizes from a small mobile phone up to high resolution screens.
piCSSel-art
piCSSel-art is a drawing app to draw pixel art and get it in CSS.
Preboot
Preboot is a comprehensive and flexible collection of LESS utilities.
Diagnosticss
Diagnostic CSS stylesheet that helps visually detect any potentially invalid, inaccessible or erroneous HTML markup.
Markdown.css
Markdown.css is a web based tool for making regular HTML look like plain-text Markdown.
Popline
Popline is a HTML5 Rich-Text-Editor toolbar that will float around the selected text.
Validatr – Cross Browser HTML5 Form Validation
Glue
Glue is a handy command line tool for generating CSS sprites.
CSS Embed
CSSEmbed is a small tool to automate embedding data URIs in CSS files.
LESS Prefixer
LESS Prefixer is a set of LESS mixins that let you use vendor-prefixed CSS properties without the prefixes. It uses some simple conventions and gets out of the way so you can use the CSS you already know, but with less typing.
csscss -A CSS Redundancy Analyze
csscss is a Ruby gem that will parse any CSS file and tell you which rulesets have duplicated declarations. To learn how to use cssscss, click here.
Helium CSS – JS Tool To Scan Your Site and Show Unused CSS
Helium is a tool for finding unused CSS across many pages on a web site. Helium takes a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. It will then generate a report with details of each stylesheet and the selectors that were not found to be used on any of the given pages.
CSSO – Structural Optimization of CSS Files
As well as being a CSS minimizer, CSSO also can perform structural optimization of CSS files, resulting in a much smaller file size compared to other minifiers. It will merge blocks with identical selectors and properties, remove overridden properties, remove duplicate selectors, partially merge blocks, remove empty rulesets and will also minimize margin and padding properties
CSS Frameworks
Cascade Framework
Responsable Framework
Responsable is a clean responsive grid system with a typographic baseline powered by LESS/SCSS and based on Semantic.gs.
Mueller Grid System
MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass.
Pure
From Yahoo!, Pure is a set of small, responsive CSS modules that you can use in every web project.
PocketGrid
PocketGrid is a lightweight pure CSS resposnive grid system allowing for an unlimited number of columns and breakpoints.
Kraken
Kraken is a lightweight, mobile-first boilerplate for front-end web developers. It includes just the essentials: A CSS reset to ensure cross-browser compatibility; A responsive, mobile-first grid; A well-designed, fluid typographic scale; CSS3 buttons; Basic form styling; Optional add-ons for more functionality.
.Fitgrid
Mosto Framework for Forms
Mosto is a framework for building forms using minimal markup and implicit label association.
Mosto Framework for FormsGitHub
GroundworkCSS
GroundworkCSS is a fully responsive HTML5, CSS and Javascript toolkit to rapidly prototype and build accessible web apps that work on virtually any device.
Typeplate
Typeplate is a typographic starter kit that doesn't make aesthetic design choices, but defines proper markup with extensible styling for common typographic patterns.
Topcoat – CSS for Clean & Fast Web Apps
Javascript Tools
JSHint
JSHint is a tool for detecting errors in JavaScript code and enforce your team's coding conventions.
Flatdoc
Flatdoc is a small JavaScript file that fetches Markdown files and renders them as full pages.
svg.js
svg.js is a lightweight library for manipulating and animating SVG with no dependencies and aims to be as small as possible.
Midway.js
Midway.js makes it super easy to automatically center the responsive elements on your websites.
WideArea
Widearea is a lightweight JavaScript/CSS library to create an expandable textarea and to write large volumes of text easily.
gif.js
gif.js is a JavaScript GIF encoder that runs in your browser that uses typed arrays and web workers to render each frame in the background.
instano.js
instano.js allows you to instantly detect if JavaScript is disabled after the page is loaded. It modifies the standard <noscript> tags so that the messages inside can be shown immediately whenever JS is disabled.
Countable.js
Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element.
Packery
Packery is a JavaScript layout library that uses a bin-packing algorithm. In other words it fills all empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.
highlight.js
Highlight.js highlights syntax in code examples on any web page. It will automatically detect a language and highlight it.
Intern
Intern is a complete test stack for JavaScript designed to help you write and run consistent, high-quality test cases for your JavaScript libraries and applications.
Chart.js
Simple HTML5 Charts using the canvas element.
Draggabilly
Intro.js
Headtrackr
headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard.
Javascript Frameworks
React
React is a JavaScript library from Facebook for building user interfaces.
Pedestal
Pedestal is a web application framework written in Clojure that aims to bring both the language and its principles to client and server-side development.
Helios
Helios is an open-source framework that provides essential backend services for iOS apps allowing developers to get a client-server app up-and-running in just a few minutes.
RoughDraft.js
Quickly create and prototype a full interactive HTML mock-up without duplicating markup, server-side loops/code, or having to source fake content (lorem ipsum text/images).
Hopscotch
Hopscotch is framework for making it easy to add product tours to web pages.
Web Based Apps
Markdown Editor
Red Pen
Red Pen lets you upload your design, share a short URL, and get live, annotated feedback super-fast.
CodeMirror
CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.
Light Table IDE
Light Table is a new interactive IDE that lets you modify running programs and embed anything from websites to games.
Fake Images Please?
Fakeimg.pl is a tool that will generate an images with an URL. You can choose the size, the colors, and the text.
PlaceIMG
Reference Resources
Screen Sizes
Screen Sizes helps you quickly find the screen specifications of the most popular devices and monitors currently on the market.
The iOS Design Cheat Sheet
This resource teaches the CSS fundamentals that are used in any website's layout.
Learn CSS Layout
jQuery Learning Center
Browserhacks
Browserhacks is an extensive list of browser specific CSS and JavaScript hacks.
Superhero.js
Superhero.js is a collection of the best articles we've found on the topic.
0 yorum:
Yorum Gönder