Fresh Resources for Web Designers and Developers (October 2014)

By Thoriq Firdaus. in Web Design. Updated on August 10, 2022.

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

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.

Monocle

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 the 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 to the new interface? This is a new PSD template that’s specifically designed to allow you to create new icons for 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 corners 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

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 on 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 the writing table. Writing or structuring 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

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

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

ColorSublime

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.