Wir nehmen den Geekserver aus unserem Angebot

Vor rund vier Jahren haben wir unser Angebot mit Cloudservern erweitert und dabei mit dem Geekserver eine «unmanaged» Variante (d.h. der Kunde erhält einen «leeren» Server und kümmert sich selbst um Betriebssystem und Wartung) angeboten. Über die Zeit haben wir dabei gelernt, dass der Geekserver nicht mehr zu 100% zu uns passt.

Wir möchten das Internet zu einem besseren Ort machen. Dafür versuchen wir, die bestmöglichen Produkte zu bauen und glauben, dass dafür ein messerscharfer Fokus unabdingbar ist. Der Markt rund um Geekserver bzw. virtuelle Server ist weiterhin stark im Wandel und um vorne mitspielen zu können, sind, wie bei allen Produkten, kontinuierlich grosse Investitionen und Weiterentwicklungen nötig.

Der hohe Investitionsbedarf, die Verwässerung unseres Fokus und nicht zuletzt auch die im Vergleich zu unseren anderen Produkten geringe Nachfrage nach dem Geekserver haben den Entscheid reifen lassen, den Geekserver per Ende Juli 2017 aus unserem Angebot zu nehmen.

Diese Entscheidung fällt uns nicht leicht, doch glauben wir, dass unsere Kräfte bei unseren anderen Produkten besser eingesetzt sind und wir dadurch einen deutlich grösseren Wert für unsere Kunden schaffen können.

Starke Alternativen

Der angesprochene Markt bietet heute eine Vielzahl an tollen Geekserver-Alternativen, sowohl in der Schweiz wie auch weltweit. Dazu eine kleine Auswahl an Anbietern:

Schweiz

International

Unsere Geekserver-Kunden haben wir schon vor einiger Zeit über die Umstellung informiert und die Abschaltung ist inzwischen vollzogen.

Abschliessend bedanken wir uns erneut bei allen unseren ehemaligen Geekserver-Kunden für das in uns gesetzte Vertrauen und würden uns freuen, den Einen oder Anderen mit unseren verbleibenden Produkten weiterhin zu unseren Kunden zählen zu dürfen. Unser Herzblut ist allen unseren Kunden jederzeit Gewiss.

WordCamp Bern 2017 – Ticket für den WordPress-Event gewinnen

Anfang September treffen sich WordPress-Begeisterte am WordCamp Bern um interessanten Vorträgen zu lauschen und sich mit anderen Fans auszutauschen. Mit ein bisschen Glück sind Sie gratis mit dabei: Wir sind stolzer Sponsor des WordCamps Bern und verlosen 2 Tickets für den Event am Samstag, 09. September 2017

WordCamp Bern 2017

WordCamps, die WordPress-Events

WordCamps sind von der WordPress-Community organisierte Konferenzen, die auf der ganzen Welt stattfinden. In der Vergangenheit gastierten WordCamps bereits in Genf und Zürich. Dieses Jahr macht nun zum ersten Mal ein WordCamp im wunderschönen Bern halt. Initiiert wurde das WordCamp Bern von den Leuten hinter dem WordPress Meetup Bern, einem Meetup zum Thema WordPress das seit 2014 regelmässig stattfindet.

07.09.17: WP Admin Barcamp – Austausch unter Admins

Bereits an den beiden Tagen vor dem Haupt-Event finden Veranstaltungen statt. Den Anfang macht das WP Admin Barcamp, bei dem sich Administratoren von WordPress-Websites in intimem Rahmen zu selbstgewählten Themen austauschen und voneinander lernen können. Der Teilnehmerkreis wurde dabei ganz bewusst auf 30 Teilnehmer beschränkt, um eine möglichst offene Diskussion zu ermöglichen. Als Vorbild dient der WPAdminDay, der im Rahmen des WordCamps Berlin 2017 stattgefunden hatte. Wir unterstützen das WP Admin Barcamp zusammen mit der Berner WordPress-Agentur cubetech, in deren Räumlichkeiten das Barcamp stattfinden wird.

08.09.17: Contributor Day – Zu WordPress beitragen

