Webdev-jak wejść na wyższy poziom?

Webdev-jak wejść na wyższy poziom?
NE
  • Rejestracja:około 10 lat
  • Ostatnio:około 4 lata
  • Postów:46
0

Obiecałem bratu, że zrobię mu stronę internetową dla jego firmy, miałem nadzieję, że będzie to taki pierwszy krok w stronę zarabiania jakichś pieniędzy na tym(studiuję informatykę, $ zawsze się przyda). Męczę się z tym od czerwca, zaczynałem chyba z 10 razy, za każdym razem albo tak mnie to drażniło, że rzucałem tym w kąt, albo efekt był tak mizerny, że zaczynałem od nowa.
W związku z tym poszukuję książek/kursów/porad(najlepiej w takiej kolejności) o webdev, webdesign i grafice(ta ostatnia tylko na poziomie potrzebnym dla tych dwóch pierwszych) pozwalających zacząć jakiś własny projekt. Do tej pory przeczytałem 4 książki, zacząłem kilka kursów i ukończyłem jeden(Boba Tabora z Microsoft Virtual Academy, polecam), ale to wszystko było o tym samym, to wszystko były podstawy, pozwalające stworzyć najprostszą stronę i sformatować jakiś tekst. Szukam czegoś, co pozwoli zacząć pracę nad własnymi projektami, albo przynajmniej mnie do tego przybliży-jakieś książki, strony warte polecenia o html i css, może lepiej iść w grafikę i design i dopiero potem coś tworzyć(chyba skłaniam się w tą stronę, bo z dotychczasowych doświadczeń wiem, że nawet jak już coś mi się udało ukulać, to było estetycznie, cóż, niesatysfakcjonujące), czy może iść w javascript i jquery, albo w frameworki i na nich bazować projekty?
Na pewno kilku forumowiczów przerabiało ten etap, i każdy miał taki punkt zwrotny, od którego klocki zaczynały wskakiwać na swoje miejsca, wszystko zaczęło się układać-tego właśnie szukam.

3

Sęk w tym, że posiadasz zapewne wymaganą wiedzę, aby zrobić tę stronkę. Tylko jeszcze do Ciebie nie dotarło, że to Cię nie kreci wcale.

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:19 minut
  • Postów:8398
1

. Do tej pory przeczytałem 4 książki, zacząłem kilka kursów i ukończyłem jeden(Boba Tabora z Microsoft Virtual Academy, polecam), ale to wszystko było o tym samym, to wszystko były podstawy, pozwalające stworzyć najprostszą stronę i sformatować jakiś tekst.

To trochę leczenie alkoholizmu piwem. Jeśli skończyłeś 4 książki, i zacząłeś kilka kursów, to czemu szukasz kolejnych? Rób, albo nie rób. Ale nie próbuj. Jak powiedział pewien zielony ludek.

Męczę się z tym od czerwca, zaczynałem chyba z 10 razy, za każdym razem albo tak mnie to drażniło, że rzucałem tym w kąt, albo efekt był tak mizerny, że zaczynałem od nowa.

możesz albo uznać, że to nie dla ciebie i zająć się czym innym, albo możesz też zacisnąć zęby i jednak zrobić tę stronę, choćby zajęło ci dodatkowe pół roku.

tak mnie to drażniło,

Webówka jest drażniąca. Im bardziej jesteś zaawansowany, tym bardziej będzie cię drażnić... Nawet ludzie, którzy pracują na codzień w Facebooku czy w innych topowych firmach, albo robią w Open Source, dalej są wkurzeni na JavaScripty i frontend. Tu trzeba mieć wytrzymałość ;)


edytowany 2x, ostatnio: LukeJL
Zobacz pozostały 1 komentarz
LukeJL
JS jako język nie jest zły, problem jest z konfiguracją narzędzi, rozwiązywaniem zależności paczek, zmagania się z różnymi wersjami bibliotek, optymalizacją systemu budującego (np. teraz mam problem, bo JavaScript mi się buduje 8 sekund i za każdym razem kiedy coś zmienię, muszę 8 sekund poczekać) itp. itd. Dodajmy do tego niestabilne ekosystemy frameworków (choćby React, w którym nie ma jeszcze ustalonych dobrych praktyk, czy Angular który w ogóle zaliczył glebę i go przepisują od nowa na 2)
LukeJL
od jakiegoś czasu coraz głośniej się o tym mówi i pisze, choćby tu: https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.1kjsyge6y
UB
8 sekund... żeby tyle się kompilował Javowy kod :D w dużych projektach to jest kilka (a nawet kilkanaście) minut. co do Angulara: czemu aż glebę? na bieżąco w świecie JS-a nie jestem, ale samego angulara 1 znam i podoba mi się jako framework, i w firmie też nikt specjalnie na niego nie narzeka.
LukeJL
bo gdyby był to całkiem udany framework, to nikt by nie podejmował tak drastycznej w skutkach decyzji o przepisaniu go na nowo z brakiem kompatybilności wstecz. To trochę jakby twórcy się przyznali "pierwsza wersja Angulara jest nieudana". (btw. samo zaliczenie gleby tego rodzaju jest czymś normalnym w świecie IT. Stwierdzam tylko fakt, że takie zaliczenie gleby nastąpiło).
LukeJL
a IMHO Angular 1 jest zbyt skomplikowany, zbyt nieelastyczny i zbyt niewygodny w użyciu.
3

