gitignoreTrik. 4 W tym wpisie omówimy działa pliku ".gitignore". W tym pliku określasz jakie pliki mają być ignorowane przez repozytorium git.

O ile w samym Git ignorowanie plików przez repozytorium to fajny bajer. To ignorowanie plików na potrzeb umieszczenia później ich gdzieś w chmurze np. w GitHub jest esencją każdego projektu. Nie chciałbyś, aby dane poufne jak hasła wyciekły do GitHub-a albo żyły w historii repozytorium.

Istnieje przypadek utraty przez osobę wszystkich bit coin-ów, bo wrzucił do Github-a przez przypadek swoje hasło do konta.

Nie ma co się bać tego pliku ".gitignore". Jest on naprawdę prosty w obsłudze.

Vim?Trik. 3 W tym wpisie pokaże ci jak zamienić Vim w git na moim zdaniem lepsze narzędzia. Kojarzysz Vim? To ten program, z którego programiści nie umiał wyjść. Kojarzysz memy, aby wyjść z Vim-a, trzeba wyłączyć komputer. Domyślne narzędzia Git są podpięte po ten edytor, ale ty możesz to zmienić.

Vim faktycznie nie jest to przyjaznym programem dla początkujących. Dlaczego więc go nie zastąpić?

Restore?Trik. 2 Zrobiłeś więc zmiany do swojego repozytorium Git. Jak je jednak cofnąć. W tym wpisie zobaczmy trzy polecenia: reset, restore i revert.

Ich nazwa sugeruje, że każde z nich może służyć do cofanie swoich zmian. Jak jest jednak naprawdę. Zobaczmy.

git add -iTrik. 1 W tym wpisie pokaże ci jak, możesz decydować o tym, co wejdzie do danego commita, a co nie. Same polecenia Git to potężne narzędzia i tak może to wszystko zrobić w konsoli.

Dlaczego chciałbyś rozbijać swoje zmiany na pojedyncze commity? Otóż duże commity, które zawierają wiele zmian, są antywzorcem. Gdybyś chciał cofnąć konkretną zmianę, która siedzi częściowo w jednym commicie, to możesz sobie wyobrazić, ile problemów to stworzy.

Dlatego warto robić jeden commit to jednej konkretnej wspólnej zmiany. Zobaczmy, jak to możesz zrobić w konsoli i przy użyciu Git.

W swoim repozytorium Git mam taki plik XML. Nazywa się on system.xml

MailChimp W tym wpisie pokaże Ci co zrobiłem aby stworzyć swój własny newsletter na mojego bloga. Wybrałem MailChimp, ale wiesz mi próbowałem różnych rozwiązań, aby wybrać właśnie ten. Ten blog działa na ASP.NET Core 3.2 więc zobaczmy jak MailChimp API działa w C#?

Teraz każdy szanowany programista ma swój newsletter. No cóż, trzeba iść z duchem czasu, bo jeżeli chodzi o marketing programisty blog to zdecydowanie za mało. Jestem nawet świadomy, że newsletter to coś co powinien mieć jakieś 4 lata temu na moim blogu. 

Chociaż też warto zadać sobie pytanie po co Ci jest newsletter. Ma to sens, jeśli chcesz informować danego klienta o kampanii swojego produktu/kursu. 

Powiedzmy, że ktoś jest zainteresowany Twoim kursem programowania i poprzez newsletter nakręcasz go na zakup lu rozwiewasz jego wątpliwości.

Być może chcesz zaprosić paru użytkowników na cykl e-mail, w których zdradzasz jakiś sekret.

Dlatego o tym piszę? Słuchaj w roku 2020 (i później) zwykły newsletter o tym "co nowego na moim blogu" powoli nie wystarcza i warto się zastanowić po co Ci jest newsletter.  Istnieje nawet szansa, że informowanie swoich fanów o tym "co nowego na twoim blogu:" będzie skuteczniejsze w media społecznościowych niż poprzez newsletter.

Nie powiem, że zacząłem widzieć, że każdy blog programistyczny ma newsletter, ale posiadanie newsletter dla samego posiadania trochę mija się z celem.

CarnacNarzędzie NR.13 Ostatnio co wtorek robię Webinar i zadałem sobie jedno proste pytanie. Co mogę zrobić, aby moim widzowie wiedzieli, co wpisuje w swojej klawiaturze.

Czy jest jakiś sposób na wyświetlanie klawiszy na monitorze w dynamiczny sposób?

O ile są specjalne pluginy do OBS. To ustawienie ich jest bardzo kłopotliwe. Na szczęście istnieje do tego odpowiedni program. 

A tym programem jest: carnac for the hotkey visualization

Cmder W poprzednim wpisie pokazałem Ci jak przygotować do pracy Windows Terminal. Teraz czy to samo można zrobić z Cmder. Tak, ale znalazłem także pewien bug programu, który widać nie radził sobie z modułami PowerShell posh-git i oh-my-posh.

Być może ty też masz ten problem. O to co zrobiłem.

TerminalNarzędzie NR.14 Microsoft słucha i wie, że wiele programistów chce lepszego terminala do systemu Windows. Jak np. korzystałem jak do tej pory z Cmder, który jak pisałem dawno temu był i być może nadal jest wierszem poleceń naszych marzeń.

Pomyśl ile rzeczy robimy dziś w wierszu poleceń. Git, AngularCLR, NPM, a nawet jak pamiętasz są polecenia dla środowiska .NET. 

Wiersz poleceń będą zawsze potrzebne i można nawet powiedzieć, że bum na proste aplikację programistyczne z interfejsem się skończył jakieś 5 lat temu. Teraz klep polecenia w wierszu poleceń.

Microsoft wysłucha modlitwy i postanowił wypuścić nowy terminal. Zobaczmy jak możesz go przystosować do pracy.

Trening Przyznaj się, na ile znasz JavaScript? Wiele programistów jest niedzielnymi programistami JavaScript. Coś trzeba było zrobić? Nie ma problemu. Metodą prób i błędów i przy pomocy Googli napiszę wystarczający działający kod JavaScript.

Nie ma w tym nic wstydliwego, że język JavaScript nie jest twoją główną smykałką. Dziś w roku 202X jednak trzeba coś z tym zrobić. 

Pomyśl też o tych sytuacjach, gdy szukasz prostych rozwiązania pod czysty JavaScript, a wyskakują Ci rozwiązania pod jQuery.

UnitTestCzęść NR.9 W tym wpisie zrobimy porównanie frameworków testów jednostkowych, jakie oferuje Visual Studio w swoich szablonach. Ja korzystałem z XUnit w projekcie TDD, ale Ty być może masz innego faworyta.  Prawda jest taka, że różnica pomiędzy tymi frameworkami jest niewielka. Chodzi w końcu o oznaczanie, co jest testem, a co nie i każdy framework ma na to swój sposób.

