Helios Lighting System Infographic

/in /by

 

helios_system_by_gengns

One of my first infographic at IHMAN 🙂

You don’t need jQuery any more!

/in /by

bye-jquery

jQuery used to offer a easy and quick compatible development through all browsers. It avoids dealing with browsers which didn’t support the W3C standard like Internet Explorer. However, nowadays with current updated browsers you don’t need jQuery anymore. Instead of jQuery you should use directly JavaScript.

// jQuery
$(element).html(string);
// JavaScript
element.innerHTML = string;

You can check a great jQuery use comparation with different versions of IE at HubSpot made by Zack Bloom and Adam F Schwartz: YOU MIGHT NOT NEED JQUERY

Anyway, if you still need jQuery (old projects/dependencies) and you want to have a ~5-10k modular library that downloads and executes fast with a familiar and versatile API, you can try Zepto, a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you don’t need to learn Zepto, just change jquery.min.js for zepto.min.js and that’s all.

Do not qualify ID rules with tag names or classes

/in /by

css

If a rule has an ID selector as its key selector, don’t add the tag name to the rule.

Since IDs are unique, adding a tag name would slow down the matching process needlessly.

BAD

/* CSS */
button#backButton {…}

BAD

/* CSS */
.menu-left#newMenuIcon {…}

GOOD

/* CSS */
#backButton {…}

GOOD

/* CSS */
#newMenuIcon {…}

 

Blink and Webkit cannot scale SVG

/in , /by

svg

Chrome cannot scale SVG vertically or horizontally.

For this example we will use:

  • Two HTML Tags for images, one without size and the other with a height equal to double width
  • A div container with a CSS background-image
<!-- HTML -->
<img id="a" src="http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg">

<img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg"width="50px" height="100px">

<div></div>
/* CSS */
#a {
    width: 50px;
    height: 100px;
}

div {
    width: 50px;
    height: 100px;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg);
    background-size: 50px 100px;
}

If you try the same code in Firefox it will work for the 3 cases, you will see a vertical strech for this example with height equal to double width. So, if you want to keep the same behaviour in all browsers, you should change size proportionally. Edit the SVG itself if you wish some width and/or height deformations.

See a real example:

Sort by table content

/in , /by

table

How can you sort any HTML table using jQuery?

Element 40 ✔
Element 2 ✔
Element 29 ✔
Element 28 ✔
Element 5 ✔

Suppose you only want to use the number.

  1. First we must sort elements
  2. After that we have to keep going deleting each element and appending again to the table with the new order
// JS
$("table tr").sort(function (a, b) {
    var a_num = $(a).children(":first-child").text().split(" ")[1];
    var b_num = $(b).children(":first-child").text().split(" ")[1];
    return parseInt(a_num) - parseInt(b_num);
}).each(function(){
    var elem = $(this);
    elem.remove();
    $(elem).appendTo("table > tbody");
});

See a real example:

Edited: improved and without jQuery.