Fresh Resources for Web Designers and Developers (July 2016)

By Thoriq Firdaus. in Web Design. Updated on September 18, 2022.

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 definitely worth bookmarking for web designers.

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 of characters contained in the element.

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), their impact on security, speed, and user experience.

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.

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.

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 in 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.

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.

TypeTerms

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

Illustration and annotations of typographic 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.

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.

Check out: A Guide to WordPress child themes development

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.

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 native functions. It can be deployed on a regular website or on a Node.js-based application.

GEL Typography

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

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.

CSS Specificity

A collection of illustrations that describe how CSS Specificity works.

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.

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.