Czasami nie wszystkie technologie wspierają najnowszy .NET Framework, ale w momencie tworzenia tego wpisu nie widzę problemu z .NET CORE 3.2.

Kiedyś też nie każdy framework można było uruchomić w Visual Studio bez dodatkowych rozszerzeń. Teraz to nie jest problem.

AntyPatternCzęść NR.8 W tym wpisie omówimy antywzorce TDD oraz jego ograniczenia.

Pokazałem ci przykład pracy w metodyce TDD, używając ASP.NET CORE i Entity Framework. Pokazałem Ci jak z AutoFixture, możesz zautomatyzować pewne czynności w testach. Jeśli czytałeś poprzednie wpisy, to wiesz, jak ważne jest wstrzykiwanie zależności i rozbijanie kodu na interfejsy.

Na początku szybko omówiłem Ci zasadę RED-GREEN-REFACTOR. Chciałem, abyś jak najszybciej mógł wskoczyć w TDD, bez długiego nawijania, o co chodzi. Dziś omówimy, jednak to, co powinno być omówione na samym początku, czyli JAK dobrze pisać testy jednostkowe.

Zapraszam :)

AutoFixtureCzęść NR.7 Jeżeli kiedykolwiek pracowałeś nad dużym projektem, używając TDD, to wiesz jak bardzo ważne, jest pokrycie testów.  Pisanie tych testów wymaga czasu i wysiłku. Będziesz często pracował z bardzo złożonymi instancjami klas. Ich utworzenie może zajmować 80 linijek kodu lub więcej. Zanim więc napiszesz  warunek testowy,  już musisz dużo napisać.

Uzupełnianie obiektów bzdurnymi danymi może zajmować więcej czasu niż MOKOWANIE metody do testowania kodu. 

Zresztą patrz na ten kod, który napisałem, gdy robiłem projekt w stylu TDD.

IActionResultCzęść NR.6 W tym wpisie pokaże Ci jak sprawdzać i testować zawartość IActionResult. Sprawdzimy widoki, do których nawigujemy i sprawdzimy też, czy zwracamy odpowiedni model w IActionResult.

W poprzednim wpisie zrobiliśmy dwa testy do kontrolera i próbowaliśmy postawić nasz projekt ASP.NET CORE (na razie bez sukcesu, bo nie mamy bazy SQL Server). 

Do skończenia tego przykładowego projektu TDD zostało nam jeszcze parę testów.

A dokładnie dwa. Oto wymagania, które nam zostały:

  • Chcemy zwrócić model błędu, gdy gra nie jest dostępna już do zakupu.
    • Użytkownik później ten model zobaczy na stronie HTML.
  • Chcemy sprawdzić, czy nasz kontroler zwraca poprawny IActionResult w metodzie BuyGame.
    • Jeżeli zakup wykonał się poprawnie, to chcemy odesłać użytkownika do odpowiedniej strony. Gdy zakup się, nie udał, to chcemy go przekierować do strony z błędem.

Chcielibyśmy, aby działanie naszego kontrolera wyglądał tak. Jak widzisz tłumaczymy model na request na samym początku. Potem wysyłamy zapytanie do procesora i robimy przekierowanie na odpowiednią stronę w zależności od tego, czy udało nam się kupić grę.

Co więcej, gdy nam się nie udało kupić gry, powinniśmy otrzymać model z błędem, który później zostanie obsłużony w widoku.

ControllerCzęść NR.5 Kiedy budujesz aplikację z interfejsem użytkownika, możesz wyraźnie odseparować definicję czystego interfejsu np. HTML od logiki takiego interfejsu np. JavaScript.

Logika interfejsu użytkownika definiuje na przykład, co się stanie, gdy użytkownik kliknie przycisk

Moje doświadczenie programistyczne, które ma już 9 lat mówi mi, że w TDD najlepiej się testuje logikę interfejsu użytkownika. Co prawda możesz napisać testy przy użyciu Selenium i testować czy odpowiedni DIV w HTML jest w odpowiednim kolorze, ale taki poziom testów błaga też o pytanie ich sensu. 

Najlepiej testuje się logikę. Co więcej, warto zaznaczyć, że logikę można testować tylko wtedy gdy mamy jasny podział pomiędzy logiką a definicją interfejsu użytkownika.

MemoryCzęść NR.4 Jak testować warstwę dostępu do danych. Czy już na tym etapie jest na potrzebna baza danych? Oczywiście, że nie? Czy musimy tworzyć jakieś statyczne listy, które taką bazę mają symulować? Nie

Wystarcz skorzystać z frameworka Entity Framework, który pozwala na utworzenie bazy testowej w twojej pamięci RAM. Gdy będziesz na produkcji wtedy podłączysz się do prawdziwej bazy z prawidzywmi danymi. Zrobimy to w projekcie ASP.NET CORE.

Jakie mamy wymagania w warstwie dostępu do danych:

  • Chcemy zwracać wszystkie gry dostępne w bazie
  • Chcemy mieć metodę "IsGameAvailable" do sprawdzania czy dana gra jest dostępna do zakupu
  • Chcemy sprawdzić czy zapisujemy zakup/zamówienie do naszego źródła danych, gdy zrobimy metodę Save
  • Chcemy mieć możliwość wyświetlenia wszystkich zamówień/zakupów zaczynając od najstarszych zamówień.

Zanim przejdziemy do następnego przykładu zróbmy porządek w naszym projekcie.

TheoryCzęść NR.3 Pora pisać kolejne testy by pokazać jak nasza aplikacja się rozrasta. Dziś przetestujemy i napiszemy wymóg sprawdzenie dostępności gry przed jej zakupem.

Mam już test i kod do metody zapisu w naszym repozytorium do zakupów gier. Dla następnego przypadku będziemy musieli stworzyć nowe repozytorium z metodą IsGameAvailable.

Pomyślmy też co powinno się stać w każdym przypadku. Jeżeli gra nie jest dostępna lub nie istnieje to oczywiście nie możemy jej kupić. Jeżeli gra jest dostępna wtedy wykonujemy polecenie zapisu naszego zakupu.

Oto diagram, który pokazuje przepływ takiej aplikacji.

MoqCzęść NR.2 Wcześniej pokazałem Tobie jak przebiega praca programisty z TDD. Dziś będziemy rozbijać klasy na pojedyncze cegiełki, bo inaczej nie można tego testować, gdy wiele klas. Na razie wszystko wygląda w porządku, bo mamy jedną klasę. Sprawy jednak się skomplikują, gdy będziesz miał więcej klas i zależności pomiędzy nimi. Zobaczymy jak to możemy ugryźć

W poprzednim wpisie stworzyliśmy klasę GameBuyingRequestProcessor, która zajmuje się przyjęciem zakupionej gry. Spełniliśmy już do niej następujące wymagania .

