Una de las formas en que puede clasificar un lenguaje de programación es por la fuerza o la debilidad de su tipeo. Aquí, “escrito” significa si las variables se conocen en el momento de la compilación. Un ejemplo de esto sería un escenario donde un entero (1) se agrega a una cadena que contiene un número entero ("1"):
result = 1 + "1";La cadena que contiene un número entero podría haberse generado involuntariamente a partir de un complicado conjunto de lógica con muchas partes móviles. También podría haber sido generado intencionalmente a partir de una única fuente de verdad.
A pesar de las connotaciones que implican los términos “débil” y “fuerte”, un lenguaje de programación fuertemente tipado no es necesariamente mejor que uno débilmente tipado. Puede haber escenarios en los que se necesite más flexibilidad que rigidez, y viceversa. Como ocurre con muchos aspectos de la programación, la respuesta depende de múltiples contextos externos (es decir, “depende”).
La otra parte interesante es que no existe una definición formal de lo que constituye una tipificación fuerte o débil. Esto significa que las percepciones de lo que se considera un lenguaje de tipificación fuerte o débil difieren de una persona a otra y pueden cambiar con el tiempo.
Mecanografiado
JavaScript se considera un lenguaje de tipo débil y esta flexibilidad contribuyó a su adopción temprana en la web. Sin embargo, a medida que la web ha madurado e industrializado, los casos de uso de JavaScript se han vuelto más complicados.
Se crearon extensiones como TypeScript para ayudar con esto. Piense en ello como un “complemento” para JavaScript, que injerta la escritura fuerte en el idioma. Esto ayuda a los programadores a navegar por configuraciones complicadas. Un ejemplo de esto podría ser una aplicación de una sola página con uso intensivo de datos utilizada para el comercio electrónico.
TypeScript es actualmente muy popular en la industria del desarrollo web, y muchos proyectos nuevos utilizan de forma predeterminada TypeScript cuando se configuran las cosas por primera vez.
Tiempo de compilación
El tiempo de compilación es el momento en que un lenguaje de programación se convierte en código de máquina. Es un precursor del tiempo de ejecución, el momento en que la computadora ejecuta el código de máquina.
Como ocurre con muchas cosas en la web, el tiempo de compilación es un poco complicado. Una configuración que utiliza TypeScript unirá los componentes de código JavaScript y los compilará en un solo archivo JavaScript para que el navegador lo lea y ejecute.
El momento en que las piezas de los componentes se compilan es cuando se combinan todas. TypeScript sirve como una especie de supervisor y le gritará si intenta romper las convenciones mecanografiadas que ha establecido antes de que se produzca la combinación.
‘. ts (2339). Ver problema (opción F8). No hay soluciones rápidas disponibles. La información sobre herramientas apunta a un argumento llamado “contenido”.” class=”wp-image-337649 jetpack-lazy-image” data-recalc-dims=”1″ data-lazy- src=”https://i1.wp.com/css-tricks.com/wp-content/uploads/2021/04/s_0708EDBE931238A816D93A83B4887F09182621AB302D13AA8F54721B76236DB8_1617303324362_typescript-error-prompt.png?resize=1257%2C320&is-pending-load=1#038;ssl=1″>Un ejemplo de error de TypeScript en VS Code.
A continuación, el navegador ingiere el archivo JavaScript cosido, que tiene su propio tiempo de compilación. El tiempo de compilación del navegador es muy variable, dependiendo de:
- El dispositivo en el que se encuentra el navegador,
- Qué otro trabajo está haciendo el navegador y
- Qué otro trabajo están haciendo los otros programas del dispositivo.
TypeScript no es utilizado directamente por el navegador, pero se siente su presencia. JavaScript es frágil. TypeScript ayuda con esta fragilidad al intentar evitar errores en el editor de código. Esto reduce la posibilidad de que se produzcan errores en el JavaScript leído por el navegador, errores que harían que JavaScript dejara de funcionar en el sitio web o la aplicación web que está usando una persona.
CSS
CSS es un lenguaje de programación declarativo de dominio específico. También está fuertemente tipado. En su mayor parte, los valores en CSS permanecen declarados como creados. Si un valor no es válido, el navegador desecha toda la propiedad.
Tipos en CSS
La lista de tipos en CSS es completa. Ellos son:
Tipos textuales
- Palabras clave de ámbito global:
initialinheritunsetrevert
- Identificaciones personalizadas, que se utilizan específicamente para cosas, como proporcionar un
grid-areanombre - Cadenas, como,
"hello" - URL, como
https://css-tricks.com/ - Identificaciones discontinuas (
--), que se utilizan para crear propiedades personalizadas (más sobre esto en un momento)
Tipos numéricos
- Enteros, que son números decimales del 0 al 9
- Números reales, como
3.14 - Porcentajes, como
25% - Dimensiones, un número con una unidad añadida como (
100pxo3s) - Ratios, como
16/9 - flex, una longitud variable para el cálculo de la cuadrícula CSS
Tipos de cantidad
- Longitudes:
- Longitudes absolutas, como píxeles o centímetros
- Longitudes relativas, como raíz ems o la altura de la ventana gráfica
- Tiempo, como
200ms
- Ángulos, como
15deg - Tiempo, como
250ms - Frecuencias, tales
16Hz - Resolución, como
96dpi
Las dimensiones y longitudes pueden parecer similares, pero las dimensiones pueden contener porcentajes y las longitudes no.
Tipos de colores
- Palabras clave:
- Colores con nombre, como
papayawhip transparentcurrentColor
- Colores con nombre, como
- Colores RGB:
- Notación hexadecimal, como
#FF8764 - Notación RGB / RGBa, como
rgba(105, 221, 174, 0.5)
- Notación hexadecimal, como
- Colores HSL / HSLA, como
hsl(287, 76%, 50%) - Colores del sistema, como
ButtonText
Tipos de imágenes
- Imagen, que es una referencia de URL a un archivo de imagen o degradado
color-stop-list, una lista de dos o más paradas de color, utilizada para la noción de degradadolinear-color-stop, una expresión de color y longitud utilizada para indicar una parada de color degradadolinear-color-hint, un porcentaje de longitud utilizado para interpolar el colorending-shape, que utiliza una palabra clave decircleoellipsepara gradientes radiales
Tipos de posicionamiento 2D
- Palabras clave:
toprightbottomleftcenter
- Una longitud porcentual, como
25%
Programación en CSS
La mayor parte de la programación en CSS consiste en crear selectores y luego especificar un conjunto de propiedades y sus valores necesarios. Las colecciones de selectores dan al contenido una forma visual, del mismo modo que las colecciones de lógica JavaScript crean características.
CSS tiene funciones. Puede realizar cálculos, lógica condicional, expresiones algorítmicas, estado y comportamiento basado en modo. También tiene propiedades personalizadas, que son efectivamente variables CSS que permiten que los valores se actualicen dinámicamente. Diablos, incluso puedes resolver fizzbuzz con CSS.
Al igual que otros lenguajes de programación, también hay una capa “meta”, con diferentes ideas y técnicas sobre cómo organizar, administrar y mantener las cosas.
Lanzar errores
A diferencia de otros lenguajes de programación donde el código existe en gran medida bajo el capó, CSS es muy visual. No verá advertencias ni errores en la consola si usa un valor no válido para una declaración de propiedad, pero obtendrá imágenes que no se actualizan de la manera que anticipó.
La razón de esto es que CSS es resistente. Cuando las imágenes no se actualizan debido a una declaración mal construida, CSS está dando prioridad, garantizar que el contenido se pueda mostrar a toda costa y rendirá todas las demás declaraciones válidas que pueda. Esto está en consonancia con los principios de diseño del lenguaje, los principios de la plataforma y los objetivos generales de la misión de la web.
Prueba
Demostremos cómo la escritura fuerte en CSS mantiene las barreras en tres ejemplos: uno con una declaración sencilla de propiedad / valor, otro con cálculo y otro con la redefinición de una propiedad personalizada.
Ejemplo 1: Declaración sencilla de propiedad / valor
Vea el ejemplo de Pen Basic de Eric Bailey (@ericwbailey) en CodePen.
Para este ejemplo, el navegador no comprende la border-style Declaración de “papa”. Tenga en cuenta que el otro .banner Las declaraciones de propiedades / valores del selector de clases son respetadas por el navegador y representadas, aunque border-style tiene una falta de coincidencia de tipos. Este es un ejemplo de lo resistente que es CSS.
El border-style La declaración espera uno de los siguientes tipos de estilo textual:
- Palabras clave de ámbito global o
- Sangría discontinua para una propiedad personalizada.
Si actualizamos border-style para utilizar un valor escrito válido de dotted, el navegador renderizará el borde.
Ejemplo 2: cálculo
El calc() La función en CSS nos permite tomar dos argumentos y un operador para devolver un resultado calculado. Si uno de los argumentos no usa un tipo válido, el cálculo no funcionará.
En esta Pluma, el p del selector font-size La propiedad espera un valor con un tipo de dimensión numérica (p. ej. 1.5rem). Sin embargo, la función de cálculo produce un valor de tipo no válido para el font-size propiedad. Esto se debe a que el segundo argumento de la calc() la función es una cadena"2rem") y no un tipo de dimensión numérica.
Debido a esto, el tamaño de fuente del párrafo vuelve al siguiente nodo principal más aplicable: el font-size de 1.5rem declarado en el body elemento.
Esto es un poco complicado, pero vale la pena señalarlo: combinar dos propiedades personalizadas en una calc() La función puede provocar errores. Si bien ambas propiedades personalizadas pueden ser válidas por sí mismas, calc() no aceptará tipos de texto con sangría discontinua. Piense en un escenario en el que podríamos intentar multiplicar las propiedades personalizadas que contienen unidades que no coinciden, p. Ej. --big: 500px y --small: 1em.
Ejemplo 3: propiedad personalizada redefinida
Al igual que las variables de JavaScript, los valores de propiedad personalizados se pueden redefinir. Esta flexibilidad permite cosas como crear fácilmente temas de color en modo oscuro.
En el :root selector de este CodePen, he establecido una propiedad personalizada de --color-cyan, con un valor de #953FE3. Entonces, en el .square clase, he actualizado el --color-cyan el valor de la propiedad personalizada será top. Mientras top es un valor tipeado válido, no es un tipo que background-color honores.
Tenga en cuenta que la propiedad personalizada actualizada tiene como ámbito .squarey no afecta a otros usos, como el borde derecho de la frase “Don’t play to type”. Y si elimina la propiedad personalizada redefinida de .square, verá que el color de fondo cian vuelve a aparecer.
Si bien esto es un poco artificial, sirve como un ejemplo de cómo la redefinición de las propiedades personalizadas puede escaparse de usted si no tiene cuidado.
Este fenómeno se puede encontrar en proyectos con mala comunicación, bases de código CSS más grandes y situaciones en las que se utilizan preprocesadores CSS para construir propiedades personalizadas a escala.
Estampación
Con el don de la retrospectiva, creo que la falta de advertencias de consola para CSS es un defecto y ha contribuido a muchas de las percepciones negativas sobre el lenguaje.
Esperar que un desarrollador note un cambio visual potencialmente pequeño es una pregunta demasiado grande y no los encuentra donde están para la mayoría de sus otras herramientas diarias. Hay un par de iniciativas que conozco que intentan abordar este problema.
Primero está stylelint, un linter creado específicamente para tratar con CSS y lenguajes de preprocesamiento similares a CSS. stylelint puede integrarse con editores de código, ejecutores de tareas, herramientas de línea de comandos y acciones de GitHub para ayudar a mantener su CSS bajo control. Esto le permite encontrarse con los desarrolladores donde ya se encuentran.
‘. ts (2339). Ver problema (opción F8). No hay soluciones rápidas disponibles. La información sobre herramientas apunta a un argumento llamado “contenido”.” class=”wp-image-337650 jetpack-lazy-image” data-recalc-dims=”1″ data-lazy- src=”https://i2.wp.com/css-tricks.com/wp-content/uploads/2021/04/s_0708EDBE931238A816D93A83B4887F09182621AB302D13AA8F54721B76236DB8_1617151000574_stylelint.png?resize=1024%2C138&is-pending-load=1#038;ssl=1″>salida de terminal stylelint.
En segundo lugar, está el excelente conjunto de opciones de inspección CSS de Firefox en sus herramientas de desarrollo. En particular, me gustaría llamar la atención sobre su capacidad para identificar CSS no utilizado. Esto es extremadamente útil para identificar selectores que pueden haber fallado por una falta de coincidencia de tipos.
Edición para desarrolladores de Firefox
Terminando
CSS ha sido fuertemente tipado durante tanto tiempo como ha sido un lenguaje de programación, y como lenguaje de programación ha existido durante mucho tiempo. También ha crecido mucho últimamente. Si no se ha registrado, hay algunas funciones nuevas e increíbles disponibles.
A medida que JavaScript fuertemente tipado se vuelve más popular, espero que ayude a los desarrolladores a sentirse más cómodos con el enfoque firme pero flexible de CSS.
Gracias a Miriam Suzanne por sus comentarios.