felipehuggler.com

Esse aqui é o macete dos macetes!

Vira e mexe surge alguem pedindo pra eu fazer um projeto especifico pra sua empresa. Entao, pra que o sistema fique bonitinho, eu costumo usar o material design ou o bootstrap com as variacoes do SASS.

Mas o material design, ele ja adianta mto, porem, quando vc importa ou injeta o material, ele vem com a cor padrao.

É isso que eu vou explicar nesse post, como funciona o material design color!

Primeira coisa é a paleta de cores:

https://material.io/archive/guidelines/style/color.html#color-color-palette

É a partir daqui que as coisas sao criadas!

Tem varias paletas: red, gray, indigo, pink...etc

No angular tem 4 variacoes de estilos...que sao:

• primary - indigo
• accent - pink
• warn - red
• background - grey

Seria mais ou menos assim no bootstrap: success, info, warning, secondary, deu pra sacar? E ali ele usa: no primary (paleta indigo) no accent (palleta pink)...e asism por diante e se formos ver a cor que representa seria:

primary - (indigo) => 500 (#3F51B5)

accent (pink) => 500 (#E91E63)

warn (red) => 500 (#F44336)

background (gray) => (#9E9E9E)

Entao é isso, quando vc for usar e fiz por exemplo:

<md-button>Oi</md-button> (fundo transparente e cor preta) -> normal, mas se fizer

<md-button md-no-ink class="md-primary">Primary (md-noink)</md-button> (fundo transparent e cor do texto do botao #3F51B5)

se voce colocar a classe md-raised <md-button class="md-raised md-primary">Primary</md-button>  (fundo #3F51B5 e cor do texto do  botao #FFF)

É assim que funciona:

Mas se você quiser alterar esse padrao default, existe uma possibilidade, atraves desde codigo

  .config(function($mdThemingProvider) {

    $mdThemingProvider.theme('default')
      .primaryPalette('red', {
        'default': '400', // by default use shade 400 from the pink palette for primary intentions
        'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
        'hue-2': '800', // use shade 600 for the <code>md-hue-2</code> class
        'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
      })
      // If you specify less than all of the keys, it will inherit from the
      // default shades
      .accentPalette('deep-purple', {
        'default': '200' // use shade 200 for default, and keep all other shades the same
      }).dark();
  })

A propriedades sao: theme.primaryPalette, theme.accentPalette, theme.warnPalette, theme.backgroundPalette

Aqui eu digo que minha default vai usar a paleta primaria (red) e accent (dee-purple), podendo ainda customizar minha cor DEFAULT e as variacoes hue-*

As variacoes hue-1, hue-2, hue-3 usam as paletas (300 800 e A100) e serve pra primary e warn

A200, A100, A400 e A700 (warn)

Espero que sirva de estudo pra alguem!

https://material.io/archive/guidelines/style/color.html#color-color-palette

Fiz esse scriptzinho rapido, e a minha ideia é modularizar pra fazer ele virar uma extensão para opencart

<div class="module-product-wrap">
<h3 class="module-product-heading">instagram</h3>
<div id="instafeed"></div>
</div>
<script type="text/javascript" src="https://cdn.boomcdn.com/libs/instafeed-js/1.4.1/instafeed.min.js"></script>
<script>
  var userFeed = new Instafeed({
        get: 'user',
        sortBy: 'most-recent',
        userId: 'seuidaqui',        
        limit: 9,
        accessToken: 'seutokenaqui'         
});
userFeed.run();
</script>
<style>
div#instafeed {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 8px;
}
#instafeed img {
width: 100%
}
</style>

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> // a tela tem que ser no minimo 650, ou seja, telas acima disso, com 1280 é isso que vai aparecer
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> // abaixo de 650 e no minimo 465, é essa que vai aparecer
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> //abaixo de 465, ou seja, mobile é essa!
</picture>

Espero que sirva!

Essa prova foi realizada no dia 31/Maio de 2019 e fiquei na 3º colocação no geral.

HUGGLER FELIPE M 35 BR SPRINT SPRINT V35-39

total       01:18:38

natacao 00:07:52 (transicao) 00:01:15
bike       00:43:12 (transicao) 00:00:39
corrida   00:25:40

Uma grande, mas grandiosa merda que acontece com a maioria dos APPs, quando vão ser testados no celular, usando IONIC é a porra do padding-bottom que ele coloca nos formularios.

Vou colocar as fotos aqui de exemplo.

Reparou como a tela subiu ridicularmente???

Isso acontece direto cara, mas tem o jump the cat pra resolver isso!

setando scrollPadding: false no app module config.

IonicModule.forRoot(MyApp, {

      tabsHideOnSubPages: true,
      scrollAssist: false,
      autoFocusAssist: false,
     scrollPadding: false
    }) 

Espero que ajude, porque pra mim, ajudou pra caraleo!

Essa prova eu participei de apoio do atleta André Costa de Manaus. Foram 3 dias de desafio.

Nadar 10Km

Pedalar 421km

Correr 84,4km

https://jsonplaceholder.typicode.com/

Esse cara é muito legal, ele tem alguns endpoints que simulam uma API 

Resources

JSONPlaceholder comes with a set of 6 common resources:

/posts	100 posts
/comments	500 comments
/albums	100 albums
/photos	5000 photos
/todos	200 todos
/users	10 users

Essa prova foi realizada no dia - 24/03/2019

Esse foi minha primeira participação no triatlhon e meu tempo total foi de: 01:26:04

Com as parciais de:

23:03 - Natação
22:24 - Corrida
40:36 - Bike

Ficando em 7º na minha categoria - 18/35 anos

var user = {
    nome: "huggler", 
    idade: 35
};

with(user) {
    a = `Meu nome é ${nome}, e tenho ${idade} anos`;
}