Jeszcze jeden blog o programowaniu

Radosne twórczości leniwego programisty

Znam język programowania X, ale nie mam pomysłu na aplikację

leave a comment »

Tym razem temat trochę bardziej na luzie. Na grupach dyskusyjnych pojawia się często pytanie od początkujących programistów o pomysły na aplikację: a to na prywatny projekt, a to na jakąś pracę inżynierską czy magisterską, itp. Pytania te są dziwne, ponieważ bardzo często przyczyną rozpoczęcia nauki programowania jest niezadowolenie z używanych aktualnie narzędzi albo potrzeba zautomatyzowania sobie pracy. Oczywiście, jest jeszcze druga grupa ludzi, którzy usłyszeli/przeczytali, że „programowania można się nauczyć przerabiając tutorial i wtedy co miesiąc dostaje się górę kasy” – ale to w sumie temat na inny wpis 🙂

No dobra, wybraliśmy język programowania. Oczywiście, mówię tutaj o języku programowania – jeśli ktoś przerobił kurs HTML i/lub CSS to można powiedzieć, że dopiero „liznął” temat jako, że wspomniane technologie nie są językami programowania 🙂 Jak to jednak mówią – Nawet najdalszą podróż zaczyna się od pierwszego kroku.
Więc odbębniliśmy już 15 kursów i 150 tutoriali w wybranej przez nas technologii (oczywiście jest ona najlepsza ze wszystkich dostępnych :)), dowiedzieliśmy się jak poskładać dostępne klocki, żeby napisać program "Witaj świecie!\n"  powtarzany dowolną ilość razy. Ale w sumie co teraz? Chyba z tego „Witaj świecie” nie uda się wyciągnąć 15k na miesiąc. Może jednak zostawić wszystko i wyjechać „w góry na Mazury”?
Oczywiście jako początkujący programista (tzw. junior) mamy szansę na zatrudnienie. Szanse są, ale jest to uzależnione od zbyt wielu innych kryteriów – to też byłby dobry temat na oddzielny wpis.

Zgaduję, że nie mamy się jeszcze za bardzo czym pochwalić potencjalnemu pracodawcy, więc jedną z najlepszych rzeczy jakie możemy zrobić gdy zaczynamy budować swoją przyszłość zawodową jako najlepszy developer w branży IT to zbudowanie swojego portfolio. Oczywiście, generalizuję w tej chwili. Przykładowo takich Panów jak Guido van Rossum czy Douglas Crockford nie zatrudnia się ze względu na ich bogate portfolio 🙂

Tu pojawia się pewnie w wielu głowach pytanie: Spoko, to co mam napisać?
Odpowiedzią na to pytanie niech będzie ta krótka lista – dłuższe listy z konkretnymi propozycjami projektów znaleźć można już pod dostępnymi linkami:

  1. Aplikacja na Androida z pomysłami podzielonymi na kategorie oraz stopnie trudności – Programming Ideas 2:
  2. Lista niewielkich mini-programów do napisania o różnych stopniach trudności – Dailyprogrammer w serwisie Reddit
  3. What Should I Make? Beginner Programming Project Ideas
  4. Przytaczana w wielu miejscach lista: Martyr2’S Mega Project Ideas List!
  5. Kolejna lista z propozycjami projektów
  6. Krótka, pogrupowania lista Over 1,500 Coding Project Ideas z kilkoma różnymi źródłami
  7. Top 27 Programming Project Ideas For Beginners
  8. 5 Project Ideas To Help You Learn Programming Faster
  9. Ideas for Coding Projects
  10. 1000+ Beginner Programming Projects
  11. „I Need Practice Programming”: 49 Ideas for Game Clones to Code

Jak widać, pomysłów jest naprawdę całkiem sporo. Gdyby postawić sobie za cel wykonać nawet połowę z tych projektów – życia by nie starczyło. Oczywiście, nie polecam rzucać się od razu na jakiś ekstremalnie duży projekt, ponieważ istnieje ryzyko, że się szybko zniechęcisz.

