nemrod.se Various guides and experiments

Lists with section signs (§) using CSS counters and content


When listing rules or statutes you might want to have a section sign in front of each number. I found myself in that situation the other day but found absolutely nothing about it on Google, so here’s me publishing my way to do it just to alleviate the blatant lack of information on the net.

The way I did it was using the :before pseudo class, content property, CSS counters and finally text-indent to make up for lost indentation.

The final code looks something like this:

ol#statutes {
	counter-reset: section; # resets the counter
	margin-left: 23px; # modify this according to your layout
}
ol#statutes > li { # > so as to not affect nested lists
	list-style-type: none; # or we'd have 1. §1.
	text-indent: -23px; # adjust this for your font and size
}
ol#statutes > li:before {
	content: '§' counter(section) '. '; # here's where the magic happens
	counter-increment: section; # increment counter for next time
}
ol#statutes > li li {
	text-indent: 0; # because it's inherited
}

It’s possible to create several counters so you can change the way subsections look and all sorts of nice things.


Posted in Guides | 1 Comment

Install RPM packages on Arch Linux


I recently found myself wanting to upload music to Google Music from my computer with Arch Linux but found that they only had RPM and APT (.deb) packages available for download. It’s fairly straightforward to install an RPM on Arch:

  1. Download the RPM for your architecture (64- or 32-bit)
  2. Install rpmextract for extracting the RPM and any dependencies the program has (libidn for Google Music Manager for example) with pacman
  3. Now create a new folder, move the RPM file to it and go there
  4. Run rpmextract.sh and you’ll get a directory structure based on the root (/) in the current directory
  5. Copy the files to where they belong in your own file hierarchy

There are some downsides to this, though. For example you won’t be able to easily uninstall the program, nor will it warn you if you remove any of the dependencies. That’s why I thought it would be a better idea to create an Arch package out of it.

To create an Arch package basically all you need is to create a PKGBUILD file which contains all of the information about the package you’re about to create. Here are their own instructions (which contains a lot more information but also takes longer to figure out if all you want to do is convert an RPM package) and here’s a reference for the different variables you can use in a PKGBUILD file.

This is what my PKGBUILD file ended up like:

# Maintainer: Anders Mårtensson <anders@nemrod.se>
pkgname=google-musicmanager-beta
pkgver=current
pkgrel=2
pkgdesc="A program necessary to upload audio files to your Google Music library."
arch=('x86_64')
url="https://music.google.com/"
license=('unknown')
depends=('libidn')
makedepends=('rpmextract')
options=('emptydirs')
source=("http://dl.google.com/linux/direct/google-musicmanager-beta_current_x86_64.rpm")
md5sums=('6c05f087f9cd77563b7d001584e3b2d8')

build() {
  cd "$pkgdir"
  rpmextract.sh ../google-musicmanager-beta_current_x86_64.rpm
}

As you can see it’s pretty straight-forward:

  • Name of the program (lowercase, no spaces, etc.)
  • Version (Google says “current” and I couldn’t bother figuring out the actual version number so I went with it)
  • An internal version number that should increment by one for every change to the package
  • A short description (less than about 80 characters)
  • The architecture (i686, x86_64, both or any)
  • A URL to the official site of the package (optional)
  • License (GPL, BSD, unknown, etc.)
  • Any dependencies the program might have (separated by space, no comma)
  • Dependencies only required to build but not run the program
  • Any options (in this case there were some empty directories after extraction which I found unnecessary so I used the emptydirs option)
  • A list of source files (these will be downloaded when installing if they’re URLs, but you can also provide local files putting them in the same folder as the PKGBUILD file)
  • A list of md5sums for the files (you can get these by running “makepkg -g” in the folder with the files).
  • Finally there’s the build script which does the extracting

Once you’ve created the PKGBUILD file run “makepkg” in the folder and watch it create the .pkg.tar.xz file for use with pacman! Install it with pacman -U and you’re done. It will complain if you are missing dependencies and you can remove the package with pacman -R just like when installing with pacman -S. Simple, huh?

How a session of doing this might look:

