Git untag

If you've ever forgotten to rebase your local repository before pushing a tagged commit to master

git push --tags origin master

you'll know the pain of having the push rejected with the tag still applied remotely. In this post by Nathan Hoad, you'll find the needed git commands to remove the remote tag, but it's not that easy to remember.

git tag -d 12345
git push origin :refs/tags/12345

So we're going to make a nice little shell command to do it for you!

First open the global user defined .gitconfig file. From the command line:

• You can either find the user .gitconfig file location by using git config --list --show-origin and finding it in the wall of text. Then, open the file in your favorite editor, or
• To load the file directly into your favorite editor, use ~/.gitconfig as the path to the config file. For example, if you have Atom installed, use atom ~/.gitconfig.

Now under the [alias] block (add it if you don't see it), add the untag alias:

[alias]
  untag = "!sh -c 'git tag -d $0 && git push origin :refs/tags/$0'"

And you're done!

To use the command, use the alias followed by the tag to delete & remove from the remote branch

git untag v1.0.0

You can find a lot more useful git aliases from the Git basics documentation.

Convert RGB(A) output to Hex Color

Update from my Convert jQuery RGB output to Hex Color Post Modern browsers will soon support four and eight-digit hex colors, which means you now include an alpha channel with your color. As you can see in the comments of this CSS Tricks post, the alpha channel conversion is different from the other color channels and this makes it very confusing to convert:

• The r (red), g (green), and b (blue) channels have decimal values ranging from 0 to 255.
• the a (alpha) channel has a decimal value that ranges from 0 to 100.

My old post Convert jQuery RGB output to Hex Color was written to ignore the alpha channel when entering an RGBA value. This post updates both the javascript and the demo to output an #RRGGBB or #RRGGBBAA hex code value.

function rgb2hex(orig) {
  var a, isPercent,
    rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
    alpha = (rgb && rgb[4] || "").trim(),
    hex = rgb ? "#" +
    (rgb[1] | 1 << 8).toString(16).slice(1) +
    (rgb[2] | 1 << 8).toString(16).slice(1) +
    (rgb[3] | 1 << 8).toString(16).slice(1) : orig;
  if (alpha !== "") {
    isPercent = alpha.indexOf("%") > -1;
    a = parseFloat(alpha);
    if (!isPercent && a >= 0 && a <= 1) {
      a = Math.round(255 * a);
    } else if (isPercent && a >= 0 && a <= 100) {
      a = Math.round(255 * a / 100)
    } else {
      a = "";
    }
  }
  if (a) {
    hex += (a | 1 << 8).toString(16).slice(1);
  }
  return hex;
}

I've copied some of the above code from the rgb-hex node module, where I also contributed alpha channel support.

Methods to add multi-line CSS content

I'm sure most of you know that you can add content before or after an element using css; And you can add a line break within that content (spec):

HTML

<div id="test1">Hello World</div>

CSS

#test1:after {
    content : ' of foo \A barred';
    white-space: pre; /* this line is essential */
}

Sadly, this same method doesn't work if you get your content from an attribute:

HTML

<div id="test1" data-extra=" of bar \A food">Hello World</div>

CSS

#test1:after {
    content : attr(data-extra);
    white-space: pre;
}

Example: So after some discussion with the developers of Firefox, I learned that the following alternatives do work; make sure to set the css white-space to pre.

I was hoping that these methods would work consistently and I wouldn't have to remember, so I made this blog post to remind me :)

Here is a condensed list:

content source	Carriage Return	Example
inline string	\A	content: "line1 \A line2"
javascript	\n	.setAttribute('data-extra', " line1 \n line2");
data-attribute	inline carriage return	data-extra="line1 line2"
	
	data-extra="line1 
 line2"
	
 (hex)	data-extra="line1 
 line2"

Here is a full example: