Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 1. März 2016

Die 50+ besten Tools und Ressourcen für Webentwickler

Die besten Tools und Ressourcen für Webentwickler

Webentwicklung ist einer der schöns­ten Berufe über­haupt, aller­dings auch einer der anspruchs­volls­ten. Denn man muss stän­dig am Ball blei­ben, aktiv dazu ler­nen und kann sich nicht auf den Lorbeeren von ges­tern aus­ru­hen. Es gilt, sich auf neue Anforderungen ein­zu­stel­len. SEO-Grundkenntnisse sind gefragt, neue Techniken wie respon­si­ves Webdesign sind zu erler­nen, Websites opti­mie­ren zu kön­nen ist wich­tig, und natür­lich neue Arbeitsweisen in der Erstellung von Websites ken­nen­zu­ler­nen. Damit du im Spiel bleibst, haben wir dir hier eine Liste der bes­ten Tools und Ressourcen für Webentwickler zusam­men­ge­stellt.

Die besten Tools und Ressourcen für Webentwickler

Lebenslanges Lernen: Ressourcen für Webentwickler

Newsletter für Webentwickler

Newsletter für Webentwickler

Diese Newsletter bie­ten dir die bes­ten Artikel zu Webentwicklung und Performance und sind redak­tio­nell auf­be­rei­tet. So kannst du sicher sein, nur wirk­lich nütz­li­che Dinge in dei­nem Posteingang zu fin­den.

  • Web Development Reading List – erscheint ein­mal wöchent­lich und bringt dir neue Ressourcen und Tools nahe.
  • Web Operations Weekly – Der Newsletter zu Web-Applikationen, Performance, Webentwicklung, Server-Technik und Tipps.
  • WEB TOOLS WEEKLY – Der Newsletter zu den neu­es­ten Tools für Webentwickler und Webdesigner. Hauptsächlich wird Front-End-Design behan­delt.
  • freshbrewed.co – Einmal wöchent­lich kommt der Newsletter zu Front-End- und UX-Design.
  • Dr. Web Newsletter – natür­lich darf unser reani­mier­ter Newsletter an die­ser Stelle auch nicht feh­len. Abonnenten erhal­ten alle ein bis zwei Wochen schnel­le Tipps und Infos für den Alltagsgebrauch.

Communities für Webentwickler

communities

Jeder Webentwickler steckt mal fest und weiß nicht wei­ter. Da ist es gut, wenn man sich an ande­re Menschen wen­den kann, die schnell und unbü­ro­kra­tisch hel­fen. Hier sind eini­ge Communities spe­zi­ell für Webentwickler und Webdesigner.

Tools für den Gebrauch online und offline: Ressourcen für Webentwickler

Website Speed Test Tools

website-speed-test-tools

Die Geschwindigkeit einer Website ist ein kri­ti­scher Faktor für das Ranking dei­ner Website im Google-Index. Schnelle Ladezeiten bedeu­ten oft­mals bes­se­re Absprungraten, eine bes­se­re all­ge­mei­ne Benutzerfreundlichkeit und höhe­re Konversionsraten. Nutze also die­se kos­ten­lo­sen Tools zum Testen und Optimieren der Ladezeit dei­ner Website.

  • Website Speed Test:  Das rela­tiv neue Speed-Test-Tool von KeyCDN mit einer “Wasserfall”-Darstellung der Ergebnisse und einer Vorschau der Website. Empfehlenswert.
  • Google PageSpeed Insights: PageSpeed Insights ana­ly­siert dei­ne Website und gibt dir vie­le gute Tipps, wie du die Performance dei­ner Website ver­bes­sern kannst.
  • Google Chrome DevTools: Erklärt die in Google Chrome ein­ge­bau­ten Entwickler-Tools ein­ge­hend.
  • WebPageTest: Dieses Tool gibt dir die Möglichkeit, die Performance dei­ner Website von vie­len Orten der Erde in ech­ten Browsern wie Firefox, IE und Google Chrome zu tes­ten.
  • Pingdom: Eines der bes­ten Tools zum Testen der Ladezeit einer Website. Verschiedene Orte kön­nen ein­ge­stellt wer­den.
  • GTmetrix: Gibt dir einen Einblick über die Geschwindigkeit dei­ner Website und eine Menge Tipps, wie du sie ver­bes­sern kannst.

Collaboration Tools

Collaboration Tools

