Automatic.css

Czym jest Automatic.css?

Automatic.css to wysokokonfigurowalny i rozbudowywalny framework CSS, stworzony przez Kevina Geary’ego, przedsiębiorcę i edukatora WordPress, oraz mnie. Projekt ten jest przeznaczony dla profesjonalnych projektantów i deweloperów stron internetowych, szczególnie w ekosystemie WordPress, i służy do bardziej efektywnego, skalowalnego i łatwego w utrzymaniu budowania stron internetowych. Framework oferuje interfejs frontendowy oraz pulpit nawigacyjny dla łatwej konfiguracji, umożliwiając błyskawiczne podglądanie zmian bez konieczności ich zapisywania. Generuje czyste klasy CSS oraz zmienne, które można zredukować, aby zminimalizować rozmiar pakietu. Dodatkowo, oferuje ulepszenia workflow, takie jak menu kontekstowe, podgląd stylów, skróty klawiaturowe oraz Auto BEM.

Rozwój

Identifying the Pain Points

Automatyczne.css powstało w odpowiedzi na konkretne problemy, które identyfikowaliśmy podczas pracy w branży. Spotkałem Kevina w jego prywatnej społeczności, w której dzielił się treściami dla freelancerów i agencji WordPress. W tamtym czasie budowałem strony w Oxygen, często współpracując z moją żoną lub dla innych agencji. Pomysł na Automatic.css jeszcze nie istniał.

Kevin postanowił stworzyć framework CSS, który zastąpiłby OxyNinja, inne rozwiązanie, którego sztywność i brak możliwości konserwacji bardzo go frustrowały. W swojej działalności edukacyjnej, Kevin zaczął dzielić się różnymi fragmentami CSS w swoich filmach. Dzięki ich prostocie i funkcjonalności, wielu projektantów i deweloperów, w tym ja, zaczęło używać tych snippetów, co potwierdzało potrzebę zintegrowanego produktu.

Od prototypu do produktu: Premiera 1.0

Pierwszym krokiem w procesie tworzenia było określenie technicznej wykonalności naszych pomysłów. Zbudowałem szybki prototyp, który, mimo swojego niezbyt estetycznego wyglądu, spełniał swoje zadanie. Po sprawdzeniu, że prototyp działa, przeszliśmy do budowy bardziej uproszczonej wersji, której celem było całkowite wsparcie dla Oxygen. Udało nam się uruchomić premierę Automatic.css przed Black Friday 2021, osiągając termin z 10-dniowym wyprzedzeniem.

Udoskonalenie doświadczeń użytkowników: Aktualizacja 2.0

Dzięki rosnącej społeczności użytkowników Automatic.css, zyskaliśmy pewność, że rozwiązujemy realne problemy budowniczych stron WordPress. Zainwestowaliśmy czas w rozwój frameworka i dodaliśmy nowe funkcje. Postanowiliśmy skupić się na rosnącym rynku Bricks Builder oraz poprawić interfejs użytkownika, aby czynić dashboard bardziej przyjaznym. To wymagające zadanie zajęło ponad trzy miesiące, a efekt w postaci wersji 2.0 zadebiutował w sierpniu 2022 roku. Społeczność przyjęła tę aktualizację z radością, a my zaobserwowaliśmy wzrost sprzedaży w tym okresie.

Integracja Plastera: Nowe możliwości

W miarę jak Automatic.css zyskiwało popularność, powstał dynamiczny ekosystem trzecich integracji. Jednym z wyróżniających się narzędzi był Plaster, który dodał menu kontekstowe do Automatic.css, co znacznie ułatwiło wybór odpowiednich klas CSS. Po zauważeniu jego potencjału, postanowiliśmy skontaktować się z twórcą Plastera, Christophem Sanzem.

1 maja 2023 roku sfinalizowaliśmy umowę na zakup i integrację Plastera z Automatic.css, oferując go wszystkim naszym użytkownikom za darmo. Christoph dołączył do naszego zespołu, aby ulepszyć kontekstowe menu i opracować więcej narzędzi wspomagających pracę.

Automatic.css 3.0: Rewolucyjna aktualizacja

Mimo sukcesu wersji 2.0, nie można było spocząć na laurach. Jednym z głównych wyzwań była potrzeba nieustannego przełączania się między dashboardem Automatic.css a builderem stron, co często prowadziło do zakłóceń w życiu witryny. Wpadliśmy więc na pomysł, aby umożliwić modyfikacje bezpośrednio w builderze stron z ich natychmiastowym podglądem.

Tak narodziła się wizja wersji 3.0. Ta aktualizacja była ogromnym skokiem do przodu w stosunku do wersji 2.0. Nowością była bardziej złożona struktura, ulepszone funkcje i integracja Plastera, co wymagało znaczącej reorganizacji. Stworzenie nowego UI przy użyciu czystego JavaScriptu było sporym wyzwaniem, dlatego poprosiliśmy o pomoc Woji, Christoph i jego brata Reinharda.

Pracowaliśmy nad szkicami pomysłów w październiku 2023 roku, nieustannie iterując, aż do pojawienia się wersji alfa w marcu 2024. Publiczny „pierwszy widok” na żywo w kwietniu 2024 przyciągnął rekordową liczbę uczestników, a ekscytacja sięgała zenitu. Wersja beta rozpoczęła się pod koniec tego miesiąca, a po kilku drobnych poprawkach, Automatic.css 3.0 zadebiutowało 28 czerwca 2024 roku.

Po dziewięciu miesiącach ciężkiej pracy, udało się nam zapewnić, aby nowa wersja była nie tylko nowoczesna, ale także łatwa do zastosowania w istniejących witrynach. W tym czasie nasz zespół powiększył się, Digital Gravy skoncentrowało się na oprogramowaniu, a moja rola ewoluowała w kierunku CTO.

Sukces i wnioski

Projekt Automatic.css odniósł sukces, dostarczając cennych narzędzi dla twórców stron internetowych oraz odnosząc się do rynku, który mamy na myśli. W Polsce mówimy, że “apetyt przychodzi w miarę jedzenia”. Wyraźnie widać, że Automatic.css ma potencjał na to, aby stać się wiodącym frameworkiem dla WordPressa. To jest misja, nad którą obecnie pracujemy.

Kontynuujemy rozwój produktu, rozważając także nowe rynki. Stanęliśmy przed wieloma wyzwaniami, dodaliśmy nowy produkt do oferty i powitaliśmy nowych programistów w zespole. Moja rola ewoluowała w kierunku nadzorowania całej operacji.

Matteo odegrał kluczową rolę w sukcesie Automatic.css. Jego wiedza i doświadczenie w zakresie architektury wtyczek oraz rozwiązywania konfliktów technicznych były nieocenione. Pomagał także w integracji całkowicie odrębnego produktu, Frames. Głęboko wierzę, że jego umiejętności mogą przynieść korzyści każdemu, kto wprowadza produkt oparty na oprogramowaniu w ekosystemie WordPress.

Na koniec 2022 roku Automatic.css uzyskało pierwsze miejsce w kategorii Narzędzi Dewelopera w WP Awards 2022. Dzięki temu, w 2023 roku postawiliśmy na jeszcze większy rozwój.