19 4 / 2014

Can’t access Pandora radio? Is Spotify blocked since you live in the wrong country? Hola! to the rescue!

This genius solution removes all kinds of geographic restrictions from the popular web services, such as: Netflix, Pandora, Spotify and more.

Click here to download it to your computer or mobile device, either as a software, an application or even as Google Chrome extension!

19 4 / 2014

17 4 / 2014

Messing with your Windows hosts file?
It is a good idea to clear your browser’s DNS host cache right after that so that the updated IP address will become effective:

Type in Chrome’s omnibox (fancy name for address bar):
chrome://net-internals/#dns
and then click on the “Clear host cache" button.

16 4 / 2014

One of the tricks to overcome the same-origin-policy obstacle when you have a page with an iframe inside and each belongs to a different sub-domain, is to modify the document.domain property in both page & iframe, so it’ll point to the same second level domain.

For example, let’s say the main page’s url is sub1.example.com and the iframe’s is sub2.example.com, add the following script in each of these pages:

document.domain = document.location.hostname.split('.').slice(-2).join('.');

Now both page & iframe domain is example.com (with no sub-domain) and you can easily call the window.parent, for example, property from the iframe’s code.

Please notice that this solution works only for pages which belong to the same second level domain.

16 4 / 2014

Use this tool to create and examine cool CSS animations & transitions

14 4 / 2014

Important pro tips to enhance your web app performance

(Source: js-html5)

10 4 / 2014

Unix time-stamp defined as the number of seconds that have elapsed since 00:00:00 Coordinated Universal Time (UTC), Thursday, 1 January 1970 (not counting leap seconds).

Unix time-stamp in JavaScript date format:
new Date();

Unix time-stamp to JavaScript date:
new Date(UNIX_TIMESTAMP * 1000);
For example:
> new Date(1395822600 * 1000); // Wed Mar 26 2014 10:30:00 GMT+0200

JavaScript date to Unix time-stamp:
parseInt(new Date().getTime() / 1000, 10);
For example:
> parseInt(new Date().getTime() / 1000, 10); // 1397136711

10 4 / 2014

Controllers

  • Controllers are the glue between views and models. Most of their logic concerns event management. Keep controllers skinny.
  • Any communication between children and parent controllers should use events (do not pass an instance of the parent around).
  • Should only know about sub controllers.
  • Should be scoped to a single element, and not access or alter other parts of the DOM.
  • Should have a unique class name, and all CSS relevant to this controller should be namespaced by this class name.
  • Should work even if their element is not appended to the DOM tree. This is useful for testing and demonstrating the controller is properly scoped.
  • Should be testable by firing events programatically on their sub elements.
  • Should be able to be re-rendered at any time without adverse effects.
  • Should not use the DOM to store state — keep any view specific state stored as instance properties in the controller.

Views

  • Should be logic less except for flow control and helper functions.
  • Should be passed all the data they need to render directly. It should all be available in the current scope.

Models

  • Should purely be concerned with data, manipulating data and decorating data.
  • Should never access controllers or views.
  • Should never access or return DOM nodes.
  • Should only access or require other models at runtime.
  • Should abstract away XHR connections from the rest of the application.
  • Should contain all data validations.

Routers

  • Should be as logic-less as possible.
  • Should not know about or access the DOM.

Global state

  • Should be kept to a minimum as it arguably violates MVC. You can’t get around it for some things though, like the current user, current view, CSRF token etc.
  • Should never be stored in global variables.
  • Should all be stored in one place (such as a singleton instance of a model).

Modules

  • You should always use a module system, whether it’s CommonJS, AMD, ES6 modules, or something equivalent.
  • Never set or access global variables.

Source: JavaScript MVC Style Guide

10 4 / 2014

A parent element that has only floated content will have a computed height: 0;. Add a clearfix to the parent to force browsers to compute a height.

An example of a clearfix CSS class could be something like this:

.clearfix:before,
.clearfix:after {
  display: table;
  content: “”;
}
.clearfix:after {
  clear: both;
}
Source: WTF, HTML & CSS?

08 4 / 2014

Learn about features available in HTML5 that you can use to improve the accessibility of your websites in this interactive session (code examples/demos).