21/05/2017 Development / java script

      .directive('fbLike', [
          '$window', '$rootScope', function ($window, $rootScope) {
              return {
                  restrict: 'A',
                  scope: {
                      fbLike: '@'
                  },
                  link: function (scope, element, attrs) {
                      if (!$window.FB) {
                          $.getScript('//connect.facebook.net/pt_BR/sdk.js', function () {
                              $window.FB.init({
                                  appId: $rootScope.facebookAppId,
                                  xfbml: true,
                                  version: 'v2.9'
                              });
                              renderLikeButton();
                          });
                      } else {
                          renderLikeButton();
                      }

                      var watchAdded = false;
                      function renderLikeButton() {
                          if (!!attrs.fbLike && !scope.fbLike && !watchAdded) {
                            var watchAdded = true;
                            scope.fbLike = (attrs.fbLike || scope.fbLike);
                            var unbindWatch = scope.$watch('fbLike', function (newValue, oldValue) {
                            if (newValue) {
                              renderLikeButton();
                              unbindWatch();
                            }});
                          } else {
                              element.html('<div class="fb-like"' + (!!scope.fbLike ? ' data-href="' + scope.fbLike + '"' : '') + ' data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>');
                              $window.FB.XFBML.parse(element.parent()[0]);
                          }
                      }
                  }
              };
          }
      ])

16/05/2017 Development / css

Esse é meu primeiro exemplo usando css layout. É realmente muuuuito foda! Espero que vocês aprendam tanto quanto eu. ;-)

.grid {
  display: grid;
  grid-template-rows: auto 15px auto 15px auto;
  grid-template-columns: 300px 15px 1fr;
}
.header, .footer {
  grid-column-start: 1;
  grid-column-end: 4;
}
.header {
  grid-row: 1;
}
.sidebar {
  grid-column: 1;
  grid-row: 3;
}
.main {
  grid-column: 3;
  grid-row: 3;
}
.footer {
  grid-row: 5;
}

.header, .sidebar, .main, .footer {
  border: 1px solid red;
  padding: 10px;
}

https://codepen.io/huggler/pen/MmBqmP

 

15/05/2017 Development / java script

Esse fim de semana eu fiquei dando uma aprimorada em algumas coisas que eu achava que estava precisando melhorar, sobretudo, em relação a essa nova sintaxe do javascript ES6.

Bom, a primeira coisa foi a arrow functions.

É muito simples escrever uma função no estilo tradicional.

var fn = function(params){
return params;
}

no ES6 tem 2 possibilidades.

1) var fn = ((parms)=>{
return params;
})

Quando a funcao return uma unica linha tambem podemos escrever

1) var fn = ((parms)=> params);

2) var fn = ((parms=[1,2,3])=> params); // tambem podemos inicializar uma variavel

Outro macetinho é o let

for(var i = 0; i <= 100; i++){}

alert(i) //Qual sera o valor de i, nesse caso? - 101 (estranho neh)

Mas o let, serve justamente pra evitar isso...faz com que a variavel só exista no escopo da funcao.

for(let i = 0; i <= 100; i++){}

Object.freeze - Nao deixa você mudar os valores das variaveis.

get e set

class Xibata {

constructor() {
this._nome;
this._idade;
}

getNome(){
return this._nome
}

getIdade{
return this._idade
}

}

com get e set, voce nao precisa mais disso, basta fazer

get nome(){
return this._nome

get idade(){
return this._idade
}

o get faz com que o metodo vire uma propriedade do objeto.

outro macetinho foi o spread operator

ex:

var params = ['hello', true, 7]
var other = [1,2, ...params] // [1,2, 'hello', true, 7]

Tem outras coisinhas... Essa linguagem ta cada vez mais irada!

 

 

30/03/2017 Development / css

Issso aqui é pra ser executado basicamente com after ou before

content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    height: 0;
    width: 0;
    border-color: transparent transparent #ffc819;
    border-style: solid;
    border-width: 0 0 3vw 100vw

É um códigozinho bem de bosta, mas não precisa usar fundo de imagem :-)

position: absolute;
    left: 10px;
    bottom: -10px;
    z-index: -1;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 0 13px 130px;
    border-color: transparent transparent transparent rgba(0,0,0,.2);

Exemplo rapidinho:

https://jsfiddle.net/ug8p0cbo/3/

20/03/2017 Development / css

http://jsfiddle.net/yqq2ogaq/

https://jsfiddle.net/36m7796q/2/

06/03/2017 Development / java script

Muita gente não sabe, mas o método split aceita expressões regulares. Imagine o seguinte cenário.

var arquivo = '100,200-150,200;20';
var valores = arquivo.split(',');
["100", "200-150", "200;20"] //vai imprimir

var exp = /[,;-]/;
var valores = arquivo.split(exp);
["100", "200", "150", "200", "20"] //vai imprimir tudo separado e bonitinho de uma vez só.

Espero que ajude.

30/01/2017 Development / css

É muito comum ver os caras querendo tirar o background-color de css... Uns tentam usar background-color: none, auto, inherit...

Mas nesse caso, o correto é background-color: transparent;

Espero que sirva

 

27/01/2017 Development / java script

FormatMessage do react-intl pode ser usado de algumas maneiras, vou expor aqui 2 maneiras.

Diretamente no html.

Ex: <Field label={<FormattedMessage {...messages.publicoAlvo} />}

Ou você pode criar uma função que retorna o defaultMessage.

const m = (message) => ({ ...messages[message] }.defaultMessage);

<Field label={m('publicoAlvo')} />

Eu prefiro a segunda.

Espero que ajude

 

24/01/2017 Development / java script

insert in your component - attribute (data-componente="namecomponente")

function debugComponent(){

    document.querySelectorAll("[data-component]").forEach(function(component, index){

        var modulo = document.createElement('div');
        modulo.classList.add('debug-modulo');

        var moduloName = document.createTextNode(component.getAttribute('data-component'));
        modulo.appendChild(moduloName);

        component.classList.toggle("debug-modulo-active");
        component.appendChild(modulo);
    });
}

//css

.debug-modulo-active {
    border: 1px solid red;
    position: relative;
    display: block;
}

.debug-modulo {
    position: absolute;
    top: 0;
    left : 0;
    z-index: 1000;
    right: 0;
    background-color: #fff;
    color: #000;
    font-size: 10px;
}

Designação atribuída a uma inovação tecnológica (produto ou serviço) capaz de derrubar uma tecnologia já preestabelecida no mercado.

Seja capaz de inovar! Todos os dias