April 17, 2014
Realtime Chat with Node.js | Tutorialzine

(Source: inspiremyweb)

12:21am, April 17, 2014  |   URL: http://tmblr.co/Zwu9fo1DF9955
(View comments  
April 17, 2014
Empathy

9-bits:

Matt Gemmell writes beautifully on one of my favorite topics:

Eventually, I began allowing myself to acknowledge what I’d always inwardly known: that there’s no higher purpose than making an emotional connection with another person. That the success of an endeavour isn’t in the broad strokes and metrics – the sales, or downloads, or ratings, or comments or whatever else – but in the myriad individual moments where someone would be briefly touched, or empowered. Ephemeral, unmeasurable, rarely reported. But critical.

12:17am, April 17, 2014  |   URL: http://tmblr.co/Zwu9fo1DF7e_z
(View comments  
February 27, 2014
GoodUI

niccai:

Every UX designer should re-read this every month.

11:44am, February 27, 2014  |   URL: http://tmblr.co/Zwu9fo18f2q67
(View comments  
February 5, 2014
Creating own functions in LESSCSS

One of the places where LESS comes often short, is when one needs to have a mixin which acts as a function.

Mixins usually set the value of a property directly, for example:

.set-left-padding (@padding) {
    padding-left: @padding / @some-other-variable;
}
.set-left-padding(5);

But what if You want to simply calculate the value @padding / @some-other-variable and use it where ever you want? One would wish something like this:

WARNING: IMAGINARY CODE

.calculate-left-padding (@padding) {
    return @padding / @some-other-variable;
}
padding: 0 0 0 .calculate-left-padding(5);

But of course it doesn’t work this way. Here’s how you can get around it:

SOLUTION (work around)

.calculate-left-padding (@padding) {
    @calculated-padding: @padding / @some-other-variable;
}
.calculate-left-padding(5);
padding: 0 0 0 @calculated-padding;

Obviously this solution has some drawbacks,

  • Foremost, the “function” works with a certain protocol, which is setting a variable which needs to be used immediately after. This can only been known by reading the implementation of that mixin since there’s no such a thing as LESSDoc.
  • Secondly, the mixing will define a variable without knowing whether that variable already exists in the scope in which it is going to be used. So if mixing/functions are made available through a less library, the user must make sure not to use any of the variable names which are used in the library’s “functions”.

10:12am, February 5, 2014  |   URL: http://tmblr.co/Zwu9fo16UlGVM
(View comments
Filed under: less css compile 
February 4, 2014
Googling for resignation letter templates

Googling for resignation letter templates

(Source: son-of-pier)

7:15pm, February 4, 2014  |   URL: http://tmblr.co/Zwu9fo16QHnYB
(View comments  
January 29, 2014
display:none vs opacity:0, toggling elements visibility

In webapps, sometimes it’s necessary to show/hide heavy elements upon user’s interaction. A good example is the pull-in menu found on most websites like Facebook:

That toggle needs to happen very very fast. Two solutions exist for doing that, and each one has its own penalty.

display:none

Setting display:none on the toggling element will take the element completely out of the flow when it is hidden.

Pros

It will not cause any paint/relayout time during the time it’s not visible. It is important on heavy pages, for example when toggling a class on body or a major change of this sort, the less elements you have on the page, the faster it will be.

Cons

The moment toggle happens, the styling of all the elements inside will immediately get calculated by the browser, then a complete page relayout happens (since the new element will be inserted in the flow) and finally a complete paint. This fact will have a considerable impact on mobile devices.

opacity: 0;

Using opacity: 0; will simply make your element invisible, but it will still be in the flow and will still emit browser events.

Pros

Once the user has decided to show/hide the element, changing the opacity of your element (assuming you have promoted it to a layer already) will only cause a layer-composition and no paint/re-layout/layout-calculation. Layer-composition is a cheap operation on most devices, it does not consume any CPU or css/script access.

Cons

While the element is hidden (via opacity: 0;), Element will participate in whole #document re-layouts and paints which can be an overhead (window resize, or orientation change will cause a whole document repaint and relayout).

Homework

Check out the jsFiddle bellow and run the two versions while having your chrome dev tools open and record the timeline while the css animation happens. http://jsfiddle.net/ay2x4/

January 24, 2014
Google Chrome quit, quite expectedly.

Google Chrome quit, quite expectedly.

3:40pm, January 24, 2014  |   URL: http://tmblr.co/Zwu9fo15Hg3UP
(View comments
January 21, 2014
touchmove events handling difference between Android Chrome and iOS Safari

touchmove on iOS

Once you have installed a touchmove listener on your element, you will get all the touch events as long as the user moves the finger.

touchmove on android Chrome (at least until version 32)

When user moves the finger on the element, you will get

  • touchstart
  • touchmove (once)
  • touchend

In order to get all the touch events, during the first touchmove, you will need to preventDefault on the event object the first time.


function installListener () {
//IMPORTANT
//this logic assumes one touch. For real life scripting, multi
//touches need to be handled (which is not an edge case)
    var preventNextTouchMove = true;
    element.addEventListener("touchmove", function (evt) {
        if (preventNextTouchMove) {
            preventNextTouchMove = false;
            evt.preventDefault();
        }
        ////////////////////////
        //your touchmove handling code here
        ////////////////////////
    });
    element.addEventListener("touchend", function () {
        preventNextTouchMove = true;
    })
}

January 21, 2014
CSS Isometric by Jordan Habre

css3geometrydaily:

See the Pen CSS Isometric by Jordan Habre (@Jordan) on CodePen

CSS Isometric by Jordan Habre (@Jordan

10:53am, January 21, 2014  |   URL: http://tmblr.co/Zwu9fo14zhi_X
(View comments  
January 20, 2014
whatishtml5:

HTML5 web development is still gaining traction. For 7 examples of apps leveraging HTML5, take a look at this article.

whatishtml5:

HTML5 web development is still gaining traction. For 7 examples of apps leveraging HTML5, take a look at this article.

11:31pm, January 20, 2014  |   URL: http://tmblr.co/Zwu9fo14wNk3E
(View comments  
Liked posts on Tumblr: More liked posts »