Czemu CMSy?<\/b><\/p>\n\n\n\n WordPress posiada du\u017c\u0105 spo\u0142eczno\u015b\u0107, co opr\u00f3cz wsparcia oferuje wi\u0119ksz\u0105 swobod\u0119 i mo\u017cliwo\u015bci prezentacji rozwi\u0105za\u0144 typu blog czy artyku\u0142y, a tego w\u0142a\u015bnie wymagamy od naszej nowej strony \u2013 m\u00f3wi Krzysztof. <\/p>\n<\/blockquote>\n\n\n\n <\/span><\/p>\n\n\n\n Do obowi\u0105zk\u00f3w front-end dewelopera nale\u017cy przede wszystkim opracowanie i optymalizowanie element\u00f3w widocznych dla u\u017cytkownika, kt\u00f3ry korzysta z rozwi\u0105zania<\/strong>. W optymalizacj\u0119 tego contentu wchodz\u0105 spos\u00f3b prezentacji sk\u0142adnik\u00f3w strony, ale te\u017c mniej oczywiste rzeczy, takie jak szybko\u015b\u0107 \u0142adowania strony i obliczanie warto\u015bci dla animacji.<\/p>\n\n\n\n Krzysztof, pracuj\u0105cy aktualnie w G4N nad now\u0105 stron\u0105, zajmowa\u0142 si\u0119 programowaniem hobbystycznie od m\u0142odo\u015bci. Profesjonalnie informatyk\u0105 zaj\u0105\u0142 si\u0119 trzy lata temu, gdy uko\u0144czy\u0142 studia podyplomowe ze specjalizacj\u0105 programisty front-endowego i zdoby\u0142 pierwsz\u0105 prac\u0119 w zawodzie.<\/p>\n\n\n\n Front-endowcy wchodz\u0105 do akcji po tym jak ju\u017c zawi\u0105\u017ce si\u0119 plan, okre\u015blaj\u0105cy w jaki spos\u00f3b ma powstawa\u0107 sfera element\u00f3w widocznych dla u\u017cytkownika \u2013 podkre\u015bla Krzysztof.<\/p>\n<\/blockquote>\n\n\n\n <\/span><\/p>\n\n\n\n <\/p>\n\n\n\n Front-end developer realizuje wcze\u015bniej ustalone projekty na podstawie layout\u00f3w stworzonych i przekazanych im przez grafik\u00f3w i UX<\/u><\/a> designer\u00f3w. Do nich nale\u017cy dob\u00f3r najbardziej kompatybilnych format\u00f3w plik\u00f3w, przygotowywanie szablon\u00f3w parametr\u00f3w tekstu, blok\u00f3w tre\u015bci, kolorami i elementami t\u0142a jak i automatycznie generowanymi tre\u015bciami.<\/p>\n\n\n\n W Responsive Web Design chodzi o wygod\u0119 i satysfakcj\u0119 u\u017cytkownika. \u0141\u0105czy si\u0119 to mocno z podej\u015bciem Mobile First, kt\u00f3re priorytetyzuj\u0119 doznania os\u00f3b \u0142\u0105cz\u0105cych si\u0119 z internetem z urz\u0105dze\u0144 mobilnych. Krzysztof, kt\u00f3ry pracuje nad wersj\u0105 mobiln\u0105 nowej strony Global4Net, podkre\u015bla, i\u017c dzi\u0119ki temu podej\u015bciu wie ju\u017c jak b\u0119dzie wygl\u0105da\u0142 projekt w wersji mobilnej i jak b\u0119dzie skalowany do wersji desktopowej. Znaj\u0105c tylko minimaln\u0105 i maksymaln\u0105 szeroko\u015b\u0107 uk\u0142adu strony, front-end developer jest w stanie, w trakcie rozpocz\u0119cia pracy stworzy\u0107 tak\u0105 stron\u0119, kt\u00f3ra u\u0142atwi nam prac\u0119 i odwzorowuje prototyp, czyli spe\u0142ni wszystkie zak\u0142adane z g\u00f3ry cele.<\/p>\n\n\n\n To r\u00f3wnie\u017c jest \u015bci\u015ble powia\u017cane z zadaniami, kt\u00f3re ma front-end developer. W pozycjonowanie stron internetowych wchodz\u0105 dzia\u0142ania takie jak SEO, czy w\u0142a\u015bnie kodowanie zgodnie ze standardami RWD i Mobile First, kt\u00f3re od kilku lat s\u0105 preferowane przez algorytmy Google’a<\/u><\/a>. Pomocnymi praktykami s\u0105, np. tworzenie map stron, opieka nad metadanymi i atrybutami element\u00f3w obecnymi na stronie jak i implementacja PWA<\/u><\/a>, kt\u00f3ra zapewnia dodatkowe zalety.<\/p>\n\n\n\n Front-end developer pracuje r\u00f3wnie\u017c przy integracji system\u00f3w w celu osi\u0105gni\u0119cia synergii. Integracja polega na doprowadzeniu do wsp\u00f3\u0142pracy dw\u00f3ch odr\u0119bnych system\u00f3w i przesy\u0142u danych mi\u0119dzy nimi. Ma to na celu usprawnia\u0107 sp\u00f3jno\u015b\u0107 danych, wygod\u0119 u\u017cytkowania systemu, zar\u00f3wno z poziomu konsumenta jak i administratora, a tak\u017ce przep\u0142yw informacji.<\/p>\n\n\n\n Mimo, \u017ce w software house’ach zazwyczaj istniej\u0105 osobne dzia\u0142y odpowiedzialne za testowanie oprogramowania i rozwi\u0105za\u0144, nie znaczy to, \u017ce na ich barki mamy zrzuca\u0107 niesprawdzony kod i strony. Do obowi\u0105zk\u00f3w front-end developera nale\u017cy zatem sprawdzanie jak wprowadzone przez niego elementy i zmiany s\u0105 wczytywane. Front-end dokonuje tego poprzez \u0142adowanie tre\u015bci na r\u00f3\u017cnych urz\u0105dzeniach, obs\u0142uguj\u0105cych r\u00f3\u017cne systemy. Musi sprawdzi\u0107 jak dana strona otwierana jest otwierana przez inne przegl\u0105darki i czy otwiera si\u0119 we wszystkich trybach. Mo\u017ce to brzmie\u0107 jak \u017cmudne zaj\u0119cie front-end developera jednak poprawnie wykonane przynosi efekt w postaci satysfakcji u\u017cytkownika.<\/p>\n\n\n\n Czasami podstawowa oferta platformy e-Commerce czy CMS nie zaspokaja naszych potrzeb. Wtedy prezentujemy je front-end deweloperowi i wsp\u00f3lnie wybieramy rozwi\u0105zania, kt\u00f3re odpowiadaj\u0105 nam i mog\u0105 by\u0107 \u0142atwo wprowadzone w struktur\u0119 funkcjonuj\u0105cego ju\u017c systemu. Mog\u0105 to by\u0107 wtyczki, dodatki lub ca\u0142e modu\u0142y. P\u00f3\u017aniej front-end deweloper odpowiedzialny jest za dostosowanie wybranych rozwi\u0105za\u0144 i za ich utrzymanie.<\/span><\/p>\n\n\n\n Po pierwsze harmonijna wsp\u00f3\u0142praca kodu z elementami graficznymi b\u0119d\u0105cymi w sk\u0142adzie witryny<\/strong>. Pomimo, \u017ce platformy CMS nie wymagaj\u0105 znajomo\u015bci j\u0119zyk\u00f3w programowania, front-end developer powinien nadal posiada\u0107 wiedz\u0119 z zakresu kodowania. Opr\u00f3cz tego kluczowym jest tak\u017ce umiej\u0119tne pos\u0142ugiwanie si\u0119 programami graficznymi, gdy\u017c dopiero znaj\u0105c ich dzia\u0142anie, front-end developer mo\u017ce w pe\u0142ni poj\u0105\u0107 jakim mechanizmom mog\u0105 ulega\u0107 pliki graficzne wt\u0142oczone w interfejs aplikacji lub strony internetowej.<\/p>\n\n\n\n Poza indywidualnymi umiej\u0119tno\u015bciami i kompetencjami wa\u017cn\u0105 rol\u0119 pe\u0142ni tak\u017ce komunikacja z reszt\u0105 zespo\u0142u. Front-end deweloperzy pracuj\u0105cy nad now\u0105 stron\u0105 G4N codziennie wymieniali si\u0119 sugestiami dotycz\u0105cymi rozwi\u0105za\u0144. Pomog\u0142o to w zaprojektowaniu jej w taki spos\u00f3b, aby proces produkcji odpowiada\u0142 potrzebom i mo\u017cliwo\u015bciom pracownik\u00f3w zaanga\u017cowanym w projekt. Takie podej\u015bcie tyczy si\u0119 r\u00f3wnie\u017c innych projekt\u00f3w wdra\u017canych przez software house Global4Net. Praca we front-endzie to nie samotne wklepywanie kodu, tylko ci\u0105g\u0142a wymiana pomys\u0142\u00f3w i propozycji jak mo\u017cna co\u015b usprawni\u0107, co\u015b doda\u0107<\/strong>. W tej pracy liczy si\u0119 efekt ko\u0144cowy, jego jako\u015b\u0107 i odbi\u00f3r u\u017cytkownika.<\/p>\n\n\n\n Kluczowa jest komunikacja. To nie jest postawa typu: masz i r\u00f3b, bo to b\u0119dzie jak praca na ta\u015bmie. A tu chodzi o efekt, jako\u015b\u0107 i odbi\u00f3r u\u017cytkownika \u2013 m\u00f3wi Krzysztof. <\/p>\n<\/blockquote>\n\n\n\n <\/p>\n\n\n\n Trzeci\u0105 po\u017c\u0105dan\u0105 praktyk\u0105 dobrego front-endu jest przemy\u015blenie logiki ca\u0142ego projektu zanim front-end deweloperzy przyst\u0105pi\u0105 do pracy<\/strong>. Innymi s\u0142owy chodzi o gruntowne przygotowanie strategii wdra\u017cania rozwi\u0105za\u0144 zaproponowanych odg\u00f3rnie przez klienta. W sk\u0142ad tej strategii powinny wchodzi\u0107 wszystkie mo\u017cliwo\u015bci i warunki spe\u0142nienia projektu, \u017ceby deweloperzy byli przygotowani na potencjalne problemy. Jak podkre\u015bla Krzysztof, brak przemy\u015blenia w okresie planowania projektu, mo\u017ce sko\u0144czy\u0107 si\u0119 pojawieniem problemu, na kt\u00f3ry nie jeste\u015bmy przygotowani i mo\u017ce on doprowadzi\u0107 do rozwoju liczby potkni\u0119\u0107 i usterek, kt\u00f3re wyd\u0142u\u017c\u0105 czas. Tak naprawd\u0119 planowanie powinno nam zaj\u0105\u0107 jak najwi\u0119cej czasu, po to, by w\u0142a\u015bciwa produkcja zaj\u0119\u0142o nam go jak najmniej.<\/p>\n\n\n\n Narz\u0119dzia jakich u\u017cywa front-end developer powinny by\u0107 zale\u017cne od typu projektu nad kt\u00f3rym aktualnie pracuje. Podczas pracy nad nad now\u0105 stron\u0119 Global4Net, Krzysztof wykorzystywa\u0142 programy Adobe XD<\/strong> i Microsoft Visual Studio<\/strong>. Aplikacja od Adobe, umo\u017cliwi\u0142a mu wgl\u0105d w pliki przygotowywane bezpo\u015brednio przez UX designer\u00f3w<\/u><\/a> i grafik\u00f3w<\/u><\/a>. Dzi\u0119ki temu m\u00f3g\u0142 dopasowa\u0107 kompatybiln\u0105 strategi\u0119 i rozwi\u0105zania celem zaimplementowania danych element\u00f3w w sk\u0142ad strony internetowej. Wgl\u0105d do makiet funkcjonalnych i layout\u00f3w pozwoli\u0142 mu na odpowiednie przekodowanie danych i przygotowanie uk\u0142adu strony.<\/p>\n\n\n\n Natomiast narz\u0119dzie Visual Studio pozwala na kontynuowanie pracy front-end developera poza warstw\u0119 graficzn\u0105 i ingerencj\u0119 po stronie kodowej. Chc\u0105c pracowa\u0107 we front-endzie warto pozna\u0107 te\u017c narz\u0119dzia takie jak Photoshop<\/strong>, a je\u015bli chodzi o stron\u0119 programowania, jednymi z najpopularniejszych bibliotek s\u0105 React<\/u><\/a> i Vue.js<\/u><\/a> a tak\u017ce Angular o kt\u00f3rym pisali\u015bmy w tym artykule<\/u><\/a>. Natomiast najcz\u0119\u015bciej wykorzystywanymi j\u0119zykami s\u0105 tak jak napisali\u015bmy na pocz\u0105tku: HTML<\/strong>, CSS<\/strong>, JavaScript<\/strong>. S\u0105 one przydatne przy pracowaniu nad takimi rozwi\u0105zaniami jak PWA<\/u><\/a>, kt\u00f3re coraz cz\u0119\u015bciej uznawane jest za obowi\u0105zkowe wdro\u017cenie w e-Commerce.<\/p>\n\n\n\n Front-end i back-end jest jak jing-jang<\/em>: jedno nie dzia\u0142a bez drugiego. Jak podkre\u015bla Krzysztof, podczas wdra\u017cania wszelkich rozwi\u0105za\u0144 w G4N, front-endowcy utrzymywali komunikacje z back-endowcami. To w\u0142a\u015bnie ta wsp\u00f3\u0142praca jest odpowiedzialna za prawid\u0142owy przep\u0142yw informacji pochodz\u0105cych z serwera na stron\u0119 widoczn\u0105 dla u\u017cytkownik\u00f3w.<\/p>\n\n\n\n Wsp\u00f3\u0142praca z back-endem wygl\u0105da w ten spos\u00f3b: ‘Co mog\u0119 ci da\u0107 i co ty z tym zrobisz co usprawni moj\u0105 dalsz\u0105 prac\u0119 nad t\u0105 rzecz\u0105.’ Na koniec tej wymiany wszyscy powinni by\u0107 zadowoleni \u2013 front, back, admin i klient \u2013 wyja\u015bnia Krzysztof. <\/p>\n<\/blockquote>\n\n\n\n Bez w\u0105tpliwo\u015bci internet od dawna jest g\u0142\u00f3wnym kana\u0142em komunikacji i \u017cycia ludzko\u015bci. Dlatego dobrym ruchem jest zapoznanie si\u0119 z technologiami i mechanizmami za pomoc\u0105 kt\u00f3rych funkcjonuje. Zadali\u015bmy pytanie naszemu specjali\u015bcie co powinien umie\u0107 frontend developer?Krzysztof podkre\u015bla, \u017ce dzi\u0119ki internetowi materia\u0142\u00f3w do uczenia si\u0119 fachu front-end dewelopera nie brakuje. Trzeba tylko \u201echcie\u0107 i mie\u0107 na to czas\u201d i zacz\u0105\u0107 aplikowa\u0107 na stanowiska o nazwie Junior front-end developer. A najlepiej na pocz\u0105tek zna\u0107 podstawy HTML CSS i Javascript, poniewa\u017c we front-endzie nie ma czego\u015b takiego jak opanowanie ca\u0142ego materia\u0142u.<\/p>\n\n\n\n Co chwila co\u015b si\u0119 zmienia, wchodzi jedna aktualizacja, drugi patch \u2013 nic nie jest sta\u0142e. Ale dzi\u0119ki internetowi jest mo\u017cliwe nad\u0105\u017canie za tempem zmian \u2013 m\u00f3wi Krzysztof.<\/span><\/p>\n<\/blockquote>\n\n\n\n <\/span><\/p>\n\n\n\n Dla zwyk\u0142ego u\u017cytkownika budowa strony mo\u017ce wydawa\u0107 si\u0119 prosta. W ko\u0144cu, parafrazuj\u0105c powiedzenie, jak wygl\u0105da witryna ka\u017cdy widzi. To, czego nie wida\u0107, to front-end \u0142\u0105cz\u0105cy elementy takie jak tekst czy miniaturki obecne na stronie z oddalonymi od nas, setki lub tysi\u0105ce kilometr\u00f3w, serwerami. Aby ustali\u0107 jak dzia\u0142a enigmatyczny \u201eprzedni-koniec\u201d i czym zajmuj\u0105 si\u0119 front-endowcy zapyta\u0142em […]<\/p>\n","protected":false},"author":12,"featured_media":3648,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[197],"tags":[16],"yoast_head":"\n\n
Platformy CMS dzia\u0142aj\u0105 bardzo dobrze przy rozwi\u0105zaniach, kt\u00f3re poddawane b\u0119d\u0105 cz\u0119stym aktualizacjom. Ponadto platformy te nie wymagaj\u0105 znajomo\u015bci j\u0119zyk\u00f3w, gdy\u017c obs\u0142ugiwane s\u0105 w skrypcie, kt\u00f3ry w pewnej mierze automatyzuje zmiany w kodzie<\/strong>. Usprawnia to funkcjonowanie ca\u0142ego front-endu a programi\u015bci mog\u0105 nanosi\u0107 edycje do poszczeg\u00f3lnych stron niezale\u017cnie od innych. Usprawnia to prac\u0119, poniewa\u017c programista mo\u017ce zmieni\u0107 funkcjonowanie jednego lub kilku element\u00f3w, nie musz\u0105c martwi\u0107 si\u0119 o to jak zareaguje na to reszta kodu na stronie. Pomaga to usuwa\u0107 pojedyncze usterki, takie jak \u017ale pokazuj\u0105ce si\u0119 grafiki, uszkodzony tekst lub niedzia\u0142aj\u0105ca animacja. Oczywi\u015bcie najpierw trzeba doj\u015b\u0107 czemu dana rzecz nie funkcjonuje tak jak powinna, co zazwyczaj zabiera lwi\u0105 cz\u0119\u015b\u0107 czasu pracy. Ale jak sam Krzysztof m\u00f3wi \u201efront-end to 70% planowania i 30% akcji.\u201d<\/strong><\/p>\n\n\n\nCzym zajmuje si\u0119 front-end deweloper?<\/strong><\/h3>\n\n\n\n
\n
Jak sam m\u00f3wi, front-endowiec nie musi by\u0107 zaznajomiony z trendami graficznymi i pos\u0142ugiwa\u0107 si\u0119 programami graficznymi na eksperckim poziomie, jednak jego praca polega na \u0142\u0105czeniu programowania z dbaniem o szat\u0119 graficzn\u0105. Co jeszcze wchodzi w zakres jego obowi\u0105zk\u00f3w przy budowie struktur stron internetowych?<\/p>\n\n\n\n![\"front](\"https:\/\/global4net.com\/wp-content\/uploads\/2021\/03\/front-end-developer-1.jpeg\")
<\/a><\/figure>\n\n\n\nStylowanie na podstawie otrzymanych layout\u00f3w<\/strong><\/h3>\n\n\n\n
Budowa responsywno\u015bci (RWD)<\/strong><\/h3>\n\n\n\n
Optymalizacja pod k\u0105tem pozycjonowania<\/strong><\/h3>\n\n\n\n
Integracja system\u00f3w<\/b><\/h3>\n\n\n\n
Testowanie stron internetowych<\/b><\/h3>\n\n\n\n
Budowa wtyczek, dodatk\u00f3w i modu\u0142\u00f3w do aplikacji internetowych<\/strong><\/h3>\n\n\n\n
Jakie s\u0105 cechy dobrze zrobionego front-endu?<\/strong><\/h3>\n\n\n\n
\n
Jakich technologii u\u017cywa si\u0119 podczas pracy nad front-endem?<\/strong><\/h3>\n\n\n\n
Front-end a back-end<\/b><\/h3>\n\n\n\n
\n
<\/span><\/h2>\n\n\n\n
Jak zosta\u0107 front-end developerem ? <\/strong><\/h3>\n\n\n\n\n
Nie nale\u017cy my\u015ble\u0107, \u017ce pracana stanowisku frontend developer to praca monotonna, bo wpisuje si\u0119 linijki kodu. Bardziej przypomina ona rozwi\u0105zywanie ci\u0105gle pojawiaj\u0105cych si\u0119 zagadek i zagwozdek technicznych. Krzysztof zauwa\u017ca, \u017ce front-end zaskakuje niewa\u017cne od d\u0142ugo\u015bci sta\u017cu. Problemy mo\u017cna w rozwi\u0105za\u0107 w przer\u00f3\u017cny spos\u00f3b, jednak nale\u017cy pami\u0119ta\u0107, \u017ce jedne s\u0105 bardziej a inne mniej efektywne. Jest to praca, w kt\u00f3rej niepozorny problem mo\u017ce nas doprowadzi\u0107 do bardzo ciekawego rozwi\u0105zania. Podobnie jak w pracy grafika \u2013 wszystko mo\u017ce zacz\u0105\u0107 si\u0119 od jednej kreski.<\/p>\n","protected":false},"excerpt":{"rendered":"