will-change new property, to increase the speed of an animation boot

Property to increase the speed boot of an animation:
$(“#element”).css(“will-change”, “animation”);
//when the animation has finished:
$(“#element”).css(“will-change”, “auto”);

(Very recommendable to not declare by css in order to delete it once it was used. So add it with JQuery selectors and methods.)
It reserves-consumes quite resources and it is powerful tool which could also crash your webpage.So like the

Spiderman’s uncle said to him, a big power requires a big responsability

More info at:
http://dev.opera.com/articles/css-will-change-property/

Anuncios
Publicado en HTML5, Javascript, website | Deja un comentario

Cuando HTML5 era más HTML5 que nunca…¡bucles for en CSS3…Saas!

¿Quieres novedades? ¿Te interesa el HTML5?

Cuando escribíamos nuestras hojas de estilos para separar…eso, nuestros estilos: colores, fuentes, anchos, altos, alineaciones….llegaron los @keyframes para además añadir movimiento a nuestro HTML…pero no se quedó ahí la cosa, es entonces cuando apareció el bucle for y las variables para hacerlo más bonito todavía:

HTML->

.scene
  -(2..15).each do |i|
    .assembly
      .strip
      .roller
        -(1..i).each do |j|
          .side
CSS->
$ri: 2em;
$c: cyan;
html, body { height: 100%; }
body {
  overflow: hidden;
  margin: 0;
  perspective: 10em;
  perspective-origin: 50% 0%;
  background: white;
  color: $c;
}
.scene {
  &, * {
    box-sizing: border-box;
    position: absolute;
    top: 50%; left: 50%;
    transform-style: preserve-3d;
  }
  transform: translate(4em, 10em) rotateX(75deg) rotate(-22.5deg)
}
.assembly {
  @for $i from 1 to 15 {
    $ca: 360deg/($i + 1);
    $l: 2*$ri*(if($i != 1, tan($ca/2), 2));
    $rc: $ri/(if($i != 1, cos($ca/2), .5));
    &:nth-child(#{$i}) {
      transform: translate(0, -3.5*$i*$ri);
      animation: slide#{$i} 1s ease-in-out infinite;
      @at-root {
        @keyframes slide#{$i} {
          to { transform: translate($l, -3.5*$i*$ri); }
        }
      }
      .strip { background-size: $l 100%; }
      .roller {
        transform: rotateY($ca/2) translateZ($rc) rotateY(-$ca/2);
        animation: inherit;
        animation-name: roll#{$i};
        @at-root {
          @keyframes roll#{$i} {
            to {
              transform: rotateY(-$ca/2) 
                         translateZ($rc) rotateY(-$ca/2);
            }
          }
        }
      }
      .side {
        margin: –$ri (-$l/2);
        width: $l; height: 2*$ri;
        @for $j from 0 to $i + 1
         {
          &:nth-child(#{$j + 1})
         {
            transform: rotateY($j*$ca) 
                       if($i != 1, translateZ(-$ri), ());
          }
        }
      }
    }
  }
}
.strip {
  margin: –$ri -1px;
  width: 120em; height: 2*$ri;
  border: solid .125em $c;
  background-image:
    linear-gradient(90deg, $c .125em, transparent 0);
  background-position: -1px 0;
}
.side {
  border: solid .125em $c;
  &:before, &:after {
    position: absolute;
    left: 0;
    width: inherit; height: .125em;
    background: $c;
    transform: rotateX(90deg);
    content: ”;
  }
  &:before { top: -1px; }
  &:after { bottom: -1px; }
}

Para verlo en acción:

http://codepen.io/thebabydino/full/lhKjt

¡Que aproveche!

Publicado en HTML5, Javascript, Otros, website | Deja un comentario

R Programming language

After a mini-training at #codeSchool with #R, I conclude with a good feeling because of the abstraction level and the possibilities with statistics (Before, was pending algebra in my agenda. Now also, remember all the statistics I forgot….now, more and more, I need a good course from the university P2P about maths) and #BigData.

The possibility of being accessible from #python, for example, generates many possibilities. But, probably is not a good idea to work with it in the client (Batteries, and less powerful devices), but I really miss a JavaScript (JQuery) – R connection… ¿Or maybe already exists a good JS library for this?

I add some screenshots of R from the codeschool.

R1 R3 R2

Enjoy

Publicado en Backend, BigData, Opinión, Otros | Deja un comentario

Funny conversation about Bitcoin

During a normal day, just reading and sharing info about Bitcoin:

– Did you know about it? http://en.wikipedia.org/wiki/Bitcoin

– I know about bit coin, it is also used by people behind dangerous viruses…not possible to find them at all

(True and demonstrable conversation)

(I could write infinite smiles, but the servers of this platform will not have enough space in their hard disks)

Publicado en Otros | Deja un comentario

Git: Getting the commit number & removing files after add -A

Getting the commit number:

git rev-parse –short HEAD

git reset

Removing files after add -A

git reset <namefile>

(I know that this is easy for you, but I needed to write it here. My notebook is not accessible from Internet)

Publicado en GIT | Deja un comentario

Git: Saving your changes when a push is not possible and a pull is required

In the case:

git add -A

git commit

git push origin master

git reset –soft HEAD^ (Deleting commit)

git stash (Saving our changes in a stack)

git pull origin master

git stash pop (recovering the changes from the stack)

git commit

git push origin master

Success!

Publicado en GIT | Deja un comentario

Httrack agressive download, o como descargar una web completamente

httrack http://www.url.com -c128 -%c20 -R40 -H0 -t -s0 -B

enjoy!

Publicado en Otros | Deja un comentario