Skocz do zawartości
Forum komputerowe

[Vue] Aplikacja do generowania tekstur low poly


Rekomendowane odpowiedzi

  • Ekspert
Napisano (edytowane)

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 🙂

Edytowane przez Dazai
Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

@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 😉

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

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

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert
Napisano (edytowane)

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.
    image.png.b60942a79f46f4793809002061447088.png

  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.

 

Edytowane przez aXenDev
Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator
Napisano (edytowane)

@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ę 😉

Edytowane przez Mativve
Edit
Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator
Napisano (edytowane)

@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 💪

Edytowane przez Mativve
Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...