TDDCzęść NR.1 Czym jest TDD? Czyli Test Driven Development. Jest to styl tworzenie programowania, który polega na tym, że zanim napiszesz kod najpierwsz piszesz do niego testy jednostkowe.

Zanim zaczniesz pisać kodu czy to z TDD, czy bez masz na pewno już pewne stwierdzone wymagania do napisania kodu. 

Z TDD bierzesz te pojedyncze wymagania i zanim napiszesz swój pierwszy kod piszesz TEST, który sprawdza dane wymaganie.

Wymaganiem może być funkcja, która zwróci określony obiekt z określonymi polami. W teście byś sprawdził czy te pola są zwracane dla poprawnego zapytania.

Piszesz test jako pierwszy i wiadomo, że bez poprawnego kodu ten test będzie dawał wynik czerwony. Tak ma być, ponieważ logikę napiszesz potem. Test ma pokazać i pilnować Cię i innych programistów o poprawne działanie danej funkcji i jego danego wymagania.

OrderCzęść NR.11 Czy wiesz, że mam na tym blog kurs Funkcyjnego programowania w C#. Dawno go nie odświeżałem, a wraz z pojawieniem się C# 9.0 myślę, że warto robi wpisy, które potrafią przełożyć filozofię funkcyjnego programowania na C#.  A sam C# tak jak przewidziałem na początku tego kursu będzie się zbliżał do trendów funkcyjnego progrowania i brał pomysły z F#.

Dzisiaj po wielkim powrocie omówimy Funkcje wyższego rzędu (Higher-order function). Jak wpiszesz "funkcje wyższego rzędu" do Google to zgłoszą Ci języki jak : Python, JavaScript. A jak to ma wyglądać w C#.

Funkcje wyższego rzędu są filarem funkcyjnego programowania.  Są to funkcje, które biorą albo inne funkcje jako parametry, albo zwracają nowe funkcję, które mogą być tworzone dynamicznie.

Template1 Zawsze chciałem zrobić serię wpisów o Angularze i ASP.NET. W tym wpisie zobaczymy podstawowy szablon z Visual Studio, który ma łączyć świat Angular i ASP.NET CORE. Chociaż w tym wpisie będzie używał nazwy ASP.NET, ponieważ już niedługo słowo CORE nie będzie miało znaczenia wraz z pojawieniem się .NET 5.0, który scali środowiska. Jednak może zostajemy przy ASP.NET CORE. Słowa kluczowe w SEO to mój problem.

Tutaj też pojawia się moja obawa. Taki wpis wymaga ode mnie pracy, a nigdy nie wiesz, kiedy coś się zmieni. Przynajmniej z tego, co widzę szablon Angulara z 2017 i z 2020 nie wiele się różnią poza tym, że szablon z 2020 roku został odchudzony. To daje mi nadzieje, że jak czytasz to z przyszłości to ten wpis będzie użyteczny.

Świat ASP.NET się zmienia dosyć szybko, ale dobra wiadomość jest taka, że styl MVC wciąż w nim jest od 9 lat. Nie musisz się więc martwić, że ta wiedza pójdzie do kosza. 