Am Freitag folgt dann der sogenannte Contributor Day. Der Name lässt es erahnen, an diesem Tag können Sie zu WordPress beitragen. Und zwar nicht nur mit Code um den WordPress-Core zu verbessern. Unterstützen Sie als Designer die Weiterentwicklung des WordPress-Interfaces oder helfen Sie mit, Themes zu prüfen, die in den offiziellen Katalog aufgenommen werden sollen. Nicht zuletzt sind auch Übersetzungen der Oberfläche und der Dokumentation eine gute Möglichkeit, dem Open-Source-Projekt WordPress etwas zurückzugeben. Oder möchten Sie selbst einmal ein WordCamp oder Meetup organisieren? Am Contributor Day sind die passenden Ansprechpartner vor Ort. Wie für das WP Admin Barcamp stellt auch für den Contributor Day cubetech ihre Räumlichkeiten zur Verfügung.

09.09.17: WordCamp Bern – Kommentieren und Ticket gewinnen

Am 09. September findet dann die eigentliche Konferenz statt. Auf zwei Tracks präsentieren die Referenten zu spannenden Themen aus den verschiedensten Bereichen. Von generellen Themen wie «Multi Channel Publishing mit WordPress» über Business-Themen wie «The creation of small business websites in WordPress» hinzu Design- und Entwicklungsthemen wie «How to manage online courses in WordPress» oder «Improving Performance of Code I have seen in the wild» ist für jeden etwas dabei. Zu Gast ist die Konferenz im UniS-Gebäude der Universität Bern. Der perfekte Rahmen für den ganztägigen Event, den sich WordPress-Enthusiasten nicht entgehen lassen sollten.

Möchten Sie kostenlos ans WordCamp Bern 2017? Hinterlassen Sie bis 27.08.2017, 24:00 Uhr einen Kommentar unter diesem Beitrag und verraten Sie uns, auf welchen der Vorträge Sie am meisten gespannt sind. Wir verlosen unter allen Kommentaren 2 x 1 Ticket für die Konferenz am Samstag. Viel Glück!

Update 28.08.2017: Herzlichen Glückwünsch an unsere Gewinner Sabrina und Michael. Viel Spass am WordCamp :)

Ob Server oder Browser: Ohne Cache kein Speed

Das Thema Cache ist ein Muss, wenn Sie Ihre Website auf Geschwindigkeit trimmen möchten. Aber was macht ein Cache eigentlich? Welche Arten von Caches gibt es? Und welche Cache-Arten sollten Sie überhaupt nutzen? Wir zeigen es Ihnen.

Schnelle Websites dank Cache: Welche Caching-Methoden gibt es?

Was ist ein Cache?

Das Wort Cache stammt auf dem französischen und bedeutet «Versteck». Die IT-Welt, die ja sonst grösstenteils auf englischsprachigen Prinzipien fusst, nutzt die Bezeichnung für einen Puffer bzw. Zwischenspeicher. Können Sie sich noch an die Anti-Shock-Funktionen Ihres Discmans erinnern? Im Grunde genommen war dies nichts anderes als ein Cache.

Caches sind allgegenwärtig und kommen auf sämtlichen Schichten des OSI-Modells zum Einsatz. Kurzum: Überall wo Daten ausgetauscht und berechnet werden, kommt es zu Wartezeiten. Mithilfe von Caches lassen sich diese Wartezeiten verringern. Caching bedeutet also Daten an einem speziellen Ort vorzuhalten, weil sie von dort schneller abgerufen werden können als vom Ursprungsort.

Zwei Arten von Caches

Im Web-Kontext kann man zwei Arten von Caching unterscheiden:

  1. Am Ort, wo eine Website generiert wird, also auf Serverseite: Der serverseitige Cache.
  2. Auf dem Gerät des Besuchers, auf dem die Website angezeigt wird: Der clientseitige Cache.

Serverseitiger Cache: Grösste Einsparmöglichkeiten

Die Hauptarbeit beim Generieren und Ausliefern einer Website wird auf dem Server erledigt. Dementsprechend sind dort die Optimierungsmöglichkeiten durch den Einsatz von Caches besonders gross.

