Uma das maneiras pelas quais você pode classificar uma linguagem de programação é o quão fortemente ou fracamente é digitado. Aqui, “digitado” significa se as variáveis ​​são conhecidas no momento da compilação. Um exemplo disso seria um cenário em que um número inteiro (1) é adicionado a uma string contendo um número inteiro ("1"):

result = 1   "1";

A sequência que contém um número inteiro poderia ter sido gerada sem querer a partir de um conjunto de lógica complicado com muitas partes móveis. Também poderia ter sido intencionalmente gerado a partir de uma única fonte de verdade.

Apesar das conotações que os termos "fracos" e "fortes" implicam, uma linguagem de programação fortemente tadatada não é necessariamente melhor do que uma de forma fraca. Pode haver cenários em que a flexibilidade é necessária mais que rigidez e vice-versa. Como em muitos aspectos da programação, a resposta depende de vários contextos externos (ou seja, "depende").

O outro bit interessante é que não existe uma definição formal do que constitui uma digitação forte ou fraca. Isso significa que as percepções do que é considerado uma linguagem fortemente ou fraca diferem de pessoa para pessoa e podem mudar com o tempo.

TypeScript

JavaScript é considerado um idioma fracamente tado, e essa flexibilidade contribuiu para sua adoção precoce na web. No entanto, à medida que a web amadureceu e industrializou, os casos de uso para JavaScript se tornaram mais complicados.

Extensões como o TypeScript foram criadas para ajudar com isso. Pense nisso como um "plug -in" para JavaScript, que enxerta fortes digitando no idioma. Isso ajuda os programadores a navegar nas configurações complicadas. Um exemplo disso pode ser um aplicativo de página única intensiva em dados usada para comércio eletrônico.

Atualmente, é muito popular no setor de desenvolvimento da web, e muitos novos projetos padrão para usar o TypeScript ao configurar as coisas pela primeira vez.

Compile Time

O tempo de compilação é o momento em que uma linguagem de programação é convertida em código da máquina. É um precursor do tempo de execução, o momento em que o código da máquina é realizado pelo computador.

Como em muitas coisas na web, o tempo de compilação é um pouco complicado. Uma configuração que utiliza o TypeScript vai costurar peças de componentes do código JavaScript e compilá -las em um único arquivo JavaScript para o navegador ler e executar.

O tempo em que as peças do componente compilam é quando todas são combinadas. O TypeScript serve como uma espécie de superintendente e gritará com você se você tentar quebrar as convenções digitadas que você configurou antes que a combinação ocorra.

O arquivo JavaScript Stitched-Together é então ingerido pelo navegador, que tem seu próprio tempo de compilação. O tempo de compilação do navegador é altamente variável, dependendo de:

• o dispositivo em que o navegador está ativado,
• que outro trabalho o navegador está fazendo e
• que outro trabalho os outros programas do dispositivo estão fazendo.

O TypeScript não é usado diretamente pelo navegador, mas sua presença é sentida. JavaScript é frágil. O TypeScript ajuda com essa fragilidade, tentando impedir erros a montante no editor de código. Isso diminui os erros de chance ocorrem no JavaScript lido pelo navegador - erros que levariam o JavaScript para parar de funcionar no site ou aplicativo da web que uma pessoa está usando.

css

CSS é uma linguagem de programação declarativa e específica de domínio. Também é fortemente digitado. Na maioria das vezes, os valores no CSS permanecem declarados como autor. Se um valor for inválido, o navegador lança toda a propriedade.

tipos em css

A lista de tipos no CSS é completa. Eles são:

tipos textuais

• Globally-scoped keywords:
  • initial
  • inherit
  • unset
  • revert
• Custom identifies, which are specifically used for things, such as providing a grid-area Nome
• Strings, como "Hello"
• URLS, como https://css-tricks.com/
Tipos numéricos

inteiros, que são números decimais 0–9

números reais, como 3.14

• porcentagens, como 25%
• dimensões, uma número com uma unidade anexada a ela como (100px ou 3s)
16/9
flex, um comprimento variável para cálculo da grade css
• tipos de quantidade
comprimentos:

comprimentos absolutos, como pixels ou centímetros

comprimentos relativos, como root ems ou a altura da viewport
• , tais como 200s
  time, tais como 200s
  • como AS 250MS
  • frequências, tais 16Hz
  resolução, como 96dpi
• dimensões e comprimentos podem parecer semelhantes, mas as dimensões podem conter porcentagens e comprimentos não podem.
• Tipos de cores
palavras -chave:
cores nomeadas, como Papayawhip

transparent

currentColor

rgb colors: &&&&&&HRESHEN
• • rgb colors:
  • rgb colors:
• rgb colors: & &&&& &&& &&&]
  • rgb colors: &&&&& &&]
  * #Ff8764
  rgb/rgba notação, como rgba (105, 221, 174, 0.5)