Co do Angulara? Zrobiłem oddzielny wpis na temat jego historii (https://cezarywalenciuk.pl/blog/programing/co-to-jest-angular-historia-do-2020), ponieważ byłem ciekaw czy on ma gwałtowne zmiany w swoim kodzie. Odpowiedź brzmi : nie jest tak źle. Największa zmiana dotyczyła paczki @http, a tak pojawiają się tylko usprawnienia.

Mamy więc stronę serwerową : ASP.NET i mam także stronę kliencką Angular. Sprawdzimy podstawowy szablon z Visual Studio i hej może już programowałeś w tych technologiach wcześniej i chciałbyś zobaczyć co się zmieniło. 

Oto tematy w tym wpisie:

  • Co jest w tym szablonie
  • Jak wygląda back-end .NET CORE
  • Angular, czyli jak wygląda front-end

Najpierw stwórzmy ten szablon. Wybieramy projekt : ASP.NET Core Web Application.

Tree Co prawda kiedyś dawno temu (w 2011 roku) zrobiłem wpis z implementacją drzewa binarnego. Znając jednak siebie z 2011 roku nie zaszkodzi zrobić takie szybkie przypomnieje i użyć wzorca iterator.

Zaczynamy od tworzenia gałęzi i liści drzewa binarnego. Każda gałąź ma wartość  i może, ale nie musi mieć następne gałęzi.

W konstruktorze przekazuje dalsze instancje tej samej klasy. Co oznacza, że możemy stworzyć prawdziwy łańcuch łączący te klasy, a raczej drzewo.

Compression Ostatnio zacząłem się zastanawiać co mogę ulepszyć na swoim blogu. Pomyślałem od razu o SEO, czyli o pozycjonowaniu strony. Stworzyłem konto na serwisie skanującym mojego bloga i poza znanymi radami znalazłem fakt, że mój blog nie kompresuje jakichś danych.

Okazuję się, że od jakiegoś czasu przeglądarki wspierają kompresję danych przy każdym zapytaniu HTTP. Przeglądarki wysyłają pytanie do serwera czy dane mogą być skompresowane. Ty to przechwytujesz i wysyłasz spakowane dane.

Kompresja działa tak dobrze, że możesz obniżyć wielkość przesłanych danych do przeglądarki aż o 70%. 

To jest MEGA CUDOWNA zmiana, która nie tylko pomoże SEO twojej strony, ale także przyspieszy jej działanie dla użytkowników.

By Properties Iterator mówiąc krótko jest to obiekt, który przemieszcza się po strukturze obiektu. Iterator zazwyczaj ma referencję do obecnego obiektu, do którego ma dostęp i posiada także metodę by przejść do następnego elementu.

 Mam także iteracje dwukierunkowe, które pozwalają ci także iść w przeciwną stronę.

W .NET mam już sposób na implementację tego wzorca . Jest nim interfejs IEnumerator<T> . Posiada on następujące metody:

  • Current : referuję się do obecnego obiektu w tej pozycji
  • MoveNext() : pozwala Ci przesunąć się do elementu następnego w tej kolekcji. Jeżeli operacja się powiodła otrzymujemy wartość true, jeśli nie to false
  • Reset() resetuje do pozycji startowej

MachnineWzór.13 Nasze zachowanie jest sterowane przez nasz stan. Jeżeli nie wyspałeś się dobrze to twoje zachowanie zapewne się zmieni. Jeżeli wypiłeś dużo alkoholu to nie będziesz prowadził samochodu.  Stany więc decydują o tym co możesz i czego nie możesz zrobić.

Możesz oczywiście przejść z jednego stanu w drugi. Energetyk/Kawa może być takim wyzwalaczem, który zmienia twój stan.  Poranne ćwiczenia mogę Cię też bardziej rozbudzić.

Wzorzec projektowy State jest bardzo prosty. Stan kontroluje zachowania, a sam stan może zostać zmieniony.  Jak jednak ten stan zobrazować. Możemy to zrobić na dwa sposoby:

  • Stany są klasami z zachowaniami i te zachowania powodują zmianę z jednego stanu na drugi
  • Stany i przejścia są typami wyliczeniowymi. Mam specjalny oddzielny komponent, który wykonuje te przemianę stanu.

Oba te rozwiązania są właściwe. Drugi jest najbardziej popularny i kto wie być może już go użyłeś w swojej pracy. Pierwszy wymaga stworzenia wielu klas więc wydaje się on bardziej skomplikowany. Zauważ, że o ile wzorce projektowe mogą wydawać się cool czasami wygrywa rozwiązanie, które jest bardziej przejrzyste niż bardziej złożone. W końcu inni programiści muszą zrozumieć co chciałeś osiągnąć w kodzie

Historia Ciężko jest zrozumieć co się stało w ostatnich latach w technologii. Co trzeba wiedzieć aby zrozumieć Angulara w kontekście obecnych czasów? 

Najpierw musimy się cofnąć o 10 lat, gdy w świecie JavaScript istniały takie biblioteki jak jQuery. W międzyczasie pierwsze frameworki JavaScript jak : Dojo, Backbone.js, Knockout.js walczyły o popularność i adaptacje w firmach.

React i Vue.js oczywiście wtedy nie istniało. 

Historia Angulara zaczyna się od AngularaJS w 2009 roku. Misko Hevery i Adam Abrons pracowali razem nad pewnym projektem pobocznym.

IObservableWzór.12 Mówiąc o wzorcu projektowym Observer warto także wspomnieć o tym, że w najnowszym .NET-cię mamy dwa ciekawe interfejsy generyczne : IObserver<T> i IObservable<T>. Te dwa interfejsy miały swoją premierę z biblioteką Reactive Extensions (Rx)

Ich celem było obsłużyć strumień reaktywnych informacji. 

Zobaczmy co interfejs IObservable<T> w ogóle robi.  Jaki jest on mechanizm? Do podpinania się do zdarzeń używamy operatora += . W tym interfejsie będziemy używać metody Subscribe() . Ta metoda bierze za parametr tylko interfejs IObserver<T>

Wszystko to jest interfejsem więc w przeciwieństwie do delegat i zdarzeń nie mamy tutaj określonego mechanizmu działania. Możemy z tymi interfejsami zrobić co chcemy

A co z odpinanie się od obserwacji, czyli od subskrypcją. Idea ta jest wpierana przez interfejsy Metoda Subscribe() zwraca obiekt interfejsu  IDisposable. Będzie to token, który metodę Dispose() odłączy się obserwacji obiektu observable.

EventWzór.11 Wzorzec projektowy Obserwator polega na tym,że jeden komponent informuje drugi, że coś się wydarzyło. Ten wzorzec jest używany wszędzie. W aplikacjach WPF i Windows Forms, jak i ASP.NET Web Forms i wszelkiej formie UI w platformie .NET mamy system zdarzeniowy. Ten system do program wysyła obiekty określający jakie zmiany zaszły przy interakcji z użytkownikiem.

Wzorzec Obserwator jest popularny i potrzebnym wzorcem w wielu miejscach w aplikacji nawet bez twojego kodu. Nic dziwnego, że twórcy C# postanowili zaszyć ten wzorzec do języka w postaci słowa kluczowego event 

Baby it's 8C# 8.0 przyniósł ze sobą wielkie zmiany. Niektóre z nich nie są zmianami kosmetycznymi i wywracają pewne pytania rekrutacyjne na Juniora C# na opak. Dobra wiadomość jest taka, że .NET Core 3.1 i .NET Standard 2.1 korzysta już domyślnie z C# 8.0 i nie trzeba już dodawać dziwnych wpisów preview.

W innym wpisie omówiłem już obsługę wartości Null w typach referecyjnych więc nie będę robił tego ponownie.  

Zobaczmy co innego przyniósł ze sobą C# 8.0.

LinkedListNr #2 Linked List zwana także listą jednokierunkową jest zbiorem powiązanych ze sobą węzłów tak, aby każdy węzeł wskazywał na następnym element na liście. Każdy węzeł ma  wartość, jak i referencję/wskaźnik do następnego węzła. 

Istnieje także lista dwu kierunkowa, taka lista także wskazuje do węzła poprzedniego.  Lista dwu kierunkowa lepiej się sprawdza do usuwania elementów z listy, gdyż dzięki tej dodatkowej informacji o poprzednim węźle łatwiej Ci będzie namierzyć element potrzebny do usunięcia.

W tym wpisie będzie tylko lista jedno-kierunkowa, ale miej świadomość, że taka też istnieje.

Stosuje też strategię "last in first out" czyli pierwszy element, który wszedł do listy z niej także wyjdzie.

Stack,QueueNr #1 Jednym z absurdów szukania pracy jako programista są pytania, które nie są związane z tym co będziesz robił. Jednym z tych zagadnień są struktury danych? Czy ta wiedza będzie Ci potrzebna przy tworzeniu strony internetowej?

Raczej nie . Mimo to widząc emaile od swoich fanów  widzę, że ten trend w rozmowach kwalifikacyjnych szybko nie zginie. Po studiach informatycznych być może miałeś przedmiot "Algorytmy struktury danych". Ja miałem i musiałem pisać te struktury w Pascalu na zaliczenie.

Jak się jednak to ma JavaScript i tworzenie stron internetowych? No cóż, możemy narzekać cały dzień. Postanowiłem zrobić o tym wpis i kto wie może początkującemu programiście, który szuka pracy się to przyda.

Func  Azurowe funkcje otwierają drogę do stylu programowania, który nazywa się serverless . Pozwala on na szybkie tworzenie, jak i rozbudowanie, zautomatyzowanie twoich usług sieciowych po najmniejszych kosztach. 

Microsoft zainwestował ostatnio dużo sumę pieniędzy na serwery Azure w Polsce. Oznacza to, że nauka tej technologii to na chwilę obecną najlepsza inwestycja pieniędzy, jak i czasu.

Zobaczmy jak można zacząć swoją przygodę z Azure Functions w wersji 3.

Dark Theme Programiści kochają czarny styl swoich edytorów kodu programowania. Teraz  czarny styl, czyli dark theme jest prawie wszędzie. Jest on na Twitterze, YouTube, a nawet w samym Windows.

Uruchamiasz więc swoje edytory i spodziewasz się, że w 2020 roku każdy już program ma dark theme. Uruchamiasz więc SQL Server Management Studio 18 i...go nie ma.

Random Czy istnieje opcja losowego wyboru losowego rekordu z baz. Oczywiście, że tak.

Wszystkie rozwiązanie koncentrują się wygenerowaniu losowej liczby, a potem przypisanie jej do polecenia OrderBY. 

Dla SQL Serwera rozwiązanie tego problemu jest następujące

TemplateWzór.10 Wzorzec projektowy Strategy i Template Method są podobne do siebie.  Jakie jednak są różnice . Wzorzec projektowy Strategy używa interfejsów i kompozycji do określenia zachowania algorytmu. 

Natomiast Template Method używa dziedziczenia . Klasa ustala szkielet algorytmu i jego kolejności natomiast implementacja poszczególnych kroków jest w zupełnie innym miejscu. Tym zajmą się klasy, które będą dziedziczyć po tej klasie szablonu

Istnieje mnóstwo przykładów tego wzorca. Często jest on reprezentowany przez artykuły jedzenia. Przykładowo masz tutaj szablon robienia naleśnika.

How to?Wzór.9 Mam więc listę napisów (Stefan,Jarek,Bajek) i chciałbyś je wyświetlić w specyficzny sposób. Możesz to zrobić po przecinku : (Stefan,Jarek,Bajek).

A może wyświetlić je po kropce : (Stefan.Jarek.Bajek)

A może wyświetlić je korzystają z elementu <ul><li> w HTML

  • Stefan
  • Jarek
  • Bajek

Każdy z tych formatów wymaga swojej logiki przetłumaczenia listy napisów na odpowiedni wynik.

Można by powiedzieć, że strategii.

Co, jeśli bym chciał wybierać tę strategię w trakcie działania programu? Zobaczmy jak wzorzec projektowy strategi działa.

SaveStateWzór.8 Używając wzorca projektowego Command, zapisywaliśmy akcje, które wykonywaliśmy w systemie i dzięki temu mogliśmy później te akcje cofać. 

Istnieje wzorzec projektowy, który też spełnia tę funkcję. Wzorzec Memento przechowuje stan systemu w dedykowanym obiekcie tylko do odczytu.

Ten token będzie użyty do przywrócenia systemu

ConnectingWzór.7 Większa część kodu, który piszemy, ma różne komponenty (klasy), które gadają ze sobą poprzez bezpośrednią referencję. Jednakże zdarzają sytuację, w których chciałbyś ,aby obiekty nie były świadome swojej egzystencji. 

Może chciałbyś, aby obiekty były świadome siebie, ale nie chcesz przekazywać za każdym razem referencyjni do nich

W końcu za każdym razem, gdy wysyłasz referencje obiektu, to przedłużasz jego życie w pamięci.

Mediator jest wzorce projektowym, który ma ułatwić komunikację pomiędzy obiektami, które fachowo nazywam kompomentami 

Mediator ma dostęp do każdego komponenty . Oznacza to, że powinien być on albo publiczny polem statycznym, albo singletonem, który jest wstrzykiwany do każdego komponentu, który go potrzebuje.

Ask meWzór.6 Powiedzmy, że chcesz przypisać wartość do zmiennej. Wystarczy do tego prosty kod jak : a = 4

Zmienna została zmieniona, jednak nie ma żadnej historii, aby zapisać, że takie zdarzenie nastąpiło. Nikt nam przecież nie może dać poprzedniej wartości tej zmiennej. Nie możemy przecież zapisać i serializować faktu o zmiany wartości. Czyż nie?

Co, jeśli chciałbyś cofnąć swoje działanie przypisania zmiennej. 

No cóż, skoro nie masz historii, nie masz informacji o poprzedniej wartości to zrobienie takiej operacji jest niemożliwe

Wzorzec projektowy "Command" stawia sobie ten właśnie cel. Zamiast działać na obiektach bezpośrednio, co by było, gdybyśmy mogli wysłać, im polecenia i instrukcje co trzeba zrobić.

Klasa reprezentująca tę polecenie będzie opisem tego, co trzeba zrobić i jak.

NullWzór.5 W pewnym wpisie omówiłem, że niektórzy architekci nie lubią wartość NULL, która występuję we wszystkich typach referencyjnych. Co, jeśli chciałbyś się tego pozbyć i zapomnieć o tym, jak C# 8 próbuje rozwiązać ten problem

No cóż, wtedy korzystasz ze wzoru projektowego Null Object

Event BrokerWzór.4 Poprzedni przykład wzorca  jest trochę sztuczny. W prawdziwym świecie będziesz chciał, aby stwory, zyskiwały lub traciły bonusy w dowolny sposób. To jest coś, czego nie zrobisz, mając listę jednokierunkową czy łańcuch zobowiązań

Nie chciałbyś permanentnie zmieniać dane swojego stwora. Chcesz, aby ta zmiana działa w tymczasowo i tylko wtedy gdy jest ona potrzebna.

Potrzebny nam będzie scentralizowany komponent. Będzie on trzymał listę wszystkich modyfikatorów dostępnych w grze. Będziemy wyszukiwać te modyfikatory i dodawać je do stworów mając pewność, że wszystko odbywa się w dobrej kolejności.

Ten komponent nazywa się Event Broker. Co ciekawe jest on połączeniem kilku wzorców projektów jak Mediator, Observer, Command 

Chain of ItemsWzór.3 Pomyśl, że pracujesz nad daną aplikacją i okazuje się, że coś zostało źle zaprogramowane. Kto jest za to odpowiedzialny? Ty? Twój szef, który dał Ci zadanie? A może analityk aplikacji? A może osoba biznesową źle zrozumiała proces, który próbujesz zaprogramować

To jest właśnie łańcuch odpowiedzialności. Dodatkowo jest to także wzorzec projektowy. Jego zadaniem jest wywołać elementy systemu jeden po drugim.

Implementacja tej filozofii wydaje się prosta. Potrzebna Ci jest lista jednokierunkowa oraz klasa abstrakcyjna, która posłuży za szablon do działania

SingletonWzór.2 Wzorzec projektowy Singleton urósł na podstawie prostego pomysłu : Co jeśli chcesz mieć instancję jednego pewnego komponentu w swojej aplikacji, bez względu na to ile razy go utworzysz  przy pomocy konstruktora. 

Przykładowo masz klasę, która ładuje pewne dane z bazy tylko raz w cyklu życia w aplikacji. Ta klasa jeszcze posiada tylko pola do odczytu.

Taka klasa jest dobrym kandydatem na  wzorzec projektowy Singleton. Po co obciążać pamięć swojej aplikacji obiektami, które mają dokładnie te same dane.

Wzorzec projektowy Singleton można zaimplementować w C# na kilka sposobów

60 LAT Dawno, dawno temu. Gdy internet nie istniał . Gdy nie było Javy i JavyScriptu. Gdy język programowania PASCAL jeszcze nie powstał. Programowanie wyglądało zupełnie inaczej.

Był to świat, gdzie istniały tylko takie języki programowania jak : Fortran, COBOL, ALGOL, Assembler, BASIC, LISP, APL

"To były czasy" jak by mógł powiedzieć jakiś dziadek. 

Dzisiaj spójrzmy na język COBOL, który dobrze się trzyma mimo swojego wieku. W latach 80 wielu twierdziło, że jest to martwy język tymczasem w roku 2020 programista COBOL nadal jest potrzebny

To język programowania, który nie może umrzeć. Pomyśl ile banków, aplikacji rządowych działa na tym języku jeszcze. 

Modernizacja takich systemów jest prawie niemożliwa. A osoby, które w tym programują albo odchodzą na emeryturę, albo już nie żyją. Co tworzy smakowity kąsek na rynku pracy, nawet tym Polskim

Podobno nawet rząd amerykański daję dotacje na naukę tego języka.

Emoij Viewer Emoji 🤔😘🤗😱

Kiedyś nie mogłem patrzeć na te emotikony, a w dzisiejszych czasach podkreślają one wpisy na Facebooku, Twitterze, Instagramie. Można nawet śmiało stwierdzić, że miniaturka z emoji zwiększa szanse na klikniecie w link.

Kojarzysz zapewne takie tytuły wpisów i filmików:

  • PO RAZ PIERWSZY PROGRAMUJE 😱
  • TA OSOBA ZROBIŁA GŁUPOTĘ 🤮
  • PANOWIE JEDZIEMY Z KOKSEM 💪 DZIŚ LIVE 🔥

C# i NULL NullReferenceException. Ile razy w swojej karierze widziałeś ten błąd. Wielu programistów i geniuszy architektury programowania od dawna się zastanawia, że może wartość NULL w typach referencyjnych to duży problem.

W C# nie ma wielokrotnego dziedziczenia. Null jest tym wyjątkiem, bo technicznie dziedziczny on po wszystkich wartościach referencyjnych. Brzmi to, jak łamanie jakieś zasady projektowej

Niektórzy mają śmiałość mówić, że jest to problem wart miliardy dolarów

Wyjaśnijmy ich punkt widzenia

Błędy pisowniNarzędzie NR.11 Jestem dyslektykiem i często piszę wpisy pod presją czasu. W innych wpisach na tym blogu pisałem o swoich frustracjach i historiach z przeszłości związanym z tym, jak pięknie, umiem zrobić 200 błędów w dyktandzie na 100 słów.

Błędne słowa można sprawdzić nawet w swojej przeglądarce. Ta funkcja jest wbudowana.

Gdzie jest jednak ten program, który mógłby Ci w łatwy sposób powiedzieć gdzie, masz postawić przecinek w tym wielokrotnym złożonym zdaniu.

Gdzie jest ten program, który potrafi przeanalizować Ci kontekst zdania i powiedzieć, że właśnie w tym przypadku trzeba napisać coś z NIE razem, a nie osobno

Nie zapominajmy o związkach zgody pomiędzy wyrazami

Core 3.1 Korzystając z wolnego czasu, pomyślałem, że pora wrócić na mojego bloga. Przez wiele miesięcy miałem wizję co ulepszać na tym blogu. Wiesz mi. Prowadzenia bloga w kontekście wielu lat tworzy wyzwanie trzymania tego wszystkiego w sensownej kupie. Mam tutaj 700 wpisów w końcu :)

