Zu was Faulheit führt oder wie man einen psd-Parser schreibt und was daraus werden kann

Guten Tag!

Mein Name ist Andrey, ich möchte Ihnen von meinem Projekt erzählen, das ich in meiner Freizeit entwickle. Er hat bereits das Stadium erreicht, in dem er etwas zu zeigen hat, und das wird nicht peinlich sein.

Also fangen wir an!

Früher habe ich als Schriftsetzer wahrscheinlich, wie viele andere auch, den Weg der Optimierung repetitiver Arbeit eingeschlagen: Zuerst gab es nur CSS und HTML, dann erschienen Präprozessoren und Template-Engines mit Assemblern und so weiter.

Und irgendwann wurde mir klar, dass die Arbeit mit dem Layout unverzeihlich lange dauert. Nach einigem Suchen fand ich ein Plug-In für Photoshop, das vorgefertigte Stile basierend auf der Ebene generierte. Es war für mich wie eine neue Entwicklungsrunde, es schien, als hätte ich mich vorher überhaupt nicht versöhnt, sondern mich damit beschäftigt.

Aber wie Sie wissen, geben menschliche Faulheit und der Wunsch, alles zu optimieren (Menschen, die der IT nahe stehen, leiden mehr darunter) keine Ruhe, und ich begann eine neue Suche. Zu dieser Zeit erschien heute ein sehr beliebter Dienst mit einem exorbitanten Preis für ein Abonnement und einer kostenlosen Nutzungswoche, was meiner Meinung nach zu einer Lawinen-ähnlichen Zunahme der E-Mail-Konten führte :)

Nachdem ich es ausprobiert hatte, wurde mir klar, was ich brauchte, aber es gab mehrere Faktoren:

  1. Ich programmiere gerne
  2. Ich wollte nicht und ehrlich gesagt konnte ich es mir nicht leisten, so viel für ihr Produkt zu bezahlen
  3. Der Punkt über Faulheit und den Wunsch, alles zu optimieren

Vielleicht gab es noch etwas anderes, aber das ist schon zweitrangig.

Und dann wurde mir klar, dass ich versuchen könnte, ein kleines Programm für mich selbst zu schreiben, was ich auch tat.
Nach ungefähr 3 Monaten gemächlicher Auswahl der Dokumentation für psd und der Layouts selbst im Hash-Editor erschien die allererste Version meiner Arbeit, die damals keinen Namen hatte:


Es war ein Desktop-Client, der in Node-Webkit geschrieben wurde. Als Werkzeug für mich war es nicht schlecht, meine Produktivität wuchs, Freizeit begann zu erscheinen, und ich ließ es zur Finalisierung an Marsy gehen, es gab keinen Export von Bildern, aber es gab Möglichkeiten, die mir halfen: schnelles Kopieren von Ebenenstilen und Texten, aber das Nützlichste war Modus zum Vergleichen mehrerer Layouts. Es war sichtbar, in welchen Ebenen sich die Ebenen geändert haben und wie sie sich unterscheiden. Es hat dazu beigetragen, sehr schnell ein adaptives Design mit Layouts mit unterschiedlichen Auflösungen zu erstellen.

Wenig später gründete ich eine Gruppe in VK, die Leute begannen sich zu interessieren und ich entschied, dass ich das Programm weiterentwickeln muss.

Der erste Punkt warf die Frage des Exportierens von Bildern scharf auf, aber das Problem ist, dass in psd, wie später in vielen anderen Formaten klar wurde, die Originalbilder und eine Liste von Änderungen, die auf sie angewendet werden müssen, gespeichert werden, z. B. mit Farbe, Strich und Schatten füllen .

Ebenen in Layouts können sehr groß sein, und ich hatte nicht genügend Fähigkeiten oder Kenntnisse, um mich mit riesigen Arrays mit Informationen über Pixel und Node-Webkit anzufreunden. Es begannen große Speicherausfälle, häufige Abstürze aufgrund des Mangels. Aus diesem Grund musste ich js aufgeben und zu einer anderen mir vertrauten Sprache wechseln - Java.

Das Ändern der Sprache beeinträchtigte die Leistung erheblich. Das Parsen begann gerade zu fliegen, aber der Speicher benötigte immer noch etwas mehr als Photoshop.

Seitdem ist ein Screenshot geblieben:



In diesem Moment wurde mir klar, dass ich zum Server gehen musste - der Benutzer verschwendete keine Ressourcen, es war für mich einfacher zu entwickeln, da ich wusste, dass die Anwendung in einer von mir kontrollierten Umgebung funktioniert.

Kaum gesagt als getan.

Der Parser wurde für die Webarchitektur neu geschrieben, VPS wurde bestellt, Tomcat wurde ausgelöst, die Datenbank wurde geschrieben, der Client-Teil wurde geschrieben und geschlossene Tests auf Einladung begannen.

Der Service sah also zu dieser Zeit aus:


Dieses Arbeitsschema hat mir sehr gut gefallen, die ersten Besucher, die ersten Bewertungen und Vorschläge erschienen.

Und so verging ein Jahr, es gab viele Updates, ich wechselte den Job, entfernte mich vom Layout, reagierte sauber, fast ohne Layouts.

Ich habe den Marsy-Client-Teil in ihn übersetzt und viel auf dem Server optimiert.

Ein Stapel von Technologien und Tools für heute: Java, Spring Framework, React, Redux.

Heute sieht es ungefähr so ​​aus (ich entschuldige mich für die Diktion, ich bin es nicht gewohnt zu sprechen und jede Sprachaufnahme ist sehr aufregend für mich)


Ich werde nicht alle Funktionen von Marsy beschreiben, sie sind im Video sichtbar, es wird dort deutlicher gezeigt, aber hier sind einige Funktionen, die nicht im Video enthalten zu sein schienen:

  1. Unterstützung für intelligente Objekte und die Möglichkeit, diese zu öffnen
  2. die Möglichkeit, direkte Links zum Layout zu erstellen, mit denen Sie es öffnen können, ohne sich wie folgt anmelden zu müssen
  3. Batch-Image-Download mit Qualitätseinstellungen
  4. Verwendung von Variablen

Sicher gibt es noch etwas anderes und ich habe vergessen zu erwähnen, aber Sie können sich selbst sehen und bewerten.

Wenn Sie interessiert sind, kann ich einen separaten Artikel schreiben, in dem ich den technischen Teil und die Funktionen der Arbeit mit dem psd-Format ausführlicher beschreiben werde.

Wie man es versucht

Die Anwendung ist kostenlos unter dem Marsy- Link verfügbar.
Sie können sich auch ein Video mit einer vollständigen Beschreibung seiner Funktionen ansehen, obwohl sich seitdem einige Dinge geändert haben.

Wenn Sie keine Zeit haben oder sich nicht registrieren möchten, können Sie ein Testkonto ausprobieren:

: 12345 : 12345 

Vielen Dank für Ihre Aufmerksamkeit,

andrey@markupeasy.ru
www.markupeasy.ru

Viel Glück an alle!

Source: https://habr.com/ru/post/de463847/


All Articles