TS TworcaStron.pl.

Droga frontend-developera w 2017r.

Dzisiajszy wpis miał być o czymś innym, ale kilka dni temu jeden z czytelników bloga napisał do mnie wiadomość z pytaniem (w skrócie) „jaką drogą iść jako frontend-developer?„.

Okej, zróbmy w takim razie mały przegląd obecnych technologii, które cieszą się na rynku pracy większym zainteresowaniem. Jest 6 styczeń, więc pod uwagę weźmy „trendy” z 2016 roku, które dobrze się zapowiadają.

 

Edytor

Temat trochę drażliwy ponieważ każdy ma swój ulubiony. Osobiście polecam kilka (chyba, że działasz nad wielkimi projektami i zwykły edytor nie wystarczy, wtedy bez problemu możesz szukać jakiś IDE):

Atom – który opisałem dosyć szczegółowo w 3 filmach -> Atom – najlepszy edytor dla Web Developerów [wideo]
Brackets.io
Sublime Text (płatny przy komercyjnym zastosowaniu)

 

Krok 1 – podstawy Frontend-developera

Zacznijmy od podstaw. Dopiero bierzesz się za naukę frontendu? Oto co musisz umieć, całkowite podstawy:

Wiele osób mówi, że czyste JS jest niepotrzebne, że lepiej od razu wziąć się za jQuery. Ja nie jestem do tego przekonany. JS będzie z pewnością istniało dłużej niż jQuery, zresztą znająć czysty JS nie musisz angażować różnych bibliotek/frameworków do prostych czynności.
Nawet jeśli myślisz, że będziesz pracować na samych frameworkach, to warto znać JS chociaż na jakimś niewygórowanym poziomie.

 

Krok 2 – kilka usprawnień:

Usprawniamy CSS: Less/Sass

Różnice pomiędzy nimi opisałem tutaj -> CSS, LESS, SASS/SCSS, który wybrać? W skrócie, dobrze zacząć do Lessa ponieważ jest prosty i maksymalnie zbliżony budową do CSS, następnie do większych projektów dobrze zaprząc Sassa, który ma znacznie większe możliwości.

Usprawniamy HTML/CSS/JS: Bootstrap

mega popularny i wcale się nie dziwię ponieważ znacznie przyśpiesza pracę. Nawet nie chodzi o wszystkie klasy, ostylowane przyciski czy tabele. Bardzo istotne jest tutaj budowanie strony na siatce (tak jak się je zazwyczaj projektuje w Photoshopie), oraz załatwienie 80% jeśli chodzi o przystosowanie do urządzeń mobilnych.

Usprawniamy JS: jQuery

czyli najpopularniejsza biblioteka JS. Zawiera gotowe funkcje najczęściej wykonywanych operacji. Dzięki temu zamiast pisać 50 linijek kodu aby coś obsłużyć, możesz skorzystać z kilku funkcji, które prawdopodobnie są już napisane.

__

Sprawa z jQuery w niektórych kręgach zaczyna robić się trochę kłopotliwa. Ostatnimi czasy powstało tyle świetnych frameworków, że o jQuery mówi się z mniejszym entuzjazmem. W dalszym ciągu jest używane przez ogromną ilość osób i firm, szczególnie u nas, dlatego warto go znać. Jednak nie byłbym takim fanem, aby próbować wyuczyć się go do perfekcji, zaniedbując przez to inne biblioteki/frameworki.

 

Krok 3 – frameworki JS

Ostatnimi czasy frameworki wprowadzające wzorzec MVC do języka JavaScript zrobiły furorę. Bardzo dobrze ponieważ jeszcze bardziej oddziela to stronę kliencką od serwerowej, ułatwia testowanie kodu czy niejako oddziela samą warstwę DOM od części, która nią manipulują.

AngularJS – obecnie bardzo popularny framework wspierany przez Google. Bardzo uproszczając, można powiedzieć, że posiada taki lepszy kompilator HTMLa, dzięki czemu możemy budować w łatwiejszy sposób, bardziej dynamiczne aplikacje.

ReactJS – co prawda jest to biblioteka jednak jej działanie często jest porównywane do wzorca MVC. Rozwijany przez developerów znanych portali (Facebook, Instagram), co daje nam jakąś pewność, że będzie rozwijany (podobnie jak Angular). Stosowany tam gdzie wymagana jest dynamiczana zmiana danych (znowu tak samo jak Angular), przede wszystkim na większych stronach. Obecnie jest to chyba nawet lepsza alternetywa dla Angulara, jednak na naszym rynku pracy raczej Angular jest częściej wymagany.

 

Krok 4 – testy

Wspomniałem wcześniej, że nowe frameworki i biblioteki JS wspomagają testy to warto z czasem te testwy wprowadzić. Tutaj bez rozpisywania. Wybrać możemy kilka popularniejszych rozwiązań:

Enzyme
Mocha
Karma

 

Dodatkowo: automatyzacja pracy i zarządzanie kodem

Warto dorzucić kilka technologii, które będą bardzo przydatne. Umieściłem je na końcu ponieważ nie ma najlepszego momentu na ich naukę. Dobrze jest się za nie wziąć wtedy gdy będziesz czuł, że coś takiego będzie już przydatne.

Gulp.js, Grunt.js – niezależnie który wybierzesz, oba służą do automatyzacji pracy (chociaż Gulp jest raczej prostszy). Czyli… potrafią wykonywać takie zadania jak, np. minifikowanie i łączenie skryptów oraz plików css, kompilować pliki Sass, odświeżać okno przeglądarki przy wprowadzaniu zmian na stronie czy uruchamiać serwer do podglądu pracy.

Webpack (JS), Browserify  (JS) – przede wszystkim pozwala zachować porządek w kodzie i rozbić go na mniejsze moduły, które są ładowane na żądanie. Dzięki temu możemy ładować na stronie tylko wybrane części kodu w mniejszych ilościach plików (co przyśpiesza ładowanie strony).

 

A co z Node.js?

Postanowiłem, że nie opiszę tutaj Noda, mimo iż opiera się na języku JavaScipt to jednak  w dalszym ciągu należy pamiętać, jest to coś, co ma działać po stronie serwera – czyli w backendzie.
Samego Node.js oczywiście dobrze znać, ponieważ w wielu wspomnianych wcześniej technologiach jest on potrzebny.

 

Jesteście innego zdania? Piszcie śmiało w komentarzach czego wg was, warto uczyć się w rozpoczynającym się roku! 🙂

7 wtyczek do Twojej przeglądarki, które ułatwią pracę

Każdy stosuje jakieś wtyczki, czy to w Chromie, Operze czy Firefoxie. Zdecydowana większość stworzona jest pod wszystkie przeglądarki. Dziś chcę pokazać kilka, które mi przydają się na co dzień.

Wappalyzer

wappalyzer - 7 wtyczek do Twojej przeglądarki, które ułatwią pracę

Rozpoznaje CMS na jakim postawiona jest strona. Dodatkowo wykrywa większość zastosowanych technologii, np. w jakim języku tworzana jest strona, czy posiada statystyki Googla, frameworki, czasami skrypty, Google Fonts itd. Ostanio dzięki temu wiedziałem wszystko o stronie klienta zanim ten zdążył ją opisać.

 

Font Face Ninja

fonfaceninja - 7 wtyczek do Twojej przeglądarki, które ułatwią pracę

Bardzo przyjemna wtyczka, która rozpoznaje wskazane myszką fonty. Oprócz nazwy fonta dostajemy info. o rozmiarze, wysykości linii czy odległości między znakami.

 

WebDeveloper

webdeveloper - 7 wtyczek do Twojej przeglądarki, które ułatwią pracę

Wtyczka dla każdego web developera. Bardzo rozbudowana. Wtyczka jest już stara i chyba nawet od dawna nie aktualizowana. Jednak mimo to cały czas może bez problemu z niej korzystać .Daje nam wiele możliwości:

Możliwości tej wtyczki są naprawdę ogromne i można byłoby na jej temat napisać osobny wpis.

 

Full Page Screen Capture

fullpagecapture - 7 wtyczek do Twojej przeglądarki, które ułatwią pracę

Jest bardzo prosta i ma jedno zadanie: zrobić screena całej strony, od góry do dołu. Nie ważne jak długa by była. Do czego się może przydać? Często zanim zaczynam pracę przeglądam dziesiątki stron i cześć chcę sobie zapisać gdzieś w folderze do późniejszego wglądu. Taka teczka inspiracji. Nie muszę bawić się w robienie i łączenie screenów. Ta wtyczka robi zdjęcie całej strony jednym kliknięciem.

 

Eye Dropper

eyedropper - 7 wtyczek do Twojej przeglądarki, które ułatwią pracę

