Thursday, October 6, 2022

Two Flexbox Basics

Flexbox lets you lay out page elements similar to the boxes & springs approach used by other frameworks.

To turn it on set style="display:flex;"wherever you'd like to use it. This can be the entire <body> or just a <div>. Flex layout will now apply to any elements within this element. You can think of these child elements like the boxes from boxes & springs.

To add springs use justify-content. It puts springs in the places you'll most likely want them with the values space-evenly, space-between, and space-around.

Thursday, June 13, 2019

Unix/Linux Lineage

I created a diagram to better understand Unix/Linux lineage. Posting incase it's useful to others. The other ones out there were way too complicated for my purpose.

Tuesday, October 10, 2017

Understanding codecs and containers

This is a useful article for understanding video formats.

Tuesday, July 11, 2017

Friday, January 22, 2016

The Best Javascript Autocomplete Libraries Analysis and Roundup

I run a timezone conversion website that has text fields for selecting the locations that you want to convert times between. There's a list of hundreds of common cities for people to choose. I created the site over 5 years ago and made a "Show HN" out of it (this was before there was Product Hunt, and even before there was "Show HN". Back then we called it a "weekend project").

The location text fields use an autocomplete library I chose in the beginning and haven't updated since. These fields aren't working well in Android Chrome and I've been getting a steady stream of emails from users complaining simply that the site "didn't work". An aside, if only everyone knew that when you report a web problem please say your browser, OS, and then both expected and actual behavior.

I decided to do some research on the top Javascript autocomplete libraries. There's tons so I tried to focus on the major ones. Here are my rough notes.

My top two criteria were that the library be:
  • Actively maintained or generally popular
  • Have desktop and mobile browser support
Select2 (active since 2012 / browser: all modern browsers)
Although mobile browser support isn't specifically mentioned in the docs, I tested this on iPhone and Android and found they work just fine. This one handles tags. It's got a long history (up to version 4 and started in 2012).

Because of these positives I went ahead and tried using it within my site. I quickly learned two things. First, it's difficult to customize the styling. Although it doesn't list Bootstrap as a dependency, you realistically need to include it to get things to look right. And then figuring out which classes you need to override to further tweak the appearance is not easy.

The second is questionably performance. All of the examples on their site use the 50 US States, but I tried throwing 1500 options at it and although things seemed ok on my 5 year old laptop and iPhone, a weaker Android tablet took 1-2 seconds between a tap on the control and displaying the dropdown.

Selectize.js (active since 2012 / browsers: ?)
Selectize has a large number of forks on GitHub. It has touch (mobile browser) support and goes back to IE8 with a shim. It was developed by Brian Reavis. It's pretty full feature with a specialization in tags (the blue rounded rectangles frequently found in autocomplete fields). It goes back to 2012 and has been actively maintained since.

Typeahead.js (last active April 2015 / mobile browsers untested)
It ranks highly in Google searches, so that must mean something. The demo on their homepage is impressive. It's got a nice UI, handles boundary cases well like typing meta keys during a search, and originally came from Twitter. All good signs. The bad news. Releases seem to have slowed down with the most recent being April 2015, before hitting 1.0. It's not tested in mobile browsers, although worked in my casual Mobile Safari test.

Ajax Autocomplete for jQuery (recent maintenance / browsers: ?)
Written by Tomas Kirda this is different than the autocomplete widget that is included in jQuery UI. It has lots of initialization options. The most recent commit was November 2015.

jQuery UI Autocomplete Widget (active maintenance / browser: only desktop)
This is the official widget included with jQuery UI (jQuery UI is a curated set of UI widgets built on top of plain old jQuery). It's autocomplete functionality is pretty basic. The library is actively maintained but it's browser support only seems to imply desktop browsers and not mobile.

Chosen (active / browser: explicitly no mobile)
This one seemed great until the lack of mobile browser support.

Inactive libraries I didn't spend much time looking at: Tag-itCompletely

Tuesday, July 28, 2015

Minimal Bootstrap "Hello World"

I hadn't checked out Bootstrap in a while, but came back to it this weekend while working on a side project. I re-read its getting started guide and found that their "hello world" was still too complex for my taste. It included cruft for IE8 support and required uploading extra files to my server.

So I present my own, further slimmed down, version of a Bootstrap hello world example. Bootstrap tells us that all of these lines are necessary:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

We then need to include the minified Bootstrap CSS file and a default theme.
  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  </head>

I'm using Bootstrap's recommended CDN so there's no need to upload extra files to my own server. Finally, our body includes one simple container with two example columns, and the minified required .js files.
<body>
<div class="container">
  <h1>Hello, world!</h1>

  <div class="row">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
An important note is that I've stripped out elements needed for IE8 support. I also haven't had the chance yet to test this template in IE.


Monday, July 20, 2015

Don't give up?

Not an amazing article, but short enough to be worth recommending:
There’s actually a good name for this in the realm of psychology. It’s called “goal disengagement,” and it’s actually a good thing when you get older. A 2011 study on the topic ... found that a willingness to give up goals that were no longer attainable actually helped decrease depression in the elderly. 
http://www.atlasobscura.com/articles/the-art-of-quitting
It doesn't necessarily support the point made in my previous post but provides incentive and a rational explanation for not persevering beyond the point of failure.