Translating Between Typographical Terms and CSS

Using a baseline that works across multiple columns/font sizes is a complex exercise in CSS. You will need to use a combination of line-height, font-size and probably padding. It requires a site-wide commitment and can be quite complex if you want a true baseline rather than just a vertical rhythm. More details from Smashing Magazine.
Cap Height
Cap Height cannot be derived or manipulated in CSS. You can calculate the Cap Height of the font you are using with this script.
Moving the descender line independently of the baseline is not supported in CSS. If you must try, here are some ideas for egregious hacks.
Italic is the simple matter of using font-style: italic.
Leading (or line spacing) is complicated. CSS’s line-height property does much the same job. But instead of determining the distance baseline-to-baseline, it determines the distance between two lines below the baseline and even the descender line. You can get a real baseline-to-baseline leading with some margin/padding and some math but it can get messy: this article has more.
Set using the font-size property. More normally specified in pixels, ems, rems or percentages than in the traditional point size. Largely because 1/72nd of an inch doesn’t have much meaning in the various screen sizes that exist.
Serif and Sans Serif/Grotesk fonts are set with the font-family property. To get the system default serif or sans serif font use serif or sans-serif as the property value.
font-vari­ant: small-caps. Note this will produce “fake” small caps if the font you are using does not contain separate small caps information.
You can get a broad control with the letter-spacing property and use your font’s included kerning properties (when present) with the font-kerning property. Note that as of 2018 font-kerning is not supported in Microsoft browsers and requires a vendor prefix in Safari.
The font-weight property accepts the values normal and bold as well as 100-900. The font being rendered must support the chosen value which is very common for normal and bold but less so for the numeric values.

bakert’s Laws

bakert’s First Law
All production code is shit.

bakert’s Second Law
It’s more important to have a standard than what the standard is.

bakert’s Third Law
TODOs don’t get TODONE.

Horizontal Scroll a Table “In Place”

This is a a pretty cool trick for mobile where the amount of information you want to display just isn’t going to fit in the width available. Have the table horizontally scrollable …

ID First Name Last Name Email IP Address App Company Country Hash Registered Completed Confirmed Eyes Hair Favorite
1 Thomas Perez com.myspace.Toughjoyfax Brightbean South Africa 1LqnJGirgwjyMSHxTRRrSbxv5TuuxZTLwK false false false “Puce Pink Yellow
2 Michelle Nelson gov.nps.Fintone Bubblebox China 17ANZgWGNB2B75qoRXS8NrxNYhwf67VBV3 true false false “Green Aquamarine Red
3 Carolyn Ramos com.kickstarter.Quo Lux Zooxo Brazil 16ypa5ZrLoTPQa3dsSWN2aGJQsSq494msa false false false “Fuscia Khaki Pink
5 Gloria Kelly com.stumbleupon.Bigtax Meevee Bulgaria 15MyxCQerGT64DHKZjQvb8bRgTvQDxPEVW true false false “Orange Orange Mauv
6 Heather Elliott io.pen.Matsoft Jabbertype Russia 1ctfF4kTwX4G7VtjmPqA3jDSVaecEUEpj false false true “Fuscia Mauv Khaki
7 Chris Alvarez org.bbb.Mat Lam Tam Voomm Cyprus 1HZQu9rRYyYdTqLBgri268yE9g3ssh6oQZ true false false “Goldenrod Khaki Goldenrod
8 Rebecca Ramos gov.cdc.Voyatouch Centizu Latvia 1LREwA3au2AFsssgV3k58LDkBDQqMhwJPi false false true “Puce Pink Goldenrod
9 Cheryl Walker com.histats.Holdlamis Twitterwire China 16Z6gUpUVcPFaiWfD8Mg7RPUhXhJJHjxJM false true false “Teal Maroon Turquoise
10 Lawrence Jacobs com.patch.Cookley Latz China 168Zpb6b9jCrNFzQ1WJeYwdAEAsfg5Q7Y7 true false false “Mauv Red Orange
11 Larry Morgan uk.nhs.Y-find Fiveclub China 1BUE62CFLctCnoNcL1fFPfPjXEtfjqo3aC true true false “Teal Green Violet
13 Elizabeth Myers Voolia Indonesia 14fsux3DUUsZpUxims3HnzanxZuFP174Px true false true “Goldenrod Fuscia Pink
14 Jeffrey Hernandez com.blogtalkradio.Zontrax Zoovu Ivory Coast 1Lg8itU8pTn1thF82rvqfjMWo4R1esbzPc false true false “Fuscia Violet Red
15 Roger Burns Yodoo Portugal 1Kv5osyo26akrsjjAkN1tmLR5yuxrro4dQ false false false “Pink Indigo Mauv
16 Ryan Burns Cogibox Philippines 168XyNGMe2aQkbQnj2zV1TndncUCiZsx3f true false false “Mauv Maroon Indigo
17 Philip Cunningham com.sbwire.Bigtax Yata Argentina 1BPNVNMkovTu18ooLeKgZfReLsNjSm4Q1n false false false “Khaki Purple Fuscia
18 Diana Armstrong gov.ed.Viva Npath China 14EYfzQ4pZ5CkkckkGZbEr6KmYVhyKL4UM true true false “Goldenrod Turquoise Purple
19 Brian Berry gov.senate.Span Topicshots China 1Ez7qMkjt2o7j55mRRMYviQFtX9n5CMAx3 false true false “Crimson Aquamarine Puce
20 Steve Clark Kwilith Russia 1MowPLi2JQqBLEwGpC5xM9xFXZt6P96tkw true false true “Orange Yellow Purple