Miałeś sytuację, że chciałeś pobrać ze strony jakiś konkretny kolor? Eye Dropper tworzy próbnik, dzięki któremu możesz zobaczyć składowe każdego koloru na stronie bez zabawy w plikach CSS. Co więcej pozwala pobrać kolory także ze zdjęć czy czegokolwiek innego.

 

Image Downloader

imagedownloader - 7 wtyczek do Twojej przeglądarki, które ułatwią pracę

Wtyczka dosyć prosta ale bardzo przydatna. Pozwala pobrać za kilkoma kliknięcami wszystkie zdjęcia ze strony. Jeżeli miałeś kiedyś klienta, mówiącego „niech Pan pobierze sobie nasze zdjęcia ze strony, my nie wiemy jak się do nich dostać” – to w końcu możesz odejść bez nerwów i je pobrać.

 

Dimensions

dimensions - 7 wtyczek do Twojej przeglądarki, które ułatwią pracę

Fajna wtyczka, która pozwala na szybie sprawdzenie odległości pomiędzy elementami na stronie.

 

O AdBlocku czy Firebugu nie wspiminam. Myślę, że zna i używa je praktycznie każdy:)

Używacie innych ciekawych wtyczek? Dajcie znać w komentarzach;)

Dlaczego Google Fonts i jak je stosować

Poruszmy po krótce temat niestandardowych fontów na stronie. Coraz mniej jest osób godzących się na kilka wbudownych w każdy system (Arial, Verdana Times New Roman…). Dzięki dobrodziejstu @font-face możemy dołaczyć do strony każdy font i tak jest już od dłuższego czasu. Obecnie większym pytaniem może być „skąd te fonty legalnie pobierać?”

Jeżeli jesteś zainteresowany teorią rozwoju czczionek zapaszam do wpisu „Trochę o typografii na stronach wwww”

 

Google Fonts

Google Fonts jest naprawdę świetnym narzędziem z kilku powodów. Obecnie do dyspozycji mamy 810 rodzin, czyli takich paczek.
Standardowe serwisy mają segregację ze względu na rodzaj czyli, np. stylizowane na ręczne, szeryfowe, bezszeryfowe itd.. Tutaj ich wyszukiwanie możemy filtrować ze względu na:

Oprócz dosyć niestandardowego filtrowania mamy również do dyspozycji wybór bardziej tradycyjny:

Do tego dochodzi segregowanie wg popularności, daty dodania, alfabetycznie – standard. Możemy również sprawdzić jak teksty będą prezentowały się na innych kolorach tła (do wyboru niebieski, czarny, biały, zółty).

 

Jak znaleźć polskie fonty?

To jest coś co również odróżnia Google Fonts od innych większych „bibliotek”. Google daje nam możliwość filtrowania ze względu na JĘZYK. Nie mam na myśli, że wyszuka nam „język polski” ale to nic, ponieważ to i tak oznacza koniec wpisywania w wyszukiwarkę „polskie darmowe fonty” oraz przeglądania dafont.com czy wybrany font ma nasze znaki diakrytyczne.

Wystarczy zaznaczyć język „Latin Extended„. Dzięki temu Google odrzuca zestawy nieprzystosowane do języka łacińskiego rozszerzonego. Nie daje nam to 100% pewności na polskie znaki, jednak dzięki podglądowi live, możemy wpisać śźćśłó i na bierząco sprawdzać czy dany font na pewno obsługuje nasze znaki.

 

Wszystkie fonty są darmowe

Wszystkie fonty Google Fonts posiadają licencję open source, więc bez strachu możemy ich używać zarówno na stronach internetowch oraz na jakichkolwiek projektach graficznych.

 

Oszczędność

Przy wyborze fontów możemy zaznaczyć, których stylów potrzebujemy. W ten sposób załączyamy tylko to co faktycznie chcemy.

Oszczędzamy czas. Aby zaimplementować wybrany font potrzebujemy dosłownie chwili. Wystarczy dodać jedną linijkę w sekcji <head> lub do pliku CSS (jest to jednocześnie bardzo wygodne).

Na upartego możemy powiedzieć, że oszczędzamy miejsce i transfer, ponieważ fonty są zaciągane z serwerów Googla

 

Jak użyć Google Fonts krok po kroku

