0

Overwrite CMD+S and CTRL+S in Javascript

Do you often work with backend forms in your web application scrolling endless down to the submit button? Why not overwrite the submit button with the common use save keyboard hotkeys CMD+S (Mac) and CTRL+S (Win) with Javascript?

At first, we need to catch the event when a key is pressed:

document.addEventListener("keydown", function(e) {

}, false);

Second we need to get the key code for the S key – it is 83. Mac’s CMD key is represented by metaKey and Windows’s CTRL key is represented by ctrlKey. You can differentiate between the operating system by evaluating the property of window.navigator.platform.

Don’t forget to prevent the default executing of the shortcut by calling preventDefault() on the submitted event!

Complete Javascript code

document.addEventListener("keydown", function(e) {
  if ((window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)  && e.keyCode == 83) {
    e.preventDefault();
    // Process the event here (such as click on submit button)
  }
}, false);
0

Fontello or how to master icon fonts in web development

1. Icon fonts were great

Using icon fonts in web development have many advantages instead of using CSS sprites:

  • Vectors scale with retina displays
  • Manipulation with CSS (size, color, shadow,…)

2. Icon fonts were bad

Mostly, one icon font does not have included all icons you will need for your application. So you will need a second or third one. You will also usually not use all icons included in one font. So the main problem is that your users will have to download icons in your font which will never be displayed and so too much traffic will be generated.

3. The solution: Fontello.com

With Fontello, you can create your own icon font. You can choose from lots of other icon fonts by just clicking on the icon you want to add. After choosing the icons, you can give your new font a name and download the whole stuff. Also add the config.json file in the package to your repository – you can upload it later and add or remove stuff from your font!

 

Fontello

0

Some technical things to know when going online multilingual

When you are successful with your web application, there will be the day when you decide to deploy the application in more than your native language. Before we decided to go online with a multilingual version of diginights.com, I thought about challenges and also stumbled over some other problems later. I decided to share them so here they are:

1. Change URL according to language

When your user changes the language of the website, the url should also be changed. Especially search engines do not like different content due to user settings on the same url. You can change the domain or add another query parameter to the url. But do not change the url for the already existing language! Change the url only for languages you will add!

By domain:

For native: http://example.com
For german: http://example.de

By query param:

For native: http://example.com
For german: http://example.com/de/

2. Add alt-lang in header

In order to enable search engines to determine which page is connected to the same page in another language, you have to add a small snippet in your header. This will be used to show the correct url for the matching language in search results and also prevents search engines for marking these connected pages as duplicate content. You will also have to add the current page.

For the current url “http://example.com/”, the correct snippet for english and germand would be look like

<link rel=”alternate” hreflang=”de” href=”http://example.com/de/” />
<link rel=”alternate” hreflang=”en” href=”http://example.com/” />

More information can be found on the Google Blog

3. Do not redirect (for not authenticated users)

Do not redirect the user by IP or browser language. Think about where the search engine bots will be redirected to. Instead of, you can suggest the user to switch. More important is to provide the correct link for the user one step earlier (SEO, Facebook). Of course, you can redirect authenticated users to their language chosen in settings.

4. E-Mail language by target user

When user A executes an action which ends in an email delivery to user B, the email language should be in the language of user B of course.

5. Language selector to the current page in different language

Yes, I have seen websites taking you to the homepage instead of the current page in the chosen language. This is not very user friendly.

6. Adjust your robots.txt

When you have already existing rules in your robots.txt and you have chosen to add a query parameter for additional languages, do not forget to watch for matching rules!

When you already have “Disallow: /profile”, you will also have to add “Disallow: /en/profile” for english and all other languages.

 

Happy going online in additional languages!

0

Kitesurfing, SUP, nature and more on Rügen

Two weeks ago, I took some time off and went to the island Rügen in the Baltic Sea with my good friend Chris.

With us were also Kati and Ria who where ex-colleagues and now also good friends from Jimdo. Haiko, Kati’s boyfriend and a very lovely guy, owns the kite school ProBoarding on Rügen. You can learn kitesurfing, SUP (Standup paddleboarding) or start learing how to windsurf there.

We did some SUP and kitesurfing in the nice weather and had so much fun. I have also created a video. Enjoy watching and see you soon Rügen!

018-201405292217

054-201405290012

158-201406050938

0

Share a local web project with ngrok

Did you ever need to share a web project in your local development environment with somebody over the internet? Maybe you did set up port forwarding in your firewall or you did establish ssh tunnels every time.

There is now a very easy way to share your project over the internet: ngrok

overview

Some features

  • Secure On-Demand Tunnels
  • Request Inspection
  • Custom Subdomains
  • TCP Tunneling
  • Password Protection
  • Multiple Simultaneous Tunnels
  • Tunnel your own domains
  • Reserved Subdomains
  • pay-what-you-want service
  • Open source

How to use

Download and run it

./ngrok 80

This will open a tunnel to localhost on port 80. The url the project will be available on will be shown now including some other details:

Screen Shot 2014-05-16 at 12.55.45

0

Hudson and Troop – Against The Grain

The official music video for ‘Against The Grain’ from emerging Melbourne indie-folk artist Hudson sees him collaborate with film maker/animator/VJ Dropbear (aka Jonathan Chong), producing a vibrant and colourful clip based around a mainstay from our humble artistic efforts throughout childhood – coloured pencils.

0

Resize a LVM partition in a Debian VirtualBox

Have you ever developed in a Debian VirtualBox running out of space? This happened to me some days ago when I have imported the live database for debugging. Following this step by step tutorial, you can increase the disk space.

Increase VirtualBox HardDisk

Open a terminal and go to the folder* of the VirtualBox instance in which you want to resize the partition. You will either find a VMDK or a VDI file. Close VirtualBox before you continue.

For VMDK format

You first have to convert the vdmk file to a vdi file:

VBoxManage clonehd --format vdi filename.vmdk filename.vdi

After this we increase the vdi to 30000 megabytes:

VBoxManage modifyhd filename.vdi --resize 30000

Then we convert the vdi back to vdmk:

VBoxManage clonehd --format vmdk filename.vdi filename.vmdk

For VDI format

We increase the vdi to 30000 megabytes:

VBoxManage modifyhd filename.vdi --resize 30000

Increase partition with a live cd

Since the partition in a VirtualBox is mostly the root partition, we have to boot with a live cd including GParted (Download). Include the CD in your VirtualBox and boot into the live distribution.

Screen Shot 2014-03-27 at 20.29.41

Open GParted, open the partition and resize the space. Now save and click on Apply.

Screen Shot 2014-03-05 at 09.25.24

Power off the maschine and remove the live cd.

Increase the LVM in Debian

Boot into your Debian VirtualBox and extend the LVM with the following command. My LVM was 10 GB before so i had to increase the LVM by 20.

lvextend -L+20G /dev/mapper/vagrant-root
  Extending logical volume root to 29.21 GiB

When you have reached the maximum size, you finally have to resize the filesystem.

resize2fs /dev/mapper/vagrant-root

Your LVM partition is resized now.

 

* You can find the folder when you open VirtualBox -> File -> Virtual Media Manager

0

Bouldernacht 2.0 Impressions

Almost one year ago, I started climbing when i moved back to Heilbronn from Hamburg. We have a nice indoor climbing site called diekletterarena here in Heilbronn. With climbing, I also started bouldering.

Last week, on the 8th of March, diekletterarena arranged a competition called Bouldernacht in which also beginners could compete in.

During the whole time, I placed my GoPro in the area which recorded the spots. The result is a video with some nice impressions.

Enjoy the video :)

The whole footage was filmed wit a GoPro 3+ black edition standing on an egg timer for the time lapse video configured with one shot per second. The video is edited with Final Cut Pro. The text effect Text Colour Split is free available.