Ponadto, jeśli już wciągnęło Cię programowanie i/lub potrzebujesz miejsca na „praktykowanie” swoich umiejętności, poniżej kilka dodatkowych zasobów do codziennych ćwiczeń:

  1. https://py.checkio.org/
  2. https://www.codewars.com/
  3. https://coderbyte.com/
  4. https://codefights.com/
  5. http://exercism.io/
  6. http://codekata.com/
  7. http://www.codeabbey.com/

Niewątpliwą zaletą tych stron jest możliwość konkurowania z innymi programistami i podglądanie często rewelacyjnych rozwiązań, które poszerzą naszą wiedzę na temat danego języka. Nawet do głowy by nam nie przyszło jak ładnie czy zwięźle można rozwiązywać niektóre problemy.

 

Written by Filip Górczyński

2018.02.25 at 18:07:37

Django – zwracanie pustego zbioru

leave a comment »

QuerySet to jedna z podstawowych klas, z którą będziemy pracować w trakcie pisania aplikacji w Django. Trafiłem ostatnio na problem, w którym należało zwrócić inne wyniki w zależności od tego, czy w żądaniu do serwera przesłana została zmienna w postaci pustego łańcucha znaków czy nie została wysłana w ogóle. Drobna różnica mająca ogromne znaczenie. Aby dokładniej zobrazować zaistniały problem postaram się to opisać z przykładami:

Żądany adres http://127.0.0.1/ skutkuje zwróceniem wszystkich wyników – brak jakiegokolwiek filtrowania

Żądany adres http://127.0.0.1/?q= skutkuje brakiem wyników – filtrowanie jest, ale wyszukiwanie po pustym łańcuchu – który de facto pasuje do każdego dowolnego łańcucha znaków też zwróciłoby wszystkie wyniki – a tutaj potrzebowałem zwrócić pusty zbiór.

Żądany adres http://127.0.0.1/q=abc skutkuje zwróceniem wszystkich wyników, które w swojej treści zawierają łańcuch znaków „abc” – tutaj sprawa jest oczywista.

Ponieważ zwrócić musiałem obiekt QuerySet sprawa się komplikowała – a rozwiązaniem okazał się taki prosty kawałek kodu:

Written by Filip Górczyński

2018.02.22 at 09:49:05

Czysty projekt VueJS 2 i używanie średników a zgodność ze standardami ESLint

leave a comment »

vuejs logo

JavaScript jako bardzo elastyczny język programowania nie wymaga używania średników na końcu instrukcji. Nie wymaga – i nawet zgodnie z zaproponowanym standardem JavaScript, nie zaleca się ich stosowania.

Jednak moim skromnym zdaniem – jako kogoś, kto kiedyś popełnił trochę kodu w C i Perlu – z jakiegoś powodu średniki zostały do składni wprowadzone, a ich stosowanie powoduje (ponownie – to tylko moje osobiste odczucie), że kod staje się też czytelniejszy i ładniejszy.

Utwórzmy zatem czysty projekt z ustawieniami jak poniżej – istotna jest linijka "Pick an ESLint preset Standard", gdyż różne standardy mogą się czepiać nadmiarowych średników lub ich braku.

VueJS – podczas inicjowania czystego projektu pozwala wybrać standard ESLint, w ramach którego sprawdzana będzie zgodność kodu z tym standardem, m. in. po uruchomieniu serwera deweloperskiego. Przy wyborze standardowego sprawdzania składni, dodanie średników na końcach instrukcji będzie skutkowało następującym  błędem:

Szczegóły błędu dostępne są pod adresem wskazanym w ramach ostrzeżenia: Extra semicolon.

Rozwiązaniem jest dodanie 'semi': [2, 'always'] do pliku .eslintrc.js:

Ponowne uruchomienie aplikacji będzie wymagało poprawienia (dodania) średników we wszystkich wskazanych miejscach, jednak nadal twierdzę, że nadmiarowy średnik jest lepszy niż jego pominięcie – gdyż próby zastępowania elementów składni wartościami domyślnymi mogą skutkować kodem podobnym do tego z Perla:

Całość dostępna w repozytorium.

