Instantly share code, notes, and snippets.


This work was done using my spare time, using skills I had learned in employment and in more spare time. I have experienced very little oppression in this industry due to class, gender, age, sexual orientation, ethnicity etc. These are privileges & advantages not afforded to many working-class and disadvantaged people. Always keep in mind the social context in which code is written, and what kind of people get to write it.

View today.compiled.css
Stronger "today" indicator for date-select mini-calendar.
The current "today" indicator already has bold text, but that might be a bit subtle
for some users (especially those with vision impairments or poor font rendering).
This uses a coloured background and a faint light rim that remains when "today"
is also the selected day, to save users from having to select a different
day to double-check they have correctly selected "today". This also helps
for more instantly noticing the current day when skimming through months.
View i-pledge-to-be-better
# I Pledge To Be Better
I want our industry to be a safe, welcoming and inclusive place for everyone, regardless of
their gender, abilities, skin color, sexual orientation, age, class, neuro-diversity or any other attribute.
I acknowledge that this is not currently the case, and will do my best, to the extent that I can
afford to dedicate to this, to help make ours a better community and industry.
I value the diversity of perspectives that people with different backgrounds bring to the table.
I will call out exclusionary practices, behaviors or cultures and see how, together, we can perhaps
reshape them to be inclusive and supportive instead.
View crossbrowser-alpha-colour.scss
// This lets you specify the colour of the backdrop behind your transparent
// foreground colour - ideally with a variable - so that Sass can use its
// `mix` function to get fake transparency. It looks identical to real
// transparency (for solid-on-solid colour). IE8 can use `filter` to get real
// *background* transparency, but if you use this you can also get
// "transparency" on border-color, font color, and everything else. It
// defaults to the most legitimate transparency available.
// It doesn't expect Modernizr, but it does expect some kind of similar 'IE8'
// class in the `<html>` element, like H5BP's. Can Modernizr detect the old MS

BEM – meaning block, element, modifier – is a front-end naming methodology. CSSWizardry uses a naming scheme based on BEM, but honed by Nicolas Gallagher. The naming convention follows this pattern:

.block {}
.block__element {}
.block--modifier {}
  • .block represents the higher level of an abstraction or component
  • .block__element represents a descendent of .block that helps form .block as a whole
  • .block--modifier represents a different state or version of .block
View Ancient HTML cleaning regexes
# Exclude from find-all
-tmp/*, -.sass-cache/*, -*.min.*, -*-min.*
# Deprecated attributes
# If there's no quotes, you can also hit their values