Tools & Helfer für den Coding- und Design-Alltag
23.09.2021
Netzwerk Offline
Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte k├Ânnten veraltet sein!
F├╝r aktuelle Inhalte aktiviere bitte dein Internet!
Alter Browser
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschlie├člich auf aktuelle Technologien setzen, unterst├╝tzen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen f├╝r dich passenden modernen Browser!

Developer Resourcen & Tipps

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
access_timeGesch├Ątzte Lesezeit ca. Minuten

In diesem Beitrag findest du aktuelle Tools, Anleitungen und Hinweise zu verschiedenen nützlichen Quellen, die dir als Programmierer*innen und als Designer*innen für UI/UX weiterhelfen können.

Seien es Dokumentationen oder Tools, um beispielsweise Bilder zu finden oder zu erstellen. Oder auch einfach Alltagshelfer die jeder gebrauchen kann!

Dokumentationen

Ich werde euch natürlich nicht verschiedene Dokumentationen von Programmiersprachen zeigen. Sondern Seiten, die auf den Standarddokumentationen aufbauen, aber weitere Funktionalitäten bieten. Oder einfach gut zusammengefasste Informationen!

DevDocs

DevDocs bietet Dokumentationen von etlichen Programmiersprachen, CMS, Datenbanksystem, auf ihrer Webseite über verschiedene Schnittstelle vereint. Dort kannst du dir selbst aussuchen für welche Sprachen du die Dokumentationen sehen willst - Und kannst diese parallel durchsuchen.

DevDocs 

DevHints - Cheatsheets

Auf der Seite von DevHints findest du Cheatsheets für verschiedene Programmiersprachen, Datenbanken, Code Editoren und vieles mehr.

DevHints 

Can i use? - Kann ich das verwenden?

Auf dem Bild ist ein Ausschnitt der Webseite von
Auf dem Bild ist ein Ausschnitt der Webseite von "Can i use?", die eine ├ťbersicht ├╝ber die Verwendung von TLS 1.2 zeigt.

Auf der "Can i Use?" kannst du prüfen welche Funktionen von welchem Browser unterstützt werden. Sei es CSS, HTML5, JavaScript, SVG oder auch so sicherheitsrelevante Funktionen wie Unterstützung für TLS 1.3.

Can i use?

Ergänzend zu "Can i Use?" findst du bei "Can I Email" die Kompatibilität zu Tags, Bildern etc. für verschiedene E-Mail-Clients.

Can i Email?

Alles rund um Medien

In diesem Abschnitt stelle ich dir verschiedene Tools vor, um Bilder zu bearbeiten oder zu kompremieren, um mit Schriften zu arbeiten und einige weitere kleine Helferlein oder auch ein größeres Grafikprogramm im Browser.

Layout/Prototyping Tool - Figma

Es ist eine Ansicht von dem Grafiktool Figma zu sehen, mit der Farbpalette von HelloCoding. Am linken Rand kann noch auf die verschiedenen Seiten mit Logos, Farben, Webseiten Layout zugegriffen werden.
Es ist eine Ansicht von dem Grafiktool Figma zu sehen, mit der Farbpalette von HelloCoding. Am linken Rand kann noch auf die verschiedenen Seiten mit Logos, Farben, Webseiten Layout zugegriffen werden.

Figma ist ein Layout und Prototyping Tool für Screendesigns. Diese Tool gibt es in einer kostenlosen Version, dort kannst du im Bereich "Drafts" so viele Designs & Dateien anlegen wie du willst. Und in diesen Dateien kannst du mehrer Seiten Anlegen für Logos, Webseiten und vieles mehr. So habe ich es mir jetzt auch einmal zum Testen für die HelloCoding Ressourcen aufgebaut. Allerdings ist es schade, dass es bisher keine direkte Importfuntkion für Affinity Designer oder Photoshop gibt.

Zur Webseite von Figma

Schriftgröße testen - Type Scale