Dla przypomnienia początki tego bloga zaczęły się na blogerze platformie Google. Tam się irytowałem, że nie mam dużej kontroli nad stroną, gdzie zawieram swoje wpisy. 

Przeniosłem więc bloga na swój własny serwer.

Skróty klawiszowe. Pora zmierzyć się z prawdą i zadać sobie pytanie :

”Czy ja rzeczywiście korzystam ze skrótu klawiszowego jak ALT-CTRL-K, a potem ALT-CTRL-L”

Kto normalny by pamiętał skróty klawiszowe, które jeszcze wymagają kombinacji poprzedniego klawisza.

Na pomoc przychodzą jednak specjalne klawisze, które za Ciebie kliknąć złażoną kombinacje klawiszy za Ciebie. Jak jednak te specjalne klawisze wyczarować? Kupić specjalną klawiaturę z takimi magicznymi klawiszami jak G1…G10.

A może by tak kupić specjalną klawiaturę do tego. To jest fascynujący problem.

Czy nie byłoby to wspaniałe mieć specjalne klawisze które :

  • Odpalają odpowiednią stronę www
  • Uruchamiają odpowiedni program
  • Uruchamiają określoną linie poleceń
  • Piszą określoną frazę
  • Za ciebie uderzają skomplikowane skróty klawiszowe
  • Odtwarzają dźwięk

