Fresh Resources for Web Designers and Developers (June 2015)

Can you believe that this series has been running for almost 3 years? In that short a time, we have featured at least 30 lists of the freshest resources for web designers and developers. And we’re going to keep this going with a new compilation for June.

In this compilation, we’ll be looking at a few JavaScript libraries for displaying sliders, smoother scrolling for data tables, a cool elevator effect for a scroll-to-top button, and more.

Let’s check them out.

Medium Style Confirm

Medium has been praised for its design; the layout and the UI seems to have been thought thoroughly. 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

Have you seen that button in a website that lets you slide up to the top of the page? Most buttons just take you to the top, but with Elevator.js, you get a sliding acceleration effect similar to an elevator, the music, and the “Ding!” sound once you’ve reached the top floor. Really nice!

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>

And let the magic begin!

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 JavaScript library that will increase performance when dealing with a lot of data in tables. As you scroll down a table with, say, 5000 in the list, normally the experience will turn laggy and jerky. This JavaScript libraries 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 skill and knowledge on 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 icon to display those characters.

Flickity

Flickity is a JavaScript library to display carousels, galleries, or sliders on your website. It is optimized for touchscreen; 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 in 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) {

}

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 for the team at Jotform to build a WYSIWYG experience for form editing with CSS. Now they have open-sourced it for we all to use. Worth saving, just in case you need it later.