HTMLInputElement type number fun fact

I am a web developer by day and was working on a feature that was supposed to create an input field that could only accept numbers. Super easy right?!

<input type="number" />

I’m demoing said feature to the client (after having tested this) and I’m bashing on the home row and nothing is printing. I type some numbers and they print. Then I grab some text and paste it in an bam, a single letter e. That’s weird. I try another word. Another letter e. Hmm. I tell the client we’ll look into it.

I shared this with a coworker and they were able to produce the same behavior. I then decided to look up the issue on the internet and of course this is a well known thing. I dig a little deeper and realize that the HTML spec allows for this behavior because of floating point numbers. For instance 2e5.

Anyways, that was a fun little journey.

Link to the HTML spec for input type=number

How to show/hide desktop icons on macOS

I often want to do this while doing a demo or filming my screen so I’m writing this down so I remember. I found this on osxdaily.com and have amended it slightly. Maybe this is a mac app I could make…

To hide:

defaults write com.apple.finder CreateDesktop -bool false && killall Finder

To show:

defaults write com.apple.finder CreateDesktop -bool true && killall Finder

Drafts custom action to create new draft in current workspace with keyboard shortcut

I made a Drafts custom action that looks at the current workspace, grabs the tags, and applies them to a new draft that is opened in the editor. It also supplies a keyboard shortcut:


(option + control + command + N)

βŒ₯βŒƒβŒ˜N

I hope someone else finds this as useful as I do.

Link to action

Code

/// a drafts script that looks for the current workspace 
/// and adds a new draft with the associated tags
/// then opens that draft in the editor

const currentWorkspace = app.currentWorkspace;
const workspaceName = currentWorkspace.name
const tags = currentWorkspace.tagFilter.split(",");

let d = new Draft();
tags.forEach(tag => d.addTag(tag));

editor.load(d);

Add a dark (or light) theme to your website using prefers-color-scheme

This is one way to add a dark or light theme to your website. I use Micro.blog for my website, but this should be the same for basically any website hosting service or static website that one would use.

Caveat: while I work as a software engineer and have spent many years building web code, I don’t know everything so some of the nitty gritty details might be wrong, but the code will make your website gain the ability to display a light and dark mode.

Important note: I may say theme here, but what I really mean is this is how you can set your website to automatically change colors based on the device’s settings. In macOS this is called appearance (found in System Preferences -> General -> Appearance). In windows they call it colors (found in Settings -> Personalize -> Colors) and I have no idea what Linux distributions call it.

tl;dr (too long; didn’t read. take me to the code)

How to do the thing

Finally, how to do the thing.

This tutorial assumes you know a little bit about html and css or at the very least can use a search engine to find the relevant details if I miss something. I’ll do my best to cover it all and provide links.

Open either your website’s main html file or main css file.

Figure out what your background-color and color are in the css. If you haven’t set them that’s fine too. By default the background color of your website will be unset which will likely render as white or #fff in hex and your foreground color will likely be black or #000 in hex. (Hex colors are one way to define colors in css, but there are a group of named colors as well.)

Note: color refers to text or foreground color and background-color refers to…background color. The below code snippet will leave your background as white and set your foreground color to gray. It will also set your font to the apple system font, but feel free to put whatever you want there. You’ll notice there are a bunch of fonts separated by commas. Those are fallbacks in case the first one isn’t present.

Assuming you’re starting with an un-styled light mode website, you’re going to put your colors from the above step in a chunk of code that will either live in your css file or in a <style></style> tag in your html.

Code

Starter light mode

@media (prefers-color-scheme: light) {
  html {
    color: #555;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
      'Segoe UI Symbol';
  }
}

Screenshot of gray text on a white background

