Get best of the week

5 kostenlose Produktivitäts-Tools für Webentwickler

Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, sagt, dass eine der Möglichkeiten, die Arbeit des Entwicklers rational zu organisieren, darin besteht, Tools zu verwenden, mit denen Sie mit weniger Aufwand mehr erreichen können. Hier möchte er über 5 wunderbare Tools sprechen, mit denen jeder Entwickler seine Produktivität steigern kann. Hier ist ein Video, das einen Überblick über diese Tools gibt.



Vorbemerkungen


Ich weiß, dass diejenigen, die dies lesen, nicht zu viel Zeit haben, deshalb werde ich hier nur kurz die Werkzeuge beschreiben, die Ihnen zur Verfügung gestellt werden. Wenn Ihnen etwas gefällt, können Sie es einfach in Ihren Workflow integrieren. Außerdem möchte ich darauf hinweisen, dass ich mit keinem der hier betrachteten Projekte etwas zu tun habe. Ich möchte nur mit allen teilen, die mir zugute kommen wollen.

1. Excalidraw



Excalidraw

Wenn Sie eine Softwarearchitektur entwerfen und dennoch alle Arten von Schemata zeichnen, wird Ihnen das Excalidraw- Projekt möglicherweise gefallen . Mit diesem Tool können Sie verschiedene Arten von Schemata im Browser zusammenstellen. Wir bei DeviasWir verwenden Excalidraw, um Brainstorming-Sitzungen zu verschiedenen Themen durchzuführen, z. B. zum Benutzerverhalten auf der Website oder zur Architektur unseres Backends. Wie bereits erwähnt, unterstützt Excalidraw die Zusammenarbeit. Und dies ist besonders jetzt während der Quarantäne, wenn viele an einem entfernten Standort arbeiten, besonders nützlich. Das einzige Minus dieses Projekts, das sich aus seiner Offenheit und kostenlosen Nutzung ergibt, ist, dass es keine Cloud-Datenspeicherung unterstützt, wodurch beispielsweise die Arbeitsergebnisse in Ihrem Konto gespeichert werden könnten. Ehrlich gesagt ist dies jedoch kein besonders großes Problem, da die Ergebnisse der Arbeit lokal gespeichert und bei Bedarf wieder auf die Website hochgeladen werden können.

2. Nucleo Icon Transition



Nucleo Icon Transition

Lassen Sie uns nun zu praktischeren Dingen übergehen und über ein kleines Tool sprechen, mit dem Sie Übergänge zwischen zwei SVG-Symbolen generieren können. Dies ist ein Nucleo Icon Transition- Projekt. Hier können Sie den Übergangseffekt konfigurieren (skalieren oder drehen) und den Ereignistyp auswählen, der den Übergang auslöst (klicken oder schweben). Dieses Tool generiert eine einzelne SVG-Datei, die Beschreibungen beider Symbole und des für den Übergang verantwortlichen JavaScript-Codes enthält. Das Wesentliche an diesem Tool ist, dass es Symbole mit den Klassen ausstattet, mit denen das Skript arbeitet.

Um Ihrem Projekt ein animiertes Symbol hinzuzufügen, laden Sie einfach die resultierende SVG-Datei und fügen Sie ihren Inhalt Ihrem HTML-Code hinzu. So könnte der Inhalt dieser Datei aussehen.


Inhalt einer automatisch generierten SVG-Datei

Folgendes habe ich erhalten.


Automatisch generiertes animiertes Symbol

Wenn Sie den Übergangseffekt für viele Symbole verwenden möchten, können Sie den Code mit einem Skript optimieren, da überall dasselbe Skript verwendet wird.

3. Geben Sie Scale ein



Typenskala

Wenn Sie wie ich häufig Websites von Grund auf neu erstellen, gefällt Ihnen möglicherweise das Typskalierungsprojekt , das Ihnen bei der Auswahl von Schriftarten helfen kann. Es unterstützt die Auswahl von Schriftarten und die Anpassung seiner Eigenschaften wie Größe und Skalierungsfaktor. Die Schriftarteinstellungen werden sofort auf der Seite mit Vorlagentext angezeigt, der verschiedene Elemente enthält. Sie können CSS-Code mit Schriftartenoptionen exportieren. Normalerweise verwende ich dieses Tool, wenn ich spezielle Schriftarten benötige und nicht zu viel Zeit mit der Auswahl ihrer Parameter verbringen möchte.

4. Roam Research



Roam Research

Meine Produktivität trägt dazu bei, die fortgesetzte Verwendung von Aufgabenlisten aufrechtzuerhalten. Um solche Listen zu pflegen, verwende ich die Anwendung Roam Research, mit dem Sie unter anderem Geschäfte verbinden können. Das Projekt verwendet so etwas wie eine spezielle Auszeichnungssprache. Mithilfe von Beziehungen zwischen Fällen können Sie Aufgabenlisten in Form miteinander verbundener Entitäten berücksichtigen, um beispielsweise die Ursprünge einer bestimmten Idee zu ermitteln und die mit ihrer Implementierung verbundenen Schritte zu analysieren. Tatsächlich ist die Funktionsweise dieses Projekts ziemlich schwer zu erklären, oder ich weiß einfach nicht, wie ich solche Ideen ausdrücken soll. Ich habe vor ein paar Tagen angefangen, Roam Research zu verwenden, aber ich muss sagen, dass mir die Idee dieses Projekts wirklich gut gefallen hat. Vielleicht liegt das daran, dass er mich dazu drängt, kurze Notizen zu erstellen, die die wichtigsten Dinge ausdrücken, anstatt lange Beschreibungen von Fällen, die ich nie gelesen habe. Jetzt ist Roam Research aufgrund seiner Neuheit ein kostenloses Projekt. Aber ich bin mir ziemlich sicherdass seine kostenlose Option immer existieren wird.

5. Happy Hues



Happy Hues

Dieses Tool ist für Entwickler gedacht, die sich ein wenig mit Design beschäftigen. Es geht um das Happy Hues- Projekt. Dies ist eher keine Anwendung, sondern eine Ressource für diejenigen, die nicht sehr gut in der Auswahl von Farbpaletten sind. Auf dieser Seite finden Sie viele vorgewählte Farbkombinationen. Ich nehme an, es ist einfach unmöglich, etwas zu finden, das Ihrem Stil entspricht. Ich habe diese Ressource immer zur Hand und greife zum Beispiel darauf zurück, wenn ich eine gute Farbkombination finden muss, die sich durch einen angemessenen Kontrast auszeichnet und Tests für die Verfügbarkeit von Inhalten besteht.

Zusammenfassung


Ich habe Ihnen gerade eine geheime Liste von Tools zur Verfügung gestellt, mit denen ich produktiv arbeiten kann. Es ist möglich, dass einige von ihnen für Sie nützlich sind. Wenn Sie interessante Tools kennen, die die Produktivität von Webentwicklern steigern, teilen Sie diese in den Kommentaren mit!

Wir erinnern Sie daran, dass wir den Vorhersagewettbewerb fortsetzen, bei dem Sie ein brandneues iPhone gewinnen können. Es bleibt noch Zeit, sich darauf einzulassen und die genauesten Prognosen zu aktuellen Werten zu erstellen.

More articles:


All Articles