Skip to content
Archive of posts filed under the Web Development category.

Serving static pages with a custom domain with Cloudflare and github pages

The idea is pretty cool. You can serve static web-pages for free with your own domain with Cloudflare and Github Pages. The Cloudflare is handling the DNS, page caching, and the TSL certificate. The the pages itself are hosted by github. Here’s a quick tutorial how to do it.

Cloudflare

Set the DNS to point into Github Pages (https://help.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site)

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Github

I basically made simple html pages without jekyll.

First add the CNAME file into the root of your github project for your own domain:

www.finice2020.com

After the initial commit I noticed that my images are not found from the server. It turns out that you have to add an empty file named as “.nojekyll” to bypass the jekyll, so the github will know to publish everything under your domain.

See my example project at: https://github.com/Summeli/finice2020.github.io

MailGun

You can also get free email routes from mailgun. Setting the account for that is also quite simple. Just follow the mailgun tutorial, for dns etc.
One of the benefits is that you can create rules for forwarding emails like info@mydomain.com and forward those emails for everyone involved in “info”.

Realtime clock data from Alge-timing system

I made all of this stuff into the Finice 2019 ice climbing competition (www.finice2019.com).  The idea is to send the clock timing events into web, so we could use them in the results-office, or we could insert the clock into the video stream during the competition. There’s always some delay in the video stream, so we need a way to add custom delay into the clock. The data is good, but we have to remember to add some delay so the clock and video will be on sync. It would look stupid if the climber get to the top, and the clock has already stopped a few seconds ago.

Here’s a short video about how all of it works:

Continue reading ‘Realtime clock data from Alge-timing system’ »

Configuring SyntaxHighlighter plugin to StripBrs

I had way too much trouble with the new version of the SyntaxHighlighter Evolved plugin. The default configuration page is missing the option to StripBrs. A quick and dirty solution was to write a plugin to configure the other plugin.

The SyntaxHighlighter configuration is easy. The plugin is running on JavaScript, so all we have to do is to

SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.all();

To get there I wrote a simple plugin that add the new js after WordPress js scripts. Here’s how it’s done:

function add_js_config() {
    wp_register_script( 'syntaxhighlighter_config',
                       plugins_url('syntaxhighlightstripbrs.js',__FILE__),
                       array('jquery','syntaxhighlighter'),
                       '1.0',
                       true);
    wp_enqueue_script('syntaxhighlighter_config');
}
add_action( 'wp_enqueue_scripts', 'add_js_config' );

The plugin can be found from github: https://github.com/Summeli/SyntaxHighlight-StripBrs

Ordering tables with jquery

Last spring I was organizing official Finnish ice climbing championships www.finice.com . We were a really small team behind this production. The problem for us was how to deliver real time results to the audience, and for the media broadcast company, which was filming and commenting the competition.

I wrote a small script to order the results, which I just quickly entered to the html page during the competition.

function sortTable(table_id, sortColumn){
    var tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
    var rowData = tableData.getElementsByTagName('tr');
    for(var i = 0; i < rowData.length - 1; i++){
        for(var j = 0; j < rowData.length - (i + 1); j++){
            if(Number(rowData.item(j).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\\.]+/g, '')) < Number(rowData.item(j+1).getElementsByTagName('td').item(sortColumn).innerHTML.replace(/[^0-9\\.]+/g, ''))){
                tableData.insertBefore(rowData.item(j+1),rowData.item(j));
            }
        }
    }
    tableData = document.getElementById(table_id).getElementsByTagName('tbody').item(0);
    rowData = tableData.getElementsByTagName('tr');
    for(var i = 0; i <= rowData.length - 1; i++){
        //console.log(rowData.item(i).getElementsByTagName('td').item(0));
        rowData.item(i).getElementsByTagName('td').item(0).innerHTML = i+1;
    }
}

Continue reading ‘Ordering tables with jquery’ »

Viskisieppo Chrome plugin to bypass glenmorangie.com site restriction to Finland

Finnish alcohol politics are like DRM. It has no effective on the abusive users, but it pisses off everyone else. Currently it seems that Whisky site glenmorangie.com is blocking Finnish users due to Finland’s alcohol laws.

Information want’s to be free, so I made a simple plugin for Chrome to bypass the country block at glenmoorangie.com.

Download

You can download the plugin from Chrome marketplace: https://chrome.google.com/webstore/detail/viskisieppo/dgmcbnhfgeejfapefklhjpilfiholhcc?hl=fi

How it works

You can download the whole project from my github page: https://github.com/Summeli/Viskisieppo

The plugin basically add, or edits the “X-Forwarded-for” HTTP-headers to make the requests look like they are not coming from Finland. This is basically implemented with Chrome webrequest-API

var requestFilter = {
	urls: [
		"*://*/*"
	]
};
chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
	var headers = details.requestHeaders;
	var header_set = false;
	for(var i = 0, l = headers.length; i < l; ++i) {
		if( headers[i].name == "X-Forwarded-for" ) {
			headers[i].value = "12.13.14.15";
			header_set = true;
			break;
		}
	}
	if(!header_set){
		headers.push({name:"X-Forwarded-for",value:"12.13.14.15"});
	}
	return {requestHeaders: headers};
}, requestFilter, ['requestHeaders','blocking']);