Dodatkowe źródła i (głównie) kontrargumenty:

  1. JavaScript Style: Semicolons, or No?
  2. StandardJS#Semicolons
  3. JavaScript Semicolon Insertion. Everything you need to know
  4. An Open Letter to JavaScript Leaders Regarding Semicolons
  5. Understanding Automatic Semicolon Insertion in JavaScript

Written by Filip Górczyński

2018.02.22 at 09:23:51

Bootswatch, czyli darmowe motywy dla znudzonych Bootstrapem

leave a comment »

Ciężko znaleźć w branży webowej programistę, który nie słyszał o Bootstrapie. Podejrzewam jednak, że mniej osób słyszało o kolekcji darmowych motywów – Bootswatch.
Na przykładzie prostej aplikacji w Angularze chciałbym przedstawić instalację jednego z tych darmowych motywów.

Początek nie odbiega od tego, co zwykle robimy. Generujemy czysty projekt Angular, np. narzędziem ng-cli, dodajemy wymagane zależności i instalujemy paczki potrzebne do uruchomienia projektu.

Po krótkiej chwili, gdy otrzymamy informację, że wszystkie zależności zostały zainstalowane poprawnie dodajemy styl wybranego przez nas motywu do globalnych stylów ładowanych w aplikacji – w pliku .angular-cli.json zmieniamy sekcję styles:

Gdyby nie było to widoczne na pierwszy rzut oka, użyłem motywu flatly.

Oczywiście, żeby nie było zbyt pięknie musiałem też „podkraść” fragment zawartości pliku custom.min.css – był w postaci skompresowanej, ale po rozplątaniu dostajemy mniej więcej coś takiego jak poniżej. W dużej mierze chodzi o odstępy pionowe pomiędzy komponentami.

„Zainspirowany” szablonem HTML z przykładu tego motywu wybrałem tylko kilka jego fragmentów żeby pokazać, że jednak coś tam działa:

I to by było wszystko co należy zrobić. Oczywiście można pokusić się o dodanie kilku plików JavaScript, które obsługują takie działania jak popovery czy okienka modalne, ale to może innym razem.

Całość dostępna w repozytorium GitHub.

Written by Filip Górczyński

2018.02.16 at 18:09:51

Który edytor do programowania w języku Python jest najlepszy?

leave a comment »

PyCharm, Vim, Sublime Text, Emacs, VS Code, Atom, gedit, geany, Komodo Edit – to chyba najczęściej pojawiające się propozycje edytorów dla programistów Pythona we wszelakich wątkach w sieci w odpowiedzi na pytanie: Który edytor powinienem używać do programowania w Pythonie?

TL;DR:
Jeśli jesteś początkującym programistą – praktycznie każdy edytor z kolorowaniem składni najprawdopodobniej będzie dobry.
A jeśli masz doświadczenie w programowaniu – na pewno znalazłeś już edytor, który najbardziej odpowiada Twoim osobistym preferencjom.


Dla osób – zwłaszcza początkujących – chciałbym polecić materiał przygotowany przez Pana Mirosława Zelenta – niedługi filmik, który świetnie opisuje kwestie wyboru edytora, odpowiedniego kolorowania składni, itp. wśród początkujących adeptów sztuki programowania:

W dużym skrócie, jeśli nie wiesz czym są zmienne, pętle, instrukcje warunkowe – ogólnie nie znasz jeszcze składni konkretnego języka, wybieranie środowiska do programowania jest w danym momencie najmniej istotne – nie uczyni to w żaden sposób z Ciebie lepszego programisty, a tylko odciągnie Cię od konkretów – nauki samego programowania.

Dodatkowo, każda odpowiedź na pytanie postawione w tytule wprowadza u początkujących jeszcze większy zamęt, ponieważ najczęściej jest ona zupełnie odmienna od każdej ją poprzedzającej.