Serverseitig kommen an mehreren Orten Caches zum Einsatz. Sie als Betreiber einer Website haben deshalb mehrere Optionen, durch geschicktes Caching die Auslieferung Ihrer Website zu beschleunigen.

Seiten-Cache

Mit einem Seiten-Cache lässt sich der grösse Geschwindigkeitsgewinn herausholen. Er liefert eine fixfertige HTML-Seite aus, der Inhalt wird also nicht mehr dynamisch generiert. PHP und MySQL sind bei der Datenlieferung aus dem Seiten-Cache nicht mehr involviert. Das spart massig Zeit, denn Webserver sind auf die Auslieferung von Text- und Bilddateien optimiert. Der Datendurchsatz ist riesig.

Seiten-Caches lassen sich auf verschiedene Arten lösen. Der generierte HTML-Code lässt sich als Datei auf der Harddisk oder im RAM, als Eintrag in der Datenbank sowie in spezialisierten Cache-Modulen wie LiteSpeed Cache, Memcached oder APCu ablegen. Caching-Plugins für Systeme wie WordPress funktionieren in der Regel nach dem Harddisk-Prinzip, da diese Methode bei den meisten Hosting-Anbietern funktioniert. Wo Dienste wie Memcached oder APCu verfügbar sind, lohnt sich deren Einsatz. Sie legen die Daten im Arbeitsspeicher des Servers ab, was für noch schnellere Zugriffszeiten sorgt.

Tipp: Nutzen Sie auf unseren Servern LiteSpeed Cache. Die Caching-Methode verspricht dank der Ablage der Daten im RAM und der direkten Integration in den Webserver noch kürzere Zugriffszeiten als andere Seiten-Caches. Auf einem Speedserver steht Ihnen zusätzlich Memcached zur Verfügung.

Seiten-Caches lassen sich einfach für Websites konfigurieren, deren Inhalte sich nicht ständig ändern. Im Zusammenspiel mit passenden Plugins wie LiteSpeed Cache für WordPress oder LiteMage für Magento eignet sich ein Seiten-Cache aber genauso für Websites mit vielen dynamischen Inhalten wie Online-Shops, für die Caching in der Regel komplexer ist.

Soll ich einen Seiten-Cache nutzen?
Ja, unbedingt. Der Einsatz eines Seiten-Caches ist für alle Arten von Websites empfohlen. Die Zeitersparnis gegenüber dynamisch generierten Inhalten ist schlichtweg zu gross, um sie zu vernachlässigen.

Opcode-Cache

Eine Stufe unter dem Seiten-Cache befindet sich der sogenannte Opcode-Cache. Ein Opcode-Cache speichert den bereits interpretierten PHP-Code in maschinenlesbarer Form. Normalerweise vergisst der PHP-Interpreter den gesamten Code nach einem Aufruf der PHP-Datei und muss bei einem erneuten Aufruf alle Anweisungen neu berechnen. Dank dem Opcode-Cache muss der PHP-Interpreter bei weiteren Aufrufen der PHP-Datei nicht mehr ans Werk und der Code wird direkt ausgeführt. In unseren Tests mit WordPress wurden Anfragen an die Website dank Opcode-Caching doppelt so schnell beantwortet.

Soll ich einen Opcode-Cache nutzen?
Ja, unbedingt. Auf unseren Servern ist der PHP-Opcode-Cache OPcache deshalb automatisch aktiv.

Object-Cache

Der Object-Cache spart Zeit bei der Berechnung von PHP-Objekten. WordPress bietet zum Beispiel einen eingebauten Object-Cache, der jeweils für eine Anfrage gültig ist. Wird also ein Objekt auf einer Seite mehrmals aufgerufen, wird der erste Aufruf im Object-Cache abgelegt. Weitere Vorkommnisse des Objekts auf der Seite werden direkt aus dem Cache geliefert. Object-Caching lässt sich auch auf einen Caching-Modul wie Memcached oder APCu auslagern. Im Fall von WordPress gibt es Plugins, die die Kommunikation mit dem Modul erledigen.

