Omregn.nu is a web app for converting units. The web app exists in an extremely crowded space and is by no means anything new. Omregn.nu has one thing going for it though, it’s mobile friendly.

However, all of that doesn’t matter; the main purpose of omregn.nu has been to learn AngularJS and routing by AngularJS.

Refactoring from jQuery to AngularJS

The first version of omregn.nu was written in jQuery using a classic paradigm:

1. Change in input field causes
2. JavaScript to calculate resulting values and
3. jQuery updates the frontend.

Basic and event driven.

I wanted to do more though, and I’ve been wanting to work with routing and canonical urls for a while. Enter routing with AngularJS and a head-first dive into thinking in MWC.

The model is king

With AngularJS, I needed to get rid of all the event hooks, thinking differently about where values come from. With AngularJS, the model, the M in MWC, is king. You have to focus on updating the model and just make the frontend follow suit.

I also had to get into routing and the intricacies of ngRoute, keeping the url-bar and to current unit and value into sync. My hope is that at some point, it’s going to become SEO awesome.

Deep SEO

Check this out:

This is Google hitting deep and dynamic content – score!

I am definitely going to work further on this – preferably hitting the Knowledge Graph with a vengeance at some point. I don’t think I could have done this without AngularJS routing.

Hit me at @mocdotcom if you have any questions.

The post Omregn.nu | an AngularJS side project first appeared on The Tech in Journalism.

The game runs in a HTML Canvas element, and the canvas element need to have a width and height defined in pixels. That goes against responsive web design for mobile which relies heavily on relative units for layout.

In short: On mobile, you want to be able to fill the width of the screen regardless of differences in screen resolution:

Responsive canvas through scale()

For a while, I didn’t think that the canvas could become responsive since the canvas element is so pixel bound.

Every canvas method and, subsequently, all my game logic is pixel based. Having to recalculate would be a nightmare, I thought.

Enter the scale() method: http://www.w3schools.com/tags/canvas_scale.asp

The scale() method lets me keep all my game logic untouched and just scale the drawings on the canvas and the width and height of the element.

To scale the canvas using JavaScript, I’m doing this if the screen is less than 800px:

var resizeCanvas = function() {
  var game = document.getElementById("game");
  var canvas = game.getContext("2d");

  var screenWidth = screen.width;
  var gameWidth = game.width;
  var gameHeight = game.height;
  
  var widthRatio = screenWidth / gameWidth;
  game.width = gameWidth * widthRatio;
  game.height = gameHeight * widthRatio;
  
  canvas.scale(widthRatio, widthRatio);
};

Basically, I:

• Get width of screen on device (360px on Nexus 5)
• Get a ratio by dividing that by the original game width (800px)
• Scale width and height using the ratio (0.45 on Nexus 5)
• Set the width and height attribute of the HTML canvas element itself accordingly

This allows me to incorporate the canvas element into a responsive layout and thus create a sensible, responsive layout for all screen sizes.

Enjoy!

PLAY NOW

The post Vector Racer 0.3 – Responsive canvas first appeared on The Tech in Journalism.

The buttons do not work perfectly – far from it – but they do provide a means to play on mobile devices.

That’s the short update of today. Enjoy.

PLAY NOW

The post Vector Racer 0.25 – Mobile Controls first appeared on The Tech in Journalism.

• Detecting collisions if the player path crosses an obstacle
• Determining when a player does a lap

So now, you are actually able to win the game! And you are able to determine if you’re better than your buddy since the number of steps are declared upon crossing the finish line.

My record is 42(!). What’s yours?

PLAY NOW

Better collision-detection

Second issue was that collision was only detected where the player ‘landed’ at each step. Given enough speed, it was easy to drive right through obstacles.

I’ve added collision details to three extra points between two positions, making it hard to drive through obstacles but still allowing for cutting a few corners.

Here’s the concept. Finding the mid-point between the old and new position:

And how the code looks. Not very generalized.

var vectorSplit = function(start, end) {
  var splits = [];
  var mid = { x:((end.x - start.x) / 2) + start.x, y:((end.y - start.y) / 2) + start.y };
  var start_mid = { x:((mid.x - start.x) / 2) + start.x, y:((mid.y - start.y) / 2) + start.y };
  var mid_end = { x:((end.x - mid.x) / 2) + mid.x, y:((end.y - mid.y) / 2) + mid.y };
  splits.push(start);
  splits.push(start_mid);
  splits.push(mid);
  splits.push(mid_end);
  splits.push(end);
  return(splits);
};

