front end

Shuffle, Sort, Reverse and Unique Lines in Sublime Text

Standard

This tip isn’t a show stopper, but you are bound to find this useful. It has to do with working with multiple lines of data or code. To test these three out, give yourself a few lines of code and select them all at once.

dog.jpg
cat.jpg
mouse.jpg
cat.jpg

First we have Shuffle, which does exactly that, shuffling them into a random order.

Then we have Sort, which will alphabetize your lines.

Next we have Reverse which swaps the previously sorted lines, or just flips any code in the reverse order.

Finally, we have Unique which removes any duplicate lines of code – helpful for when working with image datasets that could contain duplicate images.

All of these commands are available via the Command Palette, so select some text and try them out today!

Incrementar valor no Sublime Text com Emmet

Standard

Uma das melhores coisas do Sublime Text é o Emmet. A maioria das pessoas usam para completar o código, mas poucas sabem que serve para um monte de outras coisas.
Uma delas é a capacidade de incrementar valores / decréscimo em CSS 0.1, 1 e 10 – assim como vocês, provavelmente, já fazem no Inspector, FireBug etc.

incementdecrement

How to use nth-child

Standard

There is a CSS selector, really a pseudo-selector, called nth-child.

This pseudo-class matches elements on the basis of their positions within a parent element’s list of child elements. The pseudo-class accepts an argument, N, which can be a keyword, a number, or a number expression of the form an+b.

This example selector will match any paragraph that’s the first child element of its parent element (This is, of course, equivalent to the selector p:first-child):

p:nth-child(1) {
  /*declarations*/
}

Using a formula (an + b).
Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

If you want to specify a color for all p elements whose index is a multiple of 3:

p:nth-child(3n+0) {
    color: SteelBlue;
}

The following example selectors are equivalent, and will match odd-numbered table rows:

tr:nth-child(2n+1) {
  /*declarations*/
}
tr:nth-child(odd) {
  /*declarations*/
}

Select only the first 2 elements

p:nth-child(-n+2) {
    /*declarations*/
}

Select only the last 2 elements

p:nth-child(n+2) {
    /*declarations*/
}

If you want select elements within certain ranges, for an example, elements 4-8.

li:nth-child(n+4):nth-child(-n+8) {
    /*declarations*/
}