Diese Tools erleich­tern die Zusammenarbeit von Teams, die zusam­men an einem Auftrag arbei­ten. Denn vie­le Teams bestehen mitt­ler­wei­le aus Mitarbeitern, die über ganz Deutschland oder sogar über die gan­ze Welt ver­streut leben und arbei­ten. In Kontakt blei­ben und sich gegen­sei­tig abspre­chen ist also beson­ders wich­tig. Mit die­sen Tools kann man die Mitarbeit und den Arbeitsablauf bedeu­tend effi­zi­en­ter gestal­ten.

  • Slack: Eine Messaging-Anwendung für Teams, die an einem Auftrag arbei­ten. Die App ver­spricht, dein Arbeitsleben ein­fa­cher und pro­duk­ti­ver zu gestal­ten.
  • Trello:  Trello ist ein fle­xi­bler und visu­el­ler Weg, um Teams mit­ein­an­der zu orga­ni­sie­ren. Die Software basiert auf »Karten«, die kom­men­tiert wer­den und auch mit Prioritäten ver­setzt wer­den kön­nen. Schnell und ein­fach zu erler­nen.
  • Glip: Glip bie­tet dir Echtzeit-Messaging mit inte­grier­tem Aufgabenmanagement , Videokonferenzen, gemein­sa­me Kalender und vie­les mehr.
  • Asana: Mit die­sem Collaboration-Tool kön­nen Teams ihre Arbeit ver­fol­gen und bis­he­ri­ge Ergebnisse ein­se­hen. Perfekt um zu sehen, wo das Projekt gera­de steht.
  • Jira: Jedes Mitglied dei­nes Software-Teams kann sei­ne Arbeit pla­nen, Ergebnisse ver­fol­gen und die Software anschlie­ßend frei­ge­ben.

Code Sharing und Experimente

Code Sharing

Manchmal hat man eine wirk­lich gute Unterhaltung auf Skype oder per Google-Hangouts mit einem ande­ren Entwickler und möch­te mal eben ein Stückchen Code mit­ein­an­der tei­len, damit der Gesprächspartner einen Blick dar­auf wer­fen kann. Große Teamtools wie Slack kön­nen das natür­lich, doch wenn du kein Mitglied eines Teams bist, erge­ben sie kei­nen Sinn. Denn dafür exis­tie­ren eini­ge gute und schnel­le Alternativen. Doch auch schnel­le Experimente sind manch­mal wich­tig, dar­um fin­dest du dafür Tools in die­ser Liste.

  • JS Bin:  Ein Tool, um mit Programmier- und Auszeichnungssprachen zu expe­ri­men­tie­ren. Du kannst HTML, CSS, JavaScript, Markdown, Jade und Sass benut­zen.
  • JSfiddle: Ein Tool, um dei­nen in JavaScript, HTML oder CSS Code direkt im Broser tes­ten zu kön­nen.
  • codesha­re: Teile dei­nen Code in Echtzeit mit ande­ren Entwicklern.
  • Dabblet: Ein inter­ak­ti­ver “Spielbereich”, um dir schnel­les Testen von CSS- und HTML-Snippets zu ermög­li­chen.

Diff-Checker-Tools

diff-checker

Die “Diff-Checker” hel­fen dir, Unterschiede zwi­schen Dateiversionen zu visua­li­sie­ren und wenn gewünscht, zusam­men­zu­füh­ren. Manchmal kann es hilf­reich sein, eine sol­che visu­el­le Darstellung zu sehen.

  • Diffchecker: Ein Online-Tool zum schnel­len Vergleichen von text­ba­sier­ten Dateien. Nützlich, wenn du unter­wegs bist und einen schnel­len Vergleich zwi­schen zwei Dateien benö­tigst.
  • Beyond Compare: Ein Programm zum Vergleichen von Dateien und Ordnern mit ein­fa­chen, leis­tungs­fä­hi­gen Befehlen, die den Fokus auf den Bereich legen, der dich inter­es­siert. Dinge, die dich nicht inter­es­sie­ren, kannst du aus­blen­den.

Markdown-Editoren

markdown-editoren

Markdown ist eine Auszeichnungssprache mit einer ein­fa­chen Syntax, die dann auf die Schnelle in HTML kon­ver­tiert wer­den kann. Anmerkung: Markdown-Editoren las­sen sich für Schreibarbeiten und ein­fa­chen Code nut­zen.

  • StackEdit: Ein kos­ten­los zu nut­zen­der Online-Editor für Markdown.
  • Dillinger: Dillinger ist ein Cloud-fähi­ger HTML5 Markdown-Editor.
  • Mou: Markdown-Editor für Entwickler, die Mac OS X nut­zen.
  • Texts: Ein ein­fa­cher Text-Editor für Markdown. Erhältlich für Windows und Mac OS X.
  • MarkdownPad: MarkdownPad ist wohl der bes­te Markdown-Editor für Windows. Er kann direkt mit einer Live-Preview neben dem Eingabebereich die­nen.
  • ByWord: ByWord ist der kla­re Favorit im Dr. Web-Team, wenn es um Editoren für den Mac geht.
  • Sublime Text: In die­sem Artikel auf Dr. Web erklärt Peter Müller, wie er mit Sublime Text sei­nen Markdown-Traumeditor gefun­den hat.

