Hoje live coding começará entre 19:30 e 20hrs. Agora faremos a integração do #FrontEnd feito em #React com a nossa #APIREst que está feita em cima do #NodeJS com #Restify.

Viva ao #JavaScript. Quem quiser colar pra trocar um conhecimento, só entrar em:
twitch.tv/marcobrunobr

"Novo curso na Udemy"

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

{VAGA}
@GuiaDev
Vaga: System Architect
https://bit.ly/2NQRkKq

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

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.

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

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