Jak jednak zrobić to tanio i wygodnie?

Pobierz z YTNarzędzie NR.8Od wielu wielu lat zawsze się zastanawiałem jak pobierać filmy z YouTube. Przez lata instalowałem wiele dodatków do przeglądarki. Przez wiele lat instalowałem na swoim komputerze wiele programów by tą zawartość pobierać. Przez wiele lat szukałem stron, które pozwalają mi pobierać zawartości z YouTube

Ale…

To wszystko było irytujące. Dodatki do przeglądarek przestają działać, bo polityka Google tego widocznie zabrania. Wiele programów na komputer stara się coraz bardziej nieznośna i każe sobie płacić. Strony, gdy pobierasz coś z  YouTuba chcą przy okazji wyświetlić Ci tonę reklam i jeszcze narzekają, że masz AdBlocka zainstalowanego.

Jak też pobierać całe playlisty? Mam ręcznie wpisywać adresy URL każdego klipu do magicznych pól tekstowych pobieraczy?

4Developers 4Developers konferencja, na której miałem okazje być dwa razy jako uczestnik teraz dla mnie osiągnęła nowy wymiar. W lutym stwierdziłem, a co tam zgłoszę pomysł na prelekcję i przynajmniej spróbuje. Nie przypuszczałem jednak, że uda mi się przejść przez proces weryfikacji . W końcu zrobiłem wszystko na ostatnią chwilę.

4Developers nie zmieniło się przez lata. Jednak już na start widziałem mega poprawę w organizacji. Gdy jednak pojawiłem się w budynku zobaczyłem, że dumne panie, które ogarniały bardzo dobrze pojawiający się tłum z biletami.

Pierwszy raz na 4Developers nie stałem w kolejce. Co więcej, udało mi się zarejestrować pomimo tego, że zapomniałem o wydrukowaniu biletu.

WDINa targach Warszawski Dni Informatyki byłem prelegentem, wystawcą swojego pracodawcy oraz także zwykłym człowiekiem.Na prelekcji sala była pełna i pytałem się ludzi przed wystąpieniem jak i po czego oczekują – czy spełniłem ich cele.

Według niektórych widać, że mam za sobą poważny warsztat mówcy dzięki Toastmasters. Widziałem , że inni znani prelegenci popełniają także błędy w stylu :

