Fresh Resource for Web Developers – October 2014

Being a Web Developer is a really exciting thing. Why? Because there are always new shiny tools to try and play with every month. Whether you’re a developer who likes playing around with CSS or someone who prefers tinkering with Java, there’s always something to get a hold of and it’s hard to keep track.

Well, you’re in luck as we’ve done the work for you. We have searched every corner of the web and put these resources together. And this time we’ve come up with a bunch of goodies for web developers who always deal and struggle with code on a daily basis.

Recommended Reading: Fresh Resources For Designers And Developers – September 2014


Monocle is a tiny JavaScript library that will magnify the item along with the user scroll. This library is created by Hakim El Hattab, the developer who have created a handful of popular libraries like Ladda and Reveal.js.

Inspired by the Flash-based which he once visited, Hakim built the same effect using JavaScript and CSS3, so we can apply it on websites without having to depend on Flash plugin. It’s a really great plugin for a more embellished scrolling experience on your website – take a look at the demo here.

OS X App Icon Template

The new version of OS X, Yosemite, is just around the corner. The OS X Yosemite interface will finally bear some resemblance to iOS 7 with a flatter and more translucent design. So, have you prepared your app to adjust with the the new interface? This is a new PSD template that’s specifically designed to allow you to create new icons of your applications for OS X Yosemite.

As you’re designing an icon, you can see and clearly imagine how your icon will turn out in different sizes and in some corner of OS X like in the Dock, in the Folder, or in the prompt window. If you’re an OS X designer and developer, this is a PSD template that should be ready in your toolbox.


Marka is the Indonesian translation for the word “mark”. It’s a JavaScript library that allows you to create a popular mark, icon, or sign using only a single element of HTML. This library currently brings 36 icons.

You can customize the color and the size of each icon by passing JavaScript parameters or through the CSS stylesheets. The demo shows us how the library nicely shifts from one icon to another, which also constitutes that this is a handy JavaScript if you want to display a flexible and customizable icon on your websites.

jQuery FocusPoint

The general method is that we simply scale the image down to fit in the screen, which could make the image focal point barely noticeable or even missing to some degree. The jQuery FocusPoint, as the name implies, is created to address this notorious problem. The library will smartly crop the image and retain image focus on what matters most.

Markdown Table

Markdown has simplified the way we write on the web. But that’s not the case with writing table. Writing or stucuturing a table has always been a frightful task since its inception.

Fortunately here is the tool that makes it a bit easier to format a table for Markdown. You can easily insert new columns, rows, and put in content too. It will generate the Markdown format that you can easily copy and paste. Also check out our beginner’s guide on Writing Web Content with Markdown.

CSS Gradient Inspector

One of the great inventions in CSS3 is the CSS gradient. But, it is also one with the most complex syntax to write.

If you happen to find an interesting gradient and would like to know how it is made, install this Google Chrome extension named CSS Gradient Inspector. Once installed, it adds a new tab in the DevTools where you can see all the gradient composition as well as the preview.


UiGradient is a website that puts together some of the nicest and harmonious color combinations of gradients. On top of that, you can also copy the CSS code of each gradient.


Runnable is a website where you can post and run code snippets. Unlike JSFiddle of Codepen which only supports JavaScript, HTML, and CSS, Runnable is able to run back-end language too such as SQL, PHP, Ruby, and Bash. This makes Runnable a perfect place for both front-end and back-end developers to share and find useful snippets.

CSS Trashman

CSS is a double edged sword as it’s easy to learn and straightforward to use but it also the hardest language to administer. Over time, as your website and your CSS capabilities grow, you will soon realize that your CSS looks like trash with a lot of duplicates and redundancies.

This is the time where you should re-examine your CSS, and CSS Trashman can help you make this job a bit easier. CSS Trashman will examine both your website’s DOM and CSS together, and generate the optimized possible output. You can opt for a CSS or Sass format output.


ColorSublime is a collection of SublimeText syntax highlighting themes. There you can view how the theme looks before you download it for your usage. There is even a plugin, Colorsublime Plugin, which allows you to apply the themes from the ColorSublime collection seamlessly right into your SublimeText.

Leave a Comment