Administrator Popularny post Mativve 3 943 Napisano 18 Lutego Administrator Popularny post Udostępnij Napisano 18 Lutego Siemka! Na ten rok postanowiłem sobie, że nauczę się Vue. Niestety styczeń był ciężki jeśli chodzi o czas, który mógłbym poświęcić na kursy dlatego samemu postanowiłem coś napisać z małą pomocą StackOverflowa 😉 Tak powstała apka do generowania tekstury low poly [trianglify]. Autor: @Mativve (ej przecież to ja) Tematyka: Generator tekstury Screen/Demo: https://mativve.github.io/Simple-Low-Poly-Generator/ Źródło kodu: https://github.com/Mativve/Simple-Low-Poly-Generator Jestem świadomy, że to z prawdziwym Vue (modułami, templatkami, paczkami etc) ma mało wspólnego - no ale od czegoś "trza" zacząć 😉 Jeśli macie jakieś uwagi/propozycje - śmiało piszcie poniżej. aXenDev, Pankrok, ravenekse i 9 innych dodali reakcje 9 3 Odnośnik do odpowiedzi Udostępnij na innych stronach
Roughster 76 Napisano 18 Lutego Udostępnij Napisano 18 Lutego Nocną wersję można byłoby lekko poprawić, a tak to dobra robota 😉 Mativve dodał reakcję 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
Administrator Mativve 3 943 Napisano 18 Lutego Autor Administrator Udostępnij Napisano 18 Lutego @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ę 😉 Roughster dodał reakcję 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
7777slimeseason 9 Napisano 18 Lutego Udostępnij Napisano 18 Lutego Całkiem fajnie Ci to wyszło, dobra robota! Mativve dodał reakcję 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
Ekspert aXenDev 1 758 Napisano 18 Lutego Ekspert Udostępnij Napisano 18 Lutego Super że zaczynasz w Vue coś działać, ale za RWD kijem po dupie powinieneś dostać 😄 Mativve i Qwizi dodali reakcje 1 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
Administrator Mativve 3 943 Napisano 18 Lutego Autor Administrator Udostępnij Napisano 18 Lutego @aXenDev Przepraszam poprawię jutro 😉 aXenDev dodał reakcję 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
Hyd3r1 50 Napisano 18 Lutego Udostępnij Napisano 18 Lutego 2 godziny temu, Mativve napisał: @aXenDev Przepraszam poprawię jutro 😉 No no no mative zaimponowałeś mnie w tym momencie 😄 Mativve dodał reakcję 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
Ekspert Dazai 925 Napisano 19 Lutego Ekspert Udostępnij Napisano 19 Lutego (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 19 Lutego przez Dazai Mativve dodał reakcję 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
Administrator Mativve 3 943 Napisano 19 Lutego Autor Administrator Udostępnij Napisano 19 Lutego @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
Exileh 20 Napisano 19 Lutego Udostępnij Napisano 19 Lutego autor Mativve(ej przecież to ja) XDDDDDDDD superancka strona ❤️ Mativve dodał reakcję 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
Administrator Mativve 3 943 Napisano 20 Lutego Autor Administrator Udostępnij Napisano 20 Lutego 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 Pankrok, Pawel i Exileh dodali reakcje 2 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
Ekspert aXenDev 1 758 Napisano 21 Lutego Ekspert Udostępnij Napisano 21 Lutego (edytowane) Dzisiaj miałem trochę czasu i postanowiłem przyjrzeć się Twojej pracy i zrobić taki mały code review. 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 😄 Buttony z samymi ikonami powinny posiadać nazwę. Więcej tutaj: https://web.dev/button-name/?utm_source=lighthouse&utm_medium=devtools <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, <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. 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. 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. Bardzo fajnie że zadbałeś o obsługę błędów w przypadku nieprawidłowego kodu koloru, Stopka jest ledwie widoczna. Zbyt mocno obniżyłeś opacity, 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. 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ę. Pomysł na aplikację jest świetny, bardzo podoba mi się personalizacja z paletą kolorów, Do ciemnego motywu proponuję również dorobić ciemne inputy, 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 21 Lutego przez aXenDev Mativve dodał reakcję 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
Administrator Mativve 3 943 Napisano 21 Lutego Autor Administrator Udostępnij Napisano 21 Lutego (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 21 Lutego przez Mativve Edit aXenDev dodał reakcję 1 Odnośnik do odpowiedzi Udostępnij na innych stronach
Administrator Mativve 3 943 Napisano 21 Lutego Autor Administrator Udostępnij Napisano 21 Lutego (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 21 Lutego przez Mativve Pawel i aXenDev dodali reakcje 2 Odnośnik do odpowiedzi Udostępnij na innych stronach
Rekomendowane odpowiedzi
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ę