Soll ich einen Object-Cache nutzen?
Ja, Object-Caching ist sinnvoll und macht auch die Bedienung eines CMS-Backends schneller. Systeme wie WordPress haben bereits von Haus aus einen Object-Cache eingebaut.

Datenbank-Cache

Typische datenbankbasierende Content-Management-Systeme (CMS) legen Text-Inhalte und Konfigurationen in der Datenbank ab. Das heisst, das CMS greift oft auf die entsprechende Datenbank zu. Auch Datenbanken werden mit geschicktem Caching performanter. Die nötigen Parameter sind auf üblichen Webhosting-Angeboten bereits optimiert und lassen sich nicht durch eigene Befehle verändern.

Soll ich einen Datenbank-Cache nutzen?
Datenbank-Caching wird von der Datenbank bereits selbst gesteuert, die optimalen Einstellungen in der Regel vom Hosting-Anbieter vorgegeben. Eigene Anpassungen erfordern tieferes Wissen und sind meist nur auf Hosting-Angeboten mit root-Zugriff möglich.

CDNs

Wenn auch nicht auf dem eigenen Server, lassen sich CDNs (Content-Delivery-Networks) ebenfalls als serverseitige Caches bezeichnen. CDN-Anbieter wie KeyCDN betreiben Server, die auf der ganzen Welt verteilt sind. So bringen diese Anbieter statische Inhalte geografisch näher an die Besucher Ihrer Website, die entsprechenden Datenpakete müssen also einen kürzeren Weg zurücklegen. Das spart Zeit.

Soll ich ein CDN nutzen?
Der Einsatz eines CDNs lohnt sich vor allem für Websites, deren Besucher aus aller Welt stammen.

Clientseitiger Cache: Eingesparte Datenpakete

Der clientseitige Cache im Web-Kontext ist nichts anderes als der Cache in Ihrem Browser. CSS-, JavaScript- oder Bilddateien ändern sich nicht oft. Diesen Umstand nutzt der Browser und legt die Dateien in seinem Cache ab. Wird eine Website nochmals aufgerufen, kann der Browser diese Dateien direkt anzeigen oder verarbeiten. Der weite Weg der Datenpakete vom Server zum Browser entfällt damit.

Der clientseitige Cache lässt sich zwar als Website-Betreiber nicht komplett kontrollieren, aber zumindest mit serverseitigen Befehlen beeinflussen. So können Sie bestimmen, wie lange gewisse Inhalte Ihrer Website im Browser-Cache des Betrachters zwischengelagert werden sollen. Hinweise darauf, wo und wie Sie das Browser-Caching für Ihre Website noch verbessern können, liefern Tools wie der Website-Speedtest von Pingdom, GTmetrix oder PageSpeed Insights von Google.

Die Anweisungen zum Browser-Caching werden über die sogenannten HTTP-Headers übermittelt und können zum Beispiel in der .htaccess-Datei einer Website definiert werden.

Grundsätzlich stehen 4 Typen von HTTP-Headers zur Verfügung, die das Steuern des Caches im Browser möglich machen: Expires, Cache-Control max-age, Last-Modified und ETag. Expires und Cache-Control max-age steuern den Zeitraum, während dem ein Browser die angeforderte Datei zwischenspeichert, ohne beim Server nach einer neuen Version der Datei anzufragen. Die beiden Befehle werden deshalb als «starke» Caching-Header bezeichnet. Last-Modified und ETag ermöglichen es dem Browser zu prüfen, ob die zwischengespeicherte Version einer Datei noch gültig ist und aus dem Cache geladen werden kann. Die beiden Befehle werden als «schwache» Caching-Header bezeichnet, da der Browser beim Server anfragen muss, ob die gespeicherte Version noch gültig ist.

Welche Cache-Headers soll ich verwenden?

Google empfiehlt je einen starken und schwachen Caching-Header zu nutzen. Das Duo Expires und ETag hat sich bewährt, da die beiden Header unter den Browsern die grösste Unterstützung geniessen.

Die Anweisungen für den Expires-Header können zum Beispiel folgendermassen in der .htaccess-Datei Ihrer Website definiert werden:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/html "access 24 hours"
ExpiresDefault "access 1 month"
</IfModule>

Mit diesen Beispielanweisungen werden Dateien vom Browser standardmässig bis zu einem Monat gecached. Für einzelne Dateitypen wie JPG-Bilder sogar bis zu einem Jahr. Die ideale Konfiguration ist, wie so oft, für jedes Projekt unterschiedlich. Wenn sich Inhalte auf Ihrer Website nicht oft ändern, können Sie die Expires-Anweisung auf hohe Zeiträume setzen. Liefern Sie häufig neue Versionen von Dateitypen aus, empfiehlt sich das Setzen von tieferen Zeiträumen. ETags werden in den meisten Fällen übrigens automatisch vom entsprechenden Webserver generiert.

Tipp: Auf unseren Servern werden sowohl Expires-Anweisungen als auch ETags für statische Dateien vom Webserver automatisch mitgeliefert. Sie können die Anweisungen und ETags bei Bedarf durch eigenen Code oder über Plugins für Ihr Content-Management-System überschreiben.

Schlussendlich bleibt auch für den clientseitigen Cache die Frage:

Soll ich den clientseitigen Cache nutzen?
Ja, unbedingt. Der Einsatz des clientseitigen Caches reduziert die Datenmenge, die beim wiederholten Besuch Ihrer Website übertragen wird. Das führt zu kürzeren Wartezeiten.

Kennen Sie weitere Caching-Geheimtipps? Oder haben Sie Fragen zum Beitrag? Wir freuen uns über Ihren Kommentar.

Web Components: Bausteine fürs moderne Web

Web Components nennt sich eine Sammlung von zurzeit 4 verschiedenen W3C-Spezifikationen, die es ermöglichen, eigene HTML-Tags zu definieren und diese wiederverwendbar zu machen. Web Components wurden 2011 das erste Mal vorgestellt und befinden sich seither in der Entwicklung. Wir zeigen Ihnen, was Web Components sind und wie Sie sie in Ihren Projekten nutzen können.

Web Components: Bausteine fürs Web

Die 4 Teile von Web Components

Wie eingangs erwähnt, hausen unter dem Schirm von Web Components 4 Spezifikationen: «Custom Elements», «Shadow DOM», «HTML Imports» und «HTML Templates». Sie sollen das Leben von Frontend-Entwicklern leichter machen. Die Zauberwörter heissen «Wiederverwendbarkeit» und «Modularisierung». Einmal definiert, kann ein neues Element an vielen verschiedenen Orten genutzt werden. Ohne, dass ich das Element für jedes neue Projekt von Grund auf neu definieren muss. Und das alles als W3C-Empfehlung, was auf eine breite Browser-Unterstützung hoffen lässt.

1. Custom Elements

Die Spezifikation für Custom Elements legt die Basis, um neue DOM-Elemente (HTML-Tags) zu kreieren oder bestehende Tags zu erweitern. Ein eigener HTML-Tag lässt sich mit einer simplen Syntax erzeugen. Hier ein Beispiel:

class MeinButton extends HTMLElement {
  ...
}
customElements.define("mein-button", MeinButton);

Dieser Code reicht bereits, um

<mein-button>Klick, klick!</mein-button>

in einem HTML-Dokument verwenden zu können. Während ein solches eigenes Custom Element keinerlei Eigenschaften mitbringt und ich per CSS und JavaScript definieren muss, wie der Browser den Tag darstellen soll und welche Funktionen er hat, gibt es eine weitere Möglichkeit: Das Erweitern eines bestehenden HTML-Tags. Mit folgendem Beispiel-Code, kann ich den <button>-Tag erweitern.

class MeinErweiterterButton extends HTMLButtonElement {
  ...
}
customElements.define("mein-erweiterter-button", MeinErweiterterButton, { extends: "button" });

Das so definierte Button-Element binde ich mit dem Zusatz is="mein-erweiterter-button" ein:

<button is="mein-erweiterter-button">Klick, klick!</button>

