Jak zacząć swoją przygodę z JavaScript?

Post on 06-Aug-2015

3.969 views 0 download

Transcript of Jak zacząć swoją przygodę z JavaScript?

phone +48 696 185 029 mail contact@functionite.com twitter @functionite

Jak zacząć swoją przygodę z JavaScript?

http://functionite.pl

Damian Wielgosik(http://ferrante.pl, @varjs)

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Co należy umieć by zabrać się za JavaScript?

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

HTML, CSS

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Umieć HTML i CSS nie znaczy

wiesz, no ogarniam, takie znaczki się pisze w dziubkach,każdy jest do czegoś innego

no HTML się pisze, a potem CSS i coś tam wychodzi

umiałbym/umiałabym to zrobić, ale mi się nie chce, no daj spokój, to łatwe

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Co znaczy umieć HTML i CSS?

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Umieć HTML i CSS znaczy potrafić przełożyć grafikę (projekt strony w JPG/PSD) na kod, by

wyglądał tak samo/podobnie uruchomiony przeglądarce

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Można umieć HTML i CSS lepiej lub gorzej

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Nauka to proces

5 latmiesiąc

ekspert HTML i CSS

początkujący w HTML i CSS

rok

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono5 latmiesiąc

ekspert HTML i CSS

początkujący w HTML i CSS

nauka kodowania

zbieranie doświadczeń

rok

http://ferrante.pl/books/html/

Kiedy mogę wziąć się za JSa?

czas na JS!

5 latmiesiąc

ekspert HTML i CSS

początkujący w HTML i CSS

rok

Co znaczy, że nauka programowania to proces?

Nie można nauczyć się raz, a dobrze

Każdy nowy projekt niesie za sobą nowe wyzwania

Cierpliwość!

Praca! Nie nastawiaj się na natychmiastowe efekty i medale

Co jest największą przeszkodą w nauce JSa?

Lenistwo. Szybkie poddawanie się.

Dobry rok zajęło mi, by napisać licznik znaków

Jak się uczyłem?

Metodą prób i błędów

Podpatrywaniem, jak zrobili to inni

Pytaniem innych (na forach, grupach etc.)

Zajęło mi to długi czas.Wracałem co jakiś czas do kodu z nowymi pomysłami, aż

wyszło.

Programowanie to odtwarzanie schematów

To samo z HTMLem

Zrobisz raz nawigację na stronie, prawdopodobnie użyjesz czegoś podobnego w następnym projekcie

<nav> <h1>Menu</h1> <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> </ul></nav>

<nav> <h1>Produkty</h1> <ul> <li><a href="/books">Książki</a></li> <li><a href="/Komputery">Komputery</a></li> </ul></nav>

<nav> <h1>Produkty</h1> <p>Nasze produkty są najlepsze na świecie.</p> <ul> <li><a href="/books">Książki</a></li> <li><a href="/Komputery">Komputery</a></li> </ul></nav>

<nav> <h1>Menu</h1> <ul> <li><a href="home.html">Home</a></li> <li><a href="about.html">About</a></li> </ul></nav>

W jednym projekcie...

W innym...

Co z tym JavaScriptem?

Programowania (w tym JavaScript) uczysz się raz, kolejne języki i biblioteki to tylko Twoje narzędzia

Niech nie przeraża Cię liczba nowości każdego dnia.Tak było i będzie!

Dobrze jest wybrać sobie jedną rzecz, którą chce się zrobić i próbować ją zrobić

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Ciężko nauczyć się JSa tylko siedząc i myśląc

Nauka to własna inicjatywa, zadawanie pytań, próbowanie (czyli pisanie kodu aż wyjdzie)

Jak można sobie pomóc w procesie nauki?

Zatrudnij się w jakiejś firmie jako Junior Developer

Front-end: pierwsza praca w HTML5, CSS3 i JavaScript

Czego wymagają pracodawcy?

HTML, CSS

Co dalej?

Przykładowa oferta

Jak ją widzimy

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Kogo szukamy?Jeśli rozpoznajesz większość z poniższych zagadnień, spotkajmy się:- Umiejętność tworzenia semantycznie poprawnych dokumentów HTML- Obsługa programów graficznych Adobe (Photoshop / Illustrator)- Znajomość zagadnień RWD- Dobra znajomość technologii webowych (SASS/CSS, HTML5)- Znajomość frameworków (Boostrap, Foundation etc.)- Umiejętność pracy z Gitem- Znajomość dobrych praktyk kodowania (DRY, KISS)

Jak widzi ją pracodawca

Kogo szukamy?

Jeśli rozpoznajesz większość z poniższych zagadnień, spotkajmy się:- Umiejętność tworzenia semantycznie poprawnych dokumentów HTML

- Obsługa programów graficznych Adobe (Photoshop / Illustrator)

- Znajomość zagadnień RWD

- Dobra znajomość technologii webowych (SASS/CSS, HTML5)

- Znajomość frameworków (Boostrap, Foundation etc.)

- Umiejętność pracy z Gitem

- Znajomość dobrych praktyk kodowania (DRY, KISS)

Jeśli znacie CSSa, na pewno ogarniecie SASSa

Jeśli znacie CSSa, na pewno ogarniecie SASSai ktoś Wam w firmie w tym pomoże

A co, gdy wymagają doświadczenia?

Umiejętność adaptacji, poszukiwania odpowiedzi i swobodnego poruszania się po sieci

Co z tym JSem na Juniora?

Daj sobie 3 miesiące przed zgłoszeniem do firmy

Spróbuj zrobić jakąś prostą funkcjonalność

- licznik znaków w formularzu- walidacja formularza (sprawdzenie czy user coś wpisał)- kliknięcie danego elementu sprawi, że inny się pojawi (tzw. pokaż więcej)- rysowanie w <canvas>- odtwarzanie różnych filmików w tle strony- podmiana obrazka na stronie co 5 sekund- pokazanie okienka z dwoma przyciskami po kliknięciu

To może być:

Inspiracja jest wszędzie

Paradoksalnie... wyjrzyj za okno, przeczytaj nową książkę, dowiedz się czegoś nowego, poznaj nowych ludzi

Nie masz pomysłu? Zapytaj

Przyjdź na jakiś hackaton/warsztat

Zacznij eksperymentować, pisać, podpatrywać kod innych, naśladować

Nie bój się zadawać pytań, napisać maila do swojego autorytetu

Publikuj swoje przemyślenia, kod, udzielaj się na grupach dyskusyjnych i Twitterze

Chwal innych, doceniaj lepszych, nie bój się utrzymywać kontaktu!

Nie masz dużo czasu (rodzina, dzieci, obecna praca), daj sobie 6+ miesięcy

Po tym okresie roześlij CV

A co ze studiami?

Na ile muszę umieć JSa?

Uważaj na firmy, które Junior Developeromzlecają pracę dla zwykłego Developera

Jak zachować się na rozmowie?

Daj komuś znać, że interesuje Cię to, co robisz

Pochwal się tym, co zrobiłeś.Nawet o błahostkach opowiadaj jak o dużej rzeczy.

Czytaj blogi, Twittery, bądź na czasie, pochwal się, co czytasz

Miej pojęcie (choćby szczątkowe), co można zrobić przy pomocy technologii, których będziesz używać w pracy

Staraj się opowiedzieć o swoich projektach jak najwięcej, w tym o trudnościach i problemach nie do przeskoczenia

Rozmawiaj szczerze o pieniądzach. Pytaj.Nie czyń jednak tego tematu głównym Twojej rekrutacji.

To po prostu źle wygląda.

Dostałem/Dostałam się, co dalej?

Przyjdę do firmy i ktoś mnie po niej oprowadzi jak matka?I bedzie dopytywał jak się czuję i czego się chcę w danym momencie

nauczyć?

Dostałem zadanie, którego nigdy w życiu nie robiłem. Co robić?

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Pracodawca przede wszystkim wymaga profesjonalizmu

Profesjonalizm polega na otwartym umyśle

Potrzebujesz czegoś? Zapytaj. Jesteśmy tu, by Ci pomóc.

Dostałeś zadanie, ale nie wiesz co to system QWERTY123(tm)?Wygoogluj, popytaj w sieci, w ostateczności zapytaj szefa/kolegi.

Profesjonalizm polega też na umiejętności zaadoptowania się do warunków

Pytaj z wyczuciem. Jeśli ktoś jest zajęty, napisz maila.

Nie siedź jednak bezczynnie, jeśli zatrzymałeś się na jakimś problemie.

Podczas Twojego okresu próbnego najważniejsza będzie komunikacja

Ćwicz umiejętności miękkie

Produkt to efekt wspólnej pracy

“Ja swoje zrobiłem, nie odpowiadam za resztę”

blame culture

Dobra współpraca z członkami zespołu

Profesjonalizm to nie żartowanie z innych i słowna agresja

Profesjonalizm to nie przeklinanie w miejscu publicznym np. biurze

Profesjonalizm to nie bycie głośnym i narzucanie innym swojego podejścia do sprawy (w tym nadużywanie

stereotypów)

Profesjonalizm to poczucie odpowiedzialności

Jak widzi mnie grupa? Co zrobić, by środowisko, w którym działam stało się jeszcze bardziej przyjazne?

Dlaczego środowisko pracy ma być przyjazne?

Pomyśl, co czują inni. Czy Twoje zachowanie nie dominuje w grupie, czy ludzie łatwo mogą wnosić swoje pomysły w

grupie?

Profesjonalizm to też umiejętność przyznania się do błędu

I've missed more than 9000 shots in my career. I've lost almost 300 games. 26 times, I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is

why I succeed. M. Jordan

Profesjonalizm to dobra komunikacjaże nie dam rady

że mnie nie będzieże potrzebuję więcej czasu na to zadanie

Profesjonalizm to zadawanie pytań innym członkom zespołu

Profesjonalizm to unikanie subiektywnych założeńwydaje mi się, że ona wie o tym, więc nie pytam

Profesjonalizm to szacunek dla wyborów innychà la pff, w PHP to teraz nikt nie pisze, wstyd

Ceń się

A jak stać się lepszym koderem w firmie?

Rób code review z kimś bardziej doświadczonym

Skorzystaj z pair programmingu

Znajdź bardziej doświadczonego mentora

Nauka to proces

Od prostej rzeczy w czystym JS do jQuery

Od jQuery do większej aplikacji (np. Todo) w czystym JSie

Od prostej rzeczy w czystym JS do jQuery

Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono

Od prostej aplikacji do frameworka MVC (np. Angular.js)

Od jQuery do większej aplikacji (np. Todo) w czystym JSie

Od prostej rzeczy w czystym JS do jQuery

A co z nauką frameworków?

Ofert jest dużo, a pracodawcy robią wszystko, by ściągnąć Cię do teamu. Podaje się m.in. widełki płacowe.

Wyjedź za granicę, poznaj inne kultury i podejścia

Wyjazd do pracy za granicę był dla mnie najbardziej rozwojowym wydarzeniem w życiu

Praca zdalna?

Praca w UK?

Jakie książki czytać?

Speaking JavaScript

CSS Secrets

Eloquent JavaScript

Eloquent JavaScript

Illustrated Guide toFront-End

Development

Illustrated Guide toFront-End

Development

Maintainable JavaScriptWriting Readable Code

Effective JavaScript

http://jstherightway.org/

http://jsforcats.com/

http://jsbooks.revolunet.com/

http://hakim.se/experiments

Inne?

http://dailyjs.com/

http://webplatformdaily.org/

http://javascriptweekly.com

http://ferrante.pl

http://webmastah.pl/

http://codecademy.com/