Luke J. Li

10 Great Sites for UI Design Patterns Coś na temat UX. Anders Hejlsberg on Modern Compiler Construction Anders Hejlsberg* opowiada o tym, w jaki sposób wygląda kompilator nowego typu (używany np. przy pisaniu kodu w C# w Visual Studio) i w jaki sposób różni się od starego podejścia. *jak prawi wikipedia: "The original author of Turbo Pascal and the chief architect of Delphi. He currently works for Microsoft as the lead architect of C#[1] and core developer on TypeScript." Ciasteczka Brownie Bo akurat teraz zrobiłem wg tego przepisu. Jeszcze nie wiem, jak wyjdą (chłodzą się).

Clean Architecture Cheat Sheet Mała ściągawka z różnymi wskazówkami, na temat tego, w jaki sposób mieć "czystą architekturę" w kodzie. Julia Galef (Kanał na Youtube) "Insights from and explanations of philosophy, rationality, science and more. By Julia Galef (http://juliagalef.com) all-the-widgets Film z 1990, na którym pokazują szczegóły widżetów GUI, jakie do tej pory istniały (Zadziwiające, że od tamtego czasu niewiele się zmieniło w GUI - praktycznie to, co znamy teraz, już wtedy istniało).

React Sight Visualization tool for React, with support for Fiber, Router (v4), and Redux The Dating Scientist "India's first original web series on Data Science." Serial komediowy o data scientistach

Jestem zwolennikiem krótkich nazw. Niech nazwa funkcji czy klasy będzie jednym słowem. Czasem dwoma. Klasy o nazwach typu  ObjectFactoryCreatingFactoryBean łamią moje poczucie stylu. Parametry też funkcja powinna mieć w niewielkiej liczbie. Jeśli można, winno być to zero. Jeśli chcemy, możemy dodać również parametr czy dwa. Jednak dalsza ich liczba to przesada*.   Ciężko zapamiętać wtedy kolejność. Lepszym rozwiązaniem byłoby wtedy przekazanie tablicy albo obiektu. Uzasadnionym wyjątkiem być może mogłaby być funkcja, która działałaby jak `console.log` - to znaczy brałaby  wszystkie końcowe argumenty i robiła z nimi dokładnie to samo. * dodane 3.10.2017: no, może trzy parametry jeszcze ujdą - nie chodzi o to, żeby się kurczowo trzymać liczby parametrów, tylko o to, żeby nie robić bałaganu. Czasem nawet 4 parametry będą ok, np. moglibysmy mieć createRectangle(x, y, width, height) i byłoby to dalej intuicyjne. Jednak nawet wtedy rozważyłbym api createRectangle({x: 0, y: 0, width: 1

Dzisiaj będą linki o machine learning. Machine Learning Recipes Seria tutoriali na Youtube na kanale Google Developers, prowadzona przez Josha Gordona. Bardzo fajne wprowadzenie od zera, z ilustracjami/animacjami. Kod z tutoriali:  https://github.com/machine-learning-projects/machine-learning-recipes Decision Tree (CART) - Machine Learning Fun and Easy inna seria tutoriali (na kanale Arduino Startups) również fajnie wyjaśnione w formie wizualnej, na czym to polega. A visual introduction to machine learning Interaktywna strona, podczas której przewijania pokazują się animacje ilustrujące tematykę machine learningową.

The Book of Shaders Książka (można czytać online) o shaderach w Open Gl Regexly Regexly - taka mała pomoc przy pisaniu wyrażeń regularnych w JS. Regex101 Inna pomoc do wyrażeń regularnych, bardziej rozbudowana i obsługująca różne języki. Bundlephobia "find the cost of adding a npm package to your bundle".

Modularne. Oparte na wymienialnych komponentach. Dlaczego tak? Obecne IDE/edytory są zbyt monolityczne. Niby można konfigurować edytory czy instalować wtyczki (albo pisać własne), jednak i tak w dużym stopniu ogranicza cię API danego edytora i sam edytor jako taki, jego możliwości. Tego, czego twórcy nie przewidzieli albo nie zrobisz, albo zrobisz, ale w dość partyzancki sposób. Chociaż w Atomie przynajmniej da się robić hakerkę, w VSCode API do rozszerzeń jest bardziej ograniczone i nawet hakerki specjalnie się nie da zrobić. Co za tym idzie jak coś jest źle zrobione, to możesz czasami tylko czekać aż to naprawią (a to może potrwać - np. VSCode stał się ofiarą własnej popularności i ludzie ich zasypują tak wielką liczbą issues na Githubie, że cała developerka się dość wolno posuwa, a feature requests stoją miesiącami. Spójrzcie, co godzinę ktoś otwiera nowy issue: https://github.com/Microsoft/vscode/issues ). A to wszystko przez monolityczną budowę edytorów. Gdyby edytory b

Dzisiaj będą linki o HTML/CSS, z położonym akcentem na CSS Grid. Courses - code club Tutoriale do HTML/CSS, a także do innych języków (Pythona, Scratch, Raspberry PI, Sense Hat i Sonic Pi). Tutoriale się wyróżniają tym, że są małe kroki, dużo ilustracji i jakaś "fabuła" (dlatego zwróciły moją uwagę - często tutoriale są nudne jak barszcz, a te się wydają spoko). Poziom wydaje się być raczej podstawowy. Jeśli natomiast chcecie czegoś bardziej zaawansowanego, to możecie pouczyć się grida. Choćby z tego tutoriala na Youtube: How to create website layouts using CSS grid Grid to taka prostokątna niewidzialna "siatka", którą się nakłada na stronę, żeby wyrównać elementy (które potem sobie siedzą w takich niewidzialnych kwadracikach). Znacie tę koncepcję od czasów tabelek. Potem był Bootstrap i jego klasy "row" czy "col-coś-tam". A teraz jest grid w CSS, bez tabelek czy Bootstrapa. Jeżeli jeszcze macie wątpliwości, że grid jest potrzebny, to

The Nature of Code automaty komórkowe, sieci neuronowe, fraktale... dużo do czytania, a także dużo ilustracji. We learn better in 3D Ktoś zrobił stronę, na której są wizualizacje 3D w stylu: jak różne rzeczy działają. Trochę w stylu tej książki "Jak to działa" , którą również polecam. Jonathan Blow: Indie Prototyping twórca gry Braid mówi o tym, jak prototypuje gry Tego się słuchało: \d+  (różne lata) Ośmiominutowe odcinki, które prezentują piosenki z list przebojów RMF FM na przestrzeni lat (od 1989 chyba jest pierwszy odcinek).

postępy mojej biblioteki Vistate są takie, że: architektura architektura jest już całkiem okej (co prawda musiałem pójść na pewne trade offy, ale jednak myślę, że ma to szansę być skalowalnym rozwiązaniem). Korzystam ze wzorca projektowego Entity-Component-System, który jest używany w grach, a ponieważ nowoczesna developerka JS przypomina trochę robienie gier, to doszedłem do wniosku, że to właściwie to samo. Przy czym ECS używam tylko do middleware'ów. Użytkownicy biblioteki nie muszą o tym nawet wiedzieć, oni mają po prostu modele. A poza tym mimo wszystko dalej moje rozwiązanie jest dość reduxowe, czyli wywołujesz jakieś akcje, odpalają się funkcje, które "zmieniają stan" (tylko różnica jest taka, że o ile reducery w Redux zwracają stan końcowy, to ja działam na drobniejszym poziomie detali i funkcje nie zwracają stanu końcowego, tylko raczej mówią modelowi "co się powinno zmienić" i model to potem dopiero zmienia. Jest to inspirowane wzorcem SAM . Wg

Refleksja: czasem TDD wymaga pisania tak, żeby sfailowało jeśli refaktoryzujesz kod i masz test, który przechodzi, a chcesz żeby sfailował. Czerwone i zielone jest względne. Oczywiście potem przerabiasz testy tak, żeby były zielone, ale tymczasowo to właśnie czerwone testy mogą świadczyć, że twoja zmiana coś wniosła do istniejącego projektu. 

XP Days 2015: Introducing Decombination Talk twórcy techniki Pomodoro, Francesco Cirillo. Nie mówi on jednak o pomidorach, ale o swojej wizji na tworzenie reużywalnego oprogramowania.  Kolejne dwa linki będą nie o programowaniu. Więc się nie oparzcie. Where are the baby dinosaurs? Talk na TED.com, ten gdzie paleontolog mówi ciekawe rzeczy o dinozaurach. I o tym, że uczeni mają duże ego. How to do a GERMAN ACCENT? Dziewczyna (Niemka) rozbiera na części to, w jaki sposób Niemcy mówią po angielsku (różnice między angielskim i niemieckim pod kątem tego, jak Niemcy wypowiadają pewne słowa, głoski). Dzięki temu będziemy mogli udawać Niemca mówiącego po angielsku. Jeśli będziemy mieć taką potrzebę kiedyś.

Robię framework JSowy. Ale bardziej taki jak Redux (tzn. tylko warstwa modelu, biblioteka przeznaczona do podłączenia do innej biblioteki odpowiedzialnej za widok, np. do Reacta). Jednak od Reduxa będzie go odróżniało to, że zamiast jednego dużego drzewka stanów będzie raczej wiele inteligentnych modeli, i akcje będzie się wysyłało do modeli, a nie do obiektu store (przez jakiś store może to przechodzić, ale chodzi o to, że akcje będą miały swoich konkretnych odbiorców. Możecie przeczytać ogólny zarys założeń na Githubie: https://github.com/hex13/enter-ghost/tree/master/packages/vistate A tak będą wyglądać Dev Toolsy do mojej biblioteki, jak widzicie, możecie zobaczyć co się działo dokładnie. A tutaj demko live: hex13.github.io/demos/todo/

The SAM Pattern State-Action-Model, czyli szersze spojrzenie na modne ostatnio wzorce w stylu flux, Redux itp. Chociaż to w zasadzie wychodzi już poza flux. Autor strony nie tyle opisuje to, co już jest, ale pisze co można z tym dalej zrobić, w którą stronę to wg niego powinno pójść.  Dobra strona jeśli chcesz napisać konkurencję dla Reduxa choćby. Albo przynajmniej nabrać szerszej perspektywy Evolve Your Hierarchy o wzorcu Entity-Component-System, przydatnym jeśli chcesz gry robić. Polega on na tym, żeby zamiast tworzyć obiekty jako monolity (Statek, Gracz, Czołg) tworzyć je jako zestawy komponentów.

No proszę, ledwo ogłosiłem, że być może się przeniosę na static site generator to już znalazłem linka, w którym autor daje porady na temat tworzenia bloga w Gatsby (generator stron ze wsparciem dla Reacta)  https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/

Ciekawostka - zmiana motywu graficznego na Bloggerze spowodowało to, że wszystkie linki do zewnętrznych stron (które były w bocznym menu) nagle zniknęły i chyba nie da się ich odzyskać. Coś tam mnie Blogger chyba ostrzegał, że zmiany zostaną usunięte, ale zrozumiałem, że chodzi mu o zmiany wyglądu, kolorów na stronie itp. a nie, że będzie mi zmieniał de facto zawartość bloga, dane. To trochę jakby po zmianie skórki nagle wszystkie posty zniknęły. Co ma piernik do wiatraka? Separation of concerns - dane a widok to dwie różne sprawy. I tu jest chyba pies pogrzebany. Blogger chyba przechowuje dane o linkach w samym widżecie menu w GUI,  to przeczy to wszelkim praktykom tworzenia oprogramowania (używanie warstwy GUI jako trwałego pojemnika na dane biznesowe, związane z dziedziną, tutaj: trzymanie linków). Może się mylę, chciałbym się mylić. Może po prostu te dane nie zniknęły tylko się schowały? Google robi aplikacje z koszmarnym GUI, więc nie zdziwiłbym się gdyby te linki były gdzie

Think About Code O tym jak jak programiści myślą o kodzie, jak sobie to w wyobraźni układają. Wywiady z programistami. Ciekawe dla mnie bo już wcześniej się zastanawiałem w jaki sposób ja myślę o kodzie, nawet chciałem o tym napisać wpis na blogu. A tutaj proszę bardzo. Rozmowy audio z kilkoma programistami na ten temat. Introduction to A* Wprowadzenie do A* - algorytmu wyszukiwania drogi w grach. Baaaardzo kolorowe to wprowadzenie, dużo rysunków, interaktywne animacje. Żadne tam nudy. <XRay /> - React CSS Layout Debugger proste narządzonko, które wyświetla grida na Reactowych komponentach (czy raczej pod nimi). Wejdźcie i kliknijcie "Enable" i patrzcie co się stanie.

Od teraz co niedzielę będzie się pojawiał zrzut ciekawych linków. O tym, jak zrobić izometryczny widok w grze: Creating Isometric Worlds: A Primer for Game Developers O tym jak działa React od środka: Under the hood: ReactJS Gra w alchemię - masz 4 podstawowe żywioły i z nich robisz kolejne przedmioty, poprzez deszcz aż po samochód czy wiewiórkę: Little Alchemy Jeszcze jeden powód, dla którego nie powinno się zaśmiecać strony popupami i głupimi animacjami: Accessibility according to actual people with disabilities

A więc Redux, o ile był fajnym eksperymentem (naprawdę fajnie, że powstał) jest już zasłużony i musi odejść. Pisałem już wcześniej o Reduxie, bardziej opisowo, w wyważony sposób: http://13zmiennych.blogspot.com/2016/12/bedzie-cos-o-reduxie.html teraz będzie natomiast wpis typowo nastawiony na krytykę. A więc jedziemy. Co jest nie tak z Reduxem? Programowanie w Redux jest niewygodne. Ale wielu to nie przeszkadza, gdyż wśród fanów Reduxa jest  silny syndrom sztokholmski . Ludzie, którzy żeby zrobić prostą rzecz muszą napisać ileś reducerów, dołożyć ileś middleware, ileś dodatkowych pomoczniczych bibliotek do Reduxa robionych przez community. Ale na koniec dnia będą się cieszyć, że w ogóle mieli okazję popisać w Reduxie pisząc w 100 linijek kodu to co by mogli napisać w 5 bez Reduxa. Czyli taka sztuka dla sztuki. O ile we wcześniejszych swoich wpisach porównywałem WebStorma do demokracji, to Redux jest jak socjalizm (parafrazując znany cytat można stwierdzić, że "Redux j

Robię kolejną wtyczkę, będzie ona dodawać "inteligencję kodu" do Atoma tak, żeby zamienić go w pełnoprawne IDE. Na razie zajmuję się semantycznym rozumieniem kodu, skokami do definicji, autocomplete, próbuję to doprowadzić do jakiejś zgrabnej postaci. Po tym jak to zrobię opublikuję to jako wtyczkę do Atoma, ale docelowo to zamierzam zrobić z tego całe IDE w ogóle, bo mi się nie podobają te edytory/IDE co istnieją , więc zrobię swoje, będę miał do portfolio ;) Zresztą zrobiłem już kilka prototypów, więc to raczej nie powinno być aż takie trudne.

Tworzę nowe narzędzie do JSa. Będzie ono pomagało debugować programy. Założenie jest takie, żeby śledzić wszystko co się w programie dzieje (np. która funkcja została wywołana z jakimi parametrami i co zwróciła) a potem tworzyć z tego interaktywne raporty w formacie HTML.  Przy czym realizacja do końca tego założenia wiąże się z wyzwaniami - ciężko śledzić wszystko co się dzieje, i też nie ma sensu raportować wszystkiego (chyba, żeby wymyślić jakiś sprytny system filtrów/wyszukiwania, który pozwoliłby pokazywać użytkownikowi jedynie relewantne informacje). Tym niemniej już coś widać, już można z tego korzystać. Na razie jest to testowane tylko na aplikacjach NodeJS, i trzeba pół-ręcznie instrumentować kod (wygooglujcie: code instrumentation), ale i tak cieszę się z efektów: W razie czego klikajcie tutaj: San Escobar - powerful HTML logging for NodeJS applications