Tag: frontend

  1. A tabela periódica dos elementos HTML

    Semana passada eu fiz um tweet e um post na minha sobre uma tabela peri√≥dica dos elementos HTML que eu encontrei e o pessoal gostou bastante. A tabela, no caso, seria essa aqui: Pra ver numa resolu√ß√£o melhor, clique aqui. Essa tabela foi desenvolvida por um cara chamado Josh Duck,…

    em html frontend css gabs news

  2. Diferença entre $timeout e $interval

    No post que fiz ontem falei sobre como podemos utilizar o $timeout para pedir que uma fun√ß√£o seja executada ap√≥s um tempo: meuApp.controller('AlgumController', function($scope, $timeout) { //Faz uma chamada para FuncaoInutil depois de 3 segundos $timeout(FuncaoInutil, 3000); }); function FuncaoInutil() { console.log("imprime um texto); } Agora, pode ser…

    em frontend angularjs

  3. Como esconder um elemento html após alguns segundos

    (s√≥ pra constar: nos exemplos a seguir estou partindo do ponto que tenho o Angular j√° importado na minha aplica√ß√£o, omiti esse c√≥digo por quest√Ķes de legibilidade) Vamos supor que eu tenha o seguinte formul√°rio para cadastrar um produto: <p ng-show="mensagem.length">{{mensagem}}</p> <…

    em frontend angularjs

  4. Usando configura√ß√Ķes de localiza√ß√£o no AngularJS

    Vamos dizer que eu queira mostrar o valor de um produto em minha aplica√ß√£o AngularJS: <span> {{ produto.valor }} </span> Mas p√ī, esse valor a√≠ √© dinheiro. Posso ent√£o usar o filtro currency do Angular: <span> {{ produto.valor | currency }} </span> Mas, por padr√£o…

    em frontend angularjs

  5. Bootstrap Studio: sites responsivos com Bootstrap de forma simples

    J√° ouviu falar do Bootstrap Studio? At√© ent√£o, eu tamb√©m n√£o. O site dos caras promete uma ferramenta poderosa para criar sites responsivos usando o j√° conhecido de todos, Bootstrap. Briquei com o demo uns 5 minutos e achei a ideia interessante. Uma licen√ßa custa 25 d√≥lares para at√© 3…

    em frontend css news

  6. voxel.css: uma biblioteca 3d para CSS

    O achado de hoje foi o voxel.css, uma biblioteca CSS que te ajuda a fazer anima√ß√Ķes 3D bem legais. √Č legal que como ela usa o Transitions do CSS3, voc√™ est√° usando a acelera√ß√£o GPU ent√£o a performance dos gr√°ficos √© bem bacana. Guardei aqui nos meus favoritos para…

    em frontend css news

  7. Um husky feito em...CSS?!

    Navegando pela internet esses dias, encontrei esse link. Um desenvolvedor conseguiu fazer esse husky animado apenas com HTML e CSS. Muito louco, n√©? Eu, sinceramente n√£o fui a fundo no c√≥digo n√£o. Dei uma olhada bem por cima, mas n√£o tenho habilidades suficientes pra reproduzir algo nem pr√≥ximo disso hahahaha!…

    em html frontend css news

  8. Quer aprender CSS FlexBox de graça?

    J√° ouviu falar de FlexBox? Flexbox √© um modelo de box CSS otimizado para design de interfaces. Ele fornece um sistema mais simples de organiza√ß√£o de layout, baseando em dois elementos principais: um elemento que ser√° o ponto de in√≠cio do Flexbox e outro os seus elementos filhos. Um desenvolvedor…

    em frontend css conteudo gratuito news

  9. Eficiência dos seletores CSS

    Quando estamos desenvolvendo uma aplica√ß√£o, queremos que ela seja r√°pida, certo? E quando estamos escrevendo c√≥digo, geralmente sofremos press√£o de superiores com rela√ß√£o √† prazo para que o neg√≥cio saia logo. E infelizmente, muitas vezes trabalhamos apenas pra fazer a coisa funcionar, e n√£o nos preocupamos tanto com boas pr√°ticas,…

    em frontend css

  10. A estrutura de um navegador

    Os navegadores em geral s√£o estruturados da seguinte forma: Interface de usu√°rio(User Interface): essa √© a interface que n√≥s utilizamos: os menus, a barra de endere√ßos, os bot√Ķes avan√ßar/voltar/atualizar, etc. Todas as partes do navegador que n√£o faz parte das p√°ginas em si. A engine do navegador(…

    em web frontend

  11. Qual a diferença de back-end e front-end? Client-side e server-side?

    Bom, quando se fala em desenvolvimento web hoje em dia, as pessoas usam muito o termo back-end e front-end. E apesar de se falar muito, v√°rios alunos meus ainda vem perguntar qual a diferen√ßa entre os dois. √Č muito mais simples do que parece. Onde rodam as aplica√ß√Ķes web? Quando…

    em carreira frontend backend

  12. Associando v√°rias fun√ß√Ķes ao mesmo evento no Javascript

    Para selecionar um bot√£o em sua p√°gina e associar uma fun√ß√£o ao seu clique podemos fazer: document.querySelector('#botao').onclick = function() { //Faz alguma coisa }; Isso √© bacana, funciona e tal mas tem um problema: se eu quiser associar outra fun√ß√£o √† esse mesmo evento eu substituirei a anterior: document.…

    em frontend javascript jquery

  13. Maneiras de se praticar desenvolvimento frontend

    Sempre que estudamos algo novo a melhor coisa a se fazer para validar o aprendizado √© praticar. Mas a√≠ vem a pergunta n√©? O que fazer? Onde/como praticar? No caso espec√≠fico de front-end a melhor forma de se praticar √© fazendo sites. Afinal, √© basicamente para isso que o…

    em carreira frontend

  14. Alterando a validação padrão do HTML5

    No HTML5, se queremos que um campo seja obrigat√≥rio em um formum√°rio, basta adicionarmos o atributo required nele: <form> <input type="text" name="nome" required> <input type="submit"> </form> Se eu tentar fazer submit desse formul√°rio sem preencher o campo que est√°…

    em html frontend javascript validação

  15. As diferentes formas de se representar uma cor no CSS

    Suponhamos que, por alguma raz√£o, eu queira que o fundo dos par√°grafos de minha p√°gina sejam amarelos. Ent√£o, no meu arquivo CSS eu poderia definir o seguinte: p { background-color: yellow; } Estou usando direto o nome da cor, certo? Poderia tamb√©m, se quisesse, usar a nota√ß√£o hexadecimal: p { background-color: #ffff00; } Agora.…

    em html frontend css