search

teles / curso-desenvolvimento-frontend-zero-ao-junior

Curso de desenvolvimento para iniciantes em front end
1 stars 0 forks source link

Listar o máximo de tópicos/ideias que eu lembrar em 1 semana #2

Open teles opened 3 years ago

teles commented 3 years ago

Estrutura de aula

CSS

teles commented 3 years ago

Curiosidades de CSS

From: 12 Little-Known CSS Facts http://www.sitepoint.com/12-little-known-css-facts-the-sequel The border-radius property can use “slash” syntax The font-weight property accepts relative keywords There is an outline-offset property There is a table-layout property The vertical-align property works differently on table cells vs. other elements The ::first-letter pseudo-element is smarter than you think You can use invalid characters as delimiters in your HTML class lists Animation iterations can be fractional values Animation shorthand can break because of the animation’s name You can select ranges of elements Pseudo-elements can be applied to some void elements Some attribute values are case insensitive in selectors

http://ipestov.com/22-essential-css-recipes 13 - Blend Modes 14 - Gradient Borders 15 - Transition for z-index 16 - currentColor 17 - Object Fit 18 - Checkbox and Radio Buttons Styles 19 - Counters in CSS 20 - Advanced CSS Counters 21 - Menu Icon Without Images 22 - @supports 23 - visibility: visible 24 - position: sticky 25 - New Dimensions 26 - Text Decorations 27 - Block Scroll on Touch Devices 28 - Using Hardware Acceleration 29 - Unicode Classes 30 - Vertical Margines in Percents 31 - Margins in Firefox Buttons 32 - Color + Border = Border-Color 33 - Bonus for Oldies

teles commented 3 years ago

Listo aqui 10 tópicos que podem gerar assuntos avançados sobre css.

1) Como nomear classes css - blocos, elementos, modificadores?

Nomes ruins Nomes bons
visible-area fullscreen-carousel
component photo-box
button-group--is-right button-group--auxiliar

Nomear de modo que componentes não dependam de suas posições, de sua aparência mas sim de seu contexto. Um componente que azul alinhado a direita pode não se tornar verde e ficar a esquerda sem que você precise trocar deixar de chama-lo de button--success.

Seu componente deve saber que tipo de dado irá preenche-lo? Seu componente deve saber em que posição da tela ele está?

2) Separar regras de diagramação de estrutura de componentes;

Componentes devem ser encaixáveis na diagramação da página. Crie uma estrutura de grid, com ou sem flexbox. Crie seus componentes fora da página onde irão ficar. Encaixe os componentes depois.

3) Nomes coesos com arquitetura BEM;

Existem outras alternativas como ITCSS, OOCSS. Cada estado apenas uma classe. Todas as classes são de primeiro nível. Facilidade para remover classes não usadas.

4) Explícito é melhor que implícito;

5) Ter um conjunto confiável de padrões é melhor do ficar obcecado com pixel perfect;

6) Nomeando modificadores:

7) CSS e javascript devem conversar sem brigar

8) Os significado de mobile first na prática:

9) Porque nomear parte de seu componente como 'wrapper' cheira mal

10) Ter convenções é melhor do que não ter convenções.

teles commented 3 years ago

Formato da aula

Algumas coisas comuns podem estar presentes em todas as aulas para ajudar no ritmo da aula e na sua previsibilidade. Toda aula poderia ter uma revisão que mostrasse:

Sempre ter boas referências sobre boas práticas

Toda boa prática precisa de uma referência, exemplos:

Sobre flash cards

Que eu me lembre existe uma técnica chamada flash cards que ajuda a guardar vocabulário. Vou avaliar se isso seria útil para esse curso.

Versionamento

Em algum momento do curso o tema versionamento terá que ser abordado? Não sei, seria bom mas pode fugir da proposta de falar somente de HTML, CSS e JavaScript.