Michał Miszczyszyn / typeofweb
JavaScript, HTML, CSS, TypeScript, Node.js, React.js, Angular, ReasonML
Ostatnie newsy
Metody oraz pola typu computed w Vue.js
Metody oraz pola typu computed pozwalają zgrabnie enkapsulować logikę wyliczania wartości na podstawie pól danych komponentu i prowadzą do lepszego kodu.
Atrybuty class i style w Vue.js
Vue traktuje inaczej dwa atrybuty html - `class` i `style` - sprawiając, że korzystanie z tego frameworka jest przyjemniejsze i łatwiejsze.
Pętle w Vue.js z użyciem dyrektywy v-for
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Pisząc aplikacje w Vue.js bardzo często bedziesz chciał(a) wyświetlić listę elementów w pętli na podstawie tablicy. Właśnie w tym celu „język szablonów” wbudowany w Vue.js udostępnia dyrektywę v-for. W najprostszej postaci odpowiada ona pętli for znanej z JavaScriptu. Wyświetlanie listy przy użyciu dyrektywy v-for Dyrektywa v-for używa specjalnej składni aktualnyElementy in tablicaZDanymi gdzie tablicaZDanymi jest… źródłową tablicą …
Dyrektywy warunkowe w Vue.js
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Pisząc aplikacje w Vue.js często spotkasz się z sytuacją, w której wyświetlenie lub nie danego elementu będzie zależało od wartości zmiennej. Właśnie do tego służą dyrektywy warunkowe v-if, v-else, v-else-if, (oraz w pewnym sensie v-show), które odpowiadają instrukcjom warunkowym znanym z JavaScript. To właśnie te dyrektywy Ci dziś zademonstruję. Pokazywanie i ukrywanie elementów za pomocą dyrektywy v-if Najbardziej podstawową dyrektywą umożliwiającą pokazywanie elementów …
Poradnik dla organizatorów konferencji
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Chciałabyś/chciałbyś zorganizować konferencję? Martwisz się, czy o wszystkim pomyślałaś/pomyślałeś? Czy wszystko będzie idealnie? Nie jesteś sam(a)! Po 5 latach organizowania spotkań meet.js Gdańsk, na które za każdym razem przychodzi ponad 150 osób, po 2 edycjach meet.js Summit Gdańsk, na których pojawiło się łącznie blisko 1000 uczestników i po udziale w nie pamiętam jak wielu konferencjach na całym świecie — chcemy podzielić się naszymi doświadczeniami. Oto poradnik dla organizatorów konferencji. Autorami wpisu są: Wojciech …
Higher Order Reducers — Redux i powtarzanie kodu
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Higher Order Reducers — co to takiego? Gdy popracujesz dłużej z Reduksem to na pewno zauważysz pewne powtarzalne wzorce. Napisanie akcji i reducerów do obsługi API to konieczność powtórzenia bardzo podobnego kodu kilka, kilkanaście razy! Czy na pewno jest to konieczne? Z pomocą przychodzą właśnie Higher Order Reducers i kompozycja. Definicja Higher Order Reducer Higher Order Reducer to funkcja, która zwraca reducer i (opcjonalnie) przyjmuje reducer jako …
Dynamiczne atrybuty w Vue.js – dyrektywa v-bind
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… W poprzednim wpisie pokazałem Ci jak wyświetlić dynamiczne dane w Vue.js za pomocą wąsów, czyli podwójnych nawiasów klamrowych ({{ nazwaZmiennej }}). Dziś dowiesz się jak przekazać je do atrybutów elementu HTML za pomocą dyrektywy v-bind. Dyrektywa v-bind Dyrektywy w Vue.js to specjalne atrybuty z przedrostkiem v-. Wartością takiej dyrektywy jest wyrażenie JavaScript. Dyrektywy mają za zadanie reaktywne aktualizowanie drzewa …
Pierwszy komponent Vue.js
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Vue.js jest reaktywnym frameworkiem JavaScript. Znaczy to, że dowolna zmiana danych używanych do wyświetlania strony sprawia, że widok automatycznie jest aktualizowany tak, aby odzwierciedlić tę zmianę. Dodanie Vue.js do strony Żeby zacząć korzystać z Vue, wystarczy, że dodasz odpowiedni tag do pliku html: W dalszych częściach kursu omówimy bardziej skomplikowane techniki dołączania Vue.js do Twojej strony, ale pamiętaj, …
W 2018 migruję z GitHuba
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Microsoft kupił GitHuba za przewrotną kwotę 7,5 miliarda dolarów. Co to oznacza dla użytkowników? I najważniejsze: Co to oznacza dla idei Open Source? Kilka faktów o GitHubie GitHub jest internetowym hostingiem repozytoriów git. Istnieje od 2008 roku. Jest wykorzystywany głównie do przechowywania kodu źródłowego aplikacji. Ale GitHub to także platforma społecznościowa. Zrzesza miliony — a dokładnie 24 miliony użytkowników i 67 milinów repozytoriów. GitHub oferuje zarówno hosting …
Wprowadzenie do kursu Vue.js od podstaw
Oto kurs Vue.js! Moje gratulacje za podjęcie tego tematu! Vue.js to bardzo popularna biblioteka i warto ją poznać! Poznaj framework JavaScript Vue!
Leniwe ładowanie komponentów w React dzięki import
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Czy w React da się ładować komponenty leniwie? A więc masz już sporą aplikację. Chcesz ją jakoś zoptymalizować. Do głowy przychodzi Ci, oczywiście, podział jej na kilka części, które będą ładowane na żądanie, dopiero gdy będą potrzebne — tzw. lazy load. Z pomocą przychodzi operator import(…) — po prostu! Operator import(…) Składni import something from 'something' używasz na pewno codziennie. W skrócie, powoduje ona, że dana zależność …
Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Od wersji React 16.3 funkcje componentWillMount, componentWillReceiveProps i componentWillUpdate zostają oznaczone jako deprecated. Pojawiają się też dwie nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate. Co to dla nas oznacza? Do czego one służą? Jak ich używać? Informacje o pozostałych lifecycle methods w React znajdziesz tutaj: Metody cyklu życia komponentu w React.js Co złego w starych metodach? W React wprowadzony zostaje powoli Async Rendering …
24 blogi, które musi śledzić każdy JavaScript developer
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Wciąż pytacie jakie blogi polecam śledzić. A ja nigdy nie pamiętam ? No, ale teraz jest już cała lista! Moja lista polecanych linków dla front-end developerów! To drugi wpis z serii. Blogi Na drugi ogień idą blogi, po grupach na Facebooku. Dla przypomnienia: 20 grup na Facebooku, które powinien śledzić każdy front-end developer Warto przeczytać oba wpisy i znaleźć tam coś dla …
Kiedy używać state, a kiedy Redux?
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Bardzo często osoby poznające bibliotekę Redux próbują przenieść cały stan każdego komponentu do Reduksowego store’a. Czy to ma sens? Czy powinnaś całkowicie przestać używać setState? Nie ma nic złego w state Naprawdę. Nie ma nic złego w używaniu setState. Ale kiedy użyć setState, a kiedy Reduksa? W podjęciu decyzji może Cię wspomóc lista pytań pomocniczych. Znajdziesz je poniżej! Czy te dane dotyczą tylko jednego komponentu czy kilku? Prosta …
Asynchroniczność w Redux: redux-thunk
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Do tej pory dane z API pobierałem po prostu w komponencie App, a po przyjściu odpowiedzi wysysyłałem odpowiednią akcję (contactsFetched). To działało. Ale wymyśliłem sobie nową funkcję w aplikacji: Możliwość parametryzowania zapytań do API. Posłuży mi do tego nowy komponent. Jak teraz mam wykonywać zapytania do API? Przekazywać coś do store, a to coś wpłynie na App, który wykona zapytanie i zwróci dane znowu do store? Nie brzmi za dobrze. Ale jest lepszy …
typeofweb
JavaScript, HTML, CSS, TypeScript, Node.js, React.js, Angular, ReasonML
Michał jest programistą JavaScript z wieloma latami profesjonalnego doświadczenia. Organizator meet.js Summit i meet.js Gdańsk. Bloger na typeofweb.com, a okazyjnie także prelegent.