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.

Kostenlose Icons: 18 Websites, die in keiner Linksammlung fehlen dürfen

Sie sind auf der Suche nach Icons für Ihr Web-Projekt? Ähnlich wie zum Thema Stockfotos finden sich auch für Icons jede Menge Quellen im Netz, die Symbole zur freien Nutzung anbieten. Wir haben die besten Icon-Websites für Sie gesammelt.

Auf der Suche nach dem passenden Symbol

Ob in Website-Designs, Interfaces von Web-Applikationen oder Social-Media-Posts, Icons sind allgegenwärtig. Auf diesen 18 Websites sollten Sie vorbeischauen, wenn Sie Icons für Ihr nächstes Projekt benötigen:

Material Design Icons

material.io

Das Design-System «Material» von Google ist bekannt. Passenderweise liefert Google gleich auch noch über 900 Icons im Material-Design zur Verwendung im Web, sowie für Android- und iOS-Projekte. Die Icons stehen unter der Open-Source-Lizenz «Apache License Version 2.0» zum Download bereit.

SketchActive

aegeank.com

360 Icons stellt die Chinesin Aegean K kostenlos zum Download bereit. Entweder als PNG-Datei oder in den Formaten Sketch, AI und EPS, falls Sie die Icons anpassen möchten. Die Icons können grundsätzlich frei genutzt werden, Aegean freut sich aber über eine Spende.

Entypo+

entypo.com
Entypo+, das sind 411 sorgfältig gezeichnete Piktogramme von Daniel Bruce aus Schweden. Die Icons stehen unter einer Creative-Commons-Lizenz.

Noun Projectthenounproject.com

The Noun Project hat grossgesteckte Ziele und will nichts weniger, als alle Bildsprachen unserer Welt zusammenbringen. Die Noun Project-Community stellt täglich neue Icons online, die unter einer Creative-Commons-Lizenz genutzt werden können.

GLYPHICONS

glyphicons.com

Die GLYPHICONS-Bibliothek umfasst über 800 monochrome Icons, bei denen Wert auf Einfachheit und Klarheit gelegt wurde. Die kostenlosen Varianten sind unter einer Creative-Commons-Lizenz nutzbar, kostenpflichtige Versionen sind ebenfalls erhältlich.

Endless Icons

endlessicons.com

Der Name ist Programm: Die Icon-Sammlung von Min Kim wächst stetig. Die Icons sind sowohl in privaten als auch kommerziellen Projekten frei nutzbar.

Smashing Magazine

smashingmagazine.com

Das Design-Magazin «Smashing Magazine» hält immer wieder Freebies bereit, die auf jeden Fall einen Blick wert sind. Der regelmässige Besuch der Kategorie lohnt sich also.

Flaticon

flaticon.com

Flaticon produziert nicht nur 4000 Icons jeden Monat, sondern bietet auch jede Menge Funktionen. So lassen sich die Icons direkt in der gewünschten Farbe oder als Icon-Font herunterladen.

Captain Icon

Captain Icon

Mario ist Captain Icon. Der Spanier bietet über 350 Icons zum Download, die unter einer Creative-Commons-Lizenz genutzt werden können.

Good Stuff No Nonsense

goodstuffnononsense.com

Bei Good Stuff No Nonsense findet man Icon-Packs zu vielen verschiedenen Themen. Nebst einigen kostenlosen Packs bietet die Website auch kostenpflichtige Sammlungen an.

Dribbble

dribbble.com

In der Designer-Community Dribbble finden sich, nebst jeder Menge Inspiration, unter dem Suchbegriff «free icons» eine riesige Auswahl an hochstehenden Icon-Kreationen.

Iconfinder

iconfinder.com

Über 1.5 Millionen Icons sind in der Datenbank von Iconfinder abgelegt. Die Icons können nach verschiedenen Kriterien gefiltert werden und stehen unter verschiedenen Lizenzen zur Verfügung.

GraphicBurger

graphicburger.com

GraphicBurger bietet nebst anderen Design-Elementen wie Mock-Ups oder UI-Kits auch eine Auswahl an qualitativ hochstehenden Icons. Die Icons sind unter einer GraphicBurger-eigenen Lizenz nutzbar.

Icons 8

icons8.com

Icons8 bietet 51’000 Icons im Flat-Design zum Download an. Die Icons können kostenlos genutzt werden, wenn ein Link zur Icons8-Website gesetzt wird.

iconmonstr

iconmonstr.com

iconmonstr, ein Projekt des Deutschen Alexander Kahlkopf, bietet eine ständig wachsende Zahl von kostenlosen, einfachen Icons. Die Bilder stehen unter einer eigenen Lizenz.

Zondicons

zondicons.com

Zondicons sind SVG-Icons, die für den Einsatz in digitalen Produkten wie Websites oder Apps entwickelt wurden. Die Icons des Kanadiers Steve Schoger können unter einer Creative-Commons-Lizenz genutzt werden.

IconStore

iconstore.co

IconStore, ein Projekt von den Leuten hinter CodyHouse, bietet Premium-Icons von ausgewählten Designern. Die Icons sind unter einer eigenen Lizenz kostenlos nutzbar.

365cons

365cons.com

365cons war ein Projekt der Designerin Amy Devereux. Sie stellte 2016 ein Jahr lang jeden Tag ein neues Icon online und experimentierte mit neuen Techniken und Stilen. Die Icons können unter der Open-Source-Lizenz MIT genutzt werden.

Tausende Icons verwalten?

Hat man sich die gewünschten Icons heruntergeladen, stellt sich die Frage, wie man die zum Teil grosse Anzahl Dateien gescheit verwaltet. Wir nutzen dazu gerne das Tool IconJar für macOS. Passenderweise bieten die Macher von IconJar gleich selbst eine Sammlung von kostenlosen Icons an.

Kennen Sie weitere Icons-Websites, die in keiner gut sortierten Linkliste fehlen dürfen?

Seite 6 von 109« Erste...45678...203040...Letzte »