Browserify unter Windows benutzen

Browserify ist ein unter der MIT-Lizenz stehendes Projekt, mit welchem Bundles aus modularen JavaScript-Projekten erstellt werden können. Auf der Projektseite wird die Nutzung von Browserify erklärt. Im ersten Schritt muss Browserify über den Paketmanager npm global installiert werden:

npm install -g browserify

Anschließend kann das Kommando genutzt werden:

browserify main.js -o bundle.js

Das Problem daran ist, dass das Kommando browserify nicht bekannt ist.

browserify.org

Stattdessen erhält der Nutzer folgende Fehlermeldung:

Der Befehl “browserify” ist entweder falsch geschrieben oder konnte nicht gefunden werden.

Damit Browserify genutzt werden kann, muss es direkt über das installierte Modul mittels Node.js aufgerufen werden:

node C:\Users\username\AppData\Roaming\npm\node_modules\browserify\bin\cmd.js src\index.js -o bundle.js

Alternativ kann Browserify direkt im Projekt installiert werden:

npm install
npm install browserify

Anschließend kann es von dort genutzt werden:

node node_modules\browserify\bin\cmd.js src\index.js -o bundle.js

Quellcode-Formatierung unter WordPress

Wenn Quelltext in einem WordPress-Beitrag untergebracht wird, so ist dieser in einem pre-Block meist relativ unansehnlich. Im Plugin-Verzeichnis existieren für dieses Problem eine Reihe von Plugins, welche sich der Codeformatierung annehmen.

Mithilfe einer modifizierten Version der Google-Bibliothek code-prettify wird der Quelltext eingefärbt

Problematisch an diesen Plugins ist allerdings, dass der Nutzer in meisten Fällen alle Beiträge entsprechend anpassen muss. Bei einigen Beiträgen mag dies noch funktionieren, aber bei einigen tausenden Beiträgen ist dies relativ unpraktisch. Abhilfe schafft hier das Plugin Code Prettify von Kaspars Dambis.

Code Prettify
Preis: Kostenlos

Mithilfe einer modifizierten Version der Google-Bibliothek code-prettify wird der Quelltext eingefärbt. Alle pre-Blöcke werden entsprechend behandelt und dies führt zu einem ansehnlicheren Quelltext:

public int doFooBar() {
    int prime = generatePrime();
    return prime * 3.14;
}

Die Entwicklung des Plugins findet auf GitHub statt. Lizenziert ist Code Prettify unter der Apache License in der Version 2 und damit freie Software.

Geocoding in Verbindung mit einer Leaflet-App

Gestern schrieb ich in einem Artikel, wie Adressen aus Koordinaten mittels des Dienstes Nominatim, unter Zuhilfenahme von OpenStreetMap-Daten, ermittelt werden können. Mithilfe der freien Bibliothek Leafleat, kann dies nun in eine kleine Webapplikation gegossen werden.

Anhand der Geo-Koordinate wird die Adresse ermittelt und dargestellt.

Ziel ist es eine Applikation zu bauen, welche eine Karte darstellt und bei einem Klick auf diese Karte den Geocoding-Dienst anfragt. Sobald die Antwort vom Dienst eingetroffen ist, soll in einem Pop-up die Adresse dargestellt werden. Nachdem ein Grundgerüst in Form einer HTML-Datei erstellt wurde, werden dort die benötigten Bibliotheken (Leaflet und jQuery) eingebunden. Anschließend kann die Karte erzeugt werden. Damit diese im Vollbild dargestellt wird, findet sich eine entsprechende CSS-Definition in der Datei:

<style type="text/css">
	body {
		padding: 0;
		margin: 0;
	}

	html, body, #map {
		height: 100%;
	}
</style>

Anschließend kann der TileLayer angelegt werden und der Map zugewiesen werden:

// Options
var centerLatitude=53.49577;
var centerLongitude=13.30873;
var zoomLevel=15;

// Define layer
var openStreetMapLayer = new L.TileLayer(
		'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		{attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'});

// Define map
var map = L.map('map', {
	center: new L.LatLng(centerLatitude, centerLongitude),
	zoom: zoomLevel,
	layers: [openStreetMapLayer]
});

Für die Karte muss im nächsten Schritt ein Click-Event definiert werden, welches den AJAX-Request gegen den Geocoding-Dienst auslöst und den Marker erstellt. Der jeweilige Marker wird in eine separate Ebene gepackt und beim nächsten Klick wieder gelöscht und anschließend ein neuer Marker erstellt:

// Marker managment
var markerLayer;
map.on('click', function(e){

	// Console debug
	var coord = e.latlng;
	var lat = coord.lat;
	var lng = coord.lng;
	console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);

	// Marker managment		
	if(markerLayer != undefined) {
		map.removeLayer(markerLayer);
	}
	
	markerLayer = new L.Marker(e.latlng);
	map.addLayer(markerLayer);

	// Call geocode api
	var request =	$.ajax({
		method: "GET",
		url: "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lng + "&format=json"
	});

	request.done(function( json ) {
		console.log(json);
		markerLayer.bindPopup(json.display_name).openPopup();
	});
});

Am Stück sieht die Applikation wie folgt aus:

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet address encoder</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
	
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}

		html, body, #map {
			height: 100%;
		}
	</style>
	
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div id="map"></div>
	
	<script>
	        // Options
		var centerLatitude=53.49577;
		var centerLongitude=13.30873;
		var zoomLevel=15;
		
		// Define layer
		var openStreetMapLayer = new L.TileLayer(
				'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
				{attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'});
		
		// Define map
		var map = L.map('map', {
		    center: new L.LatLng(centerLatitude, centerLongitude),
		    zoom: zoomLevel,
		    layers: [openStreetMapLayer]
		});
		
		// Marker managment
		var markerLayer;
		map.on('click', function(e){

			// Console debug
			var coord = e.latlng;
			var lat = coord.lat;
			var lng = coord.lng;
			console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);

			// Marker managment		
			if(markerLayer != undefined) {
				map.removeLayer(markerLayer);
			}
			
			markerLayer = new L.Marker(e.latlng);
       		map.addLayer(markerLayer);

			// Call geocode api
			var request =	$.ajax({
				method: "GET",
				url: "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lng + "&format=json"
			});

			request.done(function( json ) {
				console.log(json);
				markerLayer.bindPopup(json.display_name).openPopup();
			});
  		});
	</script>
</body>
</html>

Alternativ kann der Quelltext heruntergeladen bzw. ausprobiert werden.

JavaScript-Animationen in 140 Zeichen

Damals, als die Welt noch in Ordnung war, erlaubte Twitter 140 Zeichen pro Tweet. Diese Grenze haben die Menschen hinter dem Projekt Dwitter genommen und in eine Herausforderung umgewandelt. Bei Dwitter geht es darum in maximal 140 Zeichen eine JavaScript-Animation zu erstellen. Die Ergebnisse können sich sehen lassen; mittlerweile befinden sich etliche solcher Animationen auf der Seite und zeigen was in 140 Zeichen alles möglich ist.

In 140 Zeichen zu einer JavaScript-Animation

Zu finden ist das Projekt unter dwitter.net. Die Webseite, ein in Python geschriebenes Projekt, ist freie Software und unter Apache License in der Version 2 lizenziert. Der Quelltext kann über GitHub bezogen werden.

Code Snippets über Postman generieren

Mit der App Postman ist es möglich REST-API Aufrufe gegen beliebige Endpunkte durchzuführen. Allerdings bietet Postman weitere Funktionalität, welche vom normalen Tagesgeschäft der App abweicht. Eine dieser Funktionalitäten ist der Code Snippet Generator.

Code Snippets können für unterschiedliche Sprachen und Frameworks erzeugt werden

Mit diesem Generator kann ein beliebiger Request in Quellcode umgewandelt werden. Der Generator unterstützt unterschiedliche Programmiersprachen und Frameworks. Für Java würde, unter Nutzung der OK HTTP Bibliothek, das Ganze so aussehen:

OkHttpClient client = new OkHttpClient();

MediaType mediaType = MediaType.parse("text/plain");
RequestBody body = RequestBody.create(mediaType, "{\r\n\tfield: \"data\",\r\n\tfield2: \"data\",\r\n\tfield3: \"data\"\r\n}");
Request request = new Request.Builder()
  .url("https://example.com")
  .post(body)
  .addHeader("HeaderField", "headerValue")
  .addHeader("Content-Type", "text/plain")
  .addHeader("User-Agent", "PostmanRuntime/7.11.0")
  .addHeader("Accept", "*/*")
  .addHeader("Cache-Control", "no-cache")
  .addHeader("Postman-Token", "7dda208f-ba63-467d-99cd-98455c2b3a7a,9125dbf4-cd5c-4070-87e3-fcda7416ca08")
  .addHeader("Host", "example.com")
  .addHeader("accept-encoding", "gzip, deflate")
  .addHeader("content-length", "56")
  .addHeader("Connection", "keep-alive")
  .addHeader("cache-control", "no-cache")
  .build();

Response response = client.newCall(request).execute();

Erreichbar ist das Feature über den Code-Link, welcher unter dem Send-Button des Hauptfensters zu finden ist. Nach einem Klick auf den Link erscheint ein Dialog in welchem die gewünschte Sprach- und Frameworkkombination ausgewählt werden kann.

Unter dem Send-Button ist der Code-Link zu finden

Als Sprachen für die Generierung von Code Snippets werden unter anderem C#, Go, Java, JavaScript, Objective-C, PHP, Python und Swift unterstützt. Daneben werden bestimmte Tools wie curl und wget unterstützt. Postman selber kann unter getpostman.com bezogen werden.