Guia Dev
Photo
Existem diversos elementos semânticos inline que podem ser usados no lugar do <span> quase sempre.
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Inline_elemente
#htmlmoderno #html5 #semantica #acessibilidade #a11y
#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de que as vezes existem um elemento semântico inline para ser usado no lugar do span.
O não traz nenhum sentido ao conteúdo interno e nenhum
estilo, com isso muitos devs cometem erros usando esse
elemento de maneira inadequada.
Mostra um exemplo a ser evitado com o span em pedaços de texto usando classes para estilizar visualmente.
E mostra um exemplo utilizando o elemento strong e o elemento em, para usar semântica e acessibilidade que cada um desses elementos tem nativamente (Uma coisa leva a outra! A semântica leva a acessibilidade)
Algumas dicas extras são:
1º Sempre opte por elementos semânticos;
2º Use span quando não for necessário dar sentido ao conteúdo interno ou que não tenha outra tag para o lugar;
3º Se quiser estilizar, pode atribuir normalmente uma "class" e customizar
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Inline_elemente
#htmlmoderno #html5 #semantica #acessibilidade #a11y
#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de que as vezes existem um elemento semântico inline para ser usado no lugar do span.
O não traz nenhum sentido ao conteúdo interno e nenhum
estilo, com isso muitos devs cometem erros usando esse
elemento de maneira inadequada.
Mostra um exemplo a ser evitado com o span em pedaços de texto usando classes para estilizar visualmente.
E mostra um exemplo utilizando o elemento strong e o elemento em, para usar semântica e acessibilidade que cada um desses elementos tem nativamente (Uma coisa leva a outra! A semântica leva a acessibilidade)
Algumas dicas extras são:
1º Sempre opte por elementos semânticos;
2º Use span quando não for necessário dar sentido ao conteúdo interno ou que não tenha outra tag para o lugar;
3º Se quiser estilizar, pode atribuir normalmente uma "class" e customizar
MDN Web Docs
Elementos inline
"Inline" é uma categorização dos elementos do HTML, em contraste com os "elementos de bloco". Os elementos inline podem ser exibidos em nível de bloco ou outros elementos inline. Eles ocupam somente a largura de seu conteúdo. A diferença entre elementos inline…
Acabou de começar uma série de vídeos que pode te ensinar a criar seu primeiro tema de WordPress com Bootstrap 4.
Para assistir: https://www.youtube.com/watch?v=u65n-osqti8
A série toda vai ser grátis e no YouTube
Para assistir: https://www.youtube.com/watch?v=u65n-osqti8
A série toda vai ser grátis e no YouTube
YouTube
Como instalar o Bootstrap 4 via NPM (com Sass e Gulp) - BS4 + WP #01
Bem-vindo a série de vídeos que vai te ensinar a criar seu primeiro tema de WordPress usando Bootstrap 4.
Neste vídeo você irá aprender como instalar o Bootstrap 4 e como começar a usar o Sass. Vai aprender também como o Gulp pode facilitar sua vida na hora…
Neste vídeo você irá aprender como instalar o Bootstrap 4 e como começar a usar o Sass. Vai aprender também como o Gulp pode facilitar sua vida na hora…
Animação muito comum atualmente de revelação de texto. Relativamente simples o CSS, dois span's e você consegue fazer isso
https://codepen.io/origamid/pen/EpgbmM?editors=0100
O parte de JavaScript parece um pouco complexa, mas o único objetivo dela é automatizar e iniciar a animação, para você não precisar ficar criando os span's necessários.
Se quiser só copiar o JavaScript, a parte essencial de CSS para animação e adicionar o atributo data-text="mask" ao texto que você quiser animar, que já vai funcionar.
A animação ocorre basicamente com uma tag span sendo criada do mesmo tamanho do texto, e após um certo tempo simplesmente jogamos esse span para o lado com o transform: translate3d;
Por ter um overflow: hidden; no wrapper, esse span que serve como mascara não irá aparecer.
https://codepen.io/origamid/pen/EpgbmM?editors=0100
O parte de JavaScript parece um pouco complexa, mas o único objetivo dela é automatizar e iniciar a animação, para você não precisar ficar criando os span's necessários.
Se quiser só copiar o JavaScript, a parte essencial de CSS para animação e adicionar o atributo data-text="mask" ao texto que você quiser animar, que já vai funcionar.
A animação ocorre basicamente com uma tag span sendo criada do mesmo tamanho do texto, e após um certo tempo simplesmente jogamos esse span para o lado com o transform: translate3d;
Por ter um overflow: hidden; no wrapper, esse span que serve como mascara não irá aparecer.
CodePen
revealing-text
...
Guia Dev
Photo
Sabe quando aquele botão no celular fica muito pequeno e você fica tentando clicar 10 vezes até conseguir? Se liga como arrumar isso!
⠀
No React Native podemos passar para todos componentes "Touchable" uma propriedade hitSlop que define quantos pixels de distância de cada lado o componente deve aceitar cliques.
⠀
Isso funciona extremamente bem, mas temos que ficar ligados para essa área nunca ser maior que a do componente container do botão, se não, nesse caso, não irá funcionar.
⠀
#reactnative #reactjs #react #javascript #instacode
⠀
No React Native podemos passar para todos componentes "Touchable" uma propriedade hitSlop que define quantos pixels de distância de cada lado o componente deve aceitar cliques.
⠀
Isso funciona extremamente bem, mas temos que ficar ligados para essa área nunca ser maior que a do componente container do botão, se não, nesse caso, não irá funcionar.
⠀
#reactnative #reactjs #react #javascript #instacode
Que evento foi o @frontinsp! ♥️
Pra quem quiser rever, segue os slides da talk do Fernando Daciuk sobre "Immutable JavaScript" 😊
#frontinsampa #frontendweek #javascript
https://t.co/m2JQQ1ZsqR
Pra quem quiser rever, segue os slides da talk do Fernando Daciuk sobre "Immutable JavaScript" 😊
#frontinsampa #frontendweek #javascript
https://t.co/m2JQQ1ZsqR
Google Docs
07 - Fernando Daciuk
Immutable JavaScript
Guia Dev
Photo
PROCURA-SE Ninja Mestre Jedi Super Sayajin Web Developer que tenha poderes psíquicos para criar uma integração de sistema ERP Alterdata com uma plataforma de e-commerce Tray.
HOME-OFFICE
Paga-se um preço que seja justo para você e para nós.
Por favor, envie sua proposta para dev@panoramacom.com.br com orçamento estimado (eu sei que você precisa olhar o escopo todo para dar um preço e um prazo preciso), mas preciso ter pelo menos uma ideia do quanto sai a facada. [Seja gentil, please]
@GuiaDev
Pré-requisito principal: Ser de boássa.
De gente estressada o metrô tá cheio. Bora trabalhar de maneira leve e alegre.
HOME-OFFICE
Paga-se um preço que seja justo para você e para nós.
Por favor, envie sua proposta para dev@panoramacom.com.br com orçamento estimado (eu sei que você precisa olhar o escopo todo para dar um preço e um prazo preciso), mas preciso ter pelo menos uma ideia do quanto sai a facada. [Seja gentil, please]
@GuiaDev
Pré-requisito principal: Ser de boássa.
De gente estressada o metrô tá cheio. Bora trabalhar de maneira leve e alegre.
Guia Dev
Photo
Palestrante confirmado: Matheus Marsiglio - "Imutabilidade em Objetos com JavaScript"
Designer e Desenvolvedor de software, instrutor do nanodegree de React na Udacity
Como entender objetos com JavaScript, seus comportamentos, algumas propriedades subvalorizadas, garantir imutabilidade e consistência dos dados, como usar listas, hashmaps e seus poderes versus suas performances.
Inscreva-se: www.frontinvale.com.br
Designer e Desenvolvedor de software, instrutor do nanodegree de React na Udacity
Como entender objetos com JavaScript, seus comportamentos, algumas propriedades subvalorizadas, garantir imutabilidade e consistência dos dados, como usar listas, hashmaps e seus poderes versus suas performances.
Inscreva-se: www.frontinvale.com.br