[Vue] Aplikacja do generowania tekstur low poly

@Roughster Dzięki, mam na uwadze ciemną wersję - ta jest jak się nie mylę wygenerowana także może zawierać błędy. Przy najbliższej okazji poprawię 😉

Super że zaczynasz w Vue coś działać, ale za RWD kijem po dupie powinieneś dostać 😄

@aXenDev  Przepraszam poprawię jutro 😉

Aplikacja fajna, prosta ale fajna, ale jak wspomniałeś na początku, z prawdziwym Vue, w takiej formie jakiej się używa w pracy, ma niewiele wspólnego. Ba, tutaj w sumie więcej widzę zwykłego JSa + statyczny HTML, niż Vue. Nie ma się czego bać i zaciągaj od razu Vue-CLI i rób apki po bożemu 🙂

@Dazai Przez ostatni rok szlifowałem JavaScript (stąd apka Covidowa). Do Vue mam przygotowane materiały, z których będę czerpał wiedzę także w najbliższym czasie zaczynam ostrą jazdę z tematem 😉

Zgodnie z waszymi wskazówkami wleciał szybki mały update:

- Usunąłem zewnętrzne dodatkowe style od ciemnego motywu - zastąpiłem je moimi

- Usunąłem małe bugi związane z edycją palet kolorów (przy modyfikacji wybranej palety modyfikowały się domyślne parametry) ah te referencje sklonowanych tablic xd

- Dodałem RWD (które powinno być od początku, dzięki @aXenDev za przypomnienie 😛) - nie za bardzo wiedziałem jak to zrobić na telefony ale myślę, że wyszło spoko

Dzisiaj miałem trochę czasu i postanowiłem przyjrzeć się Twojej pracy i zrobić taki mały code review.

1. Warto by zacząć używać paczek npm jeżeli chcesz zacząć korzystać z Vue. Jest to ładniejsze i łatwiejsze do ogarnięcia dla użytkowników z zewnątrz,
   Wiem że kombinowałeś coś z webpack, ale w twoich projektach tego nie widzę. Super byłoby go również zobaczyć. Poniżej wstawiam filmik, który świetnie do tego wprowadza. Można sobie obejrzeć na dobranoc 😄
2. Buttony z samymi ikonami powinny posiadać nazwę. Więcej tutaj: https://web.dev/button-name/?utm_source=lighthouse&utm_medium=devtools

3. <label class="form-label" for="width">Dimensions (px)</label>
   <div class="input-group">
   	<input class="form-input" type="tel" id="width" placeholder="1920" value="cfg.width" min="10" max="3840" step="10" value="1920" v-model="cfg.width" v-on:input="onUpdate">
   	<input class="form-input" type="tel" id="height" placeholder="1080" value="cfg.width" min="10" max="3840" step="10" value="1080" v-model="cfg.height" v-on:input="onUpdate">
   </div>

   Zgubiłeś label dla inputu height,

4. <p class="form-input-hint"><small>Preffered: 1920 | 1080</small><br/><span v-if="help"><small>[width / height] Specify the width and height in pixels of the pattern to generate.</small><br/><small>Min: 1; Max: 2560</small></span></p>

   Nie korzystaj z poprzedniej wersji HTML w stylowaniu. Staramy się stylować tylko w CSS, a jak już musimy w HTML to za pomocą atrybutów style. Znaczniki small i br są tutaj niepotrzebne.

5. Jeżeli używasz VSCode to proponuję zainstalować wtyczkę prettiera. Raz kod jest fajne sformatowany, a raz ucieka Ci spacja. Wtyczka pomoże Ci to wszystko uporządkować i nie będziesz się musiał przejmować wyglądem kodu.

6. Staraj się skracać kod i pomijać zbędne klamry np.:

   if( this.cfg.width < 1 && this.cfg.height < 1 ){ return false; }

   Możesz spokojnie zamienić na:

   if (this.cfg.width < 1 && this.cfg.height < 1) return false;

   Widzę że to w niektórych miejscach zrobiłeś, ale w niektórych nadal masz klamry.

7. Bardzo fajnie że zadbałeś o obsługę błędów w przypadku nieprawidłowego kodu koloru,

8. Stopka jest ledwie widoczna. Zbyt mocno obniżyłeś opacity,

9. Przydałaby się jakiś margin pomiędzy wygenerowaną grafiką a panelem ustawień. Przy niektórych kolorach widoczna jest tutaj biała kropka z racji tego że przycisk jest zaokrąglony.
   

10. W mobilnej wersji po kliknięciu w podgląd otwiera się on na całą szerokość. Fajnie jest to zrobione, ale jest jedno 'ale'. Zamykanie popapu powinno się odbywać przez jakiś wyraźny przycisk lub po stuknięciu na puste miejsce. W moim przypadku zastanawiałem się czy to nie jest błąd dopóki przypadkowo stuknąłem na samą grafikę.

