Month: October 2015

[Update] Top Chrome Erweiterungen für Webdeveloper

Tipps zu Chrome:

  1. in Chrome kann man verschiedene User anlegen, welche auch unterschiedliche Chrome-Erweiterungen installieren können (man kann z.B. einen Privacy-User anlegen): chrome://settings/
  2. die DevTools sollte man kennen: https://speakerdeck.com/addyosmani/whats-new-in-chrome-devtools
  3. Chrome-Extensions kann man auch ganz einfach selber erstellen:

Code: https://github.com/voku/Web-Analyse-Tools-for-Chrome

Demo: https://chrome.google.com/webstore/detail/web-development-analysis/ebhbpdaejpgndphbdcphdiefknmeciph

Beispiele: https://developer.chrome.com/extensions/samples)

Dev-Tools:

Name Url Info
Accessibility Developer Tools Link Barrierefreiheit von Webseiten Testen via Chrome-Dev-Tools
Blackfire Companion Link PHP: Better app performance with a low-overhead Profiler
Caspr: Enforcer Link Content Security Policy (CSP) Änderungen prüfen und testen
Codecov Extension Link Code-Coverage Report-Overlay innerhalb von Github und Bitbucket
Ember Inspector Link Debugging für Ember-Anwendungen
GitHub Linker Link Verlinkte Packages via npm, bower, composer etc.
GitHub Mate Link Extra Features für github.com z.B. Download-Button
HTML5 Outliner Link Zeigt eine Übersicht über alle Inhalte einer Webseite an, wenn HTML korrekt ver
HTTP/2 and SPDY indicator Link Zeigt in der Adresszeile an, ob HTTP/2 verwendet wird
JetBrains IDE Support Link HTML/CSS/JavaScript editing and JavaScript debugging using JetBrains IDEs
JetBrains Toolbox Extension Link Adds link to open project from GitHub in JetBrains IDEs
JSON Editor Link JSON Editor, welcher sowohl einen Daten-Tree in JSON also auch JSON in einen Daten-Tree konvertieren kann
JSONView Link Validiert und zeigt JSON an
LiveReload Link CSS kann ohne Browser-Reload aktualisiert werden (siehe z.B. grunt-contrib-watch)
Lovely forks Link Zeigt Forks auf github.com Seiten an
Octotree Link Zeigt GitHub-Code in einer Baumstruktur dar
SelectorGadget Link CSS (xPath) Elemente auf Webseiten per Maus auswählen
Web Developer Checklist Link Schnelle Check-Liste für Webseiten (Favicon, robots.txt, …)
WAVE Evaluation Tool Link Barrierefreiheit-Overlay für Webseiten

Privacy-Tools:

Name Url Info
 AdBlock Link  Entfernt Werbung von Webseiten …
Deaktivierungs-Add-on von Google Analytics Link Weist das JavaScript (ga.js) von Google Analytics an, keine Informationen an Google Analytics zu übermitteln
 Disconnect Link Ein weites Privacy-Tool …
HTTPS Everywhere Link Sichern Sie Ihre Internetverbindung! Automatische HTTPS-Sicherheit auf vielen Webseiten
uBlock Link Ein effizienter Blocker …
uMatrix Link Kontrolliere alle Anfragen deines Browsers …

Organisation- / Extra-Tools:

Name Url Info
Boards for Trello Link Schnellzugriff auf trello.com
Der Camelizer Link Einfaches Anzeigen historischen Preisdaten direkt in Amazon
feedly Link Ein sehr guter RSS-Reader
Google Cast Link Senden Sie Inhalte an Ihren Chromecast und andere Geräte, die Google Cast unterstützen.
Lazarus: Form Recovery Link Speichert alle Daten von Formularen ab, so dass diese Informationen nicht verloren gehen
SimpleExtManager Link Eine schnelle Verwaltung für Chrome-Erweiterungen
Tabs Outliner Link  Session- und Tab-Manager für Chrome
OneTab Link Tabs in einer Liste zusammenfassen, um Speicher zu sparen
Save to Pocket Link Speicher Artikeln, Videos und mehr …
Web Timer Link Zeigt an wie viel Zeit man auf den jeweiligen Webseiten verbringt

Ähnliche Beiträge:

HTTP/2 ist angekommen | Apache 2.4.17 Udev-tuxBackup to USB-Stick per udev Default ThumbnailOptimierungen von Android unter Linux nutzen

HTTP/2 ist angekommen | Apache 2.4.17

Was ist HTTP/2? Diese Frage haben andere bereits ausführlich geklärt. https://http2.github.io/faq/ :) daher wollen wir dies heute in Kombination mit dem Apache Webserver ausprobieren.

Im Februar 2015 hat Google den Support für SPDY bereits zugunsten von HTTP/2 eingestellt. Und die Kompatibilität von HTTP/2 ist in fast allen aktuellen Webbrowsern gegeben, so das es bereits seit einiger Zeit keinen Grund gibt, nicht auf das neue Protokoll zu setzen. Seit dieser Woche unterstützt auch der Apache Webserver (2.4.17) das Protokoll, “Stefan Eissing” hat das Module “mod_http2” gesponsert, welches wir im folgenden testen werden.

Installation unter Ubuntu 14.04 via Fremdquellen (PPA)

Warnung: “Zusätzliche Fremdquellen können das System gefährden.”
–> https://wiki.ubuntuusers.de/paketquellen_freischalten/ppa

Zu beginn stellen wir sicher, dass SPDY nicht mehr verwendet wird.

a2dismod spdy

Und deinstallieren dies am besten direkt, falls dies über den Paket-Manager installiert wurde.

apt-get purge mod-spdy-beta

service apache2 restart

Um die Quellen (/etc/apt/sources.list.d/) nicht manuell zu ändern, installieren wir kurzerhand das Programm “add-apt-repository” via:

aptitude install software-properties-common

# Web: https://launchpad.net/~ondrej/+archive/ubuntu/apache2
# Issues: https://github.com/oerdnj/deb.sury.org/issues
#
add-apt-repository ppa:ondrej/apache2

Falls es beim Hinzufügen des Keys zu Problem kommt, kann man dies auch manuell durchführen:

apt-key adv –keyserver keyserver.ubuntu.com –recv-keys 4F4EA0AAE5267A6C

Anschließend installieren wir das Update via “aptitude“, sodass wir mehr Kontrolle über den Update-Prozess haben.

apt-get update; aptitude

aptitude

Nach der Installation können wir das “http2”-Module wie folgt aktivieren.

cd /etc/apache2/mods-available/

vim http2.load

# Depends: setenvif mime socache_shmcb
LoadModule http2_module /usr/lib/apache2/modules/mod_http2.so

vim http2.conf

<IfModule http2_module>
ProtocolsHonorOrder On
Protocols h2 h2c http/1.1
</IfModule>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

Und anschließend muss das Module nur noch aktiviert werden:

a2enmod http2

service apache2 restart

Um zu testen, ob HTTP/2 via https genutzt wird, können wir z.B. direkt im Chrome nachschauen. Dafür öffnen wir einfach die Seite chrome://net-internals und nutzen oben links im DropDown-Menü den Punkt “HTTP/2”.

chrome_http2

 

Quellen:

Ähnliche Beiträge:

Server-Probleme im Zeitalter von HTTP/2 “gzip” für Webseiten HTTP/2: Welchen Vorteil bringt der neue Webstandard?