hsl/hsla colors, como hsl (287, 76%, 50%
tipos de imagem

imagem, que é uma referência de URL a um arquivo de imagem ou gradiente

• lista de cores, uma lista de duas ou mais paradas coloridas, usadas para a noção de gradiente
• linear-stop, uma expressão de cor e comprimento para indicar uma parada de cor gradiente
Color
Final-Shape, que usa uma palavra-chave de Circle ou Ellipse para gradientes radiais
• Tipos de posicionamento 2D
Palavras -chave:

Top

Right
• Bottom
  esquerda
  Center
  Center
  Programação em CSS
A maior parte da programação no CSS está autorizando os seletores e, em seguida, especificando um conjunto de propriedades e seus valores necessários. As coleções de seletores dão a conteúdo um formulário visual, assim como as coleções da lógica JavaScript cria recursos.
CSS tem funções. Ele pode executar cálculo, lógica condicional, expressões algorítmicas, estado e comportamento baseado em modo. Ele também possui propriedades personalizadas, que são efetivamente variáveis ​​CSS que permitem que os valores sejam atualizados dinamicamente. Caramba, você pode até resolver o FizzBuzz com CSS.

Como outras linguagens de programação, há também uma camada de "meta", com pensamentos e técnicas diferentes sobre como organizar, gerenciar e manter as coisas.

Erros de arremesso

Ao contrário de outras linguagens de programação em que o código existe amplamente sob o capô, o CSS é altamente visual. Você não verá avisos ou erros no console se usar um valor inválido para uma declaração de propriedade, mas obterá visuais que não atualizam da maneira que antecipou.

O motivo disso é que o CSS é resiliente. Quando os visuais não são atualizados devido a uma declaração mal interpretada, o CSS está priorizando,

garantindo que o conteúdo possa ser mostrado a todos os custos

e renderizará todas as outras declarações válidas possível. Isso está de acordo com os princípios de design do idioma, os princípios da plataforma e os objetivos gerais da missão da Web.

Prova

Vamos demonstrar o quão forte a digitação no CSS mantém os corrimãos em três exemplos: um com uma declaração direta de propriedade/valor, um com cálculo e outro com redefinir uma propriedade personalizada. Exemplo 1: Declaração de propriedade/valor direta

Para este exemplo, o navegador não entende a declaração de "batata" do estilo de fronteira do banner. Observe que as outras declarações de propriedade/valor da classe .banner são homenageadas pelo navegador e renderizadas, embora o estilo de borda tenha uma incompatibilidade de tipo. Este é um exemplo de como o CSS é resiliente.

A declaração no estilo de fronteira está esperando um dos seguintes tipos de estilo textual:

palavras-chave escassas globalmente, ou a

tracejou o indent para uma propriedade personalizada.

;

Exemplo 2: Cálculo
A função calc () no CSS nos permite receber dois argumentos e um operador para retornar um resultado calculado. Se um dos argumentos não usar um tipo válido, o cálculo não funcionará.
Nesta caneta, a propriedade do tamanho da fonte do seletor está esperando um valor com um tipo de dimensão numérica (por exemplo, 1.5REM). No entanto, a função de cálculo produz um valor de tipo inválido para a propriedade do tamanho da fonte. Isso ocorre porque o segundo argumento na função calc () é uma string ("2Rem"), e não um tipo de dimensão numérica.

Por isso, o tamanho da fonte do parágrafo volta ao próximo nó pai mais aplicável-o tamanho da fonte de 1.5rem declarado no elemento corporal.

Isso é um pouco nas ervas daninhas, mas vale a pena apontar: combinar duas propriedades personalizadas em uma função calc () pode causar erros. Embora ambas as propriedades personalizadas possam ser válidas por conta própria, o calc () não aceitará tipos textuais de indent tracejados. Pense em um cenário em que podemos tentar multiplicar propriedades personalizadas que contêm unidades incompatíveis, por exemplo --big: 500px e--small: 1em.

Exemplo 3: Redefined Custom Property

Como variáveis ​​JavaScript, os valores de propriedades personalizados podem ser redefinidos. Essa flexibilidade permite coisas como criar facilmente temas de cores do modo escuro.

No: seletor de raiz deste codepen, eu defini uma propriedade personalizada de--cor-cyan, com um valor de #953Fe3. Então, na aula .square, atualizei o valor da propriedade de cor-cyan para ser o topo. Embora o TOP seja um valor digno válido, não é um tipo que as honras de segundo plano.

Observe que a propriedade personalizada atualizada é escopo para .Square e não afeta outros usos, como a borda direita da frase "Não jogue para digitar". E se você remover a propriedade personalizada redefinida do .Square, verá a cor do fundo ciano.

Embora isso seja um pouco artificial, serve como um exemplo de como redefinir as propriedades personalizadas podem se afastar de você se você não tomar cuidado.

Este fenômeno pode ser encontrado em projetos com baixa comunicação, bases de código CSS maiores e situações em que os pré -processadores CSS são usados ​​para construir propriedades personalizadas em escala.

Tooling

Com o presente da retrospectiva, acho que a falta de avisos de console para o CSS é uma falha e contribuiu para muitas das percepções negativas sobre o idioma.

esperando que um desenvolvedor note que uma mudança visual potencialmente pequena é uma pergunta muito grande e não os encontra onde eles estão na maioria de suas outras ferramentas diárias. Existem algumas iniciativas que estou ciente disso, tente abordar isso.

primeiro é Stylelint, um linhador feito especificamente para lidar com linguagens de pré-processamento do tipo CSS e CSS. O Stylelint pode se integrar aos editores de código, corredores de tarefas, ferramentas de linha de comando e ações do GitHub para ajudar a manter seu CSS sob controle. Isso permite conhecer desenvolvedores onde eles já estão.

O segundo é o excelente conjunto de opções de inspeção do CSS do Firefox em suas ferramentas de desenvolvedor. Em particular, gostaria de chamar a atenção para sua capacidade de identificar CSS não utilizado. Isso é extremamente útil para identificar seletores que podem ter sido executados em uma incompatibilidade de tipo.

encerrando

CSS tem sido fortemente digitado desde que tenha sido uma linguagem de programação e, como linguagem de programação, existe há muito tempo. Também tem feito muito crescente ultimamente. Se você não fez o check -in, existem alguns recursos novos e incríveis disponíveis.

como JavaScript fortemente tímido se torna mais popular, espero que ajude os desenvolvedores a se sentirem mais confortáveis ​​com a empresa, mas flexível do CSS.

obrigado a Miriam Suzanne pelo feedback dela.