- za mała czcionka na slajdzie
- przedłużanie prelekcji i wykraczanie poza czas
- brak chwytaków raz na jakiś czas by publiczność nie spała

Ja też nie byłem idealny, ale głos ludu powiedział mi, że byli zadowoleni.Dla takich momentów warto prowadzi bloga i było ćwiczyć przemawianie.

Najlepszy rarytasem tej konferencji dla mnie okazali się ludzie. Zwykli programiści, którzy kojarzą moją twarz, ponieważ prowadzę bloga.  Każdy z nich miał ciekawą historię.

Jako studenci mają ambitne plany i pomysły życiowe.

Ćwiczą ciekawe sporty . Narzekają na JavaScript. Mają swoje sposoby na siedzący tryb życia.

Był także koleś, który jest po procesie przebranżowienia się z studenta medycyny na programistę. Śmiesznie wyszło, że właśnie z nim poruszyłem temat, że może już jestem za stary na to wszystko.

Na konferencji także byli licealiści, którzy zastanawiają się jak ułożyć sobie przyszłość.

Nie było osoby na tej konferencji, z którą nie mogłem pogadać o ciekawych rzeczach. Były momenty, w których myślałem, że łezka mi popłynie ze szczęścia

Po latach przemawiania w Toastmasters i w grupach programistycznych te 2 dni zapamiętam bardzo dobrze.

ZimnoRada 3 Jeden z moich znajomych w ostatnim czasie zaczął morsować. Z każdym tygodniem wyglądał on na coraz to szczęśliwszego . Stwierdziłem, że dopóki jest sezon zimowy to też skorzystam. Kąpiel w zimnej wodze w okresie zimy jest sportem ekstremalnym. Wydaje się to dziwne, ale taka forma spędzenia wolnego czasu ma dużo zwolenników.

Rozbierasz się do prawie naga. Przyzwyczajasz się do zimna na dworze, a potem przez 60 sekund absorbujesz zimną wodę.

CmderNarzędzie NR.7 W dzisiejszym świecie bardzo często korzystamy z wiersza poleceń. Git i GitHub. Obecne technologie JavaScript wymagają dużo klepania w wierszu poleceń. AngularCLI, React, VueJs, NMP.

Nie mówiąc już o pracy z ,NET Core, który też ma swój wiersz poleceń. Jest to dobra alternatywa dla całego środowiska Visual Studio. 

W Windows mamy także Chocolatey zbiór skryptów instalacyjnych różnych programów.  

Na co dzień też może korzystasz z PowerShell-a .

Jest tego trochę. Bez wiersza poleceń w dzisiejszym świecie prawie nic nie zrobisz.

VsCode  W poprzednim wpisie dokonaliśmy fuzji aplikacji ASP.NET Core z Angular. Stworzyliśmy hybrydę aplikacji MVC  z SPA Angular. Jak podobny proces wyglądałby, gdybyśmy jednak chcieli do tego użyć Visual Studio Code.

Tym razem przy pomocy ASP.NET Core 2 stworzę aplikację REST, która zwróci mi listę gier. Angular pobierze te dane z usługi i wyświetli je na stronie.

Nie będę korzystał z gotowego szablonu ASP.NET Core 2 z Angular. Stworzymy wszystko od podstaw.

Fuzja Jako programista, który pracuje z najnowszymi trendami to oczywiste, że chcesz użyć Angular w swoich projektach ASP.NET.  Angular w przeciwieństwie do bibliotek jak jQuery wymaga wielu kroków. Czasy ściągania plików JS ze stron internetowych dawno minęły.

Te same kroki powinny działać nie tylko do aplikacji ASP.NET Core 2. Jest możliwe dołączenie Angulara do każdej aplikacji ASP.NET nawet do Web Forms. Ja jednak się skupię tylko na najnowszej odsłonie ASP.NET.

PornoRada 2 Każda przyjemność jest wspaniała…jednakże fatalnym pomysłem jest ustawiania życia na takie hedonistyczne wartości. Zapytaj się narkomana jak dążenie do przyjemności pomogło mu w życiu. Zapytaj się alkoholika jak picie pomogło mu zapomnieć o jego problemach. Zapytaj się hazardzisty, jaką przyjemność czerpie z tego, że nie ma pieniędzy.

Ludzie, którzy kierują swoją energię na powierzchniowe przyjemności ostatecznie są pełni lęku i niestabilni emocjonalnie. Świat oczywiście został stworzony tak, by te powierzchniowe przyjemności spełniać  i zapychać czarne luki w życiu. Jest to łatwe i daje to innym ludziom pieniądze.

OpenSpaceAktywny NR.9 Otwarta przestrzeń. Każda duża firma ma dużo pracowników. Każdy pracownik lub grupa pracownicza nie może mieć swojego pomieszczenia. Dlaczego więc ich wszystkich nie wrzucić do jednego gigantycznego  pomieszczenia? Bez ścian. Bez barier.  W tym gigantycznym pomieszczeniu jest obok kuchnia, toaleta oraz wyście z tego pokoju. Czy w takim pomieszczeniu można efektywnie pracować?

Oczywiście, że nie. Ludzie bez przerwy wchodzą i wychodzą. Korzystają z toalety lub kuchni. To jednak nic. Najgorszym problemem pomieszczeń Open Space są dyskusje przy biurkach pracowniczych. Poziom hałasu w promieniu 6 metrów wzrasta trzykrotnie.  

ZdrowieRada 1 Może wydawać Ci się nieco dziwne czytanie wpisu na temat siłowni na blogu programistycznym. Nie ma jednak w tym nic dziwnego. Stereotyp programisty wiesz, jaki jest. To chudy bądź gruby karzeł z białą koszulką i okularkami.

Stereotypy to wielka bzdura. Pisałem o tym wcześniej. Jednak tak, jak ja być może myślisz i ty. Czyli ćwiczenia i siłownia to nie dla ciebie. Ja też tak myślałem.

 

Extensions Na tym blogu to prawie już tradycja by zrobić wpis na temat dodatków do Visual Studio. Tym razem jednak przyjrzałem się dokładnie dodatkom do edytora Visual Studio Code.

Wpis urósł do kosmicznych rozmiarów. Nie będę jednak ukrywał, że na wypadek re-instalacji systemu Windows warto by było zrobić sobie gigantyczny skrypt instalacyjny wszystkich potrzebnych dodatków. 

Linki do dodatków są podpięte do obrazków. Postanowiłem także na końcu każdej sekcji dodać komendy instalacyjne, które można wykonać w Wierszu poleceń bądź w terminalu Visual Studio Code

Java

Maven Na potrzeby poprzedniego wpisu musiałem zainstalować Maven. Maven jest to narzędzie stworzone do zarządzania projektami Javy. Maven potrafi ściągać szablony projektów Javy – kompilować je oraz nawet tworzyć dokumentacje.