I guess the right way to do it would be something along the line of Bresenham’s line algorithm but that’s not going to happen anytime soon.

To Do

The most pressing issues going forward is:

• Implement UI for mobile(who uses laptops for casual gaming anymore?)
• Add UI response during the selection process.
• Add information area for things like laps, steps etc.

The post Vector Racer 0.2 – #winning first appeared on The Tech in Journalism.

Vector racing is by no means a new category of game, but it’s still a fun exercise to engage in.

I started development on Saturday, reaching 0.1 on Sunday.

In version 0.1, you can:

• Move around the track using keyboard
• Create tracks using rectangles
• Detect collisions if the player lands in an obstacles (you can drive through them)

The most pressing issues now are:

• Detecting collisions if the player path crosses an obstacle
• Determining when a player does a lap

I’m looking forward to developing this further!

In case you feel like playing a better vector racer than mine, check out http://harmmade.com/vectorracer/, it’s awesome!

The post Vector Racer 0.1 first appeared on The Tech in Journalism.

Funktionerne i CMS’ets editor til at rydde formatering hjælper ikke, og problemet består, uanset hvad du gør. Til sidst spørger du den nærmeste, der kan lidt kode. Personen klikker på kode-knappen i editoren, alt bliver volapyk, og på kort tid er problemet væk.

Det kan du også lære – og det er nemt!

Den gyldne regel

Enhver webredaktør bør huske den gyldne regel, når det kommer til at kopiere indhold fra andre kilder som Word-dokumenter, andre hjemmesider osv.: Kopier altid først indholdet over i et program, der fjerner al formatering.

I Windows er et udmærket bud Notepad. På MAC kan TextEdit bruges, hvis man husker at sætte formateringen til “Plain text”.

Det fjerner de fleste problemer, men sommetider kan der stadig dukke tekststykker op med forskellige farve, størrelse eller skrifttype.

En gennemsnitlig artikel på nettet består af få forskellige elementer som afsnit, overskrifter, punktopstillinger og links. Hvis du ved, hvordan ‘ren’ kode ser ud, så kan du nemt opdage de dele, der giver problemer.

Sådan finder du koden

Langt de fleste webredaktører skriver i editorer, der giver mulighed for at se koden bag formateringen. Det er forskelligt, hvordan koden kaldes frem, men som regel finder du en knap, der hedder “View source”, “</>” eller, som i WordPress, ved at skifte fra “Visual”-modus til “Text”-modus.

Når først du kan se koden, har du næsten ubegrænset mulighed udrydde uønsket formatering.

Afsnit

Afsnit er det, der fylder mest i de fleste artikler på nettet.

Et afsnit ser sådan ud i kode:

<p>Det her er et afsnit.</p>

Det ovenstående giver:

Det her er et afsnit.

Afsnit er et såkaldt block-level element. Dvs. at hvert element ikke vises ved siden af hinanden, men under og over.

Denne kode:

<p>Afsnittet vises på block-level.</p>
<p>Det står altså ikke efter hinanden.</p>

Giver dette:

Afsnittet vises på block-level.
Det står altså ikke efter hinanden.

I HTML-kode gør det ingen forskel, om der er mellemrum i koden eller om der er linjeskift.

Denne kode:

<p>Første afsnit.</p><p>Andet afsnit.</p><p>Tredje afsnit.</p>

Giver dette:

Første afsnit.
Andet afsnit.
Tredje afsnit.

Det er vigtigt at være opmærksom på, for ofte er koden til en artikel én stor klump uden nogen linjeskift eller opsætning.

Typiske fejl

Det er meget ofte i afsnittene, at der er fejl i koden. Teksten bliver kopieret fra f.eks. Word, og der er gemmer sig koder, som skaber problemer.

Her er et typisk eksempel:

<p style="font-size: 20px;">Hele dette afsnit bliver vist med skriftstørrelse 20.</p>

Giver dette:

Hele dette afsnit bliver vist med skriftstørrelse 20.

Bemærk stykket style=”font-size: 20px;”. Det stykke kode gør, at hele afsnittet vises med skriftstørrelse 20. Ofte er det skriftstørrelse eller skrifttype, der bliver kopieret med over.

