Custom Properties have the potential to change how we write and think about CSS.

In most cases, I'd now consider it code smell if a media query or CSS selector swaps one variable for another. Rather than swapping variables it's better to define one variable, set its initial value and change it with a selector or media query.

Responsive designs being created today have to serve more users on more devices and with more varied abilities and preferences than ever before. And size and spacing of elements can quite literally make or break your layout. In this new world, strict pixel values are so Web 2.0. Let’s review modern CSS techniques for building future-forward flexibility into our layouts and components.

Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.

// Font-sizes Major Second, base 16px
$font-size-xsmall: 13px;
$font-size-small: 14px;
$font-size-medium: 16px;
$font-size-medlarge: 18px;
$font-size-large: 20px;
$font-size-xlarge: 23px;
$font-size-xxlarge: 26px;
$font-size-xxxlarge: 32px;
$font-size-giant: 36px;
$font-size-xgiant: 41px;
$font-size-huge: 52px;

In today's GUI Challenge, @AdamArgyleInk builds a wide gamut color palette with okLCH, checking accessible color pairs along the way, inspecting color with devtools, and showing many other neat tricks for leveraging the features of this new web color space.

Resources:
Try a demo → https://goo.gle/3MAx4NC
Get the source → https://goo.gle/3n4Sfcg

Accessibility: 60% difference in lightness

Color & Contrast is a comprehensive guide to color for user interface designers.

A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.

Nate Baldwin

There is a tremendous amount of spit and polish that goes into making a major website highly usable. A developer, asked how hard something will be to clone, simply does not think about the polish, because the polish is incidental to the implementation.

Correction in the thumbnail: This video was shot on April 2023

• It's not HTML5 or CSS3 - it's just 'html' and 'css'!
• https://developer.mozilla.org/en-US/docs/Web/HTML - Good documentation but not the spec!
• https://html.spec.whatwg.org/
• Content model - What is legal to nest
• Transparent: a > h1 is ok, but p > a > h1 not ok!
• https://caninclude.glitch.me/
• preload preconnect prefetch prerender for links
• Get your head straight: https://www.youtube.com/watch?v=UW1PEMBdX5E
• <header><main><footer> are important!
• Subheading <hgroup><h1><p> - Not <hgroup><h1><h2>
• Upgrade Your HTML (4 books)
• <menu> - like <ul>
• script - defer async type="module" nomodule
• <template id="mytable"> - Don't have to put html in javascript
• JavaScript is expensive, HTML is almost free!

The real question is whether the <a> element alone is an appropriate representation of a <button>. On a semantic level, there is a distinct difference between a link and a button.

A button is something that when clicked causes an action to occur.

A link is a button that causes a change in navigation in the current document. The navigation that occurs could be moving within the document in the case of fragment identifiers (#foo) or moving to a new document in the case of urls (/bar).

If you're concerned about the semantics and accessibility of using an <a> element (or <span>, or <div>) as a button, you should add the following attributes:

<a role="button" tabindex="0" ...>...</a>

One of the biggest problems in building fast loading websites is that a lot of times you’re stuck using third party assets that are — to be brutally frank — utter and total shite. Topping the list of…

A set of rules that will improve your typography 10x.

Use Traditional Point Sizes

Display     Double Canon    4.666
Heading 1   Canon   3.999
Heading 2   Double Great Primer 2.999
Heading 3   Double English  2.333
Heading 4   Double Pica 2.000
Heading 5   Paragon 1.666
Heading 6   English 1.166
Body        Pica    1.000
Fine Print 1    Small Pica  0.916
Fine Print 2    Bourgeois   0.750

Use Serif for Italic Text

Reduce Heading Spacing

The spacing between a heading and a paragraph should be less than the regular paragraph spacing. If regular paragraph spacing is used instead, the heading would seem too far away from the paragraph.

Use Thin Space

Thin Space might be the most underrated HTML entity. It can be used for a name like J. K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just perfect.

The HTML code is  . You can go even further with Hair Space  

Don’t Use Helvetica, Inter, & Roboto

From its start, Perl comes with most (Unix) core operating system trickery like forks, events and signals. So, you can implement real performing daemons for interesting tasks.

We will get into various features which show how straight-forward it is to implement an Apache-like webserver, with VirtualHosts, proxies, etc.

But we start by discussing many options how to set-up servers: processes, event-loops, and so on... before we reach to HTTP-servers processing requests.

Any::Daemon

• Use Apache as your front end ~30:00

A UI design case study to redesign an example user interface using logical rules or guidelines

Use space to group related elements
Be consistent
Ensure similar looking elements function similarly
Create a clear visual hierarchy
Remove unnecessary styles
Use colour purposefully
Ensure interface elements have a 3:1 contrast ratio
Ensure text has a 4.5:1 contrast ratio
Don’t rely on colour alone as an indicator
Use a single sans serif typeface
Use a typeface with taller lower case letters
Limit the use of uppercase
Use regular and bold font weights only
Avoid pure black text
Left align text
Use at least 1.5 line height for body text

Illustration placeholders for developers. Powered by Blush

Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.

A deep dive into CSS masking

• Use near-black and near-white instead of pure black and white
• Saturate your neutrals
• If you saturate your neutrals you should use warm or cool colours, not both
• Use high contrast for important elements
• Everything in your design should be deliberate
• Optical alignment is often better than mathematical alignment
• Lower letter spacing and line height with larger text. Raise them with smaller text
• Container borders should contrast with both the container and the background
• Everything should be aligned with something else
• Colours in a palette should have distinct brightness values
• Closer elements should be lighter
• Make drop shadow blur values double their distance values
• Keep container colours within brightness limits
• Make horizontal padding twice the vertical padding in buttons
• Nest corners properly
• Don’t put two hard divides next to each other

border-radius: 100vmax;

.full-width {
box-shadow: 0 0 0 100vmax var( --color );
clip-path: inset( 0 -100vmax );
}

Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

Scale: 1.25 Major Third

The hsl() and hsla() functions also have 0% usage in the data, and they have just as good of support as the hex codes. Why? HSL can do anything HEX can do, except it’s far more readable and easier to adjust. It’s just better, really.

CSS has a lot of pretty rad and powerful features for managing image rendering these days. Let’s leverage some of these, like aspect-ratio, object-fit, and object-position for when we need to use a single image in many different contexts.