tipps & tricks
Browser, Sicherheit, Webstandards
Webstandards, Browser, Sicherheit
1. Firefox, Chrome & Opera Bequemer suchen Wenn Sie regelmäßig nach Informationen auf derselben Website – etwa Wikipedia – suchen, können Sie natürlich immer wikipedia suchbegriff in die Adressleiste des Browsers eingeben oder direkt auf Wikipedia suchen. In modernen Browsern geht das etwas einfacher – durch intelligente Schlüsselwörter.
Im Firefox klicken Sie dazu mit einem rechten Mausklick in das Suchfeld auf der betreffenden Website. Wählen Sie Ein Schlüsselwort für diese Suche hinzufügen… Im Kontextmenü können Sie nun ein Schlüsselwort bzw. ein Kürzel für diese Website ergänzen. Zum Beispiel yt für YouTube, wp für Wikipedia oder imdb für die Internet Movie Database. Wenn Sie nun in der Adresszeile etwa wp favicon eingeben, landen Sie sofort auf der entsprechenden Wikipedia-Seite über das Favicon. Sie sparen also ein paar unnötige Klicks. Um die intelligenten Lesezeichen zu verwalten, klicken Sie bei den Lesezeichen auf Lesezeichen verwalten. Dort finden Sie unter Lesezeichen-Menü alle Kürzel (solange Sie beim Anlegen der Kürzel keinen anderen Ordner ausgewählt haben). In Chrome können Sie solche Kürzel auch anlegen, es geht nur leider nicht ganz so bequem. Klicken Sie hierfür mit einem Rechtsklick auf die Adressleiste, wählen Sie Suchmaschinen bearbeiten…. Dort können Sie beim Hinzufügen oder Bearbeiten einer Suche auch das Kürzel ändern. Achten Sie darauf, dass die URL der eigentlichen Suche ein %s enthält, das dem String entspricht, den Sie nach dem Kürzel eingeben. Opera bietet übrigens auch Schlüsselwörter. Klicken Sie dazu analog zu Firefox mit einem Rechtsklick auf ein Suchfeld und wählen Suchmaschine erstellen.
2. Sicherheit Websites per HTTPS ausliefern Google, Mozilla und Co. drängen schon seit Jahren darauf, dass Websites sicher über HTTPS ausgeliefert werden sollen. Und es gibt immer neue Anreize, dies auch bei jeder einzelnen Website umzusetzen.
Das S in dem HTTPS steht für Secure und sorgt dafür, dass Daten abhörsicher übertragen werden. Das ist in jedem Fall nötig, wenn über Formulare Daten übertragen werden – von Bestellungen über Kontonummern hin zu Login-Daten. Selbst wer nur ein einfaches Kontaktformular eingebaut hat, wird seine Website vermutlich spätestens im Rahmen der DSGVO sicherheitshalber auf HTTPS umgestellt haben. Und tatsächlich liefern weltweit immer mehr Websites ihre Inhalte per HTTPS aus. Sowohl Firefox als auch Chrome werten dazu anonyme Telemetrie-Daten in ihren Browsern aus. Beide Datenpools zeigen, dass mittlerweile etwa 75 Prozent aller Webseiten über HTTPS aufgerufen werden. Das liegt unter an- derem daran, dass es mit der Initiative Let’s Encrypt möglich ist, kostenlose SSL-Zertifikate einzubinden. Aber auch wenn Sie eine statische Website haben und keine Daten per Formular übertragen werden, gibt es Gründe, sich um ein SSL-Zertifikat zu kümmern. Zum einen gibt es einen kleinen SEO-Boost, weil Google Websites, die per HTTPS ausgeliefert werden, etwas besser bewertet, als jene, die einfach nur auf HTTP setzen. Zum anderen zeigt der Browser Chrome in der neuen Version 68 seit Ende Juli nun sehr deutlich an, wenn eine Website nur via HTTP aufgerufen wird. In dem Fall erscheint in der Adressleiste ein Nichtsicher. Das könnte Besucher, die sich nicht gut auskennen, durchaus verunsichern. Grund genug, sich um ein Zertifikat zu kümmern. Je nach Anbieter und Webpaket können Sie Ihre Website mittlerweile vielleicht schon mit wenigen Klicks kostenlos auf HTTPS umstellen. Jedenfalls sollte dieser Service heutzutage nicht mehr 100 Euro im Jahr kosten – andernfalls wäre das durchaus ein Grund, mal den Webhoster zu wechseln.
3. Videos YouTube-Videos responsive einbetten Heutzutage sollten alle Elemente einer Website responsive sein. Das ist bei Embedded Content, also bei Inhalten, die Sie per iframe von anderen Plattformen einbinden, aber nicht automatisch der Fall.
Wenn Sie ein YouTube-Video einbetten wollen, können Sie mit ein paar Klicks schnell den Embed-Code in ihre Webseite einbauen, zum Beispiel mit: <iframe width="560" height="315" src= "https://www.youtube.com/embed/jMdcSTVPOFw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> Das funktioniert tadellos, hat aber einen kleinen Haken: Das Video wird mit fester Höhe und Breite eingebettet und verhält sich nicht responsive. Mit einer kleinen Ergänzung können Sie aber doch ein responsives Verhalten ergänzen. Dazu benötigen Sie einen zusätzlichen Container um das iframe herum: <div class="videoWrapper"> <iframe width="560" height="315" src= "https://www.youtube.com/embed/jMdcSTVPOFw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> .videoWrapper { position: relative; padding-bottom: 56.25%; /* 56.25% entspricht dem Format 16:9 */ } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Die Magie steckt hierbei in dem padding der Klasse .videoWrapper. Ein Prozentwert bei padding richtet sich nämlich nach der Breite des Containers. Solange Sie nichts anderes festgelegt haben, nimmt das div als Blockelement die gesamte zur Verfügung stehende Breite (des Elternelements) ein. Hier entspricht das padding-bottom immer 56,25% der Breite des Containers, was einem modernen Video-Verhältnis von 16:9 entspricht. Ein anderes Bildformat benötigt also einen anderen Wert. Sie können verschiedene Formate am einfachsten über Klassen regeln. Diese Lösung benötigt zwar ein zusätzliches div, dafür wird das Video nun responsive angezeigt.
4. CSS Styles direkt demonstrieren Der Webentwickler Marius Gundersen (@Gunder senMarius) hat neulich auf Twitter an einen kleinen Trick erinnert, mit dem Sie in Schulungen und Vorträgen Änderungen am CSS auch direkt innerhalb einer HTML-Seite demonstrieren können.
Dazu packen Sie style-Angaben direkt innerhalb des bodys und setzen das style-Element auf contenteditable. <p>Ein einfacher Absatz.</p> <style contenteditable> p{
color: black;
} </style> Sehen Sie sich das Ergebnis im Browser an, wird das style-Element nicht angezeigt. Wenn Sie nun aber ein style { display: block; } ergänzen, erscheint das style-Element und lässt sich auch direkt bearbeiten. Sie können zum Beispiel die Farbe in red ändern, weitere CSS-Eigenschaften für das p-Element ergänzen oder aber Eigenschaften für andere Elemente hineinschreiben. Alle Änderungen werden sofort ausgewertet.
5. Statt JavaScript Sanftes Scrollen per CSS Für manche Probleme, die jahrelang mit JavaScript gelöst werden mussten, gibt es mittlerweile einfachere Lösungen auf Basis von CSS. Das gilt auch für sanfte Scroll-Effekte.
Wenn Benutzer auf der Webseite über Links zu Ankerpunkten zum Beispiel auf einem One-Pager hin- und herspringen, passiert das erst einmal direkt. Die Seite springt abrupt zu dem gewünschten Ankerpunkt. Damit das Ganze optisch etwas ansprechender abläuft, wird meistens JavaScript ergänzt, um sanft zum neuen Bereich zu scrollen statt direkt zu springen. Mittlerweile können Sie auch eine CSS-Eigenschaft nutzen, um sanftes Scrolling zu ermöglichen. Dazu geben Sie dem scrollenden Element die Eigenschaft scroll-behavior: smooth; mit. Weiter können Sie das
6. JavaScript Mehr Möglichkeiten, um über Arrays zu iterieren
In JavaScript iterieren Sie klassischerweise mit einer for()- oder while()- Schleife über die einzelnen Elemente eines Arrays. Die folgenden beiden Beispiele liefern das gleiche Ergebnis: Sie geben alle Elemente eines Arrays in der Konsole aus. const array = [2,1,3,4,7,11]; for (let i = 0; i < array.length; i++) { console.log(array[i]); } const array = [2, 1, 3, 4, 7, 11]; let i = 0; while (i < array.length) { console.log(array[i]); i++; } Alternativ können Sie die Methode forEach() nutzen, mit der Sie eine Funktion für jedes Element des Arrays ausführen. const array = [2, 1, 3, 4, 7, 11]; array.forEach(function(i) {
console.log(i); }); Mittlerweile gibt es eine ganze Reihe weiterer Möglichkeiten, die an der einen oder anderen Stelle besser geeignet sein können. Die Methode reduce() etwa reduziert ein Array auf einen einzigen Wert. Dabei wird das Array der Reihe nach von links nach rechts durchlaufen. Im folgenden Beispiel ist x zu Beginn der Startwert, der in Zeile 3 auf 0 gesetzt wird. Danach entspricht x dem jeweils letzten Wert der Rechnung. In jedem Schritt wird mit y der nächste Wert aus dem Array addiert, sodass sich am Ende die Summe aller Werte im Array ergibt. const array = [2, 1, 3, 4, 7, 11]; const sum = (x, y) => x + y; const array_sum = array.reduce(sum, 0); console.log
('Als Summe ergibt sich: ${array_sum}'); Mit der Methode map() können Sie eine Funktion auf jedes Element eines Arrays anwenden. Die Ergebnisse werden in ein neues Array geschrieben. Im folgenden Beispiel werden alle Werte von array mit 2 multipliziert und in das neue Array result geschrieben. const array = [2, 1, 3, 4, 7, 11]; const result = array.map(x => x * 2); console.log(result); Auch die Methode filter() erzeugt ein neues Array. Wie der Name schon sagt, wird das Ausgangs-Array gefiltert. Alle Werte, die eine bestimmte Bedingung erfüllen, also bei einer Funktion das Resultat true liefern, werden in das Ergebnis-Array gefiltert. Das folgende Beispiel prüft etwa, ob ein Wert größer ist als 10. const array = [2, 1, 8, 3, 19, 4, 7, 11]; const bigger_ten = x => x > 10 === true; const result = array.filter(bigger_ten); console.log(`Zahlen größer als 10: ${result}`); Wenn Sie wissen möchten, ob alle Elemente in einem Array eine bestimmte Bedingung erfüllen, können Sie die Methode every() nutzen. Das Ergebnis ist ein boolscher Wert. Entweder erfüllen alle Elemente eines Arrays die erforderliche Bedingung (Rückgabewert: true) oder eben nicht (Rückgabewert: false). Im folgenden Beispiel wird geprüft, ob alle Elemente des Arrays ohne Rest durch 3 teilbar sind. const array = [3, 6, 9, 11, 12]; const multiple_three = x => x % 3 === 0; if (array.every(multiple_three)) { console.log(' Alle Werte im Array sind
ohne Rest durch 3 teilbar.'); } else { console.log('Mindestens ein Wert im Array
ist nicht ohne Rest durch 3 teilbar.'); } Recht ähnlich funktioniert die Methode some(). Diese prüft ebenfalls alle Werte im Array anhand einer Bedingung. Erfüllt mindestens ein Wert die Bedingung wird true zurückgegeben. const array = [3,6,9,11,12]; const multiple_three = x => x % 3 === 0; if (array.some(multiple_three)) { console.log('Mindestens ein Wert im Array
ist ohne Rest durch 3 teilbar.'); } else { console.log('Kein Wert im Array ist ohne
Rest durch 3 teilbar.'); } Sie sehen also, es muss nicht immer for(), while() oder forEach() sein. Die genannten Methoden funktionieren in modernen Browsern, aber nicht unbedingt in älteren Versionen (etwa IE8). Weitere Beispiele und eine Auflistung der möglichen Parameter der verschiedenen Funktionen finden Sie in Mozillas MDN web docs unter developer.mozilla.org/de/docs/Web/JavaScript.
Scrolling leider nicht beeinflussen. Die Geschwindigkeit und Effekte wie Easing werden also vom Browser bestimmt. Dafür sparen Sie sich ein wenig JavaScript. Die Eigenschaft ist Teil des CSSOM View Modules, das sich aktuell in einem Editor’s Draft befindet. Trotzdem haben erste Browser die Technik bereits implementiert. Genauer: Die Eigenschaft funktioniert aktuell zumindest in Firefox und Chrome. In anderen Browsern, die das neue CSS nicht verstehen, würde das Scrolling daher wie gewohnt direkt passieren. Es geht dabei also kein Inhalt verloren, sondern nur ein Effekt. Je nach Website kann es sich also bereits lohnen, auf Smooth Scrolling per CSS umzusteigen.
7. Webstandards Network Information API Ein kurzer Blick in die Zukunft: Mithilfe einer neuen API soll es irgendwann möglich sein, eine Website auf die Verbindung des Benutzers zu optimieren.
Bei einer modernen Website versuchen Webworker, diese möglichst zugänglich zu machen. Für verschiedene Endgeräte wird die Website responsive gestaltet. Für unterschiedliche Benutzer wird die Website möglichst barrierefrei. Und wenn ein Benutzer JavaScript deaktiviert hat, sollten die wesentlichen Informationen trotzdem zugänglich sein. Dabei fehlt dem Entwickler bisher eine wichtige Information: mit welcher Verbindung der Benutzer überhaupt auf eine Website zugreift. Das soll irgendwann die Network Information API lösen, die sich aktuell in einem Editor’s Draft der WCIG (Web Platform Incubator Community Group) befindet. Das hört sich erst einmal so an, als liege die Nutzung der API in weiter Ferne. Allerdings können Sie die API bereits im Chrome und in Samsung Internet Browsern testen. Die API liefert Informationen zum Beispiel über connection. effectiveType (ob die Verbindung slow-2g, 2g, 3g oder 4g entspricht) oder connection.saveData (ob der Benutzer den reduced data mode in seinem Browser eingestellt hat). Auf Dauer soll es damit möglich sein, Content anhand der Verbindung auszuliefern, etwa: Nur Text für langsame Verbindungen, Videos für schnelle Verbindungen. Das hat einen deutlichen Nutzen für den Besucher. Allerdings gibt er damit aber auch mehr Informationen über sich preis. Die API könnte also auch dazu verwendet werden, um Browser Fingerprinting zu verfeinern oder um Informationen zum Aufenthaltsort des Nutzers (Arbeit, zu Hause, in der Bahn) zu erhalten.
8. Firefox Time Travel Debugging Und noch ein wenig Zukunftsmusik: Der neue Firefox Nightly testet eine Funktion namens Time Travel Debugging (ehemals auch WebReplay genannt).
Damit können Sie Änderungen in einem Tab aufnehmen und erneut abspielen bzw. anhalten und zu bestimmten Punkten springen. Das Feature richtet sich damit an Webentwickler und steht derzeit nur im Mac OS Nightly Build zur Verfügung. Dort müssen Sie about:config aufrufen und die Option devtools. recordreplay.enabled einschalten. Nun können Sie einen neuen Reiter über Tools > Web Developer > Record Execution öffnen. Der Entwickler Jason Laster hat im Juli auf der JSConf EU 2018 einen Vortrag über die Möglichkeiten von Time Travel Debugging gehalten ( bit.ly/fftimetravel). Das Feature ist noch experimentell und mag es nicht in stabile Firefox-Versionen schaffen.