Skip to content

Blag

  1. Revisiting Query String Hell

    Almost eleven years ago, I wrote a blog post titled "Query String Hell". A couple years later I wrote a query string parsing library. A lot has changed in the last eleven years, and since I was rebuilding my blog I felt it was time to revisit some of my older posts that have aged less like wine and more like milk.

    At the time there weren't many good references, nor tools available for client-side query string parsing. Fortunately, browsers have since adopted the URL standard, and implemented the URLSearchParams class.

  2. Musing about useBoolean

    I saw a useBoolean utility hook the other day which looked something along the lines of:

    const useBoolean = (defaultValue = false) => {
  const [value, setValue] = useState(defaultValue);

  const toggle = useCallback(() => {
    setValue((value) => !value);
  }, []);

  const on = useCallback(() => {
    setValue(true);
  }, []);

  const off = useCallback(() => {
    setValue(false);
  }, []);

  return [
    value,
    {
      toggle,
      on,
      off,
      setValue,
    },
  ];
};

    It got me thinking about how simple terse I could make the implementation, so I decided to write things out to see what it might look like.

  4. Getting Ordinal Suffixes in JavaScript

    I was recently looking into formatting numbers in JavaScript, and had to format a number with its ordinal suffix. That is, getting the "st" suffix for "1st", "nd" suffix for "2nd", etc. It seems like it would be easy enough to do, and because it seems so easy to do, there are many answers on Stack Overflow with many different attempts.

    Most of them are variations of this logic (don't do this):

    function ordinal(n) {
  switch (n % 100) {
    case 11:
    case 12:
    case 13:
      return "th";
  }
  switch (n % 10) {
    case 1:
      return "st";
    case 2:
      return "nd";
    case 3:
      return "rd";
    default:
      return "th";
  }
}

  5. Unbiased Decisions

    When you use data to make “unbiased” decisions, the questions you ask and the data you choose are the bias.

  6. A simple pattern for method overloading in TypeScript

    I was recently building some helper classes in TypeScript, and those classes could be called in a variety of ways.

    Many functions have different signatures that are compatible, largely through optional parameters.

    function example(foo: string, bar?: number, baz?: boolean) { ... }

    For the helper classes I was writing, the different signatures weren't compatible, and required some branching logic in order to support the different scenarios.

    Fortunately, TypeScript supports function overloading for cases where the argument types aren't necessarily compatible.

  7. Encoding data for POST requests

    Permalink: Encoding data for POST requests

    I'm grateful that Jake Archibald has taken the time to cover some of the browser's built-in APIs for managing form data. I've been building forms for years, and I still learned a lot from this post, particularly around FormData and how fetch handles different body object types.

    On a tangentially related note, I've been tootling around with remix.run for a personal project, and one of the core design decisions is to use native browser APIs whenever possible. It really is quite nice to be able to take a <form> element and convert it to a fetch request with minimal effort:

    fetch(form.action, {
  method: form.method,
  body: new FormData(form),
});

  8. The Future of CSS

    Permalink: The Future of CSS

    Miriam Suzanne gave an excellent talk about the future of CSS, outlining three of the newer working group proposals and specifications.

    Specifically:

    • cascade layers
    • scoped styles
    • container queries

    Having spent much of my career working on bespoke websites with drastically different needs and equally different approaches to design, it's gratifying to have such a clear view into the future of CSS. Having any one of the three features would be an enormous win for CSS architecture, but all three together? Revolutionary.

  9. Type Predicates on Properties

    I fell down a brief rabbit hole this morning while attempting to refactor some TypeScript code.

    I had some code along the lines of

    if (this.foo.bar?.baz === 'example') {

    that was repeated in a variety of locations.

    I wanted to refactor it to

    if (this.isExample) {

    but one of the nuances of that refactor is that the first version includes an implicit type predicate for this.foo.bar to not be undefined, because this.foo.bar must be set for .baz to equal 'example'.

  10. Modern HTML Boilerplate

    Permalink: Modern HTML Boilerplate

    Manuel Matuzovic has an excellent write-up of his modern HTML boilerplate.

    I really enjoy reading these back-to-the-basics type posts because I almost always learn about some new feature that I wasn't aware of before. This post was no exception. In particular there's a lot to know about icons and image previews that I now want to integrate into all of my projects.

  12. Media Query Ranges

    The Media Queries Level 4 specification introduced a new range syntax for media queries.

    @media (480px <= width < 768px);

    This is particularly useful because min-* and max-* media queries have always been inclusive of their boundary values.

    A common bug that can be hard to reproduce is when pre-set media queries overlap at the boundaries.

    @media (max-width: 768px) {
  .example {
    padding: 10px;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .example {
    // uh oh! Both the margin and the padding will apply
    // when the browser is exactly 768px wide 😱
    margin: 15px;
    width: 200px;
  }
}

    The classic solution is to make sure that the boundary values differ by 1px.

    @media (max-width: 767px) {...}
@media (min-width: 768px) {...}

    This works fine for units in px, but it can be problematic for values using em.

    @media (max-width: 29em) {...}
@media (min-width: 30em) {...} //sizable gap

    Since em units can be modified by the user by way of browser font-size settings, I've typically used 0.001 as my "epsilon" value to make sure that the em values are less than 1px apart, while still not causing an overlapping range:

    @media (max-width: 29.999em) {...}
@media (min-width: 30em) {...}

    Range syntax for media queries simplifies this by allowing both inclusive and exclusive bounds for min-* and max-* boundaries:

    @media (width < 30em) {...}
@media (width <= 30em) {...}

    Unfortunately, range media queries have almost no browser support at this time.

    Fortunately, there's another way to handle exclusive bounds on media queries that does have cross-browser support. This alternative method involves two media query features.

  13. My Focus

    Where did you go?
    I could have sworn
    you were here a minute ago.

    I looked at my phone
    to check a notification,
    only for a minute.

    Only when I looked up
    —half an hour later—
    did I realize you were gone.

  14. Web Animation Gotchas

    Permalink: Web Animation Gotchas

    This is an excellent overview of using the Web Animation API.

    I meant to share this a month ago when I first saw it, but it came up again recently when I was making some animation improvements to a website I've been working on, so there's no time like the present.

    I made some minor changes to the animateTo function included in the video for my own purposes, so the snippet I use is along the lines of:

    function animateTo(element, keyframes, options) {
  let cleanup = () => {};
  return new Promise((resolve, reject) => {
    try {
      const animation = element.animate(keyframes, {
        ...options,
        fill: "both",
        signal: undefined,
      });

      const finish = () => {
        try {
          animation.commitStyles();
          animation.cancel();
          resolve();
        } catch (e) {
          // handle browsers that don't support `Animation.prototype.commitStyles`
          reject(e);
        }
      };
      animation.addEventListener("finish", finish);

      // While the animation is not exposed through `animateTo`,
      // animations can still be cancelled via the `signal` option,
      // or when accessed from `Element.prototype.getAnimations`
      const cancel = () => reject();
      animation.addEventListener("cancel", cancel);

      // Add support for AbortController
      const signal = options.signal;
      const abort = () => animation.cancel();
      if (signal) {
        signal.addEventListener("abort", abort);
      }

      cleanup = () => {
        animation.removeEventListener("finish", finish);
        animation.removeEventListener("cancel", cancel);
        if (signal) {
          signal.removeEventListener("abort", abort);
        }
      };
    } catch (e) {
      // handle older browsers that don't have `Element.prototype.animate`
      reject(e);
    }
  }).finally(cleanup);
}

  15. More than Coding

    Permalink: More than Coding

    I meant to share this a couple months ago when I first read it. It's an excellent breakdown of some of the differences between software engineer levels and the type of work expected.

    As a tangent, Bonnie Eisenman uses the following roles for the various different levels:

    • junior
    • midlevel
    • senior
    • staff

    I like that Bonnie chose to label the various levels numerically. I prefer to use numeric levels when possible, as it helps to avoid some bias when someone switches to tech late in their career and takes on a "junior" role. Unfortunately there's no real standard for numeric levels.

    My preferred labels are along the lines of:

    • level 0: intern/co-op
    • level 1: junior
    • level 2: midlevel
    • level 3: senior
    • level 4: staff

    Anyway, go read Bonnie's post.

  16. Hacking the Prime Minister

    Permalink: Hacking the Prime Minister

    Alex's "Do not get arrested challenge 2020" is the best thing I've read all week.

    Somewhere around:

    I called at least 30 phone numbers, to say nothing of The Emails. If you laid all the people I contacted end to end along the equator, they would die, and you would be arrested.

    I laughed so hard I nearly fell out of my chair.

  17. Talking About Time

    I understand that dealing with time is hard, but it would be nice to be able to include a time in a message and have it automatically convert from my local time to the local time of the person I'm sending the message to.

  20. James Hong - Great Big Story

    Permalink: James Hong - Great Big Story

    I've seen James Hong's performances many times, but they only account for a tiny portion of his extraordinary number of roles.

    I first started recognizing him after his voice acting for Covetous Shen in Diablo III. He really leaned into the rich texture of his voice for Shen, which made Shen stand out as particularly memorable to me. Every time James appears in a TV show or movie I'm watching, I think to myself "It's Covetous Shen!"

  21. Leading Trim

    Permalink: Leading Trim

    This will be a great tool if it gets standardized and implemented. I've had a few projects where heading and paragraph spacing were important for their design systems, and this would have come in handy rather than needing to rely on a handful of work-arounds and approximations.

  22. Duration Notation

    One of the things that comes up pretty frequently in JavaScript are time spans. Animations, request timeouts, debounce delays, and throttles all need time spans to be specified. They come up quite frequently, but are—almost as often—inscrutable.

    Don't believe me?

    How long is 360000?

    How about 3600000?

    Did you have to count the number of zeros?

    …and then do some mental math to try to figure out how much time is meant?

    It's exactly these sorts of issues that lead to buggy behavior, where a 30 second timeout could turn into 3 seconds as easily as 5 minutes.

    Fortunately there are a few techniques that can make time spans much easier to work with.

  24. Oh shit, git!

    Permalink: Oh shit, git!

    I've been using Git for years, but I've never been great with Git CLI or really understood the inner workings.

    Julia Evans does good work, so I'm definitely going to check this out.

  25. Looking Both Ways

    2020 is like looking both ways before crossing the street, and then being hit by a plane.

  27. Cleaning Your Desktop and Downloads

    I don't like having a messy desktop.

    I know many people who use their desktop as temporary storage for random files, but seeing lots of files all over a desktop gives me anxiety.

    Instead, I prefer to use the downloads folder for temp storage. I have my browser settings set to download files directly to the downloads folder without asking, and I can quickly manage files from there.

    I don't like having a messy downloads folder either, but I only ever see it when I'm moving files in or out of it so it's not so bad.

    Regardless of what folder you use for temporary storage, over time there is a tendency for files to start to collect.

    I'm usually pretty good about deleting old downloads, particularly if they're just installers, or copies of files that I've got stored elsewhere, like email attachments or cloud storage.

    Even still, every now and then there are files that linger. Files that I've either downloaded or created that don't really belong in any of my existing folders. Sometimes they're text files with notes. Sometimes they're PDFs that I want to read and delete that I just never seem to get around to dealing with.

    If any of this sounds familiar, there's a simple system I use to keep my downloads folder tidy and my files organized. It's easy to remember, and it doesn't take much time or energy.

  28. Invert, Always Invert

    Permalink: Invert, Always Invert

    I read this post last week and it resonated with me.

    I particularly liked the quote by Charlie Munger at the end:

    It is remarkable how much long-term advantage people like us have gotten by trying to be consistently not stupid, instead of trying to be very intelligent.

  31. Thoughts on wearing a mask

    Wear a mask to avoid indecent exposure.

  32. Should I use px or rem units in CSS?

    In the fifteen years since rem was introduced, I've heard many variants of this question. This is my answer, including code samples to show how to achieve the best results.

  33. Sweet Child o' Mine cover by The Heimatdamisch

  34. Show Windows' Windows on All Virtual Desktops

  35. Shortcut to Zoom

  36. Organizing Your Filesystem IRL

    While working from home, one thing that helps me focus on work is avoiding clutter on my desk. Papers are particularly problematic as they're so thin that they can stack up over time without a noticeable difference until it suddenly seems that there's a teetering tower of precariously balanced "things to do". If you struggle with keeping your workspace clutter-free, I use a system that requires minimal effort and materials.

  37. Poor Planning

  38. Classes are just spicy attributes

  39. Spectacular View

  40. Beauty in Simplicity

  41. Styled Components Naming Convention

  42. Ceux qui rêvent by Pomme

  43. Hello Subgrid

  44. Emojinate

  45. Default Grid Columns, Rows, and Areas

  46. Media Mixin

    I've seen a lot of ways of handling media queries in Sass. This is my current favorite.

  47. Time Savings

  48. Scrabbler

    I built a word-finding website over the weekend as a fun little project.

  49. Who's the Hero Here?

    Jeff Bonforte gave an excellent talk at the Facebook At Scale conference. The entire talk is worth watching, but to me the most important part comes at 16:45, where he talks about the issues with hero culture and rewarding "firefighters".

  50. Fight or Run

  51. Are you a REAL developer?

    It's time to set the record straight on who is--and more importantly, who is not--a real developer.

  52. If you want something done

  53. The “S” in “IoT”

    The “S” in “IoT” stands for “Security”

  54. Never Take a Hard Shot

  55. Interesting Numbers

  56. Apeshit by The Carters

  57. Planning

  58. Why are we always wading?

  59. Learning to Juggle

  60. Light at the End of the Tunnel

  61. Many Maps

    Sometimes, instead of one-to-one mapping functions, it's useful to have one-to-many mapping where one input produces multiple output values within a single collection.

  62. For Else

    I think it would be nifty if loops could have "else" clauses. I'd particularly like it for templating languages.

  63. The Functional Shape of Loops

    Imperative loops can often be translated to a sequence of declarative functions. In this post I go over the three most common iterative functions and provide some examples of how they're used.

  64. Good Judgement

  65. Clinging to Mistakes

  66. Dynamic Sort Direction

    Looking at some functional structures to help make sorting more expressive while avoiding code duplication.

  67. Multisort via Composition

    An exploration of the structure of sorters and how to compose multiple distinct sorting functions into a single compound sorter using expressive syntax.

  68. Knight in Shining Armor

  69. Dots Oscillating

  70. Writing Good Release Notes

  71. Worst Version of IE

  72. Worm in Horseradish

  73. Never Trust a Thin Chef

  74. Asking the Wrong Questions About Self-Driving Cars

    Iyad Rahwan asks "What moral decisions should driverless cars make?" I answer that I'm willing to let them explode catastrophically killing everyone in a five block radius.

  75. New Tech Start-up Bubble

  76. CSS Frameworks are Box Mix Brownies

  77. Spaghetti Code

  78. It doesn't take long to go crazy

  79. Bad Assumptions

  80. How to Stop Hating Your Tests

  81. The Art of Labeling

  82. Effective Estimation

  83. A Radical Approach to Powerful Headings

    A deep dive into font scaling.

  84. Elon Musk Thinking About the Future

  85. Not Quite Horizontal Rules

    I really wanted to call this post "Angular Rules" but it's not at all about AngularJS, and I generally dislike clickbait. Rather than mislead people on what this is about, let me make myself clear: This post is about styling horizontal rules to be angular such that they slope at a nice angle.

  86. Thoughts on Bots

  87. Private Properties in JavaScript

  88. Just-in-Time Documentation

  89. How to Beat Procrastination Starting With Your Inbox

  90. Zeroing the Desk

  91. Patience

  92. Writing Less Damned Code

  93. Lollipop Code

    Some thoughts on code that's repeatedly redundant.

  94. The "null" URL

  95. Smarter Than I

  96. Response to "Buttons shouldn't have a hand cursor"

    I saw Adam Silver's post on Medium and I disagreed with some of his arguments.

  97. Immobile Device

  98. Collective Noun for Developers

  99. Fly Away

  100. Response to "Meaningful CSS: Style Like You Mean It"

    @tbaxter wrote "Meaningful CSS: Style Like You Mean It" a couple weeks ago, and it's been stuck in my mind. Recently there's been some amount of controversy around it from front-end developers, and I wanted to get my thoughts down before I forget.

  101. Response to "MaintainableCSS"

    @adambsilver recently published MaintainableCSS which aims to be a best-practices guide for writing CSS. It's a good read and gives generally sound advice. I made a rather terse remark about it's similarity to BEM on twitter, and I'm hoping to clarify my thoughts in long form because I tend to be verbose and twitter isn't an appropriate medium for conveying nuanced thoughts.

  102. Which KeyboardEvent key to use

    You might think that writing JavaScript for the browser to listen for keyboard events is something that we'd have solved after 20 years. Unfortunately, like many things in JavaScript land, it's a mess caused by naïve implementations of multiple inconsistent standards…

  103. Autoselectable textareas

    Sometimes it's useful to provide text or code to users so that they can copy and paste it elsewhere. This might be an embeddable code snippet, a generated license key, or maybe a recipe. What's being copied doesn't matter so much, but how you allow users to copy it does. Autoselectable textareas can be a great UX improvement for providing text to users to be easily copied to the clipboard.

  104. Simple Playlists Without JavaScript

    HTML is a powerful language that has a lot of features. In the current JavaScript- and framework-heavy front-end culture, it's easy to lose sight of the native features of HTML in favor of more JavaScript bloat. There are many instances where JavaScript is used to poorly replicate what HTML can do for free. In this post I'll cover how to make a simple youtube playlist with only HTML & CSS.

  105. Response to "Things to Avoid When Writing CSS"

  106. Jared Spool on Beans and Noses

  107. Maciej Ceglowski on William Howard Taft

  108. Useless Marketing Jargon

  109. The Right Way to Build a Text Editor

    I read an excellent article on medium on how [contenteditable] is terrible with a detailed mathematical explanation of why. More importantly it explained at a high level how Medium designed their editor and what was involved to make it not suck. It's a fascinating article, and absolutely worth a read.

  110. Happy Holidays from Project Fi

    I received a package from Google today. I was pleasantly surprised because I hadn't ordered anything...

  111. Shorth is Better Than Length

  112. Ambition of Pens

  113. Feline Affection

  114. Client Haiku

  115. Pet Happiness

  116. Scriptless Dynamic SVG

    You can change what SVG images display using the :target pseudo class. This even works when the SVG is referenced within <img> tags, which I think is pretty nifty.

  117. How to write code

    1. Write some functions, 2. Write the rest of the fucking code.

  118. Announcing QueryStringJS

    I made a JavaScript query string parsing library because all the others sucked.

  119. Justin Searls on the 80-20 rule

  120. Good Code

    I do not know what good code looks like. I would not recognize it if I saw it.

  121. They Say You Die Twice

  122. How Not to Bind Click Events to Hyperlinks

    A lot of JS tutorials online are teaching bad habits when it comes to binding click events. Take care when binding click events to links that you're not preventing the user from using native browser features.

  123. Das Keyboard

  124. Unstylish

    Sometimes designs are improved by what you remove rather than what you add.

  125. Comic Sansify

    Some days everything is Comic Sans

  126. Interview With Mike Smith About Nu Markup Checker

    Steve Faulkner gave an exceptional interview with Mike Smith about the Nu Markup Checker

  127. Debugging Clever Code

  128. Waiting for Change

  129. jQuery .data() Auto-casting Changes

    jQuery 1.8 rc 1 introduced some changes to how auto-casting numeric values was handled. I'm not particularly happy about it.

  130. Fall 2014 Redesign

    I felt like redesigning my wobsite, so I did. Check it out and let me know what you think in the comments.

  131. "Robot Boy" by Linkin Park

    "Robot Boy" by Linkin Park is stuck in my head.

  132. Skype: Removing Imported Sounds

    Learn how to remove sounds from Skype settings.

  133. Unidirectional JavaScript

  134. Two Hard Things

  135. Comments in Code Reviews

  136. “Shatter Me” by Lindsey Stirling

  137. Good Vacuums Suck

  138. Scott Hanselman on Email

  139. Changes to your Google storage plan

    I got an automated email from Google a couple weeks ago notifying me that they were changing the pricing of their Google Drive storage plans. My initial reaction was the standard sarcastic “oh that's wonderful, how much more is it going to cost me now?” I had been paying $2.50 per month for 25GB of storage. The new plan will be $2.00 per month for 100GB of storage! 20% less for 300% more. Google, seriously, how do you even make money?

  140. My Response to "Questions I Have For People Who Have Their Life Figured Out"

  141. Anonymous Companies

    I'm not sure that I support the idea of removing privacy for businesses. It's essentially an argument about restricting the liberties of companies, which is a restriction of the liberties of the people who make up those companies.

  142. No one cares how long you've been failing

    I'm going to be honest here: No one cares how long you've been failing. I'm not concerned if you've got a problem that's been bothering you for two seconds, and I'm certainly not bothered if it's something you've spent weeks trying to sort out. To be perfectly candid: I don't give a fuck about your time.

  143. Quote Styles Updated

    I've updated the way quotation-only posts are styled across the site, which included some new blueprints and templates in Kirby CMS. Nothing too fancy, but it was nice to change things up a bit and make quotes stand out and be a bit more readable.

  144. "My Understandings" by Of Mice & Men

    I've been listening to this song on repeat.

  145. Code Reviews

  146. Automating

  147. Wifi

    I decided to compile a list of fun names for wireless networks because the internet is made for listing things.

  148. Poorly Written Code

  149. True Friends

  150. Good Motherfucking Design

  151. Priorities

  152. Kerning

  153. Mathematics

  154. target="_blank"

    Every time a client asks me to add a target="_blank" attribute to a link somewhere on a website, I die a little inside.

  155. Recipes

  156. Mountains

  157. Static Checklist

    I added simple, static, pure CSS checklists to my website in 10 minutes at 1:00 AM. This is how I did it.

  158. Scalable videos with aspect ratio

    I finally sorted out a pure HTML & CSS way to have videos (and other elements) maintain aspect ratio when they're resized. This is awfully useful for fluid-width portions of responsive websites.

  159. Mumford and sons

  160. Bookmark this site

    A client requested that we add a bubble on the mobile version of the website to tell users to bookmark the page to their home screen on iPhone. In related news, the '90s called and asked for their terrible user experience back.

  161. Grouplove "Ways to Go"

  162. Africa (cover)

    Mike Masse and Jeff Hall perform an absolutely amazing acoustic cover of "Africa".

  163. CSS selectors you should code without

    You should generally avoid using the universal selector in CSS. More often than not it will apply to elements that would have otherwise inherited their styles from parent elements.

  164. Double Data

  165. Quick Google Hangouts

  166. Emergency Bourbon

    In case of emergency, drink glass.

  167. Irony

    Irony: The opposite of wrinkly.

  168. CSS Teamwork

  169. The Codeless Code

  170. Classy Images in Markdown

  171. What exactly is semantic HTML and how would I use it to describe the American flag?

  172. Typography for Vendetta

  173. Mullet of Websites

  174. Synonym for "sexy"

  175. Speeches and Skirts

  176. Saving Time

    A week in the lab will save an hour in the library.

  177. Web Components Looks Nifty

    I just found out about Web Components.

  178. Wine and Sewage

    A drop of wine in a glass of sewage is sewage. A drop of sewage in a glass of wine is sewage.

  179. Red Hands

  180. Affairs of Dragons

    Do not meddle in the affairs of dragons, for you are crunchy and taste good with ketchup.

  181. Fake Plants

    My fake plants died because I did not pretend to water them.

  182. Query String Hell

    You've been handling query strings wrong. It's OK, so has everybody else. When I say "everybody else" I mean that I've yet to find an accurately conforming library in any language that I use. I think it's finally time to cover all of the complicated parts of query strings in hopes that someday, someone will get them right.

  183. The Road Not Taken

    "The Road Not Taken" by Robert Frost

  184. Polldaddy's API Sucks

    Polldaddy has a terrible API

  185. The Past Wasn't Better

    The past wasn't better, we just forgot about all the shitty shit.

  186. Favorite Pies

  187. Err vs Arr

    To err is human. To arr is pirate.

  188. The Bells

    One of my favorite poems by Edgar Allan Poe

  189. Question

    Have you asked a good question today?

  190. Clumsiness

    Clumsiness will bring about a change of pants.

  191. HTML, CSS, JS

    HTML belongs in .html files; CSS belongs in .css files; JS belongs in .js files.

  192. Confusion

    Confusion is like pineapple.

  193. Computers vs Programmers

    Computers are incredibly stupid machines with the ability to do incredibly smart things. Computer programmers are incredibly smart people with the ability to do incredibly stupid things.

  194. Brand new blag!

    First post on my brand new blag. I should try to say something inspirational...but I won't.