Piotr Kowalski — JavaScript, Front-end oraz Node.js

15 aplikacji, które zwiększą Twoją produktywność (2024)

Piotr Kowalski — Mon, 09 Sep 2024 10:30:00 +0000

Dziś prezentuję Wam listą 15 narzędzi, które budują moją produktywność jako programisty w codziennej pracy. Jest to moja subiektywna lista, aczkolwiek myślę, że może ona pomóc w dowolnej pracy z komputerem.

Kiedyś komentowałem na Twitterze (albo X-ksie, ale ja będę konsekwentny i dla mnie https://x.com/ to po prostu Twitter), ale była to lista wymieszana z listą narzędzie shellowych. A o nich napiszę osobny artykuł. Dziś zajmiemy się tylko desktopowymi aplikacjami.

Dodam, że kolejność nie ma znaczenia. Każda aplikacja jest tak samo ważna.

Let’s go!

1Password — Password Manager

Świat cyfrowy wymaga od nas zapamiętywania haseł. Oczywiście, człowiek na ograniczone miejsce, abyśmy zapamiętali różne ciągi znaków i z łatwości je później przywracali w procesie logowania. Aby rozwiązać ten problem, należy używać Password Managera. Osobiście korzystam z 1Password. Świetne narzędzie, które ma szereg integracji i działa bezbłędnie.

Wskazówki
- Wsparcie do różnych vaults (skarbców), dobrze jest oddzielić sekrety prywatne od firmowych
- Warto zrezygnować z trzymania haseł w innych miejscach np. zapamiętane w przeglądarce lub w systemie
```
 brew install --cask 1password
```
Raycast — Spotlight na sterydach

Spotlight jest przestarzałym rozwiązaniem i mało elastycznym. Świeżość wnosi narzędzie Raycast które umożliwia o wiele więcej niż narzędzie wbudowane. Dzięki Raycastowi unikamy problemu z regularnym indeksowaniem dysku w poszukiwaniu plików oraz dostajemy wygodę korzystania z np. kalkulatora (możemy mieszać waluty, możemy mieszać przecinki z kropkami) oraz elastyczność instalując dowolny plugin z dużej bazy pluginów.

Wskazówki
- Polecam instalację pluginu do Visual Studio Code
```
 brew install --cask raycast
```
iTerm2 — Terminal na sterydach

iTerm to świetna alternatywa natywnego Terminala.

Wskazówki
- Po skonfigurowaniu zapisz sobie profil w swoim projekcie dotfiles.
```
 brew install --cask iterm2
```
ChatGPT — AI

AI jest wśród nas. Czy tego chcemy, czy nie. Zamiast się bronić, należy nauczyć się wykorzystywać to, że mamy narzędzie, które nam szybko i sprawnie pomoże w każdej sytuacji.

Żadnej model nie jest idealny, natomiast z każdym nowym modelem dostajemy szereg usprawnień. Warto korzystać z Chata, choćby to prostej pomocy w odpowiedziach na pytania, zamiast szukać czegoś w dokumentacji.

Należy tutaj wspomnieć o innym narzędziu z kategorii AI, a mianowicie Copilot, które pięknie integruje się z każdym edytorem i pomaga pisać kod!

Wskazówki
- Korzystaj z dobroci sztucznej inteligencji w każdym momencie, kiedy masz przestój, AI odpowie ci szybko, ale czy skutecznie?
```
 brew install --cask chatgpt
```
Rectangle — Window Manager

Zarządzanie oknami jest podstawową operacją na komputerze. Podczas pracy mamy otwartych kilka aplikacji i płynne poruszanie się po tym środowisku podnosi naszą produktywność.

Istnieje jeszcze płatne narzędzie Magnet, ale nie widzę różnicy między tymi dwoma.

Wskazówki
- Nie korzystaj już z zielonej ikonki na oknie, aby je zmaksymalizować - szybciej jest użyć Ctrl + Option + Enter
```
 brew install --cask rectangle
```
DeepL

Narzędzie, które bardzo szybko tłumaczy tekst z angielskiego na polski i odwrotnie! Wykorzystuję go jeszcze do innego celu, a mianowicie, gdy chcę przepisać tekst z obrazka. Dzięki wbudowanego mechanizmowi OCR oraz skrótów klawiaturowych taką operację mogę wykonać w sekundę!

Wskazówki
- Koniecznie włącz skróty klawiaturowe!
```
 brew install --cask deepl
```
Insomnia - Twórz requesty bez kodu

Insomnia to świetna alternatywa znanego narzędzia Postman.

Dzięki tej aplikacji możemy tworzyć requesty bez pisania kodu. Pomaga to w szybkiej weryfikacji backendu. Requesty możemy zamykać w grupy, np. dotyczące jednego endpoint, albo jednego API.

Wskazówki
- Koniecznie załóż konto, aby zapisywać utworzone grupy requestów w chmurze
```
 brew install --cask insomnia
```
Bartender - Porządek w top menu

Po instalacji kilku aplikacji na górnym pasku (top menu) w macOS zaczyna brakować miejsca. Dlatego rozwiązaniem jest to narzędzie, dzięki któremu ukryjemy nieistotne aplikacje.

Wskazówki
- Polecam nie chować ikonek: Wi-Fi, Bluetooth, Bateria
```
 brew install --cask bartender
```
NordVPN — VPN

W dzisiejszych czasach przychodzą potrzeby zmiany lokalizacji, aby móc np. coś obejrzeć na Netflixie, czego w Polsce akurat nie można. Aczkolwiek to nie jest podstawowy use case. Podczas pracy w międzynarodowych korporacjach przychodzi potrzeba testu naszej aplikacji jak wygląda w różnych językach i VPN pomaga znakomicie.
```
 brew install --cask nordvpn
```
CleanShot — Zrzuty ekranu

To narzędzie to istny GAME CHANGER! Potrafi nie tylko robić zrzuty ekranu (screenshots), ale również daje możliwość ich szybkiej modyfikacji, poprzez dodanie tekstu, zaznaczenia tekstu, czy nawet listy kroków. Dodatkowo możesz zdjęcie zapisać lub skopiować do schowka, ale to nie wszystko! Narzędzie potrafi nagrywać video i dawaj przy tym mnóstwo opcji konfiguracji.

Wskazówki
- Koniecznie należy skonfigurować narzędzie, bo opcji konfiguracji jest ogrom!
```
brew install --cask cleanshot
```
ScreenBrush — Rysowanie po ekranie

To narzędzie wykorzystuję w procesie nauczania, ale nie tylko. Również bardzo często podczas sesji pair programingu, aby coś zaznaczyć na dużym ekranie. Oczywiście kolejnym use casem są spotkania, gdzie na ogromnych telewizorach chcę coś zademonstrować.

Wskazówki
- Koniecznie naucz się skrótów klawiaturowych, dzięki temu odkryjesz pełnię możliwości tego narzędzia
Plain Text Editor — Szybkie notatki

Plain Text Editor to świetna alternatywa wbudowanego narzędzia Stickers.

Ten edytor (bo w sumie to jest jakaś forma edytora) jest pozbawiony wszystkiego, no może poza oknem do wpisywania tekstu oraz statystyk liczących ile znaków wpisaliśmy.

Wykorzystuje to narzędzie to tworzenia szybkich notatek lub też wiadomości, którą chcę komuś wysłać, ale nie chcę już jest wpisywać do okna bo mogę przez przypadek ją wysłać.

Co prawda różni się od Stickersów, że nie mogę przyklejać sobie notatek do ekranu, ale za to mogę zapisać daną notatką na dysk.

Prawdę mówią, to wykorzystuję oba narzędzia.

Wskazówki
- Dodaj sobie alias w shellu np. p, aby szybko uruchomić program i zapisać myśl, tak jak ja to zrobiłem w swoich plikach z aliasami.
Google Chrome — Przegladarka

Korzystałem z wielu przeglądarek, ale w każdej mi czegoś brakowało. Jako UI Engineer mam zainstalowane kilka, aby testować, jak wygląda layout. Od wielu lat nowoczesność tej przeglądarki nie przestaje zadziwiać.

Wskazówki
- Załóż sobie oddzielny profil na sprawy firmowe
```
brew install --cask google-chrome
```
Visual Studio Code — Edytor kodu

Moja przygoda z edytorami kodu zaczęła się od Eclipse, później kolejno: Netbeans, Aptana, VIM, Intellij, WebStorm, PhpStorm, Atom, Sublime, Brackets i pewnie jeszcze kilka się znajdzie.

VSC jest najlepszym rozwiązaniem, z jakim przyszło mi pracować.

Jeśli interesują Was moje pluginy do Visual Studio, których używam każdego dnia, to zapraszam do artykułu 15 pluginów do Visual Studio Code.

Wskazówki
- Po skonfigurowaniu zapisz sobie profil w swoim projekcie dotfiles.
```
brew install --cask visual-studio-code
```
Spotify — Muzyka

Nie samą pracą człowiek żyje, a może właśnie tak? Zależy. Niektórzy nie mogą pracować bez muzyki, mi ona bardzo pomaga więc mogę z czystym sumieniem polecić Spotify. Świetne narzędzie, nieustannie się rozwija i dochodzę nowe funkcje.

Wskazówki
- Zrobić sobie playlisty w zależności od efektu, który chcemy osiągnąć, np. energetyzująca, kiedy chcemy się pobudzić, oraz spokojna (koniecznie z saksofonem), aby się skupić na pracy.
```
brew install --cask spotify
```

Podsumowanie

To by było na tyle. To garść aplikacji, które ja używam na co dzień. Ogólnie aplikacji jest i wiele więcej, ale z niektórymi jestem na tyle krótko, że nie wiem, czy mogę je zarekomendować na takim samym stopniu jak powyższe.

A Ty? Czy masz aplikację, bez której nie wyobrażasz sobie pracy przy komputerze?

Dlaczego czytam książki o bibliotekach?

Piotr Kowalski — Mon, 22 Jan 2024 20:00:00 +0000

Dziś wpis, który jest nieco inny niż wszystkie, a mianowicie dziś zajmę się odpowiedzią na tweet kolegi, który poleca NIE CZYTAĆ książek o bibliotekach.

Zapraszam do zapoznania się z moim punktem widzenia.

Geneza

Wszystko zaczęło się od tego, że kupiłem drugą książkę o Reakcie, aby zweryfikować czego taka lektura może mnie nauczyć o całym podejściu do budowania projektów z użyciem ekosystemu React-a i wrzuciłem tweet, że rozpocząłem czytanie.

Następnego dnia kolega natomiast stanął w opozycji, do mojego pomysłu na napisał:

Książka o bibliotece? Nie czytał bym. Dokumentacja jest bardziej aktualna i poprawna. — @ksuszynski

Zamiast płacić Twitterowi, za możliwość publikacji długiej odpowiedzi postanowiłem, że całą moją wypowiedź wrzucę tu, na bloga.

Dlaczego czytam książki?

Dokumentacja nie rzadko jest pisana przez twórców i dlatego nie jest “dobra”
- Rozwiązaniem jest tworzenie dokumentacji przez społeczność
W książce możemy poczytać o różnych sytuacjach, w których jakiś temat “biblioteki” w jakiś sposób autorowi książki przypadł do gustu lub też nie
- W dokumentacji online, znajdziemy zawsze superlatywy o narzędziu
Dygresje — często gęsto są przyjemne, jeśli nie odbiegają za bardzo od tematu książki
- Tego brakuje w oficjalnej dokumentacji
Książka to papier, mogę sobie czytać bez prądu i nie wytężając oczu
- Czytanie książek jest bardziej praktyczne!

…no i lubię zapach papieru!

Dawno temu napisałem artykuł pt. “Jaki mam stosunek do książek technicznych?”, opowiadający, dlaczego w ogóle lubię czytać książki techniczne. Artykuł pochodzi z 2018 roku

Co stoi w opozycji?

Książka to papier, a papier to drzewa, nie szkoda Ci drzew?
- Warto dbać o przyrodę i nie produkować makulatury i czytać elektronicznie
Książki technologiczne szybko się dezaktualizują
- Linki w książkach mogą nie działać po dłuższym czasie
Co zrobić z książką techniczną, którą się przeczytało?
- Sprzedanie lektury generuje dodatkowe zadanie i stratę finansową

Podsumowanie

Bez względu, czy preferujesz książki papierowe, czy elektroniczne, czytanie o narzędziach, których się używa to wiedza teoretyczna.

Jest ona niezbędna, aby tworzyć oprogramowanie zgodnie z zaleceniami autorów, natomiast najważniejsza jest praktyka.

Zachęcam do czytania (w taki sposób jaki lubisz), ale także do kodowania!

Cya! 👋

Recenzja: "React w działaniu. Tworzenie aplikacji internetowych. Wydanie II"

Piotr Kowalski — Wed, 27 Dec 2023 09:00:00 +0000

Chciałbym się z Wami podzielić recenzją książki, którą dane mi było ostatnio przeczytać. Zapraszam do krótkiego artykułu na temat książki autorstwa Stoyan Stefanov, byłego programisty Facebooka, pt. “React w działaniu. Tworzenie aplikacji internetowych. Wydanie II”.

Dlaczego kupiłem tą książkę?

Książkę zakupiłem via empik.com, aby wreszcie przeczytać jakąś pozycję o narzędziu, które jest tak bardzo popularne, a zarazem, którego używam na co dzień.

Fakt, że książki w dzisiejszych czasach może nie są tak samo popularne jak kiedyś, natomiast ja lubię czytać zwykłe książki i doświadczać faktury papieru oraz tworzyć notatki ołówkiem, i nie odrywać się od czytania tylko zalegnąć z lekturą na kilka godzin.

Autorem książki jest ten sam programista, który jest autorem starej i sławnej książki pt. “JavaScript. Wzorce” opublikowanej w 2012 roku. Ta lektura dość mocno wpłynęła na moją karierę zawodową, stąd też cenię tego autora.

Książka “JavaScript. Wzorce” znajduje się mojej biblioteczce książek polecanych dostępnej pod adresem /polecane-ksiazki/.

Kolejnym argumentem motywującym zakup książki jest to, że będzie opisywać bibliotekę, która nie rozwija się już tak szybko jak kiedyś. Tak więc, książka nie będzie bardzo nieaktualna względem najnowszej wersji. Niestety, React rzadko się rozwija.

Tak wygląda ostatnie kilka wpisów wydań biblioteki na GitHubie:

18.2.0 (June 14, 2022)
18.1.0 (April 26, 2022)
18.0.0 (March 29, 2022)
17.0.2 (March 22, 2021)
17.0.1 (October 22, 2020)
17.0.0 (October 20, 2020)
16.14.0 (October 14, 2020)

Książka, którą recenzuję została wydana:

2021-11-11 (oryginał)
- “React: Up & Running: Building Web Applications”
2023-02-14 (polska wersja, przetłumaczona przez Helion)
- “React w działaniu. Tworzenie aplikacji internetowych. Wydanie II”

Czego mogę się nauczyć z tej książki?

Niestety, ale tłumaczenia książek technologicznych to często jakieś nieporozumienie. Nie wiem po co na siłę tłumaczyć konstrukcje, które nie są jednoznaczne. Przykładem niech będzie “operator rozszczepienia”. Drogi czytelniku, czy wiesz co autor książki opisuje? No właśnie, ja też nie wiedziałem. W tym przypadku autor książki opisywał Spread Operator.

Książka nie jest gruba. Opisuje dwa projekty, które łączą się w jedną całość.

✅ Z książki dowiesz się o:

składnia JSX
- HTML to JSX Compiler
komponenty kontrolowane (formularze, kontrolki)
przekazywanie danych do komponentu
klasowe komponenty, oraz zdarzenia cyklu życia:
- componentDidUpdate()
- componentDidMount()
- componentWillUnmount()
- getSnapshotBeforeUpdate()
- shouldComponentUpdate()
komponenty funkcyjne
idea funkcji typu reducer oraz testy jednostkowe do nich
atrybuty:
- key a iteracja po liście elementów,
- className
- style
Hooks
- useRef()
- useLayoutEffect()
- useEffect()
- useState()
- useReducer()
- useCallback()
- useContext() (Consumer)
- Tworzenie własnego hooka - useLoggedState()
APIs
- forwardRef()
- createContext() (Provider)
Components
- <Fragment> & <>
- <StrictMode>

⛔️ Niestety, ale w książce brakuje opisu bardziej zaawansowanych funkcji jak:

APIs
- lazy()
- memo()
Hooks
- useMemo()
Components
- <Profiler>
- <Suspense>
Router

Czy jest “treściwa”, czy dużo jest lania wody?

W tej sekcji spróbuję odpowiedzieć czy w książce nie ma tekstu pisanego tylko po to, aby zapełnić strony.

Jeśli miałbym ocenić książkę pod tym kątem to dałbym ocenę 6/10. Początek książki jest obiecujący. Można się dowiedzieć o tym jak działa biblioteka, natomiast druga połowa to już raczej nikomu nieprzydatna treść. W drugiej części jest tylko przedstawiony workflow opisujący logikę aplikacji, która jest tworzona, przestawić coś nowego, czego brakuje w książce.

Dlatego też tę drugą część książki oceniam jako może nie “lanie wody”, ale też nie mogą jej ocenić jako przydatną treść.

Czy zawiera wiedzę, którą trudno gdzieś indziej znaleźć?

Nie mogę odpowiedzieć twierdząco na to pytanie. Wszystko, co jest w książce można śmiało przeczytać w dokumentacji Reacta. Może dokumentacja nie jest wybitnie dokładna i precyzyjna, ale za to napisana prostym językiem, co ułatwia jej zrozumienie.

Książki techniczne rzadko zawierają unikalną wiedzę, której nie można znaleźć w sieci. Na pewno żadna książka o bibliotece nie będzie zawierała unikalnej wiedzy.

Jaki jest docelowy odbiorca (stary wyjadacz czy początkujący)?

Docelowym odbiorcą jest początkujący programista (początkująca programistka), który (która) chce tworzyć proste aplikacje w oparciu o bibliotekę React.

Osoby ze stażem w budowaniu aplikacji webowych z użyciem Reacta, nie znajdą w tej książce niczego interesującego, ani niczego czego nie mogliby znaleźć w sieci.

Polecam tę książkę na początek swojej przygody z biblioteką React.

Czy jest bardziej teoretyczna, czy też większy nacisk jest postawiony na przykłady?

Książka kładzie duży nacisk na przykłady. W oparciu o budowanie komponentów tłumaczy podstawowe elementy Reacta. Moim zdaniem natomiast ostatnie 2 rozdziały, to strata czasu. Nie ma w nich wytłumaczenia nowych zagadnień.

Proces nauki wymaga wiedzy teoretycznej i praktycznej. Natomiast proporcje powinny być w przeważającej większości skierowane w stronę praktyki.

W książce nie znajduję żadnych dygresji.

Czy przykłady są wartościowe?

Tak, przykłady były przydatne, bo na ich podstawie były wyjaśniane elementy Reacta.

Każda nowa konstrukcja była na początku opisana teoretycznie, a następnie zaprezentowany był przykład.

Myślę, że najbardziej trafione było wytłumaczenie hooka useReducer. Do takiego stopnia mi się ono spodobało, że wrzuciłem o tym tweeta:

One of my fav part of this 📖 #Reducer pic.twitter.com/GhzGkA0Vhk
— Piotr Kowalski (@piecioshka) November 12, 2023

Ciekawy jest też sposób na stworzenie funkcji do aktualizacji kontekstu. Przykład:

// contexts/DataContext.js
import React from 'react';

const DataContext = React.createContext({
  data: [],
  updateData: () = {},
});

export default DataContext;

// components/App.js
const App = () => {
    const initialData = JSON.parse(localStorage.getItem('data'));
    const [data, setData] = useState(initialData);

    function updateData(newData) {
        newData = clone(newData);
        commitToStorage(newData);
        setData(newData);
    }

    return (
        <DataContext.Provider value={{ data, updateData }}>
            <!-- ... -->
        </DataContext.Provider>
    );
}

export default App;

// components/Header.js
const Header = () => {
    const {data, updateData} = useContext(DataContext);
    // ...
}

export default App;

Czy ktoś doświadczony może się czegoś nowego dowiedzieć?

W książce podkreśliłem następujące fragmenty:

“Można przecież utworzyć aplikację za pomocą Reacta przeznaczoną do renderowania w różnych środowiskach poza przeglądarką - na przykład w elemencie Canvas.”
— (strona 17)

Zastanawiam się, czy istnieje jakaś biblioteka, gdzie możemy używać Reacta do budowy komponentów, natomiast nie renderować ich w drzewie DOM, tylko na płaszczyźnie Canvas.

Nie mam doświadczenia w takim sposobie renderowania komponentów. Ciekawi mnie, czy transparentne jest przeniesienie przestrzeni do renderowania z drzewa DOM do obiektu Canvas.

“Komponenty funkcyjne wymagają nieco mniejszej mocy obliczeniowej CPU i mniej kodu.”
— (strona 25)

Tu nie jestem pewien jak to sprawdzić. Nie wiem, czy autor jest pewny, że to zdanie jest prawdziwe. Chciałbym w jakiś sposób to sprawdzić, czy faktycznie komponenty funkcyjne wymagają mniejszej mocy obliczeniowej.

Porównanie do podobnych pozycji na rynku

Nie mam porównania z innymi pozycjami na rynku.

Jeśli Ty takie posiadasz, to dodaj komentarz co myślisz o innych książkach.

Podsumowanie

Czy było warto przeczytać? Ogólnie myślę, że było warto.

Plusy

Czytanie książek to satysfakcjonujące zajęcie. Gdy przeczytasz kolejną lekturę to masz poczucie dobrze spędzonego czasu
Pozycja nie była gruba, więc czytanie jej (a czasami męki) nie trwało zbyt długo
Zweryfikowanie swojego zakresu wiedzy na temat biblioteki
Znalezienie czegoś nowego dla siebie, np. link do wszystkich wspieranych encji HTML, oraz ciekawe podejście do kontekstu

Minusy

Brakowało mi lepszego wyjaśnienia useCallback()
Techniki optymalizacji jak np. React.memo() oraz useMemo() zostały pominięte

•

To tyle ode mnie.

Czytelniku! Dziękuję Ci za przeczytanie tego artykułu.
Jeśli Ci się on spodobał, to proszę zaznacz to w sekcji komentarzy.
Będzie mi miło.

Pozdrawiam, Piotr 🖐️

Diagram Sekwencji w UML (przykłady w JavaScript)

Piotr Kowalski — Tue, 28 Nov 2023 09:50:50 +0000

Dziś przygotowałem dla Was artykuł o Diagramie Sekwencji. Dowiecie się z niego jakie korzyści płyną z jego używania. Jestem przekonany, że ten diagram spodoba się wszystkim programistkom i programistom.

Oficjalne logo UML

Inne artykułu na blogu traktujące o UML:

2023-11-28 - Diagram Sekwencji w UML (przykłady w JavaScript)
2020-06-26 - Diagram Klas w UML (przykłady w JavaScript)
2017-06-06 - Po co mi UML?

Po co stosować Diagram Sekwencji?

Diagram Sekwencji, który jest podtypem Diagramu Interakcji, służy do opisania ścieżki algorytmu, bez zagłębiania się w detale. Wykorzystywany, aby zamodelować proces lub ścieżkę algorytmu w sposób przystępny i ustandaryzowany.

Diagram Sekwencji nie zawiera szczegółów implementacyjnych, więc idealnie służy do projektowania.

Dodatkowym plusem, który jest cechą wszystkich diagramów, jest oczywiście to, że diagramy są agnostyczne względem języka oraz technologii.

Co to jest UML?

Jeśli nie wiesz, to zapraszam do artykułu nt. UML na tym blogu.

Diagram Sekwencji w Specyfikacji UML

Wersja aktualna na dzień pisania artykułu to v2.5.1. Opublikowana w grudniu 2017.
Do pobrania w wersji PDF: https://www.omg.org/spec/UML/2.5.1/PDF
Rozdział, który nas interesuje to “17.8 Sequence Diagrams” (na stronie 595).

Notacja

Lista elementów, które są używane na Diagramach Sekwencji wraz ze znaczeniami:

Linia życia - prostokąt z pionową linią

Prostokąt:
- Reprezentuje encję z opisywanego procesu
- W prostokącie możemy użyć nazwę klasy jako element dziedziny problemu
- Ale również możemy użyć nazwy obiektu, stworzonego za pomocą klasy
Pionowa linia:
- Reprezentuje czas życia opisywanego elementu
- Kolejne linie życia tworzymy TYLKO po prawej stronie w kolejności użycia

option footer=none

participant A
participant b: B

Atomowa operacja
- Jeśli chcemy zaznaczyć, czas trwania obsługi komunikatu możemy stworzyć na linii życia dodatkowy prostokąt

option footer=none

participant A
participant B

A->B: request
activate B
B-->A: response
deactivate B

Zakończenie linii życia - Wielki znak iks użyty na linii życia informuje, że czas życia danej encji został właśnie zakończony

Na diagramie powyżej można zobaczyć wizualizację zakończenia linii życia.

option footer=none

participant A
destroy A

Komunikat - pozioma strzałka z podpisem

Podpis:
- Zawiera nazwę czynności uruchomionej na encji, do której strzałka kieruje.
Strzałka:
- Mamy do dyspozycji kilka typów, ale najpopularniejsze z nich to:
  - linia ciągła połączona z wypełnionym grotem
    
    oznacza synchroniczne wywołanie
  - linia ciągła połączona z pustym grotem
    
    oznacza asynchroniczne wywołanie
  - linia przerywana połączona z pełnym grotem
    
    oznacza odpowiedź

option footer=none

A->B: Synchroniczne wywołanie
A->>B: Asynchroniczne wywołanie
B-->A: Odpowiedź

Komunikat zwrotny
- Jeśli chcemy zaznaczyć, że encja coś procesuje, możemy utworzyć wiadomość w której nadawca i odbiorca będę pochodzić z tej samej linii życia

option footer=none

A->A: message

Fragment - prostokąt, który zawiera pewien zakres czynności

Tworzy obszar z warunkiem, pętlą lub jednoczesnym uruchomieniem więcej niż jednej czynności
Rozróżniamy kilka typów fragmentów:
- alt
  
  Alternatywa: tylko ten, którego warunek jest prawdziwy, zostanie wykonany (możemy zdefiniować blok else)
- opt
  
  Opcjonalnie: fragment jest wykonywany tylko wtedy, gdy podany warunek jest prawdziwy (taki alt, ale bez else`)
- par
  
  Równolegle: każdy fragment jest uruchamiany równolegle
- loop
  
  Pętla: fragment może być wykonywany wielokrotnie, a warunek wskazuje podstawę iteracji
- region
  
  Obszar krytyczny: fragment może być wykonywany tylko przez jeden wątek jednocześnie
- neg
  
  Negatywny: fragment wykazuje nieprawidłową interakcję
- ref
  
  Odniesienie: odnosi się do interakcji zdefiniowanej na innym diagramie. Ramka jest rysowana tak, aby obejmowała linie życia zaangażowane w interakcję. Można zdefiniować parametry i wartość zwracaną
- sd
  
  Diagram sekwencji: używany do otaczania całego diagramu sekwencji.

option footer=none

loop
A->B: message1
A->>B: message2
end

alt condition
A->B: message3
else else
A->B: message4
end

opt
    A->B: message5
    seq
        A->B: message6
    end
end

Jakiego typu informacje zamieszczamy na Diagramie Sekwencji?

Umieszczamy:

Nazwy elementów dziedziny problemu oraz ich linie życia
Komunikaty wysyłane między liniami życia (wywołania i odpowiedzi)
Obszary, które zmieniają przepływ algorytmu, tj. pętle, warunki

Opcjonalnie umieszczamy:

Tworząc komunikat, możemy dodać podpis nad strzałką będący nazwą funkcji wraz z listą argumentów, jakie do niej przekazujemy

Nie umieszczamy:

Implementacji funkcji

Przykład

Chcemy zbudować listę zadań (to będzie nasza domena). Jakie elementy będę występować w domenie problemu?

Lista zadań
Zadanie

Przykładowy kod (stworzony tylko na potrzeby lepszego zrozumienia przykładu):

class TaskList { /* logic */ }
class Task { /* logic */ }

function main() {
    new TaskList();
}

main();

Zatem, jak będzie wyglądał Diagram Sekwencji? Czy możemy zaplanować jak będzie wyglądała komunikacja między elementami tej domeny? Tak!

Kod powyższego Diagramu Sekwencji

participant TaskList
participant Task

note over TaskList,Task: create
TaskList->Task: create( value: string )
activate Task
Task-->TaskList: taskId: number

note over TaskList,Task: render
TaskList->Task: render()
Task-->TaskList:

note over TaskList: add task to a list of tasks
TaskList->TaskList:

note over TaskList,Task: delete
Task->Task: delete()
Task->TaskList: onRemoveTask()
deactivate Task

note over TaskList: remove task from a list of tasks
TaskList->TaskList:

destroy Task

A teraz jak to wygląda w praktyce? Poniżej możecie zobaczyć listę akcji zdefiniowanych w prostokątach wraz z ich implementacją na GitHubie:

W jakich narzędziach tworzymy Diagramy Sekwencji?

Konwertery kodu na diagram:

(🌟 Polecam) https://websequencediagrams.com/ - [Przykłady]
https://sequencediagram.org/
https://planttext.com/
https://bramp.github.io/js-sequence-diagrams/
- UWAGA: to narzędzie używa delikatnie innej składni niż poprzednie
- [Wspierana składnia]

Edytory WYSIWYG, tj. budowanie diagramów za pomocą pointera:

Diagram Sekwencji mojego autorstwa. Temat - Zmiana nazwiska pacjenta. 2013 rok.

Narzędzie VSCode Sequence Diagrams - plugin do VSC

Ten plugin do Visual Studio Code to ciekawa alternatywa do wcześniej wymienionych narzędzi, która pozwala renderować Diagram Sekwencji wewnątrz edytora.

Ważne!

Plugin VSCode Sequence Diagrams korzysta z js-sequence-diagrams. dzięki czemu musimy korzystać z tej wspieranej składni.

Książki

Lista książek, z których można dowiedzieć się więcej na temat Diagramu Sekwencji:

🇵🇱 (ebook) “Skrzynka narzędziowa architekta oprogramowania” Michael Keeling
- Data wydania ebooka: 2021-08-17
🇵🇱 (ebook) “Modelowanie systemów informatycznych w języku UML 2.1” Andrzej Stasiak, Włodzimierz Dąbrowski, Michał Wolski
- Data wydania ebooka: 2020-06-29
🇵🇱 (ebook) “Zostań architektem oprogramowania” Michael Keeling
- Data wydania ebooka: 2019-12-03

Filmy

Lista filmów, z których można dowiedzieć się na temat Diagramu Sekwencji:

🇺🇸 How to Make a UML Sequence Diagram
🇵🇱 Po co używamy diagramu sekwencji
🇺🇸 (Udacity) UML Behavioral Diagrams: Sequence - Georgia Tech - Software Development Process

Słownik trudnych słówek

dziedzina problemu

obszar, w którym poruszana jest dyskusja
Przykład: proces logowania użytkownika w serwisie
encja

dowolny element z dziedziny problemu
Przykład: użytkownik w procesie logowania
algorytm

pewien ciąg zdarzeń następujących po sobie. Zdarzenie uruchomione w zdefiniowany sposób realizują jakąś funkcjonalność.
Przykład:
- pobieranie danych z formularza,
- budowanie obiektu, który posłuży jako payload w żądania do serwera,
- wysłanie zapytania HTTP
- parsowanie odpowiedzi
- obsługa odpowiedzi
  - prezentacja komunikatu błędu
  - przekierowane na stronę główną z informacją o pomyślnym zalogowaniu

Zadania na przećwiczenie

Zadanie 1.

Za pomocą Diagramu Sekwencji, opisz proces kupowania jabłek w sklepie spożywczym.
Zadanie 2.

Za pomocą Diagramu Sekwencji, opisz proces uwierzytelniania użytkownika.

Bibliografia

https://www.omg.org/spec/UML/2.5.1/PDF
- Specyfikacja UML
https://www.visual-paradigm.com/guide/uml-unified-modeling-language/what-is-sequence-diagram/
- Świetnie przedstawiony opis Diagramu Sekwencji
https://pl.wikipedia.org/wiki/Unified_Modeling_Language
- Strona o UML na polskiej Wikipedii
https://www.uml-diagrams.org/sequence-diagrams.html
- Przyjemna dokumentacja Diagramu Sekwencji
https://marketplace.visualstudio.com/items?itemName=AleksandarDev.vscode-sequence-diagrams
- 🔨 VSCode Sequence Diagrams - plugin do Visual Studio Code

Jak sprawdzić typ zmiennej w JavaScript? Operator typeof

Piotr Kowalski — Thu, 13 Jul 2023 00:00:00 +0000

Język programowania JavaScript jest dynamicznie typowany, co oznacza, że zmienne mogą zmieniać typy danych podczas wykonywania programu. Mając to na uwadze, jak możemy określić typ danego obiektu w dowolnym momencie?

Tu z pomocą przychodzi operator typeof.

Dzięki temu artykułowi dowiesz się:

Jak sprawdzić typ zmiennej w JavaScript?
Jak sprawdzić, czy zmienna jest tablicą?

Typowanie w języku JavaScript

Wbrew niektórym opiniom, w JavaScript istnieją typy. Sprawdzanie ich działa w runtime.

Więcej o samym “runtime” w artykule na tym blogu pt. “Co to jest runtime?”.

Zatem, czy istnieje mechanizm, który sprawdzi nam typy w fazie kompilacji?

Oczywiście, ale nie w JavaScript. Tak działa TypeScript a dokładnie TypeScript Compiler (tsc), który to jest uruchomiony do tego, aby:

w edytorach, aby podświetlać błędy w kodzie,
w terminalu, aby wygenerować plik(i) JavaScript, który(e) zostaną zinterpretowane przez przeglądarkę.

`typeof` w specyfikacji ECMA-262 edycja 14 (2023)

Formalny zapis prosto z oficjalnego dokumentu:

ECMA-262 14th edition — 13.5.3 The typeof Operator

ECMA-262 14th edition — B.3.6.3 Changes to the typeof Operator

Zasada działania (bez języka formalnego, tak zwyczajnie, po polsku)

Specyfikacja jest pisana… specyficznym językiem. Myślę, że dobrze jest potrafić ją czytać.

Swego czasu blog V8 opublikował całą serię dotyczącą czytania specyfikacji ES https://v8.dev/blog/tags/understanding-ecmascript

Natomiast, gdy ktoś nigdy nie widział powyższego zapisu to opiszę jak działa operator typeof potocznym językiem.

Przykład: typeof val

Zmienna val przechowuje wynik wykonania wyrażania znajdującego się po prawej stronie operatora typeof
Sprawdzamy, czy val należy do tzw. Reference Record, tj.
- jeśli nie należy, to zwracamy undefined
Pobieramy wartość zmiennej, bo np. val nie musi być zmienną, może być dowolnym wyrażeniem (np. odwołaniem do właściwości obiektu - object.prop, w takim przypadku wyliczamy jego wartość)
Jeśli val to undefined zwracamy "undefined"
Jeśli val to null zwracamy "object"
Jeśli val to String zwracamy "string"
Jeśli val to Symbol zwracamy "symbol"
Jeśli val to Boolean zwracamy "boolean"
Jeśli val to Number zwracamy "number"
Jeśli val to BigInt zwracamy "bigint"
Sprawdzamy, czy val jest obiektem
⚠️ UWAGA: Jeśli typem val jest Object oraz val jest równe document.all to zwracamy undefined
Jeśli val jest możliwa do uruchomienia zwracamy "function"
Zwracamy "object" dla wszystkich innych wartości

Reference Record

Czytając specyfikację, można się dowiedzieć, że jest to wyrażenie:

x - pobranie referencji
x[y] - dostęp do elementu tablicy na podstawie indeksu
x.a - dostęp do właściwości obiektu na podstawie nazwy
super.a - dostęp do właściwości przodka (używamy w klasach dziedziczących)

`document.all`

Za czasów świetności Internet Explorera (IE), który był liderem wśród przeglądarek internetowych we wczesnych latach dwutysięcznych, próbował rozwijać język samodzielnie dodając coś nowego do JavaScript (a nawet JScript).

Jednym z takim wyjątkowych elementów, jest właśnie kolekcja document.all. Która to NIESTETY musi być wspierana z uwagi na kompatybilność wsteczną, natomiast ta kolekcja jest bardzo specyficzna.

UWAGA:

typeof document.all === undefined // true
Boolean(document.all) === false   // true

Pomimo, że:

document.all.toString() === '[object HTMLAllCollection]'  // true
typeof document.all.length === 'number'                   // true

Dlatego też, w dzisiejszych czasach nie korzysta się z document.all, a jeśli istnieje potrzeba pobrania wszystkich elementów drzewa DOM, to można osiągnąć to za pomocą document.querySelectorAll('*').

Reserved Word

Operator typeof należy do kolekcji Reserved Words oznacza to, że nie można użyć tej nazwy do własnych identyfikatorów, tj. funkcji, zmiennych, itd.

let typeof = 2; // Uncaught SyntaxError: Unexpected token 'typeof'

Jest różnica między “słowami kluczowymi” a “słowami zastrzeżonymi”.
Dobrym przykładem jest wyraz async, który należy do słów kluczowych, ale nie do zastrzeżonych, tj. możemy go użyć jako identyfikatora zmiennej.
const async = 'yes';
console.log(async); // 'yes'
Więcej informacji na ten temat w specyfikacji:
https://tc39.es/ecma262/#sec-keywords-and-reserved-words

Przypadki użycia `typeof`

Q: A do czego możemy wykorzystać ten operator?
A: Do sprawdzenia, z jakim typem wartości mamy do czynienia.

Poniżej przykłady wszystkich sprawdzeń.

// undefined
typeof undefined === 'undefined'
// ⚠️ UWAGA: Ukryty undefined
typeof document.all === 'undefined'

// boolean
typeof true === 'boolean'
typeof false === 'boolean'
typeof Boolean() === 'boolean'

// number
typeof 1 === 'number'
typeof 0 === 'number'
typeof -1 === 'number'
typeof NaN === 'number'
typeof Number() === 'number'

// string
typeof "" === 'string'
typeof "text" === 'string'
typeof String() === 'string'
typeof Date() === 'string'

// function
typeof function () {} === "function"
typeof (() => {}) === "function"
typeof Function() === "function"
typeof class {} === "function"
typeof Date === "function"
typeof Object === "function"

// object
typeof {} === 'object'
typeof Object() === 'object'

// Array object
typeof [] === 'object'
typeof Array() === 'object'

// Promise object
typeof Promise.resolve() === 'object'
typeof Promise.reject() === 'object'

// RegExp object
typeof /e/i === 'object'
typeof new RegExp('e', 'i') === 'object'

// operator `new` zawsze tworzy object
typeof new Array() === 'object'
typeof new Boolean() === 'object'
typeof new Date() === 'object'
typeof new Object() === 'object'
typeof new Function() === 'object'
typeof new String() === 'object'

// kolekcja danych
typeof new Map() === 'object'
typeof new WeakMap() === 'object'
typeof new Set() === 'object'
typeof new WeakSet() === 'object'

// ⚠️ UWAGA: Ukryty obiekt
typeof null === 'object'

// symbol
typeof Symbol() === 'symbol'
typeof Symbol('text') === 'symbol'
typeof Symbol(111) === 'symbol'
typeof Symbol.for() === 'symbol'
typeof Symbol.for('text') === 'symbol'

// bigint
typeof BigInt(10e100) === 'bigint'

Wskazówka

Każdy operator w JavaScript możemy uruchomić z wartością otoczoną w nawiasy lub też bez nich. Zatem równoważny jest zapis:
typeof x === typeof (x)
Dobrą praktyką (a raczej standardem formatowania) jest nieużywanie nawiasów.

Co z tablicą?

Tablica jest obiektem. Operator typeof, niestety nie jest tutaj pomocny.
Aby sprawdzić, czy mamy do czynienia z tablicą, należy wykorzystać funkcję Array.isArray().

Array.isArray([]) === true
Array.isArray({}) === false

typeof [] === 'object'
typeof {} === 'object'

A teraz zobaczmy jak wygląda specyfikacja funkcji Array.isArray():

ECMA-262 14th edition — 23.1.2.2 Array.isArray ( arg )

ECMA-262 14th edition — 7.2.2 IsArray ( argument )

`typeof` w popularnych bibliotekach

Przykład wykorzystania operatora typeof w bibliotekach (oraz frameworkach):

Podsumowanie

Operator typeof określa typ wartości, jaką przechowuje zmienna. Bardzo przydatne rozwiązanie w trakcie weryfikacji, z jakimi danymi mamy do czynienia.

15 pluginów do Visual Studio Code (2023)

Piotr Kowalski — Wed, 07 Jun 2023 14:30:23 +0000

Pomyślałem, że 7 czerwca 😎 to piękny dzień, aby się podzielić swoimi pluginami do Visual Studio Code, których używam na co dzień!

Dodam, że kolejność nie ma znaczenia. Każda aplikacja jest tak samo ważna.

Let’s go!

Auto Rename Tag

Jeśli dużo piszesz HTMLa, to zmiana edycja znaczników z tym pluginem będzie przyjemniejsza.
Better Comments

Podświetlanie komentarzy w kodzie, co pomaga mi szybciej dostrzec ważne linijki.
Code Spell Checker

Literówki, ach te literówki! Ten plugin pomaga mi je wyeliminować. Domyślnie działa analiza tylko angielskich wyrazów.
Compare Folders

Porównywanie występowania plików w różnych folderach oraz porównanie samych plików. Nie jest to plugin przez mnie używany regularnie, ale i tak warto go mieć!
EditorConfig for VS Code

Formatowanie pliku w formie konfigurowalnej podczas pisania kodu.
ESLint

Chyba nie trzeba przedstawiać. Podkreślanie błędów w kodzie.
Git File History

Analiza rewizji konkretnego pliku.
Git History

Dość przyjemny interfejs do przeglądania historii rewizji.
JS CodeFormer

Refaktorowanie plików z końcówką *.js oraz *.ts. Testuję jeszcze!
Polish - Code Spell Checker

Wsparcie dla języka polskiego do wykrywania literówek.
Prettier - Code formatter

Formatowanie kodu po raz kolejny, tutaj natomiast jest dużo konfiguracji w stylu opinionated.
Todo Tree

Drzewko z listą zadań w kodzie, które jest zbudowane za pomocą wyrazu “TODO”.
Trailing Spaces

Zaznaczanie spacji na końcach linijek, które totalnie nie są potrzebne.
vscode-icons

Nie podobają mi się domyślne ikonki VSC, nie ma co płakać, można je zmienić.
webhint

Podpowiedzi dla programisty HTML oraz CSS.

Pytanie do Ciebie 💡

A Ty, jakich pluginów używasz, które ulepszają Twój workflow?

Technika Pomodoro. Dzień 1. Wnioski

Piotr Kowalski — Wed, 17 May 2023 19:00:00 +0000

Od kilku dni myślałem o zastosowaniu Pomodoro. Dziś podczas pracy w biurze wreszcie się skusiłem. Po przeczytaniu dowiesz się, jakie są moje wnioski. Doczytaj do końca, bo tam znajdziesz bonus.

Co to jest technika Pomodoro?

Na ten temat powstały setki artykułów. A to NIE JEST kolejny z nich. Natomiast dla ciągłości warto opisać kluczowe zasady w dużym skrócie.

Moja rozumienie założeń wygląda tak:

Podziel czas pracy na iteracje. Jedna iteracja to:
- 25 min skupienia
- 5 min odpoczynku
Wykonaj tyle iteracji, ile jesteś w stanie
Zakończ pracę “na koniec dnia”, bez względu, w jakiej fazie jesteś

Wnioski

Skoro już tu jesteś, to pewnie chcesz przeczytać mięsko.

Zatem zapraszam do głównej części artykułu.

1. Przerwy

Na początku miałem wrażenie, że przerwy są ZBYT często. Nie mogłem uwierzyć, że to już, że trzeba bezwzględnie zrobić pauzę na 5 min. W końcu tak dobrze się koduje, dlaczego mam przerywać?! No cóż, rules. Wstałem i pochodziłem po biurze przez kilka minut.

Tak wyglądała pierwsza iteracja.

Po kilku takich sekwencjach etap przerwy był oczekiwany. Nawet je sobie urozmaicałem, ale o tym w innym punkcie.

2. Czas skupienia

Ustawiłem (a raczej nie zmieniałem domyślnego) czas skupienia na 25 min. Krótko! Miałem wrażenie, że przerwy są co chwilę.

Nie jestem przyzwyczajony do tego, aby co niecałe pół godziny wstawać od komputera. Czas płynie szybko, gdy mierzymy się z problemem w kodzie.

3. Rozpraszacze

Kolejny problem. Co zrobić, gdy w trakcie skupienia wpadnie nam do głowy jakiś pomysł, który odbiega od meritum, od tego, czym się obecnie zajmujemy. Czy mamy otwartą furtkę, aby wtedy wyjść z fazy skupienia? Nie!

Co zrobić, gdy chcemy coś sprawdzić? Zapiszmy ten rozpraszacz do notatki. Ten sposób jest świetny, bo później - podczas przerwy - możemy zdecydować, czy nasz pomysł jest wart weryfikacji, czy może lepiej jest się porozciągać.

Mój sposób:

Notatka jest non stop otwarta i czeka aż, coś do niej wpiszę. Następnie, podczas fazy przerwy wracam do notatki i “googluję”.

Notatka, w której dodawałem pomysły w trakcie fazy skupienia

4. Narzędzia

Aplikacja wspierająca korzystanie z techniki Pomodoro to podstawa.

Zainwestowałem dziś w projekt FLOW i jestem z niego zadowolony!

Może, gdyby blokowanie stron działało lepiej oraz było cross-browser to byłbym “bardzo zadowolony”, ale kontrolowanie stron mam opanowane, więc nie oszukiwałem, dlatego podczas fazy skupienia obyło się bez skrolowania Twitterka.

Tip do autorów aplikacji FLOW

Blokowanie stron powinno działać, bez względu jakiej przeglądarki używam.

5. Skupienie

Pilnowałem się, aby w trakcie sesji skupienia nie korzystać z telefonu i wiecie co? Było to dla mnie najtrudniejsze!

Natomiast mam pewien pomysł jak można rozwiązać ten problem raz, a porządnie!

Tip do autorów aplikacji FLOW

Fajnie, gdyby telefon wiedział, że jestem w fazie skupienia i mi nie przeszkadzał, wyłączając powiadomienia z aplikacji.

Podczas którejś fazy odpoczynku, zobaczyłem, że aplikacja FLOW występuje również na telefon!

Tip do autorów aplikacji FLOW

Świetnie by było, gdyby faza oraz aktualny czas fazy się synchronizował między telefonem a komputerem.

6. Przerwy

Kiedy w trakcie przerwy rozmawialiśmy z kolegami z biura o czymś, co dotyczyło projektu, to siedliśmy do kodu dopiero po przerwie! Było świetne uczucie, bo czułem, że czas jest dobrze zarządzany. Jak to w życiu, ważne jest, aby mieć czas na pracę, ale także czas na odpoczynek.

7. Odruchy

Podczas fazy skupienia miałem pewien problem. Otóż czułem silną potrzebę rozpoczynania rozmowy z kolegą w trakcie, kiedy coś mi się uruchamia dłuższą chwilę.

To chyba takie typowe, że gdy np. testy uruchamiają się 2 minuty, to czujemy, że ten czas jest naszą przerwą i nic nie musimy robić poza oczekiwaniem.

Chciałem wyzbyć się tego przyzwyczajenia i wiece co? Chyba mi się udało. Bo gdy czekałem na zakończenie dłuższej operacji to wykonywałem Code Review, innemu koledze z innego projektu. Moim zdaniem to dobre rozwiązanie i niesie ze sobą same plusy.

8. Przerwy, a aktywność fizyczna

Podczas jednej z kolejnych przerw wpadłem na pomysł, aby poza zwykłym rozciąganiem zrobić coś więcej. Do głowy od razu przyszedł mi pomysł pompek, tj. uginania ramion w podporze.

Zmęczenie fizyczne to dobry pomysł na “odpoczynek” od zmęczenia psychicznego, jakiego to doświadcza się w pracy inżyniera oprogramowania.

Mój sposób:

Po kilku iteracjach wyłączyłem telefon, aby pozbyć się odruchu sprawdzenia powiadomień. Włączyłem go dopiero po zakończeniu pracy. Może to zbyt radykalne, ale regularne spoglądanie na telefon niszczy skupienie.

Narzędzia vs Budżet

Flow.app - 99PLN, jednorazowa płatność
Notes.app — wbudowana w macOS

Zakończenie

Podczas pierwszego dnia wykonałem 10 iteracji Pomodoro.

Statystyki z programu FLOW

Czy to dużo czy mało? Nie wiem, ale chodzą głosy, że to dobry wynik.

Feature Flags: Poznaj różnicę między deployem a releasem

Piotr Kowalski — Sun, 22 Jan 2023 16:10:43 +0000

Boisz się deployować po długim czasie? Pewnie dlatego, że dawno tego nie robiłeś i przez to, obawiasz się, że gdy zrobisz to teraz, to pewnie coś wybuchnie.

Zmień to! Wdróż mechanizm Feature Flag.

Co to jest mechanizm Feature Flag?

Feature Flagi to konfiguracja, która jest odpowiedzialna za STEROWANIE dostępnymi możliwościami aplikacji oddanej w ręce użytkownika.

Feature Flagi nie powinny być dostępne publicznie do zmiany, z tego powodu, że blokują one dostęp do feature-a, który jeszcze nie jest ukończony.

Jeśli funkcjonalność jest gotowa, to wtedy możemy ją opublikować, ALE nie musimy. W takim przypadku możemy udostępnić użytkownikowi taką Feature Flagę, aby to on sam sobie ją włączył, jeśli chce wejść w tryb posiadania wersji z oprogramowaniem BETA.

Z czego składa się mechanizm Feature Flag?

Feature Flagi to bardzo prosty mechanizm, bazujący na dwóch elementach:

mapy gdzie kluczem jest string, a wartością boolean:

const featureFlags = {
  secretLink: true,
  specialFeature: true,
  modernToast: false,
};

oraz funkcji sprawdzającej, czy flaga jest włączona:

const isFeatureEnabled = (name) => featureFlags[name];

Jak wykorzystać mechanizm Feature Flag?

Wystarczy, że w miejscu w którym dodajemy nową funkcjonalność, której nie chcemy włączać produkcyjnie, dodamy sprawdzenie:

if (isFeatureEnabled('secretLink')) {
  displaySecretLink();
}

“deploy” vs “release”

“Deploy” to wrzucenie nowego kodu na produkcję. Nie znaczy, że ten kod będzie uruchomiony dla klientów.

“Release” odkrywa funkcjonalność dla użytkownika. Kiedy używamy mechanizmu FF, to de facto release będzie polegał na podmianie feature flagi z false na true.

Dobre praktyki związane z Feature Flagami

Dobrą praktyką jest włączenie nowej funkcjonalności tylko dla określonych użytkowników, po to aby zebrać feedback na jej temat.

Możemy to wykonać bardzo prosto. Otóż dla klientów których sobie wybierzemy, możemy zaktualizować mapę z feature flagami.

Po okresie, w którym otrzymamy feedback od użytkowników nt. ODKRYTEJ funkcjonalności mamy czas, aby ją dopieścić. Następnie możemy wtedy opublikować ją globalnie, czyli dokonać tzw. GENERAL AVAILABILITY.

Gdyby kogoś interesował cykl życia aplikacji, to wiki fajnie to opisuje: https://en.wikipedia.org/wiki/Software_release_life_cycle

Demo 🎉

Stworzyłem bardzo minimalistyczną aplikację, w której jest zaprezentowana istota feature flag: https://piecioshka.github.io/demo-feature-flags/

Test First

Piotr Kowalski — Tue, 05 Apr 2022 07:51:48 +0000

Dziś miałem przyjemność zapoznać się z artykułem na blogu The Clean Code Blog, pt. Test First, autorstwa Uncle Boba. Wpis ten objaśnia, czym jest Test First… i robi to na tyle dobrze, że i ja zrozumiałem.

Test-Driven Development (TDD)

Jak dobrze wiecie, TDD to styl wytwarzania oprogramowania, który skupia się na trzech regułach:

zanim napiszesz kod produkcyjny, napisz test sprawdzający jego działanie,
napisz jak najprostszy kod produkcyjny, który powoduje, że test przechodzi,
dokonaj refaktoryzacji kodu produkcyjnego oraz testu.

Red, Green, Refactor

Te reguły tworzą 3 fazy cyklu życia:

Red — piszesz test, który failuje
Green — piszesz kod produkcyjny, który rozwiązuje test
Refactor (Blue) — ulepszasz obie warstwy

Diagram pochodzi z moich materiałów szkolenia o TDD.

Asymetria

Jasne jest więc, że jakość kodu produkcyjnego zależy od testów, ale czy jakość testów zależy od kodu produkcyjnego? Nie.

Dlatego też mityczne Test First polega na tym, aby:

dbać o kod produkcyjny ZACZYNAJĄC od dbania o testy,
utrzymywać kod produkcyjny ZACZYNAJĄC lepszego zarządzania testami,
myśleć o kodzie produkcyjnym ZACZYNAJĄC od testów.

Oczywiście, w stylu TDD powinniśmy:

ZACZYNAĆ od napisania testów,
oraz ustawić testom NAJWYŻSZY priorytet w wytwarzaniu oprogramowania.

Podsumowanie

O to właśnie chodzi w Test First.

Nie możemy napisać testów i o nich zapomnieć. Kod w testach należy traktować tak samo poważnie (a nawet bardziej poważnie) jak kod produkcyjny. Dlaczego? Uncle Bob podaje świetny przykład.

Jeśli stracimy kod produkcyjny, ale mamy testy, to możemy odtworzyć z niego kod produkcyjny, ale kiedy nie mamy testów, ale mamy kod produkcyjny, to ciężko jest do takiego kodu napisać testy, z uwagi na to, że istnieje w nim duża liczba zależności.

Kod, który nie posada testów określa się mianem legacy. A taki kod rozwija się wolno i z brakiem przekonania, że zmiana nie wygeneruje regresji.

Podoba mi się to wyjaśnienie. Powtórzę jeszcze raz:

Legacy Code, to kod, który nie posiada testów.

Git. Jak dodać własne polecenie w shellu?

Piotr Kowalski — Fri, 28 Jan 2022 14:47:45 +0000

Jak dodać własne polecenie dla Gita? Z tego artykułu dowiesz się, jak możesz rozszerzać możliwości swojego środowiska operującego na repozytoriach Git.

Kroki

Wykonując podane niżej kroki, dodacie nowe polecenie, którego będziecie mogli używać w każdym repozytorium, i nie tylko! Polecanie Gita możemy używać przecież w katalogach, które nie przechowują repozytorium.

1. Stworzyć katalog dla swoich skryptów

mkdir ~/projects/git-scripts

Nazwa git-scripts jest popularną nazwą, zawierają pliki wykonywalne, które to związane są ze światem repozytorium Git.

2. Dodać nową ścieżkę do zmiennej środowiskowej `$PATH`

Każdy shell bazuje na zmiennych środowiskowych. To one zawierają kluczowe informacje dla działania shella.

Wystarczy, że uruchomicie w terminalu polecenie env, a zobaczycie obecną listę zmiennych środowiskowych używanych w obecnym procesie uruchomionego shella.

Zmienne środowiskowe dostępne są w skryptach uruchomionych w shellu.

Jak rozszerzyć zmienną PATH?

Dla Basha

Otwórzcie plik ~/.bash_profile dopisując:

  export PATH="$HOME/projects/git-scripts/:$PATH"

Dla Fisha

Otwórzcie plik ~/.config/fish/config.sh dopisując:
```
  set -gx PATH $HOME/projects/git-scripts/ $PATH
```

Aby zmiana została “zaaplikowana” należy uruchomić nowego shella. Najszybciej to można wykonać, uruchamiając nową zakładkę w terminalu.

3. Stworzyć plik `git-user` w katalogu `git-scripts`

Plik możemy utworzyć za pomocą polecenia:

~/projects/git-scripts > touch git-user

Nie podajemy rozszerzenia. Nazwa pliku będzie poleceniem.

4. Dodać uprawnienia do uruchamiania

To najważniejszy punkt, ponieważ bardzo często o nim się zapomina. Dzięki temu, że plik będzie miał uprawnienia do uruchomienia, będzie mógł być uruchamiany w terminalu jak każde inne polecenie.

Jak nadać uprawnienia do uruchomienia?

~/projects/git-scripts > chmod +x git-user

Aby sprawdzić, czy uprawnienia zostały zaktualizowane, wystarczy wylistować zawartość katalogu:

~/projects/git-scripts > ls -l

-rwxr-xr-x   1 piecioshka  staff   102B Jan 22  2021 git-user

Trzy x oznaczają, że każdy będzie miał możliwość uruchomić ten plik.

Więcej na temat uprawnień do pliku https://pl.wikipedia.org/wiki/Chmod

5. Uzupełnić zawartość pliku

Kopiujemy poniższy listing i wklejamy do pliku ~/projects/git-scripts/git-user:

#!/usr/bin/env bash

name=`git config user.name`
email=`git config user.email`

echo "$name <$email>"

6. Uruchomić polecenie `git user`

A teraz najprzyjemniejsza i zarazem ostatnia część — uruchomienie!

Plik możemy uruchomić na kilka sposobów!

…ze ścieżką do pliku:
```
 ~/projects/git-scripts > ./git-user
```
…po nazwie pliku, będąc w dowolnym miejscu:
```
 ~/tmp > git-user
```
…jako polecenie Git:
```
 ~/ > git user
```

Pojawia się pytania, jak to się stało, że nasze uruchomione polecenie posiada spację i działa? Przecież nazwa pliku takiej spacji nie posiadała!

Git potraktuje polecenie jako “swoje”, tj. będzie można je uruchamiać ze spacją, czyli będzie “pod poleceniem” (eng. subcommand) — wystarczy, że nazwa pliku będzie rozpoczynała się od prefixu git-.

Każde z powyższych poleceń powinno wyświetlić w terminalu:

Piotr Kowalski <piecioshka@example.com>

(btw. nie jest to mój prawdziwy mail)

Moje `git-scripts`

Na zakończenie zachęcam Was do sprawdzenia mojego repozytorium ze skryptami pomagającymi mi w pracy z repozytoriami Git:

https://github.com/piecioshka/git-scripts

Najfajniejsze moim zdaniem jest polecenie git-bars, które to wyświetla statystyki dla danego użytkownika w konkretnym repozytorium jako bar chart!

A tak się prezentują statystyki dla mojego użytkownika w repozytorium tego bloga:

~/projects/blog > git bars "Piotr Kowalski" 2021

30 commits
2021-04     8 ■■■■■■■■
2021-05     5 ■■■■■
2021-07     5 ■■■■■
2021-08     6 ■■■■■■
2021-10     3 ■■■
2021-11     2 ■■
2021-12     1 ■

Zachęcam Was do tworzenia własnych projektów typu git-scripts i wrzucania do komentarzy pod tym artykułem!

Czy wiesz, jak działają zdarzenia w React?

Piotr Kowalski — Fri, 29 Oct 2021 06:45:49 +0000

Podczas realizacji pewnego ficzera w aplikacji, gdzie UI zbudowany był z komponentów Reactowych, natknąłem się na problem z eventami. Jeśli też miałeś / miałaś kłopot ze zdarzeniami w Reactowej aplikacji, to zapraszam do lektury.

Story time

Zadanie polegało na dodanie debounce ¹ do inputa, który był użyty w komponencie wyszukiwarki. A wszystko po to, aby naciśnięcie i trzymanie wciśniętego przycisku ENTER na klawiaturze nie powodowało ciągłego wysłania zapytań HTTP do serwera.

  const keyDownHandler = (evt) => {
    console.log(evt.key); // Display pressed key name
    // ...
  };

  return (
    // ...
    <input
        onKeyDown={keyDownHandler}
    />
    // ...
  )

Wpadłem więc na pomysł, aby handler — który uruchamia się, kiedy zdarzenie keydown zostanie wyzwolone — owrapować za pomocą debounce.

  const keyDownHandler = debounce((evt) => {
    console.log(evt.key); // Ups...
    // ...
  }, 1000);

  // ...

Wówczas pozyskanie informacji z obiektu evt stało się niemożliwe. Dlaczego?

Projekt na StackBlitz gotowy do edycji:
https://stackblitz.com/edit/problem-with-react-events

Kilka słów o `SyntheticEvent`

W pliku package.json projektu, o którym mowa jest zależność:

    "react-dom: ^16.0.0"

A to oznacza, że trzeba powiedzieć kilka słów o starej (w chwili publikacji aktualna wersja to v17.0.2) naturze wrappera SyntheticEvent.

Oficjalna dokumentacja znajduje się na stronie reactjs.org ²

Obiekt SyntheticEvent wrapuje wszystkie natywne eventy, rozwiązując tym samym problem cross platformowości.

Problem cross platformowości polega na tym, że pod różnymi przeglądarkami API może wyglądać inaczej, przez co trzeba pisać wyjątki sprawdzające czy dana funkcja jest dostępna, czy też nie.

Uwaga

Nie wolno używać API na podstawie nazwy przeglądarki.
Taka technika nie jest mile widziana. Należy sprawdzić, czy API jest dostępne w obecnym środowisku, a następnie, gdy jest, użyć go.

Tym samym rejestrowanie zdarzeń (w trybie bubbling) w komponentach Reactowych jest niezwykle proste. Wystarczy skorzystać ze starej nazwy atrybutu HTML, ale w zapisie camelCase. Przykład:

function Example() {
  return (
    <input
      onFocus={(e) => {
        console.log('Focused on input');
      }}
    />
  )
}

Ciekawostka

Jeśli chcemy zarejestrować event w trybie capture, wystarczy zmienić nazwę handlera onFocus na onFocusCapture.

Idąc dalej, w v16 istniała strategia stworzenia puli eventów ³. Została ona wyeliminowana w wersji v17… i bardzo dobrze!

Utworzenie takiej puli wprowadziło mnie w kłopoty.

Otóż kiedy dodałem debounce i przekazałem obecny handler jako callback, to utraciłem dostęp do obiektu zdarzenia evt.

W dokumentacji jest nawet przykład ze zwykłym setTimeout, na którym jest zaprezentowany niedziałający kod:

// @see https://reactjs.org/docs/legacy-event-pooling.html
function handleChange(e) {
  // This won't work because the event object gets reused.
  setTimeout(() => {
    console.log(e.target.value); // Too late!
  }, 100);
}

Jedyny rozwiązaniem, aby w callbacku setTimeout (lub też debounce) obiekt zdarzenia był dostępny, jest wykorzystanie metody persist(), która tworzy funkcję isPersistent zwracającą true.

  /**
   * We release all dispatched `SyntheticEvent`s after each event loop, adding
   * them back into the pool. This allows a way to hold onto a reference that
   * won't be added back into the pool.
   */
  persist: function() {
    // Modern event system doesn't use pooling.
    if (!enableModernEventSystem) {
      this.isPersistent = functionThatReturnsTrue;
    }
  },

Poprzedni system zarządzania eventami oparty na poolingu polegał na tym, że gdy isPersistent zwracała true to dany event nie był usuwany.

Co to jest Event Pooling (eng. grupowanie)?

Podczas tworzenia dużej listy obiektów istnieje problem, że do trzymania w pamięci danych o tych obiektach zostanie wykorzystana duża pamięć.

Dlatego też w silnikach istnieje system Usuwania Nieużytków (Garbage Collection), który to proces usuwa obiekty, do których nie ma już referencji. Świetny mechanizm, który powoduje, że możemy używać aplikacji dłuższy czas.

Problemem jest stworzenie “za dużej” liczby obiektów. Ponieważ może być tak, że tworząc nowe obiekty, nie potrzebujemy już starych, więc po co trzymać je w pamięci i czekać aż proces Garbage Collection zostanie uruchomiony?

Proces usuwania “śmieci” może być kosztowny i trwać na tyle długo, że zostanie to zauważaone w UI. Dobrym przykładem są gry o dużej responsywności, tam zatrzymanie wątku na kilkanąście minilekund może powodować, że gra nie jest solidna.

Ciekawostka

Z poziomu API silnika nie mamy możliwości uruchomienia usuwania śmieci.

Świetnym rozwiązaniem na tego typu problem jest stworzenie stałej liczby obiektów, która to posiada konkretną liczbę utworzonych obiektów. Tym samym, proces Garbage Collection nie musi usuwać nieużytków, ponieważ my ich nie tworzymy, a tylko aktualizujemy już istniejące.

Dlaczego usunięto Event Pooling?

Pooling miał pomagać na problemy z pamięcią, ale dla nowoczesnych przeglądarek (eng. modern browsers) nie pomagał, a wprowadzał tylko problemy (np. opisywany w tym artykule), więc zdecydowano się go usunąć.

Pull Request usuwający Event Pooling:
https://github.com/facebook/react/pull/18969, zmerdżowany do mastera 21 maja 2020.

Ciekawostka

Pomysłodawcą usunięcie Event Pooling był Dan Abramov. Pull Request https://github.com/facebook/react/pull/18216, nie został zmerdżowany, ponieważ pojawił się nowy PR, który realizował więcej np. usunięcie odpowiednich Feature Flag.

Argumenty jakie przytoczył Dan Abramov w swojej propozycji pozbycia się EP:

EP pomagał w tworzeniu eventów, ale nie był pomocny w:
- usuwaniu eventów
- niszczeniu eventów
- reużyciu eventów
nikt inny nie używa takiej techniki
EP jest zagmatwane (np. nie można użyć e.target w fn używającej setState)

Zmiany od wersji v17

Poniżej możecie zobaczyć aktualny (na dzień publikacji artykułu) kod prosto z repozytorium facebook/react, gdzie jest informacja, że nowy system zarządzania eventami nie używa poolingu.

// @see https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/events/SyntheticEvent.js

/**
 * We release all dispatched `SyntheticEvent`s after each event loop, adding
 * them back into the pool. This allows a way to hold onto a reference that
 * won't be added back into the pool.
 */
persist: function() {
    // Modern event system doesn't use pooling.
},

/**
 * Checks if this event should be released back into the pool.
 *
 * @return {boolean} True if this should not be released, false otherwise.
 */
isPersistent: functionThatReturnsTrue,

W changelogu do wersji v17 również jest w wzmianka o nowym sposobie na zarządzenia Eventami — https://reactjs.org/blog/2020/08/10/react-v17-rc.html#no-event-pooling

Moje rozwiązanie problemu

Z uwagi na to, że nie mogę podnieść wersji tej zależności tak łatwo, to najlepszym rozwiązaniem będzie użycie debounce… ale w innym miejscu!

Największym problemem, jest to, że trzymając wciśnięty klawisz ENTER, wysyłane są zapytania HTTP, w takim razie owrapuję tylko wywołanie funkcji wysyłającej zapytanie!

Problem rozwiązany.

Podziękowania

Dziękuję @miloszpp za podsunięcie pomysłu, aby napisać o tym artykuł na blogu.

Bibliografia

Diagram Klas w UML (przykłady w JavaScript)

Piotr Kowalski — Fri, 26 Jun 2020 13:31:35 +0000

Aby opisać projekt obiektowy, wykorzystujący klasy warto, jest wykorzystać Diagram Klas. Dzięki takiemu schematowi jesteśmy w stanie przedstawić relacje między klasami.

Diagram Klas został opracowany za pomocą OMT — Object Modeling Technique w 1991 roku przez James Rumbaugh, który to w 1994 roku przeszedł z General Electric Research and Development Center to firmy Rational Software, gdzie razem z Ivar Jacobson oraz Grady Booch udoskonalili OMT i stworzyli UML - Unified Modeling Language.

Różnice między OMT a UML w formie tabelarycznej: https://www.differencebetween.info/difference-between-uml-and-omt

Oficjalne logo UML

Klasa

W notacji OMT, a tym samym UML, jest to prostokąt składający się z kilku sekcji.

Rysunek w ASCII art:

+---------------------+
| Computer            | Nazwa klasy
+---------------------+
| -startTime: number  | Atrybuty
+---------------------+
| +powerOn(): boolean | Operacje
+---------------------+

Przykład w kodzie JavaScript:

class Computer {
    // Prywatna właściwość
    #startTime = 0;

    // Publiczna metoda
    powerOn() {
        this.#startTime = Date.now();
        // ...
    }
}

// Sprawdźmy to!
const c = new Computer();
c.powerOn();
console.log(c instanceof Computer); // true

•

Relacje

Lista wszystkich relacji w jednym miejscu:

1. Association

PL: Asocjacja

Luźna relacja między klasą A (Computer) oraz klasą B (Developer)

Więcej: https://www.uml-diagrams.org/association.html

Rysunek w ASCII art:

  +-----------+     +----------+
  | Developer |-—-->| Computer |
  +-----------+     +----------+

(ciągła linia ze strzałką)

Przykład w kodzie JavaScript:

  class Computer {
      // ...
  }
  class Developer {
      workOn(c /* Computer */) {
          // ...
      }
  }

  // Sprawdźmy to!
  const c = new Computer();
  const d = new Developer();
  d.workOn(c);

•

2. Inheritance / Generalization (is-a)

PL: Generalizacja, Dziedziczenie

Klasa B (Laptop) jest potomkiem klasy A (Computer).

Klasa B (Laptop) będąca dzieckiem, dziedziczy cechy rodzica klasy A (Computer).

Więcej: https://www.uml-diagrams.org/generalization.html

Rysunek w ASCII art:

  +--------+      +----------+
  | Laptop |-—--|>| Computer |
  +--------+      +----------+

(ciągła linia z pustym trójkątem)

Przykład w kodzie JavaScript:

  class Computer {
      powerOn() {
          // ...
      }
  }
  class Laptop extends Computer {}

  // Sprawdźmy to!
  const l = new Laptop();
  l.powerOn();
  console.log(l instanceof Computer); // true

•

3. Realization / Implementation

PL: Realizacja / Implementacja

Relacja między interfejsem (Product) a klasą (Computer).

Więcej: https://www.uml-diagrams.org/realization.html

Rysunek w ASCII art:

  +----------+           +------------------+
  | Computer | - — - - |>| ProductInterface |
  +----------+           +------------------+

(przerywana linia z pustym trójkątem)

Przykład w kodzie TypeScript:

  interface Product {
      getPrice(): number;
  };

  class Computer implements Product {
      getPrice() {
          return 99.95;
      }
  }

  // Sprawdźmy to!
  const c = new Computer();
  c.getPrice(); // 99.95
  // ...

•

4. Dependency

PL: Zależność

Metoda klasy B (Computer) oczekuje obiektu klasy A (Owner).

Więcej: https://www.uml-diagrams.org/dependency.html

Rysunek w ASCII art:

  +---------+       +----------+
  | Sticker | - - > | Computer |
  +---------+       +----------+

(przerywana linia ze strzałką)

Przykład w kodzie JavaScript:

  class Sticker {
      stick(t /* Computer */) {
          // ...
      }
  }

  class Computer {
      // ...
  }

  // Sprawdźmy to!
  const c = new Computer();
  const s = new Sticker();
  s.stick(c);

•

5. Aggregation (part-of, has-a)

PL: Agregacja

Klasa B (CPU) jest częścią klasy A (Computer).

Obiekt klasy A (Computer) ma dostęp do publicznych składowych klasy B (CPU).

Więcej: https://www.uml-diagrams.org/aggregation.html

Rysunek w ASCII art:

  +----------+     +-----+
  | Computer |<>---| CPU |
  +----------+     +-----+

(ciągła linia z pustym rombem)

Przykład w kodzie JavaScript:

  class CPU {}
  class HardDrive {}

  class Computer {
      constructor(cpu, hardDrive) {
          this.cpu = cpu;
          this.hardDrive = hardDrive;
      }
  }

  // Sprawdźmy to!
  const c = new Computer(new CPU(), new HardDrive('500GB'));

•

6. Composition

PL: Kompozycja

Specjalny rodzaj agregacji.

Obiekty klasy B żyją i umierają wraz z obiektami klasy A.

Klasa B nie może istnieć samodzielnie.

Więcej: https://www.uml-diagrams.org/composition.html

Rysunek w ASCII art:

  +----------+      +-----+
  | Computer |<x>---| CPU |
  +----------+      +-----+

(ciągła linia z wypełnionym rombem)

Przykład w kodzie JavaScript:

  class CPU {}
  class HardDrive {}

  class Computer {
      constructor() {
          this.cpu = new CPU();
          this.hardDrive = new HardDrive('500GB');
      }
  }

  // Sprawdźmy to!
  const c = new Computer();

•

Przykład

Poniżej realizacja Diagramu Klas, który opisuje budowę zamku, oraz relacje z pracownikami:

Diagram Klas mojego autorstwa. Temat — Zamek. 2010 rok.

Co to jest runtime?

Piotr Kowalski — Wed, 17 Jun 2020 11:00:23 +0000

Runtime — czas wykonania programu. I tutaj mógłbym zakończyć wpis, ale postanowiłem, że go jeszcze trochę rozwinę. Co to właściwie znaczy “runtime”?

Błąd został zauważony w runtime, czy kompilacji?

Zdefiniujmy dwa ważne procesy:

Kompilacja, czyli stworzenie pliku programu, na podstawie kodu źródłowego, który będzie mógł być uruchomiony w środowisku uruchomieniowym.

Przykład:
Kod w TypeScript, aby został uruchomiony w przeglądarce, musi zostać skompilowany za pomocą kompilatora tsc do składni języka JavaScript.

oraz:

Runtime, czyli czas liczony od momentu, w którym program zostaje uruchomiony, działając w swoim środowisku uruchomieniowym, aż do momentu jego wyłączenia.

Przykład:
Aplikacja uruchomiona w przeglądarce posiada swój runtime, dopóki użytkownik nie zamknie taba.

“Runtime do uruchomienia języka X”

Często w rozmowie między developerami, możemy usłyszeć, że słowem “runtime” zostało opisane “narzędzie”, a może nawet środowisko, które uruchamia programy.

Przykłady z najpopularniejszych narzędzi typu “runtime”:

Node.js
- Oryginalny opis projektu: Node.js JavaScript runtime
- https://github.com/nodejs/node
Deno
- Oryginalny opis projektu: A secure runtime for JavaScript and TypeScript
- https://github.com/denoland/deno
Java Runtime Environment
- https://www.oracle.com/java/technologies/javase-jre8-downloads.html

Błędy

z kompilacji pliku napisanego w TypeScript do składni JavaScript:

TS2322: Type '(p: any) => void' is not assignable to type 'void'.
TS2339: Property 'url' does not exist on type 'Page'.
TS2307: Cannot find module './service'.
TS2529: Duplicate identifier 'Promise'.

z runtime-u aplikacji napisanej w JavaScript uruchomionej w przeglądarce:

Uncaught TypeError: undefined is not a function
Uncaught ReferenceError: Invalid left-hand side in assignment
Uncaught TypeError: Converting circular structure to JSON
Uncaught TypeError: Cannot read property ‘foo’ of null
Uncaught RangeError: Maximum call stack size exceeded

Dziękuję WarsawJS 💛

Piotr Kowalski — Mon, 08 Jun 2020 06:51:47 +0000

Chciałem serdecznie podziękować całej społeczności WarsawJS, którą miałem przyjemność współtworzyć przez minione ponad 5 lat.

W społeczności siła!

Maj 2020 był ostatnim miesiącem, podczas którego byłem odpowiedzialny za wydarzenia organizowane dla społeczności WarsawJS.

Przez ten okres byłem zaangażowany w realizację:

69 meetupów (w tym 2 online)
- podczas 6 z nich również występowałem jako prelegent
43 workshopów (w tym 2 online)
- podczas 26 z nich również występowałem jako trener
9 szkoleń komercyjnych
- podczas 3 z nich również występowałem jako mentor
2 konferencje
- ConFrontJS 2018 & 2019
1 hackathon
- Edukaton 2018

Chciałbym Wam opowiedzieć o każdym wydarzeniu, ale nie jest to możliwe. Czuję, że przez te ponad 5 lat organizowania wydarzeń nazbierałoby się tyle historii, że moglibyśmy stworzyć książkę, która z pewnością mogłaby stać na półce w Empiku.

•

Artykuły o wydarzeniach WarsawJS (na tym blogu)

WarsawJS — Nowa Organizacja w Warszawie
WarsawJS Meetup:
- 2014: #1 #2 #3 #4
- 2015: #5 #6 #7 #8 #9 #10 #11 #12 #13 #14 #15 #16
- 2016: #17 #18 #19 #20 #21 #22 #23 #24 #25 #26 #27
- 2017: #28 #29 #30 #31 #32 #33 #34
WarsawJS Workshop:
- 2016: #1
- 2017: #5

Wszystkie wpisy dostępne są pod tagiem #warsawjs.

•

Jak to się zaczęło?

Wszystko zaczęło się od kiełbasy smażonej w jednym z żoliborskich parków. Serio! Na początku prowadziliśmy rozmowy internetowe, i telefoniczne, ale pewnego dnia spotkaliśmy się w 3 pary na Kępie Potockiej, gdzie omówiliśmy temat nowej organizacji / inicjatywy.

Wtedy jeszcze nie NIKT nie wiedział, że będzie to tak duży projekt, który będzie zrzeszał tyle tysięcy osób w social mediach oraz, że znajdą się inne osoby chętne do organizowania wydarzeń.

Po pierwszym meetupie, miałem poczucie, że to może być bardzo fajna rozrywka dla środowiska Front-end. Po pracy programiści mogli zrobić coś więcej niż tylko przyjść do domu i zamknąć się w swoich czterech ścianach.

Spotkania przy barze spowodowały, że ludzie przychodzili nie tylko, aby wysłuchać kilku prezentacji, ale także poznać nowe osoby, dowiedzieć się jak to jest w innych firmach, a nawet znaleźć swojego kolejnego pracodawcę.

Networking po prelekcjach był jednym z fajniejszych momentów w miesiącu, jakie wówczas przeżywaliśmy jako organizatorzy. Za każdym razem mieliśmy przyjemność poznać tylu ludzi i nawiązać tyle - krótszych lub dłuższych - relacji, że spokojnie wystarczyłoby ich na każdy z 4 weekendów w miesiącu.

Dla mnie WarsawJS było pierwszym regularnym meetupem dla programistów JavaScript, na jaki przychodziłem. Wcześniej byłem raz na meet.js i było fajnie. Szkoda, że te spotkania nie były regularne. Stąd też narodził się pomysł, aby stworzyć lokalną grupę dla programistów języka JavaScript. Nie mieliśmy ambicji, aby konkurować z meet.js i być w każdym mieście w kraju. Interesowała nas tylko Warszawa.

Trudne początki — “Kosa” z meet.js

Wiecie, że mieliśmy kosę z meet.js? Takie były początki, niestety. Podczas pierwszego meetupu nie wyraziliśmy się dokładnie jaki jest cel i sens spotkań naszej grupy. Przyznam, że zżarła nas trochę trema. Nie mieliśmy kartki z tekstem jaki powinniśmy wypowiedzieć ze sceny.

Cały spór związany był z tym, że ze sceny zostało wypowiedziane zdanie, że “w stolicy nie ma spotkań dla programistów języka JavaScript”. Oczywiście nie była to do końca prawda, bo takie spotkania były, a raczej bywały. Zabrakło słowa “regularnych” spotkań i wtedy nie byłoby kłopotu — przynajmniej tak mi się wydaje. Wówczas organizator meet.js — Damian Wielgosik — wyraził głośno swoje poglądy na temat naszej organizacji na grupie dla organizatorów warszawskich spotkań. Trochę nam się dostało, ale po kilku tygodniach sytuacja się unormowała, a my robiliśmy swoje.

Regularne spotkania to klucz do sukcesu — zależało nam na tym, aby nie robić przerw wakacyjnych ani ferii zimowych. Zwykle na wydarzeniach wakacyjnych bywało więcej osób niż zwykle — a to nas tylko cieszyło!

Regularność stała się naszym mottem!

I tak w ciągu minionych 69 miesięcy zorganizowaliśmy 69 meetupów.
Regularnie? O tak. I to jak bardzo!

W każdą drugą środę miesiąca organizowaliśmy spotkania dla naszej społeczności. Na początku testowaliśmy, który dzień tygodnia będzie najlepszym na tego typu wydarzenia.

Poniedziałek i Piątek — słaba frekwencja,
Wtorek - zajęty zwykle przez jakieś sprawy osobiste,
…a w Czwartek świat IT spędza na tzw. czwartkowych biesiadach z ludźmi z pracy.

Stąd też wybrana została środa. Środek tygodnia okazał się najlepszy. Dlaczego druga środa miesiąca? Po odrzuceniu skrajnych tygodni (kiepska frekwencja) zostawała środa w trzecim tygodniu. Ten termin natomiast był zarezerwowany przez WRUG, tj. spotkania społeczności języka Ruby. Z organizatorami WRUGa żyliśmy od początku bardzo dobrze, więc aby nie wchodzić sobie w drogę wybraliśmy drugą środę miesiąca.

Dziś, relacje z meet.js są bardzo dobre. W zeszłym roku wystąpiłem pierwszy raz na ich scenie, a osoby organizujące warszawskie edycje wystąpiły na scenie WarsawJS.

Konflikt zażegnany. Uff! ;)

Kalendarium

Ważne momenty w historii społeczności:

2014-06-15

Oficjalne rozpoczęcie działalności

Kępa Potocka — w tym miejscu nastąpiło pierwsze spotkanie organizatorów WarsawJS. Podczas grilla na Żoliborzu poznaliśmy się i mogliśmy obgadać cel stworzenia takiej inicjatywy jaką był wtedy WarsawJS.

Poniżej znajdziesz zrzut ekranu z pierwszego maila w mojej skrzynce odbiorczej dotyczącego “WarsawJS”.
2014-09-14

Nagranie pierwszego zaproszenia na meetup

Razem z Kasią — moją partnerką (która po kilku wydarzeniach dołączył do grona organizatorów), nagraliśmy zaproszenie na pierwsze wydarzenie. Pamiętam jak wtedy poczułem, że jest to czas w którym przestałem się obawiać swojego wizerunku w internecie.

Każdy “YouTuber” na początku czuje taki pewnego rodzaju wstyd, że ludzie zaczną go oceniać itd. Przełamałem się i korzystając z telefonu (oraz oparcia łóżka jako statywu) nagraliśmy ZAPROSZENIE. Warunki mieszkalne nie pozwalały uzyskać jednolitego tła, stąd potrzebne było niemałe przemeblowanie.

Dziś uważam, że ten film jest beznadziejny. Wszystko jest w nim do poprawy. Ale z jednej rzeczy jestem dumny. Z tego, że to zrobiłem. Przełamałem swój lęk przed publicznym “upokorzeniem”. To dla chłopaka z małej miejscowości jak ja, było sporym wyzwaniem.

Po publikacji tego nagrania chciałem iść dalej i w naszym gronie organizacyjnym zgodziliśmy się na to, aby nagrać również PODZIĘKOWANIE za przyjście na wydarzenie. Powstały dwa takie filmy. To jest drugi:

Pamiętam jak dziś, że po tym filmie stwierdziliśmy, że jednak takie filmy nic nie wnoszą, więc zrezygnowaliśmy z takiego formatu.

Zaproszenia wideo zadomowiły się u nas na dobre. Każdy meetup promowany był uprzednio zmontowanym zaproszeniem. Często jeździliśmy po różnych miejscach w stolicy, aby pokazywać jak piękne jest nasze miasto.

Celem takich “filmików” było uatrakcyjnienie zaproszenia. Większość wydarzeń w social mediach promowanych jest przez suchy tekst w opisie wydarzenia. Zupełnie inaczej wygląda sytuacja kiedy to możemy obejrzeć film nagrany specjalnie na wydarzenie. Taki format nie był wówczas jeszcze tak popularny jak dziś, więc pierwsze filmy zdobywały “fajną” oglądalność.

Jak wyglądała produkcja takiego materiału?. Zdradzę wam pewien “sekret”: Każda minuta filmu wymaga kilku godzin montażu. Mój rekord wynosi ok. 15 godzin montażu na kilkuminutowe wideozaproszenie. Podczas tworzenia takich produkcji bardzo wiele się nauczyłem.
2014-09-16

Pierwszy meetup — WarsawJS Meetup #1

Pierwsze wydarzenie było dla mnie czymś ABSTRAKCYJNYM. Pierwszy raz organizowałem publiczne wydarzenie, na które mógł przyjść każdy bez uprzedniej rejestracji. Totalnie nie wiedzieliśmy, kto jest na sali i jakiej frekwencji mamy się spodziewać.

Rzeczywistość w zupełności przerosła nasze oczekiwania! Na pierwsze spotkanie przyszło ponad 100 osób. Wszystkie krzesełka zajęte. Nawet na podłodze, na której zasiadło kilka osób zabrakło miejsca. To był dla nas SZOK! Nie sądziliśmy, że na nasze wydarzenie ludzie zjawią się tak licznie.

Tego dnia wcieliłem się również pierwszy raz w rolę prelegenta. To było coś dziwnego. Kolejny raz w życiu nie poznawałem swojego głosu, kiedy na scenie opowiadałem o aplikacjach Smart TV.

Prezentacja z mojego wystąpienia jest dostępna na kanale YouTube.

Po prelekcjach w części networkingowej mieliśmy już ochotników na kolejne wydarzenia! To było niesamowite! Długo się nie zastanawiając przeszliśmy więc do organizowania kolejnego wydarzenia.

•

Meetupy w “Państwomiasto”

Rok 2014

Rok 2015

Pierwsze urodziny 🎉

(2015-09-16)

Pierwszy rok za nami. To były piękne miesiące. Ciągle się uczyliśmy organizowania meetupów. Dalej nie mieliśmy przekonania, że wydarzenia są już wystarczająco dobre.

“To był najfajniejszy meetup jak do tej pory!” — takie miałem odczucia, zaraz po zakończeniu wydarzenia. Mieliśmy bardzo dużą frekwencję, a i pojawiło się więcej osób do pomocy przy wydarzeniu.

Więcej zdjęć w galerii.

•

Rok 2015

Piękni i Młodzi

•

2016-05-11

Pierwsza kobieta na scenie — Paulina Kamińska

Dopiero podczas 21. edycji WarsawJS Meetup mogliśmy wysłuchać pierwszej prelekcji poprowadzonej przez kobietę. Podczas wydarzeń mogliśmy zaobserwować wiele kobiet, ale dopiero Paulina odważyła się wyjść na scenę. Pragnę Jej z tego miejsca serdecznie pogratulować odwagi. Brawo i wielkie dzięki Paulina!

Wielokrotnie rozmawialiśmy co możemy zrobić, aby zachęcić kobiety do wyjścia na scenę. To trudny temat. Nie chcieliśmy urazić tej części społeczności poprzez wysyłanie jakichś specjalnych zaproszeń itp.

Naszym celem jest i było traktowanie wszystkich na równi i dbanie o to by wszyscy czuli się komfortowo. Spotkania przestrzegały Berlińskiego Code of Conduct, który fajnie nadmienia zasady jakie powinny panować w relacjach między uczestnikami.

•

Rok 2016

Drugie urodziny 🎉

(2016-09-14)

“To już dwa lata regularnych wydarzeń! Wow!” — a takie przemyślenia naszły mnie podczas tego wydarzenia. To były fajne urodziny. Mieliśmy tort oraz “orkiestrę”! To było coś!

Już wiedzieliśmy jak powinien wyglądać urodzinowy meetup. Każdy kolejny event tego typu był z tortem i muzyką!

Mój kolega Rafał zabrał ze sobą gitarę, aby zagrać nam melodię Sto Lat, która zabrzmiała na początku wydarzenia, mogliśmy wtedy nawet zaśpiewać! Ale to był przyjemny moment!

Na wydarzenie przyjechała siostra Kasi, Natalia, która służyła pomocą! Bardzo miło się robiło na sercu, gdy tyle osób wyraziło swoją wdzięczność za trud włożony w organizację.

•

Rok 2016

2016-12-04

Pierwszy workshop — WarsawJS Workshop #1

Po 2 latach organizowania meetupów chcieliśmy czegoś nowego. Szkolenia! O takiej formie spotkań rozmawialiśmy już od początku naszego istnienia. Nie chcieliśmy jednak chwytać byka za rogi od razu. Zebraliśmy odpowiednie doświadczenie w organizowaniu publicznych wydarzeń, więc mogliśmy podwyższyć sobie poprzeczkę.

Całodniowe wydarzenie to trochę inny rodzaj eventu niż wieczorne spotkanie. Liczba zadań do wykonania jest trochę bardziej obszerna i “rozległa”, tj. podczas organizacji tego typu wydarzenia jest więcej zadań logistycznych oraz takich, które mogą być oddelegowane do innych osób.

Dla mnie szkolenia WarsawJS były perfekcyjnym miejscem do edukacji.

Uwielbiam uczyć ludzi, szczególnie pasjonatów, a osoby przychodzące na wydarzenie w niedzielę na 10:00 zaliczają się do takiego grona bez dwóch zdań!

Uśmiech na twarzach uczestników oraz ta wdzięczność po szkoleniu wynagradza trud jaki trzeba było ponieść przy organizacji i podczas przygotowań do roli trenera. W ciągu tych ponad 3 lat szkoleń w roli trenera występowałem aż 26 razy — to prawie 60% wszystkich workshopów!

W tym roku postanowiłem, że wszystkie szkolenia, która przyjdzie mi prowadzić będę prowadził w języku angielskim. Znam swój poziom angielskiego i wiedziałem, jak trudno będzie mi przekazać wiedzę w tym języku. Całe szczęście WarsawJS to miejsce w którym każdy może się rozwijać, nawet ja!

Więcej na temat pierwszego workshopu możecie znaleźć w osobnym artykule.

Uruchomienie nowej inicjatywy w organizacji wymusiło na nas zmianę nazw wydarzeń. Spotkania od tego momentu nie nazywały się “WarsawJS” tylko “WarsawJS Meetup”. Była to moim zdaniem naturalna aktualizacja. Nawet nie wiecie w ilu miejscach trzeba było zmienić tą nazwę :-D
2017-01-11

Pierwsza zmiana miejsca dla inicjatywy WarsawJS Meetup

Wszystkie meetupy w ciągu pierwszych dwóch lat z hakiem organizowaliśmy w kawiarni Państwomiasto przy ul. Generała Andersa 29 (Śródmieście Północne). Było to świetne miejsce na spotkania towarzyskie. Z uwagi na rosnącą frekwencję musieliśmy podjąć jakieś kroki, aby zapewnić komfortowe warunki dla ok. 120 osób, którzy regularnie pojawiali się na eventach. Stąd podjęliśmy decyzję o zmianie miejsca.

Przenieśliśmy się do pięknego budynku Warsaw Spire usytuowanego pod adresem pl. Europejski 1, który na 4. piętrze mieścił restaurację “The Place”.

Dało się odczuć inny klimat. Po pierwsze forma współpracy z restauracją polegała na tym, że wynajmujemy całą przestrzeń. Stąd też w restauracji po godzinie 17:00 mogli przebywać tylko uczestnicy wydarzenia. Zrobiło się wtedy bardziej “profesjonalnie” (jeśli w ogóle można użyć takiego stwierdzenia w kontekście meetupu).

Nowa sala spokojnie mogła pomieścić nawet 150 osób w części konferencyjnej. Miało to swoje uroki. Jednym z nich był na pewno OGROMNY taras, na którym można śmiało zorganizować networking albo… inny meetup!

•

Wspieramy WOŚP

W 2017 roku wpadliśmy na pomysł, aby stworzyć licytację koszulki z logiem WarsawJS, na rzecz Wielkiej Orkiestry Świątecznej Pomocy.

Koszulka z podpisami społeczności

Koszulka został sprzedana za ok. 300 zł dla Krzysztofa, która był ze sceny poprosić społeczność aby każdy z osoba podpisał się na koszulce. Koszulka została powieszona u Krzysztofa w biurze. Pieniądze zostały przekazane na WOŚP.

Zdjęcia z WarsawJS Meetup #30

•

Meetupy w “The Place”

2/3 składu organizacyjnego

Przed wydarzeniem. Organizatorzy i prelegenci.

Nie wiem co tu się dzieje... ale kodziwo leci!
Zdjęcie pewnie robione podczas jednego z moich lightning talków.

•

Workshop prowadzony samodzielnie — WarsawJS Workshop #9 — RxJS

(2017-08-20)

To szkolenie było dla mnie wyjątkowe. Pierwszy (i jak na razie ostatni) raz zdarzyło się tak, że był tylko jeden trener — i dziwny los chciał, że to ja zostałem tym samotnym trenerem. Liczba osób na szkoleniu była bliska 50. To było najtrudniejsze szkolenie jakie miałem kiedykolwiek w dziejach WarsawJS. Kilka dni przygotowań, kilka zadań przygotowanych na potrzeby przekazywania wiedzy podczas szkolenia oraz tyle osób na ogromnej sali słuchającej tylko mnie. To był hardcore.

To wydarzenie było również niepowtarzalne pod tym kątem, że pojawiło się nami wiele osób, które już znałem oraz te które poznałem w przyszłości.

Można powiedzieć to, że to było najważniejsze szkolenie w historii WarsawJS.

•

Trzecie urodziny 🎉

(2017-09-13)

To były zdecydowanie najlepsze urodziny ever! Tym razem melodię do Sto Lat zagrał nam DJ! Mieliśmy cudowne fioletowe światełka! Zdjęcia robił nam świetny fotograf (pozdro Michał). Dodatkowo, na bębnach przygrywał nam pan w skórzanej kamizelce — to był czaaad!

Trudno wyobrazić sobie lepsze urodziny społeczności. Na wydarzenie przyszła ogromna liczba osób! Była też mocna ekipa ode mnie z pracy! Zerknijcie sobie na zdjęcia powyżej — pięknie! Wtedy byliśmy “mocni w te klocki”!

Coś na oko, to było z 500 osób :-D

•

Przyjaciele. Ekipa Hrubieszowska!
Podczas #39 meetupu, mieliśmy silną reprezentację z naszego rodzinnego miasta.

•

Pierwsza wzmianka w gazecie

(2018-02-12)

Ale się zdziwiłem, kiedy to przeczytałem o szkoleniach WarsawJS w gazecie, w rozdziale poświęconym branży IT i jak do niej “wejść”.

Artykuł w jakimś czasopiśmie o tym, jak wejść do branży IT.

Obok naszej inicjatywy były także inne popularne organizacje takie jak:

Geek Girls Carrots, Rails Girls, Django Girls, Girls Who Test
DevMeetings (to tutaj pobierałem pierwsze nauki inżynierskie)
Coders Lab

Bardzo miło się czyta w gazecie o wydarzeniu, za które jest się odpowiedzialnym, a które jest polecane przez niezależne podmioty. Uzupełniam motywację do organizowania kolejnych workshopów!

•

Rok 2018

Po drodze pojawiło się 42-gie spotkanie. Dlaczego jest tak wyjątkowe? Po pierwsze to ulubiona liczba Piotra Zientary, po drugie ta liczba to odpowiedź na ostateczne pytanie o życie, wszechświat i wszystko.

•

2018-02-16

Pierwszy hackathon — Edukaton 2018

Razem z ekipą z Kids Code Fun oraz Techsoup Europe zorganizowaliśmy kilkudniowy hackathon. Tematem przewodnim wydarzenia była walka z fake news-ami.

Zadaniem uczestników było wyprodukowanie aplikacji dla osób najbardziej podatnych na oszustwa w sieci (tj. dzieci i osób starszych), które będą uczyć odporności na manipulację w internecie, jaką są np. fake news, phishing, oszustwa internetowe, clickbait, łańcuszki wyłudzające dane osobowe itp.

Wydarzenie zbiegło się z wdrożeniem dużego projektu z firmie w której wówczas pracowałem przez co czasu na odpoczynek nie było w ogóle. Miałem dwa zajęcia: Edukaton albo ipla.tv. To był trudny czas dla mnie, ale także dla innych.

Projekt był “skazany” na sukces i tak też się zakończył. Po wydarzeniu, każdy mógł odetchnąć z ulgą, że to już koniec.

Z tego miejsca składam serdeczne podziękowania ekipie:
- Van Anh Dam
- Tomasz Dobrowolski
- Karolina Wysocka
- Katarzyna Grabowska
- Piotr Zientara
- oraz innym, którzy również przyczynili się do tego wydarzenia!
Podczas tego wydarzenia mieliśmy możliwość współpracy z byłą Minister Cyfryzacji panią Anną Streżyńską, którą zaprosiliśmy do Jury.

Zdjęcia w galerii na fanpage’u.
2018-10-10

Nagrywanie wydarzenia WarsawJS Meetup #50

Dlaczego to takie wyjątkowe? Ponieważ spotkanie nagrywałem pierwszy raz ja! 49 minionych spotkań było nagrywanych przez Kamila Grabowskiego.

Yeti, współpracować z Tobą, to była przyjemność!

Nie sądziłem, że nagrywanie wydarzeń, jest tak trudne logistycznie, jak i technicznie. Mogę śmiało powiedzieć, że podczas tego wydarzenia konfiguracja sprzętu mnie przerosła.

Chciałem z tego miejsca podziękować serdecznie Danielowi Szymankowi, który pomógł mi w całym procesie. Thanks man!

Poniżej znajdziesz vlog z tego dnia:
2018-10-28

Pierwsza konferencja — ConFrontJS 2018

Stwierdziliśmy, że zrobimy konferencję, a co! To było jedno z trudniejszych wydarzeń jakie organizowaliśmy. Sporo rzeczy do załatwienia. Lista zadań nie miała końca. Założona frekwencja potwierdzona.

Najśmieszniejsze w tym wszystkim było to, że przygotowania do wydarzenia rozpoczęliśmy 3 miesiące wcześniej. Kto inny organizuje tak duże przedsięwzięcie w tak krótkim czasie? No chyba tylko zawodowcy, którzy mają już sztab ludzie ze zdefiniowanymi odpowiedzialnościami oraz doświadczenie w imprezach tego typu.

Podczas tego wydarzenia nawiązaliśmy współpracę z Barrym Solone, który był tzw. MC, tj. Master of Ceremony albo po prostu konferansjerem, czyli osobą z mikrofonem prowadzącą całe wydarzenie. Świetna charyzma i jego żart sceniczny nie dawały się zapomnieć, stąd też chcieliśmy “mieć” Barrego również na kolejnej konferencji.

Zdjęcia w galerii na fanpage’u

•

Czwarte urodziny 🎉

(2018-09-12)

“Kolejne urodziny za nami” — tak sobie pomyślałem. Fajnie, że to już cztery lata organizowania wydarzeń. Po tych latach pojawiły się w głowie myśli, że już chyba wiemy jak się robi te wydarzenia ;)

Mieliśmy torcik, który zjedliśmy razem ze społecznością.

“Moja” ekipa z Cyfrowego Polsatu również nie zawiodła! Fajnie, było zobaczyć te twarze, szczególnie po tych kilku miesiącach jakie minęły od kiedy zakończyłem pracę w tej firmie.

•

2018-12-12

Ostatni meetup w “The Place”

Kilka dni przed wydarzeniem dowiedzieliśmy się, że restauracja zrywa umowę. Wszystko za sprawą zmiany właścicieli i innego planu na przestrzeń, którą wynajmowaliśmy. Całe szczęście mogliśmy zorganizować jeszcze jeden meetup.

Poznajcie mojego brata Pawła oraz jego syna Kordiana. Razem z chłopakami ogarnęliśmy kilka razy live streaming! Dzięki panowie za pomoc!
Który jest najprzystojniejszy? W sumie to wiem, tak tylko pytam :)

Po wydarzeniu rozpoczęły się “szaleńcze” poszukiwania kolejnej sali.

•

2019-04-09

Pierwszy szkolenie komercyjne — WarsawJS MasterClass #1

Po kilku latach organizowania wydarzeń dla społeczności, wpadliśmy na pomysł, aby spróbować zorganizować szkolenia komercyjne, których celem jest tzw. deep dive w dany temat. Szkolenia te są dla osób, które już posiadają wiedzę w danym obszarze, ale chcą “wejść” na wyższy poziom.

Trenerami zawsze były programiści ze sporym doświadczeniem w branży, a co najważniejsze mieli potwierdzone przez nas doświadczenie w przekazywaniu wiedzy.

W ciągu roku zorganizowaliśmy 10 tego typu szkoleń. Bardzo ciekawe doświadczenie organizowania dwudniowych wydarzeń. Trenerzy muszą rozkładać siły, a organizatorzy zaplanować wydarzenie na dłuższy czas.

•

WarsawJS w Himalajach!

(2019-05-23)

We czwartek rano, otrzymuję maila od załącznikiem od jednego z trenerów. Przeglądam załączniki, a tem logo WarsawJS na piersi, pośród gór!

Jeden z naszych stałych uczestników meetupów oraz kilkukrotny trener i prelegent, Robert, wyruszył w podbój Himalajów w koszulce WarsawJS!

Piękny to widok, logo WarsawJS w górach!

•

Piąte urodziny 🎉

(2019-09-11)

To wydarzenie przejdzie do historii. Po kilku miesiącach organizowania wydarzeń w Golden Floor w tej samej sali, nagle to jedno wydarzenie miało być zorganizowane w zupełnie inne sali. Nie spodziewaliśmy się tego, że pojawią się takie problemy techniczne. W sali dostępny był tylko jeden mikrofon oraz jeden głośnik, z brakiem możliwości podłączenia się ze sprzętem, aby zbierać sygnał audio. Gdybyśmy niczego nie załatwili to live streaming (oraz materiały) z tego wydarzenia miałyby audio z sali — czyli kiepską jakość.

20 minutowe opóźnienie jakie wtedy zaliczyliśmy było spowodowane podłączeniem nowego audio mixera, który udało się nam pozyskać 5 minut przed rozpoczęciem wydarzenia. Jestem wdzięczny Michałowi (naszemu fotografowi), który uratował nas i skonfigurował mixer w ekstremalnym czasie!

Jak zwykle mieliśmy tort, a nawet znalazła się butelka szampana! Dziękujemy Golden Floor za pomoc w krojeniu i generalnie obsłudze podczas takiego “specjalnego” wydarzenia.

Społeczność! Piękny kadr, pozwala na ujrzenie części społeczności,
która regularnie pojawiała się na wydarzeniach!

Wydarzenie (ta oficjalna część) zakończyła się koncertem Barrego Solone, który od czasu do czasu występował na scenie w roli konferansjera.

Barry ma przepotężny głos, bardzo lubię go słuchać i oglądać. Ten facet ma niesamowitą charyzmę! Ciekawostka: Barry kilka lat temu wystąpił w jednym z odcinków serialu Londyńczycy.

•

Rok 2019

•

2019-12-07

Druga konferencja — ConFrontJS 2019

To było coś! Największe wydarzenie jakie organizowaliśmy!

Prawie 300 uczestników, 17 prelegentów oraz 18 wolontariuszy! To tylko niektóre liczby, które opisują z jakim rozmachem było zorganizowane to wydarzenie. Całe wydarzenie prowadził Barry Solone. Znacie Barrego z poprzedniej edycji konferencji, ale także z niektórych meetupów, które prowadził.

Przygotowanie do wydarzenia rozpoczęliśmy tym razem 4 miesiące przed wydarzeniem. Podjęliśmy decyzję, że chcemy podwoić liczbę uczestników! To było dopiero wyzwanie. Wyciągnęliśmy wnioski z pierwszej edycji i dzięki temu, mieliśmy zorganizować jeszcze lepszą konferencję. I taka też była! Średnia ocen w ankietach była wyższa niż przed rokiem. Brawo!

Podczas tego wydarzenia byłem człowiekiem orkiestrą: nagrywanie wydarzenia, nagrywanie wywiadów, nagrywanie aftermovie itd. Zobaczcie podsumowanie tego wydarzenia w telegraficznym skrócie:

Tym razem liczba zadań była przeogromna — to jakby liczbę zadań z meetupu, oraz workshopu scalić i pomnożyć dwa razy. Praca całymi dniami dała nam w kość.

To był najtrudniejszy event jaki zorganizowaliśmy. Grudzień 2019, to był miesiąc który nas zmienił.

Zerknijcie tylko na ten timeline:

Wyświetl ten post na Instagramie.

Post udostępniony przez WarsawJS (@warsawjs.photos) Gru 3, 2019 o 2:18 PST

•

Rok 2020

Szkolenia — WarsawJS Workshop

Mocna ekipa z drugiego szkolenia, które było poświęcone językowi JavaScript. Nie ma nic piękniejszego, niż współpraca z ludźmi, którzy są zaangażowani.

Podsumowanie wydarzenia przez trenera WarsawJS Workshop #5

Jedno z moich ulubionych zdjęć. Prosto z Matrixa! Wiecie dlaczego tak dobrze tutaj wyglądam? Bo szkoliłem ludzi z pasją. Kiedy wkładasz w coś serce, to nie ważne, że czegoś nie wiesz, najważniejsze, że się starasz! To te starania są tak cenne dla innych.

Och! Szkolenia to frajda sama w sobie. Tyle ludzie w jednym miejscu, którzy chcą się rozwijać jako inżynierzy kodu! Było wspaniale być, częścią ekipy, która to wszystko rozkręcała!

A tak wyglądała ekipa podczas szkolenia z React.js dla zaawansowanych. Serdeczne podziękowania dla trenerów regularnych i trenerów wspomagających.

W drugiej połowie 2019 roku wszystkie szkolenia były organizowane w siedzibie firmy Sumo Logic. Lepszego biura w tym mieście nie widziałem.

A jak wyglądał 42. workshop?

Z przykrością muszę stwierdzić, że tego wydarzenia nie było. To pierwsze wydarzenie w całej historii WarsawJS, które zostało odwołane.

Jest mi bardzo przykro, ale pandemia zrobiła swoje. Nie udźwignęliśmy tych wszystkich zmian, jakie zgotowałaby nam organizacja wydarzenia w formie online.

Szkoda, że akurat workshop z takim numerem się nie odbył (już wcześniej wspominałem dlaczego ta liczba jest taka ważna).

Wydarzenia online

Jak sami dobrze wiecie na początku 2020 roku, na świecie pojawił się groźny wirus. Pierwszy raz w ciągu mojego 30-letniego życia wprowadzony był stan pandemii na całym świecie.

W kwietniu oraz maju zorganizowaliśmy następujące wydarzenia online:

WarsawJS Meetup #68
WarsawJS Meetup #69
WarsawJS Workshop #43
WarsawJS Workshop #44

Formuła online jest o tyle korzystna dla społeczności, że nie trzeba poświęcać czasu na dotarcie do miejsca wydarzenia. To spory plus. Niestety, forma online utrudnia nawiązywanie nowych znajomości.

Czy warto być organizatorem?

Tak, warto!

Doświadczenie w organizowaniu wydarzeń

Organizowanie wydarzeń publicznych niesie za sobą wiele niewiadomych. Kiedy organizujesz kolację i zapraszasz gości to z dużą dozą prawdopodobieństwa wiesz ile osób przyjdzie. Niestety przy organizacji wydarzeń publicznych, jest to jedna wielka niewiadoma.

Po kilku latach korzystania z platformy meetup.com zauważyliśmy, że liczba osób, które potwierdziły swoje przybycie nie zgadza się z liczbą osób podczas wydarzenia. Zawsze było tak, że gdy 200 osób potwierdza przybycie, to w rzeczywistości pojawia się ok. 60-70%. Aczkolwiek kiedy pierwszy raz potwierdziło się 200 osób, to mieliśmy stracha “Co mamy zrobić, jeśli faktycznie tyle osób przyjdzie na wydarzenie?”.

Czy to, że wydarzenia były organizowane dla społeczności programistów miało jakieś znaczenie? Hmm, trudno powiedzieć.

Pozyskiwanie osób zainteresowanych występem na scenie w roli speakera lub trenera

Muszę się Wam do czegoś przyznać. Od początku istnienia WarsawJS, nigdy nie poszukiwaliśmy osób do prowadzenia prelekcji. Po pierwszym wydarzeniu, mieliśmy już zarezerwowane 4 kolejne sloty. Z każdym wydarzeniem liczba osób zainteresowanych wyjściem na scenę się zwiększała.

Dziś, jeśli chcesz wyjść na scenę, to szykuj się na termin oddalony o 9 miesięcy.

Inaczej to miało miejsce z trenerami. Tutaj wymagany jest większy wysiłek. Pierwszy wydarzenia były trudne pod tym kątem, aż do takiego stopnia, że 9. workshop prowadziłem jako jedyny trener podczas gdy na sali było 50 osób (sic!).

Dziś sytuacja jest poprawia i z uwagi na to, że zaplanowaliśmy terminy oraz tematy szkoleń na cały rok, trenerzy wyrażają swoje zainteresowanie szkolenia, które będą za kilka miesięcy. Uważam, że taka strategia jest dobra, szkoda, że dopiero po trzech latach została wprowadzona — człowiek ciągle się uczy!

Możliwość poznania innych organizatorów

W początkach budowania społeczności pomagała nam grupa innych organizatorów. Grupa Warsaw Meta Meetup, która miała wówczas regularne spotkania, gościła mnie niejednokrotnie, przez co mogłem nawiązać dobre relacje z organizatorami meetupów innych języków programowania, lub też z osobami organizującymi wydarzenia zupełnie nietechniczne.

Dziś taka grupa już praktycznie nie istnieje. Gdzieś to wszystko się zatraciło, i teraz każdy “sam sobie rzepkę skrobie”. Takie spotkania były dla nas bardzo pomocne — na początkowym etapie nie wiedzieliśmy za dużo w temacie organizowania publicznych wydarzeń.

Podziękowania 💛❤️

Chciałem podziękować każdej osobie z osobna, która przyczyniła się do tego, aby wydarzenia spod szyldu “WarsawJS” dążyły do doskonałości!

…dla Społeczności

Droga Społeczności! (tak zawsze zwracałem się do Was w social mediach) Dziękuję Wam, że często byliście wyrozumiali i przymykaliście oko na problemy, których nie dało się nie zauważyć. Wszelkie kwestie techniczne, przez które niejedna osoba narzekała, bardzo brałem do siebie. W dzisiejszych czasach można tak skonfigurować urządzenia, że nie powinniście być świadkami tych wszystkich problemów, które się zdarzyły.

Dziękuję Wam, za te chwile otuchy i wsparcia w trudnych momentach. Kiedy w moim organizmie poziom stresu sięgał zenitu, to z Waszej strony mogłem usłyszeć “Piotr, jest dobrze, wyluzuj” — takie słowa mnie zawsze trochę uspokajały.

Cieszę się, że poznałem tyle fantastycznych osób. Mój sposób bycia pomagał mi szybko nawiązać nowe znajomości. W ciągu jednego wydarzenia poznawałem tak duże ilości osób, że momentami, ciężko było zapamiętać wszystkie imiona! :)

Ze społeczności wykrystalizowały się również stałe związki, na które spoglądałem z boku i im kibicowałem. Zwrócę się teraz do Was: jestem szczęśliwy, że miałem delikatny wkład w wasze życie. Trzymam kciuki i wierzę, że będziecie kiedyś swoim wnukom opowiadać, gdzie się poznaliście.

W tym miejscu nie może zabraknąć podziękowań dla prelegentów oraz trenerów, którzy odgrywali kluczowe role podczas wydarzeń. To na nich skupiała się największa uwaga, bo to “dla nich” zbierała się cała społeczność.

…dla Sponsorów

Drodzy Sponsorzy! To dzięki Wam mieliśmy fundusze i możliwości na rozwój wydarzeń organizowanych pod szyldem WarsawJS! Chciałem Wam podziękować za zaufanie oraz za budowanie społeczności!

Jedna z firm, wspierała WarsawJS od samego początku — firma 10Clouds! To jest niesamowite, że od tych ponad 5 (a prawie już 6) lat jest firma, która tak mocno w nas wierzy! Szacun!

…dla Wolontariuszy

Drogi Wolontariusze, często nam pomagaliście. Trudno jest opisać, jak fajnie było organizować wspólnie wydarzenia. Wasza pomoc często była niezastąpiona. To dzięki Wam mogliśmy zdecentralizować realizację zadań, przez co każdy, mógł więcej serca włożyć w swoje zadania.

Kinga Wigurska-Bąk
Natalia Kędziora
Tati Platonova
Michał Szymczak
Tomasz Budrewicz
Mirek Stasiak

W byciu wolontariuszem ważne jest dobrze się bawić!

Po kilku latach pojawiły się “świeże twarze”, które również wkładały swoje serce w pomoc przy budowaniu wydarzeń dla społeczności. Bardzo Wam dziękuję za to, że tak płynnie przechodziliście do zadań. Dziękuję Wam za pomoc.

Anna Lukianova
Łukasz Basaj

Och! Co tu się dzieje! Czy ja właśnie używam jQuery do dodawania liczb?

Przez te kilka lat organizowania wydarzeń miałem okazję współpracować z różnymi osobami, od których nauczyłem się wiele. Nie sposób jest wymienić wszystkich. Jesteście bardzo pozytywnymi osobami.

Dziękuję każdej osobie, która podpowiedziała, zasugerowała, pomogła!

…dla Współpracowników

Chciałem wyrazić swoją wdzięczność do współpracowników

Maciej Machniewski

Drogi Maćku, chciałem Ci serdecznie podziękować za to, chciałeś wejść do tej branży. Odnalazłeś się znakomicie! Twoje teksty w social mediach robią robotę!

Dziękuję Ci, że byłeś zawsze otwarty na wszelkie nowe zadania, jakie musieliśmy zrealizować! Masz takie “pióro”, którego pozazdrościłby Ci niejeden bloger!

Tiffany Horan

Cieszę się, że mogłem z Tobą współpracować. Świat mediów społecznościowych jest szalony. Fajnie, że pokazałaś nam jak na ten świat patrzy się z różnych stron.

Barry Solone

Ach! Barry, Twój świetny głos będę wspominał, kiedy to ktoś mnie zmusi do śpiewania. Cieszę się, że mogliśmy razem współpracować. Twoja charyzma jest dla mnie wyznacznikiem jak być dobrym konferansjerem.

…dla Rady Fundacji

Magdalena Ostoja-Chyżyńska
Van Anh Dam
Jakub Neander
Jerzy Brodzikowski

Serdeczne podziękowania dla całej Rady. Zawsze służyliście “radą”. Dziękuję! Jestem przekonany, że dzięki Wam Fundacja WarsawJS będzie miała silne zaplecze!

…dla Organizatorów

Na początku chciałem podziękować osobom, które zrezygnowały z organizacji wydarzeń dawno temu. Bardzo Wam dziękuję, że mogliśmy razem w tym mieście uruchomić coś tak fascynującego! Początki są najtrudniejsze — wszystko się zgadza.

Nie zapomnę nigdy jak wyglądały nasze pierwsze spotkania. Ile czasu spędzaliśmy na planowaniu kolejnych wydarzeń, któż to by policzył?

Dziękuję Ci Paulina za to, że pokazałaś jak szybko można tworzyć materiały graficzne. Twoja pomysłowość i kreatywność przyniosła nam pierwszą wersję loga!

Krzysztof! Od Ciebie uczyłem się non stop! Zapamiętałem Cię jako osobę, która ma “motorek” — zawsze energia i pomysłowość!

Marcin, Twoje spojrzenie na sytuację było niezastąpione! Dobrze było mieć osobę z tak zwanego “biznesu” na pokładzie, aby to wszystko ruszyło na dobre! Dzięki brachu!

Paulina Modras
Krzysztof Modras
Marcin Cimaszewski

No i nadszedł ten moment, kiedy chciałem BARDZO podziękować najważniejszej ekipie:

Katarzyna Grabowska
Piotr Zientara

…z którą spędziłem tyle lat wspólnego organizowania!

Pamiętam tą radość jaka z nas tryskała podczas pierwszych wydarzeń, kiedy organizowaliśmy wydarzenia tylko we trójkę — byliśmy tacy interoperacyjni.

Chciałbym, aby wszystkie trudne chwile jakie w naszej współpracy się pojawiały, zostały przykryte tymi pięknymi, gdy wspieraliśmy i dbaliśmy o siebie, gratulowaliśmy sobie i dziękowaliśmy za wysiłek, jaki wkładaliśmy do tego hobby jakim było organizowanie wydarzeń.

Tworzyliśmy świetny Team, który nakręcał się po to, aby kolejne wydarzenia były jeszcze lepsze! Regularnie podnosiliśmy sobie poprzeczkę, przez co liczba zadań rosła z miesiąca na miesiąc. Czasami była ona zawieszona za wysoko, ale - lepiej lub gorzej - zawsze sobie radziliśmy.

Aby wydarzenie było dobrze zrealizowane ważne jest, aby w organizację wkładać swoje serce. Robiłem to przez tyle lat, że szalenie trudno było mi napisać ten artykuł.

WarsawJS w moim sercu zawsze będzie zajmowało szczególne miejsce.

Dla społeczności poświęcałem swój prywatny czas. Budowanie społeczności jest męczące, ale jakże wdzięczne w momentach, gdy podchodzą do Ciebie ludzie i najzwyczajniej w świecie Ci dziękują. Życzę Wam, aby taka wdzięczność gościła też w waszych firmach.

Organizowaniem kolejnych wydarzeń będzie zajmował się Piotr Zientara oraz Ania Dławichowska, która będzie zaangażowana w fundację.

Razem z Kasią trzymamy kciuki za przyszłą ścieżkę WarsawJS. Nasza przygoda kończy się w tym miejscu i chcielibyśmy razem, raz jeszcze, tak na zakończenie, podziękować całej społeczności.

•

Podsumowanie 5 lat organizacji. Film stworzonym na wydarzenie urodzinowe.

•

Dziękuję 💙

Nowy początek

Piotr Kowalski — Sat, 02 May 2020 12:05:45 +0000

Nie wierzę. Pojawił się nowy post na blogu? Jak to? Dlaczego? Skąd taka zmiana?

Wszystko dzięki temu, że znowu zacząłem się rozwijać. Z początkiem tego roku zacząłem pracę jako Senior Engineer w amerykańskiej firmie Sumo Logic, która rozwija swój produkt do analizy logów oraz metryk.

Zeszły rok był dla mnie piękny. Zrealizowałem mnóstwo szkoleń. Pojeździłem po całej Polsce. Pokochałem pociągi — świetna forma komunikacji (oczywiście, kiedy jest cisza w przedziale). Odwiedziłem kilkadziesiąt miast, niektóre po raz pierwszy.

Poznałem Łódź — miasto Cezarego Pazury. Odwiedziłem tzw. “filmówkę” — najbardziej znaną szkołę filmową w Polsce (do której skądinąd planowałem aplikować).

W sumie, w zeszłym roku przepracowałem na sali szkoleniowej 512 godzin. Czas ten pozwolił mi zrozumieć, jak wygląda praca pełnoetatowego trenera.

Tematy szkoleń często się powtarzały, dzięki czemu wiele programów szkoleń mam tak dopieszczonych, że dokładnie wiem ile czasu poświęcić na każde zadanie. To wprowadza spory komfort do pracy trenera. Timing jest bardzo ważnym elementem, nad którym należy panować.

Najpopularniejsze szkolenia, jakie realizowałem to:

JavaScript (różne poziomy)
Node.js (różne potrzeby)
Angular (różne wersje)

W których tematach odnajdywałem się najlepiej? Hmm, w każdym. Powyższe tematy są dla mnie bardzo bliskie z uwagi na komercyjne doświadczenie, jakie nabyłem do 2018 roku. Udział w projekcie aplikacji ipla.tv ugruntował moją wiedzę z budowy skalowalnych aplikacji webowych.

Ze szkoleń wyniosłem ogrom wiedzy. Nierzadko byłem w sytuacji, w której nie znałem odpowiedzi na zadane mi pytanie. Od początku wiedziałem, że taka sytuacja będzie często się pojawiać. Chciałem w niej się znaleźć. Te momenty mnie ROZWIJAŁY, ale jak to? Nie bałeś się, że “popiszesz się” brakiem wiedzy?

W jaki sposób uczą się trenerzy? Skoro mam przygotowany program i realizuję z grupą zadania, to kiedy się rozwijać? Właśnie wtedy, gdy pojawia się pytanie, na które nie znam odpowiedzi. Tworzę wówczas notatkę w kajecie, aby po powrocie do hotelu przeczytać, zrozumieć, NAUCZYĆ SIĘ czegoś nowego. Z pierwszych szkoleń wracałem z notesem, który był bogatszy o kilka zapisanych kartek.

Po ponad rocznej pracy jako trener full time, “przekształcałem” się w nauczyciela, jakich jest pełno na uczelniach wyższych. Wiedza niepoparta doświadczeniem to wiedza, która jest cenna, ale nieoszlifowana. Mnie zależy na doświadczeniu. Zrozumienie tematu wcale nie jest ostatecznym etapem jego poznania. Dopiero zastosowanie w praktycznym środowisku pozwala zrozumieć wady i zalety.

Dziś, po tym, jak przepracowałem 4 miesiące jako developer, bardzo się cieszę, z tego, co robię. Kocham programować ❤️ — brakowało mi tego mocno.

Palę się do pracy i wiem, że ten etap, który jest już za mną, był bardzo cenny. Lekcja życia, którą otrzymałem w 2019 roku, szkoląc innych programistów, dała mi do zrozumienia, w którą stronę iść dalej.

Dziękuję wszystkim uczestnikom moich szkoleń. Tylko w 2019 roku przeszkoliłem ponad 200 osób. Każde szkolenie kończy się wystawieniem ocen trenerowi — często otrzymywałem maksymalny wynik 10 / 10. Nie zapisywałem wyników ocen, więc trudno jest wyciągnąć średnią roczną, ale gdyby taką policzyć, na pewno byłbym z niej zadowolony.

Nie chcę rezygnować ze szkoleń. Uwielbiam uczyć ludzi. Chciałbym realizować szkolenia, może nie już tak często, jak miało to miejsce w 2019 roku, ale na pewno kilka dni w miesiącu są realne.

Zaplanowałem, aby początek roku “odpocząć” od szkoleń. Pandemia mi w tym dość pomogła. Kiedy sytuacja wróci do normy, chciałbym wrócić do stacjonarnych szkoleń.

Dziś, jestem dostępny na dwóch płaszczyznach:

szkolenia online organizowanych przez WarsawJS
cotygodniowe spotkania z Patronami, którzy mnie wspierają

Oh, jak mi brakowało takiego wieczora, gdzie piszę prozę, a nie zadania na szkolenie.

•

Czytelniku! Dziękuję Ci, że dotrwałeś aż tu. Wiem, że to nie jest techniczny artykuł, do których przyzwyczaiłem Cię na tym blogu, ale chciałem się z Tobą podzielić, tym co u mnie. Miłego dnia! 🖐️

Cya! 👋

Własna konfiguracja do TSLint

Piotr Kowalski — Thu, 24 Oct 2019 12:05:10 +0000

Tak, wiem. TSLint is deprecated. Aczkolwiek JESZCZE nie jest. JESZCZE istnieją projekty, gdzie głównym narzędziem do lintowania jest TSLint. I dobrze.

Dziś przedstawiam Wam jak zrobić własną konfigurację do TSLinta. W sumie bardzo podobnie (jak nie identycznie) tworzy się konfigurację do ESLinta. Oczywiście to inny projekt (następca TSLinta) więc i nazwy kluczy do reguł mogą się zmienić, ale schemat jest MEGA podobny.

1. Stwórz repozytorium na GitHub

W nazwie projektu ważne, jest zawarcie dwóch rzeczy:

prefiksu tslint-config- — który informuje, jakiego typu jest to projekt
postfiksu np. piecioshka — który informuje, kto używa tej paczki (np. organizacja) albo kto jest autorem (np. my sami)

Bardzo dobrą praktyką jest tworzenie takich konfiguracji w zespołach projektowych. Wtedy projekt z konfiguracją może się nazywać tslint-config-NAZWA_FIRMY.

Przykłady:

W moim przypadku jest to repozytorium:
https://github.com/piecioshka/tslint-config-piecioshka

2. Stwórz katalog na dysku, a w nim trzy pliki

README.md
- Informacja jak użyć Twojego projektu
- Jeśli paczka została opublikowana na #npm to warto dodać badge (odznaki), które mogą np. prezentować ilość pobrań, oraz informację, jaka jest najnowsza opublikowana wersja.
package.json
- Oczywiście, warto zdefiniować takie pola jak: name, version, license, description, author.
- Jeśli chcesz opublikować paczkę po to, aby mogli z niej korzystać też inny deweloperzy, to zadbaj o słowa kluczowe, tj. klucz keywords.
- Warto zdefiniować również klucz files, aby opublikować tylko wybrane pliki i katalogi — w tym przypadku będzie to tablica trzyelementowa.
- Ostatnim dobrym pomysł jest dodanie informacji o repozytorium, z którego pochodzi dana paczka, dzięki temu ktoś, kto znajdzie projekt na #npm będzie mógł zobaczyć źródła projektu przed jego pobraniem (no, chyba że użyje #npmview).
index.js
- W tym pliku zdefiniuj swoje reguły dla #TSLinta. Pamiętaj, że i tak każdy ma możliwość nadpisania Twoich wartości. Przykład:
```
  module.exports = {
      "extends": [
          "tslint:recommended"
      ],
      rules: {
          "variable-name": {
              "options": [
                  "allow-leading-underscore"
              ]
          }
      }
  };
```
- Ze względu, że paczka, którą definiujesz, będzie w #npm, który jest rejestrem paczek dla Node.js, zaimplementuj moduł w stylu CommonJS.
- Warto, aby Twoja konfiguracja rozszerzała już istniejącą, która to ma zdefiniowane wartości dla pozostałych pól, tak aby nie korzystać (albo aby właśnie korzystać) z domyślnych. W swojej konfiguracji postaraj się nadpisać tylko te, które faktycznie zależą od Twojego stylu pisania.

3. Publikacja

Nadszedł czas na publikację. Stwórz commit, a potem:

npm publish

tym samym, Twoja paczka będzie już dostępna w rejestrze npm. Na koniec warto zmiany wysłać na serwer za pomocą git push.

4. Użycie

tslint.json

Dodać do tablicy extends np. tslint-config-piecioshka.
Uwaga: Kolejność ma znaczenie. Przykład:
```
  "extends": [
      "tslint:recommended",
      "tslint-config-piecioshka"
  ],
```
W tym przypadku konfiguracja tslint-config-piecioshka nadpisuje tslint:recommended.

5. Zainstalować

W dowolnym projekcie można już zainstalować naszą paczkę.

tslint-config-piecioshka

  npm i -D tslint-config-piecioshka

W przeciwnym przypadku będzie error:

  Failed to load /Users/piecioshka/projects/example/tslint.json: Invalid "extends" configuration value - could not require "piecioshka". Review the Node lookup algorithm (https://nodejs.org/api/modules.html#modules_all_together) for the approximate method TSLint uses to find the referenced configuration file.

Dlaczego używam -D? Konfiguracja do lintera nie dodaje żadnego nowego zachowania do aplikacji, więc jest czysto deweloperska.

6. Uruchomić proces lintowania

package.json

Dodać zadanie do run-scripts:
```
  "scripts": {
      "lint": "tslint -p ."
  }
```
Gdzie -p oznacza katalog z plikiem tslint.json. Na zakończenie uruchomić:
```
  npm run lint
```
… i zacząć poprawiać “bugi”!

•

FAQ

Co to jest proces "lintowania" kodu?: Proces polegający na weryfikacji kodu pod kątem reguł sprawdzające sposób jego zapisu. Dla przykładu, czy po wyrażeniu if należy napisać spację, czy też nie. Dla interpretera to bez znaczenia, ale aby uzyskać spójność kodu między deweloperami, warto zdefiniować taki proces, który POKAŻE niedoskonałości.
Inny rozwiązaniem jest używanie Prettiera, który to na podstawie konfiguracji automatycznie poprawi kod.

Jak zmienić motyw strony za pomocą SCSS na przykładzie trybu ciemnego?

Piotr Kowalski — Tue, 18 Jun 2019 10:05:34 +0000

Używasz ciemnego motywu w swoim edytorze? A może korzystasz z tego trybu na popularnych stronach, takich jak YouTube? Jeśli chciałbyś zbudować taki efekt na stronie, to w tym artykule zostały zawarte wszelkie wskazówki na ten temat.

Po co “tryb ciemny”?

Czy czujesz, że Twoje oczy szybciej się męczą, kiedy przeglądają jasne strony internetowe? Jeśli tak, to już wiesz, po co jest taki tryb. Jeśli nie, to pozwól, że udzielę Ci porady. Prędzej czy później zauważysz, że ciemniejsze szata graficzna aplikacji oraz stron internetowych nie spowoduję rozszerzenia się źrenic. Zauważysz to szczególnie podczas przeglądania internetu w tzw. półmroku.

Demo 🎉

Zmiana trybu na tej stronie.
Spróbuj zmienić tryb (przycisk znajduje się w prawym dolnym roku strony).

Gdzie jeszcze możesz wykorzystać zmianę motywu na ciemny:

Strony internetowe, np. YouTube, Twitter
Edytory kodu, np. Visual Studio Code
DevTools, np. narzędzia developerskie w Google Chrome
Systemy operacyjne, np. macOS Mojave

Tryb ciemny w polskiej blogosferze frontendowej

Przeglądając serwis polskifrontend.pl nie zauważyłem, aby choć jeden blog miał możliwość zmiany trybu z jasnego na ciemny.

Moim zdaniem udostępnienie takiej możliwości jest wielce korzystne dla użytkownika. Czytelnicy tego bloga często go odwiedzają w godzinach wieczornych. Tym samym, kiedy będą mogli zmienić domyślny wygląd na ciemny, to podniesie się ich komfort korzystania z tej strony, tym samym dodanie trybu ciemnego może wpłynąć na zwiększenie ruchu na stronie.

Jak wykonać z użyciem SCSS?

Istnieje kilka sposobów na wykonanie mechanizmu przełączania wyglądu. Zgodnie z tytułem tego artykułu przedstawię teraz sposób jak zrealizować dane zadanie za pomocą SCSS.

Załączam poniżej kilka listingów kodu, na których widać, że na początku należy stworzyć zestawy zmiennych z kolorami. Następnie w pliku (plikach), należy zbudować wygląd strony wykorzystując zmienne SCSS.

Ostatnim krokiem jest zdefiniowanie — w głównym pliku main.scss — struktury, z wykorzystaniem klasy dodanej do głównego elementu strony (w tym przypadku jest to html, ale może to być też znacznik body).

// _themes/_light-theme.scss
$bg-color: #fff;

// _themes/_dark-theme.scss
$bg-color: #000;

// _page.scss
body {
    background-color: $bg-color;
    // ...
}

// main.scss
html:not(.dark-mode) {
    @import "_themes/_light-theme.scss";
    @import "_page";
}

html.dark-mode {
    @import "_themes/_dark-theme.scss";
    @import "_page";
}

Teraz wystarczy stworzyć przycisk, który po kliknięciu doda klasę CSS do głównego elementu strony, tym samym zostanie stworzony mechanizm zmiany motywu.

Wskazówki

Komponent z przełączaniem trybu nie powinien być “zaznaczalny” — nie przechowuje on treści strony internetowej — jest czymś w roli “opcji”
Warto, aby taki komponent ze zmianą trybu jasny/ciemny był albo w opcjach aplikacji, albo gdzie z boku treści strony. Do tego można wykorzystać znacznik <aside>
Komponent może być ciągle widoczny, aby udostępnić możliwość natychmiastowej zmiany w trakcie czytania artykułu
Ostatni wybór trybu warto zapisać w LocalStorage, aby podczas kolejnych odwiedzin, użytkownik nie musiał dokonywać wyboru ponownie
Warto wykorzystać <input type="checkbox"> jako kontrolka do zmiany trybu

Efekt uboczny Stworzenie nowego motywu pozwoli na uporządkowanie wyglądu aplikacji, poprzez wydzielenie wszelkich kolorów (tekstu i teł) do pliku ze zmiennymi.

Testy end-to-end w Continuous Integration

Piotr Kowalski — Tue, 14 May 2019 17:25:46 +0000

Podczas jednego z moich webinarów chciałem skonfigurować testy end-to-end na Travisie. Nie udało się, z prostego powodu — od ostatniego czasu kiedy to robiłem upłynęło trochę czasu tym samym sposób się zmienił.

W tym artykule chciałem odświeżyć temat jak skonfigurować testy e2e w 2019 roku.

2 lata temu napisałem artykuł o tym, jak łatwo jest uruchomić prosty scenariusz testów end-to-end. Artykuł wprowadza w tematykę testów e2e.

Ten artykuł będzie opisywał co się stało w tej rewizji 97a75d7c.

Co jest potrzebne?

Serwer CI — np. Travis (najpopularniejszy)
Środowisko do tworzenie testów e2e — np. Nightwatch.js (popularny, używany przez Vue.js)
Komunikacja z przeglądarką — np. ChromeDriver (Chrome to według mnie najlepsza przeglądarka)

Uwaga

Na ten moment Travis nie supportuje w 100% platformy Windows. Dlatego warto uważać podczas konfiguracji testów na tą platformę.

Co się zmieniło?

Nie trzeba już explicit uruchamiać serwera Selenium!

Schemat działania .
Diagram stworzony z użyciem narzędzia: draw.io.

Konfiguracja projektu

Zainstaluj wymagane zależności:
```
 npm i -D nightwatch chromedriver
```
Stwórz katalog na testy e2e. Moja propozycja: test/e2e
Stwórz plik z testami. Moja propozycja test/e2e/test.js

Dodaj w powyższym pliku prosty scenariusz:

 module.exports = {
     'Spr. czy istnieje nagłówek?': async (client) => {
         await client.url('http://example.org');
         await client.waitForElementVisible('body');
         await client.assert.elementPresent('h1');
     }
 };

Stwórz plik z konfiguracją dla Nightwatch.js w katalogu głównym. Moja propozycja nightwatch.conf.js

Umieść w powyższym pliku podstawową konfigurację:

 module.exports = {

     // Katalog z testami
     "src_folders": ["test/e2e/"],

     // Konfiguracja sterownika przeglądarki w której uruchomią się testy
     "webdriver": {
         "start_process": true,
         "server_path": 'node_modules/.bin/chromedriver',
         "port": 9515
     },

     // Informacja jaka przeglądarka zostanie użyta do testów
     // oraz w jakim trybie zostanie uruchomiona (headless)
     "test_settings": {
         "default": {
             "desiredCapabilities": {
                 "browserName": "chrome",
                 "chromeOptions": {
                     "args": [
                         "--headless"
                     ]
                 }
             }
         }
     }
 };

Bonus: Użyjmy pluginu nightwatch-helpers

Zainstaluj wymagane zależności:
```
 npm i -D nightwatch-helpers
```

Do pliku z konfiguracją Nightwatch.js (czyli nightwatch.conf.js) dodaj:

 {
     [...]
     "custom_commands_path": ["node_modules/nightwatch-helpers/commands"],
     "custom_assertions_path": ["node_modules/nightwatch-helpers/assertions"]
     [...]
 }

Do pliku test/e2e/test.js dodaj nowy test:

 [...]
 'Spr. czy istnieją wymagane paragrafy?': async (client) => {
     await client.url('http://example.org');
     await client.waitForElementVisible('body');

     // to polecenie zawdzięczamy pluginowi
     await client.assert.count('p', 2);
 }
 [...]

Rewizja, gdzie został użyty plugin ac78a0556.

•

Zerknij do projektu test-nightwatch-chrome-headless aby zobaczyć jak wygląda kod źródłowy aplikacji z testami end-to-end.

Zerknij na Travisa projektu aby zweryfikować stan testów.
Aktualny status

Jak się ma pisanie testów w projekcie, kiedy jest zdefiniowany mocny deadline?

Piotr Kowalski — Mon, 15 Apr 2019 18:50:43 +0000

Pisanie testów wydłuży proces tworzenia aplikacji - kiedy nie mamy doświadczenia. Jeśli zespół posiada doświadczenie w pisaniu testach a najlepiej kiedy posiada doświadczenie w TDD, to leader tego zespołu nie może zabronić mu pisania testów, z tego powodu, że zespół wypracował już sobie pewien sposób wytwarzania oprogramowania.

Jeśli takiemu zespołowi zabierze się OFICJALNIE możliwość pisania testów to i tak będą je tworzyć gdzieś po kryjomu. Zespół już jest przyzwyczajony to tego aby pisać testy.

Projekt, który posiada napisane testy jest bardziej odporny na błędy związane z regresją, ponieważ każda jego linijka posiada weryfikację. Unikniemy wtedy stresujących sytuacji — dodanie nowych funkcjonalności nie spowoduje zepsucia już napisanych modułów

Kiedy zespół projektowy nie czuje się pewnie w pisaniu testów, to ich pisanie można odłożyć po releasie pierwszej wersji aplikacji.

Takie testy można dopisać, aby uniknąć regresji w przyszłości.

Cya! 👋

Git. Używaj typu w Commit Message i zbuduj idealny changelog

Piotr Kowalski — Sat, 23 Mar 2019 20:58:42 +0000

Wszystkie commit message repozytorium Angulara ma jakieś dziwne prefiksy. Dlaczego? O tym w dzisiejszym wpisie.

Prefiksy

Jeśli każdy Commit Message będzie posiadał jeden prefiks z listy dostępnych:

feat(feature): ...
fix(bug fix): ...
docs(documentation): ...
style(formatting, missing semicolons): ...
refactor: ...
test(when adding missing tests): ...
chore(maintain): ...

to wygenerowanie changeloga z podziałem na typ będzie przyjemnością.

Jakie kroki są potrzebne, aby używać takiego workflow:

Tworzyć Commit Message-e z prefiksem
Wygenerować CHANGELOG.md

Aby nie zapomnieć o typie podczas tworzenia rewizji wykorzystajmy dwa narzędzia:

husky — podłączenie się pod zdarzenie tworzenia rewizji
commitlint — weryfikacja treści Commit Message-a

Do wygenerowania changeloga przedstawię 3 narzędzia.

1. commitlint

Instalacja

  npm install -D @commitlint/config-conventional @commitlint/cli

Stworzyć plik commitlint.config.js o zawartości:

  module.exports = {
      extends: ['@commitlint/config-conventional']
  };

2. husky

Instalacja
```
  npm install -D husky
```

Dodać do pliku package.json następujący wpis (w głównym obiekcie):

  {
      "husky": {
          "hooks": {
              "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
          }
      }
  }

3. Changelog

Opcja nr 1 — git-changelog

Instalacja
```
  npm install -D git-changelog
```

Dodać zadanie w package.json:

  {
      "scripts": {
          "changelog": "git-changelog -e"
      }
  }

Stworzyć plik .changelogrc. Format pliku dostępny w linku.

Uwaga: Brakuje wsparcia dla grupowania rewizji.

Opcja nr 2 — generate-changelog

Instalacja
```
  npm i -D generate-changelog
```

Dodać do pliku package.json rekomendowane zadania:

  {
      "scripts": {
          "release:major": "changelog -M && git add CHANGELOG.md && git commit -m 'Regenerate CHANGELOG.md' && npm version major && git push origin && git push origin --tags",
          "release:minor": "changelog -m && git add CHANGELOG.md && git commit -m 'Regenerate CHANGELOG.md' && npm version minor && git push origin && git push origin --tags",
          "release:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'Regenerate CHANGELOG.md' && npm version patch && git push origin && git push origin --tags",
      }
  }

Uwaga: Brakuje wsparcia dla grupowania rewizji.

Opcja nr 3 — auto-changelog

Instalacja
```
  npm install -D auto-changelog
```

Dodać zadanie w package.json:

  {
      "scripts": {
          "changelog": "auto-changelog -u -l false"
      }
  }

Uwaga: Posiada wsparcie dla prefiksów.

Uwaga: Posiada wsparcie dla grupowania rewizji.

Przykład pracy auto-changeloga jest widoczny w bibliotece super-event-emitter.

Opcja nr 4 — REKOMENDOWANA — conventional-changelog

Instalacja

  npm install -D conventional-changelog-cli

Dodać zadanie w package.json:

  {
      "scripts": {
          "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
      }
  }

Uwaga: Posiada wsparcie dla ROŻNYCH typów prefiksów.

Uwaga: Posiada wsparcie dla grupowania rewizji.

Rozwiązanie problemu release bez changeloga

Jeśli zdefiniujemy zadanie version w run-scripts w package.json, to podczas uruchamiania npm version [major|minor|patch], zadanie zostanie wykonane przed stworzeniem nowej rewizji oraz taga. Jeśli dowolny plik będzie dodany do “Git Stage”, to npm version [major|minor|patch] doda ten plik do rewizji z podbiciem wersji.

Przykład rekomendowanego sposobu:

{
    "scripts": {
        "version": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
    }
}

Więcej do poczytania na stronie projektu conventional-changelog

•

Narzędzia do zbudowania pliku CHANGELOG.md mogą być używane bez dodawania typów w Commit Message-u, tylko wtedy nie będzie pogrupowanych rewizji i wszystkie zostaną wrzucone do jednego worka.

compose vs pipe

Piotr Kowalski — Thu, 14 Feb 2019 15:09:28 +0000

Kilka dni temu opublikowałem projekt na GitHubie, którego główną ideą jest komponowanie funkcji. Źródła projektu składają się z jednej funkcji, która należy do zbioru funkcji typu Higher-order Function.

module.exports = function pipe(...fnList) {
    const iterator = fnList[Symbol.iterator]();
    let result = null;

    function handle(...args) {
        const fn = iterator.next().value;
        if (typeof fn === 'undefined') return result;
        if (typeof fn !== 'function') throw new TypeError();

        result = fn(...args);

        return handle(result);
    }

    return handle;
};

Listing 1. Cały kod projektu

Pipe

Istnieje umowna zasada, à propos kolejność “składanych” funkcji. Biblioteka, którą napisałem, nazywa się pipe, bo uruchamia funkcje w kolejności ich definicji.

Podobnie jak ma to miejsce w terminalu:

ll | wc -l # pipe

na początku zostanie uruchomione polecenie ll,
a następnie wc -l.

f(plusOne, multiplyBy10)(x) = multiplyBy10(plusOne(x));

Listing 2. Matematyczny zapis składania funkcji.

Użycie takiej funkcji sprowadza się do uruchomienia:

const plusOne = (v) => v + 1;
const multiplyBy10 = (v) => v * 10;
const fn = pipe(
    plusOne,
    multiplyBy10
);
console.log(fn(2)); // 30

Listing 3. “Składanie” funkcji w jedną.

Compose

Natomiast, co jeśli chcemy uruchamiać funkcje w odwrotnej kolejności? Do tego właśnie służy function compose.

f(multiplyBy10, plusOne)(x) = plusOne(multiplyBy10(x));

Listing 4. Matematyczny zapis składania funkcji.

Użycie funkcji compose (gdyby taka istniała) dałoby odmienny wynik:

const plusOne = (v) => v + 1;
const multiplyBy10 = (v) => v * 10;
const fn = compose(
    plusOne,
    multiplyBy10
);
console.log(fn(2)); // 21

Listing 5. “Składanie” funkcji w jedną.

•

PS Dziękuję @miloszpp za podpowiedź w temacie compose vs pipe.

Bibliografia

… o Higher-order Function autorstwa Piotra Nalepy
… o Currying-u autorstwa Daniela Idaszaka
Więcej na temat programowania funkcyjnego znajdziesz na blogu — codewithstyle.info
Jeśli jesteście ciekawi jak wygląda temat HOF w książce “Eloquent JavaScript” to zapraszam: https://eloquentjavascript.net/05_higher_order.html
Mój dobry kolega — Kyle Simson — w swojej książce YDKJS także opisał tematykę domknięć

Jak pisać dobre komentarze? Według książki Clean Code

Piotr Kowalski — Sun, 03 Feb 2019 11:20:50 +0000

Dawno temu chciałem napisać artykuł — ależ to słowo jest popularne na moim blogu — na temat pisania dobrych komentarzy. Podczas pracy na kodem wiele razy spotkałem się jak moi współpracownicy pisali komentarz, który nic nie wnosił. Jak ustrzec się przed takimi komentarzami? Garść mojego doświadczenia oraz wielki skrót rozdziału 4. z książki — a raczej podręcznika każdego developera — “Clean Code” autorstwa Roberta C. Martina.

Clean Code — kilka słów od wujka Martina

Cytaty pochodzą z książki pt. “Czysty kod. Podręcznik dobrego programisty” wydawnictwa Helion.

“Za każdym razem, gdy piszemy komentarz, powinniśmy poczuć smak porażki.”

Moja opinia: Zgadzam się. Często, gdy widzę komentarz, to znaczy, że ktoś napisał taki kod, który wg autora nie jest zrozumiały — dlatego, aby pomóc sobie i innym czytającym, autor kodu napisał komentarz.
“[kod]… jest jedynym źródłem naprawdę dokładnych informacji”

Moja opinia: Dokumentacja (czyli kod), nigdy nie będzie, z uwagi na potrzebę zapewnienia synchronizacji z kodem, co niesie ze sobą kolejne zadanie dla programisty.
“Wszystkie komentarze, które wymuszają zaglądanie do innych modułów, w celu ich zrozumienia, nie są warte bitów, które zajmują.”

Moja opinia: Ile to razy miałem problem z odczytem komentarza. Otwierałem kolejne pliki, aby lepiej zrozumieć jego sens.
“Wymaganie, aby każda funkcja posiadała Javadoc lub aby każda zmienna posiadała komentarz jest po prostu głupie.”

Moja opinia: Zgadzam się i dlatego też często wyłączamy opcje w ESLint sprawdzającą, czy przed funkcję mam napisanego JSDoca. Bez sensu pisać komentarz do każdej funkcji.
“Nie używaj komentarzy, jeżeli można użyć funkcji lub zmiennej”

Moja opinia: Trudno będzie znaleźć kontrargument. Jako developerzy czytamy kod. Jeśli nazwy funkcji i zmiennych odzwierciedlają to, co robią oraz przechowują, to w takich przypadkach rzadko pojawią się komentarze.
“Zadaniem komentarza jest wyjaśnienie kodu, który sam się nie objaśnia”

Moja opinia: Dlatego też lepiej jest napisać dobry kod. Nie jestem zwolennikiem używania tzw. “magic numbers” oraz “magic strings”. Zawszę tworzę stałą, która będzie przechowywała daną wartość. Każda stała ma swoją nazwę, która powinna uzasadnić istnienie danej wartości.

Moja najważniejsza porada

Jak już piszesz komentarz — zrób to właściwie. Dlatego, jeśli miałbym udzielić tylko jednej porady to unikaj powtarzających komentarzy.

Zły przykład komentarza, który opisuje jak kod działa:

// Stworzenie zmiennej, która przechowuje opóźnienie
const LOAD_DELAY = 500;

Dobry przykład komentarza, który wyjaśnia:

dlaczego taki kod został stworzony?
komu się przydaje?

// Sztuczne opóźnienie (w milisekundach),
// aby zasymulować uruchamianie systemu.
// Zapewnienie lepszego user experience.
const LOAD_DELAY = 500;

•

Jestem bardzo zadowolony z lektury rozdziału 4. książki “Clean Code” - równo 20 stron. Książka opisuje doświadczenie developerów, którzy “zjedli zęby” na wytwarzaniu oprogramowania. Może być ona czytana “na wyrywki”, czyli nie trzeba jej czytać od deski do deski.

Książka ląduje do sekcji “Polecane książki”.

Jak zarządzać baterią w MacBooku? Battery Life Extender

Piotr Kowalski — Fri, 01 Feb 2019 13:56:44 +0000

Dziś znowu wymieniłem baterię w laptopie. Drugi raz w ciągu 1.5 roku. Dlaczego tak często mi się to zdarza? Wszystko przez to, że nie potrafię zapamiętać prostej rzeczy. Przeczytasz o niej poniżej.

Złota zasada

Po pierwszej wymianie baterii dowiedziałem się, że:

Złota zasada: Aby przedłużyć działania baterii należy odłączać kabel zasilania, kiedy bateria zostanie w całości naładowana. Ładowarkę należy podłączyć, kiedy stan naładowania baterii będzie mniejszy niż ok. 15%.

Niby zasada bardzo prosta, aczkolwiek trzymałem się jej przez kolejne 2 dni.

Problem z pamięcią? U mnie?

Wszystkiego jest winna moja pamięć, która wyparła informację, aby odłączać przewód zasilający po osiągnięciu 100% naładowania akumulatorów.

Istnieje dobry sposób, aby rozwiązać sytuację z pamięcią. Oddelegować je!

Od pomysłu do realizacji

Dlaczego by nie napisać aplikacji, której funkcje byłyby dość proste:

sprawdzić aktualny poziom baterii
reagować na skrajne wartości poziomu baterii:
- jeśli poziom mniejszy niż 15% wyświetl powiadomienie w stylu:
  
  podłącz przewód zasilania
- jeśli poziom równy 100% wyświetl powiadomienie w stylu:
  
  odłącz przewód zasilania

Moje nowe narzędzie `Battery Life Extender`

Stworzyłem aplikację, która realizuje wyżej wymienione funkcje.

Projekt został opublikowany pod adresem:
https://github.com/piecioshka/battery-life-extender

Zapraszam do Code Review!

Jak zainstalować?

Pobierz najnowszą wersję
Rozpakuj paczkę
Przenieś plik Battery Life Extender.app do katalogu /Applications/
Uruchom aplikację (kliknij ikonkę prawym przyciskiem)

•

Dodam, że:

aplikacja nie robi więcej niż jest to napisane w tym artykule
- chciałbym, aby była ona lekka i nie zżerała baterii
- tym samym nie ma żadnych statystyk
aplikacja działa tylko na macOS — nie mam możliwości napisać uniwersalnej aplikacji
nie jest potrzebne żadne GUI (nie ma żadnych pasków i ikonek)

Wyłączenie aplikacji jest tożsame z zakończeniem procesu “Battery Life Extender”.

•

Składam podziękowania za pomoc w testach dla Tati, Kamila oraz Daniela.

Jak zwiększyć ilość wolnego miejsca na dysku?

Piotr Kowalski — Wed, 19 Dec 2018 08:11:37 +0000

Czy widziałeś kiedyś komunikat No space left on device? Czy po restarcie przeglądarki nie przywracają Ci się zakładki? Czy nie możesz zrobić nowego projektu, bo nie masz miejsca na dysku? Chciałem się podzielić z Wami, jakie ja mam rozwiązania na powyższe sytuacje.

Rozwiązanie problemu “No space left on device”

W moim przypadku, kiedy używam dużo dwóch narzędzi npm i brew, jestem podatny przechowywanie bibliotek, które nie są mi potrzebne, bo, np. wyszły ich nowe wersje, które mam już zainstalowane.

💡Pomysł 1 — npm — Usuwamy cache

Na początku usuniemy wszystkie paczki, które zostały dodane do cache-a:

npm cache clean --force

💡Pomysł 2 — brew — Usuwamy stare wersje programów

brew cleanup

W moim przypadku dostałem taki oto komunikat:

==> This operation has freed approximately 3.25GB of disk space.

💡Pomysł 3 — node_modules — Pozbycie się wszystkich katalogów

Poniższe polecenie uruchamiamy z poziomu katalog z projektami. W moim przypadku jest to ~/projects/. Polecenie przeszukuje wszystkie katalogi pod kątem występowania katalogów z paczkami z npm-a i je usuwa.

find . -name "node_modules" -maxdepth 2 | xargs rm -rf

Przecież wiadomo ile waży katalog node_modules. Zagraniczne źródła podają, że jest on cięższy od czarnej dziury.

improgrammer.net

Zobaczcie, ile zwolniłem przestrzeni dyskowej po wykonaniu powyższego polecenia:

•

Aktualizacja: 2019-04-08

💡Pomysł 4 — docker — Pozbycie się wszystkich obrazów i kontenerów

W dobie dzisiejszego oprogramowania wszystko trzymamy w kontenerach Dockerowych. Nie są one czyszczone kiedy przestajemy ich używać. Dlatego też od czasu do czasu aby zwolnić kilka gigabajtów warto uruchomić:

docker system prune -a
# oraz
rm -rf ~/Library/Containers/com.docker.docker/Data/*

Jak sprawdzić wielkość dostępnej przestrzeni?

W systemach unixowych, a do tej rodziny należy system macOS, który jest zainstalowany na moim komputerze, wystarczy wydać polecenie:

df -h

Dobre praktyki w JavaScript: $ (dolar) w nazwie zmiennej

Piotr Kowalski — Wed, 12 Dec 2018 07:40:42 +0000

Piszę dużo w czystym JavaScript. Wprowadziłem do swojego stylu pracy pewien szczegół. Mianowicie ulepszyłem nazewnictwo zmiennych. W pewnych przypadkach (o których więcej w dalszej części) zaczynam nazwę zmiennej od znaku dolara ($).

Chcesz dowiedzieć się dlaczego?

Po co mi dolar? Zadanie ⌨️

Zanim odpowiem na pytanie, spróbuj napisać kawałek kodu, który:

będzie pobierać username użytkownika z pola input
sprawdzi, czy wpisana wartość nie jest pusta

Masz pomysł na implementację?

•

Prawdopodobnie napisałbyś coś takiego:

const username = document.querySelector('.username');
const userName = username.value;
const isEmptyUsername = (userName.length === 0);

console.log({ isEmptyUsername });

W takim przypadku aż kusi stwierdzenie, że zmienne username oraz userName są bardzo podobne, co może generować błędy.

Moja rada

W opisywanej przeze mnie sytuacji uprościłbym sobie życie i zastosował regułę:

Złota Zasada

Jeśli zmienna przechowuje referencję do elementu w DOM, poprzedź jej nazwę znakiem dolara. Poprzez element mam na myśli: Node lub NodeList.
Jeśli używasz jQuery lub jakiejś innej biblioteki do komunikacji z DOMem, to zmienne przechowujące obiekty jQuery też poprzedzam znakiem dolara.

Powyższy kod przepisałbym do następującego:

const $username = document.querySelector('.username');
const username = $username.value;
const isEmptyUsername = (username.length === 0);

console.log({ isEmptyUsername });

Czytelniej?

•

Aktualizacja: 2018-12-27

Jak widać nie tylko ja stosuję taką konwencję. Zobaczcie jaki kod wychodzi spod ręki mojego kolegi blogera — Miłosza:

const click$ = fromEvent(breedsFetchEl, 'click');
const breeds$ = click$.pipe(
  switchMap(() =>
    ajax.getJSON('https://dog.ceo/api/breeds/list/all')),
  map(result => Object.keys(result.message).join(', '))
);
breeds$.subscribe(breeds => breedsListEl.innerText = breeds);

Jak widać stosuje on dwie konwencje nazewnicze:

breedsFetchEl — *El do nazywania elementów z drzewa DOM
breeds$, click$ — *$ do nazywania reaktywnych strumieni

Git. Jak usunąć rewizję?

Piotr Kowalski — Tue, 11 Dec 2018 08:15:21 +0000

Miałeś kiedyś problem, aby usunąć przedostatni commit? Dziś o tym, jak usunąć dowolną rewizję z Git-a na 2 sposoby.

Krok po kroku 👣

Na początku przedstawiam historię repozytorium:

git log --oneline

09ee68e Rewizja 4 (HEAD)
60c495b Rewizja 3
6e45e15 Rewizja 2
749fcaa Rewizja 1

Do czego dążymy?

Zdefiniujmy cel zadania, aby wszystko było jasne:

Cel

Usunięcie commita o id=60c495b, który ma commit message “Rewizja 3”.

Realizacja

Skorzystajmy z polecenia git rebase, które jest w stanie zarządzić historią.

1. Cofamy się o dwa commity, czyli do “Rewizja 1”

git rebase -i 749fcaa

Po tej linijce powinien uruchomić się domyślny edytor.

Wskazówka

Jak zmienić domyślny edytor? Nadpisz zmienną środowiskową $EDITOR za pomocą polecenie: export EDITOR="nano"

2. (dla starych wersji Gita) Usuwamy linijkę z commitem

pick 749fcaa - Rewizja 1
pick 6e45e15 - Rewizja 2
pick 09ee68e - Rewizja 4

2. (dla nowych wersji Gita) Ustawiamy stan commita na `drop`

pick 749fcaa - Rewizja 1
pick 6e45e15 - Rewizja 2
drop 60c495b - Rewizja 3
pick 09ee68e - Rewizja 4

3. Zapisujemy plik oraz wychodzimy z edytora

Naszym oczom powinien ukazać się komunikat w stylu:

Successfully rebased and updated refs/heads/master.

Efekt końcowy jest następujący:

Nie ma rewizji w historii,
Nie ma zmian wprowadzanych przez usuniętą rewizję.

Dla przypomnienia

W edytorze Vim plik zapisujemy za pomocą polecenie :w (write), natomiast opuszczamy edytor za pomocą :q (quit).

Powyższe polecenia można uruchomić za pomocą jednego: :wq.

⭐️ Ćwiczenie dodatkowe

Spróbuj zmienić kolejność rewizji, tak aby git log --oneline pokazywał inną niż pierwotnie historię rewizji.

Wskazówka

Gdy będzie otwarty edytor, zmień kolejność linijek z rewizjami.

Pytanie rekrutacyjne nr 2: Jak optymalizowałbyś zasoby strony internetowej? — JavaScript Developer

Piotr Kowalski — Mon, 10 Dec 2018 08:15:40 +0000

Czas odpowiedzieć na kolejne pytanie rekrutacyjne. Tym razem jest ono związane z optymalizacją. Jakie znacie techniki optymalizacyjne? Opowiem Wam o kilku, które znam, a które w tym momencie przychodzą mi do głowy.

Moja odpowiedź

Jeśli chodzi o techniki optymalizacji, jakie można wprowadzić do strony, to jest ich mnóstwo. Przygotowałem dla Was ponad 20 pomysłów, aby zoptymalizować zasoby strony internetowej.

Obrazki

Technika CSS Sprites — aby wyeliminować zapytania HTTP za każdym razem, gdy strona będzie chciała wyświetlić malutką ikonkę, można obrazki połączyć w jeden duży plik. Więcej
Obecnie lepszą techniką do wykorzystywania ikono-grafik, jest załączenie ich w formie fontu, zbudowanej np. za pomocą Fontello. Więcej
Kolejnym pomysłem, jest wykorzystanie SVG i używanie ikonek jako specjalnie zbudowanych obrazów wektorowych. Więcej
Wykorzystanie Base64 zamiast bitmap. Więcej
Optymalizacja plików JPG, PNG za pomocą narzędzia ImageOptim redukując delikatnie jakość pliku. Więcej
Jeśli musi obrazek musi być bitmapą to wykorzystać format JPG, z uwagi na możliwość zastosowania dużej kompresji obrazu, redukując tym samym jego wielkość. Więcej
Zredukowanie wymiarów obrazków do takich, jakie są wykorzystane podczas prezentacji na stronie (uniknąć skalowania w dół). Więcej

CSS: Warstwa arkuszy stylów kaskadowych

Spakowanie wszystkich plików *.css do jednego, aby wyeliminować dużą ilość zapytań HTTP. Więcej
Usunięcie nieużywanych selektorów. Do tego celu warto wykorzystać narzędzie “Coverage” w DevToolsach przeglądarki Google Chrome. Więcej
Nie używać składni @import w plikach *.css. Więcej

JavaScript: Warstwa zdefiniowania logiki aplikacji po stronie przeglądarki

Łączenie plików *.js w jeden. Więcej
Minifikacja kodu (usunięcie białych znaków i komentarzy). Więcej
Obfuskacja kodu (zastąpienie długich nazw zmiennych, krótkimi). Więcej
Usunięcie nieużywanych skryptów. Do tego celu warto wykorzystać narzędzie “Coverage” w DevToolsach przeglądarki Google Chrome. Więcej
Osadzenie plików *.js na dole strony (przed zamknięciem body). Więcej
Opóźnienie ładowanie plików *.js za pomocą atrybutu async. Więcej

HTML: Warstwa opisu dokumentu

Wykorzystanie znacznika <link rel="prefetch" href="FILENAME"/>. Więcej
Poinformowanie przeglądarkę, żeby rozwiązała DNS do często wykorzystywanych zasobów z konkretnej domeny. Nie ma sensu podawać adresy do takich gigantów jak: Google, Facebook, czy Twitter.

Przykład: <link rel="dns-prefetch" href="http://example-domain.com/">

Aby sprawdzić, czy jakie adresy przeglądarka już sobie rozwiązała, należy w Google Chrome wejść na adres: chrome://net-internals/#dns

Limit przechowywanych rozwiązanych adresów wynosi 1000 sztuk. Więcej

Komunikacja z serwerem

Wsparcie przesyłania danych spakowanych za pomocą algorytmu GZIP. Więcej
Wykorzystanie protokołu HTTP/2, który jest w stanie zwrócić kilka plików, w jednym responsie. Wyeliminujemy w ten sposób, nawiązywania połączenia za każdym razem po zasób. Więcej
Kiedy komunikujemy się za pomocą RESTa, to możemy dostawać “zbyt duże” odpowiedzi, tj. dostaniemy także te dane, których nie potrzebujemy. Rozwiązaniem na sytuację, jest wykorzystanie technologi GraphQL, która to oczekuje od klienta dokładnej struktury, jaka powinna zostać zwrócona przez serwer. Więcej

Infrastruktura (konfiguracja web serwera)

Włączenie nagłówków Cache-Control, aby wyeliminować pytanie przeglądarki po zasób za każdym razem, kiedy tylko będzie taka definicja na stronie. Więcej
Wykorzystanie serwerów CDN, które mają skrócić czas dostępu do plików statycznych (obrazków, *.css, *.js, *.html, itp.). Więcej

Rozwiązania społeczności

Maciek Głowacki via Twitter

Dominik Szczepaniak via Facebook

Przede wszystkim optymalizacja obrazów, plików audio i video - to waży zdecydowanie najwięcej. Oprócz tego minifikacja stylów i skryptów. Można też wykorzystać kompresję GZIP. Część skryptów i arkuszy CSS można podpiąć korzystając z CDN.

•

Ogłoszenie

Dziś o 9:00 na fanpage-u zostało opublikowane 8. pytanie z serii pytań rekrutacyjnych zadawanych przeze mnie na rozmowach rekrutacyjnych, które prowadzę.

Zapraszam do dzielenia się swoimi odpowiedziami!

Podsumowanie miesiąca — Październik 2018

Piotr Kowalski — Sat, 08 Dec 2018 15:46:56 +0000

Dziś chciałem nadrobić zaległości i podsumować październik. Miesiąc, w którym obchodziłem urodziny i razem z Kasią i Piotrem zorganizowaliśmy coś, co było naszym marzeniem.

Development

Zacznijmy od najprzyjemniejszego dla mnie doświadczenia, czyli developmentu.

warsawjs-workshop-25-myskills

Projekt stworzony na potrzeby warsztatu z React.js. Aplikacja rozwiązuje problem podawania w każdym formularzu rejestracyjnym informacji o swoim doświadczeniu.
game-tickets-catcher

Rozpoczęcie developmentu gry a’la galaxian, aby móc wykorzystać ją podczas konkursu gdzie do wygrania byłby bilet na konferencję — ConFrontJS 2018.

Niestety projektu nie ukończyłem przed wydarzeniem, więc projekt obecnie jest w fazie czekania na lepsze czasy.

W tym projekcie nie użyłem żadnego frameworka, tylko chciałem napisać swój silnik gry.
Przerobienie strony https://confrontjs.com/ na aplikację Next.js

To było coś! Na początku cała strona była w jednym pliku HTML. Wytrwałem tak, do magicznej granicy 500 linii w jednym pliku. Później, każda zmiana generowała zajmowała zbyt dużo czasu więc zainwestowałem w przebudowanie wszystkiego na Next.js, framework, którego wykorzystałem do budowania strony głównej WarsawJS.

Organizacja wydarzeń

W tym miesiącu poza konferencją, zorganizowaliśmy z Kasią i Piotrem dwa wydarzenia: meetup oraz warsztaty.

Warsztaty WarsawJS Workshop #25 — React.js jak zwykle to była świetna sprawa, kiedy na wydarzenie, które organizujesz w niedzielę i to całą, przychodzi 50 osób, super!

Kolejne wydarzenie, bez którego nie mogłoby się obejść to nasz meetup WarsawJS Meetup #50. To jubileuszowe spotkanie, było złamaniem bariery 50 wydarzeń, które ciężko osiągnąć bez wewnętrznego pragnienia oraz pomocy społeczności.

Dziękujemy! <3

Od kiedy organizujemy meetupu, często w naszych rozmową przewijał się temat, zorganizowania konferencji. W tym miesiącu przyszedł na to moment i pod koniec października mogliście być obecni na ConFrontJS 2018 — pierwszej w historii WarsawJS konferencji!

Rocks!

Więcej na temat konferencji ConFrontJS 2018 znajdziesz w osobnym artykule.

Przeprowadzone szkolenia

Jak już wcześniej pisałem, w tym miesiącu zorganizowaliśmy workshop, dla społeczności WarsawJS, na którym to byłem trenerem, także takie rzeczy jak selekcja i spotkania trenerami również miały miejsce.

Jeśli byłeś/byłaś na WarsawJS Workshop #25 — React.js to zostaw komentarz, w którym proszę Cię, abyś napisał/a o tym, jaki Tobie spodobało się to wydarzenie.

Z góry dziękuję!

À propos selekcji to mam tutaj ciągle wątpliwość na temat jej skuteczności. Wkrótce napiszę osobny artykuł na ten przyporządkowania osób do właściwej grupy.

Wystąpienia publiczne

Pewnego dnia Piotr zaprosił mnie do firmy App’n’roll, w której pracuje, aby wygłosił lightning talka. Skorzystałem z okazji i poszedłem. Dziękuję za zaproszenie i z chęcią podejmę się próby kolejnych!

Produkcja filmów

Podczas tego miesiąca stworzyłem rekordową liczbę filmów, bo było ich aż 6.

Bardzo się z tego powodu cieszę, niestety w listopadzie odbije mi się to czkawką, i stworzę tylko jeden.

O tym co się działo w listopadzie będzie w osobnym artykule.

WarsawJS Meetup #50 — Invitation

Jak co miesiąc, zaproszenie. Tym razem beze mnie, bo kiedy Kasia i Piotr nagrywali zaproszenie to ja byłem na sali w Campus Warsaw i opowiadałem o React.js
Dostałem prezent ZASKOCZONY

Jak już Wam wspominałem, w październiku, a dokładnie 5 dnia tego miesiąca obchodziłem swoje 29 urodziny. Z tej okazji dostałem od przyjaciela Filipa upominek, za który serdecznie dziękuję!
Zwiedzam Campus Warsaw oraz podziwiam Konesera

Kolejny film, był o tym, jak spacerowałem po Konserze w towarzystwie Magdy. Widzieliśmy jak największą salę, a raczej hangar który to jest idealnym miejsce na targi.
Po co pojechałem na pocztę?

Jak by wyglądało wydarzenie bez stickersów? No właśnie. Dziś każde wydarzenie, nawet najmniejszy meetup posiada swoje logo, a tym samym naklejki.

Ostatnie dni przed konferencją spędziłem na tworzeniu filmów na to wydarzenie. Zrealizowałem dwa filmy, których celem było wprowadzenie społeczności do świata konfrontacji swoich przyzwyczajeń zw. z programowaniem i zaproszeniem ich na wydarzenie - ConFrontJS 2018:

Tworzenie artykułów

W tym miesiącu zaniedbałem mojego bloga, za co serdecznie przepraszam czytelników. Jedyny artykuł jaki powstał to Podsumowanie września. To stanowczo za mało!

Inne

Teraz się zacznie.

W tym miesiącu działo się bardzo dużo tematów, że tak to nazwę “pobocznych”.

Poszliśmy z Kasią do kina na film “Kler”. Dziwny to był film. Podczas niektórych scen odwracałem głowę, bo nie chciałem patrzeć na obraz. Wcześniej już czytałem recenzję, że niektóre sceny mogły zostać wycięte. Niestety nie zostały.

Udzieliłem wywiadu dla konferencji Code Motion Berlin 2018, ale… organizatorzy go nie wykorzystali 😁 Poświęciłem kilka godzin na odpowiedzenie na pytania, a tu zonk!

Brałem udział w szkoleniu z Vue.js firmy ide.school. Polecam ideę edukacji jak najbardziej. Fajnie, że spotkałem się z Magdą i Andrzejem podczas tego wydarzenia. Myślę, że warto zrobić tego typu szkolenie na WarsawJS. Zastanawiam się tylko kiedy, bo obecnie tematów jest tak dużo, że trzeba będzie wymyślić chyba nową inicjatywę.

Podczas konferencji Business Insiders 4.0 w Koneserze, jednym z prelegentów był sam Kevin Mitnick. Osoba, które nie trzeba przedstawiać. Ze względu na to, że mam jego kilka książek chciałem się z nim spotkać i uzyskać autograf. Niestety, takie gwiazdy jak on, nie chodzą sobie pomiędzy prelekcjami i niestety, ale moje czekanie przed budynkiem nie zdało się na nic.

Razem z Kasią poszliśmy na meetup PyWaw #79, który to tym razem miał inną formułę. Nie było prelekcji. Spotkanie polegało na tym, że uczestnicy dzielą się na grupy tematyczne. I w każdej grupie można rozmawiać tylko o jednym — wyznaczonym przez koordynatora — temacie. Każdy ma prawo zmienić grupę w dowolnym momencie. Pomysł interesujący!

Kilka dni wcześniej pojechałem na Wolę, aby być uczestnikiem pierwszego w historii Udemy meetupie. Dowiedziałem się podczas niego, jaki jest plan Udemy na rozwój, czym się teraz zajmują oraz jak wejść w branżę nagrywania kursów online.

Uruchomiliśmy na WarsawJS platformę newsletterową, którą w tym miesiącu wykorzystałem 3x do wysłania informacji ze świata społeczności WarsawJS. Uważam, że jest to przyjemna forma komunikacji, z uwagi na to, że mogę w elegancki sposób przedstawić plany społeczności oraz obecne osiągnięcia.

Jeśli jeszcze nie jesteś zapisany do newslettera to zapraszam Cię na stronę https://newsletter.warsawjs.com.

W tym miesiącu również odbywał się hackathon Nowa strona danych, na który wybrałem się z Kasią, aby zobaczyć jak wyglądał. Poniżej znajdziesz zdjęcie prosto z miejsca wydarzenia:

Jako wierny fan boksu, a szczególnie polskiego, obejrzałem w IPLA galę bokserską: Adamek — Miller, która odbywała się w Chicago. Niestety Tomek przegrał przez KO w 2 rundzie. Szkoda, ale jego epoka już minęła. Smutne to, ale trzeba się z tym pogodzić i podziękować mu za te emocje, które pojawiały się w naszych sercach, kiedy wygrywał pojedynki za wielką wodą.

•

To był pracowity miesiąc! Dziękuję wszystkim, którzy pomagali nam przy organizacji WarsawJS oraz przy konferencji ConFrontJS (wkrótce artykuł).

Do zobaczenia w przyszłym miesiącu!

Piotr

Pytanie rekrutacyjne nr 1: Stwórz pętle, która będzie wyświetlała liczby od 10 do 0 — JavaScript Developer

Piotr Kowalski — Wed, 05 Dec 2018 09:01:04 +0000

Z okazji końca roku, przygotowałem dla Was pewną rywalizację, a bardziej miejsce na sprawdzenie swoich umiejętności. W grudniu, codziennie na profilu piecioshka.dev będą publikowane pytania które zadawałem podczas spotkań rekrutacyjnych na stanowisko programisty #JavaScript.

Pierwsze pytanie!

A raczej zadanie. Jestem zwolennikiem dawania prostych zadań na spotkaniach rekrutacyjnych. Wiem, że nie sprawdzę całej wiedzy kandydata, aczkolwiek zadanie prostego zadania rekrutacyjnego da mi informację m.in o sposobie myślenia.

Zadanie brzmi: Stwórz pętle, która będzie wyświetlała liczby od 10 do 0

Zadanie powinno przetestować:

znajomość pętli
proces dekrementacji zmiennej

Moja rozwiązania

Pętla for

 for (let i = 10; i >= 0; i--) {
     console.log(i);
 }

Pętla while

 let i = 11;
 while (i--) {
     console.log(i);
 }

Pętla forEach

 const limit = 11;
 Array.from({ length: limit }).fill(null).forEach((_, i) => {
     console.log(limit - i - 1);
 });

No dobra, wystarczy. Ostatnia realizacja była super nadmiarowa. Nie polecam jej używać jako odpowiedzi na pytanie zadane podczas spotkania rekrutacyjnego.

Rozwiązania społeczności

A teraz przedstawię Wam rozwiązania społeczności. Na wstępie chciałem, podziękować za wzięcie udziału w tej przygodzie i zachęcam do odpowiadania w komentarzach na kolejne pytania!

Kamil Kiełbasa:
```
  var a = 0b1010;
  while (a > 0) {
      console.log(a);
      a -= 0b0001;
  }
```
Kiedy wkleimy ten kod do DevToolsów, to widzimy kolejno wyświetlone liczby od 10 do 0. Niestety, ale funkcja console.log, która jest w kodzie nie wyświetli zera. To dlaczego będzie ono widoczne?

Otóż narzędzie developerskie zawsze wyświetlają wartość, która jest zwrócona przez ostanie wyrażenie. W tym przypadku wyrażenie while zwróci zero jako, że zmienna a po ostatnim wywołaniu tej pętli uzyska taką wartość, kończąc tym samym wykonywanie się pętli (za sprawą warunku a > 0).

Przykład:
```
  let a = 1;
  while (a == 1) {
      console.log({ a });
      a++, 'qwe' // Comma operator
  }
```
W tym przypadku wyświetlone zostanie:
```
  {a: 1}
  "qwe"
```
Takie zachowanie można śmiało nazwać Side effectem. Dzięki Seba za zwrócenie na to uwagi.

Dominik Szczepaniak:

  function numbers(from, target) {
      for(let i = from; i >= target; --i) {
          console.log(i);
      }
  }

  numbers(10,0);

Ogłoszenie

Jutro kolejne rozwiązanie! A już dziś opublikowana została trzecia zagadka.

Zapraszam do udzielania odpowiedzi!

Git. Dlaczego nie dodajemy katalogu node_modules do repozytorium?

Piotr Kowalski — Tue, 20 Nov 2018 22:17:13 +0000

Poszukujecie odpowiedzi na pytanie, dlaczego nie dodajemy katalogu node_modules do repozytorium i dlaczego nie push-ujemy go do origina jakiś przeważnie jest GitHub? Odpowiedź w dalszej części.

Co to jest `node_modules`?

Katalog node_modules przechowuje wszystkie zainstalowane zależności projektu. Zawiera również zależności zależności.

W dużych projektach, ten katalog może ważyć dużo megabajtów.

Dlaczego NIE DODAJEMY `node_modules` do repozytorium?

Bo dużo waży - szkoda, pobierać tyle MB podczas klonowania projektu
Nie chcemy wersjonować czyjegoś kodu - aktualizacja paczek wymusiła by na nas mnóstwo zmian w projekcie
Kamil Gajowy napisał w swoim komentarz, że biblioteki raz zainstalowane i przechowywane w node_modules na systemie X, mogą nie działać na systemie Y, co może doprowadzić do wielu trudnych do rozwiązania błędów
Podczas tworzenia nowego kodu i jednoczesnego dodawania bibliotek / aktualizowania ich, widzimy w jednej rewizji nasze zmiany, ale także mnóstwo innych, które nic nie wnoszą do sensu aplikacji

…w skrócie:

Nie wrzucamy katalogu node_modules na GitHuba.

Jak się zabezpieczyć?

Zaraz po stworzeniu projektu, tj. po stworzeniu pliku package.json, należy stworzyć plik .gitignore, w którym wpisujemy katalog node_modules/.

Wskazówka

Zawsze dodaję slash na końcu linijki z katalogiem, dzięki czemu wiem, że mam do czynienia z katalogiem, a nie z plikiem.

Co zrobić, gdy już dodało się katalog `node_modules` do repozytorium?

Usunąć katalog node_modules z dysku komputera, np. rm -rf node_modules
Dodać plik .gitignore w katalogu głównym projektu
Dopisać w tym pliku linijkę node_modules/
Stworzyć rewizję (commit), np. git commit .gitignore -m "Ignore node_modules"

Od teraz możemy śmiało instalować zależności!

Kiedy warto dodać katalog `node_modules` do repozytorium?

W swojej historii poznałem dwa przypadki:

Kiedy chcemy przyspieszyć proces deploymentu i nie pobierać za każdym razem zależności projektu.
Kiedy proces deploymentu nie posiada dostępu do ściągania danych.

•

Na blogu istnieje artykuł, w którym kiedyś napisałem, dlaczego nie wolno dodawać katalogu .idea do repozytorium - warto przeczytać.

Podsumowanie mojego drugiego miesiąca bez pracy — Wrzesień 2018

Piotr Kowalski — Wed, 03 Oct 2018 13:48:11 +0000

Pomysł na “Podsumowanie miesiąca” był strzałem w dziesiątkę! Poczułem się lżej, kiedy opisałem swoje doświadczenia z mojego pierwszego miesiąca “pracy bez pracy”. Otrzymałem sporo pozytywnych komentarzy, co zawsze cieszy. Nie chciałbym jednak poprzestać na jednym wpisie, dlatego przygotowałem dla Was artykuł o kolejnym miesiącu, który spędziłem “w domu”.

Trwoga 🚨

Kolejny miesiąc pracy w domu (pisząc “praca” nie mam na myśli zarabiania, tylko realizowania swoich pomysłów, które de facto rzadko kiedy przynoszą mi jakiś dochód) dał mi do zrozumienia, jak ciężko jest osobie, która przez poprzednie 10 lat pracowała codziennie z ludźmi, wejść w tryb samotnika i realizować swoje pomysły każdego dnia w samotności.

Kiedy pracując na etacie, miałem wolny weekend, często poświęcałem go na realizowanie swoich pomysłów, bo to był najlepszy czas na tego typu zadania. Byłem wtedy MEGA wydajny — jeśli można tak powiedzieć. Nikt mi nie przeszkadzał tym samym mogłem się skupić na 100%.

Teraz kiedy przychodzi poniedziałek, to ciągle czuję ekscytację, że będę miał cały dzień dla siebie, ale nie jest to uczucie na tym samym poziomie co kiedyś. Martwię się tym, że sytuacja jest podobna do jedzenia słodyczy. Jeśli masz ochotę na czekoladę i zjesz jej kawałek, to jesteś uradowany. Jeśli jednak miałbyś jeść czekoladę non stop, to po jakimś czasie:

Nawet czekolada może Ci się znudzić 🍫

Perfekcjonizm

W tym miesiącu (jak i w poprzednim) cały czas poznaje siebie. Można powiedzieć, że “na nowo”, bo mam kupę czasu w ciągu dnia na rozmyślania. Widzę teraz, jak mocno poświęcam się swoim zadaniom. Teraz kiedy patrzę na to z boku, to stwierdzam, że jest coś nie tak. Praca przy komputerze po kilkanaście godzin dziennie, kiedy faktycznie nie muszę chodzić do biura, to lekka przesada.

Czas spędzony przed komputerem wzrósł o 50-80 godzin w skali miesiąca.

Będąc na wykładzie w SWPS, który poleciła mi koleżanka Ania, Perfekcjonizm - zasób czy przekleństwo? poznałem “definicję” niektórych słów. Tym samym słowo “perfekcjonizm”, które zawsze kojarzyłem pozytywnie przestało mieć taki wydźwięk w mojej głowie.

Kiedy ktoś wypowiada to LEGENDARNE słowo to u każdego w głowie pojawiają się pytania:

Czy jestem perfekcjonistą?
Czy moja praca nosi znamiona doskonałej?

W sumie to nie wiem, czy Wy tak macie, ale ja tak mam.

Po wykładzie zaczynam inaczej patrzeć na niektóre sprawy. Nie chciałbym opowiadać wszystkiego, co usłyszałem podczas tych zajęć, ale teraz widzę jakie skutki niesie bycie “perfekcjonistą”. Istnieją 3 typy bycia perfekcyjnym:

Zorientowany na siebie
Zorientowany na innych
Uwarunkowany społecznie

Nie chcę opisywać każdego przypadku (o wszystkich możecie przeczytać z linku powyżej), natomiast głęboko się zastanawiam, czy nie jestem przypadkiem osobą, która można opisać wszystkimi typami wymienionymi wyżej.

Pamiętam, że od młodych lat starałem się wszystko dobrze zrealizować, przywiązując wagę do każdej wykonywanej czynności. Dziś, przekłada to się na trzymanie porządku w kodzie, np. ze spacjami.

Mój osobisty linter w oczach nie daje mi spokoju, kiedy widzę niepoprawne formatowanie. Dla wielu z Was może to być zabawne, ale mnie zawsze boli, kiedy na końcu linijki widzę niepotrzebną spację albo (co gorsze) jej brak po słowie kluczowym function.

Powinienem o tym nagrać film, może wtedy lepiej wytłumaczę, co jest grane. Wróćmy jednak do podsumowania miesiąca.

Development

Ten miesiąc (czytaj wrzesień) był dla mnie obfity w kodowanie. W 4 dni napisałem stronę https://www.warsawjs.com, którą opublikowaliśmy podczas urodzinowego meetupu. Wykorzystałem Next.js, bo nauczony doświadczeniem z poprzednich projektów, wiem jak bardzo ważny jest Server-side rendering (nie jest krytycznie ważny dla użytkownika, ale jest za to istotny dla crawlerów, np. Googlebot).

Projekt był narysowany przez Kasię kilka miesięcy temu, ale codzienność nie pozwalała mi na zrealizowanie tego projektu szybciej (oczywiście miałem tyle czasu, ale Prawo Parkinsona jest ciągle obecne w moim życiu).

Nowa strona domowa społeczności WarsawJS zawiera podział na wydarzenia, z rozróżnieniem meetupów i workshopów i mnóstwo innych feature-ów

Acha! Byłbym zapomniał, na potrzeby prezentacji danych np. o liczbie prelegentów, zrobić port biblioteki bounty do komponentu Reactowego, tym samym powstała moja pierwsza paczka dla tego ekosystemu — react-bounty.

Zapraszam w imieniu założycieli WarsawJS!

Kolejną rzeczą jaką się chciałem pochwalić jest panel fejsbukowy na dole strony.

Wiem, że fanpage-e nie zyskują popularności a wręcz przeciwnie — tracą ją na rzecz grup. Chciałbym po prostu na tym medium, pokazać Wam to, co robię jako programista, trener, czy organizator. Chcę odseparować swój prywatny profil od tego zawodowego.

Zapraszam do obserwowania i wspierania mnie łapkami oraz co ważniejsze uśmiechem!

hamburger to kolejny projekt, jaki zrealizowałem w tym miesiącu. Zawsze chciałem zrobić taki widget w czystym CSSie i wiecie co? Zrobiłem to!

Organizacja wydarzeń

W tym miesiącu społeczność WarsawJS obchodziła swoje 4. urodziny. Świętowaliśmy podczas WarsawJS Meetup #49 - 4 urodziny, gdzie cała nasz trójka organizatorów wystąpiła na scenie!

Aby dobrze się przygotować do tematu, którym był duck typing przygotowałem projekt, w którym będę miał już skonfigurowany transpiler TypeScriptu do JavaScriptu. Tym samym powstał projekt typescript-playground.

Zapraszam do obejrzenia mojej urodzinowej prelekcji:

Slajdy znajdziesz tutaj slides-duck-typing.

Jak co miesiąc społeczność WarsawJS mogła się rozwijać na “prawie” darmowych warsztatach WarsawJS Workshop #24 - Testowanie kodu 3/3: Testy integracyjne.

Aby lepiej wytłumaczyć testy integracyjne, przygotowałem projekt, który jest namiastką panelu administracyjnego - warsawjs-workshop-24-admin-panel.

W sierpniu uruchomiliśmy przygotowania do ConFrontJS 2018 - pierwszej konferencji w społeczności WarsawJS.

Strona jest oparta na Bootstrapie. Autorem layoutu jestem ja, co zresztą łatwo rozpoznać, z powodu braku artystycznego podejścia Katarzyny.

Chcieliśmy stworzyć wydarzenie na szeroką skalę, aby do stolicy naszego kraju mogło przyjechać zdecydowanie więcej ludzi z zagranicy. Wierzymy, że podczas wydarzenia wysłuchamy kilkanaście świetnych prelekcji.

Będzie to nasza pierwsza konferencja, także na pewno przytrafią nam się “porażki”, ale zgodnie z cytatem, jaki opublikowałem wczoraj na fanpage’u:

…nie poddamy się!

Przeprowadzone szkolenia

Czy wiecie, kto był trenerem podczas WarsawJS Workshop #24 - Testowanie kodu 3/3: Testy integracyjne? Zgadliście!

Szkolenie z testów integracyjnych było ostatnim szkoleniem z cyklu “Testowanie kodu”, jakie wspólnie wymyśliliśmy z trenerami. Był to pierwszy cykl szkoleń w społeczności WarsawJS.

Świetnie było uczyć ludzi jak poprawnie pisać testy, jak dbać o kod. Podczas warsztatów polecaliśmy mnóstwo świetnych źródeł, a jedną z nich była rekomendowana przeze mnie na każdym szkoleniu książka Tomasza Jakuta vel “Comandeer”: Zaawansowany JavaScript - której recenzja już jest prawie gotowa i wkrótce zostanie opublikowana na blogu.

Webinary

W tym miesiąc zrobiłem tylko jeden webinar, pt. Wallaby.js: Zobacz, czy Twój kod działa poprawnie. Wszystko za sprawą tego, że brakowało mi pomysłów na miłe spędzenie czasu przy kodzie, kiedy to przygotowania do konferencji idą pełną parą.

Wrzućcie swoje pomysły na webinary w komentarze.

Produkcja filmów

We wrześniu nie mogę pochwalić się dużą ilością wyprodukowanych filmów. Czy wiecie Jak stworzyć Pull Request za pomocą terminala? | Narzędzia Świata? Jeśli nie to zapraszam Was do obejrzenia kilkuminutowego filmu na ten temat.

Standardowo jak co miesiąc (przez równo 4 lata) produkuję film, będący zaproszeniem na spotkania warszawskich programistów języka JavaScript.

Zapraszam do obejrzenia (4 * 12 [liczba miesięcy w roku] + 1 [nie zaczęliśmy liczyć wydarzeń od 0, eh]) urodzinowej zapowiedzi WarsawJS Meetup #49 - Invitation:

Tym razem zdjęcia wykonywaliśmy w amfiteatrze na warszawskiej Pradze w Parku Skaryszewskim. Piękne miejsce. Szkoda, że nie ma już tam żadnych wydarzeń. Przynajmniej ja o nich nic nie wiem.

Tworzenie artykułów

Pisanie artykułów w tym miesiącu również nie było dla mnie systematycznym zajęciem. Na początku miesiąca napisałem podsumowanie poprzedniego, ale to już czytaliście: Podsumowanie mojego pierwszego miesiąca bez pracy - Sierpień 2018.

Poza filmem na temat “Jak stworzyć Pull Request w terminalu?”, napisałem także tekst, po to, aby trafić do tych osób z mojej społeczności, które wolą czytać, zamiast oglądać. Bardzo się cieszę, że pomimo tego, że tak łatwo jest obejrzeć film, to dużo ludzi dalej woli czytać. To cieszy i dlatego też ten blog ciągle się rozwija.

Przeczytane książki

Bardzo żałuję, ale w tym miesiącu nie dotknąłem ani jednej książki. Przenoszenie ich z biurka na półkę i z powrotem chyba się nie liczy prawda? 😁

Inne

W tym roku nie brałem udziału w żadnych zawodach biegowych, a szkoda, bo w pewnym momencie moja forma była dość dobra, aby wystartować i przebiec dystans, np. 10KM w takim tempie, abym nie czuł wstydu.

Postanowiliśmy razem z Katarzyną wziąć udział w VII Wielka Ursynowska. Biegliśmy pod przykrywką społeczności WarsawJS. Niestety nikt nie rozpoznał naszych koszulek.

Moja dusza artystyczna (jeszcze o mnie dużo nie wiecie) zaprowadziła mnie we wrześniu do Muzeum Narodowego na wystawę prac Józefa Brandta z Warszawy.

Facet miał talent, pięknie malował konie, a to przecież zwierzęta, które najtrudniej namalować. Sztuką jest pokazać na obrazach emocje tych zwierząt. Brandtowi się to udawało, on to po prostu potrafił.

Źródło: http://www.agraart.pl

Film

Mój miesiąc za to obfitował w różnego rodzaju filmy! Chyba powinienem się przyznać… tak, jestem kinomanem. W tym miesiącu obejrzałem kontynuację mojej ulubionej sagi horrorów, którą rozpoczęła Obecność, czyli film pt. Zakonnica. Czy polecam? Średnio. Lubię się czasami przestraszyć, choć oglądanie tego filmu o 17:00 nie dało mi takiego lęku, gdyby pora była późniejsza.

Na Showmaxie skończył się Rojst - śmiem twierdzić, że najlepiej nagrany polski serial. Podczas oglądania cieszyłem swoje oko tak pięknymi zdjęciami.

W tym miesiącu moją ulubioną komedią była nowość kinowa: Johnny English: Nokaut. Strasznie lubię Atkinsona - dla mnie jest on porównywalny z tym Leslie Nielsenem.

Niedzielne popołudnia spędzałem, relaksując się podczas westernów, które zawsze oglądałem w dzieciństwie, będąc trochę zmuszony, bo przecież Tato oglądał i to on był królem pilota.

Obecnie ten gatunek filmowy bardzo przypada mi do gustu, tempo akcji zwykle jest spokojne, a sama fabuła zawsze interesująca. Z tego miejsca polecam Pewnego razu na Dzikim Zachodzie 1968, reżyserii Sergio Leone.

Och! Byłbym zapomniał. Najlepszy film tego miesiąca wygrała produkcja stara jak świat, ale jakże ciekawa: Dwunastu gniewnych ludzi. Czy da się nagrać 1.5 godzinny filmy w jednym pomieszczeniu? Da się. I to jeszcze jak! Polecam.

Feedback

Bardzo dziękuję Ci drogi czytelniku, że dotrwałeś do tego miejsca. Chciałbym uzyskać od Ciebie opinię na temat tego, czy według Ciebie powinienem więcej tworzyć takich artykułów.

Z wyrazami szacunku,

Piotr

Jak stworzyć Pull Request w terminalu?

Piotr Kowalski — Thu, 06 Sep 2018 07:01:31 +0000

Dziś artykuł z cyklu “Narzędzia świata”, bo opisuję tylko jedno narzędzia, ale za to jakie! Narzędzie nazywa się hub i jest oficjalnym klientem do GitHuba, który “pięknie” się z nim integruje, dzięki czemu mamy świetny CLI.

Dla tych, którzy wolą oglądać, zamiast czytać zapraszam na film:

Mój problem

Moja praca developerska opera się na uruchomieniu 3 okien:

IDE
terminal
przeglądarka

Jeśli chcę dokonać zmiany w IDE albo w terminalu to dokonuję tej czynności w sposób płynny (bez opóźnień). Natomiast przeglądanie stron internetowych czy korzystanie z narzędzi w oknie przeglądarki daj mi opóźnienia związane z warstwą sieciową np. pobieranie całej strony, na której chcę tylko kliknąć 1 malutki przycisk Create Pull Request.

Chciałbym mieć możliwość tworzenia Pull Request-ów z terminala - traktuję tę warstwę jako tzw. sterującą. Z tego miejsca zarządzam projektami, pobieram aktualizacje, czy sprawdzam hasło do Wi-Fi.

Chciałbym wykorzystać terminal do tego, aby stworzyć Pull Request. Okazuje się to możliwe, a nawet przyjemne!

Instalacja narzędzia “hub”

W README.md projektu znajdziesz instrukcję jak zainstalować ten soft. W moim przypadku wydałem następujące polecenie:

brew install hub

Tworzymy Pull Request w terminalu

Wykorzystując hub stwórzmy Pull Request:

Sposób 1

Tworzę feature-brancha
```
 git feature test-hub
```
Tworzę dowolną rewizję (moim przypadku będzie pusta)
```
 git commit -am 'Empty revision' --allow-empty
```
Publikuję branch na origin (w przeciwnym przypadku dostaniecie błąd Unprocessable Entity (HTTP 422))
```
 git push origin feature/test-hub
```
Tworzę Pull Request definiując dla niego tytuł ⭐️
```
 hub pull-request -m "Test PR created with hub"
```

Efekt wykonania powyższych poleceń dostępny jest tutaj https://github.com/piecioshka/webinar-testowanie-kodu/pull/2

Sposób 2 (dla mnie optymalny)

Tworzę feature-brancha
```
 git feature test-hub-2
```
Tworzę dowolną rewizję (moim przypadku będzie pusta)
```
 git commit -am 'Empty revision' --allow-empty
```
Tworzę Pull Request definiując dla niego tytuł ⭐️
```
 hub pull-request -pm "Test PR created with hub"
```
- parametr -m pozwala na zdefiniowanie tytułu Pull Requestu
- parametr -p publikuje lokalny branch na origin

Efekt wykonania powyższych poleceń dostępny jest tutaj https://github.com/piecioshka/webinar-testowanie-kodu/pull/3

Sposób 3

Tworzę feature-brancha
```
 git feature test-hub-3
```
Tworzę dowolną rewizję (moim przypadku będzie pusta)
```
 git commit -am 'Empty revision' --allow-empty
```
Tworzę Pull Request ⭐️
```
 hub pull-request --no-edit -p
```
- parametr -p publikuje lokalny branch na origin
- parametr --no-edit kopiuje commit message z pierwszej rewizji i traktuje jako tytuł Pull Requestu

Efekt wykonania powyższych poleceń dostępny jest tutaj https://github.com/piecioshka/webinar-testowanie-kodu/pull/4

Feedback

Dajcie znać, jak Wam się korzysta z hub. Czy przyspieszył on Wasz workflow?

Podsumowanie mojego pierwszego miesiąca bez pracy — Sierpień 2018

Piotr Kowalski — Mon, 03 Sep 2018 06:00:00 +0000

Właśnie minął mój pierwszy miesiąc bez pracy na etacie. Jak sobie poradziłem? Co takiego robiłem? Czy nie brakowało mi biura? W końcu przepracowałem w nim 10 poprzednich lat.

O tym i o innych rzeczach napisałem w podsumowaniu miesiąca. Chciałbym tworzyć takie podsumowania co miesiąc, aby motywować siebie do przekraczania kolejnych barier, a jeśli przy okazji uda mi się zmotywować również Ciebie, to świetnie!

Dbajmy o produktywność.

Dlaczego zrezygnowałeś z pracy?

Odpowiedź jest zadziwiająco prosta, ale w tej chwili nie chcę o tym pisać. Nie uważam, że nadeszła już pora, aby wyłożyć karty na stół. Zaznaczam tylko, że rozstałem się z zespołem IPLI w baaardzo pozytywnych relacjach. Zawsze będę o nich ciepło myślał.

Podsumowanie miesiąca

Przedstawiam Wam raport z moich miesięcznych dokonań, abyście zobaczyli, jakie rzeczy przyszło mi zrobić. Pozostawiam Waszej ocenie, czy jest tego aż tyle, czy tylko tyle.

Psst…

Zastrzegam sobie prawo, do niepublikowania wszystkich rzeczy dotyczących moich prywatnych spraw. Wybaczcie. Każdy ma swoją bezpieczną przestrzeń.

Jako pierwszą weźmiemy na warsztat sekcję, która jest moją rdzenną i na której skupiam się najbardziej, czyli rozwój projektów developerskich via GitHub.

Development

Zacznę od tego, że stworzyłem na mojej stronie domowej specjalną sekcję do webinarów. Dostępna jest ona pod adresem https://piecioshka.pl/live.

Poświęciłem na nią około 20 godzin, ale dzięki temu jest mocno zautomatyzowana. Choć oczywiście Jekyll znowu spłatał mi kilka razy figla.

Przygotowując się do warsztatów WarsawJS wykonałem kilka miniprojektów, dzięki którym mogłem lepiej wytłumaczyć działanie narzędzi do testów end-to-end:

Podczas warsztatów jeden z uczestników podsunął mi pomysł, aby stworzyć paczkę, która pomoże w konwersji ścieżek xpath do selektorów CSS. Długo się nie zastanawiając, poświęciłem 10 minut życia (i szkolenia) na stworzenie takiej oto paczuszki: https://github.com/piecioshka/xpath-to-css-template-string-tag

Organizacja wydarzeń

W tym miesiącu jako WarsawJS organizowaliśmy dwa wydarzenia:

WarsawJS Meetup #48
- https://www.facebook.com/events/140875440085080/
WarsawJS Workshop #23
- https://www.facebook.com/events/2133561886872334/

Ze względu na dużą liczbę osób zainteresowanych wydarzeniem trzeba było przeprowadzić selekcję. Zajęła mi ona raptem kilka godzin.

Szkolenia

Kolejnym jakże ważnym dla mnie tematem są szkolenia. W tym miesiącu przeprowadziłem tylko jedno, o którym pisałem wyżej. Szkolenie miało tytuł: “WarsawJS Workshop #23 - Testowanie kodu 2/3: Testy E2E”. Wystąpiłem w nim w roli trenera (i organizatora, ale to pomijam, bo pisałem o tym wyżej), a nawet mentora całego kursu “Testowanie kodu”.

Zawsze przed szkoleniem przygotowuję slajdy. I tym razem było podobnie. Lubię tworzyć slajdy. Pewnie dlatego, że robię to szybko - piszę je w Markdownie, przez co nie tracę czasu na niepotrzebne rzeczy (np. animacje), tylko zapełniam je treścią.

Webinary

W tym miesiącu zrealizowałem tylko dwa webinary. Jak to? Przecież miałem organizować je co tydzień! No właśnie, po czwartym webinarze miałem przerwę ze względu na problemy techniczne.

Webinar: Ulepszamy proces uruchamiania testów z wykorzystaniem Karma
- https://www.youtube.com/watch?v=7xz1io0PoX0
Webinar: Eliminacja regresji z git-bisect | Multi-browser za pomocą Karma | Integracja z Travis CI
- https://www.youtube.com/watch?v=EzDAzbhtts4

Problemy rozwiązałem dzięki Kamilowi, który pożyczył mi ciekawy sprzęt — grabber video. Gdy przetestuję go w boju, to wybiorę się na zakupy, aby móc bezproblemowo realizować live streamingi. Obecnie jestem zadowolony z tego, jak to wyszło ostatnie nagranie.

Obejrzyjcie webinar poświęcony eliminacji regresji. Jestem z niego zadowolony. A to dziwne, bo rzadko kiedy jestem z siebie zadowolony.

Dzięki, Kamil, raz jeszcze 🏆

Wystąpienia publiczne

W tym miesiącu (jak prawie w każdym) wystąpiłem na scenie WarsawJS, aby wygłosić lightning talka. Nie wiem, czy wiecie, ale na poprzednich urodzinach powiedziałem, że będę robił miniprelekcje przez kolejny rok – oczywiście co miesiąc.

Co mnie do tego motywuje? Otóż:

comiesięczne wystąpienia na scenie dają mi większą pewność siebie podczas wszelkich przemówień,
realizując lightning talki, zachęcam wahające się osoby ze społeczności, aby wyszły na scenę i opowiedziały o swoim ostatnim doświadczeniu,
mam kolejne miejsce, w którym mogę uczyć ludzi - YES, YES, YES!

Zerknijcie na mój ostatni lightning talk pt. “Nightwatch.js: Twoje pierwsze testy end-to-end” wygłoszony na zakończenie WarsawJS Meetup #48.

Produkcja filmów

Wiecie, że od prawie czterech lat co miesiąc nagrywamy zaproszenie na spotkania WarsawJS? W tym miesiącu było podobnie. Na moje konto wskoczyła realizacja filmu (nagrywanie oraz montaż) będącego zaproszeniem na WarsawJS Meetup #48, o którym już wspominałem wcześniej.

Film możecie zobaczyć pod adresem https://www.youtube.com/watch?v=_HzX8JGro5A. Wiecie, że kiedy jest więcej łapek w górze, to wiem, że film Wam się spodobał?

Just saying…

Tworzenie artykułów

Rzutem na taśmę – bo ostatniego dnia miesiąca – opublikowałem artykuł dotyczący mojej ostatniej zmiany serwerowej. Często piszę artykuły, ale ich nie publikuję. Dlaczego? Bo po prostu ich nie kończę. Coś tam rozdrapię i zostawię. Niczym kura. Eh.

Zapraszam Was do lektury artykułu pt. “VPS SSD w OVH jako hosting dla Twojej aplikacji Node.js. Czy warto?” dostępnego pod tym linkiem: https://piecioshka.pl/blog/2018/08/31/vps-ssd-w-ovh-jako-hosting-dla-twojej-aplikacji-nodejs-czy-warto.html

Inne

Sekcja wytrych. Wrzucę tutaj wszystkie inne rzeczy, które robiłem w tym miesiącu, ale nie mogę ich zaliczyć do powyższych kategorii.

Znacie LinkedIn? Obserwujcie tam moją działalność?

W tym miesiącu wystawiłem moim współpracownikom z byłego zespołu z IPLA sześć rekomendacji. Nie wiem, czy dobrze to zrobiłem…

Dodatkowo w tym miesiącu spełniałem się wolontariacko jako pomocnik na pierwszych zawodach wspinaczkowych w Hrubieszowie - moim rodzinnym mieście. Podczas tego wydarzenia byłem tzw. komputerowcem tj. wprowadzałem wyniki podejść do komputera. Było całkiem miło i nawet - mimo prognoz - nie padał deszcz. Wkrótce na lokalnym portalu pojawią się zdjęcia z tego wydarzenia.

Jako że niekiedy było mi tak gorąco, że nie potrafiłem się skupić, to spędzałem czas na oglądaniu filmów i seriali. O tak - najlepsze marnowanie czasu ever.

W tym miesiącu zarejestrowałem się na Showmax i spędziłem w nim 13 godzin. Obejrzałem (prawie) cały serial “Magicians”. Polecam go fanom Harrego Pottera.

Dodatkowo pozwoliłem sobie na obejrzenie kilku filmów na tej platformie:

“Kobiety mafii”,
“Czerwony punkt”,
“Hakerzy” ❤️
“Skazany”,
“Miami Vice”.

Niektóre z nich oglądałem w podróży, co mnie bardzo cieszy. Funkcja “pobierz” w aplikacji mobilnej to świetna rzecz.

Jako że czas mi się dłużył i nie mogłem się skupić z tego gorąca, pewnego dnia poszedłem do kina sam. Pierwszy raz SAM. Było dziwnie, ale nie powiem, że tego nie powtórzę, bo oglądanie filmów o 15:30, kiedy wszyscy na Mokotowie są pozamykani w biurowcach, jest dość wygodne.

Oglądasz film na 15-metrowym ekranie, a w sali jest maks. 10 osób. Przyznasz, że jest to coś pozytywnego, prawda?

Także “Ant-Man i Osa” to mój pierwszy film obejrzany w kinie w środku dnia.

Analizując ten rozdział możecie wysnuć pewien wniosek — tak brakowało mi biura, zawsze w nim była superklimatyzacja, tym samym zawsze mogłem się skupić. No chyba że…

Feedback

Mam nadzieję, że tym artykułem zmotywuję osoby, które nie wiedzą, co zrobić ze swoim czasem. Aczkolwiek jestem otwarty na krytykę, także śmiało. Jeśli coś Ci leży na serduchu to wal. Nie obrażę się.

Piotr

VPS SSD w OVH jako hosting dla Twojej aplikacji Node.js. Czy warto?

Piotr Kowalski — Fri, 31 Aug 2018 16:00:53 +0000

Rok temu napisałem artykuł o tym dlaczego kończę współpracę z nazwa.pl i spróbuję zarządzać swoim pierwszym VPS-em w OVH.

Chciałem podsumować ten czas oraz przedstawić mój nowy zakup!

Dlaczego OVH?

Pozwolę sobie zacytować siebie sprzed roku:

Słyszałem od obecnych użytkowników OVH, że za tyle pieniędzy ile płaciłem za hosting w Nazwa.pl, mogę sobie kupić usługę VPS. Piotr Kowalski - 2016-05-01 - Artykuł, gdzie przeprowadzam się do OVH

Po co zmieniam pakiet? Podsumowanie obecnej konfiguracji

Obecnie korzystam z VPS z Ubuntu 15.04 bez możliwości aktualizacji.

Trochę mi to przeszkadza, chociażby do prowadzenia tego bloga, którego mam postawionego na Jekyll-u. Jest to narządzie, a w sumie jest to gem (taka paczka z kodem, coś podobnego do naszych paczek w npm-ie), które wymaga nowszej wersji Ruby. Niestety, ale tutaj pojawia się problem z wersjami.

Wymagana wersja Ruby nie jest w stanie być zainstalowana na tak starym Ubuntu jaki jest zainstalowany na moim VPSie. Oznacza to tylko jedno. Czas na zmianę, czyli upgrade serwera.

Możliwości

To może na początek suchar:

Co może być lepszego niż własny VPS?

VPS z nowszym OS oraz wydajniejszym hardwarem.

Kurtyna.

Analizując ofertę OVH zobaczyłem, że posiadają serwery VPS z serii SSD, na których można zainstalować Ubuntu 16.04 (tak wyczytałem w sekcji Systemy operacyjne VPS OVH).

Pomyślałem sobie:

Nie jest to najnowszy system, ale na ten moment w zupełności mi wystarczy.

Wybieram najtańszą ofertę - VPS SSD 1 - z kilku powodów:

nie przewiduję wykonywać procesów, które obciążą serwer do takiego stopnia, że będzie problem z dostępnością jego zasobów (czytaj dalej auto-DOS)
w każdym momencie mogę zrobić upgrade na wyższą wersję zyskując tym samym więcej przestrzeni dyskowej oraz większą ilość pamięci RAM

Cena za serwer to 10.99 zł netto miesięcznie.
W przeliczeniu na rok dla kogoś, kto nie ma własnej działalności gospodarczej wychodzi 162.21 zł brutto. ZA CAŁY ROK.

Za co płacę?

Dostaję VPS-a z następującą konfiguracją:

1 vCore(s)
2,4 GHz
2 GB RAM
20 GB SSD

Kiedy przychodzi mi do wyboru szczegółów zamówienia (a jednym z nich jest wybór zainstalowanego systemu operacyjnego) widzę opcję 18.04!

WOW ⭐️

Ktoś się chyba pomylił, ale ciiii… może się nie skapną 😄

Ktoś nie aktualizuje swojej oferty, hmm...

Dlaczego Ubuntu?

Najważniejszy powód to społeczność.

Społeczność ma to do siebie rozwija oprogramowania na ten system, dba o łatki bezpieczeństwa, analizuje performance i podkręca soft jeszcze mocniej.

Kolejna rzecz wynikająca z pierwszej to popularność. System jest popularny więc developerzy piszą na niego soft.

Czy próbowaliście uruchamiać polecenie find na CentOS?
Jeśli nie to zobaczcie jak zaskakujące jest życie developera https://github.com/piecioshka/encoding-checker/issues/2

Migracja

Jakie są kolejne kroki po zakupie nowego serwera?

Dodam, że podczas zakupu dostajemy credentiale do konta root

Konfiguracja SSH

GitHub świetnie wytłumaczył jak to ogarnąć (link powyżej).
Utworzenie nowego użytkownika

Praca z własną maszyną jest o tyle interesująca, że dostajemy od razu konto, które ma najwyższe uprawnienia i możemy zrobić wszystko.

Nie posiadając zwykłego użytkownika, kiedy uruchamiamy dowolny soft uruchamiamy go z uprawnieniami root-a. Niesie to za sobą poważne konsekwencje.

Każdy skrypt uruchomiony na maszynie będzie upoważniony do tego, aby korzystać z zasobów całego systemu operacyjnego. Może zrobić wszystko. Czy na pewno chcemy oddać tą władzę?

Jak to zrobić opisałem w poprzednim artykule na temat zakupu VPS-a.
Instalacja niezbędnego oprogramowania

Co to znaczy dla mnie niezbędne oprogramowanie? Oczywiście: Git oraz Node.js.

Tego zawsze mi brakowało w hostingach których używałem. Deployment za pomocą Git-a to przyjemność. Wysyłam (git push) do origin-a zmiany, przełączam terminal na VPS-a, pobieram (git pull) zmiany i gotowe 🎉

W tym miejscu instaluję Node.js za pomocą prostego narzędzia nvm, które daje mi elastyczność w instalowaniu kilku wersji Node.js w jednym systemie operacyjnym.

Rozwiązanie jest szczególnie pomocne, kiedy masz kilka projektów, które były tworzone w różnych wersjach Node.js i są ściśle do nich “przywiązane”.
Instalacja projektów, które były we wcześniejszej lokalizacji

Korzystają z Git, przenoszenie projektów jest bardzo proste. Na nowym środowisku klonuję repozytorium, instaluje zależności i uruchamiam:
```
 npm start
```
Przekierowanie ruchu ze starego VPS-a na nowy

Ostatecznej aktualizacji wymagają DNSy, gdzie trzeba zaktualizować adres, na które mają się rozwiązywać domeny.
Wyłączenie starego VPS-a
```
 shutdown
```

Co powie dobry admin?

“Synku, a gdzie są backupy ze starego serwera?”

No właśnie, ten temat dla mnie i moich projektów jest opcjonalny.

Znacie ten żart?
Ludzie dzielą się na tych co robią backupu i tych którzy będą je robili.

Podsumowanie

Korzystają wiele miesięcy z usług OVH muszę z przykrością powiedzieć, że nie potrzebuję oglądać innych ofert, bo to jest mi zaoferowane spełnia moje oczekiwania.

Posiadanie własnego VPSa daje tą wolność uruchomienia aplikacji Node.js. Ktoś próbował uruchomić aplikację serwerową na hostingach? No właśnie.

Nie sądziłem, że korzystanie z VPSa będzie tak przyjemne. Własny serwer to nie tylko konto root, ale też możliwość uploadu na serwer czego dusza zapragnie. Disk quota wynosząca 20GB daje mi dużo możliwości. Tym samym mogę WRESZCIE przechowywać na serwerze zdjęcia w prywatnej “chmurze”.

Najlepszy styl pracy z kodem: TDD + Pair programming

Piotr Kowalski — Mon, 16 Jul 2018 12:20:34 +0000

Marzy mi się stworzenie idealnego środowiska pracy. Wpadłem na pomysł jak je osiągnąć, ale do tego potrzebuję kilku desek, aby zbudować customowe biurko.

Konfiguracja

Słyszę od wielu, że powinno się pracować w TDD, bo to jest najlepsze dla wytworzonego kodu, aby posiadał od razu testy (a nawet kiedy jeszcze sam się nie urodził).

Świetnie, ale bardzo mało ludzi je stosuje ^{[Potrzebne źródło]}.

Co jeśli Wam powiem, że jest to pewna bariera, taka fosa wokół zamku. Jeśli jednak ją się pokona osiągnie się coś fantastycznego (trzymając się tego przykładu z zamkiem - zdobędzie się skarb 💰).

Wyobrażam sobie, że na początku potrzebny jest spory nakład budżetowy oraz odpowiednia konfiguracja softwarowo-białkowa, ale jakie później zbierze się owoce takiej pracy, to mało która konfiguracja może z nią konkurować.

Czego potrzebujemy?

Aby zbudować idealne środowisko potrzebujemy 3 wyświetlaczy (w porywach do 5 - po 2 dla każdego developera).

monitor wyświetlający kod z testami jednostkowymi (dla Developera A)
monitor wyświetlający kod z implementacją (dla Developera B)
monitor wyświetlający raport z testów, który automatycznie się uruchamiają, kiedy zmieni się implementacja albo testy

Przykład:

Role

Cała idea skupia się na tym, że:

Developer A jest odpowiedzialny za zdefiniowanie test case–ów, które są przekazane przez np. biznes, albo przez kogoś innego
Developer B jest odpowiedzialny za implementację logiki, tak aby pokryć wymagania zdefiniowane przez Developera A
monitor na samej górze, wyświetla aktualny procent zaawansowania implementacji, tj. ile testów już przeszło, a ile jeszcze pozostało do implementacji.

Workflow

Jak widzę taki styl pracy:

Przychodzi do nas biznes (albo spotykamy się na planowaniu)
Developerzy notują co jest do zrobienia (albo czytają to, co biznes napisał w tickecie)
Developer A pisze pojedynczo oczekiwania biznesowe w katalogu z testami:
- na początku end-to-end (najwyższego poziomu)
- potem w integracyjnych (komunikacja między modułami)
- kończy na testach jednostkowych (pojedyncze funkcje / klasy)
konsultując się ciągle z Developer B
Developer B tworzy logikę biznesową, podpiera się mocno atrapami (najprawdopodobniej będą to stuby)
Zadanie można uznać za skończone, jeśli:
- Developer A skończył swoją pracę, czyli zdefiniuje wszystkie test case-y jakie jemu (oraz biznesowi) mogły przyjść do głowy, oraz
- monitor prezentujący aktualny raport z testów wyświetla informację, że wszystkie przypadki zostały przetestowane.

Opinia

Jak sądzisz, czy taki styl pracy jest idealny dla nas, developerów?

Chciałbym spróbować.

Zainteresowałem Ciebie takim stylem pracy? Odezwij się

Cya! 👋

Hexo: Integracja z Google Analytics

Piotr Kowalski — Sat, 30 Jun 2018 17:45:41 +0000

Wielu z nas chciałoby wiedzieć, kto nas obserwuje w danym momencie na naszym blogu albo ile wyświetleń mają nasze artykuły, które napisaliśmy.

Z pomocą przychodzi narzędzie Google Analytics. Jest to internetowy program, który służy do analizy wyświetleń strony internetowej.

Opiszę jak dołączyć wcześniej wspomniane narzędzie do swojego bloga.

Krok 1. Wchodzimy na stronę `Google Analytics`

Wchodzimy na stronę https://analytics.google.com/analytics/

Przed naszymi oczami ukazuje się komponent:

Krok 2. Założenie nowego konta na `Google Analytics`

Potrzebujemy konta w tym serwisie, dlatego jeśli kliknąłeś w powyższy link (jeśli nie to zrób to teraz), to kliknij w pozycję Sign up. Jeśli to zrobiłeś to otrzymasz taki oto formularz:

w polu Account Name wpisujesz nazwę swojego konta
w Website Name (Nazwa witryny) wpisujesz nazwę swojej strony www
w Website URL (URL witryny) wpisujesz nazwę swojego bloga, dzięki temu mechanizm Google Analytics będzie wiedział, że będzie śledził dokładnie Twoją stronę.
w Industry Category (Kategoria branży) wybierz kategorię do której mógłby należeć Twój blog
w Reporting Time Zone (Strefa czasowa raportowania) wybierz odpowiednią dla siebie strefę czasową

Później klikamy w pozycję końcową - Get Tracking ID 🎉

Teraz naszym oczom ukażą się pola służące do akceptacji wszelkich warunków i regulaminu Google Analytics. Pamiętaj, żeby je przeczytać!

Na końcu otrzymamy unikalne ID, które będziemy potrzebować, będzie ono wyglądać w stylu UA-XXXXXXX-X.

Krok 3. Osadzenie unikalnego ID w konfiguracji

Będąc w głównym katalogu naszego bloga, otwieramy plik o nazwie _config.yml i dopisujemy do niego unikalne ID.

google_analytics: UA-XXXXXXX-X

Krok 4. Sprawdzamy, czy `Google Analytics` zostało dobrze dodane

Po zbudowaniu aplikacji (hexo server) albo jej opublikowaniu i uruchomieniu w przeglądarce, w sekcji <head> (w kodzie strony) będzie widoczny nowy skrypt:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

Feedback

Drogi czytelniku / blogerze napisz w komentarzu pod tym wpisem (kończącym serię jak w 4 prostych krokach stworzyć w pełni bloga z wykorzystaniem hexo), czy poradziłeś sobie z konfiguracją Google Analytics czy może jednak napotkałeś na problemy.

Chciałbym, aby mój blog nie był tylko źródłem do czytania wpisów, ale też miejscem gdzie czytelnicy mogliby wypowiedzieć się w temacie który poruszam.

Polecane źródła

•

PS. Dziękuję @ctworzewski za pomoc w napisaniu tego artykułu.

Artykuły, dzięki którym stworzysz bloga w 10 minut:

Mam pomysł

Piotr Kowalski — Sun, 10 Jun 2018 22:00:00 +0000

Od jakiegoś czasu nie publikuję filmów. Powodem jest to, że wchodzę na kolejny poziom w procesie ich tworzenia. W sumie to wszędzie są te same poziomy edukacji. Przytoczę je, aby wyrównać poziom.

Poziomy edukacji

Entuzjastyczny debiutant - “Nie wiem, że nie wiem”
Zniechęcony adept - “Wiem, że nie wiem”

Obecny stan.
Dziecięcia frajda na produkcję filmów zniknęła.
Ostrożny praktyk - “Wiem, że wiem”
Samodzielny ekspert - “Nie wiem, że wiem”

Źródło: Slajdy z WarsawJS Workshop #19 - Wstęp do Front-endu

Chcesz abym stworzył: prelekcję, film i artykuł na wybrany przez Ciebie temat? Wpisz go do sondy.

Dlaczego brakuje filmów?

Kiedy widzę, ile pracy muszę poświęcić na produkcję filmu, czuje się jak dziecko we mgle. Widzę tyle możliwości, tyle pomysłów, tyle pracy, że się poddaje.

Trwam już w tym od miesiąca.

Ciężko mi jest, bo uwielbiam tworzyć filmy i pisać posty - pomimo moich niedoskonałości związanych z poprawnym wypowiadaniem się (tworzenie konstrukcji zdań, używaniem odpowiednich słów w opisach).

Co zrobić, aby na kanale pojawił się nowy film?

Właśnie wpadłem na pomysł. Uruchomię pojedynek.

Nic mnie tak nie mobilizuje jak rywalizacja. Walka z samym sobą, kiedy nikt na Ciebie nie patrzy jet nudna. Kiedy jednak w tej rywalizacji bierze kilka osób, zaczyna być ciekawie!

Tym razem zrobię zawody w pojedynkę, ale w kilku obszarach.

Zrobię mini-zawody, gdzie przygotuję się do zrobienia 3 aktywności:

prezentacja (a raczej lightning talk, tylko że taki 10 minutowy)
artykuł na blogu
oraz film na kanale

Każdą z tych aktywności zmierzę pod kątem czasu poświęconego na realizację. Bardzo ważne jest, że wykonam tylko jeden research. Po to, aby czas na research nie liczyć kilkukrotnie oraz aby każda z aktywności nie była na starcie przegrana. Chcę poświęcić kilka godzin, aby zrobić jedno rozeznanie w temacie, czego efektem będzie jeden prosty dokument w postaci np. mamy myśli (tak aby nie pisać - jak to zwykle bywa - notatek w formie artykułu).

Regulamin zawodów

Śmiesznie jest pisać regulamin do zawodów, które się wymyśliło i w których będzie się brać rolę oraz będzie się główną postacią zawodów, bo tylko jedna osoba będzie brała w nich udział. Przypomina mi to scenę z filmu “Najlepszy”, gdzie główny bohater filmu brał udział w zawodach specjalnie przygotowanych dla niego, aby pobił rekord i wziąć udział w prestiżowych zawodach.

§1. Wybór dowolnego tematu z dziedziny technologii webowych.
- Wyboru dokonuję poprzez wybranie tematu, który otrzyma największą liczbę głosów w twitterowej sondzie.
- Sonda kończy się 17 czerwca 2018.
- W przypadku tematów o równym poziomie liczby głosów, temat zostanie wybrany w drodze losowej (Math.random)
§2. Realizacja researchu, którego efektem będzie mapa myśli.
§3. Realizacja aktywności “Prezentacja”:
- Stworzenie slajdów do prezentacji
  - Opracowanie celu
  - Opracowanie planu ramowego
  - Uszczegółowienie
  - Stworzenie notatek do slajdów
- Dokonanie 2 prób przed obcą osobą (lub kamerą)
- Wygłoszenie prezentacji na dowolnym meetupie
§4. Realizacja aktywności “Artykuł”:
- Przygotowanie treści artykułu
  - Dodanie bibliografii i odnośników do wiarygodnych źródeł
  - Stworzenie baneru reklamującego artykuł
  - Stworzenie prostej infografiki
  - Pozyskanie jednej odpowiedzi na pyt. zw. z tematem od innej osoby
§5. Realizacja aktywności “Film”:
- Napisanie scenopisu
  - Zdefiniowanie listy scen
  - Określenie typu kadru dla każdego ujęcia
- Wybranie planu zdjęciowego
- Nagranie materiału
- Postprodukcja: Montaż filmu za pomocą specjalistycznego software-u
§6. Finalizacja
- Podliczenie czasy trwania każdej aktywności

•

Chciałbyś, abym wypowiedział się na Twój temat?
Dodaj go do twitterowej sondy. Po 7 dniach (od dziś) wybiorę najpopularniejszy.

Cya! 👋

Hexo: Integracja z Disqus

Piotr Kowalski — Thu, 07 Jun 2018 10:17:41 +0000

Kiedy już mamy blog, cas aby oddać społeczności panel z komentarzami, aby zdobyć feedback na temat danego artykułu. Dla wszystkich blogerów, wiadomość zwrotna to bardzo cenna wartość.

Przyszła więc pora na integrację z Disqus-em.

Krok 1. Założenie konta w Disqus

Wchodzimy na stronę disqus.com i zakładamy konto.

Tworzymy konto, by móc ustawić swoje dane: avatar, imię i nazwisko, itp.

Krok 2. Założenie nowej strony w Disqus

Potrzebowaliśmy konta, aby zostać administratorem komentarzy na nowej stronie. Załóżmy więc nową stronę, aby móc skonfigurować na niej panel z komentarzami.

Wchodzimy na disqus.com/admin
W lewym górnym logu klikamy na Your Sites a następnie na New.

Powinniśmy być na stronie disqus.com/admin/create
Uzupełniamy formularz:
- W pole Website Name wpisujemy nazwę aplikacji / strony, gdzie chcemy osadzić komentarze
- W liście Category wybieramy 1 z 10 kategorii tematycznej naszej strony. Pomocne jest to dla użytkowników Disqusa, którzy podczas przeglądania samego portalu Disqus.com będą poszukiwać artykułów z danej kategorii.
- W liście Language warto wybrać język strony. W tym języku będzie wyświetlany komponent z komentarzami.
W kolejnym kroku wybieramy plan.

Polecam wybrać darmowy, tj. Basic i potwierdzić klikając w Subscribe Now.
W kolejnym kroku Disqus prezentuje listę platform, gdzie chcemy osadzić panel z komentarzami. Proponuję wybrać ostatnią opcję:
```
  I don't see my platform listed,
  install manually with Universal Code
```
Zostanie zaprezentowany film jak osadzić Disqusa na zwykłej stronie. Nie interesuje nas on. Szablony w Hexo posiadają już integrację z Disqus-em out-of-the-box.

Klikamy w przycisk Configure, znajdujący się na samym dole strony.
Na stronie konfiguracji możemy wybrać:
- styl panelu komentarzy dla jasnych albo ciemnych teł
- typ kroju fontu użytego w panelu z komentarzami
- adres URL do głównej strony, gdzie panel z komentarzami będzie dostępny np. piecioshka.github.io/hexo-blog
W tym momencie wszystkie pola są opcjonalne. Oznacza to tyle że nie musimy ich uzupełniać.

Krok 3. Konfiguracja komentarzy na blogu

Konfiguracja Disqus-a w Hexo jest banalnie prosta.

Wystarczy, że do pliku _config.yml dodamy odpowiednią wartość disqus_shortname i … ale pomału.

Skąd pobrać wartość `disqus_shortname`?

Znowu wchodzimy na disqus.com/admin
Wybieramy nowo dodaną stronę (z panelu na górze strony)
Po prawej stronie klikamy z link Edit Settings
Znajdziemy się na stronie, gdzie będzie widoczny pole Shortname.

Kopiujemy wartość tego pola: np. piecioshka-pl

Uwaga

Wartość tego pola nie może być zmieniona.
Jedynym rozwiązaniem jest usunięcie strony i założenie nowej.
W pliku _config.yml na dole strony dodajemy:
```
  theme_config:
    comments:
      disqus_shortname: piecioshka-test
```
Jeśli już wcześniej istniał klucz theme_config to dodajemy tylko blok comments.

Demo 🎉

Zapraszam na stronę: piecioshka.github.io/hexo-blog/2018/06/01/iife/, gdzie zainstalowany został panel z komentarzami 🏆

Polecane źródła

Artykuły, dzięki którym stworzysz bloga w 10 minut:

Jak zmienić domyślny wygląd bloga opartego na Hexo?

Piotr Kowalski — Mon, 04 Jun 2018 07:27:37 +0000

Kiedy napisaliśmy kilka artykułów to teraz warto zmienić domyślny wygląd bloga. Przecież każdy blog musi się czymś wyróżniać, tak aby czytelnicy mogli je łatwo zapamiętać. Takie zjawisko nazywa się pamięcią wzrokową.

Gdzie znaleźć szablony dla `Hexo`?

Wejdź na stronę: hexo.io/themes, gdzie jest lista 207 darmowych szablonów.
Stan na dzień 2018-06-01

Myślicie, że je liczyłem? Oczywiście, że nie! Wykorzystałem panel DevTools i wpisałem do zakładki Console coś takiego:
document.querySelector('#plugin-list').children.length
Skąd wiedziałem jaki id ma lista?
Uprzednio wykorzystałem zakładkę Elements.

Gdy zrobię swój szablon to jak go opublikować?

Masz na to minimum 2 sposoby:

Publikujesz paczkę w npm-ie

Istnieje już 40 takich tematów: npmjs.com/search?q=hexo-theme-
Tworzysz Pull Request

W projekcie strony domowej: github.com/hexojs/site/ znajduje się lista obecnych szablonów.

Dodaj definicję swojego szablonu do pliku source/_data i wystaw Pull Request. Przykład dodania szablonu (pierwszy z brzegu): github.com/hexojs/site/commit/44f4a2b8a9691ac0adcfcbbadd40d15de2b917f4

Instalacja szablonu CleanBlog

Już wybrałem szablon. Jest minimalistyczny, za to jednak ma interesujący font. Przekonał mnie do siebie!

Tak wygląda blog, po instalacji tematu CleanBlog.

Odwiedź repozytorium: github.com/klugjo/hexo-theme-clean-blog

Wszystkie informacje (no prawie) na temat instalacji znajduję się tutaj.
W sekcji “Installation” w pliku README.md napisane jest, aby wykonać następujące polecenie (będąc oczywiście w katalogu projektu):

Copy + paste
```
 git clone https://github.com/klugjo/hexo-theme-clean-blog.git themes/clean-blog
```
Następnie w pliku _config.yml ustawić obecny temat na:
```
 theme: clean-blog
```
Konfiguracja szablonu

Nowy temat pozwala na konfigurację. Wykorzystajmy to, aby dodać kilka interesujących rzeczy, takich jak:
- nadpisanie domyślnego obrazka w tle
- zdefiniowanie menu górnego
Należy w tym celu w pliku _config.yml zrobić nową sekcję theme_config (polecam na samym dole), aby w niej definiować ustawienia szablonu.

Pokaż mi przykład, bo inaczej nie zrozumiem!

Przykład z mojej konfiguracji:

...
theme: clean-blog

theme_config:
  menu_title: Home
  index_cover: /hexo-blog/images/IMG_3502.jpg

  # Header
  menu:
    Home: /
    Contact: /contact/
    Github:
      url: https://github.com/piecioshka/
      icon: github
    Twitter:
      url: https://twitter.com/piecioshka
      icon: twitter

Moja rewizja z wdrożeniem tego tematu znajduje się tutaj: github.com/piecioshka/hexo-blog/commit/c216e0be14eee3e8889f3952fad3ed31fba35227

A jak teraz wygląda blog w przeglądarce?
piecioshka.github.io/hexo-blog/

Mój wkład w rozwój CleanBlog

Ze względu, że użyłem tego tematu w swoim eksperymencie - pisania artykułów w języku angielskim - to udostępniając najnowszy artykuł o IIFE, zauważyłem problem z brakiem obrazka w tweecie udostępniającym tenże artykuł.

Wpadłem na pomysł, aby samemu dodać kilka pomocnych meta tagów. Zrobiłem więc Pull Request, który został zmergowany! ⭐️

To już kolejny PR mojego autorstwa, który został wciągnięty do głównej gałęzi projektu. Jestem zadowolony z tego powodu - czuję, że mam wkład w rozwój społeczności. Zrobienie czegoś dobrego dla drugiego człowieka daje mi mega zastrzyk energii!

Artykuły, dzięki którym stworzysz bloga w 10 minut:

Dlaczego warto używać Disqusa na swoim blogu?

Piotr Kowalski — Fri, 01 Jun 2018 07:34:04 +0000

Masz swojego bloga. Starasz się pisać regularnie, aby utrzymać czytelników. Zależy Ci na feedbacku ale go nie masz. Nikt nie chce pisać komentarzy. Wiesz co może być przyczyną? Coś tak błahego, że ciężko na to wpaść.

Logo pobrałem ze strony: https://disqus.com/brand/

Jeśli używasz własnej implementacji systemu komentarzy możesz być ofiarą ich braku z rożnych powodów. Zapraszam Cię do artykułu, gdzie przedstawię Ci mój punkt widzenia. Rozmawiałem również z kilkoma autorami blogów, aby dowiedzieć się dlaczego oni używają Disqusa bądź dlaczego tego nie robią.

Zaznaczam, że artykuł nie jest sponsorowany przez żadną firmę.

Powody dla których NIE DAJĘ komentarzy w customowych implementacjach

Wygląd

Ludzie dokonują szybkiej oceny za pomocą narządu wzroku. Mój pierwszy szef powiedział:

Na stronach najważniejsze jest pierwsze wrażenie.

Oznacza to tyle że jeśli strona (komponent) wygląda kiepsko to nie wzbudza zaufania wśród internautów. I mnie cechuje taka właściwość. Jeśli zrobiłeś własną implementację formularza z komentarzami a nie zadbałeś o jego wygląd to licz się z brakiem komentarzy. Przynajmniej ode mnie.
Wolne działanie

Tutaj ukłon w stronę pluginów WordPress-owych. Po dodaniu komentarza na stronie budowanej za pomocą tego najpopularniejszego CMF obok przycisku (albo zamiast niego) pojawia się loader. I czekasz, czekasz i czekasz i nie wiesz ile jeszcze będzie to trwało. Nie możesz zamknąć strony, bo:

TRWA ŁADOWANIE…
Refresh całej strony

Świat poszedł do przodu. Pojawiły się komputery, amfetamina, samoloty. Cytat z filmu, pt. “Chłopaki nie płaczą”, rok 2000, reżyser Olaf Lubaszenko.

Jeśli po wysłaniu formularza z komentarzem strona jest odświeżana to dziwi mnie to podobnie jak majowe opady śniegu. W dzisiejszych czasach wystarczy napisać kilka linijek JavaScriptu, aby wysłać formularz bez odświeżania całej strony.
Wpisywanie tych samych pól za każdym razem

Kiedy chcę szybko napisać komentarz, zawsze muszę podawać takie rzeczy jak: imię, email, adres strony internetowej, captcha, albo jakaś inna weryfikacja poświadczająca, że jestem człowiekiem…

Szkoda mi na to czasu.
Brak centralizacji

W ciągu tygodnia tworzę od kilku do kilkunastu komentarzy na łamach różnych blogów. Nie sposób jest zapamiętać wszystkie adresy. Miałem tak wiele razy, że chciałem coś jeszcze dodać do swojego już opublikowanego komentarza, albo zobaczyć czy ktoś jeszcze skomentować ten sam artykuł i wtedy jest magiczny problem - NIE PAMIĘTAM gdzie wystawiałem dany komentarz. Nie będę teraz przeszukiwał historii ani Polskiego Front-endu w tym celu.

Po prostu odpuszczam.
Alternatywa?

Najgorsze jest to, że kiedy już raz spróbowałem Disqusa, to się w zakochałem. Świetne narzędzie posiadające mnóstwo świetnych feature-ów. Przyzwyczaiłem się do niektórych featurów. Szkoda mi teraz wracać do komponentu z komentarzami, gdzie nie będzie widać mojego avatara ani nie będę mógł osadzić zdjęcia, ani innego media obiektu np. tweeta.

Komponent Disqusa jest dosyć rozbudowany.

Co jest takiego w Disqus, że chce mi się skomentować?

Centralizacja

Scentralizowane miejsce, gdzie mam wszystkie swoje komentarze - wystarczy, że wejdę na swój profil na Disqus-ie i voilà!
Edytowanie komentarzy

Edycja komentarzy jest dla mnie zbawienna, szczególnie kiedy czasami o czymś zapomnę, popełnię literówkę lub źle sformatuję tekst.
Formatowanie wypowiedzi

Jest mi wygodnie, kiedy mogę robić boldy, italici, osadzać kod i zdjęcia, a nawet wrzucać zdjęcia, bądź osadzać posty z fejsbuka.
Gwarancja integralności

Nikt poza mną nie jest w stanie zmodyfikować tego co wpisałem.

We reserve the right to remove User Content alleged to be infringing without prior notice, at our sole discretion and without liability to you. Term of Service @ Disqus
Głosowanie

Głosowanie na komentarze motywuje celne i wartościowe komentarze.
Polecanie artykułów

Polubienie artykułu poprzez kliknięcie w przycisk “Poleć” daje sygnał dla innych przeglądających Disqusa w poszukiwaniu ciekawych treści, że ten artykuł jest warty przeczytania.
Wątki

Odpowiadanie na konkretne komentarze tworzy spójną historię. Czasami na blogach widzę, że struktura komentarzy jest płaska, ciężko wtedy o zabranie głosu tylko w jednej sprawie.
Udostępnienie komentarza

Każdy komentarz posiada własny link, dzięki czemu mogę go komuś udostępnić. Po otworzeniu takiego linku wiesz, że nie chodzi o to abyś zapoznał się z całym wątkiem, tylko z wybranym komentarzem.
Wspominanie użytkowników np. @piecioshka

Kiedy zakładasz konto w Disqus, można Cię przywołać w dowolnym panelu z komentarzami. Ostatnio wykorzystują tą opcję, do tego, kiedy komentuje mniej popularne blogi tworzone przez nowych adeptów przywołuję znanych ludzi z branży, aby dowiedzieli się o ich istnieniu.
Nie trzeba podawać dodatkowych danych, aby móc oddać komentarz

Autologowanie to wilki plus. Kiedy przeglądasz różne strony, na niektórych jesteś pierwszy raz i kiedy chcesz skomentować to od razu PISZESZ komentarz. Oszczędzasz czas związany z zakładaniem konta. Trzymanie kont we wielu miejscach powoduje, że musisz pamiętać tyle haseł. Oczywiście skorzystasz z KeyPassX, ale IMO cały ten proces może być wygodniejszy dzięki Disqus-owi.

Takie mam możliwości pojedynczego komentarza jako administrator.

Z punktu widzenia właściciela bloga, po co jest mieć Disqusa?

To nie Ty toczysz walkę ze spamem tylko Disqus

Ze swojej strony mogę dodać, że przez kilka lat używania Disqusa nie spotkał mnie problem spamu. Sytuacja wyglądała inaczej kiedy miałem bloga postawionego na WordPress-ie.
Nie przechowujesz danych o użytkowniku

Nie przechowując danych na temat usera, nie narażasz się na ich utratę danych. Eliminujesz w ten sposób podatności na zmianę danych przez kogoś, kto mógłby uzyskać nieautoryzowany dostęp do bazy danych z komentarzami.

Domyślam się, że sami właściciele blogów nie byliby zainteresowani modyfikacją komentarzy swoich czytelników, jednak NIESTETY taka szansa istnieje.
Multi-platformowe konto

Zakładając konto w Disqus masz swój profil, gdzie widzisz listę wszystkich swoich komentarzy na różnych stronach. Możesz ustawić avatar, który będzie identyfikował Twój komentarz.
Instalacja

Integracja z systemem jest bardzo prosta. Wystarczy, że poświęcisz max godzinę, aby dodać dobrze wyglądający komponent komentarzy. Mnie to bardzo przekonało, do tego, aby korzystać z Disqusa.

Disqus a reklamy. Problem `Spider’s Weba`

W ostatni piątek przeżyliśmy na Spider’s Web niemały szok, gdy ni stąd ni zowąd Disqus włączył swoje reklamy na naszej stronie. Początek artykułu pt. “O tym, jak Disqus postanowił nas załatwić w piątek wieczór na szaro” opublikowany na Spider’s Web

Takimi słowami zaczyna się artykuł, w którym redaktorzy Spider’s Weba opowiedzieli przykrą dla nich historię, podczas której Disqus włączył im bez ostrzeżenia komponent reklamowy (który możecie zobaczyć poniżej).

Reklamy na Spider's Web.
Źródło: https://www.spidersweb.pl/2017/01/disqus-reklamy-problemy.html

Głównym powodem tej przykrej sytuacji, było niepoinformowanie redakcji o włączeniu reklam, które można wyłączyć w wersji premium (płatne 10$ / miesiąc).

Jestem przekonany, że taka firma jak Spider’s Web posiada środki, aby dokonywać płatności za taką usługę, w końcu na podstawie komentarzy budowana jest społeczność.

Zgadzam się z opinią redaktorów. Przed włączeniem reklam w serwisie, Disqus powinien zapytać się o możliwość zakupu wersji płatnej, bo w przeciwnym przypadku, ze względu na ruch, jaki wygenerowany przez Spider’s Web, Disqus musi włączyć reklamy. Dla mnie taka informacja to oczywista oczywistość. Szkoda, że jej zabrakło. Czarny PR się rozlał.

Ciekaw jestem, czy ktoś inny poza Spider’s Web-em miał taki problem. Może to była po prostu jednorazowa sytuacja, bo osoba odpowiedzialna za takie włączenie spieszyła się na weekend, albo nawet przez myśl jej nie przeszło, że to, co chce zrobić jest złą strategią. Każdy uczy się na błędach.

W żaden sposób nie będę bronił Disqusa, bo popełnił błąd, a za błędy się płaci. Jednak jestem ciekaw czy taka sytuacja to wypadek przy pracy, czy aby może stała praktyka.

Znalazłem na stronie następującą informację:

Why were ads activated on my site?

The free version of Disqus is supported by advertising. Commercial sites on this version of Disqus will likely have some advertising. We email publishers before activating advertising. If no one at your organization received these emails, please reach out to us so that we can verify your contact information.

W skrócie:

Disqus wysyła wcześniej informację o aktywowaniu reklam do serwisu na którym jest osadzony.

Widocznie Spider’s Web uległ jakieś dziwnej sytuacji. Może cała ta zła opinia o Disqusie pojawiła się przez niepoprawne działania filtrów antyspamowych?

Teraz to już za późno. Mleko wykipiało. Stracić zaufanie można szybko.

Na stronie znajduje się sekcja FAQ, na której można przeczytać:

Are all sites required to run ads?

For personal blogs, .edu sites, nonprofits, and small sites that do not run other advertising, Disqus advertising is optional. If you are a small, non-commercial site, you can self identify for a free subscription to our Plus plan.

W skrócie:

Reklamy Disqusa są opcjonalne dla blogów, stron edukacyjnych, pozarządowych oraz małych stron, które nie mają żadnych innych reklam.

Jak opisać RODO w prostych słowach? To możliwość bycia zapomnianym. Dobrze to wyjaśniają panowie z HRejterzy:

Jak sobie Disqus radzi RODO? Na stronie jest informacja, że:

Disqus already offers a strong Do Not Track (DNT) framework. This includes both honoring DNT settings from browsers and allowing users to opt-out of tracking within Disqus for targeted advertising and content recommendations.

Tutaj możesz zarządzać swoim śledzeniem: disqus.com/data-sharing-settings/

Kluczowa informacja:

When a user is in Privacy Mode, Disqus will not collect or process any personal data, as defined by GDPR.

Dalej można przeczytać, że jeśli chcesz, aby Disqus usunął wszystko co ma o Tobie zapisane, powinieneś napisać maila na adres: privacy@disqus.com

Wywiad środowiskowy

Porozmawiałem z kilkoma blogerami, którzy używają Disqusa lub też nie i nigdy nie będą. Poniżej znajdziesz ich komentarz w tej sprawie. Kolejność odpowiedzi jest przypadkowa.

Używam Disqus z dwóch powodów… Po pierwsze kiedyś, gdy blog stał jeszcze na WordPress i nazywał się „burczu-programator”, miałem tam komentarze WordPress-owe i było to jednak bolesne doświadczenie z powodu ilości spamu, który dostawałem. Niby były jakieś wtyczki, które całkiem dobrze to filtrowały, ale jednak przy komentarzach Disqus ten problem znika zupełnie. Drugi powód to obecna konfiguracja na jakiej oparty jest mój blog. Stoi to na systemie Jekyll, a więc generatorze statycznych stron. Siłą rzeczy więc nie ma tutaj back-endu, który by mógł posłużyć do obsługi komentarzy, jestem więc zmuszony korzystać z rozwiązania zewnętrznego. Ogólnie Disqus jest ok - bodaj w zeszłym roku była afera dotycząca reklam ale jak dotąd nie osiągnąłem jeszcze progu odwiedzin, który by te reklamy aktywował. Poza tym Disqus dość dobrze się dopasowuje do layoutu strony, na której jest osadzony - to dla mnie też plus (konkurencyjne rozwiązanie - komentarze od Facebooka - nie wygląda tak dobrze, a o innych nie słyszałem). Bartek Dybowski - nafrontendzie.pl

Disqus jest to produkt firmy trzeciej. Nie mam zielonego pojęcia co on robi z danymi użytkownika. Nie mam żadnej gwarancji. że go nie zamkną “bo tak”. Jak mi działa blog nie mam gwarancji, że im działa system, albo że awaria u providera nie wytnie nagle całego Disqus (potrafiła wyciąć wszystkie zagraniczne serwery). Nie mam reklam i nikt nie będzie mi zmieniał sposobu w jaki coś jest wyświetlane (coś darmowego nie stanie się płatne). Mniej zależności do załadowania przez użytkownika podczas wchodzenia na stronę. Jakub Gutkowski - blog.gutek.pl

Jestem bardzo zadowolony z używania Disqusa. Największym jego plusem jest fakt, iż upraszcza flow dodawania komentarzy. Jeśli ktoś jest w nim zalogowany, to nie musi się przedzierać przez uzupełnianie całego formularza. Kolejnym miłym, a zarazem użytecznym, dodatkiem jest generowanie ruchu przez Disqusa. Jeśli zaś chodzi o kwestie ilości komentarzy, to trudno mi się odnieść. Wpływa na to fakt, że zintegrowałem swojego bloga dość wcześnie. Pluginu komentarzy od Facebooka nawet nie rozważałem do wprowadzenia. Nie podoba mi się ilość danych jakie zbierają i co później z tym robią. Kamil Kiełbasa - bd90.pl

Dlaczego używasz Disqusa? Co Cię do niego skłoniło?
Używałem tego typu systemów w sumie od zawsze (wcześniej na innym blogu Intense Debate, teraz Disqusa). Bez wątpienia jego ogromną zaletą jest to, że jest niezależny od systemu blogowego — wszystkie komentarze przeniosły się „same” z Ghosta na WordPress-a. A w przyszłości może jeszcze na coś innego.
Czy miałeś wcześniej customową implementacją systemu komentarzy?
Na innym blogu, tak, przez pewien czas używałem własnej nakładki na system komentarzy w WordPress-ie (nakładkę napisałem w jQuery, działała dobrze, jak na rok 2008!) Potem używałem Intense Debate.
Czy Ci się podoba w Disqus?
Mogę powiedzieć co mi się nie podoba ;) Jednak dość mała elastyczność. No i moralnie wątpliwe działania Disqusa odnośnie reklam na blogach… z tego powodu wielu popularnych blogerów przesiadło się na alternatywy, np. Open Source’owy wpDiscuz. Na plus jest łatwość ustawienia i bezobsługowe działanie. Michał Miszczyszyn - typeofweb.com

Dlaczego lubie Disqus? Podoba mi się jego łatwa integracja z WordPress-em. Dodatkowo, Disqus jest zintegrowany z kilkoma systemami logowania, dzięki czemu, nie muszę martwić się o tworzenie kont użytkowników na swoim blogu. Ponadto, Disqus w obecnej postaci ułatwia też znajdowanie powiązanych artykułów na innych blogach. Można też śledzić komentujących na swoim blogu, co też może doprowadzić do nowych ciekawych źródeł tekstów. to, co jednak mniej mi się podoba to wbudowane reklamy w wersji bezpłatnej. Niestety, Disqus taki ma model biznesowy. Piotr Nalepa - blog.piotrnalepa.pl

•

A Ty, co sądzisz na temat Disqusa?
Podziel się swoją opinią poniżej w panelu z komentarzami Disqusa.

Cya! 👋

Jak pokonałem Webpacka: Upgrade kilku wersji

Piotr Kowalski — Tue, 29 May 2018 09:23:53 +0000

npm postawił na bezpieczeństwo. I bardzo dobrze! Otwarty “sklep” niesie za sobą sytuację, gdzie ktoś może wejść, wrzucić do reklamówki co chce i wyjść bez płacenia. Jak sobie poradzić z milionami paczek jakie są w rejestrze npm?

W tak ogromnym rejestrze jakim jest npm jest całe mnóstwo paczek, które nie dbają o bezpieczeństwo, narażając tym samym korzystających, że ich aplikacje będą posiadać rożne podatności na ataki.

Ten artykuł powstał z powodu otrzymania przeze mnie maila z następującą wiadomością:

Co to oznacza? Otóż to, że projekt, którego kiedyś rozwijałem, posiada podatność z powodu korzystania z biblioteki w której taką podatność wykryto.

•

Techniczne detale

Pracę będę prowadził w projekcie game-fastest-joby.
Podgląd gry można zobaczyć tutaj.

W takiej sytuacji sklonowałem projekt i zainstalowałem zależności po to aby wykonać magiczne polecenie npm-check -u, które zupgraduje mi zależności.

Niestety, ale po instalacji zależności spotkałem się z takim komunikatem:

~/projects/game-fastest-joby > npm i
added 206 packages from 228 contributors and audited 455 packages in 7.416s
found 8 vulnerabilities (5 low, 1 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Uruchomiłem więc:

~/projects/game-fastest-joby > npm audit fix --force

I się zaczęło…

Wersja webpacka została zaktualizowana:

-    "webpack": "^1.3.7"
+    "webpack": "^4.10.0"

Myślisz sobie, że będę musiał coś zmieniać w mojej konfiguracji? Zobaczymy! Czas zbudować aplikację:

~/projects/game-fastest-joby > npm run build

O co chodzi z… tą liczbą `webpacków`?

Po wykonaniu polecenia otrzymałem następujący komunikat:

> @ build /private~/projects/game-fastest-joby
> webpack --profile -p

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
 - webpack-command (https://github.com/webpack-contrib/webpack-command)
   A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):

WTF? Co oni chcą ode mnie?

Wpisałem webpack-cli w zamian zostałem poczęstowany takim o to komunikatem:

+ webpack-cli@2.1.4
added 399 packages from 213 contributors and audited 12499 packages in 30.018s
found 1 moderate severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
   -> Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.resolve.extensions[2] should not be empty.
   -> A non-empty string

Fajnie, czyli konfiguracja się zmieniła.
To teraz zmieńmy ją. Czekaj, ale na jaką?

Wchodzę na pierwszy link w Google, który podpowiada jak zrobić upgrade do v4.

Czytam czytam… W artykule, nie ma nic co bym nie interesowało. Widzę, że są jakieś tryby pracy: production / development. No spoko, ale po co mi to?

Ja chcę TYLKO zbudować aplikację aby działała oraz nie chcę aby przychodziły mi maile z security alert-ami. Boje się ich!

Zawsze po przeczytaniu artykuły zerkam na komentarze - może znajdę coś ciekawego. W tym przypadku w komentarzach znalazłem coś co mnie ratuje:

Uruchamiam ponownie:

~/projects/game-fastest-joby > npm run build

> @ build /Users/piecioshka/projects/game-fastest-joby
> webpack -p

Hash: b5418d419295f52f43a8
Version: webpack 4.10.0
Time: 897ms
Built at: 2018-05-29 10:24:41
           Asset      Size  Chunks             Chunk Names
app/dist/main.js  6.54 KiB       0  [emitted]  main
Entrypoint main = app/dist/main.js
[0] ./app/scripts/main.js + 5 modules 11 KiB {0} [built]
    | ./app/scripts/main.js 150 bytes [built]
    | ./app/scripts/engine/game.js 7.77 KiB [built]
    | ./app/scripts/engine/loader.js 654 bytes [built]
    | ./app/scripts/engine/models/player.js 445 bytes [built]
    | ./app/scripts/engine/models/enemy.js 781 bytes [built]
    | ./app/scripts/engine/models/abstract-player.js 1.29 KiB [built]

Heroldzie! Odtrąbić sukces 🎉

Zbudowałem aplikację, więc warto by ją uruchomić przetestować czy działa!

O co chodzi z… ścieżkami?

No właśnie. Nie mogę, bo plik dist/bundle.js, zbudował się w kompletnie innym katalogu niż chciałem.

W konfiguracji webpack.config.js miałem zapisane tak:

output: {
    filename: 'app/dist/main.js'
},

Musiałem zmienić na:

output: {
    path: path.resolve('app/dist/'),
    filename: 'main.js'
},

Teraz struktura wygląda na taką jaka powinna być! ⭐️

✅ Zbudowanie aplikacji!
✅ Aplikacja się uruchamia!
✅ Aplikacja działa ja powinna!

Temat uznaję za zakończony.
Mogę się pochwalić, że mam już na produkcji Webpacka v4.0.

Dedykacja

Post powstał z pomysłu Piotra:

Jak założyć bloga korzystając z Hexo?

Piotr Kowalski — Mon, 28 May 2018 00:00:00 +0000

Mam kolegę Czarka, który uczy się programowania. Spotykamy się czasami na Hangout, aby pogadać o kodzie. Poleciłem Czarkowi, aby pisał daily raporty z przebiegu swojej nauki. Ważne jest, aby on sam widział po miesiącu (kiedy przyjdą PIERWSZE chwile zwątpienia) ile już się nauczył i że nie może się poddać!

Najlepszą formą jest tworzenie notatek i publikacja ich na łamach swojego bloga. Łączy się wtedy dwie rzeczy:

przyjemne - pisanie własnego bloga
pożyteczne - archiwizacja stanu nauki, np. dla potomnych / pracodawcy

Teraz rodzi się pytanie: Jak szybko postawić bloga?
Wordpress? Nie.

Wordpress to kobyła,
Wordpress wymaga bazy danych,
Wordpress to nie wersjonuje (np. za pomocą Gita) stanu artykułów,
Wordpress posiada panel administracyjny.

Alternatywa?
Jest ich mnóstwo: Jekyll, Gatsby, Hugo, Hexo.

Jekylla używam od 2-3 lat i jestem z niego bardzo zadowolony.
Ten blog, który właśnie czytasz, jest oparty właśnie na Jekyllu.

Napisałem kiedyś bliźniaczy artykuł pt. “Jak założyć bloga korzystając z Jekyll?” o tym, jak zbudować bloga w oparciu o inny silnik - Jekyll.
Post pochodzi sprzed 3 lat. Zobacz jak przez ten czas rozwinąłem się pod kątem literackim - budowanie zdań itp. Zmieniłem się w ogóle?

Cel

W tym artykule chciałbym przedstawić Ci jak szybko - praktycznie od zera - postawić projekt z systemem blogowym (blogiem) oraz go opublikować via GitHub Pages.

Kod źródłowy powinien być dostępny pod adresem:
github.com/piecioshka/hexo-blog/

Strona powinna działać pod adresem:
piecioshka.github.io/hexo-blog/

`1/6` Zbudowanie projektu (w oparciu o Hexo)

Copy + Paste

npm install -g hexo-cli
hexo init hexo-blog
cd hexo-blog
npm install

Warto przerobić ten projekt na repozytorium Git poprzez wykonanie następujących poleceń:

Copy + Paste

git init
git add .
git commit -am "Initial import"

`2/6` Dodanie posta

Dodaj jakiś plik (albo edytuj plik hello-world.md) w formacie Markdown do katalogu source/_posts.

WAŻNE

Nie zapomnij wpisać na górze nowo-stworzonego pliku preambuły:
---
title: To jest tytuł mojego artykułu
---

`3/6` Konfiguracja projektu

Należy zmienić w pliku _config.yml:

title, np. Blog programistyczny
author, np. Piotr Kowalski
url, np. https://piecioshka.github.io/
root, np. /hexo-blog/

Wypadałoby później utworzyć rewizję z tymi zmianami. Prawda?

Copy + Paste

git commit -am "Setup settings"

`4/6` GitHub: Konfiguracja repozytorium

Stworzenie repozytorium o nazwie np. hexo-blog odwiedzając stronę github.com/new

Ważne!

Nie wybieraj żadnego pliku z formatem pliku .gitignore ani z licencją.

“Wypchanie” kodu aplikacji na serwer:

Copy + Paste

  git remote add origin git@github.com:piecioshka/hexo-blog.git
  git push -u origin main

`5/6` Przygotowanie projektu do publikacji

Instalacja paczki, która wrzuci katalog public/ do brancha gh-pages:

Copy + paste
```
  npm i gh-pages --save-dev
```

Dodanie zadania do deploymentu do pliku package.json:

  "scripts": {
      "deploy": "gh-pages -d public/"
  }

Stworzenie rewizji w Git (po dodaniu zadania do deploymentu):

Copy + Paste
```
  git commit -am "Add deploy task"
```

`6/6` Publikacja projektu (via GitHub Pages)

“Wypchanie” wszystkich zmian na serwer:

Copy + Paste
```
  git push
```
Zbudowanie STATYCZNEJ wersji bloga w katalogu public/:
Uwaga

Aby wyeliminować wcześniejsze budowania należy uruchomić: Copy + Paste
```
hexo clean
```
Teraz można przejść do meritum, czyli do zbudowania statyczne struktury plików HTML, CSS, JavaScript wraz z obrazkami.

Copy + Paste
```
  hexo deploy
  npm run deploy
```

Demo 🎉

Otwórz stronę piecioshka.github.io/hexo-blog/
Twoim oczom powinien ukazać się PUSTY blog wraz z listą artykułów.

JEST TAK? Napisz o tym w komentarzu.
NIE JEST TAK? Napisz tym bardziej!

•

Aktualizacja: 2018-06-03

W sieci znalazłem blog autora jednego z moich ulubionych tematów do Hexo - Jonathan Klughertz, który w jednym swoim wpisie pokazał inne podejście do publikacji bloga via GitHub Pages.

Zapraszam do zapoznania się z artykułem pt. Hexo deploy your blog to github pages in one command.

•

Post dedykuję Czarkowi. Powodzenia w blogowaniu!

PS. Zamieszczam link do bloga Cezarego: ctworzewski.github.io/blog/

Artykuły, dzięki którym stworzysz bloga w 10 minut:

Repozytorium vs projekt vs aplikacja?

Piotr Kowalski — Wed, 23 May 2018 18:45:59 +0000

Rozwiejmy nieporozumienia związane z mylnym pojęciem tytułowych terminów.

Repozytorium

Repozytorium to:
- Wersjonowany katalog
- Zwykle zawiera podkatalogi i pliki (kod źródłowy)
- Jeśli używamy narzędzia Git, to w katalogu z repozytorium znajduje się katalog .git, gdzie zapisana jest konfiguracja
- Termin może być stosowany poza IT - możesz wersjonować dowolny katalog w celu śledzenia zmian, np. katalog z dokumentami firmowymi
- Kto ma dostęp do repozytorium? Zwykle programiści
Projekt

Projekt to:
- Katalog z plikami
- Zawiera podkatalogi a jednym z nich jest katalog z aplikacją
- Zwykle to cały katalog z projektem jest wersjonowany, tym samym katalog staje się repozytorium.
- Kto ma dostęp do repozytorium? Zespół projektowy
Aplikacja

Aplikacja to:
- Katalog w projekcie, który przechowuje dowolną liczbę plików, potrzebnych do jej uruchomienia
- Kto ma dostęp do repozytorium? Klienci, internauci

Jak stworzyć 3 pliki o różnych rozszerzeniach za pomocą 1 polecenia?

Piotr Kowalski — Mon, 21 May 2018 10:15:17 +0000

Oczywiście można stworzyć pliki za pomocą swojego IDE, ale może zaistnieje potrzeba stworzenie jakiegoś skryptu, albo może… dobra, wydaje mi się, że nie muszę tłumaczyć więcej.

Magiczne polecenie to:

touch index.{html,css,js}

Polecenie przydatne kiedy w aplikacji korzystasz z idei komponentów, a każdy komponent składa się np. z:

*.html - markupu
*.js - kontrolera
*.css - definicji wyglądu

Psst… polecenie nie działa na M$ Windows. Sorry.

Jaki mam stosunek do książek technicznych?

Piotr Kowalski — Fri, 18 May 2018 19:28:04 +0000

Dawno nic nie pisałem. Można mieć wrażenie, że skoro vloguję to już nie mam czasu na bloga. Nic bardziej mylnego.

To znaczy… czasu mam mało. Natomiast dobra organizacja sprawia, że można wszystko pogodzić i napisać opiniotwórczy artykuł. Zapraszam na PIERWSZY wpis tego typu!

Książki, te “złe”

Generalnie od czasów szkolnych nie byłem fanem książek - mało w nich było interakcji. Czytanie mnie nudziło. Pewnie dlatego, że owe książki to lektury, czyli książki czytane z obowiązku.

Nie mogę powiedzieć, że wszystkie lektury to zło. Zdarzały się takie, które mi się spodobały. Przykładem niech będzie powieść “Kamienie na szaniec” autorstwa Aleksandra Kamińskiego.

Książki, te “dobre”

Kiedy czytasz książki, które Cię interesują, to sprawa wygląda inaczej.

Masz chęć je wertować! Lubię ten stan kiedy czytam. Nie chcę sobie myśli zaprzątać jakimiś innymi rzeczami. Czytanie sprawia mi radość, bo dowiaduję się z nich to, co mnie szczerze interesuje.

Kiedy kupuję książki zw. z programowaniem i je czytam, to czuję taki spokój ducha. Nic nie muszę nikomu udowadniać (ach te czasy szkolne, kiedy odpowiadało się z lektury przy tablicy przed całą klasą).

To prawda, że taka książka ma prawo się zdezaktualizować. Książka to serializacja stanu wiedzy autora z danego momentu czasu. Wiadomo, że technologia się zmienia i świadomość autora również.

Książki raz wydrukowanej już nie zmienisz.

Mam w swoim zbiorze mnóstwo książek technicznych z zakresu programowania, sieci, baz danych, etc. Jest z nimi jeden problem - NIE SĄ przeze mnie CZYTANE.

Niestety obecnie pewnie ok 60% książek z moim prywatnym księgozbiorze kilkudziesięciu nie została przeze mnie przeczytana. Mam nadzieję, że kiedyś to nastąpi i będę wtedy narzekał, tak jak Ci, którzy obecnie narzekają, że książki się przedawniają.

•

Film

Mam coś na dokładkę!

Zrób sobie popcorn i zajrzyj na mój kanał, gdzie opowiadam szerzej na temat mojego doświadczenie z książkami oraz odpowiadam na pytanie, dlaczego nie napiszę książki.

Cya! 👋

macOS: Pokaż ukryte pliki

Piotr Kowalski — Mon, 23 Apr 2018 11:09:42 +0000

Już mam tego dość. Muszę napisać to na blogu bo inaczej nie zapamiętam tak banalnego skrótu na pokazywanie ukrytych plików w systemie macOS.

Domyślnie pliki, które zaczynają swoją nazwę od kropki, są ukryte. Nie wiem dlaczego, ale tak już jest.

Często muszę jednak upewnić się, że:

w katalogu znajduje się katalog .idea
katalog jest repozytorium Git-owym i istnieje katalog .git
katalog zawiera pliki konfiguracyjne np. .bash_rc

A najgorsze jest to, że podczas kopiowania całej zawartości katalogu, ukryte pliki nie są kopiowane. Rozwiązaniem jest wejście na poziom wyżej i przekopiowanie całego katalogu. Sprawa jest dla mnie również kłopotliwa gdy chcę wyczyścić katalog.

Do sedna!

Skrót, który pokazuje (lub chowa) ukryte pliki

Otwórz Finder-a

Naciśnij jednocześnie następujące przyciski: Cmd + Shift + .
(Command + Shift + kropka)

Tyle wygrać 🕺

Jak wykorzystać technikę "Man-in-the-middle" na własne potrzeby?

Piotr Kowalski — Wed, 28 Mar 2018 12:14:14 +0000

Jak działa atak “Man in the middle”? Dlaczego jest on bardzo niebezpieczny? Jak go wykorzystać w praktyce i rozwiązać problem bez modyfikacji aplikacji produkcyjnej?

Problem

W dniu dzisiejszym chciałem przedstawić Wam rozwiązanie do problemu, jaki mnie ostatnio spotkał w pracy. Telewizorowa aplikacja SPA (produkcyjna) w pewnym momencie ma problem z pobieraniem plików. Podczas uruchomienia pobiera pliki z niepoprawnego adresu - nie ma sensu zapuszczać się w detale tego problemu, bo to nie jest celem tego artykułu.

Aby rozwiązać problem w celu debugowania chciałbym móc zaserwować kod aplikacji z mojego komputera, a nie z produkcyjnej lokalizacji, ale jak to mam zrobić, skoro aplikacja jest wgrana do telewizora i nie ma możliwości jej podmiany, bez upgrade-u? Przecież nie mogę na produkcję wrzuć wersji developerskiej!

Rozwiązanie

Rozwiązanie polega na wpięciu się w ruch między routerem, do którego podłączony jest telewizor a samo urządzenie. Ze względu na fakt, że do tego routera wpięte jest mnóstwo urządzeń, wolę delikatnie zmienić architekturę i postawić swoje źródło dostępu do internetu (mój telefon).

Dzięki temu będę mógł wpiąć się komputerem pomiędzy telewizor a telefon za pomocą 2 portów jakie mam w komputerze:

USB - do którego podłączę telefon
Thunderbolt-Ethernet (dongle) - do którego podłączę telewizor za pomocą kabla sieciowego

W skrócie: Należy przechwycić ruch i móc go zmienić w locie.

Jak działa `Man in the middle`?

Technika MITM polega na przechwyceniu ruchu poprzez wpięcie urządzenia pomiędzy “ofiarę” (w moim przypadku telewizor), a internet (w moim przypadku telefon).

Ruch w obie strony możemy śledzić za pomocą narzędzia Wireshark. Niebezpieczne jest to, że response odpowiedzi może być modyfikowany. Tym samym OFIARA nie dostrzeże żadnej różnicy (jeśli ruch nie jest szyfrowany) kiedy dostanie zmodyfikowaną odpowiedź.

Bądź czujny!

Nie podłączajcie się do niezabezpieczonych sieci Wi-Fi. Istnieje potencjalne ryzyko, że ktoś może przechwytywać ruch (pakiety) i go modyfikować, a Wy się o tym nie dowiecie.

Konfiguracja

1. Telewizor albo inne urządzenie, np. inny telefon `(OFIARA)`

Podłączyć urządzenie kablem sieciowym (lub za pomocą Wi-Fi) do komputera. Jeśli nie ma wejścia to skorzystaj z przejściówki np. Thunderbolt → Ethernet

2. Telefon

Udostępnić internet z telefonu na jeden z trzech sposobów:

Podłączyć telefon do komputera za pomocą kabla USB
- Wyłącz Wi-Fi
- Włącz Udostępnianie:
  - iPhone: Hotspot osobisty
  - Android: Przenośny hotspot Wi-Fi
albo za pomocą Bluetooth
ostatecznie możesz spróbować za pomocą Wi-Fi, ale ten typ połączenie nie jest rekomendowany przeze mnie

Przetestuj stan!

Od teraz komputer powinien korzystać z telefonu jako źródła internetu.

Sprawdź, czy na komputerze, że możesz wejść na dowolny adres w przeglądarce.

3. Komputer `(ATAKUJĄCY)`

Poniższy opis dotyczy komputera typu MacBook.
Na innych komputerach proces również jest możliwy, jednak oprogramowanie trzeba inaczej skonfigurować.

Jeśli nie używasz Wi-Fi to wyłącz je, aby nie zaburzyć protokołu DNS.
Udostępnić połączenie:
- Udostępnić internet wchodząc do:
  - Preferencje systemowe → Udostępnianie
- Przejść do sekcji Udostępnianie internetu
  - W menu Udostępniaj swoje połączenie → iPhone USB
  - W menu Komputerom przez → Thunderbolt Ethernet
- Włączyć Udostępnianie internetu
  
  Przykład poprawnej konfiguracji udostępnienia połączenia.
  
  Przetestuj stan!
  
  Od teraz telewizor OFIARA powinien korzystać z komputera jako źródła internetu.
  
  Sprawdź, czy na telewizorze, że możesz wejść na dowolny adres w przeglądarce.
Przekierować ruch z DOMENA.pl na komputer atakującego
- Sprawdzenie jaki adres IP jest na interfejsie Thunderbolt - Ethernet
- Wpisanie do pliku /etc/hosts następujących rekordów
```
  192.168.2.1     DOMENA.pl
  192.168.2.1     www.DOMENA.pl
```
  Aby edytować ten plik należy być administratorem.
Przekierować ruch z DOMENA.pl na customową usługę (wraz z portem)

Stworzyć nowy vhost wpisując do pliku /usr/local/etc/nginx/nginx.conf lub dodaje do katalogu /usr/local/etc/nginx/servers/, plik np. domena.pl.conf:
```
  server {
      listen 80;
      server_name DOMENA.pl www.DOMENA.pl;
      #rewrite ^/$ http://0.0.0.0:3000 redirect;

      location / {
          proxy_pass   http://0.0.0.0:3000;
      }
  }
```
Uwaga

W pliku konfiguracyjnym dla nginx, wcięciem jest tabulacja.

Zrestartować nginx za pomocą polecenia

Copy + Paste
```
  sudo nginx -s reload
```
Przetestuj stan!

Od teraz wchodząc na komputerze na adres DOMENA.pl powinieneś stracić możliwość wyświetlenia jej zawartości.
Zainstalować serwer DNS na komputerze atakującego, aby urządzenie ofiary rozwiązywało adres tak jak atakujący sobie tego zażyczy:

Aby zainstalować narzędzie dnsmasq należy uruchomić polecenie:

Copy + Paste
```
  brew install dnsmasq
```
Następnie należy uruchomić serwer z podniesionymi uprawnieniami:

Copy + Paste
```
  sudo dnsmasq
```
Następnie należy odświeżyć DNS-y:

Copy + Paste
```
  sudo killall -HUP mDNSResponder
```

Stworzyć serwer w Node.js, aby mieć kontrolę nad ruchem HTTP.

Stworzyć plik server.js w dowolnym miejscu w systemie:

  const express = require('express');
  const morgan = require('morgan');
  const app = express();
  const PORT = 3000;

  app.use(morgan('dev'));

  app.all('*', (req, res) => {
      res.json({
          express: true
      });
  });

  app.listen(PORT, () => {
      console.log(`Server was started at http://0.0.0.0:${PORT}`);
  });

Zainstalować zależności:

Copy + Paste
```
  npm install express morgan
```
Uruchomić serwer za pomocą polecenia:

Copy + Paste
```
  node server.js
```

Przetestuj stan!

Od teraz na komputerze wchodząc na adres DOMENA.pl powinieneś otrzymać odpowiedź express: true.

Sprawdź stan wchodząc w przeglądarce na DOMENA.pl

Testy

Jak przetestować działanie?

Zmienić adres DOMENA.pl na nasz konkretny host (bez parametrów), który chcemy modyfikować ze swojego komputera.
Uruchomić telewizor i wejść do aplikacji.
Aplikacja uruchomiona z dowolnymi parametrami na wybranej domenie, będzie otrzymywać to, co zwraca serwer uruchomiony w Node.js.

Troubleshooting

-bash: dnsmasq: command not found

Problem polega na tym, że powłoka nie znajduje takiego pliku w żadnym z katalogów zdefiniowanych w zmiennej środowiskowej $PATH.

Aby rozwiązać problem uruchom:

Copy + Paste
```
  brew doctor
```
a następnie uruchom:

Copy + Paste
```
  echo 'export PATH="/usr/local/sbin:$PATH"' >> ~/.bash_profile
```
Zrestartować powłokę za pomocą polecenia:

Copy + Paste
```
  source ~/.bash_profile
```
Urządzenie (OFIARA) nie potrafi rozwiązać adresu

Jeśli na telewizorze występuje problem z komunikacją do nadpisywanego adresu, należy zrestartować dnsmasq.

Znajdź id procesu za pomocą polecenia:

Copy + Paste
```
  ps aux | grep dnsmasq
```
Zabij proces o id, który pojawić się w poprzednim wyniku w drugiej kolumnie:
```
  kill -9 NUMER
```

Pytania?

Jeśli macie pytania odnośnie zastosowanej techniki napiszcie w komentarzu.
Z przyjemnością porozmawiam więcej na ten temat.

TypeScript: Jak zacząć?

Piotr Kowalski — Wed, 31 Jan 2018 07:20:00 +0000

Kojarzysz TypeScript? Nigdy nie używałeś? Chciałbyś spróbować? Jeśli tak to w tym artykule przedstawię Ci szybki sposób wykorzystania.

Po co?

No właśnie. Zawsze przed użyciem jakiegoś narzędzia warto odpowiedzieć sobie na pytanie: po co mi <nazwa technologii>? Jeśli już mamy argumenty “za” i jest ich więcej niż tych “przeciw” to świetnie.

Jak to jest z TypeScriptem?

TypeScript mi pomaga w kilku aspektach. Może to nie jest zbyt dobre miejsce na ten temat, ale w krótkich “żołnierskich” słowach przedstawię Wam najważniejsze zalety TypeScripta (IMO).

1. Interfejsy

W projektach w których biorę udział (i tam gdzie jest TS) każdy obiekt ma zdefiniowaną strukturę. Pomaga to wyeliminować błędy typu undefined is not an object na poziomie kompilacji.

Kompilacja to proces, kiedy kod zamieniany jest na zrozumiały dla programu, który go uruchomi (w naszym przypadku będzie to przeglądarka). Zachodzi on przed wykonaniem kodu przez przeglądarkę. Przeglądarki internetowe interpretują kod, tj. uruchamiają go linijka po linijce. W skrajnej sytuacji błąd może nigdy nie wystąpić. W językach “kompilowalnych” czyli w TypeScript, kompilator w fazie “tłumaczenia” krzyknie kiedy nie zrozumie jakiegoś kawałka kodu.
2. Typy wartości

Era sprawdzania typu minęła. Dokładnie wiem z jakim typem wartości zmiennej mam do czynienia. Nie sprawdzam, czy jest stringiem, czy numberem. Po prostu ustalam podczas definicji jeden typ i do końca życia aplikacji będę miał ten typ zapewniony.

•

Jak napisać prosty projekt w `TypeScript`?

Zmiana rozszerzenia głównego pliku

Należy zaktualizować rozszerzenie głównego pliku *.js na *.ts.
Zmiany dokonujemy w systemie plików.

Oczywiście trzeba jeszcze zmienić ścieżkę do tego pliku w index.html.

Napisz kod w TypeScript

Przykładowy kod wzięty z przykładowego projektu:

 // main.ts
 import { Lib } from './lib';
 import { pure } from './pure';

 console.log(':: main ::');
 new Lib();
 pure();

Uruchomienie projektu (w trybie developerskim)

Jako narzędzie do uruchamiania projektu wykorzystamy parcel. Zainstalujmy go na początku.

Copy + paste
```
 npm install -g parcel-bundler
```
Polecenie wykonujemy w katalogu projektu:

Copy + paste
```
 parcel index.html
```

Od teraz aplikacja jest dostępna pod adresem localhost:1234 🚀

Psst… Na moim GitHubie znajdziesz kod omawianej aplikacji.

•

Doświadczenie z TypeScriptem

Na swoim publicznym GitHubie mam kilka projektów w TypeScript. Opowiem Ci o dwóch testowych:

test-jasmine-typescript

Projekt powstał aby dokonać konfiguracji projektu, gdzie wykorzystywana jest biblioteka Jasmine, a testy jednostkowe pisane są w TypeScript.
test-typescript-webpack

Super prosta konfiguracja TypeScript + Webpack.

Mam też kilka projektów prywatnych o których nie za bardzo mogę opowiadać. Mogę delikatnie uchylić “rąbka tajemnicy”, że od jakiegoś czasu pracujemy z zespołem nad nowym projektem, który oparty jest na Angularze 5 - tym samym używamy TypeScripta i jest ❤️

•

Prośba

Drogi czytelniku, mam do Ciebie pytanie:
Odpowiedz mi proszę w komentarzu, dlaczego Ty używasz TypeScripta?

Z pozdrowieniami dla Aleksandra.

Narzędzia Świata: npm-check

Piotr Kowalski — Tue, 30 Jan 2018 08:25:00 +0000

Dziś chciałbym przedstawić Ci narzędzie, które często wykorzystuję.

Wyobraź sobie projekt, nad którym pracujesz i dbasz o niego. Zależy Ci na zawsze aktualnych zależnościach, bo z nową wersją spodziewasz się, że:

będą działały szybciej
będą bezpieczniejsze
będą bardziej elastyczne
będą zajmowały mniej przestrzeni dyskowej?

Interaktywna aktualizacja 📦

Narzędzie o którym dzisiaj mowa nazywa się npm-check.

Porada

Proponuję instalację globalną, gdyż tego narzędzia będziesz używać w każdym swoim projekcie, no i nie ma sensu trzymać różnych wersji.

Tak więc, na początku wykonaj to polecenie:

npm install -g npm-check

A potem w katalogu projektu, którego chcesz zaktualizować zależności:

npm-check -u

Demo 🎉

Myślę, że najlepszym opisem projektu będzie poniższa prezentacja działania, na jednym z moim starych projektów:

Jak napisać 'Ź' w WebStorm na macOS?

Piotr Kowalski — Fri, 26 Jan 2018 08:00:38 +0000

Skróty skróty, kto ich nie lubi? Skróty są świetne, do momentu kiedy nie przysparzają problemów. Heh. Uwielbiam truizmy.

Zadanie

Drogi czytelniku, mam zadanie dla Ciebie.
Otwórz WebStorma i w dowolnym pliku napisz dużą literkę Ź [zi].

Jeśli Ci się udało kliknij w serduszko pod artykułem.

Jeśli nie to napisz komentarz z opisem co się stało 😄

Jak napisać “Ź” w moim ulubionym edytorze?

Zdecydowanie większa część z Was na pewno nie mogła poradzić sobie z zadaniem.

“Ktoś” wykorzystał kombinację przycisków do zamknięcia okien w edytorze.

Zapytacie, po co ktoś miałby podpinać skrót pod normalną literę alfabetu?
No tak, ale czyjego alfabetu?

Skrót OPTION + SHIFT + X jest wykorzystany w pluginie Task Management
do czyszczenia kontekstu (Clear Context).

Developerzy edytora nie wiedzą, że w polskim alfabecie istnieje tak “skomplikowana” litera jak “Ź”, stąd też wykorzystują ją do swoich niecnych celów.

Plugin Task Management jest domyślnie zainstalowany w WebStormie na każdym systemie, jednak tylko na macOS przysparza problemów.

Aby wyłączyć domyślne zachowanie edytora wykonaj:

Wejdź do sekcji WebStorm → Settings → Plug-ins
Wyłącz “checkbox” obok pluginu Task Management

Po restarcie WebStorma będziesz mógł wpisać opisywany znak.

Więcej informacji na jetbrains.com.

Jak usunąć zapytanie HTTP OPTIONS?

Piotr Kowalski — Thu, 25 Jan 2018 10:20:37 +0000

Ahoy! Od jakiegoś czasu artykuły pojawiają się rzadziej. Znalazłem tego przyczynę!

Pisząc artykuł zawsze staram się opisać wszystko co wiem na dany temat. Tym samym czas jaki muszę wygospodarować na taki artykuł wykracza poza moje możliwości. Szkoda.

Rozwiązanie jest proste. Będę publikował częściej, ale kosztem długości artykułu. Po prostu wpisy będą krótkie.

Jestem ciekaw, czy ta forma przypadnie Wam do gustu.

Problem

Piszę aplikację, która będzie hostowana na adresie foo.com. Aplikacja komunikuje się z backend-em, który jest dostępny pod adresem bar.com.

Kto nie wie, co to jest CORS, to zapraszam tutaj.

Podczas komunikacji z backend-em za pomocą zapytania HTTP typu GET albo POST, przed faktycznym zapytaniem, wysyłany jest automatycznie (inicjowany przez przeglądarkę) request typu OPTIONS.

Chciałbym go wyeliminować, aby w DevTools → Network nie widzieć zdublowanych rekordów.

Jak to osiągnąć?

Rozwiązanie

Jeśli w zapytaniu znajdują się nagłówki, które przeglądarka nie rozumie (np. są to customowe nagłówki, które rozumie tylko serwer bar.com), to takie zapytanie zostaje uznane za zapytanie z efektami ubocznymi i musi zostać SPRAWDZONE czy serwer poradzi sobie z jego obsługą.

Zapytanie HTTP OPTIONS jest po to, aby przeglądarka zweryfikowała serwer.

Aby wyeliminować zapytanie HTTP OPTIONS należy spełnić następujące warunki:

Nie używać customowych nagłówków, np. X-USERNAME: root
Ustawić nagłówek Content-Type na jeden z następujących:
- multipart/form-data
- application/x-www-form-urlencoded
- text/plain

W moim przypadku pomogło ustawienie Content-Type: text/plain.

Przeglądarka domyślnie ustawiała nagłówek Content-Type: application/json.

Więcej informacji na MDN.

Hackathon: Node Knockout #7 (2017)

Piotr Kowalski — Wed, 17 Jan 2018 10:07:20 +0000

Nie ma to jak zacząć rok od postu, który miał się ukazać w zeszłym roku! Przepraszam za to, jednak coś czuję, że mało kto będzie miał mi za złe, bo najważniejsze jest to, że w końcu jest kolejny wpis!

W listopadzie zeszłego roku brałem udział w hackathonie. Jak możecie się domyśleć, nazwa tego wydarzenia to “Node Knockout 2017”.

Jak dobrze wicie nie jest to mój pierwszy hackathon w życiu. Poniżej lista artykułów jakie napisałem na temat poprzednich wydarzeń tego typu:

Podsumowanie mojego projektu.

Pomysł

Tym razem nie była to gra… Już mam dość pisania gier. W sumie ostatnie hackathony kojarzyły mi się już tylko z tworzeniem gier. A ja przecież nie lubię grać w gry!

Tym razem chciałem zrobić coś co mi się przyda. Wpadłem na pomysł, aby stworzyć aplikację, która rozwiąże wiele problemów w społeczności WarsawJS.

Moim pomysłem była aplikacja do wypełniania (oraz ewentualnie tworzenia) quizów. Dzięki temu mógłbym udostępnić quiz na meetupie albo workshopie i wybrać osobę, która otrzyma od sponsorów / partnerów jakiś podarunek, np. bilet na konferencję. Zawsze mamy z tym problem aby kogoś obdarować, no bo jakimi kryteriami mamy się kierować w wyborze takiej osoby, aby było sprawiedliwie?

No właśnie.

Aplikacja “Milva” 🚀

Dzięki Kasi (mojej TŻ-tce) miałem nazwę do aplikacji. “Milva” tak nazwałem projekt. Prawdopodobnie to jakaś postać z Wiedźmina, ale nie mogę potwierdzić, że tak faktycznie jest ponieważ ani nie czytałem książki, ani nie grałem w tą grę.

Na hacakthony zawsze (prawie zawsze) wybieram stack technologiczny, którego jeszcze nie znam, aby nauczyć się nowych bibliotek / frameworków / wzorców. Tym razem postanowiłem wybrać Vue.js jako bibliotekę / framework do tworzenia aplikacji. Oczywiści samo Vue.js nie wystarczyło, musiałem również wykorzystać Vuex oraz vue-router.

Nie ma sensu opisywać aplikacji. Najlepiej będzie zobaczyć co udało mi się zrobić w te 48 godzin (efektywnie 35 godzin - musiałem trochę pospać).

Link do aplikacji: milva.herokuapp.com

Btw. jeśli interesuje Cię opis projektu (po angielsku) jaki przygotowałem, aby oddać aplikację do oceny to zajrzyj tutaj: dumplings.2017.nodeknockout.com

Hackathon Wnioski

Chciałbym przedstawić Ci jakie wyciągnąłem wnioski z mojego przygotowania do tego wydarzenia oraz co mocno pokrzyżowało moje plany szybkiego zakończenia projektu.

Wymyślenie celu projektu przed wydarzeniem

Poświęciłem 2 pierwsze godziny aby wymyślić projekt. Zamiast pisać kod, to ja biłem się z myślami co by tutaj stworzyć.

Porada nr 1

Poświęć dowolną ilość czasu na wymyślenie projektu przed wydarzeniem.
Wybór technologii przed wydarzeniem

Podobnie co wyżej. Nie wiedziałem jeszcze co wykorzystam do zrobienia tej aplikacji. Miałem wiele dróg, ale wybrałem Vue.js m.in. z tego powodu, że tydzień później byłem trenerem podczas warsztatów z tej technologii w ramach WarsawJS Workshop.

Porada nr 2

Taka sama jak wyżej. Przed wydarzeniem należy wybrać technologię.
Przetestowanie deploymentu wybranej technologii przed wydarzeniem

Tutaj był jakiś dramat. Niby wszystko proste i Heroku to najlepsze miejsce na deployment, ale nie szło. I to dość mocno. 4 godziny spędziłem na ogarnięcie tematu w jaki sposób mogę opublikować aplikację!

Wszystko sprowadziło się do tego, że aż musiałem spisać te swoje wyczyny, aby inni nie popełniali tych samych błędów co ja. I tak powstał o to artykuł pt. Vue.js na Heroku.

Porada nr 3

I to również trzeba było sprawdzić wcześniej!
Dużo czasu poświęciłem na layout

Jestem estetą. Uwielbiam czysty i jasny layout. I kiedy tworzę go SAM, to w mojej głowie tworzy się ponad tysiąc myśli na temat “jak taki layout powinien wyglądać”. A czas leci…

Porada nr 4

Stworzyć prosty layout i nie skupiać się przesadnie wyglądzie, kiedy tworzy się aplikację. To przy grach można skupić się bardziej na designie.
Ostatnie dwie godziny na Socket.io

Wpadłem na pomysł, aby dodać do projektu Socket.io. Nic w tym nadzwyczajnego. Zawsze na hackathonie je dodaję, aby projekt była bardziej interaktywny (multiplayer zawsze na propsie!).

Niestety na ten pomysł wpadłem 2 godziny przed końcem wydarzenia! Chciałbym tylko przypomnieć, że kilka godzin wcześniej spędziłem picując layout.

Nie ma co ukrywać, że tworzenie aplikacji klient-serwer jest bardziej złożone, niż CSS.

Porada nr 5

Nie tracić tyle czasu na inne pierdółki i zająć się bardziej wymagającymi zadaniami!
Deploy Socket.io na Heroku

Poległem. Nie potrafię uruchomić serwera z WebSocketami na tym środowisku. Przeczytałem jakieś tam artykuły opisujące jak to niby zrobić ale jednak “nie pykło”.

Zadanie do zrobienia!

Wymyślić / dowiedzieć się / shakować rozwiązanie jak uruchomić serwer WebSocketowy na Heroku. Gdy już to zrobię napiszę o tym artykuł. Jestem przekonany, że przyda się taki wpis dla społeczności.
Wykorzystanie Bulmy przyspieszyło development

O tak! Wreszcie jakiś pozytyw! Nie ma sensu pisać wszystkiego od nowa. Po to są frameworki CSS, dzięki którym budowanie layoutu w oparciu o siatkę jest bardzo przyjemne!

Porada nr 6

Polecam Bulmę jako framework CSS. Dobre nazewnictwo klas i świetne możliwości w budowaniu kontrolek.
Wykorzystanie paczki debug pomagało mi odnajdywanie się w logach

Podczas hackathonu wykorzystałem jedną z moich ulubionych paczek. Jest nią paczka debug, która ulepsza prymitywnego console.log-a.

Porada nr 7

Kto jeszcze nie korzystał z tej biblioteki, to szczerze polecam. W każdym produkcyjnym projekcie wykorzystuję tą paczkę!
is-my-json-valid stała na straży spójności danych!

Moja ulubiona biblioteka to is-my-json-valid (od nie dawna ajv). Super szybka walidacja schemy to jest coś czego potrzebuję i ani TypeScript ani Flow tutaj by nie pomógł! Mówię to z pełną sympatią do TypeScript-a 😄

Po so mi imjv? Walidacja JSONa po to, aby zweryfikować, czy faktycznie dostaję do czego oczekuję.

Porada nr 7

Gorąco polecam tą bibliotekę do walidacji JSONów.
Kiedyś opowiedziałem na jej temat lightning talka.
Literówka przy definiowaniu schema-y

Wspomniana literówka spowodowała stworzenie nowego formatu do sprawdzenia “czy wartość nie jest pusta?”. Omawiana literówka to:
```
- require
+ required
```
Najważniejsza porada!

Strzeżcie się literówek!
To one są zabierają nam (programistom) najwięcej czasu.

•

Wideo

Kilka dni po hackathonie nagrałem film, w który opowiadam o projekcie “Milva”:

•

Problem z Vue CLI

Podczas deploymentu miałem spory problem z opublikowaniem aplikacji przez domyślną konfigurację package.json. Ten plik został wygenerowany w procesie budowania aplikacji za pomocą vue-cli z użyciem template webpack.

Aplikacja posiada błąd dotyczący formatu wersji w package.json:

- "node": ">6.12.0",
- "npm": ">3.10.10"
+ "node": "8.x",
+ "npm": "5.x"

Walczyłem z tym tematem dosyć długo. Szkoda. Mógłbym ten czas poświęcić na ulepszanie aplikacji.

Co mi się spodobało w Vue.js?

Bardzo prosta składnia

Duży plus za prosty przepis na tworzenie komponentów. Połączenie markupu ze zdarzeniami UI to też prosta sprawa. A komunikacja między komponentami w obie strony (rodzic → dziecko i odwrotnie) to istna przyjemność!
Czytelny kod
- warstwa prezentacji - Vue.js
- warstwa przetrzymywania stanu - Vuex
- warstwa routingu - vue-router
Definicja komponentu w jednym pliku

Nie trzeba przełączać się po plikach. Ten punkt można traktować jako plus ale i pewnie takie rozwiązanie znajdzie swoich przeciwników.

Trudno. Dla mnie takie rozwiązanie to plus 👍
Wsparcie do Sass-a

Wystarczy ustawić atrybut <style lang="scss"> oraz doinstalować:

Copy + paste
```
 npm install node-sass sass-loader
```
aby korzystać z SCSS w stylach!

Zapomnijcie o Webpacku i jego “pięknej” konfiguracji.
Wsparcie WebStorma

Dobry edytor to taki, który podpowiada programiście to, co chce on za moment napisać. Moim zdaniem WebStorm króluje w tej kategorii. Pomalutku goni do Visual Studio Code, ale to inna liga.

WebStorm zna dyrektywy m.in. v-if, v-for, dzięki czemu pisanie markupu to przyjemność!
Ekstremalnie szybki development - Hot Module Reloading robi robotę!

Wreszcie przekonałem się do HMR. Wystarczy uruchomić:

Copy + paste
```
 npm run dev
```
i cieszyć się pracą bez odświeżania strony!
Świetne narzędzie developerski Vue.js Devtools

Gdy korzystać z SSoT (Redux, Vuex) to możesz cofać się w historii stanów, aby dowiedzieć się jak aplikacja wyglądała “kiedyś”.

Aby to robić musimy mieć odpowiednie narzędzie.
React ma swoje. Vue nie jest gorsze.

Co mi się nie spodobało w Vue.js?

Nie chciałbym kończyć tego artykułu negatywnie (w końcu to pierwszy wpis w tym roku), więc wcale nie napiszę, że dokumentacja mogła by być lepsza, bo ZAWSZE może być lepiej. Na pewno jest lepiej niż u konkurencji (patrz Angular).

•

Daj znać w komentarzu, czy lubisz brać udział w hackathonach?

•

Wiesz, że za miesiąc organizuję ze znajomymi hackathon? Jeśli nie, to zerknij tutaj.

Angular: Krótka historia o tym, jak złamałem system

Piotr Kowalski — Fri, 08 Dec 2017 09:30:00 +0000

Lubię krótkie wpisy. Tylko nie umiem ich pisać. Stąd też rzadko publikuję, bo wyobrażam sobie te wielogodzinne poświęcenie, aby napisać WSPANIAŁY, a zaraz długi artykułu traktującego o zadanym temacie…

Muszę nauczyć się pisać zwięźle i z mięsem. Sam lubię czytać takie rzeczy, więc czytelnicy tego bloga zapewne również. Do rzeczy.

Problem

Jest sobie taki serwis:

@Injectable()
export class UserPurchasesStateManagerService {

    private purchasesState$ = new BehaviorSubject(...);

    public setPurchasesState(state: number): void {
        this.purchasesState$.next(state);
    }

    public getPurchasesState$(): BehaviorSubject<number> {
        return this.purchasesState$;
    }
}

Niby wszystko poprawnie, ale errrr…

Wystarczy, że po utworzeniu instancji serwisu (przypominam, że w Angularze instancje serwisów są singletonami) zrobię tak:

// Sztuczne tworzenie, oczywiście Angular zrobi to niejawnie
const stateManager = new UserPurchasesStateManagerService();

// Boom!!
stateManager.getPurchasesState$().next(null)​;

…i złamałem system ☹️

Solucja

Trzeba zmienić definicję (i sygnaturę) gettera na:

// ...
export class UserPurchasesStateManagerService {
    // ...

    public getPurchasesState$(): Observable<number> {
        return this.purchasesState$.asObservable();
    }
}

A teraz krótka porada:

Porada

Jeśli gdzieś chcemy zwrócić subject-a to lepiej zrobić tak:

ukryć do private-em

zrobić getter, który go zwróci ale przekształci za pomocą .asObservable() w strumień read-only inaczej oddamy władzie zmiany stanu komuś innemu.

Vue.js na Heroku

Piotr Kowalski — Sat, 18 Nov 2017 16:17:17 +0000

Podczas hackathonu w jakim brałem udział tydzień temu - Node Knockout 2017, budowałem aplikację, którą - zgodnie z regulaminem wydarzenia - musiałem opublikować na Heroku. Przyzwyczaiłem się już do tego, że zawsze tam lądują moje aplikacje podczas wydarzeń takiego typu.

Spotkały mnie pewne problemy, które rozwiązałem i chciałem się podzielić moim rozwiązaniem. Nie uważam je za idealne. Jednak za wystarczające.

Disclaimer Zdaje sobie z tego sprawę, że wrzucanie katalogu dist do repozytorium jest bez sensowne, ponieważ Git nie powinien wersjonować plików zbundlowanych jednak - jak zawsze - istnieją wyjątki.

Etap 0 Heroku: Zakładanie konta

Zakładamy konto na: heroku.com
Panel użytkownika: dashboard.heroku.com

Heroku udostępnia panel dla użytkownika, gdzie można tworzyć nowe kontenery, gdzie uruchomiony jest system operacyjny Linux. Pojedynczy kontener w żargonie firmy nazywa się Dyno

Więcej na ich temat w pomocy.

Etap 1 Heroku: Przygotowanie środowiska

Tworzymy nową aplikację: New → Create new app
Wpisujemy nazwę dla naszej aplikacji w pole App name

Wpisana nazwa jest na sprawdzana “w locie” pod kątem dostępności.
Opcjonalnie: Wybieramy region: Choose a region → Europe

•

🎉 Aplikacja stworzona! 🎉

Możemy otworzyć aplikację w przeglądarce klikając w przycisk: Open app Naszym oczom powinien ukazać się komunikat:

Heroku | Welcome to your new app!

•

Etap 2 Stworzenie projektu za pomocą `Vue CLI`

1. Instalacja

Copy + paste

npm install -g vue-cli

Po instalacji, w terminalu będzie dostępne polecenie vue.

2. Wygenerowanie projektu za pomocą szablonu

Copy + paste

vue init webpack NAZWA_PROJEKTU

Wykorzystujemy jeden w predefiniowanej struktury aplikacji.
W projekcie vue-templates istnieje 6 różnych szablonów:

webpack
webpack-simple
pwa
simple
browserify
browserify-simple

3. Poprawienie wersji

Uwaga: W package.json należy poprawić wersję, z uwagi na problem, który wystąpi podczas instalacji zależności na Heroku:

   "engines": {
-    "node": ">= 4.0.0",
-    "npm": ">= 3.0.0"
+    "node": "8.x",
+    "npm": "5.x"
   },

4. Instalacja zależności

Copy + paste

npm install

W głównym katalogu projektu stworzy się plik package-lock.json, w którym zostaną zapisane wszystkie dane na temat zainstalowanych paczek wraz z ich wersjami.

Stacktrace z błędem

Jeśli nie zaktualizujemy wersji to będziemy świadkami błędu:

remote: -----> Building dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        WARNING: You are likely using a version of node-tar or npm that is incompatible with this version of Node.js.
remote:        Please use either the version of npm that is bundled with Node.js, or a version of npm (> 5.5.1 or < 5.4.0) or node-tar (> 4.0.1) that is compatible with Node.js 9 and above.
remote:        /tmp/build_ab1c9272aa348395c069d548da02c8c4/.heroku/node/bin/node[273]: ../src/node_zlib.cc:437:static void node::{anonymous}::ZCtx::Init(const v8::FunctionCallbackInfo<v8::Value>&): Assertion `args.Length() == 7 && "init(windowBits, level, memLevel, strategy, writeResult, writeCallback," " dictionary)"' failed.
remote:        1: node::Abort() [npm]
remote:        2: node::Assert(char const* const (*) [4]) [npm]
remote:        3: 0x1255aff [npm]
remote:        4: v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&)) [npm]
remote:        5: 0xb77f9c [npm]
remote:        6: v8::internal::Builtin_HandleApiCall(int, v8::internal::Object**, v8::internal::Isolate*) [npm]
remote:        7: 0x253e476842fd
remote: /app/tmp/buildpacks/19862b8792e84bd8421ded4660b92dfd1c41d92e19ac0b38c90301adc8ae3e0bd512fa01998af18fc2f0d31a157e9c82e8fdceba1a05e5d29adb8dc2bfaf08e1/lib/dependencies.sh: line 111:   273 Aborted                 npm install --unsafe-perm --userconfig $build_dir/.npmrc 2>&1
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        Some possible problems:
remote:
remote:        - Dangerous semver range (>) in engines.node
remote:        https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote:        Love,
remote:        Heroku

5. Zamieniamy projekt w repozytorium

Copy + paste

git init
git add .
git commit -am "Initial import"

•

Teraz mamy dwie opcje:

Dodajemy katalog dist/ do repozytorium
Nie dodajemy katalogu dist/ (rekomendowana)

Zobaczmy jak wyglądają obie opcje w realu!

•

Etap 2 → Opcja 1 Dodajemy katalog `dist/` do repozytorium

1. Budujemy produkcyjną wersję aplikacji w katalogu `dist/`

Copy + paste

npm run build

2. Wyłączamy ignorowania przez `Git`-a katalog `dist/`

Usuwamy linijkę w pliku .gitignore:

  node_modules/
- /dist/
  npm-debug.log*

3. Dodajemy katalog `dist/` do repozytorium

Copy + paste

git add .
git commit -am "Add distributed version"

4. Instalacja narzędzia, które będzie serwować katalog `dist/`

Copy + paste

npm install serve --save

5. Tworzymy zadanie `run-script`, które uruchomi aplikację

   "scripts": {
-    "start": "npm run dev",
+    "start": "serve dist/",
+    "deploy": "npm run build && git add dist/ && git commit -am 'Deploy' && git push -f heroku master"
   },

Opiszę co robią dodane zadania:

start - uruchomi paczkę serve, która będzie serwować katalog dist/, jako główny katalog aplikacji
deploy - aby przyspieszyć proces deploymentu warto zrobić takie zadanie, które wykona za nas wszelkie prace związanie ze zbudowaniem wersji produkcyjnej

6. Zapisujemy stan projektu

Copy + paste

git add .
git commit -am "Serve static files"

Aplikacja jest gotowa do pierwszego release-u! 🏆

•

Etap 2 → Opcja 2 Nie dodajemy katalogu `dist/` do repozytorium (rekomendowana)

1. Instalujemy paczkę, która będzie serwowała katalog `dist/`

Dla odmiany wykorzystajmy inną paczkę.
Tym razem niech to będzie http-server.

Copy + paste

npm install http-server --save

2. Dodajemy nowe zadania

    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "build": "node build/build.js",
+       "deploy": "git push -f heroku master",
+       "heroku-postbuild": "npm run build",
+       "start": "http-server dist/ -d false -g"
    },

Opiszę nowo dodane polecenia:

deploy - zadanie dzięki, któremu zaktualizujemy branch master w Heroku, przez co zostanie zaktualizowany projekt w serwerowni.
heroku-postbuild - jest to hook (event handler), który zostanie uruchomiony przez Heroku w celu zbudowania aplikacji.

Zadanie zostanie uruchomione po instalacji wszystkich zależności.
start - uruchamia serwer HTTP, który będzie serwował katalog dist/ jako directoryRoot, czy główny katalog aplikacji

3. Ustawmy zmienną środowiskową na Heroku

W panelu Heroku, w zakładce Settings → Config Variables. Należy w niej ustawić zmienną:

NPM_CONFIG_PRODUCTION = false

Zmienna jest ustawiona po to, aby podczas procesu budowania projektu Heroku pobrało również zależności developerskie, które są potrzebne do zbudowania aplikacji do katalogu dist/.

Aplikacja jest gotowa do pierwszego release-u! 🏆

•

Etap 3 Deployment

Czas najwyższy, aby opublikować aplikację. Mamy kilka możliwości na deployment aplikacji. Dla mnie interesujące są 2 pierwsze:

Automatyczny deployment z brancha na GitHubie
Manualny deployment po wrzuceniu projektu do zdalnego repozytorium Git, trzymanego na Heroku.

Wybieram opcję numer 2 ponieważ pierwsza jest mniej elastyczna. Chciałbym coś wrzucić na Heroku, ale nie chciałbym publikować tych zmian na GitHuba.

1. Logujemy się do Heroku CLI

Copy + paste

heroku login

2. Łączymy repozytorium lokalne ze zdalnym na Heroku

Copy + paste

heroku git:remote -a NAZWA_PROJEKTU

3. Wypychamy zmiany na serwer 🚀

Wyślijmy nasze repozytorium na Heroku, aby zainicjować proces deploymentu:

Copy + paste

git push -f heroku master

Odśwież w przeglądarce wcześniej otworzoną stronę, aby zobaczyć:

Domyślny template aplikacji

•

🎊 Aplikacja opublikowana! 🎊

Więcej na temat deploymentu przeczytasz w pomocy.
Aby później deployować aplikację za pomocą jednego polecenia:

Copy + paste

npm run deploy

•

Jeśli znasz lepszy sposób na deployment napisz komentarz!

WebStorm: Jak być mistrzem wyszukiwania?

Piotr Kowalski — Mon, 06 Nov 2017 09:30:27 +0000

Od wielu lat korzystam z WebStorma. Nie jest to zwykły edytor, lecz IDE.

Ten kto nie wie jak jest różnica, to zapraszam tutaj.
Żaneta w przystępny sposób opisuje różnice.

Proces wyszukiwania

Coś dlaczego nie mogę w 100% przerzucić się na VIM-a jest możliwość przeszukiwania projektu pod kątem mojego wyrażenia (proces grep-owania).

Moją tajną bronią w programowaniu jest mechanizm “wyszukiwania”.
Opowiem o nim kiedyś.

W tym wpisie chciałem pokazać czego dzisiaj się nauczyłem, aby korzystanie z WebStorma było jeszcze bardziej efektywniejsze. Wykorzystajmy Find in Path!

`File mask` - wzorzec nazwy pliku

W polu wyszukiwarki wpisujemy frazę i już możemy skorzystać z możliwość przeszukiwania zawartości projektu pod katem danego ciągu znaków.

Panel wyszukiwania daje więcej możliwości. Jedną z nich jest File mask - czyli zawężenie przeszukiwania projektów do plików, których nazwa spełnia zdefiniowany wzorzec (nr 4 na poniższym screenshocie).

Panel wyszukiwania w WebStorm IDE.

Zadanie: Tylko pliki HTML

I tak jeśli chcielibyśmy szukać określonej frazy np. tylko w plikach HTML wystarczy, że w polu oznaczonym File mask wpiszemy:

*.html

Jak widać, nie jest to wyrażenie regularne.

Negacja

Jeśli nie chcemy szukać w plikach z np. testami to wpisujemy w File mask:

!*.spec.ts

Kilka warunków

Oczywiście możliwe jest łączenie wzorców (masek). Aby to wykonać, wystarczy oddzielić je przecinkiem:

!*.spec.ts,!*.module.ts

Źródło: jetbrains.com/help/idea/find-and-replace-in-path.html

Konferencja: FrontEnd Connect 2017

Piotr Kowalski — Sun, 24 Sep 2017 09:22:10 +0000

Dziś konferencja w miejscu, gdzie jeszcze nigdy nie byłem a mianowicie w Warszawskim Centrum EXPO XXI. To tutaj codziennie mają miejsce różnego rodzaju targi, koncerty itp. wydarzenia z dużą liczbą uczestników.

Aby dojechać do miejsca konferencji musiałbym wykorzystać wszystkie środki komunikacji miejskiej (sic!), stąd też zainwestowałem 20zł i pojechałem taxi! 🚕

Frekwencja

Na stronie konferencji można przeczytać:

v1.000 participants including over 30 world renowned speakers in the field of front-end development will meet at the heart of Warsaw, Poland for two days…

Niestety, ale więcej niż 300 osób to obie sale nie pomieściły. Ile to już razy organizatorzy konferencji się zawodzą i ogłaszają, że przyjdzie 2-3x więcej uczestników niż faktycznie przychodzi.

Miejsce

Budynek na starcie zrobił na mnie spore wrażenie. Strasznie duży z zewnątrz więc i w wewnątrz było sporo przestrzeni - przykładem niech będą najszersze schody (wewnątrz budynku) jakie w życiu widziałem (przepraszam, ale nie zrobiłem im zdjęcia) 😁

Powitanie

Na starcie zostałem powitany przez “zespół rejestracyjny”, który wiedział że przychodzę z ramienia WarsawJS. Cieszę się, że ludzie rozpoznają moją twarz. Oznacza to, że wydarzenia które organizuje są coraz bardziej popularne.

Po rejestracji, wśród stoisk sponsorskich spotkałem Ulę z którą zamieniłem kilka słów.

Ciekawostka! Wiecie, że firma Uli - Evojam - jest najnowszym sponsorem wydarzeń WarsawJS Workshop.

Moje bystre oko zauważyło na stoisku firmy Evojam słoiki. Zdziwiłem się dosyć, bo po co komu słoiki na konferencji? Małe słoiczki stojące na wydzielonym stoliku miały w sobie dżem. To chyba oczywiste, ale co to ma wspólnego z konferencją?

Przeczytajcie jeszcze raz nazwę firmy…

e w o d ż e m

Zagadka rozwiązana.

Prelekcje

Jak to zwykle bywa, na pierwszej prelekcji nie jestem obecny z powodu spóźnialstwa, które nagminnie uprawiam.

Czasami już tak jest, że się spóźnię, bo np. za późno wstanę, ale nie tym razem. Dzisiaj dzień zacząłem o 8:30. Umówiłem się z moim masażystą, aby naprostował mi kręgosłup, który cierpi na co dzień, kiedy pracuje się tak ciężko:

Źródło: http://www.habitbull.com/2014/11/04/these-three-mini-habits-will-make-your-day-infinitely-better/

Wracając do konferencji. Pierwsza prelekcja (zwana zwykle keynote-em - czyli prelekcją obfitującą w wiedzę, inspirującą oraz nakreślającą główną tematykę wydarzenia) została poprowadzona przez Lea Verou, która opowiadała o zmiennych w CSS.

Jak możecie się domyśleć przeczytałem to z agendy spotkania, wydrukowaną i przyklejoną na drzwiach do sal wykładowych.

Temat dosyć stary (2015), ale dopiero od niedawna przeglądarki zaimplementowały specyfikację. Jeśli chciałbyś poczytać więcej na temat zmiennych w CSS, zerknij do specyfikacji CSS Variables.

Druga prelekcja (@ Henri Bergius)

Flow-Based Programming for JavaScript

Zaczynajmy wreszcie omawiać prelekcje konkretniej!

Pierwszy talk (na której byłem obecny w 100%) był na temat podejścia flow-based w programowaniu.

Chyba popełniłem błąd, że wybrałem tego tracka… prelegent w bardzo nudny sposób opowiadał o tym podejściu w programowaniu.

W drugiej sali prelekcja była o TypeScripcie i nie wiem, czy nie lepiej było udać się do konkurencyjnej sali. No trudno.

Z trzeciej strony, znam TypeScript na tyle że ciężko by było zaskoczyć mnie czymś, dlatego nie wybrałem tamtej sali. Chciałem usłyszeć coś nowego.

No niestety, ani prelekcja, ani temat mnie nie zainteresował. Kilka linków od autora:

Przerwa!

Co ciekawe, po 2 prelekcjach odbyła się 30 minutowa przerwa. Bardzo ciekawe dlaczego organizatorzy zaplanowali tak długą przerwę na początku konferencji?

Zobaczymy co będzie się dalej działo po przerwie. Stay tuned!

Trzecia prelekcja (@ Kacper Sokołowski)

You use Content Security Policy, don’t you?

…na temat bezpieczeństwa! Uwielbiam ten temat.

Kacper (z CodeWise), znany prelegent warszawskich konferencji, opowiedział o atakach na strony internetowe. Zaczęło się od XSS.

Nie wiesz co to jest XSS? Zerknij tutaj albo tutaj.

•

Pytanie do czytelników?

Czy chcielibyście, abym zrobił na blogu kurs na temat XSS?

Poruszył bym takie tematy:

Jak zbadać podatność na ataki XSS?
Jak zabezpieczyć aplikację webową na ataki XSS?

•

Pierwsza aplikacja jaka padła ofiarą ataku, była zwykłym systemem blogowym. Prelegent podjął się ataku Session Hijacking poprzez Cookie Stealing. Oczywiście misja zakończyła się sukcesem.

Z prelekcji można było się sporo dowiedzieć na temat CSP.

Content Security Policy opiera się na nagłówkach HTTP. Kiedy tworzymy nowy projekt to warto zdefiniować listę adresów z których pliki JavaScript będę ściągane i uruchamiane. Warto zdefiniować także sposób ich wykonywania. Jedyny minus CSP jest taki, że jest on wspierany przez małą liczbę providerów “hostingowych”.

Kacper polecił stronę owasp.org, na której opisane są popularne błędy w webaplikacjach.

Czwarta prelekcja (@ Vitalii Bobrov Glenn Reyes)

Leveraging code-splitting in React apps

Na początku poszedłem na prelekcje Vitaliia na temat Angular CLI. Po kilku zdaniach zrozumiałem, że muszę zmienić track i pójść na drugi na którym Glenn opowiadał o Code Spliting w aplikacji opartej na React.js

CS to bardzo ważny feature w dzisiejszych aplikacjach. Wchodząc na dowolną stronę, nie trzeba pobierać i uruchamiać modułów / komponentów, które nie są na niej potrzebne.

Code Splinting:

ładuje kod asynchroniczne
ładuje kod na żądanie
ładuje kod kiedy potrzeba

Wskazówki od prelegenta:

zbudowanie bundli:
- 1 plik na biblioteki (vendor.js) - bardzo rzadko się zmienia (można cache-ować)
- 1 plik na źródła aplikacji (app.js) - bardzo często się zmienia
podział kodu “per route”
podział kodu “per component”

Źródła polecane przez Glenna:

Kolejna długa przerwa?

Pamiętacie Mary, która wygrała pierwszy konkurs uruchomiony na łamach tego bloga? Dla przypomnienia Mary wygrała bilet na konferencję JS Poland 2017, jednak podczas tamtej konferencji nie spotkaliśmy się oko w oko. Spotkaliśmy się za to podczas konferencji FrontEnd Connect 2017!

Tym razem przerwa trwała godzinę zegarową. Podczas niej na uczestników czekał smakowity lunch! Także i ja razem z Danielem - mentorem 10 edycji WarsawJS Workshop - zjedliśmy porcję kremu pomidorowego.

Mary - jeśli to czytasz - miło było przybić z Tobą piąteczkę!

Piąta prelekcja (@ Ferran Negre Pizarro)

Testing React & Redux applications with the new Jest: Snapshots come into play!

Ferran wygłosił prelekcję na temat testowania z wykorzystaniem narzędzia Jest oraz mechanizmu Snapshot Testing.

Szósta prelekcja (@ Simona Cotin & Artur Daschevici)

There and Back again - Angular and React

Kolejne wprowadzenie do Angulara i Reacta.

Nie mam dzisiaj ochoty słuchać o tym, jak zacząć nowy projekt w oparciu o te technologie. Człowiek tyle razy zaczynał projekt i tutaj nie ma jakiegoś “rocket science” - wchodzisz na pierwszy lepszy tutorial i kopiujesz polecenia. Tyle.

Podczas prelekcji było porównanie stworzenia tego samego komponentu w React-cie oraz Angularze. Prelegenci porównywali liczbę linijek i wyszło, że React potrzebuje więcej linijek, aby wygenerować komponent, więc jest lepszy.

Matko, co za bzdury… od kiedy to liczba linijek kodu developerskiego jest jakimkolwiek wyznacznikiem, że dana technologia jest lepsza albo gorsza?

Prelekcja była prowadzona przez dwie osoby, ale i tak całe przemówienie było według mnie dosyć nudne (chociaż Simona ładnie się uśmiechała) i mało wnoszące dla developera, który już posiada doświadczenie w dowolnych frameworkach (nawet niewielkie).

Prelegenci porównywali jak przetrzymywany jest stan w aplikacjach zbudowanych w oparciu o Angulara oraz Reacta (+Reduxa).

•

Czy tylko ja uważam, że taka prelekcja jest ZAWSZE na każdej konferencji? Czy w dzisiejszych czasach, kiedy te dwie technologie są na rynku już dość długo, potrzebujemy jeszcze prelekcji w stylu “jak zacząć”?

Dajcie znać w komentarzu, czy zgadzacie się ze mną, czy może posiadacie jednak inne zdanie w sprawie prelekcji dla początkujących.

•

Kolejny omówiony temat to przekazywanie danych pomiędzy komponentami.

Jak przekazać dane od “dziecka” do “rodzica”? A no dzięki następującym narzędziom MobX lub Redux. Mało tego! Dzięki ww. narzędziom możliwe jest przekazanie danych z dowolnego miejsca w aplikacji do innego. Wspaniałe!

Zatrzymaj się!

Drogi developerze Angulara, może lepiej wykorzystać @ngx-store do przekazywania danych między komponentami, zamiast “Outputować” i “Inputować”?

Siódma prelekcja (@ Andrey Okonetchnikov)

Modular CSS

Druga prelekcja na temat CSS. Tym razem poprowadzona przez autora Color Snapper - narzędzia do pobierania koloru z ekranu.

Według prelegenta:

W dzisiejszych czasach wszystkie elementy na stronie są pewnego rodzaju komponentami, które prezentują stan aplikacji. Tym samym można zapisać następujące równanie:

f(state) = UI

Następnie Andrey opowiedział o BEM-ie.

Znasz tą technologię? Jeśli nie, przeczytaj mój artykuł na ten temat.

Źródło: Reddit

Natura BEM-a powoduje, że praca z nim wymaga dużo czasu. Z pomocą przychodzą nam moduły! Technologia CSS Modules świetnie się sprawdza razem z BEMem.

JSS (cssinjs.org)

Niepotrzebny jest proces budowania aplikacji
Usuwa jest nieużywany kod
Automatycznie dodawane są prefixy do podmiotów zewnętrznych (bibliotek)

Generalnie warto przetestować w swoim projekcie!

Ósma prelekcja pierwszego dnia konferencji

Prelekcja poświęcona miękkim skillom, m.in. zaufaniu managera dla zespołu developerskiemu.

Scrum Daily Meeting: Jak powinno wyglądać? A jak jest u nas.

Dziewiąta (ostatnia pierwszego dnia) prelekcja (@ Ruth John)

How To Be a Web AV Artist

Podczas prelekcji Ruth pokazała jak za pomocą JavaScript stworzyć muzykę a co najciekawsze, jak pod tą muzykę stworzyć wizualizacje!

Dzięki udostępnieniu mikrofonu możemy w locie tworzyć bardzo ciekawe wizualizacje. Temat bardzo mi się spodobał, szczególnie ze względu na sposób poprowadzenia prelekcji. No i te piękne slajdy… Good job Ruth!

Na swoim profilu na Codepen, Ruth posiada ogromną ilość wizualizacji dźwięku. Polecam zerknąć!

Prace Ruth można także zobaczyć w organizacji livejs na GitHubie.

HEROES PARTY (@ Evojam) 🎊 🍻

Po prelekcjach organizatorzy zorganizowali imprezkę. Raczej to taki networking z lemoniadą, chipsami i karaoke. Obecny był także DJ oraz foto budka. Świetny pomysł!

•

Nie byłem obecny drugiego dnia konferencji więc nie wiem co się podczas tego dnia działo. Warto zerknąć na hashtag: #FrontendCon2017

•

Wskazówki dla organizatorów

…aby kolejna edycja konferencji była jeszcze lepsza!

1. Wolne działanie strony internetowej

I to nie jest jakieś moje widzi-misie, ale kilkadziesiąt sekund aż się strona załaduje spowoduje, że dowolny internauta tego nie zaakceptuje.

Podczas konferencji strona bardzo często zwracała następujący komunikat

HTTP Status 504

2. Wersja mobilna strony konferencji pozostawiała wiele do życzenia

Nie mogłem zobaczyć jak jest agenda spotkania! Na to będę mocno narzekał. Podczas konferencji uczestnicy muszą wiedzieć jaki jest plan. Od tego jest strona internetowa aby INFORMOWAŁA.

3. Niewykorzystana przestrzeń na identyfikatorze

Każdy przy rejestracji dostaje identyfikator, na którym jest nasze imię i nazwisko, oraz na odwrocie… agenda spotkania! Tak bardzo ważna informacja, której zabrakło.

Jeśli organizatorzy nie chcieli wrzucać agendy (nie wiadomo jakiego powodu) to chociaż mogli oddać to miejsca dla sponsorów. Wyobrażam sobie, że taki Gold Sponsor, mógłby wrzucić tutaj swoje logo, albo ogłoszenie o pracę. A tutaj “tabula rasa”. Smutne.

Za co chciałbym pochwalić tegoroczną edycję?

1. Uśmiech osób w rejestracji

Kiedyś mój kolega powiedział mi pewne zdanie, które ciągle pamiętam i powtarzam je sobie pod nosem. Nie przytoczę go tutaj dokładnie bo nie chcę używać wulgaryzmów w swojej publikacji, ale główny sens na pewno będzie dla Was jasny:

“Najważniejsze jest pierwsze wrażenie” Zdzisław Sondej (2009)

2. Panele dyskusyjne podczas przerw

Długie przerwy miały swój plus. Można było porozmawiać z prelegentami, którzy wyszli wcześniej na scenę ze swoją prelekcją, i zadać dowolne pytanie.

3. Stoliki technologiczne

Podczas konferencji na stolikach “barowych” stały tabliczki z nazwami technologi o których się rozmawiało. Można było porozmawiać o takich technologiach jak: React.js, HTML5, Angular, RxJS czy Vue.js które ściągnęło największą liczbę chętnych do rozmowy.

•

Podsumowanie

Serdecznie dziękuję organizatorom za zaproszenie ❤️

Cieszę się, że zobaczyłem kolejny raz jak zorganizowana jest konferencja. FrontEnd Connect 2017 ma trochę rzeczy na sumieniu, ale i tak warto było przyjść i posłuchać o nowościach w branży.

Do zobaczenia na kolejnej konferencji czyli NG Poland 2017 21 listopada.

Angular Warsaw #13 + Moja prelekcja

Piotr Kowalski — Wed, 30 Aug 2017 22:02:10 +0000

Dziś opowiem Wam trochę o moich doświadczeniach z Angularową sceną, czyli kilka słów o mojej ostatniej prelekcji podczas AngularJS Warsaw #13.

Nowe logo organizacji Angular Warsaw.

Zmiana nazwy organizacji

Pierwsze o czym należy wspomnieć (poza aktualizacją loga - zobacz poprzednie artykuły na temat Angularowych meetupów) to zmiana nazwy organizacji:

AngularJS Warsaw ➜ Angular Warsaw

Banner promujący wydarzenie. Źródło Meetup.com

Bycie prelegentem

To już drugi raz kiedy byłem prelegentem podczas tej serii meetupów. Co ciekawe pierwszy raz na Angularowej scenie zawitałem podczas 3-ej edycji AngularJS Warsaw, równo 2 lata temu, tj: 26-08-2015.

Bardzo dziękuję Darkowi, które mnie zaprosił do bycia speakerem podczas kolejnej edycji spotkania fanów Angulara.

Mogłem coś powiedzieć o Angularze jak i o bibliotece, która jest mocno wykorzystywana tj. RxJS. Kto jeszcze nie zna niech wpadnie tutaj.

Banner promujący wydarzenie. Źródło Twitter.com

Przygotowania

Do czasu jaki trzeba zawsze poświęcić przygotowując się do prelekcji chciałbym doliczyć czas jaki przygotowywałem się do szkolenia WarsawJS Workshop #9.

Na potrzeby szkolenia stworzyłem następujące projekty:

które bardzo pomogły mi podczas zrozumienia zasad panujących w bibliotece RxJS oraz generalnie w programowaniu reaktywnym.

Talk #1: TDD AngularJS application [PL] Wojtek Przechodzeń

Niestety nie wiem o czym Wojtek opowiadał, ponieważ na spotkanie przyszedłem delikatnie spóźniony i usłyszałem tylko brawa kończące prelekcję.

Wojciech przygotował 3 projekty, które pomogły mu przedstawić omawiany problem. Jeśli jesteś zainteresowany autorskim projektem, który jest wykorzystywany w Wojtka firmie do pisania testów w Angular.js to zerknij na następujące linki:

github.com/woprzech/angular-warsaw-angular-test-runner
github.com/woprzech/angular-test-runner-es6
github.com/Pragmatists/angular-test-runner - autorski projekt Wojtka i jego kolegów z pracy

Po prelekcji zrobiłem delikatny wywiad z uczestnikami, z którego wynikało, że prelekcja była bardzo interesująca. Tym samym z tego miejsca chciałem pogratulować wystąpienia 🏆

Slajdy: slideshare.net/WojciechPrzechodze/tdd-angularjs-application
Kontakt do prelegenta: @wprzechodzen

•

Talk #2: Angular pierwsze kroki [PL] Dariusz Kalbarczyk

Druga prelekcja spotkania - którą po prowadził organizator - była na temat zapoznania się z nowym światem Angulara w wersji 4.

Znakomita większość ludzi programuje jeszcze w Angular.js, jednak wiele z nich chciałoby się przesiąść na nową wersję (a raczej na nowy framework).

Podczas prelekcji mogliśmy się dowiedzieć co nowego pojawiło się w nowym Angularze.

Slajdy: issuu.com/dariuszkalbarczyk/docs/angularwarsaw13.pptx
Link do prelekcji: youtube.com/watch?v=RhrxDynq8hI
- Jak myślicie kto nagrywał i zmontował film?
Kontakt do prelegenta: @ngKalbarczyk

•

Talk #3: RxJS okiem doświadczonego inżyniera [PL] Piotr Kowalski

Moja pierwsza prelekcja podczas AngularJS Warsaw nie była nagrywana. A szkoda, bo pamiętam, że wielu ludziom się podobała. Tym razem przechytrzyłem system i nagrałem ją swoim aparatem.

Nie będę się dłużej rozpisywał (co by sztucznie nie przeciągać). Jeśli masz 20 kilka minut to zapraszam do oglądania “chachłackiej” prelekcji (albo nawet do wysłuchania, bo nie ma szczególnie na co patrzeć - lepiej otworzyć slajdy).

W przygotowaniach do prelekcji stworzyłem jeszcze jeden projekt, który to obrazuje najpopularniejszy problem z programowaniu sieciowym, tj. Race Condition - czyli tzw. wyścigi. Nie ma nic bardziej frustrującego jak niedeterministyczny problem - czyli taki, która raz się pojawia raz nie.

Zainteresowanych odsyłam do projektu na GitHubie.

Slajdy: piecioshka.github.io/slides-rxjs-look-behind/
Link do prelekcji: youtube.com/watch?v=HYuoB9qNqMI
Kontakt do prelegenta: @piecioshka

•

Sponsorzy spotkania

Podziękowania należą się sponsorowi, tj. firmie 7N, w której pracuje organizator spotkań - Dariusz. Firma szuka pracowników, więc jeśli szukasz pracy to uderz do nich.

•

Kolejna prelekcja jaką wygłoszę odbędzie się podczas 3 urodzin WarsawJS. Wydarzenie odbędzie się 13 września w restauracji “The Place” w Warsaw Spire.

Widziałeś kiedyś pliki *.swp? Kilka słów o plikach tymczasowych w Vimie

Piotr Kowalski — Wed, 16 Aug 2017 22:46:26 +0000

Jeśli nie jesteś użytkownikiem edytora Vim, to ten artykuł może nie być dla Ciebie. Jeśli jednak ciekawi Cię co chciałbym Ci dziś pokazać to zapraszam do niniejszego artykułu.

Vim

Nie będę w tym artykule rozpisywał się dlaczego jestem użytkownikiem tego edytora. Nie chcę też pisać o jego korzyściach (pomimo tego, że jest to pierwszy artykuł na jego temat).

Chcę Ci powiedzieć jak przyjemnie zaczęło mi się korzystać z edytora, kiedy ustawiłem w konfiguracji pewną opcję. Dzięki jednej linijce konfiguracji dałem sobie kolejny zastrzyk empatii dla tego edytora.

Przechodząc do sedna.

Jestem przekonany, że wiele razy wpadałeś w konsternację kiedy widziałeś / widziałaś (oczywiście nie piszę artykułów tylko do mężczyzn, jednak nie będę za każdym razem pisał obu form) sytuację podobną do tej:

Mnogość plików tymczasowych powala.

Po co są pliki `*.swp`?

Edytor Vim w domyślnej konfiguracji tworzy pliki kopii zapasowej w tym samym katalogu co plik źródłowy. Po to, aby móc przywrócić oryginalną wersję pliku, kiedy np. komputer się wyłączy (np. z powodu braku amunicji w baterii).

Z jednej strony jest to sympatyczne, bo wiesz gdzie jest taki plik z kopią. Jednak z drugiej strony widzisz “prawie”¹ zawsze zdublowaną strukturę plików, kiedy otworzysz np. kilka instancji edytora.

Jak sobie poradzić?

Możemy ustawić, aby edytor zapisywał pliki z backupami gdzieś indziej, np. w katalogu z konfiguracjami edytora - w katalogu domowym użytkownika tj. ~/.vim/swp/.

Wskazówka

Przed dodaniem magicznej linijki, zobacz co aktualnie kryje się pod zmienną directory wydając polecenie (w otworzonym edytorze):

set directory

# albo

echo &directory

Dla przykładu mój wynik:

directory=.,~/tmp,/var/tmp,/tmp

Jeśli chciałbyś dopisać katalog na początek listy to możesz to zrobić za pomocą polecenia:

set directory^=$HOME/.vim/swp/

# Poskutkuje to zmianą wartości w zmiennej "directory" na:
directory=$HOME/.vim/swp/,.,~/tmp,/var/tmp,/tmp

Aby dopisać na koniec listy, wykorzystaj operator +=, np.

set directory+=$HOME/.vim/swp/

# Poskutkuje to zmianą wartości w zmiennej "directory" na:
directory=.,~/tmp,/var/tmp,/tmp,$HOME/.vim/swp/

Druga opcja nie rozwiąże problemu. Edytor będzie sprawdzał, czy może zapisać pliki tymczasowe w kolejnych katalogach. Zacznie od ., czyli od katalogu w którym edytowany jest plik.

Czy mogę wyświetlić moje pliki tymczasowe?

Oczywiście. Uruchom narzędzie, które jest schowane pod przełącznikiem -r:

Copy + paste

vim -r

Polecenie przeszukuje katalogi (ustawione w zmiennej directory) oraz prezentuje stan plików o rozszerzeniu .swp.

Kiedy narzędzie nie znajdzie nic, zwróci coś w tym stylu:

Swap files found:
   In directory ~/.vim/swp/:
      -- none --
   In current directory:
      -- none --
   In directory ~/tmp:
      -- none --
   In directory /var/tmp:
      -- none --
   In directory /tmp:
      -- none --

Ups… mamy problem

W tej sytuacji w katalogu ~/.vim/swp/ edytor będzie tworzyły pliki z prefiksem kropki (.) oraz z rozszerzeniem .swp.

Gdy głębiej się zastanowisz, to sytuacja nie przewiduje pewnego przypadku.

Co jeśli będę chciał edytować dwa pliki index.html?
Czy utworzą się wtedy dwa pliki .index.html.swp?

Nie. No bo jakim cudem mogły by istnieć dwa pliki o tej samej nazwie w tym samym katalogu?

Naszym oczom ukaże się błąd w stylu:

E325: ATTENTION
Found a swap file by the name "~/.vim/swp/index.html.swp"
    ...

Edytor da nam możliwość przywrócenia poprzedniej wersji pliku - tej przed otworzeniem.

Więcej na temat błędu znajdziesz w pomocy :h e325.

Co teraz? Czy nie będę mógł edytować dwóch plików index.html?

Spokojnie. Wystarczy drobna poprawka i będzie śmigać.

Dodaj “slesza” (/) do Twojej ścieżki. Vim rozpozna, że chcesz by pliki tymczasowe posiadały w nazwie strukturę katalogów w której się znajdują. Tym samym unikniesz kolizji!

Poprawne ustawienie katalogu z plikami tymczasowymi:

set directory^=$HOME/.vim/swp//

Dodaj powyższą linijkę do pliku ~/.vimrc.

Przykład jak wyglądają pliki tymczasowe, kiedy otwarte są dwa pliki index.html. Problem solved!

Droga na skróty

Jeśli chcesz mieć święty spokój to najlepiej jest uruchomić Vima z opcją -n. Opcja ta powoduje, że plik tymczasowy nigdy nie zostanie stworzony przez uruchomioną instancję programu. Tym samym nigdy nie będziesz mieć możliwości przywrócenie stanu pliku do poprzedniego. Coś za coś.

Copy + paste

vim -n

Albo!

Podczas uruchomionego edytora możesz zmienić opcję updatecount na 0, co daje podobny efekt, tzn. nie są rejestrowane zmiany w pliku. Co ciekawe, już stworzony plik .swp nie zostanie usunięty.

set uc=0

Albo…

Możesz zastosować nową opcję w konfiguracji, aby nie tworzyć tego rodzaju plików tymczasowych. Dodaj następującą linijkę w pliku .vimrc:

set noswapfile

Teraz będziesz mieć święty spokój.

•

Podsumowanie

Aby wydzielić pliki *.swp do zewnętrznego katalogu:

1) Stwórz katalog na pliki tymczasowe:

Copy + paste

mkdir ~/.vim/swp/

2) Dopisz do pliku .vimrc:

set directory^=$HOME/.vim/swp//

Bibliografia

Wersja angielska artykułu dostępna jest tutaj: vi.stackexchange.com/a/179/13884

•

Dla przypomnienia: “prawie robi wielką różnicę”. ↩

Jak napisać testy end-to-end? Nightwatch.js & Chrome Headless?

Piotr Kowalski — Wed, 09 Aug 2017 06:02:12 +0000

Podczas tego weekendu poznałem Mateusza - testera oprogramowania, który chce się przebranżowić. Wiecie kim chce zostać? No nie uwierzycie. Chce zostać Front-end Developerem. To już kolejna osoba, której podoba się wytwarzanie oprogramowania klienckiego. Świetnie!

Bardzo się cieszę, że kolejna osoba się przebranżawia. Wymaga to od niej dużo odwagi, cierpliwości no i najważniejsze - samozaparcia.

•

Artykuł został zaktualizowany 🏆

•

Post skierowany jest do testerów oprogramowania, którzy znają składnię JavaScript.

Historia Mateusza

Mati opowiedział mi o swoim doświadczeniu z poprzedniej pracy, w której to był testerem aplikacji webowych. Nudziło go klikanie non stop w tą samą aplikację za każdym razem, kiedy developerzy chcą wypuścić nową wersję aplikacji. Nie dziwi mnie to.

W mojej pracy też mamy zespół testerów, którzy muszą mieć mega silną psychikę powtarzać te same czynności non stop. Panowie jeśli to czytacie to szacun oraz 🏆 dla każdego z Was.

Zastanawiam się, jak ja bym sobie poradził w takiej roli. Nie wiem, czy nie denerwowałbym się, ponieważ:

jeśli nie znajdę błędu bo np. nie przetestuje jakiegoś przypadku, bo na przykład mam zły dzień, albo nie mogę się skupić bo wczoraj był grill z kolegami
jeśli znajdę błąd to developerzy są na mnie źli, bo pokazałem im, że się gdzieś pomylili, a przecież ja wykonuję tylko swoją pracę i jeśli znajdę błąd to chyba dobrze, bo oznacza to, że gdy zostanie on poprawiony to aplikacja będzie stabilniejsza.

Tak źle i tak nie dobrze.

•

Jak przechytrzyć programistę?

Uwielbiam pisać testy. Nie ma znaczenia jakie. Jestem wychowany tak, że gdy mam napisany test to czuję pewność napisanej przeze mnie implementacji, bo przecież nieważne jak ją napiszę, jeśli testy świecą się ciągle na zielono.

Pytanie 1: Czy można napisać testy, które zastąpią manualne klikanie testera?

Śmiem twierdzić, że tak.

Pytanie 2: Czy mógłbym zdefiniować kroki scenariusza testowego gdzieś w aplikacji, aby uruchamiać te kroki za każdym razem, aby zbadać czy nie ma regresu?

Pewnie!

Jednak wcale nie potrzebujesz dostępu do projektu. Możesz takie testy trzymać na swoim komputerze (oczywiście najlepiej źródła wypchnąć do prywatnego repozytorium na GitHubie), dzięki czemu żaden developer nawet nie będzie wiedział o Twoim pomyśle.

Walka z Selenium (jeśli znasz, to pomiń ten akapit)

Każdy developer kiedyś słyszał o Selenium. Jest to dość skomplikowane narzędzie do ogarnięcia. Pisanie testów odbywa się z wykorzystywaniem składni zdefiniowanej w Selenium. Wg mnie jest to średni pomysł, ale jest na to sposób!

Nie wiesz co to jest Selenium?

Nie będę teraz tego wyjaśniał. Powstało sporo artykułów na ten temat.
Zobacz tutaj albo tutaj albo w Wikipedii.

Na ten moment chciałbym przedstawić Ci na obrazku jak cały mechanizm. Moim zdaniem jeden rysunek jest wart “tysiąc słów”.

Schemat działania Selenium.
Diagram stworzony z użyciem narzędzia: draw.io.

Straż nocna

Napiszemy testy end-to-end, które będę realizowały 2 scenariusze:

badanie czy po załadowaniu strony, zawiera ona pewien tekst,
czy strona prezentuje odpowiednią liczbę elementów w menu,

…oraz zrobimy screenshot testowanej strony internetowej, po to, aby móc np. pokazać developerowi jak wygląda błąd “zauważony przez testera”.

Yay

Piękna sprawa. Nie trzeba będzie powtarzać błędnego flow.
Narzędzie za nas zrobi zrzut ekranu.

Testy będziemy pisać korzystając z narzędzia Nightwatch.js.
Nie znasz? Strona domowa projektu dostępna jest tutaj.

•

Tylko dodam, że w narzędziu Nightwatch.js można pisać również testy jednostkowe. Więcej na ten temat dowiesz się z tego miejsca.

•

Krok po kroku 👣

Stworzyłem projekt na GitHubie, który posiada gotową (opisywaną w tym artykule) konfigurację Nightwatch.js (Selenium) + Chrome Headless.

1) Stworzenie pustego katalog (na projektu).

To chyba jasne i nie muszę tego pisać, jednak napiszę, aby rozwiać wszelkie wątpliwości.

2) Stworzenie pliku package.json

Masz dwie opcje aby posiadać taki plik:

manualna - ręcznie tworzysz taki plik i wpisuje odpowiednie pola
albo generujesz plik za pomocą polecenia npm init.

Ze swojej strony polecam drugą opcję. Jest szybsza.

3) Instalacja narzędzi

Copy + paste

npm install nightwatch selenium-standalone

Ważne aby, te dwie zależności znalazły się pliku package.json. Tym samym dasz możliwość uruchomienia przez innego testera Twojego projektu z testami, (albo nawet przez programistę).

4) Dodanie odpowiednich zadań do package.json

Proponuję dodać 2 następujące zadania:

{
    "scripts": {
        "selenium:start": "selenium-standalone install && selenium-standalone start",
        "test:e2e": "nightwatch"
    }
}

Pierwsze skonfiguruje i uruchomi serwer Selenium. Drugie natomiast uruchomi skrypty testujące napisane w JavaScript korzystające z API biblioteki Nightwatch.js.

5) Konfiguracja narzędzia Nightwatch.js

Testowanie tak samo jak aplikacja, może być bardzo skomplikowane, stąd też należy wykorzystać plik konfiguracyjny, gdzie zdefiniujemy jak ma działać narzędzie do uruchamiania testów end-to-end (Nightwatch.js).

Przedstawiam podstawową konfigurację, jaka powinna się znaleźć w pliku nightwatch.json - w katalogu głównym projektu. Nie będę opisywał pól, tylko zapraszam do dokumentacji.

{
    "src_folders": [
        "test/e2e/"
    ],

    "output_folder": "reports",

    "test_settings": {
        "default": {
            "silent": true,

            "desiredCapabilities": {
                "browserName": "chrome",
                "chromeOptions": {
                    "args": [
                        "--headless"
                    ],
                    "binary": "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary"
                }
            }
        }
    }
}

Pod klucze binary znajduje się ścieżka do programu, który ma być uruchamiany na potrzeby weryfikacji scenariuszy. Na systemach Windows, należy wkleić ścieżkę zmieniając backslashe (domyślna forma rozdzielenia katalogów) na slashe.

Na uwagę zasługuje wykorzystanie argumentu "--headless", z którym będzie uruchamiana przeglądarka Google Chrome Canary.

Headless to nowy feature w tej przeglądarce, który pozwala na uruchomienie przeglądarki bez GUI. Zainteresowany jak działa ten feature? Przeczytaj tutaj.

Na stronie opisujące ten feature jest ostrzeżenie (w języku angielskim):

Caution: Headless mode is available on Mac and Linux in Chrome 59.
Windows support is coming in Chrome 60.
To check what version of Chrome you have, open chrome://version.

W skrócie, testy polegające na otwieraniu strony i analizowaniu jej treści mogą przebiegać bez otworzenia przeglądarki. Jaki jest tego plus? Ja widzę jeden podstawowy - wydajność, tj. skrócenie czasu potrzebnego na uruchomienie testów.

A co powiesz na temat PhantomJS?

Wykorzystanie Headless to nie jedyny sposób, aby uruchomić takie testy. Można wykorzystać narzędzie PhantomJS. Nie polecam jednak tego narzędzia z uwagi na to, że wykorzystuje ono stary silnik Chrome-a do renderowanie - Webkit, gdzie Headless korzysta z najnowszego - Blink.

6) Pierwszy test: Czy strona posiada tekst?

Testy musisz zdefiniować w pliku stworzonym w katalogu z definiowanym w konfiguracji pod kluczem src_folders.

I tak na przykład stwórz plik: test.example.js, który będzie wykorzystywał składnię CommonJS, aby wyeksportować obiekt jako moduł.

const TARGET_PAGE_URL = 'https://piecioshka.pl/blog/';

module.exports = {
    'Is header contains correct text?': (browser) => {
        browser.url(TARGET_PAGE_URL);
        browser.waitForElementVisible('body', 3000);
        browser.assert.containsText('h2', 'Piotr Kowalski');
        browser.end();
    }
};

Co tutaj się dzieje? Generalnie każda para klucz-wartość to pewien scenariusz. Jego nazwa zapisana jest w kluczu, a kroku w definicji funkcji.

Pełne API, czyli definicja akcji, które możesz zrobić na stronie dostępna jest tutaj.

Wskazówki, na temat jak pisać poprawnie testy end-to-end są opisane na stronie projektu. Link do przewodnika jest tutaj.

7) Drugi test: Czy strona zawiera odpowiednią ilość elementów?

// ...
module.exports = {
    // ...
    'Is main part of app contains proper number of elements?': (browser) => {
        browser.url(TARGET_PAGE_URL);
        browser.waitForElementVisible('body', 3000);
        browser.elements('css selector', '#menu li', (result) => {
            if (result.value.length !== 4) {
                browser.assert.fail('Number of elements is not correct');
            }
        });
        browser.end();
    }
}

8) Trzecia opcja: Zrzut ekranu

// ...
module.exports = {
    // ...
    'Capture screenshot to see manually that page looks correct': (browser) => {
        browser.url(TARGET_PAGE_URL);
        browser.waitForElementVisible('body', 1000);
        let filename = './screenshots/screenshot-' + new Date().toISOString() + '.png';
        browser.saveScreenshot(filename);
        browser.end();
    }
};

9) Uruchomienie testów end-to-end, które właśnie napisaliśmy

Teraz wystarczy, że otworzysz 2 okna terminala:

w jednym uruchomisz serwer Selenium, za pomocą polecenia npm run selenium:start
w drugim oknie uruchomisz Nightwatch.js, aby uruchomić napisane testy, za pomocą polecenia: npm run test:e2e

Java

Selenium wymaga zainstalowanego środowiska do uruchomiania programów napisanych w języku Java. Środowisko to nazywa się JRE - Java Runtime Environment.
Pobierz najnowszą wersję z http://java.com/

Poniżej przedstawiam Ci jak wygląda drugi terminal w którym uruchamiam testy:

Serwera nie ma co pokazywać. Tam się dzieje magia, na którą nie wolno patrzeć.

Pytania

Pozwolisz, że zadam Ci teraz kilka pytań. Swoje odpowiedzi umieść proszę w komentarzu:

Jak Ci się podoba takie podejście do testowania?
Czy jako tester pokazałabyś programiście kod, który testuje jego aplikację, czy jednak wolałbyś zostawić go dla siebie, aby developer nie miał wpływu na definicję scenariuszy?
Czy przetestowałeś, jak Nightwatch.js oraz Chrome Headless sprawują się w projekcie, który jest wykorzystywany w Twojej pracy?
Czy takie testy powinny być tworzone przez programistów, czy raczej przez testerów oprogramowania?

Będę wdzięczny za odpowiedzi.
Pamiętaj, że komentarze są po to, aby prowadzić w nich dyskusje.

PS Mateusz, mam nadzieję, że pomogłem. Piona!

WarsawJS Meetup #34

Piotr Kowalski — Wed, 12 Jul 2017 08:54:28 +0000

Już 34. spotkanie warszawskich programistów JavaScript. Cieszę się, że takie wydarzenia cieszą się dużą popularnością. Sala zawsze jest pełna. To cieszy i napawa optymizmem.

Całe wydarzenie jest darmowe. Pozbawione jest wcześniejszej rejestracji. Po prostu przychodzisz i słuchasz, a po prelekcjach “networkingujesz”.

Invitation

Kolejna zapowiedź “na sportowo”. Zwykle w poniedziałki gramy w nogę na pobliskim (blisko szklanego wieżowca - Blue Point - w którym pracuję) boisku. Nie jest to poziom profesjonalny… hmm amatorski to chyba też nie jest. Po prostu kopiemy pomalutku w piłę.

Na filmie wystąpił jeden z moich kolegów z pracy - Marek, z którym bardzo często rozgrywamy mecze. Zwykle to jest tak jak w pierwszych minutach filmu - kopiemy na pustą bramkę a i tak często nie wpada!

Chciałbyś popykać w piłę. Napisz do mnie. Ustawimy się na jakiś sparing na Pradze.

•

Talk #1: Need for Speed - optimizing React [PL] Kamil Grabek

Kamil - doświadczony developer, fanatyk performance-u. Wygłosił prelekcję na temat optymalizacja aplikacji React-owej.

Siła Reacta nie leży po stronie budowania UI. Leży po stronie jego aktualizacji.

Kilka wskazówek optymalizacyjnych

1. Komponenty

Tworzenie komponentów, które renderują treść w pętli. Przy każdej iteracji zostanie wykonane sprawdzenie, czy faktycznie powinien się przerenderować. Jeśli jego właściwości nie uległy zmianie, to nie zostanie on przerenderowany, oszczędzając tym samym zasoby.
2. Immutability

Dane w trybie read-only pozwalają na szybsze porównywanie. Pożyteczna paczka (w npm): immutable-helper
3. Memoizacja

Oszczędność wykonywania tych samych operacji. Zapamiętywany jest wynik operacji. Pożyteczna paczka (w npm): moize
4. Produkcja

Wersja produkcyjna pozbawiona jest kilku sprawdzeń, oszczędzając zasoby.
5. Pure functions

Funkcje, które nie modyfikują stanu, tylko zwracają nowy.
6. Alternatywy

Przykładowa alternatywa: preact. Podczas budowania aplikacji produkcyjnej można podmienić główną bibliotekę (React.js) na lżejszą.

🏆 Złota myśl

Pamiętaj, że nie wykonuj optymalizacji za wcześniej.
Na początku budowania aplikacji nie ma co optymalizować.

Link do prelekcji: youtube.com/watch?v=6Onxb4gij0s
Kontakt do prelegenta: LinkedIn

•

Talk #2: Trening na redukcję: jak spalić kilobajty? [PL] Paweł Kondraciuk

Druga prelekcja o wydajności. Cóż za performance-owy meetup! Lubię takie. Sam jestem fanem optymalizacji.

Wiecie, że Google nie lubi wolnych aplikacji? Na potwierdzenie artykuł.

1. Pozbycie się Dead Code

Wykorzystanie narzędzia: closure-compiler
2. Wielkości plików

Weryfikacja, które pliki są wykorzystywane w projekcie:
- analyze
- source-map-explorer
Wydzielenie vendorów do osobnego pliku, aby go móc skeszować.
Wykorzystana narzędzie: CommonsChunkPlugin.
3. Tree Shaking + Minifikacja

Tree shaking usuwana z eksportowania nieużywane funkcje. Minifikacja usuwa kod, który nie jest używany.
4. JIT vs AOT

JIT - Just In Time compilation
- kompilacja szablonów w locie
- wolne bootstrap aplikacji, jednak szybsze budowanie, jakże pomocne w devloperce
AOT - Ahead Of Time compilation
- wycięty @angular/compiler - duża redukcja wielkości pliku vendors.js
- szablony są już skompilowane
- błędy w szablonie są wykryte na tym poziomie
- większe bezpieczeństwo - brak ewaluacji kodu
- włączenie tree shaking pozwala wyciąć nieużywane dyrektywy np. ngIf
5. Lazy loading

Dołączanie wykorzystywanych modułów w sposób leniwy. Bardzo szybki czas prezentacji pierwszej strony Istnieją 2 strategie:
- pobieranie chunków dopiero wtedy kiedy faktycznie powinny być używane
- pobieranie wszystkich chunków od razu, ale po wyświetleniu pierwszej strony
6. Kompresja GZIP

Optymalizacja plików CSS np. bootstrap.css na poziomie 84%.

Pierwotnie aplikacja ważyła 4 MB. Po realizacji wyżej wymienionych zabiegów wielkość plików ściąganych przez przeglądarkę zmalała do 140 KB.

Link do prelekcji: youtube.com/watch?v=KSOVxW0lz7c
Kontakt do prelegenta: @pawelkondraciuk

•

Talk #3: Dlaczego Twój administrator Cię nienawidzi? [PL] Maciej Maciejewski

Miękka prezentacja. Czasami i takie są potrzebne, bo przecież sami developerzy nie wystarczą, aby zbudować projekt. Równie ważni są także devopsi / admini.

Administrator też chce dobrze dla projektu. Tylko patrzy na niego z innej strony.

Jeśli jesteś programistą, to jesteś użytkownikiem zaawansowanym.

Kilka wskazówek podczas współpracy

trzeba być konkretny w komunikacji z administratorami, nie można powiedzieć “strona nie działa”
nie można być gamoniem 😄 bo zostanie się zaszufladkowanym
nie prosić o deploy w piątek, generuje to duży kłopot jeśli deploy się nie powiedzie
trzeba znać podstawy działania internetu oraz protokół HTTP
podstawowe kody odpowiedzi HTTP powinny być w głowach programistów, albo chociaż odróżniać 400-setki od 500-setek
developerzy powinni znać stack projektu w którym biorą udział
nie hardkodować w kodzie adresów IP, co jeśli takie adres się zmieni w tzw. międzyczasie?
napisać prostą dokumentację w README.md zawierającą wymagania projektu
nie testuj sam swojego kodu!
pisz testy jednostkowe oraz integracyjne, podniosą one komfort pracy z aplikacją
nazywaj commit message-e dokładnie, np. "poprawa nawigacji" niewiele mówi

Zakazy dla developera

nie dostaniesz root-a na produkcji
nie będzie wdrożeń małych zmian - wszystko musi przejść odpowiednią procedurę na wypadek gdyby mała zmiana rozwaliła system
nie będziesz zmieniał konfiguracji serwerów - administratorzy potrafią to zwykle zrobić lepiej

Najważniejsza zasada

Nie używaj zwrotu: “u mnie działa”. Wypowiedzenie tego przy adminach spowoduje tylko niepotrzebne przypływ adrenaliny.

Wszelkie problemy z wydajnością można rozwiązać wspólnie.

Hint odnośnie skalowania aplikacji

Łatwiej jest postawić 500 kopii tego samego kodu, niż sprawić, aby jedna kopia działała 500 razy szybciej.

Ale dlaczego się nie da?

Nie zawsze administrator może coś zrobić. Stoi za nim kilka argumentów:

stack technologicznych zdefiniowany w umowach
istnieją problemy licencyjne
wymogi bezpieczeństwa

Administratorzy i developerzy mają ten sam cel. Widzą go natomiast z innych perspektyw. Jeśli admini ufają programistom to dużo łatwiej i szybciej uda się zrealizować cele.

Dla przypomnienia

Pracujemy w eksperckich zawodach, nie musimy więc się na siebie obrażać.

Link do prelekcji: youtube.com/watch?v=BSp6Bzz5Ndc
Kontakt do prelegenta: Facebook

•

Panel dyskusyjny

Podczas panelu dyskusyjnego poruszone zostały 3 pytania:

Nowa składnia: Czy jest warta uwagi? Jaki jest najlepszy feature?
Asynchronous JavaScript: Jak sobie z nim poradzić?
Node.js: Dla kogo? Po co? Jak?

A na pytania odpowiadali:

•

Sponsorzy spotkania

•

Podsumowanie

Świetny meetup. Lubię wykłady o optymalizacji, a tym bardziej jeśli dotyczą one stacka którego używamy na co dzień (Angular 4). Prelekcja Maćka również świetna. Przypomniała mi trochę stare czasy, kiedy to ja byłem tym raczkującym developerem i czułem się jak dziecko we mgle.

Do zobaczenia w kolejnej relacji ze spotkania!
Tym razem z dzisiejszego wydarzenia - WarsawJS Meetup #35

Konferencja: JS Poland 2017. Kilka słów o tym, jak na takie wydarzenia patrzą inni organizatorzy

Piotr Kowalski — Wed, 28 Jun 2017 09:07:37 +0000

Kilka dni temu byłem na kolejnej konferencji. Tym razem byłem uczestnikiem na pierwszej edycji JS Poland. W kolejnych akapitach przybliżę Ci, jak na takie wydarzenia patrzy kilkuletni organizator meetupów i workshopów.

Bonusowe bilety

Kilka miesięcy temu ogłaszałem na blogu konkurs, gdzie do wygrania był bilet na omawianą konferencję. Należało napisać post na Facebook-u albo Twitterze z hashtagiem #piecioshkablog i zebrać jak największą liczbę lajków.

Konkurs wygrała Mary, która potwierdziła swój udział w konferencji w social mediach. Niestety nie spotkaliśmy się podczas wydarzenia.

Oficjalne logo konferencji JS Poland 2017

Organizacja WarsawJS również miała do rozdania bilety. Otrzymało je 3 chłopaków, którzy wyróżnili się swoją aktywnością:

Społeczność WarsawJS na konferencji JS Poland 2017

Prelekcje

Byłem obecny na połowie prelekcji i z tego miejsca polecam następujące:

Christian Heilmann: “Progressive Web Apps” - Wideo z prelekcji dostępne na kanale JS Poland na YouTube.

Tomasz Ducin: “Async Functions Awaiting You”

Tomasz - jeden z najpopularniejszych prelegentów na WarsawJS Meetup - podczas swojej prelekcji opowiadał o tym dlaczego async/await weszły do języka.

tl;dr: taka kolej rzeczy, kiedy ma się już generatory w specyfikacji
Luca Mezzalira: “Functional Reactive Programming with Cycle.js”

Prelegent przedstawił sposób na reaktywne programowanie z użyciem biblioteki Cycle.js.

Czas spróbować takiego stylu pisania!
Nir Kaufman: “Demystified Angular Directives”

Gabor Wnuk: “React Native - Success case study”

Developer z Wirtualnej Polski, opowiadał o plusach aplikacji opartej na React Native w której brał czynny udział developerski.
Shmuela Jacobs: “Angular is on Fire(base)!”

Świetna prelegentka. Shmuela świetnie rozbawiała uczestników swoją naturą opowiadając o Firebase. Oby więcej takich uśmiechniętych speakerów!

Była to jedyna prelekcja, na której ciągle się uśmiechałem!
Phil Nash: “JWT, WTF?”

Świetna prelekcja wygłoszona przez świetnego speakera. Phil omawiał temat bezpiecznej wymiany tokenów, czyli jak działa JSON Web Tokens.

Nowe znajomości

Jednym z wielu plusów uczestnictwa w konferencjach jest możliwość poznania wielu osób. Tym razem razem z Piotrkiem zapoznaliśmy się z Lucą Mezzalira - organizatorem społeczności LondonJS. Organizacja ta posiada ponad 5k członków na Meetupie. Jest to ponad 2x więcej niż społeczność WarsawJS. Mamy do czego dążyć!

Congratulations! 🏆

Luca wiem, że i tak tego nie przeczytasz, ale może jeśli, to chciałem Ci powiedzieć, że robisz FANTASTYCZNĄ robotę. Szacunek dla Ciebie!

Plusy

Jesteś ciekaw mojej opinii na temat konferencji? Proszę bardzo. Zacznijmy od plusów. Kolejność nie ma większego znaczenia.

Strona internetowa wydarzenia: js-poland.pl

Podczas wydarzenia ludzie szukają informacji na stronie wydarzenia, dlatego ważne jest umieszczenie tam wszystkich danych jakie mogę przydać się uczestnikom konferencji.
- Nowoczesny design.
- Podział na ważne sekcje, takie jak agenda czy lokalizacja.
Responsywność strony internetowej to już standard.

Jeśli jakaś strona niekorzystnie wygląda na urządzeniu mobilnym, to tracimy do niej zaufanie.

Sprawdź jak wygląda ten blog na urządzeniu mobilnym!
Jedna ścieżka z prelekcjami

Taki styl przeprowadzenia konferencji nie generuje problemów. Nie istnieje sytuacja, że w tym samym czasie odbywają się interesujące nas prelekcje.
Konkurs z nagrodami

Bardzo dobrym pomysłem było zorganizowanie konkursu z nagrodami. Zawsze takie inicjatywy pobudzają społeczność do tworzenia nowej treści w social mediach, która służy… popularyzacji wydarzenia!

Tym samym można powiedzieć, że organizatorzy mają darmową reklamę 😄

Tylko dlaczego nie było internetu??? Ale o tym za chwilę w minusach.
Prelegenci

Podstawowym celem udziału w konferencji jest wysłuchanie co mają do powiedzenia jej prelegenci. Podczas JS Poland prelegenci byli z - dobrej - górnej półki.

Taka śmietanka jak Heilmann czy Kaufman przyciągają uczestników.
Dobór miejsca adekwatnie do frekwencji

Często się zdarza, że jestem świadkiem problemu z “pomieszczeniem” uczestników konferencji. Organizatorzy źle wykalkulowali i sala wykładowa albo jest za mała (Code Europe 2017) albo za duża (Frontend Union 2016) i ludzie siedzieli na sali w połowie pustej co daje wrażenie, że wiele osób nie przyjechało.

Uczestnicy konferencji JS Poland 2017

Na sali nie było dużo wolnej przestrzeni, aż do samego końca wydarzenia. Z moich źródeł wiem, że frekwencja wynosiła lekko ponad 200 osób.
Pomocna rejestracja

Pierwsze osoby z którymi mamy kontakt na konferencji to ludzie z rejestracji. Dlatego ważne jest - od strony organizatora - dobre przywitanie gości. Stąd też uśmiech na starcie to ważna rzecz.

Szybka rejestracja, gdzie otrzymałem jakieś gadżety już daje +10 w odbiorze konferencji.
Certyfikaty obecności

Jak już jesteśmy przy gadżetach, to każdy z uczestników, otrzymał certyfikat obecności w wydarzeniu. Miły to gest. Można sobie powiesić nad łóżkiem albo za zanieść do pracy i powiesić na ścianie wall of fame

Źródło: Wikipedia
Gadgety Sponsorskie

Kończąc temat gażdetów trzeba jeszcze spojrzeć w kierunku sponsorów. To de facto dzięki nim takie wydarzenie jest w stanie się odbyć. Firmy płacą kupę kasy, aby zostać patronami wydarzenia. Dla nich jest to idealny moment za rekrutację przy swoim wystawionym “straganie”.

Podczas tej konferencji można było dostać od sponsorów:
- zasłonki do kamery w laptopie
- futerał na komputer
- książkę Angular.js autorstwa Arka Kalbarczyka oraz Darka Kalbarczyka, którą serdecznie polecam jeśli zaczynasz swoją przygodę z tym frameworkiem.
- .. i wiele innych, których nie ma sensu wymieniać.
Chciałem tylko podkreślić fakt, że sponsorzy mają często ciekawe pomysły jak zwabić do siebie pracownika.
Prowadzący

Konferencja odbywająca się w Złotych Tarasach w sali kinowej musiała być obrandowana jakimś filmem! Kilka tygodni temu do kin wszedł nowy film “Piraci z Karaibów”, stąd też całą konferencję poprowadził JACK SPARROW!

Prowadzący był przebrany w kostium, po to, aby upodobnić się do Jacka Sparrowa z filmu Piraci z Karaibów

Oczywiście, nie był to odtwórca roli kapitana Sparrowa, tylko Przemek nasz rodowity polak, który przebrał się i w mega zabawny sposób zapowiadał kolejne prelekcje.
Projekcja filmu

Po wygłoszeniu wszystkich prelekcji uczestnicy konferencji mogli uczestniczyć w darmowym seansie filmowym. Wyświetlany był film: “Piraci z Karaibów: Zemsta Salazara”.

Takie są plusy organizowania wydarzeń w kinie.

Minusy

Aby nie było tak kolorowo, to przedstawię teraz problemy jakie zauważyłem podczas wydarzenia. Niestety nie była to idealna konferencja.

Brak internetu w głównej sali

Największy minus, to zdecydowanie brak internetu dla uczestników. My ludzie internetu, nie potrafimy egzystować bez niego.

Organizatorzy zorganizowali konkurs, który polegał na uploadzie zdjęć w social mediach z hashtagiem #jspolandconf.

Kiepsko wysyła się zdjęcie, kiedy iPhone ma problem z zasięgiem GSM oraz nie jest podłączony do żadnego Wi-Fi.

Ciekaw jestem, jak sobie radzili uczestnicy Androidów? Czy Wy też mieliście problem z zasięgiem?
Miejsce

Samo miejsce nie sprzyjało konferencji. Człowiek czuł się jak na filmie. Podczas konferencji kręcili się ludzie, którzy nie byli zainteresowani konferencją, tylko filmami.

Sala kinowa może i jest dobrym miejscem na organizację takiego wydarzenia, jednak nie w multipleksie.
Lunch

Jeden stół z jedzeniem dla tak dużej konferencji to zdecydowanie za mało. Na szczęście w galerii jest całe piętro z jedzeniem.

Tym samym jakiś tajski posiłek wylądował na moim talerzu, za którego zapłaciłem ze swojego portfela.

Ewidentnie organizatorzy nie przemyśleli tego tematu.
Powtarzające się prelekcje na przykładzie Firebase

Rozumiem, że firma Google była sponsorem imprezy, ale 2 prelekcje o tym, jak świetny jest Firebase to przesada. Rozumiem reklamę swojego produktu, ale zbyt duży marketing szkodzi.
Jeden dzień prelekcji to za krótko (subiektywnie)

Zwykle konferencje trwają 2-3 dni. Wiele osób nie mogło punktualnie uczestniczyć w wydarzeniu. Gdy był tylko jeden dzień na wysłuchanie prelekcji, a akurat podczas tego dnia przychodzi ekipa wymieniająca licznik prąd to jest delikatne smutno.

Nie jestem przekonany do jednodniowych konferencji. Z drugiej strony, wolę jednodniową konferencję, niż jej brak.

Konkurs

Na zakończenie konferencji wylosowane były osoby, które wygrały upominki za najlepsze tweety. Wiecie kto wybierał zwycięzców? Organizatorzy WarsawJS!

Podsumowanie

Jestem bardzo zadowolony, że takie wydarzenie miało miejsce.

Zawsze będę czerpał radość z konferencji - lubię w nich brać udział. Nie wiem, czy dałbym radę być odpowiedzialny za organizację takiego przedsięwzięcia, ze względu na ogrom pracy jak trzeba wykonać przed wydarzeniem. O tym najwięcej może powiedzieć Zaiste, który ponad 10 lat organizuje konferencje.

Cieszę się, że frekwencja była tak duża. Nie była większa niż na ngPoland 2016, ale obecność ok. 200 osób motywuje do bycia jeszcze lepszym!

Podziękowanie

Z tego miejsca chciałem podziękować Darkowi Kalbarczykowi - organizatorowi konferencji, za:

możliwość wzięcia udziału
pomysł konferencji oraz jej sprawne przeprowadzenie
podarowanie kilku biletów dla:
- organizatorów WarsawJS
- społeczności WarsawJS
- czytelnika mojego bloga
oraz za możliwość wybrania zwycięzców konkursu!

Darek, wielkie kudos dla Ciebie!

Inne artykuły o konferencji

Piotr Lewandowski - 7 minutowe streszczenie prelekcji w języku angielskim.

Jak zbudować licznik czasu?

Piotr Kowalski — Mon, 12 Jun 2017 21:54:51 +0000

Dziś kolejny post z serii “Kodowanie na ekranie”. Na warsztat wrzucamy stworzenie zegarka odmierzającego czas!

Taki licznik pomaga mi podczas panelu dyskusyjnego, który prowadzę podczas każdej edycji WarsawJS Meetup. Jeśli chciałbyś np. odmierzać czas ugotowania jajka, to taki widget na pewno Ci się przyda.

Krok po kroku 👣

A teraz przedstawię w kilku krokach jak zrobić taki prosty widget:

Krok 1. Fundament

Dodam plik ze skryptem (main.js) oraz plik (main.css) odpowiedzialny za wygląd. W markupie stworzę kontener h1, który będzie prezentował czas zegarka.

<script src="main.js"></script>
<link rel="stylesheet" href="main.css"/>
<h1></h1>

Krok 2. Uruchomienie pierwszego skryptu

W pliku main.js stworzyłem funkcję, która uruchomi kod, dopiero po załadowaniu strony. Funkcja będzie wrzucała do wcześniej stworzonego znacznika h1 przypadkowy tekst.

function setup() {
    let $clock = document.querySelector('h1');
    $clock.textContent = '12312';
}

window.addEventListener('DOMContentLoaded', setup);

Krok 3. Stworzenie klasy w JavaScript

W dziedzinie problemu jest rzeczownik “zegarek”. Warto stworzyć taką klasę, aby nadawać jej zachowania i przechowywać stan.

class Clock {
    constructor() {
        this.$clock = document.querySelector('h1');
    }

    render(string) {
        this.$clock.textContent = string;
    }
}

function setup() {
    let clock1 = new Clock();
    clock1.render("przykładowy tekst");
}

Krok 4. Stworzenie funkcji, która uruchomi odliczanie zegarka

Każdy proces ma swój początek. W naszym przypadku, odliczanie musiało się kiedyś zacząć. Z tego powodu dobrze jest mieć jedną funkcję, która wszystko rozpoczyna - funkcja start().

class Clock {
    // ...

    start() {
        this.render("przykładowy tekst");
    }
}

function setup() {
    let clock1 = new Clock();
    clock1.start()
}

Krok 5. Parsowanie czasu

Stworzyłem funkcję parseSeconds(), która będzie przyjmować czas w stylu "10:00", a zwracać liczbę milisekund.

Dlaczego funkcja jest statyczna? Ponieważ nie wymaga ona instancji klasy (nie ma w niej odwołania do this).

Ciekawym aspektem jest konwersja tablicy stringów na tablicę liczb. Wykorzystałem do tego funkcję map() oraz konstruktor Number.

W stałej ONE_SECOND jest liczba milisekund w sekundzie. Przydaje się ona we operacjach matematycznych.

const ONE_SECOND = 1000;

class Clock {
    constructor() {
        this.limitTime = null;
    }

    // ...

    start(formattedTime) {
        this.limitTime = Clock.parseSeconds(formattedTime);
        console.log(formattedTime);
    }

    static parseSeconds(time) {
        let [minutes, seconds] = time.split(':').map(Number);
        return minutes * 60 * ONE_SECOND + seconds * ONE_SECOND;
    }
}

function setup() {
    let clock1 = new Clock();
    clock1.start('10:00');
}

Krok 6. Renderowanie czasu

Podstawowym zadaniem jest wyświetlanie czasu, który zbudowany jest na podstawie zdefiniowanego na starcie limitu oraz czasu, który rośnie co sekundę.

Wykorzystując te 2 stany mamy możliwość stworzenie rożnicy (ang. diff), dzięki czemu uzyskamy efekt, że czas się odlicza do zera.

const ONE_SECOND = 1000;

class Clock {
    constructor() {
        // ...
        this.currentTime = 0;
    }

    // ...

    start(formattedTime) {
        this.limitTime = Clock.parseSeconds(formattedTime);
        let diff = this.limitTime - this.currentTime;
        this.render(diff);
    }
}

Krok 7. Wykorzystanie interwału

Na początku, w konstruktorze tworzę nową właściwość obiektu, która będzie przechowywała numer kolejnego interwału (to zwraca funkcją setInterval()).

Kiedy proces odliczania będzie się zaczynał to aby mógł on trwać w czasie, wykorzystałem funkcję tworzącą interwał.

class Clock {
    constructor() {
        // ...
        this.clock = null;
    }

    // ...

    start(formattedTime) {
        this.limitTime = Clock.parseSeconds(formattedTime);
        this.clock = setInterval(() => {
            this.currentTime += ONE_SECOND;
            let diff = this.limitTime - this.currentTime;
            this.render(diff);
        }, ONE_SECOND);
    }
}

Krok 8. Zatrzymanie zegarka

Wykorzystałem funkcję clearInterval(), po to, aby zatrzymać obecny interwał.

Wskazówka

Nie ma możliwość wznawiania interwału. Możesz stworzyć kolejny.

class Clock {
    // ...

    start(formattedTime) {
        // ...
        this.clock = setInterval(() => {
            // ...
            if (this.isFinished()) {
                this.stop();
            }
        }, ONE_SECOND);
    }

    stop() {
        clearInterval(this.clock);
    }

    isFinished() {
        return this.currentTime === this.limitTime;
    }
}

Krok 9. Problem: brak prezentacji początkowego czasu

Aby poradzić sobie z tym problemem, musisz przed uruchomieniem odmierzania czasu przez zegarek wyrenderować obecny czas. Stąd też funkcja update() jest uruchomiona przez setInterval(), ale też i w nim.

class Clock {
    // ...

    start(formattedTime) {
        // ...
        this.update();
        this.clock = setInterval(() => {
            // ...
            this.update();
            // ...
        }, ONE_SECOND);
    }

    update() {
        let remain = this.getRemainingTime();
        let time = Clock.formattedTime(remain);
        this.render(time);
    }

    getRemainingTime() {
        return this.limitTime - this.currentTime;
    }

    // ...
}

Krok 10. Prezentacja sformatowanego czasu

Zegarek obecnie wyświetla milisekundy. W takim stanie nie przyda się on wielu osobom. Należy sformatować czas do postaci czytelnej, tj. MM:SS (minuty i sekundy).

Ważne jest zrzutowanie liczby minut do postaci integera (w dół), stąd też wykorzystuję funkcję Math.floor(). Nie ma sensu pokazywać niewymiernych liczb.

class Clock {
    // ...

    update() {
        let remain = this.getRemainingTime();
        let time = Clock.formattedTime(remain);
        this.render(time);
    }

    // ...

    static formattedTime(milliseconds) {
        let minutes = Math.floor(milliseconds / ONE_SECOND / 60);
        let seconds = milliseconds / ONE_SECOND % 60;
        return `${minutes}:${seconds}`;
    }
}

Krok 11. Prezentacja minut i sekund jako grupa 2 cyfr

Wykorzystałem najnowsze (ES2017) możliwości łańcucha znaków, jakim jest dynamiczne dodawanie znaków przed nim, ale też i po.

class Clock {
    // ...

    static formattedTime(milliseconds) {
        let minutes = Math.floor(milliseconds / ONE_SECOND / 60);
        let seconds = milliseconds / ONE_SECOND % 60;
        minutes = String(minutes).padStart(2, '0');
        seconds = String(seconds).padStart(2, '0');
        return `${minutes}:${seconds}`;
    }
}

Krok 12. Centrowanie tekstu

Nigdy nie przypuszczałem, że centrowanie tekstu w przyszłości będzie skupiało się tylko na 3 linijkach 😄

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

Krok 13. Kolorowanie tekstu kiedy czas się skończy

Niesamowicie potrzebny feature, który poinformuje bardzo szybko, że czas się skończył kolorując go na czerwono.

Plik: main.css

/* ... */
.red-color {
    color: red;
    text-shadow: 1px 1px 3px #000;
}

Plik: main.js

class Clock {
    // ....

    stop() {
        clearInterval(this.clock);
        this.$clock.classList.add('red-color');
    }

    // ....
}

Krok 14. Dodanie muzyki

Wykorzystuję konstruktor Audio, do stworzenia obiektu, który to załaduje i odtworzy dowolnie wskazany plik muzyczny.

class Clock {
    // ...

    stop() {
        clearInterval(this.clock);
        this.$clock.classList.add('red-color');
        playAudio('alarm.mp3');
    }

    // ...
}

function playAudio(src) {
    let audio = new Audio(src);
    audio.load();
    audio.play();
}

// ...

Krok 15. Pobieranie czasu z URLa

Czas umieszczę w hashu URLa. Aby go pobrać, wykorzystałem właściwość hash w obiekcie window.location. Dodałem też feature, że jeśli chcesz zmienić hasha, to przeładowuję stronę, aby uruchomić od nowa zegarek. Wszystko po to, aby wchodząć na stronę np.

http://localhost/countdown/#10:00

odliczało się 10 minut
http://localhost/countdown/#05:00

odliczało się 5 minut
http://localhost/countdown/#03:15

odliczało się 3 minut i 15 sekund

// ...

function setup() {
    let clock1 = new Clock();
    clock1.start(location.hash.slice(1));
}

// ...

window.addEventListener('hashchange', () => {
    window.location.reload();
});

The end 🎉

Podsumowanie

Chcesz zobaczyć countdown w praktyce?

See the pen on CodePen.

Kilka wskazówek SEO

Piotr Kowalski — Sat, 10 Jun 2017 21:53:55 +0000

Kilka dni temu, kolega zapytał się mnie czy pomogę mu wypozycjonować stronę? Istnieją specjalne stanowiska w branży IT, które zajmują się tym aspektem, jednak jako programista Front-end znam kilka elementów, które mogą pomóc w pozycjonowaniu. Dlatego też postanowiłem, że odpowiem Bartkowi pisząc ten artykuł, po to, aby to nie tylko on mógł skorzystać z tego co ja wiem.

Dlaczego tylko “mogą pomóc”? Ponieważ proces pozycjonowania jest złożonym zagadnieniem nie posiadającym jednego słusznego rozwiązania. Istnieje wiele aspektów, na które trzeba zwrócić uwagę, aby strona była wyżej w wynikach wyszukiwania. Najpopularniejsze dla Google to wartościowa i niepowielana treść.

Ludzka świadomość

Coraz więcej ludzi poznaje świat internetu od strony “pozycjonowania”. Kiedy wkraczasz w życie dorosłe i zakładasz swój biznes, to chcesz się wybić na rynku tworząc stronę “wizytówkę”, ale zauważasz, że w wynikach wyszukiwania Twoja strona jest gdzieś na 5 stronie.

Rodzi się w Twojej głowie pytanie: co muszę zrobić, aby pojawić się na pierwszej stronie z wynikami wyszukiwania po wpisaniu frazy XXX?

Pozycjonowanie vs SEO vs. Roboty

Pozycjonowanie

Sztuka “pozycjonowania” polega na tym, że strona pojawia się wyżej w wynikach wyszukiwania po wpisaniu odpowiedniej frazy. Aby spowodować, że strona jest lepiej wypozycjonowana warto poddać ją procesowi SEO.

Znane są przypadki, że ktoś wypozycjonował stronę niezwiązaną z faktycznym słowem kluczowym, a jednak wyświetlała się ona wyżej w wynikach wyszukiwania. Więcej do poczytania o takim przypadku tutaj.

SEO

Akronim słów Search Engine Optimization, czyli procesu, który polega na modyfikacji strony internetowej tak, aby wyświetlała się ona wyżej w wynikach wyszukiwania.
Roboty

Aplikacje serwerowe, które ciągle przeszukują internet pod kątem aktualizacji treści i analizy słów kluczowych. Proces ten nazywa się “indeksacją”. W tym miejscu narzuca się pierwsza porada, tj. im więcej będziecie mieć treści na stronie, tym będzie ona wyżej w wynikach wyszukiwania. Więcej porad na liście poniżej.
Inne nazwy to: “crawler”, “agent” albo “spider”.

Przykładem jest Googlebot - najpopularniejszy taki skaner.
SERP

Akronim słów Search Engine Results Page, czyli listy wyników wyszukiwania, która pojawi się jako efekt pracy wyszukiwarki do której wpiszesz frazę. Lista jest posortowana pod kątem stron, które są dla Ciebie i Twojego zapytania najtrafniejsze.

Nieoficjalne logo Googlebot-a.

Wskazówki

Poniżej przedstawiam Ci listę moich porad, które na pewno poprawią ranking Twojej strony. Jednak tak jak już wspomniałem wcześniej, nie gwarantują, że strona osiągnie szczyt. W sumie to nawet mogę się założyć, że bez dodatkowego wsparcia - płatnej reklamy - nie będziesz mógł konkurować na popularne hasła. Firmy płacą odpowiednim instytucjom, aby ich strony były wysoko. Aby ich przeskoczyć trzeba… no właśnie, trzeba jeszcze więcej zainwestować w SEO. Nierealne dla zwykłego śmiertelnika.

Poniższa lista uporządkowana w kolejności w jakiej trzeba dbać, aby strona była wyżej w wyszukiwarce. Zaznaczam, że kolejność pochodzi z mojego doświadczenia.

1. Artykuły, czyli blog na stronie

Im więcej treści bogatych w kluczowy kontent (kontent zawierający odpowiednie słowa kluczowe) tym więcej możliwości dotarcia do strona. Dlatego ważne jest aby Twoja strona posiadała sekcję “blog”, albo coś w tym stylu. W tym miejscu mógłbyś wpisywać jakieś artykuły związane z Twoim produktem albo usługą, którą chcesz sprzedać.

Słowa kluczowe mogą być odmieniane. Googlebot sobie z tym poradzi.

Taka forma promocji nazywa się Content Marketing.

2. Linki

Im więcej stron zawiera odnośniki do Twojej witryny, tym większy posiada ona PageRank. Jest to taki ranking wymyślony przez założycieli Google-a, który pomaga określić poziom strony w wynikach wyszukiwania.

PageRank jest brany pod uwagę pozycji w wynikach wyszukiwania, jednak od jakiegoś czasu nie jest to najmocniejszy argument stojący za wyższą pozycją na liście wyników wyszukiwarki.

Aktualizacja

W komentarzach pojawiała się informacja, że PageRank nie jest już w ogóle brany pod uwagę w procesie pozycjonowania.

3. Walidacja HTML

Jednym z podstaw SEO jest wdrożenie semantyki języka HTML. Semantyka, to wykorzystywanie znaczników HTML zgodnie z ich przeznaczeniem, tylko po aby Twoja strona została dobrze przeskanowana przez roboty.

Semantyka strony nie ma znaczenia dla robotów skanujących Twoją stronę. Jednak to nie znaczy, że nie musisz o nią dbać.

Trzeba dbać o to, aby wykorzystywać język HTML zgodnie z zasadami.

4. Wykorzystanie specjalnych atrybutów `Schema`

Treść w internecie została skategoryzowana po to, aby wyszukiwarkom łatwo było parsować dane, które wyświetlane są użytkownikowi. I tak jeśli chcesz wyświetlić zdjęcie z opisem to wykorzystujesz odpowiednie atrybuty w użytych znacznikach, aby opisać ten fragment strony. Wszystko po to, aby silniki wyszukiwarek mogły sobie lepiej poradzić wyłuskując odpowiednie dane.

Zasady zdefiniowane są pod adresem: schema.org

Aby zweryfikować czy dobrze (albo źle) zaimplementowałeś specyfikację Schema skorzystaj z tego narzędzia firmy Google.

Wynik analizy narzędzia weryfikującego poprawność użycia atrybutów Scheme dla strony https://piecioshka.pl/blog/.

5. Plik `robots.txt`

Idea tego pliku jest prosta, zdefiniować adresy, które nie będą analizowane przez roboty. W telegraficznym skrócie, działa to tak, że wpisujesz w pliku ścieżki do katalogów, które chcesz aby robot ignorował i nie zaglądał tam.

Uwaga

Pamiętaj, że to, co robot nie widzi, może zobaczyć człowiek. Cokolwiek wpiszesz do pliku robots.txt może zostać podejrzane przez dowolnego użytkownika internetu. Miej to na uwadze.

Przykładowy plik pochodzi z głównej strony największej korporacji w świecie IT, czyli Google - www.google.com/robots.txt

PS Proponuję dopisać na koniec pliku robots.txt osadzenie sajtmapy:

Sitemap: https://piecioshka.pl/sitemap.xml

6. Mapa strony (`sitemap`)

Kiedy tworzysz serwis i chcesz mieć pewność, że robot przeskanuje wymienione przez Ciebie URL-e możesz zdefiniować je w specjalnej mapie.

Rekomendowana nazwa dla pliku będącego mapą to sitemap.xml.

Jeśli chciałby zgłosić mapę witryny w dwóch najpopularniejszych robotach, to wystarczy, że wejdziesz na poniższe adresy. Oczywiście zamień XXX na adres do Twojej strony:

Bing: http://www.bing.com/webmaster/ping.aspx?siteMap=XXX
Google: http://www.google.com/webmasters/tools/ping?sitemap=XXX

7. Google Webmaster Tools Search Console

Bardzo ważne jest zgłoszenie strony do tego narzędzia. Google je stworzyło po to abyś mógł obserwować jak Googlebot radzi sobie z indeksowaniem Twojej witryny.

Link do narzędzia.

Facebook stworzył pewien zapis definiujący wyświetlaną stronę i nazwał go: The Open Graph.

OGP to nic innego jak customowe meta tagi. Przykład:

<meta property="og:image" content="https://piecioshka.pl/assets/images/posts/seo/seo.png"/>

Istnieje pewne narzędzie, które weryfikuje, czy OGP jest dobrze użyte na stronie. Nazywa się Facebook Debugger.

Wynik testu narzędzia "Facebook Debugger" na stronie https://piecioshka.pl/blog/.

Mniej popularny w Polsce jest z kolei Twitter-owy pomysł na prezentację dynamicznych danych, czyli Twitter Card.

Wynik testu narzędzia "Twitter Card" na stronie https://piecioshka.pl/blog/.

9. Metadane

Poprzez metadane, mam na myśli takie elementy strony, które zawarte są w następujących znacznikach:

9.1. Tytuł strony

Znacznik <title> służy do definicji tytułu strony. Oczywiści tak samo jak nazwa pliku może być tylko jedna, tak i tytuł strony może być tylko jeden.

Tytuł strony to maksymalnie 70 znaków.

9.2. Opis strony

À propos znacznika z opisem strony, czyli:

<meta name="description" content="XXX"/>

to zapraszam do obejrzenia tego krótkiego wystąpienia:

Jeśli nie chce Ci się oglądać to w skrócie:

Pole “description” nie jest brane pod uwagę ustawiając ranking dla strony na której się znajduje. Jest wykorzystywane tylko do prezentacji w wynikach wyszukiwania.

9.3. Słowa kluczowe strony

Ideą znacznika <meta name="keywords" content="XXX"/> miało być zdefiniowanie słów kluczowych pod jakimi Twoja strona byłaby dostępna dla użytkowników internetu.

Uwaga na słowa kluczowe!

Ludzie przez wiele lat przesadzali i wpisywali zbyt dużą liczbę słów, które nie były powiązane ze stroną. Została wprowadzona poprawka do algorytmu Googlebot-a, aby zaczął ignorować wartość tego pola.

10. Korzystać z nagłówków `<h1>`, `<h2>`, itd

Comandeer pięknie opisał, że nie korzystaniem z semantyki podczas budowania markupu nie wpływa na SEO.

Aby przeczytać pełny raport wejdź na ten artykuł.

11. Definiowanie tekstu alternatywnego dla obrazków

Jeśli osadzasz obrazek, to zadbaj o to, aby atrybut alt zawsze posiadał tekst, który będzie zawierał opis tego co znajduje się na obrazku. Przykład:

<img
    src="iphone-5-spring.jpg"
    alt="Telefon iPhone 5, leży na zielonych liściach"
    />

PS Obrazki osadzone znacznikiem <img> będą indeksowane przez roboty. Jeśli chcesz wyświetlić obrazek, który nie zostanie zindeksowany to skorzystaj z reguły CSS background-image.

12. Nie korzystać z hashy na stronach

Lepiej wykorzystać:

History API (Push state)
lub #! jako łącznika strony z domeną. Przykładem jest aplikacja SPA mojego autorstwa napisana w Backbonie: https://grabowska.org

13. “Ładnie wyglądające” adresy URL

Co mam na myśli pisząc ładne URLe? Chodzi mi o to, że w URLu jest np. treść artykułu poddana procesowi “slugowania”.

Wypróbuj to narzędzie: https://you.tools/slugify/

Wyżej wymienione narzędzie zamienia wszelkie białe znaki na myślniki, duże literki na małe oraz polskie litery na te z alfabetu angielskiego. Przykład:

na wejściu: Kilka wskazówek SEO
na wyjściu: kilka-wskazowek-seo

Inaczej czyta się taki URL:

http://example.org/kilka-wskazowek-seo.html

aniżeli

http://example.org/98345.html

gdzie 98345 jest identyfikatorem artykułu w bazie danych.

14. HTTPS

Od jakiegoś czasu (prawdopodobnie od wejścia PWA) Google postanowiło, że strony nie wykorzystujące bezpiecznego protokołu HTTPS będą miały redukowane rankingi spadając tym samym w SERP-ie.

Czas na zmiany

Google zmienia internet na bezpieczniejszy. Ma taką siłę i może to robić.

W pełni popieram takie stanowisko. W dzisiejszych czasach konfiguracja SSLa po stronie serwera to prosta sprawa.

15. PWA - Progressive Web App

Nowy typ aplikacji ma zrewolucjonizować rynek aplikacji mobilnych. Zamiast tworzyć aplikację mobilną dla swojego serwisu, wystarczy że przerobisz stronę WWW na aplikację progresywną i użytkownicy telefonów będą mogli z niej tak samo korzystać jak z aplikacji mobilnej, którą muszą pobrać i zainstalować.

Aplikacja PWA będzie ważyła maksymalnie kilka MB (w zależności od wykorzystanej przestrzeni na cache).

Więcej na ten temat znajdziesz w tym artykule na blogu.

16. AMP - Accelerated Mobile Pages

Google wpadło na pomysł, aby strony internetowe wyświetlane na urządzeniach mobilnych były szybciej wyświetlane, dzięki temu, że urządzenia nie będą ściągały całą treść strony.

Więcej o tym projekcie tutaj.

Wyniki wyszukiwania dla frazy "revolution tv show" na iPhone 5.

•

Black SEO

Jest też druga strona medalu, tj. czego nie możesz robić na stronie, jeśli nie chcesz spaść z rankingu Google-a. Pamiętaj, że jest to najpopularniejsza wyszukiwarka, więc jeśli z niej znikniesz to prawie tak jakbyś przestał posiadać stronę WWW.

1. Nie możesz robić tej samej treści pod rożnymi URL-ami

Zasada

Jedna treść = jeden URL.

Oznacza to, nic innego, że jeśli serwujesz użytkownikowi tą samą treść dla rożnych URLi to jesteś potraktowany przez roboty jako oszust. Dlatego nie próbuj kopiować całego serwisu i “wklejać” pod inną domeną. Google Cię dopadnie.

2. Umieszczanie na dole strony dużej ilości słów kluczowych pisanych małym fontem

Kolejny przykład, aby nałapać większej ilości słów kluczowych. Pomysł interesujący, ale nie fer. Dlatego gdy zrobisz taki numer i Googlebot to odkryje to znikasz z internetu.

•

Czy wyniki wyszukiwania różnią się na “mobile” vs “desktop”?

Oczywiście. Jako użytkownik telefonu udostępniasz firmie swoje położenie, na podstawie którego Google może ustawić wyniki pod kątem Twojej lokalizacji.

Sprawdź tym narzędziem, czy Twoja strona jest przyjazna dla urządzeń mobilnych.

Algorytmy Google-a korzystając z narzędzi weryfikujących, czy Twoja strona dobrze wygląda na urządzeniu mobilnym albo pokazują ją w wynikach wyszukiwania wysoko (jeśli jest dostępna) albo nisko (kiedy nie spełnia ona podstawowych zasad serwowania treści na urządzenia mobilne).

Zapraszam Cię do przetestowania jak Twoja strona wygląda w tym narzędziu. Opisywane przeze mnie narzędzie weryfikuje jak witryna radzi sobie w różnych środowiskach oraz podpowiada co możesz zrobić, aby było lepiej.

Opcja jest dostępna dopiero wtedy gdy podasz adres e-mail.

Wyniki działania narzędzia dla strony https://piecioshka.pl/blog/.

Co zrobić, aby wyłączyć linki z indeksowania?

Aby poinformować Googlebot, żeby nie indeksował strony do której kierujesz dodaj w linku atrybut noindex, który to poinformuje o takim zamiarze.

Pamiętaj, że wpisanie strony w robots.txt zabroni robotowi wchodzenia na stronę, ale nie zabroni go zindeksować, np. jeśli ktoś inny pokieruje do Twojego artykułu.

Jeśli chcesz zabronić robotowi przejścia na konkretną stroną (której link jest np. wygenerowany dynamicznie dlatego też nie możesz zdefiniować go w pliku robots.txt) to możesz w budowie linku posłużyć się atrybutem rel="nofollow", np.

<a href="/hidden-part" rel="nofollow">Ukryta treść</a>

Czy aplikacje SPA są gorzej indeksowane od MPA?

Na początku wyjaśnijmy skróty:

SPA - Single Page Application

Nowy (kilkuletni) sposób tworzenia stron internetowych, których działanie jest zbliżone do aplikacji natywnych. Użytkownikowi aktualizuje się tylko ta treść, która jest zmieniana.
MPA - Multi Page Application

Typowa strona internetowa, gdzie kliknięcie w dowolny adres wewnętrzny (który kieruje na podstronę serwisu) powoduje odświeżenie całej zawartości przeglądarki (do takiego stopnia, że możesz zobaczyć przez ułamek sekundy białą stronę).
Standardowe rozwiązanie stosowane na dużych serwisach.

Nie uważam, że strony typu SPA źle się indeksują. Ważne jest, aby były tworzone zgodnie w wymienionymi wyżej zasadami.

SSR

Mega pomysłem, jest realizacja Server Side Rendering-u (SSR) - dzięki, któremu treść jest renderowana (tworzona) po stronie serwera, a nie jak ma to miejsce we wszystkich aplikacjach SPA po stronie klienta (przeglądarki). Tym samym roboty indeksujące stronę będą w stanie przeanalizować treść tak samo, jakby miały do czynienia z MPA.

Jak powiedzieć Googlebot-owi, aby zaczął indeksować moją stronę?

Skorzystaj z tego narzędzia do zgłaszania witryn, które zostaną wpisane na listę strona do przeskanowania.

Tą samą ścieżkę możesz wykonać kiedy chcesz odświeżyć informacje jakie posiada Googlebot na temat danej strony.

Udało się! Jestem na samej górze!

Spokojnie. Jeśli jesteś zalogowany w Google-ach na użytkownika, na kocie którego dodałeś strony w Google Search Console, to możesz mieć zaburzone wyniki na temat tychże stron - tzn. że mogą być one ustawione wyżej w wynikach wyszukiwania. Taka sytuacja będzie tylko dla Ciebie. Cały świat tak na prawdę będzie widział inną listę SERP.

Drugi aspekt, to że jesteś na samej górze dziś, wcale nie znaczy, że zawsze tak będzie. Stąd też pozycjonowanie to proces, który nie ma końca. Musisz ciągle dbać o strona, aby była wysoko.

•

✨ Specjalne wskazówki dla Wordpress-a ✨

Poniżej króciutka lista rzeczy, które możesz wykonać, kiedy Twoja strona jest postawiona na najpopularniejszym systemie CMS - Content Management System - czyli Wordpress-ie.

1. Wpisz w plik `robots.txt` katalog `wp-admin`.

Nie ma potrzeby, aby wyszukiwarki męczyły się nad indeksowaniem czegoś co nie będzie wnosiło żadnej korzyści dla Twojego serwisu, czyli panelu administracyjnego. Dlatego też w pliku robots.txt powinieneś mieć następującą treść:

User-Agent: *
Disallow: /wp-admin/

•

Polecane narzędzia

Google Adwords: Analiza słów kluczowych

adwords.google.com/ko/KeywordPlanner
Google Chrome Plugin: SEO Toolbox

www.seoquake.com
Darmowe narzędzie, które instalujesz w swojej przeglądarce, aby prezentowało jak strona na której jesteś prezentuje się w rankingach najpopularniejszych wyszukiwarek.
Open Site Explorer
moz.com/researchtools/ose
Narzędzie, które prezentuje różne metryki, takie jak:
- DOMAIN AUTHORITY
- PAGE AUTHORITY
- SPAM SCORE
które dają pogląd na to, z czym mogą mieć problem wyszukiwarki.

Bibliografia

Lista stron, z których czerpałem detale na temat SEO:

•

To nie koniec!

Na ten moment, wypstrykałem się, ze wszystkiego, co wiem na temat SEO.

Jestem jednak przekonany, że nie jest to cała wiedza na temat SEO. Stąd też artykuł ten będzie regularnie poddawany modyfikacjom, tak aby coraz bardziej wartościowy.

Psst… Jeśli znasz dobre praktyki SEO, daj znać o nich w komentarzu!

WarsawJS Meetup #33: Mój punkt widzenia

Piotr Kowalski — Thu, 08 Jun 2017 21:50:00 +0000

Przyszedł czas, na kolejną opowieść o warszawskim święcie programistów JavaScript, czyli WarsawJS Meetup. Dziś przedstawię Ci mój punkt widzenia z prelekcji podczas ostatniego spotkania.

Oficjalny profil wydarzenia dostępny na Meetup. Dostępna jest też zajawka fejsbukowa.

Invitation

Piotr jest bokserem. Dowiedziałem się kilka godzin przed zdjęciami do kolejnej produkcji wideo, czyli zapowiedzi na WarsawJS Meetup.

Cała nasza trójka (razem z Kasią) pojechaliśmy do warszawskiego Anina, gdzie istnieje klub - Uniq Fight Club, w którym Piotr trenuje swoje zdolności bokserskie.

Podczas nagrywania pomimo tego, że miałem mikrofon podpięty (widoczne np. w 30 sekundzie filmu) to nie zbierał on dźwięku. Dlaczego? Bo nie docisnąłem wtyczki kabla do rejestratora audio. Porażka. Stąd też na zapowiedzi słychać dźwięki tła. Przepraszam. Mój błąd, ale jakoś wybrnąłem przy montażu 😄

Podczas nagrywania popróbowałem wykonywać uderzania w rękawicy bokserskiej - świetna sprawa! Polecam. Można się odstresować.

•

Talk #1: How to make Frankenstein’s monster or how to combine Next.js and React Native [PL] Jędrzej Majko

Moim zdaniem prelekcja dla osób z bogatym doświadczeniem Reactowym, a nawet React Native-owym. Jędrzej opowiedział o 2 sposobach na pożenienie React Native oraz Next.js. Pierwszy sposób sfailował z wielu powodów. Druga koncepcja już była bardziej przemyślana, jednak i tak zawierała problemy jak chociażby brak jednego kodu dla projektu.

Uważam, że prelegent świetnie poradził sobie z przedstawieniem swojej perspektywy na tworzenie aplikacji z użyciem React-a. Podkreślił nawet, że aplikacje napisane w Angularze są wolne. Rozumiem to niezadowolenie. Mam nadzieje, że autorzy frameworkowa Googla, wezmą sobie do serca polepszenie w nim performance-u.

Link do prelekcji: youtube.com/watch?v=_a9TwCHiE_A
Kontakt do prelegenta: @jmajko

•

Talk #2: Jak pracować zdalnie i nie zwariować [PL] Tomasz Marciszewski

Mój komentarz na gorąco: “będę oglądał tą prelekcję przed snem”. Dlaczego? Ze względu na ten luz prelegenta oraz miękką tematykę prelekcji.

Tomek, jest wieloletnim developerem, który pracuje zdalnie już od ponad 7 lat, czyli na temat pracy zdalnej może swoje powiedzieć.

Plusy pracy zdalnej

Nie trzeba chodzić do pracy (nie trzeba kupować biletu, więc kasa w kieszeni)
Można nosić co się chce (można pracować w dowolnym stroju)
Samemu wyznaczasz godziny swojej pracy
Nikt nie zagląda przez ramię
Można się skupić (nie trzeba słuchać innych)
Więcej czasu dla swojej rodziny
Nie trzeba spotykać się z ludźmi, których się nie lubi

Minusy pracy zdalnej

Nie ma się czasu na słuchanie podcastów, czytanie książek podczas dojazdów
Nie ma dress code-u
Nie ma organizacji pracy
Nie ma szefa, który popchnie do pracy
Nie ma szans z kim pogadać (czasami robi się smutno)
Rodzina nie pomaga się skupić podczas pracy w domu
Nie możesz liczyć na pomoc kolegów
Nie ma rywalizacji z innymi developerami
Nikt nie zaprosi na obiad

Podczas tej prelekcji każdy może usłyszeć kilka słów ~~goryczy~~ prawdy aby obalić mity, te które krążą o takim stylu pracy zarobkowej.

Link do prelekcji: youtube.com/watch?v=3C_XCFqoMiY
Kontakt do prelegenta: @Koori_

•

Talk #3: Komunikacja w świecie IT [PL] Adrian Soja

Adrian jako Team Leader oraz Scrum Master podzielił się swoim doświadczeniem w sprawie poprawnego posługiwania się językiem w komunikacji w projektach informatycznych.

Sukces projektu jest bardzo powiązany z poprawną komunikacją w zespołach projektowych.

Wujek “Dobra Rada”

Drogi programisto, jeśli masz problem komunikacyjny w zespole, zgłoś to przełożonemu. Im szybciej wyeliminujecie problem tym szybciej będzie Wam się lepiej współpracowało.

Świetna prelekcja, którą powinien zobaczyć każdy developer pracujący w grupie osób. Prelegent opisał od podstaw jak wygląda proces komunikacji między dwoma osobami. Jakie mogą być zagrożenia oraz jak je rozwiązać.

Złota myśl

Jeśli prowadzisz kłótnię to bicie Twojego serca na poziomie ponad 95 uderzeń na minutę powoduje, że nie przyjmujesz żadnych argumentów strony przeciwnej. Dlatego powinieneś odpocząć na 15 minut i do kończyć rozmowę.

Link do prelekcji: youtube.com/watch?v=AHv6t5rK6vU
Kontakt do prelegenta: @saldrian

•

Sponsorzy spotkania

Po co mi UML?

Piotr Kowalski — Tue, 06 Jun 2017 21:56:06 +0000

Wielu z Was - programistów Front-end - na pewno słyszało o UML-u. Część, która miała już tą przyjemność korzystania z możliwości zamodelowania dowolnego scenariusza pewnie ma już wyrobione zdanie na temat tego języka. W tym artykule przedstawię Ci, czym dla mnie jest UML.

Jest to pierwszy post z serii o UML. Mam w planach napisanie kilku artykułów na temat konkretnych diagramów UML, które wykorzystuję w codziennej pracy.

2023-11-28 - Diagram Sekwencji w UML (przykłady w JavaScript)
2020-06-26 - Diagram Klas w UML (przykłady w JavaScript)
2017-06-06 - Po co mi UML?

Oficjalne logo UML

Co to jest UML?

Drogi czytelniku, jeśli jeszcze nie wiesz co to jest UML, to pozwól, że w telegraficznym skrócie Ci wytłumaczę.

Czy czasami, kiedy masz problem ze zrozumiem czegoś, jakiegoś problemu, czy nie korzystasz wtedy z długopisu i kartki? Jeśli tak to na pewno starasz się narysować na kartce papieru pewne elementy, takie jak np. użytkownik, serwer, przycisk albo okno przeglądarki.

Każdy kto rysuje na kartce papieru tworzy coś na swój sposób. Co jeśli wystąpi konflikt? W mojej głowie użytkownika będzie reprezentował kwadrat, a u Ciebie to będzie okrąg? Co wtedy No właśnie. UML to umowny zapis jak powinno się rysować elementy ze świata inżynierii oprogramowania.

Diagram Klas mojego autorstwa. Temat - Zamek. 2010 rok.

Po co?

Przedstawienie innemu programiście implementacji za pomocą obrazka.

Ile razy słyszałeś “a weź mi to narysuj”? Jeśli masz komuś coś wytłumaczyć, to bardzo często lepiej jest to po prostu narysować.

Przedstawienie czegoś na obrazku lepiej obrazuje omawiane zagadnienie. Ilu programistów tyle różnych rysunków. Dlaczego więc nie rysować zgodnie z jakimiś zasadami?

Diagram Klas mojego autorstwa. Temat - Szkoła. 2012 rok.
Świetne na spotkania z biznesem, aby pokazać jak wygląda implementacja.

Za poprawną implementację odpowiedzialni są programiści. Tylko oni znają się na programowaniu. Biznes nie rozumie o co chodzi w tych krzaczkach, które wyświetlają się całymi dniami na komputerach developerów.

Przykład diagramu czynności.

To, że biznes nie potrafi programować, to nie znaczy, że nie potrafi myśleć. Dlatego też, jeśli chciałbyś - developerze - pokazać np. jak wygląda flow, które zaimplementowałeś to pokaż biznesowi diagram czynności, na którym będzie rozrysowane krok po kroku jak wygląda np. rejestracja użytkownika w projekcie opartym na React-cie 😄

Stoisz na spotkaniu i nikt Cię nie rozumie gdy tłumaczysz implementację?
NARYSUJ JĄ!
Planowanie implementacji.

Ważna zasada

Najważniejszą rzeczą poprzedzającą implementację jest analiza!

Ile razy drogi programisto gryzłeś się w język, że napisałeś kod bez wcześniejszego namysłu i teraz niestety musisz go się pozbyć, bo ktoś zwrócił Ci uwagę, że brniesz w złą stronę. Najbardziej boli, kiedy to Ty sam zauważasz, że po kilku godzinach zabrnąłeś zupełnie nie tam gdzie powinieneś. No właśnie!

Analiza (z angielskiego “design”) to projektowanie rozwiązania.

W tym przypadku problemem jest brak etapu projektowania. Wszystkie szkoły wytwórców oprogramowania mówią, że pierwszą fazą (w modelu kaskadowym) jest specyfikacja, czyli określenie wymagań projektu, ale tuż za nim jest faza projektowania systemu na którą powinno poświęcić się do 30-40% całości trwania projektu (źródło 1, źródło 2).

Poprzez “projekt” mam też na myśli dowolne “zadanie”.

Prezentacja jak NAJCZĘŚCIEJ przebiega realizacja projektu. Źródło.

Nuda?

Wiele osób może uważać, że tworzenie diagramów to nuda. Dlatego też, nie chce się im ich rysować. Nie rozumiem dlaczego w głowach developerów pojawia się takie myślenie. Jestem w stanie zrozumieć, że Ci młodzi “zapaleńcy”, którzy by tylko klepali w klawiaturę - nie ważne co, ważne że klepią - mogą nie zakochać się w diagramach, bo tutaj nie ma kodowania.

Jednak kiedy młody developer staje się coraz bardziej odpowiedzialny za system, to zastawia się jak tutaj sobie pomóc i nie pisząc kodu, móc określić jego potencjalne działanie.

Architekci, czyli tacy developerzy, którzy na pewnym etapie swojej kariery postanowili zająć się na dobre projektowaniem, wiedzą, że bez odpowiednich modeli (czytaj diagramów) ich praca nie byłaby efektywna. Zaprezentowanie swojego pomysłu dla zespołu projektowego wiąże się z tym, że jeśli zostanie on źle zrozumiany to ponosi za to konsekwencje.

Diagramy to dokumentacja

Pliki z diagramami to typowa, zaraz po słownej, dokumentacja. Wszyscy wiemy, że nieaktualizowana dokumentacja nadaje się tylko do śmietnika. Trzeba aktualizować dokumentację słowną, ale też i rysunkową.

Moja prośba

Mam do Ciebie drogi developerze serdeczną prośbę.
Dbaj o dokumentację. Uratuje Ci ona kiedyś skórę. Mówię Ci ze swojego doświadczenia.

Teza: diagramy są trudne!

W świecie front-endu jest wiele frameworków, narzędzi, systemów. Utarło się, że osoby bez znajomości dowolnego z nich stwierdzają, że jest on “trudny”. Nie mam pojęcia dlaczego pojawia się takie myślenie.

Złota myśl

Wychodzę z założenia, że nie ma rzeczy trudnych, są rzeczy których po prostu jeszcze się nie poznało.

Drogi czytelniku, jeśli nie znasz jeszcze UML to poczytaj o dowolnym diagramie i rysuj go. Naucz się wszystkiego, co z nim związane i rysuj tyle tych diagramów ile wlezie. Taką praktyką dojdziesz do momentu, że już nawet nie poczujesz, że musisz narysować diagram. Stanie się to po prostu łatwe i przyjemne. Dlaczego? Bo już poznałeś na wylot zasady jakie w nim panują.

Ze swojej strony proponują naukę dowolnego z poniższych:

Diagram Klas
Diagram Sekwencji
Diagram Czynności

Teza obalona 🎉

Kto go używa?

Programiści back-end

Ci programiści wykorzystują diagramy do modelowania swoich usług wystawionych w świat.
DevOps, czyli administratorzy systemów

Ci, natomiast mogą prezentować swoją architekturę serwerową, wszelkie sieci szkieletowe i inne.
Programiści front-end

Ci mają bardzo łatwo, bo liczba procesów które mogą zostać narysowane w diagramach jest przeogromna, zaczynając od komunikacji sieciowej z back-endem, skończywszy na definicji zachowania kontrolek po interakcji użytkownika.
Inni

Istnieje wiele stanowisk, które również wykorzystują takie diagramy i nie sposób jest ich tutaj wszystkich wymienić.

Kto powinien znać UML?

Każdy developer sieciowy.

Kto jest takim developerem? Każdy kto wytwarza oprogramowanie, do którego dostęp możliwy jest za pomocą sieci, czy to wewnętrznej (intranet) czy to zewnętrznej (internet).

Jak mi “jako programiście” pomagają diagramy?

Z mojego doświadczenie najlepszym diagramem dla programistów front-end jest Diagram Sekwencji, który obrazuje jak wygląda ich kod w stosunku do innych systemów, np. back-endu lub też inter-obiektowy w aplikacji.

Inter-obiektowy, to taki który określa połączenia między obiektami, klasami w architekturze aplikacji. Np. jak wygląda komunikacja między DataService a modelem UserModel.

Diagram Sekwencji mojego autorstwa. Temat - Zmiana nazwiska pacjenta. 2013 rok.

Jak mi “jako kierownikowi” pomagają diagramy?

Nie muszę patrzeć na implementację aby zweryfikować poprawną architekturę.

Code Review to świetna sprawa - uwielbiam to robić. Jednak jest pewien case, kiedy robienie CR to droga przez męką. Zastanów się kiedy tak jest?

W moim przypadku, ciężko mi się przegląda Pull Request, który zawiera ogromną liczbą zmian. Kiedy w PR liczba dodanych linijek przekracza ponad 1000 (1 tysiąc) linijek kodu, to jest kiepsko.

Gdybym miał diagram opisujący jak wygląda implementacja, to nie musiałbym mocno zwracać uwagę na zmienione linijki, ponieważ niektóre błędy mógłbym z niego wyczytać.
Oszczędność czasu.

Jako kierownik wieloosobowego zespołu nie mam za dużo czasu, aby weryfikować każdą implementację. Każda godzina jest ważna, dlatego staram się najefektywniej je wykorzystywać. A ślęczenie nad czyimś kodem aby zapoznać się co zrobił developer nie jest mega efektywnym zajęciem.
Prezentacja implementacji mojego zespołu przed biznesem.

Często jest tak, że biznes wyraża chęć poznania w jaki sposób została zrealizowana dana funkcjonalność. Ma do tego pełne prawo. Posiadając odpowiednie typy diagramów jest w stanie bardzo szybko udzielić odpowiedzi nie produkując się za każdym razem gdy takie pytanie będzie miało miejsce.

Przykład (z życia wzięty)

Jestem przekonany, że gdy tworzysz stronę, czy to budując API RESTowe, czy UI myślisz o użytkowniku, który będzie korzystał z tego co zrobisz.

W UML istnieje taki diagram, na którym możesz rysować to, co użytkownik może zrobić z Twoim “systemem”¹. Taki diagram nazywa się Diagram Przypadków Użycia (en. Use Case Diagram).

Diagram Przypadków Użycia mojego autorstwa. Temat - Restauracja. 2011 rok.

Niech przykładem będzie sytuacja z użytkownikiem portalu wideo. Na takim diagramie możemy zapisać, jakie możliwości posiada użytkownik.

Przykład diagramu przypadków użycia użytkownika w portalu wideo.

•

Anegdotka. Od kilku dni moja partnerka życiowa zwraca się do mnie “System”, przez wzgląd na to, że ciągle pracuję 😄 Pisanie artykułów na bloga co drugi dzień oraz nagrywanie i montowania filmów na kanał WarsawJS oraz swój, to dużo pracy. ↩

Jak zbudować widget prezentujący testimoniale?

Piotr Kowalski — Sun, 04 Jun 2017 21:56:08 +0000

Ciekawi Cię jak stworzyć widget prezentujący testimoniale, które coraz częściej są prezentowane na stronach? Przedstawiam Ci jak za pomocą HTML, CSS oraz trochę JavaScript stworzyć odpowiednie komponent. Czas na pracę z kodem!

Co to jest `testimonial`?

Gwoli ścisłości, aby wyrównać wiedzę, testimonial to taka rekomendacja usługobiorcy usługi, które prezentowana jest na stronie usługodawcy.

Np. ja piszę testimonial dla OVH, bo tworzą świetne rozwiązania. Taka rekomendacja zostaje wyświetlona na stronie OVH.

Jak wygląda testimonial? Właśnie tak!

Co to jest `widget`?

No tutaj to chyba nie trzeba tłumaczyć, ale może w jednym zdaniu. Widget to taki jednolity zestaw markupu styli oraz skryptów, który realizuje daną funkcjonalność i jest “przenaszalny”, tj. można go wykorzystać w innych miejscach na stronie, niż to pierwotne.

Kodowanie!

Kolejne kroki będą polegały na przejściu przez kilka warstw kodu, aby stworzyć prosty widget. Jeśli nie interesuje Cię kod, to na dole strony jest GIF prezentujący jak wygląda widget w pełnej okazałości.

Krok 1.

Potrzebujemy plików: HTML (np. index.html), CSS (np. main.css) oraz JavaScript (np. main.js)

Krok 2.

W HTMLu tworzę prosty markup, np. taki:

<div class="testimonial">
    <img
        class="testimonial__image"
        src="http://placeskull.com/50/50"
        alt="Thumbnail"
        />
    <p class="testimonial__text">XXXXXX</p>
</div>

Krok 3.

Dodam trochę CSS-ów, aby komponent lekko ubarwić. Stosuję konwencję BEM pomimo tak prostego projektu i tak uważam, że warto ją stosować.

.testimonial {
    width: 300px;
    height: 50px;
    background: #34495e;
    border-radius: 3px;
    border: 5px solid #2980b9;
    box-shadow: 0 0 3px black inset;
    padding: 5px;
    overflow: hidden;
}

.testimonial__image {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

.testimonial__text {
    width: 200px;
    display: inline-block;
    color: white;
    margin: 0;
}

Na tym etapie powinien wyświetlać się komponent prezentujący ten sztywno zdefiniowany testimonial. Zabierzmy się za coś dynamicznego!

Krok 4.

Dodaję zachowanie (JavaScript)

Krok 4.1:

Lista testimoniali (tablica obiektów):

const testimonialList = [
    {
        image: "http://placeskull.com/50/50/ff00ff",
        text: "Lorem ipsum dolor sit amet.",
    },
    {
        image: "http://placeskull.com/50/50/ffff00",
        text: "Consectetur adipisicing elit."
    },
    {
        image: "http://placeskull.com/50/50/00ffff",
        text: "Sed do eiusmod tempor incididunt."
    }
];

Krok 4.2.

Bootstrap aplikacji

let $image = null;
let $text = null;

function setup() {
    $image = document.querySelector('.testimonial__image');
    $text = document.querySelector('.testimonial__text');
}

window.addEventListener('DOMContentLoaded', setup);

Krok 4.3.

Prezentacja dynamicznego testimoniala

function displayTestimonial(testimonialIndex) {
    let testimonial = testimonialList[testimonialIndex];
    $image.setAttribute('src', testimonial.image);
    $text.textContent = testimonial.text;
}

Krok 4.4.

Zegar, rotujący testimoniale:

const ONE_SECOND = 1000;
const TIME_INTERVAL = 3 * ONE_SECOND;

function displayTestimonial(testimonialIndex) {
    let testimonial = testimonialList[testimonialIndex];
    $image.setAttribute('src', testimonial.image);
    $text.textContent = testimonial.text;
}

function rotateTestimonial(index) {
    displayTestimonial(index);

    setInterval(() => {
        index++;

        if (index === testimonialList.length)  {
            index = 0;
        }

        displayTestimonial(index);
    }, TIME_INTERVAL);
}

function setup() {
    // ...
    rotateTestimonial(0);
}

Krok 5.

Dodanie animacji w CSS3. W kwestii optymalizacji warto dodać regułę will-change, ale o tym wkrótce na blogu.

.testimonial__image {
    /* ... */
    animation: displayTestimonial var(--time) infinite;
}

.testimonial__text {
    /* ... */
    animation: displayTestimonial var(--time) infinite;
}

@keyframes displayTestimonial {
    0% { transform: translateY(80px); }
    40% { transform: translateY(0); }
    60% { transform: translateY(0); }
    100% { transform: translateY(-80px); }
}

Krok 6.

Od jakiegoś czasu można w przeglądarkach korzystać ze zmiennych w CSS-ach. Oczywiście nie wszystkie już supportują ten feature, ale świat idzie do przodu i im szybciej nauczymy się nowinek tym będzie łatwiej.

body {
    /* ... */
    --time: 3s;
}
.testimonial__image {
    /* ... */
    animation: displayTestimonial var(--time) infinite;
}

.testimonial__text {
    /* ... */
    animation: displayTestimonial var(--time) infinite;
}

Prezentacja widgetu w pełnej okazałości. Widget gotowy! 🎉

Podsumowanie

Stworzenie komponentu nie jest wcale ani trudne ani czasochłonne, ale daje za to ciekawy efekt na stronie.

PS. Jutro pojawi się film z live coding opisywanego widgetu.
Zapraszam na mój kanał na platformie YouTube, gdzie regularnie wrzucam filmy o programowaniu.

WarsawJS Meetup #32: Moje wrażenia

Piotr Kowalski — Fri, 02 Jun 2017 21:55:58 +0000

32-edycja comiesięcznych spotkań dla programistów była owocna w świetne tematy. Na scenie pojawili się wspaniali prelegenci Monika i Damian. Zapraszam do zapoznania się jakie były moje odczucia z prelekcji.

Wydarzenie było jak zwykle dostępne na fejsbuku oraz na meetupie.

Invitation

Dzięki znajomościom Piotra mogliśmy nagrywać zapowiedź nie - jak ma to zwykle miejsce - sprzed obiektu ale z wewnątrz. Ekipa WarsawJS wylądowała w klubie tenisowym WTS Orzeł na warszawskiej Pradze.

Chcesz zobaczyć jak jeden z organizatorów WarsawJS skacze w dal?
Zerknij na poniższe wideo.

•

Talk #1: SOLID i DRY w JavaScript- praktyczne przykłady [PL] Damian Wielgosik

40 minutowa prelekcja założyciela meet.js oraz Functionate - Damiana - nie była standardowym wyjściem na scenę i opowieścią o frameworku.

Prelegent zamienił się w programistę i na oczach ponad 100 osób programował koszyk dla aplikacji typu sklep internetowy.

Targetem live coding byli programiści na poziomie początkującym i średnio zaawansowanych.

Damian podczas kodowania przedstawiał po kolei wszystkie 5 zasad (a tak naprawdę cztery, bo jednej zabrakło), które składają się na jedną o nazwie SOLID. Wymieńmy sobie po kolei te zasady:

Single responsibility principle - S
Open/closed principle - O
Liskov substitution principle - L
Interface segregation principle - I
Dependency inversion principle - D

D - DIP

Jako pierwsza została pokazana zasada rozdzielenia zależności, czyli D. Obiekt koszyka - Cart - znał definicję budowania obiektu Product. Nie jest to dobre podejście, ponieważ gdy zmieni się API klasy Product, to trzeba aktualizować zupełnie inną encję - Cart.

Zasada Hollywoodzka

“Jest takie powiedzenie: Nie wołaj nas, my zawołamy Ciebie.”
— Hollywood Principle: Don’t call us, we’ll call you”

Rozwiązanie? Odwrócić zależność! Przenieść tworzenie produktu linijkę przed wykorzystaniem funkcji dodającej produkt.

Damian w okolicach 12 minuty użył słowa “zdikaplowaliśmy”. Coś mi mówi, że prelegent miał na myśli - wykorzystanie wzorca Decoupling Pattern. Już spieszę z wyjaśnieniem.

Wzorzec polega na rozdzieleniu obiektów ze sobą jak najbardziej to możliwe, po to aby zmiana jednego nie powodowała modyfikację drugiego. W świecie gier, sprawa wygląda tak, że jak dodajesz jakiś feature do gry, to w im mniejszej liczbie klas musisz coś zmienić tym lepiej.

✨ Nie wiedziałem, że te podejście posiada taką nazwę. Pierwsze słowa uznania dla prelegenta.

“Jeśli z wielu miejscach musisz nanieść poprawki to wiedz, że coś się dzieje.”
— Damian “Ferrante” Wielgosik

S - SRP

Kolejna zasada jaka została przedstawiona to zasada minimalnej odpowiedzialności. W przykładowej aplikacji Product wiedział, że znajduje się w Cart - trzymał o tym informację w swojej logice. Po co produkt ma wiedzieć, że jest coś takiego jak koszyk?

Rozwiązanie? To koszyk musi wiedzieć, czy produkt w nim jest.

✨ W okolicach 15 minuty zostało wypowiedziane przez prelegenta DDD. Nie znam tego terminu.

Poczytałem trochę o tym i nie będę się starał w krótkich słowach pisać co to jest. Za jakiś czas napiszę artykuł na temat tego podejścia do programowania.

Kupiłem już nawet kiedyś książki na temat DDD aby pogłębić temat. Gdy je przeczytam na pewno pojawi się o tym artykuł.

I - ISP

Po kilku minutach Damian rzucił przykładem, że koszyk chciałby wiedzieć jak się zapisuje. Ten proces może się odbywać za pomocą HTTP, LocalStorage albo cokolwiek innego. Funkcja zapisująca będzie posiadała wszystkie możliwe rozwiązania do zapisu, tym samym będzie to strasznie długa funkcja.

Rozwiązanie? Podział na mniejsze interfejsy, które będą realizowały jak najmniej rzeczy. Jeśli chcielibyśmy zapisywać koszyk do LocalStorage, to trzeba zrobić nową klasę, która będzie realizowała tylko tą rzecz. Rozwiązanie zaczerpnięte z DDD: stworzenie modułu typu “repozytorium”.

✨ Nie znałem takiego typu modułów. Kolejna rzecz, która mnie czegoś nauczyła.

Damian porównał koszyk do listu. List nie wie jak jest przenoszony, czy to InPostem, czy listonoszem itd. Koszyk też nie wie jak jest zapisywany. Bardzo ciekawa analogia.

Koszyk nie może mieć funkcji typu: save, load. Utarło się, że jest to domena repozytoriów, które mogą dane załadować, dostarczyć i zapisują.

“Nie wolno używać generalnego interfejsu. Należy rozbijać funkcje na jak najmniejsze, tak aby realizowały jeden (określony w nazwie) task.”
— Damian “Ferrante” Wielgosik

L - LSP

Zasada ta została stworzona po to, aby tworzyć podklasy danego problemu. Jeśli chcielibyśmy dodać do koszyka grę, która miałaby dodatkowe parametry, takie jak np. ograniczenie wiekowe, to trzeba by rozszerzyć klasę Product. Jednak nie jest to dobra droga, ponieważ wtedy wszystkie produkty, nie ważne jakiego typu by były, dostały informację o ograniczeniu wiekowym.

Rozwiązanie? Bardzo proste. Stworzenie klasy pochodnej GameProduct, która dziedziczy po klasie Product i rozszerza obiekt o parametr limitAge.

O - OCP

Niestety, ale zabrakło czasu na pokazanie tej zasady. No chyba że była omawiana, ale to musiało mnie wtedy zabraknąć.

Damian, jeśli to czytasz, to daj proszę znać, jak w omawiamy przez Ciebie przykładzie omówiłbyś tą zasadę.

Podsumowując 30 minutową prelekcję.

Jestem zadowolony, że na scenie gościliśmy pioniera spotkań programistów JavaScript w Polsce. Przygotowanie prelegenta było na wysokim poziomie. Dobrze mi się go słuchało. Uwielbiam rozmawiać o wzorcach projektowych, dlatego też taka prelekcja jak najbardziej przypadła mi do gustu.

Link do prelekcji: youtube.com/watch?v=iDEXJsigXUY
Kontakt do prelegenta: @varjs

•

Talk #2: Handling Asynchronous Actions in React-Redux Apps [EN] Monika Glier

Monika jako druga prelegentka w historii WarsawJS opowiadała o obsłudze akcji asynchronicznych w aplikacjach Reactowych opartych na Reduxie.

Prelegentka zmieniła swoją ścieżkę kariery 2-3 lata temu. Wcześniej była prawnikiem.

Prelekcja zaczęła się od wprowadzenia w świat asynchroniczności. Jak definicja asynchroniczności została potraktowane powiedzenie:

Asynchroniczne akcje to akcje, które zostaną kiedyś wywołane.
— Monika Glier

Śmieszne wytłumaczenie, ale prawdziwe. Nie ma żadnej kontroli, kiedy funkcje asynchroniczne zostaną wykonane.

Kolejnym krokiem było wytłumaczenie przez Monikę w krótkich słowach czym jest Redux. W dzisiejszych czasach już chyba wszyscy wiedzą co to za biblioteka.

Prosta architektura Reduxa:

użytkownik wykonuje akcje (dispatch action),
ona uruchamia reducer, który zmienia store
a następnie przerenderowany jest component

Tyle. Prosta architektura, ale jakże pomocna. Prawdę mówiąc korzystałem z takiej architektury kilka lat temu, kiedy pracowałem przy projekcie opartym na frameworku Backbone. W dzisiejszych czasach ten framework to już trochę przeżytek, ale ja mocno go chwalę. Można powiedzieć, że “programistycznie” się na nim wychowałem.

Do aplikacji opartych na Reduxie, Monika poleca kilka bibliotek:

redux-thunk - popularność biblioteki spowodowana jest występowaniem woficjalnej dokumentacji Reduxa
redux-saga

Pod koniec prezentacji dowiedzieliśmy się co nieco o testach z użyciem sagi. A na zakończenie Monika porównała wyżej wymienione biblioteki.

Świetna prelekcja, która “zajawiała” tematykę asynchroniczności w Redux-owym świecie tworzenia aplikacji. Thanks Monia!

Link do prelekcji: youtube.com/watch?v=XVCNeUle7ro
Kontakt do prelegenta: @MonikaGlier

•

Panel dyskusyjny

Podczas tego wydarzenia miał miejsce pierwszy w historii WarsawJS panel dyskusyjny podczas którego zadawaliśmy pytania ekspertom, aby wygenerować dyskusję na popularne tematy ze świata JavaScript-u.

Zrezygnowaliśmy z trzeciej prelekcji, aby zobaczyć jak wydarzenie będzie wyglądało razem z panelem. Rozwialiśmy wszelkie wątpliwości, m.in że wydarzenie przerodzi się w kilkugodzinny maraton.

Świetny odbiór ludzi dał mi potwierdzenie, że warto robić takie panele.

Nagranie z panelu jest dostępne w naszych archiwach, jednak z powodu słabej perspektywy (publiczność przysłania ekspertów), materiał nie zostanie opublikowany.

Zastanawiamy się, czy aby nie opublikować samej ścieżki audio.
Jak myślisz, będzie to dobry pomysł?

•

Sponsorzy spotkania

Podziękowania dla firm sponsorskich, które szukają pracowników z obszaru Front-end. Jeśli szukasz pracy napisz do nich, albo do mnie - a ja skieruję Cię do odpowiedniej osoby.

Angular: Jak zamockować dane do usługi HTTP?

Piotr Kowalski — Wed, 31 May 2017 21:56:34 +0000

Mokowałeś kiedyś dane w projekcie Angularowym na wypadek braku komunikacji z back-endem? Jeśli nie to zapraszam Cię do lektury. W kilku krótkich krokach pokazuje Ci jak dodać do aplikacji (od samego początku) możliwość przepięcia zapytań HTTP na odpowiedzi ze statycznych plików JSON.

Zbudowanie projektu

Projekt, który będziemy budować dostępny jest na GitHubie: github.com/piecioshka/test-angular-mocks

Copy + paste

ng new test-angular-mocks
cd test-angular-mocks
# jeśli używasz npm v5+ to warto wykonać:
git add .
git commit package-lock.json -m "Add pkg lock file"
ng serve

Dzięki temu poleceniu, aplikacja zostanie zbudowana i wystawiona do przeglądania za pomocą przeglądarki na adresie: localhost:4200/.

Polecenie uruchamia narzędzie typu “server + watcher”, czyli:

server

daje to, że aplikacja ciągle jest dostępna za pomocą browsera
watcher

narzędzie nasłuchuje na zmiany w dowolnym pliku w projekcie

Niech ciągle będzie włączone non stop. Nie będzie to nam przeszkadzać, a tylko pomagać, ponieważ zawsze będziemy mieli dostęp do aplikacji zaserwowanej dla klienta końcowego.

Uwaga

Pamiętajcie, żeby dać CLI czas na zbudowanie aplikacji. Tym samym, po zapisaniu pliku i odczekaniu niewystarczającej liczby sekund, możesz mieć ciągle starą wersję aplikacji!

Krok 1: Nakreślenie architektury komunikacji z back-endem

Schemat 1.

Krok 2: Implementacja komunikacji między obiektami

Copy + paste

ng g service services/data
git commit -am 'Create directory for services'

Nie chcę od razu w nowym serwisie komunikować się z back-end.

Jeśli bym to zrobił, to nie mam możliwości stworzenia middleware-u, takim jakim jest np. proxy. Dlatego też stworzę nowy serwis który będzie odpowiedzialny za realizację zapytania HTTP.

DataService jest odpowiedzialny za pobranie danych. Jednak nie jest jasno powiedziane skąd te dane powinny pochodzić.

Uważam jest to kwestią samego DataService-u skąd będzie pobierał sobie dane. Może będzie pobierał je z kilku miejsce? Np. może sprawdzić na początku LocalStorage i jeśli w nim nie znajdzie to fallbackiem będzie request HTTP.

Stworzenie nowego serwisu, który będzie odpowiedzialny za komunikację z zewnętrznym API:

Copy + paste

ng g service services/rest
git add .
git commit -am 'Add RestService'

Krok 2.1: Łączenie serwisów

W projekcie istnieją 2 serwisy - należy je połączyć w taki sposób jak na pierwszym schemacie. Do DataService jest wstrzyknięty RestService.

Aby to zrobić należy w konstruktorze DataService zdefiniować zmienną prywatną restService:

import { Injectable } from '@angular/core';
import { RestService } from './rest.service';

@Injectable()
export class DataService {
    constructor(private restService: RestService) { }
}

Krok 2.2: Łączenie komponentu z serwisem

Podobnie jak w przypadku łączenia serwisów i w tym przypadku trzeba zdefiniować w konstruktorze klasy “oczekiwanie” na wybrany serwis.

Chcę doprowadzić do sytuacji nakreślonej w pierwszym schemacie, czyli komponent (w tym przypadku jedyny komponent czyli AppComponent) komunikuje się z DataService, który do dopiero wewnętrznie będzie komunikował się z RestService. Jednak ze względu na to, że DataService sam posiada zależność, to tą zależność trzeba zdefiniować w providerach komponentu AppComponent. W przeciwnym przypadku na stronie pojawi się komunikat

ERROR

ERROR Error: No provider for RestService!
Taki komunikat będzie się pojawiał w DevToolsach (zakładka Console) w aplikacji (localhost:4200/) albo w testach jednostkowych (localhost:9876/) jeśli nie zdefiniujesz wszystkich zależności modułu.

import { Component } from '@angular/core';
import { DataService } from './services/data.service';
import { RestService } from './services/rest.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    DataService,
    RestService
  ]
})
export class AppComponent {
  title = 'app works!';

  constructor(private dataService: DataService) {
    this.dataService.fetch();
  }
}

W zakładce Console okna w którym uruchomiona jest aplikacja powinieneś zobaczyć:

Pusty obiekt stworzony na podstawie klasy `RestService`.

Jeśli jest inaczej, to gdzieś popełniłeś błąd.
Daj mi znać w komentarzu to z chęcią Ci pomogę.

•

Krok 3: Stworzenie zapytania HTTP

Definicja zapytania HTTP będzie w serwisie RestService. Takie też było jego przeznaczenie.

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

import { Observable } from 'rxjs/Rx';

@Injectable()
export class RestService {

  constructor(private http: Http) {
  }

  makeRequest(url: string): Observable<Response> {
    return this.http.get(url)
      .catch((err) => {
        console.error('Request to "%s" failed', url);
        return Observable.throw(err);
      });
  }
}

Teraz aby wykorzystać nowo stworzoną funkcję to w DataService należy ją użyć:

import { Injectable } from '@angular/core';
import { RestService } from './rest.service';

@Injectable()
export class DataService {

  constructor(private restService: RestService) {
  }

  fetch(url: string) {
    return this.restService.makeRequest(url);
  }

}

Ostatni krok to uruchomić funkcję DataService#fetch, aby pobrać dane.

// ...
export class AppComponent {
  title = 'app works!';

  constructor(private dataService: DataService) {
    this.dataService.fetch('/')
      .subscribe((response) => {
        console.log(response);
      });
  }
}

Psst… W plikach z testami (*.spec.ts) należy zaimportować moduł Http, aby testy jednostkowe nie generowały błędów:

// ...
import { HttpModule } from '@angular/http';
// ...

TestBed.configureTestingModule({
  imports: [
    HttpModule
  ],
  // ...
}).compileComponents();

// ...

Krok 4: Pobranie realnych danych

Posłużymy się portalem dla programistów tj. GitHub-em i jego publicznym API skąd pobierzemy wszelkie publiczne dane na temat dowolnego użytkownika

Zgłaszam się na ochotnika!

W takim razie zaktualizujmy URLa do zasobu z którego pobieramy odpowiedź na następujący: api.github.com/users/piecioshka.

Wyświetlony obiekt zawiera odpowiedź z zapytania o publiczne dane nt. mojego konta na GitHubie. Treść (body) jest w formie tekstowej. Lepiej by było, gdyby to była forma JSONa. Trzeba zatem sparsować!

Od teraz będziemy posługiwali się tylko URL-ami do zasobów, które będę zwracać dane w formacie JSON, warto więc wykorzystać natywną funkcję Response#json(). Proponuję, aby w serwisie RestService dodać sparsowanie zwracanego obiektu typu Response na obiekt JavaScript-owy. Wszystko to da się zrealizować za pomocą kilku linijek:

// ...

@Injectable()
export class RestService {
  // ...

  makeRequest(url: string): Observable<Response> {
    return this.http.get(url)
      .map((res) => {
        return res.json();
      })
      // ...
  }
}

Krok 5: Prezentacja danych

Prezentacja to najprzyjemniejsza część w Angularze.

Na podstawie danych w komponencie za pomocą interpolacji albo dynamicznych atrybutów definiujesz w markupie co ma się wyświetlić użytkownikowi.

I tak plik: app.component.html zmienił się na taki:

<h1>
  { { title }}
</h1>

<img [src]="avatar_url" alt=""/>

Atrybut [src] jest w nawiasach kwadratowych ze względu na to, aby przeglądarka nie robiła request-u po obrazek, kiedy jeszcze właściwość komponentu (avatar_url) nie jest ustawiona.

Czas na główny plik, tj. komponent AppComponent - plik app.component.ts.

Na początku przechwytujemy podstawowe klucze, czyli: name i avatar_url. Podczas pobrania tych danych z obiektu response WebStorm podświetli, że w obiekcie tym nie znajdują się takie properties-y.

Aby rozwiązać problem z typami stworzyłem interfejs o nazwie np. GitHubProfileResponse. W którym zdefiniowałem 2 używane przeze mnie pola.

Oczywiście GitHub API zwraca nie tylko te pola, ale na ten moment nie ma sensu wypisywać wszystkich.

Hint: Nowy interfejs musi rozszerzać obiekt Response, ale uwaga! Nie natywny obiekt window.Response, tylko Angularowy. Stąd też importuje w pierwszej linijce obiekt Response.

import { Response } from '@angular/http';

// ...

interface GitHubProfileResponse extends Response {
  avatar_url: string;
  name: string;
}

// ...

export class AppComponent {
  title = '';
  avatar_url = '';

  constructor(private dataService: DataService) {
    this.dataService.fetch('https://api.github.com/users/piecioshka')
      .subscribe((response: GitHubProfileResponse): void => {
        this.title = response.name;
        this.avatar_url = response.avatar_url;
        console.log(response);
      });
  }
}

To tyle z aplikacji. Kiedy przeładujesz stronę (albo automat zrobi to za Ciebie, gdy będzie gotowy) to ujrzysz minimalistyczny mój profil GitHub-owy.

Z testów trzeba (plik app.component.spec.ts) trzeba usunąć 2 ostatnie testy, które sprawdzają istnienie stringa “app works!”. Ten ciąg znaków został usunięty z komponentu, aby nie pokazywał się na starcie przez ułamek sekundy (odpowiedź z GitHub API napisze właściwość title).

Krok 6: Mockowanie!

Wszystko pięknie działa. Z połączeniem do internetu. Teraz chciałbym ostylować mój komponent z kartą profilu. Ups… coś się stało… GitHub padł…

Tak, wiem. To rzadki przypadek ale może tak być. Co teraz? Nie mam danych, aby zasilić komponent więc nie wiem jak będzie wyglądał tekst i jak będzie komponował się przy nim obrazek! Wtopa.

Co należało zrobić kilka kroków wcześniej?

Warto było zapisać odpowiedź z GitHub API, aby teraz kontynuować pracę na poprawnym formacie danych.

Schemat 2.

Krok 6.1: Stworzenie pliku z poprawną odpowiedzią z GitHub API

Cofnijmy się do tego momentu, kiedy GitHub API jeszcze działał i zapiszmy z niego odpowiedź. Na początku stworzę plik src/app/mocks/piecioshka.json i wkleję do niego odpowiedź z GitHub API.

Krok 6.2. Nowe narzędzie: `angular-in-memory-web-api`

Zainstaluję narzędzie angular-in-memory-web-api. Oczywiście proces instalacji doda informację o paczce do dwóch plików:

package.json
package-lock.json

Warto stworzyć z tego rewizję.

Krok 6.3: Stworzenie serwisu, który będzie emulował zapytania HTTP

Za pomocą poniższego polecenia stworzę plik src/app/services/mock.service.ts, który będzie bratem serwisu RestService. Zgodnie z tym co jest zdefiniowane na drugiem schemacie.

Copy + paste

ng g service services/mock

W pliku (tak samo jak RestService) musi istnieć funkcja makeRequest, która będzie zwracała obiekt Observable.

import { Injectable } from '@angular/core';
import { Http, Response, ResponseOptions } from '@angular/http';

import { Observable } from 'rxjs/Rx';

@Injectable()
export class MockService {

  constructor(private http: Http) {
  }

  makeRequest(url: string): Observable<Response> {
    console.log('◉ Mock finished loading: GET "%s"', url);

    return this.http
      .get(url)
      .map((res) => {
        return res.json();
      })
      .catch((err) => {
        console.error('[Mock] Request to "%s" failed', url);
        return Observable.throw(err);
      });
  }
}

Krok 6.4: Wykorzystanie serwisu `MockService`

Teraz kiedy już mamy możliwość podmiany RestService na tzw. zaślepkowy to dodajmy możliwość podmiany w serwisie wraperze, czyli DataService:

import { Injectable } from '@angular/core';

import { RestService } from './rest.service';
import { MockService } from './mock.service';

@Injectable()
export class DataService {

  requestService: RestService | MockService;

  constructor(private restService: RestService,
              private mockService: MockService) {
    // this.useRestService();
    this.useMockService();
  }

  private useRestService() {
    this.requestService = this.restService;
  }

  private useMockService() {
    this.requestService = this.mockService;
  }

  fetch(url: string) {
    return this.requestService.makeRequest(url);
  }

}

Krok 6.5: Stworzenie serwisu do zarządzania pamięcią (in-memory)

W katalogu z mockami należy stworzyć plik src/app/mocks/in-memory.service.ts, w którym będzie definicja wszystkich mockowanych requestów.

Na ten moment jest tylko jeden, który kieruje do pliku obok z rozszerzeniem *.json.

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryService implements InMemoryDbService {
  createDb() {
    return {
      piecioshka: require('./piecioshka.json'),
    };
  }
}

Krok 6.6: Routing

Wszystko fajnie, ale aplikacja dalej nie ma pojęcia o mockach. Należy połączyć główny moduł aplikacji.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { InMemoryService } from './mocks/in-memory.service';

// Paczka, generuje problemy podczas importowania, dlatego zmieniamy ma require.
const mem = require('angular-in-memory-web-api');
const InMemoryWebApiModule = mem.InMemoryWebApiModule;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    // INFO(piecioshka): routing dla mocków
    InMemoryWebApiModule.forRoot(InMemoryService, {
      // Flaga powoduje, że pomimo tego, że są włączone mocki, to
      // kiedy routing nie znajdzie URLa w swojej mapie
      // zmokowanych URLi to wyśle zwykły request HTTP.
      passThruUnknownUrl: true
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Krok 6.7: Problem z `data`

Odpowiedź z mocka jest w kluczu data. Należy to oczyścić! W pliku mock.service.ts należy wpiąć się w chaining:

    // ...
    return this.http
      .get(url)
      .map((res) => {
        const original = res.json().data;
        return new Response(new ResponseOptions({ body: original }));
      })
      .map((res) => {
        return res.json();
      })
    // ...

Krok 6.8: Problem z `require`

Ze względu na to, że domyślna konfiguracja projektu nie pozwala na korzystanie z funkcji require (nie jest znany taki typ, tym samym kompilacja TypeScripta krzyczy) należy dodać do pliku z konfiguracją, tj. src/tsconfig.app.json:

// ...
"types": ["node"]
// ...

Krok 6.9: Problem z testami

Na zakończenie rozwiążę problem: Cannot get name of null, który pojawia się po uruchomieniu testów jednostkowych.

W pliku app.component.ts należy przenieść wywołanie zapytania z konstruktora do nowej funkcji ngOnInit. Jest to funkcja w interfejsie OnInit. Funkcja ta zostanie uruchomiona w odpowiednim czasie.

Wskazówka

Wszystkie funkcje z prefiksem ng* jest to wewnętrzna nomenklatura Angulara dzięki której w szybki sposób wiemy po co jest dana funkcja.

Funkcja ngOnInit uruchomi się kiedy komponent będzie gotowy. W tym momencie uruchomi się hook (zdarzenie znane z Gita), który wywoła funkcję ngOnInit zdefiniowaną w komponencie.

Prezentacja komponentu, który jest zasilany mockiem. Cel osiągnięty 🎉

•

Zakończenie

Na zakończenie dodam trochę słów kluczowych, dzięki którym developerzy szukający w zakamarkach internetu przewodnika jak dodać mockowanie odpowiedzi dla usługi HTTP powinni przyjść do tego artykułu. Sam szukałem kilkadziesiąt minut jak poradzić sobie z tym zagadnieniem i nie znalazłem instrukcji mówiącej wprost jak należy sobie poradzić z mockowaniem.

•

Porady, dla programistów WebStorma

Jak Ci dobrze wiadomo WebStorm indeksuje pliki projektu w celu łatwego i szybkiego nawigowania po plikach. Nie ma żadnego powodu, aby WebStorm indeksował katalog node_modules/. Z tego powodu wyklucz ten katalog klikając na niego prawym przyciskiem myszy i wybierz opcję: Mark Directory as → Excluded.

Katalog node_modules/ powinien zaświecić się na czerwono. Jeśli nie zmienił swojego koloru to prawdopodobnie jest on uznany przez WebStorma za katalog z bibliotekami. Oznacza to, że została przyznana mu dodatkowa rola, która nie pozwala na to, aby stał się excludowany z procesu indeksowania.

Aby wyłączyć dodatkową rolę katalogu node_modules/ należy wejść do ustawień projektu: Preferences → Languages & Frameworks → JavaScript → Libraries, a następnie odznaczyć katalog node_modules/. Teraz na pewno wymieniony przeze mnie katalog będzie określony czerwonym kolorem. Świadczy to o tym, że ten katalog nie będzie brał udziału w indeksowaniu.

Coś za coś. WebStorm działa szybciej (nie ma tylu plików w pamięci), ale za to nie podkreśla znanej składni. I tak:

Koloruje na czerwono nazwy funkcji: expect, it, describe w plikach *.spec.ts:

Aby wyeliminować ten problem kliknij prawym przyciskiem myszy na katalog node_modules/@types a następnie wybierz opcję Mark Directory As → Not Excluded. Tym samym WebStorm przeindeksuje pliki z definicjami typów. Słowa kluczowe w spec-ach powinny po chwili posiadać kolor typowy dla nich.
Koloruje na czerwono nazwy funkcji: catch i map podczas korzystania z Observable:

Przy zapytaniu HTTP będziemy korzystali z funkcji, które zwracają Observable. Dlatego też trzeba dołączyć odpowiednie definicje typów aby WebStorm zaskoczył, że funkcja catch, czy map pochodzą z tego obiektu. Aby to zrobić trzeba ponowić takie same kroki jak przy pierwszym punkcie, tylko jako katalog trzeba wybrać node_modules/rxjs.

Rekomendacja

Jeśli szukasz jakiegoś publicznego API, które zwraca dowolne dane (z dowolnej kategorii tematycznej, np. filmy, finanse) to polecam skorzystać z repozytorium autorstwa Todda Motto - github.com/toddmotto/public-apis.

10 powodów dla których warto chodzić na meetupy

Piotr Kowalski — Mon, 29 May 2017 19:46:06 +0000

Dziś przedstawię Wam kilka argumentów (z mojej perspektywy) stojących po stronie dlaczego warto chodzić ne meetupy. Jeśli nie chce Ci się czytać, to zapraszam Cię na 5-minutowy film:

Co to jest meetup?

To po prostu spotkanie osób zainteresowanych danym tematem. Bardzo często organizowane są takie spotkania dla osób których łączy wspólna pasja. Przykładem niech będzie ten sam język programowania.

Zwykle meetupy, organizowane są co miesiąc. Społeczność tego potrzebuje.

Wydarzenie takie składa się z kilku prelekcji na scenie, gdzie speakerzy mają po 30 minut na wypowiedzenie się na wcześniej zdefiniowany przez siebie temat.

Czy opłaca się chodzić na meetupy, kiedy dopiero zaczynam?

OCZYWIŚCIE! To jest w sumie jedna z podstawowych rzeczy jakie powinieneś zrobić kiedy jesteś na początku swojej kariery jako developer.

Na takich spotkaniach jesteś w stanie poznać community danej technologi / języka. Autorzy bibliotek - którzy pojawiają się często na meetupach - to normalni ludzie, którym zrobi się miło kiedy zbijesz z nimi piątkę i podziękujesz im za trud włożony pracy w stworzenie narzędzia Open Source.

Czy muszę chodzić na meetupy, gdy już pracuje kilka lat w branży?

Praca pracą, ale znajomi i starzy koledzy mają swoją ścieżkę kariery którą warto poznać. Warto czasem wpaść na meetup i dowiedzieć się co tam u nich słychać. Czy może się już przebranżowili i rzygają językiem który Was połączył. Matko, jak to brzmi…

•

Lista 10 powodów dla których powinieneś uczęszczać na meetupy

1. Można… poznać nowe miejsca w mieście

Spotkania organizowane są w różnych miejscach w mieście. Dlatego warto uczęszczać na dowolne meetupy, aby je poznać. Bardzo często każde wydarzenie jest organizowane w innym miejscu, tak aby wybrać najlepsze dla przychodzącej publiczności.

2. Można… coś zjeść i się napić

Wydarzenie nie może odbyć się bez sponsorów. To oni wykładają hajs, aby móc ogłosić swoje oferty pracy. Tym samym firmy fundują catering, aby ludzie mogli zostać dłużej i porozmawiać z potencjalnymi przyszłymi pracodawcami.

3. Można… poznać ludzi o podobnym zainteresowaniu

Jak już wspomniałem na początku, na spotkania przychodzą ludzie, których kręci to samo co Ciebie, dlatego jesteście obecni na tym samym wydarzeniu 😄

To podobieństwo jest świetne z tego powodu że możesz porozmawiać z obcymi ludzi o tym co i Ciebie interesuje. W domu z rodziną nie zawsze tak jest.

4. Można… coś wygrać, np. bilet na konferencję

Aktywni uczestnicy spotkań mogą zyskać coś “materialnego” podczas takich wydarzeń. Bardzo często na meetupach można coś wygrać. Jakąś zniżkę na usługę albo produkt albo np. bilet na konferencję (pozdrowienia dla Michała).

5. Można… “pośmieszkować”

Stare dobre przysłowie mówi, że:

Żarty informatyków są śmieszne tylko dla informatyków.

Zgadzam się. Moja partnerka ni w ząb nie rozumie o co chodzi z tymi domknięciami i “aroł fankszonami”. Niech tak będzie. Nie każdy musi się znać na programowaniu.

6. Można… nauczyć się czegoś (zdobyć wiedzę)

Tematy prelekcji bardzo często poruszają nowości ze świata danej dziedziny programistycznej. Ile to razy dowiedziałem się czegoś nowego podczas meetupu i gdy przyszedłem do domu to wieczór poświęciłem na zapoznanie się z tą nowinką.

Nie tylko prelekcje uczą, ale i ludzie którzy uczęszczają na takie wydarzenie w roli uczestników. Podczas rozmów kuluarowych (tj. po części oficjalnej) wychodzi najwięcej istotnych rzeczy zw. z językiem albo technologią. Takie smaczki, które są wynikiem czyjegoś wielogodzinnego zmagania się z tematem.

7. Można… poczuć się jak wśród swoich

Chyba coś mi się pomyliło… w sumie ten punkt można podciągnąć pod “poznanie osób o podobnym zainteresowaniu”. Faux pas 😄

8. Można… znaleźć pracodawcę

Sponsorzy spotkań szukają pracowników, dlatego jeśli chcesz odbyć rozmowę rekrutacyjną nie umawiając się na nią, to śmiało wpadaj na meetupy gdzie znajdziesz kierowników działów do których prowadzona jest rekrutacja.

Bez wcześniejszych zapowiedzi możesz porozmawiać z kilkoma firmami i wybrać tą która Ci pasuje. Podczas takich rozmów kuluarowych nie musisz się wcale spinać. W końcu to nieformalna rozmowa przy lemoniadzie.

NIE LUBIĘ STRESU

Osobiście strasznie nie lubię, kiedy podczas rekrutacji moi rozmówcy się stresują. Ze swojego doświadczenia wiem, że często wtedy nie pokazuje się faktycznie tego jacy jesteśmy fajni.

9. Można… znaleźć kolegę do projektu

Masz swój startup? Chcesz go rozwijać? Wpadaj na meetup i szukaj fanatyków podobnych do Ciebie, którzy pomogą Ci w zarabianiu kasy.

10. Można… pokazać swoją wiedzę jako prelegent

Bycie prelegentem to świetna rola. Co prawda musisz przygotować się do takiej roli. Bardzo często potrzebujesz kilkadziesiąt godzin przed prelekcją aby stworzyć super slajdy, które odwzorują to, co masz do przekazania publiczności w sposób jasny i przejrzysty.

* 11. BONUS

Jako bonus sprzedam Wam jeszcze jeden argument. Podczas meetupów można znaleźć swoją drugą połówkę - swoją towarzyszkę albo towarzysza życia.

To niesamowite, ile argumentów przemawia, za tym, aby udać się na meetup.

Wybierz się i Ty. Na dowolny meetup, albo na taki, który spotyka się z Twoimi zainteresowaniami. Na portalu Meetup.com jest ogromnie długa lista organizacji, które tworzą meetupy.

•

Śledztwo trwa!

Podczas twitterowej rozmowy z moim przyjacielem Tomkiem, uświadomiłem sobie, że lista argumentów “za” jest o wiele większa. Dziękuję @Koori_.

WarsawJS Meetup #31

Piotr Kowalski — Sat, 27 May 2017 17:28:39 +0000

Rozpoczynamy kolejną dziesiątkę spotkań dla programistów języka JavaScript. Tym razem mieliśmy 2 prelekcje o React + Redux a trzecim tematem były mikroserwisy. Zapraszam do zapoznania się z moimi przemyśleniami na temat prelekcji i całego wydarzenia.

Invitation

Tym razem nagrywaliśmy zapowiedź w miejscu, gdzie przeprowadzaliśmy warsztaty.

Informacja

Przypominam, że organizacja WarsawJS od grudnia 2016 uruchomiła nową inicjatywę, tj. WarsawJS Workshop, czyli comiesięczne szkolenia praktyczne z języka JavaScript (wliczając biblioteki i frameworki).

Niestety, nie byłem w najlepszej kondycji psychofizycznej tego dnia i zabrakło mnie na filmie. Zamiast mnie pojawiła się prelegentka - Martyna, która była trzecią dziewczyną speakerką na warszawskiej scenie.

Zapraszam w imieniu organizatorów WarsawJS.

Po obejrzeniu zapowiedzi, zapraszam Cię do zapoznania się z moimi przemyśleniami na temat prelekcji, które miały miejsce podczas tego wydarzenia.

•

Talk #1: React na start - informacje w pigułce dla zainteresowanych rozpoczęciem zabawy z ReactJS [PL] Martyna Nowocień

Prelekcja była skierowana dla osób, które chcą rozpocząć naukę biblioteki React.js. Martyna przekazała kilka wskazówek:

nie używać biblioteki jQuery w projektach react-owych

Ma to sens, ponieważ to React.js jest warstwą, która ogarnia View w architekturze MVC.
dla początkujących developerów lepszym wyborem będzie nauka prostej biblioteki jaką jest React.js a nie kobyły jakim jest Angular

Tutaj ciężko mi się zgodzić. To wszystko uzależnione jest od tego w jaki sposób osoba się uczy. Jeśli np. początkujący developer posiadałby mentora, który wytłumaczyłby Angulara to nie ma znaczenia, że jest to ogromny framework.

Angular (v4.x) jest szybszy od React.js zwłaszcza na urządzeniach mobilnych, ale Angular.js (v1.x) już jest wolniejszy podczas renderowania dużej ilości elementów.

Więcej ofert pracy jest na developerów ze znajomością Angulara niż React.js
Martyna podkreśliła, że około 2 / 3 wszystkich ofert to Angular.

Aby dowiedzieć się najnowszych rzeczach warto obserwować profil twitterowy Dana Abramova.

Prelegentka poleca Code Cartoon, w celu zapoznania się z architekturą Reacta i Reduxa.

Moim zdaniem

Świetna prelekcja. Oby częściej zdarzały się takie z uśmiechem na twarzy speakera!

Link do prelekcji: youtube.com/watch?v=-WDh7l58TVg
Kontakt do prelegenta: @Geekchick_Marty

•

Talk #2: Redux - a practical example [EN] Illarion Koperski

Zalecenia wynikające z prelekcji

Nie istnieje domyślna konfiguracja dla Reduxa.
Wykorzystać Immutable.js.
Użyć propozycji rozwiązań zdefiniowanych w Ducks.

Prelekcja niezrozumiała dla developerów bez doświadczenia. Jeśli jednak posiadasz minimalne obycie z Reduxem to idealnie wpasowujesz się w target prelekcji.

Illarion polecał rozszerzenie do przeglądarki Google Chrome - Redux DevTools.

Redux + RsJS = Epics
Don’t use Sagas, use Epics.

Link do prelekcji: youtube.com/watch?v=QmI-zH8pi5M
Kontakt do prelegenta: @illarionvk

•

Talk #3: Microservices on the frontend [EN] Tomasz Wiszniewski

Tomasz przedstawił aplikację present.now.sh, która jest zegarkiem odmierzającym czas. W miarę upływu czasu kolor tła się aktualizuje.

Aplikacja jest napisana z wykorzystaniem WebComponent-ów.

Link do prelekcji: youtube.com/watch?v=u53ov_Jm4uo
Kontakt do prelegenta: @thetomekwi

•

Sponsorzy spotkania

Konferencja: Code Europe 2017

Piotr Kowalski — Thu, 25 May 2017 21:55:47 +0000

Sezon na konferencje czas rozpocząć! Chciałem Ci dziś przedstawić moje wrażenia z pierwszej (w tym roku) konferencji w której uczestniczyłem.

Mowa tutaj o konferencji wymienionej w tytule, czyli Code Europe ‘17. Na początku zaznaczę, że post nie jest sponsorowany, aby nie było wątpliwości. Na blogu przekazuję moją i tylko moją opinię.

Oficjalne logo konferencji Code Europe 2017

Z różnych źródeł dowiedziałem się, że konferencja miała miejsce już w tym roku w dwóch innych miastach: Kraków (26 kwietnia, ICE Kraków) i Wrocław (23 maja, Hala Stulecia).

Konferencja Code Europe, ma swoją drugą edycję, tzw. wiosenną. W zeszłym roku odbyła się pierwsza edycja. I była to edycja jesienna.

Prelekcje na których byłem obecny

Jak każda konferencja i ta chwali się, że posiada NAJLEPSZYCH prelegentów i że jest NAJWIĘKSZA i w ogóle “the best”. Oczywiście, nie są to cechy w żaden sposób mierzalne, więc każda posiada prawo aby tak pisać 😄

•

Poniżej przedstawiam Ci moje komentarze w sprawie co poniektórych prelekcji na których dane mi było uczestniczyć. Ogólnie podczas jednego dnia prelekcji odbyło się prawie 50 prezentacji.

Jak rozwiązać tak dużą liczbę speech-y w tak krótkim czasie? Zrównoleglenie.

Tutaj pojawia się problem, bo co jeśli pochodzisz z takiego środowiska, że interesują Cię >2 prelekcje, a Ty możesz być obecny tylko na jednej?

1. Going offline with append-only logs [EN] Mathias Buus

Pierwsza prelekcja. Byłem spóźniony i niewiele zrozumiałem. Przepraszam!

2. Programming healthcare well [EN] Harold Thimbleby

Prelekcja, która nie podnosiła na duchu. Podczas niej dowiedziałem się, że bardzo często przyczyną śmierci pacjentów są bugi w oprogramowaniu zainstalowanym na specjalistycznych urządzeniach medycznych.

Bardzo często winą za te bugi obarczane są pielęgniarki. Znany jest przypadek, kiedy pielęgniarka została wyrzucona z pracy z powodu śmierci pacjenta. Nie wytrzymała takiego napięcia i popełniła samobójstwo.

Smutne.

3. Ramda JS - First Step [PL] Karol Rogowski

Karol opowiadał o programowaniu funkcyjnym na prostych przykładach, gdzie taki styl programowania ma jakiś sens.

Sam język JavaScript idealnie nadaje się do pisania w stylu funkcyjnym, ze względu na występowanie tzw. domknięć. Co to jest domknięcie? O tym będzie osobny wpis na blogu. Kiedy? za kilka tygodni.

Prelegent wykorzystywał bibliotekę “ramba” do tego, aby móc składać funkcje w prosty sposób, aby zachwycić publikę.

4. The Things Git Can Do (that none of the GUIs have ever told you about) [EN] Enrico Campidoglio

Uwielbiam Gita ❤️ Napisałem już o nim kilka artykułów. Moją pierwszą w życiu wygłoszoną prelekcją był speech o tym właśnie narzędziu.

Enrico pokazał niskopoziomowe polecenia jakie występują w Gicie. Świetna prelekcja!

5. Introduction to frontendless: UI as a service [PL] Tomasz Skowroński

Tomasz, nasz warszawski speaker, który na podstawie komunikatora Slack opowiadał o plusach i minusach rozwiązań wypracowanych w tym komunikatorze.

Bardzo konkretna prelekcja. Samo mięcho. IYKWIM.

6. PWAssemble—Instant and Customized Progressive Web App Demos, Because Only Seeing is Believing [EN] Thomas Steiner

Jedna z moich ulubionych prelekcji na tegorocznej edycji Code Europe, była o Progressive Web App.

Tematyka dla mnie dość mocno znana. Opisywałem na swoim blogu moją przygodę związaną z PWA. Artykuł dostępny tutaj.

Chciałem pomóc zwiększyć font, a okazało się że niektórzy mnie nagrywają.

Człowiek w dzisiejszych czasach, nie może komuś pomóc, bo już zostanie nagrany. Dzięki @ckyambitny.

7. Design Systems Engineering: Scaling User Interfaces [EN] Christoph Reinartz

Bardzo interesująca prelekcja na temat strony internetowej TRIVAGO. Kris opisywał kroki jakie jego zespół wykonał, do tego, aby wyjść z roku 2000 do 2017.

Podsumowanie

Jak zawsze jestem pozytywnie nastawiony do wszelkiego rodzaju wydarzeń, podczas których mogę poszerzyć swoją wiedzę o front-endzie oraz móc porozmawiać z innymi fanatykami języka JS.

Podczas konferencji ekipa WarsawJS wysłała swojego przedstawiciela, aby godnie reprezentował organizację.

•

After

Przyjęło się, że po konferencji organizowany jest “after”. Dla tych, którzy nie wiedzą co to jest, to mówię, że to takie nieformalne spotkanie przy “lemoniadzie” już poza venue konferencyjnym, tylko gdzieś indziej, gdzie będą odpowiednie warunki do biesiadowania.

Ten “after” był dla mnie pod pewnym względem niesamowity. Poznałem na żywo legendę polskiej sceny blogerskiej - Piotra Nalepę, który przyjechał z Katowic do stolicy na konferencję FrontTrends 2017 - odbywała się ona w tym samym czasie co omawiana dziś przeze mnie “Code Europe 2017”.

Zobacz, jak "overflow-wrap" może Cię uratować!

Piotr Kowalski — Tue, 23 May 2017 21:57:49 +0000

Tekst wychodzi poza kontener? Nie martw się. Jest na to lekarstwo. Znajduje się ono w apteczce w napisem “CSS3”. Poznajmy dziś czym jest overflow-wrap.

Kiedyś (w CSS2) reguła ta nazywała się word-wrap, jednak przyszły czasy nowej specyfikacji i powstał pomysł zmiany nazwy. Czy słusznie?

Jak działa reguła “overflow-wrap”?

Najlepiej będzie jak sam zobaczysz.

See the pen on CodePen.

Jakie są jej możliwości?

Występują dwie opcje:

zwykła prezentacja liter, znak po znaku, wiersz zostanie złamany po wystąpieniu białego znaku

[SELECTOR] {
    overflow-wrap: normal; /* domyślnie */
}

łamanie wiersza przed znakiem, który miałby być wyświetlony poza kontenerem

[SELECTOR] {
    overflow-wrap: break-word;
}

Więcej do przeczytania na stronie.

Wskazówka

Opisywaną regułę świetnie używa się z inną, tj. z hyphens: auto;, która troszczy się o to, aby po zawinięciu wiersza dostawić znak myślnika, oznaczającego przeniesienie wyrazu. Efekt, którego zostaliśmy nauczeni w podstawówce jest zrealizowany!

Czy mogę używać?

Wsparcie jest szerokie. Można powiedzieć, że każda przeglądarka wspiera łamanie wiersza, bo jeśli nie działa overflow-wrap: break-word (może używamy wersji przeglądarki z poprzedniej epoki), to zawsze możemy użyć word-wrap: break-word i uniknąć ewentualnych nieprzyjemności.

Na potwierdzenie wkleję tutaj oryginalny tekst ze specyfikacji

For legacy reasons, UAs must treat word-wrap as an alternate name for the overflow-wrap property, as if it were a shorthand of overflow-wrap.

Specyfikacja

Jeśli chciałbyś poczytać specyfikację tej reguły, to jest ona opisana w standardzie CSS3. Btw. wiesz, że to ostatnia wersja CSS?

Nie będzie CSS4.

Konsorcjum W3C przyjęło zasadę, że feature-y w CSS będą rozwijały się samodzielnie. Tym samym, nie powstanie nowa wersja CSS, która mogłaby je agregować.

W sumie to ciekawy zabieg. Interesujące jest to, że ścieżka rozwoju CSS jest taka jak przed chwilą opisałem, a ścieżka rozwoju JavaScript taka, że co roku musi powstać nowa wersja.

Ciekawe co z HTMLem? 😄 (Na te pytanie odpowiedział Commander w komentarzu pod tym artykułem. Thanks man!)

Performance

Jeśli martwisz się wydajnością, bo może chcesz ustawić tą regułę w locie, to masz problem. Generuje ona wszystkie 3 zachowania:

Layout
Paint
Composite

Więcej na ten temat na stronie CSS Triggers autorstwa Paula Lewisa.

Historia

Tym razem odpuszczam historię na temat tej reguły. Jednak, jeśli jesteś zainteresowany to zapraszam na tą stronę, gdzie możesz poczytać na ten temat.

Jak wyświetlić liczbę osób lajkujących nasz fanpage?

Piotr Kowalski — Sun, 21 May 2017 21:38:45 +0000

Dziś, podczas kolejnych warsztatów z programowania w JavaScript organizacji WarsawJS, wpadłem na pomysł, aby wyświetlać podczas całego dnia liczbę lajków, którymi obdarzony jest profil organizacji WarsawJS.

Obecnie jest blisko okrągłej liczby 1500 lajków. Może podczas warsztatów magiczna liczba zostanie przekroczona?

Moim zdaniem pomysł jest interesujący. Jeśli chcesz się dowiedzieć jak poszła mi implementacja takiego aplikacji, to zapraszam do lektury.

•

Misja

Cel był prosty:

Zaprezentować w formie dynamicznej liczbę lajków fanpage-a WarsawJS.

Dodam, że aby zrealizować takie zadanie, trzeba być administratorem fanpage-a, bo inaczej nie zna się parametru appId oraz appSecret.

Co musiałem zrobić, aby osiągnąć cel?

1. Facebook dla programistów

Wpisałem jakieś programistyczne frazy do Google-a, aby podpowiedział jak mam osiągnąć cel. Wyszukiwarka nakierowała mnie na stronę developers.google.com.
2. Zignorowanie dokumentacji

Zaznaczam, że olałem Getting Started, tylko szukałem jakiegoś kodu, bo szkoda mi było inwestować więcej czasu na ten “szybki” i “prosty projekt”.
3. Stworzenie aplikacji na Facebook-u

Przeczytałem pobieżnie kilka artykułów. Na wszystkich było napisane, że pierwsze co musisz zrobić to stworzyć aplikację fejsbukową. Stworzyłem więc taką. Oczywiście nazwa nie ma żadnego znaczenia.

Na stronie developers.google.com, klikasz w prawy górny róg.
4. Credentiale

Po rejestracji aplikacji, w głównym panelu aplikacji jesteś w stanie dostrzec następujących parametrów:
- App ID
- App Secret
Aby uzyskać App ID, musisz wpisać nazwę aplikacji.
5. Osadzenie kodu fejsbukowego

W projekcie, gdzie chcesz zaprezentować liczbę lajków, bo osadź na początku kod Facebook-owy. Stwórz plik: facebook-setup.js:

W sekcji poniżej jest ciekawostka zw. z osadzeniem.

(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    // js.src = "//connect.facebook.net/en_US/sdk/debug.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

6. Zaczynamy kodować!

Stwórz plik: main.js, gdzie zdefiniujesz stałe:

const appId = 'XXX';
const appSecret = 'XXX';
const getOAuthAccessTokenURI = `https://graph.facebook.com/oauth/access_token?client_id=${appId}&client_secret=${appSecret}&grant_type=client_credentials&debug=all`;

const pageId = 'warsawjs';
const getEngagementURI = `https://graph.facebook.com/${pageId}/?fields=engagement&debug=all`;

7. Pierwsza komunikacja

Tworzysz funkcję fbAsyncInit, w której inicjalizujesz Facebook API za pomocą FB.init

window.fbAsyncInit = function () {
    FB.init({
        appId: appId,
        autoLogAppEvents: true,
        xfbml: true,
        version: 'v2.9'
    });
}

8. Zdobycie Access Token

Aby zdobyć klucz należy wykonać proste zapytanie HTTP. Bycie w posiadaniu takiego klucza, umożliwi Ci większy dostęp do Facebook API.

window.fbAsyncInit = function () {
    // ...
    Promise.resolve()
        .then(() => {
        return window.fetch(getOAuthAccessTokenURI);
        })
        .then((response) => {
            return response.json();
        })
        .catch((err) => {
            console.error(err);
        });
}

9. Zdobycie Zaangażowanie

O co chodzi z “zaangażowaniem” (eng. engagement)? Nie wiem dlaczego taka nazwa, ale ta właściwość definiuje liczbę lajków fanpage-a. Interesujące.

/**
* Funkcja, do komunikacji z Facebook API.
*
* @author Piotr Kowalski
* @param {string} url
* @param {Object} opts
*/
function fetchFacebookService(url, opts = {}) {
    return new Promise((resolve, reject) => {
        FB.api(url, opts, (response) => {
        if (response.error) {
            return void reject(response.error);
        }
        resolve(response);
        });
    });
}

window.fbAsyncInit = () => {
    // ...
    .then((response) => {
        return fetchFacebookService(getEngagementURI, response)
    })
    .then((response) => {
        return response.engagement.count;
    })
    .then((likes) => {
        console.log(likes); // 1497 # mamy to!!!
    })
    // ...
}

10. The END

Posiadasz już liczbę lajków do swojego fanpage. Wykorzystaj to w dobrych celach!

Wskazówki

Czytaj Getting Started od razu!

Nie sugeruj się odpowiedziami ludzi na forum odnośnie tego jak coś zrobić z Facebook API. Informacje te są zwykle przestarzałe.

Większość usług wymyga podania Access Tokenu.

Developerskie usprawnienia

Flaga w URLach, zwiększa delikatnie możliwości programistyczne debug=all

Co robi ten parametr? Nie wiem, ale jest developerski to go używam. Dajcie znać w komentarzach po co on jest. Osobiście takiej informacji nie znalazłem.
Dołączanie głównego pliku w procesie osadzenia Facebook API:
js.src = "//connect.facebook.net/en_US/sdk/debug.js";

Od razu w DevToolsach widzę jak działa Facebook API. Super!

Pomysły

Spróbuję zrobić paczkę w npm-ie, która by potrzebowała credientiali, a zwracała liczbę lajków strony, której jest się właścicielem.

Dlaczego User-Agent zaczyna się od "Mozilla 5.0..."?

Piotr Kowalski — Fri, 19 May 2017 07:56:47 +0000

Czy zastanawiałeś się kiedyś, dlaczego User-Agent w każdej przeglądarce rozpoczyna się od Mozilla/5.0 ...? Jaki związek ma program Internet Explorer z Firefoxem? Może ktoś tutaj współpracuje? Zaraz wszystkiego się dowiesz.

Historia

Jeśli znasz historię języka JavaScript, to na pewno kojarzysz taką nazwę jak Mosaic. Jeśli nie, to zapraszam Cię do zapoznania się z nią w artykule, którego napisałem kilka tygodni temu.

W skrócie.

W 1993 roku została opublikowana pierwsza na rynku przeglądarka wyświetlająca obrazki. Aplikacja nosiła nazwę NCSA Mosaic i została opublikowana przez bardzo ważny organ, który mocno przyczynił się do rozwoju IT, czyli National Center for Supercomputing Applications (NCSA).

Jej User-Agent zaczynał się od “Mosaic/0.9”.

“Mosaic” - nazwa aplikacji
“0.9” to oczywiście wersja

Rok później, tj. w 1994, powstała nowa przeglądarka, której nazwa kodowa to “Mozilla”, czyli “Mosaic Killer Godzilla”. Nazwa została wymyślona przez jednego z programistów zespołu projektowego przeglądarki, Jamiego Zawińskiego, który był fanem Godzilli.

O tym wszystkim informuje w komentarzu na portalu Quora, jeden z założycieli firmy Netscape - Lou Montulli. Lou był odpowiedzialny za multi-platformowy kod sieciowy i to on zmienić User-Agent z “Mosaic” na “Mozilla”.

Nowa przeglądarka miała za zadanie zdeklasować obecnego lidera i podbić rynek przeglądarek.

Rok później weszła ona na czołową pozycję wśród programów, dzięki którym można serfować po internecie.

Po drodze nazwa została zmieniona na Netscape Navigator, aby uniknąć podobieństwa do NCSA Mosaic. I słusznie. Lepiej rozwiać wszelkie wątpliwości, co by użytkownicy nie byli zmieszani.

Ważna informacja

Nazwa programu się zmieniała, jednak User-Agent pozostał.

Z tego powodu User-Agent pierwszej publicznej wersji Netscape Navigator zaczynał się od “Mozilla/2.02”.

Dlaczego prefix się nie zmienił?

Gdy rynek został podbity przez jedną przeglądarkę, a Ty chcesz zrobić nową, to masz dwie drogi w zdefiniowaniu User-Agenta:

stworzyć zupełnie nowy format, tworząc tym samym zamieszanie
albo skopiować od aktualnego lidera i lekko zmodyfikować “pod siebie”

Wszyscy kolejni producenci nowych aplikacji do przeglądania internetu stwierdzili, że nie ma sensu tworzyć zupełnie nowej składni i tak wykorzystywali UA obecnie najpopularniejszej przeglądarki.

Wykorzystanie wówczas najpopularniejszego User-Agenta, niosło za sobą pewną korzyść. Właściciele stron serwowali dla nie-Mozillowych klientów okrojoną wersję strony. To jest kolejny argument, dla którego lepiej podszyć się pod najpopularniejszą przeglądarkę i prezentować użytkownikom normalną wersję.

Rozwiązanie Microsoftu

Niektóre przeglądarki np. Internet Explorer dodawały do User-Agenta wyraz “compatible”, po to, aby zasygnalizować, że przeglądarka jest kompatybilna z obecnie najlepszą, ale nią de facto nie jest.

Ciekawy pomysł 😄

I tak pierwsza publiczna wersja Internet Explorer 3 uruchomiona na Windows 95, miała User-Agent-a w postaci: Mozilla/2.0 (compatible; MSIE 3.02; Windows 95).

Ciekawostka

Internet Explorer w wersji 4.5 były opublikowany tylko na Mac-i.
Jego User-Agent to: Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC).

Ale dlaczego akurat “5.0”?

Po drodze nazwa przeglądarki Netscape Navigator zmieniła się dwukrotnie. Na początku Netscape Communicator, a potem na po prostu Netscape.

Firma Netscape Communications, autorzy wtenczas najpopularniejszej przeglądarki, stworzyła silnik do renderowania stron o nazwie Gecko.

Zaimplementowali ten silnik do kolejnej wersji przeglądarki w wersji 5.0. Silnik ewoluował, przeglądarka też, jednak ta pierwsza liczba w User-Agent już nie.

Następnie nazwa przeglądarki została zmieniona na Firefox. Wersjonowanie przeglądarki było zapisywane jako osobna (dodatkowa) liczba.

Przykład

Mozilla/5.0 (Windows NT 5.1; rv:15.0) Gecko/20100101 Firefox/15.0.1.

W tym konkretnym przypadku, wersja przeglądarki to “15.0.1”.

Nie ma sensu zmieniać teraz budowy User-Agenta, ponieważ trzeba by było zaktualizować cały software sieciowy, który analizuje ten string. Dlatego też prefix “Mozilla/5.0” zostanie już z nami na zawsze.

•

Bibliografia

Więcej na temat historii User-Agentów możecie przeczytać na blogu Nicolasa Zakasa. Polecam również poczytać historię User-Agent–w przeglądarki Firefox. Kolejną interesującą lekturą jest historii User-Agentów przedstawiona w zabawny sposób przez jednego z nas - programistów webowych.

WarsawJS Meetup #30

Piotr Kowalski — Wed, 17 May 2017 21:31:19 +0000

Zgodnie z opisem w tym poście, dziś kolejny wpis, na temat spotkania warszawskich programistów JavaScript, czyli WarsawJS Meetup!

Tutaj znajdziesz link do profilu wydarzenia na Meetup, gdzie możesz dowiedzieć się więcej szczegółów na temat organizacji. Warto również zapoznać się komentarzami, w których uczestnicy spotkania często prowadzą interesujące dyskusje.

Invitation

Kolejna zapowiedź nagrywana w domu na greenboxie. Zastosowałem się do uwagi którą dostałem po poprzedniej zapowiedzi, aby czasami zejść z kadru i pokazać jakąś przebitkę. Faktycznie, kiedy ciągle widoczna jest “gadająca głowa”, to film może okazać się nudny.

Jak Ci się podoba montaż? Jest akceptowalne, prawda? 😄

•

Talk #1: Pogromcy mitów: HTTP/2 i wydajność stron WWW [PL] Piotr Stapp

Piotr, jako prelegent dał mi niesamowitą zagwozdkę. Jako pierwsza osoba, która wyszła na scenę w ogóle się nie stresował. Absolutnie nic nie było po nim widać, że obserwuje go tyle ludzi w sali oraz że jest nagrywany a przekaz jest transmitowany na cały świat.

Odnośnie części merytorycznej, mogę powiedzieć, że prelekcja jest obowiązkowa dla wszystkich developerów sieciowych. Nieważne kim jesteś front-endowcem czy back-endowcem, powinieneś obejrzeć co czeka nas w przyszłości (w sumie to już co jest obecnie standardem) tj. HTTP/2. Technologia Server Pushy znacznie przyspiesza ładowanie strony, co nakłada się na odbiór prze użytkownika.

Link do prelekcji: youtube.com/watch?v=tkjPCuuLhtc
Kontakt do prelegenta: @ptrstpp950

•

Talk #2: Firebase - store and sync data with NoSQL cloud database [PL] Robert Gurgul

Jedna z krótszych prelekcji jakie miały miejsce podczas WarsawJS Meetup. Robert w kilkanaście minut przedstawił swój projekt, który stworzył w połączeniu z bazą danych Firebase.

Ze swojej strony polecam wykorzystanie Firebase podczas hackathonów, albo innych tego typu imprez, gdzie mocno liczy się czas realizacji.

Link do prelekcji: youtube.com/watch?v=A2_VwBpofYY
Kontakt do prelegenta: @rgurgul

•

Talk #3: Retro JS talk: modern browser communications [EN] Robert Kawecki

Podczas prelekcji mogliśmy się dowiedzieć, że akronim PHP bierze się od słów PHP HyperText Preprocesor. Mamy tutaj do czynienia z rekursywnym skrótem. Wskazuje to jasno, że kiedy PHP oznaczało co innego. Wiecie co?

PHP - Personal Home Page

Podczas prelekcji mogliśmy dowiedzieć się o kolejnych etapach nawiązywania komunikacji między klientem a serwerem w świecie webowym.

Link do prelekcji: youtube.com/watch?v=yyhnNJNKhng
Kontakt do prelegenta: @rkaw92

•

Sponsorzy spotkania

Szukasz pracy? Napisz do następujących firm. One ciągle prowadzą rekrutację programistów, różnych języków programowania w różnym stopniu.

•

Podsumowanie

Jako organizator WarsawJS Meetup, serdecznie dziękuję wszystkim za przybycie.

Jako bloger serdecznie dziękuję za przeczytanie tego wpisu.
Za 2 dni wracamy do regularnego pogłębiania naszej wiedzy merytorycznej.

DeviceLightEvent w ogóle i w szczególe

Piotr Kowalski — Mon, 15 May 2017 21:57:29 +0000

Pierwsze moje zetknięcie z tym API wywołało u mnie szok! Mogę korzystać z kamery w sposób niezauważalny dla użytkownika! Jak się później okazało nie korzystam z kamery, a jedynie z czujnika, który jest zamontowany obok kamery.

Kamień z serca. Odetchnąłem z ulgą i pozbierałem zęby z podłogi.

Film

Nie chce Ci się czytać? Spoko. Rozumiem to. Specjalnie dla Ciebie nagrałem film, na którym opowiadam przez niecałe 5 minut, jak dzisiejszy feature może pomóc Ci w tworzeniu lepszego User Experience w Twoich aplikacjach webowych!

Co to jest DeviceLightEvent?

Kilka lat temu pojawiła się specyfikacja - Ambient Light Events, która opisała jak może polegać komunikacja z czujnikiem natężenia światła, który znajduje się obok kamery w laptopach.

Pytanie do publiczności

Zastanawiam się, czy event będzie działał na komputerach PC (jednostki centralne). Jeśli czytelniku korzystasz z takiego sprzętu i posiadasz przeglądarkę wymienioną w sekcji wsparcie, to daj znać w komentarzu, czy Twoja zewnętrzna kamera posiada taki czujnik generując tym samym omawiany event.

Przykładowy kod

window.addEventListener('devicelight', (evt) => {
    console.log(evt.value);
});

Komunikacja wygląda następująco.

Zapisujesz się na event devicelight na obiekcie window.
Czekasz aż zmienić się poziom natężenie światła - warto zakryć kamerę palcem, albo poświecić w niego latarką z telefonu.
W handlerze eventu dostaniesz payload będący obiektem zdarzenia DeviceLightEvent, który będzie posiadał wartość value, pod którym będzie kryła się liczba luksów.

Bracie, a co to jest ten `lukx` (`lux`)?

W układzie SI, czyli “Międzynarodowym Układzie Jednostek Miar”, znajduje się definicja luksa, który to jest jednostką natężenia oświetlenia.

Nazwa “luks” pochodzi od łacińskiego słowa “lux” oznaczającego “światło”.

Jak ja bym obsługiwał dane, które dostanę ze zdarzenia

0 (zero) lux - czarno - layout powinien być maksymalnie ciemny, aby nie psuć komfortu pracy bez oświetlenia
< 50 lux - ciemno w pomieszczeniu, warto więc przepiąć się na ciemniejszy layout
50+ lux - jasno, śmiało możesz przepinać layout w styl dzienny
3000+ lux - tak jasno, że można oślepnąć, gdy będzie się dłużej patrzeć na taki obiekt, który świeci światłem o takim natężeniu. Rzadko kiedy spotkasz takich użytkowników.

Przykłady z życia wzięte

Ile lux-ów ma światło na co dzień?

50 lux - Natężenie światła w pokoju dziennym
80 lux - Natężenie światła w biurowym korytarzu / toalecie
320–500 lux - Naświetlenie w biurze
1000 lux - Natężenie światła w typowym studiu TV
10000 - 25000 lux - Światło dzienne (lecz nie bezpośrednie światło słoneczne)
32000 - 100000 lux - Promieniowanie słoneczne

Dane pobrane z Wikipedia.

Wsparcie

Korzystając z serwisu caniuse.com można dowiedzieć się, że Ambient Light API wspierane jest przez następujące przeglądarki:

Edge

wsparcie na poziomie 100% (pełne wsparcie)
Firefox 22+

tylko macOS
Firefox For Android 52+

wsparcie na poziomie 100% (pełne wsparcie)

Jak widać, jest to technologia, której dziś możemy zobaczyć swego rodzaju embrion. Malutkie wsparcie nie pozwala cieszyć się z tego feature-a. Szczególnie, kiedy najpopularniejszy browser, tj. Google Chrome, nie zaimplementował specyfikacji czujnika światła.

Po co mi to?

Ten event otwiera drogę na kolejne doznania użytkownika polepszające odbiór Twojej strony internetowej. Jeśli layout Twojej strony jest jasny (podobnie jak mój), to użytkownicy nocni dostaną “po gałach”, kiedy będą przeglądać internet o tej porze dnia.

Myślę, że świetnym podejściem jest wygaszenie jaskrawego białego i wykorzystania innych kolorów ze skali szarości, aby wyeliminować ten problem, że gdy w nocy wejdzie się na YouTube-a to nagle cały pokój się świeci.

Demo 🎉

Instrukcja

Jak możesz zobaczyć na samym dole strony w sekcji “Ostatnie projekty”, pojawił się nowy projekt, który posiada obsługę zdarzenia devicelight.

Jeśli jesteś użytkownikiem korzystającym z dowolnej przeglądarki opisanej w sekcji wsparcie to zapraszam Cie do skorzystania ze specjalnie przygotowanej aplikacji, która na podstawie odczytów z czujnika natężenia światła zmienia kolory teksty i tła.

EOL w prostych słowach

Piotr Kowalski — Fri, 12 May 2017 23:50:06 +0000

Każdy plik tekstowy składa się z linii. Każda linia kiedyś się kończy. Ale skąd system wie, że linia się skończyła? Istnieje ZNAK specjalny, który informuje system, że znaki w linii właśnie się skończyły.

Problem

I tym znakiem jest… no właśnie. Nie ma jednego znaku cross-platformowego, który by informował, że linia została “zakończona”. Wszystko ze względu na problem ze zróżnicowaniem poglądów na to, co to jest zakończenie linii.

Wyróżniamy 3 tryby EOL (end-of-line):

CR - Carriage Return

znak końca linii m.in. na systemie: macOS (do wersji 9)

reprezentacja w tablicy ASCII: \r
LF - Line Feed

znak końca linii m.in. na systemach: Linux oraz macOS (od wersji 10)

reprezentacja w tablicy ASCII: \n
CR LF - Carriage Return Line Feed

znak końca linii m.in. na systemach: MS-DOS oraz MS Windows

reprezentacja w tablicy ASCII: \r\n

Istnieje standard opisujący znaki w systemach komputerowych. Nazywa się ASCII.
To w nim zdefiniowane jest mapowanie znaków na liczby (7 bitowe).

Specyfikacja znaku końca wiersza

Niestety, ale w standardzie ASCII nie ma opisanego znaku końca linii w systemach plików. Jest za to opisany standard znaku końca linii w komunikacji sieciowej.

W ubiegłym wieku, kiedy były ustalane protokoły sieciowe, przyjęto że wszystkie komunikaty sieciowe będą kończyły się sekwencją znakową CR LF. I bardzo dobrze! Tzn. nie jestem zwolennikiem tej sekwencji, ale cieszę się z powodu przyjętego standardu.

Jak podejrzeć jakie jest zakończenie linii?

MS Windows

Świetnym sposobem na pogląd znaków specjalnych w pliku jest wykorzystanie sposobu opisanego tutaj, czyli posłużenie się narzędziem Notepad++.

W edytorze dostępna jest opcja View all characters dzięki której wszystkie (również te specjalne) znaki zostaną wyświetlone.

Dr. Palaniraja Copyright @ 2017

Linux & macOS

Na systemach unix-owych podglądanie zakończenia linii odbywa się za pomocą narzędzia od (man pages):

OD(1)                   BSD General Commands Manual                  OD(1)

NAME
    od -- octal, decimal, hex, ASCII dump
SYNOPSIS
...

Aby przeczytać plik znak po znaku, wywołaj następujące polecenie:

Copy + paste

od -c .gitignore

Oczywiście zamiast pliku .gitignore wpisz ścieżkę do pliku jaki chcesz przeczytać. Narzędzie wyświetli KAŻDY ZNAK osobno (będą spore przerwy między znakami).

Wynik wywołania powyższego polecania załączam poniżej:

0000000    n   o   d   e   _   m   o   d   u   l   e   s   /  \n   n   p
0000020    m   -   d   e   b   u   g   .   l   o   g  \n
0000034

Jak widać w listingu, znaki specjalne zakończenia linii zostały zastąpione na reprezentację czytelniejszą dla użytkownika, czyli \n.

Różnica w Git-cie

Różne znaki końca linii powodują - poza niespójnością - też inne problemy. Osobiście uważam, że największy problem polega na wyświetlaniu różnic w systemach kontroli wersji, które źle skonfigurowane potrafią wyświetlić, że linijka została zmieniona, podczas gdy nie została.

Wszystko to się dzieje, z tego powodu, że pliki w systemie kontroli wersji zapisane są w formacie LF. Edytory na systemie MS Windows, podczas dowolnej zmiany automatycznie konwertują znaki końca linii na CRLF.

…czyli de facto nastąpiła pewna zmiana, dlatego też system kontroli wersji wyświetlił rożnicę.

Ignorowanie zakończenia linii w Git

Jak się ustrzec wyżej opisanego problemu? Bardzo łatwo!

Najpopularniejszy system kontroli wersji posiada opcję konfiguracyjną odnośnie znaków końca linii: core.autocrlf.

Opcja core.autocrlf ustawiona na true oznacza, że wszystkie pliki w powinny mieć zakończenie linii w stylu CRLF. Jeśli nie mają, odbędzie się konwersja znaków końca linii.
```
  git config --global core.autocrlf true
```

Uwaga

Po ustawieniu tej opcji na systemie macOS (domyślny jest LF) a następnie edycji dowolnego pliku, przed wyświetleniem różnicy otrzymamy komunikat:
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory.
Spowodowane jest to konwersją znaku końca linii z LF na CRLF.

Gdy ustawimy core.autocrlf na input to żadna konwersja nie zostanie dokonana. Jest to domyślne ustawienie.
```
  git config --global core.autocrlf input
```

Istnieją dwie drogi normalizacji zakończenia linii:

systemowa

ustawienie per użytkownik komputera (tylko w jednym pliku)

albo konfiguracja zapisana w pliku ~/.gitconfig albo ~/.gitattributes
projektowa

ustawienie per projekt (liczba plików z konfiguracją == liczbie projektów)

albo konfiguracja zapisana w pliku .gitattributes w katalogu projektu

Polecana przeze mnie ścieżka to “systemowa”.

Nie ma sensu konfigurować per projekt. Nie widzę żadnych profitów z tego powodu, a tylko minus, że w każdym projekcie musi znaleźć się plik .gitattributes.

Istnieją jeszcze inne opcje konfiguracyjne:

Copy + paste

git config --global core.eol lf|crlf|native

git config --global core.safecrlf true|false|warn

Nie będę się tutaj nad nimi pochylał. Chętnych zapraszam do manuala;

git help config

•

Normalizacja za pomocą odpowiednich narzędzi

Czy istnieję możliwość konwersji między CRLF a LF? Oczywiście! Poniżej przedstawiam jak poradzić sobie z konwersją między tymi końcami linii na dwóch systemach: macOS oraz Linux.

macOS

Poniższe polecenia będą dostępne na systemie macOS po instalacji odpowiedniego narzędzia za pomocą polecenia: brew install dos2unix.

Z `CRLF` na `LF` (macOS)

Konwersja z trybu Windows na tryb unix-owy:

Copy + paste

dos2unix README.md

Z `LF` na `CRLF` (macOS)

Konwersja z trybu unix-owego na tryb Windows:

Copy + paste

unix2dos README.md

Linux

Na systemie Linux aby skonwertować plik można wykorzystać narzędzie sed:

Z `CRLF` na `LF` (linux)

Copy + paste

sed -e 's/\r$//' inputfile > outputfile

Z `LF` na `CRLF` (linux)

Copy + paste

sed -e 's/$/\r/' inputfile > outputfile

Więcej przykładów jak skonwertować pliki znajduje się tutaj

•

Historia end-of-line

W archiwum RFC opisana jest historia ustalania znaku zakończenia linii.

Jeśli chciałbyś poczytać to wejdź tutaj.

Czym jest dla mnie BEM?

Piotr Kowalski — Thu, 11 May 2017 21:58:56 +0000

Dziś miałem przyjemność rozmawiania z kilkoma osobami na temat techniki definiowania klas w CSS. Rozważanie polegało na wyborze, który sposób na tworzenie ich jest lepszy.

Do wyboru były dwa:

na rympał
albo metodologia BEM

Który jest lepszy według mnie?

Jak wygląda sposób “na rympał”?

Ten styl tworzenia klas CSS polega na tzw. zasadach w stylu “tak mi się wydaje”. Nie ma tutaj żadnej konwencji nazewnictwa ani specjalnie żadnych reguł. W zespole projektowym, który przyjął taką strategię tworzenie layoutów może okazać się nie lada wyzwaniem z tego powodu, że każdy pisze po swojemu, dlatego też developer nie czuje większej potrzeby oceniania kodu CSS kolegi z zespołu.

Wskazówka

dash-case (kebab-case) to “jedyna” słuszna konwencja nazywania elementów w CSS. Przykład: menuItemActive → menu-item-active

Tworzenie layoutów w ten sposób ma swoje wady i zalety. Przedstawię Ci te, które pojawiły się w mojej głowie podczas dzisiejszych pogawędek.

Zalety

pełna dowolność w nazewnictwie

Wady

nieskończona ilość zagłębień w preprocesorach, np. SASS
brak konwencji nazewnictwa klas (menu-active-item vs menu-item-active)
można się zgubić w kodzie dużego projektu

Dlaczego kod CSS oraz HTML jest pomijany podczas Code Review?

Zasady w CSS?

Oh tak! To nie jest tak, że ten język jest na tyle nieważny, że nie warto stosować, żadnych zasad. W komplikowanych layotowo aplikacjach liczba kodu w plikach ze stylami jest ogromna.

Jak można zapanować na tym chaosem który powstaje w kodzie? Odpowiedź jest prosta. Można skorzystać w dowolnej techniki, np. BEM.

Co to jest BEM?

Technika to metodyka, która charakteryzuje się tym trzema warstwami. Jej nazwa pochodzi od słów: Block, Element, Modifier.

Block - dla mnie jest to komponent - taki byt, który można wydzielić do osobnego pliku i używać w wielu miejscach. Przykład: .person
Element - to dziecko komponentu. Przykład: .person__title
Modifier - to po prostu cecha elementu, informująca o jego obecnym stanie. Przykład: .person__title--active

Zalety

ograniczona ilość zagłębień w preprocesorach, np. SASS - kod staje się dłuższy zamiast szerszy
istnieje konwencja nazewnictwa klas
rzadko kiedy można pogubić się w kodzie dużego projektu
kiedy spoglądam na klasę to wiem - na podstawie jej budowy - z czym mam do czynienia
zapewniony namespacing, tj. każdy “block” jest osobnym komponentem chyba, że używasz Angular-a, to nie jest to duży plus ze względu na Components Styles

Wady

nie ma pełnej dowolność w nazewnictwie
liczba wartości w atrybucie class w elementach HTML jest dosyć duża chyba, że używasz Angular-a i pluginu angular-bem, który skróca zapis

•

Nie samym BEMem żyje człowiek!

Nie jestem fanem BEMa. Szczerze, to napisałem w nim jeden projekt (góra dwa). Zachęcam jednak do wykorzystania go, aby na własnej skórze przekonać się jak przedstawia się tworzenie layoutu.

Przy nazewnictwie masz zestaw kilku reguł, które musisz przestrzegać. Czasami zasady tylko przeszkadzają w wytwarzaniu oprogramowanie, ale w większości dają on więcej plusów. Ważne jest, aby wybrać sobie dowolne reguły i ich przestrzegać, co by się nie zaskakiwać 😄

Inne znane metodyki wspomagające tworzenie CSS:

OOCSS - Object Oriented CSS
ACSS - Atomic CSS
oCSS - organic Cascade Style Sheet
SMACSS - Scalable and Modular Architecture for CSS

WarsawJS Meetup #29

Piotr Kowalski — Tue, 09 May 2017 21:41:26 +0000

Pierwsze w tym roku spotkanie WarsawJS! Fiu fiu! Ostatnio miałem przerwę w pisaniu podsumowań ze spotkań warszawskiej społeczności JavaScript-owej. Czas to nadrobić! Jestem w plecy o 5 spotkań, a żeby nadgonić to, co 4 artykuł będzie podsumowaniem ze spotkania. I tak, aż do wyrównania. Potem pozwolę sobie na publikację raz na miesiąc, czyli z każdym tego typu spotkaniem.

Invitation

Jesteście świadkami mojego pierwszego nagrania zapowiedzi w zaciszu domowego ogniska! Tak, dokładnie. Pomimo tego, że tło mi się zmienia, to materiał nagrany był nocą (widać delikatne zmęczenie na twarzy).

Zapowiedz zaczyna się podsumowaniem jak wyglądały spotkania (a raczej prelegenci) z minionego roku. Kolejny rok comiesięcznych spotkań za nami. To już kolejny rok. Czas leci. Fajnie!

W materiale podziękowałem restauracji Państwomiasto za ponad 2-letnie goszczenie nas w swojej lokalizacji. Będziemy zawsze ciepło wspominać naszą pierwszą lokalizację. Dziękujemy 🎉

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Jak stworzyć prostą grę HTML5 w 4 lata [PL] Andrzej Mazur

Podczas prelekcji Andrzeja mogliśmy dowiedzieć się jak wygląda jego historia z tworzeniem gier w HTML5. Kilka lat temu powstał pomysł na grę Wizard Quest. Pierwsze realizacje nei były udane i dopiero 4 lata później udało się Andrzejowi skończyć. Po drodze zrealizował on 8 innych gier, które nauczyło go lepszej tworzenie gier od strony developera, ale jak i od strony wydawcy.

Na zakończenie dowiedzieliśmy o jednej ważnej zasadzie podczas tworzenia gier: KISS (Keep It Simple, Stupid). Frazes oznacza, aby redukować liczbę funkcjonalności gry do jak najmniejszym fragmentów.

Andrzej jest założycielem meetupu Gamedevjs, na który - jako fan tworzenia gier - serdecznie zapraszam!

Link do prelekcji: youtube.com/watch?v=98jOICWu2Gw

•

Talk #2: Kontraktowanie API ze Swagger’em - korzyści [PL] Piotr Błaszczak

Swagger, czyli uzgadnianie API między front-endem oraz back-endem w najpopularniejszym formacie definicji danych tj. w JSON. Opisujemy zasoby HTTP wraz ze wspieranymi metodami np. GET, POST, PUT.

Tematyka bardzo przyjemna, w sytuacji dużej aplikacji. Moim zdaniem to jest jedyny typ aplikacji (tj. jego wielkość), ponieważ w mały projekcie po prostu szkoda czasu na uzgadnianie z uwagi na szybką modyfikację kodu.

Polecane przez Piotrka narzędzia:

Świetne narzędzie do pracy, aby móc rozwijać back-end albo front-end samodzielnie, tj. jedna strona nie musi czekać na drugą. Wystarczy stworzyć plik z mockami.

Link do prelekcji: youtube.com/watch?v=ZvLC-_VwxAg

•

Talk #3: Graficzny Edytor Grafu z wykorzystaniem TypeScript + SVG + D3.js [EN] Marcin Pieciukiewicz

Podczas prelekcji dowiedzieliśmy jakich technologii Marcin użył do zbudowania prostego edytora grafu. Zostały wymienione następujące technologie:

TypeScript
D3.js
SVG
SCSS - jako preprocesor do CSS

Aplikacja działająca dostępna jest tutaj: marpiec.github.io/GraphEditor/

Największym plusem w tworzeniu takiej aplikacji było wykorzystanie biblioteki D3.js, która zarządzała warstwą prezentacji.

Link do prelekcji: youtube.com/watch?v=vHewTfzlGfo

•

Sponsorzy spotkania

•

Podsumowanie

Event oceniam bardzo dobrze. Cieszę się, że w taki sposób zaczęliśmy ten nowy rok spotkań w nowej lokalizacji i w nowym - większym pomieszczeniu.

Do zobaczenia na kolejnych spotkaniach WarsawJS Meetup!

Jak przerobić stronę na Progressive Web App?

Piotr Kowalski — Sun, 07 May 2017 10:00:00 +0000

Kilka dni temu postanowiłem, że spróbuję przerobić tego bloga na aplikacje typu PWA (Progressive Web App). Chciałbym w tym artykule opowiedzieć Ci co to jest za typ aplikacji, opisać jego wady i zalety oraz przedstawić Ci jaką drogę przeszedłem, aby ten blog stał się właśnie taką aplikacją.

•

Co to jest PWA?

Aplikacja typu PWA charakteryzuje się tym, że spełnia zasady dostępności oraz bezpieczeństwa oraz cechuje się takimi głównymi warunkami:

Wykorzystywanie protokółu HTTPS
Serwowanie treści bez połączenia do sieci, tzw. obsługa trybu Offline

Wskazówka

Aby mieć “co” wyświetlać w trybie offline, trzeba na początku “to” mieć, dlatego też aplikacja musiała być wcześniej uruchomiona normalnie, aby pobrać treść.
Dostosowanie się do szerokości urządzenia, tj. obsługa responsywności

Pełna checklista

Aby zakwalifikować aplikację jako PWA, musi ona spełnić większość punktów z checklisty. Poprzez większość, mam na myśli spełnienie warunków na poziomie 75%. Liczba ta, zdefiniowana jest w specyfikacji narzędzia Lighthouse.

Lighthouse

Lighthouse to narzędzie stworzone przez Google przeznaczone do audytu strony internetowej, sprawdzając kilkadziesiąt warunków które musi ona spełniać aby być zakwalifikowana jako aplikacja PWA.

Kategorie audytu:

“Good” - Wynik zawiera się w przedziale 75-100
“Average” - Wynik zawiera się w przedziale 45-74
“Poor” - Wynik poniżej < 45

Przykładowe aplikacje

Lista przykładowych aplikacji PWA znajduje się tutaj. Na szczególne wyróżnienie zasługują:

pokedex.org/ - nie wiesz dlaczego?
m.aliexpress.com/ - mobilna wersja popularnego sklepu

Efekt przejścia na PWA możesz zobaczyć tutaj. W krótkich słowach sklep zanotował wzrost o 104% tzw. współczynnika konwersji, badającego ile osób się zarejestrowało po kliknięciu w reklamę. Imponujące!
guitar-tuner.appspot.com/ - nastrojenie gitary
2048-opera-pwa.surge.sh/ - tej gry chyba nie trzeba przedstawiać

Wskazówka

Jak przerobisz swoją stronę na PWA to możesz zgłosić ją do tej listy tworząc Pull Request w tym projekcie.

Zaczynamy!

Dobra, dosyć tej teorii!
Zacznijmy wreszcie przerabiać stronę internetową na aplikację PWA!

Nieoficjalne logo Progressive Web Apps

Wynik audytu mojego bloga przed zmianami wygląda następująco. Nie jest źle, ale nie można powiedzieć, że strona w takim stanie jest aplikacją typu PWA.

Tak wygląda wynik pracy Lighthouse bez żadnych modyfikacji bloga.

Krok 1. Instalacja wtyczki Lighthouse

Korzystając z Google Chrome zainstaluj wtyczkę Lighthouse.
Możesz to zrobić na 2 sposoby:

wejść stronę główną narzędzia, tj: developers.google.com/web/tools/lighthouse/
albo wejść do sklepu i ją zainstalować.

Rekomenduję pierwszy sposób z uwagi na to, że na stronie domowej tego narzędzia jest o nim wiele ciekawych informacji.

Krok 2. Zapoznanie się z przewodnikiem

Google jako autorzy pomysłu aplikacji PWA przygotowali pewnego rodzaju zadanie - przewodnik, które pokazuje jak krok po kroku dodać do prościutkiej aplikacji podstawowe elementy tak, aby stała się ona Progressive Web App.

Zanim zabierzesz się za modyfikacje swojej aplikacji spróbuj przejść przez ten przewodnik. Masz na to 30 minut. Czas start!

Krok 3. Dodanie manifest-u

Kolejne kroki opierają się na modyfikacji kodu źródłowego aplikacji.

Krok 3.1. Stworzenie pliku `/manifest.json`

Pierwszą rzeczą jaką trzeba dodać do projektu jest manifest.json. Plik ten opisuje aplikację poprzez definicję m.in. jej nazwy oraz ikonek w różnych rozmiarach.

Dobra rada

Dobrą praktyką jest, aby ten plik był w katalogu głównym projektu (/).

Zawartość pliku manifest.json przed uzupełnieniem. Skopiuj ten kawałek kodu i uzupełnij wpisując dane odpowiednie dla Twojej aplikacji.

{
    "short_name": "",
    "name": "",
    "icons": [
        {
            "src": "",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "start_url": "/?utm_source=homescreen",
    "background_color": "",
    "theme_color": "",
    "display": "fullscreen"
}

Zobacz jak wygląda manifest.json dla tego bloga.

Krok 3.2. Wskazanie ścieżki w pliku `/index.html`

Po tym jak plik został stworzony, musisz poinformować przeglądarkę, gdzie on się znajduje. Mówiłem, że nie musi to być katalog główny, jednak dla spójności warto aby był.

Poniższą linijkę dodaj w sekcji <head> aktualizując ścieżkę do manifestu.

<link rel="manifest" href="/manifest.json"/>

Krok 4. Dodanie Service Workera

Drugim bardzo ważnym składnikiem aplikacji PWA jest Service Worker, który odpowiedzialny jest za zapisywanie plików aplikacji do Cache Storage-a.

Kiedy plik został pobrany przez przeglądarkę, to Service Worker zapisuje go do cache-a, aby w przyszłości wykorzystać, kiedy użytkownik nie będzie miał połączenia z siecią.

Przyjęta przeze mnie strategia nazywa się Network falling back to cache, która zdefiniowana jest tutaj. Strategia ta polecana jest przez autora posta - Jake-a - jako najlepsza do stron zawierających artykuły, czyli pięknie pasuje do aplikacji blogowej.

Zasady strategii `Network falling back to cache`

Pobierz plik z serwera i jeśli się uda to zapisz do cache-a.
Jeśli próba pobrania pliku się nie powiedzie to spróbuj pobrać go z cache-a.
Jeśli i ta próba się nie powiedzie, to dopiero wtedy użytkownik nie dostanie żądanej treści.

Plusy

użytkownik ma większą szansę, że otrzyma to o co prosi ponieważ jest stworzony fallback zapytania HTTP na cache
użytkownik zawsze dostaje najnowsze wersje plików (prosto z serwera) jeśli ma połączenie z internetem

Minusy

na początku zawsze jest zapytanie do serwera, które może trwać kilka sekund
użytkownik nie dostaje treści zapisane w cache-u pomimo tego, że ją posiada

Jak wygląda działania Service Workera w połączeniu z CacheStorage-em?
Copyright by Google @ 2017

Do kiedy ważne są pliki w cache-u?

Nie zdefiniowałem, żadnego limitu cache-a. Traktuję go jako fallback, czyli takie dobro, które benefitem dla czytelników bloga.

Ile jest miejsca w cache-u?

Chrome - < 6% wolnego miejsca na dysku
Firefox - < 10% wolnego miejsca na dysku
Safari - < 50MB
IE10 - < 250MB
Edge - w zależności od dysku

Krok 4.1. Stworzenie pliku `/service-worker.js`

Stwórz plik service-worker.js o następującej treści. Oczywiście zaktualizuj listę plików, które chcesz aby były zapamiętane przez przeglądarkę użytkownika.

const CACHE_NAME = 'wpisz-tutaj-dowolny-string';

// List of files which are store in cache.
let filesToCache = [
    '/',
    '/styles/main.css',
    '/images/logo.png',
    '/scripts/main.js'
];

self.addEventListener('install', function (evt) {
    evt.waitUntil(
        caches.open(CACHE_NAME).then(function (cache) {
            return cache.addAll(filesToCache);
        }).catch(function (err) {
            // Snooze errors...
            // console.error(err);
        })
    );
});

self.addEventListener('fetch', function (evt) {
    // Snooze logs...
    // console.log(event.request.url);
    evt.respondWith(
        // Firstly, send request..
        fetch(evt.request).catch(function () {
            // When request failed, return file from cache...
            return caches.match(evt.request);
        })
    );
});

Zobacz jak plik service-worker.js wygląda na blogu.

Krok 4.2. Dołączenie go w `/index.html`

Proponuję dodać go do pliku głównego pliku, który na pewno będzie w cache-u więc pomimo tego, że nie będzie połączenia to i tak Service Worker uruchomi się.

<script>
const PATH = '/service-worker.js';

let isServiceWorkersSupport = ('serviceWorker' in navigator);

if (isServiceWorkersSupport) {
    console.log('Will service worker register?');
    navigator.serviceWorker.register(PATH).then(function () {
        console.log("Yes it did.");
    }).catch(function (err) {
        console.log("No it didn't. This happened: ", err)
    });
}
</script>

Po dodaniu manifestu oraz Service Workera uruchomiłem Lighthouse, aby zobaczyć o ile procent blog stał się bardziej aplikacją typu PWA. Zaskoczyłem się pozytywnie. Wystarczy dodanie dwóch prostych plików i już moja strona internetowa stała się aplikacją typu PWA!

Tak wygląda wynik pracy Lighthouse po dodaniu manifestu oraz Service Workera.

Krok 5. Inne opcje

Dodanie manifestu oraz Service Workera nie spowodowało, że blog osiągnął wynik 100/100 w audycie przeprowadzonym przez narzędzie Lighthouse.

Musiałem jeszcze zrobić kilka rzeczy.

Krok 5.1. Kolor górnego paska

Lighthouse wymienił, że w aplikacji brakuje zdefiniowanego koloru paska z adresem do strony. Nie mam żadnego telefonu z Androidem, aby sprawdzić jak strona wygląda na tym systemie. Wybrałem kolor górnego kontenera i użyłem go do definicji tego parametru.

<meta name="theme-color" content="#96b3bc"/>

Krok 5.2. Kolor tekstu - odpowiedni kontrast

Kolejnym problemem, był niepoprawny kontrast między kolorem tła a kolorem tekstu. Wiadomo, że szary tekst na białym tle wygląda strasznie. Całe szczęście znam ten problem i staram się, aby tekst zawsze dobrze się prezentował.

Jednak nie wszystkie elementy strony były przystosowane i współczynnik kolorystyczny nie był akceptowalny.

Lighthouse korzysta z algorytmu zdefiniowanego przez Lea Verou w projekcie contrast-ratio. Świetny projekt, który pokazuje jaki jest stosunek kolorystyczny tła oraz fontu.

Dobra rada

Na filmie poniżej znajdziesz więcej informacji na temat Web Content Accessibility Guidelines (WCAG) 2.0. Film opublikowany w piątek, 5 maja.

Lighthouse zakłada, że kontrast między tłem i kolorem tekstu musi być większy od przyjętej normy przez “contrast-ratio”, czyli 4.5. Niestety więc, musiałem zmienić błękit tła kontenera nagłówkowego na ciemniejszy niebieski.

Zdefiniowałem kolor tła na #2A7DB3 oraz tekstu white. Aplikacja “contrast-ratio” pokazała, że wynik takiej pary to 4.5, jednak Lighthouse dalej krzyczało.

Wynik narzędzia doa badania kontrastu.

Ustawiłem więc jeszcze ciemniejszy background. Tym razem na #2a6fa5. Koloru fontu nie zmieniałem, czyli dalej jest white. Tym razem ocena 5.4

To było na tyle, jeśli chodzi o kolory. Lighthouse zaakceptował taki stan rzeczy!

Krok 5.3. Opóźnij ładowanie skryptów

Wykorzystałem atrybut async w tagu <script> to tego, aby nie blokować rysowania layoutu poprzez ładowane skrypty, które i tak nie inicjowały żadnej zmiany w DOM-ie.

Czas na testy!

Tak wygląda wynik pracy Lighthouse po wprowadzeniu wszystkich opisanych ulepszeń.

Dlaczego nie 100/100?

Brak paginacji, czego efektem jest długa lista postów na stronie głównej. Nie chcę robić paginacji, z tego powodu, że na 1 stronie mogę znaleźć wszystkie napisane przeze mnie artykuły. Uważam to za duży plus mojego bloga.

Problem, który nie został jeszcze rozwiązany.

To, że strona nie jest dostępna po upływie 50ms tylko po 120ms nie wydaje mi się dużym problemem. Może na komórkach czeka się trochę dłużej na załadowanie tej długiej listy, ale trudno.

Profil wybranego przeze mnie losowego postu jest oceniany przez Lighthouse 100/100, więc misję uważam za zakończoną z pełnym sukcesem 🎉

Profil pierwszego lepszego postu jest oceniony przez Lighthouse-a maksymalną oceną, co mnie osobiście niezmiernie cieszy. Człowiek, zawsze czuje się spełniony, kiedy widzi, że osiągnął szczyt!

A co ze stroną domową?

Przerabiając bloga na aplikację typu PWA postanowiłem, że i moja strona domowa, również powinna być progresywna. Jej też się coś od życia należy 😄

Wykorzystując moje obecne doświadczenie, to po kilkudziesięciu minutowej pracy, strona domowa jest w 100% #PWA. Efekt możesz zobaczyć na obrazku poniżej.

Najlepszy możliwy wynik - 100%.

•

Jak wyświetlić aplikacje PWA które już odwiedziłem?

Na zakończenie pokażę Ci jak wyświetlić wszystkie strony które odwiedziłeś, a który korzystają z Service Worker-ów. Prawdopodobnie te strony są aplikacjami typu PWA.

Źródła

udacity.com/course/intro-to-progressive-web-apps–ud811 - darmowy kurs pt. “Intro to Progressive Web Apps” by Google
jakearchibald.com/2014/offline-cookbook/ - olbrzymi artykuł o trybie Offline, pt: “The offline cookbook” (oryginał tego)
medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12 - artykuł o PWA by Addy Osmani
github.com/webpack/webpack-pwa - plugin do Webpacka, który dodaje 2 wymagane pliki (manifest oraz Service Worker) do aplikacji na nim opartej

Narzędzia Świata: webpack-unused

Piotr Kowalski — Fri, 05 May 2017 21:58:35 +0000

Kilka miesięcy temu, nagrałem film o takim narzędziu, które pokazuje listę plików nieużywanych w projekcie opartym na Webpacku. Przyszła pora, aby opisać to narzędzie w serii “Narzędzia Świata”.

Webpack - a co to?

W erze zmieniających się co kilka tygodni narzędzi JavaScript-owych od kilku miesięcy pojawił się lider w kategorii budowania aplikacji.

Webpack to narzędzie, które buduje pliki “produkcyjne” na podstawie plików developerskich. Jego podstawowe cechy to:

minifikacja kodu, tj. usuwanie komentarzy (w trybie produkcyjnym)
obfuskacja zmiennych, tj. skracanie nazw do literowych (w trybie produkcyjnym)
daje możliwość łatwej transpilacji kodu, np. z kody pisanego w TypeScript do prostego JavaScript-u w standardzie ECMAScript 5
daje możliwość łatwej konfiguracji preprocesorów do CSS-ów.

Moje projekty

Jestem autorem kilku projektów pomocniczych:

github.com/piecioshka/boilerplate-babel-webpack - jeśli chcesz zacząć kodować w ES2015 bez spędzania czasu na konfiguracji zerknij na ten projekt
github.com/piecioshka/test-typescript-webpack - projekt, w którym skonfigurowałem Webpacka do tego, aby pisać aplikację w TypeScript
github.com/piecioshka/test-flowtype-webpack - testowy projekt, w którym został skonfigurowany FlowType
github.com/piecioshka/training-resolve-webpack-build-error - zagadka do rozwiązania

Nudny artykuł, zobacz film!

Jeśli nie chce Ci się czytać, ani testować nowego narzędzia, możesz poświęcić niecałe 4 minuty zobaczyć jak ja wykorzystuję “webpack-unused” w nowo stworzonym projekcie.

•

Jak działa webpack-unused?

Krok 1. Stworzenie projektu

Copy + paste

mkdir test-project
cd $_
mkdir src/
touch src/main.js
echo "console.log('main.js')" > src/main.js
touch src/unused.js
echo "console.log('unused.js')" > src/main.js

Krok 2. Budowanie projektu

Copy + paste

touch package.json
vi package.json

Zawartość pliku package.json:

{
    "name": "test-project",
    "scripts": {
        "build": "webpack"
    }
}

Krok 3. Konfiguracja Webpacka

Copy + paste

touch webpack.config.js
vi webpack.config.js

Zawartość pliku webpack.config.js:

module.exports = {
    entry: "./src/main.js",
    output: {
        filename: "./bundle.js"
    }
};

Krok 4. Instalacja i uruchomienie Webpacka

Copy + paste

npm install --save-dev webpack
npm run build

Aplikacja powinna zostać pomyślnie zbudowana, tj. powinien powstać plik bundle.js w głównym katalogu.

Krok 5. Instalacja i uruchomienie `webpacka-unused`

Zainstaluj globalnie webpack-unused, ponieważ nie jest to narzędzie związane z żadnym projektem, więc nie ma argumentu, aby tego nie zrobić.

Copy + paste

npm install -g webpack-unused

Dodaj zadanie, które będzie budowało aplikację i uruchamiać dzisiejsze narzędzie:

Copy + paste

vi package.json

{
    "name": "test-project",
    "scripts": {
        "build": "webpack"
        "build:display-unused-files": "webpack --json | webpack-unused"
    }
}

Uruchom polecenie, które zbuduje aplikację, a wynik z procesu budowania przekaże do omawianego narzędzia:

Copy + paste

npm run build:display-unused-files

Polecenie wyświetli listę plików, które nie są używane:

./src/unused.js

Chroń pliki konfiguracyjne projektu

Piotr Kowalski — Wed, 03 May 2017 21:57:59 +0000

Chciałem dać Ci dziś poradę, która jest wynikiem mojego wczorajszego rekonesansu tego bloga za pomocą najpopularniejszego narzędzia w dobie wszechogarniającego internetu tj. przeglądarki.

Rekonesans

…czyli rozpoznanie. Po przeczytaniu pewnego artykułu o bezpieczeństwie, postanowiłem sprawdzić jak wygląda na tym tle moja najpopularniejsza aplikacja.

Testy

Rekonesans polega na zebraniu jak największej liczby informacji, które aplikacja (albo server) udostępnia. Dlatego bardzo ważne jest, aby wysyłać użytkownikom, czyli de facto światu zewnętrznemu jak najmniej informacji, co by nie informować wszystkich o podatnościach systemu informatycznego.

Definicja

Metoda określająca zbieranie danych na temat “celu” na podstawie udostępnianych informacji nazywa się banner grabbing.

Zadałem sobie pytanie: co ja udostępniam światu? czy nie za dużo?

Pierwsze testy wykazały, że popełniłem niesamowity błąd, do którego chcę Ci się przyznać, abyś to wykorzystał i nauczył się na moim błędzie.

Zagrożenie

W lutych napisałem, że projekt nie równa się aplikacji. Miałem rację. Nic się w tym aspekcie nie zmieniło, ale chyba dopiero do mnie coś dotarło…

Czy wrażliwe pliki projektu nie są "przypadkiem" widoczne w aplikacji udostępnionej na świat?

•

Jekyll i jego zasady

Jeśli używasz tego popularnego systemu do blogowania tak jak ja, to świetnie, tylko pamiętaj o wykluczeniu listy plików z budowania katalogu _site, który zostanie wystawiony na zewnątrz!

Wskazówka

Tutaj możesz poczytać o opcji exclude.

W konfiguracji, ista wykluczonych plików z budowania paczki zawierała tylko jedną pozycję - katalog node_modules/. A co z resztą?

Wyżej wymienione pliki (oraz inne) były udostępnione na zewnątrz, były dostępne dla internetu.

Na ten moment, opublikowane wrażliwe pliki już nie istnieją i zwracają kod HTTP 404.

Copy + paste

curl -I https://piecioshka.pl/webpack.config.js

HTTP/1.1 404 Not Found
Date: Wed, 03 May 2017 21:04:06 GMT

Niby nic strasznego, ale…

Tworząc projekt bloga, specjalnie nie chciałem upubliczniać jego kodu źródłowego z powodów bezpieczeństwa, tj. mam w tym projekcie pliki, które nie powinny być publicznie dostępne. Jakie to pliki? Nie ważne.

Sądziłem, że prywatne repo na GitHubie załatwia sprawę. Myliłem się.
Ważna jest również dystrybucja projektu z zamkniętymi źródłami.

•

Metoda głębokiego ukrycia

Istnieje pewna metoda, która niby zabezpiecza dostęp do Twoim plików, tj. metoda “głębokiego ukrycia”, czyli stworzenia skomplikowanej struktury katalogów, aby istniejące w nich pliki, nie były dostępne poprzez przypadkowe wpisanie adresu URL.

W moim przypadku technika ta, powinna nazywać się “płytkie ukrycie”, bo na samym wierzchu udostępniałem konfigurację aplikacji.

Co chronić?

Zamieszczam przykładową listę plików, które nie powinny ujrzeć świata dziennego w projekcie, którego źródła nie są otwarte:

.angular-cli.json
.babelrc
.gitignore
.gitattributes
.npmignore
.eslintignore
.travis.yml
.editorconfig
Gemfile
Gemfile.lock
app.json
nodemon.json
jasmine.json
bower.json
package.json
yarn.lock
tsconfig.json
tslint.json
typings.json
CHANGELOG.md
README.md
protractor.conf.js
karma.conf.js
webpack.config.js
wallaby.js

Oraz katalogów:

.git/ - udostępnienie tego katalogu równoznaczne jest z pokazaniem całych źródeł aplikacji
- .git/index - aby sprawdzić, czy katalog .git faktycznie jest widoczny, weryfikacja, czy katalog istnieje, może skończyć niepowodzeniem, z powodu wyłączonego listowania katalogu.
Na potrzeby testów sklonowałem projekt warsawjs-workshop-2-blog do głównego katalogu. Sprawdź, co się kryje pod tym URLem: piecioshka.pl/warsawjs-workshop-2-blog/.git/index
node_modules/ - zależności projektu
test/ - testy jednostkowe, integracyjne etc

Ze swojego doświadczenie dodam, że gdy “bundlujesz” pliki CSS i JavaScript do jednego (kilku?) master plików, to nie ma sensu udostępniać źródeł dla publiczności, dlatego warto np. dopisać do listy plików wykluczonych np. takie ścieżki:

assets/scripts/
assets/styles/

Dlaczego wybrałem VPS?

Piotr Kowalski — Mon, 01 May 2017 20:39:18 +0000

Zawsze chciałem mieć pełną kontrolę nad serwerami na których trzymałem swoje projekty. Niestety, ale hostingi których używałem “od zawsze” nie dają takiej możliwości.

Zwykły hosting daje warstwę abstrakcji nad usługami, które serwują pliki. Mamy już preinstalowany web-serwer, interpreter PHP, bazę MySQL i inne (narzędzia mało przydatne dla Frontend Developera). Tym samym nie mamy dużych możliwości konfiguracyjnych, ze względu na brak uprawnień.

Relacja między internautą, a VPS-em wraz z przykładową konfiguracją domeny wykupionej w Nazwa oraz serwera w OVH.

Żegnaj Nazwa, witaj OVH!

Na nazwa.pl miałem wykupiony hosting, którego przedłużenie liczyło się z dużymi kosztami. Postanowiłem zrezygnować z tej usługi na rzecz innego providera. Polska firma straciła wieloletniego klienta. Niestety, ale moja świadomość urosła do tego, że wcale nie muszę korzystać z tego jakże reklamowanego hostingu, aby być tak samo (a nawet bardziej) zadowolony.

Słyszałem od obecnych użytkowników OVH, że za tyle pieniędzy ile płaciłem za hosting w Nazwa.pl, mogę sobie kupić usługę VPS.

Testimonial

Dzięki OVH mam swój serwer, na którym mogę zrobić to, co na lokalnej maszynie. Prosta konfiguracja serwera VPS sprawiła, że już nigdy nie wrócę do hostingu.

Czym jest usługa `VPS`?

VPS (Virtual Private Server) to maszyna typu serwer, która podzielona jest na kilka mniejszych środowisk. Do każdego środowiska możemy przypisać inne dane dostępowe. Tym samym, na jednej maszynie jest możliwość obsługi kilku klientów (właścicieli wirtualnych maszyn).

I ja jestem jednym z tych właścicieli. Mam możliwość instalacji dowolnego systemu operacyjnego (z predefiniowanej listy). Po jego instalacji mogę zrobić z systemem co zechcę, ponieważ jestem w posiadaniu konta root.

Zaparkowanie domeny

Aby internauci nie musieli wpisywać adresu IP naszego serwera wykorzystuje się łatwe do zapamiętania nazwy, czyli “domeny”.

Co zrobić, aby użytkownicy mogli wykorzystywać dobrodziejstwa domen?

Posiadacze domen muszą “zaparkować”, ją na jakimś serwerze typu Name Server za pomocą protokołu DNS (Domain Name Server).

Korzystając z Nazwa miałem domeny zaparkowane na ich serwerze.

Termin “zaparkowanie domeny” w skrócie oznacza skonfigurowanie dla domeny dwóch serwerów, które troszczą się o przekierowanie użytkownika na właściwy webserwer.

Pierwszy z nich jest właściwy, drugi zapasowy i wykorzystany w sytuacji, gdyby ten pierwszy nie był w stanie spełniać swojej roli.

Konfiguracja domeny piecioshka.pl, której przypisane są serwery DNS. W moim przypadku wykorzystuję usługę CloudFlare, aby wytrzymać ruch generowany przez czytelników mojego bloga.

Instalacja środowiska

Aby wydłużyć trochę artykuł dodam jeszcze parę zdań o tym, jak odnaleźć się w tej nowej rzeczywistości.

System operacyjny

OVH daje możliwość zdefiniowania jakiego systemu operacyjnego będziemy używali. Polecam wybór Ubuntu ze względu na:

największą liczbę paczek możliwych do instalacji
niezliczoną liczbę artykułów i tutoriali jak coś zrobić

Po instalacji zalecam aktualizację paczek, ze względu:

dodanie łatek bezpieczeństwa
nowości w programach
wdrożenie optymalizacji wydajnościowych

Aby to zrobić należy wykonać polecenia:

Copy + paste

apt-get update
apt-get upgrade

Nowy użytkownik

Nowy system nie posiada użytkownika domowego (ma tylko root-a). Dlatego też trzeba stworzyć konto z którego będziemy korzystali na co dzień. Aby to zrobić należy wydać polecenie:

Copy + paste

adduser --home /home/piecioshka piecioshka

gdzie:

--home to opcja określająca katalog domowy dla nowo stworzonego użytkownika
/home/piecioshka to ścieżka do katalogu domowego
piecioshka określa nazwę użytkownika

Konfiguracja

Nie chcę opisywać tutaj konfiguracji podstawowych narzędzi zainstalowanych na nowych systemie (choćby z uwagi na bezpieczeństwo).

Jako użytkownika linux-a poradzisz sobie bez problemu z instalacją. Masz teraz po prostu czysty system, który konfigurujesz według własnych wymagań.

•

Ejj czytelniku!

Jak Ci się podoba taki DevOps-owy temat? To, że jesteśmy front-endowcami, to wcale nie znaczy, że “klepiemy stronki” i nie potrafimy zbudować środowiska do naszych projektów!

Uważam, że każdy developer (na odpowiednim poziomie) powinien wiedzieć jak działa internet, aby móc pokazywać aplikacje których jest autorem swoim klientom.

Dziewczyny też piszą w JavaScript! O girls.js słów kilka

Piotr Kowalski — Sat, 29 Apr 2017 15:36:20 +0000

Jakiś czas temu, na warszawskiej scenie pojawiła się nowa organizacja girls.js, której przyświeca jeden cel - zmotywować dziewczyny, aby nauczyły się języka JavaScript. Jako organizator WarsawJS jestem zwolennikiem tworzenia organizacji mających na celu aktywizację wszelkiej społeczności programistycznej. Tym bardziej jeśli ta organizacja mieści się w stolicy naszego kraju!

Logiem organizacji girls.js jest kaczuszka! Ale dlaczego?

O co chodzi

Sprawa wygląda następująco. Chciałabyś spróbować swoich sił z programowaniem? Jeśli tak, to zapisujesz się na warsztaty. Przychodzisz na wydarzenie. Organizatorzy zadbają o to, żebyś czuła się komfortowo. Trenerzy spróbują nauczyć Cię programowania w JavaScript opierając się na przygotowanych slajdach.

Jak się zapisać?

Zapisać się może każda dziewczyna, która chciałaby się nauczyć programowania. Kolejna (już druga) edycja będzie miała miejsce 9-10 czerwca (tego roku).

Zapisy potrwają do 14 maja, także droga czytelniczko spiesz się! Aby się zapisywać wystarczy wypełnić ten formularz. Tym samym wysyłasz swoje zgłoszenie, które kilka dni przed wydarzeniem będzie brało u dział w selekcji. Oznacza to, że pomimo tego, że wypełnisz formularz możesz się nie dostać, bo liczba miejsc jest ograniczona.

Ile trzeba zapłacić?

Szkolenia są darmowe. Organizatorzy dają szansę uczestniczkom na SPRÓBOWANIE, czy programowanie ich pociąga, czy się w nim odnajdują.

Więc kto ponosi koszty za salę, ewentualny katering i inne?

girls.js współpracują z kilkoma firmami, które zajmują się tym tematem. Organizatorzy nic nie muszą “wykładać” ze swojej kieszeni. Firmy partnerskie mają za to możliwość prezentacji swoich ofert pracy itp.

Kto jest za to odpowiedzialny?

Ósemka organizatorów, którzy też są trenerami.

Panie Maria, Magda, Daria, Basia, Ola oraz panowie Michał, Kacper, Paweł, Piotr i Artur. Robicie dobrą robotę - mam nadzieje, że warsztaty będą częściej!

W imieniu organizatorów, zapraszam na fanpage-a, na którym bardzo często pojawia się aktualizacja o tym co słychać w organizacji itd.

•

Dlaczego logiem `girls.js` jest kaczuszka?

To dobre pytanie! Podczas programowania, często przychodzi taki moment, że nie wiemy jak poradzić sobie z problemem. Należy wtedy odpocząć i wrócić do problemu za jakiś czas. Dlaczego?

Mózg nie jest kreatywny - “zafiksowaliśmy się” na problemie.

Trzeba dać trochę odpocząć naszym szarym komórkom. Jest jeszcze jeden pomysł, na rozwiązanie tej sytuacji, tzn. metoda żółtej kaczuszki!

Praktyka ta polega na wykorzystaniu dowolnego przedmiotu (np. kaczuszki) albo obcej osoby, której opowiesz o problemie. Podczas tego opowiadania, będziesz mieć możliwość przyjrzenia się problemowi z innej strony. Od strony tzw. odbiorcy.

Często taka sytuacja daje do myślenia: dlaczego taki problem chcę rozwiązać w ten sposób, a nie w zupełnie inny? Tutaj pojawia się białe światło w tunelu, które naprowadza nas na wyjście z problemu. Extra!

Słownik do WebStorma

Piotr Kowalski — Thu, 27 Apr 2017 21:13:16 +0000

Korzystam z WebStorm już około 3 lata. Jestem MEGA zadowolony z tej decyzji którą podjąłem kilka lat temu aby podziękować Eclipse-owi za wiele lat współpracy.

Błędy?

Cenię sobie WebStorm-a za to, że zawsze (kiedy to tylko możliwe) podpowiada mi, że zastosowana konstrukcja w kodzie jest nieprawidłowa.

Wydaje się, że wtedy programista staje się lepszy, bo pisze kod wolny od prostych błędów składniowych “and so on”. Gdyby ktoś nie wiedział, że przesiadłem się na WebStorma mógłby w ten sposób sądzić. Czy jestem teraz lepszym programistą?

Nie. Jestem bardziej dokładny (nie popełniasz literówek).

Ale to zasługa edytora WebStorm, który na każdym kroku daje znać, że coś nie halo. Kolejny krok jest po stronie programisty, który musi podjąć wyzwania i nauczyć się tych sygnałów, aby nie zignorować cennego komunikatu.

Błąd, który jest w każdym polskim projekcie

Co łączy wszystkie projekty pisane przez polaków? Polskie wyrazy. To jest pierwsze miejsce, na które WebStorm zwraca uwagę.

Nieznajomość polskich słów przyczyną najpopularniejszych błędów.

Niby nic, zwykły kod, a jednak jak przyjrzyj się dobrze. Zobaczysz, że edytor podkreślił niezrozumiałe słowa. Jak się pozbyć takiego problemu?

Słowniki

Jakiś czas temu poprosiłem mojego kolegę o wygenerowanie słownika polskich wyrazów. Nie pamiętam dokładnie jak on to zrobił, ale prawdopodobnie wykorzystał do tego celu narzędzie aspell.

Zbudowany słownik zajmuje około 50MB. Zawiera ogromną liczbę wyrazów, która wynosi dokładnie 3 669 299.

Jakiś czas temu sam zrobiłem słownik, ale języka angielskiego. Ze względu na to, że nie wiem jak wygenerować słownik podobnego rozmiaru co polski to nowy słownik waży około 1.1 MB.

Niestety ale wygenerowany przeze mnie słownik nie zawiera wielu wyrazów, bo zawiera tylko 123 093 linijek. Każda linijka to jeden wyraz.

Przynajmniej mam teraz słownik języka angielskiego.

Pobieramy słowniki

Stworzyłem projekt na GitHubie, aby każdy mógł skorzystać z tychże słowników ile tylko chce. Link do projektu: github.com/piecioshka/dicts

Oczywiście jednym z powodów dla których opublikowałem ten słownik jest community, które może dorzucić od siebie swoje trzy grosze, czyli np. kolejny słownik.

Rekomenduję sklonować repozytorium do swojego workspace-a. Katalog zostanie wykorzystany podczas dodawania katalogu ze słownikami do WebStorma.

Nauczmy WebStorma czegoś nowego!

Omawiany przeze mnie edytor jest super elastyczny. Jednym z ciekawych rzeczy jest nauczenie edytora rozumienia słów z języka obcego.

Aby nauczyć WebStorma języka polskiego należy wejść w:

File
Settings (a najlepiej Default Settings)
Po lewej stronie wybieramy Editor.
Spelling
Przechodzimy na zakładkę Dictionaries.
Wybieramy katalog, który będzie zawierał pliki z rozszerzeniem *.dic.

Jeśli zastosowałeś się do mojej rekomendacji, to wybierz katalog ~/workspace/dics.
Zatwierdzamy wybór kolejno Apply i OK.

Teraz w zależności od wielkości projektu (liczby plików), WebStorm będzie potrzebował chwilkę czasu, aby zweryfikować pliki jeszcze raz, ponieważ może edytor teraz zrozumiał już nieznane słowo i nie musi już go podkreślać.

Nieznajomość polskich słów została usunięta.

•

Po publikacji tego artykułu, zgłosił się do mnie kolega, który podesłał mi link do opisu jak wygenerować słownik. Jeśli drogi czytelniku byłbyś zainteresowany, jak zbudować słownik, np. języka rosyjskiego to kliknij tutaj.

Jak zbudować plik PDF na podstawie pliku tekstowego w formacie Markdown?

Piotr Kowalski — Tue, 25 Apr 2017 08:59:16 +0000

Chciałbym w tym artykule przedstawić Ci w jaki sposób przetworzyć plik w formacie Markdown do formatu PDF. Wykorzystamy do tego paczkę w npm markdown-pdf, która wykona za nas “czarną robotę”.

Co jest “Markdown”?

Markdown to sposób formatowania pliku tekstowego. Każdy tekst, czy to notatka, czy książka, jest w jakiś sposób “sformatowana” (ułożona).

Oficjalne logo. Źródło: https://pl.wikipedia.org/wiki/Markdown

Można zdefiniować kilka typów wyróżnień tekstu:

nagłówek
paragraf
link
pogrubiony tekst
kod źródłowy
itd.

Za pomocą składni Markdown-a zdefiniowanie powyższych (jak i innych) wyróżnień jest bardzo proste i intuicyjne. Przykład:

## To jest nagłówek - nagłówek
Dowolny ciąg literek - paragraf
[tekst](http://example.org/) - link
to jest **pogrubiony** tekst - pogrubiony tekst
Definicja zmiennej "a": `let a = 2` - kod źródłowy (tryb: inline)

Obecnie jest to najpopularniejszy format do tworzenia dokumentacji tekstowej. Rozszerzenie plików w formacie Markdown to *.md. Więcej o składni możesz przeczytać tutaj.

Zalety

Przedstawię kilka zalet tego formatu:

Notatki lub też inne dokumenty są szybciej przeze wytwarzane w sposób nadający się do prezentacji innym osobom, ze względu na zachowanie formatowania.
Tworzenie artykułów nie jest uciążliwe. Przykładem niech będzie ten post, który stworzony jest w formacie Markdown. Pisanie w HTMLu wymuszało na mnie pisanie znaczników, które często były przeze mnie modyfikowane. Tym samym zabierało mi to czas, który mogłem poświęcić na części merytorycznej.

Wady

Nie znam żadnych wad. Dla mnie jest to format idealny ✨

•

Krok po kroku 👣

A teraz postaram się pokazać Ci co po kolei należy zrobić, aby móc szybko budować pliki PDF.

1. Instalacja narzędzia `markdown-pdf`

Zainstaluj narzędzie w projekcie, w którym chcesz budować pliki PDF na podstawie plików w formacie Markdown. Możesz to zrobić za pomocą polecenia:

Copy + paste

npm install --save-dev markdown-pdf

Chyba, że chcesz wykorzystywać narzędzie bez powiązania z konkretnym projektem, wtedy należy zainstalować narzędzie globalnie:

Copy + paste

npm install -g markdown-pdf

2. Stworzenie skryptu

// build.js
let markdownpdf = require('markdown-pdf');

const INPUT = 'path/to/file.md';
const OUTPUT = 'path/to/file.pdf';

markdownpdf()
    .concat.from.paths([INPUT])
    .to(OUTPUT, () => {
        console.log('Created', OUTPUT);
    });

3. Stworzenie pliku `file.md`

Teraz wystarczy stworzyć plik w formacie Markdown, aby móc go przekonwertować do PDF. Jeśli w projekcie istnieje plik README.md, to wystarczy zaktualizować ścieżkę do tego pliku w powyższym skrypcie.

4. Zbudowanie pliku PDF

Jeśli ścieżka do plików jest ustawiona poprawnie, to wystarczy wydać polecenie:

Copy + paste

node build.js

•

Co to jest “CLI”?

CLI, czyli Command Line Interface - jest to interfejs aplikacji, dzięki któremu możliwe jest uruchomienie programu za pomocą polecenia w terminalu.

Wbudowany CLI

Opisywane narzędzie posiada już wbudowany interfejs CLI.
Więcej informacji na ten temat znajdziesz w dokumentacji.

Własne CLI

Co jeśli chciałbyś sam stworzyć plik, który będzie działał nieco inaczej niż wbudowany CLI? Zbudujmy coś takiego!

Zbieramy wymagania

Chcielibyśmy napisać skrypt w taki sposób, aby móc mu przekazywać następujące parametry:

INPUT - ścieżka do pliku wejściowy w formacie Markdown
OUTPUT - ścieżka do pliku wyjściowego w formacie PDF

po to aby, móc uruchamiać skrypt budujący w następujący sposób:

Copy + paste

node build.js INPUT OUTPUT

Skrypt budujący

// build.js
let markdownpdf = require('markdown-pdf');

const INPUT = process.argv[2]; // ex. README.md
const OUTPUT = process.argv[3]; // ex. file.pdf

markdownpdf()
    .concat.from.paths([INPUT])
    .to(OUTPUT, () => {
        console.log('Created', OUTPUT);
    });

Customowe style - zmiana domyślnego wyglądu

Aby móc dodać swoją definicję wyglądu do wygenerowanego dokumentu PDF wystarczy zdefiniować odpowiednią właściwość w opcjach, według przykładu:

const OPTIONS = {
    cssPath: 'path/to/file.css'
};

markdownpdf(OPTIONS)
    ...

Jak wykorzystać CSS do ulepszenia wyglądu pliku PDF?

Poniżej lista selektorów, które ja proponuję wykorzystać, aby nadpisać domyślny wygląd wygenerowanego pliku PDF:

body - wygląd całego dokumentu, np. zmiana domyślnego fontu
h1, h2, h3, h4, h5, h6 - nagłówki.
a[href] - linki
strong - pogrubiony tekst
blockquote - cytowanie
code - kod źródłowy (jednolinijkowy)
pre code - kod źródłowy (wielolinijkowy)

•

Problem: Podwojony link w wygenerowanym pliku PDF

Podczas wygenerowania dokumentu z osadzonym linkiem będziesz w stanie dostrzec, że linki są “podwojone”. Aby poradzić sobie z tym problem rekomenduję dodać do customowych styli następujący blok kodu:

a[href]:after {
    content: ""
}

Wskazówka #1: Zmiana domyślnego fontu

Jeśli chcesz w wygenerowanym dokumencie użyć innego niż domyślny font, proponuję wykorzystać funkcję @import (w CSS-ach):

@import url('https://fonts.googleapis.com/css?family=Lato');

Teraz w pliku ze stylami można śmiało używać:

font-family: "Lato", serif;

Wskazówka #2: Ustawienie pliku wykonywalnego

Obecnie skrypt jest uruchamiany następująco:

Copy + paste

node build.js INPUT OUTPUT

Co jeśli chcielibyśmy, uruchamiać skrypt w ten sposób:

Copy + paste

./build.js INPUT OUTPUT

Wystarczy wykonać 2 rzeczy:

W pierwszej linijce pliku build.js dodać preambułę #/usr/bin/env node.

Uwaga: Przed tą linijką nie może być innych znaków.

Linijka ta, wymusza na powłoce (np. bash) wykorzystanie narzędzia node do uruchomienia pliku.
Dodać uprawnienia do pliku chmod +x build.js.

[Aktualizacja: 2023-09-08] Moje narzędzie

Tego dnia pracowałem nad upublicznieniem repozytorium oraz opublikowania narzędzia do konwersji plików Markdown do PDF. Dziś powstała paczka:

https://www.npmjs.com/package/convert-md-to-pdf

Zapraszam Was do repozytorium z kodem źródłowym:

https://github.com/piecioshka/convert-md-to-pdf

WarsawJS Workshop #5: Relacja ze spotkania

Piotr Kowalski — Sun, 23 Apr 2017 21:59:28 +0000

To już piąta edycja nowej inicjatywy WarsawJS, która skupia się na nauce języka JavaScript w sposób praktyczny. Tym razem uczyliśmy się narzędzia Node.js. To wydarzenie było dość szczególne dla mnie, ze względu na to, że pierwszy raz nie byłem mentorem.

•

Artykuł zwyciężył w konkursie Crossweb.pl 🏆

•

Zapraszam Cię do obejrzenia krótkiego wywiadu z jednym z organizatorów.

Rozmowa ze współorganizatorem podczas WarsawJS Workshop #5

Gdzie znajdziesz odpowiedzi na następujące pytania:

Jak oceniasz dzisiejsze workshopy?

Jak Ci się podoba nowa sala i nowe miejsce?

Jakie są plusy uczenia się w grupie?

Podczas wszystkich poprzednich edycji WarsawJS Workshop byłem w roli mentora i wiązało to się z tym, że liczba godzin, które musiałem poświęcić przed spotkaniem, aby się do niego przygotować rzecz jasna, była ogromna. Liczyło to się z zadaniami jakie mentor musi zrealizować przed i podczas workshopu. O nich opowiem później.

Początek spotkania

23 kwietnia to szczególny dzień (i nie mam na myśli, że to dzień warsztatów). W tym samym dniu w stolicy organizowany jest Orlen Warsaw Marathon.

Dzięki temu, że trasa maratonu jest dosyć długa, to liczba ulic zamkniętych jest proporcjonalnie duża. Ze względu na to warsztat musiał rozpocząć się z kilkuminutowym opóźnieniem. Uważam, że to nie problem.

Dygresja

Nie popieram spóźniania. Sam zwykle, gdy jest obawa, że gdzieś się mam spóźnić, to robię wszystko aby tylko nie tego nie dopuścić.

Zaczynamy!

Spotkanie jak zawsze rozpoczęło się serdecznym przywitaniem przez organizatorów. Podczas tego kilkuminutowego wystąpienia, definiowane są zasady współpracy oraz przedstawiani są trenerzy, którzy będą pomagali uczestnikom wykonać w pełni działającą aplikacje.

Rozpoczęcie WarsawJS Workshop #5

Mentor, a kto to?

Warsztaty to wydarzenie, podczas którego spotykają się 2 strony medalu:

uczestnicy, którzy chcą się czegoś nauczyć
trenerzy, którzy chcą kogoś nauczyć

Podczas warsztatów WarsawJS trenerzy (zwykle pięciu), wykorzystuje swoje doświadczenie i pomaga uczestnikom zrealizować projekt.

Osobą, która go wymyśla jest mentor. Jest on również jednym z trenerów. Mentor jest zwykle najbardziej doświadczony w technologii, której uczestnicy uczą się podczas warsztatów. Cel projektu to zwykle lista zadań, która jest do zrobienia.

Prezentacja aplikacji docelowej przez mentora podczas WarsawJS Workshop #5

Drugim “obowiązkiem” mentora (w moim odczuciu przywilejem) jest wyście na scenę podczas rozpoczęcia wydarzenia (zaraz po organizatorach) w celu prezentacji projektu jaki będzie realizowany przez uczestników podczas dnia warsztatu.

•

Z tego wywiadu dowiesz się jaka grupą zajmował się mentor dzisiejszego workshopu, Marek Święcicki i czy selekcja zrobiona przed warsztatami zdała egzamin.

Rozmowa z mentorem WarsawJS Workshop #5

Kim byli trenerzy? Sylwetki

Marek Święcicki: Młody chłopak, który już wie co chce robić w życiu - pisać kod! Marek posiada świetny kunszt programistyczny.
Kamil Grabek: Developer z 3 letnim stażem, posiadający niesamowite umiejętności front-endowe, ale odnajduje się również po stronie serwera.
Tomasz Marciszewski: Programista i architekt systemów. Aspirujący developer gier. Obecnie zajmuje się głównie tworzeniem rozwiązań backendowych w Node.js
Konrad Kowalski: Wieloletni developer Node.js. Autor wielu projektów na GitHubie. Aspirujący snookerzysta.
Robert Kawecki: Pisze w Node.js od 2012. Buduje systemy CQRS z użyciem Event Sourcing. Unika front-endu.

Poniżej wywiad z dwójką trenerów:

Rozmowa z trenerami WarsawJS Workshop #5

Z tego wywiadu poznasz odpowiedzi na pytania:

Jak poziom był w innych grupach?
Jaki projekt był realizowany podczas workshopów?
Czy wielkość grup jest akceptowalna dla trenerów?
Czy poziom całej grupy jest równomierny?
Co można jeszcze poprawić od strony organizacyjnej?

Zasady?

Jako organizatorzy nakreśliliśmy pewne zasady współpracy, aby uczestnicy jak i trenerzy czuli się komfortowo:

Podział na grupy pod kątem zaawansowania podczas selekcji
To nie są indywidualne zajęcia
Odnosimy się do siebie po koleżeńsku (na Ty)
Trener decyduje o prędkości realizacji projektu
Każdy z uczestników wyraża zgodę na publikację wizerunku w social mediach

oraz najważniejsza reguła:

Żadne pytanie nie jest głupie!

Z której wynika, że uczestnicy mogą zadawać dowolne pytania do trenera, odnośnie dowolnej rzeczy z którą sobie nie radzą podczas tworzenia aplikacji.

•

Rozmowa z uczestnikami podczas WarsawJS Workshop #5

Mój pierwszy wywiad, przeprowadzony z uczestnikami z którego dowiesz się:

Co nieco o obecnym podczas całych warsztatów kateringu
Czy nowa lokalizacja jest lepsza od starej?
Liczba osób w sali nie przeszkadza w realizacji projektu
Od uczestnika, który był pierwszy raz na warsztatach, że tempo było dostosowane do poziomu uczestników (plus dla trenera)

Przerwy

Warsztaty trwają 8 godzin. To za długi czas, aby być podczas niego w 100% skoncentrowany, dlatego w planie wydarzenia zdefiniowane są przerwy:

2 kawowe
1 obiadowa
oraz ewentualne przerwy, za które odpowiedzialny jest trener spotkania

“Czy podczas warsztatu będzie obiad?”

To często zadawane pytanie. Nie dziwie się. Nie wyobrażam sobie spędzenia całego dnia na kodowaniu bez obiadu w środku dnia.

A więc, czy będzie jakieś jedzonko?

Tak! Organizatorzy zapewniają posiłek dla każdego uczestnika oraz trenera. Podczas rejestracji uczestnik wybiera danie z karty menu. Następnie organizatorzy kontaktują się z restauracją, która przywozi zamówienie w okolicach godzin południowych.

W okolicy godziny 13 następuje przerwa obiadowa, podczas której wydawane są posiłki przez organizatorów.

Jemy!

Prezentacja swoich prac

Bardzo ważnym aspektem tworzenia projektu jest możliwość pokazania go światu. Dlatego też wymyśliłem, że po zakończeniu warsztatu chciałbym, aby kilka osób wyszło na scenę i pokazało światu swoje projekty.

Wyjście na scenę wiąże się z tym, że trzeba pokonać tą barierę lęku, która dla osób niedoświadczonych w wyjściach scenicznych może być bardzo duża.

Osobiście, zachęcam do spróbowania, aby mieć już te pierwsze “koty za płoty”. Nic strasznego się nie zadzieje, gdy wyjdzie się na scenę i pochwali całodniową pracą.

Konkurs: Wręczenie koszulki

Wpadłem na pomysł, aby osoby, które będą aktywne w social mediach, były przez organizatorów jakoś wyróżnione. Tym samym wylosowaliśmy (pomocą funkcji Math.random() * 7) koszulkę dla jednej osoby, która na Twitterze opublikowała zdjęcie z hashtagiem #warsawjs.

Dlaczego 7? Ponieważ tyle osób brało udział w konkursie! 😄

Wylosowaną cyfra była 3-ka. Powyższy tweet autorstwa Pawła Idczaka wygrał w konkursie - autor zdjęcia, który był pierwszy raz na warsztatach.

Paweł otrzymał od organizatorów upominek w formie koszulki 😄

Rozstrzygnięcie konkursu podczas WarsawJS Workshop #5

Ankiety

Organizatorom, zawsze mocno zależy na feedbacku od uczestników spotkania. Nie większego znaczenia jaki jest to typ spotkanie. Wiadomość zwrotna, czy się podobało, czy nie, zawsze jest pożyteczna. Jeśli uczestnikom coś nie podpasowało, to mają szansę anonimowo zgłosić do przez odpowiedni formularz.

Link do ankiety: bit.ly/warsawjs-workshop-5-ankieta

Oczywiście najsympatyczniej, kiedy organizatorzy dostają pochwały, ale jestem tego zdania, że na pochwały trzeba sobie zapracować.

Ogłoszenie

Jeśli byłeś uczestnikiem spotkania to wypełnij ankietę.
Będziesz miał wtedy realny wpływ na kierunek WarsawJS.

Dyplomy

Zdradzę Wam sekret trzymany głęboko w tajemnicy przez organizatorów. Po zakończeniu WarsawJS Workshop, organizatorzy zawsze wręczają poprzez ręce trenerów dyplomy potwierdzające uczestnictwo w wydarzeniu!

Super sprawa, aby móc później pochwalić się, żonie, mamie albo pracodawcy, że odbyło się szkolenie.

Aby zobaczyć jak one wyglądają kliknij np. tu.

•

A sponsorami spotkania byli…

Od zawsze… czyli od 5 spotkań liczba sponsorów jest taka sama. Na dodatek jest to króciutka lista, bo liczy jedynie 2 pozycje. A mianowicie:

Dwie świetne firmy, które pomagają organizatorom w tym, aby wydarzenie odbyło się na takim poziomie na jakim się odbywa. Jeśli szukasz pracy jako JavaScript Developer warto wysłać do nich swoją kandydaturę. Firmy zatrudniają ekspertów w dziedzinie front-end-u.

Co dalej?

Kolejne warsztaty odbędą się z frameworka Meteor.js. Jeśli więc, drogi czytelniku jesteś developerem tego narzędzia to zgłoś się do organizatorów pisząc wiadomość na adres: contact [at] warsawjs.com albo w social mediach.

Zobaczysz, ile jest frajdy w byciu trenerem. Najwięcej o tym może powiedzieć dzisiejszy trenerem Kamil, który był pierwszy raz w tej roli podczas WarsawJS Workshop.

Podsumowanie wydarzenia przez trenera WarsawJS Workshop #5

"Front-end" vs "Frontend"

Piotr Kowalski — Fri, 21 Apr 2017 07:07:57 +0000

Czy kiedykolwiek zastanawiałeś się nad tym, która nazwa jest poprawna? Bo ja tak. A że nie lubię takiego stanu niewiedzy, dlatego postanowiłem, że odkryję prawdę! Rozwiążę raz na zawsze ten problem i odpowiem Ci na główne pytanie: która z tych form jest właściwa?

Postanowiłem, że zrobię research i dowiem się prawdy!

Na wstępie zaznaczam, że przeszukiwałem TYLKO zbiory internetowe. Nie zaglądałem do żadnych książek (może to źle? trudno powiedzieć).

Ograniczyłem się także tylko do słowników internetowych, choć widziałem, że jest mnóstwo dyskusji na temat sytuacji stosowania poprawnej formy.

Logo Front-endu (https://en.wikipedia.org/wiki/Front-end_web_development). Ups... zdradziłem wynik analizy, ale mam nadzieje, że nikt tego nie zauważy.

Misja Translator

Skorzystałem z pomocy kilku tłumaczy internetowych. O to wynik mojej pracy.

1. Google Translate

Pierwsze co wpisałem to słowo frontend. Słownik nie przetłumaczył tego słowa, ale za to podpowiedział, że może warto zobaczyć inne frazy: front end oraz front-end.

Gdy kliknąłem we front-end słowo zostało przetłumaczone na “czołowy” oraz był dodany przykład wyjaśniający znaczenie słowa front-end.

Wynik: front-end 1:0 frontend

2. Translatica

Kolejny translator, którego użyłem nie poradził sobie ze słowem frontend, ale za to przetłumaczyć front-end jako procesor czołowy

Wynik: front-end 2:0 frontend

3. Cambridge Dictionary

Po wpisaniu frazy frontend otrzymałem sugestię odnośnie wpisanego słowa, że może mam na myśli inne wyrazy.

Jeśli jednak wpiszę front-end przez myślnik to otrzymuję opis, który zawiera takie informacje jak:

front-end jest przymiotnikiem
oraz wyjaśnienie, że słowo te jest używane do opisania, że inwestorzy płacą opłatę w momencie kiedy włożyli pieniądze do niektórych rodzajów inwestycji

Co to ma wspólnego z programowaniem? Nic, ale przynajmniej jest w słowniku.

Przy tym słowniku warto się na chwilę jeszcze zatrzymać i spojrzeć na znaczenie wyrażenie back-end. Ponieważ, znalazło się wytłumaczenie z dziedziny IT.

back-end jest przymiotnikiem
oraz odnosi się do części programu komputerowego lub systemu, której użytkownik nie widzi lub nie używa

Wynik: front-end 3:0 frontend

4. English Oxford Living Dictionaries

Interesujący jest fakt wpisania w tej wyszukiwarce frazy frontend. Jakkolwiek by się nie wpisywało, czy to bez myślnika, czy ze spacją, czy z myślnikiem zostaniemy i tak przekierowani na wersję “front end” - pisane ze spacją w środku.

Fraza zostanie przetłumaczona na: Część systemu komputerowego lub aplikacji, z którym użytkownik komunikuje się bezpośrednio.

Może nie wygrała dokładnie wersja przez myślnik, ale na pewno nie wygrała wersja pisana razem.

Wynik: front-end 4:0 frontend

5. www.dictionary.com

Standardowo. Po wpisaniu frontend dostałem informację, że: nie ma takiego słowa oraz listę proponowanych.

Po wpisaniu front-end otrzymałem informację, że słowo jest przymiotnikiem, ale opis dotyczył finansów.

Wynik: front-end 5:0 frontend

6. Longman Dictionary of Contemporary English Online

Kolejny słownik, który podpowiada mi, że nie ma słowa frontend. Po wpisaniu poprawnej nazwy front-end dostaję informację o rzeczowniku w dziedzinie handlu.

Szkoda, że nie ma wyjaśnienia, ale jak widać słowa frontend po prostu nie ma.

Wynik: front-end 6:0 frontend

7. Collins Dictionary

Po wpisaniu frontend zostałem przekierowany na wersję z myślnikiem i wyjaśnieniem z dziedziny finansów.

Wynik: front-end 7:0 frontend

8. Word reference

Taka sama sytuacja tutaj: frontend

Wynik: front-end 8:0 frontend

9. bab.la Dictionary

Kolejny tłumacz online nie znajduje słowa frontend.

Znajduje za to wersję z myślnikiem i tłumaczy ją jako: część interfejsowa.

Wynik: front-end 9:0 frontend

Obecne frazy w słownikach

Jeśli kogoś zainteresuję front-end to prędzej czy później będzie googlował o tym i natrafi na stronę w Wikipedii - https://en.wikipedia.org/wiki/Front-end_web_development gdzie w samym tytule jest przyjęta konwencja “front-end”.

Podsumowanie

Po mozolnej weryfikacji wśród 9 różnych słowników internetowych mogę przychylić się bardziej do tego, że określenie warstwy aplikacji którą obsługuje użytkownik pisze się Front-end.

Wiadomo, że czasami pisanie przez myślnik może prowadzić do niepotrzebnych problemów, ale chciałbym aby moi czytelnicy wiedzieli, jak pisze się poprawnie.

Wygraj bilet na konferencję JS Poland 2017

Piotr Kowalski — Wed, 19 Apr 2017 11:34:28 +0000

Śmigasz po konferencjach? Jeśli tak, to ten wpis powinien Cię zainteresować.

Konferencja, kolejna?

Tak. Czy ktoś ma dosyć konferencji? Wydaje mi się, że nie. Podczas takich wydarzeń uczestnicy mają możliwość dowiedzenia się w pierwszej ręki co słychać w ich ulubionej technologii.

Zapamiętaj

Konferencje rozwijają Twoje umiejętności. Podczas konferencji:

poznajesz nowe osoby z branży, z którymi później np. współtworzysz projektu Open Source

dowiadujesz się o nowościach w swoim obszarze zainteresowań

Konferencję mają to do siebie, że można spotkać developerów popularnych w branży. Jeśli na scenie występuje człowiek, który stworzył projekt jakiego używasz na co dzień, to warto podczas eventu podejść do niego i podziękować mu za jego pracę, która ułatwia Tobie życie, albo utrudnia 😄

Logo konferencji JS Poland 2017.

Konkrety

JS Poland to: 1 dzień konferencji oraz 3 dni warsztatów.

Konferencja odbędzie się 19 czerwca tego roku w Multikinie Złote Tarasy w Warszawie. Warsztaty będą odbywać się w kolejnych dniach.

Podczas konferencji będziesz w stanie posłuchać kilkunastu prelekcji na temat języka JavaScript. Ze swojej strony mogę polecić prelekcje takich sław jak:

którzy zawsze wychodzą na scenę prezentując interesujące tematy w ciekawy sposób.

1) ✨ Darmowy bilet

Jestem w posiadaniu jednego biletu, który chciałbym przeznaczyć Wam, tj. czytelnikom mojego bloga. Bilet jest wart ponad 400 złotych.

Aby wygrać bilet…

udostępnij ten post na Facebooku albo Twitterze
w treści wpisz hashtag #piecioshkablog
osoba, której post posiada największą liczbę lajków otrzyma ode mnie bilet

Konkurs potrwa przez kilka dni. Ogłoszenie osoby, która wygrała bilet odbędzie się w sobotę, 29 kwietnia, kiedy to przeszukam cały internet pod kątem wymienionego przez ze mnie wcześniej hashtaga.

Wynik ogłoszę tu na blogu. Prawdopodobnie modyfikując ten artykuł.

2) ✨ Rabat 10%

Jeśli nie wygrasz swojego biletu w konkursie powyżej, to masz możliwość redukcji ceny biletu o 10%. Nie jest to duża zniżka, jednak dlaczego miałbyś z niej nie skorzystać podczas zakupu biletu?

Aby skorzystać z promocji…

W formularzu zakupu biletu wpisz kod: piecioshkablog.

Kod jest ważny do 2 maja (zostało Ci jeszcze 14 dni).

Wskazówka

Ze swojej strony proponuję zakup biletu typu SUPER EARLY BIRD OPTION - 2 CONFERENCES, który to, upoważnia do wejścia na 2 konferencje:

czerwcową www.js-poland.pl

oraz listopadową www.ng-poland.pl

Uwaga

Ze względu na dużą promocję, liczba tych biletów jest ograniczona!

Organizatorem jest Darek Kalbarczyk, który już kiedyś pokazał, że potrafi organizować tego typu wydarzenia. Mowa tutaj o konferencji NG Poland 2016 o której pisałem na blogu.

•

✨ [ 2017-04-29 ] Ogłoszenie wyników

Liczba osób biorących udział w konkursie nie jest oszałamiająca - co mnie osobiście dziwi. W końcu otrzymanie biletu, którego koszt na rynku wynosi ponad 400 ziko nie jest zjawiskiem popularnym.

Może to przez to, że ludzie nie biorą udziału w konkursach bo myślą, ża to jakaś ściema, a przecież jeśli konkurs robi osoba (albo organizacja), która ma jakąś renomę, to konkurs musi być prawdziwy.

No trudno. Przejdźmy do konkretów.

Zobaczmy, co się działo na portalu `Twitter`

Zapytanie pod jakim szukałem zgłoszeń: twitter.com/hashtag/piecioshkablog?src=hash

Liczba uczestników:

Kamil Piskorz - Liczba lajków: 0
Ścibor Rudnicki - Liczba lajków: 1
Mary Pieroszkiewicz - Liczba lajków: 3

Coś malutko tych lajków, może na fejsbuku będzie więcej…

Czas na `Facebook`-a, może tutaj posty są popularniejsze?

Zapytanie pod jakim szukałem: facebook.com/hashtag/piecioshkablog?source=feed_text&story_id=10211261089175716

Liczba uczestników:

Michał Kwaśniewski - Liczba lajków: 11
Kamil Piskorz - Liczba lajków: 19
Mary Pieroszkiewicz - Liczba lajków: 32!

Wszystko jasne!

Zwyciężczynią konkursu jest Mary Pieroszkiewicz 🎉

Serdeczne gratulacje! W ciągu kilku dni organizator konferencji skontaktuje się z Tobą, w celu wygenerowania biletu. Do zobaczenia na konferencji!

•

PS Największym zaskoczeniem dla mnie była dyskusja na jednej z grup fejsbukowych, gdzie Kamil Piskorz udostępnił post (aby zobaczyć treść pod tym linkiem nie musisz przynależeć do żadnej grupy). Dziękuję Kamilowi, za zaangażowanie tylu ludzi lajkujących przerobione zdjęcie autorstwa Marka Pietrzaka.

Przeróbka mojego zdjęcia. Prawda, że lepiej?

Midnight Commander — narzędzie odporne na czas

Piotr Kowalski — Mon, 17 Apr 2017 00:00:00 +0000

Czy pamiętasz to narzędzie? Stare czasy, kiedy nie było popularnych graficznych rozwiązań tego typu. W sumie, kiedy zobaczyłem profil mc na Wikipedii to widzę, że ten fantastyczny projekt powstał 5 lat po moich urodzinach, czyli na tą chwilę 23 lata temu.

W tym momencie powinny pojawić się w Twojej głowie pytania:

co to jest mc?
po co zajmować się tak starym narzędziem?
oraz jak mi się przydaje?

Co to jest `mc`?

Midnight Commander, w skrócie mc - to prosty lecz wielofunkcyjny manager plików i katalogów, znany z czasów kiedy nie było Total Commandera, a jego protoplasta Norton Commander dopiero raczkował.

Gwoli ścisłości

Starszym programem tego typu jest Norton Commander, który był przeznaczony dla systemu MS-DOS. Program Midnight Commander to rozwiązania multi-platformowe.

Instalacja

W mojej obecnej konfiguracji sprzętowo-software-owej (używam macOS Sierra), najszybsza instalacja mc polega na uruchomieniu polecenia:

Copy + paste

brew install mc

Konfiguracja

W systemach macOS, plik konfiguracyjny narzędzia dostępny jest w następującej lokalizacji:

~/.config/mc/ini

Dla przypomnienia

~ (tylda) znak ten odnosi się do katalogu domowego użytkownika

Katalog ze skórkami

Po instalacji za pomocą narzędzia brew (Homebrew), które instaluje paczki w katalogu:

/usr/local/Cellar/

katalog ze skórkami aplikacji znajduje się tutaj:

/usr/local/Cellar/midnight-commander/4.8.18/share/mc/skins

Po co to piszę? Ponieważ nigdzie nie jest powiedziane, że Twój file manager musi tak wyglądać:

Zrzut ekranu z głównego okna programu Midnight Commander wraz z domyślnym wyglądem.

Zmiana języka

Kto nie miał problemów z wyświetlaniem polskich znaków w programach unix-owych niech podniesie rękę.

Nie widzę żadnej, w takim razie poradźmy sobie z tym odwiecznym problemem raz na zawsze uruchamiając w taki sposób Midnight Commandera:

LANG=en_EN.UTF-8 mc

Oczywiście, nikt nie chce uruchamiać narzędzia wpisując tyle znaków z klawiatury, ale od czego są aliasy? Jeśli korzystasz z basha albo zsh to dodaj poniższą definicję do pliku z aliasami, np. .bash_aliases:

Copy + paste

alias mc='LANG=en_EN.UTF-8 mc'

Od teraz wystarczy w terminalu wydać polecenie:

Copy + paste

mc

aby uruchomić opisywane narzędzie.

Wskazówka

Psst… Jeśli alias nie zadziałał należy przeładować shella. Z tym problemem można sobie poradzić na 2 sposoby:

Otworzyć nowy terminal, np. skrót cmd + t

Załadować plik konfiguracyjny dzięki poleceniu: source ~/.bash_aliases

Popularne operacje w `mc`

1) Kompresowanie katalogu

Wejdź do katalogu, który chcesz kompresować.
Ustaw się wewnątrz katalogu na wskaźniku wyżej, tj: ...
Naciśnij klawisz F2, a potem wybierz tryb kompresji:
- 3, jeśli chcesz stworzyć archiwum typu: tar.gz
- 4, jeśli chcesz stworzyć archiwum typu: tar.bz2
- 5, jeśli chcesz stworzyć archiwum typu: tar.7z
- 6, jeśli chcesz stworzyć archiwum typu: tar.xz
Po zakończeniu pakowania, archiwum zostanie stworzone w katalogu, który w strukturze katalogów znajduje się wyżej.

2) Zaznaczanie plików

Zaznaczanie odbywa się za pomocą klawisza ins (insert).

Jeśli brakuje takiego klawisza na klawiaturze (i używasz systemu macOS) to skorzystaj ze skrótu ctrl + t.

Interesujące może być też zaznaczanie według wzorca (np. chcesz zaznaczyć wszystkie pliki w folderze) w takim wypadku wykorzystaj skrót + (plus), aby wyświetlić dialog ze wzorcem.

Odznaczanie polega na wybraniu znaku - (minus), gdzie wyświetli się dialog ze wzorcem plików, które zostaną odznaczone.

Aby odznaczyć (albo zaznaczyć) całą zawartość katalogu wpisz *.

3) Kopiowanie plików na serwer

Gdy chcesz skopiować swoje pliki na serwer połącz się do niego wykorzystując protokół SSH (Secure Shell) wybierając opcję:

Wybranie opcji: "Right → Shell link" programu Midnight Commander.

Midnight Commander wykorzystuje protokół SSH, w komunikacji z serwerem, więc jeśli Twój serwer wspiera ten protokół, to przetestuj kopiowanie plików - zobaczysz jakie to proste. Nie trzeba instalować specjalnych programów, aby zarządzać plikami na serwerze w sposób: szybki oraz intuicyjny.

Osobiste przemyślenia

Kiedyś nie miałem pojęcia o istnieniu tak prostych narzędzi i zastanawiałem się jaki typ programu wybrać jako klient FTP. Przeczytaj co myślałem 6 lat temu.

Manager wykorzystuje protokół fish - Files transferred over shell protocol - który został specjalnie stworzony na potrzeby opisywanego narzędzia.

Opis protokołu "fish" w programie Midnight Commander.

Po co mi takie narzędzie?

Osobiście wykorzystuję mc podczas kopiowania pliku na serwer VPS - opisywałem tą możliwość powyżej. Nie chcę instalować programu do każdej operacji jaką wykonują na swojej maszynie. Uważam, że dobry inżynier wykorzystuje dostępne dla niego narzędzia (w danej sytuacji) zamiast instalować nowe.

Czasami wykorzystuję jeszcze Midnight Commandera do porządkowania plików i katalogów na dysku prywatnego komputera, bo przenoszenie folderów za pomocą touchbara nie zawsze jest najszybszym rozwiązaniem.

Bibliografia

Stan na dzień: 2017-04-17

Dziedziczenie obiektów w JavaScript (bez użycia klas)

Piotr Kowalski — Sat, 15 Apr 2017 00:00:00 +0000

Od 2015 roku dzięki specyfikacji ES6 a.k.a. ES2015 mamy możliwość stworzenia klasy jako reprezentacji opisu obiektu, na podstawie której zostanie on stworzony.

Co jeśli architektura Twojej aplikacji nie opiera się na klasach? A może po prostu nie jesteś zwolennikiem Object-Oriented Programming (OOP)?

Taka sytuacja jest dosyć częsta, kiedy zaczynasz poznawać świat programowania w JavaScript i klasy nie są jeszcze Ci znane.

Z pomocą przychodzi wzorzec delegacji i styl Objects Linked to Other Objects (OLOO), który swoją definicję posiada w książce “You Don’t Know JS” autorstwa Kyle Simsona.

Dziedziczenie

Przykładowy model architektury w ujęciu klasycznym, czyli istnieją obiekty główne (rodzice) oraz obiekty pochodne (dzieci).

Schemat obiektów prostej architektury aplikacji

Dziedziczenie obiektów? Nie!

Model architektury opartej na OLOO nie wprowadza hierarchii. On po prostu informuje, że jeden obiekty będą korzystały z innych.

Schemat obiektów prostej architektury aplikacji

Tego procesu nie można nazwać dziedziczeniem, tylko delegacją.

W specyfikacji ES2015 została zdefiniowana funkcja statyczna Object.setPrototypeOf, która łączy ze sobą obiekty za pomocą wiązania __proto__. Wiązanie te występuje TYLKO w obiektach, w funkcjach “od zawsze” istnieje inne wiązanie, tj: “prototype”.

const point = {
    x: null,
    y: null,
    draw() {
        // ...
    }
};

const point1 = {
    x: 0,
    y: 0
};
console.log(typeof point1.draw); // undefined

Object.setPrototypeOf(point1, point);

console.log(point1.hasOwnProperty('draw')); // false
console.log('draw' in point1); // true
console.log(typeof point1.draw); // "function"

const point2 = {
    x: 50,
    y: 50
};
Object.setPrototypeOf(point2, point);

Weryfikacja

Aby móc zweryfikować aktualny stan proponuję uruchomić:

// Check: Different points
console.log(point1 !== point2) // true

// Same definition of "draw" method
console.log(point.draw === point1.draw) // true
console.log(point.draw === point2.draw) // true
console.log(point1.draw === point2.draw) // true

Wsparcie systemowe

Ale gdzie można używać takiej składni zapytasz? Otóż dzięki najpopularniejszemu zestawieniu wsparcia feature-ów JavaScript-owych, realizowanemu przez Kangax-a, możemy się dowiedzieć, że:

Jest wsparcie

Google Chrome 57+ (Opera 44+)
Firefox 52+
Safari:
- desktop: 10+
- mobile: 9+
Microsoft
- IE 11
- Edge 14+
Node.js 4+

Brak wsparcia

Niestety, ale żaden transpiler nie pomoże w zapewnieniu wsparcia wykorzystania funkcji Object.setPrototypeOf:

Babel.js
Traceur
Closure
TypeScript

Link do pełnego zestawienia.

Polyfill

Link do definicji polyfilla znajduje się na MDN jednak, abyś mógł szybko zobaczyć jak on wygląda umieszczę go tutaj:

// Only works in Chrome and FireFox, does not work in IE:
Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) {
  obj.__proto__ = proto;
  return obj;
}

Jak stworzyć swój szablon do Cleaver?

Piotr Kowalski — Thu, 13 Apr 2017 00:00:00 +0000

Cleaver to narzędzia, które na podstawie pliku w formacie Markdown (*.md) tworzy slajdy w formacie HTML (po uprzednim zbudowaniu za pomocą polecania w terminalu).

Format Markdown to pewnego rodzaju standard w świecie programistycznym. I dobrze. Składnia jest prosta, ale nie uboga. Format ten daje duże możliwości w przygotowaniu dobrze sformatowanego tekstu.

Jak stworzyć nowy temat?

Aby stworzyć własny szablon należy stworzyć 5 plików:

layout.mustache
- Szablon głównej strony (w stylu index.html). Zawiera definicję strukturę strony.
- Aby wyświetlić zawartość pliku template.mustache należy wykorzystać składnię (bez spacji między nawiasami): { { { slideshow } } }
  
  Uwaga: jeśli zamiast 3 nawiasów zostaną użyte tylko 2, to zawartość zmiennej zostanie po prostu zwrócona. 3 nawiasy powodują, że treść jest sparsowana do HTMLa.
- Warto wykorzystać pola author oraz encoding aby wpisać odpowiednie metadane (znaczniki <meta>).
script.js
- Obecnie jest to pusty plik. Można tutaj dołożyć jakieś dodatkowe feature-y do slajdów, np. zegarek.
settings.json
- Konfiguracja projektu.
style.css
- Wygląd slajdów.
template.mustache
- Szablon listy slajdów.

Polecam stworzyć te pliku w osobnym katalogu, aby potem w pliku ze slajdami móc zdefiniować ścieżkę do katalogu z customowym tematem:

title: My Custom Theme
output: demo/slides.html
theme: ../my-custom-theme

Marna dokumentacja Cleaver-a

W źródłach projektu cleaver znajduje się plik cleaver/lib/index.js, w którym w okolicach 250 linijki jest stworzona zmienna layoutData, która to definiuje listę zmiennych. Będą one wstrzykiwane w szablon. Niestety nigdzie w dokumentacji nie ma informacji jakie pola można wykorzystać.

Stwierdziłem więc, że napiszę o tym post. Może komuś się przyda.

Slajdy

W pliku z definicją slajdów (plik z rozszerzeniem .md), na górze tego pliku można zdefiniować listę parametrów, które Cleaver rozumie.

Oto lista wspieranych pól:

author - login z Twitter-a autora slajdów
title - tytuł slajdów (domyślnie: Untitled)
encoding - kodowanie plików (domyślnie: utf-8)
script - ścieżka albo URL do pliku JavaScript
style - obecnie jest to ścieżka albo URL do pliku CSS.

Stworzyłem Pull Request, gdzie dodałem wsparcie do osadzenia wielu plików.
slideshow - tutaj zostanie wstrzyknięta lista slajdów
options - nieznany obiekt (nie wiem jak można go wykorzystać)

Mój własny temat

Przedstawiam Wam prosty przykład szablonu mojego autorstwa:
https://github.com/piecioshka/my-cleaver-theme

Projekt dostępny jest w moim portfolio projektów na GitHubie.

Projekt w katalogu theme/ zawiera 5 wymaganych plików.
- layout.mustache
- script.js
- settings.json
- style.css
- template.mustache
Natomiast w katalogu demo/ jest plik slides.md, która po wykonaniu polecenia npm run build zostanie wykorzystany do stworzenia pliku demo/slides.html.

Linki

Dokumentacja projektu:

Lista narzędzi, które podobnie jak Cleaver konwertują format Markdown do formatu HTMLa w formie slajdów:

Jak zacząć programować?

Piotr Kowalski — Sun, 09 Apr 2017 00:00:00 +0000

Niby proste pytanie. Jednak nie do końca. Jako developer oraz trener z wieloletnim stażem chciałbym pokazać Ci mój punkt widzenia na tą kwestię.

Sama idea programowania polega na wpisywaniu odpowiednich znaków z klawiatury. Znajomość kolejności tych znaków powoduje, że piszemy dobry albo zły kod.

Proponuję wydzielić kilka sytuacji, w których pada tytułowe pytanie.

1 sytuacja: Jarząbek

Moje doświadczenie z komputerami jest małe. Potrafię sprawdzić pocztę i obejrzeć film na YouTube. Chciałbym spróbować sił w programowaniu, ale nie wiem od czego zacząć.

Proponuję zacząć od tego czy w ogóle jesteś w stanie wysiedzieć długo przed komputerem czytając i wklepując “jakieś dziwne” znaczki z klawiatury.

Potrzebujesz weryfikacji w temacie posiadania zdolności analitycznych. Jest kilka serwisów, które oferują przetestowanie tychże zdolności poprzez rozwiązywanie zagadek algorytmicznych. Jednym z takim portali jest godny polecenia: studio.code.org/

Portale o programowaniu “dla dzieci” posiadają inne podejście do programowania. Omawiane podejście jest podobne do tego w jaki sposób uczyliśmy się w szkole, dlatego też dla osób początkujących będzie to właściwy wybór.

2 sytuacja: Zdolny internauta

Potrafię wykorzystać komputer do tego, aby mi pomagał rozwijać moje umiejętności. Radzę sobie doskonale z wyszukiwaniem informacji w sieci.

Jesteś konsekwentny w działaniu i wiesz, że komputer potrafi więcej niż na pierwszy rzut oka się wydaje. Spróbuj zrobić kilka lekcji z darmowych kursów online np. codecademy.com/

Jeśli chęć programowania będzie się utrzymywała polecam zakup literatury, bądź kontynuowania realizowania kursów online. Jest ich cała masa. Na pewno godnym polecenia jest serwis freecodecamp.com/

3 sytuacja: Aspirujący developer

Wiem, że programowanie to jest to, co chcę robić, ale nie wiem skąd czerpać wiedzę, aby się go nauczyć.

Idealnym rozwiązaniem w tej sytuacji jest znalezienie mentora, który poprowadzi Cię przez ten etap mając kontrolę nad tym czego się uczysz.

Ten etap jest błogosławieństwem dla trenera. Każdy opiekun chce wyszkolić taką jednostkę, aby stała się ona jeszcze lepsza i żeby rozpoczęła pracę, gdzie będzie rozwijać swoje umiejętności programistyczne.

Na tym etapie najważniejsze jest tworzenie projektów. Takich prostych - testowych, ale też i takich, które wzbogacą Twoje portfolio projektów.

Portfolio jest drugą rzeczą na jaką pracodawcy patrzą podczas oceniania kandydatów. A co jest pierwszą zapytasz? Oczywiście umiejętności techniczne.

Szkoły programowania

Od kiedy programowanie stało się tak bardzo popularnym zawodem, powstały szkoły programowania, które szkolą adeptów, aby po kursie mogli oni znaleźć swoją pierwszą pracę jako junior developerzy.

Cena za taki kurs może wydawać się ogromna, ponieważ często sięga ona ok. 10 tyś zł. Może się wydawać, że jest to problem, którego nie da się łatwo rozwiązać. Jeśli popatrzy się na ten problem z drugiej strony, to pracując kilka miesięcy jako programista będziesz w stanie zarobić tyle pieniędzy, że koszt takiego kursu szybko Ci się zwróci.

Problem z zatrudnieniem?

Wiele razy miałem takich uczniów, którzy mocno chcieli się uczyć, bo byli zdecydowani aby zmienić pracę. Jednak w życiu nie jest tak kolorowo. Wielu ludziom wydaje się, że wystarczy poświęcić kilka dni, aby liznąć wierzchnią warstwę programowania i sądzą oni, że pracodawcy zatrudnią ich z ucałowaniem ręki.

Nie ma tak łatwo.

Rynek IT jest obecnie mocno nienasycony. Nie znaczy to jednak tego, że wystarczy posiedzieć kilkadziesiąt godzin przy komputerze aby szukać pracodawcy, który zaoferuje olbrzymią pensję.

Jak zdobyć pierwszą pracę?

Ze swojej strony rekomenduję pisać do dużych firm, które poszukują programistów dowolnego szczebla. Firmy rzadko kiedy tworzą oferty na juniorskie stanowiska, bo wiedzą, że na stanowiska dla regularnych developerów i tak zgłoszą się Ci, którzy nie mają wymaganego doświadczenia i umiejętności.

Dlatego też, pisząc swoje CV zadbaj o to aby było ono czytelne i mieściło się na 1 stronie. Pierwsze taki dokument (raczej) nie będzie posiadać dużej ilości umiejętności więc nie opisuj całego swojego życiorysu, tylko po to, aby CV było dwustronicowe.

To nie wykształcenie będzie zarabiać pieniądze lecz Twój skill programistyczny. Sekcję z wykształceniem umieść zaraz po umiejętnościach.

Podsumowanie

Co powinieneś zapamiętać z tgo artykułu?

Programowanie to praca w której ciągle trzeba się rozwijać.
Na początku swojej kariery dobrze jest poprosić doświadczonego developera o pomoc, aby nie tracić czasu na poszukiwanie informacji.

Struktura katalogów w projekcie front-endowym

Piotr Kowalski — Wed, 15 Feb 2017 00:00:00 +0000

Każdy ma swój sposób na definicję struktury katalogów w projekcie. Chcę przedstawi Ci mój punkt widzenia. Na wstępie chciałbym abyśmy rozmawiali tym samym językiem więc przedstawię Ci pewną zasadę.

Aplikacja i projekt to dwa różne elementy.

Projekt zawiera w sobie źródła aplikacji, ale również inne elementy konfiguracyjne takie jak: ustawienia systemu kontroli wersji, dokumentację, testy jednostkowe etc.

Aplikacja zawiera kod źródłowy z implementacją logiki, definicją wyglądu etc.

Opcja #1 - Jeden katalog z aplikacją (`app/`)

Główny plik HTML odpowiedzialny jest za dołączenie wszystkich plików *.js oraz *.css. Oczywiście main.css może importować inne definicje styli więc nie trzeba koniecznie dołączać wszystkich plików w index.html.

.
├── app
│   ├── images
│   │   ├── banner.jpg
│   │   ├── favicon.ico
│   │   └── logo.png
│   ├── scripts
│   │   ├── main.js
│   │   └── module-1.js
│   ├── styles
│   │   ├── main.css
│   │   └── module-1.css
│   └── index.html
├── .gitignore
├── README.md
└── package.json

Czasami bywa tak, że z uwagi na prostotę projektu katalog app/ nie jest tworzony. Wtedy taka architektura niweluje tą wyraźną różnicę między aplikacją a projektem.

Kiedy warto zastosować?

Opisaną architekturę warto wykorzystać w sytuacji bardzo prostego projektu, który nie będzie poddawany długiemu procesu utrzymania aplikacji.

Uwaga

Jeśli wrzucimy taki katalog na serwer, to dajemy użytkownikowi podgląd pliku .gitignore i package.json, które nie powinny być dla niego dostępne. Jeśli kopiujemy cały katalog na serwer to najgroźniejsze jest to, że możemy skopiować także katalog .git, gdzie zapisana jest historia zmian projektu.

Jak to wygląda w praktyce?

Przykłady zrealizowanych projektów:

Opcja #2 - Wykorzystanie bundlera modułów (`dist/`)

Kolejnym bardzo częstym rozwiązaniem jest wykorzystanie narzędzia typu module bundler, które tworzy katalog dist/ wraz z jednym plikiem *.js po to, aby nie dołączać wszystkich plików *.js w index.html.

.
├── app
│   ├── dist        # katalog zawierający wynik pracy module bundlera
│   │   └── bundle.js    # wynik pracy module bundlera np. Webpacka
│   ├── images
│   │   ├── banner.jpg
│   │   ├── favicon.ico
│   │   └── logo.png
│   ├── scripts
│   │   ├── main.js
│   │   └── module-1.js
│   ├── styles
│   │   ├── main.css
│   │   └── module-1.css
│   └── index.html
├── .gitignore
├── README.md
└── package.json

Różnica między opcją #1 a #2 jest zasadnicza. Wszystkie pliki *.js zostają potraktowane przez dowolny module bundler (np. Webpack, Browserify) i sklejone w jeden plik wynikowy (lub więcej jeśli pojawi się taka potrzeba) tzw. “bundle” (pakiet, paczka).

Katalog dist/ zawiera źródła projektu, czyli pliki *.js oraz ich mapy (pliki o rozszerzeniu *.js.map).

Oczywiście katalog dist/ nie powinien być dodawany do systemu kontroli wersji (np. Git). Nie ma sensu wersjonować zbudowanego kodu, dlatego też warto go wykluczyć .

Wyjątkiem od tej zasady jest tworzenie bibliotek, które charakteryzują się tym, że dla korzystających nie jest ważne z ilu plików zostały stworzone oraz czy są budowane z użyciem transpilera. W projektach tego typu najważniejszy jest plik wynikowy, czyli plik z biblioteką (plikiem) gotowym do użytku.

Kiedy warto zastosować?

Ta architektura z uwagi na wykorzystanie module bundlera pomocna jest w sytuacji większego projektu. Wykorzystanie Webpacka z definicji pomaga w zarządzaniu modułami.

Jak to wygląda w praktyce?

Przykłady zrealizowanych projektów:

https://github.com/piecioshka/test-webpack

Opcja #3 - Źródło (`src/`) oraz Dystrybucja (`dist/`)

Jak już możesz się domyślić trzecia opcja jest ewolucją poprzedniej. Struktura projektu jest taka, że źródła aplikacji silnie oddzielamy od wersji aplikacji, którą uznajemy za “dystrybucyjną”.

Wersja dystrybucyjna to taka która zawiera źródła aplikacji, które były poddane różnym procesom, np. transpilacji kodu poprzez Babel.js, sklejane w jeden plik wynikowy.

.
├── dist
│   ├── images
│   │   ├── banner.jpg
│   │   ├── favicon.ico
│   │   └── logo.png
│   ├── bundle.css
│   ├── bundle.js
│   └── index.html
├── src
│   ├── images
│   │   ├── banner.jpg
│   │   ├── favicon.ico
│   │   └── logo.png
│   ├── scripts
│   │   ├── main.js
│   │   └── module-1.js
│   ├── styles
│   │   ├── main.css
│   │   └── module-1.css
│   └── index.html
├── .gitignore
├── README.md
└── package.json

Kiedy warto zastosować?

Takie podejście jest bardzo pomocne kiedy chcemy mieć pewność, że użytkownik nie będzie miał dostępu do źródeł projektu i aplikacji. Świetnym przykładem może być tutaj zbudowanie wersji dystrybucyjnej, którą wysyłamy podmiotom trzecim (poprzez przesłanie paczki z nową wersją aplikacji).

Najlepszym przykładem będzie stworzenie biblioteki. Taka architektura sprawdza się bardzo dobrze.

Jak to wygląda w praktyce?

Przykłady zrealizowanych projektów:

Opcja #4 - Publiczny katalog (`public/`)

Kolejnym przykładem jest wyodrębnienie katalogów scripts/ oraz styles/ poza katalog dostępny dla użytkownika, czyli public/.

W ustawieniach domeny przekierowujemy użytkownika na katalog na serwerze [...]/example-project/public/, tym samym źródła aplikacji są bezpieczne, tzn. nie ma do nich dostępu z poziomu internauty, czyli przeglądarki internetowej.

.
├── public
│   ├── dist
│   │   ├── bundle.css
│   │   └── bundle.js
│   ├── images
│   │   ├── banner.jpg
│   │   ├── favicon.ico
│   │   └── logo.png
│   └── index.html
├── scripts
│   ├── main.js
│   └── module-1.js
├── styles
│   ├── main.css
│   └── module-1.css
├── .gitignore
├── README.md
└── package.json

Kiedy warto zastosować?

Hybryda poprzednich architektur, łączy ze sobą plusy i minusy poprzednich. Taka koncepcja przydatna jest w sytuacji projektów, które mają podział na pliki dostępne dla użytkownika oraz główne źródła aplikacji. W tej architekturze współdzielone są assety, czyli wszelkie obrazki, fonty czy muzyka.

Jak to wygląda w praktyce?

Przykłady zrealizowanych projektów:

Słowo podsumowania

Nie ma idealnej struktury. Istotne jest dobranie odpowiedniej do celu projektu. Ważne jest aby nie mieszać konwencji.

Git. Globalna konfiguracja

Piotr Kowalski — Mon, 06 Feb 2017 00:00:00 +0000

W dobie dzisiejszej popularności systemu kontroli wersji Git, chciałem przedstawić Tobie jak wykorzystać globalną konfigurację, aby plik .gitignore w dowolnym projekcie nie zawierał nadmiarowych informacji.

Częsty problem

Wiele razy widzę, jak w projektach na GitHubie dodane są katalogi z konfiguracją edytorów, które są zupełnie niepotrzebne osobom trzecim, wykorzystującym ten projekt do własnych celów.

WebStorm i jego katalog `.idea`

I tak na przykład WebStorm (edytor firmy JetBrains) tworzy katalog .idea, w którym zapisuje różne ustawienia projektów.

Ten katalog jest pomocny, kiedy korzystamy z zaawansowanych funkcjonalności edytora, na przykład wykluczania katalogów. Proces polega na wyłączeniu z procesu indeksowania oraz wyszukiwania dowolnych katalogów, na przykład katalogów node_modules albo bower_components zawierających zależności projektów.

Jak wykluczyć katalog?

Aby “wyłączyć” katalog z projektu należy kliknąć prawym przyciskiem myszy na katalogu oraz wybrać: Mark Directory as -> Excluded

Od tej pory wybrany katalog nie będzie brany pod uwagę przez edytor. Informacja o tym stanie zostanie zapisana w katalogu .idea. Dlatego też trzeba wykluczyć katalog .idea z systemu kontroli wersji.

Nie ma absolutnie żadnych przesłanek, aby katalog .idea był wersjonowany wiec nie ma sensu dodawać go do Gita.

Aby to zrobić programiści często w pliku .gitignore, w katalogu głównym projektu dodają linijkę, która wyklucza katalog .idea. Niestety informacja ta nie powinna znaleźć się w pliku .gitignore projektu, bo nie jest z nim związana, dotyczy wyłącznie konfiguracji środowiska programisty.

Jak wykorzystać plik `.gitignore` w katalogu użytkownika?

Git daje możliwość stworzenia pliku .gitignore w katalogu projektu, aby wykluczyć rzeczy projektowe, oraz w katalogu użytkownika, aby wykluczyć katalogi i pliki, które zależą od wybranego środowiska developerskiego (edytor, system operacyjny, etc.).

Informacja o wykluczeniu katalogu .idea powinna znaleźć się w pliku .gitignore, który znajduje się w katalogu użytkownika. Jeśli taki plik nie istnieje, warto go stworzyć.

Każdy system operacyjny tworzy pliki ukryte (tymczasowe), których także nie ma sensu dodawać do systemu kontroli wersji.

Nie wyobrażam sobie, że miałbym w każdym projekcie dopisywać do pliku .gitignore informację, aby katalog .idea był ignorowany, albo jakiś inny katalog z ustawieniami edytora, którego obecnie używam.

Jak skonfigurować globalny plik `.gitignore`?

Aby skonfigurować Gita proponuję wykonać następujące polecenia:

# ~ (tylda) znak ten odnosi się do katalogu domowego użytkownika
touch ~/.gitconfig

git config --global core.excludesfile ~/.gitignore
vim ~/.gitignore

# W pliku ~/.gitignore dodaj katalog .idea/
# A teraz wykonaj w katalogu projektu polecenie `git status`

Moja konfiguracja

Przedstawiam zawartość mojego pliku ~/.gitignore

# Windows
$RECYCLE.BIN/
Desktop.ini
*.db
*.autosave

# Linux
*~
.directory

# macOS
.Spotlight-V100/
.Trashes/
.DS_Store
._*

# Edytory
.idea/
.settings/
.project
nbproject/
*.swp
.vscode

Dodałem katalog `.idea` do projektu, co robić?

Ignorowanie katalogu .idea nie usunie go z systemu kontroli wersji Git.

Po tym jak dodałeś w globalnym pliku .gitignore informację o tym, żeby Git ignorował katalog .idea, należy usunąć ten katalog poleceniem (będąc w katalogu projektu)

git rm -rf .idea

Oraz stworzyć rewizję (commit) z tą zmianą:

git commit .idea -m "Remove WebStorm settings directory"

WarsawJS Meetup #28

Piotr Kowalski — Tue, 17 Jan 2017 00:00:00 +0000

Ostatnie spotkanie w Państwomiasto. Żal zmieniać miejsce, ale taki stan rzeczy był do przewidzenia. Liczba osób, które chcą brać udział w naszych spotkaniach zwiększa się z meetupu na meetup.

Podczas ostatniego spotkania w 2016 roku mieliśmy dwie prelekcje oraz mini workshop poprowadzony przez Kamila. Każdy mógł przyjść ze swoim komputerem i w ciągu 30 minut zakodować serwer w Node.js w oparciu o architekturę GraphQL.

Invitation

Zapowiedź nagrywaliśmy podczas WarsawJS Workshop #1 , czyli nowej inicjatywie organizacji WarsawJS, która ma miejsce w Campus Warsaw.

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Rapid prototyping and easy testing in Ember with Ember CLI Mirage [EN] Krzysztof Białek

Krzysztof opowiadał o Mirage, czyli narzędziu do testowania aplikacji tworzonych w oparciu o Ember.js. Zapraszam wszystkich pasjonatów tego frameworka do obejrzenia tej anglojęzycznej prelekcji developera z Rebased.

Link do prelekcji: youtube.com/watch?v=MTkMgtgqAQs

•

Talk #2: Declarative UI. Relay is the way? [PL] Kamil Grabek

Kontynuacja tematu który został rozpoczęty podczas WarsawJS Meetup #27 i prelekcji pt. “GraphQL in a nutshell” tego samego speakera.

Kamil opowiadał o innym podejściu do budowania aplikacji webowych. Zapraszam wszystkich developerów, którzy tworzą architekturę dla nowego, dużego systemu webowego, aby obejrzeli tę prelekcję.

Podobnie jak miesiąc temu Kamil poprowadził mini-workshop budując pełnoprawny serwer GraphQL. Może w przyszłym roku będzie cały dzień z GraphQL-em? Zastanowimy się.

Link do prelekcji: youtube.com/watch?v=HFQvUr_yqVU

•

Sponsorzy spotkania

10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live
Softwarely - dodatkowe wsparcie

Podsumowanie

Bardzo dziękujemy PM za te ponad 2 lata udostępniania nam przestrzeni w sali konferencyjnej. Jako organizatorzy uważamy, że nie mogliśmy lepiej rozpocząć. Świetna lokalizacja w centrum miasta z super jedzeniem.

Będzie co wspominać. Dziękujemy ❤️

Długość artykułu w minutach

Piotr Kowalski — Fri, 16 Dec 2016 00:00:00 +0000

Kilka lat temu gdy powstała platforma Medium.com ich artykuły rozpoczynały się od bardzo przydatnej informacji - ile czasu zajmie przeczytanie danego artykułu.

Informacja o liczbie minut jakie trzeba poświęcić aby przeczytać artykuł.
W tym serwisie znajduje się ona zawsze pod nagłówkiem artykułu.

Co nam po takiej informacji?

Każdy z nas czyta artykuły w sieci. Niektóre są krótsze, niektóre dłuższe. Artykuły zawierające mniej tekstu mają to do siebie, że czas potrzebny na ich przeczytanie jest proporcjonalnie krótszy.

Po otworzeniu danego artykułu podejmujemy mikro decyzję, czy czytamy go od razu czy jednak zostawiamy na później, czego powodem może być np. brak czasu w danej chwili.

Taki mikro wybór jest dokonywany przez nas, internautów, bardzo szybko. Jest kilka czynników, które mogą pomóc nam podjąć tę decyzję.

Co jeśli przed otworzeniem artykułu, np. na liście postów, pokażemy informację czasie potrzebnym na zapoznanie się z danym artykułem? Internauta podejmie decyzję jeszcze przed kliknięciem w zachęcający tytuł. Oszczędzi to mu czas i nerwy, które mogą się pojawić, gdy jakiś artykuł okaże się dłuższy niż czas, który czytelnik może mu poświęcić.

Dobre zasady pisania postów

Jeśli post zawiera interesujące tło, albo obrazki w artykule są ciekawe, mózg czytelnika otrzymuje bodziec, który sygnalizuje, że jest się na stronie godnej uwagi i może warto przeczytać znajdujący się na niej artykuł.

Dobrze sformatowana treść również zaprasza czytelnika do przeczytania artykułu w całości. Gdy internauta zobaczy ścianę tekstu, to jest bardzo duża szansa, że zamknie kartę przeglądarki.

Projekt: jekyll-time-to-read-in-polish

Chciałem zamieścić taką informację o długości artykułu stworzyłem więc projekt, który pomaga mi zrealizować ten cel. Projekt dostępny jest na moim profilu na GitHubie. Plugin analizuje liczbę słów znajdujących się w artykule.

Jeśli korzystasz z Jekyll-a to polecam Ci wypróbowanie tego dodatku na łamach swojego bloga. Link do projektu znajduje się w nagłówku tej sekcji.

Podsumowanie

Pokazanie (orientacyjnej) informacji o czasie, jaki trzeba poświęcić, aby przeczytać artykuł pomaga internaucie odpowiedzieć sobie na pytanie, które zadawane jest przed rozpoczęciem czytania dowolnej treści w sieci:

Czy jestem w stanie / chce mi się poświęcić X minut, aby przeczytać post o takim tytule?

WarsawJS Workshop #1

Piotr Kowalski — Tue, 13 Dec 2016 00:00:00 +0000

4 grudnia 2016 roku odbyły się pierwsze warsztaty pod szyldem WarsawJS, których byłem współorganizatorem. Myślą przewodnią tych warsztatów była nauka początkujących. Wszyscy Ci którzy nie mieli wcześniej styczności z programowaniem mogli przyjść i przez całe 8 godzin tworzyć projekt galerii zdjęć pod okiem trenerów.

Jak zrodził się pomysł?

Po 2 latach organizowania meetupów stwierdziliśmy, że jako organizacja moglibyśmy spróbować swoich sił w zorganizowaniu czegoś więcej.

Tym samym wpadliśmy na pomysł zorganizowania ankiety, która miała na celu weryfikację, czym uczestnicy meetupów byliby zainteresowani. Do wyboru w ankiecie były 2 opcje:

konferencja
warsztaty

Ponad połowa osób opowiedziała się za warsztatami.

Plan

Podczas WarsawJS Meetup #26 założyliśmy event na Meetup.com oraz poprosiliśmy o sugestie atrakcyjnych tematów byłyby dla członków naszej organizacji.

Link do eventu meetup.com/WarsawJS/events/234806304/ gdzie opisane są zasady oraz wszelkie informacje techniczne potrzebne uczestnikom.

Wielu ludzi opowiedziało się za Angularem, Reactem oraz innymi bibliotekami.

Jednak, jak przez mgłę można było dostrzec liczne głosy, że może temat warsztatu gdzie moglibyśmy nauczyć się podstaw byłby dobrym pomysłem. Tak też zrobiliśmy.

Po 2 miesiącach zbierania wyników, ogłosiliśmy na profilu wydarzenia jaki mamy plan na tematykę kolejnych warsztatów. Pozwolę sobie skopiować tę listę. W tym roku odbyło się jedno szkolenie:

Grudzień 2016: Podstawy JavaScript (część 1) - dla początkujących

W następnym roku planujemy szkolenia z następujących tematów:

Styczeń 2017: Podstawy JavaScript (część 2) - dla średnio zaawansowanych
Luty 2017: Angular 1
Marzec 2017: Angular 2 (angular-cli)
Kwiecień 2017: Node.js [tutaj mamy 3 propozycje]
Maj 2017: Meteor.js
Czerwiec 2017: Web Components
Lipiec 2017: Portal społecznościowy w oparciu o Firebase
Sierpień 2017: RxJS 5 - Reactive programming
Wrzesień 2017: Gamedev: Wyścigi samochodowe z użyciem Phaser.js
Październik 2017: React.js + Enzyme + Redux
Listopad 2017: Vue.js
Grudzień 2017: React Native - tworzenie aplikacji na iOSa i Androida

Nie chcąc czekać jeszcze w tym roku zorganizować pierwsze warsztaty.

Praca wre!

Lokalizacja

Znalezienie miejsca na zorganizowanie warsztatów nie sprawiło trudności, ze względu na świetną propozycję jaką dostaliśmy od Campus Warsaw.

Campus Warsaw mieści się na ulicy Ząbkowskiej 27 - na Pradze Północ. Pod tym adresem znajdują się budynki, już nieaktywnej warszawskiej wytwórni wódek “Koneser”.

Większość zabudowań należących do wytwórni przetrwało II wojnę światową. Piękne mury budynki zawdzięczają czerwonej cegle, z której są zrobione. Na Wikipedii wyczytałem, że jest to styl neogotycki.

Akurat w budynku w którym znajduje się biuro Campus Warsaw jest wyróżniająca się w tle brama wjazdowa - pozostałość po starej wytwórni.

Koneser - Warszawska wytwórnia wódek.

Lokalizacja jest wyśmienita. Blisko metra, tramwaju, pociągu czy autobusu. Fakt - z każdego środka komunikacji trzeba jeszcze przebyć 5-10 minut pieszo, ale to chyba nie problem 😄

Bilety

5 dni przed eventem uruchomiliśmy rejestrację za pomocą systemu Evenea. Bilety sprzedały się w oka mgnieniu. Nie spodziewaliśmy się tak szybkiej sprzedaży. Po 3 godzinach wszystkie bilety były wykupione.

Po wyprzedaniu biletów na stronie eventu zaczęły pojawiać się zapytania, czy ktoś ma może bilet do odsprzedania. Miło kiedy ludziom zależy na czymś czego jest się twórcą 😄

Bycie trenerem…

…to brzmi dumnie! Uwielbiam uczyć ludzi, patrzeć jak nagle rozumieją co do nich mówię i sami tworzą ciekawe rozwiązania!

Mieliśmy 4 trenerów dostępnych podczas warsztatów:

Piotr Kowalski: twitter.com/piecioshka
Piotr Zientara: twitter.com/piotr_zientara
Rafał Gierczak: linkedin.com/in/rafał-gierczak-b431318a
Piotr Błaszczak: linkedin.com/in/piotr-błaszczak-650b4724

Trenerzy pierwszego edycji WarsawJS Workshop.

Tym samym liczba uczestników była limitowana pod tym kątem. Chciałem, jako organizator, aby każdy z trenerów pomagał grupie maksymalnie 10 osobowej.

Prework & Postwork

Jako organizatorzy wpadliśmy na pomysł, aby przed pierwszym spotkaniem przygotować zadanie, które wprowadzi w programowanie Front-end.

Postanowiliśmy, że wyślemy do uczestników zadanie, którego celem będzie realizacja strony z napisem “Hello world”. Dla doświadczonego developera wydaje się, że jest to zadanie zbyt proste. Jednak ze względu na to, że uczestnikami pierwszego workshopu będą ludzie bez doświadczenia to takie wyzwanie idealnie się wpasowuje.

Dziś wysłaliśmy drugie zadanie. Tym razem w formie pracy domowej, czyli tzw. postworka. Celem takiego zadania jest rozwijanie wiedzy nabytej podczas WarsawJS Workshop.

Jako organizatorzy liczymy na to, że w naszej skrzynce za kilka dni pojawią się maile z linkami do waszych projektów. Na każdego maila odpowiemy przesyłając techniczny feedback.

github.com/piecioshka/warsawjs-workshop-gallery - zadanie jakie było do wykonania podczas pierwszego szkolenia
github.com/piecioshka/warsawjs-workshop-slider - zadanie jakie trzeba wykonać jako praca domowa.

Słowo na koniec

Bardzo dziękujemy wszystkim za przybycie. Mamy nadzieje, że nie odpuścicie rozwijania swoich kompetencji programistycznych i będziecie zgłębiać tajniki JavaScriptu!

Organizowanie warsztatów było dla nas, organizatorów, nowym i bardzo ciekawym wyzwaniem dającym wiele frajdy. Dziękujemy za przybycie!

"JavaScript" to nie to samo co "Java"

Piotr Kowalski — Fri, 09 Dec 2016 00:00:00 +0000

Podczas mojej pracy zawodowej przychodzi mi czasem rozmawiać z ludźmi, których domeną nie jest programowanie. Tym samym nie znają języków programowania oraz różnic jakie pomiędzy nimi występują a tym bardziej ich zastosowania.

Tym artykułem chciałbym nauczyć ludzi “nietechnicznych”, o dziwnym zbiegu okoliczności jaki ma miejsce w świecie programowania, mianowicie kolizji nazw dwóch języków, wymienionych przeze mnie w tytule.

Na wstępie chciałem zaznaczyć, że tym artykułem nie mam zamiaru nikogo obrażać, a tylko naświetlić problem jaki występuje, kiedy nazwy różnych języków programowania stosowane są zamiennie.

Skrót?

Niestety, ale “Java” to nie jest skrót od “JavaScript”.

Dla …rekrutera

Praca rekrutera to ciężki kawałek chleba. Musi wyszukiwać programistów na rynku pracy, umawiać się z nimi na spotkania, towarzyszyć w całym procesie rekrutacji.

Cały ten proces wymaga skupienia oraz kompletu informacji o profilu programisty jaki jest poszukiwany.

Poszukiwanie programisty to chyba najtrudniejszy etap w całym procesie zatrudniania nowej osoby. I tutaj popełnianych jest wiele błędów przez początkujących Human Resource Managerów.

Znalezienie stosownego kandydata wiąże się z wysyłaniem ogromnej ilości zapytań. Łatwo jest tutaj popełnić mały błąd, który może zaważyć na odbiorze firmy do której rekruterzy poszukują pracowników.

Nie ważne jest to, czy błąd został popełniony z pośpiechu, czy z niedbalstwa. My programiści szybko wyłapiemy błędy.

Może warto aby HR managerzy byli wykształcenia technicznego? Nie wiem. Można tylko gdybać.

Poszukiwanie osoby na stanowisko JavaScript Developera to nie jest to samo, co poszukiwanie kandydata na stanowisko Java Developera.

Nie chce tutaj omawiać innych błędów, które się zdarzają, np. gdy dostaje się maile z innym imieniem i nazwiskiem odbiorcy. Tutaj niech wytłumaczeniem będzie szum komunikacyjny jaki towarzyszy rekruterom.

Rada

Moja rada jest prosta. Przywiązujcie wagę do nazwy stanowiska na jakie szukacie programisty. Java to zupełnie inny język niż JavaScript. Nie należy tego mieszać. Nigdy.

Dla …pracowników księgarni

Większość z nas, programistów, lubi czytać książki techniczne. Zawierają one (zwykle) poukładaną wiedzę na temat danej dziedziny.

Księgarnie mają to do siebie, że zawsze panuje w nich podział tematyczny. Taki stan rzeczy bardzo odpowiada programistom, których cechuje logiczne myślenie.

Moja historia

Wchodząc do księgarni, szukam regału z książkami dotyczącymi programowania. Gdy już znajdę, szukam tych, które interesują mnie najbardziej, tj. związanych z szeroko pojętym Front-end-em.

Moim oczom ukazuje się cała gablotka na pierwszy rzut oka interesujących dla mnie książek. Jednak gdy podejdę bliżej, widzę książki pt. “Java. Podstawy.”, “Java. Kompendium”. Na mojej twarzy zawsze maluje się wtedy uśmiech, gdy widzę jak książki o JavaScripcie mieszają się z książkami o Javie.

Chciałbym kiedyś wejść do księgarni i nie natknąć się na taką sytuację. Miałbym wtedy większe zaufanie, że osoby pracujące w księgarni wiedzą z jakimi książkami mają do czynienia.

Rada

Moja rada jest prosta. Jeżeli, koleżanko albo kolego, pracujesz w księgarni i masz za zadanie poukładać książki w dziale INFORMATYKA, to proszę abyś robił/a to uważnie. Programisty JavaScript nie interesują książki o Javie i odwrotnie. Zapamiętaj proszę.

Dla …początkującego programisty

Jeśli zaczynasz swoją przygodę z programowaniem, to prędzej czy później dowiesz się, że Java i JavaScript to zupełnie inne języki, ale jeśli zabraknie Ci dowodów, to chciałbym Co przedstawić podobieństwa i różnice tych dwóch języków powstałych w tym samym roku (1995).

Podobieństwa

Oba języki są multi-platformowe - uruchomią się na wszystkich konfiguracjach sprzętowych.
Obiekty wbudowane Math i Date są takie same w obu językach.
JavaScript zawiera listę zarezerwowanych słów prosto z Javy
Składnia języka JavaScript była wzorowana na języku Java.

Różnice

Autorem Javy jest Sun Microsystems.

Autorem JavaScriptu jest Netscape Communications.
Java jest językiem programowania.

JavaScript jest językiem (programowania) skryptowym.
Java jest językiem kompilowanym i uruchamianym w wirtualnej maszynie.

JavaScript interpretowany i uruchamiany w przeglądarce.
Oba języki programowania są zorientowane obiektowo, jednak JavaScript zawiera obiektowość prototypową,

natomiast Java obiektowość klasyczną.
W JavaScript nie ma klas (klasy z ES2015 to tylko syntactic sugar). W Javie są klasy.
W JavaScript, obiekty nie posiadają prywatnych i chronionych właściwości i funkcji. W Javie można zdefiniować tryb dostępu do właściwości albo metody.

Rada

Wielkim faux pas byłoby, gdybyś jako programista nie znał różnicy między tymi dwoma najpopularniejszymi językami programowania. Proszę przeczytaj ww. punkty i połowę z nich zapamiętaj. Nalegam.

Zabawne porównania

Jak już wspomniałem, te 2 języki programowania są zupełnie odmienne. W związku z tym powstało wiele zabawnych porównań wyśmiewających zestawianie ich nazw.

O to lista najpopularniejszych:

PL
- koń i koniak
- rum i rumak
EN
- ham and hamster
- car and carpet
- grape and grapefruit

Więcej angielskich zwrotów znajdziesz na stronie javascriptisnotjava.io

Podsumowanie

Na koniec chciałem dodać, że pisząc ten artykuł chciałem zaznaczyć jasno, że istnieją duże różnice między tymi językami. Mieszanie nazw tychże języków, szczególnie wśród programistów, rodzi mnóstwo niepotrzebnych komplikacji i nieporozumień.

Historia języka JavaScript

Piotr Kowalski — Fri, 02 Dec 2016 00:00:00 +0000

Jako świadomy programista języka JavaScript, chciałem przedstawić wam historię tego języka. Wpis będzie również zawierał informację o powstaniu języka Java.

Logo JS-a zaproponowane przez Chrisa Willisa podczas konferencji JSConf EU 2011.

tl;dr

lata 70, XX wieku

Z uwagi na rosnące zapotrzebowanie producentów urządzeń, potrzebne było oprogramowania, które będzie w stanie działać na wszystkich typach urządzeń.
lata 90, XX wieku

Sun Microsystems stworzyło język Java (nazwa pochodzi od kawy produkowanej na wyspie Jawa), którego ideą był WORA - Write once, run anywhere.
Netscape Communications chciało wprowadzić do swojej przeglądarki dynamikę znaną z programów desktopowych.
Sun Microsystems chciało aby Netscape Communications wprowadziło do swojej przeglądarki Javę.
Netscape Communications nie zgodziło się. Chciało wprowadzić coś co trafi do szerszego grona odbiorców niż tylko programistom Javy.
kwiecień 1995

W Netscape Communications zatrudnili programistę, który z języków: Java, Scheme i Self skonstruował nowy język o nazwie LiveScript.
Sun Microsystems, jako partner w biznesowej ofensywie na Microsoft nie był zadowolony z tego pomysłu i chciał unicestwić projekt LiveScript.
koniec roku 1995

Firma Netscape Communications wpadła na pomysł zmiany nazwy na JavaScript, który jakoby miał mieć coś wspólnego z Javą.
Sun Microsystems zaakceptowało pomysł, ale przejęło prawa do marki udzielając licencji na używanie nazwy tylko firmie Netscape Communications.
czerwiec 1997

Netscape Communications wraz z ECMA tworzy standard nowego języka - ECMAScript.

Od czego to się wszystko zaczęło?

W XVII w. na wyspę Jawa została sprowadzona przez Holendrów kawa gatunku Arabica (nazwana później Liberica, a potem Robusta).

W dniu 9 listopada 1981 roku powstała w Mountain View firma Silicon Graphics, założona przez James H. Clarka, która była amerykańskim producentem wysokiej jakości hardware-u (sprzętu komputerowego) oraz software-u.

W 1982 roku, 24 lutego powstała firma Sun Microsystems, zajmowała się podobnie jak Silicon Graphics produkcją oprogramowania.

W 1986 roku na uniwersytecie w Illinois w USA, powstała komórka zajmująca się rozwojem oraz wdrażaniem krajowego oprogramowania komputerowego.

Po co ta Java?

W 1990 firma Sun Microsystems powołała komórkę Sun Labs, która miała zajmować się nowymi technologiami webowymi, rozwijaniem nowego języka programowania oraz sieciami komputerowymi.

W tym samym czasie, w komórce ds. rozwoju nowego języka, James Gosling razem z grupą innych ludzi zajmowali się tworzeniem języka, który mógłby być uruchamiany na komputerach z dowolną konfiguracją sprzętową.

Programy napisane w C lub C++ mogły być uruchamiane tylko na urządzeniach z takim samym procesorem, aby wykorzystać w pełni potencjał maszyny. Nie nadawały się więc do nowych urządzeń, które miały inną konfigurację sprzętową. Dlatego też powstał projekt stworzenia nowego języka, który nadawałby się lepiej do oprogramowania użytkowego niż C i C++.

Początkowo język nazwano “Oak”, ze względu na wielki dąb w pobliżu budynku w którym prowadzono prace. Ponieważ istniał już język o takiej nazwie należało znaleźć alternatywę. Po długich dyskusjach olśnienie przyszło podczas wyjścia do sklepu z kawą.

Java to nazwa kawy produkowanej na wyspie o takiej samej nazwie. Jest to też slangowe określenie kawy w USA.

Narodziny najpopularniejszej przeglądarki internetowej

Na początku lat 90. James H. Clark odszedł z Silicon Graphics.

W 1993 roku National Center for Supercomputing Applications wypuściła przeglądarką webową o nazwie NCSA Mosaic. Nie była to pierwsza przeglądarka na rynku, ale jako pierwsza pozwalała na wyświetlanie obrazków (wspierała tag <img>).

W tym samym roku James H. Clark poznał Marca Andreessena, z którym zamierzał podbić rynek przeglądarek.

W 1994 roku, w Mountain View, panowie razem zarejestrowali firmę Mosaic Communications. Zatrudnili autorów przeglądarki NCSA Mosaic w celu stworzenia nowej pod nazwą Mosaic Navigator, która miała nie mieć ani jednej linijki kodu z pierwotnej wersji.

(Wewnątrz projektu nową przeglądarkę nazywano “Mozilla”, czyli “Mosaic killer”. Celem nowo powstałej firmy, było stać się liderem na rynku przeglądarek.)

15 grudnia 1994 roku miała miejsce premiera pierwszej wersji przeglądarki Mosaic Netscape 1.0. Po kilku miesiącach udało się zdobyć ponad 70% rynku. Zyskanie takiej popularności przyniosło wspieranie tagu ≶blink> (powodującego mruganiem tekstu) oraz elementów formularza.

(Aby uniknąć problemów z NSCA, nazwa przeglądarki została zmieniona na Netscape Navigator, a po kilku miesiącach - w tym samym roku - firma zmieniła nazwę na Netscape Communications.)

Narodziny języka LiveScript

Marc Andreessen stwierdził, że świat webu potrzebuje czegoś bardziej zaawansowanego, czegoś co będzie klejem dla obecnego HTMLa. Model przeglądarkowy utracił interaktywność. Dlatego Java była taka atrakcyjna, bo przywracała interaktywność w przeglądarce co pozwalało rywalizować z aplikacjami desktopowymi.

Początkowo firma chciała, aby dynamika była podobna do mechanizmu HyperCard, systemu rozwijanego przez Billa Atkinsona w Apple, który miał na celu ułatwienie programowania na platformę Macintosh. Dostępnych było mnóstwo przycisków, do których można było przypisać dowolne skrypty. Firma Netscape Communications chciał zrobić coś podobnego, ale na stronie internetowej.

W 1995 roku firma Netscape Communications zatrudniła kolejnego programistę z MicroUnity, który wcześniej pracował w Silicon Graphics, Brendana Eicha. Brendan na rozmowie rekrutacyjnej powiedział, że chciałby w przeglądarce Netscape Navigator osadzić interpreter języka programowania Scheme. Firmie bardzo to się spodobało, bo właśnie tego oczekiwali od nowego kandydata.

Po rozpoczęciu prac, firma zorientowała się jak wygląda język Scheme i zarządziła zmiany, w obawie że w obecnej formie nowy język będzie mało atrakcyjny. Firma zaproponowała, aby Brendan osadził język przypominający np. Visual Basic albo Javę - czyli języki już cieszące się popularnością.

Netscape Communications w porozumieniu z Sun Microsystems chciało dodać do swojej przeglądarki wsparcie dla języka Java, aby konkurować z Microsoft-em pod kątem nowych technologii. Netscape Communications zdecydowało, że język, który stworzą i dodadzą do swojej przeglądarki, będzie uzupełnieniem do języka Java o podobnej składni. Z miejsca wykluczało to więc osadzenia takich języków jak Python czy Perl. Aby bronić swojej idei wobec konkurencyjnych propozycji firma potrzebowała jednak prototypu.

Brendan zmiksował elementy trzech języków: Java - ponieważ powiedziano mu, że musi użyć tego języka oraz dwóch innych bardzo interesujących języków: Scheme (dialekt Lispa, skąd pochodzi pomysł first-class functions) oraz Self (język który bazował na Smaltalku, skąd zaczerpnięty został pomysł prototypów), które nie były znane na rynku programistów. Wykorzystywane były głównie przez twórców innych języków języków programowania. Taki wybór okazał się sporym zaskoczeniem.

Projekt został przeniesiony do Sun Labs firmy Sun Microsystems, aby od czasu do czasu móc wspierać rozwój projektu odnośnie języków Java i Self. Z jakiegoś powodu firma Sun Microsystems podjęła decyzję o zaprzestaniu rozwoju jednego z nich. Wybrali Self.

Brendan Eich stworzył w maju nowy język. Zrobił to w 10 dni.

W swojej opowieści Brendan dodaje, że razem ze swoim kolegą z pracy, Kippem Hickmanem, rywalizowali, który język da się lepiej osadzić w przeglądarce. Po kilku dniach przełożony obu developerów, Bil Joy, przekonał ich do porzucenia projektu umieszczenia Javy w przeglądarce, ze względu na problemy jakie pojawiły się przy osadzaniu wirtualnej maszyny. Nie była ona kompatybilna z maszyną firmy Sun Microsystems.

Pierwsza wersja nowego języka nazywała się Mocha, ale w wersji beta przeglądarki Netscape Navigator 2.0, która została opublikowana we wrześniu, nazwa została zmieniona na LiveScript.

Dnia 23 maja 1995 roku firma Sun Microsystems podczas konferencji SunWorld, ogłosiła powstanie nowego języka programowania Java.

Narodziny języka JavaScript

Nowy język Java wraz z przeglądarką Netscape Navigator, wzbudziły wiele emocji, dlatego też Sun Microsystems oraz Netscape Communications podjęły decyzję o współpracy przeciwko firmie Microsoft, w obawie że pojedynczo nie wytrzymają konkurencji.

Największym punktem spornym w tym układzie był LiveScript. Sun Microsystems chciało dodać Javę do przeglądarki Netscape Navigator oraz zakończyć pracę nad LiveScriptem. Firma Netscape Communications nie zgodziła się na taki zabieg ponieważ wierzyli, że uda im się stworzyć coś w rodzaju funkcjonalności HyperCard. Z powodu braku porozumienia współpraca prawie została zerwana.

Aby załagodzić stosunki nazwa została zmieniona na JavaScript. I tak w 3 wersji beta przeglądarki Netscape Navigator 2.0 LiveScript został zastąpiony nazwą JavaScript.

Ostateczny wybór wprowadził zamieszanie jako iż wiele osób myślało, że JavaScript jest efektem ubocznym powstania Javy, która cechowała się większą popularnością.

Wybór został scharakteryzowany jako chwyt marketingowy firmy Netscape Communications aby pochwalić się wynalezienie nowego webowego języka programowania.

Spór ucichł - zmiana nazwy pomogła. Z drobnym wyjątkiem - firma Sun Microsystems zastrzegła prawa własności do znaku towarowego. Najciekawsze jest to, że firma nie miała nic wspólnego z nazwą, a nawet próbowała zabić ten język. W drodze przysługi Sun Microsystems udzieliło firmie Netscape Communications licencji na używanie nazwy nowego języka programowania, co było o tyle satysfakcjonujące, że posiadali ją na wyłączność.

Na dzień 4 grudnia 1995 przypadają narodziny języka JavaScript tj. wtedy firma Netscape Communications wydała oficjalne oświadczenie (link poniżej) o nowym, otwartym, multi-platformowym języku.

Można powiedzieć, że stabilna wersja języka JavaScript z numerem 1.0 pojawiła się wraz z opublikowaniem przeglądarki Netscape Navigator 2.0, a miało to miejsce 18 września 1995 roku.

Narodziny języka JScript oraz ECMAScript

Microsoft przypatrywał się temu z boku. Postanowił, że skopiuje język pod inną nazwą. Nie mogli używać nazwy JavaScript - prawa do niej miała firma Sun Microsystems (z którą Microsoft nie miał dobrych stosunków). Swoją kopię silnika nazwali JScript.

Z kolei firma Netscape Communications - gdy zobaczyła, że konkurencja kopiuje jej język, i że może on zostać przejęty i rozszerzany przez kogoś innego - postanowiła stworzyć standard. Początkowo próbowała ustandaryzować swój język w organizacji W3C, ale niestety współpraca nie została nawiązana.

Dopiero organizacja ECMA (European Computer Manufacturers Association z siedzibą w Genewie) zdecydowała się nawiązać współpracę, dzięki temu firma Netscape Communications mogła wykupić u nich standard. Było to w czerwcu w 1997 roku. Była to długa droga dla firmy z Kaliforni, ale się udało.

Firma chciała ustandaryzować język, ale nie chciała nazywać go JavaScript, ponieważ tylko Netscape Communications mógł nazywać ten język JavaScript. Komitet starał się wymyślić inną nazwę. Koniec końców, został opublikowany dokument, który zawierał nazwę ECMAScript.

Podsumowanie

Historia naszego pięknego języka jest burzliwa, ale warto ją znać. Dobrą praktyką jest tworzenie tl;dr (too long; don't read), czyli krótkiego podsumowania. W 10 punktach zawarłem najważniejsze zwroty akcji o początkach tworzenia języka JavaScript.

Bibliografia

Konferencja: ngPoland 2016

Piotr Kowalski — Fri, 25 Nov 2016 00:00:00 +0000

W zeszły wtorek (22-11-2016) byłem uczestnikiem pierwszej polskiej konferencji poświęconej w 100% najpopularniejszemu frameworkowi w świecie JavaScript-u, czyli Angular-owi. Ciekawią Cię jakie są moje wrażenia z konferencji ngPoland? Czytaj dalej.

Oficjalne logo tegorocznej konferencji.

Techniczne notatki jak zawsze są dostępne na GitHubie. Są tworzone one podczas wydarzenia. Zapraszam: github.com/piecioshka/notes-ng-poland-2016

Lokalizacja

Kto się spodziewał, że konferencja odbędzie się na stadionie narodowym? Większość pewnie zadawała sobie pytanie, czy wydarzenie przypadkiem nie odbędzie się na płycie boiska?

Niestety, ale na płycie boiska znajdują się 2 lodowiska, które przyciągają wszelkich zainteresowanych do swobodnej przejażdżki.

PGE Narodowy to piękny obiekt z zewnątrz ale i od środka. Obiekt zawiera wiele salek, które można wynająć w celach biznesowych (Business Link).

Rejestracja

Przed wejściem na salę z prelekcjami czekała rejestracja. Każdy uczestnik musiał się zarejestrować. Podczas rejestracji trzeba było pokazać swój bilet. W zamian dostawało się smycz z logo sponsora Acaisoft.

Jako uczestnicy dostawaliśmy też kuferek z poczęstunkiem (słodycze) i jeszcze kilka fantów. Świetny pomysł! Człowiek od razu na starcie jest miło przywitany - sprzyja to lepszemu odbiorowi całej konferencji.

Partnerzy … a wśród nich WarsawJS

Zakładaliśmy WarsawJS w celu aktywizacji warszawskich programistów JavaScript. Wszelkie formy networkingu oczywiście popieramy, dlatego też jesteśmy partnerami wielu inicjatyw, a konferencja ngPoland jest jedną z nich.

Zawsze cieszy widok, tylu ludzi zainteresowanych JavaScriptem. Szczególnie tych zakochanych w konkretnym frameworku. Ci developerzy starają się użyć tego narzędzia wszędzie gdzie się da - nie zawsze ma to pozytywne skutki 😄

Frameworki są stworzone, żeby rozwiązywać problemy. Nie ma frameworka, który rozwiązuje wszystkie problemy, więc i nie takiego, którego można użyć w dowolnym zastosowaniu.

Tomasz Ducin podczas swojej prelekcji na ngPoland powiedział:

Don’t focus on tools, focus on the problem. Tomasz Ducin

W pełni się z nim zgadzam. Chciałbym aby wszyscy myśleli podobnie.

Jak możecie zobaczyć, partnerami konferencji było mnóstwo organizacji zaangażowanych w aktywizację społeczności programistów, nie tylko warszawskich! Jak dobrze się przypatrzycie obrazkowi powyżej zobaczycie, że wśród sponsorów jest organizacja ng-poznan, która działa na podobnej zasadzie co organizacja AngularJS Warsaw, od której zaczynali organizatorzy konferencji, czyli:

Arek Kalbarczyk - developer, pracujący w 10Clouds
Darek Kalbarczyk - wieloletni developer, pracujący obecnie w 7N.

Z tego co wiem, w gronie współorganizatorów znajduje się także Emilię Łuszkiewicz.

Prezentacja organizatorów

Konferencja zaczęła się punktualnie o godzinie 9:00, gdzie na scenie pojawili się kuzyni: Arek i Darek - organizatorzy. Podziękowali wszystkim za przybycie oraz zaprosili do wysłuchania 16 prelekcji na temat Angular-a (w obu wersjach 1.x oraz 2.x).

Prelekcje jak i cała konferencja odbywała się w języku angielskim. To już standard na międzynarodowych konferencjach.

Co tam się działo?

Druga prelekcja i już banany na scenie!!?

Osoby, które zostały zaproszone do bycia speakerami nie były z tzw. ulicy. Prelegenci znali się już przed konferencją, więc mogli zrobić coś interesującego, jak chociażby wspólne śpiewanie!

Tracy Lee opowiadała o tym jak stowrzyć projekt w oparciu o angular-cli, ale przed tym jak zaczęła wgłębiać się w temat, zaprosiła swojego dobrego kolegę Bena Lesh-a z którym zaczęła śpiewać.

Jeszcze przed rozpoczęciem na scenie pojawił się człowiek-banan - wydaje mi się, że był to Uri Shaked, który śpiewał i tańczył jednocześnie. Wszystko to przed publicznością liczącą kilkuset osób.

Było to dla mnie NIESAMOWITE!

Nagroda

Organizatorzy przed lunchem, wpadli na pomysł, na realizację planu i wręczeniu kilku nagród pod szyldem: ng-awards.

Dostałem nagrodę jako przedstawiciel organizacji WarsawJS - największej społeczności JavaScript-owej w Warszawie. Chciałem zaznaczyć, że brawa należą się wszystkim organizatorom WarsawJS, aktualnym

oraz tym, którzy zrezygnowali z pełnienia tej funkcji, tj:

W imieniu wszystkich całej organizacji bardzo dziękuję 🎉

Spiderman na scenie!

Jako 8 na scenie w roli speakera pojawił się Gerard Sans, który to opowiadał o tworzeniu aplikacji opartej na frameworku Angular2, którą realizował na potrzeby chorego Spider-mana.

Brawa za kreatywność. Sala miała ubaw po pachy 😄

Konkurs na najbardziej zwariowane zdjęcie

Organizatorzy podczas otwarcia konferencji opowiadali o konkursie jaki będzie się toczył podczas wydarzenia, a mianowicie zawodów na najbardziej kreatywne zdjęcie tego dnia.

Postanowiliśmy z Piotrem wzięć udział. Stąd też powyższe zdjęcie. Proszę nie martwcie się o nasze zdrowie psychiczne - wszystko gra 😄

Podsumowanie

Na wstępie podsumowania, chciałem podziękować za możliwość uczestnictwa ekipie WarsawJS na tej konferencji. Jest to świetny dowód wsparcia warszawskich społeczności developerskich.

Ocena od strony organizatora

Konferencja od strony organizacyjnej stała na bardzo wysokim poziomie. Nie ma się do czego przyczepić.

Mogę śmiało dać w skali 1-5 ocenę 5. Good job!

Ocena strony merytorycznej

Jako zwolennik wszystkiego, co JavaScript-owe to dla mnie wszelkie rozmowy, prelekcje czy filmy są super. Więc nie jestem tutaj dobrą osobą na ocenę. Jeśli jednak miałbym dać jakąś cyferkę, to oczywiście 5 w tej samej skali co powyżej.

Inne artykułu traktujące o ngPoland 2016

Pozwolę sobie na stworzenie listy artykułów o konferencji, które zostały napisane przez innych uczestników.

Uri Shaked na scenie i jego zabawka - Raspberry PI,
na której uruchomił grę "Simon says...".

WarsawJS Meetup #27

Piotr Kowalski — Sat, 19 Nov 2016 00:00:00 +0000

Ten meetup był delikatnie inny niż poprzednie. Jako organizatorzy WarsawJS chcieliśmy trochę poeksperymentować. Tym samym, dołożyliśmy do standardowych 3 prelekcji mini workshop, aby zobaczyć, ile osób będzie zainteresowanych naszą nową inicjatywą WarsawJS Workshop.

Invitation

Film nagrywaliśmy w dość chłodny (bo musiałem mieć rękawiczki) dzień na pl. Trzech Krzyży, w centrum miasta.

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Single-page application loading time optimization. Powered by Webpack, React, Node.js and isomorphic-style-loader [PL] Michał Janaszek

Prelekcja była nt. optymalizacji działania ~~strony~~ aplikacji webowej. Skupiała się ona w większości na sposobie przyspieszenia ładowania się.

JSX jest dobry do opisu elementów wizualnych. Michał Janaszek

Pierwotnie analizowana aplikacja, przed załadowaniem treści pokazywała użytkownikowi tekst Loading i trwało to około 540 [ms]. Z kolei pełna treść tejże aplikacji wraz z funkcjonalnościami była dostępna po 3580 [ms].

Michał, przeprowadził aplikację przez kolejne 3 fazy i zredukował czas ładowania aplikacji do 257 [ms], a użytkownik nie był w stanie zobaczyć napisu Loading, ponieważ go po prostu nie było w aplikacji, zastąpiła go docelowa treść aplikacji.

Link do prelekcji: youtube.com/watch?v=R8La_pSPSGY

•

Talk #2: GraphQL in a nutshell [PL] Kamil Grabek

Podczas prelekcji dowiedzieliśmy się czym jest GraphQL oraz o kilku jego zaletach np. o tym, że GraphQL ma ściśle określony typ.

W skrócie jest to idea, w jaki sposób powinna odbywać się komunikacja klient-serwer. Kamil Grabek

Część kliencka aplikacji, gdzie jest wykorzystany GraphQL, jest w stanie powiedzieć serwerowi co chce dostać w odpowiedzi na zapytania.

Technologia GraphQL jest dość młoda. Ma dopiero 2 lata. Facebook - ze względu na to, że jest autorem projektu - korzystał już wcześniej. Technologia się rozwija, także dajmy jej szansę i zobaczymy jak za kilka lat będzie wyglądał protokół komunikacji klient-serwer.

Kamil po swojej prezentacji poprowadził mini workshopy z GraphQL, na których obecnych było ponad 20 osób.

Link do prelekcji: youtube.com/watch?v=w0AOqhzWK3E

•

Sponsorzy spotkania

10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live
Softwarely - dodatkowe wsparcie

Podsumowanie

Ze względu na to, że nasz eksperyment się powiódł, tj. na workshopach zostało kilkadziesiąt osób, to kolejne spotkanie (grudniowe), również będzie zawierało mini workshop o GraphQL, a dokładniej o Relay, ale o tym dowiecie się podczas kolejnej zapowiedzi wideo.

Do zobaczenia za miesiąc!

Hackathon: Node Knockout #6 (2016)

Piotr Kowalski — Tue, 15 Nov 2016 00:00:00 +0000

W miniony weekend brałem udział w maratonie dla programistów, czyli hackathonie! Od kilku lat jestem wiernym fanem hackathonu o nazwie Node Knockout, gdzie podstawową zasadą jest wykorzystanie technologii Node.js w aplikacjach biorących udział w zawodach.

Tematyka na takich zawodach jest dowolna. Można tworzyć aplikacje ale też i gry. Docelowym środowiskiem musi być przeglądarka internetowa. Dlatego też tworzenie aplikacji mobilnych, desktopowych czy na Smart TV albo Smart Watch odpada.

Co to jest Hackathon?

Hackathon jest zlepkiem 2 słów: hack oraz marathon. Podstawową ideą jest tworzenie czegoś, albo projektu programistycznego, albo czegoś z dziedziny hardware-u, non-stop, czyli bez przerwy, w określonych wcześniej ramach czasowych. Bardzo często jest to 48 godzin. Jeśli po 48 godzinach dalej będziemy rozwijać naszą aplikację zostaniemy zdyskwalifikowani.

Ostatnio nawet polski rząd stworzył hackathon. Więcej tutaj.

Zespół

Mój zespół liczył 3 osoby. W teamie Dumplings do którego należałem, znajdowały się jeszcze 2 osoby: Katarzyna oraz Krzysztof.

Kasia jest grafikiem komputerowym, taka umiejętność w tworzeniu aplikacji, czy gier jest nieoceniona. Jestem przekonany, że gdybyśmy z Krzyśkiem napisali super grę, ale nie miała by ona grafiki to nikomu by się nie podobała.

Według mnie grafika w grach to około 50% odbioru, reszta to: szybkość grania i ładowania, obsługa sterowania, interesująca fabuła itd.

Opis gry, stworzonej w 34 godziny

Hackathon zaczął się o w 0:00 UTC 12 listopada, więc czasu polskiego 1:00 w sobotę. A kończył 23:59:59 UTC w 13 listopada, czyli sekundę przed końcem niedzieli. Polskiego czasu to 0:59:59 w poniedziałek.

Jako zespół realizowaliśmy projekt w następujących ramach czasowych:

Sobota: 7:00 - 1:00 (niedziela) = 18
Niedziela: 9:00 - 1:00 (poniedziałek) = 16

HINT: Ważne jest, aby w ciągu tych dwóch dni zrobić przerwę na sen. Człowiek nie jest w stanie pracować przez 48 godzin non-stop. W takich zawodach wygrywają osoby, które dobrze zarządzą swoim czasem podczas hackathonu.

Screen z gry.

Gra dostępna jest pod adresem: dumplings.2016.nodeknockout.com/.

Głosować na nią można na stronie https://www.nodeknockout.com/entries/170-dumplings poprzez kliknięcie przycisku FAVOURITE albo jeśli byłeś zawodnikiem tych zawodów poprzez uzupełnienie formularza:

Formularz oceny projektów biorących udział w hackathonie Node Knockout 2016.

A jeśli jesteś geekiem (albo po prostu developerem) i interesuję Cię jak gra wygląda od środka, to zapraszam Cię do odwiedzenia repozytorium projektu: github.com/rumblex/nodeknockout2016-dumplings.

Pitch video

Organizatorzy wpadli na pomysł, aby zawodnicy nagrywali krótkie wideo o swojej grze. Na tzw. pitch video warto wytłumaczyć jakieś skomplikowane aspekty gry - jeśli takie są.

Ze względu na to, że gra nie została skończona, tj. nie zrealizowaliśmy w niej wymaganych feature-ów, to nie musiałem opisywać o co chodzi w tej grze.

Wskazówki

Podczas hackathonu robiłem notatki, aby móc Ci je teraz przedstawić. Notatki te są swego rodzaju wskazówkami dla wszystkich tych, którzy zamierzają wziąć udział w imprezach takiego typu.

Przygotować kilka pomysłów na projekt na kilka dni przed zawodami
Wybrać jeden projekt dzień lub dwa przed zawodami. W ostateczności można go wybrać w ciągu pierwszych minut trwania hackathonu. Jednak wtedy poświęcamy czas zawodów na wymyślanie architektury, co jest dość czasochłonne.
Rozpisać jego architekturę projektu tak, aby hackathon polegał już na samej implementacji.
Podczas realizacji projektu warto jest zadbać o takie rzeczy jak:
- Dodać favicon
- Pokazać użytkownikowi wersję z package.json
- Dodać dźwięki do gry
Wskazówki dotyczące realizacji gry:
- Domyślne pozycje playera, aby pozbyć się problemu z błędem pozycji u innych klientów
- Ustawienie velocity na 1, aby były kolizje (o tym problemie opiszę poniżej) gdy używa się Phaser.js
- Dodać error handling gdy używa się Socket.io
- Ładnie zrobione intro pomaga w odbiorze
- Jak się dowiedzieć, z czym chcielibyśmy ustawić kolizję na mapie?
```
  function getCollisionTilesets() {
      // Uzupełnić nazwy plików ze sprite-ami
      return [<..nazwy..>].forEach((tileset) => {
          return this.map.tilesets[tileset].frameid;
      });
  }

  this.map.setCollision(getCollisionTilesets());
```
Zrobić zaślepkowy obrazek, dla robotów robiących screenshot-y
Opisać swoją pracę dopiero po skończonym kodowaniu
- Jeśli gra jest multiplayer to warto to napisać!
Warto nagrać pitch video oraz oceniać innych zawodników, wtedy oni będą też oceniać naszą aplikację
Jaką wersję Node.js wspiera hosting na którym będzie uruchomiona aplikacja. Mieliśmy błąd uruchomienia aplikacji, z powodu syntax errora, który był wygenerowany przez tworzenie class. Niestety, ale starsze wersje Node.js nie wspierają ich nawet gdy uruchomisz skrypt z opcją --harmony.

Najważniejszą radą jaką mogę Ci dać, to gdy tworzysz grę na w takich zawodach, to postaraj się aby była ona grywalna. Nie ważne, że będzie prosta, ważne jest to, aby była gotowa do używania.

Niestety, ale nam się nie udało zrealizować ten najważniejszej zasady, dlatego też nie mamy szans na jakikolwiek zwycięstwo. No może poza design-em, bo tutaj Kasia przerosła samą siebie!

Screen z gry.

Problemy

Na zakończenie, chciałem podzielić się z Wami największymi problemami jaki mieliśmy podczas hackathonu. Były to dwa.

Problem z brakiem kolizji

2 godziny męczyłem się ze znalezieniem przyczyny dlaczego nie ma kolizji pomiędzy naszym samochodem a mapą. Przypomniałem sobie, że aby kolizja w świecie Phaser.js wystąpiła, to velocity obiektu, którym sterujemy nie może być równa 0.

Po tym jak sobie przypomniałem, od razu stworzyłem nowy projekt, gdzie zachodzi kolizja między obiektem którym sterujemy a mapą. Niestety, ale w przykładach na phaser.io/examples/ nie znalazłem takiego przykładu.

Projekt dostępny jest na moim GitHubie: github.com/piecioshka/test-phaser-collision

Problem z uruchomieniem aplikacji

Największym problemem było to, że każda próba deployu kończyła się niepowodzeniem, choć w środowisku lokalnym aplikacja działała poprawnie. Błąd był następujący:

events.js:160
throw er; // Unhandled 'error' event
^

Error: listen EADDRINUSE :::5000

Nie miałem pojęcia dlaczego akurat na środowisku produkcyjnym dany problem istnieje. Obecnie problem nie istnieje, a został rozwiązany dodaniem zmiennej środowiskowej PORT oraz zabiciem wszystkich procesów nginx oraz haproxy na docelowym serwerze. Z tego miejsca chciałem podziękować Kamilowi, który pomógł mi w tej sysadmin-owej kwestii.

Podsumowanie

Chciałem podziękować organizatorom za organizację zawodów kolejny raz. Była to szósta edycja. Mogę się domyślać, jak wiele czasu trzeba było poświęcić na przygotowanie środowisk dla zawodników, oraz przygotowanie strony internetowej, która będzie informowała na bieżąco o stanie zawodów (bardzo motywujący był licznik czasu na stronie głównej).

Jeśli nie brałeś udziału w takich zawodach, to polecam. Kod tworzony nie musi (a nawet nie może z powodu czasu) być najpiękniejszy - on po prostu musi działać. Moje pierwsze hackathony nauczyły mnie dużo. Poznawałem nowe biblioteki, które na swój sposób pomagały mi zrealizować zamierzony cel, czyli stworzyć grę!

Tegoroczna edycja Node Knockout powiększyła liczbę hackathonów w których brałem udział do 5. Post na temat zeszłorocznej edycji (gdzie zająłem 2 miejsce w kategorii Solo Winner) jest dostępny tutaj: NKO 2015.

Screen z gry.

WarsawJS Meetup #26

Piotr Kowalski — Sat, 05 Nov 2016 00:00:00 +0000

To już 26-te nasze spotkanie! Mi jako organizatorowi jest bardzo miło “gościć” tyle osób, które bez przymusu, z chęcią przychodzą w drugą środę miesiąca do Państwomiasto, aby posłuchać ciekawostek, nowinek, dobrych praktyk w języku JavaScript.

Invitation

Zaproszenie dość szczególne. Dostałem od mojego działu drona-zabawkę. Chciałem go wykorzystać aby dodać czegoś nowego do naszych zapowiedzi. Może i dron-zabawka, ale świat z 4-5 metrów wygląda inaczej.

Ciężko mi było w te kilka minut lotu nagrać jakieś ciekawe ujęcie. Dodałem do zapowiedzi te, które wyszły najlepiej, czyli najstabilniej.

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Web Components. Are we there yet? [PL] Dominik Lubański

Elementy w HTML mogę być: Semantyczny, funkcjonalny, czy też wizualny. Dominik Lubański. 2016-10-12

Elementy mogą być definiowanie deklaratywne, czyli zapisanie w pliku HTML.

Komunikacja z API elementów, które są bardziej skomplikowane i posiadają swoje metody może polegać na uruchomieniu imperatywnym (rozkazującym).

4 specyfikacje w połączeniu definiują Web Component-y:

Shadow DOM
Custom Elements
Templates
HTML Imports

Shadow DOM uruchamiamy imperatywnie. Nie możemy deklaratywnie stwierdzić, że element gdzieś ma Shadow DOM. Dominik Lubański. 2016-10-12

Specyfikacja Templates daje programistom definiowania kontenerów <template>, które nie są wyświetlane, pomimo, że ona żywym drzewem w DOM.

Dominik serdecznie zachęca do wykorzystania Web Components, aby zunifikować biblioteki, które tworzą UI.

Link do prelekcji: youtube.com/watch?v=2YEE5W8HdKk

•

Talk #2: Kind of JavaScript [EN] Mariusz Nowak

Dobra organizacja wartości w JSie zakłada podział na:

Immutable
- Primitive non-value
  - undefined
  - null
- Primitive value
  - number
  - boolean
  - string
  - symbol
Mutable

Różnica między null a undefined w JavaScript?

null - jest wartością, która mówi, że nie ma wartości
undefined - mówi, że nie ma wartości, nie ma klucza, nie ma niczego

Dobra praktyka

Usuwanie klucza z obiektu powinno odbywać się poprzez nadpisanie wartości null-em, zamiast wykorzystywać operator delete.

obj.foo = null; // Good practice ✔
delete obj.foo; // Bad practice ✖

Mariusz wytłumaczył jak działa Object Boxing, czyli dlaczego prymitywy mają właściwości. Kolejne dwa terminy, które po prelekcji będą dla nas jasne, to:

Type Coercion - rzutowanie typów, to poważny temat. Przy pracy z językiem, stykamy się z koercją w wielu miejscach. Ważne jest zrozumienie tego mechanizmu i zapoznanie się np. Falsy Values.
Duck Typing - czyli, porównywanie obiektu, na podstawie jego zawartości, np. czy posiada właściwości takie jak?

Link do prelekcji: youtube.com/watch?v=fQIvfgrjGSE

•

Talk #3: Angular 2 quickstart, Angular 2 automated unit testing [PL] Robert Gurgul

Ze względu na to, że aplikacje tworzone w oparciu o framework Angular 2 tworzone są w TypeScript, to będzie istniała pewna różnica między środowiskami developerskimi projektów opartych na Angular 1 (starym) oraz Angular 2 (nowym). Elementem tym będzie transpilator.

Robert podczas prelekcji pokazał narzędzie angular-cli - narzędzie automatyzując oraz standaryzujące budowanie aplikacji Angularowych.

Ostatnio zastanawiałem się nad tym “dlaczego w ogóle lubię programować?”

Lubię programować, bo lubię widzieć co zrobiłem. Gdy napiszę fajny kod, lubię sprawdzić czy on działa. Robert Gurgul. 2016-10-12

Robert poleca jazdę pociągiem, bo wtedy ze względu na brak internetu możemy pisać testy. Dobre testy to takie, które mock-ują całą komunikację z serwerem, więc faktycznie nie potrzebujemy internetu do dopisania do naszej aplikacji kilkunastu testów. W pełni się z tym zgadzam. Swoją drogą, żyjemy w XXI wieku i w pociągach dalekobieżnych dalej nie ma sieci Wi-Fi. Ciekawe czy nasze dzieci będą kiedykolwiek w takiej sytuacji.

Link do prelekcji: youtube.com/watch?v=2lhmK60hQGY

•

Sponsorzy spotkania

10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live
Softwarely - dodatkowe wsparcie

Konferencja: Codemotion Warsaw 2016

Piotr Kowalski — Thu, 15 Sep 2016 00:00:00 +0000

Dziś miałem przyjemność bycia uczestnikiem na konferencji Codemotion Warsaw 2016 jako partner tego eventu z ramienia WarsawJS. Nawiązaliśmy współpracę aby wymienić się w Social Mediach. Nieskomplikowany układ: my reklamujemy Ciebie, a Ty nas.

Główną organizatorką była Agnieszka, która na co dzień pracuje w firmie Touk. Agnieszka jest znana z tego, że dość często coś organizuje, nie tylko w stolicy naszego kraju, ale też w innych miastach.

Bilety na konferencję wahały się od €40 do €100 - podaję zakres cenowy ze względu na to, że w zależności od kilku czynników bilet możesz kupić taniej albo drożej. Jednym z takich czynników jest czas. Im wcześniej kupisz bilet tym jest tańszy, oraz im więcej biletów kupisz naraz to masz zniżkę.

Z każdej konferencji przywożę zbiór technologicznych notatek, które później wrzucam na GitHuba jako projekt. Tym razem nie było wyjątkowo, bo i z tej konferencji listę moich technicznych notatek, znajdziesz na moim profilu na GitHubie. Dokładny adres do albumu z notatkami wygląda tak: github.com/piecioshka/notes-codemotion-warsaw-2016.

Zapraszam do zapoznania się. Reszta część wpisu będzie bardziej społeczno-organizacyjna.

Miło spędza się czas w dobrym towarzystwie

Na konferencję pojechaliśmy we 3 z naszej firmy, oraz jeden kolega z zaprzyjaźnionej firmy. Lokalizacja była idealna. Centrum miasta. Może trochę miałem problemy, aby znaleźć kino, ze względu na to, że nigdy w nim nie byłem.

Całe kino Atlantic było wynajęte, aby konferencja mogła toczyć się własnym życiem. 4 duże sale kinowe w których non stop były prowadzone prelekcje. Nie jestem do końca zwolennikiem kilku jednoczesnych sesji wykładowych, bo co mam zrobić, gdy będą ciekawiły mnie co najmniej 2 tematy, które są obecnie poruszane?

Pierwszy talk był projekcie ConceptMap. Jego prelegentem była bardzo znana osobistość w świecie Javy - pan James Weaver - autor kilku książek o Javie.

Najważniejszą rzeczą jaką wyniosłem z tej prelekcji była informację, że Wikipedia, na bazie której projekt map był omawiany, jest częścią organizacji WikiMedia.

Kolejny talk jaki wybrałem, był o połączeniu się do urządzenia podłączonego przez protokół USB. Mocno hardware-owa prelekcja. Myślałem, że będzie inaczej. Nie interesują mnie jakoś mocno tematy hardware-owe.

Najlepszymi dla mnie prelekcjami były te poprowadzone przez Nira Kaufmana. Nir pracuje w firmie 500tech. Co ciekawe podczas tej konferencji, Nir był podwójnym prelegentem. Pierwszy talk był o tym, jak Angular 2 współpracuje z Redux-em. Nawet nie źle te 2 moduły ze sobą współpracują. Nie sądziłem, że można zrobić taką hybrydę.

Natomiast druga prelekcja była o dekoratorach w JavaScript (nowa składnia, która nie jest jeszcze zatwierdzona). Mogę się tylko domyślać, jak Nir musiał być zmęczony po 2 wygłoszonych prelekcja podczas jednego dnia konferencji. Ciekawi mnie jak długo się przygotowywał do tych 2 talków.

Najlepsza prelekcja

Najlepiej wygłoszoną prelekcją podczas konferencji Codemotion Warsaw pt. “Regex fundamentals” była wykonana przez Juliette Reinders Folmer. To dzięki tej prelekcji zrozumiałem kilka ważnych aspektów z życia wyrażeń regularnych. Pani Juliette jest autorką kursu na temat fundamentów w RegExp. Link do slajdów: https://speakerdeck.com/jrf/regex-fundamentals.

Podczas naszych testów używaliśmy narzędzia https://regexper.com/, które tłumaczy jak działa dane wyrażenie regularne.

To dzięki Julii nauczyłem się co to jest Non-Capturing Groups. To jest taki typ regexpa, który nie szuka pojedynczych grup, tylko cały blok o który nam chodzi. Może dla jasności zademonstruje to na przykładzie:

// Typo match-owanie
/color=(red|green|blue)/.exec('color=red,green');
// => ["color=red", "red"]

// Match-owanie z użyciem NCG
/color=(?:red|green|blue)/.exec('color=red,green');
// => ["color=red"]

Podsumowanie

Gorące podziękowania składam na ręce organizatorom, na których czele stała Agnieszka Cieśla! Zazdroszczę jej, że ma już tak duże doświadczenie w realizacji takich event-ów.

Może kiedyś będzie konferencja naszej organizacji WarsawJS. Czas pokaże.

WarsawJS Meetup #25 — 2 urodziny 🎂

Piotr Kowalski — Wed, 14 Sep 2016 00:00:00 +0000

Jak ten czas szybko leci? To już 2 lata od kiedy rozpoczęliśmy spotykać się regularnie i rozmawiać o JavaScript w naszym pięknym mieście, Warszawie. Podczas WarsawJS Meetup #25 gościliśmy około 100 osób, także sala wypchana po brzegi.

Jak wyglądały przygotowania?

Rozstanie się z Rebased 1 września

Jedną z pierwszych rzeczy które zrobiliśmy, to niestety rozstanie się z jednym z naszych sponsorów, firmą Rebased. Software house nie rekrutuje do swojego zespołu już developerów JavaScript, więc sponsorowanie imprezy, która ma na celu popularyzację tego języka wydaje się już nie mieć sensu.

Nagranie zapowiedzi 1 września

Tego samego dnia pojechaliśmy całą ekipą na most Józefa Poniatowskiego, gdzie korzystając z dobroci zachodzącego słońca oraz pięknej panoramy miasta nagraliśmy zapowiedź na kolejne spotkanie.

Jeszcze tego samego dnia udało mi się skończyć 1 etap przy montażu, mianowicie synchronizację audio i wideo ze wszystkich źródeł. Proces trwał około 3-4h.

Kolejnego dnia w piątek (02-09-2016), zacząłem wybierać sceny, które są miarę i mogą pójść do konkursu scen spośród których wybiorę te najlepsze, które zostaną na finalnej wersji zapowiedzi. Proces trwa zawsze długo. Tym razem ze względu na krótki czas nagrywania, który trwał około 4h.

03-09-2016. Kolejny dzień montowania. To już trzeci. A wersja finalna zapowiedzi jeszcze daleko. Według scenariusza, chciałem aby ta zapowiedź była trochę inna.

Chciałem dodać do tej zapowiedzi 3 specjalne bonusy:

historię WarsawJS - czyli jak to wszystko się zaczęło + zeszłoroczne urodziny
przewodnik, o co chodzi z “żetonami” podczas WarsawJS, czyli jak z nich skorzystać
oraz chciałem wymienić wszystkich zeszłorocznych prelegentów

Na dokończenie zapowiedzi w sobotę poświęciłem cały dzień (ok. 7h). Po tych godzinach miałem już dość komputera i pojechałem trochę się rozerwać na zakupach 😄

Publikacja zapowiedzi 5 września 2016

Niedzielę poświęciłem na delikatny odpoczynek. Zresztą publikowanie w niedzielę zapowiedzi nigdy nie wiązało się z dużym zainteresowaniem, więc publikację zaproszenia w formie wideo przesunąłem na poniedziałek.

Ciekawi mnie jak będzie wam podobał się wynik mojej 14-godzinnej pracy. Tego dnia stworzyłem też wydarzenia w social mediach.

Załatwienie tortu

Razem z Kasią poszukaliśmy cukierni, gdzie mogliśmy zamówić sobie spersonalizowany tort. Znaleźliśmy cukiernię ale-tort.pl na Saskiej Kępie. Świetna lokalizacja i świetna strona skusiły nas do zakupu.

Piękny tort odebraliśmy w dniu urodzin - na kilka godzin przed głównym wydarzeniem. Jesteście ciekawi jak się prezentował?

Invitation

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: New collections in JS (from ECMAScript 2015): Map, Set, WeakMap, WeakSet [PL] Piotr Kowalski

Przygotowania do prelekcji zacząłem ok. 2 tygodnie przed terminem. Stworzenie samych slajdów to dość żmudny proces, który zawsze owocuje idealnymi slajdami, na które już nie chce się patrzeć.

Temat na prelekcję narodził się, kiedy mój kolega miał problem ze swoją implementacją. Zerknąłem na kod i od razu zacząłem robić slajdy, aby pokazać jak można dany problem rozwiązać lepiej korzystając z dobrodziejstw ECMAScript 2015, a dokładnie kolekcji Map, Set, WeakMap i WeakSet.

Stworzyłem około 70 slajdów głównych oraz około 10 slajdów moimi osobistymi wskazówkami. Te dodatkowe slajdy dodałem z myślą o krótkim lightning talku, który chciałem wygłosić.

W poniedziałek i wtorek przed środowym meetupem przeprowadzałem testy przed kamerą.

Link do prelekcji: youtube.com/watch?v=NtErU3Jbt78

•

Talk #2: Writing your first Amazon lambda using JS [EN] Piotr Zientara

Piotr od początku sygnalizował mi, że chce zrobić live coding.

My, organizatorzy wiemy jedno: live coding ZAWSZE stwarza problemy. Zawsze jest jakiś nieprzewidziany problem, który niweczy poczynania speakera. Całe szczęście ten live coding przeszedł bez problemu. Za co chwała Piotrowi!

Mój imiennik opowiadał jak stworzyć pierwszą lambdę na Amazon S3 korzystając z naszego pięknego języka - JavaScript.

Prelekcja odbywała się po angielsku. Jestem zawsze pod wrażeniem osób, które są wstanie wyjść na scenę i powiedzieć coś w obcym języku. Mogę sobie tylko wyobrazić jak duży stres towarzyszy takiemu prelegentowi.

Link do prelekcji: youtube.com/watch?v=GKIVnnUNcEw

Lightning talks

Po prelekcji Piotra Zientary, wyszedłem jeszcze na lightning talka. Skorzystałem z moich przygotowanych slajdów, jednak kolejny raz nie zmieściłem się w czasie. Ta w teorii krótka prelekcja trwała ponad 3 razy dłużej niż zakładałem, czyli około 15 minut (sic!).

Przepraszam wszystkich, których tak długo trzymałem na zakończenie eventu!

•

Sponsorzy spotkania

10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live
Softwarely - dodatkowe wsparcie

Konferencja: Frontend Union Conf 2016

Piotr Kowalski — Sun, 28 Aug 2016 00:00:00 +0000

Dzisiejsza historia zaczyna się w litewskiej stolicy Wilnie, gdzie razem z Kasią polecieliśmy na konferencję Frontend Union Conf.

Konferencja odbyła się dnia 2016-08-27 o godzinie: 10:00 w budynku starego teatru? pod adresem ŠILTADARŽIO G. 6, w Wilnie.

Niestety nie robiłem notatek, więc post nie będzie mocno techniczny.

Panorama miasta

Jako organizatorzy WarsawJS zostaliśmy zaproszeni na konferencję przez jednego ze współorganizatorów, Andreya. Dodam jeszcze, że Andrey jest organizatorem MoscowJS Meetup.

Wilno - piękne polskie miasto

Była to nasza pierwsza wizyta, w tymże “polskim” mieście. Pierwszy dzień poświęciliśmy na zwiedzanie i okazało się, że w przy kościołach - których jest pełno w tym mieście - są zawsze ogłoszenia w 3 językach:

litewskim
rosyjskim
i polskim

Najstarszy kościół jaki w życiu widziałem. Powstał w XIV wieku.

Podczas zwiedzania kościołów, przez przypadek byliśmy świadkiem nabożeństwa, które było odprawiane po polsku, gdzie wiara modliła się za naród polski. Było to dla nas z jednej strony szokujące, z drugiej naturalne.

Miejsce gdzie mieszkał Adam Mickiewicz.

Wracając do meritum.

Konferencja

Konferencja nie była mocno popularna, tzn. sala na której siedzieliśmy mogła spokojnie pomieścić, jeszcze raz tą samą liczbę obecnych osób. Nie ma to większego znaczenia dla uczestników. Może bardziej dla organizatorów.

Merytoryczna część talków była świetna. Na scenie pojawiły się takie gwiazdy jak:

Mathias Bynens - @mathias
Martin Splitt - @g33konaut
Martin Kleppe - @aemkei
Gerard Sans - @gerardsans

Ostatnia prelekcja nie poruszała tematyki technicznej, a bardziej społeczną. Otóż prelegent - Oleg Podsechin @olegpodsechin - wyszedł na scenę jako organizator meetupu HelsinkiJS.

Oleg bardzo mnie zaciekawił swoim wystąpieniem, ze względu na to, że opowiadał o swoich doświadczeniach z organizowaniem meetup-ów. Mega interesujące jest zebrać dostać feeback o tym, jak rosną inne społeczności JS-owe.

Bardzo ciekawie i mądrze opowiadał o tym, jak należy organizować meetupy, aby wiara przychodziła i wszyscy byli zadowoleni. Oleg przedstawił ciekawą listę:

Lista rzeczy, które należy zrobić, aby zorganizować meetup.

W sumie to zgadzam się, ze wszystkim co opowiadał. Ta lista to takie minimum.

After party

Po konferencji przyszedł czas na After party, które odbyło się na patio budynku przy którym była sala konferencyjna. Poniżej możecie zobaczyć drinki, które były dostępne w barze. Najmocniejszy to debugger. Hmm. Polecam.

Lista drinków.

Na konferencji poznaliśmy Martynę z Touk, która na poprzednim WarsawJS wygrała bluzę ufundowaną przez jednego ze sponsorów naszej organizacji, czyli firmę Softwarely.

Podsumowanie

Bardzo dziękujemy organizatorom za poświęcony czas i włożone siły w organizację konferencji. Nauczyłem się wielu rzeczy - po to w sumie ludzie uczęszczają na konferencje i meetupy: aby poznawać nowych ludzi, oraz aby poznawać nowe technologie.

WarsawJS Meetup #24

Piotr Kowalski — Tue, 23 Aug 2016 00:00:00 +0000

No i mamy kolejne spotkanie “fanatyków” JavaScript-owych! Oczywiście, w pozytywnym tego słowa znaczeniu. Tym razem spotkaliśmy się 10 sierpnia w Państwomiasto i wysłuchaliśmy trzech prelekcji o JS-ie.

Invitation

Ze względu na piękne słońce oraz niesamowite widoki tym razem wybraliśmy się na dach Biblioteki Uniwersyteckiej w Warszawie. Z dachu widać mnóstwo pięknych krajobrazów - świetne miejsce do nagrywania wideo, ale również do zwiedzania. Z tego też powodu, nie było łatwo nagrywać. Ciężko się skupić, gdy koło Ciebie kręci się mnóstwo ludzi.

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: 9 demonów programisty JS [PL] Cezary Walenciuk

Pierwsza prelekcja nie poruszała konkretnego kodu, ani biblioteki. Była ona z rodzaju tych miękkich. Uważam, że takie prelekcji pobudzają równie mocno do myślenia co stricte techniczne prelekcje.

Link do prelekcji: youtube.com/watch?v=jG7PImd2Ja4

•

Talk #2: React w świecie nawiasów: ClojureScript, reagent [EN] Daniel Janus

Daniel, doświadczony programista obecnie wykonujący swój zawód w firmie Rebased, opowiedział o Reagencie, czyli wykorzystaniu biblioteki React.js w języku ClojureScript. Niestety, ale Reagent nie rozwiązuje wszystkich problemów, ze względu na to, że jest on tylko prezentacyjną warstwą.

Kolejne narzędzie omawiane podczas prelekcji to re-frame. Które to rozwiązuje problem braku innych warstw. Dzięki re-frame mamy unidirectional data flow.

Ciekawostka: W ClojureScript nigdy nie napiszemy funkcji w stylu shouldComponentUpdate, ponieważ wszystko w tym języku jest pure.

re-frame makes the code maintainable. Daniel Janus. 2016-08-10

Link do prelekcji: youtube.com/watch?v=QqaShg7pIig

•

Talk #3: NativeScript: Gentle Introduction [PL] Paweł Kondraciuk

Paweł - developer z Białegostoku. Człowiek, który wypalił się zawodowo w Pythonie przeszedł do Front-end-u.

Nie ma HTML-a, nie ma DOMu. Paweł Kondraciuk. 2016-08-10

Prelegent zrobić demo, korzystając z emulatora. Gdzie pokazał “mięso”, czyli przykładowy projekt. Dowiedzieliśmy się, że JavaScript jest uruchomiony w UI Thread, dzięki temu JS ma dostęp do obiektów Java-owych. Stąd też kod zaprezentowany na poniższym listing uruchomi się bez błędu.

// Android
var time = new android.text.format.Time();
time.set(1, 0, 2015);
console.log(time.format('%D'));

// iOS
var alert = new UIAlertView();
alert.message = 'Hello world!';
alert.addButtonWithTitle('OK');
alert.show();

// https://pawelkondraciuk.github.io/warsawjs-nativescript/

Dzięki Pawłowi dowiedzieliśmy się, że największą zaletą korzystania z NativeScript jest bardzo dużo wspólnego kodu - jeden wspólny codebase

Link do prelekcji: youtube.com/watch?v=Y4FpNQuefAg

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live
Softwarely - dodatkowe wsparcie

WarsawJS Meetup #23

Piotr Kowalski — Fri, 15 Jul 2016 00:00:00 +0000

Po raz 23-ci zebraliśmy się aby posłuchać co piszczy w JS-ie. Standardowo mieliśmy 3 prelekcje. Tym razem zrobiliśmy (my, organizatorzy) jednak coś czego jeszcze nie było wcześniej…

Invitation

Postanowiliśmy, że nagramy sprzed Pałacu Kultury, gdzie umówiliśmy się z Mistrzem Polski w Trialu rowerowym - Michałem Nowakiem. Zapraszam w imieniu Michała do odwiedzenia jego fanpage: facebook.com/michalnowaktrial/

Wpadliśmy na pomysł, że nagramy 2 zapowiedzi. Jedną standardowo po polsku, drugą natomiast w języku angielskim. Takie nagranie będzie celowało w zaproszenie na meetup osób anglojęzycznych. Z naszej dwójki to Piotr lepiej włada angielskim, więc zapowiedź w tym języku jest w całości opowiedziana przez niego.

Zapraszam w imieniu organizatorów WarsawJS. Szczególnie warto obejrzeć do końca! 💥

I teraz “to samo” ale po angielsku.

•

Talk #1: You don’t need React to use virtual DOM [EN] Illarion Koperski

Illarion przedstawił przykład użycia virtual-dom-a bez użycia React-a. Virtual DOM to pomysł. Idea, która została zaciągnięta do wielu bibliotek. Najpopularniejszą z nich jest oczywiście React - pewnie dlatego, że autorami biblioteki są nasi koledzy z firmy Facebook.

Link do prelekcji: youtube.com/watch?v=Amu3ur3fWW8

•

Talk #2: Building bulletproof and maintainable JS apps [EN] Michał Załęcki

Michał opowiadał o nowych technologiach webowych, które pomagają nam, programistom, stworzyć kuloodporne aplikacje. Prelegent na co dzień pracuje we Wrocławiu i jest organizatorem React.js Wrocław oraz pracuje w woumedia.

Usłyszeliśmy o tym co to jest MVC i jak się ten wzorzec rozwinął, do takiego stopnia, że powstał Flux i Redux. Zdaniem Michała nie są to najlepsze technologie, wkrótce powstaną jeszcze lepsze. Co ciekawe, prelegent uważa, że i jest wiele innych języków, które są lepsze od JavaScript-u.

Link do prelekcji: youtube.com/watch?v=TgCs3BmE5mU

•

Talk #3: SOA and REST - Tying the knot [EN] Robert Kawecki + Damian Cikowski

Panowie we dwóch wyszli na scenę i zainscenizowali scenkę. Rozmawiali o doborze technologii do nowej aplikacji typu enterprise, czyli bardzo bogatej w funkcjonalności. Panowie doszli do wniosku, że skorzystają z:

DDD
CQRS
Event sourcing - services returns event
~~SOAP~~ JSON-RPC over WebSocket
Client library: esdf-ws-client
Single service that emulates HTTP GET for performance
Universal language: RQL

Prosto ze slide–ów: https://rkaw92.github.io/warsaw-soa-rest/

GUI

Task-based UI
React.js: actions - commands
Event handlers in Flux stores mapped 1:1 to Domain Events

Architektura GUI został dobrana do aplikacji, a nie odwrotnie. Robert Kawecki 2016-07-13

Link do prelekcji: youtube.com/watch?v=r5F7jcNvGLk

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live
Softwarely - dodatkowe wsparcie

Konferencja: PolyConf 2016

Piotr Kowalski — Thu, 30 Jun 2016 00:00:00 +0000

Zaiste - człowiek legenda. To dzięki niemu co roku mamy możliwość uczestniczenia w konferencji PolyConf (dawniej RuPy). Osobiście uczestniczyłem w PolyConf po raz pierwszy. Forma niewiele odbiega od wcześniej wspomnianego RuPy. Świetna przygotowanie od strony organizatorów. Tego można się spodziewać, od ekipy, która to robi już 10 lat.

Konferencja trwała 3 dni: od 30 czerwca do 2 lipca, 2016 roku.

PolyConf 2016: June 30 - July 2, Poznań, Polska

Do Poznania dotarliśmy w składzie: Ja, Kamil Kiełbasa oraz Krzysztof Syrytczyk samolotem. Świat pięknie wygląda z perspektywy ptaka!

Widok na Poznań, z samolotu.

Poznań, to piękne miasto. A najładniejsze miejsce to chyba rynek.

Rynek poznański.

Dzień 1

Pierwszy dzień zaczęliśmy od tego co często robię, czyli poranny trening biegowy. Bieganie jest świetnym sposobem na rozpoczęcie dnia. Kiedy człowiekowi nie chce się iść do pracy, to po kilku kilometrach podnosi się poziom endorfin we krwi i od razu jest większa energia na wszystko.

Poranne bieganie pierwszego dnia konferencji. Trening na Endomondo: https://www.endomondo.com/users/15939217/workouts/756612189

Identyfikator uczestnika.

Jak zwykle, kiedy jestem na konferencji (albo meetupie) to robię notatki. Jeśli jesteś zaciekawiony gdzie one są to zapraszam Cię do repozytorium na moim profilu na GitHubie: github.com/piecioshka/notes-polyconf-2016

Pierwszy na scenie pojawił się organizator. Opowiadał on o swojej roli w organizacji oraz podziękował wszystkim za przybycie i zaprosił do uczestniczenia przez kolejne 3 dni w świetnym wydarzeniu.

Organizator - Zaiste.

Jak to na każdej konferencji do zebrania jest kilka giftów dla uczestników. Najlepszym jest oczywiście oryginalna naklejka z logiem konferencji.

Naklejki z logiem konferencji.

Dzień pierwszy konferencji zakończyliśmy w barze oglądając mecz Polska - Portugalia. Niestety w karnych przegraliśmy. W sercu pojawił się smutek. Jednak nie wolno zapominać, że doszliśmy tak wysoko - to przecież Ćwierćfinał Mistrzostw Europy.

Dzień 2

Drugi dzień zaczęliśmy świetnymi prelekcjami. Natomiast podczas przerwy obiadowej mogliśmy zagrać w bubble soccer.

Tak wygląda wielka kula do której się wchodzi aby wziąć udział w rozgrywkach Bubble Soccera.

Jedzenie i piecie podczas konferencji to bardzo ważne elementy. Człowiek z nudów nie ma co ze sobą zrobić. Nuda pojawia się, nie ze względu na słabe prelekcje, tylko na brak interakcji. Jeśli siedzimy 8 godzin i nic nie musimy robić, tylko słuchać, to siłą rzeczy ziewanie to normalne zjawisko.

Organizatorzy wiedzą, że programiści lubią smakołyki, więc zorganizowali pyszne desery, które mi osobiście MOCNO przypadły go gustu i zjadłem ich 3.

Deser.

Ostatnim wykładem drugiego dnia był talk o projekcie Seif, który poprowadził Douglas Crockford.

Spotkanie z Douglas-em Crockford-em.

Na zakończenie dnia, zrobiliśmy sobie zdjęcie z Douglasem:

Dzień 3

Trzeciego dnia mieliśmy panel lightning talków, podczas których mogliśmy usłyszeć JavaScript!

Muzyka i efekty specjalne były zrealizowane dzięki odpowiednim bibliotekom w JavaScript.

Lesson learned, czyli czego się nauczyłem?

Wskazówki do slajdów:

na pierwszym slajdzie link do wersji online oraz do Twittera
na każdym slajdzie w prawym dolnym rogu Twitter username

Bardzo dziękuję organizatorom, za włożone siły w organizację tak dużego przedsięwzięcia jakim jest konferencja ze speakerami z najwyższej półki.

Piękne niebo nad Warszawą.

WarsawJS Meetup #22

Piotr Kowalski — Mon, 27 Jun 2016 00:00:00 +0000

To już 22 spotkanie! Szybko leci. Tak się zastanawiając, to między każdym meetupem WarsawJS są tylko 4 tygodnie = 4 poniedziałki. To bardzo krótki okres czasu dla organizatorów, aby podczas spotkania wszystko zagrało jak powinno, ale wiecie co? Mi się to podoba!

Lubię pomagać ludziom, którzy chcą pomocy. A tak sobie tłumaczę, że Ci którzy przychodzą, chcą się rozwijać. Cieszę się, że mogę takim ludziom pomagać rozwijać ich wachlarz umiejętności. Rozwój swoich umiejętności to proces ciągły. Trwa on całe życie. A najfajniejsze w tym wszystkim jest to, że można zacząć rozwijać się jako developer w dowolnym wieku!

Invitation

Tym razem na sportowo! Lubię jeździć na deskorolce, to pomyślałem, że zabiorę Was na jeden z wielu warszawskich skateparków. W Parku Szymańskiego jest taki mini skatepark - jeden z pierwszych jaki poznałem.

Skatepark w Parku Szymańskiego.

Czerwcowe spotkanie zaowocowało w trzy prelekcje. Pierwsza i ostania były po angielsku. Generalnie to zazdroszczę prelegentom, którzy wychodzą na scenę i opowiadają kilkadziesiąt minut po angielsku. Muszą na pewno czuć się pewnie w tym języku. Także Artur, Tomasz - chapeau bas!

Profil wydarzenia na portalu Meetup.com dostał mnóstwo komentarzy z pochwałami, czyli prelekcje podobały się nie tylko mi! To zawsze cieszy organizatorów.

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Node like a pro [EN] Artur Siery

Link do prelekcji: youtube.com/watch?v=DuE39Fl5BS0

•

Talk #2: Back to the future - async JS handling [PL] Maciej Pawluk

Link do prelekcji: youtube.com/watch?v=_AeAeSwRQ5A

•

Talk #3: JavaScript + Java = TypeScript [EN] Tomasz Ducin

Link do prelekcji: youtube.com/watch?v=jtdIHM24LwQ

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live
Softwarely - dodatkowe wsparcie

WarsawJS Meetup #21

Piotr Kowalski — Sun, 26 Jun 2016 00:00:00 +0000

Spotkanie organizacji WarsawJS odbyło się 11 maja w Państwomiasto. Wysłuchaliśmy trzech prelekcji o JavaScript. Ten meetup był szczególny pod trzema względami.

Po pierwsze, na scenie widzieliśmy pasjonata Fizyki, Andriya Mykulyaka, który to opowiadał o najatrakcyjniejszym ostatnimi czasy dla mnie narzędziu Webpack.

Po drugie, kolejną prelekcję po prowadził Dominik Lubański, który to opowiedział o prototypowaniu w JavaScript. Temat jest bardzo szeroki. Prelekcja zakończyła się krótką historią o serii książek YDKJS. Dominik powiedział, że w swojej firmie mocno ciśnie wszystkich, aby przeczytali całą serię. Ze względu, że nigdy nie przeczytałem choć jednego tomu, to postanowiłem, że zbiorę się w sobie i przeczytam cała, 6-cio tomową, serię. Zacząłem czytać i tak powstały 2 wpisy na blogu:

Więcej postów z tej serii, już wkrótce!

No i po trzecie! Ten meetup był bardzo atrakcyjny z jeszcze jednego powodu. Na warszawskiej scenie pojawiła się pierwsza dziewczyna. Paulina Kamińska opowiadała o bibliotece gsap.js, która to pomaga przy tworzeniu animacji.

Invitation

Ze względu na moment w którym nagrywaliśmy zapowiedź, a było to na początku maja, postanowiliśmy upamiętnić naszą flagę państwową!

Całą zapowiedź nagrywaliśmy sprzed budynku Warsaw Spire, nowo otwartego wówczas wieżowca w centrum miasta.

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Webpack - co to jest i z czym go jeść? [PL] Andriy Mykulyak

Link do prelekcji: youtube.com/watch?v=uBp4lheDXZI

•

Talk #2: Is there inheritance or delegation? [PL] Dominik Lubański

Link do prelekcji: youtube.com/watch?v=3Atpqz5zgk0

•

Talk #3: gsap.js, czyli animowanie bez CSS [PL] Paulina Kamińska

Paulina jest była pierwszą prelegentką podczas meetupów WarsawJS. Dodatkowo, pierwszy raz opowiadała przed publicznością, więc myślę, że należą jej się pochwały!

Link do prelekcji: youtube.com/watch?v=DRQyeIOqdqE

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live
Softwarely - dodatkowe wsparcie

AngularJS Warsaw #8

Piotr Kowalski — Sat, 25 Jun 2016 00:00:00 +0000

W minioną środę zawitałem z kolegą na warszawskie Włochy, gdzie w siedzibie firmy Microsoft odbyło się kolejne spotkanie z Angularem, czyli AngularJS Warsaw.

Na spotkanie zapisało się 133 osoby i przyszło około 80. Taka prawidłowość występuje zawsze. Nigdy na spotkania nie przychodzi dokładnie tyle osób ile się zapisuje. Ale tak jest zawsze w życiu, chociażby zaproszenia na wesele. Zostaje zaproszonych 200 osób, a przychodzi 150.

Link do wydarzenia: meetup.com/AngularJS-Warsaw/

Podczas spotkania wysłuchaliśmy 4 prelekcji. A jedną z nich poprowadził nawet organizator całego zamieszania, Darek Kalbarczyk. Wszystkie prelekcje były zorientowane na framework AngularJS autorstwa Misko Havery’ego, Adam Abrons’a, pracujących w organizacji Google.

Talk #1: Tworzenie aplikacji wielojęzykowych w AngularJS Bartłomiej Narożnik

Prelegent, został przedstawiony przez Darka (organizatora) jako jeden z najlepszych programistów z którymi pracował.

Zarządzenie wielojęzykowością

Podejście monarchistyczne - tylko tłumaczenie języka
Podejście anarchistyczne - osobny Front-end
Podejście federalistyczne - wspólna cześć, ale dla każdej kultury dostosowujemy aplikacje

Narzędzie `angular-translate`

Obsługuje większość tego co oferuje Angular
Parametryzacja
Można przetłumaczyć całe fragmenty HTMLa
Można dodać obsługę błędów

Instalacja bardzo prosta, wystarczy zdefiniować:

Zależność
Język
Struktura translacji (JSON)

Dobrze się obsługuje, gdy mamy service. Jednakże filter również pasuje. Dyrektywa jest najbardziej popularna w użyciu.

Zmienne w tłumaczeniach

Trzeba podawać dodatkowo wartości tych zmiennych np. translate-values w dyrektywach.

Zmiana języka

Metoda use(key), gdzie key to klucz z językiem.

Uruchomienie metody bez argumentu zwróci obecnie używany język.

Pluralizacja

Obsługuje messageformat.js.

Obsługa błędów

Jeśli jest problem z tłumaczeniem, np. jeśli klucz nie ma swojego odpowiednika, możemy dostać console.warn() z tego tytułu, albo też możemy zdefiniować swój handler.

Mamy mnóstwo zdarzeń, na które możemy nasłuchiwać, więc można stwierdzić, że możliwości są ogromne.

Bezpieczeństwo

angular-sanitize (z modułu)
albo po prostu escape

Zalecane jest aby używać angular-sanitize.

Jak wykryć język?

Funkcja determinePreferredLanguage

navigator.languages[0];
navigator.language;
navigator.browserLanguage;
navigator.systemLanguage;
navigator.userLanguage;

Język z jakim jest zainstalowana przeglądarka, co nie koniecznie jest wystarczające, np. w dużych firmach mamy zainstalowane z domyślnymi ustawieniami (ang) a przecież mówimy po polsku.

Lepsze rozwiązanie to parsowanie nagłówka HTTP “Accept-Language”, gdzie wystarczy zmienić język w przeglądarce, wtedy będziemy mieli zawsze poprawny język odpowiadający preferencjom użytkownika.

Czas trwania 19:05 - 19:20 + 3

•

Talk #2: AngularJS. Najczęściej zadawane pytania na rozmowie kwalifikacyjnej Dariusz Kalbarczyk

Darek razem z Bartkiem przygotowują razem książkę o tytule takim jak tytuł tej prelekcji.

Skąd pomysł na książkę?

Ostatnimi czasy Darek rekrutował całymi dniami w Katowicach i Szczecinie kandydatów na developerów do firm, gdzie projekty oparte były na AngularJS.

Po przeprowadzonych rozmowach postanowił zebrać wszystkie pytania w jedno miejsce i napisać książkę.

Według Darka, pracodawca poszukuje pracowników według takich 3 kryteriów:

33% - czy ma to czego firma oczekuje?
33% - czy mu się w ogóle chce?
33% - jak się sprawdzi w zespole?

Darek Kalbarczyk opowiada o nowej książce, którą piszę razem ze swoim kolegą z pracy.

Seria pytań

1. Dlaczego warto używać Angulara?

Odp. z sali: “Jest pocięty”, ale jest komponentyzacja, która przekłada się na testy,

2. Czy angular jest zależny od `jQuery`?

Odp. z sali: nie jest zależny, ponieważ posiada jqLite, czyli takie podstawy z biblioteki jQuery, jeśli jednak jQuery będzie dostępne przed osadzeniem Angulara, to wykorzysta on metody obiektu jQuery.

3. Wymień najważniejsze cechy Angulara.

Odp. z sali: moduły, SPA, i … reszta cech.

4. Co to są moduły w Angularze?

Odp. z sali: Kontenery, podobne do przestrzeni nazw. Możemy definiować zależności.

5. Jakie komponenty możemy definiować w modułach?

Odp. z sali: kontrolery, dyrektywy, configi.

6. Jak nazywa się moduł główny Angulara?

Odp z sali: ng - moduł główny, ładowany domyślnie, podczas startu aplikacji.

7. Jak Angular ładuje zależności?

Odp. z sali: Dependency Injection.

8. Kiedy są ładowane moduły zależne?

Brak odpowiedzi.

9. Co to jest globalne API?

Odp. z sali: Metody obiektu angular, np. angular.copy.

10. Jaka jest różnica jest pomiędzy prefiksem `$` a `$$`?

Odp. z sali: W Angularze za pomocą $ oznaczone są właściwości publiczne obiektu, a z $$ prywatne.

11. Co to jest `$scope` i `$rootScope`?

Odp. z sali:

$rootScope jest to najwyższy rodzaj $scope (główny)
$scope - obiekt skleja kontroler i widok.
$scope-y mogą być zagnieżdżane.
$rootScope.$new może tworzyć niezwiązane z niczym scope-y, można go zapakować w service i traktować jako obsługa sygnałów.

12. Wyjaśnij różnice pomiędzy `ng-if` oraz `ng-show`?

Odp. z sali: ng-if usuwa z DOM, a ng-show korzysta ze styli CSS do ukrycia elementu.

13. Jakie specjalne zmienne udostępnia `ngRepeat`?

Odp. z sali: last, first, even, odd, index, middle.

14. Co to jest i jak działa `ng-include`?

Odp. z sali: Dyrektywa służy do ładowania plików statycznych. Niestety, ale nie można z innej domeny.

15. Co jest szybsze `$digest` czy `$apply`?

Odp. z sali: $digest jest szybszy bo jedzie tylko w dół.

$apply w górę i w dół.

16. Jak działa funkcja `$destroy` dla danego zakresu?

Odp. z sali: Usuwa $scope z pamięci.

17. Jaka jest różnica pomiędzy `$watch` i `$observe`?

Odp. z sali:

$watch można wykorzystywać w dyrektywach w funkcji link i kontrolerach
$observe tylko w dyrektywach w obiekcie attrs.

18. Wymień metody serwisu `$http`?

Odp. z sali: $get, $head, $post, $put, $delete, $jsonp, $patch

19. Wymień metody wspierane przez serwis `$resource`?

Odp. z sali: $get, $save, $query, $remove, $delete.

20. Które dyrektywy wspierają animacje?

Odp. z sali: ng-show, ng-if, …

21. Co to jest IIFE?

Na to pytanie ja odpowiedziałem! Chciałem chociaż raz móc odpowiedzieć. Przy mojej znajomości Angulara (brak realizacji żadnego projektu) powiedziałem, że IIFE to pewnego rodzaju $scope dla Angulara.

Generalnie o IIFE można opowiadać i opowiadać, a odpowiedzi musiały być jak najbardziej trafne.

Każda poprawna odpowiedź kończyła się otrzymaniem od organizatorów drobnych upominków. Według mnie jest to bardzo miły gest.

Czas trwania 19:30 - 19:50

•

Talk #3: Host your AngularJS app like a PRO! Tomasz Wiśniewski

Prelekcja sponsorowana.

Tomasz opowiadał o Azure App Service. Usługa jest za darmo do 10 produkcyjnych aplikacji internetowych.

Prelekcja zachęciła mnie do skorzystania z tego narzędzia! Także, spróbujmy dać szansę. Zachęcam do podzielenia się wnioskami w komentarzach.

Czas trwania 19:50 - 20:20

•

Talk #4: Ionic kreator. Interfejs szybko łatwo i przyjemnie. Dariusz Biedrzycki

Tworzenie UI w ionic-u jest żmudne oraz nudne, dlatego powstał Ionic Creator, który to ma “interfejs webowy”.

Kiedy ja używam takiego kreatora?

Zaczynam projekt - wyklikując go
Tworzę nowy template

Darek pokazuje jak się obsługuje kreator Ionica. Opisuje plusy i minusy tego narzędzia na żywo. Co prawda miał przygotowane slajdy, ale publiczność opowiedziała się za prezentacja z użyciem właściwego narzędzia.

Zalety

Szybkie tworzenie formularzy w aplikacji mobilnej
Klient od razu widzi projekt

Minusy

Nie da się wgrać do kreatora własnego projektu
W bezpłatnej wersji można zrobić tylko 1 projekt
Statyczny routing, czyli nie można parametryzować ścieżek

Czas trwania 20:28 - 20:57

Podsumowanie

Jako organizator WarsawJS cieszę się, że w warszawskiej społeczności developerów JavaScript, powstają nowe organizacje związane z tym językiem.

Jako osoba lubiąca interakcje międzyludzkie, staram się być obecny na większości meetupów, nie zawsze mi się to udaje, ale jeśli jestem uczestnikiem takiego wydarzenia, to na 90%, kilka dni po wydarzeniu pojawi się wpis zawierający moje notatki ze spotkania.

Najbliższe spotkanie AngularJS Warsaw odbędzie się za około 2 miesiące, na które organizatorzy serdecznie zapraszają!

Fish — shell przyjazny każdemu

Piotr Kowalski — Mon, 30 May 2016 00:00:00 +0000

Powodem dla którego napisałem ten post jest przedstawienie ciekawej powłoki terminala, konkurenta domyślnej bash w taki sposób, aby szybko zacząć korzystanie z niego. Fish to o nim mowa.

Nazwa jest interesująca, jednak tu nie chodzi o jakiekolwiek ryby. Rozwinięciem akronimu jest Friendly Interactive Shell. Przychylam się do tej nazwy. Powłoka jest bardzo elastyczna. Możliwości konfiguracyjne są bardzo duże, jest ona zdecydowanie łatwiejsza w porównaniu z domyślnym bashem - Bourne-Again Shell.

Oficjalne logo powłoki.

Jak zacząć?

Od kilku lat używam OSXa. Ten artykuł będzie więc pisany z perspektywy programisty korzystającego na co dzień z tego systemu.

Jestem jednak przekonany, że konfiguracja powłoki Fish, wygląda podobnie na wszystkich systemach Unixowych. Kilka lat temu moim podstawowym systemem był Linux, na którym też skonfigurowałem Fisha.

Najprzyjemniejsza instalacja pakietów zawsze będzie zorientowana na wykorzystaniu managera pakietów. Jeśli chodzi o system OSX to nie ma takiego managera w domyślnej instalacji. Ze swojej strony polecam instalację Homebrew. Bardzo prosty i wolny od błędów, przynajmniej podczas mojego kilkuletniego doświadczenia.

Instalacja

Proces instalacji skupia się na wydaniu w terminalu takiego polecenia:

brew install fish

Po samej instalacji możemy przełączyć się na nową powłokę wykonując polecenie fish. Jednak idźmy krok dalej. Skonfigurujmy środowisko tak, aby zmienić domyślną powłokę. Aby uniknąć błędu:

ERROR: /usr/local/bin/fish: non-standard shell

należy w pliku /etc/shells, w którym znajduje się lista ze wspieranymi shellami, dodać nowy rekord ze ścieżką do Fisha. Edytujemy plik poleceniem:

vim /etc/shells

oraz dodajemy taką linijkę:

...
/usr/local/bin/fish
...

Skąd wiem jaka jest ścieżka do pliku binarnego?: Nie wiem, ale wydając polecenie which fish dostaniemy ścieżkę do pliku fish.

Zamiana domyślnego shella

Do zmiany domyślnej powłoki dla obecnie zalogowanego użytkownika, korzystamy z polecenia:

chsh -s `which fish`

Parametr -s wymaga wskazania ścieżki do shella, uzyskujemy go dodając polecenie which fish otaczając je znakami backtick.

Konfiguracja powłoki Fish

Każdy shell posiada możliwość konfiguracji “pod siebie”, czyli tak, aby praca w nim była przyjemnością, a nie udręką. Na przykład tworzenie aliasów skraca czas wpisywania tych samych komend. Główny plik konfiguracyjny dla powłoki Fish znajduje się w pliku:

vim ~/.config/fish/config.fish

Jeśli taki plik nie istnieje, to nie ma problemu, abyśmy go stworzyli. Uzupełnijmy konfigurację o podstawowy edytor powłoki. Oczywiście będzie nim Vim.

W pliku config.fish wpisujemy poniższą linijkę:

set -U EDITOR vim

Tworzy ona uniwersalną zmienną $EDITOR. Po restarcie powłoki, pod zmienną środowiskową $EDITOR będzie znajdował się edytor Vim. Dlaczego to jest takie ważne? Wiele narzędzi korzysta z tej zmiennej, aby użyć edytora podczas swoich prac, np. polecenie git commit korzysta z domyślnego edytora, aby zaprezentować developerowi zmiany w projekcie (jeśli takie istnieją).

Bardzo prosty przykład pliku konfiguracyjnego ~/.config/fish/config.fish

# Setup default editor
set -u editor vim

# Disable default greeting message
set fish_greeting

# Load private aliases
source ~/.aliases

Vim na Fishu?

Aby uniknąć błędu:

syntastic: error: your shell /usr/local/bin/fish can't handle traditional UNIX syntax for redirections

Trzeba do konfiguracji Vima, czyli w pliku .vimrc ustawić domyślną powłokę

set shell=bash

Więcej o błędzie można przeczytać w tym issue.

Pytania i odpowiedzi

Pyt. Jakie są zalety?

Zalet jest dużo. Największe zalety to: duża społeczność, autosugestie, proste skrypty z konfiguracją, podpowiadanie mana.

Pyt. Jakiego języka trzeba używać pisząc skrypty dla Fisha?

Pisząc skrypty będziemy używali shella według składni Posix.

Pyt. Gdzie jest miejsce na trzymanie konfiguracji powłoki?

Plik ze wszelką konfiguracją związaną z Fishem znajduje się w katalog ~/.config/fish/. Główny plik konfiguracyjny jest w tym katalogu pod nazwą config.fish.

Pyt. Jakie rozszerzenie jest wymagane, aby skrypt był brany pod uwagę przez powłokę Fish?

Nie ma żadnego wymaganego rozszerzenia. Można w katalogu ~/.config/fish/functions/ tworzyć pliki z dowolnym rozszerzeniem, a nawet bez niego.

Pyt. Czy nazwa pliku w katalogu ~/.config/fish/functions/ ma znaczenie?

Tak. Nazwa pliku musi odpowiadać funkcji, która zostanie dodana to środowiska i będzie dostapna jako polecenie. Rozszerzenie nie jest ważne.

Pyt. Czy można w konfiguracji config.fish definiować funkcje?

Nie. Tam definiuje się tylko pojedyncze ustawienia - każde w innej linii. Funkcje definiujemy w katalogu ~/.config/fish/functions/.

Pyt. Jak zmienić domyślny prompt?

Wystarczy stworzyć plik ~/.config/fish/fish_prompt.fish i stworzyć w nim funkcję o nazwie fish_prompt. Przykład:


function fish_prompt
    echo ' > '
end

Co to jest fish_right_prompt?

prompt jest to tzw. znak zachęty. Znajduje się on zawsze po lewej stronie. Od tej wartości zaczyna się linia w której na końcu mam ustawiony kursor, gdzie możemy coś wpisać. Jednak co jeśli chcielibyśmy wpisać coś po prawej stronie? Mamy możliwość poprzez funkcję:


function fish_right_prompt
    echo (date '+%H:%M:%S)
end

Jak to będzie wyglądało w praktyce? Poniżej przykład.

Powyższa funkcja w praktyce.

Więcej detali można znaleźć w oficjalnej dokumentacji.

Ciekawostki

Design

Rzadko kiedy spotyka się tak dobrze zapisane zasady projektu, jak ma to miejsce w przypadku Fisha. Pełna lista praw i zasad dostępna jest tutaj. W dokumencie znajduje się lista następujących praw: “The law of orthogonality”, “The law of responsiveness”, “The law of user focus” oraz “The law of discoverability”.

Bardzo ciekawym prawem jest zasada, że jeśli wystąpi sytuacja, że 2 rozwiązania jest zaimplementowane podobnie, ale nie są identyczne, to jedno z nich trzeba usunąć a to drugie ulepszyć. Taka zasada powinna panować w każdym managerze paczek, np. w npm. Tylko kto by weryfikował każdą paczkę?

Kolejne ciekawe prawo mówi, żeby doprowadzić do sytuacji, aby w jak najkrótszym czasie nowy użytkownik stał się ekspertem w danym narzędziu. Jest to oznaką zaprojektowania szybkiego wykrywania / odnajdywania nowych opcji programu. Każda funkcja powinna posiadać komentarz, aby była bardziej zrozumiała, jeszcze przed użyciem.

Zdarzenia

Bardzo ciekawe jest to, że powłoka umożliwia nam nasłuchiwania na zdarzeniach. Pierwszy raz spotykam się z taką możliwości, że np. jedno polecenie / narzędzie emituje zdarzenie, a inne nasłuchuje na nie i się uruchamia.

Więcej w tym temacie jest dostępne tutaj.

Mój sposób na `dotfiles`

W dzisiejszych czasach, developerzy mają swoje serwery np. na hosting, vps-y. Tam też chcielibyśmy mieć fish shella. Jak przenieść całą konfigurację na serwer?

Pomysłem jest stworzenie projektu dotfiles z naszą konfiguracją środowiska pracy. Wystarczy na serwerze (miejscu docelowym) pobrać repozytorium i rozpropagować konfigurację w odpowiednie miejsce.

Ze względu na liczbę konfiguracji środowiska większą niż 1 plik, warto skorzystać z narzędzia rsync, które zadba od skopiowanie / nadpisanie plików z projektu dotfiles w zdefiniowane przez nas miejsce. Osobiście używam takiego polecenia do instalacji konfiguracji powłoki Fish:

rsync -rv ~/projects/dotfiles/.config/fish/* ~/.config/fish/

Ze względu na tak długie polecenie polecam stworzyć sobie skrypt shellowy, w którym wyżej wymieniona linijka znajdzie swoje miejsce. Dzięki takiemu skryptowi będzie możliwość dodania jeszcze innych konfiguracji, np. Vima, Gita.

•

It’s DEMO time! 🎉

Feature: Autosugestie

Feature: Sugestie do różnych poleceń

•

Źródła warte przeczytania

Strona główna projektu fish-shell.
Oficjalny tutorial do nauki Fisha.
Jeśli ktoś chciałby zobaczyć źródła powłoki to projekt jest dostępny na GitHubie.
Możliwość prezentacji w prompt informacji o statusie projektu wersjonowanego przez Gita.
Szukasz pluginu? Wypróbuj: oh-my-fish.

Dobra wiadomość dla użytkowników Windowsa

Dostępna jest opcja FISHa z Cygwinem!

Popularny błąd w obsłudze zdarzeń w JavaScript

Piotr Kowalski — Fri, 27 May 2016 00:00:00 +0000

Chciałbym dzisiaj przedstawić problem z jakim możecie się spotkać podczas obsługi zdarzeń. Naturą języka jest asynchroniczność, spotykana jest w wielu miejscach. Asynchroniczne zapytania do serwera, czyli AJAX, to technika bardzo popularna w dzisiejszych czasach.

Pewnym rodzajem asynchroniczności są też zdarzenia aplikacji. Częsty problem początkujących developerów objawia się tym, że próbują oni dostać się do DOMu, kiedy nie jest on jeszcze załadowany. Trzeba wtedy skorzystać z window.onload (albo lepszej formy window.addEventListener('DOMContentLoaded', ...').

Ewentualnie można skorzystać z load (window.addEventListener('load', ...) jeśli event DOMContentLoaded nie jest wspierany.

Customowe eventy

Customowe eventy, to bardzo popularny wzorzec w aplikacjach webowych. Zdarzenia te nie są wyzwalane przez interakcję użytkownika, tylko przez samą aplikację. Dobrym przykładem może być zapytanie do serwera.

Zerknijmy na taki kod:

function ajax(url) {
    var req = new Request(url);
    req.on('load', function () {
        Request.emit('success');
    });
    req.on('error', function () {
        Request.emit('error');
    });
}

Mamy zapytanie do serwera, gdzie na zakończenie wyzwolone zostanie odpowiednie zdarzenie. Kiedy zapytanie się powiedzie, zostanie wyzwolone zdarzenie success, w przypadku błędu - error.

Chcielibyśmy teraz skorzystać z funkcji ajax, aby pobrać dane dotyczące użytkownika. Wykonujemy więc taki kod:

Request.once('success', (response) => {
    loadUserProfile(response);
});
Request.once('error', () => {
    loadFailUserPage();
});
ajax('/user');

Nasłuchujemy na 2 zdarzenia:

na poprawne pobranie danych z serwera wyświetlamy profil użytkownika
kiedy zapytania zakończy się niepowodzeniem wyświetlamy błąd załadowania profilu

Na pierwszy rzuta oka nie ma tutaj nic dziwnego. A jednak. Co jeśli skorzytamy z funkcji ajax w innym miejscu? Chcemy pobrać zawartość kategorii produktów w sklepie internetowym, korzystając oczywiście z funkcji ajax.

Request.once('success', (response) => {
    loadCategory(response);
});
Request.once('error', () => {
    loadErrorCategoryPage();
});
ajax('/category/1234');

Mamy problem. Dlaczego? Bo nie wyrejestrowaliśmy handlerów z pierwszego zapytania. Powiecie: “No ale przecież używamy tam once, to handler sam się wyrejestruje po wykonaniu zdarzenia.” Zgadza się, ale tylko użyty handler się wyrejestruje. Nigdy nie będzie sytuacji, że zapytanie uruchomi dwa zdarzenie success i error.

Diagram z opisywaną sytuacją. Zakreśliłem problem jaki się pojawił owalem.

Rozwiązanie problemu

Jest kilka rozwiązań opisywanego przeze mnie problemu. Najlepsze (dla użytego kodu) jest takie, aby w dowolnym handlerze wyrejestrować oba handlery.

function categoryHelperSuccess(response) {
    loadCategory(response);
    clearCategoryHelpers(); // Usuwamy niepotrzebne handler
}

function categoryHelperError() {
    loadErrorCategoryPage();
    clearCategoryHelpers();
}

// Usuwamy nasłuchiwanie na zdarzenia: success i error,
// aby zapobiec problemowi uruchamiania niepotrzebnych handlerów.
function clearCategoryHelpers() {
    Request.off('success', categoryHelperSuccess);
    Request.off('error', categoryHelperError);
}

Request.once('success', categoryHelperSuccess);
Request.once('error', categoryHelperError);

ajax('/category/1234');

Najlepsze rozwiązanie leży u podstaw tego kodu. Nie należy zapisywać się na zdarzenia obiektu współdzielonego. Wtedy nie będzie problemu. Lepsze rozwiązania w tym przypadku to używanie Promise-ów albo callback-ów.

Testowy projekt

Stworzyłem na potrzeby tego artykułu projekt na GitHubie. Chciałem pokazać Wam jak na faktycznym kodzie, objawia się opisywany przeze mnie problem.

Wystarczy uruchomić przykład w przeglądarce (plik demo/index.html), albo w terminalu uruchomić polecenie node index.js, aby zobaczyć opisywany problem. Poniżej zrzut ekranu z błędem.

Błąd, który pojawi się w konsoli po stworzenie opisywanej architektury.

Recenzja: "Tajniki języka JavaScript. Na drodze do biegłości"

Piotr Kowalski — Tue, 24 May 2016 00:00:00 +0000

Przeczytałem kolejną książkę z serii You Don't Know JS (YDKJS). Tym razem wziąłem na warsztat książkę pt. Tajniki języka JavaScript. Na drodze do biegłości. Generalnie, to zacząłem czytanie serii w nieodpowiedniej kolejności. Seria YDKJS rozpoczyna się właśnie tą książką, a przeczytałem dopiero ją teraz. Mam nadzieje, że przeczytanie jej w drugiej kolejności, zaraz po Tajniki języka JavaScript. Zakresy i domknięcia, nie będzie stanowiło dla mnie problemu.

Zdradzę Wam sekret. Nie stanowiło.

Autor serii, Kyle Simpson, pod koniec książki stworzył rozdział, gdzie opisał pokrótce całą serię i zdefiniował kolejność czytania. Przedstawia się ona następująco:

Promowanie wydawnictwa Helion

Cała seria dostępna jest tutaj. Helion przygotował landing page, aby reklamować YDKJS. Świetny pomysł. Uważam, że Helion od jakiegoś bardziej dba o marketing, i robi często promocje i oferty specjalne. Pamiętam, że jakoś 2-3 lata temu tak niestety nie było.

Nawet przed chwilą dostałem maila, pt: “Dzień Matki - skomponuj książkowy bukiet w promocji 3za2”. Moją mamę, raczej nie interesują komputery, więc akurat nie trafili, ale za sam pomysł należą się brawa.

Może i reklamuję wydawnictwo Helion swoim wpisem, ale nie widzę w tym nic dziwnego. Za dobre rzeczy należą się pochwały.

Helion wykonuje dla nas (programistów) bardzo dobrą robotę.

Każdy popełnia błędy, myślę, że Helion sam też wie, kiedy w książkę jest błąd czy to związany z tłumaczeniem, czy błąd merytoryczny, ale może wtedy jest już za późno na poprawę? Przecież rzadko, kto z nas czyta erraty.

Ważne, aby unikać tłumaczenia kodu źródłowego po polsku. Inaczej można uzyskać jakieś “pieseły” albo inne ciekawe polsko-brzmiące słowa.

Oryginalna wersja

W poprzednim wpisie wyjaśniłem, dlaczego czytam książki po polsku. Jednak nie chciałbym, byście mnie żle zrozumieli. Nasza branża rozwija się non stop. Codziennie powstają nowe rzeczy dotyczące JavaScript oraz całego Front-end-u.

Jeśli ktoś chce być na bieżąco ze wszystkimi nowinkami technicznymi, to musi opanować język angielskim, przynajmniej w takim stopniu, aby pozwolił mu czytać, posiłkując się od czasu do czasu słownikiem ang-pol.

Seria książek YDKJS wydana przez Helion, jest po prostu przetłumaczona z jakiegoś czasu, kiedy specyfikacja ES6 nie była jeszcze w zatwierdzona. Miało to miejsce 17 czerwca 2015 roku. Tak więc, od 11 miesięcy najnowszy standard nosi nazwę ES2015 (a.k.a. ES6).

Czytając książki z serii YDKJS, możemy czasami widzieć, że autor nie był jeszcze pewien jak będzie wyglądała specyfikacja. Często to podkreśla, informując czytelnika, że kod może być przestarzały.

Oryginalną wersję YDKJS: Up & Going znajdziesz na GitHubie pod tym linkiem.

Moje notatki

Chciałbym przedstawić teraz moje notatki, które pojawiły się podczas czytania TJJS. Na drodze do biegłości. Tym razem przykleiłem w książce 17 karteczek znajdując przy tym tylko 2 błędy. Błędy te bardziej były wynikiem złego tłumaczenia, niż w braku wiedzy na temat JavaScript.

Sticker 1. Strona 13. Tekst z karteczki: Książka wprowadza do programowania. Jest to pierwszy tom z serii YDKJS.

Jak już wspomniałem na początku wpisu, książka jest skierowana do wszystkich tych, którzy chcą zacząć swoją przygodę z programowaniem od JavaScriptu. Pierwszy tom serii YDKJS (w polskim tłumaczeniu TJJS) porusza podstawowe kwestie języka, takie jak opis składni, zmiennych, typów, domknięć itd.

Sticker 2. Strona 14. Tekst z karteczki: Wartość literalna? Co to?

Znalazłem w słowniku PWN informację, że literalny to synonim słowa dosłowny.

Myślałem, że literalny to może być tylko obiekt, ale tu chodzi o polskie tłumaczenie, gdzie znaczenie jest trochę inne.

Sticker 3. Strona 23. Tekst z karteczki: "literał" czy to synonim "wartości literalnych"?

Według Wikipedii, słowem literał oznaczana jest jednostka leksykalna reprezentująca ustaloną wartość (liczbową, tekstową itp.) wpisaną przez programistę bezpośrednio w danym miejscu w kod programu. (…) Poza tym funkcje anonimowe są literałami dla typu funkcyjnego. (…) W przeciwieństwie do literałów, stałe i zmienne są identyfikatorami (…).

Po tych wytłumaczeniach dalej bałbym się zastępować określenie literał wartością literalna. No trudno. Może kiedyś spotkam polonistę, który by mi to wytłumaczył.

**Uwaga**: Aktualizacja wiedzy dzięki komentarzowi na Wykop.pl autorstwa obereczekpl, możemy się dowiedzieć, że (cytuję):

Literał to zapis wartości literalnej, czy bardziej “czegoś” co posiada taką wartość lub jest takim wyrażeniem.

Sticker 4. Strona 24. Tekst z karteczki: koercja? Co to? Jakie jest dokładne znaczenie?

Idąc dalej za komentarzem, na portalu Wykop.pl, możemy opisać różnicą między koercją a rzutowaniem w sposób następujący (cytuję użytkownika obereczekpl):

“koercja” to niejako wymuszanie rzutowania, rzutowanie niejawne, dziejące się automatycznie
“rzutowanie” to zmiana typu, które może być jawne i niejawne (czyli wtedy gdy wprost mówimy “zrzutuj mi tę zmienną do tego typu”), jednak użyte samodzielnie oznacza rzutowanie jawne

Podsumowując: Koercja i rzutowanie to nie synonimy.

Sticker 5. Strona 25. Tekst z karteczki: "kod tworzysz nie tylko dla komputera" święta racja!

To zdanie to jest święta racja. Kod, który piszemy, nie piszemy dla komputera, on jest dla nas, developerów. Komputer zrozumie dziwną składnię, człowiek już nie.

Jestem tego zdania, że kod trzeba pisać taki, aby się za niego nie wstydzić, kiedy do Twojego projektu dołączy nowa osoba i będzie musiała się w niego wdrożyć.

Bardzo dobrym zwyczajem jest pisać komentarze. Po kilku latach doświadczenia z językiem, przyjąłem takie zasady:

w funkcjach, metodach i procedurach, piszę komentarze jednolinijkowe
nad funkcjami piszę JSDoc, do tworzenia którego wykorzystuję komentarze wielolinijkowe, korzystając ze specyfikacji tagów. Polecam przejrzeć wszystkie wspierane tagi na stronie usejsdoc.org.

Sticker 6. Strona 26. Tekst z karteczki: "komentarze powinny wyjaśniać dlaczego?, a nie co?"

Kolejna mądrość. Czasami zdarza mi się zobaczyć taki kod:

// Tworzę nowy obiekt
var fred = new Person();

Jak sens ma ten komentarz? Żaden. Bez sensu jest tworzyć komentarz, które opisują co tu się robi. Przecież to widać po kodzie źródłowym. Zdecydowane lepiej było napisać tak:

// Obiekt nowej osoby potrzebny, aby zarządzać jego danymi w procesie xyz.
var fred = new Person();

Sticker 7. Strona 29. Tekst z karteczki: A czy toFixed nie zwraca zawsze stringa?

W książce jest napisane, że: Jeżeli zachodzi konieczność to generowany jest ciąg tekstowy (string). Według specyfikacji, to toFixed zawsze zwraca stringa, nie tylko gdy zachodzi konieczność. Więcej informacji w specyfikacji.

Sticker 8. Strona 45. Tekst z karteczki: void chyba przypisując wynik tego operatora do zmiennej

Trochę wyrwane z kontekstu. Nakreślę go Wam. Książka chce określić różnice między:

var a;

względem:

var a = undefined;

Nie ma różnicy.

Na zakończenia akapitu jest zdanie:

Zmienna może przejść do stanu “niezdefiniowanego” na wiele różnych sposobów, między innymi na skutek działania funkcji, która nie zwraca wartości, i przez użycie operatora void. Kyle Simpson

Zrozumiałem to tak, jak by operator void coś robił. To nieprawda, no może nie wprost. On zapewnia, że wyrażenie zawsze zwróci wartość undefined. Autorowi musiało chodzić o taką operację.

var a = void 0;

Po wykonaniu takiego kodu, zmienna a również będzie miała wartość undefined.

Sticker 9. Strona 51. Tekst z karteczki: "Operator == sprawdza równość wartości wraz z dozwoloną koercją, natomiast === bez zezwolenia na koercję"

Bardzo ciekawe wytłumaczenie. Nigdy się z takim nie spotkałem, ale to prawda. Operator == nie sprawdza typów ponieważ żagluje nimi, sprowadza obie strony do tego samego typu, a potem dopiero porównuje. Natomiast operator ===, nie zmienia typów. Sprawdza na początku, czy są one takie same. Jeśli nie są to od razu zwraca false. Przykład:

console.log(1 == '1'); // true
console.log(1 === '1'); // false

Sticker 10. Strona 52. Tekst z karteczki: Zerknąć do specyfikacji ECMAScript 5

Wszystkie reguły koercji znajdziemy w specyfikacji, w rozdziale 11.9.3.

Trzeba koniecznie się temu przyjrzeć!

Algorytm jest trochę skomplikowany, nie będę go tutaj umieszczał. Zapraszam do przeczytania. Chociaż raz, każdy developer JavaScript powinien ten algorytm przeczytać. Rozumiem, że zapamiętanie całego procesu, może być trochę kłopotliwe, ale zawsze możemy posiłkować się internetem podczas weryfikacji, jak dokładnie wygląda ten algorytm koercji.

No chyba że jesteśmy na rozmowie rekrutacyjnej, ale to inny temat.

Dodam jeszcze, że ten algorytm jest również w ECMAScript 6.

Sticker 11. Strona 60. Tekst z karteczki: Czy funkcje można deklarować w if-ie?

Dobre pytanie, czy można to robić? Jak sprawa wygląda w Trybie ścisłym? Zrobiłem do tego projekt na GitHubie, obrazujący co się będzie działo, gdy w strict mode będziemy próbowali zdefiniować funkcję w instrukcji warunkowej.

Zapraszam do zapoznania się z nim: github.com/piecioshka/test-define-function-in-if.

Sticker 12. Strona 66. Tekst z karteczki: "publiczne API"? a może być niepubliczne? masło maślane

API czyli Application Programming Interface oznacza pewien interfejs, który wcale nie musi być publiczny. Więc można zrobić prywatne oraz publiczne API. Więcej można poczytać na Wikipedii.

Pisząc tą karteczkę byłem w błędzie i myślałem, że API jednoznacznie daje nam do zrozumienia, że jest tylko PUBLICZNE. Po przeczytaniu Wikipedii wiem, że tak nie jest. Nie ma tutaj “masła maślanego”.

Sticker 13. Strona 72. Tekst z karteczki: literówka: zamiast X !== x powinno być x !== x

Literówki się zdarzają. Jeśli zdarzają się w kodzie, to mogą one spędzić nam sen z powiek i zająć nas na bardzo długo. Takie błędy w książce, mogą co najwyżej spowodować problemy po przepisaniu kodu z książki do komputera.

Sticker 14. Strona 72. Tekst z karteczki: transpiling = transforming + compiling

Dobrze wiedzieć, od czego pochodzi słowo transpiling. W dobie transpilacji Babela i innych narzędzi tego typu.

Sticker 15. Strona 80. Tekst z karteczki: No nie wiem, czy koercja jest faktycznie tym, co powinienem używać w JS-ie

Rzutowanie, szczególnie te niejawne, czasami może przysporzyć problemy (szczególnie z falsy values). Jednak bez rzutowania jawnego daleko byśmy nie “pojechali” w programowaniu w języku JavaScript.

A jak ja konwertuje zmienne? Używam funkcji konstruktorów!

Aby np. zrzutować string na number używam takiej konstrukcji:

console.log(Number('1.1')); // 1.1

Nie wiem, czemu, ludzie często używają funkcji parseInt - ona służy do konwersji na liczbę całkowitą.

console.log(parseInt('1.1')); // 1

Sticker 16. Strona 83. Tekst z karteczki: destrukcja w ES6? chyba destrukturyzacja

Tutaj wina leży po stronie tłumaczenia. Autorowi chodziło o destructuring, czyli rozbijcie struktury. Zaprezentuje przykład o co chodzi z “destrukturyzacją”.

let [a] = [1, 2];
console.log(a); // 1

Sticker 17. Strona 85. Tekst z karteczki: Kto znajduje się w komitecie TC39?

Ostatnia karteczka. Czysto teoretyczna. Jak zdobyć listę członków komitetu zajmującego się rozwijaniem naszego ulubionego języka programowania? Wystarczy wejść na oficjalną stronę, na której znajduje się podział względem typu danego członka. Najważniejsi to “Ordinary members”, czyli firmy, które mają największe prawa.

Ordinary members - firmy zainteresowane i mające doświadczenie w kwestiach związanych z jednym lub więcej Technicznym Komitetem Stowarzyszenia, chcące korzystać z prawa do głosu na zgromadzeniu ogólnym i chcące korzystać z innych wyłącznych praw zdefiniowanych w Statucie i Regulaminie.

Najlepszym źródłem na zdobycie listy członków w postaci listy osób będzie weryfikacja listy obecności w notatkach ze spotkań komitetu. Tutaj znajduje się projekt z notatkami z regularnych spotkań komitetu w sprawie specyfikacji standardu ECMAScript. Notatki z ostatniego spotkania możemy przejrzeć tutaj. Na liście obecności znajdują się:

Dave Herman
Michael Ficarra
Jordan Harband
Adam Klein
Mark Miller
Brian Terlson
Domenic Denicola
Brad Nelson
JF Bastien
Joe Lencioni
Sebastian Markbage
Jeff Morrison
Kevin Smith
Lars Hansen
Saam Barati
Keith Miller
Michael Saboff
Eric Ferraiuolo
Eric Faust
Chip Morningstar
Dean Tribble
Shu-yu Guo
Tim Disney
Waldemar Horwat
Bert Belder
Peter Jensen
Daniel Ehrenberg
Caridy Patiño
Diego Ferreiro Val
Jean Fraucois Paradis
Shelby Hubick
Leo Balter
Misko Hevery - autor Angular.js
Allen Wirfs-Brock
Kevin Gibbons
Steven Lumis
Zibi Braniecki

Dość długa lista. Pewnie niepełna. Ktoś nie przyszedł. Nie szkodzi, przynajmniej teraz już widzę, ilu ludzi zaangażowanych jest w rozwój języka JavaScript.

Podsumowanie

O książce Tajniki języka JavaScript. Na drodze do biegłości mogę wypowiedzieć się w samych superlatywach. Pięknie opisuje ona podstawy i motywuje do tego, aby zacząć programować w JavaScript już dziś!

Jak dla mnie, porusza ona ciut za mało tego co znajduje się w języku, ale może po prostu tak myślę, ze względu na doświadczenie w tej branży. Nie wiem. Grube lektury nigdy nie zachęcają.

Kolejną książką którą opiszę na łamach mojego bloga będzie: Tajniki języka JavaScript. Wskaźnik this i prototypy obiektów.

Recenzja: "Tajniki języka JavaScript. Zakresy i domknięcia"

Piotr Kowalski — Fri, 20 May 2016 00:00:00 +0000

Historia zaczęła się na minionym WarsawJS, gdzie drugim prelegentem był Dominik Lubański. Prelekcja jest dostępna na kanale WarsawJS, jednak klikając na ten link wejdziecie bezpośrednio do momentu, który rozpoczyna moją przygodę z YDKJS (“You Don’t Know JS”).

Jak to się zaczęło?

Dominik pod koniec swojej prelekcji powiedział, że “ciśnie” wszystkich w swojej firmie, aby przeczytali “od deski do deski” wszystkie książki You Don't Know JS. Cenię sobie kompetencje oraz doświadczenie w programowaniu Dominika, dlatego też jego słowa wziąłem sobie do serca i pomimo tego, że nie pracujemy razem, to sam przysiadłem do przeczytania YDKJS.

Nigdy nie czytałem YDKJS. Wydawało mi się to zbyteczne. Myślałem sobie:

YDKJS? Kolejna zwykła książka traktująca o JavaScript. Przeczytałem ich tak wiele, że nie zaszkodzi jeśli pominę tę serię.

Myślałem tak aż do momentu tej prelekcji.

Postawiłem sobie nowy cel: przeczytać całą serię!

Dlaczego YDKJS?

Wydawnictwo Helion.pl trochę pomogło i stworzyło specjalną ofertę promocyjną na swojej stronie: helion.pl/seria-JS.phtml, gdzie dostępna jest lista 5 książek You Don't Know JS autorstwa Kyle Simpsona. Książki, są przetłumaczone na język polski.

Nie będę ukrywał, że książki lepiej mi się czyta w języku ojczystym. Mój poziom angielskiego wystarczy mi do komunikacji z obcokrajowcami, ale nie pozwala na płynne (a co najważniejsze, zachowując to samo tempo) czytanie podręczników.

Wczoraj na łamach fanpaga WarsawJS zamieściłem link do tej promocji.

Nasuwa się pytanie: czy warto?

Po kilku minutach od publikacji pojawił się komentarz (pod tym wpisem), że książka jest dostępna za darmo na publicznym profilu projektu YDKJS.

To prawda. Projekt dostępny jest tutaj: github.com/getify/You-Dont-Know-JS

Jednak uważam, że prawdziwe czytanie książki jest TYLKO w wersji papierowej.

Tak zostałem wychowany i to już się nie zmieni. Oczywiście nie mówię tego bez porównania. Kupiłem sobie jakiś czas temu (może to już 2 lata) Kindla. Mam kilka ebooków na nim. Jednak… bez rewelacji. Nie czuję tego klimatu. Brakuje mi dotyku papieru. No cóż.

Może i jestem osobą, która lubi nowinki techniczne, jednak książki mają to do siebie, że muszę je czuć podczas czytania. Lubię dbać o nie, obkładać szarym papierem jak w bibliotece.

Dobra. Wracamy do meritum!

Kilka dni temu kupiłem wszystkie dostępne 5 książek z serii. Szósta książka jest w przygotowaniu (pewnie obecnie trwa proces tłumaczenia oryginału). Termin publikacji to sierpień, tego roku.

Przedwczoraj zabrałem się za czytanie i napisałem o tym na Twitterze.

Zauważył ją autor książki, Kyle, polajkował i zaretweetował z komentarzem: “Polish translation”.

Zrobiło mi się miło. Jemu pewnie również.

Jak czytam książki?

Wspomniana książka składa się z około 100 stron.

Więc na przeczytanie całej potrzebuje około 2-3 godzin.

Generalnie, gdy czytam książki to robię sobie notatki, ale nie takie normalne notatki gdzieś obok na kartce. Nie piszę również długopisem ani ołówkiem po książce - uważam to za pewnego rodzaju złamanie zasad.

Pisanie długopisem albo ołówkiem po książce to bluźnierstwo! Piotr Kowalski

Gdy czytam książki to naklejam stickery (takie małe karteczki), na których notuję jakieś informacje. Przykładem niech będzie moja prelekcja na “Angular Warsaw” nt. mojego podejścia do frameworka AngularJS po przeczytaniu dwóch książek. Zobaczcie slajdy.

Moje notatki

Tym razem nie było inaczej. W sumie użyłem 11-tu karteczek, gdzie napisałem sobie notatki w związku z daną zawartością strony, na której karteczka znalazła swoje miejsce.

Może przedstawię te kilkanaście punktów, gdzie chciałem napisać komentarz.

Sticker 1. Strona 18. Tekst z karteczki: LHS - co jest celem przypisania? RHS - co jest źródłem przypisania?

Co się kryje za terminem LHS? Rozwinięcia tego akronimu próżno szukać w książce. Jest za to coś ważniejszego, czyli wytłumaczenie pojęcia. W skrócie chodzi o to, że silnik gdy widzi taki kod:

var a = 5;

…wykonuje 2 operacje. Pierwsza to definicja zmiennej:

var a;

druga to:

a = 5;

Ten drugi etap jest wyciągnięciem zmiennej w trybie do przypisania, czyli LHS

Drugi termin, czyli RHS oznacza, że silnik chce użyć zmienną. I tak o to prosty przykład:

console.log(a);

Mamy tutaj pobranie wartości zmiennej.

Nigdy nie słyszałem, o takich nazwach trybów dostępu. Oczywiście, używałem obu tych form, jednak nie wiedziałem, że jest taka terminologia (zasada działania) zaimplementowana w silniku.

LHS oznacza Left Hand Side
RHS oznacza Right Hand Side

Dla dociekliwych, polecam przeczytać wpis opisujący bardziej dokładnie LHS i RHS:

https://john-dugan.com/hoisting-in-javascript/

Sticker 2. Strona 30. Tekst z karteczki: Wyszukiwanie zakresu zostanie zatrzymane po znalezieniu pierwszego dopasowania!

Karteczka czysto informacyjna. Jak silnik nie znajdzie zmiennej w zakresie, gdzie jest żądanie pobrania wartości, to szuka w zakresie wyższym. Jeśli znajdzie to przestaje szukać. Chociaż oczywiste, to warto zanotować.

Sticker 3. Strona 34. Tekst z karteczki: Wyciekająca zmienna globalna (with)

Kto używa with w dzisiejszych czasach? Chyba tylko Firebug. Sticker przypomina, że with jest bardzo złe bo, jeśli w obiekcie, który jest brany pod uwagę przez with nie znajdziemy właściwości, którą chcemy zaktualizować, to będzie ona ustawiona jako globalna. Przykład:

var dog = {
    name: '',
};
with (dog) {
    name = 'doggy';
    surname = 'what?';
}
console.log(dog.name); // "doggy"
console.log(dog.surname); // undefined
console.log(window.surname); // "what?"

Sticker 4. Strona 46. Tekst z karteczki: ...czyli arrow function to wyrażenie funkcyjne!

Zgadza się! Arrow Function to nie funkcja a wyrażenie funkcyjne! Dlaczego? Każda funkcja podczas definicji musi posiadać nazwę, a ze względu na to, że w składni AF nie można zdefiniować nazwy to jest to wyrażenie funkcyjne! Dziwne, bo przecież są funkcje anonimowe, czyli takie, które nie posiadają nazwy. Temat warty dyskusji.

Sticker 5. Strona 55. Tekst z karteczki: Ciekawy zabieg wydajnościowy zw. z { }

Uważam to za interesujące, ponieważ w JavaScript mamy zasięg leksykalny, czyli funkcyjny. Zasięg zaczyna się na początku definicja funkcji i kończy wraz z jej końcem. Wyjątkiem jest konstrukcja try...catch, gdzie w bloku catch mamy zasięg blokowy! Czyli od klamerki { do klamerki }.

try {
    throw new Error('test');
} catch (error) {
    console.log(error); // zmienna `error` jest dostępna TYLKO pomiędzy `{}`
}

W specyfikacji ECMAScript 6 mamy wsparcie do zasięgu blokowego, gdy definiujemy zmienną wyrażeniami: let albo const.

Pewną optymalizacją jest, aby nie definiować zmiennych na początku funkcji (w zasięgu blokowym), skoro używamy jej tylko w jednym miejscu. Przykład na pewno rozjaśni sprawę.

function doSomething() {
    let e = 0;

    bar(foo);

    var r = 'abc';

    for (let t = 0; t < 3; t++) {
        setTimeout(function () {
            console.log(t);
        }, 400);
    }

    let startLabel = 'start' + e;
    let endLabel = 'end' + (10 - e);
    console.log([startLabel, endLabel]);
}

Na powyższym przykładzie widać, że zmienna e jest zdefiniowana bardzo wysoko. Lepiej od strony wydajności jest zdefiniować ją blisko użycia i opakować w klamerki:

function doSomething() {
    bar(foo);

    var r = 'abc';

    for (let t = 0; t < 3; t++) {
        setTimeout(function () {
            console.log(t);
        }, 400);
    }

    {
        let e = 0;
        let startLabel = 'start' + e;
        let endLabel = 'end' + (10 - e);
        console.log([startLabel, endLabel]);
    }
}

Tworzymy wtedy zasięg TYLKO dla zmiennych e, startLabel i endLabel. No i tylko w tym zasięgu zmienna e jest potrzebna. Nie ma sensu jej wciskać do zasięgu zewnętrznego.

Sticker 6. Strona 63. Tekst z karteczki: Bardzo dziwny kawałek kodu, dający jednak jasno do zrozumienia, że to funkcje są pierwotnie "wynoszone" (hoisting)

Może zacytuje kawałek kodu, o którym mowa:

foo(); // 1

var foo;

function foo() {
    console.log(1);
}

foo = function () {
    console.log(2);
};

Tak to zinterpretuje silnik:

function foo() {
    console.log(1);
}

foo(); // 1

foo = function () {
    console.log(2);
};

Interesujący smaczek języka!

Sticker 7. Strona 73. Tekst z karteczki: Domknięcie to funkcja, która ma dostęp do zmiennych lokalnych (zdefiniowanych w tym samym zakresie leksykalnym co dana funkcja) musi być uruchomiona na zewnątrz tego zakresu!

IIFE to nie domknięcie. Szok. Przez tyle lat tak myślałem. Prawdziwe domknięcie polega na tym, że uruchamiamy funkcję z zakresu, gdzie nie ma dostępnej danej zmiennej. Przykład zobrazuje to najlepiej.

function MyModule() {
    var secret = 123;

    function getSecret() {
        return secret;
    }

    return {
        getSecret: getSecret,
    };
}

var mod = MyModule();
mod.getSecret(); // Uruchamiamy funkcję, która ma dostęp do zmiennej "secret". Tylko w ten sposób do niej się dobierzemy.

Sticker 8. Strona 80. Tekst z karteczki: Piękna definicja wzorca Singleton

Najpopularniejszy wzorzec projektowy, który bardzo często słyszę na rozmowach rekrutacyjnych jako odpowiedź na pytanie: A jakie znasz wzorce projektowe? SINGLETON!

Świetny przykład znajduje się na 80-tej stronie. Może skrócę go do wersji minimum:

var foo = (function () {
    'use strict'; // tego w książce nie było

    var secret = 12345;

    function getSecret() {
        return secret;
    }

    return {
        getSecret: getSecret,
    };
})();

foo.getSecret();

Pięknie się tworzy takie implementacje.

Sticker 9. Strona 84. Tekst z karteczki: Błąd: zamiast module foo from "foo"; powinno być import foo from "foo";

No i mamy (niestety) pierwszy błąd w książce, bynajmniej znaleziony przeze mnie. Pod koniec 5-tego rozdziału autor chciał opisać moduły w ES6. Nazwa podrozdział “Pyszne moduły”. Niestety kod źródłowy w przykładzie posiada rażące błędy.

Stworzyłem projekt na GitHubie opisujący błędny kod, wraz z kodem poprawionym.
Zapraszam do zapoznania się: github.com/piecioshka/errors-in-ydkjs-scope-closures-book

A o to lista błędów:

pierwszy problem to ścieżki, do plików lokalnych trzeba odnosić się poprzez ./ na początku
nie ma w specyfikacji ECMAScript 6 słowa operatora module (taki w stylu import)
nie ma takiej składni eksportowania jak export hello; (lista dostępnych możliwości), trzeba eksportować tak export {hello};
nie można zmienić nazwy importowanego modułu import foo from "./foo";, należy wskazać, że API z pliku foo.js, będzie w obiekcie poprzez takie kod: import * as foo from "./foo"; (lista wszystkich możliwości importowania)
jeżeli chcemy z modułu wyciągnąć tylko jedną funkcję to trzeba opakować ja w curly braces, zamiast import hello from "bar"; trzeba import {hello} from "bar";

Sticker 10. Strona 92. Tekst z karteczki: Trochę szkoda, że nikt nie wspomniał o Babel.js

W książce jako transpiler wymieniony byl tylko Traceur. Z tego co pamiętam, to ma on zdecydowanie mniejsze pokrycia specyfikacji niż Babel.js. Babel ma bardzo przyjemne wsparcie do m.in Webpacka i jest zdecydowanie bardziej popularniejszy w społeczności.

Sticker 11. Strona 94. Tekst z karteczki: TODO: skorzystać z projektu "let-er"

let-er - nowe narzędzie - warto się zapoznać! Projekt autorstwa Kyle Simpsona pozwala na kompilację bloku kodu:

let (x = "foo") {
    console.log(x); // "foo"
}

Do zapisuj znanego nam z ES6:

{
    let x = 'foo';
    console.log(x); // "foo"
}

Narzędzie posiada opcję konwersji do ES3. Jak już wcześniej wspomniałem, w JavaScripcie jest zasięg funkcyjny, z 1 wyjątkiem, konstrukcja try...catch, w której mamy zasięg blokowy. Przykład:

try {
    throw 'foo';
} catch (x) {
    console.log(x);
}

Jeżeli chodzi o mnie to projektu raczej nie wykorzystam. Nie widzę praktycznego zastosowania.

Moje doświadczenie

Może trochę słów o książce. Czytało mi się ją szybko. Nie miałem jakiś problemów ze zrozumiem, o co autorowi chodzi. Książka dla mnie jest odświeżeniem tematu zakresów i domknięć. Polecam ją każdemu, kto zaczyna swoją przygodę z JavaScriptem.

Mam nadzieje, że inne książki z serii będą miały podobny styl. Dziękuję Dominik, że zaszczepiłeś we mnie ten pomysł na przeczytanie całej serii.

Jak podsłuchać iPhona?

Piotr Kowalski — Tue, 17 May 2016 00:00:00 +0000

Tym artykułem chciałbym pomóc wszystkim tym, którzy podobnie jak ja, tworzą aplikacje cross-platformowe, i mają problem z debugowaniem na urządzeniach z rodziny Apple. Przedstawię jak podsłuchać komunikację przeglądarki uruchomionej na iPhonie, iPadzie albo iPodzie.

Jako developer aplikacji multi-platformowych, często (moim zdaniem za często) poprawiam błędy pojawiające się tylko na jednej platformie. Nie jest to miłe.

JESTEM OGROMNYM ZWOLENNIKIEM SPÓJNOŚCI

…dlatego moim marzeniem byłaby sytuacja taka, że jedno rozwiązanie powinno działać, albo nie działać wszędzie zarazem.

Wolę mieć jasną sytuację, że jeśli na jednej platformie nie działa, to na pozostałych również. Wtedy wiem, że gdy na jednej zrobię poprawkę, to na wszystkich innych będzie także działało.

Niestety, to rzadkość w tym fachu.

Problem kompatybilności z Apple

Jakiś czas temu w pewnym moim projekcie istniał problem przeglądarki uruchomionej na iPhonie komunikującej się z serwerem HTTP. Korzystając z przeglądarki Google Chrome, nie można niestety wejść w tryb developerski (remote debugging), czyli mieć połączenie komputer - urządzenie i weryfikować stan aplikacji uruchomionej na urządzeniu.

Taki remote debugging działa tylko na urządzeniach z Androidem, które podłączymy do komputera z Windowsem / OSXem / Linuksem.

Wtedy po podłączeniu telefonu z Androidem wchodzimy na komputerze (korzystamy z Google Chrome) na <chrome://inspect> i wybieramy urządzenie, które chcemy połączyć z naszym komputerem.

Chcę po prostu podłączyć się do iPhona, ale jak? Może… to narysuję.

Ryc. 1. Połączenie MacBook z iPhonem albo iPadem.

Kabel podłączam. iTunes wykrywa urządzenie. Na razie wszystko gra. Co dalej?

Tryb remote debugging działa w Safari (specjalnie nie nazywam tego programu przeglądarką ze względu na implementację specyfikacji W3C oraz kiepskie narzędzia developerskie - Google Chrome to jedyna słuszna przeglądarka). No dobra, przedstawię kroki jak skorzystać z remote debugging.

Safari - Remote debugging

Poniżej lista kroków, aby korzystać z DevToolsów (czytaj “narzędzi developerskich”) dla Safari.

Pierwszy krok to konfiguracja sprzętowa: podłączasz kabelkiem iPhona z MacBookiem (to chyba jasne).
iPhone: Drugim krokiem jest włączenie Inspektora w przeglądarce Safari. Wykonać to należy wchodząc w urządzeniu w: Ustawienia → Safari → Zaawansowane → Inspektor WWW. Przełączamy Inspektora w stan włączenia.
iPhone: uruchamiasz Safari i wchodzisz na stronę example.org

Ryc. 2. Otworzona strona example.org na iPhone.
MacBook: uruchamiasz Safari i wybierasz z menu górnego Programowanie, a potem iPhone (albo iPad, albo iPod)

Ryc. 3. Otwieramy zakładkę Programowanie → iPhone i widzimy wszystkie otwarte strony.

Jeżeli będziesz w takiej sytuacji:

Ryc. 4. Otwieramy zakładkę Programowanie → iPhone i nie widzimy otwartych stron.

...to w sekcji FAQ (na dole strony) znajdziesz rozwiązanie.
MacBook: wybierasz stronę example.org klikając w element menu.

Ryc. 5. Klikamy w konkretną stronę otwartą na Safari na iPhone.
MacBook: naszym oczom ukazują się narzędzia developerskie znane z typowego debugowania pod Safari na OSX.

Ryc. 6. Otwarte DevToolsy (narzędzia developerskie), które są podłączone do Safari uruchomionego na iPhone.
Od teraz jesteśmy podłączeni konsolą do strony otworzonej na iPhonie. Możemy w pełni debugować naszą aplikację.

Co jeśli jednak chcielibyśmy podłączyć się Wiresharkiem? Tutaj pojawia się problem, ponieważ nie wykrywa on podłączonego urządzenia!

Wireshark podsłuchuje iPhona

Wireshark to najlepszy sniffer (analizator pakietów) na rynku. Każdy kto uważa się za programistę sieciowego, a Ty jako programista aplikacji internetowych należysz do takich, to na pewno wiesz jak sobie poradzić z Wiresharkiem.

Jeśli nie korzystałeś nigdy z tego programu, to polecam książkę pt. “Praktyczna analiza pakietów” autorstwa Chrisa Sandersa. Książka jest dostępna po polsku w księgarni internetowej Helion: helion.pl/ksiazki/praktyczna-analiza-pakietow-….htm Wkrótce na blogu pojawi się recenzja tej książki. Jeśli kogoś temat interesuje, to zachęcam do śledzenia mojego bloga.

Ryc. 7. Wireshark z listą interfejsów.

Na powyższym zrzucie ekranu nie widać połączenia (odpowiedni interfejs) z iPhonem. Rozwiązanie zagadki jest proste. Do komunikacji z tym urządzeniem brakuje odpowiedniego interfejsu! Dodajmy go!

Dodajemy interfejs do komunikacji z iPhone

Za pomocą narzędzia rvictl, czyli Remote Virtual Interface Tool możemy zarządzać interfejsami. Zobaczmy jak wygląda pełny opis narzędzia:

Ryc. 8. Program rvictl.
Skorzystamy z opcji -s, aby uruchomić kanał komunikacyjny między MacBookiem a iPhonem. Potrzebujemy do tego UUID urządzenia (dowolnego z rodziny Apple: iPhone, iPad, iPod).

Jeśli nie wiesz co to jest UUID, to odpowiedź znajdziesz w FAQ.

Żeby to zrobić uruchamiamy program iTunes:

Ryc. 9. Program iTunes.
Następnie wybieramy nasze urządzenie:

Ryc. 10. Wybieramy iPhona w programie iTunes.
Klikamy w "Numer seryjny" aby pokazał nam się UUID urządzenia:

Ryc. 11. Wyświetlony UUID urządzenia iPhone.
Klikamy prawym przyciskiem myszy, pokazuje nam się menu kontekstowe z jedną opcją "kopiuj".
Przechodzimy do terminala i wpisujemy polecenie:
```
rvictl -s [UUID]
```
...zastępując [UUID] skopiowanym ciągiem znaków.
Resetujemy Wiresharka, a w nowej sesji programu widzimy listę interfejsów z nowym rv0:

Ryc. 12. Wireshark z dłuższą listą interfejsów (pojawił się interfejs rv0)."
Wybieramy interfejs rv0 (klikając 2x w daną pozycję) i od teraz możemy nasłuchiwać wszelką komunikację telefonu ze światem zewnętrznym!

Przykład poniżej:

Ryc. 13. Request HTTP do strony example.org widziany w programie Wireshark.

Dzięki takiemu nasłuchiwaniu pakietów jesteśmy w 100% pewni jakie zapytania generuje urządzenie, oraz tym samym jakie dostaje odpowiedzi z serwera.

FAQ

Nie widzę w Safari na MacBooku żadnej strony na moim iPhonie?: Zerknij na iPhone, czy przypadkiem nie zgasł Ci ekran. Aby korzystać z Remote debugging, musisz ciągle mieć otwartą aplikację Safari na pierwszym planie (musi być widoczne).
Co to jest UUID urządzenia?: Pełne rozwinięcie akronimu to Universally unique identifier. Jednoznacznie identyfikuje urządzenie, które podłączyliśmy do komputera. Ciąg znaków jest 128-bitowy, więc ma 2¹²⁸ kombinacji. Więcej szczegółów dostępnych na Wikipedii (hasło: Universally_unique_identifier).

Podsumowanie

Jak widać wystarczy kilka minut, aby podsłuchiwać dowolne narzędzie z rodziny Apple, czy to będzie iPhone, iPad czy iPod. Trzeba posiadać “kompatybilny” komputer z rodziny Apple. Po podłączeniu kabelkami możemy podglądać co tam “lata w tle”.

Na oficjalnej stronie firmy Apple, w sekcji dla developerów, znajduje się wyjaśnienie po angielsku, może dla kogoś będzie to przystępniejsza forma pozyskania wiedzy.

Zapraszam do oficjalnego manuala na developer.apple.com.

WarsawJS Meetup #20

Piotr Kowalski — Sun, 24 Apr 2016 00:00:00 +0000

To już 20-ty miesiąc z rzędu, kiedy spotykamy się w Państwomiasto i rozmawiamy o JavaScript. Tym razem mieliśmy 4 prelekcje - taka mini konferencja - powrót do korzeni. Dla przypomnienia 2 pierwsze meetupy miały po 4 prelekcje, ale ze względu na sumaryczny czas prelekcji my jako organizatorzy postanowiliśmy skrócić część oficjalną do 3 wystąpień.

Invitation

Tym razem pojawiliśmy się na Warszawskich bielanach.

Dostaliśmy zaproszenie o Ogólnopolski turniej walk rycerskich.

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Puppetize JS [PL] Krzysztof Suszyński i Karol Kozakowski

Link do prelekcji: youtube.com/watch?v=Uwoicz3wX3M

•

Talk #2: My first time with Angular2 [PL] Norbert Sienkiewicz

Link do prelekcji: youtube.com/watch?v=knmaXx3yNts

•

Talk #3: Idea reaktywnego programowania [PL] Robert Gurgul

Robert opowiadał o reaktywnym podejściu do programowania. Do tego tematu wykorzystał bibliotekę RxJS. Z prelekcji dowiedziałem się mnóstwa nowych i bardzo interesujących rzeczy, do takiego stopnia, że chciałbym zrobić projekt, raczej prosty taki do wypróbowania biblioteki oraz zapoznania się w praktyce z takim podejściem do programowania.

Link do prelekcji: youtube.com/watch?v=zdunjYAyoJw

•

Talk #4: Event Sourcing: Towards Clarity [EN] Robert Kawecki

Link do prelekcji: youtube.com/watch?v=9GvbCvoNdk4

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live
Softwarely - dodatkowe wsparcie

WarsawJS Meetup #19

Piotr Kowalski — Sun, 24 Apr 2016 00:00:00 +0000

19-te spotkanie warszawskich programistów JavaScript.

Invitation

Jako warszawski obiekt, przed którym nagramy kolejną zapowiedź, aby pokazać oglądającym jak wygląda Warszawa wybraliśmy fabrykę czekolady Wedel. Znajduje się ona na Pradze na ulicy Grochowskiej.

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Class Free OOP [EN] Artur Siery

Link do prelekcji: youtube.com/watch?v=CxfIeEG8fnE

•

Talk #2: Painless 3D graphics in browser with THREE.js [PL] Jakub Skałecki

Link do prelekcji: youtube.com/watch?v=bRjlBejvcog

•

Talk #3: JS Promises - use cases, standards and libraries [PL] Marcin Bychawski

Link do prelekcji: youtube.com/watch?v=fwOq8lS63q0

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live
Softwarely - dodatkowe wsparcie

Definicje testów

Piotr Kowalski — Sat, 16 Apr 2016 00:00:00 +0000

Często spotykam się z niepoprawnym nazywaniem testów wykonywanych w procesie wytwarzania oprogramowania. Tym wpisem chciałbym przedstawić Ci sześć podstawowych typów testów. Mam nadzieje, że będziemy od teraz porozumiewać się tą samą terminologią (przynajmniej jeżeli chodzi o testy).

Testy w Inżynierii Oprogramowania

Testy jednostkowe (unit testing)

Testy stworzone przez autorów kodu, które testują pojedyncze funkcje. Czasami można pod tą definicje zalicza się także klasa.

Bardzo lubię pisać testy jednostkowe, ponieważ po ich napisaniu dla danej funkcji, mam pewność poprawności jej działania. Podnosi to mój komfort podczas pracy twórczej (implementacji).

Każdy z testów powinien być uruchomiony w izolowanym środowisku. Co to oznacza? A no tyle że wynika działania jednego testu NIE MOŻE wpływać na drugi. W tym miejscu warto poznać mocki.

Narzędzia

Jakich narzędzi używam do pisania testów jednostkowych?

Bardzo lubię składnie i idee, które są zaaplikowane w bibliotece Jasmine ale też Mocha świetnie się spisuje jako test runner.

Pół roku temu stworzyłem na GitHubie projekt, gdzie wykorzystałem Jasmine oraz transpiler Babel - https://github.com/piecioshka/test-jasmine-babel. Niestety projekt ten nie zawiera większej definicji testów - nie ma punktu odniesienia. Jest on zrobiony tylko w celu udowodnienia (samemu sobie), że można wykorzystywać Babel.js, aby tworzyć testy.

Projekt opisany poniżej już może bardziej zaciekawić.

Dobrym przykładem z większą ilością testów jest biblioteka https://github.com/piecioshka/super-event-emitter.
Na dzień 2016-04-16 W katalogu test/unit/specs/ ich liczba wynosi 32.

Ci z Was, którzy nie tworzyli wcześniej testów, to jest to najlepszy moment, aby w swoim projekcie (tak naprawdę w dowolnym) spróbować napisać kilka testów jednostkowych.

Pokrycie kodu (code coverage)

Podczas pisania testów jednostkowych ważne jest tzw. pokrycie kodu. Mam tutaj na myśli, stosunek procentowy: ile linijek kodu aplikacji zostało uruchomionych podczas testów do całości kodu. Jeśli coś zostało uruchomione, to TAK JAKBY zostało przetestowane.

Warto napisać kilka asercji to każdego wyrażenia, które coś modyfikuje.

Wskaźnik pokrycia kodu na poziomie 100%, mówi, że cały kod aplikacji został uruchomiony podczas testów, ale proszę nie mylcie tego z tym, że każda linijka została przetestowana.

Testy integracyjne (integration testing)

Testy stworzone przez developerów. Zweryfikowane są połączenia między modułami.

Testy integracyjne to trudniejszy temat. Tutaj pojawia się stworzenie sztucznego (laboratoryjnego) środowiska, gdzie takie testy można uruchomić.

Narzędzia

Podobnie jak w przypadku testów jednostkowych możemy wykorzystać te same narzędzia, aczkolwiek będziemy potrzebowali sprawdzić nie tylko poprawne działanie pojedynczej funkcji, ale połączenie jej z inną.

Testy end-to-end (e2e testing)

Testy stworzone przez developerów. Testują one procesy biznesowe w sposób emulujący zachowanie użytkownika. Celem jest przejście przez dowolny proces z logiki biznesowej w celu potwierdzenia poprawnej implementacji.

Najczęściej aby przeprowadzić testy E2E należy posiadać rzeczywiste dane. Przykładem niech będzie posiadanie loginu i hasła użytkownika, aby przetestować mechanizm logowania użytkownika.

Narzędzia

Ostatnio chętnie używam narzędzia Nightwatch.js. Korzystnym przykładem takich testów jest bardzo znany sposób nagrywania scenariusza, takiego jaki tester realizuje podczas swoich testów funkcjonalnych, a potem ich automatycznego odtwarzania.

Najpopularniejsze narzędzie do takich testów nosi nazwę Selenium. Jednak wyżej wymienione przeze mnie narzędzie jest o wiele lepsze dla nas (developerów JavaScriptu) ponieważ testy tworzymy w języku, który używamy na co dzień.

Testy funkcjonalne (black-box testing)

Testy przeprowadzane przez osoby z zewnątrz (nie autorów kodu).

Testy takie są wykonywane najczęściej przez testerów - osobny dział weryfikujący poprawność działania aplikacji. Developer oddaje aplikację do testów uruchamiając ją na środowisku stagingowym, po to aby testerzy mogli ją “przeklikać”.

Testy strukturalne (white-box testing)

Testy przeprowadzane przez osoby z zewnątrz tak, aby przetestować wszystkie przypadki kodu, przy tego rodzaju testach pomagają programiści, aby móc przetestować każdą linijkę.

Specjalny rodzaj testów funkcjonalnych, gdzie programiści modyfikują kod aplikacji, aby przetestować przypadki, które ciężko zreprodukować w środowisku uruchomionej aplikacji (na przykład modyfikacja czasu na urządzeniach takich jak telewizory).

Testy statyczne

Autorzy kodu, czytają kod źródłowy w poszukiwaniu błędów składni, ale też procesów biznesowych.

Takie testy realizowane są najczęściej podczas code review innego developera. Z mojego doświadczenia są to testy bardzo pomocne w zakończeniu zadania - na Twój kod patrzy cały zespół projektowy.

Moje doświadczenie pokazuje, że warto spotkać się jako zespół i porozmawiać o konkretnej zmianie, przed wdrożeniem.

Jeśli realizujecie swoje projekty na GitHubie (albo GitLabie) to świetnie jest spotkać się zespołem na omawianiu danego Pull Request-u. Wszyscy skupiają się tylko na tej jednej zmianie (która może oczywiście dotyczyć wielu plików).

Testy dynamiczne

Porównywanie danych wyjściowych z oczekiwanymi.

Na analizowanym kodzie (w testach statycznych) dorzucamy testowanie kodu uruchamiając z przykładowymi danymi w oczekiwaniu na dane wyjściowe, które to powinny być zgodne z flow implementacji logiki biznesowej (albo algorytmu).

Podsumowanie

Wystarczy zapamiętanie tych kilku typów testów, wśród których najważniejsze są 3 pierwsze, a komunikacja w zespołach projektowych może się poprawić.

Zachęcam wszystkich, którzy jeszcze nie pisali testów jednostkowych albo integracyjnych do spróbowania. Możecie się wzorować na moich projektach:

Moja przygoda z monadami w JavaScript

Piotr Kowalski — Sat, 12 Mar 2016 00:00:00 +0000

Kilka lat temu mój kolega z pracy, developer pythona, który to uwielbiał czytać książki techniczne rozwijając przy tym swój wachlarz umiejętności zapytał mnie, osoby która zajmowała się JavaScript, jak to w “moim” języku wyglądają monady.

Flame

Pierwsze co pomyślałem, to że znowu zaczyna się flame - czyli kolejna kłótnia, nad wyższością swojego języka programowania. Nie lubię brać udziału w takich dyskusjach, ponieważ zwykle poza zwiększeniem poziomu stresu niczego wartościowego nie doświadczymy.

Niestety zawiodłem, ponieważ nie znałem odpowiedzi na jego pytania.

Wtedy nie wiedziałem czym się charakteryzuje programowanie funkcyjne, tym samym coś takiego jak monady w JavaScript dla mnie nie istniały.

Generalnie po kilkudziesięciu minutach researchu dowiedziałem się, że monady to takie “idiotoodporne” funkcje. Gama metod biblioteki jQuery jest dobrym przykładem, które to nigdy (a raczej rzadko kiedy) rzucą wyjątku. Z takim myśleniem zostałem przez kolejne 2-3 lata.

Po 2 latach bycia niedoinformowanym…

Pewnego dnia mój kolega Michał Kawalec, zaprosił mnie na Monadic Warsaw. Mowa tu dokładnie o 6-tej edycji. Monadic to organizacja, której przyświeca cel rozmawiania o programowaniu funkcyjnym. Postanowiłem, że z miła chęcią się odwdzięczę i opowiem o monadach w JavaScript - doczytam, przygotuję się i wyjdę na scenę.

Poczytałem, przestudiowałem.
Zrobiłem slajdy http://piecioshka.github.io/slides-monads-in-javascript/.
Jestem przygotowany - do dzieła zatem!

Wychodzę na scenę

Przyszedłem na spotkanie. Pełna sala.

Świetnie jest widzieć tylu ludzi, którzy poza swoimi codziennymi obowiązkami przychodzą na spotkania i się rozwijają.

Po wysłuchaniu pierwszej prezentacji poprowadzonej przez Bartosza Milewskiego, który to wyjaśniał teorię kategorii, dowiedziałem się zdecydowanie więcej o monadach niż przypuszczałem.

Dowiedziałem się, że monada musi zawsze zwracać inny typ gdy zostanie zdefiniowany ze względu na swoją naturę. Monady to konstruktory typów. Dlatego gdy zostaną użyte muszę zwracać rożne wyniki.

jQuery to nie jest monada

Biblioteka jQuery, o której wcześniej pisałem nie jest więc przykładem na realizację monad w JavaScript.

Poniżej jeden z slajdów z mojej prezentacji:

Źródła slajdów dostępne tu: https://github.com/piecioshka/slides-monads-in-javascript

Podczas swojego researchu przed prezentacją i kompletowaniem źródeł, z których korzystałem przy tworzeniu slajdów natknąłem się na post https://www.quora.com/Is-jQuery-a-monad.

W pierwszym komentarzu mój poprzednik na scenie wyjaśnił, że wszyscy, którzy uważają jQuery za monadę, żyją w błędzie.

jQuery nie jest monadą, ponieważ gdy zastosujemy funkcję jQuery $() na wyniku tejże funkcji to otrzymamy ten sam typ obiektu.

$($($('body'))) jest tym samym co $('body').

Podczas mojego researchu dowiedziałem się o 3 aksjomatach, które muszą zostać spełnione, aby można było coś nazwać monadą.

3 prawa monad

Przetłumaczyłem prawa znajdujące się w projekcie https://github.com/piecioshka/my-monad#the-monadic-laws na język polski (z góry przepraszam jeśli się pomyliłem w tłumaczeniu).

monada jest wraperem na inny typ
wszystkie funkcje monad muszą posiadać funkcję do wrapowania samych siebie o inne typy danych
wszystkie monady muszą być zdolne aby zasilać wartością, które wrapują, inne funkcje, dopóki one nie zwrócą kolejnej monady

W czym monady pomagają?

Monady mają pomóc w programowaniu i to robią.

Najpopularniejszym przykładem monad jest obiekt Promise w JavaScript. To dzięki niemu piszemy kod asynchronicznych w sposób bardzo czytelny. Przykład:

function makeSomething(value) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(value), 1000);
    });
}

Promise.resolve(3)
    .then(makeSomething)
    .then((value) => {
        console.debug(value);
    });

Podsumowanie

Temat monad jest bardzo szeroki. Nie opisałem jak samemu stworzyć implementację chociażby Identity Monad, ze względu na to, że istnieje już wiele miejsc gdzie można takie implementację zobaczyć.

Na swoim profilu na GitHubie stworzyłem projekt, z implementacją monad w JavaScript. Zapraszam do odwiedzenia przykładowych testów: https://github.com/piecioshka/my-monad

Aby jeszcze bardziej zapoznać się monadami i ich różnymi typami zapraszam do 11 slajdu mojej prezentacji na Monadic Warsaw http://piecioshka.github.io/slides-monads-in-javascript/#11. Jest tutaj lista podstawowych typów monad jakie występują w przyrodzie.

Bibliografia

Na zakończenie warto zapoznać się ze źródłami, z których czerpałem wiedzę:

WarsawJS Meetup #18

Piotr Kowalski — Wed, 24 Feb 2016 00:00:00 +0000

Lutowe spotkanie ze śniegiem w tle. Spotkaliśmy się kolejny raz aby porozmawiać o JavaScript.

Invitation

Zapowiedz nagraliśmy w Centrum stolicy na pl. Defilad. Chcieliśmy rozpowszechnić informację o lodowisku, które zaprasza wszystkich chętnych do jazdy. Człowiek czasami musi odpocząć od kodu i dokonać aktywności fizycznej 😄

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Model współbieżności i Event Loop [PL] Paweł Thomalla

Paweł jako programista C++ nie ma doświadczenie komercyjnego z JavaScript, jednak odważył się wejść na warszawską scenę i porozmawiać o JavaScript. Paweł w swojej prezentacji wyjaśnił na czym polega pętla zdarzeń - główna idea asynchroniczności w JavaScript.

Wszystko dzięki zegarom. To one “wrzucają” funkcję do wykonania po zakończeniu aktualnego obrotu. Funkcja zdefiniowana w setTimeout uruchomi się dopiero gdy obecny kod zostanie uruchomiony w sposób asynchroniczny.

Slajdy dostępne w opisie filmu.

Link do prelekcji: youtube.com/watch?v=hSCX0_rGqhA

•

Talk #2: Universal JavaScript web applications with React [PL] Wojciech Rydel

Wojtek pierwszy raz pojawił się przed naszą warszawską publicznością. Podczas swojego debiutu opowiedział o uniwersalnym kodzie z użyciem biblioteki React.js.

Slajdy dostępne w opisie filmu.

Link do prelekcji: youtube.com/watch?v=DGdaOLZ_VP8

•

Talk #3: Automatyzacja zadań [PL] Radosław Krzepkowski

Radek występował dwa razy pod rząd (w zeszłym miesiącu opowiadał o podstawach biblioteki Backbone.js, tym razem opowiadał o Gulp-ie, Grunt-cie oraz generalnie o npm.

Slajdy dostępne w opisie filmu.

Link do prelekcji: youtube.com/watch?v=iFO5y661VhI

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

Zezwalaj na wklejanie w Mozilla Firefox

Piotr Kowalski — Mon, 01 Feb 2016 00:00:00 +0000

W dniu wczorajszym chciałem przetestować kawałek kodu JavaScript. Bardzo prosty kawałek kodu sprawdzający właściwość User-Agent naszej przeglądarki. Chciałem sprawdzić, czy linijka którą napisałem, zadziała na różnych programach do przeglądania internetu.

Wspomniany kawałek kodu:

/firefox/i.test(navigator.userAgent);

Ta linijka na podstawie navigator.userAgent weryfikuje czy jesteśmy w przeglądarce Mozilla Firefox. Dzięki wyrażeniu regularnemu /firefox/ oraz funkcji test() weryfikujemy czy w łańcuchu znaków (jakim jest navigator.userAgent) znajduje się wyraz firefox, bez znaczenia na wielkość liter (dzięki /i - wyłączamy tryb case sensitive).

W przeglądarce Google Chrome napisałem ten kawałek kodu. Zwrócił false rzecz jasna.

Chciałem zweryfikować, czy w przeglądarce Mozilla Firefox, zwróci true. Otwieram go i wklejam kawałek tekstu.

Moim oczom ukazuje się następujący komunikat:

Komunikat zabezpieczający przed wklejeniem kodu do konsoli DevTools w Mozilla Firefox

Ostrzeżenie: należy zachować szczególną ostrożność podczas wklejania rzeczy, których się nie rozumie. Takie treści mogą potencjalnie pozwolić atakującemu na kradzież Twojej tożsamości lub przejęcie kontroli nad Twoim komputerem. Należy wprowadzić „zezwalaj na wklejanie” poniżej (nie trzeba zatwierdzać enterem), aby umożliwić wklejanie.

Moje odczucia

Pierwsza linijka sugeruje, że nie wiem co wklejam. Doskonale wiem co chcę wkleić. Komunikat trochę kontrowersyjny.

Na początku myślałem, że to jakiś żart. Ten komunikat prosi, że mam wpisać “zezwalaj na wklejanie”? Strasznie dziwne, ale tak zrobiłem. Wpisałem te 3 wyrazy i … od tego momentu mogłem już wklejać!

Dziwne to zabezpieczenie, ale jednak zatrzymuje na kilkadziesiąt sekund proces wklejania dowolnego ciągu znaku. Od razu wzbudza trzeźwe myślenie i zadaje pytanie: czy na pewno to, co chcę zrobić jest zgodne z moralnymi wartościami?

Ciekawostka

Referencji do takiego komunikatu w polskim internecie jest tylko kilka. Możecie kliknąć i zobaczyć inne wpisy opisujące o tym zagadnieniu: https://www.google.pl/search?q=%22zezwalaj+na+wklejanie%22+firefox

XMLHttpRequest, czyli natywny AJAX

Piotr Kowalski — Sat, 30 Jan 2016 00:00:00 +0000

Dziś zajmiemy się AJAXem. Za tym określeniem stoi zapytanie do serwera, które jest inicjowane kodem JavaScript. Jeśli chcemy po załadowaniu już całej strony znowu pobrać z serwera dane, to możemy stworzyć takie zapytanie i pobrać tylko dane nam potrzebne.

W standardowych stronach internetowych pobieramy nie tylko dane, ale wszystko o stronie, czyli np. wygląd (CSS) oraz strukturę HTML, czyli generujemy odświeżenie. Nie potrzebuje znowu pobierać definicji wyglądu strony - przecież ona już raz się wyrenderowała i dobrze wygląda.

Odświeżenia są kosztowne i nie korzystne dla wszystkich. Dla klienta, bo czeka aż “strona się załaduje”. Dla serwera, bo musi znowu zwracać dużo więcej danych (musi odpowiedzieć na większą ilość zapytań do niego).

Spróbujemy stworzyć w czystym JavaScript zapytanie do serwera, pobierające tylko te dane, które faktycznie potrzebujemy.

Konstrukcja zapytania

Tworzymy nowy obiekt XMLHttpRequest, który pomoże nam w stworzeniu zapytania do serwera. W odpowiedzi wcale nie musimy otrzymywać pliku w formacie XML. XML jest to format opisu dokumentu, a nie format wymiany danych. Szczególnie w JavaScript nie używamy XMLa, mamy coś lepszego - format JSON.

Forma notacji JSON jest standardem zdefiniowanym w dokumencie ECMA-404. Na stronie głównej projektu jest pełny opis formatu w sposób (może) bardziej zrozumiały niż zapis standardu ECMA.

JSON jest super pomocny, ze względu na to, że jest bardzo podobny do zwykłego obiektu literałowego.

var xhr = new XMLHttpRequest();
console.log(xhr.readyState); // 0, czyli `XMLHttpRequest.UNSENT`

Inicjacja połączenia

Inicjujemy połączenie. Tutaj dopiero zmieniamy stan naszego zapytania z 0 (UNSET) na 1 (OPENED). Jak się przedstawiają parametry jakie musimy podać do prawidłowo stworzonego zapytania.

W pierwszym parametrze ustawiamy metodę protokołu HTTP. Metoda GET służy do pobierania danych z serwera. Jest ona używana w 90% przypadków komunikacji z serwerem.
Drugi parametr to string (łańcuch znaków) w którym jest ścieżka (albo URI) do pliku, który chcemy pobrać. Uwaga! Nie wszystkie zasoby w sieci możemy pobierać. Jest zabezpieczenie w przeglądarkach, które nazywane jest Same-origin policy. Zabezpieczenie to blokuje nam (domyślnie) zapytania do innych serwerów. Jeśli jednak serwer na którym jest plik (który chcemy pobrać) wspiera CORS, to problem przestanie istnieć. CORS to technika zarządzania nagłówkami w konkretny sposób.
Kolejny parametr to flaga, odpowiadająca na pytanie, czy to zapytanie ma nie blokować zasobu aplikacji uruchomione w przeglądarce? Jeśli ustawimy na false to możemy zablokować naszą aplikację na dobre kilka sekund.
Kolejne 2 parametry są potrzebne tylko w sytuacji kiedy mamy włączaną podstawową autoryzację HTTP, czyli tzw. “Basic access authentication”

xhr.open('GET', 'data.json', true);
console.log(xhr.readyState); // 1, czyli `XMLHttpRequest.OPENED`

Kiedy będziemy znali odpowiedź?

Funkcja xhr.onreadystatechange (czyli handler), jest ona uruchomiona z każdym zmianą stanu w zapytaniu do serwera.

Trzy kolejne stany są tutaj użyte:

2, wartość ta jest dostępna we właściwości XMLHttpRequest.HEADERS_RECEIVED

Stan ten oznacza, że zapytanie pobrało już nagłówki z serwera i tylko nagłówki zapytania HTTP.
3, wartość ta jest dostępna we właściwości XMLHttpRequest.LOADING

Stan w którym ładujemy nasze dane. Im większy plik, tym ten stan będzie trwał dłużej.
4, wartość ta jest dostępna we właściwości XMLHttpRequest.DONE

Ostatni stan informuje nas, że zapytanie do serwera się zakończyło.

xhr.onreadystatechange = function () {
    if (this.readyState === XMLHttpRequest.DONE) {
        // Odpowiedź z serwera pobieramy w tym miejscu.
        // Uwaga: tutaj oczekujemy odpowiedzi w formacie JSON.
        console.log(JSON.parse(this.responseText));
    }
};

We właściwości responseText mamy dostępną odpowiedź z serwera. Jeśli tą odpowiedzą jest plik w formacie XML, to odpowiedź dostępna jest we właściwości responseXML. Dzięki funkcji JSON.parse zamieniamy łańcuch znaków na obiekt JavaScript-owy.

Wysyłamy zapytanie

Ostatnia funkcja z tych najważniejszych w AJAX, czyli wysłanie wcześniej stworzonego zapytania.

xhr.send();

Koniec?

Co tutaj się zadziało? Po prostu stworzyliśmy zapytanie do serwera. Sklejmy cały kod w jeden.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function () {
    if (this.readyState === XMLHttpRequest.DONE) {
        // Odpowiedź z serwera pobieramy w tym miejscu.
        console.log(JSON.parse(this.responseText));
    }
};
xhr.send();

Dobrą praktyką jest, zamknięcie tego kawałka kodu w funkcję, która będzie przyjmowała 2 parametry: url oraz callback - czyli wywołanie zwrotne.

function makeRequest(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function () {
        if (this.readyState === XMLHttpRequest.DONE) {
            callback(this.responseText);
        }
    };
    xhr.send();
}

Teraz możemy tej funkcji używać w przyjemy sposób bez zbędnego kopiowania kodu, czyli według zasady DRY - DON’T REPEAT YOURSELF:

makeRequest('data.json', function (response) {
    console.log(response);
});

Narzędzia Świata: super-event-emitter

Piotr Kowalski — Fri, 29 Jan 2016 00:00:00 +0000

Framework ze wsparciem eventów? Backbone. Świetny i lekki framework. Jednym z 4 fundamentów jest Backbone.Events. Jego prosta implementacja bardzo przypadła mi do gustu. 4 niezbędne funkcje to: on, once, off, trigger. Zachęciło mnie to do stworzenia nowego projektu: super-event-emitter. Więcej o nim poniżej.

Backbone.Events

Przyzwyczajony do składni:

_.extend(MyCustomObject.prototype, Backbone.Events);

Mogłem teraz w mojej definicji MyCustomObject wyzwalać zdarzenia (trigger), oraz na nie nasłuchiwać on.

Jednak nie ma sensu używania całej biblioteki Backbone tylko na potrzeby korzystania ze zdarzeń. Postanowiłem, że w tych aplikacjach, które miały dependency w postaci wyżej wymienionej biblioteki, podmienię na coś. Cokolwiek, co będzie tylko robiło to samo.

Problem ze wspólnym API

Moje poszukiwania skupiły się na kilku bibliotekach:

event-emitter autorstwa Mariusza Nowak
eventemitter2 autorstwa Jason Rose-Kuhrt
oraz wielu innych z listy wyników wyszukiwania https://www.npmjs.com/search?q=event+emitter
przeszukałem również kilka projektów stąd: microjs.com/#event, ale bez rewelacji

Żadna z nich nie pomogła mi w tym czego chciałem:

Dodać zarządzanie zdarzeniami dla już istniejącego obiektu
Callback uruchomiony z przekazanym kontekstem

Nowy projekt

Dlatego postanowiłem, że napiszę swój. Prawdopodobnie gdzieś w czeluściach internetu można znaleźć bliźniaczy projekt, jednak dla mnie to zbyt duże wyzwania, aby przez kilka dni szukać jakiegoś projektu, który mogę kosztem max 2h pracy stworzyć od zera i być z niego zadowolony.

Wybrałem ciekawą nazwę i opublikowałem stary projekt, który był pierwotnie stworzony w celach edukacyjnych. Nazwa nowego projektu to super-event-emitter. Przynajmniej tak nazywa się paczka w npm registry.

W rejestrze paczek npm można znaleźć ogromną liczbę różnych event emitterów. Chciałem mieć najlżejsza wersję (w miarę możliwości) ale również i czytelną.

Super Event Emitter API

Publiczny interfejs jest bardzo prosty. Opieramy się na 4 funkcjach: on, once, off, emit. Nic więcej. Nazwy mówią same za siebie.

on - nasłuchujemy na event, który uruchomi callback, w ewentualnym przekazanym kontekście
once - podobnie jak on, ale po pierwszym wyzwoleniu zdarzenia, kasujemy tego listenera
off - kasujemy przekazany listener według jego nazwy i konkretnej definicji callbacka
emit - krótsza nazwa niż trigger, wyzwala zdarzenie

var SuperEventEmitter = require('super-event-emitter');

function MyCar() {
    SuperEventEmitter.mixin(this);
}

var ferrari = new MyCar();

ferrari.on(
    'test',
    function () {
        console.log('triggered!');
    },
    this,
);

ferrari.emit('test');

Przykład dostępny tutaj: https://tonicdev.com/56a74ef27f528a0d002fabb5/56aa9e75c8f1470c0060db4f

Podsumowanie

Jestem bardzo zadowolony, że w projekcie, gdzie dorzucałem 2k linii (Backbone) tylko po to, aby mieć wsparcie zdarzeń, teraz mogę dodać 140 linii i jestem zadowolony, że wszystko działa pięknie!

React Warsaw #2

Piotr Kowalski — Thu, 21 Jan 2016 00:00:00 +0000

Druga wizyta na React Warsaw. Sponsor spotkania była firma Syncano, która ugościła w swoim biurze wszystkich członków spotkania.

Talk #1: React Starter Kit [PL] Daniel Kopka

Zaczynamy: 18: 37

Celem tej prezentacji było zebranie kilku(-nastu) narzędzi których trzeba (warto?) używać podczas tworzenia nowej aplikacji w obecnym standardzie (React + webpack + babel).

Daniel przedstawił swój project layout, czy przykładową strukturę projektu.

Nie odpowiednie zbudowanie projektu w dużym projekcie, to pierwszy krok, aby z biegiem czasu zagubić się w strukturze i spędzić (niepotrzebnie?) czas na przeszukiwanie, gdzie coś się znajduje.

Dzięki tej prezentacji dowiedzieliśmy się również jak zbudować swój pierwszy projekt w oparciu o Reacta.

Slajdy: dancio.github.io/react-warsaw-react-starter-kit/

Koniec z pytaniami: 19:14

•

Talk #2: React Router - normalnie i po mojemu [PL] Rafał Ruciński

Zaczynamy: 19:42

Rafał opowiadał o routerze w React.js.

Musiał sprostować zadaniu jaki jest spełnienie zasad izomorficzności, czyli aby jeszcze przez wyrenderowaniem przez React.js widoku aplikacji, była ona już dostępna dla usera.

Typowy przykład prerenderingu - to serwer renderuje w po swojej stronie widok i zwraca do przeglądarki, na widoku to już React.js analizuje tworząc sumę kontrolną:

gdy się zgadzają to React to wykorzysta wyrenderowany kontent do zbudowania komponentów
gdy się nie zgadzają to usunie wyrenderowane komponenty (i powiadomi)

Druga część prelekcji była oparta o livecoding.

Rafał pokazał nam jak działa React Router i wykorzystał indexroot aby pokazać, na jakiej stronie jesteśmy. Aplikacja po odświeżeniu od razu przechodziła na wskazaną w adresie stronę.

Koniec z pytaniami: 20:34

WarsawJS Meetup #17

Piotr Kowalski — Sun, 17 Jan 2016 00:00:00 +0000

Pierwsze spotkanie w tym roku razem z ekipą WarsawJS! Inauguracyjne spotkanie składało się z 3 prezentacji na temat 3 różnych bibliotek: Meteor.js, Backbone.js oraz ExceptionID.js autorstwa Krzysztofa Suszyńskiego - jednego z nas, czyli warszawskich programistów.

Invitation

Pierwsze nasze nagranie przeprowadzone nocną porą.

Postanowiliśmy pojechać do nowej stacji metra na II linii - stacja Centrum Nauki Kopernik.

Niesamowite światła dają świetne wrażenie przebywania w gwiazdach!

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Reactive JavaScript all-in: Meteor.js [EN] Jacek Migdał

Link do prelekcji: youtube.com/watch?v=rPZocWdOjTY

•

Talk #2: Backbone. Podstawy, dobre praktyki [PL] Radosław Krzepkowski

Link do prelekcji: youtube.com/watch?v=hC-BDD2ymK8

•

Talk #3: ExceptionID.JS - obsługa sytuacji wyjątkowych [PL] Krzysztof Suszyński

Link do prelekcji: youtube.com/watch?v=Eq3E5LwQnRw

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

WarsawJS Meetup #16

Piotr Kowalski — Sat, 26 Dec 2015 00:00:00 +0000

Ostatnie w tym roku spotkanie było szczególne. Mikołajkowe spotkanie było zakończone zupełnie inaczej niż inne spotkania w tym roku. WarsawJS miało specjalnego - eventowego - sponsora który to ufundował grę planszową Vendors (Dostawcy) dla każdego członka spotkania.

Invitation

Zostaliśmy zaproszenie przez jednego z prelegentów najbliższego spotkania “do siebie”, czyli na “Arenę Wspinaczkową Makak” - arenamakak.pl/. Bardzo dużo ludzi w środku, dało nam sygnał, że wspinaczka oraz chodzenie po linie jest bardzo popularnym zajęciem 😄 My nie próbowaliśmy, ale zrobiliśmy coś innego szalonego.

Wdrapaliśmy się na balkon na wysokości mniej więcej 12m nad ziemią i stamtąd nagraliśmy zapowiedź trzeciej prelekcji Piotrka Błaszczaka o generatorach.

•

Talk #1: Programowanie współbieżne w JavaScript [PL] Bartłomiej Sobczuk

Link do prelekcji: youtube.com/watch?v=Vq0zKmlLWa0

•

Talk #2: React Native, czyli zaprogramujmy natywną aplikację mobilną w JS [PL] Tomasz Netczuk

Link do prelekcji: youtube.com/watch?v=2lX4-QVkNoI

•

Talk #3: Do what you love, automate the rest… [EN] Piotr Błaszczak

Link do prelekcji: youtube.com/watch?v=fKBJG2nFA_g

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

WarsawJS Meetup #15

Piotr Kowalski — Sun, 13 Dec 2015 00:00:00 +0000

Meetup taki jak ten, mają to do siebie, że jest wielce prawdopodobne usłyszenie wiele ciekawych historii, ponieważ prelegentami byli prelegencie, którzy nie gościli pierwszy raz na scenie (no może poza Mariuszem) oraz mają bogate doświadczenie zawodowe.

Invitation

Jesień kojarzy się z nostalgią, dlatego nagrywając zapowiedź chcieliśmy tchnąć nieco życia. Kolory jesieni, bardzo mi odpowiadają, pewnie ze względu na mój zewnętrzny odbiór oraz dress code.

•

Talk #1: Introduction to Linked HTML library [EN] Dominik Lubański

Dominik jako kolejny warszawski developer wystąpił w roli twórca/autora biblioteki o której to opowiedział. Jako WarsawJS uruchomiliśmy specjalny hashtag pod nazwą: #wspierajmywarszawskątwórczość, aby agregować twórczość warszawskich programistów.

Link do prelekcji: youtube.com/watch?v=Acdhiu7_g34

•

Talk #2: Lodash methods with practical examples [EN] Illarion Khapyorskiy

Lodash jako mocny konkurent dla Underscore.js, charakteryzuje się mocnym podziałem na moduły.

Link do prelekcji: youtube.com/watch?v=Crj-8xjzaLc

•

Talk #3: Aplikacja Back-end-owa w Node.js z bazą danych Oracle [PL] Mariusz Lichota

Prelekcja o tym, jak ten “ciężki” Oracle może szybko komunikować się z Node.js.

Czasy requestu, którymi pochwalił się Mariusz, robią wrażenie!

Link do prelekcji: youtube.com/watch?v=7OK4i9HkXBQ

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

React Warsaw #1

Piotr Kowalski — Wed, 09 Dec 2015 00:00:00 +0000

Na rynku pojawiła się nowa inicjatywa “React Warsaw” - która (prawdopodobnie) będzie zrzeszać, developerów JavaScript zainteresowanych frameworkiem autorstwa Facebooka.

Więcej informacji o spotkaniu: meetup.com/React-js-Warsaw/events/227108785/

Poniżej chciałbym przedstawić moje osobiste doświadczenia w związku z pierwszym spotkaniem.

Spotkaliśmy się w interesującej lokalizacji “Sienna Training Centre” (Sienna 73).

Pierwsze spotkanie zawsze stoi pod znakiem zapytania dla organizatorów.

Czy przyjdą ludzie?
Ile ich przyjdzie?
Czy przygotowaliśmy odpowiednią ilość miejsc?

Tym razem organizatorzy podeszli do sprawy inaczej niż inne organizacje, zarezerwowali malutką salę “Jowisz”, czego wynikiem było ciągłe wnoszenie krzesełek.

Organizatorzy spodziewali się 20-25 osób max.

Obecnych na pierwszym spotkaniu było ok. 50.

Talk #0 - Występ sponsorski [PL] Marcin Adamowicz

Start: 18:30
Koniec: 18:40

Sponsor spotkania “ASTEK Polska” - główny sponsor.

Prelegent zachęcał do współpracy w swojej firmie.

Talk #1: ReactJS Wprowadzenia [PL] Marcin Mieszek

Slajdy: React.js Wprowadzenie

Co to jest React.js?

Biblioteka do budowania UI.

Cechy

komponenty tworzymy deklaratywnie
bazuje na virtual dom oraz jsx

Problem Facebooka: 3 duże komponenty

sidebar
powiadomienia w top menu
wiadomości w lewym sidebarze

Jak okiełznać te wszystkie zmiany stanu? Trzeba było wymyślić jakiś sposób.

Deklaratywne komponenty

Kod w JSX jest bardziej czytelny niż wersja przetłumaczona. Zachowania i widok w jednym miejscu.

Virtual DOM - główna zaleta biblioteki

Operacje na DOMie są kosztowne (wyszukiwanie, zmienianie)

Za każdym razem kiedy zmieni się komponent, React trzyma w pamięci obecną strukturę oraz poprzednią, następnie szuka jak najmniejszej liczby operacji, aby zaktualizować zwykły DOM.

Przepływ danych

dane przekazujemy w dół, poprzez property-isy (właściwości)
zdarzenia natomiast, są delegowane w górę

Przekazanie danych - sprawa oczywista.

Aby komponent zagnieżdżony mogły operować na obecnym stanie, przekazujemy im callbacki.

State & Props

jeśli komponent ma tylko pobrać dane i wyświetlić, to używamy props (właściwości)
stan jest używany do przechowywania danych zmienionych przez dany komponent, np. fakt kliknięcia w przycisk
nie trzymamy innych stanów

Refs

referencja do elementów w HTML

<input refs="inputName" />

Children

możemy dostawać się do zagnieżdżonych kontenerów za pomocą this.props.children

Cykl życia

jeśli komponent ma jakiś stan początkowy, wtedy ten stan możemy pobrać przez getInitialState
domyślna wartość właściwości - getDefaultProps
componentDidMount - komponent został wyrenderowany i chcemy operować na stanie

18:58 - warsztat

React.js ma jednokierunkowy przepływ danych.

Świetnie współpracuje z Immutable (niezmiennymi) danymi.

Np. kiedy to Array.prototype.push zwraca nową listę zadań.

Aby podpiąć się pod zdarzenia DOM, to korzystamy z atrybutów on*, np.

<button onclick="this.addTask"></button>

Pojawił się problem, ponieważ, w bardziej zaawansowanej strukturze przekazywanie parametrów, odbywa się przez przekazanie tych samych propertisów przez kilka komponentów. Rozwiązaniem jest architektura Flux.

React.js nie dostarcza gotowych komponentów.

Angular.js można rozszerzyć tak, aby działał jak React.js korzystając ze słabo udokumentowanego argumentu.

Zaczynamy: 18:41
Koniec talków z pytaniami: 19:30 (5 ostatnich minut to pytania)

•

Talk #2: Flex - intro i przykłady wykorzystania [PL] Damian Legawiec

Slajdy: Intro to Flux
Start: 19:47
Kontakt: @damianlegawiec
Współzałożyciel “Spark Solutions”

Co to jest?

nie jest to framework
biblioteka? tak jakby
schemat działania przepływu informacji
nie jest to MVC - zupełnie inne działanie - bardziej przemyślany dla UI
Flux nie narzuca niczego
może być używany do przechowywania danych z ORM
zwykły obiekt JS, który zostaje wzbogacony o zdarzenia (EventEmitter albo MicroEvent)

One way data binding!

Framework Agnostic

można używać z Angular.js oraz Ember.js
najlepiej jednak działa z React.js

Flux

Zasada działania:

Action → Dispatcher → Store → View → Action → Dispatcher

Store

Nie jest to model ani kolekcja
Konkretne - gdzie przechowujemy stan aplikacji

Action

wywoływane są z komponentów Reactowych
przekazują parametry - payload = [nazwa, parametry]

Dispatcher

może być tylko jeden
przekazywanie akcji do Store-a

View

Smart Components (bezpośrednio podłączone, odrazu widzą zmiany)
- zależne od stanu aplikacji
- jeśli będzie akcja to prerenderowane
- dane są przechowywane w State (nie są przekazywane prze props-y
Dump Components (tylko do renderowania danych)
- tylko wyświetlają dane
- nie są zależne od Store-a

Example

React Dev Tools (Google Chrome)

Kiedy potrzebujemy używać Fluxa?

kiedy robimy Single Page App (aby wszystko było ze sobą zgrane)
zaawansowane UI

Kiedy nie używać?

jeśli zaczynacie naukę React.js
lepiej zacząć od prostych komponentów
prosty komponent na statycznej stronie

Zbiór architektonicznych wzorców

Implementacje

Flux - implementacja Facebook-owa
Redux - sporo upraszcza, boilerplate jest dużo mniejszy

Na start lepiej zacząć od Flux.

Nie polecam używać examples/ w Facebook repo. Damian Legawiec

Po zaznajomieniu się z Flux, to 2 opcje do wyporu

Redux (aby zaryzykować?, upraszcza wiele elementów)
Reflux (konserwatywne)
Alt (konserwatywne)

Future Reading List

facebook.github.io/flux/docs/overview.html
blog.andrewray.me/flux-for-stupid-people/ - dużo lepszy niż oficjalny poradnik

Koniec: 20:15 - czas na pytania

Ile rzeczy potrzebuje aby zrobić SPA?

React.js - czysty oraz React.js Router (można pominąć Fluxa)
Ekosystem wokół React.js nie jest tak skompresowana

Po co jest Dispatcher?

aby nie dało si zrobić za dużo naraz
aby można było w łatwy sposób myśleć o zmianach
aby tylko jedna zmiana wpływała na stronę

Czy używamy `prerender` w React.js?

tak, aby poprawić SEO
microformats, dla e-commerce-owych stron
Rect.js renderuje, a potem zapamiętuje ten wyrenderowany content
nie ma loading screenu
user dostaje od razu wszystko
Googlebot nie zdegraduje nam strony
Googlebot podąży po wygenerowanych linkach

Koniec z pytaniami: 20:35

Browser Rendering Optimization

Piotr Kowalski — Wed, 25 Nov 2015 00:00:00 +0000

Dzięki firmie CodiLime mogłem dziś uczestniczyć w spotkaniu poświęconym optymalizacji aplikacji uruchomionych w przeglądarce internetowej.

Oficjalny profil spotkanie dostępny na Meetup.com.

_Prelegent: Aliosha Kachura

Miejsce: MIMUW. Sala 4420

Liczba osób na sali: 23 developerów

Spotkanie było prowadzone w języku angielskim

Slajdy slides.com/alex-kachura/bro/_

Layout

paint
- composite layers
  - developer does not control them
- gpu - put picture on the screen

App Lifecycles - RAIL / LAIR

	ms
Response	100
Animate (scrolling) - each frame of animation)	16 = 1s/60 frames
Idle - nonessential work	50ms
Load	1000ms

Typical frame

JavaScript
Style
Layout (geometry)
Effected element painted
Composite together

You cannot optimize before measure it!

Timeline in DevTools - very useful.

JIT example

JavaScript code you wrote, is not the same code that is executed
JIT is optimize code before run

Micro-optimization

… is the last thing is that you optimize

requestAnimationFrame (Support IE10+)

jQuery still uses timeout (for a backwards compatibility reasons)

Web workers (Support IE10+)

main-script.js (HTML5) → workers.js (Worker)
communicate through postMessage function

Limitations of Web Workers

longer initial start and post messages
every worker consumes some amount of memory
no access to DOM, Window
results from workers are copied (without binary data!)

JavaScript

use Web Workers for long-running operations
replace setTimeout/setInterval by requestAnimationFrame

Styles

reduce complexity of selectors
use BEM (block element modifier) methodology
reduce number of elements on which style calculation must be calculated

Layout

flexbox
don’t trigger the layout

Paint and Compositing

CSS Triggers (by Paul Lewis) - csstriggers.com/
don’t animate the width, use transform: scale(x); rule instead
CSS property will-change: transform; (caniuse.com/#search=will-change)

window.performance - try to study it!

Less layers in Timeline tab in DevTools are better.

On jquery.com has only one layer.

Add “will-change” rules to element which are use any transformation.

Podsumowanie

Całe spotkanie było poświęcone optymalizacji - jest to interesujący zabieg zrealizowany przez organizatorów. Takie tematyczne spotkania mają to do siebie, że wszelkie pytanie i wątpliwości dotyczą tylko jednego tematu.

Temat optymalizacji stron internetowych w dzisiejszych czasach jest tematem dosyć popularnym. Początkujący developerzy nie zwracają na to uwagi, ale w miarę rozwoju zaczynają rozumieć, istotną kwestię optymalizacji.

Po spotkaniu najaktywniejsi dostali upominki od CodiLime - sponsora dzisiejszego spotkania.

Hackathon: Node Knockout #5 (2015)

Piotr Kowalski — Mon, 09 Nov 2015 00:00:00 +0000

Chciałbym podzielić się moimi doświadczeniami z ostatniego hackathonu, w którym uczestniczyłem, co takiego udało mi się stworzyć, jak to wyglądało okiem uczestnika. Podczas minionego weekendu miałem przyjemność uczestniczenia w Node Knockout 5 - edycja 2015!

Node Knockout 2015

Hackathon? czyli co?

W świecie developerów pojęcie znane wszystkim tym, którzy chcą czegoś więcej niż to, co codzienna praca nam zapewnia. Rozrywka polega na tym, że jest z góry narzucony czas - w tym przypadku 48h. W tym czasie trzeba stworzyć aplikację, która będzie się podobać nie tylko autorom.

Aplikacje stworzone podczas Node Knockout (NKO) będą oceniane w 4 kryteriach:

UTILITY/FUN
DESIGN
INNOVATION
COMPLETENESS

Zasady

W tym roku brało udział mnóstwo zespołów. Prawdopodobnie około 400. Całą przygodę ukończyło 82 zespoły. Przynajmniej tyle team-ów zgłosiło swoje aplikacje do testów.

Na stronie nodeknockout.com/entries jest lista aplikacji zgłoszonych do głosowania. Wśród nich jest także i moja aplikacja:

Pozycja w wynikach nodeknockout.com/entries?q=dumplings

Każda aplikacja ma swój profil na witrynie NKO. Postarałem się opisać całą aplikację na stronie nodeknockout.com/teams/dumplings.

Jak się programuje podczas hackathonu?

Generalnie, w zawodach zawsze chodzi o to aby być pierwszym. Jeśli chodzi o hackathony, to czas również odgrywa ogromną rolę. Tutaj liczy się tylko pierwsze 48h projektu. Co się będzie działo po tym czasie już nie nikogo nie interesuje.

Ze względu na czas nie ma tutaj czasu na testy (jednostkowe, integracyjne), dokumentację, czy nawet na refaktoryzację. Jeśli jednak chodzi o ostatni punkt, to ja jestem tak bardzo przywiązany do czytelnego kodu, że nie potrafię pisać wszystkiego (całe aplikacji) w jednym pliku i nie dbać o zmienne. Doświadczyłem tego empirycznie podczas pierwszego NKO.

Development odbywa się zawsze na GitHubie. Cała historia jest dostępna na profilu projektu: github.com/nko5/dumplings.

Jeden ze sponsorów, firma Modulus.

Deployment aplikacji był możliwy dzięki jednego ze sponsorów. Firma Modulus udostępniła swoją usługę do uploadowania paczek aplikacji, oraz hostowania i serwowania plików statycznych. Bardzo proste zasady, prosta instalacja - same plusy!

Najgorsze chwile podczas hackathonu to takie, w których trzeba rozwiązać bug, a do końca pozostało niewiele. Wtedy człowiek ma chwila zawahania, aby wszystko rzucić, ale z drugiej strony, szkoda.

Szkoda, tych kilkudziesięciu godzin pracy.

Jaką grę zrobiłem?

Załączam screen z gry:

Screenshot z tegorocznej edycji hackathonu.

Pitch video

Aby zgłoszenie aplikacji to głosowania było traktowane w pełni trzeba było nagrać tzw. pitch video. Trzeba było pokazać jak aplikacja działa i odpowiedzieć na 3 pytania:

Who is it for?
Why would people use it?
How does it work?

O tym jak powinno wyglądać idealne video można przeczytać tutaj: blog.nodeknockout.com/post/35353987436/protip-create-a-perfect-pitch-video-this-year

Moja pierwsza mini-prelekcja po angielsku: youtube.com/watch?v=4ORq3-ugtMc.

INFO: Wideo nagrywałem o 2 w nocy, także proszę o wyrozumiałość.

Zakończenie hackathonu - co dalej?

Po zakończeniu 48-mio godzinnych zmagań z kodem, z łataniem bugów a przy tym rozwijaniu nowych funkcji, warto jeszcze stworzyć demo swojej aplikacji (jeśli autorzy uznają, że aplikacja jest gotowa to tego).

Na tak dużo liczbę aplikacji, zgłosiło się około 10 team-ów z całego świata, które chciało zaprezentować swoje aplikacje. Nie zważając na brak doświadczenia w wypowiadaniu się po angielsku zgłosiłem się na ochotnika.

Godzinę po zakończeniu zawodów, czyli na czas w Polsce to 2 w nocy organizatorzy stworzyli hangout, podczas ochotnicy opowiadali o swoich aplikacjach.

Całe wideo jest dostępne poniżej (moja część zaczyna się od 8:30).

Node Knockout 2015 Demo

Podsumowanie

Imprezę polecam wszystkim tym, którzy chcą sprostać wyzwaniu poddania swojego umysłu maksymalnemu zmęczeniu poprzez ciągłą, wytężoną pracę nad jednym projektem.

Nie był to mój pierwszy hackathon.

Brałem już 3 razy udział w NKO oraz jeden raz w Static Showdown.

WarsawJS Meetup #14

Piotr Kowalski — Thu, 29 Oct 2015 00:00:00 +0000

Kolejny raz spotkaliśmy się na WarsawJS.

Jak zwykle było wiele nowych twarzy. Bardzo się cieszę, gdy jest tak duże zainteresowanie spotkaniami. Taki jest cel organizacji, aby aktywizować warszawskich programistów JavaScript.

Invitation

Zaproszenie chcieliśmy pierwotnie nagrać w parku, aby pokazać piękno jesieni w mieście.

Po namysłach pojechaliśmy jednak do parku Fontann, gdzie nagraliśmy zapowiedz na #14 meetup.

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: ECMAScript 7 Overview [PL] Krzysztof Syrytczyk

Pierwsza prelekcja Krzyśka na scenie WarsawJS. Trema robiła swoje, ale przebrnął.

Krzysztof pracuje w Cyfrowym Polsacie na Front-end Developer.

Dowiedzieliśmy o nowościach języka, które powinny wejść w życie w 2016 roku.

Link do prelekcji: youtube.com/watch?v=1W_BXitt8Eg
Link do slajdów: ksyrytczyk.github.io/presentation-warsawjs-es7/

•

Talk #2: Ember 2.0 - what’s new and how to upgrade [EN] Krzysztof Białek

Druga prezentacja była poprowadzona przez kolejnego Krzyśka, tym razem z Rebased.

Jako Front-end Developer w Rebased pisze na co dzień w Ember.js i dzięki jego uprzejmości, podzielił się z nami swoim doświadczeniem w tym temacie.

Link do prelekcji: youtube.com/watch?v=K2A_-fyoWnw
Link do slajdów: krzysztofbialek.github.io/warsawjs-presentation-template/

•

Talk #3: Enterprise Interface Architecture: Seeking Scalable Design [EN] Tomasz Ducin

Ostatnią prelekcją poprowadził Tomek - Front-end Developer z doświadczeniem, które zaczął rozwijać od 2005 roku. Tomasz podczas prelekcji powiedział, że nie chce być Back-end Developerem, ale na pewnym etapie pracy Front-end Developera, musi on wiedzieć jak działa Back-end, aby był świadom swoich zabiegów w pracy Front-end-owej. Zgadzam się całkowicie. Jeśli developer zna całą ścieżkę procesu, który zostanie stworzony aby “obsłużyć” (ale brzydkie słowo) klienta, to ma pełną wiedzę, co się dzieje na każdym etapie. Jeśli pojawi się dowolny problem, to na pewno lepiej takiemu developerowi zdiagnozować przyczynę.

Link do prelekcji: youtube.com/watch?v=a6kIeFimgxA
Link do slajdów: slides.com/ducin/seeking-scalable-design

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

HbbTV: lista źródeł

Piotr Kowalski — Wed, 14 Oct 2015 00:00:00 +0000

HbbTV jest to technologia dzięki której jest możliwe wpięcie aplikacji webowej do strumienia który zostaje wyświetlany w telewizorze.

Techniczna specyfikacja standardu HbbTV (v1.3.1)

etsi.org/deliver/etsi_ts%5C102700_102799%5C102796%5C01.03.01_60%5Cts_102796v010301p.pdf

Filmy

Materiał filmowy z procesu tworzenia aplikacji wykonanej przez pewnego developera: noterik.nl/hbbtv-example-app/

Lista aplikacji

itv.mit-xperts.com/mitxpgo/

Opis technologii

Portale

Pluginy

https://addons.mozilla.org/pl/firefox/addon/firehbbtv/ - Plugin do Mozilla Firefox.

Oferty pracy

aplitrak.com/?adid=dG9td2hpdGUuMDQyNzcudHdpQHBlb3BsZXNvdXJjZS5hcGxpdHJhay5jb20

Artykuły

Różne

Projekty

Panasonic

W telewizorach Panasonic usługa HbbTV nazywa się Aplikacja usługi danych, jednak jest domyślnie wyłączona na ten rok (trzeba ją samemu włączyć).

Aby ją aktywować, należy wejść w menu telewizora Panasonic:

Menu → Konfiguracja → Ustawienia Wyświetlania → Aplikacja Usługi Danych.

IT Manager Meetup #2

Piotr Kowalski — Tue, 06 Oct 2015 00:00:00 +0000

Drugie spotkanie z cyklu IT Manager Meetup. Tym razem planowane są dwie prelekcje. Na sali jest `8 osób` - kiepska frekwencja. Trochę mnie to dziwi. Takie spotkania powinny cieszyć się większą ilością grona managerów, np. kierowników działów, kierowników projektów, project managerów, Scrum Masterów. A jednak.

Więcej o spotkaniu można dowiedzieć się na profilu wydarzenia: facebook.com/events/887113191371393/

Talk #1: Zarządzanie projektami programistycznymi

Prelegent: Adam Ławcewicz (Project Manager w 10Clouds)

Adam ma 10 lat doświadczenia w Scrum. Nabył je podczas 18 lat pracy w branży.

Jak implementujemy Agile?

W którym momencie wiemy, że coś jest nie tak z naszym Scrumem?

To be on the same page…

Role - kto kim jest?

Scrum Master (SM) - nie jest kierownikiem projektu

jeden SM = jeden projekt
niestety nie zawsze tak jest, a tak powinno być
nie wolno traktować SM jako awans dla developera
SM ma dużo więcej obowiązków, więcej nie ma co odbierać połowy etatu developera

Product Owner (PO)

jedna osoba - one single point of contact
jest władcza osoba, która powinna odpowiedzieć na wszystkie pytania
my jako SM nie interesujemy się kontaktami PO

Development Team (DT)

zespół do którego możemy wcielić wszystkie osoby, aby wykonać zadanie
możemy na część iteracji wcielić grafika, UX developera

Scrum Team (ST) = SM + PO + DT

Eventy

Po czym rozpoznajemy Scruma? Powtarzalne eventy jest to dość charakterystyczne.

Sprint planning

wielka burza mózgów
na sam koniec ST ma commitment, że on to zrealizuje w tym sprincie

Daily Scrum - stand-up meeting

dziennie spotkania - bardzo formalne
nie mogą trwać dłużej niż 15 minut
zespół powinien wstać od biurek i odpowiedzieć na pytania:
1. co wczoraj zrobiłem?
2. co dziś będę robić?
3. czy mam jakieś trudności?
lepiej jest stać, aby szybciej skończyć spotkanie
ludzie nie będą się bawili telefonem - jak to zwykle ma miejsce
jak się siedzi - to zawsze przekracza się czas - mur beton

Sprint Review

Retrospektywa

czas po burzliwych spotkaniach (planning i review)
team się zbiera i analizuje ostatnią iterację:
1. co poszło nie tak - jak się przed tym ochronić next time?
2. co poszło super?
poprawa procesu iteracji, aby ustrzec się w przyszłości przed błędami
nie rozmawiamy o problemach na przestrzeni całego projektu, tylko ostatni sprint

Sprint classic planning

1) Nie estymujemy w dniach, godzinach, tylko w tzw “story pointach”

dobrze jest mieć skalę referencyjną
np. walidacja hasła na formularzu - 2 story pointy
odchodzi się od godzinowego estymowania, aby znieść presję z developera
pokazuje trudność zadania
- jak bardzo zadanie jest złożone
- czy developer jest sam w stanie to zrobić?
- czy potrzebuje kogoś z zewnątrz?
nie należy się bać story pointów!

2) Planning poker

omawiamy jak zrealizować dane zadanie
- czy to jest trudne zadanie?
- czy mamy wszystko, aby wykonać zadanie?
jestli tak, to gramy w pokera
- ludzie kładą swoje karty na stole
- gdy wszyscy odłożą to odwracamy karty
- gdy story point będą takie same - to super
- w przeciwnym przypadku z dwóch skrajnych story pointów osoby muszą się “wytłumaczyć”

3) Otwarte karty

jeżeli nie ma mamy kart to gramy w otwarte karty
bo ludzie małpują estymacje po innych - po autorytecie

4) Dałbym 3 ale nie wiem, czy mamy wszystko aby zrealizować to zadanie

jeśli nie mamy kompletu informacji o zadaniu, to na planningu to zadanie nie powinno być brane pod uwagę
wszystko musi być jasne
Definition Of Ready (DOR) - przy każdym zadaniu mamy checklistę:
1. czy są grafiki?
2. czy jest ux?
3. czy są servery?
4. czy są mockup-y?
5. …

Skale

t-shirt scale: XS, S, M, L, XL, XXL,
fruit scale: cytryna, arbuz, pomarańcza, banan, dynia

“Jira” nie rozumie tych skal.

Daily Scrum

Niby 15 minut - krótkie spotkanie - ale bardzo ważne.

problemy:
- 1. “to kto zaczyna?”
- 2. “kto następny?”
  - totem - kto ma totem ten mówi, jak ktoś skończy to przekazuje go dalej
  - jeśli zespół zdalny, SM zaczyna, a potem mówi kto następny
- 3. “po co mamy wstawać od biurka?”
  - zwykle te pytanie zadaje autorytet - ta osoba ma poszanowanie
  - nie ma złotego środka na odpowiedź
  - warto się spotkać, aby pokazać cenne dialogi
  - nie wolno takiej osoby ignorować
- 4. słowotok
  - niepotrzebna dyskusja
  - nie rozwiązujemy problemów - od tego są inne spotkania
  - ustalamy, czy mamy się spotkać później
- 5. zespół zdalnie
  - gdy mamy Slacka, to możemy zrobić zdalnie, każdy pisze co zrobił i co będzie robił dziś
to nie jest raportowe spotkanie
nie raportujemy do kogoś
czas powinien być na max wykorzystywany
wszyscy powinni mieć czas na wygadanie się - nie wolno nikogo pominąć

Sprint Review - DEMO

zespół pokazuje PO status swojej ostatniej iteracji
- opowiedzieć: “co team zrobił?”
- punkt po punkcie, jak to, co zespół zrobił działa
trzeba zaplanować spotkanie - SM wyznacza kto zaplanuje
bardzo profesjonalnie zaplanować
problemy:
- nikt nie chce tego pokazać, brak odpowiedzialności
- nie wolno pokazywać w środowisku localhost
  - bo wtedy PM nie możemy pobawić się daną iteracją
- nie wolno dopuszczać, że coś robimy na szybko
- “przed chwilą działało” - należy przygotować się, upewnić się, że demo działa
lepiej nie pokazać nic, niż pokazywać co może nie działać tak jak byśmy chcieli

Sprint retrospective

Bardzo wiele błędów jest robionych podczas retrospekcji.

“czyste marnowanie czasu”
największy potencjał:
- możemy zmotywować zespół
- usunąć przeszkody
- zrewidować co się stało
- udoskonalić
musi być zaplanowana przez SM
“przecież wszyscy wiemy jak jest”
- jeśli tak, to znaczy, że podczas poprzedniej retrospekcji daliśmy ciała
“po co mamy to mówić skoro i tak nikt nic nie zrobi”
- co poszło źłe | co poszło nie tak - na tablicy
- nie wolno zostawiać rzeczy
- spisać uwagi zespołu
na następnej retrospekcji podsumować ostatni sprint
otworzenie się zespołu
wpływają na jakość wykonywanej pracy
jak my wykonujemy zadania
czas na miękkie elementy
technik jest dużo
SM prosi zespół co poszło nie tak, co super
zespół przykleja na tablicy
kreska dobrze | źle
silent sort - posortować karteczki, bez komunikacji werbalnej między sortującymi, fajnie gdyby nie sortowali własnych karteczek

Scrum Masterem nie powinna być osobą która dostała awans,

tylko osoba która potrafi zobaczyć dużo więcej niż karteczki z tablicy.

Kiedy Scrum = Scrum?

Czy można zrobić czekoladowe ciastka bez czekolady?

aby S = S muszą być wszystkie rzeczy, które Scrum przewiduje
jak tego dokonać?
- przeczytać Scrum Guide (16 stron w PDF)?
- nic nie pomoże samo przeczytanie
- zatrudnić Scrum Coacha
- edukacja Scruma na wszystkich szczeblach organizacji
- zaczynamy od Zarządu

Scruma można wprowadzić wszędzie - do życia codziennego również.

Anegdota

1. Dziecko sortuje karteczki

Przyklejamy do karteczki rzeczy, które dziecko musi zrobić każdego dnia, np. umyć zęby, spakować śniadanie do szkoły. Ośmiolatek potrafi dostosować się do tego i w samemu ustalić kolejność realizacji zadań w karteczkach.

2. Remontowanie mieszkanie

Gdy remontujemy mieszkanie, można codziennie robić z ekipą daily meeting stand-up. Codziennie zapisywać co zrobili, a czego nie, aby potem z końcem tygodnia przy wypłacie podsumować.

Niech dany Coach przeżyje tydzień w organizacji.

Story point

ile ich spalamy w jednym sprintcie?
jeśli dany zespół spala w tygodniu 20, to w następnym zaplanować na tyle samo
nie ważne są jednostki czasu - ważna jest skala referencyjna - dlatego bierzemy ogólną skalę

Kontakt do prelegenta: @adamlawcewicz

Czas trwania prelekcji: 18:38 - 19.23

•

Talk #2: Jak odbywała się cyfryzacja urzędów państwowych w Republice Korei i w jaki sposób można wykorzystać niektóre rozwiązania w Polsce?

Prelegent: Edgar Czop (Intelicom)

Edgar współpracował przy projektach biznesowych z Koreańczykami. Obecnie redaktor naczelny serwisu o Korei Północnej - www.pukhan.pl.

Slajdy https://prezi.com/ju27-lkfhwci/e-administracja/.

eksport e-administracji
1960 - autorytarny prezydent Park Chung-hee - stworzył cud na rzeką Han - dał dużo funduszy na rozwój

Polska jest bardzo daleko za Koreą.

Czym jest e-administracja?

takie zastosowanie internetu (sieci www) dla obywateli, świata biznesu dostęp, aby był możliwy dostęp do informacji rządowych
e-Government Development Index: 1 (pozycja Korei) - indeks usług online
e-Government Participation Index: 2 (pozycja Korei)
suma programów rządowych zachęcających obywateli do uczestnictwa w życiu publicznym i gotowość obywateli aby to zrobić
e-administracja jako produkt eksportowy została uwypuklona podczas forum w 23-10-2013 roku

Minister powiedział:

Korea będzie eksportował do 27 państw (przychód 900 mln dolarów amerykańskich).

Pani prezydent jest córką generała, tego który doprowadził do cudu na rzeką Han.

W 2013 roku wygrała wybory.

Wprowadziła ustawę antymonopolizacyjną dla czebolaków.

Korea online e-procurement system

oszczędności 8 mld USD rocznie
zwiększone zadowolenie
ludzie zyskali skrócenie procesowania z 30h na 2h
zaoszczędzony papier - Korea staje się bardziej ECO
internetowe e-usługi dla obywateli
wzrost satysfakcji o 20%
oszczędności w ciągu 7 lat

Kompleksowe usługi podatkowe

150 mln oszczędności
24h na dobę
zgłoszenia, archiwizacji w pełni zautomatyzowane

Przykłady

Samsung SDS
LG CNS
- w Ułan Bator za 17 mln $
- w Malezji za 6 mln dolarów wprowadzono InPost - Paczkomaty
SK C&C
- Turkmenistan
- Ceny ich realizacji to promil tego co w Polsce
Posco

Polsko-koreańska współpraca w zakresie e-administracji

W 2013 roku prezydent spotkał się z prezydent Park

Udało się podpisać “memorandum of understanding”.

Tabelka

e-zus
e-zdrowie 490 mln (całość ok. 700 mln)
e-deklaracje
e-księgi-wieczyste (projekt 20x tańszy niż e-zus)

Miasta, które najlepiej implementują e-usługi

Warszawa nie była brana pod uwagę.

Dąbrowa górnicza - najlepiej implementują e-usługi
Płock
…

Co dalej?

my jako Polska próbujemy podłapywać bardziej europejskie rozwiązanie niż koreańskie
trzeba uwspólnić systemy
w Polsce jest duży problem z danymi osobowymi

W Korei jest funkcja kultury funkcjonowania

szkoła do nauki StarCrafta
obłęd cyfryzacji w seulskim metrze
mają bzika na punkcie nowych technologii
zakaz korzystania z aplikacji, które nie są potrzebne do pracy

Czas trwania prelekcji: 19:27 - 20:06

Podsumowanie

Plan organizatorów jest taki, aby spotkania odbywały się co miesiąc.

Wszelkich interesantów prelekcji zachęcam do kontaktu z Dominiką.

Na koniec ogłoszenie organizatorów i właścicieli pomieszczenia:

Jeśli ktoś chciałby stworzyć swój Meetup to Czwarty Sektor zaprasza do siebie.

WRUG wrześniowy o nietestowaniu, pair-programmingu i spore.sh

Piotr Kowalski — Thu, 24 Sep 2015 00:00:00 +0000

Mateusz Nowakowski rozpoczyna serię WRUG po wakacjach!

Profil spotkania: wrug.eu/2015/09/14/spotkanie-wrzesniowe/.

Pierwsza prelekcja Marek Kirejczyk opowie o Pair programming.

Warsaw Ruby Users Group (WRUG)

Pair programming [PL] Marek Kirejczyk

First problem

Zespoły Agilowe powinny się same organizować.

I don’t learn that much anymore

Gdy się nie rozwijamy to popadamy w depresje.

Good code review is hard Marek Kirejczyk

Co to jest pair programming?

2 osoby siedzą przy jednym komputerze
pierwsza osoba - reaktor - fizycznie pisze
druga osoba - nawigator - przygląda się co napisała ta pierwsza
zadania w parach się zmieniają co kilkanaście minut

Myths - Kilka mitów o Pair programming

1. Zdublowane koszty

2 osoby kodujące razem wnoszą więcej do projektu, niż osobno.

2. Ma sens, ale gdy jest odpowiedni partner

Różne kombinacje przynoszą efekty.

Nie ma idealnej mieszanki!

3. Ludzie nie lubią pair programming

Błąd! Badania potwierdziły, że jest inaczej!

Developerzy lubią pair programming!

4. Pair programming jest tylko do nauki

Różne rodzaje parowania są efektywne.

Nie zawsze, nie wszystkie, ale większość przynosi dobry efekt.

5. Jeżeli będę pracował w parach to nikt mnie nie doceni

Rozwiązanie na docenianie jednostki?

Przypisanie ownerów do konkretnych modułów.

6. Nawigator, który tylko odnajduje syntax error

Dobre parowanie, ma wpływ na design kodowania. Marek Kirejczyk

Zachowania

1. Presja społeczna

Pary więcej spędzają kodując, niż na portalach społecznościowych.

Robią dużo mniej przerw.

2. Negocjacja

Negocjacja pomiędzy dwoma pomysłami, podejściami.

Jest to dużo lepsze, niż wzięcie pierwszego lepszego.

3. Pair review

Ciągle ktoś robi review kodu.

4. Pair learning

W parach uczymy się dramatycznie szybciej niż w pojedynkę.

5. Pair trust (zaufanie)

Para która pracuje razem, ma inny poziom zaufania, zna swoje zalety i wady.

Relacje są lepsze.

6. Pair courage

Para jest bardziej odważna.

Przekłada się to na modyfikację legacy code.

7. Pair debugging

Często jak się debuguje w parach, to czas spędzony na rozwiązaniu bugów,

jest to minimum z czasów spędzonych osobno.

Details

Rotacje!

Nowa para = nowe pomysły.

Aby pobudzić zaznacza się na macierzy

Ping pong pair programming

Najlepiej TDD: jedna osoba pisze niedziałający test, a druga minimalna ilość kodu aby kod przeszedł.

Gdy jest okey, to odwrócenie zadań.

Environment

Więcej miejsca przy biurku!

Types of pairs

junior & senior
extrovert & introvert
Back-end & Front-end - ludzie z chęcią chcą się nauczyć drugiej strony - taka para bardzo szybko realizuje zadania

Przy junior & junior - code review zawsze musi być robione przez seniora.

Większość badań skupia się na 1 sprincie.

Zespół bardzo przyspiesza ale to musi trochę potrwać.

Introducing pair programming at DaftCode

“Fajne, chcemy więcej” - taki był odbiór po realizacji programu pilotażowego.

Cały zespół Daftcode programuje w parach!

Wnioski

Parować się dużo i im szybciej tym lepiej!

Czas trwania prelekcji: 18:33 - 18:55 (10 min pytań)

Pisz kod tak, aby go nie testować [PL] Łukasz “detomastah” Pełszyński

Co to znaczy “pokrycie kodu testami”?

Wszystkie linie zostały przetestowane, ale nie oznacza, że program działa dobrze.

Stan programu

Stan wszystkich zmiennych, które program ma w pamięci

Wg. Millera ludzie mogę operować na max “9 obiektach” w swojej pamięci.

Średnio 7 obiektów.

Pamięć jako kolekcja FIFO

Co nam pomaga w dużej ilości stanów?

tworzenie abstrakcji - pomagają one ogarnąć ten chaos

Interakcja szeregowa

Interakcja sprzężona

Bardzo często występuje w programach.

Może wskazywać na naruszenie SRP (single responsibility principle) pojedyncza odpowiedzialność.

Problem z SRP: zasada DRY prowadzi do tworzenie super-obiektów, które możemy wkładać w różne miejsca.

Rozwiązanie problemu z SRP: celowa duplikacja kodu.

Umożliwia wyrwanie się ze spaghetti code.

Interakcja warunkowa

Każdy warunek tworzy nowe stany. Może wskazywać na brak interfejsów.

Interakcja asynchroniczna

czyli programy działające na wątkach!

Jak zaprogramować algorytm DFS?

Kto z tym zadaniem poradził sobie bez problemów?

Ogólne zalecenia

Zacząć samodzielnie myśleć
TRUST NO 1
Myśleć ekonomicznie
Dążyć do izolacji - łatwość podczas testowania
Stosować przetwarzanie wsadowe 😄 - jedno przekazuje drugiemu, programy liniowe
Nie pozwalać błędom się ukrywać - z góry rzucać wyjątkami
W ostateczności - zmienić język

Czas trwania prelekcji: 19:07 - 19:32 (12 min pytań)

Pytania

Mutation test coverage - rozwiązuje problem 100 procentowego pokrycia kodu.

Więcej https://pl.wikipedia.org/wiki/Testowanie_mutacyjne

Rozwiązania z komentarzy: Można wymusić implementowanie interfejsu - wystarczy NoMethodError w jakiejś klasie.

Rozwiązania z komentarzy: Można pisać SRP i DRY.

Zarządzanie zmiennymi środowiskowymi przy użyciu `spore.sh` [PL] Marcin Wyszyński

Na HackerNews “pewien ktoś” opisał coś i się bulwersował, że go nikt nie rozumie. Marcin go zrozumiał i chce zaprezentować narzędzie opisane przez “tego kogoś”.

Musimy korzystać z Heroku? Dlaczego, bo tak chce tego Heroku 😄

Różnica między develop a produkcją jest tylko w 1 zmiennej środowiskowej.

I to jest piękne!

`spore.sh`

serwer w Node.js
jest CLI
w root naszego projektu jest plik konfiguracyjny

Zasada UID

Komunikacja przez SSL i pobieranie konkretnej wartości po uid

Czy powinienem tego używać?

“Wasza decyzja.

Może warto spróbować”

Czas trwania prelekcji: 19:47 - 20:02 (7 min pytań)

Podsumowanie

Świetnie było się spotkać po wakacjach z ekipą z WRUGa.

Inny język = inne doświadczenia.

Dzięki sponsorom (Rebased i EL Passion) mogliśmy wymienić sobie żeton za produkt o równowartości 10zł.

Kolejne spotkanie już za miesiąc!

WarsawJS Meetup #13 — 1 urodziny 🎂

Piotr Kowalski — Tue, 22 Sep 2015 00:00:00 +0000

Na jubileuszowym spotkaniu spotkaliśmy się jak zwykle w tym samym miejscu - Państwomiasto. Spotkanie miało dla nas charakter uroczysty, przygotowywaliśmy się do niego bardziej niż zwykle. Kupiliśmy balony - aby podkreślić, że są to urodziny - pierwsze urodziny WarsawJS!

Dzięki 10Clouds mieliśmy do rozdania kilkanaście koszulek. Wpadliśmy na pomysł ponaklejać gdziekolwiek karteczki z literkami: C oraz K.

Literka C oznaczała czekoladę ufundowaną przez organizatorów WarsawJS, natomiast literka K oznaczała koszulkę. Jeśli ktoś odkleił od ściany, albo od krzesełka taką karteczkę, to mógł w odpowiednim czasie podejść po nagrodę 😄

Invitation

Ze względu na jubileuszowe spotkanie, chcieliśmy nagrać zapowiedź w miejscu bardzo ważnym dla naszego miasta. Syrenka jest dla warszawiaków symbolem. Dlatego przed tak ważnym spotkaniem, wybraliśmy tak ważny obiekt.

•

Talk #1: My 10 days with Phaser.js [PL] Piotr Kowalski

Moja kolejne wejście na scenę WarsawJS. Chciałem opowiedzieć o czymś niezwykłym, dlatego wpadłem na pewien pomysł. Wyznaczę sobie trudne zadanie i spróbuję jemu sprostać. Chciałem pierwotnie w 10 napisać pracę dyplomową. Niestety, takie zadanie wiąże się z poświęceniem dużej ilości godzin na wklepywaniu literek w klawiaturę. Postanowiłem, że na początku może będę siebie nagrywał, a jak starczy czasu to przepiszę - ubiorę w słowa.

Wymyśliłem, że stworzę grę w oparciu o anime Dragon Ball. Jest to moja ulubiona bajka z dzieciństwa, no i warto nadać grze jaką tematykę.

Od 1 września do 10 tworzyłem grę - 7balls.

Przez te 10 dni nagrywałem siebie jak tłumaczę ciekawe zagadnienia związane z grą. Całość będę umieszczał na swoim kanale w odstępach cotygodniowych.

Link do prelekcji: https://www.youtube.com/watch?v=klDeljOKDjU
Link do slajdów: piecioshka.github.io/slides-my-10-days-with-phaser-js/

•

Talk #2: Debugging JavaScript not only for beginners [EN] Piotr Zientara

Link do prelekcji: https://www.youtube.com/watch?v=R1gtwxE1Vrc
Link do slajdów: tuhaj.github.io/debugging-js/

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

AngularJS Warsaw #3 + Moja prelekcja

Piotr Kowalski — Thu, 27 Aug 2015 00:00:00 +0000

Po raz trzeci poszedłem na AngularJS Warsaw. Tym razem szczególnie, bo w roli prelegenta!

Dawno nie bylem prelegentem, a miałem super temat na prelekcję. Chciałem podzielić się z innymi moimi doświadczeniami związanymi z nauką AngularJS.

AngularJS Warsaw

Przeczytałem 2 książki oraz odbyłem szkolenie z podstaw AngularJS.

Tylko tyle.

Nie jest to dużo, chciałem tym samym wyjść na sceną i opowiedzieć to, co wiem dając przykład innym ludziom, że warto wychodzić na scenę, pomimo tego, że nie jest się ekspertem w danej dziedzinie.

Link do zdjęć: https://plus.google.com/+Evojam/posts/EqDvBMrDfmd

Talk #1: AngularJS: Q&A [PL] Piotr Kowalski

Podczas czytania książek notuję sobie na “żółtych karteczkach”, rzeczy:

których nie do końca rozumiem,
które rozumiem, ale chciałbym przećwiczyć przed komputerem i się upewnić,
wszelkie błędy, abym ktoś kto będzie czytał tą książkę po mnie, wiedział, że jest błąd w druku.

Kiedyś czytałem książki i gdy tylko coś rzuciło mi się w oczy to od razu siadałem do komputera. Wtedy jedną książkę czytałem kilka tygodni, bo po tym jak siadłem do komputera to już nie wracałem do książki.

Uważam ten sposób, na najlepszy podczas czytania książek. Piotr Kowalski

Twitter: @piecioshka

AngularJS: Q&A from Piotr Kowalski

Link do slajdów: https://piecioshka.github.io/slides-angularjs-q-and-a

Link do zdjęć: https://plus.google.com/+Evojam/posts/EqDvBMrDfmd

•

Talk #2: Udekoruj Angulara z TypeScriptem [PL] Jakub Strojewski

Kuba kontynuował swoją prelekcję z pierwszego spotkania nt. TypeScript.

Opowiadał o dekoratorach, które pojawią się w JavaScript wraz z akceptacją standardu ECMAScript 7, bo prawdopodobnie w niej doczekamy się wprowadzenie dekoratorów.

W TypeScript już dziś możemy korzystać z dekoratorów od wersji 1.5. Jest to wersja języka, która dostała najwięcej nowych rzeczy.

Więcej do poczytania co nowego w wersji 1.5 można przeczytać tutaj: github.com/Microsoft/TypeScript/wiki/What’s-new-in-TypeScript.

Kuba podczas tej prezentacji przedstawiał jak on skorzystał z dekoratorów w TypeScript na potrzeby pracy z Angularem. Dokładniejsze informacje znajdziesz jego projekcie na GitHub: github.com/ulfryk/angular-typescript.

Twitter: @ulfryk

Link do slajdów: triangular.io/blog/es7-decorators/

Taki był widok z okna!
Link do zdjęć: https://plus.google.com/+Evojam/posts/EqDvBMrDfmd

Całe spotkanie oceniam bardzo pozytywnie.

Pomimo wakacji frekwencja była dość dobra, około 60 osób.

•

Sponsorzy spotkania

Dzięki sponsorom, każdy z uczestników miał możliwość napicia się napoju produkującego poprzez Tyskie Browarium. Po mojej prelekcji, każdy mógł skosztować pizzy. Mnie po prelekcji wciągnęła publiczność w wir pytań i niestety nic nie zjadłem - ale za to poskładałem puste opakowania na jedno miejsce 😄

Asseco
Aviva

WarsawJS Meetup #12

Piotr Kowalski — Sat, 22 Aug 2015 00:00:00 +0000

Spotkaliśmy się, jak zwykle w trzecią środę miesiąca w Państwomiasto (Andersa 29). Mieliśmy jak zwykle 3 prezentacje, gdzie pierwsza z nich była w pewien sposób wyjątkowa, gdyż była skierowana dla tych którzy dopiero zaczynają swoją przygodę z JavaScript.

Invitation

Tym razem chcieliśmy wyszczególnić Universam na Rondzie Wiatraczna jako miejsce znane warszawiakom. Jest to pierwszy sklep samoobsługowy w Polsce. Kilka tygodni temu dowiedzieliśmy się, że ten budynek zostanie zburzony, a w jego miejscu powstanie biurowiec.

•

Talk #1: Jak zacząć przygodę z JavaScriptem od zera? [PL] Bartłomiej Sobczuk

Link do prelekcji: https://www.youtube.com/watch?v=_r_T8ubJLh4
Link do slajdów: ckyambitny.github.io/how-to-start-programming-in-Javascript/

•

Talk #2: How to create a simple Node.js proxy for third-party APIs [EN] Illarion Khapyorskiy

Link do prelekcji: https://www.youtube.com/watch?v=TaKWftFtvVo
Link do slajdów: illarionvk.github.io/warsawjs-simple-proxy/

•

Talk #3: Node.js on mobile [EN] Oguz Bastemur

Link do prelekcji: https://www.youtube.com/watch?v=kZkl9Luk12w
Link do slajdów: https://drive.google.com/file/d/0B36_OUVtfH-KVDZGQzBMRkN3OTQ/view

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

DevMeetings: ECMAScript 6: Warszawa

Piotr Kowalski — Mon, 10 Aug 2015 00:00:00 +0000

Kila tygodni temu miałem przyjemność uczestniczenia w kolejnym DevMeetings-ie. Kolejny raz byłem w roli trenera - świetne uczucie, kiedy przekazuje się zdobytą wiedzę.

Miejsce

25 lipca spotkaliśmy się na 26 piętrze w budynku Golden Floor Plaza.

Widok na Centrum Warszawy.

Ekipa

Skład mentorów był nieco okrojony względem ostatniego DevMeetingu w Krakowie, mianowicie uczestnikom pomagałem ja oraz Kuba - młody developer z Wrocławia, z dużymi umiejętnościami.

Zadania

Zadania do wykonania były takie same jak w Krakowie. Jedno trudniejsze, drugie łatwiejsze. Dobór zadań nie był narzucany z góry, jednak dla uczestników z mniejszym doświadczeniem proponowana była aplikacja Tinder. Konkurowała ona z aplikacją Foursquare.

Wzorcowe aplikacje wykonane przez doświadczonych developerów:

dm-es6-tinder - Tinder autorstwa Macieja Kucharskiego
dm-es6-map - Foursquare, którego wykonawcą jest Olek Nowodziński

Podsumowanie

Jestem bardzo zadowolony, że Piotr zaprosił mnie na kolejne spotkanie w roli mentora.

Tylu ludzi zgromadzonych w jednym miejscu nie z przymusu, lecz z chęci rozwoju, daje mi do zrozumienia, że jest mnóstwo osób, którzy chcą się uczyć programowania i wychodzą na przeciw temu, zamiast siedzieć w domu i starać się być aspołecznymi developerami.

WarsawJS Meetup #11

Piotr Kowalski — Sun, 09 Aug 2015 00:00:00 +0000

Widzieliśmy się 22 lipca po raz #11 w Państwomiasto o 18:30, aby porozmawiać o JavaScript. Było to niesamowite spotkanie, tyle ludzi podczas wakacji? Przerosło to nasze oczekiwania 😄

Invitation

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Wprowadzenie do Socket.io [EN] Tomasz Marciszewski

Twitter: @Koori_

Link do prelekcji: https://www.youtube.com/watch?v=n27c3Rsqjl0
Link do slajdów: tmarciszewski.github.io/socket.io-introduction/

•

Talk #2: Mobile: od czego zacząć pisanie aplikacji na urządzenia mobilne [PL] Tomasz Pietrzak

Twitter: @Fulkman

Link do prelekcji: https://www.youtube.com/watch?v=UytvCo0cyLg
Link do slajdów: fulkman.github.io/warsawjs-presentation/

•

Talk #3: Angular 2 – krótkie wprowadzenie [PL] Mateusz Kocz

Twitter: @mateuszkocz

Link do prelekcji: https://www.youtube.com/watch?v=SonmrR01vu4
Link do slajdów: mateuszkocz.github.io/warsawjs-presentation/

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

AngularJS Warsaw #2

Piotr Kowalski — Fri, 31 Jul 2015 00:00:00 +0000

Organizatorami spotkania są Arek Kalbarczyk i Darek Kalbarczyk, których książka AngularJS. Pierwsze kroki od 6 tygodni jest na 1 miejscu helion.pl.

Poniżej załączam swoje notatki robione podczas prelekcji. Zastrzegam sobie, że w notatkach nie mam zawartych wszystkich rzeczy, które zostały opowiedziane przez prelegentów.

AngularJS Warsaw

Talk #1: AngularJS UI Router [PL] Arek Kalbarczyk

Czym jest SPA?

Dzięki SPA wzrasta responsywność.
Mamy wrażenie zbliżone do aplikacji desktopowej.

Routing

Routing służy do przeładowywania widoków i szablonów.

Ułatwia modularyzację.

Dzięki routingowi można połączyć szablon i kontroler, nie trzeba wiązać dyrektywy.

`ngRoute`

W wersji AngularJS 1.2 został wyodrębniony.

To on łączy URL i szablony, czyli aplikacja wie, że ma przeładowywać szablony.

To on wie, do jakiejś ścieżki podłączyć dany moduł oraz wspiera, co się ma dziać kiedy, ścieżka nie jest odnaleziona.

`UI Router` - zewnętrzna biblioteka do AngularJS

Istotna zmiana względem ngRoute, który wiąże ze sobą ścieżki. W UI Router Wszystkie ścieżki są połączone poprzez stany. Jest to lepsze, bo można zmienić URLa.

Można zrobić incepcję 😄

W ngRoute nie mamy możliwości dziedziczenia szablonów. w UI Router można zrobić stany dziedziczące.

Możemy na jednej stronie załączyć kilka niezależnych routingów.

Co trzeba zrobić jeśli chcemy skorzystać z UI Router?

trzeba wstrzyknąć moduł za pomocą dependency injection
konfiguracja - za pomocą serwisu - providera w fazie konfiguracji ładowania
nie musimy konfigurować w jednym pliku
jak przełączać się pomiędzy stanami - za pomocą ui-sref
ui-view wyświetla nasz szablony - może on być w dowolnym fragmencie body

Zagnieżdżony routing

do szablonu można załadować kolejny widok - czyli jest to zagnieżdżenie
nie warto przesadzać i robić 3 “podstanów”
wg UX nie powinniśmy robić więcej niż 3 podstanów, bo typowy użytkownik powinien doklikać się do celu w max 3 kliknięciach

Multi routing

definiujemy tyle dyrektyw ile chcemy
przypisujemy wartości: view-1, view-2, …
konfiguracja!
- stan rodzica
- przekazujemy informację dot. zagnieżdżonych stanów (nazwa rodzica stanów)

Struktura aplikacji

.
├── app
│   ├── app.js
│   └── modules
│   ├── home
│   │   ├── directives
│   │   ├── homeController.js
│   │   ├── homeView.html
│   │   └── services
│   ├── module2
│   └── modules3
├── assets
│   ├── images
│   └── styles
├── index.html
└── scripts

UI Router SEO

23 maj 2014 roku - Googlebot parsuje JavaScript!
czyli wchodząc na naszą stronę, jest w stanie zrozumieć naszą stronę i ją zindeksować
robots.txt może blokować crawlery
jeżeli chcemy osiągnąć prawdziwe wyniki to trzeba odwołać się do stałych metod
przed hash znajduje się wykrzyknik - escaped fragments
biblioteka prerender.io - pomaga nam przerenderować template po stronie serwera
ciekawe udogodnienie ale nie rozwiązanie ost

Warto wiedzieć

htmlMode na true
base href na /
obsługa historii:
- możemy zaimplementować po stronie serwera, który będzie zapamiętywał stany na których byliśmy
- jeden wyjątek: każdy stan musi zawierać swoją unikalną ścieżkę
- oraz kilka innych kroków
jeśli chcemy uatrakcyjnić:
- ng-enter
- ng-leave

Na zakończenie…

Strona projektu UI Router: github.com/angular-ui/ui-router

Slajdy: pro.ispringcloud.com/acc/Hgk7GNIxMjQ4/view/1248-hbbYD-3MyQB-hJwuz

Demo: github.com/akalbarczyk/Prelekcje

Czas trwania prelekcji: 18:35 - 19:01

•

Talk #2: AngularJS + Bootstrap - duet internetowej przyszłości [PL] Tomasz Żarnowiec

Czym jest bootstrap?

jest frameworkiem CSS
ma predefiniowane klasy CSS

Koncepcja

wszystkie elementy które są zdefiniowane opierają się na klasach nie na ID
id jest złe - jeśli wykorzystamy ID to odnosimy się do jednego
klasy są re-używalne, nie tak jak ID
głowna zasada - mobile first
w Bootstrap mamy media-queries
boot dopasowuje tylko do szerokości - nigdy dla wysokości ekranu
co ciekawe tabele - mogą być skalowalne! - z nie responsywnego elementu mamy responsywny

Jak użyć?

podłączamy CSS w head
podłączamy JS w body na dole
- jQuery
- AngularJS
- Bootstrap
- następnie pluginy i dodatki JS-owe
ładujemy z CDN-a
- bo nie mamy miejsca na serwerze
- definicja poprzez //cdnjs.com/bootstrap.js to strona ustala protokół po jakim ściągnie liba

Grid (siatka) czyli podstawowy element bootstrapa

każda kolumna ma prefix
- col-[xs-sm-md-lg]-[1-12] - odnosi się do szerokości wyświetlacza
najpierw skalujemy mały ekran, a potem do tych większych
div.row - dla desktop będzie wysokości 2 div-ów, ale po zmniejszeniu np. mobile to będzie zawierał 2 kontenery (1 pod drugim)

Animacje!

jQuery ma w sobie animacje, ale są one już w CSS
jQuery i tak modyfikuje CSS
jQuery opóźnia
jeśli mamy mały element do animacji to jQuery
jeśli duży content trzeba animować to tylko CSS
lib: Animate.css - zawiera zdefiniowanych kilkadziesiąt animacji
- dodajemy po bootstrapie do index.html
- bardzo lekka biblioteka: 20KB

Mój klucz do frontowego sukcesu: nie przeładowujemy - nie odświeżaj.

Slajdy: pro.ispringcloud.com/acc/I9z1QnkxMjU1/view/1255-R4pEa-5qwp8-iZQsK

Demo: github.com/tomaszzarnowiec/SPATemplate

Czas trwania prelekcji: 19:35 - 20:06

•

Talk #3: AngularJS - The Reactive Manifesto (v2.0) [PL] Marek Tuchalski

Reactive Manifesto (v2.0)

użytkownicy żądają responsywności rzędu 100ms
w dużej mierze jest to marketingowy zabieg
- aby sam typ programowania spopularyzować
istnieją 4 punkty:
1. responsive - obsługa błędów, np pojawiła się 504, trzeba poinformować usera
2. resilient - odporność
  - architektura serwisowa
  - nie dotyczy Front-end-u - bardziej Back-end-u
  - slack i gmail - przykładowe aplikacje, z których można korzystać kiedy połączenie z internetem zanika
3. elastic - Back-end-owa rzecz
  - skalowanie
    - automatyzacja mikroserwisów
    - replikacja danych
    - dodawania maszyn (manualna)
4. message driven
  - systemy komunikują się poprzez wiadomości
  - gdzie na Front-end-zie można użyć message driven?
    - systemy muszą działa async, aby nie blokować zasobów, kiedy tego nie potrzebujemy

Reactive manifesto reklamuje Typesafe. Ludzie myślą, że to dotyczy tylko Back-end-ów Nieprawda! Aby aplikacja spełniała wymogi użytkowników to Front-end musi być responsywny!

platforma, która ma zmieniać świat!
handlujmy szybko
obsługujmy błędy
wpinajmy błędy, bo jak faktycznie klient zobaczy to abyśmy mogli się przed typ zabezpieczyć

DDoS - jak z tym żyć?

Co jeśli przyjdzie nam przeżyć “Wykop Efekt” albo “Reddit Effect”?

Poprawnie to się nazywa Efekt Slashdot-a. Więcej do poczytania na ten temat https://pl.wikipedia.org/wiki/Efekt_Slashdota

Co powinna zrobić reaktywna apka?
Pokazać 504 gateway timeout!
bo lepiej jest pokazać aplikację dla części użytkowników, niż wcale

Facebook

continuous deployment

Netflix

zabija swoje serwery
gdzie się podnoszą następne

Bądź gotowy na fail!

Założenie:

że zawsze dostanę odpowiedź jest bardzo złym założeniem
to że dostaniemy 404 też jest złym założeniem
obsługujemy grupy błędów (4xx, 5xx)

Jak to osiągnąć? Odpowiedź: Separation of concerns!

oddzielić modele od widoku
nie przekazywać danych przez scope-a
izolować html od css
styleguide dla kontrolerów - więcej na triangular.io/blog/styleguide-controllers/

Czas trwania prelekcji: 20:27 - 21:10

Prelegentem był Marek z firmy Evojam.
Kontakt: @marektuchalski

Marek na scenie.

Historia loga języka JavaScript

Piotr Kowalski — Wed, 15 Jul 2015 00:00:00 +0000

Kiedy powstał JavaScript nie miał swojego loga. Wszystkie języki kiedy powstają mają swoje oficjalne loga. Mają ponieważ za każdym z języków stoi jakiś podmiot odpowiedzialny.

Za JavaScript nikt nie jest odpowiedzialny.

Dlatego też, ten najpopularniejszy język dzisiejszych czasów (według serwisu githut.info/) nie posiada oficjalnego loga.

JavaScript jest implementowany przez przeglądarki na swój sposób. Dlatego też nie ma jednolitego przewodnika do tego języka. Istnieją manuale napisane przez firmy, które tworzą przeglądarki, np.

Microsoft: JavaScript Language Reference

https://msdn.microsoft.com/en-us/library/d1et7k7c(v=vs.85).aspx
Mozilla: JavaScript

https://developer.mozilla.org/en/JavaScript

Pośrednio nad rozwojem JavaScript-u czuwa zespół TC39, który rozwija ECMAScript czyli standard, który jest używany w JavaScript, JScript oraz ActionScript.

Jednak oni nie są odpowiedzialni za implementację samego JavaScript-u.

“Oficjalne” logo JS

4-ego października 2011 roku podczas konferencji JSConf EU 2011 Chris Williams wystąpił na scenie (youtube.com/watch?v=17rkSdkc5TI) i w swojej prezentacji, na temat negatywnych emocji, pokazał wszystkim swoją propozycję loga JS-a.

Chris stworzył repozytorium na GitHub-ie (github.com/voodootikigod/logo.js), gdzie można zobaczyć jego propozycję:

Logo JS-a zaproponowane przez Chrisa Willisa podczas konferencji JSConf EU 2011.

W tym projekcie znajdują się loga innych organizacji (konferencji, meetup-ów) JavaScript-owych.

Dlaczego JS a nie JavaScript?

Znak handlowy JavaScript jest zastrzeżony przez firmę ORACLE AMERICA, INC..

Dla pewności można zajrzeć tutaj:

tsdr.uspto.gov/#caseNumber=75026640&caseType=SERIAL_NO&searchType=statusSearch

Prawa do marki

Kiedy to w 1995 roku Sun Microsystems stworzył język o nazwie Java, zastrzegł sobie od razu trademark-ów. Wśród nich znalazły się:

JAVA
JAVA COMMUNITY PROCESS
JAVA COMPATIBLE
JAVAONE
JAVASCRIPT
JAVABEANS
JAVAFX

Kilka lat temu (w 2010 roku) Sun Microsystems zostało przejęte przez firmę Oracle. Dlatego też według prawa, to tylko ta firma może tylko stworzyć oficjalne logo dla JavaScriptu. Niestety, ale to nie Oracle zajmuje się rozwojem tego języka, więc prawdopodobnie nigdy nie doczekamy się oficjalnego loga.

Chciałbym użyć logo JavaScriptu. Co robić?

W dzisiejszych czasach, developerzy utożsamiają sobie skrót JS tylko z JavaScriptem, więc korzystanie z loga do JS-a jest właściwym podejściem.

Chris podkreślił, że jeśli ktoś chce używać jego propozycji to on nie widzi żadnych przeciwwskazań do tego, aby używać go wszędzie tam gdzie się chce. Logo jest udostępniane na licencji WTFPL.

Logo ECMAScript 6

ECMAScript jest standardem stworzonym przez organizację Ecma International. Organizacja posiada swoje logo na swojej stronie domowej: ecma-international.org/.

Jednak standardy raczej rzadko posiadają swoje loga, dlatego też i ECMAScript 6 nie posiada swojego loga.

W takim razie jak można oddać światu zaufanie dla ES6?

Siła społeczności

Wszystko za sprawą projektu github.com/gilbarbara/logos autorstwa Gil Barbara. Zebrał on w jednym miejscu loga do wszystkich znanych projektów, języków, technologii.

Dla wielu będzie to pierwsze miejsce w poszukiwaniu loga wybranej technologii w sieci.

Dla mnie na pewno.

Propozycja loga ECMAScript 6.

IT Manager Meetup #1

Piotr Kowalski — Mon, 29 Jun 2015 00:00:00 +0000

W stolicy powstała nowa inicjatywa zrzeszająca managerów z branży IT. Zaplanowałem sobie, że chcę zobaczyć na jakich zasadach będzie polegał ten nowy cykl spotkań.

Na ostatnie Warsaw Meta Meetup, spotkaniu dla organizatorów meetup-ów w Warszawie, poznałem się z Dominiką Gmerek, która to zaprosiła mnie na nowy cykl spotkań. Jestem głodny takich nowych wyzwań, także nie mogłem odpuścić sobie tej przyjemności i odpuścić.

Więcej o spotkaniu można dowiedzieć się na profilu wydarzenia: facebook.com/events/1459914867639803/

Talk #1: Developer heaven

Prelegent: Maciej Cielecki (CTO w 10Clouds)

Od 6 lat jest prezesem.

Gdybyśmy nie chcieli wyprzedzić rynku trudno byłoby nam się przebić. Rekrutacja jest dosyć zaawansowana.

Dwa kierunki:

albo piekło
albo niebo

Jaka jest rożnica między firmami produktowymi a usługowymi?

Usługowe - programują dla innych.

Plusy

ludzie mogą skakać po projektach (zyskują w zmienianiu siebie)
więcej człowiek może się nauczyć, kiedy jest rotacja pracownika między projektami
w usługach inaczej się buduje strukturę

Minusy

trudne jest poczucie celu np. Google, Uber

Super ważne w kontekście satysfakcji pracy - jak dobrą ma dokumentację i design.

Cały team design-owy i ux-owy który robi dobrą grafikę i makiety są one konsultowane technicznie.

Pozwala to programistom w projektowaniu architektury aplikacji.

Agile is good, good agile is better.

Dużo osób pracuje w Agile, ale nie wszyscy znają tą metodologię dokładnie. Codziennie ludzie spotykają na stand-up-ach i myślą, że to jest cały Agile 😄

Dla programistów jest super ważne, aby nie byli managerami!

Zasada

Sprint jest nie do dotknięcia!

Jeśli dobrze się planuje, to nie można mieszać zadaniami w sprint-cie.

Tworzenie dużej dokumentacji na początek (bardzo dokładna):

rozbijana na tickety w Jira
wszystko wiadomo
ktoś przemyślał całość
w iteracjach uczestniczą też Ci, którzy robili dokumentację
rzeczy się zmieniają - design jest aktualizowany na bieżąco

Anegdota o wychowaniu 8-latka

Kiedyś pewien manager miał problem z wychowaniem swojego syna. Nie potrafił on przestrzegać pewnych słownych ustaleń. Tenże manager był “certyfikowanym scrum masterem” więc wiedział z czym się je “Scrum task board”. Postanowił więc wykorzystać tą wiedzę w życiu codziennym.

Stworzył tabelę na kartce papieru, gdzie zapisał ile czasu w ciągu dnia jego syna będzie przeznaczał na każde zadanie (zabawę, naukę). Tym samym kiedy zapisał, że w ciągu całego dnia tylko 1h na XBox, inna na coś innego, a ostatnia na naukę, to dziecko widząc taki plan dostosowywało się do niego.

Maciej polecił do przeczytania artykuł w serwisie Techcrunch: “Perks don’t work”.

Jest on dostępy pod adresem: techcrunch.com/2014/12/11/perks-dont-work/.

W Dolinie Krzemowej developerzy nie mają satysfakcji z pracy, bo dużo zarabiają. Pracodawcy popełniają ten błąd, że motywują swoich pracowników tylko wyższymi zarobkami. Jest to złe podeście, bo przy pewnym stopniu zarobków ich wzrost o kilka procent nie cieszy tam mocno jak na początku swojej kariery.

Emanowanie kulturą

W 10Clouds zostało powołane nowe stanowisko HR Marketing Manager. Osoba na tym stanowisku zajmuje się przedstawianiem priorytetów firmowych oraz zasad panujących w relacjach między pracownikami.

“Procesy rekrutacyjne kończą się zawsze “ściągnięciem” ludzi którzy pasują do kultury panującej w firmie.”

Saying goodbye

Co zrobić kiedy trzeba zwolnić pracownika?

Warto zwalniać ludzi którzy nie pasują dla wzrostu (rozwoju) firmy.

Jak zwalniać ludzi?

nigdy nie zwalniać ludzi pochopnie
dać na początku “zółtą kartę”
następnie dać sobie okres “żebyśmy spróbowali się dograć”

Zwalnianie osób niepasujących do zespołu wywołuje bezpieczeństwo u innych.

Zarobki w firmie

Maciek przybliżył historię pewnej firmy, która ma publiczny spritesheet z pensjami.

Istnieje nawet jawny algorytm wyliczania pensji.

Headhunters

nie emanują kulturą pracy w danej firmie
lepiej mieć HR wewnętrzny

Droga `developer → manager` - Pros & Cons

Plusy

zrozumienie mentalności koderów (miejsce pracy)
flow
- spędzić trochę czasu aby wejść w stan nirvany
- koderzy lubią wyjść z takiego flow - nie są aspołeczni
- tylko osoby które sa wstanie wejść w takim flow są dobrymi koderami
- można zepsuć ten stan przychodząc i zaczepiając, np. robiąc spotkanie
flexible time

Minusy

brak!

Kwintesencja programowania:

zone: strefa mentalnego komfortu
flow: stan euforii

Więcej na temat flow na stronie pinczek.pl/uczucie-przeplywu-czyli-jak-wejsc-w-flow/

“Praca zdalna” nie oznacza pracy w domu! Maciej Cielecki

Maciej poleca książkę 37signals pt. “Remote”, która to omawia sposoby pracy zdalnej.

Więcej o książce na stronie domowej: 37signals.com/remote/

Warto wspomnieć, że nie powinno się wymagać asertywności od programistów.

Project Manager-owie, przekonają programistę do zobligowania się do zrobienia czegoś na jutro.

Developer, zdaje sobie sprawę, że jest to nie realne, ale się “postara”.

Efekt jest taki, że developer nie skończy i będzie mu głupio, bo “obiecał”, no i PM będzie miał problem, bo myślał, że zadanie zostało zrealizowane.

Istnieją takie firmy gdzie jest bardzo dużo procedur:

[MINUS] zamiast pracować to wypełnia się procedury
[MINUS] to jest rozpraszające
[MINUS] nie daje satysfakcji pracy ludziom

Lepiej jest nie tworzyć takich procedur, a już jakiś soft, który może pomóc w rozwiązaniu problemów!

Kultura nie procedury!

Co lubia programiści?: Lubią intelektualne wyzwania i to, żeby było one ciekawe. Na przykład zaczynają budować mega skomplikowany kod. Trzeba ich wtedy nauczyć, w którym miejscu stawiać granice, aby ten kod był możliwy do utrzymania na długi czas.

Jak można dostarczyć takich “intelektualnych wyzwań”?

organizowanie hackday (aby użyć nowej technologii)
jesteś w stanie raz na kilka miesięcy - zrobić “intelektualny challenge”
czas, za która firma płaci
okiem pracodawcy: zespół bada nowe technologie, które można użyć w nowych projektach
trzeba przekonać prezesa aby zaakceptował budżet, bo dla firmy jednym plusem jest “research technologiczny”

Człowiek z “niewidzialny pistoletem”

Ta osoba decyduje o wszystkich rzeczach. Ważna osoba (ten który ma władze) np. CTO

jeśli ta osoba nie rozumie, to nic się nie stanie nowego w organizacji
kultura developerska powinna być dostępna (jasna) do tego człowieka

“Niewidzialny pistolet” to metafora tego, że gdy na spotkaniu pojawi się pistolet to developer może czuć, że gdy powie coś złego się zwolniony.

•

Talk #2: Autostrada do nieba

Marek Grochala (CEO w Evojam) Mała firma - 14 osób

Jak my robimy proces rekrutacji w Evojam?

jak u nas działa
to nie jest jedyny słuszny proces

Bardzo subiektywny proces rekrutacji.

Plan

po co szukamy nowego człowieka?
my z definicji nie chcemy być dużą firmą, chcemy rosnąć wolniej ale dokładniej
proces jest bardzo dokładny, dużo osób odpada, ale jeśli się ktoś znajdzie to w dużym stopniu pasuje do reszty organizacji

Szukamy osoby która będzie pracowała dla zespołu, która dobrze się komunikowała.

Czasy samotnych wilków już minęły.

Większość problemów wynika z problemów z komunikacją. Marek Grochala

Nie zatrudniamy znajomych, rodziny, bo rodzi problemy w przypadku czarnych scenariuszy. Dylematy zwalniania rodziny i przyjaciół - wiemy z doświadczenia.

Jak szukać? Byś sexi!

Oszczędzić czas na spotkaniu? Napisać FAQ na stronie organizacji.

W procesie rekrutacyjnym chodzi o transparentność (jasne zasady)!

Podajemy przedziały zarobków na naszej stronie.

Jakie są warunki pracy:

warunki płacowe
wymyśliła to osoba (programista), a nie bullshitgenerator.com/
jak wygląda proces rekrutacji

Jak rekrutować?

Pracuj.pl jest zdecydowanie większy od reszty. Marek Grochala

Często są na takie oferty zgłaszają się headhunterzy. Rzadko jednak zaproponują dobrych kandydatów.

Alternatywne metody:

prezentacje na meetup-ach
to nie jest szybkie rozwiązanie, ale działa
ewangelizacja studentów na uczelni

5 kroków autostrady

Curriculum Vitae
- Czy osoba w ogóle się nadaje na programowaniu?
- Kogo zna ta osoba? Jak się z nią pracuje?
- Gdzie pracował?
- Jak często zmieniał pracę? Warto czasem szybko zmieniać pracę.
Praca domowa
- Bardzo ogólna praca domowa - od developera zależy jak zdefiniuje dziedzinę problemu.
- Specjalnie nie jest stricte zdefiniowane.
Spotkanie
- Wspólnicy + człowiek z zespołu.
- Liberum Veto - jeśli jedna osoba powie NIE, to rezygnujemy z kandydata.
- Bardzo dużo pytań miękkich.
Oczekiwania finansowe
- ..ale na końcu to my składamy ofertę na naszych warunkach finansowych!
- Nie patrzysz na doświadczenie.
- Jeśli oferta różni się od oczekiwań to tłumaczę zostaje wytłumaczone z jakiego powodu.
- Logiczna oferta - z czego wynika oferta.
- Główny cel to rozwój pracownika!
Dream team
- Dobór systemu jaki chcesz, ma dać się zainstalować soft który jest potrzebny.
- Osoba musi zacząć tworzyć rewizje - kod musi przejść przez 2 osoby.
- Klientom sprzedajemy jakość - pierwsze rewizje w bólach
- Jak najszybciej dajemy dostęp i jak najszybciej kodowanie

•

Talk #3: Szanuj Admina swego, bo możesz mieć gorszego

Maciek Broniarz (Kierownik Działu Sieci Komputerowych UW) 17 lat doświadczenia.

W swojej historii zrobił dużo audytów bezpieczeństwa.

Kim jest admin? Gość odpowiada za infrastrukturę

DevOps - nowe stanowisko. Jest to developer która pozbywa się cech administratora.

Co robi admin? Robi wszystko!

Pilnuje to, co udostępnia firma na świat, aby działało i w należyty sposób. Często jest tak, że admin jest jedyną osobą w firmie która wie jak coś działa, np. przy wdrożeniu uczy się całej aplikacji.

Rekrutacja

Gdy w pracy nastąpiła awaria to jest ona mocno stresująca.

Dobieramy ludzi w dosyć pedantyczny sposób: bezgraniczne zaufanie.

Kandydaci wklejają certyfikaty, ale nie potrafią podstaw.

TEST

Telefon w dziwnej porze, aby zobaczyć jak sobie radzi w nie komfortowych warunkach. Cel: umieć odpowiedzieć na pytanie: “na ile ten gościu jest komunikatywny w rozmowie ze mną?”

Najbardziej okrutne pytanie na rozmowie o pracę: jakie są Twoje najmocniejsze strony?

Najważniejsze 3 rzeczy…

umiejętności (merytoryka) - weryfikacja poprzez kwestionariusz, a następnie trzeba wypełnić test online, który weryfikuje wypełniony wcześniej kwestionariusz
komunikacja - potrzebujemy gości, którzy umieją mówić różne rzeczy, przeforsują swoje rzeczy
odporny na stres - ta umiejętność jest krytyczna, administratorzy pracują w trudnych warunkach, bo klient dzwoni zdenerwowany

Test kandydata pod kątem reakcji na “stressful situation”

Rozmowa rekrutacyjna. Podczas rozmowy z kandydatem, otwierają się delikatnie drzwi i cichym głosem osoba z zza drzwi mówi że nie zrobiła czegoś przed deadline.

Ty jako szef odpowiadasz w sposób stanowczy i wulgarny.

Cel jest pogląd jak kandydat radzi sobie na sytuację stresogenną.

“Całe życia z wariatami”

Najlepiej jak wszyscy admini się rozumieją. Admin nie rozumie, że są jakieś deadline w projekcie. Programista - to gość którzy pisze kod - i to jest fajne. Admin - to jest osoba która np. naprawi drukarkę, ogólnie taka co wszystko zrobi. Super admin to taki który nie ma nic do roboty, bo robi swoją robotę i jest fenomenalny.

Budowanie relacji z użytkownikiem

Jak użytkownik jest miły i ma dobrą relacji z adminem to lepiej się dogadać co nie działa.

Wymagania życiowe

Relacja zbudowana na opanowaniu i szacunku. Bardzo łatwo jest pozwolić adminowi, aby zadłużył firmę i zakupił mnóstwo zabawek. Admin nie ma czasu wydawać pensji. Admin potrzebuje gadgetów. Jeśli administratorzy chcą mieć ileś rzeczy, aby lepiej im się pracowało to warto zastanowić się nad listą zakupów. Adminom bardziej przeszkadzają rzeczy których nie ułatwiają pracy, a nie, że pensja jest za mała. Adminom trzeba rotować zadania. Kupić mu dodatkowy serwer, aby mógł testować nowe rozwiązania.

Awans i wynagrodzenie: nie ma sensownej ścieżki.

Adminem → Architekt → Manager innego smaku. Cały czas trzeba się troszczyć o admina, bo to, co on robi jest bardzo ważne dla firmy.

Łatwiej jest zrekrutować programistę niż wymienić administratora. Maciej Broniarz

Solo czy zespołowo?

Lepiej jest mieć 2+ adminów. Dużo komfortowa sytuacja, kiedy możemy się stymulować naukowo.

Team building, czyli narty w Aspen

Integracja zespołu jest krytyczna. Testy integracyjne - ciekawe rozwiązanie.

Generujemy symulowanego fail-a w trudnej porze np. 6:15. Jeśli są w stanie coś takiego rozwiązać to są stanie dobrze współpracować. Nie można robić takich testów, jeśli nie ma się kompetencji 😄

Imprezy firmowe

Fajnie pracuje się z ludźmi z którymi lubi się przebywać!

Jak zwalniać administratora

Żadna polityka nie jest w stanie zabezpieczyć danych. Oto lista kilku kroków:

Odcinamy dostęp administratorowi.
Zasada ograniczonego dostępu.
Pilnować do czego taka osoba ma dostęp.
Najlepiej rozstawać się na miękko.
Gdy drastycznie, to podziękować słowami “już nie pracuj” i wyprosić z biura.

Admina bierze się na lata. Maciej Broniarz

Idealna praca admina

Jasne określone warunki na system. Niech przygotuje budżet i hardware.

Jeśli administrator czuje, że nikt się nie wtrąca w prace to jest to praca marzeń.

Najgorsze jak developer zarządza administratorami.

Słabe jest też kiedy administrator zarządza developerami. Maciej Broniarz

Firma zarządzana przez adminów nie będzie przynosiła zamierzonych efektów.

Admina ma wiele sytuacji, kiedy musi poprawić coś zamiast developera, bo tak było prościej.

Jak robimy się starsi to nie zawsze jesteśmy mądrzejsi.

Jak znaleźć admina to tylko po znajomościach.

Jest sporo ludzi z kompetencjami, ale przejada się im praca w korporacji.

Prościej jest nauczyć kogoś z politechniki miękkich umiejętności,

niż mistrza miękkimi kompetencji nauczyć bycia administratorem. Maciej Broniarz

Admini chodzą do firmy, gdzie robi się fajne rzeczy, a nie tam gdzie jest kasa.

Ciężko jest znaleźć dobrego admina. Jako pracodawca warto pokazać co firma robi ciekawego w pracy. Wszystkie wydarzenia np. spotkania to jest fajny kanał komunikacyjny na rekrutacje admina.

Podsumowanie

Jestem bardzo pozytywnie zaskoczony jak interesujące może być spotkanie z ludźmi którzy na co dzień, mają podobne obowiązki co ja. Świetnie, że powstał taki event, gdzie będzie można podzielić się swoją wiedzą na ten temat, oraz wysłuchać co inni mają do powiedzenia w kwestii zarządzania ludźmi oraz firmą.

W imieniu organizatorów IT Manager Meetup zapraszam serdecznie na kolejne spotkanie na którym to ja będę chciał opowiedzieć z jakimi problemami zetknąłem się na początku swojej kariery managerskiej.

Jak założyć bloga korzystając z Jekyll?

Piotr Kowalski — Sun, 28 Jun 2015 00:00:00 +0000

Plan jest prosty. Mamy pomysł na aplikację, która będzie w formie bloga. Będzie można zakładać kolejne posty oraz dawać komentarze po nimi. Warto jeszcze wspierać tagi, aby filtrować listę postów.

Moje zadanie będzie dotyczyło platformy ~~www.ecmascript6.pl~~. Chciałbym, aby na niej znalazły się informacje nt. najnowszego standardu ECMAScript 6. Ze względu na końcówkę w domenie, chciałbym, aby artykuły były w niej po polsku.

Mam też plan, aby zrobić oddzielną sekcję na angielskojęzyczne artykuły.

Wybór narzędzia

Zaczynamy od wyboru systemu na którym będziemy się opierali. Ze względu na łatwość zarządzania wybór padł na Jekylla.

Jekyll to biblioteka (gem) w środowisku Ruby.

Za chwilę dowiecie się jak zainstalować interpreter języka Ruby. Stay Tuned!

Stworzenie katalogu

Zaczynamy tworząc katalog pod nasz projekt:

mkdir NAZWA_PROJEKTU
cd NAZWA_PROJEKTU

Instalacja narzędzia - `rvm`

Zainstalujemy rvm, tak aby nie zaśmiecać systemowej konfiguracji. Zainstalować go można na wiele różnych sposobów. Dużo sposób na instalację jest na stronie domowej. Moim zdaniem najprostszy to:

\curl -sSL https://get.rvm.io | bash -s stable

Instalacja interpretera języka - `ruby`

Gdy mamy już manager wersji języka, zainstalujemy wreszcie jakąś jego wersję! Wybrałem najnowszą z “2” na początku.

rvm install 2.7.8

Możemy właśnie zainstalowaną wersję ustawić jako domyślną za pomocą:

rvm alias create default 2.7.8

A następnie przełączmy się na tą wersję:

rvm use 2.7.8

Stworzenie środowiska dla zależności - `gemset`

Następnie stworzymy tzw. gemset, czyli katalog na potrzeby instalacji Jekylla oraz jego zależności.

rvm gemset create NAZWA_PROJEKTU

Po wydaniu polecenia rvm list gemsets widzimy, że jeszcze musimy się przełączyć na ten nowo stworzony gemset. Wydajemy polecenie:

rvm use 2.7.8@NAZWA_PROJEKTU

Jesteśmy już w nowym środowisku! 🎉

Instalacja Jekylla

Aby zainstalować Jekylla postępujemy zgodnie z rozpiską na stronie: http://jekyllrb.com/.

Wykonujemy poniższe polecenie, które zainstaluje nam gem (paczkę, program), dzięki której będziemy mogli stworzyć strukturą plików i katalogów dla naszego projektu.

gem install jekyll

Gdy mamy już zainstalowane narzędzie, wykorzystajmy je!

jekyll new .

Tym samym w katalogu projektu stworzy się struktura:

.
├── _config.yml
├── _includes
│   ├── footer-tag.html
│   ├── head-tag.html
│   └── header.html
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
│   └── 2015-06-28-welcome-to-jekyll.markdown
├── _sass
│   ├── _base.scss
│   ├── _layout.scss
│   └── _syntax-highlighting.scss
├── about.md
├── css
│   └── main.scss
├── feed.xml
└── index.html

5 directories, 15 files

Dobrym pomysłem, jest teraz stworzenie repozytorium w tym katalogu. Wykonujemy po kolei:
git init
git add .
git commit -am "Initialize project"

Uruchomienie

Gdy już mamy strukturę projektu możemy już uruchomić nasz projekt w przeglądarce. Wystarczy uruchomić:

jekyll serve

W terminalu dostaniemy informację na jaki adres trzeba wejść, aby wyświetlić stronę. W moim przypadku jest to http://127.0.0.1:4000/

Strona wygląda następująco:

Zwróć uwagę na port który trzeba dopisać do adresu IP maszyny.
Można go (port) łatwo zmienić: jekyll serve --port 4001.

Konfiguracja

Plik: `_config.yml`

Gdy już mamy uruchomioną aplikację czas na dostosowanie jej pod nasze potrzeby. Warto zacząć od głównego pliku konfiguracyjnego _config.yml znajdujący się w głównym katalog projektu. Zawiera on takie pola jak: tytuł strony, opis, kontakt do autora no i URL.

Katalog: `_includes/`

Następnie warto przyjrzeć się katalogowi _includes, w którym jest lista partiali (plików, które zostaną użyte w innym miejscu).

Plik head-tag.html zawiera definicję całego znacznika <head>. Polecam dodać w nim wygenerowany snippet kodu z Google Analytics. Dodatkowo może jakieś pliku CSS.

Katalog: `_posts/`

Kolejny katalog warty uwagi (chyba najważniejszy) to katalog _posts, w który znajduje się lista plików z naszymi postami.

Jekyll przyjmuje konwencję, że jeden plik = jeden post. To w nim umieszczamy pliku wg schematu YYYY-MM-DD-name-of-post.ext.

Mamy kilka typów rozszerzeń do wyboru, m.in. markdown, md, html. W każdym plik post istnieje specjalna sekcja na początku tego pliku, w której to definiujemy taki informacje jak:

layout, w jakim dany post ma być wyświetlony,
tytuł posta,
oraz ewentualne tagi.

W późniejszym etapie powiem o tagach. Ze swojej strony polecam zwykły html, ze względu na nieograniczone możliwości edycyjny. Pierwotnie używałem Markdown-a, ale przy bardziej skomplikowanych elementach nie radził on sobie najlepiej.

Katalog:`pages/`

Ostatnią rzeczą na która warto zwrócić uwagę są zwykłe strony. W katalogu głównym istnieje plik about.md. W zawartości takiego pliku (podobnie jak w postach) poza layoutem i tytułem jest jeszcze parametr: permalink. Oznacza on URL pod jakim strona ma byc dostępna. I tak proponuję stworzyć katalog pages, który będzie przechowywał strony. Jekyll sam znajdzie pliki w takim katalogu.

Ważne jest, aby nazwa nie zaczynała się od znaku podkreślenia, gdyś katalogi z prefiksem “_” są traktowane przez Jekylla specjalnie.

Plik: `Gemfile`

Ostatnim krokiem będzie stworzenie pliku Gemfile w katalogu głównym, aby ustawić odpowiednie środowisko (gemset) wraz z zawartością:

source 'https://rubygems.org'

ruby '2.7.8'
#ruby-gemset=NAZWA_PROJEKTU

gem 'jekyll'

Ponowna instalacja

Kiedy będziemy instalowali ponownie aplikację, to wystarczy wtedy tylko:

# stworzyć `gemset`
rvm gemset create NAZWA_PROJEKTU

# zainstalować gem `bundler`
gem install bundler

# zainstalować zależności
bundle install

… i mamy Jekylla! 🎉

Podsumowanie

Przejście opisanego tutoriala nie zajmuje wiele czasu. Po jego zakończeniu osiągamy spory efekt - w pełni praktyczną aplikację z podstronami oraz postami.

W dzisiejszych czasach postawienie bloga to nie jest jakiś rocket science.

Jeśli masz doświadczenie z językami programowania to na pewno chciałbyś mieć nieograniczony wpływ na Twoją aplikację webową, tym samym stworzenie takie aplikacji dzięki Jekyllowi jest efektywne, szybkie i łatwe!

Szkolenie: AngularJS Podstawy [Relacja Live]

Piotr Kowalski — Sat, 27 Jun 2015 00:00:00 +0000

Szkolenie poprowadził Tomasz Sułkowski - developer pracujący w Hexagram. Od 16 miesięcy związany z firmą konsultingową Sages.

Oficjalne logo frameworka AngularJS.

Miejsce szkolenia to siedziba firmy Sages na ul. Nowogrodzka 62c. Więcej o firmie: sages.com.pl/.

Slajdy dostępne pod adresem: slideshare.net/sagespl/podstawy-angularjs.

09:05 - Agenda

wprowadzenie / kontekst / narzędzia
teoria / demo
warsztat
teoria / demo
warsztat
…
Q & A

Korzystamy ze Slacka - IMO komunikator obecnych czasów.

Na początku trochę pytań odnośnie doświadczeń.

Cel: Budujemy aplikację typu SPA

SPA - Single Page Application

Nawigacja w aplikacji typu SPA polega na żonglowaniu hashem w URLu.

Narzędzia

Tomek polecał narzędzia:

WebStorm (IDE)
Sublime Text 3
Atom 1.0
Brackets
… Vim?

Ze swojego doświadczenia stwierdził, że po kilku miesiącach korzystania z Submlime Text 3, postanowił przerzucić się na WebStorm, ze względu na lepsze podpowiadanie oraz na poprawianie literówek, które każdy z nas, siłą rzeczy, popełnia.

npm

system zarządzania zależnościami dla “server-side js”
zależności opisywane w pliku package.json
npm install - instaluje pakiety, których jeszcze nie ma w projekcie
npm update - sprawdza, czy istnieją nowsze wersje pakietów + instaluje
npm install nazwa-pakietu --save-dev - instaluje pakiet, dodaje go do package.json

Aby nie trzymać zależności w projekcie. Dla nowego środowiska wystarczy zainstalować jednym poleceniem biblioteki.

Dodatkowo, możemy określi konkretną wersję którą chcemy zainstalować.

Domyślnie, trzeba by było szukać biblioteki w sieci i ściągać plik na dysk - teraz wystarczy jedno polecenie.

Bower

Instalacja poleceniem npm install -g bower

zarządzanie zależnościami dla “client-side js”
zależności opisywane w bower.json
bower install - instaluje pakiety, których jeszcze nie ma w projekcie
bower update - sprawdza, czy istnieją nowsze wersje pakietów + instaluje
bower install nazwa-pakietu --save - instaluje pakiet, dodaje go do bower.json
pakiety instalowane są do katalogu /bower_components/nazwa-pakietu/... - stamtąd należy je linkować w plikach html

09:30 - Ćwiczenie 1

Stworzenie nowego projektu w WebStorm.

ctrl+shift+a - wyszukiwarka wszystkich opcji edytora WebStorm
ctrl+shift+o - szukanie plików w projekcie
ctrl+e - lista ostatnio otwartych plików

Złota myśl Nauka skrótów jest bardzo pomocna. Umiejętność sprawnego poruszania się w skrótach, pomaga zdecydowanie zmniejszyć czas potrzebny na wykonywanie bieżącej pracy.

Omawianie struktury wygenerowanego seed-a

Kiedy stworzyliśmy nowy projekt typu AngularJS WebStorm stworzył prostą strukturę katalogów wraz z wieloma plikami.

W kolejnym kroku czyścimy boilerplate usuwając e2e-test, index_async.html oraz 2 pliki CSS z html5-boilerplate.

Po wydaniu magicznego polecenia npm install mamy do projektu ściągnięte wszystkie zależności. W pliku package.json w script/postinstall uruchomimy również bower install, więc i biblioteki client-side będą zainstalowane w katalogu app/bower_components.

Gdybyśmy nie mieli żadnego serwera serwującego statyki, w zależnościach mamy wpisany http-server. Jest to prosty serwer napisany w Node.js.

10:00 - Instalujemy Bootstrap

Dzięki poleceniu bower install --save bootstrap instalujemy Bootstrap-a. W zależności Bootstrap jest biblioteka jQuery.

W katalogu app/bower_components znajduje się ściągnięty pełny projekt Bootstrap oraz jQuery.

TIP: Bower zawsze cache-uje sobie biblioteki, aby przy ponownym pobraniu szybko ściągnął kolejny raz zależności.

10:04 - Korzystamy z Bootstrap-a

Dołączamy Bootstrap-a do index.html dorzucając przed plikiem app.css następującą linijkę kodu:

<link
    rel="stylesheet"
    href="bower_components/bootstrap/dist/css/bootstrap.css"
/>

Usuwanie zbędne paczki: bower uninstall angular-mocks.

Dodatkowo usuńmy zbędne komponenty app/components.

10:11 - Prezentacja docelowej aplikacji

Tomek przedstawia aplikację, do którą chcemy dziś napisać. Portal bardzo podobny do ipla.tv lub może bardziej do filmweb.pl. Przeglądanie listy seriali i wchodzimy w szczegóły danego serialu i możemy przeczytać opis. Możemy wyszukiwać dany serial po nazwie, oraz dodać dowolny serial do listy ulubionych.

10:15 - AngularJS

Posłuchamy teraz trochę więcej na temat samej biblioteki AngularJS.

Najbardziej zewnętrzną rzeczą w aplikacji jest moduł. Każdy moduł może posiadać specyficzną konfigurację. Na szkoleniu będziemy korzystali z jednej specyficznej usługi - routing (ui.router).

TIP: Podejście Fat model ma do siebie, że kontrolery powinny być “cienkie”, czyli nie zawierały dużo kodu, ale za to modele powinny przechowywać jak najwięcej się da 😄

Moduły, struktura aplikacji

Form Follows Function

Moduły wskazuję na zależności od zewnętrznych bibliotek
Modułu nie separują zawieranych komponentów (brak namespaces)
Poszczególne fragmenty aplikacji jako moduły, o hierarchii odzwierciedlonej w strukturze katalogów

TIP: Gdy stworzymy usługę o tej samej nazwie, to zostanie nadpisana poprzednia usługa w innym module o tej samej nazwie.

Routing

ngRoute do jakiegoś czasu był obecny w AngularJS. Jest dosyć prosty.
Lepszym rozwiązaniem jest ui.router.

W ui.router mamy kaskady widoków - każdy widok (kawałek HTMLa) może posiadać dostęp do innego kawałka kodu HTML, bez przeładowania całego globalnego widoku.

ngRoute niestety przeładowuje całą stronę, dzięki czemu korzystanie z aplikacji jest bardzo podobne do typowego przeglądania stron internetowych (mam tu na myśli efekt przeładowania się całej strony).

10:33 - Ćwiczenie 2

Podmiana ngRoute na ui.router (github.com/angular-ui/ui-router).

Instalujemy ui.router poprzez wykonywanie polecenia:

bower install angular-ui-router --save

oraz usuwamy starą paczkę

bower uninstall angular-route --save

11:04 - Ścieżki w aplikacji (ui.router)

Dodajemy katalogi: app/library, app/profile, app/search.

11:12 - Dependency Injection

AngularJS zanalizuje kontrolery, wyciąga nazwy parametrów na podstawie łańcucha znaków, który dostajemy kiedy uruchomimy toString na funkcji.

function MainController($scope, $http) {
    console.log($scope, $http);
}

MainController.toString(); // => 'function MainController($scope, $http) { ...'

Na podstawie wyrażenia regularnego AngularJS wyciąga nazwy parametrów, których oczekujemy.

TIP: Gdy dokonamy minifikacji kodu pojawi się problem ze wstrzykiwaniem odpowiednich modułów, ponieważ wszystkie nazwy zmiennych zostaną zmienione na krótkie zaczynając od zwykłych liter. Z pomocą przychodzi ngAnnotate - github.com/olov/ng-annotate.

Dodajemy moduł ui.router.

angular.module('myApp', ['ui.router']).config(function ($stateProvider) {
    $stateProvider.state('search', {
        url: '/search',
        templateUrl: 'search/search.html',
    });
});

Dodatkowo podmieniamy w index.html

<!-- Następującą linijkę w pliku index.html: -->
<div ng-view></div>
<!-- Zastępujemy na taką: -->
<div ui-view></div>

Tworzymy strukturę w projekcie - plik app/search/search.html.

Ustawiamy domyślną stronę poprzez $urlRouterProvider

$urlRouterProvider.otherwise('/search');

11:49 - Widok

Kawałki mniejszego HTMLa, które możemy użyć w innym (większym).

11:51 - Controller

Zwykła funkcja JavaScript.

Powiązanie z widokiem odbywa się przez $scope.

TIP: $scope jest to usługa, która jest obiektem to, co zdefiniujemy w tym obiekcie, będzie to od razu dostępne dla widoku (dyrektywy).

11:54 - Dyrektywy

… czyli HTML na sterydach! 😄

Możemy użyć na kilka sposobów:

element
atrybut
klasę CSS
komentarz

Wbudowane dyrektywy:

ng-app
ng-init - służy do wykonywania kodu na początku
ng-model - służy do prowadzenia interakcji między użytkownikiem a modelem
ng-show - gdy wartość będzie truly to kontener się wyświetli (dodaje klasę ng-hide - widoczność poprzez CSS)
ng-if - usuwa albo dodaje dany fragment do DOMa
ng-repeat - służy do iteracji po tablicy
ng-list - podczas prezentacja tablicy jako ciąg znaków, traktuje ten ciąg jako tablicę

two-way data-binding - wiązanie w obie strony, tj: widok aktualizuje model, który od razu jest zmieniony w kontrolerze, ale i w drugą stronę, gdy kontroler zaktualizuje model, będzie od widoczny (najszybciej jak to możliwe) widoku.

Więcej na ten temat na stronie https://docs.angularjs.org/guide/databinding.

TIP: AngularJS promuje deklaratywny styl pisania aplikacji (przeciwieństwo do imperatywnego).

Logika interfejsu jest w HTMLu!

<input type="text" ng-model="flag" />

<!-- Pierwotnie: flag=undefined (AngularJS nic nie wyświetli)-->
<!-- Po kliknięciu: flag=true -->
<!-- Po odkliknięciu: flag=false -->

Input jest dyrektywą!

Więcej na temat dyrektyw w dokumentacji: https://docs.angularjs.org/guide/directive.

TIP: Podczas wykonania ng-repeat tablica nie może posiadać duplikatów.

Jeśli jednak chcemy operować na duplikatach trzeba utworzyć specjalną konstrukcję:

<ul>
    <!-- Rozwiązujemy problem duplikatów -->
    <li ng-repeat="name in names track by $index">{ { name } }</li>
</ul>

12:18 - Usługi

Do czego służą usługi?

Miejsce gdzie trzymamy logikę biznesową. Wykonują się w kilku kontrolerów, więc nie ma sensu tego powtarzać. Usługi również służą do tego, aby współdzielić dane miedzy kontrolerami.

Definicja usług na 5 sposobów:

.constant() - proste wartości, nie można nadpisywać
.value() - proste wartości, można nadpisywać
.service() - większa usługa, która może posiadać wiele metod i właściwości
.factory() - większa usługa, która zwraca jeden obiekt
.provider() - generyczna usługa, bo każda jest de facto providerem

Więcej na temat usług https://docs.angularjs.org/api/ng/service/$http.

12:35 - Ćwiczenie 3

Tworzymy SearchController w katalogu app/search/, wykorzystujemy usługę $http do pobierania listy filmów.

13:07 - Przerwa obiadowa!

14:05 - Prezentacja swoich wyszukiwarek

Rozwiązujemy problem z obrazkami poprzez ng-src.

14:33 - Tworzymy `service`

Bardzo prosty service operujący na kolekcji dodanych elementów. Przykładowa implementacja:

'use strict';

angular.module('myApp').service('library', function () {
    var library = [];

    this.add = function (item) {
        library.push(item);
    };

    this.getAll = function () {
        // kopia, aby nie tracić tej hermetyzacji
        return library.slice();
    };

    this.has = function (item) {
        return library.indexOf(item) !== -1;
    };

    this.remove = function (item) {
        var index = library.indexOf(item);

        if (index !== -1) {
            library.splice(index, 1);
        }
    };
});

Jako dodatkowe zajęcie dostałem zapisywanie do localStorage. Udało mi się zrobić w 5 minut 😄

Tomasz poleca portal nodeschool.io/pl/ gdzie można podszkolić się z JavaScript.

Aby obserwować jakiś model należy wykonać:

$scope.$watch('query', function (newValue, oldValue) {
    console.log(newValue, oldValue);
});

Na samym początku ładowania aplikacji $watch zostanie uruchomiony i przekazane zostaną mu wartości undefined. Można się przed tym zabezpieczyć wystarczy sprawdzić czy nowa wartość równą się starej, bo tylko na początku obie wartości będą miały tą samo wartość.

15:22 - Dyrektywa `ng-model-options`

Dzięki tej dyrektywie mamy możliwość skonfigurowania komunikacji pomiędzy widokiem a kontrolerem.

<input type="search" ng-model="query" ng-model-options="{ debounce: 1000 }" />

Dzięki takiemu zastosowaniu odciążamy trochę aplikację, dodając lag na zmianę modelu.

Tomasz poleca wtyczkę do Batarang, dzięki której mamy możliwość podglądu modelów analizując DOMa.

15:30 - Directive Definition Object

Enkapsulują logikę związaną z zachowaniem
Tworzą widgety - małe aplikacje, klocki z których budujemy większe fragmenty

Jako zadanie domowe warto zrobić dyrektywę dla przycisków “Dodaj” i “Usuń”.

16:25 - Filtry

Umożliwiają przekształcanie danych w trakcje przejścia ze $scope do widoku bez zmieniania oryginalnej wartości.

Jest około 7 standardowych filtrów. Ta mała liczba wynika ze względu na prostotę dodawania swoich.

Od AngularJS 1.3 mamy w filtrach pure function, czyli dla takich samych parametrów mamy te same wyjście, tym samym biblioteka zapamiętuje (proces memoizacja) wynik dla tych samych parametrów.

16:39 - Formularze

TIP: Koniecznie trzeba ustawiać nazwy dla znacznika form, ponieważ będzie on pod tą nazwą dostępny w scope.

Stany formularza

$valid - bez błędów
$invalid - z błędami
$pristine - nienaruszony
$dirty - zmodyfikowany

16:57 - Dobre praktyki

17:08 - Kończymy na dziś!

Podziękowanie dla Tomka za całodniowe szkolenie 😄

DevMeetings: ECMAScript 6: Kraków

Piotr Kowalski — Tue, 23 Jun 2015 00:00:00 +0000

Pewnego dnia spotkałem się z Piotrem Zwolińskim na spotkaniu. W luźnej atmosferze doszliśmy do wniosku, że dobrze by było zrobić coś razem. Piotr wspomniał o tym, że wkrótce DevMeetings zamierza przygotować szkolenie z ECMAScript 6. Ze względu na moje doświadczenie w tym temacie, zaproponowałem, że mogę mu pomóc w organizacji od strony technicznej.

Jakieś było moje zdziwienie, kiedy to dostałem ofertę bycia mentorem na DevMeetings. Na tych samych szkoleniach, z których zawsze wracałem przytłoczony ilością zdobytej wiedzy, z głową spuszczoną do domu, bo poznałem lepszych od siebie - bardziej doświadczonych.

Mentor vs Trener

Kiedy to w 2008 roku jeździłem po Polsce aby jak najczęściej być obecnym na szkoleniu DevMeetings, głównym prowadzącym szkolenie był David de Rosier, którym był traktowany jak guru JavaScript, ze względu na swoje praktyczne doświadczenie, nigdy nie sądziłem, że kiedyś i ja mogę być w podobnej roli

DevMeetings ma w swoim słowniku dwa słowa opisujące osobę szkolącą:

`Trener` - zawsze jeden na szkoleniu, który był ekspertem w swojej dziedzinie
`Mentor` - osoba z bagażem doświadczeń, jednak tryb pracy z uczestnikami polegał tylko na bezpośrednim pomaganiu, nie wygłasza żadnej prezentacji na dany temat

ECMAScript 6 (Kraków)

DevMeetings organizując szkolenia, nie ogranicza się tyko do jednego miasta. Warsztaty są przeprowadzane w kilku największych miastach: Warszawa, Wrocław, Poznać, Kraków. Jako pierwsze miasto na szkolenie z ECMAScript 6 został wybrany Kraków. Tym samym dostałem zaproszenie do pomocy w roli mentora.

Zgodziłem się z uśmiechem na twarzy.

Oficjalnie zostałem wciągnięty na listę osób zaangażowanych w tego rodzaju przedsięwzięcie: registration.devmeetings.com/events/es6-maj-krakow. Miło jest znaleźć się na liście mentorów 😄

Miałem przyjemność uczyć uczestników nowej składni oraz nowy feature-ów z dwoma kolegami:

Maciek Kucharski: @kucharskimaciej
Bartek Krupa

Kolejne warsztaty z ECMAScript 6 planowane się we Wrocławiu. Więcej informacji na stronie: registration.devmeetings.com/events/es6-maj-wroclaw.

Tak to wyglądało

Niestety nie mogłem stworzyć relacji live ze spotkania, ze względu na ciągłą pomoc uczestnikom kiedy to rozwiązywali przygotowane przez nas zadania, które doprowadzały uczestników do implementacji 2 aplikacji.

Na moim profilu na Twitterze są dostępne zdjęcia ze spotkania. Załączam jeden z tweetów:

Mentor

Każdy z mentorów otrzymał od Piotra Zwolińskiego (właściciela DevMeetings) dyplom. Dla mnie jest to pierwszy taki dyplom który na pewno pojawi się w widocznym miejscu na ścianie 😄

WarsawJS Meetup #10

Piotr Kowalski — Mon, 22 Jun 2015 00:00:00 +0000

Kolejna edycja WarsawJS już za nami.

Spotkaliśmy się 16 czerwca po raz #10 w Państwomiasto o 18:30, aby podyskutować o JavaScript.

Invitation

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Testy e2e na przykładzie aplikacji angularowej [PL] Robert Gurgul

Twitter: @rgurgul

Link do prelekcji: https://www.youtube.com/watch?v=5EgJNRJuNGw
Link do slajdów: rgurgul.github.io/warsawjs-presentation-e2e-tests/

•

Talk #2: Enterprise Interface Architecture: JSON Schema [EN] Tomasz Ducin

Twitter: @tomasz_ducin

Link do prelekcji: https://www.youtube.com/watch?v=TkqiUG3j_Xw
Link do slajdów: slides.com/ducin/json-schema

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

ECMAScript 6. Dlaczego warto spróbować już dziś?

Piotr Kowalski — Wed, 10 Jun 2015 00:00:00 +0000

Kiedy powstało narzędzie 6to5 które miało być translatorem nowej składni JavaScript nie rzuciłem się na niego, ze względu na to, że potrzebowałem dowodu, że działa w 100%.

Temat odszedł trochę w zapomnienie. Dałem sobie spokój z poznawaniem nowej składni - skoro jeszcze nie została ona zatwierdzona żadną pieczęcią.

Nie chciałem uczyć się czegoś nowego co jest tylko draftem. Cenię sobie stabilne rozwiązania.

Kilka tygodni temu temat wrócił ze zdwojoną siłą… dlaczego?

Powrót z dalekiej podróży…

… bo 6to5 zmienił nazwę na Babel.js.

Dało mi to nadzieję, że może coś się zmieniło w kwestii stabilności transpilera. Wgłębiłem się w temat i okazało się, że Babel.js wspiera w 75% wg kangax standard który jest zapisany w dokumencie, który ma być zatwierdzony “na dniach”.

Wydaje mi się to na tyle sensowną liczbą, że warto już dziś zacząć pisać z użyciem nowej składni. Chociażby z tego powodu, aby się do niej przyzwyczaić - aby brwi się nie marszczyły kiedy spojrzy się np. na klasy w pliku *.js.

Tak przedstawia się lista wsparcia feature–ów z ES6 przez Babel.js:

Jak widać na powyższym obrazku lista nowych rzeczy jest wielka. Nowa składnia pozwala nam na uniknięcie wielu haków, chociażby znany wszystkich niby-obiekt, niby-tablica arguments, w którym znajduje się lista argumentów przekazanych do funkcji. Jednak to nie jest zwykła tablica, bo nie można na niej uruchomić metod z konstruktora Array. Takie zadanie jest możliwe po zastosowaniu rzutowania:

function foo() {
    var args = Array.prototype.slice.call(arguments);
    var operation = args.slice(0, 1);
    var things = args.slice(1);
    console.log(operation, things);
    // ...
}

Czy faktycznie taka linijka musi być w każdym miejscu kiedy chcemy operować na tablicy argumentów?

ECMAScript 6 ma w swoich zbiorze ulepszeń rest parameters. Dzięki temu kod może wyglądać tak:

function foo(...args) {
    var operation = args.slice(0, 1);
    var things = args.slice(1);
    console.log(operation, things);
    // ...
}

Prawda, że ładniej? 😄

Skąd czerpać wiedzę?

Pewnego czasu kupiłem kilka domen, które kierują na jedną: ~~ecmascript6.pl~~.

Gdzie stworzyłem agregat linków do wartościowych artykułów, tutoriali nt. ES6. Zachęcam do częstego odwiedzania. Codziennie powstają nowe artykuły, tutoriale i prezentacje z konferencji.

Chyba najbardziej zaangażowanym developerem jest Dr. Axel Rauschmayer. Na swoim blogu (www.2ality.com) stworzył już kilka bardzo dobrze opisanych artykułów dotyczących ECMAScript 6 (więcej w pkt 6. na stronie ~~ecmascript6.pl~~).

Ci z Was którzy lubią dużo czytać, na pewno zostaną pochłonięci przez książkę napisaną przez Nicholasa C. Zakasa pt. Understanding ECMAScript 6. Jest ona dostępna pod adresem: https://leanpub.com/understandinges6/read/. Jestem tym szczęśliwcem, który posiada wersję papierkową.

Dlaczego więc warto?

Komitet Ecma TC39 rozwija przed nami dywan.

Dywan po którym Ty i ja wkrótce będziemy stąpali.

Na dziś dzień jeszcze ten dywan nie został rozwinięty do końca,

dlatego gdy chcesz poczuć jak to jest po nim chodzić

musisz wykorzystać linoleum, które jest tylko skromnym zamiennikiem.

Linoleum w tej historii jest transpiler np. Babel.js bądź Traceur.

Dywanem jest ECMAScript 6 Piotr Kowalski. 2015-06-10

Narzędzia usprawniające prace z Git

Piotr Kowalski — Sun, 07 Jun 2015 00:00:00 +0000

Obejrzałem dziś prezentację pt: Git — krok po kroku Michała Lewandowskiego w ramach Jinkubatora .

Zachęciło mnie to do napisania posta, aby przelać “na papier” słowa wypowiedziane.

Michał podczas prezentacji, przedstawił jak działa Git, w jaki sposób radzi on sobie z tworzeniem rewizji, branchy czy tagów. Na początku prezentacji Michał zareklamował narzędzie tig z którego miał często korzystać podczas weryfikacji stanu repozytorium, jednak chyba ze względu na stres korzystał z sourceTree 😄

Bardzo mnie zaciekawiło to narzędzie (tig oczywiście, nie sourceTree), zrobiłem więc szybki research i od razu postanowiłem, że się z nim zaprzyjaźnię.

Tig

Kiedyś, gdy w ferworze rozglądałem się nad jakimiś narzędziami z GUI do zarządzania repozytorium, dowiedziałem się o istnieniu tig-a. Wtedy jednak narzędzie nie zrobiło na mnie jakiegoś wrażenia. Chciałem czegoś więcej. Czegoś co będzie miało jakiś interfejs użytkownika prezentowany w nowym oknie. Wybrałem wtedy narzędzie, które uruchamia się po uruchomieniu polecenia gitk.

Jest ono bardzo lekkie:

du -sh /usr/bin/gitk

 88K    /usr/bin/gitk

Tym samym działa szybko - a jest to dla mnie priorytetem w doborze softu do codziennej pracy. Ile czasu można stracić używając wolnego oprogramowania to na pewno każdy z nas już się o tym przekonał.

Pozwolę sobie zamieścić zrzut ekranu z głównego okna kiedy to uruchamiam tig-a na jednym z moich projektów:

Opcje

tig to bardzo szybkie narzędzie terminalowe, dzięki któremu mamy dostęp do wielu rzeczy korzystając z prostych skrótów klawiaturowych.

Najważniejszym skrótem jest oczywiście dostęp do pomocy. Wchodzimy do programu i … h.

Wchodzimy tym samym do ekranu z całą listą skrótów dostępnych pod tigiem.

m view-main         Show main view
d view-diff         Show diff view
l view-log          Show log view
t view-tree         Show tree view
f view-blob         Show blob view
b view-blame        Show blame view
r view-refs         Show refs view
s, S view-status       Show status view
c view-stage        Show stage view
y view-stash        Show stash view
g view-grep         Show grep view
p view-pager        Show pager view
h view-help         Show help view

Lista powyżej jest listą ekranów do których mamy dostęp za pomocą pojedynczych literek jako skrótów klawiaturowych - zwykłych literek.

Nie będę się starał opisywać całego programu, bo to nie o to chodzi - zresztą dziś zacząłem się nim interesować, więc potrzebuje jeszcze jakieś kilka tygodni codziennej pracy, aby móc się szerzej wypowiedzieć.

Nie mniej jednak zachęcam do korzystania, ponieważ dzięki tig zarządzamy repozytorium nie wpisując całych poleceń do terminala tylko korzystamy z łatwych skrótów. Nie czuję tutaj, abym nie wiedział co w danej chwili uruchomił za mnie program, tak jak ma to miejsce w tak skomplikowanych programach jak SourceTree czy chociażby GitHub for Mac.

git flow

Kolejnym narzędziem pomocnym w pracy z Git-em jest git flow. Nie jest to narzędzie zainstalowane domyślnie razem z Git-em, trzeba je zainstalować osobno (link poniżej).

git flow wymusza na nas utrzymanie porządku w branchach i tagach, nie poprzez przełączanie się bezpośrednio pomiędzy branchami, tylko według zasad zdefiniowanych w tzw. flow.

Nie mogę powiedzieć, że mam doświadczenie z takim podejściem, więc przytoczę tylko to, co Michał przekazał na szkoleniu.

Podstawową funkcjonalności jest przełączanie się pomiędzy feature-ami stworzonymi w projekcie poprzez:

git flow feature start 12345-support-sign-up

Kiedy zakończymy nad nim pracę informujemy, że feature został zakończony:

git flow feature finish 12345-support-sign-up

Wtedy taki branch zostaje zmergowany do brancha develop. Jest to branch w których nie prowadzimy żadnych prac, jest to taki kolektor, agregat, funkcjonalności realizowanych w innych branchach typu feature/xxx.

Hint: branch master jest odzwierciedleniem aplikacji na produkcji, czyli takiej która jest u klienta.

Ten rysunek przedstawia jak wygląda praca z git flow:

Bardzo ciekawą opcją jest jeszcze tworzenie release-ów aplikacji.

Z pomocą przychodzi tutaj polecenie:

git flow release start 1.0

git flow przełącza nas na specjalnego brancha, w którym możemy tworzyć kolejne rewizje (np. podmiana numerka wersji w README.md). Jest to bardzo wygodne rozwiązanie, bo jeśli nic nie musimy robić to po prostu wykonujemy finish tego procesu:

git flow release finish 1.0

Ze swojej strony bardzo zachęcam do chociażby wypróbowania takiego podejścia do zarządzania branchami w swoim projekcie.

Najlepiej jak by cały zespół projektowy wykorzystywał te narzędzie, zachowalibyśmy spójność w całym projekcie, co jest w większych projektach nie tylko wskazane.

Podsumowanie

Link do wcześniej wspomnianych rzeczy:

Prezentacja Michała: https://www.youtube.com/watch?v=QrJ5cdX1ir4
Repozytorium tig-a: github.com/jonas/tig
Projekt git flow: github.com/nvie/gitflow

WarsawJS Meetup #9

Piotr Kowalski — Mon, 25 May 2015 00:00:00 +0000

#9 edycja WarsawJS już za nami.

Spotkaliśmy się w Państwomiasto o 18:30 aby podyskutować o JavaScript.

Invitation

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Understanding data binding [EN] Dominik Lubański

Link do prelekcji: https://www.youtube.com/watch?v=zV-CVRpb4pg
Link do slajdów: slides.com/smalluban/understanding-data-binding

•

Talk #2: Responsive images the easy way [EN] Illarion Khapyorskiy

Link do prelekcji: https://www.youtube.com/watch?v=FLBfeTH1DWo
Link do slajdów: illarionvk.github.io/warsawjs-responsive-assets/images/

•

Talk #3: What’s up: JavaScript [EN] Sambath Kumar

Link do prelekcji: https://www.youtube.com/watch?v=Tb2uCGJzMg4
Link do slajdów: sambathl.github.io/warsawjs-presentation-template/

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

WarsawJS Meetup #8

Piotr Kowalski — Tue, 05 May 2015 00:00:00 +0000

#8 edycja WarsawJS już za nami.

Spotkaliśmy się w Państwomiasto o 18:30 aby podyskutować o JavaScript.

Invitation

Krzysztof zaprasza w imieniu organizatorów WarsawJS.

•

Talk #1: User Friendly Website with WebSockets Adrian Woźniak

Link do prelekcji: https://www.youtube.com/watch?v=D93jVD2wSAE
Link do slajdów: github.com/Eraden/user-friendly-website-with-websockets

•

Talk #2: Experience Design Development. Jutro jest teraz Piotr Słowik

Link do prelekcji: https://www.youtube.com/watch?v=UdklTOAKi60
Link do slajdów: wkrótce

•

Talk #3: React, Isomorphism and getting more functional [EN] Michał Kawalec

Link do prelekcji: https://www.youtube.com/watch?v=ItlSIyyVOng
Link do slajdów: github.com/mkawalec/warsawjs-presentation-template

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

WarsawJS Meetup #7

Piotr Kowalski — Mon, 23 Mar 2015 00:00:00 +0000

#7 edycja WarsawJS już za nami.

Spotkaliśmy się w Państwomiasto o 18:30 aby podyskutować o JavaScript.

Invitation

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: All that JS Tomasz Ducin

Link do prelekcji: https://www.youtube.com/watch?v=VFNnBhkiMrg
Link do slajdów: slides.com/tkoomzaaskz/all-that-js

•

Talk #2: Czy 50 to dużo? Marcin Operacz

Link do prelekcji: https://www.youtube.com/watch?v=P818c0LXV04
Link do slajdów: github.com/moperacz/czy-50-to-duzo

•

Talk #3: AngularJS - Dyrektywy szyte na miarę Darek Kalbarczyk

Link do prelekcji: https://www.youtube.com/watch?v=3JTCbcVJqcE
Link do slajdów: ng-poland.pl/warsawjs/

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

WarsawJS Meetup #6

Piotr Kowalski — Tue, 10 Feb 2015 00:00:00 +0000

Kolejna edycja WarsawJS już za nami. Jak zwykle spotkaliśmy się w Państwomiasto. Część oficjalną zaczęliśmy o 18:30 - może z lekkim opóźnieniem.

Invitation

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Geokodowanie w aplikacjach

Pierwsza prelekcje dotyczyła geo-kodowania w aplikacjach. Michał Rogala opowiedział jak wykorzystać bibliotekę leaflet.js na własny użytek.

Link do prelekcji: https://www.youtube.com/watch?v=eaXffqD4i84
Link do slajdów: https://navidata.github.com/warsawjs-geocoding-in-applications

•

Talk #2: Make your life easier - use Underscore.js

Drugą prelekcję wygłosił Adam Miniuk. Wprowadził nas w świat underscore.js. Przedstawił nam najpopularniejsze metody z tej biblioteki oraz opowiedział o performance.

Na sam koniec przedstawił listę 2 konkurentów:

lodash.js
lazy.js
Link do prelekcji: https://www.youtube.com/watch?v=WullNDHBz5A
Link do slajdów: https://adamminiuk.github.com/warsawjs-underscore-js-presentation

•

Talk #3: TDD w JavaScript - mały warsztat

Ostatnią prezentacją poprowadził Darek Biedrzycki. Opowiedział o TDD w JavaScript z użyciem Karma, Jasmine oraz Phantom.js.

Link do prelekcji: https://www.youtube.com/watch?v=FTbKAC-4_JA
Link do slajdów: darekb.github.io/WarsawJs6/

•

Sponsorzy spotkania

Rebased, 10Clouds - żetony w barze
Cyfrowy Polsat - materiały na YouTube
Whitestream - transmisja na żywo - warsawjs.com/live

Ogłoszenia

Każdy z was może zostać prelegentem wystarczy wysłać maila na kontakt@warsawjs.com.

Jeśli jednak chcielibyście poprowadzić krótką prezentację, wystarczy przyjść na spotkanie i po 3 prelekcjach zgłosić się do poprowadzenia lighting talka.

Zakończenia

Po część “oficjalnej” kto chciał ten dostał żeton, będący równowartością 10 pln,- w barze.

Kolejka po napoje utrzymywała się kilkanaście minut.

Gdy już każdy dostał co chciał rozpoczęła się druga część “barowa” w której to na luzie słuchacze wraz z prelegentami rozmawiali o wrażeniach ze spotkania, ale i nie tylko 😄

Dziękuję serdecznie wszystkim za przybycie i zapraszam na kolejne spotkanie, które odbędzie się w środę 18 marca o 18:30, jak zwykle, w Państwomiasto.

Hackathon: Static Showdown #2 (2015)

Piotr Kowalski — Wed, 28 Jan 2015 00:00:00 +0000

W miniony weekend brałem udział w hackathonie. Gdyby ktoś nie wiedział co to jest, to spieszę z wyjaśnieniem. Otóż, hackathon jest to inicjatywa której głównym celem jest napisanie aplikacji bądź gry w wyznaczonym przez organizatorów czasie.

Pomysł

Miniony hackathon trwał 48 godzin - od 00:00:00 UTC z piątku na sobotę, do 23:59:59 UTC z niedzieli na poniedziałek.

To już mój kolejny taki hackathon, podczas którego udało się stworzyć grę na przeglądarki komputerowe. Brałem udział w kilku hackathonach, np: DevCapms organizowany przez DevMeetings, 2 razy w Node Knockout.

Miniony hackathon był organizowany przez ekipę z Static Showdown.

Projekt

W projekcie uczestniczyły jeszcze dwie osoby: Kamil Załęski oraz Konrad Kowalski.

Stworzyliśmy grę typu multi-player, do przetestowania tutaj: https://ss15-dumplings.divshot.io/.

Nasze oficjalne zgłoszenie gry jest dostępne pod adresem: 2015.staticshowdown.com/teams/dumplings.

Technologie

Wykorzystaliśmy następujące technologie:

Phaser.js - najlepszy framework do tworzenia gier
Backbone.js - nie wiem po co, ale wykorzystaliśmy…
Użytkowe: Lodash, jQuery, Promise.js, Require.js
narzędzie Gulp do ogarniania zadań projektowych
oraz bazę Firebase idealną do zastosowań tymczasowych

Pitch video

Po stworzeniu aplikacji zmontowałem krótki film dot. aplikacji. Do obejrzenia poniżej:

Nagrody

Nagrody dla najlepszych są bardzo obfite i jest ich dużo, więc cień szansy jest, pewnie na jakąś smycz 😄

Vimium — plugin do Twojej przeglądarki

Piotr Kowalski — Fri, 23 Jan 2015 00:00:00 +0000

Nawigacja kartą, a nawet całą przeglądarką za pomocą skrótów, które znamy z Vima? Tak jest to możliwe! Vimium - to o nim mówię. Plugin do przeglądarki Google Chrome na licencji MIT.

Polecam obejrzeć prezentację możliwości: youtube.com/watch?v=t67Sn0RGK54. Autor pokazuje na prostym przykładzie zakupu książki na Amazinie jak to zrobić nie odrywając rąk od klawiatury. Posługuje się tylko skrótami jakie Vimium udostępnia.

Nie używam Google Chrome - co teraz?

Plugin jest również dostępny na inne przeglądarki, jak Mozilla Firefox. Link znajdziesz pod koniec artykułu. Opera ze względu, że od jakiegoś czasu jest rozwijana w oparciu o Chromium, to możemy instalować te same paczki co w Google Chrome. Wystarczy zainstalować wtyczkę: “Download Chrome Extension”, która umożliwi dodanie przycisku “Dodaj do Opera” w sklepie chrome.google.com/webstore.

Dlaczego polecam?

Przeglądanie internetu za pomocą skrótów jest rewelacyjne, nie marnujesz czasu na np. otworzenie nowej karty w tylko korzystasz ze skrótu ctrl+T i gotowe.

Równie dobrze, zamykanie karty. Zamiast szukać małej ikonki do zamknięcia przeglądarki, następnie sięgnięcie ręką po myszkę i trafienie w ikonkę może być zastąpione prostym skrótem klawiaturowym ctrl+w. I tak przykładów można wymieniać.

Kolejnym bardzo częstym zabiegiem podczas czytania artykułów w sieci jest skrolowanie. Za pomocą myszki pomoże kółeczko. Co jeśli nie chcemy używać myszki, albo jej po prostu nie mamy? Gdy ktoś korzysta z przenośnych komputerów jest w stanie zastąpić myszkę touchpadem. Nie każdemu odpowiada skrolowanie poprzez ten wynalazek, dlatego też można w ostateczności przewijać strzałkami klawiatury. Na MacBookach strzałeczki, są na skraju klawiatury i korzystanie z nich nie jest wygodniejsze niż wciskanie klawiszy z literkami.

Gdy już mamy zainstalowany plugin, to przewijanie do dołu (o pół ekranu) realizuje za pomocą klawisza d a do góry u. Dlatego też ten plugin mi się podoba. Nie muszę odrywać rąk z klawiatury, a jednak mogę w pełni korzystać z przeglądarki.

Proste i wygodne

Problem ze skrótami jaki znalazłem objawia się gdy w przeglądarce otworzymy np. plik pdf. Wtedy skróty nie działają. Proces programu obsługującego pliki pdf przejmuje kontrolę nad obsługą klawiatury.

Bibliografia

Strona główna projektu to: vimium.github.io/
Wersja na Firefox: https://addons.mozilla.org/pl/firefox/addon/vimium/
Repozytorium pluginu na Google Chrome: github.com/philc/vimium
Repozytorium pluginu na Firefox: https://code.google.com/p/vimium-firefox/
Repozytorium pluginu na Safari: github.com/guyht/vimari

Divshot vs GitHub — jako hosting do projektów webowych

Piotr Kowalski — Tue, 20 Jan 2015 00:00:00 +0000

Od kilku dni testuje Divshot. Narzędzie, które zostanie wykorzystane przy deploymencie aplikacji podczas zbliżającego się hackathon-u 2015.staticshowdown.com.

Deployment moich czysto webowych aplikacji polegał na wykorzystaniu GitHub-a. Czyżby czas na zmianę?

GitHub

Często do swoich aplikacji wykorzystuje GitHub Pages aby kod aplikacji upublicznić.

Deployment aplikacji jest bardzo prosty wystarczy wgrać zmiany na origin/gh-pages i po chwili (Cache GitHub-a) mamy naszą aplikację na tzw. produkcji.

Divshot

Ciekawość mnie zżera na czym może polegać hosting Front-end-owy. Przecież bez hosting silnie wiąże się częścią aplikacji po stronie serwera. Zobaczmy czym się charakteryzuje taki hosting.

Wady i zalety

	GitHub	Divshot
Hosting z 3 trybami dostępu: dla developera, staging (czyli taka preprodukcja) oraz produkcja	-	+
Blokowanie dostępu za pomocą HTTP Authentication	+ (poprzez plik w projekcie)	+ (wyklikujemy przy danej trybie dostępu lub `divshot protect [env] [user:pass]`)
Automatycznie tworzy się subdomena	+ (github.io)	+ (divshot.io)
Zarządzanie wersjami	+ (Tak jak zarządzanie rewizjami w projekcie. Niby jest, ale ma bardzo mocny wpływ na kod w repozytorium.)	+ (Bardzo ładne zarządzani releasami. Możliwość rollback-a do poprzedniej wersji.)
Możliwości konfiguracji projektu	+ (_config.yml)	+ (divshot.json)
Potrzebny dodatkowy soft	+ (Tylko Git)	- (node, npm, divshot-cli)
Dodatkowe gałęzie w projekcie	- (Branch: gh-pages)	+ (Nic nie trzeba)
Customowa domena	+ (Plik: CNAME)	+ (Polecenie: divshot domains:add www.example.net)
URL z poprzednimi wersjami	-	+ (Np.: v25.my-app-name.production.divshot.io)
Włączony HTTPS	+	- (Trzeba dokupić)
Współpracownicy	+ (Bez limitu)	+ (Bez limitu)
Webhooks	+ (Polecenie: divshot hooks:add http://example.com/my/hook)	+ (Długa lista predefiniowanych)
Jekyll	+	+

Podsumowanie

Wygląda to tak, jeśli chcemy wypchnąć nasz projekt w świat, aby sobie leżał bez większego nakładu pracy w jego utrzymanie, to GitHub Pages będzie lepszym rozwiązaniem.

Jeśli jednak będziemy rozwijać ten projekt, albo jest on dla nas bardzo cenny z jakiegoś punktu widzenia i martwi nas jaka wersja jest obecnie na produkcji, a jaka na stagingu, to lepszym rozwiązaniem jest Divshot.

Bibliografia

GitHub
- github.com
- help.github.com
Divshot
- divshot.com
- docs.divshot.com/guides/getting-started

Narzędzia Świata: pokemon-picker

Piotr Kowalski — Mon, 19 Jan 2015 00:00:00 +0000

Jaka radość we mnie się pojawiła, kiedy zauważyłem w dniu wczorajszy w późnych godzinach nocnych pierwszą prośbę o zaakceptowanie zmian w projekcie: pokemon-picker.

…a wszystko to, dzięki mojemu lightning-owi podczas WarsawJS Meetup #5. Przynajmniej tak mi się wydaje! 😄

Developerem zgłaszającym był mój kolega @adamminiuk.

Ale co to jest?

Spieszę z wyjaśnieniem. Dosyć często kiedy do głowy wpadnie mi pomysł na projekt, czy to jakieś narzędzie, czy ciekawą grę, to mam problem z nazewnictwem…

Postanowiłem więc, napisać projekt który będzie mi generował nazwę do innych. Chciałem, żeby to był jakiś “wybieracz” z wcześniej zdefiniowanej listy nazw, które akceptuje. Nie chciałem, żeby mi doklejał spółgłoski do samogłosek i w ten sposób generował jakąś dziwną nazwę.

W stylu:

Azubela
Pakobywa

Chciałem, żeby to były nazwy, które z czymś mi się kojarzą, a że w dzieciństwie się oglądało to teraz można wykorzystać ten czas spędzony przed telewizorem.

Użycie

# install globally
npm install -g pokemon-picker

# choose random pokemon
pokemon-picker

Ostatnie polecenie powinno zwrócić coś w stylu:

{
    name: 'Talonflame',
    types: [ 'Fire', 'Flying' ],
    index: 672
}

Podsumowanie

Warto chwalić się pomysłami, bo społeczność czuwa i nie wiadomo kiedy przyjdzie taki moment, w którym dostaniesz wsparcie od obcych osób.

WRUG styczniowy o rrd-tool, sztuce i organizowaniu projektów

Piotr Kowalski — Wed, 14 Jan 2015 00:00:00 +0000

Dziś wybrałem się na kolejny w tym tygodniu event, a mianowicie WRUG.

Warsaw Ruby Users Group (WRUG)

Talk #1: RRDTool

Pierwsza prelekcja nt. RRD (Round Robin Database) czyli o bazie danych która się nie rozszerza. Jest sztywna liczba zadeklarowanych komórek w które można wprowadzić dane, a kiedy danych będzie więcej niż jest miejsca w bazie danych, każda kolejna wartość nadpisze te wprowadzone na samym początku.

Dla mnie mechanizm tej bazy jest bardzo podobny do kolejki FIFO. Czyli pierwszy element który zostanie zapisany, zostaje wyrzucony (zastąpiony) danymi na końcu, tj. kiedy baza już będzie pełna.

Prezentację poprowadził Kamil “y3ti” Grabowski z Rebased.

Więcej nt. RRDTool

Oryginalna prezentacja: slideshare.net/y3ti/rrdtool-ruby-dsl-rrdffi
Strona domowa: oss.oetiker.ch/rrdtool/

•

Talk #2: Sztuka w programowaniu

To był mój pierwszy talk o sztuce w programowaniu jaki dane mi było wysłuchać. Nigdy nie sądziłem, że tak można myśleć o programowaniu jak o sztuce.

Marta przedstawiła, że w 2004 roku, ktoś wpadł na pomysł wpuszczenia całego kodu jądra linux-a do syntezatora mowy. Gdyby ktoś chciał wówczas przesłuchać całego kodu napisanego w C oraz w Perlu musiałby spędzić około 2 lata na tym 😄

Dodatkowo dowiedzieliśmy się o kilku językach, które nie mają zastosowania komercyjnego. Wśród nich jest tzw. Brainfuck.

Prezentację poprowadziła Marta “ameba” Paciorkowska z 3ofcoins.

•

Talk #3: Organizacja projektów informatycznych

Ostatni talk na spotkaniu dotyczył prowadzenia projektów. Jarek zaczął omawiać od wskazywania błędów w projekcie github.com/discourse/discourse, a dokładnie, struktura katalogów była bardzo słaba. Wszelkie warstwy aplikacji były wymieszane.

Najciekawszym wg mnie był slajd dotyczący tworzenia nowego projektu:

Jeśli naprawdę jesteś przekonana/przekonany, że masz świetny pomysł, to:
 - Wydziel osobne repozytorium
 - "Zaprogramój" swój pomysł
 - Dokładnie udokumentuj przynajmniej cały zewnętrzny interfejs tego programu
 - Udostępnij projekt jako Open Source
 - Przekonaj trzy niepodległe Ci osoby do jego używania
 - Przekonaj się, że nikt nie chce tego używać
 - Usuń to repozytorium i ogarnij się.

Prezentację poprowadził Jarosław “Sztywny” Rzeszótko z Holtzbrinck Ventures.

Podsumowanie

Kolejne spotkanie WRUG było dla mnie bardzo pozytywne. Dowiedziałem się, dużo ciekawych rzeczy nt. RRDTool oraz prowadzenia projektów (utrzymania, czy też zarządzania). Dodatkowo, Marta zaszczepiła w mojej głowie myśl, że programowanie to nie tylko pisanie kodu, ale też swego rodzaju sztuka.

Więcej znajdziesz tutaj: wrug.eu/2015/01/11/spotkanie-styczniowe/

WarsawJS Meetup #5

Piotr Kowalski — Tue, 13 Jan 2015 00:00:00 +0000

W najbliższy piątek, 16 stycznia, odbędzie się WarsawJS Meetup #5.

Miejsce to jak zwykle Państwomiasto ul. Andersa 29. Zaczynamy o 18:30!

Invitation

Zapraszam w imieniu organizatorów WarsawJS.

Zapisujcie się na:

naszym Fanpage: facebook.com/events/1514722635461938/
oraz na Meetup meetup.com/WarsawJS/events/219535591/

Do zobaczenia w piątek!

•

Talk #1: Co potrafi SVG? Dariusz Biedrzycki

Link do prelekcji: https://www.youtube.com/watch?v=n8O7l8zZ4Mg

•

Talk #2: Games development for Smart TV Kamil Kiełbasa

Link do prelekcji: https://www.youtube.com/watch?v=07fgNHVdF3A

•

Talk #3: Functional and reactive programming techniques, patterns and tools on the Front-end [EN] Piotr Klibert

Link do prelekcji: https://www.youtube.com/watch?v=m09RWtt5nd8

•

[Aktualizacja]

Dziękuję serdecznie wszystkim za przybycie. Zapraszam do galerii zdjęć:

meetup.com/WarsawJS/photos/25852054/

Golang Warsaw #2

Piotr Kowalski — Mon, 12 Jan 2015 00:00:00 +0000

Dziś odbyło się drugie spotkanie Golang Warsaw. Jest to nowa organizacja w naszym mieście (dopiero drugie spotkanie w systemie comiesięcznym). Wiodącym językiem Go.

Będzie to moje pierwsze spotkanie z ludźmi pracującym w tym języku. Nie ukrywam, że chciałbym dowiedzieć się czegoś o tym nowym, tak mocno reklamowanym języku.

Godzina 18:15 - Zaczynamy!

Talk #1: Testowanie w Go

Pierwsza prelekcja - Tomasz Grodzki (github.com/tg) opowiedział o testowaniu aplikacji napisanym w Go. Miałem nadzieje, że dowiem się czegoś o testowaniu oraz debugowaniu aplikacji.

Tomek powiedział, że w Go można łatwo pisać aplikację na wielu procesorach, ze względu na to, że ma dzielone wątki. Go ma wiele wbudowanych rzeczy, m. in. biblioteka pomocna w testach (testing).

Testowanie kodu napisanego w Go

Pisanie pierwszego testu: do danego pliku dodajemy na końcu: _test.go.

Pierwsza metoda:

package party

import "testing"

func TestBeer(t * testing.T) {
    if !FridgeContains("beer") {
        t.Fatal("expected some cold beer");
    }
}

Druga metoda (from outside):

package part_test

import (
    "testing"
    "rihanna.com/party"
)

func TestBeer(t *testing.T) {
    if !party.FridgeContains("beer") {
        t.Fatal("expected some cold beer");
    }
}

Uruchomienie testów

go test .
go test rihanna.com/party
go test ./... # odpala wszystkie testy w głąb

testing.T - nasze magiczne ‘t’. Biblioteka pomocna w testach. Zawiera mnóstwo metod tj: Error, Errorf, Fail, FailNow, Failed, Fatal, Fatalf, Log, Logf, Parallel, Skip, SkipNow, Skipf, Skipped.

Logi pokazują się tylko w przypadku kiedy dany test nie przeszedł. Jeśli uruchomimy testy w parametrem verbose, pokażemy wszystkie logi (nawet w tych testach które przeszły).

Testy z parallel będą się uruchamiały jednocześnie.

Examples - część testu

func ExampleHandsUp() {
fmt.PrintLn(HandsUp("o o o")
    // Output:
    // \o/ \o/ \o/
}

func Example() // package
func ExampleF() // function
func ExampleT() // type
func ExampleT_M() // method

func Example*_xyz() // more...

Dokumentacja

go doc -ex=true . # budowanie dokumentacji

Narzędzie to potrafi postawić webserwer oraz wygenerować dokumentację HTML.

Trzeci rodzaj testów to benchmarks.

func BenchmarkHeadSpin(b *testing.B) {
    for i := 0; i < b.N; i++ {
        HeadSpin()
    }
}

Uruchamiamy je za pomocą:

go test -bench . # ta kropka to wyrażenie regularne

go test sam sobie dopiera ile iteracji ma zrobić w ciągu zadanego okresu czasowego. Parametr benchtime zmienia ten okres czasu.

testing.B = testing.T + (ReportAllocs, ResetTimer, RunParallel, SetBytes, SetParallelism, StartTimer, StopTimer)

ReportAllocs - raportuje alokację pamięci

Więcej kontroli

// since go 1.4
func TestMain(m *testing.M) {
    os.Exit(m.Run())
}

Tyle odnośnie podstaw testowania

Jeśli do go test przekażesz flagę, której go test nie rozpozna przekaże te parametry do MainTest.

W bibliotece standardowej mamy kilka rzeczy, które ułatwiają testowanie:

net/httptest
testing/iotest - do testowania wejścia / wyjścia
testing/quick - do testowania: generuje losowe argumenty naszej funkcji

net / httptest

httptest.ResponseRecorder
httptest.Server - automatycznie nasłuchuje na localhost z wybranym przez system porcie, oraz zwraca nam URL do siebie

testing / iotest

iotest.DataErrReader
iotest.TimeoutReader - za drugim razem gdy będzie czytał, zwróci iotest.ErrTimeout
HalfRead - czyta dane do połowy - pomocne do testowania, co się stanie, jeśli nasza fn dostanie mniej danych niż się spodziewa
OneByteReader - czy nasz fn radzi sobie ze skrajnymi wartościami
TruncateWrite - zapisze przekazaną liczbę bajtów, ale poinformuje, że zapisał komplet danych - taka oszukańcza fn 😄

testing / quick

Black box testing
Generuje losowe ciągi znaków
quickCheck and quick.CheckEqual
inspirowana QuickCheck z Haskell-a

Reflect - dość skomplikowana biblioteka do losowania wartości - więcej golang.org/pkg/reflect/

quick.Config

type Config struct {
    // Set max number of iterations
    MaxCount int

    // Scale max number of iterations
    MaxCountScale flaot64

    // Source of random number
    Rand *rand.Rand

    // Generator of values
    Values func ([]reflect.Value, *rand.Rand)
}

Polecane narzędzia

go vet - sprawdza popularne błędy w kodzie
-race flag - stara się wykryć kiedy używamy zmienny z różnych go routings
Go bardzo lubi interfejsy, powinniśmy korzystać z nich, ponieważ lepiej się potem testuje

Profile

go test pozwala zapisywać wynik do pliku.

go test -covertprofile cover.out
go test -cpuprofile cpu.out
go test -memprofile mem.out

Nie działa to na OSX: github.com/golang/go/issues/6047

Pokrycie kodu

go test -cover

# prezentacja na stronie internetowej
go test -coverprofile=c.pro
go test cover -html=c.pro

Referencje

golang.org/pkg/testing
blog.golang.org
go help test
go help testflag

•

Talk #2

Była tylko jedna prelekcja, niestety, ze względu na chorobę drugiego prelegenta.

Do zobaczenia na następnym Golang!

WarsawJS Meetup #4

Piotr Kowalski — Thu, 18 Dec 2014 00:00:00 +0000

W miniony poniedziałek odbyło się już #4 spotkanie organizacji WarsawJS.

Invitation

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Zastosowanie JavaScript (Node.js) w robotyce Marcin Borkowski

Marcin poprowadził około 50 minutową prezentację na temat Cylon.js (cylonjs.com).

Link do prelekcji: https://www.youtube.com/watch?v=ezTbTL45cIE

•

Talk #2: Large Applications Routing Using AngularJS UI-Router [EN] Piotr Błaszczak

Piotr opowiedział o routingu w AngularJS.

Link do prelekcji: https://www.youtube.com/watch?v=Gr1VjSjtAdQ

•

Talk #3: What RESTful API is not Tomasz Skowroński

Ostatnią prelekcje poprowadził Tomasz Skowroński który opowiedział o REST i wyjaśnił jaka jest różnica między REST a CRUD.

Link do prelekcji: https://www.youtube.com/watch?v=96Y5_A3dZAE

Zdjęcia

Zdjęcia ze spotkania dostępne pod adresem: meetup.com/WarsawJS/photos/25801548/

WarsawJS Meetup #3

Piotr Kowalski — Thu, 13 Nov 2014 00:00:00 +0000

Kolejna edycja WarsawJS już wkrótce. To już 3-cie spotkanie! Tym razem wszystkie prelekcje po polsku!

Invitation

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: Wzorce projektowe dla aplikacji enterprise w Node.js Konrad Kowalski / Robert Kawecki

Link do prelekcji: https://www.youtube.com/watch?v=6HS2nvf7BAI

•

Talk #2: Tworzenie kartograficznych wizualizacji danych z wykorzystaniem LeafletJS oraz OpenStreetMap Wiktor Niesiobędzki

Link do prelekcji: https://www.youtube.com/watch?v=SYquJ5c6p5w

•

Talk #3- AngularJS pierwsze kroki Dariusz Kalbarczyk / Arkadiusz Kalbarczyk

Link do prelekcji: https://www.youtube.com/watch?v=bmrF56-9iyA

Jak wyłączyć reklamy w systemie?

Piotr Kowalski — Sat, 01 Nov 2014 00:00:00 +0000

Swego czasu miałem problem, że we wszystkich programach np. Gadu-Gadu miałem przyjemność oglądania reklam. Na początku dałem sobie pewny czas - może się przyzwyczaję?

Jednak po kilku dniach dałem sobie spokój i zacząłem poszukiwania w sieci. Natknąłem się na obszerną listę adresów i domen, które są głównymi reklamodawcami.

Jeśli więc, nie chcesz dać zarobić reklamodawcom użyj listy załączonej na końcu tego posta. Listę musisz dodać do swojego pliku hosts. Jest to ważny plik w systemie, w którym możesz ustawić swoje ścieżki sieciowe.

W tym przypadku, kierujemy wszystkie niżej wymienione serwisy na swój komputer (127.0.0.1). Dzięki temu, zapytania po reklamy będą uderzały w nasz komputer, na którym (prawdopodobnie) nie będziesz miał plików graficznych (flash-owych) z reklamami.

Gdzie jest plik hosts?

Plik hosts w różnych systemach znajduje się w innym miejscu:

Window: C:\Windows\System32\drivers\etc\hosts
Linux: /etc/hosts
macOS: /private/etc/hosts

Lista z serwisami reklamodawców

0.0.1  hit.gemius.pl
0.0.1  activeby.hit.gemius.pl
0.0.1  ad.hit.gemius.pl
0.0.1  adactiongapl.hit.gemius.pl
0.0.1  adclick.hit.gemius.pl
0.0.1  adlt.hit.gemius.pl
0.0.1  adnet.hit.gemius.pl
0.0.1  advice.hit.gemius.pl
0.0.1  advicead.hit.gemius.pl
0.0.1  arbo.hit.gemius.pl
0.0.1  allegro.hit.gemius.pl
0.0.1  centrumcz.hit.gemius.pl
0.0.1  cz.hit.gemius.pl
0.0.1  delfilv.hit.gemius.pl
0.0.1  eniro.hit.gemius.pl
0.0.1  gaat.hit.gemius.pl
0.0.1  gabg.hit.gemius.pl
0.0.1  gadk.hit.gemius.pl
0.0.1  gadnet.hit.gemius.pl
0.0.1  gail.hit.gemius.pl
0.0.1  garu.hit.gemius.pl
0.0.1  gask.hit.gemius.pl
0.0.1  gazeta.hit.gemius.pl
0.0.1  gdecz.hit.gemius.pl
0.0.1  gg.hit.gemius.pl
0.0.1  idg.hit.gemius.pl
0.0.1  hr.hit.gemius.pl
0.0.1  hu.hit.gemius.pl
0.0.1  idm.hit.gemius.pl
0.0.1  intao.hit.gemius.pl
0.0.1  interia.hit.gemius.pl
0.0.1  kon.hit.gemius.pl
0.0.1  lt.hit.gemius.pl
0.0.1  o2.hit.gemius.pl
0.0.1  onet.hit.gemius.pl
0.0.1  opt.hit.gemius.pl
0.0.1  pracuj.hit.gemius.pl
0.0.1  pro.hit.gemius.pl
0.0.1  rbcgaru.hit.gemius.pl
0.0.1  seznam.hit.gemius.pl
0.0.1  spir.hit.gemius.pl
0.0.1  st.hit.gemius.pl
0.0.1  st1.hit.gemius.pl
0.0.1  std1.hit.gemius.pl
0.0.1  stua.hit.gemius.pl
0.0.1  ua.hit.gemius.pl
0.0.1  vbadbg.hit.gemius.pl
0.0.1  webgroundadbg.hit.gemius.pl
0.0.1  wp.hit.gemius.pl
0.0.1  adserver.gadu-gadu.pl
0.0.1  adsearch.wp.pl
0.0.1  adv.wp.pl
0.0.1  badv.wp.pl
0.0.1  dot.wp.pl
0.0.1  rek.www.wp.pl
0.0.1  interia.nuggad.net
0.0.1  kropka.onet.pl
0.0.1  reklama.onet.pl
0.0.1  onet.hit.stat.pl
0.0.1  tracker.adtaily.pl
0.0.1  yahoo-analytics.net
0.0.1  yahoo.ivwbox.de
0.0.1  adserver.yahoo.com
0.0.1  ae.adserver.yahoo.com
0.0.1  au.adserver.yahoo.com
0.0.1  cn2.adserver.yahoo.com
0.0.1  hk.adserver.yahoo.com
0.0.1  in.adserver.yahoo.com
0.0.1  us.adserver.yahoo.com
0.0.1  pn1.adserver.yahoo.com
0.0.1  pn2.adserver.yahoo.com
0.0.1  tw2.adserver.yahoo.com
0.0.1  bc-beta.ads.yahoo.com
0.0.1  srv1.wa.marketingsolutions.yahoo.com
0.0.1  srv2.wa.marketingsolutions.yahoo.com
0.0.1  srv3.wa.marketingsolutions.yahoo.com
0.0.1  ts.richmedia.yahoo.com
0.0.1  adjax.flickr.yahoo.com
0.0.1  nz.adserver.yahoo.com
0.0.1  sg.adserver.yahoo.com
0.0.1  br.adserver.yahoo.com
0.0.1  cn.adserver.yahoo.com
0.0.1  tw.adserver.yahoo.com
0.0.1  be.adserver.yahoo.com
0.0.1  dk.adserver.yahoo.com
0.0.1  fr.adserver.yahoo.com
0.0.1  nl.adserver.yahoo.com
0.0.1  se.adserver.yahoo.com
0.0.1  uk.adserver.yahoo.com
0.0.1  de.adserver.yahoo.com
0.0.1  es.adserver.yahoo.com
0.0.1  gr.adserver.yahoo.com
0.0.1  it.adserver.yahoo.com
0.0.1  no.adserver.yahoo.com
0.0.1  ar.adserver.yahoo.com
0.0.1  ca.adserver.yahoo.com
0.0.1  cookex.amp.yahoo.com
0.0.1  launch.adserver.yahoo.com
0.0.1  mx.adserver.yahoo.com
0.0.1  ads.bloomberg.com
0.0.1  ads.euronews.net
0.0.1  ads.miniclip.com
0.0.1  ads.soft32.com
0.0.1  ads.tweakxp.com
0.0.1  adserver.adreactor.com
0.0.1  www.adsedo.com
0.0.1  ads.today.com
0.0.1  ad.ntvmsnbc.com
0.0.1  msncheck.41m.com
0.0.1  www.msn-firewall.com
0.0.1  www.msn-proxy.com
0.0.1  ninemsn.imrworldwide.com
0.0.1  a.ads2.msn.com
0.0.1  ads2.msn.com
0.0.1  analytics.msn.com
0.0.1  ac2.msn.com
0.0.1  analytics.r.msn.com
0.0.1  msnads-wm9.fplive.net
0.0.1  0.r.msn.com
0.0.1  ads.msn.com
0.0.1  ads1.msn.com
0.0.1  a.ads1.msn.com
0.0.1  b.ads1.msn.com
0.0.1  ads.eu.msn.com
0.0.1  ads.ninemsn.com.au
0.0.1  direct.ninemsn.com.au
0.0.1  arc2.msn.com
0.0.1  arc3.msn.com
0.0.1  arc9.msn.com
0.0.1  popup.msn.com
0.0.1  a.rad.msn.com
0.0.1  b.rad.msn.com
0.0.1  rmads.msn.com
0.0.1  rmads.eu.msn.com
0.0.1  adsyndication.msn.com
0.0.1  msnap.adbureau.net
0.0.1  agmsnag.112.2o7.net
0.0.1  cbmsn.112.2o7.net
0.0.1  msna1com.112.2o7.net
0.0.1  msnaccountservices.112.2o7.net
0.0.1  msnbcom.112.2o7.net
0.0.1  msnbc.112.2o7.net
0.0.1  msneshopbase.112.2o7.net
0.0.1  msninvite.112.2o7.net
0.0.1  msninviteprod.112.2O7.net
0.0.1  msnlivefavorites.112.2o7.net
0.0.1  msnmercom.112.2o7.net
0.0.1  msnmercustacqprod.112.2o7.net
0.0.1  msnonecare.112.2o7.net
0.0.1  msnportalaffiliate.112.2o7.net
0.0.1  msnportalaunews.112.2O7.net
0.0.1  msnportalbeetoffice2007.112.2o7.net
0.0.1  msnportalhome.112.2O7.net
0.0.1  msnportalgame.112.2O7.net
0.0.1  msnportallatino.112.2O7.net
0.0.1  msnportalmsgboardsrvc.112.2O7.net
0.0.1  msnportalvideo.112.2o7.net
0.0.1  msntrademarketing.112.2o7.net
0.0.1  msnportal.112.2o7.net
0.0.1  msnportallive.112.2O7.net
0.0.1  msnservices.112.2o7.net
0.0.1  sympmsnglobalen.112.2o7.net
0.0.1  sympmsnmusic.112.2o7.net
0.0.1  ccc01.opinionlab.com #[msn.com]
0.0.1  autos.msnbc.us.intellitxt.com
0.0.1  business.msnbc.us.intellitxt.com
0.0.1  news.msnbc.us.intellitxt.com
0.0.1  sports.msnbc.us.intellitxt.com
0.0.1  technology.msnbc.us.intellitxt.com
0.0.1  travel-and-weather.msnbc.us.intellitxt.com
0.0.1  entertainment.msn.us.intellitxt.com
0.0.1  tomsnetworking.us.intellitxt.com
0.0.1  msn.ivwbox.de
0.0.1  cm.au.msn.overture.com
0.0.1  anon.doubleclick.speedera.net
0.0.1  ad.doubleclick.net
0.0.1  ad-g.doubleclick.net
0.0.1  ad2.doubleclick.net
0.0.1  ad-yt-bfp.doubleclick.net
0.0.1  ad.3ad.doubleclick.net
0.0.1  ad.3au.doubleclick.net
0.0.1  ad.adx.doubleclick.net
0.0.1  ad.ae.doubleclick.net
0.0.1  ad.ar.doubleclick.net
0.0.1  ad.au.doubleclick.net
0.0.1  ad.be.doubleclick.net
0.0.1  ad.br.doubleclick.net
0.0.1  ad.ca.doubleclick.net
0.0.1  ad.ch.doubleclick.net
0.0.1  ad.cl.doubleclick.net
0.0.1  ad.cn.doubleclick.net
0.0.1  ad.de.doubleclick.net
0.0.1  ad.dk.doubleclick.net
0.0.1  ad.es.doubleclick.net
0.0.1  ad.fi.doubleclick.net
0.0.1  ad.fr.doubleclick.net
0.0.1  ad.gr.doubleclick.net
0.0.1  ad.hk.doubleclick.net
0.0.1  ad.hu.doubleclick.net
0.0.1  ad.ie.doubleclick.net
0.0.1  ad.in.doubleclick.net
0.0.1  ad.jp.doubleclick.net
0.0.1  ad.kr.doubleclick.net
0.0.1  ad.it.doubleclick.net
0.0.1  ad.nl.doubleclick.net
0.0.1  ad.no.doubleclick.net
0.0.1  ad.nz.doubleclick.net
0.0.1  ad.pl.doubleclick.net
0.0.1  ad.pt.doubleclick.net
0.0.1  ad.ro.doubleclick.net
0.0.1  ad.ru.doubleclick.net
0.0.1  ad.se.doubleclick.net
0.0.1  ad.sg.doubleclick.net
0.0.1  ad.terra.doubleclick.net
0.0.1  ad.th.doubleclick.net
0.0.1  ad.tw.doubleclick.net
0.0.1  ad.uk.doubleclick.net
0.0.1  ad.us.doubleclick.net
0.0.1  ad.za.doubleclick.net
0.0.1  ad.n2434.doubleclick.net
0.0.1  ad-emea.doubleclick.net
0.0.1  amn.doubleclick.net
0.0.1  creatives.doubleclick.net
0.0.1  dfp.doubleclick.net
0.0.1  feedads.g.doubleclick.net
0.0.1  fls.doubleclick.net
0.0.1  fls.uk.doubleclick.net
0.0.1  googleads.g.doubleclick.net
0.0.1  ir.doubleclick.net
0.0.1  iv.doubleclick.net
0.0.1  ln.doubleclick.net
0.0.1  m.doubleclick.net
0.0.1  m2.doubleclick.net
0.0.1  m.us.doubleclick.net
0.0.1  motifcdn.doubleclick.net
0.0.1  motifcdn2.doubleclick.net
0.0.1  n3285ad.doubleclick.net
0.0.1  n3349ad.doubleclick.net
0.0.1  n4052ad.doubleclick.net
0.0.1  n4061ad.doubleclick.net
0.0.1  n4061ad.fr.doubleclick.net
0.0.1  n4403ad.doubleclick.net
0.0.1  n479ad.doubleclick.net
0.0.1  n609ad.doubleclick.net
0.0.1  optout.doubleclick.net
0.0.1  optimize.doubleclick.net
0.0.1  paypalssl.doubleclick.net
0.0.1  pubads.g.doubleclick.net
0.0.1  rd.intl.doubleclick.net
0.0.1  se1.doubleclick.net
0.0.1  s2.video.doubleclick.net
0.0.1  doubleclick.ne.jp
0.0.1  www3.doubleclick.net
0.0.1  www.doubleclick.net
0.0.1  doubleclick.com
0.0.1  ad.doubleclick.com
0.0.1  www2.doubleclick.com
0.0.1  www3.doubleclick.com
0.0.1  www.doubleclick.com
0.0.1  googleads2.g.doubleclick.net
0.0.1  securepubads.g.doubleclick.net
0.0.1  cm.g.doubleclick.net
0.0.1  doubleclick.shockwave.com
0.0.1  www3.webhostingtalk.com
0.0.1  ad.mirror.co.uk
0.0.1  host3.adhese.be
0.0.1  1.googlenews.xorg.pl
0.0.1  2.googlenews.xorg.pl
0.0.1  3.googlenews.xorg.pl
0.0.1  4.googlenews.xorg.pl
0.0.1  5.googlenews.xorg.pl
0.0.1  feedads.googleadservices.com
0.0.1  imageads.googleadservices.com
0.0.1  google.tucows.com
0.0.1  adservices.google.com
0.0.1  video-stats.video.google.com
0.0.1  ad.adconsole.com
0.0.1  ad.ad-flow.com
0.0.1  ad.admediaprovider.com
0.0.1  ad.adnetinteractive.com
0.0.1  ad2.adnetinteractive.com
0.0.1  ad.adperium.com
0.0.1  ad.adserverplus.com
0.0.1  ad.advertise.com
0.0.1  ad.antventure.com
0.0.1  f.j.r.cltomedia.info
0.0.1  cltomedia.info
0.0.1  clicktorrent.info
0.0.1  ads.ero-advertising.com
0.0.1  adspaces.ero-advertising.com
0.0.1  api.ero-advertising.com
0.0.1  apo.ero-advertising.com
0.0.1  banners.ero-advertising.com
0.0.1  data.ero-advertising.com
0.0.1  layerads.ero-advertising.com
0.0.1  speedclicks.ero-advertising.com
0.0.1  thumbs.ero-advertising.com
0.0.1  opera1-servedby.advertising.com
0.0.1  home.hit.stat.pl
0.0.1  onet.hit.stat.pl
0.0.1  s1.hit.stat.pl
0.0.1  s2.hit.stat.pl
0.0.1  s3.hit.stat.pl
0.0.1  s4.hit.stat.pl
0.0.1  sisco.hit.stat.pl
0.0.1  survey.112.2o7.net
0.0.1  survey.122.2o7.net
0.0.1  adserver.aol.fr
0.0.1  ads.aol.co.uk
0.0.1  ads.web.aol.com
0.0.1  ads.newline.aol.com
0.0.1  o.sa.aol.com
0.0.1  s.sa.aol.com
0.0.1  banners.adultfriendfinder.com
0.0.1  ads.adultfriendfinder.com
0.0.1  adserver.adultfriendfinder.com
0.0.1  banners.adultfriendfinder.com
0.0.1  geobanner.adultfriendfinder.com
0.0.1  iframe.adultfriendfinder.com
0.0.1  ad.moscowtimes.ru
0.0.1  ads.nytimes.com
0.0.1  ads.tripod.lycos.nl
0.0.1  ads.tripod.lycos.co.uk
0.0.1  ads.tripod.lycos.de
0.0.1  ads.tripod.lycos.es
0.0.1  ads.lycos.com
0.0.1  ads.tripod.spray.se
0.0.1  adidm.idmnet.pl
0.0.1  onet.hit.gemius.pl
0.0.1  imppl.tradedoubler.com
0.0.1  reklama.onet.pl
0.0.1  www.promotion.pl
0.0.1  realbannerads.com
0.0.1  adserver.o2.pl
0.0.1  idm.hit.gemius.pl
0.0.1  a2.o2.pl
0.0.1  ad.media-servers.net
0.0.1  ad.firstadsolution.com
0.0.1  content.yieldmanager.com
0.0.1  clk.tradedoubler.com
0.0.1  ads3.forall.pl
0.0.1  popunder.paypopup.com
0.0.1  www.paypopup.com
0.0.1  paypopup.com
0.0.1  layer-ads.de
0.0.1  adserving.cpxinteractive.com
0.0.1  content.cpxinteractive.com
0.0.1  www.adbrite.com
0.0.1  adnet.hit.gemius.pl
0.0.1  s1.ad.adocean.pl
0.0.1  adultfriendfinder.com
0.0.1  alexx2.axelsfun.com
0.0.1  agoraua.adocean.pl
0.0.1  bg.adocean.pl
0.0.1  gg.adocean.pl
0.0.1  indexhu.adocean.pl
0.0.1  obozua.adocean.pl
0.0.1  s1.ad.adocean.pl
0.0.1  s1.advicepl.adocean.pl
0.0.1  s1.centrumcz.adocean.pl
0.0.1  s1.cz.adocean.pl
0.0.1  s1.czgde.adocean.pl
0.0.1  s1.gg.adocean.pl
0.0.1  s1.gojobsru.adocean.pl
0.0.1  s1.my.adocean.pl
0.0.1  s1.myao.adocean.pl
0.0.1  s1.pracuj.adocean.pl
0.0.1  s1.skgde.adocean.pl
0.0.1  s2.ad.adocean.pl
0.0.1  tmguua.adocean.pl
0.0.1  vbbg.adocean.pl
0.0.1  webgroundbg.adocean.pl
0.0.1  adview.pl
0.0.1  ad.adview.pl
0.0.1  ad.gazeta.pl

WarsawJS Meetup #2

Piotr Kowalski — Sun, 26 Oct 2014 00:00:00 +0000

Drugie spotkanie organizacji WarsawJS. Zapraszam do obejrzenia zapowiedzi oraz trzech prelekcji, które wydarzyły się podczas tego meetupu.

Invitation

Zapraszam w imieniu organizatorów WarsawJS.

•

Talk #1: What if we don’t have API? [EN] Tomasz Ducin

Link do prelekcji: https://www.youtube.com/watch?v=QJZtl6vZHvc

•

Talk #2: How do we structure code in Ember? [EN] Piotr Zientara

Link do prelekcji: https://www.youtube.com/watch?v=9XnNkGXnLX4

•

Talk #3: oAuth in JS Daniel Kopka

Link do prelekcji: https://www.youtube.com/watch?v=RyOiUpNSHxo

•

Talk #4: Samsung MultiScreen: let your mobile talk to your TV! [EN] Paweł Pruszkowski

Link do prelekcji: https://www.youtube.com/watch?v=26T7jX9zpDI

•

[Aktualizacja]

Dziękujemy za przybycie!

WarsawJS Meetup #1

Piotr Kowalski — Wed, 17 Sep 2014 00:00:00 +0000

16-09-2014 ta data zostanie na długo w mojej pamięci, z uwagi na pierwszy meetup jako organizator, ale też jako prelegent, przed tak dużą publicznością!

Invitation

W imieniu organizatorów WarsawJS serdecznie zapraszam na pierwsze spotkanie!

•

Talk #1: The future of JavaScript - ES6 Adam Babik

Link do prelekcji: https://www.youtube.com/watch?v=ONEctd3l3Lk

•

Talk #2: Ember for Multi Page applications Krzysztof Modras

Link do prelekcji: https://www.youtube.com/watch?v=TljZG9wUnXs

•

Talk #3: Commercial OpenStreetMap implementation Marcin Cimaszewski

Link do prelekcji: https://www.youtube.com/watch?v=J2Z4IRwZ3Jo

•

Talk #4: First app on Samsung Smart TV platform Piotr Kowalski

Link do prelekcji: https://www.youtube.com/watch?v=2ktpOVFQOe8

•

[Aktualizacja]

Dziękujemy za przybycie!

WarsawJS - Nowa organizacja w Warszawie 🎉

Piotr Kowalski — Sun, 15 Jun 2014 00:00:00 +0000

Z dniem 2014-06-15 rusza nowa organizacja pod nazwą WarsawJS

Razem z Krzysztofem Modrasem (@chrmod) oraz Marcinem Cimaszewskim (@mcimasz) podjęliśmy decyzję, że spróbujemy stworzyć organizację skupioną na języku JavaScript, której celem będzie dotarcie do programistów tego języka, głównie w stolicy naszego pięknego kraju - Warszawie.

Pytania i odpowiedzi

O to lista pytań skierowanych do organizatorów:

1) Dlaczego powstało WarsawJS? Czemu uznaliście że takie spotkania są potrzebne?

JavaScript to język internetu. Dzięki niemu istnieją wszystkie nowoczesne strony i aplikacje www. W ostatnich latach obserwujemy niesamowity rozwój w tej branży. Sieć się zmienia, aplikacje są szybsze, bardziej funkcjonalne, ciekawsze. JavaScript jest motorem tych zmian. Na Warszawskiej scenie istnieje wiele firm i niezależnych specjalistów, którzy tworzą produkty oparte o tą technologie na najwyższym, światowych poziomie. JavaScript rozprzestrzenia się również poza granice przeglądarki internetowej. Jest obecny jest w smartfonach, tabletach, smart tv, a nawet grach! Dla nas to wspaniały temat do dyskusji. Właśnie dlatego powstało WarsawJS.

2) Kogo zapraszacie na Wasze spotkania - czy macie jakiś klucz doboru uczestników?

Spotkania są otwarte i darmowe. Zapraszam wszystkich profesjonalistów i entuzjastów którzy mogą do nas dotrzeć. Staramy się, by szeroki wybór tematów zachęcał osoby o różnych specjalizacjach. Tym samym nie mamy modelowego odbiorcy. Najważniejsza jest otwartość uczestników i chęć dzielenia się wiedzą.

3) Co jest celem spotkań?

Celem WarsawJS jest integracja środowiska programistów JavaScript. Przekłada się to na dzielenie się informacjami o nowościach, testach jakie prowadzimy czy wdrożeniach.

Linki do profilu WarsawJS w sieciach społecznościowych:

Backbone.js: problem z unikalnymi właściwościami obiektowymi

Piotr Kowalski — Fri, 18 Apr 2014 00:00:00 +0000

W dniu dzisiejszym Backbone.js zaskoczył mnie kolejny raz. Niestety tym razem negatywnie…

Właściwości

Tworzenie “klas”, które dziedziczą po sobie właściwości jest czym naturalnym w Backbone. Nadpisywanie tychże właściwości jest równie proste. Przykład:

var AbstractWidget = Backbone.View.extend({
    template: 'foo.html',
});

var MenuWidget = AbstractWidget.extend({
    template: 'bar.html',
});

var v = new MenuWidget();
v.template; // bar.html

Niestety, takie działanie jest tylko do właściwości prymitywnych.

Problem

Inaczej sytuacja wygląda gdy mamy do czynienia z obiektami:

var AbstractWidget = Backbone.View.extend({});

var MenuWidget = AbstractWidget.extend({
    templateParams: {},

    initialize: function () {
        this.templateParams.id = _.uniqueId();
    },
});

var x = new MenuWidget();
var v = new MenuWidget();
x.templateParams.id; // 2
v.templateParams.id; // 2

Co ciekawe… gdy zamienimy kolejność wywołania ostatnich linijek:

var x = new MenuWidget();
x.templateParams.id; // 1

var v = new MenuWidget();
v.templateParams.id; // 2

// Ale gdy uruchamiamy następującą linię:
x.templateParams.id; // 2

Rozwiązanie

Problemy leży o podnóża działań JavaScript.

var AbstractWidget = Backbone.View.extend({});

var MenuWidget = AbstractWidget.extend({
    templateParams: {},

    initialize: function () {
        // czyścimy obiektowe właściwości
        this.templateParams = {};

        this.templateParams.id = _.uniqueId();
    },
});

var x = new MenuWidget();
var v = new MenuWidget();
x.templateParams.id; // 1
v.templateParams.id; // 2

Przedstawiam 2 bardzo ważne zasady programowaniu w JavaScript:

Wartości prymitywne string, number, boolean, null, undefined są przekazywane przez wartość.
Wartości obiektowe przez referencję!

Narzędzia Świata: more.js

Piotr Kowalski — Thu, 30 Jan 2014 00:00:00 +0000

Duże tabele danych z duża ilością tekstu w komórkach? Czytelność takich tabel pozostawia wiele do życzenia. Jeśli ten problem spotkał i Ciebie, jest na to proste rozwiązanie: more.js

Zasada działania

To proste narzędzie daj Ci zwarty układ tabelaryczny kosztem wyświetlenia całej zawartości komórki. Działa ona w ten sposób, że sprawdza każdą komórkę pod kątem długości w niej tekstu. Jeśli jest jego za dużo, skraca, do liczby znaków zdefiniowanych podczas inicjalizacji. Dodaje tym samym link “more” który po kliknięciu pokazuje całą zawartość komórki oraz dodaje link “less” aby móc przywrócić zawartość komórki do skróconej wersji.

Jak to wygląda w praktyce?

Przed zastosowaniem biblioteki:
Po zastosowaniu more.js lub po kliknięciu ‘less’ (collapse):
Po zastosowaniu more.js i kliknięciu ‘more’ (expand):

Jak skorzystać z more.js?

<script src="https://piecioshka.github.io/more/more.js"></script>
<script>
    new More('#big-table', 10);
</script>

Jak widać, najważniejsza jest konfiguracja:

selektor do tabeli - np. #big-table, table (wtedy mechanizm zostanie zastosowany na wszystkich tabelach na stronie)
dozwolona liczba znaków w komórce - np. 10, 20

Więcej

Demo: https://piecioshka.github.io/more.js/

Źródło: github.com/piecioshka/more

WRUG styczniowy o debugowaniu, Neo4j i Ember.js

Piotr Kowalski — Tue, 28 Jan 2014 00:00:00 +0000

W dniu dzisiejszym (tj. 2014/01/27) miałem przyjemność uczestniczyć w roli słuchacza na mini-konferencji o nazwie WRUG. Idea jest prosta, spotykamy się w luźnej atmosferze, rozmawiamy o tym co nas interesuje.

Planowałem obecność ze względu na obecność talka o frameworku Ember.js.

Warsaw Ruby Users Group (WRUG)

Talk #1: Coder’s lab

Pierwsza prezentacja zaprezentowała była przez Piotr Zientara, z wykształcenia “filozof”, który po 9-cio tygodniowym kursie Coder’s lab, nauczył się programować. Do takiego stopnia, że firma Rebased (o ile dobrze pamiętam) nawiązała z nim współpracę 😄. Piotr świetnie zaprezentował historię oraz ideę debugowania. Najważniejszą informacją była geneza słowa bug (w kontekście IT). Otóż sławna programistka Grace Hooper podczas problemu z maszyną na której pracowała znalazła ćmę - bug’a. Od tamtej pory słowo debugging oznaczało naprawę błędu.

Dzięki uprzejmości Piotra załączam prezentację.

Prezentację poprowadził Piotr Zientara z Rebased.

•

Talk #2: Ember.js

Drugi speech był o Ember.js. Zgodnie z opisem przed spotkaniem, liczyłem, że podczas tej prezentacji zostanie mi przedstawione:

W jaki sposób mogę napisać prościutką aplikację?
Jak działa Ember.js?
Na co zwracać uwagę podczas tworzenia aplikacji?
Jaka jest idea aplikacji opierających się na tym frameworku?

Niestety, jednak po tym speechu nie mogę powiedzieć, że znam odpowiedzi na wszystkie w.w pytania.

Wiem tylko, że Ember.js nadaje się lepiej do dużych aplikacji niż Backbone.js. Najbardziej popularny na rynku framework Angular.js jest ideologicznie zbliżony do Ember.js, jednak bardzo mocno ingeruje on w kod html aplikacji. Nie każdy programista lubi mieć wymieszany kod html i js w template’ach.. Angular.js dodaje do znaczników atrybuty i to dlatego może stać się mniej komfortowy w wykorzystaniu.

Prezentację poprowadził Piotr “Drogomir” Sarnacki.

•

Talk #3

Trzecie przemówienie odbyło się beze mnie.

Podsumowanie

Więcej tutaj: WRUG / Spotkanie styczniowe o debugowaniu, Neo4j i Ember.js.

Do zobaczenia na WRUGu!

eval() czy JSON.parse() - porównanie szybkości

Piotr Kowalski — Sun, 26 Jan 2014 00:00:00 +0000

Web aplikacje mocno wykorzystują format JSON w procesie komunikacji klient (przeglądarka) - serwer. Zastanówmy się jak możemy poradzić sobie z parsowaniem danych zapisanych w tym formacie.

Format JSON

Jest to najpopularniejszy format w aplikacjach Front-end-owych ze względu na podobieństwo formatu JSON to obiektu literałowego w JavaScript. Dodatkowo, po sparsowaniu danych, korzystanie z nich odbywa się w identyczny sposób jak byśmy używali zwykłego obiektu w JS.

Silniki przeglądarek udostępniają API, które pozwala na podstawową obsługę tego formatu.

JSON.parse() - konwersja z: String do: Object

  var data = '{ "foo": "bar" }';

  JSON.parse(data);
  // zwróci obiekt: Object { foo: "bar" }

  typeof JSON.parse(data) === 'object';
  // true

JSON.stringify() - konwersja z: Object do: String
```
  var data = { foo: 'bar' };

  JSON.stringify(data);
  // zwróci string: { "foo":"bar" }

  typeof JSON.stringify(data) === 'string';
  // true
```
Ale kiedyś, kiedy IE było liderem na rynku przeglądarek i nie miało konkurencji, parsowaniem danych przychodzących z serwera zajmowała się funkcja eval(). Wtedy jeszcze biblioteka Douglasa Crockforda nie istniała.

Badania

Pewnego dnia zaciekawił mnie performance dwóch metod parsowania danych: eval() oraz JSON.parse(). Skorzystałem z najpopularniejszej platformy do przeprowadzania takich testów, mianowicie skorzystałem z jsperf.com. Link do moich badań: jsperf.com/eval-or-json-parse. Testy przeprowadziłem na dość długim łańcuchu znaków, aby testy były bardziej miarodajne.

Wyniki badań były zaskakujące.

Opera, przeglądarka która ma obecnie (2014/01) 6.40% rynku lepiej radzi sobie z parsowaniem za pomocą eval(). Przewaga pomiędzy parsowanie funkcją eval() a JSON.parse() na tej przeglądarce jest ogromna. Blisko 10 razy szybciej.

Dane dla Opera 12.15:

JSON.parse() - 7,461 ops/sec
eval() - 67,859 ops/sec

Reszta przeglądarek (poza IE), mianowicie Chrome, Firefox, Safari (poza 7.0.1) radzi sobie lepiej z parsowanie przy użyciu JSON.parse().

Wnioski

Gdy naszą docelową przeglądarką jest Internet Explorer lub Opera to polecam korzystać z metody eval(). Oczywiście, jeśli aplikacja korzysta z wiarygodnego źródła danych.

W przeciwnym przypadku rekomenduje korzystać z JSON.parse(), chociażby z powodu wydajności.

Drugim punktem który stoi za korzystaniem z JSON.parse() jest działanie tej metody. Funkcja eval() nie parsuje danych, ona po prostu uruchamia kod który zostanie jej przekazanym w postaci łańcucha znaków. To jest największe niebezpieczeństwo tej funkcji. Metoda JSON.parse() rzuci wyjątkiem kiedy w parametrze nie będzie poprawnego formatu wg specyfikacji JavaScript Object Notation.

DevMeetings: Responsive Web Design [Relacja Live]

Piotr Kowalski — Sat, 30 Nov 2013 00:00:00 +0000

Dziś DevMeetings zawitał do stolicy! Temat: Responsive Web Design

Miejsce: Golden Floor Sky al. Jerozolimskie 123A (26 piętro), Warszawa

Prowadzący: Hubert Burdach z Front-Stream - responsivehero.com/

Skład: 30 osób (w tym 4 damy)

Responsive Web Design - temat bardzo ‘na czasie’. Każda szanująca się firma o profilu webdeveloperskim posiada responsywne portfolio.

Przykłady:

Przykłady innych stron:

9:00

Rozpoczęcie szkolenia! Po 2 latach przerwy 😄

9:07

prezentacja IT Crowd - Krzysztof Miksa
- founded in 2011
- 7 developers
- 50% remote workers
- web applications
- Back-end systems
- enterprise systems
- messaging solutions
- cloud computing
- business process management
- big data
- ERP
- Java

9:26

styletiles.html - wszystkie możliwe komponenty prosto od designera, dla klienta, aby nie wysyłać *.psd’ków

9:28

zaczynamy przygodę z RWD!

9:34

jednostki: px, %, em, rem
em - względem kontenera w którym się znajdują
rem - względem korzenia (>html<)
target / context * 100 - pixele na procenty

9:38

rem - nie możemy używać poniżej IE8

9:41

Firefox - opcja “Powiększ tylko tekst” - różnica pomiędzy px i em

9:43

co to jest BEM? Block Element Modifier - http://bem.info/method/
długie nazwy CSS Class

wydzielamy:

bloki np. box
elementy - np. box__element
modyfikatory - np. box box–wide

  <!-- BLOCK -->

  <div class="box"></div>

  <!-- ELEMENT -->

  <div class="box">
      <div class="box__element"></div>
  </div>

  <!-- MODIFIER -->

  <div class="box box--wide">
      <div class="box__element"></div>
  </div>

9:46

nie zwiększamy specifity selectora, rozwiązaniem jest BEM!

  .username {
      background: red;
  }

  .login-box .status .username {
      background: green;
  }

9:50

LESS, SASS, Compass - http://css-tricks.com/sass-vs-less/
SASS - placeholdery, są kompilowane w momencie kiedy są one potrzebne - prawdopodobnie nowy temat DevMeetingu!

10:00

pierwsze zadanie - konwersja pixele na remy i emy

10:20

Media Queries - kolejne zadanko

10:22

Reflector - narzędzie do duplikowania ekranu

10:24

ustawienie viewport

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

iPad & iPhone domyślnie ma 981px
operator not tylko przed media types (np. screen, print, all, projectos)
media queries features np. min-width, max, width

można definiować media type przy tagu

  <link
      rel="stylesheet"
      type="text/css"
      href="02_mq_03.css"
      media="screen and (min-width:600px)"
  />

zawsze pobierze plik - każda przeglądarka

10:36

media type only - przeglądarki, które nie rozumieją media queries, zapis umowny, może być “xxx”

  @media only screen, (min-width: 960px) {
      body {
          background: red;
      }
  }

czy pisać media queries w pikselach? przy resize’owaniu font’a ma to znaczenie, gdy mamy zdefiniowany media queries w em’ach
co jest browser nie wspiera? Z pomocą respond
CSS3 w arkuszach dla IE6 selectivizr

10:43

wykrywanie w JS czy browser wspiera media queries?

  window.matchMedia('(min-width: 768px)').matches;

eCSSential - dołączanie plików css tylko dla konkretnych warunków, reszta plików jest ściągana asynchronicznie

10:50

quickconcat - ściąganie jednego pliku *.php który będzie miał zawartość innych plików

10:55

przerwa… uff, pora na ciasteczko 😄

11:20

zadanie z media queries - dodanie zachowania dla 960px

11:39

pierwszy! - prezentuję swoją przeróbkę przed grupą najlepszych developerów

11:42

Mobile First / Mobile Last (Desktop First)

11:44

każdy chwali się swoim doświadczeniem
przekrój developerów jest ogromny, są i programiści Javy, Ruby (Rails) oraz typowi Front-end-owcy i designerzy
doświadczenie niektórych jest bardzo duże, swoje

11:59

patterny do nawigacji
- of canvas pattern - menu wyjeżdża z lewej strony
- zamiast menu zastąpienie go <select>‘em
- footer navigation - nawigacja na dole strony (link na górze przenosi nas niżej)
- hamburger pattern
- do nothing approach

12:03

trzecie zadanko - menu “of canvas pattern”

12:36

pierwszy - kolejny raz 😄
prezentuje swoje mini dzieło całej grupie
nie robi to piorunującego wrażenia ale zadanie zrealizowane!

12:43

coffee break! … pora na ciasteczko!

13:00

po przerwie wracamy!
content first - nigdy nie robimy na urządzenie
pomocne narzędzie uxpin.com
www.i-sklep.pl/rwdlist.html - przykład: siglo.pl

13:10

grid systemy:

13:17

pizza time - wszyscy szybko pobiegli za jedzeniem… biegnę i ja, jednak tylko na ciasteczka 😄

13:50

po przerwie! jedziemy dalej
problem: zaokrąglanie wartości do dołu w safari
solutions:
- marginesy negatywne,
- foundation: block grid
- barrelny.com/blog/text-align-justify-and-rwd/
- susy.oddbird.net
- flexbox

14:10

prezentacja nt. flexbox’a otwiera mi szeroko oczy na projektowanie interfejsu

  .flex {
      display: flex;
      flex-direction: row;
  }

14:25

czwarte zadanie - responsywny slider

14:35

jak zrobić responsywne obrazki?

  <img src="http://placebear.com/200/300" alt="" />

  img {
      max-width: 100%;
  }

ale co jeśli obrazek ma określone wymiary?

  <img src="http://placebear.com/200/300" alt="" width="200" height="300" />

  img {
      max-width: 100%;
      height: auto;
  }

14:51

prosty temat (responsywny slider) ale jednak mnie przerósł 😄
wierzę, że po zakończeniu warsztatów zasiądę do projektu kolejny raz ale produkt będzie spełniał oczekiwania!
ciekawe kto zaprezentuje swoje dzieło? może jakaś pani?

15:01

przykład z iosSlider
translate3d korzysta z akceleracji sprzętowej, przerzuca proces z CPU na GPU
ale nie robimy z * translate3d
Safari ma w sobie remote debugger, gdy urządzenie Apple jest podłączone
ghost lab
wayne dalton remote control
www.browserstack.com
prosta biblioteka do rozwiązać hammer.js

15:20

jeśli jest powyżej 15-20 to musimy wyłączyć kosztowne efekty wizualne
- Show paint rectangles
- Force accelerated compositing / Enable continuous page repainting

badanie performance DevTools

  .box {
      position: fixed; /* ciężkie dla przeglądarek */
      -webkit-transform: translateZ(0); /* solucja */
  }

przeglądarka pobiera obrazek kiedy potrzebuje, np. media queries to stwierdzają
display: none; pobiera zawsze obrazki
background-image: -webkit…
picturefill.js polyffil dla tagu >picture<
działa tylko w nightly Google Chrome:
```
  <img srcset="" alt="" />
```
css-tricks.com/foresight-js/
font-family i content - możemy przekazać dowolny string
resrc.it/
mobify.com/mobifyjs/ - proces capturingu
ress.io/
github.com/adamdbradley/focal-point

15:41

lekkie zmęczenie materiału
resizowanie tła: background-size: (cover, auto 100%, 100% auto, 100% 100%)

15:44

padding-bottom - szerokość / wysokość * 100 px
obliczanie po stronie serwera
appelsiini.net/projects/lazyload
nie trafimy linii czytania na mobile
nie mamy repaint & reflow

15:46

przerwa na wodę 😄

16:01

ostatnia część
-webkit-overflow-scrolling: touch;
-webkit-column-count: 3;
-webkit column-style: 1px solid red;
pomiędzy 45 a 75 jest najlepsze do czytania oraz do 10 słów
przydatne narzędzie: http://nerd.vasilis.nl/code/measure-help/

zmiana układu strony dla różnych języków:

  :lang(de) div {
      -webkit-count-column: 2;
  }

nowa dyrektywa:

  .par {
      font: -applce-system-body; /* domyślna czcionka w iOS7 */
  }

w iOS7 wprowadzono dynamiczne fonty, jeśli w ustawieniach urządzenia zmienimy rozmiar będzie to aktywne na wszystkich stronach z poprzednią dyrektywą
icomoon.io/

nowy iOS wprowadza “ulepszenia”:

  .foo {
      -webkit-font-smoothing- antialiased;
      -moz-osx-font-smoothing- grayscale; /* OS X domyślnie pogrubia niektóre elementy elementy */
  }

text-rendering: optimizeLegibility
l20n.org/
Network Link Conditioner - spowolnienie łącza na macOS
ładowanie fontów - WebFontConfig

16:37

pattern dla przeglądania tabelek:
thead, tbody, tfooter - display: block
tbody - overflow: scroll

16:42

skalowanie materiałów wideo - fitvidsjs.com
wykrywanie feature-rów: modernizr, has.js

konfiguracja r.js:

  ...
  has: {
      "audio-mp3": true // dołącza tylko te warunki, które są spełniane
  }
  ...

17:00 - Koniec szkolenia

To było niesamowite, znowu poczuć się na warsztatach DevMeetings, choć nie było niestety, autora tego zamieszania Piotra Zwolińskiego, ani żadnego baneru reklamowego DevMeetings.

Dziękuję serdecznie, za mocne przygotowanie teoretyczne oraz praktyczne.

PS. Na dodatek ten certyfikat robi wrażenie:

Git. Początki w najpopularniejszym systemie kontroli wersji

Piotr Kowalski — Sat, 14 Sep 2013 00:00:00 +0000

Kilka tygodni temu miałem przyjemność zostać prelegentem na uczelni. Miałem za zadanie wybranie dowolnego systemu kontroli wersji, oraz przedstawienie jego swojej grupie.

Ze względu na popularność i niezawodność (oraz aktualny trend) wybrałem rozproszony system kontroli wersji Git.

Używam go już 3 rok i jestem zadowolony. Nie przypominam sobie sytuacji, w której bym na niego narzekał.

W sekcji Bibliografia (poniżej) pierwszy odnośnik kieruje do mojej prezentacji. Zachęcam do szybkiej weryfikacji moich opisów poszczególnych zagadnień. Zawarłem w niej tylko skromny zalążek Gita, ale w taki sposób, abyś po jej przeczytaniu był w stanie sobie z nim poradzić.

Przykładowe zadania repozytorium

# ustawienie konta użytkownika
git config --global user.name "NICK"
git config --global user.email "ADRES_EMAIL"

# wyświetlanie listy plików zmodyfikowanych i utworzonych
git status

# wyświetlenie listy wszystkich rewizji
git log

# aplikacja okienkowa do zarządzania repozytorium
gitk

Operacje na rewizjach (commit-ach):

# dodanie wszystkich plików na changelistę
git add -A

# zapisuje wszystkie zmodyfikowane pliki w repozytorium
git commit -am "KOMENTARZ"

# przywraca repozytorium gdzie HEAD jest wybraną rewizją
git reset ID_REWIZJI

# tworzy rewizję która wprowadza odwrotne zmiany we wskazanej rewizji
git revert ID_REWIZJI

# tworzy brancha gdzie HEADem jest wskazana rewizja
git checkout ID_REWIZJI

# usuwanie plików i katalogów, które nie zostały dodane do repozytorium,
# pliki nie istnieją na changeliście
git clean -df

Operacje na gałęziach (branch-ach):

# wyświetlenie listy wszystkich branchy w repozytorium
git branch -a

# utworzenie lokalnej gałęzi + przełączenie się na nią
git checkout -b BRANCH

# usunięcie lokalnej gałęzi
git branch --delete BRANCH

# usunięcie brancha z serwera
git push origin --delete BRANCH

# włączenie wskazanego branch do aktualnego
git merge BRANCH

Plusy

Głównym plusem IMHO jest to, że podczas pracy nad projektem mogę tworzyć commity (rewizje) bez aktualizacji głównego repozytorium. Daje to przewagę na systemami scentralizowanymi, których reprezentantem jest SVN.

Kiedy będę gotowy to wykonam:

git push origin main

Wszystkie moje zmiany lądują na serwerze. W głównej gałęzi (branch).

Kiedy będę chciał pracować na najnowszej wersji projektu zapisanego w repozytorium to uruchomię:

git pull origin main

Minusy

Podczas mojego skromnego doświadczenie, nie miałem żadnych problemów z Gitem, które by wynikały z niepoprawne pracy programu.

Bibliografia

Link do slajdów: http://www.slideshare.net/piecioshka/git-22940788
Strona główna projektu: http://git-scm.com/

Uważaj na "use strict", czyli Strict mode w praktyce

Piotr Kowalski — Wed, 12 Jun 2013 00:00:00 +0000

W specyfikacji ECMAScript 5 pojawiło się mnóstwo technik, które ułatwią proces developmentu każdemu programiście. Jednym z nich jest tzw. tryb ścisły (ang. strict mode).

Tryb ścisły kontroluje jakość naszego kodu źródłowego. Nie pozwala na stworzenie kodu, który jest okraszony błędnym działaniem (o tyle o ile - nie zostaną wykryte błędy niezwiązane z logiką biznesową).

Jak włączyć?

Włączenie trybu ścisłego opiera się na dodaniu na początku pliku (bądź funkcji) takiej linijki:

"use strict";

Dzięki tej linijce, interpreter użyje bardziej restrykcyjnych warunków w swoim procesie analizy kodu i każdą niepoprawną konstrukcję potraktuje srogo.

Kilka przykładów

Jak tego w ogóle używać?

  // Tryb zwykły.

  (function () {
      "use strict";
      // Dla tej funkcji włączony jest tryb ścisłej interpretacji!
  }());

  // Tryb zwykły.

Czym włączenie trybu ścisłego skutkuje w kodzie?

  (function () {
      console.log(this); // Window
  }());

  (function () {
      "use strict";
      console.log(this); // undefined
  }());

Zmienne globalne

Ile razy przez przypadek zapomniałeś dodania wyrażenia var podczas definicji zmiennej? Raz na rok zdarza się to każdemu.

zmienna1 = 1; // Zmienna globalna zostanie utworzona.
// W tym zasięgu nie jest włączony tryb ścisły.

(function () {
    "use strict";
    zmienna2 = 2; // ReferenceError: zmienna2 is not defined
}());

To jak mam się odwołać do obiektu globalnego?

(function (root) {
    "use strict";

    // imports
    var $ = root.jQuery;
    var _ = root._;

}(this));

lub:

(function (root) {
    "use strict";

    // imports
    var $ = root.jQuery;
    var _ = root._;

}(window)); // <-- wcześniej tutaj był "this"

Ten drugi sposób nie zawsze zadziała. Istnieją mianowicie środowiska gdzie obiekt window nie jest dostępny.

Chyba najprostszym przykładem będzie Node.js, czyli aplikacja po stronie serwera. Na serwerze nie mamy dostępu do okna przeglądarki, więc obiekt window nie ma prawa istnieć. Jeśli chciałbyś uzyskać dostęp do globalnego obiektu w Node.js to skorzystać z obiektu global.

Drugim przykładem są silniki urządzeń, takich jak STB. Urządzenia te nie posiadają wewnętrznej przeglądarki do uruchamiania interpretera JavaScript.

Pełna lista niedozwolonych konstrukcji dostępna jest na portalu MDN. Zapraszam Cię do zapoznania się ze wszystkimi zakazanymi konstrukcjami.

Podsumowanie

Jeśli nie używasz Strict mode (a korzystasz ze składni ES5) to gorąco rekomenduję użycie. Pisanie aplikacji z użyciem tego trybu na pewno nie zaszkodzi a może pomóc.

Funkcja to czy obiekt, któż to wie?

Piotr Kowalski — Fri, 10 Feb 2012 00:00:00 +0000

W dużym projekcie występuje często spotykany problem. Mianowicie, gdy funkcję traktujemy jako konstruktor obiektu, a nie powinniśmy i przed wywołaniem funkcji dopisaliśmy operator new.

Co wtedy? Jak zachowa się aplikacja? Jak to sprawdzić? Jak zapobiec?

Jeżeli pattern użyty w aplikacji korzysta z kontekstu to sytuacja może się skomplikować. Ciało funkcji, w którym jest odniesienie się do aktualnego kontekstu będzie różny w zależności w jaki sposób skorzystamy z definicji funkcji.

Jeśli wywołamy funkcję w globalnym scope’ie to this odnosi się do obiektu globalnego Window. Jeśli jednak przez pomyłkę, bądź specjalnie użyjemy przed wywołaniem funkcji operatora new to this będzie referencją do obiektu, który właśnie powstał.

Przykład cross-platform-owej implementacji:

function test() {
    if (arguments.callee.prototype.constructor === this.constructor) {
        console.log('obiekt');
    } else {
        console.log('funkcja');
    }
}

test(); // Print: "funkcja"
new test(); // Print: "obiekt"

Wykrywanie wersji interpretera JavaScript

Piotr Kowalski — Thu, 09 Feb 2012 00:00:00 +0000

Jak wykryć wersję interpretera JavaScript w przeglądarce?

Każda platforma zawiera inne dobrodziejstwa języka. Niektóre platformy zawierają natywne rozwiązania, których w starszych wersjach silnika brakuje. Z pomocą przychodzi tutaj pklib, który uzupełnia zbiór funkcji z nowszych wersji interpretera w jednym miejscu.

Jak wykryć?

Sposób jest prosty. Przeglądarki mają zaimplementowany tzw. quirk mode. Wykorzystajmy atrybut language elementu script.

<script>
    var version = 1.0;
</script>
<script language="javascript1.1">version = 1.1;</script>
<script language="javascript1.2">version = 1.2;</script>
<script language="javascript1.3">version = 1.3;</script>
<script language="javascript1.4">version = 1.4;</script>
<script language="javascript1.5">version = 1.5;</script>
<script language="javascript1.6">version = 1.6;</script>
<script language="javascript1.7">version = 1.7;</script>
<script language="javascript1.8">version = 1.8;</script>
<script language="javascript1.9">version = 1.9;</script>
<script language="javascript2.0">version = 2.0;</script>
<script language="javascript2.1">version = 2.1;</script>
<script language="javascript99.0">version = null;</script>
<script>
    console.log('JavaScript version ' + version + ' supported');
</script>

Demo 🎉

Nie chce Ci się tworzyć pliku HTML? Stworzyłem go za Ciebie. Rzuć okiem na https://piecioshka.github.io/display-supported-version-of-javascript/

Haki CSS na przeglądarkę Internet Explorer

Piotr Kowalski — Thu, 09 Feb 2012 00:00:00 +0000

Przychodzi taka chwila w życiu każdego webmaster-a kiedy nasze rozwiązania nie wyglądają spójnie na wszystkich przeglądarkach. Najczęstszym przypadkiem, gdzie layout strony odbiega od rzeczywistego pojawia się na przeglądarkach z Redmond.

Przeglądarka Internet Explorer jest bardzo nieobliczalną przeglądarką. Świat jej nigdy nie zapomni.

Zamieszczam duży zbiór kruczków jakie mogą być przydatne w “poprawianiu” layoutu.

border: 1px solid #000; /* dla wszystkich, domyślnie */

Internet Explorer 5.0, 6.0, 7.0

*border: 1px solid #000; /* IE: 5, 6, 7 */

Internet Explorer 6.0

_border: 1px solid #000; /* IE: 6 */

Internet Explorer 7.0

`border: 1px solid #000; /* IE: 7 */
~border: 1px solid #000; /* IE: 7 */
/border: 1px solid #000; /* IE: 7 */
?border: 1px solid #000; /* IE: 7 */
#border: 1px solid #000; /* IE: 7 */
@border: 1px solid #000; /* IE: 7 */
+border: 1px solid #000; /* IE: 7 */
[border: 1px solid #000; /* IE: 7 */
]border: 1px solid #000; /* IE: 7 */
{border: 1px solid #000; /* IE: 7 */
|border: 1px solid #000; /* IE: 7 */
$border: 1px solid #000; /* IE: 7 */
%border: 1px solid #000; /* IE: 7 */
!border: 1px solid #000; /* IE: 7 */
,border: 1px solid #000; /* IE: 7 */
&lt;border: 1px solid #000; /* IE: 7 */
.border: 1px solid #000; /* IE: 7 */
>border: 1px solid #000; /* IE: 7 */
^border: 1px solid #000; /* IE: 7 */
(border: 1px solid #000; /* IE: 7 */
)border: 1px solid #000; /* IE: 7 */
=border: 1px solid #000; /* IE: 7 */
&border: 1px solid #000; /* IE: 7 */
*border: 1px solid #000; /* IE: 7 */

Internet Explorer 8.0

border /*\**/: 1px solid #000\9; /* IE: 8 */

Bardzo dużo informacji można znaleźć na jednej z podstron na anglojęzycznej Wikipedii

bind() obok call() i apply() jako piękna natura języka

Piotr Kowalski — Thu, 09 Feb 2012 00:00:00 +0000

Zasada działania metody bind() opiera się na istniejących metodach call() i apply(). Funkcja bind() różni się od call() w jednym aspekcie — w sumie w najważniejszym!

`call()` & `apply()`

Wyżej wymienione funkcje uruchamiają od razu funkcję na której są uruchomione.

Przykład poniżej:

var book = {
    title: "Pan Tadeusz"
};

var computer = {
    title: "MacBook"
};

function getTitle(prefix) {
    return prefix + this.title;
}

console.log(getTitle.call(book, 'To jest: ')); // "To jest: Pan Tadeusz"
console.log(getTitle.call(computer, 'To jest: ')); // "To jest: MacBook"

console.log(getTitle.apply(book, ['To jest: '])); // "To jest: Pan Tadeusz"
console.log(getTitle.apply(computer, ['To jest: '])); // "To jest: MacBook"

Obie funkcje oczekują pierwszego argumentu, którym będzie kontekst, czyli nowy świat jaki będzie dostępny, gdy w funkcji getTitle() będziemy chcieli pobrać coś z this-a.

Słowo kluczowe this wskazuje na kontekst uruchomienia funkcji, w której jest użyty.

`bind()`

Funkcja z nagłówka zmienia kontekst używany w naszej funkcji.

Ważne jest to, że jej nie uruchamia, tak jak robią to metody call() i apply(). Funkcja bind() zwraca tą samą funkcję, zmieniając jej świat oraz ewentualnie definiując wartości oczekiwanych parametrów.

Przykład użycia:

function printStatus() {
    console.log(this.isAvailable);
}

var contact = {
    isAvailable: true
};

printStatus(); // undefined

var printContactStatus = printStatus.bind(contact);

printContactStatus(); // true

Ale u mnie nie działa!

Podejrzewam, że używasz starej przeglądarki. Bardzo starej.

Tutaj jest dostępna tablica ze wsparciem danego feature-a w przeglądarkach. Jak widzisz, cały rekord jest zielony. Oznacza to, że wszystkie przeglądarki wymienione w nagłówkach mają wsparcie do tej nowości z ES5.

W starszych przeglądarkach metoda bind() niestety nie istnieje, ale istnieje prosta implementacja przedstawiona poniżej. Wystarczy, że uruchomimy kod zdefiniowany poniżej i już nasz kod z bind() zadziała.

if (!Function.prototype.bind) {
    Function.prototype.bind = function (that) {
        var method = this;
        var slice = Array.prototype.slice;
        var args = slice.apply(arguments, [1]);

        return function () {
            return method.apply(that, args.concat(slice.apply(arguments, [0])));
        };
    };
}

Powyższy kod to tzw. polyfill — czyli rozwiązanie, które tworzy brakujące API.

ECMAScript 5. Kiedy będzie codziennością?

Piotr Kowalski — Thu, 08 Dec 2011 00:00:00 +0000

Gdyby programista korzystał na co dzień tylko z najnowszych technologii świat byłby “zbyt” idealny. Niestety, ale zdarza się ciągle bardzo często kiedy to klienci do listy kompatybilnych przeglądarek naszego oprogramowania nadal dodają tak stare przeglądarki jak Internet Explorer 6.x, 7.x oraz 8.x.

A teraz trochę historii. Przeglądarka Internet Explorer 6.0 została wydana 27 sierpnia 2001, krótko po wydaniu Windows XP. Czyli ponad 10 lat temu! I teraz pytanie, dlaczego są jeszcze ludzie którzy korzystają z tak “doświadczonej” przeglądarki?! Popularność tej przeglądarki to nie cały 1% całej Polski internautów.

Z kolei przeglądarka Internet Explorer 7.0 została wydana pod koniec 2006 roku. Popularność tej przeglądarki wynosi lekko ponad 3%. Jedynym plusem tego browsera, moim zdaniem, jest to, że wreszcie przeglądarki z Redmond mają wsparcie dla “PNG alpha channel”. Bez tego obchodzenie się z obrazkami w formacie *.png jest bardzo niewygodne dla specjalnie dedykowanej przeglądarki IE6. Trzeba stosować JavaScript’owe hacki, które nakładają obrazek półprzezroczysty na element, który to ma tło w formie obrazka `*.png`.

Wersja 8.x przeglądarki Internet Explorer już wspiera niewielką część specyfikacji, ale nie jest to na tyle pomocne przy tworzeniu aplikacji aby można było się tym chwalić. IE8 również wrzucamy do kosza z “odpadkami”. Niestety, ale popularność tej przeglądarki plasuje się na 3 miejscu wśród przeglądarek polskich internautów. Albowiem wynosi ona lekko ponad 15%.

Wymieniłem te przeglądarki gdyż “jeszcze” mają one wpływ na użycie standardów w naszych aplikacjach, ale nie oferują żadnego z elementów nowego standardu ES5 według kangax.github.com.

Godne polecenia są najnowsze wersje Firefox 8.x oraz Chrome 15.x które mają zaimplementowaną pełną specyfikację ECMAScript 5! Należą się gromkie brawa dla programistów z Mozilla Corporation oraz Google Inc.

Najnowsza wersja specyfikacji 5.1 ujrzała światło dzienne w czerwcu 2011. Zawiera ona 258 stron w których opisuje takie cuda jak m. in:

Object.getPrototypeOf()
Object.getOwnPropertyDescriptor()
Object.getOwnPropertyNames()
Object.create()
Object.defineProperty()
Object.defineProperties()
Object.seal()
Object.freeze()
Object.preventExtensions()
Object.isSealed()
Object.isFrozen()
Object.isExtensible()
Object.keys()

Function.prototype.bind()

Array.prototype.indexOf()
Array.prototype.lastIndexOf()
Array.prototype.every()
Array.prototype.some()
Array.prototype.forEach()
Array.prototype.map()
Array.prototype.filter()
Array.prototype.reduce()
Array.prototype.reduceRight()

String.prototype.trim()

Date.now()
Date.prototype.toISOString()
Date.prototype.toJSON()

Źródła

https://www.slideshare.net/fgalassi/javascript-the-new-parts - Ciekawa prezentacja
https://kangax.github.io/es5-compat-table/ - Kompatybilność przeglądarek oraz silników w ramach ES 5
https://www.ecma-international.org/publications/standards/Ecma-262.htm - Strona główna specyfikacji
https://github.com/kriskowal/es5-shim/blob/master/es5-shim.js - Dobrzy ludzie postanowili napisać skrypt który emuluje obecność standardu ES5 w przeglądarce
https://ranking.pl/ - Dane statystyczne pochodzą z 2011 roku z serwisu

DevMeetings: Middle-End w oparciu o Server-side JS [Relacja Live]

Piotr Kowalski — Sat, 24 Sep 2011 00:00:00 +0000

Dzisiaj DevMeetings zawitał do Krakowa!

Tematem będzie middle-end, czyli coś co jest pomiędzy Back-end-em, a Front-end-em. Skład zawiera programistów doświadczonych w Node.js, ale także raczkujących w tej tematyce.

Miejsce: Hotel Kossak ****

Prowadzący: Piotrek Koszuliński

Skład: 12 programistów

10:25

Niestety nieco się spóźniłem, pociągi Warszawa - Kraków nie kursują w dogodnych godzinach
Prowadzący Piotrek Koszuliński porusza temat Middle-End, czyli warstwę pośredniczącą
Od razu w głowie pojawiło się pytanie, to czymże różni się Middle-end od Middle-ware? 😄

10:49

Strony w prezentacji już się skończyły ciekawe co prowadzący teraz nam przygotował?
Zadania rozdane, dzielimy się na grupy
Trwa lekka burza mózgów… co z tego wyniknie? Może w ogóle nie będziemy robili żadnych zadań?
A jednak: nasz temat to Routing - github.com/Reinmar/dm-middle-end/blob/master/pres/index.html#L816

10:57

Przerwa na kawkę i ciasteczka, czyli “kodujemy po kryjomu”
Piotrek wrzucił na GitHub-a prezentację, ściągamy i analizujemy 😄

git init
git clone https://github.com/Reinmar/dm-middle-end

11:09

Powstały grupy:
- Routing
- System szablonów

11:26

Projekt założony na GitHub, github.com/psionides/devmeetings-routing
Mamy plan aby zastosować wzorzec projektowy fabryka

12:11

Specyfikacja projektu: Routing jako Middle-End:
- Node.js
- nodamon - watcher do Node-a
- CoffeeScript
- webmake
- Mustache
- jQuery

13:16

Każda grupa prezentuje swoje osiągnięcia
Są już pierwsze miniprojekty 😄
Obiad - wreszcie!

15:18

Spacerując po Krakowie podziwialiśmy Stare Miasto oraz Wawel
Wróciliśmy z obiadu i teraz każdy ma 2x większy zapał do pracy
Trwa komentowanie wpisów na Twitterze i Facebook-u
Kontynuacja rozwiązywania naszych zadań…

15:39

Każdy DevMeetings przynosi nowe, ciekawe doświadczenia. Tym razem była walka o to, kto jest dobry w JS-ie wykazując się w teście perfectionkills.com/page/12/
Mój wynik to 8/14 😄

16:03

Pierwszy zawodnik opuścił spotkanie, niestety porwały go inne prace do realizacji
Grupa Templates zawiera już tylko jednego programistę z systemem MS Windows, systemem który jest zdecydowaną rzadkością na spotkaniach developerów

17:09

Coraz więcej programistów przekonuje się do CoffeeScript
Kolejni programiści języków takich jak Ruby i Python wychwalają CS za jego składnię

17:39

Koncert na organach orkiestry spod Wawelu
Kodowanie trwa pełna parą!
Nasz projekt zbliża się ku końcowi, korzystając z webmake-a jesteśmy na “ostatniej prostej”

18:35

Pierwsza relacja live: Nasz projekt!
Prezentuje: Jakub Suder

19:18

Wszystkie prezentacje zakończone
Wynik: 4 różne projekty

Podsumowanie

Middle-end jest wśród nas bardzo często spotykany, niestety jego rola jest przypisywana do Back-end-u - dlatego też pojęcie to jest mało popularne. Middle-End występuję pod postacią kilku kluczowych dla niego elementów:

routing
proxy
serwowanie szablonów stron na swoim serwerze

Jednak przypadków użycia jest wiele, choćby walidacja, identyczna po stronie serwera i Front-end-u również zaliczana jest to middle-endu.

Wnioski

Kolejny DevMeetings był kolejną super dawką pozytywnej energii i wspólnego kodowania w gronie programistów z całej Polski. Niestety był to już ostatni meeting w tym roku ze względu na brak poważnych tematów - próbowałem przepchnąć CoffeeScript-a, ale się nie udało - oraz brak prelegentów.

Zen-Coding — szybsze pisanie w językach HTML i CSS

Piotr Kowalski — Sun, 18 Sep 2011 00:00:00 +0000

Zen-Coding - taką nazwę nosi projekt dwóch developerów: pepelsbey oraz serge.che. Cała lista aktywnych programistów biorących czynny udział w projekcie znajduje się tutaj: code.google.com/p/zen-coding/people/list.

Korzystanie z Zen-Coding znacznie przyspiesza mozolne pisanie znaczników html i selektorów css. Lista możliwych skrótów:

znaczników HTML - code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
selektorów CSS - code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

Instalacja w środowisku Eclipse przebiega bezproblemowo. Do dostępnych update-site’ów dodajemy kolejną: zen-coding.ru/eclipse/updates/ Adres do katalogu, który zawiera plik site.xml o zawartości:

<site>
    <description name="Zen Coding for Eclipse updates">
    Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions&#x2014;similar to CSS selectors&#x2014;into HTML code.
    </description>
    <feature url="features/ru.zencoding.eclipse_0.7.0.201103132329.jar" id="ru.zencoding.eclipse" version="0.7.0.201103132329"/>
</site>

Znajduje się z nim adres do pliku ru.zencoding.eclipse_0.7.0.201103132329.jar który jest głównym plikiem z całą wtyczką.

Zasada działania

Wtyczka udostępnia listę skrótów do swojego IDE.
Skróty odnoszą się do prawdziwych selektorów i znaczników.
Po napisaniu skrótu i wywołaniu skrótu klawiaturowego Ctrl+E (w środowisku Eclipse) łańcuch znaków zamieni się w pełni zgodny z danym językiem ( html/css ) kod.

Przykład

a) Skrót HTML: html>head+body>p{test}, który zamieni się w:

<html>
    <head></head>
    <body>
        <p>test</p>
    </body>
</html>

b) Skrót CSS: bgc, który zamieni się w:

background-color: #fff;

Podsumowanie

Wtyczka umożliwia zdecydowanie szybsze pisanie w językach HTML oraz CSS. Na pierwszy rzut oka wygląda na to, że trzeba nauczyć się wielu skrótów, ale jest to mylne złudzenie gdyż skróty są bardzo zbliżone do prawdziwych znaczników oraz selektorów.

Eclipse — skróty klawiszowe

Piotr Kowalski — Sun, 18 Sep 2011 00:00:00 +0000

Skróty klawiszowe znacznie przyspieszają pracą programisty. Każdy powinien się z nimi oswoić w celu szybszej produkcji kodu. Jako zwolennik platformy Eclipse korzystam ze skrótów zamieszczonych na tej stronie. Skróty klawiszowe w różnych IDE mają przypisane odmienne zadania.

Przykładem niech będzie Intellij IDEA, gdzie skrót ctrl+e służy do zaznaczanie całego kodu wewnątrz wrappera wierszu kodu w którym jest ustawiony focus.

Przykładowe skróty

ctrl+d: Usuwa wiersz w którym jest ustawiony kursor. Usuwa zaznaczone linie tekstu.
alt + up / down: Przesuwa wiersz w którym jest ustawiony kursor niżej bądź wyżej. Może także przesuwać linie kodu które są zaznaczone.
ctrl + up / down: Przesuwa kod źródłowy w oknie do edycji.

CoffeeScript + Windows

Piotr Kowalski — Wed, 14 Sep 2011 00:00:00 +0000

CoffeeScript jest nakładką na JavaScript, który oferuje inną składnię, przybliżoną do takich języków jak Ruby czy Python. Staje się on nadbudową języka prototypowego jakim jest JS, dodając tzw. lukier składniowy, aby programowanie opierało się na klasycznym programowaniu obiektowym, tj. klasy, metody, dziedziczenie.

Sam język oferuje nie tylko lepszą składnię od popularnego dziś języka JavaScript, ale także m.in przetwarzanie tablic i dopasowywanie do wzorców. CoffeeScript posiada kompilator który w outpucie generuje plik JavaScript, ale rozmiar pliku, jak to z badań wynika, jest o 1/3 krótszy, bez strat w dziedzinie performance.

Instalacja

Dziś przyszło mi zainstalować CoffeeScript-a w systemie Microsoft Windows. Na linux-ie nie miałem problemów, a instalacja w tym systemie ogranicza się do uruchomienia kodu:

npm install -g coffee-script

Po researchu odnośnie Coffee na Windows, znalazłem w repozytorium GitHub’a kompilator: github.com/alisey/CoffeeScript-Compiler-for-Windows.

Aplikacja działa w trybie terminala (w systemie z Redmond, terminal nosi nazwę Wiersza Poleceń). Aby aplikacja była dostępna z każdego katalogu, należy dodać katalog z kompilatorem do zmiennej systemowej PATH.

Dla systemu Windows XP, instalacja przebiega według następujących kroków:

Uruchamiamy opcje Właściwości na ikonce Mój Komputer.
Przechodzimy na zakładkę Zaawansowane.
Klikamy button Zmienne środowiskowe.
W boksie Zmienne systemowe odnajdujemy zmienną PATH.
Dodajemy do niej ścieżkę z katalogiem zawierającym kompilator.

W moim przypadku jest to:
```
C:\bin
```
Po dodaniu należy uruchomić system ponownie, aby zmiany weszły w życie.

Od tego momentu jesteśmy w stanie uruchomić kompilator: coffee.exe z każdego katalogu poprzez Wiersz poleceń.

Opcje kompilatora

Opcje kompilatora prezentują się następująco:

-c, --compile - kompiluje plik z zawartością rekompilowanego pliku coffeescript oraz wynikową pliku z rozszerzeniem *.js
-o, --output [DIR] - ustawia globalny katalog do zapisywanie kompilowanych plików
-j, --join [FILE] - scala pliki przed kompilowaniem
-b, --bare - kompiluje pomijając globalny wrapper
-v, --version - wyświetla wersję kompilatora

Przykład

Przykład kodu napisanego w CoffeeScript (32 znaki):

class Coffee

    test: ->

Kod wynikowy po kompilacji wygląda następująco (163 znaki):

(function () {
    var Coffee;
    Coffee = (function () {
        function Coffee() {}
        Coffee.prototype.test = function () {};
        return Coffee;
    })();
}).call(this);

~~Prosta matematyka doprowadza do faktu że piszemy 5 razy szybciej!~~ Tworzenie kodu może i zajmuje mniej czasu, ale czy oszczędzamy w ten sposób czas podczas debugowania? Trudno powiedzieć.

Bibliografia

Strona główna projektu CoffeeScript: coffeescript.org.

Aktualna wersja projektu: 1.1.2

Podsumowanie

Instalacja przebiega bezproblemowo, pobieramy tylko kompilator i gotowe! Jeśli chcemy być wygodni i z każdego miejsca uruchamiać kompilator do dodajemy ścieżkę do katalogu zawierający plik kompilatora i cieszymy się kompilacją gdziekolwiek byśmy nie byli w systemie.

HackmeMove — kolejna odsłona programistycznych łamigłówek

Piotr Kowalski — Mon, 12 Sep 2011 00:00:00 +0000

Hackme - gra od programistów dla programistów, który celem jest utrudnianie dojścia do kolejnego poziomu, a tym samym do końca gry.

Dobrnięcie do ostatniego ekranu - nigdy nie wiemy ile jeszcze ekranów/stron zostało do końca - oraz wykrycie podatności na niej, wiąże się z gratulacjami i pochwałą od autora.

Wszystkie 3 wersje są dość ciekawe, ponieważ poruszają wszelkie błędy zabezpieczeń, spotykanych w środowisku Web’owym, poprzez niezabezpieczone ciasteczka z hasłami, aż do plików *.phps na serwerze, co wykrywane jest poprzez forceful browsing.

Dzisiaj ( 11.09.2011 ) Unknow - autor wszystkich 3 gier, opublikował grę typu Hackme, lecz kierującej się innymi zasadami. Dlatego też to nie jest kolejna wersja gry, lecz inny typ gry. Nie ma poziomów, ale jest za to trudniejszy problem do rozwiązania 😄

Każdy chcący spróbować swoich sił w grze HackmeMove musi posiadać konto na forum UW-Team.org oraz ściągnąć plik hackmemove.html na swój komputer.

Zapraszam chętnych do spróbowania swoich sił: uw-team.org/hackmemove.html

Wynikami można się chwalić przesyłając adres strony z podsumowaniem, o unikalnym parametrze na stałe przypisanym do użytkownika.

Mój wynik to lekko ponad 3 godziny. uw-team.org/hm_12819_0e0d3ca2.html

Dodawanie metody do obiektu Function poprzez "addMethod"

Piotr Kowalski — Mon, 12 Sep 2011 00:00:00 +0000

Język JavaScript nie jest językiem obiektowym klasycznie, lecz prototypowo. Dodawanie metod do obiektu odbywa się w inny sposób niż jest to np. w Javie. Dlatego przez ogromną ilość programistów, którzy zaczynali od języka klasycznego transfer do składni JavaScript jest bolączką.

Przykład

function Carousel() {
    this.run = function () {
        // pass
    };
}

Carousel.prototype.move = function () {
    // pass
};

var carousel = new Carousel();
carousel.move();

Ale zamiast tego brzydkiego zapisu jakim jest Carousel.prototype.move Douglas Crockford utworzył ładniejszy oraz bardziej naturalny zapis dodawania metod do obiektu, pomijając tym samym słowo kluczowe prototype.

Istnieje też stworzenie metody w obiekcie poprzez słowo kluczowe this, ale po utworzeniu obiektu będzie ono na sztywno przypisane z danym obiektem. Dlatego dodanie metody prototypowo zdecydowanie wykorzystuje pełną siłę języka.

Function.prototype.addMethod = function (name, func) {
    this.prototype[name] = func;
    return this;
};

Po dodaniu takiego rozwiązania do obiektu Function, dodawanie metod przedstawia się następująco:

function Carousel() {
    this.run = function () {
        // pass
    };
}

Carousel.addMethod('move', function () {
    // pass
});

var carousel = new Carousel();
carousel.run();
carousel.move();

DevMeetings: noSQL Databases [Relacja Live]

Piotr Kowalski — Sat, 10 Sep 2011 00:00:00 +0000

Pierwszy raz DevMeetings w całości został poświęcony noSQL‘owym bazom danych. Poprawnie mówiąc storage-om dokumentów JSON.

Jest to kontynuacja spotkań DevMeetings-owych bezpośrednio po DevCapmie. Kampania wrześniowa devcampa opiera się o 3 Mocne DevMeetings-y:

Miejsce: Millenium Plaza (milleniumplaza.pl/)

Prowadzący: David de Rosier

Skład: 22 programistów piszących na co dzień w językach takich jak:

Java
Python
Ruby
JavaScript

Cel: Stworzenie aplikacji na kształt prostego Twittera

Zaczynamy od migracji danych z bazy MySQL’owej w celu przebadania wydajności migracji z bazy relacyjnej do bazy dokumentowej.

Wykorzystywane architektur NoSQL:

MongoDB
CouchDB
Redis
Cassandra

Do napisania:

Migrator w Node.js z mysql do dowolnej platformy NoSQL-owej
Interfejs www, dzięki któremu użytkownicy będą mogli korzystać z aplikacji
Połączenie z kodem Adama Jodłowskiego z poprzedniego DevMeetingu w Poznaniu
Zaprezentowanie działającej aplikacji Twitter’o podobnej

Realizacja

9:25

Zaczynamy! Czyli czas start: 12 godzin!
Na sali są ludzie, którzy posiadają olbrzymią wiedzę nt. związany z NoSQL-em
Jak i (begginerzy) tacy, którzy posiadają wiedzę o JS, Java, Python, Ruby, a chcą się dowiedzieć “czegoś” o bazach danych NoSQL’owych i zastosować w praktyce

10:13

Pytania (już kilkanaście) - istny flame się rozpoczął. Dobrze jeśli już od początku u uczestników szkolenia wyczuwa się zapał i chęci do współpracy.
David omawia widoki tymczasowe w CouchDB (wołamy funkcje na wszystkich dokumentach ), czyli tzw. persistent view

10:24

Krótkie przedstawienie najbardziej popularnej architektury NoSQL - MongoDB
“MongoDB - try it” - ciekawa aplikacja webowa dzięki której piszemy w MongoDB bez konieczności posiadania dodatkowego oprogramowania, kod pisany w polu uruchamia się online’owo w locie

10:36

Nowy temat wzbudzający srogą ciszę na sali - Apache Cassandra. Jak się później okazało, nikt, absolutnie nikt, poza David’em nie miał styczności z tą technologią.
Założenia Cassandry - Gromadzenie ogromnej ilości danych
Główne pytanie: jak definiuje się czas “t” ? Odpowiedź: w dniach
Cassandra w swojej naturze posiada oddzielny protokół do komunikacji pomiędzy węzłami

10:40

Slajdy się skończyły
What next?

10:43

Witamy nowego prowadzącego z sali
David na chwilę usiadł na krzesełku oddając głos uczestnikowi który podobno miał już doświadczenie w Redis’ie - jako jedyny pracował na tego rodzaju bazie danych ze wszystkich biorących udział w DevMeetings’ie

10:48

Burza mózgów dot. Redis’a
Po przedstawieniu pokrótce wszelkich głównych właściwości Redis’a można stwierdzić, że prelegent dość mocno wykorzystywał w praktyce tę bazę w swoich aplikacjach

11:04 - 11:24:

Przerwa. A po przerwie… kodowanie

12:13

Nasz projekt:
- mysql
- cassandra
- Node.js
- express
- Node.js razem z bazą: cassandra - node_cassandra
- Node.js razem z bazą: mysql - node-mysql
- CoffeeScript
Doszedłem do porozumienia z kolegą z teamu, że CoffeeScript jest milion razy szybszy!
Pierwsze zadanie - migracja danych z bazy mysql do cassandra

13:12

Szybki re-search sterowników - pewnie będzie trudno coś znaleźć
Po kilku minutach znalazłem 3 różne implementacje sterowników. Zaczynamy od node-thrift!
Kompilacja thrift’a - sterownik do łączenia do cassandra

13:54

CONNECTED! - i think so 😄
Po testach kilku sterowników, wreszcie udało się połączyć z Cassandrą przez NodeJS

14:08

Czas na przerwę obiadową.
Nie wiem, czy pizza jest dobrym pomysłem na obiad ale idziemy kolokwialnie “wrzucić coś na ząb”

15:18

Powoli wszyscy się schodzą.
Planowany czas rozpoczęcia drugiej części to 15:45

17:47

Node + Cassandra - sterowniki jak i dokumentacja są blee!
Teraz widzę, jak bardzo potrzebna jest dobra dokumentacja do projektu!
Będę musiał pomyśleć nad lepszą dokumentacją do pklib‘a

19:00

Niestety nie udało się, polegliśmy na sterowniku Node.js do cassandry
Na koniec David zaprezentował przykład ostatniego brainfuck’a

Analizujcie (bez uruchomienia w Firebugu) jaki będzie rezultat tego jednolinijkowego skryptu.

(39595885326972).toString(2 << -~-~2);

Podsumowanie i wnioski

Kolejne szkolenie z serii DevMeetings, dzięki któremu nasz poziom umiejętności radykalnie się powiększył. Dzisiejsza odsłona miała na celu zaprezentowanie plusów i minusów konkretnych środowisk bazodanowych.

Sterownik dla NodeJS do Cassandry zawiódł
Prawdopodobnie najlepsze sterowniki są napisane w Javie
Najszybciej do zaimplementowania dzisiejszej aplikacji przyszło zespołowi, który używał jako bazy NoSQL’owej systemu Redis

Własna biblioteka cross-platform w JavaScript

Piotr Kowalski — Tue, 06 Sep 2011 00:00:00 +0000

Cykl życia programisty charakteryzuje się tym, że po skończonym projekcie przychodzi następny. W każdy projekcie piszemy kod JavaScript który wykonuje konkretną pracę.

Bardzo często jednak zdarza się sytuacja, że kod który piszemy musimy wykorzystać ponownie. Dobry podejściem jest, aby ten kod zamknąć w prostą bibliotekę, którą będziemy używali w miarę potrzeb.

Po pierwsze: `Nazwa biblioteki`

W każdym projekcie zalecaną praktyką jest stworzenie namespace’a o skróconej (jednowyrazowej) nazwie projektu.

Przykładem niech będzie artykuł Krzyśka Suszyńskiego na blogu technologicznym jego firmy Mediovski - artykuł: Sesja, a aktywność użytkownika.

Krzysiek napisał funkcję do przedłużania żywotności sesji:

pl.mediovski.technology.FormSessionHolder();

Pierwszą przestrzenią nazw jest tu język - pl. Według mnie jest to opcjonalny parametr, bo przecież zamysłem programisty jest napisanie funkcjonalności, a nie słownika, dlatego też język jest opcjonalny.

Kolejną przestrzenią jest mediovski - nazwa firmy. Następnym technology - nazwa produktu (tak mniemam). W ostatnim namespace’ie znajduje się klu sprawy - funkcja FormSessionHolder.

Po drugie: `Wzorzec projektowy`

Musimy się zastanowić w jaki sposób będziemy pisali swoją bibliotekę, tj. z jakiego wzorca skorzystamy podczas budowania prototypu naszej biblioteki.

Bardzo popularny wzorcem do tego rodzaju jest Singleton. Dla początkujących programistów jest to zalecany wzorzec.

Przykład biblioteki dla projektu Foo:

foo = {
    bar: {
        baz: function () {
            // do something
        }
    }
}

Lista najważniejszych wzorców znajduje się tutaj.

Uwaga: Komentarze

Komentowanie swojego kodu jest niepodważalnie właściwą praktyką. Mając na uwadze fakt, że często kod który piszemy nie my będziemy utrzymać, chęć komentowania spada, ale jeśli to by będziemy głównymi odbiorcami to musimy robić zapiski w kodzie źródłowym.

Do prawie każdego języka wysokiego poziomu powstał system dokumentacji.

Java - JavaDoc
PHP - PHPDoc
JavaScript - JSDoc

Przykład prosto z Wiki: komentowanie zgodne z JSDoc:

/**
 * Creates an instance of Circle.
 *
 * @constructor
 * @this {Circle}
 * @param {number} r The desired radius of the circle.
 */
function Circle(r) {
    /** @private */ this.radius = r;
    /** @private */ this.circumference = 2 * Math.PI * r;
}

Uwaga: Wywołania zwrotne (`callbacks`)

Dobra praktyką związaną ze zdarzeniową naturą języka JavaScript jest umieszczanie ostatniego argumentu jako callback - funkcja, która uruchomi się po zakończeniu działania zdefiniowanej.

Wszystko to, co opisałem pojawiło się w moich realiach programistycznych. Nie raz miałem zadanie napisania zawsze wycentrowanego kontenera - typu pklib.message.

W pewnym momencie zatrzymałem się na chwilę i zastanowiłem… po co kolejny raz piszę to samo? Dlatego kiedy napisałem to ostatni raz, zapisałem kod do swojej biblioteki wieloplatformowej i nazwałem ją (p)iotr (k)owalski (lib)rary tj: pklib.

Podsumowanie

Pisanie własnej biblioteki znacznie przyspieszy pracę przy kolejnych zadaniach. Kod raz napisany powinien być reużywalny, tj. wielokrotnie używany.

Node vs Element

Piotr Kowalski — Tue, 06 Sep 2011 00:00:00 +0000

Bardzo często początkujący programiści pracujący z DOM-em, mają problem z odróżnieniem Element-u od Node-a. Chciałbym wytłumaczyć prostymi słowami jaka jest różnica.

Różnice

Node: Node to jest dowolny element, komentarz, pusty znak, węzeł CDATA a nawet fragment dokumentu.
Element: Element jest to Node o typie 1 oraz nazwie systemowej ELEMENT_NODE.

Uproszczony diagram ukazujący relacje między Node a Element.

Co zawiera Node?

W przyrodzie istnieje 12 typów NODE-ów. Poniżej ich lista:

ELEMENT_NODE - document.createElement
ATTRIBUTE_NODE - document.createAttribute
TEXT_NODE - document.createTextNode
CDATA_SECTION_NODE - document.createCDATASection
ENTITY_REFERENCE_NODE
ENTITY_NODE
PROCESSING_INSTRUCTION_NODE - document.createProcessingInstruction
COMMENT_NODE - document.createComment
DOCUMENT_NODE
DOCUMENT_TYPE_NODE
DOCUMENT_FRAGMENT_NODE - document.createDocumentFragment
NOTATION_NODE

Mięso

Dla przykładu dodam trochę kodu, który rozjaśni sprawę:

document.createComment('my comment') instanceof Node; // true
document.createComment('my comment') instanceof Element; // false
document.createComment('my comment') instanceof Comment; // true

document.createElement('style') instanceof Node; // true
document.createElement('style') instanceof Element; // true
document.createElement('style') instanceof HTMLElement; // true
document.createElement('style') instanceof HTMLStyleElement; // true

document.createTextNode('piw paw!') instanceof Node; // true
document.createTextNode('piw paw!') instanceof Element; // false
document.createTextNode('piw paw!') instanceof Text; // true

document.createDocumentFragment() instanceof Node; // true
document.createDocumentFragment() instanceof Element; // false
document.createDocumentFragment() instanceof DocumentFragment; // true

document.createAttribute('a') instanceof Attr; // true

Błąd w mojej bibliotece `pklib`

W bibliotece pklib znajduje się metoda isNode która sprawdza, czy dany obiekt, przesłany jako parametr, jest obiektem typu node.

Niestety wykorzystuje ona “Duck typing” zamiast wykorzystać operator instanceof - dlatego też biblioteka NIE DZIAŁA poprawnie!

Przykładowy kod:

var $div = document.createElement('div');

pklib.dom.isElement($div); // true - wszystko jest zgadza...
pklib.dom.isNode($div); // false - no i tu jest zonk!

Jak możesz zobaczyć w przykładzie funkcja isNode nie zwraca poprawnej wartości gdy podajemy jako parametr HTMLElement, który jest przecież elementem pochodnym Node-a.

Ta biblioteka ma wiele błędów. Dlatego uznaje ją jako DEPRECATED i proszę drogi czytelniku o nie używanie jej - no chyba, że chcesz przetestować jak źle działa 😄.

Podsumowanie

Mam nadzieje, że szybko wyjaśniłem Ci jaka jest różnica między Node-a.

W razie pytań zostaw komentarz.

Ze swojego doświadczenia polecam MDN, gdzie jest dobra dokumentacja.

Klient FTP — plugin czy program?

Piotr Kowalski — Sat, 03 Sep 2011 00:00:00 +0000

Publikacja aplikacji na zewnętrzne serwery bardzo często przysparza programistom wiele problemów z ich klientami FTP - Fire Transfer Protocol. Niektóre się wyłączają, inne nie mają przydatnej opcji “edycji w locie”.

W locie oznacza edycję plików bezpośrednio na serwerze, bez konieczności kopiowania pliku do edycja na nasz dysk twardy.

Total Commander

Moim początkom z wgrywaniem plików na serwer zawsze towarzyszył Total Commander. Aplikacja darmowa do użytku prywatnego. Za komercyjną licencję należy zapłacić. Istnieją dwie opcję licencji do kupienia:

standardowa
dla studenta

Więcej informacji pod tym adresem.

Total Commander do kombajn, nie ma co ukrywać, posiada bardzo dużo opcji konfiguracyjnych, ale czy podczas kopiowania plików na serwer są one nam potrzebne?

Plugin do przeglądarki Mozilla Firefox

Dla mnie nie, więc poszukałem czegoś lżejszego. Znalazłem plugin do Firefox-a o nazwie FireFTP.

Plugin instaluje się jak inne dowolne pluginy. Jest kompatybilny ze wszystkimi wersjami FF. Znajduję się w repozytorium pluginów pod adresem: https://addons.mozilla.org/pl/firefox/addon/fireftp/, więc instalacja polega na wpisaniu nazwy wtyczki do okienka: `Narzędzia → Dodatki`

Możliwości pluginu są dla mnie wystarczające. Konfiguracja nie odstrasza, tak jak w przypadku TC. Do codziennego upload-owania plików to jest wystarczający.

Może istnieje jeszcze inne narzędzie? Nie wiem.

Gotowe szablony na stronę WWW

Piotr Kowalski — Fri, 02 Sep 2011 00:00:00 +0000

Od pewnego momentu naszła mnie ochota aby troszeczkę zmienić layout mojej strony oraz homepage-u mojej biblioteki JavaScript pklib. Dlatego zabrałem się za poszukiwanie nowych layoutów w serwisach oferujących darmowe albo płatne layouty.

Zrobiłem krótki research w środowisku grafik designerów i jak się okazało koszt layoutu zaczyna się od 1500 pln,- 😄 Cena jest dość wysoka, ale za przelanie swojego wyobrażenia strony internetowej do formatu PSD nie jest szybko i łatwą sprawą.

Postawiłem jednak, że poszukam gotowego layouty zrobionego przez freelancerów którzy sprzedali swoje layouty serwisom, które je oferują na sprzedaż.

Jednym z takich serwisów jest http://www.4templates.com. Baza layoutów jest dość obszerna i ma ponad 90 stron z różnego rodzaju layoutami. Sądzę że, każdy znajdzie tu coś dla siebie. Koszt za pojedynczy egzemplarz zaczyna się od 5 dolarów, a górna granica to około 30$.

Jako przykład mogę podać layout który zakupiłem dla strony głównej biblioteki pklib.

Krótkie poszukiwania darmowego layoutu szybko skłoniły mnie do stwierdzenia, że to, co darmowe w tym przypadku nie jest dobre, niestety.

Podsumowanie

Polecam zakup layouty ze względu na:

jakość wykonania projektu graficznego
nowoczesny układ
dobra jakość kodu
możliwość dowolnej przeróbki

Na koniec zamieszczam kilka wartościowych linków:

Jak stworzyć przyjazne linki w WordPress?

Piotr Kowalski — Sat, 27 Aug 2011 00:00:00 +0000

Podczas tworzenia swojego bloga napotkałem się na taki element w konfiguracji jak Bezpośrednie odnośniki. Dzięki temu panelowi możemy w dowolny sposób modelować wygląd adresów naszego bloga.

Mój przykład: piecioshka.pl/blog/info/witaj-swiecie

Zaraz po adresie bloga jest nazwa kategorii, a następnie slugowana tytuł posta. Zapis w konfiguracji wygląda następująco:

/%category%/%postname%

Wybrałem opcję Własny format i wklepałem kod powyżej do input-a. Następnie w głównym katalogu utworzyłem plik .htaccess.

O następującej zawartości:

# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress

Po tych dwóch krokach linki są zdecydowanie bardziej przyjazne niż https://piecioshka.pl/blog/?page=3.

Właściwa dokumentacja znajduje się tutaj: codex.wordpress.org/Using_Permalinks

Piotr Kowalski — JavaScript, Front-end oraz Node.js

15 aplikacji, które zwiększą Twoją produktywność (2024)

Let’s go!

Podsumowanie

Dlaczego czytam książki o bibliotekach?

Geneza

Dlaczego czytam książki?

Co stoi w opozycji?

Podsumowanie

Recenzja: "React w działaniu. Tworzenie aplikacji internetowych. Wydanie II"

Dlaczego kupiłem tą książkę?

Czego mogę się nauczyć z tej książki?

Czy jest “treściwa”, czy dużo jest lania wody?

Czy zawiera wiedzę, którą trudno gdzieś indziej znaleźć?

Jaki jest docelowy odbiorca (stary wyjadacz czy początkujący)?

Czy jest bardziej teoretyczna, czy też większy nacisk jest postawiony na przykłady?

Czy przykłady są wartościowe?

Czy ktoś doświadczony może się czegoś nowego dowiedzieć?

Porównanie do podobnych pozycji na rynku

Podsumowanie

Plusy

Minusy

Diagram Sekwencji w UML (przykłady w JavaScript)

Po co stosować Diagram Sekwencji?

Co to jest UML?

Diagram Sekwencji w Specyfikacji UML

Notacja

Linia życia - prostokąt z pionową linią

Komunikat - pozioma strzałka z podpisem

Fragment - prostokąt, który zawiera pewien zakres czynności

Jakiego typu informacje zamieszczamy na Diagramie Sekwencji?

Przykład

W jakich narzędziach tworzymy Diagramy Sekwencji?

Narzędzie VSCode Sequence Diagrams - plugin do VSC

Ważne!

Książki

Filmy

Słownik trudnych słówek

Zadania na przećwiczenie

Bibliografia

Jak sprawdzić typ zmiennej w JavaScript? Operator typeof

Typowanie w języku JavaScript

typeof w specyfikacji ECMA-262 edycja 14 (2023)

Zasada działania (bez języka formalnego, tak zwyczajnie, po polsku)

Reference Record

document.all

Reserved Word

Przypadki użycia typeof

Wskazówka

Co z tablicą?

typeof w popularnych bibliotekach

Podsumowanie

15 pluginów do Visual Studio Code (2023)

Let’s go!

Pytanie do Ciebie 💡

Technika Pomodoro. Dzień 1. Wnioski

Co to jest technika Pomodoro?

Wnioski

1. Przerwy

2. Czas skupienia

3. Rozpraszacze

Mój sposób:

4. Narzędzia

Tip do autorów aplikacji FLOW

5. Skupienie

Tip do autorów aplikacji FLOW

Tip do autorów aplikacji FLOW

6. Przerwy

7. Odruchy

8. Przerwy, a aktywność fizyczna

Mój sposób:

Narzędzia vs Budżet

Zakończenie

Feature Flags: Poznaj różnicę między deployem a releasem

Co to jest mechanizm Feature Flag?

Z czego składa się mechanizm Feature Flag?

Jak wykorzystać mechanizm Feature Flag?

“deploy” vs “release”

Dobre praktyki związane z Feature Flagami

Demo 🎉

`typeof` w specyfikacji ECMA-262 edycja 14 (2023)

`document.all`

Przypadki użycia `typeof`

`typeof` w popularnych bibliotekach

2. Dodać nową ścieżkę do zmiennej środowiskowej `$PATH`

3. Stworzyć plik `git-user` w katalogu `git-scripts`

6. Uruchomić polecenie `git user`

Moje `git-scripts`

Kilka słów o `SyntheticEvent`