Das Element wird vom Browser wie ein <button>-Element interpretiert. Weiteres Verhalten kann ich in meiner Tag-Definition hinzufügen. Damit es keine Konflikte zwischen bereits standardisierten Tags und Custom Elements gibt, schreibt die Spezifikation vor, dass Custom Elements einen Bindestrich im Namen enthalten.

2. Shadow DOM

Mit dem Shadow DOM werden HTML-Elemente gekapselt. Dokumentweite CSS-Regeln beeinflussen damit das Aussehen des entsprechende HTML-Elements nicht mehr. Technisch gesehen, verpasst das Shadow DOM dem HTML-Element einen eigenen DOM-Baum, der losgelöst vom DOM des HTML-Dokuments ist.

Shadow DOM fixes CSS and DOM. It introduces scoped styles to the web platform. Without tools or naming conventions, you can bundle CSS with markup, hide implementation details, and author self-contained components in vanilla JavaScript.

Eric Bidelman, Engineer @ Google

Das Konzept Shadow DOM ist schon bei einigen mit HTML5 eingeführten Standard-Tags im Einsatz und lässt sich in den Entwickler-Tools des Browsers beobachten, wenn die entsprechende Option aktiviert ist. So sieht beispielsweise das Shadow DOM für den <video>-Tag eines YouTube-Videos aus:

Shadow DOM am Beispiel eines <video>-Tags

Shadow DOM am Beispiel eines <video>-Tags.

Eine Kapselung von Elementen war bislang nur mit dem <iframe>-Tag möglich. Shadow DOM soll die Schwachstellen des Tags ausmerzen.

3. HTML Imports

Mit HTML Imports lassen sich externe HTML-Dokumente im eigenen HTML-Dokument einbinden. Möchte ich zum Beispiel das Element Emoji Rain integrieren, reicht folgendes Markup:

<link rel="import" href="../emoji-rain/emoji-rain.html">
...
<emoji-rain active></emoji-rain>

Alle Custom Elements, die in der Bibliothek von webcomponents.org publiziert sind, enthalten eine Anleitung, wie das Element installiert werden kann und welche Abhängigkeiten vorhanden sind.

4. HTML Templates

Der Name lässt es erahnen, HTML Templates sind Templates im HTML-Dokument. Was man von serverseitigen Templating-Engines wie Twig kennt, wird damit im Browser möglich. HTML Templates werden vom Browser nicht dargestellt, bis das vom Autor gewünscht ist. Bisher löst man eine solche Fragestellung mit Hacks wie display: none oder eingebunden in einen <script>-Block. Mit Web Components lässt sich das über den Tag <template> erreichen:

<template id="meintemplate">
    <figure>
        <img src="" alt="Ein tolles Bild">  
        <figcaption>Ein tolles Bild.</figcaption>
    </figure>
</template>

Möchte ich das Template nutzen, aktiviere ich es zum Beispiel mit folgendem Code:

var t = document.querySelector('#meintemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';

var clone = document.importNode(t.content, true);
document.body.appendChild(clone);

Gegenüber dem display: none-Hack bieten HTML Templates den Vorteil, dass das Element effektiv erst vom Browser geladen wird, wenn das Template aktiviert wird. So können unnötige Requests eingespart werden. Ausserdem profitieren HTML Templates vom Shadow DOM, das Styling des Elements wird damit einfacher und ist sicher vor ungewollten Einflüssen.

Kann ich Web Components schon bedenkenlos einsetzen?

Obwohl Web Components schon länger in Entwicklung sind, ist die Browser-Kompatibilität zurzeit noch bescheiden. Lediglich HTML Templates werden von allen Browserherstellern bereits nativ unterstützt.

Während die auf der Rendering-Engine Blink basierenden Browser Chrome und Opera alle der 4 Web Components-Empfehlungen von Haus aus unterstützen, können die 3 anderen Empfehlungen mit Hilfe von Polyfills in Browsern wie Safari, Firefox oder Edge genutzt werden.

Browser-Unterstützung von Web Components im Juni 2017

Browser-Unterstützung von Web Components im Juni 2017.

Frameworks und Bibliotheken für Web Components

Zum Thema Web Components stehen einige Bibliotheken bereit, die fertige Elemente bieten oder das Erstellen von eigenen Elementen vereinfachen. Allen voran Polymer aus dem Hause Chrome. Polymer vereinfacht zum einen die Erstellung von eigenen Elementen und bietet andererseits Polyfills für Browser, die Web Components nicht bereits nativ unterstützen.

Ein Beispiel für die Verwendung von Polymer: Buttons für verschiedene soziale Netzwerke als Custom Elements.

Andere nennenswerte Bibliotheken: Bosonic bietet eine Sammlung von Elementen, die die tägliche Arbeit von Web-Entwicklern vereinfachen sollen. SkateJS verspricht funktionale und performante Web Components mit minimalem Footprint und X-Tag bietet ein Interface für die schnelle Entwicklung von Komponenten.

Geht das nicht auch mit React und Co.?

Wie so oft gilt: Viele Wege führen nach Rom. Im Web gilt das ganz besonders. Die Modularität, die Sie mit Web Components erreichen, lässt sich auch mit einem Framework wie React, Angular oder Vue erzielen.

Web Components haben den Vorteil, dass sie bereits W3C-Empfehlungen oder auf gutem Weg dahin sind. Früher oder später werden die Funktionen nativ von allen Browsers unterstützt und Polyfills nicht mehr nötig sein. Dann werden Web Components und damit eigene HTML-Tags so normal sein, wie es heute ein Standard-Tag wie <img> oder <div> ist.

Nutzen Sie Web Components schon in Ihren Projekten? Wir freuen uns über Ihren Kommentar.

15 Alfred-Workflows, auf die wir nicht mehr verzichten können

Alfred, das ist der beliebte Application-Launcher für macOS. Die Mac-Nutzer in unserem Team schwören auf das praktische Helferlein. Neben den ab Werk eingebauten Funktionen lässt sich Alfred mit sogenannten Workflows praktisch unendlich erweitern. Wir zeigen Ihnen, auf welche 15 Workflows wir nicht mehr verzichten können.

Mehr als nur ein Application-Launcher

Alfred bietet, neben den bereits aus Spotlight bekannten Funktionen, eine ganze Menge Zusatzfeatures die einem das Leben einfacher machen. Während die Grundversion kostenlos ist, lässt sich die Software mit dem kostenpflichtigen Powerpack so richtig aufbrezeln. Mit dem Powerpack werden auch sogenannte Workflows freigeschaltet. Damit lassen sich aufwendige Aufgaben einfach automatisieren.

15 unverzichtbare Alfred-Workflows

Alfred kann im cyon-Team auf eine grosse Fangemeinde zählen. Ich habe meine Kolleginnen und Kollegen gefragt, welches die Funktion ist, auf die sie nicht mehr verzichten wollen. Das sind die Favoriten in unserem Team:

1. Homebrew und Cask

Applikationen und Tools installieren wir wenn möglich via Homebrew und Cask. Dieser Workflow macht die beiden Installer in Alfred verfügbar, der Weg über das Terminal entfällt damit.

2. Image Optimization

Mit dem Workflow «Image Optimization» können Sie die beiden Bildoptimierungstools ImageAlpha und ImageOptima mit einem Tastendruck auf eine ganze Liste von Bildern anwenden. Einsparungen von über 70% sind keine Seltenheit. Damit gehört der Workflow zum Standardrepertoire für jeden, der Bilder ins Netz hochlädt.

3. Resize Image

Eine Sammlung von Bildern auf eine gemeinsame Breite skalieren? Mit diesem Workflow kein Problem. Perfekt um Bilder auf die für Ihre Website vorgesehene Grösse zu bringen.

4. caniuse.com

Welche Browserversionen unterstützen die neuste Web-Technologie? caniuse.com weiss es. Mit diesem Workflow holen Sie sich caniuse.com direkt in die Alfred-Box.

5. Font Awesome

Suchen Sie mit diesem Workflow in der beliebten Icon-Schriftart nach dem gewünschten Symbol und fügen Sie den passende Code gleich per Tastendruck in die im Hintergrund offene Applikation ein.

6. GitHub

Suchen Sie auf GitHub nach Gists, Repos, Benutzer oder den beliebtesten Projekten. Ohne, dass Sie GitHub in Ihrem Browser öffnen müssen.

7. IP-Adresse

Wie lautet meine eigene IP-Adresse? Die Frage lässt sich meist nicht ohne weiteres beantworten. Mit diesem Workflow reicht der Befehl ip und Alfred spuckt die aktuelle IP-Adresse sowie weitere interessante Informationen aus.

8. DNS-Lookup

Welche IP-Adresse steckt hinter einem Domainnamen? Und welcher Mailserver ist für die Domain zuständig? Der Workflow von den Kollegen bei nine.ch wird auch in unserem Team gerne genutzt.

9. Open with Sublime Text

Vergleichbare Workflows sind für viele andere Applikationen erhältlich. Mit «Open with Sublime» öffnen Sie die gerade ausgewählte Datei ganz bequem in Sublime Text.

10. Alfred Faker

Sie brauchen Dummy-Daten für Ihre neuste Entwicklung? Alfred Faker kopiert Platzhalter-Daten in die Zwischenablage. Ob Lorem Ipsum, Namen oder Telefonnummern. Alfred Faker hat sie alle.

11. Secure Password Generator

Passwörter für neue Accounts generieren wir in der Regel mit einem Passwort-Manager wie 1Password. Wenn’s einmal ein Passwort sein soll, dass nicht im Passwort-Manager hinterlegt werden muss, bietet dieser Workflow jede Menge Funktionen für das Generieren von sicheren Passwörtern.

12. Copy URL

Ein kleiner, aber feiner Workflow, den wir immer wieder gerne nutzen. «Copy URL» kopiert die URL aus dem gerade aktiven Browserfenster in die Zwischenablage. Auf Wunsch auch direkt als Link im Markdown-Format.

13. Confluence

Dokumentationen, Projekte und die Wissensdatenbank leben bei uns in einer Confluence-Instanz. Dieser Workflow verfrachtet die Confluence-Suche in die Alfred-Box und macht das Finden des passenden Inhalts noch einfacher.

14. Sketchflow

In Sketch möchte ich meistens eines der zuletzt geöffneten Dokumente bearbeiten. Geht es Ihnen auch so? Mit diesem Workflow erhalten Sie unter dem Befehl sketch eine Liste mit den zuletzt bearbeiteten Dateien. Per Tastendruck öffnen Sie die gewünschte Datei direkt in Sketch.

15. StackOverflow Search

StackOverflow ist die Anlaufstelle zu allen Fragen rund ums Programmieren. Mit «StackOverflow Search» holen Sie sich die StackOverflow-Suche direkt in die Alfred-Box.

Tipp zum Schluss: Custom Search für unser Supportcenter

Kein Workflow sondern eine vorinstallierte Funktion. Über eine Custom Search kann die Suchfunktion einer Website direkt angesteuert werden. Die Einrichtung ist denkbar einfach und hier am Beispiel unseres Supportcenters erklärt:

  1. Klicken Sie in den Alfred-Settings auf «Features > Web Search > Add Custom Search»
  2. Füllen Sie die Werte für die Suche aus:
    • URL: Die URL inklusive der Variable für den Suchbegriff. Hier also https://www.cyon.ch/support/search/{query}
    • Title: So heisst der Workflow danach in den Einstellungen.
    • Keyword: Über dieses Keyword starten Sie die Suche (Tipp: Halten Sie das Keyword möglichst kurz). Wir nutzen sup.
    • Icon: Die Suche lässt sich mit einem Icon versehen. Das Hinzufügen der Bilddatei funktioniert ganz einfach per Drag&Drop.
  3. Fertig. Sie können die Suche nach einem passenden Artikel in unserem Supportcenter nun über Alfred starten.

Gibt es Alfred-Workflows, auf die Sie nicht mehr verzichten möchten? Wir freuen uns auf Ihre Tipps in den Kommentaren.

Seite 3 von 10612345...102030...Letzte »