Die 50+ besten Tools und Ressourcen für Webentwickler

Webentwicklung ist einer der schönsten Berufe überhaupt, allerdings auch einer der anspruchsvollsten. Denn man muss ständig am Ball bleiben, aktiv dazu lernen und kann sich nicht auf den Lorbeeren von gestern ausruhen. Es gilt, sich auf neue Anforderungen einzustellen. SEO-Grundkenntnisse sind gefragt, neue Techniken wie responsives Webdesign sind zu erlernen, Websites optimieren zu können ist wichtig, und natürlich neue Arbeitsweisen in der Erstellung von Websites kennenzulernen. Damit du im Spiel bleibst, haben wir dir hier eine Liste der besten Tools und Ressourcen für Webentwickler zusammengestellt.

Die besten Tools und Ressourcen für Webentwickler

Lebenslanges Lernen: Ressourcen für Webentwickler

Newsletter für Webentwickler

Newsletter für Webentwickler

Diese Newsletter bieten dir die besten Artikel zu Webentwicklung und Performance und sind redaktionell aufbereitet. So kannst du sicher sein, nur wirklich nützliche Dinge in deinem Posteingang zu finden.

  • Web Development Reading List – erscheint einmal wöchentlich 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 neuesten Tools für Webentwickler und Webdesigner. Hauptsächlich wird Front-End-Design behandelt.
  • freshbrewed.co – Einmal wöchentlich kommt der Newsletter zu Front-End- und UX-Design.
  • Dr. Web Newsletter – natürlich darf unser reanimierter Newsletter an dieser Stelle auch nicht fehlen. Abonnenten erhalten alle ein bis zwei Wochen schnelle Tipps und Infos für den Alltagsgebrauch.

Communities für Webentwickler

communities

Jeder Webentwickler steckt mal fest und weiß nicht weiter. Da ist es gut, wenn man sich an andere Menschen wenden kann, die schnell und unbürokratisch helfen. Hier sind einige Communities speziell 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 kritischer Faktor für das Ranking deiner Website im Google-Index. Schnelle Ladezeiten bedeuten oftmals bessere Absprungraten, eine bessere allgemeine Benutzerfreundlichkeit und höhere Konversionsraten. Nutze also diese kostenlosen Tools zum Testen und Optimieren der Ladezeit deiner Website.

  • Website Speed Test:  Das relativ neue Speed-Test-Tool von KeyCDN mit einer „Wasserfall“-Darstellung der Ergebnisse und einer Vorschau der Website. Empfehlenswert.
  • Google PageSpeed Insights: PageSpeed Insights analysiert deine Website und gibt dir viele gute Tipps, wie du die Performance deiner Website verbessern kannst.
  • Google Chrome DevTools: Erklärt die in Google Chrome eingebauten Entwickler-Tools eingehend.
  • WebPageTest: Dieses Tool gibt dir die Möglichkeit, die Performance deiner Website von vielen Orten der Erde in echten Browsern wie Firefox, IE und Google Chrome zu testen.
  • Pingdom: Eines der besten Tools zum Testen der Ladezeit einer Website. Verschiedene Orte können eingestellt werden.
  • GTmetrix: Gibt dir einen Einblick über die Geschwindigkeit deiner Website und eine Menge Tipps, wie du sie verbessern kannst.

Collaboration Tools

Collaboration Tools

Diese Tools erleichtern die Zusammenarbeit von Teams, die zusammen an einem Auftrag arbeiten. Denn viele Teams bestehen mittlerweile aus Mitarbeitern, die über ganz Deutschland oder sogar über die ganze Welt verstreut leben und arbeiten. In Kontakt bleiben und sich gegenseitig absprechen ist also besonders wichtig. Mit diesen Tools kann man die Mitarbeit und den Arbeitsablauf bedeutend effizienter gestalten.

  • Slack: Eine Messaging-Anwendung für Teams, die an einem Auftrag arbeiten. Die App verspricht, dein Arbeitsleben einfacher und produktiver zu gestalten.
  • Trello:  Trello ist ein flexibler und visueller Weg, um Teams miteinander zu organisieren. Die Software basiert auf »Karten«, die kommentiert werden und auch mit Prioritäten versetzt werden können. Schnell und einfach zu erlernen.
  • Glip: Glip bietet dir Echtzeit-Messaging mit integriertem Aufgabenmanagement , Videokonferenzen, gemeinsame Kalender und vieles mehr.
  • Asana: Mit diesem Collaboration-Tool können Teams ihre Arbeit verfolgen und bisherige Ergebnisse einsehen. Perfekt um zu sehen, wo das Projekt gerade steht.
  • Jira: Jedes Mitglied deines Software-Teams kann seine Arbeit planen, Ergebnisse verfolgen und die Software anschließend freigeben.

