Fresh Resources for Web Designers and Developers (June 2015)
Can you believe this series has been running for almost three years? In that short time, we have featured at least 30 lists of the freshest resources for web designers and developers. We’re continuing this tradition with a new compilation for June.
In this compilation, we’ll look at several JavaScript libraries for displaying sliders, smoother scrolling for data tables, a cool elevator effect for scroll-to-top buttons, and more.
Let’s check them out.
Click Here for More Resources
Check out our complete collection of hand-picked tools for designers and developers.
Medium Style Confirm
Medium has been praised for its design; the layout and UI seem to have been thoroughly thought out. On top of that, it also inspires web developers to develop either JavaScript or CSS libraries to replicate the UI. Medium Style Confirm is one JavaScript library that resembles the pop-up or dialog box in Medium.
Penguin
Penguin is a new front-end framework that you could use as the groundwork of your websites. With tools like Grunt and Sass, you can easily add or remove libraries or CSS that you do not need out of the framework, making it as lightweight as possible. It’s also a good alternative for Bootstrap and Foundation.
Elevator.js
X-Instagram
X-Instagram is a Polymer custom element that pulls and shows images from Instagram by tag. This element makes the whole process a lot easier. We simply add the element just like a regular HTML element and specify the tag keyword as the element attributes.
<x-instagram tag="hipster" count="10"></x-instagram>
CamanJS
CamanJS is a great JavaScript library for image manipulation. It comes with a feature set that you would commonly find in an image editor. You can turn the image blur, black and white, and even increase the contrast.
ClusterizeJS
Clusterize.js is a JavaScript library that will increase performance when dealing with a lot of data in tables. As you scroll down a table with, say, 5000 items in the list, normally the experience will turn laggy and jerky. This JavaScript library will address this issue, making the scrolling action smooth sailing all the way.
Sit the Test
Sit the Test is a collection of questions to evaluate your skills and knowledge of CSS3, HTML5, and JavaScript. Each test is given a number of questions and limited time to complete all these questions. It’s a good source to find out how good we really are with these languages.
HTML Arrows
This is a collection of special native Unicode symbols that you can embed in HTML and CSS. These characters include Arrows, Currency, and Punctuation. You will find that, sometimes, you don’t need font icons to display those characters.
Flickity
Flickity is a JavaScript library to display carousels, galleries, or sliders on your website. It is optimized for touchscreens; you can slide the carousels effortlessly with a finger, or the trackpad if you are on a laptop. It also comes with a bunch of options allowing full customization in any way you like.
Typeslab
Typeslab is a handy tool to create a Slab-type poster. Simply write the content and pick the font, Typeslab will generate the poster instantly. You can then download it or publish it on Imgur.
MatchMedia
Matchmedia is a library that replicates CSS media queries. The library is not that fresh actually, but it is a really useful library that I decided to put on the list. If you need to do scripting based on the user viewport size or media type, this is the library you want.
The following is an example used to run script in a 320px and below viewport size:
if (matchMedia('only screen and (max-width: 320px)').matches) {
// Your code here
}
Sass Burger
Sass Burger comes with a Mixin that allows you to create a “Hamburger” icon and turn it into a cross mark with less hassle.
Marx
Marx is a collection of CSS style rules to make element styles more consistent. It is customizable (with Sass), lightweight, and works out of the box. A good alternative to already popular CSS reset tools like Normalize.css.
CSS.js
CSS.js is used to parse CSS files for style declaration. The library was initially used by the team at Jotform to build a WYSIWYG experience for form editing with CSS. Now they have open-sourced it for us all to use. Worth saving, just in case you need it later.