Obsługa jest banalnie prosta.

  1. Wchodzimy na stronę https://fonts.google.com/ i szukamy naszego fontu. Po prawej stronie jest sekcja filtrowania. Na górze możemy zmienić kolor tła. Natomiat klikająć na tekst – możemy od razu zmieniać jego treść i sprawdzić czy obsługuje polskie znaki.googlefonts1 - Dlaczego Google Fonts i jak je stosować
  2. Masz? Teraz wystarczy kliknąć ikonę „+” przy nazwie. Na dole ekranu pojawi się panel z informacją.googlefonts2 - Dlaczego Google Fonts i jak je stosować
  3. Po kliknięciu w ten panel rozwiną nam się wszystkie ustawienia i informacje. Przechodząć do zakładki „CUSTOMIZE” możemy zaznaczyć style (czy chcemy grubsze, pochylone, zwężone itd.) oraz co ważne język „Latin Extended„, o którym wspomniałem w poprzednim punkcie.googlefonts3 - Dlaczego Google Fonts i jak je stosować
  4. Wracamy do zakładki „EMBED„, tam jest linijka, którą musimy załączyć w sekcji <head> lub, coś co ja zawsze wybieram: w zakładce „@IMPORT” dodajemy linijkę, którą należy załączyć na naszego pliku CSS. Poniżej mamy przykład zastosowania fontu.googlefonts4 - Dlaczego Google Fonts i jak je stosować
  5. Gotowe! Możemy jeszcze pobrać fonty na komputer lub podejrzeć wszystkie opcje:

    googlefonts5 - Dlaczego Google Fonts i jak je stosować

Atom Edytor – Triki i skróty, które przyśpieszą pracę [wideo]

Dziś już ostatni (raczej) odcinek o Atomie. Coś co jeszcze bardziej przyśpieszy Twoją pracę: przydatne triki i skróty. Z racji, że na poprzednich odcinak było całkiem sporo informacji, to w końcu udało mi się nagrać jakiś krótszy filmik 😀

Nie jest to jakaś zaawansowana czy tajemna wiedza, jednak jestem przekonany, że dla wielu osób ten odcinek będzie przydatny:) Pokazuję na nim:

Jeżeli nie widziałeś poprzednich odcinków to zapraszam:

Atom edytor – Triki i skróty:

Podstawy HTML5

To nie jest kurs ani poradnik HTMLa. Chciałem poruszyć tylko kilka kwestii, które być może nie zawsze są jasne.

Dzisiejszy wpis będzie raczej dla laików jeśli chodzi o HTML5. Mimo, że sama piąka htmla już trochę istnieje to do tej pory można bez problemu znaleźć strony, które źle z niej korzystają lub w dalszym ciągu mieszają z xHTML. Postaram się przedstawić podstawy składni, sktrukurę etc. Jeżeli nie wiesz dlaczego właśnie HTML5 a nie jego podobna wersja xHTML to zapraszam do wpisu „Czy HTML5 jet naprawdę taki fajny?”

Podstawowa struktura

[html]
<!DOCTYPE html> <!– linijka mówi o tym, że owy dokument jest dokumentem typu HTML–>
<html>
<head> <!– nagłówek –>
<meta charset="utf-8"> <!– kodowanie strony, w 90% przypadów będzie to UTF-8 –>
<title>Tytuł strony</title> <!– tytuł strony –>
</head> <!– koniec nagłówka nagłowka –>
<body>
zawartość strony…
</body>
</html>
[/html]

Strukturę pewnie zna każdy, ale żeby dopełnić formalności kilka linijek, które standardowo umieszcza się w sekcji nagłowka:

[html]<meta name="description" content="">[/html]

– opis strony (widoczny w Google), ma wpływ na pozycjonowanie

[html]<meta name="keywords" content="">[/html]

– słowa kluczowe, ma wpływ na pozycjonowanie

[html]<meta name="viewport" content="width=device-width, initial-scale=1">[/html]

– linijka dodawana gdy strona ma być responsywna (aby zwyczajnie nam się automatycznie nie zmniejszała na innych urządzeniach)

[html]<link rel="stylesheet" href="style.css">[/html]

– link do naszego pliku CSS

[html]<script src="main.js"></script>[/html]

– link do pliku JS

[html]<link href="img/favicon.png" type="image/x-icon" rel="shortcut icon">[/html]

– link do favicona (czyli ikonki wyświetlanej na kartach przeglądarki)

To są takie stałe, podstawowe elementy, które znajdują się praktycznie na każdej stronie. Tego jest w internetach bardzo dużo, więc żeby się nie powtarzać przejdźmy do czegoś konkretniejszego…