Wybór edytora czy konkretnego super hiper IDE jest efektem naszych osobistych preferencji (które mogą ulegać zmianie w czasie naszego rozwoju), czasu spędzonego z konkretną technologią oraz przede wszystkim naszego wolnego czasu.
Przykładowo możemy postanowić, że chcemy korzystać z edytora Vim – podobno po zainstalowaniu i skonfigurowaniu odpowiednich wtyczek, mapowań przycisków i kilku innych rzeczy można zacząć tego używać do pisania w Pythonie (znam sporo osób, które takie rozwiązanie bardzo sobie chwalą). Jednak jeśli jesteś początkującym lub masz wiele innych obowiązków/priorytetów i nie możesz pozwolić sobie na poświęcenie kilku wieczorów na ustawienie wszystkiego jak należy oraz opanowania choćby kilku podstawowych skrótów klawiaturowych to rozwiązanie nie jest dobre dla Ciebie. Może jeszcze nie teraz. Może się okazać, że z pewnych względów – nawet po kilku podejściach nigdy dane rozwiązanie nie przypadnie Ci do gustu.
Alternatywnie (np. do Vim) możemy pobrać i uruchomić PyCharm – także w wersji darmowej (Community) dla niekomercyjnych projektów. Uruchamiamy i praktycznie mamy wszystko od razu w ramach całego środowiska: Terminal, integrację z Django/Flask/Pyramid, interpreterami czy środowiskami wirtualnymi Pythona – wszystko z całkiem ładnym i spójnym interfejsem graficznym.

Oczywiście  są jeszcze inne rozwiązania: Atom, VS Code, Sublime Text – mające nadal wielu zwolenników. Wydaje mi się, że do pisania prostych programów edytory te (często w połączeniu z linią poleceń) są w zupełności wystarczające; do dużych projektów jednak nie do końca.
Osobiście w przeszłości korzystałem z kilku powyższych narzędzi i najbardziej do gustu przypadł mi Atom oraz Visual Studio Code. Tego drugiego nadal od czasu do czasu używam. Ostatecznie do pracy przy większych projektach przesiadłem się na PyCharm Professional. Jednak nadal – są to tylko moje osobiste preferencje. Zupełnie tak jak z kolorowaniem składni – jeden uwielbia białe tło, inny czarne, a jeszcze ktoś inny bijące po oczach niebieskie.

Podsumowując: nie uważam, że którykolwiek z powyższych edytorów czy IDE jest zły. Nie uważam też, że którykolwiek z nich jest rozwiązaniem właściwym w każdym przypadku. Jak każde oprogramowanie, także i te mają mnóstwo zalet i wad.
Co będzie dobre dla Ciebie? Jeśli zaczynasz programować to większości funkcji i tak nie wykorzystasz, więc wybór może być całkowicie losowy. Zainstaluj sobie jedno z powyższych narzędzi, spędź w nim kilka tygodni i podejmij decyzję, postępuj tak dopóki nie trafisz na narzędzie w pełni pasujące do Twoich problemów. Jeśli spędziłeś już trochę czasu z kodem i wiesz, czego naprawdę potrzebujesz w pracy wybierz jedno narzędzie i naucz się go możliwie najlepiej – warto rozważyć uczenie się co najmniej jednego skrótu klawiaturowego dziennie.

Każda wojna – język A jest lepszy niż język B, edytor X jest lepszy od edytora Y czy system operacyjny L jest lepszy od systemu operacyjnego W – jest tylko i wyłącznie marnowaniem cennego czasu.

BONUS: Dla początkujących programistów Pythona na korzyść PyCharma może przemawiać jego wersja z wbudowanym kursem Pythona. Warto zapoznać się wówczas z PyCharm EDU.

Written by Filip Górczyński

2018.02.14 at 21:28:43

Zmiana kolejności zakładek w Chrome DevTools

leave a comment »

Jako programiści webowi dużą część czasu spędzamy w DevToolsach, czy jak kto woli – w „narzędziach programisty” – wbudowanych w przeglądarki (osobiście jestem zwolennikiem Chrome’a). W związku z tym dobrze jest skonfigurować to narzędzie – chociaż w niewielkim stopniu – pod siebie.

