Pure CSS star rating

Recently I was reading an article about a simple star rating system using vanilla JS, CSS and HTML. It got me thinking about whether it would be possible to recreate something similar with just CSS… and a tiny bit of HTML on the side.

You can see the result below and on CodePen, I think the code is self explanatory.


See the Pen Pure CSS Star Rating by Bjørn (@magikMaker) on CodePen.


In case you would like to send the selected rating back to a server, it’s very easy to get the selected star using this tiny JavaScript snippet:

document.querySelector('.rating').addEventListener('click', event => {
    // figure out which star was clicked
    const rating = Array
        .indexOf(event.target) + 1;
    // example: get the id 
    // const id = event.currentTarget.getAttribute('id').match(/\d+$/);
    // then somehow post the info to the server or save locally or...
    // post(`https://some-server.it/ratings/${id}`, {rating});

Jira ticket number in Git commit

Just like many developers these days, I often find myself working on a project where we use Jira to track our work and progress. When using Jira and Bitbucket to to track source code that lives in Git repositories, it can be very convenient to write the Jira ticket id’s in the Git commit messages. This way both Bitbucket and Jira will pick it up and display everything neatly together.

However, writing the Jira ticket in every commit message can become quite the challenge. I for one always forget to add it. So I wrote an npm package, called magik-commit, to do it for me.

It’s pretty simple. When creating a new Git branch, make sure that the ticket number is part of the branch name. This can be easily accomplished by using the “create branch” button from Jira. This is only available when using Jira in conjunction with Bitbucket though. So, if you’re not using Bitbucket, just create the branch name like this:


After installing the module via npm, every commit message you create will be prepended with the Jira ticket id, `JIRA-42` in this case.

This will also work when using other issue trackers, as long as your ticket id’s are in the format recognised by magik-commit. Have a look at the magik-commit on npmjs.org for more information.

Pure CSS Responsive Images (Yes, without JavaScript)

There are numerous ways to implement responsive images in webpages. However, all solutions I came across make use of JavaScript. That made me wonder whether it would be possible to implement responsive images without the use of JavaScript.

I came up with this solution that is pure CSS.

How does it work?

I placed an <img> tag within a <span>. The src attribute will fetch the mobile version of the image from the server. Then I also include a bit of CSS within the <span> element.

What?! Embedded CSS in the HTML document?

Yes, that is perfectly valid in HTML5 as long as you add the scoped attribute. In the CSS I use an @media query to add the high resolution image as a background to the <span> from a certain breakpoint. In the code below I’ve only added one breakpoint, but you can add as many as you like of course.

By using a background image, it will only be fetched from the server when needed. That is, only when the media query is satisfied. The <img> will make sure the <span> will have the proper width and height ratio so the background image on that <span> is displayed properly.

Show me the code

Here is the code to make it all work.


First the HTML.

<span class="magik-responsive-image" id="image-01">
<img src="http://dummyimage.com/200x150/cdcdcd/000/?text=lo-res">
<style scoped>
@media screen and (min-width: 701px){#image-01{background-image:url(http://dummyimage.com/1600x1200/dcdcdc/000/?text=hi-res);}}


We also need a little bit of extra CSS to hide the lo-res image when the hi-res image should be displayed. The trick is to add background-size: 100%;, this will stretch the background while maintaining the aspect ratio.

.magik-responsive-image {
background-repeat: no-repeat;
background-size: 100%;
display: block;
position: relative;

.magik-responsive-image img {
max-width: 100%;
width: 100%;

@media screen and (min-width: 701px) {

.magik-responsive-image img{
opacity: 0;

The pros

  • No JavaScript
  • Simple to implement
  • Also works for videos (I’ll post about that in a future post)

The cons

  • On desktop there are two requests made to the server.
  • The scoped attribute of the <style> tag is not yet supported in any of the major browsers. Because of this, we need to add an id, but this usually is not a problem to add in the back-end code.


 The Demo

have a look at this fiddle


Chrome stopped displaying apps in new tab after update

Yesterday chrome was updated to version 29. Usually I don’t even notice an update, but this time it was really apparent. When opening a new tab, now there is a search bar displayed with the most visited websites. I have no idea why anybody would come up with such a stupid idea. In fact, I got so irritated by it, that I decided to restore the old functionality of displaying apps in the new tab.

Here’s my Chrome extension that fixes the problem.