Samme type fejl kan også se sådan ud:

<p>Dette afsnit bliver vist med normal skriftstørrelse, men <span style="font-size: 20px;">dette bliver vist med skriftstørrelse 20.</span></p>

Det giver:

Dette afsnit bliver vist med normal skriftstørrelse, men dette bliver vist med skriftstørrelse 20.

Span-tagget gør det muligt at lave andre farver, størrelser osv. midt i en linje. Det er derfor også en jævnlig gæst, der sniger sig med ind i editoren fra f.eks. Word.

I det ovenstående vil løsningen være helt at fjerne span-tagget, så der står:

<p>Dette afsnit bliver vist med normal skriftstørrelse, og nu gør dette også.</p>

Det giver:

Dette afsnit bliver vist med normal skriftstørrelse, og nu gør dette også.

‘Ren’ kode

Nøglen til at kunne gennemskue HTML-kode og finde problemet, er at vide, hvad koden bør indeholde.

Nogle tags er i sin simpleste form mere enkle end andre. Et afsnit behøver som vist ovenfor blot at bestå at et start-tag og et slut-tag:

<p></p>

Andre elementer på siden er mere indviklede. Det gælder f.eks. lister:

<ul>
  <li>Første</li>
  <li>Anden</li>
  <li>Tredje</li>
</ul>

Giver dette:

• Første
• Anden
• Tredje

Hvert punkt på listen består af et list-item-tag med start og slut ligesom afsnittet. Men i modsætning til afsnittet omkranses de enkelte punkter på listen af tagget for “Unordered list”.

Bemærk at det også her er ligegyldigt, om der er linjeskift i koden. Denne kode er giver nøjagtig det samme som ovenfor:

<ul><li>Første</li><li>Anden</li><li>Tredje</li></ul>

Elementer med attributter

Nogle elementer har tags, der skal bruge mere yderligere oplysninger for at fungere. Det sker ved attributter. Det kan være forvirrende, for faktisk var det en attribut, der gav problemerne med skriftstørrelsen i de tidligere eksempler!

Et af de tags, der skal bruge en attribut for at fungere, er tagget for links:

<a href="http://dr.dk">Klik her for at komme til dr.dk</a>

Det giver:

Klik her for at komme til dr.dk

Attributten er i dette tilfælde dér, linket fører til. Et link giver ingen mening uden, så det skal være der. Det er denne del af koden:

href="http://dr.dk"

Det samme gælder for et andet almindeligt element på hjemmesider, nemlig billeder. Tagget for et billede giver ingen mening, hvis ikke det har en adresse at hente billedet fra.

Denne kode:

<img src="http://martinove.dk/wp-content/uploads/2015/08/DSC_5284_fuld-1-e1440275753497.jpg" />

Giver dette:

Tagget for billeder er ét af dem, der ikke har en start og en slutning. Trækker man adressen til billedet fra, står der blot:

<img src="" />

Det er altså med andre ord ikke alle attributter, der giver problemer, tværtimod. Nogle er nødvendige.

Opslagsværk

Nedenfor finder du en liste over de mest almindelige elementer.

Afsnit:

<p></p>

Link:

<a href=""></a>

Billede:

<img src="" />

Liste (uordnet):

<ul>
  <li></li>
</ul>

Liste (ordnet):

<ol>
  <li></li>
</ol>

Fed tekst:

<strong></strong>

Overskrifter (i varierende størrelse):

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

Kontakt

Giver denne artikel mening? Har den hjulpet dig eller er det volapyk?

Fang mig på @mocdotcom eller google.com/+MartinOveChristensen, og stang mig en kommentar eller spørgsmål.

Du kan også kommentere historien på Medium:
HTML for webredaktører

The post HTML for webredaktører first appeared on The Tech in Journalism.

Yay! My first JavaScript game – sort of.

Basically I saw a video of Mary Rose Cook live coding Space Invaders in 30 minutes and wanted to get my fingers dirty.

I thought the programming was awesome and I wanted to get some practice by replicating it, so I did.

After that, I started improving on it. Mainly, I did levels of incrementing difficulty and menues.

Press “Z” to shoot and check out the video of the live coding – it’s badass: http://vimeo.com/105955605

The post JavaScript game – yay! first appeared on The Tech in Journalism.

The biggest problem was to format the new disk. No matter what I did, the button saying “Set RAID and re-format” in the dlink management software was greyed out.

I tried shutting down the NAS, insert the new disk in slot 1, no avail. Shutting down, inserting in slot 2, no avail. I did this numerous times. Performed S.M.A.R.T checks, scanned the disk again and again. Nothing worked.

You know what did? Using Internet Explorer!

Yup, apparently the dlink software doesn’t like Chrome.

So, there you have it. I hope you encounter this post in a search someday and it saves you a few hours.

The post Solved: Unable to format disk on dlink NAS first appeared on The Tech in Journalism.

Using circles and events in Google Maps – the nerdy part

Here’s a little something I did after reading about the contaminated areas around the Fukushima Dai-ichi Power Plant. The danish newspaper Information has a piece here, CNN got a piece here.

The basic idea is to use the maps object “circle” to quickly put a clickable element on the map. Clicking the the circle will then of course present the relevant information. In this example I use JQuery to show() and hide() the corresponding information.

Effects – It’s a usability thing

To make the graphic seem responsive to the user I’ve added some small effects. This is quite important as it bring life to the graphic, I wanna see that something happens when I click something.

In this example, two effects are applied when clicking either of the circles. 1. The width of the line at the outer rim of the clicked circle goes from 1 pixel to 2 pixels. 2. The font-weigth of the corresponding list item goes bold.

The same thing happens when you click to list items, except for “Overblik”, which just puts both the circles line width to it’s standard of 1 pixel.

Make the map and site “listen” to each other

I won’t go in details about events in this post. You can get a taste of it here: HTML Events.

For those of you familiar with events fired in the standard HTML DOM, I’ll just point you in the right direction for making the map respond to DOM events and vice versa.

Google Maps has it’s own object model inside it. The map itself and various objects like polygons and so on can fire events like you’re used to from the HTML DOM. That makes the Google Map an powerful anchor for your dynamic website.

The information of events can also flow the opposite way by adding a DOM Listener to the map. In this example I use that feature for listening to clicks on the menu items, which in turn makes the corresponding circle respond by increasing it’s line width to 2 pixels. You can find all about event handling in Google Maps here: Google Maps JavaScript API V3 Events.

End note

First of all, if you’ve been reading this far, thank you! This is nerdy stuff, but the result are worth it.

Next of, the map seems to have issues when embedded in WordPress. If you take a look at the zoom status bar, it’s pretty much gone. Also, the satellite images doesn’t load right when you’re zoomed in. I’m not quite sure what to do about it.

That’s it, thanks for reading! Question and comments are more than welcome, of course.

The post Events in and out of Google Maps first appeared on The Tech in Journalism.

The text bubble is often not the best way to show of information in Google Maps. This is a custom layout which uses the user events of Google Maps the show the relevant information. Very buggy and only a crude sketch for now.

By: Martin Ove Christensen

Google Maps is very widely used, and with good reason. It’s very easy to create maps, and you can customize the information shown in the text bubbles by embedding images and so on.

One thing I hate, though, is getting pushed around a map, which is to small to display all the information, that the publisher wants to show. Here’s one example, and it’s even a mild one from the danish tv-station, TV2: Verdens dyreste naturkatastrofer(Worlds most expensive natural disasters)

In each text bubble, there’s a link to a gallery of pictures, one from each of the disasters. Linking and galleries are good, but it’s a shame that I have to leave the map to look at the pictures.

Cue: JavaScript, CSS and HTML

I believe that the cure is this: Learn! Learn how to make good use of the small space you have, by making the web dynamic. It’s built into the web, and my example doesn’t use anything but supported standards for browsers. The technologies are free too, so there’s no excuse.

Designing dynamic web elements have another thing going for it too. If it’s well designed, it will entice the curiosity of the user, eager to explore what lies beneath other elements on the map. Of course, there’s a potential pitfall in this too. The interactive and dynamic element may become incomprehensible and the user may “give up” on exploring it as a result of losing the general view. This is a design consideration.

Dynamic web elements are also very interesting, when it comes to mobile devices. The small screen make for a great challenge on how to present information in an intuitive manner without making the content too shallow.

That’s it. I hope you enjoyed checking out this crude example. Questions and comments are welcome, of course.

Thanks for reading!

The post Bye bye, text bubble in Google Maps first appeared on The Tech in Journalism.