Sentinel: Your Web-Performance Watchman

Use zero-width spaces to stop annoying Twitter users

Written by on CSS Wizardry.

Table of Contents

Being the typically-polite Brit that I am, I often find myself feeling sympathetic when I see people tweet things like I used Sass’ @extend, and that @extend mentions a Twitter user who doesn’t want to see that tweet at all. This doesn’t just apply to @extend, either; what about @media, or @import, or anyone who has a Twitter handle that’s also a CSS at-rule?

This morning, I had an idea that might ease their suffering: use zero-width spaces to avoid mentioning people when you don’t mean to. Instead of writing @import, you’d write @[zero-width-space-here]import.

The only problem with this is that, on a Mac, at least, there is no shortcut for a zero-width spaces. Copying and pasting it—which, as you can imagine, is quite difficult—from Wikipedia is too much effort to even bother…

I’ve long been a fan of iOS’ (and now Mavericks’) keyboard shortcut mappings, so I decided to make use of these again. I’ve mapped the following pairs:

!@import    @​import
!@media     @​media
!@extend    @​extend

The reason for the exclamation mark is so that I can still actually write @import when I need it in my CSS/Sass; the !@import version is just for use on Twitter.

To add these shortcuts on your Mac:

  1. System Preferences
  2. Keyboard
  3. Text

On your iPhone:

  1. Settings
  2. General
  3. Keyboard
  4. Shortcuts

Copy/paste the above rules into their respective boxes, and done. Add any more that you think might be useful.

I just used this for the first time, it worked a treat.



Did this help? We can do way more!


Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.


Suffering? Fix It Fast!

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

  • Talk & Workshop

    WebExpo: Prague (Czech Republic), May 2024

Learn:

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.