Blake Simpson

Sorting a German date format in Tablesorter.js

Friday 15th of May 2015

The German date format is 01.05.2015 as opposed to the UK date format 01/05/2015 which Tablesorter.js comes prebuilt to parse.

To sort by a German date, you have to add a custom parser. Here is one that will work for a date with the German dot notation.

$.tablesorter.addParser({
  id: 'dotDate',
  is: function (content) {
    return /\d{1,2}\.\d{1,2}\.\d{1,4}/.test(content);
  },
  format: function (content) {
    content = content.replace(/\-/|:|\.|\//g,' ').split(' ');
    return $.tablesorter.formatFloat(new Date(content[2], content[1]-1, content[0]).getTime());
  },
  type: 'numeric'
});

Simply add this parser and then tell your tablesorter initializer function which column the German date is in.

$('table').tablesorter({
  headers: {
    0: { sorter: 'dotDate' }
  }
});

If your date only has 2 numbers for the year instead of 4, you can adjust the is method to use the regex /\d{1,2}\.\d{1,2}\.\d{1,2}/.

Read More Comments

Customise the Atom fuzzy finder width using custom styles

Friday 8th of May 2015

I find for my projects that the fuzzy finder overlay dialog in the Atom editor is a little short for my liking. I often have long path names with the same file name so I and can't see the full path, therefore I am not sure which file I am choosing.

Atom fuzzy finder original size

The easiest way to do this is to use your custom stylesheet to alter the fuzzy finder interface. Open your Atom stylesheet via the menu options Atom -> Open Your Stylehseet.

Next paste in the following CSS code. Save the file and the Atom styles will automatically reload.

.modal.overlay {
  width: 800px;
  margin-left: -400px;
}

.fuzzy-finder {
  width: 784px;
}

Open the finder again and now it looks much better!

Atom fuzzy finder after width customisation

Of course you may want to customise the widths of the modal to fit your workspace better.

Read More Comments

Getting started with the Atom Editor (and tips for switching from Vim)

Wednesday 29th of April 2015

Atom Logo

Today I started working with the awesome Atom Editor instead of my usual tool MacVim.

Atom is open source and free, produced by the people at GitHub. To introduce Atom, what can I say that they can't say for themselves?

Atom is a desktop application based on web technologies. Like other desktop apps, it has its own icon in the dock, native menus and dialogs, and full access to the file system.

Open the dev tools, however, and Atom's web-based core shines through. Whether you're tweaking the look of Atom's interface with CSS or adding major features with HTML and JavaScript, it's never been easier to take control of your editor.

So basically Atom is a code editor built on top of a browser. Meaning, as a web developer you already have all the skills needed to extend the code base, or write a custom Atom package (plugin). Due to Atom being based on a browser engine (Blink) you even have the usual Chrome developer tools available to you!

Atom Editor preview showing Dev Tools

Why Change?

The main reasons I am trying out a new editor are:

  • Ease of use - Vim is powerful but can be painful too
  • Packages - Atom is easy to extend and has a large community, no Pathogen or Vundler required
  • Customisation - I'm a web developer, making packages easy to write
  • Teamwork - Many colleagues don't know Vim, or at least everyone has different key bindings
  • Look and feel - Atom is beautiful

Some Tips for Beginners

Key Combinations

Arguably the most attractive feature of Vim is the powerful key combinations + motions. For example, in Vim you can type 10dd to delete the next 10 lines. Atom does not have this built in, although there is of course a package for that, many of the more common combinations are available by default. A few useful ones that helped me switch are:

Read More Comments

Cordova plugins not working on iOS? Fix the Target Membership

Monday 27th of April 2015

If you have installed a Cordova plugin and it is not working on iOS, for example the expected JavaScript object for the plugin simply doesn't exist. But you have tested and find that the functionality is working fine on Android, this is usually a symptom of an error in the iOS plugin class target membership.

For example this can often happen with the Cordova SplashScreen plugin. See the screenshot below and ensure that the .m implementation file has a checkmark on the "Target Membership" option for your application.

XCode target membership preview

Only the implementation file should have the target membership checked (so not the .h header file).

This is often the reason why a plugin appears simply not to work. It's always good to check this setting first before debugging further.

Read More Comments

An IE8 background-size fallback with SCSS or SASS

Wednesday 22nd of April 2015

In this post I will show you how to get the background-size CSS property working in IE 6 - 8 without using JavaScript. Instead we will use the filter attribute recognised by older versions of Internet Explorer.

Background

As you can see on Can I Use, IE 6 - 8 are the only browsers not supporting background-size at all.

Microsoft does however offer a AlphaImageLoader filter with sizingMethod options that correlate to the CSS3 background-size options.

  • auto = image
  • cover = scale
  • contain = crop

(CSS3 on left, sizingMethod on right)

The Solution

We will write a mixin that applies the filter rule for us. In this example I will use SCSS syntax and implement a fix for background-size: cover, as this is the most common use case.

If you want to convert this to SASS, please check out SASS to SCSS.

The mixin looks as follows:

@mixin background-cover($image-path) {
  background-size: cover;
  background-image: url(#{$image-path});
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$image-path}', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$image-path}', sizingMethod='scale')";
}

