Posts

[Resources] heatmap.js Dynamic Heatmaps for the Web

This JavaScript library will help you make your 3 dimensional data speak up.

Use heatmap.js v2.0 to add new value to your project, build a business based on it, study and visualize user behaviour, and much more.

Whether you want to have an aggregated overview of your users behaviour, or look at thousands of events distributed on a map…
heatmap.js has all your heatmap visualization needs covered!

Demo: http://www.patrick-wied.at/static/heatmapjs/

Download: http://www.patrick-wied.at/static/heatmapjs/get-heatmap.html

[Resources] Responsive tables

As the Author says: This is an experimental awesome solution for responsive tables with complex data.

Sometimes you like to show large tables with a lot of data, but how is that going to work on your customers tablets or mobile phones ? with these tables you can make the experience a lot better.

Website: http://gergeo.se/RWD-Table-Patterns/#features
Demo: http://gergeo.se/RWD-Table-Patterns/#demo

[Resources] ScrollMagic

ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a progress bar.
It’s the plugin for you, if you want to …

  • … start an animation at a specific scroll position.
  • … synchronize an animation to the scrollbar movement.
  • … pin an element at a specific scroll position (sticky elements).
  • … pin an element for a limited amount of scroll progress (sticky elements).
  • … easily add a parallax effect to your website.
  • … create an inifinitely scrolling page (ajax load of additional content).
  • … call functions when the user hits certain scroll positions or react in any other way to the current scroll position.

Link: http://janpaepke.github.io/ScrollMagic/
Demo: on above site ; examples can be found here: http://janpaepke.github.io/ScrollMagic/examples/index.html

[Resources] Time-saving synchronised browser testing.

When you’re making responsive websites, there’s a lot of tweaking and testing to do. BrowserSync makes your workflow faster by synchronising URLs, interactions and code changes across multiple devices.
It’s wicked-fast and totally free.

Website: http://www.browsersync.io/

Note that this module needs node.js which is currently not available on our shared hosting accounts.

[Resources] Progress bar everywhere

ProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page. You can design your own template for progress bar or customize it simply.
You can use ProgressJs for show the progress of loading contents (Images, videos etc.) on the page to the users. It could be used on all elements including textbox, textarea or even whole body.

It is light-weight, easy to use, easy to customize, totally free and open-source.

Examples can be found here: http://usablica.github.io/progress.js/
Download the script here: https://github.com/usablica/progress.js/releases

[Resources] Stop WordPress Bruteforce Logins

There are many different wordpress plugins, some work locally, some work with a community; if you are looking for a plugin to secure your site against bruteforce (and likely other hack attempts) you can use the BruteProtect plugin.

BruteProtect is a cloud-powered Brute Force attack prevention plugin and the ONLY SECURITY PLUGIN able to guard against botnet attacks.

BruteProtect logs every failed attempt community-wide

When an IP has too many failed attempts in a specific period of time BruteProtect logs and blocks that IP across the entire BruteProtect network (your site included). The more users of BruteProtect the safer we all are from traditional brute force attacks, and distributed brute force attacks that use many different servers and IP addresses

Website: http://bruteprotect.com/

[Resources] WOW.js animate your page when scrolling

WOW.js is a great and easy to implement script for animating your site when visitors scroll down on your site. In fact it is so easy to implement it can be done in seconds !
The only drawback is the poor written English on the website which may turn some people off to use it, but we like to look at the end result, which is great!

Demo: http://mynameismatthieu.com/WOW/
Download: https://github.com/matthieua/WOW

[Resources] Vex – Take control of your dialogs

Take control of your dialogs

Vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You’ll love vex because it’s tiny (6kb minified), has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds.

Features

  • Drop-in replacement for alertconfirm, and prompt
  • Easilly configurable animations which are smooth as butter
  • Tiny footprint (6kb minified) and only depends on jQuery
  • Looks and behaves great on mobile devices
  • Open multiple dialogs at once and close them individually or all at once
  • Built in CSS spinner for asynchronous dialogs
  • AMD support

Deno: http://github.hubspot.com/vex/docs/welcome/
Website: http://github.hubspot.com/vex/

[Resources] Image Lightbox, Responsive and Touch‑friendly

A lightbox only for images, not video, text, and iframes at once.It’s named ImageLightbox.js.

Demo: http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/
Website: http://osvaldas.info/image-lightbox-responsive-touch-friendly

[Resources] modern.IE Interoperability, Browser & Cross Platform

Microsoft has actually a website which may be handy for many web developers to design their pages cross platform, yes we know it is amazing, it is no secret we are not a big fan of their IE browsers but they are still very popular especially in big corporations ; but this site really may help you make your websites better compatible with different browsers hence it deserves a spot on our [Resources] blog.

A few options modern.IE providers on the website:

modern.IE will help you finding virtual machines to check your websites.
test several browsers through BrowserStack.
Run a compatibility check directly from the site with many cool tips and tricks.
Scan for common coding progblems.
Read articles about legacy browser compatibility.

Link: http://www.modern.ie/en-us