Domykać czy nie domykać?

Do tej pory istnieje pozostałość po języku xHTML czyli zamknięte tagi krótkie, np.  <br/> <img…./> <input /> również wszystkie meta tagi w nagłówkach były domykane, np. <meta charset=”utf-8″ …/>. HTML5 nie jest kontynuacją xHTMLa, ale jest z nim kompatybilny, dlatego zamykanie tagów nie jest wymagane (ale wciąż dozwolone). Oznacza to więc, że zarówno <br/> jak i <br> są poprawne.
Uwaga bo to nie wszystko, możemy nawet nie domykać kilku tagów DŁUGICH, np. tagu <p>. Taki kod będzie w dalszym ciągu poprawny:

[html]
<div>
<p>ala ma kota
</div>
[/html]

Kod jest poprawny jednak osobiście polecam takie tagi zamykać, ze względu na czytelnosć.

Do pewnego etapu większość osób i tak zamykała tagi KRÓTKIE ponieważ nie wszystkie przeglądarki wspierały HTML5. Jest to raczej przeszłość i jeżeli chcesz tworzyć strony w ładnych, czystym HTML5 to nie używaj zamkniętych tagów.

Duże czy małe litery

To jakie litery zastosoujemy w tagach to czysta formalność. Nie ma żadnego znaczenia na działanie kodu. Czyli wszystkie poniższe kombinajce będą działające:

[html]
<Section>…</SECTION>
<SECTION>…</section>
<section>…</section>
[/html]

Jednak dobrze trzymać się liter małych, z kilku powodów. Kod będzie czytelniejszy, łatwiejszy do pisania, domyślnie przyjęło się, że piszemy je małymi literami. To samo tyczy się atrybutów (class, id..).

Za dużo divów

Częstym błędem (który chyba opisałem w darmowym mini poradniku) jest nadużywanie divów. HTML5 wprowadził nam nowe tagi aby ten kod był bardziej logiczny. Dla tego dostaliśy takie znaczniki jak:

<header> nagłówek strony/sekcji
<section> jakaś sekcja, zbiór powiązanych ze sobą elementów
<article> jak się można domyśleć, jakaś treść, często obejmuje wpisy na blogach
<nav> nawigacja
<aside> treść niezwiązana ze stroną (mogą to być reklamy)
<footer> stopka strony/elementu
<main> główna treść na stronie
Ok. Skoro mamy tyle tagów to dlaczego tak wiele osób używa wyłącznie <div> <div> <div>?
Użyj tych znaczników raz, drugi, trzeci a będzie to już dla Ciebie normą. Przy ich stosowaniu nawet dla samego kodera jest to ułatwienie ponieważ dużo łatwiej rozeznać się w kodzie.

Strona bez html, body, head?

Na koniec mniej popularna ciekawostka. HTML5 pozwala nam na pominięcie tagów html, body i head. Czy taka konstrukcja będzie poprawna:

[html]
<!doctype html>
<title>Moja strona w HTML5</title>

<h1>Witaj na mojej stronie</h1>
<p>Lorem ipsum….</p>
[/html]

Piszę to jako ciekawostka, ponieważ o ile jest to teoretycznie dozwolone to póki co nie do końca zalecane.

CSS, LESS, SASS/SCSS, który wybrać?

Czasy używania czystego CSS powoli odchodzą w niepamięć. Nie ma się co dziwić, pracę trzeba sobie ułatwiać a nie utrudniać. Wydaje mi się, że wśród początkujących częściej używany preprocesor to Less, zgaduję, że jest to spowodowane tym, że pod Sassa musimy przygotować trochę obszerniejsze środowisko aby móc go bezproblemowo kompilować… Może warto poświęcić trochę więcej czasu na konfiguracji kompa aby móc później działać w Sass?  A może wystarczy Less?

Odpowiedz sam sobie, niezależnie czy pracujesz na czystym Cssie, czy na Lessie, czy na Sassie, czy wiesz dlaczego pracujesz właśnie na nim? Czy jest to świadoma decyzja czy bardziej nieznajomość reszty?

No ale na początku, do nauki chyba CSS?

Czemu nie, o ile ta nauka nie trwa dłużej niż jeden dzień. Wyjątkiem może też być bardzo mały plik, bo nie oszukujmy się – mało komu będzie chciało się tworzyć pliki less czy sass do stylów, które mają 50 linii kodu.