Tak jak napisali poprzednicy: masz problem z motywacją. Bez niej nie ma nic (tzn. jest nic). ja sam byłem tam gdzie ty, dlatego Cię rozumiem.

Nie rozbudziłeś w sobie pasji, i chcesz na skróty zrobic z siebie profesjonalistę. Uwierz mi, że zarobione (jakimś cudem) pieniądze nie naprawią twojego problemu prokastynacji/motywacji. Pogłębią tylko problem, bo staniesz się wrakiem siebie sprzed momentu, gdy zacząłeś na siłę się czegoś uczyć.

Jedyne rozwiązanie - znajdź sobie jakieś zajęcie (niekoniecznie programowanie), które robisz i które nie umieści Cię w tzw. strefie komfortu. Tzn. ze napocić się musisz (jakby to powiedzial master yoda ;]).

Druga sprawa - za dużo chcesz na raz i tylko się tym męczysz/dołujesz. Masz za dużo do ogarnięcia na początku - pewnie twoja wiedza jest żałosna i w niczym nie jesteś na tyle dobry, żeby sobie powiedzieć np. "jestem pro, nikt mi nie podkoczy w XX (w miesjce XX wstaw dowolną technologię/język)".

Aby ułatwić sobie zadanie, ja np. codziennie robie tak:

  1. Ustalam ile sesji po 25-30 min dziś przeznaczam na 100% super-uber-power-programming (technika pomodoro - poczytaj sobie) - UWAGA!!! to działa ;), tylko trzeba robić to uczciwie. Ja zwykle spalam od 4x do 6x po 30min po pracy w tygodniu i po 10x30min w sobote i niedziele (no chyba ze mam wyjazd to odpuszczam zupełnie).

  2. Piorę sobie mózg celami krótkoterminowymi i długoterminowymi. Mam je wszędzie. Dzięki temu nie zapominam w jakim jestem bagnie gdy "nagle dostaje orgazmu, jaki to już jestem zajebisty i chyba już wszystko umiem".

  3. Oglądam video ludzi mądrzejszych ode mnie (staram się 10h w tygodniu). Tu jest pełna dowolność. Od masterów IT, poprzez różne motywacyjne wykłady/prezentacje, aż do tematów pobocznych, ale niezmiernie mnie interesujących - psychologii uczenia (siebie i innych)

  4. Nie uczę/ nie pracuję się gdy wiem, że mam na głowie np. rodzinę. Nie obwiniam się potem. Lajf is brutal, nie zrobisz wszystkiego tak szybko jakbys chciał.

  5. Wysypiam się, inaczej nastepnego dnia z 6 sesji pomodoro robi sie 1-2 albo 0. Taki jest koszt 1h krótszego snu. Nie ma co kozaczyć, tylko główka na poduszke i...

  6. Nauka w nocy i po wysiłku fizycznym jest ch**owa. Mózg pomaga Ci skupić się na tym co chcesz robić, bo nie ma siły na nic innego (spaliłeś prawie cały glikogen). A to znak, że kolejnego dnia będziesz trupem (ew. za dwa-trzy dni, jak jesteś mocny).

Jeśli będziesz opuszczał dni, w których jesteś w uber-power-developerem, to najlepiej nawet nie zaczynaj. Nie wyrobisz sobie nawyku do pracy w konkretnych godzinach i mózg/podświadomość będzie Ci sabotować próbę skupienia się, mimo że "chcesz" (w teorii).

I jeszcze jedno - wyłącz wszelkie komunikatory. W sesji 30min power-programmingu nie ma nic poza programowaniem. To nie jest czas na czytanie książki. To czas sensownej pracy.

Nie żebym był cyborgiem czy coś, ale jak sobie popuszczam, to tylko mam potem do siebie pretensje. Ty pewnie też będziesz miał, tak działa psychika ludzi mniej lub bardziej ambitnych.

NE
  • Rejestracja:około 10 lat
  • Ostatnio:około 4 lata
  • Postów:46
0

Sęk w tym, że ja to lubię. Lubię robić to, co robię na studiach, tj. C# i SQL, lubię też html i css. tylko Tylko nie potrafię sobie znaleźć czegoś pomiędzy tymi kursami, a tworzeniem strony. Jakieśtam strony porobiłem, ale z żadnej nie jestem zadowolony na tyle, by ją upublicznić, nawet za darmo bratu, a co dopiero brać za to pieniądze.
Może powinienem zająć się trochę designem? Z moich dotychczasowych doświadczeń wynika, że lepsze są efekty dobrego designu i słabego kodu niż na odwrót. A może grafika? Polecicie coś w tą stronę może? Jakbym ogarnął illustratora i stworzył sobie projekt strony, a potem go przenosił do przeglądarki kawałek po kawałku, to na pewno miałbym łatwiej, sęk w tym, że kompletnie nie ogarniam illustratora.