Next you’ll add a dark theme. You can choose whatever colors you want for background and foreground, but for simplicity I’ll stick with black (#000) for the background and white (#fff) for the foreground. Keep in mind that black background and white text is a bit intense to look at so feel free to mess with these colors. I’ve included the font-family attribute in both snippets, but you don’t need it in both or either unless you plan on setting a different font when in dark mode versus light mode.

There are likely other elements that you’ll want to include in your dark mode styles (like pre or code) that will look weird if you only have body styled, but I’ll leave that as an exercise for the reader.

Starter dark mode

@media (prefers-color-scheme: dark) {
  html {
    background-color: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
      'Segoe UI Symbol';
  }
}

Screenshot of white text on a black background

Ending thoughts

I wrote probably way more than I needed to for what amounts to less than 20 lines of css, but I wanted to give some background and context.

My inspiration for doing this to my website was browsing the web at night and being blinded by other’s websites. I wanted to be able to make my website not to searing and I made this post to hopefully share this information with others. At the end of the day you can take the two snippets and put them on your website and you’ll enable the ability to have two different themes for your site that follow what the operating system is rendering in terms of appearance.

You can also get much more creative and have a number of themes, but you’ll likely need some sort of javascript to enable something like that. Maybe I’ll write about that in the future. Who knows.

If you enjoyed this post, feel free to leave a comment or let me know on twitter @nickkacz or if you use micro.blog (I hope you do) send me a mention there. I’d love to hear about it or what I could do to help.

– Nick

My theme

And finally this is what my dark theme looks like:

@media (prefers-color-scheme: dark) {
  html {
    background-color: #000;
    color: #b4b4b4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
      'Segoe UI Symbol';
  }
  .site__name {
    color: #b4b4b4;
  }
  pre {
    background-color: #282828;
    color: #b4b4b4;
  }
}

And here is my light theme:

@media (prefers-color-scheme: light) {
  html {
    color: #555;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
      'Segoe UI Symbol';
  }
}

Links

MDN prefers-color-scheme docs

MDN css color keywords docs

WWDC 2022

Just finished the WWDC 2022 keynote a little while ago and I’m super pumped. From WatchOS 9 to Stage Manager, Messages Edits, and everything else I’m incredibly excited for this fall. I’m also very curious what sort of hardware we’ll see as the year carries on. New computers? New Watch? New headphones? New Mac Pro? The list goes on.

ο£Ώ

Edit: I almost forgot about Lock Screen improvements as well as the updates to Wallet that add delivery notifications. Can’t wait for the Platforms State of the Union to hear about the nitty gritty details.

How to fix "waiting for other installations to complete"

I was trying to install an app (MS Teams) but was seeing a strange message from the installer:

waiting for other installations to complete

I found something on stackoverflow.com on how to fix it and it worked like a charm:

sudo killall -1 installd

Note: I did not run the command to remove any locked files, just filled the process and tried the install again.

Hopefully this helps someone else (or future me).

TIL: Xcode has the ability to split editors vertically

I have used VSCode for much of my career (for historical .NETy reasons) and really like its ability to split editor panes. Particularly the ability to split horizontally and vertically. I was bummed when moving to Xcode and found I wasn’t able to do this…Until now!

How to do split editor vertically in Xcode

  1. Open Xcode (seems like it has to be a project, not a playground)
  2. Go to File -> New -> Editor Below (ctrl + option + cmd + T) macOS Xcode menu with Editor Below highlighted

This is very exciting, but I look forward to when other editors support the VSCode feature of dragging those pane corners more than one direction at a time. (VSCode allows you to grab at the corner of two panes and drag horizontally, vertically, or diagonally all in one motion while Xcode and Nova only allow one direction per click).

MarsEdit Download Preview Template Feature

I use an app called MarsEdit to author my blog posts. I really like it and I recommend anyone using a Mac to check it out. Great piece of indie developed software that just works.

Something cool that it enables is the ability to preview your post in the style of your blog. The template that comes with the app isn’t bad but of course it likely doesn’t match your site. In the past I’ve gone into the web inspector in Safari and took the html for my site and put it into the preview template.

I just learned however that MarsEdit has the ability to download a preview template from your website. I clicked the button and ~10 seconds later I have a preview of my site that just works. What an amazing feature. I don’t know if it’s new or not, but really appreciate the coolness factor.

Thanks again Red Sweater Software and @danielpunkass!

Universal Control on macOS and iPadOS

I’ve been using Universal Control since yesterday afternoon and I really love it. It’s seamless and I especially appreciate being able to isolate certain things to the iPad. This is particularly useful because I often pair program at work and it makes it so that I can talk to my wife or whomever without having to stop sharing or share that potentially private info. I wish the iPad could enable some sort of screensaver because I have some worries about it showing the same black text on white screen for most of the workday, but it’s not a deal breaker. If you have the means, I would highly recommend giving it a try. It feels even better because I’m using the Magic Trackpad so I can do all the gesture things on iPadOS.

More places you can debug with a REPL

Debugging by starting a REPL at a breakpoint is fun

This was a really interesting read about debugging using REPLs. Two more to add to the list are:

  • .NET using visual studio’s immediate mode (I think that’s what it’s called)
  • LLDB in Xcode (and probably outside of Xcode too).

I am a huge proponent of using the debugger statement in JavaScript. Debugging allows you to be able to see something at a moment in time and also inspect and execute other things. It’s like freezing time. I am generally not a fan of print statement debugging, but I recognize that sometimes you have to do what you have to do. πŸ€·πŸ½β€β™‚οΈ