Zu sehen ist der Schriftzug
Zu sehen ist der Schriftzug "A Visual Type Scale" in Verschiedensten Gr├Â├čen von 8.19px bis 48.83px.

Mittels der Webseite "Type Scale" kannst du deine Schriften zusammen stellen und die Größen der Überschriften und Laufschriften aufeinander abstimmen.

Type Scale Schriften zusammen stellen!

Icomoon - Icon Fonts erstellen

Mit Icomoon kannst du aus verschiedenen Icon-Sets, wie Font Awesome oder Material Icons, aber auch eigenen SVG's, deine eigene Icon-Font für deine Projekte zusammen stellen. Der Vorteil einer Icon-Font ist das nur die Icons geladen werden, die auch wirklich auf deiner Webseite Verwendung finden.

Icomoon

Stockbilder - Kostenfrei

Es gibt Stockbilder-Seiten wie Sand am Meer. Genau so gibt es sehr viele, die kostenlose Bilder anbieten. Dort habe ich zwei Favoriten, da die Lizenzen sehr einfach verständlich sind und die Bildqualität im Schnitt sehr, sehr gut ist! Das sind Unsplash und Pxfuel.

Tools für Bild und Video Bearbeitung

Manchmal braucht man ein schnelles Tool um eine PDF-, Audio- oder Videodatei zu bearbeiten. Sei es ein Video zu rotieren oder ein Bild zu kompremieren. Dafür habe ich zwei Seiten, die einfach zu verwenden sind:

Farbpallete Erstellen!

In diesem Abschnitt habe ich dir ein par Tools aufgelistet, die dir dabei helfen, ansprechende Farbpaletten für deine Projekte zu finden.

Hex Farben Webseite

Auf der Webseite von "Colorhexa" findest du zu Hexfarben verschieden Infromationen, die aufgrund der Farbe generiert werden. Ich nutze diese Seite vor allem, um mir per Shortcut, direkt eine Farbe von überall aus abrufen zu können und deren HEX-Wert zu sehen.

Colorhexa

Farbkontrast prüfen (Accesibility)

Mit dem "Color Contrast Analyzer" von Adobe kannst du das Verhältnis von Text- zu Hintergrundfarbe prüfen, und wie gut oder wie schlecht der Kontrast ist. Perfekt, um auch eine gute Lesbarkeit für Menschen mit Sehschwächen zu garantieren.

Color Contrast Analyzer

RegEx

Wer kennt es nicht: Alle paar Wochen, Monaten braucht man mal eine "Regular Expression", aber so lange merkt man es sich auch nicht, wie das ganze noch mal war. Dafür gibt es kleine Tools, mit denen du testen kannst, wie deine Regular Expression gerade greifen würde.

Diese kannst du zum Beispiel mit folgenden Tools testen:

Kleine Tools von HelloCoding.de

Ich habe hier auf und für HelloCoding kleinere verschiedene Tools geschrieben. Die Ideen dafür entstanden bei meiner Arbeit. Da ich merkte, dass ich diese Informationen regelmäßig brauche und habe mir dafür entsprechende Tools programmiert. Schau sie dir doch einmal an!

Weiter Tools

├ťbersicht der Webseite Hidden Tools, mit vielen Tools auf dem ersten Blick
├ťbersicht der Webseite Hidden Tools, mit vielen Tools auf dem ersten Blick

Im letzten Abschnitt möchte ich dir die Webseite "Hidden Tools" vorstellen. Hier findest du eine Auswahl an etlichen Tools, von Gradientgeneratoren über Schreibapps bis hin zu Icon Sets ist alles mögliche dabei. Es lohnt sich ein wenig zu stöbern!

Bildquelle - Vielen Dank an die Ersteller*innen f├╝r dieses Bild

Kommentare zum Artikel

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "Tools & Helfer für den Coding- und Design-Alltag"!

Kommentar Schreiben

Vom Autor Empfohlen

keyboard_arrow_up
Home Men├╝ Suche
close