Kiedyś czasy były inne i nauka Css była niejako podstawą, ale rozwój technologii doprowadził do tego, że wg mnie nie ma sensu obecnie spędzać zbyt wiele czasu nad czystym Cssem. Spokojnie, to nie będzie 'skok na głęboką wodę’ tylko bardziej 'wejście do jacuzzi’ – preprocesory Css są naprawdę łatwe i przyjemne;)

Jeżeli dopiero zaczynasz przygodę z front-endem to mam dla Ciebie dobrą wiadomość. Jeżeli używasz Less, Sass to znasz również Css, ale nie na odwrót. Dla niektórych, działających w JS może to być zdziwieniem, ponieważ pracując jQuery – wcale nie musisz potrafić pracować na czystym JS.

Less i Sass są tak naprawdę zwykłym Cssem z kilkoma bajerami. Już tłumaczę…

Na pierwszy rzut oka

Porównajmy tak na szybko, z grubsza jak skraca się kod z każdą technologią:

Css

#container{
  width: 800px;
  margin: 0 auto;
}
#container p{
  color: #dedede;
  font-size: 21px;
}
#container p a{
  color: #FF3300; //czerwony
  font-weight: bold;
}
#container p a:hover{
  color: ##FF3333; // jasny czerwony
}

 

Less

#container{
  width: 800px;
  margin: 0 auto;
  p{
    color: #dedede;
    font-size: 21px;
    a{
      color: #FF3300; //czerwony
      font-weight: bold;
      &:hover{
        color: ##FF3333; // jasny czerwony
      }
    }
  }
}

 

Sass

#container
  width: 800px
  margin: 0 auto
  p
    color: #dedede
    font-size: 21px
    a
      color: #FF3300
      font-weight: bold
      &:hover
        color: ##FF3333

 

Skrócenie kodu to nie wszystko. Dodajemy dodatkowo wiele udogodnień takich jak: zmienne, pętle, wyrażenia logiczne, cale funkcje, domieszki…

Less

Less jest trochę bardziej rozbudowaną wersją CSS. Najważniejsza rzecz jaką wprowadza są zagnieżdżenia, dzięki temu zaczyna to trochę przypominać języki programowania, ale przede wszystkim znacząco przyśpiesza pracę. Nie będę się rozpisywał czym się charakteryzuje ponieważ jest wiele artykułów i tutoriali na ten temat, np. http://less.kursbootstrap.pl, http://lesscss.org/

Wielkim plusem Less jest jego łatwość implementacji w projekcie. Praktycznie każdy edytor posiada wtyczki, które bezproblemowo automatycznie kompilują jego pliki. Są również skrypty JS, które robią to samo – ogólnie nie ma żadnych problemów aby w nim działać. Dodatkowo jest często polecany do nauki ponieważ jest bardzo podobny do czystego Cssa.

 

Sass

Sass jest potężniejszą wersją Lessa. Możemy w nim pominąć klamry, średniki to jeszcze bardziej przyśpiesza pracę. Poza tym Sass sam w sobie działa już trochę jak normalny język programowania. Szukasz czegoś do poważnych projektów? Sass jest dla Ciebie! Największym minusem dla nowych użytkowników jest poziom skomplikowania jego instalacji (wymaga, np. wcześniejszej instalacji node.js oraz node-sass lub Ruby a następnie jakiejś wtyczki/programu, który zajmie się kompilacją).  Więcej informacji nt sass możesz znaleźć tutaj: http://sass-lang.com/guide

 

Podsumowanie

Jeśli chodzi o ogólne możliwości tych technologii posegregowałbym je następująco: SASS > LESS > CSS. Końcowe zdanie jednak, którą opcję zastosować w danej sytuacji jest określenie czy faktycznie potrzebujemy czegoś takiego do projektu. O ile jest mało sensownym pisanie CSSa, który ma 1000 linii kodu, o tyle równie mało sensowne będzie tworzenie pliku SASS, który ma 10 linii kodu. Tak samo gdy projekt jest za duży na CSSa, ale i nie potrzebujesz możliwości Sass to warto zostać przy prostym i przyjemnym Lessie.

Ps. Istnieje jeszcze rozróżnienie samego Sassa na 2 podkategorie: scss i sass, których tutaj specjalnie nie omawiałem:)

Przydatne wtyczki do ATOM edytora [wideo]

