Fresh Resource for Web 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.

Fresh Resource for Web Developers – June 2015

Fresh Resource for Web 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.

Fresh Resource for Web Developers – June 2015

Fresh Resource for Web Developers – May 2015

It feels like New Year’s was just yesterday. Nonetheless, we are here now in May and the time has come for us to share new resources with our fellow web developers.

In this round we have some good references worth bookmarking, a tool to help you check for HTML mistakes, a shortcode for composing music notations, a JS library for handling tables responsively, and a responsive grid system.

CanIUse Shortcode

CanIUse is a comprehensive source to track browser support for modern web features. This is a WordPress plugin that displays a CanIUse table for the specified feature using a handy shortcode. Once activated you can add, for example, [ciu-display feature="audio"] to display the results for HTML5 audio element support in a table.

jQuery FileAPI

A jQuery plugin that interacts with the browser API file to handle file uploading, this plugin also includes the ability for image cropping and resizing, and uploading multiple files.

TabellaJS

Building a responsive Table is real tricky. There are a lot of JavaScript libraries and techniques you can use, but each come with its own pitfalls. Tabella is a library that looks promising in the bid to tackle this notorious hurdle in responsive web design.

StickyFill

StickyFill is a polyfill of the new CSS3 sticky position. It perfectly simulates the sticky position behavior, and it also works with many sticky instances.

Basket.js

Basket.js is a JavaScript library used to optimize JavaScript load time. Basket.js will cache JavaScripts in the localStorage hence avoiding unnecessary load in the future. This will also improve the website speed as the scripts are not called from the user but instead fetched from the server.

HTMLHint

HTMLHint is a small web tool to check errors in HTML. The tool will check for naming standards, missing closing tags, accessibility issues, proper use of Doctype, and duplicate ids and ohter issues you may often overlook.

ABC Notation

Are you a musician and running a WordPress-based site? This plugin might be what you have been looking for. Once activated ABC Notation allows you to compose music notations in your post and page using a shortcode.

KSS StyleGuide

KSS Styleguide makes creating a living style guide more convenient. The tool will automate the process and as your website grow with new additions and UI iterations, KSS will update the style guide.

Internet Explorer Status

Internet Explorer is evolving for the better. In the latest version (before Spartan) Internet Explorer has embraced plenty of new web standards. Now you follow the status of upcoming features that are to be released with the next version. It’s a handy reference for web developers aside from CanIUse and Chrome Status.

CSS Flexbox

A collection of anything to do with CSS Flexbox such as tutorials, articles, and cheatsheets. A very useful reference for any developers to bookmark.

Valley

Valley is a collection of OS X folder icons and common third-party generated folders such as Dropbox, Drive, and OneDrive. The folder color is more toned down, which I think is a better decision than what you get with the OS X Yosemite (too vibrant!) folders.

CSS Wizardry Grid

A lightweight yet robust CSS responsive grid system developed by Harry Robert, it is packed with a handful of CSS goodness; it is fully responsive, powered with Sass, structured with BEM methodology, and are reversible grids.

Fresh Resource for Web Developers – May 2015