O ile dobrze jest wykorzystywać dobrodziejstwo skrótów klawiaturowych (do szybkiego podglądu których dostęp uzyskujemy poprzez kliknięcie 3 pionowych kropek [nie znam profesjonalnej nazwy, chociaż spotkałem się z „hamburger menu”] w prawym górnym narożniku DevTools – chodzi dokładnie o przycisk   ). Pełna lista skrótów dostępna jest na stronie chrome-devtools. Używanie skrótów klawiaturowych może znacznie przyspieszyć naszą pracę z tym narzędziem.

To o czym chciałbym jednak napisać to możliwość dostosowania zakładek w DevTools – nie wiem na ile znana jest to funkcja, ale może okazać się dość przydatna. Otóż jeśli nie korzystamy zbyt często z jakiejś zakładki to po prostu ją klikamy i przeciągamy, natomiast te, które wykorzystywane są przez nas najczęściej możemy przeciągnąć na początek, czego kolejnym plusem jest ich widoczność przy zmianie (głównie zmniejszaniu) okna Chrome.

Written by Filip Górczyński

2018.02.14 at 13:59:30

CORS Headers – komunikacja VueJS i Django

leave a comment »

vuejs logoCross-Origin Resource Sharing (CORS) to mechanizm wykorzystujący dodatkowe nagłówki HTTP pozwalające różnym agentom (np. przeglądarkom) na dostęp do zasobów znajdujących się na innej domenie, porcie czy protokole niż aktualna. 

Na potrzeby wpisu zakładam, że framework (Django) i biblioteki (Vue.js i axios) z których będziemy korzystać – mamy już zainstalowane w projekcie.

W projekcie Vue wprowadźmy następujące zmiany:

W pliku App.vue:

W pliku config/dev.env.js:

Pliki src/assets/logo.png i src/components/HelloWorld.vue możemy wyrzucić, jako w tej chwili nie używane.

W backendzie natomiast, w pliku views.py naszej aplikacji (movies):

i dodajemy routing dla naszej aplikacji w pliku urls.py (plik ten domyślnie nie istnieje i należy go utworzyć):

Następnie dokunujemy zmian w plikach urls.py – głównym pliku routingu całego projektu Django:

oraz settings.py:

Startujemy serwery poniższymi poleceniami w odpowiednich katalogach:

Uruchamiamy przeglądarkę i otwieramy 2 zakładki. W pierwszej zweryfikujemy tylko, czy serwer Django zwraca prawidłową odpowiedź – JSON (http://127.0.0.1:8000) i jeśli tak, to od razu można ją zamknąć. W drugiej zakładce otwieramy narzędzia programisty i przechodzimy pod adres aplikacji Vue (http://127.0.0.1:8080).
Dziwne – w zakładce Network zobaczyć możemy, że żądanie GET do serwera się udało i nawet możemy podejrzeć zwrócone wyniki:

Czyli wszystko jest prawidłowo? No nie do końca niestety. O ile domena (host) – w tej sytuacji 127.0.0.1 nie są problemem – to sprawa komplikuje się właśnie w przypadku niezgodności portów i przeglądarka może nam w konsoli sypnąć następującym błędem:

Problem nasz rozwiązać możemy paczką django-cors-headers, jej instalacja nie odbiega za bardzo od instalacji innych paczek Pythona:

pip install django-cors-headers==2.1.0

Zmieniamy trochę w pliku settings.py (ale naprawdę ciut-ciut):

… restartujemy serwer Django i już, wchodząc na adres naszej aplikacji powinniśmy cieszyć się pobranymi z serwera danymi.

Wymagane paczki do postawienia projektu Django znajdują się  w katalogu backend/requirements/base.txt, natomiast całość kodu źródłowego bezpośrednio w repozytorium VueJS-Django-CORS.

Dla zainteresowanych można jeszcze poszukać informacji na temat Same Origin Policy.

Dodatkowe źródła (często z fajnymi obrazkami):

  1. MDN CORS
  2. Understanding CORS
  3. Understanding CORS: Cross-Origin Resource Sharing
  4. Understanding and using CORS

 

Written by Filip Górczyński

2018.02.09 at 13:42:07

%d blogerów lubi to: