Startmon bekommt Nachrichten

News schnell auf Abruf

News schnell auf Abruf

Ab sofort beherbergt Startmon einen News-Stream. Er verlinkt die neuesten Artikel verschiedener Quellen.

Momentan werden Posts von tagesschau.de, GIGA, DIE WELT, WinFuture, Servaholics, CNET und LGK Blog angezeigt.
Geplant ist, dass registrierte Nutzer die Quellen selbst zusammenstellen können.

Abgerufen werden die Posts per RSS. Aufgrund des Layouts werden aber nur Posts mit Thumbnails angezeigt.

News sind unten versteckt

News sind unten versteckt

Der Clou: Der Aufruf von Startmon wird nicht verlangsamt, da die Streams erst geladen werden, wenn der Nutzer die News sehen will.
Die News können auf zwei Weisen aufgerufen werden:

  • Du klickst unten auf das “Show feeds”-Button.
  • Du scrollst runter.

Ich bevorzuge die zweite Variante, da es deutlich fixer geht. 😉

Startmon gleich ausprobieren »

Traffic verringern: JavaScript-Dateien kombinieren

Für das Kombinieren und Minimieren von JavaScript-Dateien, habe ich UglifyJS2 auf GitHub gefunden.

Das ist ein Node.js-Modul. Um es zu verwenden, muss also Node.js installiert sein.

Um UglifyJS2 zu installieren, tippe Folgendes in ein Konsolen-Programm ein (ich benutze gerne PowerShell):

npm install uglify-js -g

Navigiere anschließend mit cd zu deinem Projekt-Ordner.

In meinem Beispiel sieht mein Projekt-Ordner so aus:

  • js
    • jquery.js
    • main.js
    • search.js
  • css
  • index.html

Führe nun diesen Befehl aus:

uglifyjs js/jquery.js js/main.js js/search.js -o js/script.min.js

Zuerst kommt der Befehl uglifyjs, anschließend die zu kombinierenden Dateien (durch Leerzeichen getrennt). Das -o steht für “Output” und kennzeichnet die Ausgabe-Datei. In diesem Fall js/script.min.js.

Wichtig bei der Eingabe ist auch die Reihenfolge der Dateien.

Anschließend müsste unser Ordner so aussehen:

  • js
    • jquery.js
    • main.js
    • search.js
    • script.min.js
  • css
  • index.html

Und aus:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/search.js"></script>

wird:

<script type="text/javascript" src="script.min.js"></script>

Erweiterungen für Entwicklungsumgebungen?

Brackets Branding
Für Brackets habe ich ein passendes Plugin gefunden: JSCompiler2

Durch eine Konfigurations-Datei können somit auch die Ein- und Ausgabe-Dateien gespeichert werden, sodass für eine Neu-Kompilierung nur noch ein Knopfdruck nötig ist. Ziemlich praktisch also.

Für NetBeans scheint es nichts dergleichen zu geben. Für PHPStorm lässt sich UglifyJS anscheind einrichten: https://www.jetbrains.com/phpstorm/help/minifying-javascript.html


Ich habe auch einen Artikel über das Kombinieren von CSS-Dateien geschrieben: Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien

Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien

Wer in einem Web-Projekt viele verschiedene CSS- und JavaScript-Bibliotheken verwendet, wird feststellen, dass sich im Quellcode eine Menge HTTP-Anfragen anhäufen können:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap-theme.css">
		<link rel="stylesheet" type="text/css" href="./lib/bootstrap-fileinput/css/bootstrap-fileinput.css">
		<link rel="stylesheet" type="text/css" href="./css/main.css">
		<link rel="stylesheet" type="text/css" href="./css/home.css">
	</head>

	<body>
		...
	</body>
</html>

Die feine Art ist das nicht. Der Browser muss so bei jedem Seitenaufruf jede einzelne Datei abklappern. Je nach Internet-Leistung des Besuchers kann das eine Weile dauern.
Und jede Millisekunde, die der Nutzer warten muss, ist eine Gefahr, dass dieser die Seite wieder verlassen will.

In diesem Artikel möchte ich ein paar Tipps geben, wie ihr CSS-Dateien kombinieren könnt, sodass der Browser nur noch jeweils eine Datei abfragen muss.

Los geht’s: CSS-Dateien mit LESS verbinden

LESS ist ein CSS Pre-Prozessor. LESS-Dateien beinhalten erweiterten CSS-Code, welcher anschließend durch einen Compiler zu einer normalen CSS-Datei kompiliert wird.

LESS-Dateien können mehrere LESS-Dateien importieren. Die kompilierte CSS-Datei sieht dann so aus, als hätte ich einfach die einzelnen Codes hintereinander eingefügt.

Beispiel

./less/main.less

body {
	font-family: "Arial", sans-serif;
	font-size: 14px;
	color: #000;
}

./less/home.less

#nav li#home {
	font-weight: bold;
	background-color: orange;
}

./less/style.less

@import url("main.less");
@import url("home.less");

LESS-Compiler generiert CSS

./css/style.css

body {
	font-family: "Arial", sans-serif;
	font-size: 14px;
	color: #000;
}
#nav li#home {
	font-weight: bold;
	background-color: orange;
}

CSS-Datei minimiert

./css/style.min.css

body{font-family:Arial,sans-serif;font-size:14px;color:#000}#nav li#home{font-weight:700;background-color:orange}

Bei vielen CSS-Dateien macht das auf jeden Fall Sinn. Für viele Entwicklungsumgebungen und Code-Editor gibt es passende Plugins, welche aus LESS-Dateien automatisch CSS-Dateien generieren. Unter anderem für Brackets, Visual Studio oder auch NetBeans.

In dem Beispiel habe ich die style.css außerdem noch minimiert (zu: style.min.css). So schrumpft auch nochmal die Größe der End-Datei. Auch hierfür gibt es entsprechende Plugins. Mit CSS Minifier geht das auch online.

Vorher / nachher

Wenn wir das auch noch mit unseren CSS-Frameworks machen wird aus:

<link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./lib/bootstrap/css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="./lib/bootstrap-fileinput/css/bootstrap-fileinput.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="stylesheet" type="text/css" href="./css/home.css">

schnell das hier:

<link rel="stylesheet" type="text/css" href="./css/style.min.css">

Was beachtet sei: Drch die Kombinierung ändern sich auch die Verweise. Bei Bootstrap bespielsweise müssen dann die Verweise zu den Font-Dateien geändert werden.
Öffne dafür die bootstrap.less und ersetze alle ../fonts/ durch ../lib/bootstrap/fonts/.

JavaScript-Dateien kombinieren

Gut, die Stylesheets haben wir somit auf eine Datei reduziert. Doch auch bei den JavaScript-Dateien auf einer Seite kann sich einiges ansammeln.

In einem seperaten Artikel möchte ich darauf eingehen, JavaScript-Dateien zu kombinieren.
Der Link wird dann hier angefügt.

html_bones 2.1 ist online!

html_bones Screenshot

html_bones ist ein kleines Werkzeug für Web-Entwickler, die schnell mit einem neuen Web-Projekt starten wollen.
Aus eine Reihe an häufig genutzten HTML-Elementen, können die benötigten Komponenten aus- und abgewählt werden.

So erhältst du schnell ein HTML-Grundaufbau, welchen du auch für später speichern kannst.

Es ist keine Anmeldung oder Registrierung notwendig.
Jetzt starten »

(mehr …)

Startmon Build-News jetzt immer hier im Blog

Ab sofort werde ich bei jeder neuen Beta-Veröffentlichung von Startmon einen kleinen Post hier im Blog erstellen, um die Änderungen und Verbesserungen zu dokumentieren.

Diese Posts werden unter der Kategorie Startmon Build-News veröffentlicht und werden außerdem immer auf der Startseite in der Sidebar erscheinen.

Die Verkündungen neuerer Versionen werden aber auch weiterhin über Twitter (@lgkonline) geschehen.

Startmon: Eigenes Hintergrund-Bild

Hochladen eines eigenen Billdes

Endlich habt ihr die Möglichkeit, auf Startmon ein eigenes Hintergrundbild zu verwenden.
Auf geht’s: startmon.lgk.io/beta