Post on 15-Jul-2015
phone +48 696 185 029 mail contact@functionite.com twitter @functionite
Front-end development a.d. 2015
Damian Wielgosik
ferrante.plFront-Trends
meet.jsJS News
javascript.plFunctionite
@varjs
HTML5 najlepsze ma dopiero przed sobą!
Nowa wersja JavaScriptu pt. ECMAScript 6
Nowa wersja JavaScriptu pt. ECMAScript 6 2015
ECMAScript 2015: modules
// lib/math.jsexport function sum(x, y) { return x + y;}export var pi = 3.141593;
// app.jsimport * as math from "lib/math";alert("2π = " + math.sum(math.pi, math.pi));
ECMAScript 2015: arrow functions
// Statement bodiesnums.forEach(v => { if (v % 5 === 0) fives.push(v);});
ECMAScript 2015: classes
class SkinnedMesh extends THREE.Mesh { constructor(geometry, materials) { super(geometry, materials);
this.idMatrix = SkinnedMesh.defaultMatrix(); this.bones = []; this.boneMatrices = []; //... }}
MV* frameworks
Angular 2.0
Okres dojrzewania frameworków MVC
Koniec taryfy ulgowej?
Mało wydajny Angular?
Layout trashinghttp://wilsonpage.co.uk/preventing-layout-thrashing/
// Readvar h1 = element1.clientHeight;
// Write (invalidates layout)element1.style.height = (h1 * 2) + 'px';
// Read (triggers layout)var h2 = element2.clientHeight;
// Write (invalidates layout)element2.style.height = (h2 * 2) + 'px';
// Read (triggers layout)var h3 = element3.clientHeight;
// Write (invalidates layout)element3.style.height = (h3 * 2) + 'px';
React.js
var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; }});
React.render(<HelloMessage name="John" />, mountNode);
io.js
Meteor.js
Adobe Brackets
Servo
Webpack
Gulp
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
STOP! To tylko kolejne narzędzia zbudowane w HTML, CSS i
JavaScript
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Programowania (w tym JavaScript) uczysz się raz, kolejne języki i biblioteki to tylko Twoje narzędzia
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Niech nie przeraża Cię liczba nowości każdego dnia.Tak było i będzie!
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
2015 rokiem adaptacji
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
To doświadczenie jest Twoją największą wartością
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
2015 rokiem powrotu do dostępności (accessibility)
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzonohttp://stat.gov.pl/cps/rde/xbcr/gus/ZO_stan_zdrowia_2009.pdf
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Dostępność to mnóstwo spraw, na które nie zwracamy uwagi
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Dostępność to empatia
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
2015 rokiem umiejętności miękkich
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Szczegóły mają znaczenie
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
https://medium.com/@buzzusborne/god-is-in-the-details-bc3a9a9a5d88
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Dobra współpraca z członkami zespołu
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
“Ja swoje zrobiłem, nie odpowiadam za resztę”
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Produkt to efekt wspólnej pracy
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Zapomnijmy o blame culture
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Skupmy się na rozwiązywaniu problemów
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Jesteśmy specjalistami, chcemy być profesjonalistami
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Profesjonalizm to nie żartowanie z innych i słowna agresja
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Profesjonalizm to nie przeklinanie w miejscu publicznym np. biurze
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Profesjonalizm to nie bycie głośnym i narzucanie innym swojego podejścia do sprawy (w tym nadużywanie
stereotypów)
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Profesjonalizm to poczucie odpowiedzialności
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Jak widzi mnie grupa? Co zrobić, by środowisko, w którym działam stało się jeszcze bardziej przyjazne?
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Dlaczego środowisko pracy ma być przyjazne?
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Pomyśl, co czują inni. Czy Twoje zachowanie nie dominuje w grupie, czy ludzie łatwo mogą wnosić swoje pomysły w
grupie?
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Profesjonalizm to też umiejętność przyznania się do błędu
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
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
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Profesjonalizm to dobra komunikacjaże nie dam rady
że mnie nie będzieże potrzebuję więcej czasu na to zadanie
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Najgorsza rzecz to zniknąć w trakcie projektu
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Profesjonalizm to zadawanie pytań innym członkom zespołu
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Profesjonalizm to unikanie subiektywnych założeńwydaje mi się, że ona wie o tym
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Profesjonalizm to szacunek dla wyborów innychà la pff, w PHP to teraz nikt nie pisze, wstyd
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
2015 rokiem obalania mitów
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Nic Ci się nie należy, wszystko zdobywa się ciężką pracą
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
Rok 2015 rokiem odrzucania stereotypów
Jak stać się lepszym front-end developerem?
Rób code review z kimś bardziej doświadczonym
Skorzystaj z pair programmingu
Znajdź bardziej doświadczonego mentora
Przyjdź na jakiś hackaton/workshop
Język angielski a postawa rozszczeniowa
Fanatyzm a czego używać, Mac czy Windows?
Nikt nie lubi zarozumiałych
Nikt nie lubi zarozumiałych
Nikt nie lubi zarozumiałych
v
Jak zacząć? Jak się rozwijać?
Front-end robi się dla ludzi!
Inspiracja jest wszędzie
Paradoksalnie... wyjrzyj za okno, przeczytaj nową książkę, dowiedz się czegoś nowego, poznaj nowych ludzi
Chcesz dodać obrazek do strony?Używasz znacznika <img> z HTML, bodo tego go stworzono
https://jakearchibald.github.io/svgomg/
Znajdź odpowiedź na pytanie, jak moja praca może pomóc innym ludziom?
Do tego trzeba wysiłku. Zauważ, jak mało przedmiotów humanistycznych jest na studiach informatycznych...
Nie uczymy się o problemach innych ludzi.O tym, czym jest ludzkość i na czym polega empatia.
Zacznij eksperymentować, pisać, podpatrywać kod innych, naśladować
Nie bój się zadawać pytań, napisać maila do swojego autorytetu
Ciężko nauczyć się front-endu tylko siedząc i myśląc
Zatrudnij się w jakiejś firmie jako Junior Developer
Front-end: pierwsza praca w HTML5, CSS3 i JavaScript
Publikuj swoje przemyślenia, kod, udzielaj się na grupach dyskusyjnych i Twitterze
Chwal innych, doceniaj lepszych, nie bój się!
Naucz się dziękować i doceniać ludzi
Pracodawca chętniej spojrzy na kogoś, kto ma np. bloga.
Blog o front-endzie to świetna metoda na pokazanie swoich umięjetności rozwiązywania problemów i komunikacji z innymi. To świetna karta przetargowa, z której mało kto
korzysta.
Strach przed działaniem i brak przebojowości to nasz narodowy rak
Tak w ogóle, pracy w front-end developmencie jest mnóstwo!
Nie wierz narzekaczom i krzykaczom, jakich w Internecie jest pełno
JS News: Jobs
Ofert jest dużo, a pracodawcy robią wszystko, by ściągnąć Cię do teamu. Podaje się m.in. widełki płacowe.
Unikaj pychy i arogancji.Bądź pewny siebie, lecz pamiętaj o pokorze.
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 konferencje/spotkania?
WARSAWPOZNAN
CRACOWWROCLAW
GDANSK
LODZ
KATOWICE
SZCZECIN
LUBLIN
BIALYSTOK
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://diveintohtml5.info/index.html
Autorytety?
http://christianheilmann.com/http://jakearchibald.com/
Inne?
http://uptodate.frontendrescue.org/
W Internecie łatwo o przeczytanie bzdur i plotek. Słuchaj specjalistów, unikaj anonimów i agresywnych
frustratów.
Nie żyj życiem innych...
•“Najpierw studia, potem praca”•“Na lekarza byś się wyuczył, to jest zawód”•“Nie wiem, ja bym nie dała rady tak żyć...”•“W Polsce się nie da, sami złodzieje”