This is achieved with overflow-x: auto on the containing div, width: 600% on the table and normal widths adding up to 100% on the columns.

Compressing a program in plain text

I came across this neat way of sharing a program in limited space in plain text (Stack Overflow comments are limited in length).

require 'base64';require 'zlib';puts Zlib.inflate(Base64.decode64("eJxlkMEOwiAQRO98hekFuGzxQEwPXvwR01ZqiYHqBk2Tln8XDlWgnDbM25nJonq9NaoD7ZTtR9PigxK09zM7AkgRHieXTYHOsBNf1nklM6B6TuhYpdp+rPgSdiCOi/d/kQ71QBOtAVFLEDly05+UYQ2H+MckL6z0zioDdJG1S9K1K4iQAW66DhnmiqRYKEJFXMByux+XuOJ2XdO60dKsjC7aBtyTL5O5hLk="))

When run this produces:

require 'benchmark'
require 'mathn''i/i'){rng.each{9/5}}

Source: Stack Overflow

For MySQL, utf8 is not enough, you want utf8mb4

Someone entered 😨, the “fearful face emoticon”, in a forum on a website I run. But it didn’t display.

Here’s what I had to do to get it to work:

  • ALTER DATABASE dbname CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci
  • ALTER TABLE tablename CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci
  • In my.conf:

    default-character-set = utf8mb4

    collation-server = utf8mb4_unicode_ci
    init-connect=’SET NAMES utf8mb4′
    character-set-server = utf8mb4

Note that if you are converting from latin-1 not utf-8 you will need to convert columns to blob and then to utf8mb4 to correctly preserved already latin1-encoded special characters.

Convert from underscore_style to camelCaseStyle and Vice Versa

  // AStringConverted -> a_string_converted
  function toUnderscoreStyle($s) {
    $f = function ($match) { return "_" . mb_strtolower($match[1]); };
    return preg_replace_callback('/([A-Z])/', $f, lcfirst($s));

  // a_string_converted -> aStringConverted
  function toCamelCase($s) {
    $f = function($match) { return mb_strtoupper($match{1}); };
    return preg_replace_callback('/_([a-z])/', $f, $s);

Arguing on the Internet


“Don’t read the comments” is a pretty good warning. You can waste a lot of time shouting at strangers in comment threads or fighting with friends-of-friends on Facebook. But if you feel like you do have to engage I really like these rules from Anatol Rapoport by way of Daniel Dennett to give you a fighting chance of changing a mind rather than just blowing hot air.

How to compose a successful critical commentary:

  1. You should attempt to re-express your target’s position so clearly, vividly, and fairly that your target says, “Thanks, I wish I’d thought of putting it that way.
  2. You should list any points of agreement (especially if they are not matters of general or widespread agreement).
  3. You should mention anything you have learned from your target.
  4. Only then are you permitted to say so much as a word of rebuttal or criticism.