1

Nie designem a User Experience.

Pare bdb jakości video za free:

https://vimeo.com/54469442

Płatne (warte każdej złotówki, można nabyć za 50zł/each):
https://www.udemy.com/user-experience-design-fundamentals/
https://www.udemy.com/ux-web-design-master-course-strategy-design-development/

To tylko początek, ale temat głęboki i niesamowicie interesujący. Co do tego co poruszyłeś - design vs jakość kodu - masz rację. Design to podstawa. Jeśli ktoś Ci będzie wmawiał inaczej, to go nie słuchaj :D

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:19 minut
  • Postów:8398
0

Z moich dotychczasowych doświadczeń wynika, że lepsze są efekty dobrego designu i słabego kodu niż na odwrót.

zależy co masz na myśli design. Jeśli przez design masz na myśli coś w rodzaju UX, projektowanie całej interakcji i architektury informacji, to owszem, dobry design jest w cenie. Ale jeśli przez design masz na myśli "ładny wygląd, odpowiednia kolorystyka, ładnie rozłożony layout" to muszę się nie zgodzić. Jest naprawdę mnóstwo stron, które wyglądają zajebiście, ale w zasadzie nie da się z nich kompletnie korzystać, ani niczego się nie da na nich znaleźć. Ładny wygląd to nie wszystko.


edytowany 1x, ostatnio: LukeJL
NE
  • Rejestracja:około 10 lat
  • Ostatnio:około 4 lata
  • Postów:46
0

User experience nabiera znaczenia, gdy strona jest rozbudowana i oferuje użytkownikowi coś sama w sobie, ja robię prostą stronę-wizytówkę firmy, która ma być estetyczna i zawierać najważniejsze informacje-ofertę i kontakt. Na prawdę nie wyobrażam sobie, jak można zepsuć user experience w takim wypadku :) więc chodzi mi o design estetyczny.
Oczywiście nie marginalizuję UI, sam korzystam z internetu i wiem, które serwisy mi się podobają, a które drażnią i dlaczego, oraz jak bardzo to jest ważne z punktu widzenia użytkownika, ale nie robię póki co nic na taką skalę, by poświęcać na user experience więcej niż 10min.

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:19 minut
  • Postów:8398
0

Na prawdę nie wyobrażam sobie, jak można zepsuć user experience w takim wypadku

oj to chyba mało stron wizytówek widziałeś. Większość stron wizytówek ma zepsuty user experience. Nieraz już widziałem proste stronki, które miały:

  • za dużo tekstu, i ogólne lanie wody w tekstach, ciężko się czytało taką stronę (reakcja: ucieczka)
  • za małe fonty, małe kontrasty, ogólnie mała czytelność
  • ciężko było odnaleźć jakiekolwiek informacje, choćby czyjś adres czy numer telefonu
  • wyskakujące na połowę czy więcej ekranu informacje o ciasteczkach
  • zamulające przeglądarkę efekty graficzne
  • zbyt długo się ładowały
  • nie były przystosowane do mobilek
    etc.

User experience nabiera znaczenia, gdy strona jest rozbudowana i oferuje użytkownikowi coś sama w sobie

To jest bardzo ubogie myślenie. To zabrzmiało tak jakbyś robił stronę, która niczego nie ma oferować użytkownikowi, a była tylko dla ozdoby w internecie.

Obiecałem bratu, że zrobię mu stronę internetową dla jego firmy, miałem nadzieję, że będzie to taki pierwszy krok w stronę zarabiania jakichś pieniędzy na tym

Aha. Czyli bratu stronę internetową dla firmy możesz zrobić byle jak, bo to tylko strona wizytówka, która niczego nie oferuje sama w sobie... ? ;)

ale nie robię póki co nic na taką skalę, by poświęcać na user experience więcej niż 10min.

Równie dobrze możesz powiedzieć, że nie będziesz poświęcać np. kodowi HTML więcej niż 10 minut. Albo nie będziesz poświęcać CSSom więcej niż 10 minut. Albo nie będziesz poświęcać na projekt graficzny więcej niż 10 minut. Albo nie będziesz poświęcał na konfigurację serwera więcej niż 10 minut.

Wszystko ma znaczenie jakieś. Jeśli robisz coś samemu (a nie w zespole) to o wszystkim trzeba myśleć...


edytowany 3x, ostatnio: LukeJL
somekind
Zapomniałeś o wkurzającej muzyce w tle.
LukeJL
wkurzająca muzyka w tle to obecnie domena głównie wielkich portali informacyjnych, które coraz agresywniejsze są w reklamach dźwiękowych (czasem zdarza mi się wchodzić bez AdBlocka, i aż mnie czasem mrozi jak mi coś wyskoczy)
NE
  • Rejestracja:około 10 lat
  • Ostatnio:około 4 lata
  • Postów:46
0

No dla mnie takie rzeczy jak mobilna wersja strony, czytelny tekst, dobry dostęp do danych kontaktowych to jest oczywistość, tyle, że czytelność czcionki etc. podciągam już pod design i wizualny projekt strony.

Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)