This mixin accepts an argument that is the path to the image. So it could be used for example like so:

.foo {
  @include background-cover('images/bar.jpg');
  background-color: #fff;
  background-position: right bottom;
}

A great advantage of this approach is that if you are using Ruby on Rails and need to include the asset pipeline paths in your CSS, you can use the standard asset-path helper wrapped around the argument.

.foo {
  @include background-cover(asset-path('bar.jpg'));
  ...
}

Conclusion

You may want to note that Internet Explorer filters are not valid CSS, so if you are an advocate of purely valid CSS, you may want to use a JavaScript polyfill or isolate this code in a separate stylesheet.

In general though, I think this is a great solution when older IE support is required. No JavaScript or CSS plugins are necessary and the method can easily be dropped into a SASS/SCSS project.

The solution could also easily be adapted for preprocessors such as LESS.js, or even pure CSS with little effort.

Please let me know if you find any other short solutions to this problem, I'd love to hear about other options.

Read More Comments

Fixing the Internet Explorer absolute link stretching bug

Monday 20th of April 2015

The bug I'm trying to describe here is when you have markup similar to this:

<div class="wrapper">
    <img src="logo.jpg" alt="Logo" />
    <h1>Headline</h1>
    <a href="/somewhere">&nbsp;</a>
</div>

The goal we are trying to reach is to have the entire "wrapper" element clickable but the <a> tag is not wrapping the actual contents. There are various scenarios where you would do this, as wrapping large areas in a link tag can be either problematic or semantically incorrect.

The solution to make the above wrapper element fully clickable would be to set the wrapper to position: relative and the link to position: absolute, filling the container, like so:

.wrapper {
    position: relative;
}

.wrapper a {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: block;
}

Now this solution works just fine in almost all browsers, but (almost understandably) Internet Explorer won't let you click on the <img> or <h1> tags since they are not actually nested within the <a> tag, only the surrounding content.

To fix this, the solution is simply (yet confusingly) to give the link a background image and then all versions of Internet Explorer will place nice.

The best way to do this is to create a 1x1 pixel sized transparent GIF and use it as a repeating background.

Adding the following code will solve this bug:

.wrapper a {
    ...
    background: url('blank.gif') top left repeat;
}

This appears to be another classic IE hack but at least it does not invalidate your CSS or require any complicated filters, JavaScripts or plugins.

Read More Comments

Sidekiq tasks for Capistrano 3

Thursday 5th of February 2015

If using the Sidekiq gem with Capistrano version 3, you may like a simple set of start, stop and restart tasks. There are a few gems out there already built to help you with this, which might be suitable for your project. If you however just want a simple script then you may use this sidekiq namespace I wrote and tweak it to your needs.

Place the following in your deploy.rb

namespace :sidekiq do
  def sidekiq_pid
    current_path + '../shared/pids/sidekiq.pid'
  end

  def pid_file_exists?
    test(*("[ -f #{sidekiq_pid} ]").split(' '))
  end

  def pid_process_exists?
    pid_file_exists? and test(*("kill -0 $( cat #{sidekiq_pid} )").split(' '))
  end

  task :start do
    on roles(:app) do
      if !pid_process_exists?
        execute "cd #{current_path} && RAILS_ENV=#{fetch(:rails_env)} #{fetch(:rbenv_prefix)} bundle exec sidekiq -C config/sidekiq.yml -e #{fetch(:rails_env)} -L log/sidekiq.log -P #{sidekiq_pid} -d"
      end
    end
  end

  task :stop do
    on roles(:app) do
      if pid_process_exists?
        execute "kill `cat #{sidekiq_pid}`"
        execute "rm #{sidekiq_pid}"
      end
    end
  end

  task :restart do
    on roles(:app) do
      invoke "sidekiq:stop"
      invoke "sidekiq:start"
    end
  end
end

after 'deploy:restart', 'sidekiq:start'

Read More Comments

Detect Internet Explorer 10 without conditional comments

Wednesday 28th of January 2015

Commonly to target specific versions of Internet Explorer we will use conditional HTML comments to apply a specific class name to the <html> tag. With this approach it is then trivial to target a specific browser via CSS for special styling. For example:

<!--[if IE 8]> <html class="ie8"> <![endif]-->

Since Internet Explorer conditional comments have been disabled since IE10, we can no longer use the following syntax.

<!--[if IE 10]> <html class="ie10"> <![endif]-->

JavaScript to the rescue

In order not to break from the pattern of HTML specific class names for IE versioning, a JavaScript can be used to manually add a class targeting IE10.

if (navigator.userAgent.match('MSIE 10.0;')) {
  $('html').addClass('ie10');
}

Or in pure JavaScript, if you do not have jQuery available.

if (navigator.userAgent.match('MSIE 10.0;')) {
  document.querySelector('html').className += " ie10"
}

This is not the ideal approach. In general feature detection is a better method to tell if a feature is available but when looking to target Internet Explorer purely for CSS styling purposes this may be the most pragmatic approach.

Read More Comments