mkdir package # might want a more descriptive folder ;)
cd package
cp /usr/share/pacman/PKGBUILD.proto PKGBUILD # it's a prototype file to save a lot of keypresses
vim PKGBUILD # modify it to fit your package
makepkg -g # will download any files specified and spit back an md5sum line, copy it
vim PKGBUILD # paste in the md5sums returned from the previous command
makepkg # you may get complaints about dependencies you don't have installed, install them and run until it goes till the end
pacman -U *.pkg.tar.xz # and it's installed!

Posted in Guides | 4 Comments

Clock Icon


Clock IconThis extension, requested by an acquaintance, quite simply displays the current time (and date on hover) next to the omnibox in Chrome. Really nothing more to it. Technically it displays the current time in a HH:MM format in the badge of a browser action. The badge is specified to fit four characters or less according to the developer docs, but at least for me it’s working just fine with five (HH:MM). Report in if it doesn’t for you. :)

Clock Icon on Chrome Web Store

Just for fun here’s the source:
manifest.json

{
	"name": "Clock Icon",
	"version": "1.0",
	"description": "Shows the time (hours and minutes) next to the omnibox.",
	"icons": { "128": "icon128.png" },
	"background_page": "background.html",
	"browser_action": {
		"default_icon": "icon128.png",
		"default_title": "dd/mm/yyyy hh:mm"
	}
}

background.html

<html>
	<script>
		chrome.browserAction.setBadgeBackgroundColor({"color": [0,0,0,255]});

		function pad(s, n) {
			s = '' + s;
			while(s.length < n) {
				s = '0' + s;
			}
			return s;
		}

		function updateTime() {
			dateobj = new Date();

			year = pad(dateobj.getFullYear(), 4);
			month = pad(dateobj.getMonth(), 2);
			day = pad(dateobj.getDate(), 2);
			hour = pad(dateobj.getHours(), 2);
			minute = pad(dateobj.getMinutes(), 2);

			badge = hour + ':' + minute;
			title = day + '/' + month + '/' + year + ' ' + badge;
			chrome.browserAction.setBadgeText({"text": badge});
			chrome.browserAction.setTitle({"title": title});

			var t = setTimeout("updateTime()", 10000);
		}

		updateTime();
	</script>
</html>

Posted in Chrome Extensions | Leave a comment

Disable F12 from opening the Developer Console in Chrome


F12 keyLinus Torvalds made a post on Google+ asking if there was a convenient way of disabling F12 from opening the developer console in Chrome (because apparently he’s “totally spastic and uncontrolled” when going for backspace ;)).

I, of course, had to oblige by creating a Chrome extension: Disable F12 on Chrome Web Store

It can access “your data on all websites” because it needs to inject a JavaScript that captures the F12 keypress and prevents the event from going any further. You can inspect the code in the extension yourself but if you can’t be bothered here it is:

manifest.json

{
	"name": "Disable F12",
	"version": "1.0",
	"description": "An extension to disable F12 opening the dev console.",
	"icons": { "128": "icon128.png" },
	"content_scripts": [
		{
			"matches": ["*://*/*"],
			"js": ["disablef12.js"]
		}
	]
}

disablef12.js

window.addEventListener("keydown", keyListener, false);

function keyListener(e) {
	if(e.keyCode == 123) {
		e.returnValue = false;
	}
}

Posted in Chrome Extensions | 4 Comments

“Matches” WordPress plugin


This is a WordPress plugin I made when we were making a new website for an ice hockey team. It basically lets you administer teams and matches and display them with a neat little widget. Here’s a screenshot of what it could look like (ignore the names and logos):
Widget for Matches WordPress plugin

Here are the various admin panes:
Settings for your own team and how many upcoming matches to display in the widget
Adding, editing and deleting opponents
The most important thing of all, administering the matches between you and your opponent

You can see a live example at http://www.krif-hockey.net in the sidebar to the left.

And finally, if you’re interested in trying it, here it is:
Matches in the WordPress Plugin Directory

If you’re an awfully generous person and like this plugin, any donations (there’s a button in the sidebar) are terribly appreciated. :)


Posted in WordPress | 30 Comments