Podczas kręcenia widea Atom – najlepszy edytor web developera obiecałem pokazać wtyczki, które znacząco przyśpieszają pracę i czynią z tego edytora naprawdę fajne narzędzie pracy, i które sam stosuję. Dziś spełniam obietnice i przedstawiam owe wtyczki.

Nagranie jest trochę przydługie więc już gratuluje tym, którym uda się wytrwać do końca 🙂 Starałem się ciąć jak mogłem, jednak chciałem przedstawić jak każda wtyczka działa (chociaż powierzchownie) i dlatego tak się rozciągnęło.

 

Wtyczki

Na nagraniu przedstawiam i z grubsza omawiam kilka wtyczek, które obecnie stosuję i uważam za naprawdę przydatne:

Przydatne wtyczki do Atom edytora [wideo]:

„Lorem Ipsum” w wersji obrazkowej

Miałem dzisiaj nic nie dodawać. Czas goni i obiecałem sobie, że cały dzień poświęcę w końcu na pisanie pracy inżynierskiej ALE… przeglądając internet trafiłem na kilka fajnych linków i chciałem się nimi podzielić. Znacie taką sytuacje, że kodujecie już stronę ale wyjątkowo klient nie dostarczył Wam jeszcze zdjęć. Co zrobisz.. nic nie zrobisz.. Normalnie należałoby otworzyć Google, wpisać 'darmowe zdjęcia’ oraz pościągać jakiekolwiek i następnie podocinać w Photoshopie pod wymiar. Żmudna praca, która i tak pójdzie do koszta gdy dostaniesz już właściwe zdjęcia. Czy można tego uniknąć?

„Dummy images”

Każdy wie co to jest „lorem ipsum” – przykładowy tekst, który służy wyłącznie zapełnieniu strony. Sporo edytorów ma wbudowaną funkcję generowania lorem ipsum, więc nie trzeba nawet uruchamiać wyszukiwarki. Okazuje się, że możesz w podobny sposób generować przykładowe zdjęcia! Nie musisz ich docinać ani pobierać. Wystarczy, że w tagu <img> wpiszesz odpowiedni adres z wymiarem grafiki.

Poniżej lista paru serwisów z przykładowym kodem (poniższa lista trafi do strony „Przydatne linki” gdybyście chcieli do niej wracać):

http://placehold.it/

Generuje proste grafiki. Szare tło i wymiar obrazu.
Przykładowe zastosowanie:
[html]<img src="https://placehold.it/350×150" />[/html]

dummyimages1 1 - "Lorem Ipsum" w wersji obrazkowej

 

http://placekitten.com/

Jako, że internet jest pełen kotów, to i oczywiście nie mogło zabraknąć generatora grafik właśnie z kotami:)
Przykładowe zastosowanie:
[html]<img src="https://placekitten.com/200/300" />[/html]

dummyimages2 - "Lorem Ipsum" w wersji obrazkowej

 

https://dummyimage.com/

Teraz coś bardziej wymyślnego. Oprócz wymiaru możemy także wygenerować na dowolny tekst i ustawić swoje kolory.
Przykładowe zastosowanie:
[html]<img src="https://dummyimage.com/600×400/c219c2/ffffff&amp;text=ABC" />[/html]

dummyimages3 - "Lorem Ipsum" w wersji obrazkowej

https://placeimg.com

Jeżeli nie chcesz szarych lub jednokolorowych obrazów to, na koniec coś co generuje nam zdjęcia. Możemy albo ustawić sobie jaką potrzebujemy tematykę albo zdjęcia są dobierane losowo.
Przykładowe zastosowanie:
[html]<img src="https://placeimg.com/640/480/any" />[/html]
dummyimages4 - "Lorem Ipsum" w wersji obrazkowej

 

Atom – najlepszy edytor dla Web Developerów [wideo]

Ostatnio liczbę postów przeważała zdecydowanie strona graficzna, dlatego dzisiaj przechodzę na drugi koniec i przedstawiam Wam w jakim edytorze kodu warto pracować… lub po prostu w jakim ja pracuję:)

 

„Jaki edytor do pracy”

To często zadawane pytanie przez początkujących. I bardzo dobrze, odpowiedni edytor sprawi, że kodowanie będzie przyjemnością lub męczarnią. Tak naprawdę w te pytanie mógłbym wejść jeszcze głębiej i zapytać się „Czy pracować w zwykłym edytorze kodu (np. Brackets, Notepad++) czy w jakimś IDE (w uproszczeniu takie edytory kombajny z kompilatorami itd., np. NetBeans)”.