11. Pomysł na aplikację jest świetny, bardzo podoba mi się personalizacja z paletą kolorów,

12. Do ciemnego motywu proponuję również dorobić ciemne inputy,

13. Zmieniłbym trochę działanie przykładowych palet kolorów. Niewybranie palety są u Ciebie przeźroczyste w połowie za pomocą opacity. Proponuję zostawić widoczność taką jaka jest na żywo, a do wybranych palet dodać jakiś border-color. Będzie to ułatwienie dla użytkowników i może przyciągnąć bardziej zainteresowanych danym kolorem.

@aXenDev Dzięki za cenne uwagi!

28 minut temu, aXenDev napisał:

Warto by zacząć używać paczek npm

Tak tak, powoli zaczynam ogarniać sprawę - im więcej oglądam tym więcej się dowiaduje jak to działa i jak te całe "buildy" działają. Dzięki @Dazai z poleceniem paki vue-cli tworzenie "bazy" pod Vue mega pomaga a do tego vue ui - bajka. Jestem świadomy, że takie obchodzenie może być problematyczne, gdy takiego narzędzia nie będę mógł użyć i będę musiał pracować na surowych plikach - ale myślę, że niebawem sytuacja mnie do tego zmusi i się tego po prostu nauczę i zrozumiem co i jak 😉

28 minut temu, aXenDev napisał:

Buttony z samymi ikonami powinny

Trochę to zaniedbałem - podobnie jak z RWD

28 minut temu, aXenDev napisał:

Zgubiłeś label dla inputu height

Tutaj był zamysł taki aby label był dla width i od niego się zaczynało a po wciśnięciu Tab przechodziło do inputu height - aczkolwiek wiem, że powinno się robić tak, że 1 input = 1 label - będę miał to na uwadze.

28 minut temu, aXenDev napisał:

Nie korzystaj z poprzedniej wersji HTML

Span'y i stylowanko 😉

28 minut temu, aXenDev napisał:

Jeżeli używasz VSCode to proponuję zainstalować wtyczkę prettiera.

Używam Beautify i jestem zdziwiony tym co piszesz bo nigdy nie używam spacji - #TabTeam - więc kod nigdzie nie powinien uciekać 😮

28 minut temu, aXenDev napisał:

Staraj się skracać kod i pomijać zbędne klamry np.:

Uważam, że tutaj preferencja indywidualna - lubię wiedzieć, gdzie się kończy a gdzie zaczyna dany warunek czy pętla a tam gdzie uważam, że ich nie potrzebuję - ich nie stosuję 😉 Czasem ciężko się trzymać jednego wzorca stąd takie kwiatki

28 minut temu, aXenDev napisał:

Stopka jest ledwie widoczna. Zbyt mocno obniżyłeś opacity,

A bo ja taki skromny chłopak jestem 😳

28 minut temu, aXenDev napisał:

Przydałaby się jakiś margin pomiędzy wygenerowaną grafiką a panelem ustawień. Przy niektórych kolorach widoczna jest tutaj biała kropka z racji tego że przycisk jest zaokrąglony.

Uroki korzystania z frameworków css - ale dzięki za uwagę 😉

28 minut temu, aXenDev napisał:

W mobilnej wersji po kliknięciu w podgląd otwiera się on na całą szerokość. Fajnie jest to zrobione, ale jest jedno 'ale'. Zamykanie popapu powinno się odbywać przez jakiś wyraźny przycisk lub po stuknięciu na puste miejsce. W moim przypadku zastanawiałem się czy to nie jest błąd dopóki przypadkowo stuknąłem na samą grafikę.

Też o tym myślałem, tylko muszę trochę strukturę elementu zmienić bo ikony z których obecnie korzystam są generowane na podstawie atrybutu i ciężko je wsadzić w pseudoelementy

28 minut temu, aXenDev napisał:

Do ciemnego motywu proponuję również dorobić ciemne inputy,

Hah, a kurde je robiłem - musiały mi uciec jak cofałem jakieś zmiany 😛

28 minut temu, aXenDev napisał:

Zmieniłbym trochę działanie przykładowych palet kolorów. Niewybranie palety są u Ciebie przeźroczyste w połowie za pomocą opacity. Proponuję zostawić widoczność taką jaka jest na żywo, a do wybranych palet dodać jakiś border-color. Będzie to ułatwienie dla użytkowników i może przyciągnąć bardziej zainteresowanych danym kolorem.

Też wydaje mi się, że sposób w jaki to zrobiłem, nie do końca jest prawidłowy. Dzięki za uwagę, na pewno w niedalekiej przyszłości to naprawię 😉

@aXenDev Zmiany wprowadzone.

Na warsztacie mam 3h wstęp do Vue, potem dopełnienie 2-3 poradnikami i wkrótce wleci poradnik z webpacka 😉 a potem tylko realizacja kolejnych pomysłów 💪