Code Sharing und Experimente

Code Sharing

Manchmal hat man eine wirklich gute Unterhaltung auf Skype oder per Google-Hangouts mit einem anderen Entwickler und möchte mal eben ein Stückchen Code miteinander teilen, damit der Gesprächspartner einen Blick darauf werfen kann. Große Teamtools wie Slack können das natürlich, doch wenn du kein Mitglied eines Teams bist, ergeben sie keinen Sinn. Denn dafür existieren einige gute und schnelle Alternativen. Doch auch schnelle Experimente sind manchmal wichtig, darum findest du dafür Tools in dieser Liste.

  • JS Bin:  Ein Tool, um mit Programmier- und Auszeichnungssprachen zu experimentieren. Du kannst HTML, CSS, JavaScript, Markdown, Jade und Sass benutzen.
  • JSfiddle: Ein Tool, um deinen in JavaScript, HTML oder CSS Code direkt im Broser testen zu können.
  • codeshare: Teile deinen Code in Echtzeit mit anderen Entwicklern.
  • Dabblet: Ein interaktiver „Spielbereich“, um dir schnelles Testen von CSS- und HTML-Snippets zu ermöglichen.

Diff-Checker-Tools

diff-checker

Die „Diff-Checker“ helfen dir, Unterschiede zwischen Dateiversionen zu visualisieren und wenn gewünscht, zusammenzuführen. Manchmal kann es hilfreich sein, eine solche visuelle Darstellung zu sehen.

  • Diffchecker: Ein Online-Tool zum schnellen Vergleichen von textbasierten Dateien. Nützlich, wenn du unterwegs bist und einen schnellen Vergleich zwischen zwei Dateien benötigst.
  • Beyond Compare: Ein Programm zum Vergleichen von Dateien und Ordnern mit einfachen, leistungsfähigen Befehlen, die den Fokus auf den Bereich legen, der dich interessiert. Dinge, die dich nicht interessieren, kannst du ausblenden.

Markdown-Editoren

markdown-editoren

Markdown ist eine Auszeichnungssprache mit einer einfachen Syntax, die dann auf die Schnelle in HTML konvertiert werden kann. Anmerkung: Markdown-Editoren lassen sich für Schreibarbeiten und einfachen Code nutzen.

  • StackEdit: Ein kostenlos zu nutzender Online-Editor für Markdown.
  • Dillinger: Dillinger ist ein Cloud-fähiger HTML5 Markdown-Editor.
  • Mou: Markdown-Editor für Entwickler, die Mac OS X nutzen.
  • Texts: Ein einfacher Text-Editor für Markdown. Erhältlich für Windows und Mac OS X.
  • MarkdownPad: MarkdownPad ist wohl der beste Markdown-Editor für Windows. Er kann direkt mit einer Live-Preview neben dem Eingabebereich dienen.
  • ByWord: ByWord ist der klare Favorit im Dr. Web-Team, wenn es um Editoren für den Mac geht.
  • Sublime Text: In diesem Artikel auf Dr. Web erklärt Peter Müller, wie er mit Sublime Text seinen Markdown-Traumeditor gefunden hat.

CSS Preprocessors

css-preprocessors