Wiele recenzji stawia na jednej półce oba rozwiązania i przyrównuje Notapad++ do Netbeans, co wg mnie ciężko porównać. Atom jest edytorem kodu, który po dograniu kilku wtyczek jest (do tworzenia stron) prawie idealnym narzędziem!

 

Nagrałem 19 minutowy odcinek gdzie odpowiadam na pytania:

W następnym odcinku postaram się dograć wideo o wtyczkach. Czyli jakie wtyczki dograć aby pracować 10 razy szybciej! 🙂

Atom – najlepszy edytor dla Web Developerów [wideo]:

Czy HTML5 jest naprawdę taki fajny?

Być może się ostatnio rozleniwiłem a może to długi weekend, ale dzisiaj będzie dosyć krótko:)

Temat wpisu może już trochę spóźniony, w końcu HTML5 działa już od kilku lat, ale do dzisiaj wiele osób nie do końca zdaje sobie sprawę dlaczego HTML5 znacząco wpłynęło na tworzenie stron, i że nie jest to tylko dodanie paru nowych tagów do poprzedniej wersji.

 

Geneza HTML

Żeby lepiej zrozumieć wspaniałość HTML5 dobrze będzie chociaż mniej więcej poznać historię tego języka. Początki języka sięgają aż 1989/1991 roku, kiedy to posiadał tylko 22 znaczniki. Przez następne lata język się rozwijał, nabierał nowych znaczników itd. W 1996 zaangażowała się dobrze znana organizacja World Wide Web Consortium (W3C)  a w roku 2000 stał się międzynarodowym standardem. Wtedy stało się też coś ciekawego…

Powstał całkowicie ODDZIELNY język znaczników o nazwie XHTML, który miał zostać następną HTML. Niestety albo i sety, losy potoczyły się inaczej i ze względu na problemy z Internet Explorerem (już wtedy był „super” kompatybilny :D) owym następną nie rozstał, ale także nie zniknął. Od tej pory obok siebie istniały 2 języki, które były jednocześnie stosowane (HTML i XHTML). Pomiędzy 2 językami istnieje wiele różnic, z których jestem pewien wiele osób nie zdaje sobie sprawy i w wielu przypadkach do dziś języki te są mieszane.

Ale wracając do rzeczy… Przez cały czas rozwoju pojawiało się wiele problemów z kompatybilnościami przeglądarek (dlatego kiedyś więcej wysiłku trzeba było włożyć w to, aby na każdej przeglądarce strona wyglądała tak samo). HTML w wersji 4.01 odegrał ważną rolę ponieważ utworzył dosyć spójną specyfikację, a XHTML wykorzystał go jako swój grunt dlatego wydawało się, że dobrze rokował. Z czasem jednak ta droga została uznana za złą i dalszy rozwój został porzucony na rzecz HTML 5.

Tak więc z dwóch oddzielnych języków HTML i XHTML powstał znany nam dzisiaj HTML5. Dzięki temu mamy dzisiaj praktycznie całkowite wsparcie wszystkich rozwijanych przeglądarek, mamy jedne standard i wielkie możliwości.

 

Zalety HTML5

Żeby zbytnio nie mieszać. Jakie są konkretne plusy z powstania HTML5:

Wady HTML5

Język sam w sobie nie ma szczególnych wad. Jeśli zależy nam na znalezieniu takowych to trzeba byłoby wziąć się za jego zastosowania w konkretnych sytuacjach:)

 

Przyszłość HTML5

Skoro wydaje się, że nasza piątka ma same zalety to jaka czego ją przyszłość w świecie dynamicznie rozwijających się technologii?

Najnowszy HTML wykorzystywany jest przede wszystkim do tworzenia stron i na chwile obecną nawet nie powstaje nic co mogłoby go zastąpić. Ale nie jest to jego jedyne zastosowanie. Możemy zobaczyć coraz więcej gier stworzonych za pomocą piątki, np:

https://www.cubeslam.com/mscdnb
https://missile-game.bwhmather.com

W tej chwili rozwijający się rynek nie jest zagrożeniem dla HTML5 ale wręcz sprzyja jego szybkiemu rozwojowi, dzięki nowych wspierającym go technologiom.

Odpowiadając więc na pytanie w tytule „Czy HTML5 jest naprawdę taki fajny?” – stanowczo odpowiadam TAK! 🙂