W świecie programowania bardzo stało się popularne tworzenie wszystkiego przy pomocy komend tekstowych. Nic dziwnego, że takie narzędzie jest także w środowisku Javy.

Instalacja tego narzędzia w Windows jest bardzo złożona. Postanowiłem więc napisać o tym wpis.

Trzeba pobrać zawartość Maven ze strony http://maven.apache.org/download.cgi i wypakować w folderze, w którym chciałbyś aby Maven się znajdował.

To oczywiście nie wszystko. Jest trochę zabawy z ustawieniem zmiennych środowiskowych w systemie Windows.

VsCode Java Visual Studio Code całkiem niedawno ogłosił możliwość edytowania kod Javy. Jak jednak to wygląda w rzeczywistości. Zawodowo nie programuje w Javie, ale na potrzeby bloga czasami chce sprawdzić proste fragmenty kodu Javy. Przykładowo robiłem to dla cyklu na blogu o tytule “C# i Java: Porównanie składni i szybkie przypomnienie”.

Istnieje dużo artykułów a nawet prelekcji mówiących o tym jak Visual Studio Code z Javą jest cudowne i wspaniałe. Rzeczywistość jest jednak trochę inna. Otóż rozpoczęcie pracy nie było dla mnie takie intuicyjne. W pewnym momencie nawet chciałem się podać, ponieważ nie ma artykułu, który krok po kroku pokazał co trzeba zrobić by to wszystko działało.

Według blogów i filmików odpalasz Visual Studio Code przy folderze z projektu Javą i wszystko magicznie działa. Co, jednak jeśli chcesz zacząć pracę od zera. Co, jeśli świat Javy nie jest ci znany?

Chciałbym ci pokazać tą krótką podróż. Jak mi się udało stworzy środowisko pracy w Visual Studio Code do pracy z Javą oraz jak zrobić prosty szablon projektowy.

Zanim zaczniesz musisz do Visual Studio Code pobrać następujące dodatki.

NPM TaskNr. 4 Teraz gdy transkompilujemy kod JavaScript przy użyciu Babel  oraz wprowadziliśmy modułowość do naszej aplikacji JavaScript przy użyciu Webpack rodzi się to, co nam jeszcze zostało?

Mam jeszcze mały problem z usystematyzowaniem tego wszystkiego do jednego polecenia. Osoba, która pobierze naszą aplikację przykładowo może nie wiedzieć, że musi uruchomić polecenie webpack.

Dlatego w środowiskach pracy JavaScript powstała idea by uruchamiać to wszystko jako zadania.

W naszej aplikacji mamy proces budujący naszą aplikację. Chcielibyśmy by ten proces budujący wykonywał nasze polecenie webpack oraz inne polecenia, które by zminimalizowały kod, zoptymalizowały zdjęcia, przetłumaczyły pliki SASS na CSS i inne.

To, że obecnie w naszej aplikacji ich nie ma wcale nie znaczy, że one nie wystąpią.

BabelNr. 3 Transpiling to jest fachowe określenie procesu konwersji z jednego kodu na drugi. Oba kody jednak posługują się podobnym językiem. Jest to ważna część pracy współczesnego webdevelopera.

Po co istnieją narzędzia tłumaczące JavaScript na inny kod JavaScript? Problem leży w przeglądarkach oraz w różnych wersjach JavaScript.

Przeglądarki nie są w stanie gonić najnowszych wersji języka JavaScript i być zawsze na czasie. Z drugiej strony pewne nowe funkcjonalności w samym JavaScript, ale w wyższej wersji bardzo ułatwiają kodowanie.

Nie jest to nic nowego. Dla styli CSS mamy takie rozszerzenia jak LESS i Sass, które potrafią generować lepsze i bardziej złożone style CSS.

Dla JavaScript kiedyś najbardziej popularnym transpilatorem był CoffeScript. Dziś ludzie używają albo transpilatora Babel lub TypeScript. Istnieją też różnice pomiędzy nimi.

CoffeScript starał się ulepszyć JavaScript swoją własną składnią. Opcjonalne nawiasy, białe znaki i tak dalej.

Babel nie tworzy nowej składni dla JavaScript. Kompiluje najnowszy kod JavaScript do starszej wersji, która jest rozumiana przez wszystkie przeglądarki.

WebpackNr. 2 Większość języków programowania posiada swój sposób na importowanie kodu z jednego pliku do drugiego. JavaScript oryginalnie nie posiadał takiej funkcjonalności i nie został stworzony z myślą, aby taka funkcjonalność była. JavaScript z założenia powinna być uruchamiana tylko z poziomu przeglądarki bez dostępu do plików z komputera użytkownika przeglądarki.

Dlatego jak do tej pory kod JavaScript był organizowany w wielu plikach. Każda funkcjonalność była współdzielona dzięki zmiennym globalnym.

Skrypty NPMNr. 1 Nauka JavaScript obecnie jest trudna. Zwłaszcza jeśli nie analizowałeś tego, co się działo przez ostatnie 3 lata. Ekosystem, liczba narzędzi ciągle rośnie. Ekosystem i narzędzia ciągle się zmieniają. Powoduje to brak zrozumienia, co właściwie ten ekosystem robi? Jakie problemy narzędzia rozwiązują, skoro ktoś stwierdził, że muszą one powstać.

JavaScript już dawno nie jest językiem służącym do prostej obsługi elementów strony jak slidery.

Rok temu napisałem ten wpis, w którym nabijałem się trochę z tego, że JavaScript i jego narzędzia stały się absurdalnie trudne i skomplikowane do tego stopnia, że same początki i pierwsze kroki wydają się wyprawami na księżyc.

Dla kogoś, kto zacząć pracę z JavaScript albo nauczył się budować strony internetowe od podstaw, to wszystko to wydaje się żywym koszmarem. Sam, mimo iż mam już 6 lat doświadczenia skaczę po tutorialach i uczę się z nich fragmentów współczesnego JavaScript. Problem polega na tym jednak, że te tutoriale często wymagają jakiejś wiedzy bazowej.

Dlatego zaczynając swoją przygodę z JavaScript czułem, że krążę w kółko tak długo, aż wszystko będzie miało sens jako całość.

Postanowiłem więc stworzyć ten wpis czytelniku byś ty nie miał takich problemów. Zacznijmy więc od podstaw i rozwiążmy problemy inkrementalnie tak, aby zrozumieć co my właściwie robimy.

VS ReactSzablon 3 React.js jest to popularny framework JavaScript stworzony przez Facebook. Visual Studio Code nie potrzebuje żadnych dodatków aby mieć Intellisense do React.

Jest to trzeci wpis z cyklu “jak zacząć z gotowym szablonem”. W poprzednich wpisach  omówiłem jak zacząć pracę z Vue.js i Angular. Teraz przyszedł na trzeciego tytana, czyli React.js.