Fresh Resources for Web Developers – July 2016

This installment comes with a wide-variety of resources yet again. We have sources to inspire your next landing page design, two ways for coders to dim the effects of a glaring screen, a plugin for building web layouts with drag and drop, a jQuery plugin for sprucing up your date-pickers, and plenty of JavaScript libraries to help out developers.

Also included are resources on HTTP2, typographic terminologies, building accessibility-ready sites, and a search engine for programming language syntax. Let’s check them out.

Landing Folio

Landing folio is a central place where you can find examples of landing page designs. There are hundreds of examples on the site, and you can finetune the list based on their category. This is a definitely worth bookmarking for web designers.

Landing Folio Homepage

Element Queries

A JavaScript that allows you to perform Element Query. Element query is denoted by @element and unlike, @media, @element is aware of numerous conditions beyond “height” and “width”. You can, for example, apply styles based on the number characters contained in the element.

Element Query logo and snippet in the homempage.

HTTP2

HTTP2 is the latest specification of HTTP with significant changes. It promises for better performance and efficient data transfer. In this resource, you can find these changes (in great detail), its impact on security, speed, and user experience.

HTTP2 Rocket Illustration

Elementor

Elementor is a WordPress plugin that allows you to build web layouts with drag-n-drop. With Elementor, you can build a more compelling layout. It is responsive, fully customizable and user-friendly.

Elementor user interface in WordPress admin.

TimeDropper

This plugin is equipped with a few animations that make selecting dates on the web more engaging. In addition, options are available for changing the UI appearance. It is a jQuery plugin for fancier date-pickers.

Illustration of clock mechanic and gears.

SyntaxDB

A search engine to search for programming language syntax. It currently supports a number of languages, including Java, C, Ruby, JavaScript and Python. This could be the ultimate search engine for developers as the database and language support grows.

Syntax DB search form and search suggestion.

Github Dark UI

Github Dark UI is a darker color theme for Github.com. This could be a good alternative color scheme, if you work under dimmed environments or have to stare at the screen for long periods of time.

Github repository page with dark color scheme.

Microlight

Instead of highlighting the code with different colors, as you can see below, Microlight makes the code “glow”. A JavaScript library that highlights code – literally.

A code snippet higlighted with Microlight.

BarbaJS

BarbaJS is a JavaScript library that enables smooth page transition through JavaScript History API / pushState. This plugin comes with Methods, Custom Events, and a handful of APIs to deliver a smoother experience for pages on your website. Here are some examples.

BarbaJS logo.

TypeTerms

Ever wonder what the different between “letter spacing” and “kerning” is? TypeTerms is an interactive presentation where you can learn these confusing typographic terminologies.

Illustartion and annotations of typocgraphic terms.

ButterBean

ButterBean is a new and sophisticated plugin to build Meta Box in WordPress. It is developed following the modern WordPress Customizer API architecture. It makes building this particular WordPress admin UI more elegant.

ButterBean Github repository page

Child Theme Check

A WordPress plugin to check your Child Theme against the parent theme; it will check whether the files the Child Theme relies on are updated.

Child Theme Check UI in WordPress Admin.

CloudFlare UI

CloudFlare UI is a collection UI components built on top of React. Considering React’s popularity is on the rise, there might be a number of similar UI frameworks out there.

CloudFalre Documentation Page

Lerna

Having to manage multiple package and repositories in a large project is unavoidable. This tool allows you to handle this particular situation and eventually streamline your workflow.

A european dragon in Lerna homepage

Chillout

Chillout is a JavaScript library to help reduce CPU usage. It provides a set of functions that can be used in place of JavaScript natives functions. It can be deployed on a regular website or no a Node.js based application.

Windows 10 CPU Usage chart

GEL Typography

GEL Typography is the typographic style guide of BBC. A great resource and inspiration on how you can standardize your typographic styles.

Heading sizes in GEL Typography

MIND Patterns

MIND Patterns is a practical guide to build an accessible e-Commerce website. It provides guides in terms of constructing HTML, using the ARIA label, and composing CSS styles that are user-friendly for users with disabilities.

Mind Patterns Documentation

CSS Specificity

A collection of illustrations that describe how CSS Specificity works.

Illustartions in CSS Specifity Homepage

CSS Dig

A Chrome extension that helps you to optimize CSS. It will scrap your page and provide with the report, the list of used properties like colors.

CSS Dig table report Chrome

Template Stash

A collection of hand-picked templates where you can find a wide range type of templates including HTML5, WordPress, Ghost, Bootstrap and e-Commerce templates.

Template Statsh Homepage
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenEmail