1<\/code>) is added to a string containing an integer (\"1\"<\/code>):<\/p>\n\n\n\nresult = 1 + \"1\";<\/code><\/pre>\n\n\n\nThe string containing an integer could have been unintentionally generated from a complicated suite of logic with lots of moving parts. It could also have been intentionally generated from a single source of truth.<\/p>\n\n\n\n
Despite the connotations that the terms \u201cweak\u201d and \u201cstrong\u201d imply, a strongly-typed programming language isn\u2019t necessarily better than a weakly-typed one. There may be scenarios where flexibility is needed more than rigidity, and vice-versa. As with many aspects of programming, the answer is dependent on multiple external contexts (i.e \u201cit depends\u201d).<\/p>\n\n\n\n\n\n\n\n
The other interesting bit is there is no formal definition of what constitutes strong or weak typing. This means that perceptions of what is considered a strongly or weakly-typed language differ from person to person, and may change over time.<\/p>\n\n\n
TypeScript<\/h3>\n\n\n
JavaScript is considered a weakly-typed language, and this flexibility contributed to its early adoption on the web. However, as the web has matured and industrialized, use cases for JavaScript have become more complicated.<\/p>\n\n\n\n
Extensions like TypeScript<\/a> were created to help with this. Think of it as a \u201cplugin\u201d for JavaScript, which grafts strong typing onto the language. This helps programmers navigate complicated setups. An example of this could be a data-intensive single page application used for e-commerce.<\/p>\n\n\n\nTypeScript is currently very popular<\/a> in the web development industry, and many new projects default to using TypeScript when first setting things up.<\/p>\n\n\nCompile time<\/h3>\n\n\n
Compile time<\/a> is the moment when a programming language is converted into machine code. It is a precursor to runtime<\/a>, the moment when machine code is performed by the computer.<\/p>\n\n\n\nAs with many things on the web, compile time is a bit tricky. A setup that utilizes TypeScript will stitch together component pieces of JavaScript code and compile them into a single JavaScript file for the browser to read and run.<\/p>\n\n\n\n
The time when component pieces compile is when they are all combined. TypeScript serves as a kind of overseer, and will yell at you if you try to break the typed conventions you have set up for yourself before combination occurs.<\/p>\n\n\n\n![\"A](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/s_0708EDBE931238A816D93A83B4887F09182621AB302D13AA8F54721B76236DB8_1617303324362_typescript-error-prompt.png?resize=1257%2C320&ssl=1\")
A sample TypeScript error in VS Code.<\/figcaption><\/figure>\n\n\n\nThe stitched-together JavaScript file is then ingested by the browser, which has its own compile time<\/a>. Browser compile time is highly variable, depending on: <\/p>\n\n\n\n- The device the browser is on, <\/li>
- What other work the browser is doing, and <\/li>
- What other work the device\u2019s other programs are doing.<\/li><\/ul>\n\n\n\n
TypeScript isn\u2019t directly used by the browser, but its presence is felt. JavaScript is fragile.<\/a> TypeScript helps with this fragility by trying to prevent errors upstream in the code editor. This lessens the chance errors occur in the JavaScript read by the browser\u2009\u2014\u2009errors that would cause JavaScript to stop functioning on the website or web app a person is using.<\/p>\n\n\nCSS<\/h3>\n\n\n
CSS is a declarative, domain-specific programming language<\/a>. It is also strongly typed. For the most part, values in CSS stay declared as authored. If a value is invalid the browser throws the entire property away.<\/p>\n\n\nTypes in CSS<\/h4>\n\n\n
The list of types in CSS<\/a> is thorough. They are:<\/p>\n\n\nTextual types<\/h5>\n\n\n- Globally-scoped keywords:
initial<\/code><\/li>inherit<\/code><\/li>unset<\/code><\/li>revert<\/code><\/li><\/ul><\/li>- Custom identifies, which are specifically used for things, such as providing a
grid-area<\/code> name<\/li>- Strings, such as,
\"hello\"<\/code><\/li>- URLs, such as
https:\/\/css-tricks.com\/<\/code><\/li>- Dashed idents (
--<\/code>), which are used to create custom properties (more on this in a bit)<\/li><\/ul>\n\n\nNumeric types<\/h5>\n\n\n- Integers, which are decimal numbers 0\u20139<\/li>
- Real numbers, such as
3.14<\/code><\/li>- Percentages, such as
25%<\/code><\/li>- Dimensions, a number with a unit appended to it such as (
100px<\/code> or 3s<\/code>)<\/li>- Ratios, such as
16\/9<\/code><\/li>- flex, a variable length for CSS grid calculation<\/li><\/ul>\n\n\n
Quantity types<\/h5>\n\n\n- Lengths:
- Absolute lengths<\/a>, such as pixels or centimeters<\/li>
- Relative lengths<\/a>, such as root ems or the viewport height<\/li>
- Time, such as
200ms<\/code><\/li><\/ul><\/li>- Angles, such as
15deg<\/code><\/li>- Time, such as
250ms<\/code><\/li>- Frequencies, such
16Hz<\/code><\/li>- Resolution, such as
96dpi<\/code><\/li><\/ul>\n\n\n\nDimensions and lengths might seem similar, but dimensions can contain percentages and lengths cannot.<\/p>\n\n\n
Color types<\/h5>\n\n\n- Keywords:
- Named colors, such as
papayawhip<\/code><\/li>transparent<\/code><\/li>currentColor<\/code><\/li><\/ul><\/li>- RGB colors:
- Hexidecimal notation, such as
#FF8764<\/code><\/li>- RGB\/RGBa notation, such as
rgba(105, 221, 174, 0.5)<\/code><\/li><\/ul><\/li>- HSL\/HSLA colors, such as
hsl(287, 76%, 50%)<\/code><\/li>- System colors, such as
ButtonText<\/code><\/li><\/ul>\n\n\nImage types<\/h5>\n\n\n- Image, which is a URL reference to an image file or gradient<\/li>
color-stop-list<\/code>, a list of two or more color stops, used for gradient notion<\/li>linear-color-stop<\/code>, a color and length expression used to indicate a gradient color stop<\/li>linear-color-hint<\/code>, a length percentage used to interpolate color<\/li>ending-shape<\/code>, which uses a keyword of either circle<\/code> or ellipse<\/code> for radial gradients<\/li><\/ul>\n\n\n2D positioning types<\/h5>\n\n\n- Keywords:
top<\/code><\/li>right<\/code><\/li>bottom<\/code><\/li>left<\/code><\/li>center<\/code><\/li><\/ul><\/li>- A percentage length, such as
25%<\/code><\/li><\/ul>\n\n\nProgramming in CSS<\/h4>\n\n\n
The bulk of programming in CSS is authoring selectors, then specifying a suite of properties and their requisite values. Collections of selectors give content a visual form, much as how collections of JavaScript logic creates features.<\/p>\n\n\n\n
CSS has functions<\/a>. It can perform calculation<\/a>, conditional logic<\/a>, algorithmic expressions<\/a>, state<\/a>, and mode-based behavior<\/a>. It also has custom properties<\/a>, which are effectively CSS variables that allow values to be updated dynamically. Heck, you can even solve fizzbuzz<\/a> with CSS.<\/p>\n\n\n\nLike other programming languages<\/a>, there is also a \u201cmeta\u201d layer, with different thoughts and techniques on how to organize, manage and maintain things<\/a>.<\/p>\n\n\nThrowing errors<\/h3>\n\n\n
Unlike other programming languages where code largely exists under the hood, CSS is highly visual. You won\u2019t see warnings or errors in the console if you use an invalid value for a property declaration, but you will get visuals that don\u2019t update the way you anticipated.<\/p>\n\n\n\n
The reason for this is that CSS is resilient. When visuals don\u2019t update because of a misconstructed declaration, CSS is prioritizing, ensuring content can be shown at all costs<\/strong> and will render every other valid declaration it possibly can. This is in keeping with the design principles of the language<\/a>, the principles of the platform<\/a>, and the overarching goals of the web\u2019s mission<\/a>.<\/p>\n\n\nProof<\/h3>\n\n\n
Let\u2019s demonstrate how strong typing in CSS keeps the guardrails on in three examples: one with a straightforward property\/value declaration, one with calculation, and one with redefining a custom property.<\/p>\n\n\n
Example 1: Straightforward property\/value declaration<\/h4>\n\n\n
\n See the Pen \n Basic example<\/a> by Eric Bailey (@ericwbailey<\/a>)\n on CodePen<\/a>.<\/span>\n<\/p>\n\n\n\nFor this example, the browser does not understand the banner\u2019s border-style<\/code> \u201cpotato\u201d declaration. Note that the other .banner<\/code> class selector property\/value declarations are honored by the browser and rendered, even though border-style<\/code> has a type mismatch. This is an example of how resilient CSS is.<\/p>\n\n\n\nThe border-style<\/code> declaration is expecting one of the following textual style types:<\/p>\n\n\n\n- Globally-scoped keywords, or a<\/li>
- Dashed indent for a custom property.<\/li><\/ul>\n\n\n\n
If we update border-style<\/code> to use a valid, typed value of dotted<\/code>, the browser will render the border!<\/p>\n\n\nExample 2: Calculation<\/h4>\n\n\n