Service Worker ohne HTTPS auf einem Virtual Host in Chrome

Es ist so weit, ich mache zum ersten Mal ein Projekt mit Service Worker Offline verfügbar. Sehr weit bin ich noch nicht, weil es gleich zu Anfang eine Hürde zu bewältigen gab.

Um Service Worker verwenden zu können, benötigt man eine verschlüsselte Verbindung. Lokal ist das grundsätzlich kein Problem, wenn die Site über localhost oder 127.0.0.1 angesteuert wird, weil diese Ausnahmen darstellen (siehe hier für weitere Ausnahmen). In meinem Fall haut das aber nicht hin, weil ich mit Virtual Hosts arbeite.

Die Lösung

Zumindest für Chrome habe ich aber eine Lösung gefunden: Man öffnet den Browser über die Kommandozeile und behandelt http://meinesite.dev als sichere Quelle, obwohl sie unsicher ist. Dafür muss man zwei Flags übergeben.

Zuerst schließt man alle Instanzen von Chrome oder in meinem Fall von Chrome Canary, öffnet Terminal oder iTerm und gibt folgende Zeile ein.

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --user-da-dir=/tmp/foo --unsafely-treat-insecure-origin-as-secure=http://meinesite.dev

Bevor man mit Enter bestätigt, muss man natürlich http://meinesite.dev noch durch die passende Domain ersetzen und Google\ Chrome\ Canary mit Google\ Chrome falls man Chrome und nicht Chrome Canary öffnen möchte.
Wenn alles gut gegangen ist, öffnet sich Chrome und man kann Service Worker auf einem Virtual Host verwenden.

Für Firefox gibt es wohl auch eine Lösung: Service Worker ohne HTTPS auf einem Virtual Host in Firefox (Habe es aber nicht getestet)

Offline ist bei mir noch nichts verfügbar, aber Service Worker läuft jetzt zumindest auf meinem Virtual Host. Mal sehen, wie es weitergeht ;)

Quellen

Mehr lesen

Warum Seiten auf iOS 9 skaliert werden

shrink to fit auf iOS9

Neulich habe ich eine Website in unterschiedlichen Browsern durchgetestet und da ist mir aufgefallen, dass sie auf iOS 9 beim Laden kurz runter skaliert wird und dann auf die eigentliche Größe springt. Das ist bei jedem Click auf einen Link passiert, was auf Dauer sehr nervig war. Ich konnte nicht herausfinden, was der eigentliche Grund war für das hin und her springen (wahrscheinlich habe ich irgendwas bei den Abmessungen verpfuscht ;)), aber zumindest weiß ich jetzt warum auf iOS 9, und nur auf iOS 9, überhaupt irgendetwas skaliert wird.

(mehr …)

Mehr lesen

Inspiration: Portfolio Websites

unique Wireframe

Es gibt schon seit Längerem große Aufregung darüber, dass im Web alles gleich aussieht. Dass alle die gleichen WordPress-Themes verwenden und die gleichen Bootstrap basierenden Websites bauen. Dass alle Websites ein großes Heroimage mit Call To Action (Scroll üblicherweise), 1 - 3 Spalten und irgendeinen Parallax-Spass haben. Dass alle DesignerInnen die gleichen Stockfotos und Iconsets verwenden, und so weiter.

Wenn man sich umschaut, wird man sehen, dass das auch wirklich so ist. Aber wessen Schuld ist das? Unsere! Natürlich ist mir klar, dass man bei den meisten Projekten wahrscheinlich nicht die gestalterischen Freiheiten hat, die man sich wünsche würde. Es gibt aber eine ganz gute Möglichkeit, wie man sich selbst kreativ verwirklichen und zeigen kann, dass es auch andere Wege gibt Websites zu gestalten: Die eigene Portfolio Website.

Nachdem meine Website nicht nur nicht schön ist, sondern sich auch in irgendeinem kostenlosen Standard WordPress Theme kleidet, habe ich nicht groß zu reden. Aber ich bin bereit mich zu bessern und habe vor, optisch etwas aus meinem Online-Auftritt zu machen.
Deswegen habe ich mich umgesehen und umgehört und ein paar Inspirationen gesammelt. In dieser kleinen Sammlung sind nicht nur zwangsweise sehr schöne, dafür aber programmier- oder layouttechnisch irgendwie besondere und auffällige Werke dabei.

(mehr …)

Mehr lesen

Meine Top Picks der letzten Woche #3

Eine kleine Liste mit den Artikeln, Videos, Websites, Programmen, etc., die mir letzte Woche besonders gut gefallen haben oder in irgendeiner Form hilfreich waren. Wenn du die Liste ergänzen kannst und möchtest, mach das bitte in den Kommentaren.

Image tag vs background property

https://pawelgrzybek.com/image-tag-vs-background-property/
object-fit: cover ist für img-Tags was background-size: cover für Hintergrundbilder ist.

MediumEditor

https://yabwe.github.io/medium-editor/
Ein Inline-Editor.

CSS Best Practices

http://fantasai.inkedblade.net/style/talks/best-practices/#title
Ein paar CSS Tipps. (Mit Click/Tap blättern.)

Mehr lesen

Meine Top Picks der letzten Woche #2

Eine kleine Liste mit den Artikeln, Videos, Websites, Programmen, etc., die mir letzte Woche besonders gut gefallen haben oder in irgendeiner Form hilfreich waren. Wenn du die Liste ergänzen kannst und möchtest, mach das bitte in den Kommentaren.

The A11Y Project

http://a11yproject.com/
How-Tos, Checklisten, Patterns, Tests, Tipps und Mehr zum Thema Accessibility.

vienna.js

http://www.meetup.com/viennajs/
Ich war letzte Woche das erste Mal beim vienna.js Meetup und kann es nur empfehlen!

BEM with Emmet

https://pawelgrzybek.com/bem-with-emmet/
Emmet Filter für den BEM Syntax.

Critical Web Fonts

http://www.zachleat.com/web/critical-webfonts/
Kritische Buchstaben zuerst laden und dann erst den Rest.

Mehr lesen

AutoFileName: Projektroot in Sublime ändern

Autofilename Root angepasst

Ich könnte mir die Arbeit in Sublime ohne dem Plugin AutoFileName nicht mehr vorstellen. Bis vor Kurzem hat mich aber eine Sache gestört. Immer wenn ich einen Pfad mit / begonnen habe, wurde der Pfad relativ zum Root meines Computers vervollständigt, anstatt relativ zum Root meines Projekts. Zum Glück kann man den Projektroot in Sublime ändern.

Wie ich dieses Problem gelöst habe, erkläre ich gleich. Vorher möchte ich aber AutoFileName kurz vorstellen.

(mehr …)

Mehr lesen

Meine Top Picks der letzten Woche #1

Eine kleine Liste mit den Artikeln, Videos, Websites, Programmen, etc., die mir letzte Woche besonders gut gefallen haben oder in irgendeiner Form hilfreich waren. Wenn du die Liste ergänzen kannst und möchtest, mach das bitte in den Kommentaren.

Jank Free

http://jankfree.org/
Artikel, Videos und Slides zum Thema „Ruckelfreie Animation mit CSS (und Javascript)“.

Vienna

http://www.vienna-rss.org/
Open Source RSS Reader für OS X

How to Create Visually Effective Calls-To-Action

http://rafaltomal.com/visually-effective-cta/
Ein kurzer Artikel, der beschreibt was man für effektive Calls-To-Action beachten kann/soll.

About Those Lava Lamps

https://gist.github.com/marick/3ec112bc38b2af267e15
Ein nette Anekdote zur Mitarbeitermotivation

Mehr lesen