Ein CSS Preprocessor ist im Grunde eine Script-Sprache, die CSS erweitert und zu regulärem CSS kompilieren kann. CSS Preprocessors erleichtern dir die Arbeit mit CSS. Hier ein Grundlagen-Artikel zu Sass und Less.

  • Sass: Eine sehr ausgereifte, stabile und leistungsfähige professionelle CSS-Erweiterung.
  • Less: Eine Erweiterung zu CSS, die auch rückwärts kompatibel mit CSS ist. Dies macht das Erlernen zu einem Kinderspiel.
  • Stylus: Eine neue Sprache, welche dir eine effiziente, dynamische und ausdrucksstarke Weise CSS zu generieren bietet. Stylus unterstützt sowohl eingerücktes als auch reguläres CSS.

Front-End-Frameworks

user-interface

Die Arbeit mit Frameworks wird immer beliebter, denn einen bereits vorbestimmten Rahmen, ein vorgefertigtes Paket zu nutzen, kann die Arbeit erleichtern und lässt dich schneller zum Ergebnis kommen. Die Frameworks bestehen in der Regel aus einigen Dateien und Ordnern, wie CSS, HTML-Beispiele und JavaScript. Twitters Bootstrap-Framework ist eines der beliebtesten Frameworks überhaupt und Grundlage sehr vieler anspruchsvoller Websites. Doch auch andere Frameworks verdienen es, getestet zu werden.

  • Bootstrap: Ein HTML, CSS, und JS Framework für das Entwickeln von responsiven, mobile-first Websites.
  • Foundation: Eine Familie von responsiven Front-End-Frameworks, die es dir erleichtern sollen, responsive Websites, Apps und E-Mails zu entwickeln.
  • Semantic UI: Ein Framework zum Entwickeln von responsiven Websites mit semantischem, leichtverständlich zu erfassenden HTML.
  • uikit: Ein leichtgewichtiges und modulares Framework zum Entwickeln von schnellen und leistungsfähigen Web-Schnittstellen.

Git: Clients und Services

git-clients

Git ist ein Quellcode-Management-System für Software und Webentwicklung. Es bietet dir eine verteilte Versions-Kontrolle. Seinen großen Vorteil spielt Git beim Arbeiten in Teams aus, denn es können Code-Änderungen nachverfolgt und vom Entwicklungs- bis zum Live-Stadium gebracht werden. Es ist ein Weg das Chaos zu minimieren und sicherzustellen, dass nichts Online geht, was nicht getestet wurde.

  • SourceTree: Ein kostenloser Git und Mercurial Client für Mac und Windows. Ein git-Client für Teams – Bitbucket – ist ebenfalls erhältlich.
  • GitKraken (Beta):  Ein freier und intuitiver, schneller und für alle Plattformen zu bekommender Client.
  • Tower 2: Versionskontrolle mit Git – leichtgemacht. Das verspricht diese App. Nur für Mac.
  • GitHub Client: Ein einfacher Weg, um an Projekten auf GitHub und GitHub Enterprise mitzuwirken.
  • Gogs: Ein einfacher Git-Client zum Selbsthosten.
  • GitLab: Hier kannst du deine privaten und öffentlichen Projekte kostenlos hosten.

Ergänzende Links zum Beitrag:

(dpe)

ist freier Journalist, Spezialist für WordPress und WordPress Sicherheit und ist im Internet unterwegs, seit es in Deutschland existiert. Seit 2012 schreibt er für DrWeb. Nebenbei ist er Autor mehrerer E-Books zu den Themen Lebenshilfe, Marketing und WordPress.

Sortiert nach:   neueste | älteste | beste Bewertung
Karsten Mertens
Gast
Karsten Mertens
2 Monate 26 Tage her

Webentwicklung ist ganz sicher kein Beruf.

ati
Gast
ati
2 Monate 26 Tage her

Stimmt, es ist eher eine Berufung. ;-)

trackback

[…] Sourced through Scoop.it from: http://www.drweb.de […]

Eileen
Gast
2 Monate 24 Tage her

Hallo,
ganz toller und informativer Beitrag. Ich freue mich schon auf weitere Artikel. :)

Stephan
Gast
Stephan
2 Monate 18 Tage her

Wirklich schöne Übersicht!
Danke!

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen