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

23/01/2017 Development / css

Mais 1 certificado :-)

https://cursos.alura.com.br/certificate/75306fdd-af07-4ba2-8c2b-2e70efc4eb32

FlexBix Froggy - 24 acertos :-) = 100%

23/01/2017 Development / css

container:

  • display: flex
  • flex-direction
  • justify-content
  • flex-wrap
  • flex-flow
  • align-items
  • align-content

flex item:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
20/01/2017 Development / java script

When you are working with the component toastr, you may want to customize the css, there is a need to debug the css on the console. However, when you do this, if you just hover and pull, toastr closes :-(

With this code it will only close in the click :-)

    angular.extend(toastrConfig, {

        // use for debug component
        // timeOut: 0,
        // extendedTimeOut: 0,

        closeButton: true
    });

 

11/01/2017 Development / css

With Sass

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

$colorTim : #00CC66;
$colorClaro: #B71C1C;
$colorOi : #0D47A1;
$colorVIVO : #FF9900;
$colorNextel : #CC00FF;
$colorCTBC : #00F2FF;
$colorSercontel : #000;

.leaflet-layer.baseRasterLayer.TIM img {
  @include background-opacity($colorTim, 0.2);
}

With Javascript

window.hexToRgbA = function(hex, opacity){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255, opacity].join(',')+')';
    }
    throw new Error('Bad Hex');
};

 

03/01/2017 Development / java script

this is the demo

the secret is:  ng-selected="true"

        <md-input-container>
            <label for="aggregation">Aggregation:</label>
              <md-select ng-model="aggregation">
                <md-option ng-value="Select" ng-selected="true">Select</md-option>
                <md-option><em>Hour</em></md-option>
                <md-option><em>Day</em></md-option>
                <md-option><em>Week</em></md-option>
              </md-select>
          </md-input-container>

03/01/2017 Development / java script

Same time i need repeat using numbers

sample: ng-repeat="item in [1,2,3,4,5,6...]" but this is very hugly :-(

I prefer

 ng-repeat="n in [].constructor(48) track by $index"