Forem: Tommy Hodgins

Five Things I Wish I Knew Starting Out

Tommy Hodgins — Wed, 08 Nov 2017 21:11:57 +0000

today's trendy library often turns into tomorrow's technical debt: try to build projects as lightly as possible
do things correctly the first time, because you wont be coming back to refactor it later like you plan
be liberal when forking, backing up, and saving copies of your work — disk space is much cheaper than labour
you learn more by building 100 tiny projects than 10 large projects, repetition reveals patterns and teaches skills faster than the size of the projects
there is no end to what you can learn about web development but your lifetime is finite, to stay on top of your skillset you must learn to stay focused

Reflections on the first CSS Stylesheet

Tommy Hodgins — Wed, 18 Oct 2017 15:26:31 +0000

This is probably the first CSS stylesheet released to the public, it comes from HÃ¥kon W Lie's initial proposal for CSS in October 1994!

As I look over it in 2017 I notice some interesting things represented here:

single line comments (all comments here are single-line comments starting with #)
custom-set cascade (no calculating based on selector specificity)
pt, mm, and cm units are as old/foundational to CSS as px
Setting font.size or space.left then using font.size * 2 and space.left + 0.5cm later as values is like a precursor to CSS variables today
.first seems to be either a pseudo-element like ::first-line or ::first-letter, or a pseudo-class like :first, :first-child or :first-of-type
x > y ? a : b similar to at-rule logic like @media queries
REAL_HEIGHT looks like environment values, something brand new in CSS
separate screen and print media styles

So even as CSS grows over the years, it's still striving to match some of the expressive power intended from the beginning.

#
# This is an initial style sheet. It should provide fallback values
# with low influence. Also, at the end, the user has added some
# favorite settings
#

0%          # 0% impact, i.e. fallbacks

# first, set some common defaults

font.family = times
font.size = 12pt        # alternative units are px, mm, cm
font.slant = normal
font.weight = normal

h1.font.size = font.size * 3
h2.font.size = font.size * 2.5
h3.font.size = font.size * 2

strong.font.weight = bold
em.font.slant = italics
tt.font.spacing = proportional


align.style = left      # paragraph alignment
h1.align.style = center


space.left = 0pt        # set the white space surrounding paragraphs
space.right = 0pt
space.above = 4pt
space.below = 4pt
space.first = space.left + 0.5cm    # i.e. some extra indentation

head.space.above = 15pt         # straying from the 4pt default above

list.space.left = 1cm           # extra indentation for all lists
list.space.first = 1cm

# window-wide settings

AGE > 3d ? window.background = pale_yellow : window.background = white

window.foreground = black

window.width = 400px
window.height = REAL_HEIGHT - 50px

window.margin.left = 2cm
window.margin.right = 2cm
window.margin.above = 2cm
window.margin.below = 2cm

#
# paper works different
#

print.font.size = 10pt

#
# The user has redefined some of the default values below
#

100%    # first, redefine influence to dictatorship

font.family = helvetica

#
# after this, the rest of the influence is handed over to the style
# sheets of the incoming documents
#

Breaking Free from the CSS Specificity Trap!

Tommy Hodgins — Sat, 14 Oct 2017 21:25:56 +0000

Have you ever wished the specificity of the CSS rules you were writing could be different from the selector you have used?

Watch me break free from the specificity trap using EQCSS and ReSpec, and learn how the technique works so you can use it in your own projects!

Setting Custom Specificity for CSS Rules on YouTube

Thanks for watching, happy hacking!

Follow me on twitter ➸ https://twitter.com/innovati

My CSS Wishlist

Tommy Hodgins — Tue, 12 Sep 2017 01:56:43 +0000

Selectors

:previous to select the previous element sibling
:parent to select the parent element
:closest(selector) to select the closest ancestor matching a selector
:ancestor(selector) to select all ancestors matching a selector
[attribute < number] select if attribute is less than a number
[attribute > number] select if attribute is greater than a number
[attribute <= number] select if attribute is less or equal to a number
[attribute >= number] select is attribute is greater or equal to a number
:attribute(partial-name-*) select by partial attribute match
:tag(partial-name-*) select by partial tag name match

At-Rules

@element selector (condition) { stylesheet }

Units

ew 1% of element's width
eh 1% of element's height
emin equal to min(1ew, 1eh)
emax equal to max(1ew, 1eh)

Values

auto-expand as a value for width and height properties
offsetWidth, offsetHeight, offsetLeft, offsetTop
scrollWidth, scrollHeight, scrollTop, scrollLeft
innerHTML.length, value.length
cursor X position, cursor Y position

Properties

aspect-ratio to set height based on the element's width and a ratio

Functions

clamp(min, mid, max) to limit scalable values with a minimum and maximum
round(number) gives the nearest integer to a given number
floor(number) gives the largest integer equal or less than a given number