Jak ułatwiać sobie życie dzięki programowaniu

Jak ułatwiać sobie życie dzięki programowaniu

Nikt nie uczy się programowania z czystej pasji do uczenia się programowania. Wszyscy chcielibyśmy wykorzystywać nasze umiejętności w praktyce. Często chcielibyśmy też, żeby ta praktyka równała się czemuś dużemu – może to być produkt który odniósł sukces, satysfakcja z nauczenia czegoś naszego znajomego który dopiero zaczyna, albo projekt który zmieni świat. Co jednak w momencie, kiedy nie mamy akurat możliwości pracować przy czymś “wielkim”, a chcielibyśmy robić coś poza kolejną aplikacją To Do? Dzisiaj na podstawie własnego projektu chciałbym podsunąć ci pewien pomysł…

Jak pewnie wiecie, PoznajProgramowanie.pl nie jest naszym głównym zajęciem – od poniedziałku do piątku conajmniej osiem godzin spędzamy na regularnym etacie. Z tego właśnie powodu czas przeznaczony na bloga staramy się wykorzystywać tak efektywnie jak tylko się da. Możecie nam wierzyć lub nie, ale nawet przy takim projekcie “po godzinach” nasza lista rzeczy do zrobienia wydaje się nie mieć końca. Jedną z rzeczy która towarzyszy nam przy okazji każdego posta jest chociażby przygotowanie obrazków dla mediów społecznościowych:

Czas przygotowania pojedynczego obrazka nie jest szczególnie długi, jednak biorąc pod uwagę to, że w naszym dwuosobowym zespole grafiką zajmuje się tylko jedna osoba (ja), to naturalnie wprowadziliśmy u siebie Single Point of Failure – jeśli mam czas, to przygotowuję wszystko odpowiednio wcześniej. Jeśli mam go mniej, to do ostatniego dnia szukam godziny którą przeznaczę na otwarcie Photoshopa i wykonanie tego co potrzeba w danym momencie.

Kilkukrotnie dochodziliśmy już do wniosku, że dobrze byłoby nie polegać na jednej osobie – każdy mógłby przecież przygotować materiały dla siebie. Jak to jednak zrobić tak, żeby wszystko było spójne i nie wyglądało jak przeznaczone na dwa osobne portale? Potrzebujemy narzędzia…

…które możemy wytworzyć samemu.

Łatwo, szybko i przyjemnie

Nie miałem w planach tworzenia drugiego Photoshopa albo Gimpa z lepszym interfejsem. Projekt miał być mały, możliwy do napisania w krótki czasie, ale musiał jednak spełniać wymagania – tworzenie obrazków do mediów społecznościowych powinno być możliwe dla każdego kto ma akurat coś do napisania.

Co byłoby potrzebne aby zrealizować taki pomysł? Mając na uwadze jak wyglądała moja praca w Photoshopie wszystko powinno ograniczyć się do trzech warstw – rozmyty obrazek, gradient oraz tekst z możliwością edycji.

Czy byłbym w stanie zrobić coś takiego bez spędzania długich godzin na analizie potrzebnych bibliotek i technologii? Pewnie tak. Obrazek to div z odpowiednim tłem na którym mogę zastosować filtr blur z CSSa, gradient mogę przygotować w dowolnym programie graficznym, a edycja tekstu to formularz. Do tego przyda się jeszcze jakaś lekka biblioteka która sprawi, że wszystko będzie interaktywne a nie statyczne. Wiedząc, że temat takiego narzędzia powraca w naszych rozmowach dość często i jednocześnie widząc jak niewiele czasu wymagałaby implementacja, zabrałem się do roboty.

Rzut oka pod maskę

Co prawda w dzisiejszym poście moim celem nie jest przedstawienie wam nowej technologii na przykładzie konkretnego projektu, ale niektórych z was pewnie interesuje jak zaimplementować takie narzędzie w łatwy sposób.

Zacznijmy od wersji statycznej, a konkretnie od pola tekstowego oraz przycisku do pokazywania i ukrywania dodatkowych opcji. Do budowy takich elementów wystarczy nam HTML i CSS:

Kilkoma linijkami kodu uzyskamy górną część naszego narzędzia:

Po kliknięciu w przycisk użytkownik powinien zobaczyć kontener / popup / cokolwiek, co umożliwi mu zmianę takich parametrów jak zastosowany gradient czy wartość rozmycia. Aby utworzyć taki element, najpierw dodajemy nasze kontrolki:

A następnie dodajemy odpowiednie reguły CSS:

Nasz komponent prezentuje się następująco:

Na razie nie musi być pięknie 😉 W jaki sposób sprawić, żeby nasz popup z ustawieniami pojawiał się i znikał? Chyba najlepiej (z perspektywy późniejszych modyfikacji) będzie, jeśli przygotujemy dodatkową regułę w css i będziemy ją dodawać w zależności od stanu komponentu:

Jeśli dodasz lub usuniesz taką klasę w elemencie div.controlPanel-controlsContainer to zobaczysz, że nasz popup jest w zależności od jej obecności widoczny lub ukryty.

Poniżej pola tekstowego utwórzmy „kontener” w którym znajdzie się obrazek bazowy, gradient oraz warstwa z tekstem. W HTMLu i CSSie może to wyglądać następująco:

 

Po takim zabiegu całość prezentuje się następująco:

Jeszcze tylko formularz do edycji tekstu i wersja statyczna jest w zasadzie gotowa. Najpierw HTML:

Teraz trochę CSSa:

I nasze narzędzie może już rywalizować z większością dostępnych na rynku narzędzi do edycji grafiki:

A tak na poważnie… realizacja statycznego mockupu takiego narzędzia zajęła mi kilkanaście minut. Poukładanie wszystkich elementów w jednym pliku index.html to wszystko czego potrzebowałem żeby stwierdzić, czy warto w to iść. Dalszy krok, czyli dodanie interakcji poprzez odrobinę JSa wydawał się jak najbardziej możliwy.

Nie chcę tutaj wchodzić w szczegóły i opisywać szczegółowo wszystkich linijek, ponieważ kod dostępny jest na portalu GitHub. Uprzedzając pytania – interakcję w moim narzędziu zapewnił mi Preact, czyli lekka biblioteka wzorowana na React’cie, dzięki której tworzyłem poszczególne interaktywne komponenty. Wszystkich, których interesują detale odsyłam w dwa miejsca (po przeczytaniu posta 😉 ):

Co robić, kiedy nie ma co robić

Wracając do pytania ze wstępu dzisiejszego posta – co robić, kiedy nie masz pomysłu na kolejny projekt? Odpowiedź brzmi – ułatwiać sobie życie!

Umiejętność programowania daje nam to, czego zazdroszczą nam przedstawiciele wielu innych zawodów – mowa tutaj o wytwarzaniu czegoś “z powietrza”. Tak właśnie było z naszym generatorem obrazków, na którego finalnie złożyło się kilkanaście commitów i kilka godzin pracy spędzonej na tworzeniu i modyfikacjach całego projektu. Wysiłek był relatywnie mały, jednak czas jaki możemy oszczędzić na mojej (nie)dostępności jest czymś, co zebrane w całość może usprawnić naszą pracę w szerszym kontekście tworzenia bloga (przy okazji, narzędzie o którym czytasz zostało już wykorzystane w poście który masz przed sobą).

To nie pierwszy przypadek kiedy z pozoru błahe “utrzymywanie kilkunastu postów na WordPressie” dało nam pole do programistycznego popisu. Podobnie było chociażby w poście – Automatyzacja backupów – w którym czas przeznaczany na wykonywanie kopii zapasowych poskutkował stworzeniem narzędzia do automatyzacji całego procesu. Jestem pewien, że wokół siebie mógłbyś znaleźć wiele podobnych miejsc gdzie narzędzie usprawniające daną czynność mogłoby być początkiem nowego projektu – czas spędzany na takim projekcie sprawia o wiele większą satysfakcję, bo przecież rozwiązujemy realny problem, a nie problem z tutoriala, automatyzujemy coś co w efekcie oszczędzi nasz czas, a na końcu możemy to jeszcze dodać do naszego portfolio.

Czy widzicie wokół siebie coś, co można byłoby usprawnić dzięki kilkunastu linijkom kodu?

  • Potrzeba matką wynalazków! Kto by pomyślał, że tak niewiele trzeba do stworzenia funkcjonalnego narzędzia. Dobra robota :).

    Mnie kusi napisanie parsera usprawniającego formatowanie wpisów na bloga.

    • Przemek Smyrdek

      Dzięki! Formatowanie czego konkretnie chciałbyś usprawnić – chodzi o fragmenty kodu?

      • Dokładnie, wtyczka EnlighterJS z WordPressa czasami robi (niechciane) niespodzianki.