CSS Preprocessors

css-preprocessors

Ein CSS Preprocessor ist im Grunde eine Script-Sprache, die CSS erwei­tert und zu regu­lä­rem CSS kom­pi­lie­ren kann. CSS Preprocessors erleich­tern dir die Arbeit mit CSS. Hier ein Grundlagen-Artikel zu Sass und Less.

  • Sass: Eine sehr aus­ge­reif­te, sta­bi­le und leis­tungs­fä­hi­ge pro­fes­sio­nel­le CSS-Erweiterung.
  • Less: Eine Erweiterung zu CSS, die auch rück­wärts kom­pa­ti­bel mit CSS ist. Dies macht das Erlernen zu einem Kinderspiel.
  • Stylus: Eine neue Sprache, wel­che dir eine effi­zi­en­te, dyna­mi­sche und aus­drucks­star­ke Weise CSS zu gene­rie­ren bie­tet. Stylus unter­stützt sowohl ein­ge­rück­tes als auch regu­lä­res CSS.

Front-End-Frameworks

user-interface

Die Arbeit mit Frameworks wird immer belieb­ter, denn einen bereits vor­be­stimm­ten Rahmen, ein vor­ge­fer­tig­tes Paket zu nut­zen, kann die Arbeit erleich­tern und lässt dich schnel­ler zum Ergebnis kom­men. Die Frameworks bestehen in der Regel aus eini­gen Dateien und Ordnern, wie CSS, HTML-Beispiele und JavaScript. Twitters Bootstrap-Framework ist eines der belieb­tes­ten Frameworks über­haupt und Grundlage sehr vie­ler anspruchs­vol­ler Websites. Doch auch ande­re Frameworks ver­die­nen es, getes­tet zu wer­den.

  • Bootstrap: Ein HTML, CSS, und JS Framework für das Entwickeln von respon­si­ven, mobi­le-first Websites.
  • Foundation: Eine Familie von respon­si­ven Front-End-Frameworks, die es dir erleich­tern sol­len, respon­si­ve Websites, Apps und E-Mails zu ent­wi­ckeln.
  • Semantic UI: Ein Framework zum Entwickeln von respon­si­ven Websites mit seman­ti­schem, leicht­ver­ständ­lich zu erfas­sen­den HTML.
  • uikit: Ein leicht­ge­wich­ti­ges und modu­la­res Framework zum Entwickeln von schnel­len und leis­tungs­fä­hi­gen Web-Schnittstellen.

Git: Clients und Services

git-clients

Git ist ein Quellcode-Management-System für Software und Webentwicklung. Es bie­tet dir eine ver­teil­te Versions-Kontrolle. Seinen gro­ßen Vorteil spielt Git beim Arbeiten in Teams aus, denn es kön­nen Code-Änderungen nach­ver­folgt und vom Entwicklungs- bis zum Live-Stadium gebracht wer­den. Es ist ein Weg das Chaos zu mini­mie­ren und sicher­zu­stel­len, dass nichts Online geht, was nicht getes­tet wur­de.

  • SourceTree: Ein kos­ten­lo­ser Git und Mercurial Client für Mac und Windows. Ein git-Client für Teams – Bitbucket – ist eben­falls erhält­lich.
  • GitKraken (Beta):  Ein frei­er und intui­ti­ver, schnel­ler und für alle Plattformen zu bekom­men­der Client.
  • Tower 2: Versionskontrolle mit Git – leicht­ge­macht. Das ver­spricht die­se App. Nur für Mac.
  • GitHub Client: Ein ein­fa­cher Weg, um an Projekten auf GitHub und GitHub Enterprise mit­zu­wir­ken.
  • Gogs: Ein ein­fa­cher Git-Client zum Selbsthosten.
  • GitLab: Hier kannst du dei­ne pri­va­ten und öffent­li­chen Projekte kos­ten­los hos­ten.

Ergänzende Links zum Beitrag:

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

5 Kommentare

  1. Wirklich schö­ne Übersicht!
    Danke!

  2. Hallo,
    ganz tol­ler und infor­ma­ti­ver Beitrag. Ich freue mich schon auf wei­te­re Artikel. :)

  3. Webentwicklung ist ganz sicher kein Beruf.

Schreibe einen Kommentar zu Stephan Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.