diff --git a/.env-sample b/.env-sample index f4d70b4b..aeeaee9f 100644 --- a/.env-sample +++ b/.env-sample @@ -2,33 +2,31 @@ DATABASE_URL="postgres://postgres:postgres@localhost:5438/postgres" DATABASE_POOL_URL="postgres://postgres:postgres@localhost:5438/postgres" NEXT_PUBLIC_SUPABASE_URL="http://localhost:8765" NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTYwMzk2ODgzNCwiZXhwIjoyNTUwNjUzNjM0LCJyb2xlIjoiYW5vbiJ9.36fUebxgx1mcBo4s19v0SzqmzunP--hm_hep0uLX0ew" +# Supabase Key (service_role, private): eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTYwMzk2ODgzNCwiZXhwIjoyNTUwNjUzNjM0LCJyb2xlIjoic2VydmljZV9yb2xlIn0.necIJaiP7X2T2QjGeV-FhpkizcNTX8HjDDBAxpgQTEI +# Email testing interface URL: http://localhost:9000 YOUTUBE_API_KEY="" CLOUDINARY_URL="" -# Supabase Key (service_role, private): eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTYwMzk2ODgzNCwiZXhwIjoyNTUwNjUzNjM0LCJyb2xlIjoic2VydmljZV9yb2xlIn0.necIJaiP7X2T2QjGeV-FhpkizcNTX8HjDDBAxpgQTEI -# Email testing interface URL: http://localhost:9000 - FEED_UPDATE_SECRET="supertajne" -CURSOR_ENCRYPTION_KEY="d6F3Efeqd6F3Efeq" CAPTCHA_SECRET_KEY=0x0000000000000000000000000000000000000000 +NEXT_PUBLIC_CAPTCHA_SITE_KEY=10000000-ffff-ffff-ffff-000000000001 +NEXT_PUBLIC_URL="localhost:3000" + +NEXT_PUBLIC_GA_TRACKING_ID="" +NEXT_PUBLIC_SENTRY_DSN="" MAILGUN_DOMAIN="domena1337.mailgun.org" MAILGUN_API_KEY="SekretnyKluczDoAPI" MAILGUN_FROM="foo@bar.com" -NEXT_PUBLIC_GA_TRACKING_ID="" -NEXT_PUBLIC_SENTRY_DSN="" -NEXT_PUBLIC_CAPTCHA_SITE_KEY=10000000-ffff-ffff-ffff-000000000001 -NEXT_PUBLIC_URL="localhost:3000" - GITHUB_ID="supertajne" GITHUB_SECRET="bardzotajne" SECRET="anothersecret" JWT_SECRET="hmmmmmm" -NEXT_PUBLIC_ALGOLIA_API_KEY="" +ALGOLIA_API_SECRET="" NEXT_PUBLIC_ALGOLIA_APP_ID="" NEXT_PUBLIC_ALGOLIA_INDEX_NAME="" -ALGOLIA_API_SECRET="" +NEXT_PUBLIC_ALGOLIA_API_KEY="" diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f947c8c9..8759acc8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,7 +8,7 @@ Zachęcamy do otwierania Issues ze znalezionymi bugami i z sugestiami tego, co m - TypeScript - Next.js (SSG, ISG) -- PostgreSQL +- PostgreSQL (Supabase) - Prisma - Docker - Vercel @@ -24,10 +24,31 @@ Przed przystąpieniem do pracy należy skopiować plik `.env-sample` do `.env`. Projekt uruchamiamy jednym poleceniem `yarn dev`. Spowoduje ono instalację wszystkich potrzebnych zależności, uruchomienie kontenera w Dockerze oraz naszej aplikacji. Po chwili powinna być gotowa pod adresem http://localhost:3000/ +### Uwaga co do Supabase + +Przy pierwszym uruchomieniu, możesz zobaczyć komunikat mówiąc o braku Supabase. W takim przypadku uruchom polecenie `yarn supabase init` i zatwierdź domyślne opcje wciskając 3xenter. Po dłuższej chwili na ekranie zobaczysz 5 wartości: + +- Supabase URL +- Supabase Key (anon, public) +- Supabase Key (service_role, private) +- Database URL +- Email testing interface URL + +Koniecznie skopiuj je do swojego pliku `.env` odpowiednio: + +- Supabase URL jako `NEXT_PUBLIC_SUPABASE_URL` +- Supabase Key (anon, public) jako `NEXT_PUBLIC_SUPABASE_ANON_KEY` +- Database URL jako `DATABASE_URL` i `DATABASE_POOL_URL` +- Supabase Key (service_role, private) oraz Email testing interface URL nie będą potrzebne + +Następnie ponownie odpal `yarn dev`. + +## Przywracanie danych z DUMP.sql + Gdy wszystko będzie już gotowe, to w drugim oknie terminala należy wpisać polecenie: ```bash -docker exec -i polskifrontend_typeofweb_polskifrontend_1 psql polskifrontend -U postgres < DUMP.sql +docker exec -i supabase-db psql postgres -U postgres < DUMP.sql ``` Spowoduje to załadowanie danych do bazy z pliku DUMP.sql. diff --git a/DUMP.sql b/DUMP.sql index 06513d31..692e7462 100644 --- a/DUMP.sql +++ b/DUMP.sql @@ -2,8 +2,8 @@ -- PostgreSQL database dump -- --- Dumped from database version 12.7 (Ubuntu 12.7-1.pgdg16.04+1) --- Dumped by pg_dump version 12.6 +-- Dumped from database version 13.3 +-- Dumped by pg_dump version 13.4 SET statement_timeout = 0; SET lock_timeout = 0; @@ -17,88 +17,90 @@ SET client_min_messages = warning; SET row_security = off; -- --- Data for Name: Blog; Type: TABLE DATA; Schema: public; Owner: ionbwtojedynto +-- Data for Name: Blog; Type: TABLE DATA; Schema: public; Owner: postgres -- COPY public."Blog" (id, name, href, rss, slug, "lastUpdateDate", favicon, "createdAt", "updatedAt", "isPublic", "creatorEmail", "lastArticlePublishedAt") FROM stdin; ckdstwpeo001mi3um9o1s0rq1 Capra Web https://blog.capraweb.pl https://blog.capraweb.pl/feed capra-web 2020-08-13 13:19:00 https://res.cloudinary.com/polskifrontend/image/upload/v1595931609/favicon_1595931608260.png 2020-08-13 13:19:00 2020-08-13 13:19:00 t \N 2020-08-13 13:19:00 -cklidcb3o00002pma33gvhnbe Type of Web YouTube https://www.youtube.com/channel/UCR4qSQa8JFh6zeR5Idvnewg https://www.youtube.com/feeds/videos.xml?channel_id=UCR4qSQa8JFh6zeR5Idvnewg type-of-web-youtube 2021-06-25 14:23:57.594 https://www.youtube.com/s/desktop/d743f786/img/favicon_48.png 2021-02-23 18:55:11.412 2021-07-05 00:14:22.698 t hi@typeofweb.com \N -ckocpwuso0019afl7he6igw3f Oskar Kowalów - blog o programowaniu https://www.oskarkowalow.pl/ https://www.oskarkowalow.pl/rss.xml oskar-kowalow-blog-o-programowaniu 2021-05-06 10:05:05.902 2021-05-06 09:59:35.4 2021-07-05 00:14:23.208 t kowalow.oskar@gmail.com \N -ckgvhpmo0001ji3umfm7ubw86 Frontlive.pl by Olaf Sulich https://www.frontlive.pl https://www.frontlive.pl/rss.xml frontlive.pl-by-olaf-sulich 2021-06-28 13:07:58.939 https://res.cloudinary.com/polskifrontend/image/upload/v1589778136/favicon_1589778136342.png 2020-10-30 00:00:00 2021-07-05 00:14:23.499 t \N 2021-06-28 00:00:00 -ckiplfn1c001ci3um4nlf8o4x devpebe.com | blog frontendowy https://devpebe.com https://devpebe.com/feed devpebe.com-or-blog-frontendowy 2021-02-20 10:51:38.204 https://res.cloudinary.com/polskifrontend/image/upload/v1554671260/favicon_1554671259409.ico 2020-12-15 06:17:00 2021-07-05 00:14:23.699 t \N 2021-02-20 10:48:57 -cko1v4lx8000012molv7wks6j Kot Źródłowy https://kot-zrodlowy.pl/ https://kot-zrodlowy.pl/feed.xml kot-zrodlowy 2021-05-06 10:05:05.902 2021-04-28 19:40:07.292 2021-07-05 00:14:24.016 t kontakt@kot-zrodlowy.pl \N -ckir2fk800008i3um9c21fesl webroad.pl http://webroad.pl/ http://webroad.pl/feed webroad.pl 2021-02-04 16:06:53.835 https://webroad.pl/wp-content/uploads/2017/02/cropped-logo_webroad_big-32x32.png 2020-12-16 07:00:36 2021-07-05 00:14:24.138 t \N 2021-02-04 15:58:18 -ckekeq7uo0004i3umft185ior Piotr Nalepa – Blog webmasterski | Tutoriale JavaScript, CSS i nie tylko http://blog.piotrnalepa.pl/ http://blog.piotrnalepa.pl/feed piotr-nalepa-blog-webmasterski-or-tutoriale-javascript-css-i-nie-tylko 2021-05-18 07:13:51.613 https://blog.piotrnalepa.pl/wp-content/uploads/2020/07/cropped-logo-512x512-1-32x32.png 2020-09-01 20:31:36 2021-07-05 00:14:24.7 t \N 2021-05-18 06:49:37 -ck9qqdx4o000xi3umdjbh0w86 Będę Programistką http://bedeprogramistka.pl/ http://bedeprogramistka.pl/feed bd-programistk 2020-05-03 07:26:03 https://bedeprogramistka.pl/wp-content/uploads/2017/07/cropped-favicon-32x32.png 2020-05-03 07:26:03 2021-07-05 00:14:25.468 t \N 2020-05-03 07:26:03 -cjv6u59zk000wi3um4vfceqqt AlgoSmart http://www.algosmart.pl http://www.algosmart.pl/feed algosmart 2019-05-02 16:00:02 http://www.algosmart.pl/wp-content/uploads/2018/07/cropped-logo-AS-60x60.png 2019-05-02 16:00:02 2021-07-05 00:14:26.06 t \N 2019-05-02 16:00:02 -cjpkyz77s0018i3um4hbp1uqq Blog – Onionbyte http://onionbyte.com/blog/ http://onionbyte.com/blog/feed/ blog-onionbyte 2018-12-12 09:25:49 https://onionbyte.com/wp-content/uploads/2018/12/cropped-Obszar-roboczy-1-1-32x32.png 2018-12-12 09:25:49 2021-06-21 00:15:49.864 t \N 2018-12-12 09:25:49 -ckhnmdge00000i3um6batg2gk NetteCode https://www.nettecode.com/ https://www.nettecode.com/feed nettecode 2020-11-18 16:28:03 https://i2.wp.com/www.nettecode.com/wp-content/uploads/2016/11/logo_nettecode_fanpage.png?fit=32%2C32&ssl=1 2020-11-18 16:28:03 2021-07-04 00:14:26.016 t \N 2020-11-18 16:28:03 -ckmoh2k1y000050l0rtc97ktd ProgramistaFrontend YouTube https://www.youtube.com/c/DanielNoworyta https://www.youtube.com/feeds/videos.xml?channel_id=UCfiwERhmAaYkYy_Hwfke_7w programistafrontend-youtube 2021-06-30 06:36:33.75 2021-03-25 06:05:54.31 2021-07-05 00:14:22.623 t daniel@programistafrontend.pl \N -ckiswuz9s0017i3um5mg4h7q1 hello roman YouTube https://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/ https://www.youtube.com/feeds/videos.xml?channel_id=UCq8XmOMtrUCb8FcFHQEd8_g hello-roman-youtube 2021-06-17 17:54:08.113 https://res.cloudinary.com/polskifrontend/image/upload/v1543231573/favicon_1543231573509.ico 2020-12-17 14:00:10 2021-07-05 00:14:24.503 t \N 2021-06-17 17:30:04 -ckjrjuqf900002bk2kpgy4181 Web Dev Insider YouTube https://www.youtube.com/channel/UCsWwyd-yB4qTToTiuLCOuJQ https://www.youtube.com/feeds/videos.xml?channel_id=UCsWwyd-yB4qTToTiuLCOuJQ web-dev-insider-youtube 2021-05-27 08:13:37.445 https://www.youtube.com/s/desktop/d743f786/img/favicon_48.png 2021-01-10 19:47:59.685 2021-07-05 00:14:24.623 t kontakt@webdevinsider.pl \N -ckjcy6q5400001hkzvyh1xycf Przeprogramowani LIVE YouTube https://www.youtube.com/channel/UCLlxU3mNEO91RHU6CtLrB3w https://www.youtube.com/feeds/videos.xml?channel_id=UCLlxU3mNEO91RHU6CtLrB3w przeprogramowani-live-youtube 2021-07-01 17:50:18.108 https://www.youtube.com/s/desktop/d743f786/img/favicon_48.png 2020-12-31 14:32:41.176 2021-07-05 00:14:24.784 t olafsulich@gmail.com \N -ckkb3uw6b00002smi6pw37cjt JS Dżem YouTube https://www.youtube.com/jsdzem https://www.youtube.com/feeds/videos.xml?channel_id=UCqawL4rsFulZi1zjpromBNQ js-dzem-youtube 2021-06-17 16:39:01.569 2021-01-24 12:15:36.804 2021-07-05 00:14:24.898 t jakub.pusiak@gmail.com \N -ckjpkgp9u000012mnlbnkxu51 Doman Code YouTube https://www.youtube.com/channel/UCmSrOlNDppr8nLM9aZNCFLg https://www.youtube.com/feeds/videos.xml?channel_id=UCmSrOlNDppr8nLM9aZNCFLg doman-code-youtube 2021-06-28 17:00:24.342 https://www.youtube.com/s/desktop/d743f786/img/favicon_48.png 2021-01-09 10:29:32.275 2021-07-05 00:14:24.987 t mateusz.domanski.1989@gmail.com \N -ckir8ypi0000ki3um2pa1fvzp Piotr Kowalski YouTube https://www.youtube.com/user/Piecioshka/videos https://www.youtube.com/feeds/videos.xml?channel_id=UCffjO7O5ELIUrFWIhpf64uw piotr-kowalski-youtube 2020-12-31 08:13:33.233 https://res.cloudinary.com/polskifrontend/image/upload/v1537457073/favicon_1537457070704.ico 2020-12-16 10:03:27 2021-07-05 00:14:25.06 t \N 2020-12-31 08:13:13 -ckjgw7inp00000vk0v43qxoef skutecznyprogramista.pl RSS Feed https://skutecznyprogramista.pl/ https://skutecznyprogramista.pl/rss.xml skutecznyprogramista.pl-rss-feed 2021-02-24 00:10:56.409 2021-01-03 08:48:23.606 2021-07-05 00:14:25.306 t kjendrzyca@gmail.com \N -ckius9kiw001ki3um2blndfkq Require Podcast https://require.podcast.gq https://anchor.fm/s/139df89c/podcast/rss require-podcast 2021-06-23 19:20:11.507 https://d3t3ozftmdmh3i.cloudfront.net/production/podcast_uploaded_nologo/3191199/3191199-1606936050006-6cd300b2a175d.jpg 2020-12-18 21:27:05 2021-07-05 00:14:24.192 t \N 2021-06-23 19:13:34 -cjj4eqtmw0001i3umen1q8px0 Devcorner https://devcorner.pl/ https://devcorner.pl/feed devcorner 2021-01-07 19:02:42.376 https://devcorner.pl/wp-content/uploads/2018/06/fav-50x50.png 2018-07-02 15:16:53 2021-07-05 00:14:26.518 t \N 2021-01-07 18:52:39 -ckhgqbfog000ii3um332tat33 Wake up and Code http://www.wakeupandcode.pl/ http://www.wakeupandcode.pl/feed wake-up-and-code 2021-03-07 12:40:17.46 https://i0.wp.com/www.wakeupandcode.pl/wp-content/uploads/2018/04/cropped-profile_fp.png?fit=32%2C32&ssl=1 2020-11-13 20:44:04 2021-07-05 00:14:29.539 t \N 2021-03-07 12:13:16 -ckmor5k8y000044moj65m13y0 Blog Vived https://blog.vived.io/tag/frontend/ https://blog.vived.io/rss/ blog-vived 2021-07-05 09:48:31.186 https://blog.vived.io/favicon.png 2021-03-25 10:48:10.691 2021-07-05 09:48:46.618 t tomaboro96@gmail.com \N -ckc4s1jmo001ii3um6ovu5nhk Frontstack.pl https://frontstack.pl https://frontstack.pl/feed frontstack.pl 2021-07-01 11:04:24.972 https://frontstack.pl/wp-content/uploads/2020/04/cropped-favicon-2-32x32.png 2020-07-02 12:40:36 2021-07-05 00:14:29.289 t \N 2021-07-01 10:57:50 -cki2dml0o000di3umgjexb6pk WebKrytyk.pl http://www.webkrytyk.pl/ http://www.webkrytyk.pl/feed/ webkrytyk.pl 2021-06-23 23:38:47.658 https://res.cloudinary.com/polskifrontend/image/upload/v1537457076/favicon_1537457073765.ico 2020-11-29 00:19:45 2021-07-05 00:14:26.107 t \N 2021-06-23 23:37:32 -ck801ynig001pi3um28xx49z7 Z podwórka programisty https://pawelochota.pl/ https://pawelochota.pl/feed/ z-podworka-programisty 2020-03-20 10:40:37 2020-03-20 10:40:37 2021-07-05 00:14:26.681 t \N 2020-03-20 10:40:37 -ckivz8t54001di3umfv7i4q26 Artur Chmaro YouTube https://www.youtube.com/channel/UCFmXR9JohMyuXPya2OUkcjg https://www.youtube.com/feeds/videos.xml?channel_id=UCFmXR9JohMyuXPya2OUkcjg artur-chmaro-youtube 2021-07-01 07:46:53.455 https://res.cloudinary.com/polskifrontend/image/upload/v1559139684/favicon_1559139683896.ico 2020-12-19 17:30:13 2021-07-05 00:14:26.737 t \N 2021-06-30 07:11:14 -cj657y0ig000ji3umhjzvf50i koduje YouTube http://kodu.je/ https://www.youtube.com/feeds/videos.xml?channel_id=UCLLdzVN9P9lV8kmJhHsiuHA koduje-youtube 2017-08-09 16:18:07 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457069094.png 2017-08-09 16:18:07 2021-07-05 00:14:26.927 t \N 2017-08-09 16:18:07 -cjfsgdao0000fi3um8hz4dspc Idaszak Blog - JavaScript, AngularJS http://www.idaszak.com/ http://feeds.feedburner.com/IdaszakcomBlog idaszak-blog-javascript-angularjs 2018-04-09 16:30:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457073/favicon_1537457072961.png 2018-04-09 16:30:00 2021-07-05 00:14:27.286 t \N 2018-04-09 16:30:00 -cj4tp0i00000ri3umf7udfqvm Blog - Front End Nebula - JavaScript, HTML, CSS http://blog.nebula.us/ http://blog.nebula.us/?format=feed blog-front-end-nebula-javascript-html-css 2017-07-07 10:03:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457074/favicon_1537457071489.ico 2017-07-07 10:03:00 2021-07-05 00:14:27.562 t \N 2017-07-07 10:03:00 -ck2uky50o000gi3um2qmhblbo Blog – SarvenDev http://sarvendev.com/blog http://sarvendev.com/blog/feed blog-sarvendev 2019-11-11 15:26:57 https://res.cloudinary.com/polskifrontend/image/upload/v1537457074/favicon_1537457073529.png 2019-11-11 15:26:57 2021-07-05 00:14:27.676 t \N 2019-06-25 17:47:30 -ckj9sdcq7000051l5pzwpbq9f Jak zacząć programować? YouTube https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA https://www.youtube.com/feeds/videos.xml?channel_id=UCF4jzVCa2J45NXnNtf6XBoA jak-zaczac-programowac-youtube 2021-07-01 07:46:53.455 https://www.youtube.com/s/desktop/d743f786/img/favicon_48.png 2020-12-29 09:26:34.16 2021-07-05 00:14:27.696 t hi@typeofweb.com \N -ckio5ucds001qi3um0occaae7 a – frontman https://a-frontman.pl/ https://a-frontman.pl/feed a-frontman 2021-03-30 08:51:21.466 https://a-frontman.pl/wp-content/uploads/2020/10/cropped-Angular_full_color_logo.svg_-32x32.png 2020-12-14 06:12:46 2021-07-05 00:14:28.051 t \N 2021-03-30 08:51:19 -cj4phfytc000pi3um4bh44exz dev in spe http://devinspe.blogspot.nl/ http://devinspe.blogspot.com/feeds/posts/default dev-in-spe 2017-07-04 11:20:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457073/favicon_1537457072208.ico 2017-07-04 11:20:00 2021-07-05 00:14:28.381 t \N 2017-07-04 11:20:00 -cjczvdmnk000hi3umdr1lf9nt Blog – Induweb http://www.induweb.pl/blog/ http://www.induweb.pl/blog/feed blog-induweb 2018-01-29 07:05:26 https://res.cloudinary.com/polskifrontend/image/upload/v1537457073/favicon_1537457070383.png 2018-01-29 07:05:26 2021-07-05 00:14:28.711 t \N 2018-01-29 07:05:26 -ckhxjb6o0000yi3umb3hg09jv FSGeek blog https://fsgeek.pl/ https://fsgeek.pl/index.xml fsgeek-blog 2021-06-29 16:08:21.118 https://fsgeek.pl/logo.png 2020-11-25 15:00:00 2021-07-05 00:14:29.103 t \N 2021-06-29 16:00:00 -cjsbs4x5c001ai3umfoh24x33 Blog – Robię Internety http://robieinternety.pl/blog/ http://robieinternety.pl/blog/feed blog-robie-internety 2019-02-19 13:03:30 2019-02-19 13:03:30 2021-07-05 00:14:34.242 t \N 2019-02-19 13:03:30 -ckg2k1vxc001gi3umclnyctyp Krzysztof Furtak YouTube https://www.youtube.com/channel/UCCUkk1ccUYgxYORcLUGAmeQ https://www.youtube.com/feeds/videos.xml?channel_id=UCCUkk1ccUYgxYORcLUGAmeQ krzysztof-furtak-youtube 2021-03-12 11:30:15.251 https://res.cloudinary.com/polskifrontend/image/upload/v1578899248/favicon_1578899248162.ico 2020-10-09 18:00:12 2021-07-05 00:14:29.351 t \N 2021-03-12 11:00:14 -ckieg15g0001bi3um0fj3gred overment YouTube https://www.youtube.com/channel/UC_MIaHmSkt9JHNZfQ_gUmrg https://www.youtube.com/feeds/videos.xml?channel_id=UC_MIaHmSkt9JHNZfQ_gUmrg overment-youtube 2021-07-05 09:48:31.186 https://res.cloudinary.com/polskifrontend/image/upload/v1550824965/favicon_1550824965443.ico 2020-12-07 11:00:18 2021-07-05 09:48:46.682 t \N 2021-06-22 08:09:18 -cjz9yx06o0016i3umf74v7ka2 Blog – Crocoder https://crocoder.pl/blog/ https://crocoder.pl/blog/feed blog-crocoder 2019-08-13 15:15:42 https://crocoder.pl/wp-content/uploads/2019/02/cropped-favicon-32x32.png 2019-08-13 15:15:42 2021-07-05 00:14:29.455 t \N 2019-08-13 15:15:42 -ckesj8kg0000vi3um42jmc86u kernelgonnapanic.pl https://kernelgonnapanic.pl/ https://kernelgonnapanic.pl/atom.xml kernelgonnapanic.pl 2021-03-08 13:02:33.119 https://res.cloudinary.com/polskifrontend/image/upload/v1537457073/favicon_1537457071001.ico 2020-09-07 13:00:00 2021-07-05 00:14:29.636 t \N 2021-03-08 09:15:00 -ckfdlon7c0009i3umeitx0nz4 Głównie JavaScript http://jcubic.pl/ http://jcubic.pl/feed.xml glownie-javascript 2020-09-22 06:51:39 https://res.cloudinary.com/polskifrontend/image/upload/v1537457074/favicon_1537457071582.ico 2020-09-22 06:51:39 2021-07-05 00:14:29.794 t \N 2020-09-22 06:51:39 -cj2ewxxpe000oi3um964j8a3a Czas na JS - bo jak nie teraz to kiedy? http://czasnajs.blogspot.com/ http://czasnajs.blogspot.com/feeds/posts/default czas-na-js-bo-jak-nie-teraz-to-kiedy 2017-05-07 16:29:00.002 https://res.cloudinary.com/polskifrontend/image/upload/v1537457072/favicon_1537457070318.ico 2017-05-07 16:29:00.002 2021-07-05 00:14:30.026 t \N 2017-05-07 16:29:00.002 -ckhdl0sns0014i3um91mvcxsj Solution Chaser https://solutionchaser.com/ https://solutionchaser.com/rss solution-chaser 2021-03-01 20:04:45.493 https://solutionchaser.com/favicon.png 2020-11-11 15:52:31 2021-07-05 00:14:30.052 t \N 2021-03-01 19:03:26 -ckiyvf2eg0012i3um2h8g0dup Devszczepaniak.pl https://devszczepaniak.pl/ https://devszczepaniak.pl/feed devszczepaniak.pl 2021-05-27 18:51:47.4 https://devszczepaniak.pl/wp-content/uploads/2018/08/cropped-icon-1-32x32.png 2020-12-21 18:06:25 2021-07-05 00:14:30.134 t \N 2021-05-27 18:20:13 -cjjyg7b2w0011i3umc74cg6xw MatRog.pl https://matrog.pl/ https://matrog.pl/feed matrog.pl 2018-07-23 15:50:47 https://matrog.pl/wp-content/uploads/2017/10/avatar-150x150.png 2018-07-23 15:50:47 2021-07-05 00:14:30.333 t \N 2018-07-23 15:50:47 -ckh8coao00010i3umhqw2e6xc przemuh.dev [PL] https://przemuh.pl/ https://przemuh.pl/rss/ przemuh.dev-pl 2020-11-08 00:00:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457072/favicon_1537457069816.ico 2020-11-08 00:00:00 2021-07-05 00:14:31.282 t \N 2020-11-08 00:00:00 -ckcv2snww001ei3um3wmeeaom Nowoczesny Frontend https://nowoczesny-frontend.pl https://nowoczesny-frontend.pl/feed nowoczesny-frontend 2021-05-20 14:07:34.156 https://nowoczesny-frontend.pl/wp-content/uploads/2018/10/logoBig-150x150.png 2020-07-20 22:23:38 2021-07-05 00:14:31.991 t \N 2021-05-20 14:00:00 -ck87juhko000ni3umanz2707n Będę Kodzić http://bedekodzic.pl/ http://bedekodzic.pl/feed bede-kodzic 2021-01-17 14:18:12.228 https://bedekodzic.pl/wp-content/uploads/2017/02/cropped-Favi3-32x32.png 2020-03-25 16:35:39 2021-07-05 00:14:31.844 t \N 2021-01-17 14:13:52 -cki52vf40000ci3um2x784hhn Comandeer’s blog https://blog.comandeer.pl https://blog.comandeer.pl/feeds/feed.xml comandeer's-blog 2021-06-30 21:27:43.537 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457068671.jpg 2020-11-30 21:42:00 2021-07-05 00:14:32.061 t \N 2021-06-30 21:22:00 -cki6eer4w001ri3umeoa347v0 Wojciech Szućko https://wojciechszucko.com/ https://wojciechszucko.com/feed/ wojciech-szucko 2021-03-29 07:36:49.579 https://wojciechszucko.com/wp-content/uploads/2020/10/cropped-avatar-circle-32x32.png 2020-12-01 19:52:44 2021-07-05 00:14:32.487 t \N 2021-03-29 07:31:20 -ckijj62co001hi3um2kbkcy0a Kody, triki, sztuczki http://kody.wig.pl http://kody.wig.pl/feed kody-triki-sztuczki 2021-06-25 18:53:50.821 https://res.cloudinary.com/polskifrontend/image/upload/v1578919198/favicon_1578919198192.ico 2020-12-11 00:26:57 2021-07-05 00:14:32.508 t \N 2021-06-25 18:41:17 -ckdyuycaw000ti3um7a4vg0hl Webdevmaster.pl http://webdevmaster.pl/ http://webdevmaster.pl/feed webdevmaster.pl 2020-08-17 18:34:53 \N 2020-08-17 18:34:53 2021-07-05 00:14:32.818 t \N 2020-08-17 18:34:53 -cj9n425nk000si3umcemuc2t5 | KuzniaBinarna.pl :: blog programisty http://kuzniabinarna.pl/ http://kuzniabinarna.pl/feed or-kuzniabinarna.pl-::-blog-programisty 2017-11-05 18:48:20 http://kuzniabinarna.pl/wp-content/uploads/2017/02/logo.png 2017-11-05 18:48:20 2021-07-05 00:14:33.741 t \N 2017-11-05 18:48:20 -cjdc39n3s0003i3umgtxp6w6a JS.n00b http://jsdn.pl/ http://jsdn.pl/feed js.n00b 2018-02-06 20:19:31 https://i1.wp.com/jsdn.pl/wp-content/uploads/2017/01/cropped-favicon.png?fit=32%2C32 2018-02-06 20:19:31 2021-07-05 00:14:33.983 t \N 2018-02-06 20:19:31 -ckirm3wzs001li3umfdkcfl6k Front Cave https://frontcave.pl https://frontcave.pl/feed/ front-cave 2021-06-26 07:47:00.094 2020-12-16 16:11:25 2021-07-05 00:14:37.021 t \N 2021-06-26 07:33:14 -ckej6qdc0001ni3um8neham6w domanart.pl http://www.domanart.pl/ http://www.domanart.pl/index.xml domanart.pl 2021-06-22 14:27:48.641 2020-09-01 00:00:00 2021-07-05 00:14:30.281 t \N 2021-06-20 00:00:00 +ck801ynig001pi3um28xx49z7 Z podwórka programisty https://pawelochota.pl/ https://pawelochota.pl/feed/ z-podworka-programisty 2020-03-20 10:40:37 2020-03-20 10:40:37 2021-10-09 00:17:16.448 t \N 2020-03-20 10:40:37 +ckekeq7uo0004i3umft185ior Piotr Nalepa – Blog webmasterski | Tutoriale JavaScript, CSS i nie tylko http://blog.piotrnalepa.pl/ http://blog.piotrnalepa.pl/feed piotr-nalepa---blog-webmasterski-or-tutoriale-javascript-css-i-nie-tylko 2021-05-18 07:13:51.613 https://blog.piotrnalepa.pl/wp-content/uploads/2020/07/cropped-logo-512x512-1-32x32.png 2020-09-01 20:31:36 2021-10-09 00:17:16.24 t \N 2021-05-18 06:49:37 +cklidcb3o00002pma33gvhnbe Type of Web YouTube https://www.youtube.com/channel/UCR4qSQa8JFh6zeR5Idvnewg https://www.youtube.com/feeds/videos.xml?channel_id=UCR4qSQa8JFh6zeR5Idvnewg type-of-web-youtube 2021-09-29 09:06:18.153 https://yt3.ggpht.com/ytc/AKedOLTs9Jgwa6iJZmVCchdNnL_KLzsaQmLqtU_-fBlMfA=s88-c-k-c0x00ffffff-no-rj 2021-02-23 18:55:11.412 2021-10-09 00:17:15.973 t hi@typeofweb.com \N +cjpkyz77s0018i3um4hbp1uqq onionbyte.com http://onionbyte.com/blog/ http://onionbyte.com/blog/feed/ onionbyte.com 2018-12-12 09:25:49 https://onionbyte.com/wp-content/uploads/2018/12/cropped-Obszar-roboczy-1-1-32x32.png 2018-12-12 09:25:49 2021-10-08 00:18:26.695 t \N 2018-12-12 09:25:49 +cj4tp0i00000ri3umf7udfqvm Blog - Front End Nebula - JavaScript, HTML, CSS http://blog.nebula.us/ http://blog.nebula.us/?format=feed blog-front-end-nebula-javascript-html-css 2017-07-07 10:03:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457074/favicon_1537457071489.ico 2017-07-07 10:03:00 2021-10-09 00:17:16.611 t \N 2017-07-07 10:03:00 +cki52vf40000ci3um2x784hhn Comandeer’s blog https://blog.comandeer.pl https://blog.comandeer.pl/feeds/feed.xml comandeer's-blog 2021-10-03 11:32:18.308 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457068671.jpg 2020-11-30 21:42:00 2021-10-09 00:17:16.884 t \N 2021-10-03 11:21:00 +ckjrjuqf900002bk2kpgy4181 Web Dev Insider YouTube https://www.youtube.com/channel/UCsWwyd-yB4qTToTiuLCOuJQ https://www.youtube.com/feeds/videos.xml?channel_id=UCsWwyd-yB4qTToTiuLCOuJQ web-dev-insider-youtube 2021-09-26 15:06:24.983 https://yt3.ggpht.com/ytc/AKedOLQiCaOxnvig9evypilxdi83NC5aaZ9aj81cQRLm=s88-c-k-c0x00ffffff-no-rj 2021-01-10 19:47:59.685 2021-10-09 00:17:18.508 t kontakt@webdevinsider.pl \N +cjfsgdao0000fi3um8hz4dspc Idaszak Blog - JavaScript, AngularJS http://www.idaszak.com/ http://feeds.feedburner.com/IdaszakcomBlog idaszak-blog-javascript-angularjs 2018-04-09 16:30:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457073/favicon_1537457072961.png 2018-04-09 16:30:00 2021-10-09 00:17:17.349 t \N 2018-04-09 16:30:00 +ckiswuz9s0017i3um5mg4h7q1 hello roman YouTube https://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/ https://www.youtube.com/feeds/videos.xml?channel_id=UCq8XmOMtrUCb8FcFHQEd8_g hello-roman-youtube 2021-09-23 13:16:01.469 https://yt3.ggpht.com/ytc/AKedOLQjPXKRcu4WHUlTi976BbTPRnGTk64nOB-aOZs8mw=s88-c-k-c0x00ffffff-no-rj 2020-12-17 14:00:10 2021-10-09 00:17:17.065 t \N 2021-09-23 13:00:04 +ckjgw7inp00000vk0v43qxoef skutecznyprogramista.pl RSS Feed https://skutecznyprogramista.pl/ https://skutecznyprogramista.pl/rss.xml skutecznyprogramista.pl-rss-feed 2021-02-24 00:10:56.409 2021-01-03 08:48:23.606 2021-10-09 00:17:18.24 t kjendrzyca@gmail.com \N +cki2dml0o000di3umgjexb6pk WebKrytyk.pl http://www.webkrytyk.pl/ http://www.webkrytyk.pl/feed/ webkrytyk.pl 2021-09-05 23:34:46.73 https://res.cloudinary.com/polskifrontend/image/upload/v1537457076/favicon_1537457073765.ico 2020-11-29 00:19:45 2021-10-09 00:17:17.14 t \N 2021-09-05 23:29:47 +ckkb3uw6b00002smi6pw37cjt JS Dżem YouTube https://www.youtube.com/jsdzem https://www.youtube.com/feeds/videos.xml?channel_id=UCqawL4rsFulZi1zjpromBNQ js-dzem-youtube 2021-08-08 08:46:52.545 https://www.youtube.com/s/desktop/d743f786/img/favicon_48.png 2021-01-24 12:15:36.804 2021-10-09 00:17:17.416 t jakub.pusiak@gmail.com \N +cko1v4lx8000012molv7wks6j Kot Źródłowy https://kot-zrodlowy.pl/ https://kot-zrodlowy.pl/feed.xml kot-zrodlowy 2021-05-06 10:05:05.902 2021-04-28 19:40:07.292 2021-10-09 00:17:17.692 t kontakt@kot-zrodlowy.pl \N +ckc4s1jmo001ii3um6ovu5nhk Frontstack.pl https://frontstack.pl https://frontstack.pl/feed frontstack.pl 2021-08-23 13:05:07.461 https://frontstack.pl/wp-content/uploads/2020/04/cropped-favicon-2-32x32.png 2020-07-02 12:40:36 2021-10-09 00:17:17.964 t \N 2021-08-23 13:00:32 +cjz9yx06o0016i3umf74v7ka2 Blog – Crocoder https://crocoder.pl/blog/ https://crocoder.pl/blog/feed blog---crocoder 2019-08-13 15:15:42 https://crocoder.pl/wp-content/uploads/2019/02/cropped-favicon-32x32.png 2019-08-13 15:15:42 2021-10-09 00:17:19.052 t \N 2019-08-13 15:15:42 +ckocpwuso0019afl7he6igw3f Oskar Kowalów - blog o programowaniu https://www.oskarkowalow.pl/ https://www.oskarkowalow.pl/rss.xml oskar-kowalow-blog-o-programowaniu 2021-10-07 15:34:34.678 2021-05-06 09:59:35.4 2021-10-09 00:17:19.32 t kowalow.oskar@gmail.com \N +cjj4eqtmw0001i3umen1q8px0 Devcorner https://devcorner.pl/ https://devcorner.pl/feed devcorner 2021-01-07 19:02:42.376 https://devcorner.pl/wp-content/uploads/2018/06/fav-50x50.png 2018-07-02 15:16:53 2021-10-09 00:17:18.784 t \N 2021-01-07 18:52:39 +cj657y0ig000ji3umhjzvf50i koduje YouTube http://kodu.je/ https://www.youtube.com/feeds/videos.xml?channel_id=UCLLdzVN9P9lV8kmJhHsiuHA koduje-youtube 2017-08-09 16:18:07 https://www.youtube.com/s/desktop/d743f786/img/favicon_48.png 2017-08-09 16:18:07 2021-10-09 00:17:15.688 t \N 2017-08-09 16:18:07 +ckhgqbfog000ii3um332tat33 Wake up and Code http://www.wakeupandcode.pl/ http://www.wakeupandcode.pl/feed wake-up-and-code 2021-03-07 12:40:17.46 https://i0.wp.com/www.wakeupandcode.pl/wp-content/uploads/2018/04/cropped-profile_fp.png?fit=32%2C32&ssl=1 2020-11-13 20:44:04 2021-10-09 00:17:20.877 t \N 2021-03-07 12:13:16 +cjv6u59zk000wi3um4vfceqqt AlgoSmart http://www.algosmart.pl http://www.algosmart.pl/feed algosmart 2019-05-02 16:00:02 http://www.algosmart.pl/wp-content/uploads/2018/07/cropped-logo-AS-60x60.png 2019-05-02 16:00:02 2021-10-09 00:17:18.869 t \N 2019-05-02 16:00:02 +ckhnmdge00000i3um6batg2gk NetteCode https://www.nettecode.com/ https://www.nettecode.com/feed nettecode 2020-11-18 16:28:03 https://i2.wp.com/www.nettecode.com/wp-content/uploads/2016/11/logo_nettecode_fanpage.png?fit=32%2C32&ssl=1 2020-11-18 16:28:03 2021-10-09 00:17:20.23 t \N 2020-11-18 16:28:03 +ckius9kiw001ki3um2blndfkq Require Podcast https://require.podcast.gq https://anchor.fm/s/139df89c/podcast/rss require-podcast 2021-06-23 19:20:11.507 https://d3t3ozftmdmh3i.cloudfront.net/production/podcast_uploaded_nologo/3191199/3191199-1606936050006-6cd300b2a175d.jpg 2020-12-18 21:27:05 2021-10-09 00:17:16.61 t \N 2021-06-23 19:13:34 ckesc782o001oi3umhz387hrj Marcin Kwiatkowski: Tech eCommerce http://marcin-kwiatkowski.com/pl/ http://marcin-kwiatkowski.com/pl/feed/ marcin-kwiatkowski:-tech-ecommerce 2020-09-07 09:43:00 2020-09-07 09:43:00 2021-03-02 00:05:37.993 t \N 2020-09-07 09:43:00 -cjmkwo0mg0002i3um4fx98viq Kamil Rogala- Front-end Developer. Strona poświęcona programowaniu, front-end'owi i szeroko rozumianemu tworzeniu stron internetowych http://kamilrogala.it/ http://kamilrogala.it/?format=feed kamil-rogala-front-end-developer.-strona-poswiecona-programowaniu-front-end'owi-i-szeroko-rozumianemu-tworzeniu-stron-internetowych 2018-09-27 18:22:01 https://res.cloudinary.com/polskifrontend/image/upload/v1537457074/favicon_1537457073274.ico 2018-09-27 18:22:01 2021-07-05 00:14:30.733 t \N 2018-09-27 18:22:01 -ckeud40cw000qi3umbryt365k SowaProgramuje http://sowaprogramuje.pl/ http://sowaprogramuje.pl/feed sowaprogramuje 2020-09-08 19:44:02 http://sowaprogramuje.pl/wp-content/uploads/2017/07/cropped-logo-2-32x32.png 2020-09-08 19:44:02 2021-07-05 00:14:31.247 t \N 2020-09-08 19:44:02 -ck7m8brk0000ui3um0pxg4lae Na Frontendzie https://www.nafrontendzie.pl/ https://www.nafrontendzie.pl/feed.xml na-frontendzie 2020-03-10 18:30:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457068935.png 2020-03-10 18:30:00 2021-07-05 00:14:33.116 t \N 2020-03-10 18:30:00 -cjwrzrlww0015i3um1bbud9jy AlgoSmart - Marcin Czarkowski YouTube https://www.youtube.com/channel/UCvjSjsFmNtkjXWX1L29OT_g https://www.youtube.com/feeds/videos.xml?channel_id=UCvjSjsFmNtkjXWX1L29OT_g algosmart-marcin-czarkowski-youtube 2019-06-11 16:00:14 https://res.cloudinary.com/polskifrontend/image/upload/v1541398158/favicon_1541398157822.ico 2019-06-11 16:00:14 2021-07-05 00:14:33.338 t \N 2019-06-11 16:00:14 -ckbw97zyw0007i3umdszu2ola Piotr Kowalski — JavaScript, Front-end oraz Node.js https://piecioshka.pl/blog/ https://piecioshka.pl/feed.xml piotr-kowalski-javascript-front-end-oraz-node.js 2020-06-26 13:31:35 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457069578.ico 2020-06-26 13:31:35 2021-07-05 00:14:33.722 t \N 2020-06-26 13:31:35 ck5e5hz9k0013i3um6tipcjry Me and JS https://meandjs.com/ https://meandjs.com/feed me-and-js 2020-01-14 17:29:17 \N 2020-01-14 17:29:17 2020-01-14 17:29:17 t \N 2020-01-14 17:29:17 -cj0e03c5c0005i3umcmdvbfnx blog.end3r.com http://blog.end3r.com/ http://feeds.feedburner.com/end33r blog.end3r.com 2017-03-17 15:50:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457069075.bmp 2017-03-17 15:50:00 2021-07-05 00:14:33.84 t \N 2017-03-17 15:50:00 -ckbbw3jvs000li3umgw19edq9 TwórcaStron.pl – Blog dla programistów i nie tylko http://tworcastron.pl/ http://tworcastron.pl/feed tworcastron.pl-blog-dla-programistow-i-nie-tylko 2021-06-18 10:34:13.441 https://res.cloudinary.com/polskifrontend/image/upload/v1537457075/favicon_1537457074214.png 2020-06-12 07:28:49 2021-07-05 00:14:34.58 t \N 2021-06-18 10:23:13 -cjy7sgxs0000bi3umeb9z90rn Kot Źródłowy http://kot-zrodlowy.pl/ http://kot-zrodlowy.pl/feeds/feed.xml kot-zrodlowy 2021-04-28 19:46:46.559 https://res.cloudinary.com/polskifrontend/image/upload/v1537457074/favicon_1537457071623.png 2019-07-17 22:00:00 2021-07-05 00:14:34.604 t \N 2021-04-27 22:00:00 cj76ksqao000ei3uma7499rwf Dawid Ryłko https://www.dawidrylko.com/ https://www.dawidrylko.com/feed dawid-rylko 2017-09-04 19:45:24 https://dawidrylko.com/wp-content/uploads/2017/04/logo.jpg 2017-09-04 19:45:24 2021-06-17 00:14:54.603 t \N 2017-09-04 19:45:24 -ckcf8vjeg000ai3um1mox19e8 WEBMASTAH.PL - Wszystko co chcesz wiedzieć o technologiach webowych https://webmastah.pl/ https://webmastah.pl/feed webmastah.pl-wszystko-co-chcesz-wiedziec-o-technologiach-webowych 2021-06-01 08:25:03.587 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457069329.png 2020-07-09 20:29:31 2021-07-05 00:14:34.113 t \N 2021-06-01 06:12:16 -ckiopy3xs0006i3umgmnv8l52 Type of Web https://typeofweb.com/ https://typeofweb.com/feed type-of-web 2021-04-06 09:37:39.819 https://typeofweb.com/wp-content/uploads/2020/04/cropped-favicon-32x32.png 2020-12-14 15:35:34 2021-07-05 00:14:35.242 t \N 2021-04-06 09:26:57 -ckig8bkw0000zi3umgy3obxsr Blog – Robert Orliński https://blog.robertorlinski.pl/ https://blog.robertorlinski.pl/feed blog-robert-orlinski 2021-04-06 15:01:33.44 https://blog.robertorlinski.pl/wp-content/uploads/2018/04/favicon.png 2020-12-08 17:00:00 2021-07-05 00:14:35.635 t \N 2021-04-06 15:00:00 -ckiyt1v9s001fi3umcgnxbgiu Przeprogramowani YouTube https://www.youtube.com/channel/UCb2Y3vMeD6N4WDt5Acw7Arw https://www.youtube.com/feeds/videos.xml?channel_id=UCb2Y3vMeD6N4WDt5Acw7Arw przeprogramowani-youtube 2021-07-05 16:46:11.972 https://res.cloudinary.com/polskifrontend/image/upload/v1571384300/favicon_1571384299947.ico 2020-12-21 17:00:10 2021-07-05 16:46:26.764 t \N 2021-07-05 16:00:21 +ckiopy3xs0006i3umgmnv8l52 Type of Web https://typeofweb.com/ https://typeofweb.com/feed type-of-web 2021-09-22 10:06:44.665 https://typeofweb.com/apple-touch-icon.png 2020-12-14 15:35:34 2021-10-09 00:17:19.397 t \N 2021-09-19 15:57:42 +ckfdlon7c0009i3umeitx0nz4 Głównie JavaScript http://jcubic.pl/ http://jcubic.pl/feed.xml glownie-javascript 2021-09-04 10:06:21.553 https://res.cloudinary.com/polskifrontend/image/upload/v1537457074/favicon_1537457071582.ico 2020-09-22 06:51:39 2021-10-09 00:17:19.92 t \N 2021-09-03 16:24:06 +ckhxjb6o0000yi3umb3hg09jv FSGeek blog https://fsgeek.pl/ https://fsgeek.pl/index.xml fsgeek-blog 2021-08-31 16:08:33.189 https://fsgeek.pl/logo.png 2020-11-25 15:00:00 2021-10-09 00:17:19.693 t \N 2021-08-31 16:00:00 +cjczvdmnk000hi3umdr1lf9nt Blog – Induweb http://www.induweb.pl/blog/ http://www.induweb.pl/blog/feed blog---induweb 2018-01-29 07:05:26 https://res.cloudinary.com/polskifrontend/image/upload/v1537457073/favicon_1537457070383.png 2018-01-29 07:05:26 2021-10-09 00:17:20.665 t \N 2018-01-29 07:05:26 +cj0e03c5c0005i3umcmdvbfnx blog.end3r.com http://blog.end3r.com/ http://feeds.feedburner.com/end33r blog.end3r.com 2017-03-17 15:50:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457069075.bmp 2017-03-17 15:50:00 2021-10-09 00:17:21.053 t \N 2017-03-17 15:50:00 +cjjyg7b2w0011i3umc74cg6xw MatRog.pl https://matrog.pl/ https://matrog.pl/feed matrog.pl 2018-07-23 15:50:47 https://matrog.pl/wp-content/uploads/2017/10/avatar-150x150.png 2018-07-23 15:50:47 2021-10-09 00:17:21.42 t \N 2018-07-23 15:50:47 +ck87juhko000ni3umanz2707n Będę Kodzić http://bedekodzic.pl/ http://bedekodzic.pl/feed bede-kodzic 2021-01-17 14:18:12.228 https://bedekodzic.pl/wp-content/uploads/2017/02/cropped-Favi3-32x32.png 2020-03-25 16:35:39 2021-10-09 00:17:20.828 t \N 2021-01-17 14:13:52 +cjy7sgxs0000bi3umeb9z90rn Kot Źródłowy http://kot-zrodlowy.pl/ http://kot-zrodlowy.pl/feeds/feed.xml kot-zrodlowy 2021-04-28 19:46:46.559 https://res.cloudinary.com/polskifrontend/image/upload/v1537457074/favicon_1537457071623.png 2019-07-17 22:00:00 2021-10-09 00:17:21.696 t \N 2021-04-27 22:00:00 +ckiyvf2eg0012i3um2h8g0dup Devszczepaniak.pl https://devszczepaniak.pl/ https://devszczepaniak.pl/feed devszczepaniak.pl 2021-09-25 17:01:59.502 https://devszczepaniak.pl/wp-content/uploads/2018/08/cropped-icon-1-32x32.png 2020-12-21 18:06:25 2021-10-09 00:17:21.152 t \N 2021-09-25 16:56:45 +ckio5ucds001qi3um0occaae7 a – frontman https://a-frontman.pl/ https://a-frontman.pl/feed a---frontman 2021-10-08 05:05:50.757 https://a-frontman.pl/wp-content/uploads/2020/10/cropped-Angular_full_color_logo.svg_-32x32.png 2020-12-14 06:12:46 2021-10-09 00:17:22.732 t \N 2021-10-08 05:02:35 +ckiplfn1c001ci3um4nlf8o4x devpebe.com | blog frontendowy https://devpebe.com https://devpebe.com/feed devpebe.com-or-blog-frontendowy 2021-10-09 12:08:54.296 https://res.cloudinary.com/polskifrontend/image/upload/v1554671260/favicon_1554671259409.ico 2020-12-15 06:17:00 2021-10-09 12:09:10.47 t \N 2021-10-09 11:55:07 +ckh8coao00010i3umhqw2e6xc przemuh.dev [PL] https://przemuh.pl/ https://przemuh.pl/rss/ przemuh.dev-pl 2020-11-08 00:00:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457072/favicon_1537457069816.ico 2020-11-08 00:00:00 2021-10-09 00:17:22.22 t \N 2020-11-08 00:00:00 +cj4phfytc000pi3um4bh44exz dev in spe http://devinspe.blogspot.nl/ http://devinspe.blogspot.com/feeds/posts/default dev-in-spe 2017-07-04 11:20:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457073/favicon_1537457072208.ico 2017-07-04 11:20:00 2021-10-09 00:17:22.984 t \N 2017-07-04 11:20:00 +ckg2k1vxc001gi3umclnyctyp Krzysztof Furtak YouTube https://www.youtube.com/channel/UCCUkk1ccUYgxYORcLUGAmeQ https://www.youtube.com/feeds/videos.xml?channel_id=UCCUkk1ccUYgxYORcLUGAmeQ krzysztof-furtak-youtube 2021-03-12 11:30:15.251 https://yt3.ggpht.com/ytc/AKedOLQarfPyF-ZOOQIgRtFb316PUEjshbVMsrCrAwe5=s88-c-k-c0x00ffffff-no-rj 2020-10-09 18:00:12 2021-10-09 00:17:23.149 t \N 2021-03-12 11:00:14 +cki6eer4w001ri3umeoa347v0 Wojciech Szućko https://wojciechszucko.com/ https://wojciechszucko.com/feed/ wojciech-szucko 2021-03-29 07:36:49.579 https://wojciechszucko.com/wp-content/uploads/2020/10/cropped-avatar-circle-32x32.png 2020-12-01 19:52:44 2021-10-09 00:17:24.75 t \N 2021-03-29 07:31:20 +ckdyuycaw000ti3um7a4vg0hl Webdevmaster.pl http://webdevmaster.pl/ http://webdevmaster.pl/feed webdevmaster.pl 2020-08-17 18:34:53 \N 2020-08-17 18:34:53 2021-10-09 00:17:24.107 t \N 2020-08-17 18:34:53 +ckir2fk800008i3um9c21fesl webroad.pl http://webroad.pl/ http://webroad.pl/feed webroad.pl 2021-08-31 04:36:31.56 https://webroad.pl/wp-content/uploads/2017/02/cropped-logo_webroad_big-32x32.png 2020-12-16 07:00:36 2021-10-09 00:17:27.1 t \N 2021-08-31 04:30:54 +cjsbs4x5c001ai3umfoh24x33 Blog – Robię Internety http://robieinternety.pl/blog/ http://robieinternety.pl/blog/feed blog---robie-internety 2019-02-19 13:03:30 2019-02-19 13:03:30 2021-10-09 00:17:23.618 t \N 2019-02-19 13:03:30 +ckijj62co001hi3um2kbkcy0a Kody, triki, sztuczki http://kody.wig.pl http://kody.wig.pl/feed kody-triki-sztuczki 2021-09-23 17:02:47.18 https://res.cloudinary.com/polskifrontend/image/upload/v1578919198/favicon_1578919198192.ico 2020-12-11 00:26:57 2021-10-09 00:17:23.244 t \N 2021-09-23 17:00:50 +ckig8bkw0000zi3umgy3obxsr Robert Orliński https://blog.robertorlinski.pl/ https://blog.robertorlinski.pl/feed robert-orlinski 2021-10-09 12:08:54.296 https://robertorlinski.pl/wp-content/uploads/2018/04/favicon.png 2020-12-08 17:00:00 2021-10-09 12:09:10.639 t \N 2021-10-09 11:46:00 +cj2ewxxpe000oi3um964j8a3a Czas na JS - bo jak nie teraz to kiedy? http://czasnajs.blogspot.com/ http://czasnajs.blogspot.com/feeds/posts/default czas-na-js-bo-jak-nie-teraz-to-kiedy 2017-05-07 16:29:00.002 https://res.cloudinary.com/polskifrontend/image/upload/v1537457072/favicon_1537457070318.ico 2017-05-07 16:29:00.002 2021-10-09 00:17:19.13 t \N 2017-05-07 16:29:00.002 +ckcv2snww001ei3um3wmeeaom Nowoczesny Frontend https://nowoczesny-frontend.pl https://nowoczesny-frontend.pl/feed nowoczesny-frontend 2021-09-15 21:05:35.584 https://nowoczesny-frontend.pl/wp-content/uploads/2018/10/logoBig-150x150.png 2020-07-20 22:23:38 2021-10-09 00:17:27.337 t \N 2021-09-15 20:49:10 +ckesj8kg0000vi3um42jmc86u kernelgonnapanic.pl https://kernelgonnapanic.pl/ https://kernelgonnapanic.pl/atom.xml kernelgonnapanic.pl 2021-03-08 13:02:33.119 https://res.cloudinary.com/polskifrontend/image/upload/v1537457073/favicon_1537457071001.ico 2020-09-07 13:00:00 2021-10-09 00:17:21.964 t \N 2021-03-08 09:15:00 +ckryrttjw000012jvhyck87gs Frontowisko https://frontowisko.pl/ https://www.frontowisko.pl/feed/ frontowisko 1970-01-01 00:00:00 https://www.frontowisko.pl/wp-content/uploads/2021/03/cropped-frontowisko-logo-512-32x32.png 2021-08-05 10:23:15.933 2021-08-05 10:23:15.933 f frontowisko@gmail.com \N +cku7vse9i000012jt3xd935j5 https://blog.stronanowoczesna.pl/ https://blog.stronanowoczesna.pl/feed/ lessblog.stronanowoczesna.plgreater 1970-01-01 00:00:00 https://blog.stronanowoczesna.pl/wp-content/uploads/2020/03/cropped-logo1-2-32x32.png 2021-10-01 04:43:28.182 2021-10-01 04:43:28.182 f danielminschinski@gmail.com \N +cjwrzrlww0015i3um1bbud9jy AlgoSmart - Marcin Czarkowski YouTube https://www.youtube.com/channel/UCvjSjsFmNtkjXWX1L29OT_g https://www.youtube.com/feeds/videos.xml?channel_id=UCvjSjsFmNtkjXWX1L29OT_g algosmart-marcin-czarkowski-youtube 2019-06-11 16:00:14 https://yt3.ggpht.com/ytc/AKedOLQ5gJ5j8WulryCPPbTxw9ls35NrYUU-WP75zIXWSQ=s88-c-k-c0x00ffffff-no-rj 2019-06-11 16:00:14 2021-10-09 00:17:24.108 t \N 2019-06-11 16:00:14 +ckmoh2k1y000050l0rtc97ktd ProgramistaFrontend YouTube https://www.youtube.com/c/DanielNoworyta https://www.youtube.com/feeds/videos.xml?channel_id=UCfiwERhmAaYkYy_Hwfke_7w programistafrontend-youtube 2021-10-06 06:32:05.367 https://www.youtube.com/s/desktop/d743f786/img/favicon_48.png 2021-03-25 06:05:54.31 2021-10-09 00:17:24.384 t daniel@programistafrontend.pl \N +ckgvhpmo0001ji3umfm7ubw86 Frontlive.pl by Olaf Sulich https://www.frontlive.pl https://www.frontlive.pl/rss.xml frontlive.pl-by-olaf-sulich 2021-09-13 05:47:04.3 https://res.cloudinary.com/polskifrontend/image/upload/v1589778136/favicon_1589778136342.png 2020-10-30 00:00:00 2021-10-09 00:17:24.636 t \N 2021-09-13 00:00:00 +cjmkwo0mg0002i3um4fx98viq Kamil Rogala- Front-end Developer. Strona poświęcona programowaniu, front-end'owi i szeroko rozumianemu tworzeniu stron internetowych http://kamilrogala.it/ http://kamilrogala.it/?format=feed kamil-rogala-front-end-developer.-strona-poswiecona-programowaniu-front-end'owi-i-szeroko-rozumianemu-tworzeniu-stron-internetowych 2018-09-27 18:22:01 https://res.cloudinary.com/polskifrontend/image/upload/v1537457074/favicon_1537457073274.ico 2018-09-27 18:22:01 2021-10-09 00:17:24.516 t \N 2018-09-27 18:22:01 +ckjcy6q5400001hkzvyh1xycf Przeprogramowani LIVE YouTube https://www.youtube.com/channel/UCLlxU3mNEO91RHU6CtLrB3w https://www.youtube.com/feeds/videos.xml?channel_id=UCLlxU3mNEO91RHU6CtLrB3w przeprogramowani-live-youtube 2021-10-07 05:24:10.066 https://yt3.ggpht.com/ytc/AKedOLTP3ZfeNlj46t9hHBDJEeoNQH59fWCUEyTeY84t=s88-c-k-c0x00ffffff-no-rj 2020-12-31 14:32:41.176 2021-10-09 00:17:24.888 t olafsulich@gmail.com \N +ckcf8vjeg000ai3um1mox19e8 WEBMASTAH.PL https://webmastah.pl/ https://webmastah.pl/feed webmastah.pl 2021-06-01 08:25:03.587 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457069329.png 2020-07-09 20:29:31 2021-10-09 00:17:25.034 t \N 2021-06-01 06:12:16 +ckeud40cw000qi3umbryt365k SowaProgramuje http://sowaprogramuje.pl/ http://sowaprogramuje.pl/feed sowaprogramuje 2020-09-08 19:44:02 http://sowaprogramuje.pl/wp-content/uploads/2017/07/cropped-logo-2-32x32.png 2020-09-08 19:44:02 2021-10-09 00:17:25.672 t \N 2020-09-08 19:44:02 +ckej6qdc0001ni3um8neham6w domanart.pl http://www.domanart.pl/ http://www.domanart.pl/index.xml domanart.pl 2021-06-22 14:27:48.641 2020-09-01 00:00:00 2021-10-09 00:17:25.14 t \N 2021-06-20 00:00:00 +ck2uky50o000gi3um2qmhblbo Blog – SarvenDev http://sarvendev.com/blog http://sarvendev.com/blog/feed blog---sarvendev 2019-11-11 15:26:57 https://res.cloudinary.com/polskifrontend/image/upload/v1537457074/favicon_1537457073529.png 2019-11-11 15:26:57 2021-10-09 00:17:26.057 t \N 2019-06-25 17:47:30 +ckbw97zyw0007i3umdszu2ola Piotr Kowalski — JavaScript, Front-end oraz Node.js https://piecioshka.pl/blog/ https://piecioshka.pl/feed.xml piotr-kowalski-javascript-front-end-oraz-node.js 2020-06-26 13:31:35 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457069578.ico 2020-06-26 13:31:35 2021-10-09 00:17:26.056 t \N 2020-06-26 13:31:35 +ckbbw3jvs000li3umgw19edq9 TwórcaStron.pl – Blog dla programistów i nie tylko http://tworcastron.pl/ http://tworcastron.pl/feed tworcastron.pl---blog-dla-programistow-i-nie-tylko 2021-09-08 10:06:46.737 https://res.cloudinary.com/polskifrontend/image/upload/v1537457075/favicon_1537457074214.png 2020-06-12 07:28:49 2021-10-09 00:17:25.416 t \N 2021-09-08 10:01:02 +cj9n425nk000si3umcemuc2t5 | KuzniaBinarna.pl :: blog programisty http://kuzniabinarna.pl/ http://kuzniabinarna.pl/feed or-kuzniabinarna.pl-::-blog-programisty 2017-11-05 18:48:20 http://kuzniabinarna.pl/wp-content/uploads/2017/02/logo.png 2017-11-05 18:48:20 2021-10-09 00:17:26.268 t \N 2017-11-05 18:48:20 +ck9qqdx4o000xi3umdjbh0w86 Będę Programistką http://bedeprogramistka.pl/ http://bedeprogramistka.pl/feed bd-programistk 2020-05-03 07:26:03 https://bedeprogramistka.pl/wp-content/uploads/2017/07/cropped-favicon-32x32.png 2020-05-03 07:26:03 2021-10-09 00:17:27.868 t \N 2020-05-03 07:26:03 +ckj9sdcq7000051l5pzwpbq9f Jak zacząć programować? YouTube https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA https://www.youtube.com/feeds/videos.xml?channel_id=UCF4jzVCa2J45NXnNtf6XBoA jak-zaczac-programowac-youtube 2021-10-07 19:47:00.756 https://yt3.ggpht.com/ytc/AKedOLTqSBhVv-v-96bptKLcvlIxmDPj-goeEe7Qla9A=s88-c-k-c0x00ffffff-no-rj 2020-12-29 09:26:34.16 2021-10-09 00:17:26.293 t hi@typeofweb.com \N +cjdc39n3s0003i3umgtxp6w6a JS.n00b http://jsdn.pl/ http://jsdn.pl/feed js.n00b 2018-02-06 20:19:31 https://i1.wp.com/jsdn.pl/wp-content/uploads/2017/01/cropped-favicon.png?fit=32%2C32 2018-02-06 20:19:31 2021-10-09 00:17:28.152 t \N 2018-02-06 20:19:31 +ckieg15g0001bi3um0fj3gred overment YouTube https://www.youtube.com/channel/UC_MIaHmSkt9JHNZfQ_gUmrg https://www.youtube.com/feeds/videos.xml?channel_id=UC_MIaHmSkt9JHNZfQ_gUmrg overment-youtube 2021-10-05 17:31:20.455 https://yt3.ggpht.com/ytc/AKedOLQJg0Rreey24F5nqN1RZG3FDmNOCxiUs3BEDPUr=s88-c-k-c0x00ffffff-no-rj 2020-12-07 11:00:18 2021-10-09 00:17:23.831 t \N 2021-10-05 08:51:21 +ckivz8t54001di3umfv7i4q26 Artur Chmaro YouTube https://www.youtube.com/channel/UCFmXR9JohMyuXPya2OUkcjg https://www.youtube.com/feeds/videos.xml?channel_id=UCFmXR9JohMyuXPya2OUkcjg artur-chmaro-youtube 2021-10-09 13:01:34.752 https://yt3.ggpht.com/ytc/AKedOLReXc2PRsAmsBLfFonyTz8skpH-L1jyhIrzA_14=s88-c-k-c0x00ffffff-no-rj 2020-12-19 17:30:13 2021-10-09 13:01:49.445 t \N 2021-10-09 12:46:50 +ckirm3wzs001li3umfdkcfl6k Front Cave https://frontcave.pl https://frontcave.pl/feed/ front-cave 2021-09-29 15:42:30.627 2020-12-16 16:11:25 2021-10-09 00:17:29.839 t \N 2021-09-29 15:32:00 +ckmor5k8y000044moj65m13y0 Vived https://blog.vived.io/tag/frontend/ https://blog.vived.io/rss/ vived 2021-10-09 08:07:07.248 https://vived.io/wp-content/uploads/2020/04/favicon_vived-150x150.png 2021-03-25 10:48:10.691 2021-10-09 08:07:22.139 t tomaboro96@gmail.com \N +ckjpkgp9u000012mnlbnkxu51 Doman Code YouTube https://www.youtube.com/channel/UCmSrOlNDppr8nLM9aZNCFLg https://www.youtube.com/feeds/videos.xml?channel_id=UCmSrOlNDppr8nLM9aZNCFLg doman-code-youtube 2021-09-13 10:07:03.783 https://yt3.ggpht.com/ytc/AKedOLTl7RlDPQlIrgCV0Z7jcIzMwqO1ESv3B7U29P5X=s88-c-k-c0x00ffffff-no-rj 2021-01-09 10:29:32.275 2021-10-09 00:17:27.869 t mateusz.domanski.1989@gmail.com \N +ckiyt1v9s001fi3umcgnxbgiu Przeprogramowani YouTube https://www.youtube.com/channel/UCb2Y3vMeD6N4WDt5Acw7Arw https://www.youtube.com/feeds/videos.xml?channel_id=UCb2Y3vMeD6N4WDt5Acw7Arw przeprogramowani-youtube 2021-10-08 16:09:03.006 https://yt3.ggpht.com/lCVjz53gg6HuyHV12TqrYJWh_hPLEyJFhU_7X5hU0-CTyUUkplg7KEN_jxPSCOTcTjCnSH4Ra6M=s88-c-k-c0x00ffffff-no-rj 2020-12-21 17:00:10 2021-10-09 00:17:28.124 t \N 2021-10-08 15:22:45 +ckhdl0sns0014i3um91mvcxsj Solution Chaser https://solutionchaser.com/ https://solutionchaser.com/rss solution-chaser 2021-03-01 20:04:45.493 https://solutionchaser.com/favicon.png 2020-11-11 15:52:31 2021-10-09 00:17:28.38 t \N 2021-03-01 19:03:26 +ck7m8brk0000ui3um0pxg4lae Na Frontendzie https://www.nafrontendzie.pl/ https://www.nafrontendzie.pl/feed.xml na-frontendzie 2020-03-10 18:30:00 https://res.cloudinary.com/polskifrontend/image/upload/v1537457071/favicon_1537457068935.png 2020-03-10 18:30:00 2021-10-09 00:17:27.592 t \N 2020-03-10 18:30:00 +ckir8ypi0000ki3um2pa1fvzp Piotr Kowalski YouTube https://www.youtube.com/user/Piecioshka/videos https://www.youtube.com/feeds/videos.xml?channel_id=UCffjO7O5ELIUrFWIhpf64uw piotr-kowalski-youtube 2021-08-12 07:46:58.787 https://yt3.ggpht.com/ytc/AKedOLSDOzYouqFD_ubEN7FUsh756T3R9u0y5oR3VhHU-Q=s88-c-k-c0x00ffffff-no-rj 2020-12-16 10:03:27 2021-10-09 00:17:27.657 t \N 2021-08-12 07:46:22 \. -- --- Data for Name: Article; Type: TABLE DATA; Schema: public; Owner: ionbwtojedynto +-- Data for Name: Article; Type: TABLE DATA; Schema: public; Owner: postgres -- COPY public."Article" (id, title, href, description, "publishedAt", slug, "blogId", "createdAt", "updatedAt") FROM stdin; @@ -160,6 +162,7 @@ ckj8k56nz00010vmkzuqdvqsa Podstawy Dockera, które każdy programista powinien z ci782kd8o003ri3um0m6r48u5 Reinkarnacja bloga, czyli mocne postanowienie poprawy https://pawelochota.pl/2015/03/reinkarnacja-bloga-czyli-mocne-postanowienie-poprawy/

Witajcie przybysze. Nie pamiętam ileż to razy podchodziłem do tematu blogowania i niestety każda z tych prób okazywała się porażką na dłuższą metę. Ale tak jest z wieloma rzeczami, bo przecież to takie podobne chociażby do postanowień noworocznych, które zazwyczaj kończą się szybciej niż sie w ogóle zaczną. Trudno jest znaleźć w sobie motywacje, ale skoro można

\n

Artykuł Reinkarnacja bloga, czyli mocne postanowienie poprawy pochodzi z serwisu Z podwórka programisty.

2015-03-13 21:01:09 reinkarnacja-bloga-czyli-mocne-postanowienie-poprawy ck801ynig001pi3um28xx49z7 2015-03-13 21:01:09 2015-03-13 21:01:09 ckjbcjoip00010vl57a0cp27u Przychodnia Feniks - redesign http://domanart.pl/case-study-przychodnia-feniks/

Dawno, dawno temu moja przyjaciółka poprosiła mnie, bym przygotował stronę dla pewnej przychodni weterynaryjnej. Strona znajduje się pod adresem: http://przychodnia-feniks.pl/.

2020-12-24 00:00:00 przychodnia-feniks-redesign ckej6qdc0001ni3um8neham6w 2020-12-30 11:39:07.873 2020-12-30 11:39:07.873 ckjckn67i00010vlbebmbol9t MOJE ODPOWIEDZI w czwartym tygodniu (zagadki 22-24) — DevAdventCalendar 2020 (odc. 2) https://www.youtube.com/watch?v=C4vHOYo2Law Czwarty tydzień zagadek #DevAdventCalendar 2020 już za nami.\nOdpowiedzi na każdą zagadkę nagrywam, dzięki czemu możecie zobaczyć, jak sobie z nimi radziłem.\n\nQ: Jak działa DevAdventCalendar?\nA: #Zabawa polega na tym, że w ostatnim miesiącu roku (Grudniu) codziennie o 13:00 otwierane jest nowe okienko z pytaniem.\n\nDo wygrania jest wiele nagród, aczkolwiek moje uczestnictwo jest podyktowane, spędzeniem miło czasu nad rozwiązywaniem łamigłówek.\n\nPssst... Udział można wziąć w dowolnym momencie!\n\nSpis treści:\n\n00:23 — Zagadka nr. 22\n01:48 — Zagadka nr. 23\n03:02 — Zagadka nr. 24\n\n---\n\n◼︎ Blog: https://piecioshka.pl/blog/\n◼︎ GitHub: https://github.com/piecioshka\n◼︎ Twitter: https://twitter.com/piecioshka\n◼︎ Facebook: https://facebook.com/piecioshka\n◼︎ Instagram: https://instagram.com/piecioshka 2020-12-31 08:13:13 moje-odpowiedzi-w-czwartym-tygodniu-(zagadki-22-24)-devadventcalendar-2020-(odc.-2) ckir8ypi0000ki3um2pa1fvzp 2020-12-31 08:13:33.87 2020-12-31 08:13:33.87 +cj37jvom000kki3um6mzxh89g WarsawJS Meetup #31 https://piecioshka.pl/blog/2017/05/27/warsawjs-meetup-31.html

Rozpoczynamy kolejną dziesiątkę spotkań dla programistów języka JavaScript.\nTym razem mieliśmy 2 prelekcje o React + Redux a trzecim tematem były \nmikroserwisy. Zapraszam do zapoznania się z moimi przemyśleniami na temat \nprelekcji i całego wydarzenia.

\n\n
\n \n WarsawJS\n \n
\n\n

Invitation

\n\n

Tym razem nagrywaliśmy zapowiedź w miejscu, gdzie przeprowadzaliśmy warsztaty.

\n\n
\n

Informacja

\n

Przypominam, że organizacja WarsawJS od grudnia 2016 uruchomiła nową \ninicjatywę, tj. WarsawJS Workshop, czyli comiesięczne szkolenia \npraktyczne z języka JavaScript (wliczając biblioteki i frameworki).

\n
\n\n

Niestety, nie byłem w najlepszej kondycji psychofizycznej tego dnia i zabrakło \nmnie na filmie. Zamiast mnie pojawiła się prelegentka - Martyna, która była \ntrzecią dziewczyną speakerką na warszawskiej scenie.

\n\n

Zapraszam do oglądania!

\n\n\n\n

Po obejrzeniu zapowiedzi, zapraszam Cię do zapoznania się z moimi \nprzemyśleniami na temat prelekcji, które miały miejsce podczas tego wydarzenia.

\n\n
\n\n

Talk #1: React na start - informacje w pigułce dla zainteresowanych rozpoczęciem zabawy z ReactJS [PL] Martyna Nowocień

\n\n

Prelekcja była skierowana dla osób, które chcą rozpocząć naukę biblioteki \nReact.js. Martyna przekazała kilka wskazówek:

\n\n\n\n

Angular (v4.x) jest szybszy od React.js zwłaszcza na urządzeniach mobilnych,\nale Angular.js (v1.x) już jest wolniejszy podczas renderowania dużej ilości \nelementów.

\n\n

Więcej ofert pracy jest na developerów ze znajomością Angulara niż \nReact.js
Martyna podkreśliła, że około 2 / 3 wszystkich ofert to Angular.

\n\n

Aby dowiedzieć się najnowszych rzeczach warto obserwować profil twitterowy Dana\nAbramova.

\n\n

Prelegentka poleca Code Cartoon, w celu zapoznania się z architekturą \nReacta i Reduxa.

\n\n
\n

Moim zdaniem

\n

Świetna prelekcja. Oby częściej zdarzały się takie z uśmiechem na twarzy \nspeakera!

\n
\n\n\n\n

•

\n\n

Talk #2: Redux - a practical example [EN] Illarion Koperski

\n\n

Zalecenia wynikające z prelekcji

\n\n\n\n
\n

Prelekcja niezrozumiała dla developerów bez doświadczenia. Jeśli jednak \nposiadasz minimalne obycie z Reduxem to idealnie wpasowujesz się w \ntarget prelekcji.

\n
\n\n

Illarion polecał rozszerzenie do przeglądarki Google Chrome - Redux \nDevTools.

\n\n
\n

Redux + RsJS = Epics
\nDon’t use Sagas, use Epics.

\n
\n\n\n\n

•

\n\n

Talk #3: Microservices on the frontend [EN] Tomasz Wiszniewski

\n\n

Tomasz przedstawił aplikację present.now.sh, która jest zegarkiem \nodmierzającym czas. W miarę upływu czasu kolor tła się aktualizuje.

\n\n

Aplikacja jest napisana z wykorzystaniem WebComponent-ów.

\n\n\n\n

•

\n\n

Sponsorzy spotkania

\n\n 2017-05-27 17:28:39 warsawjs-meetup-31 ckbw97zyw0007i3umdszu2ola 2017-05-27 17:28:39 2017-05-27 17:28:39 ckq6szocy00020wl4ez6cexjt Jak wyróżnić się podczas rekrutacji na front-end developera? https://www.youtube.com/watch?v=vc_xcbmAljw Szukasz pracy jako front-end developer? Z tego filmu dowiesz się jak przygotować solidne portfolio oraz projekt rekrutacyjny, jakich pytań możesz spodziewać się na rozmowie technicznej, czego warto pozbyć się z CV oraz jak zwiększyć szansę na otrzymanie atrakcyjnych oferty pracy, nawet jeżeli jesteś juniorem.\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-06-21 06:25:04 jak-wyroznic-sie-podczas-rekrutacji-na-front-end-developera ckiyt1v9s001fi3umcgnxbgiu 2021-06-21 15:58:33.49 2021-06-21 15:58:33.49 ckjcoc4ox00010vlbrycqfypd Do zobaczenia na NOWYM KANALE https://www.youtube.com/watch?v=_ncT4QVBc0c Do zobaczenia na NOWYM KANALE. Dowiedz się, których filmów z 2020 nie możesz przegapić oraz co planujemy na 2021 rok.\n\nNowy kanał Przeprogramowani Live https://www.youtube.com/channel/UCLlxU3mNEO91RHU6CtLrB3w/videos\nMyśl jak programista https://www.youtube.com/watch?v=RYvmYnF2-QY\nJak efektywnie uczyć się programowania https://www.youtube.com/watch?v=svgI-V_BBOs\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-12-31 09:45:52 do-zobaczenia-na-nowym-kanale ckiyt1v9s001fi3umcgnxbgiu 2020-12-31 09:56:57.154 2020-12-31 09:56:57.154 ckje9cgyr00010vmmadufi91s Self-publishing: Podsumowanie sprzedaży TypeScript na poważnie https://typeofweb.com/self-publishing-podsumowanie-sprzedazy-typescript-na-powaznie/#utm_source=rss&utm_medium=rss&utm_campaign=self-publishing-podsumowanie-sprzedazy-typescript-na-powaznie

Type of Web - Blog o programowaniu. 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…

\n

Jakiś czas temu na moim instagramie zadałem pytanie, czy chcielibyście zobaczyć podsumowanie sprzedaży książki „TypeScript na poważnie” w self-publishing. Blisko 100% odpowiedzi było na TAK, więc oto i ono 🙂 Przedsprzedaż Zacznijmy może od początku. W tym celu musimy się cofnąć aż do sierpnia, gdyż to właśnie wtedy otworzyłem przedsprzedaż w moim …

\n

Artykuł Self-publishing: Podsumowanie sprzedaży TypeScript na poważnie pochodzi z serwisu Type of Web.

2021-01-01 12:27:22 self-publishing:-podsumowanie-sprzedazy-typescript-na-powaznie ckiopy3xs0006i3umgmnv8l52 2021-01-01 12:32:51.172 2021-01-01 12:32:51.172 @@ -167,6 +170,8 @@ ckq7rlawl00020wmfld41w765 Next.js - Częste pytania i problemy (live Q&A) https: cj12dx4i000cii3um41yg5pva Intense.js – encje https://pawelochota.pl/2017/04/intense-js-encje/

W poprzednim artykule wróciłem do przeszłości odkrywając swój dawny framework. Dziś chciałbym ponownie tego dokonać i przedstawić kolejny element frameworka, mianowice encje. Zapraszam! Architektura komponentowa Intense podobnie jak framework CraftyJS, realizuje metodykę w oparciu o komponenty. CraftyJS nie posiada jednak systemów, cała logika zawarta jest w komponentach. Dodatkowo sam mechanizm wiązania encji z komponentami jest

\n

Artykuł Intense.js – encje pochodzi z serwisu Z podwórka programisty.

2017-04-03 17:23:33 intensejs-encje ck801ynig001pi3um28xx49z7 2017-04-03 17:23:33 2017-04-03 17:23:33 ckjegczru00010vmcxxaw2vqe 10 niesamowitych gier do nauki tworzenia stron internetowych (2020) https://devcorner.pl/gry-online-do-nauki-tworzenia-stron-internetowych/

W tym zestawieniu poznasz 10 gier online, dzięki którym w rozrywkowy sposób rozwiniesz swoje umiejętności programistyczne. CodeWars CodeWars to platforma pozwalająca na naukę wielu języków programowania. Po wybraniu języka i przejściu testu, otrzymasz dostęp do wyzwań. Możesz zdobywać punkty, być częścią rankingu i porównywać swoje rozwiązania do innych. Nauczysz się: JavaScript, PHP, Python, wiele innych CodeCombat CodeCombat to platforma służąca do do nauki programowania. Cała zabawa polega na przechodzeniu gry przy pomocy pisania kodu. CodeCombat jest projektem społecznościowym posiadającym ponad 500 kontrybutorów i 5 000 000 graczy. Nauczysz się: JavaScript, HTML, CSS, jQuery, Bootstrap, Python Screeps Screeps to pierwsza na świecie strategiczna […]

\n

Artykuł 10 niesamowitych gier do nauki tworzenia stron internetowych (2020) pochodzi z serwisu Devcorner.

2021-01-01 15:00:49 10-niesamowitych-gier-do-nauki-tworzenia-stron-internetowych-(2020) cjj4eqtmw0001i3umen1q8px0 2021-01-01 15:49:12.859 2021-01-01 15:49:12.859 ckjfppg2r00010vidk2ui3drt Napisz swój pierwszy test Node + TypeScript + Jest https://www.youtube.com/watch?v=o3P67nF40n0 W tym materiale pokazuje jak skonfigurować w podstawowy sposób projekt do używania TypeScript, Jest oraz Node.js. \n\n#typescript #jest #tdd\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-01-02 12:25:32 napisz-swoj-pierwszy-test-node-+-typescript-+-jest ckivz8t54001di3umfv7i4q26 2021-01-02 12:58:36.579 2021-01-02 12:58:36.579 +ckjcxgmmp00010vmrph2cxt02 Jak przeżyłem 2020? 🎉 hello roman #142 https://www.youtube.com/watch?v=BVgvsuJVb0E ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2020-12-31 14:00:02 jak-przezylem-2020-hello-roman-142 ckiswuz9s0017i3um5mg4h7q1 2020-12-31 14:12:23.569 2020-12-31 14:12:23.569 +ck9bez16o020bi3um36wvctic D3.js - osie na wykresie https://fsgeek.pl/post/d3-osie-na-wykresie/

Nie ma wykresu bez dobrze opisanych osi, które mówią nam jak odczytywać dane z wykresu i co reprezentują. Są więc istotnym elementem, którego nie można pominąć. Na szczęście D3.js udostępnia nam grupę funkcji, które pozwalają w łatwy sposób dodać i dostosowywać wygląd osi.

\n\n

Inne artykuły z serii o D3.js

\n\n
    \n
  1. Tworzenie prostego wykresu liniowego
    2. \n
\n\n

Osie w D3.js

\n\n

Do dodania osi możemy skorzystać z przygotowanych funkcji, które możemy podzielić na dwie grupy - pierwsza do tworzenia (osi pionowych i poziomych) i druga do dostosowywania wyglądu.

\n\n

Do tworzenia osi mamy 4 metody:

\n\n\n\n

Przy wywoływaniu każdej z metod możemy przekazać funkcję, która będzie mapowała nasze wartości z osi na pozycję w svg - możemy wykorzystać tą samą funkcję skali, której użyliśmy przy rozmieszczaniu punktów wykresu. Druga opcja to pominięcie tego przy tworzeniu osi i wywołanie funkcji .scale(). Musimy wybrać jedną z dwóch metod ponieważ bez tego nie powstanie oś i dostaniemy błąd.

\n\n

Kolejne funkcje służą już tylko do dostosowywania wyglądu wykresu. Mamy tu kilka opcji, które możemy wykorzystać:

\n\n\n\n

Pomiędzy ticks i tickArguments jest tylko różnica w zapisie - tickArguments([10,'0.1f']) jest równy w zapisowi ticks(10, "0.1f").

\n\n

Dodatkowo jeśli ustawiamy rozmiar wewnętrznych i zewnętrznych słupków na taką samą wartość to możemy, zamiast ustawiać osobno każdą wartość, wykorzystać funkcję tickSize().

\n\n

Jak teraz wygląda dodanie takich osi?\n

const axisX = d3\n  .axisBottom(walkX)\n  .tickArguments([10, ".1f"]) // .ticks(10, "0.1f")\n  .tickSize(3);\n\nconst axisY = d3\n  .axisLeft()\n  .scale(walkY)\n  .tickValues([0, 12, 20, 25, 34])\n  .tickFormat(d3.format(".0f"))\n  .tickSizeInner(2)\n  .tickSizeOuter(1)\n  .tickPadding(5);\n\nchart\n  .append("g")\n  .attr("transform", "translate(0, 370)")\n  .call(axisX);\n\nchart\n  .append("g")\n  .attr("transform", "translate(20, 0)")\n  .call(axisY);\n

\n\n

Większość elementów opisałem już wyżej i jedyne co zostało do zrobienia to odpowiednie ułożenie osi. Aby to zrobić poprawnie musimy zerknąć jakie wartości ustaliliśmy przy skalowaniu wykresu - oś X przesuwamy 370px w dół natomiast oś Y przesuwamy o 20px w prawo. Ostatni krok to wywołanie funkcji, która wyrysuje nasze osie w elemencie g

\n\n\n\n

Po dodaniu osi zaczyna to wyglądać jak prawdziwy wykres. Teraz możemy bawić się wykresem by dopracować wygląd, dodać animacje, tooltipy i inne elementy, które go uatrakcyjnią.

2020-04-22 14:10:00 d3js-osie-na-wykresie ckhxjb6o0000yi3umb3hg09jv 2020-04-22 14:10:00 2020-04-22 14:10:00 ckjh8hj7300010vjwguui1oya 6 błędów, które popełniają osoby uczące się tworzenia stron internetowych (2021) https://devcorner.pl/5-bledow-ktore-popelniaja-osoby-uczace-sie-tworzenia-stron-internetowych/

Często widzę osoby, które pomimo nawet kilku lat nauki tworzenia stron internetowych wciąż są na etapie początkującego. Zazwyczaj popełniają błędy, które sam popełniałem. Dopiero po zdefiniowaniu moich błędów i zastosowaniu poniższych porad zacząłem widzieć szybki postęp z dnia na dzień. Nie przedłużając oto 6 błędów, które popełniają osoby uczące się tworzenia stron www. 1. Nauka bez planu i celów Gdy próbujesz opanować nową umiejętność bez planu i wyznaczonych celów, to istnieją spore szanse, że nie wytrwasz w postanowieniu. Bez planu będziesz skakał z jednego języka na drugi, z jednej technologii na inną i tak dalej. Przy wyznaczeniu celów warto skorzystać z koncepcji S.M.A.R.T. […]

\n

Artykuł 6 błędów, które popełniają osoby uczące się tworzenia stron internetowych (2021) pochodzi z serwisu Devcorner.

2021-01-03 14:00:48 6-bledow-ktore-popelniaja-osoby-uczace-sie-tworzenia-stron-internetowych-(2021) cjj4eqtmw0001i3umen1q8px0 2021-01-03 14:32:06.256 2021-01-03 14:32:06.256 ckjili40500010vl1kdl6ifrh 5 bibliotek JS'a, które zawładną rynkiem w 2021 https://fsgeek.pl/post/5-bibliotek-javascript-ktore-warto-znac-w-2021/ W świecie JavaScript mamy sporo bibliotek i czasami nie wiadomo co śledzić. Jako że mamy początek roku to przygotowałem dla Ciebie spis bibliotek, które według mnie w tym roku będą popularne i warto je śledzić. Jeśli nie wiesz czym się zająć, to wybierz jedną i spróbuj swoich sił. 2021-01-04 15:00:00 5-bibliotek-js'a-ktore-zawladna-rynkiem-w-2021 ckhxjb6o0000yi3umb3hg09jv 2021-01-04 13:24:14.405 2021-01-04 13:24:14.405 ckjk9a9tb00010vmjksnowju5 Jak stworzyć okno dialogowe przy użyciu MaterialDesign? https://a-frontman.pl/jak-stworzyc-okno-dialogowe-przy-uzyciu-materialdesign/?utm_source=rss&utm_medium=rss&utm_campaign=jak-stworzyc-okno-dialogowe-przy-uzyciu-materialdesign

Witam po dwutygodniowej, świąteczno-sylwestrowej przerwie! Wracam do Ciebie z porcją wiedzy kodu i wiedzy.Z dzisiejszego wpisu dowiesz…

\n

Artykuł Jak stworzyć okno dialogowe przy użyciu MaterialDesign? pochodzi z serwisu a - frontman.

2021-01-05 16:17:40 jak-stworzyc-okno-dialogowe-przy-uzyciu-materialdesign ckio5ucds001qi3um0occaae7 2021-01-05 17:17:45.648 2021-01-05 17:17:45.648 @@ -174,7 +179,7 @@ ckjlfaysc00010vk20mj42phh Rozwiąż część problemów wielojęzyczności za po ckq7sk13l00020wmls5cte0w4 Unhappy Path - Czyli obsługa błędów w JavaScript https://www.youtube.com/watch?v=YR2zpC1-fbQ Warsztat na temat obsługi błędów w JavaScript omawiający najczęściej spotykane produkcyjne przypadki, które często z jakiegoś powodu albo są pomijane albo obsługiwane wyłącznie z pomocą console.log, co nie daje wartości ani programistom ani przede wszystkim użytkownikowi. Jeżeli czujesz że na temat obsługi błędów oraz logowania mógłbyś wiedzieć coś więcej, koniecznie zarezerwuj swoje miejsce.\n\nStream wysokiej jakości oraz sesja pytań i odpowiedzi jest dostępna na eduweb\nhttps://eduweb.pl/wydarzenia/unhappy-path 2021-06-22 08:09:18 unhappy-path-czyli-obsluga-bledow-w-javascript ckieg15g0001bi3um0fj3gred 2021-06-22 08:34:09.682 2021-06-22 08:34:09.682 ckjmxww9100010wl47638zvd3 Czy no-code / low-code zastąpi programistów? ⌨️ hello roman #143 https://www.youtube.com/watch?v=K7jvFMriPMU Czy rozwiązania no-code i low-code zastąpią kiedyś programistów? Czy maszyny przejmą kontrolę nad światem i starzy dobrzy developerzy nie znajdą już dla siebie miejsca? Obecnie obserwujemy prawdziwy wysyp rozwiązań, które przy pomocy interfejsu oferują nam tworzenie całych aplikacji. Pytanie tylko – czy to ma sens? \n\n⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-01-07 14:00:11 czy-no-code-low-code-zastapi-programistow-hello-roman-143 ckiswuz9s0017i3um5mg4h7q1 2021-01-07 14:22:44.294 2021-01-07 14:22:44.294 ckq7xgvci00020wiiid6zk2r4 JVM Tuesday vol. 43 https://blog.vived.io/jvm-tuesday-vol-43/ Dzisiejsza edycja powstawała pod osłoną nocy, na balkonie, przy herbacie z lodem 🫖🧊 - to jest dobre wspomnienie biorąc pod uwagę temperaturę dzisiejszego dnia. Mamy jednak nadzieje że dzisiejszy przegląd umili Wam ten gorący dzień 🥵. 2021-06-22 10:45:00 jvm-tuesday-vol.-43 ckmor5k8y000044moj65m13y0 2021-06-22 10:51:40.339 2021-06-22 10:51:40.339 -ckjcxgmmp00010vmrph2cxt02 Jak przeżyłem 2020? 🎉 hello roman #142 https://www.youtube.com/watch?v=BVgvsuJVb0E ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2020-12-31 14:00:02 jak-przezylem-2020-hello-roman-142 ckiswuz9s0017i3um5mg4h7q1 2020-12-31 14:12:23.569 2020-12-31 14:12:23.569 +ckius9kiw02bti3um30fs4ntf require(#25) - JS w 2020 - Podsumowanie feat. Michał z ToW https://anchor.fm/require/episodes/require25---JS-w-2020---Podsumowanie-feat--Micha-z-ToW-eo03f6

2020 był... ciekawym rokiem. A jeszcze ciekawsze było to, co działo się w szeroko pojętym świecie JavaScriptu. W tym odcinku, razem z Michałem z Type of Web, podsumowujemy ten rok. Jakie technologie zdominowały frontend i backend? Jaką rolę grał TypeScript? Co nas rozczarowało w tym roku? A co może nadejść w przyszłych latach?

\n


\n

Po linki i więcej informacji zapraszamy do archiwum na naszej stronie!

2020-12-18 21:27:05 require25-js-w-2020-podsumowanie-feat-michal-z-tow ckius9kiw001ki3um2blndfkq 2020-12-18 21:27:05 2020-12-18 21:27:05 ckjftzg7f00010vmmwiqziiwt 7 interesujących gier napisanych w CSS https://devcorner.pl/gry-napisane-w-css/

W 2021 roku dobrze już wiemy, że możliwości CSS daleko wykraczają poza to co znaliśmy jeszcze kilka lat temu. Elementy, które kiedyś tworzyliśmy z pomocą JavaScript, dziś możemy napisać w samym CSS. Idealnym tego przykładem są gry tworzone tylko przy użyciu stylów. You Must Build a Lighthouse Gra z cyklem dnia i nocy polegająca na budowie domu z modułów. See the Pen A Pure CSS Game – You Must Build a Lighthouse. by Ben Evans (@ivorjetski) on CodePen. Rock, Paper, Scissors Klasyczna gra w kamień-papier-nożyce. See the Pen Pure CSS Game Rock Paper Scissor by Jerry Low (@jerrylow) on CodePen. […]

\n

Artykuł 7 interesujących gier napisanych w CSS pochodzi z serwisu Devcorner.

2021-01-02 14:53:40 7-interesujacych-gier-napisanych-w-css cjj4eqtmw0001i3umen1q8px0 2021-01-02 14:58:21.771 2021-01-02 14:58:21.771 ckq93u4ku00020wmp1ig7aczv ReactJS & TypeScript - szybki start https://www.youtube.com/watch?v=nUqpm059Rs4 React&Typescript podstawy. Odcinek, który ma Ci pomóc wystartować swój pierwszy projekt w ReactJS z pełnym wsparciem TSa.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-06-23 06:30:12 reactjs-and-typescript-szybki-start ckmoh2k1y000050l0rtc97ktd 2021-06-23 06:37:42.702 2021-06-23 06:37:42.702 ckjn6chuq00010wmp461ywpvo Multistreaming with Restream.io https://www.youtube.com/watch?v=xGqmoJcnS98 \N 2021-01-07 17:55:40 multistreaming-with-restream.io ckieg15g0001bi3um0fj3gred 2021-01-07 18:18:49.058 2021-01-07 18:18:49.058 @@ -185,6 +190,9 @@ ckjvrwv8100010vmqq4yh4pph Dostosowywanie klawiatury urządzenia mobilnego w pola ckjwou11p00010wmc3by3web7 Nowa miniseria Node + React + MongoDB https://tworcastron.pl/blog/nowa-miniseria-node-react-mongodb/

Po długiej przerwie, odświeżam YouTuba:) Jako wstęp, przygotowałęm nową miniserie na YouTubie. Jest to projekt praktyczny oparty na Node + React + MongoDB.  Seria składa się z 8 odcinków a […]

\n

Artykuł Nowa miniseria Node + React + MongoDB pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-01-14 09:49:04 nowa-miniseria-node-+-react-+-mongodb ckbbw3jvs000li3umgw19edq9 2021-01-14 10:06:15.757 2021-01-14 10:06:15.757 ckq81ousy00020wl8vf8uplvu Jak stworzyć UI na backendzie? https://fsgeek.pl/post/fastify-handlebars-tailwind/ W dzisiejszych czasach chyba większość nowych aplikacji powstaje jako dwa osobne byty - frontend i backend. A może dla niektórych przypadków jest to niepotrzebne? Może backend, który zwraca gotowy widok, jest dla niektórych przypadków wystarczający? W poście pokazuję jak to zrobić przy pomocy Fastify i Handlebars. 2021-06-22 16:00:00 jak-stworzyc-ui-na-backendzie ckhxjb6o0000yi3umb3hg09jv 2021-06-22 12:49:51.347 2021-06-22 12:49:51.347 ckjde751z00010vm9zb9caxd0 Biblioteczka Komputer Świat 06/2020 https://www.webkrytyk.pl/2020/12/31/biblioteczka-komputer-swiat-06-2020/ Dzisiaj coś bardziej nietypowego: Biblioteczka Komputer Świat. Kurs programowania. Technologie internetowe od podstaw Konrada Jagaciaka. To miała być jedna z tych dłuższych recenzji, bo i pozycja nie jest znowu taka krótka (ponad 100 stron), ale… raczej wyjdzie z tego takie ogólne marudzenie, niekoniecznie wprost na tę konkretną pozycję. Bo – po raz kolejny – napotykam się … Czytaj dalej Biblioteczka Komputer Świat 06/2020 2020-12-31 21:57:10 biblioteczka-komputer-swiat-062020 cki2dml0o000di3umgjexb6pk 2020-12-31 22:00:54.36 2020-12-31 22:00:54.36 +cj2vjxfyw00jgi3um289508tp Dlaczego User-Agent zaczyna się od "Mozilla 5.0..."? https://piecioshka.pl/blog/2017/05/19/dlaczego-user-agent-zaczyna-sie-od-slowa-mozilla.html

Czy zastanawiałeś się kiedyś, dlaczego User-Agent w każdej przeglądarce \nrozpoczyna się od Mozilla/5.0 ...? Jaki związek ma program \nInternet Explorer z Firefoxem? Może ktoś tutaj współpracuje? Zaraz \nwszystkiego się dowiesz.

\n\n
\n Baner reklamujący artykuł\n
\n\n

Historia

\n\n

Jeśli znasz historię języka JavaScript, to na pewno kojarzysz taką nazwę\njak Mosaic. Jeśli nie, to zapraszam Cię do zapoznania się z nią w \nartykule, którego napisałem kilka tygodni temu.

\n\n

W skrócie.

\n\n

W 1993 roku została opublikowana pierwsza na rynku przeglądarka \nwyświetlająca obrazki. Aplikacja nosiła nazwę NCSA Mosaic\ni została opublikowana przez bardzo ważny organ, który mocno przyczynił się \ndo rozwoju IT, czyli National Center for Supercomputing Applications (NCSA).

\n\n

Jej User-Agent zaczynał się od “Mosaic/0.9”.

\n\n\n\n

Rok później, tj. w 1994, powstała nowa przeglądarka, której nazwa kodowa\nto “Mozilla”, czyli “Mosaic Killer Godzilla”. Nazwa została wymyślona\nprzez jednego z programistów zespołu projektowego przeglądarki, Jamiego \nZawińskiego, który był fanem Godzilli.

\n\n
\n\n

O tym wszystkim informuje w komentarzu na portalu Quora, jeden z \nzałożycieli firmy Netscape - Lou Montulli. Lou był odpowiedzialny za\nmulti-platformowy kod sieciowy i to on zmienić User-Agent z “Mosaic” \nna “Mozilla”.

\n\n
\n

Nowa przeglądarka miała za zadanie zdeklasować obecnego lidera i podbić rynek\nprzeglądarek.

\n
\n\n

Rok później weszła ona na czołową pozycję wśród programów, dzięki którym \nmożna serfować po internecie.

\n\n

Po drodze nazwa została zmieniona na Netscape Navigator, aby \nuniknąć podobieństwa do NCSA Mosaic. I słusznie. Lepiej rozwiać \nwszelkie wątpliwości, co by użytkownicy nie byli zmieszani.

\n\n
\n

Ważna informacja

\n

Nazwa programu się zmieniała, jednak User-Agent pozostał.

\n
\n\n

Z tego powodu User-Agent pierwszej publicznej wersji Netscape \nNavigator zaczynał się od “Mozilla/2.02”.

\n\n

Dlaczego prefix się nie zmienił?

\n\n

Gdy rynek został podbity przez jedną przeglądarkę, a Ty chcesz zrobić nową, \nto masz dwie drogi w zdefiniowaniu User-Agenta:

\n\n
    \n
  1. stworzyć zupełnie nowy format, tworząc tym samym zamieszanie
    2. \n
  2. albo skopiować od aktualnego lidera i lekko zmodyfikować “pod siebie”
    3. \n
\n\n

Wszyscy kolejni producenci nowych aplikacji do przeglądania internetu \nstwierdzili, że nie ma sensu tworzyć zupełnie nowej składni i tak \nwykorzystywali UA obecnie najpopularniejszej przeglądarki.

\n\n

Wykorzystanie wówczas najpopularniejszego User-Agenta, niosło za sobą pewną \nkorzyść. Właściciele stron serwowali dla nie-Mozillowych klientów okrojoną \nwersję strony. To jest kolejny argument, dla którego lepiej podszyć się pod \nnajpopularniejszą przeglądarkę i prezentować użytkownikom normalną wersję.

\n\n

Rozwiązanie Microsoftu

\n\n

Niektóre przeglądarki np. Internet Explorer dodawały do User-Agenta \nwyraz “compatible”, po to, aby zasygnalizować, że przeglądarka jest \nkompatybilna z obecnie najlepszą, ale nią de facto nie jest.

\n\n

Ciekawy pomysł :smiley:

\n\n

I tak pierwsza publiczna wersja Internet Explorer 3 uruchomiona na Windows 95,\nmiała User-Agent-a w postaci: Mozilla/2.0 (compatible; MSIE 3.02; Windows 95).

\n\n
\n

Ciekawostka

\n

Internet Explorer w wersji 4.5 były opublikowany tylko na Mac-i.
\nJego User-Agent to: Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC).

\n
\n\n

Ale dlaczego akurat “5.0”?

\n\n

Po drodze nazwa przeglądarki Netscape Navigator zmieniła się \ndwukrotnie. Na początku Netscape Communicator, a potem na \npo prostu Netscape.

\n\n

Firma Netscape Communications, autorzy wtenczas najpopularniejszej \nprzeglądarki, stworzyła silnik do renderowania stron o nazwie Gecko.

\n\n

Zaimplementowali ten silnik do kolejnej wersji przeglądarki w wersji 5.0.\nSilnik ewoluował, przeglądarka też, jednak ta pierwsza liczba w User-Agent \njuż nie.

\n\n

Następnie nazwa przeglądarki została zmieniona na Firefox. \nWersjonowanie przeglądarki było zapisywane jako osobna (dodatkowa) liczba.

\n\n

Przykład

\n\n

Mozilla/5.0 (Windows NT 5.1; rv:15.0) Gecko/20100101 Firefox/15.0.1.

\n\n

W tym konkretnym przypadku, wersja przeglądarki to “15.0.1”.

\n\n

Nie ma sensu zmieniać teraz budowy User-Agenta, ponieważ trzeba by było \nzaktualizować cały software sieciowy, który analizuje ten string.\nDlatego też prefix “Mozilla/5.0” zostanie już z nami na zawsze.

\n\n

•

\n\n

Bibliografia

\n\n

Więcej na temat historii User-Agentów możecie przeczytać na \nblogu Nicolasa Zakasa. Polecam również poczytać historię User-Agent–w \nprzeglądarki Firefox. Kolejną interesującą lekturą jest historii \nUser-Agentów przedstawiona w zabawny sposób przez jednego z nas - \nprogramistów webowych.

2017-05-19 07:56:47 dlaczego-user-agent-zaczyna-sie-od-mozilla-50 ckbw97zyw0007i3umdszu2ola 2017-05-19 07:56:47 2017-05-19 07:56:47 +cj2z867bc00jwi3umarws09ox Jak wyświetlić liczbę osób lajkujących nasz fanpage? https://piecioshka.pl/blog/2017/05/21/jak-wyswietlic-liczbe-osob-lajkujacych-nasz-fanpage.html

Dziś, podczas kolejnych warsztatów z programowania w JavaScript \norganizacji WarsawJS, wpadłem na pomysł, aby wyświetlać podczas \ncałego dnia liczbę lajków, którymi obdarzony jest profil organizacji WarsawJS.

\n\n
\n

Obecnie jest blisko okrągłej liczby 1500 lajków. Może podczas warsztatów \nmagiczna liczba zostanie przekroczona?

\n
\n\n
\n 1493, 1494, 1495, 1496, 1497\n
\n\n

Moim zdaniem pomysł jest interesujący. Jeśli chcesz się dowiedzieć jak \nposzła mi implementacja takiego aplikacji, to zapraszam do lektury :books:

\n\n

•

\n\n

Misja

\n\n

Cel był prosty:

\n\n

Zaprezentować w formie dynamicznej liczbę lajków fanpage-a WarsawJS.

\n\n

Dodam, że aby zrealizować takie zadanie, trzeba być administratorem \nfanpage-a, bo inaczej nie zna się parametru appId oraz appSecret.

\n\n

Co musiałem zrobić, aby osiągnąć cel?

\n\n\n\n
(function (d, s, id) {\n  var js, fjs = d.getElementsByTagName(s)[0];\n  if (d.getElementById(id)) {\n    return;\n  }\n  js = d.createElement(s);\n  js.id = id;\n  js.src = "//connect.facebook.net/en_US/sdk.js";\n  // js.src = "//connect.facebook.net/en_US/sdk/debug.js";\n  fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));\n
\n\n\n\n
const appId = 'XXX';\nconst appSecret = 'XXX';\nconst getOAuthAccessTokenURI = `https://graph.facebook.com/oauth/access_token?client_id=${appId}&client_secret=${appSecret}&grant_type=client_credentials&debug=all`;\n\nconst pageId = 'warsawjs';\nconst getEngagementURI = `https://graph.facebook.com/${pageId}/?fields=engagement&debug=all`;\n
\n\n\n\n
window.fbAsyncInit = function () {\n  FB.init({\n    appId: appId,\n    autoLogAppEvents: true,\n    xfbml: true,\n    version: 'v2.9'\n  });\n}\n
\n\n\n\n
window.fbAsyncInit = function () {\n  // ...\n  Promise.resolve()\n    .then(() => {\n      return window.fetch(getOAuthAccessTokenURI);\n    })\n    .then((response) => {\n        return response.json();\n    })\n    .catch((err) => {\n      console.error(err);\n    });\n}\n
\n\n\n\n
/**\n * Funkcja, do komunikacji z Facebook API.\n * \n * @author Piotr Kowalski\n * @param {string} url\n * @param {Object} opts\n */\nfunction fetchFacebookService(url, opts = {}) {\n  return new Promise((resolve, reject) => {\n    FB.api(url, opts, (response) => {\n      if (response.error) {\n        return void reject(response.error);\n      }\n      resolve(response);\n    });\n  });\n}\n\nwindow.fbAsyncInit = () => {\n  // ...\n  .then((response) => {\n    return fetchFacebookService(getEngagementURI, response)\n  })\n  .then((response) => {\n    return response.engagement.count;\n  })\n  .then((likes) => {\n    console.log(likes); // 1497 # mamy to!!!\n  })\n  // ...\n}\n
\n\n\n\n
\n

Wskazówki

\n
    \n
  • Czytaj Getting Started od razu!
    • \n
  • Nie sugeruj się odpowiedziami ludzi na forum odnośnie tego jak coś zrobić z \nFacebook API. Informacje te są zwykle przestarzałe.
    • \n
  • Większość usług wymyga podania Access Tokenu.
    • \n
\n
\n\n

Developerskie usprawnienia

\n\n
    \n
  1. \n

    Flaga w URLach, zwiększa delikatnie możliwości programistyczne debug=all

    \n\n

    Co robi ten parametr? Nie wiem, ale jest developerski to go używam. \n Dajcie znać w komentarzach po co on jest. Osobiście takiej informacji nie \n znalazłem.

    \n
    2. \n
  2. \n

    Dołączanie głównego pliku w procesie osadzenia Facebook API:
    \n js.src = "//connect.facebook.net/en_US/sdk/debug.js";

    \n\n

    Od razu w DevToolsach widzę jak działa Facebook API. Super!

    \n
    3. \n
\n\n

Pomysły

\n\n

Spróbuję zrobić paczkę w npm-ie, która by potrzebowała credientiali,\na zwracała liczbę lajków strony, której jest się właścicielem :star2:

2017-05-21 21:38:45 jak-wyswietlic-liczbe-osob-lajkujacych-nasz-fanpage ckbw97zyw0007i3umdszu2ola 2017-05-21 21:38:45 2017-05-21 21:38:45 +cj323qfd400k4i3umazx092ce Zobacz, jak "overflow-wrap" może Cię uratować! https://piecioshka.pl/blog/2017/05/23/zobacz-jak-overflow-wrap-moze-cie-uratowac.html

Tekst wychodzi poza kontener? Nie martw się. Jest na to lekarstwo. Znajduje się\nono w apteczce w napisem “CSS3”. Poznajmy dziś czym jest overflow-wrap.

\n\n
\n

Kiedyś (w CSS2) reguła ta nazywała się word-wrap, jednak przyszły czasy \nnowej specyfikacji i powstał pomysł zmiany nazwy. Czy słusznie?

\n
\n\n
\n Baner reklamujący artykuł\n
\n\n

Jak działa reguła “overflow-wrap”?

\n\n

Najlepiej będzie jak sam zobaczysz.

\n\n

See the Pen overflow-wrap/word-wrap demo by Louis Lazaris (@impressivewebs) on CodePen.

\n\n\n

Jakie są jej możliwości?

\n\n

Występują dwie opcje:

\n\n\n\n
overflow-wrap: normal; /* domyślnie */\n
\n\n\n\n
overflow-wrap: break-word;\n
\n\n

Więcej do przeczytania na stronie.

\n\n
\n

Wskazówka

\n

Opisywaną regułę świetnie używa się z inną, tj. z hyphens: auto;, która \ntroszczy się o to, aby po zawinięciu wiersza dostawić znak myślnika, \noznaczającego przeniesienie wyrazu. Efekt, którego zostaliśmy nauczeni \nw podstawówce jest zrealizowany!

\n
\n\n

Czy mogę używać?

\n\n

Wsparcie jest szerokie. Można powiedzieć, że każda przeglądarka wspiera \nłamanie wiersza, bo jeśli nie działa overflow-wrap: break-word (może używamy \nwersji przeglądarki z poprzedniej epoki), to zawsze możemy użyć\nword-wrap: break-word i uniknąć ewentualnych nieprzyjemności.

\n\n

Na potwierdzenie wkleję tutaj oryginalny tekst ze specyfikacji

\n\n
\n

For legacy reasons, UAs must treat word-wrap as an alternate name for the \noverflow-wrap property, as if it were a shorthand of overflow-wrap.

\n
\n\n

Specyfikacja

\n\n

Jeśli chciałbyś poczytać specyfikację tej reguły, to jest ona opisana w
\nstandardzie CSS3. Btw. wiesz, że to ostatnia wersja CSS?

\n\n

Nie będzie CSS4.

\n\n

Konsorcjum W3C przyjęło zasadę, że feature-y w CSS będą rozwijały się \nsamodzielnie. Tym samym, nie powstanie nowa wersja CSS, która mogłaby je \nagregować.

\n\n

W sumie, to ciekawy zabieg. Interesujące jest to, że ścieżka rozwoju CSS jest\ntaka jak przed chwilą opisałem, a ścieżka rozwoju JavaScript taka, że co roku\nmusi powstać nowa wersja.

\n\n

Ciekawe co z HTMLem? :smiley: (Na te pytanie odpowiedział Commander
\nw komentarzu pod tym artykułem. Thanks man!)

\n\n

Performance

\n\n

Jeśli martwisz się wydajnością, bo może chcesz ustawić tą regułę w locie, to \nmasz problem. Generuje ona wszystkie 3 zachowania:

\n\n\n\n

Więcej na ten temat na stronie CSS Triggers autorstwa Paula Lewisa.

\n\n

Historia

\n\n

Tym razem odpuszczam historię na temat tej reguły. Jednak, jeśli jesteś \nzainteresowany to zapraszam na tą stronę, gdzie możesz poczytać na ten \ntemat.

2017-05-23 21:57:49 zobacz-jak-overflow-wrap-moze-cie-uratowac ckbw97zyw0007i3umdszu2ola 2017-05-23 21:57:49 2017-05-23 21:57:49 ckjg2kd8100010vmle3gpae2x Web developer – pytania rekrutacyjne cz. 8 – Git https://devszczepaniak.pl/web-developer-pytania-rekrutacyjne-git/

Jest to kolejny wpis z serii wpisów z pytaniami rekrutacyjnymi na stanowisko web developera. Listę wszystkich poprzednich wpisów z tej serii znajdziesz poniżej. Zachęcam Cię do zapoznania się jeśli jeszcze nie miałeś/aś okazji: Web developer – pytania rekrutacyjne cz. 1 Web developer – pytania rekrutacyjne cz. 2 Web developer – pytania rekrutacyjne cz. 3 Web … Czytaj dalej Web developer – pytania rekrutacyjne cz. 8 – Git

\n

Artykuł Web developer – pytania rekrutacyjne cz. 8 – Git pochodzi z serwisu Devszczepaniak.pl.

2021-01-02 18:23:23 web-developer-pytania-rekrutacyjne-cz.-8-git ckiyvf2eg0012i3um2h8g0dup 2021-01-02 18:58:34.61 2021-01-02 18:58:34.61 ckjn7x7tv00010wmglzp4wkn2 2 użyteczne sposoby na strukturyzowanie plików SASS https://devcorner.pl/uzyteczne-sposoby-strukturyzowanie-plikow-sass/

W każdym projekcie ważne jest zachowanie przejrzystej struktury plików. Niezależnie od tego czy tworzysz rozbudowaną aplikację webową czy prostą stronę typu onepage, powinieneś korzystać z jakiegoś sposobu strukturyzowania plików. W tym artykule poznasz 2 sposoby na tworzenie struktury  plików SASS/SCSS. Jeden z nich będzie idealny w przypadku prostych projektów. Drugi z powodzeniem będziesz mógł wykorzystać pracując przy większych projektach. Prosta struktura Jeśli pracujesz nad prostym projektem takim jak np. prosty onepage to tworzenie skomplikowanej struktury mija się z celem. Lepiej sprawdzi się skupienie na kilku podstawowych plikach: _core.sass – zawiera wszystkie zmienne, mixiny, resety itp., _layout.sass – zawiera style dotyczące […]

\n

Artykuł 2 użyteczne sposoby na strukturyzowanie plików SASS pochodzi z serwisu Devcorner.

2021-01-07 18:52:39 2-uzyteczne-sposoby-na-strukturyzowanie-plikow-sass cjj4eqtmw0001i3umen1q8px0 2021-01-07 19:02:55.46 2021-01-07 19:02:55.46 ckju40w4u00010wl8ee7bjyvs Jak przygotować się do live codingu? - moje wskazówki https://kernelgonnapanic.pl/2021/01/11/jak-przygotowac-sie-do-rekrutacji/

W ramach kernelgonnapanic prowadzę indywidualne zajęcia/korepetycje z front-endu. Oprócz wspólnego uczenia się i kodowania, często przeprowadzam także próbne rozmowy kwalifikacyjne . Dla moich kursantów jest to okazja, by oswoić się z nową sytuacją i stresem z nią związanym, zobaczyć, jak taka rozmowa mogłaby wyglądać w realu, a także często pierwszy raz spróbować wspólnego kodowania na żywo. Dodatkowo dostają również informację zwrotną o tym, co jest ich mocnymi stronami, a nad czym mogą jeszcze popracować zanim zmierzą się z prawdziwą rekrutacją. Dziś postanowiłam zebrać porady, których często udzielam osobom, z którymi współpracuję i opublikować je w formie artykułu - może będą przydatne również Tobie. 2021-01-11 15:00:00 jak-przygotowac-sie-do-live-codingu-moje-wskazowki ckesj8kg0000vi3um42jmc86u 2021-01-12 14:48:11.695 2021-01-12 14:48:11.695 @@ -206,6 +214,8 @@ ckq9v2rce00020wlj8fno55v7 require(#31) - Testowanie na frontendzie feat. Przemys ckqa4bdnr00020wjq05fznxbu Wideokurs 15 komponentów na strony WWW od MMC School https://www.webkrytyk.pl/2021/06/24/wideokurs-15-komponentow-na-strony-www-od-mmc-school/ Dzisiaj na tapecie leży wideokurs 15 komponentów na strony WWW od MMC School. To nie jest dokładna recenzja kursu, raczej zbiór luźnych przemyśleń i propozycji. Ogólne uwagi Mamy 2021 rok i myślę, że to już odpowiedni moment, żeby w kursach posługiwać się modułami ES. Zwłaszcza, że na potrzeby tego kursu jedyną zmianą byłoby dostawienie atrybutu … Czytaj dalej Wideokurs 15 komponentów na strony WWW od MMC School 2021-06-23 23:37:32 wideokurs-15-komponentow-na-strony-www-od-mmc-school cki2dml0o000di3umgjexb6pk 2021-06-23 23:38:53.799 2021-06-23 23:38:53.799 ckqaz9vxf00020wkvec96vq9i Frontend Thursday vol. 43 https://blog.vived.io/frontend-thursday-vol-43/ W tym tygodniu mamy dla Was poważny bug w nowym Safari, kolejną rundę finansowania Vercel i nowe werjse Next.js 11 i Deno 1.11. 2021-06-24 13:58:19 frontend-thursday-vol.-43 ckmor5k8y000044moj65m13y0 2021-06-24 14:05:32.259 2021-06-24 14:05:32.259 ckjuakmpb00010wlcdhsxejvt Web Prasówka #5 https://www.youtube.com/watch?v=SJRDNZzJRe4 Najciekawsze newsy i linki ze świata web developmentu feat. Kamil Dzieniszewski. 2021-01-12 17:15:35 web-prasowka-5 ckivz8t54001di3umfv7i4q26 2021-01-12 17:51:30.287 2021-01-12 17:51:30.287 +ck1lubzrk01qti3umcdob1ec7 3 Linijki Kodu - Gradient Text | CSS HTML https://www.youtube.com/watch?v=KHAbLp6Bm0U Prosty, ale bardzo efektowny efekt gradientu na tekście, który bardzo uatrakcyjni Twoją stronę. Oparty jest jedynie na CSSie i HTMLu.\n\nZapraszam!\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/mdbYZWa\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-10-11 08:00:02 3-linijki-kodu-gradient-text-or-css-html ckg2k1vxc001gi3umclnyctyp 2019-10-11 08:00:02 2019-10-11 08:00:02 +cj34yjik800kgi3um7dju0s2i Konferencja: Code Europe 2017 https://piecioshka.pl/blog/2017/05/25/konferencja-code-europe-2017.html

Sezon na konferencje czas rozpocząć! Chciałem Ci dziś przedstawić moje \nwrażenia z pierwszej (w tym roku) konferencji w której uczestniczyłem.

\n\n

Mowa tutaj o konferencji wymienionej w tytule, czyli Code Europe ‘17.\nNa początku zaznaczę, że post nie jest sponsorowany, aby nie było \nwątpliwości. Na blogu przekazuję moją i tylko moją opinię. Cheers!

\n\n
\n Baner reklamujący artykuł\n\n
\n Oficjalne logo konferencji Code Europe 2017\n
\n
\n\n

Z różnych źródeł dowiedziałem się, że konferencja miała miejsce już w tym roku\nw dwóch innych miastach: Kraków (26 kwietnia, ICE Kraków) i Wrocław (23 maja,\nHala Stulecia).

\n\n

Konferencja Code Europe, ma swoją drugą edycję, tzw. wiosenną. W zeszłym roku \nodbyła się pierwsza edycja. I była to edycja jesienna.

\n\n\n\n

Prelekcje na których byłem obecny

\n\n

Jak każda konferencja i ta chwali się, że posiada NAJLEPSZYCH prelegentów\ni że jest NAJWIĘKSZA i w ogóle “the best”. Oczywiście, nie są to cechy w \nżaden sposób mierzalne, więc każda posiada prawo aby tak pisać :smiley:

\n\n

•

\n\n

Poniżej przedstawiam Ci moje komentarze w sprawie co poniektórych prelekcji\nna których dane mi było uczestniczyć. Ogólnie podczas jednego dnia prelekcji \nodbyło się prawie 50 prezentacji.

\n\n

Jak rozwiązać tak dużą liczbę speech-y w tak krótkim czasie? Zrównoleglenie.

\n\n

Tutaj pojawia się problem, bo co jeśli pochodzisz z takiego środowiska,\nże interesują Cię >2 prelekcje, a Ty możesz być obecny tylko na jednej?

\n\n

1. Going offline with append-only logs [EN] Mathias Buus

\n\n

Pierwsza prelekcja. Byłem spóźniony i niewiele zrozumiałem. Przepraszam!

\n\n

2. Programming healthcare well [EN] Harold Thimbleby

\n\n

Prelekcja, która nie podnosiła na duchu. Podczas niej dowiedziałem się,\nże bardzo często przyczyną śmierci pacjentów są bugi w oprogramowaniu \nzainstalowanym na specjalistycznych urządzeniach medycznych.

\n\n

Bardzo często winą za te bugi obarczane są pielęgniarki. \nZnany jest przypadek, kiedy pielęgniarka została wyrzucona z pracy z powodu \nśmierci pacjenta. Nie wytrzymała takiego napięcia i popełniła samobójstwo.

\n\n

Smutne.

\n\n

3. Ramda JS - First Step [PL] Karol Rogowski

\n\n

Karol opowiadał o programowaniu funkcyjnym na prostych przykładach, gdzie \ntaki styl programowania ma jakiś sens.

\n\n

Sam język JavaScript idealnie nadaje się do pisania w stylu funkcyjnym, ze \nwzględu na występowanie tzw. domknięć. Co to jest domknięcie? O tym będzie \nosobny wpis na blogu. Kiedy? za kilka tygodni.

\n\n

Prelegent wykorzystywał bibliotekę “ramba” do tego, aby móc składać funkcje w \nprosty sposób, aby zachwycić publikę.

\n\n\n\n

4. The Things Git Can Do (that none of the GUIs have ever told you about) [EN] Enrico Campidoglio

\n\n

Uwielbiam Gita :heart: Napisałem już o nim kilka artykułów. Moją \npierwszą w życiu wygłoszoną prelekcją był speech o tym właśnie narzędziu.

\n\n

Enrico pokazał niskopoziomowe polecenia jakie występują w Gicie. Świetna \nprelekcja!

\n\n

5. Introduction to frontendless: UI as a service [PL] Tomasz Skowroński

\n\n

Tomasz, nasz warszawski speaker, który na podstawie komunikatora Slack \nopowiadał o plusach i minusach rozwiązań wypracowanych w tym komunikatorze.

\n\n

Bardzo konkretna prelekcja. Samo mięcho. IYKWIM.

\n\n

6. PWAssemble—Instant and Customized Progressive Web App Demos, Because Only Seeing is Believing [EN] Thomas Steiner

\n\n

Jedna z moich ulubionych prelekcji na tegorocznej edycji Code Europe, \nbyła o Progressive Web App.

\n\n

Tematyka dla mnie dość mocno znana. Opisywałem na swoim blogu moją przygodę \nzwiązaną z PWA. Artykuł dostępny tutaj.

\n\n\n\n

Chciałem pomóc zwiększyć font, a okazało się że niektórzy mnie nagrywają.

\n\n
\n

Człowiek w dzisiejszych czasach, nie może komuś pomóc, bo już zostanie \nnagrany. Dzięki @ckyambitny.

\n
\n\n\n\n

7. Design Systems Engineering: Scaling User Interfaces [EN] Christoph Reinartz

\n\n

Bardzo interesująca prelekcja na temat strony internetowej TRIVAGO. Kris \nopisywał kroki jakie jego zespół wykonał, do tego, aby wyjść z roku 2000 do 2017.

\n\n

Podsumowanie

\n\n

Jak zawsze jestem pozytywnie nastawiony do wszelkiego rodzaju wydarzeń, \npodczas których mogę poszerzyć swoją wiedzę o front-endzie oraz móc porozmawiać \nz innymi fanatykami języka JS.

\n\n

Podczas konferencji ekipa WarsawJS wysłała swojego przedstawiciela, aby \ngodnie reprezentował organizację.

\n\n\n\n

•

\n\n

After

\n\n

Przyjęło się, że po konferencji organizowany jest “after”. Dla tych, którzy nie\nwiedzą co to jest, to mówię, że to takie nieformalne spotkanie przy \n“lemoniadzie” już poza venue konferencyjnym, tylko gdzieś indziej, gdzie będą\nodpowiednie warunki do biesiadowania.

\n\n

Ten “after” był dla mnie pod pewnym względem niesamowity. Poznałem na żywo \nlegendę polskiej sceny blogerskiej - Piotra Nalepę, który przyjechał\nz Katowic do stolicy na konferencję FrontTrends 2017 - odbywała się ona \nw tym samym czasie co omawiana dziś przeze mnie “Code Europe 2017”.

2017-05-25 21:55:47 konferencja-code-europe-2017 ckbw97zyw0007i3umdszu2ola 2017-05-25 21:55:47 2017-05-25 21:55:47 ckjwyoiqp00010vmoy42z5z13 Animowane prezentacje w Figmie ⌨️ hello roman #145 https://www.youtube.com/watch?v=rBBDvx_Pw6Q Figma to nie tylko doskonałe narzędzie do tworzenia projektów interfejsów, aplikacji czy całych design systemów. W tym odcinku pokażę Wam, jak dzięki Figmie stworzycie animowane prezentacje i jak łatwo w Figmie animować dowolne elementy. \n\nPrezentacja: https://www.figma.com/file/fmrWSxvnlwn2aTkZbA9cp7/Grady-Presentation-Template-Community?node-id=0%3A1\nAnimacja: https://www.figma.com/proto/fmrWSxvnlwn2aTkZbA9cp7/Grady-Presentation-Template-(Community)?node-id=1%3A2&scaling=min-zoom\n\n⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-01-14 14:00:09 animowane-prezentacje-w-figmie-hello-roman-145 ckiswuz9s0017i3um5mg4h7q1 2021-01-14 14:41:54.913 2021-01-14 14:41:54.913 ckqcfdfp800020wmm7rpk76b9 ⚛️ Budowanie społeczności | Next.js | Prisma – Rozmowa z Arturem Chmaro z FullStak.pl https://www.youtube.com/watch?v=DfjrPKOncMc Artur od ponad 12 lat buduje aplikacje webowe. Na swoim kanale YouTube dzieli się wiedzą z Reacta, Jesta, Nexta i innych rzeczy, które go aktualnie interesują. Entuzjasta Ethereum i szeroko pojętej decentralizacji.\n\nLinki:\nhttps://sklep.fullstak.pl/kurs-nextjs\nhttps://fullstak.pl/bio/\n\n00:00 Rozpoczęcie\n08:20 CTO @ license.rocks\n11:37 Next.js vs Gatsby\n20:00 Prisma i TypeScript\n39:35 Kurs Next.js\n44:40 Kursy wideo online\n47:30 Discord i budowanie społeczności\n56:50 Podsumowanie\n\n\n📘 Kup „TypeScript na poważnie”: https://sklep.typeofweb.com\n\n🔔 Subskrybuj mój kanał: https://www.youtube.com/typeofweb?sub_confirmation=1\n\n🔗 Znajdziesz mnie na:\nBlog – https://typeofweb.com\nFacebook – https://facebook.com/typeofweb\nInstagram – https://instagram.com/michal_typeofweb\nPodcast – https://anchor.fm/typeofweb\n\n✋ Dołącz do społeczności na Discordzie! https://discord.typeofweb.com\n\nMusic: www.bensound.com 2021-06-25 14:19:05 budowanie-spolecznosci-or-next.js-or-prisma-rozmowa-z-arturem-chmaro-z-fullstak.pl cklidcb3o00002pma33gvhnbe 2021-06-25 14:23:57.885 2021-06-25 14:23:57.885 ckqdftij200020wmn03ggudyl Software Craftsmanship Saturday vol. 43 https://blog.vived.io/software-craftsmanship-saturday-vol-43/ Po tygodniu w którym newsów nie było wcale, tym razem mamy ich aż nad to - co ciekawe, wyjątkowo również w polskiego poletka 🇵🇱. \nZapraszamy do lektury! 2021-06-26 07:23:42 software-craftsmanship-saturday-vol.-43 ckmor5k8y000044moj65m13y0 2021-06-26 07:24:14.222 2021-06-26 07:24:14.222 @@ -215,8 +225,6 @@ ckgfnkxs0028mi3um0ohh7xd6 require(#21) - Nasze początki, nauka i zdobywanie wie ckh3cwl6o029ki3um2tyh6r75 require(#22) - Podsumowanie Next.js Conf https://anchor.fm/require/episodes/require22---Podsumowanie-Next-js-Conf-em0kof

W tym odcinku podsumowujemy dość duże wydarzenie jakim był Next.js Conf, wymieniamy się swoimi przemyśleniami na jego temat oraz omawiamy nowości zaprezentowane podczas prezentacji.

\n

Zapraszamy wszystkich do sprawdzenia linków i notatek odcinka na archiwum na naszej stronie oraz do zapisania się do naszego newslettera.

2020-11-04 12:07:36 require22-podsumowanie-nextjs-conf ckius9kiw001ki3um2blndfkq 2020-11-04 12:07:36 2020-11-04 12:07:36 ckhumabk002ahi3um3pog60fg require(#23) - Trochę o Firebase https://anchor.fm/require/episodes/require23---Troch-o-Firebase-emsa2p

Firebase jest bardzo ciekawą usługą od Google, pozwalającą nam tworzyć pełnoprawne aplikacje z backendem... bez pisania ani jednej linijki kodu backendowego. W tym odcinku przyjrzymy się podstawom Firebase i jego głównym częściom.

\n

Oczekujcie również w najbliższym czasie drugiej części odcinka o Firebase, w którym porozmawiamy o rzeczach trochę bardziej "dookoła" samego pisania kodu, takich jak delivery aplikacji, testowanie, reklamy, czy Google Analytics.

\n

Po linki i więcej informacji, zapraszamy do archiwum na naszej stronie!

2020-11-23 14:00:00 require23-troche-o-firebase ckius9kiw001ki3um2blndfkq 2020-11-23 14:00:00 2020-11-23 14:00:00 ckig9t2tc02b9i3um6cytcvxa require(#24) - Trochę o module bundlerach https://anchor.fm/require/episodes/require24---Troch-o-module-bundlerach-enhius

Module bundlery to bardzo przydatne narzędzia wchodzące w skład niemalże każdej nowoczesnej strony internetowej. Zazwyczaj znajdują się pod spodem innych narzędzi, ale warto się również przyjrzeć im samym. W tym odcinku rozmawiamy o tym czym są, co mogą dla nas zrobić oraz porównujemy najciekawsze z nich.

\n


\n

Po linki i więcej informacji zapraszamy do archiwum na naszej stronie!

2020-12-08 17:41:36 require24-troche-o-module-bundlerach ckius9kiw001ki3um2blndfkq 2020-12-08 17:41:36 2020-12-08 17:41:36 -ckius9kiw02bti3um30fs4ntf require(#25) - JS w 2020 - Podsumowanie feat. Michał z ToW https://anchor.fm/require/episodes/require25---JS-w-2020---Podsumowanie-feat--Micha-z-ToW-eo03f6

2020 był... ciekawym rokiem. A jeszcze ciekawsze było to, co działo się w szeroko pojętym świecie JavaScriptu. W tym odcinku, razem z Michałem z Type of Web, podsumowujemy ten rok. Jakie technologie zdominowały frontend i backend? Jaką rolę grał TypeScript? Co nas rozczarowało w tym roku? A co może nadejść w przyszłych latach?

\n


\n

Po linki i więcej informacji zapraszamy do archiwum na naszej stronie!

2020-12-18 21:27:05 require25-js-w-2020-podsumowanie-feat-michal-z-tow ckius9kiw001ki3um2blndfkq 2020-12-18 21:27:05 2020-12-18 21:27:05 -ck1lubzrk01qti3umcdob1ec7 3 Linijki Kodu - Gradient Text | CSS HTML https://www.youtube.com/watch?v=KHAbLp6Bm0U Prosty, ale bardzo efektowny efekt gradientu na tekście, który bardzo uatrakcyjni Twoją stronę. Oparty jest jedynie na CSSie i HTMLu.\n\nZapraszam!\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/mdbYZWa\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-10-11 08:00:02 3-linijki-kodu-gradient-text-or-css-html ckg2k1vxc001gi3umclnyctyp 2019-10-11 08:00:02 2019-10-11 08:00:02 ck1vueww001r9i3um1b9ifkj3 Jak osiągnąć effekt - SKEWED HERO | Tylko CSS https://www.youtube.com/watch?v=D2kfYKKH9Eg Efekt, który na pewno sprawi, że Twój projekt będzie ciekawszy wizualnie. "Ucięty" lub "przechylony" nagłówek typu hero przyciągnie uwagę. Tworzymy go tylko za pomocą CSSa (clip-path + polygon) co sprawia, że jest bardzo uniwersalny i łatwy w użyciu.\n\nZapraszam!\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/VwZJZBz\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-10-18 08:00:00 jak-osiagnac-effekt-skewed-hero-or-tylko-css ckg2k1vxc001gi3umclnyctyp 2019-10-18 08:00:00 2019-10-18 08:00:00 ck441iai001u6i3ume4htc014 Efekt podświetlenia | CSS | Fajny CSS https://www.youtube.com/watch?v=kViWCFUuktc Witajcie ❗ Dzisiaj robimy efekt podświetlenia. Przypomina on trochę neon i wykonany jest za pomocą blura. Moim zdaniem bardzo ciekawy i miły dla oka efekt 🙂 😊\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/rNNXpEa\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-12-13 11:00:09 efekt-podswietlenia-or-css-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2019-12-13 11:00:09 2019-12-13 11:00:09 ciyt9u8w0006yi3um6rhl0ar5 Globalna konfiguracja Gita https://piecioshka.pl/blog/2017/02/06/globalna-konfiguracja-gita.html

\n W dobie dzisiejszej popularności systemu kontroli wersji Git, chciałem\n przedstawić Tobie jak wykorzystać globalną konfigurację, aby plik\n .gitignore w dowolnym projekcie nie zawierał nadmiarowych\n informacji.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Częsty problem

\n\n

\n Wiele razy widzę, jak w projektach na GitHubie dodane są katalogi\n z konfiguracją edytorów, które są zupełnie niepotrzebne\n osobom trzecim, wykorzystującym ten projekt do własnych celów.\n

\n\n

WebStorm i jego katalog .idea

\n\n

\n I tak na przykład\n WebStorm (edytor firmy\n JetBrains) tworzy katalog\n .idea, w którym zapisuje różne ustawienia projektów.\n

\n\n

\n Ten katalog jest pomocny, kiedy korzystamy z zaawansowanych\n funkcjonalności edytora, na przykład wykluczania katalogów.\n Proces polega na wyłączeniu z procesu indeksowania oraz wyszukiwania\n dowolnych katalogów, na przykład katalogów node_modules\n albo bower_components zawierających zależności projektów.\n

\n\n

Jak wykluczyć katalog?

\n\n

\n Aby "wyłączyć" katalog z projektu należy kliknąć prawym przyciskiem\n myszy na katalogu oraz wybrać: Mark Directory as ->\n Excluded\n

\n\n

\n Od tej pory wybrany katalog nie będzie brany pod uwagę przez edytor.\n Informacja o tym stanie zostanie zapisana w katalogu .idea.\n Dlatego też trzeba wykluczyć katalog .idea z systemu\n kontroli wersji.\n

\n\n
\n Nie ma absolutnie żadnych przesłanek, aby katalog\n .idea był wersjonowany wiec nie ma sensu dodawać go do\n Gita.\n
\n\n

\n Aby to zrobić programiści często w pliku .gitignore, w\n katalogu głównym projektu dodają linijkę, która wyklucza katalog\n .idea. Niestety informacja ta nie powinna znaleźć się w\n pliku .gitignore projektu, bo nie jest z nim związana,\n dotyczy wyłącznie konfiguracji środowiska programisty.\n

\n
\n\n
\n

Jak wykorzystać plik .gitignore w katalogu użytkownika?

\n\n

\n Git daje możliwość stworzenia pliku .gitignore w katalogu\n projektu, aby wykluczyć rzeczy projektowe, oraz w katalogu\n użytkownika, aby wykluczyć katalogi i pliki, które zależą od wybranego\n środowiska developerskiego (edytor, system operacyjny, etc.).\n

\n\n

\n Informacja o wykluczeniu katalogu .idea powinna znaleźć się\n w pliku .gitignore, który znajduje się w katalogu użytkownika.\n Jeśli taki plik nie istnieje, warto go stworzyć.\n

\n\n

\n Każdy system operacyjny tworzy pliki ukryte (tymczasowe), których także\n nie ma sensu dodawać do systemu kontroli wersji.\n

\n\n
\n Nie wyobrażam sobie, że miałbym w każdym projekcie dopisywać do pliku\n .gitignore informację, aby katalog .idea\n był ignorowany, albo jakiś inny katalog z ustawieniami edytora,\n którego obecnie używam.\n
\n\n

Jak skonfigurować globalny plik .gitignore?

\n\n

\n Aby skonfigurować Gita proponuję wykonać następujące polecenia:\n

\n\n
# ~ (tylda) znak ten odnosi się do katalogu domowego użytkownika\n$ touch ~/.gitconfig\n\n$ git config --global core.excludesfile ~/.gitignore\n$ vim ~/.gitignore\n\n# W pliku ~/.gitignore dodaj katalog .idea/\n# A teraz wykonaj w katalogu projektu polecenie `git status`
\n\n

Moja konfiguracja

\n\n

\n Przedstawiam zawartość mojego pliku ~/.gitignore\n

\n\n
# Windows\n$RECYCLE.BIN/\nDesktop.ini\n*.db\n*.autosave\n\n# Linux\n*~\n.directory\n\n# macOS\n.Spotlight-V100/\n.Trashes/\n.DS_Store\n._*\n\n# Edytory\n.idea/\n.settings/\n.project\nnbproject/\n*.swp\n.vscode
\n
\n\n
\n

Dodałem katalog .idea do projektu, co robić?

\n\n
\n Ignorowanie katalogu .idea nie usunie go z systemu\n kontroli wersji Git.\n
\n\n

\n Po tym jak dodałeś w globalnym pliku .gitignore informację\n o tym, żeby Git ignorował katalog .idea, należy\n usunąć ten katalog poleceniem (będąc w katalogu projektu)\n

\n\n
$ git rm -rf .idea
\n\n

\n Oraz stworzyć rewizję (commit) z tą zmianą:\n

\n\n
$ git commit .idea -m "Remove WebStorm settings directory"
\n
2017-02-05 23:00:00 globalna-konfiguracja-gita ckbw97zyw0007i3umdszu2ola 2017-02-05 23:00:00 2017-02-05 23:00:00 @@ -240,11 +248,6 @@ cj2kyhn2800imi3um8tnggk6i Czym jest dla mnie BEM? https://piecioshka.pl/blog/201 cj2mhwgc000iqi3ume46ibsbq EOL w prostych słowach https://piecioshka.pl/blog/2017/05/13/end-of-line-w-prostych-slowach.html

Każda plik tekstowy składa się z linii. Każda linia kiedyś się kończy.\nAle skąd system wie, że linia się skończyła? Istnieje specjalny ZNAK, \nktóry informuje system, że znaki w linii właśnie się skończyły.

\n\n
\n Baner reklamujący artykuł\n
\n\n

Problem

\n\n

I tym znakiem jest… no właśnie. Nie ma jednego znaku cross-platformowego, \nktóry by informował, że linia została “zakończona”. Wszystko ze względu na \nproblem ze zróżnicowaniem poglądów na to co to jest zakończenie linii.

\n\n

Wyróżniamy 3 tryby EOL (end-of-line):

\n\n\n\n

Istnieje standard opisujący znaki w systemach komputerowych. Nazywa się on\nASCII.\nTo w nim zdefiniowane jest mapowanie znaków na liczby - 7 bitowe kody.

\n\n
\n

Specyfikacja znaku końca wiersza

\n

Niestety, ale w standardzie ASCII nie ma opisanego znaku końca linii w \nsystemach plików. Jest za to opisany standard znaku końca linii\nw komunikacji sieciowej!

\n
\n\n

W ubiegłym wieku, kiedy były ustalane protokoły sieciowe, przyjęto że \nwszystkie komunikaty sieciowe będą kończyły się sekwencją znakową CR LF.\nI bardzo dobrze! Tzn. nie jestem zwolennikiem tej sekwencji. Cieszę się z \npowodu przyjętej zasady. Wreszcie będzie porządek :tada:

\n\n

Jak podejrzeć jakie jest zakończenie linii?

\n\n

Windows

\n\n

Świetnym sposobem na pogląd znaków specjalnych w pliku jest wykorzystanie \nsposobu opisanego tutaj, czyli posłużenie się narzędziem Notepad++.

\n\n

W edytorze dostępna jest opcja View all characters (Wyświetl wszystkie \nznaki) dzięki której wszystkie znaki (również te specjalne) zostaną wyświetlone.

\n\n
\n Zrzut ekranu z programu Notepad++\n\n
\n \n Dr. Palaniraja\n Copyright @ 2017\n
\n
\n\n

Linux & macOS

\n\n

Na systemach unix-owych podglądanie zakończenia linii odbywa się za pomocą \nnarzędzia od. Jego definicja w man pages:

\n\n
OD(1)                   BSD General Commands Manual                  OD(1)\n\nNAME\n    od -- octal, decimal, hex, ASCII dump\nSYNOPSIS\n...\n
\n\n

Aby przeczytać plik znak po znaku, wywołaj następujące polecenie:

\n\n
$ od -c ../.gitignore\n
\n\n

Oczywiście zamiast pliku .gitignore wpisz ścieżkę do pliku jaki chcesz \nprzeczytać. Narzędzie wyświetli KAŻDY ZNAK osobno (będą spore przerwy \nmiędzy znakami).

\n\n

Wynik wywołania powyższego polecania załączam poniżej:

\n\n
0000000    n   o   d   e   _   m   o   d   u   l   e   s   /  \\n   n   p\n0000020    m   -   d   e   b   u   g   .   l   o   g  \\n\n0000034\n
\n\n

Jak widać w listingu, znaki specjalne zakończenia linii zostały zastąpione na\nreprezentację czytelniejszą dla użytkownika, czyli \\n.

\n\n

Różnica w Git-cie

\n\n

Różne znaki końca linii powodują - poza niespójnością - też inne problemy.\nOsobiście uważam, że największy problem polega na wyświetlaniu różnic w \nsystemach kontroli wersji, które źle skonfigurowane potrafią wyświetlić, że \nlinijka została zmieniona, podczas gdy nie została.

\n\n

Wszystko to się dzieje, z tego powodu, że pliki w systemie kontroli wersji
\nzapisane są w formacie LF. Edytory na systemie Windows, \npodczas dowolnej zmiany automatycznie konwertują znaki końca linii na CRLF.

\n\n

…czyli de facto nastąpiła pewna zmiana, dlatego też system kontroli wersji \nwyświetlił rożnicę.

\n\n

Ignorowanie zakończenia lini w Git

\n\n

Jak się ustrzec wyżej opisanego problemu? Bardzo łatwo!

\n\n

Najpopularniejszy system kontroli wersji posiada opcję konfiguracyjną \nodnośnie znaków końca linii: core.autocrlf.

\n\n\n\n
\n

Uwaga

\n

Po ustawieniu tej opcji na systemie macOS (domyślny jest LF) a następnie \nedycji dowolnego pliku, przed wyświetleniem różnicy otrzymamy komunikat:

\n 
\nwarning: LF will be replaced by CRLF in README.md.\nThe file will have its original line endings in your working directory.\n
\n

Spowodowane jest to konwersją znaku końca linii z LF na CRLF.

\n
\n\n\n\n
\n\n

Istnieją dwie drogi normalizacji zakończenia linii:

\n\n\n\n

Polecana przeze mnie ścieżka to oczywiście ścieżka “systemowa”. Nie ma \nsensu konfigurować per projekt. Nie widzę żadnych profitów z tego powodu, a \ntylko minus, że w każdym projekcie musi znaleźć się plik .gitattributes.

\n\n
\n\n

Istnieją jeszcze inne opcje konfiguracyjne:

\n\n
$ git config --global core.eol lf|crlf|native\n
\n\n
$ git config --global core.safecrlf true|false|warn\n
\n\n

Nie będę się tutaj nad nimi rozwodził. Chętnych zapraszam do manuala;

\n\n
$ git help config\n
\n\n

•

\n\n

Normalizacja za pomocą odpowiednich narzędzi

\n\n

Czy istnieję możliwość konwersji między CRLF a LF? Oczywiście!\nPoniżej przedstawiam jak poradzić sobie z konwersją między tymi końcami linii\nna dwóch systemach: macOS oraz Linux.

\n\n

macOS

\n\n

Poniższe polecenia będą dostępne na systemie macOS po instalacji \nodpowiedniego narzędzia za pomocą polecenia: brew install dos2unix albo \njeśli ktoś korzysta z innego managera paczek port install dos2unix.

\n\n

Z CRLF na LF

\n\n

Konwersja z trybu Windows na tryb unix-owy:

\n\n
$ dos2unix README.md\n
\n\n

Z LF na CRLF

\n\n

Konwersja z trybu unix-owego na tryb Windows:

\n\n
$ unix2dos README.md\n
\n\n

Linux

\n\n

Na systemie Linux aby skonwertować plik można wykorzystać narzędzie sed:

\n\n

Z LF na CRLF

\n\n
$ sed -e 's/$/\\r/' inputfile > outputfile\n
\n\n

Z CRLF na LF

\n\n
$ sed -e 's/\\r$//' inputfile > outputfile\n
\n\n

Więcej przykładów jak skonwertować pliki znajduje się tutaj

\n\n

•

\n\n

Historia end-of-line

\n\n

W archiwum RFC opisana jest \nhistoria ustalania znaku zakończenia linii. Jeśli chciałbyś poczytać to wejdź\ntutaj.

2017-05-12 23:50:06 eol-w-prostych-slowach ckbw97zyw0007i3umdszu2ola 2017-05-12 23:50:06 2017-05-12 23:50:06 cj2qo76lk00j2i3um6mm6fmfz DeviceLightEvent w ogóle i w szczególe https://piecioshka.pl/blog/2017/05/15/device-light-event.html

Pierwsze moje zetknięcie z tym API wywołało u mnie szok! Mogę korzystać z \nkamery w sposób niezauważalny dla użytkownika! Jak się później okazało nie\nkorzystam z kamery, a jedynie z czujnika, który jest zamontowany obok kamery.

\n\n

Kamień z serca. Odetchnąłem z ulgą i pozbierałem zęby z podłogi.

\n\n
\n Baner reklamujący artykuł\n
\n\n

Film

\n\n

Nie chce Ci się czytać? Spoko. Rozumiem to. Specjalnie dla Ciebie nagrałem film,\nna którym opowiadam przez niecałe 5 minut, jak dzisiejszy feature może \npomóc Ci w tworzeniu lepszego User Experience w Twoich aplikacjach webowych!

\n\n\n\n

Co to jest DeviceLightEvent?

\n\n

Kilka lat temu pojawiła się specyfikacja - Ambient Light Events, która \nopisała jak może polegać komunikacja z czujnikiem natężenia światła, który \nznajduje się obok kamery w laptopach.

\n\n
\n

Pytanie do publiczności

\n

Zastanawiam się, czy event będzie działał na komputerach PC (jednostki \ncentralne). Jeśli czytelniku korzystasz z takiego sprzętu i posiadasz \nprzeglądarkę wymienioną w sekcji wsparcie, to daj znać w \nkomentarzu, czy Twoja zewnętrzna kamera posiada taki czujnik generując tym \nsamym omawiany event.

\n
\n\n

Przykładowy kod

\n\n
window.addEventListener('devicelight', (evt) => {\n    console.log(evt.value);\n});\n
\n\n

Komunikacja wygląda następująco.

\n\n
    \n
  1. Zapisujesz się na event devicelight na obiekcie window.
    2. \n
  2. Czekasz aż zmienić się poziom natężenie światła - warto zakryć kamerę \n palcem, albo poświecić w niego latarką z telefonu.
    3. \n
  3. W handlerze eventu dostaniesz payload będący obiektem zdarzenia \n DeviceLightEvent, który będzie posiadał wartość value, pod którym \n będzie kryła się liczba luksów.
    4. \n
\n\n

Bracie, a co to jest ten lukx (lux)?

\n\n

W układzie SI, czyli “Międzynarodowym Układzie Jednostek Miar”, znajduje się \ndefinicja luksa, który to jest jednostką natężenia oświetlenia.

\n\n

Nazwa “luks” pochodzi od łacińskiego słowa “lux” oznaczającego “światło”.

\n\n

Jak ja bym obsługiwał dane, które dostanę ze zdarzenia

\n\n\n\n

Przykłady z życia wzięte

\n\n

Ile lux-ów ma światło na co dzień?

\n\n\n\n

Dane pobrane z Wikipedia.

\n\n

Wsparcie

\n\n

Korzystając z serwisu caniuse.com można dowiedzieć się, \nże Ambient Light API wspierane jest przez następujące przeglądarki:

\n\n\n\n

Jak widać, jest to technologia, której dziś możemy zobaczyć swego rodzaju \nembrion. Malutkie wsparcie nie pozwala cieszyć się z tego feature-a.\nSzczególnie, kiedy najpopularniejszy browser, tj. Google Chrome, nie \nzaimplementował specyfikacji czujnika światła.

\n\n

Po co mi to?

\n\n

Ten event otwiera drogę na kolejne doznania użytkownika polepszające odbiór \nTwojej strony internetowej. Jeśli layout Twojej strony jest jasny (podobnie \njak mój), to użytkownicy nocni dostaną “po gałach”, kiedy będą przeglądać \ninternet o tej porze dnia.

\n\n

Myślę, że świetnym podejściem jest wygaszenie jaskrawego białego i \nwykorzystania innych kolorów ze skali szarości, aby wyeliminować ten problem,\nże gdy w nocy wejdzie się na YouTube-a to nagle cały pokój się świeci.

\n\n

Demo

\n\n
\n

Instrukcja

\n

Jak możesz zobaczyć na samym dole strony w sekcji “Ostatnie projekty”,\npojawił się nowy projekt, który posiada obsługę zdarzenia devicelight.

\n
\n\n

Jeśli jesteś użytkownikiem korzystającym z dowolnej przeglądarki opisanej w \nsekcji wsparcie to zapraszam Cie do skorzystania ze specjalnie \nprzygotowanej aplikacji, która na podstawie odczytów z czujnika \nnatężenia światła zmienia kolory teksty i tła.

2017-05-15 21:57:29 devicelightevent-w-ogole-i-w-szczegole ckbw97zyw0007i3umdszu2ola 2017-05-15 21:57:29 2017-05-15 21:57:29 cj2ti58ig00jdi3umhlf30h2l WarsawJS Meetup #30 https://piecioshka.pl/blog/2017/05/17/warsawjs-meetup-30.html

Zgodnie z opisem w tym poście, dziś kolejny wpis, na temat spotkania \nwarszawskich programistów JavaScript, czyli WarsawJS Meetup!

\n\n

Tutaj znajdziesz link do profilu wydarzenia na Meetup, gdzie możesz \ndowiedzieć się więcej szczegółów na temat organizacji. Warto również zapoznać\nsię komentarzami, w których uczestnicy spotkania często prowadzą interesujące \ndyskusje.

\n\n
\n \n WarsawJS\n \n
\n\n

Invitation

\n\n

Kolejna zapowiedź nagrywana w domu na greenboxie. Zastosowałem się do uwagi\nktórą dostałem po poprzedniej zapowiedzi, aby czasami zejść z kadru i pokazać\njakąś przebitkę. Faktycznie, kiedy ciągle widoczna jest “gadająca głowa”, to \nfilm może okazać się nudny.

\n\n

Jak Ci się podoba montaż? Jest akceptowalnie, prawda? :smiley:

\n\n\n\n
\n\n

Talk #1: Pogromcy mitów: HTTP/2 i wydajność stron WWW [PL] Piotr Stapp

\n\n

Piotr, jako prelegent dał mi niesamowitą zagwozdkę. Jako pierwsza osoba, \nktóra wyszła na scenę w ogóle się nie stresował. Absolutnie nic nie było po \nnim widać, że obserwuje go tyle ludzi w sali oraz że jest nagrywany a przekaz\njest transmitowany na cały świat.

\n\n

Odnośnie części merytorycznej, mogę powiedzieć, że prelekcja jest obowiązkowa\ndla wszystkich developerów sieciowych. Nieważne kim jesteś front-endowcem czy \nback-endowcem, powinieneś obejrzeć co czeka nas w przyszłości (w sumie to już\nco jest obecnie standardem) tj. HTTP/2. Technologia Server Pushy znacznie \nprzyspiesza ładowanie strony, co nakłada się na odbiór prze użytkownika.

\n\n\n\n

•

\n\n

Talk #2: Firebase - store and sync data with NoSQL cloud database [PL] Robert Gurgul

\n\n

Jedna z krótszych prelekcji jakie miały miejsce podczas WarsawJS Meetup.\nRobert w kilkanaście minut przedstawił swój projekt, który stworzył w \npołączeniu z bazą danych Firebase.

\n\n

Ze swojej strony polecam wykorzystanie Firebase podczas hackathonów, albo \ninnych tego typu imprez, gdzie mocno liczy się czas realizacji.

\n\n\n\n

•

\n\n

Talk #3: Retro JS talk: modern browser communications [EN] Robert Kawecki

\n\n

Podczas prelekcji mogliśmy się dowiedzieć, że akronim PHP bierze się od \nsłów PHP HyperText Preprocesor. Mamy tutaj do czynienia z rekursywnym skrótem.\nWskazuje to jasno, że kiedy PHP oznaczało co innego. Wiecie co?

\n\n
\n

PHP - Personal Home Page

\n
\n\n

Podczas prelekcji mogliśmy dowiedzieć się o kolejnych etapach \nnawiązywania komunikacji między klientem a serwerem w świecie webowym.

\n\n\n\n

•

\n\n

Sponsorzy spotkania

\n\n

Szukasz pracy? Napisz do następujących firm. One ciągle prowadzą rekrutację \nprogramistów, różnych języków programowania w różnym stopniu.

\n\n\n\n

•

\n\n

Podsumowanie

\n\n

Jako organizator WarsawJS Meetup, serdecznie dziękuję wszystkim za przybycie.

\n\n

Jako blogger serdecznie dziękuję za przeczytanie tego wpisu.
\nZa 2 dni wracamy do regularnego pogłębiania naszej wiedzy merytorycznej.

2017-05-17 21:31:19 warsawjs-meetup-30 ckbw97zyw0007i3umdszu2ola 2017-05-17 21:31:19 2017-05-17 21:31:19 -cj2vjxfyw00jgi3um289508tp Dlaczego User-Agent zaczyna się od "Mozilla 5.0..."? https://piecioshka.pl/blog/2017/05/19/dlaczego-user-agent-zaczyna-sie-od-slowa-mozilla.html

Czy zastanawiałeś się kiedyś, dlaczego User-Agent w każdej przeglądarce \nrozpoczyna się od Mozilla/5.0 ...? Jaki związek ma program \nInternet Explorer z Firefoxem? Może ktoś tutaj współpracuje? Zaraz \nwszystkiego się dowiesz.

\n\n
\n Baner reklamujący artykuł\n
\n\n

Historia

\n\n

Jeśli znasz historię języka JavaScript, to na pewno kojarzysz taką nazwę\njak Mosaic. Jeśli nie, to zapraszam Cię do zapoznania się z nią w \nartykule, którego napisałem kilka tygodni temu.

\n\n

W skrócie.

\n\n

W 1993 roku została opublikowana pierwsza na rynku przeglądarka \nwyświetlająca obrazki. Aplikacja nosiła nazwę NCSA Mosaic\ni została opublikowana przez bardzo ważny organ, który mocno przyczynił się \ndo rozwoju IT, czyli National Center for Supercomputing Applications (NCSA).

\n\n

Jej User-Agent zaczynał się od “Mosaic/0.9”.

\n\n\n\n

Rok później, tj. w 1994, powstała nowa przeglądarka, której nazwa kodowa\nto “Mozilla”, czyli “Mosaic Killer Godzilla”. Nazwa została wymyślona\nprzez jednego z programistów zespołu projektowego przeglądarki, Jamiego \nZawińskiego, który był fanem Godzilli.

\n\n
\n\n

O tym wszystkim informuje w komentarzu na portalu Quora, jeden z \nzałożycieli firmy Netscape - Lou Montulli. Lou był odpowiedzialny za\nmulti-platformowy kod sieciowy i to on zmienić User-Agent z “Mosaic” \nna “Mozilla”.

\n\n
\n

Nowa przeglądarka miała za zadanie zdeklasować obecnego lidera i podbić rynek\nprzeglądarek.

\n
\n\n

Rok później weszła ona na czołową pozycję wśród programów, dzięki którym \nmożna serfować po internecie.

\n\n

Po drodze nazwa została zmieniona na Netscape Navigator, aby \nuniknąć podobieństwa do NCSA Mosaic. I słusznie. Lepiej rozwiać \nwszelkie wątpliwości, co by użytkownicy nie byli zmieszani.

\n\n
\n

Ważna informacja

\n

Nazwa programu się zmieniała, jednak User-Agent pozostał.

\n
\n\n

Z tego powodu User-Agent pierwszej publicznej wersji Netscape \nNavigator zaczynał się od “Mozilla/2.02”.

\n\n

Dlaczego prefix się nie zmienił?

\n\n

Gdy rynek został podbity przez jedną przeglądarkę, a Ty chcesz zrobić nową, \nto masz dwie drogi w zdefiniowaniu User-Agenta:

\n\n
    \n
  1. stworzyć zupełnie nowy format, tworząc tym samym zamieszanie
    2. \n
  2. albo skopiować od aktualnego lidera i lekko zmodyfikować “pod siebie”
    3. \n
\n\n

Wszyscy kolejni producenci nowych aplikacji do przeglądania internetu \nstwierdzili, że nie ma sensu tworzyć zupełnie nowej składni i tak \nwykorzystywali UA obecnie najpopularniejszej przeglądarki.

\n\n

Wykorzystanie wówczas najpopularniejszego User-Agenta, niosło za sobą pewną \nkorzyść. Właściciele stron serwowali dla nie-Mozillowych klientów okrojoną \nwersję strony. To jest kolejny argument, dla którego lepiej podszyć się pod \nnajpopularniejszą przeglądarkę i prezentować użytkownikom normalną wersję.

\n\n

Rozwiązanie Microsoftu

\n\n

Niektóre przeglądarki np. Internet Explorer dodawały do User-Agenta \nwyraz “compatible”, po to, aby zasygnalizować, że przeglądarka jest \nkompatybilna z obecnie najlepszą, ale nią de facto nie jest.

\n\n

Ciekawy pomysł :smiley:

\n\n

I tak pierwsza publiczna wersja Internet Explorer 3 uruchomiona na Windows 95,\nmiała User-Agent-a w postaci: Mozilla/2.0 (compatible; MSIE 3.02; Windows 95).

\n\n
\n

Ciekawostka

\n

Internet Explorer w wersji 4.5 były opublikowany tylko na Mac-i.
\nJego User-Agent to: Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC).

\n
\n\n

Ale dlaczego akurat “5.0”?

\n\n

Po drodze nazwa przeglądarki Netscape Navigator zmieniła się \ndwukrotnie. Na początku Netscape Communicator, a potem na \npo prostu Netscape.

\n\n

Firma Netscape Communications, autorzy wtenczas najpopularniejszej \nprzeglądarki, stworzyła silnik do renderowania stron o nazwie Gecko.

\n\n

Zaimplementowali ten silnik do kolejnej wersji przeglądarki w wersji 5.0.\nSilnik ewoluował, przeglądarka też, jednak ta pierwsza liczba w User-Agent \njuż nie.

\n\n

Następnie nazwa przeglądarki została zmieniona na Firefox. \nWersjonowanie przeglądarki było zapisywane jako osobna (dodatkowa) liczba.

\n\n

Przykład

\n\n

Mozilla/5.0 (Windows NT 5.1; rv:15.0) Gecko/20100101 Firefox/15.0.1.

\n\n

W tym konkretnym przypadku, wersja przeglądarki to “15.0.1”.

\n\n

Nie ma sensu zmieniać teraz budowy User-Agenta, ponieważ trzeba by było \nzaktualizować cały software sieciowy, który analizuje ten string.\nDlatego też prefix “Mozilla/5.0” zostanie już z nami na zawsze.

\n\n

•

\n\n

Bibliografia

\n\n

Więcej na temat historii User-Agentów możecie przeczytać na \nblogu Nicolasa Zakasa. Polecam również poczytać historię User-Agent–w \nprzeglądarki Firefox. Kolejną interesującą lekturą jest historii \nUser-Agentów przedstawiona w zabawny sposób przez jednego z nas - \nprogramistów webowych.

2017-05-19 07:56:47 dlaczego-user-agent-zaczyna-sie-od-mozilla-50 ckbw97zyw0007i3umdszu2ola 2017-05-19 07:56:47 2017-05-19 07:56:47 -cj2z867bc00jwi3umarws09ox Jak wyświetlić liczbę osób lajkujących nasz fanpage? https://piecioshka.pl/blog/2017/05/21/jak-wyswietlic-liczbe-osob-lajkujacych-nasz-fanpage.html

Dziś, podczas kolejnych warsztatów z programowania w JavaScript \norganizacji WarsawJS, wpadłem na pomysł, aby wyświetlać podczas \ncałego dnia liczbę lajków, którymi obdarzony jest profil organizacji WarsawJS.

\n\n
\n

Obecnie jest blisko okrągłej liczby 1500 lajków. Może podczas warsztatów \nmagiczna liczba zostanie przekroczona?

\n
\n\n
\n 1493, 1494, 1495, 1496, 1497\n
\n\n

Moim zdaniem pomysł jest interesujący. Jeśli chcesz się dowiedzieć jak \nposzła mi implementacja takiego aplikacji, to zapraszam do lektury :books:

\n\n

•

\n\n

Misja

\n\n

Cel był prosty:

\n\n

Zaprezentować w formie dynamicznej liczbę lajków fanpage-a WarsawJS.

\n\n

Dodam, że aby zrealizować takie zadanie, trzeba być administratorem \nfanpage-a, bo inaczej nie zna się parametru appId oraz appSecret.

\n\n

Co musiałem zrobić, aby osiągnąć cel?

\n\n\n\n
(function (d, s, id) {\n  var js, fjs = d.getElementsByTagName(s)[0];\n  if (d.getElementById(id)) {\n    return;\n  }\n  js = d.createElement(s);\n  js.id = id;\n  js.src = "//connect.facebook.net/en_US/sdk.js";\n  // js.src = "//connect.facebook.net/en_US/sdk/debug.js";\n  fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));\n
\n\n\n\n
const appId = 'XXX';\nconst appSecret = 'XXX';\nconst getOAuthAccessTokenURI = `https://graph.facebook.com/oauth/access_token?client_id=${appId}&client_secret=${appSecret}&grant_type=client_credentials&debug=all`;\n\nconst pageId = 'warsawjs';\nconst getEngagementURI = `https://graph.facebook.com/${pageId}/?fields=engagement&debug=all`;\n
\n\n\n\n
window.fbAsyncInit = function () {\n  FB.init({\n    appId: appId,\n    autoLogAppEvents: true,\n    xfbml: true,\n    version: 'v2.9'\n  });\n}\n
\n\n\n\n
window.fbAsyncInit = function () {\n  // ...\n  Promise.resolve()\n    .then(() => {\n      return window.fetch(getOAuthAccessTokenURI);\n    })\n    .then((response) => {\n        return response.json();\n    })\n    .catch((err) => {\n      console.error(err);\n    });\n}\n
\n\n\n\n
/**\n * Funkcja, do komunikacji z Facebook API.\n * \n * @author Piotr Kowalski\n * @param {string} url\n * @param {Object} opts\n */\nfunction fetchFacebookService(url, opts = {}) {\n  return new Promise((resolve, reject) => {\n    FB.api(url, opts, (response) => {\n      if (response.error) {\n        return void reject(response.error);\n      }\n      resolve(response);\n    });\n  });\n}\n\nwindow.fbAsyncInit = () => {\n  // ...\n  .then((response) => {\n    return fetchFacebookService(getEngagementURI, response)\n  })\n  .then((response) => {\n    return response.engagement.count;\n  })\n  .then((likes) => {\n    console.log(likes); // 1497 # mamy to!!!\n  })\n  // ...\n}\n
\n\n\n\n
\n

Wskazówki

\n
    \n
  • Czytaj Getting Started od razu!
    • \n
  • Nie sugeruj się odpowiedziami ludzi na forum odnośnie tego jak coś zrobić z \nFacebook API. Informacje te są zwykle przestarzałe.
    • \n
  • Większość usług wymyga podania Access Tokenu.
    • \n
\n
\n\n

Developerskie usprawnienia

\n\n
    \n
  1. \n

    Flaga w URLach, zwiększa delikatnie możliwości programistyczne debug=all

    \n\n

    Co robi ten parametr? Nie wiem, ale jest developerski to go używam. \n Dajcie znać w komentarzach po co on jest. Osobiście takiej informacji nie \n znalazłem.

    \n
    2. \n
  2. \n

    Dołączanie głównego pliku w procesie osadzenia Facebook API:
    \n js.src = "//connect.facebook.net/en_US/sdk/debug.js";

    \n\n

    Od razu w DevToolsach widzę jak działa Facebook API. Super!

    \n
    3. \n
\n\n

Pomysły

\n\n

Spróbuję zrobić paczkę w npm-ie, która by potrzebowała credientiali,\na zwracała liczbę lajków strony, której jest się właścicielem :star2:

2017-05-21 21:38:45 jak-wyswietlic-liczbe-osob-lajkujacych-nasz-fanpage ckbw97zyw0007i3umdszu2ola 2017-05-21 21:38:45 2017-05-21 21:38:45 -cj323qfd400k4i3umazx092ce Zobacz, jak "overflow-wrap" może Cię uratować! https://piecioshka.pl/blog/2017/05/23/zobacz-jak-overflow-wrap-moze-cie-uratowac.html

Tekst wychodzi poza kontener? Nie martw się. Jest na to lekarstwo. Znajduje się\nono w apteczce w napisem “CSS3”. Poznajmy dziś czym jest overflow-wrap.

\n\n
\n

Kiedyś (w CSS2) reguła ta nazywała się word-wrap, jednak przyszły czasy \nnowej specyfikacji i powstał pomysł zmiany nazwy. Czy słusznie?

\n
\n\n
\n Baner reklamujący artykuł\n
\n\n

Jak działa reguła “overflow-wrap”?

\n\n

Najlepiej będzie jak sam zobaczysz.

\n\n

See the Pen overflow-wrap/word-wrap demo by Louis Lazaris (@impressivewebs) on CodePen.

\n\n\n

Jakie są jej możliwości?

\n\n

Występują dwie opcje:

\n\n\n\n
overflow-wrap: normal; /* domyślnie */\n
\n\n\n\n
overflow-wrap: break-word;\n
\n\n

Więcej do przeczytania na stronie.

\n\n
\n

Wskazówka

\n

Opisywaną regułę świetnie używa się z inną, tj. z hyphens: auto;, która \ntroszczy się o to, aby po zawinięciu wiersza dostawić znak myślnika, \noznaczającego przeniesienie wyrazu. Efekt, którego zostaliśmy nauczeni \nw podstawówce jest zrealizowany!

\n
\n\n

Czy mogę używać?

\n\n

Wsparcie jest szerokie. Można powiedzieć, że każda przeglądarka wspiera \nłamanie wiersza, bo jeśli nie działa overflow-wrap: break-word (może używamy \nwersji przeglądarki z poprzedniej epoki), to zawsze możemy użyć\nword-wrap: break-word i uniknąć ewentualnych nieprzyjemności.

\n\n

Na potwierdzenie wkleję tutaj oryginalny tekst ze specyfikacji

\n\n
\n

For legacy reasons, UAs must treat word-wrap as an alternate name for the \noverflow-wrap property, as if it were a shorthand of overflow-wrap.

\n
\n\n

Specyfikacja

\n\n

Jeśli chciałbyś poczytać specyfikację tej reguły, to jest ona opisana w
\nstandardzie CSS3. Btw. wiesz, że to ostatnia wersja CSS?

\n\n

Nie będzie CSS4.

\n\n

Konsorcjum W3C przyjęło zasadę, że feature-y w CSS będą rozwijały się \nsamodzielnie. Tym samym, nie powstanie nowa wersja CSS, która mogłaby je \nagregować.

\n\n

W sumie, to ciekawy zabieg. Interesujące jest to, że ścieżka rozwoju CSS jest\ntaka jak przed chwilą opisałem, a ścieżka rozwoju JavaScript taka, że co roku\nmusi powstać nowa wersja.

\n\n

Ciekawe co z HTMLem? :smiley: (Na te pytanie odpowiedział Commander
\nw komentarzu pod tym artykułem. Thanks man!)

\n\n

Performance

\n\n

Jeśli martwisz się wydajnością, bo może chcesz ustawić tą regułę w locie, to \nmasz problem. Generuje ona wszystkie 3 zachowania:

\n\n\n\n

Więcej na ten temat na stronie CSS Triggers autorstwa Paula Lewisa.

\n\n

Historia

\n\n

Tym razem odpuszczam historię na temat tej reguły. Jednak, jeśli jesteś \nzainteresowany to zapraszam na tą stronę, gdzie możesz poczytać na ten \ntemat.

2017-05-23 21:57:49 zobacz-jak-overflow-wrap-moze-cie-uratowac ckbw97zyw0007i3umdszu2ola 2017-05-23 21:57:49 2017-05-23 21:57:49 -cj34yjik800kgi3um7dju0s2i Konferencja: Code Europe 2017 https://piecioshka.pl/blog/2017/05/25/konferencja-code-europe-2017.html

Sezon na konferencje czas rozpocząć! Chciałem Ci dziś przedstawić moje \nwrażenia z pierwszej (w tym roku) konferencji w której uczestniczyłem.

\n\n

Mowa tutaj o konferencji wymienionej w tytule, czyli Code Europe ‘17.\nNa początku zaznaczę, że post nie jest sponsorowany, aby nie było \nwątpliwości. Na blogu przekazuję moją i tylko moją opinię. Cheers!

\n\n
\n Baner reklamujący artykuł\n\n
\n Oficjalne logo konferencji Code Europe 2017\n
\n
\n\n

Z różnych źródeł dowiedziałem się, że konferencja miała miejsce już w tym roku\nw dwóch innych miastach: Kraków (26 kwietnia, ICE Kraków) i Wrocław (23 maja,\nHala Stulecia).

\n\n

Konferencja Code Europe, ma swoją drugą edycję, tzw. wiosenną. W zeszłym roku \nodbyła się pierwsza edycja. I była to edycja jesienna.

\n\n\n\n

Prelekcje na których byłem obecny

\n\n

Jak każda konferencja i ta chwali się, że posiada NAJLEPSZYCH prelegentów\ni że jest NAJWIĘKSZA i w ogóle “the best”. Oczywiście, nie są to cechy w \nżaden sposób mierzalne, więc każda posiada prawo aby tak pisać :smiley:

\n\n

•

\n\n

Poniżej przedstawiam Ci moje komentarze w sprawie co poniektórych prelekcji\nna których dane mi było uczestniczyć. Ogólnie podczas jednego dnia prelekcji \nodbyło się prawie 50 prezentacji.

\n\n

Jak rozwiązać tak dużą liczbę speech-y w tak krótkim czasie? Zrównoleglenie.

\n\n

Tutaj pojawia się problem, bo co jeśli pochodzisz z takiego środowiska,\nże interesują Cię >2 prelekcje, a Ty możesz być obecny tylko na jednej?

\n\n

1. Going offline with append-only logs [EN] Mathias Buus

\n\n

Pierwsza prelekcja. Byłem spóźniony i niewiele zrozumiałem. Przepraszam!

\n\n

2. Programming healthcare well [EN] Harold Thimbleby

\n\n

Prelekcja, która nie podnosiła na duchu. Podczas niej dowiedziałem się,\nże bardzo często przyczyną śmierci pacjentów są bugi w oprogramowaniu \nzainstalowanym na specjalistycznych urządzeniach medycznych.

\n\n

Bardzo często winą za te bugi obarczane są pielęgniarki. \nZnany jest przypadek, kiedy pielęgniarka została wyrzucona z pracy z powodu \nśmierci pacjenta. Nie wytrzymała takiego napięcia i popełniła samobójstwo.

\n\n

Smutne.

\n\n

3. Ramda JS - First Step [PL] Karol Rogowski

\n\n

Karol opowiadał o programowaniu funkcyjnym na prostych przykładach, gdzie \ntaki styl programowania ma jakiś sens.

\n\n

Sam język JavaScript idealnie nadaje się do pisania w stylu funkcyjnym, ze \nwzględu na występowanie tzw. domknięć. Co to jest domknięcie? O tym będzie \nosobny wpis na blogu. Kiedy? za kilka tygodni.

\n\n

Prelegent wykorzystywał bibliotekę “ramba” do tego, aby móc składać funkcje w \nprosty sposób, aby zachwycić publikę.

\n\n\n\n

4. The Things Git Can Do (that none of the GUIs have ever told you about) [EN] Enrico Campidoglio

\n\n

Uwielbiam Gita :heart: Napisałem już o nim kilka artykułów. Moją \npierwszą w życiu wygłoszoną prelekcją był speech o tym właśnie narzędziu.

\n\n

Enrico pokazał niskopoziomowe polecenia jakie występują w Gicie. Świetna \nprelekcja!

\n\n

5. Introduction to frontendless: UI as a service [PL] Tomasz Skowroński

\n\n

Tomasz, nasz warszawski speaker, który na podstawie komunikatora Slack \nopowiadał o plusach i minusach rozwiązań wypracowanych w tym komunikatorze.

\n\n

Bardzo konkretna prelekcja. Samo mięcho. IYKWIM.

\n\n

6. PWAssemble—Instant and Customized Progressive Web App Demos, Because Only Seeing is Believing [EN] Thomas Steiner

\n\n

Jedna z moich ulubionych prelekcji na tegorocznej edycji Code Europe, \nbyła o Progressive Web App.

\n\n

Tematyka dla mnie dość mocno znana. Opisywałem na swoim blogu moją przygodę \nzwiązaną z PWA. Artykuł dostępny tutaj.

\n\n\n\n

Chciałem pomóc zwiększyć font, a okazało się że niektórzy mnie nagrywają.

\n\n
\n

Człowiek w dzisiejszych czasach, nie może komuś pomóc, bo już zostanie \nnagrany. Dzięki @ckyambitny.

\n
\n\n\n\n

7. Design Systems Engineering: Scaling User Interfaces [EN] Christoph Reinartz

\n\n

Bardzo interesująca prelekcja na temat strony internetowej TRIVAGO. Kris \nopisywał kroki jakie jego zespół wykonał, do tego, aby wyjść z roku 2000 do 2017.

\n\n

Podsumowanie

\n\n

Jak zawsze jestem pozytywnie nastawiony do wszelkiego rodzaju wydarzeń, \npodczas których mogę poszerzyć swoją wiedzę o front-endzie oraz móc porozmawiać \nz innymi fanatykami języka JS.

\n\n

Podczas konferencji ekipa WarsawJS wysłała swojego przedstawiciela, aby \ngodnie reprezentował organizację.

\n\n\n\n

•

\n\n

After

\n\n

Przyjęło się, że po konferencji organizowany jest “after”. Dla tych, którzy nie\nwiedzą co to jest, to mówię, że to takie nieformalne spotkanie przy \n“lemoniadzie” już poza venue konferencyjnym, tylko gdzieś indziej, gdzie będą\nodpowiednie warunki do biesiadowania.

\n\n

Ten “after” był dla mnie pod pewnym względem niesamowity. Poznałem na żywo \nlegendę polskiej sceny blogerskiej - Piotra Nalepę, który przyjechał\nz Katowic do stolicy na konferencję FrontTrends 2017 - odbywała się ona \nw tym samym czasie co omawiana dziś przeze mnie “Code Europe 2017”.

2017-05-25 21:55:47 konferencja-code-europe-2017 ckbw97zyw0007i3umdszu2ola 2017-05-25 21:55:47 2017-05-25 21:55:47 -cj37jvom000kki3um6mzxh89g WarsawJS Meetup #31 https://piecioshka.pl/blog/2017/05/27/warsawjs-meetup-31.html

Rozpoczynamy kolejną dziesiątkę spotkań dla programistów języka JavaScript.\nTym razem mieliśmy 2 prelekcje o React + Redux a trzecim tematem były \nmikroserwisy. Zapraszam do zapoznania się z moimi przemyśleniami na temat \nprelekcji i całego wydarzenia.

\n\n
\n \n WarsawJS\n \n
\n\n

Invitation

\n\n

Tym razem nagrywaliśmy zapowiedź w miejscu, gdzie przeprowadzaliśmy warsztaty.

\n\n
\n

Informacja

\n

Przypominam, że organizacja WarsawJS od grudnia 2016 uruchomiła nową \ninicjatywę, tj. WarsawJS Workshop, czyli comiesięczne szkolenia \npraktyczne z języka JavaScript (wliczając biblioteki i frameworki).

\n
\n\n

Niestety, nie byłem w najlepszej kondycji psychofizycznej tego dnia i zabrakło \nmnie na filmie. Zamiast mnie pojawiła się prelegentka - Martyna, która była \ntrzecią dziewczyną speakerką na warszawskiej scenie.

\n\n

Zapraszam do oglądania!

\n\n\n\n

Po obejrzeniu zapowiedzi, zapraszam Cię do zapoznania się z moimi \nprzemyśleniami na temat prelekcji, które miały miejsce podczas tego wydarzenia.

\n\n
\n\n

Talk #1: React na start - informacje w pigułce dla zainteresowanych rozpoczęciem zabawy z ReactJS [PL] Martyna Nowocień

\n\n

Prelekcja była skierowana dla osób, które chcą rozpocząć naukę biblioteki \nReact.js. Martyna przekazała kilka wskazówek:

\n\n\n\n

Angular (v4.x) jest szybszy od React.js zwłaszcza na urządzeniach mobilnych,\nale Angular.js (v1.x) już jest wolniejszy podczas renderowania dużej ilości \nelementów.

\n\n

Więcej ofert pracy jest na developerów ze znajomością Angulara niż \nReact.js
Martyna podkreśliła, że około 2 / 3 wszystkich ofert to Angular.

\n\n

Aby dowiedzieć się najnowszych rzeczach warto obserwować profil twitterowy Dana\nAbramova.

\n\n

Prelegentka poleca Code Cartoon, w celu zapoznania się z architekturą \nReacta i Reduxa.

\n\n
\n

Moim zdaniem

\n

Świetna prelekcja. Oby częściej zdarzały się takie z uśmiechem na twarzy \nspeakera!

\n
\n\n\n\n

•

\n\n

Talk #2: Redux - a practical example [EN] Illarion Koperski

\n\n

Zalecenia wynikające z prelekcji

\n\n\n\n
\n

Prelekcja niezrozumiała dla developerów bez doświadczenia. Jeśli jednak \nposiadasz minimalne obycie z Reduxem to idealnie wpasowujesz się w \ntarget prelekcji.

\n
\n\n

Illarion polecał rozszerzenie do przeglądarki Google Chrome - Redux \nDevTools.

\n\n
\n

Redux + RsJS = Epics
\nDon’t use Sagas, use Epics.

\n
\n\n\n\n

•

\n\n

Talk #3: Microservices on the frontend [EN] Tomasz Wiszniewski

\n\n

Tomasz przedstawił aplikację present.now.sh, która jest zegarkiem \nodmierzającym czas. W miarę upływu czasu kolor tła się aktualizuje.

\n\n

Aplikacja jest napisana z wykorzystaniem WebComponent-ów.

\n\n\n\n

•

\n\n

Sponsorzy spotkania

\n\n 2017-05-27 17:28:39 warsawjs-meetup-31 ckbw97zyw0007i3umdszu2ola 2017-05-27 17:28:39 2017-05-27 17:28:39 cj3ajo5dc00kvi3umhhdng18z 10 powodów dla których warto chodzić na meetupy https://piecioshka.pl/blog/2017/05/29/10-powodow-dla-ktorych-warto-chodzic-na-meetup-y.html

Dziś przedstawię Wam kilka argumentów (z mojej perspektywy) stojących po \nstronie dlaczego warto chodzić ne meetupy. Jeśli nie chce Ci się czytać, to \nzapraszam Cię na 5-minutowy film:

\n\n\n\n

Co to jest meetup?

\n\n

To po prostu spotkanie osób zainteresowanych danym tematem. Bardzo często \norganizowane są takie spotkania dla osób których łączy wspólna pasja.\nPrzykładem niech będzie ten sam język programowania.

\n\n

ZWykle meetupy, organizowane są co miesiąc. Społeczność tego potrzebuje.

\n\n

Wydarzenie takie składa się z kilku prelekcji na scenie, gdzie speakerzy mają\npo 30 minut na wypowiedzenie się na wcześniej zdefiniowany przez siebie temat.

\n\n
\n Baner reklamujący artykuł\n
\n\n

Czy opłaca się chodzić na meetupy, kiedy dopiero zaczynam?

\n\n

OCZYWIŚCIE! To jest w sumie jedna z podstawowych rzeczy jakie powinieneś \nzrobić kiedy jesteś na początku swojej kariery jako developer.

\n\n

Na takich spotkaniach jesteś w stanie poznać community danej technologi / \njęzyka. Autorzy bibliotek - którzy pojawiają się często na meetupach - to \nnormalni ludzie, którym zrobi się miło kiedy zbijesz z nimi piątkę i \npodziękujesz im za trud włożony pracy w stworzenie narzędzia Open Source.

\n\n
\n \n
\n\n

Czy muszę chodzić na meetupy, gdy już pracuje kilka lat w branży?

\n\n

Praca pracą, ale znajomi i starzy koledzy mają swoją ścieżkę kariery którą \nwarto poznać. Warto czasem wpaść na meetup i dowiedzieć się co tam u nich \nsłychać. Czy może się już przebranżowili i rzygają językiem który Was \npołączył. Matko, jak to brzmi…

\n\n

•

\n\n

Lista 10 powodów dla których powinieneś uczęszczać na meetupy

\n\n

1. Można… poznać nowe miejsca w mieście

\n\n

Spotkania organizowane są w różnych miejscach w mieście. Dlatego warto \nuczęszczać na dowolne meetupy, aby je poznać. Bardzo często każde wydarzenie \njest organizowane w innym miejscu, tak aby wybrać najlepsze dla przychodzącej \npubliczności.

\n\n

2. Można… coś zjeść i się napić

\n\n

Wydarzenie nie może odbyć się bez sponsorów. To oni wykładają hajs, aby móc \nogłosić swoje oferty pracy. Tym samym firmy fundują catering, aby ludzie \nmogli zostać dłużej i porozmawiać z potencjalnymi przyszłymi pracodawcami.

\n\n
\n \n
\n\n

3. Można… poznać ludzi o podobnym zainteresowaniu

\n\n

Jak już wspomniałem na początku, na spotkania przychodzą ludzie, których \nkręci to samo co Ciebie, dlatego jesteście obecni na tym samym wydarzeniu :smiley:

\n\n

To podobieństwo jest świetne z tego powodu że możesz porozmawiać z obcymi \nludzi o tym co i Ciebie interesuje. W domu z rodziną nie zawsze tak jest.

\n\n

4. Można… coś wygrać, np. bilet na konferencję

\n\n

Aktywni uczestnicy spotkań mogą zyskać coś “materialnego” podczas takich \nwydarzeń. Bardzo często na meetupach można coś wygrać. Jakąś zniżkę na \nusługę albo produkt albo np. bilet na konferencję (pozdrowienia dla \nMichała).

\n\n
\n \n
\n\n

5. Można… “pośmieszkować”

\n\n

Stare dobre przysłowie mówi, że:

\n\n
\n

Żarty informatyków są śmieszne tylko dla informatyków.

\n
\n\n

Zgadzam się. Moja partnerka ni w ząb nie rozumie o co chodzi z tymi \ndomknięciami i “aroł fankszonami”. Niech tak będzie. Nie każdy musi się znać \nna programowaniu.

\n\n
\n \n
\n\n

6. Można… nauczyć się czegoś (zdobyć wiedzę)

\n\n

Tematy prelekcji bardzo często poruszają nowości ze \nświata danej dziedziny programistycznej. Ile to razy dowiedziałem się czegoś \nnowego podczas meetupu i gdy przyszedłem do domu to wieczór poświęciłem na \nzapoznanie się z tą nowinką.

\n\n

Nie tylko prelekcje uczą, ale i ludzie którzy uczęszczają na takie wydarzenie\nw roli uczestników. Podczas rozmów kuluarowych (tj. po części oficjalnej) \nwychodzi najwięcej istotnych rzeczy zw. z językiem albo technologią. Takie \nsmaczki, które są wynikiem czyjegoś wielogodzinnego zmagania się z tematem.

\n\n

7. Można… poczuć się jak wśród swoich

\n\n

Chyba coś mi się pomyliło… w sumie ten punkt można podciągnąć pod “poznanie \nosób o podobnym zainteresowaniu”. Faux pas :smiley:

\n\n

8. Można… znaleźć pracodawcę

\n\n

Sponsorzy spotkań szukają pracowników, dlatego jeśli chcesz odbyć rozmowę \nrekrutacyjną nie umawiając się na nią, to śmiało wpadaj na meetupy gdzie \nznajdziesz kierowników działów do których prowadzona jest rekrutacja.

\n\n

Bez wcześniejszych zapowiedzi możesz porozmawiać z kilkoma firmami i wybrać \ntą która Ci pasuje. Podczas takich rozmów kuluarowych nie musisz się wcale \nspinać. W końcu to nieformalna rozmowa przy lemoniadzie.

\n\n
\n

NIE LUBIĘ STRESU

\n

Osobiście strasznie nie lubię, kiedy podczas rekrutacji moi rozmówcy się \nstresują. Ze swojego doświadczenia wiem, że często wtedy nie pokazuje się\nfaktycznie tego jacy jesteśmy fajni.

\n
\n\n

9. Można… znaleźć kolegę do projektu

\n\n

Masz swój startup? Chcesz go rozwijać? Wpadaj na meetup i szukaj fanatyków \npodobnych do Ciebie, którzy pomogą Ci w zarabianiu kasy.

\n\n
\n \n
\n\n

10. Można… pokazać swoją wiedzę jako prelegent

\n\n

Bycie prelegentem to świetna rola. Co prawda musisz przygotować się do takiej\nroli. Bardzo często potrzebujesz kilkadziesiąt godzin przed prelekcją aby \nstworzyć super slajdy, które odwzorują to co masz do przekazania publiczności\nw sposób jasny i przejrzysty.

\n\n
\n \n
\n\n

* 11. BONUS

\n\n

Jako bonus sprzedam Wam jeszcze jeden argument. Podczas meetupów można \nznaleźć swoją drugą połówkę - swoją towarzyszkę albo towarzysza życia.

\n\n

To niesamowite, ile argumentów przemawia, za tym, aby udać się na meetup.

\n\n

Wybierz się i Ty. Na dowolny meetup, albo na taki, który spotyka się z \nTwoimi zainteresowaniami. Na portalu Meetup.com jest ogromnie długa lista \norganizacji, które tworzą meetupy.

\n\n

•

\n\n

Śledztwo trwa!

\n\n

Podczas twitterowej rozmowy z moim przyjacielem Tomkiem, uświadomiłem sobie, \nże lista argumentów “za” jest o wiele większa. Dziękuję @Koori_.

\n\n 2017-05-29 19:46:06 10-powodow-dla-ktorych-warto-chodzic-na-meetupy ckbw97zyw0007i3umdszu2ola 2017-05-29 19:46:06 2017-05-29 19:46:06 cj3dj7mts00lgi3ume6o1bsc6 Angular: Jak zamockować dane do usługi HTTP? https://piecioshka.pl/blog/2017/05/31/angular-jak-zamockowac-dane-do-uslugi-http.html

Mokowałeś kiedyś dane w projekcie Angularowym na wypadek braku komunikacji z \nback-endem? Jeśli nie to zapraszam Cię do lektury. W kilku krótkich krokach \npokazuje Ci jak dodać do aplikacji (od samego początku) możliwość przepięcia \nzapytań HTTP na odpowiedzi ze statycznych plików JSON.

\n\n

Zbudowanie projektu

\n\n
\n

Projekt, który będziemy budować dostępny jest na GitHubie:\ngithub.com/piecioshka/test-angular-mocks

\n
\n\n
$ ng new test-angular-mocks\n$ cd test-angular-mocks\n$ # jeśli używasz npm v5+ to warto wykonać:\n$ git add .\n$ git commit package-lock.json -m "Add pkg lock file"\n$ ng serve\n
\n\n

Dzięki temu poleceniu, aplikacja zostanie zbudowana i wystawiona do \nprzeglądania za pomocą przeglądarki na adresie: http://localhost:4200/.

\n\n

Polecenie uruchamia narzędzie typu “server + watcher”, czyli:

\n\n\n\n

Niech ciągle będzie włączone non stop. Nie będzie to nam przeszkadzać, a \ntylko pomagać, ponieważ zawsze będziemy mieli dostęp do aplikacji \nzaserwowanej dla klienta końcowego.

\n\n
\n

UWAGA

\n

Pamiętajcie, żeby dać CLI czas na zbudowanie aplikacji.\nTym samym, po zapisaniu pliku i odczekaniu niewystarczającej liczby sekund,\nmożesz mieć ciągle starą wersję aplikacji!

\n
\n\n

Krok 1: Nakreślenie architektury komunikacji z back-endem

\n\n
\n \n\n
\n Schemat 1.\n
\n
\n\n

Krok 2: Implementacja komunikacji między obiektami

\n\n
$ ng g service services/data\n$ git commit -am 'Create directory for services'\n
\n\n

Nie chcę od razu w nowym serwisie komunikować się z back-end.

\n\n

Jeśli bym to zrobił, to nie mam możliwości stworzenia middleware-u, takim \njakim jest np. proxy. Dlatego też stworzę nowy serwis który będzie \nodpowiedzialny za realizację zapytania HTTP.

\n\n

DataService jest odpowiedzialny za pobranie danych. Jednak nie jest jasno \npowiedziane skąd te dane powinny pochodzić.

\n\n

Uważam jest to kwestią samego DataService-u skąd będzie pobierał sobie dane.\nMoże będzie pobierał je z kilku miejsce? Np. może sprawdzić na początku \nLocalStorage i jeśli w nim nie znajdzie to fallbackiem będzie request HTTP.

\n\n

Stworzenie nowego serwisu, który będzie odpowiedzialny za komunikację z \nzewnętrznym API:

\n\n
$ ng g service services/rest\n$ git add .\n$ git commit -am 'Add RestService'\n
\n\n

Krok 2.1: Łączenie serwisów

\n\n

W projekcie istnieją 2 serwisy - należy je połączyć w taki sposób jak na \npierwszym schemacie. Do DataService jest wstrzyknięty \nRestService.

\n\n

Aby to zrobić należy w konstruktorze DataService zdefiniować zmienną \nprywatną restService:

\n\n
import { Injectable } from '@angular/core';\nimport { RestService } from './rest.service';\n\n@Injectable()\nexport class DataService {\n    constructor(private restService: RestService) { }\n}\n
\n\n

Krok 2.2: Łączenie komponentu z serwisem

\n\n

Podobnie jak w przypadku łączenia serwisów i w tym przypadku trzeba\nzdefiniować w konstruktorze klasy “oczekiwanie” na wybrany serwis.

\n\n

Chcę doprowadzić do sytuacji nakreślonej w pierwszym schemacie, \nczyli komponent (w tym przypadku jedyny komponent czyli AppComponent) \nkomunikuje się z DataService, który do dopiero wewnętrznie będzie \nkomunikował się z RestService. Jednak ze względu na to, że DataService \nsam posiada zależność, to tą zależność trzeba zdefiniować w providerach \nkomponentu AppComponent. W przeciwnym przypadku na stronie pojawi się \nkomunikat

\n\n
\n

ERROR

\n

ERROR Error: No provider for RestService!
\nTaki komunikat będzie się pojawiał w DevToolsach (zakładka Console) w \naplikacji (http://localhost:4200/) albo w testach jednostkowych \n(http://localhost:9876/) jeśli nie zdefiniujesz wszystkich zależności \nmodułu.

\n
\n\n
import { Component } from '@angular/core';\nimport { DataService } from './services/data.service';\nimport { RestService } from './services/rest.service';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n  providers: [\n    DataService,\n    RestService\n  ]\n})\nexport class AppComponent {\n  title = 'app works!';\n\n  constructor(private dataService: DataService) {\n    this.dataService.fetch();\n  }\n}\n
\n\n

W zakładce Console okna w którym uruchomiona jest aplikacja powinieneś \nzobaczyć:

\n\n
\n \n\n
\n Pusty obiekt stworzony na podstawie klasy `RestService`.\n
\n
\n\n
\n

Jeśli jest inaczej, to gdzieś popełniłeś błąd.
\nDaj mi znać w komentarzu to z chęcią Ci pomogę.

\n
\n\n

•

\n\n

Krok 3: Stworzenie zapytania HTTP

\n\n

Definicja zapytania HTTP będzie w serwisie RestService. Takie też było jego\nprzeznaczenie.

\n\n
import { Injectable } from '@angular/core';\nimport { Http, Response } from '@angular/http';\n\nimport { Observable } from 'rxjs/Rx';\n\n@Injectable()\nexport class RestService {\n\n  constructor(private http: Http) {\n  }\n\n  makeRequest(url: string): Observable<Response> {\n    return this.http.get(url)\n      .catch((err) => {\n        console.error('Request to "%s" failed', url);\n        return Observable.throw(err);\n      });\n  }\n}\n
\n\n

Teraz aby wykorzystać nowo stworzoną funkcję to w DataService należy ją użyć:

\n\n
import { Injectable } from '@angular/core';\nimport { RestService } from './rest.service';\n\n@Injectable()\nexport class DataService {\n\n  constructor(private restService: RestService) {\n  }\n\n  fetch(url: string) {\n    return this.restService.makeRequest(url);\n  }\n\n}\n
\n\n

Ostatni krok to uruchomić funkcję DataService#fetch, aby pobrać dane.

\n\n
// ...\nexport class AppComponent {\n  title = 'app works!';\n\n  constructor(private dataService: DataService) {\n    this.dataService.fetch('/')\n      .subscribe((response) => {\n        console.log(response);\n      });\n  }\n}\n
\n\n

Psst… W plikach z testami (*.spec.ts) należy zaimportować moduł Http, aby\ntesty jednostkowe nie generowały błędów:

\n\n
// ...\nimport { HttpModule } from '@angular/http';\n// ...\n\nTestBed.configureTestingModule({\n  imports: [\n    HttpModule\n  ],\n  // ...\n}).compileComponents();\n\n// ...\n
\n\n

Krok 4: Pobranie realnych danych

\n\n

Posłużymy się portalem dla programistów tj. GitHub-em i jego publicznym API \nskąd pobierzemy wszelkie publiczne dane na temat dowolnego użytkownika

\n\n

Zgłaszam się na ochotnika!

\n\n

W takim razie zaktualizujmy URLa do zasobu z którego pobieramy odpowiedź na \nnastępujący: api.github.com/users/piecioshka.

\n\n
\n \n\n
\n Wyświetlony obiekt zawiera odpowiedź z zapytania o publiczne dane nt. \n mojego konta na GitHubie. Treść (body) jest w formie tekstowej. \n Lepiej by było, gdyby to była forma JSONa. Trzeba zatem sparsować! \n
\n
\n\n

Od teraz będziemy posługiwali się tylko URL-ami do zasobów, które będę zwracać\ndane w formacie JSON, warto więc wykorzystać natywną funkcję Response#json(). \nProponuję, aby w serwisie RestService dodać sparsowanie zwracanego obiektu \ntypu Response na obiekt JavaScript-owy. Wszystko to da się zrealizować za \npomocą kilku linijeczek:

\n\n
// ...\n\n@Injectable()\nexport class RestService {\n  // ...\n\n  makeRequest(url: string): Observable<Response> {\n    return this.http.get(url)\n      .map((res) => {\n        return res.json();\n      })\n      // ...\n  }\n}\n
\n\n

Krok 5: Prezentacja danych

\n\n

Prezentacja to najprzyjemniejsza część w Angularze.

\n\n

Na podstawie danych w komponencie za pomocą interpolacji albo \ndynamicznych atrybutów definiujesz w markupie co ma się wyświetlić \nużytkownikowi.

\n\n

I tak plik: app.component.html zmienił się na taki:

\n\n
<h1>\n  { { title }}\n</h1>\n\n<img [src]="avatar_url" alt=""/>\n
\n\n

Atrybut [src] jest w nawiasach kwadratowych ze względu na to, \naby przeglądarka nie robiła request-u po obrazek, kiedy jeszcze właściwość \nkomponentu (avatar_url) nie jest ustawiona.

\n\n

Czas na główny plik, tj. komponent AppComponent - plik app.component.ts.

\n\n

Na początku przechwytujemy podstawowe klucze, czyli: name i avatar_url.\nPodczas pobrania tych danych z obiektu reponse WebStorm podświetli, że w \nobiekcie tym nie znajdują się takie properties-y.

\n\n

Aby rozwiązać problem z typami stworzyłem interfejs o nazwie np. \nGitHubProfileResponse. W którym zdefiniowałem 2 używane przeze mnie pola.

\n\n
\n

Oczywiście GitHub API zwraca nie tylko te pola, ale na ten moment nie ma \nsensu wypisywać wszystkich.

\n
\n\n

Hint: Nowy interfejs musi rozszerzać obiekt Response, ale uwaga! Nie \nnatywny obiekt window.Response, tylko Angularowy. Stąd też importuje w \npierwszej linijce obiekt Response.

\n\n
import { Response } from '@angular/http';\n\n// ...\n\ninterface GitHubProfileResponse extends Response {\n  avatar_url: string;\n  name: string;\n}\n\n// ...\n\nexport class AppComponent {\n  title = '';\n  avatar_url = '';\n\n  constructor(private dataService: DataService) {\n    this.dataService.fetch('https://api.github.com/users/piecioshka')\n      .subscribe((response: GitHubProfileResponse): void => {\n        this.title = response.name;\n        this.avatar_url = response.avatar_url;\n        console.log(response);\n      });\n  }\n}\n
\n\n

To tyle z aplikacji. Kiedy przeładujesz stronę (albo automat zrobi to za \nCiebie, gdy będzie gotowy) to ujrzysz minimalistyczny mój profil GitHub-owy.

\n\n

Z testów trzeba (plik app.component.spec.ts) trzeba usunąć 2 ostatnie \ntesty, które sprawdzają istnienie stringa “app works!”. Ten ciąg znaków \nzostał usunięty z komponentu, aby nie pokazywał się na starcie przez ułamek \nsekundy (odpowiedź z GitHub API napisze właściwość title).

\n\n

Krok 6: Mockowanie :exclamation:

\n\n

Wszystko pięknie działa. Z połączeniem do internetu. Teraz chciałbym ostylować \nmój komponent z kartą profilu. Ups… coś się stało… GitHub padł…

\n\n

Tak, wiem. To rzadki przypadek ale może tak być. Co teraz? Nie mam danych, \naby zasilić komponent więc nie wiem jak będzie wyglądał tekst i jak będzie \nkomponował się przy nim obrazek! Wtopa.

\n\n
\n

Co należało zrobić kilka kroków wcześniej?

\n

Warto było zapisać odpowiedź z GitHub API, aby teraz kontynuować pracę na \npoprawnym formacie danych.

\n
\n\n
\n \n\n
\n Schemat 2.\n
\n
\n\n

Krok 6.1: Stworzenie pliku z poprawną odpowiedzią z GitHub API

\n\n

Cofnijmy się do tego momentu, kiedy GitHub API jeszcze działał i zapiszmy z \nniego odpowiedź. Na początku stworzę plik src/app/mocks/piecioshka.json i \nwkleję do niego odpowiedź z GitHub API.

\n\n

Krok 6.2. Nowe narzędzie: angular-in-memory-web-api

\n\n

Zainstaluję narzędzie angular-in-memory-web-api. Oczywiście \nproces instalacji doda informację o paczce do dwóch plików:

\n\n\n\n

Warto stworzyć z tego rewizję.

\n\n

Krok 6.3: Stworzenie serwisu, który będzie emulował zapytania HTTP

\n\n

Za pomocą poniższego polecenia stworzę plik\nsrc/app/services/mock.service.ts, który będzie bratem serwisu\nRestService. Zgodnie z tym co jest zdefiniowane na \ndrugiem schemacie.

\n\n
$ ng g service services/mock\n
\n\n

W pliku (tak samo jak RestService) musi istnieć funkcja makeRequest, \nktóra będzie zwracała obiekt Observable.

\n\n
import { Injectable } from '@angular/core';\nimport { Http, Response, ResponseOptions } from '@angular/http';\n\nimport { Observable } from 'rxjs/Rx';\n\n@Injectable()\nexport class MockService {\n\n  constructor(private http: Http) {\n  }\n\n  makeRequest(url: string): Observable<Response> {\n    console.log('◉ Mock finished loading: GET "%s"', url);\n\n    return this.http\n      .get(url)\n      .map((res) => {\n        return res.json();\n      })\n      .catch((err) => {\n        console.error('[Mock] Request to "%s" failed', url);\n        return Observable.throw(err);\n      });\n  }\n}\n
\n\n

Krok 6.4: Wykorzystanie serwisu MockService

\n\n

Teraz kiedy już mamy możliwość podmiany RestService na tzw. zaślepkowy to \ndodajmy możliwość podmiany w serwisie wraperze, czyli DataService:

\n\n
import { Injectable } from '@angular/core';\n\nimport { RestService } from './rest.service';\nimport { MockService } from './mock.service';\n\n@Injectable()\nexport class DataService {\n\n  requestService: RestService | MockService;\n\n  constructor(private restService: RestService,\n              private mockService: MockService) {\n    // this.useRestService();\n    this.useMockService();\n  }\n\n  private useRestService() {\n    this.requestService = this.restService;\n  }\n\n  private useMockService() {\n    this.requestService = this.mockService;\n  }\n\n  fetch(url: string) {\n    return this.requestService.makeRequest(url);\n  }\n\n}\n
\n\n

Krok 6.5: Stworzenie serwisu do zarządzania pamięcią (in-memory)

\n\n

W katalogu z mockami należy stworzyć plik src/app/mocks/in-memory.service.ts,\nw którym będzie definicja wszystkich mockowanych requestów.

\n\n

Na ten moment jest tylko jeden, który kieruje do pliku obok\nz rozszerzeniem *.json.

\n\n
import { InMemoryDbService } from 'angular-in-memory-web-api';\n\nexport class InMemoryService implements InMemoryDbService {\n  createDb() {\n    return {\n      piecioshka: require('./piecioshka.json'),\n    };\n  }\n}\n
\n\n

Krok 6.6: Routing

\n\n

Wszystko fajnie, ale aplikacja dalej nie ma pojęcia o mockach. Należy \npołączyć główny moduł aplikacji.

\n\n
import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HttpModule } from '@angular/http';\n\nimport { AppComponent } from './app.component';\nimport { InMemoryService } from './mocks/in-memory.service';\n\n// Paczka, generuje problemy podczas importowania, dlatego zmieniamy ma require.\nconst mem = require('angular-in-memory-web-api');\nconst InMemoryWebApiModule = mem.InMemoryWebApiModule;\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule,\n\n    // INFO(piecioshka): routing dla mocków\n    InMemoryWebApiModule.forRoot(InMemoryService, {\n      // Flaga powoduje, że pomimo tego, że są włączone mocki, to\n      // kiedy routing nie znajdzie URLa w swojej mapie\n      // zmokowanych URLi to wyśle zwykły request HTTP.\n      passThruUnknownUrl: true\n    })\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n
\n\n

Krok 6.7: Problem z data

\n\n

Odpowiedź z mocka jest w kluczu data. Należy to oczyścić!\nW pliku mock.service.ts należy wpiąć się w chaining:

\n\n
    // ...\n    return this.http\n      .get(url)\n      .map((res) => {\n        const original = res.json().data;\n        return new Response(new ResponseOptions({ body: original }));\n      })\n      .map((res) => {\n        return res.json();\n      })\n    // ...\n
\n\n

Krok 6.8: Problem z require

\n\n

Ze względu na to, że domyślna konfiguracja projektu nie pozwala na \nkorzystanie z funkcji require (nie jest znany taki typ, tym samym \nkompilacja TypeScripta krzyczy) należy dodać do pliku z konfiguracją, tj. \nsrc/tsconfig.app.json:

\n\n
// ...\n"types": ["node"]\n// ...\n
\n\n

Krok 6.9: Problem z testami

\n\n

Na zakończenie rozwiążę problem: Cannot get name of null, który pojawia się\npo uruchomieniu testów jednostkowych.

\n\n

W pliku app.component.ts należy przenieść wywołanie zapytania z konstruktora\ndo nowej funkcji ngOnInit. Jest to funkcja w interfejsie OnInit. Funkcja \nta zostanie uruchomiona w odpowiednim czasie.

\n\n
\n

Wskazówka

\n

Wszystkie funkcje z prefiksem ng* jest to wewnętrzna nomenklatura Angulara\ndzięki której w szybki sposób wiemy po co jest dana funkcja.

\n
\n\n

Funkcja ngOnInit uruchomi się kiedy komponent będzie gotowy. W tym momencie\nuruchomi się hook (zdarzenie znane z Gita), który wywoła funkcję\nngOnInit zdefiniowaną w komponencie.

\n\n
\n \n\n
\n Prezentacja komponentu, który jest zasilany mockiem.\n Cel osiągnięty :tada:\n
\n
\n\n

•

\n\n

Zakończenie

\n\n

Na zakończenie dodam trochę słów kluczowych, dzięki którym developerzy \nszukający w zakamarkach internetu przewodnika jak dodać mockowanie \nodpowiedzi dla usługi HTTP powinni przyjść do tego artykułu. Sam szukałem \nkilkadziesiąt minut jak poradzić sobie z tym zagadnieniem i nie znalazłem \ninstrukcji mówiącej wprost jak należy sobie poradzić z mockowaniem.

\n\n\n\n

•

\n\n

Porady, dla programistów WebStorma

\n\n

Jak Ci dobrze wiadomo WebStorm indeksuje pliki projektu w celu łatwego i \nszybkiego nawigowania po plikach. Nie ma żadnego powodu, aby WebStorm \nindeksował katalog node_modules/. Z tego powodu wyklucz ten katalog \nklikając na niego prawym przyciskiem myszy i wybierz opcję: Mark \nDirectory as → Excluded.

\n\n

Katalog node_modules/ powinien zaświecić się na czerwono.\nJeśli nie zmienił swojego koloru to prawdopodobnie \njest on uznany przez WebStorma za katalog z bibliotekami. Oznacza to, że\nzostała przyznana mu dodatkowa rola, która nie pozwala na to, aby \nstał się excludowany z procesu indeksowania.

\n\n

Aby wyłączyć dodatkową rolę katalogu node_modules/ należy wejść do ustawień \nprojektu: Preferences → Languages & Frameworks → JavaScript → \nLibraries, a następnie odznaczyć katalog node_modules/. Teraz na pewno\nwymieniony przeze mnie katalog będzie określony czerwonym kolorem.\nŚwiadczy to o tym, że ten katalog nie będzie brał udziału w indeksowaniu.

\n\n

Coś za coś. WebStorm działa szybciej (nie ma tylu plików w pamięci), ale za \nto nie podkreśla znanej składni. I tak:

\n\n\n\n

Rekomendacja :star2:

\n\n

Jeśli szukasz jakiegoś publicznego API, które zwraca dowolne dane (z dowolnej\nkategorii tematycznej, np. filmy, finanse) to polecam skorzystać z \nrepozytorium autorstwa Todda Motto - \ngithub.com/toddmotto/public-apis.

2017-05-31 21:56:34 angular-jak-zamockowac-dane-do-uslugi-http ckbw97zyw0007i3umdszu2ola 2017-05-31 21:56:34 2017-05-31 21:56:34 cj3ge2kds00lni3um6mzi454m WarsawJS Meetup #32: Moje wrażenia https://piecioshka.pl/blog/2017/06/02/warsawjs-meetup-32.html

32-edycja comiesięcznych spotkań dla programistów była owocna w świetne tematy.\nNa scenie pojawili się wspaniali prelegenci Monika i Damian. Zapraszam do \nzapoznania się jakie były moje odczucia z prelekcji.

\n\n

Wydarzenie było jak zwykle dostępne na fejsbuku oraz na \nmeetupie.

\n\n
\n \n WarsawJS\n \n
\n\n

Invitation

\n\n

Dzięki znajomościom Piotra mogliśmy nagrywać zapowiedź nie - jak ma \nto zwykle miejsce - sprzed obiektu ale z wewnątrz. Ekipa WarsawJS wylądowała \nw klubie tenisowym WTS Orzeł na warszawskiej Pradze.

\n\n

Chcesz zobaczyć jak jeden z organizatorów WarsawJS skacze w dal?
\nZerknij na poniższe wideo.

\n\n\n\n
\n\n

Talk #1: SOLID i DRY w JavaScript- praktyczne przykłady [PL] Damian Wielgosik

\n\n

40 minutowa prelekcja założyciela meet.js \noraz Functionate - Damiana - nie była standardowym wyjściem \nna scenę i opowieścią o frameworku.

\n\n

Prelegent zamienił się w programistę i na oczach ponad 100 osób programował \nkoszyk dla aplikacji typu sklep internetowy.

\n\n

Targetem live coding byli programiści na poziomie początkującym \ni średnio zaawansowanych.

\n\n\n\n

Damian podczas kodowania przedstawiał po kolei wszystkie 5 zasad (a tak \nnaprawdę cztery, bo jednej zabrakło), które składają się na jedną o nazwie \nSOLID. Wymieńmy sobie po kolei te zasady:

\n\n\n\n

D - DIP

\n\n

Jako pierwsza została pokazana zasada rozdzielenia zależności, czyli D.\nObiekt koszyka - Cart - znał definicję budowania obiektu Product.\nNie jest to dobre podejście, ponieważ gdy zmieni się API klasy Product, to \ntrzeba aktualizować zupełnie inną encję - Cart.

\n\n
\n

Zasada Hollywoodzka

\n

“Jest takie powiedzenie: Nie wołaj nas, my zawołamy Ciebie.”
\n— Hollywood Principle: Don’t call us, we’ll call you”

\n
\n\n

Rozwiązanie? Odwrócić zależność! Przenieść tworzenie produktu linijkę przed \nwykorzystaniem funkcji dodającej produkt.

\n\n
\n\n

Damian w okolicach 12 minuty użył słowa “zdikaplowaliśmy”. Coś mi mówi, że \nprelegent miał na myśli - wykorzystanie wzorca Decoupling \nPattern. Już spieszę z wyjaśnieniem.

\n\n

Wzorzec polega na rozdzieleniu obiektów ze sobą jak najbardziej to możliwe, \npo to aby zmiana jednego nie powodowała modyfikację drugiego. W świecie gier, \nsprawa wygląda tak, że jak dodajesz jakiś feature do gry, to w im mniejszej \nliczbie klas musisz coś zmienić tym lepiej.

\n\n

:sparkles: Nie wiedziałem, że te podejście posiada taką nazwę. Pierwsze słowa \nuznania dla prelegenta.

\n\n
\n

“Jeśli z wielu miejscach musisz nanieść poprawki to wiedz, że coś się dzieje.”\n
— Damian “Ferrante” Wielgosik

\n
\n\n

S - SRP

\n\n

Kolejna zasada jaka została przedstawiona to zasada minimalnej \nodpowiedzialności. W przykładowej aplikacji Product wiedział, że znajduje \nsię w Cart - trzymał o tym informację w swojej logice. Po co produkt ma \nwiedzieć, że jest coś takiego jak koszyk?

\n\n

Rozwiązanie? To koszyk musi wiedzieć, czy produkt w nim jest.

\n\n
\n\n

:sparkles: W okolicach 15 minuty zostało wypowiedziane przez prelegenta DDD. \nNie znam tego terminu.

\n\n

Poczytałem trochę o tym i nie będę się starał w krótkich słowach pisać co to \njest. Za jakiś czas napiszę artykuł na temat tego podejścia do programowania.

\n\n

Kupiłem już nawet kiedyś książki na temat DDD aby pogłębić temat. Gdy je \nprzeczytam na pewno pojawi się o tym artykuł.

\n\n\n\n

I - ISP

\n\n

Po kilku minutach Damian rzucił przykładem, że koszyk chciałby wiedzieć jak \nsię zapisuje. Ten proces może się odbywać za pomocą HTTP, LocalStorage albo \ncokolwiek innego. Funkcja zapisująca będzie posiadała wszystkie możliwe\nrozwiązania do zapisu, tym samym będzie to strasznie długa funkcja.

\n\n

Rozwiązanie? Podział na mniejsze interfejsy, które będą realizowały jak \nnajmniej rzeczy. Jeśli chcielibyśmy zapisywać koszyk do LocalStorage, to \ntrzeba zrobić nową klasę, która będzie realizowała tylko tą rzecz.\nRozwiązanie zaczerpnięte z DDD: stworzenie modułu typu “repozytorium”.

\n\n

:sparkles: Nie znałem takiego typu modułów. Kolejna rzecz, która mnie czegoś \nnauczyła.

\n\n

Damian porównał koszyk do listu. List nie wie jak jest przenoszony, czy to \nInPostem, czy listonoszem itd. Koszyk też nie wie jak jest zapisywany.\nBardzo ciekawa analogia.

\n\n

Koszyk nie może mieć funkcji typu: save, load. Utarło się, że jest to domena \nrepozytoriów, które mogą dane załadować, dostarczyć i zapisują.

\n\n
\n

“Nie wolno używać generalnego interfejsu. Należy rozbijać funkcje na jak \nnajmniejsze, tak aby realizowały jeden (określony w nazwie) task.”\n
— Damian “Ferrante” Wielgosik

\n
\n\n

L - LSP

\n\n

Zasada ta została stworzona po to, aby tworzyć podklasy danego problemu. \nJeśli chcielibyśmy dodać do koszyka grę, która miałaby dodatkowe parametry, \ntakie jak np. ograniczenie wiekowe, to trzeba by rozszerzyć klasę Product.\nJednak nie jest to dobra droga, ponieważ wtedy wszystkie produkty, nie ważne \njakiego typu by były, dostały informację o ograniczeniu wiekowym.

\n\n

Rozwiązanie? Bardzo proste. Stworzenie klasy pochodnej GameProduct, która\ndziedziczy po klasie Product i rozszerza obiekt o parametr limitAge.

\n\n

O - OCP

\n\n

Niestety, ale zabrakło czasu na pokazanie tej zasady. No chyba, że była \nomawiana, ale to musiało mnie wtedy zabraknąć.

\n\n

Damian, jeśli to czytasz, to daj proszę znać, jak w omawiamy przez Ciebie \nprzykładzie omówiłbyś tą zasadę.

\n\n
\n\n

Podsumowując 30 minutową prelekcję.

\n\n

Jestem zadowolony, że na scenie gościliśmy pioniera spotkań programistów \nJavaScript w Polsce. Przygotowanie prelegenta było na wysokim poziomie. \nDobrze mi się go słuchało. Uwielbiam rozmawiać o wzorcach projektowych, \ndlatego też taka prelekcja jak najbardziej przypadła mi do gustu.

\n\n\n\n

•

\n\n

Talk #2: Handling Asynchronous Actions in React-Redux Apps [EN] Monika Glier

\n\n

Monika jako druga prelegentka w historii WarsawJS opowiadała o obsłudze akcji \nasynchronicznych w aplikacjach Reactowych opartych na Reduxie.

\n\n

Prelegentka zmieniła swoją ścieżkę kariery 2-3 lata temu. Wcześniej była \nprawnikiem.

\n\n\n\n

Prelekcja zaczęła się od wprowadzenia w świat asynchroniczności. Jak \ndefinicja asynchroniczności została potraktowane powiedzenie:

\n\n
\n

Asynchroniczne akcje to akcje, które zostaną kiedyś wywołane.\n
— Monika Glier

\n
\n\n

Śmieszne wytłumaczenie, ale prawdziwe. Nie ma żadnej kontroli, kiedy \nfunkcje asynchroniczne zostaną wykonane.

\n\n

Kolejnym krokiem było wytłumaczenie przez Monikę w krótkich słowach czym jest\nRedux. W dzisiejszych czasach już chyba wszyscy wiedzą co to za biblioteka.

\n\n

Prosta architektura Reduxa:

\n\n\n

Tyle. Prosta architektura, ale jakże pomocna. Prawdę mówiąc korzystałem z \ntakiej architektury kilka lat temu, kiedy pracowałem przy projekcie opartym \nna frameworku Backbone. W dzisiejszych czasach ten framework to już trochę \nprzeżytek, ale ja mocno go chwalę. Można powiedzieć, że “programistycznie” \nsię na nim wychowałem.

\n\n\n\n

Do aplikacji opartych na Reduxie, Monika poleca kilka bibliotek:

\n\n\n

Pod koniec prezentacji dowiedzieliśmy się co nieco o testach z użyciem sagi.\nA na zakończenie Monika porównała wyżej wymienione biblioteki.

\n\n

Świetna prelekcja, która “zajawiała” tematykę asynchroniczności w Redux-owym \nświecie tworzenia aplikacji. Thanks Monia!

\n\n\n\n

•

\n\n

Panel dyskusyjny

\n\n

Podczas tego wydarzenia miał miejsce pierwszy w historii WarsawJS panel \ndyskusyjny podczas którego zadawaliśmy pytania ekspertom, \naby wygenerować dyskusję na popularne tematy ze świata JavaScript-u.

\n\n

Zrezygnowaliśmy z trzeciej prelekcji, aby zobaczyć jak wydarzenie będzie \nwyglądało razem z panelem. Rozwialiśmy wszelkie wątpliwości, m.in że \nwydarzenie przerodzi się w kilkugodzinny maraton.

\n\n

Świetny odbiór ludzi dał mi potwierdzenie, że warto robić takie panele.

\n\n

Nagranie z panelu jest dostępne w naszych archiwach, jednak z powodu słabej \nperspektywy (publiczność przysłania ekspertów), materiał nie zostanie \nopublikowany.

\n\n

Zastanawiamy się, czy aby nie opublikować samej ścieżki audio.
\nJak myślisz, będzie to dobry pomysł?

\n\n\n\n

•

\n\n

Sponsorzy spotkania

\n\n

Podziękowania dla firm sponsorskich, które szukają pracowników z obszaru \nFront-end. Jeśli szukasz pracy napisz do nich, albo do mnie - a ja skieruję \nCię do odpowiedniej osoby.

\n\n 2017-06-02 21:55:58 warsawjs-meetup-32-moje-wrazenia ckbw97zyw0007i3umdszu2ola 2017-06-02 21:55:58 2017-06-02 21:55:58 @@ -264,6 +267,8 @@ ckqckistb00020wl3h8fhy1jp TypeScript: Projekt cz.5 #17 https://www.youtube.com/w ckk6pdm3s00010wl5nthurgq2 Projekt “Notatki” – baza danych (MongoDB) https://tworcastron.pl/blog/projekt-notatki-2-8-baza-danych-mongodb/

Drugi odcinek z serii projekt praktyczny “Notatki”. Jest to projekt praktyczny oparty na Node + React + MongoDB.  W dzisiejszym odcinku podpinamy bazę danych (MongoDB). Dosyć kompleksowo buduję małą aplikację. […]

\n

Artykuł Projekt “Notatki” – baza danych (MongoDB) pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-01-21 09:45:06 projekt-"notatki"-baza-danych-(mongodb) ckbbw3jvs000li3umgw19edq9 2021-01-21 10:19:11.273 2021-01-21 10:19:11.273 ckk2vt0y800010wl9qr00l6yx Wzorce projektowe. Rusz głową! Recenzja książki https://www.youtube.com/watch?v=i934ZeRLZfE Wzorce projektowe, mimo dużego zainteresowania wielu programistów, są omawiane w niewielkiej ilości dostępnych materiałów. Czy książka "Wzorce projektowe. Rusz głową!" to dobry sposób na naukę Strategii, Obserwatora, Fabryki czy Dekoratora? Tego dowiesz się z recenzji książki przygotowanej przez Marcina. \n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\nFilm Przemka z Wzorcami projektowymi w JS https://www.youtube.com/watch?v=uIMDFjVLCHU\n\n📷 Przeprogramowany Instagram https://www.instagram.com/przeprogramowani/\n📚 Marcin na Goodreads https://www.goodreads.com/user/show/30155771-marcin-czarkowski\n✍🏻 Marcin na Twitterze https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-01-18 17:00:14 wzorce-projektowe.-rusz-glowa!-recenzja-ksiazki ckiyt1v9s001fi3umcgnxbgiu 2021-01-18 18:08:03.344 2021-01-18 18:08:03.344 ckk2vt2u500070wl9m06frt0h Własne bloki w WordPress Gutenberg #004 – RichText https://blog.robertorlinski.pl/2021/01/18/wordpress-gutenberg-004/ Pora zacząć tworzyć nasz spis treści w taki sposób, aby zaczął w końcu przypominać spis treści! A tak jak wszystkie bloki i elementy interfejsu w Gutenbergu, tak i nasz spis treści, będzie zawierał w sobie wbudowane komponenty Gutenberga. A najczęściej wykorzystywanym komponentem (gdy chodzi o tworzenie konkretnych bloków), jest tekst sformatowany. Więc to właśnie o nim, chcę Ci opowiedzieć […] 2021-01-18 17:00:00 wlasne-bloki-w-wordpress-gutenberg-004-richtext ckig8bkw0000zi3umgy3obxsr 2021-01-18 18:08:05.789 2021-01-18 18:08:05.789 +cjwhzoo0o01lii3um3qno1nr1 Zarządzanie stanem z useContext - React Hooks w 5 minut #5 https://www.youtube.com/watch?v=cwZXiUkBW1w Context API w połączeniu z useContext to prosty i jednocześnie niesamowicie skuteczny sposób na zarządzanie stanem. W małych i średnich projektach sprawdzi się znacznie lepiej niż Redux.\n\nRepozytorium projektu z filmu (przed i po): https://github.com/mkczarkowski/react-hooks/tree/master/use-context\n\nContext API - Wzorce w React #7: https://www.youtube.com/watch?v=zdNV8vliSug\nWpisy Kenta C. Doddsa o Context: https://kentcdodds.com/blog/application-state-management-with-react/\nhttps://kentcdodds.com/blog/how-to-use-react-context-effectively\n\nArtykuł “Czym są React Hooks”: http://www.algosmart.pl/czym-sa-react-hooks\nSeria “Wzorce w React”: https://www.youtube.com/watch?v=2FOenh7fBJY&list=PLFwEHQJHnxZ3Dg-gQn3Jle-FF5qBllblz 2019-06-04 16:00:15 zarzadzanie-stanem-z-usecontext-react-hooks-w-5-minut-5 cjwrzrlww0015i3um1bbud9jy 2019-06-04 16:00:15 2019-06-04 16:00:15 +ck2u4mwl401sdi3um14kp4al9 Typecript 3.7 - Optional Chaining i Nullish Coalescing https://fsgeek.pl/post/optional-chaining-nullish-coalescing/

Ostatnio wyszedł Typescript 3.7, który zawiera kilka oczekiwanych przez programistów funkcjonalności. Dziś chciałbym opowiedzieć o dwóch nowościach na które sam czekałem i które mogą uprościć tworzony przez nas kod czyli Optional Chaining i Nullish Coalescing.

\n\n

Optional chaining

\n\n

Na sam początek funkcjonalność, którą możemy znaleźć np.: w języku Swift i pozwala na bardziej zwięzłe pisanie kodu. Kiedy piszemy kod i opakowujemy dane w obiekty mamy możliwość korzystania z opcjonalnych pól np.:

\n\n
interface Obj {\n    a: string,\n    b?: {\n        a: string,\n        b?: {\n            a: string\n        }\n    }\n}\n\nconst obj:Obj = {\n    a: 'a',\n    b: {\n        a: 'a',\n        b: {\n            a:'a'\n        }\n    }\n}
\n\n

Problem pojawia się gdy chcemy się dostać do tych wartości. Aby to zrobić musimy sprawdzić czy nasze pola faktycznie mają odpowiednią wartość

\n\n
 obj.b.a //Object is possibly 'undefined'.\n\nif (obj.b) {\n    obj.b.a\n}\n\nif (obj.b && obj.b.b) {\n    obj.b.b\n}
\n\n

Dzięki nowej funkcjonalności jesteśmy w stanie skrócić powyższy zapis do czytelniejszej formy

\n\n
obj.b?.a\nobj.b?.b?.a
\n\n

Jeśli pola obj.a i obj.b.b są różne od null lub undefined to dostaniemy wartość zmiennej, która znajduje się w tym obiekcie. Jeśli w którymkolwiek momencie okaże się, że zmienne nie posiadają wartości to dostaniemy w wyniku wartość undefined

\n\n
 \nconst obj:Obj = {\n    a: 'a',\n    b: {\n        a: 'a',\n    }\n}\n\nobj.b?.b?.a // undefined
\n\n

Oprócz możliwości dostania się do pola w obiekcie możemy również wykorzystać to do odwołania się do elementu w tablicy

\n\n
 interface Tab {\n    a?: number[]\n}\n\nconst obj2: Tab = {\n    a: [0,1]\n}\n\nobj2.a[0] // Object is possibly 'undefined'.\nobj2.a?.[0]
\n\n

Ostatnia możliwość to wywołanie funkcji

\n\n
interface Fun {\n    a?: ()=>void\n}\n\nconst obj3: Fun = {\n    a: () => { }\n}\n\nobj3.a() // Object is possibly 'undefined'.\nobj3.a?.()
\n\n

Nullish Coalescing

\n\n

Druga nowość to Nullish Coalescing o którym myślę jako domyślnej wartości. Do tej pory mogliśmy ustawiać domyślną wartość na dwa sposoby

\n\n
    value ? value : default\n    value || default
\n\n

Oba sposoby mogą jednak powodować niechciane efekty uboczne np.:\n

const example = 0;\nconst defaultValue = 1;\n\nconsole.log(example ? example : defaultValue);\nconsole.log(example || defaultValue)

\n\n

Nawet jeśli dopuszczamy wartość 0 jako poprawną to taki zapis powoduje, że zostanie ona zastąpiona wartością domyślną. Oczywiście da się temu zapobiec dodając dodatkowe warunki ale wydłuża to niepotrzebnie kod. Nowy Nullish Coalescing zwróci wartość domyślną tylko jeśli zmienna ma wartość null lub undefined. W każdym innym przypadku będzie to oryginalna wartość zmiennej

\n\n
console.log(null ?? 1); // 1\nconsole.log(undefined ?? 1); //1\nconsole.log(0 ?? 1); //0\nconsole.log(NaN ?? 1); //NaN\nconsole.log('' ?? 1); // ''
\n\n

A jak wam się podobają nowe funkcjonalności? Zaktualizowaliście już Typescript’a w waszych projektach? Będziecie używać tych funkcjonalności czy może już z nich korzystacie? No i najważniejsze - za chwilę te nowości będą też dostępne w czystym JavaScript.

2019-11-11 07:50:19 typecript-37-optional-chaining-i-nullish-coalescing ckhxjb6o0000yi3umb3hg09jv 2019-11-11 07:50:19 2019-11-11 07:50:19 ckk6z8svq00010wmnmi8tpuy8 Błędy code review ⌨️ hello roman #146 https://www.youtube.com/watch?v=qZ8cwovYcBc Code review to jeden z najważniejszych procesów developmentu – nie tylko pozwala nam uniknąć poważnych błędów, ale przede wszystkim nauczyć się tony rzeczy, dzięki współpracy z innymi programistami! W tym odcinku wymieniam najczęstsze błędy popełniane przez programistów podczas code review. \n\n⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-01-21 14:00:12 bledy-code-review-hello-roman-146 ckiswuz9s0017i3um5mg4h7q1 2021-01-21 14:55:22.935 2021-01-21 14:55:22.935 ckk8rn82u00010vld9kfjgk2w Laravel: porządek w migracjach bazy danych https://webroad.pl/php/7882-laravel-porzadek-w-migracjach-bazy-danych Piątek wieczór – czas w sam raz na ostre cięcie na produkcji :-) Dzisiaj krótki wpis, który uporządkuje katalog z klasami migracji bazy danych w Laravelu. Z biegiem czasu straszliwie puchnie i warto go co jakiś czas trochę odchudzić. Jak zrobić zrzut struktury bazy danych do pliku? Służy do tego przydatna, artisanowa komenda. [crayon-600b3c625d0c0497038757/] Zrzut […] 2021-01-22 20:47:29 laravel:-porzadek-w-migracjach-bazy-danych ckir2fk800008i3um9c21fesl 2021-01-22 20:58:11.239 2021-01-22 20:58:11.239 cjb9f3m4w00w6i3umakvvaiih Czas na Serwis https://www.nettecode.com/czas-na-serwis/

W poprzednich artykułach stworzyliśmy nasz pierwszy komponent dla aplikacji – listę to do oraz dodaliśmy do niej zadania. Następnie rozszerzyliśmy aplikację o listę zadań zrobionych, korzystając z stworzonych wcześniej komponentów. Nie obeszło się jednak bez pewnych modyfikacji dotyczących samych zadań (status: to do/done). Stworzyliśmy model naszego zadania i doszliśmy do wniosku, że czegoś jednak nam […]

\n

Artykuł Czas na Serwis pochodzi z serwisu NetteCode.

2017-12-16 14:08:02 czas-na-serwis ckhnmdge00000i3um6batg2gk 2017-12-16 14:08:02 2017-12-16 14:08:02 @@ -274,7 +279,6 @@ ckke8blbp00010wla5nri07ma Kolisty wykres http://domanart.pl/kolorowe-kolka/

J cjvnzfirc01kfi3um6obac9xb Pobieranie danych z useEffect - React Hooks w 5 minut #2 https://www.youtube.com/watch?v=Lhila60SNfg W tym odcinku pokazuję jak pobierać dane z API za pomocą hooka useEffect, omawiam czyszczenie pozostałości po efektach i definiowanie zależności efektu, które zapewniają jego optymalizację. 2019-05-14 16:00:03 pobieranie-danych-z-useeffect-react-hooks-w-5-minut-2 cjwrzrlww0015i3um1bbud9jy 2019-05-14 16:00:03 2019-05-14 16:00:03 cjvxzif4001kui3umepvf6lxm Zasady korzystania z hooków - React Hooks w 5 minut #3 https://www.youtube.com/watch?v=aoaGfEQALPM Poznaj dwie zasady, które musisz brać pod uwagę, aby uniknąć błędów przy korzystaniu z React Hooks.\n\nPlugin eslint-plugin-react-hooks: https://www.npmjs.com/package/eslint-plugin-react-hooks\nPlaylista "React Hooks w 5 minut": https://www.youtube.com/watch?v=5SgtFIiIsKk&list=PLFwEHQJHnxZ0m7ht2kViVzyccUZPVZ8XJ\nPlaylista "Wzorce w React": https://www.youtube.com/watch?v=2FOenh7fBJY&list=PLFwEHQJHnxZ3Dg-gQn3Jle-FF5qBllblz\n\nBlog o React.js i JavaScript: http://www.algosmart.pl 2019-05-21 16:00:00 zasady-korzystania-z-hookow-react-hooks-w-5-minut-3 cjwrzrlww0015i3um1bbud9jy 2019-05-21 16:00:00 2019-05-21 16:00:00 cjw7zlieo01l8i3um1n5i8coa Tworzenie własnych hooków - React Hooks w 5 minut #4 https://www.youtube.com/watch?v=VOL5WQe6HRA Dowiedz się jak tworzyć własne hooki, które pozwolą Ci w łatwy sposób współdzielić logikę pomiędzy komponentami.\n\nStrona useHooks: https://usehooks.com/\nRepozytorium react-use: https://github.com/streamich/react-use\n\nPlaylista "React Hooks w 5 minut": https://www.youtube.com/watch?v=5SgtFIiIsKk&list=PLFwEHQJHnxZ0m7ht2kViVzyccUZPVZ8XJ\nPlaylista "Wzorce w React": https://www.youtube.com/watch?v=2FOenh7fBJY&list=PLFwEHQJHnxZ3Dg-gQn3Jle-FF5qBllblz\n\nBlog o React.js i JavaScript: http://www.algosmart.pl 2019-05-28 16:00:06 tworzenie-wlasnych-hookow-react-hooks-w-5-minut-4 cjwrzrlww0015i3um1bbud9jy 2019-05-28 16:00:06 2019-05-28 16:00:06 -cjwhzoo0o01lii3um3qno1nr1 Zarządzanie stanem z useContext - React Hooks w 5 minut #5 https://www.youtube.com/watch?v=cwZXiUkBW1w Context API w połączeniu z useContext to prosty i jednocześnie niesamowicie skuteczny sposób na zarządzanie stanem. W małych i średnich projektach sprawdzi się znacznie lepiej niż Redux.\n\nRepozytorium projektu z filmu (przed i po): https://github.com/mkczarkowski/react-hooks/tree/master/use-context\n\nContext API - Wzorce w React #7: https://www.youtube.com/watch?v=zdNV8vliSug\nWpisy Kenta C. Doddsa o Context: https://kentcdodds.com/blog/application-state-management-with-react/\nhttps://kentcdodds.com/blog/how-to-use-react-context-effectively\n\nArtykuł “Czym są React Hooks”: http://www.algosmart.pl/czym-sa-react-hooks\nSeria “Wzorce w React”: https://www.youtube.com/watch?v=2FOenh7fBJY&list=PLFwEHQJHnxZ3Dg-gQn3Jle-FF5qBllblz 2019-06-04 16:00:15 zarzadzanie-stanem-z-usecontext-react-hooks-w-5-minut-5 cjwrzrlww0015i3um1bbud9jy 2019-06-04 16:00:15 2019-06-04 16:00:15 cjwrzrlww01lsi3umey2e66va Zarządzanie rozbudowanym stanem z useReducer - React Hooks w 5 minut #6 https://www.youtube.com/watch?v=qE95PTxEtoU Zarządzanie rozbudowanym stanem przy użyciu hooka useState jest mało efektywne. Na szczęście mamy do dyspozycji useReducer radzący sobie z tym znacznie lepiej. 2019-06-11 16:00:14 zarzadzanie-rozbudowanym-stanem-z-usereducer-react-hooks-w-5-minut-6 cjwrzrlww0015i3um1bbud9jy 2019-06-11 16:00:14 2019-06-11 16:00:14 cihuj0f3s004oi3um2ibk7njp console.log(„Hello World!”); https://meandjs.com/console-loghello-world/ Witam, już od jakiegoś czasu zastanawiałem się nad założeniem bloga. Moją pasją jest JavaScript i wszystko co z nim związane. Nie uważam się za JS Ninja i cały czas się uczę odkrywając niuanse związane z JS. Pomimo swojego doświadczenia z tym językiem nadal uważam się za „Świeżaka”. Ponoć najlepszą formą nauki jest przekazywanie swojej wiedzy […] 2015-12-06 12:49:31 consoleloghello-world ck5e5hz9k0013i3um6tipcjry 2015-12-06 12:49:31 2015-12-06 12:49:31 cihwgwqao004pi3umhrxb21nn Wzorzec archiwizacji danych w obiekcie https://meandjs.com/wzorzec-archiwizacji-danych-w-obiekcie/ Jakiś czas temu zagłębiając się w jedną z lepszych książek o JS – „JavaScript – Zasady Programowania Obiektowego” Nicholas C. Zakas natrafiłem na jedną z funkcjonalności języka, której do tej pory nie wykorzystywałem. Mam na myśli atrybuty właściwości funkcji dostępowych. Dzięki tym atrybutom i metodzie Object.defineProperty() w dowolnej chwili do każdego obiektu można dodać funkcję […] 2015-12-07 21:26:12 wzorzec-archiwizacji-danych-w-obiekcie ck5e5hz9k0013i3um6tipcjry 2015-12-07 21:26:12 2015-12-07 21:26:12 @@ -287,6 +291,7 @@ ckk704w5o00010wjyr52a611b Back-end w Node.js z Nest.js (REST API #1) https://sol ckkciqtut00010wjngpjall58 JSON Web Tokens w Node.js (Express.js) | overment https://www.youtube.com/watch?v=lXJ6QK03JmA JSON Web Tokens to technika umożliwiająca autoryzację użytkownika (klienta) na jednym lub wielu serwerach. Z tego powodu odgrywa ogromną rolę w aplikacjach typu SPA oraz architekturze wykorzystującej mikroserwisy i/lub serverless. \n\nW tym filmie dowiesz się: \n👉 Jak skonfigurować aplikację express.js ze wsparciem ES6 Modules?\n👉 Jaką rolę odgrywa plik .env i jak z nim pracować?\n👉 Jaką rolę odgrywają tokeny JWT w SPA / Mikroserwisach / Serverless\n👉 Jak wygenerować bezpieczny SECRET_TOKEN dla JWT?\n👉 Jak utworzyć tokeny JWT oraz refresh token?\n👉 Jak stworzyć middleware autoryzujący użytkownika\n👉 Jak usprawnić sobie pracę z API w VSC?\n👉 Jak bezpiecznie przechowywać tokeny w cookies httpOnly\nChcesz zawsze pozostać na bieżąco z programowaniem? \n\nE-book Sekuraka o JWT:\nhttps://sekurak.pl/darmowy-ebook-o-bezpieczenstwie-jwt-json-web-token-pierwszy-tekst-z-papierowej-ksiazki-sekuraka/\n\nE-book Auth0 o JWT:\nhttps://auth0.com/resources/ebooks/jwt-handbook\n\n\n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2021-01-25 11:00:30 json-web-tokens-w-node.js-(express.js)-or-overment ckieg15g0001bi3um0fj3gred 2021-01-25 12:00:07.59 2021-01-25 12:00:07.59 ckkf2ywqm00010vk1osonvjfl State of JS, Dark Patterns, Nowości w Chrome/DevTools - Web Prasówka #6 https://www.youtube.com/watch?v=BeWkCpYliuE Program live gdzie z Kamilem omawiamy najciekawsze newsy ze świata JS, Webdev, CSS\n\nState of JS \nhttps://2020.stateofjs.com/\n\nChrome 88\nhttps://developer.chrome.com/blog/new-in-chrome-88/\n\nNowości w WebTools \nhttps://developers.google.com/web/updates/2021/01/devtools\n\nVS Code day \nhttps://code.visualstudio.com/vscode-day\n\nDark Patterns\nhttps://darkpatterns.org/\n\nDevops.js \nhttps://devopsjsconf.com/\n\n#javascript #frontend #webdev 2021-01-27 06:54:40 state-of-js-dark-patterns-nowosci-w-chromedevtools-web-prasowka-6 ckivz8t54001di3umfv7i4q26 2021-01-27 07:01:49.247 2021-01-27 07:01:49.247 ckkgin5f700010wmcweubboe3 @ViewChild(). Komunikacja komponentów https://a-frontman.pl/viewchild-komunikacja-komponentow/?utm_source=rss&utm_medium=rss&utm_campaign=viewchild-komunikacja-komponentow

Siema! Dzisiaj zmieniamy tematykę. W cyklu #app pokazałem Ci, w jaki sposób tworzyć prostą aplikację za pomocą…

\n

Artykuł @ViewChild(). Komunikacja komponentów pochodzi z serwisu a - frontman.

2021-01-28 05:05:43 @viewchild().-komunikacja-komponentow ckio5ucds001qi3um0occaae7 2021-01-28 07:08:20.659 2021-01-28 07:08:20.659 +ck3g1qkig01t9i3ume91gatr3 Więcej niż JavaScript | Poznaj środowisko przeglądarki internetowej! https://www.youtube.com/watch?v=TUHMaIazZTc Front-end to nie tylko JavaScript. Niby wszyscy to wiemy, ale... czy na pewno? W dzisiejszym (przyznaję, dość nietypowym) filmie zachęcam cię do poszerzania swojej wiedzy o środowiskach uruchomieniowych, w tym, o jednym konkretnym - środowisku przeglądarki internetowej.\n\nA, no i rysuję sobie przy okazji!\n\nLiveQuiz: Jak dobrze znasz JavaScript -- https://livewebinar.com/524-134-796\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani\n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2019-11-26 16:00:07 wiecej-niz-javascript-or-poznaj-srodowisko-przegladarki-internetowej ckiyt1v9s001fi3umcgnxbgiu 2019-11-26 16:00:07 2019-11-26 16:00:07 ckkjteasq00010wjy4wzn1mct TypeScript: `infer` i typy warunkowe https://typeofweb.com/typescript-infer-i-typy-warunkowe/#utm_source=rss&utm_medium=rss&utm_campaign=typescript-infer-i-typy-warunkowe

Type of Web - Blog o programowaniu. 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…

\n

Poprzedni wpis na temat typów warunkowych (Conditional Types) omawiał dokładnie teorię oraz podstawowe zastosowania. W tym artykule skupimy się na niuansach, kompatybilności oraz słowie kluczowym infer, które daje nam nieograniczone możliwości instruowania kompilatora! Tekst jest fragmentem książki „TypeScript na poważnie” mojego autorstwa. Jeśli artykuł Ci się podoba, to zachęcam Cię do kupienia …

\n

Artykuł TypeScript: `infer` i typy warunkowe pochodzi z serwisu Type of Web.

2021-01-30 12:50:09 typescript:-infer-i-typy-warunkowe ckiopy3xs0006i3umgmnv8l52 2021-01-30 14:32:42.027 2021-01-30 14:32:42.027 ckkk6avlf00010wlaboad95u2 Dodanie numeracji rekordów do prismjs lub highlightjs http://kody.wig.pl/css/dodanie-numeracji-rekordow-do-prismjs-lub-highlightjs/ Większość technicznych stron chcąc prezentować kod posiłkuje się bibliotekami takimi jak highlightjs lub prismjs. Nie inaczej jest na tej stronie, użyłem highlightjs. W tych dwóch bibliotekach brakowało mi jednej rzeczy a mianowicie numeracji rekordów. Bardzo się przydaje przy informowaniu o błędzie czy gdy ktoś chce zadać pytanie odnośnie danej linii kodu. Oczywiście istnieją dodatkowe biblioteki, […] 2021-01-30 20:15:16 dodanie-numeracji-rekordow-do-prismjs-lub-highlightjs ckijj62co001hi3um2kbkcy0a 2021-01-30 20:33:57.363 2021-01-30 20:33:57.363 ckkl702ha00010wjusyjjp6kf Przemysław Gola, HTML w praktyce. Przyjazny podręcznik https://www.webkrytyk.pl/2021/01/31/przemyslaw-gola-html-w-praktyce-przyjazny-podrecznik/ Kilka osób pytało mnie, co sądzę o poradniku Przemysława Goli HTML w praktyce. Przyjazny podręcznik. Postanowiłem mu się zatem bliżej przyjrzeć. Na sam początek muszę przyznać, że podręcznik jest dokładnie tym, czym obiecuje być: prostym i przyjaznym wprowadzeniem do stworzenia pierwszej strony internetowej. I to zadanie spełnia bardzo dobrze. Niemniej osobiście widzę tutaj ten sam … Czytaj dalej Przemysław Gola, HTML w praktyce. Przyjazny podręcznik 2021-01-31 13:22:44 przemyslaw-gola-html-w-praktyce.-przyjazny-podrecznik cki2dml0o000di3umgjexb6pk 2021-01-31 13:41:18.863 2021-01-31 13:41:18.863 @@ -297,7 +302,7 @@ ckkqf3d8800010wmmdactquph Lifecycle hooks. Inicjalizacja komponentu. https://a-f ck37rxgmw01swi3umet02bnav Mentoring, mastermind i konsultacje ... ale po co? | Przeprogramowany vLog v.0.42 https://www.youtube.com/watch?v=iAY_vWdYziA Jaki sens mają mentoring, grupa mastermind czy konsultacje w kontekście np. nauki programowania? Posłuchaj co do powiedzenia ma Adam zarówno z perspektywy mentora jak i ucznia :)\n\nOdcinek podcastu Mała Wielka Firma:\nhttps://malawielkafirma.pl/mastermind-praktyczny-poradnik/ 2019-11-20 21:03:23 mentoring-mastermind-i-konsultacje-ale-po-co-or-przeprogramowany-vlog-v042 ckiyt1v9s001fi3umcgnxbgiu 2019-11-20 21:03:23 2019-11-20 21:03:23 ck39souh401szi3um0inv4qvg Inversion of Control i Dependency Injection w praktyce | Przeprogramowani ft. code v0.0.29 https://www.youtube.com/watch?v=ECHRNXxQCy8 Na czym polega Inversion of Control? Czym jest Dependency Injection? Czy oba te terminy oznaczają to samo, czy są to określenia na coś innego? Zapraszam cię na 30 minut podróży do świata JavaScriptu i Angulara, w trakcie której wszystko stanie się jasne.\n\nhttps://martinfowler.com/bliki/InversionOfControl.html\nhttps://blog.angularindepth.com/tagged/dependency-injection\n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani 2019-11-22 07:00:13 inversion-of-control-i-dependency-injection-w-praktyce-or-przeprogramowani-ft-code-v0029 ckiyt1v9s001fi3umcgnxbgiu 2019-11-22 07:00:13 2019-11-22 07:00:13 ck3ex1jrs01t7i3um0cqb1d0w Dlaczego warto DOBRZE znać JavaScript | Przeprogramowani ft.code v0.0.30 https://www.youtube.com/watch?v=HdSYKH5J3vo LiveQuiz: Jak dobrze znasz JavaScript\nRejestracja -- https://livewebinar.com/524-134-796 --\n\nKurs Opanuj JavaScript: \n-- http://przeprogramowani.pl/kurs-js --\n\nSeria o Execution Context, Hostingu i zakresie:\nhttps://www.youtube.com/watch?v=Hb0RG60gwh8\n\nEvent Loop: \nhttps://www.youtube.com/watch?v=Ysp1rh5d5ps 2019-11-25 21:00:55 dlaczego-warto-dobrze-znac-javascript-or-przeprogramowani-ftcode-v0030 ckiyt1v9s001fi3umcgnxbgiu 2019-11-25 21:00:55 2019-11-25 21:00:55 -ck3g1qkig01t9i3ume91gatr3 Więcej niż JavaScript | Poznaj środowisko przeglądarki internetowej! https://www.youtube.com/watch?v=TUHMaIazZTc Front-end to nie tylko JavaScript. Niby wszyscy to wiemy, ale... czy na pewno? W dzisiejszym (przyznaję, dość nietypowym) filmie zachęcam cię do poszerzania swojej wiedzy o środowiskach uruchomieniowych, w tym, o jednym konkretnym - środowisku przeglądarki internetowej.\n\nA, no i rysuję sobie przy okazji!\n\nLiveQuiz: Jak dobrze znasz JavaScript -- https://livewebinar.com/524-134-796\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani\n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2019-11-26 16:00:07 wiecej-niz-javascript-or-poznaj-srodowisko-przegladarki-internetowej ckiyt1v9s001fi3umcgnxbgiu 2019-11-26 16:00:07 2019-11-26 16:00:07 +ck1qaen0g01qyi3um47wxd8rp Parsowanie HTML w Node.js czyli wstęp do Cheerio (jQuery dla Node.js) https://devpebe.com/2019/10/14/parsowanie-html-w-node-js-za-pomoca-cheerio-jquery-dla-node-js/ Jak parsować HTML w Node.js? Biblioteka Cheerio dla Node.js to umożliwia. W artykule przedstawiam czym jest Cheerio i jak z jego pomocą parsować HTML, wyszukiwać elementy tak jak w jQuery. ✌ 2019-10-14 10:41:04 parsowanie-html-w-nodejs-czyli-wstep-do-cheerio-jquery-dla-nodejs ckiplfn1c001ci3um4nlf8o4x 2019-10-14 10:41:04 2019-10-14 10:41:04 ck3hke2rc01tai3umeitfcket Frameworki na frontendzie - hit czy kit? | Przeprogramowani ft.code v0.0.31 https://www.youtube.com/watch?v=yIa0waxP8tg Podziały, podziały… charakteryzują nie tylko polską scenę polityczną, ale również środowisko programistyczne. Szerzej taby vs spacje (😂), a w świecie JavaScript: frameworki… Który najlepszy? 🥊A może żaden 😎, bo jedyne co wymiata to Vanilla JS? \n\nLiveQuiz: Jak dobrze znasz JavaScript -- https://przeprogramowani.pl/webinar\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani\n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2019-11-27 17:30:03 frameworki-na-frontendzie-hit-czy-kit-or-przeprogramowani-ftcode-v0031 ckiyt1v9s001fi3umcgnxbgiu 2019-11-27 17:30:03 2019-11-27 17:30:03 ck3lyvvpk01tji3um7cl46kcd Pracuj zespołowo - Osiągaj więcej! | Przeprogramowany vLog v0.0.43 https://www.youtube.com/watch?v=RBcUQPqIDr8 "10x developer" to hipotetyczny model programisty, który jest w stanie regularnie dostarczać więcej i szybciej niż inni. Rzeczywistość pokazuje jednak, że o ile takie losowe wybuchy ogromnej produktywności mają miejsce, to zazwyczaj zaraz po nich pojawia się potrzeba odpoczynku (również zdecydowanie dłuższa, niż u innych). Dzisiaj opowiem wam o zdecydowanie zdrowszym sposobie na poprawienie osiąganych rezultatów, a mianowicie o pracy zespołowej.\n\nDodatek do filmu - https://increment.com/teams/a-place-for-polymaths/\n\nOpanuj JavaScript! - Taniej tylko teraz! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani\n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2019-11-30 19:26:53 pracuj-zespolowo-osiagaj-wiecej-or-przeprogramowany-vlog-v0043 ckiyt1v9s001fi3umcgnxbgiu 2019-11-30 19:26:53 2019-11-30 19:26:53 ck3ocqb4001tli3um8s78f3ub Jak uczyłem się programowania? | Przeprogramowany vLog release v0.0.44 https://www.youtube.com/watch?v=40SopFexDag To gdzie jestem teraz, wiesz doskonale. Czy wiesz jak wyglądała moja droga do tego punktu? Idę o zakład, że przynajmniej kilka z wymienionych przeze mnie momentów, nie są Ci obce. W tym filmie opowiadam o tym, co sprawiło że zostałem programistą. \n\nArtykuł Przemka nt. wytrwałości: https://przeprogramowani.pl/cecha-programistow-ktorzy-chca-wiecej\nArtykuł/Film Marcina nt. Anki: https://przeprogramowani.pl/poznaj-metode-ktora-odmieni-twoja-nauke-programowania/\n\nStrona naszego kursu: "Opanuj JavaScript": \nhttps://przeprogramowani.pl/kurs-javascript/ 2019-12-02 11:30:00 jak-uczylem-sie-programowania-or-przeprogramowany-vlog-release-v0044 ckiyt1v9s001fi3umcgnxbgiu 2019-12-02 11:30:00 2019-12-02 11:30:00 @@ -307,6 +312,7 @@ ckqcp0rmz00020wl71fhgqttp react-leaflet w przykładach http://kody.wig.pl/react/ ckkcn049800010wljacvzfsl7 Czy sztuczna inteligencja (AI) zabierze ci pracę w Web Development? https://fsgeek.pl/post/przyszlosc-ai-w-web-development/ Sztuczna inteligencja (AI) zaczyna być wykorzystywana wszędzie. Już nawet lodówki mają zaimplementowane funkcjonalności oparte o AI (a… 2021-01-25 16:00:00 czy-sztuczna-inteligencja-(ai)-zabierze-ci-prace-w-web-development ckhxjb6o0000yi3umb3hg09jv 2021-01-25 13:59:19.437 2021-01-25 13:59:19.437 ckkgo9dq900010wky8ly8n1hl Jak testować API – Postman https://tworcastron.pl/blog/jak-testowac-api-postman/

czy zastanawiałeś się kiedyś jak testować swoje API? Próbujesz napisać backend, ale nie wiesz czy Endpointy odpowiednio działają? Nie wiesz jak przetestować logowanie przez API? Dzisiaj opowiem o narzędziu bez […]

\n

Artykuł Jak testować API – Postman pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-01-28 09:32:22 jak-testowac-api-postman ckbbw3jvs000li3umgw19edq9 2021-01-28 09:45:35.937 2021-01-28 09:45:35.937 ckqdgn1e400020wmjqur0gal0 Poznaj querySelector i przestań używać getElementsBy… https://frontcave.pl/poznaj-queryselector-i-przestan-uzywac-getelementsby/

btw – kod może Cię zaskoczyć! Spis treści Wprowadzenie QuerySelector/querySelectorAll Kilka słów o querySelector Słówko o querySelectorAll Dwa słowa o pewnej nieścisłości Kod przykładu na Github Klikalny przykład na Github Pages Dlaczego querySelector jest lepszy od innych metod? Podsumowanie Wprowadzenie Lat temu bardzo dużo główną przewagą jQuery nad czystym JS było to, że ujednolicała i … Czytaj dalej Poznaj querySelector i przestań używać getElementsBy…

\n

Artykuł Poznaj querySelector i przestań używać getElementsBy… pochodzi z serwisu Front Cave.

2021-06-26 07:33:14 poznaj-queryselector-i-przestan-uzywac-getelementsby... ckirm3wzs001li3umfdkcfl6k 2021-06-26 07:47:11.692 2021-06-26 07:47:11.692 +cj7yjca8g00s5i3um4aarfsgb Konferencja: FrontEnd Connect 2017 https://piecioshka.pl/blog/2017/09/24/konferencja-frontend-connect-2017.html

Dziś konferencja w miejscu, gdzie jeszcze nigdy nie byłem a \nmianowicie w Warszawskim Centrum EXPO XXI. To tutaj codziennie mają \nmiejsce różnego rodzaju targi, koncerty itp wydarzenia z dużą liczbą \nuczestników.

\n\n

Aby dojechać do miejsca konferencji musiałbym wykorzystać wszystkie środki \nkomunikacji miejskiej (sic!), stąd też zainwestowałem 20zł i pojechałem \ntaxi! 🚕

\n\n
\n Baner reklamujący artykuł\n
\n\n

Frekwencja

\n\n

Na stronie konferencji można przeczytać:

\n\n
\n

v1.000 participants including over 30 world renowned speakers in the field \nof front-end development will meet at the heart of Warsaw, Poland for two \ndays…

\n
\n\n

Niestety, ale więcej niż 300 osób to obie sale nie pomieściły. Ile to już razy\norganizatorzy konferencji się zawodzą i ogłaszają, że przyjdzie 2-3x więcej \nuczestników niż faktycznie przychodzi.

\n\n\n\n

Miejsce

\n\n

Budynek na starcie zrobił na mnie spore wrażenie. Strasznie duży z zewnątrz \nwięc i w wewnątrz było sporo przestrzeni - przykładem niech będą najszersze \nschody (wewnątrz budynku) jakie w życiu widziałem (przepraszam, ale nie zrobiłem\nim zdjęcia) 😁

\n\n\n\n

Powitanie

\n\n

Na starcie zostałem powitany przez “zespół rejestracyjny”, który wiedział\nże przychodzę z ramienia WarsawJS. Cieszę się, że ludzie rozpoznają \nmoją twarz. Oznacza to, że wydarzenia które organizuje są coraz bardziej \npopularne.

\n\n

Po rejestracji, wśród stoisk sponsorskich spotkałem Ulę z którą\nzamieniłem kilka słów.

\n\n

Ciekawostka! Wiecie, że firma Uli - Evojam - jest najnowszym \nsponsorem wydarzeń WarsawJS Workshop.

\n\n

Moje bystre oko zauważyło na stoisku firmy Evojam słoiki. \nZdziwiłem sie dosyć, bo po co komu słoiki na konferencji?\nMałe słoiczki stojące na wydzielonym stoliku miały w sobie dżem.\nTo chyba oczywiste, ale co to ma wspólnego z konferencją?

\n\n

Przeczytajcie jeszcze raz nazwę firmy…

\n\n
\ne w o d ż e m\n
\n\n

Zagadka rozwiązana.

\n\n\n\n

Prelekcje

\n\n

Jak to zwykle bywa, na pierwszej prelekcji nie jestem \nobecny z powodu spóźnialstwa, które nagminnie uprawiam.

\n\n

Czasami już tak jest, że się spóźnię, bo np. za późno wstanę, ale nie tym\nrazem. Dzisiaj dzień zacząłem o 8:30. Umówiłem się z moim masażystą, aby \nnaprostował mi kręgosłup, który cierpi na co dzień, kiedy pracuje się tak \nciężko:

\n\n
\n \n\n
\n Źródło: http://www.habitbull.com/2014/11/04/these-three-mini-habits-will-make-your-day-infinitely-better/\n
\n
\n\n

Wracając do konferencji. Pierwsza prelekcja (zwana zwykle \nkeynote-em - czyli prelekcją obfitującą w wiedzę, inspirującą \noraz nakreślającą główną tematykę wydarzenia) została poprowadzona przez Lea \nVerou, która opowiadała o zmiennych w CSS.

\n\n

Jak możecie się domyśleć (na pewno nie :P) przeczytałem to z agendy \nspotkania, wydrukowaną i przyklejoną na drzwiach do sal wykładowych.

\n\n

Temat dosyć stary (2015), ale dopiero od niedawna przeglądarki zaimplementowały\nspecyfikację. Jeśli chciałbyś poczytać więcej na temat zmiennych w CSS,\nzerknij do specyfikacji CSS Variables.

\n\n

Druga prelekcja (@ Henri Bergius)

\n\n
\n

Flow-Based Programming for JavaScript

\n
\n\n

Zaczynajmy wreszcie omawiać prelekcje konkretniej!

\n\n

Pierwszy talk (na której byłem obecny w 100%) był na temat podejścia \nflow-based w programowaniu.

\n\n

Chyba popełniłem błąd, że wybrałem tego tracka… prelegent w bardzo nudny \nsposób opowiadał o tym podejściu w programowaniu.

\n\n

W drugiej sali prelekcja była o TypeScripcie i nie wiem czy nie lepiej było \nudać się do konkurencyjnej sali. No trudno.

\n\n

Z trzeciej strony, znam TypeScript na tyle, że ciężko by było zaskoczyć \nmnie czymś, dlatego nie wybrałem tamtej sali. Chciałem usłyszeć coś nowego.

\n\n

No niestety, ani prelekcja, ani temat mnie nie zainteresował.\nKilka linków od autora:

\n\n\n

Przerwa!

\n\n

Co ciekawe, po 2 prelekcjach odbyła się 30 minutowa przerwa.\nBardzo ciekawe dlaczego organizatorzy zaplanowali tak długą przerwę na \npoczątku konferencji?

\n\n\n\n

Zobaczymy co będzie się dalej działo po przerwie. Stay tuned!

\n\n

Trzecia prelekcja (@ Kacper Sokołowski)

\n\n
\n

You use Content Security Policy, don’t you?

\n
\n\n

…na temat bezpieczeństwa! Uwielbiam ten temat.

\n\n

Kacper (z CodeWise), znany prelegent \nwarszawskich konferencji, opowiedział o atakach na strony internetowe. \nZaczęło się od XSS.

\n\n
\n

Nie wiesz co to jest XSS? Zerknij tutaj albo tutaj.

\n
\n\n\n\n

•

\n\n

Pytanie do czytelników :question::books:

\n\n

Czy chcielibyście, abym zrobił na blogu kurs na temat XSS?

\n\n

Poruszył bym takie tematy:

\n\n\n

•

\n\n

Pierwsza aplikacja jaka padła ofiarą ataku, była zwykłym systemem blogowym.\nPrelegent podjął się ataku Session Hijacking poprzez Cookie Stealing. \nOczywiście misja zakończyła się sukcesem.

\n\n

Z prelekcji można było się sporo dowiedzieć na temat CSP.

\n\n

Content Security Policy opiera się na nagłówkach HTTP. Kiedy tworzymy nowy \nprojekt to warto zdefiniować listę adresów z których pliki JavaScript będę \nściągane i uruchamiane. Warto zdefiniować także sposób ich wykonywania. Jedyny \nminus CSP jest taki, że jest on wspierany przez małą liczbę providerów \n“hostingowych”.

\n\n

Kacper polecił stronę owasp.org, na której opisane są popularne \nbłędy w webaplikacjach.

\n\n

Czwarta prelekcja (@ Vitalii Bobrov Glenn Reyes)

\n\n
\n

Leveraging code-splitting in React apps

\n
\n\n

Na początku poszedłem na prelekcje Vitaliia na temat Angular CLI.\nPo kilku zdaniach zrozumiałem, że muszę zmienić track i pójść na drugi na \nktórym Glenn opowiadał o Code Spliting w aplikacji opartej na\nReact.js

\n\n

CS to bardzo ważny feature w dzisiejszych aplikacjach. Wchodząc na dowolną \nstronę, nie trzeba pobierać i uruchamiać modułów / komponentów, które nie są \nna niej potrzebne.

\n\n

Code Splinting:

\n\n\n

Przykład z wykorzystaniem async/await oraz dynamic imports:

\n\n\n\n

Wskazówki od prelegenta:

\n\n\n

Źródła polecane przez Glenna:

\n\n\n

Kolejna długa przerwa?

\n\n

Pamiętacie Mary, która wygrała pierwszy konkurs uruchomiony na łamach\ntego bloga? Dla przypomnienia Mary wygrała bilet na konferencję\nJS Poland 2017, jednak podczas tamtej konferencji nie \nspotkaliśmy się oko w oko. Spotkaliśmy się za to podczas konferencji FrontEnd\nConnect 2017!

\n\n

Tym razem przerwa trwała godzinę zegarową. Podczas niej na uczestników czekał \nsmakowity lunch! Także i ja razem z Danielem - mentorem 10 \nedycji WarsawJS Workshop - zjedliśmy porcję kremu \npomidorowego.

\n\n
\n

Mary - jeśli to czytasz - miło było przybić z Tobą piąteczkę!

\n
\n\n

Piąta prelekcja (@ Ferran Negre Pizarro)

\n\n
\n

Testing React & Redux applications with the new Jest: Snapshots come into play!

\n
\n\n

Ferran wygłosił prelekcję na temat testowania z wykorzystaniem \nnarzędzia Jest oraz mechanizmu Snapshot Testing.

\n\n\n\n

Szósta prelekcja (@ Simona Cotin & Artur Daschevici)

\n\n
\n

There and Back again - Angular and React

\n
\n\n

Kolejne wprowadzenie do Angulara i Reacta.

\n\n

Nie mam dzisiaj ochoty słuchać o tym jak zacząć nowy projekt\nw oparciu o te technologie. Człowiek tyle razy zaczynał projekt\ni tutaj nie ma jakiegoś “rocket science” - wchodzisz na pierwszy\nlepszy tutorial i kopiujesz polecenia. Tyle.

\n\n

Podczas prelekcji było porównanie stworzenia tego samego komponentu\nw React-cie oraz Angularze. Prelegenci porównywali liczbę linijek\ni wyszło, że React potrzebuje więcej linijek, aby wygenerować komponent, więc\njest lepszy.

\n\n

Matko, co za bzdury… od kiedy to liczba linijek kodu developerskiego\njest jakimkolwiek wyznacznikiem, że dana technologia jest lepsza albo gorsza?

\n\n

Prelekcja była prowadzona przez dwie osoby, ale i tak całe przemówienie było\nwedług mnie dosyć nudne (chociaż Simona ładnie się \nuśmiechała) i mało wnoszące dla developera, który już posiada doświadczenie \nw dowolnych frameworkach (nawet niewielkie).

\n\n

Prelegenci porównywali jak przetrzymywany jest stan w aplikacjach zbudowanych\nw oparciu o Angulara oraz Reacta (+Reduxa).

\n\n

•

\n\n

Czy tylko ja uważam, że taka prelekcja jest ZAWSZE na każdej konferencji?\nCzy w dzisiejszych czasach, kiedy te dwie technologie są na rynku już dość\ndługo, potrzebujemy jeszcze prelekcji w stylu “jak zacząć”?

\n\n

Dajcie znać w komentarzu, czy zgadzacie się ze mną, czy może posiadacie\njednak inne zdanie w sprawie prelekcji dla początkujących.

\n\n

•

\n\n

Kolejny omówiony temat to przekazywanie danych pomiędzy komponentami.

\n\n

Jak przekazać dane od “dziecka” do “rodzica”? A no dzięki \nnastępującym narzędziom MobX lub Redux. Mało tego!\nDzięki ww. narzędziom możliwe jest przekazanie danych z dowolnego miejsca w \naplikacji do innego. Wspaniałe!

\n\n
\n

Zatrzymaj się!

\n

Drogi developerze Angulara, może lepiej wykorzystać @ngx-store do \nprzekazywania danych między komponentami, zamiast “Outputować” i “Inputować”?

\n
\n\n

Siódma prelekcja (@ Andrey Okonetchnikov)

\n\n
\n

Modular CSS

\n
\n\n

Druga prelekcja na temat CSS. Tym razem poprowadzona przez \nautora Color Snapper - narzędzia do pobierania koloru z \nekranu.

\n\n

Według prelegenta:

\n\n

W dzisiejszych czasach wszystkie elementy na stronie są pewnego rodzaju \nkomponentami, które prezentują stan aplikacji. Tym samym można zapisać \nnastępujące równanie:

\n\n
f(state) = UI\n
\n\n

Następnie Andrey opowiedział o BEM-ie.

\n\n
\n

Znasz tą technologię? Jeśli nie, przeczytaj mój artykuł na ten temat.

\n
\n\n
\n 3 Pandas\n\n
\n Źródło: Reddit\n
\n
\n\n

Natura BEM-a powoduje, że praca z nim wymaga dużo czasu. Z pomocą przychodzą \nnam moduły! Technologia CSS Modules świetnie się sprawdza razem z BEMem.

\n\n\n\n

JSS (cssinjs.org)

\n\n\n\n
\n

Generalnie warto przetestować w swoim projekcie!

\n
\n\n

Ósma prelekcja pierwszego dnia konferencji

\n\n

Prelekcja poświęcona miękkim skillom, m.in. zaufaniu managera dla \nzespołu deweloperskiemu.

\n\n
\n \n\n
\n Scrum Daily Meeting: Jak powinno wyglądać? A jak jest u nas.\n
\n
\n\n

Dziewiąta (ostatnia pierwszego dnia) prelekcja (@ Ruth John)

\n\n
\n

How To Be a Web AV Artist

\n
\n\n

Podczas prelekcji Ruth pokazała jak za pomocą JavaScript stworzyć \nmuzykę a co najciekawsze, jak pod tą muzykę stworzyć wizualizacje!

\n\n

Dzięki udostępnieniu mikrofonu możemy w locie tworzyć bardzo ciekawe \nwizualizacje. Temat bardzo mi się spodobał, szczególnie ze względu na sposób \npoprowadzenia prelekcji. No i te piękne slajdy… Good job Ruth!

\n\n\n\n

Na swoim profilu na Codepen, Ruth posiada ogromną ilość \nwizualizacji dźwięku. Polecam zerknąć!

\n\n

Prace Ruth można także zobaczyć w organizacji livejs na GitHubie.

\n\n

HEROES PARTY (@ Evojam) :confetti_ball: 🍻

\n\n

Po prelekcjach organizatorzy zorganizowali imprezkę. Raczej to taki \nnetworking z lemoniadą, chipsami i karaoke. Obecny był także DJ oraz foto budka.\nŚwietny pomysł!

\n\n

•

\n\n

Nie byłem obecny drugiego dnia konferencji więc nie wiem co się podczas tego \ndnia działo. Warto zerknąć na hashtag: #FrontendCon2017

\n\n

•

\n\n

Wskazówki dla organizatorów

\n\n

…aby kolejna edycja konferencji była jeszcze lepsza!

\n\n
    \n
  1. \n

    Wolne działanie strony internetowej

    \n\n

    I to nie jest jakieś moje widzi-misie, ale kilkadziesiąt sekund aż się \n strona załaduje spowoduje, że dowolny internauta tego nie zaakceptuje.

    \n\n

    Podczas konferencji strona bardzo często zwracała następujący komunikat

    \n\n
    \n 504\n \n
    \n HTTP Status 504\n
    \n
    \n
    2. \n
  2. \n

    Wersja mobilna strony konferencji pozostawiała wiele do życzenia.

    \n\n

    Nie mogłem zobaczyć jak jest agenda spotkania! Na to będę mocno narzekał.\n Podczas konferencji uczestnicy muszą wiedzieć jaki jest plan. Od tego \n jest strona internetowa aby INFORMOWAŁA.

    \n
    3. \n
  3. \n

    Niewykorzystana przestrzeń na identyfikatorze

    \n\n

    Każdy przy rejestracji dostaje identyfikator, na którym jest nasze imię \n i nazwisko, oraz na odwrocie… agenda spotkania! Tak bardzo ważna \n informacja, której zabrakło.

    \n\n

    Jeśli organizatorzy nie chcieli wrzucać agendy (nie wiadomo jakiego \n powodu) to chociaż mogli oddać to miejsca dla sponsorów. Wyobrażam sobie,\n że taki Gold Sponsor, mógłby wrzucić tutaj swoje logo, albo \n ogłoszenie o pracę. A tutaj tabularaza. Smutne.

    \n
    4. \n
\n\n

Za co chciałbym pochwalić tegoroczną edycję?

\n\n
    \n
  1. \n

    Uśmiech osób w rejestracji

    \n\n

    Kiedyś mój kolega powiedział mi pewne zdanie, które ciągle pamiętam i \n powtarzam je sobie pod nosem. Nie przytoczę go tutaj dokładnie bo nie \n chcę używać wulgaryzmów w swojej publikacji, ale główny sens na pewno\n będzie dla Was jasny:

    \n\n
    \n

    “Najważniejsze jest pierwsze wrażenie”\nZdzisław Sondej (2009)

    \n
    \n
    2. \n
  2. \n

    Panele dyskusyjne podczas przerw

    \n\n

    Długie przerwy miały swój plus. Można było porozmawiać z prelegentami, \n którzy wyszli wcześniej na scenę ze swoją prelekcją, i zadać dowolne \n pytanie.

    \n\n \n
    3. \n
\n\n\n\n
</figure>\n
\n\n
    \n
  1. \n

    Stoliki technologiczne

    \n\n

    Podczas konferencji na stolikach “barowych” stały tabliczki z nazwami \n technologi o których się rozmawiało. Można było porozmawiać o takich \n technologiach jak: React.js, HTML5, Angular, RxJS czy Vue.js które \n ściągnęło największą liczbę chętnych do rozmowy.

    \n\n
    \n \n
    \n
    2. \n
\n\n

•

\n\n

Podsumowanie

\n\n

Serdecznie dziękuję organizatorom za zaproszenie ❤️

\n\n

Cieszę się, że zobaczyłem kolejny raz jak zorganizowana jest \nkonferencja. FrontEnd Connect 2017 ma trochę rzeczy na sumieniu, ale i tak \nwarto było przyjść i posłuchać o nowościach w branży.

\n\n

Do zobaczenia na kolejnej konferencji czyli NG Poland 2017 \n21 listopada.

2017-09-24 09:22:10 konferencja-frontend-connect-2017 ckbw97zyw0007i3umdszu2ola 2017-09-24 09:22:10 2017-09-24 09:22:10 cja579al400uti3um957w4t2x Template, Component, Data Binding & nasz pierwszy komponent https://www.nettecode.com/template-component-data-binding/

W poprzednim artykule omówiliśmy podstawową architekturę aplikacji angularowej. Dziś stworzymy nasz pierwszy komponent. Wymagania wstępne: Spisane w formie checklisty (do wydrukowania bądź podglądu/importu jako szablon Nozbe): Checklista do wydrukowania Szablon Nozbe do podglądu i pobrania Materiały do nauki oraz informacje co i jak znajdziesz we wpisie Tworzymy aplikację  webową – krok po kroku – podsumowanie […]

\n

Artykuł Template, Component, Data Binding & nasz pierwszy komponent pochodzi z serwisu NetteCode.

2017-11-18 10:37:43 template-component-data-binding-and-nasz-pierwszy-komponent ckhnmdge00000i3um6batg2gk 2017-11-18 10:37:43 2017-11-18 10:37:43 ckkqjtzjj00010wjuztw5od76 require(#27) - Frontend kiedyś i dziś feat. Tomasz Łakomy https://anchor.fm/require/episodes/require27---Frontend-kiedy-i-dzi-feat--Tomasz-akomy-eptqhp

W najnowszym odcinku, razem z naszym gościem - Tomkiem Łakomym - rozmawiamy o zmianach, które w ciągu ostatniej dekady zmieniły to jak tworzymy aplikacje webowe i co o nich myślimy. Od jQuery po pojawienie się frameworków, przez zmiany wagi kodu backendowego i wydajność na frontendzie, po testowanie, nacisk na UX/UI i podejście do hostingu. 

\n


\n

Po linki i więcej informacji zapraszamy do archiwum na naszej stronie!

2021-02-04 07:36:30 require(27)-frontend-kiedys-i-dzis-feat.-tomasz-lakomy ckius9kiw001ki3um2blndfkq 2021-02-04 07:39:21.008 2021-02-04 07:39:21.008 ckkr1yzsy00010wl57uq88q5k UUID zamiast auto-increment ID w Laravelu https://webroad.pl/php/7905-uuid-zamiast-auto-increment-id-w-laravelu Zamiast stosować przewidywalne, inkrementowane identyfikatory w tabelach bazy danych zaleca się często, ze względów bezpieczeństwa, używanie tzw. UUID, czyli unikalnych identyfikatorów tekstowych. Taki klucz w tabeli maksymalnie niweluje skuteczność ataków polegających na kolejnym odpytywaniu URL, zwiększając jedynie parametr ID o jeden. Na przykładzie PHP i Laravela zademonstruję sposób na użycie UUID w projekcie. Laravel i […] 2021-02-04 15:58:18 uuid-zamiast-auto-increment-id-w-laravelu ckir2fk800008i3um9c21fesl 2021-02-04 16:07:07.714 2021-02-04 16:07:07.714 @@ -322,7 +328,7 @@ cjwbz8f6o01ldi3um3b67ap1m Metodologia BEM. Jak pisać dobry kod CSS. Praktyczne ck0f8ypmg01pli3um2vzvfl8u Filtrowanie tablicy z wieloma warunkami – .filter() https://devpebe.com/2019/09/11/filtrowanie-tablicy-z-wieloma-warunkami-filter/ W artykule przedstawię jak filtrować dane na podstawie wielu warunków. Przyda się do bardziej zaawansowanego filtrowania danych. 2019-09-11 12:35:31 filtrowanie-tablicy-z-wieloma-warunkami-filter ckiplfn1c001ci3um4nlf8o4x 2019-09-11 12:35:31 2019-09-11 12:35:31 ck168g0z401q9i3um3u5pbfjf Zapisywanie JSONa do pliku w Node.js https://devpebe.com/2019/09/30/zapisywanie-jsona-do-pliku-w-node-js/ Jak zapisać dane do pliku JSON w Node.js? Pokażę jak to zrobić za pomocą modułu File System, który dostępny jest w Node.js. 2019-09-30 09:50:46 zapisywanie-jsona-do-pliku-w-nodejs ckiplfn1c001ci3um4nlf8o4x 2019-09-30 09:50:46 2019-09-30 09:50:46 ck1c0zlco01qhi3umhvh8a7ki 14 programów graficznych dla front-end developera https://devpebe.com/2019/10/04/programy-graficzne-dla-front-end-developera/ Jakie programy graficzne powinien znać front-end deweloper? W tym artykule przedstawiam listę programów graficznych, o których front-end deweloper (i nie tylko on) powinien wiedzieć. 2019-10-04 11:08:39 14-programow-graficznych-dla-front-end-developera ckiplfn1c001ci3um4nlf8o4x 2019-10-04 11:08:39 2019-10-04 11:08:39 -ck1qaen0g01qyi3um47wxd8rp Parsowanie HTML w Node.js czyli wstęp do Cheerio (jQuery dla Node.js) https://devpebe.com/2019/10/14/parsowanie-html-w-node-js-za-pomoca-cheerio-jquery-dla-node-js/ Jak parsować HTML w Node.js? Biblioteka Cheerio dla Node.js to umożliwia. W artykule przedstawiam czym jest Cheerio i jak z jego pomocą parsować HTML, wyszukiwać elementy tak jak w jQuery. ✌ 2019-10-14 10:41:04 parsowanie-html-w-nodejs-czyli-wstep-do-cheerio-jquery-dla-nodejs ckiplfn1c001ci3um4nlf8o4x 2019-10-14 10:41:04 2019-10-14 10:41:04 +cj0cq2920009hi3uma5lkdm1s Skąd uczyć się JS za darmo? http://kot-zrodlowy.pl/javascript/dajsiepoznac2017/2017/03/16/skad-sie-uczyc-js-za-darmo.html Cześć, To znowu ja! 2017-03-16 18:21:27 skad-uczyc-sie-js-za-darmo cjy7sgxs0000bi3umeb9z90rn 2017-03-16 18:21:27 2017-03-16 18:21:27 ck1um8t2801r6i3umccj5gmb9 Testowanie aplikacji z Enzyme i Jest – Kurs React – cz. 7 https://devpebe.com/2019/10/17/testowanie-aplikacji-z-enzyme-i-jest-kurs-react-cz-7/ Czym są i jak pisać testy jednostkowe w React? W tej części przedstawiam jak pisać testy jednostkowe w Enzyme i Jest. Wszystko opisane jest krok po kroku. 2019-10-17 11:23:32 testowanie-aplikacji-z-enzyme-i-jest-kurs-react-cz-7 ckiplfn1c001ci3um4nlf8o4x 2019-10-17 11:23:32 2019-10-17 11:23:32 ck2pzj4m801s6i3umfgra42vx Scrapowanie strony WWW z Cheerio w Node.js – praktyczny przykład https://devpebe.com/2019/11/08/scrapowanie-strony-www-z-cheerio-w-node-js-praktyczny-przyklad/ Cheerio poznaliśmy już w poprzednim artykule. Teraz przedstawię jak napisać prosty scraper www na podstawie mojego skryptu. 2019-11-08 10:16:20 scrapowanie-strony-www-z-cheerio-w-nodejs-praktyczny-przyklad ckiplfn1c001ci3um4nlf8o4x 2019-11-08 10:16:20 2019-11-08 10:16:20 ck2x5c19s01sji3umalfhdkyq Tworzenie podstron z React Router (v5) – Kurs React – cz. 8 https://devpebe.com/2019/11/13/tworzenie-podstron-z-react-router-v5-kurs-react-cz-8/ Jak tworzyć podstrony za pomocą React Router? W tej części kursu pokazuję jak to zrobić oraz wyjaśniam czym jest React Router i jak działa. 2019-11-13 10:33:10 tworzenie-podstron-z-react-router-v5-kurs-react-cz-8 ckiplfn1c001ci3um4nlf8o4x 2019-11-13 10:33:10 2019-11-13 10:33:10 @@ -346,6 +352,8 @@ ckkv65f2o00010wl9fmm74cl6 Czy warto tworzyć API w Strapi (headless CMS)? Pierws ckkxqzrw300010vl4wodzpq2y Praca z Git – Git Flow https://frontstack.pl/praca-z-git-git-flow/?utm_source=rss&utm_medium=rss&utm_campaign=praca-z-git-git-flow

Git jest aktualnie jednym z tych narzędzi, które jest niemal niezbędne podczas rozwijania aplikacji. Ten niezwykle popularny system kontroli wersji jest stosunkowo łatwy do nauczenia się oraz zaimplementowania w naszych projektach. Jednym z pierwszych pytań, które powstają zaraz po opanowaniu Gita, jest – „No dobra, ale jak tego teraz dobrze używać?”. Nieprzemyślane commitowanie, branchowanie, mergowanie […]

\n

The post Praca z Git – Git Flow appeared first on Frontstack.pl.

2021-02-09 08:13:40 praca-z-git-git-flow ckc4s1jmo001ii3um6ovu5nhk 2021-02-09 08:34:11.571 2021-02-09 08:34:11.571 ckqffb7l800020vmlab9fkpyu TypeScript: Projekt cz.6 #18 https://www.youtube.com/watch?v=350f8DoSNsw Szósty odcinek projektu w TypeScript a w nim:\n- klasa ProductPage,\n- klasa FrontendBooksPage,\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Klasa ProductPage\n11:50 Klasa FrontendBooksPage 2021-06-27 16:00:03 typescript:-projekt-cz.6-18 ckjpkgp9u000012mnlbnkxu51 2021-06-27 16:45:32.589 2021-06-27 16:45:32.589 ckqg9qgnb00020wl678afurob JavaScript zmienne i wartości https://www.youtube.com/watch?v=gWpegbS6NCw W tym odcinku porozmawiamy sobie o zmiennych i wartościach. Dlaczego myślenie o zmiennej jak o pudełku może wyrządzić Ci więcej szkody niż pożytku.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-06-28 05:51:53 javascript-zmienne-i-wartosci ckmoh2k1y000050l0rtc97ktd 2021-06-28 06:57:12.647 2021-06-28 06:57:12.647 +cj0jbz2e000a8i3um043618ru Czy warto chodzić na hackathony http://kot-zrodlowy.pl/dajsiepoznac2017/offtop/2017/03/21/wrazenia-z-hackathonu.html Cześć! Witam was dzisiaj w pierwszym poście po burzliwym weekendzie, bo oj działo się działo. Bez zbędnych ceregieli, odbył się pierwszy bydgoski Hackathon. Impreza dla wszelkiej maści programistów... 2017-03-21 09:21:27 czy-warto-chodzic-na-hackathony cjy7sgxs0000bi3umeb9z90rn 2017-03-21 09:21:27 2017-03-21 09:21:27 +ckc8rp0gw024fi3um3hmldsi2 Czy jesteśmy więźniami open source? https://fsgeek.pl/post/czy-jestesmy-wiezniami-open-source/

Open source jest rozwiązaniem, które dostarcza nam ogromną ilość bibliotek, frameworków czy innych narzędzi z których korzystamy na co dzień jako programiści. Jednak nie macie wrażenia, że stajemy się przez to trochę leniwi lub nawet stajemy się trochę więźniami open source?

\n\n

Open source the good part

\n\n

Nie da się zaprzeczyć, że współcześnie programowanie opiera się na rozwiązaniach open source. React, Angular, Vue, Node, Express, Material Design, Symfony, Laravel - tę listę można by wydłużać w nieskończoność. Trzeba przyznać, że dzięki pracy pojedynczych programistów jak i całych zespołów możemy korzystać z tych rozwiązań i przyśpieszać naszą codzienną pracę. Tu od razu też apel by, jeśli chcecie się jakoś odwdzięczyć, to najlepszym sposobem będzie pomoc w naprawianiu błędów i rozwijaniu produktu. Nie tak dawno twórca Lodash (z którego pewnie większość z was korzysta) prosił o pomoc w rozwijaniu tego jak i innych projektów

\n\n\n\n

Więc jeśli widzicie, że w waszej ulubionej bibliotece są jakieś problemy, które chcielibyście naprawić to nie wahajcie się napisać do twórcy jak możecie pomóc - myślę, że doceni chęć pomocy :)

\n\n

Open source the bad part

\n\n

Jednak nie jest tak, że open source nie jest pozbawione wad. Nie macie wrażenia, że jedną z myśli dotyczących jakiegoś problemu jest “A może jest biblioteka do tego?”. Nie mam nic przeciwko małym bibliotekom, które dostarczają konkretnych rozwiązań ale czy każda linijka powinna trafiać jako paczka npm’a i być ściągana przy tworzeniu projektu? Świetnym przykładem jest biblioteka is-even, której kod wygląda następująco:

\n\n
var isOdd = require('is-odd');\n\nmodule.exports = function isEven(i) {\n  return !isOdd(i);\n};\n
\n\n

Czyli dodajemy nową bibliotekę do projektu by odwrócić wynik i zwrócić. I okazuje się, że z tej biblioteki według Githuba korzysta ponad 3 tys repozytoriów (link do źródła). Nie uważacie, że to trochę za dużo jak na takiego jednolinijkowca? Zresztą dalej nie jest lepiej ponieważ is-odd zależy od is-number. I od tej ostatniej w githubie zależy 6 milionów repozytoriów (źródło). Cały czas się zastanawiam dlaczego zamiast napisać małą funkcję, która będzie siedzieć w naszym kodzie decydujemy się na pobranie kolejnej zależności nad którą nie mamy władzy. I potem chodzą memy, że ściągając node_modules ściągamy pół internetu ;)

\n\n

Inna sprawa to coś co ja określam jako interfejs do interfejsu do interfejsu do biblioteki. Jako przykład podam bibliotekę mongoose i mongodb (do obu nic nie mam, korzystałem z obu i chcę by tutaj posłużyły tylko jako przykład). Mongodb jest oficialną biblioteką do połączeń z bazą danych MongoDB od twórców, natomiast mongoose jest wrapperem na mongodb i dostarcza kolejną warstwę abstrakcji. I pewnie jakbym poszukał bardziej w githubie to znalazłbym nakładkę na mongoose. Problem z takimi nakładkami pojawia się gdy w oryginalnym rozwiązaniu (w tym przypadku w bazie danych MongoDB) pojawia się błąd, albo nowa funkcjonalność (która oczywiście jest nam potrzebna). I teraz w zależności ile mamy takich nakładek to czas w którym to do nas dotrze rozciąga się od bardzo szybko do nigdy (jeśli biblioteka zdążyła zostać porzucona). I tak jak w moim przykładzie mongodb, jako że jest od twórców, dostanie poprawkę bardzo szybko to w mongoose będziemy musieli poczekać bo a) zależy od mongodb b) może się okazać, że trzeba przerobić część abstrakcji, która nie uwzględniła np.: jakiegoś parametru lub sytuacji.

\n\n

Kontrola nad package.json

\n\n

Cały post ma na celu tak naprawdę zachęcić do zastanowienia się nad tym co instalujemy do naszych projektów. Chciałbym zachęcić do tego by się zastanowić podczas instalacji czy naprawdę potrzebujemy do tego nową bibliotekę. Może da się to zrobić prostą funkcją, albo przekopiować kod z biblioteki, którą chcemy użyć np.: is-even, is-odd itd. Zalet takiego rozwiązania jest kilka:

\n\n\n\n

Gorąco polecam stronę bundlephobia.com gdzie możecie sprawdzić rozmiar biblioteki i ile ma zależności. Bardzo przydatne narzędzie kiedy macie dwie biblioteki i zastanawiacie się nad wyborem jednej - polecam by wybierać te o najmniejszym rozmiarze i minimalną liczbą zależności. Również jeśli macie do wyboru bibliotekę a rozwiązanie, które nakłada kolejny interfejs zachęcam do zastanowienia się czy naprawdę go potrzebujecie. Bo jeśli nie będziecie go w pełni wykorzystywać albo widzicie, że będą z czymś problemy to może warto skorzystać z oryginalnego rozwiązania?

\n\n

A wy co sądzicie o tym co napisałem o open source? Zgadzacie się czy macie inne przemyślenia? Staracie się kontrolować ilość i wielkość instalowanych zależności w projekcie?

2020-07-05 07:41:56 czy-jestesmy-wiezniami-open-source ckhxjb6o0000yi3umb3hg09jv 2020-07-05 07:41:56 2020-07-05 07:41:56 ckkxxg2h900010wjtafjhxw56 ABC Scruma - dla programistów i programistek szukających pierwszej pracy w IT https://kernelgonnapanic.pl/2021/02/09/ABC-Scruma-dla-szukajacych-pierwszej-pracy-w-it/

Ze Scrumem jest tak: jeśli już pracujesz w IT to z pewnością wiesz mniej więcej o co w nim chodzi. Nie przeraża Cię używane słownictwo, w praktyce poznałeś/poznałaś rodzaje wydarzeń w Scrumie. Nawet jeśli nie był to najlepiej zorganizowany Scrum na świecie to chociaż wiesz jak może on wyglądać w praktyce. Gorzej jeśli dopiero zaczynasz swoją karierę w IT. Wtedy ten sposób organizacji pracy zapewne będzie dla ciebie nieznany. Warto wcześniej dowiedzieć się o nim więcej, by ułatwić sobie wejście w branżę (a także np. zabłysnąć na rozmowie kwalifikacyjnej). Dziś dostarczam Wam pigułkę wiedzy na start plus linki, gdzie możecie dowiedzieć się więcej. 2021-02-09 11:30:00 abc-scruma-dla-programistow-i-programistek-szukajacych-pierwszej-pracy-w-it ckesj8kg0000vi3um42jmc86u 2021-02-09 11:34:49.486 2021-02-09 11:34:49.486 ckl0ogkjl00010wldwdso5uv4 Projekt “Notatki” – Przetwarzamy dane na backendzie (mongoose) https://tworcastron.pl/blog/projekt-notatki-przetwarzamy-dane-na-backendzie-mongoose/

Kolejny odcinek z serii projekt praktyczny “Notatnik”.  Jest to projekt praktyczny oparty na Node + React + MongoDB.  W dzisiejszym odcinku pora obsłużyć przetwarzanie danych na backendzie. Dane przechowywane są w […]

\n

Artykuł Projekt “Notatki” – Przetwarzamy dane na backendzie (mongoose) pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-02-11 09:31:31 projekt-"notatki"-przetwarzamy-dane-na-backendzie-(mongoose) ckbbw3jvs000li3umgw19edq9 2021-02-11 09:46:34.881 2021-02-11 09:46:34.881 ckl191kqm00010wl53z5oi9p4 Houdini - Nowe oblicze CSS https://www.youtube.com/watch?v=qNk99Ka2qIU CSS Houdini to nowe, niskopoziomowe API dające możliwość rozszerzenia CSS i dostępu do elementów procesu renderowania strony na wczesnym etapie. To z kolei daje nam opcję tworzenia zaawansowanych i wydajnych elementów interfejsu. W tym warsztacie dowiesz się jak to działa w praktyce i dlaczego jest to tak głośny temat. 2021-02-11 19:00:18 houdini-nowe-oblicze-css ckieg15g0001bi3um0fj3gred 2021-02-11 19:22:47.231 2021-02-11 19:22:47.231 @@ -362,7 +370,6 @@ cj50rrmhs00oai3umelwnd7my WarsawJS Meetup #34 https://piecioshka.pl/blog/2017/07 cj64lxxuo00pyi3um1rqd311a Jak napisać testy integracyjne z wykorzystaniem Nightwatch.js oraz Chrome Headless? https://piecioshka.pl/blog/2017/08/09/jak-napisac-testy-integracyjne-z-wykorzystaniem-nightwatch-oraz-chrome-headless.html

Podczas tego weekendu poznałem Mateusza - testera oprogramowania, który chce \nsię przebranżowić. Wiecie kim chce zostać? No nie uwierzycie. Chce zostać \nFront-end Developerem. To już kolejna osoba, której podoba się wytwarzanie \noprogramowania klienckiego. Świetnie!

\n\n

Bardzo się cieszę, że kolejna osoba się przebranżawia. Wymaga to od niej dużo \nodwagi, cierpliwości no i najważniejsze - samozaparcia.

\n\n
\n

Post skierowany jest do testerów oprogramowania, którzy znają składnię JavaScript.

\n
\n\n
\n Baner reklamujący artykuł\n
\n\n

Historia Mateusza

\n\n

Mati opowiedział mi o swoim doświadczeniu z poprzedniej pracy, w której to \nbył testerem aplikacji webowych. Nudziło go klikanie non stop w tą samą \naplikację za każdym razem, kiedy developerzy chcą wypuścić nową wersję \naplikacji. Nie dziwi mnie to.

\n\n

W mojej pracy też mamy zespół testerów, którzy muszą mieć mega silną \npsychikę powtarzać te same czynności non stop. Panowie jeśli to czytacie\nto szacun oraz :trophy: dla każdego z Was.

\n\n

Zastanawiam się, jak ja bym sobie poradził w takiej roli. Nie wiem, czy nie \ndenerwowałbym się, ponieważ:

\n\n\n\n

Tak źle i tak nie dobrze.

\n\n

•

\n\n

Jak przechytrzyć programistę?

\n\n

Uwielbiam pisać testy. Nie ma znaczenia jakie. Jestem wychowany tak, że gdy \nmam napisany test to czuję pewność napisanej przeze mnie implementacji, bo \nprzecież nieważne jak ją napiszę, jeśli testy świecą się ciągle na zielono.

\n\n
\n

Pytanie 1: Czy można napisać testy, które zastąpią manualne klikanie \ntestera?

\n\n

Śmiem twierdzić, że tak.

\n\n

Pytanie 2: Czy mógłbym zdefiniować kroki scenariusza testowego gdzieś w \naplikacji, aby uruchamiać te kroki za każdym razem, aby zbadać czy nie ma \nregresu?

\n\n

Pewnie!

\n
\n\n

Jednak wcale nie potrzebujesz dostępu do projektu. Możesz takie testy trzymać\nna swoim komputerze (oczywiście najlepiej źródła wypchnąć do prywatnego \nrepozytorium na GitHubie), dzięki czemu żaden developer nawet nie będzie \nwiedział o Twoim pomyśle.

\n\n

Walka z Selenium (jeśli znasz, to pomiń ten akapit)

\n\n

Każdy developer kiedyś słyszał o Selenium. Jest to dość skomplikowane \nnarzędzie do ogarnięcia. Pisanie testów odbywa się z wykorzystywaniem \nskładni zdefiniowanej w Selenium. Wg mnie jest to średni pomysł. Ale jest na \nto sposób!

\n\n
\n

Nie wiesz co to jest Selenium?

\n

Nie będę teraz tego wyjaśniał. Powstało sporo artykułów na ten temat.
\nZobacz tutaj albo tutaj albo w Wikipedii.

\n
\n\n

Na ten moment chciałbym przedstawić Ci na obrazku jak cały mechanizm.\nMoim zdaniem jeden rysunek jest wart “tysiąc słów”.

\n\n
\n Komunikacja Selenium serwera ze stroną internetową\n\n
\n Schemat działania Selenium.
\n Diagram stworzony z użyciem narzędzia:\n draw.io.\n \n
\n
\n\n

Straż nocna

\n\n

Napiszemy testy integracyjne, które będę realizowały 2 scenariusze:

\n\n\n\n

…oraz zrobimy screenshot testowanej strony internetowej, po to aby móc\nnp. pokazać developerowi jak wygląda błąd “zauważony przez testera”.

\n\n
\n

Yay

\n

Piękna sprawa. Nie trzeba będzie powtarzać błędnego flow.
\nNarzędzie za nas zrobi zrzut ekranu.

\n
\n\n

Testy będziemy pisać korzystając z narzędzia Nightwatch.js.
\nNie znasz? Strona domowa projektu dostępna jest tutaj.

\n\n

•

\n\n

Tylko dodam, że w narzędziu Nightwatch.js można pisać również testy\njednostkowe. Więcej na ten temat dowiesz się z tego miejsca.

\n\n

•

\n\n

Step by step

\n\n
\n

Stworzyłem projekt na GitHubie, który posiada gotową (opisywaną w tym \nartykule) konfigurację Nightwatch.js (Selenium) + Chrome Headless.

\n
\n\n

1) Stworzenie pustego katalog (na projektu).

\n\n

To chyba jasne i nie muszę tego pisać, jednak napiszę, aby rozwiać wszelkie \nwątpliwości.

\n\n

2) Stworzenie pliku package.json

\n\n

Masz dwie opcje aby posiadać taki plik:

\n\n\n\n

Ze swojej strony polecam drugą opcję. Jest szybsza.

\n\n

3) Instalacja narzędzi

\n\n
$ npm install nightwatch selenium-standalone \n
\n\n

Ważne aby, te dwie zależności znalazły się pliku package.json. Tym samym \ndasz możliwość uruchomienia przez innego testera Twojego projektu z testami, \n(albo nawet przez programistę).

\n\n

4) Dodanie odpowiednich zadań do package.json

\n\n

Proponuję dodać 2 następujące zadania:

\n\n
{\n    "scripts": {\n        "selenium:start": "selenium-standalone install && selenium-standalone start",\n        "test:integration": "nightwatch"\n    }\n}\n
\n\n

Pierwsze skonfiguruje i uruchomi serwer Selenium. Drugie natomiast uruchomi\nskrypty testujące napisane w JavaScript korzystające z API biblioteki \nNightwatch.js.

\n\n

5) Konfiguracja narzędzia Nightwatch.js

\n\n

Testowanie tak samo jak aplikacja, może być bardzo skomplikowane, stąd też \nnależy wykorzystać plik konfiguracyjny, gdzie zdefiniujemy jak ma działać \nnarzędzie do uruchamiania testów integracyjnych (Nightwatch.js).

\n\n

Przedstawiam podstawową konfigurację, jaka powinna się znaleźć\nw pliku nightwatch.json - w katalogu głównym projektu. Nie będę opisywał pól, \ntylko zapraszam do dokumentacji.

\n\n
{\n    "src_folders": [\n        "test/integration/"\n    ],\n\n    "output_folder": "reports",\n\n    "test_settings": {\n        "default": {\n            "silent": true,\n\n            "desiredCapabilities": {\n                "browserName": "chrome",\n                "chromeOptions": {\n                    "args": [\n                        "--headless"\n                    ],\n                    "binary": "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary"\n                }\n            }\n        }\n    }\n}\n
\n\n
\n

Pod klucze binary znajduje się ścieżka do programu, który ma być \nuruchamiany na potrzeby weryfikacji scenariuszy. Na systemach Windows, należy\nwkleić ścieżkę zmieniając backslashe (domyślna forma rozdzielenia katalogów)\nna slashe.

\n
\n\n

Na uwagę zasługuje wykorzystanie argumentu "--headless", z którym będzie \nuruchamiana przeglądarka Google Chrome Canary.

\n\n

Headless to nowy feature w tej przeglądarce, który pozwala na uruchomienie \nprzeglądarki bez GUI. Zainteresowany jak działa ten feature?\nPrzeczytaj tutaj.

\n\n

Na stronie opisujące ten feature jest ostrzeżenie (w języku angielskim):

\n\n
Caution: Headless mode is available on Mac and Linux in Chrome 59. \nWindows support is coming in Chrome 60. \nTo check what version of Chrome you have, open chrome://version.\n
\n\n

W skrócie, testy polegające na otwieraniu strony i analizowaniu jej treści \nmogą przebiegać bez otworzenia przeglądarki. Jaki jest tego plus? Ja widzę \njeden podstawowy - wydajność, tj. skrócenie czasu potrzebnego na uruchomienie\ntestów.

\n\n
\n

A co powiesz na temat PhantomJS?

\n

Wykorzystanie Headless to nie jedyny sposób, aby uruchomić takie testy. \nMożna wykorzystać narzędzie PhantomJS. Nie polecam jednak tego narzędzia z \nuwagi na to, że wykorzystuje ono stary silnik Chrome-a do \nrenderowanie - Webkit, gdzie Headless korzysta z najnowszego - Blink.

\n
\n\n

6) Pierwszy test: Czy strona posiada tekst?

\n\n

Testy musisz zdefiniować w pliku stworzonym w katalogu z definiowanym w \nkonfiguracji pod kluczem src_folders.

\n\n

I tak na przykład stwórz plik: test.example.js, który będzie wykorzystywał \nskładnię CommonJS, aby wyeksportować obiekt jako moduł.

\n\n
const TARGET_PAGE_URL = 'https://piecioshka.pl/blog/';\n\nmodule.exports = {\n    'Is header contains correct text?': (browser) => {\n        browser.url(TARGET_PAGE_URL);\n        browser.waitForElementVisible('body', 3000);\n        browser.assert.containsText('h2', 'Piotr Kowalski');\n        browser.end();\n    }\n};\n
\n\n

Co tutaj się dzieje? Generalnie każda para klucz-wartość to pewien scenariusz.\nJego nazwa zapisana jest w kluczu, a kroku w definicji funkcji.

\n\n

Pełne API, czyli definicja akcji, które możesz zrobić na stronie dostępna \njest tutaj.

\n\n

Wskazówki, na temat jak pisać poprawnie testy integracyjne są opisane na \nstronie projektu. Link do przewodnika jest tutaj.

\n\n

7) Drugi test: Czy strona zawiera odpowiednią ilość elementów?

\n\n
// ...\nmodule.exports = {\n    // ...\n    'Is main part of app contains proper number of elements?': (browser) => {\n        browser.url(TARGET_PAGE_URL);\n        browser.waitForElementVisible('body', 3000);\n        browser.elements('css selector', '#menu li', (result) => {\n            if (result.value.length !== 4) {\n                browser.assert.fail('Number of elements is not correct');\n            }\n        });\n        browser.end();\n    }\n}\n
\n\n

8) Trzecia opcja: Zrzut ekranu

\n\n
// ...\nmodule.exports = {\n    // ...\n    'Capture screenshot to see manually that page looks correct': (browser) => {\n        browser.url(TARGET_PAGE_URL);\n        browser.waitForElementVisible('body', 1000);\n        let filename = './screenshots/screenshot-' + new Date().toISOString() + '.png';\n        browser.saveScreenshot(filename);\n        browser.end();\n    }\n};\n
\n\n

9) Uruchomienie testów integracyjnych, które właśnie napisaliśmy

\n\n

Teraz wystarczy, że otworzysz 2 okna terminala:

\n\n\n\n
\n

Java

\n

Selenium wymaga zainstalowanego środowiska do uruchomiania programów \nnapisanych w języku Java. Środowisko to nazywa się JRE - Java Runtime \nEnvironment.
\nPobierz najnowszą wersję z http://java.com/

\n
\n\n

Poniżej przedstawiam Ci jak wygląda druga konsola w której uruchamiam testy:

\n\n
\n \n
\n\n

Serwera nie ma co pokazywać. Tam się dzieje magia, na którą nie wolno patrzeć.

\n\n

Pytania

\n\n

Pozwolisz, że zadam Ci teraz kilka pytań. Swoje odpowiedzi umieść proszę w \nkomentarzu:

\n\n
    \n
  1. Jak Ci się podoba takie podejście do testowania?
    2. \n
  2. Czy jako tester pokazałabyś programiście kod, który testuje jego aplikację,\n czy jednak wolałbyś zostawić go dla siebie, aby developer nie miał wpływu\n na definicję scenariuszy?
    3. \n
  3. Czy przetestowałeś, jak Nightwatch.js oraz Chrome Headless sprawują się \n w projekcie, który jest wykorzystywany w Twojej pracy?
    4. \n
  4. Czy takie testy powinny być tworzone przez programistów, czy raczej przez \n testerów oprogramowania?
    5. \n
\n\n
\n

Będę wdzięczny za odpowiedzi.
\nPamiętaj, że komentarze są po to, aby prowadzić w nich dyskusje.

\n
\n\n

PS Mateusz, mam nadzieję, że pomogłem. Piona!

2017-08-09 06:02:12 jak-napisac-testy-integracyjne-z-wykorzystaniem-nightwatchjs-oraz-chrome-headless ckbw97zyw0007i3umdszu2ola 2017-08-09 06:02:12 2017-08-09 06:02:12 cj6flwcsw00qci3umg09jfpiy Widziałeś kiedyś pliki *.swp? Kilka słów o plikach tymczasowych w Vimie https://piecioshka.pl/blog/2017/08/17/vim-porzadek-z-plikami-tymczasowymi.html

Jeśli nie jesteś użytkownikiem edytora Vim, to ten artykuł może nie być dla \nCiebie. Jeśli jednak ciekawi Cię co chciałbym Ci dziś pokazać to zapraszam do\nniniejszego artykułu.

\n\n
\n Baner reklamujący artykuł\n
\n\n

Vim

\n\n

Nie będę w tym artykule rozpisywał się dlaczego jestem użytkownikiem tego \nedytora. Nie chcę też pisać o jego korzyściach (pomimo tego, że jest to \npierwszy artykuł na jego temat).

\n\n

Chcę Ci powiedzieć jak przyjemnie zaczęło mi się korzystać z edytora, kiedy \nustawiłem w konfiguracji pewną opcję. Dzięki jednej linijce konfiguracji \ndałem sobie kolejny zastrzyk empatii dla tego edytora.

\n\n

Przechodząc do sedna.

\n\n

Jestem przekonany, że wiele razy wpadałeś w konsternację kiedy\nwidziałeś / widziałaś (oczywiście nie piszę artykułów tylko do mężczyzn, jednak \nnie będę za każdym razem pisał obu form) sytuację podobną do tej:

\n\n
\n \n\n
\n Mnogość plików tymczasowych powala.\n
\n
\n\n

Po co są pliki *.swp?

\n\n

Edytor Vim w domyślnej konfiguracji tworzy pliki kopii zapasowej w tym \nsamym katalogu co plik źródłowy. Po to, aby móc przywrócić oryginalną wersję \npliku, kiedy np. komputer się wyłączy (np. z powodu braku amunicji w baterii).

\n\n

Z jednej strony jest to sympatyczne, bo wiesz gdzie jest taki plik z kopią.\nJednak z drugiej strony widzisz “prawie”1 zawsze zdublowaną strukturę \nplików, kiedy otworzysz np. kilka instancji edytora.

\n\n

Jak sobie poradzić?

\n\n

Możemy ustawić, aby edytor zapisywał pliki z backupami gdzieś indziej,\nnp. w katalogu z konfiguracjami edytora - w katalogu domowym użytkownika\ntj. ~/.vim/swp/.

\n\n
\n

Wskazówka

\n

Przed dodaniem magicznej linijki, zobacz co aktualnie kryje się \npod zmienną directory wydając polecenie (w otworzonym edytorze):

\n
\n\n
set directory\n\n# albo\n\necho &directory\n
\n\n

Dla przykładu mój wynik:

\n\n
directory=.,~/tmp,/var/tmp,/tmp\n
\n\n

Jeśli chciałbyś dopisać katalog na początek listy to możesz to zrobić za pomocą \npolecenia:

\n\n
set directory^=$HOME/.vim/swp/\n\n# Poskutkuje to zmianą wartości w zmiennej "directory" na:\ndirectory=$HOME/.vim/swp/,.,~/tmp,/var/tmp,/tmp\n
\n\n

Aby dopisać na koniec listy, wykorzystaj operator +=, np.

\n\n
set directory+=$HOME/.vim/swp/\n\n# Poskutkuje to zmianą wartości w zmiennej "directory" na:\ndirectory=.,~/tmp,/var/tmp,/tmp,$HOME/.vim/swp/\n
\n\n

Druga opcja nie rozwiąże problemu. Edytor \nbędzie sprawdzał, czy może zapisać pliki tymczasowe w kolejnych katalogach. \nZacznie od ., czyli od katalogu w którym edytowany jest plik.

\n\n

Czy mogę wyświetlić moje pliki tymczasowe?

\n\n

Oczywiście. Uruchom narzędzie, które jest schowane pod przełącznikiem -r:

\n\n
$ vim -r\n
\n\n

Polecenie przeszukuje katalogi (ustawione w zmiennej directory)\noraz prezentuje stan plików o rozszerzeniu .swp.

\n\n

Kiedy narzędzie nie znajdzie nic, zwróci coś w tym stylu:

\n\n
Swap files found:\n   In directory ~/.vim/swp/:\n      -- none --\n   In current directory:\n      -- none --\n   In directory ~/tmp:\n      -- none --\n   In directory /var/tmp:\n      -- none --\n   In directory /tmp:\n      -- none --\n
\n\n

Ups… mamy problem

\n\n

W tej sytuacji w katalogu ~/.vim/swp/ edytor będzie tworzyły pliki z \nprefiksem kropki (.) oraz z rozszerzeniem .swp.

\n\n

Gdy głębiej się zastanowisz, to sytuacja nie przewiduje pewnego przypadku.

\n\n
\n

Co jeśli będę chciał edytować dwa pliki index.html?
\nCzy utworzą się wtedy dwa pliki .index.html.swp?

\n
\n\n

Nie. No bo jakim cudem mogły by istnieć dwa pliki o tej samej nazwie w tym \nsamym katalogu?

\n\n

Naszym oczom ukaże się błąd w stylu:

\n\n
E325: ATTENTION\nFound a swap file by the name "~/.vim/swp/index.html.swp"\n    ...\n
\n\n

Edytor da nam możliwość przywrócenia poprzedniej wersji pliku - tej przed \notworzeniem.

\n\n
\n

Więcej na temat błędu znajdziesz w pomocy :h e325.

\n
\n\n

Co teraz? Czy nie będę mógł edytować dwóch plików index.html?

\n\n

Spokojnie. Wystarczy drobna poprawka i będzie śmigać.

\n\n

Dodaj “slesza” (/) do Twojej ścieżki. Vim rozpozna, że chcesz by pliki \ntymczasowe posiadały w nazwie strukturę katalogów w której się znajdują. Tym\nsamym unikniesz kolizji! :sunglasses:

\n\n

Poprawne ustawienie katalogu z plikami tymczasowymi:

\n\n
set directory^=$HOME/.vim/swp//\n
\n\n

Dodaj powyższą linijkę do pliku ~/.vimrc.

\n\n
\n \n\n
\n Przykład jak wyglądają pliki tymczasowe, kiedy otwarte są dwa pliki \n index.html. Problem solved!\n
\n
\n\n

Droga na skróty

\n\n

Jeśli chcesz mieć święty spokój to najlepiej jest uruchomić Vima z opcją \n-n. Opcja ta powoduje, że plik tymczasowy nigdy nie zostanie stworzony \nprzez uruchomioną instancję programu. Tym samym nigdy nie będziesz mieć \nmożliwości przywrócenie stanu pliku do poprzedniego. Coś za coś.

\n\n
$ vim -n\n
\n\n

Albo!

\n\n

Podczas uruchomionego edytora możesz zmienić opcję updatecount na 0, co \ndaje podobny efekt, tzn. nie są rejestrowane zmiany w pliku. Co ciekawe, \njuż stworzony plik .swp nie zostanie usunięty.

\n\n
set uc=0\n
\n\n

Albo…

\n\n

Możesz zastosować nową opcję w konfiguracji, aby nie tworzyć tego rodzaju \nplików tymczasowych. Dodaj następującą linijkę w pliku .vimrc:

\n\n
set noswapfile\n
\n\n

Teraz będziesz mieć święty spokój.

\n\n

•

\n\n

Podsumowanie

\n\n

Aby wydzielić pliki *.swp do zewnętrznego katalogu:

\n\n

1) Stwórz katalog na pliki tymczasowe:

\n\n
$ mkdir ~/.vim/swp/\n
\n\n

2) Dopisz do pliku .vimrc:

\n\n
set directory^=$HOME/.vim/swp//\n
\n\n

Bibliografia

\n\n

Wersja angielska artykułu dostępna jest tutaj: vi.stackexchange.com/a/179/13884

\n\n

•

\n\n
\n
    \n
  1. \n

    Dla przypomnienia: “prawie robi wielką różnicę”. ↩

    \n
    2. \n
\n
2017-08-16 22:46:26 widziales-kiedys-pliki-swp-kilka-slow-o-plikach-tymczasowych-w-vimie ckbw97zyw0007i3umdszu2ola 2017-08-16 22:46:26 2017-08-16 22:46:26 cj6zkhcr400qyi3umagq27io1 Angular Warsaw #13 + Moja prelekcja https://piecioshka.pl/blog/2017/08/31/angular-warsaw-13.html

Dziś opowiem Wam trochę o moich doświadczeniach z Angularową sceną, czyli \nkilka słów o mojej ostatniej prelekcji podczas AngularJS\nWarsaw #13.

\n\n
\n \n\n
\n Nowe logo organizacji Angular Warsaw.\n
\n
\n\n

Zmiana nazwy organizacji

\n\n

Pierwsze o czym należy wspomnieć (poza aktualizacją loga - zobacz \npoprzednie artykuły na temat Angularowych meetupów) to zmiana nazwy \norganizacji:

\n\n

\n AngularJS Warsaw ➜ Angular Warsaw\n

\n\n
\n \n \n
\n Banner reklamujący wydarzenie. Źródło Meetup.com\n
\n
\n\n

Bycie prelegentem

\n\n

To już drugi raz kiedy byłem prelegentem podczas tej serii meetupów. Co \nciekawe pierwszy raz na Angularowej scenie zawitałem podczas 3-ej edycji \nAngularJS Warsaw, równo 2 lata temu, tj: 26-08-2015.

\n\n

Bardzo dziękuję Darkowi, które mnie zaprosił do bycia speakerem \npodczas kolejnej edycji spotkania fanów Angulara.

\n\n

Mogłem coś powiedzieć o Angularze jak i o bibliotece, która jest mocno \nwykorzystywana tj. RxJS. Kto jeszcze nie zna niech wpadnie \ntutaj.

\n\n
\n \n \n
\n Banner reklamujący wydarzenie. Źródło Twitter.com\n
\n
\n\n

Przygotowania

\n\n

Do czasu jaki trzeba zawsze poświęcić przygotowując się do prelekcji \nchciałbym doliczyć czas jaki przygotowywałem się do szkolenia WarsawJS \nWorkshop #9.

\n\n

Na potrzeby szkolenia stworzyłem następujące projekty:

\n\n\n\n

które bardzo pomogły mi podczas zrozumienia zasad panujących w bibliotece \nRxJS oraz generalnie w programowaniu reaktywnym.

\n\n

Talk #1: TDD AngularJS application [PL] Wojtek Przechodzeń

\n\n

Niestety nie wiem o czym Wojtek opowiadał, ponieważ na spotkanie przyszedłem\ndelikatnie spóźniony i usłyszałem tylko brawa kończące prelekcję.

\n\n

Wojciech przygotował 3 projekty, które pomogły mu przedstawić omawiany problem.\nJeśli jesteś zainteresowany autorskim projektem, który jest \nwykorzystywany w Wojtka firmie do pisania testów w Angular.js to zerknij na \nnastępujące linki:

\n\n\n\n

Po prelekcji zrobiłem delikatny wywiad z uczestnikami, z którego wynikało, że\nprelekcja była bardzo interesująca. Tym samym z tego miejsca chciałem \npogratulować wystąpienia :trophy:

\n\n\n\n

•

\n\n

Talk #2: Angular pierwsze kroki [PL] Dariusz Kalbarczyk

\n\n

Druga prelekcja spotkania - którą po prowadził organizator - była na temat \nzapoznania się z nowym światem Angulara w wersji 4.

\n\n

Znakomita większość ludzi programuje jeszcze w Angular.js, jednak wiele z \nnich chciałoby się przesiąść na nową wersję (a raczej na nowy framework).

\n\n

Podczas prelekcji mogliśmy się dowiedzieć co nowego pojawiło się w \nnowym Angularze.

\n\n\n\n

•

\n\n

Talk #3: RxJS okiem doświadczonego inżyniera [PL] Piotr Kowalski

\n\n

Moja pierwsza prelekcja podczas AngularJS Warsaw nie była nagrywana. A \nszkoda, bo pamiętam, że wielu ludziom się podobała. Tym razem \nprzechytrzyłem system i nagrałem ją swoim aparatem.

\n\n

Nie będę się dłużej rozpisywał (co by sztucznie nie przeciągać). Jeśli masz 20 \nkilka minut to zapraszam do oglądania “chachłackiej” prelekcji (albo nawet do\nwysłuchania, bo nie ma szczególnie na co patrzeć - lepiej otworzyć slajdy).

\n\n\n\n

W przygotowaniach do prelekcji stworzyłem jeszcze jeden projekt, który to \nobrazuje najpopularniejszy problem z programowaniu sieciowym, tj. Race \nCondition - czyli tzw. wyścigi. Nie ma nic bardziej frustrującego jak \nniedeterministyczny problem - czyli taki, która raz się pojawia raz nie.

\n\n

Zainteresowanych odsyłam do projektu na GitHubie.

\n\n\n\n

•

\n\n

Sponsorzy spotkania

\n\n

Podziękowania należą się sponsorowi, tj. firmie 7N, w \nktórej pracuje organizator spotkań - Dariusz.\nFirma szuka pracowników, więc jeśli szukasz pracy to uderz do nich.

\n\n

•

\n\n

Kolejna prelekcja jaką wygłoszę odbędzie się podczas 3 urodzin WarsawJS.\nWydarzenie odbędzie się 13 września w restauracji\n“The Place” w Warsaw Spire.

2017-08-30 22:02:10 angular-warsaw-13-moja-prelekcja ckbw97zyw0007i3umdszu2ola 2017-08-30 22:02:10 2017-08-30 22:02:10 -cj7yjca8g00s5i3um4aarfsgb Konferencja: FrontEnd Connect 2017 https://piecioshka.pl/blog/2017/09/24/konferencja-frontend-connect-2017.html

Dziś konferencja w miejscu, gdzie jeszcze nigdy nie byłem a \nmianowicie w Warszawskim Centrum EXPO XXI. To tutaj codziennie mają \nmiejsce różnego rodzaju targi, koncerty itp wydarzenia z dużą liczbą \nuczestników.

\n\n

Aby dojechać do miejsca konferencji musiałbym wykorzystać wszystkie środki \nkomunikacji miejskiej (sic!), stąd też zainwestowałem 20zł i pojechałem \ntaxi! 🚕

\n\n
\n Baner reklamujący artykuł\n
\n\n

Frekwencja

\n\n

Na stronie konferencji można przeczytać:

\n\n
\n

v1.000 participants including over 30 world renowned speakers in the field \nof front-end development will meet at the heart of Warsaw, Poland for two \ndays…

\n
\n\n

Niestety, ale więcej niż 300 osób to obie sale nie pomieściły. Ile to już razy\norganizatorzy konferencji się zawodzą i ogłaszają, że przyjdzie 2-3x więcej \nuczestników niż faktycznie przychodzi.

\n\n\n\n

Miejsce

\n\n

Budynek na starcie zrobił na mnie spore wrażenie. Strasznie duży z zewnątrz \nwięc i w wewnątrz było sporo przestrzeni - przykładem niech będą najszersze \nschody (wewnątrz budynku) jakie w życiu widziałem (przepraszam, ale nie zrobiłem\nim zdjęcia) 😁

\n\n\n\n

Powitanie

\n\n

Na starcie zostałem powitany przez “zespół rejestracyjny”, który wiedział\nże przychodzę z ramienia WarsawJS. Cieszę się, że ludzie rozpoznają \nmoją twarz. Oznacza to, że wydarzenia które organizuje są coraz bardziej \npopularne.

\n\n

Po rejestracji, wśród stoisk sponsorskich spotkałem Ulę z którą\nzamieniłem kilka słów.

\n\n

Ciekawostka! Wiecie, że firma Uli - Evojam - jest najnowszym \nsponsorem wydarzeń WarsawJS Workshop.

\n\n

Moje bystre oko zauważyło na stoisku firmy Evojam słoiki. \nZdziwiłem sie dosyć, bo po co komu słoiki na konferencji?\nMałe słoiczki stojące na wydzielonym stoliku miały w sobie dżem.\nTo chyba oczywiste, ale co to ma wspólnego z konferencją?

\n\n

Przeczytajcie jeszcze raz nazwę firmy…

\n\n
\ne w o d ż e m\n
\n\n

Zagadka rozwiązana.

\n\n\n\n

Prelekcje

\n\n

Jak to zwykle bywa, na pierwszej prelekcji nie jestem \nobecny z powodu spóźnialstwa, które nagminnie uprawiam.

\n\n

Czasami już tak jest, że się spóźnię, bo np. za późno wstanę, ale nie tym\nrazem. Dzisiaj dzień zacząłem o 8:30. Umówiłem się z moim masażystą, aby \nnaprostował mi kręgosłup, który cierpi na co dzień, kiedy pracuje się tak \nciężko:

\n\n
\n \n\n
\n Źródło: http://www.habitbull.com/2014/11/04/these-three-mini-habits-will-make-your-day-infinitely-better/\n
\n
\n\n

Wracając do konferencji. Pierwsza prelekcja (zwana zwykle \nkeynote-em - czyli prelekcją obfitującą w wiedzę, inspirującą \noraz nakreślającą główną tematykę wydarzenia) została poprowadzona przez Lea \nVerou, która opowiadała o zmiennych w CSS.

\n\n

Jak możecie się domyśleć (na pewno nie :P) przeczytałem to z agendy \nspotkania, wydrukowaną i przyklejoną na drzwiach do sal wykładowych.

\n\n

Temat dosyć stary (2015), ale dopiero od niedawna przeglądarki zaimplementowały\nspecyfikację. Jeśli chciałbyś poczytać więcej na temat zmiennych w CSS,\nzerknij do specyfikacji CSS Variables.

\n\n

Druga prelekcja (@ Henri Bergius)

\n\n
\n

Flow-Based Programming for JavaScript

\n
\n\n

Zaczynajmy wreszcie omawiać prelekcje konkretniej!

\n\n

Pierwszy talk (na której byłem obecny w 100%) był na temat podejścia \nflow-based w programowaniu.

\n\n

Chyba popełniłem błąd, że wybrałem tego tracka… prelegent w bardzo nudny \nsposób opowiadał o tym podejściu w programowaniu.

\n\n

W drugiej sali prelekcja była o TypeScripcie i nie wiem czy nie lepiej było \nudać się do konkurencyjnej sali. No trudno.

\n\n

Z trzeciej strony, znam TypeScript na tyle, że ciężko by było zaskoczyć \nmnie czymś, dlatego nie wybrałem tamtej sali. Chciałem usłyszeć coś nowego.

\n\n

No niestety, ani prelekcja, ani temat mnie nie zainteresował.\nKilka linków od autora:

\n\n\n

Przerwa!

\n\n

Co ciekawe, po 2 prelekcjach odbyła się 30 minutowa przerwa.\nBardzo ciekawe dlaczego organizatorzy zaplanowali tak długą przerwę na \npoczątku konferencji?

\n\n\n\n

Zobaczymy co będzie się dalej działo po przerwie. Stay tuned!

\n\n

Trzecia prelekcja (@ Kacper Sokołowski)

\n\n
\n

You use Content Security Policy, don’t you?

\n
\n\n

…na temat bezpieczeństwa! Uwielbiam ten temat.

\n\n

Kacper (z CodeWise), znany prelegent \nwarszawskich konferencji, opowiedział o atakach na strony internetowe. \nZaczęło się od XSS.

\n\n
\n

Nie wiesz co to jest XSS? Zerknij tutaj albo tutaj.

\n
\n\n\n\n

•

\n\n

Pytanie do czytelników :question::books:

\n\n

Czy chcielibyście, abym zrobił na blogu kurs na temat XSS?

\n\n

Poruszył bym takie tematy:

\n\n\n

•

\n\n

Pierwsza aplikacja jaka padła ofiarą ataku, była zwykłym systemem blogowym.\nPrelegent podjął się ataku Session Hijacking poprzez Cookie Stealing. \nOczywiście misja zakończyła się sukcesem.

\n\n

Z prelekcji można było się sporo dowiedzieć na temat CSP.

\n\n

Content Security Policy opiera się na nagłówkach HTTP. Kiedy tworzymy nowy \nprojekt to warto zdefiniować listę adresów z których pliki JavaScript będę \nściągane i uruchamiane. Warto zdefiniować także sposób ich wykonywania. Jedyny \nminus CSP jest taki, że jest on wspierany przez małą liczbę providerów \n“hostingowych”.

\n\n

Kacper polecił stronę owasp.org, na której opisane są popularne \nbłędy w webaplikacjach.

\n\n

Czwarta prelekcja (@ Vitalii Bobrov Glenn Reyes)

\n\n
\n

Leveraging code-splitting in React apps

\n
\n\n

Na początku poszedłem na prelekcje Vitaliia na temat Angular CLI.\nPo kilku zdaniach zrozumiałem, że muszę zmienić track i pójść na drugi na \nktórym Glenn opowiadał o Code Spliting w aplikacji opartej na\nReact.js

\n\n

CS to bardzo ważny feature w dzisiejszych aplikacjach. Wchodząc na dowolną \nstronę, nie trzeba pobierać i uruchamiać modułów / komponentów, które nie są \nna niej potrzebne.

\n\n

Code Splinting:

\n\n\n

Przykład z wykorzystaniem async/await oraz dynamic imports:

\n\n\n\n

Wskazówki od prelegenta:

\n\n\n

Źródła polecane przez Glenna:

\n\n\n

Kolejna długa przerwa?

\n\n

Pamiętacie Mary, która wygrała pierwszy konkurs uruchomiony na łamach\ntego bloga? Dla przypomnienia Mary wygrała bilet na konferencję\nJS Poland 2017, jednak podczas tamtej konferencji nie \nspotkaliśmy się oko w oko. Spotkaliśmy się za to podczas konferencji FrontEnd\nConnect 2017!

\n\n

Tym razem przerwa trwała godzinę zegarową. Podczas niej na uczestników czekał \nsmakowity lunch! Także i ja razem z Danielem - mentorem 10 \nedycji WarsawJS Workshop - zjedliśmy porcję kremu \npomidorowego.

\n\n
\n

Mary - jeśli to czytasz - miło było przybić z Tobą piąteczkę!

\n
\n\n

Piąta prelekcja (@ Ferran Negre Pizarro)

\n\n
\n

Testing React & Redux applications with the new Jest: Snapshots come into play!

\n
\n\n

Ferran wygłosił prelekcję na temat testowania z wykorzystaniem \nnarzędzia Jest oraz mechanizmu Snapshot Testing.

\n\n\n\n

Szósta prelekcja (@ Simona Cotin & Artur Daschevici)

\n\n
\n

There and Back again - Angular and React

\n
\n\n

Kolejne wprowadzenie do Angulara i Reacta.

\n\n

Nie mam dzisiaj ochoty słuchać o tym jak zacząć nowy projekt\nw oparciu o te technologie. Człowiek tyle razy zaczynał projekt\ni tutaj nie ma jakiegoś “rocket science” - wchodzisz na pierwszy\nlepszy tutorial i kopiujesz polecenia. Tyle.

\n\n

Podczas prelekcji było porównanie stworzenia tego samego komponentu\nw React-cie oraz Angularze. Prelegenci porównywali liczbę linijek\ni wyszło, że React potrzebuje więcej linijek, aby wygenerować komponent, więc\njest lepszy.

\n\n

Matko, co za bzdury… od kiedy to liczba linijek kodu developerskiego\njest jakimkolwiek wyznacznikiem, że dana technologia jest lepsza albo gorsza?

\n\n

Prelekcja była prowadzona przez dwie osoby, ale i tak całe przemówienie było\nwedług mnie dosyć nudne (chociaż Simona ładnie się \nuśmiechała) i mało wnoszące dla developera, który już posiada doświadczenie \nw dowolnych frameworkach (nawet niewielkie).

\n\n

Prelegenci porównywali jak przetrzymywany jest stan w aplikacjach zbudowanych\nw oparciu o Angulara oraz Reacta (+Reduxa).

\n\n

•

\n\n

Czy tylko ja uważam, że taka prelekcja jest ZAWSZE na każdej konferencji?\nCzy w dzisiejszych czasach, kiedy te dwie technologie są na rynku już dość\ndługo, potrzebujemy jeszcze prelekcji w stylu “jak zacząć”?

\n\n

Dajcie znać w komentarzu, czy zgadzacie się ze mną, czy może posiadacie\njednak inne zdanie w sprawie prelekcji dla początkujących.

\n\n

•

\n\n

Kolejny omówiony temat to przekazywanie danych pomiędzy komponentami.

\n\n

Jak przekazać dane od “dziecka” do “rodzica”? A no dzięki \nnastępującym narzędziom MobX lub Redux. Mało tego!\nDzięki ww. narzędziom możliwe jest przekazanie danych z dowolnego miejsca w \naplikacji do innego. Wspaniałe!

\n\n
\n

Zatrzymaj się!

\n

Drogi developerze Angulara, może lepiej wykorzystać @ngx-store do \nprzekazywania danych między komponentami, zamiast “Outputować” i “Inputować”?

\n
\n\n

Siódma prelekcja (@ Andrey Okonetchnikov)

\n\n
\n

Modular CSS

\n
\n\n

Druga prelekcja na temat CSS. Tym razem poprowadzona przez \nautora Color Snapper - narzędzia do pobierania koloru z \nekranu.

\n\n

Według prelegenta:

\n\n

W dzisiejszych czasach wszystkie elementy na stronie są pewnego rodzaju \nkomponentami, które prezentują stan aplikacji. Tym samym można zapisać \nnastępujące równanie:

\n\n
f(state) = UI\n
\n\n

Następnie Andrey opowiedział o BEM-ie.

\n\n
\n

Znasz tą technologię? Jeśli nie, przeczytaj mój artykuł na ten temat.

\n
\n\n
\n 3 Pandas\n\n
\n Źródło: Reddit\n
\n
\n\n

Natura BEM-a powoduje, że praca z nim wymaga dużo czasu. Z pomocą przychodzą \nnam moduły! Technologia CSS Modules świetnie się sprawdza razem z BEMem.

\n\n\n\n

JSS (cssinjs.org)

\n\n\n\n
\n

Generalnie warto przetestować w swoim projekcie!

\n
\n\n

Ósma prelekcja pierwszego dnia konferencji

\n\n

Prelekcja poświęcona miękkim skillom, m.in. zaufaniu managera dla \nzespołu deweloperskiemu.

\n\n
\n \n\n
\n Scrum Daily Meeting: Jak powinno wyglądać? A jak jest u nas.\n
\n
\n\n

Dziewiąta (ostatnia pierwszego dnia) prelekcja (@ Ruth John)

\n\n
\n

How To Be a Web AV Artist

\n
\n\n

Podczas prelekcji Ruth pokazała jak za pomocą JavaScript stworzyć \nmuzykę a co najciekawsze, jak pod tą muzykę stworzyć wizualizacje!

\n\n

Dzięki udostępnieniu mikrofonu możemy w locie tworzyć bardzo ciekawe \nwizualizacje. Temat bardzo mi się spodobał, szczególnie ze względu na sposób \npoprowadzenia prelekcji. No i te piękne slajdy… Good job Ruth!

\n\n\n\n

Na swoim profilu na Codepen, Ruth posiada ogromną ilość \nwizualizacji dźwięku. Polecam zerknąć!

\n\n

Prace Ruth można także zobaczyć w organizacji livejs na GitHubie.

\n\n

HEROES PARTY (@ Evojam) :confetti_ball: 🍻

\n\n

Po prelekcjach organizatorzy zorganizowali imprezkę. Raczej to taki \nnetworking z lemoniadą, chipsami i karaoke. Obecny był także DJ oraz foto budka.\nŚwietny pomysł!

\n\n

•

\n\n

Nie byłem obecny drugiego dnia konferencji więc nie wiem co się podczas tego \ndnia działo. Warto zerknąć na hashtag: #FrontendCon2017

\n\n

•

\n\n

Wskazówki dla organizatorów

\n\n

…aby kolejna edycja konferencji była jeszcze lepsza!

\n\n
    \n
  1. \n

    Wolne działanie strony internetowej

    \n\n

    I to nie jest jakieś moje widzi-misie, ale kilkadziesiąt sekund aż się \n strona załaduje spowoduje, że dowolny internauta tego nie zaakceptuje.

    \n\n

    Podczas konferencji strona bardzo często zwracała następujący komunikat

    \n\n
    \n 504\n \n
    \n HTTP Status 504\n
    \n
    \n
    2. \n
  2. \n

    Wersja mobilna strony konferencji pozostawiała wiele do życzenia.

    \n\n

    Nie mogłem zobaczyć jak jest agenda spotkania! Na to będę mocno narzekał.\n Podczas konferencji uczestnicy muszą wiedzieć jaki jest plan. Od tego \n jest strona internetowa aby INFORMOWAŁA.

    \n
    3. \n
  3. \n

    Niewykorzystana przestrzeń na identyfikatorze

    \n\n

    Każdy przy rejestracji dostaje identyfikator, na którym jest nasze imię \n i nazwisko, oraz na odwrocie… agenda spotkania! Tak bardzo ważna \n informacja, której zabrakło.

    \n\n

    Jeśli organizatorzy nie chcieli wrzucać agendy (nie wiadomo jakiego \n powodu) to chociaż mogli oddać to miejsca dla sponsorów. Wyobrażam sobie,\n że taki Gold Sponsor, mógłby wrzucić tutaj swoje logo, albo \n ogłoszenie o pracę. A tutaj tabularaza. Smutne.

    \n
    4. \n
\n\n

Za co chciałbym pochwalić tegoroczną edycję?

\n\n
    \n
  1. \n

    Uśmiech osób w rejestracji

    \n\n

    Kiedyś mój kolega powiedział mi pewne zdanie, które ciągle pamiętam i \n powtarzam je sobie pod nosem. Nie przytoczę go tutaj dokładnie bo nie \n chcę używać wulgaryzmów w swojej publikacji, ale główny sens na pewno\n będzie dla Was jasny:

    \n\n
    \n

    “Najważniejsze jest pierwsze wrażenie”\nZdzisław Sondej (2009)

    \n
    \n
    2. \n
  2. \n

    Panele dyskusyjne podczas przerw

    \n\n

    Długie przerwy miały swój plus. Można było porozmawiać z prelegentami, \n którzy wyszli wcześniej na scenę ze swoją prelekcją, i zadać dowolne \n pytanie.

    \n\n \n
    3. \n
\n\n\n\n
</figure>\n
\n\n
    \n
  1. \n

    Stoliki technologiczne

    \n\n

    Podczas konferencji na stolikach “barowych” stały tabliczki z nazwami \n technologi o których się rozmawiało. Można było porozmawiać o takich \n technologiach jak: React.js, HTML5, Angular, RxJS czy Vue.js które \n ściągnęło największą liczbę chętnych do rozmowy.

    \n\n
    \n \n
    \n
    2. \n
\n\n

•

\n\n

Podsumowanie

\n\n

Serdecznie dziękuję organizatorom za zaproszenie ❤️

\n\n

Cieszę się, że zobaczyłem kolejny raz jak zorganizowana jest \nkonferencja. FrontEnd Connect 2017 ma trochę rzeczy na sumieniu, ale i tak \nwarto było przyjść i posłuchać o nowościach w branży.

\n\n

Do zobaczenia na kolejnej konferencji czyli NG Poland 2017 \n21 listopada.

2017-09-24 09:22:10 konferencja-frontend-connect-2017 ckbw97zyw0007i3umdszu2ola 2017-09-24 09:22:10 2017-09-24 09:22:10 cj9nzkke000u9i3um3ace8zvf WebStorm: Jak być mistrzem wyszukiwania? https://piecioshka.pl/blog/2017/11/06/webstorm-jak-byc-mistrzem-wyszukiwania.html

Od wielu lat korzystam z WebStorma. Nie jest to zwykły edytor, lecz IDE.

\n\n
\n

Ten kto nie wie jak jest różnica, to zapraszam tutaj.
\nŻaneta w przystępny sposób opisuje różnice.

\n
\n\n
\n Baner reklamujący artykuł\n
\n\n

Proces wyszukiwania

\n\n

Coś dlaczego nie mogę w 100% przerzucić się na VIM-a jest możliwość\nprzeszukiwania projektu pod kątem mojego wyrażenia (proces grep-owania).

\n\n

Moją tajną bronią w programowaniu jest mechanizm “wyszukiwania”.
\nOpowiem o nim kiedyś.

\n\n

W tym wpisie chciałem pokazać czego dzisiaj się nauczyłem, aby korzystanie\nz WebStorma było jeszcze bardziej efektywniejsze. Wykorzystajmy Find in Path!

\n\n

File mask - wzorzec nazwy pliku

\n\n

W polu wyszukiwarki wpisujemy frazę i już możemy skorzystać z możliwość\nprzeszukiwania zawartości projektu pod katem danego ciągu znaków.

\n\n

Panel wyszukiwania daje więcej możliwości. Jedną z nich jest File mask - czyli\nzawężenie przeszukiwania projektów do plików, których nazwa spełnia zdefiniowany\nwzorzec (nr 4 na poniższym screenshocie).

\n\n
\n \n\n
\n Panel wyszukiwania w WebStorm IDE.\n
\n
\n\n

Zadanie: Tylko pliki HTML

\n\n

I tak jeśli chcielibyśmy szukać określonej frazy np. tylko w plikach HTML\nwystarczy, że w polu oznaczonym File mask wpiszemy:

\n\n
*.html\n
\n\n

Jak widać, nie jest to wyrażenie regularne.

\n\n

Negacja

\n\n

Jeśli nie chcemy szukać w plikach z np. testami to wpisujemy w File mask:

\n\n
!*.spec.ts\n
\n\n

Kilka warunków

\n\n

Oczywiście możliwe jest łączenie wzorców (masek). Aby to wykonać, wystarczy\noddzielić je przecinkiem:

\n\n
!*.spec.ts,!*.module.ts\n
\n\n

Źródło: jetbrains.com/help/idea/find-and-replace-in-path.html

2017-11-06 09:30:27 webstorm-jak-byc-mistrzem-wyszukiwania ckbw97zyw0007i3umdszu2ola 2017-11-06 09:30:27 2017-11-06 09:30:27 cja5jdz9k00uui3um2bbob7ym Vue.js na Heroku https://piecioshka.pl/blog/2017/11/18/vue-js-na-heroku.html

Podczas hackathonu w jakim brałem udział tydzień temu - Node Knockout \n2017, budowałem aplikację, którą - zgodnie z regulaminem \nwydarzenia - musiałem opublikować na Heroku. Przyzwyczaiłem się już do \ntego, że zawsze tam lądują moje aplikacje podczas wydarzeń takiego typu.

\n\n

Spotkały mnie pewne problemy, które rozwiązałem i chciałem się podzielić moim\nrozwiązaniem. Nie uważam je za idealne. Jednak za wystarczające.

\n\n
\n

Disclaimer Zdaje sobie z tego sprawę, że wrzucanie katalogu \ndist do repozytorium jest bez sensowne, ponieważ Git nie powinien \nwersjonować plików zbundlowanych jednak - jak zawsze - istnieją wyjątki.

\n
\n\n
\n Baner reklamujący artykuł\n
\n\n

Etap 0 Heroku: Zakładanie konta

\n\n
    \n
  1. \n

    Zakładamy konto na: heroku.com

    \n
    2. \n
  2. \n

    Panel użytkownika: dashboard.heroku.com

    \n\n

    Heroku udostępnia panel dla użytkownika, gdzie można tworzyć nowe kontenery,\n gdzie uruchomiony jest system operacyjny Linux. Pojedynczy kontener\n w żargonie firmy nazywa się Dyno

    \n\n

    Więcej na ich temat w pomocy.

    \n
    3. \n
\n\n

Etap 1 Heroku: Przygotowanie środowiska

\n\n
    \n
  1. Tworzymy nową aplikację: New → Create new app
    2. \n
  2. \n

    Wpisujemy nazwę dla naszej aplikacji w pole App name

    \n\n
    \n

    Wpisana nazwa jest na sprawdzana “w locie” pod kątem dostępności.

    \n
    \n
    3. \n
  3. Opcjonalnie: Wybieramy region: Choose a region → Europe
    4. \n
\n\n

•

\n\n

:tada: Aplikacja stworzona! :tada:

\n\n

Możemy otworzyć aplikację w przeglądarce klikając w przycisk: Open app\nNaszym oczom powinien ukazać się komunikat:

\n\n

Heroku | Welcome to your new app!

\n\n

•

\n\n

Etap 2 Stworzenie projektu za pomocą Vue CLI

\n\n

1. Instalacja

\n\n
$ npm install -g vue-cli\n
\n\n

Po instalacji, w terminalu będzie dostępne polecenie vue.

\n\n

2. Wygenerowanie projektu za pomocą szablonu

\n\n
$ vue init webpack NAZWA_PROJEKTU\n
\n\n

Wykorzystujemy jeden w predefiniowanej struktury aplikacji.
\nW projekcie vue-templates istnieje 6 różnych szablonów:

\n\n\n\n

3. Poprawienie wersji

\n\n

UWAGA: W package.json należy poprawić wersję, z uwagi na \nproblem, który wystąpi podczas instalacji zależności na Heroku:

\n\n
   "engines": {\n-    "node": ">= 4.0.0",\n-    "npm": ">= 3.0.0"\n+    "node": "8.x",\n+    "npm": "5.x"\n   },\n
\n\n

4. Instalacja zależności

\n\n
$ npm install\n
\n\n

W głównym katalogu projektu stworzy się plik package-lock.json,\nw którym zostaną zapisane wszystkie dane na temat zainstalowanych paczek wraz\nz ich wersjami.

\n\n
\n Stacktrace z błędem\n\n

\n Jeśli nie zaktualizujemy wersji to będziemy świadkami błędu:\n

\n\n 
\nremote: -----> Building dependencies\nremote:        Installing node modules (package.json + package-lock)\nremote:        WARNING: You are likely using a version of node-tar or npm that is incompatible with this version of Node.js.\nremote:        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.\nremote:        /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.\nremote:        1: node::Abort() [npm]\nremote:        2: node::Assert(char const* const (*) [4]) [npm]\nremote:        3: 0x1255aff [npm]\nremote:        4: v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&)) [npm]\nremote:        5: 0xb77f9c [npm]\nremote:        6: v8::internal::Builtin_HandleApiCall(int, v8::internal::Object**, v8::internal::Isolate*) [npm]\nremote:        7: 0x253e476842fd\nremote: /app/tmp/buildpacks/19862b8792e84bd8421ded4660b92dfd1c41d92e19ac0b38c90301adc8ae3e0bd512fa01998af18fc2f0d31a157e9c82e8fdceba1a05e5d29adb8dc2bfaf08e1/lib/dependencies.sh: line 111:   273 Aborted                 npm install --unsafe-perm --userconfig $build_dir/.npmrc 2>&1\nremote:\nremote: -----> Build failed\nremote:\nremote:        We're sorry this build is failing! You can troubleshoot common issues here:\nremote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys\nremote:\nremote:        Some possible problems:\nremote:\nremote:        - Dangerous semver range (>) in engines.node\nremote:        https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version\nremote:\nremote:        Love,\nremote:        Heroku\n
\n
\n\n

5. Zamieniamy projekt w repozytorium

\n\n
$ git init\n$ git add .\n$ git commit -am "Initial import"\n
\n\n

•

\n\n

Teraz mamy :two: opcje:

\n\n
    \n
  1. Dodajemy katalog dist/ do repozytorium
    2. \n
  2. Nie dodajemy katalogu dist/ (rekomendowana)
    3. \n
\n\n

Zobaczmy jak wyglądają obie opcje w realu!

\n\n

•

\n\n

Etap 2 → Opcja 1 Dodajemy katalog dist/ do repozytorium

\n\n

1. Budujemy produkcyjną wersję aplikacji w katalogu dist/

\n\n
$ npm run build\n
\n\n

2. Wyłączamy ignorowania przez Git-a katalog dist/

\n\n

Usuwamy linijkę w pliku .gitignore:

\n\n
  node_modules/\n- /dist/\n  npm-debug.log*\n
\n\n

3. Dodajemy katalog dist/ do repozytorium

\n\n
$ git add .\n$ git commit -am "Add distributed version"\n
\n\n

4. Instalacja narzędzia, które będzie serwować katalog dist/

\n\n
$ npm install serve --save\n
\n\n

5. Tworzymy zadanie run-script, które uruchomi aplikację

\n\n
   "scripts": {\n-    "start": "npm run dev",\n+    "start": "serve dist/",\n+    "deploy": "npm run build && git add dist/ && git commit -am 'Deploy' && git push -f heroku master"\n   },\n
\n\n

Opiszę co robią dodane zadania:

\n\n\n\n

6. Zapisujemy stan projektu

\n\n
$ git add .\n$ git commit -am "Serve static files"\n
\n\n

Aplikacja jest gotowa do pierwszego release-u! :trophy:

\n\n

•

\n\n

Etap 2 → Opcja 2 Nie dodajemy katalogu dist/ do repozytorium (rekomendowana)

\n\n

1. Instalujemy paczkę, która będzie serwowała katalog dist/

\n\n

Dla odmiany wykorzystajmy inną paczkę.
\nTym razem niech to będzie http-server.

\n\n
$ npm install http-server --save\n
\n\n

2. Dodajemy nowe zadania

\n\n
    "scripts": {\n        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",\n        "build": "node build/build.js",\n+       "deploy": "git push -f heroku master",\n+       "heroku-postbuild": "npm run build",\n+       "start": "http-server dist/ -d false -g"\n    },\n
\n\n

Opiszę nowo dodane polecenia:

\n\n\n\n

3. Ustawmy zmienną środowiskową na Heroku

\n\n

W panelu Heroku, w zakładce Settings → Config Variables.\nNależy w niej ustawić zmienną:

\n\n
NPM_CONFIG_PRODUCTION = false\n
\n\n

Zmienna jest ustawiona po to, aby podczas procesu budowania projektu Heroku \npobrało również zależności developerskie, które są potrzebne do zbudowania \naplikacji do katalogu dist/.

\n\n

Aplikacja jest gotowa do pierwszego release-u! :trophy:

\n\n

•

\n\n

Etap 3 Deployment :zap:

\n\n

Czas najwyższy, aby opublikować aplikację. Mamy kilka możliwości na \ndeployment aplikacji. Dla mnie interesujące są 2 pierwsze:

\n\n
    \n
  1. Automatyczny deployment z brancha na GitHubie
    2. \n
  2. Manualny deployment po wrzuceniu projektu do zdalnego repozytorium Git, \n trzymanego na Heroku.
    3. \n
\n\n

Wybieram opcję numer 2 ponieważ pierwsza jest mniej elastyczna. Chciałbym\n coś wrzucić na Heroku, ale nie chciałbym publikować tych zmian na GitHuba.

\n\n

1. Logujemy się do Heroku CLI :unlock:

\n\n
$ heroku login\n
\n\n

2. Łączymy repozytorium lokalne ze zdalnym na Heroku :scissors:

\n\n
$ heroku git:remote -a NAZWA_PROJEKTU\n
\n\n

3. Wypychamy zmiany na serwer :rocket:

\n\n

Wyślijmy nasze repozytorium na Heroku, aby zainicjować proces deploymentu:

\n\n
$ git push -f heroku master\n
\n\n

Odśwież w przeglądarce wcześniej otworzoną stronę, aby zobaczyć:

\n\n
\n \n\n
\n Domyślny template aplikacji\n
\n
\n\n

•

\n\n

:confetti_ball: Aplikacja opublikowana! :confetti_ball:

\n\n

Więcej na temat deploymentu przeczytasz w pomocy.
\nAby później deployować aplikację za pomocą jednego polecenia:

\n\n
$ npm run deploy\n
\n\n

•

\n\n

Jeśli znasz lepszy sposób na deployment napisz komentarz!

2017-11-18 16:17:17 vuejs-na-heroku ckbw97zyw0007i3umdszu2ola 2017-11-18 16:17:17 2017-11-18 16:17:17 cjaxpn8w000vti3umapbb96c8 Angular: Krótka historia o tym jak złamałem system https://piecioshka.pl/blog/2017/12/08/angular-krotka-historia-o-tym-jak-zlamalem-system.html

Lubię krótkie wpisy. Tylko nie umiem ich pisać. Stąd też rzadko publikuję,\nbo wyobrażam sobie te wielogodzinne poświęcenie, aby napisać WSPANIAŁY,\na zaraz długi artykułu traktującego o zadanym temacie…

\n\n

Muszę nauczyć się pisać zwięźle i z mięsem. Sam lubię czytać takie rzeczy, \nwięc czytelnicy tego bloga zapewne również. Do rzeczy.

\n\n
\n Baner reklamujący artykuł\n
\n\n

Problem

\n\n

Jest sobie taki serwis:

\n\n
@Injectable()\nexport class UserPurchasesStateManagerService {\n\n    private purchasesState$ = new BehaviorSubject(...);\n\n    public setPurchasesState(state: number): void {\n        this.purchasesState$.next(state);\n    }\n\n    public getPurchasesState$(): BehaviorSubject<number> {\n        return this.purchasesState$;\n    }\n}\n
\n\n

Niby wszystko poprawnie, ale errrr…​

\n\n

Wystarczy, że po utworzeniu instancji serwisu (przypominam, że w Angularze \ninstancje serwisów są singletonami) zrobię tak:

\n\n
// Sztuczne tworzenie, oczywiście Angular zrobi to niejawnie\nconst stateManager = new UserPurchasesStateManagerService();\n\n// Boom!!\nstateManager.getPurchasesState$().next(null)​;\n
\n\n

…i złamałem system ☹️

\n\n

Solucja

\n\n

Trzeba zmienić definicję (i sygnaturę) gettera na:

\n\n
// ...\nexport class UserPurchasesStateManagerService {\n    // ...\n\n    public getPurchasesState$(): Observable<number> {\n        return this.purchasesState$.asObservable();\n    }\n}\n
\n\n

A teraz krótka porada:

\n\n
\n

Porada

\n

Jeśli gdzieś chcemy zwrócić subject-a to lepiej zrobić tak:

\n
    \n
  • ukryć do private-em
    • \n
  • zrobić getter, który go zwróci ale przekształci za pomocą .asObservable()\n w strumień read-only\ninaczej oddamy władzie zmiany stanu komuś innemu.
    • \n
\n
2017-12-08 09:30:00 angular-krotka-historia-o-tym-jak-zlamalem-system ckbw97zyw0007i3umdszu2ola 2017-12-08 09:30:00 2017-12-08 09:30:00 @@ -372,12 +379,16 @@ cjhjglniw012pi3umcz69dmt4 Repozytorium vs projekt vs aplikacja? https://pieciosh cjwjh3oew01lji3umcbu6hsd9 Ankieta i Newsletter - w oczekiwaniu na overment S02E01 https://www.youtube.com/watch?v=aA0c9_EBVeM 2 lata, 100 filmów i setki jak nie tysiące godzin pracy. \nCzas na krótki urlop i decyzję o tym co dalej.\n\nDołącz do newslettera overment: https://overment.com\nWypełnij ankietę na temat overment: https://overment.com/ankieta 2019-06-05 16:55:35 ankieta-i-newsletter-w-oczekiwaniu-na-overment-s02e01 ckieg15g0001bi3um0fj3gred 2019-06-05 16:55:35 2019-06-05 16:55:35 cjwq5bi6801lqi3umct8m8gxw Zaawansowany JavaScript - #4 Closures (Domknięcia) https://www.youtube.com/watch?v=wINRm5v3Lu8 Closures to mechanizm JavaScriptu z którego często korzystamy nieświadomie. Zrozumienie go pozwoli na lepsze wykorzystanie możliwości, które nam oferuje. \n\nDefinicja domknięcia: \nDomknięcie występuje wtedy, gdy funkcja zapamiętuje i następnie wykorzystuje swój leksykalny zakres, nawet wtedy gdy jest wywoływana poza nim.\n\nKod źródłowy: \nhttps://github.com/iceener/advanced-javascript-series/tree/master/04_closure\n\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-06-10 09:00:08 zaawansowany-javascript-4-closures-domkniecia ckieg15g0001bi3um0fj3gred 2019-06-10 09:00:08 2019-06-10 09:00:08 cjx05eeiw01m2i3um9omc3zny Git - Cofanie zmian / commitów https://www.youtube.com/watch?v=_R4xkkxgy0c Korzystanie z systemu kontroli wersji umożliwia przywrócenie projektu do wcześniej zapisanego stanu. Jednak cofanie commitów w gicie nie jest oczywiste i istnieje kilka sposobów aby to zrobić. W tym filmie wyjaśniam PODSTAWY tego tematu. \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-06-17 09:00:05 git-cofanie-zmian-commitow ckieg15g0001bi3um0fj3gred 2019-06-17 09:00:05 2019-06-17 09:00:05 +cj0w92w6000boi3um1ewc3fya Po krótkiej przerwie. http://kot-zrodlowy.pl/dajsiepoznac2017/offtop/2017/03/30/po-krotkiej-przerwie.html Cześć! W sumie dawno mnie nie było. Trochę odpoczywałam od wszystkiego i wszystkich, trochę grubszych spraw do pozałatwiania. A wiecie odpoczynek jest niezwykle ważnym aspektem kociego życia. Choci... 2017-03-30 10:21:27 po-krotkiej-przerwie cjy7sgxs0000bi3umeb9z90rn 2017-03-30 10:21:27 2017-03-30 10:21:27 cjxa7mgnk01mci3umchtjgh4d overment.com - #8 Migracja na Gatsby.js https://www.youtube.com/watch?v=CyN2hm3TDVI Sytuacje w których zmieniamy początkowe założenia projektu nie są komfortowe, lecz czasem niezbędne. Migracja na Gatsby.js pozwoliła mi znacznie przyspieszyć w rozwoju strony https://overment.com. W tym filmie przedstawiam ogólny proces który przeszedłem. \n\nLinki: \nhttps://www.gatsbyjs.org (Site generator [React.js])\nhttps://netlify.com (Darmowy Hosting)\nhttps://datocms.com (CMS dla m.in. Gatsby.js)\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-06-24 10:00:02 overmentcom-8-migracja-na-gatsbyjs ckieg15g0001bi3um0fj3gred 2019-06-24 10:00:02 2019-06-24 10:00:02 cjxjzjvf401mmi3um8jv13ucc Nowy projekt: Przeprogramowani.pl https://www.youtube.com/watch?v=hhJBbHn2NyQ https://przeprogramowani.pl\nhttps://www.youtube.com/channel/UCb2Y3vMeD6N4WDt5Acw7Arw 2019-07-01 06:11:46 nowy-projekt-przeprogramowanipl ckieg15g0001bi3um0fj3gred 2019-07-01 06:11:46 2019-07-01 06:11:46 cjxk7pq4g01moi3um0o2f65ap overment.com - #9 Headless CMS https://www.youtube.com/watch?v=xfoppVOZ2BA Headless CMS to system zarządzania treścią, wykorzystujący wyłącznie back-end. Jego rolą jest umożliwienie zarządzania danymi i udostępnianie ich z pomocą API (np. REST lub GraphQL).\n\nJedyny interfejs udostępniany przez CMS służy do dodawania treści bez konieczności informowania gdzie i w jaki sposób ta treść zostanie wykorzystana.\n\nLinki: \nhttps://www.gatsbyjs.org (Site generator [React.js])\nhttps://netlify.com (Darmowy Hosting)\nhttps://datocms.com (CMS dla m.in. Gatsby.js)\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-07-01 10:00:16 overmentcom-9-headless-cms ckieg15g0001bi3um0fj3gred 2019-07-01 10:00:16 2019-07-01 10:00:16 cjxu7shug01mzi3um5qudctwj overment.com - #10 Blog w Gatsby'm https://www.youtube.com/watch?v=my6B7gwaFGE Ostatni odcinek serii overment.com w którym kończymy ostatni etap prac nad stroną: blog! \nOd początku projekt przeszedł wiele zmian. Finalnie jednak zrealizował mój zamierzony cel. Jak wyszło? Oceńcie sami :)\n\nArtykuł nt. typografii: https://convertkit.com/blog-typography/\nPluginy do obsługi Markdown: gatsby-transformer-remark, gatsby-remark-images, rehype-react, gatsby-remark-embed-youtube\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-07-08 10:00:07 overmentcom-10-blog-w-gatsbym ckieg15g0001bi3um0fj3gred 2019-07-08 10:00:07 2019-07-08 10:00:07 cjy47vdfc01n8i3umhcl8047s GraphQL - #6 CRUD https://www.youtube.com/watch?v=EBySxf7q74E Kolejny odcinek serii GraphQL w którym z pomocą Prismy (https://www.prisma.io/) i Apollo (https://www.apollographql.com/) implementujemy akcje CRUD (Create, Read, Update i Delete).\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-07-15 10:00:03 graphql-6-crud ckieg15g0001bi3um0fj3gred 2019-07-15 10:00:03 2019-07-15 10:00:03 ckq86jzea00020wmisfxo67go TypeScript: Projekt cz.1 #13 https://www.youtube.com/watch?v=AyD0fqZfxxw Pierwszy odcinek projektu w TypeScript a w nim:\n- przedstawienie projektu,\n- instalacja boilerplate,\n- czyszczenie projektów ze zbędnych plików w boilerplate,\n- implementacja funkcji routingu oraz logika dla przycisków,\n- implementacja klasy abstrakcyjnej Storage\n\nPliki do skopiowania:\nindex.html:\nhttps://codesandbox.io/s/files-for-ts-course-doman-code-fok8f?file=/index.html\nglobal-styles.scss:\nhttps://codesandbox.io/s/files-for-ts-course-doman-code-fok8f?file=/src/global-styles.scss\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Przywitanie\n02:57 Prezentacja projektu\n04:19 Github z boilerplate\n05:36 Praca w terminaulu - rozpoczęcie\n07:31 VSC czyszczenie folderu boilerplate\n08:58 renderFunction i obsługa buttonów\n12:10 klasa Storage 2021-06-22 14:48:42 typescript:-projekt-cz.1-13 ckjpkgp9u000012mnlbnkxu51 2021-06-22 15:06:02.098 2021-06-22 15:06:02.099 +cj1941k6000d7i3umdf596e88 # 50 Twarzy JS: 3.Jak napisać dodatek do przeglądarki http://kot-zrodlowy.pl/dajsiepoznac2017/javascript/2017/04/08/50-twjs-dodaj-mnie-do-chrome.html Cześć! To znowu ja. I zauważyłam, że dawno nie było waszej ulubionej serii. Skąd wiem, że ulubionej? Statystyki i wasze komentarze nie kłamią, więc wy też nie próbujcie. Dzięki wszystkim, którzy do... 2017-04-08 10:21:27 50-twarzy-js-3jak-napisac-dodatek-do-przegladarki cjy7sgxs0000bi3umeb9z90rn 2017-04-08 10:21:27 2017-04-08 10:21:27 +cj1j1zd2000emi3umcgooe9xv Serdeczne życzenia wielkanocne http://kot-zrodlowy.pl/dajsiepoznac2017/offtop/2017/04/15/zyczenia-wielkanocne.html Cześć Kociaki, Czy jesteście już zmęczeni tymi przygotowaniami do świąt? Spokojnie, to już niedługo, bo jutro świętujemy wielkanoc. Ja spędzam ten szczególny czas z rodziną, raczej daleko od komput... 2017-04-15 09:21:27 serdeczne-zyczenia-wielkanocne cjy7sgxs0000bi3umeb9z90rn 2017-04-15 09:21:27 2017-04-15 09:21:27 +cj837355k00sdi3um04st5x2t FrontendCon 2017 moim okiem https://fsgeek.pl/post/frontend-con-2017/

FrontendCon był pierwszą konferencją tego rozmiaru dla mnie. Do tej pory chodziłem na mniejsze, jednodniowe eventy więc taka impreza to było dla mnie niesamowite uczucie. Jendak czy było warto na nią pojechać?\n

\n\n

FrontendCon 2017

\n\n

Jest to jedna z największych konferencji w Europie na którą przyjechało w tym roku 30 prelegentów z całego świata by dzielić się swoją wiedzą i doświadczeniem. Przez dwa dni, wypełnione po brzegi wykładami można było zagłębić się w szeroki świat frontendu. Oprócz tego na terenie konferencji były stanowiska sponsorów wśród których były między innymi duże firmy informatyczne. Można było podejść i porozmawiać z przedstawicielami na temat pracy, zgarnąć parę gadżetów a może nawet i pracę. Oprócz tego można było porozmawiać na temat tajników druku 3D oraz sprawdzić na własne oczy jak wygląda świat za okularów HTC Vive. Jednak najważniejsze były wykłady.

\n\n

Lea Verou - CSS (Variable) Secrets

\n\n

Wykład inauguracyjny, który zrobił na mnie duże wrażenie. Lea jest doświadczoną programistką mającą sporą wiedzę na temat CSS. Swego czasu wydała książkę CSS Secrets oraz jest członkiem CSS Working Group. Wiedza i doświadczenie były widoczne podczas prezentacji dotyczącej nowości w CSS a mianowicie zmiennych. Lea pokazała jak z nich korzystać, kiedy można oraz kiedy się to nie uda. Przedstawiła również praktyczne możliwości zastosowania oraz kilka ciekawych. Nie przeszkodziło również momentami dziwne zachowania przeglądarki Chrome ;) Nie udało mi się znaleźć jeszcze nagrania z konferencji ale znalazłem tą prezentację z zeszłego roku Lea Verou - CSS Variables: var(–subtitle

\n\n

Henri Bergius - Flow-Based Programming for JavaScript

\n\n

Tutaj była dla mnie niespodzianka spowodowana tematem prezentacji. Poszedłem na prezentację ponieważ myślałem, że będzie na temat Flow jednak nie byłem nią ostatecznie zawiedziony. Henri przedstawił rozwiązanie NoFlow i opowiedział na temat zalet jego korzystania. Dzięki niemu można budować aplikację przy pomocy stworzonych specjalnie małych komponentów projektując jedynie połączenia pomiędzy danymi komponentami. Prezentacji jeszcze nie ma ale warto wejść na stronę NoFlow i zobaczyć jak to wygląda

\n\n

Kacper Sokołowski - You use Content Security Policy, don’t you?

\n\n

Pierwsza z prezentacji dotycząca bezpieczeństwa aplikacji internetowych na jakiej byłem. Kacpers w prostych słowach opisał czym jest CSP oraz na praktycznym przykładzie pokazał jak może nam to pomóc w walce przeciwko XSS. Stosowanie CSP nie jest trudne, wymaga tylko jego konsekwentnego stosowania. Warto zapoznać się z prezentacją ponieważ jest już dostępna pod tym adresem

\n\n

Glenn Reyes - Leveraging code-splitting in React apps

\n\n

Prezentacja dotycząca rozsądnego dzielenia naszej aplikacji napisanej w Reacie na osobne paczki w celu zwiększenia wydajności strony. Dzięki takiemu rozwiązaniu możemy pobrać tylko kod który jest nam w danej chwili potrzebny co pozwala zaoszczędzić na transferze. Glenn również opowiadał o asynchronicznym ładowaniu komponentów i jak można tego użyć. Jeśli jesteście tego ciekawi to zobaczcie jego prezentację pod tym adresem

\n\n

Ferran Negre Pizarro - Testing React & Redux applications with the new Jest: Snapshots come into play!

\n\n

Następna prezentacja, która kontynuuje temat Reacta. Ferran opowiedział jak wykorzystać nową funkcjonalność w Jest - Snapshopty, nie tylko do testowania komponentów ale również akcji i reducera. Po tej prezentacji użyłem zaprezentowane sposobu u siebie w projekcie i wygląda to naprawdę ładnie. Póki co nie widzę jego prezentacji ale jeśli tylko się pojawi to dam znać

\n\n

Christoffer Noring - Graphql vs REST

\n\n

Prezentacja o GraphQL była dla mnie najlepszą prezentacją podczas pierwszego dnia. Nie była to lekka prezentacja ponieważ zawierała wiele konkretów. Pomimo tego, że do tej pory tylko słyszałem co nieco o GraphQL to dzięki prowadzącemu zrozumiałem wszystko co przedstawiał. Prezentacja jest świetną wiedzą w pigułce dla początkujących. Jeśli chcielibyście ją zobaczyć to odwiedźcie ten link

\n\n

Patrick Stapfer - The Road to a Statically Typed JavaScript Future

\n\n

Pierwsza prezentacja drugiego dnia konferencji dotycząca flow (w końcu ;) ) ale nie tylko. Patrick skupił się na statycznym typowaniu w JS - co aktualnie mamy, jakie daje nam to możliwości i na co jeszcze czekamy. Przedstawił również język ReasonML, który jest w pełni typowany i do tego kompilowany do JS. Jeśli chcecie wypróbować ten język to zobaczcie pod tym linkiem

\n\n

Martin Sonnenholzer - Train your browser to decide what’s next

\n\n

Jedyna prezentacja podczas konferencji dotycząca szerokiego tematu uczenia maszynowego. Martin przedstawił w prosty i zrozumiały sposób (bez zbędnej matematyki) jak budować i wykorzystywać drzewo decyzyjne. Było to bardzo ciekawe i teraz czekam na kod, który Martin obiecał udostępnić w połowie października.

\n\n

Asim Hussain - It can happen to anyone

\n\n

Prezentacja z bezpieczeństwa, która według mnie była najlepsza podczas drugiego dnia konferencji. Asim jest świetnym mówcą i nie wiem kiedy minął ten czas przeznaczony na prezentację. Na pewno będę chciał pójść na kolejną jego prezentację i każdego zachęcam do zrobienia tego. Jak tytuł wskazuje prezentacja była o tym że każdemu może się zdarzyć włamanie na jego serwer. Dużo czasu zostało poświęcone ostatniemu dużemu “włamaniu” na Githuba. Asim krok po kroku wyjaśnij jak dzięki małym dziurom w zabezpieczeniach można było wykonać swój kod na serwerze. Zachęcam do obejrzenia prezentacji pod tym linkiem

\n\n

Louay Alakkad - How I met your coverage threshold: The path to more valuable & enjoyable front-end testing

\n\n

Testowanie jest coraz ważniejsze więc i na konferencji trafiła się kolejna prezentacja z tego tematu. Tym bardziej mniej technicznie a bardziej jak należy pisać oraz jakich narzędzi używać by śledzić pokrycie kodu testami. Prezentacja ciekawa uzupełniająca wiedzę czysto techniczną.

\n\n

Nick Balestra - Breaking the frontend monolith

\n\n

No i na sam koniec prezentacja na temat rozbijaniu aplikacji frontendowej na mniejsze części. Prezentacja była dosyć ciekawa i opowiadała o tym jak Nick i firma OpenTable dzieliła aplikację na mniejsze części przy pomocy biblioteki OpenComponents. Rozwiązanie wygląda na ciekawe i na zatrzymanie się na tym na chwilę. Może nawet spróbuję to w praktyce? Jeśli chcecie obejrzeć prezentację to znajdziecie ją tutaj

\n\n

To były dwa wymagające ale w pełni zadowalające dni. Nie mogę powiedzieć, że wiele się nauczyłem bo to jest niemożliwe ale wiele rzeczy zobaczyłem i będę chciał je kontynuować. A wy byliście na FrontendCon 2017? Co uważacie o tej konferencji? Lub też ogólnie co uważacie o takich konferencjach? Lubicie w nich uczestniczyć czy omijacie szerokim łukiem? Zapraszam do komentowania.

2017-09-27 15:37:59 frontendcon-2017-moim-okiem ckhxjb6o0000yi3umb3hg09jv 2017-09-27 15:37:59 2017-09-27 15:37:59 ckkyakmd300010wkxjbke0ozm Sprawdź na co uważać, gdy w kodzie używającym Reduxa chcesz przejść z connect na hooki https://frontcave.pl/sprawdz-na-co-uwazac-gdy-w-kodzie-uzywajacym-reduxa-chcesz-przejsc-z-connect-na-hooki/

Spis Treści Wprowadzenie Connect mapStateToProps mapDispatchToProps mergeProps Hooki React Redux useDispatch useSelector Ryzyka związane z przechodzeniem z connect na hooki Porównanie kodu connect i hooków Kod przykładu na Github Interaktywny przykład na Github Pages Na co uważać przy refaktorze? Podsumowanie Wprowadzenie Hooki w świecie Reacta pojawiły się już jakiś czas temu i spotkały się z … Czytaj dalej Sprawdź na co uważać, gdy w kodzie używającym Reduxa chcesz przejść z connect na hooki

\n

Artykuł Sprawdź na co uważać, gdy w kodzie używającym Reduxa chcesz przejść z connect na hooki pochodzi z serwisu Front Cave.

2021-02-09 17:08:02 sprawdz-na-co-uwazac-gdy-w-kodzie-uzywajacym-reduxa-chcesz-przejsc-z-connect-na-hooki ckirm3wzs001li3umfdkcfl6k 2021-02-09 17:42:16.888 2021-02-09 17:42:16.888 ckl0yi1a400010vmhgpp7limw Co kocham w programowaniu? 😍 hello roman #149 https://www.youtube.com/watch?v=LVbDdo4-cOw ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-02-11 14:00:14 co-kocham-w-programowaniu-hello-roman-149 ckiswuz9s0017i3um5mg4h7q1 2021-02-11 14:27:39.389 2021-02-11 14:27:39.389 ckqgmzc6t00020wmrildluer3 React Testing Library - Mock Service Worker https://frontlive.pl/blog/react-testing-library-msw MSW to narzędzie nowej geneneracji, które umożliwia łatwiejszą i przyjemniejszą pracę z mockami... 2021-06-28 00:00:00 react-testing-library-mock-service-worker ckgvhpmo0001ji3umfm7ubw86 2021-06-28 13:08:01.781 2021-06-28 13:08:01.781 @@ -390,11 +401,6 @@ ciztbbxi0007ti3um1wwa9op1 # 50 twarzy JS: 2.Jak napisać grę w JS? http://kot-z cj01l98m0008hi3um4czeauti Tworzymy środowisko pracy. http://kot-zrodlowy.pl/dajsiepoznac2017/javascript/2017/03/08/set-up-environment.html Dobrze, czas w końcu zakasać rękawy i zrobić coś w kierunku projektu, oprócz prostego udawania, że ma się o czymś pojęcie. Bo skoro jeszcze tryb Króla Juliana mi nie przeszedł, to musi być znak. (D... 2017-03-08 23:21:27 tworzymy-srodowisko-pracy cjy7sgxs0000bi3umeb9z90rn 2017-03-08 23:21:27 2017-03-08 23:21:27 cj05vksm0008qi3umh4o892rf Top 10 przydatnych wtyczek do Atoma http://kot-zrodlowy.pl/dajsiepoznac2017/javascript/2017/03/11/10-najbardziej-przydatnych-wtyczek-do-atoma.html Cześć! To znowu ja. Ten tydzień trochę bardziej leniwy. Po prostu zajmuję się jeszcze uczelnią i tymi projektami, które są mi niezbędne, żeby te studia jakoś przeżyć. Ciężkie jest życie kota. Ale t... 2017-03-11 23:21:27 top-10-przydatnych-wtyczek-do-atoma cjy7sgxs0000bi3umeb9z90rn 2017-03-11 23:21:27 2017-03-11 23:21:27 cj0ap6sm00096i3umcrzqhhhq Jak dogadać się z pszczołami? http://kot-zrodlowy.pl/dajsiepoznac2017/javascript/2017/03/15/dogadajmy-sie-z-pszczolami.html Cześć! Przychodzi taki czas w życiu każdego kota, że musi wziąć odpowiedzialność za swoje decyzje i raz wymyślony projekt zacząć realizować. Do tych co z niecierpliwośćią czekają na commity do moje... 2017-03-15 08:21:27 jak-dogadac-sie-z-pszczolami cjy7sgxs0000bi3umeb9z90rn 2017-03-15 08:21:27 2017-03-15 08:21:27 -cj0cq2920009hi3uma5lkdm1s Skąd uczyć się JS za darmo? http://kot-zrodlowy.pl/javascript/dajsiepoznac2017/2017/03/16/skad-sie-uczyc-js-za-darmo.html Cześć, To znowu ja! 2017-03-16 18:21:27 skad-uczyc-sie-js-za-darmo cjy7sgxs0000bi3umeb9z90rn 2017-03-16 18:21:27 2017-03-16 18:21:27 -cj0jbz2e000a8i3um043618ru Czy warto chodzić na hackathony http://kot-zrodlowy.pl/dajsiepoznac2017/offtop/2017/03/21/wrazenia-z-hackathonu.html Cześć! Witam was dzisiaj w pierwszym poście po burzliwym weekendzie, bo oj działo się działo. Bez zbędnych ceregieli, odbył się pierwszy bydgoski Hackathon. Impreza dla wszelkiej maści programistów... 2017-03-21 09:21:27 czy-warto-chodzic-na-hackathony cjy7sgxs0000bi3umeb9z90rn 2017-03-21 09:21:27 2017-03-21 09:21:27 -cj0w92w6000boi3um1ewc3fya Po krótkiej przerwie. http://kot-zrodlowy.pl/dajsiepoznac2017/offtop/2017/03/30/po-krotkiej-przerwie.html Cześć! W sumie dawno mnie nie było. Trochę odpoczywałam od wszystkiego i wszystkich, trochę grubszych spraw do pozałatwiania. A wiecie odpoczynek jest niezwykle ważnym aspektem kociego życia. Choci... 2017-03-30 10:21:27 po-krotkiej-przerwie cjy7sgxs0000bi3umeb9z90rn 2017-03-30 10:21:27 2017-03-30 10:21:27 -cj1941k6000d7i3umdf596e88 # 50 Twarzy JS: 3.Jak napisać dodatek do przeglądarki http://kot-zrodlowy.pl/dajsiepoznac2017/javascript/2017/04/08/50-twjs-dodaj-mnie-do-chrome.html Cześć! To znowu ja. I zauważyłam, że dawno nie było waszej ulubionej serii. Skąd wiem, że ulubionej? Statystyki i wasze komentarze nie kłamią, więc wy też nie próbujcie. Dzięki wszystkim, którzy do... 2017-04-08 10:21:27 50-twarzy-js-3jak-napisac-dodatek-do-przegladarki cjy7sgxs0000bi3umeb9z90rn 2017-04-08 10:21:27 2017-04-08 10:21:27 -cj1j1zd2000emi3umcgooe9xv Serdeczne życzenia wielkanocne http://kot-zrodlowy.pl/dajsiepoznac2017/offtop/2017/04/15/zyczenia-wielkanocne.html Cześć Kociaki, Czy jesteście już zmęczeni tymi przygotowaniami do świąt? Spokojnie, to już niedługo, bo jutro świętujemy wielkanoc. Ja spędzam ten szczególny czas z rodziną, raczej daleko od komput... 2017-04-15 09:21:27 serdeczne-zyczenia-wielkanocne cjy7sgxs0000bi3umeb9z90rn 2017-04-15 09:21:27 2017-04-15 09:21:27 cj1lwt79c00ewi3um3q674hh2 Garść pro-tipów dla początkujących- narzędzia dla deweloperów http://kot-zrodlowy.pl/dajsiepoznac2017/programowanie/2017/04/17/garsc-pro-tipow-w-dev-toolsach.html Cześć! Postanowiłam dzisiaj napisać bardziej ogólny i teoretyczny post. W końcu nie samym kodem żyjemy. Albo inaczej, kod piszemy i oczywiście jest on cudowny i najpiękniejszy na świecie… No chyba ... 2017-04-17 09:20:00 garsc-pro-tipow-dla-poczatkujacych-narzedzia-dla-deweloperow cjy7sgxs0000bi3umeb9z90rn 2017-04-17 09:20:00 2017-04-17 09:20:00 cj1q74r9c00fci3um4t9mhses Co się działo u karotek? - relacja z Geek Girls Carrots meet-up http://kot-zrodlowy.pl/dajsiepoznac2017/programowanie/offtop/2017/04/20/co-sie-dzialo-u-karotek.html Cześć! To znowu ja. Kto obserwuje mój fanpejdż (a naprawdę zachęcam) ten wie, że wczoraj byłam prelegentką na bydgoskim spotkaniu Geek Girls Carrots. Co to jest i z czym te marchewki się je? Myślę,... 2017-04-20 09:20:00 co-sie-dzialo-u-karotek-relacja-z-geek-girls-carrots-meet-up cjy7sgxs0000bi3umeb9z90rn 2017-04-20 09:20:00 2017-04-20 09:20:00 cj1yr40go00gai3um9pj6d3gn Zdarzenia w JS, z czym to się je? http://kot-zrodlowy.pl/javascript/programowanie/2017/04/26/zdarzenia-w-js-z-czym-to-si%C4%99-je.html Cześć! 2017-04-26 09:01:27 zdarzenia-w-js-z-czym-to-sie-je cjy7sgxs0000bi3umeb9z90rn 2017-04-26 09:01:27 2017-04-26 09:01:27 @@ -422,6 +428,8 @@ cklan1var00010wmi1zhx9fyb React – kurs kompletny 2021r. https://tworcastron.pl cklb7cvny00010wjszqh1i389 Svelte - Nowy szeryf w mieście? (warsztat eduweb.pl) https://www.youtube.com/watch?v=sZOnAgMPsP8 \N 2021-02-18 18:27:03 svelte-nowy-szeryf-w-miescie-(warsztat-eduweb.pl) ckieg15g0001bi3um0fj3gred 2021-02-18 18:33:17.134 2021-02-18 18:33:17.134 ckldlqz6z00010wl31l55405z Jak pracować zdalnie? Najważniejsze zasady pracy zdalnej dla programisty https://devpebe.com/2021/02/20/jak-pracowac-zdalnie-najwazniejsze-zasady-pracy-zdalnej-dla-programisty/ Od wielu miesięcy zapewne większość programistów pracuje zdalnie. Ja również. W artykule opiszę elementy, zasady na które warto zwrócić uwagę podczas pracy zdalnej. 2021-02-20 10:48:57 jak-pracowac-zdalnie-najwazniejsze-zasady-pracy-zdalnej-dla-programisty ckiplfn1c001ci3um4nlf8o4x 2021-02-20 10:51:41.867 2021-02-20 10:51:41.867 cklfg9ti600010vl8muiu2vsu Generyczna obsługa błędów w Angular https://wojciechszucko.com/generyczna-obsluga-bledow-w-angular/

Generyczna obsługa błędów to niezbędny element każdej aplikacji. Taką obsługę zapewnia własny ErrorHandler. Dzięki niemu wyświetlisz komunikat o błędzie lub zalogujesz błąd do zewnętrznych systemów. Podstawowe działanie Podstawowym rozwiązaniem, które Angular dostarcza to logowanie błędu w konsoli przeglądarki. Możesz zmienić te zachowanie dodając własną klasę CustomErrorHandler, która będzie implementować metodę handleError. Własny ErrorHandler Załóżmy, że gdy wystąpi błąd w aplikacji chcesz wyświetlić użytkownikowi komunikat o błędzie. Do implementacji tej funkcjonalności potrzebujesz serwisu otwierającego dialog z komunikatem, komponentu z komunikatem i klasę CustomErrorHandler, która implementuje interfejs ErrorHandler. Serwisem, który otwiera dialogi może być MatDialog z biblioteki @angular/material, implementacja komponentu z komunikatem…

\n

Artykuł Generyczna obsługa błędów w Angular pochodzi z serwisu Wojciech Szućko.

2021-02-21 17:51:50 generyczna-obsluga-bledow-w-angular cki6eer4w001ri3umeoa347v0 2021-02-21 17:53:55.614 2021-02-21 17:53:55.614 +ckliomdr600251ums3k1uu2tf Jedno proste pytanie, które uprości twój kod https://skutecznyprogramista.pl/jedno-proste-pytanie/ O tym jak uprościć swój kod, przestać myśleć jak owieczka, przyspieszyć rozwój oraz zaoszczędzić czas i pieniądze klienta. To wszystko przy pomocy jednego prostego pytania. 2020-02-20 00:00:00 jedno-proste-pytanie-ktore-uprosci-twoj-kod ckjgw7inp00000vk0v43qxoef 2021-02-24 00:10:57.186 2021-02-24 00:10:57.186 +ck42wlmao01u5i3um2wakg347 Quokka - szybkie prototypy w twoim edytorze https://fsgeek.pl/post/quokka-szybkie-prototypy-w-twoim-edytorze/

Czasami podczas tworzenia aplikacji musimy na szybko sprawdzić kawałek kodu. Możemy do tego wykorzystać naszą przeglądarkę i konsolę by sprawdzić wyrażenie lub na szybko coś przetestować. A może możemy przenieść konsolę z przeglądarki do naszego edytora?

\n\n

Quokka

\n\n

Ja osobiście bardzo często wykorzystuję konsolę w przeglądarce by na szybko sprawdzić jakiś pomysł lub czy dana konstrukcja zadziała i dostanę taki wynik jaki oczekuję. I tak jak świetnie to się sprawdza w przypadku np.: operacji na elementach tablicy tak ciężko jest to wykorzystać by sprawdzić konkretną bibliotekę. Mnie najczęściej się to zdarza gdy wykorzystuję bibliotekę do operacji na datach (lub czasie) np.: date-fns czy moment i potrzebuję sprawdzić czy funkcja zwraca mi to co potrzebuję. I tutaj idealnie sprawdza się rozwiązanie, które znalazłem ostatnio czyli Quokka. Przenosi ona konsolę do naszego IDE wraz z dodatkowymi możliwościami. Jedną z tych istotnych jest dla mnie właśnie możliwość importowania bibliotek, które mamy w projekcie. Oczywiście można też kupić wersje PRO, która dodaje kolejne funckjonalności między innymi opcję importowania plików, które sami stworzyliśmy w projekcie.

\n\n

Instalacja w WebStorm

\n\n

Instalacja w WebStorm jest banalnie prosta i sprawdza się do zainstalowania pluginu Quokka. Teraz wystarczy, że wykorzystamy istniejący w IDE mechanizm Scratches

\n\n

scratches

\n\n

W momencie gdy dodamy tam plik to automatycznie uruchomi się tam Quokka i będzie wyświetlała nam zawartość kolejnych zmiennych i wyrażeń z których będziemy korzystać.

\n\n

resultfile

\n\n

Jak widać nie musimy nawet opakowywać zmiennych w console.log by zobaczyć co jest w środku

\n\n

Instalacja w Visual Studio Code

\n\n

Podobnie jak w Webstorm tutaj instalacja sprowadza się do zainstalowania odpowiedniego pluginu. Następnie przy pomocy palety komend (Ctrl/Cmd + Shift + P) musimy wpisać Quokka: New File co stworzy opowiedni plik i podepnie do niego plugin.

\n\n

scratches

\n\n

Jednak tutaj jakbyśmy chcieli zapisać ten plik i zostawić go sobie na póżniej to zostanie on zapisany w naszym projekcie - Webstrom z mechanizmem Scratches ma to troszke lepiej to rozegrane bo nasze testy i pliki projektu są rozdzielone.

\n\n

Co myślicie o takim rozwiązaniu jako zastąpieniu konsoli na potrzeby testowania funkcjonalności Javascriptu oraz bibliotek? Oczywiście nie jesteśmy w stanie testować np.: operować na elementach w drzewie DOM. Jednak jeśli nie potrzebujemy tego lub piszemy aplikacje w Node.js i musimy coś przetestować to jak dla mnie jest to naprawdę dobre rozwiązanie i warto mieć to w swoim IDE. Od jakiegoś czasu z tego korzystam i musze przyznać, że bardzo mi się podoba Quokka i co najważniejsze sprawdza się podczas pisania kodu.

2019-12-12 15:55:00 quokka-szybkie-prototypy-w-twoim-edytorze ckhxjb6o0000yi3umb3hg09jv 2019-12-12 15:55:00 2019-12-12 15:55:00 ci8rek7s8003zi3umb5tfen84 JavaScript – kochaj albo rzuć! https://pawelochota.pl/2015/04/javascript-kochaj-albo-rzuc/

Wpis ten jest kopią mojego postu z bloga creativemobile.pl. Technologie webowe od zawsze były kuszące. Uatrakcyjniają nasze witryny, pozwalają na bogate interakcje użytkowników ze stroną, zadziwiają swoimi możliwościami a tempo ich rozwoju jest niezwykłe. A gdyby tak nauczyć się samemu nimi operować i tworzyć zupełnie nowe rzeczy? Siadamy więc przed komputerem, czytamy czasopisma, książki itp.

\n

Artykuł JavaScript – kochaj albo rzuć! pochodzi z serwisu Z podwórka programisty.

2015-04-21 14:24:17 javascript-kochaj-albo-rzuc ck801ynig001pi3um28xx49z7 2015-04-21 14:24:17 2015-04-21 14:24:17 cklg52hid00010wl2odjp4r5x Pytania rekrutacyjne. Przygotuj się do rozmowy o pracę https://a-frontman.pl/pytania-rekrutacyjne-jak-przygotowac-sie-do-rozmowy-o-prace/?utm_source=rss&utm_medium=rss&utm_campaign=pytania-rekrutacyjne-jak-przygotowac-sie-do-rozmowy-o-prace

Hej! W ramach cyklu #start_angular Przygotowaliśmy coś specjalnego. Mega piguła wiedzy o tym, co czeka Cię na…

\n

Artykuł Pytania rekrutacyjne. Przygotuj się do rozmowy o pracę pochodzi z serwisu a - frontman.

2021-02-22 05:12:55 pytania-rekrutacyjne.-przygotuj-sie-do-rozmowy-o-prace ckio5ucds001qi3um0occaae7 2021-02-22 05:28:03.877 2021-02-22 05:28:03.877 cklgm1fuq00010wl8tz1xbhw2 Jak korzystać z Firebase'a 100% za darmo? https://fsgeek.pl/post/firebase-emulator-jak-korzystac/ Jedną z przeszkód przy nauce firebase'a może być strach przed kosztami. Strach przed tym, że zrobimy jakąś głupotę i zapłacimy majątek, może być blokujący. Pokażę ci, jak można to zrobić w 100% bezpiecznie i za darmo. 2021-02-22 16:00:00 jak-korzystac-z-firebase'a-100percent-za-darmo ckhxjb6o0000yi3umb3hg09jv 2021-02-22 13:23:08.547 2021-02-22 13:23:08.547 @@ -435,6 +443,8 @@ ck9ct1tnc020hi3umc7nicuqw Tworzenie dokumentacji komponentów w Storybook https: cka73qdkg021vi3ume3x09jro Jak zrobić animowany „efekt fali” w CSS? https://devpebe.com/2020/05/14/jak-zrobic-animowany-efekt-fali-w-css/ Efekt fali w CSS przedstawiony w artykule jest kreatywny i prosty w wykonaniu. Do animacji wykorzystałem tylko CSS! Jak zrobić efekt fali? Wystarczy kilka linijek kodu :). Kod HTML Kod CSS (SCSS) Jak działa powyższy kod Animacja opiera się na zwykłych divach z tłem oraz zaokrąglonymi rogami (border-radius), które obracają się dzięki transform: rotate(). Wielkość […] 2020-05-14 18:23:58 jak-zrobic-animowany-efekt-fali-w-css ckiplfn1c001ci3um4nlf8o4x 2020-05-14 18:23:58 2020-05-14 18:23:58 ckcm5783s024ti3um0q86db2g Czym są domknięcia (closures) w JavaScript? https://devpebe.com/2020/07/14/czym-sa-domkniecia-closures-w-javascript/ Domknięcia to jeden z podstawowych mechanizmów działania JavaScript. Zobacz czym są domknięcia. 2020-07-14 16:21:01 czym-sa-domkniecia-closures-w-javascript ckiplfn1c001ci3um4nlf8o4x 2020-07-14 16:21:01 2020-07-14 16:21:01 ckiplfn1c02bmi3um77pce44q Czym jest Hoisting w JavaScript? https://devpebe.com/2020/12/15/czym-jest-hoisting-w-javascript/ Hoisting to kolejny z podstawowych terminów w JavaScript. Znajomość tego zagadnienia często wymagana jest procesu rekrutacyjnego i pomaga w zrozumieniu działania kodu JavaScript. Czym jest hoisting? Hoisting (windowanie) mówi o tym jak działa JavaScript. W języku JavaScript podczas wykonywania kodu wszystkie deklaracje zmiennych oraz funkcji „przenoszone są na początek”, co oznacza że nieważna jest kolejność […] 2020-12-15 06:17:00 czym-jest-hoisting-w-javascript ckiplfn1c001ci3um4nlf8o4x 2020-12-15 06:17:00 2020-12-15 06:17:00 +ckliftlyj00010wl82hxvtciz Praca z Git – GitHub Flow https://frontstack.pl/praca-z-git-github-flow/?utm_source=rss&utm_medium=rss&utm_campaign=praca-z-git-github-flow

W jednym z poprzednich wpisów omówiliśmy sobie, czym jest Git Flow. Przedstawiony tam sposób pracy z Gitem może dla niektórych wydawać się nieco zbyt rozbudowany i skomplikowany. Szczególnie teraz, gdy coraz większą rolę odgrywają aplikacje webowe, programiści mogą dużo szybciej i częściej dostarczać nowe funkcjonalności. Tempo takich prac bardzo często pozwala na to, aby po […]

\n

The post Praca z Git – GitHub Flow appeared first on Frontstack.pl.

2021-02-23 19:50:40 praca-z-git-github-flow ckc4s1jmo001ii3um6ovu5nhk 2021-02-23 20:04:37.867 2021-02-23 20:04:37.867 +ck4a1g0o001udi3um6y1r1o5r ES2020 - co nowego nas czeka? https://fsgeek.pl/post/es2020-co-nowego-nas-czeka/

Wielkimi krokami zbliża się do nas Nowy Rok a wraz z nim nowe funkcjonalności w JavaScript. Czy wiemy czego możemy się spodziewać? I czy warto na to czekać? Co się zmieni w tym popularnym języku i jak to wpłynie na sposób w jakim piszemy kod?

\n\n

Optional chaining i Nullish coalescing

\n\n

O optional chaining i nullish coalescing pisałem już gdy ta funkcjonalność pojawiła się w Typescript. W nowej wersji JS’a będzie wyglądało to identycznie więc zapraszam do tamtego postu jeśli chcecie poznać szczegóły - znajdziecie go tutaj

\n\n

BigInt

\n\n

Następna nowość nie jest tak spektakularna ale może być przydatna w niektórych zastosowaniach(na razie nie miałem sytuacji gdzie by to się przydało ale kto wie co przyniesie przyszłość). BigInt pozwala na przechowywanie liczb całkowitych, które są większe od 2^53. Możemy zadeklarować zmienną tego typu na dwa sposoby:

\n\n
const a = BigInt(10)\nconst b = 10n\ntypeof(a) // "bigint"\ntypeof(b) // "bigint"\n
\n\n

Pomimo tego, że jest to ciągle liczba całkowita to ma zupełnie inny typ niż to co wykorzystywaliśmy do tej pory. Warto o tym pamiętać gdy będziemy mieszać obie koncepcje i będziemy próbować porównać dwie zmienne:

\n\n
const a = 10\nconst b = 10n\na == b  // true\na === b // false\n
\n\n

Ciągle mamy do czynienia z liczbami całkowitymi więc operacje matymatyczne będą działały poprawnie - jedyne ograniczenie to nie możemy mieszać operacji pomiędzy Number a BigInt

\n\n
const a = BigInt(10)\nconst b = 9\n\nconst c = a + 1n // 11\n\nconst d = a + b // Cannot mix BigInt and other types, use explicit conversions\n
\n\n

Ale za to możemy porównywać je między sobą - dzięki temu możemy spokojnie umieszczać je razem w tablicy i np.: sortować

\n\n
const a = BigInt(10)\nconst b = 9\n\na < b // false\na > b // true\n
\n\n

Promise.allSettled

\n\n

Jedna z nowości na którą czekam z niecierpliwością. Promise.allSettled jest jedną z 4 funkcji, które pozwalają nam pracować z Promise’ami. Do tych funkcji zaliczamy:

\n\n\n\n

Promise.allSettled będzie działał podobnie do Promise.all ale nie będzie przerywany po wystąpieniu błędu. Zamiast tego po zakończeniu wszystkich Promise'ów (niezależnie czy zakończy się statusem fullfiled czy rejected) dostaniemy tablicę obiektów. Każdy obiekt reprezentuje pojedynczy Promise i zwiera informacje jak się zakończył oraz z jaką wartością

\n\n
Promise.allSettled([Promise.resolve(1), Promise.reject(2), Promise.resolve(3)]).then(console.log)\n\n/*\n0: {status: "fulfilled", value: 1}\n1: {status: "rejected", reason: 2}\n2: {status: "fulfilled", value: 3}\n*/\n
\n\n

import()

\n\n

Kolejna dodana rzecz to jest dynamiczny import() - nie należy go mylić z importem, który spotykamy w modułach JS. import() pozwala na dynamiczne ładowanie kodu JS w trakcie trwania programu np.: na skutek jakieś akcji na stronie np.: naciśnięcia przycisku. Dodatkowo samo polecenie jest asynchroniczne więc będziemy je obsługiwać przy pomocy then().catch()

\n\n
import('path_to_script.js')\n        .then(module => {\n          //obsługa skryptu\n        })\n        .catch(err => {\n          //obsługa błędu\n        });\n
\n\n

globalThis

\n\n

Na sam koniec coś co może nie wygląda jako super funkcjonalność ale może ułatwić życie osobom piszącym biblioteki, które mogą być używane w różnych środowiskach i korzystają z globalnego this. This w zależności od środowiska, w jakim program będzie uruchomiony, będzie wskazywał na inny element np.:

\n\n\n\n

Jeżeli nasza biblioteka korzysta z tego globalnego this to aktualnie musimy wykonywać kawałek brzydkiego if’a by mieć pewność do czego się odwołujemy. Teraz będzie to łatwiejsze i zunifikowane we wszystkich miejscach

\n\n

Na co jeszcze poczekamy?

\n\n

A co nasz czeka w dalszej przyszłości? W Stage 3 są już propozycje dodania prywatnych zmiennych oraz metod, statycznych pól i metod w klasach oraz top-level await. Jest tam też już propozycja dla Promise.any o którym pisałem wyżej. Nieco dłużej możemy poczekać na dekoratory, które dopiero są na Stage 2.

\n\n

A co wam się podoba najbardziej z nadchodzących nowości? Jak dla mnie jest to na pewno optional chaining, nullish coalescing oraz Promise.allSettled. Są to przykłady zmian, które pomogą pisać bardziej zwięzły kod - a im mniej kodu tym mniej okazji by się pomylić. Chciałbym też by wspomniane przez ze mnie fukcjonalności, które nie wejdą w tym roku weszły jak najszybciej ale tutaj trzeba uzbroić się w cierpliwość. Dodalibyście coś jeszcze do tej listy?

2019-12-17 15:45:00 es2020-co-nowego-nas-czeka ckhxjb6o0000yi3umb3hg09jv 2019-12-17 15:45:00 2019-12-17 15:45:00 ckq8ego6f00020vmrqd2kleim TypeScript: Projekt cz.2 #14 https://www.youtube.com/watch?v=9fQSJrKLi4w Drugi odcinek projektu w TypeScript a w nim:\n- implementacja LocalStorage,\n- implementacja BasketStorage,\n- naprawa błędów konfiguracji w projekcie,\n\nPierwszy odcinek znajduje się tutaj:\nhttps://youtu.be/AyD0fqZfxxw\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 klasa SessionStorage\n07:27 klasa BasketStorage\n10:15 typ Product\n13:35 typ BasketProduct\n17:00 Naprawa błędów konfiguracji\n20:27 Test BasketStorage 2021-06-22 18:24:10 typescript:-projekt-cz.2-14 ckjpkgp9u000012mnlbnkxu51 2021-06-22 18:47:24.52 2021-06-22 18:47:24.52 cklas425h00010wl9ffthqho4 Svelte - Nowy szeryf w mieście? https://www.youtube.com/watch?v=h-xt5aOXVEY Stream wysokiej jakości oraz sesja pytań i odpowiedzi jest dostępna na eduweb.pl\nhttps://eduweb.pl/wydarzenia/svelte 2021-02-18 11:16:27 svelte-nowy-szeryf-w-miescie ckieg15g0001bi3um0fj3gred 2021-02-18 11:26:31.398 2021-02-18 11:26:31.398 ckle0hl2t00010wlbx663exm0 Rok 2021 to początek końca Dockera? https://webmastah.pl/rok-2021-to-poczatek-konca-dockera/ Na początku grudnia 2020 gruchnęła informacja, że Kubernetes 1.20 „deprecates Docker”. Póki co oznacza to, że Kubernetes będzie wyświetlał ostrzeżenie. Właściwie „deprecates Docker” odnosi się do dockershim co dokładniej wyjaśniam poniżej.\nDopiero w wersji 1.22 wsparcie Docker zostanie usunięte, co jest planowane na drugą połowę 2021 roku. I dlatego właśnie uważam że rok 2021 to początek końca Dockera.\nSpis treści: Co to jest Docker i Kubernetes? Dlaczego Docker jest ważny? 2021-02-20 12:33:52 rok-2021-to-poczatek-konca-dockera ckcf8vjeg000ai3um1mox19e8 2021-02-20 17:44:17.91 2021-02-20 17:44:17.91 @@ -447,6 +457,7 @@ ckliomdvi00901umsorpmpo1u Umieszczasz skrypty np. Google Analytics, Hubspot, Ads ckliomdw201171umsf1jm8es4 Narzędzia poprawiające komunikację, które pożyczyłem od Keanu Reevesa i Hannibala Lectera https://skutecznyprogramista.pl/narzedzia-poprawiajace-komunikacje-ktore-pozyczylem-od-keanu-reevesa-i-hannibala-lectera/ A także od Matki Teresy, Jamesa Bonda oraz Teda Bundyego. 2020-03-12 00:00:00 narzedzia-poprawiajace-komunikacje-ktore-pozyczylem-od-keanu-reevesa-i-hannibala-lectera ckjgw7inp00000vk0v43qxoef 2021-02-24 00:10:57.363 2021-02-24 00:10:57.363 ckliomdwm01451ums2pwmzhst Programista "bohater", czyli podstawowy błąd początkującego https://skutecznyprogramista.pl/programista-bohater/ W tym odcinku opisuję zachowania programistów "bohaterów" i jak bardzo potrafi to zaszkodzić zespołowi. Dowiesz się czemu nie warto być bohaterem jeśli chcesz skutecznym programistą. 2020-04-30 00:00:00 programista-"bohater"-czyli-podstawowy-blad-poczatkujacego ckjgw7inp00000vk0v43qxoef 2021-02-24 00:10:57.383 2021-02-24 00:10:57.383 ckliomdxs01751umssgrdcw4m Jak działa forEach, map, filter oraz reduce w JavaScript https://www.youtube.com/watch?v=iaAHEYuP7Eg Ten filmik dedykuje wszystkim którzy ucząc się JavaScriptu nie do końca rozumieją podstawowe metody tablicowe forEach, map, reduce oraz filter.\n\nPostaram się Wam pokazać jak działają te metody i przedstawić argumenty za tym, że wykorzystywanie pętli for czy for of jest wbrew pozorom trudniejsze, a wykorzystanie metod tablicowych da Wam lepszy, zwięźlejszy, czytelniejszy i pewniejszy kod.\n\nJeżeli uważasz, że wiedza którą przedstawiam jest wartościowa zostaw proszę subskrybcję (najlepiej z dzwoneczkiem - będziesz zawsze na bieżąco) oraz został łapkę w górę dla motywacji do kolejnych nagrań. Mile widziany również feedback pod filmem.\n\n0:00 Wstęp\n2:00 Metoda forEach\n10:18 Metoda map\n24:00 Metoda filter\n29:13 Metoda reduce\n41:27 Zakończenie 2021-01-30 16:30:03 jak-dziala-foreach-map-filter-oraz-reduce-w-javascript ckjpkgp9u000012mnlbnkxu51 2021-02-24 00:10:57.425 2021-02-24 00:10:57.425 +ck4tkn39c01uri3um4vf627ay Podsumowanie 2019 i plany na 2020 https://fsgeek.pl/post/podsumowanie-2019-i-plany-2020/

To już prawie tradycja, że w ostatnim poście w roku tworzę krótkie podsumowanie mijającego roku i snuję plany na przyszły rok. Jak więc wyszedł mi ten rok na blogu i jakie są plany na przyszły?

\n\n

Rok 2019 na blogu

\n\n

Tak jak pisałem w zeszłorocznym podsumowaniu w tym roku skupiłem się na języku JavaScript(oraz Typescript) i myślę, że mi się to udało. Przez 12 miesięcy udało mi się napisać 31 postów co jest dla mnie naprawdę dobrym wynikiem, który zamierzam oczywiście poprawić. Jakie posty wyszły w tym roku:

\n\n\n\n

Liczba oraz tematyka postów przełożyła się na ilość użytkowników na blogu, których było prawie o 100% więcej niż w poprzednim roku i wyniosła prawie 33 tys. Dodatkowo zwiększyła się liczba odsłon do liczby prawie 61 tys. Wzrost liczby czytelników widzę również na fanpage’u - liczba polubień strony wzrosła o 141 osób natomiast liczba obserwujących o 164 osoby. To właściwie wasza zasługa więc bardzo dziękuję za każdy lajk czy udostępnienie moich postów.

\n\n

Na sam koniec muszę jeszcze wspomnieć o miłej niespodziance jaka mnie spotkała czyli okazji by pod koniec roku być patronem medialnym dla konferencji ConFrontJs 2019.

\n\n

Plany na 2020

\n\n

W tym roku chcę się ciągle skupić na tematyce związanej z JavaScript i TypeScript na blogu. Jestem pewien, że będzie tam wiele interesujących tematów o których mogę pisać. Dodatkowo w drugiej połowie roku mam zaplanowane odświeżenie wyglądu stronu i zabranie się bardziej poważnie za identyfikację graficzną strony jak i fanpage’ów. Oczywiście ciągle priorytetem będzie dla mnie pisanie ciekawych artykułów. Mam również zamiar trochę więcej pisać na tematy miękkie i związane ogólnie z programowaniem niż konkretnie z językiem. Zobaczymy co z tego wyjdzie a póki co życzę wam udanego Nowego Roku. A wy macie jakieś plany noworoczne związane z programowaniem? Jakiś nowy język, technika a może nauczenie się wszystkich wzorców projektowych?

2019-12-31 07:50:00 podsumowanie-2019-i-plany-na-2020 ckhxjb6o0000yi3umb3hg09jv 2019-12-31 07:50:00 2019-12-31 07:50:00 ckq8gk76900020wmbnfers1gr TypeScript: Projekt cz.3 #15 https://www.youtube.com/watch?v=L1dLGp3Ur9A Trzeci odcinek projektu w TypeScript a w nim:\n- implementacja Routera,\n\nDrugi (poprzedni) odcinek znajduje się tutaj:\nhttps://youtu.be/9fQSJrKLi4w\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript 2021-06-22 19:22:13 typescript:-projekt-cz.3-15 ckjpkgp9u000012mnlbnkxu51 2021-06-22 19:46:08.337 2021-06-22 19:46:08.337 cklaxr7ys00010wicfvbwuwjt 5 zasad dobrego onboardingu developera ⌨️ hello roman #150 https://www.youtube.com/watch?v=w00jqYSUM3o ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-02-18 14:00:16 5-zasad-dobrego-onboardingu-developera-hello-roman-150 ckiswuz9s0017i3um5mg4h7q1 2021-02-18 14:04:30.101 2021-02-18 14:04:30.101 ckli4f85g00010wmairntbgfo Domyślne parametry w JavaScript | overment https://www.youtube.com/watch?v=Mz0x-DoItok Domyślne parametry funkcji w JavaScript umożliwiają lepszą pracę z kodem i obsługę błędów. Jest wiele różnych sposobów na obsługę brakujących parametrów funkcji i w tym filmie omówimy sobie niektóre z nich (if / else, ternary operator, logical OR oraz nullish coalescing). \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nFacebook: https://facebook.com/overment\nDiscord: https://overment.com/discord\nInstagram: https://overment.com/instagram\nTwitter: https://twitter.com/_overment\n\nTworząc filmy (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. \nChcesz zawsze pozostać na bieżąco z programowaniem? \n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2021-02-23 14:30:06 domyslne-parametry-w-javascript-or-overment ckieg15g0001bi3um0fj3gred 2021-02-23 14:45:31.013 2021-02-23 14:45:31.013 @@ -470,8 +481,6 @@ ckliome1302151ums2mp195ae Destrukturyzacja tablic w JavaScript i porównanie z o ckliome2602481umsjwcuow38 TDD KATAS JAVASCRIPT #1 https://www.youtube.com/watch?v=MT3-0NKgqVY W tym filmie rozwiązuje 5 niezbyt skomplikowanych zadań ze strony codewars w języku JavaScript.\n\nZapraszam do subskrybowania kanału i klikania w dzwoneczek aby być zawsze na bieżąco z nowymi filmami.\n\n0:00 Wstęp\n1:30 Maximum product - 7kyu\n9:20 Multiplication table - 6kyu\n18:46 Get the mean of an array - 8kyu\n21:24 Check the exam - 8kyu\n27:05 Meeting - 6kyu\n36:58 Zakończenie 2021-01-25 11:00:13 tdd-katas-javascript-1 ckjpkgp9u000012mnlbnkxu51 2021-02-24 00:10:57.583 2021-02-24 00:10:57.583 ckqhyok9w00020vl4v3bpwotz JVM Tuesday vol. 44 https://blog.vived.io/jvm-tuesday-vol-45/ W dniu dzisiejszym mały "rant" na GlassFisha, nowa seria wideo od Oracle o JEPach, oraz minor Kotlina który nie jest wcale taki minorowy. 2021-06-29 11:00:00 jvm-tuesday-vol.-44 ckmor5k8y000044moj65m13y0 2021-06-29 11:23:20.613 2021-06-29 11:23:20.613 ckqjzpv7d00020wl8tbyrfpqw Jak strzelić sobie różdżką w stopę? https://blog.comandeer.pl/jak-strzelic-sobie-rozdzka-w-stope.html W życiu niemal każdego programisty przychodzi taki moment, w którym stwierdza, że w jego kodzie przyda się więcej magii. A potem za zabawę z tymi ciemnymi mocami płaci wysoką cenę. Nie inaczej było też i w mojej przypadku. Ale po kolei… 2021-06-30 21:22:00 jak-strzelic-sobie-rozdzka-w-stope cki52vf40000ci3um2x784hhn 2021-06-30 21:27:53.401 2021-06-30 21:27:53.401 -ckliftlyj00010wl82hxvtciz Praca z Git – GitHub Flow https://frontstack.pl/praca-z-git-github-flow/?utm_source=rss&utm_medium=rss&utm_campaign=praca-z-git-github-flow

W jednym z poprzednich wpisów omówiliśmy sobie, czym jest Git Flow. Przedstawiony tam sposób pracy z Gitem może dla niektórych wydawać się nieco zbyt rozbudowany i skomplikowany. Szczególnie teraz, gdy coraz większą rolę odgrywają aplikacje webowe, programiści mogą dużo szybciej i częściej dostarczać nowe funkcjonalności. Tempo takich prac bardzo często pozwala na to, aby po […]

\n

The post Praca z Git – GitHub Flow appeared first on Frontstack.pl.

2021-02-23 19:50:40 praca-z-git-github-flow ckc4s1jmo001ii3um6ovu5nhk 2021-02-23 20:04:37.867 2021-02-23 20:04:37.867 -ckliomdr600251ums3k1uu2tf Jedno proste pytanie, które uprości twój kod https://skutecznyprogramista.pl/jedno-proste-pytanie/ O tym jak uprościć swój kod, przestać myśleć jak owieczka, przyspieszyć rozwój oraz zaoszczędzić czas i pieniądze klienta. To wszystko przy pomocy jednego prostego pytania. 2020-02-20 00:00:00 jedno-proste-pytanie-ktore-uprosci-twoj-kod ckjgw7inp00000vk0v43qxoef 2021-02-24 00:10:57.186 2021-02-24 00:10:57.186 ckliomdtu00371umsoiln5w3z Ucz się na głos i dokumentuj swoją drogę ("career hack" dla początkującego programisty) https://skutecznyprogramista.pl/ucz-sie-na-glos/ Tym razem występuję jako skryba, który przekonuje do dokumentowania swojej drogi i budowania wizerunku. 2020-06-04 00:00:00 ucz-sie-na-glos-i-dokumentuj-swoja-droge-("career-hack"-dla-poczatkujacego-programisty) ckjgw7inp00000vk0v43qxoef 2021-02-24 00:10:57.282 2021-02-24 00:10:57.282 ckliomdui00591umsb2b5549e Komunikacja - druga najważniejsza rzecz w programowaniu https://skutecznyprogramista.pl/druga-najwazniejsza-rzecz-w-programowaniu/ O drugiej najważniejszej rzeczy w programowaniu. Nadal nie jest to kodzik, tylko komunikacja, której niestety prawie nikt nie ogarnia. Sprawdź dlaczego jest to dla Ciebie bardzo dobra informacja. 2020-03-10 00:00:00 komunikacja-druga-najwazniejsza-rzecz-w-programowaniu ckjgw7inp00000vk0v43qxoef 2021-02-24 00:10:57.306 2021-02-24 00:10:57.306 ckliomdv500851umsjwlcl1p5 Jak sprawdzać, czy nie hamujesz swojego rozwoju? https://skutecznyprogramista.pl/jak-sprawdzac-czy-nie-hamujesz-swojego-rozwoju/ O ekspertach, którzy nie są ekspertami, co o tym mówią amerykańscy naukowcy i jak ta wiedza pomoże Ci sprawdzić, czy hamujesz swój rozwój. 2020-03-26 00:00:00 jak-sprawdzac-czy-nie-hamujesz-swojego-rozwoju ckjgw7inp00000vk0v43qxoef 2021-02-24 00:10:57.329 2021-02-24 00:10:57.329 @@ -494,6 +503,8 @@ ckqkltzg100080wjuu95wim31 Czy Github Copilot i AI pozbawi mnie pracy programisty ckl6gzu3e00010wl4e9zlmq4e Jest - pierwszy test https://frontlive.pl/blog/jest-pierwszy-test Poznaj najpopularnieszy framework do testowania kodu JavaScript! 2021-02-15 00:00:00 jest-pierwszy-test ckgvhpmo0001ji3umfm7ubw86 2021-02-15 11:04:13.851 2021-02-15 11:04:13.851 ckliomdzj01861umstrsbp7cu WEBINAR: Optymalizacja front-endu a wpływ na biznes / Web Dev Insider / Zoptymalizowany Frontend https://www.youtube.com/watch?v=4ypqTZcM-9M ⚡️KURS ZOPTYMALIZOWANY FRONT-END🚀 - jest już dostępny w przedsprzedaży, w mega atrakcyjnej cenie - NIGDY NIE BĘDZIE TANIEJ. Wpadnij poczytać o kursie i nie zwlekaj z decyzją - taka oferta ważna jest tylko do 30. listopada: https://www.webdevinsider.pl/zoptymalizowany-frontend.\n\nAGENDA:\n00:00 Wprowadzenie, introdukcja\n06:30 Kim jestem, co robię?\n08:22 Skąd tak duży nacisk na optymalizację wydajności front-endu?\n11:11 Kultura wydajności (w zespole, wśród klientów)\n15:17 Wydajność webowa ma bezpośredni wpływ na biznes\n19:25 Statystyki, przykłady przełożenia optymalizacji front-endu na biznes\n22:50 Moja misja\n23:50 Jak zacząć optymalizować?\n27:43 Na czym skupić się od razu pod kątem optymalizacji front-endu? (skrypty zewnętrzne, opóźnianie skryptów, lazy loading, WEBP)\n44:25 Postrzegalna wydajność jako główny cel optymalizacji\n47:33 Co dalej?\n49:50 Odpowiedzialność front-end developerów za biznes\n54:10 Pomoc w optymalizacji front-endu\n54:30 Oficjalny start przedsprzedaży kursu Zoptymalizowany Frontend - szczegóły dotyczące kursu\n1:06:15 Q&A\n\nTo nagranie pochodzi z webinaru przeprowadzonego na żywo w dniu 24. listopada. Traktuje o budowaniu zaufaniu wobec marki i wykorzystywaniu potencjału biznesowego przez WYDAJNY front-end. Posiadanie umiejętności pisania zoptymalizowanego front-endu, to obowiązek każdego front-end developera - zwłaszcza pod kątem roku 2021. O tym wszystkim dowiesz się z tego materiału.\n\n#frontend #optymalizacja #corevitals 2020-11-25 08:27:38 webinar:-optymalizacja-front-endu-a-wplyw-na-biznes-web-dev-insider-zoptymalizowany-frontend ckjrjuqf900002bk2kpgy4181 2021-02-24 00:10:57.488 2021-02-24 00:10:57.488 ckliome1502191umsph2ptrzm #code16challenge Zaprogramowałem raperkę, która rapuje moje #hot16challenge! #frontend #js https://www.youtube.com/watch?v=sIx0bGVN1do 👉 DEMO hot16challenge: https://www.webdevinsider.pl/hot16challenge/\n👉 Link do zbiórki: https://www.siepomaga.pl/hot16challenge\n👉 Dołącz do mojego zespołu: https://careers.biggerpicture.agency/frontend-developer-praca/\n👉 Mój kurs o optymalizacji frontendu: https://www.webdevinsider.pl/zoptymalizowany-frontend/ 2020-06-20 17:18:01 code16challenge-zaprogramowalem-raperke-ktora-rapuje-moje-hot16challenge!-frontend-js ckjrjuqf900002bk2kpgy4181 2021-02-24 00:10:57.545 2021-02-24 00:10:57.545 +ckguyf6o00296i3um38xa3okh Jak połączyć naszą aplikację w Bubble.io z Airtable? https://fsgeek.pl/post/trzymanie-danych-z-bubble-w-airtable/ W aplikacjach musimy gdzieś trzymać nasze dane. Możemy trzymać dane bezpośrednio w bazie danych od Bubble.io. Ale czasami chcemy część danych trzymać w innym miejscu. Dobrym miejscem do tego jest Airtable. 2020-10-29 15:00:00 jak-polaczyc-nasza-aplikacje-w-bubbleio-z-airtable ckhxjb6o0000yi3umb3hg09jv 2020-10-29 15:00:00 2020-10-29 15:00:00 +ckh23mg00029hi3um869ab59q Jak zapanować nad Promise'ami w aplikacji? https://fsgeek.pl/post/javascript-promise-all-allsettled-race-any/ Promisy są aktualnie podstawowym sposobem radzenia sobie z asynchronicznym kodem w JavaScript. Pojawiają się prawie w każdym trochę bardziej zaawansowanym kawałku kodu. Czasem jest ich nawet aż za dużo. Jak więc sobie radzić z dużą ilością Promisów w aplikacji? 2020-11-03 15:00:00 jak-zapanowac-nad-promiseami-w-aplikacji ckhxjb6o0000yi3umb3hg09jv 2020-11-03 15:00:00 2020-11-03 15:00:00 ckliome2702501umssavz8emi 6# Jak pisać testowalny kod? Co to jest pure function? https://www.youtube.com/watch?v=sepfwVvs3-Y 🔴 Jak pisać kod, aby nie musieć go później przerabiać na potrzeby testów? Czy jedyne rozwiązanie to test driven development? Jak z góry zaplanować kod, aby pisanie do niego testów szło gładko? Wyjaśniam trzy cechy, które pomogą Ci opanować sztukę pisania łatwo testowalnego kodu JavaScript.\n\n0:00 - Co będziemy robić?\n0:45 - Analiza kodu. Co musieliśmy zrobić, aby kod dało się testować?\n1:40 - Co to jest idempotentność?\n2:39 - Co to znaczy brak side effectów?\n3:52 - Czym jest niemutowalność?\n7:40 - Co to jest pure function?\n\n🧪 Pełna playlista do tej serii o testowaniu:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN_nsAlEdVInoRkvE_pmLayP\n\n🔥🔥🔥🔥🚀\nZapisz się do newslettera: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\n🔥🔥🔥🔥🚀\n\nLink do repo z kodem, znajdź odpowiedni commit.\nhttps://github.com/lebrande/search-dropdown-record\n\nProjekt koduje Jakub Pusiak 2021-02-12 07:57:29 6-jak-pisac-testowalny-kod-co-to-jest-pure-function ckkb3uw6b00002smi6pw37cjt 2021-02-24 00:10:57.583 2021-02-24 00:10:57.583 ckliome2v02861umsbkhf5cat Alternatywa dla krytycznego CSS ⚡️ (critical CSS path) / Zoptymalizowany Front-end https://www.youtube.com/watch?v=1i8COs6HH00 Darmowe szkolenie LIVE (23.02.2021, 19:00) o Core Web Vitals + prezent: https://www.webdevinsider.pl/webinar-jak-poprawic-metryki-core-web-vitals\n\nJeśli plik CSS jest głównym wąskim gardłem Twojej strony, jedną z technik optymalizacji jest zastosowanie krytycznego CSS. Niestety jest to zadanie czasochłonne, czasem wręcz niemożliwe do wykonania, gdy nasza strona korzysta z CMSa. Poniższe rozwiązanie stanowi alternatywny sposób ładowania CSS, gdzie nasz jeden, duży arkusz dzielimy w sposób zautomatyzowany na mniejsze pliki i ładujemy z najwyższym priorytetem tylko ten, który odpowiada za daną rozdzielczość, na której aktualnie jest użytkownik. Przetestuj w swoim projekcie, jeśli CSS stanowi problem na Twojej stronie!\n\n#frontend #css #optymalizacja 2021-02-20 10:16:19 alternatywa-dla-krytycznego-css-(critical-css-path)-zoptymalizowany-front-end ckjrjuqf900002bk2kpgy4181 2021-02-24 00:10:57.608 2021-02-24 00:10:57.608 ckliome3v03091umsb0am6jho #5 Test Driven Development + Bonus https://www.youtube.com/watch?v=NYg5j076zdo 🔴 Ten odcinek wyjaśnia, jak wygląda proces tworzenia funkcji w Test Driven Development. Najpierw piszę test, a następnie to tego testu piszę kod. Dziwne? Tak, to wydaje się bez sensu. Jak testować funkcję, której nie ma? W programowaniu wszystko jest możliwe 😅\n\nTakie podejście ma swoje zalety. Przede wszystkim kod jest w pełni testowalny, w końcu testy do niego powstały, jeszcze zanim się urodził. Jak się okaże, czasami takie podejście ma też swoje konsekwencje w działaniu samej aplikacji. W naszej aplikacji, wystąpi problem z wydajnością, który jakoś sobie obejdziemy. Pamiętaj, żeby zawsze analizować napisany kod! Powodzenia!\n\nW tym filmie wyjaśniam poniższe zagadnienia:\n\n0:00 - Co będziemy robić?\n0:41 - Przeniesienie funkcji do osobnego pliku\n1:34 - Napisanie pustego testu\n2:06 - Co powinna robić testowana funkcja?\n3:22 - Pierwszy test - w górę\n5:06 - Drugi test - w dół\n6:14 - Trzeci test - w prawo\n6:55 - Czwarty test - mniej niż 0\n8:37 - Piąty test - więcej niż listLength\n11:10 - Dostosowanie komponentu do nowej funkcji\n13:08 - Analiza przed/po - problemy z optymalizacją\n15:34 - BONUS - Bug 1\n18:50 - BONUS - Bug 2\n\n🔥🔥🔥🔥🚀\nZapisz się do newslettera: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\n🔥🔥🔥🔥🚀\n\n🧪 Pełna playlista do tej serii o testowaniu:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN_nsAlEdVInoRkvE_pmLayP\n\nLink do repo z kodem:\nhttps://github.com/lebrande/search-dropdown-record\n\nProjekt koduje Jakub Pusiak 2021-02-03 13:14:24 5-test-driven-development-+-bonus ckkb3uw6b00002smi6pw37cjt 2021-02-24 00:10:57.643 2021-02-24 00:10:57.643 @@ -509,6 +520,8 @@ ckliome1m02251ums5h83enlk #3 Jeszcze jeden test https://www.youtube.com/watch?v= ckliome2702491umsxvw549bg Zoptymalizowany Frontend - kurs online Web Dev Insider https://www.youtube.com/watch?v=C97-yiATluw Zapowiedź autorskiego kursu online Bartka Misia o zoptymalizowanym frontendzie. Web Dev Insider! 2020-06-06 18:47:57 zoptymalizowany-frontend-kurs-online-web-dev-insider ckjrjuqf900002bk2kpgy4181 2021-02-24 00:10:57.583 2021-02-24 00:10:57.583 ckliome2t02781ums52uscagq Nowoczesny front-end developer - Kim jest i jak pracuje? https://www.youtube.com/watch?v=6euK1uWkKk4 W pełnym składzie spotykamy się z Wiktorem Jamro, front-end engineerem i architektem w SmartRecruiters, z którym porozmawiamy o pracy nowoczesnego front-end developera.\nWiktor ma za sobą kilkanaście lat doświadczenia w programowaniu i na front-endzie, oglądał na żywo kolejne fale "gorących technologii" a teraz prowadzi kilkunastoosobowy zespół front-end developerów w firmie z Doliny Krzemowej.\nPorozmawiamy o tym jak odnaleźć się na front-endzie w 2021r. i dalej, o tym jak pracuje nowoczesny front-end developer, jak wygląda współpraca na linii design - front-end oraz co zrobić, aby dowozić jakość, którą natychmiast zauważy użytkownik końcowy. 2021-02-17 20:09:20 nowoczesny-front-end-developer-kim-jest-i-jak-pracuje ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.606 2021-02-24 00:10:57.606 ckliome3f03081ums35m5xtqd #2 Pozbywanie się zależności w testach https://www.youtube.com/watch?v=JTohPG8MeVY 🔴 Kolejny odcinek o testowaniu! Piszę już właściwy test do naszej aplikacji. Sam funkcja jest prosta, ale musimy jeszcze skonfigurować Babela i zrobić kilka rzeczy do koła samego kodu, aby testowanie miało sens.\nPamiętaj - w testach jednostkowych chodzi o wydzielenie unita i skupienie się tylko na nim. Tak naprawdę nie interesują Cię dane, one powinny być dowolne. Testujesz funkcjonalność - nie dane.\nTesty poniekąd betonują nam logikę, co sprawia, że programista, który będzie chciał coś zmienić w logice biznesowej, będzie musiał również zmienić testy. A to nie przejdzie bez echa podczas code review. I dobrze! Zrzuć część odpowiedzialności na testy i śpij spokojnie! Do tego też właśnie służą testy 😎\n\n0:00 - Utworzenie pliku z testem\n1:35 - Instalacja Babela i importowanie\n2:43 - Pisanie właściwego testu\n4:23 - Porównywanie obiektu przez toEqual\n5:50 - Redukcja zależności - przekazywanie jako argument\n7:21 - Praca na danych testowych, dodatkowa lista\n8:52 - Dostosowanie kodu aplikacji\n10:18 - Podsumowanie\n11:04 - Poprawka - dodanie opisu\n11:16 - Dodatkowy test, przypadek z pustym stringiem\n\n🧪 Pełna playlista do tej serii o testowaniu:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN_nsAlEdVInoRkvE_pmLayP\n\n🔥🔥🔥🔥🚀\nZapisz się do newslettera: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\n🔥🔥🔥🔥🚀\n\nLink do repo z kodem, znajdź odpowiedni commit.\nhttps://github.com/lebrande/search-dropdown-record\n\nMam też serię o języku TypeScript.\nTo taki wstęp do Reacta, tutaj playlista:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN8nGiII_dUXhlAgId4Fb9r_\n\nProjekt koduje Jakub Pusiak 2021-01-14 12:32:07 2-pozbywanie-sie-zaleznosci-w-testach ckkb3uw6b00002smi6pw37cjt 2021-02-24 00:10:57.627 2021-02-24 00:10:57.627 +ck5pgkyqo01vni3umf93vcmtw Generowanie plików z Plop https://fsgeek.pl/post/generowanie-plikow-z-plop/

Narzędzia CLI są wszechobecne i trzeba przyznać, że ułatwiają nam życie. Dzięki nim jesteśmy w stanie zautomatyzować wiele rzeczy i skupić się na tym co istotne czyli warstwie biznesowej. Jednym z zadań, które CLI wykonują jest automatyczne tworzenie plików, wypełnionych początkową treścią. Jak w krótkim czasie możemy sobie sami stworzyć taką funkcjonalność?

\n\n

Podejście proste

\n\n

Najprostsze podejście nie wymaga żadnych bibliotek tylko odrobinę wiedzy i znajomości Regex’a. Możemy wykorzystać wbudowane w Node.js funkcje by odczytać plik i następnie przy pomocy różnych Regexów podmienić wartości na takie jakie chcemy. Jaki jest problem takiego rozwiązania? Po pierwsze musimy sami budować CLI, dbać o walidację danych oraz o całą resztę procesu. Jednak te rzeczy można by zautomatyzować by dało się szybciej tworzyć nowe szablony. I do tego celu możemy wykorzystać bibliotekę Plop

\n\n

Plop

\n\n

Standardowo zacznijmy od instalacji

\n\n
npm install --save-dev plop
\n\n

Teraz możemy w naszym projekcie wykorzystywać polecenie plop. Jednak to nie wszystko. Aby całość działała poprawnie potrzebujemy jeszcze pliku konfiguracyjnego gdzie zdefiniujemy sobie co i jak chcemy tworzyć. Plik powinien mieć nazwę plopfile.js i być w głównym katalogu projektu. Sam plik ma prostą strukturę, która wygląda następująco:

\n\n
module.exports = function (plop) {\n}\n
\n\n

A co możemy umieścić wewnątrz obiektu? Możemy tutaj dodać 4 rodzaje elementów:

\n\n\n\n

Hello World

\n\n

Jak widać biblioteka ma ogromne możliwości. Sam jeszcze nie bawiłem się wszystkimi dlatego dziś tylko prosty przykład - ale już tyle wystarczy by zautomatyzować pracę. Standardowo przy nauce nowego języka piszemy słynne hello world dlatego tu też podejdziemy tradycyjnie. Zacznijmy od setGenerator:

\n\n
module.exports = function (plop) {\n    plop.setGenerator('hello-world',{\n        description: 'hello.txt file',\n        prompts: [],\n        actions:[]\n    })\n}
\n\n

Pierwsza wartość jest nazwą generatora i będzie potem przez nas używana do przy wywoływaniu komendy. Potem mamy opis. Prompts jest jedną z bardziej interesujących sekcji w tej konfiguracji. Wpisujemy tutaj obiekty które konfigurują pytania w konsoli tworzone przy pomocy biblioteki Inquirer.js - to znaczy, że możemy wpisać tutaj wszystko co daje ta biblioteka. No i na sam koniec Actions czyli co ma zrobić biblioteka na podstawie danych wpisanych przez użytkownika. Mamy tutaj dostępnych kilka opcji:

\n\n\n\n

To teraz możemy stworzyć pierwszy szablon wraz z zawartością

\n\n
Hello {{ name }}\n
\n\n

Tekst oznaczony przy pomocy {{ }} będzie zamieniony na podstawie danych podanych przez użytkownika. Muszą się one zgadzać ze zmiennymi, które ustawimy w prompts. No i na koniec trzeba jeszcze wypełnić pola prompts i actions

\n\n
module.exports = function (plop) {\n    plop.setGenerator('hello-world',{\n        description: 'hello.txt file',\n        prompts: [\n            {\n                type: 'input',\n                name: 'name',\n                message: 'What is your name',\n                validate: (value)=>value.length >0 ? true : 'name is required'\n            }\n        ],\n        actions:[\n            {\n                type: 'add',\n                path: './{{name}}.txt',\n                templateFile: 'templates/hello.txt',\n                abortOnFail: true\n            },\n        ]\n    })\n}\n
\n\n

Teraz wystarczy, że to uruchomimy. Mamy tutaj dwie opcję: zainstalujemy bibliotekę plop globalnie albo dodamy sobie wpis w sekcji scripts "plop": "plop" . Ja osobiście preferuję drugą opcję.\n

npm run plop hello-world

\n\n

Dzięki temu uruchomimy nasz nowy generator i po wypełnieniu danych powstanie nam nowy plik zgodnie z ustawieniami. Gdzie możemy coś takiego wykorzystać? Na pewno podczas tworzenia nowych komponentów możemy to wykorzystać do tworzenia kompletu plików: komponent, kontener, typowanie, testy wraz z minimalnym szablonem. Drugi przykład to dodawnie nowego obiektu do store w redux gdzie dodajemy model, akcje, typowania itd. Poprawnie wykorzystanie plop.js może znacząco przyspieszyć tworzenie oprogramowania przez nas i wyeliminować powtarzalne oraz nudne elementy.

2020-01-22 15:25:00 generowanie-plikow-z-plop ckhxjb6o0000yi3umb3hg09jv 2020-01-22 15:25:00 2020-01-22 15:25:00 +ck6kxcaao01wki3um0oqhak7u Cypress - proste testy e2e https://fsgeek.pl/post/cypress-proste-testy-e2e/

Testy są integralną częścią tworzenia oprogramowania, pomagając nam nie tylko w pisaniu dobrego kodu ale również zabezpieczają nas przed błędami w przyszłości. Zazwyczaj na frontendzie piszemy testy jednostkowe testując logikę pojedynczego komponentu. A może moglibyśmy też pisać testy e2e?

\n\n

Testy e2e

\n\n

Testy piszemy coraz częściej - mam wrażenie, że powoli staje się to standardem, co jest pozytywną zmianą. Tak jak na backendzie korzystają z pełnej gamy testów tak na frontendzie najczęściej spotykam się z testami jednostkowymi. A czasami niektóre rzeczy, szczególnie w przypadku skomplikowanych systemów, łatwiej jest sprawdzić przy pomocy e2e. Do tej pory spotykałem się z opinią, że testy e2e piszą testerzy automatyczni. Uważam, że również jako programiści frontendu powinniśmy zacząć je pisać. Po pierwsze niektóre elementy będzie nam łatwiej przetestować, po drugie wprowadzamy dodatkowe zabezpieczenie czy główne ścieżki aplikacji działają, po trzecie jesteśmy w stanie to podpiąć do CI i sprawdzać zawsze gdy merdżujemy do mastera. Potrzeba więcej powodów by zacząć pisać te testy? Myślę, że nie. A idealnie do tego sprawdzi się Cypress.

\n\n

Pierwsze kroki

\n\n

Zanim zaczniemy pisać pierwsze testy e2e musimy zainstalować i przygotować nasze środowisko. Instalacja polega na wpisaniu w konsoli polecenia

\n\n
npm i cypress --save-dev\n
\n\n

Teraz musimy chwilę poczekać ponieważ oprócz biblioteki instaluje się też aplikacja desktopowa, która będzie odpowiedzialna za uruchamianie naszych testów. Warto jeszcze wpisać do pliku package.json polecenie, które będzie uruchamiało cypressa

\n\n
  "scripts": {\n    "cypress:open": "cypress open"\n  },\n
\n\n

Jeśli teraz uruchomimy polecenie to oprócz tego, że uruchomi okno to stworzy nam również całą strukturę folderów wraz z przykładowymi testami. Możemy sobie to zostawić by zerkać na to gdy nie będziemy wiedzieć jak wykorzystać polecenia z cypressa lub też usunąć ponieważ identyczny opis jest na przykładowej stronie. Domyślne foldery prezentują się następująco:

\n\n
/cypress\n  /fixtures\n  /integration\n    /examples\n    /login\n    /order\n  /plugins\n  /support
\n\n\n\n

Pierwszy test w Cypress

\n\n

Jak mamy projekt to nie ma problemu co można testować. Jednak do nauki nie ma potrzeby tworzenia całej aplikacji tylko można wykorzystać jakąś istniejącą. Ja tutaj wykorzystałem przykładową stronę od Cypressa. No to napiszmy pierwszy test. Ogólny szablon jest prosty i jeśli kiedykolwiek pisaliście jakieś testy na frontendzie to będzie wam znany

\n\n
describe('description for set of tests', ()=>{\n    it('what test do', ()=>{\n    })\n})\n
\n\n

W każdym pliku będziemy mieli sekcję description wraz pewną ilością sekcji it. Teraz zostaje jeszcze do uzupełnienia zawartość sekcji it

\n\n
it('check if click redirect to correct url', ()=>{\n        //Given\n        cy.visit('https://example.cypress.io');\n        //when\n        cy.contains('a','click').click();\n        //then\n        cy.url().should('include', '/commands/actions')\n    })\n
\n\n

Ogólny schemat będzie zawsze taki sam:

\n\n\n\n

W naszym przypadku chcemy sprawdzić czy po kliknięciu na link przeniesie nas na odpowiednią stronę. Żeby to przetestować musimy najpierw wejść na odpowiednią stronę (cy.visit). Następnie szukamy elementu a, który ma w sobie tekst click. Jeśli wszystko działa poprawnie to zostaniemy przeniesieni na nową stronę. Warte zauważenia jest, że nigdzie nie musiałem robić dodatkowych importów by móc korzystać z obiektu cy, który zawiera zestaw przydatnych funkcji z których będziemy korzystać przy pisaniu testów. Schemat jaki tutaj zastosowałem może się bardzo często się powtarzać - to co się zmieni to element którego szukamy i wynik jaki ma być na końcu.

\n\n

Jak widać w teorii to nie jest ciężkie. Jednak przy prawdziwych projektach może nie być tak prosto - zdarzają się scenariusze przy których trzeba pogłówkować, przynajmniej na początku. Ale z czasem jak będziemy pisać regularnie testy to pisanie ich będzie prostsze i przyjemniejsze. A wy piszecie testy e2e lub integracyjne na frontendzie? Korzystacie z Cypressa czy czegoś innego?

2020-02-13 15:55:00 cypress-proste-testy-e2e ckhxjb6o0000yi3umb3hg09jv 2020-02-13 15:55:00 2020-02-13 15:55:00 ckliome5103401umsc9z1xx5c #0 Dlaczego potrzebujesz frameworka do testowania? https://www.youtube.com/watch?v=uS2UwnfXIAs 🔴 Odcinek wstępny do serii o testowaniu aplikacji napisanej już w React.js\n\n0:00 - Co będziemy robić w tej serii?\n0:32 - Wyjaśniam co daje Jest i dlaczego go potrzebujesz?\n\n🧪 Pełna playlista do tej serii o testowaniu:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN_nsAlEdVInoRkvE_pmLayP\n\n🔥🔥🔥🔥🚀\nZapisz się do newslettera: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\n🔥🔥🔥🔥🚀\n\nSeria, gdzie buduję aplikację, którą tu testuję:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN8GQpoXHxXDf6hifRGr8Yij\n\nLink do repo z kodem, znajdź odpowiedni commit.\nhttps://github.com/lebrande/search-dropdown-record\n\nMam też serię o języku TypeScript.\nTo taki wstęp do Reacta, tutaj playlista:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN8nGiII_dUXhlAgId4Fb9r_\n\nProjekt koduje Jakub Pusiak 2021-01-08 10:50:40 0-dlaczego-potrzebujesz-frameworka-do-testowania ckkb3uw6b00002smi6pw37cjt 2021-02-24 00:10:57.686 2021-02-24 00:10:57.686 ckliome6403731ums73s0hcd8 Opanuj JavaScript 2 - Q&A z Mentorami Kursu https://www.youtube.com/watch?v=sjtm0H5JLtw Odpowiadamy na Wasze pytania związane z kursem Opanuj JavaScript!\n\n🚀https://przeprogramowani.pl/kurs 🚀 2020-12-30 19:17:00 opanuj-javascript-2-qanda-z-mentorami-kursu ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.724 2021-02-24 00:10:57.724 ckliome6r03941ums91nw7nam Ścieżka managerska dla programisty - Michał Nowak | Przeprogramowani ft. Gość #4 https://www.youtube.com/watch?v=YARSHQZ9jt8 W czwartym odcinku naszego cyklu rozmów z gośćmi rozmawiamy z Michałem Nowakiem \n\nMichał jest Dyrektorem Developmentu w SmartRecruiters, gdzie aktualnie prowadzi 11 zespołów realizujących roadmapę produktową firmy. W swojej pracy odpowiada za projektowanie struktury organizacyjnej, design procesów, wdrażanie praktyk inżynierskich, a także szkolenie i rozwój managerów.\n\nTematem przewodnim jest szeroko rozumiana ścieżka managerska, o której Michał - manager i dyrektor w organizacji z Doliny Krzemowej - opowiada na podstawie wieloletniego doświadczenia związanego z prowadzeniem zespołów, optymalizacją procesów oraz zapewnianiu zwinnego środowiska pracy w dziale R&D.\n\nW odcinku:\n00:00 - Wstęp\n08:10 - Kim jest Michał Nowak?\n13:00 - Szalone początki\n17:30 - Źródła kryzysu managera\n35:09 - Nowy manager i nowy zespół\n49:00 - Product Engineering\n53:30 - Silicon Valley Product Group\n59:30 - Organizacja Pracy\n1:18:10 - Spotkania 1on1\n1:28:45 - Dla kogo jest praca managera?\n1:31:39 - Studia i dyplomy\n1:36:15 - Dobry programista - dobry manager?\n\nKsiążki i blogi polecane przez Michała:\nhttps://www.amazon.com/Range-Generalists-Triumph-Specialized-World/dp/0735214484\nhttps://www.amazon.com/Crucial-Conversations-Talking-Stakes-Second/dp/1469266822\nhttps://www.amazon.com/Elegant-Puzzle-Systems-Engineering-Management/dp/1732265186\nhttps://www.amazon.com/Confidence-Gap-Guide-Overcoming-Self-Doubt/dp/1590309235\nhttps://svpg.com/articles/\n\nPoznaj naszego gościa - https://www.linkedin.com/in/michal-nowak-72632328/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-12-30 19:28:01 sciezka-managerska-dla-programisty-michal-nowak-or-przeprogramowani-ft.-gosc-4 ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.747 2021-02-24 00:10:57.747 @@ -523,8 +536,7 @@ ckg6l9940028ci3um67z66g9v 3 proste sposoby na niezmienność w JavaScript https: ckgaw43k0028li3um7h1a30ls Jak zapewnić by nasza aplikacja wszędzie dobrze się wyświetlała! https://fsgeek.pl/post/bubble-responsywnosc/ W aplikacji oprócz funkcjonalności biznesowej potrzebujemy również dobry UX, który zachęci użytkowników. Koniecznym minimum jest zapewnienie, by strona była responsywna i dobrze się wyświetlała użytkownikom. Jak to zrobić w Bubble.io? 2020-10-15 14:00:00 jak-zapewnic-by-nasza-aplikacja-wszedzie-dobrze-sie-wyswietlala ckhxjb6o0000yi3umb3hg09jv 2020-10-15 14:00:00 2020-10-15 14:00:00 ckgi1bcw0028qi3um1ox3cti0 Algorytm kmeans bez bibliotek. Zobacz jakie to proste! https://fsgeek.pl/post/jak-wlasnorecznie-zaimplementowac-algorytm-kmeans/ Algorytm k-means jest jednym z podstawowych algorytmów uczenia nienadzorowanego. Należy do algorytmów analizy skupień (inaczej grupowania, klasteryzacji) i pozwala na podzielenie elementów na określoną ilość klas ze względu na podobieństwo. Jest on na tyle prosty, że warto go własnoręcznie zaimplementować. 2020-10-20 14:00:00 algorytm-kmeans-bez-bibliotek-zobacz-jakie-to-proste ckhxjb6o0000yi3umb3hg09jv 2020-10-20 14:00:00 2020-10-20 14:00:00 ckgqmhrc00290i3umeuwcd8bf 18 narzędzi, którymi stworzysz swoją aplikację bez programisty https://fsgeek.pl/post/18-narzedzi-nocode-do-stworzenia-aplikacji/ Nie zawsze potrzeba zespołu programistów, by stworzyć pierwszy prototyp aplikacji. Nie trzeba nawet samemu potrafić programować. Wystarczy parę narzędzi, trochę czasu i chęci, by stworzyć pierwszą wersję aplikacji. I tę wiedzę wykorzystać, by sprawdzić produkt i ulepszyć, zanim zrobi to konkurencja. 2020-10-26 14:15:00 18-narzedzi-ktorymi-stworzysz-swoja-aplikacje-bez-programisty ckhxjb6o0000yi3umb3hg09jv 2020-10-26 14:15:00 2020-10-26 14:15:00 -ckguyf6o00296i3um38xa3okh Jak połączyć naszą aplikację w Bubble.io z Airtable? https://fsgeek.pl/post/trzymanie-danych-z-bubble-w-airtable/ W aplikacjach musimy gdzieś trzymać nasze dane. Możemy trzymać dane bezpośrednio w bazie danych od Bubble.io. Ale czasami chcemy część danych trzymać w innym miejscu. Dobrym miejscem do tego jest Airtable. 2020-10-29 15:00:00 jak-polaczyc-nasza-aplikacje-w-bubbleio-z-airtable ckhxjb6o0000yi3umb3hg09jv 2020-10-29 15:00:00 2020-10-29 15:00:00 -ckh23mg00029hi3um869ab59q Jak zapanować nad Promise'ami w aplikacji? https://fsgeek.pl/post/javascript-promise-all-allsettled-race-any/ Promisy są aktualnie podstawowym sposobem radzenia sobie z asynchronicznym kodem w JavaScript. Pojawiają się prawie w każdym trochę bardziej zaawansowanym kawałku kodu. Czasem jest ich nawet aż za dużo. Jak więc sobie radzić z dużą ilością Promisów w aplikacji? 2020-11-03 15:00:00 jak-zapanowac-nad-promiseami-w-aplikacji ckhxjb6o0000yi3umb3hg09jv 2020-11-03 15:00:00 2020-11-03 15:00:00 +cj89rn40000sni3um17je10cj Czym jest GraphQL? https://fsgeek.pl/post/czym-jest-graphql/

Jak już wielokrotnie wspominałem GraphQL mnie w pewien sposób zauroczył na tegorocznym FrontendCon. Zauroczył mnie tak bardzo, że postanowiłem się tym chwilę pobawić. Stąd też mam zamiar napisać małą serię dotyczącą tego rozwiązania w miarę postępu moich zabaw. Dziś chciałbym zacząć od podstaw czyli czym jest GraphQL oraz jak można rozpocząć zabawę z nim.\n

\n\n

Co to GraphQL?

\n\n

GraphQl jest sposobem komunikowania się z serwerem API, który powstał dwa lata temu jako alternatywa REST’a. Żeby powiedzieć w jaki sposób jest od niego różny muszę przypomnieć na czym się opiera dotychczas najczęściej używany REST. Jak wszyscy wiedzą jest to swego rodzaju styl w projektowaniu API. Zgodnie z nim każdy model danych jest dostępny pod osobnym adresem. Mając na przykład sklep internetowy możemy mieć następujące adresy:

\n\n\n\n

Tak naprawdę liczba takich adresów nigdy nie będzie mała a wręcz przeciwnie będzie rosła wraz z systemem. Należy również pamiętać, że dla prawie każdego adresu trzeba stworzyć komplet wersji do obsługiwania zapytań GET, POST,PUT,DELETE. W ten sposób otrzymamy sporą liczbę adresów do utrzymania.

\n\n

W GrapQL jest zupełnie na odwrót. Mamy tylko jeden adres do którego możemy się zwracać o dane. To co otrzymamy zależy tylko i wyłącznie od nas i od tego jak skonstruujemy zapytanie.

\n\n

Jak rozpocząć zabawę z GraphQL

\n\n

Skoro powiedziałem czym jest po krótce GraphQL to warto by było wspomnieć jak zacząć się nim bawić. Ja zabawę zacząłem od postawienia go na serwerze Node’a. Dzięki temu mogę się bawić tak jakbym wykorzystywał to w normalnej pracy. Aby zacząć trzeba zainstalować odpowiednie paczki node’a:

\n\n
yarn add express express-graphql graphql\n
\n\n

Teraz wystarczy napisać parę linijek kodu by wszystko działało ;p. Kod został wzięty z oficialnej dokumentacji GraphQL.

\n\n
var express = require('express');\nvar graphqlHTTP = require('express-graphql');\nvar { buildSchema } = require('graphql');\n\nvar schema = buildSchema(`\n  type Query {\n    hello: String\n  }\n`);\n\nvar root = {\n  hello: () => {\n    return 'Hello world!';\n  },\n};\n\nvar app = express();\napp.use('/graphql', graphqlHTTP({\n  schema: schema,\n  rootValue: root,\n  graphiql: true,\n}));\napp.listen(4000);\nconsole.log('Running a GraphQL API server at localhost:4000/graphql');\n
\n\n

Pierwsze 3 linijki to zwykłe zaimportowanie potrzebnych plików. Pierwsza najważniejsza rzecz jaką należy stworzyć to schemat. Definiuje ona o co tak naprawdę możemy odpytywać nasz serwer. W schemacie musi być zdefiniowany typ Query ponieważ to jego szuka GraphQL. Jego brak spowoduje wywołanie błędu podczas uruchamiania serwera. Warto również spojrzeć na definicję pola w schemacie. Oprócz samej nazwy pola jest tam również typ zwracanego zasobu. Domyślnie jest wspieranych 5 typów: String, Int, Float, Boolean oraz ID. Wszystkie inne typy można sobie stworzyć samemu.

\n\n
var root = {\n  hello: () => {\n    return 'Hello world!';\n  },\n};\n
\n\n

Jako, że zdefiniowaliśmy jakie pola są dostępne to teraz musimy jeszcze określić jak się ma zachować GraphQL, kiedy użytkownik odpyta serwer o dany zasób. Innymi słowy musimy określić co serwer ma zwrócić. Do tego służy tak zwana funkcja ‘resolver’, która musi być stworzona dla każdego pola zdefiniowanego w schemacie. W tym przykładzie funkcje te przechowujemy we wspólnym obiekcie, który potem jest przekazywany do instancji graphqlHTTP jako rootValue.

\n\n
app.use('/graphql', graphqlHTTP({\n  schema: schema,\n  rootValue: root,\n  graphiql: true,\n}));\n
\n\n

No i w ten sposób doszliśmy do ostatniego etapu stawiania serwera. W tym przykładzie wykorzystałem express.js jako serwer dla aplikacji. Przy wykorzystaniu app.use definiujemy pod jakim adresem będzie dostępny nasz graphQL i przekazujemy tam instację grapghqlHTTP przekazując nasz zdefiniowany wcześniej schemat i obiekt z funkcjami do odpowiednich pól. Warte zauważenia jest trzecie pole graphiql, które dostarcza nam przyjemny interfejs do testowania naszych zapytań. Aby uruchomić serwer wystarczy wpisać w konsoli node twój_plik.js

\n\n

Graphiql

\n\n

Jak wejdziemy teraz w przeglądarce na adres http://localhost:4000/graphql zobaczymy coś takiego:

\n\n

graphiql

\n\n

Jest to całkiem przyjemny graficzny interfejs, który służy do testowania naszych zapytań. Same zapytania są dosyć proste. Jest to obiekt w którym podajemy nazwę pól o jakie chcemy odpytać serwer i otrzymać z nich wiadomości. W naszym przypadku możemy odpytać tylko o jedno pole: hello

\n\n

graphiql_hello

\n\n

Oprócz samego testowania zapytań możemy sprawdzić o co właściwie możemy zapytać przy pomocy zakładki Docs w prawym górnym rogu. Widzimy w nim jakie pola mamy zdefiniowane oraz jaki tym wiadomości nam zwrócą.

\n\n

docs

\n\n

docs_query

\n\n

U nas na razie jest tego mało ale możecie sprawdzić jak to wygląda w przypadku większej ilości pól w schemacie na tej stronie

\n\n

Mam nadzieję, że was choć trochę zainteresowałem. W następnym poście mam zamiar wejść głębiej w GraphQL i zobaczyć co jesteśmy w stanie z jego pomocą zrobić. A wy co uważacie o tym? A może używacie i macie jakieś rady lub przemyślenia na co zwrócić uwagę? Zapraszam do komentowania i dzielenia się artykułem.

2017-10-02 06:00:00 czym-jest-graphql ckhxjb6o0000yi3umb3hg09jv 2017-10-02 06:00:00 2017-10-02 06:00:00 ckhc3peo0029ui3um3sdshzer 4 zasady, którymi należy się kierować przy tworzeniu struktury projektu https://fsgeek.pl/post/jak-stworzyc-strukture-projektu-javascript/ Też tak czasami macie, że zastanawiacie się jaką strukturę projektu zaproponować? Jaka struktura sprawi, że rozwijanie kodu nie będzie sprawiało problemów i każdy się odnajdzie? I ile razy nasze wysiłki nic nie dały? W tym wpisie chcę się z wami podzielić moją filozofią dotyczącą tworzenia struktury projektu. 2020-11-10 15:00:00 4-zasady-ktorymi-nalezy-sie-kierowac-przy-tworzeniu-struktury-projektu ckhxjb6o0000yi3umb3hg09jv 2020-11-10 15:00:00 2020-11-10 15:00:00 ckheyl400029xi3umcozb6u5o Jak dodać dodatkowe strony do aplikacji w Bubble.io? https://fsgeek.pl/post/dodawanie-stron-w-bubble/ Ciężko zrobić całą aplikację na jednej stronie. W 99,9% potrzebujemy kilku stron, by dostarczyć odpowiednią funkcjonalność. W Bubble.io jest to operacja prosta, ale warto zwrócić uwagę na parę rzeczy. 2020-11-12 15:00:00 jak-dodac-dodatkowe-strony-do-aplikacji-w-bubbleio ckhxjb6o0000yi3umb3hg09jv 2020-11-12 15:00:00 2020-11-12 15:00:00 ckql7dyc400020wmkghbkho8x JavaScript od podstaw - Marcin Moskała | Przeprogramowani ft. Gość #14 https://www.youtube.com/watch?v=TXxuha3IfXI Marcin Moskala jest doświadczonym programistą, trenerem Kotlina oraz prelegentem zapraszanym na wiele konferencji programistycznych. W trakcie audycji porozmawiamy o najnowszym projekcie Marcina jakim jest książka "JavaScript od podstaw", przeanalizujemy czy jest jeszcze miejsce dla nowych programistów na rynku oraz poznamy powody, dla których Marcin tak aktywnie dzieli się wiedzą. 2021-07-01 17:49:15 javascript-od-podstaw-marcin-moskala-or-przeprogramowani-ft.-gosc-14 ckjcy6q5400001hkzvyh1xycf 2021-07-01 17:50:20.692 2021-07-01 17:50:20.692 @@ -540,6 +552,8 @@ cjya3zd9c01nhi3umaopu0g67 Serverless (Jakub Holak) - FullStak #5 https://www.you cjyfvx6gg01nmi3um5bxz83lu Zapis i odczyt JWT z cookies 2/3 (Serverless ⚡Now.sh) https://www.youtube.com/watch?v=ejis77yrO64 Naucz się jak tworzyć cookies (ciasteczka) z JWT oraz jak je odczytywać. W nagraniu użyłem Node.js (Express) oraz biblioteki npm cookie. Daj znać czy nauczyłeś/aś się czegoś z tego materiału! 2019-07-23 13:58:46 zapis-i-odczyt-jwt-z-cookies-23-serverless-high-voltagenowsh ckivz8t54001di3umfv7i4q26 2019-07-23 13:58:46 2019-07-23 13:58:46 cjz8iusqg01oei3umh1078zc0 Weryfikacja JWT przez auth0 3/3 (Serverless ⚡Now.sh) https://www.youtube.com/watch?v=Wr2pCMjobKE Naucz się dlaczego oraz jak weryfikować JWT. W aplikacjach webowych. 2019-08-12 14:58:19 weryfikacja-jwt-przez-auth0-33-serverless-high-voltagenowsh ckivz8t54001di3umfv7i4q26 2019-08-12 14:58:19 2019-08-12 14:58:19 cjzb9g2nk01oii3umfi6ahzbs Sekrety i zmienne w Node.js / React (Auth0 ⚡Now.sh) https://www.youtube.com/watch?v=voOMhRQ27T4 Sekrety oraz zmienne zależące od środowiska nie powinny znajdować się bezpośrednio w repozytorium i kodzie aplikacji. Powszechną i prostą w użyciu metodą na rozwiązanie tego problemu są zmienne środowiskowe. Dzięki nim łatwo odizolujesz sekrety od swojego kodu. W tym materiale na przykładzie uwierzytelniania przez usługę Auth0 pokazuję jak to zrobić. 2019-08-14 12:58:14 sekrety-i-zmienne-w-nodejs-react-auth0-high-voltagenowsh ckivz8t54001di3umfv7i4q26 2019-08-14 12:58:14 2019-08-14 12:58:14 +ck79cgy5c01x6i3umc0gp7dgz ESLint - statyczna analiza kodu w JavaScript https://fsgeek.pl/post/eslint-statyczna-analiza-kodu-javascript/

Narzędzia do statycznej analizy kodu występują w każdym języku programowania. W JavaScript jednym z takich narzędzi jest ESLint. Pomaga nam nie tylko utrzymać czysty kod ale niejednokrotnie zapobiega powstawaniu błędów. I tyle wystarczy by być obowiązkowym elementem każdego projektu.

\n\n

ESLint

\n\n

ESLint jest biblioteką, która powstała 7 lat temu i pozwala definiować reguły dotyczące kodu. Bilbioteka sama w sobie nie narzuca żadnych konkretnych reguł tylko daje użytkownikom narzędzia do ich samodzielnego zdefiniowania. Oczywiście oprócz możliwości korzystania z od razu wbudowanych reguł mamy możliwość tworzenia własnych pluginów i modułów, które dostarczają nowe funkcjonalności. Sam ESLint może pracować w dwóch trybach:

\n\n\n\n

Automatyczna naprawa jest naprawdę fajną funkcjonalnością ale trzeba pamiętać, że nie zawsze naprawi błąd no i czasami są sytuacje gdzie chcemy napisać coś niezgodnego z regułami. Aby naprawić kod wystarczy, że dodamy przełącznik --fix do komendy. Kolejną zaletą ESLinta jest mocna integracja ze wszystkimi wiodącymi edytorami - potrafią one znaleźc naszą konfigurację i formatować kod według naszych reguł.

\n\n

Co z TypeScriptem?

\n\n

Do niedawna jeśli chcieliśmy skorzystać z lintera w projekcie z TypeScriptem mogliśmy skorzystać z biblioteki TSLint. Jednak w 2019 roku zdecydowano o zawieszeniu prac nad rozwojem tej biblioteki i rozwojem wsparcia dla Typescripta w samym ESLint. W tym roku przestaną być już akceptowane wszystkie PR’ki więc dla nowych projektów zdecydowanie polecam ESLinta a w przypadku starych zastanowił się czy nie warto się na niego przenieść.

\n\n

Konfiguracja ESLinta

\n\n

Zanim przjedziemy do konfiguracji samego ESLinta musimy go zainstalować

\n\n
npm install eslint --save-dev
\n\n

Teraz mamy do wyboru dwie drogi: możemy albo sami wszystko skonfigurować od zera albo skorzystać z odpowiedniego polecenia

\n\n
npx eslint --init
\n\n

Po udzieleniu odpowiedzi na kilka pytań dostaniemy wstępnie skonfigurowany plik .eslintrc, który możemy następnie dowolnie konfigurować i zmieniać. Najważniejsze ustawienia znajdziemy w opcjach plugins, extends, rules - i też z nich będziemy najczęściej korzystać.

\n\n

Podczas konfigurowania naszego pliku będziemy zaczynać od sekcji plugins - tutaj będziemy umieszczać pakiety, któee dodatkowo instalujemy i chcemy z nich skorzystać. Biblioteki te najczęściej mają nazwę w postaci eslint-plugin-nazwaPluginu .

\n\n

Sekcja extends sluży do rozszerzania naszej konfiguracji o pewien zestaw reguł. Może to być pojedyncza nazwa zestawu, którym określimy podstawy zbiór reguł np.:\n"extends": "eslint:recommended", lub też tablica kolejnych zestawów gdzie każda z pozycji będzie coś dodawała od siebie.

\n\n

No i na koniec zostawiłem sekcję rules - tutaj możemy dodawać reguły, które nie znalazły się w konfiguracji powstałej przy użyciu sekcji extends lub zmieniać sposób ich zachowania. Jest to obiekt w którym klucze są nazwami reguł, które chcemy skonfigurować, natomiast wartościami są ustawienia dla konkretnych reguł. To co możemy ustawić zależy od konkretnej reguły i zawsze musimy zajrzeć do dokumentacji. Elementem powtarzającym się w każdej regule jest definiowanie jak powinien reagować eslint na kod, który łamie regułę - mamy tutaj trzy opcje:

\n\n\n\n

No to teraz jak uruchomić ESLint’a i sprawdzić nasz kod? Wykorzystujemy oczywiście polecenie eslint z odpowiednimi przełącznikami. To jakie są wszystkie możliwe opcje to można sprawdzić w dokumentacji ale na samym początku wystarczy dwa:

\n\n\n\n

Całościowo komenda może wyglądać następująco:

\n\n
eslint src --ext .ts,.tsx\neslint src --ext .ts,.tsx --fix
\n\n

Ciekawe reguły

\n\n

Oczywiście jak to w świecie JS’a mamy dostępnych wiele pluginów i ustawień, z których możemy skorzystać podczas budowania naszego pliku .eslintrc. Ja chciałbym pokazać wam moje ulubione reguły bez których nie wyobrażam sobie pisania czystego kodu. Oczywiście to są tylko moje propozycje i warto samemu zbudować swój zbiór reguł:

\n\n\n\n

A wy macie korzystacie na codzień z ESLinta? Macie jakieś ulubione reguły bez których nie wyobrażacie sobie pisania kodu?

2020-03-01 18:05:00 eslint-statyczna-analiza-kodu-w-javascript ckhxjb6o0000yi3umb3hg09jv 2020-03-01 18:05:00 2020-03-01 18:05:00 +cj8jssnk000sxi3ume2s96uls Grapql - własne typy https://fsgeek.pl/post/graphql-wlasne-typy/

W ostatnim wpisie pokazałem jak można zacząć przygodę z GraphQL (jeśli ominęliście ten post to znajdziecie go tutaj). Jednak by był to funkcjonalny system trzeba wiedzieć jak go rozbudować o kolejne elementy. Dziś chciałbym przedstawić jak można konstruować schematy z własnych, bardziej rozbudowanych typów. Zapraszam do czytania :)\n

\n\n

Krótka powtórka

\n\n

Zanim przejdę do właściwej części postu, krótkie przypomnienie na temat GraphQL. Jest to sposób na komunikację z serwerem w którym mamy tylko jeden adres do którego się zwracamy po dane. Aby otrzymać dane należy wysłać obiekt z nazwami pól, które chcemy dostać z powrotem. Tak więc to od nas zależy co dostaniemy. W ostnim poście skończyliśmy na takiej strukturze schematu i funkcji zwracającej wynik:

\n\n
var schema = buildSchema(`\n  type Query {\n    hello: String\n  }\n`);\n\nvar root = {\n  hello: () => {\n    return 'Hello world!';\n  },\n};\n\nvar app = express();\napp.use('/graphql', graphqlHTTP({\n  schema: schema,\n  rootValue: root,\n  graphiql: true,\n}));\n
\n\n

Mogliśmy wykonać tak naprawdę tylko jedna zapytanie {hello}. Dziś mam zamiar to rozszerzyć.

\n\n

Własne typy w GraphQL

\n\n

W GraphQl mamy 5 wbudowanych typów: String, Int, Float, Boolean oraz ID. Są pomocne ale nie wystarczające w codziennych rozwiązaniach. Żeby móc modelować rzeczywiste systemy i rozwiązania musimy mieć możliwość definiowania własnych typów. Aby to zrobić należy użyć słówka kluczowego type po którym piszemy nazwę typu.

\n\n
const schema = buildSchema(`\ntype Blogger{\n    firstname: String,\n    lastname: String,\n  }\ntype Query {\n    hello: String, \n    blogger: Blogger\n}\n`)\n
\n\n

To wystarczy by móc wykorzystywać nowy typ w naszym schemacie. Należy również pamiętać że dla pola blogger musimy stworzyć funkcję, która będzie zwracała obiekt zgodny ze zdefiniowanym typem:

\n\n
const root = {\n    hello: () => 'Hello world!',\n    blogger: () =>({firstname: 'foo', lastname:'bar'})\n}\n
\n\n

Teraz po uruchomieniu serwera node’a jesteśmy w stanie odpytywać serwer o nowe pole. W przypadku gdy wyślemy zapytanie w postaci {blogger} to zostanie ono domyślnie przekształcone by zwrócić wszystkie dostępne pola.

\n\n

custom-type

\n\n

Warte zauważenia jest, że nie musimy prosić serwer o każde pole typu Blogger, co więcej nie musimy tworzyć osobnych funkcji by to obsłużyć:

\n\n

single-field

\n\n

Listy i wartości nie puste

\n\n

Oprócz tego że możemy zdefiniować własne typy możemy je w pewien sposób modyfikować: określić czy wartość nie może być pusta lub stworzyć tablicę. Wykonujemy to przy pomocy operatora ! lub []. W ten sposób możemy definiować następujące rzeczy:

\n\n\n\n

Typ enum

\n\n

Oprócz samej możliwości tworzenia typów możemy również definiować specjalny typ jakim jest enum. Typ ten jest obiektem, który zawiera możliwe wartości dla danego typu. Innymi słowy, jeśli przypiszemy tym enum do danego pola to będzie mógł on przybrać tylko i wyłącznie pola przez nas zdefiniowane

\n\n
const schema = buildSchema(`\n enum BlogType{\n    TECHNOLOGY,\n    EATING,\n    TOURISM\n  }\n  type Blogger{\n    firstname: String,\n    lastname: String,\n    blogType: BlogType\n  }\n`)\n\nconst root = {\n    hello: () => 'Hello world!',\n    blogger: () =>({firstname: 'foo', lastname:'bar', blogType: 'TECHNOLOGY'}),\n}\n
\n\n

enum

\n\n

Jeśli zwrócona przez nas wartość nie będzie się zgadzała z zdefiniowanymi wartościami typu enum to dostaniemy błąd a pole będzie miało wartość null.

\n\n

enum-error

\n\n

Takie pole jest przydatne w przypadku gdy wiemy jakiego typu będziemy dostawać wiadomości np. statusy, jakieś skończone i ustalone typy tak jak w tym przypadku typ bloga.

\n\n

Interfejsy

\n\n

Ostatnia rzecz na dzisiaj o której chciałem powiedzieć to mechanizm interfejsu, który jest wspierany przez GraphQL. Jest to mechanizm znany z innych języków. Typ który implementuje interfejs musi w sobie zawierać wszystkie pola, które są zdefiniowane w interfejsie. Brak takiego pola wywoła błąd już w momencie startu serwera.

\n\n

interface-error

\n\n

Oprócz tych pól typ może zawierać w sobie dodatkowe pola nie będące częścią interfejsu.

\n\n
const schema = buildSchema(`\ninterface Person{\n    firstname: String,\n    lastname: String,\n  }\n  type Blogger implements Person{\n    firstname: String,\n    lastname: String,\n    blogType: BlogType\n  }\n`)\n
\n\n

Dziś pokazałem jakie mamy możliwości przy tworzeniu własnych schematów w GraphQL. Skupiłem się na różnych typach jakie możemy przypisywać do naszych pól i jakie to może mieć kosekwencje dla całego schematu. Następnym razem chciałbym poruszyć kwestię wprowadzania danych ponieważ do tej pory tylko je wypisywaliśmy a warto też coś wprowadzić. Napiszcie czy wam się podobało i czy chcielibyście poczytać o czymś konkretnym w kwesti GraphQL.

2017-10-09 06:30:00 grapql-wlasne-typy ckhxjb6o0000yi3umb3hg09jv 2017-10-09 06:30:00 2017-10-09 06:30:00 cjzweemcw01p1i3um6reablp9 Co to jest Server-side Rendering (SSR)? Przykład w React + Next.js https://www.youtube.com/watch?v=VBsOXp_7ZMs Poznaj różnicę Client vs. Server Side Rendering (SSR) na przykładzie prostej aplikacji React. W tym materiale staram się też odpowiedzieć na pytanie kiedy Server Side Rendering ma sens. Na końcu filmu prosty komponent z użyciem Next.js oraz Zeit Now deployuje na serwer. \n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2019-08-29 08:00:14 co-to-jest-server-side-rendering-ssr-przyklad-w-react-nextjs ckivz8t54001di3umfv7i4q26 2019-08-29 08:00:14 2019-08-29 08:00:14 ck03ym1og01pai3um0zjp471g VS Code - Wtyczki i "tricki" jakie używam💡 https://www.youtube.com/watch?v=wWbYYkwkF1o https://gist.github.com/Chmarusso/5491fc79e03b325640657680c8141676\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2019-09-03 15:00:16 vs-code-wtyczki-i-tricki-jakie-uzywam ckivz8t54001di3umfv7i4q26 2019-09-03 15:00:16 2019-09-03 15:00:16 ck06n5p4w01pei3uma6u06ipb Etherlime - deploy and verify smart contracts to Ethereum Testnet https://www.youtube.com/watch?v=LNGBIsmxRFY Learn how to deploy and verify Ethereum smart contract using Etherlime framework (https://etherlime.gitbook.io/etherlime/) \n\nTwitter: https://twitter.com/ArtiChmaro 2019-09-05 12:02:56 etherlime-deploy-and-verify-smart-contracts-to-ethereum-testnet ckivz8t54001di3umfv7i4q26 2019-09-05 12:02:56 2019-09-05 12:02:56 @@ -549,6 +563,8 @@ ckql7zdn100020wlf3dxex7bm JavaScript od podstaw - Marcin Moskała | Przeprogramo ckliome2v02831ums2c01fh4z Jak zostaliśmy spamerami | Przeprogramowany Podcast https://www.youtube.com/watch?v=OZo6nUpHGog W dzisiejszym odcinku przemyślenia o oznaczaniu Przeprogramowanych jako "SPAM" oraz łamaniu regulaminów na forach. Czy polskie fora i grupy dla programistów zaczynają cierpieć na problemy biurokracji?\n\n-----------\n\n🎤 Słuchaj podcastu - https://anchor.fm/przeprogramowani\n\n✅ Przeprogramowani na YouTube - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogram...\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramo... \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-01-28 18:53:15 jak-zostalismy-spamerami-or-przeprogramowany-podcast ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.607 2021-02-24 00:10:57.607 ckliome3x03181ums5fcpi1iv 7 najważniejszych sposobów na wykazanie się w nowym projekcie, o których nikt Ci nie powiedział https://skutecznyprogramista.pl/7-najwazniejszych-sposobow-na-wykazanie-sie-w-nowym-projekcie/ Jak się wykazać i zaimponować innym w nowym projekcie. W sumie to w każdym projekcie, do którego trafisz. I dlaczego dotychczas źle to robiłeś. 2020-01-09 00:00:00 7-najwazniejszych-sposobow-na-wykazanie-sie-w-nowym-projekcie-o-ktorych-nikt-ci-nie-powiedzial ckjgw7inp00000vk0v43qxoef 2021-02-24 00:10:57.646 2021-02-24 00:10:57.646 ckliome5j03491ums3lucchc1 Search Input - Asynchroniczność useState https://www.youtube.com/watch?v=2JlLH8riiIw Kolejny odcinek z serii:\n🇺🇸 Praktyczny Projekt w ReactJS - Wyszukiwarka Stanów USA\n⏯ cała seria dostępna tutaj: https://www.youtube.com/playlist?list=PLT7X0UTo8GN8GQpoXHxXDf6hifRGr8Yij\n\n🔴 Dopracowuję search input i pokazuję jak lepiej zrozumieć hooki useState i useEffect i nie popełnić pewnego błędu. Wszystko w niecałe 12 minut na praktycznym przykładzie. \n\n❓ Moja wyszukiwarka wymaga jeszcze dopracowania. Dzisiejszy odcinek to wycieczka z moim podejściem do tworzenia nowych funkcjonalności. Ten odcinek mógłby być konkretnym zadaniem do wykonania w komercyjnym projekcie.\n\n⚠️ Jeśli jeszcze nie wiesz, jak działa asynchroniczność z useState w React JS, to dzięki tej wiedzy możesz zaoszczędzić dużo czasu i nerwów. TO POWINIEN WIEDZIEĆ REACT DEVELOPER!!! Możesz się tego spodziewać na rozmowie kwalifikacyjnej 👔\n\n0:00 - Omówienie problemu z search inputem\n0:31 - Rozwiązywanie problemu z search inputem\n2:22 - Co powoduje asynchroniczność hooka useState\n3:11 - Ustawianie wybranej opcji jako tekst inputa\n5:44 - Kasowanie wybranego stanu, gdy tekst się zmieni\n9:57 - Podsumowanie\n\n🔥🔥🔥🔥🚀\nZapisz się do newslettera: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne maile, na temat mojego nowego kursu 🤓\n🔥🔥🔥🔥🚀\n\n⚛️ Link do repo, Pull Request ze zmianami z tego odcinka:\nhttps://github.com/lebrande/search-dropdown-record/pull/8\n\n🔷 Wydałem tutorial TypeScripta, jest darmowy, pozwoli Ci opanować podstawy pracy z React + TypeScript.\nMój TypeScript Tutorial dostępny na YouTubie, tutaj playlista:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN8nGiII_dUXhlAgId4Fb9r_\n\n© Jakub Pusiak 2020-12-09 18:00:01 search-input-asynchronicznosc-usestate ckkb3uw6b00002smi6pw37cjt 2021-02-24 00:10:57.704 2021-02-24 00:10:57.704 +cjs0unyvk01fji3umhruabees Kurs Angular Material – cz.8 Routing (cz.2) http://robieinternety.pl/kurs-angular-material-cz-8-routing-cz-2/ Witam serdecznie w drugiej części rozważań o Angularowym routingu. W tej lekcji podzielimy routing na logiczne moduły napiszemy też „guarda”, a w następnej lekcji omówimy metodę router.navigate i parametry.  Aktualna wersja do tej lekcji znajduje się pod adresem: https://github.com/taaaniel/foodCalc/tree/part_7_router_part_1_end Poprzedni routing, który zrobiliśmy sprawdzi się w małej aplikacji. Dziś pokażemy bardziej profesjonalne podejście. Zabieramy się do pracy: […] 2019-02-11 21:28:50 kurs-angular-material-cz8-routing-cz2 cjsbs4x5c001ai3umfoh24x33 2019-02-11 21:28:50 2019-02-11 21:28:50 +ck7w133hc01xvi3um8bx17rhh Server Sent Events(SSE) - co to jest? https://fsgeek.pl/post/server-sent-events-sse-co-to-jest/

Server Sent Events (SSE) jest mechanizmem, który pozwala na jednokierunkową komunikację pomiędzy serwerem a klientem. Możemy przy jego pomocy wysyłać wiadomości i informować klienta o zmianach na serwerze. Brzmi znajomo? Najczęściej taka funkcjonalność kojarzy nam się z Websocket? Jaka jest pomiędzy nimi różnica, kiedy powinniśmy korzystać z SEE i jak z tego skorzystać?

\n\n

Websocket vs SSE

\n\n

Idea Server Sent Events jest podobna do Websocketów. To co różni oba rozwiązania to sposób komunikacji pomiędzy serwerem a klientem (czyli aplikacją w przeglądarce). W Websocketach mamy do czynienia z komunikacją dwukierunkową - oprócz tego, że serwer wysyła dane do klienta to klient może również wysłać odpowiedź na serwer. SSE działa trochę inaczej - wiadomości może jedynie wysyłać serwer do klienta. Jest to pewne ograniczenie ale w większości przypadków jest to wystarczająca funkcjonalność.

\n\n

Kiedy wykorzystywać SSE?

\n\n

Tak jak wspomniałem w poprzednim akapicie wszystko zależy od tego co tworzymy. Jeśli są to różnego rodzaju chaty gdzie potrzebujemy komunikacji dwukierunkowej to oczywistym wyborem będzie Websocket. Jednak jeśli potrzebujemy żeby informować stronę o pojedynczych zdarzeniach np.:

\n\n\n\n

wtedy wykorzystanie SSE będzie lepszym rozwiązaniem.

\n\n

Jak zaimplementować SSE?

\n\n

Z racji tego, że będziemy tutaj otrzymywać wiadomości z serwera implementację musimy podzielić na dwie części: klienta i serwera. Zaczniemy od części serwerowej. Aby móc wysyłać takie zdarzenia musimy ustawić odpowiednie nagłówki w odpowiedzi na zapytanie:

\n\n\n\n

Mając tak ustawione nagłówki jesteśmy w stanie wysłać wiadomości. Wiadomości mają oczywiście swoją strukturę, której trzeba przestrzegać. Mamy tam dostępne 4 pola:

\n\n\n\n

Wiadomości przesyłamy jako zwykłe zmienne tekstowe np.: "data: 'message'". Pojedyncze wiadomości są rozdzielane podwójnym znakiem nowej linii \\n\\n. Przykład takiego endpointu w Express.js

\n\n
const express = require('express');\n\nconst app = express();\n\napp.get('/events', (req, res) => {\n\n    res.writeHead(200, {\n        'Content-Type': 'text/event-stream',\n        'Cache-Control': 'no-cache',\n        'Connection': 'keep-alive',\n        'Access-Control-Allow-Origin': '*'\n    });\n    res.flushHeaders();\n\n    let i = 0;\n    setInterval(()=>{\n        res.write(`id: ${i}\\n`);\n        res.write(`event: event1\\n`);\n        res.write(`data: Message -- ${Date.now()}`);\n        res.write(`\\n\\n`);\n        i++\n    }, 5000)\n});\n\napp.listen(3000);\n
\n\n

To teraz przyszedł czas na obsługę tego po stronie klienta. Ogranicza się to tutaj tylko do wykorzystania API EventSource w przeglądarce. Podajemy tam podczas tworzenia nowej instancji obiektu adres pod którym oczekujemy otrzymywać zdarzenia

\n\n
const event = new EventSource('http://localhost:3000/events')\n
\n\n

Dalsza obsługa zależy od tego jakie zdarzenia będziemy wysyłać. Tak jak wspomniałem jednym z parametrów zdarzenia może być pole event. Jeśli go podamy to musimy skorzystać z metody addEventListener

\n\n
event.addEventListener('event_name', (event)=>{\n    // obsługa\n})\n
\n\n

Wszystkie inne zdarzenia są obsługiwane przy pomocy funkcji onmessage

\n\n
event.onmessage = (event) => {\n    //obsługa\n}\n
\n\n

I właściwie tyle. Jak widzicie jest to proste - nie potrzebujemy żadnych dodatkowych bibliotek by otrzymywać aktualizację na żywo z serwera. Jestem ciekaw czy znaliście wcześniej to rozwiązanie? No i czy z niego korzystaliście?

2020-03-17 15:05:00 server-sent-eventssse-co-to-jest ckhxjb6o0000yi3umb3hg09jv 2020-03-17 15:05:00 2020-03-17 15:05:00 ckliome6p03841umsvpjsxnep Studia i praca programisty w Szkocji - Karol Pasierb | Przeprogramowani ft. Gość #3 https://www.youtube.com/watch?v=i-9OGWXZzBc Karol 12 lat temu wyemigrował do Szkocji. Podejmował się tam najróżniejszych zajęć. W 2015 roku, w wieku 30 lat, rozpoczął naukę programowania, podejmując studia z zakresu Inżynierii Oprogramowania na Edinburgh College, a potem Edinburgh Napier University. Od trzech lat pracuje jako Fullstack Developer. \n\nPodczas naszej rozmowy poruszymy następujące tematy:\n- Jak Karol poradził sobie ze zmianą kariery jako emigrant po trzydziestce 🤔?\n- Jak wyglądają studia informatyczne w Szkocji 👨‍🏫?\n- Czy w Wielkiej Brytanii łatwo znaleźć pierwszą pracę jako programista 👨‍💻?\n- Branża IT na wyspach - możliwości i wyzwania 🤠\n\nLiczymy, że wpadniesz z ciekawym pytaniem (bez też zapraszamy!) 😃. Do zobaczenia!\nI jako że Marcin poznał się z Karolem na portalu społecznościowym goodreads.com, więc zapewne nie zabraknie dyskusji o książkach :).\n\nWięcej o Karolu:\n- http://karolpasierb.pl/\n- https://www.linkedin.com/in/karolpasierb/ 2020-12-30 19:18:05 studia-i-praca-programisty-w-szkocji-karol-pasierb-or-przeprogramowani-ft.-gosc-3 ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.745 2021-02-24 00:10:57.745 ckliome7c04101ums58f132n8 Programista na Swoim - Piotr Prądzyński | Przeprogramowani ft. Gość #7 https://www.youtube.com/watch?v=OTYLtZGSbNU 👉 Subskrybuj aby nie przegapić nowych filmów 👈\n\nTematem rozmowy będzie prowadzenie jednoosobowej działalności gospodarczej jako programista. Piotr Prądzyński ma niesamowitą wiedzę w tym temacie 👨‍🏫. To przede wszystkim dzięki https://programistanaswoim.pl Marcin bez problemowo przebrnął przez początki przygód z przedsiębiorczością 💪. \n\nRozważasz zrezygnowanie z umowy o pracy na rzecz rozpoczęcia działalności gospodarczej 🤔? Piotr udzieli Ci odpowiedzi na kluczowe pytania:\n1. Jakie zalety i wady wiążą się z prowadzeniem firmy 🤵🏻?\n2. Czy przejście na b2b to dobry pomysł w każdej sytuacji 🤑?\n3. Na co uważać przy podpisywaniu pierwszego kontraktu 🧐?\n4. Jak wygląda proces otwierania DG 📝?\n5. Podatki i księgowość - jak się odnaleźć na tym polu minowym 😨?\n6. Koszta uzyskania przychodu - jaki mają wpływ na zawartość mojego portfela 💵?\n\nZ taką wiedzą podejmiesz rozsądną decyzję i poradzisz sobie jako początkujący przedsiębiorca 🤠 2020-12-30 19:28:31 programista-na-swoim-piotr-pradzynski-or-przeprogramowani-ft.-gosc-7 ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.768 2021-02-24 00:10:57.768 ckqquv5nn00020wl4ndzlzhf5 Jak NIE zarządzać stanem komponentów? | Wzorzec State Machine #1 https://www.youtube.com/watch?v=R-Bmdlk-hJY Zarządzanie stanem to główna przyczyna złożoności komponentów front-endowych. Powszechnie stosowane flagi (isLoading, hasError) często prowadzą do błędów, problemów z UX oraz trudności z testowaniem. W pierwszym odcinku serii przeanalizujemy wady takiego podejścia, aby w kolejnych materiałach świadomie usprawnić kod za pomocą wzorca State Machine. \n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-07-05 16:00:21 jak-nie-zarzadzac-stanem-komponentow-or-wzorzec-state-machine-1 ckiyt1v9s001fi3umcgnxbgiu 2021-07-05 16:46:25.379 2021-07-05 16:46:25.379 @@ -557,7 +573,6 @@ cj83d2c2g00sei3umgcij2fn1 Kurs Angular Material – cz.4 Material design- Własn cjrhoxbbs01eki3umfuhh8dlg Kurs Angular Material – cz.5 Podział na komponenty i moduły http://robieinternety.pl/kurs-angular-material-cz-5-podzial-na-komponenty-i-moduly/ Witam, dziś zajmiemy się podziałem aplikacji na komponenty. Cały nasz komponent główny  czyli app.component.html napiszemy od nowa i podzielimy go na kilka mniejszych swego rodzaju klocków. Będzie to wprowadzenie do angularowych komponentów. W dalszych wpisach nauczymy się komunikować poszczególne komponenty ze sobą. Pokażę jak ułatwić sobie zadanie z Angular CLI w tworzeniu nowych komponentów. Stworzymy także […] 2019-01-29 11:40:31 kurs-angular-material-cz5-podzial-na-komponenty-i-moduly cjsbs4x5c001ai3umfoh24x33 2019-01-29 11:40:31 2019-01-29 11:40:31 cjrophb2001exi3umb2my6mga Kurs Angular Material – Cz. 6 Tłumaczenia http://robieinternety.pl/kurs-angular-material-cz-6-tlumaczenia/ Cześć, w tym krótszym wpisie chciałbym zapoznać Was z pewną metodą do wdrożenia tłumaczeń, aby nasza aplikacja była wielojęzykowa. Będziemy korzystać z biblioteki:  Angular localization Biblioteka ta służy nie tylko do robienia tłumaczeń ale także do lokalizowaniu numerów i dat aplikacji, dodawaniu kodu języka, kodu kraju, kodu waluty, strefy czasowej i wszelkich innych spraw związanych z lokalizacjami. Zabieramy […] 2019-02-03 09:30:27 kurs-angular-material-cz-6-tlumaczenia cjsbs4x5c001ai3umfoh24x33 2019-02-03 09:30:27 2019-02-03 09:30:27 cjrvrjnko01fbi3um0a6n6lok Kurs Angular Material – cz.7 Routing (cz.1) http://robieinternety.pl/kurs-angular-material-cz-7-routing-cz-1/ Witam dziś zajmiemy się routingiem. Najpierw w tej części napiszemy główny routing aplikacji, następnie w drugiej, podzielimy go na moduły i podepniemy wszystkie komponenty. Napiszemy też „guarda”, który będzie bronił dostępu do niektórych części aplikacji, np kiedy nie jesteś zalogowany.  W 3 części zajmiemy się parametrami routingu. Zabieramy się do pracy. Czym rożni się routing […] 2019-02-08 08:02:39 kurs-angular-material-cz7-routing-cz1 cjsbs4x5c001ai3umfoh24x33 2019-02-08 08:02:39 2019-02-08 08:02:39 -cjs0unyvk01fji3umhruabees Kurs Angular Material – cz.8 Routing (cz.2) http://robieinternety.pl/kurs-angular-material-cz-8-routing-cz-2/ Witam serdecznie w drugiej części rozważań o Angularowym routingu. W tej lekcji podzielimy routing na logiczne moduły napiszemy też „guarda”, a w następnej lekcji omówimy metodę router.navigate i parametry.  Aktualna wersja do tej lekcji znajduje się pod adresem: https://github.com/taaaniel/foodCalc/tree/part_7_router_part_1_end Poprzedni routing, który zrobiliśmy sprawdzi się w małej aplikacji. Dziś pokażemy bardziej profesjonalne podejście. Zabieramy się do pracy: […] 2019-02-11 21:28:50 kurs-angular-material-cz8-routing-cz2 cjsbs4x5c001ai3umfoh24x33 2019-02-11 21:28:50 2019-02-11 21:28:50 cjsbs4x5c01fyi3um32pi6lx9 Kurs Angular Material – cz.9 Routing (cz.3) http://robieinternety.pl/kurs-angular-material-cz-9-routing-cz-3/ Witam w 3 i ostatniej części w tym kursie o routingu.  W tej lekcji poznamy metodę „router.navigate” , opowiemy sobie o parametrach w routingu i porozmawiamy sobie o mockach czyli o takiej atrapie obiektu który w sposób kontrolowany naśladuje i zachowuje się jak prawdziwy obiekt, który dostajemy tak jakby z naszego backendu. Zabieramy się do […] 2019-02-19 13:03:30 kurs-angular-material-cz9-routing-cz3 cjsbs4x5c001ai3umfoh24x33 2019-02-19 13:03:30 2019-02-19 13:03:30 ckliome3e03051umsrje8lpm4 #8 Typy Generyczne - Kurs TypeScript od podstaw https://www.youtube.com/watch?v=ZAOB4ohOeiI 🔴 W tym odcinku pokazuję typy generyczne.\n\nZobaczysz jak sobie radzić z dynamicznym rozszerzaniem typu obiektu. Typy generyczne dają niesamowite możliwości, a ja tu tak na prawdę tylko ocieram się o temat. Temat generyków może nie być prosty do zrozumienia.\nAby wszystko sobie dobrze zobrazować, pokazuję wszystko na czymś co do złudzenia przypomina React.js. Samego Reacta będę dołączał do projektu w następnych odcinakach, i zobaczysz jakie to proste. Piszemy typy do Reacta bez Reacta 😎 paradoksalnie\n\n0:00 - O czym jest ten odcinek\n0:17 - Dodawanie dodatkowych propsów\n1:20 - Zmiana typu Component na generyka\n4:50 - Rozszerzanie typu obiektu\n5:36 - Jak stosować intersekcję\n6:34 - Domyślny typ-argument\n\n🔥🔥🔥🔥🚀\nZapisz się do listy: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\nTu pojawiają się informacje o moim kursie.\n🔥🔥🔥🔥🚀\n\n🔴 Dołącz do naszej grupy na Facebooku\nhttps://www.facebook.com/groups/jsdzem\n\nLink do repo\nhttps://github.com/lebrande/kurs-typescript\n\nOto pełna playlista tego kursu:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN8nGiII_dUXhlAgId4Fb9r_\n\nProjekt koduje Jakub Pusiak 2020-12-23 09:38:33 8-typy-generyczne-kurs-typescript-od-podstaw ckkb3uw6b00002smi6pw37cjt 2021-02-24 00:10:57.626 2021-02-24 00:10:57.626 ckliome4z03331umss2kimuy6 #9 Jak Tworzyć Bezpieczne Typy - Kurs TypeScript od podstaw https://www.youtube.com/watch?v=2vNHVe__QtU 🔴 Gdzie warto używać słówka extends? Bezpieczeństwo typów w praktyce. \n\nNa początek kilka wskazówek jak utrzymywać ładny i czytelny kod z deklaracjami typów.\nNastępnie pokazuję dobre praktyki i jak konstruować bezpieczne typy. Pamiętaj, że inny programista może coś popsuć i w cale nie musi mieć złych zamiarów. Warto się przed tym zabezpieczyć, wymuszając na nim podanie tylko takiego typu jakiego się spodziewasz. Oszczędzając nerwów sobie i jemu. Warto poprowadzić kogoś za rękę, praca staje się przyjemna, wszystko można wywnioskować z definicji typów.\nJak zwykle, najpierw pokazuję problem - później go rozwiązuję.\n\n0:00 - O czym jest ten odcinek\n0:20 - Poprawiam czytelność kodu typów\n0:51 - Wyjaśniam co znaczą typy T, U, V w generykach\n2:49 - Pokazuję co może pójść nie tak\n3:52 - Jak wymusić podanie obiektu?\n5:16 - Dlaczego warto wyciągać typ obiektu poza funkcję?\n\n🔥🔥🔥🔥🚀\nZapisz się do listy: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\nTu pojawiają się informacje o moim kursie.\n🔥🔥🔥🔥🚀\n\n🔴 Dołącz do naszej grupy na Facebooku\nhttps://www.facebook.com/groups/jsdzem\n\nLink do repo\nhttps://github.com/lebrande/kurs-typescript\n\nOto pełna playlista tego kursu:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN8nGiII_dUXhlAgId4Fb9r_\n\nProjekt koduje Jakub Pusiak 2020-12-24 07:45:00 9-jak-tworzyc-bezpieczne-typy-kurs-typescript-od-podstaw ckkb3uw6b00002smi6pw37cjt 2021-02-24 00:10:57.684 2021-02-24 00:10:57.684 @@ -575,6 +590,7 @@ cj1j5mzhc00eni3um5e120dhm Strona portfolio – cz. 5 – HTML + CSS, part IV – cj1nyl02000f3i3um7uqn6nma Mój plan działania – cz 5 – Wielki Finał – Bootcamp NodeJS. http://bedekodzic.pl/bootcamp-nodejs/

Święta, Święta i po Świętach… Ja mogę do tego dodać Bootcamp, Bootcamp i po Bootcampie 🙂 W Wielki Piątek zakończyłem ostatnią część mojego Front-Endowego szkolenia. Tym razem przez cały tydzień na tapecie był NodeJS, MongoDB i w tle Angular2. Zacne połączenie… Opowiem Wam jak to wyglądało. Praca Własna II Zanim pojechałem na szkolenie spędziłem 2 […]

\n

The post Mój plan działania – cz 5 – Wielki Finał – Bootcamp NodeJS. appeared first on Będę Kodzić.

2017-04-18 19:45:09 moj-plan-dzialania-cz-5-wielki-final-bootcamp-nodejs ck87juhko000ni3umanz2707n 2017-04-18 19:45:09 2017-04-18 19:45:09 cj32zs7mp00k8i3umaakr6nbp Kiedy zachodziło właśnie gorące wiosenne słońce... http://devinspe.blogspot.com/2017/05/kiedy-zachodzilo-wlasnie-gorace-wiosenne-slonce.html

... na Patriarszych Prudach zjawiło się dwóch obywateli.

Słońce wprawdzie nie zachodzi, wiosna wyjątkowo zimna i kapryśna, jestem w Warszawie, a nie w Moskwie, i nikt się dziś u mnie nie zjawił, ale bardzo chciałam zacząć tym zdaniem ;) (autorstwa Michaiła Bułhakowa, przecudnym, arcypięknym, doskonałym!), bo plącze mi się ostatnio po głowie i nie mogę się od niego uwolnić. Może teraz, wyrzucone, pójdzie sobie gdzie indziej?

Po tym wstępie "od czapy" i zachwycie nad talentem autora Mistrza i Małgorzaty, przechodzę płynnie do tematów, które bardziej przystoją temu blogowi.

Konkurs Daj się poznać 2017 ma się ku końcowi. Trzeba więc zagęścić ruchy! Zmobilizowana nadchodzącym deadlinem ;), poczyniłam w ostatnich dniach, co następuje:

  1. Rozbudowałam walidację formularzy dodawania i edycji książki
    (z uwzględnieniem wzajemnych zależności między dropdownami 'Form' i 'Genres', o których pisałam tutaj).
    2. Korzystałam przy tym z rozwiązań dostępnych w jQuery-Form-Validator, mianowicie: data-validation-ignore, data-validation-error-msg, data-validation-depends-on oraz data-validation-depends-on-value.
    Jestem całkiem zadowolona z efektów.

  2. Dodałam input z autocompleterem, umożliwiający wyszukanie konkretnej książki po tytule.
    3. Opcja ta jest dostępna na liście wszystkich książek oraz w widoku 'Advanced filters'. Tutaj korzystałam z pluginu Bootstrap-3-Typeahead, który (oględnie mówiąc) daleki jest od ideału. W trakcie implementacji okazało się, że są w nim pewne bugi (niektóre - na szczęście - rozwiązane już przez społeczność). Ostatecznie, przy wsparciu weterana JS ;), udało się to wdrożyć. Działa całkiem przyzwoicie, choć można to jeszcze podrasować.





I to tyle z "większych" rzeczy. W ramach pomysłów / TO DO pozostaje jeszcze:

Oczywiście ta lista TO DO wciąż ewoluuje - por. zestaw z początku kwietnia. Tak więc - małymi krokami, ale do przodu! :)


Na koniec (dziwny początek domaga się równego sobie zakończenia ;)) dwa inne cytaty z Bułhakowa (dalej Mistrz i Małgorzata), który, chcąc nie chcąc, wchodzi (wszedł?) do kultury masowej (por. źródła grafik).

źródło: ag-artdeco.pl


źródło: mkc.cupsell.pl


2017-05-24 12:55:00.001 kiedy-zachodzilo-wlasnie-gorace-wiosenne-slonce cj4phfytc000pi3um4bh44exz 2017-05-24 12:55:00.001 2017-05-24 12:55:00.001 cj398xx6o00kqi3umgo1n6jo5 Filtrowanie client side http://devinspe.blogspot.com/2017/05/filtrowanie-client-side.html

Zmiany, zmiany. BUKA wychodzi z piwniczki (siedziała tam długo, więc krok ma trochę niepewny ;) i rusza w świat. To znaczy: od dziś jest dostępna na github pages i prezentuje prawdziwe książki, a nie randomowe publikacje o tytułach w rodzaju Ergonomic Cotton Cheese serwowane przez mock REST API. A wszystko za sprawą Firebase. Ale po kolei...

Do tej pory korzystałam z mock REST API, które uruchamiałam wyłącznie na localhost (żeby serwować je poza localhost, potrzebny byłby hosting node.js, którego nie mam). W związku z tym niemożliwe było hostowanie aplikacji, choćby na github pages właśnie, bo zasoby z API dostępne były tylko lokalnie. Potrzebowałam więc bazy książek na serwerze. Ponieważ zajmuję się front-endem, chciałam użyć jako API czegoś gotowego - wybór padł (w sumie dość przypadkowo) na Firebase (a dokładnie - moduł/produkt Realtime Database; Firebase to "kombajn", który oferuje dużo więcej).

Wykrystalizował mi się taki plan: dalej rozwijam aplikację na localhost z Gulpem i mock REST API, a wersję "produkcyjną", dla której bazą danych jest Firebase Database, umieszczam na github pages. Docelowo powinnam zatem mieć jeden kod, który będzie obsługiwał dwa środowiska - developerskie i produkcyjne.

Baza danych udostępniana przez Firebase okazała się... dość specyficzna. Odbiega ona od RESTtowych standardów, które poznałam do tej pory. Najważniejsze różnice:

Po serii testowych requestów stało się jasne, że mój dotychczasowy kod tak "po prostu" nie obsłuży żądań wysyłanych i do mock REST API, i do Firebase. Aby możliwa była komunikacja z jednym i z drugim API, część kodu musiała zostać zmodyfikowana (dostosowana do każdego z API). Zmianom uległa warstwa modelu, dzięki czemu controller pozostał "nieświadomy" co do tego, z jakim silnikiem API ma do czynienia, jak to API działa.

Najistotniejsza różnica dotyczyła wspomnianego już filtrowania. Mock REST API filtruje dane server side, dzięki czemu client side dostaje gotowe dane, przefiltrowane według określonych kryteriów. Z uwagi na "upośledzenie" tej funkcjonalności w Firebase, konieczne stało się wprowadzenie filtrowania po stronie klienta (przeglądarki). Nie jest to może najbardziej optymalne i wydajne rozwiązanie, ale na obecne potrzeby wystarcza. (Nie spodziewam się, by moja - czy inna, przeciętna - domowa biblioteka liczyła miliony książek. Choć to bardzo nęcąca, przyjemna wizja... :)

Tak więc Firebase zwraca całą kolekcję książek, które w danym momencie "ma", a filtrowanie odbywa się client side. W ten sposób warstwa controllera nie zmienia się, a dostosowanie kodu do specyfiki mock REST API oraz Firebase pozostaje ograniczone do warstwy modelu (zamknięte w modelu).

Kod zawierający opisane powyżej zmiany dostępny jest w repozytorium projektu na osobnym branchu. Wersja aplikacji z wykorzystaniem Firebase Database - wciąż robocza - dostępna jest tutaj.

Kolejny krok to automatyzacja - na poziomie Gulpa - budowania aplikacji pod Firebase i mock REST API. Oraz ogarnięcie uwierzytelniania użytkownika w Firebase, tak aby dostęp do danych nie był publiczny. Ale to pieść przyszłości. :)


PS
Gdyby ktoś zaznajomiony z Firebase czytał to i miał sugestie, co można zrobić inaczej, lepiej, to chętnie takowe przygarnę. :)


2017-05-28 21:58:00 filtrowanie-client-side cj4phfytc000pi3um4bh44exz 2017-05-28 21:58:00 2017-05-28 21:58:00 +cklgthakc00010vlcr0ovb4mm Szybsze renderowanie stron internetowych, dzięki właściwościom contain i content-visibility https://blog.robertorlinski.pl/jak-szybciej-renderowac-strony-internetowe/ W tym artykule powiem Ci o trzech właściwościach CSSa, które poprawią wydajność i użyteczność Twoich stron. Pozwolą Ci przejąć kontrolę nad tym jak i kiedy renderują się style poszczególnych elementów. A właściwości te, to: contain content-visibility contain-intrinsic-size Na początku przedstawię Ci, jak przeglądarki stylują strony internetowe, a później jakie zastosowanie w tym procesie, mają wymienione powyżej właściwości. Okej, to […] 2021-02-22 16:14:05 szybsze-renderowanie-stron-internetowych-dzieki-wlasciwosciom-contain-i-content-visibility ckig8bkw0000zi3umgy3obxsr 2021-02-22 16:51:25.501 2021-02-22 16:51:25.501 cj3djarhe00lhi3um2jpxe1i0 Wersja demo i co dalej? http://devinspe.blogspot.com/2017/05/wersja-demo-i-co-dalej.html

Dziś formalnie ostatni dzień konkursu Daj się poznać 2017. Piszę "formalnie", bo dla mnie (i pewnie nie jestem w tym odosobniona :)) konkurs się nie kończy. Zamierzam dalej rozwijać mój projekt i udowadniać sobie - w mniejszych i większych krokach - że się da. Że wiele róóóóżnych rzeczy się da. :) Co jakiś czas, choć pewnie z mniejszą częstotliwością, będę też pisać tutaj, co nowego w BUCE i u mnie.

Miałam nie pisać podsumowania, potem stwierdziłam, że jednak napiszę, a w końcu zabrakło mi na to czasu, bo dzisiejszy wieczór spędziłam na poprawianiu wersji demo (którą można znaleźć tutaj). Jak się okazało, integracja z inną (niż mock REST API) bazą przyniosła więcej wyzwań niż mi się początkowo wydawało. Ale to większy (i szalenie dla mnie ciekawy!) temat, raczej nie zdążę go już dziś przybliżyć, na 20 minut przed północą. :D

Dużo jeszcze mam takich odwieszonych tematów, o których tylko zdążyłam napomknąć w dotychczasowych postach. Podsumowanie konkursu właśnie do nich dołącza. Teraz ograniczę się tylko do stwierdzenia, że w moim przypadku konkurs zdecydowania spełnił zadanie, które mu przypisałam, decydując się na udział w nim. Okazał się skutecznym, acz nie nazbyt uciążliwym "biczykiem". ;)

Kończąc, bo czas nagli: BUKA jest i działa. Fanfary, proszę, bo to było niemal creatio ex nihilo! ;) Duży wysiłek, satysfakcja ogromna. Było warto.


2017-05-31 21:59:00.002 wersja-demo-i-co-dalej cj4phfytc000pi3um4bh44exz 2017-05-31 21:59:00.002 2017-05-31 21:59:00.002 cj4phfytc00nui3umheoy73na Końce i początki http://devinspe.blogspot.com/2017/07/konce-i-poczatki.html

Uwaga celem ustrzeżenia przed czytelniczym rozczarowaniem: w tym poście nie ma słowa o programowaniu. Wzięło mnie na refleksje. ;)

Czerwiec minął niepostrzeżenie. Bez jednego słowa na blogu. A miało być o tym, tamtym i owym... I będzie! Choć nieco później niż zakładałam.

W tym krótkim czasie, od zakończenia konkursu do teraz, parę innych spraw znalazło swój finał i parę innych się rozpoczęło. Przede wszystkim - 28 czerwca zdeployowałam się w nowym (dla mnie, nie dosłownie) mieszkaniu. :) Przeprowadzka z czwartego piętra bez windy... działo się! ;) Po ponad trzech latach spędzonych w ostatnim lokum, jest to spora zmiana, która wymaga oswojenia.

29 czerwca skończyły się awesome warsztaty z HTML i CSS. Super sprawa, szczerze polecam i jeszcze raz dziękuję! :) Pod tym linkiem dostępny jest tutorial przygotowany przez The Awwwesomes, a tutaj layouty do zakodowania (w tej edycji warsztatów kodowaliśmy, wybrany demokratycznie, layout "We create").

17 czerwca, gdy przeprowadzkowe aktywności przybierały na sile, odbyła się gala finałowa DSP 2017, w której wzięłam udział, zarzucają chwilowo pakowanie toreb i pudeł. Jakby na to nie patrzeć, była to pierwsza konferencja programistyczna, w jakiej uczestniczyłam. :) Ciekawe doświadczenie. Choć oczywiście w typowy dla siebie sposób uplasowałam się na pozycji obserwatora... Lwicą konferencyjną nie jestem (jeszcze ;)).

W międzyczasie wzięłam udział w trzech rekrutacjach - w dwóch nawet udało mi się przejść pierwszy etap. Tak więc - piłka w grze. :)

I taki to był czerwiec. ;)

Czerwiec (autor: Jaroński)
źródło: jaronski.pl

2017-07-04 11:20:00 konce-i-poczatki cj4phfytc000pi3um4bh44exz 2017-07-04 11:20:00 2017-07-04 11:20:00 cj2rr1s4w00j5i3umb8b8dt3e Freelancer a praca na etacie? https://tworcastron.pl/blog/freelancer-a-praca-na-etacie/

Albo jesteś freelancer’em albo pracujesz na etacie… Czy na pewno? Zastanówmy się kim jest ta tajemnicza postać i co jej można. Weźmy definicje z...

\n

Artykuł Freelancer a praca na etacie? pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-05-16 16:05:02 freelancer-a-praca-na-etacie ckbbw3jvs000li3umgw19edq9 2017-05-16 16:05:02 2017-05-16 16:05:02 @@ -584,12 +600,14 @@ cj3pzo1wg00m5i3umgmvbeou7 PHP na początek nauki? https://tworcastron.pl/blog/ph cj3u6f44o00mei3um1ec28tr1 Czego się nauczyłem na studiach informatycznych https://tworcastron.pl/blog/czego-sie-nauczylem-studiach-informatycznych/

Jak w praktyce wyglądają studia informatyczne (a przynajmniej wyglądały moje). Jak wyglądają przedmioty i czego się na nich nauczyłem. Podkreślę na początku, że idąc na studia...

\n

Artykuł Czego się nauczyłem na studiach informatycznych pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-06-12 13:30:33 czego-sie-nauczylem-na-studiach-informatycznych ckbbw3jvs000li3umgw19edq9 2017-06-12 13:30:33 2017-06-12 13:30:33 cj4fo682w00nai3um7kcp16eo Spotkanie z klientem idealnym https://tworcastron.pl/blog/spotkanie-klientem-idealnym/

Spotkanie było udane. Szybka, treściwa rozmowa. Podesłałem wcześniej brief do wypełnienia, podobno klient wie co z nim zrobić. Nie chciałem go wysyłać, ale sam prosił....

\n

Artykuł Spotkanie z klientem idealnym pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-06-27 14:30:41 spotkanie-z-klientem-idealnym ckbbw3jvs000li3umgw19edq9 2017-06-27 14:30:41 2017-06-27 14:30:41 ck2zzp6e801spi3um56on9ctb == vs ===, czyli o koercji typów (#1 Zrozumieć JavaScript) https://tworcastron.pl/blog/vs-czyli-o-koercji-typow-1-zrozumiec-javascript/

Pierwszy odcinek z serii zrozumieć JavaScript będzie o operatorach? Tak,  głównie o tym pierwszym, czyli podwójnym. Nie jest to odcinek stricte o koercji typów,...

\n

Artykuł == vs ===, czyli o koercji typów (#1 Zrozumieć JavaScript) pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2019-11-15 10:18:44 vs-czyli-o-koercji-typow-1-zrozumiec-javascript ckbbw3jvs000li3umgw19edq9 2019-11-15 10:18:44 2019-11-15 10:18:44 -cklgthakc00010vlcr0ovb4mm Szybsze renderowanie stron internetowych, dzięki właściwościom contain i content-visibility https://blog.robertorlinski.pl/jak-szybciej-renderowac-strony-internetowe/ W tym artykule powiem Ci o trzech właściwościach CSSa, które poprawią wydajność i użyteczność Twoich stron. Pozwolą Ci przejąć kontrolę nad tym jak i kiedy renderują się style poszczególnych elementów. A właściwości te, to: contain content-visibility contain-intrinsic-size Na początku przedstawię Ci, jak przeglądarki stylują strony internetowe, a później jakie zastosowanie w tym procesie, mają wymienione powyżej właściwości. Okej, to […] 2021-02-22 16:14:05 szybsze-renderowanie-stron-internetowych-dzieki-wlasciwosciom-contain-i-content-visibility ckig8bkw0000zi3umgy3obxsr 2021-02-22 16:51:25.501 2021-02-22 16:51:25.501 +ck8fyxfk001yqi3umc98thebh Moduły ECMAScript w Node.js https://fsgeek.pl/post/moduly-ecmascript-w-nodejs/

W Node.js każdy plik jest traktowany jako osobny moduł, a że nie piszemy całej aplikacji w jednym pliku to musimy w jakiś sposób nimi zarządzać. Do tej pory w środowisku Node.js korzystaliśmy z modułów CommonJS ale to się może zmienić w przyszłości kiedy stabilne będą moduły ECMAScript.

\n\n

Moduły CommonJS

\n\n

Z tymi modułami zetknął się każdy kto chodź raz pisał jakiś skrypt w Node.js. Do zaimportowania zewnętrznego modułu wykorzystujemy składnię reqiure. Natomiast aby udostępnić jakieś funkcje czy wartości dla innych modułów mamy module.exports lub exports

\n\n
const { database } = require('./database')\n\nmodule.exports = {\n    connection: database.connect('...')\n}\n
\n\n

Zastanawialiście się kiedyś jak to działa? Skąd się bierze metoda require i obiekt module? Idea mechanizmu jest prosta w przeciwieństwie do implementacji (jeśli ktoś ma chwilę wolnego czasu to może zerknąć do repozytorium). Każdy moduł, który używamy w naszej aplikacji jest opakowywany w funkcję

\n\n
(function (exports, require, module, __filename, __dirname) { \n\t// zwartość naszego modułu\n });\n
\n\n

Nasz moduł wygląda wtedy następująco:

\n\n
(function (exports, require, module, __filename, __dirname) { \n    const { database } = require('./database')\n\n    module.exports = {\n        connection: database.connect('...')\n    }\n});\n
\n\n

Dzięki temu, w taki trochę magiczny i ukryty sposób, możemy eksportować i importować moduły w CommonJS.

\n\n

Moduły ECMAScript

\n\n

To po co nam właściwie inny sposób radzenia sobie z modułami? Po co nam nowy mechanizm skoro stary się sprawował dobrze przez tyle lat? Ponieważ tak naprawdę to moduły ECMAScript są oficjalnym sposobem na radzenie sobie z modułami w JS’ie. Dzięki temu, że zostały wprowadzone to mamy to zunifikowane dla JS’a i możemy tworzyć biblioteki, które będą z tego mechanizmu korzystały w każdym miejscu gdzie możemy użyć języka JavaScript.

\n\n

Jak teraz będzie wyglądało korzystanie z innych modułów? Mamy tutaj składnię, którą kojarzymy np.: z React’a czyli import i export

\n\n
import { database } from './database'\n\nexport const connection = database.connect('...')\n
\n\n

Oczywiście nie możemy od razu z tego skorzystać gdyż jest to ciągle funkcjonalność eksperymentalna. Na szczęście nie musimy też jej włączać żadnymi flagami gdyż jest domyślnie włączona. Aby skorzystać z tej funkcjonalności mamy dwie drogi:

\n\n\n\n

Top-level await

\n\n

Jest jeszcze jedna zaleta korzystania z modułów ECMAScript. Od jakiegoś czasu w najnowszej wersji Node’a jest dla tych modułów uruchomiony top-level await. Dzięki temu nie musimy opakowywać naszego kodu w IIFE (Immediately-invoked function expression) tylko możemy skorzystać z await bezpośrednio

\n\n
await Promise.resolve(console.log('promise'));\n\nconsole.log('after Promise');\n
\n\n

W przypadku Node’a jest to o tyle wygodne, że wiele rzeczy dzieje się asynchronicznie a na które potrzebujemy czekać np.: nawiązanie połączenia z bazą danych żeby wystartować resztę aplikacji. Jednak aby włączyć tę funkcjonalność musimy ją jeszcze aktywować przy pomocy flagi

\n\n
node --harmony-top-level-await nazwa_pliku.mjs\n
\n\n

A wy co sądzicie o nowych modułach i top-level await? Korzystaliście już z tego czy czekacie aż będzie to rozwiązanie stabilne? Myślicie, że zmieni to sposób w jaki tworzymy aplikacje?

2020-03-31 14:00:00 moduly-ecmascript-w-nodejs ckhxjb6o0000yi3umb3hg09jv 2020-03-31 14:00:00 2020-03-31 14:00:00 +ck8zxhhk001zqi3umhnxuavi9 D3.js - tworzenie prostego wykresu liniowego https://fsgeek.pl/post/d3-prosty-wykres-liniowy/

Wykresy są doskonałym sposobem do reprezentowania nudnych danych liczbowych. Dobrze zrobiony wykres potrafi przykuć wzrok osoby, która od liczb ucieka z krzykiem. Istnieje wiele bibliotek do tworzenia wykresów a przynajmniej część z nich opiera się na bibliotece D3.js. Ja chciałbym się skupić na tej ostatniej i pokazać jak można stworzyć w niej te proste jak i zaawansowane wykresy.

\n\n

Dlaczego D3.js?

\n\n

Biblioteka D3.js służy do wizualizacji danych na stronie internetowej przy pomocy SVG, Canvasa lub czystego HTML’a. Łączy ona techniki wizualizacji danych wraz z interakcją z nimi oraz manipulacją drzewem DOM. Powoduje to, że biblioteka jest potężna i w doświadczonych rękach można nią działać cuda. Jeśli nie jesteście przekonani to zerknijcie na przykłady gotowych wizualizacji. Jest też druga strona medalu - żeby móc tworzyć tak zaawansowane rzeczy biblioteka posiada bardzo bogate API, które na początku może przerażać.

\n\n

A dlaczego nie korzystać z gotowych bibliotek, które już opakowują D3.js w wygodny interfejs? Jest to na pewno wygodne i szybkie na początku. Ale z doświadczenia wiem, że klienci lubią wymyślać różne rzeczy i może się zdarzyć, że nie będziemy w stanie tego zrobić w naszej bibliotece lub będziemy musieli się bardzo natrudzić by uzyskać pożądany efekt. Potrafiąc korzystać z czystego D3.js będziemy w stanie mocno czarować na wykresie i nie będziemy niczym ograniczeni. Drugi argument to kwestia nadmiaru bibliotek w naszych aplikacjach - powinniśmy starać się używać jak najmniej różnego rodzaju interfejsów tylko korzystać z konkretnych bibliotek - dzięki temu kod wynikowy będzie mniejszy i nie jesteśmy niczym ograniczeni.

\n\n

Tworzenie pierwszego wykresu

\n\n

Z racji tego, że D3.js nie jest prostą biblioteką mam zamiar stworzyć serię postów gdzie po kolei będziemy tworzyć coraz to bardziej skomplikowane wykresy. Dzisiaj zaczniemy od samych podstaw czyli wykreślenia prostego wykresu liniowego.

\n\n

Najpierw najprostszy krok czyli stworzenie obszaru gdzie będzie kreślony wykres.

\n\n
import * as d3 from "d3";\n\nconst chart = d3\n\t.select("#app")\n\t.append("svg")\n\t.attr("width", 400)\n\t.attr("height", 400)\n\t.append("g");\n
\n\n

Będziemy tworzyć nasz wykres przy pomocy SVG. D3.js wykorzystujemy tutaj by najpierw znaleźć element o id app na stronie i umieścić tam element svg o konkretnych wymiarach. Wykres liniowy to jest tak naprawdę prosta łamana więc do stworzenia jej w svg potrzebujemy elementu path

\n\n
const data = [\n  { data: 1, value: 0 },\n  { data: 20, value: 20 },\n  { data: 30, value: 12 },\n  { data: 40, value: 34 },\n  { data: 50, value: 25 }\n];\n\nchart\n  .datum(data)\n  .append("path")\n  .attr("fill", "none")\n  .attr("stroke", "red")\n  .attr("stroke-width", 5)\n  .attr(\n    "d",\n    d3\n      .line()\n      .x(({ data }) => data)\n      .y(({ value }) => value)\n  );\n
\n\n

Widzimy tutaj wykorzystanie nowych elementów z biblioteki. Po pierwsze mamy funkcje .datum(), która ustawia dane dla aktualnie wybranego elementu. Następnie dodajemy element path oraz ustawiamy mu odpowiednie atrybuty. Najważniejszy z nich - d - określa jak ma wyglądać nasza prosta łamana. Moglibyśmy zrobić to ręcznie ale nie jest to proste i wygodne (przykładowa wartość M1,0L20,20L30,12L40,34L50,25). Na szczęście możemy wykorzystać kolejną z funkcji d3.line(), która stworzy nam linię z tablicy danych jakie przekazaliśmy. Dodatkowo mamy funkcje x() i y(), które pozwalają po pierwsze wybrać jakie wartości mają być dla x i y oraz dodatkowo je zmodyfikować jeśli będzie to potrzebne.

\n\n

Jednak jeśli teraz uruchomimy nasz kod to zobaczymy, że po pierwsze nasz wykres nie wypełnia całej wolnej przestrzeni oraz wykres będzie odwrócony. To pierwsze jest spowodowane tym, że póki co nasze punkty wskazują konkretne punkty na osi współrzędnych elementu svg. Drugi problem jest powiązany z osią układu współrzędnych. Ze szkoły jesteśmy przyzwyczajeni do osi współrzędnych gdzie punkt (0,0) jest w lewym, dolnym rogu i oś X rośnie w prawo a oś Y w górę. Niestety w grafice komputerowej wygląda to inaczej - punkt (0,0) jest w lewym, górnym rogu i tak jak oś X rośnie w prawo tak oś Y rośnie w dół.

\n\n

Żeby nasz wykres wyglądał tak jesteśmy przyzwyczajeni to musimy go przeskalować. Znowu moglibyśmy robić to ręcznie ale po co, skoro są do tego funkcje.

\n\n
const walkX = d3\n  .scaleLinear()\n  .domain([0, 50])\n  .range([20, 380]);\nconst walkY = d3\n  .scaleLinear()\n  .domain([0, 35])\n  .range([380, 20]);\n\n\n//reszta kodu\n\n.attr(\n    "d",\n    d3\n      .line()\n      .x(({ data }) => walkX(data))\n      .y(({ value }) => walkY(value))\n  );\n
\n\n

Każda z funkcji odpowiada za jedną z osi. Z racji tego, że nasz wykres jest liniowy to użyjemy skali liniowej, która odwzoruje nasze punkty z danych na punkty na wykresie. Potrzebujemy określić domenę (.domain()) oraz zakres (.range()) do jakich mają być nasze punkty odzwierciedlone. W domenie ustawiamy tablicę z minimalną i maksymalną wartością w danej osi, natomiast w zakresie ustawiamy liczby do jakich mają być tamte wartości przeskalowane. Z racji tego, że chcę aby wykres zajmował całą przestrzeń svg to w zakresie podaję szerokość elementu svg z 20 pikselowym marginesem z obu stron. Połączenie domeny i zakresu jest potrzebne by móc odpowiednio rozmieścić punkty na wykresie by wyglądało prawidłowo i nie ucięło żadnych punktów.

\n\n

Warto na sam koniec tylko zwrócić uwagę na zakres dla osi Y. Tak jak wspominałem jest ona odwrócona w stosunku do tego co znamy i wartości musimy odwrócić - czyli chcemy by nasza wartość 0 była na svg na współrzędnej Y równej 380.

\n\n

Efekt końcowy wygląda następująco:

\n\n\n\n

Nie jest to może najbardziej zaawansowany wykres ale wszystko w swoim czasie. Teraz możemy dodawać kolejne elementy do wykresu jak osie, etykiety, dodatkowe elementy graficzne, jakieś animacje by z prostego wykresu zrobić naprawdę fajny element graficzny na stronę.

2020-04-14 13:15:00 d3js-tworzenie-prostego-wykresu-liniowego ckhxjb6o0000yi3umb3hg09jv 2020-04-14 13:15:00 2020-04-14 13:15:00 ckliome5303441ums0ndlemz8 Czy bootcampy programistyczne mają sens - Marcin Tchórzewski | Przeprogramowani ft. Gość #8 https://www.youtube.com/watch?v=14tykCPs89E 👉 Subskrybuj aby nie przegapić nowych filmów 👈\n\nKolejnym gościem Przeprogramowanych jest Marcin Tchórzewski - założyciel oraz CEO Coders Lab - największej w Polsce szkoły programowania.\n\nCoders Lab to szkoła, której kursy ukończyło już ponad pięć tysięcy osób, a zgodnie z ich materiałami informacyjnymi - ponad 82% tego grona znalazło pracę w IT. Wiemy jak gorącym tematem są takie szkoły, więc na pewno nie obejdzie się bez trudnych pytań związanych z przygotowaniem uczestników do rzeczywistych wyzwań rynku pracy, zawartości każdego kursu oraz historii absolwentów, którzy przez Coders Lab "przeszli".\n\nKorzystając z doświadczenia Marcina porozmawiamy również o zakładaniu tego rodzaju biznesu w Polsce, reakcji społeczności na kolejne pomysły Coders Lab oraz o codzienności i obowiązkach CEO.\n\nSerdecznie zapraszamy, już we wtorek o 18:00! 2020-12-30 19:28:36 czy-bootcampy-programistyczne-maja-sens-marcin-tchorzewski-or-przeprogramowani-ft.-gosc-8 ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.687 2021-02-24 00:10:57.687 ckliome6n03791ums1f1x3qsh #1 Instalacja Jest i testowy test https://www.youtube.com/watch?v=64KGL3NBPzs 🔴 Kuba Instaluje framework Jest i pisze testowy test! Tak jest 😂\n\n0:00 - Co będziemy robić w tym odcinku\n0:41 - Instalacja frameworka Jest\n1:00 - Testowy test\n4:52 - Jak działa expect\n6:25 - Interfejs Jest w terminalu\n7:08 - Dokumentacja - gdzie warto zajrzeć?\n\n🧪 Pełna playlista do tej serii o testowaniu:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN_nsAlEdVInoRkvE_pmLayP\n\n🔥🔥🔥🔥🚀\nZapisz się do newslettera: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\n🔥🔥🔥🔥🚀\n\nLink do repo z kodem, znajdź odpowiedni commit.\nhttps://github.com/lebrande/search-dropdown-record\n\nMam też serię o języku TypeScript.\nTo taki wstęp do Reacta, tutaj playlista:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN8nGiII_dUXhlAgId4Fb9r_\n\nProjekt koduje Jakub Pusiak 2021-01-09 14:27:42 1-instalacja-jest-i-testowy-test ckkb3uw6b00002smi6pw37cjt 2021-02-24 00:10:57.743 2021-02-24 00:10:57.743 ckliome7c04121umsfx8ios7x FizzBuzz i trochę o RxJS https://www.youtube.com/watch?v=58VgqrmXBTY 🔴 Odcinek specjalny - Wiesz co to FizzBuzz? Nie?! A powinieneś/powinnaś!\n\n0:00 - Intro\n0:18 - Dlaczego trzeba wiedzieć co to jest FizzBuzz?\n0:58 - Moja motywacja do nagrania o RxJS\n1:41 - Treść zadania FizzBuzz\n3:23 - Instalacja i opis projektu\n5:08 - Rozwiązywanie zadania w czystym TypeScript\n14:40 - Rozwiązywanie zadania z RxJS\n20:12 - Sposób drugi z RxJS - na kliknięcie\n24:17 - Sposób trzeci z RxJS - co sekundę\n25:29 - Zwróć uwagę na wersję RxJS\n25:59 - Jak się uczyć RxJS\n\n🔥🔥🔥🔥🚀\nJeśli chcesz się więcej nauczyć ode mnie:\nWpisz się na listę: https://www.subscribepage.com/jsdzem\n🔥🔥🔥🔥🚀\n\nDo nakręcenia tego odcinka zmotywowano mnie na naszej grupie.\nDołącz jeśli chcesz i bierz udział w tworzeniu treści na moim kanale:\nhttps://www.facebook.com/groups/jsdzem\n\nLink do repo, Pull Request ze zmianami z tego odcinka:\nhttps://github.com/lebrande/fizzbuzz-rxjs\n\nLinki do do odcinka:\n\nMój kurs/tutorial TypeScripta, tutaj cała playlista:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN8nGiII_dUXhlAgId4Fb9r_\n\nMoje poprzednie odcinki o RxJS:\n\nAutomat do kokakoli, nagrywane jeszcze w szopie :)\nhttps://www.youtube.com/watch?v=bHhDOFlEqRw\n\nGadanie na spacerze o RxJS:\nhttps://www.youtube.com/watch?v=gHAjUA3BLrA\n\n© Jakub Pusiak 2020-12-09 09:00:01 fizzbuzz-i-troche-o-rxjs ckkb3uw6b00002smi6pw37cjt 2021-02-24 00:10:57.769 2021-02-24 00:10:57.769 ckliome8c04401ums9oyqksdj Front-End 2025, czyli o tym co nadchodzi - Michał Miszczyszyn | Przeprogramowani ft. Gość #6 https://www.youtube.com/watch?v=JU9hfj3QX0g 👉 Subskrybuj aby nie przegapić nowych filmów 👈\n\nFront-End w 2025r. - czy zastanawialiście się kiedyś jak ta właśnie część programistycznego świata będzie wyglądać po kolejnych latach rewolucji?\n\nDzisiaj standardem wciąż jeszcze jest JavaScript, ale czy TypeScript ustabilizuje swoją pozycję i stanie się językiem domyślnym? Wczorajszym jQuery stał się React, co natomiast stanie się z tym rozwiązaniem za pięć lat? Dzisiaj pozycja Front-End developera to stabilne warunki zatrudnienia i dobra pensja, ale jak może na to wpłynąć to co dzieje się za oknem akurat dzisiaj?\n\nA może... może nie ma co debatować, bo i tak w tym czasie UI będziemy już opisywać słowami a kod będzie za nas pisać sztuczna inteligencja?\n\nNa taki nietypowy, bo nieco futurologiczny odcinek naszej serii "Przeprogramowani ft. Gość" zapraszamy już w kolejną środę. Gościem będzie Michał Miszczyszyn - autor bloga https://typeofweb.com/, znany uczestnik polskiego community web developmentu oraz autor nadchodzącej książki o języku TypeScript, którą możecie nabyć w przedsprzedaży już teraz:\n\n👉 https://typescriptnapowaznie.pl/ 👈\n\nPolecane materiały:\n👉https://www.typescriptlang.org/\n👉 http://yew.rs/\n👉 https://reasonml.github.io/\n👉 https://rescript-lang.org/docs/manual/latest/introduction\n👉https://mariusschulz.com/articles/series/typescript-evolution\n👉https://www.rust-lang.org/\n \nNie możecie tego przegapić! 2020-12-30 19:28:26 front-end-2025-czyli-o-tym-co-nadchodzi-michal-miszczyszyn-or-przeprogramowani-ft.-gosc-6 ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.804 2021-02-24 00:10:57.804 cklguinif00010wl1td39axd7 Jak wyznaczyć i zmierzyć LCP? Core Web Vitals | Wydajny frontend #2 https://www.youtube.com/watch?v=YjDfr9MLZxk Jak wyznaczyć i zmierzyć LCP? Core Web Vitals. W pierwszej części filmu o Largest Contentful Paint, Marcin tłumaczy kryteria stosowane przez przeglądarkę przy wyznaczaniu kandydata na LCP oraz prezentuje skrypt, który wyręczy Cię w tym zadaniu. Następnie pokazuje jak skonfigurować Chrome DevTools, aby Twoje pomiary były zgodne z tymi wykonywanymi przez Google podczas oceniania strony. Dzięki tej wiedzy i narzędziom będziesz gotowy na optymalizację LCP, którą zajmiemy się w kolejnym odcinku serii o wydajnym front-endzie.\n\nSkrypt z filmu: https://gist.github.com/mkczarkowski/99118a49e3e3a7501c6421d3f488f6a9\nKonfiguracja throttling Slow 4G: https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md\n\nŹródło ilustracji z miniaturki: web.dev\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-02-22 17:00:30 jak-wyznaczyc-i-zmierzyc-lcp-core-web-vitals-or-wydajny-frontend-2 ckiyt1v9s001fi3umcgnxbgiu 2021-02-22 17:20:28.552 2021-02-22 17:20:28.552 +cj8l8rso000t0i3um1blxf7hx Jak nadążam za nowościami we front-endzie? https://www.nafrontendzie.pl/jak-nadazam-za-nowosciami-front-end Będąc programistą trzeba nieustanie trzymać rękę na pulsie, śledzić nowości i cały czas poszerzać swoją wiedzę. Nie jest to łatwe, szczególnie w świecie front-endu, gdzie (podobno) codziennie wypuszczany jest jeden nowy framework oraz dziesięć nowych bibliotek. Jak to wszystko ogarnąć? Postaram się odpowiedzieć na to pytanie w dzisiejszym wpisie… albo raczej pokazać Ci jak ja do tego podchodzę. 2017-10-10 06:45:00 jak-nadazam-za-nowosciami-we-front-endzie ck7m8brk0000ui3um0pxg4lae 2017-10-10 06:45:00 2017-10-10 06:45:00 ckliome6o03801ums2lygm6k7 Jak zwiększyć swoje szanse na rynku pracy - Kasia Tang | Przeprogramowani ft. Gość #9 https://www.youtube.com/watch?v=-uwcHsLoOMY aJk zwiększyć swoje szanse na rynku pracy - Kasia Tang, W kolejnym odcinku z serii "Przeprogramowani ft. Gość" porozmawiamy z Kasią Tang - trenerem sourcingu i skutecznej rekrutacji. Tematem przewodnim całej dyskusji będzie zwiększanie swoich szans na coraz trudniejszym (szczególnie dla początkujących) rynku pracy.\n\nMinuta po minucie:\n02:38 - Kim jest sourcer\n14:35 - Budowanie marki osobistej\n17:50 - Kto może dzielić się wiedzą\n29:00 - Zmiany w świecie rekrutacji\n40:17 - Jak szukać pracy\n47:40 - Brak ofert\n54:30 - Dobre CV\n58:40 - Wychodzenie przed szereg\n1:03:30 - Rodzaj firmy a twoje szanse\n1:13:47 - Młody i dynamiczny zespół\n1:26:30 - Zabawne i straszne rekrutacje \n1:31:42 - Etyka w rekrutacji\n1:46:40 - Kultura a rekrutacja\n1:50:25 - Pieniądze\n\nZmiany na świecie spowodowały, że takie tematy jak udana rekrutacja, ocena miejsca pracy czy budowanie wizerunku kandydata zaczęły interesować coraz więcej programistów. Kasia, jako specjalistka od procesów rekrutacyjnych, pomoże nam zrozumieć na co uwagę zwraca druga strona procesu, czyli rekruter przyglądający się naszemu CV.\n\nW naszej rozmowie m.in:\n📚 Jak budować dobre CV\n🚀 Jak dać się znaleźć rekrutowi szybciej niż do tej pory\n☀️ Jak marka osobista wpływa na szansę zatrudnienia\n🤔 Jak wykorzystać social media w procesie poszukiwania pracy\n💼 O czym rozmawiać z rekruterem i jak oceniać potencjalnego pracodawcę\n\nPoznaj naszego gościa:\n👉 http://kasiatang.com/ 👈\n👉 https://www.linkedin.com/in/kasiatang/ 👈 2020-12-30 19:28:43 jak-zwiekszyc-swoje-szanse-na-rynku-pracy-kasia-tang-or-przeprogramowani-ft.-gosc-9 ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.744 2021-02-24 00:10:57.744 ckliome7c04091umsqv0ivbs8 #7 Typy w Funkcjach w Praktyce - Kurs TypeScript od podstaw https://www.youtube.com/watch?v=5pbBOYASYvk 🔴 Dołącz do naszej grupy na Facebooku https://www.facebook.com/groups/jsdzem\n\nChciałbym Cię przygotować do pracy z React.js + TypeScript bez myślenia o Reakcie.\n\nPokazuję na bardzo prymitywnym podejściu - wrzucanie stringa z kodem HTML do jakiegoś diva.\nKod bardzo podobny do tego w React.js, ale bez użycia Reacta 😎\nPoznasz jak działa słowo kluczowe declare, a także poznasz operator ! (znak wykrzyknika).\nPokazuję jak działają typy w funkcjach w praktyce.\nPoprawiamy nieco kod. Zwracam uwagę na kilka szczegółów\n\n0:00 - Kilka małych poprawek\n0:13 - Wrzucanie HTML do diva przez innerHTML\n3:54 - Utworzenie komponentu App i pokazanie struktury\n6:40 - Wymyślony komponent z użyciem declare\n\n🔥🔥🔥🔥🚀\nZapisz się do listy: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\nTu pojawią się pierwsze informacje o moim kursie.\n🔥🔥🔥🔥🚀\n\nLink do repo\nhttps://github.com/lebrande/kurs-typescript\n\nOto pełna playlista tego kursu:\nhttps://www.youtube.com/playlist?list=PLT7X0UTo8GN8nGiII_dUXhlAgId4Fb9r_\n\nProjekt koduje Jakub Pusiak 2020-12-19 10:46:00 7-typy-w-funkcjach-w-praktyce-kurs-typescript-od-podstaw ckkb3uw6b00002smi6pw37cjt 2021-02-24 00:10:57.768 2021-02-24 00:10:57.768 ckliomfh004571ums3t43ia2e Pomagamy początkującym z ich projektami! https://www.youtube.com/watch?v=jaZsdeFsD2Y W jednym z ostatnich odcinków zachęcaliśmy Was do wysyłania nam projektów do Code Review. Dziękujemy wszystkim, którzy podzielili się swoimi projektami.\n\nW tym odcinku na naszym kanale robimy przegląd kodu dwóch projektów naszych widzów.\n\n👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n\nFilm, w którym Filip tłumaczy jak możesz zgłosić swój projekt do Code Review - https://youtu.be/PXIXkjAm4U4\n\nDołącz do grupy na FB i zgłoś swój projekt!\n👉 https://www.facebook.com/groups/zaczynamy.programowac/ 👈\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1 2021-02-20 18:30:05 pomagamy-poczatkujacym-z-ich-projektami! ckj9sdcq7000051l5pzwpbq9f 2021-02-24 00:10:59.413 2021-02-24 00:10:59.413 @@ -598,7 +616,6 @@ cj7pqels000rsi3um5ahbcosv Na Frontendzie od nowa! https://www.nafrontendzie.pl/n cj7znt48000s7i3um6cqubxgr Migracja bloga #1: Wordpress → Jekyll, krok po kroku! https://www.nafrontendzie.pl/migracja-bloga-1-wordpress-jekyll Pewnie niektórzy są juz lekko zmęczeni tematem migracji bloga z Wordpressa do Jekylla. Z drugiej strony, sporo osób prosiło mnie o opisanie, w jaki sposób przeprowadziłem się z jednej z tych platform na drugą. Postanowiłem więc, że spełnię te prośby i tym samym raz na zawsze zamkniemy ten temat! Początkowo planowałem opisać całość “za jednym zamachem” ale okazało się, że opis samej tylko migracji danych z Wordpressa do Jekylla to prawie 2 tysiące słów. Dlatego też, temat został podzielony na dwie części: dziś opisuję jak przeniosłem posty i całą resztę do Jekylla, natomiast za tydzień przedstawię jak przeprowadziłem deployment do Heroku! 2017-09-25 04:15:00 migracja-bloga-1-wordpress-jekyll-krok-po-kroku ck7m8brk0000ui3um0pxg4lae 2017-09-25 04:15:00 2017-09-25 04:15:00 cj82kaow000sbi3umb8z61eye React v16 - co nowego? https://www.nafrontendzie.pl/react-v16-co-nowego Dziś krótko! Właśnie pojawiła się nowa wersja Reacta oznaczona numerem wersji: 16.0.0! Na pewno zdążyłeś już gdzieś przeczytać, że w wersji tej następuje bardzo istotna zmiana dotycząca licencji - wszystkie media społecznościowe o tym trąbiły… Fakt, ta nowość na pewno wiele osób ucieszyła, bo skończą się wreszcie te wszystkie dyskusje na temat patentów. Niemniej jednak, wprowadzona właśnie wersja Reacta przynosi ze sobą więcej nowości, o których na pewno warto przeczytać! 2017-09-27 05:00:00 react-v16-co-nowego ck7m8brk0000ui3um0pxg4lae 2017-09-27 05:00:00 2017-09-27 05:00:00 cj89qe3mo00smi3umh4e85xmv Migracja bloga #2: Deployment do Heroku https://www.nafrontendzie.pl/migracja-bloga-2-deployment-heroku Zgodnie z obietnicą z poprzedniego wpisu tej serii, dziś przedstawię drugą część na temat migracji mojego bloga z Wordpressa do Jekylla. Jej tematem będzie deployment do Heroku czyli hostowanie bloga w chmurze. Ogólnie nie jest to nic specjalnie skomplikowanego - zresztą sam się zaraz przekonasz. Zapraszam do lektury! 2017-10-02 05:25:00 migracja-bloga-2-deployment-do-heroku ck7m8brk0000ui3um0pxg4lae 2017-10-02 05:25:00 2017-10-02 05:25:00 -cj8l8rso000t0i3um1blxf7hx Jak nadążam za nowościami we front-endzie? https://www.nafrontendzie.pl/jak-nadazam-za-nowosciami-front-end Będąc programistą trzeba nieustanie trzymać rękę na pulsie, śledzić nowości i cały czas poszerzać swoją wiedzę. Nie jest to łatwe, szczególnie w świecie front-endu, gdzie (podobno) codziennie wypuszczany jest jeden nowy framework oraz dziesięć nowych bibliotek. Jak to wszystko ogarnąć? Postaram się odpowiedzieć na to pytanie w dzisiejszym wpisie… albo raczej pokazać Ci jak ja do tego podchodzę. 2017-10-10 06:45:00 jak-nadazam-za-nowosciami-we-front-endzie ck7m8brk0000ui3um0pxg4lae 2017-10-10 06:45:00 2017-10-10 06:45:00 cj959sl4000tmi3um45afbsj6 Server Side Rendering w React #1 - wprowadzenie https://www.nafrontendzie.pl/server-side-rendering-react-1-wprowadzenie Server Side Rendering w React to temat, do napisania którego zabierałem się już od dość dawna… W dobie rozbudowanych aplikacji internetowych typu SPA rozwiązanie to sprawdza się znakomicie i nie mogę pozwolić sobie na jego pominięcie na moim blogu! Ogólnie tematyka ta jest szeroka, postanowiłem więc podzielić to zagadnienie na mniejsze części i zrobić z tego serię. Z dzisiejszego wpisu dowiesz się więc, co to jest aplikacja izomorficzna/uniwersalna, czym jest Server Side Rendering oraz jakie są jego największe zalety. W kolejnych postach przedstawię natomiast różne sposoby konfiguracji tego podejścia w Twojej aplikacji. 2017-10-24 07:09:00 server-side-rendering-w-react-1-wprowadzenie ck7m8brk0000ui3um0pxg4lae 2017-10-24 07:09:00 2017-10-24 07:09:00 cj9xsf6dc00uji3um0v2z94th Server Side Rendering w React #2 - ExpressJS https://www.nafrontendzie.pl/server-side-rendering-react-2-expressjs Ostatnio, we wstępie do serii na temat Server Side Renderingu w React, opowiedziałem co nieco czym jest aplikacja izomorficzna/uniwersalna. W poście tym przedstawiłem też kilka zalet oraz wad tego podejścia. Dziś natomiast przejdziemy do rzeczy. Zajmiemy się bowiem praktyczną stroną tego zagadnienia - skonfigurujemy uniwersalną aplikację React przy użyciu frameworka ExpressJS po stronie serwera! 2017-11-13 06:08:00 server-side-rendering-w-react-2-expressjs ck7m8brk0000ui3um0pxg4lae 2017-11-13 06:08:00 2017-11-13 06:08:00 cja7qyuao00uwi3umekd3fgie Server Side Rendering w React #3 - Redux https://www.nafrontendzie.pl/server-side-rendering-react-3-redux W ostatnim, dosyć długim wpisie pokazałem jak skonfigurować Server Side Rendering w React w oparciu o framework ExpressJS po stronie serwera. To jednak nie wszystko - podstawowy zestaw narzędzi używanych w większości aplikacji React, zawiera też przecież bardzo często bibliotekę Redux… Dlatego też dziś, rozszerzę przedstawiony tydzień temu przykład o wsparcie dla tej biblioteki. Jak sam się przekonasz, nie jest to nic trudnego! 2017-11-20 05:25:00 server-side-rendering-w-react-3-redux ck7m8brk0000ui3um0pxg4lae 2017-11-20 05:25:00 2017-11-20 05:25:00 @@ -613,18 +630,6 @@ ck18004w001qci3um1ysb30p2 Czy NodeGUI jest następcą Electrona? https://fsgeek. ck1rz3hc001r1i3um4p466dor Firebase - backend dla frontendu https://fsgeek.pl/post/firebase-backend-dla-frontendu/

Podczas tworzenia aplikacji internetowej zespół składa się z osób, specjalizujących się w konkretnych językach, bibliotekach i warstwach (frontend, backend). A może czasami nie potrzebujemy backendu. Co jeśli chcemy stworzyć na szybko MVP lub nasz pomysł nie wymaga osobnego zespołu backendowego bo robimy prostego CRUD’a? Może warto wtedy skorzystać z rozwiązań BaaS - na przykład Firebase’a?

\n\n

BaaS - Backed as a Service

\n\n

Backend as a Service czyli BaaS jest rozwiązaniem chmurowym, które dostarcza nam najczęściej bazę danych, system autoryzacji i wystawia API do którego możemy się łączyć z poziomu naszego klienta - aplikacji webowej, urządzenia mobilnego czy nawet gier. Dzięki takiemu rozwiązaniu nie potrzebujemy sami tworzyć aplikacji backendowej, spinać jej z bazą danych, hostować ją jakimś serwerze (nie zapominając oczywiście o poprawnym skonfigurowaniu). Patrząc na to ile może to zająć czasu (szczególnie jeśli nie pracujemy na co dzień na backedzie) i ilość problemów jaka może wyskoczyć, BaaS jest idealnym rozwiązaniem dla programistów frontendu kiedy nie mają pod ręką osoby od backendu

\n\n

Firebase

\n\n

Firebase jest rozwiązaniem BaaS od Google’a i oferuje następujące funkcjonalności:

\n\n
    \n
  • System uwierzytelniania użytkowników
    • \n
  • Baza danych NoSQL
    • \n
  • Storage do przechowywania plików
    • \n
  • Hosting
    • \n
  • ML Kit
    • \n
  • Cloud functions
    • \n
\n\n

Warto wspomnieć, że darmowy plan Firebase’a pozwala na skorzystanie ze wszystkich tych usług - są one ograniczone ale pozwala nam to przetestować istniejące tam rozwiązania. Dzięki temu możemy testować własne pomysły oraz uruchamiać je dla małej ilości użytkowników. Jeśli rozwiązanie się sprawdzi możemy stworzyć własne rozwiązania lub zapłacić za lepszy plan i dalej korzystać z Firebase’a - korzystają z niego np.: Dulingo czy Trivago.

\n\n

Kolejny atut Firebase’a to możliwość wykorzystania go na różnych platformach. Platforma posiada odpowiednie biblioteki dla Androida, iOS’a (wersje dla Swift’a i Objective-C), aplikacji webowych, Unity czy nawet dla języka C++. W ten sposób możemy tworzyć rozwiązania, które łączą ze sobą wiele urządzeń np.: sensor, który wysyła dane do Firebase’a wraz z aplikacją i panelem internetowych do odczytywania tych danych i nawet sterowania urządzeniem.

\n\n

Osobiście rozwiązanie to bardzo mi się podoba i pobawię się nim trochę więcej. Jestem również ciekawy czy wy korzystaliście z Firebase’a lub z innych odpowiedników tego serwisu? Stosujecie to na produkcji czy tylko do prototypowania? Jak się z tym pracuje? I najważniejsze na jakiej platformie z tego korzystacie: urządzenia mobilne, web czy są też tacy co implementowali to w C++?

2019-10-15 15:00:00 firebase-backend-dla-frontendu ckhxjb6o0000yi3umb3hg09jv 2019-10-15 15:00:00 2019-10-15 15:00:00 ck2bzzbjc01rqi3um6ijf6m7n Typescript - any vs unknown https://fsgeek.pl/post/typescript-any-vs-unknown/

Dużo ludzi wybiera Typescripta z powodu przewagi oraz bezpieczeństwa jakie daje typowanie. Jednak nie wszystkie biblioteki i wbudowane funkcje mają dobrze opisane typy i możemy się natknąć na typ any. Jak możemy się przed nim bronić i jak może nam w tym pomóc typ unknown?

\n\n

Any

\n\n

Skoro tak lubimy poczucie bezpieczeństwa, które daje nam typowanie dlaczego mamy taki typ jak any. Jest to związane z tym, że Typescript jest nadzbiorem dla JS’a. W związku z tym ciągle mamy możliwość korzystania z jego API, któremu czasami nie da się statycznie przypisać typów np.: JSON.parse(…) jako typ zwracany daje any.

\n\n

Co tak naprawdę powoduje przypisanie do zmiennej typu any? Oznacza to tyle, że wyłączamy sprawdzanie typów i mamy pełną władzę nad zmienną. Typescript nie będzie nam sygnalizował błędów więc istnieje szansa na błąd wystąpi w trakcie korzystania z aplikacji.

\n\n
const a: any = 'test'\na.someMethod(); //OK
\n\n

Kolejna rzecz to jesteśmy w stanie typ any przypisać do dowolnego innego typu\n \n

 \nconst a: any = 1 // OK\nconst var1: any = a; // OK\nconst var2: unknown = a; // OK\nconst var3: string = a; // OK\nconst var4: number = a; // OK\nconst var5: object = a; // OK\nconst var6: boolean = a; // OK \nconst var7: Array<number> = a // OK;

\n\n

To znowu może powodować błędy w aplikacji. Jeśli przypiszemy zmienną any do określonego typu bez sprawdzenia może się okazać, że dalej w aplikacji dostajemy nieprawidłową daną mimo, że mamy wszystko dobrze otypowane i taka sytuacja nie powinna mieć miejsca.

\n\n

Unknown

\n\n

Trochę lepszy jest typ unknown, który został wprowadzony w Typescript 3.0 jako bardziej bezpieczny odpowiednik any. Ciągle do zmiennej tego typu możemy przypisać dowolną wartość ale w odróżeniu od any nie możemy wywołać dowolnej metody\n

const a: unknown = 'test'\na.someMethod(); //ERROR

\n\n

Różnica pojawia się gdy chcemy rzutować naszą zmienną na określony typ. Tak jak w przypadku any mogliśmy to robić i nie było żadnych błędów tak tutaj Typescript nam nie pozwoli na taką operację dopóki nie będzie pewny, że może ją bezpiecznie przeprowadzić\n

 \nconst a: unknown= 1 // OK\nconst var1: any = a; // OK\nconst var2: unknown = a; // ERROR\nconst var3: string = a; // ERROR\nconst var4: number = a; // ERROR\nconst var5: object = a; // ERROR\nconst var6: boolean = a; // ERROR\nconst var7: Array<number> = a; // ERROR

\n\n

Jak możemy w takim razie przypisać zmienną unknown to określonego typu. Pierwsze rozwiązanie to wykorzystanie mechanizmu typeof z czystego JS’a

\n\n
const a: unknown = 'foo'\nif (typeof a === 'string') {\n    const var1: string = a\n}
\n\n

Inny sposób to w jawny sposób wymuszenie typu przy pomocy konstrukcji as

\n\n
const a: unknown = 'foo'\nconst var1: string = a as string;
\n\n

To rozwiązanie może być niebezpieczne ponieważ możemy wymusić niepoprawny typ i aplikacja nam się wywali w niespodziewanym momencie

\n\n
const a: unknown = 'foo'\nconst var1: any[] = a as any[];
\n\n

Kolejny sposób to znane w Typescripcie Type Guards, które są szczególnie przydatne gdy mamy własne rozbudowane typy\n

 \ninterface MyObject {\n    a: string, \n    b: string\n}\nconst a: unknown = {\n    a: 'foo',\n    b: 'bar'\n}\nfunction isMyObject(pet: any): pet is MyObject {\n    return (pet as MyObject).a !== undefined;\n}\nif (isMyObject(a)) {\n    const var1: MyObject = a;\n}

\n\n

Jak widać unknown daje nam podobną elastyczność przy tworzeniu zmiennych ale pilnuje nas żebyśmy nie mogli nieświadomie przypisać do poprawnie otypowej zmiennej. Kiedy powinniśmy tego używać? Wszędzie tam gdzie potrzebujemy korzystać z typu any oraz na obrzeżach aplikacji gdzie stan może być nieokreślony. W środku aplikacji już zachęcam do niekorzystania z typu any - typowanie aplikacji wtedy traci na jakości.

2019-10-29 15:20:09 typescript-any-vs-unknown ckhxjb6o0000yi3umb3hg09jv 2019-10-29 15:20:09 2019-10-29 15:20:09 ck2snr7eo01sbi3um02ka2ex8 ConFront JS 2019 - konkurs https://fsgeek.pl/post/confrontjs2019-konkurs/

Jak wspomniałem na fanpage’u zostałem patronem medialnym tegorocznej konferencji frontendowej ConFront JS. Z tej okazji mam dla was mały konkurs w którym możecie wygrać bilet na tę konferencję. Zapraszam do czytania i wzięcia udziału.

\n\n

ConFront JS

\n\n

Konferencja ConFront JS 2019 odbywa się w Warszawie 7 grudnia - jedna sala i jeden dzień pełen ciekawych wykładów.

\n\n

banner confronjs2019

\n\n

Jeśli nie słyszeliście o tej konferencji to koniecznie zerknijcie na agendę - jeśli was przekonuje to ciągle możecie kupić bilety lub wziąć udział w konkursie i wygrać bilet za darmo.

\n\n

Konkurs

\n\n

Teraz najważniejsze czyli konkurs. Konkurs jest prosty i polega na napisaniu maila na blog@fsgeek.pl z odpowiedzą na pytanie:

\n\n

Co byś zmienił lub dodał do języka JavaScript i dlaczego?.

\n\n

W konkursie do wygrania są dwa bilety na konferencję. Konkurs trwa od momentu pojawienia się postu i trwa do piątku 15.11.2019 godziny 23:59:59. Autorzy dwóch najlepszych według mnie odpowiedzi dostaną bilet w sobotę 16.11.2019. Odpowiedzi, które wygrają zostaną potem umieszczone w poście.

\n\n

Jeśli nie wygracie biletu lub nie wierzycie w wygraną to nie musicie się martwić - ciągle możecie wykorzystać kod promocyjny full-stack-geek-25 Powodzenia :)

2019-11-10 07:10:00 confront-js-2019-konkurs ckhxjb6o0000yi3umb3hg09jv 2019-11-10 07:10:00 2019-11-10 07:10:00 -ck2u4mwl401sdi3um14kp4al9 Typecript 3.7 - Optional Chaining i Nullish Coalescing https://fsgeek.pl/post/optional-chaining-nullish-coalescing/

Ostatnio wyszedł Typescript 3.7, który zawiera kilka oczekiwanych przez programistów funkcjonalności. Dziś chciałbym opowiedzieć o dwóch nowościach na które sam czekałem i które mogą uprościć tworzony przez nas kod czyli Optional Chaining i Nullish Coalescing.

\n\n

Optional chaining

\n\n

Na sam początek funkcjonalność, którą możemy znaleźć np.: w języku Swift i pozwala na bardziej zwięzłe pisanie kodu. Kiedy piszemy kod i opakowujemy dane w obiekty mamy możliwość korzystania z opcjonalnych pól np.:

\n\n
interface Obj {\n    a: string,\n    b?: {\n        a: string,\n        b?: {\n            a: string\n        }\n    }\n}\n\nconst obj:Obj = {\n    a: 'a',\n    b: {\n        a: 'a',\n        b: {\n            a:'a'\n        }\n    }\n}
\n\n

Problem pojawia się gdy chcemy się dostać do tych wartości. Aby to zrobić musimy sprawdzić czy nasze pola faktycznie mają odpowiednią wartość

\n\n
 obj.b.a //Object is possibly 'undefined'.\n\nif (obj.b) {\n    obj.b.a\n}\n\nif (obj.b && obj.b.b) {\n    obj.b.b\n}
\n\n

Dzięki nowej funkcjonalności jesteśmy w stanie skrócić powyższy zapis do czytelniejszej formy

\n\n
obj.b?.a\nobj.b?.b?.a
\n\n

Jeśli pola obj.a i obj.b.b są różne od null lub undefined to dostaniemy wartość zmiennej, która znajduje się w tym obiekcie. Jeśli w którymkolwiek momencie okaże się, że zmienne nie posiadają wartości to dostaniemy w wyniku wartość undefined

\n\n
 \nconst obj:Obj = {\n    a: 'a',\n    b: {\n        a: 'a',\n    }\n}\n\nobj.b?.b?.a // undefined
\n\n

Oprócz możliwości dostania się do pola w obiekcie możemy również wykorzystać to do odwołania się do elementu w tablicy

\n\n
 interface Tab {\n    a?: number[]\n}\n\nconst obj2: Tab = {\n    a: [0,1]\n}\n\nobj2.a[0] // Object is possibly 'undefined'.\nobj2.a?.[0]
\n\n

Ostatnia możliwość to wywołanie funkcji

\n\n
interface Fun {\n    a?: ()=>void\n}\n\nconst obj3: Fun = {\n    a: () => { }\n}\n\nobj3.a() // Object is possibly 'undefined'.\nobj3.a?.()
\n\n

Nullish Coalescing

\n\n

Druga nowość to Nullish Coalescing o którym myślę jako domyślnej wartości. Do tej pory mogliśmy ustawiać domyślną wartość na dwa sposoby

\n\n
    value ? value : default\n    value || default
\n\n

Oba sposoby mogą jednak powodować niechciane efekty uboczne np.:\n

const example = 0;\nconst defaultValue = 1;\n\nconsole.log(example ? example : defaultValue);\nconsole.log(example || defaultValue)

\n\n

Nawet jeśli dopuszczamy wartość 0 jako poprawną to taki zapis powoduje, że zostanie ona zastąpiona wartością domyślną. Oczywiście da się temu zapobiec dodając dodatkowe warunki ale wydłuża to niepotrzebnie kod. Nowy Nullish Coalescing zwróci wartość domyślną tylko jeśli zmienna ma wartość null lub undefined. W każdym innym przypadku będzie to oryginalna wartość zmiennej

\n\n
console.log(null ?? 1); // 1\nconsole.log(undefined ?? 1); //1\nconsole.log(0 ?? 1); //0\nconsole.log(NaN ?? 1); //NaN\nconsole.log('' ?? 1); // ''
\n\n

A jak wam się podobają nowe funkcjonalności? Zaktualizowaliście już Typescript’a w waszych projektach? Będziecie używać tych funkcjonalności czy może już z nich korzystacie? No i najważniejsze - za chwilę te nowości będą też dostępne w czystym JavaScript.

2019-11-11 07:50:19 typecript-37-optional-chaining-i-nullish-coalescing ckhxjb6o0000yi3umb3hg09jv 2019-11-11 07:50:19 2019-11-11 07:50:19 -ck42wlmao01u5i3um2wakg347 Quokka - szybkie prototypy w twoim edytorze https://fsgeek.pl/post/quokka-szybkie-prototypy-w-twoim-edytorze/

Czasami podczas tworzenia aplikacji musimy na szybko sprawdzić kawałek kodu. Możemy do tego wykorzystać naszą przeglądarkę i konsolę by sprawdzić wyrażenie lub na szybko coś przetestować. A może możemy przenieść konsolę z przeglądarki do naszego edytora?

\n\n

Quokka

\n\n

Ja osobiście bardzo często wykorzystuję konsolę w przeglądarce by na szybko sprawdzić jakiś pomysł lub czy dana konstrukcja zadziała i dostanę taki wynik jaki oczekuję. I tak jak świetnie to się sprawdza w przypadku np.: operacji na elementach tablicy tak ciężko jest to wykorzystać by sprawdzić konkretną bibliotekę. Mnie najczęściej się to zdarza gdy wykorzystuję bibliotekę do operacji na datach (lub czasie) np.: date-fns czy moment i potrzebuję sprawdzić czy funkcja zwraca mi to co potrzebuję. I tutaj idealnie sprawdza się rozwiązanie, które znalazłem ostatnio czyli Quokka. Przenosi ona konsolę do naszego IDE wraz z dodatkowymi możliwościami. Jedną z tych istotnych jest dla mnie właśnie możliwość importowania bibliotek, które mamy w projekcie. Oczywiście można też kupić wersje PRO, która dodaje kolejne funckjonalności między innymi opcję importowania plików, które sami stworzyliśmy w projekcie.

\n\n

Instalacja w WebStorm

\n\n

Instalacja w WebStorm jest banalnie prosta i sprawdza się do zainstalowania pluginu Quokka. Teraz wystarczy, że wykorzystamy istniejący w IDE mechanizm Scratches

\n\n

scratches

\n\n

W momencie gdy dodamy tam plik to automatycznie uruchomi się tam Quokka i będzie wyświetlała nam zawartość kolejnych zmiennych i wyrażeń z których będziemy korzystać.

\n\n

resultfile

\n\n

Jak widać nie musimy nawet opakowywać zmiennych w console.log by zobaczyć co jest w środku

\n\n

Instalacja w Visual Studio Code

\n\n

Podobnie jak w Webstorm tutaj instalacja sprowadza się do zainstalowania odpowiedniego pluginu. Następnie przy pomocy palety komend (Ctrl/Cmd + Shift + P) musimy wpisać Quokka: New File co stworzy opowiedni plik i podepnie do niego plugin.

\n\n

scratches

\n\n

Jednak tutaj jakbyśmy chcieli zapisać ten plik i zostawić go sobie na póżniej to zostanie on zapisany w naszym projekcie - Webstrom z mechanizmem Scratches ma to troszke lepiej to rozegrane bo nasze testy i pliki projektu są rozdzielone.

\n\n

Co myślicie o takim rozwiązaniu jako zastąpieniu konsoli na potrzeby testowania funkcjonalności Javascriptu oraz bibliotek? Oczywiście nie jesteśmy w stanie testować np.: operować na elementach w drzewie DOM. Jednak jeśli nie potrzebujemy tego lub piszemy aplikacje w Node.js i musimy coś przetestować to jak dla mnie jest to naprawdę dobre rozwiązanie i warto mieć to w swoim IDE. Od jakiegoś czasu z tego korzystam i musze przyznać, że bardzo mi się podoba Quokka i co najważniejsze sprawdza się podczas pisania kodu.

2019-12-12 15:55:00 quokka-szybkie-prototypy-w-twoim-edytorze ckhxjb6o0000yi3umb3hg09jv 2019-12-12 15:55:00 2019-12-12 15:55:00 -ck4a1g0o001udi3um6y1r1o5r ES2020 - co nowego nas czeka? https://fsgeek.pl/post/es2020-co-nowego-nas-czeka/

Wielkimi krokami zbliża się do nas Nowy Rok a wraz z nim nowe funkcjonalności w JavaScript. Czy wiemy czego możemy się spodziewać? I czy warto na to czekać? Co się zmieni w tym popularnym języku i jak to wpłynie na sposób w jakim piszemy kod?

\n\n

Optional chaining i Nullish coalescing

\n\n

O optional chaining i nullish coalescing pisałem już gdy ta funkcjonalność pojawiła się w Typescript. W nowej wersji JS’a będzie wyglądało to identycznie więc zapraszam do tamtego postu jeśli chcecie poznać szczegóły - znajdziecie go tutaj

\n\n

BigInt

\n\n

Następna nowość nie jest tak spektakularna ale może być przydatna w niektórych zastosowaniach(na razie nie miałem sytuacji gdzie by to się przydało ale kto wie co przyniesie przyszłość). BigInt pozwala na przechowywanie liczb całkowitych, które są większe od 2^53. Możemy zadeklarować zmienną tego typu na dwa sposoby:

\n\n
const a = BigInt(10)\nconst b = 10n\ntypeof(a) // "bigint"\ntypeof(b) // "bigint"\n
\n\n

Pomimo tego, że jest to ciągle liczba całkowita to ma zupełnie inny typ niż to co wykorzystywaliśmy do tej pory. Warto o tym pamiętać gdy będziemy mieszać obie koncepcje i będziemy próbować porównać dwie zmienne:

\n\n
const a = 10\nconst b = 10n\na == b  // true\na === b // false\n
\n\n

Ciągle mamy do czynienia z liczbami całkowitymi więc operacje matymatyczne będą działały poprawnie - jedyne ograniczenie to nie możemy mieszać operacji pomiędzy Number a BigInt

\n\n
const a = BigInt(10)\nconst b = 9\n\nconst c = a + 1n // 11\n\nconst d = a + b // Cannot mix BigInt and other types, use explicit conversions\n
\n\n

Ale za to możemy porównywać je między sobą - dzięki temu możemy spokojnie umieszczać je razem w tablicy i np.: sortować

\n\n
const a = BigInt(10)\nconst b = 9\n\na < b // false\na > b // true\n
\n\n

Promise.allSettled

\n\n

Jedna z nowości na którą czekam z niecierpliwością. Promise.allSettled jest jedną z 4 funkcji, które pozwalają nam pracować z Promise’ami. Do tych funkcji zaliczamy:

\n\n
    \n
  • Promise.all - zwraca wynik gdy wszystkie Promise’y zakończą się sukcesem lub przynajmniej jeden zakończy się błędem
    • \n
  • Promise.race - zwraca wynik pierwszego udanego Promise’a lub błędu
    • \n
  • Promise.allSettled - nowość w następnej wersji JS’a - patrz niżej
    • \n
  • Promise.any - póki co jest to na etapie propozycji - będzie zwracało wartość pierwszego poprawnie rozwiązanego Promise’a ale nie będzie się zatrzymywało na błędzie\n
    • \n
\n\n

Promise.allSettled będzie działał podobnie do Promise.all ale nie będzie przerywany po wystąpieniu błędu. Zamiast tego po zakończeniu wszystkich Promise'ów (niezależnie czy zakończy się statusem fullfiled czy rejected) dostaniemy tablicę obiektów. Każdy obiekt reprezentuje pojedynczy Promise i zwiera informacje jak się zakończył oraz z jaką wartością

\n\n
Promise.allSettled([Promise.resolve(1), Promise.reject(2), Promise.resolve(3)]).then(console.log)\n\n/*\n0: {status: "fulfilled", value: 1}\n1: {status: "rejected", reason: 2}\n2: {status: "fulfilled", value: 3}\n*/\n
\n\n

import()

\n\n

Kolejna dodana rzecz to jest dynamiczny import() - nie należy go mylić z importem, który spotykamy w modułach JS. import() pozwala na dynamiczne ładowanie kodu JS w trakcie trwania programu np.: na skutek jakieś akcji na stronie np.: naciśnięcia przycisku. Dodatkowo samo polecenie jest asynchroniczne więc będziemy je obsługiwać przy pomocy then().catch()

\n\n
import('path_to_script.js')\n        .then(module => {\n          //obsługa skryptu\n        })\n        .catch(err => {\n          //obsługa błędu\n        });\n
\n\n

globalThis

\n\n

Na sam koniec coś co może nie wygląda jako super funkcjonalność ale może ułatwić życie osobom piszącym biblioteki, które mogą być używane w różnych środowiskach i korzystają z globalnego this. This w zależności od środowiska, w jakim program będzie uruchomiony, będzie wskazywał na inny element np.:

\n\n
    \n
  • W przeglądarce this == window
    • \n
  • W node.js this == global
    • \n
\n\n

Jeżeli nasza biblioteka korzysta z tego globalnego this to aktualnie musimy wykonywać kawałek brzydkiego if’a by mieć pewność do czego się odwołujemy. Teraz będzie to łatwiejsze i zunifikowane we wszystkich miejscach

\n\n

Na co jeszcze poczekamy?

\n\n

A co nasz czeka w dalszej przyszłości? W Stage 3 są już propozycje dodania prywatnych zmiennych oraz metod, statycznych pól i metod w klasach oraz top-level await. Jest tam też już propozycja dla Promise.any o którym pisałem wyżej. Nieco dłużej możemy poczekać na dekoratory, które dopiero są na Stage 2.

\n\n

A co wam się podoba najbardziej z nadchodzących nowości? Jak dla mnie jest to na pewno optional chaining, nullish coalescing oraz Promise.allSettled. Są to przykłady zmian, które pomogą pisać bardziej zwięzły kod - a im mniej kodu tym mniej okazji by się pomylić. Chciałbym też by wspomniane przez ze mnie fukcjonalności, które nie wejdą w tym roku weszły jak najszybciej ale tutaj trzeba uzbroić się w cierpliwość. Dodalibyście coś jeszcze do tej listy?

2019-12-17 15:45:00 es2020-co-nowego-nas-czeka ckhxjb6o0000yi3umb3hg09jv 2019-12-17 15:45:00 2019-12-17 15:45:00 -ck4tkn39c01uri3um4vf627ay Podsumowanie 2019 i plany na 2020 https://fsgeek.pl/post/podsumowanie-2019-i-plany-2020/

To już prawie tradycja, że w ostatnim poście w roku tworzę krótkie podsumowanie mijającego roku i snuję plany na przyszły rok. Jak więc wyszedł mi ten rok na blogu i jakie są plany na przyszły?

\n\n

Rok 2019 na blogu

\n\n

Tak jak pisałem w zeszłorocznym podsumowaniu w tym roku skupiłem się na języku JavaScript(oraz Typescript) i myślę, że mi się to udało. Przez 12 miesięcy udało mi się napisać 31 postów co jest dla mnie naprawdę dobrym wynikiem, który zamierzam oczywiście poprawić. Jakie posty wyszły w tym roku:

\n\n\n\n

Liczba oraz tematyka postów przełożyła się na ilość użytkowników na blogu, których było prawie o 100% więcej niż w poprzednim roku i wyniosła prawie 33 tys. Dodatkowo zwiększyła się liczba odsłon do liczby prawie 61 tys. Wzrost liczby czytelników widzę również na fanpage’u - liczba polubień strony wzrosła o 141 osób natomiast liczba obserwujących o 164 osoby. To właściwie wasza zasługa więc bardzo dziękuję za każdy lajk czy udostępnienie moich postów.

\n\n

Na sam koniec muszę jeszcze wspomnieć o miłej niespodziance jaka mnie spotkała czyli okazji by pod koniec roku być patronem medialnym dla konferencji ConFrontJs 2019.

\n\n

Plany na 2020

\n\n

W tym roku chcę się ciągle skupić na tematyce związanej z JavaScript i TypeScript na blogu. Jestem pewien, że będzie tam wiele interesujących tematów o których mogę pisać. Dodatkowo w drugiej połowie roku mam zaplanowane odświeżenie wyglądu stronu i zabranie się bardziej poważnie za identyfikację graficzną strony jak i fanpage’ów. Oczywiście ciągle priorytetem będzie dla mnie pisanie ciekawych artykułów. Mam również zamiar trochę więcej pisać na tematy miękkie i związane ogólnie z programowaniem niż konkretnie z językiem. Zobaczymy co z tego wyjdzie a póki co życzę wam udanego Nowego Roku. A wy macie jakieś plany noworoczne związane z programowaniem? Jakiś nowy język, technika a może nauczenie się wszystkich wzorców projektowych?

2019-12-31 07:50:00 podsumowanie-2019-i-plany-na-2020 ckhxjb6o0000yi3umb3hg09jv 2019-12-31 07:50:00 2019-12-31 07:50:00 -ck5pgkyqo01vni3umf93vcmtw Generowanie plików z Plop https://fsgeek.pl/post/generowanie-plikow-z-plop/

Narzędzia CLI są wszechobecne i trzeba przyznać, że ułatwiają nam życie. Dzięki nim jesteśmy w stanie zautomatyzować wiele rzeczy i skupić się na tym co istotne czyli warstwie biznesowej. Jednym z zadań, które CLI wykonują jest automatyczne tworzenie plików, wypełnionych początkową treścią. Jak w krótkim czasie możemy sobie sami stworzyć taką funkcjonalność?

\n\n

Podejście proste

\n\n

Najprostsze podejście nie wymaga żadnych bibliotek tylko odrobinę wiedzy i znajomości Regex’a. Możemy wykorzystać wbudowane w Node.js funkcje by odczytać plik i następnie przy pomocy różnych Regexów podmienić wartości na takie jakie chcemy. Jaki jest problem takiego rozwiązania? Po pierwsze musimy sami budować CLI, dbać o walidację danych oraz o całą resztę procesu. Jednak te rzeczy można by zautomatyzować by dało się szybciej tworzyć nowe szablony. I do tego celu możemy wykorzystać bibliotekę Plop

\n\n

Plop

\n\n

Standardowo zacznijmy od instalacji

\n\n
npm install --save-dev plop
\n\n

Teraz możemy w naszym projekcie wykorzystywać polecenie plop. Jednak to nie wszystko. Aby całość działała poprawnie potrzebujemy jeszcze pliku konfiguracyjnego gdzie zdefiniujemy sobie co i jak chcemy tworzyć. Plik powinien mieć nazwę plopfile.js i być w głównym katalogu projektu. Sam plik ma prostą strukturę, która wygląda następująco:

\n\n
module.exports = function (plop) {\n}\n
\n\n

A co możemy umieścić wewnątrz obiektu? Możemy tutaj dodać 4 rodzaje elementów:

\n\n
    \n
  • setGenerator - tworzy generator
    • \n
  • setHelper - tworzy helper, który możemy wykorzystywać w naszych szablonach (np.: modyfikacja tekstu)
    • \n
  • setPartial - tworzy kawałek kodu, który możemy wykorzystywać w szablonach (np.: często powtarzający się kawałek kodu)
    • \n
  • setActionType - tworzy naszą własną akcję
    • \n
  • setPropmt - tworzy nasz nowy prompt
    • \n
  • load - ładuje dane z innego plopfile’a lub npm’a
    • \n
\n\n

Hello World

\n\n

Jak widać biblioteka ma ogromne możliwości. Sam jeszcze nie bawiłem się wszystkimi dlatego dziś tylko prosty przykład - ale już tyle wystarczy by zautomatyzować pracę. Standardowo przy nauce nowego języka piszemy słynne hello world dlatego tu też podejdziemy tradycyjnie. Zacznijmy od setGenerator:

\n\n
module.exports = function (plop) {\n    plop.setGenerator('hello-world',{\n        description: 'hello.txt file',\n        prompts: [],\n        actions:[]\n    })\n}
\n\n

Pierwsza wartość jest nazwą generatora i będzie potem przez nas używana do przy wywoływaniu komendy. Potem mamy opis. Prompts jest jedną z bardziej interesujących sekcji w tej konfiguracji. Wpisujemy tutaj obiekty które konfigurują pytania w konsoli tworzone przy pomocy biblioteki Inquirer.js - to znaczy, że możemy wpisać tutaj wszystko co daje ta biblioteka. No i na sam koniec Actions czyli co ma zrobić biblioteka na podstawie danych wpisanych przez użytkownika. Mamy tutaj dostępnych kilka opcji:

\n\n
    \n
  • Add
    • \n
  • AddMany
    • \n
  • Modify
    • \n
  • Append
    • \n
  • Custom
    • \n
\n\n

To teraz możemy stworzyć pierwszy szablon wraz z zawartością

\n\n
Hello {{ name }}\n
\n\n

Tekst oznaczony przy pomocy {{ }} będzie zamieniony na podstawie danych podanych przez użytkownika. Muszą się one zgadzać ze zmiennymi, które ustawimy w prompts. No i na koniec trzeba jeszcze wypełnić pola prompts i actions

\n\n
module.exports = function (plop) {\n    plop.setGenerator('hello-world',{\n        description: 'hello.txt file',\n        prompts: [\n            {\n                type: 'input',\n                name: 'name',\n                message: 'What is your name',\n                validate: (value)=>value.length >0 ? true : 'name is required'\n            }\n        ],\n        actions:[\n            {\n                type: 'add',\n                path: './{{name}}.txt',\n                templateFile: 'templates/hello.txt',\n                abortOnFail: true\n            },\n        ]\n    })\n}\n
\n\n

Teraz wystarczy, że to uruchomimy. Mamy tutaj dwie opcję: zainstalujemy bibliotekę plop globalnie albo dodamy sobie wpis w sekcji scripts "plop": "plop" . Ja osobiście preferuję drugą opcję.\n

npm run plop hello-world

\n\n

Dzięki temu uruchomimy nasz nowy generator i po wypełnieniu danych powstanie nam nowy plik zgodnie z ustawieniami. Gdzie możemy coś takiego wykorzystać? Na pewno podczas tworzenia nowych komponentów możemy to wykorzystać do tworzenia kompletu plików: komponent, kontener, typowanie, testy wraz z minimalnym szablonem. Drugi przykład to dodawnie nowego obiektu do store w redux gdzie dodajemy model, akcje, typowania itd. Poprawnie wykorzystanie plop.js może znacząco przyspieszyć tworzenie oprogramowania przez nas i wyeliminować powtarzalne oraz nudne elementy.

2020-01-22 15:25:00 generowanie-plikow-z-plop ckhxjb6o0000yi3umb3hg09jv 2020-01-22 15:25:00 2020-01-22 15:25:00 -ck6kxcaao01wki3um0oqhak7u Cypress - proste testy e2e https://fsgeek.pl/post/cypress-proste-testy-e2e/

Testy są integralną częścią tworzenia oprogramowania, pomagając nam nie tylko w pisaniu dobrego kodu ale również zabezpieczają nas przed błędami w przyszłości. Zazwyczaj na frontendzie piszemy testy jednostkowe testując logikę pojedynczego komponentu. A może moglibyśmy też pisać testy e2e?

\n\n

Testy e2e

\n\n

Testy piszemy coraz częściej - mam wrażenie, że powoli staje się to standardem, co jest pozytywną zmianą. Tak jak na backendzie korzystają z pełnej gamy testów tak na frontendzie najczęściej spotykam się z testami jednostkowymi. A czasami niektóre rzeczy, szczególnie w przypadku skomplikowanych systemów, łatwiej jest sprawdzić przy pomocy e2e. Do tej pory spotykałem się z opinią, że testy e2e piszą testerzy automatyczni. Uważam, że również jako programiści frontendu powinniśmy zacząć je pisać. Po pierwsze niektóre elementy będzie nam łatwiej przetestować, po drugie wprowadzamy dodatkowe zabezpieczenie czy główne ścieżki aplikacji działają, po trzecie jesteśmy w stanie to podpiąć do CI i sprawdzać zawsze gdy merdżujemy do mastera. Potrzeba więcej powodów by zacząć pisać te testy? Myślę, że nie. A idealnie do tego sprawdzi się Cypress.

\n\n

Pierwsze kroki

\n\n

Zanim zaczniemy pisać pierwsze testy e2e musimy zainstalować i przygotować nasze środowisko. Instalacja polega na wpisaniu w konsoli polecenia

\n\n
npm i cypress --save-dev\n
\n\n

Teraz musimy chwilę poczekać ponieważ oprócz biblioteki instaluje się też aplikacja desktopowa, która będzie odpowiedzialna za uruchamianie naszych testów. Warto jeszcze wpisać do pliku package.json polecenie, które będzie uruchamiało cypressa

\n\n
  "scripts": {\n    "cypress:open": "cypress open"\n  },\n
\n\n

Jeśli teraz uruchomimy polecenie to oprócz tego, że uruchomi okno to stworzy nam również całą strukturę folderów wraz z przykładowymi testami. Możemy sobie to zostawić by zerkać na to gdy nie będziemy wiedzieć jak wykorzystać polecenia z cypressa lub też usunąć ponieważ identyczny opis jest na przykładowej stronie. Domyślne foldery prezentują się następująco:

\n\n
/cypress\n  /fixtures\n  /integration\n    /examples\n    /login\n    /order\n  /plugins\n  /support
\n\n
    \n
  • Fixtures - tutaj możemy umieścić statyczne dane, których będziemy używali podczas testów
    • \n
  • Integration - domyślnie Cypress szuka tutaj testów, możemy tutaj umieszczać kolejne katalogi by rodzielić pliki
    • \n
  • Plugins - służą do zmiany zachownia Cypressa, uruchamiane są przed każdym plikiem testowym
    • \n
  • Support - służą do definiowania zachowania, które jest wspólne dla wszystkich testów i powinno być uruchomiane przed testami np.: ładowanie fixtur
    • \n
\n\n

Pierwszy test w Cypress

\n\n

Jak mamy projekt to nie ma problemu co można testować. Jednak do nauki nie ma potrzeby tworzenia całej aplikacji tylko można wykorzystać jakąś istniejącą. Ja tutaj wykorzystałem przykładową stronę od Cypressa. No to napiszmy pierwszy test. Ogólny szablon jest prosty i jeśli kiedykolwiek pisaliście jakieś testy na frontendzie to będzie wam znany

\n\n
describe('description for set of tests', ()=>{\n    it('what test do', ()=>{\n    })\n})\n
\n\n

W każdym pliku będziemy mieli sekcję description wraz pewną ilością sekcji it. Teraz zostaje jeszcze do uzupełnienia zawartość sekcji it

\n\n
it('check if click redirect to correct url', ()=>{\n        //Given\n        cy.visit('https://example.cypress.io');\n        //when\n        cy.contains('a','click').click();\n        //then\n        cy.url().should('include', '/commands/actions')\n    })\n
\n\n

Ogólny schemat będzie zawsze taki sam:

\n\n
    \n
  • Given - przygotowujemy wartości początkowe np.: udajemy się na docelową stronę
    • \n
  • When - wykonujemy akcję, którą chcemy sprawdzić np.: kliknięcie na przycisk wyloguj
    • \n
  • Then - sprawdzamy czy wynik przeprowadzonej akcji jest zgodny z oczekiwaniem np.: użytkownik został przekierowany na odpowiednią stronę, zobaczył komunikat itd.
    • \n
\n\n

W naszym przypadku chcemy sprawdzić czy po kliknięciu na link przeniesie nas na odpowiednią stronę. Żeby to przetestować musimy najpierw wejść na odpowiednią stronę (cy.visit). Następnie szukamy elementu a, który ma w sobie tekst click. Jeśli wszystko działa poprawnie to zostaniemy przeniesieni na nową stronę. Warte zauważenia jest, że nigdzie nie musiałem robić dodatkowych importów by móc korzystać z obiektu cy, który zawiera zestaw przydatnych funkcji z których będziemy korzystać przy pisaniu testów. Schemat jaki tutaj zastosowałem może się bardzo często się powtarzać - to co się zmieni to element którego szukamy i wynik jaki ma być na końcu.

\n\n

Jak widać w teorii to nie jest ciężkie. Jednak przy prawdziwych projektach może nie być tak prosto - zdarzają się scenariusze przy których trzeba pogłówkować, przynajmniej na początku. Ale z czasem jak będziemy pisać regularnie testy to pisanie ich będzie prostsze i przyjemniejsze. A wy piszecie testy e2e lub integracyjne na frontendzie? Korzystacie z Cypressa czy czegoś innego?

2020-02-13 15:55:00 cypress-proste-testy-e2e ckhxjb6o0000yi3umb3hg09jv 2020-02-13 15:55:00 2020-02-13 15:55:00 -ck79cgy5c01x6i3umc0gp7dgz ESLint - statyczna analiza kodu w JavaScript https://fsgeek.pl/post/eslint-statyczna-analiza-kodu-javascript/

Narzędzia do statycznej analizy kodu występują w każdym języku programowania. W JavaScript jednym z takich narzędzi jest ESLint. Pomaga nam nie tylko utrzymać czysty kod ale niejednokrotnie zapobiega powstawaniu błędów. I tyle wystarczy by być obowiązkowym elementem każdego projektu.

\n\n

ESLint

\n\n

ESLint jest biblioteką, która powstała 7 lat temu i pozwala definiować reguły dotyczące kodu. Bilbioteka sama w sobie nie narzuca żadnych konkretnych reguł tylko daje użytkownikom narzędzia do ich samodzielnego zdefiniowania. Oczywiście oprócz możliwości korzystania z od razu wbudowanych reguł mamy możliwość tworzenia własnych pluginów i modułów, które dostarczają nowe funkcjonalności. Sam ESLint może pracować w dwóch trybach:

\n\n
    \n
  • Sprawdzanie czy nasz kod spełnia reguły, które sobie zdefiniowaliśmy - idealne do CI/CD
    • \n
  • Automatyczna naprawa naszego kodu tak aby spełniał reguły
    • \n
\n\n

Automatyczna naprawa jest naprawdę fajną funkcjonalnością ale trzeba pamiętać, że nie zawsze naprawi błąd no i czasami są sytuacje gdzie chcemy napisać coś niezgodnego z regułami. Aby naprawić kod wystarczy, że dodamy przełącznik --fix do komendy. Kolejną zaletą ESLinta jest mocna integracja ze wszystkimi wiodącymi edytorami - potrafią one znaleźc naszą konfigurację i formatować kod według naszych reguł.

\n\n

Co z TypeScriptem?

\n\n

Do niedawna jeśli chcieliśmy skorzystać z lintera w projekcie z TypeScriptem mogliśmy skorzystać z biblioteki TSLint. Jednak w 2019 roku zdecydowano o zawieszeniu prac nad rozwojem tej biblioteki i rozwojem wsparcia dla Typescripta w samym ESLint. W tym roku przestaną być już akceptowane wszystkie PR’ki więc dla nowych projektów zdecydowanie polecam ESLinta a w przypadku starych zastanowił się czy nie warto się na niego przenieść.

\n\n

Konfiguracja ESLinta

\n\n

Zanim przjedziemy do konfiguracji samego ESLinta musimy go zainstalować

\n\n
npm install eslint --save-dev
\n\n

Teraz mamy do wyboru dwie drogi: możemy albo sami wszystko skonfigurować od zera albo skorzystać z odpowiedniego polecenia

\n\n
npx eslint --init
\n\n

Po udzieleniu odpowiedzi na kilka pytań dostaniemy wstępnie skonfigurowany plik .eslintrc, który możemy następnie dowolnie konfigurować i zmieniać. Najważniejsze ustawienia znajdziemy w opcjach plugins, extends, rules - i też z nich będziemy najczęściej korzystać.

\n\n

Podczas konfigurowania naszego pliku będziemy zaczynać od sekcji plugins - tutaj będziemy umieszczać pakiety, któee dodatkowo instalujemy i chcemy z nich skorzystać. Biblioteki te najczęściej mają nazwę w postaci eslint-plugin-nazwaPluginu .

\n\n

Sekcja extends sluży do rozszerzania naszej konfiguracji o pewien zestaw reguł. Może to być pojedyncza nazwa zestawu, którym określimy podstawy zbiór reguł np.:\n"extends": "eslint:recommended", lub też tablica kolejnych zestawów gdzie każda z pozycji będzie coś dodawała od siebie.

\n\n

No i na koniec zostawiłem sekcję rules - tutaj możemy dodawać reguły, które nie znalazły się w konfiguracji powstałej przy użyciu sekcji extends lub zmieniać sposób ich zachowania. Jest to obiekt w którym klucze są nazwami reguł, które chcemy skonfigurować, natomiast wartościami są ustawienia dla konkretnych reguł. To co możemy ustawić zależy od konkretnej reguły i zawsze musimy zajrzeć do dokumentacji. Elementem powtarzającym się w każdej regule jest definiowanie jak powinien reagować eslint na kod, który łamie regułę - mamy tutaj trzy opcje:

\n\n
    \n
  • off - reguła jest wyłączona
    • \n
  • warning - reguła będzie się wyświetlała tylko jako ostrzeżenie
    • \n
  • error - reguła będzie wyrzucała błąd
    • \n
\n\n

No to teraz jak uruchomić ESLint’a i sprawdzić nasz kod? Wykorzystujemy oczywiście polecenie eslint z odpowiednimi przełącznikami. To jakie są wszystkie możliwe opcje to można sprawdzić w dokumentacji ale na samym początku wystarczy dwa:

\n\n
    \n
  • --ext - określamy rozszerzenie plików jakie mają być sprawdzane
    • \n
  • --fix - jeśli chcemy naprawić kod\n
    • \n
\n\n

Całościowo komenda może wyglądać następująco:

\n\n
eslint src --ext .ts,.tsx\neslint src --ext .ts,.tsx --fix
\n\n

Ciekawe reguły

\n\n

Oczywiście jak to w świecie JS’a mamy dostępnych wiele pluginów i ustawień, z których możemy skorzystać podczas budowania naszego pliku .eslintrc. Ja chciałbym pokazać wam moje ulubione reguły bez których nie wyobrażam sobie pisania czystego kodu. Oczywiście to są tylko moje propozycje i warto samemu zbudować swój zbiór reguł:

\n\n
    \n
  • “no-console”: “error”
    • \n
  • “import/no-default-export”: “error”,
    • \n
  • “import/order”: [\n “error”,\n {\n “groups”: [“external”, “builtin”,“parent”,“internal”,“index”, “sibling”],\n “newlines-between”: “always”\n }\n],
    • \n
  • ”@typescript-eslint/no-explicit-any”: “error”,
    • \n
  • ”@typescript-eslint/no-empty-function”: “error”
    • \n
\n\n

A wy macie korzystacie na codzień z ESLinta? Macie jakieś ulubione reguły bez których nie wyobrażacie sobie pisania kodu?

2020-03-01 18:05:00 eslint-statyczna-analiza-kodu-w-javascript ckhxjb6o0000yi3umb3hg09jv 2020-03-01 18:05:00 2020-03-01 18:05:00 -ck7w133hc01xvi3um8bx17rhh Server Sent Events(SSE) - co to jest? https://fsgeek.pl/post/server-sent-events-sse-co-to-jest/

Server Sent Events (SSE) jest mechanizmem, który pozwala na jednokierunkową komunikację pomiędzy serwerem a klientem. Możemy przy jego pomocy wysyłać wiadomości i informować klienta o zmianach na serwerze. Brzmi znajomo? Najczęściej taka funkcjonalność kojarzy nam się z Websocket? Jaka jest pomiędzy nimi różnica, kiedy powinniśmy korzystać z SEE i jak z tego skorzystać?

\n\n

Websocket vs SSE

\n\n

Idea Server Sent Events jest podobna do Websocketów. To co różni oba rozwiązania to sposób komunikacji pomiędzy serwerem a klientem (czyli aplikacją w przeglądarce). W Websocketach mamy do czynienia z komunikacją dwukierunkową - oprócz tego, że serwer wysyła dane do klienta to klient może również wysłać odpowiedź na serwer. SSE działa trochę inaczej - wiadomości może jedynie wysyłać serwer do klienta. Jest to pewne ograniczenie ale w większości przypadków jest to wystarczająca funkcjonalność.

\n\n

Kiedy wykorzystywać SSE?

\n\n

Tak jak wspomniałem w poprzednim akapicie wszystko zależy od tego co tworzymy. Jeśli są to różnego rodzaju chaty gdzie potrzebujemy komunikacji dwukierunkowej to oczywistym wyborem będzie Websocket. Jednak jeśli potrzebujemy żeby informować stronę o pojedynczych zdarzeniach np.:

\n\n
    \n
  • Koniec importu dużego pliku,
    • \n
  • Koniec przetwarzania danego elementu,
    • \n
  • Zmiana na backendzie np.: zmiana danych i konieczność odświeżenia widoku,
    • \n
\n\n

wtedy wykorzystanie SSE będzie lepszym rozwiązaniem.

\n\n

Jak zaimplementować SSE?

\n\n

Z racji tego, że będziemy tutaj otrzymywać wiadomości z serwera implementację musimy podzielić na dwie części: klienta i serwera. Zaczniemy od części serwerowej. Aby móc wysyłać takie zdarzenia musimy ustawić odpowiednie nagłówki w odpowiedzi na zapytanie:

\n\n
    \n
  • ‘Content-Type’: ‘text/event-stream’,
    • \n
  • ‘Cache-Control’: ‘no-cache’,
    • \n
  • ‘Connection’: ‘keep-alive’,
    • \n
\n\n

Mając tak ustawione nagłówki jesteśmy w stanie wysłać wiadomości. Wiadomości mają oczywiście swoją strukturę, której trzeba przestrzegać. Mamy tam dostępne 4 pola:

\n\n
    \n
  • data - tutaj musimy wpisywać dane jakie chcemy przekazać do klienta w postaci striga. Jeśli potrzebujemy przekazać jakis obiekt najprościej będzie wykorzystać JSON.stringify()
    • \n
  • id - id zdarzenia
    • \n
  • event - jeśli wysyłamy kilka różnych zdarzeń możemy im nadać konkretne nazwy tak aby klient się subskrybował tylko na konkretne wiadomości
    • \n
  • retry - liczba określająca czas ponownego połączenia podczas próby wysłania zdarzenia
    • \n
\n\n

Wiadomości przesyłamy jako zwykłe zmienne tekstowe np.: "data: 'message'". Pojedyncze wiadomości są rozdzielane podwójnym znakiem nowej linii \\n\\n. Przykład takiego endpointu w Express.js

\n\n
const express = require('express');\n\nconst app = express();\n\napp.get('/events', (req, res) => {\n\n    res.writeHead(200, {\n        'Content-Type': 'text/event-stream',\n        'Cache-Control': 'no-cache',\n        'Connection': 'keep-alive',\n        'Access-Control-Allow-Origin': '*'\n    });\n    res.flushHeaders();\n\n    let i = 0;\n    setInterval(()=>{\n        res.write(`id: ${i}\\n`);\n        res.write(`event: event1\\n`);\n        res.write(`data: Message -- ${Date.now()}`);\n        res.write(`\\n\\n`);\n        i++\n    }, 5000)\n});\n\napp.listen(3000);\n
\n\n

To teraz przyszedł czas na obsługę tego po stronie klienta. Ogranicza się to tutaj tylko do wykorzystania API EventSource w przeglądarce. Podajemy tam podczas tworzenia nowej instancji obiektu adres pod którym oczekujemy otrzymywać zdarzenia

\n\n
const event = new EventSource('http://localhost:3000/events')\n
\n\n

Dalsza obsługa zależy od tego jakie zdarzenia będziemy wysyłać. Tak jak wspomniałem jednym z parametrów zdarzenia może być pole event. Jeśli go podamy to musimy skorzystać z metody addEventListener

\n\n
event.addEventListener('event_name', (event)=>{\n    // obsługa\n})\n
\n\n

Wszystkie inne zdarzenia są obsługiwane przy pomocy funkcji onmessage

\n\n
event.onmessage = (event) => {\n    //obsługa\n}\n
\n\n

I właściwie tyle. Jak widzicie jest to proste - nie potrzebujemy żadnych dodatkowych bibliotek by otrzymywać aktualizację na żywo z serwera. Jestem ciekaw czy znaliście wcześniej to rozwiązanie? No i czy z niego korzystaliście?

2020-03-17 15:05:00 server-sent-eventssse-co-to-jest ckhxjb6o0000yi3umb3hg09jv 2020-03-17 15:05:00 2020-03-17 15:05:00 -ck8fyxfk001yqi3umc98thebh Moduły ECMAScript w Node.js https://fsgeek.pl/post/moduly-ecmascript-w-nodejs/

W Node.js każdy plik jest traktowany jako osobny moduł, a że nie piszemy całej aplikacji w jednym pliku to musimy w jakiś sposób nimi zarządzać. Do tej pory w środowisku Node.js korzystaliśmy z modułów CommonJS ale to się może zmienić w przyszłości kiedy stabilne będą moduły ECMAScript.

\n\n

Moduły CommonJS

\n\n

Z tymi modułami zetknął się każdy kto chodź raz pisał jakiś skrypt w Node.js. Do zaimportowania zewnętrznego modułu wykorzystujemy składnię reqiure. Natomiast aby udostępnić jakieś funkcje czy wartości dla innych modułów mamy module.exports lub exports

\n\n
const { database } = require('./database')\n\nmodule.exports = {\n    connection: database.connect('...')\n}\n
\n\n

Zastanawialiście się kiedyś jak to działa? Skąd się bierze metoda require i obiekt module? Idea mechanizmu jest prosta w przeciwieństwie do implementacji (jeśli ktoś ma chwilę wolnego czasu to może zerknąć do repozytorium). Każdy moduł, który używamy w naszej aplikacji jest opakowywany w funkcję

\n\n
(function (exports, require, module, __filename, __dirname) { \n\t// zwartość naszego modułu\n });\n
\n\n

Nasz moduł wygląda wtedy następująco:

\n\n
(function (exports, require, module, __filename, __dirname) { \n    const { database } = require('./database')\n\n    module.exports = {\n        connection: database.connect('...')\n    }\n});\n
\n\n

Dzięki temu, w taki trochę magiczny i ukryty sposób, możemy eksportować i importować moduły w CommonJS.

\n\n

Moduły ECMAScript

\n\n

To po co nam właściwie inny sposób radzenia sobie z modułami? Po co nam nowy mechanizm skoro stary się sprawował dobrze przez tyle lat? Ponieważ tak naprawdę to moduły ECMAScript są oficjalnym sposobem na radzenie sobie z modułami w JS’ie. Dzięki temu, że zostały wprowadzone to mamy to zunifikowane dla JS’a i możemy tworzyć biblioteki, które będą z tego mechanizmu korzystały w każdym miejscu gdzie możemy użyć języka JavaScript.

\n\n

Jak teraz będzie wyglądało korzystanie z innych modułów? Mamy tutaj składnię, którą kojarzymy np.: z React’a czyli import i export

\n\n
import { database } from './database'\n\nexport const connection = database.connect('...')\n
\n\n

Oczywiście nie możemy od razu z tego skorzystać gdyż jest to ciągle funkcjonalność eksperymentalna. Na szczęście nie musimy też jej włączać żadnymi flagami gdyż jest domyślnie włączona. Aby skorzystać z tej funkcjonalności mamy dwie drogi:

\n\n
    \n
  • W pliku package.json dołożyć wpis "type": "module"
    • \n
  • Użyć rozszerzenia *.mjs zamiast *.js do plików
    • \n
\n\n

Top-level await

\n\n

Jest jeszcze jedna zaleta korzystania z modułów ECMAScript. Od jakiegoś czasu w najnowszej wersji Node’a jest dla tych modułów uruchomiony top-level await. Dzięki temu nie musimy opakowywać naszego kodu w IIFE (Immediately-invoked function expression) tylko możemy skorzystać z await bezpośrednio

\n\n
await Promise.resolve(console.log('promise'));\n\nconsole.log('after Promise');\n
\n\n

W przypadku Node’a jest to o tyle wygodne, że wiele rzeczy dzieje się asynchronicznie a na które potrzebujemy czekać np.: nawiązanie połączenia z bazą danych żeby wystartować resztę aplikacji. Jednak aby włączyć tę funkcjonalność musimy ją jeszcze aktywować przy pomocy flagi

\n\n
node --harmony-top-level-await nazwa_pliku.mjs\n
\n\n

A wy co sądzicie o nowych modułach i top-level await? Korzystaliście już z tego czy czekacie aż będzie to rozwiązanie stabilne? Myślicie, że zmieni to sposób w jaki tworzymy aplikacje?

2020-03-31 14:00:00 moduly-ecmascript-w-nodejs ckhxjb6o0000yi3umb3hg09jv 2020-03-31 14:00:00 2020-03-31 14:00:00 -ck8zxhhk001zqi3umhnxuavi9 D3.js - tworzenie prostego wykresu liniowego https://fsgeek.pl/post/d3-prosty-wykres-liniowy/

Wykresy są doskonałym sposobem do reprezentowania nudnych danych liczbowych. Dobrze zrobiony wykres potrafi przykuć wzrok osoby, która od liczb ucieka z krzykiem. Istnieje wiele bibliotek do tworzenia wykresów a przynajmniej część z nich opiera się na bibliotece D3.js. Ja chciałbym się skupić na tej ostatniej i pokazać jak można stworzyć w niej te proste jak i zaawansowane wykresy.

\n\n

Dlaczego D3.js?

\n\n

Biblioteka D3.js służy do wizualizacji danych na stronie internetowej przy pomocy SVG, Canvasa lub czystego HTML’a. Łączy ona techniki wizualizacji danych wraz z interakcją z nimi oraz manipulacją drzewem DOM. Powoduje to, że biblioteka jest potężna i w doświadczonych rękach można nią działać cuda. Jeśli nie jesteście przekonani to zerknijcie na przykłady gotowych wizualizacji. Jest też druga strona medalu - żeby móc tworzyć tak zaawansowane rzeczy biblioteka posiada bardzo bogate API, które na początku może przerażać.

\n\n

A dlaczego nie korzystać z gotowych bibliotek, które już opakowują D3.js w wygodny interfejs? Jest to na pewno wygodne i szybkie na początku. Ale z doświadczenia wiem, że klienci lubią wymyślać różne rzeczy i może się zdarzyć, że nie będziemy w stanie tego zrobić w naszej bibliotece lub będziemy musieli się bardzo natrudzić by uzyskać pożądany efekt. Potrafiąc korzystać z czystego D3.js będziemy w stanie mocno czarować na wykresie i nie będziemy niczym ograniczeni. Drugi argument to kwestia nadmiaru bibliotek w naszych aplikacjach - powinniśmy starać się używać jak najmniej różnego rodzaju interfejsów tylko korzystać z konkretnych bibliotek - dzięki temu kod wynikowy będzie mniejszy i nie jesteśmy niczym ograniczeni.

\n\n

Tworzenie pierwszego wykresu

\n\n

Z racji tego, że D3.js nie jest prostą biblioteką mam zamiar stworzyć serię postów gdzie po kolei będziemy tworzyć coraz to bardziej skomplikowane wykresy. Dzisiaj zaczniemy od samych podstaw czyli wykreślenia prostego wykresu liniowego.

\n\n

Najpierw najprostszy krok czyli stworzenie obszaru gdzie będzie kreślony wykres.

\n\n
import * as d3 from "d3";\n\nconst chart = d3\n\t.select("#app")\n\t.append("svg")\n\t.attr("width", 400)\n\t.attr("height", 400)\n\t.append("g");\n
\n\n

Będziemy tworzyć nasz wykres przy pomocy SVG. D3.js wykorzystujemy tutaj by najpierw znaleźć element o id app na stronie i umieścić tam element svg o konkretnych wymiarach. Wykres liniowy to jest tak naprawdę prosta łamana więc do stworzenia jej w svg potrzebujemy elementu path

\n\n
const data = [\n  { data: 1, value: 0 },\n  { data: 20, value: 20 },\n  { data: 30, value: 12 },\n  { data: 40, value: 34 },\n  { data: 50, value: 25 }\n];\n\nchart\n  .datum(data)\n  .append("path")\n  .attr("fill", "none")\n  .attr("stroke", "red")\n  .attr("stroke-width", 5)\n  .attr(\n    "d",\n    d3\n      .line()\n      .x(({ data }) => data)\n      .y(({ value }) => value)\n  );\n
\n\n

Widzimy tutaj wykorzystanie nowych elementów z biblioteki. Po pierwsze mamy funkcje .datum(), która ustawia dane dla aktualnie wybranego elementu. Następnie dodajemy element path oraz ustawiamy mu odpowiednie atrybuty. Najważniejszy z nich - d - określa jak ma wyglądać nasza prosta łamana. Moglibyśmy zrobić to ręcznie ale nie jest to proste i wygodne (przykładowa wartość M1,0L20,20L30,12L40,34L50,25). Na szczęście możemy wykorzystać kolejną z funkcji d3.line(), która stworzy nam linię z tablicy danych jakie przekazaliśmy. Dodatkowo mamy funkcje x() i y(), które pozwalają po pierwsze wybrać jakie wartości mają być dla x i y oraz dodatkowo je zmodyfikować jeśli będzie to potrzebne.

\n\n

Jednak jeśli teraz uruchomimy nasz kod to zobaczymy, że po pierwsze nasz wykres nie wypełnia całej wolnej przestrzeni oraz wykres będzie odwrócony. To pierwsze jest spowodowane tym, że póki co nasze punkty wskazują konkretne punkty na osi współrzędnych elementu svg. Drugi problem jest powiązany z osią układu współrzędnych. Ze szkoły jesteśmy przyzwyczajeni do osi współrzędnych gdzie punkt (0,0) jest w lewym, dolnym rogu i oś X rośnie w prawo a oś Y w górę. Niestety w grafice komputerowej wygląda to inaczej - punkt (0,0) jest w lewym, górnym rogu i tak jak oś X rośnie w prawo tak oś Y rośnie w dół.

\n\n

Żeby nasz wykres wyglądał tak jesteśmy przyzwyczajeni to musimy go przeskalować. Znowu moglibyśmy robić to ręcznie ale po co, skoro są do tego funkcje.

\n\n
const walkX = d3\n  .scaleLinear()\n  .domain([0, 50])\n  .range([20, 380]);\nconst walkY = d3\n  .scaleLinear()\n  .domain([0, 35])\n  .range([380, 20]);\n\n\n//reszta kodu\n\n.attr(\n    "d",\n    d3\n      .line()\n      .x(({ data }) => walkX(data))\n      .y(({ value }) => walkY(value))\n  );\n
\n\n

Każda z funkcji odpowiada za jedną z osi. Z racji tego, że nasz wykres jest liniowy to użyjemy skali liniowej, która odwzoruje nasze punkty z danych na punkty na wykresie. Potrzebujemy określić domenę (.domain()) oraz zakres (.range()) do jakich mają być nasze punkty odzwierciedlone. W domenie ustawiamy tablicę z minimalną i maksymalną wartością w danej osi, natomiast w zakresie ustawiamy liczby do jakich mają być tamte wartości przeskalowane. Z racji tego, że chcę aby wykres zajmował całą przestrzeń svg to w zakresie podaję szerokość elementu svg z 20 pikselowym marginesem z obu stron. Połączenie domeny i zakresu jest potrzebne by móc odpowiednio rozmieścić punkty na wykresie by wyglądało prawidłowo i nie ucięło żadnych punktów.

\n\n

Warto na sam koniec tylko zwrócić uwagę na zakres dla osi Y. Tak jak wspominałem jest ona odwrócona w stosunku do tego co znamy i wartości musimy odwrócić - czyli chcemy by nasza wartość 0 była na svg na współrzędnej Y równej 380.

\n\n

Efekt końcowy wygląda następująco:

\n\n\n\n

Nie jest to może najbardziej zaawansowany wykres ale wszystko w swoim czasie. Teraz możemy dodawać kolejne elementy do wykresu jak osie, etykiety, dodatkowe elementy graficzne, jakieś animacje by z prostego wykresu zrobić naprawdę fajny element graficzny na stronę.

2020-04-14 13:15:00 d3js-tworzenie-prostego-wykresu-liniowego ckhxjb6o0000yi3umb3hg09jv 2020-04-14 13:15:00 2020-04-14 13:15:00 -ck9bez16o020bi3um36wvctic D3.js - osie na wykresie https://fsgeek.pl/post/d3-osie-na-wykresie/

Nie ma wykresu bez dobrze opisanych osi, które mówią nam jak odczytywać dane z wykresu i co reprezentują. Są więc istotnym elementem, którego nie można pominąć. Na szczęście D3.js udostępnia nam grupę funkcji, które pozwalają w łatwy sposób dodać i dostosowywać wygląd osi.

\n\n

Inne artykuły z serii o D3.js

\n\n
    \n
  1. Tworzenie prostego wykresu liniowego
    2. \n
\n\n

Osie w D3.js

\n\n

Do dodania osi możemy skorzystać z przygotowanych funkcji, które możemy podzielić na dwie grupy - pierwsza do tworzenia (osi pionowych i poziomych) i druga do dostosowywania wyglądu.

\n\n

Do tworzenia osi mamy 4 metody:

\n\n
    \n
  • axisTop() - oś pozioma, gdzie etykiety są powyżej osi
    • \n
  • axisBottom() - oś pozioma, gdzie etykiety jest poniżej osi
    • \n
  • axisLeft() - oś pionowa z etykietą po lewej stronie
    • \n
  • axisRight() - oś pionowa z etykietą po prawej stronie
    • \n
\n\n

Przy wywoływaniu każdej z metod możemy przekazać funkcję, która będzie mapowała nasze wartości z osi na pozycję w svg - możemy wykorzystać tą samą funkcję skali, której użyliśmy przy rozmieszczaniu punktów wykresu. Druga opcja to pominięcie tego przy tworzeniu osi i wywołanie funkcji .scale(). Musimy wybrać jedną z dwóch metod ponieważ bez tego nie powstanie oś i dostaniemy błąd.

\n\n

Kolejne funkcje służą już tylko do dostosowywania wyglądu wykresu. Mamy tu kilka opcji, które możemy wykorzystać:

\n\n
    \n
  • ticks(), tickArguments() - służy do ustawiania kroku wyświetlania etykiety (ile ich chcemy na wykresie) oraz do jej formatowania. Jeśli chcemy tylko ustawić formatowanie możemy skorzystać z tickFormat
    • \n
  • tickValues() - zamiast ustawiać ilość lub krok etykiety możemy bezpośrednio podać jakie etykiety nas interesują.
    • \n
  • tickFormat() - funkcja ustawiająca format wyświetlanych etykiet; najlepiej skorzystać tutaj z funkcji d3-format
    • \n
  • tickSizeInner() - ustawiamy długość słupków osi
    • \n
  • tickSizeOuter() - jest to wielkość krańcowych słupków osi (słupki, które ograniczają osie z obu stron)
    • \n
  • tickPadding() - odległość pomiędzy etykietą a słupkiem osi\n
    • \n
\n\n

Pomiędzy ticks i tickArguments jest tylko różnica w zapisie - tickArguments([10,'0.1f']) jest równy w zapisowi ticks(10, "0.1f").

\n\n

Dodatkowo jeśli ustawiamy rozmiar wewnętrznych i zewnętrznych słupków na taką samą wartość to możemy, zamiast ustawiać osobno każdą wartość, wykorzystać funkcję tickSize().

\n\n

Jak teraz wygląda dodanie takich osi?\n

const axisX = d3\n  .axisBottom(walkX)\n  .tickArguments([10, ".1f"]) // .ticks(10, "0.1f")\n  .tickSize(3);\n\nconst axisY = d3\n  .axisLeft()\n  .scale(walkY)\n  .tickValues([0, 12, 20, 25, 34])\n  .tickFormat(d3.format(".0f"))\n  .tickSizeInner(2)\n  .tickSizeOuter(1)\n  .tickPadding(5);\n\nchart\n  .append("g")\n  .attr("transform", "translate(0, 370)")\n  .call(axisX);\n\nchart\n  .append("g")\n  .attr("transform", "translate(20, 0)")\n  .call(axisY);\n

\n\n

Większość elementów opisałem już wyżej i jedyne co zostało do zrobienia to odpowiednie ułożenie osi. Aby to zrobić poprawnie musimy zerknąć jakie wartości ustaliliśmy przy skalowaniu wykresu - oś X przesuwamy 370px w dół natomiast oś Y przesuwamy o 20px w prawo. Ostatni krok to wywołanie funkcji, która wyrysuje nasze osie w elemencie g

\n\n\n\n

Po dodaniu osi zaczyna to wyglądać jak prawdziwy wykres. Teraz możemy bawić się wykresem by dopracować wygląd, dodać animacje, tooltipy i inne elementy, które go uatrakcyjnią.

2020-04-22 14:10:00 d3js-osie-na-wykresie ckhxjb6o0000yi3umb3hg09jv 2020-04-22 14:10:00 2020-04-22 14:10:00 -ckc8rp0gw024fi3um3hmldsi2 Czy jesteśmy więźniami open source? https://fsgeek.pl/post/czy-jestesmy-wiezniami-open-source/

Open source jest rozwiązaniem, które dostarcza nam ogromną ilość bibliotek, frameworków czy innych narzędzi z których korzystamy na co dzień jako programiści. Jednak nie macie wrażenia, że stajemy się przez to trochę leniwi lub nawet stajemy się trochę więźniami open source?

\n\n

Open source the good part

\n\n

Nie da się zaprzeczyć, że współcześnie programowanie opiera się na rozwiązaniach open source. React, Angular, Vue, Node, Express, Material Design, Symfony, Laravel - tę listę można by wydłużać w nieskończoność. Trzeba przyznać, że dzięki pracy pojedynczych programistów jak i całych zespołów możemy korzystać z tych rozwiązań i przyśpieszać naszą codzienną pracę. Tu od razu też apel by, jeśli chcecie się jakoś odwdzięczyć, to najlepszym sposobem będzie pomoc w naprawianiu błędów i rozwijaniu produktu. Nie tak dawno twórca Lodash (z którego pewnie większość z was korzysta) prosił o pomoc w rozwijaniu tego jak i innych projektów

\n\n\n\n

Więc jeśli widzicie, że w waszej ulubionej bibliotece są jakieś problemy, które chcielibyście naprawić to nie wahajcie się napisać do twórcy jak możecie pomóc - myślę, że doceni chęć pomocy :)

\n\n

Open source the bad part

\n\n

Jednak nie jest tak, że open source nie jest pozbawione wad. Nie macie wrażenia, że jedną z myśli dotyczących jakiegoś problemu jest “A może jest biblioteka do tego?”. Nie mam nic przeciwko małym bibliotekom, które dostarczają konkretnych rozwiązań ale czy każda linijka powinna trafiać jako paczka npm’a i być ściągana przy tworzeniu projektu? Świetnym przykładem jest biblioteka is-even, której kod wygląda następująco:

\n\n
var isOdd = require('is-odd');\n\nmodule.exports = function isEven(i) {\n  return !isOdd(i);\n};\n
\n\n

Czyli dodajemy nową bibliotekę do projektu by odwrócić wynik i zwrócić. I okazuje się, że z tej biblioteki według Githuba korzysta ponad 3 tys repozytoriów (link do źródła). Nie uważacie, że to trochę za dużo jak na takiego jednolinijkowca? Zresztą dalej nie jest lepiej ponieważ is-odd zależy od is-number. I od tej ostatniej w githubie zależy 6 milionów repozytoriów (źródło). Cały czas się zastanawiam dlaczego zamiast napisać małą funkcję, która będzie siedzieć w naszym kodzie decydujemy się na pobranie kolejnej zależności nad którą nie mamy władzy. I potem chodzą memy, że ściągając node_modules ściągamy pół internetu ;)

\n\n

Inna sprawa to coś co ja określam jako interfejs do interfejsu do interfejsu do biblioteki. Jako przykład podam bibliotekę mongoose i mongodb (do obu nic nie mam, korzystałem z obu i chcę by tutaj posłużyły tylko jako przykład). Mongodb jest oficialną biblioteką do połączeń z bazą danych MongoDB od twórców, natomiast mongoose jest wrapperem na mongodb i dostarcza kolejną warstwę abstrakcji. I pewnie jakbym poszukał bardziej w githubie to znalazłbym nakładkę na mongoose. Problem z takimi nakładkami pojawia się gdy w oryginalnym rozwiązaniu (w tym przypadku w bazie danych MongoDB) pojawia się błąd, albo nowa funkcjonalność (która oczywiście jest nam potrzebna). I teraz w zależności ile mamy takich nakładek to czas w którym to do nas dotrze rozciąga się od bardzo szybko do nigdy (jeśli biblioteka zdążyła zostać porzucona). I tak jak w moim przykładzie mongodb, jako że jest od twórców, dostanie poprawkę bardzo szybko to w mongoose będziemy musieli poczekać bo a) zależy od mongodb b) może się okazać, że trzeba przerobić część abstrakcji, która nie uwzględniła np.: jakiegoś parametru lub sytuacji.

\n\n

Kontrola nad package.json

\n\n

Cały post ma na celu tak naprawdę zachęcić do zastanowienia się nad tym co instalujemy do naszych projektów. Chciałbym zachęcić do tego by się zastanowić podczas instalacji czy naprawdę potrzebujemy do tego nową bibliotekę. Może da się to zrobić prostą funkcją, albo przekopiować kod z biblioteki, którą chcemy użyć np.: is-even, is-odd itd. Zalet takiego rozwiązania jest kilka:

\n\n
    \n
  • kontrola nad rozwiązaniem - jesteśmy w stanie ingerować w kod rozwiązania i dostosowywać do naszych potrzeb
    • \n
  • większe bezpieczeństwo - im mniej zewnętrznych zależności tym większe bezpieczeństwo naszego kodu
    • \n
  • mniejszy rozmiar node_modules
    • \n
\n\n

Gorąco polecam stronę bundlephobia.com gdzie możecie sprawdzić rozmiar biblioteki i ile ma zależności. Bardzo przydatne narzędzie kiedy macie dwie biblioteki i zastanawiacie się nad wyborem jednej - polecam by wybierać te o najmniejszym rozmiarze i minimalną liczbą zależności. Również jeśli macie do wyboru bibliotekę a rozwiązanie, które nakłada kolejny interfejs zachęcam do zastanowienia się czy naprawdę go potrzebujecie. Bo jeśli nie będziecie go w pełni wykorzystywać albo widzicie, że będą z czymś problemy to może warto skorzystać z oryginalnego rozwiązania?

\n\n

A wy co sądzicie o tym co napisałem o open source? Zgadzacie się czy macie inne przemyślenia? Staracie się kontrolować ilość i wielkość instalowanych zależności w projekcie?

2020-07-05 07:41:56 czy-jestesmy-wiezniami-open-source ckhxjb6o0000yi3umb3hg09jv 2020-07-05 07:41:56 2020-07-05 07:41:56 ckckl9bc0024qi3umfxyk8s1e SPA vs SSR vs Static site https://fsgeek.plpost/spa-vs-ssr-vs-static-site Dzisiaj nie ma jednego dobrego sposobu na tworzenie stron internetowych. Możemy korzystać ze SPA, SSR czy też stron statycznych. Każde z tych rozwiązań posiada swoje plusy i minusy. Zanim zaczniemy nowy projekt, warto rozważyć wszystkie wady i zalety by potem nie żałować. 2020-07-13 14:15:00 spa-vs-ssr-vs-static-site ckhxjb6o0000yi3umb3hg09jv 2020-07-13 14:15:00 2020-07-13 14:15:00 ckdg1nrxc025hi3um3hpdbihx D3.js - obsługa zdarzeń https://fsgeek.plpost/d3-obsluga-zdarzen Dzięki wykresom można prezentować dane w ciekawy i przystępny sposób. Ale skoro mamy je na stronie internetowej, to można dołożyć do nich więcej interaktywności, by pokazać więcej danych np. z pomocą tooltip'ów. Jest to proste do zaimplementowania o ile wiemy jak wykorzystać system zdarzeń obecny w D3.js. 2020-08-04 14:35:00 d3js-obsluga-zdarzen ckhxjb6o0000yi3umb3hg09jv 2020-08-04 14:35:00 2020-08-04 14:35:00 ckdoup3k0025si3umhpmr6lu1 Node.js i MongoDB - łączenie z bazą danych https://fsgeek.pl/post/nodejs-mongodb-laczenie-baza-danych Zazwyczaj jak uczymy się o bazach danych to o bazach relacyjnych np.: MySQL. Jednak nie jest to jedyna możliwość i możemy korzystać również z baz dokumentowych, których reprezentantem jest MongoDB. Jest to też dosyć popularna baza, z której możemy korzystać w Node.js. 2020-08-10 18:30:00 nodejs-i-mongodb-laczenie-z-baza-danych ckhxjb6o0000yi3umb3hg09jv 2020-08-10 18:30:00 2020-08-10 18:30:00 @@ -648,6 +653,7 @@ ck2s5zjmo01sai3umcxj7atab Wprowadzanie do testów jednostkowych w JEST (Javascri ckl6mcui700010wmfjvdvsu71 Deploy aplikacji w 5 minut z Firebase Hosting https://fsgeek.pl/post/deploy-aplikacji-react-do-firebase-hosting/ Firebase jest platformą Google'a, która daje narzędzia do budowania aplikacji internetowych. Narzędzi jest sporo i pozwalają na zbudowanie zaawansowanych aplikacji bez konieczności pisania backendu. Jednym z narzędzi jest Firebase Hosting. Można to wykorzytać do hostowania naszej aplikacji. 2021-02-15 16:00:00 deploy-aplikacji-w-5-minut-z-firebase-hosting ckhxjb6o0000yi3umb3hg09jv 2021-02-15 13:34:18.991 2021-02-15 13:34:18.991 ckliome8b04381umskhgp8a6i Wnioski senior developera po 15 latach w IT - Arkadiusz Benedykt | Przeprogramowani ft. Gość #1 https://www.youtube.com/watch?v=yRr3J28Zclg Jest nam niezmiernie miło zaprosić was na pierwszy odcinek naszej nowej serii Przeprogramowani ft. Gość, w której to wreszcie głos oddajemy mądrzejszym od nas rozmawiając na tematy związane z programowaniem i nie tylko.\n\nGościem pierwszego odcinka będzie Arkadiusz Benedykt - programista z ponad 15-letnim doświadczeniem, trener, prelegent, wykładowca i pasjonat TDD, od którego postaramy się ukraść tak dużo wiedzy jak tylko się da. Doświadczenie Arka pozwala nam przewidywać, że nie będziemy się nudzić, dlatego serdecznie wszystkich zapraszamy i jak zwykle zachęcamy do zadawania pytań w trakcie naszej rozmowy.\n\nProfil naszego gościa na LinkedIn: https://www.linkedin.com/in/arkadiuszbenedykt/\n\nDo zobaczenia! 2020-12-30 19:17:45 wnioski-senior-developera-po-15-latach-w-it-arkadiusz-benedykt-or-przeprogramowani-ft.-gosc-1 ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.804 2021-02-24 00:10:57.804 ckliomfhw04761umsln0vwdko Jak zrobić stronę internetową w szklanym stylu? Tutorial HTML i CSS krok po kroku! https://www.youtube.com/watch?v=DuhCOiOTyRQ Sprawdź efekt końcowy 👉 https://zaczynamyprogramowac.pl/ 👈 \nZachęcamy do zapisania się na nasz newsletter!\n\nKod: https://github.com/FilipMam/glassmorphism\n\nNasza grupa na FB: https://urlgeni.us/facebook/jzp_grupa\nOdwiedź nasz fanpage: https://urlgeni.us/facebook/jzp_fanpage\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n[0:00] Intro\n[2:09] Kodzimy!\n[16:40] Efekt szkła\n[39:38] Podkreślanie linku\n[58:16] Błyszczący przycisk\n[1:15:41] Gradient na tekście\n\nBlog Tomka\nhttps://blog.comandeer.pl/\n\nJak działają animacje?\nhttps://css-tricks.com/almanac/properties/a/animation/\n\nJak działają transitiony?\nhttps://www.freecodecamp.org/news/css-transition-examples/\n\nJak działa pozycjonowanie?\nhttps://www.freecodecamp.org/news/learn-the-basics-the-css-position-property/\n\nTutorial Dev Ed o glassmorphiśmie:\nhttps://youtu.be/O7WbVj5apxU\n\nSzklane Inspiracje\nhttps://pl.pinterest.com/yui05300/glassmorphism/:\n\nNagrałem tutorial HTML i CSS, w którym pokazuję, jak od zera od zera zrobić stronę internetową w “szklanym” stylu. \n\nGlassmorphism (nie mam bladego pojęcia jak mówić na to polsku xD) łapie ostatnio duży hype, więc mam nadzieję, że Wam się przyda. Tutorial jest skierowany raczej do osób początkujących, więc staram się tłumaczyć również podstawowe zagadnienia frontend (animacje, gradienty, flexbox, itd.), ale jeśli interesują Was tylko “szklane efekty” i nie chcecie na mnie patrzeć przez godzinę 21 minut i 37 sekund ( ( ͡° ͜ʖ ͡°) ) to na osi czasu są zaznaczone fragmenty w którym mówię o konkretnych efektach takich jak:\n- stworzenie “szkła” przy pomocy backdrop-filter\n- dodanie gradientu na tekście przy pomocy background-clip\n- stylowanie efektu połysku na przycisku\n\nMiłego oglądania!\n\nFilip Mamcarczyk i Kacper Sokołowski 2021-02-10 17:00:06 jak-zrobic-strone-internetowa-w-szklanym-stylu-tutorial-html-i-css-krok-po-kroku! ckj9sdcq7000051l5pzwpbq9f 2021-02-24 00:10:59.445 2021-02-24 00:10:59.445 +cj3islypc00lqi3umbh5xh6cg Pseudoklasy i pseudoselektory CSS- :target http://kamilrogala.it/blog/programowanie/html-css/31-pseudoklasy-i-pseudoselektory-css-target

Mam pomysł na cykl artykułów, idealny pod moją obietnicę złożoną jakiś czas temu. Obiecałem sobie i Wam, że zajmę się bardziej regularnym pisaniem notek na blogu, tak by zaczął w końcu żyć. I choć ciężko u mnie ze znalezieniem czasu to nie dam się! Oto pierwszy artykuł z cyklu "Pseudoklasy i pseudoselektory CSS". Zapoznajmy się z targetowaniem.

2017-06-04 14:18:30 pseudoklasy-i-pseudoselektory-css-target cjmkwo0mg0002i3um4fx98viq 2017-06-04 14:18:30 2017-06-04 14:18:30 ckliomfj204951ums11ny0yri Czy rekruter IT patrzy na wiek kandytatów? https://www.youtube.com/watch?v=DNQhrLiA5o4 Nasza grupa na FB: https://www.facebook.com/groups/zaczynamy.programowac/\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\nZapisz się na newsletter: https://jakzaczacprogramowac.pl/#newsletter\n\nCzy nauka programowania ma sens, kiedy mam 30, 40, 50 a nawet 60 lat? Czy osoby w takim wieku mają szanse na przebranżowienie?\n\nCzęść pierwsza: https://youtu.be/aPPkufI70HM\n\n0:00 Intro\n2:03 Przebranżowienie osób po 30/40/50\n4:08 Wiek kandydata z perspektywy pracodawcy\n11:14 Kursy w internecie i bootcampy to za mało\n15:13 Które próby przebranżowienia kończą się sukcesem?\n22:22 Co wyróżnia dobrych kandydatów?\n25:45 Podsumowanie\n\nProfil Kuby na LI: https://www.linkedin.com/in/jakubjania/\nJeśli szukasz projektów do zdobycia doświadczenia, możesz sprawdzić np.:\nportal freelancer.pl - https://bit.ly/393mvPN\ngrupę FB ze zleceniami - https://bit.ly/337gqOt 2020-11-21 18:00:42 czy-rekruter-it-patrzy-na-wiek-kandytatow ckj9sdcq7000051l5pzwpbq9f 2021-02-24 00:10:59.486 2021-02-24 00:10:59.486 ckliomfjn05251umsc4zjxtp9 Za stary na programowanie? https://www.youtube.com/watch?v=aPPkufI70HM Czy nauka programowania ma sens, kiedy mam 30, 40, 50 a nawet 60 lat? Czy osoby w takim wieku mają szanse na przebranżowienie?\n\nNasza grupa na FB: https://www.facebook.com/groups/zaczynamy.programowac/\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\nZapisz się na newsletter: https://jakzaczacprogramowac.pl/#newsletter\n\n0:00 Intro\n1:22 Nauka programowania\n3:34 Przebranżowienie\n\n81 latka, która nauczyła się kodować:\nhttps://youtu.be/UFYJ2DE9wlM 2020-10-31 18:00:00 za-stary-na-programowanie ckj9sdcq7000051l5pzwpbq9f 2021-02-24 00:10:59.507 2021-02-24 00:10:59.507 cjaf6mxzk00v5i3um9vnsbofi Komponent pojedynczego zadania & dyrektywa strukturalna *ngFor https://www.nettecode.com/komponent-zadania-dyrektywa-ngfor/

W poprzednim artykule stworzyliśmy nasz pierwszy komponent dla aplikacji – listę to do. Czas dodać do niej zadania! Żeby to zrobić stworzymy komponent pojedynczego zadania na liście. Wymagania wstępne: Spisane w formie checklisty (do wydrukowania bądź podglądu/importu jako szablon Nozbe): Checklista do wydrukowania Szablon Nozbe do podglądu i pobrania Materiały do nauki oraz informacje co […]

\n

Artykuł Komponent pojedynczego zadania & dyrektywa strukturalna *ngFor pochodzi z serwisu NetteCode.

2017-11-25 10:18:02 komponent-pojedynczego-zadania-and-dyrektywa-strukturalna-ngfor ckhnmdge00000i3um6batg2gk 2017-11-25 10:18:02 2017-11-25 10:18:02 @@ -656,6 +662,7 @@ cj0bhb8ww009gi3umejlf44tl A-Frame – szybki i przyjemny start z VR https://pawe cj0h0xm0o00a0i3umagyjergr VRath – czyli co kryje się w pudełku https://pawelochota.pl/2017/03/vrath-czyli-co-kryje-sie-w-pudelku/

W ostatnim poście przedstawiłem najważniejszy element mojego projektu, mianowicie framework A-Frame. Dziś będzie krócej, ale kurtyna opadnie i przedstawię swój stos technologiczny. Bardzo nie lubię jałowych postów pisanych na zasadzie: „nie mam czasu, ale coś muszę napisać”. Niestety każdego dopada okres kiedy musi intensywnie pracować, zajmować się rodziną etc. Albo gdy po prostu jest się

\n

Artykuł VRath – czyli co kryje się w pudełku pochodzi z serwisu Z podwórka programisty.

2017-03-19 18:36:51 vrath-czyli-co-kryje-sie-w-pudelku ck801ynig001pi3um28xx49z7 2017-03-19 18:36:51 2017-03-19 18:36:51 cj0l9p8wg00ahi3umeus0cq9c #CSSfix – Chrome i fixed sidebar w CSS https://pawelochota.pl/2017/03/cssfix-chrome-i-fixed-sidebar/

Tworząc szablon do bloga natrafiłem na dość interesujący problem, który rozpocznie serię krótkich artykułów poświęconych próbie radzenia sobie z dziwnymi zachowaniami stylów CSS. Zazwyczaj z takimi problemami można zetknąć się na urządzeniach mobilnych, których jest od groma. Mamy przynajmniej kilka mobilnych systemów operacyjnych, do tego dochodzą ich różne wersje, a na tych wersjach można zainstalować

\n

Artykuł #CSSfix – Chrome i fixed sidebar w CSS pochodzi z serwisu Z podwórka programisty.

2017-03-22 17:53:22 cssfix-chrome-i-fixed-sidebar-w-css ck801ynig001pi3um28xx49z7 2017-03-22 17:53:22 2017-03-22 17:53:22 cj0qqwrgo00b3i3um0ygf74yd VRath – konfiguracja webpacka https://pawelochota.pl/2017/03/vrath-konfiguracja-webpacka/

W poprzednim wpisie dotyczącym projektu VRath określiłem z jakich technologii będę korzystał i pojawił się także pierwszy sensowny commit. Dzisiaj kolejny etap budowy projektu – konfiguracja webpacka. Dzielenie kodu na mniejsze kawałki to już praktycznie standard, zarówno w dużych jak i małych projektach. Programiści tworzą moduły, które odpowiadają za poszczególne funkcjonalności w aplikacjach, a z

\n

Artykuł VRath – konfiguracja webpacka pochodzi z serwisu Z podwórka programisty.

2017-03-26 13:53:57 vrath-konfiguracja-webpacka ck801ynig001pi3um28xx49z7 2017-03-26 13:53:57 2017-03-26 13:53:57 +cjelpvhs000zli3umhccg118p Standaryzacja AMP? https://blog.comandeer.pl/refleksje/html-css/2018/03/10/standaryzacja-amp.html Google ogłosiło, że standaryzuje technologie związane z AMP. Mam jednak pewne wątpliwości, co do całego procesu… 2018-03-10 18:42:00 standaryzacja-amp cki52vf40000ci3um2x784hhn 2018-03-10 18:42:00 2018-03-10 18:42:00 cj1b3669k00dhi3um0mwaf903 VRath – z Reactem w parze cz. 2 https://pawelochota.pl/2017/04/vrath-z-reactem-w-parze-cz-2/

Marzec już za pasem a mój projekt w dalszym ciągu nie ma solidnych fundamentów. W tym wpisie ostatecznie rozprawię się z kwestią frameworków aby wreszcie móc pobawić się technologią VR. W pierwszej części postu zakończyłem wstępną konfigurację webpacka i udało mi się doprowadzić do sytuacji w której mój kod pisany w reakcie i ES6, jest

\n

Artykuł VRath – z Reactem w parze cz. 2 pochodzi z serwisu Z podwórka programisty.

2017-04-09 19:32:35 vrath-z-reactem-w-parze-cz-2 ck801ynig001pi3um28xx49z7 2017-04-09 19:32:35 2017-04-09 19:32:35 ckliome8a04371umsw1evx9yc Live Coding z Przeprogramowanymi | Opanuj JavaScript 2 https://www.youtube.com/watch?v=VP4aK_GrSDo Końcem tygodnia rozciągamy nasze programistyczne mięśnie zapraszając was na sesję Live Codingu z Przeprogramowanymi. 🕵🏻‍♂️💪👨‍💻\n\nZapoznamy się z przykładowymi ćwiczeniami i projektem z naszego kursu Opanuj JavaScript oraz jak to zwykle bywa - podyskutujemy o wszystkim co przyjdzie nam do głowy.\n\nOczywiście zapraszamy również do zadawania pytań - ta godzina jest dla Was!\n\n⚡️https://przeprogramowani.pl/kurs - tylko do 22:00! ⚡️ 2020-12-30 19:17:13 live-coding-z-przeprogramowanymi-or-opanuj-javascript-2 ckjcy6q5400001hkzvyh1xycf 2021-02-24 00:10:57.803 2021-02-24 00:10:57.803 ckliomfhg04631umszuwyirt1 Podstawy programowania: Code Review https://www.youtube.com/watch?v=pBZGNvbz9QY 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nFilm, w którym Filip tłumaczy jak możesz zgłosić swój projekt do Code Review - https://youtu.be/PXIXkjAm4U4\n\nDołącz do grupy na FB i zgłoś swój projekt!\n👉 https://www.facebook.com/groups/zaczynamy.programowac/ 👈\n\nWyjaśnienie optymalizacji - https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/\n\nCode review to ostatnio bardzo temat na naszym kanale. W tym odcinku tłumaczę czym jest Code Review i dlaczego warto je robić. Dodatkowo, robię przegląd zmian w kodzie jednego z moich poprzednich projektów. Zostały one zgłoszone przez jedną z naszych subskrybentek. Zapraszam!\n\n0:00 Intro\n0:56 Co to jest Code Review?\n3:56 Przegląd kodu Marty\n10:51 Outro 2021-02-06 19:00:24 podstawy-programowania:-code-review ckj9sdcq7000051l5pzwpbq9f 2021-02-24 00:10:59.429 2021-02-24 00:10:59.429 @@ -664,6 +671,7 @@ cj0axnr080098i3umd7ci2zzf document.write("Hello World!"); http://kamilrogala.it/ ckliomfhw04751umsj4bjk8j2 Jak mądrze wybrać pierwszy język programowania? https://www.youtube.com/watch?v=0EyfX7H3NNg Chcesz zacząć programować. Marzysz o fajniej, bardzo dobrze płatnej pracy. Wpisujesz więc w wyszukiwarkę: "jaki język programowania na początek?". Twoim oczom ukazuje się milion wyników. Nie wiesz, który z języków wybrać. Wybór Cię przytłacza, wyłączasz kompa i tyle z nauki. Znasz ten problem? \nJeśli tak to wideo jest dla Ciebie! Opowiadam w nim jak mądrze wybrać swój pierwszy język programowania. Zapraszam!\n\n0:00 Intro\n1:28 Wybierz tylko jeden język\n2:46 Jaki jest Twój cel?\n3:44 Popularność języka\n4:28 Wielkość społeczności \n5:40 Ilość dostępnych materiałów edukacyjnych\n6:33 Podsumowanie\n6:55 Rada bonusowa\n7:25 Outro\n\nChcesz mieć wpływ na treść naszego newslettera? Wypełnij ankietę?\nLink do ankiety: 👉 https://bit.ly/3n6omqv 👈\n\nZapisz się na newsletter: https://zaczynamyprogramowac.pl/\n\nPortale z ofertami pracy: https://www.youtube.com/watch?v=2-09cjbaS8Q\nOferty zagraniczne: https://www.youtube.com/watch?v=vj2_cmIVRTo\n\nNasza grupa na FB: https://urlgeni.us/facebook/jzp_grupa\nOdwiedź nasz fanpage: https://urlgeni.us/facebook/jzp_fanpage\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nUWAGA \nW filmie wspominam, że silnik Unity można programować przy użyciu UnityScriptu. NIE JEST TO PRAWDA. Unity nie wspiera już UnityScriptu. Przepraszam za wprowadzenie w błąd. 2021-01-09 16:00:00 jak-madrze-wybrac-pierwszy-jezyk-programowania ckj9sdcq7000051l5pzwpbq9f 2021-02-24 00:10:59.444 2021-02-24 00:10:59.444 ckliomfj104931ums154jijap Jak zmniejszyć stres na rozmowie kwalifikacyjnej? https://www.youtube.com/watch?v=uF5IvikYI78 W tym odcinku dzielę się z Wami moim doświadczeniem związanym z rozmowami kwalifikacyjnymi. Opowiadam o sposobach, które stosuję, aby przebiegały one jak najlepiej i były jak najmniej stresujące. \n\nZapraszam!\n\nNasza grupa na FB: https://www.facebook.com/groups/zaczynamy.programowac/\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\nZapisz się na newsletter: https://jakzaczacprogramowac.pl/#newsletter 2020-11-07 17:00:09 jak-zmniejszyc-stres-na-rozmowie-kwalifikacyjnej ckj9sdcq7000051l5pzwpbq9f 2021-02-24 00:10:59.485 2021-02-24 00:10:59.485 ckliomfjm05231umszggi5yro Nietypowe książki dla programistek i programistów https://www.youtube.com/watch?v=nXHYd5x3Bio 0:00 Intro\n1:52 Pułapki myślenia\n5:54 Factfulness\n6:41 Zagubiony przedsiębiorca\n9:02 Sztuka zwycięstwa\n9:50 Lean startup\n12:01 Gotowi na start\n12:36 Finansowy Ninija/Finansowa Forteca\n14:23 Freakonomia\n15:48 Outro\n\nLista na goodreads:\nhttps://www.goodreads.com/list/show/156251.Nietypowe_ksi_ki_dla_programist_w_i_programistek\n\nNasza grupa na FB: https://urlgeni.us/facebook/jzp_grupa\nOdwiedź nasz fanpage: https://urlgeni.us/facebook/jzp_fanpage\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\nZapisz się na newsletter: https://jakzaczacprogramowac.pl#newsletter\n\nKto powiedział, że programistom i programistkom przydadzą się tylko książki o kodzie? Być może nauka programowania się na nich opiera, ale jest wiele innych tytułów, które również pomogą nam w karierze zawodowej lepiej niż niejeden kurs programowania albo tutorial! 2020-12-19 17:39:48 nietypowe-ksiazki-dla-programistek-i-programistow ckj9sdcq7000051l5pzwpbq9f 2021-02-24 00:10:59.506 2021-02-24 00:10:59.506 +cj8tsvm8000t8i3ume5hqcgiv Wysyłanie danych przy pomocy GraphQL https://fsgeek.pl/post/graphql-wysylanie-danych/

Witajcie w już trzecim poście dotyczącym GraphQL. Jeśli ominęliście je to gorąco zachęcam do odwiedzenia: Jak zacząć zabawę z GraphQL oraz Typy i schematy w GrapQL. Jednak odbieranie danych to za mało. Musimy mieć możliwość wysyłania własnych danych. Dziś opiszę jak można w tym języku zapytań to zrobić przy pomocy mutacji(mutation).\n

\n\n

Przekazywanie argumentów

\n\n

Jednak zanim przejdę do właściwej części, w której pokażę jak wykonywać zapytania Insert i Delete zatrzymam się jeszcze na chwilę w zwykłych zapytaniach. Bardzo często nie potrzebujemy listy ze wszystkimi danymi. Zazwyczaj potrzebujemy tylko jeden konkretny element by go wyświetlić lub zedytować. W GraphQL do tego celu możemy wykorzystać przekazywanie argumentów. W schemacie możemy sobie zdefiniować nowe pole o takiej strukturze:

\n\n
getPost(id:ID!):Post\n
\n\n

Dzięki temu takie pole może przyjmować dodatkowe argumenty. To została nam jeszcze funkcja zwracająca wynik:

\n\n
getPost:({id})=>posts[id],\n
\n\n

Warto zauważyć, że argumentem jest obiekt. Tak samo muszą być przekazane dane podczas tworzenia zapytania. Nie możemy po prostu przekazać wartości, ponieważ dostaniemy następujący błąd:\narguments_error\nPrzy wysyłaniu zapytania musimy wysłać obiekt z nazwami pól odpowiadającymi tym, które zdefiniowaliśmy w schemacie.\narguments_success

\n\n

Mutacje

\n\n

Mutacje są specjalnym rodzajem zapytania, które ma zmodyfikować dane na serwerze czyli będzie to odpowiednik INSERT, EDIT i DELETE z REST’a. Definiuje się je i używa podobnie do zwykłych zapytań a szczególnie pokazanych w poprzednim paragrafie zapytań z argumentem. Zapytania z tej grupy umieszczamy w specjalnym typie wewnątrz schematu:

\n\n
\ntype Mutation{\n}\n\n
\n\n

Mając coś takiego można tworzyć pola, które są nam potrzebne. Tworzymy je identycznie jak podczas przekazywania argumentów:

\n\n
addPost(title:String,author:String):Post,\n
\n\n

I od razu funkcję która to obsłuży :

\n\n
addPost:({title,author})=>{\n    posts[nextIndex]={title,author};\n    nextIndex++;\n    return {title,author};\n},\n
\n\n

Nad tworzeniem zapytań warto się chwilę zatrzymać ponieważ wygląda trochę inaczej. Pierwsza różnica to słowo kluczowe mutation na początku zapytania. Drugie to musimy podać jakie pola chcemy otrzymać z powrotem.

\n\n

mutation_subfield

\n\n

Bez tego dostaniemy następujący błąd:

\n\n

mutation_error

\n\n

Da się to ominąć ustawiając w schemacie zwracany typ na Boolean

\n\n
addPost(title:String,author:String):Boolean\n
\n\n

Wtedy możemy wykonać następujące zapytanie i nie dostaniemy błędu:

\n\n

mutation_bool

\n\n

Na sam koniec jeszcze wspomnę o możliwości zebrania wszystkich wymaganych pól, które należy przekazać w postaci obiektu. Nie możemy tutaj użyć słówka kluczowego type ale mamy za to słówko kluczowe input. Może to wyglądać w następujący sposób:

\n\n
inputPostInput{\n    title:String,\n    author:String\n}\n\ntype Mutation{\n    addPost(post:PostInput):Post,\n}\n\naddPost:({post})=>{\n    posts[nextIndex]=post;\n    nextIndex++;\n    return post;\n},\n\n
\n\n

Dzięki temu możemy zredukować ilość pól o jakich trzeba pamiętać i możemy używać tego w wielu miejscach np.: dodawanie nowego elementu i jego edycja może wymagać tych samych pól więc nie musimy powielać ich wszystkich tylko użyć odpowiedniego typu.

2017-10-16 06:30:00 wysylanie-danych-przy-pomocy-graphql ckhxjb6o0000yi3umb3hg09jv 2017-10-16 06:30:00 2017-10-16 06:30:00 ckliomfj204981umsc9yfqfwb Jak zrobić śnieg na stronę w JavaScript, HTML i CSS? cz. 2 https://www.youtube.com/watch?v=2U-hHMMqS8E W tym odcinku łączymy przyjemne z pożytecznym! Uczymy się HTML, CSS i JavaScriptu poprzez dodanie zaprzęgu Mikołaja, który będzie śledził kursor. Dodajemy też świąteczną melodyjkę, która gra na stronie!\n\nCzęść pierwsza: https://youtu.be/u9OvTqC20CU\n\nO optymalizacji animacji: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/\n\nNasza grupa na FB: https://urlgeni.us/facebook/jzp_grupa\nOdwiedź nasz fanpage: https://urlgeni.us/facebook/jzp_fanpage\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\nZapisz się na newsletter: https://jakzaczacprogramowac.pl/#newsletter\n\nKod na Githubie - https://github.com/kaapa-s/snow 2020-12-12 05:30:01 jak-zrobic-snieg-na-strone-w-javascript-html-i-css-cz.-2 ckj9sdcq7000051l5pzwpbq9f 2021-02-24 00:10:59.487 2021-02-24 00:10:59.487 ckliomfjo05321ums48rd747x Skąd brać wiedzę i motywację do nauki? Front-end https://www.youtube.com/watch?v=Iqs6N1UZijs W tym odcinku opowiadam o moich ulubionych, darmowych źródłach wiedzy o programowaniu. Pomagają mi one być cały czas na bieżąco z nowinkami branżowymi oraz podtrzymują moją motywację do dalszej nauki.\n\nZapraszam!\n\nNasza grupa na FB: https://www.facebook.com/groups/zaczynamy.programowac/\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\nZapisz się na newsletter: https://jakzaczacprogramowac.pl/#newsletter\n\n0:00 Intro\n0:48 Reddit\n2:21 Echo JS\n2:47 Github\n4:03 Smashing Magazine\n6:00 Dribble\n7:38 codrops\n8:47 Awwwards\n9:54 Codewars\n11:48 Project Euler\n14:10 Flexbox Froggy\n\nLinki do wspomnianych stron:\n\n1. https://www.reddit.com/r/javascript\n2. https://www.echojs.com/\n3. https://github.com/explore\n4. https://www.smashingmagazine.com/\n5. https://dribbble.com/\n6. https://tympanus.net/codrops/\n7. https://www.awwwards.com/\n8. https://www.codewars.com/\n9. https://projecteuler.net/\n10. https://flexboxfroggy.com/ 2020-11-14 16:00:02 skad-brac-wiedze-i-motywacje-do-nauki-front-end ckj9sdcq7000051l5pzwpbq9f 2021-02-24 00:10:59.508 2021-02-24 00:10:59.508 cj0e8p3ds009oi3umcj7rfkqy Ogłoszenie parafialne vol.1 http://kamilrogala.it/blog/aktualnosci/21-ogloszenie-parafialne-vol-1

Krótkie ogłoszenie dotyczące poprawek na stronie.

\r\n
    \r\n
  1. do strony dodano komentarze Facebook
    2. \r\n
  2. dodano sekcję z social media oraz z linkiem do profilu na Udemy.com
    3. \r\n
  3. zmieniono sposób wyświetlania artykułów
    4. \r\n
\r\n

W rozwinięciu szczegóły.

2017-03-17 19:50:52 ogloszenie-parafialne-vol1 cjmkwo0mg0002i3um4fx98viq 2017-03-17 19:50:52 2017-03-17 19:50:52 @@ -675,7 +683,7 @@ cj21zua3k00gni3um9fgy1eia Zmiany, wybory, przyszłość! http://kamilrogala.it/b cj2g5gaw000i7i3umghia7w7q Raj polskiego frontend developera http://kamilrogala.it/blog/inne/28-raj-polskiego-frontend-developera

Dość długo zastanawiałem się nad tym czy utworzyć ten wpis z uwagi na to, że główny ruch na mojej stronie generowany jest przez portal PolskiFrontend.pl, którego tyczy się ten wpis. Wychodzi więc trochę masło maślane- piszę o portalu, z którego pewnie przybył mój Czytelnik. Niemniej skoro portal Bartka napędza mi ruch i SEO- to ja napędzę i jemu, o!

2017-05-08 13:15:00 raj-polskiego-frontend-developera cjmkwo0mg0002i3um4fx98viq 2017-05-08 13:15:00 2017-05-08 13:15:00 cj2w0w6uo00jhi3umb7z26tzp Powrót do szkoły, czyli o nauce słów kilka http://kamilrogala.it/blog/inne/29-powrot-do-szkoly-czyli-o-nauce-slow-kilka

Jak i skąd się uczyć komputera i Internetu?

\r\n

Dziś postaram się odpowiedzieć na pytanie, które spotyka się nader często wśród początkujących programistów oraz wśród kandydatów na nich. Ostatnio zapowiedziałem zmiany w moim życiu dotyczące edukcjacji- zarówno tej typowo IT jak i tej mniej informatycznej, więc temat jest i dla mnie dość świeży. Zaczynajmy!

2017-05-19 15:51:42 powrot-do-szkoly-czyli-o-nauce-slow-kilka cjmkwo0mg0002i3um4fx98viq 2017-05-19 15:51:42 2017-05-19 15:51:42 cj34r8gnk00kei3um1j34gm70 Prosta gra z użyciem... jQuery!? http://kamilrogala.it/blog/programowanie/javascript/jquery/30-prosta-gra-z-uzyciem-jquery

Dziś wieczorem miałem chwilę wolnego czasu na zabawę z kodem na napisanie jakiejś bardziej “technicznej” notki. Ten mój freecoding doprowadził mnie do pomysłu na stworzenie bardzo prostej gry z wykorzystaniem HTML, CSS oraz jQuery. Tak, nie czysty JS, nie dedykowany pod to Phaser, ani reszta frameworków w stylu React, Angular, Vue czy Backbone. Bo gra ma być prosta jak cep, a taki jest jQuery.

2017-05-25 18:31:14 prosta-gra-z-uzyciem-jquery cjmkwo0mg0002i3um4fx98viq 2017-05-25 18:31:14 2017-05-25 18:31:14 -cj3islypc00lqi3umbh5xh6cg Pseudoklasy i pseudoselektory CSS- :target http://kamilrogala.it/blog/programowanie/html-css/31-pseudoklasy-i-pseudoselektory-css-target

Mam pomysł na cykl artykułów, idealny pod moją obietnicę złożoną jakiś czas temu. Obiecałem sobie i Wam, że zajmę się bardziej regularnym pisaniem notek na blogu, tak by zaczął w końcu żyć. I choć ciężko u mnie ze znalezieniem czasu to nie dam się! Oto pierwszy artykuł z cyklu "Pseudoklasy i pseudoselektory CSS". Zapoznajmy się z targetowaniem.

2017-06-04 14:18:30 pseudoklasy-i-pseudoselektory-css-target cjmkwo0mg0002i3um4fx98viq 2017-06-04 14:18:30 2017-06-04 14:18:30 +ckfrhds00027yi3umdwf21ra7 Dostępność - czytniki ekranowe i testowanie https://frontlive.pl//czytniki-ekranowe/ W poprzednich artykułach pisałem o dobrych praktykach, błędach i filozofii inkluzywności. Dziś pomówimy o czytnikach ekranowych i narzędziach do testowania dostępności. Zaczynajmy… 2020-10-02 00:00:00 dostepnosc-czytniki-ekranowe-i-testowanie ckgvhpmo0001ji3umfm7ubw86 2020-10-02 00:00:00 2020-10-02 00:00:00 cjjq2bvgg015ni3um6u2ffo88 Powrót do żywych po ponad roku! https://kamilrogala.it/blog/inne/33-powrot-do-zywych-po-ponad-roku

Bardzo dawno nie było wpisu. Toż to ponad rok jak nie pisałem!
W moim życiu sporo się pozmieniało- to było kilka miesięcy pełnych różnorakich emocji, działań i skutków.

\r\n

Od czego zacząć? Chyba wiem- od awansu.

2018-07-17 19:00:16 powrot-do-zywych-po-ponad-roku cjmkwo0mg0002i3um4fx98viq 2018-07-17 19:00:16 2018-07-17 19:00:16 cjjwyewfk015ui3umcise44z3 11 grzechów ciężkich w rekrutacji IT https://kamilrogala.it/blog/inne/34-11-grzechow-ciezkich-w-rekrutacji-it

Jakiś czas temu postanowiłem zmienić pracę. Podczas poszukiwań nowego pracodawcy miałem okazję odświeżyć co nieco swoje CV, przejść proces rekrutacji z moją osobą w roli głównej... a także natknąć się na pewne schorzenia rekrutacji, nawracające niczym hemoroidy pomimo prób leczenia, upływu lat i porad specjalistów.

2018-07-22 14:45:02 11-grzechow-ciezkich-w-rekrutacji-it cjmkwo0mg0002i3um4fx98viq 2018-07-22 14:45:02 2018-07-22 14:45:02 cjmkwo0mg018ei3umdn69hh2z Frontend Con 2018 https://kamilrogala.it/blog/aktualnosci/35-frontend-con-2018

Jakiś czas temu odezwała się do mnie pewna Magdalena z bardzo kuszącą propozycją- zaoferowano mi zostanie patronem medialnym konferencji!

\r\n

Oczywiście się zgodziłem- z wielką radością wspieram każdą inicjatywę IT, a takie które dotyczą front-endu wprost darzę milłścią.

\r\n

Chcesz dowiedzieć się jak otrzymać zniżkę na wejściówkę? Przeczytaj artykuł to się dowiesz :)

2018-09-27 18:22:01 frontend-con-2018 cjmkwo0mg0002i3um4fx98viq 2018-09-27 18:22:01 2018-09-27 18:22:01 @@ -702,6 +710,7 @@ cizd00jgo0079i3um2vipg5a2 Nowoczesne testowanie kodu w JavaScript. Część Pier cklqmt2qh00020wmgljeg38gd Idealne źródło danych dla twojej aplikacji - Firebase Firestore https://fsgeek.pl/post/firebase-firestore-pobieranie-danych/ Aplikacja bez bazy danych byłaby uboga. Na szczęście Firebase daje dostęp do bazy danych NoSQL. Możemy ją wykorzystywać na wielu różnych platformach w tym Web. Jak praktycznie wykorzystać Fireastore w naszej aplikacji? 2021-03-01 16:00:00 idealne-zrodlo-danych-dla-twojej-aplikacji-firebase-firestore ckhxjb6o0000yi3umb3hg09jv 2021-03-01 13:42:19.673 2021-03-01 13:42:19.673 cklwje7pd00020vl9qlio6on7 Wydanie 65 ➡ 😎 Alpine.js 🔥 Koniec Dockera? 😀 Pozbyłem się.. WordPressa! https://webmastah.pl/weekly-065-alpinejs-koniec-dockera-pozbylem-sie-wordpressa/ Dawno mnie tu nie było 😇 Co z newsletterem? Mam nadzieję, że o mnie nie zapomniałeś_aś 🤓 Od ostatniego newslettera minęło kilka miesięcy, które spędziłem na zmianach w bardzo wielu obszarach. m.in. pozbyłem się wordpressa i zmigrowałem na JAMstack (o tym wszystkim wkrótce).\nnewsletter też czeka trochę zmian, więc może jeszcze nie unsubuj 😜 Przede wszystkim nieco zmieniam formę - co już trochę widać teraz, a docelowo niektóre treści rozejdą się na osobne tematyczne ścieżki. 2021-03-05 16:00:14 wydanie-65-alpine.js-koniec-dockera-pozbylem-sie..-wordpressa! ckcf8vjeg000ai3um1mox19e8 2021-03-05 16:53:24.482 2021-03-05 16:53:24.482 cklwvj7y300020wl6jg6vobfc Dodanie numeracji wierszy do prismjs lub highlightjs http://kody.wig.pl/css/dodanie-numeracji-rekordow-do-prismjs-lub-highlightjs/ Większość technicznych stron chcąc prezentować kod posiłkuje się bibliotekami takimi jak highlightjs lub prismjs. Nie inaczej jest na tej stronie, użyłem highlightjs. W tych dwóch bibliotekach brakowało mi jednej rzeczy a mianowicie numeracji wierszy. Bardzo się przydaje przy informowaniu o błędzie czy gdy ktoś chce zadać pytanie odnośnie danej linii kodu. Oczywiście istnieją dodatkowe biblioteki, […] 2021-01-30 21:15:16 dodanie-numeracji-wierszy-do-prismjs-lub-highlightjs ckijj62co001hi3um2kbkcy0a 2021-03-05 22:33:13.467 2021-03-05 22:33:13.467 +ckmen02n600020wld3n0t6eqc Łączymy backend z frontem - Co backend o froncie musi wiedzieć https://www.youtube.com/watch?v=hk7WBFAhPgY Film dedykowany osobom kompletnie zielonych z frontendu a są/chcą być backend developerami. W tym filmie pokażemy sobie jak w czystym JavaScripcie na froncie wykonał "strzał" do API przy użyciu XMLHTTPRequest oraz fetcha - co może Wam dać szersze spojrzenie na przygotowywane przez backendowców API. 2021-03-18 08:32:42 laczymy-backend-z-frontem-co-backend-o-froncie-musi-wiedziec ckjpkgp9u000012mnlbnkxu51 2021-03-18 08:54:14.371 2021-03-18 08:54:14.371 cklxj1vvm00020wlgdmi4bn10 SOLID, KISS i DRY https://devszczepaniak.pl/solid-kiss-i-dry/

SOLID, KISS i DRY to jedne z najpopularniejszych pojęć/skrótów wśród programistów. Są to na tyle kluczowe zagadnienia oraz przydatne w zadaniach programisty, że nie mogło ich zabraknąć na moim blogu. Wszystkie przykłady w tym artykule zostały napisane w TypeScripcie. Jeśli jednak TypeScript jest Ci obcy, to przykłady w dalszym ciągu powinny być dla Ciebie zrozumiałe. … Czytaj dalej SOLID, KISS i DRY

\n

Artykuł SOLID, KISS i DRY pochodzi z serwisu Devszczepaniak.pl.

2021-03-06 09:23:19 solid-kiss-i-dry ckiyvf2eg0012i3um2h8g0dup 2021-03-06 09:31:35.458 2021-03-06 09:31:35.458 cklz0occ700020wmpwv56misw require(#29) - Podsumowanie Gatsby Conf https://anchor.fm/require/episodes/require29---Podsumowanie-Gatsby-Conf-ers1jd

W dniach 2-3 marca, odbyła się konferencja Gatsby Conf. W tym odcinku, podsumowujemy zaprezentowane na konferencji produkty, takie jak Gatsby.js 3.0, nowy Gatsby Image, Gatsby Hosting i więcej! Polecamy słuchać do końca, bo mamy również dla Was pewną nowość od nas 🔥

\n


\n

Link do ankiety do Q&A i naklejek: https://📦🎙.gq/1yr

\n


\n

Po linki i więcej informacji zapraszamy do archiwum na naszej stronie!

2021-03-07 10:17:53 require(29)-podsumowanie-gatsby-conf ckius9kiw001ki3um2blndfkq 2021-03-07 10:32:42.872 2021-03-07 10:32:42.872 cklz58jga00020wjw4rtj8xx9 Zdalny onboarding – jak go ogarnąć? https://www.wakeupandcode.pl/zdalny-onboarding-jak-go-ogarnac/

I stało się. Coraz więcej stanowisk przeszło na tryb zdalny. W związku z tym i wdrażanie się jest online. Jak ogarnąć zdalny onboarding? Na stanowisko programistyczne, może nawet juniorskie. Albo inne. Jak się odnaleźć i czego unikać? Miałam w ubiegłym roku okazję przechodzić zdalny onboarding dwukrotnie. Raz po powrocie z ulropu macierzyńskiego, drugi raz, gdy […]

\n

Artykuł Zdalny onboarding – jak go ogarnąć? pochodzi z serwisu Wake up and Code.

2021-03-07 12:13:16 zdalny-onboarding-jak-go-ogarnac ckhgqbfog000ii3um332tat33 2021-03-07 12:40:23.674 2021-03-07 12:40:23.674 @@ -711,6 +720,7 @@ ckm1qal4o00020wjn86e1qodh 🍿 Web Prasówka #9 https://www.youtube.com/watch?v= ckl6ue4bp00010wjxk1qt5h15 Grafika dla początkujących - Czym jest Figma i jak tworzyć pierwsze projekty (jako programista) https://www.youtube.com/watch?v=vNlllahmoBQ Grafika dla początkujących - temat, na który czekało wielu widzów naszego kanału. Dzisiaj postaramy się zmniejszych dystans pomiędzy światem programowania i grafiki komputerowej. Zobaczysz podstawy narzędzia Figma, nauczysz się tworzyć proste kreacje na bloga lub dla projektów Open Source oraz poznasz kluczową umiejętność każdego grafika i projektanta.\n\nZobacz jak robi to Google: https://www.youtube.com/watch?v=rrT6v5sOwJg\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-02-15 17:00:22 grafika-dla-poczatkujacych-czym-jest-figma-i-jak-tworzyc-pierwsze-projekty-(jako-programista) ckiyt1v9s001fi3umcgnxbgiu 2021-02-15 17:19:15.302 2021-02-15 17:19:15.302 cklxok4oc00020vmq2l7qtygh TypeScript: Obiekty #03 https://www.youtube.com/watch?v=RlDIqbWIJDM Trzeci film z serii o TypeScripcie, w tym wideo poznamy możliwości otypowania obiektów, bazując na wiedzy z 2 pierwszych odcinków tej serii.\n\nCała playlista tutaj:\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n\nZapraszam do subskrybowania kanału, lajkowania filmów i dzielenia się nimi ze swoimi znajomymi. 2021-03-06 12:00:08 typescript:-obiekty-03 ckjpkgp9u000012mnlbnkxu51 2021-03-06 12:05:44.748 2021-03-06 12:05:44.748 ckm0utbsh00020wjn51w8wgx3 FRONT-END NA PRODUKCJI | Ładowanie aplikacji, obsługa błędów, pusty stan i design for failure https://www.youtube.com/watch?v=2LC5vFx3Djw Front-end na produkcji to techniki i komponenty które mogą wydawać się zbędne na ścieżce optymistycznej (tzw. happy path). Praktyka (i prawo Murphy'ego) pokazuje jednak, że jeśli coś może pójść nie tak, to prędzej czy później pójdzie, a pierwszy dowie się o tym twój użytkownik.\n\nW dzisiejszym filmie zobaczysz techniki opanowywania sytuacji kryzysowych dzięki którym aplikacja stanie się odporna np. na problemy back-endowe czy nietypową logikę biznesową i będzie działać tak "by design". Taki cel osiągniemy poprzez dodanie to naszego projektu kilku komponentów, których często nie zawiera design, a które są absolutnie niezbędne do zapewniania wysokiej jakości tworzonych przez nas rozwiązań .\n\nJakie to komponenty? Zapraszamy do obejrzenia!\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-03-08 17:00:01 front-end-na-produkcji-or-ladowanie-aplikacji-obsluga-bledow-pusty-stan-i-design-for-failure ckiyt1v9s001fi3umcgnxbgiu 2021-03-08 17:24:10.098 2021-03-08 17:24:10.098 +ckglhmo00028vi3umh1348o7p React Query - czy zastąpi Reduxa? https://frontlive.pl//react-query-podstawy/ Deweloperzy niejednokrotnie chcieli, aby jakaś technologia zastąpiła Reduxa, dlaczego? Problemem numer jeden był spory boilerplate i złożoność całego procesu, dla początkujących… 2020-10-23 00:00:00 react-query-czy-zastapi-reduxa ckgvhpmo0001ji3umfm7ubw86 2020-10-23 00:00:00 2020-10-23 00:00:00 ckm234spx00020wmgp5avt9is #8 Testowanie klikania w komponent React https://www.youtube.com/watch?v=ySQORayuup0 🔴 Hej JavaScript developerzy! Oto ciąg dalszy testowania komponentu Reactowego z użyciem biblioteki testing-library. Pokazuję jak testować klikanie w i sprawdzać, czy menu się pojawiło bądź zniknęło. Wszystko zamknięte w skondensowane wideo. Przyjemnego oglądania!\n\n0:00 - Co będziemy robić?\n0:28 - Testowanie pojawiania się dropdowna po kliknięciu\n3:08 - Sprawdzanie liczby elementów listy\n4:44 - Sprawdzanie czy wyświetlana jest nazwa stanu\n5:49 - Testowanie znikania dropdowna po wybraniu elementu\n\n🔥🔥🔥🔥🚀\nZapisz się do newslettera: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\n🔥🔥🔥🔥🚀\n\n🏆 Wspieraj kanał na Patronite\nhttps://patronite.pl/jsdzem\n\n📸 Obserwuj mojego Instagrama\nhttps://www.instagram.com/jsdzem\n\n🤝 Zostań członkiem naszej zamkniętej grupy na Facebooku\nhttps://www.facebook.com/groups/jsdzem\n\n🟣 Dołącz do naszego serwera Discord\nhttps://discord.com/invite/xDwfTUn7mc\n\nNazywam się Jakub Pusiak i tworzę kanał JS Dżem. Uczę programowania na frontendzie. Zawodowo jestem programistą i czerpię z tego ogromną satysfakcję. Wcześniej byłem też trenerem w szkole programowania. Teraz publikuję filmy instruktażowe na YouTube. Na tym kanale dowiesz się jakie triki stosuję na codzień w pracy frontend developera. Nauczę Cię myśleć jak programista, przestrzegę Cię przed typowymi błędami oraz pomogę Ci zbudować warsztat na miarę zawodowca. 2021-03-09 14:00:13 8-testowanie-klikania-w-komponent-react ckkb3uw6b00002smi6pw37cjt 2021-03-09 14:04:48.357 2021-03-09 14:04:48.357 ckm234wun00110wmgwctzussj Firestore - tworzenie, modyfikowanie i usuwanie danych https://fsgeek.pl/post/firebase-firestore-set-add-update-delete/ Przy bazie danych równie istotne, jak pobieranie danych, jest również ich tworzenie. Do podstawowych operacji możemy zaliczyć tworzenie, edycję i usuwanie dokumnetów oraz kolekcji. W przypadku Firestore jest kilka rozwiązań, które mogą zdziwić. Szczególnie osoby przyzwyczajone do baz relacyjnych. 2021-03-09 16:00:00 firestore-tworzenie-modyfikowanie-i-usuwanie-danych ckhxjb6o0000yi3umb3hg09jv 2021-03-09 14:04:53.712 2021-03-09 14:04:53.712 ckly2faan00020wmnc7hxp1bn Backend - Podstawy w Node.js i Express https://www.youtube.com/watch?v=Oc9hbOL0_nk W tym odcinku pokazuję Wam jak stworzyć backend do aplikacji Todo List przy pomocy Node.js i Express.\nZapisz się na newsletter! 👉 https://zaczynamyprogramowac.pl/ 👈 \n\nDołącz do grupy na Facebooku: https://www.facebook.com/groups/zaczynamy.programowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n0:00 Intro\n1:41 Omówienie Todo MVC\n3:25 Serwer Express\n6:32 Obsługa requestu GET\n9:35 Wysyłanie danych z frontendu\n14:17 Obsługa request POST \n22:31 Pobieranie danych przez frontend \n32:44 Outro\n\nMiłego oglądania!\n\nFilip Mamcarczyk i Kacper Sokołowski\n\nLINKI:\n\nLink do repozytorium FE - https://github.com/kaapa-s/todomvc/tree/master/examples/vanilla-es6\n\nLink do repozytorium BE - https://github.com/kaapa-s/todo-be\n\nOpis CORS - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\n\nDokumentacja Express - https://expressjs.com/en/starter/installing.html 2021-03-06 18:00:04 backend-podstawy-w-node.js-i-express ckj9sdcq7000051l5pzwpbq9f 2021-03-06 18:33:53.375 2021-03-06 18:33:53.375 @@ -732,6 +742,7 @@ cizg711c0007ai3umbrkd1xw4 Formularz kontaktowy http://domanart.pl/formularz-kont cj533k00000odi3um88ke58cp Warsztat webmastera http://domanart.pl/warsztat-webmastera/

Wraz z kolejnymi godzinami spędzonymi na tworzeniu najlepszych stron na świecie każdy z nas powiększa swój warsztat.

\n

Poniżej chciałem wam przedstawić kilka rzeczy, które znajdują się w moim warsztacie.\nWpis nie będzie idealnie wszystkiego pokazywał, a raczej będzie omówieniem różnych rzeczy i technik. Jeżeli dana idea do was przemówi i będziecie chcieli dokładniej się o niej dowiedzieć, piszcie w komentarzach, albo pytajcie wujka wielkie G.

2017-07-14 00:00:00 warsztat-webmastera ckej6qdc0001ni3um8neham6w 2017-07-14 00:00:00 2017-07-14 00:00:00 cj6ctn9c000q5i3um9ei35tqt Float i inline-block http://domanart.pl/float-i-inline-block/

W dzisiejszym artykule mała powtórka z przeszłości.\nSporo młodych webmasterów twierdzi, że nie ma sensu uczyć się technik związanych z floatami i display:inline-block, bo w dzisiejszych czasach są inne techniki.\nMoje zdanie jest odmienne. Dobry webmaster nie musi używać tych technik. Ale musi je znać, bo pewnego dnia może na nie natrafić. I wtedy co powie? Wie pan - ja panu tego nie zrobię, bo ja umiem tylko nowe…

2017-08-15 00:00:00 float-i-inline-block ckej6qdc0001ni3um8neham6w 2017-08-15 00:00:00 2017-08-15 00:00:00 cj6e9340000q7i3umbfnz4nfg Animacje CSS http://domanart.pl/animacje-css/

Ah animacje, piękne animacje. Ileż to można o nich pisać. Całe książki. Wbrew pozorom jednak wcale aż tyle tego nie ma. Przynajmniej w teorii, bo w praktyce można całkiem fajnie poczarować.

2017-08-16 00:00:00 animacje-css ckej6qdc0001ni3um8neham6w 2017-08-16 00:00:00 2017-08-16 00:00:00 +ckgvhpmo00297i3um78znhziq Nowoczesny CSS - min(), max() i clamp() https://frontlive.pl//css-min-max-clamp/ Znacie ten ból posiadania wielu w swoich CSSach? Na przestrzeli lat, wraz ze wsparciem flexboxa i grida przez przeglądarki, ta sytuacja się zmieniała. Jednak flexbox i grid to nie… 2020-10-30 00:00:00 nowoczesny-css-min-max-i-clamp ckgvhpmo0001ji3umfm7ubw86 2020-10-30 00:00:00 2020-10-30 00:00:00 cj9bzo5c000tpi3umfu3v68pf Baner animowany http://domanart.pl/baner-animowany/

Jak niektórzy wiedzą, od jakiegoś czasu zajmuję się nauczaniem frontendu.\nZ wczorajszą grupą kończyliśmy temat sass, i między innymi animacji css, czyli tego o czym pisałem ostatnim razem.\nNie ukrywam - bardzo lubię te tematy, bo pozwalają trochę poczarować.\nZawsze po skończeniu takiego działu zabieramy się za jakiś mini projekt, który zbiera i podsumowuje poznane techniki.\nTym razem przygotowałem dla kursantów baner, który miał służyć do poćwiczenia animacji.\nNiestety bardzo mało czasu spowodowało, że zamiast wykonać całość od początku do końca, zdążyliśmy tylko omówić jakie techniki zastosować na danych składowych tego banera. Całość zostawiłem im do samodzielnego wykonania.

\n

Dzisiaj rano wstałem i stwierdziłem, że takie zadanie to fajny materiał na tutorial. Nie teoria, a praktyka.\nNo to co? Zaczynamy?

2017-10-29 00:00:00 baner-animowany ckej6qdc0001ni3um8neham6w 2017-10-29 00:00:00 2017-10-29 00:00:00 cirarkef4005ni3um16o6fu5q Lab98.pl http://www.webkrytyk.pl/2016/07/31/lab98-pl/ Dawno już nic nie pisałem, więc wypada to nadrobić. Tym razem przyjrzę się stronie Lab98.pl, która jest portfolio młodego i ambitnego zespołu z Wrocławia. Pierwszym testem, który zazwyczaj wykonuję, jest otwarcie strony w Firefoksie z włączonym dodatkiem NoScript. Niestety, coraz więcej stron całkowicie ten test oblewa. Nie inaczej jest i tym razem. Jest to tym […] 2016-07-31 15:30:40 lab98pl cki2dml0o000di3umgjexb6pk 2016-07-31 15:30:40 2016-07-31 15:30:40 cirggqv88005oi3um4yuq4u06 Sebastian Rosik, „HTML5 Komponenty” http://www.webkrytyk.pl/2016/08/04/sebastian-rosik-html5-komponenty/ Dawno nie było żadnej recenzji książki na WebKrytyku, więc wypada to nadrobić! Zwłaszcza, że w moje ręce trafiła dość ciekawa pozycja — HTML5 Komponenty Sebastiana Rosika. Z racji tego, że książka traktuje o technologi Web Components, która – co tu dużo mówić – fascynuje mnie od niemal początków prac nad nią, nie mogłem przejść obok niej […] 2016-08-04 15:14:23 sebastian-rosik-html5-komponenty cki2dml0o000di3umgjexb6pk 2016-08-04 15:14:23 2016-08-04 15:14:23 @@ -744,6 +755,7 @@ ciylvtwfk006si3um2fsfcvnd Wpadki i wypadki #8 http://www.webkrytyk.pl/2017/01/31 cizq45jfs007ii3um7y8lb40m WCAG.pl http://www.webkrytyk.pl/2017/02/28/wcag-pl/ Dzisiaj będzie inaczej niż zwykle, bo… przyjrzymy się dobrze zrobionej stronie. Tak, nie przywidziało Ci się, mój drogi Czytelniku: dobrze zrobionej stronie. Jeśli oczekiwałeś dużo zrzędzenia, wróć za miesiąc. Tymczasem ja przyjrzę się stronie WCAG.pl. Nazwa strony nie jest przypadkowa i nawiązuje do nazwy standardu określającego wytyczne mające na celu tworzenie stron przystosowanych dla osób […] 2017-02-28 22:37:13 wcagpl cki2dml0o000di3umgjexb6pk 2017-02-28 22:37:13 2017-02-28 22:37:13 cj0y879s000bxi3um6ddnf7vz Szablon Monstroid2 http://www.webkrytyk.pl/2017/03/31/szablon-monstroid2/ Nadszedł czas, by po raz kolejny pochylić się nad szablonem od Template Monster, tym razem będzie to Monstroid2. System kupowania nie zmienił się od ostatniego razu, co akurat oznacza bardzo dobre wieści, bo działa to tak, jak powinno. No i mamy zawsze dostęp do swoich szablonów z panelu użytkownika. Jeśli się nam gdzieś zapodzieje na […] 2017-03-31 19:32:24 szablon-monstroid2 cki2dml0o000di3umgjexb6pk 2017-03-31 19:32:24 2017-03-31 19:32:24 cj255ns4o00h0i3um7356a13r TheDev.pl https://www.webkrytyk.pl/2017/04/30/thedev-pl/ Dawno nie było na WebKrytyku normalnej, tradycyjnej recenzji strony (a bo tu jakiś szablon, tu jakiś kurs…). Pora to nadrobić. Dzisiaj padło na stronę TheDev.pl. Domena fajna, ale też wymagająca. Sprawdźmy, co się pod nią kryje. Pierwsza rzecz, jaka uderza, to skrajny minimalizm. Strona składa się raptem z trzech linków i logotypu. Prawdę mówiąc nie bardzo rozumiem, […] 2017-04-30 20:35:21 thedevpl cki2dml0o000di3umgjexb6pk 2017-04-30 20:35:21 2017-04-30 20:35:21 +cj9famk0000tvi3um3oyc8xt3 Node.js - pierwsze kroki https://fsgeek.pl/post/nodejs-pierwsze-kroki/

Dużo ludzi kojarzy JavaScript tylko z przeglądarkami i ogólnie pojętym frontendem. Jednak na tym nie kończą się możliwości tego języka. Dzięki Node.js mamy możliwość napisać w Javascriptcie funkcjonalny serwer dla naszych aplikacji. I co najważniejsze nie jest to trudne.\n

\n\n

Czym jest Node.js?

\n\n

Jest to platforma zbudowana na Chrome V8. Jest to darmowy silnik Javascript stworzony przez Google’a w języku C++ i używany oprócz Node’a także w przeglądarce Chrome. Dzięki temu nie potrzebujemy przeglądarki by odpalić nasz kod Javascript a jesteśmy w stanie to zrobić wszędzie tam gdzie jesteśmy w stanie zainstalować Node’a. A wedle oficjalnej dokumentacji jesteśmy w stanie to zrobić na naprawdę dużej ilości środowisk

\n\n

node-srodowiska

\n\n

Jak widać jest tego sporo. Warte zauważenia są binarki dostępne dla systemów opartych o ARM. Dzięki temu mamy możliwość postawienia własnego serwera między innymi na raspberry pi (co kiedyś opiszę na blogu). W ostatnim czasie Javascript zaczął się coraz mocniej rozwijać co przełożyło się na jego popularność. Również Node się do tego przyczynia ponieważ znajomość jednego języka pozwala nam pisać w pełni funkcjonalne serwisy. Jeśli jesteście ciekawi jak wyglądają statystyki dotyczące naszej omawianej platformy to zerknijcie tutaj

\n\n

Pierwszy program

\n\n

Tyle teorii (którą pewnie mało kto czyta :) ) wystarczy. Nie po to powstają platformy by o nich gadać, tylko żeby coś w nich tworzyć. Ja korzystam z jednej z nowszej wersji Node’a co na początku nie powinno mieć znaczenia ale może wyjść przy nieoczekiwanych sytuacjach.

\n\n

node-wersja

\n\n

Tak jak wspomniałem jesteśmy w stanie uruchomić kod Javascript na każdej platformie gdzie możemy zainstalować Node’a więc pierwszy program uruchomię w zwykłej konsoli. Aby uruchomić nasz program należy w konsoli wpisać node nazwa_naszego_pliku.js

\n\n

node-hello-world

\n\n

Sam kod nie jest skomplikowany i kończy się na jednej linijce

\n\n
console.log("Hello World")\n
\n\n

W porównaniu z innymi językami programowania np. Java jest to bardzo minimalistyczne.

\n\n

Przekazywanie argumentów

\n\n

Tak samo jak w innych językach jesteśmy w stanie uruchomić nasz program razem z parametrami. Jest to często wykorzystywane przy różnego typu bibliotekach do parametryzowania uruchomienia np.: podanie portu, ustawienie wersji produkcyjnej, developerskiej itd.

\n\n

Parametry uruchomienia możemy wyciągnąć z zmiennej globalnej Node’a o nazwie process. Jest to duży obiekt który przechowuje informacje o między innymi: używanych modułach, wersji node’a i silnika v8, na jakiej platformie i architekturze został odpalony kod, przekazane parametry czy też parametry .env o których powiem za chwilę.\nNasze przekazane parametry kryją się pod polem argv w naszym obiekcie i są zwyklą tablicą, która ma rozmiar nie mniejszy niż 2.

\n\n

node-argv

\n\n

Pierwszy element to ścieżka do pliku wykonywalnego node’a a drugi do naszego uruchamianego pliku. Kolejne elementy trafiają na kolejne pozycje tabeli.

\n\n

.Env

\n\n

Chciałbym jeszcze wspomnieć o innym mechanizmie parametryzowania naszej aplikacji a mianowicie zmiennych środowiskowych. Jak sama nazwa wskazuje są to zmienne które zmieniają się pomiędzy środowiskami programistycznymi(lokalne, staging czy też środowisko produkcyjne). Bardzo często są to parametry, które definiują np.: adres bazy danych, port pod jakim wystawiamy aplikację, klucze dostępowe itd. Są one normalnie dostępne w systemie, gdzie można je definiować i zmieniać. Jednak jeśli nie chcemy podczas pisania kodu mieszać sobie w swoich zmiennych środowiskowych (np. mamy kilka projektów i chcemy odseparować zmienne pomiędzy nimi) możemy zdefiniować je w specjalnym pliku .env gdzie podajemy parę wartości KLUCZ = wartosc.

\n\n
SIMPLE_KEY=simple_key\nVALUE_WITH_SPACE=key with space\n
\n\n

Jednak aby skorzystać z tego pliku potrzebujemy biblioteki, która dołączy nam nasze własne zmienne do tych systemowych.

\n\n
yarn add dotenv --save\n
\n\n

Teraz po napisaniu czegoś takiego:

\n\n
require('dotenv').config()\n\nconsole.log("HelloWorld");\nconsole.log(process.env.SIMPLE_KEY);\nconsole.log(process.env.VALUE_WITH_SPACE);\n\n
\n\n

Jesteśmy w stanie korzystać z naszych zmiennych środowiskowych w programie

\n\n

node-env

\n\n

Dziś poruszyłem podstawowe kwestie związane z pisaniem aplikacji w Node.js jednak bardzo potrzebne i często używane. Należy pamiętać, że nie jest on wykorzystywany do pisania aplikacji konsolowych a serwerowych. Jednak postawieniem prostego serwera HTTP zajmiemy się następnym razem

2017-10-31 07:30:00 nodejs-pierwsze-kroki ckhxjb6o0000yi3umb3hg09jv 2017-10-31 07:30:00 2017-10-31 07:30:00 cj3dj4nko00lfi3um1ijv875o Wpadki i wypadki #9 https://www.webkrytyk.pl/2017/05/31/wpadki-i-wypadki-9/ Kolejne wydanie Wpadek i wypadków. Dzisiaj w numerze nie przyczepię się do nikogo, przyczepiając się do (niemal) wszystkich… Od pewnego czasu udzielam się na Facebooku na kilku grupach przeznaczonych dla początkujących webdeveloperów, m.in. HTML5 i CSS3: pierwsze kroki czy Weekly WebDev Challenge. Bardzo często pojawiają się na tych grupach strony do oceny, co też bardzo chętnie […] 2017-05-31 21:54:15 wpadki-i-wypadki-9 cki2dml0o000di3umgjexb6pk 2017-05-31 21:54:15 2017-05-31 21:54:15 cj4j08hxk00nii3um90zu7hgr Zintegrowany Raport Roczny Grupy Kapitałowej GAZ-SYSTEM 2015 https://www.webkrytyk.pl/2017/06/30/zintegrowany-raport-roczny-grupy-kapitalowej-gaz-system-2015/ Fundacja Widzialni wraz z Szerokim Porozumieniem na rzecz Rozwoju Umiejętności Cyfrowych organizują od lat konkurs Strona Internetowa bez Barier. Pod koniec kwietnia ogłoszono laureatów za rok 2016. Nie byłbym sobą, gdybym się bliżej tym stronom nie przyjrzał – zwłaszcza, że jednej już się przyjrzałem. Na pierwszy ogień poszedł laureat w kategorii Najlepszy z Najlepszych, Zintegrowany […] 2017-06-29 22:31:41 zintegrowany-raport-roczny-grupy-kapitalowej-gaz-system-2015 cki2dml0o000di3umgjexb6pk 2017-06-29 22:31:41 2017-06-29 22:31:41 ckm56p9t600020wlcswhu9hi5 Propagacja DNS - ile trwa aktualizacja? https://webmastah.pl/notes/ile-trwa-zmiana-dns/ Na odczepnego: do 24/48h Najczęściej można spotkać informacje, że zmiany DNS trwają do 24h, czasami ci bardziej zmęczeni pytaniami piszą, że aż do 48h.\nNie do końca jest to prawdą o czym pisze poniżej. Teksty 24/48h wynikają po prostu z tego, że coś trzeba powiedzieć, a nie ma jednego prawidłowego czasu. To wszystko “zależy”. Łatwiej jest jednym zdaniem odpowiedzieć, że do 24h niż tłumaczyć zawiłości zmian DNS. 2021-03-10 14:33:52 propagacja-dns-ile-trwa-aktualizacja ckcf8vjeg000ai3um1mox19e8 2021-03-11 18:08:01.002 2021-03-11 18:08:01.002 @@ -768,6 +780,7 @@ ckaekxs000224i3umh490gmkw Kilka słów o Electronie http://domanart.pl/kilka-s%C ckaol0qo0022ii3umbbvl23r4 Bunkier http://domanart.pl/bunkier/

W ramach odskoczni od ciut ostatnio nudnego frontendu postanowiłem wrócić do mojego starszego projektu.

2020-05-27 00:00:00 bunkier ckej6qdc0001ni3um8neham6w 2020-05-27 00:00:00 2020-05-27 00:00:00 ckej6qdc0026ki3umeblj5f6n Tworzenie layoutu 2 http://domanart.pl/tworzenie-layoutu-2/

Wracamy do cięcia layoutu. Tym razem będzie o wiele prościej.

2020-09-01 00:00:00 tworzenie-layoutu-2 ckej6qdc0001ni3um8neham6w 2020-09-01 00:00:00 2020-09-01 00:00:00 ck7ns6aew01xki3umhntwb0tg Nie tylko Redux – poznaj 4 inne sposoby na zarządzanie stanem w React https://frontcave.pl/nie-tylko-redux-poznaj-4-inne-sposoby-na-zarzadzanie-stanem-w-react/

Redux, jak i dedykowaną dla Reacta paczkę React Redux można uznać za najpopularniejsze w tym momencie rozwiązanie do kompleksowego zarządzania stanem w React.Redux potrafi być pobrany ponad 900 tysięcy razy dziennie (za npm-stat), natomiast React Redux ponad 650 tysięcy razy. Nie jest jednak rozwiązaniem idealnym i ma pewne wady: Duża ilość powtarzalnego kodu, tzw boilerplate … Czytaj dalej Nie tylko Redux – poznaj 4 inne sposoby na zarządzanie stanem w React

\n

Artykuł Nie tylko Redux – poznaj 4 inne sposoby na zarządzanie stanem w React pochodzi z serwisu Front Cave.

2020-03-11 20:33:23 nie-tylko-redux-poznaj-4-inne-sposoby-na-zarzadzanie-stanem-w-react ckirm3wzs001li3umfdkcfl6k 2020-03-11 20:33:23 2020-03-11 20:33:23 +cj9p9mxs000uai3umhhmifpdv Node.js - jak postawić własny serwer HTTP https://fsgeek.pl/post/node-jak-postawic-serwer/

W ostatnim poście(jeśli go ominęliście to znajdziecie go tutaj) powiedziałem parę słów na temat Node’a i uruchomiłem kod w konsoli. Możliwości tej platformy na tym się nie kończą a wręcz dopiero zaczynają. Większość kojarzy go z serwerem i słusznie. Dziś pokażę jak można stworzyć prosty serwer HTTP przy wykorzystaniu tylko i wyłacznie Node’a.\n

\n\n

Hello World na serwerze Node’a

\n\n

W całym dzisiejszym poście będziemy korzystać z biblioteki http, która należy do Node’a więc nie musimy jej osobno instalować, jest od razu dla nas dostępna. Wykorzystując ją jesteśmy w stanie stworzyć prosty serwer HTTP w zaledwie paru linijkach i następnie rozbudować względem naszych potrzeb.

\n\n
const http=require('http');\n\nconst server=http.createServer((request,response)=>{\nresponse.end('Hello World');\n})\n\nserver.listen(3000);\n\nconsole.log('Server listening at port 3000')\n\n
\n\n

Po uruchomieniu pliku w konsoli i wejściu na stronę http://localhost:3000/ powinno nam się ukazać taki widok(u mnie w powiększeniu by było lepiej widać na zdjęciu)

\n\n

node-server-hello-world

\n\n

Pierwsza linijka to jest to co wspomniałem na początku czyli zaimportowanie biblioteki, która za chwilę będzie nam potrzebna. Jedną z metod tej biblioteki jest createServer która zwraca nową instancję klasy http.Server. Metoda ta przyjmuje jeden argument - funkcję, która będzie obsługiwała każde zapytanie. Składa się z dwóch parametrów:

\n\n
    \n
  • pierwszy parametr jest klasy http.IncomingMessage najczęściej nazywany request lub w skrócie req
    • \n
  • drugi parametr jest klasy http.ServerResponse, który często jest nazwany response lub res
    • \n
\n\n

Wewnątrz tej funkcji jesteśmy w stanie reagować na każde zapytanie jakie jest generowane do naszego serwera. Jedyny warunek jaki trzeba przestrzegać to wymóg wywołania metody end() dla każdej generowanej przez nas odpowiedzi. Metoda ta sygnalizuje, że wszystko co miało być przekazane (wiadomość, nagłówki itd) zostało przekazane i zapytanie można uznać za zakończone. Ja wykorzystuję metodę end() również do przesłania wiadomości ale można to również zapisać w trochę inny sposób:

\n\n
response.write('Hello World');\nresponse.end();\n
\n\n

Na sam koniec musimy określić na jakim porcie możemy wysyłać zapytania i otrzymywać odpowiedzi. W tym przypadku aby móc otrzymać napis Hello World musimy podać taki adres w przeglądarce http://localhost:3000. Jeśli chcemy podawać tylko coś takiego http://localhost/ jako port musimy ustawić coś takiego:

\n\n
server.listen(80);\n
\n\n

Request

\n\n

Teraz mając działającą bazę jesteśmy w stanie to rozwijać i dostosowywać nasz serwer pod nasze potrzeby. A będą nam tutaj pomagać metody, które możemy wywołać dla wyżej wymienionych zmiennych. Zacznę od tego co jesteśmy w stanie wyciągnąć z zapytania przy pomocy zmiennej request. Możemy między innymi pozyskać informacje dotyczące nagłówków przesłanych w zapytaniu, na jaki adres zostało wykonane zapytanie czy też w sumie najważniejsze jaki typ zapytania został wykonany (w końcu to różnica czy wykonujemy PUT czy DELETE ;)). Oto co można zobaczyć dla przykładowego zapytania:

\n\n

node-server-request

\n\n

Response

\n\n

Dużo ciekawiej wygląda z odpowiedzią serwera. Jako, że to jest to co my tworzymy mamy tutaj spory wybór opcji jakie możemy wykorzystać by przekazać jak najwięcej treści podczas jednej odpowiedzi. Pierwsze co przychodzi do głowy i co jest możliwe to dodawanie nagłówków do naszej odpowiedzi. Możemy nie tylko modyfikować ogólnie znane np.: takie jak Content-Type ale również tworzyć własne, skrojone pod konkretne potrzeby np.:

\n\n
response.setHeader('Content-Type','text/html');\nresponse.setHeader('Jesli-Podoba-sie','Polajkujcie FSGeek na Fb');\n
\n\n

node-server-response-header

\n\n

Oprócz tego jesteśmy w stanie własnoręcznie ustalić (wymusić) kod odpowiedzi, co może być przydatne w niektórych sytuacjach. Taka operacja nie jest trudna i ogranicza się do jednej linijki kodu:

\n\n
response.statusCode=404;\n
\n\n

node-server-response-code

\n\n

Możemy również ustalić wiadomość jaka zostanie wyświetlona obok kodu ;)

\n\n
response.statusMessage='Tutaj nic nie ma';\n
\n\n

node-server-response-code-message

\n\n

A jak to wygląda w praktyce?

\n\n

No w praktyce korzysta się z gotowych bibliotek, które ułatwiają codzienną pracę, pozwalają uprościć pewne czynności oraz dostarczają gotowe rozwiązania dla innych. Możecie w takim razie zapytać po co taki post skoro wiem, że i tak normalnie wykorzystuje się biblioteki. Odpowiedź jest prosta - według mnie nie wystarczy wiedzieć jak korzystać z biblioteki. Warto (jeśli nie trzeba) wiedzieć co siedzi w środku, co tam się dzieje i dlaczego. Dopiero wtedy będziemy mogli świadomie korzystać z narzędzi jednak nie będziemy do nich przywiązani.

\n\n

Istniejących bibliotek do Node’a jest naprawdę sporo (co można sprawdzić tutaj) jednak dla mnie najbardziej znane to na pewno Express.js i Sails.js. I jedną z nich chciałbym się zająć w którymś z przyszłych postów. Póki co jeszcze nie wiem którą, ale chętnie poznam wasze opinie i oczekiwania o którym wolelibyście poczytać. Również jeśli byście chcieli poczytać o innej bibliotece to śmiało piszcie a może napiszę o niej parę słów ;)

2017-11-07 07:00:00 nodejs-jak-postawic-wlasny-serwer-http ckhxjb6o0000yi3umb3hg09jv 2017-11-07 07:00:00 2017-11-07 07:00:00 cj4sivp2800nzi3um1isu1oy7 10 przydatnych bibliotek JavaScript – lipiec 2017 https://devcorner.pl/10-przydatnych-bibliotek-javascript-lipiec-2017/

W tym artykule poznasz 10 przydatnych bibliotek JavaScript. Większość z nich będziesz mógł natychmiast wykorzystać w swoich projektach. Nie przedłużając, przejdźmy do pierwszej z nich. SmartPhoto SmartPhoto to najprostszy sposób na wyświetlenie zdjęć w responsywnym lightboxie. Biblioteka skupia się szczególnie na urządzeniach mobilnych i gestach. UPNG.js UPNG.js to biblioteka służąca do pracy z plikami PNG. […]

\n

Artykuł 10 przydatnych bibliotek JavaScript – lipiec 2017 pochodzi z serwisu Devcorner.

2017-07-06 14:23:32 10-przydatnych-bibliotek-javascript-lipiec-2017 cjj4eqtmw0001i3umen1q8px0 2017-07-06 14:23:32 2017-07-06 14:23:32 ckm81iv5l00020wibzqz4yp18 require(#30) - Q&A, urodziny Require Podcast! https://anchor.fm/require/episodes/require30---QA--urodziny-Require-Podcast-esffqv

W urodzinowym odcinku Require Podcast, odpowiadamy na pytania zadane nam przez słuchaczy. Od koloru naszych skarpetek, przez nasze hobby poza IT, to jak tworzymy podcast, pracę jako programista, osoby które chcielibyśmy zaprosić do podcastu, po JavaScript i inne technologie!
\n
\nTradycyjnie linki do wymienionych rzeczy, oraz timestampy w archiwum na naszej stronie.

2021-03-13 18:00:22 require(30)-qanda-urodziny-require-podcast! ckius9kiw001ki3um2blndfkq 2021-03-13 18:06:22.522 2021-03-13 18:06:22.522 ckmbxo2mo00020vldl32hx3ix Github Actions - Wprowadzenie do CI/CD https://www.youtube.com/watch?v=NeaUvC5_25Y Github Actions to funkcja ułatwiająca automatyzację elementów procesu weryfikacji kodu oraz publikacji aplikacji w oparciu o zdarzenia. Jeżeli jeszcze nie wykorzystujesz GHA w codziennej pracy - dołącz do naszego warsztatu. \n\nStream wysokiej jakości oraz sesja pytań i odpowiedzi jest dostępna na eduweb\nhttps://eduweb.pl/wydarzenia/github-actions 2021-03-16 11:00:18 github-actions-wprowadzenie-do-cicd ckieg15g0001bi3um0fj3gred 2021-03-16 11:29:31.729 2021-03-16 11:29:31.729 @@ -778,6 +791,8 @@ ck87ix4yg01ydi3um79rcasvr Nauczanie online – przydatne aplikacje oraz strony h ck9gvttew020ri3umbsfg4lbw Proste menu restauracyjne RWD http://kody.wig.pl/html/proste-menu-restauracyjne-rwd/ Dzisiaj coś „prostego” menu które wygląda jak prawdziwe menu z restauracji do tego działa w RWD. Powiecie co jest w tym tak trudnego?. Zobaczcie na kropki uzupełniające oraz cenę. Jeżeli ostatnie słow/słowa spadają do drugiej linii wtedy również linia oraz cena „podąża” za ostatnim wyrazem. Zaczniemy od podstawowej konfiguracji css. W przykładzie użyłem „Roboto Mono” […] 2020-04-26 10:00:41 proste-menu-restauracyjne-rwd ckijj62co001hi3um2kbkcy0a 2020-04-26 10:00:41 2020-04-26 10:00:41 ckbi032i8023hi3umh1rmgapi Użycie GeoJson z Leaflet http://kody.wig.pl/javascript/uzycie-geojson-z-leaflet/ Wracamy do serii artykułów w których opisuję różne użycia Leaflet. Dzisiaj poruszymy temat GeoJson. GeoJson jest to nic innego jak plik JSON, który reprezentuje cechy geograficzne. Nie posiada on formalnych standardów, może reprezentować punty, adresy i lokalizacje, kraje, prowincje i wiele innych elementów. Zerknijcie na wpis w wiki Poniżej przykład pliku geojson: { "type": "FeatureCollection", […] 2020-06-16 14:07:02 uzycie-geojson-z-leaflet ckijj62co001hi3um2kbkcy0a 2020-06-16 14:07:02 2020-06-16 14:07:02 ckbw598b4023yi3umboxya1co Dodawanie, przesuwanie i kasowanie markerów – Leaflet http://kody.wig.pl/javascript/dodawanie-przesuwanie-i-kasowanie-markerow-leaflet/ Ten wpis pokaże w jaki sposób dodać, przesuwać oraz kasować markery. Przykład ten można fajnie wykorzystać. Jeżeli chcemy poznać współrzędne np. firmy. Moglibyśmy zrobić formularz w popupie który przechwyci kliknięcie i współrzędne geograficzne, jakieś pole na nazwę firmy, pole na opis firmy. Przydał by się również przycisk który zapisze te dane w bazie, a później […] 2020-06-26 11:40:34 dodawanie-przesuwanie-i-kasowanie-markerow-leaflet ckijj62co001hi3um2kbkcy0a 2020-06-26 11:40:34 2020-06-26 11:40:34 +ckf7h7uo00279i3umgnte2toi Dostępność - projektowanie i semantyczny HTML https://frontlive.pl//dostepnosc-projektowanie-i-semantyczny-html/ Myślenie o dostępnych rozwiązaniach zaczyna się na etapie projektowania, a kończy na pisaniu kodu wraz z testami dostępności. Dziś pokażę Ci na co zwrócić uwagę tworząc design nie… 2020-09-18 00:00:00 dostepnosc-projektowanie-i-semantyczny-html ckgvhpmo0001ji3umfm7ubw86 2020-09-18 00:00:00 2020-09-18 00:00:00 +cjgd9nbhc0119i3um4yj3dxy7 WebAssembly - jak zacząć? https://fsgeek.pl/post/webassembly-jak-zaczac/

Jedną z technologii, która będzie się rozwijać w tym roku jest WebAssembly. Póki co pojawia się dosyć nieśmiało ale coraz częściej. Według mnie wprowadzi małą rewolucję w sposobie jaki piszemy aplikacje internetowe w przyszłości. Dziś postanowiłem sprawdzić jak i czy możemy się nim już teraz pobawić.

\n\n

\n\n

Co to jest WebAssembly?

\n\n

Zanim zaczniemy coś w tym robić warto wiedzieć co to w ogóle jest. WebAssembly jest nowym sposobem pisania aplikacji dla współczesnych przeglądarek internetowych. Jest to otwarty standard rozwijany przez WebAssembly Working Group. Wśród jego członków są przedstawiciele największych firm technologicznych takich jak Apple, Google, Microsoft, Mozilla co pozwala mieć nadzieję, że nie będzie problemów z kompatybilnością nowego standardu z przeglądarkami. Już teraz jest z tym nieźle ponieważ według strony CanIUse wszyscy główni gracze pozwalają na uruchomienie kodu WebAssembly.

\n\n

caniuse

\n\n

WebAssembly albo jak się go w skrócie określa Wasm został napisany nie tyle jako nowy język, którego będzie się trzeba uczyć ale jako sposób kompilacji istniejących programów w C, C++, Rust tak aby dało się je odpalić w przeglądarce z ich natywną szybkością. Taki gotowy moduł jesteśmy w stanie zaimportować do przeglądarki w kodzie Javascript i następnie wykorzystywać natywnie napisane funkcje. Brzmi super, co nie?

\n\n

Jak rozpocząć z tym pracę?

\n\n

O teorii najczęściej mówi się łatwo to z praktyką jest problem. Zasada działania WebAssembly jest banalnie prosta: bierzemy kawałek kodu w C, kompilujemy go do pliku *.wasm i importujemy w kodzie Javascript. Jednak jak się okazuje diabeł tkwi w szczegółach. Zacznijmy w takim razie od początku. Tak jak napisanie prostego kodu w C/C++ nie jest problematyczne to jak go skompilować do odpowiedniego pliku? Póki co współczesne kompilatory nie pozwalają na kompilację do tego formatu (chyba, że coś ominąłem to będę wdzięczny za wskazanie takiego co to potrafi :) ) ale mamy inne narzędzia. Jedną z opcji jest wykorzystanie narzędzia online, które pozwala napisać kod w C/C++, następnie skompilowanie i ściągnięcie właściwego pliku *.wasm - jeśli was to zainteresowało to znajdziecie go tutaj.

\n\n

Drugą opcją jest wykorzystanie odpowiedniego narzędzia na systemie w którym pracujemy. Aktualnie polecanym jest emsdk, który jest polecany na stronie poświęceonej Webassembly i pozwala na kompilację z lini poleceń pliku *.c i *.cpp do *.wasm. Nie będę zanudzał was sposobem instalacji tego skryptu jako, że wszystko jest fajnie opisane na githubie. Przejdzemy za to do tego co tygryski lubią najbardziej czyli kodu.

\n\n

Pierwsza funkcja

\n\n

Czas coś napisać w końcu. Na sam początek prosta funkcja która zwraca wynik dodania do siebie dwóch liczb. Jednym słowem banał

\n\n
int add(int a, int b){\n\treturn a+b;\n}
\n\n

Żeby coś takiego skompilować musimy w konsoli wpisać takie polecenie \v\v\n

em++ helloworld.cpp -Os -s WASM=1 -s SIDE_MODULE=1 -s ONLY_MY_CODE=1 -o helloworld.wasm

\n\n

Dzięki takiemu dobraniu przełączników powstaje minimalny plik *.wasm który zawiera tylko to co jest potrzebne. Warto wykorzystywać narzędzie wasm2wat, które pozwala podejrzeć zawartość tego pliku w postaci tekstowej. Dla mojego pliku wygląda on następująco

\n\n

wasm2wat

\n\n

Szczególnie warto zerknąć na linie 4 i 5 ponieważ za chwilę będą nam potrzebne.

\n\n

Teraz wszystko co trzeba zrobić to zaimportować ten plik w naszym kodzie Javascript. Aktualnie wymaga to trochę kodu ale są plany by w przyszłości można było importować te modułu przy wykorzystaniu taga <script type='module'> (a i mam nadzieję że zwykłe import … from.. będzie działać). Aktualnie by wywołać naszą funkcję z C w przeglądarce musimy wykonać parę kroków:

\n\n
    \n
  • bierzemy plik *.wasm i wsadzamy go do ArrayBuffer
    • \n
  • taką tablicę następnie kompilujemy do WebAssembly.Module()
    • \n
  • i na sam koniec tworzymy instancje takiego modułu przekazując tam odpowiedni obiekt imports i otrzymując w zamian wyeksportowane funkcje
    • \n
\n\n

Opis trochę długi ale w kodzie nie wygląda to najgorzej

\n\n
const imports = {\n    env: {\n        memoryBase:0,\n    }\n  };\n\nfunction loadWebAssembly(fileName) {\n  return fetch(fileName)\n  .then(response => response.arrayBuffer())\n  .then(bytes => WebAssembly.compile(bytes)\n  .then(m => new WebAssembly.Instance(m, imports)))\n};\n\n\n\nloadWebAssembly('helloworld.wasm')\n  .then(instance => {\n    add = instance.exports.__Z3addii;\n\n    console.log(add(5,2)); // 7\n});
\n\n

Parę słów wyjaśnienia co do kodu. Obiekt imports został stworzony na podstawie tego co było w pliku *.wat w linii 4. Również dziwna jest nazwa funkcji, którą pobieram z obiektu exports. Dostała dodatkowy prefix i sufix do nazwy którą nadaliśmy w pliku *.cpp. To jaką nazwę dostanie moja funkcja sprawdziłem w linii 5.

\n\n

Hello World

\n\n

Dlaczego jednak nie zrobiłem, jak to jest w zwyczaju, funkcji, która zwróci napis Hello World. Ponieważ okazuje się, ze jest to troszkę bardziej skomplikowane. WebAssembly posługuje się typami liczbowymi stało- i zmiennopozycyjnymi. Oznacza to, że nie możemy bezpośrednio z funkcji zwrócić stringa ale nie jest to też niemożliwe. Podobnie jak wyżej stwórzmy najpierw funkcję w C++, która zwróci nam nasz upragniony napis

\n\n
const char * hello() {\n  return "Hello World";\n}
\n\n

Po skompilowaniu tego identycznym wyrażeniem co powyżej warto sprawdzić jak wygląda w pliku *.wat.

\n\n

string-wasm2wat

\n\n

Ważne by zauważyć, że w linii 5 pojawił się wpis dotyczący potrzeby umieszczenia w obiekcie imports elementu memory. Okazuje się że stringi w WebAssembly są zwracane w pamięci. Więc po co nam wyeksportowana funkcja __Z5hellov? Ponieważ funkcja w tym przypadku zwraca indeks początku naszego napisu w pamięci. Od tego momentu musimy przechodzić po tablicy aż napotkamy element równy 0 czyli NULL w tablicy ASCII. Również jeśli mamy kilka funkcji które zwracają stringi będą one umieszczone po kolei w pamięci odzielone od siebie pojedynczą wartością 0.

\n\n
const imports = {\n    env: {\n        memoryBase:0,\n        memory: new WebAssembly.Memory({\n          initial: 256\n        }),\n    }\n  };\n\n...\n\n loadWebAssembly('helloworld.wasm')\n  .then(instance => {\n    hello = instance.exports.__Z5hellov;\n    const memoryArr = new Uint8Array(imports.env.memory.buffer)\n    \n    let i = hello();\n    let response = '';\n    while(memoryArr[i]){\n      response = response + String.fromCharCode( memoryArr[i] )\n      i++;\n    }\n\n    console.log(response); // Hello World\n});
\n\n

Przykład jak można wyciągnąć nasz napis z pamięci jest pokazany na dole kodu. Najpierw zamieniam obszar pamięci w tablicę po której mogę następnie iterować. Dodatkowo wykorzystuję metodę fromCharCode żeby zamienić kod ASCII na odpowiedni string.

\n\n

Trzeba przyznać, że wygląda to obiecująco. Jeśli będzie się cały czas rozwijać to może się okazać że za chwilę będziemy ściągać paczki z npm, które będą mieć moduły w WebAssembly. Jest nadzieja, że będzie to działało szybciej niż standardowy JS. Oczywiście nie zastąpi to Javascriptu ale może zmienić sposób w jaki go wykorzystujemy. Przyszłość zapowiada się ciekawie.

2018-04-24 06:05:00 webassembly-jak-zaczac ckhxjb6o0000yi3umb3hg09jv 2018-04-24 06:05:00 2018-04-24 06:05:00 ckcn3evm0024vi3um3pnrc20m Centrowanie mapy uwzględniając szerokość diva – fitBounds leaflet. http://kody.wig.pl/javascript/centrowanie-mapy-uwzgledniajac-szerokosc-diva-fitbounds-leaflet/ Tym razem przykład który pokazuje jak wycentrować mapę z pinem uwzględniając szerokość diva. Mapa posiada div nie jest on stworzony przez mapę tylko jest jako osobny div obok mapy a jedynie wyświetla się nad mapa. Do tego jeżeli mapę będziemy zmniejszasz/powiększać na szerokość to mapa wraz pinem będzie ustawiała się na odpowiednim miejscu. To jak […] 2020-07-15 08:18:45 centrowanie-mapy-uwzgledniajac-szerokosc-diva-fitbounds-leaflet ckijj62co001hi3um2kbkcy0a 2020-07-15 08:18:45 2020-07-15 08:18:45 ckfmjqxhs027ni3um7zkkd0xe Zbiór przykładów użycia leaflet http://kody.wig.pl/javascript/zbior-przykladow-uzycia-leaflet/ Jakiś czas temu przygotowałem zbór przykładów użycia leaflet z mapami OSM. Jeżeli ktoś ma jakieś propozycje co można by jeszcze tam umieścić to poproszę podać w komentarzach. Całe repo znajduje się pod tym adresem - leaflet-examples 2020-09-28 13:07:22 zbior-przykladow-uzycia-leaflet ckijj62co001hi3um2kbkcy0a 2020-09-28 13:07:22 2020-09-28 13:07:22 ckgs8qei00292i3umaub11cj7 Ciekawy efekt z cieniem na każdej literze http://kody.wig.pl/javascript/ciekawy-efekt-z-cieniem-na-kazdej-literze/ Mała odskocznia i trochę styli na wieczór. Dzisiaj prosty przykład użycia text-shadow. Zaczynamy oczywiście od prostego html. Na podstawie klasy 'add-shadow' pobieramy tekst i każdą literę owijamy w span <div class="content"> <h1 class="add-shadow">Frontend development</h1> </div> Teraz przejdźmy do styli. Najlepszym wyborem będzie wąska czcionka i oczywiście musi być pogrubiona. Importujemy ją do naszych styli. @import […] 2020-10-27 17:25:21 ciekawy-efekt-z-cieniem-na-kazdej-literze ckijj62co001hi3um2kbkcy0a 2020-10-27 17:25:21 2020-10-27 17:25:21 @@ -788,7 +803,7 @@ cizh9xbts007ci3umeo653y6b Nowoczesne testowanie kodu w JavaScript. Część Drug ckblg5c00023mi3um6l3jc3fg Webpack 4 - loadery, pluginy i niestandardowa konfiguracja https://frontlive.pl//webpack-konfiguracja/ Cześć 👋 W poprzednim wpisie poznałeś podstawy Webpacka, dzisiaj wykorzystamy tą wiedzę w praktycę i stworzymy konfigurację projektu. Instalacja Nie traćmy czasu na instalację… 2020-06-19 00:00:00 webpack-4-loadery-pluginy-i-niestandardowa-konfiguracja ckgvhpmo0001ji3umfm7ubw86 2020-06-19 00:00:00 2020-06-19 00:00:00 ckmd5ta3x00020vl9nvci7wbr Szybki start z Git Hooks - łatwy deployment | overment https://www.youtube.com/watch?v=nqUm5uzxrBw Git Hooks umożliwiają wykonanie dowolnej akcji w odpowiedzi na różne zdarzenia w repozytorium. W tym filmie wyjaśniam w jaki sposób skonfigurować łatwy deployment aplikacji z wykorzystaniem hooków oraz VPS na DigitalOcean. \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nFacebook: https://facebook.com/overment\nDiscord: https://overment.com/discord\nInstagram: https://overment.com/instagram\nTwitter: https://twitter.com/_overment\n\nTworząc filmy (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. \nChcesz zawsze pozostać na bieżąco z programowaniem? \n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2021-03-17 08:00:17 szybki-start-z-git-hooks-latwy-deployment-or-overment ckieg15g0001bi3um0fj3gred 2021-03-17 08:05:17.805 2021-03-17 08:05:17.806 ckmdqs7zk00020wmhnympoqc9 Zabawa z RxJS - Wstęp do Higher Order Streams https://www.youtube.com/watch?v=eGZohC2LG4w 🔴 Zobacz czym zajmę się w kolejnym projekcie. Będzie to zabawa z biblioteką RxJS. Motywem przewodnim jest nauka zagadnienia Higher Order Stream. Całość przedstawiona graficznie w postaci dwuwymiarowej matrycy, czyli klocków które będziemy w odpowiedni sposób wyświetlać i kolorować.\n\nW tej serii nauczysz się jak korzystać z takich operatorów jak combineAll, concatAll, mergeAll, switchAll, zipAll i jeszcze kilku innych. RxJS i ogólnie strumienie (streamy) są uznawane za dość trudne tematy. Mam nadzieję, że ta seria pomoże Ci to ogarnąć.\n\nBędziemy korzystać z TypeScripta. Ale nie obawiaj się jeśli go nie znasz, ponieważ wszystko wytłumaczę krok po kroku. Kod nie będzie się wiele różnił od tego napisanego w JavaScript. Chodzi o to, że edytor kodu potrafi podpowiedzieć co zwraca dana funkcja, dzięki czemu pisanie i przede wszystkim zrozumienie RxJS staje się o wiele prostsze. Dzięki TypeScriptowi nie muszę się pewnych rzeczy domyślać i "consolelogować" :)\n\nREPO GITHUB Z GOTOWYM KODEM:\nhttps://github.com/lebrande/rxjs-higher-order-streams\n\n0:00 - Czym będziemy się zajmować?\n0:27 - Prezentacja gotowego projektu\n3:34 - Dlaczego użyjemy TypeScripta?\n4:38 - Jakich narzędzi użyjemy?\n5:29 - Podsumowanie\n\n🔥🔥🔥🔥🚀\nZapisz się do newslettera: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\n🔥🔥🔥🔥🚀\n\n🏆 Wspieraj kanał na Patronite\nhttps://patronite.pl/jsdzem\n\n📸 Obserwuj mojego Instagrama\nhttps://www.instagram.com/jsdzem\n\n🤝 Zostań członkiem naszej zamkniętej grupy na Facebooku\nhttps://www.facebook.com/groups/jsdzem\n\n🟣 Dołącz do naszego serwera Discord\nhttps://discord.com/invite/xDwfTUn7mc\n\nNazywam się Jakub Pusiak i tworzę kanał JS Dżem. Uczę programowania na frontendzie. Zawodowo jestem programistą i czerpię z tego ogromną satysfakcję. Wcześniej byłem też trenerem w szkole programowania. Teraz publikuję filmy instruktażowe na YouTube. Na tym kanale dowiesz się jakie triki stosuję na codzień w pracy frontend developera. Nauczę Cię myśleć jak programista, przestrzegę Cię przed typowymi błędami oraz pomogę Ci zbudować warsztat na miarę zawodowca. 2021-03-17 17:30:05 zabawa-z-rxjs-wstep-do-higher-order-streams ckkb3uw6b00002smi6pw37cjt 2021-03-17 17:52:20.336 2021-03-17 17:52:20.336 -ckmen02n600020wld3n0t6eqc Łączymy backend z frontem - Co backend o froncie musi wiedzieć https://www.youtube.com/watch?v=hk7WBFAhPgY Film dedykowany osobom kompletnie zielonych z frontendu a są/chcą być backend developerami. W tym filmie pokażemy sobie jak w czystym JavaScripcie na froncie wykonał "strzał" do API przy użyciu XMLHTTPRequest oraz fetcha - co może Wam dać szersze spojrzenie na przygotowywane przez backendowców API. 2021-03-18 08:32:42 laczymy-backend-z-frontem-co-backend-o-froncie-musi-wiedziec ckjpkgp9u000012mnlbnkxu51 2021-03-18 08:54:14.371 2021-03-18 08:54:14.371 +ckfhhatc0027ji3um2azegffo Dostępność - top 10 najczęściej popełnianych błędów https://frontlive.pl//dostepnosc-top-10-bledow/ Często gdy robię code review napotykam na te same błędy dostępności, powtarzają się one tak często, że postanowiłem zrobić listę najczęściej popełnianych błędów dostępności. Przy… 2020-09-25 00:00:00 dostepnosc-top-10-najczesciej-popelnianych-bledow ckgvhpmo0001ji3umfm7ubw86 2020-09-25 00:00:00 2020-09-25 00:00:00 ckmezr9gl00021ijnr5ucvgvc Nie wierzcie ludziom z internetów! ⌨️ hello roman #154 https://www.youtube.com/watch?v=1uCtpHy-COg ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-03-18 14:35:39 nie-wierzcie-ludziom-z-internetow!-hello-roman-154 ckiswuz9s0017i3um5mg4h7q1 2021-03-18 14:51:18.309 2021-03-18 14:51:18.309 ckmg3zh4k00020wksj5z6zdug Jak korzystać z nowych własności CSS używając styled components i TypeScript? https://blog.piotrnalepa.pl/2021/03/19/jak-korzystac-z-nowych-wlasnosci-css-uzywajac-styled-components-i-typescript/

W artykule przedstawiłem sposób na rozwiązanie problemu z unknown property z pluginu ts-styled-plugin w TypeScript. Opisałem też czym są styled components i jakie są ich zalety.

\nTen wpis Jak korzystać z nowych własności CSS używając styled components i TypeScript? został opublikowany najpierw na Piotr Nalepa - Blog webmasterski | Tutoriale JavaScript, CSS i nie tylko. 2021-03-19 09:27:13 jak-korzystac-z-nowych-wlasnosci-css-uzywajac-styled-components-i-typescript ckekeq7uo0004i3umft185ior 2021-03-19 09:37:26.133 2021-03-19 09:37:26.133 ckmgguu8h00020wmrxscw3ztd Czy Hello Roman MA RACJĘ? https://www.youtube.com/watch?v=CgIUVwvkbyY Wspomniany filmy Hello Romana:\nhttps://www.youtube.com/watch?v=1uCtpHy-COg 2021-03-19 14:52:18 czy-hello-roman-ma-racje ckieg15g0001bi3um0fj3gred 2021-03-19 15:37:44.85 2021-03-19 15:37:44.85 @@ -803,11 +818,6 @@ ckdjgq2o0025pi3umb51hfrel GraphQL + React - apollo, hooki i paginacja https://fr ckedgyyo0026fi3um71763v6i GraphQL + TypeScript - wygeneruj sobie typy! https://frontlive.pl//graphql-generator/ Cześć 👋 Wracamy, po krótkiej przerwie do GraphQLa. Tym chciałbym Ci przybliżyć świetne narzędzie jakim jest GraphQL Code Generator. Dzięki niemu zaoszczędzimy czas i na postawie… 2020-08-28 00:00:00 graphql-typescript-wygeneruj-sobie-typy ckgvhpmo0001ji3umfm7ubw86 2020-08-28 00:00:00 2020-08-28 00:00:00 ckenh1xc0026pi3uma52yckyj Recenzja - TypeScript na poważnie https://frontlive.pl//recenzja-ts-na-powaznie/ Cześć 👋 Ostatnio trafiła w moje ręce książka o TypeScripcie Michała Miszczyszyna - TypeScript na poważnie. Jako iż śledzę autora od dłuższego czasu, ze zniecierpliwieniem czekałem… 2020-09-04 00:00:00 recenzja-typescript-na-powaznie ckgvhpmo0001ji3umfm7ubw86 2020-09-04 00:00:00 2020-09-04 00:00:00 ckexh4w00026xi3um2gv4e3lu Dostępność - to nie tylko niepełnosprawni https://frontlive.pl//dostepnosc-dla-kazdego/ Temat tak rzadko poruszany, prawie nikt o tym nie mówi. Jest to nasza zasługa, twórców treści dla innych. Poruszamy coraz to fajniejsze tematy jak premiera nowego frameworka czy… 2020-09-11 00:00:00 dostepnosc-to-nie-tylko-niepelnosprawni ckgvhpmo0001ji3umfm7ubw86 2020-09-11 00:00:00 2020-09-11 00:00:00 -ckf7h7uo00279i3umgnte2toi Dostępność - projektowanie i semantyczny HTML https://frontlive.pl//dostepnosc-projektowanie-i-semantyczny-html/ Myślenie o dostępnych rozwiązaniach zaczyna się na etapie projektowania, a kończy na pisaniu kodu wraz z testami dostępności. Dziś pokażę Ci na co zwrócić uwagę tworząc design nie… 2020-09-18 00:00:00 dostepnosc-projektowanie-i-semantyczny-html ckgvhpmo0001ji3umfm7ubw86 2020-09-18 00:00:00 2020-09-18 00:00:00 -ckfhhatc0027ji3um2azegffo Dostępność - top 10 najczęściej popełnianych błędów https://frontlive.pl//dostepnosc-top-10-bledow/ Często gdy robię code review napotykam na te same błędy dostępności, powtarzają się one tak często, że postanowiłem zrobić listę najczęściej popełnianych błędów dostępności. Przy… 2020-09-25 00:00:00 dostepnosc-top-10-najczesciej-popelnianych-bledow ckgvhpmo0001ji3umfm7ubw86 2020-09-25 00:00:00 2020-09-25 00:00:00 -ckfrhds00027yi3umdwf21ra7 Dostępność - czytniki ekranowe i testowanie https://frontlive.pl//czytniki-ekranowe/ W poprzednich artykułach pisałem o dobrych praktykach, błędach i filozofii inkluzywności. Dziś pomówimy o czytnikach ekranowych i narzędziach do testowania dostępności. Zaczynajmy… 2020-10-02 00:00:00 dostepnosc-czytniki-ekranowe-i-testowanie ckgvhpmo0001ji3umfm7ubw86 2020-10-02 00:00:00 2020-10-02 00:00:00 -ckglhmo00028vi3umh1348o7p React Query - czy zastąpi Reduxa? https://frontlive.pl//react-query-podstawy/ Deweloperzy niejednokrotnie chcieli, aby jakaś technologia zastąpiła Reduxa, dlaczego? Problemem numer jeden był spory boilerplate i złożoność całego procesu, dla początkujących… 2020-10-23 00:00:00 react-query-czy-zastapi-reduxa ckgvhpmo0001ji3umfm7ubw86 2020-10-23 00:00:00 2020-10-23 00:00:00 -ckgvhpmo00297i3um78znhziq Nowoczesny CSS - min(), max() i clamp() https://frontlive.pl//css-min-max-clamp/ Znacie ten ból posiadania wielu w swoich CSSach? Na przestrzeli lat, wraz ze wsparciem flexboxa i grida przez przeglądarki, ta sytuacja się zmieniała. Jednak flexbox i grid to nie… 2020-10-30 00:00:00 nowoczesny-css-min-max-i-clamp ckgvhpmo0001ji3umfm7ubw86 2020-10-30 00:00:00 2020-10-30 00:00:00 ck11nql3k01q3i3umbr1b88v0 Kompleksy na punkcie Reacta? | Przeprogramowany vlog v0.0.28 https://www.youtube.com/watch?v=H0QET_dMFII Kompleks popularnej technologii może dotykać każdego, kto pracuje z narzędziem nieco mniej popularnym, a jednak sprawdzającym się w każdym realizowanym projekcie. Czy ja, pracując od dobrych kilku lat w Angularze, zmagam się z tego typu wątpliwościami? Czy chciałbym przeskoczyć na to co aktualnie jest na topie? O tym w najnowszym filmie!\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani 2019-09-27 05:00:02 kompleksy-na-punkcie-reacta-or-przeprogramowany-vlog-v0028 ckiyt1v9s001fi3umcgnxbgiu 2019-09-27 05:00:02 2019-09-27 05:00:02 ck135bnuw01q4i3um9v8pa431 Jeden powód! Dlaczego pracuję w tej samej firmie 7 lat? | Przeprogramowany vlog v0.0.29 https://www.youtube.com/watch?v=k1ezbRpBA4I Stosunkowo częsta zmiana pracy w naszej branży jest czymś całkowicie normalnym. Skoro tak, dlaczego Adam pracuje w tej samej firmie już ponad 7 lat? \n\nW tym vLogu dowiesz się też dlaczego warto interesować się częścią biznesową firmy i jak rozmawiać z biznesem. 2019-09-28 06:00:05 jeden-powod-dlaczego-pracuje-w-tej-samej-firmie-7-lat-or-przeprogramowany-vlog-v0029 ckiyt1v9s001fi3umcgnxbgiu 2019-09-28 06:00:05 2019-09-28 06:00:05 cklqup18t00020wm9yk4ryzwk Czysty kod: Podręcznik dobrego programisty | Recenzja książki #2 https://www.youtube.com/watch?v=rvxO18P_x_o Jak pisać kod, który będzie czytelny i łatwy w utrzymaniu? Czysty kod: Podręcznik dobrego programisty podejmuje próbę odpowiedzi na te pytanie. Jest to prawdopodobniej najbardziej kontrowersyjna tematyka w dziedzinie programowania a Robert C. Martin, znany jako Uncle Bob, śmiało przekazuje w niej swoje zasady związane z nazewnictwem, konstruowaniem funkcji, obsługą błędów oraz komentowaniem kodu. \n\nZ recenzji dowiesz się:\nCzego można nauczyć się z tej książki? \nZ jakimi wadami trzeba się liczyć? \nCzy przykłady w Javie będą problemem dla osób nieznających tego języka? \nJaki poziom doświadczenia jest potrzebny, aby przyswoić ten tytuł?\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-03-01 17:00:19 czysty-kod:-podrecznik-dobrego-programisty-or-recenzja-ksiazki-2 ckiyt1v9s001fi3umcgnxbgiu 2021-03-01 17:23:08.045 2021-03-01 17:23:08.045 @@ -815,6 +825,7 @@ ckmf07yr300020vjvgvv289x4 Urodziny Frontlive 🎉 https://frontlive.pl/blog/pier ckmgnw01200020wmpuun3u91d 🧑‍🏫 Rola mentora w nauce programowania i motywacja do pracy – rozmowa z Anią Konopką https://www.youtube.com/watch?v=3IbFGXLrQ7Q Moją gościnią jest Ania Konopka, wielu osobom znana z kernelgonnapanic.pl. Rozmawiamy o tym, jak to jest przejść „na swoje” i zrezygnować ze stałej pracy. Jak się motywować? Jakich narzędzi używać? A także o roli mentora w nauce programowania.\n\n00:00 Rozpoczęcie\n01:13 Rust, WebAssembly, TypeScript, AssemblyScript\n06:11 Przeszłam na swoje\n10:38 Wyzwania wystąpień online\n15:42 Plan dnia, motywacja i narzędzia\n23:56 Jakie są plany na rozwój?\n30:40 Rady dla osób, które chcą się nauczyć programować\n40:06 Jak mentor może pomóc w nauce?\n47:06 Źródła do nauki\n51:18 Porady dla midów i seniorów\n54:46 Zakończenie\n\nLinki:\nNewsletter Ani: https://kernelgonnapanic.netlify.app/newsletter/\nCodesandbox live: https://codesandbox.io/docs/live\nVSCode Live Share: https://code.visualstudio.com/learn/collaboration/live-share\nKurs testowania na frontendzie: https://szkolatestow.online/#frontend\nKsiążka „The Culture Map”: https://lubimyczytac.pl/ksiazka/314121/the-culture-map\nPlatforma do nauki programowania Excercism: https://exercism.io\nFrontend Mentor: https://frontendmentor.io\n\n📘 Kup „TypeScript na poważnie”: https://sklep.typeofweb.com\n\n🔔 Subskrybuj mój kanał: https://www.youtube.com/typeofweb?sub_confirmation=1\n\n🔗 Znajdziesz mnie na:\nBlog – https://typeofweb.com\nFacebook – https://facebook.com/typeofweb\nInstagram – https://instagram.com/michal_typeofweb\nPodcast – https://anchor.fm/typeofweb\n\n✋ Dołącz do społeczności na Discordzie! https://discord.typeofweb.com\n\nMusic: www.bensound.com 2021-03-18 16:57:21 rola-mentora-w-nauce-programowania-i-motywacja-do-pracy-rozmowa-z-ania-konopka cklidcb3o00002pma33gvhnbe 2021-03-19 18:54:36.326 2021-03-19 18:54:36.327 ckmhzbg2b00020vl5bn6jh15q TypeScript: Typy Generyczne #05 https://www.youtube.com/watch?v=swbDf8GaJ9M Piąty już odcinek z serii TypeScript z Domanem.\nW tym odcinku pochylimy się nad zagadnieniem typów generycznych i pokażemy sobie do czego one mogą się nam przydać.\n\nCała playlista o TypeScript:\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n\nNie zapomnij o łapce w górę, subskrybcji i pozostawienia mi komentarza - będę wdzięczny :) 2021-03-20 16:40:12 typescript:-typy-generyczne-05 ckjpkgp9u000012mnlbnkxu51 2021-03-20 17:02:18.9 2021-03-20 17:02:18.9 ckmjh1vy700020vjug1l5hfpn Pomagamy początkującym z ich projektami! #2 https://www.youtube.com/watch?v=YM02FB2KOgQ Dołącz do grupy na FB i zgłoś swój projekt!\n👉 https://www.facebook.com/groups/zaczynamy.programowac/ 👈\n👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n[0:00] Intro\n[3:58] Projekt I - przegląd\n[12:00] Projekt I - Code Review\n[37:58] Projekt II - przegląd\n[40:51] Projekt II - Code Review\n\nPodpinanie formularza:\nhttps://formsubmit.io/\n\nJak dodać README.md?\nhttps://www.makeareadme.com/\n\nposition: sticky\nhttps://css-tricks.com/position-sticky-2/\n\naddEventListener\nhttps://developer.mozilla.org/pl/docs/Web/API/EventTarget/addEventListener\n\nJakiś czas temu założyliśmy kanał na YouTube i kilka osób też odzywało się do nas z podobnymi prośbami, dlatego chcieliśmy połączyć jedno z drugim i nagrać Code Review w formie video. Dzięki temu możemy lepiej przekazać ewentualne uwagi, osoby które się zgłosiły więcej się uczą, a inne osoby początkujący, które oglądają, również mają okazję dowiedzieć się czegoś ciekawego z takiego review. \n\nInicjatywa jest raczej świeża, także kilka rzeczy wymaga doszlifowania, ale mam nadzieję, że mimo tego review w takiej formie niesie ze sobą dodatnią wartość :)\n\nFilip Mamcarczyk\nKacper Sokołowski 2021-03-21 18:00:17 pomagamy-poczatkujacym-z-ich-projektami!-2 ckj9sdcq7000051l5pzwpbq9f 2021-03-21 18:06:32.192 2021-03-21 18:06:32.192 +cjqgfmwdc01cxi3um9t6qc5r9 Cele na 2019 - trochę inaczej ⚽ https://kernelgonnapanic.pl/2019/01/03/cele-na-2019-troche-inaczej/

Dziś mamy trzeci dzień nowego roku. Nie wiem jak Wy, ale ja już mam po dziurki w nosie czytania nagłówków w stylu: “Jak możesz sprawić, by twoje postanowienia noworoczne tym razem udało się zrealizować?”. Jakoś tym razem ten temat denerwuje mnie dużo bardziej niż zwykle.
2019-01-03 09:53:00 cele-na-2019-troche-inaczej-soccer-ball ckesj8kg0000vi3um42jmc86u 2019-01-03 09:53:00 2019-01-03 09:53:00 cizmij0u8007fi3um7t6h5grk Nowoczesne testowanie kodu w JavaScript. Część Trzecia – Pokrycie kodu testami. http://jsdn.pl/pokrycie-kodu-w-javascript-es6/

Tym razem napiszę o trochę innym aspekcie testowania, o sprawdzaniu jak wygląda pokrycie testami tworzonego przez programiste kodu. Polega to mniej więcej na obliczaniu przy pomocy odpowiedniego narzędzia, ile razy każda linijka testowanego kodu została wywołana podczas przeprowadzania testów. Cel mierzenia tego typu danych, może nie być od razu oczywisty, ale uwierzcie mi, jest to … Czytaj dalej Nowoczesne testowanie kodu w JavaScript. Część Trzecia – Pokrycie kodu testami.

\n

Artykuł Nowoczesne testowanie kodu w JavaScript. Część Trzecia – Pokrycie kodu testami. pochodzi z serwisu JS.n00b.

2017-02-26 10:08:32 nowoczesne-testowanie-kodu-w-javascript-czesc-trzecia-pokrycie-kodu-testami cjdc39n3s0003i3umgtxp6w6a 2017-02-26 10:08:32 2017-02-26 10:08:32 cklqw6ruk00020wik0i223265 Język chmury - Terraform dla początkujących (HCL) https://solutionchaser.com/jezyk-chmury-terraform-aws-hcl/

Dzień dobry, mam nadzieje, że macie się dobrze i nie przestajecie się uczyć :)

Dzisiaj zapraszam Was na naukę terraforma, który pozwala tworzyć zasoby w chmurze. Jeśli początek Was przestraszył, nie martwcie się, zaczniemy od banałów.

Co to jest ta chmura?

Chmura

Ta mistyczna chmura to po prostu zasoby (serwery, dyski

2021-03-01 19:03:26 jezyk-chmury-terraform-dla-poczatkujacych-(hcl) ckhdl0sns0014i3um91mvcxsj 2021-03-01 18:04:55.293 2021-03-01 18:04:55.293 ckmi1f5dp00020wl6opeixumc Łączymy backend z frontem - Co backend o froncie musi wiedzieć | pyfestival.pl https://www.youtube.com/watch?v=hk7WBFAhPgY Film dedykowany osobom kompletnie zielonych z frontendu a są/chcą być backend developerami. W tym filmie pokażemy sobie jak w czystym JavaScripcie na froncie wykonać "strzał" do API przy użyciu XMLHTTPRequest oraz fetcha - co może Wam dać szersze spojrzenie na przygotowywane przez backendowców API.\n\nWszystkie prezentacje PyFestivalu: https://pyfestival.pl/\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript 2021-03-20 18:00:15 laczymy-backend-z-frontem-co-backend-o-froncie-musi-wiedziec-or-pyfestival.pl ckjpkgp9u000012mnlbnkxu51 2021-03-20 18:01:10.909 2021-03-20 18:01:10.909 @@ -824,7 +835,6 @@ ckmm31a4z00020wjn8emu7y8o 3 sposoby na dodanie Firebase do Twojej aplikacji Reac ckmnscq1j00020vmi7nya2z8h ESLint & Prettier - Tips and Tricks https://www.youtube.com/watch?v=4u6B3vrMCh0 ESLint i Prettier utrzymają porządek w kodzie za Ciebie. Nie zawracaj sobie więcej głowy wcięciami czy średnikami i skup się na rzeczach istotnych. Sprawdzaj czy poprawnie używasz hooków w Reakcie już w edytorze. Oto sztuczki, które postawią Twój projekt na wyższy poziom. Mało tego - zautomatyzuj je!\n\nStream wysokiej jakości oraz sesja pytań i odpowiedzi jest dostępna na eduweb\nhttps://eduweb.pl/wydarzenia/eslint-prettier 2021-03-24 18:08:05 eslint-and-prettier-tips-and-tricks ckieg15g0001bi3um0fj3gred 2021-03-24 18:33:58.231 2021-03-24 18:33:58.231 cjpzjcr1c01cgi3um6xt546o9 Podsumowanie roku 2018 https://kernelgonnapanic.pl/2018/12/22/podsumowanie-roku-2018/

Koniec roku już za rogiem, więc przyszła pora na refleksje dotyczące minionych 12 miesięcy. W styczniu ruszałam z zestawem zdefiniowanych celów na rok 2018, jednak po drodze wydarzyło się “życie” i zmieniły się również trochę moje priorytety. Zobaczmy, które z zadań udało mi się zrealizować, a które muszę przesunąć na następny rok.
2018-12-22 14:05:00 podsumowanie-roku-2018 ckesj8kg0000vi3um42jmc86u 2018-12-22 14:05:00 2018-12-22 14:05:00 cjqayp4w001cni3um4b2p8epy Frontendowe podsumowanie 2018 - co interesującego pojawiło się w tym roku na konferencjach branżowych? ✨✨✨ https://kernelgonnapanic.pl/2018/12/30/frontendowe-podsumowanie-2018/

Koniec roku już za rogiem, więc postanowiłam zebrać dla Was najciekawsze tematy, które pojawiały się w 2018 roku na konferencjach branżowych. W dziedzinie frontendu dużo się dzieje, więc mam nadzieję, że takie zestawienie okaże się dla Was pomocne. Kilka chwil do Sylwestra nadal jest, więc mamy jeszcze czas by z którymś z tych tematów zapoznać lub sobie go odświeżyć. Enjoy! 👩‍🍳
2018-12-30 14:00:00 frontendowe-podsumowanie-2018-co-interesujacego-pojawilo-sie-w-tym-roku-na-konferencjach-branzowych-sparklessparklessparkles ckesj8kg0000vi3um42jmc86u 2018-12-30 14:00:00 2018-12-30 14:00:00 -cjqgfmwdc01cxi3um9t6qc5r9 Cele na 2019 - trochę inaczej ⚽ https://kernelgonnapanic.pl/2019/01/03/cele-na-2019-troche-inaczej/

Dziś mamy trzeci dzień nowego roku. Nie wiem jak Wy, ale ja już mam po dziurki w nosie czytania nagłówków w stylu: “Jak możesz sprawić, by twoje postanowienia noworoczne tym razem udało się zrealizować?”. Jakoś tym razem ten temat denerwuje mnie dużo bardziej niż zwykle.
2019-01-03 09:53:00 cele-na-2019-troche-inaczej-soccer-ball ckesj8kg0000vi3um42jmc86u 2019-01-03 09:53:00 2019-01-03 09:53:00 cjqp2o68001dci3um7ghe4ims Mentoring w IT https://kernelgonnapanic.pl/2019/01/09/mentor-w-IT/

Dużo piszę na tym blogu o tym, w jaki sposób rozwijać się w zawodzie programisty. Staram się podsuwać Wam przydatne książki, omawiam ciekawe wzorce i opisuję codzienne życie frontendowca. Jednak do tej pory, jedno z lepszych narzędzi pozwalających na rozwój w dziedzinie programowania, umykało naszej uwadze. Dlatego dziś postanowiłam je uchwycić i porozmawiać z Wami o MENTORINGU.
2019-01-09 11:00:00 mentoring-w-it ckesj8kg0000vi3um42jmc86u 2019-01-09 11:00:00 2019-01-09 11:00:00 cjrc6ag0001eci3umdas2a51b React w 300 słowach https://kernelgonnapanic.pl/2019/01/25/react-w-300-slowach/

Jestem właśnie na etapie poszukiwania pracy. I jak się okazuje rozmowy, które prowadzę, mogą być świetną inspiracją dla moich blogowych poczynań. Jedno z pytań, które zostały mi zadane w trakcie rekrutacji, brzmiało: “Czy mogłabyś w kilku zdaniach opowiedzieć czym jest React, do czego służy i jak działa?
2019-01-25 15:00:00 react-w-300-slowach ckesj8kg0000vi3um42jmc86u 2019-01-25 15:00:00 2019-01-25 15:00:00 cjroutmo001ezi3umgxqx6qls Cele na 2019 - styczeń 🏋️‍♀️ https://kernelgonnapanic.pl/2019/02/03/cele-na-2019-styczen/

Kurczę! 🐔
W tamtym roku moje cele mi gdzieś pouciekały, rozpierzchły się i dopiero na koniec roku udało mi się je jako tako ogarnąć. Postanowiłam sobie, że w 2019 będę na bieżąco sprawdzać, jak idzie mi realizacja moich marzeń (no bo przecież marzenia są od realizacji!). 2019-02-03 12:00:00 cele-na-2019-styczen-female ckesj8kg0000vi3um42jmc86u 2019-02-03 12:00:00 2019-02-03 12:00:00 @@ -838,6 +848,7 @@ ckdh8izhc025ii3um7q4ehutz Dolina krzemowa, bro kultura i kobiety, czyli recenzja ckegyja5c026hi3um2e5x9xng Pierwszy miesiąc na "swoim" https://kernelgonnapanic.pl/2020/08/30/pierwszy-miesiac-na-swoim/

Sierpień dobiega końca i jest to odpowiednia pora, by dać Wam znać o tym, co ostatnio zmieniło się u mnie. Ten miesiąc był szczególny, ponieważ był to pierwszy miesiąc pracy w pełni na swoim, skupiając się na rozwoju własnej marki, mojego biznesu i produktów.

2020-08-30 10:35:00 pierwszy-miesiac-na-swoim ckesj8kg0000vi3um42jmc86u 2020-08-30 10:35:00 2020-08-30 10:35:00 ckmkmt0om00020wmk3r0lc1r7 🍿 Web Prasówka #10 https://www.youtube.com/watch?v=WtKkdjezDws Najciekawsze newsy ze świata WebDev.\n⚡️ #JS​​, #HTML​​, CSS, backend, #frontend​​, heheszki, nowe technologie and more... 2021-03-22 13:10:34 web-prasowka-10 ckivz8t54001di3umfv7i4q26 2021-03-22 13:35:22.295 2021-03-22 13:35:22.295 ckmq1xusj00021wmdunxmegr0 Nowa vlogowa seria: Liczby zmiennoprzecinkowe są NIEDOKŁADNE https://tworcastron.pl/blog/nowa-vlogowa-seria-liczby-zmiennoprzecinkowe-sa-niedokladne/

postanowiłem zacząć nagrywać nową serię odcinków, bardziej vlogową, bardziej na luzie. Dalej jednak chcę opowiadać przede wszystkim o programowaniu i jak to wygląda u mnie 🙂  Pojawił się pierwszy odcinek. […]

\n

Artykuł Nowa vlogowa seria: Liczby zmiennoprzecinkowe są NIEDOKŁADNE pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-03-26 08:33:44 nowa-vlogowa-seria:-liczby-zmiennoprzecinkowe-sa-niedokladne ckbbw3jvs000li3umgw19edq9 2021-03-26 08:37:53.06 2021-03-26 08:37:53.06 +ckmymmh9c00020wm749x38hid Jak działa useState w React.js https://tworcastron.pl/blog/jak-dziala-usestate-w-react-js/

useState – jest to funkcja, która pozwala na automatyczne odświeżanie tekstów, zdjęć i nie tylko w czasie rzeczywistym na naszej stronie. Jest to jeden tych ficzerów, które czynią Reacta tak […]

\n

Artykuł Jak działa useState w React.js pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-04-01 08:36:23 jak-dziala-usestate-w-react.js ckbbw3jvs000li3umgw19edq9 2021-04-01 08:39:03.649 2021-04-01 08:39:03.649 ckmrr03jx00020wmkcao5tfpy Język Angielski https://www.youtube.com/watch?v=XysAUVDzC1Y Luźna pogadanka na temat języka angielskiego, parę moich spostrzeżeń, doświadczeń czy kanały które mogę polecić.\n\nKanały o których wspominam:\n\n👉 English For You\nhttps://www.youtube.com/channel/UCaUajKAl3cpGQ6KARpnz_3w\n👉 LetThemTalkTV\nhttps://www.youtube.com/user/LetThemTalkParis\n👉 Speak English podcast\nhttps://www.youtube.com/user/profesorainglescom\n👉 Learn English Lab :\nhttps://www.youtube.com/channel/UCImiNBzWUNuHBm95F8SyMYA\n👉 RealLife English\nhttps://www.youtube.com/user/RealLifeEnglishBH\n👉 Learn English With TV Series\nhttps://www.youtube.com/channel/UCKgpamMlm872zkGDcBJHYDg\n👉 JamesESL English Lessons (engVid)\nhttps://www.youtube.com/user/JamesESL\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript 2021-03-27 13:04:27 jezyk-angielski ckjpkgp9u000012mnlbnkxu51 2021-03-27 13:07:14.301 2021-03-27 13:07:14.301 ckms3toua00020vl7uo57tm5o Jak zrobić pisankę w CSS? https://www.youtube.com/watch?v=2oWrqdLZpsg Potrzebujesz planu nauki programowania? 👉 https://zaczynamyprogramowac.pl/ 👈 \nNasza grupa na FB: https://urlgeni.us/facebook/jzp_grupa\nOdwiedź nasz fanpage: https://urlgeni.us/facebook/jzp_fanpage\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nLink do CodePen: https://codepen.io/Felicjan/pen/XWNvzGP\n\n[0:00] Intro\n[1:13] Kształt jajka i border radius\n[9:45] Wzorki, background-img i radial-gradient\n[16:44] Zygzak i linear-gradient\n[22:19] Serduszkowanie\n\nNa wypadek, gdybyście o 16:55 musieli wrzucać akcenty wielkanocne na stronie to łapcie szybki frontend tutorial o tym jak namalować pisankę w CSS :D\n\nFilip Mamcarczyk i Kacper Sokołowski 2021-03-27 18:47:42 jak-zrobic-pisanke-w-css ckj9sdcq7000051l5pzwpbq9f 2021-03-27 19:06:10.307 2021-03-27 19:06:10.307 ckmsp9t8p00020wl63lwj4df6 Co Łączy Tablicę (Array) i Observable? #RxJS https://www.youtube.com/watch?v=0YxDxFsipS8 ⚠️ Na filmie pomyliłem kolumny z wierszami 😅 Nie musisz się tym specjalnie przejmować, bo to tylko kwestia nazewnictwa. Poprawię to w następnym odcinku.\n\n🔴 Najlepszym sposobem na nauczenie się RxJS i generalnie streamów (lub jak ktoś woli observables) jest wyjście od tablic. Chcę Ci pokazać, że observable to taka sprytna i dynamiczna tablica. Tutaj zrobię taki myk: tablicę zamienię na observable. W kontekście tego odcinka jest to praktycznie równoznaczne. Pokazuję co łączy tablicę i observable, natomiast już w kolejnym odcinku będę już mówił o różnicach pomiędzy nimi.\n\n👉 Co dokładnie tu robię? Wychodzę od prostej funkcji do rysowania klocków na ekranie. Aby narysować całą matrycę używam najpierw pętli "for", czyli konstrukcji, którą poznaje każdy na początku nauki programowania. Następnie zamieniam to na iterowanie po elementach tablic, żeby na końcu pokazać Ci jak to przekształcić na observable.\n\nLink do repo, branch 01-co-laczy-tablice-i-observable:\nhttps://github.com/lebrande/rxjs-higher-order-streams/tree/01-co-laczy-tablice-i-observable\n\n0:00 - Wstęp\n0:18 - Co będziemy robić w tym odcinku?\n1:18 - Omówienie zawartości plików CSS i HTML\n3:53 - Jak są umieszczane klocki na matrycy?\n4:38 - Tworzenie funkcji do renderowania klocka\n10:01 - Jak rysować całą matrycę klocków w pętli?\n10:56 - Jak zamienić pętle na tablice?\n14:50 - Jak zamienić tablice na observables?\n22:13 - Dlaczego RxJS zamiast tablic?\n23:37 - Podsumowanie\n\n🔥🔥🔥🔥🚀\nZapisz się do newslettera: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\n🔥🔥🔥🔥🚀\n\n🏆 Wspieraj kanał na Patronite\nhttps://patronite.pl/jsdzem\n\n📸 Obserwuj mojego Instagrama\nhttps://www.instagram.com/jsdzem\n\n🤝 Zostań członkiem naszej zamkniętej grupy na Facebooku\nhttps://www.facebook.com/groups/jsdzem\n\n🟣 Dołącz do naszego serwera Discord\nhttps://discord.com/invite/xDwfTUn7mc\n\nNazywam się Jakub Pusiak i tworzę kanał JS Dżem. Uczę programowania na frontendzie. Zawodowo jestem programistą i czerpię z tego ogromną satysfakcję. Wcześniej byłem też trenerem w szkole programowania. Teraz publikuję filmy instruktażowe na YouTube. Na tym kanale dowiesz się jakie triki stosuję na codzień w pracy frontend developera. Nauczę Cię myśleć jak programista, przestrzegę Cię przed typowymi błędami oraz pomogę Ci zbudować warsztat na miarę zawodowca. 2021-03-28 05:00:00 co-laczy-tablice-(array)-i-observable-rxjs ckkb3uw6b00002smi6pw37cjt 2021-03-28 05:06:34.441 2021-03-28 05:06:34.441 @@ -846,6 +857,7 @@ ckmvs6qcb00020wmlws421mew Nabór do Szkoły-Angulara https://a-frontman.pl/nabor ckmkpzssz00020vmuqejsg333 React Testing Library - podstawy https://frontlive.pl/blog/react-testing-library-podstawy React Testing Library to najpopularniejsza biblioteka do testowania kodu napisanego w React. Wchodzi ona w skład większej całości - DOM Testing Library... 2021-03-22 00:00:00 react-testing-library-podstawy ckgvhpmo0001ji3umfm7ubw86 2021-03-22 15:04:37.524 2021-03-22 15:04:37.524 ckmt0jzvh00020wldsoyhbekb Rozwój programisty w startupie - Maciej Mendrela| Przeprogramowani ft. Gość #12 https://www.youtube.com/watch?v=vbiMnjYh64o Kolejna rozmowa z gościem Przeprogramowanych już w ten czwartek! \n\nW tym tygodniu spotyka się z nami Maciej Mendrela - Engineering Lead w edrone - aby opowiedzieć o jego perspektywie na rozwój programisty w startupie oraz o drodze od pasjonata front-endu do lidera zespołu.\n\nOd naszego gościa postaramy się wyciągnąć co nieco wiedzy o takich tematach jak AWS i praktyczne wykorzystanie jego możliwości, Vue.js oraz praca w stacku technologicznym składającym się z wielu technologii jednocześnie oraz o codziennych wyzwaniach startupów takich jak edrone, czyli miejsc, w którym eksperymentowanie i nieustanna zmiana to codzienność.\n\nZapraszamy już w ten czwartek o 18:00!\n\nProfil naszego gościa - https://www.linkedin.com/in/maciej-mendrela-163437ba/ 2021-03-28 10:20:37 rozwoj-programisty-w-startupie-maciej-mendrelaor-przeprogramowani-ft.-gosc-12 ckjcy6q5400001hkzvyh1xycf 2021-03-28 10:22:25.373 2021-03-28 10:22:25.373 ckmt0k7ak00120wldac7fovu6 Rozwój programisty w startupie - Maciej Mendrela| Przeprogramowani ft. Gość #12 https://www.youtube.com/watch?v=3RZ8jL6_8YQ Kolejna rozmowa z gościem Przeprogramowanych już w ten czwartek! \n\nW tym tygodniu spotyka się z nami Maciej Mendrela - Engineering Lead w edrone - aby opowiedzieć o jego perspektywie na rozwój programisty w startupie oraz o drodze od pasjonata front-endu do lidera zespołu.\n\nOd naszego gościa postaramy się wyciągnąć co nieco wiedzy o takich tematach jak AWS i praktyczne wykorzystanie jego możliwości, Vue.js oraz praca w stacku technologicznym składającym się z wielu technologii jednocześnie oraz o codziennych wyzwaniach startupów takich jak edrone, czyli miejsc, w którym eksperymentowanie i nieustanna zmiana to codzienność.\n\nZapraszamy już w ten czwartek o 18:00!\n\nProfil naszego gościa - https://www.linkedin.com/in/maciej-mendrela-163437ba/ 2021-03-28 10:20:37 rozwoj-programisty-w-startupie-maciej-mendrelaor-przeprogramowani-ft.-gosc-12 ckiyt1v9s001fi3umcgnxbgiu 2021-03-28 10:22:34.989 2021-03-28 10:22:34.989 +cizwkxu0w0082i3um3sjj7xo3 Daj Się Poznać 2017 – raport z działań. Część 1 http://blog.piotrnalepa.pl/2017/03/05/daj-sie-poznac-2017-raport-z-dzialan-czesc-1/ Raport z pierwszego tygodnia pracy nad projektem zgłoszonym do konkursu Daj Się Poznać 2017. Omówiono założenia projektu oraz status projektu na chwilę pisania artykułu. 2017-03-05 11:13:44 daj-sie-poznac-2017-raport-z-dzialan-czesc-1 ckekeq7uo0004i3umft185ior 2017-03-05 11:13:44 2017-03-05 11:13:44 ckmus5zdt00020wl3i9b8ctw9 Tailwind CSS vs BEM - jak stylować strony? https://www.youtube.com/watch?v=gSyzCw7nJ28 Tailwind CSS vs BEM - jak stylować strony? Stylowanie aplikacji webowych w sposób czysty i produktywny jest nie lada wyzwaniem. Na przestrzeni lat społeczność frontendowa wypracowała wiele różnorodnych narzędzi ułatwiających pisanie kodu CSS. Obecnie jednymi z najpopularniejszych rozwiązań jest framework utility-first Tailwind oraz metodyka nazewnictwa BEM. W tym odcinku Marcin analizuje ich zalety i wady. Wziął pod uwagę takie kwestie jak czytelność, krzywa nauki, produktywność, skalowalność, złożoność build procesu i wiele innych.\n\nPatronem tego odcinka jest it.pracuj.pl, serwis z ofertami pracy dla programistów: http://bit.ly/oferty_pracuj. Znajdziesz tam oferty dostosowane do Twojego stosu technologicznego, poziomu doświadczenia, oczekiwań finansowych oraz lokalizacji. \n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-03-29 16:00:11 tailwind-css-vs-bem-jak-stylowac-strony ckiyt1v9s001fi3umcgnxbgiu 2021-03-29 16:03:06.978 2021-03-29 16:03:06.978 ckmw1fpkj00020vmikmuamj5g 4 gotowe automatyzacje dla twojego bloga https://fsgeek.pl/post/automatyzacje-dla-bloga-integromat-airtable/ Bardzo lubię automatyzować nudne procesy. Dzięki temu, że robią się one automatycznie, jest to bezpieczniejsze, szybsze i oszczędza mi czas. Ostatnio bawię się automatyzacjami na moim blogu i postanowiłem je opisać. Co więcej - możesz je już dzisiaj zaimplementować na swoim blogu i zyskać więcej wolnego czasu. 2021-03-30 16:00:00 4-gotowe-automatyzacje-dla-twojego-bloga ckhxjb6o0000yi3umb3hg09jv 2021-03-30 13:10:23.54 2021-03-30 13:10:23.54 ckmx3sx6400020wmktwrxtvi5 TypeScript: Utility Types - Partial, Required, Readonly, Record #06 https://www.youtube.com/watch?v=3RD2KHQYMvc Szósty odcinek z serii TypeScript z Domanem.\n\nPoznajemy pierwsze 4 utility types z TypeScript: Partial, Required, Readonly i Record. Do odcinka przyda się wiedza z typów generycznych które były w poprzednim #05 odcinku.\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript 2021-03-31 07:00:04 typescript:-utility-types-partial-required-readonly-record-06 ckjpkgp9u000012mnlbnkxu51 2021-03-31 07:04:25.325 2021-03-31 07:04:25.325 @@ -855,13 +867,14 @@ ckmxbf4z300020wljapdkob9r Zegarek prawie w Electronie http://domanart.pl/electro ckmxpchol00020vk1dhwa0gg1 Oswojony Zalgo https://blog.comandeer.pl/oswojony-zalgo.html Wieki temu Isaac Z. Schlueter napisał artykuł na temat projektowania asynchronicznyczh API. Przestrzegł w nim przed wypuszczaniem na świat Zalgo. 2021-03-31 16:58:00 oswojony-zalgo cki52vf40000ci3um2x784hhn 2021-03-31 17:07:30.309 2021-03-31 17:07:30.309 ckmyj7w9t00020wjnnyiw726u NAJSZYBSZY ALGORYTM SORTUJĄCY W JAVASCRIPT! SPRAWDŹ JAK https://www.youtube.com/watch?v=guC-PJnUc4k Skomentuj i daj łapkę w górę! Ale najpierw sprawdź datę publikacji :) Pozdro!\n\nPotrzebujesz planu nauki programowania? 👉 https://zaczynamyprogramowac.pl/ 👈 \nNasza grupa na FB: https://urlgeni.us/facebook/jzp_grupa\nOdwiedź nasz fanpage: https://urlgeni.us/facebook/jzp_fanpage\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nFilip Mamcarczyk i Kacper Sokołowski 2021-04-01 07:00:09 najszybszy-algorytm-sortujacy-w-javascript!-sprawdz-jak ckj9sdcq7000051l5pzwpbq9f 2021-04-01 07:03:44.417 2021-04-01 07:03:44.417 ckmyj7xyk00110wjnurt59gm4 Nawigacja na stronie bez JavaScript?! | overment https://www.youtube.com/watch?v=kfrRZWQSrGc Zwykle możliwości dodania nawigacji pomiędzy stronami wymaga wykorzystania zaawansowanych frameworków JavaScript. W tym filmie dowiesz się o niesamowitym sposobie na to, jak zrobić to bez wykorzystania JavaScriptu! 2021-04-01 06:51:37 nawigacja-na-stronie-bez-javascript!-or-overment ckieg15g0001bi3um0fj3gred 2021-04-01 07:03:46.605 2021-04-01 07:03:46.605 -ckmymmh9c00020wm749x38hid Jak działa useState w React.js https://tworcastron.pl/blog/jak-dziala-usestate-w-react-js/

useState – jest to funkcja, która pozwala na automatyczne odświeżanie tekstów, zdjęć i nie tylko w czasie rzeczywistym na naszej stronie. Jest to jeden tych ficzerów, które czynią Reacta tak […]

\n

Artykuł Jak działa useState w React.js pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-04-01 08:36:23 jak-dziala-usestate-w-react.js ckbbw3jvs000li3umgw19edq9 2021-04-01 08:39:03.649 2021-04-01 08:39:03.649 +cjgq61fc0011ri3umaokm9f43 Bądź produktywny - Prettier https://fsgeek.pl/post/badz-produktywny-prettier/

Jedna z rzeczy która potrafi zająć czas podczas programowania to kijowe formatowanie. Każdy ma swój ulubiony styl, niektórzy wolą spacje nad tabulacją, natomiast inni wolą podwójny cudzysłów od pojedynczego. Ale pracując razem w projekcie warto wystosować wspólny styl i używać narzędzi, które będą tego pilnowały. Ja polecam narzędzie o nazwie Prettier

\n\n

\n\n

Co to jest Prettier?

\n\n

Prettier jest narzędziem, które usprawnia proces tworzenia oprogramowania poprzez wprowadzenie jednolitego formatowania kodu. Usuwa on oryginalne formatowanie plików i wprowadza tam zdefiniowane przez nas reguły.

\n\n

Znalazłem to narzędzie jakieś pół roku temu i wprowadziło ono pewien porządek w kodzie nad którym pracowaliśmy z kolegą. Zniknęły problemy z formatowaniem, które wynikały z pominięcia jakiegoś pliku, drobnych różnic w konfiguracji czy czasami innych preferencji.

\n\n

Dzięki wykorzystaniu Prettiera trochę też zaoszczędziliśmy na czasie. Nie było potrzeby skupiać się na formatowaniu podczas pisania kodu - teraz wystarcza jedna komenda. Dodatkowo podczas przeglądania PR nie ma potrzeby zwracania uwagi na styl - Prettiera da się prosto podpiąć pod CI, żeby samo sprawdziło czy kod spełnia wymogi formatowania a jeśli nie to poinformowało nas o tym.

\n\n

Korzystanie z niego jest banalnie proste tak samo jak instalacja. Możemy go zainstalować globalnie lub tylko lokalnie dla projektu co według mnie jest lepszym rozwiązaniem.

\n\n
yarn add prettier
\n\n

Opcje formatowania

\n\n

Żeby móc formatować tekst warto wiedzieć jakie mamy opcje. A mamy ich całkiem sporo:

\n\n
    \n
  • Print Width - ilość znaków w pojedynczej linii. Domyślnie jest 80 ale możemy zmienić na inną wartość liczbową --print-width 100
    • \n
  • Tab Width - liczba spacji, które są umieszczane na każdym kolejnym poziomie zagnieżdżenia. Domyślnie 2 ale można wstawić inną wartość liczbową --tab-width 4
    • \n
  • Tabs - domyślnie do przesuwania kolejnych zagnieżdżeń są wstawiane spacje. Żeby zmienić trzeba wykorzystać flagę --use-tabs
    • \n
  • Semicolons - domyślnie na końcu każdej linii jest dodawany średnik. Jeśli damy wartość --no-semi to średnik zostanie umieszczony na początku każdej linii gdzie jego brak mógłby powodować błędy
    • \n
  • Quotes - czy chcemy używać pojedynczego cudzysłowu zamiast podwójnego. Domyślnie są podwójny cudzysłów - do zmiany wystarczy dać --single-quote
    • \n
  • Trailing Commas - opcja, która ustawia czy mają być dodawane tzw.trailing commas tam gdzie to możliwe w przypadku struktury mającej więcej niż jedną linię. Mamy tutaj 3 opcje: none - domyślna, nie ustawia trailing commas, es5 - ustawia tylko tam gdzie jest to poprawne dla standardu ES5 (obiekty, tablice), all - wszędzie gdzie to możliwe (np.: argumenty funkcji). Ustawiamy przy pomocy flagi -- trailing-comma np.: --trailing-comma all
    • \n
  • Bracket Spacing - ustawia czy po otwarciu i przed zamknięciem nawiasu w obiekcie mają się pojawić spacje. Domyślnie są wstawiane spacje ale można zmienić przy pomocy --no-bracket-spacing
    • \n
  • JSX Bracekts - domyślnie gdy korzystamy z Prettiera umieszcza on znak > zamykający element JSX w nowej linii. Jeśli chcemy by nie był przenoszony do następnej linii to możemy użyć flagi --jsx-bracket-same-line
    • \n
  • Arrow Function Parentheses - opcja dotyczy funkcjonalności z ES6 czyli arrow functions. W Prettierze możemy ustawić tutaj 2 wartości: avoid - kiedy to tylko możliwe nawiasy będą pominięte dla argumentów, always - nawiasy będą umieszczane zawsze. Domyślnie jest wartość avoid a możemy ją zmienić przy pomocy --arrow-parens always
    • \n
  • Require Pragma - ciekawa opcja na sam koniec jeśli mamy bardzo dużo plików i nie chcemy wszystkich formatować od razu to możemy użyć flagi --require-pragma. Wtedy zostaną sformatowane tylko pliki które mają na górze specjalny komentarz \v
    • \n
\n\n
/**\n * @prettier\n */
\n\n

Wszystkie inne pliki zostaną pomięte.

\n\n

Jak z niego korzystać

\n\n

Z Prettiera korzysta się przy pomocy CLI i nie jest to na szczęście skomplikowane. Najprostszym sposobem jest użycie opcji formatowania o których wspomniałem wyżej bezpośrednio w poleceniu np.:\n

prettier --print-width 100 --use-tabs --single-quote --write "*.js"

\n\n

Na samym końcu ważne jest przełącznik --write, który powoduje nadpisanie formatowania w pliku na ten zdefiniowany przez nas. Oczywiście jeśli użyjemy dużo przełączników to polecenie będzie bardzo długie. Wtedy możemy wykorzystać plik .prettierrc w którym umieścimy naszą konfigurację\n

{\n\t"printWidth": 100,\n\t"useTabs": true,\n\t"singleQuote": true\n}

\n\n

Wtedy wystarczy tylko krótkie polecenie

\n\n
prettier --write "*.js"
\n\n

Oprócz samego nadpisywania plików warte wykorzystania jest również przełącznik --debug-check. Sprawdza on wtedy wszystkie pliki i jeśli jakiś jest sformatowany niezgodnie z naszymi zasadami to wyświetli błąd. Sprawdza się to idealnie by sprawdzić czy nasz PR jest poprawnie sformatowany zanim wciągniemy go do głównego brancha.

2018-05-03 06:45:00 badz-produktywny-prettier ckhxjb6o0000yi3umb3hg09jv 2018-05-03 06:45:00 2018-05-03 06:45:00 ckijj62co02bgi3um1dk03kvr Jak najprościej do WooCommerce dodać InPost http://kody.wig.pl/javascript/jak-najprosciej-do-woocommerce-dodac-inpost/ Jest to najprostszy sposób na dodanie InPost do sklepu - Woocommerce. Nie użyjemy tutaj żadnego dedykowanego pluginu. Przykład ten dodaje jedynie pole gdzie możemy wybrać, czy wyszukać nasz paczkomat. Dodamy te dane do zamówienia ale ich nie przeliczymy. Informacje o paczkomacie pojawiają się również w zamówieniu oraz mailu który jest wysyłany do właściciela sklepu. Najpierw […] 2020-12-11 00:26:57 jak-najprosciej-do-woocommerce-dodac-inpost ckijj62co001hi3um2kbkcy0a 2020-12-11 00:26:57 2020-12-11 00:26:57 ckcl2hx5k024si3um3xxgbyp2 Optymalizacja SEO zdjęć praktyczny opis WebP https://blog.capraweb.pl/optymalizacja-seo-zdjec-praktyczny-opis-webp/

\n

WebP jest nowoczesnym formatem kompresji obrazów rastrowych zarówno tych statycznych jak i animowanych.

\n

Artykuł Optymalizacja SEO zdjęć praktyczny opis WebP pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-07-13 22:17:35 optymalizacja-seo-zdjec-praktyczny-opis-webp ckdstwpeo001mi3um9o1s0rq1 2020-07-13 22:17:35 2020-07-13 22:17:35 ckcmkulqo024ui3umflb832ed Kurs tworzenia motywów na system Prestashop | Wstęp #1 https://blog.capraweb.pl/kurs-tworzenia-motywow-na-system-prestashop-wstep-1/

\n

Dzięki temu kursowi stworzysz swój motyw na system Prestashop. W tej części omawiam platformę oraz podaje wymagania do wykonania projektu.

\n

Artykuł Kurs tworzenia motywów na system Prestashop | Wstęp #1 pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-07-14 23:39:06 kurs-tworzenia-motywow-na-system-prestashop-or-wstep-1 ckdstwpeo001mi3um9o1s0rq1 2020-07-14 23:39:06 2020-07-14 23:39:06 ckcnbdhig024wi3um92l9bvae AMP – sposób na błyskawiczne wczytywanie strony https://blog.capraweb.pl/amp-sposob-na-blyskawiczne-wczytywanie-strony/

\n

Czym jest AMP? Jest to technologia Google, która pozwala na błyskawiczne wczytywanie strony internetowej, przy użyciu specjalnej składni oraz serwowania strony bezpośrednio z serwerów Google.

\n

Artykuł AMP – sposób na błyskawiczne wczytywanie strony pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-07-15 12:01:37 amp-sposob-na-blyskawiczne-wczytywanie-strony ckdstwpeo001mi3um9o1s0rq1 2020-07-15 12:01:37 2020-07-15 12:01:37 ckcoxug280250i3um6mfn51g8 Projekt Vue.JS | Prosta wyszukiwarka z filtrami oraz użyciem transition-group https://blog.capraweb.pl/projekt-vue-js-prosta-wyszukiwarka-z-filtrami-oraz-uzyciem-transition-group/

\n

Jakiś czas temu stworzyłem prosty projekt, którego zadaniem było prezentowania "fiszek" w postaci pytanie-odpowiedź. Jako bazę pytań wykorzystane zostały ...

\n

Artykuł Projekt Vue.JS | Prosta wyszukiwarka z filtrami oraz użyciem transition-group pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-07-16 15:18:26 projekt-vuejs-or-prosta-wyszukiwarka-z-filtrami-oraz-uzyciem-transition-group ckdstwpeo001mi3um9o1s0rq1 2020-07-16 15:18:26 2020-07-16 15:18:26 ckcrlggvc0252i3umhd864a2s Co to Headless CMS? Do czego można go wykorzystać? https://blog.capraweb.pl/co-to-headless-cms-do-czego-mozna-go-wykorzystac/

\n

Terminem Headless CMS (często nazywane również Decoupled CMS) określamy grupę systemów zarządzania treścią, które serwują treść przy użyciu RESTful API.

\n

Artykuł Co to Headless CMS? Do czego można go wykorzystać? pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-07-18 11:54:57 co-to-headless-cms-do-czego-mozna-go-wykorzystac ckdstwpeo001mi3um9o1s0rq1 2020-07-18 11:54:57 2020-07-18 11:54:57 +cjgxaiyqo011xi3umh8z14ib2 MySQL w Node.js https://fsgeek.pl/post/node-mysql/

Backend wiele ważnych zadań do wykonania ale chyba najważniejszym zadaniem jest zapisywanie i wyciąganie informacji z bazy danych. Nieważne czy jest to zwykła baza SQL, Redis czy Elasticsearch potrzebujemy mieć miejsce do zapisywania informacji by ich nie stracić i móc wykorzystać póżniej. W każdym języku mamy dedykowane biblioteki, które pomagają nam w tym. Nie inaczej jest w Node.js, o którym dzisiaj piszę.

\n\n

\n\n

Baza danych MySQL

\n\n

Na początek wybrałem chyba najpopularniejszą bazę danych od której chyba każdy zaczyna. Wspomina się o niej w technikum o profliu informatycznym czy też na studiach więc myślę, że większość programistów od niej zaczynała a już na pewno coś robiła. Aby zacząć najprościej jest pobrać instalator z tej strony. Zainstaluje on lokalny serwer MySQL oraz narzędzie Workbench, które jest takim lepszym PHPMyAdmin ;). Co prawda warto umieć poruszać się w lini poleceń po bazie danych to czasami miło jest przeglądać bazę w takim narzędziu.

\n\n

Zanim przejdziemy już do samego Node’a to chciałbym zwrócić uwagę na jedną opcję podczas instalacji serwera. Jak dojdziemy do opcji Authenticathion Method proponuję wybrać opcję Use Legacy Authentication Method

\n\n

legacy-authentication

\n\n

Jest to spowodowane tym że biblioteka, którą mam zamiar użyć jeszcze nie wspiera nowej metody autentykacji. Już się pojawił PR, który to naprawia więc niedługo będzie można się przełączyć.

\n\n

Połączenie z bazą danych w Nodzie

\n\n

Jak wspomniałem chwilę temu będziemy wykorzystywać osobną bibliotekę do połączenia z bazą danych. Aby ją zainstalować wystarczy jedna komenda w konsoli:

\n\n
yarn add mysql
\n\n

Teraz pierwsza rzecz od jakiej musimy zacząć to zaimportowanie odpowiedniej biblioteki w naszym pliku *.js oraz stworzenie konfiguracji dla naszego połączenia z bazą. Konfiguracja wygląda identycznie do tego co można spotkać w innych językach/frameworkach backendowych czyli musimy podać: adres bazy danych, użytkownika, hasła i do jakiej bazy się podpinamy. Ja na potrzeby konfiguracji stworzyłem zwykły obiekt:

\n\n
const config = {\n    host     : 'localhost',\n    user     : 'root',\n    password : '',\n    database : 'playground',\n}\n\nconst connection = mysql.createConnection(config);
\n\n

Mając konfigurację możemy stworzyć zmienną, która będzie nam służyła do komunikacji z bazą danych.\nPolecany sposób to jest ręczne tworzenie połączenia i potem je zamykanie czyli wygląda to następująco:

\n\n
connection.connect( err => {\n    if(err) throw err;\n});\n\napp.all('/', (req, res)=>{\n    connection.query("Select * from town", (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n    \n})\n\nconnection.end();
\n\n

Wtedy rodzielamy w samo połączenie od query następuje później, co może ułatwić szukanie błędów w razie jakiś problemów. Ale jeśli nie chcemy tak robić to możemy opuścić metodę connect ponieważ przy tworzeniu query połączenie i tak zostanie nawiązane więc kod powyżej można skrócić do następującego:

\n\n
app.all('/', (req, res)=>{\n    connection.query("Select * from town", (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n    \n})
\n\n

Metoda query przyjmuje dwa parametry: pierwszy to zapytanie jakie chcemy skierować do naszej bazy, druga to funkcja która zostanie wywołana po zakończeniu przetwarzania naszego zapytania. Ważne jest by pamiętać że funkcja zostanie wywołana niezależnie czy zapytanie zakończy się sukcesem i dostaniemy wyniki czy też wystąpi błąd w trakcie.

\n\n

Jeśli wszystko się udało to w zmiennej result będzie obiekt z wynikiem naszego zapytania, którym potem możemy dalej obsługiwać. Ja wykorzystałem framewrok express by zwrócić to w postaci JSON’a do przegladarki

\n\n

mysql-query

\n\n

Przekazywanie parametrów do query

\n\n

Oczywiście sytuacja gdzie mamy takiego prostego selecta zdarza się mega rzadko. Dużo częściej potrzebujemy bardziej zaawansowane kwerendy. Przykładem minimalnie trudniejszej kwerendy jest taka gdzie potrzebujemy wyciągnąć jeden rekord na podstawie jakiś kryteriów. Bardzo często jest to już wykorzystywane np.: przy logowaniu gdy potrzebujemy sprawdzić czy użytkownik wpisał poprawne hasło dla loginu. Pierwsza myśl jaka przyjdzie do głowy to jest użycie interpolacji stringa by wpisać odpowiednią wartość do zapytania. Coś takiego

\n\n
app.all('/:id', (req, res)=>{\n    connection.query(`Select * from town where idTown=${req.params.id}`, (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n    \n})
\n\n

Oczywiście tak jak tutaj to w niczym nie szkodzi tak NIGDY tego nie róbcie. Wystawiacie się w ten sposób na SQL Injection. Idealnym przykładem jest historyjka z xkcd

\n\n

sql-injection

\n\n

Dużo lepiej jest skorzystać z funkcji, które escapują nam to co wprowadził nasz użytkownik tak by nie zaszła sytuacja jak na obrazku. Mamy dwie opcje jak temu możemy zapobiec. Pierwsza to wykorzystanie metody escape

\n\n
app.all('/:id', (req, res)=>{\n    connection.query(`Select * from town where idTown=${connection.escape(req.params.id)}`, (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n    \n})
\n\n

Druga opcja to wykorzystanie znaków ? tam gdzie chcemy umieścić nasze dane - zostaną one automatycznie wyescepowane.

\n\n
app.all('/:id', (req, res)=>{\n    connection.query(`Select * from town where idTown= ?`, [req.params.id], (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n    \n})
\n\n

Dodatkowo przy takim wykorzystaniu takiego sposobu na escepowanie możemy w prosty sposób dodawać nowe rekordy do tabeli przekazując odpowiednio spreparowany obiekt.

\n\n
const newTown = {\n    Name: 'NewTown',\n    InhabitantsNb: 12345\n};\n\napp.all('/insert/town', (req, res)=>{ \n    const a = connection.query('Insert into town set ?', newTown, (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n})
\n\n

Obiekt musi mieć pola o identycznych nazwach jak w tabeli. Dzięki temu to zapytanie będzie wyglądało w ten sposób:

\n\n
Insert into town set `Name` = 'NewTown', `InhabitantsNb` = 12345
\n\n

Jak już jesteśmy przy wstawianiu nowych rekordów to gdy to zapytanie się uda to również dostaniemy obiekt w zmiennej. Co prawda nie będzie to nowowstawiony rekord ale informacje, które mogą być przydatne np.: id nowego rekordu. Cały obiekt prezentuje się następująco:

\n\n

mysql-query

\n\n

Trochę tego wyszło ale nie jest to skomplikowane i w ciągu 1h jesteśmy w stanie swobodnie poruszać się w tej bibliotece i komunikować się z bazą danych. Oczywiście na MySQL się świat nie kończy i tak jak wspominałem istnieje wiele innych rozwiązań, które pozwalają na przechowywanie danych. Jest coś o czym byście chcieli przeczytać? Dajcie znać w komentarzach ;)

2018-05-08 06:25:00 mysql-w-nodejs ckhxjb6o0000yi3umb3hg09jv 2018-05-08 06:25:00 2018-05-08 06:25:00 ckmkvf17700020wl8c0k344fl Vue.js dla początkujących - Jak senior developer uczy się nowego frameworka https://www.youtube.com/watch?v=HkK9t49a1aE Vue.js dla początkujących, czyli co zrobiło na mnie szczególnie dobre wrażenie w pierwszych tygodniach pracy z nowym frameworkiem.\n\nPrzechodząc ze świata Angular do świata Vue wiedziałem, że próg wejścia do nowego ekosystemu powinien być stosunkowo niski. Nie myliłem się - dokumentacja okazała się treściwa, a sam framework odpowiednio elastyczny i przygotowany na wiele sytuacji, które mogą wystąpić na produkcji.\n\nZobaczcie wszystkie 5 plusów Vue.js dla początkujących w najnowszym filmie!\n\nKod z filmu - https://github.com/psmyrdek/vue-superpowers\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-03-22 17:00:31 vue.js-dla-poczatkujacych-jak-senior-developer-uczy-sie-nowego-frameworka ckiyt1v9s001fi3umcgnxbgiu 2021-03-22 17:36:26.323 2021-03-22 17:36:26.323 ckmxzfpdg00020wmcmbncm0ch Wideokurs EasyCode https://www.webkrytyk.pl/2021/03/31/wideokurs-easycode/ Dzisiaj na tapet trafia kurs EasyCode. Wcześniej ten kurs znajdował się na stronie FrontDevHero.pl, jednak jakiś czas temu przeniósł się na nową domenę. Dla porządku informuję też, że nie wykupiłem kursu. Do napisania tej recenzji nakłoniła mnie udostępniona za darmo wersja demo kursu. W tym artykule skupiam się wyłącznie na treści kursu. Sama strona kursu … Czytaj dalej Wideokurs EasyCode 2021-03-31 21:42:49 wideokurs-easycode cki2dml0o000di3umgjexb6pk 2021-03-31 21:49:56.404 2021-03-31 21:49:56.404 ckmywa2yu00020wla2xa6x7gs 🔥 [KLIKNIJ] Jeśli być lepszą wersją siebie! 🔥 https://www.youtube.com/watch?v=JXB7rPSPQO8 ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter/\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-04-01 13:00:06 kliknij-jesli-byc-lepsza-wersja-siebie! ckiswuz9s0017i3um5mg4h7q1 2021-04-01 13:09:21.414 2021-04-01 13:09:21.414 @@ -869,6 +882,8 @@ ckn03mxwp00020wmp2tg4khsa Efektywna nauka - Krzysztof Jendrzyca | Przeprogramowa ckn03n6ox00120wmpz5x0ggui Efektywna nauka - Krzysztof Jendrzyca | Przeprogramowani ft. Gość #13 https://www.youtube.com/watch?v=9nswynI_xuU Zapraszamy na rozmowę z Krzysztofem Jendrzycą, autorem bloga skutecznyprogramista.pl. Krzysztof dokumentuje swój rozwój w internecie, dzieląc się przy tym umiejętnościami, taktykami oraz nawykami, które pozwolą Ci szybciej przebyć drogę od juniora do eksperta. \n\nNa live’ie Marcin i Krzysztof wymienią się swoimi doświadczeniami z zakresu efektywnej nauki. Z rozmowy dowiesz się jak Krzysztof podchodzi do procesu zdobywania oraz utrwalania wiedzy. Czy i jak planuje swój programistyczny rozwój? Jak za pomocą notatek oraz działalności w internecie utrwala wiedzę? Jak zarządza swoim czasem oraz koncentracją w świecie pełnym rozproszeń? \n\nZapraszamy już w środę 7 kwietnia o 19:00! 2021-04-02 09:15:19 efektywna-nauka-krzysztof-jendrzyca-or-przeprogramowani-ft.-gosc-13 ckiyt1v9s001fi3umcgnxbgiu 2021-04-02 09:23:16.257 2021-04-02 09:23:16.257 ckn30n2ph00020wl1niadctt6 Mistrz czystego kodu - książka która pomoże Ci się stać profesjonalistą https://www.youtube.com/watch?v=bxUdois4IOc Opinia o książce, luźne przemyślenia i trochę dygresji powiązanych z tematyką książki :) Można spokojnie odsłuchać w tle.\n\nZapraszam do dzielenia się opinią w sekcji komentarzy, jaki i również zostawienie łapki w górę oraz subskrypcji :) 2021-04-04 10:00:27 mistrz-czystego-kodu-ksiazka-ktora-pomoze-ci-sie-stac-profesjonalista ckjpkgp9u000012mnlbnkxu51 2021-04-04 10:22:30.773 2021-04-04 10:22:30.773 ckn4s9a2q00020wmniduzd2ia Open-Closed Principle i Pluginy w praktyce | Lepszy kod w 20 minut https://www.youtube.com/watch?v=RWyiKjKmWPs Open-Closed Principle to dla mnie najważniejsza z zasad SOLIDnego wytwarzania oprogramowania. Jej zastosowanie w praktyce (pluginy) to doskonały sposób na zachowanie spójnej logiki modułu przy jednoczesnym otwarciu go na potencjalne rozszerzenia w przyszłości.\n\nJeśli SOLID kojarzycie tylko z przykładów akademickich oraz skomplikowanych relacji pomiędzy obiektami, to koniecznie sprawdźcie nasz najnowszy film - postaramy się wyjaśnić OCP w taki sposób, żeby korzystać z zalet tego podejścia nawet na poziomie pojedynczych funkcji czy klas.\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-04-05 16:00:11 open-closed-principle-i-pluginy-w-praktyce-or-lepszy-kod-w-20-minut ckiyt1v9s001fi3umcgnxbgiu 2021-04-05 16:03:22.562 2021-04-05 16:03:22.562 +cizyi0v7c0085i3umbnv3fyzn Rozstrzygnięcie konkursu 4Developers! Zwycięzcą konkursu jest … http://blog.piotrnalepa.pl/2017/03/06/rozstrzygniecie-konkursu-4developers-zwyciezca-konkursu-jest/ Ogłoszenie wyników konkursu 4Developers na Blogu Webmasterskim - Piotr Nalepa. 2017-03-06 19:27:39 rozstrzygniecie-konkursu-4developers-zwyciezca-konkursu-jest ckekeq7uo0004i3umft185ior 2017-03-06 19:27:39 2017-03-06 19:27:39 +cjh8ndbuo012ai3ume0bbe78q CSS Transform https://fsgeek.pl/post/css-transform/

Jak wspominałem we wpisie dotyczącym animacji (jeśli go czytaliscie to zapraszam tutaj) podczas tworzenia jej poszczególnych klatek możemy przekształcać animowany obiekt. Poruszać go, zmieniać rozmiar, kształt czy też obrót. Wszytsko to możemy osiągnąć przy pomocy właśności transform w CSS

\n\n

\n\n

CSS transform

\n\n

Oczywiście sama właściwosć sama nic nie zrobi. Wszystko zależy od tego jakie podamy wartości a do wyboru mamy 5 grup przekształceń:

\n\n
    \n
  • Translate
    • \n
  • Scale
    • \n
  • Rotate
    • \n
  • Skew
    • \n
  • Matrix
    • \n
\n\n

Wszystkie przekształcenia mają swoją wersję zarówno dla prostego 2D, gdzie mamy tylko dwie osie X i Y oraz 3D gdzie dochodzi oś Z. Dodatkowo każda grupa ma wersje, gdzie możemy modyfikować element w wybranej osi lub we wszystkich naraz. Pierwsze 4 wartości są proste i sama nazwa wskazuje co robią, natomiast przy wartości matrix, którą omówię na końcu, warto znać podstawową matematykę.

\n\n

Transform translate

\n\n

Transpozycja elementu jest najbardziej podstawowym przekształceniem w graficie. Polega na zmianie pozycji obiektu w przestrzeni. Tutaj warto wspomnieć jak jest skonstruowany układ odniesienia ponieważ wygląda trochę inaczej od tego co znamy ze szkoły a mianowicie jest trochę odwrócony - punkt (0,0) jest w lewym górnym rogu, oś X rośnie od lewej do prawej, natomiast Y rośnie od góry do doły. Mając to na uwadze możemy przesuwać nasz element przy pomocy kilku własności:

\n\n
    \n
  • Translate(x,y) - przesuwa obiekt o x w osi poziomej i y w osi pionowej, za x i y trzeba podać wartość razem z jednostką
    • \n
  • Translate3d(x,y,z) - przesuwamy obiekt nie tylko wzdłuż osi X i Y ale również Z, która prowadzi w naszą stronę
    • \n
  • translateX(x), translateY(y), translateZ(z) - tutaj przesuwamy tylko wzdłuż jednej wybranej osi, pozostałe osie nie zmieniają wartości
    • \n
\n\n

See the Pen Transform - translate by Aleksander (@Feridum) on CodePen.

\n

\n\n

Warte zauważenia jest mały kwadrat po prawej stronie. Ma on dokładnie takie same wymiary jak pozostałe ale dzięki wykorzystaniu perspective(500px) została utworzona perspektywa a sam kwadrat został przesuniety 300 pikseli do tyłu co sprawia wrażenie mniejszego.

\n\n

Scale

\n\n

Tutaj też sytuacja jest prosta ponieważ scale służy nam do zmiany wymiarów naszego elementu. Podobnie jak poprzednio mamy 5 dostępnych własności:

\n\n
    \n
  • Scale(x,y) - zmienia wymiary w dwóch osiach X i Y, za x i y musimy podać liczbę
    • \n
  • Scale3d(x,y,z) - skalowanie odbywa się również w osi Z
    • \n
  • scaleX(x), scaleY(y), scaleZ(z) - możemy ustawić skalowanie tylko w jednej osi
    • \n
\n\n

See the Pen Transform - scale by Aleksander (@Feridum) on CodePen.

\n

\n\n

W przypadku scaleZ ma wpływ na położenie obiektu na osi Z. Położenie na tej osi jest wyliczane na podstawie translateZ przemnożonego przez scaleZ. Należy tylko pamiętać, że skala musi być zdefiniowana przed transpozycją by zadziałała.

\n\n
\ttransform: perspective(500px) translateZ(10px) scaleZ(-30); //nie zadziała\n\ttransform: perspective(500px) scaleZ(-30) translateZ(10px); //zadziała
\n\n

Rotate

\n\n

Pierwsza właściwość, która zmienia sposób prezentacji obiektu. Do tej pory, dla rzutu 2D byliśmy w stanie osiągnąć powyższe własności w inny sposób, jednak dla obrotu musimy już z tego skorzystać. Aby obrócić obiekt możemy wykorzystać jedną z następujących funkcji:

\n\n
    \n
  • rotate(x) - jedyna właściwość dostępna w przypadku korzystania z widoku 2D, obraca obiekt o zadany kąt np.: 20deg - w przypadku pozytywnej wartości obrót będzie zgodnie ze wskazówkami zegara przy wartości negatywnej na odwrót
    • \n
  • rotateX(x), rotateY(y), rotateZ(z) - definiujemy obrót wokół danej osi o dany kąt. Warto wspomnieć, że obrót wokół osi Z daje taki sam efekt jak rotate w widoku 2D
    • \n
  • rotate3d(x,y,z,angle) - najciekawsza funkcja pozwala wybrać wzdłuż jakich osi ma następować obrót obiektu, dzięki czemu można osiągnąć ciekawe efekty.\n
    • \n
\n\n

Warto wspomnieć że rotate3d może być stosowany jako alternatywa dla obrotu wokół pojedynczych osi:

\n\n
    \n
  • rotateX(angle) === rotate3d(1,0,0,angle)
    • \n
  • rotateY(angle) === rotate3d(0,1,0,angle)
    • \n
  • rotateZ(angle) === rotate3d(0,0,1,angle)
    • \n
\n\n

See the Pen Transform - rotate by Aleksander (@Feridum) on CodePen.

\n

\n\n

Na przykładach z codepen warto zwrócić uwagę na zielone kwadraty a szczególnie na dwa pierwsze. Każdy z nich jest obrócony o dokładnie taką samą wartość ale zmienił się punkt wokół którego jest obracany. W pierwszym przypadku jest ustawiony domyślnie w środku kwadratu, natomiast w lekko zielonym ustawiłem go przy pomocy właściwości transform-origin: 0 0 na jego lewy górny róg.

\n\n

Dodatkowo w przypadku obrotu widać jak ważne jest w przypadku obiektów 3d perspektywa. Oba niebieskie kwadraty ją obrócone wokół osi X o ten sam kąt ale w drugi kwadrat został pozbawiony perspektywy co spowodowało utworzenie tak naprawdę jego rzutu prostokątnego na płaszczyznę.

\n\n

Skew

\n\n

Do tej pory właściwości pozwalały na zmianę parametrów kształtu - czyli rozmiar, obrót czy umiejscowienie w przestrzeni. Skew natomiast pozwala na zmianę kształtu obiektu poprzez przechylenie go o dany kąt wzdłuż danej osi. Jest to także wyjątkowa właściwość ponieważ działa tylko dla dwóch osi - X i Y:

\n\n
    \n
  • Skew(x,y) - pochylamy kształt wzdłuż osi X i Y o podany wartość, która musi być kątem np.: 20deg
    • \n
  • skewX(x), skew(y) - pochylamy wzdłuż jednej wybranej osi
    • \n
\n\n

See the Pen Transform - skew by Aleksander (@Feridum) on CodePen.

\n

\n\n

Matrix

\n\n

No i na koniec zostawiłem coś co graficy lubią najbardziej czyli macierz transformacji. W CSS mamy do dyspozycji dwie macierze:

\n\n
    \n
  • Matrix - dla przekształceń 2D
    • \n
  • Matrix3d - dla przekształceń 3D
    • \n
\n\n

Zasadę działania postaram się opisać dla widoku 2D ale będzie to można łatwo przenieść na widok 3D. Oczywiście by to zrozumieć warto mieć podstawowe pojęcie o matematyce a szczególnie o operacjach na macierzy. Własność matrix ma następującą postać matrix(a,b,c,d,tx,ty) co można przestawić w formie macierzy w następujący sposób

\n\n

\\begin{vmatrix}\n a & c & tx \\newline\n b & d & ty \\newline\n \\end{vmatrix}

\n\n

Wpisując odpowiednie wartości pod zmienne możemy zmieniać sposób wyświetlania naszego obiektu. Zaraz pokażę parę podstawowych wartości dla macierzy w przykładach ale warto wiedzieć jak są obliczane wartości dla nowego obiektu.

\n\n

Załóżmy, że mamy kwadrat o szerokości 80px, wysokości 80px i jest umieszczony w lewym górnym rogu ekranu. W związku z tym jego wierzchołki mają następujące współrzędne: (0,0) (80,0) (80, 80) i (0,80). Oczywiście stanie się tak jeśli dodatkowo dodamy transform-origin: 0 0 . Inaczej nasze wierzchołki mają inne współrzędne i obiekt po transformacji będzie wyglądał inaczej.

\n\n

Zaaplikowanie macierzy spowoduje zmianę tych wartości, dzięki czemu powstanie obiekt o innych wymiarach, położeniu lub kształcie. Próbując zmienić obiekt możemy na ślepo próbować wpisywać wartości albo mniej więcej to sobie obliczyć ponieważ nie jest to ciężkie i opiera się na wymnożeniu dwóch macierzy

\n\n

$$\n\\begin{equation}\n\\begin{aligned}\n\\begin{vmatrix}\n a & c & tx \\newline\n b & d & ty \\newline\n 0 & 0 & 1 \\newline\n\\end{vmatrix}
\n\\times
\n\\begin{vmatrix}\n x & \\newline\n y & \\newline\n 1 & \\newline\n\\end{vmatrix} \\\n \\ = \\
\n\\begin{vmatrix}\n new \\ x = a*x + c*y +tx & \\newline\n new \\ y = b*x + d*y +ty & \\newline\n 1 \\newline\n\\end{vmatrix}\n\\end{aligned}\n\\end{equation}\n$$

\n\n

Takie obliczenia musimy zrobić dla każdego wierzchołka osobno. Widząc jak to działa możemy zrobić wszystko to co definiowaliśmy wcześniej:

\n\n

See the Pen Transform - matrix by Aleksander (@Feridum) on CodePen.

\n

\n\n

Oczywiście nie musimy się w to zagłębiać tylko stosować odpowiednie macierze transformacji ale warto czasami wiedzieć jak coś działa pod spodem.

2018-05-16 05:10:00 css-transform ckhxjb6o0000yi3umb3hg09jv 2018-05-16 05:10:00 2018-05-16 05:10:00 ckn5txeyd00020vle47o4gswb YouTube: Moje pierwsze kroki https://typeofweb.com/youtube-moje-pierwsze-kroki/#utm_source=rss&utm_medium=rss&utm_campaign=youtube-moje-pierwsze-kroki

Type of Web - Blog o programowaniu. 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…

\n

Jak za pewne zauważyliście, na blogu Type of Web ostatnio dzieje się mniej. Przyczyna jest prosta: poświęcam sporo czasu przygotowaniu materiałów wideo na YouTube! Type of Web na YouTube Pojawienie się na YouTube od dawna było moim wielkim marzeniem i długo się zbierałem w sobie, aby je spełnić. Czego się obawiałem? Raczej …

\n

Artykuł YouTube: Moje pierwsze kroki pochodzi z serwisu Type of Web.

2021-04-06 09:26:57 youtube:-moje-pierwsze-kroki ckiopy3xs0006i3umgmnv8l52 2021-04-06 09:37:54.421 2021-04-06 09:37:54.421 cjaii8irc00vai3umb4rx9e0e Urodzinowy tydzień czas zacząć! + Ankieta https://www.nettecode.com/urodziny-bloga-ankieta/

Wiecie, że to już prawie rok odkąd założyłam NetteCode? Miało to miejsce dokładnie 1. grudnia 2016 roku. W piątek NetteCode obchodzi swoje pierwsze urodziny! Postanowiłam to uczcić 🙂 Na blogu codziennie wyląduje jakiś artykuł. Będą to artykuły o luźnej tematyce, tj. przeszłość, teraźniejszość, przyszłość bloga. Jego historia, statystyki, dalsze plany. Wpisy będą ukazywać się w […]

\n

Artykuł Urodzinowy tydzień czas zacząć! + Ankieta pochodzi z serwisu NetteCode.

2017-11-27 18:06:03 urodzinowy-tydzien-czas-zaczac-ankieta ckhnmdge00000i3um6batg2gk 2017-11-27 18:06:03 2017-11-27 18:06:03 ckn04nml700020wmmxi2pe2o0 Co potrafi Observable, czego Tablica nie potrafi? #RxJS https://www.youtube.com/watch?v=iR-594u6Edk 🔴 W tym materiale opanujesz tworzenie strumieni w oparciu o interwały czasowe oraz na zdarzenia w przeglądarce. Zanim przeję do rozwiązania w RxJS, pokażę Ci jak można osiągnąć ten sam efekt tylko z tablicami. Przekonasz się, że do pewnych zastosowań RxJS jest o wiele prostszy w użyciu. Kluczem do sukcesu jest zrozumienie jak działa observable, który emituje wartości w czasie oraz na zdarzenia.\n\nWizualizacja działań to najlepszy sposób aby zrozumieć jak działają strumienie. Do dwóch wymiarów - wiersze i kolumny, dochodzi trzeci - czas. Dzięki takiemu podejściu do nauki można zobaczyć jak zachowują się wyemitowane wartości, co przeważnie pozostaje abstrakcją, kiedy programuje się aplikacje, które nie są nastawione na wizualizację danych.\n\n0:00 - Czego się nauczysz w tym video?\n0:27 - Poprawki nazw zmiennych\n1:03 - Renderowanie w interwałach za pomocą tablic\n4:14 - Renderowanie w na zdarzenie za pomocą tablic\n5:28 - Dlaczego potrzebujesz RxJS?\n6:36 - Renderowanie w interwałach za pomocą Obeservable\n8:17 - Renderowanie na zdarzenie za pomocą Obeservable\n10:00 - Różne kombinacje emitowania wartości\n12:54 - Implementacja rozwiązania z pierwszego odcinka \n14:24 - Zapowiedź zaawansowanych operatorów\n\n🔥🔥🔥🔥🚀\nZapisz się do newslettera: https://www.subscribepage.com/jsdzem\nWysyłam tu specjalne materiały, których nie publikuję nigdzie indziej.\n🔥🔥🔥🔥🚀\n\n🏆 Wspieraj kanał na Patronite\nhttps://patronite.pl/jsdzem\n\n📸 Obserwuj mojego Instagrama\nhttps://www.instagram.com/jsdzem\n\n🤝 Zostań członkiem naszej zamkniętej grupy na Facebooku\nhttps://www.facebook.com/groups/jsdzem\n\n🟣 Dołącz do naszego serwera Discord\nhttps://discord.com/invite/xDwfTUn7mc\n\nNazywam się Jakub Pusiak i tworzę kanał JS Dżem. Uczę programowania na frontendzie. Zawodowo jestem programistą i czerpię z tego ogromną satysfakcję. Wcześniej byłem też trenerem w szkole programowania. Teraz publikuję filmy instruktażowe na YouTube. Na tym kanale dowiesz się jakie triki stosuję na codzień w pracy frontend developera. Nauczę Cię myśleć jak programista, przestrzegę Cię przed typowymi błędami oraz pomogę Ci zbudować warsztat na miarę zawodowca. 2021-04-02 09:50:00 co-potrafi-observable-czego-tablica-nie-potrafi-rxjs ckkb3uw6b00002smi6pw37cjt 2021-04-02 09:51:36.475 2021-04-02 09:51:36.475 @@ -877,6 +892,8 @@ ckn60zozz00020vmf8r3t1qs2 Zabezpiecz swoją aplikację z Firebase Authentication ckn7idxzu00020wl5nvxu01u0 TypeScript: Utility Types - Pick, Omit, Exclude, Extract #07 https://www.youtube.com/watch?v=jtNhCPzsTyk Siódmy odcinek z serii TypeScript z Domanem.\n\nPoznajemy kolejne 4 utility types z TypeScript: Pick, Omit, Exclude oraz Extract. Odcinek jest kontynuacją poprzedniego, gdzie poruszone były 4 pierwsze utility types.\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript 2021-04-07 13:49:13 typescript:-utility-types-pick-omit-exclude-extract-07 ckjpkgp9u000012mnlbnkxu51 2021-04-07 13:50:22.554 2021-04-07 13:50:22.554 cjajxoo8800vci3um4zl8edoo Od tego się zaczęło… Trochę historii https://www.nettecode.com/tego-sie-zaczelo-troche-historii/

„Z wykształcenia, pasji i zawodu – programistka” – słowa, które jak mantrę powtarzałam dołączając do moich pierwszych grup na Facebooku, prawie dwa lata temu. I które często przysłaniały to, że bynajmniej nie prowadziłam bloga programistycznego. Owszem, myślałam o takim blogu. Ale zawsze wydawało mi się, że jeszcze za wcześnie, że jeszcze się nie nadaję. Bałam […]

\n

Artykuł Od tego się zaczęło… Trochę historii pochodzi z serwisu NetteCode.

2017-11-28 18:06:17 od-tego-sie-zaczelo-troche-historii ckhnmdge00000i3um6batg2gk 2017-11-28 18:06:17 2017-11-28 18:06:17 ckn0in8wq00020wjm0v5bl9il ❌ Z Gosią Jezierską: Praca dla X-Team i zarządzanie projektem, w którym wciąż zmieniają się osoby 😬 https://www.youtube.com/watch?v=QxFLOT0v6lo Małgorzata Jezierska to Projekt Managerka w znanej firmie X-Team. Na czym polega ta rola? Czemu budowanie XHQ jest trudniejsze? Rozmawiamy o tym i o wielu innych rzeczach!\n\n00:00 Start\n00:30 Projekty\n11:16 Co to jest XHQ? Społeczność X-Teamu\n23:11 Zarządzanie projektem, w którym ciągle zmieniają się osoby\n32:52 Trzy największe wyzwania w XHQ\n38:00 Problemy na linii PM—DEV\n41:55 Porady dla Devów\n46:23 Zakończenie\n\n📘 Kup „TypeScript na poważnie”: https://sklep.typeofweb.com\n\n🔔 Subskrybuj mój kanał: https://www.youtube.com/typeofweb?sub_confirmation=1\n\n🔗 Znajdziesz mnie na:\nBlog – https://typeofweb.com\nFacebook – https://facebook.com/typeofweb\nInstagram – https://instagram.com/michal_typeofweb\nPodcast – https://anchor.fm/typeofweb\n\n✋ Dołącz do społeczności na Discordzie! https://discord.typeofweb.com\n\nMusic: www.bensound.com 2021-04-02 16:11:53 z-gosia-jezierska:-praca-dla-x-team-i-zarzadzanie-projektem-w-ktorym-wciaz-zmieniaja-sie-osoby cklidcb3o00002pma33gvhnbe 2021-04-02 16:23:13.37 2021-04-02 16:23:13.37 +cj06sg128008si3um4umv41v2 Daj Się Poznać 2017 – raport z działań. Część 2 http://blog.piotrnalepa.pl/2017/03/12/daj-sie-poznac-2017-raport-z-dzialan-czesc-2/ W tym wpisie omawiam postępy poczynione w minionym tygodniu w tworzeniu aplikacji konkursowej. Ponarzekam trochę na Wordpress REST API i też trochę go pochwalę. 2017-03-12 14:41:32 daj-sie-poznac-2017-raport-z-dzialan-czesc-2 ckekeq7uo0004i3umft185ior 2017-03-12 14:41:32 2017-03-12 14:41:32 +ciq1fdts0005li3umejl4ee79 Konferencja: PolyConf 2016 https://piecioshka.pl/blog/2016/06/30/konferencja-polyconf-2016.html

\n Zaiste - człowiek legenda.\n To dzięki niemu co roku mamy możliwość uczestniczenia w konferencji\n PolyConf (dawniej\n RuPy). Osobiście uczestniczyłem w PolyConf\n po raz pierwszy. Forma niewiele odbiega od wcześniej wspomnianego RuPy.\n Świetna przygotowanie od strony organizatorów. Tego można się spodziewać,\n od ekipy, która to robi już 10 lat.\n

\n\n

\n Konferencja trwała 3 dni: od 30 czerwca do 2 lipca, 2016 roku.\n

\n\n
\n \n\n
\n PolyConf 2016: June 30 - July 2, Poznań, Polska\n
\n
\n\n

\n Do Poznania dotarliśmy w składzie: Ja, Kamil Kiełbasa oraz Krzysztof\n Syrytczyk samolotem. Świat pięknie wygląda z perspektywy ptaka!\n

\n\n
\n \n\n
\n Widok na Poznań, z samolotu.\n
\n
\n\n

\n Poznań, to piękne miasto. A najładniejsze miejsce to chyba rynek.\n

\n\n
\n \n\n
\n Rynek poznański.\n
\n
\n\n
\n

Dzień 1

\n\n

\n Pierwszy dzień zaczęliśmy od tego co często robię, czyli poranny trening biegowy.\n Bieganie jest świetnym sposobem na rozpoczęcie dnia. Kiedy człowiekowi nie chce się iść do pracy,\n to po kilku kilometrach podnosi się poziom endorfin we krwi\n i od razu jest większa energia na wszystko.\n

\n\n
\n \n\n
\n Poranne bieganie pierwszego dnia konferencji. Trening na Endomondo:\n https://www.endomondo.com/users/15939217/workouts/756612189\n
\n
\n\n
\n \n\n
\n Identyfikator uczestnika.\n
\n
\n\n

\n Jak zwykle, kiedy jestem na konferencji (albo meetupie) to robię notatki.\n Jeśli jesteś zaciekawiony gdzie one są to zapraszam Cię do repozytorium\n na moim profilu na GitHubie: github.com/piecioshka/notes-polyconf-2016\n

\n\n

\n Pierwszy na scenie pojawił się organizator.\n Opowiadał on o swojej roli w organizacji oraz podziękował wszystkim za przybycie\n i zaprosił do uczestniczenia przez kolejne 3 dni w świetnym wydarzeniu.\n

\n\n
\n \n\n
\n Organizator - Zaiste.\n
\n
\n\n

\n Jak to na każdej konferencji do zebrania jest kilka giftów dla uczestników.\n Najlepszym jest oczywiście oryginalna naklejka z logiem konferencji.\n

\n\n
\n \n\n
\n Naklejki z logiem konferencji.\n
\n
\n\n

\n Dzień pierwszy konferencji zakończyliśmy w barze oglądając mecz Polska - Portugalia.\n Niestety w karnych przegraliśmy. W sercu pojawił się smutek. Jednak nie wolno\n zapominać, że doszliśmy tak wysoko - to przecież Ćwierćfinał Mistrzostw Europy.\n

\n
\n\n
\n

Dzień 2

\n\n

\n Drugi dzień zaczęliśmy świetnymi prelekcjami. Natomiast podczas przerwy obiadowej\n mogliśmy zagrać w bubble soccer.\n

\n\n
\n \n\n
\n Tak wygląda wielka kula do której się wchodzi aby wziąć udział w rozgrywkach Bubble Soccera.\n
\n
\n\n

\n Jedzenie i piecie podczas konferencji to bardzo ważne elementy. Człowiek z nudów nie ma co ze sobą zrobić.\n Nuda pojawia się, nie ze względu na słabe prelekcje, tylko na brak interakcji.\n Jeśli siedzimy 8 godzin i nic nie musimy robić, tylko słuchać, to siłą rzeczy ziewanie to normalne zjawisko.\n

\n\n

\n Organizatorzy wiedzą, że programiści lubią smakołyki, więc\n zorganizowali pyszne desery, które mi osobiście MOCNO przypadły go\n gustu i zjadłem ich 3.\n

\n\n
\n \n\n
\n Deser.\n
\n
\n\n

\n Ostatnim wykładem drugiego dnia był talk o projekcie Seif, który poprowadził Douglas Crockford.\n

\n\n
\n \n\n
\n Spotkanie z Douglas-em Crockford-em.\n
\n
\n\n

\n Na zakończenie dnia, zrobiliśmy sobie zdjęcie z Douglasem:\n

\n\n \n
\n\n
\n

Dzień 3

\n\n

\n Trzeciego dnia mieliśmy panel lightning talków, podczas których mogliśmy usłyszeć JavaScript!\n

\n\n
\n \n\n
\n Muzyka i efekty specjalne były zrealizowane dzięki odpowiednim bibliotekom w JavaScript.\n
\n
\n
\n\n
\n

Lesson learned, czyli czego się nauczyłem?

\n\n

\n Wskazówki do slajdów:\n

\n\n
    \n
  • na pierwszym slajdzie link do wersji online oraz do Twittera
    • \n
  • na każdym slajdzie w prawym dolnym rogu Twitter username
    • \n
\n\n

\n Bardzo dziękuję organizatorom, za włożone siły w organizację tak dużego przedsięwzięcia jakim jest\n konferencja ze speakerami z najwyższej półki.\n

\n\n
\n \n\n
\n Piękne niebo nad Warszawą.\n
\n
\n
2016-06-29 22:00:00 konferencja-polyconf-2016 ckbw97zyw0007i3umdszu2ola 2016-06-29 22:00:00 2016-06-29 22:00:00 ckn8wvv5800020wlfccqt1mob Największe kłamstwo o programowaniu ⌨️ hello roman #157 https://www.youtube.com/watch?v=kMU-0rlLTg8 ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter/\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-04-08 13:00:15 najwieksze-klamstwo-o-programowaniu-hello-roman-157 ckiswuz9s0017i3um5mg4h7q1 2021-04-08 13:23:59.469 2021-04-08 13:23:59.469 ckn96qe6a00020wlgzvcvm0iv 💻 Funkcyjny TypeScript Node.js LiveCoding z Escola Mobile 👉 Przykład Mattermost Tempo integration https://www.youtube.com/watch?v=iff-vYFCq_4 🚀 Jak stworzyć projekt TypeScript w node.js ze wsparciem TS-node w czasie rzeczywistym. Mateusz z Escola poprowadzi live coding, a Michał dopełni swoją wiedzą i będzie czuwać nad kodem.\r\nBędziemy starali się programować w 100% funkcyjnie, wyjaśniając, o co w tym chodzi. Prawdziwy przykład. Bez "hello world". \r\n🎯 Cel\r\n👉 Aplikacja, która łączy się z API Tempo (aplikacja do logowania czasu pracy)\r\n▶ Analizuje logi i poprzez webhook\r\n📨 Wyśle na Mattermost powiadomienie dla osób, które zalogowały mniej niż 7 godzin poprzedniego dnia pracy.\r\n\r\n👋 Kanał Escola Mobile: https://www.youtube.com/channel/UCkIm5mpHB4z1i3Gkili4New\r\n\r\n📘 Kup „TypeScript na poważnie”: https://sklep.typeofweb.com​\r\n\r\n🔔 Subskrybuj mój kanał: https://www.youtube.com/typeofweb?sub...​\r\n\r\n🔗 Znajdziesz mnie na:\r\nBlog – https://typeofweb.com​\r\nFacebook – https://facebook.com/typeofweb​\r\nInstagram – https://instagram.com/michal_typeofweb​\r\nPodcast – https://anchor.fm/typeofweb​\r\n\r\n✋ Dołącz do społeczności na Discordzie! https://discord.typeofweb.com​ 2021-04-08 17:43:42 funkcyjny-typescript-node.js-livecoding-z-escola-mobile-przyklad-mattermost-tempo-integration cklidcb3o00002pma33gvhnbe 2021-04-08 17:59:40.354 2021-04-08 17:59:40.354 ckna7z2ae00020wmiindup8vo Optional chaining – czyli jak skrócić kod ?. https://tworcastron.pl/blog/optional-chaining-czyli-jak-skrocic-kod/

natomiast ten zapis jest uproszczeniem tego: Jest więc to sposób na znacznie uproszczenie kodu. Znak ?. sprawdza czy wartość po lewej stronie jest null lub undefined. Jeśli tak, zatrzymuje się […]

\n

Artykuł Optional chaining – czyli jak skrócić kod ?. pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-04-09 11:02:58 optional-chaining-czyli-jak-skrocic-kod-. ckbbw3jvs000li3umgw19edq9 2021-04-09 11:22:10.646 2021-04-09 11:22:10.646 @@ -884,6 +901,8 @@ cizswkxrc007si3um1apcf0xr eduweb.pl – „Kurs TypeScript od Podstaw” – Rec cknblsu4600020wme07dlt1pr CORS w pigułce 🔥 działanie i naprawa https://www.youtube.com/watch?v=h2CQDiNpRgA Z tego materiału dowiesz się czym jest CORS (Cross-Origin Resource Sharing) i jak go można naprawić. \n\n#frontend #cors #javascript\n\nLinki: \nhttps://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\nhttps://mansfeld.pl/bezpieczenstwo/cors-co-to-jest-jak-obejsc-ajax/\nhttps://caniuse.com/cors\nhttps://alfilatov.com/posts/run-chrome-without-cors/\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-04-10 10:25:45 cors-w-pigulce-dzialanie-i-naprawa ckivz8t54001di3umfv7i4q26 2021-04-10 10:37:00.918 2021-04-10 10:37:00.918 ckndhe1ox00020wl3nc5ilvtc Testy na front-endzie: Podstawy https://www.youtube.com/watch?v=w_pkPTCzduY Potrzebujesz planu nauki programowania? 👉https://zaczynamyprogramowac.pl 👈\nNasza grupa na FB: https://www.facebook.com/groups/zaczynamy.programowac/\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nChciałbym Wam opowiedzieć o tym po co testować kod aplikacji front-endowych. Pokażę Wam, jakie są rodzaje testów i kiedy powinniśmy je stosować. Ten odcinek jest wstępem teoretycznym. Kolejne odcinki z serii o testowaniu będą tutorialami, w których pokażemy Wam jak pisać testy.\n\n\nPozdrawiamy!\nFilip Mamcarczyk i Kacper Sokołowski\n\n0:00 - Intro\n1:00 - Po co testować kod?\n2:00 - Testy manualne\n2:22 - Testy automatyczne\n4:59 - Piramida testowania\n6:14 - Zalety testów automatycznych\n7:55 - Outro\n\nIcons made by Freepik from www.flaticon.com 2021-04-11 18:00:12 testy-na-front-endzie:-podstawy ckj9sdcq7000051l5pzwpbq9f 2021-04-11 18:09:04.785 2021-04-11 18:09:04.785 ckneiad1e00020wl68cvz0rpd Jak ładować CSS ⚡️ / Zoptymalizowany Front-end https://www.youtube.com/watch?v=4a-gCtOdBuA Lekcja pochodzi ze szkolenia online dla frontend developerów o optymalizacji frontendu.\n\nSzczegóły szkolenia: https://www.webdevinsider.pl/zoptymalizowany-frontend\nMój Instagram: https://instagram.com/webdevinsider\n\n#frontend #optymalizacja #css 2021-04-12 11:04:40 jak-ladowac-css-zoptymalizowany-front-end ckjrjuqf900002bk2kpgy4181 2021-04-12 11:21:58.658 2021-04-12 11:21:58.658 +cknyngjh200440wmm1rnrb0br ZROZUMIEĆ REACT CONTEXT API - Zarządzanie stanem w ReactJS ? https://www.youtube.com/watch?v=LnaRInixDtI Chcę zrozumieć react context api. Złapałem się ostatnio na tym, że nie rozumiem tej części reacta. Założyłem kanał, by wspomagać mój proces nauki programowania. W filmie staram się wyjaśnić swoimi słowami czym jest react context api. Do czego jest nam potrzebne i jakie problemy rozwiązuje.\n\nKilka przydatnych linków: \n\nhttps://pl.reactjs.org/docs/context.html\nhttps://www.smashingmagazine.com/2020/01/introduction-react-context-api/\nhttps://www.toptal.com/react/react-context-api\nhttps://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367\n\nFB: https://www.facebook.com/Programistafrontend-108775494324661/\n🎯: https://www.programistafrontend.pl/\nIG: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl\n\n-\n\n- 2021-02-17 07:30:17 zrozumiec-react-context-api-zarzadzanie-stanem-w-reactjs ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.535 2021-04-26 13:42:08.535 +ciqmuzls0005mi3um5yn45d8s WarsawJS Meetup #23 https://piecioshka.pl/blog/2016/07/15/warsawjs-meetup-23.html

\n Po raz 23-ci zebraliśmy się aby posłuchać co piszczy w JS-ie. Standardowo mieliśmy 3 prelekcje.\n Tym razem zrobiliśmy (my, organizatorzy) jednak coś czego jeszcze nie było wcześniej...\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Postanowiliśmy, że nagramy sprzed Pałacu Kultury, gdzie umówiliśmy się z Mistrzem Polski w Trialu rowerowym - Michałem Nowakiem.\n Zapraszam w imieniu Michała do odwiedzenia jego fanpage:\n facebook.com/michalnowaktrial/\n

\n\n

\n Wpadliśmy na pomysł, że nagramy 2 zapowiedzi. Jedną standardowo po polsku, drugą natomiast w języku angielskim.\n Takie nagranie będzie celowało w zaproszenie na meetup osób anglojęzycznych.\n Z naszej dwójki to Piotr lepiej włada angielskim,\n więc zapowiedź w tym języku jest w całości opowiedziana przez niego.\n

\n\n

\n Zapraszam do oglądania! Szczególnie warto obejrzeć do końca! 💥\n

\n\n \n\n

\n I teraz "to samo" ale po angielsku.\n

\n\n \n
\n\n
\n

Talk #1: You don't need React to use virtual DOM [EN] Illarion Koperski

\n\n

\n Illarion przedstawił przykład użycia virtual-dom-a bez użycia React-a.\n Virtual DOM to pomysł. Idea, która została zaciągnięta do wielu bibliotek.\n Najpopularniejszą z nich jest oczywiście React - pewnie dlatego, że autorami biblioteki\n są nasi koledzy z firmy Facebook.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Building bulletproof and maintainable JS apps [EN] Michał Załęcki

\n\n

\n Michał opowiadał o nowych technologiach webowych, które pomagają nam, programistom, stworzyć\n kuloodporne aplikacje. Prelegent na co dzień pracuje we Wrocławiu i jest organizatorem\n React.js Wrocław oraz pracuje w\n woumedia.\n

\n\n

\n Usłyszeliśmy o tym co to jest MVC i jak się ten wzorzec rozwinął,\n do takiego stopnia, że powstał Flux i Redux. Zdaniem Michała nie są\n to najlepsze technologie, wkrótce powstaną jeszcze lepsze. Co\n ciekawe, prelegent uważa, że i jest wiele innych języków, które są\n lepsze od JavaScript-u.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: SOA and REST - Tying the knot [EN] Robert Kawecki + Damian Cikowski

\n\n

\n Panowie we dwóch wyszli na scenę i zainscenizowali scenkę. Rozmawiali o doborze technologii do nowej\n aplikacji typu enterprise, czyli bardzo bogatej w funkcjonalności. Panowie doszli do wniosku, że skorzystają z:\n

\n\n
    \n
  • DDD
    • \n
  • CQRS
    • \n
  • Event sourcing - services returns event
    • \n
  • SOAP JSON-RPC over WebSocket
    • \n
  • Client library: esdf-ws-client
    • \n
  • Single service that emulates HTTP GET for performance
    • \n
  • Universal language: RQL
    • \n
\n\n
\n \n\n
\n Prosto ze slide–ów: https://rkaw92.github.io/warsaw-soa-rest/\n
\n
\n\n

GUI

\n\n
    \n
  • Task-based UI
    • \n
  • React.js: actions - commands
    • \n
  • Event handlers in Flux stores mapped 1:1 to Domain Events
    • \n
\n\n
\n Architektura GUI został dobrana do aplikacji, a nie odwrotnie.\n Robert Kawecki 2016-07-13\n
\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-07-14 22:00:00 warsawjs-meetup-23 ckbw97zyw0007i3umdszu2ola 2016-07-14 22:00:00 2016-07-14 22:00:00 cknfrbo2900020wlbh44jxsjl 📈 Startup? Jak budować firmę? Kiedy zrezygnować z etatu? Rozmowa z Tomkiem Gańskim z Just Join IT. https://www.youtube.com/watch?v=1pDen-k64qg Tomasz Gański: współtwórca Just Join IT – startupu będącego pierwszą w Polsce mapę rynku pracy branży IT. Fullstack developer zakochany w technologii m.in. w Scala, Java, Ruby, Typescript czy React. https://justjoin.it/\n\n00:00 Rozpoczęcie\n07:53 Motywacja do stworzenia JJIT\n14:00 Tworzenie produktu\n21:00 Grow hacks\n25:46 Rezygnacja z pracy na etacie\n33:53 Skalowanie firmy\n39:02 Porady dla osób, które chcą budować własny produkt\n47:39 Plany na rozwój JJIT\n55:27 W jakiej technologii robić startup?\n1:00:00 Zakończenie\n\n\n📘 Kup „TypeScript na poważnie”: https://sklep.typeofweb.com\n\n🔔 Subskrybuj mój kanał: https://www.youtube.com/typeofweb?sub_confirmation=1\n\n🔗 Znajdziesz mnie na:\nBlog – https://typeofweb.com\nFacebook – https://facebook.com/typeofweb\nInstagram – https://instagram.com/michal_typeofweb\nPodcast – https://anchor.fm/typeofweb\n\n✋ Dołącz do społeczności na Discordzie! https://discord.typeofweb.com\n\nMusic: www.bensound.com 2021-04-13 08:00:00 startup-jak-budowac-firme-kiedy-zrezygnowac-z-etatu-rozmowa-z-tomkiem-ganskim-z-just-join-it. cklidcb3o00002pma33gvhnbe 2021-04-13 08:22:42.321 2021-04-13 08:22:42.321 cknhpgcsu00021hml1w6pzk9k Notifications API – powiadomienia jako sposób nawiązywania relacji z użytkownikiem https://frontcave.pl/notifications-api-powiadomienia-jako-sposob-nawiazywania-relacji-z-uzytkownikiem/

Spis treści Wprowadzenie Wyświetlanie powiadomień W jakim momencie można wyświetlać użytkownikowi powiadomienia? Jak nie być natrętnym z wyświetlaniem powiadomień? Kod przykładu na Github Klikalny przykład na Github Pages Podsumowanie Wprowadzenie Pokazywanie powiadomień jest przydatne w wielu sytuacjach – idealnym przykładem są czaty, gdzie w oczekiwaniu na odpowiedź drugiej strony możemy zająć się czymś innym niż … Czytaj dalej Notifications API – powiadomienia jako sposób nawiązywania relacji z użytkownikiem

\n

Artykuł Notifications API – powiadomienia jako sposób nawiązywania relacji z użytkownikiem pochodzi z serwisu Front Cave.

2021-04-14 17:00:42 notifications-api-powiadomienia-jako-sposob-nawiazywania-relacji-z-uzytkownikiem ckirm3wzs001li3umfdkcfl6k 2021-04-14 17:05:54.127 2021-04-14 17:05:54.127 cknenl1lc00020wmlxg7mqoy0 React Testing Library - testy w praktyce https://frontlive.pl/blog/react-testing-library-testy-w-praktyce Po ostatnim wprowadzającym wpisie przyszedł czas na przykłady z życia wzięte. Dzisiaj przetestujemy sobie komponent, który bardzo często znajduję się w naszych codebasach. Przez jednych lubiany, przez drugich znienawidzony - formularz... 2021-04-12 00:00:00 react-testing-library-testy-w-praktyce ckgvhpmo0001ji3umfm7ubw86 2021-04-12 13:50:15.12 2021-04-12 13:50:15.12 @@ -891,6 +910,7 @@ ckng13his00020wlaiahvohx0 3 sposoby na zmianę kolejności elementów na stronie ckninlqm500020wla3rc7auqs Moje pierwsze portfolio | progravlog #2 https://tworcastron.pl/blog/moje-pierwsze-portfolio-progravlog-2/

Moje pierwsze portfolio | progravlog #2 [wideo]

\n

Artykuł Moje pierwsze portfolio | progravlog #2 pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-04-15 08:55:20 moje-pierwsze-portfolio-or-progravlog-2 ckbbw3jvs000li3umgw19edq9 2021-04-15 09:01:52.253 2021-04-15 09:01:52.253 cknet241o00020wmogdf01ntb Jak przyswajać i organizować wiedzę programistyczną? https://www.youtube.com/watch?v=0_W597n4KRc Jak przyswajać i organizować wiedzę programistyczną? System Krzysztofa Jendrzycy, gościa ostatniego live'a, jest naprawdę solidny. Pozwala mu poradzić sobie z natłokiem informacji, którymi zalewa nas internet, odpowiednio te informacje organizować oraz wykorzystywać do realizacji projektów związanych z nauką programowania, działalnością w internecie czy też życiem prywatnym. \n\nThe PARA Method: https://fortelabs.co/blog/para/\n\nKrzysztof Jendrzyca to senior fullstack developer, autor bloga skutecznyprogramista.pl. Znajdziesz go na Instagramie i Twitterze pod nickiem kjendrzyca.\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-04-12 16:00:01 jak-przyswajac-i-organizowac-wiedze-programistyczna ckiyt1v9s001fi3umcgnxbgiu 2021-04-12 16:23:29.533 2021-04-12 16:23:29.533 ckniwdgu700021imh64pg7kfr Zlecenie stworzenia strony – pytania, które musisz zadać ⌨️ hello roman #158 https://www.youtube.com/watch?v=wlMlPdjPcsg ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter/\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-04-15 13:00:17 zlecenie-stworzenia-strony-pytania-ktore-musisz-zadac-hello-roman-158 ckiswuz9s0017i3um5mg4h7q1 2021-04-15 13:07:22.879 2021-04-15 13:07:22.879 +cknyngjis00860wmmkjm38cqa KIM JEST PROGRAMISTAFRONTEND - moje 35 urodziny 🎂 / 1000 subów na kanale 🔥 https://www.youtube.com/watch?v=WTz1i8m-dHs 1000 subów na kanale 🙌 1000 wirtualnych piątek 🖐💪\n\nDziękuję każdemu z was z osobna. W tym odcinku mówię trochę o sobie i daję kilka rad przyszłym nie tylko programistom. Odcinek nietypowy. Mniej techniczny ze względu na 1000 subskrybcji na kanale oraz moje 35 urodziny :) 🎂\n\nEnjoy! 🖐🚀\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-02-24 07:30:30 kim-jest-programistafrontend-moje-35-urodziny-1000-subow-na-kanale ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.597 2021-04-26 13:42:08.597 cknm2n4lc00020wmd74xt73np Testy end-to-end w JavaScript. Cypress tutorial https://www.youtube.com/watch?v=V-uIaI-JoH0 Potrzebujesz planu nauki programowania? 👉https://zaczynamyprogramowac.pl 👈\nNasza grupa na FB: https://www.facebook.com/groups/zaczynamy.programowac/\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nW tym wideo dowiesz się jak przy pomocy Cypressa pisać testy end to end przy pomocy JavaScriptu. \n\nLinki:\n\nOdcinek wprowadzający do testowania - https://youtu.be/w_pkPTCzduY\nBehavior Driven Design Testing - https://medium.com/@connecttokc/behaviour-driven-testing-in-node-js-using-mocha-chai-5e0c85258bbe\nAsercje ("should()") - https://docs.cypress.io/guides/references/assertions#Common-Assertions\n\nRepo do ćwiczeń - https://github.com/Jak-zaczac-programowac/e2e-tutorial\n\n\nPozdrawiamy!\nFilip Mamcarczyk i Kacper Sokołowski\n\n0:00 - Intro\n0:47 - Projekt do testowania\n2:37 - Instalacja Cypressa\n3:37 - Funkcje Cypress Test Runnera\n6:01 - Piszemy pierwszy test!\n15:47 - Outro\n\nIcons made by Freepik from www.flaticon.com 2021-04-17 18:22:02 testy-end-to-end-w-javascript.-cypress-tutorial ckj9sdcq7000051l5pzwpbq9f 2021-04-17 18:26:09.793 2021-04-17 18:26:09.793 cknot50j000020wmgkl9v2ftp Startup, korpo czy software house? Wybierz świadomie! (wyniki ankiety) https://www.youtube.com/watch?v=3AczC14Uzfg Zapytaliśmy ponad 150 programistów o to jak wygląda praca w różnych typach organizacji, a dzisiaj prezentujemy wszystkie odpowiedzi!\n\nNasza ankieta pozwoli wam lepiej zrozumieć jak rozmiar i rodzaj firmy wpływają na takie aspekty pracy jak:\n\n1) Twój rozwój / rozwój zespołu\n2) Tydzień pracy\n3) Praca nad projektem\n4) Produktywność\n5) Software house vs firma produktowa\n\nZobaczcie co odpowiedzieli ankietowani no i koniecznie wypowiedzcie się w komentarzach na temat wyników!\n\nWięcej danych - https://bit.ly/ankieta-programowani\n\nWebinar dla fanów JSa! https://przeprogramowani.pl/webinar\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-04-19 16:07:48 startup-korpo-czy-software-house-wybierz-swiadomie!-(wyniki-ankiety) ckiyt1v9s001fi3umcgnxbgiu 2021-04-19 16:23:26.701 2021-04-19 16:23:26.701 cknq0o5li00020wmthj80kkl2 Twoja aplikacja się zepsuła. Wiesz dlaczego, czy zgadujesz? https://fsgeek.pl/post/sentry-logowanie-zdarzen-w-aplikacji/ Programiści dzielą się na dwie grupy - ci co mają logi i ci, co wprowadzą je po pierwszej awarii. Posiadanie logów jest bardzo ważne - bez tego nie wiemy, co się dzieje w naszej aplikacji. Do logowania zdarzeń w aplikacji możemy wykorzystać Sentry. 2021-04-20 16:00:00 twoja-aplikacja-sie-zepsula.-wiesz-dlaczego-czy-zgadujesz ckhxjb6o0000yi3umb3hg09jv 2021-04-20 12:42:03.222 2021-04-20 12:42:03.223 @@ -899,8 +919,6 @@ cknvnkkkp00020wjsatvdzvh9 TypeScript: Utility Types - NonNullable, Parameters, C cknyngja400020wmmk1369u69 WYJĄTKOWYM JUNIOREM BYĆ - co robię, by pomyślnie przejść okres próbny https://www.youtube.com/watch?v=iY_y9CfC6Xw W najnowszym odcinku mówię trochę o swoim okresie próbnym w pracy i daję rady innym początkującym. Wszystko z perspektywy osoby, która jest podczas swojego okresu próbnego w pierwszej firmie w branży IT.\n======\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-04-21 06:30:16 wyjatkowym-juniorem-byc-co-robie-by-pomyslnie-przejsc-okres-probny ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.285 2021-04-26 13:42:08.285 cknyngjcu00110wmmuxcm4d9l NAUKA REACTJS - czego się uczyć i kiedy https://www.youtube.com/watch?v=2GOu5uXnMls W tym filmie staram się pomóc osobom, które nie wiedzą od czego zacząć swoją naukę REACTJS. Pokazuję moje kroki przez które teraz przechodzę, by stać się lepszym react developerem\n\nhttps://kentcdodds.com/blog/javascript-to-know-for-react\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-04-14 06:30:14 nauka-reactjs-czego-sie-uczyc-i-kiedy ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.383 2021-04-26 13:42:08.383 cknyngjg400220wmmy2x6dyx0 W CHWILI ZWĄTPIENIA - #Motywacja do nauki https://www.youtube.com/watch?v=T0zQ23jZ3Ek Dzisiaj coachingowo i kontrowersyjnie :D Jeżeli masz chwilkę zwątpienia lub wahasz się czy zacząć naukę programowania. Obejrzyj ten film. Porcja motywacji na Twoją drogę programisty samouka. Pamiętaj jak masz chwilę zwątpienia lub czujesz, że nie potrafisz przeskoczyć jakiegoś problemu pisz śmiało na daniel@programistafrontend.pl\n\n🖐🚀\n\n====== LINKI ======\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-03-31 06:30:14 w-chwili-zwatpienia-motywacja-do-nauki ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.501 2021-04-26 13:42:08.501 -cknyngjh200440wmm1rnrb0br ZROZUMIEĆ REACT CONTEXT API - Zarządzanie stanem w ReactJS ? https://www.youtube.com/watch?v=LnaRInixDtI Chcę zrozumieć react context api. Złapałem się ostatnio na tym, że nie rozumiem tej części reacta. Założyłem kanał, by wspomagać mój proces nauki programowania. W filmie staram się wyjaśnić swoimi słowami czym jest react context api. Do czego jest nam potrzebne i jakie problemy rozwiązuje.\n\nKilka przydatnych linków: \n\nhttps://pl.reactjs.org/docs/context.html\nhttps://www.smashingmagazine.com/2020/01/introduction-react-context-api/\nhttps://www.toptal.com/react/react-context-api\nhttps://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367\n\nFB: https://www.facebook.com/Programistafrontend-108775494324661/\n🎯: https://www.programistafrontend.pl/\nIG: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl\n\n-\n\n- 2021-02-17 07:30:17 zrozumiec-react-context-api-zarzadzanie-stanem-w-reactjs ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.535 2021-04-26 13:42:08.535 -cknyngjis00860wmmkjm38cqa KIM JEST PROGRAMISTAFRONTEND - moje 35 urodziny 🎂 / 1000 subów na kanale 🔥 https://www.youtube.com/watch?v=WTz1i8m-dHs 1000 subów na kanale 🙌 1000 wirtualnych piątek 🖐💪\n\nDziękuję każdemu z was z osobna. W tym odcinku mówię trochę o sobie i daję kilka rad przyszłym nie tylko programistom. Odcinek nietypowy. Mniej techniczny ze względu na 1000 subskrybcji na kanale oraz moje 35 urodziny :) 🎂\n\nEnjoy! 🖐🚀\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-02-24 07:30:30 kim-jest-programistafrontend-moje-35-urodziny-1000-subow-na-kanale ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.597 2021-04-26 13:42:08.597 cizx6h0ns0084i3um4m1l4ek8 Daj się poznać 2017 – Mój projekt http://jsdn.pl/daj-sie-poznac-2017-moj-projekt/

Trzy dni temu rozpoczęła się kolejna (druga? trzecia? Nie jestem pewny 😛 ) edycja konkursu Daj Się Poznać. W tym roku również zdecydowałem się wziąć w nim udział 🙂 Zasady są bardzo podobne do tych, które obowiązywały ostatnio: do końca mają muszę prowadzić nowy projekt i opisywać postępy na blogu. Jeżeli do końca maja na … Czytaj dalej Daj się poznać 2017 – Mój projekt

\n

Artykuł Daj się poznać 2017 – Mój projekt pochodzi z serwisu JS.n00b.

2017-03-05 21:16:31 daj-sie-poznac-2017-moj-projekt cjdc39n3s0003i3umgtxp6w6a 2017-03-05 21:16:31 2017-03-05 21:16:31 cj018qg7s008ei3um15q7gds4 Podstawy MongoDB – Instalacja i korzystanie z terminala mongo. http://jsdn.pl/podstawy-mongodb/

Gdy mówimy o aplikacjach pisanych tylko w technologiach javascriptowych, najczęściej zakładamy, że do części serwerowej użyjemy jednego z narzędzi node’owych, na przykład express czy sails. Po stronie front endu, mamy do wyboru któryś z popularnych w danej chwili frameworków: angular, reacta itp. Natomiast, jeżeli chodzi o bazę danych zazwyczaj do głowy przychodzi tylko jedna opcja: … Czytaj dalej Podstawy MongoDB – Instalacja i korzystanie z terminala mongo.

\n

Artykuł Podstawy MongoDB – Instalacja i korzystanie z terminala mongo. pochodzi z serwisu JS.n00b.

2017-03-08 17:30:55 podstawy-mongodb-instalacja-i-korzystanie-z-terminala-mongo cjdc39n3s0003i3umgtxp6w6a 2017-03-08 17:30:55 2017-03-08 17:30:55 cj08hi48g008zi3um0iwddm27 Daj się poznać 2017 – Początkowy setup serwera http://jsdn.pl/javascript-noob-projekt-daj-sie-poznac/

Dziś update projektu DSP. Niestety, namacalnych efektów pracy nie ma jeszcze zbyt wiele. Przez to, że ostatnio jestem ciągle w ruchu i z dala od kompa, musiałem skupić się głównie na planowaniu. A jest co planować, bo zanim zacznę konkretne pracę, muszę ustalić kilka „drobnych szczegółów”. Począwszy od architektury a na zagadnieniach związanych z gameplayem … Czytaj dalej Daj się poznać 2017 – Początkowy setup serwera

\n

Artykuł Daj się poznać 2017 – Początkowy setup serwera pochodzi z serwisu JS.n00b.

2017-03-13 19:10:46 daj-sie-poznac-2017-poczatkowy-setup-serwera cjdc39n3s0003i3umgtxp6w6a 2017-03-13 19:10:46 2017-03-13 19:10:46 @@ -908,9 +926,7 @@ cj0jv50co00adi3um9vzad4nm Daj się poznać 2017 – Stan projektu po 3 tygodniac cj0nrb7xk00ari3umf4pth05x Daj się poznać 2017 – Gulpclass czyli połączenie gulpa i TypeScriptu http://jsdn.pl/gulpclass-polaczenie-gulpa-i-typescriptu/

Jedną z pierwszych rzeczy, którą muszę dodać do mojego projektu jest jakiś build system. Przyda mi się on nie tylko do kompilowania kodu TSowego ale także do uruchomiania takich zadań jak bundlowanie, lintowanie czy testowanie kodu. Oczywiście mój wybór padł od razu na gulpa, ale pisanie zadań używając podstawowego JSa, wydawało się trochę dziwne w … Czytaj dalej Daj się poznać 2017 – Gulpclass czyli połączenie gulpa i TypeScriptu

\n

Artykuł Daj się poznać 2017 – Gulpclass czyli połączenie gulpa i TypeScriptu pochodzi z serwisu JS.n00b.

2017-03-24 11:41:53 daj-sie-poznac-2017-gulpclass-czyli-polaczenie-gulpa-i-typescriptu cjdc39n3s0003i3umgtxp6w6a 2017-03-24 11:41:53 2017-03-24 11:41:53 cj0r3mh3400b7i3umbt4whl4t Podstawy MongoDB – Modyfikowanie i usuwanie rekordów w terminalu mongo. http://jsdn.pl/javascript-noob-mongodb/

W ostatnim wpisie pokazałem jak zainstalować mongo, jak je uruchomić i jak stworzyć pierwszą bazę danych. Oprócz tego przedstawiłem dwie proste komendy, pozwalające na dodawanie rekordów do bazy oraz na wyświetlanie zawartości bazy. Dziś pokażę jak wyszukiwać konkretne elementy w bazie danych i jak je aktualizować o nowe wartości. Do tego, na koniec zaprezentuję jak … Czytaj dalej Podstawy MongoDB – Modyfikowanie i usuwanie rekordów w terminalu mongo.

\n

Artykuł Podstawy MongoDB – Modyfikowanie i usuwanie rekordów w terminalu mongo. pochodzi z serwisu JS.n00b.

2017-03-26 19:49:52 podstawy-mongodb-modyfikowanie-i-usuwanie-rekordow-w-terminalu-mongo cjdc39n3s0003i3umgtxp6w6a 2017-03-26 19:49:52 2017-03-26 19:49:52 cj1xz19w000g8i3umg00gesu5 eduweb.pl – Kurs „Angular2 od Podstaw” – Recenzja http://jsdn.pl/eduweb-kurs-angular2-recenzja/

W dzisiejszym poście przedstawię kolejną recenzję wideokursu z serwisu eduweb.pl. Niejako idzie ona w parze z poprzednią moją recenzją, a to dlatego, że tym razem tematem jest framework angular2, czyli technologia bardzo mocno oparta na omawianym ostatnio TypeScript. Kurs Angular2 od podstaw ma na celu wprowadzić osoby początkujące w świat tego potężnego frameworka a ja … Czytaj dalej eduweb.pl – Kurs „Angular2 od Podstaw” – Recenzja

\n

Artykuł eduweb.pl – Kurs „Angular2 od Podstaw” – Recenzja pochodzi z serwisu JS.n00b.

2017-04-25 19:55:30 eduwebpl-kurs-angular2-od-podstaw-recenzja cjdc39n3s0003i3umgtxp6w6a 2017-04-25 19:55:30 2017-04-25 19:55:30 -cizwkxu0w0082i3um3sjj7xo3 Daj Się Poznać 2017 – raport z działań. Część 1 http://blog.piotrnalepa.pl/2017/03/05/daj-sie-poznac-2017-raport-z-dzialan-czesc-1/ Raport z pierwszego tygodnia pracy nad projektem zgłoszonym do konkursu Daj Się Poznać 2017. Omówiono założenia projektu oraz status projektu na chwilę pisania artykułu. 2017-03-05 11:13:44 daj-sie-poznac-2017-raport-z-dzialan-czesc-1 ckekeq7uo0004i3umft185ior 2017-03-05 11:13:44 2017-03-05 11:13:44 -cizyi0v7c0085i3umbnv3fyzn Rozstrzygnięcie konkursu 4Developers! Zwycięzcą konkursu jest … http://blog.piotrnalepa.pl/2017/03/06/rozstrzygniecie-konkursu-4developers-zwyciezca-konkursu-jest/ Ogłoszenie wyników konkursu 4Developers na Blogu Webmasterskim - Piotr Nalepa. 2017-03-06 19:27:39 rozstrzygniecie-konkursu-4developers-zwyciezca-konkursu-jest ckekeq7uo0004i3umft185ior 2017-03-06 19:27:39 2017-03-06 19:27:39 -cj06sg128008si3um4umv41v2 Daj Się Poznać 2017 – raport z działań. Część 2 http://blog.piotrnalepa.pl/2017/03/12/daj-sie-poznac-2017-raport-z-dzialan-czesc-2/ W tym wpisie omawiam postępy poczynione w minionym tygodniu w tworzeniu aplikacji konkursowej. Ponarzekam trochę na Wordpress REST API i też trochę go pochwalę. 2017-03-12 14:41:32 daj-sie-poznac-2017-raport-z-dzialan-czesc-2 ckekeq7uo0004i3umft185ior 2017-03-12 14:41:32 2017-03-12 14:41:32 +cko2njcf500020wmm62xa1p2t Frontend Thursday vol. 35 https://blog.vived.io/frontend-thursday-vol-35/ W dzisiejszej edycji mamy dla Was zwiastun końca Internet Explorer 11, Stadie dla przeglądarek i krótkie podsumowanie ng-conf 2021. 2021-04-29 08:30:00 frontend-thursday-vol.-35 ckmor5k8y000044moj65m13y0 2021-04-29 08:55:24.065 2021-04-29 08:55:24.066 cj0bd185s009fi3um7jv22bq5 [JS] Pobieranie postów typu własnego za pomocą WordPress REST API http://blog.piotrnalepa.pl/2017/03/15/js-pobieranie-postow-typu-wlasnego-za-pomoca-wordpress-rest-api/ W artykule opisałem sposób na pobieranie danych z custom post types za pomocą Wordpress REST API i kodu JavaScript. Dzięki niemu będziesz w stanie zbudować źródło contentu dla swojej aplikacji internetowej. 2017-03-15 19:28:58 js-pobieranie-postow-typu-wlasnego-za-pomoca-wordpress-rest-api ckekeq7uo0004i3umft185ior 2017-03-15 19:28:58 2017-03-15 19:28:58 cj0gucsk0009xi3um08cj8svt Daj Się Poznać 2017 – raport z działań. Część 3 http://blog.piotrnalepa.pl/2017/03/19/daj-sie-poznac-2017-raport-z-dzialan-czesc-3/ Raport z trzeciego tygodnia prac na projektem League Manager. Krótko o problemach, które napotkałem w trakcie minionego tygodnia oraz o sposobach, w jaki udało się je pokonać. 2017-03-19 15:32:42 daj-sie-poznac-2017-raport-z-dzialan-czesc-3 ckekeq7uo0004i3umft185ior 2017-03-19 15:32:42 2017-03-19 15:32:42 cj0o29seo00ati3um34nnfdpc [PHP] Jak zwiększyć wydajność REST API wbudowanego w WordPress? http://blog.piotrnalepa.pl/2017/03/24/php-jak-zwiekszyc-wydajnosc-rest-api-wbudowanego-w-wordpress/ W artykule przedstawiłem problem wydajności aplikacji korzystającej z WordPress REST API. Zaproponowałem rozwiązanie, które pomogło mi w pewien sposób ominąć problem przy niewielkim nakładzie pracy i bez potrzeby korzystania z dodatkowego oprogramowania. 2017-03-24 16:48:42 php-jak-zwiekszyc-wydajnosc-rest-api-wbudowanego-w-wordpress ckekeq7uo0004i3umft185ior 2017-03-24 16:48:42 2017-03-24 16:48:42 @@ -923,6 +939,7 @@ cknyngjis00870wmmbs3br1zg KURS HTML I CSS OD PODSTAW - CSS Selektory, ważność cknyngm9902890wmm2tfy7exn JVM Tuesday vol. 32 https://blog.vived.io/jvm-tuesday-vol-32/ Świąteczny tydzień rządzi się swoimi prawami, w związku z czym nie pojawiło się za wiele "łamiących" newsów. Za to mamy dla Was trzy przeglądówki, które z pewności będą interesujące. Zapraszamy do lektury! 2021-04-06 07:00:00 jvm-tuesday-vol.-32 ckmor5k8y000044moj65m13y0 2021-04-26 13:42:12.142 2021-04-26 13:42:12.142 cknyngmak03090wmmb96hyded Software Craftsmanship Saturday vol. 32 https://blog.vived.io/software-craftsmanship-saturday-vol-32/ Kolejna sobota, tym razem w większości skupiająca się na wszystkich ogłoszeniach, jakie ostatnimi czasy ukazały się w sieci w kontekście Google. \n\nOprócz tego mamy też rozważania na temat systemów operacyjnych oraz jak naukowcy używają gier tekstowych do rozwijania algorytmów rozumienia języka. 2021-04-10 07:00:00 software-craftsmanship-saturday-vol.-32 ckmor5k8y000044moj65m13y0 2021-04-26 13:42:12.188 2021-04-26 13:42:12.188 cknyngmco03380wmm7srz1cn1 Software Craftsmanship Saturday vol. 30 https://blog.vived.io/software-craftsmanship-saturday-vol-30/ Dzisiaj mam dla Was dwa bydlęta z firmowych blogów - o użyciu Tracingu w Slacku oraz sposobie utrzymania jakości danych w Uberze. Całość dodatkowo doprawiona została informacją o Chińskim mini-GDPR - tak, to się naprawdę dzieje 😱 2021-03-27 08:00:16 software-craftsmanship-saturday-vol.-30 ckmor5k8y000044moj65m13y0 2021-04-26 13:42:12.264 2021-04-26 13:42:12.264 +cjgmoaodc011ji3umhhjo4mxo Headings First Principle https://blog.comandeer.pl/refleksje/html-css/2018/04/30/headings-first-principle.html Dzisiaj krótko o tym, czym jest Headings First Principle (Zasada Najpierw Nagłówki). Wymyśliłem ją na poczekaniu 20 lutego w trakcie dyskusji nad sensownością znaczników article i section i moim skromnym zdaniem w prosty i sensowny sposób opisuje, jak dzielić stronę na sekcje. 2018-04-30 20:05:00 headings-first-principle cki52vf40000ci3um2x784hhn 2018-04-30 20:05:00 2018-04-30 20:05:00 ck8rhsjwo01zci3um87rscamv Live Kodowanko: React Hooks + Firebase Cloud Firestore https://www.youtube.com/watch?v=3vwI5isovY0 W trakcie prezentacji zobaczysz na żywo jak możesz podpiąć aplikację do bazy Cloud Firestore, oraz jak w podstawowy sposób zabezpieczyć do niej dostęp Do budowy aplikacji użyjemy #React Hooks oraz #Firebase Cloud Firestore.\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2020-04-08 15:33:33 live-kodowanko-react-hooks-firebase-cloud-firestore ckivz8t54001di3umfv7i4q26 2020-04-08 15:33:33 2020-04-08 15:33:33 ck8tyjjyw01zii3um6vsgc1su Web Pogawędki Live https://www.youtube.com/watch?v=I9nUvt430VM Blog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2020-04-10 08:57:59 web-pogawedki-live ckivz8t54001di3umfv7i4q26 2020-04-10 08:57:59 2020-04-10 08:57:59 ck8u775k801zli3umfnz96jnk Web Pogawędki 🔴 Dekoratory, ES2020, Pandemia, Expo SDK, WarsawJS, Prettier (zapis z live'a) https://www.youtube.com/watch?v=9tswJ_RXcy8 Live z FB (nagrany 7.04.2020)\nKanał Piotra: https://www.youtube.com/user/Piecioshka\n\n1:20 - Dekoratory w #JS\n10:55 - Nowe funkcjonalności w #ES2020\n12:30 - Dynamiczne importy\n15:00 - BigInt \n18:55 - Promise.allSettled\n21:00 - globalThis\n25:20 - for-in mechanics \n27:40 - Optional chaining\n32:00 - Nullish coalescing\n36:00 - Named exports \n38:30 - Narzędzie do testów webhook.site\n43:20 - Czy pandemia dotknie branżę IT? \n48:20 - Darmowe kursy \n54:00 - DENO community \n58:00 - Nowe SDK Expo\n1:02:00 - #WarsawJS Workshops\n1:04:10 - Usuwanie właściwości z obiektu\n1:08:10 - Dyskusja: Prettier\n1:17:10 - Ciekawy błąd w kodzie\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2020-04-10 13:00:17 web-pogawedki-dekoratory-es2020-pandemia-expo-sdk-warsawjs-prettier-zapis-z-livea ckivz8t54001di3umfv7i4q26 2020-04-10 13:00:17 2020-04-10 13:00:17 @@ -937,6 +954,7 @@ ck9n4ycj40213i3um283g75xw Robię kod review ludzi z Discorda 🍿 https://www.yo ck9xwf2uo021ki3umafg58bj5 Webowe Pogawędki #5 https://www.youtube.com/watch?v=95p_hbm7LFk Newsy i dyskusje o webie LIVE! 🔥\nGospodarze programu Artur "Fullstak" Chmaro oraz Piotr "piecioshka" Kowalski prowadzą dyskusję ze swoimi widzami, na temat otaczającej ich rzeczywistości w #javascript, #frontend. 2020-05-08 07:49:18 webowe-pogawedki-5 ckivz8t54001di3umfv7i4q26 2020-05-08 07:49:18 2020-05-08 07:49:18 cka78gn74021wi3um9d0lctys Webowe Pogawędki #6 https://www.youtube.com/watch?v=mydD2cTNeQ8 Newsy i dyskusje o webie LIVE! 🔥\n\nGospodarze programu Artur "Fullstak" Chmaro oraz Piotr "piecioshka" Kowalski\nprowadzą dyskusję ze swoimi widzami, na temat otaczającej ich rzeczywistości. 2020-05-14 20:36:22 webowe-pogawedki-6 ckivz8t54001di3umfv7i4q26 2020-05-14 20:36:22 2020-05-14 20:36:22 cka81po5c021yi3um3laihpeh React Refresh - Jeszcze lepszy hot reloading https://www.youtube.com/watch?v=WLg1UnOtjCs Naucz się jak uruchomić #React Refresh, który pamięta lokalny stan Twoich komponentów po przeładowaniu strony na serwerze developerskim. Całkiem przydatna opcja w codziennej pracy. \n\nArtykuł z nagrania: \nhttps://dev.to/searchableguy/fast-refresh-with-react-and-next-3g31\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2020-05-15 10:15:12 react-refresh-jeszcze-lepszy-hot-reloading ckivz8t54001di3umfv7i4q26 2020-05-15 10:15:12 2020-05-15 10:15:12 +ckpe4b5dw00020wmn8bamoac7 JVM Tuesday vol. 40 https://blog.vived.io/jvm-tuesday-vol-40/ Po masie premier o których mieliśmy okazje pisać w zeszłym tygodniu, poprzednie siedem dni było nieco wolniejsze jeśli chodzi o newsy - ale dzięki temu nareszcie możemy pogadać o obiecanym Scope Locals.\n\nZapraszamy do lektury! 2021-06-01 12:58:27 jvm-tuesday-vol.-40 ckmor5k8y000044moj65m13y0 2021-06-01 14:10:05.445 2021-06-01 14:10:05.444 cknyngji200700wmm5hhv0bbn ZROZUMIEĆ BOX MODEL W CSS - #1 Kontent, padding i border https://www.youtube.com/watch?v=STZvNo9o4c0 CSS BOX MODEL to odcinek w którym staram się swoimi słowami wytłumaczyć zawiłości związane z modelem pudełkowym w CSSie. Wbrew pozorom czeka tutaj wiele pułapek. Odcinek pierwszy traktuje o contencie, paddingu i borderze. W drugim odcinku będzie czas na najbardziej skomplikowaną część modelu pudełkowego margin 😊 Enjoy! 🚀🖐\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-03-17 07:30:26 zrozumiec-box-model-w-css-1-kontent-padding-i-border ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.57 2021-04-26 13:42:08.57 cknyngjis00810wmm5xg9knzk JAK PRZYGOTOWAĆ SIĘ DO CODE REVIEW - zrób to zanim pokażesz swój kod drugiej osobie https://www.youtube.com/watch?v=_Jw1FFp7dmw Jak przygotować się do code review. Film w którym przedstawiam swoje przemyślenia po pierwszych 3 miesiącach pracy w IT w większym zespole. Daję kilka rad dotyczących przygotowania się do code review. \n\nFilm szczególnie przyda się początkującym programistom, tym którzy uczą się programować i chcą pokazać swój kod innej osobie.\n\nhttps://chris.beams.io/posts/git-commit/\nhttps://dhwthompson.com/2019/my-favourite-git-commit\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-03-10 07:30:14 jak-przygotowac-sie-do-code-review-zrob-to-zanim-pokazesz-swoj-kod-drugiej-osobie ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.596 2021-04-26 13:42:08.596 cknyngjis00840wmmfinu5tcv GITHUB W PRAKTYCE - jak korzystać z kontroli wersjii w swoich projektach https://www.youtube.com/watch?v=D9VIYiz3EfE GITHUB W PRAKTYCE W tym krótkim filmie przedstawiam Ci podstawy kontroli wersji. Jest to tylko zarysowanie tego obszernego tematu. Informacje z tego odcinka powinny wystarczyć, byś mógł korzystać z kontroli wersji w swoich prywatnych projektach. \n\nKontrola wersji jest bardzo ważna i może znacznie zwiększyć Twoją wartość na tle innych kandydatów chcących dostać się do branży IT.\n\nhttps://www.kursgita.pl\nhttps://guides.github.com/activities/hello-world/\nhttps://guides.github.com/introduction/git-handbook/\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-02-28 10:48:54 github-w-praktyce-jak-korzystac-z-kontroli-wersjii-w-swoich-projektach ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.596 2021-04-26 13:42:08.596 @@ -949,6 +967,7 @@ cknyngm8902710wmmzk9xrv55 JVM Tuesday vol. 33 https://blog.vived.io/jvm-tuesday- cknyngmbr03290wmmioyuyg3h Frontend Thursday vol. 31 https://blog.vived.io/frontend-thursday-vol-31/ W dzisiejszej edycji mamy dla Was zbiór nowych funkcjonalności CSS z 2021 roku, trochę o nowo powstałym Deno Company i nową wersję Next.js. 2021-04-01 09:02:42 frontend-thursday-vol.-31 ckmor5k8y000044moj65m13y0 2021-04-26 13:42:12.232 2021-04-26 13:42:12.232 cknyngmco03390wmmr8he00sq JVM Tuesday vol. 31 https://blog.vived.io/jvm-tuesday-vol-31/ Dzisiaj dosyć różnorodnie. Oracle zaczęło przyznawać się do Jakarty EE 10, a Eclipse przyjmuje AdoptOpenJDK pod swoje skrzydła. Oprócz tego mamy dla Was też małą dramę ze środowiska Scalowego.\n\nZapraszamy do lektury! 2021-03-30 07:05:31 jvm-tuesday-vol.-31 ckmor5k8y000044moj65m13y0 2021-04-26 13:42:12.265 2021-04-26 13:42:12.265 cjaty19cg00vpi3um8jtl6avv Jak wykonać preloader w czystym JavaScript’cie? https://blog.robertorlinski.pl/2017/12/05/preloader/ Zapewne każdy z nas spotkał tzw. preloader, czyli element zasłaniający witrynę, dopóki ta nie zostanie w pełni załadowana. Jak stworzyć coś takiego? Tego dowiemy się w dzisiejszym artykule! 🙂 Efekt końcowy. Zacznijmy od konkretów, bo nie chciałbym marnować Waszego czasu. Demo można znaleźć po tym oto adresem. Chciałbym abyśmy skupili się na mechanice, która powoduje, że […] 2017-12-05 18:13:46 jak-wykonac-preloader-w-czystym-javascriptcie ckig8bkw0000zi3umgy3obxsr 2017-12-05 18:13:46 2017-12-05 18:13:46 +cjx966ma001mai3umacewftwl Laravel w 60 minut https://tworcastron.pl/blog/laravel-w-60-minut/

Laravel czyli najpopularniejszy obecnie framework PHP. To jest chyba coś czego przedstawiać nie muszę. Jeśli jednak do tej pory nie miałeś okazji pracować na...

\n

Artykuł Laravel w 60 minut pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2019-06-23 16:31:57 laravel-w-60-minut ckbbw3jvs000li3umgw19edq9 2019-06-23 16:31:57 2019-06-23 16:31:57 cjc7xki3s00wxi3um2pf4ac9u Pasek postępu, który rozszerza się podczas przewijania strony internetowej https://blog.robertorlinski.pl/2018/01/09/pasek-postepu-ktory-zwieksza-sie-przewijania-strony-internetowej/ Skoro przeglądasz tego bloga, to jest spore prawdopodobieństwo, że śledzisz również inne, na których można spotkać się z dość ciekawym efektem. Chodzi o pasek postępu, zapełniający się wraz z przewijaniem konkretnej witryny. Właśnie w tym wpisie chciałbym pokazać Ci jak w nieskomplikowany sposób można stworzyć coś podobnego. Wszystko wykonamy w czystym JavaScript’cie, bo wg mnie […] 2018-01-09 17:49:13 pasek-postepu-ktory-rozszerza-sie-podczas-przewijania-strony-internetowej ckig8bkw0000zi3umgy3obxsr 2018-01-09 17:49:13 2018-01-09 17:49:13 cjcgjjh3k00x4i3umbom3cn4f Prosta i lekka biblioteka, która pozwoli Ci dodać karuzelę do swojej strony WWW https://blog.robertorlinski.pl/2018/01/15/biblioteka-do-tworzenia-karuzeli/ Bardzo popularnym elementem dzisiejszych stron internetowych są tak zwane karuzele, czyli elementy, których zawartość możemy zmieniać przez pociągnięcie za slajd lub za pomocą guzików widocznych w przeglądanym serwisie. Szczególnie ciekawy jest ten pierwszy sposób, bo jeśli obsługa naszej karuzeli będzie możliwa z poziomu myszki (lub palca w przypadku urządzeń mobilnych), to cała witryna stanie się […] 2018-01-15 18:26:26 prosta-i-lekka-biblioteka-ktora-pozwoli-ci-dodac-karuzele-do-swojej-strony-www ckig8bkw0000zi3umgy3obxsr 2018-01-15 18:26:26 2018-01-15 18:26:26 cjd1xu9qo00xui3um3sr506ed 10 świetnych efektów użytych na zdjęciach https://blog.robertorlinski.pl/2018/01/30/10-efektow-uzytych-na-zdjeciach/ Współczesne wersje technologii webowych powalają nam na tworzenie bardzo ciekawych efektów, które sprawiają, że nasze witryny stają się znacznie bardziej interaktywne oraz przyjemniejsze w odbiorze. Dlatego w tym artykule pokażę Ci przykłady tego, w jaki sposób przy pomocy CSSa oraz JavaScriptu możemy stworzyć świetne efekty gotowe do użycia na wszelkich grafikach dodanych do stron internetowych. […] 2018-01-30 17:49:54 10-swietnych-efektow-uzytych-na-zdjeciach ckig8bkw0000zi3umgy3obxsr 2018-01-30 17:49:54 2018-01-30 17:49:54 @@ -970,6 +989,7 @@ ckfyaszwg0284i3um526h954v Vue Router i TypeScript - jak zrobić frontowy routing ckhdl0sns029vi3umaknycjem Docker Compose dla początkujących https://solutionchaser.com/docker-compose-dla-poczatkujacych/

Dzień dobry!
Mam nadzieje, że jesteście zdrowi i chętni do nauki, bowiem ruszamy z kolejną częścią serii o konteneryzacji. Pierwszą możecie przeczytać tutaj gdzie wyjaśniam podstawy dockera :)

Oczywiście polecam mojego instagrama oraz staram się wrócić na Twittera ze śmieszną poezją developerską. Serio.

Segment reklamowy zakończony, więc kodujmy:
Zastanawiałam się jak

2020-11-11 15:52:31 docker-compose-dla-poczatkujacych ckhdl0sns0014i3um91mvcxsj 2020-11-11 15:52:31 2020-11-11 15:52:31 cjm9cwm8g017zi3um5baa7btm Pseudo-elementy ::after i ::before w animacjach on-hover https://crocoder.pl/blog/css/pseudo-elementy-after-i-before-w-animacjach-on-hover/

W tym artykule: do czego służą pseudo-elementy i jak w ciekawy sposób można wykorzystać ::before i ::after do animacji buttonów.

Artykuł Pseudo-elementy ::after i ::before w animacjach on-hover pochodzi z serwisu Crocoder.

2018-09-19 16:23:22 pseudo-elementy-after-i-before-w-animacjach-on-hover cjz9yx06o0016i3umf74v7ka2 2018-09-19 16:23:22 2018-09-19 16:23:22 cjmktd27s018di3um5iseadep Wprowadzenie do serii WordPress – własny motyw od podstaw https://crocoder.pl/blog/wordpress/wprowadzenie-do-serii-wordpress-wlasny-motyw-od-podstaw/

Wprowadzenie do serii Wordpress - własny motyw od podstaw. Omówienie motywu blogowego Cloudy Blog i garść przydatnych linków.

Artykuł Wprowadzenie do serii WordPress – własny motyw od podstaw pochodzi z serwisu Crocoder.

2018-09-27 16:49:31 wprowadzenie-do-serii-wordpress-wlasny-motyw-od-podstaw cjz9yx06o0016i3umf74v7ka2 2018-09-27 16:49:31 2018-09-27 16:49:31 +ckotwx7ol00020vmhwwzm44m3 JVM Tuesday vol. 38 https://blog.vived.io/jvm-tuesday-vol-38/ Wysypało nam releaseami - tydzień temu Kotlin 1.5, dzisiaj Scala 3 🥳. Oprócz tego nieco wyjaśnień z frontu Jakarty EE oraz dalszy ciąg naszego cotygodniowego przeglądu nowych JEPów. 2021-05-18 10:45:31 jvm-tuesday-vol.-38 ckmor5k8y000044moj65m13y0 2021-05-18 10:47:54.405 2021-05-18 10:47:54.405 cjmnq2dfk018gi3um5d6of0gj XAMPP jako środowisko lokalne i instalacja WordPress https://crocoder.pl/blog/wordpress/xampp-jako-srodowisko-lokalne-i-instalacja-wordpress/

Wstęp techniczny do serii - zapoznanie się z lokalnym serwerem XAMPP i instalacja WordPressa na naszym komputerze.

Artykuł XAMPP jako środowisko lokalne i instalacja WordPress pochodzi z serwisu Crocoder.

2018-09-29 17:40:32 xampp-jako-srodowisko-lokalne-i-instalacja-wordpress cjz9yx06o0016i3umf74v7ka2 2018-09-29 17:40:32 2018-09-29 17:40:32 cjmql33bk018ji3umfetegmfm Budowa motywu do WordPressa, wycieczka w świat szablonów https://crocoder.pl/blog/wordpress/wordpress-budowa-motywu-omowienie-szablonow/

Dowiedz się z czego składa się motyw do WordPressa - omówienie budowy motywu i plików szablonów

Artykuł Budowa motywu do WordPressa, wycieczka w świat szablonów pochodzi z serwisu Crocoder.

2018-10-01 17:44:26 budowa-motywu-do-wordpressa-wycieczka-w-swiat-szablonow cjz9yx06o0016i3umf74v7ka2 2018-10-01 17:44:26 2018-10-01 17:44:26 cjo4sen4o01a1i3umbq5k03d3 Dodawanie CSS i JS do motywu WordPress https://crocoder.pl/blog/wordpress/dodawanie-css-i-js-do-motywu-wordpress/

W tym artykule: wymagane pliki, załączanie CSS i JS do motywu oraz jak prawidłowo podawać ścieżki do zdjęć.

Artykuł Dodawanie CSS i JS do motywu WordPress pochodzi z serwisu Crocoder.

2018-11-05 20:57:51 dodawanie-css-i-js-do-motywu-wordpress cjz9yx06o0016i3umf74v7ka2 2018-11-05 20:57:51 2018-11-05 20:57:51 @@ -981,6 +1001,7 @@ cjpmw9hyw01c2i3umddr72wwc Menu nawigacyjne w WordPress https://crocoder.pl/blog/ cjshnifa001g6i3umfjfkcddd Nowa odsłona strony CroCoder.pl https://crocoder.pl/blog/offtop/nowa-odslona-strony-crocoder-pl/

Po 5 miesiącach od otwarcia strony czas na zmiany! Zobacz jak prezentuje się nowa odsłona strony CroCoder z zupełnie nową szatą graficzną.

\n

Artykuł Nowa odsłona strony CroCoder.pl pochodzi z serwisu Crocoder.

2019-02-23 15:40:39 nowa-odslona-strony-crocoderpl cjz9yx06o0016i3umf74v7ka2 2019-02-23 15:40:39 2019-02-23 15:40:39 cjsm1k72g01gdi3umhbfn9dco Pętla WordPress – wyświetlanie wpisów na stronie https://crocoder.pl/blog/wordpress/petla-wordpress-wyswietlanie-wpisow-na-stronie/

Pętla WordPress to serce motywu, które pompuje dane powiązane z wpisami w obszary przeznaczone do wyświetlania zawartości. W tym artykule omawiam Pętlę, czyli podstawową strukturę służącą do wyświetlania wpisów w WordPress.

\n

Artykuł Pętla WordPress – wyświetlanie wpisów na stronie pochodzi z serwisu Crocoder.

2019-02-26 17:25:01 petla-wordpress-wyswietlanie-wpisow-na-stronie cjz9yx06o0016i3umf74v7ka2 2019-02-26 17:25:01 2019-02-26 17:25:01 cjz9yx06o01ogi3um25cm03n7 Pętla WordPress w akcji https://crocoder.pl/blog/wordpress/petla-wordpress-w-akcji-wyswietlanie-wpisow/

WordPress idealnie nadaje się do stron, zawierających treści, które wymagają archiwizacji i kategoryzacji. Wpisami można wygodnie zarządzać w panelu administratora a dodatkowo, samo wyświetlanie wpisów na stronie jest bajecznie proste.

\n

Artykuł Pętla WordPress w akcji pochodzi z serwisu Crocoder.

2019-08-13 15:15:42 petla-wordpress-w-akcji cjz9yx06o0016i3umf74v7ka2 2019-08-13 15:15:42 2019-08-13 15:15:42 +cko3iapas00020wmkf44uzc0y DostepnyDesign.pl https://www.webkrytyk.pl/2021/04/30/dostepnydesign-pl/ Dzisiaj na celowniku Dostępny Design – strona, dzięki której zapiszemy się na dofinansowywany ze środków unijnych kurs projektowania uniwersalnego. W sumie miałem przejść do porządku dziennego nad tą stroną, ale moją uwagę przykuła informacja w stopce: Strona zgodna z WCAG 2.1. A z tym nie mogę się zgodzić i już piszę dlaczego. WCAG 2.1 (istnieje też … Czytaj dalej DostepnyDesign.pl 2021-04-29 23:15:44 dostepnydesign.pl cki2dml0o000di3umgjexb6pk 2021-04-29 23:16:28.949 2021-04-29 23:16:28.949 cknyngjj001280wmm59w49f9g ILE CZASU SIĘ UCZYĆ PROGRAMOWAĆ ? - ile dziennie przeznaczać na naukę https://www.youtube.com/watch?v=-gM5Ddhx4HA Ile czasu się uczyć programować ? Ile dziennie przeznaczać na naukę programowania ?\nTe pytania bardzo często pojawiają się w głowach osób, chcących uczyć się nowej umiejętności. W filmie staram się dać kilka rad z mojej perspektywy. Jakie sesje nauki były najbardziej efektywne ? Ile czasu dziennie się uczyłem ? Oraz jak to zmieniało się w czasie u mnie podczas mojego procesu nauki programowania i zmiany branży.\n\nFB: https://www.facebook.com/Programistafrontend-108775494324661/\n🎯: https://www.programistafrontend.pl/\nIG: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl\n\n-\n\n- 2021-02-10 07:30:14 ile-czasu-sie-uczyc-programowac-ile-dziennie-przeznaczac-na-nauke ckmoh2k1y000050l0rtc97ktd 2021-04-26 13:42:08.605 2021-04-26 13:42:08.605 cknyngm1j02240wmm4i6ay5dz Frontend Thursday vol. 34 https://blog.vived.io/frontend-thursday-vol-34/ W dzisiejszej edycji mamy dla bardzo ciekawą bibliotekę do Angulara wyłączającą zone.js, przegląd nowoczesnych narzędzi do budowania aplikacji i zestawienie nowych funkcjonalności Node.js i Deno. 2021-04-22 08:59:01 frontend-thursday-vol.-34 ckmor5k8y000044moj65m13y0 2021-04-26 13:42:11.864 2021-04-26 13:42:11.864 cknyngm4v02430wmmbp9flfaq Career Hints&Tips: co to jest “Zoom fatigue” i jak sobie z nim poradzić? https://blog.vived.io/career-hints-tips-co-to-jest-zoom-fatigue-i-jak-sobie-z-nim-poradzic/

Czy kiedykolwiek zdarzyło Ci się zakończyć ostatnie spotkanie np. na Zoomie i poczuć się kompletnie wyczerpany/a? Jeśli tak, to nie jesteś sam/a. Wiele osób boryka się z podobnym zmęczeniem, które

2021-04-21 07:14:53 career-hintsandtips:-co-to-jest-"zoom-fatigue"-i-jak-sobie-z-nim-poradzic ckmor5k8y000044moj65m13y0 2021-04-26 13:42:11.984 2021-04-26 13:42:11.984 @@ -994,8 +1015,6 @@ cknzpuw9900020wmf0tdumcg9 JVM Tuesday vol. 35 https://blog.vived.io/jvm-tuesday- cko13915w00020wl2dv4whooh PRODUKTYWNOŚĆ W NAUCE I PRACY PROGRAMISTY - trzy rzeczy zwiększające moją produktywność https://www.youtube.com/watch?v=nFtcZhu43XM Dzisiaj trochę o produktywności. Chciałem zrobić taki film, bo mnóstwo tego typu materiałów w internetach. Próbowałem już wielu rzeczy. Dlatego w skrócie w filmie trzy rzeczy, które mają największy wpływ na moją produktywność.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-04-28 06:30:13 produktywnosc-w-nauce-i-pracy-programisty-trzy-rzeczy-zwiekszajace-moja-produktywnosc ckmoh2k1y000050l0rtc97ktd 2021-04-28 06:39:44.42 2021-04-28 06:39:44.42 cko13933m00120wl23f74fraj Creating connected remote teams https://blog.piotrnalepa.pl/2021/04/28/creating-connected-remote-teams/

In this article I've described how we are building a culture of knowledge sharing in remote teams for the sake of product sucsess. I'm writing about documentation proccess and the value it brings.

\nTen wpis Creating connected remote teams został opublikowany najpierw na Piotr Nalepa - Blog webmasterski | Tutoriale JavaScript, CSS i nie tylko. 2021-04-28 06:32:49 creating-connected-remote-teams ckekeq7uo0004i3umft185ior 2021-04-28 06:39:46.93 2021-04-28 06:39:46.93 cko21etml00020wl0itiyvjuf Rewolucja klasowa https://blog.comandeer.pl/rewolucja-klasowa.html Swego czasu powszechną wiedzą było to, że klasy stanowiły wyłącznie cukier składniowy dla prototypów. Tak też sprawę ująłem w swojej książce (JavaScript. Programowanie zaawansowane, s. 113). Wtedy (5 lat temu!), faktycznie, takie stwierdzenie dało się obronić. Z jednej strony dlatego, że klasy nie były tak rozbudowane jak obecnie, z drugiej dlatego, że były nowością i paradoksalnie łatwiej było je zrozumieć poprzez porównanie do już istniejącego mechanizmu. Ale od tego czasu sporo się zmieniło. 2021-04-28 22:24:00 rewolucja-klasowa cki52vf40000ci3um2x784hhn 2021-04-28 22:36:01.533 2021-04-28 22:36:01.533 -cko2njcf500020wmm62xa1p2t Frontend Thursday vol. 35 https://blog.vived.io/frontend-thursday-vol-35/ W dzisiejszej edycji mamy dla Was zwiastun końca Internet Explorer 11, Stadie dla przeglądarek i krótkie podsumowanie ng-conf 2021. 2021-04-29 08:30:00 frontend-thursday-vol.-35 ckmor5k8y000044moj65m13y0 2021-04-29 08:55:24.065 2021-04-29 08:55:24.066 -cko3iapas00020wmkf44uzc0y DostepnyDesign.pl https://www.webkrytyk.pl/2021/04/30/dostepnydesign-pl/ Dzisiaj na celowniku Dostępny Design – strona, dzięki której zapiszemy się na dofinansowywany ze środków unijnych kurs projektowania uniwersalnego. W sumie miałem przejść do porządku dziennego nad tą stroną, ale moją uwagę przykuła informacja w stopce: Strona zgodna z WCAG 2.1. A z tym nie mogę się zgodzić i już piszę dlaczego. WCAG 2.1 (istnieje też … Czytaj dalej DostepnyDesign.pl 2021-04-29 23:15:44 dostepnydesign.pl cki2dml0o000di3umgjexb6pk 2021-04-29 23:16:28.949 2021-04-29 23:16:28.949 cknyutdpz00020wmfdpwvc49o Jak obsłużyć formularz w HTML nie znając backendu? https://www.youtube.com/watch?v=KRd9JN0fKZU DARMOWY KURS HTML I CSS! Zapisz się - 👉 https://zaczynamyprogramowac.pl/ 👈 . 30.04 dostaniesz link do dwugodzinnego kursu. Więcej szczegółów na naszej grupie 👇\nNasza grupa na FB: https://urlgeni.us/facebook/jzp_grupa\nOdwiedź nasz fanpage: https://urlgeni.us/facebook/jzp_fanpage\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nSerwis formsubmit: http://formsubmit.io/\nPorównanie z innymi serwisami: https://css-tricks.com/a-comparison-of-static-form-providers/\n\nGdy zaczynałem uczyć się frontu to na każdej z moich stronek formularz nie działał :D \nNie miałem pojęcia jak go obsłużyć i myślałem że potrzeba do tego sporo backendowej wiedzy. Z tego co obserwuję to jest to dość powszechny problem na stronach tworzonych przez początkujące osoby, dlatego chciałem pokazać jak można obsłużyć formularz dodając dosłownie jedną linijkę w HTML. Przy pomocy zewnętrznego serwisu wiadomości będą wtedy lądowały na naszym mailu. \n\n\nFilip Mamcarczyk i Kacper Sokołowski 2021-04-26 16:45:00 jak-obsluzyc-formularz-w-html-nie-znajac-backendu ckj9sdcq7000051l5pzwpbq9f 2021-04-26 17:08:04.919 2021-04-26 17:08:04.919 cknzxw5hz00020vmfz7753102 JAK UCZYĆ SIĘ I KODOWAĆ PRODUKTYWNIE - jak zwiększyłem swoją produktywność https://www.youtube.com/watch?v=nFtcZhu43XM Dzisiaj trochę o produktywności. Chciałem zrobić taki film, bo mnóstwo tego typu materiałów w internetach. Próbowałem już wielu rzeczy. Dlatego w skrócie w filmie trzy rzeczy, które mają największy wpływ na moją produktywność.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-04-27 08:20:17 jak-uczyc-sie-i-kodowac-produktywnie-jak-zwiekszylem-swoja-produktywnosc ckmoh2k1y000050l0rtc97ktd 2021-04-27 11:21:59.255 2021-04-27 11:21:59.255 cko1kp37f00020wl8vk8oqhel 7 Powodów dlaczego pozbyliśmy* się Service Workera https://blog.vived.io/pozbylismy-sie-service-workera/ Service Worker zawiódł nasze oczekiwania i w końcu pozbyliśmy się go z naszej aplikacji. Krok co najmniej radykalny, ale mieliśmy ku niemu kilka powodów. 2021-04-28 14:47:45 7-powodow-dlaczego-pozbylismy*-sie-service-workera ckmor5k8y000044moj65m13y0 2021-04-28 14:48:07.036 2021-04-28 14:48:07.036 @@ -1005,6 +1024,8 @@ cjtpgl1uo01hwi3umdybx2pcf Gala Twórców – zagłosuj na twórców związanych cjuis1r0w01j2i3um4tk4cefi Nasze książki – 1Q 2019 https://bedeprogramistka.pl/nasze-ksiazki-1q2019/

Artykuł Nasze książki – 1Q 2019 pochodzi z serwisu .

2019-04-15 19:54:50 nasze-ksiazki-1q-2019 ck9qqdx4o000xi3umdjbh0w86 2019-04-15 19:54:50 2019-04-15 19:54:50 cjv9boc2w01jxi3um6seg5ef5 Czego się nauczyłam podczas 3-miesięcznego okresu próbnego jako junior frontend developer? https://bedeprogramistka.pl/czego-sie-nauczylam-po-3-miesiach-pracy-jako-junior-frontend-developer/

Pod koniec kwietnia minęły 3 miesiące mojego okresu próbnego w Shoplo. Dzisiaj chciałam się z Wami podzielić moimi przemyśleniami na temat tego, czego się nauczyłam i co tak naprawdę robiłam przez ten czas.   Początki O tym, jak wyglądała moja rekrutacja do pracy już Wam trochę pisałam we wcześniejszych wpisach. O tym jak przebiegała rekrutacja możecie przeczytać tu i tu. Gdy pierwszego dnia przyszłam do pracy, od razu dostałam zadania do realizacji. Wyobrażacie to sobie? Taki świeżak, który nic nie wie, siada i ma robić taski. Ale sobie poradziłam, mimo że stres był całkiem spory. Przez cały dzień starałam się niczego nie zepsuć – chociaż jeden incydencik się wydarzył 😉 . Na szczęście nic się strasznego nie wydarzyło.   Czym ja się w ogóle zajmuję? Shoplo to takie miejsce, w którym ludzie za pomocą kilku kliknięć mogą założyć swój sklep. Myślę, że można wyróżnić w firmie dwa miejsca pracy dla developerów. Pierwsze to miejsce samodzielnych i doświadczonych ludzi – to tam moi koledzy rozwijają cały system. To właśnie tam, wprowadzane są wszystkie nowości. To tam się trafia, jak już się jest samodzielnym developerem. Drugie miejsce, w którym ja pracuję to dział poniekąd obsługi Klienta. Aktualnie pracujemy we trójkę – Czarek, […]

\n

Artykuł Czego się nauczyłam podczas 3-miesięcznego okresu próbnego jako junior frontend developer? pochodzi z serwisu .

2019-05-04 09:46:17 czego-sie-nauczylam-podczas-3-miesiecznego-okresu-probnego-jako-junior-frontend-developer ck9qqdx4o000xi3umdjbh0w86 2019-05-04 09:46:17 2019-05-04 09:46:17 ck0vf948801pwi3um58cjam8p Praca zdalna dla juniora programisty https://bedeprogramistka.pl/praca-zdalna-dla-juniora-programisty/

Nie tak dawno w Shoplo prowadziliśmy rekrutację na Junior Frontend Developera. Jednym z pytań, które pojawiało się dosyć często od kandydatów było – „czy oferujecie pracę zdalną”? Sama uwielbiam pracować z domu. Uwielbiam siedzieć w swoich czterech ścianach i skupiać się na zadaniach. Ale czy praca dla juniora to na pewno takie spoko rozwiązanie?   Możliwość pracy zdalnej  w programowaniu to jeden z tych benefitów, który kusi. Wszakże możliwość pracy z każdego miejsca na świecie brzmi mocno hot 😉 . Kto by nie chciał siedzieć sobie w jakimś wygodnym i ciepłym miejscu, słuchać szumu fal i kodować? No znam takich, którzy na pewno by nie chcieli, ale znam też takich, który mocno dążą do takiej możliwości. Ale czy aby na pewno dla osoby, która jest na początku swojej drogi praca zdalna to taki benefit? Wydaje mi się, że nie koniecznie. Nie oszukujmy się, gdy zaczynasz swoją pracę jako junior, jesteś po prostu mega świeżakiem. Jesteś człowiekiem, który już coś tam wie, coś tam napisać potrafi, jednak Twój kod może pozostawiać wiele do życzenia. Junior ma prawo nie wiedzieć masy rzeczy. Junior ma prawo mylić się i szukać rozwiązać – często samodzielnie. Ma prawo rozwiązywać zadania metodą prób i błędów. Ale […]

\n

Artykuł Praca zdalna dla juniora programisty pochodzi z serwisu .

2019-09-22 20:15:53 praca-zdalna-dla-juniora-programisty ck9qqdx4o000xi3umdjbh0w86 2019-09-22 20:15:53 2019-09-22 20:15:53 +ckocs7zxu00020vl5pu17kre9 Frontend Thursday vol. 36 https://blog.vived.io/frontend-thursday-vol-36/ W dzisiejszej edycji mamy dla Was nową wersję RxJS i V8 oraz ogłoszenie powstania Rome Tools, Inc. Łapcie kawę i zapraszamy do lektury. 2021-05-06 10:58:48 frontend-thursday-vol.-36 ckmor5k8y000044moj65m13y0 2021-05-06 11:04:14.514 2021-05-06 11:04:14.514 +ckpgpiqb000020wmjn7hjp3s8 Robię code review dla ludzi z Discorda 😇 React / Next.js https://www.youtube.com/watch?v=gcrxZoLNFoI Blog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-06-03 08:51:55 robie-code-review-dla-ludzi-z-discorda-react-next.js ckivz8t54001di3umfv7i4q26 2021-06-03 09:39:23.437 2021-06-03 09:39:23.437 ck1nnuejk01qwi3um01n86ist A może jednak backend? – Wpis gościnny Mariusza Sołtysiaka https://bedeprogramistka.pl/a-gdyby-tak-backend-wpis-goscinny/

Jak wiecie, ja należę do teamu front, jednak często osoby, które są na początku swojej drogi zastanawiają się jaki kierunek wybrać – frontend czy backend? Tym razem macie okazję przeczytać wpis gościnny od programisty, który był fullstackiem i po 11 latach pracy stwierdził, że w duszy gra mu tylko backend. Z Mariuszem pracujemy razem w Shoplo. W mojej ocenie, jest naprawdę świetnym backendowcem. Gdy pojawiają się jakieś problemy, Mario zawsze sypie rozwiązaniami jak z rękawa. Ja Was zawsze namawiam na front, więc dla odmiany dzisiaj Mario pokaże Wam, że backend jest/może być 😉 równie interesujący. Zapraszam Was serdecznie do wpisu gościnnego i do komentowania 🙂 . W ostatnich latach mamy do czynienia z trendem, gdzie zdecydowanie większy nacisk na rozwój języków programowania i technologii możemy zaobserwować na frontendzie. Ale czy frontend bez backendu może istnieć? Do pewnego momentu – jak najbardziej. Jeśli jednak chcecie, by Wasza strona była czymś więcej niż wizytówką firmową, wtedy backend jest nieodzowny. Przez większą część swojego życia pracowałem jako fullstack developer, co ułatwia mi spojrzenie „z góry” na problem wyboru swojej ścieżki rozwoju. Nieco ponad dwa lata temu postanowiłem, że rezygnuję z „frontu” i skupiam się tylko na backendzie. Czy żałuję? Zdecydowanie nie. Nie odbierajcie […]

\n

Artykuł A może jednak backend? – Wpis gościnny Mariusza Sołtysiaka pochodzi z serwisu .

2019-10-12 14:33:56 a-moze-jednak-backend-wpis-goscinny-mariusza-soltysiaka ck9qqdx4o000xi3umdjbh0w86 2019-10-12 14:33:56 2019-10-12 14:33:56 ck296raco01roi3umawov98g1 Nauka programowania na urlopie macierzyńskim https://bedeprogramistka.pl/nauka-programowania-na-urlopie-macierzynskim/

Z czym Ci się kojarzy urlop macierzyński lub tacierzyński? Z zamknięciem się w czterech ścianach z małym dzieckiem? Mi się kojarzy ze znakomitą okazją do samorozwoju. Podczas pierwszego urlopu macierzyńskiego stworzyłam firmę z ubrankami dla dzieci – dzisiaj już nie istnieje, ale czego ja się przy niej nauczyłam, to moje. Natomiast podczas drugiego urlopu macierzyńskiego postanowiłam, że będę programistką. I właściwie dzisiaj, 2,5 roku po podjęciu tej decyzji, jestem programistką. Czy nauka programowania na urlopie macierzyńskim jest możliwa? Jestem przykładem, że jak najbardziej! Jak to było w moim przypadku? Czas urlopu macierzyńskiego / tacierzyńskiego to fajny czas na poznawanie się z dzieckiem, na wspólne spędzanie czasu, długie spacery i nieprzespane noce. To czas, kiedy w Twojej głowie siedzi przez większość czasu ten mały człowiek. Ale … no właśnie ale. Gdyby w mojej głowie miał siedzieć tylko i wyłącznie mały człowiek to przysięgam, że bym zwariowała.  Czas spędzany wspólnie z dzieckiem był dla mnie mega ważny. Ale równie mega ważny był dla mnie mój rozwój. Po 9 miesiącach posiadania paćki zamiast mózgu (tak, w czasie ciąż byłam wyjątkowo przygłupia 😉 ), w pewnym momencie zawsze przychodził taki czas, kiedy czułam, że muszę coś zrobić ze sobą i swoim życiem, bo inaczej […]

\n

Artykuł Nauka programowania na urlopie macierzyńskim pochodzi z serwisu .

2019-10-27 16:06:33 nauka-programowania-na-urlopie-macierzynskim ck9qqdx4o000xi3umdjbh0w86 2019-10-27 16:06:33 2019-10-27 16:06:33 cj5hqnjlk00ozi3um0d6e4rql React - kursy on-line: ostatni tydzień przedsprzedaży!! https://www.nafrontendzie.pl/react-kursy-on-line-ostatni-tydzien-przedsprzedazy 1 czerwca ogłosiłem na blogu przedsprzedaż moich trzech kursów on-line. Kursy te to: Podstawy React, Podstawy react-router, Podstawy Redux. Oczywiście kursy te można też zakupić w pakiecie, dzięki czemu, rzecz jasna, wychodzi taniej. W tym momencie pozostał w zasadzie ostatni tydzień przedsprzedaży, a moje prace nad kursami już jakiś czas temu weszły w decydującą fazę. Postanowiłem więc dzisiaj przybliżyć strukturę kursów - jakie lekcje wchodzą w skład kursów, ile jest zadań do wykonania, czego dotyczą itp. 2017-07-24 05:55:23 react-kursy-on-line-ostatni-tydzien-przedsprzedazy ck7m8brk0000ui3um0pxg4lae 2017-07-24 05:55:23 2017-07-24 05:55:23 @@ -1019,6 +1040,7 @@ cko765xz700020wmldaeu8lvj O metodzie Duck Debugging https://devszczepaniak.pl/o- cko1vdimf00020wl3d4updy55 Czy Kot Źródłowy wraca do gry? https://kot-zrodlowy.pl/offtop/2021/04/28/czy-kot-zrodlowy-wraca.html Cześć! Oj, dawno mnie tutaj nie było. Sama zastanawiałam się, czy nie zaorać tego miejsca, ale za każdym razem łezka mi się w oku kręciła. (Nie no, żartuję! Nie podejrzewaj mnie o żadne ludzkie ucz... 2021-04-27 22:00:00 czy-kot-zrodlowy-wraca-do-gry cjy7sgxs0000bi3umeb9z90rn 2021-04-28 19:47:02.919 2021-04-28 19:47:02.919 cko5omypl00020wjnx8awrhjr TypeScript: Klasy cz.1 #09 https://www.youtube.com/watch?v=gUPI-_mS7ys Dziewiąty odcinek z serii TypeScript z Domanem.\n\nPierwsza część w której omawiam modyfikatory public, protected, private.\nKrótkie porównanie prywatnych właściwości z JavaScript vs TypeScript oraz porównanie strukturalne klas przy typowaniu. A także zapis skrótowy konstruktora przy standardowym przypisywaniu właściwości.\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript 2021-05-01 11:45:04 typescript:-klasy-cz.1-09 ckjpkgp9u000012mnlbnkxu51 2021-05-01 11:49:31.065 2021-05-01 11:49:31.065 cko8og4ri00020wjqhq1tqgtv Jak zdalnie pokazać swój localhost? https://www.youtube.com/watch?v=palp_5k81j0 Potrzebujesz planu nauki programowania? 👉https://zaczynamyprogramowac.pl 👈\nNasza grupa na FB: https://www.facebook.com/groups/zaczynamy.programowac/\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nZ tego wideo nauczysz się, jak przy pomocy narzędzia ngrok udostępnić swój localhost swoim współpracownikom, klientom czy znajomym.\n\nLink do narzędzia - https://ngrok.com/\n\nPozdrawiamy!\nFilip Mamcarczyk i Kacper Sokołowski\n\nIcons made by Freepik from www.flaticon.com 2021-05-03 14:00:15 jak-zdalnie-pokazac-swoj-localhost ckj9sdcq7000051l5pzwpbq9f 2021-05-03 14:07:30.847 2021-05-03 14:07:30.847 +ckofefnbp00020wk1kyk54igy Software Craftsmanship Saturday vol. 36 https://blog.vived.io/software-craftsmanship-saturday-vol-36/ Po ostatnim, mocno technicznym wydaniu, nieco dla równowagi mamy dla Was edycje zbierającą tematy branżowo-społeczne. Każda jednak z przytoczonych spraw jest z nasze perspektywy niezwykle interesująca, dlatego też klasycznie już zapraszam do lektury! 2021-05-08 06:58:28 software-craftsmanship-saturday-vol.-36 ckmor5k8y000044moj65m13y0 2021-05-08 07:01:35.317 2021-05-08 07:01:35.317 cko8u2kj800020wlap00prd3l Composition API w Vue 3 - lepsza architektura aplikacji front-endowej https://www.youtube.com/watch?v=RwIjJFAyAx4 Composition API to alternatywa dla dobrze znanego w świecie Vue Options API. W dzisiejszym filmie przyglądamy się temu jak budować komponenty "po nowemu" i jak taki sposób organizacji kodu wpływa na architekturę całego projektu.\n\nWięcej o Composition API - https://v3.vuejs.org/guide/composition-api-introduction.html\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-05-03 16:00:10 composition-api-w-vue-3-lepsza-architektura-aplikacji-front-endowej ckiyt1v9s001fi3umcgnxbgiu 2021-05-03 16:44:55.797 2021-05-03 16:44:55.797 cko9u7ggi00020wms54vrknsq JVM Tuesday vol. 36 https://blog.vived.io/jvm-tuesday-vol-36/ W dzisiejszej edycji dzielimy się "sneak peakiem" tego co w Javie 17. Oprócz tego ogłoszenia dotyczące OSGI oraz pomoc w wyborze jednego z nowych Javowych Webowych Frameworków. 2021-05-04 09:27:26 jvm-tuesday-vol.-36 ckmor5k8y000044moj65m13y0 2021-05-04 09:36:29.971 2021-05-04 09:36:29.971 cko9u7q4b00120wms27arpksh Dev.to, Hashnode czy Medium? Jaki blog dla programisty? https://webmastah.pl/devto-hashnode-czy-medium-jaki-blog-dla-programisty/ Od dawna chodzi ci po głowie założenie własnego bloga, ale na samą myśl o (najpewniej) Wordpressie dostajesz skrętu kiszek? Na szczęście są gotowe platformy, które zdejmą ci problem z głowy. W tym artykule pokaże ci 3 najpopularniejsze rozwiązania, w tym to które ja wybrałem.\nDlaczego gotowy system? Szybkość i wygoda. Szybkość, bo bloga możemy założyć w dosłownie kilkanaście sekund, a wygoda, bo wszystko sprowadza się w zasadzie do kilku klików i publikacji. 2021-05-04 07:13:57 dev.to-hashnode-czy-medium-jaki-blog-dla-programisty ckcf8vjeg000ai3um1mox19e8 2021-05-04 09:36:42.492 2021-05-04 09:36:42.492 @@ -1043,8 +1065,6 @@ ckocq3z0i01250vlirbdfvlsf Jak zdobyć pierwszą pracę w IT https://kot-zrodlowy ckocq3z1001400vlilvm7o20d Podstawowe założenia uczenia maszynowego https://kot-zrodlowy.pl/javascript/programowanie/2019/01/19/Podstawy-Uczenia-Maszynowego.html Cześć! Jak wiecie, Kot ostatnio zgłębia całą masę wiedzy, w dużej mierze dotyczącej sztucznej inteligencji. Ten temat zawsze mnie ciekawił, nie tylko dlatego, że pobudza wyobraźnię twórców popkultury od dziesięcioleci (Ktoś pamięta film Krótkie Spięcie? To są lata 70., możecie mieć niezły ubaw przy oglądaniu). Ja jednak widzę w nim realny kierunek zmian, jakie zachodzą we współczesnym świecie. A skoro świat się zmienia, to można zrobić trzy rzeczy: 2019-01-18 23:00:00 podstawowe-zalozenia-uczenia-maszynowego cko1v4lx8000012molv7wks6j 2021-05-06 10:05:07.477 2021-05-06 10:05:07.477 ckocq3z2o01640vlibikt1kkn Konkurs - Kot Źródłowy na ConFrontJS - wygraj bilet. https://kot-zrodlowy.pl/javascript/offtop/2018/10/17/konkurs-confrontjs.html Cześć! To znowu ja! Wiem, że szybko i w ogóle. Ale z takimi informacjami działa się ASAP. Kot dostał darmowy bilet na ConFrontJS, a że został patronem, to ma darmową wejściówkę dla jednego z was. Nie będę się rozpisywać co i jak, bo szczegółów dowiecie się ze strony organizatora konferencji, a także z wyczerpującego wpisu Comandeera. Kot jest za bardzo zaaferowany ogarnianiem własnych pudełek (przeprowadzka na raty!!!), żeby zdobywać sie na tak dociekliwe analizy tematu. 2018-10-16 22:00:00 konkurs-kot-zrodlowy-na-confrontjs-wygraj-bilet. cko1v4lx8000012molv7wks6j 2021-05-06 10:05:07.536 2021-05-06 10:05:07.536 ckoa3t98k00090vkwcu375cd8 Tekst wieloliniowy http://domanart.pl/multiline-text/

W ostatnim czasie dostałem ciekawy projekt do pocięcia.\nPojawił się w nim dość często spotykany motyw z tekstem, który jest pisany w kilku liniach, gdzie każda z nich ma osobne tło.

2021-05-03 00:00:00 tekst-wieloliniowy ckej6qdc0001ni3um8neham6w 2021-05-04 14:05:23.588 2021-05-04 14:05:23.588 -ckocs7zxu00020vl5pu17kre9 Frontend Thursday vol. 36 https://blog.vived.io/frontend-thursday-vol-36/ W dzisiejszej edycji mamy dla Was nową wersję RxJS i V8 oraz ogłoszenie powstania Rome Tools, Inc. Łapcie kawę i zapraszamy do lektury. 2021-05-06 10:58:48 frontend-thursday-vol.-36 ckmor5k8y000044moj65m13y0 2021-05-06 11:04:14.514 2021-05-06 11:04:14.514 -ckofefnbp00020wk1kyk54igy Software Craftsmanship Saturday vol. 36 https://blog.vived.io/software-craftsmanship-saturday-vol-36/ Po ostatnim, mocno technicznym wydaniu, nieco dla równowagi mamy dla Was edycje zbierającą tematy branżowo-społeczne. Każda jednak z przytoczonych spraw jest z nasze perspektywy niezwykle interesująca, dlatego też klasycznie już zapraszam do lektury! 2021-05-08 06:58:28 software-craftsmanship-saturday-vol.-36 ckmor5k8y000044moj65m13y0 2021-05-08 07:01:35.317 2021-05-08 07:01:35.317 ckoit4a7800020wkzlqev1jai ESLint, Prettier i VS Code - Czysty JS z automatu https://www.youtube.com/watch?v=u2yUxhzpht4 ESLint, Prettier i VS Code - Czysty JS z automatu. Unikanie popełniania błędów oraz stosowania złych praktyk ma kluczowy wpływ na jakość wytwarzanego przez nas oprogramowania. \n\nJest to szczególnie problematyczne dla początkujących programistów, którym brakuje doświadczenia, aby rozpoznać niebezpieczne wzorce i trzymać się kluczowych zasad.\n\nNa szczęście mamy do dyspozycji takie narzędzia jak ESLint, Prettier oraz Visual Studio Code. Nie wyobrażam sobie efektywnej pracy nad kodem JavaScript bez ich wsparcia. \n\nESLint pozwoli Ci wychwycić wiele problemów na etapie pisania kodu, jeszcze przed jego wykonaniem. Dzięki Prettier zadbasz o estetyczne i spójne formatowanie, które poprawi czytelność i pozwoli Ci skupić się na analizie tego co naprawdę istotne.\n\nW filmie pokażę Ci jak wprowadzić ESLint i Prettier do Twojego projektu oraz jak poprawnie zintegrować te biblioteki z Visual Studio Code dla maksymalnej produktywności i wygody.\n\nKonfiguracja settings.json - https://gist.github.com/przeprogramowani/5ba41bf7f44811181e82773c6ee2a4ec\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-05-10 16:00:26 eslint-prettier-i-vs-code-czysty-js-z-automatu ckiyt1v9s001fi3umcgnxbgiu 2021-05-10 16:15:57.861 2021-05-10 16:15:57.861 ckojwcdpz00020wl2f3g7nst3 JVM Tuesday vol. 37 https://blog.vived.io/jvm-tuesday-vol-37/ Dzisiejsza edycja odbywa się zdecydowanie pod znakiem Kotlina - jednak również i dla zainteresowanych Javą pojawił się ciekawy temat, pokazujący jak bardzo trudnym procesem jest pozbywanie się funkcjonalności z języka.\n\nZapraszamy do lektury! 2021-05-11 10:10:16 jvm-tuesday-vol.-37 ckmor5k8y000044moj65m13y0 2021-05-11 10:34:00.696 2021-05-11 10:34:00.696 ckolpvs5g00020wmhy0hbtvtv Obsługuj pliki lepiej dzięki File System Access Api https://frontcave.pl/obsluguj-pliki-lepiej-dzieki-file-system-access-api/

Spis treści Wprowadzenie Notka o modułach Obecny sposób obsługi plików Implementacja Niedogodności Nowy sposób obsługi plików z File System Access API Implementacja Wątpliwości dotyczące File System Access API Kod przykładu na Github Klikalny przykład na Github Pages Podsumowanie Wprowadzenie Kiedy ostatnio spojrzałeś w katalog plików pobranych na Twoim dysku? Czy przeszukiwanie go zawsze jest koszmarem, … Czytaj dalej Obsługuj pliki lepiej dzięki File System Access Api

\n

Artykuł Obsługuj pliki lepiej dzięki File System Access Api pochodzi z serwisu Front Cave.

2021-05-12 16:02:03 obsluguj-pliki-lepiej-dzieki-file-system-access-api ckirm3wzs001li3umfdkcfl6k 2021-05-12 17:08:40.901 2021-05-12 17:08:40.901 @@ -1054,6 +1074,7 @@ cjgxsxbnc011yi3umfbdi7s7t Dodatki do Visual Studio Code – instalacja oraz 10 cjj4jmemg014wi3um4m20f2hq 7 świetnych mixin Sass, które zauważanie usprawnią Twoją pracę https://blog.robertorlinski.pl/2018/07/02/7-mixin-sass/ Czy korzystacie z preprocesorów CSSa? W przypadku gdy chcecie pisać swój kod szybciej, to zapewne mieliście chociaż okazję się z nimi zapoznać, a jeśli z jakiegoś powodu tak się nie stało, to zapewniam – warto. Dlatego tym razem przychodzę do Was z artykułem prezentującym 7 bardzo przydatnych mixin, czyli bloków kodu, które można porównać do […] 2018-07-02 17:33:25 7-swietnych-mixin-sass-ktore-zauwazanie-usprawnia-twoja-prace ckig8bkw0000zi3umgy3obxsr 2018-07-02 17:33:25 2018-07-02 17:33:25 cjjohqxzc015ki3um2pj0a0pe Metodologia BEM – jak z niej korzystać + 3 zasady, o których przez długi czas nie miałem pojęcia https://blog.robertorlinski.pl/2018/07/16/metodologia-bem/ W programowaniu dobrze jest stosować się do przyjętych norm, aby nasz kod był przyjemniejszy dla innych deweloperów i często bardziej wydajny. Tak jak HTML ma znaczniki semantyczne, języki programowania – wzorce projektowe i frameworki, tak CSS posiada metodologie. Ale czym one są tak w ogóle? W skrócie to przyjęte wzorce nazewnictwa i zbiory zasad, które […] 2018-07-16 16:36:21 metodologia-bem-jak-z-niej-korzystac-3-zasady-o-ktorych-przez-dlugi-czas-nie-mialem-pojecia ckig8bkw0000zi3umgy3obxsr 2018-07-16 16:36:21 2018-07-16 16:36:21 cjkseowj4016mi3um7hks43lq 5 niestandardowych powodów, przez które warto jest pracować jako freelancer https://blog.robertorlinski.pl/2018/08/13/freelance-dlaczego-warto/ Aby być freelancerem musisz mieć conajmniej 5 lat doświadczenia w zawodzie. Na początku tylko etat – dzięki temu unikniesz tych wszystkich błędów, z którymi ja musiałem się borykać. Po co stresować się natrętnymi klientami po to, żeby zarobić marne kilka złotych? Kojarzysz to? Wszystkie z tych słów mogły obić się o Twoje uszy, tak samo […] 2018-08-13 15:01:34 5-niestandardowych-powodow-przez-ktore-warto-jest-pracowac-jako-freelancer ckig8bkw0000zi3umgy3obxsr 2018-08-13 15:01:34 2018-08-13 15:01:34 +cjroyzii001f0i3um98tx1rm2 Webpack 4 – Jak go skonfigurować i zacząć pracę? https://bedekodzic.pl/webpack-4/

W tym artykule dowiesz się jak skonfigurować Webpacka w najnowszej odsłonie i […]

\n

The post Webpack 4 – Jak go skonfigurować i zacząć pracę? appeared first on Będę Kodzić.

2019-02-03 13:56:33 webpack-4-jak-go-skonfigurowac-i-zaczac-prace ck87juhko000ni3umanz2707n 2019-02-03 13:56:33 2019-02-03 13:56:33 cjl2jex34016wi3um8ehv0r83 3 niezawodne sposoby na tworzenie stron opartych o WordPress i możliwych do prostej edycji bez zaglądania w kod! https://blog.robertorlinski.pl/2018/08/20/tworzenie-stron-do-edycji-bez-kodu/ Jeśli kiedykolwiek tworzyłaś lub tworzyłeś stronę opartą o WordPress bez wykorzystania gotowego motywu, to bardzo szybko mogło nasunąć Ci się jedno pytanie. W jaki sposób mogę sprawić, aby ta witryna była możliwa do edycji bez ingerencji w kod? W końcu ten system nie może ograniczać się tylko do nowych artykułów oraz prostego edytora tekstu! Przecież […] 2018-08-20 17:11:28 3-niezawodne-sposoby-na-tworzenie-stron-opartych-o-wordpress-i-mozliwych-do-prostej-edycji-bez-zagladania-w-kod ckig8bkw0000zi3umgy3obxsr 2018-08-20 17:11:28 2018-08-20 17:11:28 cjmhtwbiw018ai3um0004e9nu Jak stworzyć animowane hamburger menu – poradnik krok po kroku https://blog.robertorlinski.pl/2018/09/25/hamburger-menu/ Chyba większość z nas zgodzi się, że tak zwane hamburger menu to często jedyny sensowny sposób na stworzenie nawigacji, która dobrze wygląda na urządzeniach mobilnych. Swoją drogą często spotykane jest też na wersjach desktopowych. Dlatego w tym artykule chciałbym pokazać Ci w jaki sposób można utworzyć taki element jednocześnie dbając o jego wygląd oraz sposób […] 2018-09-25 14:41:11 jak-stworzyc-animowane-hamburger-menu-poradnik-krok-po-kroku ckig8bkw0000zi3umgy3obxsr 2018-09-25 14:41:11 2018-09-25 14:41:11 cjmtbzu1s018oi3umb73ofa0i Jak zresetować hasło do panelu WordPress – 2 najszybsze sposoby https://blog.robertorlinski.pl/2018/10/03/reset-hasla-do-panelu-wordpress/ WordPress podobnie jak większość miejsc, w których możemy się zalogować udostępnił nam możliwość przypomnienia hasła za pomocą maila. Ale co w przypadku gdy z jakiegoś dziwnego powodu nie mamy dostępu do skrzynki pocztowej lub otrzymaliśmy stronę od klienta, do której ten nie zna hasła? W tej drugiej sytuacji przecież słabo będzie pisać do niego, aby […] 2018-10-03 15:53:16 jak-zresetowac-haslo-do-panelu-wordpress-2-najszybsze-sposoby ckig8bkw0000zi3umgy3obxsr 2018-10-03 15:53:16 2018-10-03 15:53:16 @@ -1065,7 +1086,7 @@ ckok17b6q00020vk2ex4uo6x0 Fastify + Hotwire - nowy (lepszy?) pomysł na frontend cjb6xfncg00w4i3umc9kphhpk Grid CSS – kompletny kurs! https://tworcastron.pl/blog/grid-css-kompletny-kurs/

Udało się sklepać kompletny kurs omawiający Grid w CSS. Kurs składa się z 5 (+ 1) odcinków. Wszystkie są na YouTubie. Jeżeli jeszcze nie...

\n

Artykuł Grid CSS – kompletny kurs! pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-12-14 20:17:58 grid-css-kompletny-kurs ckbbw3jvs000li3umgw19edq9 2017-12-14 20:17:58 2017-12-14 20:17:58 cjh23zvvc0121i3um9xvo94z4 Jak sobie radzić z krytyką klienta https://tworcastron.pl/blog/jak-sobie-radzic-z-krytyka-klienta/

Branże kreatywne takie jak grafik czy web designer, z góry skazane są na krytykę. To co wg ciebie jest fajne, wg klienta może być...

\n

Artykuł Jak sobie radzić z krytyką klienta pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2018-05-11 15:21:03 jak-sobie-radzic-z-krytyka-klienta ckbbw3jvs000li3umgw19edq9 2018-05-11 15:21:03 2018-05-11 15:21:03 cjwm3m9gw01lmi3umgegzcwfu Bootstrap 4 – czym jest i jak działa siatka https://tworcastron.pl/blog/bootstrap-4-czym-jest-i-jak-dziala-siatka/

Czym jest Bootstrap raczej pisać nie muszę. Taki mamy klimat w IT, że już każdy zna to słowo i raczej większość osób Bootstrapa zna....

\n

Artykuł Bootstrap 4 – czym jest i jak działa siatka pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2019-06-07 13:01:26 bootstrap-4-czym-jest-i-jak-dziala-siatka ckbbw3jvs000li3umgw19edq9 2019-06-07 13:01:26 2019-06-07 13:01:26 -cjx966ma001mai3umacewftwl Laravel w 60 minut https://tworcastron.pl/blog/laravel-w-60-minut/

Laravel czyli najpopularniejszy obecnie framework PHP. To jest chyba coś czego przedstawiać nie muszę. Jeśli jednak do tej pory nie miałeś okazji pracować na...

\n

Artykuł Laravel w 60 minut pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2019-06-23 16:31:57 laravel-w-60-minut ckbbw3jvs000li3umgw19edq9 2019-06-23 16:31:57 2019-06-23 16:31:57 +cj92mqmiw00tii3um4gif3xx2 BedeProgramistka.pl Community Partnerem Tech Leaders http://bedeprogramistka.pl/bedeprogramistka-pl-community-partnerem-tech-leaders/

Kilka dni temu nagrałam na FB video, w którym mówiłam Ci, że blog BedeProgramistka.pl został Community Partnererem fantastycznego wydarzenia, jakim jest Tech Leaders. Uwielbiam takie wydarzenia, dzięki którym możesz zrobić tak duży krok na przód w swoim rozwoju. Uważam, że rozmowy z doświadczonymi osobami, które przeszły już tę ścieżkę, którą Ty dopiero rozpoczynasz są na wagę złota. Przeczytaj poniżej najważniejsze informacje.   Rusza trzecia edycja programu mentorskiego Tech Leaders Z końcem listopada br. do końca marca przyszłego roku potrwa edycja programu mentorskiego Tech Leaders. Jest on dedykowany dla kobiet w IT, które chcą rozwijać idee biznesowe lub karierę zawodową. Przeznaczony jest również dla kobiet, które chcą wejść do branży nowych technologii i znaleźć tam swoją ścieżkę rozwoju. Ideą programu mentorskiego jest stworzenie swobodnej przestrzeni do dzielenia się wiedzą i rozwijania możliwości w życiu zawodowym, korzystając ze wsparcia doświadczonych mentorów. “Do udziału w Tech Leaders może zgłosić się każda dziewczyna, czy kobieta. Nie mamy barier wiekowych, ani również lokalizacyjnych. Ważny dla nas jest zapał, chęć do nauki i rozwoju. Program przeznaczony jest dla kobiet na różnym poziomie zaawansowania, od tych stawiających swoje pierwsze kroki w IT, po te bardzo zaawansowane w temacie” – mówi Ewelina Wołoszyn, organizator Tech Leaders. W poprzednich […]

\n

Artykuł BedeProgramistka.pl Community Partnerem Tech Leaders pochodzi z serwisu .

2017-10-22 10:48:05 bedeprogramistkapl-community-partnerem-tech-leaders ck9qqdx4o000xi3umdjbh0w86 2017-10-22 10:48:05 2017-10-22 10:48:05 cjyznsd5s01o7i3umdo66hwby Kilka cech dobrego CV programisty https://tworcastron.pl/blog/kilka-cech-dobrego-cv-programisty/

“A few more candidates to review“ …mniej więcej taką wiadomość widzę co kilka dni od dłuższego czasu. Nie każda firma ma swój dział HRu,...

\n

Artykuł Kilka cech dobrego CV programisty pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2019-08-06 10:06:28 kilka-cech-dobrego-cv-programisty ckbbw3jvs000li3umgw19edq9 2019-08-06 10:06:28 2019-08-06 10:06:28 cjzjo8d5c01ori3umch6o65we Olej pracę! Nie odkładaj życia na później https://tworcastron.pl/blog/olej-prace-nie-odkladaj-zycia-na-pozniej/

-A: Nie mam czasu na wyjścia, kariera sama się nie zrobi, kursy się nie przerobią, skrypty się nie napiszą. Odpocznę, jak dojdę tam gdzie...

\n

Artykuł Olej pracę! Nie odkładaj życia na później pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2019-08-20 10:14:18 olej-prace-nie-odkladaj-zycia-na-pozniej ckbbw3jvs000li3umgw19edq9 2019-08-20 10:14:18 2019-08-20 10:14:18 ck1ktwrag01qqi3umgpn65iji Node.js – kurs w 60 minut https://tworcastron.pl/blog/node-js-kurs-w-60-minut/

Strasznie długo zabierałem się do tego odcinka, ale w końcu udało mi się go nagrać 🙂 Odcinek jest przede wszystkim dla tych, którzy z...

\n

Artykuł Node.js – kurs w 60 minut pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2019-10-10 15:00:25 nodejs-kurs-w-60-minut ckbbw3jvs000li3umgw19edq9 2019-10-10 15:00:25 2019-10-10 15:00:25 @@ -1085,7 +1106,6 @@ ckosj3esj00020wmp7299ix2o Jak nauczyć się javascriptu https://www.youtube.com/ ckosv2dgb00020wmvdova8rpl Praca zdalna po 12 miesiącach - czy planuję powrót do biura? https://www.youtube.com/watch?v=FpJpdTVfU_A Praca zdalna to dla większości programistów spora zmiana w ich nawykach związanych z rozwojem zawodowym. Czy oszczędność czasu, praca z dowolnego miejsca na świecie i bardziej elastyczny plan dnia wystarczą, żeby uczynić programistę bardziej szczęśliwym i produktywnym?\n\nW dzisiejszym filmie opowiadam o pięciu subiektywnych spostrzeżeniach związanych z pracą zdalną, która jeszcze kilkanaście miesięcy temu kojarzyła mi się z wszystkim co najgorsze. Przede wszystkim obawy budziło poczucie odosobnienia i brak kontaktu ze współpracownikami. Jak jest w rzeczywistości?\n\nZapraszam do zapoznania się z moimi wrażeniami 🚀\n\nZnakomite materiały w temacie pracy zdalnej:\nhttps://increment.com/remote/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-05-17 16:00:16 praca-zdalna-po-12-miesiacach-czy-planuje-powrot-do-biura ckiyt1v9s001fi3umcgnxbgiu 2021-05-17 17:08:09.756 2021-05-17 17:08:09.756 cjamr0tk800vhi3umcwv253m1 Sukcesy & porażki tego roku https://www.nettecode.com/sukcesy-porazki-tego-roku/

Uwielbiam się organizować. Uwielbiam planować. Lubię wyznaczać sobie cele i je osiągać. W zbyt wielu obszarach, zbyt wiele naraz – to coś z czym ciągle walczę 😉 Lubię też od czasu do czasu spojrzeć, co udało mi się osiągnąć. Uważam, że to ważne, ponieważ jako ludzie mamy tendencje do zauważania tego, co złe. A czasem […]

\n

Artykuł Sukcesy & porażki tego roku pochodzi z serwisu NetteCode.

2017-11-30 17:23:05 sukcesy-and-porazki-tego-roku ckhnmdge00000i3um6batg2gk 2017-11-30 17:23:05 2017-11-30 17:23:05 ckotp9yw100020wmnpcsidc6m My AHA moments when testing with Cypress https://blog.piotrnalepa.pl/2021/05/18/my-aha-moments-when-testing-with-cypress/

Have you ever struggled with testing drag and drop features of you web app? In this article I'm going to share with you my AHA moments when developing E2E tests using Cypress. These are not only about drag'n'drop but they touch other areas of Cypress as well.

\nTen wpis My AHA moments when testing with Cypress został opublikowany najpierw na Piotr Nalepa - Blog webmasterski | Tutoriale JavaScript, CSS i nie tylko. 2021-05-18 06:49:37 my-aha-moments-when-testing-with-cypress ckekeq7uo0004i3umft185ior 2021-05-18 07:13:52.609 2021-05-18 07:13:52.609 -ckotwx7ol00020vmhwwzm44m3 JVM Tuesday vol. 38 https://blog.vived.io/jvm-tuesday-vol-38/ Wysypało nam releaseami - tydzień temu Kotlin 1.5, dzisiaj Scala 3 🥳. Oprócz tego nieco wyjaśnień z frontu Jakarty EE oraz dalszy ciąg naszego cotygodniowego przeglądu nowych JEPów. 2021-05-18 10:45:31 jvm-tuesday-vol.-38 ckmor5k8y000044moj65m13y0 2021-05-18 10:47:54.405 2021-05-18 10:47:54.405 ck35qat0w01svi3umdola3cxl ConFrontJS 2019 (darmowe bilety) https://tworcastron.pl/blog/confrontjs-2019-konkurs/

Już niedługo w Warszawie odbędzie się konferencja na temat… uwaga, niech was nie zmyli nazwa: front-endu, głównie JavaScriptu 🙂  Konferencja organizowana jest przez ekipę...

\n

Artykuł ConFrontJS 2019 (darmowe bilety) pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2019-11-19 10:42:14 confrontjs-2019-darmowe-bilety ckbbw3jvs000li3umgw19edq9 2019-11-19 10:42:14 2019-11-19 10:42:14 ck38j9fh401sxi3um9oofb4jb Operatory && oraz || (and, or) (#2 Zrozumieć JavaScript) https://tworcastron.pl/blog/operatory-oraz-and-or-2-zrozumiec-javascript/

Kolejny odcinek, który miał trwać kilka minut a ma ponad 20. Okazuje się, że nawet podstawowe operacje w JavaScripcie mogą być wykorzystane do całkiem...

\n

Artykuł Operatory && oraz || (and, or) (#2 Zrozumieć JavaScript) pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2019-11-21 09:48:31 operatory-and-oraz-or-and-or-2-zrozumiec-javascript ckbbw3jvs000li3umgw19edq9 2019-11-21 09:48:31 2019-11-21 09:48:31 ck3iikumo01tbi3umgj38251d Średniki – wstawiać czy nie? (#3 Zrozumieć JavaScript) https://tworcastron.pl/blog/sredniki-wstawiac-czy-nie/

Temat prawie tak samo drażliwy jak ten czy klamra { za if() powinna być w tej samej czy kolejnej linii. Średniki w JavaScripcie są...

\n

Artykuł Średniki – wstawiać czy nie? (#3 Zrozumieć JavaScript) pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2019-11-28 09:27:06 sredniki-wstawiac-czy-nie-3-zrozumiec-javascript ckbbw3jvs000li3umgw19edq9 2019-11-28 09:27:06 2019-11-28 09:27:06 @@ -1097,7 +1117,6 @@ ck5gijny001vgi3umgwls8m4w “this” oraz bind() call() apply() (#7 Zrozumieć J ck5qjdhfk01voi3umfh9adidc Jak postawić aplikację PHP (z własną domeną) na serwerze VPS https://tworcastron.pl/blog/jak-postawic-aplikacje-php-z-wlasna-domena-na-serwerze-vps/

Jak postawić aplikację PHP (z własną domeną) na serwerze VPS

\n

Artykuł Jak postawić aplikację PHP (z własną domeną) na serwerze VPS pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2020-01-23 09:30:56 jak-postawic-aplikacje-php-z-wlasna-domena-na-serwerze-vps ckbbw3jvs000li3umgw19edq9 2020-01-23 09:30:56 2020-01-23 09:30:56 ck60j55go01vyi3uma3jr47gd Vue.js – kurs w 60 minut https://tworcastron.pl/blog/vue-js-kurs-w-60-minut/

Vue.js czyli jeden z 3 najpopularniejszych frameworków JavaScript, zaraz za Reactem i Angularem. Osobiście bardzo lubię Vue, jest przejrzysty i jak to nazywam programmer-friendly....

\n

Artykuł Vue.js – kurs w 60 minut pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2020-01-30 09:22:09 vuejs-kurs-w-60-minut ckbbw3jvs000li3umgw19edq9 2020-01-30 09:22:09 2020-01-30 09:22:09 cj5skpg3400pgi3umas65dlp2 Kurs ES6 od Strefy Kursów https://www.webkrytyk.pl/2017/07/31/kurs-es6-od-strefy-kursow/ Trochę nieco ponad miesiąc temu Strefa Kursów ogłosiła, że przygotowała kurs o najnowszej wersji JS – ES6. Dawno żadnego kursu nie recenzowałem, więc była to idealna okazja, żeby jakiemuś się przyjrzeć. Żeby nie było: kurs w całości ukończyłem i zdobyłem certyfikat! Dlatego też mogę z czystym sumieniem poopowiadać, co zmienił w moim życiu. Kurs jest […] 2017-07-31 19:54:22 kurs-es6-od-strefy-kursow cki2dml0o000di3umgjexb6pk 2017-07-31 19:54:22 2017-07-31 19:54:22 -cjroyzii001f0i3um98tx1rm2 Webpack 4 – Jak go skonfigurować i zacząć pracę? https://bedekodzic.pl/webpack-4/

W tym artykule dowiesz się jak skonfigurować Webpacka w najnowszej odsłonie i […]

\n

The post Webpack 4 – Jak go skonfigurować i zacząć pracę? appeared first on Będę Kodzić.

2019-02-03 13:56:33 webpack-4-jak-go-skonfigurowac-i-zaczac-prace ck87juhko000ni3umanz2707n 2019-02-03 13:56:33 2019-02-03 13:56:33 cjrtkf94w01f8i3umbrxx42i2 Progressive Web App i WordPress – Teoria, Środowisko i Lighthouse https://bedekodzic.pl/progressive-web-app/

Ten wpis jest wstępem do tematu PWA czyli super szybkich aplikacji internetowych […]

\n

The post Progressive Web App i WordPress – Teoria, Środowisko i Lighthouse appeared first on Będę Kodzić.

2019-02-06 19:07:44 progressive-web-app-i-wordpress-teoria-srodowisko-i-lighthouse ck87juhko000ni3umanz2707n 2019-02-06 19:07:44 2019-02-06 19:07:44 cjs3mqfx401fni3ume49p7x7a Jak używać grafiki na Front-Endzie w 2019. https://bedekodzic.pl/webp-graphics/

Optymalizacja grafik w nowoczesnej aplikacji internetowej to podstawa. Dzisiaj opiszę kilka dobrych […]

\n

The post Jak używać grafiki na Front-Endzie w 2019. appeared first on Będę Kodzić.

2019-02-13 20:10:07 jak-uzywac-grafiki-na-front-endzie-w-2019 ck87juhko000ni3umanz2707n 2019-02-13 20:10:07 2019-02-13 20:10:07 cjsdk7wug01g2i3umf6t53x6r Progressive Web App. Tworzę manifest.json i Service Worker. https://bedekodzic.pl/manifest-json-service-worker/

W tym wpisie dowiesz się jak stworzyć Progressive Web App na WordPress’ie. […]

\n

The post Progressive Web App. Tworzę manifest.json i Service Worker. appeared first on Będę Kodzić.

2019-02-20 18:57:25 progressive-web-app-tworze-manifestjson-i-service-worker ck87juhko000ni3umanz2707n 2019-02-20 18:57:25 2019-02-20 18:57:25 @@ -1111,6 +1130,7 @@ cjvy3q6ug01kvi3um5w2qgicq Dlaczego !important jest dla słabiaków? Specificity cjw83xuhs01lai3um3vl62dmx 5 algorytmów w JavaScript dla Mid Developera https://bedekodzic.pl/algorytmy-mid/

W tym artykule znajdziesz kilka algorytmów w JSie na poziomie Mid. Każdy […]

\n

The post 5 algorytmów w JavaScript dla Mid Developera appeared first on Będę Kodzić.

2019-05-28 18:01:40 5-algorytmow-w-javascript-dla-mid-developera ck87juhko000ni3umanz2707n 2019-05-28 18:01:40 2019-05-28 18:01:40 cjwktygrs01lli3uma14c6kxm DevTips – Color Picker w Chrome DevTools https://bedekodzic.pl/color-picker-devtools/

Praca z kolorami to na Front-Endzie norma. Chrome DevTools oferuje zgrabne narzędzie […]

\n

The post DevTips – Color Picker w Chrome DevTools appeared first on Będę Kodzić.

2019-06-06 15:43:13 devtips-color-picker-w-chrome-devtools ck87juhko000ni3umanz2707n 2019-06-06 15:43:13 2019-06-06 15:43:13 cjc2fvgdc00wsi3um1q3p2qoo Pyrrusowe zwycięstwo https://blog.comandeer.pl/refleksje/a11y/2018/01/05/pyrrusowe-zwyciestwo.html W Sieci toczy się obecnie spór na miarę tego pomiędzy Świętym Cesarstwem Rzymskim a papiestwem. Po jednej stronie mamy WHATWG, po drugiej – W3C. 2018-01-05 21:35:00 pyrrusowe-zwyciestwo cki52vf40000ci3um2x784hhn 2018-01-05 21:35:00 2018-01-05 21:35:00 +ckodbjwlh00020wl7q6ss8qz3 W czym zrobić nowy projekt React.js? 🙄 CRA? Next? Gatsby? https://www.youtube.com/watch?v=RlwNET5r3RY W tym materiale dziele się swoją opinią na temat startu nowego projektu React.js. Czy konfigurować projekt samodzielenie? Użyć CRA? Next? Vite?\n\n#react #next #webpack\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-05-06 19:55:32 w-czym-zrobic-nowy-projekt-react.js-cra-next-gatsby ckivz8t54001di3umfv7i4q26 2021-05-06 20:05:22.757 2021-05-06 20:05:22.757 ck3d8uqdc01t4i3um9ep2bboc Responsywny kwadrat w CSS, mierzony w procentach? Jak najbardziej! https://blog.robertorlinski.pl/2019/11/24/responsywny-kwadrat-w-css/ Znasz to lekkie rozczarowanie? Chcesz stworzyć kwadrat w CSS, który będzie dobrze zachowywał się na urządzeniach mobilnych. Może w tamtym momencie nie znasz jeszcze jednostek vw, vh i CSS grida, które mogłyby się okazać pomocne w tej sytuacji. Więc nadajesz mu szerokość, na przykład równą 30% i dokładnie taką samą wysokość – również 30%, z nadzieją, że element, […] 2019-11-24 16:56:00 responsywny-kwadrat-w-css-mierzony-w-procentach-jak-najbardziej ckig8bkw0000zi3umgy3obxsr 2019-11-24 16:56:00 2019-11-24 16:56:00 ck3oqb86w01toi3um7i0u61nk 7 narzędzi i materiałów do nauki języka angielskiego, o których możesz nie mieć pojęcia https://blog.robertorlinski.pl/2019/12/02/materialy-do-nauki-jezyka-angielskiego/ Język angielski, bez względu na to, czy byśmy tego chcieli, czy też nie, jest i w najbliższej przyszłości na pewno będzie blisko nas. Dlatego warto się go porządnie nauczyć! Dla komfortu psychicznego, i przede wszystkim, wolności. Bo w końcu, nie ma wolności, bez możliwości. A w obecnym świecie, nie ma naprawdę wielu możliwości, bez angielskiego. Dlatego chcę przekazać […] 2019-12-02 17:50:11 7-narzedzi-i-materialow-do-nauki-jezyka-angielskiego-o-ktorych-mozesz-nie-miec-pojecia ckig8bkw0000zi3umgy3obxsr 2019-12-02 17:50:11 2019-12-02 17:50:11 ck3ypw2uo01tyi3umb8jebcvc 3 sposoby na focus, widoczny tylko podczas nawigowania klawiaturą https://blog.robertorlinski.pl/2019/12/09/focus-widoczny-tylko-podczas-nawigowania-klawiatura/ Dbanie o dostępność to zawsze dobry pomysł. Czasami tylko pojawia się z nią mały problem – ma tendencję do kłócenia się z wyglądem naszej witryny. Tak jest, między innymi w przypadku pseudoelementu :focus, gdzie domyślnie, przeglądarki przypisują mu nie do końca ładną ramkę, która pojawia się od razu, po kliknięciu na jakikolwiek element interaktywny, jak […] 2019-12-09 17:36:06 3-sposoby-na-focus-widoczny-tylko-podczas-nawigowania-klawiatura ckig8bkw0000zi3umgy3obxsr 2019-12-09 17:36:06 2019-12-09 17:36:06 @@ -1122,7 +1142,6 @@ ckbgso17s023di3um0kea0z9d Dlaczego chcemy być bogami, gdy Bóg jest samotny? h ckbqpo888023pi3um4h7z5aci Trudno o cenniejszego wolontariusza, niż programista https://blog.robertorlinski.pl/2020/06/22/programista-wolontariusz/ Borze sosnowy, co on znowu wygaduje? Przecież wykonywany zawód nie ma najmniejszego wpływu na to, jak dana osoba, jest w stanie pomagać innym. Przecieeeeż słowo „wolontariusz”, kojarzy nam się z wyprowadzaniem psów, opieką nad osobami starszymi, czy innymi zadaniami, które zazwyczaj nie mają żadnego związku z naszymi zawodowymi kwalifikacjami. I jest to zupełna prawda, ale tylko […] 2020-06-22 16:25:29 trudno-o-cenniejszego-wolontariusza-niz-programista ckig8bkw0000zi3umgy3obxsr 2020-06-22 16:25:29 2020-06-22 16:25:29 ckdpmoa1k025ti3umhs0gaq7r Jak zasypiać szybciej, dzięki prokrastynacji? https://blog.robertorlinski.pl/2020/08/11/jak-zasypiac-szybciej-dzieki-prokrastynacji/ Leżysz w łóżku, mamy 23, może północ, może pierwszą. Raczej nic późniejszego, bo po 1 zasypia się z reguły znacznie prościej niż o takiej 23. Leżysz na boku. Przekręcasz się na drugi bok. Przekręcasz się na plecy. Potem na brzuch. Mija 15 minut, później 30, później kolejne 30. Myśli przebiegają przez głowę z prędkością światła, albo jeszcze szybciej […] 2020-08-11 07:33:11 jak-zasypiac-szybciej-dzieki-prokrastynacji ckig8bkw0000zi3umgy3obxsr 2020-08-11 07:33:11 2020-08-11 07:33:11 ckhksbraw02a6i3um9ow154fe Własne bloki w WordPress Gutenberg #001 – wprowadzenie, środowisko i pierwszy blok https://blog.robertorlinski.pl/2020/11/16/wordpress-gutenberg-001/ Serie poradników, nie mogą być inne, niż wszystko na świecie – muszą mieć swój początek, główną treść oraz zakończenie. Dlatego też w tej części serii o tworzeniu bloków Gutenberga, opowiem Ci trochę o samej serii, a później skonfigurujemy środowisko, aby pisanie samego kodu, było jak najprzyjemniejsze, a na końcu odpalimy nawet pierwszy, działający komponent. A co się będziemy ograniczać. Nie […] 2020-11-16 16:51:23 wlasne-bloki-w-wordpress-gutenberg-001-wprowadzenie-srodowisko-i-pierwszy-blok ckig8bkw0000zi3umgy3obxsr 2020-11-16 16:51:23 2020-11-16 16:51:23 -ckodbjwlh00020wl7q6ss8qz3 W czym zrobić nowy projekt React.js? 🙄 CRA? Next? Gatsby? https://www.youtube.com/watch?v=RlwNET5r3RY W tym materiale dziele się swoją opinią na temat startu nowego projektu React.js. Czy konfigurować projekt samodzielenie? Użyć CRA? Next? Vite?\n\n#react #next #webpack\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-05-06 19:55:32 w-czym-zrobic-nowy-projekt-react.js-cra-next-gatsby ckivz8t54001di3umfv7i4q26 2021-05-06 20:05:22.757 2021-05-06 20:05:22.757 ckopsyg0700020vldbz4t6ey3 TypeScript: Klasy cz.2 #10 https://www.youtube.com/watch?v=oD_0PCrAncY Dziesiąty odcinek z serii TypeScript z Domanem.\n\nKontynuacja tematy klas, w tym odcinku pokażemy implementowanie interface'u, dziedziczenie po klasach abstrakcyjnych (powiemy też co to) czy gettery i settery.\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript 2021-05-15 13:41:20 typescript:-klasy-cz.2-10 ckjpkgp9u000012mnlbnkxu51 2021-05-15 13:45:48.679 2021-05-15 13:45:48.679 ckou1f2z200020wmh7faaiwzm 3 podstawowe operacje na tablicach w dwóch odsłonach https://fsgeek.pl/post/podstawowe-operacje-na-tablicach-javascript-mutation-non-mutating/ W Javascript tablice są jednym z najbardziej popularnych i wykorzystywanych obiektów. Możemy na nich operować na dwa sposoby - mutując oryginalną tablicę lub tworząc nowy obiekt za każdym razem. W poście pokazuję jak wykonać podstawowe operacje na tablicach w tych dwóch podejściach. 2021-05-18 16:00:00 3-podstawowe-operacje-na-tablicach-w-dwoch-odslonach ckhxjb6o0000yi3umb3hg09jv 2021-05-18 12:53:46.574 2021-05-18 12:53:46.574 ckovxap6g00020wleya41tgde Dwa pierwsze miesiące… czyli nowicjusz na front-endowym pokładzie https://nowoczesny-frontend.pl/dwa-pierwsze-miesiace-czyli-nowicjusz-na-front-endowym-pokladzie/ Ostatnio nasz zespół się powiększył. Naszym nowym „nabytkiem” został Paweł – do tej pory związany z zupełnie inną dziedziną, a mianowicie politologią. Paweł postanowił jednak… 2021-05-19 20:16:16 dwa-pierwsze-miesiace...-czyli-nowicjusz-na-front-endowym-pokladzie ckcv2snww001ei3um3wmeeaom 2021-05-19 20:33:55.961 2021-05-19 20:33:55.961 @@ -1158,6 +1177,7 @@ ckbbw3jvs023ai3um328a9muk try, catch – czyli wyłapywanie błędów w JS https cj0b5y9x4009bi3um1g7u8usg React.createClass czy extends React.Component? http://www.induweb.pl/react-createclass-extends-react-component/

W trakcie poznawania Reacta w tutorialach z których korzystałem stosowano tradycyjne podejście do tworzenia komponentów przy użyciu React.createClass. Istnieje jednak inny sposób korzystający z nowości ES6 Czytaj więcej

\n

The post React.createClass czy extends React.Component? appeared first on Induweb.

2017-03-15 16:10:43 reactcreateclass-czy-extends-reactcomponent cjczvdmnk000hi3umdr1lf9nt 2017-03-15 16:10:43 2017-03-15 16:10:43 cj0dx5y60009li3umfv25bsqv Zmienne i interpolacja w preprocesorach CSS http://www.induweb.pl/zmienne-interpolacja-preprocesorach-css/

W tym poście opiszę zmienne, z których możemy korzystać dzięki preprocesorom CSS takim jak: SASS, LESS.  Przedstawię problemy jakie możemy napotkać w arkuszach stylów. Najprostsze Czytaj więcej

\n

The post Zmienne i interpolacja w preprocesorach CSS appeared first on Induweb.

2017-03-17 14:28:03 zmienne-i-interpolacja-w-preprocesorach-css cjczvdmnk000hi3umdr1lf9nt 2017-03-17 14:28:03 2017-03-17 14:28:03 cj0l5xxrc00agi3um12bifxcc HTML5 Web Storage – z czym to się je? http://www.induweb.pl/html5-web-storage-czym-sie-je/

Dzięki HTML5 mamy dostępne nowe miejsce do przechowywania danych, programiści nie muszą się męczyć z mniej elastycznymi Cookies, które dodatkowo były dołączane do każdego requestu. Czytaj więcej

\n

The post HTML5 Web Storage – z czym to się je? appeared first on Induweb.

2017-03-22 16:08:09 html5-web-storage-z-czym-to-sie-je cjczvdmnk000hi3umdr1lf9nt 2017-03-22 16:08:09 2017-03-22 16:08:09 +cjxnbp0o001mri3umca4k94pa Podstawy aplikacji webowych - SOP i CORS https://fsgeek.pl/post/sop-cors/

Podczas pisania aplikacji ciągle musimy zwracać uwagę na bezpieczeństwo danych, które są przesyłane między klientem a serwerem. Oprócz mechanizmów, które sami implementujemy istnieją też te zaimplementowane natywnie w przeglądarce. To o czym dziś chciałbym powiedzieć to jeden z takich mechanizmów czyli SOP oraz sposób na jego rozluźnienie czyli CORS.

\n\n

Czym jest SOP

\n\n

Zacznijmy od mechanizmu zabezpieczającego, który jest zaimplementowany w przeglądarce czyli SOP - Same-Origin Policy. Mechanizm ten polega, że tylko strony posiadające to samo pochodzenie (origin) mogą komunikować między sobą i wymieniać dane między sobą (najczęściej jest to komunikacja na drodze klient - serwer gdzie to klient chce dane istniejące na serwerze). Jednak kiedy możemy powiedzieć, że strony (aplikacje) mają to samo pochodzenie? Do określenia tego służą nam 3 elementy :

\n\n
    \n
  • Protokół
    • \n
  • Host
    • \n
  • Port
    • \n
\n\n

Jeśli te 3 elementy będą identyczne to znaczy, że strony mają ten sam Origin. Żeby lepiej to zobrazować mam parę przykładów:

\n\n
    \n
  • http://example.com i http://example.com/page/1 - OK
    • \n
  • http://example.com i https://example.com - inny protokół (HTTP i HTTPS)
    • \n
  • http://example.com i http://example.com:8080 - inny port (domyślnie http:// jest na porcie 80)
    • \n
  • http://example.com i http://posts.example.com - inny host
    • \n
\n\n

Jeśli to sprawdzenie nie przejdzie (czyli przynajmniej jeden z elementów będzie różny) to przeglądarka zablokuje taką komunikację i klient nie dostanie danych o jakie prosi.

\n\n

Czym jest CORS

\n\n

Skoro wiemy czym jest SOP to teraz mechanizm, który pozwala nam to osłabić czyli CORS - Cross-Origin Resource Sharing. Jednak skoro SOP ma nas chronić to po co mechanizm, który będzie go osłabiał? Jest to spowodowane sposobem w jaki tworzymy aktualnie aplikacje internetowe. Obstawiam, że większość aktualnie tworzonych aplikacji jest tworzona jako SPA - czyli mamy kod Javascript, który komunikuje się przy pomocy odpowiednich zapytań z serwerem. No i w związku z tym, że są to osobne aplikacje (frontend i backend) to nie będą spełniały wymogu posiadania identycznego Originu. Bez CORS’a takie aplikacje nie mogłyby funkcjonować.

\n\n

CORS jest mechanizmem, który przy pomocy zwykłych nagłówków w zapytaniu HTTP informuje przeglądarkę (to przeglądarka pilnuje SOP’a), że klient, który jest na konkretnym hoście, protokole i porcie może odpytywać serwer o dane. Czyli wracając jednego z przykładów wyżej - http://example.com i http://example.com:8080 - komunikacja będzie możliwa jeśli serwer (http://example.com:8080) poinformuje przeglądarkę że ufa klientowi, który znajduje się na http://example.com i ten może odpytywać o dane. Tylko jak to zrobić w aplikacji?

\n\n

Jak działa mechanizm CORS

\n\n

Mechanizm CORS ma to do siebie, że jego nieumiejętne skonfigurowanie powoduje, że nie działa albo cała aplikacja albo część funkcjonalności - w zależności od tego o czym zapomnimy. Warto również pamiętać, że obowiązek poprawnej konfiguracji tego mechanizmu leży po stronie programistów piszących cześć serwerową (backend) - frontend nie jest w stanie naprawić błędów, które wynikają ze złej konfiguracji.

\n\n

Jednak zanim opiszę jakie nagłówki serwer musi wysyłać to jeszcze szybko o dwóch rodzajach zapytań jakie możemy wykonać:

\n\n
    \n
  • Simple request
    • \n
  • Preflighted reqest
    • \n
\n\n

Idea prostego zapytania (Simple request) jest następująca - jest to każde zapytanie, które spełnia wszystkie poniższe warunki:

\n\n
    \n
  • Dozwolone metody: GET, HEAD, POST
    • \n
  • Dozwolone nagłówki (te które możemy sami ustawić): Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width
    • \n
  • Dozwolone wartości dla Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain
    • \n
\n\n

Jak wygląda komunikacja klient - serwer w przypadku prostego zapytania:

\n\n
    \n
  • Klient wysyła zapytanie do serwera
    • \n
  • Przeglądarka dołącza do zapytania nagłówek Origin
    • \n
  • Serwer zwraca odpowiedź wraz z nagłówkiem Access-Control-Allow-Origin
    • \n
  • Przeglądarka sprawdza czy wartość w Access-Control-Allow-Origin zgadza się z wartością Origin klienta
    • \n
  • Jeśli wartość się nie zgadza to przeglądarka blokuje klienta przed otrzymaniem danych z serwera\n
    • \n
\n\n

Jednak w aplikacjach internetowych nie wykorzystujemy prostych zapytań tylko preflight. Dlaczego? Ponieważ po pierwsze właściwie wszystko leci za pomocą json’a czyli nie zgadza się Content-Type, po drugie w 90% przypadków mamy jakieś uwierzytelnianie więc przesyłamy dodatkowy nagłówek z autoryzacją.

\n\n

Jak więc wygląda komunikacja w przypadku preflighted request:

\n\n
    \n
  • Klient chce wysłać zapytanie do serwera ale zapytanie nie spełnia założeń simple request
    • \n
  • Zapytanie jest wstrzymywane przez przeglądarkę i jest wysyłane zapytanie preflight, którego celem jest sprawdzenie czy klient może wykonać zamierzone zapytanie
    • \n
  • Zapytanie preflight charakteryzuje się kilkoma elementami:\n\n
      \n
    • wysłane zapytanie ma metodę OPTIONS
      • \n
    • wysyłane są dodatkowe nagłówki Access-Control-Request-Method, Access-Control-Request-Headers oraz ORIGIN (o samych nagłówkach będzie za chwilę)
      • \n
    • \n
  • W momencie gdy przeglądarka dostaje odpowiedź na zapytanie sprawdza zawartość nagłówków Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers w odpowiedzi
    • \n
  • Jeśli wszystko jest w porządku to jest wysyłane oryginalne zapytanie tak jak w przypadku Simple Request
    • \n
\n\n

Nagłówki CORS

\n\n

Jak widać cały mechanizm CORS opiera się na wysyłaniu odpowiednich nagłówków. Tak więc aby to poprawnie zaimplementować wystarczy, że będziemy wiedzieć do czego są poszczególne nagłówki oraz będziemy je konsekwentnie wysyłać. Same nagłówki możemy podzielić na dwa rodzaje - te wysyłane od klienta oraz te wysyłane przez serwer. I tak jak nagłówkami od strony klienta nie musimy się przejmować bo ustawia je za nas przeglądarka to o tych od strony serwera musimy pamiętać sami.

\n\n

Nagłówki po stronie klienta:

\n\n
    \n
  • Origin - Orign klienta
    • \n
  • Access-Control-Request-Method - w zapytaniu preflight jest tu wpisywana nazwa metody z jaką klient chciał wykonać zapytanie
    • \n
  • Access-Control-Request-Headers - znajdują się tam nagłówki, które zostaną wykorzystane przy normalnym zapytaniu
    • \n
\n\n

Nagłówki po stronie serwera:

\n\n
    \n
  • Access-Control-Allow-Origin - serwer zwraca tutaj informacje jaki Origin musi mieć klient by był w stanie wykonać request. Oprócz podania konkretnej wartości można podać tutaj wartość * co oznacza, że każdy może wykonać zapytanie.
    • \n
  • Access-Control-Allow-Methods - tutaj serwer zwraca jakie rodzaje zapytań są dozwolone
    • \n
  • Access-Control-Allow-Headers - tutaj serwer zwraca informację jakie nagłówki może wysłać klient
    • \n
\n\n

Jak sobie poradzić podczas developmentu

\n\n

Oczywiście prawidłowa konfiguracja dla produkcji nie gwarantuje, że będzie to działało podczas developmentu. Ja osobiście podczas pisania frontendu nie lubię stawiać u siebie backendu tylko staram się korzystać ze stagingu czy innego testowego środowiska. Ale oczywiście powoduje to problemy z mechanizmem CORS - jak sobie z tym poradzić? Parę sprawdzonych przeze mnie sposobów:

\n\n
    \n
  • Zawsze jeśli mamy więcej niż jedno środowisko testowe możemy poprosić by na tym pobocznym ustawić Access-Control-Allow-Origin na wartość * lub przepisywanie Originu klienta. Jeśli macie tylko jedno środowisko przedprodukcyjne to nigdy nie róbcie takich zabiegów- potem może się okazać że coś nie działa na produkcji bo jest jakaś błędna konfiguracja
    • \n
  • Wyłączyć ten mechanizm obronny w swojej przeglądarce - można to zrobić albo wtyczką albo uruchomieniem przeglądarki odpowiednimi przełącznikami - rozwiązanie prawie idealne - nie działają wtedy niektóre serwisy np.: Youtube, Google Drive, Twitter a i pewnie jest tego więcej
    • \n
  • No i ostatnia opcja - postawienie sobie lokalnie części serwerowej i zmiana konfiguracji tak aby działała z lokalnym środowiskiem frontendowym
    • \n
\n\n

A wy jak sobie radzicie z CORS’em? A może macie jakieś ciekawe historie lub use-case’y związane z mechanizmem SOP lub CORS? Zapraszam do komentowania i dzielenia się wpisem.

2019-07-03 14:15:00 podstawy-aplikacji-webowych-sop-i-cors ckhxjb6o0000yi3umb3hg09jv 2019-07-03 14:15:00 2019-07-03 14:15:00 cj0p7727s00awi3umc8v38wwb Indurian – opis postępów http://www.induweb.pl/indurian-opis-postepow/

Jest pierwszy duży sukces. Widoczna na zdjęciu moja osobista testerka wydała pozytywną opinię o grze. Spędziła przy niej ponad 10 minut i to pomimo tego, Czytaj więcej

\n

The post Indurian – opis postępów appeared first on Induweb.

2017-03-25 11:54:19 indurian-opis-postepow cjczvdmnk000hi3umdr1lf9nt 2017-03-25 11:54:19 2017-03-25 11:54:19 cj0v0kvbs00bji3um87ccdhhr Moje początki z webdevem (screeny z 2002 r.) http://www.induweb.pl/moje-poczatki-z-webdevem/

Przeglądając jedną z grup Facebookowych dla początkujących Front-End Developerów natknąłem się na wpis 11-latka, który chwalił się swoim projektem. Abstrahując od jego jakości pierwszą moją Czytaj więcej

\n

The post Moje początki z webdevem (screeny z 2002 r.) appeared first on Induweb.

2017-03-29 13:35:43 moje-poczatki-z-webdevem-screeny-z-2002-r cjczvdmnk000hi3umdr1lf9nt 2017-03-29 13:35:43 2017-03-29 13:35:43 cj0z4206o00c0i3umd9tag1b8 Ogarnąć Reduxa – aktualizacja na półmetku http://www.induweb.pl/ogarnac-reduxa-aktualizacja-polmetku/

Jest to dziesiąty konkursowy post, co znaczy, że jestem już na półmetku konkursu Daj się Poznać. Udało mi się całkiem nieźle poznać podstawy Reacta – Czytaj więcej

\n

The post Ogarnąć Reduxa – aktualizacja na półmetku appeared first on Induweb.

2017-04-01 10:24:06 ogarnac-reduxa-aktualizacja-na-polmetku cjczvdmnk000hi3umdr1lf9nt 2017-04-01 10:24:06 2017-04-01 10:24:06 @@ -1170,8 +1190,7 @@ ckp3z55tf00020vl7xqvsj8ai JVM Tuesday vol. 39 https://blog.vived.io/jvm-tuesday- cje7om6yo00z3i3umddh63bjw AMP – a na co to komu? https://blog.comandeer.pl/refleksje/html-css/2018/02/28/amp-a-na-co-to-komu.html Siedząc od lat w środowisku webdevowym, wyrobiłem sobie dość silne opinie o poszczególnych aspektach działania dżungli zwanej Siecią. Dzisiaj podzielę się jedną z takich opinii. 2018-02-28 22:58:00 amp-a-na-co-to-komu cki52vf40000ci3um2x784hhn 2018-02-28 22:58:00 2018-02-28 22:58:00 cje91zgg000z6i3um0k8t2cyl TDZ https://blog.comandeer.pl/javascript/2018/03/01/tdz.html Piekło zamarzło! Przyszedł dzień, w którym Comandeer posypuje głowę popiołem i przyznaje się do błędu. 2018-03-01 22:00:00 tdz cki52vf40000ci3um2x784hhn 2018-03-01 22:00:00 2018-03-01 22:00:00 cjehjl99c00zhi3um7scpaadt Kurtyna cienia https://blog.comandeer.pl/refleksje/html-css/2018/03/07/kurtyna-cienia.html W dniach 5 i 6 marca 2018 roku postanowiono zabić deklaratywny Shadow DOM. Stało się to w czasie meetingu Web Platform WG w Tokio. 2018-03-07 20:35:00 kurtyna-cienia cki52vf40000ci3um2x784hhn 2018-03-07 20:35:00 2018-03-07 20:35:00 -cjelpvhs000zli3umhccg118p Standaryzacja AMP? https://blog.comandeer.pl/refleksje/html-css/2018/03/10/standaryzacja-amp.html Google ogłosiło, że standaryzuje technologie związane z AMP. Mam jednak pewne wątpliwości, co do całego procesu… 2018-03-10 18:42:00 standaryzacja-amp cki52vf40000ci3um2x784hhn 2018-03-10 18:42:00 2018-03-10 18:42:00 -cjgmoaodc011ji3umhhjo4mxo Headings First Principle https://blog.comandeer.pl/refleksje/html-css/2018/04/30/headings-first-principle.html Dzisiaj krótko o tym, czym jest Headings First Principle (Zasada Najpierw Nagłówki). Wymyśliłem ją na poczekaniu 20 lutego w trakcie dyskusji nad sensownością znaczników article i section i moim skromnym zdaniem w prosty i sensowny sposób opisuje, jak dzielić stronę na sekcje. 2018-04-30 20:05:00 headings-first-principle cki52vf40000ci3um2x784hhn 2018-04-30 20:05:00 2018-04-30 20:05:00 +cis6l5ts0005si3um1rmrezs6 WarsawJS Meetup #24 https://piecioshka.pl/blog/2016/08/23/warsawjs-meetup-24.html

\n No i mamy kolejne spotkanie "fanatyków" JavaScript-owych! Oczywiście, w pozytywnym tego słowa znaczeniu.\n Tym razem spotkaliśmy się 10 sierpnia w Państwomiasto\n i wysłuchaliśmy trzech prelekcji o JS-ie.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Ze względu na piękne słońce oraz niesamowite widoki tym razem wybraliśmy się na dach\n Biblioteki Uniwersyteckiej w Warszawie.\n Z dachu widać mnóstwo pięknych krajobrazów - świetne miejsce do nagrywania wideo, ale również do zwiedzania.\n Z tego też powodu, nie było łatwo nagrywać. Ciężko się skupić, gdy koło Ciebie kręci się mnóstwo ludzi.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: 9 demonów programisty JS [PL] Cezary Walenciuk

\n\n

\n Pierwsza prelekcja nie poruszała konkretnego kodu, ani biblioteki. Była ona z rodzaju tych miękkich.\n Uważam, że takie prelekcji pobudzają równie mocno do myślenia co stricte techniczne prelekcje.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: React w świecie nawiasów: ClojureScript, reagent [EN] Daniel Janus

\n\n

\n Daniel, doświadczony programista obecnie wykonujący swój zawód w firmie Rebased,\n opowiedział o Reagencie, czyli wykorzystaniu biblioteki React.js w języku ClojureScript.\n Niestety, ale Reagent nie rozwiązuje wszystkich problemów, ze względu na to, że jest on tylko prezentacyjną warstwą.\n

\n\n

\n Kolejne narzędzie omawiane podczas prelekcji to\n re-frame. Które to\n rozwiązuje problem braku innych warstw. Dzięki re-frame mamy unidirectional data flow.\n

\n\n

\n Ciekawostka: W ClojureScript nigdy nie napiszemy funkcji w stylu shouldComponentUpdate,\n ponieważ wszystko w tym języku jest pure.\n

\n\n
\n re-frame makes the code maintainable.\n Daniel Janus. 2016-08-10\n
\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: NativeScript: Gentle Introduction [PL] Paweł Kondraciuk

\n\n

\n Paweł - developer z Białegostoku. Człowiek, który wypalił się\n zawodowo w Pythonie przeszedł do Front-end-u.\n

\n\n
\n Nie ma HTML-a, nie ma DOMu.\n Paweł Kondraciuk. 2016-08-10\n
\n\n

\n Prelegent zrobić demo, korzystając z emulatora. Gdzie pokazał "mięso", czyli przykładowy projekt.\n Dowiedzieliśmy się, że JavaScript jest uruchomiony w UI Thread, dzięki temu JS ma dostęp do obiektów Java-owych.\n Stąd też kod zaprezentowany na poniższym listing uruchomi się bez błędu.\n

\n\n
// Android\nvar time = new android.text.format.Time();\ntime.set(1, 0, 2015);\nconsole.log(time.format("%D"));\n\n// iOS\nvar alert = new UIAlertView();\nalert.message = "Hello world!";\nalert.addButtonWithTitle("OK");\nalert.show();\n\n// https://pawelkondraciuk.github.io/warsawjs-nativescript/
\n\n

\n Dzięki Pawłowi dowiedzieliśmy się, że największą zaletą korzystania z NativeScript\n jest bardzo dużo wspólnego kodu - jeden wspólny codebase\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-08-22 22:00:00 warsawjs-meetup-24 ckbw97zyw0007i3umdszu2ola 2016-08-22 22:00:00 2016-08-22 22:00:00 cjhp4r7mo012ti3um8sfy2eay Asynchroniczny DOM https://blog.comandeer.pl/refleksje/javascript/2018/05/27/asynchroniczny-dom.html Ostatnio natrafiłem na artykuł opisujący, jak działa React Fiber i doznałem momentu z cyklu “hej, przecież ja to znam!”. Ba, koncept użyty w React 16 do polepszenia wydajności posłużył mi do napisania sporej części mojej książki. Dlatego dzisiaj zapraszam na krótką podróż po meandrach (a)synchronicznego DOM-u. 2018-05-27 18:01:00 asynchroniczny-dom cki52vf40000ci3um2x784hhn 2018-05-27 18:01:00 2018-05-27 18:01:00 cjj1rh6tc014qi3umhbw27bs8 Jednoplikowe komponenty https://blog.comandeer.pl/javascript/html-css/2018/06/30/jednoplikowe-komponenty.html Chyba każdy, kto miał styczność z frameworkiem Vue, słyszał również o jego jednoplikowych komponentach. Ten super prosty pomysł pozwala definiować cały kod odpowiedzialny za konkretny komponent w jednym pliku. Jest to na tyle dobre rozwiązanie, że pojawiła się inicjatywa przeniesienia tego mechanizmu do przeglądarek. Niemniej – stanęła w miejscu i od sierpnia tamtego roku nic się nie wydarzyło. Mimo to myślę, że spojrzenie na ten problem i próba dostosowania go do przeglądarki jest ciekawym zagadnieniem, którym się dzisiaj zajmiemy. 2018-06-30 18:50:00 jednoplikowe-komponenty cki52vf40000ci3um2x784hhn 2018-06-30 18:50:00 2018-06-30 18:50:00 cjka1rqio0165i3um8da07cx5 Uniwersalny getter https://blog.comandeer.pl/javascript/2018/07/31/uniwersalny-getter.html Chociaż magia niezbyt idzie w parze z programowaniem, to mimo to polubiłem PHP-owe metody magiczne, wśród których chyba najbardziej przypadło mi do gustu __get. Ta prosta metoda pozwalała przechwycić odwołania do nieistniejących pól klasy: 2018-07-31 18:40:00 uniwersalny-getter cki52vf40000ci3um2x784hhn 2018-07-31 18:40:00 2018-07-31 18:40:00 @@ -1185,6 +1204,8 @@ cjrjyj6g001epi3umeb856bbp System polyfillów https://blog.comandeer.pl/eksperyme cjs6nbr9c01fri3um4aqbda40 Czy div jest dostępny? https://blog.comandeer.pl/a11y/html-css/2019/02/15/czy-div-jest-dostepny.html 14 lutego Ryan Florence napisał na Twitterze, że przyciski w React Native Web (RNW) są dostępne: 2019-02-15 22:50:00 czy-div-jest-dostepny cki52vf40000ci3um2x784hhn 2019-02-15 22:50:00 2019-02-15 22:50:00 ckox7cw5900020wmd5rh11ptu Jak poruszać się po DOMie https://tworcastron.pl/blog/jak-poruszac-sie-po-domie/

Jak poruszać się po DOMie [wideo]

\n

Artykuł Jak poruszać się po DOMie pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-05-20 17:59:45 jak-poruszac-sie-po-domie ckbbw3jvs000li3umgw19edq9 2021-05-20 18:03:20.638 2021-05-20 18:03:20.638 ckp43etec00020wl87s0zkpvv Endpointy w 5 minut - Apollo Server i Fastify https://fsgeek.pl/post/apollo-graphql-sever-w-fastify/ Graphql jest coraz popularniejszy i widzę go coraz częściej w rozwiązaniach produkcyjnych. Chyba jednym z najbardziej popularnych rozwiązań do implementacji tego rozwiązania na backendzie jest Apollo Server. Zaimplementowałem go w aplikacji napisanej w Fastify (klon Linktree). 2021-05-25 16:00:00 endpointy-w-5-minut-apollo-server-i-fastify ckhxjb6o0000yi3umb3hg09jv 2021-05-25 13:47:15.157 2021-05-25 13:47:15.157 +cjxc6xhgo01mei3umh2hrh7ja Gulp 4 – konfiguracja na start do pracy na Front-Endzie. https://bedekodzic.pl/gulp-4/

Szukasz narzędzia aby szybko zacząć pracę ze swoim projektem na Front-Endzie? W […]

\n

The post Gulp 4 – konfiguracja na start do pracy na Front-Endzie. appeared first on Będę Kodzić.

2019-06-25 19:16:09 gulp-4-konfiguracja-na-start-do-pracy-na-front-endzie ck87juhko000ni3umanz2707n 2019-06-25 19:16:09 2019-06-25 19:16:09 +ckpjhapcm00020wl5howzvnmm Software Craftsmanship Sunday vol. 40 https://blog.vived.io/software-craftsmanship-sunday-vol-40/ W dniu dzisiejszym jeden interesujący news o którym słyszał każdy, jeden (równie intrygujący) o którym nie słyszał nikt, oraz jeden który nie obszedłby nawet autora, gdyby nie naszły go smutne rozkminy z nim związane 🥲. Zapraszam do lektury! 2021-06-05 07:25:40 software-craftsmanship-sunday-vol.-40 ckmor5k8y000044moj65m13y0 2021-06-05 08:12:30.55 2021-06-05 08:12:30.55 ckp5n2t7100020wmoc4ldfgwt Sprawdź jak dzięki ImageCapture zrobisz zdjęcie prościej w swojej aplikacji https://frontcave.pl/sprawdz-jak-dzieki-imagecapture-zrobisz-zdjecie-prosciej-w-swojej-aplikacji/

Spis treści Wprowadzenie Kod bazowy dla porównania ImageCapture vs canvas Robienie zdjęcia Stary sposób z canvas Nowy sposób z ImageCapture Wsparcie ImageCapture Kod przykładu na Github Klikalny przykład na Github Pages Podsumowanie Wprowadzenie We wszystkich aplikacjach WWW w których pracowałem do tej pory robienie zdjęcia polegało na podpięciu się do wideo z kamery i przechwyceniu … Czytaj dalej Sprawdź jak dzięki ImageCapture zrobisz zdjęcie prościej w swojej aplikacji

\n

Artykuł Sprawdź jak dzięki ImageCapture zrobisz zdjęcie prościej w swojej aplikacji pochodzi z serwisu Front Cave.

2021-05-26 15:26:13 sprawdz-jak-dzieki-imagecapture-zrobisz-zdjecie-prosciej-w-swojej-aplikacji ckirm3wzs001li3umfdkcfl6k 2021-05-26 15:45:33.518 2021-05-26 15:45:33.518 ckp6mdjg900020vjx2onwsles Largest Contentful Paint (LCP) ⚡️ - jak optymalizować? / Zoptymalizowany Front-end https://www.youtube.com/watch?v=xWcRC6jerT8 Lekcja z kursu Zoptymalizowany Front-end (https://www.webdevinsider.pl/zoptymalizowany-frontend) na temat optymalizacji Largest Contentful Paint (metryki wchodzącej w skład Core Web Vitals, tak bardzo kluczowej z punktu widzenia postrzegalnej wydajności front-endu).\n\n#lcp #largestcontentfulpaint #corewebvitals 2021-05-27 07:46:02 largest-contentful-paint-(lcp)-jak-optymalizowac-zoptymalizowany-front-end ckjrjuqf900002bk2kpgy4181 2021-05-27 08:13:40.665 2021-05-27 08:13:40.665 ckp796dl500020wmi0tpnmh3p Wzorzec projektowy Factory (Fabryka) https://devszczepaniak.pl/wzorzec-projektowy-factory-fabryka/

Fabryka jest bardzo powszechnie używanym i łatwym w zastosowaniu wzorcem projektowym. Mówiąc o wzorcu projektowym Fabryka można wyróżnić cztery rodzaje fabryk – Factory (fabryka), Factory Method (metoda wytwórcza), Static Factory (fabryka statyczna) oraz AbstractFactory (fabryka abstrakcyjna). Głównym założeniem fabryki, tak jak w rzeczywistym świecie, jest wytwarzanie obiektów. Dzięki wykorzystaniu fabryki, można ukryć szczegóły implementacyjne tworzenia … Czytaj dalej Wzorzec projektowy Factory (Fabryka)

\n

Artykuł Wzorzec projektowy Factory (Fabryka) pochodzi z serwisu Devszczepaniak.pl.

2021-05-27 18:20:13 wzorzec-projektowy-factory-(fabryka) ckiyvf2eg0012i3um2h8g0dup 2021-05-27 18:51:57.641 2021-05-27 18:51:57.641 @@ -1195,7 +1216,6 @@ ckp71izk900020wmissyq05ye Frontend Thursday vol. 39 https://blog.vived.io/fronte ckpbcmhar00020vmrwohehc42 Co pomogło mi dobrze zrozumieć git? https://www.youtube.com/watch?v=TayzBipV0cg 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\nNasza grupa na FB: https://www.facebook.com/groups/zaczynamy.programowac/\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n0:00 Intro\n2:09 Czym jest snapshot?\n3:27 Czym jest HEAD?\n4:56 git reflog\n\nGit to jedno z najbardziej popularnych narzędzi używanych przez programistów i programistki. Przez długi czas moja wiedza na temat gita była znikoma. W pewnym momencie uznałem, że skoro pracuje z gitem codziennie, to może warto poznać go lepiej, tak żeby moja praca była jeszcze efektywniejsza. Dzisiaj opowiadam Wam co pomogło mi zrozumieć gita lepiej i wskoczyć na wyższy poziom wtajemniczenia. \n\nFilip Mamcarczyk\nKacper Sokołowski 2021-05-30 15:30:02 co-pomoglo-mi-dobrze-zrozumiec-git ckj9sdcq7000051l5pzwpbq9f 2021-05-30 15:39:32.5 2021-05-30 15:39:32.5 ckpcd5auu00020wmm35jguxpz CSS co umieć przed pierwszą pracą https://www.youtube.com/watch?v=yLqTDVYGi9g Ile CSSa muszę umieć zanim zacznę swoją pierwszą pracę w branży IT? Zadawałem sobie to pytanie podczas mojej nauki. W tym odcinku konkretnie podam moją listę na której skupiałem się podczas swoich przygotowań do pierwszej pracy jako programistafrontend.\n\nLinki z odcinka:\n\n[https://flexboxfroggy.com/#pl] - gra do ćwiczenia flexboxa\n[http://www.flexboxdefense.com/] - gra do ćwiczenia flexboxa\n[https://preview.webflow.com/preview/flexbox-game?preview=d1a26b027c4803817087a91c651e321f&m=1] - poradnik do flexboxa\n[https://cssgridgarden.com/#pl] - gra do ćwiczenia css grid\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-05-31 07:29:05 css-co-umiec-przed-pierwsza-praca ckmoh2k1y000050l0rtc97ktd 2021-05-31 08:41:56.79 2021-05-31 08:41:56.79 cjws46ga001lui3um5b80f2n2 Konwersja zmiennych w JavaScript czyli ‚==’ vs ‚===’. https://bedekodzic.pl/coercion/

Zastanawiasz się czasem jaka jest w zasadzie różnica między ‘==’ a ‘===’ […]

\n

The post Konwersja zmiennych w JavaScript czyli ‚==’ vs ‚===’. appeared first on Będę Kodzić.

2019-06-11 18:03:45 konwersja-zmiennych-w-javascript-czyli-vs ck87juhko000ni3umanz2707n 2019-06-11 18:03:45 2019-06-11 18:03:45 -cjxc6xhgo01mei3umh2hrh7ja Gulp 4 – konfiguracja na start do pracy na Front-Endzie. https://bedekodzic.pl/gulp-4/

Szukasz narzędzia aby szybko zacząć pracę ze swoim projektem na Front-Endzie? W […]

\n

The post Gulp 4 – konfiguracja na start do pracy na Front-Endzie. appeared first on Będę Kodzić.

2019-06-25 19:16:09 gulp-4-konfiguracja-na-start-do-pracy-na-front-endzie ck87juhko000ni3umanz2707n 2019-06-25 19:16:09 2019-06-25 19:16:09 cjxm4clig01mqi3um41rbbowo Pamiętnik Developera #5 – Tracę kontrolę nad blogiem. https://bedekodzic.pl/pamietnik-developera-5/

Minęło już blisko 3 miesiące od ostatniego pamiętnika. Co się będzie działo […]

\n

The post Pamiętnik Developera #5 – Tracę kontrolę nad blogiem. appeared first on Będę Kodzić.

2019-07-02 18:01:37 pamietnik-developera-5-trace-kontrole-nad-blogiem ck87juhko000ni3umanz2707n 2019-07-02 18:01:37 2019-07-02 18:01:37 cjy8z9kqo01nfi3um9z242qe8 Tworzę endpoint GraphQL w NodeJS i podpinam pod to React’a https://bedekodzic.pl/graphql-react/

Chcesz użyć GraphQL w swoim następnym projekcie? W tym artykule znajdziesz prostą […]

\n

The post Tworzę endpoint GraphQL w NodeJS i podpinam pod to React’a appeared first on Będę Kodzić.

2019-07-18 17:58:00 tworze-endpoint-graphql-w-nodejs-i-podpinam-pod-to-reacta ck87juhko000ni3umanz2707n 2019-07-18 17:58:00 2019-07-18 17:58:00 cjz8k1hrs01ofi3um3rnrfry8 React Apollo i GraphQL Hooks czyli różne podejścia do GraphQL https://bedekodzic.pl/graphql-hooks/

W tym artykule opiszę dwie różne techniki na użycie GraphQL w Twojej […]

\n

The post React Apollo i GraphQL Hooks czyli różne podejścia do GraphQL appeared first on Będę Kodzić.

2019-08-12 15:31:31 react-apollo-i-graphql-hooks-czyli-rozne-podejscia-do-graphql ck87juhko000ni3umanz2707n 2019-08-12 15:31:31 2019-08-12 15:31:31 @@ -1217,9 +1237,7 @@ ckpe0r0j300020vjy9mxa5985 Czy wiesz jak sobie poradzić z Union Types? https://f ckpfv3yqq00020wl5d4o059im Next.js - Code review ludzi z Discorda 😇 https://www.youtube.com/watch?v=gcrxZoLNFoI Blog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-06-02 19:13:53 next.js-code-review-ludzi-z-discorda ckivz8t54001di3umfv7i4q26 2021-06-02 19:28:06.051 2021-06-02 19:28:06.051 ckpgncpip00020wl6uklvgl4c Frontend Thursdaty vol. 40 https://blog.vived.io/frontend-thursdaty-vol-40/ W tym tygodniu mamy dla Was Sparkplug, czyli nowy kompilator w V8, Jest 27 i zmierzające do standardu css zmiany, które pomogą rozwiązać problem z doładowującymi się czcionkami. 2021-06-03 08:26:45 frontend-thursdaty-vol.-40 ckmor5k8y000044moj65m13y0 2021-06-03 08:38:43.25 2021-06-03 08:38:43.25 cjao2l86000vli3um1efncewg Przyszłość bloga… https://www.nettecode.com/przyszlosc-bloga/

Zależy od Was. I to dosłownie… Zakładając blog chciałam pomagać. Po prostu dzielić się wiedzą. Prowadziłam wtedy niewielką grupę wsparcia na Facebooku. Na ten czas nazywała się HTML, CSS, JS – od podstaw i liczyła kilkaset osób. Ale już wtedy pewne pytania powtarzały się w kółko. Między innymi dlatego postanowiłam założyć NetteCode. By zebrać część […]

\n

Artykuł Przyszłość bloga… pochodzi z serwisu NetteCode.

2017-12-01 15:34:39 przyszlosc-bloga ckhnmdge00000i3um6batg2gk 2017-12-01 15:34:39 2017-12-01 15:34:39 -ckpe4b5dw00020wmn8bamoac7 JVM Tuesday vol. 40 https://blog.vived.io/jvm-tuesday-vol-40/ Po masie premier o których mieliśmy okazje pisać w zeszłym tygodniu, poprzednie siedem dni było nieco wolniejsze jeśli chodzi o newsy - ale dzięki temu nareszcie możemy pogadać o obiecanym Scope Locals.\n\nZapraszamy do lektury! 2021-06-01 12:58:27 jvm-tuesday-vol.-40 ckmor5k8y000044moj65m13y0 2021-06-01 14:10:05.445 2021-06-01 14:10:05.444 -ckpgpiqb000020wmjn7hjp3s8 Robię code review dla ludzi z Discorda 😇 React / Next.js https://www.youtube.com/watch?v=gcrxZoLNFoI Blog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-06-03 08:51:55 robie-code-review-dla-ludzi-z-discorda-react-next.js ckivz8t54001di3umfv7i4q26 2021-06-03 09:39:23.437 2021-06-03 09:39:23.437 -ckpjhapcm00020wl5howzvnmm Software Craftsmanship Sunday vol. 40 https://blog.vived.io/software-craftsmanship-sunday-vol-40/ W dniu dzisiejszym jeden interesujący news o którym słyszał każdy, jeden (równie intrygujący) o którym nie słyszał nikt, oraz jeden który nie obszedłby nawet autora, gdyby nie naszły go smutne rozkminy z nim związane 🥲. Zapraszam do lektury! 2021-06-05 07:25:40 software-craftsmanship-sunday-vol.-40 ckmor5k8y000044moj65m13y0 2021-06-05 08:12:30.55 2021-06-05 08:12:30.55 +cjxws4odc01n0i3umhoixh4eg Kto jest kim, czyli role w WebDevelopmencie https://fsgeek.pl/post/kto-jest-kim-czyli-role-webdevelopment/

Podczas tworzenia aplikacji można rozróżnić wiele różnych ról, z których każda jest odpowiedzialana za inną część aplikacji i posiada inne umiejętności. Jeśli jesteś początkującym programistą, lub twój partner/ka jest programistą/ką to te magiczne nazwy mogą nic nie mówić i powodować niezrozumienie. A warto wiedzieć kto jest kim i za co jest odpowiedzialny.

\n\n

Design, czyli artyści

\n\n

Dział designu i pracujący w nim ludzie (zwani często grafikami) pracują nad wyglądem aplikacji internetowej. To oni najczęściej współpracują na początku projektu z klientem tworząc wszystkie wizualne elementy na stronie dbając o to by były spójne między sobą i odpowiadały wizji klienta. Zawsze przy projektowaniu takich aplikacji należy mieć na uwadze dla jakiej grupy końcowej tworzymy oprogramowanie - niektórzy mogą nie docenić innowacyjnych pomysłów. Design najczęściej pracuje w swoich ulubionych programach graficznych przy czym w Web Developmencie najczęściej się spotyka Photoshop oraz Sketch.

\n\n

Frontend, czyli po co komu tyle przeglądarek

\n\n

Programiści frontendu realizują wizję grafików i klienta w aplikacji. Efektem prac programisty frontendu jest aplikacja internetowa, a dokładniej wszystkie elementy wizualne, które się tam znajdują i które mogą używać użytkownicy końcowi - wszystko to co widzi użytkownik końcowy było stworzone przez tę grupę programistów. Frontend oraz design powinni bardzo ściśle ze sobą współpracować aby dostarczyć jak najlepszy UI (czyli wygląd aplikacji) oraz UX (czyli całość wrażeń jakie użytkownik ma podczas korzystania z systemu np.: czy jest intuicyjny, czy elementy są spójne, czy potrzebne rzeczy są pod ręką itd.).

\n\n

W swojej pracy frontend może tylko korzystac z trzech języków: HTML, JS i CSS. Na szczęście dużo większy wybór jest w bibliotekach i frameworkach, które można wykorzystać by uzyskać końcowy efekt. Największy problem pisania aplikacji frontendowych to różnorodność przeglądarek i systemów operacyjnych - różnice są czasami tak duże, że aplikacja działająca w jednej przeglądarce ma problemy w innej.

\n\n

Backend, czyli szare eminencje

\n\n

Dla użytkowników końcowych backend nie istnieje pomimo, że efekt ich prac jest jednym z ważniejszych podczas tworzenia aplikacji internetowych. Backend odpowiada za całą logikę biznesową aplikacji, zapisywanie danych w bazie danych oraz komunikacje z innymi częściami systemu. Na backendzie ciąży duża odpowiedzialność ponieważ muszą oni pilnować najważniejszych aspektów aplikacji np.: żeby wszystkie operacje w banku były liczone poprawnie, żeby zamówienia były poprawnie obsługiwane, żeby wiadomości trafiały do właściwych odbiorców itd.

\n\n

W kwestii doboru języka programiści backendu mają dużą swobodę ponieważ w prawie każdym języku da się stworzyć odpowiednią aplikację. Jednak oprócz samego języka trzeba wybrać wiele innych elementów infrastruktury z których będzie się korzystało: baza danych, kolejki, sposoby uwierzytelniania itd. Tutaj też powinno się zwracać największą uwagę na testowanie kodu aby ustrzec się przed błędami w przyszłości.

\n\n

QA, czyli znalazłem błąd w aplikacji

\n\n

QA (od ang. quality assurance) potocznie nazywany również testerem jest osobą, która jest odpowiedzialna za przetestowanie aplikacji oraz znalezenie możliwie jak najwięcej błędów w aplikacji zanim pójdzie ona na produkcję.\n QA można podzielić ze względu na rodzaj testowania jakie jest wykonywane:

\n\n
    \n
  • Manualne - ręczne przeklikanie aplikacji, czyli próba naśladowania zachowań użytkowników w szczególności tych skrajnych sytuacji
    • \n
  • Automatyczne - pisanie kodu, którego zadaniem jest udawanie użytkownika oraz automatyczne klikanie po aplikacji. Najczęściej testy automatyczne starają się pokryć najbardziej krytyczne ścieżki w aplikacji (czyli te najczęściej wykorzystywane oraz najważniejsze dla danej aplikcji) tak aby uchronić się przed regresją (psucie już zaimplementowanych funkcjonalności podczas wprowadzania nowych).
    • \n
\n\n

Tak naprawdę każdy programista powinien też w pewien sposób być również QA. Po pierwsze zanim wypuścimy nową funkcjonalność powinniśmy ją przetestować lokalnie (po co wypuszczać coś co nie działa w żaden sposób). Po drugie powinniśmy pisać testy, które będą sprawdzały czy nasz kod działa poprawnie i zabezpieczały go na przyszłość.

\n\n

Kolejna rzecz jaka jest istotna w kontekście QA to, że osoby w tym dziale nie są odpowiedzialne tylko za testowanie. Jak sama nazwa wskazuje osoby na tym stanowisku mają zapewnić o jakości wytworzonego oprogramowania. Tak więc oprócz samego zgłaszania problemów QA proponuje często rozwiązania, które mają poprawić UX aplikacji, jej odbiór przez użytkowników. Dodatkowo pracują wewnątrz projektu nad jego dokumentacją, administracją JIRY, opisywaniem zadań, ustalaniem priorytetów razem z klientem i project managerem - tak naprawdę zakres obowiązków będzie się różnił w zależności od firmy i projektu.

\n\n

DevOps, czyli magicy od infrastruktury

\n\n

Dział DevOps dba o to by części aplikacji stworzone przez frontend oraz backend poprawnie się komunikowały z innymi elementami infrastruktury np.: bazą danych, zewnętrznymi serwisami oraz komunikacją pomiędzy pojedynczymi serwisami stworzonymi przez backend. Problemem przy tworzeniu infrastruktury jest unikalność każdej aplikacji. Oczywiście można sobie tworzyć przykładowe konfiguracje serwera i Dockera ale i tak każdy projekt będzie wymagał większej lub mniejszej ilości poprawek i dostosowania do wymagań danej aplikacji.

\n\n

Tutaj podobnie jak backend wymagana jest szeroka wiedza z zakresu sposobów tworzenia infrastruktury, o systemach operacyjnych na którym jest uruchomiona aplikacja, o wymaganiach jej poszczególnych elementów oraz sposobów na zarządzanie tym w przyszłości. DevOps również dba o odpowiednie monitorowanie zasobów w systemie i reagowanie w sytuacjach kryzysowych np.: zaczęła się wyprzedaż na Allegro i nagle pół Polski w jednym momencie próbuje się dostać i coś kupić. Z racji zarządzania infrastrukturą programiści DevOps mają najczęściej największe uprawnienia i dostęp tam gdzie nawet programiści nie mają dostępu np.: baza danych na produkcji - przez to ciąży na nich również większa odpowiedzialność.

2019-07-10 05:05:00 kto-jest-kim-czyli-role-w-webdevelopmencie ckhxjb6o0000yi3umb3hg09jv 2019-07-10 05:05:00 2019-07-10 05:05:00 ckpl4uxth00020wkzp3y56ji4 TypeScript: tsconfig - zapoznanie #12 https://www.youtube.com/watch?v=t5cyQFSOFbI Dwunasty odcinek z serii TypeScript z Domanem.\n\nW dzisiejszym odcinku zapoznasz się z dostępnymi opcjami, które zawiera plik tsconfig.json\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Przywitanie\n02:17 target\n03:58 module\n06:31 lib\n09:15 allowJS\n10:25 outDir (kontynuacja allowJS)\n12:10 checkJS\n13:31 jsx\n19:04 declaration\n21:37 sourceMap\n22:34 rootDir\n24:21 removeComments\n25:04 noEmit\n25:38 isolatedModules\n27:20 strict (strict mode ogólnie)\n28:05 strictNullCkech (kontunuacja strict)\n30:46 noUnusedLocals\n32:20 Module Resolution Options (tylko wspominka)\n33:31 Experimental Options\n34:13 include/exlude\n36:26 Zakończenie 2021-06-06 11:40:27 typescript:-tsconfig-zapoznanie-12 ckjpkgp9u000012mnlbnkxu51 2021-06-06 11:59:51.989 2021-06-06 11:59:51.989 ckpnvtncx00020wmbuid1bq9n JVM Tuesday vol. 41 https://blog.vived.io/jvm-tuesday-vol-41/ W tym tygodniu brakuje newsów, ale to bardzo dobrze - dzięki temu możemy poświęcić troche czasu dłuższym "evergreenom"🍀, które też zasługują na Waszą uwagę. Zapraszam do lektury! 2021-06-08 10:04:41 jvm-tuesday-vol.-41 ckmor5k8y000044moj65m13y0 2021-06-08 10:10:13.761 2021-06-08 10:10:13.761 ckpps2rr900020vmab9skrbs2 Sprawdź jak ograniczyć ilość event listenerów w JS! https://frontcave.pl/sprawdz-jak-ograniczyc-ilosc-event-listenerow-w-js/

Wprowadzenie A po co ograniczać ilość event listenerów? Powodów jest kilka: Szybsze budowanie się UI. Mniej listenerów do podpięcia to po prostu mniej kodu do wykonania. To także często mniej operacji na DOM – aby podpiąć listener do elementu musimy przecież pobrać go np za pomocą querySelector. Płynniejsza obsługa UI. Mniej listenerów to mniej nasłuchiwania, … Czytaj dalej Sprawdź jak ograniczyć ilość event listenerów w JS!

\n

Artykuł Sprawdź jak ograniczyć ilość event listenerów w JS! pochodzi z serwisu Front Cave.

2021-06-09 17:09:39 sprawdz-jak-ograniczyc-ilosc-event-listenerow-w-js! ckirm3wzs001li3umfdkcfl6k 2021-06-09 18:00:53.254 2021-06-09 18:00:53.254 @@ -1229,6 +1247,7 @@ ckoai7eo700020vmdybnsyj6r PROGRAMISTĄ BYĆ PO 30tce - czy jesteś za stary na z ckpd4mdly00020wmmlex3llr4 Kurs Wprowadzenie do HTML od Kodilli https://www.webkrytyk.pl/2021/05/31/kurs-wprowadzenie-do-html-od-kodilli/ Dzisiaj na tapet trafia Kodilla! Nie, nie zapisałem się na bootcamp. Odkryłem, że mają kilka kursów wprowadzających – do HTML-a, CSS-a i JavaScriptu. Dzisiaj przyjrzymy się pierwszemu z nich, kursowi HTML. Kurs HTML składa się z lekcji podzielonych na 10 segmentów. Pierwsza lekcja zawiera prezentację opisującą pokrótce, czym jest HTML. I osobiście mam z nią … Czytaj dalej Kurs Wprowadzenie do HTML od Kodilli 2021-05-31 20:56:04 kurs-wprowadzenie-do-html-od-kodilli cki2dml0o000di3umgjexb6pk 2021-05-31 21:31:03.143 2021-05-31 21:31:03.143 ckplgzmb300020vl3nakck61o React / Next.js ⚡️Szybkie code review dla społeczności Discorda 😇 https://www.youtube.com/watch?v=NTbqD96-Yf4 W tej serii robię code review i wymądrzam się na temat projektów zgłoszonych przez widzów na moim Discordzie https://fullstak.pl/discord \n\n#react #js #nextjs 2021-06-06 16:32:29 react-next.js-szybkie-code-review-dla-spolecznosci-discorda ckivz8t54001di3umfv7i4q26 2021-06-06 17:39:25.744 2021-06-06 17:39:25.744 ckpmhvo3x00020wmdnpuh8l16 Podstawy HTML i CSS w dwie godziny - krok po kroku! https://www.youtube.com/watch?v=opNgrPv3Qw8 Newsletter: https://zaczynamyprogramowac.pl 👈\nNasza grupa na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 👈\n\nJeśli zacznienie usypiać to śmiało przełączcie prędkość oglądania na 1.25 albo 1.5!\n\n[00:00] Intro\n[02:54] #1 - Jak zacząć tworzyć stronę internetową?\n[07:27] #2 - Edytor tekstowy\nhttps://code.visualstudio.com/\nhttps://www.google.com/intl/pl_pl/chrome/\n[11:10] #3 - Dodawanie elementów na stronie\n[14:09] #4 - Praca z tekstem\n[19:59] #5 - Wyświetlanie list\n[22:48] #6 - Dodawanie linków do innych stron\n[25:54] #7 - Dodawanie zdjęć\nLink do zdjęcia: https://i.ibb.co/FXZRT4b/default-avatar.png\n[29:29] #8 - Poprawianie wyglądu strony i wprowadzenie do CSS\n[33:31] #9 - Szybsze dodawanie styli\n[41:31] #10 - Oddzielenie HTML i CSS\n[46:06] #11 - Dziedziczenie styli\n[50:27] #12 - Podział na sekcje\n[54:48] #13 - DevTools\n[59:48] #14 - Ułożenie elementów na stronie\n[1:04:54] #15 - Wymiary elementów cz. I\n[1:14:50] #16 - Wymiary elementów cz. II\n[1:22:08] #17 - Pozycjonowanie elementów (cz. I)\n[1:26:29] #18 - Pozycjonowanie elementów (cz. II)\n[1:31:47] #19 - Dodawanie ikonek\nIkonka urodzin: https://i.ibb.co/TqwK7Yy/birthday-cake.png\nIkonka telefonu: https://i.ibb.co/RhT5HxQ/phone.png\nIkonka maila: https://i.ibb.co/7WWSZdP/mail.png\nIkonka pinezki: https://i.ibb.co/NN2gZdT/pin.png\n[1:39:32] #20 - Klasy\n[1:42:26] #21 - Pozycjonowanie elementów (cz. III)\nhttps://iconmonstr.com/\n[1:52:40] #22 - Stany elementów i animacje\n[2:04:56] #23 - Cienie i ostatnie szlify\n[2:09:47] #24 - Wrzucenie strony "do internetu"\n[2:13:27] #25 - Dostępność stron internetowych\n\nW tym kursie HTML i CSS poznacie podstawowe tagi i zasady tworzenia stron internetowych. Dowiecie się jak działają style i poznacie m.in. flexbox, animacji czy zasady box-modelu. Na koniec dowiecie się jak za darmo zahostować swoją stronę w internecie dzięki serwisowi Netlify.\n\nFilip Mamcarczyk\nKacper Sokołowski 2021-06-07 10:00:18 podstawy-html-i-css-w-dwie-godziny-krok-po-kroku! ckj9sdcq7000051l5pzwpbq9f 2021-06-07 10:52:07.245 2021-06-07 10:52:07.245 +cj16n1nw000czi3umdf5bcezt Nie byłeś na 4Developers? Możesz tego żałować! Dowiedz się dlaczego. http://blog.piotrnalepa.pl/2017/04/06/nie-byles-na-4developers-mozesz-tego-zalowac-dowiedz-sie-dlaczego/ W relacji dowiesz się czy warto uczestniczyć w konferencjach typu 4Developers 2017. Podzielę się swoimi wrażeniami i odpowiem na pytanie czy warto. 2017-04-06 16:50:06 nie-byles-na-4developers-mozesz-tego-zalowac-dowiedz-sie-dlaczego ckekeq7uo0004i3umft185ior 2017-04-06 16:50:06 2017-04-06 16:50:06 ckpo2ttyd00020wmofgcgyqn3 Czy znasz różnicę pomiędzy Continuous Integration, Continuous Delivery i Continuous Deployment https://fsgeek.pl/post/co-to-jest-continuous-integration-continuous-delivery-continuous-deployment/ Jeśli programujesz od jakiegoś czasu, to pewnie spotkałeś się ze skrótami CI/CD. Są to skróty dobrych praktyk tworzenia oprogramowania - Continuous Integration, Continuous Delivery oraz Continuous Deployment. Jakie są różnice pomiędzy nimi i dlaczego warto wprowadzać te praktyki? 2021-06-05 11:14:36 czy-znasz-roznice-pomiedzy-continuous-integration-continuous-delivery-i-continuous-deployment ckhxjb6o0000yi3umb3hg09jv 2021-06-08 13:26:19.621 2021-06-08 13:26:19.621 cj0v8gndk00bmi3um8gid58e9 VRath – z Reactem w parze cz. 1 https://pawelochota.pl/2017/03/vrath-z-reactem-w-parze-cz-1/

Projekt rozkręca się dość powoli, ale małymi kroczkami i dojdę do mety. Dzisiaj zajmę się dalszą konfiguracją webpacka i spróbuję połączyć w parze Reacta i A-Frame’a. Do dzieła. W ostatnim poście skończyłem na podłączaniu babel-loadera aby transformować kod napisany w standardzie ES6 do ES5. Nie określiłem jednak wspieranych przez projekt przeglądarek. Na początku przyszło mi

\n

Artykuł VRath – z Reactem w parze cz. 1 pochodzi z serwisu Z podwórka programisty.

2017-03-29 17:16:23 vrath-z-reactem-w-parze-cz-1 ck801ynig001pi3um28xx49z7 2017-03-29 17:16:23 2017-03-29 17:16:23 ckp4db3rg00020wl9w5h4ob2f Docker na Macu, jak go przyspieszyć? https://webmastah.pl/docker-on-mac-jak-go-przyspieszyc/ Spis treści: W czym w ogóle jest problem? To czemu po prostu nie kupić „normalnego” komputera z linuxem? Da się coś z tym zrobić? Metodologia pomiarów Docker na Macu - różne opcje konfiguracji wolumenów Docker na Macu - Mutagen Linux Linux w VirtualBox Linux na zewnętrznym serwerze - VPS Porównanie czasu budowania obrazu Podsumowanie Docker na Macu Docker na Macu z Mutagenem Docker w VirtualBox Docker na VPS TLDR: Przerzuć się na Linuxa 😇 2021-05-25 12:13:57 docker-na-macu-jak-go-przyspieszyc ckcf8vjeg000ai3um1mox19e8 2021-05-25 18:24:18.124 2021-05-25 18:24:18.124 @@ -1237,6 +1256,7 @@ ckptupwjc00020wifxsnxcfkc Kierunek jakość - pozycja na podium bestsellerów, p ckpeezqau00020wjxiqnkj8ho Juniorzy kontra rynek – raport No Fluff Jobs ⌨️ hello roman #163 https://www.youtube.com/watch?v=fd329edsqGo 📓 Skorzystaj z kodu „Hello_Roman” i kup kurs Masterclazz w przedsprzedaży 20% taniej (56% taniej niż cena regularna) \nhttps://nofluffjobs.com/masterclazz/\n\n⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter/\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-06-01 17:49:44 juniorzy-kontra-rynek-raport-no-fluff-jobs-hello-roman-163 ckiswuz9s0017i3um5mg4h7q1 2021-06-01 19:09:08.455 2021-06-01 19:09:08.455 ckpms8h2o00020wkzfn2z2b1h Poznaj 6 nowości z JavaScript ES2021 https://www.youtube.com/watch?v=ScDkVa6Qtgo Od kilku lat JavaScript rozwija się w naprawdę solidnym tempie. W tym materiale przedstawiamy 6 nowości, które trafiły do przeglądarek za sprawą specyfikacji ECMAScript 2021: String.prototype.replaceAll, Promise.any, prywatne pola i metody, operatory przypisania logicznego, separatory numeryczne oraz WeakRef. \n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-06-07 15:23:01 poznaj-6-nowosci-z-javascript-es2021 ckiyt1v9s001fi3umcgnxbgiu 2021-06-07 15:42:00.817 2021-06-07 15:42:00.817 ckpv6pas300020wmivm3uighl Jak zdobyć doświadczenie przed dostaniem się do pierwszej pracy w IT? https://www.youtube.com/watch?v=Al2LDJbX4jw 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\nNasza grupa na FB: https://www.facebook.com/groups/zaczynamy.programowac/\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nDzisiaj, chciałbym Wam opowiedzieć o tym jak:\n- Zdobyć pierwsze doświadczenie w pracy nad prawdziwymi projektami, których używają inni ludzie,\n- Dostać feedback na temat swojej pracy,\n- Popracować zdalnie z innymi ludźmi i mieć to udokumentowane,\n- I jeszcze dodatkowo, podszkolić angielski,\n\nA to wszystko bez dostawania stażu, pracy i oczywiście wszystko za darmo.\n\nZapraszamy!\nFilip i Kacper\n\nIcons made by Freepik from www.flaticon.com 2021-06-13 12:30:01 jak-zdobyc-doswiadczenie-przed-dostaniem-sie-do-pierwszej-pracy-w-it ckj9sdcq7000051l5pzwpbq9f 2021-06-13 12:49:09.843 2021-06-13 12:49:09.843 +cjygs468001noi3um8pwo9few Upload plików w aplikacji https://fsgeek.pl/post/upload-plikow-w-aplikacji/

Upload plików w aplikacji jest dość często pojawiającą się funkcjonalnością. Pozwala na wysyłanie plików do innych osób, serwisów, dostarczaniu danych do aplikacji żeby nie musieć wypełniać ich ręcznie lub zwykłym umieszczaniu zdjęć na stronie. Podczas tworzenia aplikacji możemy wykorzystać jedną z wielu bibliotek, która dodaje w naszej aplikacji frontendowej taką funkcjonalność ale może da się to zrobić samemu?

\n\n

input type=“file”

\n\n

Tak naprawdę stworzenie takiej funkcjonalności bez żadnej bibliotek nie jest niczym trudnym. Musimy się tylko oprzeć o znany element HTML - input z odpowiednim typem file

\n\n
<input type="file"/>
\n\n

Już samo takie polecenie powoduje, że wyświetla nam się przycisk wraz z informacją dotyczącą jaki plik wybraliśmy.

\n\n

\n See the Pen \n Input file by Aleksander (@Feridum)\n on CodePen.\n

\n

\n\n

Oczywiście na tym nie kończą się możliwości tego elementu ponieważ razem z tym typem dostajemy kilka atrybutów, którymi możemy sterować pracą inputa. Znajdziemy tam:

\n\n
    \n
  • accept - określamy jakie typy plików lub rozszerzeń użytkownik może wybrać
    • \n
  • capture- jeśli dopiszemy ten atrybut to podczas wyboru pliku do uploadu automatycznie będzie wykorzystana kamera lub mikrofon (w zależności od atrybutu accept) o ile są dostępne
    • \n
  • multiple - atrybut typu boolean, który określa czy można wybrać kilka plików
    • \n
  • files - pod tym atrybutem znajdują się nasze pliki
    • \n
\n\n

Warto jeszcze na chwilę zatrzymać się przy atrybucie accept. Dopuszcza on kilka możliwości ustawiania wartości:

\n\n
    \n
  • Rozszerzenie pliku, który chcemy dopuścić np.: .png
    • \n
  • Poprawny typ MIME np.: image/png
    • \n
  • Tekst audio/*, który oznacza dowolny plik dźwiękowy
    • \n
  • Tekst video/*, który oznacza dowolny plik wideo
    • \n
  • Tekst image/*, który oznacza dowolny obrazek
    • \n
\n\n

Dodatkowo możemy podać wiele wartości oddzielając je przecinkiem np.: accept=".png,.jpg".

\n\n

Upload pliku w React

\n\n

Jednak rzadko kiedy widzimy takie pole, ponieważ nie pasuje ono zazwyczaj do wyglądu strony i taki element psułby wizualnie całość aplikacji. Zamiast tego widzimy zwykłe przyciski lub inne mechanizmy, które ukrywają input a wystawiają ładnie wyglądający element. Jak to zrobić w React.js? Przykładowy komponent może wyglądać następująco:

\n\n
<div>\n    <input\n      type="file"\n      className="inputFile"\n      ref={file}\n      onChange={handleChange}\n      data-testid="inputFile"\n    />\n    <div className="container">\n    <div className="fileName" data-testid="fileName">\n        {fileState && fileState.name}\n    </div>\n    <div className="button" onClick={handleClick}>\n        Wybierz plik\n    </div>\n    </div>\n</div>
\n\n

Przy tworzeniu takich komponentów pierwszy krok to będzie umieszczenie oraz ukrycie natywnego <input type="file"/>. Dalej wykorzystujemy mechanizm ref'a w React’cie aby dostać się do tego elementu i go kliknąć oraz potem by pobrać odpowiedni plik z atrybutu files. Cała reszta to tak naprawdę odpowiednie ostylowanie naszego komponentu. Prawda, że proste?

\n\n

Testy w React

\n\n

Została ostatnia rzecz do zrobienia. Skoro mamy komponent w React’cie to warto go przetestować. Ostatnio testuję komponenty React’a z wykorzystaniem react-testing-library (jeśli korzystacie z Enzyma to polecam spróbować tej biblioteki - osobiście znacznie lepiej pisze mi się teraz testy). Oczywiście to co tutaj pokażę to jest najprostszy przypadek i pokazuje tylko jak można podejść do tego problemu. Każdy formularz jest unikalny i będziemy w nim testować coś innego.

\n\n
const file = new File(["filec content"], "file.png", {\n  type: "image/png"\n});\n\ndescribe("shows the children when the checkbox is checked", () => {\n  it("display filename in box after upload", () => {\n    const { getByTestId } = render(<UploadFile />);\n\n    const input = getByTestId("inputFile");\n\n    Object.defineProperty(input, "files", {\n      value: [file]\n    });\n\n    fireEvent.change(input);\n\n    expect(getByTestId("fileName").textContent).toEqual("file.png");\n  });\n});
\n\n

Tak może wyglądać test do komponentu, który stworzyliśmy przed chwilą. Najważniejsza jest ta część, która odpowiada za stworzenie pliku w JS oraz zasymulowanie wybrania go przez użytkownika.

\n\n

Tworzenie pliku:\n

const file = new File(["filec content"], "file.png", {\n  type: "image/png"\n});

\n\n

Symulacja wybrania pliku przez użytkownika:\n

Object.defineProperty(input, "files", {\n  value: [file]\n});\n\nfireEvent.change(input);

\n\n

Całość kodu możecie zobaczyć na CodeSandbox. A jak u was wygląda upload plików? Rozwiązujecie to podobnie czy zupełnie inaczej? A może wolicie biblioteki - jeśli tak to z czego korzystacie i dlaczego?

2019-07-24 05:00:00 upload-plikow-w-aplikacji ckhxjb6o0000yi3umb3hg09jv 2019-07-24 05:00:00 2019-07-24 05:00:00 ckpws5u0r00020wl7mv4ownsy NIE PRACUJ W WEEKEND! O błędnie rozumianym work-life balance https://www.youtube.com/watch?v=LCDlxY4QUbY Programistycznego Twittera rozgrzał niedawno wpis o pracy weekendy, która wg autorki ma być całkiem sensownym sposobem na rozwój w początkowych latach kariery.\n\nOczywiście jak to na Twitterze bywa, na każdy spokojny tweet przypadło też dziesięć zarzutów o promowanie patologii, więc postanowiliśmy tę dyskusję trochę uporządkować i wprowadzić do niej nieco więcej kontekstu.\n\nRazem z Marcinem w weekendy nie pracujemy już tak dużo jak kiedyś, czasami nie robimy zupełnie nic, ale wspólnie daleko nam to stanowiska, że to absolutnie najgorszy z możliwych sposobów na dwa dni wypadające po piątku. A jak to jest u was - czy dla was sobota i niedziela to dni odpoczynku i zakaz pracy? Koniecznie dajcie znać w komentarzach!\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-06-14 15:18:08 nie-pracuj-w-weekend!-o-blednie-rozumianym-work-life-balance ckiyt1v9s001fi3umcgnxbgiu 2021-06-14 15:37:39.387 2021-06-14 15:37:39.387 ckpxymkhs00020wmhpw08po7b JVM Tuesday vol. 42 https://blog.vived.io/jvm-tuesday-vol-42/ W dniu dzisisiejszym mamy dla Was dość zróżnicowany zestaw - informacje o nowych usługach ze strony Oracle, wydanie nowego Springa oraz kolejnego z serii JEPów projektu Valhalla (ostatnio Valhalla bardzo idzie do przodu, nie sądzicie?)\n\nZapraszamy do lektury 😅 2021-06-15 11:16:55 jvm-tuesday-vol.-42 ckmor5k8y000044moj65m13y0 2021-06-15 11:26:24.065 2021-06-15 11:26:24.065 ckpz3v83z00020wl6lm65lrst Motywacja podczas nauki programowania https://www.youtube.com/watch?v=zGVDUP1eZ1w Sposób na motywację to krótki i konkretny film o tym, jak ja sobie radziłem z problemami z motywacją podczas nauki programowania.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-06-16 06:31:03 motywacja-podczas-nauki-programowania ckmoh2k1y000050l0rtc97ktd 2021-06-16 06:40:52.176 2021-06-16 06:40:52.176 @@ -1247,6 +1267,8 @@ ckpn2smr400020vmrftx3rckl TypeScript łatwy start https://www.youtube.com/watch? ckpy1ltbg00020vmsx7lzvqfp Czy wiesz jak dodać GraphQL do aplikacji React? https://fsgeek.pl/post/react-graphql-apollo-client/ Graphql jest coraz popularniejszy w aplikacjach. Pozwala na pobieranie dokładnie tych danych, jakich potrzebujemy. W jednym z poprzednich postów pokazałem jak to zaimplementować na backendzie. Dziś przyszedł czas na frontend. 2021-06-15 16:00:00 czy-wiesz-jak-dodac-graphql-do-aplikacji-react ckhxjb6o0000yi3umb3hg09jv 2021-06-15 12:49:47.693 2021-06-15 12:49:47.693 ckq14ody000020vjwsts2nwre 4 zaawansowane operatory do Higher Order Streamów #RxJS https://www.youtube.com/watch?v=EFx10PAAyi0 🔴 Bez tych operatorów nie możesz mówić, że znasz RxJS! W tej lekcji tłumaczę jak działa: concatAll, concatMap, switchAll, switchMap, exhaustAll, exhaustMap, mergeAll, mergeMap. Trochę tego jest, prawda? Wszystko pokazane na matrycy, którą tworzyliśmy w poprzednich odcinkach o RxJS. Zapraszam!\n\n0:00 - Czego się nauczysz w tym video?\n0:22 - Upgrade RxJS do wersji 7\n2:28 - Jak działa mergeAll?\n3:17 - Jak działa concatAll?\n5:10 - Jak działa switchAll?\n7:18 - Jak działa exhaustAll?\n9:40 - mergeMap, concatMap, switchMap, exhaustMap\n\n\n🔥 Nauczę Cię myśleć jak programista, przestrzegę Cię przed typowymi błędami oraz pomogę Ci zbudować warsztat na miarę zawodowca. Na tym kanale dowiesz się jakie triki stosuję na codzień w pracy jako frontend developer.\n\n👨‍🏫 Nazywam się Jakub Pusiak i tworzę kanał JS Dżem. Zawodowo jestem programistą (inżynier oprogramowania, software engineer) i czerpię z tego ogromną satysfakcję. Byłem też trenerem w szkole programowania. Teraz publikuję filmy na YouTube. 2021-06-17 16:30:00 4-zaawansowane-operatory-do-higher-order-streamow-rxjs ckkb3uw6b00002smi6pw37cjt 2021-06-17 16:39:05.112 2021-06-17 16:39:05.112 ckq273atp00020wkxfbg4505k Eventy w DOMie https://tworcastron.pl/blog/eventy-w-domie/

To już czwarty odcinek z miniserii o DOM. Odcinek o eventach a w nim m.in. czym się różni onClick od addEventListener. Odcinek jest kontynuacją trzech poprzednich:  Czym jest DOM Poruszanie […]

\n

Artykuł Eventy w DOMie pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-06-18 10:23:13 eventy-w-domie ckbbw3jvs000li3umgw19edq9 2021-06-18 10:34:26.317 2021-06-18 10:34:26.317 +cj1b58trk00dji3um6db76z9w Daj Się Poznać 2017 – raport z działań. Część 6 http://blog.piotrnalepa.pl/2017/04/09/daj-sie-poznac-2017-raport-z-dzialan-czesc-6/ Raport z szóstego tygodnia prac nad projektem League Manager. Kilka słów o konferencji 4Developers oraz o nadchodzących zmianach na blogu. 2017-04-09 20:30:38 daj-sie-poznac-2017-raport-z-dzialan-czesc-6 ckekeq7uo0004i3umft185ior 2017-04-09 20:30:38 2017-04-09 20:30:38 +cj1gd478w00e6i3umcx0eapr2 [JS] Jak używać let i const w kodzie JavaScript? http://blog.piotrnalepa.pl/2017/04/13/js-jak-uzywac-let-i-const-w-kodzie-javascript/ Po lekturze tego wpisu dowiesz się jak korzystać, w kodzie JavaScript, z let i const zamiast var. Zostało to omówione na prostych do zrozumienia przykładach. 2017-04-13 12:09:50 js-jak-uzywac-let-i-const-w-kodzie-javascript ckekeq7uo0004i3umft185ior 2017-04-13 12:09:50 2017-04-13 12:09:50 ckq17cywi00020wlc85q2zmdl Jak walczyć z FOMO? ⌨️ hello roman #164 https://www.youtube.com/watch?v=N6gM0JXKKEI ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter/\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-06-17 17:30:04 jak-walczyc-z-fomo-hello-roman-164 ckiswuz9s0017i3um5mg4h7q1 2021-06-17 17:54:11.251 2021-06-17 17:54:11.251 ckq3ewx2b00020wjtix0rdtv2 Software Craftsmanship Saturday vol. 42 https://blog.vived.io/software-craftsmanship-saturday-vol-42/ Jesteśmy po okresie konferencyjnym, chyba powoli zaczyna się nam też sezon wakacyjny i ilość ważnych ogłoszeń była w tym tygodniu mizerna. Nie ma jednak tego złego, ponieważ dzięki temu mamy okazje podzielić się z Wami dwoma bardzo ciekawymi evergreenami + informacją o awarii w Microsoft. 2021-06-19 06:53:10 software-craftsmanship-saturday-vol.-42 ckmor5k8y000044moj65m13y0 2021-06-19 07:01:11.652 2021-06-19 07:01:11.652 ckq6e8ivn00020wmdzca886dq Next.js - Częste pytania i problemy https://www.youtube.com/watch?v=Qu12528UJXM W trakcie tego spotkania live odpowiem na często zadawane pytania dot. Next.js 2021-06-21 08:42:12 next.js-czeste-pytania-i-problemy ckivz8t54001di3umfv7i4q26 2021-06-21 09:05:32.052 2021-06-21 09:05:32.052 @@ -1257,9 +1279,7 @@ cjdc39n3s00y8i3umc6sya8c5 Nowoczesne testowanie kodu JS. Część Czwarta – te cjhuug2h40135i3um00jwfrtq Pietrak.net https://www.webkrytyk.pl/2018/05/31/pietrak-net/ Dzisiaj na ostrze WebKrytyka nadzieje się strona Pietrak.NET. Wygląd i działanie Pierwszy rzut oka na oferowane pakiety stron WWW zwraca uwagę na oferowanie zgodności ze standardem WCAG 2.0. To oznacza, że strona powinna spełniać dość rygorystyczne normy dostępności. Sprawdzę to zatem! Pierwszy zgrzyt pojawia się już w pierwszej sekcji po nagłówku: Najedź po więcej detali. … Czytaj dalej Pietrak.net 2018-05-31 17:59:01 pietraknet cki2dml0o000di3umgjexb6pk 2018-05-31 17:59:01 2018-05-31 17:59:01 cj0xf5lhk00bti3umcuzb8das [JS] Jak zbudować interfejs koszyka zakupów używając DragsterJS? http://blog.piotrnalepa.pl/2017/03/31/js-jak-zbudowac-interfejs-koszyka-zakupow-uzywajac-dragsterjs/ Tematem dzisiejszego wpisu będzie tworzenie prototypu koszyka zakupowego z wykorzystaniem DragsterJS. Zobaczysz jak łatwo można zaimplementować atrakcyjny interakcyjnie koszyk zakupowy. 2017-03-31 05:59:17 js-jak-zbudowac-interfejs-koszyka-zakupow-uzywajac-dragsterjs ckekeq7uo0004i3umft185ior 2017-03-31 05:59:17 2017-03-31 05:59:17 cj112szjk00cbi3um8lx1gxt5 Daj Się Poznać 2017 – raport z działań. Część 5 http://blog.piotrnalepa.pl/2017/04/02/daj-sie-poznac-2017-raport-z-dzialan-czesc-5/ Raport z piątego tygodnia prac nad projektem. Opisałem co się udało do tej pory zrobić. Przedstawiłem rozwiązanie dotyczące zdobycia listy państw potrzebnej do mojego projektu. 2017-04-02 19:24:38 daj-sie-poznac-2017-raport-z-dzialan-czesc-5 ckekeq7uo0004i3umft185ior 2017-04-02 19:24:38 2017-04-02 19:24:38 -cj16n1nw000czi3umdf5bcezt Nie byłeś na 4Developers? Możesz tego żałować! Dowiedz się dlaczego. http://blog.piotrnalepa.pl/2017/04/06/nie-byles-na-4developers-mozesz-tego-zalowac-dowiedz-sie-dlaczego/ W relacji dowiesz się czy warto uczestniczyć w konferencjach typu 4Developers 2017. Podzielę się swoimi wrażeniami i odpowiem na pytanie czy warto. 2017-04-06 16:50:06 nie-byles-na-4developers-mozesz-tego-zalowac-dowiedz-sie-dlaczego ckekeq7uo0004i3umft185ior 2017-04-06 16:50:06 2017-04-06 16:50:06 -cj1b58trk00dji3um6db76z9w Daj Się Poznać 2017 – raport z działań. Część 6 http://blog.piotrnalepa.pl/2017/04/09/daj-sie-poznac-2017-raport-z-dzialan-czesc-6/ Raport z szóstego tygodnia prac nad projektem League Manager. Kilka słów o konferencji 4Developers oraz o nadchodzących zmianach na blogu. 2017-04-09 20:30:38 daj-sie-poznac-2017-raport-z-dzialan-czesc-6 ckekeq7uo0004i3umft185ior 2017-04-09 20:30:38 2017-04-09 20:30:38 -cj1gd478w00e6i3umcx0eapr2 [JS] Jak używać let i const w kodzie JavaScript? http://blog.piotrnalepa.pl/2017/04/13/js-jak-uzywac-let-i-const-w-kodzie-javascript/ Po lekturze tego wpisu dowiesz się jak korzystać, w kodzie JavaScript, z let i const zamiast var. Zostało to omówione na prostych do zrozumienia przykładach. 2017-04-13 12:09:50 js-jak-uzywac-let-i-const-w-kodzie-javascript ckekeq7uo0004i3umft185ior 2017-04-13 12:09:50 2017-04-13 12:09:50 +cjyq1876o01nwi3umbryu9zj6 Jak uczyć się programowania? https://fsgeek.pl/post/jak-uczyc-sie-programowania/

Rynek potrzebuje coraz więcej programistów - z tym zdaniem można się często spotkać. Dlaczego tak się dzieje? Odpowiedź jest prosta - prawie każda dziedzina i proces może zyskać dzięki dedykowanej aplikacji. Jednak jak się uczyć programowania zarówno na początku drogi jak i potem podczas doskonalenia umiejętności by było to przyjemne i co ważniejsze efektywne?

\n\n

Książki

\n\n

Książki są chyba pierwszym pomysłem na początku nauki nowych umiejętności. I tak jak sprawdzają się w wielu dziedzinach - gotowanie, malowanie, ogrodnictwo tak w stosunku do informatyki a szczególnie programowania jestem nastawiony raczej sceptycznie. Książki o programowaniu mają jeden zasadniczy problem - wiele z nich jest nieaktualna (szczególnie polskie tłumaczenia) w momencie wydania. Jedyne książki jakie według mnie warto kupić i czytać to te traktujące o elementach niezmiennych czyli architektura, zasadach prowadzenie projektu i kodu, umiejętności miękkie itd. Natomiast nie kupowałbym książek, które traktują o konkretnej bibliotece ponieważ szybko straci na ważności.

\n\n

Oczywiście od każdej reguły są odstępstwa. Na przykład dla Javascriptu jest świetna seria You don't know JS, którą znajdziecie za darmo na Githubie - gorąco zachęcam do przeczytania.

\n\n

Kursy

\n\n

Dużo lepszym pomysłem na rozpoczęcie nauki według mnie to różnego rodzaju kursy. Tutaj autorzy zazwyczaj starają się aby ich kursy były ciągle aktualne - a jeśli nie to jest wystarczająco duży wybór innych twórców. Kolejna zaleta nad książkami jest taka, że bardzo często są tam ćwiczenia, które należy wykonać samemu w celu utrwalenia wiedzy. Taka nauka jest dużo bardziej efektywna od suchego czytania. Co do serwisów które oferuja kursy mogę polecić kilka:

\n\n
    \n
  • Udemy - bardzo często są tam różnego rodzaju promocje i wyprzedaże (nie opłaca się kupować w oryginalnej cenie, lepiej poczekać na obniżkę)
    • \n
  • Egghead
    • \n
  • Plurasight
    • \n
\n\n

Własne projekty

\n\n

Następny etap po kursach gdzie najczęściej jesteśmy prowadzeni za rączkę to zrobienie projektu sami od początku do końca. Nie będzie to łatwe, ponieważ okaże się na początku, że nie wiecie od czego zacząć, co robić i jak to robić. Ale oto właśnie chodzi - tutaj tak naprawdę się przekonacie czy programowanie jest dla was. Taki własny projekt nauczy was dużo więcej niż kursy - nauczy was planowania, pracy z Gitem (to właściwie obowiązkowe), projektowania architektury, szukania informacji w dokumentacji czy też rozwiązywania problemów. Największy problem w przypadku własnych projektów to co zrobić? Na samym początku nie należy za bardzo kombinować - spróbować zrobić to samo co na kursie tylko samemu, rozbudować o dodatkową funkcjonalność lub też zapytać na jakimś forum co można zrobić za projekt. Jeśli nie będziecie wiedzieć co możecie zrobić to możecie napisać do mnie - na pewno coś podpowiem :)

\n\n

Blog

\n\n

Kolejny świetny pomysł na naukę i doskonalenie swoich umiejętności to założenie bloga. Nic tak nie zachęca do pogłębiania swojej wiedzy jak chęć napisania nowego postu. Oczywiście wiem jakie możecie mieć powody by nie zacząć pisać np.: nie będę mieć czasu, nikt nie będzie chciał czytać, już jest tyle blogów itd. Skąd to mogę wiedzieć? Sam przez to przechodziłem. Nie ma się o co martwić - programowanie jest tak rozległą i ciągle rozwijającą się dziedziną, że każdy znajdzie miejsce dla siebie. Moją radą na początek jest by nie skupiać się w pozyskanie czytelników a bardziej na pisaniu. Jeśli będziecie pisać regularnie oraz będziecie poruszać ciekawe tematy to czytelnicy pojawią się sami. Grunt to wytrwałość :)

\n\n

Opensource

\n\n

No na sam koniec coś dla już bardziej doświadczonych programistów, którzy mają trochę wolnego czasu. Pomoc w rozwijaniu projektu opensource to idealny sposób na rozwój własnych umiejętności. Jeżeli wybierzemy jednen z bardziej znanych projektów to będziemy mogli sporo nauczyć się o architekturze, niskopoziomowych elementach języka, testowaniu, optymalizacji oraz wielu innych w zależności jaki to jest projekt. Jedyny minus to, że może to zająć sporo czasu i na początku nasze pull requesty mogą mieć sporo komentarzy co należy poprawić.

\n\n

A wy jakie macie metody uczenia się programowania lub co robiliście gdzy zaczynaliście naukę? Jestem ciekawy również co robicie by być ciągle na bieżąco z nowinkami - czytacie artukuły, własne mini projekty, prezentacje? Zapraszam do komentowania i dzielenia się swoimi sposobami :)

2019-07-30 16:25:00 jak-uczyc-sie-programowania ckhxjb6o0000yi3umb3hg09jv 2019-07-30 16:25:00 2019-07-30 16:25:00 cj1mflx5400eyi3umczq3c3i3 Daj Się Poznać 2017 – raport z działań. Część 7 http://blog.piotrnalepa.pl/2017/04/17/daj-sie-poznac-2017-raport-z-dzialan-czesc-7/ W podsumowaniu 7 tygodnia prac przedstawię co zostało zrobione, a co jest jeszcze do zrobienia w projekcie LeagueManager. Będzie można podejrzeć jak będzie wyglądał blog w przyszłości. 2017-04-17 18:06:13 daj-sie-poznac-2017-raport-z-dzialan-czesc-7 ckekeq7uo0004i3umft185ior 2017-04-17 18:06:13 2017-04-17 18:06:13 cj1oorsn400f4i3um42125phb [JS] React i wirtualna rzeczywistość. Nadchodzą zmiany! http://blog.piotrnalepa.pl/2017/04/19/js-react-i-wirtualna-rzeczywistosc-nadchodza-zmiany/ We wpisie przedstawiono najnowsze rozwiązania: React Fiber i React VR. Dowiesz się czym są te narzędzia i do czego służą. Przekonasz się, dlaczego wywołują one tyle podekscytowania w środowisku programistów. 2017-04-19 07:58:16 js-react-i-wirtualna-rzeczywistosc-nadchodza-zmiany ckekeq7uo0004i3umft185ior 2017-04-19 07:58:16 2017-04-19 07:58:16 cj1uy0vc800fsi3umgsrrd7pm Daj Się Poznać 2017 – raport z działań. Część 8 http://blog.piotrnalepa.pl/2017/04/23/daj-sie-poznac-2017-raport-z-dzialan-czesc-8/ Krótkie podsumowanie minionego tygodnia. Kilka słów o tym co udało się zaimplementować. O tym jakie są plany na nadchodzący tydzień oraz dlaczego będzie w końcu można się już pochwalić pierwszymi zdjęciami aplikacji. 2017-04-23 17:03:53 daj-sie-poznac-2017-raport-z-dzialan-czesc-8 ckekeq7uo0004i3umft185ior 2017-04-23 17:03:53 2017-04-23 17:03:53 @@ -1273,6 +1293,7 @@ cj1ccqfnc00dpi3umc0w51y2v Trik z odmianą słów takich jak JavaScript przez prz cj5400hl400oei3umehnudien Uniwersalne biblioteki JavaScript czyli UMD http://jcubic.pl/2017/07/uniwersalne-biblioteki-javascript.html <p>UMD czyli Uniwersalna definicja modułu (ang. Universal Module Definition) jest to sposób tworzenia definicji modułu/biblioteki JavaScript aby była możliwość korzystania z niej wszędzie.</p>\n\n\n <br/>\n *** To tylko fragment wpisu! Kliknij na tytuł aby przeczytać całość. 2017-07-14 15:08:37 uniwersalne-biblioteki-javascript-czyli-umd ckfdlon7c0009i3umeitx0nz4 2017-07-14 15:08:37 2017-07-14 15:08:37 cj6uvve8g00qpi3umg9xt11lc Alternatywa dla React/Preact + Redux http://jcubic.pl/2017/08/alternatywal-dla-react-preact-redux.html

React lub Preact + Redux to bardzo silne połączenie dające możliwość tworzenia aplikacji typu SPA ale istnieje alternatywa, która zajmuje tylko 1KB zminimalizowana z kompresją gzip.


*** To\n tylko fragment wpisu! Kliknij na tytuł aby przeczytać całość. 2017-08-27 15:22:10 alternatywa-dla-reactpreact-redux ckfdlon7c0009i3umeitx0nz4 2017-08-27 15:22:10 2017-08-27 15:22:10 cj7cd42dk00rci3um8f5j77mx 5 pytań na rozmowę kwalifikacyjną z języka JavaScript http://jcubic.pl/2017/09/pytania-na-rozmowe-kwalifikacyjna-z-javascript.html

Kilka dni temu zostałem poproszony o przygotowanie 3 pytań, dla kandydata na programistę Full Stack, z języka JavaScript. Przygotowałem 4 i potem dodałem jeszcze jedno.\n Oto one.


*** To tylko fragment wpisu! Kliknij na tytuł aby przeczytać całość. 2017-09-08 20:56:53 5-pytan-na-rozmowe-kwalifikacyjna-z-jezyka-javascript ckfdlon7c0009i3umeitx0nz4 2017-09-08 20:56:53 2017-09-08 20:56:53 +cj3wx67xc00mmi3um9j92fsoz Wady i zalety hostowania strony na GitHubie http://kot-zrodlowy.pl/programowanie/2017/06/14/github-pages-wady-i-zalety.html Cześć! Wracam szybko z kolejnym wpisem. Dzisiaj nie przedstawię kolejnego tutorialu z JS-a, ale myślę że temat też może zaciekawić ludzi, którzy piszą do internetu. Koci blog istnieje prawie pół ro... 2017-06-14 11:35:00 wady-i-zalety-hostowania-strony-na-githubie cjy7sgxs0000bi3umeb9z90rn 2017-06-14 11:35:00 2017-06-14 11:35:00 cj7n51g8g00rpi3um5dwq27k9 Importy HTML http://jcubic.pl/2017/09/importy-html.html

Importy HTML (ang. HTML Imports) to nowa\n funkcjonalność w HTML, która jest częścią web komponentów. Daje możliwość importowania skryptów JavaScript, szablonów CSS czy stron HTML oraz daje dostęp do ich zawartości. Tak jak w przypadku AJAX-a, ale następuje to zanim strona się załaduje, w momencie gdy parser napotka tag importu w HTML.


*** To tylko fragment wpisu! Kliknij na tytuł aby przeczytać całość. 2017-09-16 09:56:22 importy-html ckfdlon7c0009i3umeitx0nz4 2017-09-16 09:56:22 2017-09-16 09:56:22 cj8hhtiio00svi3umf84f87ft Metaprogramowanie w języku JavaScript http://jcubic.pl/2017/10/metaprogramming-javascript.html

Wraz z wersją języka JavaScript ES6 dostaliśmy potężne narzędzia umożliwiające metaprogramowanie, a dokładnie podpinanie się pod wbudowane mechanizmy języka. W tym poście\n przedstawie jakie nowe funkcje weszły do ES6 które umożliwiają metaprogramowanie.


*** To tylko fragment wpisu! Kliknij na tytuł aby przeczytać całość. 2017-10-07 15:47:12 metaprogramowanie-w-jezyku-javascript ckfdlon7c0009i3umeitx0nz4 2017-10-07 15:47:12 2017-10-07 15:47:12 cj9ci4l3400tri3um1c47gyen Jak Zainstalować MacOSX na VirtualBoxie http://jcubic.pl/2017/10/jak-zainstalowac-mac-osx-na-virtualbox.html

Jeśli piszesz aplikacje www dobrze jest ją przetestować na wszystkich przeglądarkach czyli Firefox Opera, Chrome ale też na IE/Edge na windowsie oraz Safari na MacOSX.\n Jest to problematyczne jeśli korzystasz z Systemu Operacyjnego Linux lub Windows. Zainstalowanie Linuxa lub Windowsa na VirutalBoxie nie sprawia kłopotów, natomiast z MacOSX może być już\n problem.


*** To tylko fragment wpisu! Kliknij na tytuł aby przeczytać całość. 2017-10-29 08:36:40 jak-zainstalowac-macosx-na-virtualboxie ckfdlon7c0009i3umeitx0nz4 2017-10-29 08:36:40 2017-10-29 08:36:40 @@ -1285,7 +1306,6 @@ cj32rfv4o00k5i3umcuaigi7k Jak zacząć pisać projekt Open Source http://kot-zro cj35mbkgo00khi3um6gjl2w1g Tworzenie Bloga W Jekyll Poradnik Cz.1 http://kot-zrodlowy.pl/programowanie/2017/05/26/Tworzenie-bloga-w-Jekyll-poradnik-cz.1.html Cześć! Dzisiaj wam opowiem o narzędziu, dzięki któremu możecie każdego dnia przeglądać kociego bloga. Co to jest Jekyll? Na czym to polega? Co jest w nim fajnego? I przede wszystkim, jak założyć bl... 2017-05-26 09:01:27 tworzenie-bloga-w-jekyll-poradnik-cz1 cjy7sgxs0000bi3umeb9z90rn 2017-05-26 09:01:27 2017-05-26 09:01:27 cj3o71n4o00m1i3um5p787auh 50 twarzy JS: Grafika w JS http://kot-zrodlowy.pl/programowanie/javascript/2017/06/08/50twjs-grafika-w-js.html Cześć! Dzisiaj omówimy sobie mega temat. Jak to zwykle bywa w tej fajnej serii, to można się spodziewać kolejnego odjechanego i ciekawego zastosowania JS-a. Z tytułu już wiecie, że zajmiemy się gra... 2017-06-08 09:01:27 50-twarzy-js-grafika-w-js cjy7sgxs0000bi3umeb9z90rn 2017-06-08 09:01:27 2017-06-08 09:01:27 cj3shd74o00mai3um2arl8gqk Tworzenie bloga w Jekyll - poradnik cz.2 struktura katalogów http://kot-zrodlowy.pl/programowanie/2017/06/11/jekyll-poradnik-2.html Cześć! To znowu ja. Dzisiaj przychodzę do was z drugą częścią poradnika o Jekyllu (nie tylko dla opornych). Wpis z pierwszą częścią poradnika traktował o instalacji i podstawowej konfiguracji bloga... 2017-06-11 09:01:27 tworzenie-bloga-w-jekyll-poradnik-cz2-struktura-katalogow cjy7sgxs0000bi3umeb9z90rn 2017-06-11 09:01:27 2017-06-11 09:01:27 -cj3wx67xc00mmi3um9j92fsoz Wady i zalety hostowania strony na GitHubie http://kot-zrodlowy.pl/programowanie/2017/06/14/github-pages-wady-i-zalety.html Cześć! Wracam szybko z kolejnym wpisem. Dzisiaj nie przedstawię kolejnego tutorialu z JS-a, ale myślę że temat też może zaciekawić ludzi, którzy piszą do internetu. Koci blog istnieje prawie pół ro... 2017-06-14 11:35:00 wady-i-zalety-hostowania-strony-na-githubie cjy7sgxs0000bi3umeb9z90rn 2017-06-14 11:35:00 2017-06-14 11:35:00 cj56qasg000oii3um3qte17po Instalacja i konfiguracja edytora Vim w roli IDE do JS-a http://kot-zrodlowy.pl/javascript/programowanie/2017/07/16/instalacja-i-konfiguracja-vim-jako-ide.html Cześć! Nie, jeszcze nie zwariowałam. No dobra, może odrobinę, ale przez cza pisania tego bloga nic się nie zmieniło w tej kwestii. Ale tak, mam osobisty challenge na lato - nauczyć się VIM. To jest... 2017-07-16 13:00:00 instalacja-i-konfiguracja-edytora-vim-w-roli-ide-do-js-a cjy7sgxs0000bi3umeb9z90rn 2017-07-16 13:00:00 2017-07-16 13:00:00 cj6az7a8000q4i3um265i9gfj Tern - ciekawe narzędzie w codziennej pracy http://kot-zrodlowy.pl/javascript/programowanie/2017/08/13/tern-ciekawe-narzedzie-w-codziennej-pracy.html Cześć, dzisiaj kolejny lajtowy post. Osobiście należę do osób, które uwielbiają mieć rzeczy dopasowane do własnych potrzeb i rzadko mnie zadowalają rzeczy w ich standardowej konfiguracji. Jeśli kto... 2017-08-13 17:00:00 tern-ciekawe-narzedzie-w-codziennej-pracy cjy7sgxs0000bi3umeb9z90rn 2017-08-13 17:00:00 2017-08-13 17:00:00 cj6ktxcg000qhi3um9xld75vm 50 twarzy JS: Rozpoznawanie twarzy na video http://kot-zrodlowy.pl/programowanie/javascript/2017/08/20/50-twarzy-JS-Rozpoznawanie-twarzy-na-video.html Cześć, dzisiaj przychodzę ze specjalnym postem. Obchodzimy 127 rocznicę urodzin Lovecrafta - ojca mitologii Cthulu. To właśnie dzięki niemu od długiego czasu rozbudzają wyobraźnię twórców gier i wi... 2017-08-20 14:30:00 50-twarzy-js-rozpoznawanie-twarzy-na-video cjy7sgxs0000bi3umeb9z90rn 2017-08-20 14:30:00 2017-08-20 14:30:00 @@ -1300,6 +1320,7 @@ cj965mf4000tni3um4ntm4wv9 Jak napisać README? http://kot-zrodlowy.pl/programowa cizzb29go0086i3umfwo28z52 DSP: SMPlanner – tydzień 1. – React JS, Material UI & Redux https://www.nettecode.com/dsp-smplanner-tydzien-1-react-js-material-ui-redux/

Na starcie mam pytanie: jak Wam się podoba forma raportowania postępów projektu przedstawiona poniżej? A może wolicie konkrety, bardziej techniczne wpisy? A niekoniecznie interesuje Was co się udało/nie udało/co planuję? Dajcie znać w komentarzu!...

\n

Artykuł DSP: SMPlanner – tydzień 1. – React JS, Material UI & Redux pochodzi z serwisu NetteCode.

2017-03-07 09:00:33 dsp-smplanner-tydzien-1-react-js-material-ui-and-redux ckhnmdge00000i3um6batg2gk 2017-03-07 09:00:33 2017-03-07 09:00:33 cj00zlsfc008di3umen4r7l3l Kobiety & Programowanie – fakty, mity i historie https://www.nettecode.com/kobiety-programowanie/

Z tego, co zostało opublikowane w temacie kobiet i programowania można by napisać niejedną książkę. W sumie ostatnio często o tym głośno. Co z jednej strony jest fajne, gdyż zgadzam się, że im głośniej,...

\n

Artykuł Kobiety & Programowanie – fakty, mity i historie pochodzi z serwisu NetteCode.

2017-03-08 13:15:21 kobiety-and-programowanie-fakty-mity-i-historie ckhnmdge00000i3um6batg2gk 2017-03-08 13:15:21 2017-03-08 13:15:21 cj05817hs008pi3um66tefdr8 Nauka React JS – moja ścieżka https://www.nettecode.com/nauka-react-js-moja-sciezka/

W ramach tematów technicznych chciałabym Wam przybliżyć technologie, frameworki, informacje, które prowadzą do stworzenia aplikacji, nad którą pracuje. Opiszę też pewnie niektóre fragmenty kodu i rezultaty jakie dają. Zobaczymy 🙂 Pierwszy wpis w temacie...

\n

Artykuł Nauka React JS – moja ścieżka pochodzi z serwisu NetteCode.

2017-03-11 12:22:22 nauka-react-js-moja-sciezka ckhnmdge00000i3um6batg2gk 2017-03-11 12:22:22 2017-03-11 12:22:22 +cjyzyt54001o8i3umapqe7cv4 Bądź produktywny - podstawy Postmana https://fsgeek.pl/post/badz-produktywny-podstawy-postmana/

Postman jest jedną z wielu aplikacji pozwalających na wysyłanie zapytań do serwera. Według mnie znajomość jednego z takich narzędzi jest przydatna nieważne czy się pracuje na frontendzie, backendzie czy jako tester. Właściwie wykorzystywany Postman potrafi ułatwić życie i przyspieszyć testowanie oraz tworzenie endpointów. Jednak jak z niego korzystać tak aby to była czysta przyjemność?

\n\n

Tworzenie endpointów

\n\n

Jak już wspomniałem Postman służy do komunikacji z serwerem. Możemy za jego pomocą pobierać potrzebne informacje z serwera, testować czy endpointy zostały poprawnie zaimplementowane lub jeśli nie ma pełnej dokumentacji API testować jak należy wysyłać zapytania.

\n\n

Żeby pokazać w jaki sposób można wygodnie testować API skorzystałem z istniejącej strony jsonplaceholder.typicode.com - możecie ją również wykorzystać jako poligon testowy. Możemy się z nią komunikować za pomocą 4 najpopularniejszych zapytań czyli: GET, POST, PUT, DELETE (żeby poznać szczegóły zachęcam do odwiedzenia strony).

\n\n

Aby w Postmanie wysłać zapytanie na serwer musimy wykonać 3 kroki

\n\n
    \n
  • wybrać jaki rodzaj zapytania chcemy wykonać z rozwijanej listy (np.: GET)
    • \n
  • Wpisać URL z jakim chcemy się komunikować
    • \n
  • Kliknąć przycisk Send
    • \n
\n\n

get list

\n\n

Jeśli wszystko jest poprawne to powinniśmy otrzymać odpowiedź oraz informacje dotyczące odpowiedzi czyli status, czas oraz rozmiar odpowiedzi.

\n\n

Oczywiście zapytania nie zawsze są takie proste - mogą zawierać na przykład dodatkowe parametry w URL’u. Możemy oczywiście podobnie jak poprzednio wkleić URL z dodatkowymi parametrami ale lepiej jest skorzystać z opcji Params - znajduje się na lewo od Send

\n\n

Dla przykładu zapytanie https://jsonplaceholder.typicode.com/posts?userId=1 będzie wyglądać następująco:

\n\n

get resource with params

\n\n

Taki sposób postępowania jest bardzo wygodny, ponieważ pozwala na dowolne włączanie i wyłączanie parametrów i nie musimy się martwić o to czy URL jest zbudowany poprawnie - przy dużej ilości parametrów to może być kłopotliwe.

\n\n

Do pełni szczęścia został jeszcze endpoint POST i PUT gdzie musimy wysłać więcej danych. Wtedy wykorzystamy zakładkę Body. Tutaj najczęściej będzie nas interesował typ raw oraz format JSON(application/json)

\n\n

post new post

\n\n

Kolekcje

\n\n

Kolejna rzecz to zapisywanie testowanych przez nas endpointów - przecież nie będziemy ich za każdym razem pisać od nowa. Najprościej jest wybrać opcję zapisu, która znajduje się na prawo od Send. Ale jeśli będziemy mieli bardzo dużo endpointów to okaże się, że szybciej wpiszemy pożądany endpoint od nowa niż znajdziemy go na liście :) Na szczęście możemy grupować nasze endpointy w kolekcje.

\n\n

save endpoint

\n\n

Ja lubię tworzyć kolekcję dla projektu nad którym aktualnie pracuję i potem dla każdego zasobu jest tworzony osobna kolekcja np.: Post - w ten sposób wszystko jest poukładane i pojedyncza kolekcja ma około 5 endpointów.

\n\n

Środowiska

\n\n

Najczęściej jak tworzymy oprogramowanie to nie mamy jednego środowiska tylko kilka. I często zadrza się, że na jednym środowisku endpoint działa poprawnie a na drugim nie i trzeba sprawdzić skąd różnice. Korzystając z Postmana możemy stworzyć osobne kolekcje dla każdego środowiska i trzymać w nich ten sam zbiór endpointów. Jednak nie jest to wygodne i szybciej niż później się okaże, że będziemy musieli aktualizować pojedynczy endpoint w kilku miejscach. Da się to na szczęście zrobić lepiej.

\n\n

W Postmanie mamy możliwość tworzenia środowisk oraz zmiennych w nich. Polega to na tym, że w endpointach zamiast pisać adres URL to odwołujemy się do zmiennej która ten adres przechowuje np.: {{baseUrl}}. Teraz jak będzie trzeba sprawdzić endpoint na innym środowisku to wystarczy stworzyć nowe lub przełączyć na inne już istniejące.

\n\n

Jak stworzyć takie środowisko?

\n\n

environment

\n\n

Nad przyciskiem Send mamy 3 kontrolki które sterują środowiskami. Od lewej mamy:

\n\n
    \n
  • Pole typu Select aby wybrać z jakiego środowiska aktualnie korzystamy
    • \n
  • Podgląd na zmienne zdefiniowane w aktualnym środowisku
    • \n
  • Ustawienia związane z środowiskami - to tam się kierujemy aby stworzyć nowe środowisko
    • \n
\n\n

environment manage

\n\n

Teraz musimy wpisać nazwę naszego środowiska oraz wpisać zmienne jakich chcemy używać

\n\n

environment new

\n\n

Oczywiście nie musimy wpisywać od razu wszystkich zmiennych - możemy to zrobić przyrostowo w zależności od potrzeb. Teraz wystarczy wybrać nasze nowo stworzone środowisko by móc korzystać ze zmiennych\nenvironment_choose

\n\n

Uwierzytelnianie

\n\n

Na sam koniec temat popularny w API, który czasami może powodować problemy. Postman wspiera kilka rodzajów uwierzytelniania, z których możemy skorzystać.

\n\n

auth list

\n\n

Najprostsze rozwiązanie to ustawienie uwierzytelniania na poziomie samego endpointu. Jednak jeśli mamy ich sporo to będzie to uciążliwe. Warto tutaj zwrócić uwagę na jeden szczególny typ uwierzytelniania - Inherit auth from parent. Oznacza to tyle, że jesteśmy w stanie ustawić uwierzytelnianie na poziomie całej kolekcji a Postman za nas umieści ją potem w odpowiednich endpointach. Aby ustawić takie uwierzytelnianie musimy wejsć do edycji naszej kolekcji;

\n\n

collection edit

\n\n

Teraz wystarczy, że ustawimy odpowiednie uwierzytelnianie i wszystkie nasze endpointy go otrzymają. Oczywiście jeśli nasza kolekcja znajduje się w innej kolekcji to możemy ustwić dziedziczenie uwierzytelniania i ustawić je dla kolekcji wyżej. Dzięki temu zmiana tego ustawienia lub wpisanie nowego tokenu będzie odbywała się w jednym miejscu i będzie zrobiona bardzo szybko.

\n\n

collection auth

\n\n

A wy korzystacie z Postmana? A może macie jakieś inne aplikacje do wysyłania requestów? A może tylko konsola i CURL? Jestem ciekawy jak wam się z tym pracuje i czego wam brakuje.

2019-08-06 15:15:00 badz-produktywny-podstawy-postmana ckhxjb6o0000yi3umb3hg09jv 2019-08-06 15:15:00 2019-08-06 15:15:00 cjfpx9z40010ji3um4vto8uwm Moje ulubione strony z wyzwaniami dla programistów i dlaczego nie lubię spoja. http://kot-zrodlowy.pl/programowanie/2018/04/08/moje-ulubione-strony-z-wyzwaniami-dla-programistow-i-dlaczego-nie-lubie-spoja.html Cześć! Dawno mnie nie było. Oj bardzo dawno. Przez ostatni czas potrzebowałam trochę oddechu od wszystkiego, w moim życiu zaszło sporo zmian, ale postanowiłam wrócić, bo dobrze mi tu z wami. Zaczęł... 2018-04-07 22:00:00 moje-ulubione-strony-z-wyzwaniami-dla-programistow-i-dlaczego-nie-lubie-spoja cjy7sgxs0000bi3umeb9z90rn 2018-04-07 22:00:00 2018-04-07 22:00:00 cji2898g0013ii3umei9pekul Jak zmigrować swoje projekty i strony na GitLaba http://kot-zrodlowy.pl/programowanie/opensource/2018/06/06/jak-zmigrowac-projekty-na-gitlaba.html Cześć kociaki, to pierwszy artykuł po zmigrowaniu bloga na serwis Gitlab. Mam nadzieję, że nie było widać znaczących przestojów ani większych problemów z tym związanych. Kto mnie obserwuje na Kocim... 2018-06-05 22:00:00 jak-zmigrowac-swoje-projekty-i-strony-na-gitlaba cjy7sgxs0000bi3umeb9z90rn 2018-06-05 22:00:00 2018-06-05 22:00:00 cjiowvds00147i3um2o8ha5b0 Początki pracy z Dockerem (dla opornych) https://kot-zrodlowy.pl/programowanie/linux/2018/06/21/poczatki-pracy-z-dockerem-dla-opornych.html Cześć, na dzisiaj przygotowałam coś ekstra. Temat modny i od dłuższego czasu bardzo lubiany, więc swoistym obciachem jest nic o nim nie wiedzieć. Żartuję, przecież każdy, zanim się czegoś dowiedzia... 2018-06-21 19:00:00 poczatki-pracy-z-dockerem-dla-opornych cjy7sgxs0000bi3umeb9z90rn 2018-06-21 19:00:00 2018-06-21 19:00:00 @@ -1315,6 +1336,7 @@ cjtywcsg001i9i3um0ywsbp88 “Różne interfejsy użytkownika pisane JS-em” htt cjukbykg001j5i3umf48u4qt7 Prawda czy fałsz – czyli co wpisać w if-a https://kot-zrodlowy.pl/javascript/programowanie/2019/04/17/co-wpisac-w-ifa.html Cześć! Jeśli już tu trafiłeś, to znaczy, że zaciekawił cię ten, z pozoru trywialny, temat. Albo chcesz się pośmiać, bo wiesz, że nic cię już nie zaskoczy. Stawiam jednak, że to ta pierwsza opcja, g... 2019-04-16 22:00:00 prawda-czy-falsz-czyli-co-wpisac-w-if-a cjy7sgxs0000bi3umeb9z90rn 2019-04-16 22:00:00 2019-04-16 22:00:00 cjxds81s001mgi3um8eeqa8p5 Jak uczyć się programowania? - Q&A https://kot-zrodlowy.pl/offtop/2019/06/27/jak-uczyc-sie-programowania.html Cześć, dawno mnie nie było. No cóż, praca, praca… Nagle okazuje się, że czas jest najcenniejszym zasobem. Również moje pokłady kreatywności często są wykorzystywane do zupełnie innych celów. Ale ni... 2019-06-26 22:00:00 jak-uczyc-sie-programowania-qanda cjy7sgxs0000bi3umeb9z90rn 2019-06-26 22:00:00 2019-06-26 22:00:00 cjy7sgxs001ndi3umdy9s8sx3 Wprowadzenie do Komponentów Webowych https://kot-zrodlowy.pl/javascript/2019/07/18/web-components-wprowadzenie.html Cześć, Ostatnio zainteresowałam się tematyką natywnych komponentów webowych i chciałam się z tobą podzielić swoimi spotrzeżeniami. Dzisiaj ogólnie, trochę teorii, a w kolejnych wpisach zmierzę się ... 2019-07-17 22:00:00 wprowadzenie-do-komponentow-webowych cjy7sgxs0000bi3umeb9z90rn 2019-07-17 22:00:00 2019-07-17 22:00:00 +ckbvg8ao0023ui3um1oh2fdvi Uwaga na fixtury w cypress.io https://przemuh.dev/blog/watch-out-for-fixtures-in-cypress Dzisiaj opowiem wam krótką historię o błędzie, który kosztował mnie dwa dni poszukiwań. Błędzie, który koniec końców okazał się czymś bardzo trywialnym, a czas który spędziłem na debugowaniu… 2020-06-26 00:00:00 uwaga-na-fixtury-w-cypressio ckh8coao00010i3umhqw2e6xc 2020-06-26 00:00:00 2020-06-26 00:00:00 cj09ikfq80092i3um0yzua31w DSP: SMPlanner – tydzień 2. – Redux + Firebase https://www.nettecode.com/dsp-smplanner-tydzien-2-redux-firebase/

Cieszę się, że taka forma raportów przypadła Wam do gustu. Dziś podsumowanie drugiego tygodnia prac. Co się udało? + 3 posty w zeszłym tygodniu 😉 Po pierwsze wtorkowy raport z postępu prac (analogiczny do...

\n

Artykuł DSP: SMPlanner – tydzień 2. – Redux + Firebase pochodzi z serwisu NetteCode.

2017-03-14 12:28:20 dsp-smplanner-tydzien-2-redux-firebase ckhnmdge00000i3um6batg2gk 2017-03-14 12:28:20 2017-03-14 12:28:20 cj0dpqp0w009ki3um0p4z99sr React + Material Design = Material UI https://www.nettecode.com/react-material-design-material-ui/

W pierwszym artykule poświęconym aplikacji wspomniałam, że chcę skorzystać z Google’s Material Design. Osobiście bardzo lubię aplikacje zgodne z tym stylem, ale sama jeszcze z niego nie korzystałam. Więc czemu nie miałabym spróbować przy...

\n

Artykuł React + Material Design = Material UI <3 pochodzi z serwisu NetteCode.

2017-03-17 11:00:14 react-material-design-material-ui ckhnmdge00000i3um6batg2gk 2017-03-17 11:00:14 2017-03-17 11:00:14 cj0jr92jk00aci3um5rxh4zi9 DSP: SMPlanner – tydzień 3. – Demo https://www.nettecode.com/dsp-smplanner-tydzien-3-demo/

Zgodne z zapowiedzią udostępniam dziś Demo aplikacji, nad którą pracuje. Ale najpierw kilka słów odnośnie postępów projektu w tym tygodniu 😉   Pierwszy i ostatni raz piszę raport w dniu publikacji… Zuza dzisiaj kompletnie...

\n

Artykuł DSP: SMPlanner – tydzień 3. – Demo pochodzi z serwisu NetteCode.

2017-03-21 16:29:08 dsp-smplanner-tydzien-3-demo ckhnmdge00000i3um6batg2gk 2017-03-21 16:29:08 2017-03-21 16:29:08 @@ -1334,6 +1356,7 @@ ckgzdnpt4029ci3um03z4apyw #start_angular cz. 2 c.d. Komunikacja komponentów i i ckh50mrtk029mi3um4robga6e #start_angular cz. 3. Pracujemy z Git. Tworzymy repozytorium. https://a-frontman.pl/start_angular-cz-3-pracujemy-z-git-tworzymy-repozytorium/?utm_source=rss&utm_medium=rss&utm_campaign=start_angular-cz-3-pracujemy-z-git-tworzymy-repozytorium

Cześć! Dzisiaj nie będzie o Angularze, bo uznałem, że każdy szanujący się kurs programowania (jakiegokolwiek) powinien zahaczyć…

\n

Artykuł #start_angular cz. 3. Pracujemy z Git. Tworzymy repozytorium. pochodzi z serwisu a - frontman.

2020-11-05 15:59:35 start_angular-cz-3-pracujemy-z-git-tworzymy-repozytorium ckio5ucds001qi3um0occaae7 2020-11-05 15:59:35 2020-11-05 15:59:35 ckhlvptgg02a8i3um86mx4rva Będziemy tworzyć aplikację! Wymagania biznesowe https://a-frontman.pl/bedziemy-tworzyc-aplikacje-wymagania-biznesowe/?utm_source=rss&utm_medium=rss&utm_campaign=bedziemy-tworzyc-aplikacje-wymagania-biznesowe

Cześć! Nareszcie nadeszła wiekopomna chwila. Pora ogłosić start z aplikacją, na bazie której poznasz kolejne techniki programowania…

\n

Artykuł Będziemy tworzyć aplikację! Wymagania biznesowe pochodzi z serwisu a - frontman.

2020-11-17 11:14:04 bedziemy-tworzyc-aplikacje-wymagania-biznesowe ckio5ucds001qi3um0occaae7 2020-11-17 11:14:04 2020-11-17 11:14:04 ckhu5n30w02agi3um8bue2i95 Architektura w angularze. Jak zaplanować implementację aplikacji? https://a-frontman.pl/architektura-w-angularze-jak-zaplanowac-implementacje-aplikacji/?utm_source=rss&utm_medium=rss&utm_campaign=architektura-w-angularze-jak-zaplanowac-implementacje-aplikacji

Dzisiaj omawiamy podstawy architektury naszej angularowej aplikacji i sposób komunikacji modułów.

\n

Artykuł Architektura w angularze. Jak zaplanować implementację aplikacji? pochodzi z serwisu a - frontman.

2020-11-23 06:14:02 architektura-w-angularze-jak-zaplanowac-implementacje-aplikacji ckio5ucds001qi3um0occaae7 2020-11-23 06:14:02 2020-11-23 06:14:02 +cj817mszk00s9i3um4ioe6ci4 Jak efektywnie testować kod napisany za pomocą React? https://blog.piotrnalepa.pl/2017/09/26/jak-efektywnie-testowac-kod-napisany-za-pomoca-react/ Z pomocą tego tekstu nauczysz się pisania testów za pomocą Jest i Enzyme, dzięki czemu wszystkie funkcjonalności kodu napisanego z pomocą biblioteki React będą dobrze przetestowane. Poznasz różnice w sposobach renderowania komponentów w testach oraz poznasz kilka ciekawych sposobów na testowanie specyficznych części kodu Twojej aplikacji. 2017-09-26 06:17:44 jak-efektywnie-testowac-kod-napisany-za-pomoca-react ckekeq7uo0004i3umft185ior 2017-09-26 06:17:44 2017-09-26 06:17:44 cj2yn8dyw00jni3umbs370xrx Daj Się Poznać 2017 – raport z działań. Część 12 i przedostatnia http://blog.piotrnalepa.pl/2017/05/21/daj-sie-poznac-2017-raport-z-dzialan-czesc-12-i-przedostatnia/ Okres konkursowy akcji Daj Się Poznać 2017 powoli dobiega końca. Do zakończenia akcji zostały niecałe dwa tygodnie. Miniony tydzień nie był poświęcony żadnej większej funkcjonalności. Nie miałem czasu aby zajmować się czymś dużym jak w poprzednich tygodniach, więc z doskoku poprawiałem istniejące rzeczy. Co udało się zrobić? Rzeczy które udało się zrobić dotyczą głównie interfejsu […] 2017-05-21 11:52:35 daj-sie-poznac-2017-raport-z-dzialan-czesc-12-i-przedostatnia ckekeq7uo0004i3umft185ior 2017-05-21 11:52:35 2017-05-21 11:52:35 cj1xdrtk800g4i3um2eym70he DSP: SMPlanner – tydzień 8. – Kolejny widok & aktualizacja demo https://www.nettecode.com/dsp-smplanner-tydzien-8-kolejny-widok-aktualizacja-demo/

I kolejny (ósmy już) tydzień konkursu minął. Muszę przyznać, że powoli tygodnie zaczynają mi się zlewać w całość. Przecież dopiero co raportowałam postępy… i znowu? Życie, zwolnij 😀 Przepraszam też z góry jeśli są...

\n

Artykuł DSP: SMPlanner – tydzień 8. – Kolejny widok & aktualizacja demo pochodzi z serwisu NetteCode.

2017-04-25 10:00:17 dsp-smplanner-tydzien-8-kolejny-widok-and-aktualizacja-demo ckhnmdge00000i3um6batg2gk 2017-04-25 10:00:17 2017-04-25 10:00:17 cj2z73nyw00jui3um6hggb020 W poszukiwaniu idealnego szablonu dla Joomla! – recenzja szablonu Jedi od TemplateMonster https://blog.piotrnalepa.pl/2017/05/21/w-poszukiwaniu-idealnego-szablonu-dla-joomla-recenzja-szablonu-jedi-od-templatemonster/ Zrecenzowałem szablon dla Joomla! - Jedi od TemplateMonster. Byłem ciekaw, czy naprawdę on spełnia wszystkie wymagania dotyczące nowoczesnej strony. Przekonaj się. 2017-05-21 21:08:47 w-poszukiwaniu-idealnego-szablonu-dla-joomla-recenzja-szablonu-jedi-od-templatemonster ckekeq7uo0004i3umft185ior 2017-05-21 21:08:47 2017-05-21 21:08:47 @@ -1347,7 +1370,7 @@ cj57svve000oni3umc5b8hsry Jak sprawić aby strona internetowa była widoczna w s cj5jwgn3s00p4i3um3z9k1593 Sprawdzony sposób na usuwanie naklejek z laptopa https://blog.piotrnalepa.pl/2017/07/25/sprawdzony-sposob-na-usuwanie-naklejek-z-laptopa/ W tym wpisie omówiłem sposób na efektywne wyczyszczenie laptopa z naklejek. Warto wiedzieć, co trzeba zrobić aby skutecznie usunąć naklejki wraz z ich klejem, tak aby nie uszkodzić pokrywy laptopa. 2017-07-25 18:13:31 sprawdzony-sposob-na-usuwanie-naklejek-z-laptopa ckekeq7uo0004i3umft185ior 2017-07-25 18:13:31 2017-07-25 18:13:31 cj60v7f0w00psi3umgdxfhbya Wywiad z Piotrem Kowalskim – blogerem, youtuberem i organizatorem WarsawJS https://blog.piotrnalepa.pl/2017/08/06/wywiad-z-piotrem-kowalskim-blogerem-youtuberem-i-organizatorem-warsawjs/ Bardzo długi i inspirujący wywiad z Piotrem Kowalskim, w którym opowiada o tym jak został programistą, o tym jak to jest organizować meetupy i szkolenia w Warszawie. Jest też trochę o dostępności stron internetowych oraz porady dla osób, które chciałyby podążyć ścieżką Piotra. Mnóstwo inspiracji i dużo pozytywnej siły. 2017-08-06 15:10:26 wywiad-z-piotrem-kowalskim-blogerem-youtuberem-i-organizatorem-warsawjs ckekeq7uo0004i3umft185ior 2017-08-06 15:10:26 2017-08-06 15:10:26 cj6j2ws8g00qgi3umg7vc21he Jak zaktualizować PHP na macOS Sierra? https://blog.piotrnalepa.pl/2017/08/19/jak-zaktualizowac-php-na-macos-sierra/ Z pomocą tego wpisu unikniesz frustracji wynikających z dziwnych błędów występujących podczas instalacji nowej wersji PHP tak, aby działał również na serwerze Apache. Proces instalacji jest dedykowany systemom macOS, które posiadają zainstalowany menedżer pakietów Homebrew. 2017-08-19 09:05:58 jak-zaktualizowac-php-na-macos-sierra ckekeq7uo0004i3umft185ior 2017-08-19 09:05:58 2017-08-19 09:05:58 -cj817mszk00s9i3um4ioe6ci4 Jak efektywnie testować kod napisany za pomocą React? https://blog.piotrnalepa.pl/2017/09/26/jak-efektywnie-testowac-kod-napisany-za-pomoca-react/ Z pomocą tego tekstu nauczysz się pisania testów za pomocą Jest i Enzyme, dzięki czemu wszystkie funkcjonalności kodu napisanego z pomocą biblioteki React będą dobrze przetestowane. Poznasz różnice w sposobach renderowania komponentów w testach oraz poznasz kilka ciekawych sposobów na testowanie specyficznych części kodu Twojej aplikacji. 2017-09-26 06:17:44 jak-efektywnie-testowac-kod-napisany-za-pomoca-react ckekeq7uo0004i3umft185ior 2017-09-26 06:17:44 2017-09-26 06:17:44 +cj5hxnn7s00p1i3umcbwl6s31 Nowość w ES6 - klasy i rozkład obiektu https://fsgeek.pl/post/seria-es6-obiekty-i-klasy/

Do tej pory opisałem co się zmieniło w specyfikacji ES6 dla zmiennych i funkcji (pierwszy post znajdziecie tutaj a drugi tutaj). Teraz przyszedł czas na opisanie zmian w obiektach oraz parę słów na temat nowości jaką są klasy. Bardzo często nieświadomie już z tego korzystamy więc warto poczytać i używać tych funkcji świadomie.\n

\n\n

Obiekty

\n\n

Na pierwszy ogień postanowiłem się zająć obiektami ponieważ pojawiła się tutaj jedna bardzo ciekawa funkcjonalność, a mianowicie rozkład obiektu. Brzmi dziwnie ale idea jest prosta. Chodzi o rozłożenie obiektu na mniejsze składowe. Bardzo często obiekty traktujemy jak pojemniki do których wrzucamy różne rzeczy by w prosty sposób je przenosić. Jednak po przeniesieniu warto by było odzyskać te wewnętrzne elementy.

\n\n

rozklad_es5

\n\n

W ES5 wymagało to trochę pisania co widać powyżej. Na szczęście w nowym standardzie da się prościej.

\n\n

rozklad_es6

\n\n

Na pewno potrzebujemy mniej kodu by osiągnąć ten sam efekt, co sprawia, że nasz kod jest czytelniejszy. Jednak żeby działało to trzeba pamiętać o paru rzeczach. Po pierwsze jeśli chcemy skorzystać z uproszczonego zapisu np..:

\n\n
const {a,b,c,d} = obiekt \n
\n\n

to nasze zmienne a,b,c,d muszą być istniejącymi kluczami w naszym obiekcie ponieważ inaczej przybiorą wartość undefined. Jeśli chcemy rozłożyć obiekt na zmienne o innej nazwie to możemy tego dokonać takim zapisem

\n\n
const {a:a1,b:a2,c:a3,d:a4} =obiekt\n
\n\n

rozklad2

\n\n

Najpierw podajemy nazwę klucza potem znak dwukropka i następnie nazwę zmiennej pod której chcemy przechowywać wartość. Czasami może się zdarzyć, że będziemy korzystać w tym samym miejscu z różnych obiektów i nie chcielibyśmy wartości undefined ponieważ psułoby to aplikacje. Wtedy możemy skorzystać z wartości domyślnych. Działa to podobnie jak w przypadku funkcji

\n\n

rozklad_wartosc_domyslna

\n\n

Na sam koniec warto jeszcze wspomnieć że rozkład obiektu możemy wykorzystać w funkcjach

\n\n

rozklad_w_funkcjach

\n\n

Jak widać działa to w prosty sposób, ponieważ wystarczy że jako parametr funkcji damy nasze wyrażenie które rozkłada obiekt. I tak jak wspomniałem we wstępie jeśli pracujecie z Reactem to prawdopodobnie wykorzystujecie to żeby wyciągnąć parametry z obiektu props.

\n\n

Klasy

\n\n

No to teraz przyszedł czas na pewnego rodzaju nowość a mianowicie klasy. Dało się wprawdzie wszystko co chcę pokazać wykonać w ES5 ale teraz jest to wygodniejsze i wygląda podobnie do innych języków.

\n\n

klasy

\n\n

Jak widać zapis jest znajomy dla każdego kto programował obiektowo więc tutaj nie ma zaskoczenia. Mamy klasę, konstruktor z jednym argumentem i jedno pole. Warto wspomnieć, nie mamy tutaj oficjalnego wsparcia dla zakresów zmiennych i wszystkie są po prostu publiczne. Może w przyszłości zostanie to zmienione. Ale za to mamy mechanizm dziedziczenia klas, który wygląda następująco:

\n\n

klasy_dziedziczenie

\n\n

Przy pomocy słówka kluczowego super mamy dostęp do rodzica klasy. W tym przykładzie przy pomocy tego słówka wywołaliśmy konstruktor rodzica, który przypisał przekazane przez nas imię do zmiennej. W podobny sposób możemy uzyskać dostęp do funkcji zdefiniowanych u rodzica.

\n\n

klasy_dziedziczenie2

\n\n

Jednocześnie tworząc nową instancję klasy mamy dostęp do funkcji z klasy bazowej. Klasy w JS są dużym krokiem naprzód. Sprawiają, że ten język powoli przybliża się do innych języków obiektowych i może pewnego dnia będzie traktowany na równi z nimi. No i pisanie w nim zaczyna być coraz przyjemniejsze. Aktualnie klasy możemy spotkać między innymi w React’cie gdzie w ten sposób są tworzone komponenty. A wy co uważacie o klasach i kierunku w którym zmierza JavaScript. Jest dobry, niepotrzebny czy może za wolny? Zapraszam do dyskusji.

2017-07-24 09:11:25 nowosc-w-es6-klasy-i-rozklad-obiektu ckhxjb6o0000yi3umb3hg09jv 2017-07-24 09:11:25 2017-07-24 09:11:25 cj94kdzyg00tli3um2imwefyn Jak zoptymalizować ładowanie plików JS z zewnętrznych źródeł? https://blog.piotrnalepa.pl/2017/10/23/jak-zoptymalizowac-ladowanie-plikow-js-z-zewnetrznych-zrodel/ Jeśli kiedykolwiek podczas optymalizacji swojej strony internetowej napotkałeś się z problemem cachowania plików w celu przyspieszenia ładowania strony, to z pomocą tego tekstu będziesz w stanie osiągnąć wspaniałe rezultaty. Dowiesz się jak cachować pliki pochodzące z Twojego serwera oraz jak cachować pliki pochodzące z zewnętrznych źródeł. 2017-10-23 19:17:49 jak-zoptymalizowac-ladowanie-plikow-js-z-zewnetrznych-zrodel ckekeq7uo0004i3umft185ior 2017-10-23 19:17:49 2017-10-23 19:17:49 cjj7hec9s0152i3um0iqbfcsm Co Nowego w Wyrażeniach Regularnych https://jcubic.pl/2018/07/wyrazenia-regularne-nowosci-es2018.html

Co Nowego w Wyrażeniach Regularnych

Standard ES2018 czyli ES9 został zatwierdzony. W ramach tej wersji weszło kilka nowy funkcjonalności do wyrażeń\n regularnych czyli regexów (od angielskiego Regular Expressions).


Kliknij aby zobaczyć\n cały artykuł 2018-07-04 18:54:28 co-nowego-w-wyrazeniach-regularnych ckfdlon7c0009i3umeitx0nz4 2018-07-04 18:54:28 2018-07-04 18:54:28 cjjff2lao0159i3um9vhth5p2 Generatory i Iteratory wyższego poziomu https://jcubic.pl/2018/07/generatory-i-iteratory-wyzszego-poziomu.html

Generatory i Iteratory wyższego poziomu

Microprocesor

Ten wpis został\n zainspirowany filmikiem na YouTube na kanale FunFunFunction. @mpj omawia tylko iterator map, ja poszedłem o krok dalej i\n opisałem trójce funkcjonalnego programowania w JS czyli map, reduce oraz filter.


Kliknij aby zobaczyć cały artykuł 2018-07-10 08:11:30 generatory-i-iteratory-wyzszego-poziomu ckfdlon7c0009i3umeitx0nz4 2018-07-10 08:11:30 2018-07-10 08:11:30 @@ -1357,6 +1380,7 @@ cjlqynglk017mi3um4pbv0ggm 10 Ciekawych Bibliotek w JavaScript - Linki #2 https:/ cjmgjlw0g0189i3um2negb3bm FRONTEND CON 2018 zbliża się wielkimi krokami. Wśród gwiazd m.in. Harry Roberts https://jcubic.pl/2018/09/frontend-con-2018.html

FRONTEND CON 2018 zbliża się wielkimi krokami. Wśród gwiazd m.in. Harry Roberts

Grafika\n przedstawiająca technologie front-end jako superbaterów

Jeszcze tylko kilka tygodni dzieli nas od Frontend Con 2018! Patrząc na duży sukces zeszłorocznej edycji i\n listę ekspertów zaproszonych w tym roku spodziewamy się wydarzenia na światowym poziomie.

Frontend Con jest jedną z największych konferencji technicznych w Europie, w pełni\n poświęconej technologiom frontendowym. Tegoroczna edycja odbędzie się 4 i 5 grudnia, w kultowych wnętrzach warszawskiego Pałacu Kultury i Nauki.


Kliknij aby zobaczyć cały artykuł 2018-09-24 17:05:22 frontend-con-2018-zbliza-sie-wielkimi-krokami-wsrod-gwiazd-min-harry-roberts ckfdlon7c0009i3umeitx0nz4 2018-09-24 17:05:22 2018-09-24 17:05:22 cjmmfc7k8018fi3um4hj21wi0 Zakres blokowy w JavaScript https://jcubic.pl/2018/09/zakres-blokowy-javascript.html

Zakres blokowy w JavaScript

Grafika ze słowem kluczowe let oraz const
\n

Ponieważ wpis o funkcjach w JavaScript na moim blogu ma wysoką pozycje w Google, a opisuje jeden z celi korzystania z\n IIFE, czyli natychmiastowo-wywoływanych wyrażeń funkcyjnych w celu tworzenia zakresu zmiennych. Postanowiłem opisać\n krótko jak działa const oraz let, czyli zakres blokowy w JavaScript w wersji ES6 (czyli poprawnie ES2015).


Kliknij aby zobaczyć cały artykuł 2018-09-28 19:52:29 zakres-blokowy-w-javascript ckfdlon7c0009i3umeitx0nz4 2018-09-28 19:52:29 2018-09-28 19:52:29 cjmusmfao018pi3umd0m3cvwi 15 Pytań na rozmowę rekrutacyjną z React.js https://jcubic.pl/2018/10/pytania-rekrutacyjne-z-react.js.html

15 Pytań na rozmowę rekrutacyjną z React.js

Grafika wektorowa przedstwiająca osobę z laptopem i\n logo React.js

React.js jest to bardzo popularny framework JavaScript stworzony przez Facebook-a. W tym wpisie przedstawię 15 pytań, które uważam, mogłyby się pojawić\n na rozmowie kwalifikacyjnej, tym razem z React.js. Gdybym musiał rekrutować, to pewnie bym zadał któreś z tych pytań albo wszystkie.


Kliknij aby zobaczyć cały artykuł 2018-10-04 16:26:30 15-pytan-na-rozmowe-rekrutacyjna-z-reactjs ckfdlon7c0009i3umeitx0nz4 2018-10-04 16:26:30 2018-10-04 16:26:30 +cjs39jxcw01fmi3um508mh8av HOCki, klocki i Pokemony... https://przemuh.pl/hocki-klocki-i-pokemony/

...czyli krótka relacja z #41 spotkania meet.js Poznań. Zapraszam :)

Powrót na stare śmieci

Tym razem spotkanie odbyło się w starej, dobrej, sprawdzonej lokalizacji czyli w co-workingu +1 Za Bramką. Osobiście mi to bardzo odpowiada. Miejscówka w centrum, super dojazd ze wszystkich stron Poznania, bliskość potencjalnych pubów na afterek itp.

2019-02-13 14:01:08 hocki-klocki-i-pokemony ckh8coao00010i3umhqw2e6xc 2019-02-13 14:01:08 2019-02-13 14:01:08 cjnhm9a14019ei3um62uee283 15 Pytań na rozmowę rekrutacyjną z CSS https://jcubic.pl/2018/10/pytania-rekrutacyjne-css.html

15 Pytań na rozmowę rekrutacyjną z CSS

Grafika wektorowa przedstawiająca osobę z laptopem i tekst\n CSS w klamerkach

Były już pytania rekrutacyjne z JavaScript oraz React.js, tym razem 15 pytań, jakie bym zadał na rozmowie rekrutacyjnej z CSS. Takie pytania mogłyby się pojawić na rozmowie kwalifikacyjnej na stanowisko Front-End developer, na pewno by były któreś z tych, gdybym ja rekrutował albo\n weryfikował kandydata.


Kliknij aby zobaczyć cały artykuł 2018-10-20 15:47:01 15-pytan-na-rozmowe-rekrutacyjna-z-css ckfdlon7c0009i3umeitx0nz4 2018-10-20 15:47:01 2018-10-20 15:47:01 cj237ldsw00gpi3umf2hx8vod Kierunek: Web Developer – Front-end (cz. II) https://www.nettecode.com/kierunek-web-developer-front-end-cz-ii/

W poprzedniej części zajęliśmy się podstawami. Zaczęliśmy od zera i przeanalizowaliśmy czego warto się nauczyć, jeśli myślisz o karierze Front-End Developer’a. Skończyliśmy na zgłębianiu CSS, JavaScript zostawiając na kolejny artykuł. To dziś. Zapiski pochyłą...

\n

Artykuł Kierunek: Web Developer – Front-end (cz. II) pochodzi z serwisu NetteCode.

2017-04-29 11:53:56 kierunek-web-developer-front-end-cz-ii ckhnmdge00000i3um6batg2gk 2017-04-29 11:53:56 2017-04-29 11:53:56 cj0z3rads00bzi3umbhf14s0p Intense.js – framework dla gier HTML5 https://pawelochota.pl/2017/04/intense-js-framework-dla-gier-html5/

Na studiach byłem zafascynowany możliwościami HTML5 i chciałem pokazać, że nadaje się on nawet do tworzenia gier. Stworzyłem w tym celu własny framework i przyszedł czasy aby wypuścić go na szerokie wody. Niech inspiruje! Studia były dla mnie okresem w którym fascynowałem się zarówno nowymi możliwościami „webu” jak i czasem w którym byłem zapalonym graczem.

\n

Artykuł Intense.js – framework dla gier HTML5 pochodzi z serwisu Z podwórka programisty.

2017-04-01 10:15:46 intensejs-framework-dla-gier-html5 ck801ynig001pi3um28xx49z7 2017-04-01 10:15:46 2017-04-01 10:15:46 @@ -1365,6 +1389,8 @@ cj28wuefk00hdi3umgj318uu8 DSP: SMPlanner – tydzień 9. – Zaliczony & Przerwa ckgmsrek8028xi3um8sip4cwx Angular Circular Dependency https://wojciechszucko.com/angular-circular-dependency/

Jak uniknąć efektu circular dependency? Angular dostarcza nam prosty sposób na dynamiczne generowanie komponentów, ale czasami pojawia się.. Problem Załóżmy, że mamy dwa komponenty i serwis do dynamicznego renderowanie komponentów. Serwis posiada metodę render, która akceptuje typ komponentu jako argument np. OneComponent. OneComponent używa naszego serwisu do wyrenderowania komponentu TwoComponent, a komponent TwoComponent używa serwisu do wyrenderowania komponentu OneComponent. Ostrzeżenie circular dependency Dzieje się to, ponieważ OneComponent importuje TwoComponent, a TwoComponent importuje OneComponent. Chaos, prawda? Jakiś czas temu odkryłem ciekawy sposób na rozwiązanie tego problemu. W tym celu użyjemy InjectionsTokens i dodamy je do naszego komponentu jako providers. Stwórzmy COMPONENT_ONE_TOKEN…

\n

Artykuł Angular Circular Dependency pochodzi z serwisu Wojciech Szućko.

2020-10-23 21:59:23 angular-circular-dependency cki6eer4w001ri3umeoa347v0 2020-10-23 21:59:23 2020-10-23 21:59:23 cj2n49te000iri3um1pq4feek Git – co, gdzie, jak i dlaczego? [Materiały na start] https://www.nettecode.com/git-dlaczego-materialy-start/

Jeśli myślisz o programowaniu na poważnie, nie obędziesz się bez znajomości Git’a. Czym jest? Dlaczego warto się go nauczyć? Gdzie szukać materiałów na start? Gdzie szukać hostingu dla Twojego kodu? To i jeszcze więcej...

\n

Artykuł Git – co, gdzie, jak i dlaczego? [Materiały na start] pochodzi z serwisu NetteCode.

2017-05-13 10:16:21 git-co-gdzie-jak-i-dlaczego-materialy-na-start ckhnmdge00000i3um6batg2gk 2017-05-13 10:16:21 2017-05-13 10:16:21 cj2rl5z4w00j4i3um2jv04v70 DSP: SMPlanner – tydzień 10. Koniec? + Wielkie podsumowanie https://www.nettecode.com/dsp-smplanner-wielkie-podsumowanie/

Dziesięć, a właściwie jedenaście tygodni minęło naprawdę szybko. Bałam się jak to będzie, czy starczy mi czasu i wytrwałości, by rzeczywiście publikować po dwa razy w tygodniu, by rozwijać aplikację. A jednak! No, ale...

\n

Artykuł DSP: SMPlanner – tydzień 10. Koniec? + Wielkie podsumowanie pochodzi z serwisu NetteCode.

2017-05-16 13:20:20 dsp-smplanner-tydzien-10-koniec-wielkie-podsumowanie ckhnmdge00000i3um6batg2gk 2017-05-16 13:20:20 2017-05-16 13:20:20 +cjtocmsug01hui3um2gibaqt6 Czytając uszami... https://przemuh.pl/czytajac-uszami/ ...czyli jak zacząłem słuchać podcastów i audiobooków. 2019-03-25 12:50:13 czytajac-uszami ckh8coao00010i3umhqw2e6xc 2019-03-25 12:50:13 2019-03-25 12:50:13 +cj5rpu0ig00pfi3um4p13g884 Szybka powtórka z selektorów CSS https://fsgeek.pl/post/szybka-powtorka-z-selektorow-css/

Dziś chciałbym się pochylić nad całkowitymi podstawami CSS bez których nie dałoby się czegokolwiek ostylować. Selektory są używane cały czas podczas tworzenia stron i cały czas dochodzą nowe, które mają ułatwiać nam pracę. Również powoli szykują się selektory 4-tego poziomu, o których chcę napisać parę słów w drugiej części postu.\n

\n\n

Selektory klasy 1&2

\n\n

Klasa pierwsza i druga są to najbardziej znane selektory, które wykorzystujemy najczęściej. Są podstawą przy tworzeniu stron internetowych. Mamy tutaj następujące selektory:

\n\n
    \n
  • Element
    \nJako element możemy wstawić dowolny prawidłowy element z html np..: p, div, h1, header,footer. Następuje tutaj przypisanie styli do każdego elementu na naszej strony. Przykładowe zastosowanie np.: przypisanie czcionki do elementu body
    • \n
  • .nazwa-stylu /*.nazwa-stylu
    \nTutaj styl przypisujemy do konkretnej nazwy klasy, którą umieściliśmy w elemencie html pod atrybutem class. Bardzo często wykorzystywane w normalnej pracy.
    • \n
  • Element.nazwa-stylu
    \nBardziej szczegółowe przypisanie co do przedstawionego powyżej. Styl będzie przypisany tylko jeśli interesujący nasz element będzie posiadał atrybut class z wartością ‘nazwa-stylu’.
    • \n
  • #identyfikator / element#identyfikator
    \nPrzypisanie stylu do elementu, który posiada atrybut id z wartością identyfikator. Można też wcześniej podać typ elementu ale jak dla mnie jest to niepotrzebne ponieważ powinien istnieć tylko jeden element z konkretnym identyfikatorem. Również lepiej nie korzystać z tego tylko oprzeć stylowanie o klasy.
    • \n
\n\n

Stylowanie przy pomocy atrybutów

\n\n
    \n
  • Element[atrybut]
    \nElementy HTML mogą posiadać atrybuty, które precyzują jak element będzie się wyświetlać lub zachowywać. Pełną listę atrybutów dla każdego elementu możecie znaleźć tutaj. Korzystając z tego selektora można ostylować tylko elementy posiadające atrybut, który nas interesuje.
    • \n
  • Element[atrybut=“wartość”]
    \nTutaj właściwie nie ma co komentować. Jest to rozszerzenie selektora powyżej, który sprawdza również wartość.
    • \n
  • Element[atrybut ~=“wartość”]
    \nNiektóre atrybuty mogą przyjąć więcej niż jedną wartość. Kolejne wartości są oddzielane spacja np..: atrybut=“wartość1 wartość2 wartość wartosc3” itd.. Korzystając z tego selektora możemy przypisać styl jeśli jedną wśród tych wartości jest ta poszukiwana przez nas np.: wartość.
    • \n\n

  • Element[atrybut | =“wartość”]
    \nTen selektor jest ciekawy ponieważ przypisuje styl do elementu który posiada szukany przez nas atrybut z konkretną wartością lub też posiada wartość po której następuje myślnik i dalszy tekst np.: atrybut|=“komórka” znajdzie takie coś <element atrybut="komórka"> jak i coś takiego <element atrybut="komórka-1">

    \n\n

    Stylowanie przy pomocy położenia elementów

    • \n\n

  • Element1 Element2 / Element1 >> Element2(CSS 4)
    \nZapis ten oznacza, że styl zostanie przypisany do każdego Elementu2, który znajduje się wewnątrz Elementu1. W tym selektorze nie ma znaczenia jak głęboko znajduje się Element2. Do tej pory była wykorzystywana spacja by uzyskać ten efekt ale w CSS4 zostanie wprowadzony symbol ‘>>’ który będzie tak samo interpretowany przez przeglądarki

    • \n\n

  • Element1 > Element2
    \nEfekt jest podobny do powyższego selektora z pewną różnicą. Element2 zostanie ostylowany tylko jeśli jest bezpośrednim dzieckiem Elementu1. Jeśli jest gdzieś niżej w hierarchii to nie zosatnie ostylowany
    \nStyl: p > h1

    \n\n
    <p>\n    <h1>Ten zostanie ostyloway</h1>\n    <div>\n        <h1>Ten już nie</h1>\n    </div>\n<p>\n
    • \n\n

  • Element1 + Element2
    \nTutaj Element2 zostanie ostylowany o ile jest położony bezpośrednio po Element1 i mają wspólnego rodzica
    \nStyl: p+h1

    \n\n
    <p>\n</p>\n<h1>Ten zostanie ostyloway</h1>\n<h1>Ten już nie</h1>\n
    • \n
\n\n

Stylowanie przy pomocy pseudoklas

\n\n

Następne parę elementów jest określane jako pseudoklasy i w pewien sposób pozwalają kontrolowaac zachowanie elementów lub też ich położenie

\n\n
    \n
  • a:link
    \nW ten sposób możemy ostylować link, który nie został jeszcze odwiedzony.
    • \n
  • a:visited
    \nDotyczy linku, który został przez nas odwiedzony. Dobrze to widać np.: w Google’u gdie odwiedzone linki zmieniają kolor. W zależności od przeglądarki po pewnym czasie linki tracą atrybut visited.
    • \n
  • element:active
    \nW ten sposób możemy ostylować elementy które zosatły aktywowane przez użytkowników np.: kliknął w link ale nie puścił jeszcze przycisku myszy co pozwoliłoby mu przejść na inną stronę. Co znaczy dla elementu być aktywnym możecie znaleźć tutaj
    • \n
  • Element:hover
    \nElement otrzymuje klasę hover w momencie gdy użytkownik umieści kursor myszki nad elementem.
    • \n
  • Element:focus
    \nZa pomocą tej pseudoklasy możemy określić jak ma się zachowywać element gdy zostanie na niego nałożony focus. Dzieje się to na przykład gdy klikniemy na pole input lub też przechodzimy po stronie za pomocą przycisku tab. Dzięki odpowiedniemu wykorzystaniu tej klasy pomagamy użytkownikom w poruszaniu się po stronie.
    • \n\n

  • Element:first-child
    \nFirst-child pozwala przypisać styl do pierwszego dziecka danego typu dla danego rodzica. Może być wykorzystywany z selektorami położenia które zostały opisane przed chwilą lub też samodzielnie np..:
    \nStyl: div > h1:first-child

    \n\n
    <div>\n    <h1>Ten zostanie ostyloway</h1>\n    <h1>Ten już nie</h1>\n</div>\n<h1>Ten już nie</h1>\n
    \n\n

    Styl: h1:first-child

    \n\n
    <body>\n    <h1>Ten zostanie ostyloway</h1>\n    <h1>Ten już nie</h1>\n<div>\n    <h1>Ten zostanie ostyloway</h1>\n    <h1>Ten już nie</h1>\n    <p>\n        <h1>Ten zostanie ostyloway</h1>\n    </p>\n</div>\n</body>\n
    • \n
\n\n

To by było na tyle w pierwszej części posta. Początkowo chciałem opisać wszystkie dostępne selektory w jednej części ale jak zobaczyłem ile tego wychodzi to uznałem, że lepiej będzie to podzielić. W następnym poście będzie ciekawiej ponieważ opisze seleketory klasy 3 oraz postaram się opisać te nadchodzące z klasy 4.

2017-07-31 05:30:07 szybka-powtorka-z-selektorow-css ckhxjb6o0000yi3umb3hg09jv 2017-07-31 05:30:07 2017-07-31 05:30:07 cj2x13cfk00jki3um74wv3nvi Studia informatyczne – tak czy nie? https://www.nettecode.com/studia-informatyczne-tak-czy-nie/

Jeden z najczęściej poruszanych tematów na wszelkiego rodzaju grupach programistycznych, do których dołączają nowe osoby zainteresowane tematyką programowania. W dodatku jeden z bardziej burzliwych. Sama już nie raz przedstawiałam swoje stanowisko w tej sprawie....

\n

Artykuł Studia informatyczne – tak czy nie? pochodzi z serwisu NetteCode.

2017-05-20 08:45:02 studia-informatyczne-tak-czy-nie ckhnmdge00000i3um6batg2gk 2017-05-20 08:45:02 2017-05-20 08:45:02 cj4ibqdrc00ngi3um9vvza7yj DSP 2017 – Podsumowanie udziału w konkursie (IV miejsce!) https://www.nettecode.com/dsp-2017-podsumowanie-udzialu-w-konkursie-iv-miejsce/

Z czym ja tu dzisiaj wylatuje? Konkurs skończył się prawie miesiąc temu. Gala finałowa i ogłoszenie zwycięzców miała miejsce już ponad tydzień temu, a mi się zebrało na podsumowanie… I to jeszcze po raz...

\n

Artykuł DSP 2017 – Podsumowanie udziału w konkursie (IV miejsce!) pochodzi z serwisu NetteCode.

2017-06-29 11:05:45 dsp-2017-podsumowanie-udzialu-w-konkursie-iv-miejsce ckhnmdge00000i3um6batg2gk 2017-06-29 11:05:45 2017-06-29 11:05:45 cj4l9p8mw00nni3um7uml780a Junior Frontend Developer – analiza ofert pracy pod kątem stawianych wymagań https://www.nettecode.com/junior-frontend-developer-analiza-ofert-pracy/

Jakie wymagania spotkasz w ogłoszeniach o pracę na stanowisku Junior Frontend Developer’a?  Co jest Twoim MUST HAVE, co warto poznać? Jaki wymagania są wspólne dla wielu ofert pracy, czym mogą się różnić? To i...

\n

Artykuł Junior Frontend Developer – analiza ofert pracy pod kątem stawianych wymagań pochodzi z serwisu NetteCode.

2017-07-01 12:32:11 junior-frontend-developer-analiza-ofert-pracy-pod-katem-stawianych-wymagan ckhnmdge00000i3um6batg2gk 2017-07-01 12:32:11 2017-07-01 12:32:11 @@ -1375,6 +1401,7 @@ cj0v3uzn400bki3umheezaqkt Daj Się Poznać 2017 [tydzień #5] – miesiąc za na cj11tss4000cfi3umavil5v4b Mój pierwszy webowy projekt z 2007 roku http://webroad.pl/inne/6740-moj-pierwszy-webowy-projekt-rok-2007 Śledzę na bieżąco konkursowego feeda Daj Się Poznać. Dobrych kilka dni temu zapisałem sobie link do pewnego wpisu, w którym autor przedstawił zrzuty ekranu swoich starych projektów. Przeczytałem go dzisiaj z pewną nostalgią, a przypomniały mi się moje pierwsze kroki w świecie web-dev (choć w prawdzie uważam, że raczej nie można tych prób zakwalifikować ani do […] 2017-04-03 08:00:18 moj-pierwszy-webowy-projekt-z-2007-roku ckir2fk800008i3um9c21fesl 2017-04-03 08:00:18 2017-04-03 08:00:18 cj1398p3c00cli3umb92whhus Entity Framework i podejście code-first w ASP.NET MVC – pierwsze kroki http://webroad.pl/aspnet/6582-entity-framework-i-podejscie-code-first-w-aspnet-mvc W dzisiejszym wpisie chciałbym przedstawić Ci podejście code-first, z wykorzystaniem Entity Framework. Jest to bardzo prosty i przyjemny sposób projektowania logiki aplikacji oraz powiązanej z nią struktury bazy danych. Możliwości, jaki daje to podejście wykorzystuję w projekcie todo.team. Temat ten podzieliłem na trzy osobne posty. Dzisiaj opowiem Ci o tworzeniu encji, konfiguracji EF i uruchomieniu pierwszej […] 2017-04-04 08:00:21 entity-framework-i-podejscie-code-first-w-aspnet-mvc-pierwsze-kroki ckir2fk800008i3um9c21fesl 2017-04-04 08:00:21 2017-04-04 08:00:21 cj13su80g00cpi3umhqjp9bva Hej, 4Developers, było super! Relacja z konferencji http://webroad.pl/konferencje/6770-relacja-z-4developers-2017 Na wstępie chciałbym bardzo podziękować organizatorom za zaproszenie na 4Developers i możliwość objęcia przez webroad.pl patronatu medialnego nad całą konferencją. Nie zawiodłem się. Jak co roku było to niesamowicie wartościowe wydarzenie, na którym bywają największe gwiazdy programistycznego świata. Udało mi się nawiązać nowe znajomości oraz odnowić te istniejące. Dowiedziałem się wielu nowych rzeczy, które z […] 2017-04-04 17:08:58 hej-4developers-bylo-super-relacja-z-konferencji ckir2fk800008i3um9c21fesl 2017-04-04 17:08:58 2017-04-04 17:08:58 +cj62dz26w00pti3um638j93or Jak pisać kod by po tobie nie przeklinali? https://fsgeek.pl/post/jak-pisac-kod-by-inni-nie-przeklinali/

Długość życia kodu oraz programów jest długi. Powoduje to często, że osoby które zaczynały go pisać i znają go od podszewki nie prowadzą go do końca. Myślę, że każdy programista z dłuższym stażem dostał kod nad którym miał ochotę przeklinać ponieważ był nieczytelny, zagmatwany i praca z nim to była udręka. Dziś chciałbym się pochylić nad rzeczami które najczęściej wkurzają i jak nim zapobiegać by inni nie musieli po nas przeklinać.\n\n1. Długi kod
\n Chyba nie ma nic gorszego niż projekt, który próbujesz zrozumieć i trafiasz na metody które liczą po kilkadziesiąt lub nawet kilkaset linijek. Jest to według mnie rzecz, która odrzuca od projektu na samym początku. Co z tego, że autor potrafił się w tym odnaleźć, skoro to nie on musi w nim teraz pracować. Dlatego podczas pisania kodu, starajmy się aby było on możliwie jak najmniejszy. Jeśli widzimy że coś możemy wydzielić i użyć w innym miejscu zróbmy to bez zastanowienia. Takie coś się zwróci w przyszłości z nawiązką.\n2. Magic numbers
\n Kolejna rzecz, która potrafi przyprawić o ból głowy czyli pojawiające się nagle w kodzie jakieś liczby. Niech pierwszy rzuci kamieniem kto nie spotkał w kodzie wolnostojących liczb i zastanawiał się co one robią, po co i dlaczego akurat taka wartość. Czasami można znaleźć w takim kodzie informacje w komentarzu ale jest niebezpieczeństwo, że informacja tam jest nieaktualna. Dużo lepszym pomysłem jest umieszczenie takich liczb w stałych którym nadamy odpowiednie nazwy. Dużo lepiej wygląda takie coś
\n \n rows = ITEMS_NUMBER/ ITEMS_PER_ROW\n
\n Od czegoś takiego
\n \n rows = 50 / 4 \n
\n Kolejną zaletą jest łatwość zmiany takiej wartości jeśli występuje kilka razy w kodzie.\n3. Brak testów
\n Tego chyba najbardziej brakuje podczas wchodzenia do nowego projektu kiedy nie znamy struktury i wszystkich zależności. Bez testów ciężko sprawdzić czy czegoś przez przypadek nie zepsuliśmy. Można powiedzieć, że wtedy błądzimy we mgle. Dobrze napisane testy nie tylko pomagają nam podczas tworzenia oprogramowania ale również ułatwiają dodawanie nowych funkcjonalności.\n4. Brak Readme
\n Zanim zaczniemy dłubać w kodzie musimy postawić całe środowisko. Aktualnie gdy używamy w większości Dockera może to być skomplikowane i wtedy dobry plik Readme jest na wagę złota. Warto go pisać ponieważ znowu to co jest dla nas oczywiste nie musi takie być dla innych. Jeszcze gorszym przypadkiem jest nieaktualny plik, który został napisany na starcie projektu ale nie był aktualizowany a architektura zdążyła się już kilka razy zmienić. Może to poważnie spowolnić postawienie środowiska. Nie zaniedbujmy pliku Readme tylko aktualizujmy wraz z rozwojem aplikacji tak aby nowa osoba była w stanie na jego podstawie postawić nowy projekt\n5. Niekompletne fixtures
\n No i na koniec coś co jest związane z poprzednim punktem a mianowicie fixtures czyli fałszywe dane. Jest to bardzo wygodna rzecz ponieważ możemy sobie w prosty sposób wygenerować poprawne dane dla naszej aplikacji. I wszystko jest dobrze o ile kod generujący fałszywe dane rozrasta się wraz z rozwojem naszej aplikacji i bazy danych. Jeśli tak się nie dzieje próba wygenerowania fixtures może się skończyć błędem i zostaniemy bez żadnych przykładowych danych. Dbanie o fixtures daje również poczucie bezpieczeństwa ponieważ nawet jeśli coś przekombinujemy podczas pisania kodu to możemy przywrócić sobie czystą bazę danych.

\n\n

A wy coś byście jeszcze dodali do listy? Co was najbardziej denerwuje jak dołączacie do istniejącego kodu? Zastanawialiście się kiedyś co by można było poprawić by inni nie marudzili na nasz kod? Zapraszam do komentowania.

2017-08-07 16:43:35 jak-pisac-kod-by-po-tobie-nie-przeklinali ckhxjb6o0000yi3umb3hg09jv 2017-08-07 16:43:35 2017-08-07 16:43:35 cj14w0lxk00cti3um5t7a2crf Daj Się Poznać 2017 [tydzień #6] – jak ten czas szybko leci! http://webroad.pl/inne/6794-dsp2017-jak-ten-czas-szybko-leci-tydzien6 Za tydzień już właściwie półmetek, przynajmniej ten czasowy, prac nad aplikacją pisaną na potrzeby konkursu #dajsiepoznac. Ten tydzień był mocno okrojony, ze względu na to, że wypadły mi właściwie trzy dni na wizytę w Warszawie na konferencji 4Developers. Nie był to jednak czas zmarnowany. Z kilku prelekcji wyniosłem technologiczną wiedzę, którą postaram się wdrożyć w […] 2017-04-05 11:25:41 daj-sie-poznac-2017-tydzien-6-jak-ten-czas-szybko-leci ckir2fk800008i3um9c21fesl 2017-04-05 11:25:41 2017-04-05 11:25:41 cj194f0qg00d8i3um1umn58es Napotkał mnie konflikt różnych wersji zależności. Jak sobie z tym poradziłem? http://webroad.pl/aspnet/6801-napotkal-mnie-konflikt-roznych-wersji-zaleznosci-jak-sobie-z-tym-poradzilem Podczas mojego pierwszego, testowego wdrożenia aplikacji do Azure napotkały mnie ostrzeżenia dotyczące konfliktu różnych wersji zależności. Odpalając todo.team lokalnie w zasadzie je ignorowałem. Przy kompilowaniu rozwiązania już w Azure zaczął robić się problem. Oprócz jasno brzmiącej regułki nie miałem żadnego odniesienia do powodującej konflikt referencji. Przeklikiwanie przez wszystkie to strata czasu. Jak więc sobie poradziłem […] 2017-04-08 10:31:55 napotkal-mnie-konflikt-roznych-wersji-zaleznosci-jak-sobie-z-tym-poradzilem ckir2fk800008i3um9c21fesl 2017-04-08 10:31:55 2017-04-08 10:31:55 cj1bplq0w00dmi3umbpap0zhc Wszystkie kursy wraz z dołączonymi do nich ebookami tańsze o 30% na Videopoint http://webroad.pl/inne/6831-wszystkie-kursy-wraz-z-dolaczonymi-do-nich-ebookami-tansze-o-30-na-videopoint Zbliżają się Święta Wielkiej Nocy, więc to dobry czas na wszelkiego rodzaju promocje. W dniach 10.04 – 12.04 na videopoint.pl dostępne będą kursy z dołączonymi ebookami, obniżone w sumie o 30%. Jeśli nie masz pomysłu na wielkanocny upominek dla bliskiego web-deva, problem uważam rozwiązany! :-) Wybrane pakiety Google AdWords. Kurs video. Skuteczne kampanie reklamowe AdWords 360°. […] 2017-04-10 06:00:32 wszystkie-kursy-wraz-z-dolaczonymi-do-nich-ebookami-tansze-o-30-na-videopoint ckir2fk800008i3um9c21fesl 2017-04-10 06:00:32 2017-04-10 06:00:32 @@ -1385,6 +1412,7 @@ cj1exw34o00e1i3umahk95zv0 Daj Się Poznać 2017 [tydzień #7] – półmetek htt cjqwvizf401dpi3um9b4iexlm Tech.3camp – zapraszam! https://nowoczesny-frontend.pl/tech-3camp-zapraszam/

Już jutro, czyli 15 stycznia 2019 o godzinie 18:00 w O4 Coworking (Olivia Business Centre), odbędzie się 51 spotkanie z serii Tech.3camp. Program zapowiada się bardzo ciekawie: 18:00 – 18:30 – Maciej Walczak – „Single source of truth” – czyli zarządzanie stanem aplikacji na przykładzie Vue i Vuex 18:30 – 19:00 […]

\n

Artykuł Tech.3camp – zapraszam! pochodzi z serwisu Nowoczesny Frontend.

2019-01-14 22:02:10 tech3camp-zapraszam ckcv2snww001ei3um3wmeeaom 2019-01-14 22:02:10 2019-01-14 22:02:10 cj1paf47400fai3um2xwub2qf Daj Się Poznać 2017 [tydzień #8] – świąteczne rozluźnienie http://webroad.pl/inne/6910-dsp2017-swiateczne-rozluznienie-tydzien8 Pewnie jak i wielu z Was, dałem się ponieść świątecznemu rozluźnieniu. Zmiany commitowałem jeszcze w sobotę, jednak przez całą Wielkanoc, aż do dzisiaj nie spojrzałem na klawiaturę. Na szczęście taką przerwę wliczyłem w szacowany czas na przygotowanie aplikacji, więc nie ma się czym martwić, ale cieszyć komputerowym odwykiem przez tych kilka dni. Co ciekawego wydarzyło […] 2017-04-19 18:04:16 daj-sie-poznac-2017-tydzien-8-swiateczne-rozluznienie ckir2fk800008i3um9c21fesl 2017-04-19 18:04:16 2017-04-19 18:04:16 cj1qohe5400ffi3umhx1z29bq Jak przechowywać wrażliwe dane i nie wrzucać ich na GitHub? Na przykładzie ASP.NET MVC http://webroad.pl/aspnet/6908-jak-przechowywac-wrazliwe-dane-i-nie-wrzucac-ich-na-github-na-przykladzie-asp-net-mvc Każda większa aplikacja będzie w końcu musiała mieć wbudowane wrażliwe dane w swój kod. Jak podejść do tematu, zachowując się odpowiedzialnie? Tego dowiesz się w dzisiejszym wpisie, napisanym pod wpływem chwili, kiedy sam się nad tym zastanawiałem. W moim przypadku były to dane dostępowe do serwera SMTP, które musiałem gdzieś umieścić, podczas budowania serwisu do […] 2017-04-20 17:25:43 jak-przechowywac-wrazliwe-dane-i-nie-wrzucac-ich-na-github-na-przykladzie-aspnet-mvc ckir2fk800008i3um9c21fesl 2017-04-20 17:25:43 2017-04-20 17:25:43 +ck4b8c0rs01uei3umffvg8zwm 3 kroki do niesamowitych raportów z testów w Cypress https://przemuh.pl/3-kroki-do-niesamowitych-raportow-z-testow-w-cypress/ Z tego wpisu dowiecie się jak wygenerować awwwwwwwwwwwsome HTML raport z testów napisanych w Cypressie - wzbogacając go o zrzut ekranu w momencie, kiedy Wasz test nie przeszedł. 2019-12-18 11:45:37 3-kroki-do-niesamowitych-raportow-z-testow-w-cypress ckh8coao00010i3umhqw2e6xc 2019-12-18 11:45:37 2019-12-18 11:45:37 cj1us60ag00fqi3um9w940sua Jedna książka za darmo przy zakupie dwóch w Helionie z darmową dostawą z okazji Światowego Dnia Książki i Praw Autorskich http://webroad.pl/inne/6930-jedna-ksiazka-za-darmo-przy-zakupie-dwoch-w-helionie-z-darmowa-dostawa-z-okazji-swiatowego-dnia-ksiazki-i-praw-autorskich Uwielbiam takie promocje, kiedy mogę tanio uzupełnić swoją informatyczną biblioteczkę. Z okazji Światowego Dnia Książki i Praw Autorskich na Helionie została uruchomiona promocja, dzięki której przy zakupie dwóch książek lub ebooków, drugą pozycję otrzymujesz za darmo. Dodatkowym atutem jest darmowa dostawa do Paczkomatu lub Pocztą Polską. Wow! Jak to zwykle bywa przy takich okazjach, przygotowałem dla Ciebie zestawy, […] 2017-04-23 14:19:55 jedna-ksiazka-za-darmo-przy-zakupie-dwoch-w-helionie-z-darmowa-dostawa-z-okazji-swiatowego-dnia-ksiazki-i-praw-autorskich ckir2fk800008i3um9c21fesl 2017-04-23 14:19:55 2017-04-23 14:19:55 cj1yoxhaw00g9i3umhhymfsza Daj Się Poznać 2017 [tydzień #9] – MVP na horyzoncie http://webroad.pl/inne/6943-dsp2017-mvp-na-horyzoncie-tydzien9 Małymi krokami zaczyna wyłaniać się właściwie już MVP projektu todo.team, co bardzo mnie cieszy. Gdzieś w 90% ukończyłem moduł zespołów, a obecnie na tapecie mam projekty. Na szczęście nie są to ciężkie rzeczy do napisania, obie funkcjonalności tworzą rozbudowany system kategoryzacji zadań w panelu użytkownika. Szczegółowe informacje, jak zwykle we wpisie podsumowującym. Zapraszam do lektury i […] 2017-04-26 08:00:23 daj-sie-poznac-2017-tydzien-9-mvp-na-horyzoncie ckir2fk800008i3um9c21fesl 2017-04-26 08:00:23 2017-04-26 08:00:23 cj27b3ms800h7i3umdymo50fa Envato rozdaje swoje produkty w ofercie majowej za ponad 200zł http://webroad.pl/inne/6958-envato-rozdaje-swoje-produkty-w-ofercie-majowej-za-ponad-200zl Zaczął się kolejny, miejmy nadzieję – ciepły – miesiąc tego roku. Dzisiaj krótko i na temat. Do pobrania trzy ciekawe produkty od Themeforest, Videohive i Codecanyon. Szablon od Themeforest Pobierz produkt Zobacz on-line Facebook Messenger od Codecanyon Pobierz produkt Zobacz on-line Szablon wideo od Videohive   Jeśli prowadzisz swój vlog lub kanał z kursami wideo, możesz wykorzystać […] 2017-05-02 08:43:11 envato-rozdaje-swoje-produkty-w-ofercie-majowej-za-ponad-200zl ckir2fk800008i3um9c21fesl 2017-05-02 08:43:11 2017-05-02 08:43:11 @@ -1395,6 +1423,7 @@ cj2t18fug00j9i3umcstf2475 Zapraszam Cię na WordCamp Lublin 2017 http://webroad. cj2t63doo00jai3umfxz5832w Daj Się Poznać 2017 [tydzień #12] – ostatki http://webroad.pl/inne/7015-dsp2017-ostatki-tydzien12 Pracuję obecnie nad ostatnimi widokami użytkownika. Tak, to naprawdę ostatki! Dalej zostanie mi już tylko dopieszczanie pierwszej wersji aplikacji, wdrożenie do chmury Azure i oddanie tego co przygotowałem na testy dla poszczególnych, chętnych użytkowników. Nie licząc dnia wczorajszego, nad kodem todo.team spędziłem w mijającym tygodniu dobrych kilka godzin. Zapraszam na podsumowanie. Widok projektu Było to trochę […] 2017-05-17 15:53:57 daj-sie-poznac-2017-tydzien-12-ostatki ckir2fk800008i3um9c21fesl 2017-05-17 15:53:57 2017-05-17 15:53:57 cj31syi3400k1i3umgmw595tp DeployStack – skompletuj potrzebne usługi dla Twojego projektu http://webroad.pl/blogroll/7033-deploystack-skompletuj-potrzebne-uslugi-dla-twojego-projektu Na stronie DeployStack.io w prosty sposób skompletujesz potrzebne usługi, dzięki którym uruchomisz swój projekt. Ogranicza Cię zasobność portfela? Żaden problem! Wyszukiwarka sprawi, że odnajdziesz takie elementy, na które Cię stać. W zależności od potrzeb. 2017-05-23 16:56:10 deploystack-skompletuj-potrzebne-uslugi-dla-twojego-projektu ckir2fk800008i3um9c21fesl 2017-05-23 16:56:10 2017-05-23 16:56:10 ckgt783480294i3umhf3ehhbm Porównanie RxJS Subjects https://wojciechszucko.com/porownanie-rxjs-subjects/

W bibliotece RxJS występuje 5 rodzajów Subject. Warto wiedzieć, że wszystkie z nich są typem Observable i różnią się tym od zwykłego Observable, że wszystkie subskrypcje otrzymują wyemitowaną wartość w strumieniu w tym samym momencie tzw. multicast. Rodzaje Wśród nich możemy wyróżnić: Subject, BehaviorSubject, ReplaySubject, AsyncSubject oraz WebSocketSubject. Każdy z nich charakteryzuję się innym zachowaniem. Między innymi posiadają wartość początkową, emitują wartości dopiero, gdy strumień zostanie zamknięty lub przy subskrypcji emitują n ilości poprzednio wyemitowanych wartości. Subject Jest punktem wyjścia dla innych rodzajów. Ciekawostką jest, że Subject może zostać użyty również jako observer czyli obiekt przekazany do funkcji subscribe(), ponieważ…

\n

Artykuł Porównanie RxJS Subjects pochodzi z serwisu Wojciech Szućko.

2020-10-28 09:30:53 porownanie-rxjs-subjects cki6eer4w001ri3umeoa347v0 2020-10-28 09:30:53 2020-10-28 09:30:53 +cj6ejsww000q8i3umensi4w09 Programowanie w szkołach - czy to wyjdzie? https://fsgeek.pl/post/programowanie-w-szkolach/

Powoli zbliża się wrzesień, nowy rok szkolny i pierwszy rok reformy edukacji. Jedną z nowości wprowadzonych do szkół jest nauka programowania w szkołach podstawowych. Jednak czy jest to dobry pomysł? Czy mamy na to warunki? Czy każdego da się nauczyć programowania?\n

\n\n

Lekcje informatyki w szkołach?

\n\n

Jako, że jestem ciągle dosyć młody to pamiętam lekcje informatyki w szkole i muszę z przykrością stwierdzić, że nie były one wysokich lotów. Lekcje były nijakie, nie pokazywały nic ciekawego, były właściwie przedłużeniem przerwy. Podręczniki do tego przedmiotu były podobne do lekcji. Nie pamiętam czy była jakaś różnica w programie szkoły podstawowej(gdzie podstawy są na miejscu) i gimnazjum(gdzie powinny być już rzeczy bardziej zaawansowane). Zmieniło się to dopiero w technikum informatycznym gdzie była odpowiednia kadra. Pamiętam, że na pierwszych zajęciach z informatyki prowadzący powiedział nam, że jeśli myślimy, że znamy Worda, Excela, Accessa to się mylimy. I miał rację. Każda lekcja była ciężka, wymagająca i pokazywała za każdym razem nowe rzeczy. A więc da się. Tylko do tego potrzeba osób, które się znają na informatyce a nie tylko ukończyły kurs podyplomowy by móc jej uczyć ponieważ to nie jest to samo. Bardzo często nauczyciele w podstawówce, gimnazjum są tylko po takim kursie i potrafią prowadzić lekcje tylko z podręcznikiem. Ze świecą szukać osób, które naprawdę się znają i potrafią nie tylko wytłumaczyć a zarazić swoją pasją.

\n\n

Programowanie na zajęciach

\n\n

I teraz do podstawy programowej ma trafić nauka programowania, które nie jest najłatwiejszą dziedziną informatyki i nie da się tego nauczać jeśli się samemu tego nie rozumie. Wszystko też zależy co będzie rozumiane pod hasłem programowanie. Na przykład taki Scratch może być idealnym pomysłem dla podstawówki ale także i tutaj trzeba ucznia zainteresować tematem bo wtedy będą najlepsze efekty. A ciężko to zrobić jeśli się słabo to rozumie lub nawet w ogóle. Tak samo na kolejnych etapach edukacji przy wprowadzaniu(zapewne) bardziej skomplikowanych zagadnień potrzeba osób, które się na tym znają. I teraz pytanie brzmi ile osób które aktualnie nauczają informatyki w podstawówce i gimnazjum będą w stanie uczyć i zainteresować ucznia tematem programowania?

\n\n

Czy wszyscy muszą się uczyć programowania?

\n\n

Jednak najważniejsze pytanie jakie chodzi mi po głowie to czy musi to być obowiązkowe? Nic nie potrafi zniechęcić do siebie jak obowiązek robienia czegoś. Szczególnie w połączeniu z nieciekawymi zajęciami takie obowiązkowe nauczanie programowania może bardziej zniechęcić niż zachęcić. Zgadzam się, że programowanie wymaga logicznego myślenia, rozwiązywania problemów, widzenia pewnych wzorców postępowań i kojarzenia ze sobą faktów. Są to bardzo potrzebne umiejętności w dzisiejszych czasach ale nie jestem pewien czy wprowadzenie programowania dla wszystkich jest dobrym pomysłem.

\n\n

Czy jest to ostatecznie dobry pomysł?

\n\n

I to jest właściwie najcięższe pytanie na które chciałbym odpowiedzieć tak ale nie jestem tego pewien. Z jednej strony jako programista chciałbym żeby to się udało, ponieważ na papierze pomysł wygląda na dobry i jest to jakiś krok naprzód w stosunku do tego jak informatyka wygląda do tej pory. Z drugiej strony jednak wiem, że część(jak nie większość) nauczycieli nie jest przygotowana by móc to w dobry i przystępny sposób przedstawić uczniom, zadawać im ciekawe rzeczy do robienia i odpowiadać na pytania. Czas pokaże czy wprowadzenie programowania cokolwiek zmieni czy będzie tak jak dotychczas.

\n\n

A wy co sądzicie o wprowadzeniu programowania do lekcji informatyki w szkole. Pomysł dobry czy zły? Wyjdzie czy okaże się totalną klapą? Zapraszam do dyskusji w komentarzach.

2017-08-16 05:00:00 programowanie-w-szkolach-czy-to-wyjdzie ckhxjb6o0000yi3umb3hg09jv 2017-08-16 05:00:00 2017-08-16 05:00:00 ckhi21hzk02a3i3umdrd26n0o Angular – Enkapsulacja styli https://wojciechszucko.com/angular-enkapsulacja-styli/

Nadpisywanie styli podczas pisania aplikacji webowych to problem, z którym spotkał się nie jeden początkujący jak i doświadczony programista. Jak to się dzieje, że style w Angularze nie kolidują ze sobą? Jest to możliwe dzięki ich odpowiedniej enkapsulacji. Czym jest enkapsulacja? Enkapsulacja (inaczej hermetyzacja) polega na ukrywaniu danych – w tym przypadku styli w obrębie danego komponentu tak, aby nie były one dostępne na zewnątrz niego. Jak to działa? Dekorator Component w obiekcie konfiguracyjnym (obiekt, który podajemy jako argument) przyjmuje pole o nazwie encapsulation typu ViewEncapsulation. ViewEncapsulation W enumie mamy do wyboru 4 wartości: Emulated, None, ShadowDom i Native (wychodzący…

\n

Artykuł Angular – Enkapsulacja styli pochodzi z serwisu Wojciech Szućko.

2020-11-14 19:00:02 angular-enkapsulacja-styli cki6eer4w001ri3umeoa347v0 2020-11-14 19:00:02 2020-11-14 19:00:02 ckhjbasb402a4i3um1zt1c6lf Formaty grafik – WebP i AVIF https://wojciechszucko.com/formaty-grafik-webp-i-avif/

Na przestrzeni lat powstało wiele formatów grafiki takich jak: JPEG, GIF czy PNG, które wykorzystujemy tworząc nasze strony i aplikacje internetowe. W tym artykule przybliżę dwa z nich: WebP i AVIF – powstały one relatywnie niedawno. WebP Google w 2010 roku opublikowało format WebP, który jest 25% lżejszy od najpopularniejszych formatów takich jak JPEG czy PNG. Oczywiście, aby móc z nimi konkurować obsługuje kanał przezroczystości. Warto zauważyć, że posiada dwa tryby: stratny i bezstratny. Jeśli możemy sobie pozwolić na tryb stratny to WebP może być nawet 3x mniejsze niż PNG. Obecnie (stan na listopad 2020) obsługiwany format przez większość przeglądarek takich…

\n

Artykuł Formaty grafik – WebP i AVIF pochodzi z serwisu Wojciech Szućko.

2020-11-15 16:06:58 formaty-grafik-webp-i-avif cki6eer4w001ri3umeoa347v0 2020-11-15 16:06:58 2020-11-15 16:06:58 cjazdikpk00vxi3um3lmshh8c Done vs. to do – tworzymy model pojedynczego zadania https://www.nettecode.com/tworzymy-model-zadania/

W poprzednich artykułach stworzyliśmy nasz pierwszy komponent dla aplikacji – listę „to do” oraz dodaliśmy do niej zadania. W aplikacjach tego typu często poza listą „do zrobienia”, mamy również listę „zrobione”. Jak wykorzystać dotychczas stworzone komponenty i rozszerzyć aplikację o drugą listę? Wymagania wstępne: Spisane w formie checklisty (do wydrukowania bądź podglądu/importu jako szablon Nozbe): […]

\n

Artykuł Done vs. to do – tworzymy model pojedynczego zadania pochodzi z serwisu NetteCode.

2017-12-09 13:25:59 done-vs-to-do-tworzymy-model-pojedynczego-zadania ckhnmdge00000i3um6batg2gk 2017-12-09 13:25:59 2017-12-09 13:25:59 @@ -1402,6 +1431,7 @@ ckhut074802aii3um8qws35ut Jak usuwać style oraz skrypty, pobierane przez wtycz cki7npo3k02b0i3um3if42cj3 Własne bloki w WordPress Gutenberg #002 – właściwości, własne kategorie bloków i style CSS https://blog.robertorlinski.pl/2020/12/02/wordpress-gutenberg-002/ Kolejna część naszego cyklu i tym samym kolejne elementy, które warto będzie przyswoić w kontekście tworzenia komponentów WordPress Gutenberga. To, co chciałbym Ci dziś pokazać, to: Za co odpowiadają poszczególne podstawowe właściwości, niezbędne do działania konkretnego bloku. Jak tworzyć własne kategorie bloków Gutenberga. Jak korzystać z plików SCSSa, podczas ich tworzenia. Jak podpinać arkusze CSS (napisane przez siebie […] 2020-12-02 17:00:56 wlasne-bloki-w-wordpress-gutenberg-002-wlasciwosci-wlasne-kategorie-blokow-i-style-css ckig8bkw0000zi3umgy3obxsr 2020-12-02 17:00:56 2020-12-02 17:00:56 ckig8bkw002b8i3um96oxd27k Jak używać wartości z WordPressa, w plikach CSS oraz JavaScript? https://blog.robertorlinski.pl/2020/12/08/wartosci-z-wordpressa-w-plikach-css-i-js/ WordPress, bazuje na PHPie, który jak wiadomo, daje nam możliwość zapisu do bazy danych, a później odczytu, zapisanych w niej wartości, w plikach HTML (a będąc precyzyjnym – w plikach o rozszerzeniu .php, ale zawierających często więcej HTMLa, niż samego PHPa). Ale właśnie, zdanie to oznacza, że jesteśmy w stanie, korzystać z tych właściwości, tylko w […] 2020-12-08 17:00:00 jak-uzywac-wartosci-z-wordpressa-w-plikach-css-oraz-javascript ckig8bkw0000zi3umgy3obxsr 2020-12-08 17:00:00 2020-12-08 17:00:00 cj7qg5jdk00rvi3um2dzx9yzw 4-17.09.2017 – Tydzień 6-7 relacja http://bedeprogramistka.pl/podsumowanie-tygodnia-6-7/

Się działo. Oj działo, działo. Był plan, żeby w tygodniu 6 zamknąć temat HTML i CSS. Zwieńczeniem miał być projekt strony zrobionej na wzór strony głównej bloga. Czytelnicy mojego Fanpage’a wiedzą, jak mi szło i z czym się borykałam. Dzisiaj, po 2 tygodniach pracy mogę powiedzieć – udało się. Skończyłam. Oczywiście jeszcze sporo rzeczy mogłabym pozmieniać, ale na tym etapie chcę to zakończyć.   Przez ostatnie 2 tygodnie każdą wolną chwilę poświęcałam na dopracowywanie strony, którą chciałam zrobić. Za pierwszym razem strona okazała się klapą. A dokładniej, zupełnie nie mogłam zrozumieć dlaczego w jednym divie nie chcą mi się zmieścić kolejne i dlaczego one ciągle nie są w tym miejscu, gdzie powinny być i w ogóle dlaczego coś! Było to lekko frustrujące. Z pomocą przyszły filmy SamurajaProgramowania, który od postaw robił bardzo podstawową stronę. Właśnie w tym filmie zobaczyłam, że Samuraj najpierw zaplanował sobie ułożenie wszystkich elementów. I to był strzał w dziesiątkę. Zrobiłam to, co zawsze robię u siebie w pracy (a wielokrotnie zdarza się, że ludzie się dziwią po co?) – wzięłam długopis i kartkę papieru. I rozpisałam wszystko. W ten sposób powstał szkielet nr 2. I poszło. Tutaj macie pierwszy z czterech filmów Samuraja, który zainspirował mnie […]

\n

Artykuł 4-17.09.2017 – Tydzień 6-7 relacja pochodzi z serwisu .

2017-09-18 17:30:47 4-17092017-tydzien-6-7-relacja ck9qqdx4o000xi3umdjbh0w86 2017-09-18 17:30:47 2017-09-18 17:30:47 +ck9bl1nk0020ci3umdw5gfnkr Zatrzymaj czas z cy.clock https://przemuh.dev/blog/stop-the-time-with-cyclock Dziś pokażę Wam jak za pomocą jednej komendy zatrzymać czas. Niestety, tylko w testach napisanych w cypress.io. Jeśli znasz skuteczną metodę na zatrzymanie czasu tak ogólnie - w życiu, to napisz do… 2020-04-22 17:00:00 zatrzymaj-czas-z-cyclock ckh8coao00010i3umhqw2e6xc 2020-04-22 17:00:00 2020-04-22 17:00:00 cj7uuo7yo00s0i3umd6viggjj Jak używać Git Hub’a. Instalacja i obsługa Gita krok po kroku. http://bedeprogramistka.pl/jak-uzywac-git-huba-instalacja-i-obsluga-gita-krok-po-kroku/

Drodzy czytelnicy! Postanowiłam pomóc Wam, ale też, a może i przede wszystkim sobie, z czarną, przeraźliwą konsolą. Nauczymy się razem jak używać Git Huba. Co Wy na to? Instalacja i obsługa Gita krok po kroku – zainteresowani? 🙂 Ja jestem lekko przerażona, ale wierzę, że damy radę. Ja przynajmniej muszę, muszę, muszę! Bo inaczej się uduszę 😉 Ale żarty na bok, git do zrobienia jest. Bo zaraz po nim czeka na nas JavaScript! 🙂 To, co gotowi? Zaczynamy! Na początek kilka ważnych rzeczy. Pisząc ten artykuł zakładam, że jesteś totalnie zielony w używaniu Gita. Po tym artykule będziesz wiedział, jak zainstalować gita, do czego służy Git, jak stworzyć repozytorium lokalne i jak dodać pliki do GitHuba (np. swoją pierwszą stronę internetową). Z tego artykułu nie dowiesz się, jak używać Gita we współpracy z inną osobą (współdzielić pliki). Na tym etapie nie jest to nam potrzebne. Skupmy się na pierwszym kroku młodocianego programisty, który bardzo chciałby, ale nie wie jak, wrzucić swoją stronę na GitHub.com. Instalacja i obsługa Gita krok po kroku – teraz zostały nam już tylko trzy kopniaki na szczęście i naprawdę zaczynamy 🙂 Git jest systemem kontroli wersji (VCS – Version Control System). Posiada on 3 stany, w […]

\n

Artykuł Jak używać Git Hub’a. Instalacja i obsługa Gita krok po kroku. pochodzi z serwisu .

2017-09-21 19:28:18 jak-uzywac-git-huba-instalacja-i-obsluga-gita-krok-po-kroku ck9qqdx4o000xi3umdjbh0w86 2017-09-21 19:28:18 2017-09-21 19:28:18 cj7z4os4o00s6i3um1vez08d6 Podsumowanie 2 miesięcy nauki http://bedeprogramistka.pl/podsumowanie-2-miesiecy-nauki/

Moi drodzy! Dziś mijają dokładnie 2 miesiące odkąd podjęłam decyzję o tym, że chcę zostać programistką. Niby to krótki okres czasu, jednak sporo się wydarzyło. Były chwile pełne wiary, były też zwątpienia, a nawet pojawiło się mega wkurzenie. To tak delikatnie mówiąc. Dzisiaj będzie wpis wspomnieniowy. I Wam o tych wszystkich chwilach opowiem. Pamiętam ten dzień jak dziś. Od dłuższego czasu zastanawiałam się, co ja chcę w życiu robić. Aż pewnego gorącego, lipcowego wieczora spadła na mnie ta myśli jak grom z jasnego nieba – będę programistką. Część osób od razu zaczęła kibicować, część pukała się w czoło. Jeszcze inna część osób pytała: „ale co to znaczy? Co Ty chcesz właściwie robić?”. No jak to co? Programować 😀 Po szybkim researchu postanowiłam, że chcę iść w stronę front-endu. Zawsze lubiłam tę dłubaninę w kodzie. Pierwszy miesiąc upłynął mi pod znakiem wakacji z dziećmi. Ale nie był to miesiąc zmarnowany. Każdą wolną chwilę przeznaczałam na naukę. Zresztą tak jest i dziś (ten post piszę na telefonie, siedząc w poczekalni, czekając aż córka skończy zajęcia gimnastyczne). Podczas drugiego miesiąca skończyłam kilka kursów, między innymi na SoloLearn (te kursy Wam bardzo polecałam o w tym wpisie). Zrobiłam też 2 kursy z HTMLa i […]

\n

Artykuł Podsumowanie 2 miesięcy nauki pochodzi z serwisu .

2017-09-24 19:19:45 podsumowanie-2-miesiecy-nauki ck9qqdx4o000xi3umdjbh0w86 2017-09-24 19:19:45 2017-09-24 19:19:45 ckhwh7qr402aji3umf2azb34p Angular – DomSanitizer https://wojciechszucko.com/angular-domsanitizer/

Serwis, który dba o to aby nasza aplikacja była odporna na ataki XSS usuwając niebezpieczny kod (ang. sanitizing). Pisząc aplikację w Angularze często korzystamy z dynamicznego podstawiania wartości w takich miejscach jak link lub wykorzystując atrybut innerHtml. Miejsca te mogą być potencjalnymi miejsca ataku. DomSanitizer pomaga nam w utrzymaniu bezpiecznej aplikacji. Atak XSS Na początku wyjaśnijmy sobie czym jest atak XSS (skrót od ang. Cross-site scripting). Polega na przesłaniu do aplikacji złośliwego kodu (najczęściej Javascript), który wykona się po w przeglądarce innego użytkownika. Atakujący może to zrobić za pomocą przesłania odpowiednio przygotowanego komentarza, którego próba odczytu w przeglądarce innego użytkownika może…

\n

Artykuł Angular – DomSanitizer pochodzi z serwisu Wojciech Szućko.

2020-11-24 21:13:34 angular-domsanitizer cki6eer4w001ri3umeoa347v0 2020-11-24 21:13:34 2020-11-24 21:13:34 @@ -1410,11 +1440,7 @@ cjn1ho9aw018xi3um7garf87s meet.js summit 2018 - konkurs! https://przemuh.pl/meet cjpv95nj401cai3umdwy08vy9 Podsumowanie 2018 & plany na 2019 https://przemuh.pl/podsumowanie-2018-plany-na-2019/

Święta za pasem. Pierniki w piekarniku. Karp w wannie jeszcze pływa. Nowy rok tuż za rogiem. To czas na wszelakiego rodzaju podsumowania i wyznaczenie sobie planu na nadchodzący 2019 rok.

Jestę blogerę

"Jak to mówią "Nowy rok - nowy Ty, nowe możliwości" ...sratatata..." tak zacząłem pierwszy wpis na tym blogu.

2018-12-19 14:08:28 podsumowanie-2018-and-plany-na-2019 ckh8coao00010i3umhqw2e6xc 2018-12-19 14:08:28 2018-12-19 14:08:28 cjqnoz4cw01d9i3um587ocgah Bookshelf - intro https://przemuh.pl/bookshelf-intro/ Zainspirowany jednym ze wzorców z książki "Praktyka czyni mistrza. Wzorce, inspiracje i praktyki rzemieślników programowania", postanowiłem stworzyć listę książek, jakie przeczytałem i jakie zamierzam przeczytać. Szukasz czegoś nowego do poczytania? Jest spora szansa, że dobrze trafiłeś ;) 2019-01-08 11:48:50 bookshelf-intro ckh8coao00010i3umhqw2e6xc 2019-01-08 11:48:50 2019-01-08 11:48:50 cjqv1jg4o01dki3um7u2x56se Praktyka czyni mistrza https://przemuh.pl/praktyka-czyni-mistrza/

Do tej książki zbierałem się już w zeszłym roku. Coś w okolicach lipca. Niestety pierwsze podejście skończyło się niepowodzeniem. Nie wiem czy to przez upalną pogodę czy przez oczekiwanie na narodziny syna, ale nie mogłem wtedy przebrnąć przez wstęp. Po czasie postanowiłem spróbować ponownie. Tym bardziej po opublikowaniu postanowienia noworocznego,

2019-01-13 15:14:57 praktyka-czyni-mistrza ckh8coao00010i3umhqw2e6xc 2019-01-13 15:14:57 2019-01-13 15:14:57 -cjs39jxcw01fmi3um508mh8av HOCki, klocki i Pokemony... https://przemuh.pl/hocki-klocki-i-pokemony/

...czyli krótka relacja z #41 spotkania meet.js Poznań. Zapraszam :)

Powrót na stare śmieci

Tym razem spotkanie odbyło się w starej, dobrej, sprawdzonej lokalizacji czyli w co-workingu +1 Za Bramką. Osobiście mi to bardzo odpowiada. Miejscówka w centrum, super dojazd ze wszystkich stron Poznania, bliskość potencjalnych pubów na afterek itp.

2019-02-13 14:01:08 hocki-klocki-i-pokemony ckh8coao00010i3umhqw2e6xc 2019-02-13 14:01:08 2019-02-13 14:01:08 -cjtocmsug01hui3um2gibaqt6 Czytając uszami... https://przemuh.pl/czytajac-uszami/ ...czyli jak zacząłem słuchać podcastów i audiobooków. 2019-03-25 12:50:13 czytajac-uszami ckh8coao00010i3umhqw2e6xc 2019-03-25 12:50:13 2019-03-25 12:50:13 -ck4b8c0rs01uei3umffvg8zwm 3 kroki do niesamowitych raportów z testów w Cypress https://przemuh.pl/3-kroki-do-niesamowitych-raportow-z-testow-w-cypress/ Z tego wpisu dowiecie się jak wygenerować awwwwwwwwwwwsome HTML raport z testów napisanych w Cypressie - wzbogacając go o zrzut ekranu w momencie, kiedy Wasz test nie przeszedł. 2019-12-18 11:45:37 3-kroki-do-niesamowitych-raportow-z-testow-w-cypress ckh8coao00010i3umhqw2e6xc 2019-12-18 11:45:37 2019-12-18 11:45:37 -ck9bl1nk0020ci3umdw5gfnkr Zatrzymaj czas z cy.clock https://przemuh.dev/blog/stop-the-time-with-cyclock Dziś pokażę Wam jak za pomocą jednej komendy zatrzymać czas. Niestety, tylko w testach napisanych w cypress.io. Jeśli znasz skuteczną metodę na zatrzymanie czasu tak ogólnie - w życiu, to napisz do… 2020-04-22 17:00:00 zatrzymaj-czas-z-cyclock ckh8coao00010i3umhqw2e6xc 2020-04-22 17:00:00 2020-04-22 17:00:00 -ckbvg8ao0023ui3um1oh2fdvi Uwaga na fixtury w cypress.io https://przemuh.dev/blog/watch-out-for-fixtures-in-cypress Dzisiaj opowiem wam krótką historię o błędzie, który kosztował mnie dwa dni poszukiwań. Błędzie, który koniec końców okazał się czymś bardzo trywialnym, a czas który spędziłem na debugowaniu… 2020-06-26 00:00:00 uwaga-na-fixtury-w-cypressio ckh8coao00010i3umhqw2e6xc 2020-06-26 00:00:00 2020-06-26 00:00:00 +cj7eit8og00rdi3um5yomc0ad Testowanie komponentów w React'cie - Jest i Enzyme https://fsgeek.pl/post/react-testowanie-jest-i-enzyme/

Jak już kiedyś wspominałem w poście dotyczącym testowania(znajdziecie go tutaj) testowanie jest ważnym elementem podczas tworzenia oprogramowania. Dziś chciałbym poświęcić chwilę czasu na testy jednostkowe w React’cie. Testy jednostkowe powinniśmy tworzyć dla właściwie każdego komponentu dzięki czemu będziemy mieć pewność, że działa poprawnie i niczego nie psujemy podczas zmian lub ulepszania kodu.\n

\n\n

Jest i Enzyme

\n\n

Oficialne narzędzie create-react-app, które posłużyło mi do stworzenia szkieletu aplikacji korzysta z frameworka Jest do uruchamiania testów. Oprócz tego zdecydowałem się skorzystać z biblioteki Enzyme, która ułatwia testowanie komponentu o czym będzie więcej za chwilę. Najpierw parę słów poświęcę Jest’owi. Aby uruchomić testy musimy się trzymać pewnej konwencji, którą narzuca nam Jest a mianowicie sposób tworzenia plików, które ma uruchomić. Mamy tutaj 3 opcje:

\n\n
    \n
  • Folder o nazwie __tests__ w którym plikami testowymi są wszystkie pliki o rozszerzeniu *.js
    • \n
  • Pliki testowe o nazwie *.spec.js
    • \n
  • Pliki testowe o nazwie *.test.js
    • \n
\n\n

Pliki te mogą w dowolnej lokalizacji wewnątrz folderu src. Zalecane jest również by pliki te były jak najbliżej testowanych komponentów. Ja osobiście preferuję pliki o nazwie *.spec.js, które umieszczam w tym samym folderze co komponent.

\n\n

Aby napisać test musimy w nim umieścić blok it(), który zawiera nazwę testu oraz funkcję, która go przeprowadzą. Można jeszcze umieścić bloki it() wewnątrz bloku describe() aby bardziej poukładać kod. Nie jest to wymagane jednak ja z tego korzystam, ponieważ pomaga w poukładaniu testów. Taki przykładowy szblon pliku testowego wygląda następująco:

\n\n
describe('NazwaKomponentu',()=>{\n    it('renders compononent',()=>{\n        //ciało funkcji które przeprowadzi test\n    })\n})\n
\n\n

Warto również tutaj wspomnieć, że plik testowy musi zawierać przynajmniej jeden test(blok it()), ponieważ w innym przypadku będzie wyrzucał następujący błąd:

\n\n

empty_test

\n\n

Każde ciało funkcji, które będzie przeprowadzało test będzie zawierać następującą konstrukcję

\n\n
expect(…).toEqual(…)\n
\n\n

Jest to dosyć proste i wykorzystuje naturalny język. Wewnątrz funkcji expect musimy umieścić to co chcemy testować np.: funkcję, natomiast wewnątrz funkcji sprawdzajacej toEqual() spodziewany przez nas wynik np.:

\n\n
Expect(silnia(0)).toEqual(1)\n
\n\n

Zamiast funkcji toEqual możemy stosować inne dostarczone nam przez Jest funkcje np.: toBe(), toHaveBeenCalled(), toContain() itd. Całą listę możecie zobaczyć tutaj

\n\n

Enzyme

\n\n

W takim razie do czego nam jest potrzebny Enzyme? Ano do renderowania komponentu i wyszukiwania w nim istotnych dla nas elementów. Chodzi o to by podczas testowania komponentu móc w nim znaleźć szukany przez nas element np. p i zwrócić na przykład tekst, który w nim się znajduje. Zanim opiszę pokrótce tą bibliotekę to musimy ją zainstalować przy pomocy następujących komend:

\n\n
yarn  add enyme \nyarn add react-test-renderer react-dom\n
\n\n

W Enzymie mamy 3 sposoby tworzenia komponentu:

\n\n
    \n
  • shallow - tworzy komponent bez tworzenia jego dzieci, nie wowułe funkcji należących do cyklu życia komponentu
    • \n
  • mount - tworzy komponent razem ze wszystkimi dziećmi oraz wywołuje funkcje należące do cyklu życia komponentu
    • \n
  • render - przekształca komponent React’owy do statycznego pliku HTML
    • \n
\n\n

Tworzenie komponentu wewnątrz testów może wyglądać następująco:

\n\n
import {shallow} from 'enzyme'\nconst wrapper = shallow(<Komponent />)\n
\n\n

W tak stworzonym komponencie możemy wyszukiwać elementy np.: przy pomocy funkcji find lub też zwracać tekst przy pomocy funkcji text(). Możemy również zarządzać zmiennymi props i state z komponentu. Wszystkie dostępne metody możecie znaleźć tutaj

\n\n

Przetestujmy cos wreszcie

\n\n

Wstęp troszkę mi zajął ale był potrzebny by teraz przejść do właściwiej części postu. Chciałbym teraz pokazać jak można przetestować prosty komponent, który wyświetla liczbę kliknięć przycisku. Kod komponentu wygląda następująco:

\n\n
export class CounterComponent extends Component{\n    state = {\n        counter:0\n    }\n\n    increaseCounter = ()=>{\n        this.setState(prev=>({\n            counter: prev.counter+1\n        }))\n    }\n    render(){\n        return(\n            <div>\n                <p>Counter:</p>\n                <span>{this.state.counter}</span>\n\n                <button onClick={this.increaseCounter}>Click me</button>\n            </div>\n        )\n    }\n}\n
\n\n

Nie jest on duży ale został specjalnie dobrany by pokazać parę ciekawych rzeczy. Testowanie komponentów zwykle zaczynam od sprawdzenia czy wyświetla wszystkie potrzebne mi elementy. Dla tego komponentu może to wyglądać następująco:

\n\n
it('renders compononent',()=>{\n    const wrapper = shallow(<CounterComponent/>)\n    expect(wrapper.find('p').text()).toEqual('Counter:')\n    expect(wrapper.find('span').text()).toEqual('0')\n})\n
\n\n

Widać tutaj przykład połączenia Jest’a i Enzym’a. Za pomocą tego drugiego wyszukujemy interesujący nas element by potem zwrócić tekst do porównania. Oprócz samego sprawdzenia czy komponent jest tworzony ze wszystkimi elementami możemy sprawdzić czy właściwie reaguje na zmiany wartości props lub state.

\n\n
it('changes value in span according to state',()=>{\n    const wrapper = shallow(<CounterComponent/>)\n    expect(wrapper.find('span').text()).toEqual('0')\n    wrapper.setState({counter:10})\n    expect(wrapper.find('span').text()).toEqual('10')\n})\n
\n\n

Tutaj wykorzystuję jedną z funkcji Enzyme by zmienić wartość counter w obiektcie store a następnie sprawdzam czy mój komponent właściwie to wyświetlił. No i jeszcze został nam przycisk który zwiększa wartość counter o 1. To również możemy przetestować:

\n\n
it('increases state counter value by one on click', ()=>{\n    const wrapper = shallow(<CounterComponent/>)\n    expect(wrapper.find('span').text()).toEqual('0')\n    wrapper.find('button').simulate('click')\n    expect(wrapper.find('span').text()).toEqual('1')\n})\n
\n\n

Aby zasymulować przeciśnięcie przycisku przez użytkownika wykorzystałem funkcję pochodzącą z Enzyme o nazwie simulate(). Na sam koniec warto puścić testy w konsoli przy pomocy polecenia yarn test i zobaczyć czy wszystkie przechodzą na zielono.

\n\n

green_test

\n\n

Jeśli w trakcie rozwijania kodu jakiś zmieni się na czerwono to znaczy, że albo coś popsuliśmy i musimy poprawić kod lub zmiana kodu była zrobiona specjalnie i musimy poprawić testy

\n\n

A wy czego używacie do testowania i czy w ogóle testujecie komponenty? Napiszcie też czy wam się podobało i czy chcecie więcej postów dotyczących testowania różnych elementów. No i jak macie jakieś problemy to śmiało piszcie a może uda mi się pomóc a jeśli zbierze się więcej takich ciekawych rzeczy to stworzę z tego osobny post :)

2017-09-10 09:11:58 testowanie-komponentow-w-reactcie-jest-i-enzyme ckhxjb6o0000yi3umb3hg09jv 2017-09-10 09:11:58 2017-09-10 09:11:58 ckfd6z9c0027di3um1vqu58mp 10 złotych rad dla junior developera https://przemuh.dev/blog/10-golden-advices-for-junior-developer Czy ten tytuł to clickbait? Oczywiście, że tak. Nie ma na świecie dwóch takich samych osób. To co sprawdziło się u mnie niekoniecznie musi się sprawdzić u Ciebie. Tak prawdę mówiąc, to tytuł tego… 2020-09-22 00:00:00 10-zlotych-rad-dla-junior-developera ckh8coao00010i3umhqw2e6xc 2020-09-22 00:00:00 2020-09-22 00:00:00 ckh8coao0029ni3umg8b73fgy Krótka historia o optymalizacji https://przemuh.dev/blog/tree-performance-improvement-case-study Jakiś czas temu na Twitterze zamieściłem zrzut ekranu pokazujący flame-chart z narzędzia Profiler. Pracowałem wtedy nad poprawą wydajności aplikacji, którą rozwijamy w Egnyte. Pewna funkcjonalność… 2020-11-08 00:00:00 krotka-historia-o-optymalizacji ckh8coao00010i3umhqw2e6xc 2020-11-08 00:00:00 2020-11-08 00:00:00 cj5jwlfy000p5i3umfv1af6kc Czy warto pójść na kurs programowania ? http://webdevmaster.pl/czy-warto-pojsc-na-kurs-programowania/

Wiele osób rozpoczynających swoją „przygodę” z programowaniem próbuje znaleźć alternatywne drogi rozwoju kariery. Początki są trudne, wiele zagadnień staje się dla nas niejasnych, często zadajemy sobie  pytanie czy my się na pewno do tego nadajemy, często również wątpimy w siebie. Z wielu źródeł (reklamy, google) dowiadujemy się o kursach programowania, które na pierwszy rzut oka…

\n

Artykuł Czy warto pójść na kurs programowania ? pochodzi z serwisu Wedevmaster - początkujący deweloper.

2017-07-25 18:17:15 czy-warto-pojsc-na-kurs-programowania ckdyuycaw000ti3um7a4vg0hl 2017-07-25 18:17:15 2017-07-25 18:17:15 @@ -1439,24 +1465,13 @@ cj4i40xc000nfi3um5elq3fk6 Git dla początkujacych https://fsgeek.pl/post/git-dla cj4qrvs0000nyi3um1jty183o Nowe możliwości funkcji https://fsgeek.pl/post/seria-es6-funkcje/

Nie tylko zmienne doczekały się zmian w specyfikacji ES6. Takie zmiany również dotknęły funkcje, które dostały parę nowych możliwości. Zapraszam na drugi post dotyczący standardu ES6. Jeśli nie czytaliście pierwszego postu to zapraszam tutaj. Post jest krótki ponieważ nie ma tutaj wielu zaawansowanych rzeczy a i nie chciałem się niepotrzebnie rozwlekać nad tematem.\n

\n\n

Arrow Functions

\n\n

To jest jedna z nowości, którą najbardziej polubiłem i równie często wykorzystuję podczas swojej pracy. Jest to wyrażenie, które jest krótszą formą zapisu funkcji.\nfunkcjaZapis\narrayZapis

\n\n

Jednym z minusów tego wyrażenia jest brak czytelności dla osób, które o tym nie słyszały. Jednak jak się go pozna to staje się zrozumiały i w pewien sposób wygodny. Pierwsze co się rzuca w oczy to brak słówka kluczowego function, zamiast niego deklarujemy zwykłą zmienną(ja najczęściej robię to przy pomocy słówka kluczowego const). Teraz po znaku ‘=’, tak jak w przypadku standardowych funkcji, w okrągłych nawiasach wpisujemy parametry funkcji. Jeśli mamy tylko jeden parametr to możemy je opuścić. W przypadku braku argumentów należy umieścić puste nawiasy. Następnie mamy grupę znaków od których wzięło nazwę wyrażenie czyli ‘=>’ (w końcu przypomina strzałę) . Po niej następuje to co nazywamy ciałem funkcji. Jednak tutaj mamy większą dowolność niż wcześniej. Jeśli nasza funkcja nie będzie wykonywała żadnych dodatkowych instrukcji oprócz polecenia return to możemy opuścić nawiasy klamrowe ‘{ }’ (tak jak to zrobiłem w poprzednich przykładach). Jednak nic nie stoi na przeszkodzie by wykorzystać nawiasy i zbudować bardziej skomplikowane ciało funkcji.

\n\n

arrayWithBody

\n\n

Jednak Arrow Functions to nie tylko inny sposób zapisu funkcji. Wniosły też jedną poważną zmianę w stosunku do standardowych funkcji. Arrow Functions nie tworzą własnego zakresu słówka kluczowego this. W Javascript’cie do tej pory nie mieliśmy klas znanych z innych języków ale do programowania obiektowego mogliśmy wykorzystać funkcje. Problem był jednak taki, że w takich naszych stworzonych ‘klasach’ w funkcjach nie mogliśmy się odwołać do zmiennych klasowych przy pomocy słówka this.

\n\n

thisInFunctions

\n\n

Problem ten rozwiązuje nowy zapis, który nie powoduje tworzenia nowego zakresu dla this.

\n\n

thisInArrow

\n\n

Powoduje to jednak, że nie możemy takiej funkcji nie możemy użyć jako konstruktora przy pomocy operatora new\nbrakNew

\n\n

Inne nowości dotyczące funkcji

\n\n

Oprócz wyżej opisanego wyrażenia dostaliśmy również parę mniejszych rzeczy, które warto znać i stosować jak zajdzie taka potrzeba. Pierwszą z nich jest możliwość definiowania domyślnych wartości parametrów funkcji czyli coś co znamy z innych języków. Działa to tutaj bardzo podobnie do tego co znamy na przykład z C++ czy PHP

\n\n

default

\n\n

Ciekawszą rzeczą jest możliwość przekazywania zmiennej ilości parametrów w funkcji. W JS dokonujemy tego za pomocą operatora ‘…’. Dodatkowo przekazywane parametry nie muszą być tego samego typu.

\n\n

multiple

\n\n

Więcej zmian dotyczących samych funkcji nie znalazłem jednak jeśli jest coś o czym warto napisać to dajcie znać w komentarzu a na pewno się nad tym pochylę. Co prawda nie ma tego wiele ale potrafi ułatwić życie. Arrow functions bardzo szybko zdobywa popularność i można go coraz częściej spotkać np.: przy tworzeniu bezstanowych komponenetów w react’cie. Jak już wspomniałem bardzo lubię tą funkcję. A jak top wygląda u was? Lubicie, używacie czy może staracie się unikać?

2017-07-05 09:00:00 nowe-mozliwosci-funkcji ckhxjb6o0000yi3umb3hg09jv 2017-07-05 09:00:00 2017-07-05 09:00:00 cj4xpkz4000o4i3umh63e6r8s Jak przeżyć swój pierwszy staż/praktyki? https://fsgeek.pl/post/jak-przezyc-staz-praktyki/

Ostatnio jak przeczytałem wpis od Sowa Programuje (znajdziecie ją tutaj) i Mariusza Bugajskiego(a jego tutaj) zacząłem wspominać swoje pierwsze praktyki jako programista od których upłynęło już dokładnie dwa lata. Przypomniałem sobie swoje błędy i zastanowiłem się co bym sobie powiedział mając aktualną wiedzę po roku stałej pracy. Jeśli jesteście zainteresowani to zapraszam do czytania.\n

\n\n

Trudne początki

\n\n

Początki są zawsze najtrudniejsze. Dotyczy to nie tylko programowania ale również każdej innej aktywności. Pierwsze praktyki/staż również są stresujące, niektórzy sobie zadają pytanie czy dadzą radę, co robić by wyszły jak najlepiej. Chciałbym się podzielić moimi przemyśleniami na ten temat z perspektywy czasu i nabytego doświadczenia:

\n\n
    \n
  1. Nie bierz 100% zdalnych praktyk/stażu
    2. \n
  2. Zadawaj pytania
    3. \n
  3. Uważnie słuchaj
    4. \n
  4. Komunikuj, że się nudzisz
    5. \n
  5. Wyrażaj swoje zdanie
    6. \n
  6. Korzystaj z warsztatów/ prezentacji/wyjazdów na konferencje
    7. \n
  7. Integruj się z współpracownikami
    8. \n
  8. Bądź otwarty
    9. \n
\n\n

1. Nie bierz 100% zdalnych praktyk/stażu

\n\n

Pierwszy punkt może się wydawać dla niektórych zaskoczeniem. W końcu branża programistyczna słynie z tego, że można pracować zdalnie z domu w wygodnym fotelu. Jednak sprawdza się to w przypadku doświadczonych programistów, którzy wiedzą, co mają robić i jak to zrobić. Dla nich nie ma różnicy gdzie pracują, ponieważ działają w swoim wypracowanym trybie. Jednak nie wszyscy tak robią, ponieważ praca zdalna nie jest dla wszystkich. A na pewno nie dla praktykantów. Praktykant jest po to w firmie, by się jak najwięcej nauczyć. A najprościej to da się zrobić siedząc na miejscu w firmie, gdzie można podglądać bardziej doświadczonych kolegów. Również jest łatwiej znaleźć pomoc w przypadku problemów. Podsumowując, nie szukaj w 100% zdalnych praktyk, ponieważ nie dadzą ci nic lub bardzo mało.

\n\n

2. Zadawaj pytania

\n\n

Właściwie punkt oczywisty, więc tutaj będzie krótko. Tak jak już wspomniałem praktyki są po to by się czegoś nauczyć. Dlatego nie bójcie się zadawać pytań jeśli czegoś nie wiecie. Nawet jeśli pytanie będzie głupie, to lepiej je zadać i uzyskać odpowiedź niż miałoby to blokować was w pójściu dalej. Zachęcam również do samodzielnych poszukiwań odpowiedzi ale żeby nie trwały one całego dnia. Czasami lepiej zadać pytanie i od razu uzyskać fachową odpowiedź niż niepotrzebnie marnować czas.

\n\n

3. Uważnie słuchaj

\n\n

Zadawanie pytań to nie wszystko. Należy również uważnie słuchać odpowiedzi. Ale nie tylko tego dotyczy się punkt. Ja podczas swoich pierwszych praktyk nie korzystałem ze słuchawek, tylko starałem się słuchać o czym mówią koledzy z pokoju. Co mi to dawało? Po pierwsze oswajałem się z pewnymi określeniami używanymi na co dzień w branży. Po drugie wyszukiwałem w tematach rozmów rzeczy o których nie wiedziałem i starałem się doczytać troszkę więcej na ten temat. Niejednokrotnie w ten sposób poszerzyłem swoją wiedzę o ciekawe rozwiązania lub nowości w branży.

\n\n

4. Komunikuj, że się nudzisz

\n\n

Pamiętaj, że praktyki są dla ciebie możliwością by się dużo nauczyć. To ile z tego wyciągniesz zależy od ciebie. Jeśli chcesz naprawdę sporo wynieść to komunikuj,że się nudzisz. Na początku praktyk możesz dostawać proste zadania. Ale jeśli będziesz je sprawnie wykonywał i o tym komunikował, to będziesz dostawał coraz ambitniejsze. Jeśli prowadzący projekt zobaczy, że dotychczasowe zadania są dla ciebie za łatwe może uda mu się znaleźć coś ciekawszego. Jednak to nie nastąpi, jeśli będziesz chciał robić jak najmniej udając, że wykonujesz zadanie.

\n\n

5. Wyrażaj swoje zdanie

\n\n

Może nie na początku praktyk ale w końcu przyjdzie pora kiedy będziesz uczestniczyć w spotkaniach zespołu. Podczas takich spotkań zwykle dyskutuje się na temat aktualnie wykonywanych zadań oraz omawia się plany na następne dni. Jeśli są omawiane jakieś kwestie np.: wykorzystanie tej, czy innej biblioteki lub cechy nowej funkcjonalności i masz jakiś pomysł na dany temat to nie bój się o tym powiedzieć. Nawet jeśli pomysł będzie zły, to dowiesz się dlaczego i twoja wiedza się wzbogaci. A może się okazać, że spojrzałeś na problem z innej strony i twój pomysł jest równie dobry jak pozostałe.

\n\n

6. Korzystaj z warsztatów / prezentacji / wyjazdów na konferencje

\n\n

Aktualnie mamy na rynku dużą różnorodność. Dzięki temu powstaje wiele różnych spotkań programistycznych oraz konferencji, gdzie doświadczeni programiści dzielą się swoją wiedzą. Jest to świetna okazja nie tylko do pogłębienia swojej wiedzy ale również do porozmawiania z innymi osobami, podzielenia się doświadczeniami. Również firmy coraz częściej tworzą własne wewnętrzne prezentacje tworzone przez pracowników. Jest to sposób nie tylko na poznanie technologii, które są wykorzystywane w firmie ale również na integrację z innymi.

\n\n

7. Integruj się z współpracownikami

\n\n

Jak dla mnie to jest jeden z najważniejszych punktów. Pamiętaj, że tworzenie oprogramowania to nie tylko ty i komputer. To przede wszystkim ludzie, z którymi to tworzysz. Podczas praktyk nie izoluj się od reszty pokoju za pomocą słuchawek. Staraj się rozmawiać z innymi np.: przy kawie lub też brać udział w imprezach jeśli firma takowe organizuje. Dużo lepiej się współpracuje z osobą, którą się zna, dlatego zawczasu staraj się poznać współpracowników.

\n\n

8. Bądź otwarty

\n\n

Pamiętaj by być otwartym. Praktyki to czas nauki w praktyce i może się zdarzyć, że nie będziesz zawsze dostawał takich zadań jak oczekujesz np.: zadanie backendowe jak chciałeś praktyki na frontendzie, lub skonfigurowanie prostego serwera. Wykorzystaj to jako okazję do nauki czegoś nowego. Jeśli podejmiesz się takiego zadania, to nabierzesz nowych umiejętności, które w przyszłości pomogą ci w zdobywaniu kolejnych szczebli kariery. Bądź otwarty na zmiany, a w przyszłości nic cię nie zaskoczy.

\n\n

Trochę tych punktów wyszło ale można je zawrzeć w jednym haśle: Pokaż się. Nowi współpracownicy jeszcze cię nie znają, a im szybciej dasz się im poznać, pokażesz co potrafisz, tym lepiej dla ciebie. Napiszcie w komentarzu co sądzicie o tych punktach. A może macie już własne przemyślenia na ten temat. Zapraszam do dzielenia się nimi w komentarzu.

2017-07-10 05:30:00 jak-przezyc-swoj-pierwszy-stazpraktyki ckhxjb6o0000yi3umb3hg09jv 2017-07-10 05:30:00 2017-07-10 05:30:00 cj58a8og000opi3umfofibonn Czym są testy w programowaniu? https://fsgeek.pl/post/czym-sa-testy-w-programowaniu/

Jako, że ostatnio w pracy zająłem się tematem testów w projekcie to przy okazji uznałem, że opiszę ten potrzebny proces w wytwarzaniu oprogramowania. Jeśli chcecie się dowiedzieć co to są testy, po co je stosujemy, na jakie kategorie się dzielą i czego możemy użyć by je przeprowadzić to zapraszam do wpisu.\n

\n\n

Czym są testy i jak je dzielimy?

\n\n

Testy są(według mnie) jednym z najważniejszych etapów podczas tworzenia oprogramowania. Bez nich nie wiemy czy to co zostało przez nas stworzone działa. Program możne napisać każdy w dowolnym czasie. Sztuką jest napisać takie oprogramowanie, które będzie wypełniało wymagania klienta jednocześnie będąc wydajnie. A testy są procesem który tylko nam w tym pomaga. W książkach dotyczących inżynierii oprogramowania widnieje wiele kryteriów wedle których można dzielić testowanie jednak ja się skupię na tym który jest najczęściej wykorzystywany w codziennie pracy czyli podział na testy manualne i automatyczne.

\n\n

Testy manualne

\n\n

\n\n

Czyli manualne przeprowadzane przez osobą zwaną testerem. Coraz więcej firm posiada własne zespoły testerskie (tzw. dział QA), którego zadaniem jest sprawdzanie wytwarzanego oprogramowania pod względem błędów. Dobry tester powinien cechować się cierpliwością, być dociekliwy oraz dokładny. Przydaje się również kreatywność, ponieważ czasami błędy nie są widocznie na pierwszy rzut oka. Zadaniem takiego testera jest nie tylko znajdowanie błędów ale również opisanie (między innymi jak je powtórzyć) tak by programiści mogli go naprawić. Testy manualne pozwalają wykrywać błędy jakie mogą się pojawić podczas użytkowania a więc na przykład błędne wyświetlanie się pewnych elementów, brak tłumaczeń, pewnych elementów designu oraz co najważniejsze nieprzewidywalnego działania systemu na pewne zestawy danych.

\n\n

Testy automatyczne

\n\n

\n\n

Czyli to co programiści powinni lubić najbardziej. Testy automatyczne powinny być naturalną konsekwencją pisania kodu. Po to zostały wymyślone odpowiednie narzędzia by z nich korzystać i czerpać korzyści z nich płynące. Można się spytać jakie są korzyści. Po pierwsze jesteśmy chronieni podczas pisania aplikacji, że kod w trakcie tworzenia spełnia wymagania. Jest to cecha TDD gdzie test jest pisany przed samym kodem. W TDD najpierw określamy wymagania jakie powinien spełnić kod a dopiero potem go piszemy. Oprócz tego mając testy zmniejszamy strach przed zmianami. Mamy świadomość, że nawet jeśli coś zepsujemy to jest duża szansa, że testy to wychwycą. Eliminujemy w ten sposób regresję czyli psucie funkcjonalności, które działały poprawnie. Jest to naprawę sporo korzyści a im bardziej rozbudowany jest system tym bardziej testy będą nam pomagać.

\n\n

Piramida testów

\n\n

Wspominając o testach automatycznych nie sposób nie wspomnieć o piramidzie testów.

\n\n

piramida_testow

\n\n

Obrazuje ona jaki powinien być rozkład testów w naszym systemie. Na samym dole są testy jednostkowe, których powinno być jak najwięcej w naszym systemie. Sprawdzają one działanie pojedynczego komponentu. Podczas takiego testu komponent jest odizolowany od innych części systemu tak bardzo jak tylko się da wykorzystując tzw. zaślepki(mocks).

\n\n

Następne są testy integracyjne, które pozwalają sprawdzić czy nasze komponenty poprawnie ze sobą współpracują. Tutaj komponenty nie są już izolowane tylko łączone między sobą w celu sprawdzenia interakcji. Również tutaj są sprawdzane integracje z zewnętrznymi częściami systemu.

\n\n

No i na samym końcu testy e2e (end-to-end). Jest ich najmniej ponieważ zajmują najwięcej czasu. Ich celem jest przetestowanie funkcjonalności od początku do końca od strony użytkownika. Można tutaj wykorzystać narzędzia, które na żywo klikają na stronie symulując zachowanie użytkownika jednocześnie sprawdzając istnienie elementów UI na stronie

\n\n

Narzędzia do testowania

\n\n

Jako, że testowanie zaczyna być coraz bardziej popularne to i istnieją biblioteki i narzędzia, które wspomagają ten proces. W przypadku testerów manualnych nie potrzeba wiele ale przyda się system do zgłaszania błędów np.: JIRA ale wystarczy również zwykły excel lub inny arkusz gdzie będą wypisane błędy. W przypadku testów automatycznych mamy wiele dostępnych narzędzi PHPSpec i PHPUnit dla PHP oraz Mocha, Karma lub Jest dla Javascript’u dla testów jednostkowych, Behat dla integracyjnych czy też Protractor lub Selenium do e2e. Są to tylko przykładowe biblioteki o których słyszałem i w niektórych pisałem. Jednak na pewno jest ich o wiele więcej. Również inne języki między innymi takie jak Java, Go posiadają swoje biblioteki do testowania.

\n\n

A jak to wygląda u was? Piszecie testy w swoich projektach? Jeśli tak to w czym? Z jakich bibliotek korzystacie? A może uważacie, że jest to niepotrzebne? Zapraszam do dyskusji w komentarzach.

2017-07-17 15:06:00 czym-sa-testy-w-programowaniu ckhxjb6o0000yi3umb3hg09jv 2017-07-17 15:06:00 2017-07-17 15:06:00 -cj5hxnn7s00p1i3umcbwl6s31 Nowość w ES6 - klasy i rozkład obiektu https://fsgeek.pl/post/seria-es6-obiekty-i-klasy/

Do tej pory opisałem co się zmieniło w specyfikacji ES6 dla zmiennych i funkcji (pierwszy post znajdziecie tutaj a drugi tutaj). Teraz przyszedł czas na opisanie zmian w obiektach oraz parę słów na temat nowości jaką są klasy. Bardzo często nieświadomie już z tego korzystamy więc warto poczytać i używać tych funkcji świadomie.\n

\n\n

Obiekty

\n\n

Na pierwszy ogień postanowiłem się zająć obiektami ponieważ pojawiła się tutaj jedna bardzo ciekawa funkcjonalność, a mianowicie rozkład obiektu. Brzmi dziwnie ale idea jest prosta. Chodzi o rozłożenie obiektu na mniejsze składowe. Bardzo często obiekty traktujemy jak pojemniki do których wrzucamy różne rzeczy by w prosty sposób je przenosić. Jednak po przeniesieniu warto by było odzyskać te wewnętrzne elementy.

\n\n

rozklad_es5

\n\n

W ES5 wymagało to trochę pisania co widać powyżej. Na szczęście w nowym standardzie da się prościej.

\n\n

rozklad_es6

\n\n

Na pewno potrzebujemy mniej kodu by osiągnąć ten sam efekt, co sprawia, że nasz kod jest czytelniejszy. Jednak żeby działało to trzeba pamiętać o paru rzeczach. Po pierwsze jeśli chcemy skorzystać z uproszczonego zapisu np..:

\n\n
const {a,b,c,d} = obiekt \n
\n\n

to nasze zmienne a,b,c,d muszą być istniejącymi kluczami w naszym obiekcie ponieważ inaczej przybiorą wartość undefined. Jeśli chcemy rozłożyć obiekt na zmienne o innej nazwie to możemy tego dokonać takim zapisem

\n\n
const {a:a1,b:a2,c:a3,d:a4} =obiekt\n
\n\n

rozklad2

\n\n

Najpierw podajemy nazwę klucza potem znak dwukropka i następnie nazwę zmiennej pod której chcemy przechowywać wartość. Czasami może się zdarzyć, że będziemy korzystać w tym samym miejscu z różnych obiektów i nie chcielibyśmy wartości undefined ponieważ psułoby to aplikacje. Wtedy możemy skorzystać z wartości domyślnych. Działa to podobnie jak w przypadku funkcji

\n\n

rozklad_wartosc_domyslna

\n\n

Na sam koniec warto jeszcze wspomnieć że rozkład obiektu możemy wykorzystać w funkcjach

\n\n

rozklad_w_funkcjach

\n\n

Jak widać działa to w prosty sposób, ponieważ wystarczy że jako parametr funkcji damy nasze wyrażenie które rozkłada obiekt. I tak jak wspomniałem we wstępie jeśli pracujecie z Reactem to prawdopodobnie wykorzystujecie to żeby wyciągnąć parametry z obiektu props.

\n\n

Klasy

\n\n

No to teraz przyszedł czas na pewnego rodzaju nowość a mianowicie klasy. Dało się wprawdzie wszystko co chcę pokazać wykonać w ES5 ale teraz jest to wygodniejsze i wygląda podobnie do innych języków.

\n\n

klasy

\n\n

Jak widać zapis jest znajomy dla każdego kto programował obiektowo więc tutaj nie ma zaskoczenia. Mamy klasę, konstruktor z jednym argumentem i jedno pole. Warto wspomnieć, nie mamy tutaj oficjalnego wsparcia dla zakresów zmiennych i wszystkie są po prostu publiczne. Może w przyszłości zostanie to zmienione. Ale za to mamy mechanizm dziedziczenia klas, który wygląda następująco:

\n\n

klasy_dziedziczenie

\n\n

Przy pomocy słówka kluczowego super mamy dostęp do rodzica klasy. W tym przykładzie przy pomocy tego słówka wywołaliśmy konstruktor rodzica, który przypisał przekazane przez nas imię do zmiennej. W podobny sposób możemy uzyskać dostęp do funkcji zdefiniowanych u rodzica.

\n\n

klasy_dziedziczenie2

\n\n

Jednocześnie tworząc nową instancję klasy mamy dostęp do funkcji z klasy bazowej. Klasy w JS są dużym krokiem naprzód. Sprawiają, że ten język powoli przybliża się do innych języków obiektowych i może pewnego dnia będzie traktowany na równi z nimi. No i pisanie w nim zaczyna być coraz przyjemniejsze. Aktualnie klasy możemy spotkać między innymi w React’cie gdzie w ten sposób są tworzone komponenty. A wy co uważacie o klasach i kierunku w którym zmierza JavaScript. Jest dobry, niepotrzebny czy może za wolny? Zapraszam do dyskusji.

2017-07-24 09:11:25 nowosc-w-es6-klasy-i-rozklad-obiektu ckhxjb6o0000yi3umb3hg09jv 2017-07-24 09:11:25 2017-07-24 09:11:25 -cj5rpu0ig00pfi3um4p13g884 Szybka powtórka z selektorów CSS https://fsgeek.pl/post/szybka-powtorka-z-selektorow-css/

Dziś chciałbym się pochylić nad całkowitymi podstawami CSS bez których nie dałoby się czegokolwiek ostylować. Selektory są używane cały czas podczas tworzenia stron i cały czas dochodzą nowe, które mają ułatwiać nam pracę. Również powoli szykują się selektory 4-tego poziomu, o których chcę napisać parę słów w drugiej części postu.\n

\n\n

Selektory klasy 1&2

\n\n

Klasa pierwsza i druga są to najbardziej znane selektory, które wykorzystujemy najczęściej. Są podstawą przy tworzeniu stron internetowych. Mamy tutaj następujące selektory:

\n\n
    \n
  • Element
    \nJako element możemy wstawić dowolny prawidłowy element z html np..: p, div, h1, header,footer. Następuje tutaj przypisanie styli do każdego elementu na naszej strony. Przykładowe zastosowanie np.: przypisanie czcionki do elementu body
    • \n
  • .nazwa-stylu /*.nazwa-stylu
    \nTutaj styl przypisujemy do konkretnej nazwy klasy, którą umieściliśmy w elemencie html pod atrybutem class. Bardzo często wykorzystywane w normalnej pracy.
    • \n
  • Element.nazwa-stylu
    \nBardziej szczegółowe przypisanie co do przedstawionego powyżej. Styl będzie przypisany tylko jeśli interesujący nasz element będzie posiadał atrybut class z wartością ‘nazwa-stylu’.
    • \n
  • #identyfikator / element#identyfikator
    \nPrzypisanie stylu do elementu, który posiada atrybut id z wartością identyfikator. Można też wcześniej podać typ elementu ale jak dla mnie jest to niepotrzebne ponieważ powinien istnieć tylko jeden element z konkretnym identyfikatorem. Również lepiej nie korzystać z tego tylko oprzeć stylowanie o klasy.
    • \n
\n\n

Stylowanie przy pomocy atrybutów

\n\n
    \n
  • Element[atrybut]
    \nElementy HTML mogą posiadać atrybuty, które precyzują jak element będzie się wyświetlać lub zachowywać. Pełną listę atrybutów dla każdego elementu możecie znaleźć tutaj. Korzystając z tego selektora można ostylować tylko elementy posiadające atrybut, który nas interesuje.
    • \n
  • Element[atrybut=“wartość”]
    \nTutaj właściwie nie ma co komentować. Jest to rozszerzenie selektora powyżej, który sprawdza również wartość.
    • \n
  • Element[atrybut ~=“wartość”]
    \nNiektóre atrybuty mogą przyjąć więcej niż jedną wartość. Kolejne wartości są oddzielane spacja np..: atrybut=“wartość1 wartość2 wartość wartosc3” itd.. Korzystając z tego selektora możemy przypisać styl jeśli jedną wśród tych wartości jest ta poszukiwana przez nas np.: wartość.
    • \n\n

  • Element[atrybut | =“wartość”]
    \nTen selektor jest ciekawy ponieważ przypisuje styl do elementu który posiada szukany przez nas atrybut z konkretną wartością lub też posiada wartość po której następuje myślnik i dalszy tekst np.: atrybut|=“komórka” znajdzie takie coś <element atrybut="komórka"> jak i coś takiego <element atrybut="komórka-1">

    \n\n

    Stylowanie przy pomocy położenia elementów

    • \n\n

  • Element1 Element2 / Element1 >> Element2(CSS 4)
    \nZapis ten oznacza, że styl zostanie przypisany do każdego Elementu2, który znajduje się wewnątrz Elementu1. W tym selektorze nie ma znaczenia jak głęboko znajduje się Element2. Do tej pory była wykorzystywana spacja by uzyskać ten efekt ale w CSS4 zostanie wprowadzony symbol ‘>>’ który będzie tak samo interpretowany przez przeglądarki

    • \n\n

  • Element1 > Element2
    \nEfekt jest podobny do powyższego selektora z pewną różnicą. Element2 zostanie ostylowany tylko jeśli jest bezpośrednim dzieckiem Elementu1. Jeśli jest gdzieś niżej w hierarchii to nie zosatnie ostylowany
    \nStyl: p > h1

    \n\n
    <p>\n    <h1>Ten zostanie ostyloway</h1>\n    <div>\n        <h1>Ten już nie</h1>\n    </div>\n<p>\n
    • \n\n

  • Element1 + Element2
    \nTutaj Element2 zostanie ostylowany o ile jest położony bezpośrednio po Element1 i mają wspólnego rodzica
    \nStyl: p+h1

    \n\n
    <p>\n</p>\n<h1>Ten zostanie ostyloway</h1>\n<h1>Ten już nie</h1>\n
    • \n
\n\n

Stylowanie przy pomocy pseudoklas

\n\n

Następne parę elementów jest określane jako pseudoklasy i w pewien sposób pozwalają kontrolowaac zachowanie elementów lub też ich położenie

\n\n
    \n
  • a:link
    \nW ten sposób możemy ostylować link, który nie został jeszcze odwiedzony.
    • \n
  • a:visited
    \nDotyczy linku, który został przez nas odwiedzony. Dobrze to widać np.: w Google’u gdie odwiedzone linki zmieniają kolor. W zależności od przeglądarki po pewnym czasie linki tracą atrybut visited.
    • \n
  • element:active
    \nW ten sposób możemy ostylować elementy które zosatły aktywowane przez użytkowników np.: kliknął w link ale nie puścił jeszcze przycisku myszy co pozwoliłoby mu przejść na inną stronę. Co znaczy dla elementu być aktywnym możecie znaleźć tutaj
    • \n
  • Element:hover
    \nElement otrzymuje klasę hover w momencie gdy użytkownik umieści kursor myszki nad elementem.
    • \n
  • Element:focus
    \nZa pomocą tej pseudoklasy możemy określić jak ma się zachowywać element gdy zostanie na niego nałożony focus. Dzieje się to na przykład gdy klikniemy na pole input lub też przechodzimy po stronie za pomocą przycisku tab. Dzięki odpowiedniemu wykorzystaniu tej klasy pomagamy użytkownikom w poruszaniu się po stronie.
    • \n\n

  • Element:first-child
    \nFirst-child pozwala przypisać styl do pierwszego dziecka danego typu dla danego rodzica. Może być wykorzystywany z selektorami położenia które zostały opisane przed chwilą lub też samodzielnie np..:
    \nStyl: div > h1:first-child

    \n\n
    <div>\n    <h1>Ten zostanie ostyloway</h1>\n    <h1>Ten już nie</h1>\n</div>\n<h1>Ten już nie</h1>\n
    \n\n

    Styl: h1:first-child

    \n\n
    <body>\n    <h1>Ten zostanie ostyloway</h1>\n    <h1>Ten już nie</h1>\n<div>\n    <h1>Ten zostanie ostyloway</h1>\n    <h1>Ten już nie</h1>\n    <p>\n        <h1>Ten zostanie ostyloway</h1>\n    </p>\n</div>\n</body>\n
    • \n
\n\n

To by było na tyle w pierwszej części posta. Początkowo chciałem opisać wszystkie dostępne selektory w jednej części ale jak zobaczyłem ile tego wychodzi to uznałem, że lepiej będzie to podzielić. W następnym poście będzie ciekawiej ponieważ opisze seleketory klasy 3 oraz postaram się opisać te nadchodzące z klasy 4.

2017-07-31 05:30:07 szybka-powtorka-z-selektorow-css ckhxjb6o0000yi3umb3hg09jv 2017-07-31 05:30:07 2017-07-31 05:30:07 -cj62dz26w00pti3um638j93or Jak pisać kod by po tobie nie przeklinali? https://fsgeek.pl/post/jak-pisac-kod-by-inni-nie-przeklinali/

Długość życia kodu oraz programów jest długi. Powoduje to często, że osoby które zaczynały go pisać i znają go od podszewki nie prowadzą go do końca. Myślę, że każdy programista z dłuższym stażem dostał kod nad którym miał ochotę przeklinać ponieważ był nieczytelny, zagmatwany i praca z nim to była udręka. Dziś chciałbym się pochylić nad rzeczami które najczęściej wkurzają i jak nim zapobiegać by inni nie musieli po nas przeklinać.\n\n1. Długi kod
\n Chyba nie ma nic gorszego niż projekt, który próbujesz zrozumieć i trafiasz na metody które liczą po kilkadziesiąt lub nawet kilkaset linijek. Jest to według mnie rzecz, która odrzuca od projektu na samym początku. Co z tego, że autor potrafił się w tym odnaleźć, skoro to nie on musi w nim teraz pracować. Dlatego podczas pisania kodu, starajmy się aby było on możliwie jak najmniejszy. Jeśli widzimy że coś możemy wydzielić i użyć w innym miejscu zróbmy to bez zastanowienia. Takie coś się zwróci w przyszłości z nawiązką.\n2. Magic numbers
\n Kolejna rzecz, która potrafi przyprawić o ból głowy czyli pojawiające się nagle w kodzie jakieś liczby. Niech pierwszy rzuci kamieniem kto nie spotkał w kodzie wolnostojących liczb i zastanawiał się co one robią, po co i dlaczego akurat taka wartość. Czasami można znaleźć w takim kodzie informacje w komentarzu ale jest niebezpieczeństwo, że informacja tam jest nieaktualna. Dużo lepszym pomysłem jest umieszczenie takich liczb w stałych którym nadamy odpowiednie nazwy. Dużo lepiej wygląda takie coś
\n \n rows = ITEMS_NUMBER/ ITEMS_PER_ROW\n
\n Od czegoś takiego
\n \n rows = 50 / 4 \n
\n Kolejną zaletą jest łatwość zmiany takiej wartości jeśli występuje kilka razy w kodzie.\n3. Brak testów
\n Tego chyba najbardziej brakuje podczas wchodzenia do nowego projektu kiedy nie znamy struktury i wszystkich zależności. Bez testów ciężko sprawdzić czy czegoś przez przypadek nie zepsuliśmy. Można powiedzieć, że wtedy błądzimy we mgle. Dobrze napisane testy nie tylko pomagają nam podczas tworzenia oprogramowania ale również ułatwiają dodawanie nowych funkcjonalności.\n4. Brak Readme
\n Zanim zaczniemy dłubać w kodzie musimy postawić całe środowisko. Aktualnie gdy używamy w większości Dockera może to być skomplikowane i wtedy dobry plik Readme jest na wagę złota. Warto go pisać ponieważ znowu to co jest dla nas oczywiste nie musi takie być dla innych. Jeszcze gorszym przypadkiem jest nieaktualny plik, który został napisany na starcie projektu ale nie był aktualizowany a architektura zdążyła się już kilka razy zmienić. Może to poważnie spowolnić postawienie środowiska. Nie zaniedbujmy pliku Readme tylko aktualizujmy wraz z rozwojem aplikacji tak aby nowa osoba była w stanie na jego podstawie postawić nowy projekt\n5. Niekompletne fixtures
\n No i na koniec coś co jest związane z poprzednim punktem a mianowicie fixtures czyli fałszywe dane. Jest to bardzo wygodna rzecz ponieważ możemy sobie w prosty sposób wygenerować poprawne dane dla naszej aplikacji. I wszystko jest dobrze o ile kod generujący fałszywe dane rozrasta się wraz z rozwojem naszej aplikacji i bazy danych. Jeśli tak się nie dzieje próba wygenerowania fixtures może się skończyć błędem i zostaniemy bez żadnych przykładowych danych. Dbanie o fixtures daje również poczucie bezpieczeństwa ponieważ nawet jeśli coś przekombinujemy podczas pisania kodu to możemy przywrócić sobie czystą bazę danych.

\n\n

A wy coś byście jeszcze dodali do listy? Co was najbardziej denerwuje jak dołączacie do istniejącego kodu? Zastanawialiście się kiedyś co by można było poprawić by inni nie marudzili na nasz kod? Zapraszam do komentowania.

2017-08-07 16:43:35 jak-pisac-kod-by-po-tobie-nie-przeklinali ckhxjb6o0000yi3umb3hg09jv 2017-08-07 16:43:35 2017-08-07 16:43:35 -cj6ejsww000q8i3umensi4w09 Programowanie w szkołach - czy to wyjdzie? https://fsgeek.pl/post/programowanie-w-szkolach/

Powoli zbliża się wrzesień, nowy rok szkolny i pierwszy rok reformy edukacji. Jedną z nowości wprowadzonych do szkół jest nauka programowania w szkołach podstawowych. Jednak czy jest to dobry pomysł? Czy mamy na to warunki? Czy każdego da się nauczyć programowania?\n

\n\n

Lekcje informatyki w szkołach?

\n\n

Jako, że jestem ciągle dosyć młody to pamiętam lekcje informatyki w szkole i muszę z przykrością stwierdzić, że nie były one wysokich lotów. Lekcje były nijakie, nie pokazywały nic ciekawego, były właściwie przedłużeniem przerwy. Podręczniki do tego przedmiotu były podobne do lekcji. Nie pamiętam czy była jakaś różnica w programie szkoły podstawowej(gdzie podstawy są na miejscu) i gimnazjum(gdzie powinny być już rzeczy bardziej zaawansowane). Zmieniło się to dopiero w technikum informatycznym gdzie była odpowiednia kadra. Pamiętam, że na pierwszych zajęciach z informatyki prowadzący powiedział nam, że jeśli myślimy, że znamy Worda, Excela, Accessa to się mylimy. I miał rację. Każda lekcja była ciężka, wymagająca i pokazywała za każdym razem nowe rzeczy. A więc da się. Tylko do tego potrzeba osób, które się znają na informatyce a nie tylko ukończyły kurs podyplomowy by móc jej uczyć ponieważ to nie jest to samo. Bardzo często nauczyciele w podstawówce, gimnazjum są tylko po takim kursie i potrafią prowadzić lekcje tylko z podręcznikiem. Ze świecą szukać osób, które naprawdę się znają i potrafią nie tylko wytłumaczyć a zarazić swoją pasją.

\n\n

Programowanie na zajęciach

\n\n

I teraz do podstawy programowej ma trafić nauka programowania, które nie jest najłatwiejszą dziedziną informatyki i nie da się tego nauczać jeśli się samemu tego nie rozumie. Wszystko też zależy co będzie rozumiane pod hasłem programowanie. Na przykład taki Scratch może być idealnym pomysłem dla podstawówki ale także i tutaj trzeba ucznia zainteresować tematem bo wtedy będą najlepsze efekty. A ciężko to zrobić jeśli się słabo to rozumie lub nawet w ogóle. Tak samo na kolejnych etapach edukacji przy wprowadzaniu(zapewne) bardziej skomplikowanych zagadnień potrzeba osób, które się na tym znają. I teraz pytanie brzmi ile osób które aktualnie nauczają informatyki w podstawówce i gimnazjum będą w stanie uczyć i zainteresować ucznia tematem programowania?

\n\n

Czy wszyscy muszą się uczyć programowania?

\n\n

Jednak najważniejsze pytanie jakie chodzi mi po głowie to czy musi to być obowiązkowe? Nic nie potrafi zniechęcić do siebie jak obowiązek robienia czegoś. Szczególnie w połączeniu z nieciekawymi zajęciami takie obowiązkowe nauczanie programowania może bardziej zniechęcić niż zachęcić. Zgadzam się, że programowanie wymaga logicznego myślenia, rozwiązywania problemów, widzenia pewnych wzorców postępowań i kojarzenia ze sobą faktów. Są to bardzo potrzebne umiejętności w dzisiejszych czasach ale nie jestem pewien czy wprowadzenie programowania dla wszystkich jest dobrym pomysłem.

\n\n

Czy jest to ostatecznie dobry pomysł?

\n\n

I to jest właściwie najcięższe pytanie na które chciałbym odpowiedzieć tak ale nie jestem tego pewien. Z jednej strony jako programista chciałbym żeby to się udało, ponieważ na papierze pomysł wygląda na dobry i jest to jakiś krok naprzód w stosunku do tego jak informatyka wygląda do tej pory. Z drugiej strony jednak wiem, że część(jak nie większość) nauczycieli nie jest przygotowana by móc to w dobry i przystępny sposób przedstawić uczniom, zadawać im ciekawe rzeczy do robienia i odpowiadać na pytania. Czas pokaże czy wprowadzenie programowania cokolwiek zmieni czy będzie tak jak dotychczas.

\n\n

A wy co sądzicie o wprowadzeniu programowania do lekcji informatyki w szkole. Pomysł dobry czy zły? Wyjdzie czy okaże się totalną klapą? Zapraszam do dyskusji w komentarzach.

2017-08-16 05:00:00 programowanie-w-szkolach-czy-to-wyjdzie ckhxjb6o0000yi3umb3hg09jv 2017-08-16 05:00:00 2017-08-16 05:00:00 -cj7eit8og00rdi3um5yomc0ad Testowanie komponentów w React'cie - Jest i Enzyme https://fsgeek.pl/post/react-testowanie-jest-i-enzyme/

Jak już kiedyś wspominałem w poście dotyczącym testowania(znajdziecie go tutaj) testowanie jest ważnym elementem podczas tworzenia oprogramowania. Dziś chciałbym poświęcić chwilę czasu na testy jednostkowe w React’cie. Testy jednostkowe powinniśmy tworzyć dla właściwie każdego komponentu dzięki czemu będziemy mieć pewność, że działa poprawnie i niczego nie psujemy podczas zmian lub ulepszania kodu.\n

\n\n

Jest i Enzyme

\n\n

Oficialne narzędzie create-react-app, które posłużyło mi do stworzenia szkieletu aplikacji korzysta z frameworka Jest do uruchamiania testów. Oprócz tego zdecydowałem się skorzystać z biblioteki Enzyme, która ułatwia testowanie komponentu o czym będzie więcej za chwilę. Najpierw parę słów poświęcę Jest’owi. Aby uruchomić testy musimy się trzymać pewnej konwencji, którą narzuca nam Jest a mianowicie sposób tworzenia plików, które ma uruchomić. Mamy tutaj 3 opcje:

\n\n
    \n
  • Folder o nazwie __tests__ w którym plikami testowymi są wszystkie pliki o rozszerzeniu *.js
    • \n
  • Pliki testowe o nazwie *.spec.js
    • \n
  • Pliki testowe o nazwie *.test.js
    • \n
\n\n

Pliki te mogą w dowolnej lokalizacji wewnątrz folderu src. Zalecane jest również by pliki te były jak najbliżej testowanych komponentów. Ja osobiście preferuję pliki o nazwie *.spec.js, które umieszczam w tym samym folderze co komponent.

\n\n

Aby napisać test musimy w nim umieścić blok it(), który zawiera nazwę testu oraz funkcję, która go przeprowadzą. Można jeszcze umieścić bloki it() wewnątrz bloku describe() aby bardziej poukładać kod. Nie jest to wymagane jednak ja z tego korzystam, ponieważ pomaga w poukładaniu testów. Taki przykładowy szblon pliku testowego wygląda następująco:

\n\n
describe('NazwaKomponentu',()=>{\n    it('renders compononent',()=>{\n        //ciało funkcji które przeprowadzi test\n    })\n})\n
\n\n

Warto również tutaj wspomnieć, że plik testowy musi zawierać przynajmniej jeden test(blok it()), ponieważ w innym przypadku będzie wyrzucał następujący błąd:

\n\n

empty_test

\n\n

Każde ciało funkcji, które będzie przeprowadzało test będzie zawierać następującą konstrukcję

\n\n
expect(…).toEqual(…)\n
\n\n

Jest to dosyć proste i wykorzystuje naturalny język. Wewnątrz funkcji expect musimy umieścić to co chcemy testować np.: funkcję, natomiast wewnątrz funkcji sprawdzajacej toEqual() spodziewany przez nas wynik np.:

\n\n
Expect(silnia(0)).toEqual(1)\n
\n\n

Zamiast funkcji toEqual możemy stosować inne dostarczone nam przez Jest funkcje np.: toBe(), toHaveBeenCalled(), toContain() itd. Całą listę możecie zobaczyć tutaj

\n\n

Enzyme

\n\n

W takim razie do czego nam jest potrzebny Enzyme? Ano do renderowania komponentu i wyszukiwania w nim istotnych dla nas elementów. Chodzi o to by podczas testowania komponentu móc w nim znaleźć szukany przez nas element np. p i zwrócić na przykład tekst, który w nim się znajduje. Zanim opiszę pokrótce tą bibliotekę to musimy ją zainstalować przy pomocy następujących komend:

\n\n
yarn  add enyme \nyarn add react-test-renderer react-dom\n
\n\n

W Enzymie mamy 3 sposoby tworzenia komponentu:

\n\n
    \n
  • shallow - tworzy komponent bez tworzenia jego dzieci, nie wowułe funkcji należących do cyklu życia komponentu
    • \n
  • mount - tworzy komponent razem ze wszystkimi dziećmi oraz wywołuje funkcje należące do cyklu życia komponentu
    • \n
  • render - przekształca komponent React’owy do statycznego pliku HTML
    • \n
\n\n

Tworzenie komponentu wewnątrz testów może wyglądać następująco:

\n\n
import {shallow} from 'enzyme'\nconst wrapper = shallow(<Komponent />)\n
\n\n

W tak stworzonym komponencie możemy wyszukiwać elementy np.: przy pomocy funkcji find lub też zwracać tekst przy pomocy funkcji text(). Możemy również zarządzać zmiennymi props i state z komponentu. Wszystkie dostępne metody możecie znaleźć tutaj

\n\n

Przetestujmy cos wreszcie

\n\n

Wstęp troszkę mi zajął ale był potrzebny by teraz przejść do właściwiej części postu. Chciałbym teraz pokazać jak można przetestować prosty komponent, który wyświetla liczbę kliknięć przycisku. Kod komponentu wygląda następująco:

\n\n
export class CounterComponent extends Component{\n    state = {\n        counter:0\n    }\n\n    increaseCounter = ()=>{\n        this.setState(prev=>({\n            counter: prev.counter+1\n        }))\n    }\n    render(){\n        return(\n            <div>\n                <p>Counter:</p>\n                <span>{this.state.counter}</span>\n\n                <button onClick={this.increaseCounter}>Click me</button>\n            </div>\n        )\n    }\n}\n
\n\n

Nie jest on duży ale został specjalnie dobrany by pokazać parę ciekawych rzeczy. Testowanie komponentów zwykle zaczynam od sprawdzenia czy wyświetla wszystkie potrzebne mi elementy. Dla tego komponentu może to wyglądać następująco:

\n\n
it('renders compononent',()=>{\n    const wrapper = shallow(<CounterComponent/>)\n    expect(wrapper.find('p').text()).toEqual('Counter:')\n    expect(wrapper.find('span').text()).toEqual('0')\n})\n
\n\n

Widać tutaj przykład połączenia Jest’a i Enzym’a. Za pomocą tego drugiego wyszukujemy interesujący nas element by potem zwrócić tekst do porównania. Oprócz samego sprawdzenia czy komponent jest tworzony ze wszystkimi elementami możemy sprawdzić czy właściwie reaguje na zmiany wartości props lub state.

\n\n
it('changes value in span according to state',()=>{\n    const wrapper = shallow(<CounterComponent/>)\n    expect(wrapper.find('span').text()).toEqual('0')\n    wrapper.setState({counter:10})\n    expect(wrapper.find('span').text()).toEqual('10')\n})\n
\n\n

Tutaj wykorzystuję jedną z funkcji Enzyme by zmienić wartość counter w obiektcie store a następnie sprawdzam czy mój komponent właściwie to wyświetlił. No i jeszcze został nam przycisk który zwiększa wartość counter o 1. To również możemy przetestować:

\n\n
it('increases state counter value by one on click', ()=>{\n    const wrapper = shallow(<CounterComponent/>)\n    expect(wrapper.find('span').text()).toEqual('0')\n    wrapper.find('button').simulate('click')\n    expect(wrapper.find('span').text()).toEqual('1')\n})\n
\n\n

Aby zasymulować przeciśnięcie przycisku przez użytkownika wykorzystałem funkcję pochodzącą z Enzyme o nazwie simulate(). Na sam koniec warto puścić testy w konsoli przy pomocy polecenia yarn test i zobaczyć czy wszystkie przechodzą na zielono.

\n\n

green_test

\n\n

Jeśli w trakcie rozwijania kodu jakiś zmieni się na czerwono to znaczy, że albo coś popsuliśmy i musimy poprawić kod lub zmiana kodu była zrobiona specjalnie i musimy poprawić testy

\n\n

A wy czego używacie do testowania i czy w ogóle testujecie komponenty? Napiszcie też czy wam się podobało i czy chcecie więcej postów dotyczących testowania różnych elementów. No i jak macie jakieś problemy to śmiało piszcie a może uda mi się pomóc a jeśli zbierze się więcej takich ciekawych rzeczy to stworzę z tego osobny post :)

2017-09-10 09:11:58 testowanie-komponentow-w-reactcie-jest-i-enzyme ckhxjb6o0000yi3umb3hg09jv 2017-09-10 09:11:58 2017-09-10 09:11:58 -cj837355k00sdi3um04st5x2t FrontendCon 2017 moim okiem https://fsgeek.pl/post/frontend-con-2017/

FrontendCon był pierwszą konferencją tego rozmiaru dla mnie. Do tej pory chodziłem na mniejsze, jednodniowe eventy więc taka impreza to było dla mnie niesamowite uczucie. Jendak czy było warto na nią pojechać?\n

\n\n

FrontendCon 2017

\n\n

Jest to jedna z największych konferencji w Europie na którą przyjechało w tym roku 30 prelegentów z całego świata by dzielić się swoją wiedzą i doświadczeniem. Przez dwa dni, wypełnione po brzegi wykładami można było zagłębić się w szeroki świat frontendu. Oprócz tego na terenie konferencji były stanowiska sponsorów wśród których były między innymi duże firmy informatyczne. Można było podejść i porozmawiać z przedstawicielami na temat pracy, zgarnąć parę gadżetów a może nawet i pracę. Oprócz tego można było porozmawiać na temat tajników druku 3D oraz sprawdzić na własne oczy jak wygląda świat za okularów HTC Vive. Jednak najważniejsze były wykłady.

\n\n

Lea Verou - CSS (Variable) Secrets

\n\n

Wykład inauguracyjny, który zrobił na mnie duże wrażenie. Lea jest doświadczoną programistką mającą sporą wiedzę na temat CSS. Swego czasu wydała książkę CSS Secrets oraz jest członkiem CSS Working Group. Wiedza i doświadczenie były widoczne podczas prezentacji dotyczącej nowości w CSS a mianowicie zmiennych. Lea pokazała jak z nich korzystać, kiedy można oraz kiedy się to nie uda. Przedstawiła również praktyczne możliwości zastosowania oraz kilka ciekawych. Nie przeszkodziło również momentami dziwne zachowania przeglądarki Chrome ;) Nie udało mi się znaleźć jeszcze nagrania z konferencji ale znalazłem tą prezentację z zeszłego roku Lea Verou - CSS Variables: var(–subtitle

\n\n

Henri Bergius - Flow-Based Programming for JavaScript

\n\n

Tutaj była dla mnie niespodzianka spowodowana tematem prezentacji. Poszedłem na prezentację ponieważ myślałem, że będzie na temat Flow jednak nie byłem nią ostatecznie zawiedziony. Henri przedstawił rozwiązanie NoFlow i opowiedział na temat zalet jego korzystania. Dzięki niemu można budować aplikację przy pomocy stworzonych specjalnie małych komponentów projektując jedynie połączenia pomiędzy danymi komponentami. Prezentacji jeszcze nie ma ale warto wejść na stronę NoFlow i zobaczyć jak to wygląda

\n\n

Kacper Sokołowski - You use Content Security Policy, don’t you?

\n\n

Pierwsza z prezentacji dotycząca bezpieczeństwa aplikacji internetowych na jakiej byłem. Kacpers w prostych słowach opisał czym jest CSP oraz na praktycznym przykładzie pokazał jak może nam to pomóc w walce przeciwko XSS. Stosowanie CSP nie jest trudne, wymaga tylko jego konsekwentnego stosowania. Warto zapoznać się z prezentacją ponieważ jest już dostępna pod tym adresem

\n\n

Glenn Reyes - Leveraging code-splitting in React apps

\n\n

Prezentacja dotycząca rozsądnego dzielenia naszej aplikacji napisanej w Reacie na osobne paczki w celu zwiększenia wydajności strony. Dzięki takiemu rozwiązaniu możemy pobrać tylko kod który jest nam w danej chwili potrzebny co pozwala zaoszczędzić na transferze. Glenn również opowiadał o asynchronicznym ładowaniu komponentów i jak można tego użyć. Jeśli jesteście tego ciekawi to zobaczcie jego prezentację pod tym adresem

\n\n

Ferran Negre Pizarro - Testing React & Redux applications with the new Jest: Snapshots come into play!

\n\n

Następna prezentacja, która kontynuuje temat Reacta. Ferran opowiedział jak wykorzystać nową funkcjonalność w Jest - Snapshopty, nie tylko do testowania komponentów ale również akcji i reducera. Po tej prezentacji użyłem zaprezentowane sposobu u siebie w projekcie i wygląda to naprawdę ładnie. Póki co nie widzę jego prezentacji ale jeśli tylko się pojawi to dam znać

\n\n

Christoffer Noring - Graphql vs REST

\n\n

Prezentacja o GraphQL była dla mnie najlepszą prezentacją podczas pierwszego dnia. Nie była to lekka prezentacja ponieważ zawierała wiele konkretów. Pomimo tego, że do tej pory tylko słyszałem co nieco o GraphQL to dzięki prowadzącemu zrozumiałem wszystko co przedstawiał. Prezentacja jest świetną wiedzą w pigułce dla początkujących. Jeśli chcielibyście ją zobaczyć to odwiedźcie ten link

\n\n

Patrick Stapfer - The Road to a Statically Typed JavaScript Future

\n\n

Pierwsza prezentacja drugiego dnia konferencji dotycząca flow (w końcu ;) ) ale nie tylko. Patrick skupił się na statycznym typowaniu w JS - co aktualnie mamy, jakie daje nam to możliwości i na co jeszcze czekamy. Przedstawił również język ReasonML, który jest w pełni typowany i do tego kompilowany do JS. Jeśli chcecie wypróbować ten język to zobaczcie pod tym linkiem

\n\n

Martin Sonnenholzer - Train your browser to decide what’s next

\n\n

Jedyna prezentacja podczas konferencji dotycząca szerokiego tematu uczenia maszynowego. Martin przedstawił w prosty i zrozumiały sposób (bez zbędnej matematyki) jak budować i wykorzystywać drzewo decyzyjne. Było to bardzo ciekawe i teraz czekam na kod, który Martin obiecał udostępnić w połowie października.

\n\n

Asim Hussain - It can happen to anyone

\n\n

Prezentacja z bezpieczeństwa, która według mnie była najlepsza podczas drugiego dnia konferencji. Asim jest świetnym mówcą i nie wiem kiedy minął ten czas przeznaczony na prezentację. Na pewno będę chciał pójść na kolejną jego prezentację i każdego zachęcam do zrobienia tego. Jak tytuł wskazuje prezentacja była o tym że każdemu może się zdarzyć włamanie na jego serwer. Dużo czasu zostało poświęcone ostatniemu dużemu “włamaniu” na Githuba. Asim krok po kroku wyjaśnij jak dzięki małym dziurom w zabezpieczeniach można było wykonać swój kod na serwerze. Zachęcam do obejrzenia prezentacji pod tym linkiem

\n\n

Louay Alakkad - How I met your coverage threshold: The path to more valuable & enjoyable front-end testing

\n\n

Testowanie jest coraz ważniejsze więc i na konferencji trafiła się kolejna prezentacja z tego tematu. Tym bardziej mniej technicznie a bardziej jak należy pisać oraz jakich narzędzi używać by śledzić pokrycie kodu testami. Prezentacja ciekawa uzupełniająca wiedzę czysto techniczną.

\n\n

Nick Balestra - Breaking the frontend monolith

\n\n

No i na sam koniec prezentacja na temat rozbijaniu aplikacji frontendowej na mniejsze części. Prezentacja była dosyć ciekawa i opowiadała o tym jak Nick i firma OpenTable dzieliła aplikację na mniejsze części przy pomocy biblioteki OpenComponents. Rozwiązanie wygląda na ciekawe i na zatrzymanie się na tym na chwilę. Może nawet spróbuję to w praktyce? Jeśli chcecie obejrzeć prezentację to znajdziecie ją tutaj

\n\n

To były dwa wymagające ale w pełni zadowalające dni. Nie mogę powiedzieć, że wiele się nauczyłem bo to jest niemożliwe ale wiele rzeczy zobaczyłem i będę chciał je kontynuować. A wy byliście na FrontendCon 2017? Co uważacie o tej konferencji? Lub też ogólnie co uważacie o takich konferencjach? Lubicie w nich uczestniczyć czy omijacie szerokim łukiem? Zapraszam do komentowania.

2017-09-27 15:37:59 frontendcon-2017-moim-okiem ckhxjb6o0000yi3umb3hg09jv 2017-09-27 15:37:59 2017-09-27 15:37:59 -cj89rn40000sni3um17je10cj Czym jest GraphQL? https://fsgeek.pl/post/czym-jest-graphql/

Jak już wielokrotnie wspominałem GraphQL mnie w pewien sposób zauroczył na tegorocznym FrontendCon. Zauroczył mnie tak bardzo, że postanowiłem się tym chwilę pobawić. Stąd też mam zamiar napisać małą serię dotyczącą tego rozwiązania w miarę postępu moich zabaw. Dziś chciałbym zacząć od podstaw czyli czym jest GraphQL oraz jak można rozpocząć zabawę z nim.\n

\n\n

Co to GraphQL?

\n\n

GraphQl jest sposobem komunikowania się z serwerem API, który powstał dwa lata temu jako alternatywa REST’a. Żeby powiedzieć w jaki sposób jest od niego różny muszę przypomnieć na czym się opiera dotychczas najczęściej używany REST. Jak wszyscy wiedzą jest to swego rodzaju styl w projektowaniu API. Zgodnie z nim każdy model danych jest dostępny pod osobnym adresem. Mając na przykład sklep internetowy możemy mieć następujące adresy:

\n\n
    \n
  • /klient
    • \n
  • /magazyn
    • \n
  • /produkty
    • \n
  • /dostawcy
    • \n
  • itd..
    • \n
\n\n

Tak naprawdę liczba takich adresów nigdy nie będzie mała a wręcz przeciwnie będzie rosła wraz z systemem. Należy również pamiętać, że dla prawie każdego adresu trzeba stworzyć komplet wersji do obsługiwania zapytań GET, POST,PUT,DELETE. W ten sposób otrzymamy sporą liczbę adresów do utrzymania.

\n\n

W GrapQL jest zupełnie na odwrót. Mamy tylko jeden adres do którego możemy się zwracać o dane. To co otrzymamy zależy tylko i wyłącznie od nas i od tego jak skonstruujemy zapytanie.

\n\n

Jak rozpocząć zabawę z GraphQL

\n\n

Skoro powiedziałem czym jest po krótce GraphQL to warto by było wspomnieć jak zacząć się nim bawić. Ja zabawę zacząłem od postawienia go na serwerze Node’a. Dzięki temu mogę się bawić tak jakbym wykorzystywał to w normalnej pracy. Aby zacząć trzeba zainstalować odpowiednie paczki node’a:

\n\n
yarn add express express-graphql graphql\n
\n\n

Teraz wystarczy napisać parę linijek kodu by wszystko działało ;p. Kod został wzięty z oficialnej dokumentacji GraphQL.

\n\n
var express = require('express');\nvar graphqlHTTP = require('express-graphql');\nvar { buildSchema } = require('graphql');\n\nvar schema = buildSchema(`\n  type Query {\n    hello: String\n  }\n`);\n\nvar root = {\n  hello: () => {\n    return 'Hello world!';\n  },\n};\n\nvar app = express();\napp.use('/graphql', graphqlHTTP({\n  schema: schema,\n  rootValue: root,\n  graphiql: true,\n}));\napp.listen(4000);\nconsole.log('Running a GraphQL API server at localhost:4000/graphql');\n
\n\n

Pierwsze 3 linijki to zwykłe zaimportowanie potrzebnych plików. Pierwsza najważniejsza rzecz jaką należy stworzyć to schemat. Definiuje ona o co tak naprawdę możemy odpytywać nasz serwer. W schemacie musi być zdefiniowany typ Query ponieważ to jego szuka GraphQL. Jego brak spowoduje wywołanie błędu podczas uruchamiania serwera. Warto również spojrzeć na definicję pola w schemacie. Oprócz samej nazwy pola jest tam również typ zwracanego zasobu. Domyślnie jest wspieranych 5 typów: String, Int, Float, Boolean oraz ID. Wszystkie inne typy można sobie stworzyć samemu.

\n\n
var root = {\n  hello: () => {\n    return 'Hello world!';\n  },\n};\n
\n\n

Jako, że zdefiniowaliśmy jakie pola są dostępne to teraz musimy jeszcze określić jak się ma zachować GraphQL, kiedy użytkownik odpyta serwer o dany zasób. Innymi słowy musimy określić co serwer ma zwrócić. Do tego służy tak zwana funkcja ‘resolver’, która musi być stworzona dla każdego pola zdefiniowanego w schemacie. W tym przykładzie funkcje te przechowujemy we wspólnym obiekcie, który potem jest przekazywany do instancji graphqlHTTP jako rootValue.

\n\n
app.use('/graphql', graphqlHTTP({\n  schema: schema,\n  rootValue: root,\n  graphiql: true,\n}));\n
\n\n

No i w ten sposób doszliśmy do ostatniego etapu stawiania serwera. W tym przykładzie wykorzystałem express.js jako serwer dla aplikacji. Przy wykorzystaniu app.use definiujemy pod jakim adresem będzie dostępny nasz graphQL i przekazujemy tam instację grapghqlHTTP przekazując nasz zdefiniowany wcześniej schemat i obiekt z funkcjami do odpowiednich pól. Warte zauważenia jest trzecie pole graphiql, które dostarcza nam przyjemny interfejs do testowania naszych zapytań. Aby uruchomić serwer wystarczy wpisać w konsoli node twój_plik.js

\n\n

Graphiql

\n\n

Jak wejdziemy teraz w przeglądarce na adres http://localhost:4000/graphql zobaczymy coś takiego:

\n\n

graphiql

\n\n

Jest to całkiem przyjemny graficzny interfejs, który służy do testowania naszych zapytań. Same zapytania są dosyć proste. Jest to obiekt w którym podajemy nazwę pól o jakie chcemy odpytać serwer i otrzymać z nich wiadomości. W naszym przypadku możemy odpytać tylko o jedno pole: hello

\n\n

graphiql_hello

\n\n

Oprócz samego testowania zapytań możemy sprawdzić o co właściwie możemy zapytać przy pomocy zakładki Docs w prawym górnym rogu. Widzimy w nim jakie pola mamy zdefiniowane oraz jaki tym wiadomości nam zwrócą.

\n\n

docs

\n\n

docs_query

\n\n

U nas na razie jest tego mało ale możecie sprawdzić jak to wygląda w przypadku większej ilości pól w schemacie na tej stronie

\n\n

Mam nadzieję, że was choć trochę zainteresowałem. W następnym poście mam zamiar wejść głębiej w GraphQL i zobaczyć co jesteśmy w stanie z jego pomocą zrobić. A wy co uważacie o tym? A może używacie i macie jakieś rady lub przemyślenia na co zwrócić uwagę? Zapraszam do komentowania i dzielenia się artykułem.

2017-10-02 06:00:00 czym-jest-graphql ckhxjb6o0000yi3umb3hg09jv 2017-10-02 06:00:00 2017-10-02 06:00:00 -cj8jssnk000sxi3ume2s96uls Grapql - własne typy https://fsgeek.pl/post/graphql-wlasne-typy/

W ostatnim wpisie pokazałem jak można zacząć przygodę z GraphQL (jeśli ominęliście ten post to znajdziecie go tutaj). Jednak by był to funkcjonalny system trzeba wiedzieć jak go rozbudować o kolejne elementy. Dziś chciałbym przedstawić jak można konstruować schematy z własnych, bardziej rozbudowanych typów. Zapraszam do czytania :)\n

\n\n

Krótka powtórka

\n\n

Zanim przejdę do właściwej części postu, krótkie przypomnienie na temat GraphQL. Jest to sposób na komunikację z serwerem w którym mamy tylko jeden adres do którego się zwracamy po dane. Aby otrzymać dane należy wysłać obiekt z nazwami pól, które chcemy dostać z powrotem. Tak więc to od nas zależy co dostaniemy. W ostnim poście skończyliśmy na takiej strukturze schematu i funkcji zwracającej wynik:

\n\n
var schema = buildSchema(`\n  type Query {\n    hello: String\n  }\n`);\n\nvar root = {\n  hello: () => {\n    return 'Hello world!';\n  },\n};\n\nvar app = express();\napp.use('/graphql', graphqlHTTP({\n  schema: schema,\n  rootValue: root,\n  graphiql: true,\n}));\n
\n\n

Mogliśmy wykonać tak naprawdę tylko jedna zapytanie {hello}. Dziś mam zamiar to rozszerzyć.

\n\n

Własne typy w GraphQL

\n\n

W GraphQl mamy 5 wbudowanych typów: String, Int, Float, Boolean oraz ID. Są pomocne ale nie wystarczające w codziennych rozwiązaniach. Żeby móc modelować rzeczywiste systemy i rozwiązania musimy mieć możliwość definiowania własnych typów. Aby to zrobić należy użyć słówka kluczowego type po którym piszemy nazwę typu.

\n\n
const schema = buildSchema(`\ntype Blogger{\n    firstname: String,\n    lastname: String,\n  }\ntype Query {\n    hello: String, \n    blogger: Blogger\n}\n`)\n
\n\n

To wystarczy by móc wykorzystywać nowy typ w naszym schemacie. Należy również pamiętać że dla pola blogger musimy stworzyć funkcję, która będzie zwracała obiekt zgodny ze zdefiniowanym typem:

\n\n
const root = {\n    hello: () => 'Hello world!',\n    blogger: () =>({firstname: 'foo', lastname:'bar'})\n}\n
\n\n

Teraz po uruchomieniu serwera node’a jesteśmy w stanie odpytywać serwer o nowe pole. W przypadku gdy wyślemy zapytanie w postaci {blogger} to zostanie ono domyślnie przekształcone by zwrócić wszystkie dostępne pola.

\n\n

custom-type

\n\n

Warte zauważenia jest, że nie musimy prosić serwer o każde pole typu Blogger, co więcej nie musimy tworzyć osobnych funkcji by to obsłużyć:

\n\n

single-field

\n\n

Listy i wartości nie puste

\n\n

Oprócz tego że możemy zdefiniować własne typy możemy je w pewien sposób modyfikować: określić czy wartość nie może być pusta lub stworzyć tablicę. Wykonujemy to przy pomocy operatora ! lub []. W ten sposób możemy definiować następujące rzeczy:

\n\n
    \n
  • Field: Int! -> pole nie może mieć wartości null
    • \n
  • Field: [Int]-> zwrócona wartość musi być tablicą której elementy są typu Int
    • \n
  • Field: [Int]! -> pole nie może mieć wartości null ale może być tablicą w której są wartości null
    • \n
  • Field: [Int!] -> pole może być wartością null ale jeśli jest już tablicą nie może mieć w sobie wartości null (może być pustą tablicą)
    • \n
  • Field: [Int!]! -> pole nie może mieć wartości null ani nie może być tablicą gdzie istnieje element o wartości null\n
    • \n
\n\n

Typ enum

\n\n

Oprócz samej możliwości tworzenia typów możemy również definiować specjalny typ jakim jest enum. Typ ten jest obiektem, który zawiera możliwe wartości dla danego typu. Innymi słowy, jeśli przypiszemy tym enum do danego pola to będzie mógł on przybrać tylko i wyłącznie pola przez nas zdefiniowane

\n\n
const schema = buildSchema(`\n enum BlogType{\n    TECHNOLOGY,\n    EATING,\n    TOURISM\n  }\n  type Blogger{\n    firstname: String,\n    lastname: String,\n    blogType: BlogType\n  }\n`)\n\nconst root = {\n    hello: () => 'Hello world!',\n    blogger: () =>({firstname: 'foo', lastname:'bar', blogType: 'TECHNOLOGY'}),\n}\n
\n\n

enum

\n\n

Jeśli zwrócona przez nas wartość nie będzie się zgadzała z zdefiniowanymi wartościami typu enum to dostaniemy błąd a pole będzie miało wartość null.

\n\n

enum-error

\n\n

Takie pole jest przydatne w przypadku gdy wiemy jakiego typu będziemy dostawać wiadomości np. statusy, jakieś skończone i ustalone typy tak jak w tym przypadku typ bloga.

\n\n

Interfejsy

\n\n

Ostatnia rzecz na dzisiaj o której chciałem powiedzieć to mechanizm interfejsu, który jest wspierany przez GraphQL. Jest to mechanizm znany z innych języków. Typ który implementuje interfejs musi w sobie zawierać wszystkie pola, które są zdefiniowane w interfejsie. Brak takiego pola wywoła błąd już w momencie startu serwera.

\n\n

interface-error

\n\n

Oprócz tych pól typ może zawierać w sobie dodatkowe pola nie będące częścią interfejsu.

\n\n
const schema = buildSchema(`\ninterface Person{\n    firstname: String,\n    lastname: String,\n  }\n  type Blogger implements Person{\n    firstname: String,\n    lastname: String,\n    blogType: BlogType\n  }\n`)\n
\n\n

Dziś pokazałem jakie mamy możliwości przy tworzeniu własnych schematów w GraphQL. Skupiłem się na różnych typach jakie możemy przypisywać do naszych pól i jakie to może mieć kosekwencje dla całego schematu. Następnym razem chciałbym poruszyć kwestię wprowadzania danych ponieważ do tej pory tylko je wypisywaliśmy a warto też coś wprowadzić. Napiszcie czy wam się podobało i czy chcielibyście poczytać o czymś konkretnym w kwesti GraphQL.

2017-10-09 06:30:00 grapql-wlasne-typy ckhxjb6o0000yi3umb3hg09jv 2017-10-09 06:30:00 2017-10-09 06:30:00 -cj8tsvm8000t8i3ume5hqcgiv Wysyłanie danych przy pomocy GraphQL https://fsgeek.pl/post/graphql-wysylanie-danych/

Witajcie w już trzecim poście dotyczącym GraphQL. Jeśli ominęliście je to gorąco zachęcam do odwiedzenia: Jak zacząć zabawę z GraphQL oraz Typy i schematy w GrapQL. Jednak odbieranie danych to za mało. Musimy mieć możliwość wysyłania własnych danych. Dziś opiszę jak można w tym języku zapytań to zrobić przy pomocy mutacji(mutation).\n

\n\n

Przekazywanie argumentów

\n\n

Jednak zanim przejdę do właściwej części, w której pokażę jak wykonywać zapytania Insert i Delete zatrzymam się jeszcze na chwilę w zwykłych zapytaniach. Bardzo często nie potrzebujemy listy ze wszystkimi danymi. Zazwyczaj potrzebujemy tylko jeden konkretny element by go wyświetlić lub zedytować. W GraphQL do tego celu możemy wykorzystać przekazywanie argumentów. W schemacie możemy sobie zdefiniować nowe pole o takiej strukturze:

\n\n
getPost(id:ID!):Post\n
\n\n

Dzięki temu takie pole może przyjmować dodatkowe argumenty. To została nam jeszcze funkcja zwracająca wynik:

\n\n
getPost:({id})=>posts[id],\n
\n\n

Warto zauważyć, że argumentem jest obiekt. Tak samo muszą być przekazane dane podczas tworzenia zapytania. Nie możemy po prostu przekazać wartości, ponieważ dostaniemy następujący błąd:\narguments_error\nPrzy wysyłaniu zapytania musimy wysłać obiekt z nazwami pól odpowiadającymi tym, które zdefiniowaliśmy w schemacie.\narguments_success

\n\n

Mutacje

\n\n

Mutacje są specjalnym rodzajem zapytania, które ma zmodyfikować dane na serwerze czyli będzie to odpowiednik INSERT, EDIT i DELETE z REST’a. Definiuje się je i używa podobnie do zwykłych zapytań a szczególnie pokazanych w poprzednim paragrafie zapytań z argumentem. Zapytania z tej grupy umieszczamy w specjalnym typie wewnątrz schematu:

\n\n
\ntype Mutation{\n}\n\n
\n\n

Mając coś takiego można tworzyć pola, które są nam potrzebne. Tworzymy je identycznie jak podczas przekazywania argumentów:

\n\n
addPost(title:String,author:String):Post,\n
\n\n

I od razu funkcję która to obsłuży :

\n\n
addPost:({title,author})=>{\n    posts[nextIndex]={title,author};\n    nextIndex++;\n    return {title,author};\n},\n
\n\n

Nad tworzeniem zapytań warto się chwilę zatrzymać ponieważ wygląda trochę inaczej. Pierwsza różnica to słowo kluczowe mutation na początku zapytania. Drugie to musimy podać jakie pola chcemy otrzymać z powrotem.

\n\n

mutation_subfield

\n\n

Bez tego dostaniemy następujący błąd:

\n\n

mutation_error

\n\n

Da się to ominąć ustawiając w schemacie zwracany typ na Boolean

\n\n
addPost(title:String,author:String):Boolean\n
\n\n

Wtedy możemy wykonać następujące zapytanie i nie dostaniemy błędu:

\n\n

mutation_bool

\n\n

Na sam koniec jeszcze wspomnę o możliwości zebrania wszystkich wymaganych pól, które należy przekazać w postaci obiektu. Nie możemy tutaj użyć słówka kluczowego type ale mamy za to słówko kluczowe input. Może to wyglądać w następujący sposób:

\n\n
inputPostInput{\n    title:String,\n    author:String\n}\n\ntype Mutation{\n    addPost(post:PostInput):Post,\n}\n\naddPost:({post})=>{\n    posts[nextIndex]=post;\n    nextIndex++;\n    return post;\n},\n\n
\n\n

Dzięki temu możemy zredukować ilość pól o jakich trzeba pamiętać i możemy używać tego w wielu miejscach np.: dodawanie nowego elementu i jego edycja może wymagać tych samych pól więc nie musimy powielać ich wszystkich tylko użyć odpowiedniego typu.

2017-10-16 06:30:00 wysylanie-danych-przy-pomocy-graphql ckhxjb6o0000yi3umb3hg09jv 2017-10-16 06:30:00 2017-10-16 06:30:00 -cj9famk0000tvi3um3oyc8xt3 Node.js - pierwsze kroki https://fsgeek.pl/post/nodejs-pierwsze-kroki/

Dużo ludzi kojarzy JavaScript tylko z przeglądarkami i ogólnie pojętym frontendem. Jednak na tym nie kończą się możliwości tego języka. Dzięki Node.js mamy możliwość napisać w Javascriptcie funkcjonalny serwer dla naszych aplikacji. I co najważniejsze nie jest to trudne.\n

\n\n

Czym jest Node.js?

\n\n

Jest to platforma zbudowana na Chrome V8. Jest to darmowy silnik Javascript stworzony przez Google’a w języku C++ i używany oprócz Node’a także w przeglądarce Chrome. Dzięki temu nie potrzebujemy przeglądarki by odpalić nasz kod Javascript a jesteśmy w stanie to zrobić wszędzie tam gdzie jesteśmy w stanie zainstalować Node’a. A wedle oficjalnej dokumentacji jesteśmy w stanie to zrobić na naprawdę dużej ilości środowisk

\n\n

node-srodowiska

\n\n

Jak widać jest tego sporo. Warte zauważenia są binarki dostępne dla systemów opartych o ARM. Dzięki temu mamy możliwość postawienia własnego serwera między innymi na raspberry pi (co kiedyś opiszę na blogu). W ostatnim czasie Javascript zaczął się coraz mocniej rozwijać co przełożyło się na jego popularność. Również Node się do tego przyczynia ponieważ znajomość jednego języka pozwala nam pisać w pełni funkcjonalne serwisy. Jeśli jesteście ciekawi jak wyglądają statystyki dotyczące naszej omawianej platformy to zerknijcie tutaj

\n\n

Pierwszy program

\n\n

Tyle teorii (którą pewnie mało kto czyta :) ) wystarczy. Nie po to powstają platformy by o nich gadać, tylko żeby coś w nich tworzyć. Ja korzystam z jednej z nowszej wersji Node’a co na początku nie powinno mieć znaczenia ale może wyjść przy nieoczekiwanych sytuacjach.

\n\n

node-wersja

\n\n

Tak jak wspomniałem jesteśmy w stanie uruchomić kod Javascript na każdej platformie gdzie możemy zainstalować Node’a więc pierwszy program uruchomię w zwykłej konsoli. Aby uruchomić nasz program należy w konsoli wpisać node nazwa_naszego_pliku.js

\n\n

node-hello-world

\n\n

Sam kod nie jest skomplikowany i kończy się na jednej linijce

\n\n
console.log("Hello World")\n
\n\n

W porównaniu z innymi językami programowania np. Java jest to bardzo minimalistyczne.

\n\n

Przekazywanie argumentów

\n\n

Tak samo jak w innych językach jesteśmy w stanie uruchomić nasz program razem z parametrami. Jest to często wykorzystywane przy różnego typu bibliotekach do parametryzowania uruchomienia np.: podanie portu, ustawienie wersji produkcyjnej, developerskiej itd.

\n\n

Parametry uruchomienia możemy wyciągnąć z zmiennej globalnej Node’a o nazwie process. Jest to duży obiekt który przechowuje informacje o między innymi: używanych modułach, wersji node’a i silnika v8, na jakiej platformie i architekturze został odpalony kod, przekazane parametry czy też parametry .env o których powiem za chwilę.\nNasze przekazane parametry kryją się pod polem argv w naszym obiekcie i są zwyklą tablicą, która ma rozmiar nie mniejszy niż 2.

\n\n

node-argv

\n\n

Pierwszy element to ścieżka do pliku wykonywalnego node’a a drugi do naszego uruchamianego pliku. Kolejne elementy trafiają na kolejne pozycje tabeli.

\n\n

.Env

\n\n

Chciałbym jeszcze wspomnieć o innym mechanizmie parametryzowania naszej aplikacji a mianowicie zmiennych środowiskowych. Jak sama nazwa wskazuje są to zmienne które zmieniają się pomiędzy środowiskami programistycznymi(lokalne, staging czy też środowisko produkcyjne). Bardzo często są to parametry, które definiują np.: adres bazy danych, port pod jakim wystawiamy aplikację, klucze dostępowe itd. Są one normalnie dostępne w systemie, gdzie można je definiować i zmieniać. Jednak jeśli nie chcemy podczas pisania kodu mieszać sobie w swoich zmiennych środowiskowych (np. mamy kilka projektów i chcemy odseparować zmienne pomiędzy nimi) możemy zdefiniować je w specjalnym pliku .env gdzie podajemy parę wartości KLUCZ = wartosc.

\n\n
SIMPLE_KEY=simple_key\nVALUE_WITH_SPACE=key with space\n
\n\n

Jednak aby skorzystać z tego pliku potrzebujemy biblioteki, która dołączy nam nasze własne zmienne do tych systemowych.

\n\n
yarn add dotenv --save\n
\n\n

Teraz po napisaniu czegoś takiego:

\n\n
require('dotenv').config()\n\nconsole.log("HelloWorld");\nconsole.log(process.env.SIMPLE_KEY);\nconsole.log(process.env.VALUE_WITH_SPACE);\n\n
\n\n

Jesteśmy w stanie korzystać z naszych zmiennych środowiskowych w programie

\n\n

node-env

\n\n

Dziś poruszyłem podstawowe kwestie związane z pisaniem aplikacji w Node.js jednak bardzo potrzebne i często używane. Należy pamiętać, że nie jest on wykorzystywany do pisania aplikacji konsolowych a serwerowych. Jednak postawieniem prostego serwera HTTP zajmiemy się następnym razem

2017-10-31 07:30:00 nodejs-pierwsze-kroki ckhxjb6o0000yi3umb3hg09jv 2017-10-31 07:30:00 2017-10-31 07:30:00 -cj9p9mxs000uai3umhhmifpdv Node.js - jak postawić własny serwer HTTP https://fsgeek.pl/post/node-jak-postawic-serwer/

W ostatnim poście(jeśli go ominęliście to znajdziecie go tutaj) powiedziałem parę słów na temat Node’a i uruchomiłem kod w konsoli. Możliwości tej platformy na tym się nie kończą a wręcz dopiero zaczynają. Większość kojarzy go z serwerem i słusznie. Dziś pokażę jak można stworzyć prosty serwer HTTP przy wykorzystaniu tylko i wyłacznie Node’a.\n

\n\n

Hello World na serwerze Node’a

\n\n

W całym dzisiejszym poście będziemy korzystać z biblioteki http, która należy do Node’a więc nie musimy jej osobno instalować, jest od razu dla nas dostępna. Wykorzystując ją jesteśmy w stanie stworzyć prosty serwer HTTP w zaledwie paru linijkach i następnie rozbudować względem naszych potrzeb.

\n\n
const http=require('http');\n\nconst server=http.createServer((request,response)=>{\nresponse.end('Hello World');\n})\n\nserver.listen(3000);\n\nconsole.log('Server listening at port 3000')\n\n
\n\n

Po uruchomieniu pliku w konsoli i wejściu na stronę http://localhost:3000/ powinno nam się ukazać taki widok(u mnie w powiększeniu by było lepiej widać na zdjęciu)

\n\n

node-server-hello-world

\n\n

Pierwsza linijka to jest to co wspomniałem na początku czyli zaimportowanie biblioteki, która za chwilę będzie nam potrzebna. Jedną z metod tej biblioteki jest createServer która zwraca nową instancję klasy http.Server. Metoda ta przyjmuje jeden argument - funkcję, która będzie obsługiwała każde zapytanie. Składa się z dwóch parametrów:

\n\n
    \n
  • pierwszy parametr jest klasy http.IncomingMessage najczęściej nazywany request lub w skrócie req
    • \n
  • drugi parametr jest klasy http.ServerResponse, który często jest nazwany response lub res
    • \n
\n\n

Wewnątrz tej funkcji jesteśmy w stanie reagować na każde zapytanie jakie jest generowane do naszego serwera. Jedyny warunek jaki trzeba przestrzegać to wymóg wywołania metody end() dla każdej generowanej przez nas odpowiedzi. Metoda ta sygnalizuje, że wszystko co miało być przekazane (wiadomość, nagłówki itd) zostało przekazane i zapytanie można uznać za zakończone. Ja wykorzystuję metodę end() również do przesłania wiadomości ale można to również zapisać w trochę inny sposób:

\n\n
response.write('Hello World');\nresponse.end();\n
\n\n

Na sam koniec musimy określić na jakim porcie możemy wysyłać zapytania i otrzymywać odpowiedzi. W tym przypadku aby móc otrzymać napis Hello World musimy podać taki adres w przeglądarce http://localhost:3000. Jeśli chcemy podawać tylko coś takiego http://localhost/ jako port musimy ustawić coś takiego:

\n\n
server.listen(80);\n
\n\n

Request

\n\n

Teraz mając działającą bazę jesteśmy w stanie to rozwijać i dostosowywać nasz serwer pod nasze potrzeby. A będą nam tutaj pomagać metody, które możemy wywołać dla wyżej wymienionych zmiennych. Zacznę od tego co jesteśmy w stanie wyciągnąć z zapytania przy pomocy zmiennej request. Możemy między innymi pozyskać informacje dotyczące nagłówków przesłanych w zapytaniu, na jaki adres zostało wykonane zapytanie czy też w sumie najważniejsze jaki typ zapytania został wykonany (w końcu to różnica czy wykonujemy PUT czy DELETE ;)). Oto co można zobaczyć dla przykładowego zapytania:

\n\n

node-server-request

\n\n

Response

\n\n

Dużo ciekawiej wygląda z odpowiedzią serwera. Jako, że to jest to co my tworzymy mamy tutaj spory wybór opcji jakie możemy wykorzystać by przekazać jak najwięcej treści podczas jednej odpowiedzi. Pierwsze co przychodzi do głowy i co jest możliwe to dodawanie nagłówków do naszej odpowiedzi. Możemy nie tylko modyfikować ogólnie znane np.: takie jak Content-Type ale również tworzyć własne, skrojone pod konkretne potrzeby np.:

\n\n
response.setHeader('Content-Type','text/html');\nresponse.setHeader('Jesli-Podoba-sie','Polajkujcie FSGeek na Fb');\n
\n\n

node-server-response-header

\n\n

Oprócz tego jesteśmy w stanie własnoręcznie ustalić (wymusić) kod odpowiedzi, co może być przydatne w niektórych sytuacjach. Taka operacja nie jest trudna i ogranicza się do jednej linijki kodu:

\n\n
response.statusCode=404;\n
\n\n

node-server-response-code

\n\n

Możemy również ustalić wiadomość jaka zostanie wyświetlona obok kodu ;)

\n\n
response.statusMessage='Tutaj nic nie ma';\n
\n\n

node-server-response-code-message

\n\n

A jak to wygląda w praktyce?

\n\n

No w praktyce korzysta się z gotowych bibliotek, które ułatwiają codzienną pracę, pozwalają uprościć pewne czynności oraz dostarczają gotowe rozwiązania dla innych. Możecie w takim razie zapytać po co taki post skoro wiem, że i tak normalnie wykorzystuje się biblioteki. Odpowiedź jest prosta - według mnie nie wystarczy wiedzieć jak korzystać z biblioteki. Warto (jeśli nie trzeba) wiedzieć co siedzi w środku, co tam się dzieje i dlaczego. Dopiero wtedy będziemy mogli świadomie korzystać z narzędzi jednak nie będziemy do nich przywiązani.

\n\n

Istniejących bibliotek do Node’a jest naprawdę sporo (co można sprawdzić tutaj) jednak dla mnie najbardziej znane to na pewno Express.js i Sails.js. I jedną z nich chciałbym się zająć w którymś z przyszłych postów. Póki co jeszcze nie wiem którą, ale chętnie poznam wasze opinie i oczekiwania o którym wolelibyście poczytać. Również jeśli byście chcieli poczytać o innej bibliotece to śmiało piszcie a może napiszę o niej parę słów ;)

2017-11-07 07:00:00 nodejs-jak-postawic-wlasny-serwer-http ckhxjb6o0000yi3umb3hg09jv 2017-11-07 07:00:00 2017-11-07 07:00:00 -cj92mqmiw00tii3um4gif3xx2 BedeProgramistka.pl Community Partnerem Tech Leaders http://bedeprogramistka.pl/bedeprogramistka-pl-community-partnerem-tech-leaders/

Kilka dni temu nagrałam na FB video, w którym mówiłam Ci, że blog BedeProgramistka.pl został Community Partnererem fantastycznego wydarzenia, jakim jest Tech Leaders. Uwielbiam takie wydarzenia, dzięki którym możesz zrobić tak duży krok na przód w swoim rozwoju. Uważam, że rozmowy z doświadczonymi osobami, które przeszły już tę ścieżkę, którą Ty dopiero rozpoczynasz są na wagę złota. Przeczytaj poniżej najważniejsze informacje.   Rusza trzecia edycja programu mentorskiego Tech Leaders Z końcem listopada br. do końca marca przyszłego roku potrwa edycja programu mentorskiego Tech Leaders. Jest on dedykowany dla kobiet w IT, które chcą rozwijać idee biznesowe lub karierę zawodową. Przeznaczony jest również dla kobiet, które chcą wejść do branży nowych technologii i znaleźć tam swoją ścieżkę rozwoju. Ideą programu mentorskiego jest stworzenie swobodnej przestrzeni do dzielenia się wiedzą i rozwijania możliwości w życiu zawodowym, korzystając ze wsparcia doświadczonych mentorów. “Do udziału w Tech Leaders może zgłosić się każda dziewczyna, czy kobieta. Nie mamy barier wiekowych, ani również lokalizacyjnych. Ważny dla nas jest zapał, chęć do nauki i rozwoju. Program przeznaczony jest dla kobiet na różnym poziomie zaawansowania, od tych stawiających swoje pierwsze kroki w IT, po te bardzo zaawansowane w temacie” – mówi Ewelina Wołoszyn, organizator Tech Leaders. W poprzednich […]

\n

Artykuł BedeProgramistka.pl Community Partnerem Tech Leaders pochodzi z serwisu .

2017-10-22 10:48:05 bedeprogramistkapl-community-partnerem-tech-leaders ck9qqdx4o000xi3umdjbh0w86 2017-10-22 10:48:05 2017-10-22 10:48:05 cj969xd1k00toi3umhv59elek Kodologia opinie o kursach – moja recenzja http://bedeprogramistka.pl/kodologia-opinie-o-kursach/

Kodologia opinie o kursach – poznaj moją recenzję i weź udział w konkursie! W tym miesiącu mam przyjemność testować kursy na platformie Kodologia.pl. Na pierwszy ogień poszedł kurs, którym może być zainteresowany każdy, kto chce zacząć naukę programowania. Domyślasz się, który kurs wybrałam? Tak, HTML! 🙂 Kodologia.pl to platforma, która udostępnia kursy do nauki programowania. W tym momencie na stronie znajdziesz 18 kursów, zarówno z front-endu jak i back-endu. Są to: Responsive Web Design, Podstawy SASS, Python. Podstawy programowania, Podstawy języka C++, Tworzenie stron internetowych w HTML, Rails. Blog w 15 minut, Naucz się CSS, Kurs PHP dla początkujących, Język JavaScript. Podstawy, Python. Programowanie obiektowe, Zaawansowany kurs JavaScript, PHP. Programowanie obiektowe, Java. Kurs podstawowy, Język Ruby. Absolutne podstawy, Podstawy jQuery, Tworzenie gier w JavaScript, Język SQL. Wyszukiwanie danych, Programowanie dla dzieci. Scratch.   Także jak widzisz, wybór jest całkiem spory. Wkrótce mam zamiar przetestować jeszcze kilka z nich – na pewno JavaScript. Czuję też, że jakoś tak moją naturę kręci programowanie dla dzieci 🙂 . Może wydaje mi się, że to będzie łatwe 🙂 . Gwarantuję Ci, że jak tylko przetestuję jeszcze jakiś kurs, to napiszę o nim opinie.   Ale, ale, ale – konkrety. Przeczytaj moją opinię o kursie […]

\n

Artykuł Kodologia opinie o kursach – moja recenzja pochodzi z serwisu .

2017-10-25 00:00:29 kodologia-opinie-o-kursach-moja-recenzja ck9qqdx4o000xi3umdjbh0w86 2017-10-25 00:00:29 2017-10-25 00:00:29 cj9fcn8ig00twi3umdwvnb2e6 JavaScript nauka programowania – trudne początki http://bedeprogramistka.pl/javascript-nauka-programowania/

JavaScript nauka programowania – ewidentnie trudne mamy ze sobą początki… Dzisiaj przyznam Ci się do mojej porażki. Pisałam Ci już kiedyś, że z JS nie jest łatwo, pamiętasz? Moją naukę JavaScriptu charakteryzuje jedno – idzie jak po grudzie. Za każdym razem coś nam przeszkadza we wspólnych randkach. Właściwie to chyba nawet gdzieś tam wewnętrznie chcę, żeby coś nam przeszkadzało. Pamiętasz, że założyłam sobie, że do końca października ogarnę podstawy JavaScriptu? Ponieważ zawsze jestem z Tobą szczera muszę Ci się teraz przyznać, że dałam d…y. No nie wyszło mi. JavaScript kolejny raz mnie pokonał. W tym miesiącu miałam sporo pracy przy blogu, przy Facebooku BedeProgramistka i przy tonie innych „muszę to zrobić”. Wieczorami starałam się czytać i słuchać o JavaScripcie. Ale za każdym razem kiedy tylko zaczynałam, mój organizm odmawiał posłuszeństwa i zasypiał. Czasem łapałam się za głowę i chciałam sobą wstrząsnąć, ale jakoś tak nie miałam siły. Chyba dopadł mnie pierwszy kryzys. Ostatnio czytałam artykuł, że JavaScript to taka prawdziwa nauka programowania. JavaScript to JĘZYK PROGRAMOWANIA. HTML i CSS to takie malutkie słodkie kuleczki w porównaniu do JS. I ja się z tym totalnie zgadzam. Jednak wiesz co? Stwierdziłam, że się nie poddam. Że będę walczyć dalej. Przecież nie można tak […]

\n

Artykuł JavaScript nauka programowania – trudne początki pochodzi z serwisu .

2017-10-31 08:26:31 javascript-nauka-programowania-trudne-poczatki ck9qqdx4o000xi3umdjbh0w86 2017-10-31 08:26:31 2017-10-31 08:26:31 cj9kx7bco00u3i3um5zr12yet Zmiana branży – Tobie też może się udać! – wywiad motywacyjny z Sylwią Laskowską http://bedeprogramistka.pl/zmiana-branzy-wywiad-motywacyjny-sylwia/

Przedstawiam Ci kolejną bohaterkę, która postanowiła zmienić branżę i zostać programistką. Dzisiaj poznasz Sylwię Laskowską, która udzieliła mi wywiad motywacyjny. Najpierw obejrzyj film z Sylwią w roli głównej i zobacz jak to wszystko się zaczęło… a później przeczytaj co Sylwia ma Ci do opowiedzenia.   Wywiad motywacyjny z Sylwią Laskowską Sylwia Laskowska  Programistka front-end w Goyello. Z wykształcenia psycholog, przez sześć lat pracowała jako redaktor. Po pracy zajmuje się swoją 2,5-letnią córeczką i… dalej programuje. Dużo gada i uwielbia słodycze. Natka: Na pewno miałaś swoje życie przed programowaniem 🙂 Co robiłaś? Czym się zajmowałaś? Sylwia: Nauczyłam się tworzyć proste stronki w HTML’u w wieku 12 lat. Głównie dlatego, ponieważ mój tata narzekał, że za dużo czasu bezproduktywnie spędzam na komputerze i bałam się, że odłączy mi internet 😉 . Szybko się wciągnęłam, ale robiłam to tylko od czasu do czasu. Gdzieś w okresie gimnazjum nawet przez chwilę wahałam się, czy nie iść w kierunku programowania. Wygrała jednak moja miłość do pisania i literatury. I tak skończyłam klasę o profilu humanistycznym, potem studiowałam psychologię. Następnie zaczęłam pracować w zawodzie, który dla wielu jest spełnieniem marzeń: byłam redaktorką. Okazało się jednak, że realia tej pracy są inne, niż sobie wyobrażałam. Niska płaca, brak […]

\n

Artykuł Zmiana branży – Tobie też może się udać! – wywiad motywacyjny z Sylwią Laskowską pochodzi z serwisu .

2017-11-04 06:00:51 zmiana-branzy-tobie-tez-moze-sie-udac-wywiad-motywacyjny-z-sylwia-laskowska ck9qqdx4o000xi3umdjbh0w86 2017-11-04 06:00:51 2017-11-04 06:00:51 cj9pie83400ubi3um5ufagzha Nauka JavaScript i wyzwanie JavaScript30 dni 1-5 http://bedeprogramistka.pl/nauka-javascript-i-wyzwanie-1/

Nauka JavaScript i Wyzwanie #JavaScript30. Dzisiaj krótkie podsumowanie pierwszych pięciu dni wyzwania. #Wyzwanie JavaScript30  Pewnego pięknego dnia przez zupełny przypadek, natrafiłam na stronę wyzwania http://JavaScript30.com. Wyzwanie to zakłada zrobienie 30 projektów JavaScript w 30 dni. Brzmi nierealnie? A jednak! Wes Bos – autor wyzwania, zadbał o to, żeby było ciekawie i inspirująco. Dostęp do wyzwania jest darmowy. Każdy może spróbować. Chciałam wziąć udział w wyzwaniu, jednak jako totalny laik JavaScript bałam się, że nie uda mi się zrozumieć zawiłości tego języka. Moja nauka JavaScript od samego początku idzie nie tak, jakbym tego chciała. Już się zaczęłam powoli godzić z tym, że do osiągnięcia jakiejkolwiek „biegłości” w tym języku, będę potrzebowała wielu godzin nauki. No ale umówmy się. Nie od razu Rzym zbudowano 🙂 . Gdy tak rozważałam, czy zaryzykować i przystąpić do działania olśniło mnie. Postanowiłam, że założę grupę na FB, do której może dołączy ktoś, żeby razem ze mną podjąć rękawicę. W najśmielszych snach, nie spodziewałam się tego, co się wydarzyło w przeciągu 3 dni! Do grupy dołączyło ponad 200 osób!!! Wyobrażasz to sobie? Jest nas 200 osób, które biorą udział w wyzwaniu. A musisz wiedzieć, że zadania nie są proste. To nie są zadania w stylu: zdefiniuj zmienną […]

\n

Artykuł Nauka JavaScript i wyzwanie JavaScript30 dni 1-5 pochodzi z serwisu .

2017-11-07 11:05:10 nauka-javascript-i-wyzwanie-javascript30-dni-1-5 ck9qqdx4o000xi3umdjbh0w86 2017-11-07 11:05:10 2017-11-07 11:05:10 ci7t30j9k003xi3um4lc2dodn ECMAScript 6: TOP 10 nowości - cz.3 - Let, czyli blokowy zakres zmiennych http://blog.nebula.us/25-ecmascript-6-top-10-nowosci-cz-3-let-czyli-blokowy-zakres-zmiennych

Jedną z najważniejszych innowacji dodanych w ECMAScript 6 jest wprowadzenie zmiennych o zakresie blokowym deklarowanych poprzez słowo kluczowe let. Do tej pory w JavaScript istniał tylko funkcyjny zakres zmiennych (deklarowanych przez dobrze wszystkim znane słówko var), co w pewnych przypadkach wymagało stosowania niezbyt lubianych przez programistów domknięć. Wraz z nadejściem ES6 ta niedogodność odchodzi w niepamięć. 

2015-03-28 13:56:53 ecmascript-6-top-10-nowosci-cz3-let-czyli-blokowy-zakres-zmiennych cj4tp0i00000ri3umf7udfqvm 2015-03-28 13:56:53 2015-03-28 13:56:53 ci88x5dk0003yi3um3rbg0rof ECMAScript 6: TOP 10 nowości - cz.4 - Nowe możliwości stringów http://blog.nebula.us/26-ecmascript-6-top-10-nowosci-cz-4-nowe-mozliwosci-stringow

Jeśli kiedykolwiek korzystaliście z narzędzi takich jak Mustache lub Handlebars, zapewne z bananem na twarzy przyjmiecie wiadomość, że ES6 umożliwia używanie wyrażeń wewnątrz stringów. To tylko jedna z kilku nowych możliwości stringów wprowadzonych w ECMAScript 6. 

2015-04-08 15:57:00 ecmascript-6-top-10-nowosci-cz4-nowe-mozliwosci-stringow cj4tp0i00000ri3umf7udfqvm 2015-04-08 15:57:00 2015-04-08 15:57:00 +ck93feo0001zzi3um15rsc46a README na Githubie - robisz to źle! https://frontlive.pl//readme-github/ README jest to plik z rozszerzeniem .md, czyli . Markdown to, innymi słowy, język znaczników przeznaczony do formatowania tekstu. Jeżeli jesteś nowy w środowisku githuba, czy też… 2020-04-17 00:00:00 readme-na-githubie-robisz-to-zle ckgvhpmo0001ji3umfm7ubw86 2020-04-17 00:00:00 2020-04-17 00:00:00 cki6eer4w02ayi3um3gy82v65 React – Higher Order Component https://wojciechszucko.com/react-higher-order-component/

Komponenty powielają logikę? Twoje komponenty często używają tych samych komponentów? Higher Order Component w skrócie HOC to prosty sposób na współdzielenie kodu pomiędzy komponentami. Podstawy Co to jest Higher Order Component? To funkcja, która przyjmuję komponent, a następnie może przekazać do niego nowe propsy lub otoczyć go innym komponentem. Na końcu funkcja zwraca komponent. Zaczniemy od przykładu, który rozjaśni nam to zagadnienie. Przykład Przykładem w tym artykule będzie implementacja funkcji, która ukryje nasz komponent gdy użytkownik nie posiada roli administratora. Nazwiemy tę funkcję withAdminGuard. Będzie ona przyjmować komponent, który powinien być widoczny tylko dla administratora. W nowym pliku zdefiniujmy najpierw…

\n

Artykuł React – Higher Order Component pochodzi z serwisu Wojciech Szućko.

2020-12-01 19:52:44 react-higher-order-component cki6eer4w001ri3umeoa347v0 2020-12-01 19:52:44 2020-12-01 19:52:44 cjjjijvk0015ei3um2o1x8wp5 Angular - kontrolowanie widoku https://fsgeek.pl/post/angular-kontrolowanie-widoku/

Manipulowanie widokiem to jedna z głównych funkcji wszystkich frameworków SPA. W zależności od warunków i stanu aplikacji musimy wyświetlić inną rzecz dla admina, inną dla moderatora a zupełnie inną gościowi, który dopiero co trafił na naszą stronę. W Angularze do warunkowania widoczności niektórych elementów służą dyrektywny strukturalne: *ngIf i *ngSwitch oraz atrybut hidden o których dziś chwilę powiem.

\n\n

\n\n

*NgIf

\n\n

*NgIf jest prostą dyrektywą strukturalną, która w zależności od wartości umieszcza lub usuwa dany element w drzewie DOM. Wykorzystujemy go w następujący sposób:

\n\n
<div *ngIf="warunek"></div>\n<nazwaKomponentu *ngIf="warunek"></nazwaKomponentu>
\n\n

Jak widać można go zastosować do każdego elementu HTML oraz stworzonego przez nas komponentu. Żeby sterować wyświetlaniem możemy podać zmienną typu Boolean lub wyrażenie, które w rezultacie da taka wartość

\n\n
<div *ngIf="zmienna"></div>\n<div *ngIf="zmienna === 'wartość'"></div>
\n\n

Jest to bardzo przydatne, ponieważ dzięki temu jesteśmy w stanie ukryć przed użytkownikiem pewne elementy interfejsu, których nie powinien widzieć. Częściej jednak chcemy coś zamiast tego wyświetlić np.: jak użytkownik nie jest zalogowany to chcemy mu pokazać przyciski do logowania/rejestracji a jeśli już jest zalogowany to przycisk do edycji profilu. Możemy uzyskać taki efekt na dwa sposoby. Pierwszy to dwukrotne wykorzystanie dyrektywny *ngIf

\n\n
<div *ngIf="zmienna">wartość dla admina</div>\n<div *ngIf="!zmienna">wartość dla gościa</div>
\n\n

Jednak takie coś nie jest zbyt estetyczne i może prowadzić do niepotrzebnych błędów przy późniejszej edycji kodu np.: zmiany nazwy zmiennej. Dużo lepiej wykorzystać konstrukcję if-else znaną z tradycyjnych języków programowania:

\n\n
<div *ngIf="zmienna; else guest">wartość dla admina</div>\n<ng-template #guest><div>wartość dla gościa</div></ng-template>
\n\n

Taki kod jest już dużo bardziej poukładany i nawet przyszła edycja nie będzie problematyczna

\n\n

Czym jest ta gwiazdka?

\n\n

Jak zauważyliście przed dyrektywą NgIf umieszcza się gwiazdkę *. Jest to tylko tzw.: syntactic sugar, który na uprościć kod i ułatwić życie nam programistom. Nie jest ona wymagana i możemy ją pominąć ale wtedy musimy inaczej ułożyć nasze elementy oraz wykorzystać ng-template

\n\n
<ng-template [ngIf]="visible"><div>Jestem widoczny</div></ng-template>
\n\n

Hidden

\n\n

Do ukrycia elementu możemy także wykorzystać atrybut [hidden] lub [style.display]="'none'". Trzeba tylko pamiętać, że wtedy element jest ukrywany ale ciągle istnieje w drzewie DOM. Jeśli jest to nasz komponent to ciągle może odbierać i wysyłać eventy. Element taki powstaje w momencie jak jest tworzone całe drzewa nawet jeśli jest on ukryty. W związku z tym, że nie jest on usuwany to nie jest wywoływana metoda ngOnDestroy podczas ukrywania. Jednak jest on szybszy od ngIf’a ponieważ nie musimy tworzyć na nowo elementu w drzewie DOM tylko go wyświetlić. Warto się zastanowić czego potrzebujemy przy projektowaniu interfejsu ponieważ w zależności od potrzeb jedna lub druga metoda może być tą właściwą.

\n\n

Switch

\n\n

Na sam koniec konstrukcja, którą w standardowych językach bardzo lubię i osobiście zachęcam do wykorzystania. Często jeżeli w systemie mamy różne role to chcemy wyświetlić różne informacje dla różnych ról. Możemy wykorzystać oczywiście dyrektywę ngIf:

\n\n
<div *ngIf="zmienna == 'admin'">wartość dla admina</div>\n<div *ngIf="zmienna == 'moderator'">wartość dla moderatora</div>
\n\n

Nie jest to zbyt ładne i może powodować problemy przy rozszerzaniu o kolejne możliwości. Dużo bardziej polecam wykorzystanie z dyrektywy ngSwitch dzięki czemu nasz kod będzie wyglądał następująco:

\n\n
<div [ngSwitch]="zmienna">\n  <p *ngSwitchCase="'admin'" >wartość dla admina</p>\n  <p *ngSwitchCase="'moderator'" >wartość dla moderatora</p>\n  <p *ngSwitchDefault>wartość domyślna</p>\n</div>
\n\n

Właściwie nie trzeba tutaj nic dodatkowo pisać ponieważ struktura jest analogiczna jak to co znamy w programowaniu. Najpierw przy pomocy [ngSwitch] przekazujemy zmienną którą będziemy testować a następnie przy pomocy *ngSwitchCase i *ngSwitchDefault sterujemy co ma się wyświetlić dla danych wartości. Jest to bardzo elegackie rozwiązanie i pozwala na przyszłe rozbudowywanie opcji.

\n\n

Wszystko co dziś pokazałem możecie sprawdzić tutaj. Dodatkowo zachecam do samodzielnego wypróbowania tych dyrektyw,ponieważ jest to najlepszy sposób na naukę

2018-07-13 05:00:00 angular-kontrolowanie-widoku ckhxjb6o0000yi3umb3hg09jv 2018-07-13 05:00:00 2018-07-13 05:00:00 cjjtjck5c015ri3um1w4g5ji8 CSS Variables https://fsgeek.pl/post/css-variables/

CSS już dawno przestał być językiem służacym tylko do kolorowania stron internetowych. Każda kolejna wersja pozwala robić coraz więcej na stronie bez konieczności sięgania do Javascriptu lub preprocesorów CSS takich jak SASS czy LESS. Dziś chciałbym po krótce opowiedzieć o czymś co w preprocesorach istnieje od dawna a teraz jest też możliwe bez nich czyli tworzenie zmiennych wewnątrz plików.

\n\n

\n\n

CSS Variables

\n\n

Zmienne możemy wykorzystywać w najpopularniejszych przeglądarkach już od jakiegoś czasu i jest to całkiem nieźle wspierane:

\n\n

caniuse

\n\n

Zmienne tworzymy wewnątrz zwykłych plików *.css i możemy je potem wykorzystywać jako wartości dla atrybutów. Jak to jednak wygląda w porównaniu z tym co znamy i często wykorzystujemy w preprocesorach?

\n\n

SCSS

\n\n
$color: red;\n\np {\ncolor: $color\n}
\n\n

LESS

\n\n
@color: red;\n\np {\ncolor: @color\n}
\n\n

CSS

\n\n
:root {\n  --color: #06c;\n}\n\np {\ncolor: var(--color)\n}
\n\n

Elementy składowe zmiennych

\n\n

Jak łatwo zauważyć każda zmienna musi zaczynać się od podwójnego myślnika --. Dodatkowo trzeba uważać przy pisaniu nazw ponieważ wielkość liter ma znaczenie w tym przypadku.

\n\n
:root {\n\t--color: red\n}\n\np{\n background-color: var(--color); /* zadziała */\n background-color: var(--Color); /* nie zadziała */\n}
\n\n

Aby użyć teraz takiej zmiennej musimy wykorzystać specjalną funkcję var(), która wstawi wartość naszej zmiennej do odpowiedniego atrybutu. Dodatkowo w tej funkcji możemy podać domyślną wartość, która zostanie użyta jeśli poszukiwana przez nas zmienna nie istnieje. Ciekawostką może być fakt, że możemy podać jako domyślną wartość inną zmienną tworząc w ten sposób łańcuch gdzie na końcu możemy umieścić zwykłą wartość.

\n\n
:root {\n  --color: red;\n}\n\nbackground-color: var(--bg-color, blue);\nbackground-color: var(--bg-color, --color); /* tak nie zadziała */\nbackground-color: var(--bg-color, var(--color)); /* ale w ten sposób już tak */\nbackground-color: var(--bg-color, var(--color2, yellow)); /* to też zadziała */
\n\n

Warto jeszcze wspomnieć o tym gdzie można definiować nasze zmienne. Możemy je umieścić w każdym poprawnym selektorze tak jak zwykłe atrybuty. Bardzo często korzystamy tutaj też z pseudoklasy :root, która wskazuje na element który jest na szczycie drzewa DOM. W przypadku stron internetowych wskazuje on na element html ale ma od niego wyższy priorytet.

\n\n
:root {\n  --color: blue;\n}\n\nhtml{\n  --color: red;\n  background-color: var(--color) /* strona ma niebieskie tło */\n}
\n\n

Dlaczego zmienne w CSS są lepsze od preprocesorów?

\n\n

Na razie nie pokazałem niczego nowego w stosunku do tego co już znamy i wykorzystujemy w preprocesorach. Po co w takim razie się interesować tym tematem skoro to co mamy działa tak samo? No właśnie nie zawsze. Pierwszym powodem jest obecność kaskady jaką znamy ze standardowych atrybutów, czyli możemy wykorzystać tą samą zmienna dla selektorów na różnych poziomach. Wartości w zmiennych w selektorach szczegółowych będą przesłaniać te zdefiniowane dla ogólnych.

\n\n

See the Pen Variable cascade by Aleksander (@Feridum) on CodePen.

\n

\n\n

Drugi powód to możliwość łatwiejszego operowania tymi zmiennymi z poziomu Javascriptu. Do tej pory nie mieliśmy tej możliwości nawet przy pomocy preprocesorów. Teraz przy odpowiednim wykorzystaniu zmiennych jesteśmy w stanie zmienić kolory na całej stronie przy pomocy jednego polecenia. Jak możemy to zrobić?

\n\n

See the Pen NBRrBY by Aleksander (@Feridum) on CodePen.

\n

\n\n

Jak już wspomniałem o możliwych sposobach wykorzystania zmiennych to nie można nie wspomnieć o tworzeniu motywów dla naszej strony. Jeśli tylko będziemy konsekwentni w wykorzystywaniu zmiennych(czytaj używali ich prawie wszędzie) to przy pomocy klasy podpiętej do elementu body możemy zmienić szatę kolorystyczną naszej strony

\n\n

See the Pen gjwLJa by Aleksander (@Feridum) on CodePen.

\n

\n\n

Trzeba przynać, że CSS rozwija się w dobrym kierunku. Jeśli będzie rozwijać się dalej w takim tempie to preprocesory mogą przestać być w ogóle potrzebne. Mnie osobiście brakuje możliwości zagnieżdżania selektorów w sobie by supełnie porzucić SASS. Kto wie, może kiedyś się tego doczekam :)

2018-07-20 05:20:00 css-variables ckhxjb6o0000yi3umb3hg09jv 2018-07-20 05:20:00 2018-07-20 05:20:00 @@ -1484,11 +1499,6 @@ cjv3rl1eo01joi3ume7z9gr8q Budowanie aplikacji w Electronie https://fsgeek.pl/pos cjvnvbkdc01kei3umbpjee7ky Grafika 3D w przeglądarce - WebGL https://fsgeek.pl/post/grafika-3d-w-przegladarce-webgl/

Grafika najczęściej się kojarzy z wymogiem bycia artystą, Photoshopem i retuszowaniem zdjęć. To jednak dotyczy grafiki 2D czyli wszelakiego rodzaju plakaty, ilustracje, rysunki czy też witryny internetowe. Mamy też drugi rodzaj grafiki - grafika 3D, którą najczęściej spotykamy w grach komputerowych. Grafikę 3D możemy kojarzyć z Blenderem, ręcznym tworzeniem modeli i potem umieszczaniu na przykład w Unity i dalej w grach. A co jeśli możemy tworzyć trójwymiarowe sceny i umieszczać tam modele bezpośrednio w przeglądarce?

\n\n

WebGL

\n\n

Przy tworzeniu scen trójwymiarowych, umieszczaniu w nich modeli 3D oraz dalej poruszaniu korzystamy z API graficznych. Pod pojęciem API graficznych należy rozumieć API, które pośredniczy pomiędzy programistą a kartą graficzną tak aby ułatwić pisanie progamów. Dwa najpopularniejsze API z których aktualnie się korzysta to OpenGL oraz DirectX. OpenGL ma z tej dwójki otwarte źródła i oprócz tego, że służy do tworzenia grafiki 3D jest wykorzystywany do badań naukowych. Dodatkowo istnieje wersja, która została zaimplementowana w przeglądarkach i to jest to co nas dzisiaj najbardziej interesuje. Wersja tą znajdziecie pod nazwą WebGL (i wersja druga oznaczana jako WebGL2)

\n\n

Shadery

\n\n

Pomimo tego, że WebGL jest uruchamiany w przeglądarce to ciągle korzysta z naszego GPU do obliczania i rysowania obiektów. To co ma się dziać na karcie graficznej definiujemy przy pomocy małych programów zwanych jednostkami cieniującymi (shaders). Wyróżniamy dwa rodzaje jednostek cieniujących w WebGL (w OpenGL mamy ich dużo więcej): wierzchołków i fragmentów. Jednostki piszemy w specjalnym języku zwanym GLSL.

\n\n

I tutaj mała dygresja związana z tworzeniem grafiki :). Tworząc grafikę, którą będziemy wyświetlać określamy tak naprawdę zbiór punktów zwanych wierzchołkami, które definiują kształt obiektu. Najprościej jest sobie to wyobrazić jak grę w łączenie kropek. Następnie te kropki są łączone z użyciem odpowiednich algorytmów w trójkąty, które składają się na gotowy obiekt na scenie. Takie trójkąty nie nadają się jednak to wyświetlanie na ekranie - muszą zostać poddane procesowi rasteryzacji. Proces rasteryzacji zamienia trójkąt opisany za pomocą trzech wierzchołków na zbiór tzw. fragmentów, które potem zamienią się w piksele na ekranie. Również widać od razu, że liczba fragmentów jest sporo większa od liczby wierzchołków co jest czasami istotne ze względu na wydajność.

\n\n

Do czego nam w takim razie jednostki cieniujące? W jednostce cieniującej wierzchołków (shadow vertex) modyfikujemy parametry związane z pozycją wierzchołków, ustawiamy kolor wierzchołków, wyliczamy wpływ światła itd. Następnie mamy jednostkę cieniującą fragmentów (fragment shader) w której ustawiamy kolor dla fragmentów(pikseli), nakładamy teksturę itd. Po co w ogóle pisałem o ustawianiu koloru dwa razy - raz dla wierzchołka a potem drugi raz dla fragmentu? Kolor jaki ustawimy dla wierzchołków podczas procesu rasteryzacji jest interpolowany dzięki czemu jako parametr wejściowy w jednostce cieniującej fragmentów dostajemy wynikowy kolor który trzeba ustawić dla danego fragmentu jako obowiązujący (lub też go jakoś zmodyfikować). Jako, że na kolor wpływa też światło to moglibyśmy tutaj wyliczać parametry światła. Ale ze względu na dużą ilość obliczeń z tym związaną oraz dużą ilością fragmentów dużo wydajniejsze jest obliczenie tego dla wierzchołków i potem interpolowanie tego.

\n\n

Hello World

\n\n

Uwaga cały kod został przygotowany dla WebGL2. Aktualnie działa w pełni poprawnie w Chrome, Firefox i Operze. Przystosowanie do WebGL w wersji 1 wymaga kliku poprawek.

\n\n

Skoro podstawy jednostek cieniujących mamy za sobą to możemy napisać pierwszy program. Program będzie prosty ale to nie znaczy, że kodu będzie mało. Zacznijmy więc od początku. Aby wyświetlić cokolwiek potrzebujemy obiektu canvas.

\n\n
 <canvas id='webgl'></canvas>
\n\n

Oraz pobrać odpowiedni context na którym będziemy pracować- to tutaj decyduję, że będę pracował dla API WebGL w wersji 2.

\n\n
    const canvas = document.getElementById('webgl');\n    canvas.height = 400;\n    canvas.width = 400;\n    const gl = canvas.getContext("webgl2");\n
\n\n

To teraz czas na resztę elementów. Po pierwsze musimy zdefiniować nasze jednostki cieniujące. Zrobimy to bezpośrednio w kodzie JavaScript.

\n\n
const vertexShaderSource = `#version 300 es\nin vec4 position;\n\nvoid main() {\n  gl_Position = position;\n}\n`;\n\nconst fragmentShaderSource = `#version 300 es\nprecision mediump float;\n\nout vec4 outColor;\n\nvoid main() {\n  outColor = vec4(1.0,1.0,0.0,1.0);\n}\n`;\n
\n\n

A teraz po kolei. Na początku każdej jednostki cieniującej musimy określić jaką wersję języka GLSL aktualnie wykorzystujemy - w tym wypadku korzystamy z GLSL ES 3.00. Dalej definujemy zmienne:

\n\n
    \n
  • in zmienna wejściowa w przypadku shadow vertex pochodzi z programu a dla shadow fragment z shadow vertex
    • \n
  • out zmienna która wychodzi z naszej jednostki cieniującej
    • \n
\n\n

Oprócz określenia czy to jest zmienna wejściowa czy wyjściowa musimy określić jej typ oraz nazwę. Tak jak wspomniałem w poprzednim paragrafie jednostka cieniująca wierzchołków określa pozycję pojedynczych wierzchołków. Aby określić pozycję tego wierzchołka musimy wykorzystać zmienną gl_Position i zapisać do niej pozycję. Natomiast w jednostce cieniującej fragmentów musimy określić kolor i dać go jako zmienną wyjściową jednostki.

\n\n
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);\nconst fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);\n\nconst program = createProgram(gl, vertexShader, fragmentShader);\n
\n\n

Dalej są dwie funkcje pomocnicze - jedna do tworzenia jednostek cieniujących oraz drugi do stworzenia samego programu. Aby stworzyć program najpierw potrzebujemy jednostek cieniujących więc kolejność ma tutaj znaczenie ;)

\n\n
const positionAttributeLocation = gl.getAttribLocation(program, "position");\n\nconst vao = gl.createVertexArray();\n\ngl.bindVertexArray(vao);\n
\n\n

Teraz zdefiniować atrybuty wejściowe dla jednostki cieniującej wierzchołków. Tutaj zrobimy to przy pomocy Vertex Array Object. Istotne jest aby nazwy atrybutów w tym miejscu jak i w shadow vertex były IDENTYCZNE.

\n\n

Drugie polecenie ustawia stworzony chwilę wcześniej obiekt, dzięki czemu wszystkie inne ustawienia będą aplikowane do tego obiektu. No to czas stworzyć nasze pierwsze wierzchołki

\n\n
const positionBuffer = gl.createBuffer();\n\ngl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n\nconst positions = [\n    -0.5, 0,\n    0.5, 0.5,\n    0.7, -0.2,\n];\ngl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);\n
\n\n

Najpierw musimy stworzyć bufor gdzie będziemy przechowywać wierzchołki oraz usatwić nasz bufor jako gl.ARRAY_BUFFER. Następnie ładujemy dane do wierzchołka - koordynaty dla wierzchołka przekazujemy jako tablica 32-bitowych floatów. Dodatkowo ustawiamy, że nasze punkty nie będą się często zmieniać więc wpisujemy gl.STATIC_DRAW - pozwoli to na dodatkowe optymalizacje.

\n\n
gl.enableVertexAttribArray(positionAttributeLocation);\n\ngl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0,0);\n
\n\n

Teraz już zostało tylko podpięcie aktualnie tworzonego bufora do atrybutu. Oprócz samego podpięcia musimy również zdefiniować sposób pobierania danych z tablicy. Wartość na początku - 2 - określa ile danych ma być pobrane z tablicy dla pojedynczego wierzchołka. Teraz już zostaje tylko ustawienie koloru tła i wyświetlenie całości. Całość kodu możecie zobaczyć na Codepen.

\n\n

\n See the Pen \n Basic WebGL by Aleksander (@Feridum)\n on CodePen.\n

\n

\n\n

Dodajmy trochę kolorów

\n\n

Jak wspomniałem wyżej, możemy do wierzchołków przypisywać kolor i będzie on następnie interpolowany wewnątrz trójkąta. Jak więc dodać informacje o kolorach? Po pierwsze musimy zaktualizować nasze jednostki cieniujące. W jednostce cieniującej wierzchołków musimy dodać informacje o nowym atrybucie wejściowym jakim będzie kolor oraz ustawić parametr wyjściowy, który zostanie przekazany do jednostki cieniującej fragmentów.

\n\n
const vertexShaderSource = `#version 300 es\nin vec4 position;\nin vec3 color;\n\nout vec4 fColor;\n\nvoid main() {\n  fColor = vec4(color,1);\n  gl_Position = position;\n}\n`;\n
\n\n

Natomiast w kodzie dla fragmentów wystarczy, że przypiszemy przekazany kolor. Zauważcie tylko, że nazwa i typ zmiennej się zgadza - tak musi być :D.

\n\n
const fragmentShaderSource = `#version 300 es\nprecision mediump float;\n\nin vec4 fColor;\nout vec4 outColor;\n\nvoid main() {\n  outColor = fColor;\n}\n`;\n
\n\n

Teraz musimy ustawić nowy atrybut w kodzie.

\n\n
const colorBuffer = gl.createBuffer();\n\ngl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);\n\nconst colors = [\n    1,1, 0,\n    0, 0.5, 1,\n    0.7, 0, 0,\n];\ngl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);\n\n\ngl.enableVertexAttribArray(colorAttribute);\n\ngl.vertexAttribPointer(colorAttribute, 3, gl.FLOAT, false, 0,0);\n
\n\n

Jak widać jest to większości przekopiowanie istniejącego kodu i dostosowanie. Tutaj możecie zobaczyć efekt. Prawda, że jest ładny?

\n\n

\n See the Pen \n Basic WebGL - vertex colors by Aleksander (@Feridum)\n on CodePen.\n

\n

\n\n

Oczywiście pisanie wszystkiego przy pomocy czystego WebGL może być uciążliwe. Już teraz do wyświetlenia prostego trójkąta potrzebowaliśmy wielu linijek kodu. Dlatego też w większości jak będziemy tworzyć grafikę 3D będziemy korzystać z dodatkowych bibliotek, które zminimalizują trochę kodu naokoło. Jedną z takich bibliotek jest three.js o której będzie więcej następnym razem.

2019-05-14 14:05:00 grafika-3d-w-przegladarce-webgl ckhxjb6o0000yi3umb3hg09jv 2019-05-14 14:05:00 2019-05-14 14:05:00 cjx1yrow001m4i3umh7ho2un8 Czym są Web Components? https://fsgeek.pl/post/czym-sa-web-components/

Za co tak bardzo lubimy biblioteki typu React lub całe frameworki jak Angular? W moim przypadku jest to możliwość tworzenia komponentów, zamykania w nich pewnej części logiki a następnie wykorzystywanie w aplikacji. A jak to zrobić w czystym JavaScriptcie i HTML’u? No właśnie wykorzystując Web Components.

\n\n

Komponenty ponad wszystko

\n\n

Zanim przejdę bezpośrednio do tego czym są Web Componenty i po co są nam one w ogóle potrzebne to zatrzymajmy się na chwilę przy pojęciu samych komponentów. Ja przez to określenie rozumiem pojedynczy element, który posiada swoją reprezentację na stronie internetowej oraz posiadający pewną logikę, która nim steruje. Po co nam są komponenty podczas tworzenia aplikacji? Po pierwsze pomagają nam utrzymywać czysty kod w którym nie mamy zbędnych powtórzeń - można o tym myśleć jak o odpowiedniku enkapsulacji z programowania obiektowego. Po drugie jak będziemy konsekwentni to tworzenie aplikacji sprowadzi się do wybiera odpowiednich klocków(komponentów) i łączenia ich między sobą. Po trzecie i ostatnie jeśli będziemy musieli wykonać zmianę to zrobimy ją w jednym miejscu.

\n\n

Czym są Web Components?

\n\n

Web Component jest nazwą dla zbioru standardów, które umożliwiają pisanie komponentów bez konieczności korzystania z innych bibliotek. Do tych standardów należą: Custom elements, Shadow DOM, HTML Templates.\nPo co w ogóle to rozwiązanie? Nie możemy tworzyć aplikacji przy pomocy React, Vue, Angulara czy innych? No ciągle możemy tylko wtedy jesteśmy związani z konkretnym rozwiązaniem. Nie jesteśmy w stanie przenieść bezpośrednio komponentu z Reacta do Angulara. Natomiast Web Components jak już wspomniałem działają natywnie w przeglądarkach dając nam możliwość tworzenia własnych elementów, które zawierają swoją własna logikę. A jak w ogóle wygląda sytuacja ze wsparciem poszczególnych przeglądarek?

\n\n

custom elements\nshadow dom\nhtml templates

\n\n

Jak widać nie jest najgorzej chociaż mogłoby być lepiej. Nie mogę doczekać się aż w końcu wyjdzie stabilna wersja Edga na Chromuim i wszystkie główne przeglądarki nie będą czerwone.

\n\n

Elementy składowe Web Components

\n\n

Jak już wspomniałem na Web Components składają się 3 standardy. Tak więc aby zrozumieć Web Components to musimy zrozumieć wszystkie składowe:\n- Custom Elements - jest to API, które jak nazwa wskazuje pozwala na tworzenie własnych elementów, które następnie możemy umieścić w drzewie DOM. Możemy rozróżnić dwa rodzaje elementów: całkowicie autonomiczne oraz dostosowanie już istniejących elementów. Różnią się one sposobem deklaracji oraz potem wykorzystania

\n\n

Autonomiczne

\n\n
class ExpandingList extends HTMLElement {\n}\nWindow.customElements.define('expanding-list', ExpandingList);\n
\n\n
<exapanding-list></exapanding-list>
\n\n

Dostosowanie istniejących\n

class ExpandingList extends HTMLUListElement {\n}\nWindow.customElements.define('expanding-list', ExpandingList, { extends: "ul" });\n

\n\n
<ul is="expanding-list"></ul>
\n\n
    \n
  • Shadow DOM - wszyscy wiemy czym jest DOM - struktura drzewiasta, która posiada w węzłach różne elementy, które potem wyświetlają się na stronie. Shadow DOM rozszerza tę koncepcję o możliwość dodawania do tych węzłów tzw. Shadow tree (można o tym myśleć jako podstawieniu pod węzeł nowego drzewa). Dlaczego to jest takie fajne? Ponieważ jesteśmy w stanie manipulować elementami wewnątrz Shadow Tree z poziomu naszego drzewa DOM ale nic co jest wewnątrz Shadow DOM nie będzie wpływać na nic na zewnątrz - na przykład style.
    • \n
  • HTML Templates - jest to tak naprawdę nowy element, który pozwala na definiowanie struktury HTML. Wszystko co jest wewnątrz tego znacznika nie będzie wyrysowane na stronie dopóki nie zostanie umieszczone w drzewie DOM przy pomocy kodu JavaScript
    • \n
\n\n

Etapy budowania własnego komponentu

\n\n
    \n
  1. Stwórz przy pomocy elementu template szablon swojego komponentu - umieść wszystkie potrzebne pola oraz ostyluj tak jak chciałbyś by to wyglądało
    2. \n
  2. Stwórz klasę twojego komponentu, która będzie dziedziczyć po klasie HTMLElement
    3. \n
  3. W konstruktorze tej klasy dodaj nowe drzewo Shadow DOM i następnie podepnij pod niego zawartość szablonu
    4. \n
  4. Zarejestruj nowy element
    5. \n
  5. Rozszerzaj swoją klasę o dodatkową logikę
    6. \n
\n\n

Przykładowy komponent

\n\n

No to mając gotowy przepis czas coś napisać. Jako, że będzie to mały komponent, zapiszę wszystkie potrzebne elementy w jednym pliku. A co będziemy tworzyć? Prosty komponent zawierający pole tekstowe - coś co każdy już widział i idealnie nadaje się jako komponent z którego potem można tworzyć większe formularze. Tak więc najpierw punkt pierwszy - szablon komponentu

\n\n
const template = document.createElement('template');\n\ntemplate.innerHTML = `\n<style>\n    .input-container {\n        display: flex;\n        flex-direction: column;\n    }\n\n    .error-label {\n      color: red;\n    }\n</style>\n<div class='input-container'>\n<label>Default label</label>\n<input name='test'/>\n<div class='error-label'></div>\n</div>\n`\n
\n\n

Jak widać komponent jest prosty i taki też miał być. Chciałbym pokazać, że nie potrzebujemy bardzo skomplikowanych rzeczy i nawet proste elementy warto przenieść do Web Components. Tutaj mamy tak naprawdę standardowy zestaw elementów jakie występują dla pojedynczego pola w formularzu - pole tekstowe, etykieta do tego pola i miejsce na ewentualne błędy.

\n\n

Dalej jest punkt drugi czyli stworzenie klasy, która będzie obsługiwała logikę komponentu.

\n\n
class Input extends HTMLElement {\n    constructor(){\n        super();\n    }\n}\n
\n\n

Dalej w konstruktorze musimy stworzyć nowe drzewo Shadow DOM.

\n\n
constructor(){\n    super();\n    this._shadowRoot = this.attachShadow({ 'mode': 'open' });\n    this._shadowRoot.appendChild(template.content.cloneNode(true));\n}\n
\n\n

Tutaj jedyna rzecz jaka wymaga wyjaśnienia to tryb w jakim tworzymy nasze drzewo DOM. Mamy tutaj dwie opcje do wyboru:\n - Open\n - Close

\n\n

No i został ostatni element do zrobienia czyli zarejestrowanie naszego elementu. Tutaj kolejne ograniczenie, które musimy spełnić czyli nazwa naszego elementu musi zawierać myślnik.

\n\n
window.customElements.define('input-text', Input);\n
\n\n

W tym miejscu mamy już nasz własny komponent gotowy, który możemy wykorzystać. Aby to zrobić musimy najpierw zaimportować nasz skrypt a następnie wykorzystać nasz nowy tag.

\n\n
<input-text></input-text>
\n\n

Tutaj ważna uwaga nie możemy zrobić tego jako samozamykający element - jest ich ograniczona ilość w specyfikacji więc musimy się zadowolić takim zapisem. Właściwie tutaj mógłbym zakończyć ale ten komponent nie jest jeszcze zbyt funkcjonalny. Żeby dało się go dalej używać potrzebujemy edytować parę elementów - etykietę, tekst dla błędu, nazwę pola i wartość domyślną. Możliwość edytowania tego dodam przy pomocy atrybutów - tak żeby wyglądało to podobnie jak w Reactcie. Jak to będzie wyglądało w kodzie?

\n\n
connectedCallback() {\n    const name = this.getAttribute('name');\n    const error = this.getAttribute('error');    \n    const value = this.getAttribute('value');  \n    const label = this.getAttribute('label');  \n\n    const input = this._shadowRoot.querySelector('input')\n    input.setAttribute('name', name);\n    \n    this._shadowRoot.querySelector('.error-label').innerText = error;\n    \n    if(value)\n        input.setAttribute('value', value);\n    \n    if(label)\n        this._shadowRoot.querySelector('label').innerText = label;\n}\n
\n\n

connectedCallback jest jedną z metod dotyczących cyklu życia komponentu - ta jest uruchamiana w momencie gdy nasz komponent został umieszczony w drzewie DOM - taki odpowiednik componentDidMount() z Reacta. Reszta kodu jest w miarę oczywista - pobieramy wartości przy pomocy getAttribute, następnie wyszukujemy odpowiedni element w drzewie dom i umieszczamy tam naszą wartość.

\n\n

Całość kodu i wynik możecie zobaczyć na Codepen. Komponent nie jest za ładny ale nie oto tutaj chodzi. Mając jeden komponent który będzie używany w wielu miejscach zmiana wyglądu nie jest problemem :)

\n\n

\n See the Pen \n Web Component - POC by Aleksander (@Feridum)\n on CodePen.\n

\n

\n\n

I jak wam się podobają Web Components? Korzystacie z tego? Chętnie bym posłuchał opinii oraz wniosków po pracy z tym w prawdziwym projekcie. Jakie problemy napotkaliście i czy było coś co chcieliście zrobić a się nie dało?

2019-06-18 15:30:00 czym-sa-web-components ckhxjb6o0000yi3umb3hg09jv 2019-06-18 15:30:00 2019-06-18 15:30:00 cjxdbfmio01mfi3umgrm1g5fz Podstawy aplikacji webowych - HTTP response status codes https://fsgeek.pl/post/http-response-status-codes/

Każda aplikacji internetowych musi komunikować się z serwerem aby otrzymywać dane, dodawać nowe i aktualizować istniejące. Każda taka komunikacja musi być kontrolowana i sprawdzana pod kątem poprawności wykonania. Do tego celu pomagają nam tak zwane kody odpowiedzi, które występują w każdej wiadomości pochodzącej z serwera. Jednak jakie kody możemy dostać i jakie powinniśmy wysyłać pisząc aplikacje webowe?

\n\n

Kody odpowiedzi w aplikacjach

\n\n

Kody odpowiedzi dla zapytań HTTP zostały opisane w standardzie HTTP/1.1 i możecie o nich poczytać w standardzie RFC 7231 oraz innych, które dopisywały kolejne kody odpowiedzi. Zostały one podzielone na 5 grup, każda poświęcona innemu celowi. Rozróżniamy grupy:

\n\n
    \n
  • 1xx - informacyjna
    • \n
  • 2xx - sukcesu
    • \n
  • 3xx - przekierowania
    • \n
  • 4xx - błędów po stronie klienta
    • \n
  • 5xx - błędów po stronie serwera
    • \n
\n\n

Dziś chciałbym opisać pokrótce te najczęściej spotykane w aplikacjach internetowych, kiedy je wykorzystywać i jak obsłużyć po stronie aplikacji klienckiej.

\n\n

Kody 2xx

\n\n

Zaczniemy od rzeczy przyjemnych czyli kodów, które są związane z sukcesem naszej operacji.

\n\n

200 OK

\n\n

Na pierwszy rzut będzie standardowy kod 200 OK, który jest najbardziej ogólny i oznacza, że wysłane zapytanie zakończyło się sukcesem. Dodatkowo jeśli zapytanie zakończyło się tym statusem oznacza to, że powinniśmy również otrzymać w odpowiedzi jakieś dane.

\n\n
    \n
  • Kiedy wysyłamy: Zawsze wtedy gdy nie wystąpiły powody do użycia innych
    • \n
  • Obsługa: Dostaliśmy dane o które prosiliśmy więc możemy teraz na nich pracować
    • \n
\n\n

201 Created

\n\n

Kod odpowiedzi najczęściej kojarzony z operacją POST czyli stworzeniem zasobu po stronie serwera. Co istotne tą odpowiedź możemy wysłać dopiero po faktycznym stworzeniu zasobu. Powinniśmy także wysłać informację do klienta jak się dostać do nowo utworzonego elementu.

\n\n
    \n
  • Kiedy wysyłamy: Kiedy został stworzony nowy zasób po stronie serwera oraz chcemy poinformować klienta jak się do niego dostać
    • \n
  • Obsługa: Najczęściej obsługa będzie wiązała się z wyświetleniem komunikatu o poprawnym stworzeniu elementu, zamknięciu formularza czy też przekierowania do listy lub innego miejsca w aplikacji
    • \n
\n\n

204 No Content

\n\n

Serwer przyjął zapytanie od klienta, przetworzył ale nic nie zwraca w odpowiedzi.

\n\n
    \n
  • Kiedy wysyłamy: Wtedy kiedy operacja się powiodła ale nie potrzebujemy nic zwracać np.: po usunięciu elementu
    • \n
  • Obsługa: obsługa zależy od tego jaką operację wykonaliśmy ale najczęściej będzie to wyświetlenie komunikatu, odświeżenie listy elementów, przekierowanie na inną stronę itp.
    • \n
\n\n

Kody 4xx

\n\n

Teraz już nie będzie tak fajnie bo kody 4xx oraz 5xx oznaczają, że coś się nie powiodło i należy na to jakoś zareagować. Błędy 4xx charakteryzują się tym, że winę najczęściej ponosi frontend więc i na niego spada konieczność znalezienia i poprawy błędu.

\n\n

400 Bad Request

\n\n

Błąd, który otrzymujemy kiedy serwer nie był w stanie przetworzyć naszego żądania. Może to być spowodowane tym, że nie wysyłamy tego co powinniśmy czyli np.: deklarujemy że wysyłamy JSON a tak naprawdę leci XML, albo wysyłamy JSON, który ma błędy i nie da się go przetworzyć. Bardzo często też widzę ten kod w odpowiedzi na wysłanie formularza, który ma niepoprawne dane np.: imię które zawiera cyfry ale do tego celu istnieje lepszy kod odpowiedzi.

\n\n
    \n
  • Kiedy wysyłamy: Kiedy nie potrafimy przetworzyć ciała w żądaniu oraz podczas błędów walidacji żądania (o ile jest tak ustalone z zespołem)
    • \n
  • Obsługa: O ile nie jest to błąd walidacji to wina leży gdzieś w naszym kodzie. Może to być błędne wysyłanie typu w jakim wysyłamy ciało żądania (na przykład biblioteka, którą używamy korzysta z jakiegoś domyślnego).
    • \n
\n\n

401 Unauthorized

\n\n

Nazwa jest trochę pechowa, ponieważ ten kod błędu odnosi się do błędu autentykacji(uwierzytelnienia) a nie autoryzacji. Z racji tego, że te dwa pojęcia się mylą szybka powtórka:

\n\n
    \n
  • Uwierzytelnienie - potwierdzenie swojej tożsamości
    • \n
  • Autoryzacja - potwierdzenie dostępu do konkretnych informacji
    • \n
\n\n

I szybki przykład: Użytkownik może być uwierzytelniony w systemie i z niego korzystać ale jeśli nie ma roli admina to nie przejdzie autoryzacji by móc np.: obejrzeć logi z systemu.

\n\n

Błąd ten może wystąpić w każdym zapytaniu do serwera i informuje, że w zapytaniu nie ma odpowiednich informacji o tym czy użytkownik jest zalogowany w systemie (może to być token JWT, odpowiednie cookie lub cokolwiek innego)

\n\n
    \n
  • Kiedy wysyłamy: Zawsze przed rozpoczęciem przetwarzania zapytania musimy sprawdzić czy nadawca ma uprawnienia żeby go wykonać. Na sprawdzenie powinno się składać po pierwsze czy istnieje element po który, uwierzytelniamy oraz czy nie jest przedawniony. Jeśli sprawdzenie się nie powiedzie to musimy rzucić błędem 401.
    • \n
  • Obsługa: Po pierwsze jeśli jesteśmy w części systemu, która powinna być widoczna po zalogowaniu to musimy przekierować użytkownika do strony logowania oraz usunąć wszystkie dane, które do tej pory mogliśmy gdzieś zapisać. Jeśli takie coś będzie się często powtarzało to może wskazywać na problem z odświeżeniem tokenu lub podtrzymywaniem sesji zalogowanego użytkownika
    • \n
\n\n

403 Forbidden

\n\n

Tutaj jest miejsce dla drugiej sytuacji czyli jesteśmy uwierzytelnieni ale nie mamy dostępu do danej części systemu. Najczęściej pojawia się w systemach gdzie istnieje wiele ról, które posiadają odmienne dostępy do różnych części systemu np.: rola która zakazuje wstępu do ustawień, druga która pozwala na pobranie i wyświetlenie ale nie edycję oraz inna która może wszystko. Błąd ten może się pojawić jeśli logika w aplikacji klienckiej nie przewidziała jakiegoś przypadku i wpuściła użytkownika tam gdzie nie ma dostępu lub też użytkownik sam próbuje się tam dostać przez wpisanie odpowiedniego adresu URL

\n\n
    \n
  • Kiedy wysyłamy: Kiedy byliśmy w stanie potwierdzić tożsamość użytkownika ale podczas sprawdzania uprawnień odkryliśmy, że rola użytkownika nie pozwala na daną akcję.
    • \n
  • Obsługa: Po pierwsze musimy usunąć użytkownika z miejsca zabronionego. Możemy to zrobić albo przesuwając go wstecz do ostatniej poprawnej pozycji lub do głównej strony aplikacji. Warto też sprawdzić czy użytkownik dostał się sam w to miejsce lub też jest jakiś błąd w logice aplikacji frontendowej.
    • \n
\n\n

404 Not found

\n\n

To czego szukamy nie istnieje na serwerze. Najczęściej się to odnosi to do sytuacji gdy chcemy pobrać pliki z serwera, pobrać informacje o nieistniejącym elemencie lub jak w przypadku stron statycznych wpisaniu niewłaściwego url’a.

\n\n
    \n
  • Kiedy wysyłamy: Kiedy nie możemy znaleźć elementu o który prosi nadawca żądania
    • \n
  • Obsługa: Najczęściej wyświetlamy specjalna stronę gdzie informujemy użytkownika, że elemnt który szuka nie istnieje
    • \n
\n\n

405 Method Not Allowed

\n\n

Osobiście mój ulubiony kod z tej grupy ponieważ najczęściej jego wystąpienie jest winą backendu. Spotkamy go jeśli serwer zabronił pewnych operacji np.: ze względów bezpieczeństwa. Jest to również popularny błąd dla mechanizmu CORS jeśli backend nie zwrócił dozwolonych operacji w nagłówku Access-Control-Request-Method

\n\n
    \n
  • Kiedy wysyłamy: Kiedy typ operacji nie zgadza się z listą dostępnych np.: pojawiło się żądanie PUT a dozwolone operacje to GET i POST
    • \n
  • Obsługa: Tutaj nie ma wiele opcji do wyboru. Możemy zmienić typ żądania, porozmawiać z backendem aby pozwolił na operację lub prawidłowo skonfigurował CORS’y (jeśli to ich konfiguracja spowodowała błąd)
    • \n
\n\n

422 Unprocessable Entity

\n\n

To jest błąd, który według specyfikacji powinniśmy wykorzystywać dla błędów żądania, które są poprawne pod względem techniczym ale zawierają błędy w wartości.

\n\n
    \n
  • Kiedy wysyłamy: W momencie gdy żądanie zawiera błędy wartości czyli została wysłana wartość niewłaściwa dla tego pola. Razem z tym błędem powinniśmy wysłać opisy błędów i jakich pól dotyczą
    • \n
  • Obsługa: W większości ten błąd wystąpi podczas wysyłania danych w formularzu. Jeśli dostaniemy taki błąd to oprócz błędu dostaniemy obiekt zawierający pola oraz jakie błędy zawierają.
    • \n
\n\n

Kody 5xx

\n\n

I błędy, których nikt nie chce widzieć ponieważ oznaczają, że coś zepsuło po stronie serwera.

\n\n

500 Internal Server Error

\n\n

Błąd też oznacza, że serwer napotkał jakiś problem i nie może skończyć żądania. Może być spowodowany za dużą ilością żądań a więc przeciążeniem serwera, błędem w kodzie np.: próbowanie wyciągnięcia wartości z nulla, błędnie napisanym skrypcie lub też innym wyjątkiem, który nie został poprawnie złapany i obsłużony. Znalezienie przyczyny i naprawa takiego błędu może być utrudniona i zająć sporo czasu jeśli nie mamy odpowiednio tworzonych logów.

\n\n
    \n
  • Kiedy wysyłamy: NIGDY - taki błąd oznacza, że coś złego się stało po naszej stronie.
    • \n
  • Obsługa: Niestety tutaj nie pozostaje nam nic innego jak wyświetlić stronę gdzie przepraszamy za utrudnienia i prosimy by wrócić za chwilę
    • \n
\n\n

Z błędów, z którymi spotykam się najczęściej to będzie wszystko. Czy jest coś co byście dodali do tej listy? A możecie macie własne przemyślenia dotyczące kodów odpowiedzi HTTP? Zapraszam do komentowania i dzielenia się wpisem.

2019-06-26 14:10:00 podstawy-aplikacji-webowych-http-response-status-codes ckhxjb6o0000yi3umb3hg09jv 2019-06-26 14:10:00 2019-06-26 14:10:00 -cjxnbp0o001mri3umca4k94pa Podstawy aplikacji webowych - SOP i CORS https://fsgeek.pl/post/sop-cors/

Podczas pisania aplikacji ciągle musimy zwracać uwagę na bezpieczeństwo danych, które są przesyłane między klientem a serwerem. Oprócz mechanizmów, które sami implementujemy istnieją też te zaimplementowane natywnie w przeglądarce. To o czym dziś chciałbym powiedzieć to jeden z takich mechanizmów czyli SOP oraz sposób na jego rozluźnienie czyli CORS.

\n\n

Czym jest SOP

\n\n

Zacznijmy od mechanizmu zabezpieczającego, który jest zaimplementowany w przeglądarce czyli SOP - Same-Origin Policy. Mechanizm ten polega, że tylko strony posiadające to samo pochodzenie (origin) mogą komunikować między sobą i wymieniać dane między sobą (najczęściej jest to komunikacja na drodze klient - serwer gdzie to klient chce dane istniejące na serwerze). Jednak kiedy możemy powiedzieć, że strony (aplikacje) mają to samo pochodzenie? Do określenia tego służą nam 3 elementy :

\n\n
    \n
  • Protokół
    • \n
  • Host
    • \n
  • Port
    • \n
\n\n

Jeśli te 3 elementy będą identyczne to znaczy, że strony mają ten sam Origin. Żeby lepiej to zobrazować mam parę przykładów:

\n\n
    \n
  • http://example.com i http://example.com/page/1 - OK
    • \n
  • http://example.com i https://example.com - inny protokół (HTTP i HTTPS)
    • \n
  • http://example.com i http://example.com:8080 - inny port (domyślnie http:// jest na porcie 80)
    • \n
  • http://example.com i http://posts.example.com - inny host
    • \n
\n\n

Jeśli to sprawdzenie nie przejdzie (czyli przynajmniej jeden z elementów będzie różny) to przeglądarka zablokuje taką komunikację i klient nie dostanie danych o jakie prosi.

\n\n

Czym jest CORS

\n\n

Skoro wiemy czym jest SOP to teraz mechanizm, który pozwala nam to osłabić czyli CORS - Cross-Origin Resource Sharing. Jednak skoro SOP ma nas chronić to po co mechanizm, który będzie go osłabiał? Jest to spowodowane sposobem w jaki tworzymy aktualnie aplikacje internetowe. Obstawiam, że większość aktualnie tworzonych aplikacji jest tworzona jako SPA - czyli mamy kod Javascript, który komunikuje się przy pomocy odpowiednich zapytań z serwerem. No i w związku z tym, że są to osobne aplikacje (frontend i backend) to nie będą spełniały wymogu posiadania identycznego Originu. Bez CORS’a takie aplikacje nie mogłyby funkcjonować.

\n\n

CORS jest mechanizmem, który przy pomocy zwykłych nagłówków w zapytaniu HTTP informuje przeglądarkę (to przeglądarka pilnuje SOP’a), że klient, który jest na konkretnym hoście, protokole i porcie może odpytywać serwer o dane. Czyli wracając jednego z przykładów wyżej - http://example.com i http://example.com:8080 - komunikacja będzie możliwa jeśli serwer (http://example.com:8080) poinformuje przeglądarkę że ufa klientowi, który znajduje się na http://example.com i ten może odpytywać o dane. Tylko jak to zrobić w aplikacji?

\n\n

Jak działa mechanizm CORS

\n\n

Mechanizm CORS ma to do siebie, że jego nieumiejętne skonfigurowanie powoduje, że nie działa albo cała aplikacja albo część funkcjonalności - w zależności od tego o czym zapomnimy. Warto również pamiętać, że obowiązek poprawnej konfiguracji tego mechanizmu leży po stronie programistów piszących cześć serwerową (backend) - frontend nie jest w stanie naprawić błędów, które wynikają ze złej konfiguracji.

\n\n

Jednak zanim opiszę jakie nagłówki serwer musi wysyłać to jeszcze szybko o dwóch rodzajach zapytań jakie możemy wykonać:

\n\n
    \n
  • Simple request
    • \n
  • Preflighted reqest
    • \n
\n\n

Idea prostego zapytania (Simple request) jest następująca - jest to każde zapytanie, które spełnia wszystkie poniższe warunki:

\n\n
    \n
  • Dozwolone metody: GET, HEAD, POST
    • \n
  • Dozwolone nagłówki (te które możemy sami ustawić): Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width
    • \n
  • Dozwolone wartości dla Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain
    • \n
\n\n

Jak wygląda komunikacja klient - serwer w przypadku prostego zapytania:

\n\n
    \n
  • Klient wysyła zapytanie do serwera
    • \n
  • Przeglądarka dołącza do zapytania nagłówek Origin
    • \n
  • Serwer zwraca odpowiedź wraz z nagłówkiem Access-Control-Allow-Origin
    • \n
  • Przeglądarka sprawdza czy wartość w Access-Control-Allow-Origin zgadza się z wartością Origin klienta
    • \n
  • Jeśli wartość się nie zgadza to przeglądarka blokuje klienta przed otrzymaniem danych z serwera\n
    • \n
\n\n

Jednak w aplikacjach internetowych nie wykorzystujemy prostych zapytań tylko preflight. Dlaczego? Ponieważ po pierwsze właściwie wszystko leci za pomocą json’a czyli nie zgadza się Content-Type, po drugie w 90% przypadków mamy jakieś uwierzytelnianie więc przesyłamy dodatkowy nagłówek z autoryzacją.

\n\n

Jak więc wygląda komunikacja w przypadku preflighted request:

\n\n
    \n
  • Klient chce wysłać zapytanie do serwera ale zapytanie nie spełnia założeń simple request
    • \n
  • Zapytanie jest wstrzymywane przez przeglądarkę i jest wysyłane zapytanie preflight, którego celem jest sprawdzenie czy klient może wykonać zamierzone zapytanie
    • \n
  • Zapytanie preflight charakteryzuje się kilkoma elementami:\n\n
      \n
    • wysłane zapytanie ma metodę OPTIONS
      • \n
    • wysyłane są dodatkowe nagłówki Access-Control-Request-Method, Access-Control-Request-Headers oraz ORIGIN (o samych nagłówkach będzie za chwilę)
      • \n
    • \n
  • W momencie gdy przeglądarka dostaje odpowiedź na zapytanie sprawdza zawartość nagłówków Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers w odpowiedzi
    • \n
  • Jeśli wszystko jest w porządku to jest wysyłane oryginalne zapytanie tak jak w przypadku Simple Request
    • \n
\n\n

Nagłówki CORS

\n\n

Jak widać cały mechanizm CORS opiera się na wysyłaniu odpowiednich nagłówków. Tak więc aby to poprawnie zaimplementować wystarczy, że będziemy wiedzieć do czego są poszczególne nagłówki oraz będziemy je konsekwentnie wysyłać. Same nagłówki możemy podzielić na dwa rodzaje - te wysyłane od klienta oraz te wysyłane przez serwer. I tak jak nagłówkami od strony klienta nie musimy się przejmować bo ustawia je za nas przeglądarka to o tych od strony serwera musimy pamiętać sami.

\n\n

Nagłówki po stronie klienta:

\n\n
    \n
  • Origin - Orign klienta
    • \n
  • Access-Control-Request-Method - w zapytaniu preflight jest tu wpisywana nazwa metody z jaką klient chciał wykonać zapytanie
    • \n
  • Access-Control-Request-Headers - znajdują się tam nagłówki, które zostaną wykorzystane przy normalnym zapytaniu
    • \n
\n\n

Nagłówki po stronie serwera:

\n\n
    \n
  • Access-Control-Allow-Origin - serwer zwraca tutaj informacje jaki Origin musi mieć klient by był w stanie wykonać request. Oprócz podania konkretnej wartości można podać tutaj wartość * co oznacza, że każdy może wykonać zapytanie.
    • \n
  • Access-Control-Allow-Methods - tutaj serwer zwraca jakie rodzaje zapytań są dozwolone
    • \n
  • Access-Control-Allow-Headers - tutaj serwer zwraca informację jakie nagłówki może wysłać klient
    • \n
\n\n

Jak sobie poradzić podczas developmentu

\n\n

Oczywiście prawidłowa konfiguracja dla produkcji nie gwarantuje, że będzie to działało podczas developmentu. Ja osobiście podczas pisania frontendu nie lubię stawiać u siebie backendu tylko staram się korzystać ze stagingu czy innego testowego środowiska. Ale oczywiście powoduje to problemy z mechanizmem CORS - jak sobie z tym poradzić? Parę sprawdzonych przeze mnie sposobów:

\n\n
    \n
  • Zawsze jeśli mamy więcej niż jedno środowisko testowe możemy poprosić by na tym pobocznym ustawić Access-Control-Allow-Origin na wartość * lub przepisywanie Originu klienta. Jeśli macie tylko jedno środowisko przedprodukcyjne to nigdy nie róbcie takich zabiegów- potem może się okazać że coś nie działa na produkcji bo jest jakaś błędna konfiguracja
    • \n
  • Wyłączyć ten mechanizm obronny w swojej przeglądarce - można to zrobić albo wtyczką albo uruchomieniem przeglądarki odpowiednimi przełącznikami - rozwiązanie prawie idealne - nie działają wtedy niektóre serwisy np.: Youtube, Google Drive, Twitter a i pewnie jest tego więcej
    • \n
  • No i ostatnia opcja - postawienie sobie lokalnie części serwerowej i zmiana konfiguracji tak aby działała z lokalnym środowiskiem frontendowym
    • \n
\n\n

A wy jak sobie radzicie z CORS’em? A może macie jakieś ciekawe historie lub use-case’y związane z mechanizmem SOP lub CORS? Zapraszam do komentowania i dzielenia się wpisem.

2019-07-03 14:15:00 podstawy-aplikacji-webowych-sop-i-cors ckhxjb6o0000yi3umb3hg09jv 2019-07-03 14:15:00 2019-07-03 14:15:00 -cjxws4odc01n0i3umhoixh4eg Kto jest kim, czyli role w WebDevelopmencie https://fsgeek.pl/post/kto-jest-kim-czyli-role-webdevelopment/

Podczas tworzenia aplikacji można rozróżnić wiele różnych ról, z których każda jest odpowiedzialana za inną część aplikacji i posiada inne umiejętności. Jeśli jesteś początkującym programistą, lub twój partner/ka jest programistą/ką to te magiczne nazwy mogą nic nie mówić i powodować niezrozumienie. A warto wiedzieć kto jest kim i za co jest odpowiedzialny.

\n\n

Design, czyli artyści

\n\n

Dział designu i pracujący w nim ludzie (zwani często grafikami) pracują nad wyglądem aplikacji internetowej. To oni najczęściej współpracują na początku projektu z klientem tworząc wszystkie wizualne elementy na stronie dbając o to by były spójne między sobą i odpowiadały wizji klienta. Zawsze przy projektowaniu takich aplikacji należy mieć na uwadze dla jakiej grupy końcowej tworzymy oprogramowanie - niektórzy mogą nie docenić innowacyjnych pomysłów. Design najczęściej pracuje w swoich ulubionych programach graficznych przy czym w Web Developmencie najczęściej się spotyka Photoshop oraz Sketch.

\n\n

Frontend, czyli po co komu tyle przeglądarek

\n\n

Programiści frontendu realizują wizję grafików i klienta w aplikacji. Efektem prac programisty frontendu jest aplikacja internetowa, a dokładniej wszystkie elementy wizualne, które się tam znajdują i które mogą używać użytkownicy końcowi - wszystko to co widzi użytkownik końcowy było stworzone przez tę grupę programistów. Frontend oraz design powinni bardzo ściśle ze sobą współpracować aby dostarczyć jak najlepszy UI (czyli wygląd aplikacji) oraz UX (czyli całość wrażeń jakie użytkownik ma podczas korzystania z systemu np.: czy jest intuicyjny, czy elementy są spójne, czy potrzebne rzeczy są pod ręką itd.).

\n\n

W swojej pracy frontend może tylko korzystac z trzech języków: HTML, JS i CSS. Na szczęście dużo większy wybór jest w bibliotekach i frameworkach, które można wykorzystać by uzyskać końcowy efekt. Największy problem pisania aplikacji frontendowych to różnorodność przeglądarek i systemów operacyjnych - różnice są czasami tak duże, że aplikacja działająca w jednej przeglądarce ma problemy w innej.

\n\n

Backend, czyli szare eminencje

\n\n

Dla użytkowników końcowych backend nie istnieje pomimo, że efekt ich prac jest jednym z ważniejszych podczas tworzenia aplikacji internetowych. Backend odpowiada za całą logikę biznesową aplikacji, zapisywanie danych w bazie danych oraz komunikacje z innymi częściami systemu. Na backendzie ciąży duża odpowiedzialność ponieważ muszą oni pilnować najważniejszych aspektów aplikacji np.: żeby wszystkie operacje w banku były liczone poprawnie, żeby zamówienia były poprawnie obsługiwane, żeby wiadomości trafiały do właściwych odbiorców itd.

\n\n

W kwestii doboru języka programiści backendu mają dużą swobodę ponieważ w prawie każdym języku da się stworzyć odpowiednią aplikację. Jednak oprócz samego języka trzeba wybrać wiele innych elementów infrastruktury z których będzie się korzystało: baza danych, kolejki, sposoby uwierzytelniania itd. Tutaj też powinno się zwracać największą uwagę na testowanie kodu aby ustrzec się przed błędami w przyszłości.

\n\n

QA, czyli znalazłem błąd w aplikacji

\n\n

QA (od ang. quality assurance) potocznie nazywany również testerem jest osobą, która jest odpowiedzialna za przetestowanie aplikacji oraz znalezenie możliwie jak najwięcej błędów w aplikacji zanim pójdzie ona na produkcję.\n QA można podzielić ze względu na rodzaj testowania jakie jest wykonywane:

\n\n
    \n
  • Manualne - ręczne przeklikanie aplikacji, czyli próba naśladowania zachowań użytkowników w szczególności tych skrajnych sytuacji
    • \n
  • Automatyczne - pisanie kodu, którego zadaniem jest udawanie użytkownika oraz automatyczne klikanie po aplikacji. Najczęściej testy automatyczne starają się pokryć najbardziej krytyczne ścieżki w aplikacji (czyli te najczęściej wykorzystywane oraz najważniejsze dla danej aplikcji) tak aby uchronić się przed regresją (psucie już zaimplementowanych funkcjonalności podczas wprowadzania nowych).
    • \n
\n\n

Tak naprawdę każdy programista powinien też w pewien sposób być również QA. Po pierwsze zanim wypuścimy nową funkcjonalność powinniśmy ją przetestować lokalnie (po co wypuszczać coś co nie działa w żaden sposób). Po drugie powinniśmy pisać testy, które będą sprawdzały czy nasz kod działa poprawnie i zabezpieczały go na przyszłość.

\n\n

Kolejna rzecz jaka jest istotna w kontekście QA to, że osoby w tym dziale nie są odpowiedzialne tylko za testowanie. Jak sama nazwa wskazuje osoby na tym stanowisku mają zapewnić o jakości wytworzonego oprogramowania. Tak więc oprócz samego zgłaszania problemów QA proponuje często rozwiązania, które mają poprawić UX aplikacji, jej odbiór przez użytkowników. Dodatkowo pracują wewnątrz projektu nad jego dokumentacją, administracją JIRY, opisywaniem zadań, ustalaniem priorytetów razem z klientem i project managerem - tak naprawdę zakres obowiązków będzie się różnił w zależności od firmy i projektu.

\n\n

DevOps, czyli magicy od infrastruktury

\n\n

Dział DevOps dba o to by części aplikacji stworzone przez frontend oraz backend poprawnie się komunikowały z innymi elementami infrastruktury np.: bazą danych, zewnętrznymi serwisami oraz komunikacją pomiędzy pojedynczymi serwisami stworzonymi przez backend. Problemem przy tworzeniu infrastruktury jest unikalność każdej aplikacji. Oczywiście można sobie tworzyć przykładowe konfiguracje serwera i Dockera ale i tak każdy projekt będzie wymagał większej lub mniejszej ilości poprawek i dostosowania do wymagań danej aplikacji.

\n\n

Tutaj podobnie jak backend wymagana jest szeroka wiedza z zakresu sposobów tworzenia infrastruktury, o systemach operacyjnych na którym jest uruchomiona aplikacja, o wymaganiach jej poszczególnych elementów oraz sposobów na zarządzanie tym w przyszłości. DevOps również dba o odpowiednie monitorowanie zasobów w systemie i reagowanie w sytuacjach kryzysowych np.: zaczęła się wyprzedaż na Allegro i nagle pół Polski w jednym momencie próbuje się dostać i coś kupić. Z racji zarządzania infrastrukturą programiści DevOps mają najczęściej największe uprawnienia i dostęp tam gdzie nawet programiści nie mają dostępu np.: baza danych na produkcji - przez to ciąży na nich również większa odpowiedzialność.

2019-07-10 05:05:00 kto-jest-kim-czyli-role-w-webdevelopmencie ckhxjb6o0000yi3umb3hg09jv 2019-07-10 05:05:00 2019-07-10 05:05:00 -cjygs468001noi3um8pwo9few Upload plików w aplikacji https://fsgeek.pl/post/upload-plikow-w-aplikacji/

Upload plików w aplikacji jest dość często pojawiającą się funkcjonalnością. Pozwala na wysyłanie plików do innych osób, serwisów, dostarczaniu danych do aplikacji żeby nie musieć wypełniać ich ręcznie lub zwykłym umieszczaniu zdjęć na stronie. Podczas tworzenia aplikacji możemy wykorzystać jedną z wielu bibliotek, która dodaje w naszej aplikacji frontendowej taką funkcjonalność ale może da się to zrobić samemu?

\n\n

input type=“file”

\n\n

Tak naprawdę stworzenie takiej funkcjonalności bez żadnej bibliotek nie jest niczym trudnym. Musimy się tylko oprzeć o znany element HTML - input z odpowiednim typem file

\n\n
<input type="file"/>
\n\n

Już samo takie polecenie powoduje, że wyświetla nam się przycisk wraz z informacją dotyczącą jaki plik wybraliśmy.

\n\n

\n See the Pen \n Input file by Aleksander (@Feridum)\n on CodePen.\n

\n

\n\n

Oczywiście na tym nie kończą się możliwości tego elementu ponieważ razem z tym typem dostajemy kilka atrybutów, którymi możemy sterować pracą inputa. Znajdziemy tam:

\n\n
    \n
  • accept - określamy jakie typy plików lub rozszerzeń użytkownik może wybrać
    • \n
  • capture- jeśli dopiszemy ten atrybut to podczas wyboru pliku do uploadu automatycznie będzie wykorzystana kamera lub mikrofon (w zależności od atrybutu accept) o ile są dostępne
    • \n
  • multiple - atrybut typu boolean, który określa czy można wybrać kilka plików
    • \n
  • files - pod tym atrybutem znajdują się nasze pliki
    • \n
\n\n

Warto jeszcze na chwilę zatrzymać się przy atrybucie accept. Dopuszcza on kilka możliwości ustawiania wartości:

\n\n
    \n
  • Rozszerzenie pliku, który chcemy dopuścić np.: .png
    • \n
  • Poprawny typ MIME np.: image/png
    • \n
  • Tekst audio/*, który oznacza dowolny plik dźwiękowy
    • \n
  • Tekst video/*, który oznacza dowolny plik wideo
    • \n
  • Tekst image/*, który oznacza dowolny obrazek
    • \n
\n\n

Dodatkowo możemy podać wiele wartości oddzielając je przecinkiem np.: accept=".png,.jpg".

\n\n

Upload pliku w React

\n\n

Jednak rzadko kiedy widzimy takie pole, ponieważ nie pasuje ono zazwyczaj do wyglądu strony i taki element psułby wizualnie całość aplikacji. Zamiast tego widzimy zwykłe przyciski lub inne mechanizmy, które ukrywają input a wystawiają ładnie wyglądający element. Jak to zrobić w React.js? Przykładowy komponent może wyglądać następująco:

\n\n
<div>\n    <input\n      type="file"\n      className="inputFile"\n      ref={file}\n      onChange={handleChange}\n      data-testid="inputFile"\n    />\n    <div className="container">\n    <div className="fileName" data-testid="fileName">\n        {fileState && fileState.name}\n    </div>\n    <div className="button" onClick={handleClick}>\n        Wybierz plik\n    </div>\n    </div>\n</div>
\n\n

Przy tworzeniu takich komponentów pierwszy krok to będzie umieszczenie oraz ukrycie natywnego <input type="file"/>. Dalej wykorzystujemy mechanizm ref'a w React’cie aby dostać się do tego elementu i go kliknąć oraz potem by pobrać odpowiedni plik z atrybutu files. Cała reszta to tak naprawdę odpowiednie ostylowanie naszego komponentu. Prawda, że proste?

\n\n

Testy w React

\n\n

Została ostatnia rzecz do zrobienia. Skoro mamy komponent w React’cie to warto go przetestować. Ostatnio testuję komponenty React’a z wykorzystaniem react-testing-library (jeśli korzystacie z Enzyma to polecam spróbować tej biblioteki - osobiście znacznie lepiej pisze mi się teraz testy). Oczywiście to co tutaj pokażę to jest najprostszy przypadek i pokazuje tylko jak można podejść do tego problemu. Każdy formularz jest unikalny i będziemy w nim testować coś innego.

\n\n
const file = new File(["filec content"], "file.png", {\n  type: "image/png"\n});\n\ndescribe("shows the children when the checkbox is checked", () => {\n  it("display filename in box after upload", () => {\n    const { getByTestId } = render(<UploadFile />);\n\n    const input = getByTestId("inputFile");\n\n    Object.defineProperty(input, "files", {\n      value: [file]\n    });\n\n    fireEvent.change(input);\n\n    expect(getByTestId("fileName").textContent).toEqual("file.png");\n  });\n});
\n\n

Tak może wyglądać test do komponentu, który stworzyliśmy przed chwilą. Najważniejsza jest ta część, która odpowiada za stworzenie pliku w JS oraz zasymulowanie wybrania go przez użytkownika.

\n\n

Tworzenie pliku:\n

const file = new File(["filec content"], "file.png", {\n  type: "image/png"\n});

\n\n

Symulacja wybrania pliku przez użytkownika:\n

Object.defineProperty(input, "files", {\n  value: [file]\n});\n\nfireEvent.change(input);

\n\n

Całość kodu możecie zobaczyć na CodeSandbox. A jak u was wygląda upload plików? Rozwiązujecie to podobnie czy zupełnie inaczej? A może wolicie biblioteki - jeśli tak to z czego korzystacie i dlaczego?

2019-07-24 05:00:00 upload-plikow-w-aplikacji ckhxjb6o0000yi3umb3hg09jv 2019-07-24 05:00:00 2019-07-24 05:00:00 -cjyq1876o01nwi3umbryu9zj6 Jak uczyć się programowania? https://fsgeek.pl/post/jak-uczyc-sie-programowania/

Rynek potrzebuje coraz więcej programistów - z tym zdaniem można się często spotkać. Dlaczego tak się dzieje? Odpowiedź jest prosta - prawie każda dziedzina i proces może zyskać dzięki dedykowanej aplikacji. Jednak jak się uczyć programowania zarówno na początku drogi jak i potem podczas doskonalenia umiejętności by było to przyjemne i co ważniejsze efektywne?

\n\n

Książki

\n\n

Książki są chyba pierwszym pomysłem na początku nauki nowych umiejętności. I tak jak sprawdzają się w wielu dziedzinach - gotowanie, malowanie, ogrodnictwo tak w stosunku do informatyki a szczególnie programowania jestem nastawiony raczej sceptycznie. Książki o programowaniu mają jeden zasadniczy problem - wiele z nich jest nieaktualna (szczególnie polskie tłumaczenia) w momencie wydania. Jedyne książki jakie według mnie warto kupić i czytać to te traktujące o elementach niezmiennych czyli architektura, zasadach prowadzenie projektu i kodu, umiejętności miękkie itd. Natomiast nie kupowałbym książek, które traktują o konkretnej bibliotece ponieważ szybko straci na ważności.

\n\n

Oczywiście od każdej reguły są odstępstwa. Na przykład dla Javascriptu jest świetna seria You don't know JS, którą znajdziecie za darmo na Githubie - gorąco zachęcam do przeczytania.

\n\n

Kursy

\n\n

Dużo lepszym pomysłem na rozpoczęcie nauki według mnie to różnego rodzaju kursy. Tutaj autorzy zazwyczaj starają się aby ich kursy były ciągle aktualne - a jeśli nie to jest wystarczająco duży wybór innych twórców. Kolejna zaleta nad książkami jest taka, że bardzo często są tam ćwiczenia, które należy wykonać samemu w celu utrwalenia wiedzy. Taka nauka jest dużo bardziej efektywna od suchego czytania. Co do serwisów które oferuja kursy mogę polecić kilka:

\n\n
    \n
  • Udemy - bardzo często są tam różnego rodzaju promocje i wyprzedaże (nie opłaca się kupować w oryginalnej cenie, lepiej poczekać na obniżkę)
    • \n
  • Egghead
    • \n
  • Plurasight
    • \n
\n\n

Własne projekty

\n\n

Następny etap po kursach gdzie najczęściej jesteśmy prowadzeni za rączkę to zrobienie projektu sami od początku do końca. Nie będzie to łatwe, ponieważ okaże się na początku, że nie wiecie od czego zacząć, co robić i jak to robić. Ale oto właśnie chodzi - tutaj tak naprawdę się przekonacie czy programowanie jest dla was. Taki własny projekt nauczy was dużo więcej niż kursy - nauczy was planowania, pracy z Gitem (to właściwie obowiązkowe), projektowania architektury, szukania informacji w dokumentacji czy też rozwiązywania problemów. Największy problem w przypadku własnych projektów to co zrobić? Na samym początku nie należy za bardzo kombinować - spróbować zrobić to samo co na kursie tylko samemu, rozbudować o dodatkową funkcjonalność lub też zapytać na jakimś forum co można zrobić za projekt. Jeśli nie będziecie wiedzieć co możecie zrobić to możecie napisać do mnie - na pewno coś podpowiem :)

\n\n

Blog

\n\n

Kolejny świetny pomysł na naukę i doskonalenie swoich umiejętności to założenie bloga. Nic tak nie zachęca do pogłębiania swojej wiedzy jak chęć napisania nowego postu. Oczywiście wiem jakie możecie mieć powody by nie zacząć pisać np.: nie będę mieć czasu, nikt nie będzie chciał czytać, już jest tyle blogów itd. Skąd to mogę wiedzieć? Sam przez to przechodziłem. Nie ma się o co martwić - programowanie jest tak rozległą i ciągle rozwijającą się dziedziną, że każdy znajdzie miejsce dla siebie. Moją radą na początek jest by nie skupiać się w pozyskanie czytelników a bardziej na pisaniu. Jeśli będziecie pisać regularnie oraz będziecie poruszać ciekawe tematy to czytelnicy pojawią się sami. Grunt to wytrwałość :)

\n\n

Opensource

\n\n

No na sam koniec coś dla już bardziej doświadczonych programistów, którzy mają trochę wolnego czasu. Pomoc w rozwijaniu projektu opensource to idealny sposób na rozwój własnych umiejętności. Jeżeli wybierzemy jednen z bardziej znanych projektów to będziemy mogli sporo nauczyć się o architekturze, niskopoziomowych elementach języka, testowaniu, optymalizacji oraz wielu innych w zależności jaki to jest projekt. Jedyny minus to, że może to zająć sporo czasu i na początku nasze pull requesty mogą mieć sporo komentarzy co należy poprawić.

\n\n

A wy jakie macie metody uczenia się programowania lub co robiliście gdzy zaczynaliście naukę? Jestem ciekawy również co robicie by być ciągle na bieżąco z nowinkami - czytacie artukuły, własne mini projekty, prezentacje? Zapraszam do komentowania i dzielenia się swoimi sposobami :)

2019-07-30 16:25:00 jak-uczyc-sie-programowania ckhxjb6o0000yi3umb3hg09jv 2019-07-30 16:25:00 2019-07-30 16:25:00 -cjyzyt54001o8i3umapqe7cv4 Bądź produktywny - podstawy Postmana https://fsgeek.pl/post/badz-produktywny-podstawy-postmana/

Postman jest jedną z wielu aplikacji pozwalających na wysyłanie zapytań do serwera. Według mnie znajomość jednego z takich narzędzi jest przydatna nieważne czy się pracuje na frontendzie, backendzie czy jako tester. Właściwie wykorzystywany Postman potrafi ułatwić życie i przyspieszyć testowanie oraz tworzenie endpointów. Jednak jak z niego korzystać tak aby to była czysta przyjemność?

\n\n

Tworzenie endpointów

\n\n

Jak już wspomniałem Postman służy do komunikacji z serwerem. Możemy za jego pomocą pobierać potrzebne informacje z serwera, testować czy endpointy zostały poprawnie zaimplementowane lub jeśli nie ma pełnej dokumentacji API testować jak należy wysyłać zapytania.

\n\n

Żeby pokazać w jaki sposób można wygodnie testować API skorzystałem z istniejącej strony jsonplaceholder.typicode.com - możecie ją również wykorzystać jako poligon testowy. Możemy się z nią komunikować za pomocą 4 najpopularniejszych zapytań czyli: GET, POST, PUT, DELETE (żeby poznać szczegóły zachęcam do odwiedzenia strony).

\n\n

Aby w Postmanie wysłać zapytanie na serwer musimy wykonać 3 kroki

\n\n
    \n
  • wybrać jaki rodzaj zapytania chcemy wykonać z rozwijanej listy (np.: GET)
    • \n
  • Wpisać URL z jakim chcemy się komunikować
    • \n
  • Kliknąć przycisk Send
    • \n
\n\n

get list

\n\n

Jeśli wszystko jest poprawne to powinniśmy otrzymać odpowiedź oraz informacje dotyczące odpowiedzi czyli status, czas oraz rozmiar odpowiedzi.

\n\n

Oczywiście zapytania nie zawsze są takie proste - mogą zawierać na przykład dodatkowe parametry w URL’u. Możemy oczywiście podobnie jak poprzednio wkleić URL z dodatkowymi parametrami ale lepiej jest skorzystać z opcji Params - znajduje się na lewo od Send

\n\n

Dla przykładu zapytanie https://jsonplaceholder.typicode.com/posts?userId=1 będzie wyglądać następująco:

\n\n

get resource with params

\n\n

Taki sposób postępowania jest bardzo wygodny, ponieważ pozwala na dowolne włączanie i wyłączanie parametrów i nie musimy się martwić o to czy URL jest zbudowany poprawnie - przy dużej ilości parametrów to może być kłopotliwe.

\n\n

Do pełni szczęścia został jeszcze endpoint POST i PUT gdzie musimy wysłać więcej danych. Wtedy wykorzystamy zakładkę Body. Tutaj najczęściej będzie nas interesował typ raw oraz format JSON(application/json)

\n\n

post new post

\n\n

Kolekcje

\n\n

Kolejna rzecz to zapisywanie testowanych przez nas endpointów - przecież nie będziemy ich za każdym razem pisać od nowa. Najprościej jest wybrać opcję zapisu, która znajduje się na prawo od Send. Ale jeśli będziemy mieli bardzo dużo endpointów to okaże się, że szybciej wpiszemy pożądany endpoint od nowa niż znajdziemy go na liście :) Na szczęście możemy grupować nasze endpointy w kolekcje.

\n\n

save endpoint

\n\n

Ja lubię tworzyć kolekcję dla projektu nad którym aktualnie pracuję i potem dla każdego zasobu jest tworzony osobna kolekcja np.: Post - w ten sposób wszystko jest poukładane i pojedyncza kolekcja ma około 5 endpointów.

\n\n

Środowiska

\n\n

Najczęściej jak tworzymy oprogramowanie to nie mamy jednego środowiska tylko kilka. I często zadrza się, że na jednym środowisku endpoint działa poprawnie a na drugim nie i trzeba sprawdzić skąd różnice. Korzystając z Postmana możemy stworzyć osobne kolekcje dla każdego środowiska i trzymać w nich ten sam zbiór endpointów. Jednak nie jest to wygodne i szybciej niż później się okaże, że będziemy musieli aktualizować pojedynczy endpoint w kilku miejscach. Da się to na szczęście zrobić lepiej.

\n\n

W Postmanie mamy możliwość tworzenia środowisk oraz zmiennych w nich. Polega to na tym, że w endpointach zamiast pisać adres URL to odwołujemy się do zmiennej która ten adres przechowuje np.: {{baseUrl}}. Teraz jak będzie trzeba sprawdzić endpoint na innym środowisku to wystarczy stworzyć nowe lub przełączyć na inne już istniejące.

\n\n

Jak stworzyć takie środowisko?

\n\n

environment

\n\n

Nad przyciskiem Send mamy 3 kontrolki które sterują środowiskami. Od lewej mamy:

\n\n
    \n
  • Pole typu Select aby wybrać z jakiego środowiska aktualnie korzystamy
    • \n
  • Podgląd na zmienne zdefiniowane w aktualnym środowisku
    • \n
  • Ustawienia związane z środowiskami - to tam się kierujemy aby stworzyć nowe środowisko
    • \n
\n\n

environment manage

\n\n

Teraz musimy wpisać nazwę naszego środowiska oraz wpisać zmienne jakich chcemy używać

\n\n

environment new

\n\n

Oczywiście nie musimy wpisywać od razu wszystkich zmiennych - możemy to zrobić przyrostowo w zależności od potrzeb. Teraz wystarczy wybrać nasze nowo stworzone środowisko by móc korzystać ze zmiennych\nenvironment_choose

\n\n

Uwierzytelnianie

\n\n

Na sam koniec temat popularny w API, który czasami może powodować problemy. Postman wspiera kilka rodzajów uwierzytelniania, z których możemy skorzystać.

\n\n

auth list

\n\n

Najprostsze rozwiązanie to ustawienie uwierzytelniania na poziomie samego endpointu. Jednak jeśli mamy ich sporo to będzie to uciążliwe. Warto tutaj zwrócić uwagę na jeden szczególny typ uwierzytelniania - Inherit auth from parent. Oznacza to tyle, że jesteśmy w stanie ustawić uwierzytelnianie na poziomie całej kolekcji a Postman za nas umieści ją potem w odpowiednich endpointach. Aby ustawić takie uwierzytelnianie musimy wejsć do edycji naszej kolekcji;

\n\n

collection edit

\n\n

Teraz wystarczy, że ustawimy odpowiednie uwierzytelnianie i wszystkie nasze endpointy go otrzymają. Oczywiście jeśli nasza kolekcja znajduje się w innej kolekcji to możemy ustwić dziedziczenie uwierzytelniania i ustawić je dla kolekcji wyżej. Dzięki temu zmiana tego ustawienia lub wpisanie nowego tokenu będzie odbywała się w jednym miejscu i będzie zrobiona bardzo szybko.

\n\n

collection auth

\n\n

A wy korzystacie z Postmana? A może macie jakieś inne aplikacje do wysyłania requestów? A może tylko konsola i CURL? Jestem ciekawy jak wam się z tym pracuje i czego wam brakuje.

2019-08-06 15:15:00 badz-produktywny-podstawy-postmana ckhxjb6o0000yi3umb3hg09jv 2019-08-06 15:15:00 2019-08-06 15:15:00 cjj690nao0150i3umfbyjcndw Czy nie jestem za stary na naukę programowania? http://webdevmaster.pl/czy-nie-jestem-za-stary-na-nauke-programowania/ Dzisiaj temat typowo przemyśleniowy, pewnie wielokrotnie poruszany przez wielu ludzi, ale wyszła taka sytuacja u mnie w pracy, że postanowiłem rozwiać wszelkie wątpliwości. Często siedzę na przeróżnych forach internetowych i grupach na dużych portalach, śledzę inne blogi czy czytam komentarze i widziałem już wątki z pytaniem o wiek w dziale programowania. Szczerze mówiąc nigdy się… 2018-07-03 22:12:06 czy-nie-jestem-za-stary-na-nauke-programowania ckdyuycaw000ti3um7a4vg0hl 2018-07-03 22:12:06 2018-07-03 22:12:06 cjn392bmg018zi3umhzlmfo5b Jak zainstalować WordPressa krok po kroku? http://webdevmaster.pl/jak-zainstalowac-wordpressa-krok-po-kroku/ W związku z rosnącą popularnością systemu zarządzania treścią jakim jest WordPress postanowiłem zrobić kompletny kurs WordPressa wraz z kursem Woocommerce. U mnie na blogu znajdą się wpisy zarówno techniczne (m.in. jak zrobić własną skórkę do WordPressa, własny widget, napisać plugin czy postawić customowy sklep na Woocomerce ) jak i merytorczne (m.in. czy warto korzystać z… 2018-10-10 14:28:55 jak-zainstalowac-wordpressa-krok-po-kroku ckdyuycaw000ti3um7a4vg0hl 2018-10-10 14:28:55 2018-10-10 14:28:55 cjng1ithc019bi3umai8e1hzw Struktura bazy danych WordPress http://webdevmaster.pl/struktura-bazy-danych-wordpress/ W poprzednim wpisie pokazałem jak krok po kroku zainstalować WordPressa. Podczas instalacji musieliśmy założyć bazę danych, gdzie WordPress będzie przechowywał wszystkie informacje o naszym blogu. Niemal każda funkcjonalność WP jest dostępna z poziomu panelu administracyjnego, jednak znając chociaż podstawy budowy jego bazy danych, możemy wykonywać zarówno więcej operacji, jak i wykonywać je masowo. W tym… 2018-10-19 13:18:48 struktura-bazy-danych-wordpress ckdyuycaw000ti3um7a4vg0hl 2018-10-19 13:18:48 2018-10-19 13:18:48 @@ -1506,6 +1516,7 @@ cjcwz9bm000xpi3um4e6wc1hg Zmiana branży – Tobie też może się udać! – wy cjd5iwc8800xzi3umebyr0ldk Zmiana branży – Tobie też może się udać! – wywiad motywacyjny z Agnieszką Brandus http://bedeprogramistka.pl/zmiana-branzy-wywiad-z-agnieszkab/

Agnieszka to totalnie wykształcona dziewczyna. Skończyła mnóstwo kierunków, a jednak czuła, że czegoś w rozwoju zawodowym jej brakuje. Dlatego też postanowiła zrobić jeszcze dodatkowo studia podyplomowe. W ten sposób trafiła na kurs z testowania oprogramowania. Dzisiaj jest testerem i mówi, że kocha swoją pracę. Agnieszka jest też, a może przede wszystkim, mamą, która przez 2 lata pracowała jako freelancer, po to, aby móc wychowywać córkę. Zapraszam Cię na wywiad z Agnieszką Brandys, która przewróciła swoje życie do góry nogami. Wywiad motywacyjny z Agnieszką Brandys Agnieszka Brandys Agnieszka z wykształcenia jest dziennikarzem , politologiem, specjalistą ds. Public Relations, grafikiem komputerowym i multimedialnym oraz Frontend Developerem. Z zamiłowania przede wszystkim mamą, dopiero długo po tym miłośniczką gier planszowych, dogtrekkingu i kultury japonii. Kocha podróżować. Jeśli chodzi o zmiany to traktuje je pozytywnie. Uważa, że nawet te najtrudniejsze mogą przynieść coś wspaniałego. Na co dzień pracuje jako Tester Oprogramowania. Natka: Na pewno miałaś swoje życie przed programowaniem 🙂 Co robiłaś? Czym się zajmowałaś? Agnieszka: Ukończyłam dziennikarstwo na Uniwersytecie Warszawskim, politologię na Uniwersytecie Gdańskim oraz Public Relations w Gdańskiej Wyższej Szkole Humanistycznej. Przez kilka lat pracowałam jako Specjalista ds. Public Relations. By móc wychowywać córkę, przez dwa lata byłam freelancerem i pełnoetatową mamą. Właśnie w tym czasie […]

\n

Artykuł Zmiana branży – Tobie też może się udać! – wywiad motywacyjny z Agnieszką Brandus pochodzi z serwisu .

2018-02-02 06:02:41 zmiana-branzy-tobie-tez-moze-sie-udac-wywiad-motywacyjny-z-agnieszka-brandus ck9qqdx4o000xi3umdjbh0w86 2018-02-02 06:02:41 2018-02-02 06:02:41 cjd5yjsy800y0i3um2gw8ht6f Jak złożyć wniosek do programu Inwestuj w Rozwój http://bedeprogramistka.pl/jak-zlozyc-wniosek-do-programu-inwestuj-w-rozwoj/

Kilka dni temu ruszył nabór do programu z Ministerstwa Rozwoju-  Inwestuj w Rozwój. Część z Was wie, że ja wzięłam udział w pierwszej edycji tego programu. Pytacie mnie jak złożyć wniosek do programu Inwestuj w Rozwój? Czy to trudne? Czy trudno jest dostać pożyczkę? W dzisiejszym wpisie postaram się rozjaśnić Ci kilka kwestii.   Inwestuj w Rozwój – co to w ogóle jest? Inwestuj w Rozwój to program rządowy, który oferuje nieoprocentowane pożyczki na kształcenie. Informacje na temat programu można uzyskać na stronie http://inwestujwrozwoj.pl/. Wystarczy mieć zdolność kredytową lub poręczycieli pożyczki, złożyć wniosek w momencie naboru, kiedy są jeszcze dostępne środku i starać się o przyznanie pożyczki na kształcenie. Kto może wziąć pożyczkę? Pożyczkę może wziąć osoba pełnoletnia, mieszkająca w Polsce. Posiadająca zdolność kredytową. Może być zatrudniona na dowolną umowę, samozatrudniona, niepracująca, przebywająca na urlopie np. wychowawczym lub bezrobotna. Dlaczego warto? Ano, warto dlatego, że po pierwsze masz możliwość rozłożenia kwoty kursu na raty. Ja swoją pożyczkę rozłożyłam na 3 lata! A drugi powód, dla mnie baaaardzo ważny to ten, że po ukończeniu kursu i dostania stosownego zaświadczenia, program umarza do 25% ceny Twojego kursu. Oznacza to, że zapłacisz o te min. 20% max. 25% mniej niż standardowo! Umorzenie polega na […]

\n

Artykuł Jak złożyć wniosek do programu Inwestuj w Rozwój pochodzi z serwisu .

2018-02-02 13:20:50 jak-zlozyc-wniosek-do-programu-inwestuj-w-rozwoj ck9qqdx4o000xi3umdjbh0w86 2018-02-02 13:20:50 2018-02-02 13:20:50 cjdd3qdlc00ybi3um0pga0t2g Dlaczego programowanie? http://bedeprogramistka.pl/dlaczego-programowanie/

Dlaczego programowanie? To pytanie, które pewnie zadaje sobie niejedna osoba. I to nie tylko ta, która myśli co by tu zrobić ze swoim życiem. Zastanawiają się kobiety dlaczego Ci mężczyźni programują? Zastanawiają się też mężczyźni – dlaczego te kobiety tak „pchają się” do tego IT. Zastanawiają się znajomi znajomych, którzy nagle postanowili zacząć programować. I zaczęłam zastanawiać się ja, po jednym hejcie podczas dyskusji na Facebooku.   Kilka dni temu na stronie Girls Gone Tech został opublikowany ze mną wywiad. Wywiad był o nauce nauki programowania. A dokładniej o motywacji, o demotywacji, o naszych mocnych i słabych stronach. Opowiedziałam też o tym, jak moja cała przygoda z blogowaniem się zaczęła. Czyli generalnie mogłeś przeczytać o tym, o czym ja tu do Ciebie piszę. Wywiad został udostępniony na kilku grupach na FB. I nie byłoby w tym nic dziwnego, gdyby nie fakt, że na jednej z nich rozpętała się prawdziwa burza. Przytoczę Ci kilka komentarzy, które zainspirowały mnie do tego artykułu: No i tak szybko analizując, co nam z tego wyszło? Po co Ci „babo głupia” to programowanie? Na co Ci „juniorze tępy” to IT. Weź se znajdź inną pracę. MY, doświadczeni programiści płci męskiej, świetnie sobie bez Ciebie poradzimy. Żebyście nie pomyśleli, […]

\n

Artykuł Dlaczego programowanie? pochodzi z serwisu .

2018-02-07 13:20:18 dlaczego-programowanie ck9qqdx4o000xi3umdjbh0w86 2018-02-07 13:20:18 2018-02-07 13:20:18 +ck9dfhmo0020ki3um1oljdhxd CircleCi + Netlify - Continuous Integration & Deployment https://frontlive.pl//circleci-continuous-integration/ Każdy, kto wrzucał pliki na serwer ftp, wie, że bywało to męczące. Za każdym razem musieliśmy odpalić testy, zbudować projekt i tak w kółko... Na szczęście czasy się zmieniły, a… 2020-04-24 00:00:00 circleci-netlify-continuous-integration-and-deployment ckgvhpmo0001ji3umfm7ubw86 2020-04-24 00:00:00 2020-04-24 00:00:00 cj5m7ri7k00pci3um6izv13oi Stos technologiczny & Dalszy plan działania https://www.nettecode.com/stos-technologiczny-dalszy-plan-dzialania/

Ten artykuł jest częścią serii Tworzenie aplikacji webowej: Krok po kroku ( / 3)Czas ogłosić jak będzie wyglądał stos technologiczny aplikacji, nad którą będziemy pracować. Teraz tak: pada tu dużo być może nie zrozumiałych...

\n

Artykuł Stos technologiczny & Dalszy plan działania pochodzi z serwisu NetteCode.

2017-07-27 09:05:26 stos-technologiczny-and-dalszy-plan-dzialania ckhnmdge00000i3um6batg2gk 2017-07-27 09:05:26 2017-07-27 09:05:26 cjuk9yalc01j4i3um0ua4cy81 Płynne scrollowanie do odnośnika/kotwicy https://webdevmaster.pl/forum/plynne-scrollowanie-do-odnosnika-kotwicy/ Witam. Właśnie rozpocząłem swoją pierwszą pracę jako Web developer. Jednym z moich zadań jest wykonywanywanie zmian i optymalizacje stron opartych o WP. Właśnie siadłem do pierwszego takiego zadania i od razu pojawił się dla mnie spory problem. Na blogu, w normalnym wpisie są zawarte coś ‚ala’ odnośniki. Poczytałem i są to kotwice / odwołania do […] 2019-04-16 21:03:48 plynne-scrollowanie-do-odnosnikakotwicy ckdyuycaw000ti3um7a4vg0hl 2019-04-16 21:03:48 2019-04-16 21:03:48 cj5tnuuig00pii3um935ce4oc Duża paczka materiałów do nauki HTML5 & CSS https://www.nettecode.com/duza-paczka-materialow-html5-css/

Jak wiecie HTML & CSS to podstawa. I w sumie miałam o tym nie pisać. Postanowiłam jednak przygotować paczkę materiałów dla osób, które rzeczywiście zaczynają od zera. Artykuł pisany na podstawie doświadczeń własnych oraz...

\n

Artykuł Duża paczka materiałów do nauki HTML5 & CSS pochodzi z serwisu NetteCode.

2017-08-01 14:10:19 duza-paczka-materialow-do-nauki-html5-and-css ckhnmdge00000i3um6batg2gk 2017-08-01 14:10:19 2017-08-01 14:10:19 @@ -1516,6 +1527,7 @@ cj67o9k8w00q1i3umgol6dqo3 Co w trawie piszczy? Facebook Live & Tworzymy aplikacj cjj65ihmo014zi3um96xk5ef1 Najlepsze uczelnie dla programistów w Polsce – które wybrać? https://blog.piotrnalepa.pl/2018/07/03/najlepsze-uczelnie-dla-programistow-w-polsce-ktore-wybrac/ Programista to od lat jeden z najbardziej dochodowych i przyszłościowych zawodów. Według danych branżowego portalu No Fluff Jobs, średnie widełki na stanowisko Senior Java Developera kształtują się na poziomie od 13000 do nawet 18000 zł netto na fakturę na firmę (w przypadku umowy B2B). Nic więc dziwnego, że coraz więcej młodych ludzi chce studiować kierunki związane z informatyką. Uczelnie wyższe wręcz prześcigają się w przyciąganiu do siebie najlepszych kandydatów, ale którą z nich wybrać? 2018-07-03 20:34:00 najlepsze-uczelnie-dla-programistow-w-polsce-ktore-wybrac ckekeq7uo0004i3umft185ior 2018-07-03 20:34:00 2018-07-03 20:34:00 cj6es461c00qai3ume1gm555z Duża paczka materiałów do nauki JavaScriptu https://www.nettecode.com/duza-paczka-materialow-javascript/

Ten artykuł jest częścią serii Tworzenie aplikacji webowej: Krok po kroku ( / 6)Kolejna paczka materiałów na Wasze życzenie 😉 Artykuł pisany na podstawie doświadczeń własnych oraz opinii innych. Prowadząc grupę wsparcia w zakresie...

\n

Artykuł Duża paczka materiałów do nauki JavaScriptu pochodzi z serwisu NetteCode.

2017-08-16 08:52:42 duza-paczka-materialow-do-nauki-javascriptu ckhnmdge00000i3um6batg2gk 2017-08-16 08:52:42 2017-08-16 08:52:42 cjjibjtm8015di3um5evifcid ADnativ – nowoczesna sieć natywna dla reklamodawców i wydawców https://blog.piotrnalepa.pl/2018/07/12/adnativ-nowoczesna-siec-natywna-dla-reklamodawcow-i-wydawcow/ ADnativ to nowoczesna, natywna sieć reklamowa, która dynamicznie dołącza do postepujacej w Świecie rewolucji reklamy internetowej. Unikalne formaty reklam, zaawansowana technologia oraz wysokie stawki CPM spowodowały, że sieć budzi duże zainteresowanie wśród webmasterów, którzy chcą zwiększyć zyski z wyświetleń na swoich stronach internetowych. Czy stosunkowo młoda firma wkrótce stanie się poważną konkurencją dla Światowych gigantów? […] 2018-07-12 08:56:14 adnativ-nowoczesna-siec-natywna-dla-reklamodawcow-i-wydawcow ckekeq7uo0004i3umft185ior 2018-07-12 08:56:14 2018-07-12 08:56:14 +cjy36rbfk01n6i3um1za7ezos Zniżka na bilety na 4Developers! Pierwsze agendy na satelity 4Developers są już dostępne! https://blog.piotrnalepa.pl/2019/07/14/znizka-na-bilety-na-4developers-pierwsze-agendy-na-satelity-4developers-sa-juz-dostepne/ Ujawniono agendę pierwszych dwóch satelit 4Developers 2019. Jednocześnie można zdobyć rabat na kupno wejściówki na konferencję! 2019-07-14 16:41:08 znizka-na-bilety-na-4developers-pierwsze-agendy-na-satelity-4developers-sa-juz-dostepne ckekeq7uo0004i3umft185ior 2019-07-14 16:41:08 2019-07-14 16:41:08 cj6o4evuw00qki3um7zmi4ovz Tworzenie aplikacji webowych – od pomysłu do realizacji https://www.nettecode.com/tworzenie-aplikacji-webowych/

Zgodnie z zapowiedzią, każdemu prowadzonemu przeze mnie Live’owi będą towarzyszyły wpisy. Jeden – to notatki, konspekt, opracowanie tematu poruszanego na Live’ie. Drugi – to wynik ankiety, którą możecie wypełnić po każdym naszym spotkaniu, odpowiedzi na Wasze pytania. Ankietę znajdziecie tutaj Dziś czas na cz. I.   Pomysł Nie mówiłam o tym, skąd wziąć pomysł na […]

\n

Artykuł Tworzenie aplikacji webowych – od pomysłu do realizacji pochodzi z serwisu NetteCode.

2017-08-22 21:46:53 tworzenie-aplikacji-webowych-od-pomyslu-do-realizacji ckhnmdge00000i3um6batg2gk 2017-08-22 21:46:53 2017-08-22 21:46:53 cj6q7qets00qni3um5phicyue Node JS & NPM na start https://www.nettecode.com/node-js-npm-na-start/

Ten artykuł jest częścią serii Tworzenie aplikacji webowej: Krok po kroku (7 / 7)Kolejny temat do ogarnięcia na naszej ścieżce budowy aplikacji webowej. Od razu zastrzegam, że artykuł bardziej dotyczy NPM niż Node JS. Przedstawiam wiedzę potrzebną do budowy aplikacji. Może kiedyś pochylę się mocniej nad samym Node’m, ale to nie dziś. Czym jest Node […]

\n

Artykuł Node JS & NPM na start pochodzi z serwisu NetteCode.

2017-08-24 08:55:22 node-js-and-npm-na-start ckhnmdge00000i3um6batg2gk 2017-08-24 08:55:22 2017-08-24 08:55:22 cj6z7krg000qxi3umbqv23mq2 Visual Studio Code na start https://www.nettecode.com/visual-studio-code-start/

Ten artykuł jest częścią serii Tworzenie aplikacji webowej: Krok po kroku (8 / 8)Artykuły wdrażające w toku. Powoli zaczynamy rozglądać się za narzędziami. Zanim weźmiecie się za naukę TypeScriptu czy też Angulara w wersji 4, przydałoby nam się narzędzie do pisania kodu. Z czego skorzystamy w ramach tutorialu? Visual Studio Code. Zapraszam do artykułu wprowadzającego […]

\n

Artykuł Visual Studio Code na start pochodzi z serwisu NetteCode.

2017-08-30 16:00:54 visual-studio-code-na-start ckhnmdge00000i3um6batg2gk 2017-08-30 16:00:54 2017-08-30 16:00:54 @@ -1526,7 +1538,8 @@ cjsp2dzyo01gji3um4n6ad9r7 Cykle życia strony internetowej. Jak reagować na zmi cjun4t85c01j8i3um7ol206ei Jak zacząć korzystać z serwera WebSockets w rozwoju swojej aplikacji? https://blog.piotrnalepa.pl/2019/04/18/jak-zaczac-korzystac-z-serwera-websockets-w-rozwoju-swojej-aplikacji/ Czy interesowały Ciebie sposoby komunikacji między aplikacją internetową a serwerem? Pewnie znasz pojęcie WebSockets. W tym artykule zaprezentowałem przykład kodu odpowiedzialny za uruchomienie serwera WebSockets w NodeJS. Opisałem również co to jest WebSockets oraz przedstawiłem jego wady. 2019-04-18 21:03:12 jak-zaczac-korzystac-z-serwera-websockets-w-rozwoju-swojej-aplikacji ckekeq7uo0004i3umft185ior 2019-04-18 21:03:12 2019-04-18 21:03:12 cjvxklhmw01kti3umejvz2jtz Ruszają lokalne edycje 4Developers- będzie się działo! https://blog.piotrnalepa.pl/2019/05/21/ruszaja-lokalne-edycje-4developers-bedzie-sie-dzialo/ Corocznym zwyczajem, jesienią Festiwal 4Developers przenosi się na lokalny grunt. Satelity 2019 zapowiadają się gorąco - w tym roku spotkamy się w Krakowie, Katowicach, Wrocławiu oraz, po raz pierwszy, w Poznaniu! 2019-05-21 09:02:29 ruszaja-lokalne-edycje-4developers-bedzie-sie-dzialo ckekeq7uo0004i3umft185ior 2019-05-21 09:02:29 2019-05-21 09:02:29 cjx35161c01m6i3umer999ql0 Tajemnice atrybutu tabindex. Jak to poprawnie używać w kodzie HTML? https://blog.piotrnalepa.pl/2019/06/19/tajemnice-atrybutu-tabindex-jak-to-poprawnie-uzywac-w-kodzie-html/ Bootstrap jest bardzo popularnym frameworkiem CSS do budowania interfejsu stron i aplikacji internetowych. Dostarcza bardzo wiele użytecznych komponentów. W tym tekście skupię się na komponencie Modal i jego kodzie HTML. Komponent Modal jest odpowiedzialny za wyświetlanie okienka typu pop-up. To co jednak nas naprawdę będzie interesowało to zastosowanie atrybutu tabindex z wartością -1. Czy nie […] 2019-06-19 11:13:06 tajemnice-atrybutu-tabindex-jak-to-poprawnie-uzywac-w-kodzie-html ckekeq7uo0004i3umft185ior 2019-06-19 11:13:06 2019-06-19 11:13:06 -cjy36rbfk01n6i3um1za7ezos Zniżka na bilety na 4Developers! Pierwsze agendy na satelity 4Developers są już dostępne! https://blog.piotrnalepa.pl/2019/07/14/znizka-na-bilety-na-4developers-pierwsze-agendy-na-satelity-4developers-sa-juz-dostepne/ Ujawniono agendę pierwszych dwóch satelit 4Developers 2019. Jednocześnie można zdobyć rabat na kupno wejściówki na konferencję! 2019-07-14 16:41:08 znizka-na-bilety-na-4developers-pierwsze-agendy-na-satelity-4developers-sa-juz-dostepne ckekeq7uo0004i3umft185ior 2019-07-14 16:41:08 2019-07-14 16:41:08 +cjexuie6g0100i3um2prk4i6w Animacje w CSS https://fsgeek.pl/post/animacje-w-css/

CSS już dawno przestał być tylko językiem do kolorowania naszej strony czy formatowaniu tekstu. Kolejne wersje dodają coraz bardziej zaawansowane elementy do niego co powoduje, że niektóre czynności, do których wcześniej potrzebowaliśmy skryptów i zewnętrznych bibliotek, jesteśmy w stanie ograć samym CSS’em. Dziś chciałbym omówić jedną z nich czyli animacje.

\n\n

\n\n

Czym są animacje?

\n\n

Jednak zanim przejdę bezpośrednio do animacji w CSS warto powiedzieć czym są one tak naprawdę. Według Wikipedii animacja jest to ożywianie martwych kształtów poprzez dokonanie wielu fotografii, rysunków a potem wyświetlanie ich w sposób ciągły. Każdy rysunek różni się od poprzedniego w niewielkim stopniu co powoduje, że powstaje wrażenie ruchu. I za chwilę zobaczycie, że w CSS zasada działania jest identyczna.

\n\n

Właściwość animation

\n\n

W CSS mamy grupę właściwości, które zaczynają się od słówka animation i kontrolują różne aspekty naszej własnej animacji. Mamy 8 następujących właściwości:

\n\n
    \n
  • animation-delay - czas pomiędzy załadowaniem elementu a rozpoczęciem jego animacji. Czas możemy definiować zarówno w sekundach jak i milisekundach np.: 2s, 300ms
    • \n
  • animation-direction - kierunek w jakim odtwarza się nasza animacja czyli sposób w jaki są odtwarzane kolejne klatki naszej animacji. Mamy tutaj 4 wartości: normal - klatki są odtwarzane w kolejności w jakiej zostały zadeklarowane, jest to wartość domyślna; reverse - klatki są odtwarzane od tyłu; alternate - w momencie jak animacja dojdzie do ostatniej klatki zaczyna odtwarzać je w przeciwnej kolejności, daje to efekt takiego wahadła; alternate-reverse - podobnie jak poprzednio tylko pierwszy cykl animacji jest wykonywany od tyłu
    • \n
  • animation-duration - czas jaki będzie trwał jeden cykl animacji, podobnie jak w przypadku delay możemy dać wartości w sekundach i milisekundach
    • \n
  • animation-iteration-count - ilość cykli animacji jaka ma się wykonać np.: animation-iteration-count: 2 oznacza, że animacja wykona się dwa razy; możemy tutaj również dać wartości ułamkowe co spowoduje, że animacja zatrzyma się w trakcie wykonywania; również jeśli chcemy by animacja wykonywała się ciągle możemy użyć słówka infinite
    • \n
  • animation-name - nazwa zestawu klatek, które zostaną przypisane do naszej animacji
    • \n
  • animation-play-state - określenie czy nasza animacja się wykonuje czy nie: paused - nie wykonuje się, running - wykonuje się
    • \n
  • animation-timing-function - określa w jaki sposób następują zmiany w naszym animowanym elemencie tak by z wyglądu początkowego przekształcił się w końcowy np.: kolejne klatki pojawiają się liniowo w czasie albo na początku animacja przebiega szybciej a potem zwalnia. Typowe wartości to na przykład: easeIn, easeOut,linear ale również możemy zdefiniować własny sposób przechodzenia od startu do końca
    • \n
  • animation-fill-mode - określa sposób w jaki ma się zachować nasz animowany komponent, jakie ma przypisane style przed i po animacji. Może przyjąć 4 wartości: none- wartość domyślna czyli element ma tylko przypisane do niego style bez tych zdefiniowanych w klatkach; forwards - po zakończeniu animacji element zachowa style z ostatniej klatki; backwards- przed rozpoczęciem animacji element ma style z pierwszej klatki;both- połączenie backwards i forwards
    • \n
\n\n

Klatki animacji

\n\n

Parę razy przy opisie właściwości użyłem słowa klatka. Tak jak wspominałem mechanizm w CSS jest podobny do tego co znamy z kina. Definiujemy jak ma wyglądać nasz animowany element w poszczególnych punktach animacji pozwalając przy przeglądarka sama zdecydowała jak przejść pomiędzy punktami. Jest to ważne ze względów wydajnościowych ponieważ silnik przeglądarki jest w stanie zoptymalizować te zmiany tak by były jak najmniej obciążające dla niego.

\n\n

Aby zdefiniować własne kroki musimy wykorzystać specjalną konstrukcję @keyframes, która ma następującą strukturę:

\n\n
@keyframes name {\n  from {\n    margin-left: 0%; \n   background-color: yellow\n  } \n\n  to {\n    margin-left: 90%;\n    background-color: green;\n  }\n}\n\n\n
\n\n

name jest to nazwa naszego zbioru klatek i to właśnie ja wpisujemy we własności animation-name. Następnie mamy definicję naszych kroków przy pomocy dwóch słów kluczowych: from i to. W nich określamy jak ma wyglądać nasz element na początku oraz na końcu animacji. To co dzieje się pomiędzy wylicza sama przeglądarka. Nie jesteśmy ograniczeniu tylko do dwóch punktów. Możemy określić punkty w których chcemy by element przyjął konkretne wartości przy pomocy procentów gdzie 0% to odpowiednik from a 100% odpowiada to.

\n\n
@keyframes name {\n  0% {\n    margin-left: 0%; \n    background-color: yellow\n  }\n\n  50%{\n    margin-top: 100px;  \n  }\n  \n  100% {\n    margin-left: 90%;\n    background-color: green;\n  }\n}\n\n
\n\n

A jakie właściwości dać w naszych wybranych punktach? Odpowiedź brzmi każdą jaka jest poprawna w CSS czyli marginesy, kolor oraz transformacje o których opowiem trochę w jednym z następnych postów.

\n\n

See the Pen CSS Animations by Aleksander (@Feridum) on CodePen.

\n

\n\n

No i na sam koniec jeszcze mały przykład animacji wahadła. Warto tutaj zauważyć jak wiele potrafi zrobić przeglądarka by animacja była płynna. Kolor został ustalony tylko dla pierwszej i ostatniej klatki natomiast na animacji płynnie zmienia się z jednej w drugą. Warto również zobaczyć do kodu gdzie kostki mają uustawiony kolor czerwony jako domyślny, ale dzięki wykorzystaniu animation-fill-mode: backwards; tuż przed rozpoczęciem animacji mają kolor zółty. No i przy definicji klatek możemy mieszać określanie klatek przy pomocy słów from i to z wartościami procentowymi.

\n\n

Samo tworzenie animacji nie jest trudne i pozwala osiągnąć ładne efekty przy minimalnym wysiłku. Więc jeśli potrzebujecie coś takiego zrobić i jesteście w stanie to osiągnąć w CSS to wykorzystajcie to zamiast ściągać kolejną bibliotekę Javascript. No i do usłyszenia wkrótce :)

2018-03-19 06:25:01 animacje-w-css ckhxjb6o0000yi3umb3hg09jv 2018-03-19 06:25:01 2018-03-19 06:25:01 +cjf7s3bc00106i3umax2o1rxi Redux store w Angularze https://fsgeek.pl/post/redux-store-w-angularze/

Od ponad pół roku pracuję z połączeniem React&Redux i po początkowych problemach polubiłem taką architekturę. Idea pojedynczego źródła danych oraz czyste funkcje pomaga przy tworzeniu oraz utrzymywaniu oprogramowania. Jak zacząłem zabawę z Angularem zacząłem się zastanawiać czy mogę użyć znanego mi już Reduxa w Angularze. I w ten sposób znalazłem angular-redux

\n\n

\n\n

Idea Reduxa

\n\n

Idea tego rozwiązania jest prosta pomimo tego, że początkowo przytłacza ilością elementów i może wydawać się niezrozumiała. Reduxa można w skrócie opisać przy pomocy 3 zasad:

\n\n
    \n
  • Pojedyncze źródło prawdy - stan aplikacji jest przechowywany w pojedynczym obiekcie
    • \n
  • Stan aplikacji można tylko odczytać - zmiana stanu odbywa się wywołanie akcji
    • \n
  • Zmiany odbywają się przy pomocy czystych funkcji
    • \n
\n\n

Z tych zasad wynikają 3 elementy o które musimy zadbać pisząc aplikację:

\n\n
    \n
  • Store - przechowuje stan naszej aplikacji. W całej aplikacji istnieje tylko jeden taki obiekt.
    • \n
  • Actions - są to akcje wywoływane w aplikacji np.: CREATE_EVENT. Tylko za ich pomocą możemy aktualizować nasz Store.
    • \n
  • Reducers - są to czyste funkcje, które obsługują akcje. Na podstawie poprzedniego stanu aplikacji oraz wywołanej akcji jest zwracany nowy stan aplikacji
    • \n
\n\n

Redux w Angularze

\n\n

Jak wspomniałem we wstępie lubię idea pojedynczego źródła prawdy w aplikacji więc zacząłem szukać bibliotek, które pomagają to osiągnąć w Angularze i znalazłem dwie pozycje:

\n\n\n\n

Pierwsza z nich wyglądała dla mnie bardziej znajomo do tego co znam z Reacta więc postanowiłem ją wybrać. Aby ją zainstalować wystarczy jedna komenda:

\n\n
yarn add redux @angular-redux/store\n
\n\n

yarn add redux

\n\n

Konfiguracja też nie jest ciężka co mam nadzieję za chwilę pokazać. Pierwsza rzecz jaką musimy zrobić to stworzyć nasz store w aplikacji. Robimy to poprzez zaimportowanie klasy ngReduxModule do naszego modułu aplikacji oraz następnie stworzenia store’a w konstruktorze.

\n\n
@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    BrowserModule,\n    NgReduxModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n  constructor(ngRedux: NgRedux<IAppState>) {\n    ngRedux.configureStore(rootReducer, undefined);\n  }\n }\n\n
\n\n

Mamy tutaj parę elementów na które warto zwrócić uwagę. Pierwszym jest argument w konstruktorze, który jest obiektem generycznym klasy NgRedux. W związku z tym musimy podać typ jaki będzie obsługiwała nasza klasa a co za tym idzie nasz redux store. Jako typ podajemy interfejs, który zawiera pola wraz typami, które są zgodne z zawartością naszego store’a.

\n\n

Mając to możemy faktycznie stworzyć nasz obiekt do przechowywania danych w aplikacji przy pomocy funkcji configureStore. Ma ona dwa wymagane parametry: reducer oraz stan początkowy. Jak zauważyliście u mnie stan początkowy ma wartość undefined - dzięki temu mogę podać osobno stan początkowy dla każdego reducera osobno.

\n\n

Praktyczny przykład

\n\n

Jeśli czytaliście mój wpis o komponentach w Angularze (a jeśli ominęliście to zapraszam) to omawiałem tam temat na przykładzie prostej aplikacji gdzie po wciśnięciu przycisku inkrementowała się liczba. Teraz pokażę jak można to zrobić z użyciem angular-redux.

\n\n

Pierwsze co należy zrobić to zdefiniować jak ma wyglądać nasz store.

\n\n
export interface IAppState{\n  counter: CounterState\n}\n\n
\n\n

Przykład jest prosty więc interfejs nie jest skomplikowany. Następna rzecz to nasz reducer, który będzie tworzył nowy stan aplikacji.

\n\n
const rootReducer = combineReducers<IAppState>({\n  counter: counterReducer,\n})\n\n
\n\n

Wykorzystałem tutaj trochę na wyrost funkcję combineReducers. Pozwala ona zdefiniować więcej niż jeden reducer dla naszej aplikacji i wewnątrz tworzy z tych małych pojedynczych jeden duży.

\n\n

Skoro zaimportowaliśmy nasz reducer to warto by zobaczyć jak on wygląda.

\n\n
import { Action } from 'redux';\nimport { INCREMENT_COUNTER } from './counter.actions';\n\nexport interface CounterState {\n  value: number;\n}\n\nexport const counterInitialState: CounterState = {\n  value: 0,\n};\n\nexport function counterReducer(state: CounterState = counterInitialState, action: Action): CounterState {\n  switch (action.type) {\n    case INCREMENT_COUNTER: return { value: state.value + 1 };\n    default: return state;\n  }\n}\n\n
\n\n

Dla tych co robili kiedyś w połączeniu React+Redux+Flow może się to wydawać znajome. Na samej górze definiuję interfejs dla danego reducera. Następnie definiuję jego stan początkowy. Jest to istotne ponieważ stan aplikacji musi być zawsze zwrócony oraz musi być zgodny ze zdefiniowanymi przez nas interfejsami

\n\n

Na samym dole mamy część właściwą reducera czyli faktyczną funkcję, która przyjmuje dwa argumenty: aktualny stan oraz wywołaną akcję. Na podstawie tych informacji jesteśmy w stanie zdefiniować jak ma wyglądać nowy stan aplikacji. W momencie gdy zostanie wywołana akcja, której nie znamy to musimy ją zignorować ale musimy także coś zwrócić - więc zwracamy poprzedni stan.

\n\n

No to zostało jeszcze określenie naszych akcji. Przyznam szczerze, że zrobiłem to identycznie jak w przypadku Reacta chociaż widziałem również inne propozycje.

\n\n
import { Action } from "redux";\n\nexport const INCREMENT_COUNTER = 'counter/INCREMEENT_COUNTER'\n\nexport const incrementCounter = (): Action =>({\n    type: INCREMENT_COUNTER\n})\n\n
\n\n

W tym wykonaniu jest to bardzo proste, ponieważ definiuję tylko typ akcji oraz funkcję, która tworzy odpowiedni obiekt dla reducera - ustawia typ akcji jako mój zdefiniowany.

\n\n

Mając to zostaje ostatnia rzecz - połączenie tego z komponentem.

\n\n
@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n})\nexport class AppComponent {\n    @select('counter') counter$: Observable<CounterState>;\n    \n    constructor(private ngRedux: NgRedux<IAppState>){\n    }\n\n    onClick(){\n      this.ngRedux.dispatch(incrementCounter());\n    }\n\n}\n
\n\n

Mamy tutaj znowu parę elementów na które warto zwrócić uwagę. Pierwszy to dekorator @select, która pozwala pobrać ze store’a interesujący nas element i umieścić ją w zmiennej typu Observable. Funkcja ta może przyjąć kilka argumentów:

\n\n
    \n
  • 0 argumentów - wtedy odpowiedni element ze store’a jest wybierany na podstawie nazwy np.: @select() counter$ wybiera element counter (nie ma znaczenia czy damy na końcu znak $ czy nie - $ na końcu jest tylko konwencją nazewniczą)
    • \n
  • 1 argument - wtedy wybiera dokładnie podany element
    • \n
  • tablica argumentów - tzw.: selektor ścieżki czyli z elementów tablicy tworzy ścieżkę do konkretnej zmiennej np. @select(['counter', 'value']) wybierze element value, który znajduje się w obiekcie counter w state’cie
    • \n
  • Funkcja - wtedy nasz dekorator wykorzysta funkcję by znaleźć właściwy element, argumentem funkcji jest obiekt state np.: @select(state=>state.counter)\n
    • \n
\n\n

Idąc dalej w konstruktorze tworzymy instancję klasy NgRedux dzięki czemu w funkcji onClick() możemy wykorzystać funkcję dispatch, która wywoła akcję increment().

\n\n

Na sam koniec jeszcze tylko warto pokazać jak wyświetlić taką zmienną typu Observable na widku.

\n\n
<div style="text-align:center">\n  <button (click)="onClick()">{{(counter$ | async).value}}</button>\n</div>\n
\n\n

Z racji tego, że jest to zmienna Observable musimy użyć pipe’a async. Pobiera on ostatnią wartość dla tej zmiennej kiedy tylko się pojawi i wyświetla. Jako, że pobrana wartość w tym przypadku to obiekt to muszę jeszcze wyłuskać odpowiednie pole. Wygląda trochę dziwnie ale działa :D

\n\n

Na sam koniec narzędzie bez którego nie wyobrażam sobie pracy z Reduxem czyli reduxDevTools. Na szczęście konfiguracja tego narzędzia jest prosta i ogranicza się do jednej linijki:

\n\n
export class AppModule {\n  constructor(ngRedux: NgRedux<IAppState>, devTools: DevToolsExtension,) {\n    ngRedux.configureStore(rootReducer, undefined, [], devTools.isEnabled() ? [ devTools.enhancer() ] : []);\n  }\n }\n
\n\n

Pusty nawias, który jest przekazany jako 3 argument jest obowiązkowy ponieważ tam jest miejsce dla zdefiniowanych przez nas middlewarów. A jak całość działa?

\n\n

demo

\n\n

Może się wydawać, że wsadzanie Reduxa niepotrzebnie komplikuje naszą aplikację. Jest to prawa dla małych aplikacji ale czy wtedy potrzebujemy takiego dużego frameworka jak Angular? Dla dużych aplikacji widać korzyści z tego płynące i osobiście bardzo polecam. A może używaliście kiedyś tego drugiego rozwiązania i moglibyście powiedzieć czy wybrałem dobrze czy źle? Zapraszam do dyskusji.

2018-03-26 05:15:00 redux-store-w-angularze ckhxjb6o0000yi3umb3hg09jv 2018-03-26 05:15:00 2018-03-26 05:15:00 cjyctz26801nji3umf2ez7ye8 Czy możesz z tym żyć i robić swoje? Strong opinions – wyzwanie czy problem? https://blog.piotrnalepa.pl/2019/07/21/czy-mozesz-z-tym-zyc-i-robic-swoje-strong-opinions-wyzwanie-czy-problem/ W tekście zamieściłem swój punkt widzenia dotyczący sporów w zespole programistów. Przedstawiłem też kilka sposobów na zamknięcie sporów w taki sposób aby wszyscy byli możliwie jak najbardziej zadowoleni. 2019-07-21 10:40:56 czy-mozesz-z-tym-zyc-i-robic-swoje-strong-opinions-wyzwanie-czy-problem ckekeq7uo0004i3umft185ior 2019-07-21 10:40:56 2019-07-21 10:40:56 cj7hdmzso00rji3um5tq1he07 TypeScript od podstaw – nauka & materiały https://www.nettecode.com/typescript-od-podstaw/

Ten artykuł jest częścią serii Tworzenie aplikacji webowej: Krok po kroku ( / 9)Jak wiesz, w aplikacji, którą będziemy budować skorzystamy z Angulara w wersji 4. Chciałam pominąć konieczność nauki TypeScriptu i pisać aplikację w czystym JavaScript. Problem w tym, że byłoby to dla Ciebie większe utrudnienie niż nauka samego TypeScriptu. Dlaczego? Większość przykładów, dokumentacja […]

\n

Artykuł TypeScript od podstaw – nauka & materiały pochodzi z serwisu NetteCode.

2017-09-12 09:10:27 typescript-od-podstaw-nauka-and-materialy ckhnmdge00000i3um6batg2gk 2017-09-12 09:10:27 2017-09-12 09:10:27 cki0e6ae802ari3um44e21nnf Pierwsze kroki w projekcie. Tworzymy model danych. https://a-frontman.pl/pierwsze-kroki-w-projekcie-tworzymy-model-danych/?utm_source=rss&utm_medium=rss&utm_campaign=pierwsze-kroki-w-projekcie-tworzymy-model-danych

Opis modelu danych reprezentujących wymagania biznesowe.

\n

Artykuł Pierwsze kroki w projekcie. Tworzymy model danych. pochodzi z serwisu a - frontman.

2020-11-27 14:59:32 pierwsze-kroki-w-projekcie-tworzymy-model-danych ckio5ucds001qi3um0occaae7 2020-11-27 14:59:32 2020-11-27 14:59:32 @@ -1537,6 +1550,8 @@ cjw2tsczs01l2i3um0db666tp Obecne zapotrzebowanie na front-end deweloperów na ry cjzjle7og01oqi3um1tmp3lnl Wtyczka All in One SEO Pack – recenzja, konfiguracja, opinie https://webdevmaster.pl/wtyczka-all-in-one-seo-pack-recenzja-konfiguracja-opinie/ Jak dobrze wiemy SEO jest nieodłączną częścią każdego serwisu internetowego, sklepu czy aplikacji. Prowadząc biznes internetowy dążymy do osiągnięcia jak największej popularności naszych serwisów – walcząc o najwyższe pozycje w wyszukiwarce. Aby nasz serwis był ‚przyjaźniejszy’ pod względem SEO dla wyszukiwarek – potrzebujemy wykonywać na nim pewne działania. Jeśli Twoja strona, serwis, sklep czy blog […] 2019-08-20 08:54:52 wtyczka-all-in-one-seo-pack-recenzja-konfiguracja-opinie ckdyuycaw000ti3um7a4vg0hl 2019-08-20 08:54:52 2019-08-20 08:54:52 cjztrfhmg01oyi3umhfpoafks Wtyczka wpDiscuz – rozszerzony moduł do komentarzy WordPress https://webdevmaster.pl/wtyczka-wpdiscuz-rozszerzony-modul-do-komentarzy-wordpress/ System komentarzy do postów jaki w standardzie serwuje nam WordPress proponuje nam jedynie standardowe funkcje. Jeśli chcemy dostać „coś więcej” możemy skorzystać z gotowych narzędzi. Niewątpliwie oprócz podstawowego systemu do komentowania, na większości blogów opartych o WordPressa znajdziemy Jetpack, Disqus oraz system komentarzy serwowany przez Facebooka. Możemy też skorzystać z całej masy pluginów do komentarzy […] 2019-08-27 11:41:31 wtyczka-wpdiscuz-rozszerzony-modul-do-komentarzy-wordpress ckdyuycaw000ti3um7a4vg0hl 2019-08-27 11:41:31 2019-08-27 11:41:31 cjzxyt19k01p4i3um4jyu6kg6 kk Star Ratings – plugin do oceniania postów https://webdevmaster.pl/kk-star-ratings-plugin-do-oceniania-postow/ Każdemu właścicielowi strony internetowej czy sklepu zależy na jak największej ilości użytkowników na jego portalu. Wiąże się to oczywiście z większymi zyskami ze sprzedaży produktów czy wyświetlanych reklam. Na ilość kliknięć w wyszukiwarce w nasz wynik niewątpliwie wpływa pozycja, jednak są też aspekty, które przykuwają uwagę użytkownika. Trzeba się jakoś wyróżnić – niektórzy na przykład […] 2019-08-30 10:19:05 kk-star-ratings-plugin-do-oceniania-postow ckdyuycaw000ti3um7a4vg0hl 2019-08-30 10:19:05 2019-08-30 10:19:05 +cjft9unrs010ni3um8yvh3tuk Programisto bądź leniwy! https://fsgeek.pl/post/programisto-badz-leniwy/

Najważniejszą cechą programisty obok logicznego myślenia, umiejętności rozwiązywania problemów i znajomości języków programowania powinno być lenistwo. I jeśli tego na razie nie potrafisz to naucz się tego jak najszybciej - możesz tylko na tym zyskać.

\n\n

\n\n

Jak to lenistwo?

\n\n

Jeśli zadaliście sobie to pytanie to ten akapit jest dla was. Tak, według mnie lenistwo powinno być jedną z podstawowych umiejętności programisty. I to zarówno juniora jak i starego wyjadacza, który przed śniadaniem przegryza się przez kod assemblera. Jednak nie chodzi mi o ten rodzaj lenistwa o którym może pomyśleliście czyli: nic nie robię bo to nudne i mi się nie chce tylko bardziej to kreatywne czyli co mogę robić by uniknąć robienia nudnych rzeczy. W naszej branży wymaga się abyśmy rozwiązywali problemy, tworzyli nowe rozwiązania i ulepszali dzięki temu świat. Jednak tak jak w każdej innej pracy jest z tym związana masa innych nudnych i monotonnych czynności, które muszą być wykonane ale mało kto ma ochotę to robić. MOżna zadać sobie pytanie j ak je wyeliminować z naszego życia?

\n\n

Triki leniwego programisty

\n\n

Każdy leniwy programista ma w zanadrzu parę sztuczek, które pomagają mu wykonywać dobrze jego zadania omijając jednocześnie te nudne kawałki, dzięki czemu ma więcej czasu na te przyjemniejsze.

\n\n

Testy

\n\n

Pierwszą z nich jest zrozumienie istoty testów i tego jak bywają pomocne. Z jednej strony może się wydawać, że jest to zaprzeczenie idei leniwego programisty bo trzeba pisać dodatkowy kod, nie wprowadza on żadnej nowej funkcjonalności a do tego często jest to uciążliwe. Jednak jak często powtarzam testowanie pozwala nam zaoszczędzić czas podczas szukania błędu oraz rozwijania aplikacji w późniejszym stadium. Dobrze napisane testy automatyczne pozwolą nam zapanować nad regresją bez konieczności ciągłego klikania po aplikacji by sprawdzić czy coś się nie zepsuło.

\n\n

Automatyzacja budowania

\n\n

Czasy w których trzeba było stawiać aplikacje ręcznie na serwerze przy pomocy listy komend, ręczne instalowanie bibliotek już dawno odeszły. Teraz mamy Dockera oraz parę innych narzędzi, które ułatwiają nam pracę. Jednak nawet przy ich wykorzystaniu należy pamiętać o ciągłej aktualizacji dokumentacji tak by nowe osoby nie miały problemów z postawieniem środowiska oraz żeby wiedza nie zginęła. Również jeśli operowanie w tym środowisku wymaga użycia kilku komend to warto wrzucić je do osobnego pliku makefile by zgrupować je pod jedna komendą

\n\n

Wykorzystuj biblioteki

\n\n

Dzięki platformie github mamy dostęp do wielu gotowych rozwiązań, które możemy za darmo wykorzystać. Warto z tego korzystać zamiast próbować wymyśleć koło na nowo. W 90% przypadkach taka biblioteka wystarczy, co zaoszczędzi nam sporo czasu jaki musielibyśmy spędzić na jej poprawnym zaimplementowaniu. Pozostałe 10% są to sytuacje gdzy potrzebujemy niecodziennego zastosowania lub nie znaleźliśmy nic co odpowiada wymaganiom biznesu. Oczywiście nie należy przesadzać i pobieranie takich bibliotek jak is-odd, is-even, is-number itd. może przynieść więcej szkody niż pożytku. W końcu wszyscy wiemy co się stało z biblioteką left-pad

\n\n

Wspomagaj się narzędziami

\n\n

Aktualnie do większości frameworków mamy dostępne dedykowane CLI, które usprawnia proces tworzenia, rozbudowywania oraz ostatecznego budowania aplikacji. W podstawowych sytuacjach nie będziemy mieć potrzeby tworzenia swoich własnych narzędzi i w sumie nie powinniśmy. Oprócz wspomnianych CLI mamy również inne drobne narzędzia do usprawnienia naszej pracy. Aktualnym faworytem od pół roku jest u mnie Prettier, który formatuje nasz kod źródłowy do ustalonego formatu. Jest to zwykła paczka npm i możemy go skonfigurować jako package scripts, dzięki czemu wszyscy będą mieć jednakowo sformatowany kod. Dodatkowo możemy podpiąć sprawdzenie formatowania do naszego CI na githubie. Powoduje to, że nie musimy się zastanawiać nad formatowaniem bo mamy jedną komendę, która wszystko naprawi a nawet jeśli zapomnimy to podczas robienia PR do repozytorium zostanie to sprawdzone.

\n\n

Wyciągnij jak najwięcej z IDE

\n\n

Nowoczesne IDE są prawdziwymi kombajnami, które oferują nam wachlarz różnych funkcjonalności. Początkowo ciężko jest się połapać w tych wszystkich skrótach klawiszowych, możliwych konfiguracji czy morzu wtyczek i rozszerzeń. Warto obserwować swoją pracę by zauważyć co najczęściej musimy zrobić i czy da się to w pewien sposób usprawnić. Może się to odbyć na wiele sposobów: poznanie odpowiednich skrótów klawiszowych, odpowiednia konfiguracji środowiska czy też dodanie własnych szablonów plików (pisałem o tym w dwóch wpisach - osobno dla Intelij oraz Visual Studio Code). Sprawne poruszanie się po środowisku w którym spędzamy większość dnia potrafi oszędzić sporo czasu.

\n\n

Może się wydawać, że trzeba strasznie dużo robić żeby być leniwym programistą. Jednak po opanowaniu wszystkich elementów okazuje się, że mamy dużo więcej czasu na inne czynności. Czy warto w takim razie na początku poświęcić czas na udoskonalenie ich? Według mnie warto inwestować we wszystko co w przysłości da widoczne rezultaty. A wy co o tym sądzicie? A może macie własne sposoby na oszczędzanie czasu i bycie leniwym?

2018-04-10 06:15:19 programisto-badz-leniwy ckhxjb6o0000yi3umb3hg09jv 2018-04-10 06:15:19 2018-04-10 06:15:19 +cjg39dxc0010ri3umdw6la3sj Open Graph dla bloggerów https://fsgeek.pl/post/open-graph-dla-bloggerow/

Zauważyliście, że jak udostępniacie post z Medium albo innego bloga to po wklejeniu tworzy się taka łada karta, która zawiera tytuł, link, zdjęcie? I nie musieliście nic robić by cos takiego powstało? Jeśli nie wiecie jak coś takiego uzyskać na swoim blogu lub jesteście ciekawi jak to osiągnąć to zapraszam do dalszego czytania.

\n\n

\n\n

Czym jest Open Graph?

\n\n

Jest to protokół, który pozwala nam osiągnąć to co wspomniałem we wstępie czyli ładnie sformatowane linki idealnie pasujace do naszej tablicy na facebooku. Został stworzony 2 kwietnia 2010 roku przez Facebook’a jako sposób na prezentację treści na ich platformie. Wykorzystuje prosty mechanizm meta tagów w nagłówku strony, które opisują to co znajduje się na stronie i pozwalają na ładne sformatowanie tych treści.

\n\n

Aby umieścić taki meta-tag na naszej stronie musimy w sekcji head umieścić następującą linijkę

\n\n
<meta property="klucz" content="wartość" />
\n\n

gdzie klucz będzie jedną z własności opisanych poniżej.

\n\n

Podstawowe tagi

\n\n

Open Graph jest uniwersalnym formatem który pasuje do wielu rożnych typów stron jednak ja się skupię na tych własnościach, które mogą być przydatne jeśli piszecie bloga.

\n\n

Istnieje 4 podstawowe tagi, które powinny istnieć dla każdej strony:

\n\n
    \n
  • og:title - tytuł naszej strony
    • \n
  • og:type - typ strony
    • \n
  • og:image - adres pod którym znajduje się obrazek, który chcemy wyświetlić
    • \n
  • og:url - url do strony
    • \n
\n\n

Jeśli mamy bloga to w polu type powinniśmy wpisywać dwie wartości: article - dla strony gdzie jest post oraz website dla innych.

\n\n

Oprócz tych 4 tagów dla każdego typu oprócz website zostały zdefiniowane tagi pomocnicze, które precyzują pewne elementy naszego wybranego typu. W przypadku article mamy dostęp do następujących dodatkowych własności:

\n\n
    \n
  • article:published_time - data opublikowania artykułu
    • \n
  • article:modified_time - data ostatniej modyfikacji
    • \n
  • article:expiration_time- data po której artykuł jest już nieaktualny
    • \n
  • article:author - autor artukułu
    • \n
  • article:section - sekcja do której chcemy przypisać artykuł np.: Frontend
    • \n
  • article:tag - tag jakim opisujemy nasz artykuł
    • \n
\n\n

W przypadku ostatniej własności możemy podać więcej niż jeden meta-tag z kolejnymi wartościami.

\n\n
<meta property="article:tag" content="tag1" />\n<meta property="article:tag" content="tag2" />\n<meta property="article:tag" content="tag3" />
\n\n

Tagi dla Twittera

\n\n

Oczywiście Facebook nie jest jedyną platformą gdzie można się dzielić swoimi wpisami więc i istnieją specjalne właśności Open Graph dla nich, między innymi dla Twittera. Mamy tutaj grupę 5 tagów:

\n\n
    \n
  • twitter:card - tutaj można wpisać jedną wartość z summary, summary_large_image, app, player
    • \n
  • twitter:site - nazwa profilu z Twittera
    • \n
  • twitter:title - tytuł karty
    • \n
  • twitter:description - opis karty
    • \n
  • twitter:image - link do obrazka, który będzie umieszczony w karcie
    • \n
\n\n

Dzięki temu po wklejeniu zwykłego linka zostanie on zamieniony w dużo ładniejszą formę:

\n\n

twitter card

\n\n

Jak testować

\n\n

Na sam koniec warto jeszcze wspomnieć o tym jak testować open graph na naszej stronie by mieć pewność, że wszystko poprawnie umieściliśmy i jest czytane tak jak chcemy. Do ogólnego sprawdzenia można użyć opengraphcheck, jednak sprawdza on tylko podstawowe tagi. Dużo lepszym pomysłem jest wykorzystanie narzędzi od Facebook’a oraz Twittera, które sprawdzają wszystkie tagi ale również wyświetlają efekt graficzny dla naszego linku. Warto wykorzystać jeśli widzimy, że coś nie działa według naszego pomysłu.

2018-04-17 06:00:00 open-graph-dla-bloggerow ckhxjb6o0000yi3umb3hg09jv 2018-04-17 06:00:00 2018-04-17 06:00:00 ck05l4z7s01pci3umgzn4cjis Zarządzanie wieloma WordPressami – wtyczka MainWP https://webdevmaster.pl/zarzadzanie-wieloma-wordpressami-wtyczka-mainwp/ Większość serwisów internetowych ma pod sobą zaplecza SEO, zdarza się również że jakaś firma czy my jesteśmy właścicielami więcej niż jednej instancji WordPress. Aktualizowanie wtyczek (co odgrywa kluczową rolę w bezpieczeństwie naszego WP), motywów, zarządzanie treścią i komentarzami może na większej ilości serwisów stać się nie lada wyzwaniem. Nie koniecznie potrzebujemy grupy web deweloperów, którzy […] 2019-09-04 18:18:37 zarzadzanie-wieloma-wordpressami-wtyczka-mainwp ckdyuycaw000ti3um7a4vg0hl 2019-09-04 18:18:37 2019-09-04 18:18:37 ck0r48muo01pvi3um8xzr4yx1 Nie wyświetlają się oceny w wyszukiwarce Google https://webdevmaster.pl/forum/nie-wyswietlaja-sie-oceny-w-wyszukiwarce/ Dzisiaj zauważyłem taki problem, że oceny (gwiazdki) przestały wyświetlać się w wyszukiwarce Google. Tzn. jakiś tydzień temu podczas sprawdzania zaindeksowanych urli poprzez wpisywanie site:mojadomena.pl każdy wpis i podstrona miała wynik wraz z oceną, która była pobierana z mojej witryny. Strona na WordPressie – oceny dodane za pomocą wtyczki KK Star Ratings. Wtyczki nie aktualizowałem od […] 2019-09-19 19:56:30 nie-wyswietlaja-sie-oceny-w-wyszukiwarce-google ckdyuycaw000ti3um7a4vg0hl 2019-09-19 19:56:30 2019-09-19 19:56:30 ck1t8tcvk01r3i3umbnnh8elk Wtyczka Yoast SEO – opis i konfiguracja https://webdevmaster.pl/wtyczka-yoast-seo-opis-i-konfiguracja/ Yoast jest niewątpliwie jedną z najlepszych (o ile najlepszą) wtyczką pozwalającą na wykonywanie operacji na naszym WordPressie w zakresie SEO. Największą konkurencją dla tej wtyczki jest All in One SEO Pack. Plugin Yoast SEO – podstawowe informacje Obecnie dostępna w oficjalnym repozytorium WordPressa wersja wtyczki to 12.3. Yoast SEO ma ponad 5 milionów aktywnych instalacji, […] 2019-10-16 12:19:50 wtyczka-yoast-seo-opis-i-konfiguracja ckdyuycaw000ti3um7a4vg0hl 2019-10-16 12:19:50 2019-10-16 12:19:50 @@ -1559,14 +1574,6 @@ cjdy4i2qo00yui3um58fq5ehp Jak sobie radzić z tablicami w Javascript https://fsg cje3twmg000yyi3um0webcohh Angular - podstawy routingu https://fsgeek.pl/post/angular-podstawy-routingu/

Każdy serwis internetowy składa się ze zbioru stron pomiędzy którymi możemy się przenosić. Ze świecą szukać serwisów napisanych w dużych frameworkach gdzie mamy tylko jedną stronę. Dopiero przy wielu stronach możemy zobaczyć zysk z ich korzystania w postaci SPA. Dziś o tym jak zdefiniować podstawowy routing w Angularze i jak go możemy wykorzystać. Zapraszam do czytania

\n\n

\n\n

Definicja prostego routingu

\n\n

Konfigurację routingu w Angularze możemy przeprowadzić na dwa sposoby. Pierwszy z nich to zdefiniowanie go w pliku app.module.ts i według mnie przydaje się gdy mamy mało konfiguracji (czyli prawie nigdy ;) ). Drugi to zdefiniowanie routingu w osobnym module i zaimportowanie odpowiedniej klasy do pliku app.module.ts. Oczywiście oba sposoby są ze sobą kompatybilne i w łatwy sposób możemy przejść z pierwszej metody do drugiej co pod koniec postu pokażę. Aktualnie konfiguracja routingu wygląda u mnie następująco:

\n\n
import { RouterModule, Routes } from '@angular/router';\n\nconst appRoutes: Routes = [\n  {\n    path: 'login',\n    component: LoginComponent,\n  },\n  {\n    path: 'home',\n    component: HomeComponent,\n    data:{page: 'Home page'}\n  },\n  {\n    path: 'news/:newsId',\n    component: NewsComponent,\n  },\n  {\n    path: '',\n    redirectTo: '/home',\n    pathMatch: 'full'\n  },\n  { path: '**',\n  component: NotFoundComponent }\n]\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    LoginComponent,\n    HomeComponent,\n    NewsComponent,\n    NotFoundComponent,\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    RouterModule.forRoot(\n      appRoutes,\n      { enableTracing: true } // <-- debugging purposes only\n    ),\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n
\n\n

Jak widać składa się z dwóch części: definicji ścieżek oraz umieszczeniu odpowiedniego wpisu w @NgModule. Najpierw zajmę się przez chwilę tą drugą częścią.

\n\n
RouterModule.forRoot(\n\tappRoutes,\n\t{ enableTracing: true } // <-- debugging purposes only\n)\n\n\n
\n\n

Aby zdefiniować nasz routing musimy zaimportować moduł RoutingModule. Udostępnia on dwie metody których należy użyć w zależności od miejsca deklaracji. Jeśli definiujemy nasz główny routing(nadrzędny) to musimy użyć metody forRoot() która tworzy odpowiedni moduł ale również serwis odpowiedzialny za sterowanie naszą nawigacją. Jeśli definiujemy nawigację w konkretnym module(podrzędną) używamy metody forChild, która różni się od poprzedniej, że nie zawiera wspomnianego serwisu.

\n\n

Oprócz tej jednej drobnej różnicy używamy tych metod identycznie. Jako pierwszy parametr musimy tam umieścić zmienną typu Routing czyli tablicę obiektów z których każdy jest osobną deklaracją ścieżki. Oprócz tego jako drugi argument możemy podać dodatkowe ustawienia w postaci obiektu z odpowiednimi polami. Ciekawe jest pole enableTracing, które wyświetla logi dotyczące routingu w konsoli.

\n\n

enableTracing

\n\n

Tablica ścieżek

\n\n

Dużo bardziej interesująca jest zmienna typu Routing w której dzieje się prawdziwa konfiguracja. Każdy obiekt definiuje zachowanie dla pojedynczej ścieżki.

\n\n
{\n    path: 'login',\n    component: LoginComponent,\n},\n
\n\n

To jest najbardziej minimalna konfiguracja jaką możemy zrobić. Składa się z adresu pod jaki możemy się odwołać oraz komponentu jaki zostanie wyświetlony po wejściu pod ten adres. Należy pamiętać, że w Angularze ścieżki podajemy bez poprzedzającego ich znaku / - dla ścieżki /login musimy w konfiguracji podać login.

\n\n

Oprócz podstawowej konfiguracji możemy również rozbudować obiekty o inne elementy. Możemy wykorzystać pole data do przekazywania statycznych danych do komponentu np.: nazwę strony

\n\n
data:{page: 'Home page'}\n
\n\n

Oczywiście istnieje możliwość definiowania parametrów w ścieżce - bez tego system byłby ubogi. Wykorzystywany bardzo często przy wyświetlaniu szczegółów wybranego elementu z listy. Definiuje się go następująco:

\n\n
path: 'news/:newsId',\n
\n\n

Dzięki temu jeśli użytkownik wpisze adres /news/news-123 to w komponencie dostaniemy pod zmienną newsId wartość news-123. Możemy potem użyć tego do pobrania odpowiednich wartości z bazy danych i wyświetlaniu ich.

\n\n

Mamy również możliwość przekierowania użytkownika pod inny adres.

\n\n
{\n    path: '',\n    redirectTo: '/home',\n    pathMatch: 'full'\n},\n\n
\n\n

W tym przypadku jeśli użytkownik wejdzie pod adres / to chcę aby był od razu przekierowany pod adres /home. Tutaj warto zauważyć, że potrzebujemy znaku / na początku. W momencie definiowania routingu warto również zdefiniować ścieżkę pod którą zostanie przekierowany użytkownik jeśli wpisze jako adres losowy ciąg znaków - często znane jako strona 404. W Angularze aby osiągnąć coś takiego musimy zdefiniować na samym dole tablicy obiekt, który będzie miał zdefiniowaną ścieżkę jako tzw.: wildcart - czyli nieważne jaki będzie adres to zostanie dopasowany

\n\n
{ \n    path: '**',\n    component: NotFoundComponent \n}\n
\n\n

Routing w plikach html

\n\n

Konfiguracja powyżej jest konieczna ale niewystarczająca do poprawnego działania. Nic nam nie przyjdzie ze zdefiniowania ścieżek, komponentów jakie maja im odpowiadać bez zdefiniowania w pliku html nawigacji oraz zdefiniowania miejsca gdzie maja się wyświetlić komponenty danej ścieżki.

\n\n
\n<nav>\n\t<a routerLink="/login" >Login</a>\n\t<a routerLink="/home" >Home</a>\n\t<a routerLink="/news/post-123">Post</a>\n\t<a routerLink="/">Main Page</a>\n\t<a routerLink="/takiej-sciezki-nie-ma">Brak strony</a>\n</nav>\n<router-outlet></router-outlet>\n
\n\n

Angular dostarcza nam dwie dyrektywy: routerLink, który służy do przechodzenia pomiędzy widokami i odpowiada atrybutowi href oraz router-outlet w którym będzie umieszczony widok z komponentu ścieżki którą wybrał użytkownik. Oczywiście nie jesteśmy ograniczeni tylko do jednego takiego elementu na stronie ale wtedy musimy podać unikalną nazwę dla takiego outletu oraz przy definicji ścieżki określić do jakiego outletu ma być renderowany.

\n\n

Przekazywanie parametrów

\n\n

Chwilę temu napisałem, że możemy zdefiniować adres do którego można przekazać parametr. Jednak jak go pobrać w komponencie?

\n\n
export class NewsComponent implements OnInit {\n\tparam: string = "";\n\tconstructor(private route: ActivatedRoute) { }\n\t\n\tngOnInit() {\n\t\tthis.route.paramMap.forEach(({params}:Params)=>{\n\t\t\tthis.param = params['newsId']\n\t\t})\n\t}\n}\n
\n\n

Aby to zrobić musimy najpierw wstrzyknąć interfejs AcivatedRoute do naszej klasy. Dzięki temu w funkcji ngOnInit możemy wykorzystać naszą zdefiniowaną w konstruktorze zmienną route do wyciągnięcia naszego parametru.

\n\n

Przeniesienie routingu do osobnego pliku

\n\n

Jeszcze na sam koniec jak można przenieść definicje naszego routingu z pliku app.module.ts do osobne modułu. Pierwsze co to należy stworzyć plik np.: app.routes.ts. Następnie musimy w pliku umieścić dekorator @NgModule nad klasą którą będziemy potem eksportować

\n\n
\n@NgModule({\n  imports: [\n    RouterModule.forRoot(\n      appRoutes,\n      { enableTracing: true } // <-- debugging purposes only\n    )\n  ],\n  exports: [\n    RouterModule\n  ]\n})\nexport class AppRouting {}\n
\n\n

Oprócz tego musimy przekopiować naszą tablicę ze zdefiniowanymi ścieżkami. Teraz wystarczy umieścić naszą klasie w pliku app.module.ts w sekcji imports.

\n\n
imports: [\n    BrowserModule,\n    FormsModule,\n    AppRouting,\n],\n\n
\n\n

Oczywiście nie jest to wszystko co możemy zrobić ale takie minimum, które pozwala na tworzenie wielu stron w naszej aplikacji i zarządzaniu nimi. Jednak zostało jeszcze parę tematów które postaram się poruszyć w innym poście.

2018-02-26 06:15:00 angular-podstawy-routingu ckhxjb6o0000yi3umb3hg09jv 2018-02-26 06:15:00 2018-02-26 06:15:00 cje9jo14000z7i3um0daiawuy W świecie wyrażeń regularnych https://fsgeek.pl/post/w-swiecie-wyrazen-regularnych/

Wyrażenia regularne pojawiają się najczęściej znienacka i biją od razu po twarzy. Dla kogoś kto widzi je pierwszy raz prawdopodobnie mówią tyle samo co chińskie znaczki - po prostu są. A nie jest to ciężki temat i poświęcając chwilę na jego zgłębienie może się okazać, że te znaczki są proste. Dziś chciałbym pokazać podstawy tego tematu i pokazać, że da się tego nauczyć i potem wykorzystywać.

\n\n

\n\n

Podstawowy tworzenia wyrażeń regularnych

\n\n

Tak jak wspomniałem we wstępie tworzenie wyrażeń nie jest proste. Najlepiej się tego nauczyć przez praktykę - jak dla mnie nie da się inaczej, sucha teoria wyleci z głowy. Jeśli jeszcze nie znacie to polecam tą stronę do ćwiczenia a w przyszłości sprawdzania poprawności waszych wyrażeń - regex101.

\n\n

Wyrażenie regularne jest to grupa znaków umieszczona pomiędzy znakami /. Jest ono wykorzystywane aby odnaleźć w tekście ciąg znaków, które odpowiadają zdefiniowanemu przez nas wzorcowi lub by sprawdzić czy dany tekst spełnia reguły zdefiniowane przez wzorzec. W teorii jest proste ale problem tkwi w szczegółach - wzorce możemy określać na wiele różnych sposobów, co za chwilę pokażę. Wszystkie przykłady są sprawdzone przy pomocy strony do której link umieściłem. Warte zauważenia jest, że tam już są zapisane znaczki / i możemy się zająć bebechami w środku. Również po ostatnim / występuj literka g (g od global), która oznacza, że tekst pasujący do wzorca będzie wyszukiwany w całym tekście i nie zatrzyma się na pierwszym wystąpieniu.

\n\n

Tworzenie wzorców

\n\n

Najbardziej podstawowym wzorcem jest sytuacja gdzie szukamy konkretnego tekstu. Możemy wtedy umieścić ten tekst bezpośrednio jako wzorzec np.: /ala/. Jednak takie zdefiniowanie nie pozwoli znaleźć już na przykład słowa Ala. Aby być bardziej elastycznym istnieje zbiór znaków specjalnych, które pozwalają tworzyć bardziej zaawansowane wzorce:

\n\n
    \n
  • ^ znak ten oznacza, że tekst pasujący do wzorca będzie znaleziony tylko jeśli znajduje się na początku tekstu np.: wzorzec /^ala/ zostanie odnaleziony w tekście ala ma kota ale już nie w kota ma ala.
    • \n
  • $ znak jest odwrotnością poprzedniego. Nasz wzorzec zostanie znaleziony w tekście jeśli znajduje się na jego końcu np.: /ala$/ zostanie znalezione w tekście kota ma ala ale już nie w ala ma kota
    • \n
  • * znak który bezpośrednio poprzedza może wystąpić 0 lub więcej razy np.: do/al.*a/ pasują aa, ala, alla itd..
    • \n
  • + podobnie jak poprzednio tylko znak poprzedzający musi wystąpić przynajmniej raz ale może więcej np. /al+a/ pasuje ala, alla itd. Ale już nie pasuje aa
    • \n
  • ? opcjonalność - znak przed tym występujący może występować ale nie musi dla wzorca, przy czym jak występuje to nie może więcej niż raz al?a pasują ala oraz aa
    • \n
  • . zastępuje dowolny pojedynczy znak w naszym wzorcu np.: dla a.a pasuje ala, ada, ara itd.
    • \n
  • a|b - tak możemy zdefiniować alternatywę czyli tekst będzie odpowiadał naszemu wzorowi jeśli będzie zawierał a lub b np.: /ada|ala/ pasuje ada lub ala
    • \n
  • {n} - znak który poprzedza tą konstrukcję musi wystąpić dokładnie n razy np. dla /a{3}/ będzie odpowiadał tekst aaa ale aa lub a już nie
    • \n
  • {n,m} - podobnie jak poprzednio tylko jesteśmy w stanie określić zakres jaki nam odpowiada: dla /a{1,3}/ będzie odpowiadało a, aa i aaa
    • \n
  • {n,} - w tym przypadku określamy minimalną ilość razy ale nie definiujemy górnej - znak przed tym nie może wystąpić mniej niż n ale może dużo więcej np.: /a{2,}/ będzie pasowało : aa, aaa itd. ale a już nie
    • \n
  • [abc] - zbiór znaków - definiuje zbiór znaków jakie mogą wystąpić na pozycji w naszym wzorcu, dla wzorca /a[ld]a/ pasuje tekst ala i ada ale aga już nie
    • \n
  • [^abc] - anty zbiór znaków - definiuje jakie znaki nie mogą się pojawić na danym miejscu, dla wzorca /a[^ld]a/ pasuje tym razem aga ale ala i ada już nie
    • \n
  • (a) - grupowanie części wzorca - mamy możliwość grupowania pewnych części znaków podczas tworzenia wzorca, dzięki czemu możemy określić, że dana część ma się np.: powtórzyć pewną ilość razy (ala) np.: dla /(ala){3}/ poprawne będzie alaalaala. Dodatkowo podczas przetwarzania tekstu, jeśli zostanie znaleziony kawałek tekstu który odpowiada naszemu wzorcowi to będziemy mieli dostęp również do kawałka tesktu który odpowiada naszej grupie. Można to użyć gdy chcemy np.: zweryfikować czy adres url jest poprawny i użyć grup by wyciągnąć dodatkowe informacje np.: domena, czy to jest http czy https itd.
    • \n
  • (?:a) - sytuacja identyczna jak u góry z tym że nie zwraca nam wartości wyłapanych w grupach
    • \n
  • a(?=b) - ciekawa konstrukcja która znajdzie nam wzorzec a tylko i wyłącznie wtedy gdy zaraz po a jest b tak więc dla /ala(?=kota) pasuje alakota ale już alamakota - trzeba pamiętać, że naszym wzorcem jest ala nie alakota
    • \n
  • a(?!b) - jest to odwrotność do poprzedniego czyli a zostanie znalezione tylko jeśli zaraz po nim nie ma b czyli dla /ala(?!kota) pasuje ala ale już nie alakota
    • \n
\n\n

Jeśli byśmy chcieli wpisać jako wzór jeden ze znakow specjalnych np.: ^ musimy go poprzedzić znakiem \\

\n\n

Gotowe definicje zbiorów znaków

\n\n

Oprócz znaków specjalnych w wyrażeniach regularnych możemy korzystać ze specjalnych wyrażeń które określają dane grupy znaków co może uprościć nasz zapis:

\n\n
    \n
  • \\d - określa znak będący cyfrą - odpowiada [0-9]
    • \n
  • \\D - znak niebędący cyfrą - odpowiada [^0-9]
    • \n
  • \\w - znak alfanumeryczny oraz podkreślenie - odpowiada [A-Za-z0-9_]
    • \n
  • \\W - znak nie będący znakiem alfanumerycznym lub podkreśleniem - odpowiada [^A-Za-z0-9_]
    • \n
  • \\s - odpowiada pojedynczemu białemu znakowi (spacja, znak tabulacji itd)
    • \n
  • \\S - odpowiada każdemu znakowi który nie jest biały
    • \n
\n\n

Flagi

\n\n

No i na sam koniec flagi czyli to co możemy jeszcze dopisać po naszym wzorcu (po znaku /). W zależności od użytych flag może się zmienić co znajdziemy w tekście, ile znajdziemy pasujących wzorców i czy w ogóle coś znajdziemy. Nie omówię tutaj ich wszystkich tylko parę według mnie ciekawszych

\n\n
    \n
  • g - jak wspomniałem na początku oznacza to, że w tekście zostaną odnalezione wszytskie pasujące do wzorca kawałki - bez tej flagi przeszukiwanie skończy się po pierwszym odnalezionym kawałku pasującym do zdefiniowanego wzorca
    • \n
  • i - wielkość znaków nie jest brana pod uwagę - wzorzec /ala/i zostanie znaleziony zarówno w tekście ala jak i Ala
    • \n
  • x ignoruje spacje w naszym wzorcu - do wzorca /a l a/x pasuje tekst ala ale już nie /ala/
    • \n
\n\n

Przykłady do samodzielnego wykonania

\n\n

Tak jak wspomniałem na początku najlepiej się nauczyć przez praktykę. Więc jeśli macie chwilę czasu i chcielibyście trochę pogłówkować a nie wiecie co moglibyście zrobić to podsuwam wam parę pomysłów. Jedne są prostsze, drugie trudniejsze ale na pewno do wykonania ;)

\n\n

Przykłady zadań do wykonania:

\n\n
    \n
  • Sprawdź czy zdanie jest poprawne (zaczyna się od dużej litery, kończy kropką, wykrzyknikiem lub pytajnikiem, czy nie ma niepotrzebnych spacji - zasady możecie dopisać jeszcze sami)
    • \n
  • wyciągnij numer telefonu z tekstu (może być polski czyli +48(spacja)9 cyfr)
    • \n
  • wyciągnij kod pocztowy z tekstu
    • \n
  • Zwaliduj czy podany adres email jest poprawny(w zależności od stopnia złożoności jest to zadanie zarówno łatwe jak i trudne - do was należy wybór ;))
    • \n
2018-03-02 06:15:00 w-swiecie-wyrazen-regularnych ckhxjb6o0000yi3umb3hg09jv 2018-03-02 06:15:00 2018-03-02 06:15:00 cjefaog5c00zbi3umhbaxbm7k Wywróż sobie estymacje https://fsgeek.pl/post/wywroz-sobie-estymacje/

Jedynym z elementów pracy w metodach zwinnych jest planowanie i co za tym idzie estymacja zadań. Jest to o tyle ważne, że na ich podstawie planujemy naszą pracę na kolejne sprinty oraz informujemy klienta kiedy może się spodziewać kolejnych funkcjonalności. Wszyscy co już parę razy to robili wiedzą, że momentami jest to jak wróżenie z kart. Dziś chciałbym opisać jak do tego można przysiąść dla osób, które nigdy tego jeszcze nie robiły.

\n\n

\n\n

Rodzaje estymat

\n\n

\n\n

Głównym zadaniem estymowania jest określenie ile czasu zajmie nam realizacja pewnego zadania lub grupy zadań. Dzięki temu możemy zaplanować pracę i mniej więcej określić termin kolejnych kamieni milowych projektu. Jednak należy pamiętać, że nie są to szacunki wiążące. W zależności od poziomu który szacujemy będą one mniej lub bardziej dokładne ale nigdy idealne. Estymację możemy podzielić ze względu na typ oraz na wielkość zadania. Jeśli chodzi o typ to mamy dwa rodzaje:

\n\n
    \n
  • czasowa
    • \n
  • relatywna
    • \n
\n\n

Pierwszy jest w momencie gdy określamy godzinowo ile zajmie nam realizacja celów czyli na przykład strona logowania zajmie 16h. Drugi typ jest ciekawszy ponieważ dodaje pewną warstwę abstrakcji. Nie określamy tam ile zajmie nam realizacja ale stopień trudności zadania według określonej przez nas skali. Tak naprawdę skala może być dowolna byleby wszyscy w projekcie ją respektowali. Najczęściej się spotyka system punktowy gdzie im więcej punktów dostanie zadanie tym więcej czasu jest potrzebne na jego zrealizowanie. Jednak jak określić złożoność pojedynczego zadania a jak całej funkcjonalności?

\n\n

Estymacja pojedynczych zadań

\n\n

Pojedyncze zadania jest nam łatwiej oszacować ponieważ możemy się skupić na konkretnej rzeczy i nie zastanawiać nad ogółem. Prostym przykładem może być czas potrzebny na umycie naczyń po obiedzie. Prawdopodobie wszyscy bez trudu byliby w stanie to oszczacować.
\nPodobnie jest z programowanie jednak tutaj bardzo dużą rolę odgrywa doświadczenie. Inne czasy będzie podawała osoba doświadczona w danej technologii i domenie biznesowej projektu niż świeżo upieczony programisat, który jest pierwszy dzień w projekcie. Jednak proces podejmowania decyzji w obu przypadkach będzie podobny. Załóżmy, że musimy oszacować stworzenie strony logowania. Jak poprawnie oszacować to zadanie:

\n\n
    \n
  1. Czy już kiedyś robiłeś taki widok? Jeśli tak sprawdź ile ci to zajęło i podaj taki czas.
    2. \n
  2. Jeśli nie robiłeś dokładnie tego to czy robiłeś coś podobnego np.: prosty formularz. Zobacz ile ci to zajęło i pomnóż czas przez 1,5
    3. \n
  3. Jeśli doszedłeś do tego punktu to znaczy, że możesz już zgadywać ile ci to zajmie. Jeśli masz już jakieś doświadczenie spróbuj pomyśleć chwilę ile ci to może zająć. Cokolwiek byś nie podał pomnóż ten czas przez 2 lub 3.
    4. \n
\n\n

Doświadczenie ogrywa dużą rolę przy szacowaniu pojedynczych zadań. Im więcej go mamy, im więcej rzeczy w życiu robiliśmy tym jesteśmy w stanie lepiej oszacować nakład pracy jaki musi być wykonany do ukończenia zadania. A taka umiejętnośc jest konieczna by dobrze wyestymować całe funkcjonalności.

\n\n

Estymacja całych funkcjonalności

\n\n

Najczęściej w metodach zwinnych mamy do czynienia z sytuacją gdzie musimy określić jaki czas potrzebujemy by dostarczyć całą gotową funkcjonalność. Nie jest to prosty proces ponieważ wile czynników ma na to wpływ, o wielu można zapomnieć, część pominąć co powoduje, że nam się rozjeżdżają szacunki. Nie ma gotowego przepisu jak sobie radzić z tą sytuacją ale można spróbować stworzyć listę rzeczy na które należy zwrócić uwagę. Jak mogłaby wyglądać taka lista?

\n\n
    \n
  1. Czy są wszystkie wymagania biznesowe od klienta?
    2. \n
  2. Czy są dostępne wszystkie potrzebne designy?
    3. \n
  3. Czy można podzielić pracę pomiędzy programistów i pracować równolegle?
    4. \n
  4. Podzielić zadanie na mniejsze części (osobno front i backend), które można osobno oszacować
    5. \n
  5. Jeśli frontend i backend wykonywali swoją pracę osobno to należy dodać czas na integracje pomiędzy nimi
    6. \n
  6. Dodać czas na testy całej funkcjonalności
    7. \n
  7. Dodaj do siebie punkty 3-6 i pomnóż przez 1,5
    8. \n
\n\n

Pierwsze 3 punkty są przygotowaniem do części właściwej estymacji. Jednak bez ich przeprowadzenia nie jesteśmy w stanie poprawnie podzielić funkcjonalność na zadania. W zależności od wymagań biznesowych zadanie może być zarówno proste jak i trudne np.: to ma być proste logowanie czyli wygenerowanie tokenu i zwrócenie do frontendy - proste lub oprócz wygenerowania tokenu, wygenerujcie użytkownikowi jakiś obrazek, wpiszcie go do statystyk itd. - już jest więcej pracy. To samo dotyczy frontu gdzie ekran logowania może być prostym widokiem z dwoma inputami albo jakimś mega innowacyjnym widokiem, który przyśnił się grafikowi podczas pełni księżyca.

\n\n

Warto poświęcić chwilę czasu podczas estymacji na zebranie odpowiednich wiadomości, dopytanie o szczegóły czy też rozpisanie sobie pewnych elementów systemu. Im bardziej dokładnie to zrobimy tym nasze szacunki będą bliżej prawdy.

\n\n

Dlaczego estymacje w większości przypadków nie działają?

\n\n

Część z was pewnie się zastanawia dlaczego mówię o mnożeniu czasów przez pewne liczby. Jest to związane z niedoszacowaniem zadań. Dużo początkujących (w tym i ja także) ma tendencję do przeceniania swoich możliwości: O takie fajne małe zadanie - skończę je w 2h a potem 2h mijają a ty dopiero na początku drogi. Dlaczego tak się dzieje? Ponieważ przy estymacji zapominamy o takich rzeczach jak: wyjście na kawę, spotkanie w pracy, pójście do łazienki, zjedzenie drugiego śniadania, wypełnienie jiry itd. Może się okazać, że w 2 godzinach zegarowych popracowaliśmy godzinkę, może półtorej. Ale nie można też przesadzić - nie możemy podać, że prosty widok będziemy robić miesiąc bo nikt nie będzie chciał z nami pracować. Ogólnie można przyjąć założenie, że im bardziej ogólne zadanie to możemy przez większy współczynnik pomnożyć. Jednak dla konkretnych i szczegółowo opisanych powinniśmy z niego zrezygnować i podać w miarę konkretne szacunki

\n\n

Z estymacją są również związane dwa prawa:

\n\n\n\n

Są trochę humorystyczne ale jak się dłużej zastanowić to jest w tym jakaś logika ;)

2018-03-06 06:50:00 wywroz-sobie-estymacje ckhxjb6o0000yi3umb3hg09jv 2018-03-06 06:50:00 2018-03-06 06:50:00 -cjexuie6g0100i3um2prk4i6w Animacje w CSS https://fsgeek.pl/post/animacje-w-css/

CSS już dawno przestał być tylko językiem do kolorowania naszej strony czy formatowaniu tekstu. Kolejne wersje dodają coraz bardziej zaawansowane elementy do niego co powoduje, że niektóre czynności, do których wcześniej potrzebowaliśmy skryptów i zewnętrznych bibliotek, jesteśmy w stanie ograć samym CSS’em. Dziś chciałbym omówić jedną z nich czyli animacje.

\n\n

\n\n

Czym są animacje?

\n\n

Jednak zanim przejdę bezpośrednio do animacji w CSS warto powiedzieć czym są one tak naprawdę. Według Wikipedii animacja jest to ożywianie martwych kształtów poprzez dokonanie wielu fotografii, rysunków a potem wyświetlanie ich w sposób ciągły. Każdy rysunek różni się od poprzedniego w niewielkim stopniu co powoduje, że powstaje wrażenie ruchu. I za chwilę zobaczycie, że w CSS zasada działania jest identyczna.

\n\n

Właściwość animation

\n\n

W CSS mamy grupę właściwości, które zaczynają się od słówka animation i kontrolują różne aspekty naszej własnej animacji. Mamy 8 następujących właściwości:

\n\n
    \n
  • animation-delay - czas pomiędzy załadowaniem elementu a rozpoczęciem jego animacji. Czas możemy definiować zarówno w sekundach jak i milisekundach np.: 2s, 300ms
    • \n
  • animation-direction - kierunek w jakim odtwarza się nasza animacja czyli sposób w jaki są odtwarzane kolejne klatki naszej animacji. Mamy tutaj 4 wartości: normal - klatki są odtwarzane w kolejności w jakiej zostały zadeklarowane, jest to wartość domyślna; reverse - klatki są odtwarzane od tyłu; alternate - w momencie jak animacja dojdzie do ostatniej klatki zaczyna odtwarzać je w przeciwnej kolejności, daje to efekt takiego wahadła; alternate-reverse - podobnie jak poprzednio tylko pierwszy cykl animacji jest wykonywany od tyłu
    • \n
  • animation-duration - czas jaki będzie trwał jeden cykl animacji, podobnie jak w przypadku delay możemy dać wartości w sekundach i milisekundach
    • \n
  • animation-iteration-count - ilość cykli animacji jaka ma się wykonać np.: animation-iteration-count: 2 oznacza, że animacja wykona się dwa razy; możemy tutaj również dać wartości ułamkowe co spowoduje, że animacja zatrzyma się w trakcie wykonywania; również jeśli chcemy by animacja wykonywała się ciągle możemy użyć słówka infinite
    • \n
  • animation-name - nazwa zestawu klatek, które zostaną przypisane do naszej animacji
    • \n
  • animation-play-state - określenie czy nasza animacja się wykonuje czy nie: paused - nie wykonuje się, running - wykonuje się
    • \n
  • animation-timing-function - określa w jaki sposób następują zmiany w naszym animowanym elemencie tak by z wyglądu początkowego przekształcił się w końcowy np.: kolejne klatki pojawiają się liniowo w czasie albo na początku animacja przebiega szybciej a potem zwalnia. Typowe wartości to na przykład: easeIn, easeOut,linear ale również możemy zdefiniować własny sposób przechodzenia od startu do końca
    • \n
  • animation-fill-mode - określa sposób w jaki ma się zachować nasz animowany komponent, jakie ma przypisane style przed i po animacji. Może przyjąć 4 wartości: none- wartość domyślna czyli element ma tylko przypisane do niego style bez tych zdefiniowanych w klatkach; forwards - po zakończeniu animacji element zachowa style z ostatniej klatki; backwards- przed rozpoczęciem animacji element ma style z pierwszej klatki;both- połączenie backwards i forwards
    • \n
\n\n

Klatki animacji

\n\n

Parę razy przy opisie właściwości użyłem słowa klatka. Tak jak wspominałem mechanizm w CSS jest podobny do tego co znamy z kina. Definiujemy jak ma wyglądać nasz animowany element w poszczególnych punktach animacji pozwalając przy przeglądarka sama zdecydowała jak przejść pomiędzy punktami. Jest to ważne ze względów wydajnościowych ponieważ silnik przeglądarki jest w stanie zoptymalizować te zmiany tak by były jak najmniej obciążające dla niego.

\n\n

Aby zdefiniować własne kroki musimy wykorzystać specjalną konstrukcję @keyframes, która ma następującą strukturę:

\n\n
@keyframes name {\n  from {\n    margin-left: 0%; \n   background-color: yellow\n  } \n\n  to {\n    margin-left: 90%;\n    background-color: green;\n  }\n}\n\n\n
\n\n

name jest to nazwa naszego zbioru klatek i to właśnie ja wpisujemy we własności animation-name. Następnie mamy definicję naszych kroków przy pomocy dwóch słów kluczowych: from i to. W nich określamy jak ma wyglądać nasz element na początku oraz na końcu animacji. To co dzieje się pomiędzy wylicza sama przeglądarka. Nie jesteśmy ograniczeniu tylko do dwóch punktów. Możemy określić punkty w których chcemy by element przyjął konkretne wartości przy pomocy procentów gdzie 0% to odpowiednik from a 100% odpowiada to.

\n\n
@keyframes name {\n  0% {\n    margin-left: 0%; \n    background-color: yellow\n  }\n\n  50%{\n    margin-top: 100px;  \n  }\n  \n  100% {\n    margin-left: 90%;\n    background-color: green;\n  }\n}\n\n
\n\n

A jakie właściwości dać w naszych wybranych punktach? Odpowiedź brzmi każdą jaka jest poprawna w CSS czyli marginesy, kolor oraz transformacje o których opowiem trochę w jednym z następnych postów.

\n\n

See the Pen CSS Animations by Aleksander (@Feridum) on CodePen.

\n

\n\n

No i na sam koniec jeszcze mały przykład animacji wahadła. Warto tutaj zauważyć jak wiele potrafi zrobić przeglądarka by animacja była płynna. Kolor został ustalony tylko dla pierwszej i ostatniej klatki natomiast na animacji płynnie zmienia się z jednej w drugą. Warto również zobaczyć do kodu gdzie kostki mają uustawiony kolor czerwony jako domyślny, ale dzięki wykorzystaniu animation-fill-mode: backwards; tuż przed rozpoczęciem animacji mają kolor zółty. No i przy definicji klatek możemy mieszać określanie klatek przy pomocy słów from i to z wartościami procentowymi.

\n\n

Samo tworzenie animacji nie jest trudne i pozwala osiągnąć ładne efekty przy minimalnym wysiłku. Więc jeśli potrzebujecie coś takiego zrobić i jesteście w stanie to osiągnąć w CSS to wykorzystajcie to zamiast ściągać kolejną bibliotekę Javascript. No i do usłyszenia wkrótce :)

2018-03-19 06:25:01 animacje-w-css ckhxjb6o0000yi3umb3hg09jv 2018-03-19 06:25:01 2018-03-19 06:25:01 -cjf7s3bc00106i3umax2o1rxi Redux store w Angularze https://fsgeek.pl/post/redux-store-w-angularze/

Od ponad pół roku pracuję z połączeniem React&Redux i po początkowych problemach polubiłem taką architekturę. Idea pojedynczego źródła danych oraz czyste funkcje pomaga przy tworzeniu oraz utrzymywaniu oprogramowania. Jak zacząłem zabawę z Angularem zacząłem się zastanawiać czy mogę użyć znanego mi już Reduxa w Angularze. I w ten sposób znalazłem angular-redux

\n\n

\n\n

Idea Reduxa

\n\n

Idea tego rozwiązania jest prosta pomimo tego, że początkowo przytłacza ilością elementów i może wydawać się niezrozumiała. Reduxa można w skrócie opisać przy pomocy 3 zasad:

\n\n
    \n
  • Pojedyncze źródło prawdy - stan aplikacji jest przechowywany w pojedynczym obiekcie
    • \n
  • Stan aplikacji można tylko odczytać - zmiana stanu odbywa się wywołanie akcji
    • \n
  • Zmiany odbywają się przy pomocy czystych funkcji
    • \n
\n\n

Z tych zasad wynikają 3 elementy o które musimy zadbać pisząc aplikację:

\n\n
    \n
  • Store - przechowuje stan naszej aplikacji. W całej aplikacji istnieje tylko jeden taki obiekt.
    • \n
  • Actions - są to akcje wywoływane w aplikacji np.: CREATE_EVENT. Tylko za ich pomocą możemy aktualizować nasz Store.
    • \n
  • Reducers - są to czyste funkcje, które obsługują akcje. Na podstawie poprzedniego stanu aplikacji oraz wywołanej akcji jest zwracany nowy stan aplikacji
    • \n
\n\n

Redux w Angularze

\n\n

Jak wspomniałem we wstępie lubię idea pojedynczego źródła prawdy w aplikacji więc zacząłem szukać bibliotek, które pomagają to osiągnąć w Angularze i znalazłem dwie pozycje:

\n\n\n\n

Pierwsza z nich wyglądała dla mnie bardziej znajomo do tego co znam z Reacta więc postanowiłem ją wybrać. Aby ją zainstalować wystarczy jedna komenda:

\n\n
yarn add redux @angular-redux/store\n
\n\n

yarn add redux

\n\n

Konfiguracja też nie jest ciężka co mam nadzieję za chwilę pokazać. Pierwsza rzecz jaką musimy zrobić to stworzyć nasz store w aplikacji. Robimy to poprzez zaimportowanie klasy ngReduxModule do naszego modułu aplikacji oraz następnie stworzenia store’a w konstruktorze.

\n\n
@NgModule({\n  declarations: [\n    AppComponent,\n  ],\n  imports: [\n    BrowserModule,\n    NgReduxModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n  constructor(ngRedux: NgRedux<IAppState>) {\n    ngRedux.configureStore(rootReducer, undefined);\n  }\n }\n\n
\n\n

Mamy tutaj parę elementów na które warto zwrócić uwagę. Pierwszym jest argument w konstruktorze, który jest obiektem generycznym klasy NgRedux. W związku z tym musimy podać typ jaki będzie obsługiwała nasza klasa a co za tym idzie nasz redux store. Jako typ podajemy interfejs, który zawiera pola wraz typami, które są zgodne z zawartością naszego store’a.

\n\n

Mając to możemy faktycznie stworzyć nasz obiekt do przechowywania danych w aplikacji przy pomocy funkcji configureStore. Ma ona dwa wymagane parametry: reducer oraz stan początkowy. Jak zauważyliście u mnie stan początkowy ma wartość undefined - dzięki temu mogę podać osobno stan początkowy dla każdego reducera osobno.

\n\n

Praktyczny przykład

\n\n

Jeśli czytaliście mój wpis o komponentach w Angularze (a jeśli ominęliście to zapraszam) to omawiałem tam temat na przykładzie prostej aplikacji gdzie po wciśnięciu przycisku inkrementowała się liczba. Teraz pokażę jak można to zrobić z użyciem angular-redux.

\n\n

Pierwsze co należy zrobić to zdefiniować jak ma wyglądać nasz store.

\n\n
export interface IAppState{\n  counter: CounterState\n}\n\n
\n\n

Przykład jest prosty więc interfejs nie jest skomplikowany. Następna rzecz to nasz reducer, który będzie tworzył nowy stan aplikacji.

\n\n
const rootReducer = combineReducers<IAppState>({\n  counter: counterReducer,\n})\n\n
\n\n

Wykorzystałem tutaj trochę na wyrost funkcję combineReducers. Pozwala ona zdefiniować więcej niż jeden reducer dla naszej aplikacji i wewnątrz tworzy z tych małych pojedynczych jeden duży.

\n\n

Skoro zaimportowaliśmy nasz reducer to warto by zobaczyć jak on wygląda.

\n\n
import { Action } from 'redux';\nimport { INCREMENT_COUNTER } from './counter.actions';\n\nexport interface CounterState {\n  value: number;\n}\n\nexport const counterInitialState: CounterState = {\n  value: 0,\n};\n\nexport function counterReducer(state: CounterState = counterInitialState, action: Action): CounterState {\n  switch (action.type) {\n    case INCREMENT_COUNTER: return { value: state.value + 1 };\n    default: return state;\n  }\n}\n\n
\n\n

Dla tych co robili kiedyś w połączeniu React+Redux+Flow może się to wydawać znajome. Na samej górze definiuję interfejs dla danego reducera. Następnie definiuję jego stan początkowy. Jest to istotne ponieważ stan aplikacji musi być zawsze zwrócony oraz musi być zgodny ze zdefiniowanymi przez nas interfejsami

\n\n

Na samym dole mamy część właściwą reducera czyli faktyczną funkcję, która przyjmuje dwa argumenty: aktualny stan oraz wywołaną akcję. Na podstawie tych informacji jesteśmy w stanie zdefiniować jak ma wyglądać nowy stan aplikacji. W momencie gdy zostanie wywołana akcja, której nie znamy to musimy ją zignorować ale musimy także coś zwrócić - więc zwracamy poprzedni stan.

\n\n

No to zostało jeszcze określenie naszych akcji. Przyznam szczerze, że zrobiłem to identycznie jak w przypadku Reacta chociaż widziałem również inne propozycje.

\n\n
import { Action } from "redux";\n\nexport const INCREMENT_COUNTER = 'counter/INCREMEENT_COUNTER'\n\nexport const incrementCounter = (): Action =>({\n    type: INCREMENT_COUNTER\n})\n\n
\n\n

W tym wykonaniu jest to bardzo proste, ponieważ definiuję tylko typ akcji oraz funkcję, która tworzy odpowiedni obiekt dla reducera - ustawia typ akcji jako mój zdefiniowany.

\n\n

Mając to zostaje ostatnia rzecz - połączenie tego z komponentem.

\n\n
@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n})\nexport class AppComponent {\n    @select('counter') counter$: Observable<CounterState>;\n    \n    constructor(private ngRedux: NgRedux<IAppState>){\n    }\n\n    onClick(){\n      this.ngRedux.dispatch(incrementCounter());\n    }\n\n}\n
\n\n

Mamy tutaj znowu parę elementów na które warto zwrócić uwagę. Pierwszy to dekorator @select, która pozwala pobrać ze store’a interesujący nas element i umieścić ją w zmiennej typu Observable. Funkcja ta może przyjąć kilka argumentów:

\n\n
    \n
  • 0 argumentów - wtedy odpowiedni element ze store’a jest wybierany na podstawie nazwy np.: @select() counter$ wybiera element counter (nie ma znaczenia czy damy na końcu znak $ czy nie - $ na końcu jest tylko konwencją nazewniczą)
    • \n
  • 1 argument - wtedy wybiera dokładnie podany element
    • \n
  • tablica argumentów - tzw.: selektor ścieżki czyli z elementów tablicy tworzy ścieżkę do konkretnej zmiennej np. @select(['counter', 'value']) wybierze element value, który znajduje się w obiekcie counter w state’cie
    • \n
  • Funkcja - wtedy nasz dekorator wykorzysta funkcję by znaleźć właściwy element, argumentem funkcji jest obiekt state np.: @select(state=>state.counter)\n
    • \n
\n\n

Idąc dalej w konstruktorze tworzymy instancję klasy NgRedux dzięki czemu w funkcji onClick() możemy wykorzystać funkcję dispatch, która wywoła akcję increment().

\n\n

Na sam koniec jeszcze tylko warto pokazać jak wyświetlić taką zmienną typu Observable na widku.

\n\n
<div style="text-align:center">\n  <button (click)="onClick()">{{(counter$ | async).value}}</button>\n</div>\n
\n\n

Z racji tego, że jest to zmienna Observable musimy użyć pipe’a async. Pobiera on ostatnią wartość dla tej zmiennej kiedy tylko się pojawi i wyświetla. Jako, że pobrana wartość w tym przypadku to obiekt to muszę jeszcze wyłuskać odpowiednie pole. Wygląda trochę dziwnie ale działa :D

\n\n

Na sam koniec narzędzie bez którego nie wyobrażam sobie pracy z Reduxem czyli reduxDevTools. Na szczęście konfiguracja tego narzędzia jest prosta i ogranicza się do jednej linijki:

\n\n
export class AppModule {\n  constructor(ngRedux: NgRedux<IAppState>, devTools: DevToolsExtension,) {\n    ngRedux.configureStore(rootReducer, undefined, [], devTools.isEnabled() ? [ devTools.enhancer() ] : []);\n  }\n }\n
\n\n

Pusty nawias, który jest przekazany jako 3 argument jest obowiązkowy ponieważ tam jest miejsce dla zdefiniowanych przez nas middlewarów. A jak całość działa?

\n\n

demo

\n\n

Może się wydawać, że wsadzanie Reduxa niepotrzebnie komplikuje naszą aplikację. Jest to prawa dla małych aplikacji ale czy wtedy potrzebujemy takiego dużego frameworka jak Angular? Dla dużych aplikacji widać korzyści z tego płynące i osobiście bardzo polecam. A może używaliście kiedyś tego drugiego rozwiązania i moglibyście powiedzieć czy wybrałem dobrze czy źle? Zapraszam do dyskusji.

2018-03-26 05:15:00 redux-store-w-angularze ckhxjb6o0000yi3umb3hg09jv 2018-03-26 05:15:00 2018-03-26 05:15:00 -cjft9unrs010ni3um8yvh3tuk Programisto bądź leniwy! https://fsgeek.pl/post/programisto-badz-leniwy/

Najważniejszą cechą programisty obok logicznego myślenia, umiejętności rozwiązywania problemów i znajomości języków programowania powinno być lenistwo. I jeśli tego na razie nie potrafisz to naucz się tego jak najszybciej - możesz tylko na tym zyskać.

\n\n

\n\n

Jak to lenistwo?

\n\n

Jeśli zadaliście sobie to pytanie to ten akapit jest dla was. Tak, według mnie lenistwo powinno być jedną z podstawowych umiejętności programisty. I to zarówno juniora jak i starego wyjadacza, który przed śniadaniem przegryza się przez kod assemblera. Jednak nie chodzi mi o ten rodzaj lenistwa o którym może pomyśleliście czyli: nic nie robię bo to nudne i mi się nie chce tylko bardziej to kreatywne czyli co mogę robić by uniknąć robienia nudnych rzeczy. W naszej branży wymaga się abyśmy rozwiązywali problemy, tworzyli nowe rozwiązania i ulepszali dzięki temu świat. Jednak tak jak w każdej innej pracy jest z tym związana masa innych nudnych i monotonnych czynności, które muszą być wykonane ale mało kto ma ochotę to robić. MOżna zadać sobie pytanie j ak je wyeliminować z naszego życia?

\n\n

Triki leniwego programisty

\n\n

Każdy leniwy programista ma w zanadrzu parę sztuczek, które pomagają mu wykonywać dobrze jego zadania omijając jednocześnie te nudne kawałki, dzięki czemu ma więcej czasu na te przyjemniejsze.

\n\n

Testy

\n\n

Pierwszą z nich jest zrozumienie istoty testów i tego jak bywają pomocne. Z jednej strony może się wydawać, że jest to zaprzeczenie idei leniwego programisty bo trzeba pisać dodatkowy kod, nie wprowadza on żadnej nowej funkcjonalności a do tego często jest to uciążliwe. Jednak jak często powtarzam testowanie pozwala nam zaoszczędzić czas podczas szukania błędu oraz rozwijania aplikacji w późniejszym stadium. Dobrze napisane testy automatyczne pozwolą nam zapanować nad regresją bez konieczności ciągłego klikania po aplikacji by sprawdzić czy coś się nie zepsuło.

\n\n

Automatyzacja budowania

\n\n

Czasy w których trzeba było stawiać aplikacje ręcznie na serwerze przy pomocy listy komend, ręczne instalowanie bibliotek już dawno odeszły. Teraz mamy Dockera oraz parę innych narzędzi, które ułatwiają nam pracę. Jednak nawet przy ich wykorzystaniu należy pamiętać o ciągłej aktualizacji dokumentacji tak by nowe osoby nie miały problemów z postawieniem środowiska oraz żeby wiedza nie zginęła. Również jeśli operowanie w tym środowisku wymaga użycia kilku komend to warto wrzucić je do osobnego pliku makefile by zgrupować je pod jedna komendą

\n\n

Wykorzystuj biblioteki

\n\n

Dzięki platformie github mamy dostęp do wielu gotowych rozwiązań, które możemy za darmo wykorzystać. Warto z tego korzystać zamiast próbować wymyśleć koło na nowo. W 90% przypadkach taka biblioteka wystarczy, co zaoszczędzi nam sporo czasu jaki musielibyśmy spędzić na jej poprawnym zaimplementowaniu. Pozostałe 10% są to sytuacje gdzy potrzebujemy niecodziennego zastosowania lub nie znaleźliśmy nic co odpowiada wymaganiom biznesu. Oczywiście nie należy przesadzać i pobieranie takich bibliotek jak is-odd, is-even, is-number itd. może przynieść więcej szkody niż pożytku. W końcu wszyscy wiemy co się stało z biblioteką left-pad

\n\n

Wspomagaj się narzędziami

\n\n

Aktualnie do większości frameworków mamy dostępne dedykowane CLI, które usprawnia proces tworzenia, rozbudowywania oraz ostatecznego budowania aplikacji. W podstawowych sytuacjach nie będziemy mieć potrzeby tworzenia swoich własnych narzędzi i w sumie nie powinniśmy. Oprócz wspomnianych CLI mamy również inne drobne narzędzia do usprawnienia naszej pracy. Aktualnym faworytem od pół roku jest u mnie Prettier, który formatuje nasz kod źródłowy do ustalonego formatu. Jest to zwykła paczka npm i możemy go skonfigurować jako package scripts, dzięki czemu wszyscy będą mieć jednakowo sformatowany kod. Dodatkowo możemy podpiąć sprawdzenie formatowania do naszego CI na githubie. Powoduje to, że nie musimy się zastanawiać nad formatowaniem bo mamy jedną komendę, która wszystko naprawi a nawet jeśli zapomnimy to podczas robienia PR do repozytorium zostanie to sprawdzone.

\n\n

Wyciągnij jak najwięcej z IDE

\n\n

Nowoczesne IDE są prawdziwymi kombajnami, które oferują nam wachlarz różnych funkcjonalności. Początkowo ciężko jest się połapać w tych wszystkich skrótach klawiszowych, możliwych konfiguracji czy morzu wtyczek i rozszerzeń. Warto obserwować swoją pracę by zauważyć co najczęściej musimy zrobić i czy da się to w pewien sposób usprawnić. Może się to odbyć na wiele sposobów: poznanie odpowiednich skrótów klawiszowych, odpowiednia konfiguracji środowiska czy też dodanie własnych szablonów plików (pisałem o tym w dwóch wpisach - osobno dla Intelij oraz Visual Studio Code). Sprawne poruszanie się po środowisku w którym spędzamy większość dnia potrafi oszędzić sporo czasu.

\n\n

Może się wydawać, że trzeba strasznie dużo robić żeby być leniwym programistą. Jednak po opanowaniu wszystkich elementów okazuje się, że mamy dużo więcej czasu na inne czynności. Czy warto w takim razie na początku poświęcić czas na udoskonalenie ich? Według mnie warto inwestować we wszystko co w przysłości da widoczne rezultaty. A wy co o tym sądzicie? A może macie własne sposoby na oszczędzanie czasu i bycie leniwym?

2018-04-10 06:15:19 programisto-badz-leniwy ckhxjb6o0000yi3umb3hg09jv 2018-04-10 06:15:19 2018-04-10 06:15:19 -cjg39dxc0010ri3umdw6la3sj Open Graph dla bloggerów https://fsgeek.pl/post/open-graph-dla-bloggerow/

Zauważyliście, że jak udostępniacie post z Medium albo innego bloga to po wklejeniu tworzy się taka łada karta, która zawiera tytuł, link, zdjęcie? I nie musieliście nic robić by cos takiego powstało? Jeśli nie wiecie jak coś takiego uzyskać na swoim blogu lub jesteście ciekawi jak to osiągnąć to zapraszam do dalszego czytania.

\n\n

\n\n

Czym jest Open Graph?

\n\n

Jest to protokół, który pozwala nam osiągnąć to co wspomniałem we wstępie czyli ładnie sformatowane linki idealnie pasujace do naszej tablicy na facebooku. Został stworzony 2 kwietnia 2010 roku przez Facebook’a jako sposób na prezentację treści na ich platformie. Wykorzystuje prosty mechanizm meta tagów w nagłówku strony, które opisują to co znajduje się na stronie i pozwalają na ładne sformatowanie tych treści.

\n\n

Aby umieścić taki meta-tag na naszej stronie musimy w sekcji head umieścić następującą linijkę

\n\n
<meta property="klucz" content="wartość" />
\n\n

gdzie klucz będzie jedną z własności opisanych poniżej.

\n\n

Podstawowe tagi

\n\n

Open Graph jest uniwersalnym formatem który pasuje do wielu rożnych typów stron jednak ja się skupię na tych własnościach, które mogą być przydatne jeśli piszecie bloga.

\n\n

Istnieje 4 podstawowe tagi, które powinny istnieć dla każdej strony:

\n\n
    \n
  • og:title - tytuł naszej strony
    • \n
  • og:type - typ strony
    • \n
  • og:image - adres pod którym znajduje się obrazek, który chcemy wyświetlić
    • \n
  • og:url - url do strony
    • \n
\n\n

Jeśli mamy bloga to w polu type powinniśmy wpisywać dwie wartości: article - dla strony gdzie jest post oraz website dla innych.

\n\n

Oprócz tych 4 tagów dla każdego typu oprócz website zostały zdefiniowane tagi pomocnicze, które precyzują pewne elementy naszego wybranego typu. W przypadku article mamy dostęp do następujących dodatkowych własności:

\n\n
    \n
  • article:published_time - data opublikowania artykułu
    • \n
  • article:modified_time - data ostatniej modyfikacji
    • \n
  • article:expiration_time- data po której artykuł jest już nieaktualny
    • \n
  • article:author - autor artukułu
    • \n
  • article:section - sekcja do której chcemy przypisać artykuł np.: Frontend
    • \n
  • article:tag - tag jakim opisujemy nasz artykuł
    • \n
\n\n

W przypadku ostatniej własności możemy podać więcej niż jeden meta-tag z kolejnymi wartościami.

\n\n
<meta property="article:tag" content="tag1" />\n<meta property="article:tag" content="tag2" />\n<meta property="article:tag" content="tag3" />
\n\n

Tagi dla Twittera

\n\n

Oczywiście Facebook nie jest jedyną platformą gdzie można się dzielić swoimi wpisami więc i istnieją specjalne właśności Open Graph dla nich, między innymi dla Twittera. Mamy tutaj grupę 5 tagów:

\n\n
    \n
  • twitter:card - tutaj można wpisać jedną wartość z summary, summary_large_image, app, player
    • \n
  • twitter:site - nazwa profilu z Twittera
    • \n
  • twitter:title - tytuł karty
    • \n
  • twitter:description - opis karty
    • \n
  • twitter:image - link do obrazka, który będzie umieszczony w karcie
    • \n
\n\n

Dzięki temu po wklejeniu zwykłego linka zostanie on zamieniony w dużo ładniejszą formę:

\n\n

twitter card

\n\n

Jak testować

\n\n

Na sam koniec warto jeszcze wspomnieć o tym jak testować open graph na naszej stronie by mieć pewność, że wszystko poprawnie umieściliśmy i jest czytane tak jak chcemy. Do ogólnego sprawdzenia można użyć opengraphcheck, jednak sprawdza on tylko podstawowe tagi. Dużo lepszym pomysłem jest wykorzystanie narzędzi od Facebook’a oraz Twittera, które sprawdzają wszystkie tagi ale również wyświetlają efekt graficzny dla naszego linku. Warto wykorzystać jeśli widzimy, że coś nie działa według naszego pomysłu.

2018-04-17 06:00:00 open-graph-dla-bloggerow ckhxjb6o0000yi3umb3hg09jv 2018-04-17 06:00:00 2018-04-17 06:00:00 -cjgd9nbhc0119i3um4yj3dxy7 WebAssembly - jak zacząć? https://fsgeek.pl/post/webassembly-jak-zaczac/

Jedną z technologii, która będzie się rozwijać w tym roku jest WebAssembly. Póki co pojawia się dosyć nieśmiało ale coraz częściej. Według mnie wprowadzi małą rewolucję w sposobie jaki piszemy aplikacje internetowe w przyszłości. Dziś postanowiłem sprawdzić jak i czy możemy się nim już teraz pobawić.

\n\n

\n\n

Co to jest WebAssembly?

\n\n

Zanim zaczniemy coś w tym robić warto wiedzieć co to w ogóle jest. WebAssembly jest nowym sposobem pisania aplikacji dla współczesnych przeglądarek internetowych. Jest to otwarty standard rozwijany przez WebAssembly Working Group. Wśród jego członków są przedstawiciele największych firm technologicznych takich jak Apple, Google, Microsoft, Mozilla co pozwala mieć nadzieję, że nie będzie problemów z kompatybilnością nowego standardu z przeglądarkami. Już teraz jest z tym nieźle ponieważ według strony CanIUse wszyscy główni gracze pozwalają na uruchomienie kodu WebAssembly.

\n\n

caniuse

\n\n

WebAssembly albo jak się go w skrócie określa Wasm został napisany nie tyle jako nowy język, którego będzie się trzeba uczyć ale jako sposób kompilacji istniejących programów w C, C++, Rust tak aby dało się je odpalić w przeglądarce z ich natywną szybkością. Taki gotowy moduł jesteśmy w stanie zaimportować do przeglądarki w kodzie Javascript i następnie wykorzystywać natywnie napisane funkcje. Brzmi super, co nie?

\n\n

Jak rozpocząć z tym pracę?

\n\n

O teorii najczęściej mówi się łatwo to z praktyką jest problem. Zasada działania WebAssembly jest banalnie prosta: bierzemy kawałek kodu w C, kompilujemy go do pliku *.wasm i importujemy w kodzie Javascript. Jednak jak się okazuje diabeł tkwi w szczegółach. Zacznijmy w takim razie od początku. Tak jak napisanie prostego kodu w C/C++ nie jest problematyczne to jak go skompilować do odpowiedniego pliku? Póki co współczesne kompilatory nie pozwalają na kompilację do tego formatu (chyba, że coś ominąłem to będę wdzięczny za wskazanie takiego co to potrafi :) ) ale mamy inne narzędzia. Jedną z opcji jest wykorzystanie narzędzia online, które pozwala napisać kod w C/C++, następnie skompilowanie i ściągnięcie właściwego pliku *.wasm - jeśli was to zainteresowało to znajdziecie go tutaj.

\n\n

Drugą opcją jest wykorzystanie odpowiedniego narzędzia na systemie w którym pracujemy. Aktualnie polecanym jest emsdk, który jest polecany na stronie poświęceonej Webassembly i pozwala na kompilację z lini poleceń pliku *.c i *.cpp do *.wasm. Nie będę zanudzał was sposobem instalacji tego skryptu jako, że wszystko jest fajnie opisane na githubie. Przejdzemy za to do tego co tygryski lubią najbardziej czyli kodu.

\n\n

Pierwsza funkcja

\n\n

Czas coś napisać w końcu. Na sam początek prosta funkcja która zwraca wynik dodania do siebie dwóch liczb. Jednym słowem banał

\n\n
int add(int a, int b){\n\treturn a+b;\n}
\n\n

Żeby coś takiego skompilować musimy w konsoli wpisać takie polecenie \v\v\n

em++ helloworld.cpp -Os -s WASM=1 -s SIDE_MODULE=1 -s ONLY_MY_CODE=1 -o helloworld.wasm

\n\n

Dzięki takiemu dobraniu przełączników powstaje minimalny plik *.wasm który zawiera tylko to co jest potrzebne. Warto wykorzystywać narzędzie wasm2wat, które pozwala podejrzeć zawartość tego pliku w postaci tekstowej. Dla mojego pliku wygląda on następująco

\n\n

wasm2wat

\n\n

Szczególnie warto zerknąć na linie 4 i 5 ponieważ za chwilę będą nam potrzebne.

\n\n

Teraz wszystko co trzeba zrobić to zaimportować ten plik w naszym kodzie Javascript. Aktualnie wymaga to trochę kodu ale są plany by w przyszłości można było importować te modułu przy wykorzystaniu taga <script type='module'> (a i mam nadzieję że zwykłe import … from.. będzie działać). Aktualnie by wywołać naszą funkcję z C w przeglądarce musimy wykonać parę kroków:

\n\n
    \n
  • bierzemy plik *.wasm i wsadzamy go do ArrayBuffer
    • \n
  • taką tablicę następnie kompilujemy do WebAssembly.Module()
    • \n
  • i na sam koniec tworzymy instancje takiego modułu przekazując tam odpowiedni obiekt imports i otrzymując w zamian wyeksportowane funkcje
    • \n
\n\n

Opis trochę długi ale w kodzie nie wygląda to najgorzej

\n\n
const imports = {\n    env: {\n        memoryBase:0,\n    }\n  };\n\nfunction loadWebAssembly(fileName) {\n  return fetch(fileName)\n  .then(response => response.arrayBuffer())\n  .then(bytes => WebAssembly.compile(bytes)\n  .then(m => new WebAssembly.Instance(m, imports)))\n};\n\n\n\nloadWebAssembly('helloworld.wasm')\n  .then(instance => {\n    add = instance.exports.__Z3addii;\n\n    console.log(add(5,2)); // 7\n});
\n\n

Parę słów wyjaśnienia co do kodu. Obiekt imports został stworzony na podstawie tego co było w pliku *.wat w linii 4. Również dziwna jest nazwa funkcji, którą pobieram z obiektu exports. Dostała dodatkowy prefix i sufix do nazwy którą nadaliśmy w pliku *.cpp. To jaką nazwę dostanie moja funkcja sprawdziłem w linii 5.

\n\n

Hello World

\n\n

Dlaczego jednak nie zrobiłem, jak to jest w zwyczaju, funkcji, która zwróci napis Hello World. Ponieważ okazuje się, ze jest to troszkę bardziej skomplikowane. WebAssembly posługuje się typami liczbowymi stało- i zmiennopozycyjnymi. Oznacza to, że nie możemy bezpośrednio z funkcji zwrócić stringa ale nie jest to też niemożliwe. Podobnie jak wyżej stwórzmy najpierw funkcję w C++, która zwróci nam nasz upragniony napis

\n\n
const char * hello() {\n  return "Hello World";\n}
\n\n

Po skompilowaniu tego identycznym wyrażeniem co powyżej warto sprawdzić jak wygląda w pliku *.wat.

\n\n

string-wasm2wat

\n\n

Ważne by zauważyć, że w linii 5 pojawił się wpis dotyczący potrzeby umieszczenia w obiekcie imports elementu memory. Okazuje się że stringi w WebAssembly są zwracane w pamięci. Więc po co nam wyeksportowana funkcja __Z5hellov? Ponieważ funkcja w tym przypadku zwraca indeks początku naszego napisu w pamięci. Od tego momentu musimy przechodzić po tablicy aż napotkamy element równy 0 czyli NULL w tablicy ASCII. Również jeśli mamy kilka funkcji które zwracają stringi będą one umieszczone po kolei w pamięci odzielone od siebie pojedynczą wartością 0.

\n\n
const imports = {\n    env: {\n        memoryBase:0,\n        memory: new WebAssembly.Memory({\n          initial: 256\n        }),\n    }\n  };\n\n...\n\n loadWebAssembly('helloworld.wasm')\n  .then(instance => {\n    hello = instance.exports.__Z5hellov;\n    const memoryArr = new Uint8Array(imports.env.memory.buffer)\n    \n    let i = hello();\n    let response = '';\n    while(memoryArr[i]){\n      response = response + String.fromCharCode( memoryArr[i] )\n      i++;\n    }\n\n    console.log(response); // Hello World\n});
\n\n

Przykład jak można wyciągnąć nasz napis z pamięci jest pokazany na dole kodu. Najpierw zamieniam obszar pamięci w tablicę po której mogę następnie iterować. Dodatkowo wykorzystuję metodę fromCharCode żeby zamienić kod ASCII na odpowiedni string.

\n\n

Trzeba przyznać, że wygląda to obiecująco. Jeśli będzie się cały czas rozwijać to może się okazać że za chwilę będziemy ściągać paczki z npm, które będą mieć moduły w WebAssembly. Jest nadzieja, że będzie to działało szybciej niż standardowy JS. Oczywiście nie zastąpi to Javascriptu ale może zmienić sposób w jaki go wykorzystujemy. Przyszłość zapowiada się ciekawie.

2018-04-24 06:05:00 webassembly-jak-zaczac ckhxjb6o0000yi3umb3hg09jv 2018-04-24 06:05:00 2018-04-24 06:05:00 -cjgq61fc0011ri3umaokm9f43 Bądź produktywny - Prettier https://fsgeek.pl/post/badz-produktywny-prettier/

Jedna z rzeczy która potrafi zająć czas podczas programowania to kijowe formatowanie. Każdy ma swój ulubiony styl, niektórzy wolą spacje nad tabulacją, natomiast inni wolą podwójny cudzysłów od pojedynczego. Ale pracując razem w projekcie warto wystosować wspólny styl i używać narzędzi, które będą tego pilnowały. Ja polecam narzędzie o nazwie Prettier

\n\n

\n\n

Co to jest Prettier?

\n\n

Prettier jest narzędziem, które usprawnia proces tworzenia oprogramowania poprzez wprowadzenie jednolitego formatowania kodu. Usuwa on oryginalne formatowanie plików i wprowadza tam zdefiniowane przez nas reguły.

\n\n

Znalazłem to narzędzie jakieś pół roku temu i wprowadziło ono pewien porządek w kodzie nad którym pracowaliśmy z kolegą. Zniknęły problemy z formatowaniem, które wynikały z pominięcia jakiegoś pliku, drobnych różnic w konfiguracji czy czasami innych preferencji.

\n\n

Dzięki wykorzystaniu Prettiera trochę też zaoszczędziliśmy na czasie. Nie było potrzeby skupiać się na formatowaniu podczas pisania kodu - teraz wystarcza jedna komenda. Dodatkowo podczas przeglądania PR nie ma potrzeby zwracania uwagi na styl - Prettiera da się prosto podpiąć pod CI, żeby samo sprawdziło czy kod spełnia wymogi formatowania a jeśli nie to poinformowało nas o tym.

\n\n

Korzystanie z niego jest banalnie proste tak samo jak instalacja. Możemy go zainstalować globalnie lub tylko lokalnie dla projektu co według mnie jest lepszym rozwiązaniem.

\n\n
yarn add prettier
\n\n

Opcje formatowania

\n\n

Żeby móc formatować tekst warto wiedzieć jakie mamy opcje. A mamy ich całkiem sporo:

\n\n
    \n
  • Print Width - ilość znaków w pojedynczej linii. Domyślnie jest 80 ale możemy zmienić na inną wartość liczbową --print-width 100
    • \n
  • Tab Width - liczba spacji, które są umieszczane na każdym kolejnym poziomie zagnieżdżenia. Domyślnie 2 ale można wstawić inną wartość liczbową --tab-width 4
    • \n
  • Tabs - domyślnie do przesuwania kolejnych zagnieżdżeń są wstawiane spacje. Żeby zmienić trzeba wykorzystać flagę --use-tabs
    • \n
  • Semicolons - domyślnie na końcu każdej linii jest dodawany średnik. Jeśli damy wartość --no-semi to średnik zostanie umieszczony na początku każdej linii gdzie jego brak mógłby powodować błędy
    • \n
  • Quotes - czy chcemy używać pojedynczego cudzysłowu zamiast podwójnego. Domyślnie są podwójny cudzysłów - do zmiany wystarczy dać --single-quote
    • \n
  • Trailing Commas - opcja, która ustawia czy mają być dodawane tzw.trailing commas tam gdzie to możliwe w przypadku struktury mającej więcej niż jedną linię. Mamy tutaj 3 opcje: none - domyślna, nie ustawia trailing commas, es5 - ustawia tylko tam gdzie jest to poprawne dla standardu ES5 (obiekty, tablice), all - wszędzie gdzie to możliwe (np.: argumenty funkcji). Ustawiamy przy pomocy flagi -- trailing-comma np.: --trailing-comma all
    • \n
  • Bracket Spacing - ustawia czy po otwarciu i przed zamknięciem nawiasu w obiekcie mają się pojawić spacje. Domyślnie są wstawiane spacje ale można zmienić przy pomocy --no-bracket-spacing
    • \n
  • JSX Bracekts - domyślnie gdy korzystamy z Prettiera umieszcza on znak > zamykający element JSX w nowej linii. Jeśli chcemy by nie był przenoszony do następnej linii to możemy użyć flagi --jsx-bracket-same-line
    • \n
  • Arrow Function Parentheses - opcja dotyczy funkcjonalności z ES6 czyli arrow functions. W Prettierze możemy ustawić tutaj 2 wartości: avoid - kiedy to tylko możliwe nawiasy będą pominięte dla argumentów, always - nawiasy będą umieszczane zawsze. Domyślnie jest wartość avoid a możemy ją zmienić przy pomocy --arrow-parens always
    • \n
  • Require Pragma - ciekawa opcja na sam koniec jeśli mamy bardzo dużo plików i nie chcemy wszystkich formatować od razu to możemy użyć flagi --require-pragma. Wtedy zostaną sformatowane tylko pliki które mają na górze specjalny komentarz \v
    • \n
\n\n
/**\n * @prettier\n */
\n\n

Wszystkie inne pliki zostaną pomięte.

\n\n

Jak z niego korzystać

\n\n

Z Prettiera korzysta się przy pomocy CLI i nie jest to na szczęście skomplikowane. Najprostszym sposobem jest użycie opcji formatowania o których wspomniałem wyżej bezpośrednio w poleceniu np.:\n

prettier --print-width 100 --use-tabs --single-quote --write "*.js"

\n\n

Na samym końcu ważne jest przełącznik --write, który powoduje nadpisanie formatowania w pliku na ten zdefiniowany przez nas. Oczywiście jeśli użyjemy dużo przełączników to polecenie będzie bardzo długie. Wtedy możemy wykorzystać plik .prettierrc w którym umieścimy naszą konfigurację\n

{\n\t"printWidth": 100,\n\t"useTabs": true,\n\t"singleQuote": true\n}

\n\n

Wtedy wystarczy tylko krótkie polecenie

\n\n
prettier --write "*.js"
\n\n

Oprócz samego nadpisywania plików warte wykorzystania jest również przełącznik --debug-check. Sprawdza on wtedy wszystkie pliki i jeśli jakiś jest sformatowany niezgodnie z naszymi zasadami to wyświetli błąd. Sprawdza się to idealnie by sprawdzić czy nasz PR jest poprawnie sformatowany zanim wciągniemy go do głównego brancha.

2018-05-03 06:45:00 badz-produktywny-prettier ckhxjb6o0000yi3umb3hg09jv 2018-05-03 06:45:00 2018-05-03 06:45:00 -cjgxaiyqo011xi3umh8z14ib2 MySQL w Node.js https://fsgeek.pl/post/node-mysql/

Backend wiele ważnych zadań do wykonania ale chyba najważniejszym zadaniem jest zapisywanie i wyciąganie informacji z bazy danych. Nieważne czy jest to zwykła baza SQL, Redis czy Elasticsearch potrzebujemy mieć miejsce do zapisywania informacji by ich nie stracić i móc wykorzystać póżniej. W każdym języku mamy dedykowane biblioteki, które pomagają nam w tym. Nie inaczej jest w Node.js, o którym dzisiaj piszę.

\n\n

\n\n

Baza danych MySQL

\n\n

Na początek wybrałem chyba najpopularniejszą bazę danych od której chyba każdy zaczyna. Wspomina się o niej w technikum o profliu informatycznym czy też na studiach więc myślę, że większość programistów od niej zaczynała a już na pewno coś robiła. Aby zacząć najprościej jest pobrać instalator z tej strony. Zainstaluje on lokalny serwer MySQL oraz narzędzie Workbench, które jest takim lepszym PHPMyAdmin ;). Co prawda warto umieć poruszać się w lini poleceń po bazie danych to czasami miło jest przeglądać bazę w takim narzędziu.

\n\n

Zanim przejdziemy już do samego Node’a to chciałbym zwrócić uwagę na jedną opcję podczas instalacji serwera. Jak dojdziemy do opcji Authenticathion Method proponuję wybrać opcję Use Legacy Authentication Method

\n\n

legacy-authentication

\n\n

Jest to spowodowane tym że biblioteka, którą mam zamiar użyć jeszcze nie wspiera nowej metody autentykacji. Już się pojawił PR, który to naprawia więc niedługo będzie można się przełączyć.

\n\n

Połączenie z bazą danych w Nodzie

\n\n

Jak wspomniałem chwilę temu będziemy wykorzystywać osobną bibliotekę do połączenia z bazą danych. Aby ją zainstalować wystarczy jedna komenda w konsoli:

\n\n
yarn add mysql
\n\n

Teraz pierwsza rzecz od jakiej musimy zacząć to zaimportowanie odpowiedniej biblioteki w naszym pliku *.js oraz stworzenie konfiguracji dla naszego połączenia z bazą. Konfiguracja wygląda identycznie do tego co można spotkać w innych językach/frameworkach backendowych czyli musimy podać: adres bazy danych, użytkownika, hasła i do jakiej bazy się podpinamy. Ja na potrzeby konfiguracji stworzyłem zwykły obiekt:

\n\n
const config = {\n    host     : 'localhost',\n    user     : 'root',\n    password : '',\n    database : 'playground',\n}\n\nconst connection = mysql.createConnection(config);
\n\n

Mając konfigurację możemy stworzyć zmienną, która będzie nam służyła do komunikacji z bazą danych.\nPolecany sposób to jest ręczne tworzenie połączenia i potem je zamykanie czyli wygląda to następująco:

\n\n
connection.connect( err => {\n    if(err) throw err;\n});\n\napp.all('/', (req, res)=>{\n    connection.query("Select * from town", (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n    \n})\n\nconnection.end();
\n\n

Wtedy rodzielamy w samo połączenie od query następuje później, co może ułatwić szukanie błędów w razie jakiś problemów. Ale jeśli nie chcemy tak robić to możemy opuścić metodę connect ponieważ przy tworzeniu query połączenie i tak zostanie nawiązane więc kod powyżej można skrócić do następującego:

\n\n
app.all('/', (req, res)=>{\n    connection.query("Select * from town", (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n    \n})
\n\n

Metoda query przyjmuje dwa parametry: pierwszy to zapytanie jakie chcemy skierować do naszej bazy, druga to funkcja która zostanie wywołana po zakończeniu przetwarzania naszego zapytania. Ważne jest by pamiętać że funkcja zostanie wywołana niezależnie czy zapytanie zakończy się sukcesem i dostaniemy wyniki czy też wystąpi błąd w trakcie.

\n\n

Jeśli wszystko się udało to w zmiennej result będzie obiekt z wynikiem naszego zapytania, którym potem możemy dalej obsługiwać. Ja wykorzystałem framewrok express by zwrócić to w postaci JSON’a do przegladarki

\n\n

mysql-query

\n\n

Przekazywanie parametrów do query

\n\n

Oczywiście sytuacja gdzie mamy takiego prostego selecta zdarza się mega rzadko. Dużo częściej potrzebujemy bardziej zaawansowane kwerendy. Przykładem minimalnie trudniejszej kwerendy jest taka gdzie potrzebujemy wyciągnąć jeden rekord na podstawie jakiś kryteriów. Bardzo często jest to już wykorzystywane np.: przy logowaniu gdy potrzebujemy sprawdzić czy użytkownik wpisał poprawne hasło dla loginu. Pierwsza myśl jaka przyjdzie do głowy to jest użycie interpolacji stringa by wpisać odpowiednią wartość do zapytania. Coś takiego

\n\n
app.all('/:id', (req, res)=>{\n    connection.query(`Select * from town where idTown=${req.params.id}`, (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n    \n})
\n\n

Oczywiście tak jak tutaj to w niczym nie szkodzi tak NIGDY tego nie róbcie. Wystawiacie się w ten sposób na SQL Injection. Idealnym przykładem jest historyjka z xkcd

\n\n

sql-injection

\n\n

Dużo lepiej jest skorzystać z funkcji, które escapują nam to co wprowadził nasz użytkownik tak by nie zaszła sytuacja jak na obrazku. Mamy dwie opcje jak temu możemy zapobiec. Pierwsza to wykorzystanie metody escape

\n\n
app.all('/:id', (req, res)=>{\n    connection.query(`Select * from town where idTown=${connection.escape(req.params.id)}`, (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n    \n})
\n\n

Druga opcja to wykorzystanie znaków ? tam gdzie chcemy umieścić nasze dane - zostaną one automatycznie wyescepowane.

\n\n
app.all('/:id', (req, res)=>{\n    connection.query(`Select * from town where idTown= ?`, [req.params.id], (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n    \n})
\n\n

Dodatkowo przy takim wykorzystaniu takiego sposobu na escepowanie możemy w prosty sposób dodawać nowe rekordy do tabeli przekazując odpowiednio spreparowany obiekt.

\n\n
const newTown = {\n    Name: 'NewTown',\n    InhabitantsNb: 12345\n};\n\napp.all('/insert/town', (req, res)=>{ \n    const a = connection.query('Insert into town set ?', newTown, (err, result, fields)=>{\n        if (err) throw err;\n        res.setHeader('Content-Type', 'application/json');\n        res.send(JSON.stringify(result));\n    });\n})
\n\n

Obiekt musi mieć pola o identycznych nazwach jak w tabeli. Dzięki temu to zapytanie będzie wyglądało w ten sposób:

\n\n
Insert into town set `Name` = 'NewTown', `InhabitantsNb` = 12345
\n\n

Jak już jesteśmy przy wstawianiu nowych rekordów to gdy to zapytanie się uda to również dostaniemy obiekt w zmiennej. Co prawda nie będzie to nowowstawiony rekord ale informacje, które mogą być przydatne np.: id nowego rekordu. Cały obiekt prezentuje się następująco:

\n\n

mysql-query

\n\n

Trochę tego wyszło ale nie jest to skomplikowane i w ciągu 1h jesteśmy w stanie swobodnie poruszać się w tej bibliotece i komunikować się z bazą danych. Oczywiście na MySQL się świat nie kończy i tak jak wspominałem istnieje wiele innych rozwiązań, które pozwalają na przechowywanie danych. Jest coś o czym byście chcieli przeczytać? Dajcie znać w komentarzach ;)

2018-05-08 06:25:00 mysql-w-nodejs ckhxjb6o0000yi3umb3hg09jv 2018-05-08 06:25:00 2018-05-08 06:25:00 -cjh8ndbuo012ai3ume0bbe78q CSS Transform https://fsgeek.pl/post/css-transform/

Jak wspominałem we wpisie dotyczącym animacji (jeśli go czytaliscie to zapraszam tutaj) podczas tworzenia jej poszczególnych klatek możemy przekształcać animowany obiekt. Poruszać go, zmieniać rozmiar, kształt czy też obrót. Wszytsko to możemy osiągnąć przy pomocy właśności transform w CSS

\n\n

\n\n

CSS transform

\n\n

Oczywiście sama właściwosć sama nic nie zrobi. Wszystko zależy od tego jakie podamy wartości a do wyboru mamy 5 grup przekształceń:

\n\n
    \n
  • Translate
    • \n
  • Scale
    • \n
  • Rotate
    • \n
  • Skew
    • \n
  • Matrix
    • \n
\n\n

Wszystkie przekształcenia mają swoją wersję zarówno dla prostego 2D, gdzie mamy tylko dwie osie X i Y oraz 3D gdzie dochodzi oś Z. Dodatkowo każda grupa ma wersje, gdzie możemy modyfikować element w wybranej osi lub we wszystkich naraz. Pierwsze 4 wartości są proste i sama nazwa wskazuje co robią, natomiast przy wartości matrix, którą omówię na końcu, warto znać podstawową matematykę.

\n\n

Transform translate

\n\n

Transpozycja elementu jest najbardziej podstawowym przekształceniem w graficie. Polega na zmianie pozycji obiektu w przestrzeni. Tutaj warto wspomnieć jak jest skonstruowany układ odniesienia ponieważ wygląda trochę inaczej od tego co znamy ze szkoły a mianowicie jest trochę odwrócony - punkt (0,0) jest w lewym górnym rogu, oś X rośnie od lewej do prawej, natomiast Y rośnie od góry do doły. Mając to na uwadze możemy przesuwać nasz element przy pomocy kilku własności:

\n\n
    \n
  • Translate(x,y) - przesuwa obiekt o x w osi poziomej i y w osi pionowej, za x i y trzeba podać wartość razem z jednostką
    • \n
  • Translate3d(x,y,z) - przesuwamy obiekt nie tylko wzdłuż osi X i Y ale również Z, która prowadzi w naszą stronę
    • \n
  • translateX(x), translateY(y), translateZ(z) - tutaj przesuwamy tylko wzdłuż jednej wybranej osi, pozostałe osie nie zmieniają wartości
    • \n
\n\n

See the Pen Transform - translate by Aleksander (@Feridum) on CodePen.

\n

\n\n

Warte zauważenia jest mały kwadrat po prawej stronie. Ma on dokładnie takie same wymiary jak pozostałe ale dzięki wykorzystaniu perspective(500px) została utworzona perspektywa a sam kwadrat został przesuniety 300 pikseli do tyłu co sprawia wrażenie mniejszego.

\n\n

Scale

\n\n

Tutaj też sytuacja jest prosta ponieważ scale służy nam do zmiany wymiarów naszego elementu. Podobnie jak poprzednio mamy 5 dostępnych własności:

\n\n
    \n
  • Scale(x,y) - zmienia wymiary w dwóch osiach X i Y, za x i y musimy podać liczbę
    • \n
  • Scale3d(x,y,z) - skalowanie odbywa się również w osi Z
    • \n
  • scaleX(x), scaleY(y), scaleZ(z) - możemy ustawić skalowanie tylko w jednej osi
    • \n
\n\n

See the Pen Transform - scale by Aleksander (@Feridum) on CodePen.

\n

\n\n

W przypadku scaleZ ma wpływ na położenie obiektu na osi Z. Położenie na tej osi jest wyliczane na podstawie translateZ przemnożonego przez scaleZ. Należy tylko pamiętać, że skala musi być zdefiniowana przed transpozycją by zadziałała.

\n\n
\ttransform: perspective(500px) translateZ(10px) scaleZ(-30); //nie zadziała\n\ttransform: perspective(500px) scaleZ(-30) translateZ(10px); //zadziała
\n\n

Rotate

\n\n

Pierwsza właściwość, która zmienia sposób prezentacji obiektu. Do tej pory, dla rzutu 2D byliśmy w stanie osiągnąć powyższe własności w inny sposób, jednak dla obrotu musimy już z tego skorzystać. Aby obrócić obiekt możemy wykorzystać jedną z następujących funkcji:

\n\n
    \n
  • rotate(x) - jedyna właściwość dostępna w przypadku korzystania z widoku 2D, obraca obiekt o zadany kąt np.: 20deg - w przypadku pozytywnej wartości obrót będzie zgodnie ze wskazówkami zegara przy wartości negatywnej na odwrót
    • \n
  • rotateX(x), rotateY(y), rotateZ(z) - definiujemy obrót wokół danej osi o dany kąt. Warto wspomnieć, że obrót wokół osi Z daje taki sam efekt jak rotate w widoku 2D
    • \n
  • rotate3d(x,y,z,angle) - najciekawsza funkcja pozwala wybrać wzdłuż jakich osi ma następować obrót obiektu, dzięki czemu można osiągnąć ciekawe efekty.\n
    • \n
\n\n

Warto wspomnieć że rotate3d może być stosowany jako alternatywa dla obrotu wokół pojedynczych osi:

\n\n
    \n
  • rotateX(angle) === rotate3d(1,0,0,angle)
    • \n
  • rotateY(angle) === rotate3d(0,1,0,angle)
    • \n
  • rotateZ(angle) === rotate3d(0,0,1,angle)
    • \n
\n\n

See the Pen Transform - rotate by Aleksander (@Feridum) on CodePen.

\n

\n\n

Na przykładach z codepen warto zwrócić uwagę na zielone kwadraty a szczególnie na dwa pierwsze. Każdy z nich jest obrócony o dokładnie taką samą wartość ale zmienił się punkt wokół którego jest obracany. W pierwszym przypadku jest ustawiony domyślnie w środku kwadratu, natomiast w lekko zielonym ustawiłem go przy pomocy właściwości transform-origin: 0 0 na jego lewy górny róg.

\n\n

Dodatkowo w przypadku obrotu widać jak ważne jest w przypadku obiektów 3d perspektywa. Oba niebieskie kwadraty ją obrócone wokół osi X o ten sam kąt ale w drugi kwadrat został pozbawiony perspektywy co spowodowało utworzenie tak naprawdę jego rzutu prostokątnego na płaszczyznę.

\n\n

Skew

\n\n

Do tej pory właściwości pozwalały na zmianę parametrów kształtu - czyli rozmiar, obrót czy umiejscowienie w przestrzeni. Skew natomiast pozwala na zmianę kształtu obiektu poprzez przechylenie go o dany kąt wzdłuż danej osi. Jest to także wyjątkowa właściwość ponieważ działa tylko dla dwóch osi - X i Y:

\n\n
    \n
  • Skew(x,y) - pochylamy kształt wzdłuż osi X i Y o podany wartość, która musi być kątem np.: 20deg
    • \n
  • skewX(x), skew(y) - pochylamy wzdłuż jednej wybranej osi
    • \n
\n\n

See the Pen Transform - skew by Aleksander (@Feridum) on CodePen.

\n

\n\n

Matrix

\n\n

No i na koniec zostawiłem coś co graficy lubią najbardziej czyli macierz transformacji. W CSS mamy do dyspozycji dwie macierze:

\n\n
    \n
  • Matrix - dla przekształceń 2D
    • \n
  • Matrix3d - dla przekształceń 3D
    • \n
\n\n

Zasadę działania postaram się opisać dla widoku 2D ale będzie to można łatwo przenieść na widok 3D. Oczywiście by to zrozumieć warto mieć podstawowe pojęcie o matematyce a szczególnie o operacjach na macierzy. Własność matrix ma następującą postać matrix(a,b,c,d,tx,ty) co można przestawić w formie macierzy w następujący sposób

\n\n

\\begin{vmatrix}\n a & c & tx \\newline\n b & d & ty \\newline\n \\end{vmatrix}

\n\n

Wpisując odpowiednie wartości pod zmienne możemy zmieniać sposób wyświetlania naszego obiektu. Zaraz pokażę parę podstawowych wartości dla macierzy w przykładach ale warto wiedzieć jak są obliczane wartości dla nowego obiektu.

\n\n

Załóżmy, że mamy kwadrat o szerokości 80px, wysokości 80px i jest umieszczony w lewym górnym rogu ekranu. W związku z tym jego wierzchołki mają następujące współrzędne: (0,0) (80,0) (80, 80) i (0,80). Oczywiście stanie się tak jeśli dodatkowo dodamy transform-origin: 0 0 . Inaczej nasze wierzchołki mają inne współrzędne i obiekt po transformacji będzie wyglądał inaczej.

\n\n

Zaaplikowanie macierzy spowoduje zmianę tych wartości, dzięki czemu powstanie obiekt o innych wymiarach, położeniu lub kształcie. Próbując zmienić obiekt możemy na ślepo próbować wpisywać wartości albo mniej więcej to sobie obliczyć ponieważ nie jest to ciężkie i opiera się na wymnożeniu dwóch macierzy

\n\n

$$\n\\begin{equation}\n\\begin{aligned}\n\\begin{vmatrix}\n a & c & tx \\newline\n b & d & ty \\newline\n 0 & 0 & 1 \\newline\n\\end{vmatrix}
\n\\times
\n\\begin{vmatrix}\n x & \\newline\n y & \\newline\n 1 & \\newline\n\\end{vmatrix} \\\n \\ = \\
\n\\begin{vmatrix}\n new \\ x = a*x + c*y +tx & \\newline\n new \\ y = b*x + d*y +ty & \\newline\n 1 \\newline\n\\end{vmatrix}\n\\end{aligned}\n\\end{equation}\n$$

\n\n

Takie obliczenia musimy zrobić dla każdego wierzchołka osobno. Widząc jak to działa możemy zrobić wszystko to co definiowaliśmy wcześniej:

\n\n

See the Pen Transform - matrix by Aleksander (@Feridum) on CodePen.

\n

\n\n

Oczywiście nie musimy się w to zagłębiać tylko stosować odpowiednie macierze transformacji ale warto czasami wiedzieć jak coś działa pod spodem.

2018-05-16 05:10:00 css-transform ckhxjb6o0000yi3umb3hg09jv 2018-05-16 05:10:00 2018-05-16 05:10:00 cjhejnxc8012ii3umfjp6ci2t Polityka prywatnosci https://fsgeek.pl/polityka-prywatnosci/
    \n

  1. Serwis zbiera w sposób automatyczny tylko informacje zawarte w plikach cookies.

    2. \n\n

  2. Pliki (cookies) są plikami tekstowymi, które przechowywane są w urządzeniu końcowym użytkownika serwisu. Przeznaczone są do korzystania ze stron serwisu. Przede wszystkim zawierają nazwę strony internetowej swojego pochodzenia, swój unikalny numer, czas przechowywania na urządzeniu końcowym.

    3. \n\n

  3. Operator serwisu FSGeek jest podmiotem zamieszczającym na urządzeniu końcowym swojego użytkownika pliki cookies oraz mającym do nich dostęp.

    4. \n\n

  4. Operator serwisu wykorzystuje pliki (cookies) w celu:

    \n\n
      \n
    • przygotowywania statystyk pomagających poznaniu preferencji i zachowań użytkowników, analiza tych statystyk jest anonimowa i umożliwia dostosowanie zawartości i wyglądu serwisu do panujących trendów, statystyki stosuje się też do oceny popularności strony;
      • \n
    5. \n\n

  5. Serwis stosuje dwa zasadnicze rodzaje plików (cookies) - sesyjne i stałe. Pliki sesyjne są tymczasowe, przechowuje się je do momentu opuszczenia strony serwisu (poprzez wejście na inną stronę, wylogowanie lub wyłączenie przeglądarki). Pliki stałe przechowywane są w urządzeniu końcowym użytkownika do czasu ich usunięcia przez użytkownika lub przez czas wynikający z ich ustawień.

    6. \n\n

  6. Użytkownik może w każdej chwili dokonać zmiany ustawień swojej przeglądarki, aby zablokować obsługę plików (cookies) lub każdorazowo uzyskiwać informacje o ich umieszczeniu w swoim urządzeniu. Inne dostępne opcje można sprawdzić w ustawieniach swojej przeglądarki internetowej. Należy pamiętać, że większość przeglądarek domyślnie jest ustawione na akceptację zapisu plików (cookies)w urządzeniu końcowym.

    7. \n\n

  7. Operator Serwisu informuje, że zmiany ustawień w przeglądarce internetowej użytkownika mogą ograniczyć dostęp do niektórych funkcji strony internetowej serwisu.

    8. \n\n

  8. Pliki (cookies) z których korzysta serwis (zamieszczane w urządzeniu końcowym użytkownika) mogą być udostępnione jego partnerom oraz współpracującym z nim reklamodawcą.

    9. \n\n

  9. Informacje dotyczące ustawień przeglądarek internetowych dostępne są w jej menu (pomoc) lub na stronie jej producenta.

    10. \n\n

  10. Bardziej szczegółowe informacje na temat plików (cookies) dostępne są na stronie (ciasteczka.org.pl)

    11. \n
2018-05-20 08:12:53 polityka-prywatnosci ckhxjb6o0000yi3umb3hg09jv 2018-05-20 08:12:53 2018-05-20 08:12:53 cjhinzkyo012oi3um1lwmh6gf TypeORM - pierwsze kroki https://fsgeek.pl/post/typeorm-pierwsze-kroki/

Ostatnio pisałem o tym jak można się połączyć z bazą danych w Node.js(wpis możecie przeczytać tutaj). Jednak w prawdziwych projektach rzadko kiedy korzystamy z takich czystych połączeń, a częściej ze specjalnych bibliotek ORM. Dla Node.js został stworzyny TypeORM o którym dziś napisałem.

\n\n

\n\n

ORM

\n\n

Zanim przejdę do samej biblioteki warto powiedzieć co to jest ten cały ORM dla osób, które pierwszy raz się z tym stykają. ORM czyli Object-Relational Mapping (po polsku ma wdzięczną nazwę Mapowanie Obiektowo-Relacyjne) jest sposobem w jaki możemy przekształcić nasz model danych na to co mamy w bazie danych, dzięki czemu podczas pracy w naszym systemie możemy niejako zapomnieć o bazie danych i korzystać tylko z naszych klas. Jest to bardzo popularne rozwiązanie i znajdziemy biblioteki ORM w każdym języku. TypeORM jest wzorowany między innymi na Hibernate z Javy i Doctrine z PHP, więc jeśli coś w nich kiedyś robiliście to poczujecie się jak w domu. A dla całej reszty przejdziemy po ważniejszych elementach

\n\n

Instalacja i pierwsze kroki w TypeORM

\n\n

Osobiście jestem fanem wszystkich narzędzi CLI, ponieważ ułatwiają pracę i pozwalają zaoszczędzić czas na nudnych elementach naszej pracy. O ile można korzystać z takich narzędzi to robię z nich użytek i również do tego zachęcam. TypeORM na szczęście też ma taką możliwość i możemy z niej skorzystać instalując globalnie bibliotekę

\n\n
yarn global add typeorm
\n\n

Teraz mając narzędzie możemy stworzyć nowy projekt za pomocą jednego polecenia

\n\n
typeorm init --name typeorm --database mysql --express
\n\n

Ja wybrałem bazę MySQL ponieważ mam już serwer postawiony do niej ale TypeORM wspiera oprócz niej jeszcze MariaDB, Postgres, SQLite, Microsoft SQL Server, Oracle, sql.js oraz MongoDB. Oprócz bazy danych dodatkowo wybrałem, że chcę korzystać z Express.js.

\n\n

Po wygenerowaniu projektu przy pomocy tej komendy nie możemy zapomnieć o tym by zainstalować wszystkie potrzebne biblioteki.

\n\n

Zanim zaczniemy tworzyć nasze rozwiązania warto przejrzeć wszystkie pliki by zobaczyć co się w nich kryje by nie być zaskoczonym. Wygenerowane drzewo plików nie należy do dużych ale zawiera też przykładową encję, którą dziś sobie omówimy.

\n\n

typeorm tree

\n\n

Ważniejsze pliki na które warto zwrócić uwagę to UserController, User, index, routes i ormconfig. Pierwsze co warto sprawdzić to plik index.ts gdzie czeka na nas pewna niespodzianka. Otóż na dole pliku znajdziemy taki fragment kodu

\n\n
// insert new users for test\nawait connection.manager.save(connection.manager.create(User, {\n\tfirstName: "Timber",\n\tlastName: "Saw",\n\tage: 27\n}));\nawait connection.manager.save(connection.manager.create(User, {\n\tfirstName: "Phantom",\n\tlastName: "Assassin",\n\tage: 24\n}));
\n\n

Jest on w porządku ponieważ dodaje nam na początek dane testowe do tabeli - o ile o nim wiemy i go usuniemy potem. Ponieważ jest położony w pliku indeks.js obok metod które tworzą serwer expressa to zostanie wykonany za każdym razem jak uruchomimy naszą aplikację. Jeśli o tym zapomnimy to możemy się zdziwić ;)

\n\n

Konfiguracja połączenia

\n\n

Najważniejszy plik, który potrzebujemy aby uruchomić naszą aplikację to ormconfig.json. Zawiera on konfigurację, która pozwoli się zalogować do bazy danych oraz parę dodatkowych opcji.

\n\n
{\n   "type": "mysql",\n   "host": "localhost",\n   "port": 3306,\n   "username": "root",\n   "password": "",\n   "database": "typeorm",\n   "synchronize": false,\n   "logging": false,\n   "entities": [\n      "src/entity/**/*.ts"\n   ],\n   "migrations": [\n      "src/migration/**/*.ts"\n   ],\n   "subscribers": [\n      "src/subscriber/**/*.ts"\n   ],\n   "cli": {\n      "entitiesDir": "src/entity",\n      "migrationsDir": "src/migration",\n      "subscribersDir": "src/subscriber"\n   }\n}
\n\n

Również na początku zmieniłem wartość synchronize na false. Przed tym przy każdym uruchomieniu serwera baza danych była synchronizowana z naszymi encjami. Znaczy to tyle że w bazie były wykonywane operacje tak by synchronizacja była możliwa czyli dodawanie i usuwanie tabeli, dodawanie kolumn, usuwanie ich czy też zmiana nazw. Jak dla mnie jest to niepożądane gdyż możemy sobie łatwo zepsuć nasze dane w najmniej oczekiwanym momencie.

\n\n

Migracje

\n\n

Dużo lepszym rozwiązaniem jest tworzenie tzw.: plików migracji, które zawierają kolejno wprowadzane zmiany do bazy danych. Mamy dzięki temu historię kolejnych zmian do bazy i jest wtedy łatwiej naprawić błędy w momencie gdy któraś zmiana wprowadziła problemy do systemu. Należy pamiętać, że jeśli wyłączyliśmy opcję synchronize to przed pierwszym uruchomieniem aplikacji musimy wykonać migrację co pozwoli stworzyć początkową strukturę bazy danych.

\n\n

Aby wygenerować taką migracje możemy wykorzystać polecenie:

\n\n
typeorm migration:generate -n User
\n\n

Jednak zapewne u was nie zadziała ponieważ wyrzuci błąd składni. Po kilku próbach doszedłem do działającej u mnie wersji, która wygląda następująco:

\n\n
./node_modules/.bin/ts-node .\\node_modules\\typeorm\\cli.js migration:generate -n User
\n\n

Jednak zapis jest strasznie długi więc dla wygody wrzuciłem polecenie do pliku package.json

\n\n
"cli": "ts-node ./node_modules/typeorm/cli.js"
\n\n

Teraz można wykonywać te komendy w skróconej formie

\n\n
yarn cli migration:generate -n User
\n\n

Po użyciu ten komendy zobaczmy że w katalogu migrations pojawił się nowy plik, który wygląda następująco:

\n\n
import {MigrationInterface, QueryRunner} from "typeorm";\n\nexport class User1526735542526 implements MigrationInterface {\n\n    public async up(queryRunner: QueryRunner): Promise<any> {\n        await queryRunner.query("CREATE TABLE `user` (`id` int NOT NULL AUTO_INCREMENT, `firstName` varchar(255) NOT NULL, `lastName` varchar(255) NOT NULL, `age` int NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB");\n    }\n\n    public async down(queryRunner: QueryRunner): Promise<any> {\n        await queryRunner.query("DROP TABLE `user`");\n    }\n\n}
\n\n

Widzimy tu klasę z dwoma metodami up i down. Up jest wykorzystywane w momencie gdy aplikujemy migracje czyli zawiera zmiany jakie zostaną wykonane na bazie by dostosować ją do aktualnego stanu encji. Natomiast down wykorzystujemy gdy chcemy cofnąć zmiany bo zrobiliśmy coś co zepsuło bazę w pewien sposób.

\n\n

Aby zaaplikować zmiany do bazy danych musimy użyć kolejnego polecenia :

\n\n
yarn cli migration:run
\n\n

migration run

\n\n

Zostaną odpalone wszystkie migracje, które do tej pory nie zostały zaaplikowane dla bazy danych. Możecie spytać skąd CLI wie jakie migracje odpalić a jakie pominąć by nie doszło do duplikacji? Otóż w bazie danych jest specjalna tabela która zawiera nazwy oraz timestamp wszystkich uruchomionych do tej pory migracji. I wystarczy że sprawdzi jaki timestamp ma ostatni wpis w tabeli i uruchomi wszystkie starsze migracje.

\n\n

Skoro już mamy zsynchronizowane encje z bazą danych to możemy uruchomić aplikację poleceniem:

\n\n
yarn start
\n\n

Jeśli wszystko się powiedzie i wejdziemy na podany w konsoli adres to zobaczymy dwa przykładowe wpisy w bazie

\n\n

typeorm result

\n\n

Encje

\n\n

Najważniejszye pliku w całym TypeORM o których do tej pory tylko wspominałem to nasze pliki encji. To one tworzą naszą bazę danych i decydują o tym jak się dostaniemy do danych. Dziś zajmiemy się tylko sprawdzeniem co zostało dla nas wygenerowane a dostaliśmy coś takiego:

\n\n
@Entity()\nexport class User {\n\n    @PrimaryGeneratedColumn()\n    id: number;\n\n    @Column()\n    firstName: string;\n\n    @Column()\n    lastName: string;\n\n    @Column()\n    age: number;\n\n}
\n\n

Widzimy tutaj bardzo ładny przykład wykorzystania klas i dekoratorów. Jest to chyba najłatwiejszy sposób by stworzyć i skonfigurować nową encję. Pierwsze co musimy zrobić to umieścić dekorator @Entity() nad klasą. Będzie to informacja, że tą klasę trzeba przekształcić w tabelę w bazie danych. Każda tabela musi posiadać kolumny w których będą przechowywane dane dla poszczególnych rekordów. Robimy to oznaczając pole w klasie dekoratorem @Column(). Oczywiście każdy rekord musi mieć swój klucz główny czyli specjalną kolumnę (lub grupę kolumn), która pozwala jednoznacznie rozróżnić zidentyfikować rekord. Ustawiamy to dając dekorator @PrimaryColumn() przy czym wtedy musimy sami zadbać o wstawianie unikalnych identyfikatorów. Jeśli chcemy by generowały się same to możemy zamienić powyższy dekorator na @PrimaryGeneratedColumn() jak to jest w naszej encji.

\n\n

Entity Repository

\n\n

OK, to mamy naszą encję, wiemy jak wygenerować migracje by nałożyć zmiany na bazę danych ale jak teraz operować na danych w bazie? Chyba nie musimy pisać własnych kwerend? Na szczęście nie, ponieważ możemy wykorzystać repozytorium encji. Repozytorium encji jest specjalnym rodzajem menadżera encji ponieważ jest ograniczony tylko do jednej wybranej przez nas encji. Pozwala na wykonywanie wszystkich podstawowych operacji na bazie danych przy pomocy specjalnie do tego stworzonych metod. Najlepiej to zobaczyć na przykładzie :

\n\n
private userRepository = getRepository(User);
\n\n

Najpierw musimy pobrać repozytorium dla danej encji. W ten sposób mamy pewność, że cokolwiek robimy to będzie wykonywane na pojedynczej tabeli w bazie. Mając takie repozytorium możemy skorzystać z kilku predefiniowanych metod:

\n\n
    this.userRepository.find({id: 1});\n\n    this.userRepository.findOne(request.params.id);\n    \n    const user = await this.userRepository.findOne(request.params.id)\n    this.userRepository.remove(user);\n    \n    this.userRepository.save({\n            firstName: "Timber",\n            lastName: "Saw",\n            age: 27\n        });
\n\n

Tak naprawdę niewiele jest tutaj do tłumaczenia gdyż nazwy same wskazują co robią. Ciekawa jest opcja find() ponieważ domyślnie zwraca wszystkie rekordy w danej tabeli ale możemy jako parametr przekazać obiekt np.: {id: 1} i wtedy zwróci tylko rekordy dla których jest spełniony ten warunek. Podobnie działa findOne, który zwróci tylko jeden rekord - jeśli szukamy po kluczu podstawowym to możemy po prostu wstawić klucz jako argument funkcji tak jak to widać wyżej, ale możemy również przekazać obiekt jak w przypadku metody find.

2018-05-23 05:25:00 typeorm-pierwsze-kroki ckhxjb6o0000yi3umb3hg09jv 2018-05-23 05:25:00 2018-05-23 05:25:00 cjhsnctpc0130i3umd2ul22bp Dekoratory w Typescript https://fsgeek.pl/post/dekoratory-w-typescript/

Aktualnie piszę projekt na studiach w Angularze i pierwsza rzecz jaka rzuca się w oczy to obecność charakterystycznych struktur. Są to tak zwane dekoratory które pozwalają zmieniać zachowanie klasy, dodawanie do nich pewnych elementów lub modyfikacja istniejących. Co najważniejsze nie jest to tylko zarezerwowane dla Angulara i sami możemy stworzyć coś takiego w parę minut.

\n\n

\n\n

Wzorzec dekoratora

\n\n

Zanim przejdę do implementacji dekoratorów w Typescript warto zacząć od tego, że jest to jeden ze strukturalnych wzorców projektowych. Powstał jako alternatywa do typowego dziedziczenia w programowaniu obiektowym. Główna różnica to moment w którym jest wykorzystywany - dziedziczenie odbywa się podczas kompilacji kodu natomiast dekoratory rozszerzają zachowanie klasy podczas działania programu. Wykorzystanie tego wzorca pozwala na skrócenie kodu i poprawienie jego czytelności.

\n\n

Dekoratory w Typescript

\n\n

W Typescripcie dekoratory możemy pisać dla naszych stworzonych klas. Istnieją ich 4 rodzaje w zależności od tego gdzie je wykorzystamy:

\n\n
    \n
  • Klasy
    • \n
  • Pola
    • \n
  • Metody
    • \n
  • Parametru
    • \n
\n\n

Każdy z nich jest zwykłą funkcją, która przyjmuje odpowiednie parametry(ich liczba i typ zależą od wykorzystanego dekoratora) i czasami zwraca nową wartość, która nadpisuje to co udekorowaliśmy. Funkcję przypisujemy do odpowiedniego miejsca przy pomocy znaku @, który wraz z nazwą funkcji umieszczamy nad deklaracją elementu który chcemy udekorować.

\n\n

Dziś na potrzeby postu postaram się udekorować prostą klasę Person, która wygląda następująco:

\n\n
export class Person {\n\n    firstname: String;\n    lastname: String;\n\n    constructor(firstname, lastname) {\n        this.firstname = firstname;\n        this.lastname = lastname;\n\n    }\n\n    say(text) {\n        return this.firstname + " " + this.lastname + " says: " + text;\n    }\n}
\n\n

Nie wygląda na skomplikowaną i taka miała być. Dwa pola, konstruktor i jedna metoda wystarczają by pokazać możliwości dekoratorów. Postaram się dodać do każdego elementu logowanie danych w konsoli tak by wiedzieć co się dzieje z klasą.

\n\n

Dekorator klasy

\n\n

Na sam początek, najtrudniejszy według mnie dekorator, który może mocno zmienić zachowanie naszej klasy lub nawet zepsuć jeśli będziemy nieuważni. Jak wspominałem używanie dekoratorów jest proste, co widać poniżej:

\n\n
@classLogger\nexport class Person {\n    ...\n}
\n\n

Sama funkcja jednak do najprostszych nie należy, co będzie widać przy kolejnych przykładach. Moja wygląda następująco

\n\n
const classLogger = (target) => {\n    const original = target;\n\n    const construct = (constructor, args) => {\n        const c: any = function () {\n            this.newProperty = "new prrotperty";\n            return constructor.apply(this, args);\n        }\n\n        c.prototype = constructor.prototype;\n        c.prototype.toString = function () {\n            console.log("to string: ", ...args, this.newProperty)\n        }\n\n        return new c();\n    }\n\n\n    const newConstructor: any = function (...args) {\n        console.log("New: " + original.name + " " + args);\n        return construct(original, args);\n    }\n\n    newConstructor.prototype = original.prototype;\n\n    return newConstructor;\n}
\n\n

Ten dekorator przyjmuje tylko jeden parametr i jest nim konstruktor naszej klasy czyli zwykła funkcja. I to jest to co jesteśmy w stanie tak naprawdę zmienić. Możemy zmienić zachowanie konstruktora, dopisać pewne zachowania a następnie go zwrócić.\nAnalizę tej funkcji najlepiej zacząć od dołu. Jako nowy konstruktor zwracamy funkcję o nazwie newConstructor. Tuż przed tym mamy na pierwszy rzut oka dziwne przypisanie ale jest ono zrobione tylko po to by poprawnie działał operator instanceof.\nW funkcji newConstructor wyświetlamy w konsoli interesujące nasz informacje oraz zwracamy funkcję o nazwie construct. To jest tak naprawdę najbardziej skomplikowany fragment. Najpierw tworzymy nowy konstruktor i zwracamy w nim wynik uruchomienia konstruktora oryginalnego. Możemy też dodać nowe pola do których mamy potem dostęp. Następnie kopiujemy wszystkie funkcje z naszej klasy. W tym miejscu możemy też dodać dodatkowe funkcje, które nie były w oryginalnej klasie a które możemy wywołać. Jak teraz zwrócimy nową instancję naszej klasy to wszystko będzie działać tak jak powinno.

\n\n
import { Person } from "./decorators";\nconst a = new Person('john', 'doe');\na.toString();
\n\n

class decorator result

\n\n

Dekorator pola

\n\n

Teraz wchodzimy do wnętrza klasy by zdefiniować logowanie zmian na polu klasy. Tak jak poprzednio dodanie dekoratora jest proste:

\n\n
@propertyLogger\nfirstname: String;
\n\n

Sama funkcja natomiast wygląda następująco:

\n\n
const propertyLogger = (target, key) => {\n    let value = this[key];\n\n    const getter = () => {\n        console.log('get ', value);\n        return value;\n    }\n\n    const setter = (newValue) => {\n        console.log('set ', value, newValue);\n        value = newValue;\n    }\n\n    if (delete this[key]) {\n        Object.defineProperty(target, key, {\n            get: getter,\n            set: setter,\n            enumerable: true,\n            configurable: true\n        })\n    }\n}
\n\n

Wykonuje się ona jednorazowo przy inicjalizacji klasy. Jak widać na pierwszy rzut oka funkcja przyjmuje dwie wartości ale niczego nie zwraca. Sama funkcja nie jest ciężka ale warto zwrócić uwagę na parę rzeczy. Po pierwsze argumenty - pierwszym z nich jest prototyp naszej klasy, natomiast drugim jest nazwa pola, które udekorowaliśmy. I ta nazwa posłuży nam do odnalezienia pola w klasie. Pierwsza dziwna rzecz, która rzuca się w oczy to wykorzystanie operatora this. Jednak jak się dokładnie sprawdzi jak działają dekoratory to można zobaczyć, że nasze this odnosi się do klasy więc wykorzystując this[key] jesteśmy w stanie pobrać wartość naszego pola. Następnie tworzymy zwykłe funkcje, które logują nam operacje. I cała magia dzieje się na dole funkcji. Najpierw usuwamy oryginalne pole i jeśli to się powiedzie to tworzymy nowe o tej samej nazwie ale ze zdefiniowanymi przez nas getterem i setterem.

\n\n
import { Person } from "./decorators";\nconst a = new Person('john', 'doe');\nconsole.log(a.firstname);\na.firstname = 'joe';
\n\n

property decorator result

\n\n

Dekorator metody

\n\n

Następny dekorator jest dosyć ciekawy i daje sporo możliwości przy odpowiednim wykorzystaniu. Podobnie jak poprzednio zaaplikowanie go jest proste

\n\n
@methodLogger\nsay(text) {
\n\n

Natomiast sama funkcja wygląda następująco:

\n\n
const methodLogger = (target, key, descriptor) => {\n\n    const originalValue = descriptor.value;\n\n    descriptor.value = function (...args) {\n        const result = originalValue.apply(this, args);\n        console.log(key + " " + args + " = " + result);\n        return result;\n    }\n\n    return descriptor;\n}
\n\n

Tym razem mamy do dyspozycji 3 argumenty: prototyp klasy, nazwę funkcji oraz deskryptory związane z tą funkcją. I to trzeci argument jest nam najbardziej potrzebny przy wszelakich manipulacjach. Na początku zapisuję w dodatkowej zmiennej wartość value z tego deskryptora - będzie mi to potrzebne w przyszłości. To pole jest wykorzystywane za każdym razem gdy chcemy pobrać wartość, czyli wywołać funkcję. I w tym miejscu jest ukryta nasza oryginalna funkcja z klasy.\nTeraz mogę nadpisać tą wartość za pomocą mojej funkcji. Pierwsze co robię to wywołuję oryginalną funkcję tak by otrzymać poprawny wynik a następnie loguję potrzebne mi informacje. Oczywiście na koniec muszę zwrócić poprawny wynik by użytkownik nie zauważył różnicy w działaniu.

\n\n
import { Person } from "./decorators";\nconst a = new Person('john', 'doe');\nconsole.log(a.say('follow FSGeek'));
\n\n

method decorator result

\n\n

Dekorator parametru

\n\n

No i na sam koniec powiązany niejako z poprzednim dekorator parametru. Zaaplikowanie go nie jest problematyczne

\n\n
say(@required text) {\n}
\n\n
const required = (target, key, index) => {\n    const tableIndex = `${key}_arguments`\n    if (Array.isArray(target[tableIndex])) {\n        target[tableIndex].push(index);\n    } else {\n        target[tableIndex] = [index];\n    }\n\n}
\n\n

Wygląda podobnie do poprzedniej, ponieważ też ma 3 argumenty ale trzeci jest dużo uboższy ponieważ zawiera jedynie indeks argumentu w funkcji. Jako pierwszy argument dostajemy znowu prototyp naszej klasy, który możemy wykorzystać do przechywania różnych wartości pomiędzy dekoratorami. W moim przykładzie umieściłem pod odpowiednim kluczem tablicę indeksów parametrów, które chcę by były wymagane podczas wywołania jej. Jednak żeby móc to sprawdzić muszę stworzyć nowy dekorator metody.

\n\n
@validate\n@methodLogger\nsay(@required text) {\n}
\n\n
const validate = (target, key, descriptor) => {\n    const originalValue = descriptor.value;\n    const tableIndex = `${key}_arguments`\n\n    descriptor.value = function (...args) {\n        if (target[tableIndex]) {\n            target[tableIndex].map(i => {\n                if (i > args.length || args[i] == undefined) {\n                    throw new Error(`Argument ${i} is required`);\n                }\n            })\n        }\n\n        return originalValue.apply(this, args);\n    }\n\n    return descriptor;\n}
\n\n

Właściwie kod nie wymaga już wyjaśnienia ponieważ to co jest potrzebne do zrozumienia opisałem wcześniej. W momencie gdy do funkcji zostało przekazanych mniej parametrów niż aktualny indeks wymaganego lub aktualny argument ma wartość undefined to wyrzucamy błąd

\n\n
import { Person } from "./decorators";\nconst a = new Person('john', 'doe');\nconsole.log(a.say(undefined));
\n\n

argument decorator result

\n\n

Jak widać z wykorzystaniem dekoratorów i odrobiną wyobraźni możemy osiągnąć bardzo dużo. Warto zauważyć do dodanie ich do klasy jest bezproblemowe i możemy zrobić to w dowolnym momencie i nie będzie się to wiązało z dodatkowymi problemami. Warto też rozważyć je jako opcja do walidowania danych, tworzenia efektów pobocznych lub jak to pokazałem w poście do logowania różnych informacji. Właściwe i mądre wykorzystanie może polepszyć nasz kod dzięki wydzieleniu funkcji i zostawienie w funkcjach “czystego mięsa” :D

2018-05-30 05:05:00 dekoratory-w-typescript ckhxjb6o0000yi3umb3hg09jv 2018-05-30 05:05:00 2018-05-30 05:05:00 @@ -1577,6 +1584,7 @@ cj84vw90w00sfi3umfv1c0wxo Live #3: Sesja Q & A https://www.nettecode.com/live-3- cj8bjsi4800sqi3um8u3b38uo Czas na… urlop https://www.nettecode.com/czas-na-urlop/

Przepraszam, ale muszę sobie zrobić przerwę. W sumie nie planowałam jej tak wcześnie. Myślałam, że będzie bliżej połowy listopada, w grudniu. Bo, że w ogóle zamierzam zrobić sobie taki blogowy urlop informowałam już chyba kilka razy, m.in. w ostatnich Zapiskach programistki, gdzie opisywałam swoje plany na najbliższe miesiące (nadal aktualne). To nie pierwsza przerwa na […]

\n

Artykuł Czas na… urlop pochodzi z serwisu NetteCode.

2017-10-03 11:55:47 czas-na-urlop ckhnmdge00000i3um6batg2gk 2017-10-03 11:55:47 2017-10-03 11:55:47 cj9ihiz9k00u1i3umc1lq4k9o Urlop, urlop, i po urlopie! I’m back :D https://www.nettecode.com/powrot-po-urlopie/

Co było jak mnie nie było? I co się porobiło? 😀 Czwartek, 26.10.2017 Piszę ten artykuł w wyjątkowo dobrym humorze. A zdecydowanie się na to nie zapowiadało. Po pierwsze: Zuza szalała w nocy, ganiając od pokoju do pokoju (już druga noc z rzędu). Po drugie: przez nocne atrakcje wszyscy rano zaspaliśmy… Miałam dziś dzień wolnego, […]

\n

Artykuł Urlop, urlop, i po urlopie! I’m back :D pochodzi z serwisu NetteCode.

2017-11-02 13:06:29 urlop-urlop-i-po-urlopie-im-back-d ckhnmdge00000i3um6batg2gk 2017-11-02 13:06:29 2017-11-02 13:06:29 cj9jk9odc00u2i3umfkwu9tds Urodziny Ebookpoint – programistyczne perełki! https://www.nettecode.com/urodziny-ebookpoint-programistyczne-perelki/

W tym roku Ebookpoint.pl kończy 6 lat. W związku z tym przygotował promocję, która właśnie wystartowała i potrwa do jutra. Poprzednia akcja cieszyła się sporym zainteresowaniem. Wytypowałam kilka perełek, kilka pozycji poleciliście mi Wy. Tym razem swoimi typami postanowiłam podzielić się w bardziej obszerny sposób – na blogu. Lista też jest dużo obszerniejsza. Bo było […]

\n

Artykuł Urodziny Ebookpoint – programistyczne perełki! pochodzi z serwisu NetteCode.

2017-11-03 07:11:00 urodziny-ebookpoint-programistyczne-perelki ckhnmdge00000i3um6batg2gk 2017-11-03 07:11:00 2017-11-03 07:11:00 +ch4xd1c00002ni3umc89tcx3g Serwer lokalny http://domanart.pl/serwer-lokalny/

Zazwyczaj chcemy naszą stronę tworzyć tworzyć lokalnie na własnym komputerze, a po gotowej robocie wrzucić ją na serwer w internecie :)\nAby pisać strony w html nie potrzebujemy nic poza chęciami. Natomiast do mySql, php itp potrzebny jest nam serwer lokalny.

\n

Możemy to wszystko instalować ręcznie, zmieniać konfigurację edytując pliki itp, ale o wiele przyjemniejsze jest skorzystać z gotowców, które całą robotę zrobią za nas. W poniższym artykule zajmiemy się właśnie takimi rozwiązaniami.

2012-07-22 00:00:00 serwer-lokalny ckej6qdc0001ni3um8neham6w 2012-07-22 00:00:00 2012-07-22 00:00:00 cj9l5yy0800u5i3umaysd1jvz Tworzymy aplikację webową – krok po kroku – podsumowanie aktualnego statusu & co dalej? + Checklista https://www.nettecode.com/tworzymy-aplikacje-webowa-krok-kroku-status/

Dawno, dawno temu (lipiec 2017 :P), na grupie wsparcia Programowanie – wsparcie na starcie pojawił się pomysł. Autor zebrał dwie grupy, które miały tworzyć aplikacje webowe, od zera. Szczerze? Sama miałam ochotę dołączyć i zebrać kolejną taką grupę. Tym bardziej, że chętnych było więcej niż miejsc. Niestety, przy moim obłożeniu czasowym, nie byłam w stanie […]

\n

Artykuł Tworzymy aplikację webową – krok po kroku – podsumowanie aktualnego statusu & co dalej? + Checklista pochodzi z serwisu NetteCode.

2017-11-04 10:06:17 tworzymy-aplikacje-webowa-krok-po-kroku-podsumowanie-aktualnego-statusu-and-co-dalej-checklista ckhnmdge00000i3um6batg2gk 2017-11-04 10:06:17 2017-11-04 10:06:17 cj9qsuyg800udi3um2ytv3g6t Bootstrap – ścieżka nauki https://www.nettecode.com/bootstrap-sciezka-nauki/

Jak wspominałam, w aplikacji tutorialowej skorzystamy z Bootstrapa. A jak wiesz, wszystko z czego korzystamy ma swoje wprowadzenie w ramach serii. Przyszedł czas na naukę Bootstrapa. Co znajdziesz w artykule? Bootstrap czyli co? Wersja 3.x czy 4.x? Wymagania wstępne (przed nauką Bootstrapa) Materiały do nauki Bootstrapa Proponowana ścieżka nauki Gdzie i jak ćwiczyć? Jak otworzyć […]

\n

Artykuł Bootstrap – ścieżka nauki pochodzi z serwisu NetteCode.

2017-11-08 08:45:53 bootstrap-sciezka-nauki ckhnmdge00000i3um6batg2gk 2017-11-08 08:45:53 2017-11-08 08:45:53 cj9vddtg000uhi3umb9kh5o8e Let’s code! https://www.nettecode.com/lets-code/

Tak jak obiecałam, choć dużo później niż początkowo zakładałam – bierzemy się za kod. W dzisiejszym artykule omówimy kod przykładowej aplikacji wygenerowanej z wykorzystaniem Angular CLI. Stukturę katalogów wygenerowanego projektu omawiałam już jak coś w jednym z poprzednich artykułów, dziś skupimy się na zawartości folderu src. Wymagania wstępne: Spisane w formie checklisty (do wydrukowania bądź […]

\n

Artykuł Let’s code! pochodzi z serwisu NetteCode.

2017-11-11 13:31:30 lets-code ckhnmdge00000i3um6batg2gk 2017-11-11 13:31:30 2017-11-11 13:31:30 @@ -1587,7 +1595,7 @@ cchfeuio00027i3umaklx89xf Popupy http://domanart.pl/popupy/ Tworzenie popupów w cgy3latc0002ii3um38o90aqm Dynamiczne formularze w CSS3 i HTML5 http://domanart.pl/dynamiczne-formularze-w-css3-i-html5/

Dzisiaj ponownie zajmiemy się tym tematem tworząc przykładowy formularz korzystający z CSS3 i HTML5. Przy okazji poznamy nowe elementy, które udostępnia nam html5 i css3.

2012-02-01 00:00:00 dynamiczne-formularze-w-css3-i-html5 ckej6qdc0001ni3um8neham6w 2012-02-01 00:00:00 2012-02-01 00:00:00 cgydlds00002ji3umh93iblz7 Walidacja formularzy http://domanart.pl/walidacja-formularzy/

W ostatnim poście stworzyliśmy podstawę walidacji, którą udostępnia nam HTML5.

\n

W chwili obecnej walidacja taka ma jednak trochę niedoróbek i nie działa tak jak byśmy chcieli. Po pierwsze nie mamy kontroli nad tym, czy walidacja ta ma być widoczna od razu po wejściu na stronę. Po drugie nie mamy kontroli nad zachowaniem tej walidacji (chociażby na wygląd podpowiedzi). Po trzecie nie działa ona dla wszystkich pól formularzy (nie działa z checkboxami). Wreszcie po czwarte nie działa ona na IE8 nie mówiąc o starszych przeglądarkach.

2012-02-08 00:00:00 walidacja-formularzy ckej6qdc0001ni3um8neham6w 2012-02-08 00:00:00 2012-02-08 00:00:00 ch4ki2o00002mi3umhf62dony Stylowanie input file http://domanart.pl/stylowanie-input-file/

Z jednej strony jestem praktycznie 100% fanem nie stylowania formularzy, z drugiej strony męczące jest to, jak mało jest nam dane. Stylowanie checkboxów? A może ruszymy select czy file input? Zapomnij. Nawet nie chodzi mi tutaj o wysublimowane efekty, ale o zwykłą zmianę tła…

\n

Oczywiście możemy zrobić nie jedno cudo za pomocą js, ale nie tędy powinna iść nasza droga.\nWszystko to jak wiadomo dla naszego dobra. I tak sobie myślę - szkoda, że nikt nie wpadł na pomysł certyfikatów dla wyglądu. Masz certyfikat autentyczności? Możesz zmieniać wygląd.

2012-07-13 00:00:00 stylowanie-input-file ckej6qdc0001ni3um8neham6w 2012-07-13 00:00:00 2012-07-13 00:00:00 -ch4xd1c00002ni3umc89tcx3g Serwer lokalny http://domanart.pl/serwer-lokalny/

Zazwyczaj chcemy naszą stronę tworzyć tworzyć lokalnie na własnym komputerze, a po gotowej robocie wrzucić ją na serwer w internecie :)\nAby pisać strony w html nie potrzebujemy nic poza chęciami. Natomiast do mySql, php itp potrzebny jest nam serwer lokalny.

\n

Możemy to wszystko instalować ręcznie, zmieniać konfigurację edytując pliki itp, ale o wiele przyjemniejsze jest skorzystać z gotowców, które całą robotę zrobią za nas. W poniższym artykule zajmiemy się właśnie takimi rozwiązaniami.

2012-07-22 00:00:00 serwer-lokalny ckej6qdc0001ni3um8neham6w 2012-07-22 00:00:00 2012-07-22 00:00:00 +ck7wk740001xxi3um7itla0ew Firebase + React - autoryzacja w 10 minut? To mozliwe! https://frontlive.pl//autoryzacja-w-firebase/ To prostsze niż się wydaje! Załóżmy, że robisz stronę internetową/aplikację i potrzebujesz autoryzacji użytkowników wraz z prostym formularzem logowania i rejestracji. Pierwsza… 2020-03-18 00:00:00 firebase-react-autoryzacja-w-10-minut-to-mozliwe ckgvhpmo0001ji3umfm7ubw86 2020-03-18 00:00:00 2020-03-18 00:00:00 ch5oieio0002oi3umance5okq CSS Sprite http://domanart.pl/css-sprite/

Gdy łączymy się ze stroną, przeglądarka wysyła do niej żądania (HTTP request) o pobranie różnych plików - grafik, skryptów itp. Następnie otrzymuje zwrot w postaci odpowiednich danych. Tak to wygląda w największym skrócie. Im więcej takich requestów, tym logicznie nasza przeglądarka musi wysłać z domu do serwera więcej requestów, i tym samym strona ładuje się wolniej.

\n

My jako webmasterzy powinniśmy starać się by takich połączeń było jak najmniej.

2012-08-10 00:00:00 css-sprite ckej6qdc0001ni3um8neham6w 2012-08-10 00:00:00 2012-08-10 00:00:00 charerk00002pi3um3vm6awxj Responsywne menu http://domanart.pl/responsywne-menu/

W dzisiejszych czasach, gdy internet przeglądany jest na różnorakich urządzeniach tworzenie sztywnych nawigacji jest błędem. Jak wiemy, dobra nawigacja po naszej stronie to klucz do jej sukcesu, a przynajmniej jeden z głównych elementów wpływających na niego.

\n

Stworzenie płynnego, dopasowującego się do wielkości ekranu menu wcale trudnym zadaniem nie jest, o czym przekonacie się już za chwilę.

2012-12-16 00:00:00 responsywne-menu ckej6qdc0001ni3um8neham6w 2012-12-16 00:00:00 2012-12-16 00:00:00 chd0uv400002qi3umgm67c25g HTML5 Outliner http://domanart.pl/html5-outliner/

Pewnie większość z was spotkała się z nowymi znacznikami. O co w ogóle w tym wszystkim chodzi? Z czym to się je? Nowe tagi html5 wprowadziły pewne zamieszanie w naszym webowym świadku, dlatego dzisiaj zajmiemy się ich omówieniem.

2013-02-11 00:00:00 html5-outliner ckej6qdc0001ni3um8neham6w 2013-02-11 00:00:00 2013-02-11 00:00:00 @@ -1612,6 +1620,7 @@ cjcnd4ae000xei3umfpgt00lf Dodawanie nowych zadań do listy https://www.nettecode cjcsums0g00xii3umfp9e5kc9 Od zera do Front-end Developera! https://www.nettecode.com/od-zera-do-front-end-developera/

Sorry, nie mogłam się powstrzymać z tym tytułem 😀 Jak wiecie na blogu ukazuje się sporo materiałów w temacie nauki (i nie tylko) Front-endu. Cały czas brakowało mi jednak takiego jednego spinającego wpisu. Kiedy ktoś mnie pyta: „No dobra, chcę być Front-end Developerem. Co mam ogarnąć?” – odpisuje mu listą artykułów na ten temat co […]

\n

Artykuł Od zera do Front-end Developera! pochodzi z serwisu NetteCode.

2018-01-24 09:10:10 od-zera-do-front-end-developera ckhnmdge00000i3um6batg2gk 2018-01-24 09:10:10 2018-01-24 09:10:10 cjdm4zb7400yji3umgpy0gf6f Live #4: Kierunek: Front-end https://www.nettecode.com/live-4-kierunek-front-end/

Właśnie jesteśmy po (?) spotkaniu Live na Facebooku w temacie nauki Front-endu. Obiecałam  Wam materiały, które przygotowałam na ten Live. Sama jestem ciekawa ile udało mi się poruszyć. Zakładam, że jak zwykle nie wszystko, co bym chciała. Zresztą z góry zakładam, że odbędzie się więcej niż jeden Live w tym temacie. Jakie tematy chciałam poruszyć […]

\n

Artykuł Live #4: Kierunek: Front-end pochodzi z serwisu NetteCode.

2018-02-13 21:05:10 live-4-kierunek-front-end ckhnmdge00000i3um6batg2gk 2018-02-13 21:05:10 2018-02-13 21:05:10 cjewp6lzs00zyi3umalxm9ort Stack overflow Developer Survey Results 2018 https://www.nettecode.com/stack-overflow-developer-survey-results-2018/

Pare dni temu ukazały się wyniki corocznego Stack Overflow Developer Survey. Analiza raportu z zeszłego roku – Zaczynasz naukę programowania? Na co warto zwrócić uwagę w Stack Overflow Developer Survey Results 2017 – cieszyła się sporym zainteresowaniem. Dlatego i tym razem postanowiłam się przyjrzeć i przedstawić część wniosków jakie można wyciągnąć z tych statystyk. Nie […]

\n

Artykuł Stack overflow Developer Survey Results 2018 pochodzi z serwisu NetteCode.

2018-03-18 11:08:07 stack-overflow-developer-survey-results-2018 ckhnmdge00000i3um6batg2gk 2018-03-18 11:08:07 2018-03-18 11:08:07 +cj2eorfuo00hyi3umb5o22yjq ES6#4 Arrow functions czyli funkcje strzałkowe https://www.idaszak.com/article/2017/05/07/es6-4-arrow-functions-funkcje-strzalkowe

\r\n\r\n

W poprzednich częściach serii dotyczącej standardu ECMASCRIPT6 języka Javascript poznaliśmy słowo kluczowe class, dowiedzieliśmy się czym jest let i const oraz spread i rest przy okazji omawiania destrukturyzacji. Tym razem zajmiemy się chyba najbardziej rozpoznawalną funkcjonalnością ES6, czyli funkcjami strzałkowymi. Arrow Functions pozwalają na skrócenie i zwiększenie czytelności naszego kodu, co jest bardzo pożądanym zjawiskiem przez wszystkich programistów. Zachaczymy też trochę o podstawy programowania funkcyjnego, ponieważ to właśnie przy okazji pisania takiego kodu najbardziej są przydatne te funkcje. Zaczynajmy!

\r\n\r\n\r\n

Jeśli nie czytałeś jeszcze wcześniejszych części, to rzuć okiem na http://www.idaszak.com/article/2017/04/05/es6-2-var-let-const,
ponieważ w poniższym kodzie będziemy korzystać z let oraz const. Zapraszam także do zapoznania się z klasami w ES6:
http://www.idaszak.com/article/2017/04/02/czy-javascript-jest-obiektowy

\r\n\r\n

# Czym są arrow functions?

\r\n

Funkcje strzałkowe, czyli arrow functions zastępują nam funkcje anonimowe, oferując znacznie krótszą składnie.

\r\n

Aby je zastosować używamy znaku =>, czyli grubej strzałki, której składnia wzięła się z CoffeScripta, czyli języka kompilowanego do Javascriptu. Jeśli znasz taki język jak Haskell, to pewnie już spotkałeś się z takimi funkcjami.

\r\n

Zacznijmy od prostego przykładu, który zobrazuje różnice między funkcjami.

\r\n\r\n
 \r\nconst a = 2;\r\n\r\nconst multiply = function (number) {\r\n  return number * a;\r\n}.bind(this);\r\n\r\nconsole.log(multiply(2)); //4
\r\n\r\n

Tak wygląda zwykła funkcja, przyjmująca jeden argument, która posiada przypisaną aktualną wartość this, czyli this z momentu deklaracji, zamiast tego z momentu wywołania. Użycie bind w tym przykładzie jest bardzo istotne, ponieważ właśnie w taki sposób działają funkcje strzałkowe. Zobaczmy teraz jak można taką funkcję skrócić:

\r\n\r\n
 \r\nconst a = 2;\r\n\r\nconst multiply = number => number * a;\r\n\r\nconsole.log(multiply(2)); //4
\r\n\r\n

W tym przypasku nie musieliśmy już pisać słowa kluczowego function ani return. Po lewej stronie strzałki znajdują się argumenty, które przyjmuje funkcja, a po prawej wartość, bądź wyrażenie, które zostanie zwrócone.

\r\n\r\n

# Zastosowanie arrow functions - funkcja filter

\r\n\r\n
 \r\nconst characters = [\r\n\t{name: Butch , role: Boxer},\r\n\t{name: Vincent, role: Hitman},\r\n\t{name: Winston, role: Problem solver},\r\n\t{name: Jules, role: Hitman},\r\n]
\r\n\r\n

Stworzyliśmy właśnie listę obiektów, składających się z wyszkolonych osób do wynajęcia, jednak w naszym przypadku lista nie jest satysfakcjonująca, ponieważ do naszego zadania potrzebujemy tylko płatnych zabójców! W takim przypadku możemy użyć funkcji filter, aby stworzyć listę osób, które mają rolę Hitman.

\r\n\r\n
 \r\nconst HitMan = characters.filter(function(ev){\r\n   return ev.role == 'Hitman';\r\n});\r\n\r\nconsole.log(HitMan); //[{name: "Vincent", role: "Hitman"}, {name: "Jules", role: "Hitman"}]
\r\n\r\n

Jednak użyjmy teraz arrow function => i spójrzmy, jak bardzo skróci nasz kod.

\r\n\r\n
 \r\nvar HitMan = characters.filter(ev => ev.role == 'Hitman');\r\nconsole.log(HitMan); //[{name: "Vincent", role: "Hitman"}, {name: "Jules", role: "Hitman"}]
\r\n\r\n

A co w przypadku jeśli funkcja przyjmuje więcej niż jeden argument lub nie przyjmuje żadnych argumentów?

\r\n

W przypadku wielu argumentów, musimy pamiętać, żeby zamknąć nasze argumenty w nawiasie okrągłym:

\r\n\r\n
 \r\nlet max = (a, b) => a > b ? a : b;
\r\n\r\n

W powyższym przykładzie użyliśmy skróconej formy warunku if, gdzie naszym warunkiem jest a > b, wartością zwróconą w przypadku prawdy jest pierwszy argument po znaku zapytania, czyli a, a w przypadku fałszu jest to b znajdujące się po dwukropku.

\r\n

W przypadku kiedy nasza funkcja strzałkowa nie przyjmuje żadnych argumentów, wstawiamy znak ().

\r\n\r\n
 \r\nvar arg = 72;\r\nvar foo = () => arg;\r\n\r\nfoo(); //72
2017-05-07 12:40:00 es64-arrow-functions-czyli-funkcje-strzalkowe cjfsgdao0000fi3um8hz4dspc 2017-05-07 12:40:00 2017-05-07 12:40:00 cjf42uhdk0104i3umfeya1cr3 Kierunek: Nauka programowania – od czego zacząć? https://www.nettecode.com/kierunek-nauka-programowania/

Wpisem zatytułowanym „Nauka programowania – od czego zacząć?” rozpoczęłam publikacje na tym blogu. Ukazał się w dniu startu bloga i jak najbardziej jest aktualny. Przyznam jednak, że za każdym razem, gdy ktoś mnie o to pyta – muszę go uzupełniać o kolejne informacje. A jest to pytanie, które dostaję baaaardzo często. Dużo częściej niż poruszam […]

\n

Artykuł Kierunek: Nauka programowania – od czego zacząć? pochodzi z serwisu NetteCode.

2018-03-23 15:04:59 kierunek-nauka-programowania-od-czego-zaczac ckhnmdge00000i3um6batg2gk 2018-03-23 15:04:59 2018-03-23 15:04:59 cjfdpq1ug010bi3umetj7724v Patronite Raport #1 https://www.nettecode.com/patronite-raport-1/

Pare miesięcy temu ogłosiłam swoje wejście na Patronite i plany z nim związane. Wspomniałam, że postępy i to, co udało mi się zrealizować będę raportować na blogu. Dziś pierwszy taki raport 🙂 Przede wszystkim chciałabym podziękować wszystkim, którzy postanowili mnie wesprzeć. To dla mnie naprawdę dużo znaczy! Wchodząc na Patronite, zastanawiałam się jak to będzie. […]

\n

Artykuł Patronite Raport #1 pochodzi z serwisu NetteCode.

2018-03-30 08:55:19 patronite-raport-1 ckhnmdge00000i3um6batg2gk 2018-03-30 08:55:19 2018-03-30 08:55:19 cjhw1b4mo0139i3um36n39ttx 3, 2, 1… Youtube :) https://www.nettecode.com/3-2-1-youtube/

Mam przyjemność ogłosić, że mój kanał na Youtube właśnie wystartował! Czemu tak po cichu skoro trąbiłam o pracach nad nim już od jakiegoś czasu? Otóż właśnie te prace okazały się bardziej czasochłonne niż przewidywałam. Wnioskami ze startu, przygotowań, tego wszystkiego będę się z Wami jeszcze dzielić 🙂 Jak wiecie kanał miał wystartować w maju, bliżej […]

\n

Artykuł 3, 2, 1… Youtube :) pochodzi z serwisu NetteCode.

2018-06-01 13:58:54 3-2-1-youtube ckhnmdge00000i3um6batg2gk 2018-06-01 13:58:54 2018-06-01 13:58:54 @@ -1621,6 +1630,7 @@ cj1iumyjc00eki3um0cf384uz Intense.js – komponenty https://pawelochota.pl/2017/ cj1p2dqrc00f7i3um1elb4b87 Intense.js – systemy https://pawelochota.pl/2017/04/intense-js-systemy/

Były już encje i były komponenty. Obiekty i ich właściwości, ale jak nimi zarządzać? Odpowiedzią na to pytanie są systemy, które przy okazji są ostatnim fundamentem mojego frameworka. Systemy frameworka intense opisują logikę zachodzącą w grze. W ciele systemu przetwarzane są dane encji, ale tylko i wyłącznie tych encji, które posiadają wymagane komponenty przez dany

\n

Artykuł Intense.js – systemy pochodzi z serwisu Z podwórka programisty.

2017-04-19 14:19:15 intensejs-systemy ck801ynig001pi3um28xx49z7 2017-04-19 14:19:15 2017-04-19 14:19:15 cj1wj2ou800fzi3um1eqa3fv9 VRath – podstawowa scena dla strzelnicy https://pawelochota.pl/2017/04/vrath-podstawowa-scena-dla-strzelnicy/

Konkurs DSP 2017 powoli zbliża się ku finałowi, dlatego muszę podkręcić tempo prac. Dzisiaj krótko i zwięźle: o scenie dla mojej strzelnicy i kilku dodatkowych komponentach. W finalnym wpisie dotyczącym konfiguracji środowiska dodałem do projektu pakiet aframe-react, którego będę używał w kolejnych przykładach. Śledzenie statystyk wydajnościowych Framework A-Frame posiada w swoim zestawie wbudowanych komponentów sporo

\n

Artykuł VRath – podstawowa scena dla strzelnicy pochodzi z serwisu Z podwórka programisty.

2017-04-24 19:40:56 vrath-podstawowa-scena-dla-strzelnicy ck801ynig001pi3um28xx49z7 2017-04-24 19:40:56 2017-04-24 19:40:56 cj20prs2w00ggi3um1xlidjzj VRath – dopieszczanie sceny https://pawelochota.pl/2017/04/vrath-dopieszczanie-sceny/

Scena w moim projekcie wymaga nieco liftingu, w końcu składa się obecnie z samej podłogi. Czas więc pobawić się w wirtualnego pana budowlańca i uatrakcyjnić nieco moją strzelnicę. A-Frame ma to do siebie, że wystarczy odrobina kodu aby pokazać użytkownikowi coś ciekawego. Patrząc jednak przez pryzmat ilości kodu na mój projekt muszę stwierdzić, że wygląda

\n

Artykuł VRath – dopieszczanie sceny pochodzi z serwisu Z podwórka programisty.

2017-04-27 17:59:29 vrath-dopieszczanie-sceny ck801ynig001pi3um28xx49z7 2017-04-27 17:59:29 2017-04-27 17:59:29 +cisdqd340005ti3um3xvfdp7o Konferencja: Frontend Union Conf 2016 https://piecioshka.pl/blog/2016/08/28/konferencja-frontend-union-conf-2016.html

\n Dzisiejsza historia zaczyna się w litewskiej stolicy Wilnie, gdzie razem z Kasią\n polecieliśmy na konferencję Frontend Union Conf.\n

\n\n

\n Konferencja odbyła się dnia 2016-08-27 o godzinie: 10:00\n w budynku starego teatru? pod adresem ŠILTADARŽIO G. 6, w Wilnie.\n

\n\n

\n Niestety nie robiłem notatek, więc post nie będzie mocno techniczny.\n

\n\n
\n \n\n
\n Panorama miasta\n
\n
\n\n

\n Jako organizatorzy WarsawJS zostaliśmy zaproszeni na konferencję przez jednego ze współorganizatorów,\n Andreya.\n Dodam jeszcze, że Andrey jest organizatorem MoscowJS Meetup.\n

\n\n
\n

Wilno - piękne polskie miasto

\n\n \n\n

\n Była to nasza pierwsza wizyta, w tymże "polskim" mieście. Pierwszy dzień poświęciliśmy na zwiedzanie\n 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:\n

\n\n
    \n
  • litewskim
    • \n
  • rosyjskim
    • \n
  • i polskim
    • \n
\n\n
\n \n\n
\n Najstarszy kościół jaki w życiu widziałem. Powstał w XIV wieku.\n
\n
\n\n

\n Podczas zwiedzania kościołów, przez przypadek byliśmy świadkiem nabożeństwa, które było odprawiane po polsku,\n gdzie wiara modliła się za naród polski. Było to dla nas z jednej strony szokujące, z drugiej naturalne.\n

\n\n
\n \n\n
\n Miejsce gdzie mieszkał Adam Mickiewicz.\n
\n
\n\n

\n Wracając do meritum.\n

\n
\n\n
\n

Konferencja

\n\n

\n Konferencja nie była mocno popularna, tzn. sala na której siedzieliśmy mogła spokojnie pomieścić, jeszcze raz\n tą samą liczbę obecnych osób. Nie ma to większego znaczenia dla uczestników. Może bardziej dla organizatorów.\n

\n\n

\n Merytoryczna część talków była świetna. Na scenie pojawiły się takie gwiazdy jak:\n

\n\n \n\n

\n Ostatnia prelekcja nie poruszała tematyki technicznej, a bardziej społeczną.\n Otóż prelegent - Oleg Podsechin @olegpodsechin - wyszedł na scenę\n jako organizator meetupu HelsinkiJS.\n

\n\n

\n Oleg bardzo mnie zaciekawił swoim wystąpieniem, ze względu na to, że opowiadał o swoich doświadczeniach\n z organizowaniem meetup-ów. Mega interesujące jest zebrać dostać feeback o tym jak rosną inne społeczności JS-owe.\n

\n\n

\n Bardzo ciekawie i mądrze opowiadał o tym jak należy organizować meetupy, aby wiara przychodziła i wszyscy byli zadowoleni.\n Oleg przedstawił ciekawą listę:\n

\n\n
\n \n\n
\n Lista rzeczy, które należy zrobić, aby zorganizować meetup.\n
\n
\n\n

\n W sumie to zgadzam się, ze wszystkim co opowiadał. Ta lista to takie minimum.\n

\n
\n\n
\n

After party

\n\n

\n Po konferencji przyszedł czas na After party, które odbyło się na patio budynku przy którym była sala konferencyjna.\n Poniżej możecie zobaczyć drinki, które były dostępne w barze. Najmocniejszy to debugger. Hmm. Polecam.\n

\n\n
\n \n\n
\n Lista drinków.\n
\n
\n\n

\n Na konferencji poznaliśmy Martynę z Touk, która na poprzednim WarsawJS\n wygrała bluzę ufundowaną przez jednego ze sponsorów naszej organizacji,\n czyli firmę Softwarely.\n

\n\n \n
\n\n
\n

Podsumowanie

\n\n

\n Bardzo dziękujemy organizatorom za poświęcony czas i włożone siły w\n organizację konferencji. Nauczyłem się wielu rzeczy - po to w sumie\n ludzie uczęszczają na konferencje i meetupy: aby poznawać nowych ludzi,\n oraz aby poznawać nowe technologie.\n

\n\n \n
2016-08-27 22:00:00 konferencja-frontend-union-conf-2016 ckbw97zyw0007i3umdszu2ola 2016-08-27 22:00:00 2016-08-27 22:00:00 cj26075ag00h3i3um0ryp7byt Intense.js – ciekawe elementy frameworka https://pawelochota.pl/2017/05/intense-js-ciekawe-elementy-frameworka/

Ponownie wracam do przeszłości, odkurzam swoją pracę i przedstawiam te moduły, które w mojej opinii są ciekawe i mogą być dla kogoś natchnieniem przy tworzeniu własnego frameworka czy też gry. Zapraszam! Dla osób, które zaglądają tu pierwszy raz, przedstawiam listę artykułów dotyczących frameworka intense.js: Intense.js – framework dla gier HTML5 Intense.js – encje Intense.js –

\n

Artykuł Intense.js – ciekawe elementy frameworka pochodzi z serwisu Z podwórka programisty.

2017-05-01 10:50:13 intensejs-ciekawe-elementy-frameworka ck801ynig001pi3um28xx49z7 2017-05-01 10:50:13 2017-05-01 10:50:13 cj2c3xvk000hoi3umhc1u9n7v Znalazłem agregator informacji o polskim froncie! https://pawelochota.pl/2017/05/znalazlem-agregator-informacji-o-polskim-froncie/

Jakiś czas temu zastanawiałem się nad serią wpisów, która przedstawiałaby ciekawe zakamarki Internetu, zarówno te technologiczne jak i pozostałe. Dziś będzie coś z tej pierwszej grupy, coś dla programistów. W sieci jest od groma blogów i stron technologicznych poświęconych zagadnieniom z programowania. Jest ich tak dużo, że sam postanowiłem popełnić jeden (może nikt nie zauważy).

\n

Artykuł Znalazłem agregator informacji o polskim froncie! pochodzi z serwisu Z podwórka programisty.

2017-05-05 17:21:36 znalazlem-agregator-informacji-o-polskim-froncie ck801ynig001pi3um28xx49z7 2017-05-05 17:21:36 2017-05-05 17:21:36 cj2epxllk00hzi3um40w2dk36 VRath – animacja tarczy i próba strzału https://pawelochota.pl/2017/05/vrath-animacja-tarczy-i-proba-strzalu/

Kolejny krokiem przy projektowaniu mojej strzelnicy będzie animacja celu, który ma zachowywać się jak festynowa tarcza oraz oczywiście obsługa zdarzeń. Nie ma na co czekać, to ostatni miesiąc zabawy. Ostatnim razem nadałem nieco wojskowego klimatu całej scenie. Zanim zajmę się elementami ze wstępu, chciałbym podzielić elementy ze sceny do osobnych plików. Wydzielenie komponentów Obecnie w

\n

Artykuł VRath – animacja tarczy i próba strzału pochodzi z serwisu Z podwórka programisty.

2017-05-07 13:12:47 vrath-animacja-tarczy-i-proba-strzalu ck801ynig001pi3um28xx49z7 2017-05-07 13:12:47 2017-05-07 13:12:47 @@ -1629,6 +1639,8 @@ cj2huu3cw00ici3um2fhafe29 Bądź dobry w tym co robisz, ale pamiętaj o cenie ht cj2ktb9yg00ili3umh8yt8tmd VRath – zewnętrzne obiekty 3D oraz dźwięk https://pawelochota.pl/2017/05/vrath-zewnetrzne-obiekty-3d-oraz-dzwiek/

Dzisiaj będzie krótko, ponieważ codzienne obowiązki całkowicie pochłonęły mój czas w tym tygodniu. Krótko ale treściwie, będzie o kolejnych typach zasobów i pewnym problemie. W ostatnim wpisie projektu w podsumowaniu dałem do zrozumienia, że chciałbym usłyszeć dźwięk podczas rozgrywki, aby nieco ożywić moją scenę. Ponadto chciałem wykorzystać także możliwość wczytywania modeli 3D aby jeszcze bardziej

\n

Artykuł VRath – zewnętrzne obiekty 3D oraz dźwięk pochodzi z serwisu Z podwórka programisty.

2017-05-11 19:34:01 vrath-zewnetrzne-obiekty-3d-oraz-dzwiek ck801ynig001pi3um28xx49z7 2017-05-11 19:34:01 2017-05-11 19:34:01 cj2t8au0w00jbi3umcdi1cy3l VRath – projektowanie tarczy https://pawelochota.pl/2017/05/vrath-projektowanie-tarczy/

I już połowa maja minęła, czas biegnie nieubłaganie, a ja akurat mam teraz milion rzeczy na głowie. Broni jednak nie składam i pokażę dziś jak zbudowałem sobie tarczę i jak rozwiązałem problem punktacji. Do tej pory moim celem była encja kuli zawieszona w przestrzeni, animująca się z lewej do prawej i na odwrót. Animacje chciałbym

\n

Artykuł VRath – projektowanie tarczy pochodzi z serwisu Z podwórka programisty.

2017-05-17 16:55:44 vrath-projektowanie-tarczy ck801ynig001pi3um28xx49z7 2017-05-17 16:55:44 2017-05-17 16:55:44 cj30b080o00jyi3umaixe2npc React w działaniu – moja recenzja książki https://pawelochota.pl/2017/05/react-w-dzialaniu-moja-recenzja-ksiazki/

Jako iż biblioteka react.js jest obecnie jedną z najpopularniejszych w świecie front-endu, oczywistym było, że na jej temat będą pojawiać się coraz ciekawsze pozycje w literaturze. Ale czy „React w działaniu” ma się czym wyróżnić? Zazwyczaj jestem sceptyczny jeżeli chodzi o książki dotyczące konkretnej biblioteki front-end’owej, dlatego że bardzo szybko stają się one nieaktualne. Pojawiają

\n

Artykuł React w działaniu – moja recenzja książki pochodzi z serwisu Z podwórka programisty.

2017-05-22 15:45:51 react-w-dzialaniu-moja-recenzja-ksiazki ck801ynig001pi3um28xx49z7 2017-05-22 15:45:51 2017-05-22 15:45:51 +ck87zpxc001yfi3um8m6797mi Firebase + React - pobieranie danych z Firestore https://frontlive.pl//pobieranie-danych-z-firestore/ Stwórzmy własną bazę danych! W poprzednim wpisie nauczyłeś się, jak dodać autoryzację użytkowników do swojej firebasowej aplikacji. Dziś poznamy Cloud Firestore. Co powinieneś… 2020-03-26 00:00:00 firebase-react-pobieranie-danych-z-firestore ckgvhpmo0001ji3umfm7ubw86 2020-03-26 00:00:00 2020-03-26 00:00:00 +cit20ukg0005vi3umgfi68jgv WarsawJS Meetup #25 - 2 urodziny :birthday: https://piecioshka.pl/blog/2016/09/14/warsawjs-meetup-25.html

\n Jak ten czas szybko leci? To już 2 lata od kiedy rozpoczęliśmy spotykać się regularnie\n i rozmawiać o JavaScript w naszym pięknym mieście, Warszawie.\n Podczas WarsawJS Meetup #25 gościliśmy około 100 osób, także sala wypchana po brzegi.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Jak wyglądały przygotowania?

\n\n

Rozstanie się z Rebased 1 września

\n\n

\n Jedną z pierwszych rzeczy które zrobiliśmy, to niestety rozstanie się\n z jednym z naszych sponsorów, firmą\n Rebased. Software house nie\n rekrutuje do swojego zespołu już developerów JavaScript, więc\n sponsorowanie imprezy, która ma na celu popularyzację tego języka\n wydaje się już nie mieć sensu.\n

\n\n

Nagranie zapowiedzi 1 września

\n\n

\n Tego samego dnia pojechaliśmy całą ekipą na most Józefa Poniatowskiego, gdzie korzystając\n z dobroci zachodzącego słońca oraz pięknej panoramy miasta nagraliśmy zapowiedź na kolejne\n spotkanie.\n

\n\n

\n Jeszcze tego samego dnia udało mi się skończyć 1 etap przy montażu, mianowicie\n synchronizację audio i wideo ze wszystkich źródeł. Proces trwał około 3-4h.\n

\n\n

\n Kolejnego dnia w piątek (02-09-2016), zacząłem wybierać sceny, które są miarę\n i mogą pójść do konkursu scen spośród których wybiorę te najlepsze, które zostaną\n na finalnej wersji zapowiedzi. Proces trwa zawsze długo. Tym razem ze względu\n na krótki czas nagrywania, który trwał około 4h.\n

\n\n

\n 03-09-2016. Kolejny dzień montowania. To już trzeci. A wersja finalna zapowiedzi jeszcze daleko.\n Według scenariusza, chciałem aby ta zapowiedź była trochę inna.\n

\n\n

\n Chciałem dodać do tej zapowiedzi 3 specjalne bonusy:\n

\n\n
    \n
  • historię WarsawJS - czyli jak to wszystko się zaczęło + zeszłoroczne urodziny
    • \n
  • przewodnik, o co chodzi z "żetonami" podczas WarsawJS, czyli jak z nich skorzystać
    • \n
  • oraz chciałem wymienić wszystkich zeszłorocznych prelegentów
    • \n
\n\n

\n Na dokończenie zapowiedzi w sobotę poświęciłem cały dzień (ok. 7h). Po tych godzinach miałem\n już dość komputera i pojechałem trochę się rozerwać na zakupach 😄\n

\n\n

Publikacja zapowiedzi 5 września 2016

\n\n

\n Niedzielę poświęciłem na delikatny odpoczynek. Zresztą publikowanie w niedzielę zapowiedzi\n nigdy nie wiązało się z dużym zainteresowaniem, więc publikację zaproszenia w formie wideo\n przesunąłem na poniedziałek.\n

\n\n

\n Ciekawi mnie jak będzie wam podobał się wynik mojej 14-godzinnej pracy.\n Tego dnia stworzyłem też wydarzenia w social mediach.\n

\n\n

Załatwienie tortu

\n\n

\n Razem z Kasią poszukaliśmy cukierni, gdzie mogliśmy zamówić sobie spersonalizowany tort.\n Znaleźliśmy cukiernię ale-tort.pl na Saskiej Kępie.\n Świetna lokalizacja i świetna strona skusiły nas do zakupu.\n

\n\n

\n Piękny tort odebraliśmy w dniu urodzin - na kilka godzin przed głównym wydarzeniem.\n Jesteście ciekawi jak się prezentował?\n

\n\n \n
\n\n
\n

Invitation

\n\n

\n Zapraszam do oglądania :exclamation:\n

\n\n \n
\n\n
\n

Talk #1: New collections in JS (from ECMAScript 2015): Map, Set, WeakMap, WeakSet [PL] Piotr Kowalski

\n\n

\n Przygotowania do prelekcji zacząłem ok. 2 tygodnie przed terminem.\n Stworzenie samych slajdów to dość żmudny proces, który zawsze owocuje\n idealnymi slajdami, na które już nie chce się patrzeć.\n

\n\n

\n Temat na prelekcję narodził się, kiedy mój kolega miał problem ze swoją implementacją.\n Zerknąłem na kod i od razu zacząłem robić slajdy, aby pokazać jak można dany problem\n rozwiązać lepiej korzystając z dobrodziejstw\n ECMAScript 2015, a dokładnie kolekcji\n Map, Set, WeakMap\n i WeakSet.\n

\n\n

\n Stworzyłem około 70 slajdów głównych oraz około 10 slajdów moimi osobistymi wskazówkami.\n Te dodatkowe slajdy dodałem z myślą o krótkim lightning talku, który chciałem wygłosić.\n

\n\n

\n W poniedziałek i wtorek przed środowym meetupem przeprowadzałem testy przed kamerą.\n

\n\n
\n \n\n
\n

1 próba przed WarsawJS Meetup #25

\n
\n
\n\n
\n \n\n
\n

2 próba przed WarsawJS Meetup #25

\n
\n
\n\n

\n Jak widzicie prelekcje oscylowały w około 30 minut. Niestety, ale główna prelekcja trwała około 50 minut.\n Zdaje sobie sprawę, że jest to zdecydowanie za długo. Człowiek nie jest w stanie utrzymać uwagi\n przez tak długi okres. Jednak mogę trochę się wybronić tym, że mój sposób na prelekcję był taki\n aby wciągnąć publiczność w dyskusję. Wydaje mi się, że te kilkanaście zadanych pytań może potwierdzić,\n że mi się udało!\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Writing your first Amazon lambda using JS [EN] Piotr Zientara

\n\n

\n Piotr od początku sygnalizował mi, że chce zrobić live coding.
My, organizatorzy wiemy jedno:\n live coding ZAWSZE stwarza problemy. Zawsze jest jakiś nieprzewidziany problem, który niweczy\n poczynania speakera. Całe szczęście ten live coding przeszedł bez problemu. Za co chwała Piotrowi!\n

\n\n

\n Mój imiennik opowiadał jak stworzyć pierwszą lambdę na Amazon S3 korzystając z naszego pięknego\n języka - JavaScript.\n

\n\n

\n Prelekcja odbywała się po angielsku. Jestem zawsze pod wrażeniem osób, które są wstanie wyjść\n na scenę i powiedzieć coś w obcym języku. Mogę sobie tylko wyobrazić jak duży stres towarzyszy\n takiemu prelegentowi.\n

\n\n \n
\n\n
\n

Lightning talks

\n\n

\n Po prelekcji Piotra Zientary, wyszedłem jeszcze na lightning talka. Skorzystałem z moich przygotowanych\n slajdów, jednak kolejny raz nie zmieściłem się w czasie. Ta w teorii krótka prelekcja trwała\n ponad 3 razy dłużej niż zakładałem, czyli około 15 minut (sic!).\n

\n\n

\n Przepraszam wszystkich, których tak długo trzymałem na zakończenie eventu!\n

\n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-09-13 22:00:00 warsawjs-meetup-25-2-urodziny-birthday ckbw97zyw0007i3umdszu2ola 2016-09-13 22:00:00 2016-09-13 22:00:00 cj3agigs000kui3um5ubw7l9f #CSSFix 2 – pomocnicze klasy dla odstępów https://pawelochota.pl/2017/05/cssfix-2-pomocnicze-klasy-dla-odstepow/

W zespołach frontendowych często można natknąć się na osoby, które najchętniej nie dotykałyby CSSa nawet kijem. Jeżeli muszą już coś ostylować to zazwyczaj sięgają po gotowe klasy. Odstępy między elementami są tutaj świetnym przykładem i dziś chciałbym pokazać jak można sobie taki zbiór klas wygenerować. Niedawno zetknąłem się z takim problemem w jednym z projektów

\n

Artykuł #CSSFix 2 – pomocnicze klasy dla odstępów pochodzi z serwisu Z podwórka programisty.

2017-05-29 18:17:42 cssfix-2-pomocnicze-klasy-dla-odstepow ck801ynig001pi3um28xx49z7 2017-05-29 18:17:42 2017-05-29 18:17:42 cj3by9qj400l6i3um54nf4xot VRath – koniec moich zmagań w DSP2017 https://pawelochota.pl/2017/05/vrath-koniec-moich-zmagan-dsp2017/

Jutro zakończenie konkursu Daj się poznać 2017 i tym samym nieco odpoczynku od zabawy w której udało mi się wziąć udział. Pora na krótkie podsumowanie moich dokonań. Za projekt wybrałem sobie grę w technologii VR, która miała przypominać strzelnicę. Zwracam uwagę na słowo klucz „przypominać”, bo będę się teraz nim bronił 😛 Projekt nazwałem VRath,

\n

Artykuł VRath – koniec moich zmagań w DSP2017 pochodzi z serwisu Z podwórka programisty.

2017-05-30 19:22:34 vrath-koniec-moich-zmagan-w-dsp2017 ck801ynig001pi3um28xx49z7 2017-05-30 19:22:34 2017-05-30 19:22:34 cj471jcqw00n1i3um0ktbdsnq 4 złe nawyki, które uczy programistów korpo https://pawelochota.pl/2017/06/4-zle-nawyki-ktore-uczy-programistow-korpo/

Korporacja to dość charakterystyczna organizacja, do której każdego roku po ukończeniu studiów wielu młodych adeptów programowania (i nie tylko) chętnie dołącza, bądź chce dołączyć. Kariera nie powinna nam jednak przysłonić kilku „ciekawych” zjawisk. Dzisiejszy krótki wpis powstał w oparciu o moje obserwacje w jednej z katowickich korporacji, w której dane mi było popracować jako programista.

\n

Artykuł 4 złe nawyki, które uczy programistów korpo pochodzi z serwisu Z podwórka programisty.

2017-06-21 13:34:53 4-zle-nawyki-ktore-uczy-programistow-korpo ck801ynig001pi3um28xx49z7 2017-06-21 13:34:53 2017-06-21 13:34:53 @@ -1638,6 +1650,7 @@ cjik18j3c0141i3um7mgp9krz Ucząc się programowania, nie pisz “do szuflady”! cjp5vske801b3i3umgay68ocw Drugie urodziny bloga… i co dalej? https://www.nettecode.com/drugie-urodziny-bloga-i-co-dalej/

Pamiętam jak rok temu świętowałam pierwsze urodziny bloga NetteCode. Byłam zachwycona tym, co zadziało się w ciągu roku. Świętowanie potrwało cały tydzień, ukazało się pięć wpisów, spotkaliśmy się na Facebook Live. Jak bardzo jest to odległe od tego roku… Co się zadziało? Gdzie byłam jak mnie nie było? I dlaczego? Ten rok nie był dla […]

\n

Artykuł Drugie urodziny bloga… i co dalej? pochodzi z serwisu NetteCode.

2018-12-01 20:00:08 drugie-urodziny-bloga-i-co-dalej ckhnmdge00000i3um6batg2gk 2018-12-01 20:00:08 2018-12-01 20:00:08 cjpk43ids01bwi3umh6xcdvms Q & A: Czy programowanie jest dla mnie? Czy programowanie jest łatwe? Angielski w pracy programisty? https://www.nettecode.com/czy-programowanie-jest-dla-mnie/

Praktycznie, konkretnie i na temat. Odpowiedzi na najczęściej pojawiające się pytania. Treści, które chciałabym gdzieś zamknąć, by mogły pomóc więcej niż jednej osobie (autorowi pytania). Treści, które chciałabym zamknąć, by móc do nich odsyłać zamiast raz po raz pisać to samo od nowa 🙂 W dzisiejszym odcinku odpowiadam na pytania: Czy programowanie jest dla mnie? […]

\n

Artykuł Q & A: Czy programowanie jest dla mnie? Czy programowanie jest łatwe? Angielski w pracy programisty? pochodzi z serwisu NetteCode.

2018-12-11 19:01:22 q-and-a-czy-programowanie-jest-dla-mnie-czy-programowanie-jest-latwe-angielski-w-pracy-programisty ckhnmdge00000i3um6batg2gk 2018-12-11 19:01:22 2018-12-11 19:01:22 ck3mqptxc01tki3umdbc5a7wf Trzecie urodziny bloga… Jak minął ten rok? https://www.nettecode.com/trzecie-urodziny-bloga-jak-minal-ten-rok/

Pisząc w artykule „Drugie urodziny bloga… i co dalej?”, że będzie mnie teraz mniej – nie spodziewałam się, że aż tak. W ciągu ostatniego roku opublikowałam dokładnie dwa wpisy. W ciągu 2019 roku równe zero… Dlaczego poszło tak tragicznie? Wszystko zaczęło się od wypadku… Cytując z artykułu, który opublikowałam jakiś czas temu na Nettelog: „Pod […]

\n

Artykuł Trzecie urodziny bloga… Jak minął ten rok? pochodzi z serwisu NetteCode.

2019-12-01 08:26:00 trzecie-urodziny-bloga-jak-minal-ten-rok ckhnmdge00000i3um6batg2gk 2019-12-01 08:26:00 2019-12-01 08:26:00 +cit3gaf40005wi3um7hvfbama Konferencja: Codemotion Warsaw 2016 https://piecioshka.pl/blog/2016/09/15/konferencja-codemotion-warsaw-2016.html

\n Dziś miałem przyjemność bycia uczestnikiem na konferencji\n Codemotion Warsaw 2016 jako partner tego eventu\n z ramienia WarsawJS. Nawiązaliśmy współpracę aby wymienić się w Social Mediach. Nieskomplikowany układ:\n my reklamujemy Ciebie, a Ty nas.\n

\n\n

\n Główną organizatorką była Agnieszka,\n która na co dzień pracuje w firmie Touk. Agnieszka jest znana z tego, że dość\n często coś organizuje, nie tylko w stolicy naszego kraju, ale też w innych miastach.\n

\n\n

\n 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\n czynników bilet możesz kupić taniej albo drożej. Jednym z takich czynników jest czas. Im wcześniej kupisz bilet\n tym jest tańszy, oraz im więcej biletów kupisz naraz to masz zniżkę.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n

\n Z każdej konferencji przywożę zbiór technologicznych notatek, które później wrzucam na GitHuba jako projekt.\n Tym razem nie było wyjątkowo, bo i z tej konferencji listę moich technicznych notatek, znajdziecie na moim\n profilu na GitHubie. Dokładny adres do albumu z notatkami wygląda tak: github.com/piecioshka/notes-codemotion-warsaw-2016.\n

\n\n

\n Zapraszam do zapoznania się. Reszta część wpisu będzie bardziej społeczno-organizacyjna.\n

\n\n
\n

Miło spędza się czas w dobrym towarzystwie

\n\n

\n Na konferencję pojechaliśmy we 3 z naszej firmy, oraz jeden kolega z zaprzyjaźnionej firmy.\n Lokalizacja była idealna. Centrum miasta. Może trochę miałem problemy, aby znaleźć kino,\n ze względu na to, że nigdy w nim nie byłem.\n

\n\n \n\n

\n Całe kino Atlantic było wynajęte, aby konferencja mogła toczyć się\n własnym życiem. 4 duże sale kinowe w których non stop były prowadzone\n prelekcje. Nie jestem do końca zwolennikiem kilku jednoczesnych sesji\n wykładowych, bo co mam zrobić, gdy będą ciekawiły mnie co najmniej\n 2 tematy, które są obecnie poruszane?\n

\n\n \n\n

\n Pierwszy talk był projekcie ConceptMap. Jego prelegentem była\n bardzo znana osobistość w świecie Javy - pan James Weaver - autor kilku książek o Javie.\n

\n\n

\n Najważniejszą rzeczą jaką wyniosłem z tej prelekcji była informację, że Wikipedia, na bazie której projekt map\n był omawiany, jest częścią organizacji WikiMedia.\n

\n\n

\n Kolejny talk jaki wybrałem, był o połączeniu się do urządzenia podłączonego przez protokół USB.\n Mocno hardware-owa prelekcja. Myślałem, że będzie inaczej. Nie interesują mnie jakoś mocno tematy hardware-owe.\n

\n\n \n\n

\n Najlepszymi dla mnie prelekcjami były te poprowadzone przez Nira Kaufmana.\n Nir pracuje w firmie 500tech. Co ciekawe podczas tej konferencji, Nir był podwójnym prelegentem.\n Pierwszy talk był o tym jak Angular 2 współpracuje z Redux-em. Nawet nie źle te 2 moduły ze sobą współpracują.\n Nie sądziłem, że można zrobić taką hybrydę.\n

\n\n

\n Natomiast druga prelekcja była o dekoratorach w JavaScript (nowa składnia, która nie jest jeszcze zatwierdzona).\n Mogę się tylko domyślać, jak Nir musiał być zmęczony po 2 wygłoszonych prelekcja podczas jednego dnia konferencji.\n Ciekawi mnie jak długo się przygotowywał do tych 2 talków.\n

\n\n \n\n

Najlepsza prelekcja

\n\n

\n Najlepiej wygłoszoną prelekcją podczas konferencji Codemotion Warsaw pt. "Regex fundamentals" była wykonana\n przez Juliette Reinders Folmer. To dzięki tej prelekcji zrozumiałem\n kilka ważnych aspektów z życia wyrażeń regularnych.\n Pani Juliette jest autorką kursu na temat fundamentów w RegExp. Link do slajdów: https://speakerdeck.com/jrf/regex-fundamentals.\n

\n\n

\n Podczas naszych testów używaliśmy narzędzia\n https://regexper.com/, które\n tłumaczy jak działa dane wyrażenie regularne.\n

\n\n

\n To dzięki Julii nauczyłem się co to jest Non-Capturing Groups. To jest taki typ regexpa,\n który nie szuka pojedynczych grup, tylko cały blok o który nam chodzi. Może dla jasności zademonstruje\n to na przykładzie:\n

\n\n
// Typo match-owanie\n/color=(red|green|blue)/.exec('color=red,green');\n// => ["color=red", "red"]\n\n// Match-owanie z użyciem NCG\n/color=(?:red|green|blue)/.exec('color=red,green');\n// => ["color=red"]
\n\n \n
\n\n
\n

Podsumowanie

\n\n

\n Gorące podziękowania składam na ręce organizatorom, na których czele stała Agnieszka Cieśla!\n Zazdroszczę jej, że ma już tak duże doświadczenie w realizacji takich event-ów.
\n Może kiedyś będzie konferencja naszej organizacji WarsawJS. Czas pokaże.\n

\n\n \n
2016-09-14 22:00:00 konferencja-codemotion-warsaw-2016 ckbw97zyw0007i3umdszu2ola 2016-09-14 22:00:00 2016-09-14 22:00:00 ck800fuio01y4i3umfbc6hx02 Bo co najgorszego może się stać? (Czytaj do końca :) Warto!) https://www.nettecode.com/bo-co-najgorszego-moze-sie-stac-czytaj-do-konca-warto/

Muszę Wam się do czegoś przyznać. Od dłuższego czasu nosiłam się z zamiarem rezygnacji z etatu i przejścia na swoje. Z wielu powodów, których nie będę ani wymieniać ani priorytetować. Z perspektywy czasu (krótkiej, bo krótkiej ale…) widzę, że cholernie się tego bałam. Etat wydawał się tak bezpieczną opcją <3 Umowa o pracę, czas nieokreślony, […]

\n

Artykuł Bo co najgorszego może się stać? (Czytaj do końca :) Warto!) pochodzi z serwisu NetteCode.

2020-03-20 09:58:00 bo-co-najgorszego-moze-sie-stac-czytaj-do-konca-warto ckhnmdge00000i3um6batg2gk 2020-03-20 09:58:00 2020-03-20 09:58:00 cka9ifk80021zi3um1hwycm4y Po raz ostatni? https://www.nettecode.com/po-raz-ostatni/

Dziś mam nadzieję ostatni artykuł z cyklu: “o wszystkim i o niczym” 😀  Postanowiłam, że na blogu NetteCode nie będę już więcej pisać w tematach “różnych”, tj. “Co u mnie słychać?”, “Gdzie byłam jak mnie nie było?”, “Co w planach?”, itp.  Blog NetteCode zostanie miejscem, poświęconym już tylko i wyłącznie treściom merytoryczym – które z […]

\n

Artykuł Po raz ostatni? pochodzi z serwisu NetteCode.

2020-05-16 10:51:00 po-raz-ostatni ckhnmdge00000i3um6batg2gk 2020-05-16 10:51:00 2020-05-16 10:51:00 ckgau6nk0028ki3umaae5b12x Kierunek: Front-end. Twoja ścieżka nauki + Mały Status Update https://www.nettecode.com/kierunek-front-end-twoja-sciezka-nauki-plus-status-update/

W końcu dobiega końca praca nad moim pierwszym płatnym ebookiem. Miałam mieszane uczucia co do tematyki, ale przyznam, że efekt mega mi się podoba <3 Mam wrażenie, że może przypaść do gustu i Tobie (oczywiście, o ile interesuje Cię nauka Front-endu ;) ). Po więcej szczegółów zajrzyj do artykułu :)\n

\n

Artykuł Kierunek: Front-end. Twoja ścieżka nauki + Mały Status Update pochodzi z serwisu NetteCode.

2020-10-15 13:06:00 kierunek-front-end-twoja-sciezka-nauki-maly-status-update ckhnmdge00000i3um6batg2gk 2020-10-15 13:06:00 2020-10-15 13:06:00 @@ -1647,6 +1660,7 @@ cj7g45sr400rgi3umb1br9jny „CSS. Refaktoryzacja kodu” – moim okiem https:// cj8ptnsnk00t5i3umg1t4dkcu O przekraczaniu swoich granic https://pawelochota.pl/2017/10/o-przekraczaniu-swoich-granic/

Dzisiejszym wpisem chciałbym odejść nieco od tematyki programistycznej i skupić się na emocjach, które mogą towarzyszyć nam w życiu codziennym. Jako przykład posłuży mi moja niedawna podróż do Londynu. Od zawsze miewałem tak, że nowe sytuacje, a zwłaszcza te „socjalne” sprawiały mi ogromną trudność na samym początku. Niektóre z nich przezwyciężałem dość szybko, np. pierwszą

\n

Artykuł O przekraczaniu swoich granic pochodzi z serwisu Z podwórka programisty.

2017-10-13 11:40:50 o-przekraczaniu-swoich-granic ck801ynig001pi3um28xx49z7 2017-10-13 11:40:50 2017-10-13 11:40:50 cja6sjr1k00uvi3um9fke8o4f Ale jQuery to Ty szanuj! https://pawelochota.pl/2017/11/ale-jquery-to-ty-szanuj/

Od dłuższego czasu potykam się w sieci o wpisy, które próbują moralizować frontendowców tłumacząc im, że jQuery jest bee i nie powinno się go używać. Ale czy wszyscy zdają sobie sprawę jak ważna była ta biblioteka dla współczesnego frontu? Nie jestem fanem jQuery, choć używałem go wielokrotnie. Jeszcze kilka miesięcy temu miałem kontakt z tą

\n

Artykuł Ale jQuery to Ty szanuj! pochodzi z serwisu Z podwórka programisty.

2017-11-19 13:21:29 ale-jquery-to-ty-szanuj ck801ynig001pi3um28xx49z7 2017-11-19 13:21:29 2017-11-19 13:21:29 cjbclu7iw00w7i3um16esfxik Fragmenty w React https://pawelochota.pl/2017/12/fragmenty-w-react/

Jakiś czas temu pojawiła się nowa wersja Reacta oznaczona numerkiem 16.2.0. Oprócz poprawek, wprowadza ona nową składnię dla czegoś co nazywane jest przez twórców Fragmentami. I dzisiaj krótko lecz treściwie o tym właśnie. Na początku był pewien problem… Wyobraźmy sobie, że nasza przykładowa aplikacja w Reakcie składa się z nagłówka, tekstu i stopki. I teraz

\n

Artykuł Fragmenty w React pochodzi z serwisu Z podwórka programisty.

2017-12-18 19:39:59 fragmenty-w-react ck801ynig001pi3um28xx49z7 2017-12-18 19:39:59 2017-12-18 19:39:59 +civ4dw0w00061i3umf05nf3ew WarsawJS Meetup #26 https://piecioshka.pl/blog/2016/11/05/warsawjs-meetup-26.html

\n To już 26-te nasze spotkanie! Mi jako organizatorowi jest bardzo miło\n "gościć" tyle osób, które bez przymusu, z chęcią przychodzą w drugą środę\n miesiąca do Państwomiasto,\n aby posłuchać ciekawostek, nowinek, dobrych praktyk w języku JavaScript.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Zaproszenie dość szczególne. Dostałem od mojego działu drona-zabawkę. Chciałem go wykorzystać aby dodać\n czegoś nowego do naszych zapowiedzi. Może i dron-zabawka, ale świat z 4-5 metrów wygląda inaczej.\n

\n\n

\n Ciężko mi było w te kilka minut lotu nagrać jakieś ciekawe ujęcie. Dodałem do zapowiedzi te, które wyszły\n najlepiej, czyli najstabilniej.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: Web Components. Are we there yet? [PL] Dominik Lubański

\n\n
\n Elementy w HTML mogę być: Semantyczny, funkcjonalny, czy też wizualny.\n Dominik Lubański. 2016-10-12\n
\n\n

\n Elementy mogą być definiowanie deklaratywne, czyli zapisanie w pliku HTML.\n

\n\n

\n Komunikacja z API elementów, które są bardziej skomplikowane i posiadają swoje metody może polegać\n na uruchomieniu imperatywnym (rozkazującym).\n

\n\n

\n 4 specyfikacje w połączeniu definiują Web Component-y:\n

\n\n
    \n
  • Shadow DOM
    • \n
  • Custom Elements
    • \n
  • Templates
    • \n
  • HTML Imports
    • \n
\n\n
\n Shadow DOM uruchamiamy imperatywnie. Nie możemy deklaratywnie\n stwierdzić, że element gdzieś ma Shadow DOM.\n Dominik Lubański. 2016-10-12\n
\n\n

\n Specyfikacja Templates daje programistom definiowania\n kontenerów <template>, które nie są wyświetlane,\n pomimo, że ona żywym drzewem w DOM.\n

\n\n

\n Dominik serdecznie zachęca do wykorzystania Web Components, aby\n zunifikować biblioteki, które tworzą UI.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Kind of JavaScript [EN] Mariusz Nowak

\n\n

\n Dobra organizacja wartości w JSie zakłada podział na:\n

\n\n
    \n
  • Immutable\n
      \n
    • Primitive non-value\n
        \n
      • undefined
        • \n
      • null
        • \n
      \n
      • \n
    • Primitive value\n
        \n
      • number
        • \n
      • boolean
        • \n
      • string
        • \n
      • symbol
        • \n
      \n
      • \n
    \n
    • \n
  • Mutable
    • \n
\n\n

\n Różnica między null a undefined w JavaScript?\n

\n\n
    \n
  • null - jest wartością, która mówi, że nie ma wartości
    • \n
  • undefined - mówi, że nie ma wartości, nie ma klucza, nie ma niczego
    • \n
\n\n

Dobra praktyka

\n\n

\n Usuwanie klucza z obiektu powinno odbywać się poprzez nadpisanie wartości null-em,\n zamiast wykorzystywać operator delete.\n

\n\n
obj.foo = null; // Good practice ✔\ndelete obj.foo; // Bad practice ✖
\n\n

\n Mariusz wytłumaczył jak działa Object Boxing, czyli dlaczego prymitywy mają właściwości.\n Kolejne dwa terminy, które po prelekcji będą dla nas jasne, to:\n

\n\n
    \n
  • \n Type Coercion - rzutowanie typów, to poważny temat. Przy pracy z językiem, stykamy się\n z koercją w wielu miejscach. Ważne jest zrozumienie tego mechanizmu\n i zapoznanie się np. Falsy Values.\n
    • \n
  • \n Duck Typing - czyli, porównywanie obiektu, na podstawie jego zawartości,\n np. czy posiada właściwości takie jak?\n
    • \n
\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: Angular 2 quickstart, Angular 2 automated unit testing [PL] Robert Gurgul

\n\n

\n Ze względu na to, że aplikacje tworzone w oparciu o framework Angular 2 tworzone są w TypeScript,\n to będzie istniała pewna różnica między środowiskami developerskimi projektów\n opartych na Angular 1 (starym) oraz Angular 2 (nowym). Elementem tym będzie transpilator.\n

\n\n

\n Robert podczas prelekcji pokazał narzędzie angular-cli - narzędzie automatyzując\n oraz standaryzujące budowanie aplikacji Angularowych.\n

\n\n
\n Ostatnio zastanawiałem się nad tym "dlaczego w ogóle lubię\n programować?"
Lubię programować, bo lubię widzieć co zrobiłem.\n Gdy napiszę fajny kod, lubię sprawdzić czy on działa.\n Robert Gurgul. 2016-10-12\n
\n\n

\n Robert poleca jazdę pociągiem, bo wtedy ze względu na brak internetu możemy pisać testy.\n Dobre testy to takie, które mock-ują całą komunikację z serwerem, więc faktycznie\n nie potrzebujemy internetu do dopisania do naszej aplikacji kilkunastu testów.\n W pełni się z tym zgadzam. Swoją drogą, żyjemy w XXI wieku i w pociągach dalekobieżnych\n dalej nie ma sieci Wi-Fi. Ciekawe czy nasze dzieci będą kiedykolwiek w takiej sytuacji.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-11-04 23:00:00 warsawjs-meetup-26 ckbw97zyw0007i3umdszu2ola 2016-11-04 23:00:00 2016-11-04 23:00:00 cjbuxauc000wii3um3wx0ehbk Pierwszy rok blogowania https://pawelochota.pl/2017/12/pierwszy-rok-blogowania/

Ostatni dzień roku nadszedł, pora więc na krótkie podsumowanie tego co udało mi się w mijającym roku osiągnąć, a także jakie nowe wyzwania trzeba będzie wziąć na klatę w przyszłym. Rok 2017 nie pozwoli mi o sobie zapomnieć Zacznijmy od bloga. Dzisiejszy wpis jest trzydziestym postem na blogu w tym roku i jestem z tej

\n

Artykuł Pierwszy rok blogowania pochodzi z serwisu Z podwórka programisty.

2017-12-31 15:20:42 pierwszy-rok-blogowania ck801ynig001pi3um28xx49z7 2017-12-31 15:20:42 2017-12-31 15:20:42 cjjeh0ro00157i3umclwjgy31 Półroczna przerwa https://pawelochota.pl/2018/07/polroczna-przerwa/

I stało się. W ostatnim wpisie informowałem, że pora nieco zwolnić i zająć się sprawami innymi niż blogowanie. Przerwa przydała się bardzo, ale w ostatnim czasie zaczęło mi doskwierać to, że nie mogę podzielić się swoimi myślami. No to pora zakasać rękawy! Pół roku rutyny Ten nagłówek brzmi bardzo pesymistycznie, ale niestety muszę się mu

\n

Artykuł Półroczna przerwa pochodzi z serwisu Z podwórka programisty.

2018-07-09 16:18:18 polroczna-przerwa ck801ynig001pi3um28xx49z7 2018-07-09 16:18:18 2018-07-09 16:18:18 cjjraveb4015oi3umd0c7h0tw Czy UX powinien znać się na frontendzie? https://pawelochota.pl/2018/07/czy-ux-powinien-znac-sie-na-frontendzie/

Choć łączy nas wspólny cel, często stajemy po dwóch stronach barykady i nie potrafimy wypracować wspólnego rozwiązania. Specjaliści UX i Frontendowcy, jak psy i koty. Co może zrobić UX aby współpraca była bardziej efektywna? Czas włożyć kij w mrowisko. Podobnych tematów w Internecie można znaleźć całkiem sporo, jednakże zazwyczaj autorzy dywagują nad tym czy to

\n

Artykuł Czy UX powinien znać się na frontendzie? pochodzi z serwisu Z podwórka programisty.

2018-07-18 15:47:10 czy-ux-powinien-znac-sie-na-frontendzie ck801ynig001pi3um28xx49z7 2018-07-18 15:47:10 2018-07-18 15:47:10 @@ -1655,6 +1669,8 @@ cjn8uc3m80196i3umazx350ti Wstęp do styled-components (en) https://pawelochota.p cj0fg8jmg009ui3umbk2g497c 30 najlepszych stron do nauki technologii webowych https://devcorner.pl/30-najlepszych-stron-nauki-technologii-webowych/

W tym zestawieniu poznasz 30 najlepszych stron do nauki technologii webowych. Artykuł jest podzielony na sekcje według technologii, więc bez problemu znajdziesz temat, który Cię interesuje. HTML i CSS SoloLearn – HTML Fundamentals Cena: Darmowy Kurs HTML Fundamentals od SoloLearn to interaktywny kurs zawierający wbudowany edytor kodu. Dołączone quizy pozwolą Ci sprawdzić zdobytą wiedzę. Ten […]

\n

Artykuł 30 najlepszych stron do nauki technologii webowych pochodzi z serwisu Devcorner.

2017-03-18 16:09:43 30-najlepszych-stron-do-nauki-technologii-webowych cjj4eqtmw0001i3umen1q8px0 2017-03-18 16:09:43 2017-03-18 16:09:43 cj0hu5psg00a3i3um7krw5xr6 Przegląd Webmastera #5 – niesamowite projekty, przydatne biblioteki i pierwsza praca https://devcorner.pl/przeglad-webmastera-5-niesamowite-projekty-przydatne-biblioteki-pierwsza-praca/

Ten artykuł jest zapisem Przeglądu Webmastera #5 z 13.03.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać je tydzień wcześniej. Porcja przydatnych materiałów i narzędzi Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. W tym tygodniu przesyłam Ci kolejną porcję przydatnych materiałów i narzędzi. Nie przedłużając, zaczynajmy Przegląd Webmastera 🙂 Artykuły tygodnia Narzędzia Webmastera […]

\n

Artykuł Przegląd Webmastera #5 – niesamowite projekty, przydatne biblioteki i pierwsza praca pochodzi z serwisu Devcorner.

2017-03-20 08:14:58 przeglad-webmastera-5-niesamowite-projekty-przydatne-biblioteki-i-pierwsza-praca cjj4eqtmw0001i3umen1q8px0 2017-03-20 08:14:58 2017-03-20 08:14:58 cj0jp3ni800abi3umgn3ghqq3 Błyskawiczne pisanie kodu HTML z Emmet https://devcorner.pl/blyskawiczne-pisanie-kodu-html-emmet/

Emmet to wtyczka do popularnych edytorów, która znacznie usprawnia pisanie kodu HTML. W tym artykule dowiesz się jak jej używać. Jak działa Emmet? Działanie wtyczki polega na przekształcaniu skrótów na odpowiadające fragmenty kodu. Krótka demonstracja: W tym prostym przykładzie możesz zobaczyć jak szybko tworzy się strukturę HTML korzystając z Emmet. Instalacja Emmet Pierwszą rzeczą, którą musimy […]

\n

Artykuł Błyskawiczne pisanie kodu HTML z Emmet pochodzi z serwisu Devcorner.

2017-03-21 15:28:56 blyskawiczne-pisanie-kodu-html-z-emmet cjj4eqtmw0001i3umen1q8px0 2017-03-21 15:28:56 2017-03-21 15:28:56 +ck8ca1hc001ymi3umf65pbugl Firebase + React - dodawanie danych do Firestore https://frontlive.pl//dodawanie-danych-do-firestore/ Okej, a co jeśli chciałbym coś dodać? Ostatnio utworzyliśmy prostą bazę danych, z której pobieraliśmy dane. Dziś dowiesz się, jak te dane dodawać.\nLet's go! Co powinieneś wiedzieć… 2020-03-29 00:00:00 firebase-react-dodawanie-danych-do-firestore ckgvhpmo0001ji3umfm7ubw86 2020-03-29 00:00:00 2020-03-29 00:00:00 +civioajk00064i3umdaaneivn Hackathon: Node Knockout #6 (2016) https://piecioshka.pl/blog/2016/11/15/hackathon-node-knockout-2016.html

\n W miniony weekend brałem udział w maratonie dla programistów, czyli hackathonie!\n Od kilku lat jestem wiernym fanem hackathonu o nazwie Node Knockout,\n gdzie podstawową zasadą jest wykorzystanie technologii Node.js w aplikacjach\n biorących udział w zawodach.\n

\n\n

\n Tematyka na takich zawodach jest dowolna. Można tworzyć aplikacje ale też i gry.\n Docelowym środowiskiem musi być przeglądarka internetowa. Dlatego też tworzenie aplikacji\n mobilnych, desktopowych czy na Smart TV albo Smart Watch odpada.\n

\n\n
\n \n
\n\n
\n

Co to jest Hackathon?

\n\n

\n Hackathon jest zlepkiem 2 słów: hack oraz marathon.\n Podstawową ideą jest tworzenie czegoś, albo projektu programistycznego,\n albo czegoś z dziedziny hardware-u, non-stop, czyli bez przerwy,\n w określonych wcześniej ramach czasowych. Bardzo często jest to 48 godzin.\n Jeśli po 48 godzinach dalej będziemy rozwijać naszą aplikację\n zostaniemy zdyskwalifikowani.\n

\n\n

\n Ostatnio nawet polski rząd stworzył hackathon. Więcej\n tutaj.\n

\n
\n\n
\n

Zespół

\n\n

\n Mój zespół liczył 3 osoby. W teamie Dumplings do którego należałem,\n znajdowały się jeszcze 2 osoby: Katarzyna oraz Krzysztof.\n

\n\n

\n Kasia jest grafikiem komputerowym, taka umiejętność w tworzeniu aplikacji, czy gier\n jest nieoceniona. Jestem przekonany, że gdybyśmy z Krzyśkiem napisali super grę,\n ale nie miała by ona grafiki to nikomu by się nie podobała.
\n Według mnie grafika w grach to około 50% odbioru,\n reszta to: szybkość grania i ładowania, obsługa sterowania, interesująca fabuła itd.\n

\n
\n\n
\n

Opis gry, stworzonej w 34 godziny

\n\n

\n Hackathon zaczął się o w 0:00 UTC 12 listopada, więc czasu polskiego 1:00 w sobotę.\n A kończył 23:59:59 UTC w 13 listopada, czyli sekundę przed końcem niedzieli.\n Polskiego czasu to 0:59:59 w poniedziałek.\n

\n\n

\n Jako zespół realizowaliśmy projekt w następujących ramach czasowych:\n

\n\n
    \n
  • Sobota: 7:00 - 1:00 (niedziela) = 18
    • \n
  • Niedziela: 9:00 - 1:00 (poniedziałek) = 16
    • \n
\n\n

\n HINT: Ważne jest, aby w ciągu tych dwóch dni zrobić przerwę na sen.\n Człowiek nie jest w stanie pracować przez 48 godzin non-stop.\n W takich zawodach wygrywają osoby, które dobrze zarządzą swoim czasem podczas hackathonu.\n

\n\n
\n \n\n
\n Screen z gry.\n
\n
\n\n

\n Gra dostępna jest pod adresem: dumplings.2016.nodeknockout.com/.\n

\n\n

\n 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\n tych zawodów poprzez uzupełnienie formularza:\n

\n\n
\n \n\n
\n Formularz oceny projektów biorących udział w hackathonie Node Knockout 2016.\n
\n
\n\n

\n A jeśli jesteś geekiem (albo po prostu developerem) i interesuję Cię jak gra wygląda od środka,\n to zapraszam Cię do odwiedzenia repozytorium projektu:\n github.com/rumblex/nodeknockout2016-dumplings.\n

\n
\n\n
\n

Pitch video

\n\n

\n Organizatorzy wpadli na pomysł, aby zawodnicy nagrywali krótkie wideo o swojej grze.\n Na tzw. pitch video warto wytłumaczyć jakieś skomplikowane aspekty gry - jeśli takie są.\n

\n\n \n\n

\n Ze względu na to, że gra nie została skończona, tj. nie zrealizowaliśmy w niej wymaganych feature-ów,\n to nie musiałem opisywać o co chodzi w tej grze.\n

\n
\n\n
\n

Wskazówki

\n\n

\n Podczas hackathonu robiłem notatki, aby móc Ci je teraz przedstawić.\n Notatki te są swego rodzaju wskazówkami dla wszystkich tych, którzy\n zamierzają wziąć udział w imprezach takiego typu.\n

\n\n
    \n
  1. Przygotować kilka pomysłów na projekt na kilka dni przed zawodami
    2. \n
  2. \n Wybrać jeden projekt dzień lub dwa przed zawodami. W ostateczności\n można go wybrać w ciągu pierwszych minut trwania hackathonu.\n Jednak wtedy poświęcamy czas zawodów na wymyślanie architektury,\n co jest dość czasochłonne.\n
    3. \n
  3. \n Rozpisać jego architekturę projektu tak, aby hackathon polegał już na samej\n implementacji.\n
    4. \n
  4. \n Podczas realizacji projektu warto jest zadbać o takie rzeczy jak:\n
      \n
    • Dodać favicon
      • \n
    • Pokazać użytkownikowi wersję z package.json
      • \n
    • Dodać dźwięki do gry
      • \n
    \n
    5. \n
  5. \n Wskazówki dotyczące realizacji gry:\n
      \n
    • Domyślne pozycje playera, aby pozbyć się problemu z błędem pozycji u innych klientów
      • \n
    • Ustawienie velocity na 1, aby były kolizje (o tym problemie opiszę poniżej) gdy używa się\n Phaser.js
      • \n
    • Dodać error handling gdy używa się Socket.io
      • \n
    • Ładnie zrobione intro pomaga w odbiorze
      • \n
    • Jak się dowiedzieć, z czym chcielibyśmy ustawić kolizję na mapie?\n\n
      function getCollisionTilesets() {\n    // Uzupełnić nazwy plików ze sprite-ami\n    return [<..nazwy..>].forEach((tileset) => {\n        return this.map.tilesets[tileset].frameid;\n    });\n}\n\nthis.map.setCollision(getCollisionTilesets());
      \n
      • \n
    \n
    6. \n
  6. Zrobić zaślepkowy obrazek, dla robotów robiących screenshot-y
    7. \n
  7. Opisać swoją pracę dopiero po skończonym kodowaniu\n
      \n
    • Jeśli gra jest multiplayer to warto to napisać!
      • \n
    \n
    8. \n
  8. Warto nagrać pitch video oraz oceniać innych zawodników, wtedy oni będą też oceniać naszą aplikację
    9. \n
  9. \n Jaką wersję Node.js wspiera hosting na którym będzie uruchomiona aplikacja. Mieliśmy błąd uruchomienia\n aplikacji, z powodu syntax errora, który był wygenerowany przez tworzenie class.\n Niestety, ale starsze wersje Node.js nie wspierają ich nawet gdy uruchomisz skrypt z opcją --harmony.\n
    10. \n
\n\n

\n Najważniejszą radą jaką mogę Ci dać, to gdy tworzysz grę na w takich zawodach,\n to postaraj się aby była ona grywalna. Nie ważne, że będzie prosta,\n ważne jest to, aby była gotowa do używania.\n

\n\n

\n Niestety, ale nam się nie udało zrealizować ten najważniejszej zasady,\n dlatego też nie mamy szans na jakikolwiek zwycięstwo. No może poza\n design-em, bo tutaj Kasia przerosła samą siebie!\n

\n\n
\n \n\n
\n Screen z gry.\n
\n
\n
\n\n
\n

Problemy

\n\n

\n Na zakończenie, chciałem podzielić się z Wami największymi problemami jaki mieliśmy podczas\n hackathonu. Były to dwa.\n

\n\n
\n

Problem z brakiem kolizji

\n\n

\n 2 godziny męczyłem się ze znalezieniem przyczyny dlaczego nie ma kolizji pomiędzy naszym samochodem\n a mapą. Przypomniałem sobie, że aby kolizja w świecie\n Phaser.js wystąpiła,\n to velocity obiektu, którym sterujemy nie może być równa 0.\n

\n\n

\n Po tym jak sobie przypomniałem, od razu stworzyłem nowy projekt, gdzie zachodzi kolizja między obiektem\n którym sterujemy a mapą. Niestety, ale w przykładach na phaser.io/examples/\n nie znalazłem takiego przykładu.\n

\n\n

\n Projekt dostępny jest na moim GitHubie: github.com/piecioshka/test-phaser-collision\n

\n
\n\n
\n

Problem z uruchomieniem aplikacji

\n\n

\n Największym problemem było to, że każda próba deployu kończyła się niepowodzeniem,\n choć w środowisku lokalnym aplikacja działała poprawnie. Błąd był następujący:\n

\n\n
events.js:160\nthrow er; // Unhandled 'error' event\n^\n\nError: listen EADDRINUSE :::5000
\n\n

\n Nie miałem pojęcia dlaczego akurat na środowisku produkcyjnym dany problem istnieje.\n Obecnie problem nie istnieje, a został rozwiązany dodaniem zmiennej środowiskowej PORT\n oraz zabiciem wszystkich procesów nginx oraz haproxy na docelowym serwerze.\n Z tego miejsca chciałem podziękować Kamilowi, który pomógł\n mi w tej sysadmin-owej kwestii.\n

\n
\n
\n\n
\n

Podsumowanie

\n\n

\n Chciałem podziękować organizatorom za organizację zawodów kolejny raz.\n Była to szósta edycja. Mogę się domyślać, jak wiele czasu trzeba było poświęcić na przygotowanie\n środowisk dla zawodników, oraz przygotowanie strony internetowej, która będzie informowała na bieżąco\n o stanie zawodów (bardzo motywujący był licznik czasu na stronie głównej).\n

\n\n

\n Jeśli nie brałeś udziału w takich zawodach, to polecam. Kod tworzony nie musi (a nawet nie może z powodu czasu)\n być najpiękniejszy - on po prostu musi działać. Moje pierwsze hackathony nauczyły mnie dużo.\n Poznawałem nowe biblioteki, które na swój sposób pomagały mi zrealizować zamierzony cel, czyli stworzyć grę!\n

\n\n

\n Tegoroczna edycja Node Knockout powiększyła liczbę hackathonów w których brałem udział do 5.\n Post na temat zeszłorocznej edycji (gdzie zająłem 2 miejsce w kategorii Solo Winner) jest dostępny tutaj: NKO 2015.\n

\n\n
\n \n\n
\n Screen z gry.\n
\n
\n
2016-11-14 23:00:00 hackathon-node-knockout-6-2016 ckbw97zyw0007i3umdszu2ola 2016-11-14 23:00:00 2016-11-14 23:00:00 cj0mksvc800ani3um4l6h1xax Błyskawiczne pisanie kodu CSS z Emmet https://devcorner.pl/blyskawiczne-pisanie-kodu-css-emmet/

Emmet oprócz przyśpieszenia pisania kodu HTML umożliwia również szybszą pracę z CSS. W tym artykule dowiesz się jak użyć tej wtyczki w pracy nad stylami strony. Jak działa Emmet? Działanie wtyczki polega na przekształcaniu skrótów na odpowiadające fragmenty kodu. Krótka demonstracja: Ten przykład pokazuje jak szybko można pisać style CSS korzystając z Emmet. Przejdźmy do instalacji wtyczki. Instalacja Emmet Pierwszą […]

\n

Artykuł Błyskawiczne pisanie kodu CSS z Emmet pochodzi z serwisu Devcorner.

2017-03-23 15:51:53 blyskawiczne-pisanie-kodu-css-z-emmet cjj4eqtmw0001i3umen1q8px0 2017-03-23 15:51:53 2017-03-23 15:51:53 cj0pfsesg00azi3um745td80y 6 najlepszych bibliotek JavaScript do tworzenia prezentacji https://devcorner.pl/najlepsze-biblioteki-javascript-tworzenie-prezentacji/

W tym artykule poznasz 6 bibliotek JavaScript do tworzenia zaawansowanych pokazów slajdów. WebSlides WebSlides to jedna z najbardziej rozbudowanych bibliotek w tej kategorii. Jednocześnie jest na tyle prosta, że nie sprawi problemów nawet początkującym. Instrukcje do tego narzędzia możesz znaleźć w artykule Korona Ziemi z WebSlides – jak tworzyć prezentacje?. reveal.js Reveal posiada 6 animacji przejścia i […]

\n

Artykuł 6 najlepszych bibliotek JavaScript do tworzenia prezentacji pochodzi z serwisu Devcorner.

2017-03-25 15:54:52 6-najlepszych-bibliotek-javascript-do-tworzenia-prezentacji cjj4eqtmw0001i3umen1q8px0 2017-03-25 15:54:52 2017-03-25 15:54:52 cj0r9tsfs00b9i3umfdz52c4g Przegląd Webmastera #6 – źródła do nauki, ilustracje CSS i portal społecznościowy z Laravel https://devcorner.pl/przeglad-webmastera-6-zrodla-nauki-ilustracje-css-portal-spolecznosciowy-laravel/

Ten artykuł jest zapisem Przeglądu Webmastera #6 z 20.03.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać je tydzień wcześniej. Przegląd Webmastera #6 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. W tym tygodniu przesyłam Ci kolejną porcję przydatnych materiałów i narzędzi. Nie przedłużając, zaczynajmy Przegląd Webmastera 🙂 Artykuły tygodnia Narzędzia Webmastera Szablon PSD […]

\n

Artykuł Przegląd Webmastera #6 – źródła do nauki, ilustracje CSS i portal społecznościowy z Laravel pochodzi z serwisu Devcorner.

2017-03-26 22:43:31 przeglad-webmastera-6-zrodla-do-nauki-ilustracje-css-i-portal-spolecznosciowy-z-laravel cjj4eqtmw0001i3umen1q8px0 2017-03-26 22:43:31 2017-03-26 22:43:31 @@ -1663,6 +1679,7 @@ cke8634v40267i3umaezwarpq Jak rozszerzać PWA Studio o nowe funkcjonalności? ht cjo38xop4019xi3um7w07bt52 Szybki sposób na create-react-app z SSR oraz styled-components https://pawelochota.pl/2018/11/szybki-sposob-na-create-react-app-z-ssr-oraz-styled-components/

Niedawno pojawiła się druga wersja create-react-app, czyli najpopularniejszego sposobu na wystartowanie nowej aplikacji z użyciem Reacta. Pomimo dodania wielu nowych ficzerów jak np. wsparcie dla CSS Modules, ciągle może istnieć potrzeba dodania do CRA czegoś więcej, jak np. obsługi SSR. I dzisiaj właśnie o tym. Jakiś czas temu dostałem do zrobienia pewne zadanie rekrutacyjne, które

\n

Artykuł Szybki sposób na create-react-app z SSR oraz styled-components pochodzi z serwisu Z podwórka programisty.

2018-11-04 19:05:01 szybki-sposob-na-create-react-app-z-ssr-oraz-styled-components ck801ynig001pi3um28xx49z7 2018-11-04 19:05:01 2018-11-04 19:05:01 cjqcbw0fk01cqi3um3we32xiv Roku 2018, byłeś ciekawy https://pawelochota.pl/2018/12/roku-2018-byles-ciekawy/

Wyłaniający się zza rogu nowy 2019 rok skłonił mnie do spojrzenia wstecz na kończący się rok 2018 i zastanowienia się nad doświadczeniami jakie zyskałem, a także nad planami jakie chciałbym zrealizować w roku kolejnym. I jak co Sylwester nachodzi mnie ten czas kiedy rozmyślam o przemijającym roku. Rozbijam na części pierwsze różne decyzje, które było

\n

Artykuł Roku 2018, byłeś ciekawy pochodzi z serwisu Z podwórka programisty.

2018-12-31 12:57:02 roku-2018-byles-ciekawy ck801ynig001pi3um28xx49z7 2018-12-31 12:57:02 2018-12-31 12:57:02 cjujvks6w01j3i3umf1ilcdhm O rekrutacjach w IT słów kilka https://pawelochota.pl/2019/04/o-rekrutacjach-w-it-slow-kilka/

Mieliście kiedyś tak, że pomimo wolnego czasu byliście potwornie zmęczeni? Piękna pogoda na zewnątrz, a Wy nie możecie odpocząć, bo zawsze coś trzeba zrobić. Czy to aktywne wakacje? Nie, to po prostu bezrobocie. Jestem bezrobotny po raz pierwszy w swoim życiu. Tzn. byłem już raz, gdy w ogóle nie miałem jeszcze okazji pracować i wtedy

\n

Artykuł O rekrutacjach w IT słów kilka pochodzi z serwisu Z podwórka programisty.

2019-04-16 14:21:23 o-rekrutacjach-w-it-slow-kilka ck801ynig001pi3um28xx49z7 2019-04-16 14:21:23 2019-04-16 14:21:23 +civoe1y800065i3um42w8fnwj WarsawJS Meetup #27 https://piecioshka.pl/blog/2016/11/19/warsawjs-meetup-27.html

\n Ten meetup był delikatnie inny niż poprzednie. Jako organizatorzy WarsawJS chcieliśmy trochę poeksperymentować.\n Tym samym, dołożyliśmy do standardowych 3 prelekcji mini workshop, aby zobaczyć, ile osób będzie\n zainteresowanych naszą nową inicjatywą WarsawJS Workshop.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Film nagrywaliśmy w dość chłodny (bo musiałem mieć rękawiczki) dzień na pl. Trzech Krzyży, w centrum miasta.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: Single-page application loading time optimization. Powered by Webpack, React, Node.js and isomorphic-style-loader [PL] Michał Janaszek

\n\n

\n Prelekcja była nt. optymalizacji działania strony aplikacji webowej.\n Skupiała się ona w większości na sposobie przyspieszenia ładowania się.\n

\n\n
\n JSX jest dobry do opisu elementów wizualnych.\n Michał Janaszek\n
\n\n

\n Pierwotnie analizowana aplikacja, przed załadowaniem treści pokazywała użytkownikowi tekst Loading\n 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].\n

\n\n

\n Michał, przeprowadził aplikację przez kolejne 3 fazy i zredukował czas ładowania aplikacji do 257 [ms],\n a użytkownik nie był w stanie zobaczyć napisu Loading, ponieważ go po prostu nie było w aplikacji,\n zastąpiła go docelowa treść aplikacji.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: GraphQL in a nutshell [PL] Kamil Grabek

\n\n

\n Podczas prelekcji dowiedzieliśmy się czym jest GraphQL oraz o kilku jego zaletach np. o tym,\n że GraphQL ma ściśle określony typ.\n

\n\n
\n W skrócie jest to idea, w jaki sposób powinna odbywać się komunikacja\n klient-serwer.\n Kamil Grabek\n
\n\n

\n Część kliencka aplikacji, gdzie jest wykorzystany GraphQL, jest w stanie powiedzieć serwerowi co chce dostać\n w odpowiedzi na zapytania.\n

\n\n

\n Technologia GraphQL jest dość młoda. Ma dopiero 2 lata. Facebook - ze względu na to, że jest autorem projektu\n - korzystał już wcześniej. Technologia się rozwija, także dajmy jej szansę i zobaczymy jak za kilka lat będzie\n wyglądał protokół komunikacji klient-serwer.\n

\n\n

\n Kamil po swojej prezentacji poprowadził mini workshopy z GraphQL, na których obecnych było ponad 20 osób.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
\n\n
\n

Podsumowanie

\n\n

\n Ze względu na to, że nasz eksperyment się powiódł, tj. na workshopach zostało kilkadziesiąt osób, to kolejne\n spotkanie (grudniowe), również będzie zawierało mini workshop o GraphQL, a dokładniej o Relay, ale o tym\n dowiecie się podczas kolejnej zapowiedzi wideo.\n

\n\n

\n Do zobaczenia za miesiąc :exclamation:\n

\n
2016-11-18 23:00:00 warsawjs-meetup-27 ckbw97zyw0007i3umdszu2ola 2016-11-18 23:00:00 2016-11-18 23:00:00 cjv997vo001jwi3um6dtc9n12 Czym jest Strict Mode w React? https://pawelochota.pl/2019/05/czym-jest-strict-mode-w-react/

React rozwija się niezwykle dynamicznie i praktycznie z każdą kolejną aktualizacją programiści otrzymują także nowe API. W wersji 16 wprowadzono wiele ciekawych mechanizmów, a jednym z nich jest dość niedoceniany Strict Mode. A dokładniej mowa o wersji 16.3 Reacta, bo to właśnie w tej wersji zadebiutował Strict Mode. W dużym uproszczeniu: Strict Mode to po

\n

Artykuł Czym jest Strict Mode w React? pochodzi z serwisu Z podwórka programisty.

2019-05-04 08:37:30 czym-jest-strict-mode-w-react ck801ynig001pi3um28xx49z7 2019-05-04 08:37:30 2019-05-04 08:37:30 cjvz3gtio01kwi3um9z3h4l9o DeskGap, czyli lżejszy Electron https://pawelochota.pl/2019/05/deskgap-czyli-lzejszy-electron/

Ekosystem front-endu zaskakuje praktycznie każdego dnia. Coś, co kiedyś było przeznaczone tylko do tworzenia aplikacji webowych, dziś może być z powodzeniem wykorzystywane także do projektów desktopowych. Przywitajmy DeskGap! Pamiętam jakie wrażenie wywarła na mnie informacja o tym, że istnieje możliwość tworzenia aplikacji mobilnych za pomocą JavaScriptu. Praktycznie rozpoczynałem wtedy swoją przygodę z pracą w IT

\n

Artykuł DeskGap, czyli lżejszy Electron pochodzi z serwisu Z podwórka programisty.

2019-05-22 10:38:30 deskgap-czyli-lzejszy-electron ck801ynig001pi3um28xx49z7 2019-05-22 10:38:30 2019-05-22 10:38:30 ck2w6clrk01sii3umh6yf25h8 Konferencja ConFrontJS 2019 https://pawelochota.pl/2019/11/konferencja-confrontjs-2019/

Czy w końcówce roku można liczyć jeszcze na jakąś ciekawą, front-endową konferencję? Oczywiście! ConFrontJS w Warszawie już niebawem, a ja mam zaszczyt objąć to wydarzenie patronatem medialnym! Już 7 grudnia w Warszawie odbędzie się kolejna edycja konferencji ConFrontJS. Wydarzenie to na pewno zainteresuje wszystkich miłośników front-endu, ponieważ gośćmi są specjaliści nie tylko z rodzimego podwórka,

\n

Artykuł Konferencja ConFrontJS 2019 pochodzi z serwisu Z podwórka programisty.

2019-11-12 18:13:50 konferencja-confrontjs-2019 ck801ynig001pi3um28xx49z7 2019-11-12 18:13:50 2019-11-12 18:13:50 @@ -1672,6 +1689,8 @@ ck84y5swo01y9i3umhpsa9115 require(#1) - Zintegrowane Środowisko Programistyczne ck8gbkrj401yti3um8f5ybb4r require(#2) - Jakościowy kod https://anchor.fm/require/episodes/require2---Jakociowy-kod-ec7apf

W kolejnym odcinku Require Podcast, Adam i Artur przedstawią narzędzia umożliwiające pisać lepszy jakościowo kod, oraz omówią podstawy i cele tworzenia testów jednostkowych. Tradycyjnie zapraszamy również do przesłuchania segmentu szybkich nowości i zajrzenia na naszą stronę internetową (a tam - nowa sekcja)

2020-03-31 19:54:04 require2-jakosciowy-kod ckius9kiw001ki3um2blndfkq 2020-03-31 19:54:04 2020-03-31 19:54:04 cj0zecs6g00c4i3um4qlq7szs 10 przydatnych bibliotek JavaScript – kwiecień 2017 https://devcorner.pl/10-przydatnych-bibliotek-javascript-kwiecien-2017/

W tym artykule poznasz 10 przydatnych bibliotek JavaScript. Większość z nich będziesz mógł natychmiast wykorzystać w swoich projektach. Nie przedłużając, przejdźmy do pierwszej z nich. Packery Packery to biblioteka JavaScript, która ułatwia tworzenie layoutów typu draggable (z możliwością przeciągania). WebVR Wirtualna rzeczywistość to przyszłość. WebVR to ciekawe narzędzie pozwalające na użycie tej technologii w przeglądarce. three.js […]

\n

Artykuł 10 przydatnych bibliotek JavaScript – kwiecień 2017 pochodzi z serwisu Devcorner.

2017-04-01 15:12:25 10-przydatnych-bibliotek-javascript-kwiecien-2017 cjj4eqtmw0001i3umen1q8px0 2017-04-01 15:12:25 2017-04-01 15:12:25 cj119i3bs00cei3umhpqu8tto Przegląd Webmastera #7 – błyskawiczne kodowanie i #JavaScript30 https://devcorner.pl/przeglad-webmastera-7-blyskawiczne-kodowanie-javascript30/

Ten artykuł jest zapisem Przeglądu Webmastera #7 z 27.03.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać je tydzień wcześniej. Przegląd Webmastera #7 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. W tym tygodniu przesyłam Ci kolejną porcję przydatnych materiałów i narzędzi. Nie przedłużając, zaczynajmy Przegląd Webmastera 🙂 Artykuły tygodnia Narzędzia Webmastera Szablon PSD […]

\n

Artykuł Przegląd Webmastera #7 – błyskawiczne kodowanie i #JavaScript30 pochodzi z serwisu Devcorner.

2017-04-02 22:32:07 przeglad-webmastera-7-blyskawiczne-kodowanie-i-javascript30 cjj4eqtmw0001i3umen1q8px0 2017-04-02 22:32:07 2017-04-02 22:32:07 +ck8tfbpc001zgi3um0t49dij6 Firebase + React - reguły zabezpieczeń, cloud functions i deploy https://frontlive.pl//reguly-zabezpieczen-funkcje-deploy/ Ostatnia prosta! W ostatnich trzech wpisach zapoznałeś się z podstawami firebase, dziś kończymy mini serię związaną z tą technologią. Czego się dowiesz? Jak zabezpieczyć swoje dane… 2020-04-10 00:00:00 firebase-react-reguly-zabezpieczen-cloud-functions-i-deploy ckgvhpmo0001ji3umfm7ubw86 2020-04-10 00:00:00 2020-04-10 00:00:00 +civwyp2800066i3umcwrh33y8 Konferencja: ngPoland 2016 https://piecioshka.pl/blog/2016/11/25/konferencja-ng-poland-2016.html

\n W zeszły wtorek (22-11-2016) byłem uczestnikiem pierwszej polskiej\n konferencji poświęconej w 100% najpopularniejszemu frameworkowi w świecie\n JavaScript-u, czyli Angular-owi.\n Ciekawią Cię jakie są moje wrażenia z konferencji\n ngPoland? Czytaj dalej.\n

\n\n
\n \n\n
\n Oficjalne logo tegorocznej konferencji.\n
\n
\n\n

\n Techniczne notatki jak zawsze są dostępne na GitHubie. Są tworzone one\n podczas wydarzenia. Zapraszam:\n github.com/piecioshka/notes-ng-poland-2016\n

\n\n
\n

Lokalizacja

\n\n

\n Kto się spodziewał, że konferencja odbędzie się na stadionie narodowym?\n Większość pewnie zadawała sobie pytanie, czy wydarzenie przypadkiem\n nie odbędzie się na płycie boiska?\n

\n\n

\n Niestety, ale na płycie boiska znajdują się 2 lodowiska, które\n przyciągają wszelkich zainteresowanych do swobodnej przejażdżki.\n

\n\n

\n PGE Narodowy to piękny obiekt\n z zewnątrz ale i od środka. Obiekt zawiera wiele salek, które można\n wynająć w celach biznesowych\n (Business Link).\n

\n\n \n
\n\n
\n

Rejestracja

\n\n

\n Przed wejściem na salę z prelekcjami czekała rejestracja. Każdy\n uczestnik musiał się zarejestrować. Podczas rejestracji trzeba było\n pokazać swój bilet. W zamian dostawało się smycz z logo sponsora\n Acaisoft.\n

\n\n

\n Jako uczestnicy dostawaliśmy też kuferek z poczęstunkiem (słodycze)\n i jeszcze kilka fantów. Świetny pomysł! Człowiek od razu na starcie\n jest miło przywitany - sprzyja to lepszemu odbiorowi całej konferencji.\n

\n\n \n
\n\n
\n

Partnerzy ... a wśród nich\n WarsawJS

\n\n

\n Zakładaliśmy WarsawJS w celu aktywizacji warszawskich\n programistów JavaScript. Wszelkie formy networkingu oczywiście\n popieramy, dlatego też jesteśmy partnerami wielu inicjatyw, a\n konferencja ngPoland jest jedną z\n nich.\n

\n\n

\n Zawsze cieszy widok, tylu ludzi zainteresowanych JavaScriptem.\n Szczególnie tych zakochanych w konkretnym frameworku. Ci\n developerzy starają się użyć tego narzędzia wszędzie gdzie się da - nie\n zawsze ma to pozytywne skutki :smiley:\n

\n\n

\n Frameworki są stworzone, żeby rozwiązywać problemy. Nie ma frameworka,\n który rozwiązuje wszystkie problemy, więc i nie takiego, którego można\n użyć w dowolnym zastosowaniu.\n

\n\n

\n Tomasz Ducin podczas swojej prelekcji na ngPoland\n powiedział:\n

\n\n
\n Don't focus on tools, focus on the problem.\n Tomasz Ducin\n
\n\n

\n W pełni się z nim zgadzam. Chciałbym aby wszyscy myśleli podobnie.\n

\n\n \n\n

\n Jak możecie zobaczyć, partnerami konferencji było mnóstwo organizacji\n zaangażowanych w aktywizację społeczności programistów, nie tylko\n warszawskich! Jak dobrze się przypatrzycie obrazkowi powyżej zobaczycie,\n że wśród sponsorów jest organizacja\n ng-poznan, która\n działa na podobnej zasadzie co organizacja\n AngularJS Warsaw,\n od której zaczynali organizatorzy konferencji, czyli:\n

\n\n \n\n

\n Z tego co wiem, to do współorganizatorów trzeba dodać\n Emilię Łuszkiewicz.\n

\n
\n\n
\n

Prezentacja organizatorów

\n\n

\n Konferencja zaczęła się punktualnie o godzinie 9:00, gdzie na scenie\n pojawili się kuzyni: Arek i Darek - organizatorzy. Podziękowali\n wszystkim za przybycie oraz zaprosili do wysłuchania 16 prelekcji\n na temat Angular-a (w obu wersjach 1.x oraz 2.x).\n

\n\n

\n Prelekcje jak i cała konferencja odbywała się w języku angielskim.\n To już standard na międzynarodowych konferencjach.\n

\n
\n\n
\n

Co tam się działo?

\n\n \n\n

\n Druga prelekcja i już banany na scenie!!?\n

\n\n

\n Osoby, które zostały zaproszone do bycia speakerami nie były z tzw.\n ulicy. Prelegenci znali się już przed konferencją, więc mogli zrobić\n coś interesującego, jak chociażby wspólne śpiewanie!\n

\n\n

\n Tracy Lee opowiadała o tym\n jak stowrzyć projekt w oparciu o\n angular-cli, ale\n przed tym jak zaczęła wgłębiać się w temat, zaprosiła swojego dobrego\n kolegę Bena Lesh-a z którym zaczęła śpiewać.\n

\n\n

\n Jeszcze przed rozpoczęciem na scenie pojawił się człowiek-banan -\n wydaje mi się, że był to Uri Shaked, który śpiewał i tańczył\n jednocześnie. Wszystko to przed publicznością liczącą kilkuset osób.\n

\n\n

\n Było to dla mnie NIESAMOWITE!\n

\n
\n\n
\n

Nagroda

\n\n

\n Organizatorzy przed lunchem, wpadli na pomysł, na realizację planu i\n wręczeniu kilku nagród pod szyldem: ng-awards.\n

\n\n

\n Dostałem nagrodę jako przedstawiciel organizacji WarsawJS - największej\n społeczności JavaScript-owej w Warszawie. Chciałem zaznaczyć, że\n brawa należą się wszystkim organizatorom WarsawJS, aktualnym\n

\n\n \n\n

\n oraz tym, którzy zrezygnowali z pełnienia tej funkcji, tj:\n

\n\n \n\n

\n W imieniu wszystkich całej organizacji bardo\n dziękuję :exclamation: :smiley:\n

\n\n \n
\n\n
\n

Spiderman na scenie!

\n\n

\n Jako 8 na scenie w roli speakera pojawił się\n Gerard Sans, który\n to opowiadał o tworzeniu aplikacji opartej na frameworku Angular2, którą\n realizował na potrzeby chorego Spider-mana.\n

\n\n

\n Brawa za kreatywność. Sala miała ubaw po pachy :smiley:\n

\n\n \n
\n\n
\n

Konkurs na najbardziej zwariowane zdjęcie

\n\n \n\n

\n Organizatorzy podczas otwarcia konferencji opowiadali o konkursie\n jaki będzie się toczył podczas wydarzenia, a mianowicie zawodów na\n najbardziej kreatywne zdjęcie tego dnia.\n

\n\n

\n Postanowiliśmy z Piotrem wzięć udział. Stąd też powyższe zdjęcie.\n Proszę nie martwcie się o nasze zdrowie psychiczne - wszystko gra :smiley:\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Na wstępie podsumowania, chciałem podziękować za możliwość uczestnictwa\n ekipie WarsawJS na tej konferencji. Jest to świetny dowód wsparcia\n warszawskich społeczności developerskich.\n

\n\n

Ocena od strony organizatora

\n\n

\n Konferencja od strony organizacyjnej stała na bardzo wysokim poziomie.\n Nie ma się do czego przyczepić :smiley:\n

\n\n

\n Mogę śmiało dać w skali 1-5 ocenę 5. Good job.\n

\n\n

Ocena strony merytorycznej

\n\n

\n Jako zwolennik wszystkiego co JavaScript-owe to dla mnie wszelkie\n rozmowy, prelekcje czy filmy są super. Więc nie jestem tutaj dobrą osobą\n na ocenę. Jeśli jednak miałbym dać jakąś cyferkę, to oczywiście\n 5 w tej samej skali co powyżej.\n

\n\n

Inne artykułu traktujące o ngPoland

\n\n

\n Pozwolę sobie na stworzenie listy artykułów o konferencji, które\n zostały napisane przez innych uczestników.\n

\n\n \n
\n\n
\n \n\n
\n Uri Shaked na scenie i jego zabawka - Raspberry PI, na której\n uruchomił grę "Simon says...".\n
\n
2016-11-24 23:00:00 konferencja-ngpoland-2016 ckbw97zyw0007i3umdszu2ola 2016-11-24 23:00:00 2016-11-24 23:00:00 cj16l2rf400cyi3um3iv2ex4f Umbrella JS jako alternatywa dla jQuery? https://devcorner.pl/umbrella-js-jako-alternatywa-dla-jquery/

Umbrella JS to bardzo lekka biblioteka JavaScript, która może stanowić alternatywę dla jQuery.  W tym artykule dowiesz się jak z niej korzystać. Główne plusy Umbrella JS: składnia jest mocno inspirowana jQuery. Jeśli korzystałeś z niej wcześniej, to w ciągu kilku minut odnajdziesz się w Umbrella w porównaniu do jQuery jest bardzo lekka – tylko 3kb po […]

\n

Artykuł Umbrella JS jako alternatywa dla jQuery? pochodzi z serwisu Devcorner.

2017-04-06 15:54:58 umbrella-js-jako-alternatywa-dla-jquery cjj4eqtmw0001i3umen1q8px0 2017-04-06 15:54:58 2017-04-06 15:54:58 cj19g0i2000dai3umcv3bbbad 10 przydatnych bibliotek PHP – kwiecień 2017 https://devcorner.pl/10-przydatnych-bibliotek-php-kwiecien-2017/

W tym artykule poznasz 10 użytecznych bibliotek PHP, które mogą okazać się przydatne w Twoich przyszłych projektach. Nie przedłużając, przejdźmy do pierwszej z nich. Simple Regex Language Wiemy, że długie wyrażenia regularne są zazwyczaj nieczytelne. Jest to szczególnie problematyczne, jeśli chcemy je zmodyfikować pod dłuższym czasie. Biblioteka Simple Regex Language wprowadza naturalny język do wyrażeń […]

\n

Artykuł 10 przydatnych bibliotek PHP – kwiecień 2017 pochodzi z serwisu Devcorner.

2017-04-08 15:56:33 10-przydatnych-bibliotek-php-kwiecien-2017 cjj4eqtmw0001i3umen1q8px0 2017-04-08 15:56:33 2017-04-08 15:56:33 cj1b92dxc00dli3umck0mgexx Przegląd Webmastera #8 – geolokalizacja, triki JS i alternatywa dla jQuery https://devcorner.pl/przeglad-webmastera-8-geolokalizacja-triki-js-alternatywa-dla-jquery/

Ten artykuł jest zapisem Przeglądu Webmastera #8 z 3.04.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #8 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. W tym tygodniu przesyłam Ci kolejną porcję przydatnych materiałów i narzędzi. Nie przedłużając, zaczynajmy Przegląd Webmastera 🙂 Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia – […]

\n

Artykuł Przegląd Webmastera #8 – geolokalizacja, triki JS i alternatywa dla jQuery pochodzi z serwisu Devcorner.

2017-04-09 22:17:36 przeglad-webmastera-8-geolokalizacja-triki-js-i-alternatywa-dla-jquery cjj4eqtmw0001i3umen1q8px0 2017-04-09 22:17:36 2017-04-09 22:17:36 @@ -1697,12 +1716,6 @@ cj27mhiyg00h9i3um5v04c9gq 10 przydatnych bibliotek JavaScript – maj 2017 https cj2bwa3bc00hmi3umasou6lwj Tworzenie wtyczek WordPress – #1 Wprowadzenie i organizacja katalogów https://devcorner.pl/tworzenie-wtyczek-wordpress-1-wprowadzenie-organizacja-katalogow/

W tym kursie nauczysz się tworzenia wtyczek do WordPress od podstaw. W pierwszej części utworzymy strukturę katalogów, dodamy wymagane informacje i nowy typ postów. Jaką funkcję będzie pełnić wtyczka? W kursie zbudujemy od podstaw wtyczkę Devcorner Events. Plugin umożliwi adminowi dodawanie wydarzeń (np. koncerty, festiwale, spotkania). Bez problemu ustawi ich datę, godzinę, miejsce i opis. W ustawieniach […]

\n

Artykuł Tworzenie wtyczek WordPress – #1 Wprowadzenie i organizacja katalogów pochodzi z serwisu Devcorner.

2017-05-05 13:47:09 tworzenie-wtyczek-wordpress-1-wprowadzenie-i-organizacja-katalogow cjj4eqtmw0001i3umen1q8px0 2017-05-05 13:47:09 2017-05-05 13:47:09 ckeivojko026ji3um047bbtoq Headless eCommerce: wrzesień z PWA Studio https://marcin-kwiatkowski.com/pl/headless-ecommerce-wrzesien-z-pwa-studio/

Jaki jest najlepszy headless frontend dla eCommerce? Headless staje się coraz bardziej popularne. Programiści muszą wybrać technologię, której chcą się uczyć. Właściciele sklepów muszą wybrać technologię dla swojego sklepu. Myślę, ze jest to bardzo trudny wybór, zarówno dla developerów jak i właścicieli sklepów. Pod jednym z moich poprzednich artykułów wywiązała się dosyć ciekawa dyskusja na […]

\n

Artykuł Headless eCommerce: wrzesień z PWA Studio pochodzi z serwisu Marcin Kwiatkowski: Tech eCommerce.

2020-08-31 18:50:39 headless-ecommerce-wrzesien-z-pwa-studio ckesc782o001oi3umhz387hrj 2020-08-31 18:50:39 2020-08-31 18:50:39 ckesc782o026ri3umc79d1esg Jak mockować zapytania i mutacje GraphQL? https://marcin-kwiatkowski.com/pl/jak-mockowac-zapytania-i-mutacje-graphql/

GraphQL to język zapytań dzięki któremu można pobierać dane. API zbudowane przy pomocy GrapQL ma wiele zalet. Poniżej dwie najważniejsze. Zapytania GraphQL zawsze zwracają przewidywalne wyniki Wysyłając zapytanie określasz co dokładnie potrzebujesz i to dostaniesz w odpowiedzi. Przykładowo jeśli potrzebujesz pobrać z backendu imię i nazwisko użytkownika to dostaniesz tylko to bez innych danych, które […]

\n

Artykuł Jak mockować zapytania i mutacje GraphQL? pochodzi z serwisu Marcin Kwiatkowski: Tech eCommerce.

2020-09-07 09:43:00 jak-mockowac-zapytania-i-mutacje-graphql ckesc782o001oi3umhz387hrj 2020-09-07 09:43:00 2020-09-07 09:43:00 -ck7wk740001xxi3um7itla0ew Firebase + React - autoryzacja w 10 minut? To mozliwe! https://frontlive.pl//autoryzacja-w-firebase/ To prostsze niż się wydaje! Załóżmy, że robisz stronę internetową/aplikację i potrzebujesz autoryzacji użytkowników wraz z prostym formularzem logowania i rejestracji. Pierwsza… 2020-03-18 00:00:00 firebase-react-autoryzacja-w-10-minut-to-mozliwe ckgvhpmo0001ji3umfm7ubw86 2020-03-18 00:00:00 2020-03-18 00:00:00 -ck87zpxc001yfi3um8m6797mi Firebase + React - pobieranie danych z Firestore https://frontlive.pl//pobieranie-danych-z-firestore/ Stwórzmy własną bazę danych! W poprzednim wpisie nauczyłeś się, jak dodać autoryzację użytkowników do swojej firebasowej aplikacji. Dziś poznamy Cloud Firestore. Co powinieneś… 2020-03-26 00:00:00 firebase-react-pobieranie-danych-z-firestore ckgvhpmo0001ji3umfm7ubw86 2020-03-26 00:00:00 2020-03-26 00:00:00 -ck8ca1hc001ymi3umf65pbugl Firebase + React - dodawanie danych do Firestore https://frontlive.pl//dodawanie-danych-do-firestore/ Okej, a co jeśli chciałbym coś dodać? Ostatnio utworzyliśmy prostą bazę danych, z której pobieraliśmy dane. Dziś dowiesz się, jak te dane dodawać.\nLet's go! Co powinieneś wiedzieć… 2020-03-29 00:00:00 firebase-react-dodawanie-danych-do-firestore ckgvhpmo0001ji3umfm7ubw86 2020-03-29 00:00:00 2020-03-29 00:00:00 -ck8tfbpc001zgi3um0t49dij6 Firebase + React - reguły zabezpieczeń, cloud functions i deploy https://frontlive.pl//reguly-zabezpieczen-funkcje-deploy/ Ostatnia prosta! W ostatnich trzech wpisach zapoznałeś się z podstawami firebase, dziś kończymy mini serię związaną z tą technologią. Czego się dowiesz? Jak zabezpieczyć swoje dane… 2020-04-10 00:00:00 firebase-react-reguly-zabezpieczen-cloud-functions-i-deploy ckgvhpmo0001ji3umfm7ubw86 2020-04-10 00:00:00 2020-04-10 00:00:00 -ck93feo0001zzi3um15rsc46a README na Githubie - robisz to źle! https://frontlive.pl//readme-github/ README jest to plik z rozszerzeniem .md, czyli . Markdown to, innymi słowy, język znaczników przeznaczony do formatowania tekstu. Jeżeli jesteś nowy w środowisku githuba, czy też… 2020-04-17 00:00:00 readme-na-githubie-robisz-to-zle ckgvhpmo0001ji3umfm7ubw86 2020-04-17 00:00:00 2020-04-17 00:00:00 -ck9dfhmo0020ki3um1oljdhxd CircleCi + Netlify - Continuous Integration & Deployment https://frontlive.pl//circleci-continuous-integration/ Każdy, kto wrzucał pliki na serwer ftp, wie, że bywało to męczące. Za każdym razem musieliśmy odpalić testy, zbudować projekt i tak w kółko... Na szczęście czasy się zmieniły, a… 2020-04-24 00:00:00 circleci-netlify-continuous-integration-and-deployment ckgvhpmo0001ji3umfm7ubw86 2020-04-24 00:00:00 2020-04-24 00:00:00 ck9nfklc00215i3umhi0u2mu3 Javascript - Nullish coalescing & Optional chaining https://frontlive.pl//javascript-nullish-coalescing-&-optional-chaining/ Specyfikacja ECMAScript cały czas się rozwija, powstają nowe ciekawe featury. Jakiś czas temu, zostały\nzaproponowane, przez Gabriela Isenberga, dwa nowe: nullish coalescing i… 2020-05-01 00:00:00 javascript-nullish-coalescing-and-optional-chaining ckgvhpmo0001ji3umfm7ubw86 2020-05-01 00:00:00 2020-05-01 00:00:00 ck9xfnk00021ii3um0cae3k6q TypeScript - podstawowe typy, funkcje, tablice i interfejsy https://frontlive.pl//typescript-podstawy/ Wprowadzenie Czymże jest TypeScript? TypeScript jest to statycznie typowany język od Microsoftu, bazuje on na JavaScripcie, do którego jest kompilowany. Jest to nieoficjalny… 2020-05-08 00:00:00 typescript-podstawowe-typy-funkcje-tablice-i-interfejsy ckgvhpmo0001ji3umfm7ubw86 2020-05-08 00:00:00 2020-05-08 00:00:00 cka7fqio0021xi3um1zr74hn2 TypeScript - Generics, klasy i zaawansowane typy https://frontlive.pl//typescript-sredniozaawansowany/ Wprowadzenie W poprzednim wpisie poznałeś podstawy TypeScriptu, mam nadzieję, że przećwiczyłeś je w praktyce!\nDziś coś dla fanów OOP, ale nie tylko! Poznamy również Generics i… 2020-05-15 00:00:00 typescript-generics-klasy-i-zaawansowane-typy ckgvhpmo0001ji3umfm7ubw86 2020-05-15 00:00:00 2020-05-15 00:00:00 @@ -1714,6 +1727,7 @@ cj2dcgbts00hsi3um4rz4e68w Tworzenie wtyczek WordPress – #2 Niestandardowe pola cj2fojp6000i6i3um2s8k4ukn Przegląd Webmastera #12 – utrata połączenia i narzędzia Webmastera https://devcorner.pl/przeglad-webmastera-12-utrata-polaczenia-narzedzia-webmastera/

Ten artykuł jest zapisem Przeglądu Webmastera #12 z 1.05.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #12 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. W tym tygodniu przesyłam Ci kolejną porcję przydatnych materiałów i narzędzi. Nie przedłużając, zaczynajmy Przegląd Webmastera 🙂 Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia […]

\n

Artykuł Przegląd Webmastera #12 – utrata połączenia i narzędzia Webmastera pochodzi z serwisu Devcorner.

2017-05-08 05:21:45 przeglad-webmastera-12-utrata-polaczenia-i-narzedzia-webmastera cjj4eqtmw0001i3umen1q8px0 2017-05-08 05:21:45 2017-05-08 05:21:45 cj2hk7vbs00ibi3um1nij33te 10 przydatnych bibliotek PHP – maj 2017 https://devcorner.pl/10-przydatnych-bibliotek-php-maj-2017/

W tym artykule poznasz 10 użytecznych bibliotek PHP, które mogą okazać się przydatne w Twoich przyszłych projektach. Nie przedłużając, przejdźmy do pierwszej z nich. Doorman Doorman pozwala na generowanie kodów dostępowych, które możesz rozdać testerom swojej aplikacji Laravel. Możesz powiązać kod z wybranym adresem email, udostępnić go dla wszystkich, ustawić ograniczoną ilość kluczy i datę wygaśnięcia […]

\n

Artykuł 10 przydatnych bibliotek PHP – maj 2017 pochodzi z serwisu Devcorner.

2017-05-09 12:56:07 10-przydatnych-bibliotek-php-maj-2017 cjj4eqtmw0001i3umen1q8px0 2017-05-09 12:56:07 2017-05-09 12:56:07 cj2khyrxs00iki3um97zm7crg Tworzenie wtyczek WordPress – #3 Wyświetlanie wydarzeń i ustawienia https://devcorner.pl/tworzenie-wtyczek-wordpress-3-wyswietlanie-wydarzen-ustawienia/

W trzeciej części kursu “Tworzenie wtyczek WordPress” wyświetlimy wydarzenia wewnątrz widgetu. Dodamy również stronę ustawień i wygenerujemy na ich podstawie style CSS. Wyświetlanie wydarzeń W poprzedniej części kursu dodaliśmy do wtyczki widget. W tej chwili wyświetla on tylko tytuł podany w panelu administratora. W zakładce Events prawdopodobnie masz już kilkanaście przykładowych wydarzeń. Możesz je teraz usunąć i […]

\n

Artykuł Tworzenie wtyczek WordPress – #3 Wyświetlanie wydarzeń i ustawienia pochodzi z serwisu Devcorner.

2017-05-11 14:16:22 tworzenie-wtyczek-wordpress-3-wyswietlanie-wydarzen-i-ustawienia cjj4eqtmw0001i3umen1q8px0 2017-05-11 14:16:22 2017-05-11 14:16:22 +cjsb0ocew01fxi3umanoa2gyj JavaScript Promise #1 - Wprowadzenie https://www.youtube.com/watch?v=FtdM3LIUXx4 Kod asynchroniczny wymaga od nas specjalnej obsługi. Jednym z narzędzi, które nam to umożliwia są obietnice (promise). W tym filmie znajdziesz odpowiedź na pytanie czym jest obiekt Promise oraz przykład jego wykorzystania.\n\nŹródła: \nMDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\n\n--------------------------------------\n\nBądź na bieżąco z Overment, znajdź mnie na: \n\nKanale Discord: \nhttps://discordapp.com/invite/RdVgNYY\n\nFacebooku: \nhttp://www.facebook.com/overment 2019-02-19 00:14:47 javascript-promise-1-wprowadzenie ckieg15g0001bi3um0fj3gred 2019-02-19 00:14:47 2019-02-19 00:14:47 cj2nga4ns00isi3um662o9pgv 10 niezbędnych pluginów do Atom https://devcorner.pl/10-niezbednych-pluginow-atom/

W tym artykule poznasz 10 przydatnych wtyczek do edytora Atom. Koniecznie sprawdź bonusowy plugin, który znajdziesz na końcu 🙂 Minimap Minimap to jeden z najpopularniejszych pluginów do Atom. Działanie jest proste – wtyczka dodaje w prawym górnym rogu edytora podgląd kodu. Znacznie ułatwia to nawigację wewnątrz pliku i usprawnia pracę. Auto Close HTML Auto Close […]

\n

Artykuł 10 niezbędnych pluginów do Atom pochodzi z serwisu Devcorner.

2017-05-13 15:52:31 10-niezbednych-pluginow-do-atom cjj4eqtmw0001i3umen1q8px0 2017-05-13 15:52:31 2017-05-13 15:52:31 cj2q383q800j0i3um0m3t5do4 Przegląd Webmastera #13 – tworzenie wtyczek WordPress https://devcorner.pl/przeglad-webmastera-13-tworzenie-wtyczek-wordpress/

Ten artykuł jest zapisem Przeglądu Webmastera #13 z 8.05.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #13 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. W tym tygodniu przesyłam Ci kolejną porcję przydatnych materiałów i narzędzi. Nie przedłużając, zaczynajmy Przegląd Webmastera 🙂 Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia […]

\n

Artykuł Przegląd Webmastera #13 – tworzenie wtyczek WordPress pochodzi z serwisu Devcorner.

2017-05-15 12:10:20 przeglad-webmastera-13-tworzenie-wtyczek-wordpress cjj4eqtmw0001i3umen1q8px0 2017-05-15 12:10:20 2017-05-15 12:10:20 cj2uhhct400jei3ume85c0z9l Tworzenie wtyczek WordPress – #4 Shortcode i ustawienia https://devcorner.pl/tworzenie-wtyczek-wordpress-4-shortcode-ustawienia/

W czwartej części kursu “Tworzenie wtyczek WordPress” dodamy nowy shortcode. Oprócz tego utworzymy dwie nowe opcje – kolor tekstu i ilość wyświetlanych wydarzeń. Dodanie Shortcode Shortcode to specjalny skrót w WordPress, który pozwala na przypisanie określonego kodu (np. HTML) do dowolnego skrótu tekstowego. Następnie skrót może zostać użyty wewnątrz strony, posta itp. Dodanie shortcode rozpoczniemy […]

\n

Artykuł Tworzenie wtyczek WordPress – #4 Shortcode i ustawienia pochodzi z serwisu Devcorner.

2017-05-18 14:00:31 tworzenie-wtyczek-wordpress-4-shortcode-i-ustawienia cjj4eqtmw0001i3umen1q8px0 2017-05-18 14:00:31 2017-05-18 14:00:31 @@ -1735,6 +1749,7 @@ cj3lnj0nc00lwi3umbl1ges04 10 niesamowitych tabel jQuery https://devcorner.pl/nie ckbl1scw0023li3um06ek7o77 Biblioteki do formularzy w React #3 – formik https://frontcave.pl/biblioteki-do-formularzy-w-react-3-formik/

Ten post jest trzecią częścią serii o obsłudze formularzy w React: Spis Treści Wprowadzenie Prosty przykład Baza do dalszych prac Wersja klasyczna Wersja z hookami Walidacja Prosta walidacja Asynchroniczna walidacja Walidacja z pomocą biblioteki Yup i tworzenie schematów Pełny kod walidacji Customowe komponenty z hookiem useField Przykład zaawansowany Brak obsługi plików w Formik Komponent FieldsArray … Czytaj dalej Biblioteki do formularzy w React #3 – formik

\n

Artykuł Biblioteki do formularzy w React #3 – formik pochodzi z serwisu Front Cave.

2020-06-18 17:18:00 biblioteki-do-formularzy-w-react-3-formik ckirm3wzs001li3umfdkcfl6k 2020-06-18 17:18:00 2020-06-18 17:18:00 ckc3uqrrk0246i3um5xybd3u6 Biblioteki do formularzy w React #4 – Final Form https://frontcave.pl/biblioteki-do-formularzy-w-react-4-final-form/

Ten post jest ostatnim artykułem w serii o obsłudze formularzy w React: Spis Treści Wprowadzenie Przykład prosty Walidacja Walidacja prosta Walidacja asynchroniczna Pełny kod przykładu prostego Repozytorium przykładu prostego na Github Przykład zaawansowany Problemy wersji 6.4.0 z walidacją asynchroniczną CSS GRID Dodawanie zdjęć do galerii za pomocą customowego komponentu Walidacja rozmiarów obrazka Pełny kod przykładu … Czytaj dalej Biblioteki do formularzy w React #4 – Final Form

\n

Artykuł Biblioteki do formularzy w React #4 – Final Form pochodzi z serwisu Front Cave.

2020-07-01 21:08:26 biblioteki-do-formularzy-w-react-4-final-form ckirm3wzs001li3umfdkcfl6k 2020-07-01 21:08:26 2020-07-01 21:08:26 ckcoyjps80251i3um48enfvxd Poznaj bibliotekę Yup, która pomoże Ci z walidacją formularzy https://frontcave.pl/poznaj-biblioteke-yup-ktora-pomoze-ci-z-walidacja-formularzy/

Spis treści Wprowadzenie Zastosowanie biblioteki Prosta walidacja true / false Walidacja ze zwrotką zawierającą błędy Własne teksty dla błędów walidacji Zastosowanie Yup w React Czysty React bez bibliotek Pełny kod Kod na github Wsparcie w bibliotekach do obsługi formularzy w React Podsumowanie Wprowadzenie Choć od dawna HTML5 udostępnia nam możliwość walidowania formularzy za pomocą atrybutów … Czytaj dalej Poznaj bibliotekę Yup, która pomoże Ci z walidacją formularzy

\n

Artykuł Poznaj bibliotekę Yup, która pomoże Ci z walidacją formularzy pochodzi z serwisu Front Cave.

2020-07-16 15:38:05 poznaj-biblioteke-yup-ktora-pomoze-ci-z-walidacja-formularzy ckirm3wzs001li3umfdkcfl6k 2020-07-16 15:38:05 2020-07-16 15:38:05 +cjskl868001gbi3um418807lf JavaScript Promise #2 - Promise Constructor https://www.youtube.com/watch?v=7pvSrGLEJxI Możemy utworzyć obietnicę, tworząc obiekt z pomocą konstruktora. W tym filmie dowiesz się jak dokładnie to robić i na co warto zwrócić uwagę. Na koniec filmu znajdziesz praktyczny przykład implementacji funkcji wykorzystującej obietnicę. 2019-02-25 17:00:00 javascript-promise-2-promise-constructor ckieg15g0001bi3um0fj3gred 2019-02-25 17:00:00 2019-02-25 17:00:00 ckd93xxo0025bi3um5o5j0kh2 GraphQL w React #1 – poznaj podstawy GraphQL! https://frontcave.pl/graphql-w-react-1-poznaj-podstawy-graphql/

Spis treści Wprowadzenie Podstawy GraphQL Schema Scalar types Object types Input types Root types Resolvers Uruchomienie serwera GraphQL Instalacja i implementacja Instalacja serwera Apollo Uruchomienie serwera Apollo Pełny kod aplikacji Kod w repozytorium Github Queries – wysyłanie żądań na serwer Kod w repozytorium Github Podsumowanie Wprowadzenie Popularność GraphQL rośnie z dnia na dzień – warto … Czytaj dalej GraphQL w React #1 – poznaj podstawy GraphQL!

\n

Artykuł GraphQL w React #1 – poznaj podstawy GraphQL! pochodzi z serwisu Front Cave.

2020-07-30 18:04:30 graphql-w-react-1-poznaj-podstawy-graphql ckirm3wzs001li3umfdkcfl6k 2020-07-30 18:04:30 2020-07-30 18:04:30 ckecwj2ds026di3umh9fnhyp2 GraphQL w React #2 – połącz się z serwerem dzięki Apollo Client https://frontcave.pl/graphql-w-react-2-polacz-sie-z-serwerem-dzieki-apollo-client/

Ten post jest drugim z serii o GraphQL w React: Spis Treści Wprowadzenie Użycie klienta Apollo Client do załadowania danych z serwera Wystartowanie serwera Utworzenie klienta i pobranie danych z serwera Udostępnienie klienta w aplikacji Pobranie i wyświetlenie danych za pomocą hooka useQuery i zapisanie danych za pomocą hooka useMutation Komponent Animals i pochodne – … Czytaj dalej GraphQL w React #2 – połącz się z serwerem dzięki Apollo Client

\n

Artykuł GraphQL w React #2 – połącz się z serwerem dzięki Apollo Client pochodzi z serwisu Front Cave.

2020-08-27 14:27:46 graphql-w-react-2-polacz-sie-z-serwerem-dzieki-apollo-client ckirm3wzs001li3umfdkcfl6k 2020-08-27 14:27:46 2020-08-27 14:27:46 ckeraeqg8026qi3umd0m24moe Dotychczasowa działalność Frontcave na Youtube https://frontcave.pl/dotychczasowa-dzialalnosc-frontcave-na-youtube/

Spis Treści Wprowadzenie Dotychczasowe nagrania CSS GRID – webinar Tarnow Devs Redux Toolkit – wprowadzenie Niemutowalność w React z ImmerJS – wprowadzenie Podsumowanie Wprowadzenie Poza wpisami na blogu, istnieje kanał Frontcave na Youtube. Choć w tym momencie nie jest on tak aktywny jak sam blog, są już plany na kolejne nagrania. Tutaj zaprezentowane zostaną dotychczasowe … Czytaj dalej Dotychczasowa działalność Frontcave na Youtube

\n

Artykuł Dotychczasowa działalność Frontcave na Youtube pochodzi z serwisu Front Cave.

2020-09-06 16:05:05 dotychczasowa-dzialalnosc-frontcave-na-youtube ckirm3wzs001li3umfdkcfl6k 2020-09-06 16:05:05 2020-09-06 16:05:05 @@ -1742,6 +1757,7 @@ ck8hkytx401yyi3umarkb87gt AWS Amplify, czyli gotowy stack aplikacji webowej http cj3tuq5t400mci3um96cs7ngt Przegląd Webmastera #17 – optymalne środowisko do pracy Web Developera https://devcorner.pl/przeglad-webmastera-17-optymalne-srodowisko-pracy-web-developera/

Ten artykuł jest zapisem Przeglądu Webmastera #17 z 5.06.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #17 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. W tym tygodniu przesyłam Ci kolejną porcję przydatnych materiałów i narzędzi. Nie przedłużając, zaczynajmy Przegląd Webmastera 🙂 Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia […]

\n

Artykuł Przegląd Webmastera #17 – optymalne środowisko do pracy Web Developera pochodzi z serwisu Devcorner.

2017-06-12 08:03:13 przeglad-webmastera-17-optymalne-srodowisko-do-pracy-web-developera cjj4eqtmw0001i3umen1q8px0 2017-06-12 08:03:13 2017-06-12 08:03:13 cj3vpchbc00mii3um0rbz28ao 20 przydatnych narzędzi Webmastera #3 https://devcorner.pl/20-przydatnych-narzedzi-webmastera-3/

W tym artykule poznasz 20 narzędzi, które mogą okazać się przydatne w Twoich kolejnych projektach. Nie przedłużając, przejdźmy do pierwszego z nich. extractCSS extractCSS pozwala “wyciągnąć” id, klasy i style liniowe z kodu HTML. Na ich podstawie generuje podstawową strukturę CSS. CSScomb CSScomb służy do sortowania reguł CSS według prawidłowej kolejności. is.js is.js to prosty […]

\n

Artykuł 20 przydatnych narzędzi Webmastera #3 pochodzi z serwisu Devcorner.

2017-06-13 15:08:09 20-przydatnych-narzedzi-webmastera-3 cjj4eqtmw0001i3umen1q8px0 2017-06-13 15:08:09 2017-06-13 15:08:09 cj4014f4800mri3umcpsc1dog Najszybszy sposób na pokazywanie powiadomień Push https://devcorner.pl/najszybszy-sposob-pokazywanie-powiadomien-push/

Notyfikacje JavaScript pozwalają na wyświetlanie różnych powiadomień bezpośrednio w przeglądarce użytkownika. Są dostępne od dłuższego czasu, ale dopiero od niedawna są wspierane przez większość przeglądarek desktopowych i mobilnych. W tym krótkim artykule dowiesz się jak w prosty sposób tworzyć powiadomienia push. Instalacja Push.js Do generowania powiadomień wykorzystamy bibliotekę Push.js. Instalacja ogranicza się do pobrania i podpięcia głównego […]

\n

Artykuł Najszybszy sposób na pokazywanie powiadomień Push pochodzi z serwisu Devcorner.

2017-06-16 15:48:53 najszybszy-sposob-na-pokazywanie-powiadomien-push cjj4eqtmw0001i3umen1q8px0 2017-06-16 15:48:53 2017-06-16 15:48:53 +cjsulb8qw01gpi3um3hzq60zu JavaScript Promise #3 - Chaining https://www.youtube.com/watch?v=iA-XoMkqCUA Chaining polega na łączeniu ze sobą wielu obietnic. Dzięki czemu możemy wykorzystywać wynik poprzednich obietnic w kolejnych. \n\nChaining możliwy jest z wykorzystaniem funkcji then(). 2019-03-04 17:00:05 javascript-promise-3-chaining ckieg15g0001bi3um0fj3gred 2019-03-04 17:00:05 2019-03-04 17:00:05 cj4401oa800mwi3um5k537d8b Przegląd Webmastera #18 – niesamowite tabele i obsługa błędów JS https://devcorner.pl/przeglad-webmastera-18-niesamowite-tabele-obsluga-bledow-js/

Ten artykuł jest zapisem Przeglądu Webmastera #18 z 12.06.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #18 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. W tym tygodniu przesyłam Ci kolejną porcję przydatnych materiałów i narzędzi. Nie przedłużając, zaczynajmy Przegląd Webmastera 🙂 Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia […]

\n

Artykuł Przegląd Webmastera #18 – niesamowite tabele i obsługa błędów JS pochodzi z serwisu Devcorner.

2017-06-19 10:29:50 przeglad-webmastera-18-niesamowite-tabele-i-obsluga-bledow-js cjj4eqtmw0001i3umen1q8px0 2017-06-19 10:29:50 2017-06-19 10:29:50 cj4ct2l9400n5i3um1oiebb87 7 najlepszych skyptów JavaScript do uploadowania plików https://devcorner.pl/7-najlepszych-skyptow-javascript-uploadowania-plikow/

W tym artykule poznasz 7 świetnych narzędzi JavaScript, które pozwolą Ci na dodanie uploadu metodą drag and drop. Fileuploader Fileuploader to popularne narzędzie, które umożliwia przesyłanie plików metodą drag and drop. Składa się ze dwóch części: skryptu jQuery, który odpowiada za interakcję z użytkownikiem i części PHP, która zajmuje się zapisaniem pliku na serwerze. Dropzone […]

\n

Artykuł 7 najlepszych skyptów JavaScript do uploadowania plików pochodzi z serwisu Devcorner.

2017-06-25 14:24:31 7-najlepszych-skyptow-javascript-do-uploadowania-plikow cjj4eqtmw0001i3umen1q8px0 2017-06-25 14:24:31 2017-06-25 14:24:31 cj4dxphls00n9i3umbejtd0hp Przegląd Webmastera #19 – powiadomienia i przydatne narzędzia https://devcorner.pl/przeglad-webmastera-19-powiadomienia-przydatne-narzedzia/

Ten artykuł jest zapisem Przeglądu Webmastera #19 z 19.06.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #19 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. W tym tygodniu przesyłam Ci kolejną porcję przydatnych materiałów i narzędzi. Nie przedłużając, zaczynajmy Przegląd Webmastera 🙂 Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia […]

\n

Artykuł Przegląd Webmastera #19 – powiadomienia i przydatne narzędzia pochodzi z serwisu Devcorner.

2017-06-26 09:22:04 przeglad-webmastera-19-powiadomienia-i-przydatne-narzedzia cjj4eqtmw0001i3umen1q8px0 2017-06-26 09:22:04 2017-06-26 09:22:04 @@ -1749,6 +1765,7 @@ cj4ihbuug00nhi3um2plx9kun 12 niesamowitych karuzel CSS/JS https://devcorner.pl/1 cj4nyuzm800nri3um4p9l8iz2 Przegląd Webmastera #20 – szybki upload drag and drop https://devcorner.pl/przeglad-webmastera-20-szybki-upload-drag-and-drop/

Ten artykuł jest zapisem Przeglądu Webmastera #20 z 26.06.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #20 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. W tym tygodniu przesyłam Ci kolejną porcję przydatnych materiałów i narzędzi. Nie przedłużając, zaczynajmy Przegląd Webmastera 🙂 Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia – […]

\n

Artykuł Przegląd Webmastera #20 – szybki upload drag and drop pochodzi z serwisu Devcorner.

2017-07-03 09:52:02 przeglad-webmastera-20-szybki-upload-drag-and-drop cjj4eqtmw0001i3umen1q8px0 2017-07-03 09:52:02 2017-07-03 09:52:02 ckf9wuikg027bi3umfpke3j6h GraphQL w React #3 – cache, WebSocket i debugowanie w Apollo Client https://frontcave.pl/graphql-w-react-3-cache-websocket-i-debugowanie-w-apollo-client/

Ten post jest trzecim z serii o GraphQL: Spis Treści Wprowadzenie Zarządzanie cache w Apollo Client Cykliczne powtarzanie zapytania do serwera Ręczna aktualizacja cache Dwukierunkowa komunikacja z serwerem za pomocą Subscription i WebSocket Obsługa Subscriptions i WebSocket na serwerze Obsługa Subscriptions i WebSocket na kliencie Kod obu aplikacji na Github Debugowanie za pomocą Apollo Developer … Czytaj dalej GraphQL w React #3 – cache, WebSocket i debugowanie w Apollo Client

\n

Artykuł GraphQL w React #3 – cache, WebSocket i debugowanie w Apollo Client pochodzi z serwisu Front Cave.

2020-09-19 16:53:04 graphql-w-react-3-cache-websocket-i-debugowanie-w-apollo-client ckirm3wzs001li3umfdkcfl6k 2020-09-19 16:53:04 2020-09-19 16:53:04 ckhp2xa3k02adi3umhltagaoz Dowiedz się, w jaki sposób w Chrome DevTools możesz debugować zmiany w HTML https://frontcave.pl/dowiedz-sie-w-jaki-sposob-w-chrome-devtools-mozesz-debugowac-zmiany-w-html/

Spis treści Wprowadzenie Zatrzymywanie się na modyfikacji HTML Modyfikacja wewnątrz elementu Modyfikacja atrybutu elementu Usunięcie elementu Kod w repozytorium Github React – zatrzymywanie się na modyfikacji HTML Kod w repozytorium Github Podsumowanie Wprowadzenie Możliwość debugowania zmian w HTML była funkcjonalnością, o której sam długo nie widziałem. Co prawda jest ona dużo bardziej użyteczna w JS … Czytaj dalej Dowiedz się, w jaki sposób w Chrome DevTools możesz debugować zmiany w HTML

\n

Artykuł Dowiedz się, w jaki sposób w Chrome DevTools możesz debugować zmiany w HTML pochodzi z serwisu Front Cave.

2020-11-19 16:59:08 dowiedz-sie-w-jaki-sposob-w-chrome-devtools-mozesz-debugowac-zmiany-w-html ckirm3wzs001li3umfdkcfl6k 2020-11-19 16:59:08 2020-11-19 16:59:08 +cj2nlwnk000iti3um8pzgarb1 Daj Się Poznać #7 Upgrade do AngularJS 1.6 - Components, ES6, Webpack https://www.idaszak.com/article/2017/05/13/daj-sie-poznac-7-upgrade-angular-1.5-es6-webpack
\t\r\n\r\n\r\n
\r\n


\r\n

W poprzednich częściach tworzyliśmy aplikację AngularJS Mistrz Makro, która jest quizem, pozwalającym na zgadywanie makroskładników produktu przedstawionego na zdjęciu. Udało nam się ukończyć wstępny zarys działającej aplikacji. Tym razem zajmiemy się zmianą kodu do wersji AngularJS 1.6. Nasza aplikacja będzie przerobiona na najnowszy standard, pozwalający na łatwiejszą zmianę do Angulara (2/4) w razie potrzeby. Skorzystamy także z Babela, który pozwoli nam pisać kod w ES6, dzięki czemu zastosujemy sporo rzeczy, które poznaliśmy przy serii postów o ES6. Zaczynajmy!

\r\n\r\n\r\nJeśli pobrałeś już moje repozytorium z Githuba, co opisałem w poprzednim poście to możesz teraz przeskoczyć do kolejnego commita, który pokaże Ci kod z tego posta:\r\n\r\n
$ git checkout 1a8c63fba51ef10ff143c719c30e8430c1759ab9
\r\n\r\n

# Co się zmieni w stosunku do poprzedniego kodu?

\r\n\r\n

Przede wszystkim skorzystamy tym razem z innego startera. NG6-starter ze skonfigurowanym gulpem, webpackiem, babelem do ES6, przygotowany do korzystania z SASS oraz testowania będzie naszym wyborem.

\r\n
    \r\n
  • Dyrektywa zostanie zamieniona przez component
    • \r\n
  • Class - Użyjemy klas z ES6 do tworzenia serwisów i komponentów. Więcej na ten temat możesz dowiedzieć się tutaj.
    • \r\n
  • Webpack - zamiast bowera skorzystamy z webpacka.
    • \r\n
  • arrow functions - w kodzie będziemy używali funkcji strzałkowych z ES6. Przeczytać na ten temat możesz tutaj.
    • \r\n
  • let skorzystamy także z nowego słowa kluczowego, które poznaliśmy w ES6. Więcej: tutaj.
    • \r\n
\r\n\r\n

# GetJson service - zmiany

\r\n\r\n

Serwisy tworzymy jako klasy z konstruktorem i metodami.

\r\n\r\n
 \r\nexport default class GetJson {\r\n  constructor($http) {\r\n    this._$http = $http;\r\n  }\r\n\r\n  getData() {\r\n    let request = {\r\n      url: 'answers.JSON',\r\n      method: 'GET',\r\n    };\r\n    return this._$http(request).then((res) => res.data);\r\n  }\r\n}
\r\n\r\n

Tworzymy klasę GetJson gotową do eksportu i użycia w komponencie. W konstruktorze, który wywołuje się przy stworzeniu obiektu mamy wstrzykiwanie zależności, dzięki któremu możemy korzystać z funkcji $http. Metoda getData określa ścieżkę pliku i typ komunikacji. Jako wartość zwracaną mamy this._$http, z którego korzystamy tak jak przypisaliśmy to w konstruktorze. Funkcja zwraca dane z piku answers.JSON.

\r\n\r\n
 \r\nimport angular from 'angular';\r\n\r\nimport productsList from './productsList';\r\nimport GetJson from './GetJson';\r\n\r\nexport default angular\r\n  .module('app.services', [])\r\n  .service({ productsList })\r\n  .service({ GetJson });
\r\n\r\n

W pliku services.js importujemy nasz serwis i rejestrujemy go do modułu app.services.

\r\n\r\n

# Modele z danymi - zmiany

\r\n

Wcześniej mieliśmy pliki macro.model.js oraz product.model.js, które były serwisami, do których zapisywaliśmy nasze dane. Tym razem stworzymy jeden serwis składający się z dwóch klas.

\r\n

Tworzymy plik ProductsList.js zawierający dwie klasy.

\r\n\r\n
 \r\nclass Macros {\r\n  constructor(id, name, kcal, protein, carb, fat, img){\r\n    this.id = id;\r\n    this.name = name;\r\n    this.kcal = kcal;\r\n    this.protein = protein;\r\n    this.carb = carb;\r\n    this.fat = fat;\r\n    this.img = img;\r\n  }\r\n}
\r\n\r\n

Macros to pierwsza klasa odpowiadająca za macro.model.js. Nie będzie wykorzystywana poza tym plikiem, więc nie musimy jej eksportować. Nasza klasa tworzy nowe obiekty z podanych wartości.

\r\n

Kolejną klasą w tym pliku będzie ProductsList czyli odpowiednik product.model.js.

\r\n\r\n
 \r\nexport default class ProductsList {\r\n  constructor() {\r\n    this.list = [];\r\n  }\r\n\r\n  add(id, name, kcal, protein, carb, fat, img){\r\n    const macros = new Macros(id, name, kcal, protein, carb, fat, img);\r\n    this.list.push(macros);\r\n  }\r\n\r\n  getList(id){\r\n    return id < this.list.length ? this.list[id] : false; \r\n  }\r\n}
\r\n\r\n

Eksportujemy klasę, ponieważ będziemy korzystać z niej w naszym komponencie. W konstruktorze tworzymy listę, w której będziemy przechowywać obiekty. Metoda add dodaje nasze dane do obiektu wytworzonego przez klasę Macros, a następnie dołącza go do tablicy this.list. Metoda getList wyszukuje obiekt o podanym id i go zwraca. Serwis rejestrujemy tak jak to było w przypadku GetJson.

\r\n\r\n

# Directive - zmiana na Component - controller

\r\n\r\n

Nasz plik macro.directive.js zostanie zastąpiony plikiem controller.js

\r\n\r\n
 \r\nexport default class Quiz {\r\n  /**\r\n   * @param {ProductsList} productsList\r\n   */\r\n  constructor(productsList, GetJson) {\r\n    "ngInject";\r\n    this.productsList = productsList;\r\n    this.GetJson = GetJson;\r\n\r\n    this.id = 0;\r\n    this.quizEnd = true;\r\n    this.inProgress = false;\r\n    this.Res = [];\r\n    this.id = 0;\r\n    this.name = "";\r\n    this.kcal = "";\r\n    this.protein;\r\n    this.carb;\r\n    this.fat;\r\n    this.img = "";\r\n    this.answerMode = false;\r\n\r\n    this.init();\r\n  }
\r\n\r\n

Stworzyliśmy klasę Quiz, w którą wstrzykujemy productsList i GetJson. Nasz konstruktor ustawia wartości początkowe i wywołuje metodę this.init();.

\r\n\r\n
init(){\r\n  let answers = this.GetJson.getData();\r\n  answers.then(data => {\r\n    data.questions.forEach(answer => {\r\n      this.productsList.add(answer.id,\r\n                            answer.name,\r\n                            answer.kcal,\r\n                            answer.protein,\r\n                            answer.carb,\r\n                            answer.fat,\r\n                            answer.img);\r\n    });\r\n  });\r\n}
\r\n\r\n

Funkcja init() zmieniła się nieznacznie w stosunku do naszego poprzedniego kodu. Odbieramy dane z GetJson i dodajemy je do serwisu productsList za pomocą metody add().

\r\n\r\n
start() {\r\n  this.id = 0;\r\n  this.quizEnd = false;\r\n  this.inProgress = true;\r\n  this.getQuestion();\r\n}\r\n getQuestion() {\r\n  var q = this.productsList.getList(this.id);\r\n  if(q) {\r\n    this.name = q.name;\r\n    this.kcal = q.kcal;\r\n    this.protein = q.protein;\r\n    this.carb = q.carb;\r\n    this.fat = q.fat;\r\n    this.img = q.img;\r\n    this.answerMode = true;\r\n  } else {\r\n    this.quizEnd = true;\r\n  }\r\n}\r\n\r\nnextQuestion() {\r\n  this.id++;\r\n  this.getQuestion();\r\n}\r\n\r\nreset() {\r\n  this.inProgress = false;\r\n  this.score = 0;\r\n}
\r\n\r\n

Funkcje start(), getQuestion(), nextQuestion(), reset() pozostają praktycznie bez zmian, poza różnicami w składni.

\r\n\r\n
check(){\r\n  let test = function(modelData, viewData){\r\n    if(!viewData) return "";\r\n    if(modelData == viewData) return "idealnie!";\r\n    return modelData > viewData ? modelData - viewData + " za mało" : viewData - modelData + " za dużo";\r\n  };\r\n  this.Res = [];\r\n  this.answerMode = false;\r\n  this.Res[0] = test(this.kcal, this.macro1);\r\n  this.Res[1] = test(this.protein, this.macro2);\r\n  this.Res[2] = test(this.carb, this.macro3);\r\n  this.Res[3] = test(this.fat, this.macro4);\r\n}
\r\n\r\n

Funkcja check() została tylko troszkę skrócona, a funkcja test została dołączona wewnątrz metody.

\r\n\r\n

# Directive - zmiana na Component - pozostałe pliki

\r\n

Nasz komponent musimy określić w pliku quiz.component.js. Restrict, bindings, template znamy już z dyrektywy.

\r\n\r\n
import template from './mainFile.html';\r\nimport controller from './controller';\r\n\r\nlet quizComponent = {\r\n  restrict: 'E',\r\n  bindings: {},\r\n  template,\r\n  controller,\r\n  controllerAs: 'c'\r\n};\r\n\r\nexport default quizComponent;
\r\n\r\n

Nowością jest controllerAs, który określa jak będziemy odwoływać się do zmiennych i metod, zamiast użycia $scope.

\r\n

Używamy tym razem odwołania c.zmienna zamiast $scope.zmienna. Poza tymi zmianami, plik html naszej dyrektywy pozostaje taki sam:

\r\n\r\n
<div class="container" ng-show="c.inProgress">\r\n  <div class="row">\r\n    <div class="col-md-12">\r\n\r\n      <div ng-show="!c.quizEnd">\r\n        <h2></h2>\r\n        <img ng-src="/assets/">\r\n        <p>Kcal:</p><input type="number" ng-model="c.macro1">\r\n        <p ng-show="!c.answerMode"></p>\r\n        <p>Białko:</p><input type="number" ng-model="c.macro2">\r\n        <p ng-show="!c.answerMode"></p>\r\n        <p>Węglowodany:</p><input type="number" ng-model="c.macro3">\r\n        <p ng-show="!c.answerMode"></p>\r\n        <p>Tłuszcz:</p><input type="number" ng-model="c.macro4">\r\n        <p ng-show="!c.answerMode"></p>\r\n        <button ng-click="c.check()" ng-show="c.answerMode">Submit</button>\r\n      \r\n        <div ng-show="!c.answerMode">\r\n          <button ng-click="c.nextQuestion()">Next</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div ng-show="c.quizEnd">\r\n        <button ng-click="c.reset()">Play again</button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class="container" ng-show="!c.inProgress">\r\n  <div class="row">\r\n    <button ng-click="c.start()">Start</button>\r\n  </div>\r\n</div>
\r\n\r\n

Ostatnim plikiem jest components.js, który pozwala zarejestrować nasz komponent do kolejnego modułu app.components:

\r\n\r\n
import angular from 'angular';\r\n\r\nimport quizComponent from './quiz.component';\r\n\r\nexport default angular\r\n  .module('app.components', [\r\n  ])\r\n  .component('quiz', quizComponent);
2017-05-13 18:30:00 daj-sie-poznac-7-upgrade-do-angularjs-16-components-es6-webpack cjfsgdao0000fi3um8hz4dspc 2017-05-13 18:30:00 2017-05-13 18:30:00 ckirm3wzs02bqi3um06sofcre Dowiedz się, jak obsługiwać efekty uboczne dzięki Redux Saga https://frontcave.pl/dowiedz-sie-jak-obslugiwac-efekty-uboczne-dzieki-redux-saga/

Spis Treści Wprowadzenie Generatory Przykład generatora Kod przykładu generatora na Github Redux Saga Przykład Sagi Pełny kod Sagi Kod przykładu Sagi na Github Podsumowanie Wprowadzenie Redux Saga to popularny middleware dla Reduxa, oparty na generatorach. Umożliwia obsługę asynchroniczności w sposób przypominający kod synchroniczny. Warto poznać tą bibliotekę ze względu na prostotę tworzonego przy jej użyciu … Czytaj dalej Dowiedz się, jak obsługiwać efekty uboczne dzięki Redux Saga

\n

Artykuł Dowiedz się, jak obsługiwać efekty uboczne dzięki Redux Saga pochodzi z serwisu Front Cave.

2020-12-16 16:11:25 dowiedz-sie-jak-obslugiwac-efekty-uboczne-dzieki-redux-saga ckirm3wzs001li3umfdkcfl6k 2020-12-16 16:11:25 2020-12-16 16:11:25 ck3z1vlko01tzi3um2wmy2hkh Tworzymy losową tablicę na podstawie czasu. http://kody.wig.pl/javascript/tworzymy-losowa-tablice-na-podstawie-czasu/ Trochę zagmatwany tytuł ale nie mam pojęcia jaki inny byłby adekwatny dla tego problemu, jakieś sugestie? Najpierw opiszę co mi jest potrzebne, chcę co jakiś interwał czasowy odpalać funkcję. W ciągu powiedzmy 8 godzin muszę odpalić tą funkcję 40 razy. Funkcja musi mi zwrócić tablicę liczb w milisekundach, bo będę używał setTimeout. Oczywiście tablica ma […] 2019-12-09 23:11:39 tworzymy-losowa-tablice-na-podstawie-czasu ckijj62co001hi3um2kbkcy0a 2019-12-09 23:11:39 2019-12-09 23:11:39 ck42fmyi001u2i3umeus86ccs PostCSS narzędzie do przekształcania CSS w JavaScript http://kody.wig.pl/javascript/postcss-narzedzie-do-przeksztalcania-css-w-javascript/ W obecnym świecie frontendu wszystko zmienia się bardzo szybko. Powstaje mnóstwo nowych bibliotek, pluginów, framewoorków css czy js. Minęły czasy w których używało się notatnika do pisania stron 😉 Narzędzie które dzisiaj opiszę to PostCSS. Tak naprawdę najważniejszą częścią tego narzędzia są dodatki, pluginy których są setki. Do czego można to wykorzystać, a no do […] 2019-12-12 08:00:09 postcss-narzedzie-do-przeksztalcania-css-w-javascript ckijj62co001hi3um2kbkcy0a 2019-12-12 08:00:09 2019-12-12 08:00:09 @@ -1766,6 +1783,7 @@ cj5u63z5c00pki3umbjg7fw6j Przegląd Webmastera #24 – zapowiedź nowej platform cj63a7dso00pvi3um2fesdln6 Przegląd Webmastera #25 – zbiór narzędzi związanych z gridem https://devcorner.pl/przeglad-webmastera-25-zbior-narzedzi-zwiazanych-gridem/

Ten artykuł jest zapisem Przeglądu Webmastera #25 z 02.08.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Duxtree – platforma edukacyjna dla Web Developerów Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. Wczoraj wystartowała wcześniejsza rejestracji do powstającej platformy dla Web Developerów. Jeśli nie wiesz o co chodzi, to koniecznie przeczytaj ten artykuł. […]

\n

Artykuł Przegląd Webmastera #25 – zbiór narzędzi związanych z gridem pochodzi z serwisu Devcorner.

2017-08-08 07:45:51 przeglad-webmastera-25-zbior-narzedzi-zwiazanych-z-gridem cjj4eqtmw0001i3umen1q8px0 2017-08-08 07:45:51 2017-08-08 07:45:51 cj6m2iqfc00qji3um069r4jv6 Przegląd Webmastera #26 – start nowej platformy edukacyjnej https://devcorner.pl/przeglad-webmastera-26-start-nowej-platformy-edukacyjnej/

Ten artykuł jest zapisem Przeglądu Webmastera #26 z 08.08.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Duxtree – platforma edukacyjna dla Web Developerów Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. Wystartowała zapowiadana platforma edukacyjna dla Web Developerów. Dołącz już dzisiaj! Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia – “Balakosa” Balakosa to […]

\n

Artykuł Przegląd Webmastera #26 – start nowej platformy edukacyjnej pochodzi z serwisu Devcorner.

2017-08-21 11:18:21 przeglad-webmastera-26-start-nowej-platformy-edukacyjnej cjj4eqtmw0001i3umen1q8px0 2017-08-21 11:18:21 2017-08-21 11:18:21 cj73dgjwg00r0i3um5u88b3co Przegląd Webmastera #27 – start nowej platformy edukacyjnej https://devcorner.pl/przeglad-webmastera-27-start-nowej-platformy-edukacyjnej/

Ten artykuł jest zapisem Przeglądu Webmastera #27 z 21.08.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #27 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. Nie przedłużając – przejdźmy do Przeglądu Webmastera. Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia – “Counsel” Counsel to kreatywny projekt strony onepage. Sprawdzi się […]

\n

Artykuł Przegląd Webmastera #27 – start nowej platformy edukacyjnej pochodzi z serwisu Devcorner.

2017-09-02 13:56:40 przeglad-webmastera-27-start-nowej-platformy-edukacyjnej cjj4eqtmw0001i3umen1q8px0 2017-09-02 13:56:40 2017-09-02 13:56:40 +ck4it1wg001umi3um8bso8dvj VLOG#2 - Dziękuję i Wesołych Świąt! https://www.youtube.com/watch?v=0rehiL7Goy0 Zapraszam❗😊\n\n------------------------------------\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-12-23 19:00:00 vlog2-dziekuje-i-wesolych-swiat ckg2k1vxc001gi3umclnyctyp 2019-12-23 19:00:00 2019-12-23 19:00:00 cj7hqcu1s00rki3um7mapeba8 Przegląd Webmastera #28 – kary za brak HTTPS? https://devcorner.pl/przeglad-webmastera-28-kary-brak-https/

Ten artykuł jest zapisem Przeglądu Webmastera #28 z 03.09.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #28 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. Nie przedłużając – przejdźmy do Przeglądu Webmastera. Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia – “Atlantida” Atlantida to kreatywny projekt stronyinternetowej. Składa się z […]

\n

Artykuł Przegląd Webmastera #28 – kary za brak HTTPS? pochodzi z serwisu Devcorner.

2017-09-12 15:06:28 przeglad-webmastera-28-kary-za-brak-https cjj4eqtmw0001i3umen1q8px0 2017-09-12 15:06:28 2017-09-12 15:06:28 cj7rdvp9400rwi3uma1wo0xmq Przegląd Webmastera #29 – 500 darmowych kursów! https://devcorner.pl/przeglad-webmastera-29-500-darmowych-kursow/

Ten artykuł jest zapisem Przeglądu Webmastera #29 z 12.09.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #29 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. Nie przedłużając – przejdźmy do Przeglądu Webmastera. Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia – “Warehouse” Warehouse to kreatywny projekt sklepu internetowego. Składa się […]

\n

Artykuł Przegląd Webmastera #29 – 500 darmowych kursów! pochodzi z serwisu Devcorner.

2017-09-19 09:14:55 przeglad-webmastera-29-500-darmowych-kursow cjj4eqtmw0001i3umen1q8px0 2017-09-19 09:14:55 2017-09-19 09:14:55 cj8beo7uw00spi3um8iig39la Przegląd Webmastera #30 – VR dla Web Developerów https://devcorner.pl/przeglad-webmastera-30-vr-dla-web-developerow/

Ten artykuł jest zapisem Przeglądu Webmastera #30 z 19.09.2017. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #30 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. Nie przedłużając – przejdźmy do Przeglądu Webmastera. Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia – “Pixture” Pixture to kreatywny projekt strony internetowej. Składa się […]

\n

Artykuł Przegląd Webmastera #30 – VR dla Web Developerów pochodzi z serwisu Devcorner.

2017-10-03 09:32:29 przeglad-webmastera-30-vr-dla-web-developerow cjj4eqtmw0001i3umen1q8px0 2017-10-03 09:32:29 2017-10-03 09:32:29 @@ -1781,6 +1799,8 @@ cjeraxd1s00zsi3uma8gydm4i infoShare 2018 – dlaczego warto wziąć udział? htt cjgz3llm80120i3umfyuadnb2 Wywiad z Tomaszem Pawulem, co-founderem infoShare https://devcorner.pl/wywiad-tomaszem-pawulem-founderem-infoshare/

Tomasz Pawul to co-founder infoShare – konferencji technologicznej, która odbędzie się w dniach 22-23 maja w Gdańsku. W poniższym wywiadzie odpowiada na pytania dotyczące konferencji. Jak pojawił się pomysł na organizację konferencji InfoShare? Pomysł pojawił się dość niespodziewanie w 2007 roku, kiedy razem z Andrzejem, Marcinem i Grzegorzem, po kolejnej akademickiej konferencji, stwierdziliśmy, że sami […]

\n

Artykuł Wywiad z Tomaszem Pawulem, co-founderem infoShare pochodzi z serwisu Devcorner.

2018-05-09 12:46:38 wywiad-z-tomaszem-pawulem-co-founderem-infoshare cjj4eqtmw0001i3umen1q8px0 2018-05-09 12:46:38 2018-05-09 12:46:38 ck48mjh7s01uai3um9762gtqm VLOG#1 - pytanie do Was https://www.youtube.com/watch?v=A2jtVaUHzMY Zapraszam❗😊\n\n------------------------------------\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-12-16 16:00:01 vlog1-pytanie-do-was ckg2k1vxc001gi3umclnyctyp 2019-12-16 16:00:01 2019-12-16 16:00:01 cjiombu740145i3umhqxzd3ib 6 kroków, które znacznie ułatwią Ci zdobycie pracy jako junior Web Developer https://devcorner.pl/6-krokow-ktore-ulatwia-zdobycie-pracy-junior-web-developer/

Web development jest wciąż bardzo opłacalną ścieżką kariery w 2018 roku. Coraz więcej firm zdaje sobie sprawę, że potrzebują profesjonalnego wizerunku w sieci. Z tego powodu wraz ze wzrostem inwestycji powstaje coraz więcej stanowisk dla web developerów. Mimo wysokiego zapotrzebowania, mnóstwo osób ma trudności ze znalezieniem pierwszej pracy w branży. W tym artykule poznasz 6 kroków, które ułatwią Ci postawienie pierwszego kroku na ścieżce kariery web developera. 1. Zbuduj portfolio, które pokazuje Twoje umiejętności. Portfolio będzie pierwszą rzeczą, którą sprawdzi Twój przyszły pracodawca/rekruter. Nawet jeśli nie rozwijasz się pod kątem projektowania stron internetowych, to Twoja strona musi wyglądać czysto i […]

\n

Artykuł 6 kroków, które znacznie ułatwią Ci zdobycie pracy jako junior Web Developer pochodzi z serwisu Devcorner.

2018-06-21 14:04:52 6-krokow-ktore-znacznie-ulatwia-ci-zdobycie-pracy-jako-junior-web-developer cjj4eqtmw0001i3umen1q8px0 2018-06-21 14:04:52 2018-06-21 14:04:52 +cjt4le7ew01gxi3um0sh85ryn JavaScript Promise #4 - Promise API https://www.youtube.com/watch?v=cpTfChthaS4 Klasa Promise posiada 4 metody statyczne, które możemy wykorzystać w zależności od naszych potrzeb, bez konieczności tworzenia nowego obiektu. Najbardziej użyteczną z nich jest metoda all(), umożliwiająca uruchomienie wielu obietnic równolegle (eng. parallel) 2019-03-11 17:00:05 javascript-promise-4-promise-api ckieg15g0001bi3um0fj3gred 2019-03-11 17:00:05 2019-03-11 17:00:05 +ciw6ys0w00067i3umhgv99j3c Historia języka JavaScript https://piecioshka.pl/blog/2016/12/02/historia-jezyka-javascript.html

\n Jako świadomy programista języka JavaScript, chciałem przedstawić wam\n historię tego języka. Wpis będzie również zawierał informację o powstaniu\n języka Java.\n

\n\n
\n JavaScript logo\n\n
\n Logo JS-a zaproponowane przez Chrisa Willisa podczas konferencji\n JSConf EU 2011.\n
\n
\n\n
\n

tl;dr

\n\n
    \n
  • \n

    lata 70 zeszłego wieku

    \n

    \n Z uwagi na rosnące zapotrzebowanie producentów urządzeń,\n potrzebne było oprogramowania, które będzie w stanie działać\n na wszystkich typach urządzeń.\n

    \n
    • \n
  • \n

    lata 90 zeszłego wieku

    \n

    \n Sun Microsystems stworzyło język Java (nazwa pochodzi\n od kawy produkowanej na wyspie Jawa), którego ideą był\n WORA - Write once, run anywhere.\n

    \n
    • \n
  • \n

    \n Netscape Communications chciało wprowadzić do swojej\n przeglądarki dynamikę znaną z programów desktopowych.\n

    \n
    • \n
  • \n

    \n Sun Microsystems chciało aby\n Netscape Communications wprowadziło do swojej\n przeglądarki Javę.\n

    \n
    • \n
  • \n

    \n Netscape Communications nie zgodziło się. Chciało\n wprowadzić coś co trafi do szerszego grona odbiorców niż tylko\n programistom Javy.\n

    \n
    • \n
  • \n

    kwiecień 1995

    \n

    \n W Netscape Communications zatrudnili programistę, który\n z języków: Java, Scheme i Self skonstruował nowy język o nazwie\n LiveScript.\n

    \n
    • \n
  • \n

    \n Sun Microsystems, jako partner w biznesowej ofensywie\n na Microsoft nie był zadowolony z tego pomysłu i chciał\n unicestwić projekt LiveScript.\n

    \n
    • \n
  • \n

    koniec roku 1995

    \n

    \n Firma Netscape Communications wpadła na pomysł zmiany\n nazwy na JavaScript, który jakoby miał mieć coś wspólnego z\n Javą.\n

    \n
    • \n
  • \n

    \n Sun Microsystems zaakceptowało pomysł, ale przejęło\n prawa do marki udzielając licencji na używanie nazwy tylko\n firmie Netscape Communications.\n

    \n
    • \n
  • \n

    czerwiec 1997

    \n

    \n Netscape Communications wraz z ECMA tworzy\n standard nowego języka - ECMAScript.\n

    \n
    • \n
\n
\n\n
\n

Od czego to się wszystko zaczęło?

\n\n

\n W XVII w. na wyspę Jawa została sprowadzona przez Holendrów kawa\n gatunku Arabica (nazwana później Liberica, a potem Robusta).\n

\n\n

\n W dniu 9 listopada 1981 roku powstała w Mountain View firma\n Silicon Graphics, założona przez James H. Clarka,\n która była amerykańskim producentem wysokiej jakości hardware-u\n (sprzętu komputerowego) oraz software-u.\n

\n\n

\n W 1982 roku, 24 lutego powstała firma Sun Microsystems,\n zajmowała się podobnie jak Silicon Graphics produkcją\n oprogramowania.\n

\n\n

\n W 1986 roku na uniwersytecie w Illinois w USA, powstała komórka\n zajmująca się rozwojem oraz wdrażaniem krajowego oprogramowania\n komputerowego.\n

\n
\n\n
\n

Po co ta Java?

\n\n

\n W 1990 firma Sun Microsystems powołała komórkę Sun Labs,\n która miała zajmować się nowymi technologiami webowymi, rozwijaniem\n nowego języka programowania oraz sieciami komputerowymi.\n

\n\n

\n W tym samym czasie, w komórce ds. rozwoju nowego języka, James Gosling\n razem z grupą innych ludzi zajmowali się tworzeniem języka, który\n mógłby być uruchamiany na komputerach z dowolną konfiguracją sprzętową.\n

\n\n

\n Programy napisane w C lub C++ mogły być uruchamiane tylko\n na urządzeniach z takim samym procesorem, aby wykorzystać w pełni\n potencjał maszyny. Nie nadawały się więc do nowych urządzeń,\n które miały inną konfigurację sprzętową. Dlatego też powstał projekt\n stworzenia nowego języka, który nadawałby się lepiej do oprogramowania\n użytkowego niż C i C++.\n

\n\n

\n Początkowo język nazwano "Oak", ze względu na wielki dąb w pobliżu\n budynku w którym prowadzono prace. Ponieważ istniał już język o takiej\n nazwie należało znaleźć alternatywę. Po długich dyskusjach olśnienie\n przyszło podczas wyjścia do sklepu z kawą.\n

\n\n

\n Java to nazwa kawy produkowanej na wyspie o takiej samej nazwie.\n Jest to też slangowe określenie kawy w USA.\n

\n
\n\n
\n

Narodziny najpopularniejszej przeglądarki internetowej

\n\n

\n Na początku lat 90. James H. Clark odszedł z Silicon Graphics.\n

\n\n

\n W 1993 roku National Center for Supercomputing Applications wypuściła\n przeglądarką webową o nazwie NCSA Mosaic. Nie była to pierwsza\n przeglądarka na rynku, ale jako pierwsza pozwalała na wyświetlanie\n obrazków (wspierała tag <img>).\n

\n\n

\n W tym samym roku James H. Clark poznał Marca Andreessena, z którym\n zamierzał podbić rynek przeglądarek.\n

\n\n

\n W 1994 roku, w Mountain View, panowie razem zarejestrowali\n firmę Mosaic Communications. Zatrudnili autorów przeglądarki\n NCSA Mosaic w celu stworzenia nowej pod nazwą Mosaic Navigator,\n która miała nie mieć ani jednej linijki kodu z pierwotnej wersji.\n

\n\n

\n (Wewnątrz projektu nową przeglądarkę nazywano "Mozilla", czyli\n "Mosaic killer". Celem nowo powstałej firmy, było stać się liderem na\n rynku przeglądarek.)\n

\n\n

\n 15 grudnia 1994 roku miała miejsce premiera pierwszej wersji\n przeglądarki Mosaic Netscape 1.0. Po kilku miesiącach udało się\n zdobyć ponad 70% rynku. Zyskanie takiej popularności przyniosło\n wspieranie tagu ≶blink> (powodującego mruganiem tekstu) oraz\n elementów formularza.\n

\n\n

\n (Aby uniknąć problemów z NSCA, nazwa przeglądarki została zmieniona na\n Netscape Navigator, a po kilku miesiącach - w tym samym roku -\n firma zmieniła nazwę na Netscape Communications.)\n

\n
\n\n
\n

Narodziny języka LiveScript

\n\n

\n Marc Andreessen stwierdził, że świat webu potrzebuje czegoś bardziej\n zaawansowanego, czegoś co będzie klejem dla obecnego HTMLa. Model\n przeglądarkowy utracił interaktywność. Dlatego Java była taka\n atrakcyjna, bo przywracała interaktywność w przeglądarce\n co pozwalało rywalizować z aplikacjami desktopowymi.\n

\n\n

\n Początkowo firma chciała, aby dynamika była podobna do mechanizmu\n HyperCard, systemu rozwijanego przez Billa Atkinsona w Apple, który\n miał na celu ułatwienie programowania na platformę Macintosh.\n Dostępnych było mnóstwo przycisków, do których można było przypisać\n dowolne skrypty. Firma Netscape Communications chciał zrobić\n coś podobnego, ale na stronie internetowej.\n

\n\n

\n W 1995 roku firma Netscape Communications zatrudniła\n kolejnego programistę z MicroUnity, który wcześniej pracował\n w Silicon Graphics, Brendana Eicha. Brendan na rozmowie\n rekrutacyjnej powiedział, że chciałby w przeglądarce\n Netscape Navigator osadzić interpreter języka programowania\n Scheme. Firmie bardzo to się spodobało, bo właśnie tego oczekiwali\n od nowego kandydata.\n

\n\n \n\n

\n Po rozpoczęciu prac, firma zorientowała się jak wygląda język Scheme\n i zarządziła zmiany, w obawie że w obecnej formie nowy język będzie\n mało atrakcyjny. Firma zaproponowała, aby Brendan osadził język\n przypominający np. Visual Basic albo Javę - czyli języki już cieszące\n się popularnością.\n

\n\n

\n Netscape Communications w porozumieniu z\n Sun Microsystems chciało dodać do swojej przeglądarki wsparcie\n dla języka Java, aby konkurować z Microsoft-em pod kątem nowych\n technologii. Netscape Communications zdecydowało, że język,\n który stworzą i dodadzą do swojej przeglądarki, będzie uzupełnieniem\n do języka Java o podobnej składni. Z miejsca wykluczało to więc\n osadzenia takich języków jak Python czy Perl. Aby bronić swojej idei\n wobec konkurencyjnych propozycji firma potrzebowała jednak prototypu.\n

\n\n

\n Brendan zmiksował elementy trzech języków: Java - ponieważ\n powiedziano mu, że musi użyć tego języka oraz dwóch innych bardzo\n interesujących języków: Scheme (dialekt Lispa, skąd pochodzi pomysł\n first-class functions) oraz Self (język który\n bazował na Smaltalku, skąd zaczerpnięty został pomysł\n prototypów), które nie były znane na rynku programistów.\n Wykorzystywane były głównie przez twórców innych języków języków\n programowania. Taki wybór okazał się sporym zaskoczeniem.\n

\n\n

\n Projekt został przeniesiony do Sun Labs firmy Sun Microsystems,\n aby od czasu do czasu móc wspierać rozwój projektu odnośnie języków\n Java i Self. Z jakiegoś powodu firma Sun Microsystems\n podjęła decyzję o zaprzestaniu rozwoju jednego z nich. Wybrali Self.\n

\n\n

\n Brendan Eich stworzył w maju nowy język. Zrobił to w 10 dni.\n

\n\n

\n W swojej opowieści Brendan dodaje, że razem ze swoim kolegą z pracy,\n Kippem Hickmanem, rywalizowali, który język da się lepiej osadzić\n w przeglądarce. Po kilku dniach przełożony obu developerów, Bil Joy,\n przekonał ich do porzucenia projektu umieszczenia Javy w przeglądarce,\n ze względu na problemy jakie pojawiły się przy osadzaniu wirtualnej\n maszyny. Nie była ona kompatybilna z maszyną firmy Sun\n Microsystems.\n

\n\n

\n Pierwsza wersja nowego języka nazywała się Mocha, ale w wersji beta\n przeglądarki Netscape Navigator 2.0, która została\n opublikowana we wrześniu, nazwa została zmieniona na LiveScript.\n

\n\n

\n Dnia 23 maja 1995 roku firma Sun Microsystems podczas\n konferencji SunWorld, ogłosiła powstanie nowego języka programowania\n Java.\n

\n
\n\n
\n

Narodziny języka JavaScript

\n\n

\n Nowy język Java wraz z przeglądarką Netscape Navigator,\n wzbudziły wiele emocji, dlatego też Sun Microsystems\n oraz Netscape Communications podjęły decyzję o\n współpracy przeciwko firmie Microsoft, w obawie że\n pojedynczo nie wytrzymają konkurencji.\n

\n\n

\n Największym punktem spornym w tym układzie był LiveScript.\n Sun Microsystems chciało dodać Javę do przeglądarki\n Netscape Navigator oraz zakończyć pracę nad LiveScriptem.\n Firma Netscape Communications nie zgodziła się na taki zabieg\n ponieważ wierzyli, że uda im się stworzyć coś w rodzaju funkcjonalności\n HyperCard. Z powodu braku porozumienia współpraca prawie została\n zerwana.\n

\n\n

\n Aby załagodzić stosunki nazwa została zmieniona na JavaScript.\n I tak w 3 wersji beta przeglądarki Netscape Navigator 2.0\n LiveScript został zastąpiony nazwą JavaScript.\n

\n\n

\n Ostateczny wybór wprowadził zamieszanie jako iż wiele osób myślało,\n że JavaScript jest efektem ubocznym powstania Javy, która\n cechowała się większą popularnością.\n

\n\n

\n Wybór został scharakteryzowany jako chwyt marketingowy firmy\n Netscape Communications aby pochwalić się wynalezienie nowego\n webowego języka programowania.\n

\n\n

\n Spór ucichł - zmiana nazwy pomogła. Z drobnym wyjątkiem - firma\n Sun Microsystems zastrzegła prawa własności do znaku\n towarowego. Najciekawsze jest to, że firma nie miała nic wspólnego z\n nazwą, a nawet próbowała zabić ten język. W drodze przysługi Sun\n Microsystems udzieliło firmie Netscape Communications\n licencji na używanie nazwy nowego języka programowania, co było o tyle\n satysfakcjonujące, że posiadali ją na wyłączność.\n

\n\n

\n Na dzień 4 grudnia 1995 przypadają narodziny języka JavaScript\n tj. wtedy firma Netscape Communications wydała oficjalne oświadczenie\n (link poniżej) o nowym, otwartym, multi-platformowym języku.\n

\n\n

\n Można powiedzieć, że stabilna wersja języka JavaScript z numerem 1.0\n pojawiła się wraz z opublikowaniem przeglądarki Netscape\n Navigator 2.0, a miało to miejsce 18 września 1995 roku.\n

\n
\n\n
\n

Narodziny języka JScript oraz ECMAScript

\n\n

\n Microsoft przypatrywał się temu z boku. Postanowił,\n że skopiuje język pod inną nazwą. Nie mogli używać nazwy JavaScript\n - prawa do niej miała firma Sun Microsystems (z którą\n Microsoft nie miał dobrych stosunków). Swoją kopię\n silnika nazwali JScript.\n

\n\n

\n Z kolei firma Netscape Communications - gdy zobaczyła, że\n konkurencja kopiuje jej język, i że może on zostać przejęty i\n rozszerzany przez kogoś innego - postanowiła stworzyć standard.\n Początkowo próbowała ustandaryzować swój język w organizacji W3C,\n ale niestety współpraca nie została nawiązana.\n

\n\n

\n Dopiero organizacja ECMA (European Computer Manufacturers Association\n z siedzibą w Genewie) zdecydowała się nawiązać współpracę, dzięki temu\n firma Netscape Communications mogła wykupić u nich standard.\n Było to w czerwcu w 1997 roku. Była to długa droga dla firmy\n z Kaliforni, ale się udało.\n

\n\n

\n Firma chciała ustandaryzować język, ale nie chciała nazywać go\n JavaScript, ponieważ tylko Netscape Communications mógł\n nazywać ten język JavaScript. Komitet starał się wymyślić inną nazwę.\n Koniec końców, został opublikowany dokument, który zawierał nazwę\n ECMAScript.\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Historia naszego pięknego języka jest burzliwa, ale warto ją znać.\n Dobrą praktyką jest tworzenie tl;dr (too long;\n don't read), czyli krótkiego podsumowania. W 10 punktach\n zawarłem najważniejsze zwroty akcji o początkach tworzenia języka\n JavaScript.\n

\n
\n\n
\n

Bibliografia

\n\n \n
2016-12-01 23:00:00 historia-jezyka-javascript ckbw97zyw0007i3umdszu2ola 2016-12-01 23:00:00 2016-12-01 23:00:00 cjiq8d3xk0149i3umcq8k6q1i Przegląd Webmastera #37 – przydatne i mało znane techniki CSS https://devcorner.pl/przeglad-webmastera-37/

Ten artykuł jest zapisem Przeglądu Webmastera #37 z 07.03.2018. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Przegląd Webmastera #37 Cześć! Mam nadzieję, że poprzedni tydzień był dla Ciebie udany. Nie przedłużając – przejdźmy do Przeglądu Webmastera. Artykuły tygodnia Narzędzia Webmastera Szablon PSD tygodnia – „Solar” Solar to prosty i przejrzysty szablon strony internetowej. Przejdź do pobierania >> Snippet tygodnia – Błyszczący hover Zobacz kod >>   Ten artykuł jest zapisem Przeglądu Webmastera #37 z 07.03.2018. Zapisz się do Przeglądu Webmastera, aby otrzymywać go tydzień wcześniej. Udanego tygodnia! 🙂

\n

Artykuł Przegląd Webmastera #37 – przydatne i mało znane techniki CSS pochodzi z serwisu Devcorner.

2018-06-22 17:09:29 przeglad-webmastera-37-przydatne-i-malo-znane-techniki-css cjj4eqtmw0001i3umen1q8px0 2018-06-22 17:09:29 2018-06-22 17:09:29 cjivked8w014gi3umgc80hwth 14 stylów CSS dla cytatów https://devcorner.pl/style-css-dla-cytatow/

W tym wpisie poznasz 14 sposobów na przedstawienie cytatów. Dołączony kod pozwoli Ci wykorzystać wybrany przykład w swoim kolejnym projekcie. Autor: Tim Holman See the Pen Subtle Quote by Tim Holman (@tholman) on CodePen. Autor: Mohan Khadka Autor: Devin Price Autor: Boylett Autor: Dudley Storey Autor: Josh Collinsworth Autor: 14islands Autor: Screeny Autor: Valentin Galmand Autor: Jaime Autor: Joe Hastings Autor: Bharani Autor: Dudley Storey Autor: Devin Price

\n

Artykuł 14 stylów CSS dla cytatów pochodzi z serwisu Devcorner.

2018-06-26 10:45:14 14-stylow-css-dla-cytatow cjj4eqtmw0001i3umen1q8px0 2018-06-26 10:45:14 2018-06-26 10:45:14 cjj4eqtmw014vi3umdhs8c76a Moje wrażenia z infoShare 2018 https://devcorner.pl/wrazenia-infoshare-2018/

W dniach 22-23 maja w Gdańsku odbyła się kolejna edycja infoShare – największej konferencji technologicznej w Europie Środkowo-Wschodniej. W tym roku udało mi się odwiedzić to wydarzenie. W tym wpisie podzielę się moimi wrażeniami w infoShare 2018. Dzień pierwszy Na konferencje dotarłem w poranek 22 maja. Po krótkiej i bezproblemowej rejestracji nadszedł czas na dzień pełen wykładów. Do wyboru mieliśmy aż 6 różnych scen: 2 duże sceny: Inspire i Tech – dostępne dla wszystkich (włącznie z darmowymi wejściówkami), 3 mniejsze sceny dostępne dla posiadaczy wejściówek Conference wzwyż: Tech Plus I, Tech Plus II, Marketing Startup Stage Taki podział konferencji był moim zdaniem […]

\n

Artykuł Moje wrażenia z infoShare 2018 pochodzi z serwisu Devcorner.

2018-07-02 15:16:53 moje-wrazenia-z-infoshare-2018 cjj4eqtmw0001i3umen1q8px0 2018-07-02 15:16:53 2018-07-02 15:16:53 @@ -1789,19 +1809,22 @@ ck8hkrwow01ywi3um6jzjfzep Wprowadzenie do AWS dla front end developerów https:/ ck8hkv7io01yxi3um3oglfrvy AWS dla front end developera – automatyzacja pracy https://frontstack.pl/aws-dla-front-end-developera/

W pierwszej części wpisu dotyczącego AWS omówiliśmy sobie podstawowe usługi oferowane przez Amazona. Pozwolą nam one na stworzenie infrastruktury dla aplikacji webowej. Dzisiaj spojrzymy na kolejne serwisy dzięki którym zautomatyzujemy sporo naszej pracy. Dotkniemy tematów związanych z DNS oraz CDN a także poznamy oferowany przez Amazona edytor tekstowy dostępny w przeglądarce. AWS dla front end […]

\n

The post AWS dla front end developera – automatyzacja pracy appeared first on Frontstack.pl.

2020-04-01 17:01:54 aws-dla-front-end-developera-automatyzacja-pracy ckc4s1jmo001ii3um6ovu5nhk 2020-04-01 17:01:54 2020-04-01 17:01:54 ck1m89u4g01qui3umh7bqdn6x Jest - Stosowanie spyOn() w testach JavaScript / Node.js https://www.youtube.com/watch?v=I075v3d9dCw Blog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2019-10-11 14:30:16 jest-stosowanie-spyon-w-testach-javascript-nodejs ckivz8t54001di3umfv7i4q26 2019-10-11 14:30:16 2019-10-11 14:30:16 ck25yso3401rli3umcsjn7gtq 10 linijek kodu i mamy super efekt, który zastąpi tooltip | CSS HTML | Fajny CSS https://www.youtube.com/watch?v=vVKQH5xuZpM Ty też uważasz, że tooltipy są nudne? Mam dobre wieści 🙂 Dziś stworzymy efekt, który z powodzeniem będzie w stanie zastąpić zwykłego tooltipa 😁 Tworzymy go tylko za pomocą CSSa (clip-path) co sprawia, że jest bardzo uniwersalny i łatwy w użyciu.\n\nZapraszam!\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/JjjdOmj\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-10-25 10:00:22 10-linijek-kodu-i-mamy-super-efekt-ktory-zastapi-tooltip-or-css-html-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2019-10-25 10:00:22 2019-10-25 10:00:22 +ciwgyuzk00069i3umfnmb2mk5 "JavaScript" to nie to samo co "Java" https://piecioshka.pl/blog/2016/12/09/javascript-to-nie-to-samo-co-java.html

\n Podczas mojej pracy zawodowej przychodzi mi czasem rozmawiać z ludźmi,\n których domeną nie jest programowanie. Tym samym nie znają języków\n programowania oraz różnic jakie pomiędzy nimi występują a tym bardziej ich\n zastosowania.\n

\n\n

\n Tym artykułem chciałbym nauczyć ludzi "nietechnicznych", o dziwnym zbiegu\n okoliczności jaki ma miejsce w świecie programowania, mianowicie kolizji\n nazw dwóch języków, wymienionych przeze mnie w tytule.\n

\n\n

\n Na wstępie chciałem zaznaczyć, że tym artykułem nie mam zamiaru nikogo\n obrażać, a tylko naświetlić problem jaki występuje, kiedy nazwy różnych\n języków programowania stosowane są zamiennie.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Skrót?

\n\n

\n Niestety, ale "Java" to nie jest skrót od "JavaScript".\n

\n
\n\n
\n

Dla ...rekrutera

\n\n

\n Praca rekrutera to ciężki kawałek chleba. Musi wyszukiwać programistów\n na rynku pracy, umawiać się z nimi na spotkania, towarzyszyć w całym\n procesie rekrutacji.\n

\n\n

\n Cały ten proces wymaga skupienia oraz kompletu informacji o profilu\n programisty jaki jest poszukiwany.\n

\n\n

\n Poszukiwanie programisty to chyba najtrudniejszy etap w całym procesie\n zatrudniania nowej osoby. I tutaj popełnianych jest wiele błędów\n przez początkujących Human Resource Managerów.\n

\n\n

\n Znalezienie stosownego kandydata wiąże się z wysyłaniem ogromnej ilości\n zapytań. Łatwo jest tutaj popełnić mały błąd, który może zaważyć\n na odbiorze firmy do której rekruterzy poszukują pracowników.\n

\n\n

\n Nie ważne jest to, czy błąd został popełniony z pośpiechu, czy z\n niedbalstwa. My programiści szybko wyłapiemy błędy.\n

\n\n

\n Może warto aby HR managerzy byli wykształcenia technicznego? Nie wiem.\n Można tylko gdybać.\n

\n\n

\n Poszukiwanie osoby na stanowisko JavaScript Developera to nie jest\n to samo, co poszukiwanie kandydata na stanowisko Java Developera.\n

\n\n

\n Nie chce tutaj omawiać innych błędów, które się zdarzają, np. gdy\n dostaje się maile z innym imieniem i nazwiskiem odbiorcy. Tutaj niech\n wytłumaczeniem będzie szum komunikacyjny jaki towarzyszy rekruterom.\n\n

\n\n

Rada

\n\n

\n Moja rada jest prosta. Przywiązujcie wagę do nazwy stanowiska na jakie\n szukacie programisty. Java to zupełnie inny język niż JavaScript.\n Nie należy tego mieszać. Nigdy.\n

\n
\n\n
\n

Dla ...pracowników księgarni

\n\n

\n Większość z nas, programistów, lubi czytać książki techniczne.\n Zawierają one (zwykle) poukładaną wiedzę na temat danej dziedziny.\n

\n\n

\n Księgarnie mają to do siebie, że zawsze panuje w nich podział\n\n tematyczny. Taki stan rzeczy bardzo odpowiada programistom, których\n cechuje logiczne myślenie.\n

\n\n

Moja historia

\n\n

\n Wchodząc do księgarni, szukam regału z książkami dotyczącymi\n programowania. Gdy już znajdę, szukam tych, które interesują mnie\n najbardziej, tj. związanych z szeroko pojętym Front-end-em.\n

\n\n

\n Moim oczom ukazuje się cała gablotka na pierwszy rzut oka interesujących\n dla mnie książek. Jednak gdy podejdę bliżej, widzę książki pt.\n "Java. Podstawy.", "Java. Kompendium". Na mojej twarzy zawsze maluje się\n wtedy uśmiech, gdy widzę jak książki o JavaScripcie mieszają się\n z książkami o Javie.\n

\n\n

\n Chciałbym kiedyś wejść do księgarni i nie natknąć się na taką sytuację.\n Miałbym wtedy większe zaufanie, że osoby pracujące w księgarni\n wiedzą z jakimi książkami mają do czynienia.\n

\n\n

Rada

\n\n

\n Moja rada jest prosta. Jeżeli, koleżanko albo kolego, pracujesz w\n księgarni i masz za zadanie poukładać książki w dziale INFORMATYKA,\n to proszę abyś robił/a to uważnie. Programisty JavaScript nie\n interesują książki o Javie i odwrotnie. Zapamiętaj proszę.\n

\n
\n\n
\n

Dla ...początkującego programisty

\n\n

\n Jeśli zaczynasz swoją przygodę z programowaniem, to prędzej czy później\n dowiesz się, że Java i JavaScript to zupełnie inne języki. Ale jeśli\n zabraknie Ci dowodów, to chciałbym Co przedstawić podobieństwa i\n różnice tych dwóch języków powstałych w tym samym roku (1995).\n

\n\n

Podobieństwa

\n\n
    \n
  • \n Oba języki są multi-platformowe - uruchomią się na wszystkich\n konfiguracjach sprzętowych.\n
    • \n
  • \n Obiekty wbudowane Math i Date są takie same w obu językach.\n
    • \n
  • \n JavaScript zawiera listę zarezerwowanych słów prosto z Javy\n
    • \n
  • \n Składnia języka JavaScript była wzorowana na języku Java.\n
    • \n
\n\n

Różnice

\n\n
    \n
  • \n Autorem Javy jest Sun Microsystems.
    \n Autorem JavaScriptu jest Netscape Communications.\n
    • \n
  • \n Java jest językiem programowania.
    \n JavaScript jest językiem (programowania) skryptowym.\n
    • \n
  • \n Java jest językiem kompilowanym i uruchamianym w wirtualnej\n maszynie.
    \n JavaScript interpretowany i uruchamiany w przeglądarce.\n
    • \n
  • \n Oba języki programowania są zorientowane obiektowo, jednak\n JavaScript zawiera obiektowość prototypową,
    \n natomiast Java obiektowość klasyczną.\n
    • \n
  • \n W JavaScript nie ma klas (klasy z ES2015 to tylko syntactic sugar).\n W Javie są klasy.\n
    • \n
  • \n W JavaScript, obiekty nie posiadają prywatnych i chronionych właściwości\n i funkcji. W Javie można zdefiniować tryb dostępu do właściwości\n albo metody.\n
    • \n
  • \n W JavaScript nie ma metod, są funkcje obiektu.\n W Javie są metody, funkcję powiązane z klasą.\n
    • \n
\n\n

Rada

\n\n

\n Wielkim faux pas byłoby, gdybyś jako\n programista nie znał różnicy między tymi dwoma najpopularniejszymi\n językami programowania. Proszę przeczytaj ww. punkty i połowę z nich\n zapamiętaj. Nalegam.\n

\n
\n\n
\n

Zabawne porównania

\n\n

\n Jak już wspomniałem, te 2 języki programowania są zupełnie odmienne.\n W związku z tym powstało wiele zabawnych porównań wyśmiewających\n zestawianie ich nazw.\n

\n\n

\n O to lista najpopularniejszych:\n

\n\n
    \n
  • PL\n
      \n
    • koń i koniak
      • \n
    • rum i rumak
      • \n
    \n
    • \n
  • EN\n
      \n
    • ham and hamster
      • \n
    • car and carpet
      • \n
    • grape and grapefruit
      • \n
    \n
    • \n
\n\n

\n Więcej angielskich zwrotów znajdziesz na stronie\n javascriptisnotjava.io/\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Na koniec chciałem dodać, że pisząc ten artykuł chciałem zaznaczyć\n jasno, że istnieją duże różnice między tymi językami. Mieszanie nazw\n tychże języków, szczególnie wśród programistów, rodzi mnóstwo\n niepotrzebnych komplikacji i nieporozumień.\n

\n
2016-12-08 23:00:00 javascript-to-nie-to-samo-co-java ckbw97zyw0007i3umdszu2ola 2016-12-08 23:00:00 2016-12-08 23:00:00 ck2g10cbs01rwi3umeewidi8b Zaokrąglony nagłówek | CSS | Fajny CSS https://www.youtube.com/watch?v=-e9HP91966g Kolejny efekt na nasze nagłówki typu hero. Tym razem efekt zaokrąglenia 😊\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/LYYEqGr\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-11-01 11:00:01 zaokraglony-naglowek-or-css-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2019-11-01 11:00:01 2019-11-01 11:00:01 ck2q13ipk01s7i3um2h31c0l6 Odwrócenie kolorów | CSS HTML | Fajny CSS https://www.youtube.com/watch?v=clevmF-dqP4 Efekt, który może zrobić duże wrażenie. Odwrócenie kolorów, nie jest popularne na stronach www, ale można go z powodzeniem użyć do tego typu efektów.\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/eYYmbNY\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-11-08 11:00:11 odwrocenie-kolorow-or-css-html-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2019-11-08 11:00:11 2019-11-08 11:00:11 ck2zbgg6o01soi3um5kly874m Animacja wypełnienia tekstu | CSS HTML | Fajny CSS https://www.youtube.com/watch?v=i2SFYgdgm8Y Dziś chciałem Wam pokazać ciekawą animację, która symuluje wypełnienie tekstu. Fajny efekt, który można wykorzystać (przykładowo) podczas ładowania elementów strony.\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/BaayMvz\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-11-14 23:00:06 animacja-wypelnienia-tekstu-or-css-html-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2019-11-14 23:00:06 2019-11-14 23:00:06 ck3k1cce801tfi3um9uez448s Fale w nagłówku typu hero | CSS HTML | Fajny CSS https://www.youtube.com/watch?v=i3gyJNpvD00 Dziś spory eksperyment, bo takiego efektu nie widziałem jeszcze na żadnej stronie ... być może dlatego, że wymaga trochę pracy i dopracowania dla różnych rozdzielczości. \n\nJednak może kogoś z Was zainspiruje do wykonania czegoś jeszcze bardziej ciekawego 🙂\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/oNNLwZq\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-11-29 11:00:08 fale-w-naglowku-typu-hero-or-css-html-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2019-11-29 11:00:08 2019-11-29 11:00:08 ck3u1faag01tui3umhirfc73j ▶️ Obramowanie przyciągające uwagę | CSS | Fajny CSS https://www.youtube.com/watch?v=UcHWHzZh7Sc W materiale tworzymy bardzo efektowne obramowanie. Użyjemy do tego tylko CSS'a 🙂 Taki efekt na pewno przyciągnie uwagę w oczekiwane przez Was miejsce, a przy okazji jest niezwykle prosty w wykonaniu 😉👍\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/mddoQRw\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-12-06 11:00:07 right-pointing-triangle-obramowanie-przyciagajace-uwage-or-css-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2019-12-06 11:00:07 2019-12-06 11:00:07 ck8sgpo2w01zdi3um1ti9g75i Redux Thunk w aplikacjach React https://frontstack.pl/redux-thunk-w-aplikacjach-react/

Biblioteka Redux Thunk jest jednym z middlewarów których możemy używać w naszych aplikacjach zbudowanych w oparciu o React oraz Redux. Jego celem jest ułatwienie nam obsługi zdarzeń asynchronicznych takich jak zapytania do API, logowanie zdarzeń, routing, itp. W dalszej części artykułu postaram się przedstawić główne założenia którymi kieruje się Thunk i o czym należy pamiętać […]

\n

The post Redux Thunk w aplikacjach React appeared first on Frontstack.pl.

2020-04-09 07:51:05 redux-thunk-w-aplikacjach-react ckc4s1jmo001ii3um6ovu5nhk 2020-04-09 07:51:05 2020-04-09 07:51:05 +ck4e1lifc01uji3um2eu63tbb CSS Parallax | Tylko CSS | Fajny CSS https://www.youtube.com/watch?v=qS_JFZ_x7MU Hejka ❗Dziś efekt o który prosiliście, czyli Parallax zrobiony za pomocą czystego CSSa 🙂\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/full/ZEEgrXW\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-12-20 11:00:21 css-parallax-or-tylko-css-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2019-12-20 11:00:21 2019-12-20 11:00:21 +ciwmome80006ai3um603677mk WarsawJS Workshop #1 https://piecioshka.pl/blog/2016/12/13/warsawjs-workshop-1.html

\n 4 grudnia 2016 roku odbyły się pierwsze warsztaty pod szyldem\n WarsawJS, których byłem\n współorganizatorem. Myślą przewodnią tych warsztatów była nauka\n początkujących.\n\n Wszyscy Ci którzy nie mieli wcześniej styczności z programowaniem mogli\n przyjść i przez całe 8 godzin tworzyć projekt\n galerii zdjęć\n pod okiem trenerów.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Jak zrodził się pomysł?

\n\n

\n Po 2 latach organizowania meetupów stwierdziliśmy, że jako\n organizacja moglibyśmy spróbować swoich sił w zorganizowaniu czegoś\n więcej.\n

\n\n

\n Tym samym wpadliśmy na pomysł zorganizowania ankiety, która miała na\n celu weryfikację, czym uczestnicy meetupów byliby zainteresowani.\n Do wyboru w ankiecie były 2 opcje:\n

\n\n
    \n
  • konferencja
    • \n
  • warsztaty
    • \n
\n\n

\n Ponad połowa osób opowiedziała się za warsztatami.\n

\n\n \n
\n\n
\n

Plan

\n\n

\n Podczas WarsawJS Meetup #26\n założyliśmy event na Meetup.com oraz poprosiliśmy o sugestie\n atrakcyjnych tematów byłyby dla członków naszej organizacji.\n

\n\n

\n Link do eventu\n meetup.com/WarsawJS/events/234806304/\n gdzie opisane są zasady oraz wszelkie informacje techniczne potrzebne\n uczestnikom.\n

\n\n

\n Wielu ludzi opowiedziało się za Angularem, Reactem oraz innymi\n bibliotekami.\n

\n\n

\n Jednak, jak przez mgłę można było dostrzec liczne głosy, że może temat\n warsztatu gdzie moglibyśmy nauczyć się podstaw byłby dobrym pomysłem.\n Tak też zrobiliśmy.\n

\n\n

\n Po 2 miesiącach zbierania wyników, ogłosiliśmy na profilu\n wydarzenia jaki mamy plan na tematykę kolejnych warsztatów.\n Pozwolę sobie skopiować tę listę. W tym roku odbyło się jedno szkolenie:\n

\n\n
    \n
  • Grudzień 2016: Podstawy JavaScript (część 1) - dla początkujących
    • \n
\n\n

\n W następnym roku planujemy szkolenia z następujących tematów:\n

\n\n
    \n
  1. Styczeń 2017: Podstawy JavaScript (część 2) - dla średnio zaawansowanych
    2. \n
  2. Luty 2017: Angular 1
    3. \n
  3. Marzec 2017: Angular 2 (angular-cli)
    4. \n
  4. Kwiecień 2017: Node.js [tutaj mamy 3 propozycje]
    5. \n
  5. Maj 2017: Meteor.js
    6. \n
  6. Czerwiec 2017: Web Components
    7. \n
  7. Lipiec 2017: Portal społecznościowy w oparciu o Firebase
    8. \n
  8. Sierpień 2017: RxJS 5 - Reactive programming
    9. \n
  9. Wrzesień 2017: Gamedev: Wyścigi samochodowe z użyciem Phaser.js
    10. \n
  10. Październik 2017: React.js + Enzyme + Redux
    11. \n
  11. Listopad 2017: Vue.js
    12. \n
  12. Grudzień 2017: React Native - tworzenie aplikacji na iOSa i Androida
    13. \n
\n\n

\n Nie chcąc czekać jeszcze w tym roku zorganizować pierwsze warsztaty.\n

\n\n
\n \n\n
\n Praca wre!\n
\n
\n
\n\n
\n

Lokalizacja

\n\n

\n Znalezienie miejsca na zorganizowanie warsztatów nie sprawiło\n trudności, ze względu na świetną propozycję jaką dostaliśmy od\n Campus Warsaw.\n

\n\n \n\n

\n Campus Warsaw mieści się na ulicy Ząbkowskiej 27 - na Pradze Północ.\n Pod tym adresem znajdują się budynki, już nieaktywnej warszawskiej\n wytwórni wódek "Koneser".\n

\n\n

\n Większość zabudowań należących do wytwórni przetrwało II wojnę\n światową. Piękne mury budynki zawdzięczają czerwonej cegle, z której\n są zrobione. Na Wikipedii wyczytałem, że jest to styl\n neogotycki.\n

\n\n

\n Akurat w budynku w którym znajduje się biuro Campus Warsaw jest\n wyróżniająca się w tle brama wjazdowa - pozostałość po starej wytwórni.\n

\n\n
\n \n\n
\n Koneser - Warszawska wytwórnia wódek.\n
\n
\n\n

\n Lokalizacja jest wyśmienita. Blisko metra, tramwaju, pociągu\n czy autobusu. Fakt - z każdego środka komunikacji trzeba jeszcze\n przebyć 5-10 minut pieszo, ale to chyba nie problem :smiley:\n

\n
\n\n
\n

Bilety

\n\n

\n 5 dni przed eventem uruchomiliśmy rejestrację za pomocą systemu\n Evenea. Bilety sprzedały się w oka\n mgnieniu. Nie spodziewaliśmy się tak szybkiej sprzedaży. Po 3\n godzinach wszystkie bilety były wykupione.\n

\n\n

\n Po wyprzedaniu biletów na stronie eventu zaczęły pojawiać się\n zapytania, czy ktoś ma może bilet do odsprzedania. Miło kiedy ludziom\n zależy na czymś czego jest się twórcą :smiley:\n

\n
\n\n
\n

Bycie trenerem...

\n\n

\n ...to brzmi dumnie! Uwielbiam uczyć ludzi, patrzeć jak nagle\n rozumieją co do nich mówię i sami tworzą ciekawe rozwiązania!\n

\n\n \n\n

\n Mieliśmy 4 trenerów dostępnych podczas warsztatów:\n

\n\n \n\n
\n \n\n
\n Trenerzy pierwszego edycji WarsawJS Workshop.\n
\n
\n\n

\n Tym samym liczba uczestników była limitowana pod tym kątem. Chciałem,\n jako organizator, aby każdy z trenerów pomagał grupie maksymalnie 10\n osobowej.\n

\n
\n\n
\n

Prework & Postwork

\n\n

\n Jako organizatorzy wpadliśmy na pomysł, aby przed pierwszym\n spotkaniem przygotować zadanie, które wprowadzi w programowanie\n Front-end.\n

\n\n

\n Postanowiliśmy, że wyślemy do uczestników zadanie, którego celem\n będzie realizacja strony z napisem "Hello world". Dla doświadczonego\n developera wydaje się, że jest to zadanie zbyt proste. Jednak ze\n względu na to, że uczestnikami pierwszego workshopu będą ludzie bez\n doświadczenia to takie wyzwanie idealnie się wpasowuje.\n

\n\n

\n Dziś wysłaliśmy drugie zadanie. Tym razem w formie pracy domowej, czyli\n tzw. postworka. Celem takiego zadania jest rozwijanie wiedzy nabytej\n podczas WarsawJS Workshop.\n

\n\n

\n Jako organizatorzy liczymy na to, że w naszej skrzynce za kilka dni\n pojawią się maile z linkami do waszych projektów. Na każdego maila\n odpowiemy przesyłając techniczny feedback.\n

\n\n \n
\n\n
\n

Słowo na koniec

\n\n

\n Bardzo dziękujemy wszystkim za przybycie. Mamy nadzieje, że nie\n odpuścicie rozwijania swoich kompetencji programistycznych i\n będziecie zgłębiać tajniki JavaScriptu!\n

\n\n

\n Organizowanie warsztatów było dla nas, organizatorów, nowym i bardzo\n ciekawym wyzwaniem dającym wiele frajdy. Dziękujemy za\n przybycie!\n

\n\n \n
2016-12-12 23:00:00 warsawjs-workshop-1 ckbw97zyw0007i3umdszu2ola 2016-12-12 23:00:00 2016-12-12 23:00:00 +ciwqyxy80006ci3um5ity9ph0 Długość artykułu w minutach https://piecioshka.pl/blog/2016/12/16/dlugosc-artykulu-w-minutach.html

\n Kilka lat temu gdy powstała platforma\n Medium.com ich artykuły\n rozpoczynały się od bardzo przydatnej informacji - ile czasu zajmie\n przeczytanie danego artykułu.\n

\n\n
\n \n\n
\n Informacja o liczbie minut jakie trzeba poświęcić aby przeczytać\n artykuł.
W tym serwisie znajduje się ona zawsze pod nagłówkiem\n artykułu.\n
\n
\n\n
\n

Co nam po takiej informacji?

\n\n

\n Każdy z nas czyta artykuły w sieci. Niektóre są krótsze, niektóre\n dłuższe. Artykuły zawierające mniej tekstu mają to do siebie, że czas\n potrzebny na ich przeczytanie jest proporcjonalnie krótszy.\n

\n\n

\n Po otworzeniu danego artykułu podejmujemy mikro decyzję, czy czytamy\n go od razu czy jednak zostawiamy na później, czego powodem może być\n np. brak czasu w danej chwili.\n

\n\n

\n Taki mikro wybór jest dokonywany przez nas, internautów, bardzo szybko.\n Jest kilka czynników, które mogą pomóc nam podjąć tę decyzję.\n

\n\n

\n Co jeśli przed otworzeniem artykułu, np. na liście postów, pokażemy\n informację czasie potrzebnym na zapoznanie się z danym artykułem?\n Internauta podejmie decyzję jeszcze przed kliknięciem w zachęcający\n tytuł. Oszczędzi to mu czas i nerwy, które mogą się pojawić, gdy\n jakiś artykuł okaże się dłuższy niż czas, który czytelnik może mu\n poświęcić.\n

\n
\n\n
\n

Dobre zasady pisania postów

\n\n

\n Jeśli post zawiera interesujące tło, albo obrazki w artykule są\n ciekawe, mózg czytelnika otrzymuje bodziec, który sygnalizuje, że jest\n się na stronie godnej uwagi i może warto przeczytać znajdujący się na\n niej artykuł.\n

\n\n

\n Dobrze sformatowana treść również zaprasza czytelnika do przeczytania\n artykułu w całości. Gdy internauta zobaczy ścianę tekstu, to jest bardzo\n duża szansa, że zamknie kartę przeglądarki.\n

\n
\n\n
\n

Projekt: jekyll-time-to-read-in-polish

\n\n

\n Chciałem zamieścić taką informację o długości artykułu stworzyłem więc\n projekt, który pomaga mi zrealizować ten cel. Projekt dostępny jest\n na moim profilu na GitHubie. Plugin analizuje liczbę słów\n znajdujących się w artykule.\n

\n\n

\n Jeśli korzystasz z Jekyll-a to polecam Ci wypróbowanie tego dodatku\n na łamach swojego bloga. Link do projektu znajduje się w nagłówku tej\n sekcji.\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Pokazanie (orientacyjnej) informacji o czasie, jaki trzeba\n poświęcić, aby przeczytać artykuł pomaga internaucie odpowiedzieć\n sobie na pytanie, które zadawane jest przed rozpoczęciem czytania\n dowolnej treści w sieci:\n

\n\n

\n Czy jestem w stanie / chce mi się poświęcić X minut, aby\n przeczytać post o takim tytule?\n

\n
2016-12-15 23:00:00 dlugosc-artykulu-w-minutach ckbw97zyw0007i3umdszu2ola 2016-12-15 23:00:00 2016-12-15 23:00:00 ckcvv5thk0254i3umdqga90q0 CORS (Cross-Origin Resource Sharing), czyli o jednym z mechanizmów bezpieczeństwa przeglądarek. https://blog.capraweb.pl/cors-cross-origin-resource-sharing-czyli-o-jednym-z-mechanizmow-bezpieczenstwa-przegladarek/

\n

W artykule opowiem ci o mechaniźmie SOP i CORS oraz sposobie na szybkie wyeliminowanie go w przypadku błędnego ustawienia nagłówków w API.

\n

Artykuł CORS (Cross-Origin Resource Sharing), czyli o jednym z mechanizmów bezpieczeństwa przeglądarek. pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-07-21 11:37:41 cors-cross-origin-resource-sharing-czyli-o-jednym-z-mechanizmow-bezpieczenstwa-przegladarek ckdstwpeo001mi3um9o1s0rq1 2020-07-21 11:37:41 2020-07-21 11:37:41 ckdfvoa7k025gi3umfh8f86uo KIRKI – biblioteka, która rozbuduje Twój motyw WordPress https://blog.capraweb.pl/kirki-biblioteka-ktora-rozbuduje-twoj-motyw-wordpress/

\n

Rozbuduj swój motyw Wordpress przy użyciu popularnej biblioteki wykorzystującej Customizer API.

\n

Artykuł KIRKI – biblioteka, która rozbuduje Twój motyw WordPress pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-08-04 11:47:26 kirki-biblioteka-ktora-rozbuduje-twoj-motyw-wordpress ckdstwpeo001mi3um9o1s0rq1 2020-08-04 11:47:26 2020-08-04 11:47:26 ckdhad674025ji3um5ecya4c7 Migracja sklepu Prestashop 1.7 do nowego dostawcy https://blog.capraweb.pl/migracja-sklepu-prestashop-1-7-do-nowego-dostawcy/

\n

Poznaj prosty i bezpieczny sposób na samodzielną migrację sklepu na platformie Prestashop.

\n

Artykuł Migracja sklepu Prestashop 1.7 do nowego dostawcy pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-08-05 11:26:28 migracja-sklepu-prestashop-17-do-nowego-dostawcy ckdstwpeo001mi3um9o1s0rq1 2020-08-05 11:26:28 2020-08-05 11:26:28 ckdijp6ig025ki3umcl85g43k JSONP – inna metoda obejścia mechanizmu CORS https://blog.capraweb.pl/jsonp-inna-metoda-obejscia-mechanizmu-cors/

\n

Poznaj inną metodę, która pozwoli Ci obejść mechanizm CORS.

\n

Artykuł JSONP – inna metoda obejścia mechanizmu CORS pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-08-06 08:35:31 jsonp-inna-metoda-obejscia-mechanizmu-cors ckdstwpeo001mi3um9o1s0rq1 2020-08-06 08:35:31 2020-08-06 08:35:31 ckdreoodk025ui3umaa5x2io7 Laravel Broadcasting z wykorzystaniem Redisa i Socket.IO https://blog.capraweb.pl/laravel-broadcasting-z-wykorzystaniem-redisa-i-socket-io/

\n

Stwórz swój system broadcastingu w oparciu o serwer Redis i Socket.IO.

\n

Artykuł Laravel Broadcasting z wykorzystaniem Redisa i Socket.IO pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-08-12 13:25:05 laravel-broadcasting-z-wykorzystaniem-redisa-i-socketio ckdstwpeo001mi3um9o1s0rq1 2020-08-12 13:25:05 2020-08-12 13:25:05 -ck4e1lifc01uji3um2eu63tbb CSS Parallax | Tylko CSS | Fajny CSS https://www.youtube.com/watch?v=qS_JFZ_x7MU Hejka ❗Dziś efekt o który prosiliście, czyli Parallax zrobiony za pomocą czystego CSSa 🙂\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/full/ZEEgrXW\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-12-20 11:00:21 css-parallax-or-tylko-css-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2019-12-20 11:00:21 2019-12-20 11:00:21 -ck4it1wg001umi3um8bso8dvj VLOG#2 - Dziękuję i Wesołych Świąt! https://www.youtube.com/watch?v=0rehiL7Goy0 Zapraszam❗😊\n\n------------------------------------\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-12-23 19:00:00 vlog2-dziekuje-i-wesolych-swiat ckg2k1vxc001gi3umclnyctyp 2019-12-23 19:00:00 2019-12-23 19:00:00 +ciy0p17k0006ni3umf24beg08 WarsawJS Meetup #28 https://piecioshka.pl/blog/2017/01/17/warsawjs-meetup-28.html

\n Ostatnie spotkanie w Państwomiasto.\n Żal zmieniać miejsce, ale taki stan rzeczy był do przewidzenia. Liczba\n osób, które chcą brać udział w naszych spotkaniach zwiększa się z meetupu\n na meetup.\n

\n\n

\n Podczas ostatniego spotkania w 2016 roku mieliśmy dwie prelekcje\n oraz mini workshop poprowadzony przez Kamila. Każdy mógł przyjść ze swoim\n komputerem i w ciągu 30 minut zakodować serwer w Node.js w oparciu o\n architekturę GraphQL.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Zapowiedź nagrywaliśmy podczas\n \n WarsawJS Workshop #1\n , czyli nowej inicjatywie organizacji WarsawJS, która ma\n miejsce w Campus Warsaw.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: Rapid prototyping and easy testing in Ember with Ember CLI\n Mirage [EN] Krzysztof Białek

\n\n

\n Krzysztof opowiadał o Mirage, czyli narzędziu do testowania aplikacji\n tworzonych w oparciu o Ember.js.\n Zapraszam wszystkich pasjonatów tego frameworka do obejrzenia tej\n anglojęzycznej prelekcji developera z\n Rebased.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Declarative UI. Relay is the way? [PL]\n Kamil Grabek

\n\n

\n Kontynuacja tematu który został rozpoczęty podczas\n \n WarsawJS Meetup #27\n i prelekcji pt. "GraphQL in a nutshell" tego samego speakera.\n

\n\n

\n Kamil opowiadał o innym podejściu do budowania aplikacji webowych.\n Zapraszam wszystkich developerów, którzy tworzą architekturę dla\n nowego, dużego systemu webowego, aby obejrzeli tę prelekcję.\n

\n\n

\n Podobnie jak miesiąc temu Kamil poprowadził mini-workshop budując\n pełnoprawny serwer GraphQL. Może w przyszłym roku będzie\n cały dzień z GraphQL-em? Zastanowimy się.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
\n\n
\n

Podsumowanie

\n\n

\n Bardzo dziękujemy PM za te ponad 2 lata udostępniania nam przestrzeni w\n sali konferencyjnej. Jako organizatorzy uważamy, że nie mogliśmy lepiej\n rozpocząć. Świetna lokalizacja w centrum miasta z super jedzeniem.\n

\n\n

\n Będzie co wspominać. Dziękujemy :heart:\n

\n
2017-01-16 23:00:00 warsawjs-meetup-28 ckbw97zyw0007i3umdszu2ola 2017-01-16 23:00:00 2017-01-16 23:00:00 ck4o1o3z401upi3uma38b7dn9 3D Flip - obrócenie elementu | CSS HTML | Fajny CSS https://www.youtube.com/watch?v=EW9rGT3LQIs Efekt dość znany i powszechny, ale dla tych, którzy nie wiedzą jak go uzyskać ... dziś robimy obrócenie karty z efektem 3D 🙂\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/GRReBdy\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2019-12-27 11:00:04 3d-flip-obrocenie-elementu-or-css-html-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2019-12-27 11:00:04 2019-12-27 11:00:04 ck4y1r81k01uyi3umby8acaiu Obrazek na tekście lub tekst jako maska | Tylko CSS | Fajny CSS https://www.youtube.com/watch?v=XAVs8Wm4WYU Dzisiaj zrobimy sobie z tekstu maskę dla obrazka ... czyli nałożymy obrazek na tekst za pomocą czystego CSSa 🙂 👍\nBardzo fajny efekt w przypadku, gdy zależy nam na wyeksponowaniu na naszej stronie jakiegoś tekstu. 😉\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/GRRVOVq\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2020-01-03 11:00:11 obrazek-na-tekscie-lub-tekst-jako-maska-or-tylko-css-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2020-01-03 11:00:11 2020-01-03 11:00:11 ck581u6pk01v8i3um5qfz4y4s Animacje przycisków oraz objaśnienie cubic-bezier | HTML CSS | Fajny CSS https://www.youtube.com/watch?v=vfq_rAU1v-A W materiale tworzymy animacje przycisków 🙂 Tłumaczę także na czym polega i jak działa cubic-bezier() - funkcja do określania zachowania animacji 👍\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/WNbMMXW\n\n▶️ Narzędzie do testowania krzywych Beziera: https://cubic-bezier.com\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2020-01-10 11:00:11 animacje-przyciskow-oraz-objasnienie-cubic-bezier-or-html-css-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2020-01-10 11:00:11 2020-01-10 11:00:11 @@ -1809,6 +1832,8 @@ ck5drlgqw01vci3umc57l191v VLOG#3 - rozstrzygnięcie głosowania i losowanie kubk ck5i1wyfk01vii3um96r30knc 3D Tekst i tajemnice text-shadow 🙂 | Tylko CSS | Fajny CSS https://www.youtube.com/watch?v=H8yVAMhFDRE Bardzo fajny efekt na tekście, który na pewno przyciągnie uwagę 🙂 Tekst jest w pełni funkcjonalny, to znaczy, można go kopiować i jest on indeksowany 👍 🙂\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/JjopLbv\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2020-01-17 11:00:02 3d-tekst-i-tajemnice-text-shadow-or-tylko-css-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2020-01-17 11:00:02 2020-01-17 11:00:02 ck8ykodds01zni3umbpgm3nfe Wzorce projektowe JavaScript https://frontstack.pl/wzorce-projektowe-javascript/

Wzorce projektowe – dwa słowa, które w pierwszej chwili (szczególnie dla mniej doświadczonych developerów) brzmią jak magiczne zaklęcie. To samo dotyczy programistów którzy w świat front end-u wchodzą po przebranżowieniu i samodzielnej nauce programowania. Materiału do przyswojenia jest wtedy tak dużo, że taki temat jak wzorce projektowe JavaScript najczęściej schodzi na drugi plan. Nie ma […]

\n

The post Wzorce projektowe JavaScript appeared first on Frontstack.pl.

2020-04-13 14:28:40 wzorce-projektowe-javascript ckc4s1jmo001ii3um6ovu5nhk 2020-04-13 14:28:40 2020-04-13 14:28:40 ck90d6os001zsi3um9c465llx Constructor design pattern https://frontstack.pl/constructor-design-pattern/

Constructor design pattern jest jednym ze wzorców projektowych kategoryzowanym jako wzorzec konstrukcyjny. W dużym skrócie polega on na tworzeniu obiektów za pomocą tzw. constructor functions oraz niedawno wprowadzonych klas JavaScript. Wzorzec ten jest tak popularny, że zapewne nie wszyscy nawet sobie zdają sprawę, iż takie podejście ma swoją nazwę. ES6 Classes / Klasy W klasycznych […]

\n

The post Constructor design pattern appeared first on Frontstack.pl.

2020-04-14 20:34:30 constructor-design-pattern ckc4s1jmo001ii3um6ovu5nhk 2020-04-14 20:34:30 2020-04-14 20:34:30 +cjtelh7mg01h7i3um558f0tet JavaScript Promise #5 - Async / Await https://www.youtube.com/watch?v=gdOfDaX1BbU Słowa kluczowe async / await ułatwiają pracę z obietnicami. Głównym tego powodem jest fakt, że dzięki nim kod asynchroniczny piszemy praktycznie tak samo jak synchroniczny. Np. odczytanie wartości obietnicy nie wymaga używania funkcji then().\n\nLink do repozytorium: https://github.com/iceener/javascript-promise 2019-03-18 17:00:07 javascript-promise-5-async-await ckieg15g0001bi3um0fj3gred 2019-03-18 17:00:07 2019-03-18 17:00:07 +cjtolk0w001hvi3um4nkr63ey JavaScript Generators - Jak działają generatory https://www.youtube.com/watch?v=aNj9VE9idFU \N 2019-03-25 17:00:00 javascript-generators-jak-dzialaja-generatory ckieg15g0001bi3um0fj3gred 2019-03-25 17:00:00 2019-03-25 17:00:00 ck95nz34g0202i3um56na5jpc Module design pattern https://frontstack.pl/module-design-pattern/

Module design pattern jest jednym z tych wzorców projektowych, którego nieświadomie używamy niemal codziennie. Głównym celem korzystania z tego wzorca jest zapewnienie w naszych aplikacjach logicznego podziału całego kodu na mniejsze części. Kolejną ważną rzeczą dotyczącą tego wzorca jest eksponowanie innym modułom aplikacji tylko wybranych zmiennych i metod. Pozostała część kodu powinna zostać prywatna i […]

\n

The post Module design pattern appeared first on Frontstack.pl.

2020-04-18 13:35:22 module-design-pattern ckc4s1jmo001ii3um6ovu5nhk 2020-04-18 13:35:22 2020-04-18 13:35:22 ck970t60o0203i3um9fk281ey Singleton design pattern https://frontstack.pl/singleton-design-pattern/

Singleton design pattern jest jednym z mniej popularnych i mniej stosowanych wzorców projektów w świecie JavaScript. Nie mniej jednak znajdą się przypadki gdy singleton okaże się dobrym rozwiązaniem. Singleton Singleton jest wzorcem, który pozwala na stworzenie tylko jednej instancji obiektu z klasy bądź konstruktora funkcyjnego. Więcej na temat wzorca konstruktora można znaleźć w tym wpisie. […]

\n

The post Singleton design pattern appeared first on Frontstack.pl.

2020-04-19 12:22:27 singleton-design-pattern ckc4s1jmo001ii3um6ovu5nhk 2020-04-19 12:22:27 2020-04-19 12:22:27 ck9d5n53c020ii3um2pjx8e8a Facade design pattern https://frontstack.pl/facade-design-pattern/

Facade design pattern jest jednym z tych wzorców, które są tak popularne i powszechnie używane, że nie zdajemy sobie sprawy iż może być to wzorzec projektowy. Nazwa tego wzorca wywodzi się z architektury. Facade, czyli po polsku fasada, oznacza frontową część budynku. Jest ona zazwyczaj bardzo reprezentatywna i znajdują się w niej drzwi przez które […]

\n

The post Facade design pattern appeared first on Frontstack.pl.

2020-04-23 19:24:21 facade-design-pattern ckc4s1jmo001ii3um6ovu5nhk 2020-04-23 19:24:21 2020-04-23 19:24:21 @@ -1817,6 +1842,7 @@ ck9k7tu8w020yi3um1isofgpo Adapter design pattern https://frontstack.pl/adapter-d ck9wtq48w021gi3umdofe41tq Mediator design pattern https://frontstack.pl/mediator-design-pattern/

Mediator design pattern jest przykładem behawioralnego (czynnościowego) wzorca projektowego. Wzorzec ten zastosujemy w przypadku gdy w naszym systemie będziemy posiadali wiele komunikujących się ze sobą obiektów. Wraz z rozbudową systemu i rosnącą liczbą obiektów powiązania między nimi mogą zacząć być trudne do utrzymania. Do tego każda zmiana w interfejsach obiektów będzie pociągała za sobą zmiany […]

\n

The post Mediator design pattern appeared first on Frontstack.pl.

2020-05-07 13:46:08 mediator-design-pattern ckc4s1jmo001ii3um6ovu5nhk 2020-05-07 13:46:08 2020-05-07 13:46:08 ck9y8nr1s021li3umfv0h4nw9 Observer design pattern https://frontstack.pl/observer-design-pattern/

Observer design pattern jest behawioralnym wzorcem projektowym w którym jeden obiekt nazywany Subject lub Observable informuje wszystkie inne obserwujące go obiekty o zmianach w jego wewnętrznym stanie. Inne obiekty wtedy zareagują na tę zmianę i obsłużą ją zgodnie z wymaganiami. Informowanie najczęściej jest realizowane przez wywołanie jednej z metod obserwatora. Wzorzec jednocześnie bardzo prosty i […]

\n

The post Observer design pattern appeared first on Frontstack.pl.

2020-05-08 13:31:58 observer-design-pattern ckc4s1jmo001ii3um6ovu5nhk 2020-05-08 13:31:58 2020-05-08 13:31:58 ckdstwpeo025xi3umdgxs9owd REST API w WordPressie, czyli prosta aplikacja w Vue.JS https://blog.capraweb.pl/rest-api-w-wordpressie-czyli-prosta-aplikacja-z-obsluga-api/

\n

REST API jest jednym z najpopularniejszych formatów wymiany danych. Artykuł pozwoli Ci stworzyć prostą aplikację z REST API w roli głównej.

\n

Artykuł REST API w WordPressie, czyli prosta aplikacja w Vue.JS pochodzi z serwisu CapraWeb • Blog o technologiach webowych .

2020-08-13 13:19:00 rest-api-w-wordpressie-czyli-prosta-aplikacja-w-vuejs ckdstwpeo001mi3um9o1s0rq1 2020-08-13 13:19:00 2020-08-13 13:19:00 +cjtyjhwv401i8i3um7pzf6pjb GraphQL - #1 Wprowadzenie https://www.youtube.com/watch?v=QtOo2_j3CbU GraphQL to tzw. "query language" wykorzystywany podczas pracy z API. To nieoficjalny następca standardu REST, oferujący większą elastyczność i dokładność. \n\nW tym filmie przedstawiam główne koncepcje GraphQL (queries, resolvers i schema) oraz z pomocą GraphQL Playground, pokazuję jak sprawdza się w praktyce. 2019-04-01 16:00:04 graphql-1-wprowadzenie ckieg15g0001bi3um0fj3gred 2019-04-01 16:00:04 2019-04-01 16:00:04 cjg3qwow8010si3umc9mvgxvi Front-End Developer Handbook 2018 https://nowoczesny-frontend.pl/front-end-developer-handbook-2018/

Chcesz zostać front-end developerem? Zastanawiasz się jaką ścieżkę nauki obrać? Co znaczą poszczególne nazwy stanowisk i czym się różni Front-End Web Designer od Front-End Dev. Ops? Koniecznie zajrzyj na stronę https://frontendmasters.com/books/front-end-handbook/2018 i przeczytaj Front-End Developer Handbook 2018.

\n

Artykuł Front-End Developer Handbook 2018 pochodzi z serwisu Nowoczesny Frontend.

2018-04-17 14:10:29 front-end-developer-handbook-2018 ckcv2snww001ei3um3wmeeaom 2018-04-17 14:10:29 2018-04-17 14:10:29 cjhy2m1eg013bi3ume3z6dmga OSX i managery oprogramowania – czyli (niezbyt) krótka historia o tym jak musiałem się przeprosić z MacPorts https://nowoczesny-frontend.pl/osx-i-managery-oprogramowania-czyli-niezbyt-krotka-historia-o-tym-jak-musialem-sie-przeprosic-z-macports/

Mniej więcej od 2006 roku pracuję na Makach. Zaczynałem od Maca mini, potem iMac, a potem już różne Macbooki. Przez te wszystkie lata nabrałem przekonania (popartego doświadczeniami), że komputery Apple dużo lepiej nadają się do programowania i tworzenia stron www niż PC. Powodem jest oczywiście architektura, oparta na systemach Unixowych. […]

\n

Artykuł OSX i managery oprogramowania – czyli (niezbyt) krótka historia o tym jak musiałem się przeprosić z MacPorts pochodzi z serwisu Nowoczesny Frontend.

2018-06-03 00:10:55 osx-i-managery-oprogramowania-czyli-niezbyt-krotka-historia-o-tym-jak-musialem-sie-przeprosic-z-macports ckcv2snww001ei3um3wmeeaom 2018-06-03 00:10:55 2018-06-03 00:10:55 cjlw17h6w017oi3um3rkr43fy Moje TOP 6 rozszerzeń do Google Chrome https://nowoczesny-frontend.pl/moje-top-6-rozszerzen-do-google-chrome/

Przeglądarka www jest tym dla internetu czym samochód dla drogi – umożliwia poruszanie się po inforstradzie 🙂 Tak jak samochód, tak i przeglądarka potrzebuje trochę dopieszczenia i tuningu, aby zapewnić maksimum efektywności i bezpieczeństwa. Pomocne tu będą rozszerzenia – w moim przypadku omówię kilka używanych przeze mnie dodatków do Google […]

\n

Artykuł Moje TOP 6 rozszerzeń do Google Chrome pochodzi z serwisu Nowoczesny Frontend.

2018-09-10 08:34:53 moje-top-6-rozszerzen-do-google-chrome ckcv2snww001ei3um3wmeeaom 2018-09-10 08:34:53 2018-09-10 08:34:53 @@ -1839,6 +1865,7 @@ cjook0fvc01ani3umag6ycimb CSS Grid - #4 Auto-fill | Auto-fit https://www.youtube cjoyk5nk001awi3umc3ey1t5z overment.com - #1 Planowanie projektu https://www.youtube.com/watch?v=1dwed3WHIYo Pierwszy odcinek serii, podczas której wspólnie stworzymy stronę overment.com.\n\nPrzed rozpoczęciem projektu ważne jest zaplanowanie zakresu prac oraz wybór narzędzi. W tym odcinku wyjaśniam dlaczego ważna jest odpowiedź na pytanie "Dlaczego chcę zrealizować ten projekt". Oprócz tego wspominam również o trendach i inspiracjach, przydatnych podczas definiowania zakresu projektu.\n\nTego projektu nie realizuję w zgodzie z ŻADNĄ metodyką zarządzania projektami. W zamian, pokazuję co należy wiedzieć w sytuacji gdy podejmujemy się projektu w pojedynkę. \n\n\n--------------------------------------\n\nBądź na bieżąco z Overment, znajdź mnie na: \n\nKanale Discord: \nhttps://discordapp.com/invite/RdVgNYY\n\nFacebooku: \nhttp://www.facebook.com/overment\n\ni twitterze: \nhttps://twitter.com/_overment 2018-11-26 17:00:00 overmentcom-1-planowanie-projektu ckieg15g0001bi3um0fj3gred 2018-11-26 17:00:00 2018-11-26 17:00:00 ck2xokbc801ski3um6whqgcv2 Zrozum event bubbling i event capturing | Przeprogramowani ft. code v0.0.26 https://www.youtube.com/watch?v=GiBVI1HGcoQ Event bubbling oraz event capturing to pojęcia, na temat których znajdziesz w sieci całkiem sporo materiałów. Problem jednak w tym, że materiały te to bardzo często statyczne teksty, które nie mogą do końca przekazać dynamicznego charakteru strony internetowej i tego jak właściwie wygląda faktyczna praca ze zdarzeniami. Aby ułatwić ci zrozumienie capturingu i bubblingu postanowiłem więc przedstawić ci mój własny sposób na podejrzenie tego, jak to wszystko działa w praktyce - zobacz, jak zdarzenie podróżuje po działającej stronie, i zrozum bubbling i capturing w zaledwie kilkanaście minut!\n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani 2019-11-13 19:31:29 zrozum-event-bubbling-i-event-capturing-or-przeprogramowani-ft-code-v0026 ckiyt1v9s001fi3umcgnxbgiu 2019-11-13 19:31:29 2019-11-13 19:31:29 ck30owa9c01sqi3umas2la1rp null / undefined | Przeprogramowani ft. code 27 https://www.youtube.com/watch?v=ehcFIukOSNg Jaka jest różnica pomiędzy wartościami null i undefined oraz dlaczego nie warto używać ani jednej ani drugiej? \n\nhttps://medium.com/javascript-scene/handling-null-and-undefined-in-javascript-1500c65d51ae 2019-11-15 22:04:06 null-undefined-or-przeprogramowani-ft-code-27 ckiyt1v9s001fi3umcgnxbgiu 2019-11-15 22:04:06 2019-11-15 22:04:06 +cjs0l29ns01fhi3um7jwx8r7j Narzędzia webdevelopera - NPM Scripts https://www.youtube.com/watch?v=HDkNCUSCDME Automatyzacja zadań z pomocą Gulp'a czy Grunt'a jest kluczowa w pracy webdevelopera. W tym odcinku pokazuję alternatywę, jaką są skrypty pisane bezpośrednio w pliku package.json. \n\nZ jednej strony zyskujemy większe możliwości konfiguracji i jesteśmy niezależni od (często niedziałających ze względu na wersje) wtyczek i pluginów. Z drugiej strony - cały ciężar konfiguracji i obsługi błędów leży na nas. \n\nTo które rozwiązanie jest lepsze, pozostawiam Wam. \n\n--------------------------------------\n\nBądź na bieżąco z Overment, znajdź mnie na: \n\nKanale Discord: \nhttps://discordapp.com/invite/RdVgNYY\n\nFacebooku: \nhttp://www.facebook.com/overment 2019-02-11 17:00:01 narzedzia-webdevelopera-npm-scripts ckieg15g0001bi3um0fj3gred 2019-02-11 17:00:01 2019-02-11 17:00:01 ck16kcre001qai3um8w4d09fh Żegnamy się z Web Developmentem | Przeprogramowany vlog v0.0.30 https://www.youtube.com/watch?v=7lYgGPrEwyQ Kończy się wrzesień a wraz z nim trzecie wydanie przeprogramowanych: Web Development. O co chodzi z wydaniami? Jaki mamy harmonogram publikacji? Jakie materiały cieszyły się największą popularnością? Co jeszcze wydarzyło się we wrześniu? Jakie mamy plany na październik?\n\nOdpowiedzi na właśnie te pytania udzieli Ci Marcin w tym vlogu, enjoy!\n\nNajpopularniejsze materiały:\nDlaczego pracuję na MacBooku https://www.youtube.com/watch?v=xj6d-rArTDk\nProgramistyczna piątka https://www.youtube.com/watch?v=zy8eO-K6E_o\nVisual Studio Code - efektywna konfiguracja https://www.youtube.com/watch?v=cRY9H2lwzco\nCzy warto uczyć się Reacta w 2019 roku? https://www.youtube.com/watch?v=pPGc6ykOFKI\n5 rzeczy, które powinieneś rozumieć w JavaScript: https://przeprogramowani.pl/5-rzeczy-ktore-powinienes-rozumiec-w-javascript\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani 2019-09-30 15:24:09 zegnamy-sie-z-web-developmentem-or-przeprogramowany-vlog-v0030 ckiyt1v9s001fi3umcgnxbgiu 2019-09-30 15:24:09 2019-09-30 15:24:09 ck18afis001qdi3umd4hd80l6 Jak korzystać z API? | Przeprogramowani ft. code v.0.0.14 https://www.youtube.com/watch?v=KEOBpbL_Ob0 Wykorzystanie API opiera się o pewne fundamentalne zasady, które są wspólne praktycznie dla każdego API oraz każdej technologii, która je wykorzystuje. W tym filmie Adam wyjaśnia jak to wygląda, na bardzo prostych przykładach.\n\nhttps://github.com/public-apis/public-apis\nhttp://www.tvmaze.com/api\nhttps://detectlanguage.com/\nhttps://insomnia.rest/ 2019-10-01 20:21:54 jak-korzystac-z-api-or-przeprogramowani-ft-code-v0014 ckiyt1v9s001fi3umcgnxbgiu 2019-10-01 20:21:54 2019-10-01 20:21:54 ck194q6o001qei3umgaov97to Czym jest Stencil i jak wykorzystać Web Components | Przeprogramowani ft. code v0.0.15 https://www.youtube.com/watch?v=AfpYqX0_y0o Stencil to narzędzie dzięki któremu w łatwy sposób jesteśmy w stanie budować nowe Custom Elementy i współdzielić je pomiędzy aplikacjami tworzonymi w zupełnie różnych technologiach. W środku znajdziemy TypeScript, JSX i wiele więcej. W skrócie - mnóstwo punktów składających się na niesamowity Developer Experience oraz na wysoką jakość tworzonych rozwiązań. Dzisiaj chciałbym ci pokazać jeden z wielu przykładów na wykorzystanie tej technologii oraz przedstawić zalety które wyróżniają ją spośród "konkurencji". Kto wie, może twój kolejny projekt będzie oparty właśnie na Stencilu?\n\nRepozytorium z kodem ➡️https://github.com/psmyrdek/stencil-interop\nnpm link ➡️https://docs.npmjs.com/cli/link.html\nStencil ➡️https://stenciljs.com/\nAlternatywa ➡️https://lit-element.polymer-project.org/\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani 2019-10-02 10:30:00 czym-jest-stencil-i-jak-wykorzystac-web-components-or-przeprogramowani-ft-code-v0015 ckiyt1v9s001fi3umcgnxbgiu 2019-10-02 10:30:00 2019-10-02 10:30:00 @@ -1846,6 +1873,7 @@ ck1aw01r401qgi3um7o8ab9zl Podchwytliwe pytanie rekrutacyjne z JavaScript | przep ck1chw3zk01qii3um9e4x6i3b Apple Music na Web Components? Dowiedz się dlaczego! | Przeprogramowany vlog v0.0.31 https://www.youtube.com/watch?v=Ux4Oqtz4BVg Nowy klient webowy Apple Music powstał w oparciu o Web Components. Dlaczego gigant technologiczny stawia na takie rozwiązanie niejako pomijając najbardziej popularne frameworki front-endowe? O tym, oraz o trzech składowych Web Components opowiadam w nieco luźniejszej formie vlogowej. Zapraszam!\n\nMoja prezentacja na temat Web Components:\nhttp://bit.ly/prezentacja-web-components\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani 2019-10-04 19:01:50 apple-music-na-web-components-dowiedz-sie-dlaczego-or-przeprogramowany-vlog-v0031 ckiyt1v9s001fi3umcgnxbgiu 2019-10-04 19:01:50 2019-10-04 19:01:50 ck1d9v9pc01qji3umcibccp4e Jak uczyć się JavaScript od podstaw? | Przeprogramowany vlog v0.0.32 https://www.youtube.com/watch?v=NARP6ueuGgQ Jak nauczyć się JavaScript od podstaw? Jaki framework (React, Angular czy Vue) wybrać i kiedy zacząć się go uczyć? Co jest najważniejsze w procesie nauki programowania?\n\nPosłuchajcie opinii Adama na ten temat.\n\nPolecane książki: \nhttps://eloquentjavascript.net/\nhttps://github.com/getify/You-Dont-Know-JS\n\nPodcasty:\nhttps://syntax.fm\n\nPolecane serwisy z kursami online:\nhttps://egghead.io\nhttps://laracasts (Vue)\nhttps://frontendmasters.com\nhttps://teamtreehouse.com/\nhttps://www.freecodecamp.org/\n\nOsoby, które warto śledzić na Twitterze:\n@getify\n@ESnextNews\n@wesbos\n@chrisoncode\n@scotch_io\n@tlakomy\n@ydkjs\n@_ericelliott\n@kentcdodds\n@dan_abramov\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani 2019-10-05 08:05:00 jak-uczyc-sie-javascript-od-podstaw-or-przeprogramowany-vlog-v0032 ckiyt1v9s001fi3umcgnxbgiu 2019-10-05 08:05:00 2019-10-05 08:05:00 ck1gkmy3401qmi3um4e6873ta == vs === - który stosować w JavaScript? | Przeprogramowani ft. code v0.0.17 https://www.youtube.com/watch?v=Rv8_QwNJMWI W JavaScript mamy dwa operatory porównania == i ===. Czym się różnią? Czy można stosować je zamiennie? A może któregoś z nich należy unikać? \n\nThe Worst Minesweeper 💣 Ever: https://github.com/slikts/js-equality-game\nTabela porównująca == vs ===: https://dorey.github.io/JavaScript-Equality-Table/\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani 2019-10-07 15:29:46 vs-ktory-stosowac-w-javascript-or-przeprogramowani-ft-code-v0017 ckiyt1v9s001fi3umcgnxbgiu 2019-10-07 15:29:46 2019-10-07 15:29:46 +cju8jkwaw01iji3uma4ll1uwe overment.com - #7 Kodowanie strony głównej https://www.youtube.com/watch?v=jX4oxeGZE_I Kolejny odcinek serii, podczas której krok po kroku tworzymy stronę overment.com. W filmie zobaczysz przede wszystkim dobre praktyki. Pamiętaj że nie jest to kurs pisania stron Internetowych od podstaw.\n\nLink do repozytorium: https://github.com/iceener/overment.com 2019-04-08 16:00:05 overmentcom-7-kodowanie-strony-glownej ckieg15g0001bi3um0fj3gred 2019-04-08 16:00:05 2019-04-08 16:00:05 ck7q2kvhc01xqi3umee9ncbpl Tworzymy sceny i kierujemy statkiem 🚀 | 🎓 Kurs PhaserJS #2 https://www.youtube.com/watch?v=S9kcOWOfEvo W tym kroku uczymy się tworzyć sceny, wczytywać do gry statyczne grafiki, a następnie dodawać je do scen. \n\nOprócz kodowania jest też sporo teorii. W materiale staram się przedstawić: \n* co to są sceny i jak z nich korzystać, \n* co to są sprity\n* co to jest typowanie i dlaczego jest dla programisty tak bardzo pomocne\n* oraz opisuje przydatne dla nas ustawienia fizyki dla statku, którym kierujemy\n\nZapraszam❗😊\n\n ------------------------------------\nPrzydatne linki:\n\n▶️ Repozytorium Github kursu: https://github.com/KrzysiekF/kurs-phaser\n▶️ Repozytorium Github kroku: https://github.com/KrzysiekF/kurs-phaser/tree/krok-2-statek\n\n▶ Oficjalna strona PhaserJS: http://phaser.io/\n▶ Dokumentacja PhaserJS: https://photonstorm.github.io/phaser3-docs/\n▶ Projekt startowy, który wykorzystuje w kursie: https://github.com/yandeu/phaser-project-template\n\nPhaseJS CDN: //cdn.jsdelivr.net/npm/phaser@3.22.0/dist/phaser.min.js\nOficjalny projekt startowy: https://github.com/photonstorm/phaser3-project-template\nOficjalny projekt startowy z TypeScript: https://github.com/photonstorm/phaser3-typescript-project-template\n\n------------------------------------ \nZobacz także:\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2020-03-13 11:00:12 tworzymy-sceny-i-kierujemy-statkiem-or-kurs-phaserjs-2 ckg2k1vxc001gi3umclnyctyp 2020-03-13 11:00:12 2020-03-13 11:00:12 ck802o8t401y6i3umgq3xbgux ▶️Pasek postępu (progressbar) po okręgu | CSS HTML | Fajny CSS https://www.youtube.com/watch?v=yZJyV-G5eIQ W tym materiale stworzymy sobie progressbar. Jednak nie będzie to zwyczajny i nudny pasek postępu 😉Będzie to pasek postępu, który będzie wędrował po okręgu 😄👍\n\nEfekt jest naprawdę ciekawy i prosty do osiągnięcia 🙂\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/bGdRaLr\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2020-03-20 11:00:31 right-pointing-trianglepasek-postepu-progressbar-po-okregu-or-css-html-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2020-03-20 11:00:31 2020-03-20 11:00:31 ck8k0oje001z1i3um5p3z7ycu Animowany Text Shadow | CSS HTML | Fajny CSS https://www.youtube.com/watch?v=HDlWDJ6-ZpI Hej Ludziska❗️🙂 Materiał zawiera instrukcję jak wykonać ciekawą animację opartą o text shadow. Animacja symuluje rozszczepienie kolorów podczas podskakiwania tekstu.\n\nEfekt wygląda całkiem nieźle i moim zdaniem może skutecznie przykuć uwagę odwiedzających naszą stronę 😉 A dodatkowo, można go wykonać w bardzo prosty sposób 🙂\n\nZapraszam❗😊\n\n------------------------------------\n\n📦 Link do projektu na CodePen: https://codepen.io/KrzysiekF/pen/Poqxzyx\n\n🎥 FAJNY CSS - https://www.youtube.com/playlist?list=PLQwxF_-H5mDcSj2irSsGHyHvTxtrczNym\n\n🎥 ANIMOWANY LAYOUT STRONY LOGOWANIA - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdHn_d9AtdqtfQuHqJT2V2P\n\n🎥 KURS JAVASCRIPT - ES6+ NOWE FUNKCJE - https://www.youtube.com/playlist?list=PLQwxF_-H5mDdY1lTZHmr8TASm8HBQ-K06\n\n------------------------------------\n\nZapraszam także na:\n\n➡ Facebook: https://www.facebook.com/frontend.developer.blog\n➡ Twitter: https://twitter.com/KrzysiekFurtak\n➡ Instagram: https://www.instagram.com/krzysiekf/\n➡ GitHub: https://github.com/KrzysiekF\n\n------------------------------------ 2020-04-03 10:00:09 animowany-text-shadow-or-css-html-or-fajny-css ckg2k1vxc001gi3umclnyctyp 2020-04-03 10:00:09 2020-04-03 10:00:09 @@ -1868,6 +1896,7 @@ ck1tp0xd401r4i3um98lbaurb Arity, Anonymous, Closure, Currying, Hoisting | Przepr ck1wd6bpc01rbi3um5y3hcxe1 Alternatywy dla JavaScriptu - Kiedy iść pod prąd? | Przeprogramowany vlog v0.0.36 https://www.youtube.com/watch?v=ewMo35d0X6I Rynek alternatyw dla języka JavaScript jest przeogromny. Na pewno nazwy takie jak TypeScript, Reason czy ClojureScript to codzienność dla wielu z naszych widzów, ale być może ty sam zostałeś przy JSie i zastanawiasz się, czy to na pewno najlepsze dostępne obecnie wyjście? Kiedy dobrze jest iść pod prąd, a kiedy zostać przy standardzie? Poznaj moje spojrzenie!\n\nReason - https://reasonml.github.io\nTypeScript - https://www.typescriptlang.org\nMint - https://www.mint-lang.com\nSvelte - https://svelte.dev\nCoffeeScript - https://coffeescript.org\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani 2019-10-18 16:45:12 alternatywy-dla-javascriptu-kiedy-isc-pod-prad-or-przeprogramowany-vlog-v0036 ckiyt1v9s001fi3umcgnxbgiu 2019-10-18 16:45:12 2019-10-18 16:45:12 ck20lvvqo01rei3umcltd5t2c Jak debugować JavaScript w Visual Studio Code? | przeprogramowani ft. code v0.0.21 https://www.youtube.com/watch?v=OWicWXZWezY Debugowanie JavaScript w Visual Studio Code jest dużo wygodniejsze od console.log’ów czy korzystania z debuggera wbudowanego w Chrome. Wiele osób wie o istnieniu tego narzędzia ale z niego nie korzysta z względu na konieczność ręcznej konfiguracji. Na filmie zobaczysz jakie to proste i poznasz możliwości debuggera wbudowanego w Twój edytor kodu.\n\nDebugger for Chrome: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome\nKonfiguracja dla Reacta/Gatsby: https://gist.github.com/mkczarkowski/01dccd0a00b43b4515647ae79a98ac8d\n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8\n\nOpanuj JavaScript! 💪\nhttps://przeprogramowani.pl/kurs-js/\n\nBądź na bieżąco i zapisz się do newslettera 🔥\nhttps://przeprogramowani.pl/newsletter\n\n⬇️Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani 2019-10-21 16:00:06 jak-debugowac-javascript-w-visual-studio-code-or-przeprogramowani-ft-code-v0021 ckiyt1v9s001fi3umcgnxbgiu 2019-10-21 16:00:06 2019-10-21 16:00:06 ck23k2brk01rgi3umf5nt9vua Czym jest dług technologiczny? | Przeprogramowany vLog v.0.0.37 https://www.youtube.com/watch?v=X-tfGMVwrn0 Dług technologiczny to zjawisko z którym spotyka się każdy, kto ma do czynienia z rozwojem produktów. Czym dokładnie jest taki dług? Czy można go uniknąć a jeżeli tak to jak? W tym odcinku Adam dzieli się swoimi doświadczeniami na ten temat. 2019-10-23 17:32:26 czym-jest-dlug-technologiczny-or-przeprogramowany-vlog-v0037 ckiyt1v9s001fi3umcgnxbgiu 2019-10-23 17:32:26 2019-10-23 17:32:26 +ckqyydpwv00510wjp4nvp0hvz Software Craftsmanship Saturday vol. 45 https://blog.vived.io/software-craftsmanship-saturday-vol-45/ Dzisiaj (zgodnie z tradycją tego tygodnia) tylko dwa artykuły - ale bardzo różnorodne, w tym jeden dotykający bardzo ciekawego aspektu Computer Science. Zapraszamy do lektury! 2021-07-10 07:10:08 software-craftsmanship-saturday-vol.-45 ckmor5k8y000044moj65m13y0 2021-07-11 08:46:59.695 2021-07-11 08:46:59.695 cjrgt48c001eii3um0a0c2jtk Tech.3camp – Zarządzanie stanem aplikacji na przykładzie Vue i Vuex – jest już nagranie video :) https://nowoczesny-frontend.pl/tech-3camp-jest-juz-nagranie-video/

Na kanale Tech.3amp’a na Vimeo pojawiły się filmy z nagraniami z ostatniego spotkania, w tym z mojej prezentacji. Jeśli ktoś jest ciekawy jak i o czym mówiłem, to zapraszam do oglądania 🙂 Serdecznie zapraszam też do obejrzenia filmów z pozostałych prezentacji – zwłaszcza ostatnia o testowaniu w JS zrobiła (chyba […]

\n

Artykuł Tech.3camp – Zarządzanie stanem aplikacji na przykładzie Vue i Vuex – jest już nagranie video :) pochodzi z serwisu Nowoczesny Frontend.

2019-01-28 20:50:06 tech3camp-zarzadzanie-stanem-aplikacji-na-przykladzie-vue-i-vuex-jest-juz-nagranie-video ckcv2snww001ei3um3wmeeaom 2019-01-28 20:50:06 2019-01-28 20:50:06 cjt7o8yuo01gzi3um71spci1i Czy da się zakup gamepada od XBOXa wrzucić w koszty firmy? https://nowoczesny-frontend.pl/czy-da-sie-zakup-gamepada-od-xboxa-wrzucic-w-koszty-firmy/

Chyba każdy programista pracujący w trybie B2B posiadając własną działalność gospodarczą zastanawia się, co jeszcze ze sprzętu komputerowego da się wrzucić w koszty firmy. O ile komputer czy monitor, klawiatura, myszka czy słuchawki nie budzą żadnych wątpliwości, o tyle wrzucenie w koszty XBOXa, Plejki czy telewizora już może być kontrowersyjne […]

\n

Artykuł Czy da się zakup gamepada od XBOXa wrzucić w koszty firmy? pochodzi z serwisu Nowoczesny Frontend.

2019-03-13 20:43:18 czy-da-sie-zakup-gamepada-od-xboxa-wrzucic-w-koszty-firmy ckcv2snww001ei3um3wmeeaom 2019-03-13 20:43:18 2019-03-13 20:43:18 cjzv93p1c01p0i3um7aw8f8g6 VUEX – kilka przemyśleń po roku kodowania https://nowoczesny-frontend.pl/vuex-kilka-przemyslen-po-roku-kodowania/

Co to jest Vue i Vuex? Jeśli nie wiesz co to jest Vue lub Vuex – to zapraszam najpierw do obejrzenia nagrania z mojej prezentacji w ramach Tech3Camp’a: https://nowoczesny-frontend.pl/tech-3camp-jest-juz-nagranie-video Kilka przemyśleń… Mniej więcej od roku w różnych projektach firmowych używamy tandemu Vue.js + Vuex i muszę powiedzieć, że im dalej […]

\n

Artykuł VUEX – kilka przemyśleń po roku kodowania pochodzi z serwisu Nowoczesny Frontend.

2019-08-28 12:44:00 vuex-kilka-przemyslen-po-roku-kodowania ckcv2snww001ei3um3wmeeaom 2019-08-28 12:44:00 2019-08-28 12:44:00 @@ -1897,15 +1926,6 @@ cjr6ktgqw01e4i3um1iui47rf overment.com - #6 Ustawienia szablonu i nawigacja http cjrgkwfew01ehi3um6s5if6sp Docker dla webdevelopera - #02 Docker Compose https://www.youtube.com/watch?v=jqGrBffAs5M \N 2019-01-28 17:00:05 docker-dla-webdevelopera-02-docker-compose ckieg15g0001bi3um0fj3gred 2019-01-28 17:00:05 2019-01-28 17:00:05 cjrqkzfmg01f3i3uma2848pqv Gulp - Aktualizacja v3.x - v4.x https://www.youtube.com/watch?v=V7-4mrIrpec \N 2019-02-04 17:00:07 gulp-aktualizacja-v3x-v4x ckieg15g0001bi3um0fj3gred 2019-02-04 17:00:07 2019-02-04 17:00:07 ck5xy734o01vvi3um7v5d4rru ✅8 rzeczy, które MUSISZ zrobić na produkcji (Checklista dla aplikacji webowych) https://www.youtube.com/watch?v=UdhyBnZmkrk W życiu każdego web deva przychodzi moment gdy nasze dzieło (lub całego zespołu) musi zostać wdrożone na serwer produkcyjny. Z tego materiału dowiesz się o czym warto pamiętać wrzucając aplikację na serwer. Jeżeli coś pominąłem to daj znać w komentarzu, by wszyscy mogli skorzystać 💪🏻\n\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2020-01-28 14:00:15 heavy-check-mark8-rzeczy-ktore-musisz-zrobic-na-produkcji-checklista-dla-aplikacji-webowych ckivz8t54001di3umfv7i4q26 2020-01-28 14:00:15 2020-01-28 14:00:15 -cjs0l29ns01fhi3um7jwx8r7j Narzędzia webdevelopera - NPM Scripts https://www.youtube.com/watch?v=HDkNCUSCDME Automatyzacja zadań z pomocą Gulp'a czy Grunt'a jest kluczowa w pracy webdevelopera. W tym odcinku pokazuję alternatywę, jaką są skrypty pisane bezpośrednio w pliku package.json. \n\nZ jednej strony zyskujemy większe możliwości konfiguracji i jesteśmy niezależni od (często niedziałających ze względu na wersje) wtyczek i pluginów. Z drugiej strony - cały ciężar konfiguracji i obsługi błędów leży na nas. \n\nTo które rozwiązanie jest lepsze, pozostawiam Wam. \n\n--------------------------------------\n\nBądź na bieżąco z Overment, znajdź mnie na: \n\nKanale Discord: \nhttps://discordapp.com/invite/RdVgNYY\n\nFacebooku: \nhttp://www.facebook.com/overment 2019-02-11 17:00:01 narzedzia-webdevelopera-npm-scripts ckieg15g0001bi3um0fj3gred 2019-02-11 17:00:01 2019-02-11 17:00:01 -cjsb0ocew01fxi3umanoa2gyj JavaScript Promise #1 - Wprowadzenie https://www.youtube.com/watch?v=FtdM3LIUXx4 Kod asynchroniczny wymaga od nas specjalnej obsługi. Jednym z narzędzi, które nam to umożliwia są obietnice (promise). W tym filmie znajdziesz odpowiedź na pytanie czym jest obiekt Promise oraz przykład jego wykorzystania.\n\nŹródła: \nMDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\n\n--------------------------------------\n\nBądź na bieżąco z Overment, znajdź mnie na: \n\nKanale Discord: \nhttps://discordapp.com/invite/RdVgNYY\n\nFacebooku: \nhttp://www.facebook.com/overment 2019-02-19 00:14:47 javascript-promise-1-wprowadzenie ckieg15g0001bi3um0fj3gred 2019-02-19 00:14:47 2019-02-19 00:14:47 -cjskl868001gbi3um418807lf JavaScript Promise #2 - Promise Constructor https://www.youtube.com/watch?v=7pvSrGLEJxI Możemy utworzyć obietnicę, tworząc obiekt z pomocą konstruktora. W tym filmie dowiesz się jak dokładnie to robić i na co warto zwrócić uwagę. Na koniec filmu znajdziesz praktyczny przykład implementacji funkcji wykorzystującej obietnicę. 2019-02-25 17:00:00 javascript-promise-2-promise-constructor ckieg15g0001bi3um0fj3gred 2019-02-25 17:00:00 2019-02-25 17:00:00 -cjsulb8qw01gpi3um3hzq60zu JavaScript Promise #3 - Chaining https://www.youtube.com/watch?v=iA-XoMkqCUA Chaining polega na łączeniu ze sobą wielu obietnic. Dzięki czemu możemy wykorzystywać wynik poprzednich obietnic w kolejnych. \n\nChaining możliwy jest z wykorzystaniem funkcji then(). 2019-03-04 17:00:05 javascript-promise-3-chaining ckieg15g0001bi3um0fj3gred 2019-03-04 17:00:05 2019-03-04 17:00:05 -cjt4le7ew01gxi3um0sh85ryn JavaScript Promise #4 - Promise API https://www.youtube.com/watch?v=cpTfChthaS4 Klasa Promise posiada 4 metody statyczne, które możemy wykorzystać w zależności od naszych potrzeb, bez konieczności tworzenia nowego obiektu. Najbardziej użyteczną z nich jest metoda all(), umożliwiająca uruchomienie wielu obietnic równolegle (eng. parallel) 2019-03-11 17:00:05 javascript-promise-4-promise-api ckieg15g0001bi3um0fj3gred 2019-03-11 17:00:05 2019-03-11 17:00:05 -cjtelh7mg01h7i3um558f0tet JavaScript Promise #5 - Async / Await https://www.youtube.com/watch?v=gdOfDaX1BbU Słowa kluczowe async / await ułatwiają pracę z obietnicami. Głównym tego powodem jest fakt, że dzięki nim kod asynchroniczny piszemy praktycznie tak samo jak synchroniczny. Np. odczytanie wartości obietnicy nie wymaga używania funkcji then().\n\nLink do repozytorium: https://github.com/iceener/javascript-promise 2019-03-18 17:00:07 javascript-promise-5-async-await ckieg15g0001bi3um0fj3gred 2019-03-18 17:00:07 2019-03-18 17:00:07 -cjtolk0w001hvi3um4nkr63ey JavaScript Generators - Jak działają generatory https://www.youtube.com/watch?v=aNj9VE9idFU \N 2019-03-25 17:00:00 javascript-generators-jak-dzialaja-generatory ckieg15g0001bi3um0fj3gred 2019-03-25 17:00:00 2019-03-25 17:00:00 -cjtyjhwv401i8i3um7pzf6pjb GraphQL - #1 Wprowadzenie https://www.youtube.com/watch?v=QtOo2_j3CbU GraphQL to tzw. "query language" wykorzystywany podczas pracy z API. To nieoficjalny następca standardu REST, oferujący większą elastyczność i dokładność. \n\nW tym filmie przedstawiam główne koncepcje GraphQL (queries, resolvers i schema) oraz z pomocą GraphQL Playground, pokazuję jak sprawdza się w praktyce. 2019-04-01 16:00:04 graphql-1-wprowadzenie ckieg15g0001bi3um0fj3gred 2019-04-01 16:00:04 2019-04-01 16:00:04 -cju8jkwaw01iji3uma4ll1uwe overment.com - #7 Kodowanie strony głównej https://www.youtube.com/watch?v=jX4oxeGZE_I Kolejny odcinek serii, podczas której krok po kroku tworzymy stronę overment.com. W filmie zobaczysz przede wszystkim dobre praktyki. Pamiętaj że nie jest to kurs pisania stron Internetowych od podstaw.\n\nLink do repozytorium: https://github.com/iceener/overment.com 2019-04-08 16:00:05 overmentcom-7-kodowanie-strony-glownej ckieg15g0001bi3um0fj3gred 2019-04-08 16:00:05 2019-04-08 16:00:05 cjuijnyts01izi3um9pzbd3o5 GraphQL - #2 Schema https://www.youtube.com/watch?v=s3-WCKBGU8Q GraphQL wymaga zaprojektowania schematu, który dokładnie opisuje API serwera - czyli to w jaki sposób wymieniamy z nim informacje. Definicje schematu określane są zwykle z pomocą SDL (Schema Definition Language) lub IDL (Interface Definition Language). Warto zapamiętać, że GraphQL jest silnie typowany (każda definicja musi posiadać określony typ) oraz można z nim pracować w połączeniu z dowolnym językiem programowania. 2019-04-15 16:00:10 graphql-2-schema ckieg15g0001bi3um0fj3gred 2019-04-15 16:00:10 2019-04-15 16:00:10 cjusjqvy801jci3umgea29yhb GraphQL - #3 Resolvers https://www.youtube.com/watch?v=rz4kBG8sX-A Resolver to funkcja lub metoda, zwracająca wartość dla typu lub pola, zdefiniowanych w schemacie opisującym API serwera.\n\nResolver może zwracać obiekt, wartość skalarną (taką jak String czy Number) lub obietnicę. 2019-04-22 16:00:08 graphql-3-resolvers ckieg15g0001bi3um0fj3gred 2019-04-22 16:00:08 2019-04-22 16:00:08 cjv2jtpzk01jni3umbq2yb22f GraphQL - #4 Query https://www.youtube.com/watch?v=O4Y8fs-RcX8 GraphQL query od podstaw. Wyjaśniam m.in. argumenty, dyrektywy i fragmenty. \n\nLink do repozytorium: https://github.com/iceener/graphql-tutorial/tree/master/04-queries 2019-04-29 16:00:02 graphql-4-query ckieg15g0001bi3um0fj3gred 2019-04-29 16:00:02 2019-04-29 16:00:02 @@ -1927,19 +1947,22 @@ ck63nxvf401w6i3umdsqac5gl Medytacja - dlaczego warto i jak zacząć? | Przeprogr ck6ao56cw01wbi3umhycke66f Kim jest Product Engineer i co robić aby nim zostać? | Przeprogramowany vlog v0.0.51 https://www.youtube.com/watch?v=XCs4-K1iO-k Kim jest Product Engineer? Takim mianem zaczęto określać programistów, którzy ponad nowinki techniczne i architekturę stawiają rzeczywisty wpływ na budowany produkt oraz chęć dowiezienia jak największej wartości dla użytkownika końcowego. Zamiast ślepego ściągania zadań z Jiry - mnóstwo pytań. Zamiast oznaczania jako "Done" - ciągła iteracja. Zamiast przybijania piątek między sobą - wywiad w terenie z użytkownikami produktu. Dzisiaj dowiesz się co zrobić, aby i ciebie zaczęto określać w ten właśnie sposób 💪\n\nhttps://en.wikipedia.org/wiki/Product_engineering\nhttps://medium.com/@sherifmansour/product-engineers-f424da766871\nhttps://dev.to/veebuv/never-work-as-a-software-engineer-in-a-startup-4a4p\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-02-06 11:39:50 kim-jest-product-engineer-i-co-robic-aby-nim-zostac-or-przeprogramowany-vlog-v0051 ckiyt1v9s001fi3umcgnxbgiu 2020-02-06 11:39:50 2020-02-06 11:39:50 ck6hiq97c01wfi3um38644a2x TDD w praktyce - poznaj Jesta i cykl Red-Green-Refactor | Przeprogramowani ft. code v0.0.33 https://www.youtube.com/watch?v=dizaPNQSFHI TDD - buzzword czy praktyka dzięki której wytworzysz lepsze oprogramowanie? W najnowszym odcinku Przeprogramowanych odpowiadamy na to pytanie rozwiązujac jeden z projektów naszego kursu Opanuj JavaScript zgodnie z praktyką test driven development, ucząc się przy okazji obsługi narzędzia od samego Facebooka, czyli test runnera Jest\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-02-11 06:42:39 tdd-w-praktyce-poznaj-jesta-i-cykl-red-green-refactor-or-przeprogramowani-ft-code-v0033 ckiyt1v9s001fi3umcgnxbgiu 2020-02-11 06:42:39 2020-02-11 06:42:39 ck6kmsz7c01wii3umhk6g4vc4 Umowa o pracę czy B2B - co bardziej się opłaca 🤔? https://www.youtube.com/watch?v=HRaIkvOCuHc Każdy programista podejmując pracę staje przed decyzją o wyborze formy zatrudnienia. Co się bardziej opłaca: klasyczna umowa o pracę czy może samozatrudnienie i kontrakt b2b? Czy przy świadomej decyzji należy brać wyłącznie wynagrodzenie? Zdecydowanie nie! W tym odcinku poznasz wszystkie kluczowe czynniki, które trzeba mieć na uwadze.\n\nPorównywarka wynagrodzeń (zaznacz uwzględnij koszta pracodawcy!): https://samozatrudnienie.kalkulator-plac.eu/porownywarka-wysokosci-wynagrodzen-form-zatrudnienia\n\n128 kosztów uzyskania przychodu każdego programisty: https://programistanaswoim.pl/128-kosztow-uzyskania-przychodu-kazdego-programisty/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-02-13 11:00:03 umowa-o-prace-czy-b2b-co-bardziej-sie-oplaca ckiyt1v9s001fi3umcgnxbgiu 2020-02-13 11:00:03 2020-02-13 11:00:03 +cjz8879mw01odi3um88lng2ug ES2019: Object.fromEntries() https://www.youtube.com/watch?v=QHoLi2nBzaw Metoda fromEntries dostępna w ES2019 odwraca działanie metody .entries. Połączenie tych dwóch metod umożliwia zwinne wykonywanie operacji na obiektach poprzez zamianę ich na tablicę (Array) lub mapę (Map).\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-08-12 10:00:05 es2019-objectfromentries ckieg15g0001bi3um0fj3gred 2019-08-12 10:00:05 2019-08-12 10:00:05 ck6s66p2w01wni3um2uop8c4w Technika Pomodoro - prosty i skuteczny sposób na zarządzanie czasem | Przeprogramowany vlog v0.0.53 https://www.youtube.com/watch?v=Uz5AzAuBoac Technika Pomodoro 🍅 to jedna z najpopularniejszych metod zarządzania czasem, która mimo swojej prostoty, daje niesamowite efekty. \n\nMarcin dzięki Pomodoro znacznie podniósł wydajność swojej nauki programowania 📈. Stosowanie tej metody pozwoliło mu rozsądne planować czas i skoncentrować się na procesie, a nie na rezultatach 💪. Dzięki temu oszczędził sobie wiele zbędnej frustracji i stresu 😎\n\nZ odcinka dowiesz się:\n✅ jak korzystać z techniki pomodoro?\n✅ skąd bierze się skuteczność tej prostej metody?\n✅ tips & tricks czyli 4 lata z pomodoro w pigułce\n\nBlokowanie rozproszeń:\nFreedom - http://freedom.to/\nRescueTime - https://www.rescuetime.com/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-02-18 17:36:59 technika-pomodoro-prosty-i-skuteczny-sposob-na-zarzadzanie-czasem-or-przeprogramowany-vlog-v0053 ckiyt1v9s001fi3umcgnxbgiu 2020-02-18 17:36:59 2020-02-18 17:36:59 ck6utl37401wui3um18el8s07 Projekt do portfolio i na rozmowę kwalifikacyjną programisty - jak przygotować? https://www.youtube.com/watch?v=dx8Lhvka2k0 Jak przygotować projekt do portfolio programisty? Na podstawie projektu Wojtka - jednego z uczestników kursu Opanuj JavaScript - zwracamy uwagę na najważniejsze kwestie z perspektywy rekrutera. Dowiedz się jaką rolę w ocenie odgrywa README, dlaczego testy są tak ważne właśnie w kontekście rekrutacji i dlaczego działanie projektu to fakt... który sam w sobie wart jest docenienia ;)\n\nProjekt Wojtka - https://github.com/dobijaw/3po3\nTest runner dla JavaScriptu - https://jestjs.io/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-02-20 14:07:34 projekt-do-portfolio-i-na-rozmowe-kwalifikacyjna-programisty-jak-przygotowac ckiyt1v9s001fi3umcgnxbgiu 2020-02-20 14:07:34 2020-02-20 14:07:34 ck71s377c01wyi3um8lcrcosc Co chciałbym wiedzieć, gdy zaczynałem naukę programowania? | Przeprogramowany vlog v0.0.54 https://www.youtube.com/watch?v=5eAXaAtJk8A Człowiek uczy się na błędach, więc wygląda na to, że przez kilka ostatnich lat nauczyłem się bardzo dużo 😅. Z jakich rad skorzystałbym najbardziej, gdybym zaczynał naukę programowania od początku 🤔? \n\nZ odcinka dowiesz się:\n✅ Co MUSI umieć każdy początkujący programista?\n✅ Co o poziomie mojej wiedzy uświadomił mi “guru” Reacta, Dan Abramov?\n✅ Dlaczego rozważania o “syndrom oszusta” traktuje z przymrużeniem oka?\n✅ Czy nadal wybrałbym JavaScript jako swój pierwszy język programowania?\n✅ Jaki język polecam osobom uczącym się programowania w 2020 roku?\n\nCzego nie wiedział Dan Abramov w 2019? https://overreacted.io/things-i-dont-know-as-of-2018/\nJak efektywnie uczyć się programowania w 2020 roku? https://www.youtube.com/watch?v=svgI-V_BBOs\nPrzemówienie Steve'a Jobsa na Stanford University: https://www.youtube.com/watch?v=UF8uR6Z6KLc\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-02-25 11:00:03 co-chcialbym-wiedziec-gdy-zaczynalem-nauke-programowania-or-przeprogramowany-vlog-v0054 ckiyt1v9s001fi3umcgnxbgiu 2020-02-25 11:00:03 2020-02-25 11:00:03 ck74ee8nk01wzi3umaz7p8q4l Myśl jak programista! Jak rozwiązywać trudne problemy (nie tylko przez kod). https://www.youtube.com/watch?v=RYvmYnF2-QY Czy potrafisz myśleć jak programista? Albo na początek... co to właściwie znaczy? W tym odcinku pokażę ci, jak ten specyficzny sposób myślenia pozwala programistom rozwiązywać nawet najbardziej trudne i abstrakcyjne problemy.\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-02-27 07:00:02 mysl-jak-programista-jak-rozwiazywac-trudne-problemy-nie-tylko-przez-kod ckiyt1v9s001fi3umcgnxbgiu 2020-02-27 07:00:02 2020-02-27 07:00:02 ck7bs66n401x8i3um1rr2g64p Skuteczna nauka angielskiego dla programisty | Przeprogramowany vlog v0.0.55 https://www.youtube.com/watch?v=BULNVhJibD4 Znajomość języka angielskiego jest niezbędna u każdego programisty. Na szczęście nie musisz znać wszystkich jego aspektów, aby służył Ci podczas codziennej nauki oraz pracy. \n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\nGoogle Translate Extension - https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb?hl=pl\nSłownik bab.la - https://bab.la/\nJak uczyć się za pomocą Anki? https://www.youtube.com/watch?v=ouCkE8GvU7g\nKsiążka English 4 IT - https://helion.pl/ksiazki/english-4-it-praktyczny-kurs-jezyka-angielskiego-dla-specjalistow-it-i-nie-tylko-beata-blaszczyk,anginf.htm#format/d\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-03-03 11:00:04 skuteczna-nauka-angielskiego-dla-programisty-or-przeprogramowany-vlog-v0055 ckiyt1v9s001fi3umcgnxbgiu 2020-03-03 11:00:04 2020-03-03 11:00:04 ck7eehcq001xbi3um65mn1274 Jak być produktywnym? 5 prostych technik do zastosowania od zaraz https://www.youtube.com/watch?v=eM5vsab31_I Wiecznie brakuje ci czasu i nie wiesz na czym się skupić? Dzisiaj pokaże ci pięć prostych technik, dzięki którym ta sytuacja może się zmienić. Wszystko po to, żeby przy twojej osobistej ilości dostępnego czasu być w stanie dostarczać jak najwięcej i jak najlepiej. Warto spróbować, bo to naprawdę nie jest trudne!\n\nTechnika pomodoro - https://youtu.be/Uz5AzAuBoac\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-03-05 07:00:09 jak-byc-produktywnym-5-prostych-technik-do-zastosowania-od-zaraz ckiyt1v9s001fi3umcgnxbgiu 2020-03-05 07:00:09 2020-03-05 07:00:09 +ck98sb6bc0207i3umdb3ch542 Pure Functions - Functional Programming in JS by overment https://www.youtube.com/watch?v=AGrSiyK4uGA Pure Functions (PF / czyste funkcje) to funkcje które dla argumentów o tej samej wartości zawsze zwracają ten sam wynik, nie powodując efektów ubocznych (Side Effects). O takich funkcjach mówi się też, że są idempotentne (eng. Idempotent), zapamiętywalne (eng. Memoizable) oraz charakteryzuje je tzw. Referentail Transparency - czyli fakt, że można ich ciało zastąpić oczekiwaną wartością.\n\nPure Functions stanowią podstawę programowania funkcyjnego (functional programming) w JS i nie tylko. Ich stosowanie zwiększa czytelność kodu, który łatwo można testować (przez np. unit testy) oraz debugować.\n\nFilm jest częścią serii Programowanie Funkcyjne w #JavaScript:\nhttps://www.youtube.com/playlist?list=PLjHmWifVUNMLR1Oz3WYK7XRLEY5LvSOPu\n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nLink do repozytorium projektu znajdziesz tutaj: \nhttps://github.com/iceener/functional-programming/tree/master/02_pure_functions\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-04-20 18:00:03 pure-functions-functional-programming-in-js-by-overment ckieg15g0001bi3um0fj3gred 2020-04-20 18:00:03 2020-04-20 18:00:03 ck7ls9gvs01xhi3um3re5fsxo Przeczytałem 200 książek! Czego się nauczyłem 🤔? https://www.youtube.com/watch?v=jK_TOyOd_zQ Dzisiaj postaram się zniweczyć lata wysiłku państwowego systemu edukacji i ponownie przekonać Cię do czytania książek. Poznasz mój system na wyszukiwanie wybitnych książek. Opowiem Ci jakie korzyści płyną z czytania dobrej literatury. Dostaniesz kilka rad odnośnie tego jak wyrobić sobie nawyk czytania. Na koniec, mam dla Ciebie 10 książkowych rekomendacji, z pięciu różnych kategorii. W sam raz na dobry początek przygody z czytaniem:\n1. Gra Endera https://www.goodreads.com/book/show/375802.Ender_s_Game\n2. Historia Twojego życia https://www.goodreads.com/book/show/223380.Stories_of_Your_Life_and_Others\n3. Czysty kod https://www.goodreads.com/book/show/3735293-clean-code\n4. Hello Startup https://www.goodreads.com/book/show/26457143-hello-startup\n5. Elon Musk https://www.goodreads.com/book/show/25541028-elon-musk\n6. Pan raczy żartować, Panie Feynman https://www.goodreads.com/book/show/35167685-surely-you-re-joking-mr-feynman\n7. Głowa do liczb https://www.goodreads.com/book/show/18693655-a-mind-for-numbers\n8. Atomowe nawyki https://www.goodreads.com/book/show/40121378-atomic-habits\n9. Sapiens. Od zwierząt do bogów https://www.goodreads.com/ps/book/show/40036749-sapiens-od-zwierz-t-do-bog-w\n10. Seeking Wisdom: From Darwin to Munger https://www.goodreads.com/book/show/1995421.Seeking_Wisdom\n\nOd kogo biorę rekomendacje: Scott Adams, John Sonmez, Ryan Holiday, James Clear, Sam Harris, Shane Perrish, Jordan Peterson, Joe Rogan\n\nMój profil na goodreads: https://www.goodreads.com/user/show/30155771-marcin-czarkowski\n\nPowiązane materiały na kanale:\nJak wyrabiać nawyki? https://www.youtube.com/watch?v=vVRY4t9P_SY\nJak uczyć się programowania z Anki? https://www.youtube.com/watch?v=ouCkE8GvU7g\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-03-10 11:00:19 przeczytalem-200-ksiazek-czego-sie-nauczylem ckiyt1v9s001fi3umcgnxbgiu 2020-03-10 11:00:19 2020-03-10 11:00:19 ck7oekdpc01xli3umfwndb60j Skuteczna komunikacja. Na co zwrócić uwagę? (jako programista) https://www.youtube.com/watch?v=tThFUFgH1nY W 2020r. wiemy już na pewno, że w pracy programisty skuteczna komunikacja to narzędzie niemal tak potężne, jak wytwarzanie oprogramowania. Dzisiaj, aby lepiej rozumieć temat komunikowania się i niejako wprowadzić was w świat umiejętności miękkich, opowiadam o perspektywie nadawcy, odbiorcy oraz o samej formie przekazywanej wiadomości.\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-03-12 07:00:12 skuteczna-komunikacja-na-co-zwrocic-uwage-jako-programista ckiyt1v9s001fi3umcgnxbgiu 2020-03-12 07:00:12 2020-03-12 07:00:12 ck7w98pp401xwi3umh6bj0tup Angular jest PRO! Poznaj 5 mocnych stron tego frameworka https://www.youtube.com/watch?v=9BkqOZvcZWM Angular nie jest narzędziem brylującym w mediach społecznościowych, ale to wciąż rozwiązanie na którym opiera się mnóstwo najpopularniejszych obecnie stron i aplikacji. W dzisiejszym odcinku pokażę ci 5 powodów dla których warto rozważyć powrót do tego właśnie narzędzia.\n\nStrona główna - https://angular.io/\nAngular CLI - http://cli.angular.io/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-03-17 18:53:19 angular-jest-pro-poznaj-5-mocnych-stron-tego-frameworka ckiyt1v9s001fi3umcgnxbgiu 2020-03-17 18:53:19 2020-03-17 18:53:19 cjydi8erc01nki3um468a148r Hosting strony stworzonej w Gatsby.js https://www.youtube.com/watch?v=y-QrkXzSevE Podczas gdy przygotowanie strony w Gatsby.js jest stosunkowo proste, tak łatwo okazuje się że jej publikacja bywa problematyczna. Na hostingu współdzielonym często nie mamy dostępu do konsoli a hostingi typu VPS wymagają dodatkowej konfiguracji. \n\nNa szczęście istnieje kilka rozwiązań, które umożliwiają opublikowanie strony w dosłownie kilka minut. Są to m.in.: https://netlify.com i Github Pages \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-07-21 22:00:03 hosting-strony-stworzonej-w-gatsbyjs ckieg15g0001bi3um0fj3gred 2019-07-21 22:00:03 2019-07-21 22:00:03 cjyo819zk01nvi3um5ual98xq Pętle Asynchroniczne z Async / Await ⏳ https://www.youtube.com/watch?v=SM0FSpQRcGk Iterowanie po elementach asynchronicznych w teorii nie powinno nas czymkolwiek zaskoczyć. Okazuje się jednak że jest inaczej. Ten film powstał po to, aby pokazać i rozwiązać problem z tym związany. \n\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-07-29 10:00:02 petle-asynchroniczne-z-async-await-hourglass-with-flowing-sand ckieg15g0001bi3um0fj3gred 2019-07-29 10:00:02 2019-07-29 10:00:02 cjyy84e2001o6i3um6q2lfd5w ES2019 (ES10): flat() & flatMap() https://www.youtube.com/watch?v=xihytwxLz0s Metody flat oraz flatMap dostępne są w najnowszej wersji EcmaScript2019. Metoda flat() "spłaszcza" zagnieżdżoną tablicę. Natomiast metoda flatMap() działa podobnie jak metoda map ale jej wynikiem jest również "spłaszczona" tablica.\n\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-08-05 10:00:09 es2019-es10-flat-and-flatmap ckieg15g0001bi3um0fj3gred 2019-08-05 10:00:09 2019-08-05 10:00:09 -cjz8879mw01odi3um88lng2ug ES2019: Object.fromEntries() https://www.youtube.com/watch?v=QHoLi2nBzaw Metoda fromEntries dostępna w ES2019 odwraca działanie metody .entries. Połączenie tych dwóch metod umożliwia zwinne wykonywanie operacji na obiektach poprzez zamianę ich na tablicę (Array) lub mapę (Map).\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-08-12 10:00:05 es2019-objectfromentries ckieg15g0001bi3um0fj3gred 2019-08-12 10:00:05 2019-08-12 10:00:05 +ck9dui5rs020li3umezuk0ozl Jak wygląda kurs Opanuj JavaScript 'od środka'? https://www.youtube.com/watch?v=u0n7oYapiWw Dołącz do 9-tygodniowego kursu JavaScript: \nhttp://overment.com/js 2020-04-24 07:00:19 jak-wyglada-kurs-opanuj-javascript-od-srodka ckieg15g0001bi3um0fj3gred 2020-04-24 07:00:19 2020-04-24 07:00:19 +ckrrngz5z00020vjlz6g1ujv0 Różnice pomiędzy npm install a npm ci https://www.oskarkowalow.pl/blog/roznice-pomiedzy-npm-install-a-npm-ci W poprzednim wpisie opisałem komendę npm install .\nTeraz opiszę co robi komenda npm ci oraz jakie są różnice między nimi. Skrót CI… 2021-07-31 00:00:00 roznice-pomiedzy-npm-install-a-npm-ci ckocpwuso0019afl7he6igw3f 2021-07-31 10:46:54.983 2021-07-31 10:46:54.983 cjzi8a57s01ooi3umh42rf6wl ES2019: Optional catch binding https://www.youtube.com/watch?v=BupXZf42sDI ECMAScript2019 daje nam możliwość pominięcia bindowania obiektu błędu w składni try ... catch .... Czy to dobry pomysł i w jakich sytuacjach możemy to wykorzystać? Odpowiedź nie jest tak oczywista jak mogłoby się wydawać. \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-08-19 10:00:01 es2019-optional-catch-binding ckieg15g0001bi3um0fj3gred 2019-08-19 10:00:01 2019-08-19 10:00:01 cjzs8d6yw01owi3umeiq6hxb0 ES6 - Obiekt Map https://www.youtube.com/watch?v=NV54JW_PaeA Czym są mapy w JavaScript? W tym filmie znajdziesz najważniejsze informacje na temat map. Ich praktyczne wykorzystanie omówimy w kolejnym filmie.\n\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-08-26 10:00:05 es6-obiekt-map ckieg15g0001bi3um0fj3gred 2019-08-26 10:00:05 2019-08-26 10:00:05 ck028g4v401p8i3um1krn3yl0 ES2015 - Mapy vs Obiekty https://www.youtube.com/watch?v=DzA-mIyeQNQ Mapy i Obiekty w dużym stopniu są do siebie podobne, lecz to różnice decydują o tym w jakich sytuacjach powinniśmy korzystać z jednych albo drugich. \n\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2019-09-02 10:00:04 es2015-mapy-vs-obiekty ckieg15g0001bi3um0fj3gred 2019-09-02 10:00:04 2019-09-02 10:00:04 @@ -1964,6 +1987,7 @@ cjn0tvtig018vi3umboul20c6 Proste RESTowe API (Node.js + express.js + TypeScript ck8phvfko01zai3um6zbe534q Tego nie wiesz o typach w TypeScript | Przeprogramowani.ts #5 https://www.youtube.com/watch?v=HZoMw5ZSfaE Dzisiaj mnóstwo przydatnych ciekawostek o typach. Typach, które niby każdy z nas stosuje, ale nie każdy zna ich prawdziwe możliwości. Czym są unie? Jak na typ zmiennej wpływają słowa kluczowe let i const? Jak oznaczyć wszystkie pola danego obiektu jako opcjonalne, bez ingerowania w kształt oryginalnego typu? O tym w najnowszym odcinku twojej ulubionej serii o języku TypeScript, czyli Przeprogramowani.ts - zapraszamy!\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-04-07 06:00:15 tego-nie-wiesz-o-typach-w-typescript-or-przeprogramowanits-5 ckiyt1v9s001fi3umcgnxbgiu 2020-04-07 06:00:15 2020-04-07 06:00:15 ck8ttjn4801zhi3um55i6epae PRZEPROGRAMOWANY LIVE #2 (obowiązki CTO, oferty pracy, Q&A) - 09.04.2020 https://www.youtube.com/watch?v=JOJB7U5x8Kk Dzisiaj ponownie spotykamy się na żywo (oczywiście z zachowaniem zdrowego dystansu) 🙌 \n\nCo w środku? \n\n3:33 - Obowiązki CTO\n8:10 - Marcin szuka programisty!\n10:05 - Oferty dla front-end developerów\n14:50 - Od prokuratora do programisty\n28:40 - Programistyczne certyfikaty\n39:40 - Programiści po 30tce\n49:00 - Czy algorytmy się przydają?\n50:52 - Web Components\n1:01:06 - Code Review poza pracą\n1:10:12 - Kiedy zmieniać pracę?\n1:15:00 - Czy iść na studia?\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-04-10 06:38:05 przeprogramowany-live-2-obowiazki-cto-oferty-pracy-qanda-09042020 ckiyt1v9s001fi3umcgnxbgiu 2020-04-10 06:38:05 2020-04-10 06:38:05 ck91k9ygg01zti3umgfb5fpyj Darmowe ćwiczenia z TypeScripta - wyzwania z kodem! | Przeprogramowani.ts #6 https://www.youtube.com/watch?v=g0AuSo5f6pk Dzisiaj mamy dla was coś specjalnego - darmowe ćwiczenia z TypeScripta!\n\nCo prawda nasze dotychczasowe filmy były przez was odebrane bardzo pozytywnie, jednak dzisiaj skręcamy w stronę praktyki aby podnieść poprzeczkę i pozwolić wam spędzić trochę czasu z tym znakomitym językiem jakim jest TypeScript. Wierzymy, że najlepsza nauka to właśnie ubrudzenie sobie rąk daną technologią więc zachęcamy do pobrania repozytorium i do ukończenia wyzwań jakie przygotowaliśmy.\n\nĆwiczenia od Przeprogramowanych znajdziesz poniżej:\n\n🎁 https://github.com/psmyrdek/typescript-challenges/ 🎁\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-04-15 16:40:46 darmowe-cwiczenia-z-typescripta-wyzwania-z-kodem-or-przeprogramowanits-6 ckiyt1v9s001fi3umcgnxbgiu 2020-04-15 16:40:46 2020-04-15 16:40:46 +ckdsgzihs025vi3um8vw382nl Szersze spojrzenie na Backend - Szymon Przedwojski | Przeprogramowani ft. Gość #5 https://www.youtube.com/watch?v=c-Gi7OaykQo W piątym odcinku naszego cyklu rozmów z gośćmi rozmawiamy z Szymonem Przedwojskim.\n\nSzymon jest Backend Software Engineerem w Glovo. Z przeprogramowanymi łączy go zamiłowanie do dzielenia się wiedzą, któremu daje ujście na swoim kanale "Dziwne, u mnie działa", blogu https://umniedziala.com/ oraz występując publicznie na meetupach i konferencjach.\n\nTematem przewodnim będą realia pracy jako backend developer w dużej firmie tworzącej produkt online-to-offline, testowanie oprogramowania oraz szeroko rozumiany rozwój programisty poza kodem: dzielenie się wiedzą, oraz rozwijanie kompetencji miękkich. 2020-08-13 07:17:16 szersze-spojrzenie-na-backend-szymon-przedwojski-or-przeprogramowani-ft-gosc-5 ckiyt1v9s001fi3umcgnxbgiu 2020-08-13 07:17:16 2020-08-13 07:17:16 ck99yp03k0208i3um5uhegifs LiveQuiz: Sprawdź jak dobrze znasz JavaScript #3 https://www.youtube.com/watch?v=lBzO1C5XKdI ⚡️II edycja Opanuj JavaScript otwarta do 24.04.2020 (piątek) ⚡️\nhttps://przeprogramowani.pl/kurs\n\nW odpowiedzi na liczne prośby zamieszczamy nagranie z live'a, który odbył się w poniedziałek 20 kwietnia o 19:00 🎬. Podczas wydarzenia przedstawiliśmy widzom 12 interaktywnych pytań w formacie milionerów ❓. Chcieliśmy połączyć przyjemne z pożytecznym, więc każda z poprawnych odpowiedzi doczekała się szczegółowego omówienia 👨‍🏫. W wydarzeniu wzięło udział przeszło 150 osób 😲. Jeżeli byłeś z nami na pokładzie - dziękujemy 😊! \n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-04-21 13:46:32 livequiz-sprawdz-jak-dobrze-znasz-javascript-3 ckiyt1v9s001fi3umcgnxbgiu 2020-04-21 13:46:32 2020-04-21 13:46:32 ck9cbfclk020ei3umhwt9e7ri Opanuj JavaScript 2 - Q&A z Mentorami Kursu https://www.youtube.com/watch?v=UT0bDdWHpbs Odpowiadamy na Wasze pytania związane z kursem Opanuj JavaScript!\n\n🚀https://przeprogramowani.pl/kurs 🚀 2020-04-23 05:18:29 opanuj-javascript-2-qanda-z-mentorami-kursu ckiyt1v9s001fi3umcgnxbgiu 2020-04-23 05:18:29 2020-04-23 05:18:29 ck9f8p70g020mi3um6hkx6ljn Live Coding z Przeprogramowanymi | Opanuj JavaScript 2 https://www.youtube.com/watch?v=RoDOI1NSqPs Końcem tygodnia rozciągamy nasze programistyczne mięśnie zapraszając was na sesję Live Codingu z Przeprogramowanymi. 🕵🏻‍♂️💪👨‍💻\n\nZapoznamy się z przykładowymi ćwiczeniami i projektem z naszego kursu oraz jak to zwykle bywa - podyskutujemy o wszystkim co przyjdzie nam do głowy.\n\nOczywiście zapraszamy również do zadawania pytań - ta godzina jest dla Was!\n\n⚡️https://przeprogramowani.pl/kurs - tylko do 22:00! ⚡️ 2020-04-25 06:25:28 live-coding-z-przeprogramowanymi-or-opanuj-javascript-2 ckiyt1v9s001fi3umcgnxbgiu 2020-04-25 06:25:28 2020-04-25 06:25:28 @@ -1971,12 +1995,14 @@ ck9k4x0bs020xi3um4fthgzh2 React i TypeScript - jak zacząć? | Przeprogramowani. ck5mc8mag01vli3um3l1gh9sz Nest.js - Modules https://www.youtube.com/watch?v=jlyytOY5vTM Moduły to kolejny fundamentalny element aplikacji Nest.js. W tym filmie dowiesz się najważniejszych informacji na ich temat w kontekście rozwoju aplikacji Nest. \n\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2020-01-20 11:00:07 nestjs-modules ckieg15g0001bi3um0fj3gred 2020-01-20 11:00:07 2020-01-20 11:00:07 ck5vmli8001vui3umefc8cm6k Bang! Bang! U R boolean! | JSMaster https://www.youtube.com/watch?v=aJj4T1Psq1k Bang! Bang! Czyli podwójny operator NOT (!) to ciekawy sposób zamiany dowolnej wartości na true lub false. \n\nW tym odcinku dowiesz się czym są "falsy values" oraz jak działają operatory AND i OR w różnych sytuacjach. \n\nWięcej na temat falsy values:\nhttps://developer.mozilla.org/en-US/docs/Glossary/Falsy\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nhttps://facebook.com/overment\nhttps://overment.com/discord\nhttps://overment.com/instagram\n\nTworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. 2020-01-26 23:00:00 bang-bang-u-r-boolean-or-jsmaster ckieg15g0001bi3um0fj3gred 2020-01-26 23:00:00 2020-01-26 23:00:00 ck84u4i7401y8i3um5yvthk1b Reduce w Praktyce - JS Master by Overment https://www.youtube.com/watch?v=L5hBo9J_HlU Metoda reduce ma wiele zastosowań w JavaScripcie, chociaż często łączona jest ze sprowadzaniem wielu wartości do jednej.\n\nW tym filmie dowiesz się że Array.reduce() może Ci pomóc z:\n- jak znaleźć średnią wartość w tablicy\n- jak usunąć duplikaty z tablicy\n- jak "spłaszczyć" zagnieżdżone tablice i obiekty\n- jak zmodyfikować strukturę obiektu\n\nLink do repozytorium:\nhttps://github.com/iceener/array.reduce\n\nLink do zadania:\nhttps://github.com/iceener/array.reduce/blob/master/formData.js\n\nStrona MDN:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nFacebook: https://facebook.com/overment\nDiscord: https://overment.com/discord\nInstagram: https://overment.com/instagram\nTwitter: https://twitter.com/_overment\n\nTworząc filmy (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-03-23 19:00:04 reduce-w-praktyce-js-master-by-overment ckieg15g0001bi3um0fj3gred 2020-03-23 19:00:04 2020-03-23 19:00:04 +cjgb62lhs0112i3umavw47zbp I stało się! https://matrog.pl/i-stalo-sie/

Mam na imię Mateusz a Ty właśnie trafiłeś na mój blog. Dokładniej mówiąc czytasz teraz wpis wprowadzający. Nazwałem go tam dlatego, że w tym poście chciałbym się przedstawić, napisać coś o sobie i pokazać tematykę tego bloga. No to co? Zaczynajmy. Moje imię już znasz. Pochodzę z niewielkiej wioski usytuowanej…

\n
Czytaj dalejI stało się!
\n

Artykuł I stało się! pochodzi z serwisu MatRog.pl.

2018-04-22 18:49:22 i-stalo-sie cjjyg7b2w0011i3umc74cg6xw 2018-04-22 18:49:22 2018-04-22 18:49:22 ck8biexbk01yli3um1x58hvxm overment is back! Co dalej? https://www.youtube.com/watch?v=nioWPp3GRBk Good news! Pomimo kilkumiesięcznej przerwy w publikacji materiałów, wracam do regularnych premier w każdy poniedziałek o 20:00 😍\n\nW ciągu najbliższych miesięcy skupię się na Vanilla JavaScript / Nest.js i TypeScript. Nie wykluczam również filmów wykraczających poza ten zakres. \n\nRozpoczynam również współpracę z serwisem Eduweb.pl (https://overment.com/eduweb) na którym wkrótce znajdziesz więcej moich kursów.\n\nPrzedsprzedaż II edycji "Opanuj JavaScript": \nhttps://overment.com/opanuj-js\n\nReact w 10 dni:\nhttps://overment.com/react10\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\n👉 Sprawdź też:\nFacebook: https://facebook.com/overment\nDiscord: https://overment.com/discord\nInstagram: https://overment.com/instagram\nTwitter: https://twitter.com/_overment\n\nTworząc filmy (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-03-28 11:06:38 overment-is-back-co-dalej ckieg15g0001bi3um0fj3gred 2020-03-28 11:06:38 2020-03-28 11:06:38 ck8es2mns01ypi3um52090x06 #Nest.js - REST API (CRUD) czyli backend w Nest! by Overment https://www.youtube.com/watch?v=VwPAbezRY-E Jak stworzyć REST API w #Node.js wykorzystując framework #Nest.js? W tym filmie wyjaśniam jak połączyć ze sobą Moduły, jak stworzyć akcje controllera i ścieżki (routes) oraz w jaki sposób pracować z danymi z wykorzystaniem Providerów (konkretnie Serwisów)? \n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nLink do repozytorium projektu znajdziesz tutaj: \nhttps://github.com/iceener/nestjs-rest-api-crud\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-03-30 18:00:19 nestjs-rest-api-crud-czyli-backend-w-nest-by-overment ckieg15g0001bi3um0fj3gred 2020-03-30 18:00:19 2020-03-30 18:00:19 ck9st44co021ci3um7f6n4ffy Od zera do mobilnego hackera - SWIFT vs JAVASCRIPT #AppStore90Challenge https://www.youtube.com/watch?v=EXzMVH2Hvz4 Czy w 90 dni można nauczyć się nowego języka i opublikować pełnoprawną aplikację mobilną w App Store? Postanowiłem to sprawdzić... i nagrać!\n\nAplikacje mobilne to jedna z moich niezrealizowanych pasji, którą wreszcie postanowiłem odświeżyć. Dlaczego akurat w tym kierunku? Dlaczego teraz?\n\n🍎 Ekosystem Apple'a wchłonął mnie na dobre, więc wybór platformy był oczywisty,\n🚀 W międzyczasie Apple zaprezentował język Swift, więc programowanie na iOS stało się przyjemne,\n🤔 Szukałem sposobu na pobudzenie moich szarych komórek bardziej niż kolejnym Reactem i Angularem\n\nNo więc... Swift. Co w ty na to? Wyzwanie czas zacząć!\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-05-04 18:17:57 od-zera-do-mobilnego-hackera-swift-vs-javascript-appstore90challenge ckiyt1v9s001fi3umcgnxbgiu 2020-05-04 18:17:57 2020-05-04 18:17:57 ck9xsuy74021ji3um1f6ggeol PRZEPROGRAMOWANY LIVE #3 - Web Dev, Nowe wyzwania i Q&A - 07.03.2020 https://www.youtube.com/watch?v=h70GcytYEuw 🔥 Już w czwartek kolejne spotkanie na żywo 🔥\n\nFormuła się nie zmienia - zamiast konkretnego planu i punktów proponujemy luźną rozmowę o świecie programowania, front-endu i nie tylko (szczególnie po filmie który opublikujemy już na początku tygodnia). Tak jak w rzeczywistości - siadamy do rozmowy i sami nie wiemy gdzie nas wątki i tematy poniosą. \n\nWpadacie pogadać z nami? Wiadomo, że tak!\n\n💥 Zapraszamy! 💥 2020-05-08 06:09:40 przeprogramowany-live-3-web-dev-nowe-wyzwania-i-qanda-07032020 ckiyt1v9s001fi3umcgnxbgiu 2020-05-08 06:09:40 2020-05-08 06:09:40 ckahtuzmw022ai3umboijg6qv PRZEPROGRAMOWANY LIVE #4 - Zdrowe nawyki programisty, Q&A i newsy ze świata - 21.05.2020 https://www.youtube.com/watch?v=CYxrRhlf2MQ Zapraszamy na kolejne spotkanie na żywo z Przeprogramowanymi! W czwartek porozmawiamy o zdrowych nawykach zdrowych programistów, poruszymy temat wypalenia zawodowego, szukania inspiracji w branżach innych niż nasza oraz oczywiście odpowiemy na wasze pytania. Zapraszamy! 2020-05-22 06:33:05 przeprogramowany-live-4-zdrowe-nawyki-programisty-qanda-i-newsy-ze-swiata-21052020 ckiyt1v9s001fi3umcgnxbgiu 2020-05-22 06:33:05 2020-05-22 06:33:05 ckaqf1y54022ki3umados7ayo Przeprogramowani ft. Gość #1 - Arkadiusz Benedykt - Finlandia, TDD i 15 lat doświadczenia https://www.youtube.com/watch?v=GvpOC5XmnAA Jest nam niezmiernie miło zaprosić was na pierwszy odcinek naszej nowej serii Przeprogramowani ft. Gość, w której to wreszcie głos oddajemy mądrzejszym od nas rozmawiając na tematy związane z programowaniem i nie tylko.\n\nGościem pierwszego odcinka będzie Arkadiusz Benedykt - programista z ponad 15-letnim doświadczeniem, trener, prelegent, wykładowca i pasjonat TDD, od którego postaramy się ukraść tak dużo wiedzy jak tylko się da. Doświadczenie Arka pozwala nam przewidywać, że nie będziemy się nudzić, dlatego serdecznie wszystkich zapraszamy i jak zwykle zachęcamy do zadawania pytań w trakcie naszej rozmowy.\n\nProfil naszego gościa na LinkedIn: https://www.linkedin.com/in/arkadiuszbenedykt/\n\nDo zobaczenia! 2020-05-28 06:48:31 przeprogramowani-ft-gosc-1-arkadiusz-benedykt-finlandia-tdd-i-15-lat-doswiadczenia ckiyt1v9s001fi3umcgnxbgiu 2020-05-28 06:48:31 2020-05-28 06:48:31 +ckf3tei3s0273i3umb4ym1r36 (Don't) break the web - czas na zmiany standardów webowych? https://www.youtube.com/watch?v=484dga6Q5-k Czy ekosystem front-endu może sobie pozwolić na złamanie obowiązujących standardów, niejako kończąc niepisaną regułę "Don't break the web"? Zobaczcie co na ten temat ma do powiedzenia Michał Miszczyszyn.\n\nZobacz całą rozmowę tutaj - https://www.youtube.com/watch?v=PFwlvDLY7-4\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-09-15 10:30:01 dont-break-the-web-czas-na-zmiany-standardow-webowych ckiyt1v9s001fi3umcgnxbgiu 2020-09-15 10:30:01 2020-09-15 10:30:01 ckb1ugywg022wi3um16qpbmfx Przeprogramowani ft. Gość #2 - Tomasz Łakomy - Konferencje, egghead.io i marka osobista https://www.youtube.com/watch?v=Pn7Pn3-FwQo Jest nam niezmiernie miło zaprosić was na drugi odcinek naszej serii Przeprogramowani ft. Gość, w której to wreszcie oddajemy głos mądrzejszym od nas, rozmawiając na tematy związane z programowaniem i nie tylko.\n\nGościem drugiego odcinka będzie Tomasz Łakomy - senior front-end engineer w OLX Group. Tomek zgromadził prawie 13 tysięcy subskrybentów na Twitterze, jest prelegentem na międzynarodowych konferencjach i twórcą screencastów związanych z Reactem i AWS na egghead.io. Doświadczenie Tomka pozwala nam przewidywać, że nie będziemy się nudzić, dlatego serdecznie wszystkich zapraszamy i jak zwykle zachęcamy do zadawania pytań w trakcie naszej rozmowy.\n\nZnajdziecie Tomka tutaj:\nTwitter: https://twitter.com/tlakomy\nLinkedIn: https://pl.linkedin.com/in/tomasz-%C5%82akomy-12b2a258\n\nDo zobaczenia! 2020-06-05 06:45:34 przeprogramowani-ft-gosc-2-tomasz-lakomy-konferencje-eggheadio-i-marka-osobista ckiyt1v9s001fi3umcgnxbgiu 2020-06-05 06:45:34 2020-06-05 06:45:34 ckbcgkhz4023bi3umbzfx65az Trudne czasy https://www.youtube.com/watch?v=ZMhC0vU__1k Dbamy o kulturę dyskusji - wszelkie oznaki ataków na tle rasowym, wyznaniowym czy kulturowym będą z komentarzy pod tym filmem usuwane. 2020-06-12 17:01:52 trudne-czasy ckiyt1v9s001fi3umcgnxbgiu 2020-06-12 17:01:52 2020-06-12 17:01:52 ckbgoor1c023ci3umdvj9ggwz Przeprogramowani ft. Gość #3 - Alex Wilk - Programista w USA, Amazon, Emigracja https://www.youtube.com/watch?v=_vxsmp5py00 Trzeci odcinek naszego cyklu rozmów z gośćmi nadchodzi! W środę porozmawiamy z Alexem Wilkiem, programistą i liderem zespołu w Amazonie, który kilka lat temu zdecydował się na odważną zmianę w swojej karierze i wyemigrował do USA!\n\nJak wygląda życie programisty za oceanem? Jak pracuje się w tak ogromnej firmie, z której efektów pracy korzysta na codzień tak wielu z nas? Czego Alexa nauczyła emigracja, z jakimi wyzwaniami się mierzył i co powiedziałby samemu sobie gdyby decydował się na ten krok jeszcze raz?\n\nNie możecie tego przegapić! 2020-06-15 16:00:12 przeprogramowani-ft-gosc-3-alex-wilk-programista-w-usa-amazon-emigracja ckiyt1v9s001fi3umcgnxbgiu 2020-06-15 16:00:12 2020-06-15 16:00:12 @@ -1984,8 +2010,6 @@ ckbkfdfi8023ji3umaw7d3j0r Kreatywność w programowaniu - PRZEPROGRAMOWANY LIVE ckbvv4etk023wi3umgcqc8rp2 Wordpress-killer w 10 minut - Czy warto odkrywać koło na nowo? https://www.youtube.com/watch?v=4y_godfQ2co Jeśli twoje portfolio to statyczna strona html, a nagle przyjdzie ci do głowy pomysł dodania artykułów w stylu typowego CMSa, no to masz... problem. A przynajmniej wyzwanie. W dzisiejszym filmie pokażę ci, jak wyglądały moje dwie iteracje rozwiązania problemu zarządzania treścią na stronie, co powstało w kilka dobrych godzin oraz jakie wnioski z tego wyciągam - czy warto było wynaleźć koło na nowo?\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-06-26 06:56:53 wordpress-killer-w-10-minut-czy-warto-odkrywac-kolo-na-nowo ckiyt1v9s001fi3umcgnxbgiu 2020-06-26 06:56:53 2020-06-26 06:56:53 ck8os5cu801z8i3umh5rv11gd #Nestjs - Uwierzytelnienie i autoryzacja API z Passport.js & JSON Web Token (JWT) by overment https://www.youtube.com/watch?v=XXHfCEpHrd8 Jak zabezpieczyć API w #Nest.js wykorzystując Passport.js i JSON Web Token (JWT)? W tym filmie wyjaśniam jak przygotować rejestrację i logowanie użytkowników oraz jak skonfigurować local-strategy i jwt-strategy w celu kontroli dostępu do endpointów naszego API z pomocą AuthGuard.\n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nLink do repozytorium projektu znajdziesz tutaj: \nhttps://github.com/iceener/nestjs-rest-api-crud/tree/master/07_jwt\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, typescript, Node.js (Express.js / nest js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-04-06 18:00:08 nestjs-uwierzytelnienie-i-autoryzacja-api-z-passportjs-and-json-web-token-jwt-by-overment ckieg15g0001bi3um0fj3gred 2020-04-06 18:00:08 2020-04-06 18:00:08 ck8ys8j8001zoi3um07yuedgq Higher-order functions - Programowanie Funkcyjne w JavaScript by overment https://www.youtube.com/watch?v=uVK84yPnMMU Higher-order functions (HOF / funkcje wyższego rzędu) to funkcja przyjmująca jako argument inną funkcję (lub zwracająca funkcję). Największą zaletą HOF jest możliwość jej wielokrotnego wykorzystania oraz łączenia (kompozycji) ich z funkcjami pierwszego rzędu (first-order functions). Higher-order functions są nieodłącznym elementem programowania funkcyjnego oraz świetnie sprawdzają się w JavaScript, który posiada tzw. first-class functions.\n\nFilm jest częścią serii Programowanie Funkcyjne w JavaScript:\nhttps://www.youtube.com/playlist?list=PLjHmWifVUNMLR1Oz3WYK7XRLEY5LvSOPu\n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nLink do repozytorium projektu znajdziesz tutaj: \nhttps://github.com/iceener/functional-programming/tree/master/01_higher_order_functions\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-04-13 18:00:18 higher-order-functions-programowanie-funkcyjne-w-javascript-by-overment ckieg15g0001bi3um0fj3gred 2020-04-13 18:00:18 2020-04-13 18:00:18 -ck98sb6bc0207i3umdb3ch542 Pure Functions - Functional Programming in JS by overment https://www.youtube.com/watch?v=AGrSiyK4uGA Pure Functions (PF / czyste funkcje) to funkcje które dla argumentów o tej samej wartości zawsze zwracają ten sam wynik, nie powodując efektów ubocznych (Side Effects). O takich funkcjach mówi się też, że są idempotentne (eng. Idempotent), zapamiętywalne (eng. Memoizable) oraz charakteryzuje je tzw. Referentail Transparency - czyli fakt, że można ich ciało zastąpić oczekiwaną wartością.\n\nPure Functions stanowią podstawę programowania funkcyjnego (functional programming) w JS i nie tylko. Ich stosowanie zwiększa czytelność kodu, który łatwo można testować (przez np. unit testy) oraz debugować.\n\nFilm jest częścią serii Programowanie Funkcyjne w #JavaScript:\nhttps://www.youtube.com/playlist?list=PLjHmWifVUNMLR1Oz3WYK7XRLEY5LvSOPu\n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nLink do repozytorium projektu znajdziesz tutaj: \nhttps://github.com/iceener/functional-programming/tree/master/02_pure_functions\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-04-20 18:00:03 pure-functions-functional-programming-in-js-by-overment ckieg15g0001bi3um0fj3gred 2020-04-20 18:00:03 2020-04-20 18:00:03 -ck9dui5rs020li3umezuk0ozl Jak wygląda kurs Opanuj JavaScript 'od środka'? https://www.youtube.com/watch?v=u0n7oYapiWw Dołącz do 9-tygodniowego kursu JavaScript: \nhttp://overment.com/js 2020-04-24 07:00:19 jak-wyglada-kurs-opanuj-javascript-od-srodka ckieg15g0001bi3um0fj3gred 2020-04-24 07:00:19 2020-04-24 07:00:19 ck9isedgw020vi3umhtin26s5 Function Composition - Programowanie Funkcyjne by overment https://www.youtube.com/watch?v=jJaitZE1xpA Programowanie Funkcyjne (eng. functional programming) w JavaScript (i nie tylko) charakteryzuje tzw. kompozycja funkcji (eng. Function Composition). Jest to proces polegający na łączeniu dwóch (lub więcej) funkcji w celu utworzenia nowej funkcji. Dane pomiędzy nimi przekazywane są tak długo aż uzyskamy wynik końcowy.\n\nFilm jest częścią serii Programowanie Funkcyjne w JavaScript:\nhttps://www.youtube.com/playlist?list=PLjHmWifVUNMLR1Oz3WYK7XRLEY5LvSOPu\n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nLink do repozytorium projektu znajdziesz tutaj: \nhttps://github.com/iceener/functional-programming/tree/master/01_higher_order_functions\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-04-27 18:00:14 function-composition-programowanie-funkcyjne-by-overment ckieg15g0001bi3um0fj3gred 2020-04-27 18:00:14 2020-04-27 18:00:14 ck9ssh56w021bi3umef1a98ei Currying - Programowanie funkcyjne w JavaScript https://www.youtube.com/watch?v=NkbClRuZisc Programowanie funkcyjne (eng. functional programming) w #JavaScript charakteryzują elementy takie jak Pure Functions, Function Composition, Higher-order functions czy Currying. W tym odcinku skupiam się właśnie na tym ostatnim. \n\nCurring jest rodzajem innej techniki znanej jako Partial Application. Opiera się o ciąg tzw. "unary functions", czyli takich które przyjmują dokładnie jeden argument. Currying umożliwia zamianę funkcji przyjmującej wiele argumentów na serię funkcji jednoargumentowych.\n\nJego głównym przeznaczeniem jest kompozycja funkcji, specjalizacja funkcji oraz w przydatna w niektórych sytuacjach zmiana kształtu funkcji.\n\nW przeciwieństwie do Partial Application, Currying umożliwia pojedyncze przekazywanie argumentów do funkcji. \n\nFilm jest częścią serii Programowanie Funkcyjne w JavaScript:\nhttps://www.youtube.com/playlist?list=PLjHmWifVUNMLR1Oz3WYK7XRLEY5LvSOPu\n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nLink do repozytorium projektu znajdziesz tutaj: \nhttps://github.com/iceener/functional-programming/tree/master/01_higher_order_functions\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-05-04 18:00:05 currying-programowanie-funkcyjne-w-javascript ckieg15g0001bi3um0fj3gred 2020-05-04 18:00:05 2020-05-04 18:00:05 cka2sk4mo021qi3umc5hycnqc Shared State - Programowanie funkcyjne w JavaScript https://www.youtube.com/watch?v=CcZfpxyjWII Shared State czyli "Stan współdzielony" to dowolna zmienna, obiekt lub inna informacja w pamięci, która jest dostępna w różnych zakresach (eng. scope). \n\nIstnieje szereg problemów, które wiążą się z modyfikacją dzielonego stanu, m.in. są to wzrost złożoności programu, trudność w zrozumieniu oraz problemy wynikające z timingu wywołania funkcji.\n\nProgramowanie funkcyjne oferuje nam kilka rozwiązań, m.in. unikanie modyfikowania współdzielonego stanu poprzez kopiowanie oraz nie destrukcyjną edycję. Alternatywnie można zastosować technikę zamrożenia obiektu korzystając z narzędzi takich jak Immutable.js. \n\nWarto pamiętać o tym, że przy kopiowaniu oraz zamrażaniu obiektów, wyróżniamy shallow copying / shallow freezing oraz deep copying / deep freezing. Wbudowane metody Object.assign oraz Object.freeze umożliwiają wyłącznie "płytkie" operacje.\n\nLink do kodu źródłowego:\nhttps://github.com/iceener/functional-programming/tree/master/04_currying\n\nFilm jest częścią serii Programowanie Funkcyjne w JavaScript:\nhttps://www.youtube.com/playlist?list=PLjHmWifVUNMLR1Oz3WYK7XRLEY5LvSOPu\n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-05-11 18:00:06 shared-state-programowanie-funkcyjne-w-javascript ckieg15g0001bi3um0fj3gred 2020-05-11 18:00:06 2020-05-11 18:00:06 @@ -2001,20 +2025,20 @@ ckaqzrxuo022ni3um7nc4ch4e Wszystko o Typach - JavaScript & TypeScript | overment ckawx3qug022ri3umg0h43xjx #code16challenge Drag and Drop w RxJS - Reaktywny JavaScript https://www.youtube.com/watch?v=vGRxMNQ4XO8 Odpowiadając na nominację Michała Gellerta, napisałem 16 linii kodu robiąc coś, co może Was zainspirować do nauki reaktywnego JavaScriptu.\n\nW skrócie pokazuję jak zrobić mechanizm Drag and Drop wykorzystując RxJS - bibliotekę ułatwiającą pisanie reaktywnego JSa 😍\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter\n\n👉 Sprawdź też:\nFacebook: https://facebook.com/overment\nDiscord: https://overment.com/discord\nInstagram: https://overment.com/instagram\nTwitter: https://twitter.com/_overment\n\nTworząc filmy (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne.\n\n#code16challenge 2020-06-01 20:00:25 code16challenge-drag-and-drop-w-rxjs-reaktywny-javascript ckieg15g0001bi3um0fj3gred 2020-06-01 20:00:25 2020-06-01 20:00:25 ckb21b9ew022yi3um3fmnfsio Code vs. No-Code - Grzegorz Róg i Overment 🥊 https://www.youtube.com/watch?v=nwKUx6XbTDA Zapraszamy na wydarzenie, w którym staniemy z Adamem po dwóch stronach ringu i porozmawiamy o tym, co jest lepsze "Code czy No-code"? Pewnie już domyślasz się, kto będzie po której stronie, ale czyje argumenty okażą się bardziej przekonujące? Dowiedz się, gdzie umiejętności programistyczne nadal są bardzo ważne, a w których obszarach można przyspieszyć pracę narzędziami no-code. 2020-06-05 09:57:05 code-vs-no-code-grzegorz-rog-i-overment ckieg15g0001bi3um0fj3gred 2020-06-05 09:57:05 2020-06-05 09:57:05 ckb6svzao0234i3um2w4rfx58 Factory Functions - Programowanie funkcyjne w JavaScript https://www.youtube.com/watch?v=K2hSGD5uy_s Tworzenie obiektów jednoznacznie kojarzy się z klasami i programowaniem obiektowym. W JavaScripcie obiekty możemy tworzyć jeszcze poprzez object literal oraz tzw. factory functions, czyli specjalne funkcje które zwracają nowy obiekt. \n\nAby w pełni zrozumieć ten temat, zachęcam do obejrzenia mojej mini serii na temat zakresu (scope) oraz domknięcia (#closure): \nhttps://www.youtube.com/playlist?list=PLjHmWifVUNMKO1xl1LfOhE3d-4akRX9aJ\n\nZnajdziesz w nim:\n👉 Czym jest Factory Function?\n👉 Co ma do tego Closure (domknięcie)?\n👉 Dlaczego funkcje a nie klasy?\n👉 Wydajność factory functions\n👉 Problemy ze słowem kluczowym this.\n\nFilm jest częścią serii Programowanie Funkcyjne w JavaScript:\nhttps://www.youtube.com/playlist?list=PLjHmWifVUNMLR1Oz3WYK7XRLEY5LvSOPu\n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-06-08 18:00:06 factory-functions-programowanie-funkcyjne-w-javascript ckieg15g0001bi3um0fj3gred 2020-06-08 18:00:06 2020-06-08 18:00:06 +ciyeqdzdc006ri3um5y1z0u68 Hexo - nowy rok, nowy blog! https://kernelgonnapanic.pl/2017/01/26/HexoNowyRokNowyBlog/

Dawno się nie słyszeliśmy, prawda? W międzyczasie przez bloga przeszła burza, a jej rezultatem jest to, co właśnie widzicie. I nie jest to tylko nowy szablon. Przez ostatnie kilka miesięcy budowałam tego bloga od zera na nowej platformie. Dlatego też, na dobry nowy początek, nie może zabraknąć wpisu na temat narzędzi, które na to pozwalają.

2017-01-26 18:46:42 hexo-nowy-rok-nowy-blog ckesj8kg0000vi3um42jmc86u 2017-01-26 18:46:42 2017-01-26 18:46:42 ckbgsytc0023ei3um6u364ae9 Wykrywanie emocji Tensorflow.js i Faceapi.js | by overment https://www.youtube.com/watch?v=4GSKE8d_CLI Wykrywanie twarzy oraz emocji z wykorzystaniem JavaScript stało się możliwe dzięki Tensorflow.js. Tym razem zbudujemy prosty mechanizm wykrywania twarzy na wideo oraz oznaczania emocji, z wykorzystaniem Faceapi.js\n\nW tym filmie dowiesz się jak:\n👉 Przechwycić wideo z kamery i wyświetlić w przeglądarce\n👉 Wykorzystać Tensorflow.js oraz Faceapi.js\n👉 Rysować elementy z HTML Canvas\n👉 Wykorzystywać obietnice (Promise)\n👉 oraz składnię async / await\n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_...\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-06-15 18:00:00 wykrywanie-emocji-tensorflowjs-i-faceapijs-or-by-overment ckieg15g0001bi3um0fj3gred 2020-06-15 18:00:00 2020-06-15 18:00:00 ckck5g7og024pi3um1rrx17qw Jak odnieść sukces będąc programistą - lekcje z Doliny Krzemowej | Michał Nowak https://www.youtube.com/watch?v=r8XYfXFeoNo Film, który właśnie oglądasz, to fragment czwartego odcinka serii "Przeprogramowani ft. Gość" w którym o roli managera rozmawialiśmy z Michałem Nowakiem, dyrektorem engineeringu w SmartRecruiters. \n\nPosłuchaj całej rozmowy - https://youtu.be/E8ioNiuACQQ\n\nKsiążki i blogi polecane przez Michała:\nhttps://www.amazon.com/Range-Generalists-Triumph-Specialized-World/dp/0735214484\nhttps://www.amazon.com/Crucial-Conversations-Talking-Stakes-Second/dp/1469266822\nhttps://www.amazon.com/Elegant-Puzzle-Systems-Engineering-Management/dp/1732265186\nhttps://www.amazon.com/Confidence-Gap-Guide-Overcoming-Self-Doubt/dp/1590309235\nhttps://svpg.com/articles/\n\nPoznaj naszego gościa - https://www.linkedin.com/in/michal-nowak-72632328/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-07-13 06:52:28 jak-odniesc-sukces-bedac-programista-lekcje-z-doliny-krzemowej-or-michal-nowak ckiyt1v9s001fi3umcgnxbgiu 2020-07-13 06:52:28 2020-07-13 06:52:28 ckconl8e8024yi3um35hd5pr1 TabNine czyli Sztuczna Inteligencja w Twoim Edytorze https://www.youtube.com/watch?v=9OpY19RQEbY TabNine to rozszerzenie do edytorów wykorzystujące algorytmy deep learning do autouzupełniania pisanego przez nas kodu. Zobacz sam, że wbudowane wtyczki IntelliSense znane z Visual Studio Code czy Webstorm, wypadają blado w porównaniu z tym rozwiązaniem opartym o sztuczną inteligencję. Co ważne, TabNine mimo swojego niesamowitego potencjału, jest darmowe i łatwe w konfiguracji.\n\nAI Code Completions for All Languages and IDEs | TabNine: https://www.tabnine.com/\nNewslettter Learn VS Code: https://learn-vscode.com/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-07-16 10:31:20 tabnine-czyli-sztuczna-inteligencja-w-twoim-edytorze ckiyt1v9s001fi3umcgnxbgiu 2020-07-16 10:31:20 2020-07-16 10:31:20 ckczt9d7k0258i3umghq95gth SwiftUI - Tworzymy pierwszy widok aplikacji na iOS | AppStore90Challenge https://www.youtube.com/watch?v=sjj38e0oKfk W dzisiejszym odcinku przedstawiam ci SwiftUI - framework, który jest jednym z głównych powodów moich eksperymentów w ekosystemie Apple. Zobacz jak tworzyć deklaratywne widoki, jak szybko dostosować poszczególne elementy do swoich preferencji oraz jak komfortowo poczujesz się w tym świecie będąc front-end developerem.\n\nA tymczasem aplikacja docelowa... rozpoczyna wyścig z czasem do App Store. O wszystkim opowiemy niebawem na naszym kanale!\n\nPS. VStack / HStack / ZStack ♥️\n\nLayout w SwiftUI - https://www.swiftbysundell.com/articles/swiftui-layout-system-guide-part-1/\nDla developerów - https://developer.apple.com/\nIkony - https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-07-24 05:55:32 swiftui-tworzymy-pierwszy-widok-aplikacji-na-ios-or-appstore90challenge ckiyt1v9s001fi3umcgnxbgiu 2020-07-24 05:55:32 2020-07-24 05:55:32 ckd8ztfzk025ai3umc9xc7sly Typy generyczne w TypeScript | Przeprogramowani.ts #8 https://www.youtube.com/watch?v=9Xtb1wIf5Xs Typy generyczne to świetny sposób na połączenie elastyczności kodu z zaletami statycznego typowania, do którego przyzwyczaja nas TypeScript. Kiedy stosować generyki? Jak rozumieć specyficzną składnię tego rozwiązania? Zobacz sam 👆\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-07-30 16:09:02 typy-generyczne-w-typescript-or-przeprogramowanits-8 ckiyt1v9s001fi3umcgnxbgiu 2020-07-30 16:09:02 2020-07-30 16:09:02 ckdj1viu8025ni3um177ufw4e Premiera aplikacji Przeprogramowani 🎉 | AppStore90Challenge https://www.youtube.com/watch?v=QYi5URJdSH4 W dzisiejszym odcinku Przemek prezentuje aplikację Przeprogramowani, która jest już dostępna w App Store. Z filmu dowiesz się, co zainspirowało nas do stworzenia aplikacji, poznasz jej kluczowe funkcje i nasze plany odnośnie wersji na Androida.\n\nPrzeprogramowani w App Store: https://apps.apple.com/app/id1524938671\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-08-06 17:04:20 premiera-aplikacji-przeprogramowani-or-appstore90challenge ckiyt1v9s001fi3umcgnxbgiu 2020-08-06 17:04:20 2020-08-06 17:04:20 -ckdsgzihs025vi3um8vw382nl Szersze spojrzenie na Backend - Szymon Przedwojski | Przeprogramowani ft. Gość #5 https://www.youtube.com/watch?v=c-Gi7OaykQo W piątym odcinku naszego cyklu rozmów z gośćmi rozmawiamy z Szymonem Przedwojskim.\n\nSzymon jest Backend Software Engineerem w Glovo. Z przeprogramowanymi łączy go zamiłowanie do dzielenia się wiedzą, któremu daje ujście na swoim kanale "Dziwne, u mnie działa", blogu https://umniedziala.com/ oraz występując publicznie na meetupach i konferencjach.\n\nTematem przewodnim będą realia pracy jako backend developer w dużej firmie tworzącej produkt online-to-offline, testowanie oprogramowania oraz szeroko rozumiany rozwój programisty poza kodem: dzielenie się wiedzą, oraz rozwijanie kompetencji miękkich. 2020-08-13 07:17:16 szersze-spojrzenie-na-backend-szymon-przedwojski-or-przeprogramowani-ft-gosc-5 ckiyt1v9s001fi3umcgnxbgiu 2020-08-13 07:17:16 2020-08-13 07:17:16 ckfh70vfk027ii3umgz6o77vd Jak poradzić sobie z brakiem czasu na naukę programowania? https://www.youtube.com/watch?v=iDNNwSMCpa4 Marcin zmienia pracę i przyszło mu w trybie ekspresowym opanować Angulara, TypeScripta i RxJS. Jak wydziela czas na naukę programowania pośród innych aktywności w ciągu dnia?\n\nPolecane słuchawki:\nhttps://allegro.pl/listing?string=xiaomi%20airdots\n\nPolecane podcasty:\nhttps://fullstackradio.com/144\nhttps://frontendfirst.fm/episodes/does-code-splitting-negate-the-benefits-of-building-an-spa\nhttps://syntax.fm/show/262/our-react-wish-list\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️ Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥 Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-09-24 19:12:20 jak-poradzic-sobie-z-brakiem-czasu-na-nauke-programowania ckiyt1v9s001fi3umcgnxbgiu 2020-09-24 19:12:20 2020-09-24 19:12:20 cke1gsn4o0264i3umhtdd99xz Czy to KONIEC ANGULARA? - Plany wydawnicze | Zmiany w zespole | Publiczna roadmapa https://www.youtube.com/watch?v=qtrZzr1weag W ostatnim czasie o Angularze znowu zrobiło się głośno. Niestety, tym razem powodem nie były nowe funkcjonalności, premiera nowej wersji albo radykalnie inna odsłona tego frameworka, a kryzysy które od dłuższego czasu trawiły Core Team tego właśnie narzędzia. W dzisiejszym filmie przybliżamy ci obecną sytuację w tym właśnie ekosystemie oraz zastanawiamy się, czy jest jeszcze nadzieja... \n\nO pracy w Core Teamie Angulara - https://medium.com/@jeffbcross/jeffs-letter-to-the-angular-team-and-community-5367934a16c9\n\nPubliczna Roadmapa - https://angular.io/guide/roadmap\n\nOstatnie zmiany w zespole - https://twitter.com/ThomasBurleson/status/1283902169226280960\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-08-19 14:21:51 czy-to-koniec-angulara-plany-wydawnicze-or-zmiany-w-zespole-or-publiczna-roadmapa ckiyt1v9s001fi3umcgnxbgiu 2020-08-19 14:21:51 2020-08-19 14:21:51 ckeb7j1a8026bi3umhlar1j0w Jak dbać o zdrowie jako programista - dobre praktyki | Szymon Przedwojski https://www.youtube.com/watch?v=X8gLMSzGaJk Film, który właśnie oglądasz, to fragment piątego odcinka serii "Przeprogramowani ft. Gość", w którym o szerszym spojrzeniu na backend rozmawialiśmy z Szymonem Przedwojskim.\n\nSzymon jest Backend Software Engineerem w firmie Glovo. Oprócz głębokiej znajomości dobrych praktyk w zakresie pracy z kodem, Szymon wykazał się szeroką wiedzą o tym jak programista powinien dbać o zdrowie.\n\nPosłuchaj całej rozmowy - https://www.youtube.com/watch?v=c-Gi7...\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-08-26 10:00:08 jak-dbac-o-zdrowie-jako-programista-dobre-praktyki-or-szymon-przedwojski ckiyt1v9s001fi3umcgnxbgiu 2020-08-26 10:00:08 2020-08-26 10:00:08 ckefy45j4026gi3um8uch4gwc ZACZIPOWANE ŚWINIE | Na gorąco po prezentacji Elona Muska o projekcie Neuralink https://www.youtube.com/watch?v=kV2X3IeIV5Q Przed wami samochodowy vlog o najnowszym dziecku Elona Muska, czyli firmie Neuralink oraz urządzeniu "The Link". Opowiadam o interfejsie człowiek-maszyna i dzielę się spostrzeżeniami o być może najważniejszym kawałku technologii z jakim przyjdzie się mierzyć ludzkości w kolejnych kilku dekadach.\n\nKoniecznie dajcie znać w komentarzach czy dajecie temu projektowi szanse powodzenia oraz czy na jego myśl pojawia się w waszej głowie ekscytacja, czy raczej obawy...\n\nStrona projektu - http://neuralink.com/\nPrezentacja - https://www.youtube.com/watch?v=DVvmgjBL74w\n\n(wybaczcie jakość dźwięku)\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-08-29 17:35:28 zaczipowane-swinie-or-na-goraco-po-prezentacji-elona-muska-o-projekcie-neuralink ckiyt1v9s001fi3umcgnxbgiu 2020-08-29 17:35:28 2020-08-29 17:35:28 ckelo1pnc026ni3um7cdu262p Front-End 2025, czyli o tym co nadchodzi - Michał Miszczyszyn | Przeprogramowani ft. Gość #6 https://www.youtube.com/watch?v=PFwlvDLY7-4 Front-End w 2025r. - czy zastanawialiście się kiedyś jak ta właśnie część programistycznego świata będzie wyglądać po kolejnych latach rewolucji?\n\nDzisiaj standardem wciąż jeszcze jest JavaScript, ale czy TypeScript ustabilizuje swoją pozycję i stanie się językiem domyślnym? Wczorajszym jQuery stał się React, co natomiast stanie się z tym rozwiązaniem za pięć lat? Dzisiaj pozycja Front-End developera to stabilne warunki zatrudnienia i dobra pensja, ale jak może na to wpłynąć to co dzieje się za oknem akurat dzisiaj?\n\nA może... może nie ma co debatować, bo i tak w tym czasie UI będziemy już opisywać słowami a kod będzie za nas pisać sztuczna inteligencja?\n\nNa taki nietypowy, bo nieco futurologiczny odcinek naszej serii "Przeprogramowani ft. Gość" zapraszamy już w kolejną środę. Gościem będzie Michał Miszczyszyn - autor bloga https://typeofweb.com/, znany uczestnik polskiego community web developmentu oraz autor nadchodzącej książki o języku TypeScript, którą możecie nabyć w przedsprzedaży już teraz:\n\n👉 https://typescriptnapowaznie.pl/ 👈\n \nNie możecie tego przegapić! 2020-09-02 17:40:15 front-end-2025-czyli-o-tym-co-nadchodzi-michal-miszczyszyn-or-przeprogramowani-ft-gosc-6 ckiyt1v9s001fi3umcgnxbgiu 2020-09-02 17:40:15 2020-09-02 17:40:15 ckeyjl1h4026zi3umamdx94o8 WIEDZA BEZUŻYTECZNA? | O deskorolce, prokrastynacji i wykorzystaniu teorii w praktyce https://www.youtube.com/watch?v=BChTgHXudSs Każdy z nas, pracowników umysłowych, lubi się otaczać książkami, podcastami, wywiadami, prezentacjami i artykułami. Wszystko to czyni z nas... no właśnie - mądrzejszych? Dzisiaj o zdobywaniu wiedzy na podstawie suchej teorii - na przedweekendowe rozkminy zaprasza Przemek, którzy przy okazji próbuje przeżyć na deskorolce.\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-09-11 17:56:19 wiedza-bezuzyteczna-or-o-deskorolce-prokrastynacji-i-wykorzystaniu-teorii-w-praktyce ckiyt1v9s001fi3umcgnxbgiu 2020-09-11 17:56:19 2020-09-11 17:56:19 -ckf3tei3s0273i3umb4ym1r36 (Don't) break the web - czas na zmiany standardów webowych? https://www.youtube.com/watch?v=484dga6Q5-k Czy ekosystem front-endu może sobie pozwolić na złamanie obowiązujących standardów, niejako kończąc niepisaną regułę "Don't break the web"? Zobaczcie co na ten temat ma do powiedzenia Michał Miszczyszyn.\n\nZobacz całą rozmowę tutaj - https://www.youtube.com/watch?v=PFwlvDLY7-4\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-09-15 10:30:01 dont-break-the-web-czas-na-zmiany-standardow-webowych ckiyt1v9s001fi3umcgnxbgiu 2020-09-15 10:30:01 2020-09-15 10:30:01 +ciz2kf0000072i3um31fn9bbe Frontend - a co powiecie na mikroserwisy? https://kernelgonnapanic.pl/2017/02/12/Frontend-mikroserwisy/

A dziś kilka słów o temacie, który chodzi za mną już od dłuższego czasu, a dokładnie od momentu, gdy przeczytałam “Budowanie mikrousług” Newmana. Naszą dzisiejszą podróż z mikroserwisami w frontendzie zaczniemy od …
2017-02-12 11:06:00 frontend-a-co-powiecie-na-mikroserwisy ckesj8kg0000vi3um42jmc86u 2017-02-12 11:06:00 2017-02-12 11:06:00 ckbqt1v34023qi3umg8sugzx0 Zaawansowane integracje formularzy z Zapier | by overment https://www.youtube.com/watch?v=Fq-Nmuhj56A Jak połączyć formularz z systemem mailowym? (np. Mailchimp, GetResponse. ActiveCampaign czy ConvertKit?) Jak zapisać te dane w systemie CRM? I jak wysłać potwierdzenie do użytkownika oraz wszystkich osób zainteresowanych? \n\nW praktyce tak zaawansowana konfiguracja wymaga połączenia kilku systemów i przynajmniej kilku godzin pracy. Wykorzystując Webhooki w Zapier - wszystko zamykamy w kilka minut.\n\n👉 Jak stworzyć formularz w Tailwind CSS?\n👉 Co jest ważne przy tworzeniu formularzy?\n👉 Jak wykorzystać webhooki? \n👉 Jak przekazać dane do Zapier? \n👉 Jak zapisać je w systemie mailowym / CRM / Airtable?\n\nChcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: \n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-06-22 18:00:04 zaawansowane-integracje-formularzy-z-zapier-or-by-overment ckieg15g0001bi3um0fj3gred 2020-06-22 18:00:04 2020-06-22 18:00:04 ckcat7zd4024ii3um1btfdrzt Czym są funktory? - Programowanie funkcyjne w JavaScript https://www.youtube.com/watch?v=xxN-2iDVSRg Funktory to "kontenery" na dane, które udostępniają interfejs umożliwiający wykonanie funkcji dla każdej wartości znajdującej się wewnątrz niego. Inaczej mówiąc, jest to struktura, dająca nam możliwość mapowania danych wewnątrz niej. \n\nProgramowanie Funkcyjne wykorzystuje funktory głównie w celu modyfikowania danych bez wpływania na ich oryginalną strukturę. Przykładem wbudowanego w JavaScript funktora są tablice. Chcesz zawsze pozostać na bieżąco z programowaniem? \n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-07-06 18:00:13 czym-sa-funktory-programowanie-funkcyjne-w-javascript ckieg15g0001bi3um0fj3gred 2020-07-06 18:00:13 2020-07-06 18:00:13 ckckynkg0024ri3um3d3k03ih Czym są monady? - Programowanie funkcyjne w JavaScript https://www.youtube.com/watch?v=N5HsN40YzfE Monady to rodzaj funktora, który oferuje dodatkowe możliwości modyfikacji danych. W szczególności wyróżnia go zastosowanie metody flatMap (aka bind/chain). \n\nProgramowanie Funkcyjne polega głównie na kompozycji funkcji a monady są mechanizmem, który pomaga nam w tym procesie. \n\nPrzykładem monady jest Obiekt Promise. Obietnice dają nam dostęp do metody then(), którą można porównać do metody flatMap(). Chcesz zawsze pozostać na bieżąco z programowaniem? \n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2020-07-13 20:30:00 czym-sa-monady-programowanie-funkcyjne-w-javascript ckieg15g0001bi3um0fj3gred 2020-07-13 20:30:00 2020-07-13 20:30:00 @@ -2054,18 +2078,21 @@ ckhx7rbzk02ali3um1ddqe5gx JavaScript LiveQuiz #3 - Sprawdź swoją wiedzę o naj ckhzytfm802aqi3um6bnqepa9 Jak zostać programistą - droga na front-end - Wojciech Dobija | Przeprogramowani ft. Gość #10 https://www.youtube.com/watch?v=cwV-wiTUG3k 👉 Subskrybuj aby nie przegapić nowych filmów 👈\n\nWojciech Dobija, kolejny gość naszej serii "Przeprogramowani ft. Gość", to były fotograf, student dziennikarstwa, designer, absolwent kursu Opanuj JavaScript i od niedawna... front-end software engineer! Jego historia podążania za celem zostania programistą jest na tyle ciekawa i pełna wartościowych lekcji, że postanowiliśmy zaprosić go do rozmowy aby podzielił się swoimi przemyśleniami na temat ambitnych decyzji zawodowych i nie tylko.\n\nMamy nadzieję, że rozmowa z Wojtkiem pomoże tym wszystkim, którzy zastanawiają się jak takie zmiany w karierze realizować. Już w trakcie dwóch poprzednich edycji kursu Opanuj JavaScript zauważyliśmy, jak wielu z naszych absolwentów wchodzi do świata IT po raz pierwszy, godząc codzienne obowiązki pracy w zupełnie innych branżach, obowiązki rodzinne oraz po prostu czas wolny, z próbą realizacji celu o zostaniu programistą. Kolejna rozmowa na naszym kanale zapowiada się więc na prawdziwe "case study" o które pytało tak wielu widzów!\n\nZapraszamy już w czwartek o 19:30! 2020-11-27 07:49:38 jak-zostac-programista-droga-na-front-end-wojciech-dobija-or-przeprogramowani-ft-gosc-10 ckiyt1v9s001fi3umcgnxbgiu 2020-11-27 07:49:38 2020-11-27 07:49:38 cki5vdxl402axi3umh3cs7dhb Angular VS React - Jak działa Hot Module Replacement w Angularze 11 i czy ma szansę z Reactem? https://www.youtube.com/watch?v=tkrYw7p9WS0 ✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\nAngular 11 wprowadza usprawnienia związane z Hot Module Replacement. Czy obiecywana poprawa Developer Experience jest faktycznie tak istotna i wpływa na pracę front-end developera? W najnowszym filmie sprawdzamy to w praktyce, a dodatkowo porównujemy HMR Angulara z tym, do czego od dawna przyzwyczajeni są programiści Reacta.\n\nJak myślicie, kto wygrał?\n\nPremiera Angulara 11 na blogu - https://blog.angular.io/version-11-of-angular-now-available-74721b7952f7\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-12-01 11:00:13 angular-vs-react-jak-dziala-hot-module-replacement-w-angularze-11-i-czy-ma-szanse-z-reactem ckiyt1v9s001fi3umcgnxbgiu 2020-12-01 11:00:13 2020-12-01 11:00:13 ckia5picw02b2i3umbc846pqz ZŁE PYTANIA na rozmowę z rekruterem (jako programista) https://www.youtube.com/watch?v=PmN5aaA3Irs ✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\nOstatnio na Przeprogramowanych mówiliśmy sporo o rynku pracy i rekrutacji. Było poważnie, z sensem, czasami nawet mądrze. Dzisiejszy odcinek również dotyczy rekrutacji, ale treści w nim zawarte stosujecie na własne ryzyko ⚡️\n\nDzisiaj przyglądamy się pytaniom, jakie znaleźliśmy w sekcji "porady" na jednym z polskich for dla programistów. Wybraliśmy pięć szczególnie, hm.... ciekawych pytań, których zdecydowanie NIE polecamy zadawać rekruterowi. No, chyba że chcecie sprawdzić i podzielić się wrażeniami w komentarzu.\n\nNapiszcie jakie pytanie wg Was absolutnie nie może paść na rozmowie z rekruterem. Nasze typy są mocne, ale może znajdziecie coś lepszego?\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-12-04 11:00:14 zle-pytania-na-rozmowe-z-rekruterem-jako-programista ckiyt1v9s001fi3umcgnxbgiu 2020-12-04 11:00:14 2020-12-04 11:00:14 +ckrsbq17m00020wmnkyfxaj1i Kręciołek! https://blog.comandeer.pl/kreciolek.html Jeśli w wolnym czasie człowiek bawi się w tworzenie narzędzi uruchamianych w terminalu, to prędzej czy później stanie przed poważnym wyzwaniem – implementacją kręciołka, znanego też pod swoją angielską nazwą, spinnera. Przyszło zatem i mnie zmierzyć się z tym tematem. 2021-07-31 21:50:00 kreciolek! cki52vf40000ci3um2x784hhn 2021-07-31 22:05:48.322 2021-07-31 22:05:48.322 cjnolhtfc019hi3umg2zu7b7y Chodź na meetup! | Relacja z Meet.js Summit 2018 #meetjs18 | ⌨️ hello roman #26 https://www.youtube.com/watch?v=MKIy3KnCLsg Dziękuję za świetny Meet.js Summit! Do zobaczenia w następnym roku! \n\nBlog Asi – Wake Up And Code\nhttp://www.wakeupandcode.pl\nhttps://www.youtube.com/channel/UCdlupheGJhQMRfduuqTwkKA\n\nBlog Ani – Kernel Gonna Panic \nhttps://kernelgonnapanic.pl/\nhttps://www.instagram.com/kernelgonnapanic/\n\nMeetupy to doskonała okazja, żeby poznać nowe technologie – ale moim zdaniem jest w nich coś jeszcze ciekawszego. Ludzie! To dzięki nowym kontaktom i dłuższym rozmowom możemy dowiedzieć się najciekawszych rzeczy. Możemy też czerpać z doświadczenia innych pełnymi garściami, a przede wszystkim – po prostu poznać nowych świetnych znajomych. \n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman\nhttp://discord.io/helloroman 2018-10-25 13:00:03 chodz-na-meetup-or-relacja-z-meetjs-summit-2018-meetjs18-or-keyboard-hello-roman-26 ckiswuz9s0017i3um5mg4h7q1 2018-10-25 13:00:03 2018-10-25 13:00:03 cjnu2p1yg019li3um5yif0wcl Czym jest Server Side Rendering (SSR) 🔥 πroman #14 🔥 hello roman https://www.youtube.com/watch?v=kIz-iuq5Vbk SPROSTOWANIE: Obecnie roboty Google nieco zmądrzały i potrafią indeksować aplikacje oparte o współczesne frameworki bez większych problemów. Korzyścią płynącą z wykorzystania SSR jest np. możliwość używania tagów Open Graph. Przepraszam za lekkie wprowadzenie w błąd :) Wypłynęło to w jednym z komentarzy, dlatego chciałem podziękować wszystkim, którzy komentują moje filmy \n❤️ Następnym razem obiecuję, że zrobię lepszy research 🤞\n\nServer Side Rendering to termin, który coraz częściej pojawia się w dyskusjach dotyczących frontendowych. Projekty oparte o współczesne frameworki mają swoje wady i zalety, które niwelować zdaje się właśnie SSR. W tym odcinku staram się wyjaśnić, czym to właściwie jest! \n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman\nhttp://discord.io/helloroman 2018-10-29 09:00:25 czym-jest-server-side-rendering-ssr-proman-14-hello-roman ckiswuz9s0017i3um5mg4h7q1 2018-10-29 09:00:25 2018-10-29 09:00:25 cjnynpzew019ri3um24nv88pr Jak się nie bać nowych wyzwań 🎃 hello roman #27 https://www.youtube.com/watch?v=RW9lvhvVqw4 Wiem, że impostor syndrome to problem, który dotyka bardzo wielu programistów. To przez niego każde kolejne wyzwanie na początku wydaje się czymś nie do przeskoczenia. To przez niego mamy wrażenie, że inni poradziliby sobie lepiej z powierzonymi nam zadaniami. To wszystko bzdury! Ja już się tego nauczyłem, a dziś postaram się pomóc Wam :) \n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman\nhttp://discord.io/helloroman 2018-11-01 14:00:05 jak-sie-nie-bac-nowych-wyzwan-hello-roman-27 ckiswuz9s0017i3um5mg4h7q1 2018-11-01 14:00:05 2018-11-01 14:00:05 cjo42rivk019yi3umgfdiar2g Static site generators (Gatsby, VuePress, Gridsome) 🔥 πroman #15 🔥 hello roman https://www.youtube.com/watch?v=KChZSUcDWVQ Generatory stron statycznych (static site generators) to w ostatnim czasie niesamowicie modny temat w świecie frontendu. Konta popularnych developerów aż huczą od haseł typu Gatsby, Gridsome, VuePress. Z czego wynika ich popularność? Co dają nam, ponad to co sami możemy napisać w html, css i js? \n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman 2018-11-05 09:00:02 static-site-generators-gatsby-vuepress-gridsome-proman-15-hello-roman ckiswuz9s0017i3um5mg4h7q1 2018-11-05 09:00:02 2018-11-05 09:00:02 cjo8nsyuo01a2i3um1u4b6kdp Szkolenia dla programistów (czyli roman w Contentful) ⌨️ hello roman #28 https://www.youtube.com/watch?v=iaiqxBEuOXk Kolejny odcinek w plenerze i kolejna świetna przygoda! Zapraszam na odcinek, w którym opowiadam o co chodzi z Contentfulem i jakie alternatywne sposoby zarządzania treścią oferują nam współczesne technologie. \n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman\nhttp://discord.io/helloroman 2018-11-08 14:00:06 szkolenia-dla-programistow-czyli-roman-w-contentful-keyboard-hello-roman-28 ckiswuz9s0017i3um5mg4h7q1 2018-11-08 14:00:06 2018-11-08 14:00:06 cjoe2uibc01a8i3umged33a66 Czym jest CMS 🔥 πroman #16 🔥 hello roman https://www.youtube.com/watch?v=O1Gc_EhXFFU Wordpress, Drupal, Joomla były kiedyś – teraz przechodzimy rewolucję i pojawiły się kolejne narzędzia takie jak Contentful, Strapi i wiele, wiele innych. CMS-y, bo o nich mowa to jedna z podstaw współczesnego web developmentu. Ostatnio ktoś uciął im głowę – ale o co w tym chodzi? Opowiadam w dzisiejszym odcinku :) \n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman\nhttp://discord.io/helloroman 2018-11-12 09:00:03 czym-jest-cms-proman-16-hello-roman ckiswuz9s0017i3um5mg4h7q1 2018-11-12 09:00:03 2018-11-12 09:00:03 +cjlop80yo017ii3umbibec82c Context API w React! https://www.nafrontendzie.pl/context-api-react Wraz z pojawieniem się wersji v16.3.0 Reacta, do naszych rąk trafiła całkiem nowa i myślę, że całkiem przydatna funkcjonalność. Mowa tutaj o tytułowym Context API, które pozwala na wprowadzenie do aplikacji pewnych globalnych ustawień, od których zależeć mogą niektóre komponenty. Dzięki temu implementacja w aplikacji, na przykład, wielu wersji kolorystycznych staje się dziecinnie prosta. Zresztą sam się za chwilę o tym przekonasz! 2018-09-05 05:25:00 context-api-w-react ck7m8brk0000ui3um0pxg4lae 2018-09-05 05:25:00 2018-09-05 05:25:00 ckihnrwj402bci3um749c4j99 CYBERPUNK 2077 ma bugi? Szok! (żaden programista, nigdy) https://www.youtube.com/watch?v=R5ch248q8tI Cyberpunk 2077 i jego pierwsze recenzje wypadają naprawdę znakomicie, jednak powtarzającym się motywem u każdego recenzenta są mniejsze i większe niedociągnięcia w grze.\n\nO ile dla zwykłego konsumenta taka jakość produktu może wydawać się zaskakująca, to dla programisty czytanie i słuchanie o bugach podczas premiery to niemal codzienność.\n\nDzisiaj mamy dla was pięć historii zaskakujących bugów, które powodowały zamieszanie nie tylko w świecie rozrywki, ale też finansów, podróży czy... lotów w kosmos.\n\nDbajcie o jakość - zapraszamy do obejrzenia!\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8\n\nŹródła:\n\nhttps://dougseven.com/2014/04/17/knightmare-a-devops-cautionary-tale/\nhttps://www.zdnet.com/article/it-failure-at-heathrow-t5-what-really-happened/\nhttps://www.simscale.com/blog/2017/12/nasa-mars-climate-orbiter-metric/\nhttps://stackstatus.net/post/147710624694/outage-postmortem-july-20-2016\nBacktracking: https://vimeo.com/112065252 2020-12-09 17:00:22 cyberpunk-2077-ma-bugi-szok-zaden-programista-nigdy ckiyt1v9s001fi3umcgnxbgiu 2020-12-09 17:00:22 2020-12-09 17:00:22 ckioszeco02bki3um3ndy3wfw Czym jest TypeScript? Czy zdominuje JavaScript w 2021? https://www.youtube.com/watch?v=nUjl2nK0FAY Czym jest TypeScript? Czy zdominuje JavaScript w 2021? TypeScript rozszerza JavaScript o statyczne typy. Popularność tego języka programowania rośnie z roku na rok. Czy stanowi zagrożenie dla najpopularniejszego języka programowania na świecie? Przekonaj się czym jest TypeScript, jakie są jego wady i zalety. Poznaj materiały do skutecznej nauki TypeScriptu.\n\nBadanie "To Type or Not to Type": http://earlbarr.com/publications/typestudy.pdf\nDarmowy kurs TypeScript: https://www.youtube.com/watch?v=puOKhYcPg-0&list=PLfE0DpqEANZ0CQ9pCGlxGKPvYb1Sj6ybV\nKsiążka TypeScript na poważnie: https://typescriptnapowaznie.pl/\nKurs Opanuj JavaScript: https://przeprogramowani.pl/kurs-javascript\nKsiążka Rusz Głową. Wzorce Projektowe: https://helion.pl/ksiazki/wzorce-projektowe-rusz-glowa-eric-freeman-bert-bates-kathy-sierra-elisabeth,wzorvv.htm\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-12-14 17:00:33 czym-jest-typescript-czy-zdominuje-javascript-w-2021 ckiyt1v9s001fi3umcgnxbgiu 2020-12-14 17:00:33 2020-12-14 17:00:33 ckiuly50w02bsi3umdwpdgy9b Jak matematyka przekłada się na twój sukces w programowaniu? (Nowe badania) https://www.youtube.com/watch?v=8ktJgXUZDeQ Jak matematyka przekłada się na twój sukces w programowaniu? Nowe badania opublikowane przez MIT wskazują, że w mniejszym stopniu niż wskazywałyby na to stereotypy. Podczas badań fMRI naukowcy zaobserwowali, że mózg programisty czytającego kod w Pythonie i Scratchu aktywuje inne obszary multiple demand network niż matematyka.\n\n(reupload z poprawionym audio)\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-12-18 18:30:14 jak-matematyka-przeklada-sie-na-twoj-sukces-w-programowaniu-nowe-badania ckiyt1v9s001fi3umcgnxbgiu 2020-12-18 18:30:14 2020-12-18 18:30:14 ckiyt1v9s02bvi3um57f10ksq TOP FRONT-END 2021 - Podsumowanie roku i co przed nami (JS, CSS i więcej) https://www.youtube.com/watch?v=sm4Lfeso4KA Najpopularniejsze frameworki i narzędzia front-endowe zna większość obserwujących ten kanał, ale nie każdy jest świadomy jak wygląda ich faktyczne użycie i adopcja w społeczności. Dzisiaj przedstawiamy wam najważniejsze z wielu raportów podsumowujących ten rok oraz wybieramy technologie, na które w 2021r. warto zwrócić szczególną uwagę. Przed wami przegląd zarówno świata JavaScriptu, frameworków CSS jak i narzędzi oraz rekomendowanych praktyk.\n\nW środku:\n00:00 - Wstęp\n1:05 - Frameworki front-endowe\n2:20 - Frameworki CSS\n4:00 - Narzędzia do budowania\n6:15 - TypeScript\n11:15 - Tailwind\n14:50 - CSS in JS\n16:45 - Microfrontends\n17:50 - Stencil i LitElement\n20:40 - Svelte\n23:35 - Core Web Vitals\n24:55 - Podsumowanie\n\nŹródła:\nhttps://2020.stateofcss.com/\nhttps://almanac.httparchive.org/static/pdfs/web_almanac_2020_en.pdf\nhttps://insights.developer.mozilla.org/\nhttps://insights.stackoverflow.com/survey/2020\nhttps://tsh.io/state-of-frontend/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n⚡️ Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥 Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2020-12-21 17:00:10 top-front-end-2021-podsumowanie-roku-i-co-przed-nami-js-css-i-wiecej ckiyt1v9s001fi3umcgnxbgiu 2020-12-21 17:00:10 2020-12-21 17:00:10 cjki3ucxk016ei3umcwmn8v2l Podstawy HTML i CSS http://onionbyte.com/podstawy-html-css/

Kto i jak tworzy strony internetowe ? Strony internetowe tworzy programista (webmaster). Praca webmastera polega na pisaniu kodu źródłowego strony, czyli przy pomocy określonego języka programowania opisuje zestaw instrukcji jakie powinna wykonać przeglądarka, komputer czy serwer. Wszystkie strony internetowe są tworzone przy użyciu języków HTML i CSS. Przeglądarki WWW są programami, które interpretują kod strony […]

\n

Artykuł Podstawy HTML i CSS pochodzi z serwisu Onionbyte.

2018-08-06 10:00:11 podstawy-html-i-css cjpkyz77s0018i3um4hbp1uqq 2018-08-06 10:00:11 2018-08-06 10:00:11 cjl1zqzqw016vi3um2qu99vcr Struktura kodu HTML http://onionbyte.com/podstawy-html/

Szkielet strony HTML   Każdą stronę internetową, tworzy się według ściśle określonej struktury. Powyżej przedstawiłem na zdjęciu, jak taka struktura wygląda. Deklaracja Pojawiło się kilka wersji języka HTML, od początku jego istnienia. Każda kolejna wersja była rozwinięciem poprzedniej – dodawano nowe elementy, usprawniano tworzenie serwisów i aplikacji internetowych oraz naprawiano błędy poprzednich wersji. Z racji […]

\n

Artykuł Struktura kodu HTML pochodzi z serwisu Onionbyte.

2018-08-20 08:00:59 struktura-kodu-html cjpkyz77s0018i3um4hbp1uqq 2018-08-20 08:00:59 2018-08-20 08:00:59 +cizzyczwo0089i3um6hs7hnb9 Daj się poznać 2017 - czas start! https://kernelgonnapanic.pl/2017/03/07/daj-sie-poznac-start/

Minął już prawie tydzień od startu Daj się poznać, a ja jeszcze nie napisałam słowa o projekcie, który w nadchodzących tygodniach chiałabym realizować. Pora więc nadrobić opóźnienie i przedstawić Wam moje plany na najbliższy czas.
2017-03-07 19:52:45 daj-sie-poznac-2017-czas-start ckesj8kg0000vi3um42jmc86u 2017-03-07 19:52:45 2017-03-07 19:52:45 cjoinvxio01aci3um3iup8wuv Wielki Gatsby! [Gatsby.js] ⌨️ hello roman #29 https://www.youtube.com/watch?v=mku1UDzJwV0 LIVE NA KANALE – Sobota 17.11 o 19:00, zapraszam ❤️\n\nGatsby to jedna z najpopularniejszych technologii frontendowych ostatniego roku. Prawdopodobnie dlatego, że mimo wszystko w sieci sporo jest małych projektów, które nie potrzebują ogromnych, rozbudowanych architektur. Zapraszam na spotkanie z wielkim Gatsby.js :) \n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman\nhttp://discord.io/helloroman 2018-11-15 14:00:06 wielki-gatsby-gatsbyjs-keyboard-hello-roman-29 ckiswuz9s0017i3um5mg4h7q1 2018-11-15 14:00:06 2018-11-15 14:00:06 cjoltvpmo01agi3um9ept0a9s Sobota imieniny kota 🕺🐈 hello roman live! https://www.youtube.com/watch?v=CVW8TQPxRrE DISCORD: http://discord.io/helloroman\nINSTAGRAM: http://instagram.com/siemaroman\nMAIL: helloroman.vlog[at]gmail.com\n\n7000 subskrypcji jak z bicza strzelił! Zatem czas się spotkać i pogadać o rzeczach ważnych i tych mniej ważnych 😃 Zapraszam na live! 2018-11-17 19:11:12 sobota-imieniny-kota-hello-roman-live ckiswuz9s0017i3um5mg4h7q1 2018-11-17 19:11:12 2018-11-17 19:11:12 cjon2hpzk01aii3um63ethswi Styled components + Gatsby.js #1 – instalacja i podstawy 💅 hello roman https://www.youtube.com/watch?v=KY05osjvIOA Chcesz nauczyć się styled components? Zapraszam do kursu, w którym poznasz podstawowe oraz zaawansowane techniki wykorzystywania tej technologii. Cały projekt zbudujemy na Gatsby.js, ale jeśli chcesz, możesz do jego tworzenia używać też Reacta. \n\nDokumentację styled components znajdziesz pod tym adresem:\nhttps://styled-components.com\n\nRepozytorium kursu: \nhttps://github.com/helloroman/styled-components-course\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman 2018-11-18 16:00:02 styled-components-gatsbyjs-1-instalacja-i-podstawy-hello-roman ckiswuz9s0017i3um5mg4h7q1 2018-11-18 16:00:02 2018-11-18 16:00:02 @@ -2073,6 +2100,7 @@ cjoo2xg7k01aki3um37ii7yzd Czym jest Continuous Integration [CircleCI, TravisCI, cjoohxj4001ali3um2uv25tzz Styled components + Gatsby.js #2 – tagged template literals i propsy 💅 hello roman https://www.youtube.com/watch?v=NEe4xyTvRrA Chcesz nauczyć się styled components? Zapraszam do kursu, w którym poznasz podstawowe oraz zaawansowane techniki wykorzystywania tej technologii. Cały projekt zbudujemy na Gatsby.js, ale jeśli chcesz, możesz do jego tworzenia używać też Reacta. \n\nDokumentację styled components znajdziesz pod tym adresem:\nhttps://styled-components.com\n\nRepozytorium kursu: \nhttps://github.com/helloroman/styled-components-course\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman 2018-11-19 16:00:00 styled-components-gatsbyjs-2-tagged-template-literals-i-propsy-hello-roman ckiswuz9s0017i3um5mg4h7q1 2018-11-19 16:00:00 2018-11-19 16:00:00 cjopxnndk01aoi3um4zd7eb9b Styled components + Gatsby.js #3 – komponenty, "as", klasy, zmienne 💅 hello roman https://www.youtube.com/watch?v=lzxf_MqYVO0 Chcesz nauczyć się styled components? Zapraszam do kursu, w którym poznasz podstawowe oraz zaawansowane techniki wykorzystywania tej technologii. Cały projekt zbudujemy na Gatsby.js, ale jeśli chcesz, możesz do jego tworzenia używać też Reacta. \n\nDokumentację styled components znajdziesz pod tym adresem:\nhttps://styled-components.com\n\nRepozytorium kursu: \nhttps://github.com/helloroman/styled-components-course\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman 2018-11-20 16:07:59 styled-components-gatsbyjs-3-komponenty-as-klasy-zmienne-hello-roman ckiswuz9s0017i3um5mg4h7q1 2018-11-20 16:07:59 2018-11-20 16:07:59 cjosnyw6o01asi3umg62529ot Zacznij po prostu! [Zasada KISS] ⌨️ hello roman #30 https://www.youtube.com/watch?v=yzzKxjjCo3w UWAGA! Suchar tym razem to typowy inside joke, więc należy się wyjasnienie. Favicona, ponieważ mój pies to Fava ;) Ktoś kto dołączył dopiero do kanału trudno żeby o tym wiedział.\n\nZbytnie kombinowanie, przygotowywanie się na każdą ewentualność, chęć bycia perfekcyjnym od razu (żeby nikt nas nie wyśmiał) – to zmora, która powstrzymuje wielu ludzi przed zaczęciem ciekawych rzeczy. Zasada „Keep it simple, stupid” pozwala nieco oderwać się od tego i po prostu spróbować, bez zbędnego utrudniania sobie życia.\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman 2018-11-22 14:00:06 zacznij-po-prostu-zasada-kiss-keyboard-hello-roman-30 ckiswuz9s0017i3um5mg4h7q1 2018-11-22 14:00:06 2018-11-22 14:00:06 +cj01hlhk0008gi3um77hr61s6 Elm - początki. https://kernelgonnapanic.pl/2017/03/08/elm-poczatki/

Był czas na pogaduszki na temat projektu, a teraz pora na otwarcie edytora i zmierzenie się z konkretnymi problemami. Do dzieła!
2017-03-08 21:39:00 elm-poczatki ckesj8kg0000vi3um42jmc86u 2017-03-08 21:39:00 2017-03-08 21:39:00 cjovw5j1401aui3umhm30hp53 Styled components + Gatsby.js #4 – Theme Provider 💅 hello roman https://www.youtube.com/watch?v=WgqO54qAaW4 Chcesz nauczyć się styled components? Zapraszam do kursu, w którym poznasz podstawowe oraz zaawansowane techniki wykorzystywania tej technologii. Cały projekt zbudujemy na Gatsby.js, ale jeśli chcesz, możesz do jego tworzenia używać też Reacta. \n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman 2018-11-24 20:12:31 styled-components-gatsbyjs-4-theme-provider-hello-roman ckiswuz9s0017i3um5mg4h7q1 2018-11-24 20:12:31 2018-11-24 20:12:31 cjoy30hyo01avi3um5eks18lf Testy jednostkowe, integracyjne, e2e 🔥 πroman #18 🔥 hello roman https://www.youtube.com/watch?v=L899GC1pgQU W moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman 2018-11-26 09:00:06 testy-jednostkowe-integracyjne-e2e-proman-18-hello-roman ckiswuz9s0017i3um5mg4h7q1 2018-11-26 09:00:06 2018-11-26 09:00:06 cjp2o1u2w01azi3um6zpp2ruo Roman – historia prawdziwa 🥇 hello roman #31 https://www.youtube.com/watch?v=m0VuSdTDlzg Co robiłem na polach w Norwegii, jak nauczyłem się nosić kilka talerzy na raz i jak to się stało, że nie tylko pracowałem NA maku, ale też W maku 😂 Ujawniam kulisy życia Romana!\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman 2018-11-29 14:00:05 roman-historia-prawdziwa-hello-roman-31 ckiswuz9s0017i3um5mg4h7q1 2018-11-29 14:00:05 2018-11-29 14:00:05 @@ -2094,6 +2122,7 @@ cjqw4ein401dmi3umap5d8vel Mobile first 😱 opowieści skrypty https://www.youtu cjr0omhns01dti3umhmh2docw Co musi umieć junior developer? ⌨️ hello roman #38 https://www.youtube.com/watch?v=KQiUmFEUrkw Bycie juniorem to niefajna sprawa – trochę jak między młotem a kowadłem. Z jednej strony zżera nas niepewność, z drugiej wiemy ile jeszcze musimy się nauczyć. Nigdy nie wiadomo, kiedy jest TEN czas, aby zaaplikować do pierwszej pracy jako programista. W dzisiejszym docinku dzielę się z Wami tym, co potrafiłem, kiedy składałem swoją pierwszą CV-kę. \n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman\nhttps://discord.io/helloroman\nhttps://facebook.com/helloroman.vlog 2019-01-17 14:00:01 co-musi-umiec-junior-developer-keyboard-hello-roman-38 ckiswuz9s0017i3um5mg4h7q1 2019-01-17 14:00:01 2019-01-17 14:00:01 cjr63o4zc01e2i3um6wst78r1 Czym jest PWA? [Progressive web app] 😱 opowieści, skrypty #3 https://www.youtube.com/watch?v=c17A42sIRRg Linki o których mówiłem:\nPWA: https://developers.google.com/web/progressive-web-apps/\nChecklista PWA: https://developers.google.com/web/progressive-web-apps/checklist\nWorkbox: https://developers.google.com/web/tools/workbox/\nCo potrafią przeglądarki? https://whatwebcando.today/\n\n\nPWA czyli Progressive Web Applications to kolejny fascynujący kierunek w którym podąża współczesny web development. Stworzenie hybrydy łączącej świat „przeglądarkowy” ze światem aplikacji natywnych to niesamowicie ciekawa koncepcja – szkoda tylko, że póki co nie do końca wspierana przez wszystkie urządzenia. Ale kto wie... może wkrótce to się zmieni 🤔\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman 2019-01-21 09:00:03 czym-jest-pwa-progressive-web-app-opowiesci-skrypty-3 ckiswuz9s0017i3um5mg4h7q1 2019-01-21 09:00:03 2019-01-21 09:00:03 cjraopfk001e9i3um9gs782ud Jak skonfigurować terminal / konsolę [Unix / macOS] ⌨️ hello roman #39 https://www.youtube.com/watch?v=6xvoy7mctXE Bash czy Zsh? Npm czy Yarn? Po co mi Npx? Pytań rodzi się wiele gdy zaczniemy na dobre korzystać z terminala (zwanego też konsolą). W dzisiejszym odcinku staram się pokazać łatwy i przyjemny sposób na podstawową konfigurację. Opowiem między innymi o:\n\nZSH: https://en.wikipedia.org/wiki/Z_shell\nslimzsh: https://github.com/changs/slimzsh\nnvm: https://github.com/creationix/nvm\n(alternatywa dla windows: https://github.com/coreybutler/nvm-windows)\nnode: https://nodejs.org/en/\nnpm: https://www.npmjs.com/\nnpx: https://www.npmjs.com/package/npx\n\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. \n\nMusic by Epidemic Sound (http://www.epidemicsound.com)\n \nSprawdź też:\nhttp://instagram.com/siemaroman\nhttps://discord.io/helloroman\nhttps://facebook.com/helloroman.vlog 2019-01-24 14:00:00 jak-skonfigurowac-terminal-konsole-unix-macos-keyboard-hello-roman-39 ckiswuz9s0017i3um5mg4h7q1 2019-01-24 14:00:00 2019-01-24 14:00:00 +cj0fcfb1c009si3um8pf3g9zj To żyje! Elm w akcji. https://kernelgonnapanic.pl/2017/03/18/to-zyje-elm-w-akcji/

Kolejny odcinek zmagań z Elmem przed nami. Dziś timer ożyje. Będziemy mieć okazję zobaczyć jak wygląda architektura aplikacji w Elmie i czemu może się Wam wydawać znajoma. 2017-03-18 14:23:00 to-zyje-elm-w-akcji ckesj8kg0000vi3um42jmc86u 2017-03-18 14:23:00 2017-03-18 14:23:00 cjp8h8cug01b6i3um8449gjig Jaki edytor kodu do tworzenia stron internetowych dla początkujących http://onionbyte.com/jaki-edytor-kodu-do-tworzenia-stron-internetowych-dla-poczatkujacych/

Narzędzie bez którego nie stworzymy strony internetowej to edytor tekstu. Kod źródłowy strony internetowej to dokument tekstowy, który musimy gdzieś zapisać. Najprostszy program do edycji tekstu to Notatnik, dołączany do systemu Microsoft. Program ten jednak jest bardzo prosty i w żadnym stopniu nie pomaga podczas pisania kodu. Nie musimy się jednak martwić. Jest bardzo wiele […]

\n

Artykuł Jaki edytor kodu do tworzenia stron internetowych dla początkujących pochodzi z serwisu Onionbyte.

2018-12-03 15:35:49 jaki-edytor-kodu-do-tworzenia-stron-internetowych-dla-poczatkujacych cjpkyz77s0018i3um4hbp1uqq 2018-12-03 15:35:49 2018-12-03 15:35:49 cjpcmjri801bfi3umh1zw5nl3 Efekty zmiany dysku na SSD. Porównanie HDD i SSD http://onionbyte.com/efekty-zmiany-dysku-na-ssd-porownanie-hdd-i-ssd/

Rozruch komputera trwa zbyt długo? Programy ładują się powoli? Zmień dysk na SSD! Dysk SSD spotkamy dziś niemalże w każdym nowym komputerze. Nie bez powodu. Jednym z głównym elementów tak ogromnej popularności dysków SSD jest wydajność oraz bezpieczeństwo.  W przeciwieństwie do dysków HDD, dysk SSD nie wykorzystuje żadnych części ruchomych. Dlaczego jest to ważne? Ruchome […]

\n

Artykuł Efekty zmiany dysku na SSD. Porównanie HDD i SSD pochodzi z serwisu Onionbyte.

2018-12-06 13:15:44 efekty-zmiany-dysku-na-ssd-porownanie-hdd-i-ssd cjpkyz77s0018i3um4hbp1uqq 2018-12-06 13:15:44 2018-12-06 13:15:44 cjpfcg0yo01bki3um7gm30toq Stwórz swoją pierwszą stronę internetową. Krok po kroku. http://onionbyte.com/stworz-swoja-pierwsza-strone-internetowa-krok-po-kroku/

Znasz już podstawy HTML i CSS i podstawową strukturę kodu HTML? Pora wykorzystać zdobytą wiedzę w praktyce! Do tworzenia stron internetowych wymagany jest edytor kodu. Jaki edytor do tworzenia stron internetowych? – link   Przystępujemy do tworzenia strony internetowej.   Krok 1 Utwórz folder. Znajdą się w nim wszystkie pliki naszej tworzonej strony internetowej. Nie ma […]

\n

Artykuł Stwórz swoją pierwszą stronę internetową. Krok po kroku. pochodzi z serwisu Onionbyte.

2018-12-08 10:56:12 stworz-swoja-pierwsza-strone-internetowa-krok-po-kroku cjpkyz77s0018i3um4hbp1uqq 2018-12-08 10:56:12 2018-12-08 10:56:12 @@ -2131,6 +2160,7 @@ cjqy03ybs01dri3um5jrr2mqf Czym jest TypeScript? - Praktyczny kurs TypeScript #1 cjr809bew01e7i3um9ewag484 Czym jest Redux? - Redux od podstaw #2 https://www.youtube.com/watch?v=TGcICHEMwbs Czym tak naprawdę Redux różni się od architektury Flux? Co wyróżnia Reduxa na tle konkurencyjnych bibliotek do zarządzania stanem? Jak działa hot reloading i time travel debugging?\n\nOdpowiedzi na te pytania znajdziesz w tym odcinku serii "Redux od podstaw”.\n\nArchitektura Flux:\nhttps://www.youtube.com/watch?v=-9pnktOsxAw\n\nWszystkie odcinki Redux od podstaw:\nhttps://www.youtube.com/watch?v=-9pnktOsxAw&list=PLFwEHQJHnxZ0ltsl4mQermwufy4zr43UY\n\nŚledź mnie w internetach i bądź na bieżąco:\nhttps://pl-pl.facebook.com/algosmartpl/\nhttps://twitter.com/mkczarkowski 2019-01-22 17:00:05 czym-jest-redux-redux-od-podstaw-2 cjwrzrlww0015i3um1bbud9jy 2019-01-22 17:00:05 2019-01-22 17:00:05 cjri0c6zs01emi3um7f6wf68y Konfiguracja projektu - Praktyczny kurs TypeScript #2 https://www.youtube.com/watch?v=3E1lu88NPWY Konfiguracja i działanie kompilatora TypeScript może onieśmielać początkujących. W tym odcinku odczaruję go dla Ciebie na przykładzie prostego projektu Node.js. \n\nDowiesz się czym jest kontekt kompilacji, jak go definiować za pomocą tsconfig.json oraz jak przebiega proces kompilacji kodu TypeScript do JavaScript. \n\nPrzy okazji poznasz kilka tricków związanych z integracją TypeScript w VS Code.\n\nDokumentacja właściwości compilerOptions: https://www.typescriptlang.org/docs/handbook/compiler-options.html\n\nTworzenie projektu create-react-app z TypeScript: https://facebook.github.io/create-react-app/docs/adding-typescript\n\nŚledź mnie w internetach i bądź na bieżąco:\nhttps://pl-pl.facebook.com/algosmartpl/\nhttps://twitter.com/mkczarkowski 2019-01-29 17:00:01 konfiguracja-projektu-praktyczny-kurs-typescript-2 cjwrzrlww0015i3um1bbud9jy 2019-01-29 17:00:01 2019-01-29 17:00:01 cjrs0f77c01f6i3um61g5c8k2 Turbo Console Log - Sekrety rzemieślnika #1 https://www.youtube.com/watch?v=UVRoqR93_HY Często korzystasz z console.log() podczas debugowania kodu JavaScript? Ja tak. W tym materiale zaprezentuje Ci rozszerzenie Turbo Console Log do edytora Visual Studio Code. Dzięki niemu zautomatyzujesz wszystkie operacje wykonywane podczas pracy z tą popularną metodą.\n\nW serii "Sekrety rzemieślnika" prezentuje Ci narzędzia i patenty, które pozwolą Ci na usprawnienie codziennej pracy z kodem.\n\nŚledź mnie w internetach i bądź na bieżąco:\nhttps://pl-pl.facebook.com/algosmartpl/\nhttps://twitter.com/mkczarkowski 2019-02-05 17:00:03 turbo-console-log-sekrety-rzemieslnika-1 cjwrzrlww0015i3um1bbud9jy 2019-02-05 17:00:03 2019-02-05 17:00:03 +cje39xqtc00yxi3um5y0k3jkh Snapshot testing - co to takiego? [Frontend testing #2] https://kernelgonnapanic.pl/2018/02/25/jest-snapshot-testing/

Po całkiem długim okresie przerwy (pierwszy wpis z cyklu powstał w lipcu ubiegłego roku), zapraszam znów do przyjrzenia się bliżej frontendowym testom. Dziś porozmawiamy o Jest oraz snapshot testingu - jednej z jego funkcjonalności.
2018-02-25 20:56:00 snapshot-testing-co-to-takiego-frontend-testing-2 ckesj8kg0000vi3um42jmc86u 2018-02-25 20:56:00 2018-02-25 20:56:00 ck1rz3tog01r2i3um1ixybwxb Gry webowe w HTML5/JS (Andrzej Mazur) - FullStak #6 https://www.youtube.com/watch?v=_cRlWcRQqbg W tym odcinku rozmawiam z Andrzejem Mazurem o tworzeniu przeglądarkowych gier z użyciem front-endowych technologii. W podcaście przepytałem swojego gościa o start w branży webowych gier oraz o przyszłość tej wirtualnej rozrywki. Andrzej posiada ogromną wiedzę na temat webowego gamedevu i chętnie się nią dzieli w tym podcaście oraz wielu innych inicjatywach, których jest autorem (konkurs js13kgames, newsletter Gamedev.js, meetup Gamedev.js). Gorąco zapraszam do odsłuchu naszej rozmowy!\n1:00 - Pierwszy język programowania i gra HTML/JS/CSS Andrzeja\n2:30 - Snake w jQuery?!\n4:45 - Tworzenie gier webowych na pełen etat\n6:40 - Jak zacząć robić gry?\n12:20 - Polecane materiały do nauki\n15:40 - Rynek pracy w webowym gamedev’ie\n23:15 - Przyszłość gier JavaScript (WebGPU, Webassembly, WebGL, Web Monetization)\n30:00 - Ochrona kodu gier webowych\n35:00 - Nauka z kodu źródłowego gier\n38:30 - Konkurs na najlepszą grę, która ma mniej niż 13 kilobajtów (js13kgames)\n42:00 - Newsletter dla twórców gier przeglądarkowych\n45:00 - Meetup dla twórców gier webowych\n48:00 - Gry VR/AR z użyciem HTML5/JS/CSS\n52:00 - Testowanie i tworzenie gier virtual-reality (VR) bez sprzętu jak Oculus\n55:20 - Grant for the Web\n\nSkarbnica wiedzy o tworzeniu gier: https://developer.mozilla.org/en-US/docs/Games\nTutoriale z tworzenia gier dla web developerów: https://academy.zenva.com/\nŚwietne materiały do nauki game designu: https://www.emanueleferonato.com/\nFramework do tworzenia webowych gier typu VR: https://aframe.io/\nBiblioteka do tworzenia gier3d w WebGL i JavaScript: https://babylonjs.com\nBiblioteka do tworzenia gier3d w JavaScript: https://threejs.org/\nGrant wspierający projekty dot. Monetyzacji rozawiązań webowych https://www.grantfortheweb.org/\n\nAndrzej Mazur: https://end3r.com/\nStudio Enclave Games: https://enclavegames.com/\nMeetup Gamedev.js: https://gamedevjs.pl/\nNewsletter Gamedev.js Wekkly: https://gamedevjsweekly.com/\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2019-10-15 15:00:16 gry-webowe-w-html5js-andrzej-mazur-fullstak-6 ckivz8t54001di3umfv7i4q26 2019-10-15 15:00:16 2019-10-15 15:00:16 ck2657yh401rmi3um4gyh09e6 Wstęp - Unit testing w React (Jest + Testing Library) https://www.youtube.com/watch?v=MdWeJRQ2dsk KOD: https://codesandbox.io/s/charming-bhabha-53fy3\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2019-10-25 13:00:13 wstep-unit-testing-w-react-jest-testing-library ckivz8t54001di3umfv7i4q26 2019-10-25 13:00:13 2019-10-25 13:00:13 ck2kfmh5401s0i3um8h1a29mc Tworzenie Open Source (Michał Papis, Piotr Kuczynski) - FullStak #7 https://www.youtube.com/watch?v=AndEcLdzHJs O satysfakcji z tworzenia i bolączkach ruchu Open Source porozmawiałem z Michałem Papisem oraz Piotrem Kuczynskim. Panowie na codzień pracują w branży IT, a po godzinach rozwijają narzędzie RVM, które pomaga programistom i administratorom zarządzanie wersjami w projektach Ruby (https://rvm.io). \n\n1:00 - Przedstawienie gości\n5:00 - Pierwsza kontrybucja do Open Source\n6:20 - Co to jest RVM? \n7:45 - Statystyki pobrań RVM\n11:30 - Kiedy projekt staje się ważny\n15:50 - Satysfakcja i korzyści z tworzenia wolnego oprogramowania \n21:30 - Czego można się nauczyć? \n22:30 - Jak juniorzy mogą włączyć się do projektu open source?\n32:00 - Wybór odpowiedniego projektu\n35:00 - Kultura pracy \n37:50 - Problemy ruchu Open Source\n41:00 - Zaangażowanie firm\n43:00 - Modele biznesowe, crowd-funding dla projektów Open Source\n46:00 - Wsparcie firm\n50:30 - Monetyzacja wolnych licencji \n54:00 - Praca dla samej satysfakcji \n58:00 - Open Source w zamówieniach publicznych \n1:10:00 Automatyka i inteligentne domy (https://www.home-assistant.io)\n1:11:00 Ciekawe projekty Open Source od Sindre Sorhus (https://github.com/sindresorhus)\n\nJak szukacie ciekawych projektów lub wyzwań zawodowych to zachęcam do kontaktu z Piotrem lub Michałem!\n\nPiotr Kuczynski\nhttps://www.linkedin.com/in/piotrkuczynski\nhttps://twitter.com/PiotrKuczynski\n\nMichał Papis\nhttps://twitter.com/mpapis \nhttps://www.linkedin.com/in/mpapis\nhttps://github.com/mpapis/\n\nRozmawiał Artur Chmaro\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2019-11-04 13:00:13 tworzenie-open-source-michal-papis-piotr-kuczynski-fullstak-7 ckivz8t54001di3umfv7i4q26 2019-11-04 13:00:13 2019-11-04 13:00:13 @@ -2213,6 +2243,7 @@ ckducymy0025yi3umfm2hh9ey ⚡️ Next.js czyli web framework przyszłości (Prom cke2hj35k0265i3umc0y4faal Front-end dla aplikacji Ethereum (Dev.js online #8) https://www.youtube.com/watch?v=PQA74ykNOqw Z tej prezentacji dowiesz się czym są zdecenetralizowane aplikacje, jak działa #blockchain oraz jak tworzyć frontend dla aplikacji #ethereum. \n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2020-08-20 07:30:11 front-end-dla-aplikacji-ethereum-devjs-online-8 ckivz8t54001di3umfv7i4q26 2020-08-20 07:30:11 2020-08-20 07:30:11 ckeyk9plc0270i3um9kyuemje Upload plików do AWS S3 (React + Next.js) https://www.youtube.com/watch?v=V7oSz6gRhy4 Blog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2020-09-11 18:15:30 upload-plikow-do-aws-s3-react-nextjs ckivz8t54001di3umfv7i4q26 2020-09-11 18:15:30 2020-09-11 18:15:30 ckf52p51c0275i3umek326poy Developer w Norwegii - live z Przemkiem Bykowskim https://www.youtube.com/watch?v=gMxlj1e-8I4 Porozmawiamy sobie o zarobkach, rekrutacji, kosztach życia i ogólnej pracy jako programista w Norwegii. Wpadaj na live dzisiaj o godz. 20:00! 2020-09-16 07:38:00 developer-w-norwegii-live-z-przemkiem-bykowskim ckivz8t54001di3umfv7i4q26 2020-09-16 07:38:00 2020-09-16 07:38:00 +ckuh2o54i00020wjovp8uj90v Frontend Thursday vol. 58 https://vived.io/frontend-thursday-vol-58/

W tym tygodniu mamy dla Was betę TypeScript 4.5, nowego React Native i bibliotekę do zarządzania stanem aplikacji od twórców Akity.

\n

Artykuł Frontend Thursday vol. 58 pochodzi z serwisu Vived.

2021-10-07 14:49:54 frontend-thursday-vol.-58 ckmor5k8y000044moj65m13y0 2021-10-07 15:06:02.61 2021-10-07 15:06:02.61 cjysosfy801o0i3ume9b06aov Środa dzień fronta ⌨️ hello roman #66 https://www.youtube.com/watch?v=kBoZ2KUkzQw Sporo się działo ostatnio i dzieje nadal! Postanowiłem Wam opowiedzieć, co ostatnio u mnie słychać, a przy okazji możecie podejrzeć, jak wyglądała 11-ta Frontownia zorganizowana przez Cognifide w Poznaniu. \n\nMoje kursy:\n⭐️ Kurs React od podstaw - https://eduweb.pl/kursy/javascript/react-od-podstaw.html?partner=helloroman\n⭐️ Kurs React w praktyce - https://eduweb.pl/kursy/javascript/react-w-praktyce.html?partner=helloroman \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nhttp://instagram.com/siemaroman\nhttps://facebook.com/helloroman.vlog\nhttps://discord.io/helloroman\n\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2019-08-01 13:00:08 sroda-dzien-fronta-keyboard-hello-roman-66 ckiswuz9s0017i3um5mg4h7q1 2019-08-01 13:00:08 2019-08-01 13:00:08 cjyy3u0yg01o5i3um6alvgwqc Przepis na layout – podstawowy grid 😱Opowieści, skrypty #31 https://www.youtube.com/watch?v=TpIxpgUMClw Kolejny z serii tutorial o css – tym razem zabieramy się za układ naprzemienny z wykorzystaniem CSS Grid i bardzo ciekawej właściwości counter. \n\nMoje kursy:\n⭐️ Kurs React od podstaw - https://eduweb.pl/kursy/javascript/react-od-podstaw.html?partner=helloroman\n⭐️ Kurs React w praktyce - https://eduweb.pl/kursy/javascript/react-w-praktyce.html?partner=helloroman \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nhttp://instagram.com/siemaroman\nhttps://facebook.com/helloroman.vlog\nhttps://discord.io/helloroman\n\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2019-08-05 08:00:07 przepis-na-layout-podstawowy-grid-opowiesci-skrypty-31 ckiswuz9s0017i3um5mg4h7q1 2019-08-05 08:00:07 2019-08-05 08:00:07 cjz2ovk0o01o9i3umetcihjox Stworzyłem plugin do Figmy! ⌨️ hello roman #67 https://www.youtube.com/watch?v=ojtwkceDZB0 Figma 1 sierpnia wprowadziła pluginy do swojego produktu! Od teraz przy pomocy TypeScript możemy stworzyć tam najprawdziwsze cuda - developerzy z całego świata już przystąpili do gry. Czas na mnie! W tym odcinku pokażę Wam, jak stworzyć prosty plugin do tego programu. \n\nMoje kursy:\n⭐️ Kurs React od podstaw - https://eduweb.pl/kursy/javascript/react-od-podstaw.html?partner=helloroman\n⭐️ Kurs React w praktyce - https://eduweb.pl/kursy/javascript/react-w-praktyce.html?partner=helloroman \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nhttp://instagram.com/siemaroman\nhttps://facebook.com/helloroman.vlog\nhttps://discord.io/helloroman\n\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2019-08-08 13:00:15 stworzylem-plugin-do-figmy-keyboard-hello-roman-67 ckiswuz9s0017i3um5mg4h7q1 2019-08-08 13:00:15 2019-08-08 13:00:15 @@ -2255,6 +2286,7 @@ ck1kpm2m801qpi3umdlw18wqe Jak pisać lepszy JavaScript? ⌨️ hello roman #76 h ck1upoxfc01r7i3umalkphgaa Jak pisać lepszy JavaScript cz. II [Prettier, ESlint i inne] ⌨️ hello roman #77 https://www.youtube.com/watch?v=HjA_pMm86Jo Jak pisać lepszy JavaScript? Po ostatnim odcinku wracamy do tematu! Tym razem pokażę Wam dlaczego warto używać Prettiera, ESlinta, rest i spread operatorów oraz kilku innych przydatnych rzeczy! \n\nMoje kursy:\n⭐️ Kurs React od podstaw - https://eduweb.pl/kursy/javascript/react-od-podstaw.html?partner=helloroman\n⭐️ Kurs React w praktyce - https://eduweb.pl/kursy/javascript/react-w-praktyce.html?partner=helloroman \n⭐️ Kurs React zaawansowany - https://eduweb.pl/kursy/javascript/react-techniki-zaawansowane.html?partner=helloroman \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2019-10-17 13:00:03 jak-pisac-lepszy-javascript-cz-ii-prettier-eslint-i-inne-keyboard-hello-roman-77 ckiswuz9s0017i3um5mg4h7q1 2019-10-17 13:00:03 2019-10-17 13:00:03 ck24prw3c01rji3um2p6y4otw Tworzę platformę z kursami! ⌨️ hello roman #79 https://www.youtube.com/watch?v=9iad7IQ-Xk0 Już od dłuższego czasu planuję start autorskiej platformy z kursami – w końcu zabrałem się porządnie do roboty, przygotowałem projekt i zacząłem pisać kod. Już czas, żeby podzielić się z Wami pierwszymi efektami. \n\nMoje kursy:\n⭐️ Kurs React od podstaw - https://eduweb.pl/kursy/javascript/react-od-podstaw.html?partner=helloroman\n⭐️ Kurs React w praktyce - https://eduweb.pl/kursy/javascript/react-w-praktyce.html?partner=helloroman \n⭐️ Kurs React zaawansowany - https://eduweb.pl/kursy/javascript/react-techniki-zaawansowane.html?partner=helloroman\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2019-10-24 13:00:03 tworze-platforme-z-kursami-keyboard-hello-roman-79 ckiswuz9s0017i3um5mg4h7q1 2019-10-24 13:00:03 2019-10-24 13:00:03 cji0c6g1s013gi3um7bvph9na Certyfikat SSL – dlaczego warto go mieć? https://devszczepaniak.pl/post/wszystko-o-certyfikacie-ssl/

Co to jest certyfikat SSL? Certyfikat SSL jest poświadczeniem naszej wiarygodności. Mając zaimplementowany ten certyfikat możemy korzystać z protokołu HTTPS, który jest szyfrowany, dzięki czemu dane przesyłane pomiędzy klientem a serwerem są szyfrowane. W praktyce utrudnia to podsłuchiwanie oraz zmniejsza szansę na atak Man in the Middle. Obecność certyfikatu jawi się poprzez zieloną kłódkę w […]

\n

Artykuł Certyfikat SSL – dlaczego warto go mieć? pochodzi z serwisu Devszczepaniak.pl - Twoje miejsce w sieci.

2018-06-04 14:14:16 certyfikat-ssl-dlaczego-warto-go-miec ckiyvf2eg0012i3um2h8g0dup 2018-06-04 14:14:16 2018-06-04 14:14:16 +ckuh3ovep00020wl3eg4g3tme Typescript - literal inference https://www.oskarkowalow.pl/blog/typescript-literal-inference W Typescript możemy trafić na błąd typu "Argument of type X is not assignable to parameter of type Y".\nCo to oznacza i jak to naprawić? Typy… 2021-10-07 00:00:00 typescript-literal-inference ckocpwuso0019afl7he6igw3f 2021-10-07 15:34:36.289 2021-10-07 15:34:36.289 ck2es05xs01rvi3um2934782u OnePlus 7T Pro – czy warto przejść z iPhone? ⌨️ hello roman #80 https://www.youtube.com/watch?v=tt3lNhhvNA4 Stało się! Przeszedłem z iOS na Androida, a właściwie na Oxygen OS – kupiłem OnePlus 7T Pro, na premierę którego czekałem sporo! W dzisiejszym odcinku opowiem Wam o perspektywie osoby, która przez ostanie 5 lat używała iPhone'a. Czy łatwo było mi się przenieść? Czy robot Google oferuje więcej od produktu Apple? \n\nMoje kursy:\n⭐️ Kurs React od podstaw - https://eduweb.pl/kursy/javascript/react-od-podstaw.html?partner=helloroman\n⭐️ Kurs React w praktyce - https://eduweb.pl/kursy/javascript/react-w-praktyce.html?partner=helloroman \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2019-10-31 14:00:10 oneplus-7t-pro-czy-warto-przejsc-z-iphone-keyboard-hello-roman-80 ckiswuz9s0017i3um5mg4h7q1 2019-10-31 14:00:10 2019-10-31 14:00:10 ck2os2yfk01s4i3um25qzcw0i ReactiveConf 2019 [English subtitles] ⌨️ hello roman #81 https://www.youtube.com/watch?v=IJeNYmhw8Hs ReactiveConf 2019 was most definitely the best conference i've been at so far. Awesome city (i love Prague!), great place, amazing speakers... i was blown away! I've managed to make an interview with Kyle Matthews 3:13 (Gatsby.js creator), Sean Larkin and Johannes Ewald 8:36 (Webpack core team) - you need to check them out!\n\nDon't forget to turn on english subtitles! \n\nHere you can check out all of the presentations from ReactiveConf 2019 \nhttp://bit.ly/reactiveconf2019\n\nAnd here are some photos as well: http://bit.ly/reactiveconf2019photos\n\nReactiveConf is one of the biggest conference about modern frontend technologies. React, Vue, Angular, PWA and so much more! Frontend is one of the fastest developing fields of programming, but it's also very dynamic. Thanks to such events it's easier to stay on track and be up to date with new things. \nMoje kursy:\n⭐️ Kurs React od podstaw - https://eduweb.pl/kursy/javascript/react-od-podstaw.html?partner=helloroman\n⭐️ Kurs React w praktyce - https://eduweb.pl/kursy/javascript/react-w-praktyce.html?partner=helloroman \n⭐️ Kurs React zaawansowany- https://eduweb.pl/kursy/javascript/react-techniki-zaawansowane.html?partner=helloroman \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2019-11-07 14:00:02 reactiveconf-2019-english-subtitles-keyboard-hello-roman-81 ckiswuz9s0017i3um5mg4h7q1 2019-11-07 14:00:02 2019-11-07 14:00:02 ck2ys606o01smi3um4oshfmz8 Prawdziwe zadania developera ⌨️ hello roman #82 https://www.youtube.com/watch?v=coWyrgUMXhY Prawdziwe zadania developera nie wyglądają jak te w kursach czy tutorialach – w prawdziwej pracy rozwiązanie nie czeka na nas w drugiej lekcji, tylko musimy sami do tego dojść. Chcąc walczyć ze stereotypem wszystkowiedzącego programisty, który niemal z zamkniętymi oczami pisze kod chciałem Wam pokazać jak wygląda mój dzień w pracy. Oczywiście w otoczeniu Ani, Favy, Józefa i Basi 😂\n\nTu trochę więcej o roli developera w Netguru – https://hubs.ly/H0lPt7c0\nA tu szukamy React Devów, wbijajcie ❤️ – https://hubs.ly/H0l35290\n\n🚀 Odcinek powstał we współpracy z Netguru\n\nMoje kursy:\n⭐️ Kurs React od podstaw - https://eduweb.pl/kursy/javascript/react-od-podstaw.html?partner=helloroman\n⭐️ Kurs React w praktyce - https://eduweb.pl/kursy/javascript/react-w-praktyce.html?partner=helloroman \n⭐️ Kurs React zaawansowany - https://eduweb.pl/kursy/javascript/react-techniki-zaawansowane.html?partner=helloroman \n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2019-11-14 14:00:06 prawdziwe-zadania-developera-keyboard-hello-roman-82 ckiswuz9s0017i3um5mg4h7q1 2019-11-14 14:00:06 2019-11-14 14:00:06 @@ -2293,7 +2325,6 @@ cjkm9w0t4016ii3umexqve673 Zdrowie w pracy programisty https://devszczepaniak.pl/ cjkxpf3eg016ri3um0q3xeygp Rzut okiem na WordPress REST API https://devszczepaniak.pl/post/rzut-okiem-na-wordpress-rest-api/

Słowem wstępu o Wordpress REST API WordPress wraz z wersją 4.7 otrzymał REST API. Dzięki niemu, w łatwy sposób możemy uzyskać dane w formacie JSON z naszego systemu zarządzania treścią. Jest to świetna alternatywa dla motywów. Rozwiązanie to ma wiele zalet, ale też kilka wad, które teraz pokrótce opiszę. Zalety WordPress REST API Główną zaletą jest […]

\n

Artykuł Rzut okiem na WordPress REST API pochodzi z serwisu Devszczepaniak.pl - Blog programistyczny.

2018-08-17 08:00:43 rzut-okiem-na-wordpress-rest-api ckiyvf2eg0012i3um2h8g0dup 2018-08-17 08:00:43 2018-08-17 08:00:43 cjl106at4016ui3um3sjvadyx Case study moich doświadczeń z blogowaniem – nieco przemyśleń https://devszczepaniak.pl/case-study-moich-doswiadczen-z-blogowaniem/

Zmiany na blogu! Czytelnicy, którzy odwiedzają mojego bloga regularnie zapewne zauważyli, że blog zupełnie zmienił swoją szatę graficzną. Nie była to dla mnie decyzja łatwa, ponieważ w poprzedni layout bloga włożyłem naprawdę sporo pracy i serca niemniej jednak konieczna. Przy okazji tak wielkich zmian postanowiłem napisać małe case study – podzielić się w tym wpisie … Czytaj dalej Case study moich doświadczeń z blogowaniem – nieco przemyśleń

\n

Artykuł Case study moich doświadczeń z blogowaniem – nieco przemyśleń pochodzi z serwisu Devszczepaniak.pl.

2018-08-19 15:25:07 case-study-moich-doswiadczen-z-blogowaniem-nieco-przemyslen ckiyvf2eg0012i3um2h8g0dup 2018-08-19 15:25:07 2018-08-19 15:25:07 cjl9sisx40171i3um22hwgpbg Wstęp do REST API https://devszczepaniak.pl/wstep-do-rest-api/

Dlaczego akurat wpis o REST API? Na stworzenie tego wpisu zdecydowałem się po podjęciu decyzji o rozpoczęciu mojego nowego projektu. Jednym z elementów aplikacji, którą mam zamiar napisać jest właśnie REST API. W moim projekcie mam zamiar użyć do tego celu node.js oraz MongoDB. Miałem już co nieco do czynienia z obiema technologiami, natomiast chcę … Czytaj dalej Wstęp do REST API

\n

Artykuł Wstęp do REST API pochodzi z serwisu Devszczepaniak.pl.

2018-08-25 19:00:49 wstep-do-rest-api ckiyvf2eg0012i3um2h8g0dup 2018-08-25 19:00:49 2018-08-25 19:00:49 -cjgb62lhs0112i3umavw47zbp I stało się! https://matrog.pl/i-stalo-sie/

Mam na imię Mateusz a Ty właśnie trafiłeś na mój blog. Dokładniej mówiąc czytasz teraz wpis wprowadzający. Nazwałem go tam dlatego, że w tym poście chciałbym się przedstawić, napisać coś o sobie i pokazać tematykę tego bloga. No to co? Zaczynajmy. Moje imię już znasz. Pochodzę z niewielkiej wioski usytuowanej…

\n
Czytaj dalejI stało się!
\n

Artykuł I stało się! pochodzi z serwisu MatRog.pl.

2018-04-22 18:49:22 i-stalo-sie cjjyg7b2w0011i3umc74cg6xw 2018-04-22 18:49:22 2018-04-22 18:49:22 cjglx9vjc011hi3um2llcbycs 15 tyś zł w miesiąc już teraz! https://matrog.pl/15-tys-zl-w-miesiac-juz-teraz/

„Dokładnie tak! Już tylko kilka prostych kroków dzieli Cię od zarabiania 15 tyś w miesiąc. Zostań programistą i pracuj z dowolnego miejsca na świecie zarabiając olbrzymie pieniądze!” Wszystko pięknie, ładnie i w ogóle tylko, że… To nieprawda! Jednak po kolei. Kilka dni temu na moją skrzynkę trafił mail o podobnej…

\n
Czytaj dalej15 tyś zł w miesiąc już teraz!
\n

Artykuł 15 tyś zł w miesiąc już teraz! pochodzi z serwisu MatRog.pl.

2018-04-30 07:28:33 15-tys-zl-w-miesiac-juz-teraz cjjyg7b2w0011i3umc74cg6xw 2018-04-30 07:28:33 2018-04-30 07:28:33 cjguo25q8011vi3um9508fl93 WordPress the king! https://matrog.pl/wordpress-the-king/

Blog ten powstał na z wykorzystaniem platformy blogowej WordPress. No ale właśnie. Czy WordPress jest jeszcze platformą blogową? Czy może jest czymś więcej? W jakim kierunku zmierzają twórcy? Kto tak na prawdę jest twórcą WordPressa? Niepozorna platforma. 27 maja 2003 roku na świat wyszła pierwsza wersja WordPressa. Miała ona numer…

\n
Czytaj dalejWordPress the king!
\n

Artykuł WordPress the king! pochodzi z serwisu MatRog.pl.

2018-05-06 10:20:32 wordpress-the-king cjjyg7b2w0011i3umc74cg6xw 2018-05-06 10:20:32 2018-05-06 10:20:32 cjh6lan2w0127i3um4yvvhodh Jaki język na początek? https://matrog.pl/jaki-jezyk-na-poczatek/

Pytania, pytania, pytania Wchodząc na jakiekolwiek forum, grupę na facebooku czy inne miejsce poświęcone tematyce programowania od razu w oczy rzuci nam się mnogość pytań typu „Jaki język na początek?”, „Od jakiego języka zacząć?”, „A jaki język lepszy?”, „Czy dla mnie lepszy będzie X czy jednak Y?”.  No to w…

\n
Czytaj dalejJaki język na początek?
\n

Artykuł Jaki język na początek? pochodzi z serwisu MatRog.pl.

2018-05-14 18:36:23 jaki-jezyk-na-poczatek cjjyg7b2w0011i3umc74cg6xw 2018-05-14 18:36:23 2018-05-14 18:36:23 @@ -2302,6 +2333,7 @@ cjhqo1sw8012vi3um1p7yf64h Plany na czerwiec https://matrog.pl/plany-na-czerwiec/ cjhvnqehs0137i3um4s2u05rj Vue! https://matrog.pl/vue/

Ostatnio pojawił się mój post na temat planów na czerwiec. Zawarłem w nim pewnie plany, które chciałbym zrealizować w najbliższych miesiącach. Mimo, że post nosił tytuł „Plany na czerwiec” to więcej planów w nim jest długoterminowych. Ale dosyć o tym, obiecałem w tamtym wpisie, że podzielę się z wami moimi…

\n
Czytaj dalejVue!
\n

Artykuł Vue! pochodzi z serwisu MatRog.pl.

2018-06-01 07:38:52 vue cjjyg7b2w0011i3umc74cg6xw 2018-06-01 07:38:52 2018-06-01 07:38:52 cji5jqugw013ni3um5z7y1lro Nauka Vue #1 – opis projektu https://matrog.pl/nauka-vue-1-opis-projektu/

Skoro już podjąłem decyzję o tym, że będę się uczył Vue, to pora przejść do praktyki. Ale zanim zacznę to przydałaby się odrobina planowania. Nauka Vue tylko przez praktykę Według mnie jedynym efektywnym sposobem na przyswojenie wiedzy z zakresu nowej technologii jest użycie jej w praktyce. Tylko praktyczny projekt pozwoli…

\n
Czytaj dalejNauka Vue #1 – opis projektu
\n

Artykuł Nauka Vue #1 – opis projektu pochodzi z serwisu MatRog.pl.

2018-06-08 05:44:56 nauka-vue-1-opis-projektu cjjyg7b2w0011i3umc74cg6xw 2018-06-08 05:44:56 2018-06-08 05:44:56 cjaihjun400v9i3um9c4ccp56 Jak stworzyć motyw WordPress #012 – Archiwa https://blog.robertorlinski.pl/2017/11/27/archiwa/ W jednym z ostatnich artykułów poruszyliśmy temat wyświetlenia autora wpisu, daty jego publikacji oraz kategorii, do których został przypisany. Dziś rozszerzymy możliwości wymienionych danych i wyświetlimy wpisy pasujące do poszczególnych filtrów. Zapraszam do lektury! Czego potrzebujemy? Wystarczy jeden plik o nazwie pasującej do tytułu czytanego przez Ciebie wpisu – archive.php. Odpowiada on za zawartość, która […] 2017-11-27 17:46:52 jak-stworzyc-motyw-wordpress-012-archiwa ckig8bkw0000zi3umgy3obxsr 2017-11-27 17:46:52 2017-11-27 17:46:52 +cj80fp4ig00s8i3um3e0o3w9d Destrukturyzacja – Powtórka przed ReactJS #3 http://www.algosmart.pl/destrukturyzacja-powtorka-reactjs-3/

Hermetyzacja, enkapsulacja, polimorfizm czy chociażby tytułowa destrukturyzacja. Długo wymieniać pojęcia, których sama nazwa wystarcza, aby początkującemu włosy stanęły dęba. Skoro zdecydowano się na użycie tak wyszukanej formy językowej, to każdy młody programista słusznie zastanawia się, jakie szataństwo musi się za tym wszystkim kryć. Na całe szczęście, bardzo często okazuje się, że wyszukane nazewnictwo niewiele ma […]

\n

Artykuł Destrukturyzacja – Powtórka przed ReactJS #3 pochodzi z serwisu AlgoSmart.

2017-09-25 17:15:43 destrukturyzacja-powtorka-przed-reactjs-3 cjv6u59zk000wi3um4vfceqqt 2017-09-25 17:15:43 2017-09-25 17:15:43 ck7otkgls01xoi3umehfffuyb Zabawy z Canvas API ⌨️ hello roman #99 https://www.youtube.com/watch?v=e4sJm3sBQ48 Canvas API to jedno z ciekawszych i kreatywnych „miejsc” w naszej przeglądarce. Za jego pomocą wybitni developerzy tworzą strony zdobywające nagrody na prestiżowych konkursach. Zazwyczaj nasza wyobraźnia jest dużo bardziej ograniczona niż jego możliwości, dlatego zachęcam Was do zabawy z tym narzędziem. Nie tylko po to, aby stworzyć coś kreatywnego, ale przede wszystkim dlatego, że w Canvasie możemy się sporo dowiedzieć o samym JavaScript-cie. \n\nUzyskaj dostęp do wszystkich moich kursów za 99 zł na miesiąc: \r\n⭐️ Kurs React od podstaw - https://eduweb.pl/programowanie-i-www/reactjs/react-od-podstaw?ref=helloroman\r\n⭐️ Kurs React w praktyce - https://eduweb.pl/programowanie-i-www/reactjs/react-w-praktyce?ref=helloroman\r\n⭐️ Kurs React zaawansowany - https://eduweb.pl/programowanie-i-www/reactjs/react-techniki-zaawansowane?ref=helloroman\r\n⭐️ Wprowadzenie do Gatsby.js - https://eduweb.pl/programowanie-i-www/reactjs/gatsby-generator-react?ref=helloroman\r\n\r\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\r\n\r\n📌 Sprawdź też:\r\nInstagram - http://instagram.com/siemaroman\r\nFacebook - https://facebook.com/helloroman.vlog\r\nMoja strona - https://helloroman.com\r\n\r\n✉️ Kontakt - helloroman.vlog@gmail.com\r\n\r\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2020-03-12 14:00:10 zabawy-z-canvas-api-keyboard-hello-roman-99 ckiswuz9s0017i3um5mg4h7q1 2020-03-12 14:00:10 2020-03-12 14:00:10 ck7ytngtc01y2i3um278wecna Romanie mam pytanie 🎉 hello roman #100 https://www.youtube.com/watch?v=VejAvdYH88U Lista pytań z czasówkami:\nCzy grasz w gry? 4:03\nCzy myślałem kiedyś o zmianie języka programowania 4:55\nJaki staż jest odpowiedni, żeby zacząć pracę zdalną? 6:27\nJaki miałeś największy przypał w szkole? 7:43\nCzy zawsze kiedy wskakujesz do dużego projektu rozwijanego od dłuższego czasu to czujesz, że nic nie rozumiesz? 8:06\nW jaki sposób przydzielacie fragmenty kodu do napisania przez juniora, regulara i seniora? 9:12\nDlaczego golisz głowę i udajesz, że jesteś łysy? 10:52\nCzy nadal dokucza Ci imposter syndrome? 11:09\nZ jakich wzorców projektowych korzystasz? 11:57\nGdzie szukać małych, komercyjnych projektów do pracy zdalnej – chodzi o zlecenia typu „dopasuj zdjęcia i szablon w Wordpress za 20$”? 12:37\nJak zbudować swoje portfolio? Na co zwrócić uwagę i jak sensownie ująć to w CV? Czy kalkulator i ToDo lista są przeklęte? 13:35\nGdybyś miał wybrać jeszcze raz swoją ścieżkę w IT, wybrałbyś znowu frontend? 14:30\nJak podchodziłeś do problemów na początku nauki? Próbowałeś je rozwiązać za wszelką cenę czy unikałeś ich? 15:58\nNa jakiej zasadzie dobierasz technologie do projektów? 17:28\nCzy planujesz adoptować jeszcze jakiegoś zwierzaka? 19:20\nKto jest Twoim ulubieńcem – Fava, Basia czy Józef? 19:35\nMożesz powiedzieć więcej na temat Twojej platformy pod kątem technologicznym? 20:25\nDlaczego nie lubisz Wordpressa i twierdzisz, że umiera? 21:05\nKiedy jest ten moment, że wiesz, że masz wystarczającą wiedzę aby uczyć innych? 22:00\nCzy uważasz siebie lub Anię za bardzo wrażliwe osoby? 23:12\nCzy jest wśród tej setki jakiś odcinek, który dziś zrobiłbyś inaczej? 23:48\nDużo się mówi o tym, jak ma się rozwijać junior, a co z midem? Jak wygląda dalsza ścieżka? 24:25\nWasze sposoby na zostanie w domu? 25:01\nZamierzasz robić apki mobile? Planujesz naukę Fluttera lub React Native? 25:55\nGdzie widzisz siebie za 5 lat? 26:17\nCzy jest coś z JSa czego nigdy nie możesz zapamiętać/zrozumieć do końca? 27:02\nGdybyś mógł usunąć jedną rzecz z JavaScriptu to co by to było? 28:08\nW czym poza skillami filmowymi, w życiu zawodowym i prywatnym rozwinęło Cię prowadzenie vloga? 29:30\nZastanawiałeś się kiedyś co byś robił gdyby nie programowanie? 30:40\nMyślałeś nad prowadzeniem kanału po angielsku? 31:56\nJak udaje Ci się dzielić czas pomiędzy pracę, remont, kanał, naukę, żonę i zwierzaki? 32:30\nCzy nauka Vue się opłaca jeśli niedługo wychodzi Vue 3? Czy czekasz na premierę? 32:50 \nCzy TypeScript bardziej spowalnia czy pomaga na froncie? 33:30\nJak to jest być człowiekiem, który zainspirował mnóstwo ludzi do programowania? 34:25\nCzy pojawi się kurs JavaScript na Twojej platformie? 35:25\nCzemu nie robisz kariery w muzyce? Po instastory patrząc – jest potencjał? 36:27\nCzy nie myślałeś żeby zacząć pracować z jakiegoś fajnego miejsca na ziemi? 37:27\nCzy opłaca się uczyć Pythona pod webdev, czy brać się za JavaScript? 38:15\nCzy doświadczyłeś kiedyś „specjalnego traktowania” dzięki swojej rozpoznawalności? 38:46\nCzy mogę wrzucić projekt z Twojego kursu do swojego portfolio? 39:52\n\nUzyskaj dostęp do wszystkich moich kursów za 99 zł na miesiąc: \r\n⭐️ Kurs React od podstaw - https://eduweb.pl/programowanie-i-www/reactjs/react-od-podstaw?ref=helloroman\r\n⭐️ Kurs React w praktyce - https://eduweb.pl/programowanie-i-www/reactjs/react-w-praktyce?ref=helloroman\r\n⭐️ Kurs React zaawansowany - https://eduweb.pl/programowanie-i-www/reactjs/react-techniki-zaawansowane?ref=helloroman\r\n⭐️ Wprowadzenie do Gatsby.js - https://eduweb.pl/programowanie-i-www/reactjs/gatsby-generator-react?ref=helloroman\r\n\r\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\r\n\r\n📌 Sprawdź też:\r\nInstagram - http://instagram.com/siemaroman\r\nFacebook - https://facebook.com/helloroman.vlog\r\nMoja strona - https://helloroman.com\r\n\r\n✉️ Kontakt - helloroman.vlog@gmail.com\r\n\r\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2020-03-19 14:00:12 romanie-mam-pytanie-hello-roman-100 ckiswuz9s0017i3um5mg4h7q1 2020-03-19 14:00:12 2020-03-19 14:00:12 ck88tqfhc01yii3um6mdw4uo5 Proces rekrutacyjny – jak wygląda rekrutacja zdalna cz. 1⌨️ hello roman #101 https://www.youtube.com/watch?v=oLZds1eb04g Udało się! W końcu przeprowadziłem wywiady na temat zdalnej rekrutacji z ekipą z mojej pracy. Magda – którą mogliście już poznać przy okazji odcinka traktującego generalnie o rekrutacji, odpowie nam dzisiaj jak wygląda pierwszy etap rekrutacji programisty i co sądzi o zdalnej rekrutacji, która w Polsce nadal jest egzotyką. Natomiast Piotrek, Senior Frontend Developer opowie o tym jak sprawdza kod w zadaniach rekrutacyjnych i repozytoriach kandydatów, oraz na czym warto się skupić podczas sesji pair programmingu. \n\nOdcinek powstał we współpracy z Netguru 🚀\nSprawdź FAQ dotyczące rekrutacji dla developerów – https://hubs.ly/H0nSbV70\n\nNawigacja po pytaniach:\n4:30 Czy przy rekrutacji online łatwiej ukryć swoje „niedoskonałości”\n7:30 Na czym polega pierwszy etap rekrutacji – wywiad z rekruterem\n9:00 Kim jest osoba, która nie pasuje do zespołu?\n11:40 Dziwne sytuacje podczas rekrutacji zdalnej \n17:20 Czy trzeba mieć certyfikat z języka angielskiego?\n19:40 Czy wykształcenie wpływa na szanse kandydata?\n22:30 Czy osoby w okolicach 35-40 lat mają szanse na pracę jako junior?\n26:45 Czy Magda woli rekrutację online czy offline?\n29:22 Czy zawsze trzeba wykonywać zadanie rekrutacyjne?\n32:20 Jak wygląda sprawdzanie zadania rekrutacyjnego / projektu kandydata?\n35:27 Czy jeśli mam projekt w Vue to mogę go dać na rekrutację Reacta?\n36:25 Czy masz listę niewybaczalnych błędów w kodzie?\n39:15 Jak wygląda pair programming podczas rekrutacji?\n44:30 Czy zdarzyło się, że ktoś się poddał podczas pair programmingu?\n\nUzyskaj dostęp do wszystkich moich kursów za 99 zł na miesiąc: \r\n⭐️ Kurs React od podstaw - https://eduweb.pl/programowanie-i-www/reactjs/react-od-podstaw?ref=helloroman\r\n⭐️ Kurs React w praktyce - https://eduweb.pl/programowanie-i-www/reactjs/react-w-praktyce?ref=helloroman\r\n⭐️ Kurs React zaawansowany - https://eduweb.pl/programowanie-i-www/reactjs/react-techniki-zaawansowane?ref=helloroman\r\n⭐️ Wprowadzenie do Gatsby.js - https://eduweb.pl/programowanie-i-www/reactjs/gatsby-generator-react?ref=helloroman\r\n\r\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\r\n\r\n📌 Sprawdź też:\r\nInstagram - http://instagram.com/siemaroman\r\nFacebook - https://facebook.com/helloroman.vlog\r\nMoja strona - https://helloroman.com\r\n\r\n✉️ Kontakt - helloroman.vlog@gmail.com\r\n\r\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2020-03-26 14:00:12 proces-rekrutacyjny-jak-wyglada-rekrutacja-zdalna-cz-1keyboard-hello-roman-101 ckiswuz9s0017i3um5mg4h7q1 2020-03-26 14:00:12 2020-03-26 14:00:12 @@ -2400,7 +2432,6 @@ cix782un4006hi3umc7j5f5zh Docker#2 – Docker-compose https://fsgeek.pl/2016/12/ cixbierrc006ii3umhrfj61b3 Plany na rok 2017 https://fsgeek.pl/2016/12/30/plany-na-rok-2017/

Rok 2017 zbliża się nieubłaganie. Jest o taka magiczna data od której ludzie chcą coś zmienić w swoim życiu. W sumie tradycją się już stało aby w Sylwestra robić sobie postanowienia noworoczne. Ja zapraszam dzisiaj na moje własne blogowe postanowienia noworoczne.

\n\n

Postanowienia na rok 2017

\n\n

Moim głównym postanowieniem na nadchodzący rok jest dalsze prowadzenie niniejszego bloga. W sumie jest to wszystko co chcę sobie postanowić i chciałbym się tego trzymać. Lepiej mniej  i spełnić niż zrobić sobie dużo postanowień i większości nie dopełnić. Dużo więcej mam planów dotyczących tego bloga w szczególności wpisów i nowych serii. Chciałbym aby ten blog się dalej rozwijał i oferował ciekawe artykuły.  Tak więc co nas czeka w przyszłym roku?

\n\n

Plany na rok 2017

\n\n

Tak naprawdę to podczas pisania pojedynczego artykułu mam pomysł na parę kolejnych a te parę pomysłów, które wypisuję poniżej pojawia się w nich tak często, że są już prawie w etapie realizacji. Tak więc oto jakie nowe serie planuję na ten rok:

\n\n
    \n
  1. Angular 2
    2. \n
  2. Symofny 3
    3. \n
  3. Vue.js
    4. \n
  4. ASP.NET MVC 5
    5. \n
  5. MySQL dla opornych
    6. \n
\n\n

To są na razie planowane serie i pewnie pojawi się sporo niezaplanowanych jeśli jakiś temat mnie zainteresuje. Oprócz tych serii poważnie się zastanawiam nad udziałem w następnej edycji konkursu Daj Się Poznać (link TUTAJ). Myślę, że to może być niezły sposób na sprawdzenie siebie .

\n\n

 

\n\n

A w nowym roku życzę wszystkim aby rok 2017 był lepszy od poprzedniego a już na pewno nie gorszy. Trzymajcie się ciepło i wróćcie tutaj w styczniu na nowe artykuły.

2016-12-30 08:00:21 plany-na-rok-2017 ckhxjb6o0000yi3umb3hg09jv 2016-12-30 08:00:21 2016-12-30 08:00:21 cixh865nk006ki3um2i88futv Symfony#1 – Konfiguracja na Dockerze https://fsgeek.pl/2017/01/03/konfiguracja_symfony_na_dockerze/

W ostatnim wpisie  stworzyliśmy wszystkie potrzebne kontenery aby móc na nich postawić aplikację w Symfony.  Dziś dokończymy to co zaczęliśmy w ostatnim wpisie(jeśli go ominęliście to znajdziecie go TUTAJ). Aktualnie Symfony jest chyba najbardziej popularnym frameworkiem php’owym, którego najnowsza wersja nosi cyfrę 3. Według oficjalnej dokumentacji  najlepszym sposobem na rozpoczęcie zabawy z Symfony jest skorzystanie z oficjalnego instalatora. Dzięki niemu możemy sobie wybierać, którą wersję Symfony chcemy użyć i szybko stworzyć projekt.

\n\n

Konfiguracja Symfony  w Dockerze

\n\n

Aby to wszystko działało z naszymi kontenerami musimy umieścić nasze pliki Symfony w katalogu, który skonfigurowaliśmy w docker-compose.yml w sekcji application>volumes. Jeśli tak zrobicie to po wejściu na adres ip maszyny na porcie 8001 (jest to port na którym wystawiliśmy serwer nginx)  maszyny powinniście zobaczyć następujący widok.

\n\n

Symfony_ekran_powitalny

\n\n

Jeśli wyświetla wam się komunikat** File not found** to pierwsze co powinniście sprawdzić to czy foldery zostały odpowiednio podmontowane. Żeby to sprawdzić zalogujcie się na kontener php i zobaczcie czy widzicie wszystkie pliki w /var/www/symfony. Jeśli nie to znaczy, że katalog nie został podmontowany. U mnie pomogło puszczenie jeszcze raz docker-machine-nfs dla używanej maszyny. Jeśli nie korzystacie z docker-machine-nfs  lub macie inne problemy to piszcie to może uda nam się razem znaleźć rozwiązanie problemu

\n\n

Wygląda na to że wszystko działa jednak trzeba pamiętać że podczas tworzenia oprogramowania najwięcej czasu spędzicie w trybie developmentu. Aby do niego wejść należy dopisać do adresu /app_dev.php/.  Jak wejdziecie na ten adres to powinniście zobaczyć taki komunikat

\n\n

_You are not allowed to access this file. Check appdev.php for more information.

\n\n

Aby to naprawić musimy się udać do pliku web/app_dev.php. Za nasz komunikat odpowiada ten kawałek kodu

\n\n
if (isset($_SERVER['HTTP_CLIENT_IP'])\n\n    || isset($_SERVER['HTTP_X_FORWARDED_FOR'])\n\n    || !(in_array(@$_SERVER['REMOTE_ADDR'], ['127.0.0.1', '::1']) || php_sapi_name() === 'cli-server')\n\n) {\n\n    header('HTTP/1.0 403 Forbidden');\n\n    exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.');\n\n}
\n\n

Aby się go pozbyć najłatwiej jest zakomentować ten odcinek kodu. Teraz wróćmy do strony. Powinniśmy znowu widzieć nasz ekran powitalny ale z dodatkowym paskiem na dole ekranu.

\n\n

Symfony_profiler

\n\n

Jest to tak zwany pasek profilera. Jest to bardzo użyteczne narzędzie z którego będziecie korzystać częściej niż ze strony. Jego pełną wersję można znaleźć pod adresem /app_dev.php/_profiler. Powinniście zobaczyć błąd związany z przechowywaniem sesji.

\n\n

Dla naszych celów wystarczy jak przejdziemy do pliku_ app/config/config.yml_ i znajdziemy opcje session. Aby działało wystarczy że zakomentujemy te dwie linie

\n\n
handler_id:  session.handler.native_file\nsave_path:   "kernel.root_dir%/../var/sessions/kernel.environment%"\n\n
\n\n

i zamiast nich wpiszemy coś takiego

\n\n
handler_id: ~
\n\n

I voil’a teraz wszystko powinno działać.

\n\n

W następnym wpisie pokaże jak skonfigurować symfony by działał jako REST serwer.

2017-01-03 08:00:20 symfony1-konfiguracja-na-dockerze ckhxjb6o0000yi3umb3hg09jv 2017-01-03 08:00:20 2017-01-03 08:00:20 cixpstp34006li3um7wn5djeb Symfony#2 – Serwer REST https://fsgeek.pl/2017/01/09/symfony_rest/

Ostatnimi czasy widzę rosnący trend rozdzielania części frontowej i backendowej aplikacji internetowej. Takie rozdzielenie warstw pozwala na dużą elastyczność w projektowaniu aplikacji. Część backendowa jest aktualnie sprowadzona do serwera REST na który wysyła się zapytania z części frontowej. Dziś chciałbym krótko pokazać jak stworzyć w Symofny taki prosty serwer REST. Będę go potem wykorzystywał w cyklach dotyczących framework’ów frontendowych.

\n\n

Symfony REST

\n\n

Symfony jest doskonale przystosowany do pełnienia roli serwera REST. Do takiego serwera wysyłane są tylko 4 główne  metody:

\n\n
    \n
  • GET
    • \n
  • POST
    • \n
  • PUT
    • \n
  • DELETE
    • \n
\n\n

Aby stworzyć taki serwer w Symofny musimy zainstalować dwa nowe pakiety:

\n\n
    \n
  • FOSRestBundle
    • \n
  • JMSSerializerBundle
    • \n
\n\n

Aby je zainstalować to najlepiej wejść do kontenera php i wpisać następujące komendy

\n\n
composer require friendsofsymfony/rest-bundle
\n\n

 

\n\n

oraz

\n\n
composer require jms/serializer-bundle
\n\n

Pierwsza biblioteka pozwala definiować teraz kontrolery w sposób REST’owy tzn w nazwie funkcji musimy teraz pisać nazwę metody jaką będziemy się do funkcji odwoływać np. getUsers. Automatycznie też jest tworzona ścieżka pod którą będzie można się odwołać.  Jednak aby to wszystko działało musimy wykonać minimum wysiłku w postaci konfiguracji.

\n\n

Ja osobiście korzystam z takiej minimalnej konfiguracji w której wskazuję, że formatem którego będę używać będzie json

\n\n
fos_rest:\n    routing_loader:\n        default_format: json\n        include_format: false\n    body_listener: true\n    format_listener:\n        rules:\n            - { path: '^/api', priorities: ['json'], fallback_format: json, prefer_extension: false }\n            - { path: '^/', stop: true }\n    param_fetcher_listener: true\n    view:\n        view_response_listener: 'force'\n        formats:\n            json: true
\n\n

 

\n\n

Jednak to nie wszystko. Musimy jeszcze zmienić konfiguracje routingu. Aby to zrobić musimy wejść w app/config/routing.yml i usunąć to co tam jest. Od teraz będziemy definiować sami z jakich kontrolerów będą tworzone ścieżki URL. Innymi słowy jeśli jakiegoś kontrolerra nie umieścimy w tym pliku to nie będzie dostępne w postaci endpointu dla części frontendowej. Nowe kontrolery definiujemy w następujący sposób:

\n\n
Nazwa (ja osobiście tam daję nazwę kontrolera):\n\nresource: Scieżka do controllera\n\ntype:rest\n\nprefix:/api
\n\n

Opcja prefix powoduje , że każda wygenreowna ścieżka będzie poprzedzona wpisaną tam wartością.  Resource jest to ścieżka do kontroleraTeraz jak jest już wszystko zrobione możemy stworzyć nasz pierwszy REST’owy kontroler. Ja stworze kontroler o nazwie TestController i stworzę go w ścieżce Controller/API/. Wtedy mój nowy kontroler w pliku routing będzie wyglądał następująco:

\n\n
test:\n\nresource:AppBundle\\Controller\\API\\TestController\n\ntype:rest\n\nprefix:/api
\n\n

No to teraz zajmijmy się właściwym kontrolerem. Najwazniejsze jest żeby nasza nowa klasa dziedziczyła po  FOSRestController . Teraz wystarczy tworzyć nowe funkcje w naszej klasie i będą się one tworzyły jako nowe endpointy. Przykładowy plik przedstawiam poniżej.

\n\n
<?php\n\nnamespace AppBundle\\Controller\\API;\n\nuse FOS\\RestBundle\\Controller\\FOSRestController;\n\nclass TestController extends FOSRestController\n{\n    public function getTestsAction()\n    {\n        return array(\n            'typ' => 'blog',\n            'nazwa' => array(\n                "FSGeek",\n                "Full Stack Geek",\n            ),\n        );\n    }\n\n}
\n\n

 

\n\n

Czy to działa?

\n\n

Jednak jak teraz sprawdzić czy wszystko działa? Ja korzystam z narzędzia Postman, które pozwala wysyłać zapytania pod dostępne adresy naszego sewrwera i sprawdzać co otrzymamy z nich. Żeby zobaczyć jakimy endpointami dysponujemy należy wpisać w kontenerze php następujące polecenie:

\n\n
bin/console debug:router
\n\n

Wyświetla ono wszystkie dostępne  adresy w naszej aplikacji. W moim przypadku na dole listy pojawił się taki wpis.

\n\n

\n\n

I ten adres wpiszę do Postmana , wybiorę metodę GET i wyślę zapytanie.  Na poniższym zrzucie widać efekt tego zapytania jeśli wszytsko działa.

\n\n

\n\n

Zapraszam do samodzielnego eksperymentowania i tworzenia własnych kontrolerów.

\n\n

W następnym wpisie zajmę się jeszcze jak stworzyć własną tabelę w bazie danych oraz jak pobierać i zapisywać w niej informacje.

2017-01-09 08:00:40 symfony2-serwer-rest ckhxjb6o0000yi3umb3hg09jv 2017-01-09 08:00:40 2017-01-09 08:00:40 -cj80fp4ig00s8i3um3e0o3w9d Destrukturyzacja – Powtórka przed ReactJS #3 http://www.algosmart.pl/destrukturyzacja-powtorka-reactjs-3/

Hermetyzacja, enkapsulacja, polimorfizm czy chociażby tytułowa destrukturyzacja. Długo wymieniać pojęcia, których sama nazwa wystarcza, aby początkującemu włosy stanęły dęba. Skoro zdecydowano się na użycie tak wyszukanej formy językowej, to każdy młody programista słusznie zastanawia się, jakie szataństwo musi się za tym wszystkim kryć. Na całe szczęście, bardzo często okazuje się, że wyszukane nazewnictwo niewiele ma […]

\n

Artykuł Destrukturyzacja – Powtórka przed ReactJS #3 pochodzi z serwisu AlgoSmart.

2017-09-25 17:15:43 destrukturyzacja-powtorka-przed-reactjs-3 cjv6u59zk000wi3um4vfceqqt 2017-09-25 17:15:43 2017-09-25 17:15:43 cj8ae604o00soi3umgs135rx5 Spread, rest i default – Powtórka przed ReactJS #4 http://www.algosmart.pl/spread-rest-default-powtorka-reactjs-4/

Funkcje wykorzystujące tablice to chleb powszedni każdego programisty JavaScript. Mając to na uwadze, komitet TC39 zatroszczył się o wprowadzenie kilku użytecznych usprawnień, które rozszerzają nasze możliwości. Oprócz nowinek, zastąpimy stare rozwiązania bardziej eleganckim kodem. Panie i Panowie, oto bohaterowie dzisiejszego wpisu: spread, rest i default. Jako że tematyka jest stosunkowo prosta i intuicyjna, to skoncentruje […]

\n

Artykuł Spread, rest i default – Powtórka przed ReactJS #4 pochodzi z serwisu AlgoSmart.

2017-10-02 16:30:33 spread-rest-i-default-powtorka-przed-reactjs-4 cjv6u59zk000wi3um4vfceqqt 2017-10-02 16:30:33 2017-10-02 16:30:33 cj8kff4jk00szi3um4faqaoij Obietnice – Powtórka przed ReactJS #5 http://www.algosmart.pl/obietnice-powtorka-przed-reactjs-5/

Obiecuję, że po przeczytaniu tego wpisu, Wasz kod asynchroniczny stanie się bardziej czytelny. Skąd taka pewność siebie? A no, społeczność JavaScript od dwóch lat zachęca do jak najczęstszego składnia obietnic. Spokojnie, to nadal powtórka przed ReactJS, a nie zapowiedź mojego startu w plebistycie na najlepszego blog front-endowy. Na to przyjdzie czas wiosną 2018 roku #DSP […]

\n

Artykuł Obietnice – Powtórka przed ReactJS #5 pochodzi z serwisu AlgoSmart.

2017-10-09 17:03:20 obietnice-powtorka-przed-reactjs-5 cjv6u59zk000wi3um4vfceqqt 2017-10-09 17:03:20 2017-10-09 17:03:20 cj8ynkhww00tei3um80am05bl Moduły ES6 – Powtórka przed ReactJS #6 http://www.algosmart.pl/moduly-powtorka-przed-reactjs-6/

Brak wbudowanego systemu modułów w JavaScript stanowił problem od dawien dawna. Różne wzorce projektowe i techniki stanowiły zastępcze rozwiązanie problemu. Najpopularniejsze z nich to moduły opakowane w biblioteki, loader RequireJS, wstrzykiwanie zależności w AngularJS oraz powszechnie uznawany król – CommonJS. To właśnie w oparciu o CommonJS zaimplementowano natywną funkcjonalność w ramach specyfikacji ES6. Problematyczne moduły […]

\n

Artykuł Moduły ES6 – Powtórka przed ReactJS #6 pochodzi z serwisu AlgoSmart.

2017-10-19 16:00:14 moduly-es6-powtorka-przed-reactjs-6 cjv6u59zk000wi3um4vfceqqt 2017-10-19 16:00:14 2017-10-19 16:00:14 @@ -2409,6 +2440,7 @@ cj9naqlio00u8i3umg9mw12qd Zakresy – Powtórka przed ReactJS #7 http://www.algo cja1fz9lk00uni3um1o0c80wo Domknięcia – Powtórka przed ReactJS #8 http://www.algosmart.pl/domkniecia-powtorka-reactjs-8/

Zacznijmy od spraw natury czysto organizacyjnej. Od dnia dzisiejszego, wpisy z serii Powtórka przed ReactJS, będą miały odmienną formę niż dotychczas. Do tej pory skupiałem się na kompleksowym omawianiu wybranych zagadnień. Takie podejście miało liczne zalety w zakresie opracowania najistotniejszych fragmentów specyfikacji ES6. Mamy końcówkę 2017 roku, a mimo to nadal trudno wskazać wyczerpujące i […]

\n

Artykuł Domknięcia – Powtórka przed ReactJS #8 pochodzi z serwisu AlgoSmart.

2017-11-15 19:30:47 domkniecia-powtorka-przed-reactjs-8 cjv6u59zk000wi3um4vfceqqt 2017-11-15 19:30:47 2017-11-15 19:30:47 cjaf5hdug00v4i3um5c2td1lu Wskaźnik this – Powtórka przed ReactJS #9 http://www.algosmart.pl/wskaznik-this-powtorka-reactjs-9/

Wskaźnik this stanowi fundament programowania zorientowanego obiektowo. Niestety, w przypadku JavaScript, jest jedną z najbardziej zagmatwanych części języka. Zarówno początkujący, jak i weterani innych języków programowania, będą mieli wiele okazji do złapania się za głowę. W przeciwieństwie do Javy i C#, wartość this nie zawsze wiąże się z obiektem/funkcją zawierającą to słowo kluczowe. Wskaźnik this […]

\n

Artykuł Wskaźnik this – Powtórka przed ReactJS #9 pochodzi z serwisu AlgoSmart.

2017-11-25 09:45:43 wskaznik-this-powtorka-przed-reactjs-9 cjv6u59zk000wi3um4vfceqqt 2017-11-25 09:45:43 2017-11-25 09:45:43 cjb10m5aw00vzi3umhrz4czz4 Zawód: Programista – recenzja książki http://www.algosmart.pl/zawod-programista-recenzja

Książkę Zawód: Programista: Wszystko, czego potrzebuje świadomy developer autorstwa Macieja Aniserowicza nabyłem w przedsprzedaży. Wystarczy zerknąć na świetne wyniki sprzedażowe, aby zdać sobie sprawę, jak wielu programistów darzy zaufaniem autora bloga devstyle.pl. Byłem ciekaw, jak Zawód: Programista wypadnie na tle Dev Career Guide Johna Sonmeza. Autorzy postawili sobie dokładnie ten sam cel: stworzyć kompletny przewodnik […]

\n

Artykuł Zawód: Programista – recenzja książki pochodzi z serwisu AlgoSmart.

2017-12-10 17:00:23 zawod-programista-recenzja-ksiazki cjv6u59zk000wi3um4vfceqqt 2017-12-10 17:00:23 2017-12-10 17:00:23 +cjczvdmnk00xqi3umafjc1d49 Zapraszam na mój kurs video http://www.induweb.pl/zapraszam-moj-kurs-video/

Opublikowałem już pierwszy odcinek mojego nowego kursu: Zakoduj BLOG od zera. Zapraszam wszystkich początkujących frontendowców do oglądania na http://frontendy.pl/video/01-zakoduj-blog-od-zera-wprowadzenie/

\n

The post Zapraszam na mój kurs video appeared first on Induweb.

2018-01-29 07:05:26 zapraszam-na-moj-kurs-video cjczvdmnk000hi3umdr1lf9nt 2018-01-29 07:05:26 2018-01-29 07:05:26 cjbgqmouw00w9i3umfonm892k Prototypy i dziedziczenie – Powtórka przed ReactJS #10 http://www.algosmart.pl/prototypy-dziedziczenie-powtorka-reactjs-10/

Przypuśćmy, że naszym dzisiejszym celem jest usprawnienie masowej produkcji krzeseł. Dziedziczenie klasowe Postrzegając ten problem przez pryzmat języków obiektowych zorientowanych na klasy, zanim przejdziemy do wytwarzania, musimy przygotować specyfikację produktu. Rolę specyfikacji będzie stanowiła klasa Krzesło. Zamieścimy w niej wszystkie właściwości i funkcjonalności krzeseł, które będziemy produkować. Najpierw skupimy się na najprostszym modelu, jaki przychodzi […]

\n

Artykuł Prototypy i dziedziczenie – Powtórka przed ReactJS #10 pochodzi z serwisu AlgoSmart.

2017-12-21 17:05:11 prototypy-i-dziedziczenie-powtorka-przed-reactjs-10 cjv6u59zk000wi3um4vfceqqt 2017-12-21 17:05:11 2017-12-21 17:05:11 cjc4se00800wui3umhrpdcflq Programowanie funkcyjne – Powtórka przed ReactJS #11 http://www.algosmart.pl/programowanie-funkcyjne-powtorka-reactjs-11/

Dzisiaj przyjrzymy się, czym tak naprawdę zajmują się koderscy hipsterzy. Programowanie funkcyjne to najpopularniejsza alternatywa dla programowania obiektowego. W ostatnich latach zdobywa coraz większą popularność. Wbrew pozorom wywołanym przez ten hype, samo programowanie funkcyjne nie jest niczym nowym. Ten paradygmat istnieje od dziesięcioleci. Do tej pory był używany przede wszystkim w środowiskach akademickich. Jego popularność […]

\n

Artykuł Programowanie funkcyjne – Powtórka przed ReactJS #11 pochodzi z serwisu AlgoSmart.

2018-01-07 13:00:53 programowanie-funkcyjne-powtorka-przed-reactjs-11 cjv6u59zk000wi3um4vfceqqt 2018-01-07 13:00:53 2018-01-07 13:00:53 cjctj4p8o00xki3umdxpwfdob 6 powodów, dla których wybrałem Reacta http://www.algosmart.pl/6-powodow-dla-ktorych-wybralem-reacta

Przez długi czas zastanawiałem się nad wyborem technologii, za którą zabiorę się po opanowaniu JavaScript. Dla osoby tak podatnej na przesadne analizowanie dostępnych możliwości, podjęcie ostatecznej decyzji nie było łatwe. Dlaczego wybrałem Reacta, zamiast królującego na polskim rynku pracy Angulara lub wschodzącej gwiazdy Vue.js? W oparciu o zrobiony research oraz moje wrażenia po niespełna miesiącu […]

\n

Artykuł 6 powodów, dla których wybrałem Reacta pochodzi z serwisu AlgoSmart.

2018-01-24 20:35:57 6-powodow-dla-ktorych-wybralem-reacta cjv6u59zk000wi3um4vfceqqt 2018-01-24 20:35:57 2018-01-24 20:35:57 @@ -2424,6 +2456,7 @@ cjgb6bwdc0113i3um1zz1fei9 Stylowanie w React – PPwRJS #8 http://www.algosmart. cjh4k7hmo0125i3umg9ve1mb8 Cykl życia komponentu – PPwRJS #9 http://www.algosmart.pl/cykl-zycia-komponentu

W czym każdy z nas, programistów, przypomina komponent React? Człowiek przechodzi przez dzieciństwo, dojrzałość i starość. Tak się składa, że bardzo podobny cykl życia charakteryzuje komponenty. Możemy w ich przypadku wydzielić okresy Mounting (dzieciństwo), Updating (dojrzałość) i Unmounting (starość). Taki systematyczny podział, wspólny dla każdego przedstawiciela swojego rodzaju, pozwala podzielić obowiązki, którym każda jednostka będzie […]

\n

Artykuł Cykl życia komponentu – PPwRJS #9 pochodzi z serwisu AlgoSmart.

2018-05-13 08:30:24 cykl-zycia-komponentu-ppwrjs-9 cjv6u59zk000wi3um4vfceqqt 2018-05-13 08:30:24 2018-05-13 08:30:24 cjhetle60012ji3umgot9fznm Śledzenie kursów kryptowalut czyli AJAX w React – PPwRJS #10 http://www.algosmart.pl/ajax-w-react

Zbliżamy się do zakończenia pracy nad trackerem kryptowalut. Jedyne, czego brakuje do zrealizowania założeń, to wprowadzenie aktualnych danych o kursach z zewnętrznego serwera. Do realizacji tego celu posłuży nam AJAX oraz API CoinMarketCap. React jest biblioteką skoncentrowana na View, stąd na próżno szukać wbudowanego rozwiązania do obsługi asynchronicznego JSa. Otwiera to przed nami szereg możliwości, […]

\n

Artykuł Śledzenie kursów kryptowalut czyli AJAX w React – PPwRJS #10 pochodzi z serwisu AlgoSmart.

2018-05-20 12:50:51 sledzenie-kursow-kryptowalut-czyli-ajax-w-react-ppwrjs-10 cjv6u59zk000wi3um4vfceqqt 2018-05-20 12:50:51 2018-05-20 12:50:51 cjhyw2jn4013di3umcnzkdos7 Co musisz wiedzieć, żeby zacząć testowanie komponentów React? http://www.algosmart.pl/co-musisz-wiedziec-zeby-zaczac-testowanie-komponentow-react

Wprowadzenie testów to najlepszy sposób na podniesienie jakości i niezawodności tworzonego przez Ciebie oprogramowania. Jak pokazała przeprowadzona przeze mnie ankieta, czytelnicy bloga świetnie zdają sobie sprawę. Mimo najlepszych chęci, pierwsze kroki w świecie testowania mogą być przytłaczające. Terminologia, konfiguracja środowiska, o samym pisaniu testów nie mówiąc. Tym razem udowadniam, że to żadne rocket science. Po […]

\n

Artykuł Co musisz wiedzieć, żeby zacząć testowanie komponentów React? pochodzi z serwisu AlgoSmart.

2018-06-03 13:55:34 co-musisz-wiedziec-zeby-zaczac-testowanie-komponentow-react cjv6u59zk000wi3um4vfceqqt 2018-06-03 13:55:34 2018-06-03 13:55:34 +cjiu1rbz4014fi3umgqvv5yx1 Lista materiałów, których potrzebujesz do skutecznej nauki Reacta http://www.algosmart.pl/lista-materialow-ktorych-potrzebujesz-do-skutecznej-nauki-reacta

Stawiasz pierwsze kroki w ekosystemie Reacta? A może początki masz już za sobą, ale część zagadnień jest dla Ciebie problematyczna? Tak się składa, że w czasie wolnym od tworzenia kolejnych komponentów, udało mi się odszukać wiele wartościowych materiałów. Pozwolą Ci na skuteczną naukę, niezależnie od dotychczasowego poziomu umiejętności. Przygotowaną przeze mnie listę podzieliłem na dwie […]

\n

Artykuł Lista materiałów, których potrzebujesz do skutecznej nauki Reacta pochodzi z serwisu AlgoSmart.

2018-06-25 09:15:40 lista-materialow-ktorych-potrzebujesz-do-skutecznej-nauki-reacta cjv6u59zk000wi3um4vfceqqt 2018-06-25 09:15:40 2018-06-25 09:15:40 cixyjynao006mi3um7t8q3cg6 Czym jest Bus Factor? https://fsgeek.pl/2017/01/15/czym-jest-bus-factor/

Czy spotkaliście się kiedyś z określeniem Bus Factor?  Jest to tak zwana miara ryzyka wynikająca z informacji oraz umiejętności niedzielonych pomiędzy członkami zespołu. Innymi słowy jest to liczba osób jakie muszą zostać „przejechane przez autobus” by nie dało się kontynuować projektu.

\n\n

Jak rozumieć Bus Factor?

\n\n

Wyrażenie „przejechane przez autobus” nie należy brać dosłownie. Oznacza ono dowolny losowy przypadek, który może sprawić, że ważna osoba w projekcie zniknie.Załóżmy na przykład, że mamy super ważny, duży projekt którym zajmuje się 10 osób w tym 4 osoby odpowiedzialne za front, 4 odpowiedzialne za backend I 2 osoby odpowiedzialne za utrzymanie całej infrastruktury serwerowej. W przypadku jak znikną 2 osoby odpowiedzialne za serwery może się okazać, że projekt nagle stanie ponieważ nikt inny nie zna się na obsłudze infrastruktury a czas potrzebny na znalezienie, wyszkolenie i wdrożenie nowych osób może być długi I kosztowny.

\n\n

Jak temu zapobiegać?

\n\n

Aby podnieść Bus Factor wystarczy, że wprowadzimy parę drobnych praktyk do naszego projektu. Starajmy się aby osoby w projekcie oprócz swoich normalnych zadań wiedziały też co robią ich koledzy tak by mogli ich zastąpić w razie nieprzewidywalnego wypadku. Rozdzielajmy również zadania na mniejsze rzeczy np.: jeśli wprowadzamy dużą funkcjonalność do naszego projektu to niech jej nie wprowadza jedna osoba tylko kilka.  Dobrym rozwiązaniem jest także utrzymywanie i ciągłe aktualizowanie istniejącej dokumentacji. Dobrze prowadzona dokumentacja może skrócić czas wprowadzania nowych osób do projektu do niezbędnego minimum. Również dobre praktyki programowania, stosowanie wzorców może pomóc wprowadzaniu nowych osób do projektu.

\n\n

Jak widać nie potrzeba wiele by zwiększyć nasz współczynnik a mogą one być ratunkiem w trudnych sytuacjach.Najgorsza możliwa sytuacja to prowadzenie projektu przez jedną osobę. Wtedy Bus Factor wynosi 1 i projekt właściwie może przestać istnieć w wyniku losowego zdarzenia.

\n\n

A jak u was to wygląda? Macie takie projekty, gdzie Bus Factor wynosi 1. A może macie jakieś dobre rozwiązania by temu zapobiegać?

2017-01-15 11:02:30 czym-jest-bus-factor ckhxjb6o0000yi3umb3hg09jv 2017-01-15 11:02:30 2017-01-15 11:02:30 ciy18ckqg006oi3um0hei8j60 Symfony#3 – Operacje na bazie danych https://fsgeek.pl/2017/01/17/symfony3-operacje-na-bazie-danych/

Dziś chciałbym się zająć operacjami na bazie danych w Symfony 3. Są to najbardziej elementarne operacje, które wykonujemy w frameworku backendowym. Symofny ułatwia nam wykonywanie tych operacji o ile właściwie skonfigurujemy. W dockerze, który zbudowaliśmy wcześniej(jeśli ominęliście ten post to znajdziecie go TUTAJ) mamy dostępne pdo_sqllite. Jednak ja preferuję mysql I dlatego zainstaluję dodatkowe pakiety w Dockerze. Cała reszta konfiguracji będzie dla mysql_pdo więc jeśli też chcecie go używać to dopiszcie w pliku docker/php/Dockerfile poniższe linijki:

\n\n
RUN docker-php-ext-install \\\n    opcache \\\n    pdo \\\n    pdo_mysql \\\n    mysqli\n\n\nRUN pecl install apcu apc xcache eacceerator
\n\n

Teraz wystarczy zbudować jeszcze raz kontener php tym poleceniem.

\n\n
docker-compose up -d --build
\n\n

Sprawdzi wszystkie pliki Dockerfile I te które się zmieniły zbuduje na nowo a potem wystartuje je wszystkie.

\n\n

Konfiguracja bazy danych

\n\n

No to skoro mamy już wszystkie potrzebne narzędzia to mozemy skonfigurowac naszą aplikację.  Zaczniemy od pliku app/config/parameters.yml. Widzimy tutaj następujace pozycje

\n\n
parameters:\n    database_host:     127.0.0.1\n    database_port:     ~\n    database_name:     symfony\n    database_user:     root\n    database_password: ~\n\n    mailer_transport:  smtp\n    mailer_host:       127.0.0.1\n    mailer_user:       ~\n    mailer_password:   ~\n\n    secret:            ThisTokenIsNotSoSecretChangeIt
\n\n

Większość rzeczy jest oczywista a ja chciałbym zwrócić uwagę na opcję database_host. Tam musimy umieścić nazwę kontenera z pliku docker-compose.yml gdzie jest konfiuracja naszej bazy danych.

\n\n

Encje

\n\n

W symofny korzystamy z bazy danych przy pomocy tak zwanych encji. Są to klasy, które reprezentują nasze tabele w bazie danych. Można je tworzyć ręcznie lub skorzystać z komend dostarczonych nam przez Symfony. Ta poniższa pozwala na stworzenie nowej Encji

\n\n
bin/console doc:gen:entity
\n\n

Ja w ramach przykładu chcę stworzyć przykładową klasę Task, która będzie, oprócz pola klucza prywatnego, tylko jedno pole name. Jako opcje konfiguracji wybieram annotation ponieważ jestem do nich przyzwyczajony i są dosyć intuicyjne w użyciu. Teraz wystarczy podać konfigurację tej zmiennej w bazie danych i można zakończyć działanie komendy. Cały proces tworzenia encji przeze mnie przedstawiam poniżej

\n\n

symofny_tworzenie_encji

\n\n

Oprócz stworzenia klasy encji komenda stworzyła również plik TaskRepository. W tym pliku będziemy mogli tworzyć bardziej zaawansowane zapytania do naszej bazy danych.  Natomiast nasza encja powinna wyglądać w ten sposób :

\n\n
<?php\n\nnamespace AppBundle\\Entity;\n\nuse Doctrine\\ORM\\Mapping as ORM;\n\n/**\n * Task\n *\n * @ORM\\Table(name="task")\n * @ORM\\Entity(repositoryClass="AppBundle\\Repository\\TaskRepository")\n */\nclass Task\n{\n    /**\n     * @var int\n     *\n     * @ORM\\Column(name="id", type="integer")\n     * @ORM\\Id\n     * @ORM\\GeneratedValue(strategy="AUTO")\n     */\n    private $id;\n\n    /**\n     * @var string\n     *\n     * @ORM\\Column(name="name", type="string", length=255)\n     */\n    private $name;\n\n\n    /**\n     * Get id\n     *\n     * @return int\n     */\n    public function getId()\n    {\n        return $this->id;\n    }\n\n    /**\n     * Set name\n     *\n     * @param string $name\n     *\n     * @return Task\n     */\n    public function setName($name)\n    {\n        $this->name = $name;\n\n        return $this;\n    }\n\n    /**\n     * Get name\n     *\n     * @return string\n     */\n    public function getName()\n    {\n        return $this->name;\n    }\n}\n\n
\n\n

 

\n\n

Synchronizacja encji z bazą danych

\n\n

Po powyższych czynnościach będziemy mieli nową encję jednak w bazie danych nic się jeszcze nie zmieni. Aby to się stało musimy zaktualizować naszą bazę danych  na podstawie zmian w encji. Do tego służy nam następujące polecenie

\n\n
doc:sch:up
\n\n

Można jej wywołać z dodatkowymi flagami:

\n\n

–dump-sql spowoduje wyświetlenie zapytania mysql jakie zostanie wykonane na bazie danych by zsynchronizować ją z encją. Polecam ją wykonywać zawsze zanim zaktualizujecie bazę danych żeby zobaczyć  czy  wykona się to co naprawdę chcemy.

\n\n

\n\n

–force spowoduje wykonanie kodu na bazie danych co zmieni jej strukturę

\n\n

\n\n

Innym sposobem aktualizacji bazy danych jest korzytanie z DoctrineMigrations ale na ten temat opowiem w innym poście.

\n\n

Teraz możemy już wykonywać zapytania REST i wykorzystywać bazę danych do przechowywania danych.  Do nowej encji stworzyłem  kontroler(jeśli nie wiecie jak go stworzyć to zapraszam do poprzedniego postu, znajdziecie go TUTAJ) . Umieściłem w nim 3 przykładowe endpointy:

\n\n
    \n
  • Do pobrania wszystkich rekordów z tabeli
    • \n
  • Pobranie rekordu o podanym id
    • \n
  • Dodanie nowego rekordu
    • \n
\n\n

Łatwo zauważyć, że operacje na bazie danych wykonujemy za pomocą EntityManager’a. Przy pobieraniu podajemy tak naprawdę z jakiej encji chcemy skorzystać a nie tabeli. Wato też zauważyć że przy tworzeniu nowego elementu tworzymy nowy obiekt klasy encji a Symofny sam wie gdzie go zapisać w bazie danych. Zapis do bazy danych odbywa się przy pomocy dwóch funkcji persist() i flush(). Za pomocą persist() informujemy, że będziemy chcieli zapisać ten element a dopiero funkcja flush() wykonuje operacje INSERT na bazie danych.

\n\n

 

\n\n

Zapraszam do testowania na własną rękę możliwości Symofny i testowania swoich endpoint’ow w Postmanie lub innym narzędziu które pozwala na wysyłanie zapytań REST

2017-01-17 08:00:43 symfony3-operacje-na-bazie-danych ckhxjb6o0000yi3umb3hg09jv 2017-01-17 08:00:43 2017-01-17 08:00:43 ciy8dj98g006pi3um0s2f0olw Czym jest Yarn? https://fsgeek.pl/2017/01/22/czym-jest-yarn/

Yarn jest nowym lepszym menadżerem pakietów dla npm. Ile razy słyszeliśmy takie rzeczy? W świecie frontendu średnio raz na tydzień wychodzi nowe lepsze narzędzie, które, jak przekonują nas twórcy, zmieni oblicze programowania. I jak często okazuje się, że po tygodniu zwyczajnie o nim zapominamy bo pojawiło się coś nowego? Więc pewnie zadajecie sobie pytanie czemu zawracam sobie głowę pisaniem o czymś co pewnie zniknie. Ponieważ on nie zniknie tak szybko.

\n\n

Dlaczego Yarn jest wyjątkowy?

\n\n

Jak już wspomniałem na początku Yarn jest menadżerem pakietów na node.js. Jego najważniejszą cechą jest, że rozwija on używany przez wszystkich npm zamiast zastępowania go. Bierze z npm wszytsko to co dobre I dokłada do tego swoje rozwiązania. Jednak zacznijmy od początku.Korzysta on z pliku package.json dzięki czemu przesiadka na niego jest bezbolesna. Oprócz tego mam wrażenie, że dużo szybciej ściąga nowe paczki niż w przypadku użycia npm jednak jest to moja subiektywna opinia. Jednak najlepsza rzecz jaką dodaje Yarn jest plik lockfile. Jest to coś co composer ma już od dawna a co bardzo ułatwia przenoszenie aplikacji pomiędzy komputerami a nawet pomiędzy komputerem lokalnym  a produkcją. W lockfile jest przechowywana informacja temat wersji wszystkich ściągniętych przez nasz paczkach. Dzięki temu na produkcji mamy 100% pewność, że ściągniemy paczki używane przez nas lokalnie. Daje nam to ogromną kontrolę nad tym czego używamy.

\n\n

Podstawy obsługi

\n\n

Obsługa nowego menadżera pakietów jest troszkę inna od npm jednak nie na tyle by było to uciążliwe podczas rozpoczęcia użytkowania go. Jednak aby go użytkować musimy go najpierw zainstalować. Twórcy udostępnili wiele opcji instalacji, które są opisane pod TYM linkiem.

\n\n

Ważne żeby po instalacji ustawić odpowiednią ścieżkę w zmiennych systemowych. Aby sprawdzić czy poprawnie zainstalowaliśmy go należy wywołać następującą komendę

\n\n
yarn --version
\n\n

Poniżej przedstawiam podstawowe komendy, które są często używane podczas pracy z Yarnem

\n\n

yarn add   –> instaluje nowy pakiet (odpowiednik npm install)

\n\n

yarn install –> instaluje wszytskie pakiety używane w projekcie, które są zdefiniowane w package.json

\n\n

yarn run –> uruchamia skrypt z pliku package.json ( odpowiednik npm run)

\n\n

yarn upgrade –> aktualizuje wszystkie zależności w projekcie I tworzy nowy plik yarn.lock

\n\n

 

\n\n

Jak widać zmiana menadżera pakietów może być bezbolesna i co najważniejsze w każdym momencie możemy wrócić do starego systemu. A jak u was wygląda zarządzanie pakietami npm. Korzystacie z oryginalnego, Yarna czy może natrafiliście ostatnio na coś zupełnie nowego co was zachwyciło? Pochwalcie się tym i zapraszam do dyskusji zarówno tutaj jak i na profilu FB.

2017-01-22 08:00:16 czym-jest-yarn ckhxjb6o0000yi3umb3hg09jv 2017-01-22 08:00:16 2017-01-22 08:00:16 @@ -2442,7 +2475,6 @@ cj0dgyxqo009ii3um80l7dobh Czym jest? – Markdown, czyli jak ulepszyć Readme ht cj0j88c2w00a6i3umhuso5up8 WorkTimetable#4 Redux, czyli stwórzmy aplikacje https://fsgeek.pl/2017/03/21/worktimetable-redux/

Do tej pory WorkTimetable był tylko mniej lub bardziej ładnym widokiem. Jednak samym widokiem wiele nie zrobię nie ważne jak dopracowany byłby. Więc żeby mój projekt stał się prawdziwą aplikacją dodałem do niego Redux’a.

\n\n

Czym jest Redux?

\n\n

Redux jest małą biblioteką służącą do zarządzania stanem aplikacji. Wyewoluowała z idei Flux’a, której głównym założeniem jest jednokierunkowy przepływ danych. Polega to na tym, że wszystkie dane przechodzą przez identyczny cykl życia dzięki czemu logika aplikacji jest przewidywalna i łatwa do zrozumienia. Reduxa można w skrócie opisać przy pomocy 3 zasad:

\n\n
    \n
  • \n Pojedyncze źródło prawdy – stan aplikacji jest przechowywany w pojedynczym obiekcie\n
    • \n
  • \n Stan aplikacji można tylko odczytać -jego zmiana może wystąpić tylko w wyniku wywołania akcji, nie możemy bezpośrednio zmienić stanu\n
    • \n
  • \n Zmiany stanu odbywają się przy pomocy czystych funkcji\n
    • \n
\n\n

 Główne elementy Redux’a

\n\n

W Reduxie istnieją 3 główne elementy za pomocą których zarządzamy stanem aplikacji:

\n\n
    \n
  • \n Store – przechowuje stan naszej aplikacji. W całej aplikacji istnieje tylko jeden taki obiekt.\n
    • \n
  • \n Actions – są to akcje wywoływane w aplikacji np.: CREATE_EVENT. Tylko za ich pomocą możemy aktualizować nasz Store.\n
    • \n
  • \n Reducers – są to czyste funkcje, które obsługują akcje. Na podstawie poprzedniego stanu aplikacji oraz wywołanej akcji zwraca nowy stan aplikacji\n
    • \n
\n\n

 Konfiguracja Reduxa w aplikacji

\n\n

Tyle z teorii czas na praktykę. Konfigurację zacząłem od dodania odpowiednich zależności do projektu :

\n\n
 yarn add redux, react-redux, react-router-redux
\n\n

Jednak samo pobranie bibliotek nie sprawi że wszystko zacznie działać więc trzeba dodać trochę kodu. Zacząłem od pliku index.js w którym dodałem następujący kod:

\n\n
let store = createStore(\n\n  reducers,\n\n  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()\n\n  );\n\n \n\nconst history = syncHistoryWithStore(browserHistory, store)\n\nReactDOM.render(\n\n  <Provider store={store}>\n\n   <Router history={history} routes={routes}></Router>\n\n  </Provider>,\n\n  document.getElementById('root')\n\n);
\n\n

W funkcji createStore warta zauważenia jest linijka która jest odpowiedzialna za poprawne działanie Redux DevTool w przeglądarce. Jest to potężne narzędzie, które bardzo pomaga podczas tworzenia aplikacji i poświęcę niemu osobny wpis żeby go dogłębnie poznać i wyczerpująco opisać.

\n\n

Oprócz dodania Redux DevTool w tym pliku  ustawiam synchronizację store’a aplikacji z historią przeglądania i przekazuję store do aplikacji przy pomocy Provider’a. W funkcji createStore zmienna reducers jest stałą, która przechowuje wszystkie dostępne w aplikacji Reducery i jest zdefiniowana w osobnym pliku w następujący sposób:

\n\n
const reducers = combineReducers({\n\n    calendar,\n\n    routing: routerReducer\n\n});
\n\n

Dzięki combineReducers możemy w aplikacji tworzyć wiele różnych reducerów i wewnątrz tej funkcji połączyć w jedną zmienną. Pomaga to w lepszym rozłożeniu struktury plików.  Ostatnią rzeczą jaka została do zdefiniowania jest użyty przez nas calendar reducer, który wygląda następująco:

\n\n
const calendar = (state=[], action)=>{\n\n    switch(action){\n\n        default:\n\n        return state;\n\n    }\n\n}\n\n
\n\n

Jest to prosta funkcja, która przyjmuje aktualny stan oraz wywołaną akcję i zwraca nowy stan. Opcja default jest po to żeby w przypadku wystąpienia nieznanej akcji zwrócić aktualny stan aplikacji.

\n\n

Jak połączyć Reduxa i komponenty z React’a?

\n\n

Można powiedzieć, że tyle wystarczy żeby poprawnie skonfigurować Redux’a w aplikacji ale to nie znaczy, że moje komponenty będą mogły korzystać z jego możliwości.

\n\n

Połączenie wszystkiego w całość jest proste co zaraz pokażę. Pierwsze co zrobiłem to stworzyłem nowy plik o nazwie calendar.container. Jego zadaniem jest połączenie reactowego komponentu z reduxem. Plik aktualnie wygląda następująco:

\n\n
const mapStateToProps = (state) => {\n\n  return {\n\n    calendar: state.calendar\n\n  }\n\n}\n\nconst mapDispatchToProps = (dispatch) => {\n\n  return {}\n\n}\n\nconst CalendarContainer = connect(\n\n  mapStateToProps,\n\n  mapDispatchToProps\n\n)(Calendar)\n\n
\n\n

mapStateToProps – tutaj definiujemy jakie obiekty ze stora chcemy by były dostępne w komponencie

\n\n

mapDispatchToProps – tutaj łączymy funkcje jakie będą wywoływane w naszym komponencie z akcjami reduxa np.: kliknięcie na przycisk save powinno wywołać akcję ADD_ELEMENT

\n\n

Na samym końcu łączymy obie powyższe rzeczy z naszym kontenerem. Ostatnią rzeczą, jaką musimy zrobić, to na nowo zdefiniować w pliku app.routes.js co będzie naszym komponentem. Teraz nie będzie to nasz zwykły komponent tylko kontener

\n\n
indexRoute: { component: CalendarContainer }
\n\n

Dość sporo roboty że złożyć wszystko w jedną całość. Jednak dzięki chwili wysiłku mamy teraz łatwo rozszerzalną strukturę, którą dzięki jednokierunkowemu przepływowi danych możemy w prostu sposób debbugować. Zalety takiej struktury widać dopiero przy dużych projektach, gdzie mamy dużą ilość plików i zależności.

\n\n

Uff, znowu mi wyszedł dłuższy wpis niż chciałem ale nie miałem serca przerywać go w połowie. Następnym krokiem będzie stworzenie odpowiednich akcji dla kalendarza tak by wszystko zaczęło już powoli działać. Tak więc do usłyszenia wkrótce.

2017-03-21 07:36:41 worktimetable4-redux-czyli-stworzmy-aplikacje ckhxjb6o0000yi3umb3hg09jv 2017-03-21 07:36:41 2017-03-21 07:36:41 cj0m3y6ag00ali3um665aczaj Ciężkie życie programisty https://fsgeek.pl/2017/03/23/ciezkie-zycie-programisty/

Wszyscy uważają zawód programisty za taki piękny ponieważ mamy elastyczne godziny pracy, dużą ilość bonusów i całkiem porządne zarobki. Jednak czasami nie jest tak pięknie jak się niektórym zdaje. Momentami zawód programisty potrafi być bardzo trudny.

\n\n

Wybór narzędzia

\n\n

Przy starcie każdego projektu dochodzi do momentu w którym trzeba wybrać odpowiednie języki, narzędzia, frameworki, które pomogą nam przy realizacji zadań. I tutaj pojawia się problem. Co wybrać? Aktualnie do każdego języka istnieje kilka frameworków oraz miliony narzędzi. W przypadku niektórych języków np.: Javascriptu wychodzi kilka narzędzi i bibliotek w ciągu jednego dnia. I pytanie brzmi jak wybrać te wartościowe, które zdobędą rynek i wyrosną na dojrzałe narzędzia a odrzucić te, które po tygodniu przestaną być rozwijane. Niektórzy odpowiedzą żeby się trzymać sprawdzonych rozwiązań jednak na dłuższą metę to nie jest dobre i w końcu będzie trzeba wybrać coś nowego, żeby nie zostać w tyle w stosunku do konkurencji. Wybór narzędzi w projekcie to naprawdę ciężkie zadanie w którym ciężko wybrać złoty środek i powinni się tego podejmować tylko doświadczeni programiści.

\n\n

Coraz mniej czasu

\n\n

Kolejnym problemem naszej branży jest czas a właściwie jego brak. I to zarówno tego w pracy jak i prywatnego. Niestety w dzisiejszych czasach wielu klientów chciałoby mieć gotowe programy na już a najlepiej na wczoraj. Również czasami sami się go pozbawiamy bo chcemy być na bieżąco z nowinkami, bo wyszła nowa technologia i trzeba przetestować, bo lubimy programować i nie zauważamy mijających godzin. Ciężko jest znaleźć stan równowagi w którym oprócz programowania znajdzie się czas na coś innego.

\n\n

Konieczność ciągłej nauki

\n\n

Tak naprawdę możliwość pracowania w ciekawych projektach jest związana z koniecznością ciągłej nauki. Rzeczy ciekawe to często te nowe, niepoznane i w jakiś sposób wyjątkowe. Tylko żeby móc w nich uczestniczyć trzeba się w jakiś sposób w nie zagłębić. Powoduje to konieczność przeznaczania dodatkowego czasu na naukę i rozwój osobisty. Programista nie jest zawodem w którym jednorazowy okres nauki wystarczy na całe życie. Tutaj wiedza sprzed roku, dwóch, pięć może być już mało przydatna i potrzebna tylko przy utrzymywaniu starych projektów.

\n\n

Czy to wszystko sprawia, że wybór kariery programisty w swoim życiu jest błędem? Nie wydaje mi się. Każdy zawód posiada swoje plusy i minusy i trzeba być tego świadomym. Nie ma zawodu idealnego w którym by nie było żadnych minusów. Jednak jeśli to co robimy jest naszą pasją to nie zauważamy minusów. Ja taką pasję znalazłem w programowaniu i każdemu życzę by znalazł coś „idealnego” dla siebie.

2017-03-23 08:00:07 ciezkie-zycie-programisty ckhxjb6o0000yi3umb3hg09jv 2017-03-23 08:00:07 2017-03-23 08:00:07 cj0t5f2fk00bei3uma4it65ee WorkTimetable#5 Dodajmy trochę akcji https://fsgeek.pl/2017/03/28/dodajmy-troche-akcji/

W ostatnim wpisie związanym z projektem dodałem do aplikacji Reduxa. Jednak samo dodanie go nie spowoduje, że w aplikacji zacznie się coś dziać. Czas na trochę akcji.

\n\n

Światła, kamera, akcja

\n\n

Na początek krótkie przypomnienie z ostatniego wpisu. Akcja jest to jedyny sposób by zmienić stan naszej aplikacji. Są więc jej koniecznym elementem. Póki co zdefiniowałem jedną akcję, która będzie najczęściej wykonywana czyli zaznaczanie godzin pracy w kalendarzu. Zacząłem od stworzenia następującej funkcji:

\n\n
export const addEvent = (newEvent) => {\n\n  return {\n\n    type: 'ADD_EVENT',\n\n    description: Math.abs(newEvent.end -newEvent.start) / 36e5,\n\n    start_date: newEvent.start.toUTCString(),\n\n    end_date: newEvent.end.toUTCString()\n\n  }\n\n}
\n\n

Jej zadaniem jest przygotowanie odpowiednich danych dla reducera. Zwraca ona tylko to co jest potrzebne do obsłużenia wywołanej akcji. Obiekt przygotowany przez tę funkcje ląduje w reducerze gdzie jest obsługiwany. Plik reducera wygląda następująco:

\n\n
const calendar = (state =[], action) => {\n\n    switch (action.type) {\n\n        case 'ADD_EVENT': {\n\n            return [\n\n                ...state,\n\n                {\n\n                    'title': action.description,\n\n                    'start': new Date(action.start_date),\n\n                    'end':new Date(action.end_date)\n\n                }\n\n            ]\n\n        }\n\n        default:\n\n            return state;\n\n    }\n\n}
\n\n

Nasz obiekt jest dostępny pod zmienną action skąd mamy dostęp do wszystkich pól zdefiniowanych w akcji. Sama funkcja reducera jest bardzo prosta i jej głównym elementem jest switch, którym decydujemy co zrobić w zależności od typu akcji. Elementem, który zasługuje na chwilę uwagi jest sposób zwracania nowego stanu. Jako, że głównym założeniem reduxa jest brak mutowania jakichkolwiek elementów to nie możemy bezpośrednio zmienić naszego stanu tylko musimy zwrócić zupełnie nowy obiekt, który zawiera elementy poprzednie oraz ten nowo dodany.

\n\n

Akcja w widoku

\n\n

Teraz wystarczy połączyć to wszystko z kalendarzem. Zacząłem od pliku calendar.container. Musiałem w nim zdefiniować funkcję za pomocą której będę wywoływał moją akcje:

\n\n
const mapDispatchToProps = (dispatch) => {\n\n  return {\n\n    onAddEvent: (newEvent) => { dispatch(addEvent(newEvent)) },\n\n  }\n\n}
\n\n

Zapis, którego użyłem znaczy, że w momencie wywołania funkcji onAddEvent zostanie wywołana akcja addEvent z parametrem, który przekazaliśmy. Pierwsze co musiałem zrobić w pliku calendar.component to dodać następującą linijkę:

\n\n
const { calendar, onAddEvent } = this.props;
\n\n

Dzięki temu mogę korzystać ze zmiennej calendar, która jest obiektem stanu dla mojego komponentu oraz onAddEvent, która jest wyżej zdefiniowaną funkcją.Teraz wystarczy wykorzystać to co daje nam react-big-calendar. Aktualnie wygląda on tak:

\n\n
return (\n\n            <div className="calendar">\n\n                <BigCalendar\n\n                    ref='calendar'\n\n                    selectable={this.state.selectable}\n\n                    defaultView='week'\n\n                    onView={this.onViewChange}\n\n                    events={calendar}\n\n                    onSelectSlot={(event) => onAddEvent(event)}\n\n                />\n\n            </div>\n\n        )
\n\n

Pierwszym krokiem było dodanie opcji selectable do komponentu. Pozwala to na zaznaczanie pól na kalendarzu. Jako, że chciałem zaznaczać pola tylko w widoku tygodniowym to wykorzystałem opcję onView która wywołuje przekazaną funkcję za każdym razem gdy zmieni się typ widoku.

\n\n
onViewChange = (event) => {\n\n        if (event === 'week') {\n\n           this.setState({selectable:true})\n\n        } else {\n\n            this.setState({selectable:false})\n\n        }\n\n    \n\n    };\n\n
\n\n

No i najważniejsza opcja onSelectSlot, która powoduje wywołanie przekazanej funkcji za każdym razem gdy coś się zaznaczy na kalendarzu.

\n\n

Jak widać tworzenie akcji nie jest takie ciężkie. Teraz za każdym razem gdy będę chciał dodać nową akcję to będę postępował w identyczny sposób. Najwięcej problemów tutaj sprawiło mi nie tworzenie akcji a połączenie tego z kalendarzem i dostosowanie widoku do swoich wyobrażeń. Efekt moich prac jest dostępny tutaj. Teraz  chciałbym się trochę pobawić pythonem i stworzyć na jego podstawie serwer api. Tak więc do zobaczenia wkrótce we wpisie dotyczącym podstaw pythona.

2017-03-28 06:15:38 worktimetable5-dodajmy-troche-akcji ckhxjb6o0000yi3umb3hg09jv 2017-03-28 06:15:38 2017-03-28 06:15:38 -cjiu1rbz4014fi3umgqvv5yx1 Lista materiałów, których potrzebujesz do skutecznej nauki Reacta http://www.algosmart.pl/lista-materialow-ktorych-potrzebujesz-do-skutecznej-nauki-reacta

Stawiasz pierwsze kroki w ekosystemie Reacta? A może początki masz już za sobą, ale część zagadnień jest dla Ciebie problematyczna? Tak się składa, że w czasie wolnym od tworzenia kolejnych komponentów, udało mi się odszukać wiele wartościowych materiałów. Pozwolą Ci na skuteczną naukę, niezależnie od dotychczasowego poziomu umiejętności. Przygotowaną przeze mnie listę podzieliłem na dwie […]

\n

Artykuł Lista materiałów, których potrzebujesz do skutecznej nauki Reacta pochodzi z serwisu AlgoSmart.

2018-06-25 09:15:40 lista-materialow-ktorych-potrzebujesz-do-skutecznej-nauki-reacta cjv6u59zk000wi3um4vfceqqt 2018-06-25 09:15:40 2018-06-25 09:15:40 cjj5uqo7k014yi3umh3am7mzq Jak pisać testy jednostkowe komponentów React z Jest i Enzyme http://www.algosmart.pl/jak-pisac-testy-jednostkowe-komponentow-react-enzyme/

Jak to bywa z początkami, są trudne. Przypomniałem sobie o tym podczas pisania pierwszych testów jednostkowych w React. Dręczyło mnie wiele pytań: co powinienem testować? A co zostawić w spokoju? Czy moje testy zbytnio skupiają się na wewnętrznej mechanice komponentu? A może przez brak doświadczenia pomijam istotne elementy interfejsu? Takie wątpliwości w połączeniu z rozbudowanym […]

\n

Artykuł Jak pisać testy jednostkowe komponentów React z Jest i Enzyme pochodzi z serwisu AlgoSmart.

2018-07-03 15:32:26 jak-pisac-testy-jednostkowe-komponentow-react-z-jest-i-enzyme cjv6u59zk000wi3um4vfceqqt 2018-07-03 15:32:26 2018-07-03 15:32:26 cjjn0h8y0015ii3um5wje7cjw Jak pisać testy integracyjne komponentów React z Jest i Enzyme http://www.algosmart.pl/jak-pisac-testy-integracyjne-komponentow-react-enzyme

Podczas testowania interfejsu użytkownika ograniczanie się sprawdzania odizolowanych od siebie komponentów nie zdaje egzaminu. Funkcjonalności dostarczane przez aplikację zawsze są wypadkową właściwej współpracy kilku jednostek w środowisku przeglądarki. Dopiero kiedy upewnisz się, że podsystemy są właściwie ze sobą zintegrowane, znacznie wzrośnie prawdopodobieństwo, że aplikacja spełni swoje zadanie w akcji. Dzisiaj przeprowadzę Cię przez podstawowy proces […]

\n

Artykuł Jak pisać testy integracyjne komponentów React z Jest i Enzyme pochodzi z serwisu AlgoSmart.

2018-07-15 15:45:09 jak-pisac-testy-integracyjne-komponentow-react-z-jest-i-enzyme cjv6u59zk000wi3um4vfceqqt 2018-07-15 15:45:09 2018-07-15 15:45:09 cjkh07vjc016ci3umh30tah4p Jak pisać testy end-to-end aplikacji React z frameworkiem Cypress http://www.algosmart.pl/pisac-testy-end-end-aplikacji-react-cypress/

Przyszedł czas na zdobycie wierzchołka testerskiej piramidy. Zabierzemy się za testy e2e (end-to-end). W teorii to najlepszy sposób na upewnienie się, że aplikacja działa jak należy. Możliwość dokładnego odtworzenia zachowań użytkownika w środowisku przeglądarki jest nadzwyczaj obiecująca. Niestety, praktyka szybko obnaża ukryte słabości tego podejścia do testowania. Testy e2e są czasochłonne i niezwykle wrażliwe na […]

\n

Artykuł Jak pisać testy end-to-end aplikacji React z frameworkiem Cypress pochodzi z serwisu AlgoSmart.

2018-08-05 15:30:57 jak-pisac-testy-end-to-end-aplikacji-react-z-frameworkiem-cypress cjv6u59zk000wi3um4vfceqqt 2018-08-05 15:30:57 2018-08-05 15:30:57 @@ -2462,12 +2494,12 @@ cj9n425nk00u7i3um8q5jcx07 Niewidoczne zmiany na lepsze – refactoring http://ku ciztizghc007ui3um83az58um Blog SowaProgramuje – 3… 2… 1… start! http://sowaprogramuje.pl/3-2-1-start/

Tradycyjne Hello World – czyli mój pierwszy post na blogu SowaProgramuje. Będę pisać o: zdobywaniu doświadczenia jako programistka (JavaScript), dobrych praktykach kodowania, wyzwaniach i realizacji projektu w ramach konkursu “Daj się Poznać 2017”, testach A/B na stronach internetowych, freelancingu, rozmowach kwalifikacyjnych w branży IT i wiele więcej 😉  

\n

Artykuł Blog SowaProgramuje – 3… 2… 1… start! pochodzi z serwisu Sowa Programuje.

2017-03-03 07:55:42 blog-sowaprogramuje-3-2-1-start ckeud40cw000qi3umbryt365k 2017-03-03 07:55:42 2017-03-03 07:55:42 ciztj5co8007vi3um25udex1n Testy A/B – co to takiego? http://sowaprogramuje.pl/testy-ab-co-to-takiego/

Testy A/B zaczynają się od prostego pytania: W jaki sposób mogę poprawić konwersję na mojej stronie internetowej / aplikacji? Innymi słowy:  Jak zwiększyć odsetek ludzi, którzy na naszej stronie np. wypełnią formularz, zapiszą się na newsletter, kupią nasz produkt, przekażą darowiznę? W rozwiązaniu tego problemu przychodzą testy A/B. Polegają one na wyświetlaniu użytkownikom w tym …

\n

Czytaj dalej Testy A/B – co to takiego?

\n

Artykuł Testy A/B – co to takiego? pochodzi z serwisu Sowa Programuje.

2017-03-03 08:00:17 testy-ab-co-to-takiego ckeud40cw000qi3umbryt365k 2017-03-03 08:00:17 2017-03-03 08:00:17 cj75qc9aw00r3i3um3ary0fnz Wracamy po wakacjach czyli nowy “sezon” bloga! https://www.nafrontendzie.pl/wracamy-po-wakacjach-czyli-nowy-sezon-bloga W sumie przez cały sierpień na blogu nie pojawił się ani jeden nowy wpis… Co prawda nie planowałem tego, ale intensywna praca nad moimi kursami on-line trochę mnie wyczerpała i spowodowała chwilowy wstręt do pisania. Na szczęście to już za mną i od września wracam z nowymi siłami. Zatem niniejszym ogłaszam rozpoczęcie nowego “sezonu” na blogu! 2017-09-04 05:32:47 wracamy-po-wakacjach-czyli-nowy-sezon-bloga ck7m8brk0000ui3um0pxg4lae 2017-09-04 05:32:47 2017-09-04 05:32:47 +cj5k02cuw00p8i3um69cfcvzr Ile zarabia junior front end developer ? http://webdevmaster.pl/ile-zarabia-junior-front-end-developer/

Odwieczne pytanie powtarzające się na forach, wiele początkujących osób w branży zadaje sobie to pytanie. Bo przecież programista zarabia kokosy to ile dostanę na początku? Ile zawołać, na ile się zgodzić i przede wszystkim jak się odpowiednio wycenić. Jak zrobić żeby podczas rozmowy o pierwszą pracę czy na samym początku nie dać się wyzyskać ale…

\n

Artykuł Ile zarabia junior front end developer ? pochodzi z serwisu Wedevmaster - początkujący deweloper.

2017-07-25 19:54:23 ile-zarabia-junior-front-end-developer ckdyuycaw000ti3um7a4vg0hl 2017-07-25 19:54:23 2017-07-25 19:54:23 cj84w70dc00sgi3umhbw49xku Cechy dobrego developera, czyli osobowość programisty http://bedeprogramistka.pl/cechy-dobrego-programisty-czyli-osobowosc-programisty/

Osobowość programisty to temat, który siedział w mojej głowie od pewnego czasu. Czy uważam, że istnieje coś takiego, jak idealna osobowość programisty? Posłuchaj co o tym sądzę. Jeśli jednak nie możesz przeboleć mojego głosu i preferujesz wersję pisaną – znajdziesz ją poniżej 🙂 . Od kilku dni zastanawiam się nad pewną kwestią, mianowicie nad OSOBOWOŚCIĄ PROGRAMISTY. Czy osoba wykonująca zawód programisty powinna charakteryzować się określonymi cechami osobowości? Czy to, że ktoś jest introwertykiem albo ekstrawertykiem wpływa na to, że jest postrzegany w pracy jako lepszy/gorszy specjalista?   Czy umiejętności miękkie są tak samo ważne jak umiejętności twarde w zawodzie programisty? I w końcu czy programista powinien być ponurakiem, żyjącym we własnym świecie? W artykule tym spróbuję scharakteryzować pożądaną osobowość programisty.   Całe te moje rozważania zaczęły się od filmu Radka Kotarskiego, w którym to ów Radek opowiadał o tym, że nauczył się języka szwedzkiego w 6 miesięcy. Pomyślałam sobie, hej wow, fajnie. Radek w tym filmie przekonywał, że Ty i Ty i też Ty i nawet Ja możemy się nauczyć dowolnej rzeczy korzystając z nowoczesnych metod aktywizujących określone części mózgu (o co chodziło tak dokładniej nie wiem, należy zakupić jego najnowszą książkę, przeczytać i ewentualnie wypróbować tę metodę na sobie). […]

\n

Artykuł Cechy dobrego developera, czyli osobowość programisty pochodzi z serwisu .

2017-09-28 20:08:36 cechy-dobrego-developera-czyli-osobowosc-programisty ck9qqdx4o000xi3umdjbh0w86 2017-09-28 20:08:36 2017-09-28 20:08:36 cj8frl2nk00sui3umeis26fdk Od czego zacząć naukę programowania – darmowy e-book! http://bedeprogramistka.pl/od-czego-zaczac-nauke-programowania/

Wczoraj wieczorem napisała do mnie Justyna. Justyna, tak jak duża część z nas chciałaby zmienić coś w swoim życiu, zacząć naukę programowania ale nie wie, jak się do tego zabrać. Pytanie Justyny stało się inspiracją do napisania tego artykułu. Od czego zacząć naukę programowania?   Jeśli czytasz ten artykuł to pewnie nie raz zastanawiałeś się od czego zacząć naukę programowania. Może należysz do osób, które już wystartowały, ale pogubiły się gdzieś po drodze. Jest tyle możliwości. Proponuję, żebyśmy zaczęli od samiuśkiego początku. Po tym artykule będziesz miał szereg wskazówek jak zacząć naukę programowania. Mam też nadzieję, że wystartujesz z nauką 🙂   Kiedyś było się po prostu programistą. Młody, albo i nie młody, człowiek szedł na studia i po kilku latach stawał się magistrem inżynierem informatyki. Jednak poszliśmy z rozwojem informatycznym ciut do przodu i dział programowania musiał siłą rzeczy wydzielić 3 główne struktury: Front-end, Back-end, Full Stack. Twoim pierwszym zadaniem powinno być zaznajomienie się z tymi „stanowiskami”.   Front-end’owiec to człowiek, który bardziej zajmuje się wizualną stroną serwisów internetowych. Pracuje nad tym co widać. Stara się, aby strona, którą tworzy była piękna wizualnie, ale też użyteczna. Front-end’owiec bardzo często stara się odwzorować projekt graficzny na stronie internetowej. Dobiera odpowiednie fonty, […]

\n

Artykuł Od czego zacząć naukę programowania – darmowy e-book! pochodzi z serwisu .

2017-10-06 10:45:02 od-czego-zaczac-nauke-programowania-darmowy-e-book ck9qqdx4o000xi3umdjbh0w86 2017-10-06 10:45:02 2017-10-06 10:45:02 cj8lh7eg800t1i3ume9yihg64 Od czego zacząć naukę JavaScript – wywiad z Samurajem Programowania http://bedeprogramistka.pl/od-czego-zaczac-nauke-javascript/

Pewnego wieczoru, ucząc się JavaScriptu z Samurajem Programowania, wpadł mi do głowy pewien pomysł. Postanowiłam, że zapytam Samuraja o kilka rzeczy związanych z JavaScriptem. Bartek, bo tak ma na imię Samuraj, okazał się być bardzo otwartym człowiekiem i chętnie zgodził się na ten wywiad. Jakie materiały do nauki poleca Samuraj Programowania? I od czego zacząć naukę programowania JavaScriptu? Chcesz wiedzieć więcej? Czytaj dalej! Bartek Borowczyk vel Samuraj Programowania. Sam o sobie pisze, że jest człowiekiem, który Humanistę zamieni w Programistę. Uważa, że programowanie jest świetną przygodą, ale też szansą na ciekawy i dobrze płatny zawód. Pracuje przy projektach technologicznych. Prowadzi jeden z moich ulubionych kanałów do nauki programowania – Samuraj Programowania oraz WebSamuraj. Teraz zaczął również prowadzić stacjonarne kursy programowania w Warszawie i Łodzi! Na co dzień, a przynajmniej tak wynika z naszej korespondencji, jest bardzo sympatycznym facetem, chętnym do pomocy. To oglądając jego filmy na Youtube po nocach, napisałam mój pierwszy poważny projekt. Chcesz się dowiedzieć, jakie złote rady ma Bartek dla Ciebie początkujący programisto? Przeczytaj mój krótki wywiad z Bartkiem na temat JS-a i nauki programowania. Natka: Czy JavaScript to język, którego może nauczyć się każdy? Samuraj Programowania: W słowie „nauczyć” mieści się dość szeroki zakres wiedzy i umiejętności. Podobnie jak nauczyć […]

\n

Artykuł Od czego zacząć naukę JavaScript – wywiad z Samurajem Programowania pochodzi z serwisu .

2017-10-10 10:41:05 od-czego-zaczac-nauke-javascript-wywiad-z-samurajem-programowania ck9qqdx4o000xi3umdjbh0w86 2017-10-10 10:41:05 2017-10-10 10:41:05 cj8u5v0m000t9i3umdvj15d7s Październik, październik czyli jak mi idzie nauka JavaScript http://bedeprogramistka.pl/jak-mi-idzie-nauka-javascript/

Na początku października podjęłam decyzję, że do końca tego miesiąca ogarnę w stopniu bardzo podstawowym JavaScript. Jesteś ciekawy jak mi idzie nauka JavaScript? Przyznam szczerze, że nie tak, jakbym sama tego chciała… Przeczytaj artykuł do końca, bo jak w bajkach, na końcu tęczy zazwyczaj znajduje się skarb 🙂 ! Październik – miesiącem pod tytułem „nauka JavaScript”. Plan prawie doskonały – do końca października opanować jeden z podstawowych języków Front-enda. Opanować to takie trochę wielkie słowo. Po prostu rozumieć podstawowe zmienne, operatory, itp w JavaScripcie. No i napiszę Ci, że idzie mi jak po grudzie. Wczoraj na profilu Facebookowym pisałam, że z tym JavaScriptem to mam trochę tak, jak z jeżem. Niby coś zaczynam łapać, niby wyciąga do mnie swoje łapki, ale jak tylko zaczynam go brać na ręce zaczyna mnie kłuć. Nie wiem. Czasem tak się zastanawiam czy tylko ja tak z nim mam. Czuję, że bardzo chciałabym się go nauczyć, ale jakoś nie mam do niego tyle serca, co do chociażby CSSa. Wieczorami, gdy słucham Samuraja Programowania, który niby w sposób bardzo przystępny opowiada o JS, zasypiam. Autentycznie chce mi się spać. Co prawda zazwyczaj jest grubo po 23:00, ale mimo wszystko. Może to moje nastawienie? Może to moje […]

\n

Artykuł Październik, październik czyli jak mi idzie nauka JavaScript pochodzi z serwisu .

2017-10-16 12:33:27 pazdziernik-pazdziernik-czyli-jak-mi-idzie-nauka-javascript ck9qqdx4o000xi3umdjbh0w86 2017-10-16 12:33:27 2017-10-16 12:33:27 cj90xkq0800tgi3um6nwe87lu Zmiana branży – Tobie też może się udać! – wywiad motywacyjny z Aleksandrą Warzechą http://bedeprogramistka.pl/zmiana-branzy-wywiad-z-ola/

Zapraszam Cię na cykl Wywiadów Motywacyjnych – Zmiana branży – Tobie też może się udać! Dziś pierwszy wywiad z bohaterką – Aleksandrą Warzechą. Wyobraźmy sobie taką sytuację. Rozmowa dwóch przyjaciółek: – Wiesz Anka, ja to się chyba nie nadaję do tego programowania. Chciałabym bardzo zostać programistką, ale jakoś tak mi nie idzie. W ogóle mam wrażenie, że wszyscy już tyle potrafią, a ja ciągle stoję w miejscu. Jestem beznadziejna. – Marta, co ty gadasz? Dasz radę.  – Nie, chyba nie mam na to sił.   Znasz to? Tobie też czasami brakuje motywacji? Chciałabyś zostać programistką, ale masz wrażenie, że ciągle ktoś/coś rzuca Ci kłody pod nogi? A może masz wrażenie, że wszyscy są przeciwko Tobie. Że nikt w Ciebie nie wierzy. Że nie masz nikogo, kto by Ci powiedział „hej! Marta, robisz świetną robotę”.   Jeśli choć raz poczułaś chwilę zwątpienia, to jestem wręcz pewna, że cykl Wywiadów Motywacyjnych przypadnie Ci do gustu. Będą one ukazywać się cyklicznie, co 2 tygodnie, w soboty. Każda z moich bohaterek, dostaje taki sam zestaw pytań. Te wywiady, to historie dziewczyn, które same kiedyś stanęły przed dylematem zmiany zawodu. Tak, jak Ty, postanowiły One, że Będą Programistką. Często mimo przeszkód i upadków, podnosiły się i […]

\n

Artykuł Zmiana branży – Tobie też może się udać! – wywiad motywacyjny z Aleksandrą Warzechą pochodzi z serwisu .

2017-10-21 06:15:53 zmiana-branzy-tobie-tez-moze-sie-udac-wywiad-motywacyjny-z-aleksandra-warzecha ck9qqdx4o000xi3umdjbh0w86 2017-10-21 06:15:53 2017-10-21 06:15:53 -cj5k02cuw00p8i3um69cfcvzr Ile zarabia junior front end developer ? http://webdevmaster.pl/ile-zarabia-junior-front-end-developer/

Odwieczne pytanie powtarzające się na forach, wiele początkujących osób w branży zadaje sobie to pytanie. Bo przecież programista zarabia kokosy to ile dostanę na początku? Ile zawołać, na ile się zgodzić i przede wszystkim jak się odpowiednio wycenić. Jak zrobić żeby podczas rozmowy o pierwszą pracę czy na samym początku nie dać się wyzyskać ale…

\n

Artykuł Ile zarabia junior front end developer ? pochodzi z serwisu Wedevmaster - początkujący deweloper.

2017-07-25 19:54:23 ile-zarabia-junior-front-end-developer ckdyuycaw000ti3um7a4vg0hl 2017-07-25 19:54:23 2017-07-25 19:54:23 cj5k0e60g00p9i3um3j9u63d1 Kobiety a programowanie http://webdevmaster.pl/kobiety-a-programowanie/

No właśnie? Dlaczego jako rekruter dostaję 80% procent CV mężczyzn i tylko 20 kobiet? Nawet moja office manager  zadała nam deweloperom to pytanie?  Programowanie nie jest dla kobiet? Może są dyskryminowane? Facetowi łatwiej znaleźć pracę? To wszystko nieprawda. Dla mnie jako rekrutera Twoja płeć nie ma najmniejszego znaczenia. Dla moich szefów również. W innych firmach?…

\n

Artykuł Kobiety a programowanie pochodzi z serwisu Wedevmaster - początkujący deweloper.

2017-07-25 20:03:34 kobiety-a-programowanie ckdyuycaw000ti3um7a4vg0hl 2017-07-25 20:03:34 2017-07-25 20:03:34 cj6v12t5c00qri3umcfvsf71j Jak długo trzeba się uczyć programowania żeby znaleźć pracę? http://webdevmaster.pl/jak-dlugo-trzeba-sie-uczyc-programowania-zeby-znalezc-prace/

Każdy z nas, czyli osób które zdecydowały, bądź decydują się na rozpoczęcie nauki a co za tym idzie kariery w branży programistycznej na samym początku zadaje sobie to pytanie. Jak długo potrwa szukanie pracy, ile wiedzy będę musiał posiadać żeby ją znaleźć, ile czasu muszę na to poświęcić. Przede wszystkim chcąc odpowiedzieć na te pytania…

\n

Artykuł Jak długo trzeba się uczyć programowania żeby znaleźć pracę? pochodzi z serwisu Wedevmaster - początkujący deweloper.

2017-08-27 17:47:54 jak-dlugo-trzeba-sie-uczyc-programowania-zeby-znalezc-prace ckdyuycaw000ti3um7a4vg0hl 2017-08-27 17:47:54 2017-08-27 17:47:54 cj6xw4tc000qui3um6ima5wku Z czego najlepiej uczyć się programowania? http://webdevmaster.pl/z-czego-najlepiej-uczyc-sie-programowania/

Na początek pewnie każdemu przyjdzie myśl pójścia na kurs programowania, więc odsyłam do artykułu gdzie wyjaśniłem w skrócie tę kwestię. Pomijam dzisiaj kurs programowania  i na własnym przykładzie rozwoju kariery deweloperskiej podaje ciekawe źródła wiedzy. Według mnie najlepszą formą nauki są płatne platformy i tutaj wymienię te najlepsze według mnie: –codeschool – bardzo fajne miejsce…

\n

Artykuł Z czego najlepiej uczyć się programowania? pochodzi z serwisu Wedevmaster - początkujący deweloper.

2017-08-29 17:52:48 z-czego-najlepiej-uczyc-sie-programowania ckdyuycaw000ti3um7a4vg0hl 2017-08-29 17:52:48 2017-08-29 17:52:48 @@ -2475,6 +2507,8 @@ cjb2cztx400w0i3um3tkg4eer Programowanie a informatyka (studia informatyczne) htt cjbj9ph4g00wbi3umhgeq5mlj Czy programista musi znać język angielski? http://webdevmaster.pl/czy-programista-musi-znac-jezyk-angielski/

Gdy zaczynałem swoją karierę jako deweloper i przeglądałem setki ogłoszeń o pracę dla programistów w wielu z nich była wymagana dobra znajomość języka angielskiego.
 Od samego początku dawało mi to do myślenia bo miałem wtedy takie podejście, że skoro programista siedzi tylko w kodzie i nie ma kontaktu z klientem, to w zasadzie po co rekruterzy…

\n

Artykuł Czy programista musi znać język angielski? pochodzi z serwisu Webdevmaster - początkujący deweloper.

2017-12-23 11:34:46 czy-programista-musi-znac-jezyk-angielski ckdyuycaw000ti3um7a4vg0hl 2017-12-23 11:34:46 2017-12-23 11:34:46 cje6xsq0o00z2i3umezfj1lm3 Bezpłatny kurs programowania http://webdevmaster.pl/bezplatny-kurs-programowania/

Moi znajomi programiści, z którymi obecnie pracuję chcą założyć szkołę programowania, która będzie udzielała kursów programowania ( bezpłatnie). Jak to możliwe? Otóż sam temat finansowania kursów wygląda tak, że środki na kurs mogłaby finansować Unia Europejska. Zrobili już w tym zakresie pewne kroki i dowiedzieli się, że jest to możliwe. Kurs skierowany byłby przede wczystkim…

\n

Artykuł Bezpłatny kurs programowania pochodzi z serwisu Webdevmaster - początkujący deweloper.

2018-02-28 10:27:15 bezplatny-kurs-programowania ckdyuycaw000ti3um7a4vg0hl 2018-02-28 10:27:15 2018-02-28 10:27:15 cjh87lq7k0129i3umhfup5oqk Dlaczego w branży IT tak popularne jest współpraca B2B? http://webdevmaster.pl/dlaczego-w-branzy-it-tak-popularne-jest-wspolpraca-b2b/

Jako rekruter programistów ( nie mylcie mnie z jakimś headhunterem) w mojej firmie nie tylko sprawdzam umiejętności i zaangażowanie osób zainteresowanych pracą na stanowiska programistów, ale także opowiadam nieco o firmie, stacku technologicznym i odpowiadam na pytania. Mimo że samymi umowa, kwotami i warunkami współpracy bardziej na płaszczyźnie pracownik-firma zajmuje się ktoś inny to zwykle…

\n

Artykuł Dlaczego w branży IT tak popularne jest współpraca B2B? pochodzi z serwisu Webdevmaster - początkujący deweloper.

2018-05-15 21:48:38 dlaczego-w-branzy-it-tak-popularne-jest-wspolpraca-b2b ckdyuycaw000ti3um7a4vg0hl 2018-05-15 21:48:38 2018-05-15 21:48:38 +cizra0go0007mi3ume70t3vkq ECMAScript 6: TOP 10 nowości - cz.6 - Moduły, export i import http://blog.nebula.us/28-ecmascript-6-top-10-nowosci-cz-6-moduly-i-import

Dzielenie kodu aplikacji na wiele plików jest niezbędne do utrzymania porządku w projekcie. Dotychczas JavaScript nie posiadał wbudowanych mechanizmów do wygodnego współdzielenia kodu między plikami. Deweloperzy byli zmuszeni wrzucać każdy plik do osobnego tagu script w htmlu, co było niezmiernie irytujące, bądź korzystać z zewnętrznych bibliotek, jak requireJS. Na szczęście z nadejściem ES6 moduły oraz ich import i eksport stały się proste jak niemiecka autostrada i wygodne jak fotel z wysuwanym podnóżkiem.

2017-03-01 18:09:00 ecmascript-6-top-10-nowosci-cz6-moduly-export-i-import cj4tp0i00000ri3umf7udfqvm 2017-03-01 18:09:00 2017-03-01 18:09:00 +ckrvn31dq00020wmqcay2zp43 #3 Notion API - integracja formularza https://www.youtube.com/watch?v=yVwQzp7Ehf4 Trzeci już odcinek z krótkiej serii tworzenia sobie projektu do portfolio. Pokazuję w nim jak zintegrować formularz zbudowany za pomocą react hook forms z zewnętrzną bazą danych w Notion.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-08-03 03:37:25 3-notion-api-integracja-formularza ckmoh2k1y000050l0rtc97ktd 2021-08-03 05:47:09.374 2021-08-03 05:47:09.374 cj9y3om1s00uki3umae4tfqp0 Samodzielna nauka programowania – co nas motywuje i demotywuje http://bedeprogramistka.pl/samodzielna-nauka-programowania/

Samodzielna nauka programowania – sprawdź co nas motywuje i demotywuje. Pamiętasz, jak ostatnio na blogu odbywał się konkurs, w którym można było wygrać dostęp do platformy Kodologia.pl? To platforma, gdzie możesz samodzielnie nauczyć się programowania. Konkurs ten był dla mnie ważnym i ciekawym doświadczeniem. Osoby chcące wygrać musiały udzielić odpowiedzi na pytanie dlaczego to właśnie one powinny dostać dostęp do platformy i co by to zmieniło w ich życiu. Bardzo poruszyły mnie te odpowiedzi. Niektóre były takie zwyczajne, ale w niektórych skrywała się pewna tęsknota za lepszym czy innym życiem. Niektórzy chcieliby spróbować czegoś nowego. Niektórzy chcieliby udowodnić komuś, ale też przede wszystkim sobie, że stać ich na coś więcej. Każdej z tych osób zależało na tym, aby rozpocząć i kontynuować samodzielną naukę programowania. Jeśli chcesz wiedzieć, od czego w ogóle zacząć naukę programowania odsyłam Cię do tego artykułu. Znajdziesz tam darmowy e-book! 🙂 Wracając do naszego konkursu przytoczę Ci jak brzmiały dwie zwycięskie odpowiedzi. Pierwszą odpowiedź udzieliła Agata: Drugą odpowiedź udzieliła Gosia:   Te dwie dziewczyny są bardzo różne. Ale łączy je, tak jak i wszystkich innych uczestników konkursu, motywacja. Motywacja do nauki. Chociaż samodzielna nauka programowania, no umówmy się, nie jest łatwa, to wiele osób wybiera tę ścieżkę […]

\n

Artykuł Samodzielna nauka programowania – co nas motywuje i demotywuje pochodzi z serwisu .

2017-11-13 11:23:16 samodzielna-nauka-programowania-co-nas-motywuje-i-demotywuje ck9qqdx4o000xi3umdjbh0w86 2017-11-13 11:23:16 2017-11-13 11:23:16 cja558nm800usi3um4z8d5wr3 Zmiana branży – Tobie też może się udać! – wywiad motywacyjny z Agnieszką Szyszkowską http://bedeprogramistka.pl/zmiana-branzy-wywiad-z-agnieszka/

Wyobraź sobie, że jesteś konstruktorem budowlanym. Ale gdzieś tam w środku, czujesz, że to nie to. Że Twoje miejsce jest gdzie indziej. Uczysz się wytrwale dzień w dzień. Dostajesz zapewnienie o stażu i … gdy już jesteś gotowy do przeprowadzki, Twój przyszły, domniemany pracodawca rozmyśla się. Co robisz? Zostajesz? Czy ruszasz do Warszawy, żeby prosto z niej trafić do Włoch? Tę drugą drogę wybrała Agnieszka Szyszkowska. Miała być konstruktorem budowlanym a zajmuje się developmentem aplikacji mobilnych we Włoszech. Zapraszam Cię do mojej rozmowy z bohaterką Agnieszką, w której zdradzi, jak to się wszystko zaczęło.   Wywiad motywacyjny z Agnieszką Szyszkowską Agnieszka Szyszkowska Były konstruktor budowlany. Aktualnie na delegacji zagranicznej. Zajmuje się developmentem backendu aplikacji mobilnej we Włoszech. Kocha uczyć się nowych rzeczy, tak samo jak sport i polskie góry. Zdecydowanie twierdzi, że zmiana branży odmieniła jej życie na lepsze.   Natka: Na pewno miałaś swoje życie przed programowaniem 🙂 Co robiłaś? Czym się zajmowałaś? Agnieszka: W maju skończyłam studia na kierunku budownictwo, w trakcie których pracowałam w zawodzie. Wątpliwości co do wyboru kierunku miałam od drugiego roku studiów – wcześniej bałam się podjąć decyzję i coś zmienić, dlatego dotrwałam aż do dyplomu. Można powiedzieć ze straciłam przez to kilka lat, ale […]

\n

Artykuł Zmiana branży – Tobie też może się udać! – wywiad motywacyjny z Agnieszką Szyszkowską pochodzi z serwisu .

2017-11-18 09:41:14 zmiana-branzy-tobie-tez-moze-sie-udac-wywiad-motywacyjny-z-agnieszka-szyszkowska ck9qqdx4o000xi3umdjbh0w86 2017-11-18 09:41:14 2017-11-18 09:41:14 cja97tx3k00uyi3um4i0tcirn Kurs Ruby dla początkujących – recenzja kursów Kodologia.pl http://bedeprogramistka.pl/kurs-ruby-dla-poczatkujacych-kodologia/

Kurs Ruby dla początkujących na Kodologia.pl. Poznaj moją opinię. Jakiś czas temu pisałam recenzję kursu HTML na Kodologia.pl. Wspominałam Ci też wtedy, że jeśli zrobię jeszcze jakiś kurs na tej platformie, na pewno Ci o tym napiszę. Plan był taki, że miała powstać recenzja kursu JavaScript. Jednak jak dobrze wiesz, jakoś mi tak z JavaScript średnio po drodze… O moich zmaganiach z JS możesz przeczytać tu lub np też tu. Zaczęłam robić kurs JavaScript dla początkujących na Kodologia.pl jednak nie czułam tego. Zadania wydawały mi się trudne. Dość matematyczne i logiczne. Robiąc ten kurs, miałam wrażenie, że nic nie wiem, nic nie rozumiem, mimo że podstawy JS jako takie posiadałam. Po krótkiej wymianie maili z Łukaszem z Kodologia.pl okazało się, że jest to kurs dla osób, które już miały styczność z programowaniem. Kurs z JavaScriptu dla początkujących jest kursem z tzw. czystego JS, bez DOM. Zrobiłam ponad połowę kursu z JavaScriptu dla początkujących, jednak poczułam, że to jeszcze nie ten moment. Niech trochę poleży  i poczeka na mnie. Myślę, że wkrótce do niego powrócę. Po ciągłej nauce JavaScriptu chyba potrzebowałam przerwy lub jakiejś odmiany. Łukasz zarekomendował mi kurs Ruby dla początkujących. Początkowo byłam sceptyczna. Przecież ja nie chcę się uczyć Ruby. […]

\n

Artykuł Kurs Ruby dla początkujących – recenzja kursów Kodologia.pl pochodzi z serwisu .

2017-11-21 06:04:50 kurs-ruby-dla-poczatkujacych-recenzja-kursow-kodologiapl ck9qqdx4o000xi3umdjbh0w86 2017-11-21 06:04:50 2017-11-21 06:04:50 @@ -2526,7 +2560,6 @@ cjr67ei6801e3i3um2g6f5nwa Nasze książki – listopad/grudzień https://bedepro cjrqsqh5c01f4i3um0o6xg061 Zrobiłam to! Jestem programistką! https://bedeprogramistka.pl/jestem-programistka/

Po półtora roku ciężkiej pracy i nauki udało się. Zostałam programistką! Pod koniec grudnia stwierdziłam, że nadszedł ten czas. Że to ten moment, kiedy muszę ruszyć z miejsca. W grudniu złożyłam wypowiedzenie z mojej dotychczasowej pracy. Czułam, że ta decyzja będzie przełomowa i okazało się, że faktycznie taka była. Gdy zostałam bez pracy, poczułam, że trochę pali mi się grunt pod nogami. W związku z tym stworzyłam CV i na początku stycznia 2019 r. zaczęłam szukać pracy. Kiedyś, dawno temu, miałam sklep na Shoplo.pl. Szukając pracy, postanowiłam sprawdzić, czy czasem nie szukają kogoś do frontu. Na stronie zobaczyłam ogłoszenie na Junior Frontend Developera!!! Gdy przeczytałam wymagania i okazało się, że nie jest źle, a nawet jest całkiem nieźle, od razu wysłałam moje CV. Proces rekrutacji był kilku-etapowy, ale o tym następnym razem. W każdym razie, przeszłam go pomyślnie i jutro mija pierwszy tydzień mojej pracy jako Junior Frontend Developer 🙂 . Jestem z siebie mega dumna. Wiem, że moja ciężka praca przyniosła efekty. I wiem też jeszcze jedno – jeśli TY poświęcisz swój czas na naukę, na rozwój, na zgłębianie wiedzy – to masz szansę zmienić swoje życie i stać się tym, kim naprawdę chcesz. Ale nic nie przychodzi nam […]

\n

Artykuł Zrobiłam to! Jestem programistką! pochodzi z serwisu .

2019-02-04 20:37:06 zrobilam-to-jestem-programistka ck9qqdx4o000xi3umdjbh0w86 2019-02-04 20:37:06 2019-02-04 20:37:06 cjs7eiysw01fti3umfs6s70uc Jak wygląda rekrutacja na Junior Frontend Developera? https://bedeprogramistka.pl/rekrutacja-na-junior-frontend-developera/

Obiecałam, że napiszę Wam jak wyglądała moja rekrutacja na Junior Frontend Developera. Jednak już na samym początku muszę zaznaczyć, że nie zawsze to wygląda tak samo. Każda firma rządzi się swoimi prawami. W każdym miejscu pracujesz na innych projektach więc i rekrutacja do firm wygląda zupełnie inaczej. Tytułem wstępu – myślę, że zakres obowiązków jest szalenie istotny, przy tym jak będzie wyglądała rekrutacja. Ja w Shoplo aktualnie zajmuję się supportem dla Klientów. Tzn. jeśli ktoś ma problem ze swoim sklepem albo chce wprowadzić jakąś funkcjonalność, kontaktuje się z działem obsługi Klienta, a nasz dział rozwiązuje problemy.   Jak wyglądała rekrutacja na Junior Frontend Developera? Etap 1 Przede wszystkim wysłałam CV 😉 . Następnie dostałam maila, w którym poproszono mnie o rozwiązanie 10 zadań. Miałam na to 48h. Już zadania pokazały mi, czym mogę zajmować się w pracy. Musiałam założyć sklep i wprowadzić do niego różne rozwiązania. Zadania były od przełatwych – jak zmiana koloru nagłówków, po bardziej wymagające – stworzenie modala wykorzystującego LocalStorage. Przyznam, że dziś takie rzeczy robię w Shoplo w kilkadziesiąt minut. Ale gdy robiłam je pierwszy raz, przy niektórych musiałam trochę mocniej pomyśleć. Po wysłaniu rozwiązań dostałam informacje, że aktualnie zadania będą sprawdzane i w najbliższym czasie […]

\n

Artykuł Jak wygląda rekrutacja na Junior Frontend Developera? pochodzi z serwisu .

2019-02-16 11:31:26 jak-wyglada-rekrutacja-na-junior-frontend-developera ck9qqdx4o000xi3umdjbh0w86 2019-02-16 11:31:26 2019-02-16 11:31:26 cjtlnn6jk01hri3um54my0v04 Czy na pewno programowanie jest dla mnie? https://bedeprogramistka.pl/czy-na-pewno-programowanie-jest-dla-mnie/

Pytanie „czy programowanie jest dla mnie?” zadaje sobie nie jedna osoba. Ja dostaję od Was dziesiątki maili z pytaniami skąd macie wiedzieć czy programowanie jest dla Was? Dzisiaj mam dla Ciebie kilka rad. Aby sobie świadomie odpowiedzieć na to pytanie nie trzeba mieć szklanej kuli. Jeśli nie jesteś pewien czy programowanie jest dla Ciebie to po prostu zacznij programować 😉 . 1. Próbuj! Jeśli nie spróbujesz,  nigdy się nie dowiesz. Ja wiem, że łatwo się mówi, ale uwierz mi! Łatwo też zacząć. Nikt przecież nie każe Ci od razu rzucać dotychczasowej pracy. Nie musisz porywać się z motyką na słońce. Po prostu spróbuj i zobacz czy w to wsiąkniesz. Jeśli będzie spoko, ale bez fajerwerków – możesz sobie odpuścić. Jeśli poczujesz magię, wsiąkniesz na długo i będziesz czuć niezmierny fun z tego, że w końcu coś Ci się uda zrobić, wtedy będziesz wiedział, że to Twój kierunek. I podążaj tą drogą dalej i dalej. 2. Każdy sukces traktuj jakby był małym świętem Pamiętam moje początki, gdy każdy wieczór spędzałam na nauce programowania. Ileż ja się przy tym naklnęłam. Ileż ja razy w siebie zwątpiłam. Ale zawsze wracałam. Każdą, nawet najmniejszą pierdołę, która mi wychodziła traktowałam jako swój sukces prawie tak […]

\n

Artykuł Czy na pewno programowanie jest dla mnie? pochodzi z serwisu .

2019-03-23 15:35:08 czy-na-pewno-programowanie-jest-dla-mnie ck9qqdx4o000xi3umdjbh0w86 2019-03-23 15:35:08 2019-03-23 15:35:08 -cizra0go0007mi3ume70t3vkq ECMAScript 6: TOP 10 nowości - cz.6 - Moduły, export i import http://blog.nebula.us/28-ecmascript-6-top-10-nowosci-cz-6-moduly-i-import

Dzielenie kodu aplikacji na wiele plików jest niezbędne do utrzymania porządku w projekcie. Dotychczas JavaScript nie posiadał wbudowanych mechanizmów do wygodnego współdzielenia kodu między plikami. Deweloperzy byli zmuszeni wrzucać każdy plik do osobnego tagu script w htmlu, co było niezmiernie irytujące, bądź korzystać z zewnętrznych bibliotek, jak requireJS. Na szczęście z nadejściem ES6 moduły oraz ich import i eksport stały się proste jak niemiecka autostrada i wygodne jak fotel z wysuwanym podnóżkiem.

2017-03-01 18:09:00 ecmascript-6-top-10-nowosci-cz6-moduly-export-i-import cj4tp0i00000ri3umf7udfqvm 2017-03-01 18:09:00 2017-03-01 18:09:00 cizstrx6o007ri3um826j54r6 ECMAScript 6: TOP 10 nowości - cz.7 - Domyślne parametry funkcji http://blog.nebula.us/29-ecmascript-6-top-10-nowosci-cz-7-domyslne-parametry-funkcji

W JavaScript wszystkie argumenty funkcji, które nie zostały do niej przekazane w parametrach podczas wywołania są automatycznie ustawiane na undefined. Czasami jednak potrzebujemy przypisać jakąś konkretną domyślną wartość do argumentu. Dotychczas, aby to zrobić, trzeba było nieco pokombinować. Na szczęście zauważyli to twórcy języka i w ES6 postanowiono przekazać nam do tego celu specjaną konstrukcję składnowią.

2017-03-02 20:10:00 ecmascript-6-top-10-nowosci-cz7-domyslne-parametry-funkcji cj4tp0i00000ri3umf7udfqvm 2017-03-02 20:10:00 2017-03-02 20:10:00 cizu9925c007wi3umes5p0nqs ECMAScript 6: TOP 10 nowości - cz.8 - Object.assign http://blog.nebula.us/30-ecmascript-6-top-10-nowosci-cz-8-object-assign

W EcmaScript6 dodano bardzo wiele funkcji mających usprawnić najczęściej wykonywane czynności. Jedną z nich jest Object.assign(). Metoda ta znacznie ułatwia pracę z obiektami, czyniąc ich klonowanie, łączenie i nadpisywanie prostszym niż kiedykolwiek.

2017-03-03 20:11:00 ecmascript-6-top-10-nowosci-cz8-objectassign cj4tp0i00000ri3umf7udfqvm 2017-03-03 20:11:00 2017-03-03 20:11:00 cj4tgrfk000o0i3um0erh944m ECMAScript 6: TOP 10 nowości - cz.9 - Skróty składniowe i destructuring http://blog.nebula.us/31-ecmascript-6-top-10-nowosci-cz-9-skroty-skladniowe-i-destructuring

W ES6 poświęcono wiele uwagi skracaniu składni dla często używanych konstrukcji. Wspominałem już o "Arrow functions", czy domyślnych parametrach funkcji, ale to nie wszystko, co otrzymaliśmy do dyspozycji.

2017-07-07 06:12:00 ecmascript-6-top-10-nowosci-cz9-skroty-skladniowe-i-destructuring cj4tp0i00000ri3umf7udfqvm 2017-07-07 06:12:00 2017-07-07 06:12:00 @@ -2537,6 +2570,7 @@ cj4i0nye800nei3um7ffx3cx2 Pierwsze szkolenie stacjonarne - chyba zostanę trener cj4nqefvs00nqi3um77u2ggj8 Konfiguracja Webpack 2+ - część #3: pluginy https://www.nafrontendzie.pl/konfiguracja-webpack-2-czesc-3-pluginy Za nami już dwie części mini-serii na temat konfigurowania nowej wersji webpacka. Dotychczas dowiedzieliśmy się co nieco na temat podstawowej konfiguracji plików wejściowych oraz wyjściowych. Z ostatniego wpisu natomiast, wiemy już czym są loadery i jak możemy je wykorzystać. Dziś przyszła pora na pokazanie trzeciej, istotnej przy konfiguracji webpacka rzeczy, którą są pluginy. Myślę, że nie ma co przedłużać - zapraszam do lektury! 2017-07-03 05:55:13 konfiguracja-webpack-2-czesc-3-pluginy ck7m8brk0000ui3um0pxg4lae 2017-07-03 05:55:13 2017-07-03 05:55:13 cj4xqy2uw00o5i3um2u0vgxfg Generatory ES6 - podstawy https://www.nafrontendzie.pl/generatory-es6-podstawy W sumie to kiedyś już na blogu wyjaśniłem czym są i do czego służą generatory ES6. Było to przy okazji wpisu na temat redux-saga, która korzysta właśnie z tego, dość nowego w JavaScript, mechanizmu. Jednak od czasu tamtego posta, dostałem już kilka wiadomości z prośbą o opisanie generatorów w osobnym wpisie, postanowiłem więc dziś tę potrzebę spełnić. Jednak te maile od czytelników to fajna sprawa, bo nie miałem za bardzo pomysłu na dzisiejszy wpis… 2017-07-10 06:08:11 generatory-es6-podstawy ck7m8brk0000ui3um0pxg4lae 2017-07-10 06:08:11 2017-07-10 06:08:11 cj57qkhug00omi3um62xqb459 Frontend Developer - co to właściwie znaczy? https://www.nafrontendzie.pl/frontend-developer-wlasciwie-znaczy Ostatnio na blogu wciąż tylko wpisy czysto techniczne, postanowiłem więc dla odmiany napisać dziś coś trochę innego. Temat tego posta nasunął mi się już jakiś czas temu. Co jakiś czas dostaję bowiem maila z pytaniem, jaką wiedzę trzeba posiadać aby zacząć pracę na stanowisku Frontend Developer. Do tego na blogu NetteCode pojawił się ostatnio ciekawy artykuł, w którym autorka omawia kilka ofert pracy na to stanowisko. Wynika z tego wszystkiego, że Frontend Developer to pojęcie dość szerokie. Postaram się więc dzisiaj opisać swoje obserwacje i przedstawić kilka wersji “frontendowca”! 2017-07-17 05:55:19 frontend-developer-co-to-wlasciwie-znaczy ck7m8brk0000ui3um0pxg4lae 2017-07-17 05:55:19 2017-07-17 05:55:19 +cjhraezs0012xi3umbhi8hpxv HOC czyli komponenty wyższego rzędu w React https://www.nafrontendzie.pl/hoc-czyli-komponenty-wyzszego-rzedu-react Halo, halo! Witam po dłuższej przerwie, spowodowanej… trochę lenistwem, a trochę innymi sprawami życiowymi. No nic to. Najważniejsze, że w końcu wracam do pisania! A tematem dzisiejszego posta są komponenty wyższego rzędu w React, czyli z angielska higher order components (a skracając: HOC). W wielkim skrócie jest to technika re-używania logiki komponentów, która wbrew pozorom jest dość powszechnie stosowana. Ale o tym w dalszej części tego wpisu. 2018-05-29 06:15:00 hoc-czyli-komponenty-wyzszego-rzedu-w-react ck7m8brk0000ui3um0pxg4lae 2018-05-29 06:15:00 2018-05-29 06:15:00 ck2ryw3n401s9i3um4fe71w0m Moje talenty – test Gallupa czyli Clifton StrengthsFinder https://bedeprogramistka.pl/moje-talenty-test-gallupa-czyli-clifton-strengthsfinder/

Już od jakiegoś czasu chciałam zrobić test Gallupa (Clifton StrengthsFinder). Kilka lat temu robił go mój mąż, co jakiś czas słyszałam, że ktoś ze znajomych go zrobił i był zachwycony rezultatami. Właściwie kilka dni temu przesłuchałam podcast z prezesem firmy, w której pracuję (Słucham Gadam – Budowanie biznesu wokół pasji – Patryk Pawlikowski) i w końcu stwierdziłam, że to najwyższy czas, żeby ogarnąć temat dla siebie i zrobiłam test. O samym teście słów kilka Test Instytutu Gallupa Clifton StrengthsFinder mierzy 34 talenty. Talenty są to wzorce myślenia, postępowania czy odczuwania danych sytuacji. Zdaniem badaczy każdy człowiek ma 5 dominujących talentów. Talenty te mają być pomocne dla ludzi w rozwijaniu naszych naturalnych predyspozycji, pracy nad mocnymi stronami, które możemy wykorzystywać w każdym aspekcie życia. Samo wypełnianie testu trwało ok. 40 minut. Po skończonym teście od razu dostałam wyniki, z krótkim opisem poszczególnych cech. Test jest płatny. Ja wybrałam opcję, która pokazuje 5 głównych cech. Wersja ta kosztuje 19.99$. Można też kupić wersję, która pokazuje wszystkie talenty – ta wersja kosztuje 39.99$. Gdyby ktoś z Was chciał zrobić sobie taki test to możecie to zrobić na tej stronie: top 5, i pełna wersja. Jeszcze jedna istotna kwestia – test możecie zrobić w języku […]

\n

Artykuł Moje talenty – test Gallupa czyli Clifton StrengthsFinder pochodzi z serwisu .

2019-11-09 19:33:58 moje-talenty-test-gallupa-czyli-clifton-strengthsfinder ck9qqdx4o000xi3umdjbh0w86 2019-11-09 19:33:58 2019-11-09 19:33:58 ck7thk34001xsi3um47kg2n2e 10 przydatnych projektów w JavaScript https://bedeprogramistka.pl/10-przydatnych-projektow-w-javascript/

Nadszedł taki czas, kiedy większość społeczeństwa powinna zostać w domu. To ten moment, kiedy zyskujemy dodatkowy czas, który możemy wykorzystać m.in. na nasz rozwój. A co byś powiedział/a na to, aby przez kolejne 10 dni (od poniedziałku 16 marca do piątku 20 marca i od poniedziałku 23 marca do piątku 27 marca) zrobić 10 przydatnych projektów w JavaScript? Przygotowałam dla Ciebie przykładową listę 10 projektów, które możesz z powodzeniem zrobić w tych dniach. Licznik odliczający czas do daty wpisanej w odpowiednim polu. Hamburger menu. Rozwijany acordion section np. FAQ. Przełącznik pozwalający zmienić layout strony na ciemny/jasny. Funkcjonalność pozwalająca zmienić obrazek po kliku na dany element. Popup zapisujący dane w localStorage, aby wyświetlał się tylko raz jednemu użytkownikowi. Zrobienie przełącznika scrollującego stronę do danej sekcji / na samą górę strony. Zmiana koloru tła po wpisaniu w input koloru hex. Counter zliczający ilość słów wpisanych do pola tekstowego. Sprawdzanie za pomocą JavaScript, która jest godzina i wyświetlanie użytkownikowi odpowiedniego do tej pory komunikatu (np. dzień dobry, dobry wieczór).   Trzymam kciuki! A może masz inne pomysły jakie projekty można zrobić w tych dniach? 🙂   Ciał! Natka.

\n

Artykuł 10 przydatnych projektów w JavaScript pochodzi z serwisu .

2020-03-15 20:22:48 10-przydatnych-projektow-w-javascript ck9qqdx4o000xi3umdjbh0w86 2020-03-15 20:22:48 2020-03-15 20:22:48 ck9qqdx4o0217i3um1cb2es9x Aplikacje do nauki dla dzieci – recenzja https://bedeprogramistka.pl/aplikacje-do-nauki-dla-dzieci-recenzja/

Recenzja aplikacji do nauki – też programowania! 🙂 W dzisiejszym wpisie a właściwie i w filmie (poniżej znajdziesz link do filmu na YT) razem z moją córką przeprowadzimy dla Was recenzję kilku aplikacji do nauki. Znajdziecie tutaj aplikacje do nauki (Squla), do nauki programowania (Scratch Jr, Lightboot) i do nauki logicznego myślenia (Connect the dots, Logic land, Kids brain trainer). Tak naprawdę aplikacji tego typu jest masa. My postanowiłyśmy się skupić na kilku, które faktycznie przetestowałyśmy i serdecznie polecamy.   Sytuacja z COVID-19 spowodowała, że zaczęłam się zastanawiać w jaki sposób mogę moim dzieciom pomóc w rozwoju. Wcześniej sobie nawet z tego sprawy nie zdawałam, ale tak naprawdę całą naukę zwaliłam poniekąd na przedszkole i żłobek. Owszem czytaliśmy codziennie książki dzieciom na dobranoc, dużo rozmawialiśmy, dyskutowaliśmy na przeróżne tematy – np. ewolucja i kwestia powstawania świata czy kwestia różnych wiar, ale mimo wszystko, robiliśmy to w godzinach 6:00-8:00 i 17:00-21:00. Teraz przyszedł taki czas, że spędzamy z dziećmi cały czas. Ale dokładnie cały – od momentu pobudki do momentu pójścia spać. Przyznam, że sytuacja okazała się być dość trudna i wyczerpująca, szczególnie że nasze dzieci są aktywne, ciekawe świata a my pracujemy zdalnie. Po pierwszym tygodniu ogłupiania dzieci bajkami stwierdziłam, […]

\n

Artykuł Aplikacje do nauki dla dzieci – recenzja pochodzi z serwisu .

2020-05-03 07:26:03 aplikacje-do-nauki-dla-dzieci-recenzja ck9qqdx4o000xi3umdjbh0w86 2020-05-03 07:26:03 2020-05-03 07:26:03 @@ -2574,8 +2608,6 @@ cj3yk1k8000moi3umehq253ai Konkurs na animację grafiki SVG – Kodu.je http://so cj4144qo800mui3um833m07dv Aplikujesz o pracę? Poprowadź rozmowę rekrutacyjną! http://sowaprogramuje.pl/starasz-sie-o-prace-poprowadz-rozmowe-rekrutacyjna/

Rozmowy rekrutacyjne to nie najprostsze rozmowy.  Ale jest sposób, żeby sprawić, że będą łatwiejsze. Można taką rozmowę poprowadzić! W tym poście zdradzę Ci jak możesz, jako starający się o pracę programista / programistka możesz poprowadzić rozmowę rekrutacyjną. Jak się przygotować? Są dwie istotne rzeczy które należy zrobić przed rozmową kwalifikacyjną (oprócz przygotowania odpowiedniego ubioru, zebrania informacji …

\n

Czytaj dalej Aplikujesz o pracę? Poprowadź rozmowę rekrutacyjną!

\n

Artykuł Aplikujesz o pracę? Poprowadź rozmowę rekrutacyjną! pochodzi z serwisu Sowa Programuje.

2017-06-17 10:00:53 aplikujesz-o-prace-poprowadz-rozmowe-rekrutacyjna ckeud40cw000qi3umbryt365k 2017-06-17 10:00:53 2017-06-17 10:00:53 cj46s68y000n0i3umeou2gkqs Gala Finałowa konkursu Daj się Poznać http://sowaprogramuje.pl/sowaprogramuje-na-gali-finalowej-konkursu-daj-sie-poznac/

Czas na małe podsumowanie konkursu i sobotniej Gali Finałowej! Konkurs Daj się Poznać to świetna inicjatywa. Nie tylko daje ogromne korzyści każdemu kto zdecyduje się w niego zaangażować, ale również wszystkim osobom, które potem korzystają z powstałych wartościowych treści. Nie dość, że podczas rozwijania projektu uczysz się programowania, piszesz bloga, poznajesz ciekawych ludzi, to jeszcze …

\n

Czytaj dalej Gala Finałowa konkursu Daj się Poznać

\n

Artykuł Gala Finałowa konkursu Daj się Poznać pochodzi z serwisu Sowa Programuje.

2017-06-21 09:12:45 gala-finalowa-konkursu-daj-sie-poznac ckeud40cw000qi3umbryt365k 2017-06-21 09:12:45 2017-06-21 09:12:45 ckdzzi4000263i3umdbg8gj38 Czym jest low-code i no-code? https://fsgeek.pl/post/czym-jest-low-code-no-code Czy praca programistów jest zagrożona? Słyszeliście o podejściu no-code lub low-code do tworzenia oprogramowania? Ja ostatnio spotkałem się z opinią, że w przyszłości drastycznie zmienią rynek pracy. Czym są te rozwiązania i czy jest się czego bać? No i co ze sztuczną inteligencją? 2020-08-18 13:30:00 czym-jest-low-code-i-no-code ckhxjb6o0000yi3umb3hg09jv 2020-08-18 13:30:00 2020-08-18 13:30:00 -cjhraezs0012xi3umbhi8hpxv HOC czyli komponenty wyższego rzędu w React https://www.nafrontendzie.pl/hoc-czyli-komponenty-wyzszego-rzedu-react Halo, halo! Witam po dłuższej przerwie, spowodowanej… trochę lenistwem, a trochę innymi sprawami życiowymi. No nic to. Najważniejsze, że w końcu wracam do pisania! A tematem dzisiejszego posta są komponenty wyższego rzędu w React, czyli z angielska higher order components (a skracając: HOC). W wielkim skrócie jest to technika re-używania logiki komponentów, która wbrew pozorom jest dość powszechnie stosowana. Ale o tym w dalszej części tego wpisu. 2018-05-29 06:15:00 hoc-czyli-komponenty-wyzszego-rzedu-w-react ck7m8brk0000ui3um0pxg4lae 2018-05-29 06:15:00 2018-05-29 06:15:00 -cjlop80yo017ii3umbibec82c Context API w React! https://www.nafrontendzie.pl/context-api-react Wraz z pojawieniem się wersji v16.3.0 Reacta, do naszych rąk trafiła całkiem nowa i myślę, że całkiem przydatna funkcjonalność. Mowa tutaj o tytułowym Context API, które pozwala na wprowadzenie do aplikacji pewnych globalnych ustawień, od których zależeć mogą niektóre komponenty. Dzięki temu implementacja w aplikacji, na przykład, wielu wersji kolorystycznych staje się dziecinnie prosta. Zresztą sam się za chwilę o tym przekonasz! 2018-09-05 05:25:00 context-api-w-react ck7m8brk0000ui3um0pxg4lae 2018-09-05 05:25:00 2018-09-05 05:25:00 cjqnadcw001d6i3um7n2r2nn9 Co dalej z blogiem i kursem on-line? https://www.nafrontendzie.pl/co-dalej-blogiem-kursem-online Halo halo! Witam po raz pierwszy od września 2018 kiedy to tutaj, na blogu, pojawił się ostatni wpis… Dawni, stali czytelnicy bloga pewnie zastanawiają się co się ze mną dzieje, dlaczego nic się tutaj nowego nie pojawia i czy w ogóle blog jeszcze żyje. Sam się ostatnio nad tym zastanawiałem, a że przyszedł nowy rok (wiadomo… czas podsumowań, co widać choćby w polskiej, programistycznej blogosferze), to postanowiłem zebrać się w sobie i w końcu coś napisać. 2019-01-08 05:00:00 co-dalej-z-blogiem-i-kursem-on-line ck7m8brk0000ui3um0pxg4lae 2019-01-08 05:00:00 2019-01-08 05:00:00 cjs9xkg0001fvi3um79x30fqe Create React App - generowanie stron statycznych https://www.nafrontendzie.pl/create-react-app-generowanie-stron-statycznych Inspirację do napisania tego wpisu, jak to często już u mnie bywało, przyniosło samo życie. Jednym z pierwszych projektów w Going., w którym przyszło mi brać udział było stworzenie statycznej strony strony www. Mogłem oczywiście napisać wszystko w czystym HTML + CSS + jQuery (sic…). Strona miała jednak zawierać dość dużo logiki biznesowej w JavaScript, do tego routing, a poza tym chodziło również o to, aby rozwiązanie było podstawą do dalszej rozbudowy w przyszłości. 2019-02-18 06:00:00 create-react-app-generowanie-stron-statycznych ck7m8brk0000ui3um0pxg4lae 2019-02-18 06:00:00 2019-02-18 06:00:00 ck7m8brk001xji3um5rbm9ai5 3 nawyki wspierające rozwój programisty https://www.nafrontendzie.pl/3-nawyki-wspierajace-rozwoj-programisty Ostatnio sporo się zmieniło w moim życiu… Staram się jednak obrócić te zmiany na swoją korzyść. W tym celu postanowiłem wprowadzić do swojej codzienności kilka nawyków, które pomogą mi w samo-rozwoju. Kilka z nich dotyczy oczywiście mojego rozwoju jako programista, myślę więc, że część z czytelników bloga może być nimi zainteresowana. 2020-03-10 18:30:00 3-nawyki-wspierajace-rozwoj-programisty ck7m8brk0000ui3um0pxg4lae 2020-03-10 18:30:00 2020-03-10 18:30:00 @@ -2586,6 +2618,7 @@ cirpziwqo005qi3umcxmhf6f2 Nawyki mistrzów https://kernelgonnapanic.pl/2016/08/1 cirx3ovhc005ri3umddhq5my9 Exercism.io - rozwiń skrzydła jako programista https://kernelgonnapanic.pl/2016/08/16/Exercismio/

Jestem wielką orędowniczką idei programowania jako hobby czy zawodu dla każdego. Dla chłopaków, dziewczyn, dla młodszych i tych trochę starszych. Od kiedy jesteśmy w stanie znaleźć w internecie mnóstwo tutoriali i kursów dla początkujących, każdy może rozpocząć swoją przygodę z kodowaniem. Znam przykłady wielu ludzi, którzy tak właśnie zaczynali, a teraz podążają programistyczną ścieżką kariery.
2016-08-16 06:41:00 exercismio-rozwin-skrzydla-jako-programista ckesj8kg0000vi3um42jmc86u 2016-08-16 06:41:00 2016-08-16 06:41:00 cisphoa80005ui3umhhi9b4lf Pamiętnik programistki https://kernelgonnapanic.pl/2016/09/05/Pamitnik-programistki-1/

Hej wszystkim!
Ostatnio stwierdziłam, że fajnie byłoby, gdybym miała na blogu taką przestrzeń, w której mogłabym podzielić się z Wami tym, co u mnie słychać, czym się ostatnio interesuję i co tam sobie kodzę. W ten sposób zrodziła się koncepcja “Pamiętnika programistki”. I właśnie dziś zapraszam Was na pierwszy post tej nowej serii.
2016-09-05 03:30:00 pamietnik-programistki ckesj8kg0000vi3um42jmc86u 2016-09-05 03:30:00 2016-09-05 03:30:00 cj4bmp29s00n4i3umfbxgfe5q Przewodnik początkującego freelancera – Upwork http://sowaprogramuje.pl/przewodnik-poczatkujacego-freelancera-upwork/

Masz dość siedzenia w biurze i chcesz zostać freelancerem? Przed podjęciem ostatecznej decyzji należy dobrze się zastanowić. Gdzie się zarejestrować? Jest wiele portalów freelancerskich np.: Upwork Toptal Guru Freelancer Upwork, Guru i Freelancer – tutaj może zarejestrować się każdy. Toptal jest portalem dla zaawansowanych profesjonalistów – aby się tam dostać trzeba przejść szereg rozmów i trudnych …

\n

Czytaj dalej Przewodnik początkującego freelancera – Upwork

\n

Artykuł Przewodnik początkującego freelancera – Upwork pochodzi z serwisu Sowa Programuje.

2017-06-24 18:38:16 przewodnik-poczatkujacego-freelancera-upwork ckeud40cw000qi3umbryt365k 2017-06-24 18:38:16 2017-06-24 18:38:16 +cja3vayfs00uri3um9nbh70x3 Załączanie skryptów za pomocą CDN – plusy, minusy, przykłady https://tworcastron.pl/blog/zalaczanie-skryptow-pomoca-cdn-plusy-minusy-przyklady/

Czym jest CDN? CDN jest to skrót od Content Delivery Network, czyli jakaś sieć mająca na celu dostarczanie treści do odbiorców.  Nawet jeśli brzmi...

\n

Artykuł Załączanie skryptów za pomocą CDN – plusy, minusy, przykłady pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-11-17 12:15:19 zalaczanie-skryptow-za-pomoca-cdn-plusy-minusy-przyklady ckbbw3jvs000li3umgw19edq9 2017-11-17 12:15:19 2017-11-17 12:15:19 cj4lg21io00noi3umb9l04f83 12 przydatnych narzędzi Frontend Developera http://sowaprogramuje.pl/12-przydatnych-narzedzi-frontend-developera/

Oto 12 darmowych narzędzi online, które są przydatne w pracy Frontend Developera. 1. Generator cieni Problem z tworzeniem cieni na elementach w CSSie? Korzystaj z tego generatora, zdecydowanie ułatwia sprawę 😉 2. Generator gradientów Potrzebujesz na swojej stronie użyć gradientu? Nie ma sprawy, oto proste narzędzie do mieszania kolorów i generowania kodu. 3. Cubic Bézier generator Dla fanów CSSa i …

\n

Czytaj dalej 12 przydatnych narzędzi Frontend Developera

\n

Artykuł 12 przydatnych narzędzi Frontend Developera pochodzi z serwisu Sowa Programuje.

2017-07-01 15:30:06 12-przydatnych-narzedzi-frontend-developera ckeud40cw000qi3umbryt365k 2017-07-01 15:30:06 2017-07-01 15:30:06 cj4p64hu000nsi3um86sx51xp 10 błędów początkujących Frontend Developerów część 1 http://sowaprogramuje.pl/10-bledow-poczatkujacych-frontend-developerow-czesc-1/

W programowaniu od samego początku warto dbać o dobre praktyki. Jednak czasami w trakcie nauki można przeoczyć lub zbagatelizować pewne kwestie. Stąd u początkujących Frontend Developerów pojawiają się błędy w kodzie. Razem z Mariuszem Bugajskim, autorem bloga blog.bugajsky.pl i zwycięzcą konkursu Daj się Poznać 2017, zdecydowaliśmy się napisać serię postów o tej tematyce, aby pomóc …

\n

Czytaj dalej 10 błędów początkujących Frontend Developerów część 1

\n

Artykuł 10 błędów początkujących Frontend Developerów część 1 pochodzi z serwisu Sowa Programuje.

2017-07-04 06:03:09 10-bledow-poczatkujacych-frontend-developerow-czesc-1 ckeud40cw000qi3umbryt365k 2017-07-04 06:03:09 2017-07-04 06:03:09 cj54eb64w00ofi3um81qy9lln Reaktywacja animacji SVG za pomocą JavaScript http://sowaprogramuje.pl/reaktywacja-animacji-svg-pomoca-javascript/

Niedawno w ramach konkursu  organizowanego przez Kodu.je wykonałam projekt animacji grafiki SVG. Mogę się pochwalić, że jury konkursu przyznało mojej animacji wyróżnienie, z czego się bardzo cieszę. 🙂 Efekty mojej pracy można oglądać na CodePenie: See the Pen SVG animation by SowaProgramuje (@sowaProgramuje) on CodePen. Jak dodać klasę na elemencie SVG za pomocą JavaScript? Podczas pracy …

\n

Czytaj dalej Reaktywacja animacji SVG za pomocą JavaScript

\n

Artykuł Reaktywacja animacji SVG za pomocą JavaScript pochodzi z serwisu Sowa Programuje.

2017-07-14 21:48:50 reaktywacja-animacji-svg-za-pomoca-javascript ckeud40cw000qi3umbryt365k 2017-07-14 21:48:50 2017-07-14 21:48:50 @@ -2599,6 +2632,7 @@ cj84xwcpc00shi3umd12db67n Jak zostać dobrym mentorem programowania? http://sowa cj8t6qaio00t7i3um2bru4sva Menu nie musi być nudne – 10 inspirujących efektów http://sowaprogramuje.pl/menu-nie-musi-byc-nudne/

Zaskocz użytkownika ciekawą animacją menu na Twojej stronie lub aplikacji! Nawigacja jest bardzo ważnym elementem każdej strony internetowej. Poniżej znajdziesz 10 inspiracji – zarówno na wersję desktop-ową jak i na urządzenia mobilne. 1. Toggle Burger Menu Animation Autor:  Marian Breitmeyer See the Pen Toggle Burger Menu Animation by Marian Breitmeyer (@marianbreitmeyer) on CodePen. 2. Page Tilt Effect Autor: Marco …

\n

Czytaj dalej Menu nie musi być nudne – 10 inspirujących efektów

\n

Artykuł Menu nie musi być nudne – 10 inspirujących efektów pochodzi z serwisu Sowa Programuje.

2017-10-15 20:10:00 menu-nie-musi-byc-nudne-10-inspirujacych-efektow ckeud40cw000qi3umbryt365k 2017-10-15 20:10:00 2017-10-15 20:10:00 cj9enyda800tui3um8r175pnj Junior Frotnend Developer – pierwszy dzień i pierwszy miesiąc w pracy http://sowaprogramuje.pl/frontend-developer-pierwsza-praca/

Moja droga do zostania Frontend Developerem była dość kręta. Swoją historię opisuję w tym poście. Minął już ponad rok od odkąd zaczęłam się uczyć od podstaw HTML-a, CSS-a i JS-a. Przed podjęciem tej stacjonarnej pracy miałam okazję pracować zdalnie nad dwoma zleceniami. A jak wyglądał mój pierwszy dzień i pierwszy miesiąc pracy w agencji tworzącej sklepy …

\n

Czytaj dalej Junior Frotnend Developer – pierwszy dzień i pierwszy miesiąc w pracy

\n

Artykuł Junior Frotnend Developer – pierwszy dzień i pierwszy miesiąc w pracy pochodzi z serwisu Sowa Programuje.

2017-10-30 20:55:20 junior-frotnend-developer-pierwszy-dzien-i-pierwszy-miesiac-w-pracy ckeud40cw000qi3umbryt365k 2017-10-30 20:55:20 2017-10-30 20:55:20 cja30ofuo00uqi3umd50i7opo 4Developers Łódź – relacja z konferencji http://sowaprogramuje.pl/4developers-lodz-relacja/

Po raz pierwszy blog SowaProgramuje został patronem medialnym konferencji! Chciałam się podzielić moim wrażeniami z regionalnej edycji Festiwalu Technologicznego 4Developers Łódź. Podczas konferencji wyróżnione były 4 ścieżki tematyczne związane ze światem IT: JVM (Java Virtual Machine), JavaScript, Databases oraz Agile. Nie było obowiązku ani zapisów na konkretną ścieżkę. Można było uczestniczyć w dowolnych prelekcjach, dlatego myślę, że każdy znalazł …

\n

Czytaj dalej 4Developers Łódź – relacja z konferencji

\n

Artykuł 4Developers Łódź – relacja z konferencji pochodzi z serwisu Sowa Programuje.

2017-11-16 21:58:00 4developers-lodz-relacja-z-konferencji ckeud40cw000qi3umbryt365k 2017-11-16 21:58:00 2017-11-16 21:58:00 +cjiw0rico014hi3umgu1ba21z Programisto, dbaj o oczy! http://sowaprogramuje.pl/programisto-dbaj-o-oczy/

Programisto, dbaj o swoje oczy? Zawód programisty wiąże się z wielogodzinnym spędzaniem czasu przed ekranami, dlatego chciałam zachęcić Cię do zadbania o swoje oczy. Kilka małych nawyków może sprawdzić, że będziesz się cieszyć dłużej dobrym wzrokiem. Co ja robię, żeby zadbać o swój wzrok? Noszę okulary Osobiście nie mam wady wzroku, ale pół roku temu zdecydowałam …

\n

Czytaj dalej Programisto, dbaj o oczy!

\n

Artykuł Programisto, dbaj o oczy! pochodzi z serwisu Sowa Programuje.

2018-06-26 18:23:21 programisto-dbaj-o-oczy ckeud40cw000qi3umbryt365k 2018-06-26 18:23:21 2018-06-26 18:23:21 cjabai30o00v3i3umeo5i3hwa Nieudane rozmowy kwalifikacyjne – co można z nich wynieść? http://sowaprogramuje.pl/nieudane-rozmowy-kwalifikacyjne/

Od jakiegoś czasu starasz się o swoją pierwszą pracę jako programista / programistka, ale jeszcze nie udało Ci się jej dostać? Ten artykuł jest dla Ciebie! 🙂 Na rynek pracy wkracza coraz więcej osób, które chcą pracować jako programiści. W internecie jest wiele darmowych i ciekawych materiałów do nauki różnych języków programowania. Pojawia się mnóstwo intensywnych …

\n

Czytaj dalej Nieudane rozmowy kwalifikacyjne – co można z nich wynieść?

\n

Artykuł Nieudane rozmowy kwalifikacyjne – co można z nich wynieść? pochodzi z serwisu Sowa Programuje.

2017-11-22 16:55:09 nieudane-rozmowy-kwalifikacyjne-co-mozna-z-nich-wyniesc ckeud40cw000qi3umbryt365k 2017-11-22 16:55:09 2017-11-22 16:55:09 cjfsovk4o010mi3um6uxj8ag3 girls.js Kraków http://sowaprogramuje.pl/girls-js-krakow/

  Mogę oficjalnie ogłosić, że już niebawem w odbędą się warsztaty girls.js! Warsztaty były już organizowane w Warszawie, Łodzi, Poznaniu, ale jeszcze nie było ich w Krakowie, stąd zdecydowałam się wesprzeć tą inicjatywę i zająć się jej organizacją. Czego można się spodziewać? 9 uczestniczek 3 mentorów i mentorek 1 dzień pełny energii, wiedzy i praktyki Darmowe warsztaty …

\n

Czytaj dalej girls.js Kraków

\n

Artykuł girls.js Kraków pochodzi z serwisu Sowa Programuje.

2018-04-09 20:28:09 girlsjs-krakow ckeud40cw000qi3umbryt365k 2018-04-09 20:28:09 2018-04-09 20:28:09 cjgnumm94011ki3um8b0d6wmv girls.js – darmowe warsztaty z JavaScript dla kobiet http://sowaprogramuje.pl/darmowe-warsztaty-javascript-dla-kobiet/

Girls.js – darmowe warsztaty z JavaScript dla kobiet Jak już pisałam w poprzednim poście jestem główną koordynatorką darmowych warsztatów z JavaScript w Krakowie. Inicjatywa nosi nazwę girls.js i została zapoczątkowana w Warszawie. Podczas pierwszej krakowskiej edycji zapewniamy miejsca dla 9 uczestniczek. Rekrutacja dobiegła już końca, ogłosiliśmy już listę szczęśliwych warsztatowiczek. Warto nadmienić, że został pobity w liczbie osób na …

\n

Czytaj dalej girls.js – darmowe warsztaty z JavaScript dla kobiet

\n

Artykuł girls.js – darmowe warsztaty z JavaScript dla kobiet pochodzi z serwisu Sowa Programuje.

2018-05-01 15:50:01 girlsjs-darmowe-warsztaty-z-javascript-dla-kobiet ckeud40cw000qi3umbryt365k 2018-05-01 15:50:01 2018-05-01 15:50:01 @@ -2625,7 +2659,6 @@ cj2bsdq2r00hli3um3nlm5ska Menu w nowej odsłonie http://devinspe.blogspot.com/20 cj2j9h82o00iji3umap905m04 Gulp - pierwsze kroki http://devinspe.blogspot.com/2017/05/gulp-pierwsze-kroki.html

Ostatnio nie wiem, w co ręce włożyć. Chcąc złapać kilka srok za ogon, rozgrzebałam parę różnych tematów, luźno powiązanych ze sobą. W efekcie: dużo jest zaczęte, mało jest skończone. Wszystkiemu winna... pogoda! ;)

Wśród wspomnianych "rozgrzebek" znalazł się też Gulp, z którym próbuję zawrzeć bliższą znajomość.

Gulp - logo

Gulp służy do automatyzowania powtarzalnych zadań (głównie dotyczących plików). Szczerze mówiąc, nie odczuwam teraz szczególnie palącej potrzeby używania go (BUKA to mały projekt, a ja sama, będąc na początku programistycznej drogi, chyba nie do końca mam świadomość, co tracę, nie korzystając z żadnego narzędzia do automatyzacji). Niemniej - mówią na mieście, że warto coś takiego znać i umieć używać. Dlatego poczyniłam pierwsze kroki w tym kierunku. Opisuję je poniżej, by były mi (a może i innym mnie podobnym) pomocą w potrzebie.


Zatem - co trzeba zrobić, by włączyć Gulpa do swojego projektu?


KROK 1: INSTALACJA

npm install -g gulp-cli

  • instaluje program Gulp (runner) na danym komputerze
  • oznacza to, że Gulp staje się dostępny w linii poleceń (jeszcze nie w node modules)
  • polecenie wykonywane raz per maszyna

npm install --save-dev gulp
  • instaluje lokalnie (do mojego projektu) Gulpa jako takiego
  • oznacza to, że Gulp staje się dostępny w danym projekcie w node modules
  • polecenie wykonywane osobno per każdy projekt
  • zależność jest dopisywana automatycznie w pliku package.json w devDependencies

npm install --save-dev gulp-concat
  • instaluje lokalnie (do mojego projektu) gulpowy plugin o nazwie 'concat', który łączy (konkatenuje) wiele plików w jeden
  • zależność jest dopisywana automatycznie w pliku package.json w devDependencies


KROK 2: DODANIE PLIKU GULPFILE.JS


Następnie należy stworzyć w projekcie nowy plik gulpfile.js (taka nazwa jest wymagana przez Gulp), który będzie zawierać konfigurację tasków Gulpa: 

var gulp = require('gulp');
var concat = require('gulp-concat');

Słowem komentarza:
  • w node.js jest dostępna specjalna funkcja require (niedostępna w przeglądarce), która ładuje zawartość modułu js do zmiennej (tutaj modułem jest 'gulp');
  • ładowanie odbywa się tutaj synchroniczne, bo node.js operuje w tym przypadku w ramach jednego komputera, więc wszystkie rzeczy "ma" pod ręką (nie ma tu potrzeby ładownia asynchronicznego);
  • zmienna gulp to Gulp sam w sobie, zmienna concat to plugin Gulpa (odpowiadający za wspomnianą wcześniej konkatenację plików);
  • każdy plugin Gulpa będzie miał swoją osobną zmienną i swój osobny moduł (będzie osobno instalowany npm-em i osobno require'owany do pliku gulpfile.js);
  • natomiast require('gulp') jest wykonywane tylko raz


KROK 3: STWORZENIE PIERWSZEGO TASKA


Przykładowy task wygląda tak: 

gulp.task('scripts', function() {
  return gulp.src(['./app.js', './utils.js', './model.js'])
  .pipe(concat('all.js'))
  .pipe(gulp.dest('./dist/'));
});

Słowem komentarza:
  • gulp.task - tworzy nowy task
  • pierwszy parametr 'scripts' to nazwa taska; wg tej nazwy będzie on uruchamiany z linii poleceń (dla powyższego przykładu będzie to polecenie: gulp scripts):
  • drugi parametr, czyli function, określa, co ten task ma robić (w powyższym przypadku: co i skąd wziąć, co z tym zrobić, gdzie zrzucić wynik)


Co się zmieniło na tym etapie w projekcie?

Do tego momentu miałam tylko pliki źródłowe, zawierające kod aplikacji: app.js, utils.js, model.js. Od tej pory mam pliki źródłowe oraz tzw. zbudowaną aplikację (z ang. build files, bundles), czyli dotychczasowe osobne pliki połączone w jeden plik - all.js. Co istotne - jedne muszą być oddzielone od drugich. I tak:

  • pliki źródłowe trafiają do folderu src (nazwę można dowolnie określić, src to popularna konwencja); trzeba więc zaktualizować ścieżki w index.html, aby były aktualne, jeśli zdarzy się skorzystać ze źródłowych plików do odpalenia apki
  • zbudowana apka trafia do folderu dist (nazwa - jw.; inna popularna nazwa to build)


KROK 4: AKTUALIZACJA PLIKU .GITIGNORE

Zbudowana apka jest wtórna względem źródeł, dlatego w repozytorium należy trzymać tylko pliki źródłowe. Build powinien być ignorowany przez gita (tj. powinien pozostawać poza repo), dlatego do .gitignore trzeba dodać nazwę folderu, w którym znajduje się utworzony teraz build (i w którym znajdą się wszystkie inne pliki, które zostaną stworzone innymi taskami Gulpa w przyszłości) - u mnie jest to folder o nazwie 'dist'.



KROK 5: TWORZENIE KOLEJNYCH TASKÓW


gulp.task('default', ['scripts']);

  • powyższa linijka tworzy gulpowy task o nazwie 'default', który będzie uruchamiać stworzony wcześniej task o nazwie 'scripts'
  • dzięki temu nie będę musiała za każdym razem pisać gulp scripts, chcąc uruchomić task 'scripts' (wystarczy samo gulp):


gulp.task('watch', ['default'], function() {
  gulp.watch([appJs], ['scripts']);
});
  • tworzy task o nazwie 'watch'
  • ustawia on pojedynczego 'watchera', który nasłuchuje na plikach podanych w lewej tablicy [appJs] - jeśli coś się w nich zmieni, zostaną wykonane taski zdefiniowane w prawej tablicy (u mnie na razie jest jeden task), czyli ['scripts']

  • każdy gulp.watch to osobny, niezależny 'watcher', którego działanie można streścić tak:
    • gulp.watch nasłuchuje na plikach i folderach na dysku twardym;
    • jeśli system operacyjny wyśle sygnał, że nastąpiła zmiana w jakiejś ścieżce - gulp.watch sprawdza, czy jest to ścieżka, na której nasłuchuje
    • jeśli okaże się, że tak, to wtedy gulp odpala odpowiednie taski
  • zmianą na plikach/folderach może być:
    • zmiana zawartości
    • stworzenie
    • zmiana ścieżki
    • zmiana nazwy


Na koniec dnia mój plik gulpfile.js wygląda tak:


var gulp = require('gulp');
var concat = require('gulp-concat');

var appJs = ['./src/app.js', './src/utils.js', './src/model.js'];

gulp.task('scripts', function() {
  return gulp.src(appJs)
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('watch', ['default'], function() {
    gulp.watch([appJs], ['scripts']);
});

gulp.task('default', ['scripts']);


2017-05-10 17:31:00 gulp-pierwsze-kroki cj4phfytc000pi3um4bh44exz 2017-05-10 17:31:00 2017-05-10 17:31:00 cj2p8pf9d00iyi3umb2sr1zdn Automatyzacja widoku z Gulpem http://devinspe.blogspot.com/2017/05/automatyzacja-widoku-z-gulpem.html

Oficjalnie cofam to, co napisałam tutaj. Nie wszystko oczywiście, a tylko kawałek o tym, że nie mam palącej potrzeby używania narzędzia do automatyzacji, bo apka mała i piszę ją sama, w pojedynkę. Otóż - po zainstalowaniu Handlebarsowego pluginu do Gulpa dobitnie przekonałam się, o ile szybciej i wygodniej jest z Gulpem niż bez niego. Tak więc - potrzebuję go. To więcej niż pewne.

W ogóle wraz z wprowadzeniem Gulpa w kodzie mojej aplikacji zaszły spore zmiany. (Nie spodziewałam się, że Gulp aż tyle zmieni.) Pewne rzeczy nabrały przyspieszenia i stały się o wiele prostsze. Ale po kolei.

źródło: pixabay.com

Co i jak się zmieniło?

Przede wszystkim, dodanie pluginu Handlebars znacząco uprościło tworzenie warstwy widoku, ustrukturyzowało pliki i skróciło kod o kilkanaście linijek. Przed zastosowaniem Gulpa miałam w index.html kilka osobnych szablonów Handlebars. Każdy z nich wymagał skomplilowania oraz wywołania - z odpowiednimi danymi, które docelowo miały znaleźć się w widoku. Do kompilowania szablonów (linijki 9-19) używałam funkcji compileSingleHbsTemplate (linijki 5-8):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
var app = {
  templates: {},
  models: {},
  helper: {
    compileSingleHbsTemplate: function(selector) {
      var source = $(selector).html();
      return Handlebars.compile(source);
    },
    compileHbsTemplates: function() {
      app.templates.homePage = app.helper.compileSingleHbsTemplate('#home');
      app.templates.addAndEditBookFormTemplate = app.helper.compileSingleHbsTemplate('#add-edit-book');
      app.templates.filterBooksPageTemplate = app.helper.compileSingleHbsTemplate('#filter-books');
      app.templates.wishListPage = app.helper.compileSingleHbsTemplate('#wish-list');
      app.templates.booksListPage = app.helper.compileSingleHbsTemplate('#books-list');
      app.templates.submenuFormsTemplate = app.helper.compileSingleHbsTemplate('#submenu-forms');
      app.templates.submenuGenresTemplate = app.helper.compileSingleHbsTemplate('#submenu-genres');
      app.templates.formsListTemplate = app.helper.compileSingleHbsTemplate('#forms');
      app.templates.genresListTemplate = app.helper.compileSingleHbsTemplate('#genres');
    },

  (...)
}

Po zastosowaniu Gulpa cały powyższy kod stał się zbędny, ponieważ kompilację szablonów wykonuje - odpowiednio wcześniej skonfigurowany - task Gulpa. Dodatkowo plik index.html stał się czytelniejszy, ponieważ wszystkie szablony Handlebars zostały z niego wycięte i znalazły się w osobnych plikach.


Gulp Handlebars - konfiguracja


PUNKT WYJŚCIA

  • Do instalowania Handlebarsowego pluginu zabrałam się, mając już zainstalowanego Gulpa na moim komputerze i w projekcie, więc te kroki tutaj pomijam (o tym, jak to zrobić, można przeczytać pod tym linkiem).
  • Posiłkowałam się dokumentacją dostępną pod adresem npmjs.com/package/gulp-handlebars.

KROKI:

  • Zaczęłam od doinstalowania gulp-handlebars, gulp-wrap oraz gulp-declare jako zależności developerskich (devDependencies w package.json) - przy użyciu komendy npm install --save-dev gulp-handlebars gulp-wrap gulp-declare.
  • Następnie w pliku gulpfile.js dodałam poniższe pluginy, używając funkcji require:
    • var handlebars = require('gulp-handlebars');
    var wrap = require('gulp-wrap');
    var declare = require('gulp-declare');

  • Kolejnym krokiem była konfiguracja Gulpowego taska, odpowiedzialnego za kompilowanie szablonów Handlebars:
    • Najpierw utworzyłam zamienną templatesHbs, do której przypisałam (jako string w liście) ścieżkę dostępu do plików źródłowych, zawierających poszczególne szablony Handelbars (które zostaną wycięte i przeniesione tu z index.html).
    • Następnie utworzyłam właściwy task o nazwie templates:
      •  1
       2
       3
       4
       5
       6
       7
       8
       9
      10
      11
      12
      13
      14
      15
      var templatesHbs = ['./src/templates/*.hbs'];

      gulp.task('templates', function(){
        gulp.src(templatesHbs)
          .pipe(handlebars({
            handlebars: require('handlebars')
          }))
          .pipe(wrap('Handlebars.template(<%= contents %>)'))
          .pipe(declare({
            namespace: 'app.templates',
            noRedeclare: true,
          }))
          .pipe(concat('templates.js'))
          .pipe(gulp.dest('./dist/'));
      });

      Tutaj konieczne okazało się uzgodnienie wersji biblioteki Handlebars używanej przez Gulpa z wersją, jakiej ja używam w BUCE - powyżej linijka 6. (Nie można używać jednej wersji Handlebars do kompilowania szablonów - czym zajmuje się od teraz Gulp - a drugiej, innej wersji, do wywoływania tych szablonów w aplikacji; taka sytuacja skutkuje błędem i w efekcie odpowiednie dane nie są prezentowana w widoku.)
  • Dalszy krok to dołączenie w index.html kolejnego pliku - templates.js, będącego elementem tzw. zbudowanej aplikacji:
    • <script src="dist/templates.js"></script>

  • Na koniec (zmian w pliku gulpfile.js) pozostało tylko dodać 'watcher' dla nowo utworzonego taska templates (poniżej - linijka 3) oraz zaktualizować task default (linijka 6):
    • 1
    2
    3
    4
    5
    6
    gulp.task('watch', ['default'], function() {
        gulp.watch([appJs], ['scripts']);
        gulp.watch([templatesHbs], ['templates']);
    });

    gulp.task('default', ['scripts', 'templates']);

  • Ostatni krok to przeniesienie szablonów Handlebars z index.html do nowo stworzonego podfolderu templates w folderze src, zawierającym pliki źródłowe dla Gulpa (z rozszerzeniem .hbs).

PUNKT DOJŚCIA:

  • Fragmenty kodu związane z kompilacją szablonów Handlebars (czyli obiekty compileSingleHbsTemplate oraz compileHbsTemplates w globalnym obiekcie app w pliku app.js) zostały usunięte.
  • Wszystkie szablony Handlebars zawarte w pliku index.html zostały przeniesione jako osobne pliki do folderu z plikami źródłowymi dla Gulpa (src).
  • Robota robi się sama. :) Od teraz to Gulp zajmuje się kompilowaniem szablonów Handlebars, ja je tylko wywołuję.


2017-05-14 21:56:00.001 automatyzacja-widoku-z-gulpem cj4phfytc000pi3um4bh44exz 2017-05-14 21:56:00.001 2017-05-14 21:56:00.001 cj2w8vctc00jji3um4psuc9d8 Walidacja formularza (client side) http://devinspe.blogspot.com/2017/05/walidacja-formularza-client-side.html

Od pewnego czasu chodziło mi to po głowie i bardzo, bardzo chciałam to zrobić. Wiem, właściwa walidacja jest oczywiście po stronie servera - bezwarunkowo. Ale dobrze by było podpowiedzieć to i owo użytkownikowi BUKI, choćby po to, by nie próbował dodawać książek bez autora...

Tak więc myślałam o tym i nosiłam się z zamiarem. Ostatni tydzień był dość szalony (życie wzięło górę nad programowaniem ;)), ale potrzeba zmierzenia się z tematem walidacji formularza rosła i rosła. Wiedziałam (tak mi się przynajmniej wydawało), że będę potrzebować jakiegoś pluginu jQuery. Mało miałam czasu na kodowanie, ale w wolnych chwilach, pomiędzy tym a tamtym, w tramwaju i metrze przeglądałam różne blog posty i dokumentacje.

Tym sposobem trafiłam na jQuery-Form-Validator. Pierwsze wrażenie - dobrze udokumentowany plugin, wchodzę w to! Tzn. biorę. Potem mi zaświtało: "A może da się to jednak zrobić prościej, używając po prostu walidacji dostępnej w HTML5?". Nope, epic fail, bo walidacja walidacją, ale dane z formularza trzeba jeszcze przesłać do API, a z AJAXem nijak mi to nie grało. Wróciłam więc do pluginu.

Jak wspomniałam, dokumentacja obfita, moc możliwości. "Dużo tego, za dużo - myślę - jak na moje potrzeby. Napiszę to sama (ułańska fantazja początkującego! ;)), w końcu potrzebuję przecież naprawdę minimalnej walidacji: pole jest wymagane lub nie." Nope, epic fail #2. Nie jest to takie proste. Nie jest też tak straszliwie trudne (przy tych minimalnych potrzebach). Wykoncypowałam logikę walidacji, ale potrzebne jest jeszcze przecież manipulowanie CSSem - nadawanie i zdejmowanie klas z właściwych inputów, których dotyczy komunikat. Poczułam, że wynajduję koło na nowo / wyważam otwarte drzwi. Znów wróciłam więc do pluginu.

I co?

W telegraficznym skrócie:
użyłam "młotka" (walidacja HTML5), zrobiłam krzyżówkę (walidacja HTML5 + walidacja z wykorzystaniem pluginu), rozwiązałam krzyżówkę (modyfikując i zostawiając tylko walidację z użyciem pluginu).

W dłuższej opowieści:
Celem była walidacja dwóch pól formularza edycji książki - tytuł i autor, na zasadzie: pole jest wymagane. Na razie tylko tyle. Walidację inputów typu select zostawiam na później, bo tu będą relacje wzajemnej zależności (jeśli zostanie wybrany bookForm 'prose', to obligatoryjnie trzeba też wybrać też bookGenre; przy bookForm 'poetry' i 'drama' - nie można wybrać bookGenre, bo gatunki - ze względów praktycznych - mam zdefiniowane tylko dla prozy).

Co daje walidajca dostępna w HTML5?

  • fokus na niepoprawnie zwalidowanym polu (niekiedy - zależnie od przeglądarki - ze zmianą wyglądu pola) + wyświetlenie komunikatu (predefiniowanego co do treści i stylu)
  • wyświetlenie (predefiniowanego co do treści i stylu) komunikatu na evencie mouseenter

Poniżej zamieszczam screeny, jak to wygląda w Chromie:

HTML5 walidacja formularza

HTML5 walidacja formularza

Następnie dodałam komendą npm install --save jquery-form-validator, czyli wspomniany plugin. Zależności automatycznie dopisały się w pliku package.json, a ja ręcznie dodałam odpowiednie skrypty w index.html (czyli załączyłam pliki .js i .css). Po tej operacji w projekcie stała się dostępna - ku mojej wielkiej radości - funkcja $.validate:

jquery validate function

Kolejnym krokiem było skonfigurowanie walidacji. Ciekawiły mnie różne opcje, dostępne w pluginie, próbowałam więc początkowo połączyć walidację z HTML5 z tą 'pluginową', uruchamiając na formularzu mechanizm walidacji - funkcję $.validate z modułem HTML:

$.validate({
    form: '#add-and-edit-book',
    modules: 'html5',
});

Wyszedł z tego twór dość dziwaczny (być może gdzieś popełniłam błąd... to moja pierwsza walidacja formularza w życiu :)): przy próbie potwierdzenia formularza odpalał się jeden mechanizm, przy kolejnej - drugi, a przy trzeciej i każdej następnej - oba (a więc pojawiały się podwójne komunikaty o konieczności wypełnienia danego pola - bez sensu). Wciąż nijak nie współgrało to z AJAXem i zapisywaniem danych zmodyfikowanego itemu.

Szybko i bez żalu pożegnałam się więc z walidacją HTML5: z inputów formularza w HTML usunęłam atrybuty required, zostawiając tylko - wymagane przez plugin - data-validation="required". Zmodyfikowałam też funkcję $.validate - rejestrując w niej callback onSuccess:

1
2
3
4
5
6
$.validate({
    form: '#add-and-edit-book',
    onSuccess: function() {
        app.actions.updateBook();
    }
});

W ten sposób zmieniłam sposób wywołania akcji aktualizacji danych książki (http PUT) - wcześniej ten callback był rejestrowany na event handlerze (on click na buttonie 'Save'):

$('#container').on('click', '#save-changes-btn', app.actions.updateBook);

Podsumowując: po tych wszystkich zmianach button 'Save' zadziała (wyśle dane do API) wyłącznie wtedy, gdy walidacja formularza przebiegnie pomyślnie. Nie jest już możliwe usunięcie (świadome czy przypadkowe) tytułu lub autora danej książki podczas edytowania jej danych.


2017-05-19 19:35:00 walidacja-formularza-client-side cj4phfytc000pi3um4bh44exz 2017-05-19 19:35:00 2017-05-19 19:35:00 -cjiw0rico014hi3umgu1ba21z Programisto, dbaj o oczy! http://sowaprogramuje.pl/programisto-dbaj-o-oczy/

Programisto, dbaj o swoje oczy? Zawód programisty wiąże się z wielogodzinnym spędzaniem czasu przed ekranami, dlatego chciałam zachęcić Cię do zadbania o swoje oczy. Kilka małych nawyków może sprawdzić, że będziesz się cieszyć dłużej dobrym wzrokiem. Co ja robię, żeby zadbać o swój wzrok? Noszę okulary Osobiście nie mam wady wzroku, ale pół roku temu zdecydowałam …

\n

Czytaj dalej Programisto, dbaj o oczy!

\n

Artykuł Programisto, dbaj o oczy! pochodzi z serwisu Sowa Programuje.

2018-06-26 18:23:21 programisto-dbaj-o-oczy ckeud40cw000qi3umbryt365k 2018-06-26 18:23:21 2018-06-26 18:23:21 cjk5ddxzc0162i3um8dtwcx3d IT for SHE – relacja ze szkolenia http://sowaprogramuje.pl/it-for-she-relacja-ze-szkolenia/

Czym jest IT for SHE? Na stronie IT for SHE możemy przeczytać: „Celem programu IT for SHE jest pomoc utalentowanym studentkom kierunków informatycznych w wejściu na rynek pracy. Jego elementy to: największy w europie obóz tematyczny dla dziewczyn w IT – Women in Tech Camp, program mentoringowy w najlepszych firmach technologicznych oraz kampania wolontariacka w …

\n

Czytaj dalej IT for SHE – relacja ze szkolenia

\n

Artykuł IT for SHE – relacja ze szkolenia pochodzi z serwisu Sowa Programuje.

2018-07-28 12:06:21 it-for-she-relacja-ze-szkolenia ckeud40cw000qi3umbryt365k 2018-07-28 12:06:21 2018-07-28 12:06:21 cjmosk0x4018hi3umhwo097ja Wywiad z Kasią, absolwentką girls.js http://sowaprogramuje.pl/girls-js-success-story-wywiad-z-kasia/

Kasia, uczestniczka organizowanych przeze mnie warsztatów girls.js w Krakowie, dwa dni temu rozpoczęła pracę jako Junior Frontend Developer. Co ciekawsze, będziemy teraz pracować w jednym zespole, w firmie creativestyle. Poprosiłam Kasię, aby podzieliła się swoją historią. Olga: Jak to się stało, że zdecydowałaś się na naukę Frontendu? Kasia: Bardzo się cieszę, że mogę podzielić się …

\n

Czytaj dalej Wywiad z Kasią, absolwentką girls.js

\n

Artykuł Wywiad z Kasią, absolwentką girls.js pochodzi z serwisu SowaProgramuje.

2018-09-30 11:38:01 wywiad-z-kasia-absolwentka-girlsjs ckeud40cw000qi3umbryt365k 2018-09-30 11:38:01 2018-09-30 11:38:01 cjo1f99vc019ui3um4sw7041j Girls.js relacja z drugiej edycji http://sowaprogramuje.pl/girls-js-relacja-drugiej-edycji/

  Girls.js jest dla mnie bardzo ważnym projektem. Są to darmowe warsztaty z JavaScriptu dla kobiet. Zorganizowanie drugiej edycji było bardzo wymagające, ale z dumą mogę powiedzieć, że nasz zespół się rozrósł. Wydarzenie odbyło się w sobotę 27 października i trwało 7h. Edycja pierwsza: 3 mentorów, 9 uczestniczek Edycja druga: 12 mentorów, 32 uczestniczki Liczby …

\n

Czytaj dalej Girls.js relacja z drugiej edycji

\n

Artykuł Girls.js relacja z drugiej edycji pochodzi z serwisu SowaProgramuje.

2018-11-03 12:26:27 girlsjs-relacja-z-drugiej-edycji ckeud40cw000qi3umbryt365k 2018-11-03 12:26:27 2018-11-03 12:26:27 @@ -2633,6 +2666,7 @@ cjpipg2v401bti3um5u574ahc Devstyle Speakers relacja http://sowaprogramuje.pl/dev cjpisyzjc01bui3um1wuee9tr Konkurs IT for SHE http://sowaprogramuje.pl/wygralysmy-sprzet-nauki-programowania/

  Jakiś czas temu pisałam relację z warsztatów z programowania dla dzieci w ramach wolontariatu i programu IT for SHE. Razem z Emilią, koleżanki, z którą realizowałam projekt, wzięłyśmy udział w konkursie na relację z zajęć. Dodatkowym zadaniem konkursowym było napisanie planu kontynuacji nauki programowania przez dzieci oraz zaplanowanie kwoty 3000zł na pomoce naukowe. Udało się! Biblioteka, w …

\n

Czytaj dalej Konkurs IT for SHE

\n

Artykuł Konkurs IT for SHE pochodzi z serwisu SowaProgramuje.

2018-12-10 21:02:09 konkurs-it-for-she ckeud40cw000qi3umbryt365k 2018-12-10 21:02:09 2018-12-10 21:02:09 cjqe72yzs01cti3umbud91h4g Podsumowanie 2018 http://sowaprogramuje.pl/podsumowanie-2018/

    Nadchodzi koniec roku, czas na garść statystyk i małe podsumowanie osiągnięć. Blog  – garść statystyk 37 tysięcy odwiedzających – NIESAMOWITE 😀 50 tysięcy sesji 14 postów w tym roku 660 fanów, 708 obserwujących na Facebooku <3 50% fanek i 50% fanów na Facebooku 2 edycje girls.js w Krakowie 5 prezentacji publicznych Cieszę się, …

\n

Czytaj dalej Podsumowanie 2018

\n

Artykuł Podsumowanie 2018 pochodzi z serwisu SowaProgramuje.

2019-01-01 20:18:01 podsumowanie-2018 ckeud40cw000qi3umbryt365k 2019-01-01 20:18:01 2019-01-01 20:18:01 ckeigfw14026ii3um5kbfh8z4 sitefuture.pl https://www.webkrytyk.pl/2020/08/31/sitefuture-pl/ Dawno w sumie nie było recenzji strony WWW na WebKrytyku, więc dzisiaj przyjrzymy się stronie, która od pewnego czasu leżała na stosie stron do sprawdzenia – sitefuture.pl. Wygląd i działanie Z racji tego, że mój Chrome ostatnio nie domaga (za dużo powłączanych eksperymentów), zmuszony byłem skorzystać z Firefoksa – a w nim mam zainstalowany dodatek NoScript, … Czytaj dalej sitefuture.pl 2020-08-31 11:44:01 sitefuturepl cki2dml0o000di3umgjexb6pk 2020-08-31 11:44:01 2020-08-31 11:44:01 +citsi2xc0005yi3um8n0g5x66 Software Craftsman. Profesjonalizm, czysty kod i techniczna perfekcja. https://kernelgonnapanic.pl/2016/10/02/software-craftsman/

Wrzesień minął tak szybko! Nie wiem jak Was, ale mnie nadejście jesieni bardzo motywuje. Kojarzy mi się z rozpoczęciem szkoły, czuję, że jest to czas nowych porządków. Jesienną słotę można fajnie wykorzystać np. siadając z herbatą, kocem i książką. Dlatego też podrzucam Wam dziś kolejną recenzję. Pora powiedzieć kilka słów na temat książki Sandro Mancuso “Software Craftsman. Profesjonalizm, czysty kod i techniczna precyzja”.
2016-10-02 10:44:24 software-craftsman-profesjonalizm-czysty-kod-i-techniczna-perfekcja ckesj8kg0000vi3um42jmc86u 2016-10-02 10:44:24 2016-10-02 10:44:24 cjsj98js001g9i3um3nisgwu2 Muzyka wspomagająca koncentrację http://sowaprogramuje.pl/muzyka-na-koncentracje/

  Chyba każdy z nas lubi ten stan kiedy siadasz do pracy nad jakimś projektem i zanurzasz się bez pamięci w twórczości. Nawet nie wiesz kiedy minęły godziny pełnego skupieniu. Czasami jednak ciężko jest wejść w ten stan. Osobiście mam swoje sprawdzone albumy, które wspomagają moją koncentrację i pomagają mi osiągnąć tzw. „flow”. Ludovico Einaudi Mój ulubiony kompozytor, …

\n

Czytaj dalej Muzyka wspomagająca koncentrację

\n

Artykuł Muzyka wspomagająca koncentrację pochodzi z serwisu SowaProgramuje.

2019-02-24 18:36:36 muzyka-wspomagajaca-koncentracje ckeud40cw000qi3umbryt365k 2019-02-24 18:36:36 2019-02-24 18:36:36 cjszyqb9s01gui3umdmgd65ta Pokaż że jesteś programistką! http://sowaprogramuje.pl/pokaz-ze-jestes-programistka/

  Mam niespodziankę dla programistek! Trochę bałam się podzielić moim pomysłem z innymi, najbardziej wstrzymywało mnie to przed realizacją mojego planu. Postanowiłam, że podzielę się nim… w Dzień Kobiet! Za ładna na programistkę?         Niedawno na jednej ze stron na Facebooku, pod zdjęciem jednej z moich znajomych programistek pojawił się komentarz: „Za ładna na …

\n

Czytaj dalej Pokaż że jesteś programistką!

\n

Artykuł Pokaż że jesteś programistką! pochodzi z serwisu SowaProgramuje.

2019-03-08 11:14:34 pokaz-ze-jestes-programistka ckeud40cw000qi3umbryt365k 2019-03-08 11:14:34 2019-03-08 11:14:34 cju0984v401iai3um9a97cddh Dzień Kobiet z JavaScriptem – 3 edycja girls.js http://sowaprogramuje.pl/dzien-kobiet-javascriptem-3-edycja-girls-js/

Dzień pierwszy – integracja                 Dzień pierwszy warsztatów girls.js poświęcony był integracji. Podczas wieczoru obecne były zarówno uczestniczki, jak i wszyscy mentorzy i mentorki. Spotkanie odbyło się w siedzibie formy Codewise 08.03 czyli w Dzień Kobiet. Głównym punktem programu były dwie prezentacje. Pierwsza Kacpra Sokołowskiego pod tytułem: „Sprawdź …

\n

Czytaj dalej Dzień Kobiet z JavaScriptem – 3 edycja girls.js

\n

Artykuł Dzień Kobiet z JavaScriptem – 3 edycja girls.js pochodzi z serwisu SowaProgramuje.

2019-04-02 20:48:04 dzien-kobiet-z-javascriptem-3-edycja-girlsjs ckeud40cw000qi3umbryt365k 2019-04-02 20:48:04 2019-04-02 20:48:04 @@ -2652,12 +2686,6 @@ cj0pdgzpc00ayi3um1rg5gfnd Postownia cz. 4 http://czasnajs.blogspot.com/2017/03/p cj0qlvi0100b2i3umf9kp5sbx Wyszperane w Internecie cz. 4 http://czasnajs.blogspot.com/2017/03/wyszperane-w-internecie-cz-4.html Cześć,
w dzisiejszym poście z cyklu Wyszperane w Internecie przedstawię Wam jedną z bibliotek Javascriptu, którą znalazłem i wydała mi się bardzo interesująca.

Mowa o processing.js. Biblioteka ta jest siostrzaną wersją języka programowania Processing, stworzonego przez Bena Fry'a i Casey Reas na MIT. Processing, wraz z całym środowiskiem IDE, miał pomagać uczyć się programowania ludziom z tym niezwiązanym. Miało to zostać osiągnięte przez efekty wizualne, jakie od razu się pojawiają po napisaniu kodu oraz jego uproszczeniu składni do tworzenie grafiki w Javie. Dlatego język ten wykorzystywany jest w sztuce elektronicznej i projektowaniu graficznym. Przełożeniem tego języka na Javascript jest właśnie biblioteka processing.js.

Twórcy biblioteki chwalą się, że jej możliwości można wykorzystać do wizualizacji danych, sztuki cyfrowej, interaktywnych animacji, tworzenia edukacyjnych wykresów, gier wideo bez używania dodatkowych pluginów.

Strona projektu zawiera wiele ciekawych przykładów wykorzystania biblioteki, jak na przykład wąż poruszający się za kursorem, interaktywne wykresy czy prosty zegar. Pod każdym przykładem jest kod, który generuje dany przykład. Jest to duży plus dla twórców.

Uważam, że biblioteka daje ogromne możliwości graficzne i nadaje się idealnie dla stron bazujących na wyświetlaniu grafiki (strony poświęcone ekonomii, blogi artystów, big data), ponieważ można osiągnąć świetne efekty przy małym nakładzie pracy i kodu. Tak więc jeśli tworzysz grafikę, a nie znasz tej biblioteki, to wiesz, co masz teraz przejrzeć :)

Damian

PS Na koniec jeszcze jeden ciekawy przykład - interaktywne akwarium 2017-03-26 11:33:00.001 wyszperane-w-internecie-cz-4 cj2ewxxpe000oi3um964j8a3a 2017-03-26 11:33:00.001 2017-03-26 11:33:00.001 cj0tualmp00bgi3um849k4ajb Postownia cz. 5 http://czasnajs.blogspot.com/2017/03/postownia-cz-5.html Cześć,
już 5 tydzień piszę Wam o postępach w pracach nad Postownią. Od ostatniego posta dodałem kolejną funkcjonalność do projektu.

Od teraz użytkownicy mogą edytować swoje posty. Po zalogowaniu się do strony widzimy następujący widok:

Widok po zalogowaniu

Jak widzimy, użytkownik (w tym wypadku o nicku Damian) może dodać post, usunąć swój post lub dokonać edycji już istniejących. Tak samo, jak dla usuwania postów, użytkownik widzi przycisk edycji tylko przy swoich postach. Dodatkowo po stronie serwera badam, czy post, który ma być edytowany, faktycznie należy do użytkownika. Po prostu nie lubię, jak ktoś grzebie w nieswoich rzeczach. :)

Użytkownik klika w przycisk Edit i widzi takie oto coś;:
Teraz możemy edytować post

Po kliknięciu pojawia się nowe pole tekstowe z treścią posta, który edytujemy. Edytujemy post i klikamy Send (muszę jeszcze ten przycisk przenieść pod pole tekstowe). Powiedzmy, że zmienię ten post na inny o treści "Huba buba".
Teraz widzimy zmieniony post


Na serwerze następuje zamiana treści posta i wysyłane są posty do ponownego wyświetlenia. Po przeładowaniu strony znika pole tekstowe do edycji posta.

Wiem, że wygląd strony jest dosyć ascetyczny i odpychający, ale chwilowo nie zajmuję się tutaj grafiką. Na razie poznaję tajniki Javascriptu i komunikacji na linii klient - serwer i przyznaję, że idzie mi to coraz lepiej.

W następnym tygodniu przedstawię Wam kolejną funkcjonalność, którą chcę dodać - role użytkowników.

Damian 2017-03-28 17:52:00.001 postownia-cz-5 cj2ewxxpe000oi3um964j8a3a 2017-03-28 17:52:00.001 2017-03-28 17:52:00.001 cj0vat16o00bni3um7ae00bvp Wyszperane w Internecie cz. 5 http://czasnajs.blogspot.com/2017/03/wyszperane-w-internecie-cz-5.html Witajcie w kolejnej odsłonie cyklu Wyszperane w Internecie

W poprzednim poście przedstawiłem Wam bibliotekę processing.js. Dzisiaj chcę Wam opowiedzieć o kolejnej bibliotece dotyczącej grafiki - p5.js.

P5.js, tak samo jak processing.js oparty jest o ideę towarzyszącą językowi Processing. Tutaj nasuwa się pytanie - czym się w takim razie różnią? Strona Sitepoint tłumaczy to tym, że w p5.js składnia Javascriptu tłumaczona jest na język Processing, który może być uruchamiany na wielu platformach. Natomiast processing.js to konwerter kodu Processing na składnię Javascriptu. W zależności od tego, jaki umiemy język programowania (Processing, czy Javascript), takiej biblioteki używamy.

Nie będzie to dla nas dużym zaskoczeniem, jeśli napiszę, że według twórców biblioteka jest dobra do nauczenia się programowania przez artystów, nauczycieli oraz dla wszelkiej maści początkujących w tej dziedzinie.

Na cały projekt P5 składa się wiele bibliotek, które pozwalają nam manipulować obiektami HTML5, takimi jak tekst, dane wejściowe (input), obraz, dźwięk, kamera itp. Daje to ogromne możliwości do modyfikacji naszej strony, aby miała jeszcze więcej "wodotrysków".

Poniżej przedstawiam kilka przykładowych rozwiązań dla tej biblioteki, jakie znalazłem w Internecie:
Biblioteka jest dopiero w fazie rozwoju, więc nie ma dla niej edytowalnego środowiska, ale twórcy, czyli Lauren McCarthy i zebrana wokół niej społeczność będą rozwijać projekt i dodać nowe funkcjonalności.
Co ciekawe, obie biblioteki (p5.js i processing.js) nie konkurują ze sobą, ponieważ jednym ze wspierających przedsięwzięcie jest Processing Foundation - fundacja opiekująca się i rozwijająca język Processing. Dzięki temu można liczyć na to, że biblioteka będzie się rozwijała w dobrym kierunku.

Myślę, że warto obserwować ten projekt, ponieważ jest on stosunkowo nowy oraz dostarczy wielu ciekawych funkcjonalności, czekających tylko na to, aby wdrożyć je w naszym projekcie. Niech przykładem będzie dla nas strona startowa projektu. Teraz się nie dziwię, że używając p5.js mamy traktować stronę internetową jak płótno.

Damian 2017-03-29 18:22:00 wyszperane-w-internecie-cz-5 cj2ewxxpe000oi3um964j8a3a 2017-03-29 18:22:00 2017-03-29 18:22:00 -citsi2xc0005yi3um8n0g5x66 Software Craftsman. Profesjonalizm, czysty kod i techniczna perfekcja. https://kernelgonnapanic.pl/2016/10/02/software-craftsman/

Wrzesień minął tak szybko! Nie wiem jak Was, ale mnie nadejście jesieni bardzo motywuje. Kojarzy mi się z rozpoczęciem szkoły, czuję, że jest to czas nowych porządków. Jesienną słotę można fajnie wykorzystać np. siadając z herbatą, kocem i książką. Dlatego też podrzucam Wam dziś kolejną recenzję. Pora powiedzieć kilka słów na temat książki Sandro Mancuso “Software Craftsman. Profesjonalizm, czysty kod i techniczna precyzja”.
2016-10-02 10:44:24 software-craftsman-profesjonalizm-czysty-kod-i-techniczna-perfekcja ckesj8kg0000vi3um42jmc86u 2016-10-02 10:44:24 2016-10-02 10:44:24 -ciyeqdzdc006ri3um5y1z0u68 Hexo - nowy rok, nowy blog! https://kernelgonnapanic.pl/2017/01/26/HexoNowyRokNowyBlog/

Dawno się nie słyszeliśmy, prawda? W międzyczasie przez bloga przeszła burza, a jej rezultatem jest to, co właśnie widzicie. I nie jest to tylko nowy szablon. Przez ostatnie kilka miesięcy budowałam tego bloga od zera na nowej platformie. Dlatego też, na dobry nowy początek, nie może zabraknąć wpisu na temat narzędzi, które na to pozwalają.

2017-01-26 18:46:42 hexo-nowy-rok-nowy-blog ckesj8kg0000vi3um42jmc86u 2017-01-26 18:46:42 2017-01-26 18:46:42 -ciz2kf0000072i3um31fn9bbe Frontend - a co powiecie na mikroserwisy? https://kernelgonnapanic.pl/2017/02/12/Frontend-mikroserwisy/

A dziś kilka słów o temacie, który chodzi za mną już od dłuższego czasu, a dokładnie od momentu, gdy przeczytałam “Budowanie mikrousług” Newmana. Naszą dzisiejszą podróż z mikroserwisami w frontendzie zaczniemy od …
2017-02-12 11:06:00 frontend-a-co-powiecie-na-mikroserwisy ckesj8kg0000vi3um42jmc86u 2017-02-12 11:06:00 2017-02-12 11:06:00 -cizzyczwo0089i3um6hs7hnb9 Daj się poznać 2017 - czas start! https://kernelgonnapanic.pl/2017/03/07/daj-sie-poznac-start/

Minął już prawie tydzień od startu Daj się poznać, a ja jeszcze nie napisałam słowa o projekcie, który w nadchodzących tygodniach chiałabym realizować. Pora więc nadrobić opóźnienie i przedstawić Wam moje plany na najbliższy czas.
2017-03-07 19:52:45 daj-sie-poznac-2017-czas-start ckesj8kg0000vi3um42jmc86u 2017-03-07 19:52:45 2017-03-07 19:52:45 -cj01hlhk0008gi3um77hr61s6 Elm - początki. https://kernelgonnapanic.pl/2017/03/08/elm-poczatki/

Był czas na pogaduszki na temat projektu, a teraz pora na otwarcie edytora i zmierzenie się z konkretnymi problemami. Do dzieła!
2017-03-08 21:39:00 elm-poczatki ckesj8kg0000vi3um42jmc86u 2017-03-08 21:39:00 2017-03-08 21:39:00 -cj0fcfb1c009si3um8pf3g9zj To żyje! Elm w akcji. https://kernelgonnapanic.pl/2017/03/18/to-zyje-elm-w-akcji/

Kolejny odcinek zmagań z Elmem przed nami. Dziś timer ożyje. Będziemy mieć okazję zobaczyć jak wygląda architektura aplikacji w Elmie i czemu może się Wam wydawać znajoma. 2017-03-18 14:23:00 to-zyje-elm-w-akcji ckesj8kg0000vi3um42jmc86u 2017-03-18 14:23:00 2017-03-18 14:23:00 cj0pdgevc00axi3um0wk4fx0m Praca programisty - od euforii do rozpaczy https://kernelgonnapanic.pl/2017/03/25/praca-programisty-od-euforii-do-rozpaczy/

Witajcie w piękny wiosenny dzień!
Dziś tematem postu będą uczucia, które pojawiają się w człowieku w trakcie programowania. Zdaję sobie w tym miejscu sprawę, że dla wielu ludzi spoza IT temat ten może się wydać trochę dziwny. Zazwyczaj programiści nie wyglądają na osoby, w których wnętrzu kotłują się stada emocji. Nic bardziej mylnego. My koderzy, w trakcie pracy, jesteśmy wystawieni na działanie wielu, czasem naprawdę skrajnych, uczuć. Dziś przyjrzymy się, jak to się dzieje, że w ciągu dnia jesteśmy w stanie popadać z ekscytacji w rozpacz i co możemy z tym fantem zrobić.
2017-03-25 14:49:33 praca-programisty-od-euforii-do-rozpaczy ckesj8kg0000vi3um42jmc86u 2017-03-25 14:49:33 2017-03-25 14:49:33 cj38j292800kmi3ume72fftyy Pamiętnik programistki 2 - Girls in IT, Code Europe, Front Trends. https://kernelgonnapanic.pl/2017/05/28/pamietnik-programistki-2/

Co to był za tydzień! Poproszę więcej takich. Doświadczyłam super kombo - trzech świetnych imprez w ciągu jednego tygodnia. Mnóstwo poznanych ludzi, wiele świetnej zabawy i tona nowych perspektyw i wiedzy.
2017-05-28 09:53:32 pamietnik-programistki-2-girls-in-it-code-europe-front-trends ckesj8kg0000vi3um42jmc86u 2017-05-28 09:53:32 2017-05-28 09:53:32 cj3o42esg00m0i3um1v1cb953 Identity & Data Security for Web Development https://kernelgonnapanic.pl/2017/06/08/security-in-web-dev/

Piękne Zakopane przywitało mnie słońcem, lecz cudna pogoda trwała tylko dzień. Dzisiejszy deszcz ma jednak swoją dobrą stronę. Mam chwilę, by podzielić się z Wami moimi przemyśleniami odnośnie książki “Identity & Data Security for Web Development” autorstwa Jonathana LeBlanc i Tima Messerschmidta. 2017-06-08 07:38:04 identity-and-data-security-for-web-development ckesj8kg0000vi3um42jmc86u 2017-06-08 07:38:04 2017-06-08 07:38:04 @@ -2668,6 +2696,7 @@ ckeda2rhc026ei3umf84e1cpk Nowe IE https://blog.comandeer.pl/nowe-ie.html Od pewn cj1wjrmzk00g0i3ume9y540d2 Strona portfolio cz. 6 – HTML + CSS. Jak ustawić head, czcionki i RWD. http://bedekodzic.pl/portfolio-cz-6-head-rwd/

Dzisiaj opiszę jak ‘skonfigurować’ stronę aby wyświetlała się w pożądany sposób. Co przez to rozumiem? Chodzi mi o prawidłową interpretację kodu przez przeglądarkę oraz modyfikacje wyglądu strony wraz ze zmianą rozdzielczości czyli Responsive Web Design (RWD). Seria strona portfolio. Ten wpis jest częścią serii Portfolio. Dzisiaj dla odmiany omawiane zagadnienia będą miały charakter bardziej globalny. […]

\n

The post Strona portfolio cz. 6 – HTML + CSS. Jak ustawić head, czcionki i RWD. appeared first on Będę Kodzić.

2017-04-24 20:00:20 strona-portfolio-cz-6-html-css-jak-ustawic-head-czcionki-i-rwd ck87juhko000ni3umanz2707n 2017-04-24 20:00:20 2017-04-24 20:00:20 cj29acwbk00hfi3um3254a5dg Pierwsza praca jako Web Developer – poszukiwania cz.1. http://bedekodzic.pl/pierwsza-praca-web-dev/

Przełom kwietnia i maja. Dobry czas aby rozejrzeć się za pracą. Już niedługo uczelnie wypuszczą setki absolwentów. Rynek pracy się zagęści. A potem wakacje… Kolejna szansa na znalezienie upragnionego zatrudnienia może być dopiero na jesieni. Czas zrealizować swoje cele. Potencjalny kandydat? Już od dłuższego czasu rozwijasz po godzinach swoje umiejętności z języków takich jak HTML, […]

\n

The post Pierwsza praca jako Web Developer – poszukiwania cz.1. appeared first on Będę Kodzić.

2017-05-03 17:57:56 pierwsza-praca-jako-web-developer-poszukiwania-cz1 ck87juhko000ni3umanz2707n 2017-05-03 17:57:56 2017-05-03 17:57:56 cj2hwmbuw00iei3umctfkcd1t Pierwsza praca jako Web Developer – przygotowanie cz.2. http://bedekodzic.pl/praca-web-dev-przygotowanie/

Czego potrzebujesz w swoim CV aby znaleść pierwszą pracę jako Software Developer? Jakie elementy są ważne aby wyróżnić się spośród tłumu kandydatów? Przede wszystkim warto mieć “dobrze” poukładane w głowie. Pisałem o tym w pierwszej części wpisu o szukaniu pracy. Dzisiaj skupimy się na ułożeniu planu działania. Plan działania. Proponuje podejść do szukania pracy jak […]

\n

The post Pierwsza praca jako Web Developer – przygotowanie cz.2. appeared first on Będę Kodzić.

2017-05-09 18:43:17 pierwsza-praca-jako-web-developer-przygotowanie-cz2 ck87juhko000ni3umanz2707n 2017-05-09 18:43:17 2017-05-09 18:43:17 +ciyrjqggo006wi3umeuki182q Nie chcesz zainstalować Kali Linux na swoim komputerze. http://kot-zrodlowy.pl/linux/dajsiepoznac2017/2017/02/04/nie-chcesz-instalowac-kali.html Dzisiejszy post narodził się z pewnej potrzeby. Jestem osobą aktywną w sieci i społecznościach developerów. Niemal codziennie stykam się tam z osobami, które proszą o pomoc. Z chęcią udzielam tej p... 2017-02-04 18:01:27 nie-chcesz-zainstalowac-kali-linux-na-swoim-komputerze cjy7sgxs0000bi3umeb9z90rn 2017-02-04 18:01:27 2017-02-04 18:01:27 cj2ru2zgo00j6i3umhx5fhfxc Polska Społeczność Programistyczna – materiały pisane czyli blogi i grupy na FB. http://bedekodzic.pl/blogi-i-grupy-na-fb/

Ostatnio pisałem TU i TUTAJ o szukaniu pierwszej pracy jako Web Developer. Przy okazji wspominałem tam m.in. o grupach na Facebooku dlatego postanowiłem, że warto rozwinąć ten temat i opisać dokładniej. Dzisiaj przestanę więc na moment myśleć o szukaniu pracy i skupię się na Polskiej Społeczności Programistycznej ze szczególną uwagą skupioną na Front-Endzie. Społeczność Programistów. […]

\n

The post Polska Społeczność Programistyczna – materiały pisane czyli blogi i grupy na FB. appeared first on Będę Kodzić.

2017-05-16 17:29:57 polska-spolecznosc-programistyczna-materialy-pisane-czyli-blogi-i-grupy-na-fb ck87juhko000ni3umanz2707n 2017-05-16 17:29:57 2017-05-16 17:29:57 cj31vuk8800k2i3um35a225xx Pierwsza praca jako Web Developer cz.3 – rozmowa kwalifikacyjna. http://bedekodzic.pl/rozmowa-kwalifikacyjna/

Pierwsza praca jako programista jest Twoim celem i intensywnie przygotowujesz się do jej znalezienia. Zbierasz informację z różnych źródeł, przeczytałeś/łaś moje poprzednie wpisy o podejściu i przygotowaniu do aplikacji na stanowisko programisty. Dzisiaj przedstawię trochę przemyśleń na temat rozmów kwalifikacyjnych. Oczekiwanie. Rozesłałeś/łaś sporo aplikacji do różnych firm. Jako, że odrobiłeś pracę domową i solidnie się […]

\n

The post Pierwsza praca jako Web Developer cz.3 – rozmowa kwalifikacyjna. appeared first on Będę Kodzić.

2017-05-23 18:17:05 pierwsza-praca-jako-web-developer-cz3-rozmowa-kwalifikacyjna ck87juhko000ni3umanz2707n 2017-05-23 18:17:05 2017-05-23 18:17:05 cj35rwuls00kii3umbncs6965 Daj się poznać 2017- Seria Portfolio – Lista wpisów. http://bedekodzic.pl/daj-sie-poznac-2017-lista-wpisow/

Poniżej znajduje się kompletna lista wpisów z Serii Portfolio. Seria Portfolio jest serią przygotowaną na potrzeby konkursu Daj się poznać 2017 i tłumaczy krok po kroku jak stworzyć swoją pierwszą stronę internetową na przykładzie mojej strony portfolio. Pełny projekt można obejrzeć tutaj: http://bartlomiejcis.eu/ Seria składa się z: Jak stworzyć projekt graficzny.  HTML + CSS, part […]

\n

The post Daj się poznać 2017- Seria Portfolio – Lista wpisów. appeared first on Będę Kodzić.

2017-05-26 11:37:58 daj-sie-poznac-2017-seria-portfolio-lista-wpisow ck87juhko000ni3umanz2707n 2017-05-26 11:37:58 2017-05-26 11:37:58 @@ -2694,7 +2723,6 @@ cj6i33eso00qei3um66cwa75j Jak znaleść ropę naftową? Sejsmika i fale sejsmicz cj7xhqlzc00s4i3um9fvxgce6 W prawo czy w lewo? "Labirynty Scruma" Jacka Wieczorka https://kernelgonnapanic.pl/2017/09/23/w-prawo-czy-w-lewo-labirynty-scruma/

Jesień w tym roku wzięła nas zdecydowanie z zaskoczenia. I chociaż niektórzy mogą narzekać na pluchę i zimno, dla mnie jest to pogoda stworzona do pewnego typu zajęć. Są nimi: programowanie i czytanie. Dlatego wraz z nadejściem pierwszych deszczy zaopatruje się w kubek herbaty, ciepłe skarpety, książkę (lub komputer) i działam. W ten właśnie sposób pierwszą ofiarą tej jesieni stały się “Labirynty Scruma” Jacka Wieczorka. Napisałam dla Was o niej kilka słów, więc “kubki w dłoń!” i zapraszam do czytania.
2017-09-23 15:49:33 w-prawo-czy-w-lewo-labirynty-scruma-jacka-wieczorka ckesj8kg0000vi3um42jmc86u 2017-09-23 15:49:33 2017-09-23 15:49:33 cj9cqn31c00tsi3um00hoakun Jak sprawić, by Twoja aplikacja w React była DRY? https://kernelgonnapanic.pl/2017/10/29/jak-sprawic-by-aplikacja-w-react-byla-dry/

Jestem przekonana, że większość z Was, spotkała się już w swojej karierze z zasadą “don’t repeat yourself”. Nie ważne w jakim języku programujemy, dążymy do tego, by nasz kod był DRY. Z tego powodu korzystamy z różnego rodzaju abstrakcji czy wzorców, które pozwalają nam na uniknięcie kopiowana fragmentów kodu i konieczności późniejszego ich utrzymywania. Dziś chciałabym pokazać Wam 2 wzorce, które możecie zastosować w przypadku aplikacji bazujących na React’cie.
2017-10-29 12:35:00 jak-sprawic-by-twoja-aplikacja-w-react-byla-dry ckesj8kg0000vi3um42jmc86u 2017-10-29 12:35:00 2017-10-29 12:35:00 cjbwjokdc00wli3um72blfbwu Moje plany na 2018 https://kernelgonnapanic.pl/2018/01/01/moje-plany-2018/

Nie jestem fanką zaczynania od jutra, od poniedziałku, od Nowego Roku. Każda pora jest dobra, by coś w swoim życiu zmienić.
Ale nie da się ukryć, że koniec roku jest świetną okazją na przemyślenie pewnych rzeczy, podsumowanie, stwierdzenie co było i jest fajne, czego
chcemy robić więcej, a czego mniej lub wcale. Ja też postanowiłam skorzystać z tej okazji i tymi przemyśleniami chcę się dziś z Wami podzielić.
2018-01-01 18:35:00 moje-plany-na-2018 ckesj8kg0000vi3um42jmc86u 2018-01-01 18:35:00 2018-01-01 18:35:00 -cje39xqtc00yxi3um5y0k3jkh Snapshot testing - co to takiego? [Frontend testing #2] https://kernelgonnapanic.pl/2018/02/25/jest-snapshot-testing/

Po całkiem długim okresie przerwy (pierwszy wpis z cyklu powstał w lipcu ubiegłego roku), zapraszam znów do przyjrzenia się bliżej frontendowym testom. Dziś porozmawiamy o Jest oraz snapshot testingu - jednej z jego funkcjonalności.
2018-02-25 20:56:00 snapshot-testing-co-to-takiego-frontend-testing-2 ckesj8kg0000vi3um42jmc86u 2018-02-25 20:56:00 2018-02-25 20:56:00 cjen7yidc00zoi3um3cpch9m4 Siedem grzechów głównych programistów - przywiązanie https://kernelgonnapanic.pl/2018/03/11/7-grzechow-glownych-przywiazanie/

Kolejny tydzień i kolejny post! Dzisiaj rozpoczynamy serię, której temat od dawna nosiłam gdzieś z tyłu głowy i bardzo chciałam na blogu poruszyć. Zajmiemy się grzechami programistów, czyli tym co przeszkadza nam osiągać sukcesy w naszej pracy. Czasami zdajemy sobie z nich sprawę, lecz częściej ich nie zauważamy. A w ten sposób nie jesteśmy w stanie ich unikać. To skutkuje gorszym kodem, gorszą pracą w zespole czy niedostarczaniem tego, czego oczekują od nas współpracownicy. W ten sposób stajemy się również obciążeniem dla innych - a tego nie chcemy!
2018-03-11 19:56:00 siedem-grzechow-glownych-programistow-przywiazanie ckesj8kg0000vi3um42jmc86u 2018-03-11 19:56:00 2018-03-11 19:56:00 cjnoy7klc019ji3um3pkbe528 Jak być speakerem i nie zwariować? https://kernelgonnapanic.pl/2018/10/25/jak-byc-speakerem-i-nie-zwariowac/

Dwa tygodnie temu miałam kolejną okazję na szczęśliwe ukończenie konferencyjnego zaklętego koła.
Taki właśnie pseudonim nosi u mnie akcja - “zostań speakerem”. Każda z moich dotychczasowych okazji wiązała się z określonymi etapami - początkową euforią związaną z wysłaniem zgłoszenia na CFP, napięciem oczekiwania na wyniki, zmęczeniem związanym z przygotowaniami, maksymalnym stresem przed samym wystąpieniem i frajdą na scenie.
Tak było i tym razem, na Meet.js Summit w Poznaniu.
2018-10-25 18:56:00 jak-byc-speakerem-i-nie-zwariowac ckesj8kg0000vi3um42jmc86u 2018-10-25 18:56:00 2018-10-25 18:56:00 cjo4fmg00019zi3um6m6t1sua Czy na pewno wiesz czym jest frontend? https://kernelgonnapanic.pl/2018/11/05/czy-na-pewno-wiesz-czym-jest-frontend/

Kilka miesięcy temu miałam okazję zmierzyć się z nietypowym dla mnie zadaniem. Na co dzień obracam się głównie w towarzystwie programistów, moi rodzice są po informatyce, moi znajomi są programistami, ogólnie większość moich towarzyskich interakcji odbywa się z ludźmi, którzy mniej lub bardziej się w temacie programowania i Internetu orientują. Dlatego wyzwaniem dla mnie stało się zadane mi przez laika pytanie: A kim to ten frontendowiec jest?
2018-11-05 15:00:00 czy-na-pewno-wiesz-czym-jest-frontend ckesj8kg0000vi3um42jmc86u 2018-11-05 15:00:00 2018-11-05 15:00:00 @@ -2704,6 +2732,8 @@ cjptmqfhc01c7i3um0i5y8cmr 5 rzeczy których nie wiecie o JavaScript https://kern ciyoj4zq0006vi3umaco837df No to ruszamy w drogę! http://kot-zrodlowy.pl/offtop/dajsiepoznac2017/2017/02/02/no-to-ruszamy-w-droge.html Cześć! Witam Cię na moim blogu! Ludzie zazwyczaj się witają i piszą bardzo długie posty, o tym, jakie tematy poruszą na swoim blogu i dlaczego to właśnie ich masz czytać. Mnie nie musisz, obejdzie ... 2017-02-02 15:21:27 no-to-ruszamy-w-droge cjy7sgxs0000bi3umeb9z90rn 2017-02-02 15:21:27 2017-02-02 15:21:27 cj21eid1d00gji3umcldx4ovi Postownia cz. 9 http://czasnajs.blogspot.com/2017/04/postownia-cz-9.html Witam w kolejnej odsłonie bloga poświęconej Postownii.

W tym tygodniu niestety nie za wiele udało mi się zrobić. Niestety brak czasu oraz wyjazd na majówkę w piątek nie pozwolił mi na zrobienie nowych funkcjonalności.

Udało mi się jedynie naprawić kilka bugów oraz dokonać oczyszczenia kodu z powtarzających się komend (podejście DRY). Teraz kod wygląda trochę lepiej (zwłaszcza ten odpowiadający za serwer).

Bugi natomiast pojawiały się w momencie, gdy użytkownik zakładał nowe konto i od razu chciał pisać posty. Po tej akcji nie wyświetlał się jego nick przy poście.Po prostu źle odwoływałem się do zawartości requesta. Ale już to poprawiłem i działa tak, jak miało działać.

Nie mam jeszcze planów, co do dalszych funkcjonalności. Pomyślę o nich, gdy wrócę z Majówki.

Życzę Wam udanej Majówki i wypoczynku!

Damian 2017-04-28 05:32:00.001 postownia-cz-9 cj2ewxxpe000oi3um964j8a3a 2017-04-28 05:32:00.001 2017-04-28 05:32:00.001 cj2dlojpc00hti3umfoy3gyll Wyszperane w Internecie cz. 10 http://czasnajs.blogspot.com/2017/05/wyszperane-w-internecie-cz-10.html Cześć,
dzisiaj 10 odsłona Wyszperane w Internecie. Dzisiaj będzie o wydarzeniu, na które wybieram się w najbliższym tygodniu.

Rzadko (zwłaszcza kiedy trwa konkurs DSP2017) chodzę na wydarzenia organizowane w Poznaniu, gdzie mieszkam na co dzień. Niestety doba jest za krótka. Ale zawsze staram się znaleźć czas, żeby pójść na kolejne wydarzenie organizowane przez Poznań Android Developer Group.

Zdjęcie użytkownika Poznań Android Developer Group.

Jest to grupa osób, która średnio raz w miesiącu organizuje spotkania na temat szeroko pojętego Androida. Są to na przykład zagadnienia związane z Javą i jej bibliotekami i frameworkami, beacony, uczenie maszynowe na telefonach komórkowych, czy wykorzystaniu niestandardowych języków programowania przy tworzeniu aplikacji mobilnych (LUA, Kotlin). Na każdym spotkaniu są po 3 prezentacje. Po nich następuje część networkingowa oraz poczęstunek. Link do wydarzenia znajdziecie tutaj.

Pewnie teraz sobie zadajecie pytanie, po co gość uczący się JavaScriptu idzie na spotkanie o Javie i Androidzie? To prawda, nie mam doświadczenia w Javie, oprócz projektów na studiach, ale idę tam po to, aby dowiedzieć się nowych rzeczy oraz nowinek, które kto wie, może będą wykorzystywane w mojej pracy. Myślę, że warto poznawać nowe rzeczy, nawet jeśli teraz nie mamy dla nich zastosowania. Zwłaszcza, że rynek mobilny przegania tradycyjny rynek desktopów i laptopów. Prędzej czy później każdy z IT zetknie się z Androidem i platformami mobilnymi, więc już teraz warto zdobywać tą wiedzę. To co dzisiaj jest nowinką, jutro jest standardem. Z drugiej strony można na spotkaniu poznać osoby, które są autentycznie podjarane Androidem. Lubię przebywać w towarzystwie osób, które mają fioła na jakimś punkcie. A już w szczególności jeśli to jest coś z IT.

Może nie każdy temat mnie zainteresuje, nie każdy mnie porwie. Ale półtorej godziny raz w miesiącu? Niech będzie :)

Damian 2017-05-06 18:26:00 wyszperane-w-internecie-cz-10 cj2ewxxpe000oi3um964j8a3a 2017-05-06 18:26:00 2017-05-06 18:26:00 +cjehgo2zs00zgi3um5pqkdrnh Horizontal Scroll. Czym jest? Po co go stosować? http://bedekodzic.pl/horizontal-scroll/

Jeśli zaintrygował Cię efekt horizontal scroll’a i jesteś ciekawy/a jak go użyć we własnym projekcie to w tym wpisie dowiesz się wszystkiego. Zapraszam! Czego się dzisiaj dowiesz? Dzisiaj opiszę czym jest horizontal scroll i jak go użyć w projekcie. W ogóle nie wymaga on użycia JavaScript jest więc interesującym i ‘lekkim’ dodatkiem. Warto się nim […]

\n

The post Horizontal Scroll. Czym jest? Po co go stosować? appeared first on Będę Kodzić.

2018-03-07 19:13:13 horizontal-scroll-czym-jest-po-co-go-stosowac ck87juhko000ni3umanz2707n 2018-03-07 19:13:13 2018-03-07 19:13:13 +cj87rpyw800sii3umbhnh1jo6 nFinity.pl https://www.webkrytyk.pl/2017/09/30/nfinity-pl/ Dawno już w sumie nie przyglądałem się stronie żadnej agencji interaktywnej, więc pora to nadrobić! Dzisiaj padło na nFinity, bo ta nazwa ostatnio obiła mi się o uszy. Wygląd i działanie Pierwsza rzecz, jaka mnie bardzo pozytywnie zaskoczyła, to fakt, że strona jest niemal w pełni funkcjonalna bez JS-a. Niemal, bo nie da się otworzyć menu, … Czytaj dalej nFinity.pl 2017-09-30 20:26:41 nfinitypl cki2dml0o000di3umgjexb6pk 2017-09-30 20:26:41 2017-09-30 20:26:41 cj2ewxxpe00i2i3umgqwqga7r Postownia cz. 10 http://czasnajs.blogspot.com/2017/05/postownia-cz-10.html Cześć,
dzisiaj 10 post o postępach w pracy nad portalem Postownia.

W tym tygodniu nie modyfikowałem kod, ani nie dodawałem żadnych nowych funkcjonalności. W tym tygodniu uczyłem się AngularJS. Tworzenie Postownii w obecnym wyglądzie (wykorzystując tylko JavaScript) uważam za zakończone. Teraz będę chciał przepisać wszystkie funkcjonalności na AngularJS. Będzie to moje pierwsze zetknięcie z tym frameworkiem.

AngularJS uczyłem się z tutoriala dostępnego na na oficjalnej stronie. Bardzo fajnie wprowadza on w tematykę frameworka oraz pokazuje sposób myślenia, jaki trzeba przyjąć, żeby stworzyć  to, co się chce. W tutorialu tworzymy portal o telefonach komórkowych. Pod względem funkcjonalności jest on podobny do Postownii. Dlatego na bieżąco porównywałem sposób tworzenia funkcjonalności w czystym JavaScripcie i AngularJS. Tworzenie aplikacji i stron internetowych w AngularJS jest o niebo prostsze niż w czystym JavaScripcie. Oczywiście nie odkryłem Ameryki, ponieważ po coś ten framework został stworzony. Jak patrzę okiem początkującego, to wydaje mi się, że przeniesienie Postownii na AngularJS będzie proste. Mogę się mylić, ale to wyjdzie w praniu.

Nowy tydzień zaczynam działaniem w Angularze.

Damian 2017-05-07 16:29:00.002 postownia-cz-10 cj2ewxxpe000oi3um964j8a3a 2017-05-07 16:29:00.002 2017-05-07 16:29:00.002 cj8bua84000sri3um1674g0q7 Hosting – porównanie cen dla 9 serwisów. http://bedekodzic.pl/hosting/

Szukasz serwera dla swojej strony internetowej lub aplikacji? To zestawienie pomoże Ci w podjęciu decyzji. Masz konkretne wymagania co do serwera czy może potrzebna Ci budżetowa opcja gdzie będziesz umieszczał swoje projekty? Nie wiesz jakie oferty są dostępne na rynku? Nie znasz się na tym lub po prostu nie masz czasu na poszukiwania? W takim […]

\n

The post Hosting – porównanie cen dla 9 serwisów. appeared first on Będę Kodzić.

2017-10-03 16:49:30 hosting-porownanie-cen-dla-9-serwisow ck87juhko000ni3umanz2707n 2017-10-03 16:49:30 2017-10-03 16:49:30 cja2pilsw00upi3um2qpw82y6 Bootstrap 4. O co w nim chodzi i co nowego? http://bedekodzic.pl/bootstrap-4/

Bootstrap 4 to tzw. framework CSS (nie do końca precyzyjne stwierdzenie) w najnowszej odsłonie. Dowiedz się jak działa i jakie są zmiany w aktualnej wersji. Co znajdziesz w tym wpisie? Jeżeli znasz już Bootstrapa i interesują Cię jedynie różnice w najnowszej wersji możesz spokojnie przejść do DALSZEJ części artykułu. Jeśli natomiast jest to dla Ciebie […]

\n

The post Bootstrap 4. O co w nim chodzi i co nowego? appeared first on Będę Kodzić.

2017-11-16 16:45:32 bootstrap-4-o-co-w-nim-chodzi-i-co-nowego ck87juhko000ni3umanz2707n 2017-11-16 16:45:32 2017-11-16 16:45:32 @@ -2712,7 +2742,6 @@ cjctcz4e000xji3um9szz16zk Jak sprawdzić jaką wersję PHP używasz? http://bede cjd69mhko00y1i3umfdpwdk6w reCaptcha. Czym jest i jak jej użyć w swoim projekcie? http://bedekodzic.pl/recaptcha/

Zależy Ci na bezpieczeństwie i chcesz zabezpieczyć formularz na swojej stronie przed spamem? Nie wiesz jak to zrobić? Użyj Google reCaptcha. Dzisiaj opiszę krok po kroku jak użyć tej funkcjonalności. Dlaczego o tym piszę? Bezpieczeństwo w sieci jest tematem bardzo wrażliwym i większość świadomych użytkowników internetu ma to na uwadze. Sprawa robi się jeszcze bardziej […]

\n

The post reCaptcha. Czym jest i jak jej użyć w swoim projekcie? appeared first on Będę Kodzić.

2018-02-02 18:30:51 recaptcha-czym-jest-i-jak-jej-uzyc-w-swoim-projekcie ck87juhko000ni3umanz2707n 2018-02-02 18:30:51 2018-02-02 18:30:51 cjdddythc00ydi3umassm9vza Będękodzić ma już rok! Podsumowanie i statystyki. http://bedekodzic.pl/bedekodzic-rok/

Ten czas jednak jest niesamowity, płynie i płynie… Nie mrugnąłem nawet a okiem a już minął rok… Rok od kiedy piszę bloga… Rok od kiedy jestem z Wami… To był piękny rok jednak dzisiaj nie o tym. Dzisiaj o pierwszym jubileuszu bedekodzic.pl! O czym tu dzisiaj przeczytasz? Pokażę statystyki bloga o nauce programowania w początkowej […]

\n

The post Będękodzić ma już rok! Podsumowanie i statystyki. appeared first on Będę Kodzić.

2018-02-07 18:06:48 bedekodzic-ma-juz-rok-podsumowanie-i-statystyki ck87juhko000ni3umanz2707n 2018-02-07 18:06:48 2018-02-07 18:06:48 cje0avll400yvi3um8of5306p Digital Nomad. Opcja Manchester i Liverpool. http://bedekodzic.pl/manchester-liverpool/

Pracujesz zdalnie i szukasz miejsca gdzie mógłbyś skupić się na pisaniu kodu a zarazem znaleść inspirację do dalszej pracy? Może warto sprawdzić angielski Manchester? Stąd już do Liverpoolu rzut beretem więc warto zahaczyć się też tam… O czym jest ten wpis? Dzisiaj przedstawię jedno z miejsc (a w zasadzie dwa miasta) gdzie można wybrać się […]

\n

The post Digital Nomad. Opcja Manchester i Liverpool. appeared first on Będę Kodzić.

2018-02-23 18:59:01 digital-nomad-opcja-manchester-i-liverpool ck87juhko000ni3umanz2707n 2018-02-23 18:59:01 2018-02-23 18:59:01 -cjehgo2zs00zgi3um5pqkdrnh Horizontal Scroll. Czym jest? Po co go stosować? http://bedekodzic.pl/horizontal-scroll/

Jeśli zaintrygował Cię efekt horizontal scroll’a i jesteś ciekawy/a jak go użyć we własnym projekcie to w tym wpisie dowiesz się wszystkiego. Zapraszam! Czego się dzisiaj dowiesz? Dzisiaj opiszę czym jest horizontal scroll i jak go użyć w projekcie. W ogóle nie wymaga on użycia JavaScript jest więc interesującym i ‘lekkim’ dodatkiem. Warto się nim […]

\n

The post Horizontal Scroll. Czym jest? Po co go stosować? appeared first on Będę Kodzić.

2018-03-07 19:13:13 horizontal-scroll-czym-jest-po-co-go-stosowac ck87juhko000ni3umanz2707n 2018-03-07 19:13:13 2018-03-07 19:13:13 cjereu81c00zti3um9n2beue9 Materiały do nauki programowania – NodeJS. http://bedekodzic.pl/materialy-nodejs/

Chcesz nauczyć się NodeJS i pisać back-end w aplikacjach webowych? Nie wiesz od czego zacząć? Sprawdź ten wpis a znajdziesz dużo użytecznych materiałów do nauki. Zacznij naukę już dziś. Czego się dowiesz w dzisiejszym wpisie? To nie będzie żaden tutorial. Dzisiaj porcja przydatnych materiałów i kursów do NodeJS’a. Pogrzebałem trochę w internecie i pokażę Ci […]

\n

The post Materiały do nauki programowania – NodeJS. appeared first on Będę Kodzić.

2018-03-14 18:19:42 materialy-do-nauki-programowania-nodejs ck87juhko000ni3umanz2707n 2018-03-14 18:19:42 2018-03-14 18:19:42 cj4pq0wq800nwi3um00248xmu Czy do programowania trzeba mieć talent? https://tworcastron.pl/blog/czy-do-programowania-trzeba-miec-talent/

Zobaczyłem dziś wypowiedź: “Programista jest jak muzyk. Trzeba się nim urodzić“. Zarówno część o programiście jak i muzyku uważam za nieprawdziwą.  Beethoven, który jest uważany...

\n

Artykuł Czy do programowania trzeba mieć talent? pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-07-04 15:20:14 czy-do-programowania-trzeba-miec-talent ckbbw3jvs000li3umgw19edq9 2017-07-04 15:20:14 2017-07-04 15:20:14 cj5mg626o00pdi3um3b9v006p 3 książki o kreatywności https://tworcastron.pl/blog/3-ksiazki-o-kreatywnosci/

Czas na kolejny wpis o książkach! Ostatnio opisywałem 3 książki nt projektowania stron. Dziś trochę bardziej uniwersalnie, czyli o kreatywności. Twórcza kradzież – Austin Kleon...

\n

Artykuł 3 książki o kreatywności pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-07-27 13:00:42 3-ksiazki-o-kreatywnosci ckbbw3jvs000li3umgw19edq9 2017-07-27 13:00:42 2017-07-27 13:00:42 @@ -2723,7 +2752,6 @@ cj8eisqo800sti3um7xjd4q4r v X.X.X numery wersji, oto jak działają https://twor cj8n65lyo00t4i3um70yi7x69 Jakiego języka uczyć się jako pierwszego? https://tworcastron.pl/blog/jakiego-jezyka-uczyc-sie-jako-pierwszego/

Wpis dedykuje gimba… no tak, siódoklasistom. Albo i młodszym. Wszystkim, którzy siedzą w szkołach oraz powoli odkrywają świat programowania i myślą sobie “to jest...

\n

Artykuł Jakiego języka uczyć się jako pierwszego? pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-10-11 15:07:18 jakiego-jezyka-uczyc-sie-jako-pierwszego ckbbw3jvs000li3umgw19edq9 2017-10-11 15:07:18 2017-10-11 15:07:18 cj8y9712000tdi3umb6dgg1n1 Flexbox CSS, jako wstęp do Bootstrapa 4 https://tworcastron.pl/blog/flexbox-css-jako-wstep-bootstrapa-4/

Display: flex; Poniżej 30 minutowy przewodnik po właściwości CSSa o nazwie “flexbox” (w CSS zapisujemy ją jako display: flex;). Nie bez powodu mówię akurat...

\n

Artykuł Flexbox CSS, jako wstęp do Bootstrapa 4 pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-10-19 09:17:51 flexbox-css-jako-wstep-do-bootstrapa-4 ckbbw3jvs000li3umgw19edq9 2017-10-19 09:17:51 2017-10-19 09:17:51 cj9ffz4vc00txi3um5nq75g79 Negocjowanie ceny z klientem https://tworcastron.pl/blog/negocjowanie-ceny-klientem/

Negocjujesz stronę www, projekt graficzny, sprzedajesz auto? Nie ważne, oto kilka zasad, które mogą pomóc ci w negocjacjach z klientem: Zacznij od większej ceny....

\n

Artykuł Negocjowanie ceny z klientem pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-10-31 09:59:45 negocjowanie-ceny-z-klientem ckbbw3jvs000li3umgw19edq9 2017-10-31 09:59:45 2017-10-31 09:59:45 -cja3vayfs00uri3um9nbh70x3 Załączanie skryptów za pomocą CDN – plusy, minusy, przykłady https://tworcastron.pl/blog/zalaczanie-skryptow-pomoca-cdn-plusy-minusy-przyklady/

Czym jest CDN? CDN jest to skrót od Content Delivery Network, czyli jakaś sieć mająca na celu dostarczanie treści do odbiorców.  Nawet jeśli brzmi...

\n

Artykuł Załączanie skryptów za pomocą CDN – plusy, minusy, przykłady pochodzi z serwisu TwórcaStron.pl - Blog o freelancerce, tworzeniu stron i grafice..

2017-11-17 12:15:19 zalaczanie-skryptow-za-pomoca-cdn-plusy-minusy-przyklady ckbbw3jvs000li3umgw19edq9 2017-11-17 12:15:19 2017-11-17 12:15:19 cjf2u6abc0103i3um6o3j38bi Digital Nomad. Opcja Madera czyli rubieże Portugalii. http://bedekodzic.pl/madera/

Pracujesz zdalnie i szukasz miejsca gdzie mógłbyś skupić się na pisaniu kodu a zarazem znaleść inspirację do dalszej pracy? Poleć na środek Atlantyku gdzie wulkaniczne skały dumnie piętrzą się ponad głębią oceanu. Poleć na Maderę! O czym będzie ten wpis? Opiszę jedno z miejsc które robi wrażenie i momentami przyprawia o gęsią skórkę… Z wrażenia… […]

\n

The post Digital Nomad. Opcja Madera czyli rubieże Portugalii. appeared first on Będę Kodzić.

2018-03-22 18:14:27 digital-nomad-opcja-madera-czyli-rubieze-portugalii ck87juhko000ni3umanz2707n 2018-03-22 18:14:27 2018-03-22 18:14:27 cjfbdex6o010ai3umcmera40v Horizontal parallax. Jak go wykonać w czystym CSS? http://bedekodzic.pl/horizontal-parallax-css/

Potrzebujesz lekkiego i intrygującego efektu w swoim projekcie? Zaimplementuj horizontal parallax przy użyciu samego CSSa. A może jeszcze nie wiesz czym on jest? Dzisiaj dowiesz się wszystkiego. Czego dowiesz się w dzisiejszym wpisie? Po raz kolejny poruszę temat parallaksy czyli efektu optycznego powstałego na wskutek przesunięcia poszczególnych elementów z różną prędkością na przykładzie prostej aplikacji internetowej. […]

\n

The post Horizontal parallax. Jak go wykonać w czystym CSS? appeared first on Będę Kodzić.

2018-03-28 17:35:12 horizontal-parallax-jak-go-wykonac-w-czystym-css ck87juhko000ni3umanz2707n 2018-03-28 17:35:12 2018-03-28 17:35:12 cjfl94uaw010gi3um6zgc3c5h SEO dla developerów. Jak działają Google i co możemy z tym zrobić? http://bedekodzic.pl/seo-dla-devow/

Chcesz być wysoko w wynikach wyszukiwania i zastanawiasz się jak zoptymalizować swój projekt pod kątem SEO? Dzisiaj analiza działania wyszukiwarki Google i próba zrozumienia co możesz zrobić jako developer aby poprawić swoje rezultaty. Czego się dzisiaj dowiesz? W tym wpisie znajdziesz informacje na temat sposobu działania wyszukiwarki Google i co możesz zrobić jako developer aby […]

\n

The post SEO dla developerów. Jak działają Google i co możemy z tym zrobić? appeared first on Będę Kodzić.

2018-04-04 15:33:05 seo-dla-developerow-jak-dzialaja-google-i-co-mozemy-z-tym-zrobic ck87juhko000ni3umanz2707n 2018-04-04 15:33:05 2018-04-04 15:33:05 @@ -2742,7 +2770,6 @@ cjingjm6w0144i3um9vg5euyu 6 narzędzi które chcesz znać jako Web Dev w 2018 ro cjix0x7go014ii3umhzi2g5we Local storage vs. Session storage. Czym są i jak ich używać? http://bedekodzic.pl/localstorage/

Potrzebujesz szybkiego i łatwego sposobu na zarządzanie danymi na swojej stronie lub aplikacji? Użycie magazynu Web Storage może dać Ci trochę więcej swobody przy tworzeniu aplikacji. Jeśli jeszcze nie znasz tego mechanizmu lub chcesz go sobie odświeżyć to ten wpis jest właśnie dla Ciebie. Czego się dzisiaj dowiesz? Napiszę nieco o magazynie Web Storage i […]

\n

The post Local storage vs. Session storage. Czym są i jak ich używać? appeared first on Będę Kodzić.

2018-06-27 11:15:33 local-storage-vs-session-storage-czym-sa-i-jak-ich-uzywac ck87juhko000ni3umanz2707n 2018-06-27 11:15:33 2018-06-27 11:15:33 cjjhd0upc015bi3um8jg04oyg CSS drawing czyli pseudo-klasy i pseudo-elementy. Czy warto? http://bedekodzic.pl/css-drawing/

Czy słyszałeś kiedyś o pseudo-klasach w CSS? Pewnie tak 🙂 Ale dlaczego by sobie tej wiedzy nie odświeżyć? A może jeszcze nie znasz tych właściwości CSS’a? W takim razie warto je poznać. Zdecydowanie… Zapraszam na wpis przybliżający nieco to zagadnienie! Czego się dzisiaj dowiesz? Opiszę czym są pseudo-klasy i pseudo-elementy w CSS. Ten wpis pomoże […]

\n

The post CSS drawing czyli pseudo-klasy i pseudo-elementy. Czy warto? appeared first on Będę Kodzić.

2018-07-11 16:49:42 css-drawing-czyli-pseudo-klasy-i-pseudo-elementy-czy-warto ck87juhko000ni3umanz2707n 2018-07-11 16:49:42 2018-07-11 16:49:42 cjjsy3u20015qi3um0b7ugcyw Pamięć Cache. Czyli wszystko co musisz o niej wiedzieć jako Web Dev. http://bedekodzic.pl/cache/

Czy zastanawiałeś/aś się kiedyś dlaczego strony ładują się szybciej przy kolejnych wizytach? Jaką rolę ma w tym wszystkim przeglądarka? Na ile wpływ ma na to Developer który tworzy stronę lub aplikację? Jak ma się do tego wszystkiego słowo Cache? Skąd ono się w ogóle wzięło i po co Ci ta wiedza? O tym wszystkim dowiesz […]

\n

The post Pamięć Cache. Czyli wszystko co musisz o niej wiedzieć jako Web Dev. appeared first on Będę Kodzić.

2018-07-19 19:25:21 pamiec-cache-czyli-wszystko-co-musisz-o-niej-wiedziec-jako-web-dev ck87juhko000ni3umanz2707n 2018-07-19 19:25:21 2018-07-19 19:25:21 -ciyrjqggo006wi3umeuki182q Nie chcesz zainstalować Kali Linux na swoim komputerze. http://kot-zrodlowy.pl/linux/dajsiepoznac2017/2017/02/04/nie-chcesz-instalowac-kali.html Dzisiejszy post narodził się z pewnej potrzeby. Jestem osobą aktywną w sieci i społecznościach developerów. Niemal codziennie stykam się tam z osobami, które proszą o pomoc. Z chęcią udzielam tej p... 2017-02-04 18:01:27 nie-chcesz-zainstalowac-kali-linux-na-swoim-komputerze cjy7sgxs0000bi3umeb9z90rn 2017-02-04 18:01:27 2017-02-04 18:01:27 cjk2u923k015yi3um65om7s8e Podstawy SASS – struktura kodu, importy, zmienne, mixiny i extendy. http://bedekodzic.pl/sass-p1/

Jeśli interesujesz się Web Developmentem to może słyszałeś/aś o SASS’ie. Jeśli sam/a jesteś Developerem to napewno go znasz. Jest on aktualnie jednym z kluczowych narzędzi do tworzenia stron i aplikacji internetowych. W tym wpisie przeczytasz o jego podstawowych właściwościach. Czego się dzisiaj dowiesz? Czym jest SASS i jak używać go w swojej pracy. Opiszę jego […]

\n

The post Podstawy SASS – struktura kodu, importy, zmienne, mixiny i extendy. appeared first on Będę Kodzić.

2018-07-26 17:35:08 podstawy-sass-struktura-kodu-importy-zmienne-mixiny-i-extendy ck87juhko000ni3umanz2707n 2018-07-26 17:35:08 2018-07-26 17:35:08 cjkbfzyyw0167i3umhl3fdlpf Biblioteka Bedekodzijska. http://bedekodzic.pl/biblioteka-bedekodzijska/

Nauka programowania to nie tylko kursy online, blogi czy warsztaty i szkolenia. W życiu każdego programisty przychodzi taki moment, w którym nic nie zastąpi dobrej książki… Szukasz miejsca gdzie można znaleść info na temat ciekawych pozycji? Witaj więc w Bibliotece Bedekodzijskiej! Czego się tutaj dowiesz? Ten wpis ukazuje zbiór książek na temat programowania posiadanych przez […]

\n

The post Biblioteka Bedekodzijska. appeared first on Będę Kodzić.

2018-08-01 18:06:05 biblioteka-bedekodzijska ck87juhko000ni3umanz2707n 2018-08-01 18:06:05 2018-08-01 18:06:05 cjklckr74016hi3um5ttv39pc Wydajność aplikacji. Czy semantyczny HTML ma na to wpływ? http://bedekodzic.pl/semantic-html/

Czy wiesz czym jest semantyczny HTML? Pewnie tak bo dla Web Developera to chleb powszedni (chyba, że nim nie jesteś to wtedy ten artykuł Ci to wytłumaczy). Ale czy zastanawiałeś/aś się czy ma on jakikolwiek wpływ na wydajność aplikacji? Jeśli tak, to jaki? Zapraszam do lektury. Czego się dzisiaj dowiesz? Na początku wytłumaczę czym jest […]

\n

The post Wydajność aplikacji. Czy semantyczny HTML ma na to wpływ? appeared first on Będę Kodzić.

2018-08-08 16:27:58 wydajnosc-aplikacji-czy-semantyczny-html-ma-na-to-wplyw ck87juhko000ni3umanz2707n 2018-08-08 16:27:58 2018-08-08 16:27:58 @@ -2781,13 +2808,15 @@ cjg7k4tsw010yi3umb4r0crn1 ... o Server-Side Rendering-u słów kilka | Piotr Kow cjg9hbdiw010zi3umev5c70n5 CSS radial-gradient 2/2 | Kodowanie na ekranie | Piotr Kowalski https://www.youtube.com/watch?v=gj0D5oA3YXg Uwzględniając komentarz jednego z moich subskrybentów - Przemka - ulepszam mechanizm jaki w 5-tym vlogu się pojawił, a mianowicie zapewnienie treści podczas wczytywania się obrazka na wolnej sieci.\n\nProjekt:\nhttps://github.com/piecioshka/css-gradient-faker\n\nDokumentacja:\nhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nMuzyka:\nDanjel Zambo - Deep Sea\nMr. Oizo - Flat Beat\n\nIkony:\nCredits by https://flaticon.com/\n\n◀️ Kontakt ▶️\n🎬 YouTuber: https://youtube.com/user/piecioshka\n📚 Bloger: https://piecioshka.pl/blog\n👥 Organizator WarsawJS: http://warsawjs.com\n⌨️ Developer: https://github.com/piecioshka\n🎤 Speaker: http://crossweb.pl/profile/piotr-kowalski-piecioshka/\n🎓 Trener: https://piecioshka.pl/talks/\n💵 LinkedIn: https://www.linkedin.com/in/piecioshka\n🚹 Facebook: https://www.facebook.com/piecioshka\n📯 Twitter: https://twitter.com/piecioshka 2018-04-21 14:28:35 css-radial-gradient-22-or-kodowanie-na-ekranie-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-04-21 14:28:35 2018-04-21 14:28:35 cjgbaq2tc0114i3um771tar6e Sobotnie rozbieganie | Piotr Kowalski https://www.youtube.com/watch?v=e5rHIEOTxD8 W sobotę regeneracja. Trzeba wypoczywać, aby nie zwariować.\nZacznijmy weekend aktywnie! Od kilku kilometrów biegu!\n\nSobotnia aktywność via Endomondo:\nhttp://endomondo.com/users/15939217/workouts/1104923888\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nKontakt:\n• Blog: https://piecioshka.pl/blog\n• GitHub: https://github/piecioshka\n• LinkedIn: https://linkedin.com/in/piecioshka\n• Twitter: https://twitter.com/piecioshka\n• Instagram: https://instagram.com/piecioshka\n• Facebook: https://facebook.com/piecioshka\n\nMuzyka:\nDanjel Zambo - French toast\n\nIkony:\nCredits by https://flaticon.com/ 2018-04-22 20:59:36 sobotnie-rozbieganie-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-04-22 20:59:36 2018-04-22 20:59:36 cjgcp0h740118i3um93ny9c8m Jak wygląda dzień trenera podczas szkolenia z podstaw Front-endu? | Piotr Kowalski https://www.youtube.com/watch?v=GQaBo-aQmZI W niedzielny poranek byłem występowałem w roli trenera, ale również organizatora\nwarsztatów z programowania WarsawJS Workshop. Tym razem uczyliśmy społeczność \npodstaw Front-endu i jako trenerzy chcieliśmy zaszczepić chęć dalszej nauki.\n\nNa warsztatach było 40 uczestników chcących rozwijać swoje umiejętności w tej dziedzienie.\nKażda grupa była prowadzona pod okiem innego trenera,\ndzięki czemu poziom każdej grupy mógł być inny.\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nKontakt:\n• Blog: https://piecioshka.pl/blog\n• GitHub: https://github/piecioshka\n• LinkedIn: https://linkedin.com/in/piecioshka\n• Twitter: https://twitter.com/piecioshka\n• Instagram: https://instagram.com/piecioshka\n• Facebook: https://facebook.com/piecioshka\n\nMuzyka:\nDanjel Zambo - Love\n\nIkony:\nCredits by https://flaticon.com/ 2018-04-23 20:27:22 jak-wyglada-dzien-trenera-podczas-szkolenia-z-podstaw-front-endu-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-04-23 20:27:22 2018-04-23 20:27:22 +cjh92gk6g012bi3umh6x4dvwh Zadbaj o BEZPIECZEŃSTWO... kodu | Piotr Kowalski https://www.youtube.com/watch?v=8Mhvn2jImwI Wyruszam w miejsce, gdzie mogę opowiedzieć o czymś o co my - programiści - powinniśmy dbać.\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nKontakt:\n• Blog: https://piecioshka.pl/blog\n• GitHub: https://github/piecioshka\n• LinkedIn: https://linkedin.com/in/piecioshka\n• Twitter: https://twitter.com/piecioshka\n• Instagram: https://instagram.com/piecioshka\n• Facebook: https://facebook.com/piecioshka\n\nMuzyka:\nP.H. Fat - Dinosaur Blood! - 03 Freak\n\nIkony:\nCredits by https://flaticon.com/ 2018-05-16 12:12:25 zadbaj-o-bezpieczenstwo-kodu-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-05-16 12:12:25 2018-05-16 12:12:25 cjge8w46g011ai3umfh3egk4g Co robiliśmy na warsztatach z podstaw Front-endu? | Kodowanie na ekranie | Piotr Kowalski https://www.youtube.com/watch?v=MISzG8tYJKA W dzisijeszym odcinku opowiadam o swoich doświadczeniach zw. z wczorajszym szkoleniem z podstaw Front-endu oraz powtarzam ćwiczenie, aby pokazać prawidłowy sposób zrealizowania aplikacji docelowej.\n\nProjekt:\nhttps://github.com/piecioshka/warsawjs-workshop-19-portfolio\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nMuzyka:\nDanjel Zambo - Saloon\n\nIkony:\nCredits by https://flaticon.com/\n\n◀️ Kontakt ▶️\n🎬 YouTuber: https://youtube.com/user/piecioshka\n📚 Bloger: https://piecioshka.pl/blog\n👥 Organizator WarsawJS: http://warsawjs.com\n⌨️ Developer: https://github.com/piecioshka\n🎤 Speaker: http://crossweb.pl/profile/piotr-kowalski-piecioshka/\n🎓 Trener: https://piecioshka.pl/talks/\n💵 LinkedIn: https://www.linkedin.com/in/piecioshka\n🚹 Facebook: https://www.facebook.com/piecioshka\n📯 Twitter: https://twitter.com/piecioshka 2018-04-24 22:31:37 co-robilismy-na-warsztatach-z-podstaw-front-endu-or-kodowanie-na-ekranie-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-04-24 22:31:37 2018-04-24 22:31:37 cjgg64ofk011bi3umg6lthf5q Jak było na konferencji Code Europe 2018? | Piotr Kowalski https://www.youtube.com/watch?v=syMI026IqBs Dostałem zaproszenie na konferencję z ramienia WarsawJS.\nBardzo się z tego cieszę, bo mogę zobaczyć jak to jest na wydarzeniu,\nktóremu patronujemy.\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nKontakt:\n• Blog: https://piecioshka.pl/blog\n• GitHub: https://github/piecioshka\n• LinkedIn: https://linkedin.com/in/piecioshka\n• Twitter: https://twitter.com/piecioshka\n• Instagram: https://instagram.com/piecioshka\n• Facebook: https://facebook.com/piecioshka\n\nMuzyka:\nDanjel Zambo - Flying High\n\nIkony:\nCredits by https://flaticon.com/ 2018-04-26 06:49:50 jak-bylo-na-konferencji-code-europe-2018-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-04-26 06:49:50 2018-04-26 06:49:50 cjgj25ksg011gi3um259t9kgs Renderowanie kilku elementów w vanilla JavaScript | Kodowanie na ekranie | Piotr Kowalski https://www.youtube.com/watch?v=hPIW6hOLijc Kilka tygodni temu Filip - mój nowy kolega - poprosił mnie o to, abym pokazał mu jak wyrenderować prostą kolekcję z JavaScriptu po stronie przeglądarki.\n\n• Najczęściej shazamowane w zeszłym tygodniu utwory:\n https://www.shazam.com/pl/charts/top-100/world\n\n• Bulma\n https://bulma.io/documentation/elements/box/\n\n• Link do frameworka na CDNJS\n https://cdnjs.com/libraries/bulma\n\n• Node vs Element\n https://piecioshka.pl/blog/2011/09/06/node-vs-element.html\n\n• Mustache.js\n https://github.com/janl/mustache.js\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nIkony:\nCredits by https://flaticon.com/\n\n◀️ Kontakt ▶️\n🎬 YouTuber: https://youtube.com/user/piecioshka\n📚 Bloger: https://piecioshka.pl/blog\n👥 Organizator WarsawJS: http://warsawjs.com\n⌨️ Developer: https://github.com/piecioshka\n🎤 Speaker: http://crossweb.pl/profile/piotr-kowalski-piecioshka/\n🎓 Trener: https://piecioshka.pl/talks/\n💵 LinkedIn: https://www.linkedin.com/in/piecioshka\n🚹 Facebook: https://www.facebook.com/piecioshka\n📯 Twitter: https://twitter.com/piecioshka 2018-04-28 07:21:52 renderowanie-kilku-elementow-w-vanilla-javascript-or-kodowanie-na-ekranie-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-04-28 07:21:52 2018-04-28 07:21:52 cjgnxv68o011ni3um4je4btda Rozwiązuję mój odwieczny problem z dyskami twardymi HDD kupując SSD | Piotr Kowalski https://www.youtube.com/watch?v=sU6p5Uaga9M Wynik testów:\n1. ADATA (HDD) [2TB] "AHV620" 94MB/s (W) / 99MB/s (R)\n2. WD My Passport (HDD) [4TB] "WDBYFT0040BRD" 110MB/s (W) / 110MB/s (R)\n3. WD My Passport (SSD) [256GB] "WDBK3E2560PSL" 230MB/s (W) / 380MB/s (R)\n\nLinki do sklepów:\n- https://www.morele.net/dysk-zewnetrzny-adata-dashdrive-hv620-2tb-ahv620-2tu3-cbk-599944/\n- https://www.morele.net/dysk-zewnetrzny-western-digital-my-passport-2-5-4tb-usb-3-0-wdbyft0040brd-wesn-1082589/\n- https://www.morele.net/dysk-zewnetrzny-western-digital-my-passport-ssd-256gb-wdbk3e2560psl-wesn-1342972/\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nKontakt:\n• Blog: https://piecioshka.pl/blog\n• GitHub: https://github/piecioshka\n• LinkedIn: https://linkedin.com/in/piecioshka\n• Twitter: https://twitter.com/piecioshka\n• Instagram: https://instagram.com/piecioshka\n• Facebook: https://facebook.com/piecioshka\n\nMuzyka:\nYouTube - The Basement Strut\n\nIkony:\nCredits by https://flaticon.com/ 2018-05-01 17:20:39 rozwiazuje-moj-odwieczny-problem-z-dyskami-twardymi-hdd-kupujac-ssd-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-05-01 17:20:39 2018-05-01 17:20:39 cjgpjc94g011qi3umfdgf9099 TDD 1/10: Wprowadzenie do Jasmine i Karma | Kodowanie na ekranie | Piotr Kowalski https://www.youtube.com/watch?v=aR7j6jy9Sqc Dziś ostatni dzień pracy z kodem! Od jutra, a w sumie dzisiaj wieczorem, rozpoczynamy WEEKEND MAJOWY! W dzisiejszym odcinku wykorzystamy TDD, do tego aby rozpocząć projekt - grę snooker - w oparciu o HTML5 Canvas.\n\n00:15 - Otwieramy WebStorma\n01:45 - Stowrzenie pliku package.json\n02:24 - Instalacja Karma\n02:45 - Stworzenie konfiguracji karma.conf.js\n05:20 - Stworzenie pierwszego pliku z testami\n06:10 - Dodanie wsparcia do Jasmine w WebStormie\n06:50 - Instalacja Jasmine\n07:40 - Instalacja karma-commonjs\n08:50 - Pierwsze uruchomienie testów, które zakończyło się powodzeniem\n09:25 - Instalacja karma-clear-screen-reporter\n15:15 - Każdy test jednostkowy dzielimy na 3 etapy: Given, When, Then\n15:55 - Dodanie bloku Teardown\n24:30 - Stworzenie testów dla klasy Ball\n\nŹródła projektu realizowane w filmie dostępne są tutaj:\n- https://github.com/piecioshka/tdd-snooker\n\nDodatkowe narzędzia używane w filmie:\n- https://github.com/karma-runner/karma\n- https://github.com/jasmine/jasmine-npm\n- https://github.com/karma-runner/karma-commonjs\n- https://github.com/arthurc/karma-clear-screen-reporter\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nMuzyka:\nYouTube - The Basement Strut\n\nIkony:\nCredits by https://flaticon.com/\n\n◀️ Kontakt ▶️\n🎬 YouTuber: https://youtube.com/user/piecioshka\n📚 Bloger: https://piecioshka.pl/blog\n👥 Organizator WarsawJS: http://warsawjs.com\n⌨️ Developer: https://github.com/piecioshka\n🎤 Speaker: http://crossweb.pl/profile/piotr-kowalski-piecioshka/\n🎓 Trener: https://piecioshka.pl/talks/\n💵 LinkedIn: https://www.linkedin.com/in/piecioshka\n🚹 Facebook: https://www.facebook.com/piecioshka\n📯 Twitter: https://twitter.com/piecioshka 2018-05-02 20:09:34 tdd-110-wprowadzenie-do-jasmine-i-karma-or-kodowanie-na-ekranie-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-05-02 20:09:34 2018-05-02 20:09:34 cjgr02g00011si3um47qr25bd Czego nigdy sobie nie kupisz? | Piotr Kowalski https://www.youtube.com/watch?v=12tzjohWh-Q Rozpoczynamy weekend majowy 2018 - zapraszam na podróż do Hrubieszowa!\nMożesz być bogaty, możesz przeczytać wszystkie książki,\nale tylko doświadczenie pozwoli Ci na wyższe stanowisko!\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nKontakt:\n• Blog: https://piecioshka.pl/blog\n• GitHub: https://github/piecioshka\n• LinkedIn: https://linkedin.com/in/piecioshka\n• Twitter: https://twitter.com/piecioshka\n• Instagram: https://instagram.com/piecioshka\n• Facebook: https://facebook.com/piecioshka\n\nMuzyka:\nP.H. Fat - Dinosaur Blood! - 02 The Big Five (Feat. Fuzzy Slipperz)\n\nIkony:\nCredits by https://flaticon.com/ 2018-05-03 20:45:36 czego-nigdy-sobie-nie-kupisz-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-05-03 20:45:36 2018-05-03 20:45:36 -cjh92gk6g012bi3umh6x4dvwh Zadbaj o BEZPIECZEŃSTWO... kodu | Piotr Kowalski https://www.youtube.com/watch?v=8Mhvn2jImwI Wyruszam w miejsce, gdzie mogę opowiedzieć o czymś o co my - programiści - powinniśmy dbać.\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nKontakt:\n• Blog: https://piecioshka.pl/blog\n• GitHub: https://github/piecioshka\n• LinkedIn: https://linkedin.com/in/piecioshka\n• Twitter: https://twitter.com/piecioshka\n• Instagram: https://instagram.com/piecioshka\n• Facebook: https://facebook.com/piecioshka\n\nMuzyka:\nP.H. Fat - Dinosaur Blood! - 03 Freak\n\nIkony:\nCredits by https://flaticon.com/ 2018-05-16 12:12:25 zadbaj-o-bezpieczenstwo-kodu-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-05-16 12:12:25 2018-05-16 12:12:25 +cjve711so01k4i3um8axleapz Webinar: Testy end-to-end — Jak zacząć? https://www.youtube.com/watch?v=bmpoLbmMQ30 \N 2019-05-07 19:35:03 webinar-testy-end-to-end-jak-zaczac ckir8ypi0000ki3um2pa1fvzp 2019-05-07 19:35:03 2019-05-07 19:35:03 +cksyftnwa00020wihggd87o1c 🍿 Web Prasówka Live #17 https://www.youtube.com/watch?v=7l3-Qyg2zm4 Najciekawsze newsy ze świata WebDev.\n⚡️ #react​​​, #javascript​​​, CSS, backend, #frontend​​​, heheszki, nowe technologie and more. 2021-08-30 09:18:42 web-prasowka-live-17 ckivz8t54001di3umfv7i4q26 2021-08-30 09:26:55.546 2021-08-30 09:26:55.546 cjhamuoa8012ei3ume63t7lhy Nowa organizacja? | Piotr Kowalski https://www.youtube.com/watch?v=x5AWeCaOXjk Zapraszam do parku miejskiego, abyśmy porozmawiali na temat mojego nowego\nstarego pomysłu jakim jest stworzenie organizacji promującej JavaScript,\na nawet cały front-end w moim rodzinnym mieście - Hrubieszowie.\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nZapraszam na inne moje media, gdzie produkuję treść:\n• Blog: https://piecioshka.pl/blog\n• GitHub: https://github/piecioshka\n• Twitter: https://twitter.com/piecioshka\n• Instagram: https://instagram.com/piecioshka\n\nMuzyka:\n• P.H. Fat - Dinosaur Blood! - 08 JABU'S DANCE TEAM\n• Why Not Nod - Dapper In Dope Matter - 02 Ground We Walk On\n• Danijel Zambo - Beats - 07 Comming Home\n• Danijel Zambo - Higher.- 18 Work Out 2018-05-17 14:31:02 nowa-organizacja-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-05-17 14:31:02 2018-05-17 14:31:02 cjhbzrjhk012gi3umhblt9s9g Kiedy napiszę swoją pierwszą książkę? | Piotr Kowalski https://www.youtube.com/watch?v=8pLuJ7ftiCs Chciałbym kiedyś napisać książkę. Jednak aby to zrobić muszę widzieć w tym cel.\nObecnie niestety, ale nie mam pomysłu na jaki temat mógłbym napisać książkę.\nMyślę, że czas mi pomoże.\n\n▶︎ Jeśli spodobał Ci się ten film, daj mi znać w komentarzu! ◀︎\n\nZapraszam na inne moje media, gdzie produkuję treść:\n• Blog: https://piecioshka.pl/blog\n• GitHub: https://github/piecioshka\n• Twitter: https://twitter.com/piecioshka\n• Instagram: https://instagram.com/piecioshka\n\nMuzyka:\n• Why Not Nod - Dapper In Dope Matter - 06 King Of Riddam ft. Boykey\n• TOO MANY ZOOZ - Subway Gawdz - 02 Brasshouse Vol 7 No 69\n\nIkony:\nCredits by https://flaticon.com/ 2018-05-18 13:20:17 kiedy-napisze-swoja-pierwsza-ksiazke-or-piotr-kowalski ckir8ypi0000ki3um2pa1fvzp 2018-05-18 13:20:17 2018-05-18 13:20:17 cj18a3s0g00d4i3um5vdja8jd Indurian aktualizacja – grywalne demo http://www.induweb.pl/indurian-aktualizacja-grywalne-demo/

Link do gry. Wreszcie jestem zadowolony z postępów prac nad projektem. Teraz, gdy lepiej poznałem Reacta i Reduxa mogłem skupić się na pisaniu nowych funkcjonalności Czytaj więcej

\n

The post Indurian aktualizacja – grywalne demo appeared first on Induweb.

2017-04-07 20:23:22 indurian-aktualizacja-grywalne-demo cjczvdmnk000hi3umdr1lf9nt 2017-04-07 20:23:22 2017-04-07 20:23:22 @@ -2808,7 +2837,6 @@ cjv2664gg01jmi3um3fq33px6 Pierwszy polski wywiad nt. Deno — nowego projektu au cjv43zlso01jpi3um2azj2hah Moje spojrzenie na Code Review vol. 2 https://www.youtube.com/watch?v=NBZiObk_scg \N 2019-04-30 18:12:15 moje-spojrzenie-na-code-review-vol-2 ckir8ypi0000ki3um2pa1fvzp 2019-04-30 18:12:15 2019-04-30 18:12:15 cjv46qmm001jqi3umhc2n6gy5 Code Review vol. 2 https://www.youtube.com/watch?v=q1tlrOekPps \N 2019-04-30 19:29:15 code-review-vol-2 ckir8ypi0000ki3um2pa1fvzp 2019-04-30 19:29:15 2019-04-30 19:29:15 cjvbzqa6w01jzi3um7754a002 React.js to NIE wszystko https://www.youtube.com/watch?v=1wudvsb7LBE Dawno dawno temu.... byłem trenerem podczas #WarsawJS Workshop #25, gdzie omawiamy była biblioteka #React.js wraz z całym ekosystemem.\n\nWydarzenie w social mediach: https://www.facebook.com/events/237710296908672/\n\nZapraszam do obserwowania mnie w mediach społecznościowych pod adresem https://fb.com/piecioshka.trener 2019-05-06 06:35:11 reactjs-to-nie-wszystko ckir8ypi0000ki3um2pa1fvzp 2019-05-06 06:35:11 2019-05-06 06:35:11 -cjve711so01k4i3um8axleapz Webinar: Testy end-to-end — Jak zacząć? https://www.youtube.com/watch?v=bmpoLbmMQ30 \N 2019-05-07 19:35:03 webinar-testy-end-to-end-jak-zaczac ckir8ypi0000ki3um2pa1fvzp 2019-05-07 19:35:03 2019-05-07 19:35:03 cjvmkjd7401kbi3umels2dpjb Pierwszy raz nagrywam meetup WarsawJS https://www.youtube.com/watch?v=sL7-lil6BB4 Zapraszam Was na film, podczas którego zobaczycie realizację video — moją pierwszą — na potrzeby #Meetup-u #WarsawJS.\n\nZ tego miejsca chciałem podziękować » Kamilowi Grabowskiego « za to, że przez pierwsze 49 meetupów ogarniał ten temat.\n\nDziękuję » Danielowi Szymankowi «, który pomagał mi podczas mojej pierwszej realizacji — bez Ciebie chyba bym skisnął z wysiłku :)\n\nLubię programowanie, ale także lubię tworzyć filmy, a nagrywanie meetupów jest czymś co sprawia mi #Radość!\n\nZapraszam do kontaktu via https://fb.com/piecioshka.trener 2019-05-13 16:15:22 pierwszy-raz-nagrywam-meetup-warsawjs ckir8ypi0000ki3um2pa1fvzp 2019-05-13 16:15:22 2019-05-13 16:15:22 cjvo834co01khi3umbwsc110d Piotr Kowalski – transmisja na żywo https://www.youtube.com/watch?v=g45LpQi9rBU \N 2019-05-14 20:02:21 piotr-kowalski-transmisja-na-zywo ckir8ypi0000ki3um2pa1fvzp 2019-05-14 20:02:21 2019-05-14 20:02:21 cj2hwm6gg00idi3um1ssi84hx Kurs programowania w Coders Lab – moje wrażenia http://www.wakeupandcode.pl/kurs-programowania-w-coders-lab/

Wiele osób pyta mnie o kurs programowania, który skończyłam. I w końcu postanowiłam kilka moich przemyśleń spisać. Jeśli jesteście ciekawi – zapraszam na wpis Kurs programowania w Coders Lab – moje wrażenia! Słowem wstępu Na sam początek chciałam dokładnie wyjaśnić, jaki kurs i gdzie skończyłam. Otóż był to kurs „Zostań programistą front-end” organizowany w Poznaniu […]

\n

Artykuł Kurs programowania w Coders Lab – moje wrażenia pochodzi z serwisu Wake up and Code.

2017-05-09 18:43:10 kurs-programowania-w-coders-lab-moje-wrazenia ckhgqbfog000ii3um332tat33 2017-05-09 18:43:10 2017-05-09 18:43:10 @@ -2827,7 +2855,6 @@ cj32swla000k6i3uma6mf25cl Indurian – gra w React. Podsumowanie #12 http://www. cj3bgfnk800l0i3umcdbr0s7q Wielkie podsumowanie DSP2017 – projekt Indurian http://www.induweb.pl/wielkie-podsumowanie-dsp2017-projekt-indurian/

Witajcie, to już ostatni wpis w konkursowej kategorii Daj się poznać 2017. Po trzech miesiącach zakończyłem pracę nad projektem, jednak co ważniejsze spełniłem również wymagania Czytaj więcej

\n

The post Wielkie podsumowanie DSP2017 – projekt Indurian appeared first on Induweb.

2017-05-30 11:03:17 wielkie-podsumowanie-dsp2017-projekt-indurian cjczvdmnk000hi3umdr1lf9nt 2017-05-30 11:03:17 2017-05-30 11:03:17 cj3x2egxk00mni3um1lef5xf9 JS: optymalizacja eventu scroll http://www.induweb.pl/optymalizacja-eventu-scroll/

Jako developer możesz spotkać się z zadaniem podpięcia jakiejś funkcji pod zdarzenie onscroll. Może to być na przykład przyklejane menu, bądź inny element, wyświetlanie progress bara Czytaj więcej

\n

The post JS: optymalizacja eventu scroll appeared first on Induweb.

2017-06-14 14:01:23 js-optymalizacja-eventu-scroll cjczvdmnk000hi3umdr1lf9nt 2017-06-14 14:01:23 2017-06-14 14:01:23 cj7ist4xc00rli3umcuad3xmk Frontendy.pl ruszają! Zapraszam na nowego bloga http://www.induweb.pl/frontendy-pl-ruszaja-zapraszam-nowego-bloga/

Na tej stronie nie pojawią się już nowe wpisy, zapraszam na nowego bloga http://frontendy.pl oraz na Facebooka https://www.facebook.com/frontendypl/. Do zobaczenia!

\n

The post Frontendy.pl ruszają! Zapraszam na nowego bloga appeared first on Induweb.

2017-09-13 09:02:54 frontendypl-ruszaja-zapraszam-na-nowego-bloga cjczvdmnk000hi3umdr1lf9nt 2017-09-13 09:02:54 2017-09-13 09:02:54 -cjczvdmnk00xqi3umafjc1d49 Zapraszam na mój kurs video http://www.induweb.pl/zapraszam-moj-kurs-video/

Opublikowałem już pierwszy odcinek mojego nowego kursu: Zakoduj BLOG od zera. Zapraszam wszystkich początkujących frontendowców do oglądania na http://frontendy.pl/video/01-zakoduj-blog-od-zera-wprowadzenie/

\n

The post Zapraszam na mój kurs video appeared first on Induweb.

2018-01-29 07:05:26 zapraszam-na-moj-kurs-video cjczvdmnk000hi3umdr1lf9nt 2018-01-29 07:05:26 2018-01-29 07:05:26 ciyvxdxlc006zi3umapyf5o1j Hello World! http://www.wakeupandcode.pl/hello-world/

Początki od zawsze były dla mnie ekscytujące. Tak samo stało się z programowaniem. Kiedy tylko odkryłam, o co w tym mniej więcej chodzi, wiedziałam, że to jest coś, co mi się spodoba. Od zawsze też dość szybko mi ta ekscytacja mijała.  Tymczasem minęło już trochę czasu odkąd zaczęłam kodować i nadal mi się podoba. Stawiam dopiero pierwsze […]

\n

Artykuł Hello World! pochodzi z serwisu Wake up and Code.

2017-02-07 19:34:42 hello-world ckhgqbfog000ii3um332tat33 2017-02-07 19:34:42 2017-02-07 19:34:42 cizrg9oow007ni3ume6wb6srq Mój projekt – odsłona I http://www.wakeupandcode.pl/moj-projekt-odslona-i/

W powietrzu czuć już wiosnę, także pojawiają się też chęci do działania! W tym optymistycznym klimacie, chciałabym przedstawić szerzej blog i projekt, nad którym będę pracować. Blog powstał na potrzeby konkurs Daj Się Poznać. Gdyby ktoś jeszcze był zainteresowany konkursem – rejestracja przedłużona do 12 marca – odsyłam tutaj po więcej szczegółów. Dzisiejszy post chciałam poświęcić wstępnemu […]

\n

Artykuł Mój projekt – odsłona I pochodzi z serwisu Wake up and Code.

2017-03-01 21:04:08 moj-projekt-odslona-i ckhgqbfog000ii3um332tat33 2017-03-01 21:04:08 2017-03-01 21:04:08 cizvotua80080i3um6reg5uwl Programowanie – jak zacząć? http://www.wakeupandcode.pl/programowanie-jak-zaczac/

W dzisiejszym wpisie podzielę się moimi doświadczeniami związanymi z początkami nauki programowania. Z góry uprzedzam, że nie piszę tego z perspektywy dewelopera, który od kilku lat świetnie sobie radzi na rynku pracy. Nadal jestem początkująca, cały czas się uczę, ale mam już jakąś wiedzę i myślę, że kilka moich rad może przydać się osobom, które […]

\n

Artykuł Programowanie – jak zacząć? pochodzi z serwisu Wake up and Code.

2017-03-04 20:14:50 programowanie-jak-zaczac ckhgqbfog000ii3um332tat33 2017-03-04 20:14:50 2017-03-04 20:14:50 @@ -2837,6 +2864,7 @@ cjvotfsf401kii3um6qbv03t7 Webinar: Testy end-to-end — Więcej więcej! https:/ cjvzmyleo01kxi3umbnxabrtf Webinar: Testy end-to-end — Page Object Model https://www.youtube.com/watch?v=GPwxXX3mCI8 Support the stream: https://streamlabs.com/piotrkowalskipiecioshka 2019-05-22 19:44:12 webinar-testy-end-to-end-page-object-model ckir8ypi0000ki3um2pa1fvzp 2019-05-22 19:44:12 2019-05-22 19:44:12 cjwt3jffs01lwi3umcqgp7jlv To nie ja wybrałem Reacta, tylko on wybrał mnie! — Wywiad z Piotrem Łysikiem https://www.youtube.com/watch?v=w7LsZgdzmaM Rozmawiałem z Piotrem Łysikiem na temat biblioteki #React.\nReact.js to najpopularniejsze narzędzie do budowy aplikacji webowych.\nAutorem narzędzia jest #Facebook, który tworzy dużo narzędzi w #JavaScript.\n\nO moim rozmówcy\n\nPiotr ma 6-letnie doświadczenie w wytwarzaniu oprogramowania.\nWięcej informacji o moim gościu: https://www.linkedin.com/in/piotrlysik/\n\nKontakt\n\nStworzyłem fajne miejsce w sieci: https://fb.com/piecioshka.trener\nPublikuję tam rzeczy, nad którymi aktualnie pracuję... a jest ich mnóstwo!\n\n√ piecioshka 2019-06-12 10:33:37 to-nie-ja-wybralem-reacta-tylko-on-wybral-mnie-wywiad-z-piotrem-lysikiem ckir8ypi0000ki3um2pa1fvzp 2019-06-12 10:33:37 2019-06-12 10:33:37 cjx34sfzs01m5i3umbwdh3bui Najpopularniejsze paczki autora w npm | Narzędzia Świata https://www.youtube.com/watch?v=0ksiyp1LGF4 ➡️ Subskrybuj, aby być na bieżąco: http://bit.ly/piecioshka-youtube\n\nPobierz listę najpopularniejszych paczek autora za pomocą\nnarzędzia: npm-author-most-downloaded\n\nSkontaktuj się ze mną za pomocą: https://fb.com/piecioshka.trener\n\nZapraszam do obejrzenia kolejnego odcinka,\n\n√ piecioshka 2019-06-19 11:06:19 najpopularniejsze-paczki-autora-w-npm-or-narzedzia-swiata ckir8ypi0000ki3um2pa1fvzp 2019-06-19 11:06:19 2019-06-19 11:06:19 +ckrvxai0k00020wmns8lcnvyq JVM Tuesday vol. 49 - State of Developer Ecosystem, nowy Intellij, a także materiały dla początkujących Javowców https://blog.vived.io/jvm-tuesday-vol-49/ W dniu dzisiejszym rządzi JetBrains - zarówno ciąg dalszy tematu The State of Developer Ecosystem 2021, jak i nowa wersja Intellij IDEA. A jako bonus - świetny, niedeprymujący zbiór materiałów dla mniej doświadczonych Javowców. 2021-08-03 10:08:23 jvm-tuesday-vol.-49-state-of-developer-ecosystem-nowy-intellij-a-takze-materialy-dla-poczatkujacych-javowcow ckmor5k8y000044moj65m13y0 2021-08-03 10:32:53.684 2021-08-03 10:32:53.684 ck02hziqw01p9i3um4jbk6yu8 Przygotowania do konferencji ConFrontJS 2018 https://www.youtube.com/watch?v=MgiqJGRIKVk 🔖 Kup bilet na tegoroczną edycję: https://evenea.pl/event/confrontjs-2019/\n➡️ Subskrybuj, aby być na bieżąco: https://bit.ly/piecioshka-youtube\n\nJak wyglądały przygotowania do pierwszej w historii WarsawJS konferencji,\nktórą miałem przyjemność współorganizować?\n\nW takim krótkim vlogu zawarłem mój punkt widzenia na to wydarzenie.\n\nAcha! W tym roku kolejna edycja — ConFrontJS 2019!\nWięcej informacji na stronie https://confrontjs.com/\n\n---\n\nSkontaktuj się ze mną za pomocą: https://fb.com/piecioshka.trener\n\nZapraszam do obejrzenia kolejnego odcinka,\n\n√ piecioshka 2019-09-02 14:27:05 przygotowania-do-konferencji-confrontjs-2018 ckir8ypi0000ki3um2pa1fvzp 2019-09-02 14:27:05 2019-09-02 14:27:05 ck0wb3j2801pyi3umb3g82w8g Pierwszy raz organizowałem konferencję *Stresowałem się* https://www.youtube.com/watch?v=v2fncJr-74Q 🔖 Kup bilet na tegoroczną edycję: https://evenea.pl/event/confrontjs-2019/\n➡️ Subskrybuj, aby być na bieżąco: https://bit.ly/piecioshka-youtube\n\nRazem z Kasią i Piotrem zorganizowaliśmy konferencję programistyczną!\nZajęło to nam 3 miesiące. Zobaczcie jak nam poszło!\n\nPS Oczywiście, dziękujemy naszym wolontariuszom — razem tworzyliśmy świetny TEAM ❤️\n\nAcha! W tym roku kolejna edycja — ConFrontJS 2019!\nWięcej informacji na stronie https://confrontjs.com/\n\n---\n\nSkontaktuj się ze mną za pomocą: https://fb.com/piecioshka.trener\nZapraszam do obejrzenia kolejnego odcinka,\n\n√ piecioshka 2019-09-23 11:07:20 pierwszy-raz-organizowalem-konferencje-stresowalem-sie ckir8ypi0000ki3um2pa1fvzp 2019-09-23 11:07:20 2019-09-23 11:07:20 ck164nvqo01q7i3um5ojfh0tr Porady dla początkujących JavaScript developerów? — Wywiad / Gość: Ania Ambroziak https://www.youtube.com/watch?v=X_sZBIl7pkc Rozmawiałem z Anią Ambroziak na temat Jej historii w dążeniu do znalezienia pracy jako #JavaScript / #Frontend #Developer.\n\nO moim rozmówcy\n\nAnia przebranżowiła się na programistkę.\nWięcej informacji o Ani możecie znaleźć na Jej profilu na LinkedIn: https://www.linkedin.com/in/anna-ambroziak/\n\nKontakt\n\n◼︎ https://fb.com/piecioshka.trener\n◼︎ https://piecioshka.pl/\n◼︎ https://instagram.com/piecioshka\n\nDo zobaczenia!\n\n√ 2019-09-30 08:04:54 porady-dla-poczatkujacych-javascript-developerow-wywiad-gosc-ania-ambroziak ckir8ypi0000ki3um2pa1fvzp 2019-09-30 08:04:54 2019-09-30 08:04:54 @@ -2849,6 +2877,7 @@ ck8ami6ds01yki3um1f5u76mo Luźna pogadanka o kodzie https://www.youtube.com/watc ck8hpnqxs01yzi3um9cta8y5l Luźna pogadanka o kodzie #2 https://www.youtube.com/watch?v=2E0ApUaBGBI Mam godzinkę! Może pogadamy o kodzie? Zadawajcie pytania! 2020-04-01 19:16:04 luzna-pogadanka-o-kodzie-2 ckir8ypi0000ki3um2pa1fvzp 2020-04-01 19:16:04 2020-04-01 19:16:04 ck91l1jig01zui3umatgn4ngt Webowe pogawędki #1 https://www.youtube.com/watch?v=bg_CDC7DtTE \N 2020-04-15 17:02:13 webowe-pogawedki-1 ckir8ypi0000ki3um2pa1fvzp 2020-04-15 17:02:13 2020-04-15 17:02:13 ck9riqrwg0219i3umhj8m018e Luźna pogadanka o kodzie #3 https://www.youtube.com/watch?v=hu9VMuNaY3I Może pogadamy o kodzie? Zadawajcie pytania!\n❖ StreamYard: https://streamyard.com?fpr=piecioshka\n(Najlepsza aplikacja do live streamingu)\n\n---\n\n◼︎ Blog: https://piecioshka.pl/blog/\n◼︎ GitHub: https://github.com/piecioshka\n◼︎ Twitter: https://twitter.com/piecioshka\n◼︎ Facebook: https://instagram.com/piecioshka.trener\n◼︎ Instagram: https://instagram.com/piecioshka 2020-05-03 20:39:52 luzna-pogadanka-o-kodzie-3 ckir8ypi0000ki3um2pa1fvzp 2020-05-03 20:39:52 2020-05-03 20:39:52 +ckrw22o4o00020wlfrj11l5yt Jak połączyć się z MongoDB w Fastify? https://fsgeek.pl/post/fastify-plugin-mongodb/ Ciężko zrobić fajną aplikację bez bazy danych. Do wyboru mamy wiele rodzajów baz- relacyjne, NoSQL, grafowe, klucz-wartość itd. W dzisiejszym wpisie pokazuję jak połączyć projekt w Fastify z MongoDB. 2021-08-03 16:00:00 jak-polaczyc-sie-z-mongodb-w-fastify ckhxjb6o0000yi3umb3hg09jv 2021-08-03 12:46:46.44 2021-08-03 12:46:46.44 ck9v1ceqw021di3umc200ga6k I work on: Solidarity, rollup-lib-bundler — Open Source Day https://www.youtube.com/watch?v=Eqivbae-kbs I will spend an hour solving bugs / adding features in your projects.\nIf you want to suggest what project I should work on, text me on Instagram.\n\n❖ StreamYard: https://streamyard.com?fpr=piecioshka\n(Best app for creating live streamings)\n\nI was created a few PRs:\n\n+ https://github.com/Comandeer/rollup-lib-bundler/pull/167\n+ https://github.com/Comandeer/rollup-lib-bundler/pull/169\n+ https://github.com/Comandeer/rollup-lib-bundler/pull/170\n+ https://github.com/infinitered/solidarity/pull/238 (merged during streaming)\n\n---\n\n◼︎ Blog: https://piecioshka.pl/blog/\n◼︎ GitHub: https://github.com/piecioshka\n◼︎ Twitter: https://twitter.com/piecioshka\n◼︎ Facebook: https://instagram.com/piecioshka.trener\n◼︎ Instagram: https://instagram.com/piecioshka 2020-05-06 07:43:53 i-work-on-solidarity-rollup-lib-bundler-open-source-day ckir8ypi0000ki3um2pa1fvzp 2020-05-06 07:43:53 2020-05-06 07:43:53 cka26cbf4021oi3umf2swhixu WALKA z CSS Houdini API, a dokładnie Paint API — Luźna pogadanka o kodzie #4 https://www.youtube.com/watch?v=cF4mWhR_60w Może pogadamy o kodzie? Zadawajcie pytania!\nDo streamingu używam StreamYard: https://streamyard.com?fpr=piecioshka\n\n---\n\nTematy poruszane na filmie:\n\nAplikacja zrealizowana podczas transmisji:\n* https://github.com/piecioshka/css-houdini-api-example\n\n#CSS #Houdini #API (Link od Konrada):\n* https://ishoudinireadyyet.com/\n\nDokumentacja na MDN\n* https://developer.mozilla.org/en-US/docs/Web/Houdini\n\n---\n\n◼︎ Blog: https://piecioshka.pl/blog/\n◼︎ GitHub: https://github.com/piecioshka\n◼︎ Twitter: https://twitter.com/piecioshka\n◼︎ Facebook: https://instagram.com/piecioshka.trener\n◼︎ Instagram: https://instagram.com/piecioshka 2020-05-11 07:38:10 walka-z-css-houdini-api-a-dokladnie-paint-api-luzna-pogadanka-o-kodzie-4 ckir8ypi0000ki3um2pa1fvzp 2020-05-11 07:38:10 2020-05-11 07:38:10 cka51qfk8021si3um0y8xakld I will develop your projects! — Open Source Day https://www.youtube.com/watch?v=lga9qz6_VUI I will spend an hour solving bugs / adding features in your projects.\nIf you want to suggest what project I should work on, text me on Instagram.\n\n❖ StreamYard: https://streamyard.com?fpr=piecioshka\n(Best app for creating live streamings)\n\n---\n\n◼︎ Blog: https://piecioshka.pl/blog/\n◼︎ GitHub: https://github.com/piecioshka\n◼︎ Twitter: https://twitter.com/piecioshka\n◼︎ Facebook: https://facebook.com/piecioshka.trener\n◼︎ Instagram: https://instagram.com/piecioshka 2020-05-13 07:52:29 i-will-develop-your-projects-open-source-day ckir8ypi0000ki3um2pa1fvzp 2020-05-13 07:52:29 2020-05-13 07:52:29 @@ -2859,6 +2888,7 @@ cj085bwrs008xi3umalivfl4h HTML w praktyce #6 - znacznik nav https://www.youtube. cj0ba369c009ci3umceu44j9e Kody statusu HTTP https://www.youtube.com/watch?v=HAjbDQmvSUw 404, 503 te numery pojawiają się często kiedy wchodzimy na strony internetowe.\n\nCo on oznaczają, dlaczego są ważne z punktu widzenia front-end developera. 2017-03-15 18:06:30 kody-statusu-http cj657y0ig000ji3umhjzvf50i 2017-03-15 18:06:30 2017-03-15 18:06:30 cj0dontc0009ji3umh8grebcz Flipcards - dwustronny animowany div https://www.youtube.com/watch?v=UGDpApjsjjI Cześć! Chcieliście kiedykolwiek stworzyć obracającego się, dwustronnego diva? Obejrzyjcie nasz materiał właśnie z tego zagadnienia!\n\nStworzymy wspólnie animowaną kartę, w której pseudoelementy będą poszczególnymi stronami elementu. Oczywiście możecie zamienić je na faktyczne znaczniki HTML i umieścić w nich własną treść! \n\nZapraszamy gorąco! \n\nKod omawiany w przykładzie: http://jsbin.com/miyiripege/1/edit?html,css,output\n\nPodczas tworzenia tego przykładu korzystaliśmy z przeglądarki Google Chrome w wersji 55.0.2883.95 (64-bit)\n\nhttp://www.kodu.je/\n\nNasz profil na Facebooku: https://www.facebook.com/kodujemy/\nNasze repozytorium na Githubie: https://github.com/koduje 2017-03-17 10:30:00 flipcards-dwustronny-animowany-div cj657y0ig000ji3umhjzvf50i 2017-03-17 10:30:00 2017-03-17 10:30:00 cj0kwf1mg00afi3umgjbyh7fz Stylowanie map Google https://www.youtube.com/watch?v=yTnmWXgcFi8 Cześć! W dzisiejszym materiale pokażemy jak dodać własne style CSS do map Google, tak aby pasowały do wyglądu Waszej strony.\n\nLink do edytora map: https://mapstyle.withgoogle.com/\n\nZapraszamy gorąco! \n\nPodczas tworzenia tego przykładu korzystaliśmy z przeglądarki Google Chrome w wersji 55.0.2883.95 (64-bit)\n\nhttp://www.kodu.je/\n\nNasz profil na Facebooku: https://www.facebook.com/kodujemy/\nNasze repozytorium na Githubie: https://github.com/koduje 2017-03-22 11:41:31 stylowanie-map-google cj657y0ig000ji3umhjzvf50i 2017-03-22 11:41:31 2017-03-22 11:41:31 +ckrw5jne900020wmtpjg6c41s Wartości w Scrumie https://www.oskarkowalow.pl/blog/wartosci-w-scrumie Krwią scruma są wartości, o których już coraz rzadziej się rozmawia, bo częściej tymi wartościami się żyje.\nProblem jest wtedy, gdy nie żyje… 2021-08-03 00:00:00 wartosci-w-scrumie ckocpwuso0019afl7he6igw3f 2021-08-03 14:23:57.489 2021-08-03 14:23:57.489 cj0nno9fc00aqi3umb2zi81hm Miernik siły hasła w JavaScript https://www.youtube.com/watch?v=fl9x1cq5tTM Bardzo wiele użytkowników internetu używa prostych do złamania haseł przy logowaniu do swoich kont na różnych serwisach www.\n\nCo zatem zrobić, aby poinformować użytkowników Twojej strony, czy ich hasło jest wystarczająco bezpieczne? Jak zmierzyć siłę danego hasła?\n\nTego dowiecie się w dzisiejszym odcinku! :) \n\nKod źródłowy: http://jsbin.com/hobuwemamo/edit?html,css,js,output\n\nPodczas tworzenia tego przykładu korzystaliśmy z przeglądarki Google Chrome w wersji 57.0.2987.110 (64-bit)\n\nhttp://www.kodu.je/\n\nNasz profil na Facebooku: https://www.facebook.com/kodujemy/\nNasze repozytorium na Githubie: https://github.com/koduje 2017-03-24 10:00:03 miernik-sily-hasla-w-javascript cj657y0ig000ji3umhjzvf50i 2017-03-24 10:00:03 2017-03-24 10:00:03 cj0wftdc000bpi3umhhwq4nkc Czym są Breadcrumbsy? https://www.youtube.com/watch?v=Z7KLopsht88 Nawigacja na stronie to jeden z najważniejszych elementów decydujący o użyteczności strony. Budując duży serwis internetowy często dochodzimy do takiej złożoności, kiedy każdy dział na stronie posiada osobne poddziały.\n\nJak zatem w przejrzysty sposób pokazać użytkownikowi na jakiej podstronie się znajduje?\n\nMożemy wykorzystać do tego tzw. "breadcrumbs". W tym krótkim materiale poznacie przeznaczenie tego elementu na stronach WWW oraz przykładową implementację.\n\nPS: W tym materiale testujemy nowy format, koniecznie obejrzycie to wideo do końca i dajcie nam znać w komentarzu, co o tym sądzicie, a jeśli podobało wam się to wideo, koniecznie podzielcie się nim ze swoimi znajomymi którzy również interesują się web-developmentem.\n\nZapraszamy serdecznie! \n\nhttp://www.kodu.je/\n\nNasz profil na Facebooku: https://www.facebook.com/kodujemy/\nNasze repozytorium na Githubie: https://github.com/koduje 2017-03-30 13:30:00 czym-sa-breadcrumbsy cj657y0ig000ji3umhjzvf50i 2017-03-30 13:30:00 2017-03-30 13:30:00 cj124kqxk00cgi3umbeb7ea5b Typeahead - co można wpisać w pole tekstowe? https://www.youtube.com/watch?v=9RfbZB9UVpM Na naszych aplikacjach internetowych często umieszczamy pola tekstowe służące jako wyszukiwarki treści. \n\nW takich przypadkach warto podpowiadać użytkownikom, co mogą wpisać w dane pole. Tym właśnie zagadnieniem zajmiemy się w tym materiale wideo. \n\nKoniecznie dajcie nam znać w komentarzu co sądzicie o tym przykładzie, a łapki w górę pod naszymi materiałami to najlepszy motywator by tworzyć jeszcze więcej ciekawych przykładów.\n\nMiłego oglądania! \n\nOmawiany kod źródłowy: http://jsbin.com/qowarutiwo/edit?html,css,js,output\n\nhttp://www.kodu.je/\n\nNasz profil na Facebooku: https://www.facebook.com/kodujemy/\nNasze repozytorium na Githubie: https://github.com/koduje 2017-04-03 13:01:59 typeahead-co-mozna-wpisac-w-pole-tekstowe cj657y0ig000ji3umhjzvf50i 2017-04-03 13:01:59 2017-04-03 13:01:59 @@ -2866,6 +2896,7 @@ cj17wevew00d3i3umhr823y63 Zapisywanie notatek do localStorage! https://www.youtu cj1dadsg000dti3um9b89cdt4 Witajcie na kodu.je! https://www.youtube.com/watch?v=VH36OC2lC4g Od startu kodu.je minęło już trochę czasu. Wszyscy znacie już Wojciecha Połowniaka, Damiana Wielgosika czy Andrzeja Fricze. Dzisiaj przybliżymy Wam trochę jak do tego wszystkiego doszło, zapraszamy! 2017-04-11 08:30:00 witajcie-na-koduje cj657y0ig000ji3umhjzvf50i 2017-04-11 08:30:00 2017-04-11 08:30:00 cj1f0jgrs00e2i3um9dva1j0d Lupa do zdjęć produktów w sklepie https://www.youtube.com/watch?v=xt5JcgTce5A Dziś temat sklepowy, bo własnie uruchomiliśmy własny sklep z naszymi materiałami premium - https://sklep.kodu.je. \n\nW wielu sklepach internetowych możecie spotkać się ze zdjęciami produktów - często, gdy najedziemy na nie myszką, otwiera nam się podgląd przybliżenia fragmentu zdjęcia, który wskazujemy.\n\nW tym materiale powiem wam jak w prosty sposób można zaimplementować taką funkcjonalność, która po odpowiednim rozwinięciu może zagościć na waszych stronach WWW.\n\nMiłego oglądania! :) \n\n\nOmawiany kod źródłowy: http://jsbin.com/bafuwonuli/1/edit?js,output\n\nhttp://www.kodu.je/\n\nNasz profil na Facebooku: https://www.facebook.com/kodujemy/\nNasze repozytorium na Githubie: https://github.com/koduje 2017-04-12 13:30:01 lupa-do-zdjec-produktow-w-sklepie cj657y0ig000ji3umhjzvf50i 2017-04-12 13:30:01 2017-04-12 13:30:01 cj02o6360008ji3um813ncb0y WordPress Custom Post Types – czyli jak stworzyć Portfolio http://sarvendev.com/2017/03/wordpress-custom-post-types-czyli-stworzyc-portfolio/

To jest kolejny wpis o popularnym systemie WordPress. Tym razem zaprezentuję na przykładzie tej strony jak w prosty sposób zmodyfikować szablon, tak aby była możliwość ustawienia Portfolio, czyli w tym wypadku podstrony z projektami. Post Types W WordPressie domyślnie występującymi typami postów są przykładowo: page post Typy te posiadają własne sekcje w panelu administatora oraz […]

\n

The post WordPress Custom Post Types – czyli jak stworzyć Portfolio appeared first on SarvenDev.

2017-03-09 17:30:45 wordpress-custom-post-types-czyli-jak-stworzyc-portfolio ck2uky50o000gi3um2qmhblbo 2017-03-09 17:30:45 2017-03-09 17:30:45 +cj03ukh0g008oi3umdej7c6az 5 powodów, dla których programuję (a przecież jestem humanistką) http://www.wakeupandcode.pl/5-powodow-dla-ktorych-programuje-a-przeciez-jestem-humanistka/

Jestem humanistką i programuję. Dlaczego? Dzisiaj postaram się o tym opowiedzieć. Gdyby ktoś parę lat temu powiedział mi, że będę zajmować się zawodowo tworzeniem stron internetowych, pewnie bym go wyśmiała. Miałam przecież być tłumaczem, zgłębiać tajemnice indyjskiej literarury, prowadzić lekcje. Okazało się z czasem, że po pierwsze, nie jest to do końca moja bajka, a po […]

\n

Artykuł 5 powodów, dla których programuję (a przecież jestem humanistką) pochodzi z serwisu Wake up and Code.

2017-03-10 13:17:40 5-powodow-dla-ktorych-programuje-a-przeciez-jestem-humanistka ckhgqbfog000ii3um332tat33 2017-03-10 13:17:40 2017-03-10 13:17:40 cj0a0ka9c0093i3um3yi166pu DiscoverPlaces Raport #1 – docker + symfony http://sarvendev.com/2017/03/discoverplaces-raport-1-docker-symfony/

Poszły pierwsze commity, więc czas na pierwszy raport na temat projektu, który realizuję w ramach konkursu Daj się Poznać.  Na czym on polega opisane zostało w tym wpisie . Wstęp Pierwszą rzeczą od której zaczynam jest przygotowanie API. Będzie ono stosunkowo proste, więc jest to łatwiejsza część. Po zamknięciu prac nad API przejdę do tworzenia aplikacji, co […]

\n

The post DiscoverPlaces Raport #1 – docker + symfony appeared first on SarvenDev.

2017-03-14 20:52:06 discoverplaces-raport-1-docker-symfony ck2uky50o000gi3um2qmhblbo 2017-03-14 20:52:06 2017-03-14 20:52:06 cj0ecpaqo009pi3umcdbs6z5q Tworzenie tła z poruszającymi się cząsteczkami http://sarvendev.com/2017/03/tworzenie-tla-z-poruszajacymi-sie-czasteczkami/

W tym wpisie przedstawię w jaki sposób stworzyć tło z poruszającymi się cząsteczkami. Całość oparta będzie o element <canvas> oraz ES6. Wykorzystam tutaj kod, który już kiedyś stworzyłem jako część gry Paper Soccer. Cel Celem jest stworzenie tła wykorzystanego tutaj Paper Soccer. Oczywiście mam już ten kod gotowy, jednak chciałbym stworzyć coś na kształt biblioteki, która […]

\n

The post Tworzenie tła z poruszającymi się cząsteczkami appeared first on SarvenDev.

2017-03-17 21:43:00 tworzenie-tla-z-poruszajacymi-sie-czasteczkami ck2uky50o000gi3um2qmhblbo 2017-03-17 21:43:00 2017-03-17 21:43:00 cj0jp0pso00aai3umcm03ashu DiscoverPlaces Raport #2 http://sarvendev.com/2017/03/discoverplaces-raport-2/

Ten wpis to krótki raport na temat tego co zostało zrobione w ostatnim tygodniu w ramach projektu DiscoverPlaces. Niestety w ostatnim tygodniu udało się zrobić naprawdę niewiele, a to dlatego, że dużo czasu zajęły mi inne rzeczy np. dosyć obszerny post na temat tworzenia tła przy użyciu <canvas>. Poniżej główna część kodu ostatnio napisanego. Są to dwa […]

\n

The post DiscoverPlaces Raport #2 appeared first on SarvenDev.

2017-03-21 15:26:39 discoverplaces-raport-2 ck2uky50o000gi3um2qmhblbo 2017-03-21 15:26:39 2017-03-21 15:26:39 @@ -2879,6 +2910,7 @@ cj1jccciw00eoi3umfsq08yrm CodinGame – czyli rywalizuj z innymi programując ht cj1rzk2mo00fji3um6j2caekd DiscoverPlaces Raport #7 – React Native Elements http://sarvendev.com/2017/04/discoverplaces-raport-7-react-native-elements/

Czas na kolejny krótki raport na temat tworzenia projektu DiscoverPlaces. Postanowiłem nie tworzyć obecnie aplikacji dla systemu iOS, a skupić się jedynie na Androidzie. React Native co prawda pozwala wykorzystać większość kodu dla obu systemów, ale z racji, że obecnie nie ma możliwość odpalenia aplikacji na iOS pod linuksem (React Native – Getting Started) stwierdziłem, że […]

\n

The post DiscoverPlaces Raport #7 – React Native Elements appeared first on SarvenDev.

2017-04-21 15:23:30 discoverplaces-raport-7-react-native-elements ck2uky50o000gi3um2qmhblbo 2017-04-21 15:23:30 2017-04-21 15:23:30 cj2qjc11k00j1i3umadg5cec4 Mój projekt – Podsumowanie – Raport X http://www.wakeupandcode.pl/moj-projekt-raport-x/

Daj Się Poznać 2017 Dziesięć tygodni minęło w mgnieniu oka. I dzisiaj zapraszam na ostatni już raport z prac nad projektem w ramach Daj Się Poznać. Co mi się udało? Nad czym będę pracować? I czy porzucam projekt? O tym wszystkim w dzisiejszym wpisie. Na samym początku chciałam zaznaczyć, że dzisiejszy post to podsumowanie tylko […]

\n

Artykuł Mój projekt – Podsumowanie – Raport X pochodzi z serwisu Wake up and Code.

2017-05-15 19:41:17 moj-projekt-podsumowanie-raport-x ckhgqbfog000ii3um332tat33 2017-05-15 19:41:17 2017-05-15 19:41:17 cj1hr4ujs00eei3um3q2l6ohc Preloader - podgląd ładowanych treści https://www.youtube.com/watch?v=uHpl4SVmukE W nowoczesnych aplikacjach internetowych treść często doładowywana jest dynamicznie. W takich przypadkach wiele firm takich jak Facebook czy Slack wykorzystuje pewnego rodzaju preloadery - tworzą reprezentację wizualną treści w miejscu, w którym docelowo ma się ona pojawić. \n\nW tym wideo dowiecie się jak można zrobić taki preloader oraz jak zasymulować pobieranie danych z serwera tak, byście mogli zobaczyć faktyczny efekt.\n\nOmawiany kod źródłowy: http://jsbin.com/bolamuwiya/1/edit?css,js,output\n\nhttp://www.kodu.je/\n\nNasz sklep internetowy z materiałami premium: https://sklep.kodu.je\n\nNasz profil na Facebooku: https://www.facebook.com/kodujemy/\nNasze repozytorium na Githubie: https://github.com/koduje 2017-04-14 11:30:01 preloader-podglad-ladowanych-tresci cj657y0ig000ji3umhjzvf50i 2017-04-14 11:30:01 2017-04-14 11:30:01 +cksleo28h00020wlh8xhfr519 Software Craftsmanship Saturday vol. 51 - Codex API, NeuralHash, Dojo & D1 https://blog.vived.io/software-craftsmanship-saturday-vol-51/ Tym razem jest dość spójnie - każdy z poruszonych tematów zahacza o temat AI, każdy robi to jednak z trochę innej strony. Dowiecie się więc więcej o ograniczeniach modelu Codex od Copilota, przeczytacie o burzy związanej z NeuralHashem od Apple, a także dowiecie się, czym jest Dojo od Tesli. 2021-08-21 06:13:28 software-craftsmanship-saturday-vol.-51-codex-api-neuralhash-dojo-and-d1 ckmor5k8y000044moj65m13y0 2021-08-21 06:33:34.289 2021-08-21 06:33:34.289 cj1qdx4bs00fdi3um5gdw0972 Pasek postępu dla czytanego artykułu https://www.youtube.com/watch?v=18VhTr4dK_E Na wielu serwisach informacyjnych możecie spotkać się z sytuacją, gdzie poszczególne artykuły posiadają swój własny pasek postępu - który wskazuje ile pozostało do końca wpisu.\n\nW tym wideo dowiecie się jak można zrobić taki pasek postępu oraz jak ograniczać wywoływanie się naszych funkcji na zdarzenie scroll - jeśli nie wiesz, czym są throttle bądź debounce - koniecznie obejrzyj ten materiał aby dowiedzieć się dlaczego ich potrzebujemy i jak zaimplementować je w czystym JavaScriptcie, bez zewnętrznych bibliotek.\n\nMiłego oglądania!\n\nOmawiany kod źródłowy: http://jsbin.com/jeloxuqube/edit?html,css,js,output\n\nPodczas tworzenia tego przykładu korzystaliśmy z przeglądarki Google Chrome w wersji 57.0.2987.110 (64-bit)\n\nPamiętajcie, że przykłady widoczne w naszych nagraniach mają charakter demonstracyjny, pokazowy i nie powinniście używać ich w dokładnie tej samej formie na produkcji.\n\nPrzydatny artykuł z CSS tricks: https://css-tricks.com/reading-position-indicator/\n\nhttp://www.kodu.je/\n\nNasz sklep internetowy z materiałami premium: https://sklep.kodu.je\n\nNasz profil na Facebooku: https://www.facebook.com/kodujemy/\nNasze repozytorium na Githubie: https://github.com/koduje 2017-04-20 12:30:01 pasek-postepu-dla-czytanego-artykulu cj657y0ig000ji3umhjzvf50i 2017-04-20 12:30:01 2017-04-20 12:30:01 cj1ywf1s000gbi3umel15f4zg Wybór podpowiedzi z listy - Typeahead #2 https://www.youtube.com/watch?v=9RiYrsUOnIo Cześć! Pamiętacie nasz materiał typeahead? (https://www.youtube.com/watch?v=9RfbZB9UVpM) W tym odcinku rozszerzymy program napisany w tamtym wideo o wybieranie elementów z listy :) \n\nKoniecznie zostawcie komentarze dotyczące tego, co chcielibyście zobaczyć w naszych przyszłych nagraniach. Jesteśmy tu dla was!\n\nPamiętajcie, aby zasubskrybować nasz kanał jeśli chcecie zobaczyć więcej treści tego typu: https://www.youtube.com/Koduje?sub_confirmation=1\n\nMiłego oglądania! :) \n\nOmawiany kod źródłowy: http://jsbin.com/getikanopa/edit?js,output\n\nPodczas tworzenia tego przykładu korzystaliśmy z przeglądarki Google Chrome w wersji 57.0.2987.110 (64-bit)\n\nPamiętajcie, że przykłady widoczne w naszych nagraniach mają charakter demonstracyjny, pokazowy i nie powinniście używać ich w dokładnie tej samej formie na produkcji.\n\nhttp://www.kodu.je/\n\nNasz sklep internetowy z materiałami premium: https://sklep.kodu.je\n\nNasz profil na Facebooku: https://www.facebook.com/kodujemy/ 2017-04-26 11:30:00 wybor-podpowiedzi-z-listy-typeahead-2 cj657y0ig000ji3umhjzvf50i 2017-04-26 11:30:00 2017-04-26 11:30:00 cj21o32rc00gli3ume577dnom HTML w praktyce #7 - znacznik aside https://www.youtube.com/watch?v=VZY6TSHb2pc Kolejny odcinek HTML w praktyce! Tym razem opowiem o znaczniku aside - dowiecie się które elementy waszych stron powinny być zamknięte w tym znaczniku, a które niekoniecznie :) Poznacie też najczęściej popełniane błędy związane z jego użyciem. To wszystko w mniej niż dwie minuty!\n\nKoniecznie dajcie znać w komentarzu co sądzicie o tym wideo - możecie też zaproponować nam tematy które chcielibyście, aby zostały przez nas omówione :) \n\nMiłego oglądania! \n\nhttp://www.kodu.je/\n\nOmawiany kod źródłowy: https://github.com/koduje/html-w-praktyce\n\nProfil na facebooku: https://www.facebook.com/kodujemy/\nGithub: https://github.com/koduje 2017-04-28 10:00:03 html-w-praktyce-7-znacznik-aside cj657y0ig000ji3umhjzvf50i 2017-04-28 10:00:03 2017-04-28 10:00:03 @@ -2887,6 +2919,7 @@ cj2hi7sf400iai3um2xn1bnf9 Animowanie grafik w SVG przy pomocy CSSa - kompletny t cj2iv08o800iii3um483ggx9y Pytania i odpowiedzi https://www.youtube.com/watch?v=VZXYQN8UQps Opowiemy co nieco o koduje, a takze odpowiemy na Wasze pytania 2017-05-10 10:45:53 pytania-i-odpowiedzi cj657y0ig000ji3umhjzvf50i 2017-05-10 10:45:53 2017-05-10 10:45:53 cjr6na4vk01e5i3umdc9dfnxg Strict types w php https://sarvendev.com/2019/01/strict-types-w-php/

Od wersji php 7.0 mamy możliwość używania deklaracji typów w parametrach funkcji, metod, a od 7.1 również możemy określić typ wartości zwracanej. Jednak okazuje się, że nie do końca działa to w sposób jaki moglibyśmy oczekiwać, a często wartości są po prostu w miarę możliwości konwertowane do pożądanego typu. Natomiast konwersja często może być efektem […]

\n

Artykuł Strict types w php pochodzi z serwisu SarvenDev.

2019-01-21 18:09:02 strict-types-w-php ck2uky50o000gi3um2qmhblbo 2019-01-21 18:09:02 2019-01-21 18:09:02 cj4l2c34000nli3um3wq844ui Podstawy Programowania Funkcyjnego #4 reduce https://www.idaszak.com/article/2017/07/01/podstawy-programowania-funkcyjnego-4-reduce \r\n\r\n
\r\n\r\n\r\n
\r\n

W tej serii uczymy się Podstaw Programowania Funkcyjnego. Wykorzystamy przy okazji wiedzę zdobytą w serii dotyczącej ES6. Poznaliśmy już funkcje filter i map, tym razem zajmiemy się tworzeniem jednej wartości z całej tablicy. Zaczynajmy!

\r\n\r\n\r\n

# Czym jest Reduce?

\r\n

W poprzednich postach poznaliśmy map i filter, czyli sposoby na przeszukiwanie i transformowanie tablic, tym razem jednak skorzystamy z bardziej rozbudowanego narzędzia, jakim jest reduce. Zwrócimy dzięki tej funkcji pojedynczą wartość na podstawie elementów tablicy. W prosty sposób będziemy mogli dodać wszystkie elementy tablicy, albo połączyć w string.

\r\n\r\n

Reduce powinno przyjmować trzy argumenty: funkcję do wykonania na każdym elemencie, wartość początkową i tablicę na której będziemy pracować. Na początek zaimplementujemy sobie taką funkcję, gdzie callback to funkcja, start - wartość początkowa, a array to nasza tablica:

\r\n\r\n
 \r\nvar reduce = function(callback, start, array) {\r\n    var value = start;\r\n    for (var i = 0; i < array.length; i = i + 1) {\r\n        value = callback(value, array[i]);\r\n    }\r\n    return value;\r\n};
\r\n\r\n

Nasza funkcja przypisuje wartość początkową do zmiennej value, a następnie iteruje po kolejnych elementach tablicy wykonując dla każdego z nich podaną funkcję. Na końcu jako wynik zostaje zwrócona wartość value.

\r\n\r\n
 \r\nconst add = (value, element) => value+element;\r\n\r\nconst concat = (value, element) => `${value} ${element}`;
\r\n\r\n

Stworzyliśmy sobie dwie funkcje, z czego pierwsza z nich - add służy do dodawania dwóch elementów, a druga - concat słuzy do konkatenacji, czyli połączenia dwóch stringów w jeden. zapis w ES6 `${value} ${element}` jest równoważny value+' '+element.

\r\n

Możemy teraz skorzystać z naszych funkcji, połączyć je i wykonać na tablicach:

\r\n\r\n
const num = [1, 2, 3, 4, 5];\r\nconst WhoAmI = ["I", "am", "the", "one", "who", "knocks"]; \r\n\r\nreduce(add, 0, num); //15\r\nreduce(concat,"",WhoAmI); //"I am the one who knocks"
\r\n\r\n

Jednak w rzeczywistości nie musimy implementować funkcji reduce, ponieważ w JavaScript jest z nami już od ES5:

\r\n\r\n
num.reduce(add); //15\r\nWhoAmI.reduce(concat); //"I am the one who knocks"
\r\n\r\n

# Wartość początkowa i inne argumenty

\r\n

callback w Reduce może przyjmować cztery argumenty:

\r\n
    \r\n\t
  • previousValue, czyli wartość zwróconą w ostatnim wywołaniu funkcji callback, lub wartość początkową jeśli taka została podana,
    • \r\n\t
  • currentValue, czyli obecnie przetwarzany element tablicy,
    • \r\n\t
  • index, index przetwarzanego elementu,
    • \r\n\t
  • array, tablicę na której wykonujemy reduce.
    • \r\n
\r\n

Użyjmy poprzedniego przykładu z dodawaniem, jednak ustawmy wartość początkową na 100:

\r\n\r\n
 \r\nnum.reduce((value, element) => value+element, 100); //115
\r\n\r\n

# Tablica jako wartość zwracana

\r\n

Poza stringiem czy liczbą, możemy zwrócić także tablice, wystarczy jako wartość początkową podać pustą tablicę, a następnie dodawać kolejne elementy funkcją push.

\r\n\r\n
 \r\nnum.reduce((value, element) => {\r\n  value.push(element*2);\r\n  return value;\r\n}, []); //[ 2, 4, 6, 8, 10 ]
\r\n\r\n

Musimy pamiętać, że nasza funkcja wewnętrzna musi zwracać wartość, inaczej funkcja się nie wykona. W powyższym przykładzie korzystamy z tablicy liczb num, do pustej tablicy dodajemy kolejne elementy pomnożone przez 2. Na końcu otrzymujemy gotową tablicę. Oczywiście moglibyśmy wykonać to również funkcją map.

\r\n

# Obiekt jako wartość zwracana

\r\n

Poza pojedynczymi wartościami i tablicami, możemy także zbudować obiekt za pomocą reduce. W przykładzie pokaże wam, jak policzyć ilość wystąpień elementów w tablicy.

\r\n

Tablica która znajduje się poniżej, to wystąpienia słów kluczowych w tekście opisującym fabułę serialu. Znajdziemy teraz najczęściej występujące słowa:

\r\n\r\n
 \r\nBreakingBad = ["chemistry", "crime", "teacher", "cancer", "student", "cancer", "DEA", "wife", "crystal", "wife", "crime"];\r\nBreakingBad.reduce((obj, tag) => {\r\n\tobj[tag] = (obj[tag] || 0) + 1;\r\n\treturn obj;\r\n}, {}); /* { chemistry: 1,\r\n  crime: 2,\r\n  teacher: 1,\r\n  cancer: 2,\r\n  student: 1,\r\n  DEA: 1,\r\n  wife: 2,\r\n  crystal: 1 } */
\r\n\r\n

Callback powyższego kodu przyjmuje dwa argumenty - zmienną obj, której wartością początkową jest pusty obiekt, oraz aktualny element tablicy tag. Element, który aktualnie przetwarzamy staje się kluczem w tablicy i jeśli już taki istnieje to przypisana mu zostaje jego wartość powiększona o jeden. W przypadku jeśli dla danego elementu nie ma jeszcze miejsca w tablicy to zostaje stworzony z ustawioną wartością 0, powiększoną o jeden. Na końcu jak zwykle musimy pamiętać o zwróceniu zmiennej obj.

\r\n

Jeśli nadal masz problem ze zrozumieniem kodu, spójrz na poniższą, bardziej rozpisaną wersję:

\r\n\r\n
 \r\nBreakingBad.reduce((obj, tag) => {\r\n\tif (!obj[tag]) {\r\n\t\tobj[tag] = 1;\r\n\t} else {\r\n\t\tobj[tag] = obj[tag] + 1;\r\n\t}\r\n\treturn obj;\r\n}, {});
2017-07-01 09:06:00 podstawy-programowania-funkcyjnego-4-reduce cjfsgdao0000fi3um8hz4dspc 2017-07-01 09:06:00 2017-07-01 09:06:00 +cj080t1cg008wi3um4nvdgoei Mity o branży IT, w które wierzyłam http://www.wakeupandcode.pl/mity-o-branzy-it-w-ktore-wierzylam/

Branża IT od zawsze była dla mnie tajemnicą. Wydawało mi się, że dostęp mają do niej tylko osoby, które ukończyły informatykę albo jakieś pokrewne studia. Osoby, które od dziecka pisały programy, tworzyły strony internetowe, składały samodzielnie komputery, a wolny czas spędzały nad matematyką i fizyką. Wiem, to dość stereotypowy obraz. Jednak zupełnie nie zdawałam sobie […]

\n

Artykuł Mity o branży IT, w które wierzyłam pochodzi z serwisu Wake up and Code.

2017-03-13 11:23:22 mity-o-branzy-it-w-ktore-wierzylam ckhgqbfog000ii3um332tat33 2017-03-13 11:23:22 2017-03-13 11:23:22 ckb1vqyrk022xi3umboqrgy50 Array API, Vim, Security (tabnabbing) 🔴 Webowe Pogawędki #8 https://www.youtube.com/watch?v=joffn9W8GW0 Newsy i dyskusje o webie LIVE! 🔥\n\nGospodarze programu Artur "Fullstak" Chmaro oraz Piotr "piecioshka" Kowalski\nprowadzą dyskusję z widzami, na temat otaczającej ich rzeczywistości.\n\nLive streaming jest realizowany z użyciem StreamYard: https://streamyard.com?fpr=piecioshka\n\nKanał Artura: https://www.youtube.com/channel/UCFmXR9JohMyuXPya2OUkcjg\nStrona domowa Artura: https://fullstak.pl\n\n---\n\nTematy poruszane na filmie:\n\nSpaceX i NASA użyli JS\n* https://space.stackexchange.com/questions/9243/what-computer-and-software-is-used-by-the-falcon-9/9446#9446\n\nProposals: Array List\n* https://github.com/tc39/proposal-array-last\n\n🛠 Edytor Audio w vanilla JS\n* https://github.com/pkalogiros/audiomass\n\n🛠 Vim Polyglot\n* https://github.com/sheerun/vim-polyglot\n\n💡 CSS Layout (from FullStak newsletter)\n* https://csslayout.io/patterns\n\n💡 Uważajcie na target="_blank"\n* https://www.manjuladube.dev/target-blank-security-vulnerability\n* https://github.com/piecioshka/warsawjs-workshop-40-security\n\nLet's talk! 🗣\n* https://twitter.com/pifafu/status/1265773172520914944\n\nMake my day 😂\n* https://twitter.com/gethackteam/status/1265916773062389760\n\n---\n\n◼︎ Blog: https://piecioshka.pl/blog/\n◼︎ GitHub: https://github.com/piecioshka\n◼︎ Twitter: https://twitter.com/piecioshka\n◼︎ Facebook: https://facebook.com/piecioshka.trener\n◼︎ Instagram: https://instagram.com/piecioshka\n\n---\n\nMuzyka z intro:\nhttps://www.youtube.com/watch?v=yibESRDRb2Y 2020-06-05 07:21:20 array-api-vim-security-tabnabbing-webowe-pogawedki-8 ckir8ypi0000ki3um2pa1fvzp 2020-06-05 07:21:20 2020-06-05 07:21:20 ckh0w8acg029di3um9s1ld1h5 Rozmowa z autorytetem — Wywiad / Gość: Jakub Neander "Zaiste" https://www.youtube.com/watch?v=QdtI4lfQdc8 Piekło zamarło! Publikuję pierwszy wywiad od momentu rozpoczęcia pandemii.\nUWAGA: wywiad nagrywany był w maju 2020. Zapraszam na rozmowę z @Zaiste Programming\n\nO moim rozmówcy\n\nJakub jest człowiekiem legendą. To na jego konferencje przyjeżdżałem,\nkiedy jeszcze nie wiedziałem dokładnie co to znaczy — https://piecioshka.pl/blog/2016/06/30/konferencja-polyconf-2016.html\n\nKuba w ramach swojego wolnego czasu dzieli się swoim doświadczeniem\nw ramach kanału na YouTube, Bloga, oraz profilu na GitHubie. Mojego gościa\nmożecie szukać w social mediach pod nickiem #Zaiste.\n\n* https://www.linkedin.com/in/zaiste\n* https://zaiste.net/\n* https://github.com/zaiste\n* https://www.youtube.com/user/ohzaiste\n\nPytania\n\n1:35 Dlaczego software? Co Cię urzekło w wytwarzaniu kodu?\n2:46 Który język programowani wybrałbyś dla osoby, która dziś chce się przebranżowić?\n6:18 Co myślisz o tym, aby zaczynać od Pythona albo Javy?\n7:40 A co powiesz o bootcampach?\n13:37 Jak rozpocząć przebranżowienie?\n16:35 Czy istnieje stały czas, aby zostać junior developerem?\n21:27 Czy stosujesz podział programistów pod kątem ich doświadczenia?\n25:43 Jaki wpływa na wytarzanie oprogramowania ma znajomość wzorców projektowych?\n31:42 Czy programiście mają za duże ego?\n35:30 Czy współpracowałeś kiedyś początkującymi programistami?\n37:04 Jakie masz doświadczenia z procesu Code Review\n39:46 Jak kroki przedsięwziąć przy wyborze technologii w nowym projekcie?\n43:20 Czy #Kretes wprowadza nowe rozwiązania w świat programowania?\n46:43 Co stoi na przeszkodzie, aby użyć Kretesa w środowisku produkcyjnym?\n51:02 Czy poza Kretesem posiadasz jeszcze inne projekty, które rozwijasz jako Open Source?\n53:20 GitHub Sponsors\n57:15 Czy firmy wspierają Open Source?\n1:00:20 Jak będzie wyglądało programowanie za kilkanaście lat?\n1:02:14 Czy dalej będziemy popełniali literówki?\n1:03:05 Co będziesz robił kiedy przestaniesz programować?\n\n---\n\n◼︎ Blog: https://piecioshka.pl/blog/\n◼︎ GitHub: https://github.com/piecioshka\n◼︎ Twitter: https://twitter.com/piecioshka\n◼︎ Facebook: https://facebook.com/piecioshka\n◼︎ Instagram: https://instagram.com/piecioshka 2020-11-02 18:45:16 rozmowa-z-autorytetem-wywiad-gosc-jakub-neander-zaiste ckir8ypi0000ki3um2pa1fvzp 2020-11-02 18:45:16 2020-11-02 18:45:16 ckhkr0hww02a5i3um5atu7zu3 Co zrobić, aby pracować w Polsce? — Wywiad / Gość: Tati Platonova https://www.youtube.com/watch?v=5j59oYbatDc Dzisiejszy wywiad przeprowadziłem z Tati na temat jak to jest pracować za granicą\nkraju z którego się pochodzi. Podczas wywiadu dowiecie się jak długo działa Karta Stałego Pobytu.\nUWAGA: wywiad nagrywany był w czerwcu 2019.\n\nO moim rozmówcy\n\nTati pracuje obecnie jako developer w firmie Ethworks\nWięcej informacji o Tati możecie znaleźć na LinkedIn: https://www.linkedin.com/in/tetianaplatonova/\n\n---\n\n◼︎ Blog: https://piecioshka.pl/blog/\n◼︎ GitHub: https://github.com/piecioshka\n◼︎ Twitter: https://twitter.com/piecioshka\n◼︎ Facebook: https://facebook.com/piecioshka\n◼︎ Instagram: https://instagram.com/piecioshka 2020-11-16 16:14:38 co-zrobic-aby-pracowac-w-polsce-wywiad-gosc-tati-platonova ckir8ypi0000ki3um2pa1fvzp 2020-11-16 16:14:38 2020-11-16 16:14:38 @@ -2930,8 +2963,7 @@ cj657y0ig00q0i3um09hi2guo Specificity - Specyficzność selektorów CSS https:// cj31z2uyg00k3i3um1otq907d Daj Się Poznać 2017 – Moje podsumowanie http://www.wakeupandcode.pl/daj-sie-poznac-2017/

W końcu nadszedł czas na podsumowanie mojego udziału w konkursie Daj Się Poznać. Spełniłam wymagania konkursowe (a przynajmniej tak mi się wydaje), więc mam chwilę, żeby podsumować pracę wykonaną podczas ostatnich 10 tygodni. Dzisiaj chciałam skupić się na wrażeniach związanych z konkursem w ogóle, bo o samym projekcie pisałam już tutaj. Co mi dał konkurs? […]

\n

Artykuł Daj Się Poznać 2017 – Moje podsumowanie pochodzi z serwisu Wake up and Code.

2017-05-23 19:47:31 daj-sie-poznac-2017-moje-podsumowanie ckhgqbfog000ii3um332tat33 2017-05-23 19:47:31 2017-05-23 19:47:31 cj3ep1ulc00lki3um1rvl08xu Jak się motywować do nauki programowania http://www.wakeupandcode.pl/jak-sie-motywowac-do-nauki-programowania/

Kiedyś ludzie zdobywali jeden zawód i wykonywali go przez całe życie. Dzisiaj już tak nie jest. A podobno w niedalekiej przyszłości człowiek będzie wykonywał około pięciu różnych zawodów w ciągu swojego życia i to do tego pewnie takich, które dziś jeszcze nie istnieją. Co to ma wspólnego z kodowaniem? Ideę ciągłej nauki. Jednak nie zawsze […]

\n

Artykuł Jak się motywować do nauki programowania pochodzi z serwisu Wake up and Code.

2017-06-01 17:27:48 jak-sie-motywowac-do-nauki-programowania ckhgqbfog000ii3um332tat33 2017-06-01 17:27:48 2017-06-01 17:27:48 cj3hdhg7s00loi3umcnd2a3xb Kim są dziewczyny w IT? http://www.wakeupandcode.pl/kim-sa-dziewczyny-w-it/

Wyzwanie Programuj, dziewczyno! trwa. W grupie na Facebooku jest już ponad 1500 dziewczyn, które chcą się uczyć (i uczą się!) kodowania. Dzisiaj, w ramach motywacji do stawiania pierwszych kroków w świecie IT, chcę przedstawić trzy dziewczyny, które w IT pracują. Przeczytajcie, kim są, na jakich stanowiskach pracują i jak trafiły do IT. Od razu uprzedzam, […]

\n

Artykuł Kim są dziewczyny w IT? pochodzi z serwisu Wake up and Code.

2017-06-03 14:27:19 kim-sa-dziewczyny-w-it ckhgqbfog000ii3um332tat33 2017-06-03 14:27:19 2017-06-03 14:27:19 -cj03ukh0g008oi3umdej7c6az 5 powodów, dla których programuję (a przecież jestem humanistką) http://www.wakeupandcode.pl/5-powodow-dla-ktorych-programuje-a-przeciez-jestem-humanistka/

Jestem humanistką i programuję. Dlaczego? Dzisiaj postaram się o tym opowiedzieć. Gdyby ktoś parę lat temu powiedział mi, że będę zajmować się zawodowo tworzeniem stron internetowych, pewnie bym go wyśmiała. Miałam przecież być tłumaczem, zgłębiać tajemnice indyjskiej literarury, prowadzić lekcje. Okazało się z czasem, że po pierwsze, nie jest to do końca moja bajka, a po […]

\n

Artykuł 5 powodów, dla których programuję (a przecież jestem humanistką) pochodzi z serwisu Wake up and Code.

2017-03-10 13:17:40 5-powodow-dla-ktorych-programuje-a-przeciez-jestem-humanistka ckhgqbfog000ii3um332tat33 2017-03-10 13:17:40 2017-03-10 13:17:40 -cj080t1cg008wi3um4nvdgoei Mity o branży IT, w które wierzyłam http://www.wakeupandcode.pl/mity-o-branzy-it-w-ktore-wierzylam/

Branża IT od zawsze była dla mnie tajemnicą. Wydawało mi się, że dostęp mają do niej tylko osoby, które ukończyły informatykę albo jakieś pokrewne studia. Osoby, które od dziecka pisały programy, tworzyły strony internetowe, składały samodzielnie komputery, a wolny czas spędzały nad matematyką i fizyką. Wiem, to dość stereotypowy obraz. Jednak zupełnie nie zdawałam sobie […]

\n

Artykuł Mity o branży IT, w które wierzyłam pochodzi z serwisu Wake up and Code.

2017-03-13 11:23:22 mity-o-branzy-it-w-ktore-wierzylam ckhgqbfog000ii3um332tat33 2017-03-13 11:23:22 2017-03-13 11:23:22 +cj1h2hhc000e9i3um3ec91mle ES6#3 Destrukturyzacja czyli nowe podejscie do tablic i obiektow http://www.idaszak.com/article/2017/04/14/es6-3-destrukturyzacja-nowe-podejscie-do-tablic-i-obiektow

\r\n\r\n

W serii poświęconej standardowi ES6 języka Javascript opisałem już pojawiające się tam słowo kluczowe class, pokazałem przykłady zastosowania let oraz const. Tym razem zajmiemy się destrukturyzacją i różnicami między operatorem spread i rest. Umożliwiają one użycie nowego sposobu obsługiwania tablic oraz obiektów, który jest szybszy, łatwiejszy oraz precyzyjniejszy. Możemy dzięki nim wydobywać najróżniejsze, nawet zagnieżdżone wartości, przy użyciu skróconego zapisu. Zaczynajmy!

\r\n

\r\n\r\n

Jeśli nie czytałeś jeszcze wcześniejszych części, to rzuć okiem na http://www.idaszak.com/article/2017/04/05/es6-2-var-let-const,
ponieważ w poniższym kodzie będziemy korzystać z let oraz const. Zapraszam także do zapoznania się z klasami w ES6:
http://www.idaszak.com/article/2017/04/02/czy-javascript-jest-obiektowy

\r\n\r\n

# Destrukturyzacja tablic

\r\n

Standardowym podejsciem do obsługi tablic, jest odwoływanie się do poszczególnych jej elementów za pomocą operatora []:

\r\n\r\n
 \r\nvar array = ["raz","dwa","trzy"];\r\nvar first = array[0]; \r\nvar second = array[1]; \r\nvar third = array[2]; \r\nconsole.log(first, second, third); //"raz" "dwa" "trzy"
\r\n\r\n

Dzięki destrukturyzacji, możemy zapisać to w dużo prostszy i bardziej zwięzły sposób:

\r\n\r\n
 \r\nconst [first, second, third] = array;\r\nconsole.log(first, second, third); //"raz", "dwa", "trzy"
\r\n\r\n

Nie musimy przypisywać do zmiennej każdego z elementów, możemy je pomijać:

\r\n\r\n
 \r\nconst [x, ,z] = array;\r\nconsole.log(x, z); //"raz" "trzy"\r\nconst [,y] = array;\r\nconsole.log(y); //"dwa"
\r\n\r\n

Jak wygląda prosty przykład zastosowania destrukturyzacji tablicy? Możemy bez wykorzystywania zmiennej tymczasowej zamienić wartości dwóch zmiennych:

\r\n\r\n
 \r\nvar a = 1, b = 2;\r\n[b, a] = [a, b];\r\nconsole.log(a, b);//2 1
\r\n\r\n

Kolejną funkcjonalnością ES6 w odwoływaniu się do elementów tablicy jest operator spread ..., dzięki któremu możemy dotrzeć do pozostałych elementów, poza wybranymi:

\r\n\r\n
 \r\nconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\r\nconst [a, b, c, d, ...others] = arr;\r\nconsole.log(a); //1\r\nconsole.log(others) //[5, 6, 7, 8, 9, 10]
\r\n\r\n

Możemy wykonać także kolejną dekonstrukcję wybranego elementu:

\r\n\r\n
 \r\nconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\r\nconst [x, y, ...[z, , ...rest] = arr;\r\nconsole.log(rest); //[5, 6, 7, 8, 9, 10]\r\nconsole.log(z); //3
\r\n\r\n

Zastosowanie operatora spread? ES5 umożliwił korzystanie z funkcji .concat dla tablicy, co wygląda w taki sposób:

\r\n\r\n
 \r\nvar boys = ["Kyle", "Douglas", "Matt"];\r\nvar girls = ["Rebecca","Kate"];\r\nvar people = boys.concat(girls);\r\nconsole.log(people); //["Kyle", "Douglas", "Matt", "Rebecca", "Kate"]
\r\n\r\n

W ES6 możemy skorzystać z operatora spread, co wygląda znacznie czytelniej:

\r\n\r\n
 \r\nlet people = [...boys, ...girls];\r\nconsole.log(people); //["Kyle", "Douglas", "Matt", "Rebecca", "Kate"]
\r\n\r\n

# Destrukturyzacja obiektów

\r\n

Destrukturyzacja obiektów jest bardzo podobna do destrukturyzacji tablic, z tą różnicą, że korzystamy z nazwy kluczy obiektu:

\r\n\r\n
 \r\nconst object = {a: "1", b: "2", c: "3"};\r\nconst {a, c} = object;\r\nconsole.log(a, c);//1 3
\r\n\r\n

Możemy też stworzyć klucz, dzięki któremu dodamy kolejną wartość do tablicy:

\r\n\r\n
 \r\nconst key = "d";\r\nobject[key] = "4";\r\nconsole.log(object);// {a: "1", b: "2", c: "3", d: "4"}
\r\n\r\n

Analogicznie do destrukturyzacji tablic, w obiektach możemy odwoływać się do zagnieżdżonych wartości:

\r\n\r\n
 \r\nconst obj = {x: {y: "5", z: "6"}};\r\nconst {x: {z: value}} = obj;\r\nconsole.log(value);//6
\r\n\r\n

Możemy także korzystać z operatora spread ...:

\r\n\r\n
 \r\nconst object = {a: "1", b: "2", c: "3"};\r\nconst {a, ...others} = object;\r\nconsole.log(others); //{b: "2", c: "3"}
\r\n\r\n

# Spread a Rest?

\r\n

Poznaliśmy już operator spread, który umożliwia nam rozszerzenie zmiennej na wiele elementów, która działa zarówno na tablicach jak i funkcjach. Jednak w ES6 jest jeszcze jeden operator składający się z trzech kropek.

\r\n

rest to operator o jakby przeciwstawnym działaniu, dlatego że pozwala na zamknięcie dowolnej ilości argumentów funkcji w jedną tablicę.

\r\n

Żeby dowiedzieć się, jak działa operator rest ... i jakie ma zastosowanie, stwórzmy sobie funkcję, która pozwoli na dodanie wszystkich argumentów przez nią przekazanych.

\r\n\r\n
 \r\nfunction add() {\r\n  return arguments.reduce(function(previousValue, currentValue) {\r\n      return previousValue + currentValue;\r\n    });\r\n}\r\nadd(1, 2, 3); // TypeError: arguments.reduce is not a function
\r\n\r\n

arguments to tablica, zawierająca wszystkie przekazane argumenty. Wykonujemy na niej funkcję reduce, która skraca nam naszą tablicę zgodnie z wzorem w podanej jako argument funkcji, czyli w tym przypadku dodaje każdy kolejny element.

\r\n

Niestety, tak napisany kod nie działa, jednak można naprawić go funkcją rest ...

\r\n\r\n
 \r\nfunction add(...numbers) {\r\n  return numbers.reduce(function(previousValue, currentValue) {\r\n      return previousValue + currentValue;\r\n    });\r\n}\r\nadd(1, 2, 3); // 6
\r\n\r\n

W tym przypadku dowolna ilość argumentów przekazanych do funkcji może zostać użyta do stworzenia ich sumy.

2017-04-14 00:00:00 es63-destrukturyzacja-czyli-nowe-podejscie-do-tablic-i-obiektow cjfsgdao0000fi3um8hz4dspc 2017-04-14 00:00:00 2017-04-14 00:00:00 cj0ax3jds0097i3um7gpicujc Share Week 2017 – Inspiracje w IT http://www.wakeupandcode.pl/share-week-2017-inspiracje-w-it/

Dzisiaj wpis niezwiązany bezpośrednio z moim projektem, ale za to związany z nauką programowania. Postanowiłam wziąć udział w Share Weeku organizowanym przez Andrzeja Tucholskiego (tutaj więcej dla zainteresowanych). Polecić chciałam blogi, które zainspirowały mnie do zmiany branży i nauki programowania. Są to blogi, do których często wracam, zarówno po to, by czytać nowe posty, jak […]

\n

Artykuł Share Week 2017 – Inspiracje w IT pochodzi z serwisu Wake up and Code.

2017-03-15 12:02:52 share-week-2017-inspiracje-w-it ckhgqbfog000ii3um332tat33 2017-03-15 12:02:52 2017-03-15 12:02:52 cj0fcfe4g009ti3um84ir7lcu Mój projekt – Raport II http://www.wakeupandcode.pl/moj-projekt-raport-ii/

Daj Się Poznać 2017 W końcu nadszedł czas na kolejny raport postępów nad projektem w ramach Daj Się Poznać 2017. Ten tydzień był naprawdę owocny, jeśli chodzi o projekt, chociaż kolejny raz zmieniłam koncepcję. Tym razem tylko minimalnie: postanowiłam skupić się na funkcjonalności, a kolejny tydzień przeznaczyć na pracę nad warstwą wizualną. Poniżej krótka relacja […]

\n

Artykuł Mój projekt – Raport II pochodzi z serwisu Wake up and Code.

2017-03-18 14:23:04 moj-projekt-raport-ii ckhgqbfog000ii3um332tat33 2017-03-18 14:23:04 2017-03-18 14:23:04 cj0joex2o00a9i3umfopagirs Programowanie – jakie książki czytać? http://www.wakeupandcode.pl/programowanie-jakie-ksiazki-czytac/

Jakie książki czytać, gdy rozpoczynamy naukę programowania? We wpisie o początkach programowania twierdziłam, że żadne. I nadal tę opinię podtrzymuję – na początku nauki lepiej skupić się na kursach online i zdobyć praktyczną wiedzę. Ale oczywiście jak już troszkę tej wiedzy mamy, warto sobie poczytać książki w temacie. Dzisiaj więc trzy lektury okołoprogramistyczne, które pomogły […]

\n

Artykuł Programowanie – jakie książki czytać? pochodzi z serwisu Wake up and Code.

2017-03-21 15:09:42 programowanie-jakie-ksiazki-czytac ckhgqbfog000ii3um332tat33 2017-03-21 15:09:42 2017-03-21 15:09:42 @@ -2940,12 +2972,14 @@ cj0txbdiw00bhi3umcit99aa9 Czy warto wykupić dostęp do Codecademy Pro? http://w cj0xx0rt400bvi3um1py36ltk Mój projekt – Raport IV http://www.wakeupandcode.pl/moj-projekt-raport-iv/

Daj Się Poznać 2017 Mam wrażenie, że czas pędzi jak szalony. Co tydzień publikuję raport z postępów pracy nad projektem w ramach DSP, a wydaje mi się, że robię to dosłownie co chwilę. Dzisiaj będzie krótko, ale treściwie. Co udało mi się zrobić w tym tygodniu? Opis koncepcji projektu Coś, co wisiało nade mną właściwie […]

\n

Artykuł Mój projekt – Raport IV pochodzi z serwisu Wake up and Code.

2017-03-31 14:19:25 moj-projekt-raport-iv ckhgqbfog000ii3um332tat33 2017-03-31 14:19:25 2017-03-31 14:19:25 cj13d44ds00cmi3um8e9tcqt0 Jak planować naukę programowania http://www.wakeupandcode.pl/jak-planowac-nauke-programowania/

Nadchodzi dzień, w którym podejmujesz decyzję, że chcesz uczyć się programowania. O tym, od czego zacząć, pisałam już w artykule o początkach programowania. Można jednak przeklikać całą serię kursów i nic z nich nie wynieść. Jak planować naukę programowania? Co robić, by faktycznie się czegoś nauczyć? Dzisiaj chciałam zająć się przedstawieniem kilku moich sposobów na […]

\n

Artykuł Jak planować naukę programowania pochodzi z serwisu Wake up and Code.

2017-04-04 09:48:46 jak-planowac-nauke-programowania ckhgqbfog000ii3um332tat33 2017-04-04 09:48:46 2017-04-04 09:48:46 cj70r39fk00qzi3umhdu7b6co #5 SOLID – Dependency inversion principle https://sarvendev.com/2017/08/5-solid-dependency-inversion-principle/

Opierając się na szczegółowej implementacji klasy podczas wstrzykiwania zależności tworzymy sprzężenie pomiędzy klasą a zależnością. Kod staje się sztywny, a ewentualna podmiana zależności stanowi problem. W celu stworzenia elastycznego rozwiązania powinniśmy przestrzegać zasady Dependency inversion principle, która prezentuje się następująco: Moduły wysokopoziomowe nie powinny zależeć od modułów niskopoziomowych. Jedne i drugie powinny zależeć od abstrakcji. […]

\n

The post #5 SOLID – Dependency inversion principle appeared first on SarvenDev.

2017-08-31 17:54:56 5-solid-dependency-inversion-principle ck2uky50o000gi3um2qmhblbo 2017-08-31 17:54:56 2017-08-31 17:54:56 +cj1kwdh1c00eqi3umhc7pbv0y Daj Się Poznać #5 Dyrektywa w AngularJS - część 1 https://www.idaszak.com/article/2017/04/16/daj-sie-poznac-5-projekt-konkursowy-mistrzmakro
\t\r\n\r\n\r\n
\r\n


\r\n

W poprzednich częściach projektu Mistrz Makro udało nam sie stworzyć kontroler oraz serwis AngularJS, które pozwoliły naszej aplikacji zapisywać i wyświetlać dane pobrane z pliku JSON. W dzisiejszej części, bardzo krótko opiszę jak planuję stworzyć dyrektywę i jak miałby działać główny mechanizm aplikacji. Utworzymy dyrektywę, która wyświetli nam wszystkie potrzebne informacje z modeli. Zajmiemy się głównie plikiem widoku, który nasza dyrektywa utworzy. Dopiero w kolejnej części sprawimy żeby dyrektywa zadziałała. Zaczynajmy!

\r\n\r\n\r\nJeśli pobrałeś już moje repozytorium z Githuba, co opisałem w poprzednim poście to możesz teraz przeskoczyć do kolejnego commita, który pokaże Ci kod z tego posta:\r\n\r\n
$ git checkout b57974c18ad12830b4a67d2bad1c4ba58891f6e3
\r\n\r\n

# Nowa metoda modelu ProductModel

\r\n

Musimy cofnąć się do poprzedniej części projektu Mistrz Makro, gdzie tworzyliśmy modele dla naszej aplikacji, ponieważ będziemy musieli utworzyć nową metodę. Pozwoli nam ona na wyświetlenie konkretnego produktu, czy dania za pomocą przekazanego id. Plik product.model.js:

\r\n\r\n
 \r\ngetQuestion: function(id) {\r\n  if(id < _list.length) {\r\n    return _list[id];\r\n  } else {\r\n    return false;\r\n  }\r\n}
\r\n\r\n

Jeśli podane przy wywołaniu funkcji id jest mniejsze niż ilość elementów tablicy obiektów _list, to zwraca konkretne makroskładniki. Możemy teraz wywołać tą funkcję przykładowo w kontrolerze:

\r\n\r\n
 \r\nconsole.log(ProductModel.getQuestion(0));
\r\n\r\n

Podany kod wyświetli nam element o indeksie 0 pobrany z pliku JSON.

\r\n\r\n

# Tworzymy widok dyrektywy

\r\n

Stworzymy teraz strukturę pliku HTML, który zostanie wstrzyknięty do naszego widoku poprzez dyrektywę. Nie będzie jeszcze gotowa do użycia, ponieważ potrzebujemy jeszcze kodu Javascript, ale tym zajmiemy się w części kolejnej.

\r\n\r\n
 \r\n<div class="container" ng-show="inProgress">\r\n  <div class="row">\r\n    <div class="col-md-12">\r\n      <div ng-show="!quizEnd">\r\n        <img ng-src="/app/images/" alt="">\r\n        <h2></h2>\r\n        <p>Kcal:</p><input type="number" name="macro1">\r\n        <p>Białko:</p><input type="number" name="macro2">\r\n        <p>Węglowodany:</p><input type="number" name="macro3">\r\n        <p>Tłuszcz:</p><input type="number" name="macro4">\r\n        <button ng-click="check()" ng-show="">Submit</button>\r\n      \r\n        <div ng-show="">\r\n          <button ng-click="next()">Next</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div ng-show="quizEnd">\r\n        <button ng-click="reset()">Play again</button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class="container" ng-show="!inProgress">\r\n  <div class="row">\r\n    <button ng-click="start()">Start</button>\r\n  </div>\r\n</div>
\r\n\r\n

Powyższy kod zapisujemy jako macro.directive.html, najlepiej w podfolderze html folderu directive.

\r\n

Korzystamy tutaj z bootstrapa, a będąc dokładniejszym - z jego grida, który pozwoli na szybkie pozycjonowanie elementów quizu. Jest to jak na razie wstępny zarys, więc jeszcze możemy coś zmieniać w tym kodzie.

\r\n\r\n
 \r\n<div class="container">\r\n  <div class="row">\r\n    <div class="col-md-12">\r\n    </div>\r\n  </div>\r\n</div>
\r\n\r\n

Ta część kodu pozwala na stworzenie Bootstrapowego kontenera, wydzielenia pierwszego rzędu elementów oraz określenia jego szerokości na 12 linii z 12 możliwych.

\r\n\r\n
 \r\n<div class="container" ng-show="inProgress">
\r\n\r\n

Parametr ng-show określa czy dany kontener ma być wyświetlony czy ukryty. Jest to zależne od zmiennej inProgress, która określi czy quiz już się zaczął, czy jeszcze jesteśmy na ekranie startowym aplikacji.

\r\n\r\n
 \r\n<div ng-show="!quizEnd">\r\n  <img ng-src="/app/images/" alt="">\r\n  <h2></h2>\r\n  <p>Kcal:</p><input type="number" name="macro1">\r\n  <p>Białko:</p><input type="number" name="macro2">\r\n  <p>Węglowodany:</p><input type="number" name="macro3">\r\n  <p>Tłuszcz:</p><input type="number" name="macro4">\r\n  <button ng-click="check()" ng-show="">Submit</button>\r\n\r\n  <div ng-show="">\r\n    <button ng-click="next()">Next</button>\r\n  </div>\r\n</div>
\r\n\r\n

W przypadku jeśli quiz nie jest zakończony, co specyfikuje zmienna quizEnd, aplikacja powinna wyświetlić odpowiedni produkt wyświetlając takie elementy jak: img i name. Dla poszczególnych makroskładników będą to pola input, które są typu number, ponieważ użytkownik będzie musiał wstawić tam odpowiednią liczbę. Pola name pozwolą nam zidentyfikować inputy podczas weryfikacji quizu.

\r\n

Po naciśnięciu przycisku Submit zatwierdzimy nasze odpowiedzi, które sprawdzi funkcja check(). Po wysłaniu ukryjemy ten przycisk i sprawimy żeby pojawił się kolejny, który pozwoli na przejście do kolejnego zadania w naszym quizie. Będzie to przycisk Next i jego obecnością będziemy manipulować także za pomocą ng-show.

\r\n\r\n
 \r\n<div class="container" ng-show="!inProgress">\r\n  <div class="row">\r\n    <button ng-click="start()">Start</button>\r\n  </div>\r\n</div>
\r\n\r\n

Na samym dole jest ostatni container, który podczas wykonania quizu pojawi się tylko raz, jako ekran początkowy. Użytkownik po wduszeniu przycisku start uruchomi funkcję start(), dzięki której zmienna inProgress typu boolean zmieni swoją wartość na przeciwną i zmieni wyświetlane kontenery inicjując start quizu.

2017-04-16 16:20:00 daj-sie-poznac-5-dyrektywa-w-angularjs-czesc-1 cjfsgdao0000fi3um8hz4dspc 2017-04-16 16:20:00 2017-04-16 16:20:00 cj891hhuo00sli3um5lgi1cg4 Kompozycja ponad dziedziczenie https://sarvendev.com/2017/10/kompozycja-ponad-dziedziczenie/

Jedną z możliwości programowania obiektowego jest dziedziczenie. Daje nam ono możliwość powtórnego wykorzystania kodu poprzez tworzenie podklas. Warto mieć na uwadze, że nie jest ono złotym środkiem, a jednak bywa ono często nadużywane. Definicje Dziedziczenie – mechanizm programowania obiektowego, służący do współdzielenia metod oraz składowych pomiędzy klasami. Klasa podrzędna dziedziczy po klasie bazowej, co oznacza, […]

\n

The post Kompozycja ponad dziedziczenie appeared first on SarvenDev.

2017-10-01 17:47:48 kompozycja-ponad-dziedziczenie ck2uky50o000gi3um2qmhblbo 2017-10-01 17:47:48 2017-10-01 17:47:48 cj9su7k6g00ufi3umc16i17ai Service locator vs Dependency injection https://sarvendev.com/2017/11/service-locator-vs-dependency-injection/

Projektując aplikację w obiektowym języku programowania tworzymy klasy. Klasy mają własne zależności. Wyróżniamy dwa wzorce odpowiadające za zarządzanie zależnościami klasy: Dependency injection Service locator Dependency injection W poniższym przykładzie klasa Service doskonale pokazuje swoje zależności. Wiemy, że aby utworzyć instancję tej klasy musimy wstrzyknąć EntityManager do konstruktora. <?php class Service { private $em; public function __construct(EntityManagerInterface […]

\n

The post Service locator vs Dependency injection appeared first on SarvenDev.

2017-11-09 18:59:13 service-locator-vs-dependency-injection ck2uky50o000gi3um2qmhblbo 2017-11-09 18:59:13 2017-11-09 18:59:13 cjaphv0gw00vni3um3lwqgusk Symfony 4 – szybki przegląd https://sarvendev.com/2017/12/symfony-4-szybki-przeglad/

Symfony 4 zostało wydane zgodnie z zapowiedziami 30 listopada. Z racji, że miałem okazję na szybko wdrożyć bardzo mały projekcik przy użyciu sf4, postaram się przedstawić zmiany, które rzuciły mi się w oczy. Podstawowa wersja W poprzedniej wersji symfony przy instalacji domyślnie mieliśmy wiele paczek, z których nie korzystaliśmy. Zaczynając projekt trzeba było je usuwać. […]

\n

The post Symfony 4 – szybki przegląd appeared first on SarvenDev.

2017-12-02 15:29:56 symfony-4-szybki-przeglad ck2uky50o000gi3um2qmhblbo 2017-12-02 15:29:56 2017-12-02 15:29:56 cjb2k3c8000w1i3umggdn27q3 Kiedy klasa powinna być finalna? https://sarvendev.com/2017/12/kiedy-klasa-powinna-byc-finalna/

Jedną z cech programowania obiektowego jest dziedziczenie. Jednak jak każdy element w programowaniu powinno ono być dobrze przemyślane. Istnieją problemy, które nadają się do rozwiązania przez dziedziczenie, jak i mamy problemy, które przez dziedziczenie nie powinny być rozwiązywane. Pisałem o tym więcej w artykule – Kompozycja ponad dziedziczenie. W wielu projektach istnieją rozbudowane hierarchie dziedziczenia, […]

\n

The post Kiedy klasa powinna być finalna? appeared first on SarvenDev.

2017-12-11 18:53:24 kiedy-klasa-powinna-byc-finalna ck2uky50o000gi3um2qmhblbo 2017-12-11 18:53:24 2017-12-11 18:53:24 cj3rfs1e800m8i3um10tgeaw2 O czym chciałabym wiedzieć, zanim zaczęłam programować http://www.wakeupandcode.pl/o-czym-chcialabym-wiedziec-zanim-zaczelam-programowac/

Kiedy postanowiłam, że z humanistki zostanę programistką, nie miałam dokładnego pojęcia o tym, czym jest programowanie. Z perspektywy czasu to nawet wydaje mi się, że miałam dużo szczęścia w tym, że postawiłam na front-end, w którym się odnalazłam i bardzo mi się podoba. A miałam o nim dość ogólne pojęcie. Dobrze, że JavaScript okazał się […]

\n

Artykuł O czym chciałabym wiedzieć, zanim zaczęłam programować pochodzi z serwisu Wake up and Code.

2017-06-10 15:29:14 o-czym-chcialabym-wiedziec-zanim-zaczelam-programowac ckhgqbfog000ii3um332tat33 2017-06-10 15:29:14 2017-06-10 15:29:14 cjbialzs800wai3um3uon80ho Linux Mint 18.3 – The ‚grub-efi-amd64-signed package’ failed to install into /target/. https://sarvendev.com/2017/12/linux-mint-18-3-the-grub-efi-amd64-signed-package-failed-install-into-target/

Jakieś dwie godziny temu pisałem na tw/fb, że eksperymentowałem z Ubuntu Budgie, jednak po 10 minutach kombinowania jak dodać ikonę do panelu, poddałem się i stwierdziłem, że instaluję sprawdzonego Minta, którego używam od kilku lat. Oczywiście nie odbyło się to bezproblemowo. Instalacja System zwykle instaluję w taki sposób, że tworzę trzy partycje: swap – zwykle […]

\n

The post Linux Mint 18.3 – The ‚grub-efi-amd64-signed package’ failed to install into /target/. appeared first on SarvenDev.

2017-12-22 19:12:17 linux-mint-183-the-grub-efi-amd64-signed-package-failed-to-install-into-target ck2uky50o000gi3um2qmhblbo 2017-12-22 19:12:17 2017-12-22 19:12:17 +cj23o3ls000gui3umecgf5ii5 Jak wyciągnąć coś ze studiów? https://www.idaszak.com/article/2017/04/29/jak-wyciagnac-cos-ze-studiow


\r\n

Jesteś studentem? Piszesz właśnie projekt w języku, którego nienawidzisz? A może musisz korzystać z martwej technologii? Denerwuje Cię uczenie się inline cssów? Pisanie stron opartych na tabelkach? Uznałeś już że studia nie dadzą Ci nic więcej poza papierkiem? W takim razie jak wyciągnąć coś ze studiów? Postaram się odpowiedzieć na to w tym krótkim artykule.

\r\n\r\n\r\n

Studenci są grupą społeczną z różnymi przywilejami, którymi między innymi są zniżki na przejazdy transportu miejskiego i kolei. Jednak studenci kierunków informatycznych i nie tylko, mogą się poszczycić kolejnymi względami, a mianowicie są to darmowe licencje programów. Pewnie niektóre z nich bardzo dobrze znacie i może nawet już z nich korzystacie. Postanowiłem jednak wypisać wszystkie te, które przydadzą się programistom i web designerom.

\r\n\r\n

# Microsoft

\r\n
    \r\n\t
    \r\n\t
  • Microsoft Office
    • \r\n\t\tJako studenci możemy otrzymać pakiet Office 365, czyli Microsoft Word, Microsoft Excel oraz Microsoft Powerpoint, całkowicie za darmo, pod warunkiem że nasza uczelnia bierze udział w tym programie. Uzyskaj dostęp: tutaj\r\n\t\r\n\t
  • Microsoft Imagine (Dreamspark)
    • \r\n\t\tPodobnie, jak Office 365, dostęp do DreamSparka otrzymują tylko studenci uczelni biorących udział w programie. Otrzymujemy dzięki temu darmowy system operacyjny Windows 10, 8.1 lub 7. W paczce otrzymujemy również Visual Studio Code, które ostatnio jest bardzo popularnym IDE do Javascriptowych aplikacji. Przede wszystkim otrzymujemy wersję Enterprise Visual Studio 2017, która pozwala programować w wielu językach, oraz wiele innych użytecznych programów. Uzyskaj dostęp: tutaj.
    Co więcej, otrzymujemy także dostęp do Microsoftowej chmury Azure całkowicie za darmo. Więcej na ten temat możemy przeczytać na stronie AleYakTo\r\n
\r\n

# Github Student Pack

\r\n

Żeby otrzymać Github Student Pack, wystarczy posiadać zaświadczenie o studiowaniu, bądź zeskanowaną legitymację studencką i wysłać ją poprzez: link

\r\n

Musimy wybrać indywidualne konto studenckie, uzupełnić dane szkoły, załączyć opisane wyżej skany i wytłumaczyć jak planujemy korzystać z Githuba.

\r\n

Co możemy zyskać z Github students pack?

\r\n
    \r\n\r\n\t\r\n\t
  • Github
    • \r\n\t

    Normalnie prywatne repozytorium kosztuje 7$ miesięcznie, jednak tak długo jak posiadamy status studenta, będziemy mogli tworzyć prywatne repozytoria za darmo, bez limitów!

    \r\n\t\r\n\t
  • Namecheap
    • \r\n\t

    Możemy stworzyć darmową domenę .me na rok oraz otrzymać do niej certyfikat SSL, jednak taki sam certyfikat za darmo oferuje także Cloudflare.

    \r\n\t\r\n\t
  • DigitalOcean
    • \r\n\t

    Darmowy hosting oparty na chmurze - otrzymujemy 50$ do wykorzystania w platformie.

    \r\n\t\r\n\t
  • Bitnami
    • \r\n\t

    Kolejny hosting oparty na chmurze, całkowicie za darmo na rok.

    \r\n\t\r\n\t
  • Flatiron School
    • \r\n\t

    Darmowe miesięczne członkostwo w kursie Web Developmentu, na bootcampie online, warte 149$.

    \r\n\t\r\n\t
  • Thinkful
    • \r\n\t

    Kurs HTML, CSS oraz Javascript, dostępny za darmo przez jeden miesiąc.

    \r\n\t\r\n\t
  • HackHands
    • \r\n\t

    Pomoc programistyczna dostępna 24/7 - otrzymujemy 25$ do wykorzystania.

    \r\n\t

    Znajduje się tam także kilka innych rzeczy, jednak dalej odsyłam do strony Github Student Pack

    \r\n
\r\n

# Jetbrains Tools

\r\n
\r\n\r\n\r\n\r\n\r\n
\r\n


\r\n

Jeśli programujesz w Javie, PHP, Ruby, Pyhtonie, Javascript, Objective-C lub .NET, na pewno znajdziesz tutaj dla siebie ciekawe środowisko całkowicie za darmo. Uzyskaj dostęp: tutaj.

\r\n

Zachęcam szczególnie do przetestowania WebStorma, który jest popularnym IDE do Javascript

\r\n

# Axure RP Pro

\r\n

\r\n

Możemy otrzymać darmową licencję programu, służącego do prototypowania stron internetowych, dostępnego zarówno dla Mac jak i PC. Uzyskaj dostęp: tutaj

\r\n

# Atlassian Jira

\r\n

\r\n

Jako studenci możemy otrzymać darmowy dostęp do narzędzia JIRA, które pozwala na zarządzanie projektem Agile. Uzyskaj dostęp: tutaj

2017-04-29 19:36:00 jak-wyciagnac-cos-ze-studiow cjfsgdao0000fi3um8hz4dspc 2017-04-29 19:36:00 2017-04-29 19:36:00 cjcgk70bk00x5i3um9puhbwi4 Active record (Eloquent) vs Data mapper (Doctrine) https://sarvendev.com/2018/01/active-record-eloquent-vs-data-mapper-doctrine/

W większości tworzonych systemów trzeba gdzieś i w jakiś sposób zapisywać dane. ORM (Object-Relational Mapping), czyli mapowanie obiektowo-relacyjne jest sposobem odwzorowania systemu na bazę danych. ORM jest warstwą pomiędzy bazą danych, a aplikacją. Zajmuje się tworzeniem, aktualizowaniem, odczytywaniem oraz usuwaniem danych. Jak widać na tej ilustracji wzorce DataMapper oraz ActiveRecord należą do warstwy Data access, […]

\n

The post Active record (Eloquent) vs Data mapper (Doctrine) appeared first on SarvenDev.

2018-01-15 18:44:44 active-record-eloquent-vs-data-mapper-doctrine ck2uky50o000gi3um2qmhblbo 2018-01-15 18:44:44 2018-01-15 18:44:44 cjd0kduu000xri3um8srfcuju Encja powinna być zawsze poprawnym obiektem https://sarvendev.com/2018/01/encja-byc-zawsze-poprawnym-obiektem/

Bardzo często w projektach z użyciem Doctrine, encja wygląda w ten sposób, że zrobione jest mapowanie odpowiednich pól, oraz do każdego pola utworzone są gettery oraz settery. Dodatkowo do każdego pola mamy odpowiednie adnotacje walidacji, a formularze walidowane są na encji. Czy to na pewno jest dobre podejście? <?php namespace App\\Entity; use Doctrine\\ORM\\Mapping as ORM; […]

\n

The post Encja powinna być zawsze poprawnym obiektem appeared first on SarvenDev.

2018-01-29 18:45:27 encja-powinna-byc-zawsze-poprawnym-obiektem ck2uky50o000gi3um2qmhblbo 2018-01-29 18:45:27 2018-01-29 18:45:27 cjdt5hjnk00yqi3umaog85ntf O sztucznej inteligencji słów kilka https://sarvendev.com/2018/02/o-sztucznej-inteligencji-slow/

W obecnych czasach bardzo popularnym pojęciem zaraz obok blockchaina i kryptowalut jest sztuczna inteligencja. Wszyscy, wszędzie chcą robić coś z tym związanego. Efektem tego jest ciągłe poruszanie tematu jakoby AI miało w przyszłości pozbawić nas pracy. Powstają nawet specjalne strony (https://willrobotstakemyjob.com/), gdzie wpisując nazwę zawodu możemy sprawdzić jaka jest szansa jej utraty w przyszłości na […]

\n

The post O sztucznej inteligencji słów kilka appeared first on SarvenDev.

2018-02-18 18:53:44 o-sztucznej-inteligencji-slow-kilka ck2uky50o000gi3um2qmhblbo 2018-02-18 18:53:44 2018-02-18 18:53:44 @@ -2953,6 +2987,7 @@ cje8t339k00z4i3umbtuz2yrr Podsumowanie roku https://sarvendev.com/2018/03/podsum cjen5itqg00zni3um43aecle4 O szukaniu pracy słów kilka https://sarvendev.com/2018/03/o-szukaniu-pracy-slow-kilka/

Kilka miesięcy temu postanowiłem zmienić pracę, na taką która pozwoli mi bardziej się rozwijać i też otworzy przede mną jakieś nowe wyzwania. Z racji, że miałem konkretnie sprecyzowane wymagania przeszedłem kilka rekrutacji i o tym chciałbym napisać kilka słów. Dlaczego zmiana? Zacząłem myśleć o zmianie dlatego, że chciałem ciekawszych, ambitniejszych projektów, więc miałem ten komfort, […]

\n

Artykuł O szukaniu pracy słów kilka pochodzi z serwisu SarvenDev.

2018-03-11 18:47:49 o-szukaniu-pracy-slow-kilka ck2uky50o000gi3um2qmhblbo 2018-03-11 18:47:49 2018-03-11 18:47:49 cj3ukqw1400mgi3um0bts2qog Jak się uczę: Angular http://www.wakeupandcode.pl/jak-sie-ucze-angular/

Ostatnio na blogu było bardzo motywacyjne, głównie ze względu na wyzwnanie Programuj, dziewczyno! Ale na razie chwilowa przerwa w motywowaniu, bo dziś artykuł z tych konkretnych, czyli lista materiałów, z których uczę się Angulara. Słowem wstępu – Angulara uczę się od kilku miesięcy. Zaczęłam od wersji 1, czyli AngularJS, w niej też tworzyłam aplikację na […]

\n

Artykuł Jak się uczę: Angular pochodzi z serwisu Wake up and Code.

2017-06-12 20:11:37 jak-sie-ucze-angular ckhgqbfog000ii3um332tat33 2017-06-12 20:11:37 2017-06-12 20:11:37 cj199t1aw00d9i3umegeb09sc Mój projekt – Raport V http://www.wakeupandcode.pl/moj-project-raport-v/

Daj Się Poznać 2017 W tym tygodniu nie wydarzyło się zbyt wiele, jeśli chodzi o projekt. Właściwie cały czas, jaki miałam, poświęciłam na naukę Angulara 2. Dzisiaj więc tylko krótki raport z poprawek, które udało mi się wprowadzić w Habit Trackerze. Dodanie strony „in progress” W najbliższych dniach mam zamiar udostępnić w końcu link do […]

\n

Artykuł Mój projekt – Raport V pochodzi z serwisu Wake up and Code.

2017-04-08 13:02:47 moj-projekt-raport-v ckhgqbfog000ii3um332tat33 2017-04-08 13:02:47 2017-04-08 13:02:47 +cj29j074000hii3um81iba02o Daj Się Poznać #5 Dyrektywa w AngularJS - część 2 https://www.idaszak.com/article/2017/05/04/daj-sie-poznac-6-projekt-konkursowy-mistrzmakro
\t\r\n\r\n\r\n
\r\n


\r\n

W poprzednich częściach tworzyliśmy aplikację AngularJS Mistrz Makro, która jest quizem, pozwalającym na zgadywanie makroskładników produktu przedstawionego na zdjęciu. Udało się nam stworzyć modele, pozwalające na zarządzanie danymi aplikacji. Odebraliśmy dane z pliku JSON i wyświetliliśmy je w konsoli. W poprzedniej części zaczęliśmy budować główny mechanizm napędzający aplikacje, czyli dyrektywę. Stworzyliśmy jej część składającą się z pliku HTML. Tym razem znów zajmiemy się dyrektywą i utworzymy plik Javascript, który sprawi, że nasz quiz zacznie działać tak jak powinien. Zaczynajmy!

\r\n\r\n\r\nJeśli pobrałeś już moje repozytorium z Githuba, co opisałem w poprzednim poście to możesz teraz przeskoczyć do kolejnego commita, który pokaże Ci kod z tego posta:\r\n\r\n
$ git checkout 28c29bb2082ce088dc554c5c73cd01c02163d8c9
\r\n\r\n

# Zmiany w pliku HTML dyrektywy

\r\n

W stosunku do poprzedniego postu, w pliku HTML dyrektywy dodaliśmy tylko paragrafy, które wyświetlają wyniki, oraz dodatkowy stan inProgress. Tak prezentuje się cały kod:

\r\n\r\n
 \r\n<div class="container" ng-show="inProgress">\r\n  <div class="row">\r\n    <div class="col-md-12">\r\n\r\n      <div ng-show="!quizEnd">\r\n        <h2></h2>\r\n        <img ng-src="/app/assets/">\r\n        <p>Kcal:</p><input type="number" ng-model="macro1">\r\n        <p ng-show="!answerMode"></p>\r\n        <p>Białko:</p><input type="number" ng-model="macro2">\r\n        <p ng-show="!answerMode"></p>\r\n        <p>Węglowodany:</p><input type="number" ng-model="macro3">\r\n        <p ng-show="!answerMode"></p>\r\n        <p>Tłuszcz:</p><input type="number" ng-model="macro4">\r\n        <p ng-show="!answerMode"></p>\r\n        <button ng-click="check()" ng-show="answerMode">Submit</button>\r\n      \r\n        <div ng-show="!answerMode">\r\n          <button ng-click="nextQuestion()">Next</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div ng-show="quizEnd">\r\n        <button ng-click="reset()">Play again</button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class="container" ng-show="!inProgress">\r\n  <div class="row">\r\n    <button ng-click="start()">Start</button>\r\n  </div>\r\n</div>
\r\n\r\n

Po każdym inpucie dodaliśmy paragraf, który wyświetla się jeśli nie jesteśmy w stanie answerMode, czyli w momencie kiedy wpisaliśmy wartość do inputów i wdusiliśmy przycisk sprawdzający. Wyświetlimy tam wyniki danego pytania.

\r\n\r\n
<p ng-show="!answerMode"></p>
\r\n\r\n

Stan inProgress znajduje się w dwóch głównych containerach i pozwala na wyświetlenie quizu dopiero po wduszeniu przycisku start.

\r\n\r\n

# Tworzymy plik JS Dyrektywy

\r\n

Na początku, dyrektywę tworzymy tak samo jak każdy plik AngularJS, czyli wstawiamy IIFE, podłączamy nasz główny moduł i tworzymy dyrektywę, którą nazwałem "quiz".

\r\n\r\n
(function() {\r\n  'use strict';\r\n\r\n  angular\r\n    .module('quizProject')\r\n    .directive('quiz', quiz);
\r\n\r\n

Następnie tworzymy funkcje zgodnie z dokumentacją dyrektywy:

\r\n\r\n
function quiz(ProductModel) {\r\n  return {\r\n    restrict: 'AE',\r\n    scope: {},\r\n    templateUrl: 'app/main/directive/html/macro.directive.html',\r\n    link: function(scope, elem, attrs) {
\r\n\r\n

Restrict pozwala na ograniczenie w jaki sposób będziemy mogli wywoływać naszą dyrektywę. Do wyboru mamy cztery sposoby - A, C, E, M, jednak domyślnie jest to AE i właśnie tak będzie w naszej aplikacji. Jednak czym się różnią i w jaki sposób ją wywołują?

\r\n\r\n
A = <div quiz></div>          <!-- jako Atrybut-->\r\nC = <div class="quiz"></div>  <!-- jako Klasa -->\r\nE = <quiz></quiz>             <!-- jako Element-->\r\nM = <!--directive:quiz -->    <!--  jako Komentarz-->
\r\n\r\n

Scope pozwala na stworzenie wyizolowanego zasięgu zmiennych i pobranie w razie potrzeby wartości przy wywołaniu dyrektywy. Nam jednak nie będzie to potrzebne. Przykład takiego użycia:

\r\n\r\n
<div quiz name="ABC"></div>
\r\n\r\n
scope: {\r\n  MyQuestionName: '@name'\r\n},
\r\n\r\n

TemplateUrl przechowuje link do pliku HTML dyrektywy. Link jest funkcją, która wykonuje się przy wywołaniu dyrektywy.

\r\n

Teraz możemy wewnątrz funkcji link tworzyć funkcje.

\r\n\r\n

Pierwszą funkcja, którą stworzymy będzie start, która wywołuje się po wduszeniu przycisku "start", po włączeniu aplikacji. Ustawia wszystkie stany, tak, aby mogły się pojawić kolejne elementy w widoku.

\r\n\r\n
scope.start = function() {\r\n  scope.id = 0;\r\n  scope.quizEnd = false;\r\n  scope.inProgress = true;\r\n  scope.getQuestion();\r\n};
\r\n\r\n

Po wywołaniu funkcji id wyświetlanego elementu ustawia się na zero. Dzięki zmiennej quizEnd wiemy że quiz się rozpoczął i nie zakończył. Zmienna inProgress wyświetla na ekranie quiz. Następnie wywołujemy zmienną getQuestion().

\r\n\r\n
scope.getQuestion = function() {\r\n  var q = ProductModel.getQuestion(scope.id);\r\n  if(q) {\r\n    scope.name = q.name;\r\n    scope.kcal = q.kcal;\r\n    scope.protein = q.protein;\r\n    scope.carb = q.carb;\r\n    scope.fat = q.fat;\r\n    scope.img = q.img;\r\n    scope.answerMode = true;\r\n  } else {\r\n    scope.quizEnd = true;\r\n  }\r\n};
\r\n\r\n

Funkcja getQuestion odbiera z ProductModel dane, wybrane przez aktualną wartość zmiennej scope.id, poprzez funkcję:

\r\n\r\n
var q = ProductModel.getQuestion(scope.id);
\r\n\r\n

A następnie przypisuje pobrane dane do odpowiadających im zmiennych. Zmieniamy stan answerMode, dzięki czemu pojawiają się produkt i inputy, które będziemy mogli wypełnić. Jeśli nasza funkcja nie znajdzie odpowiednich danych, to zakończy quiz zmienną quizEnd. Tak prezentuje się aplikacja po wduszeniu przycisku start:

\r\n

aplikacja po wduszeniu start

\r\n

Możemy teraz wpisać wartości numeryczne w pola, jednak nie są one walidowane w żaden sposób i prawdopodobnie pozostawię użytkownikowi wybór jakie pola wypełnić.

\r\n

Po wduszeniu przycisku Submit, wywoła się funkcja check(), która wygląda w taki sposób:

\r\n\r\n
scope.check = function(){\r\n  scope.Res = [];\r\n  scope.answerMode = false;\r\n  scope.Res[0] = test(scope.kcal, scope.macro1);\r\n  scope.Res[1] = test(scope.protein, scope.macro2);\r\n  scope.Res[2] = test(scope.carb, scope.macro3);\r\n  scope.Res[3] = test(scope.fat, scope.macro4);\r\n};
\r\n\r\n

Funkcja check() zmienia stan answerMode na false, aby określić w aplikacji, że user już zatwierdził swoją odpowiedź. następnie tworzymy tablicę, w której przechowamy wyniki porównujące wartość podaną przez użytkownika z wartością w naszej aplikacji.

\r\n

Funkcja test:

\r\n\r\n
var test = function(modelData, viewData){\r\n  if(modelData > viewData) return modelData - viewData + " za mało";\r\n  if(modelData < viewData) return viewData - modelData + " za dużo";\r\n  if(modelData == viewData) return "idealnie!";\r\n};
\r\n\r\n

Funkcja test, jest funkcją nie przypisaną do scope, ponieważ nie będziemy wywoływać jej w widoku aplikacji, tylko bezpośrednio w dyrektywie. Funkcja ta przyjmuje dwa argumenty - wartość z inputa, oraz odpowiadającą wartość z aplikacji. Po porównaniu tych dwóch wartości, zwracana jest różnica wraz z opisem czy wartość była za mała czy za duża. W przypadku trafienia poprawnej wartości, funkcja zwraca string "idealnie!". Po przypisaniu tych wartości do tablicy scope.Res, możemy wyświetlić ją w widoku aplikacji. Stanie się tak, ponieważ paragrafy, które wyświetlają tą tablice, wyświetlą się w momencie, kiedy zmienimy stan answerMode na fałsz, co przed chwilą się wydarzyło. Tak wygląda nasza aplikacja, w momencie kiedy nie wpisaliśmy żadnej wartości i wdusiliśmy przycisk submit:

\r\n

aplikacja po wduszeniu submit

\r\n

Następna funkcja wywołuje się po wduszeniu klawisza next, który wyświetla się po wykonaniu funkcji check(). Nazywa się nextQuestion()

\r\n\r\n
scope.nextQuestion = function() {\r\n  scope.id++;\r\n  scope.getQuestion();\r\n}
\r\n\r\n

Pozwala tylko na zwiększenie id, aby wyszukać kolejny produkt i znowu wywołuje funkcję qetQuestion()

\r\n\r\n
scope.reset = function() {\r\n  scope.inProgress = false;\r\n}
\r\n\r\n

Ostatnią już funkcją tej dyrektywy jest scope.reset(), które wywoływany jest przez przycisk play again, pojawiający się w momencie kiedy w bazie zabraknie pytań. Funkcja zmienia stan inProgress, dzięki czemu wracamy do przycisku start.

\r\n\r\n

# Cały kod dyrektywy

\r\n

Tak prezentuje się cały kod Javascript dyrektywy, którą zapisałem jako macro.directive.js:

\r\n\r\n
(function() {\r\n  'use strict';\r\n\r\n  angular\r\n    .module('quizProject')\r\n    .directive('quiz', quiz);\r\n\r\n  function quiz(ProductModel) {\r\n      return {\r\n        restrict: 'AE',\r\n        scope: {},\r\n        templateUrl: 'app/main/directive/html/macro.directive.html',\r\n        link: function(scope, elem, attrs) {\r\n\r\n          scope.start = function() {\r\n            scope.id = 0;\r\n            scope.quizEnd = false;\r\n            scope.inProgress = true;\r\n            scope.getQuestion();\r\n          };\r\n\r\n          scope.check = function(){\r\n            scope.Res = [];\r\n            scope.answerMode = false;\r\n            scope.Res[0] = test(scope.kcal, scope.macro1);\r\n            scope.Res[1] = test(scope.protein, scope.macro2);\r\n            scope.Res[2] = test(scope.carb, scope.macro3);\r\n            scope.Res[3] = test(scope.fat, scope.macro4);\r\n          };\r\n\r\n          var test = function(modelData, viewData){\r\n            if(modelData > viewData) return modelData - viewData + " za mało";\r\n            if(modelData < viewData) return viewData - modelData + " za dużo";\r\n            if(modelData == viewData) return "idealnie!";\r\n          };\r\n\r\n          scope.getQuestion = function() {\r\n            var q = ProductModel.getQuestion(scope.id);\r\n            if(q) {\r\n              scope.name = q.name;\r\n              scope.kcal = q.kcal;\r\n              scope.protein = q.protein;\r\n              scope.carb = q.carb;\r\n              scope.fat = q.fat;\r\n              scope.img = q.img;\r\n              scope.answerMode = true;\r\n            } else {\r\n              scope.quizEnd = true;\r\n            }\r\n          };\r\n\r\n          scope.nextQuestion = function() {\r\n            scope.id++;\r\n            scope.getQuestion();\r\n          }\r\n\r\n        }\r\n      }\r\n    };\r\n})();
\r\n\r\n

Proszę się nie martwić surowym wyglądem aplikacji, na stylowanie przyjdzie jeszcze czas - w najbliższych częściach postów Daj się Poznać.

2017-05-03 22:00:00 daj-sie-poznac-5-dyrektywa-w-angularjs-czesc-2 cjfsgdao0000fi3um8hz4dspc 2017-05-03 22:00:00 2017-05-03 22:00:00 cj1dan1s000dvi3umcgpqh3tt Nauka programowania a kryzysy http://www.wakeupandcode.pl/nauka-programowania-a-kryzysy/

Ostatnimi czasy można trafić na bardzo wiele artykułów zachęcających do nauki programowania. Mój blog również do tego zachęca, na przykład tym wpisem. Uważam, że niesamowite jest to, jak wiele osób chce się uczyć i próbować swoich sił w kodowaniu. Jednak z drugiej strony, często pomija się fakt, że nauka programowania wcale nie jest taka prosta, […]

\n

Artykuł Nauka programowania a kryzysy pochodzi z serwisu Wake up and Code.

2017-04-11 08:37:12 nauka-programowania-a-kryzysy ckhgqbfog000ii3um332tat33 2017-04-11 08:37:12 2017-04-11 08:37:12 cj1hxwp3k00ehi3uma6zf4i0t Mój projekt – Raport VI http://www.wakeupandcode.pl/moj-projekt-raport-vi/

Daj Się Poznać 2017 Prace nad projektem nieprzerwanie trwają. W ramach przedświątecznej lektury zapraszam na krótki przegląd tego, co udało mi się zrobić w tym tygodniu. Poprawki w stylach Ostatnie dni upłynęły mi pod znakiem mniejszych poprawek w wizualnej stronie aplikacji. Sprawdzałam, jak Habit Tracker prezentuje się na różnych wielkościach ekranów i jak sprawić, żeby […]

\n

Artykuł Mój projekt – Raport VI pochodzi z serwisu Wake up and Code.

2017-04-14 14:39:38 moj-projekt-raport-vi ckhgqbfog000ii3um332tat33 2017-04-14 14:39:38 2017-04-14 14:39:38 cj1oqbo7s00f5i3um6cgk9xgc Coding games, czyli nauka programowania inaczej http://www.wakeupandcode.pl/coding-games-czyli-nauka-programowania-inaczej/

Początki samodzielnej nauki programowania to głównie kursy online. Zazwyczaj wyglądają one podobnie – mamy część teoretyczną, a potem przechodzimy do praktyki. Co robić, gdy masz już dość i nie chcesz oglądać kolejnych wykładów i robić ćwiczeń? Z pomocą przychodzą coding games. Coding games – co to takiego? Czym są coding games? To nowy sposób na […]

\n

Artykuł Coding games, czyli nauka programowania inaczej pochodzi z serwisu Wake up and Code.

2017-04-19 08:41:43 coding-games-czyli-nauka-programowania-inaczej ckhgqbfog000ii3um332tat33 2017-04-19 08:41:43 2017-04-19 08:41:43 @@ -2965,12 +3000,6 @@ cj0zx79c000c7i3um4v98g1dr Daj Sie Poznac #3 JSON. Service i Controller w Angular cj0zx79c000c8i3um6mbzar0a ES6#1 Czy Javascript jest jezykiem zorientowanym obiektowo http://www.idaszak.com/article/2017/04/02/czy-javascript-jest-obiektowy

\r\n\r\n

AngularJS, w którym piszę swój projekt, jest frameworkiem który promuje obiektowe podejście do programowania, jednak na początek warto byłoby zadać sobie pytanie, czy Javascript jest językiem zorientowanym obiektowo? Postaram się wyjaśnić czy jest to prawdą, oraz wytłumaczyć jak Javascript różni się od innych języków. Zahaczymy także o najnowszy standard tego języka i jego podejście do programowania obiektowego. Zaczynajmy!

\r\n

\r\n\r\n

# Czy Javascript jest językiem zorientowanym obiektowo?

\r\n

Javascript jako jeden z niewielu języków programowania jest zorientowany obiektowo. Zaraz, zaraz, zapytacie - przecież inne języki też mają obiektowość! Jednak takie popularne języki jak C++ czy Python powinny nazwane być precyzyjniej "języki klasowo zorientowane". Javascript różni się od nich tym, że w ogóle nie posiada klas (nie jest to do końca prawdą, ale wytłumaczę to w dalszej części tego posta). Czy taka różnica jest zaletą czy wadą? Wielu programistów uważa że dziedziczenie metod i zmiennych z klas to złe podejście, także możemy potraktować to jako zaletę. Klasy jednak, upraszczają wiele rzeczy o których musielibyśmy pamiętać w Javascripcie, dlatego sporo osób dąży do stworzenia klas w tym języku.

\r\n\r\n

Wiele osób twierdzi, że w języku Javascript wszystko jest obiektem, jednak nie jest to do końca prawdą. Argumentują to faktem, że np. string posiada swoje metody, takie jak length, jednak w rzeczywistości wygląda to inaczej. Sam string jest typem prymitywnym, jednak możemy stworzyć z niego obiekt:

\r\n\r\n
 \r\nvar testString = "who am I";\r\ntypeof testString; //"string"\r\nvar testObject = new String("who am I");\r\ntypeof testObject; // "object"
\r\n\r\n

W praktyce, jeśli zastosujemy na stringu funkcję taką jak length czy charAt, to język niejawnie tworzy z niego obiekt, a potem wywołuje daną funkcję.

\r\n\r\n

# Jak wyglądają obiekty w Javascript i czym są klasy?

\r\n

Na początek stwórzmy obiekt z trzema własnościami:

\r\n\r\n
 \r\nvar myObject = {\r\n\tfirstVariable: 1,\r\n\tsecondVariabe: 2,\r\n\tfoo: function(){\r\n\t\tconsole.log("foo");\r\n\t}\t\r\n};
\r\n\r\n

Możemy teraz odwoływać się do poszczególnych własności obiektu, niezależnie czy są funkcjami czy zmiennymi, za pomocą operatora . lub [ ]:

\r\n\r\n
 \r\nmyObject.firstVariable; //1\r\nmyObject.secondVariable; //2\r\nmyObject["firstVariable"]; //1\r\nmyObject.foo; //"foo"
\r\n\r\n

Klasa sama w sobie nie jest obiektem, tylko schematem budowy obiektów. Żeby otrzymać obiekt, na którym będzie można przykładowo wykonać jakąś metodę, musimy najpierw stworzyć obiekt, nazywany instancją tej klasy.\r\nCzym różni się dziedziczenie z klasy od dziedziczenia z obiektu? Jeśli tworzmy nowy obiekt z klasy, to wszystkie metody będą kopiowane do tego obiektu. W Javascript dziedziczenie jest utrudnione, ponieważ nowy obiekt zamiast skopiować metodę obiektu nadrzędnego, tylko się do niej odwołuje.

\r\n\r\n

# Co to jest prototyp i jak wygląda dziedziczenie?

\r\n\r\n

Każdy obiekt w Javascript ma wbudowaną funkcję, która nazywa się prototype i łączy go z innym obiektem. Obiekt, który nie dziedziczy nic z innego obiektu, ma przypisany prototyp do object.prototype. W momencie, w którym wywołujemy własność obiektu i program nie znajdzie jej w danym obiekcie, wtedy przesuwa się po nadrzędnych obiektach tak długo dopóki jej nie znajdzie, lub nie dotrze do końca łańcucha prototypów. W praktyce możemy przez to wywołać nieistniejącą w interesującym nas obiekcie metodę, a otrzymać odpowiedź od obiektu położonego wyżej w łańcuchu prototypów.

\r\n\r\n

Funkcje prototypowe są dostępne dla każdej instancji. Nową instancję obiektu możemy stworzyć używając słowa kluczowego new:

\r\n\r\n
 \r\nfunction Droid(type) {\r\n\tthis.type = type;\r\n}\r\n\r\nDroid.prototype.speak = function() {\r\n\tconsole.log("I am " + this.type );\r\n};\r\n\r\nvar c3po = new Droid('protocol droid');\r\n\r\nc3po.speak(); // I am protocol Droid
\r\n\r\n

Wybacz jeśli nie jesteś fanem Star Wars, ale mam nadzieję że takie przykłady bardziej zapadną w pamięć :)

\r\n\r\n

Nazywanie obiektów z dużej litery, to praktyka z innych języków programowania, jednak nie ma to wpływu na wykonanie kodu, chociaż możliwe jest, że niektóre lintery sprawdzające jakość kodu mogą tego wymagać.

\r\n\r\n

Możemy teraz stworzyć kolejny obiekt, który będzie dziedziczył z funkcji Droid i tworzył także swoje instancje:

\r\n\r\n
 \r\nfunction Mech(type) {\r\n\tDroid.call(this, type);\r\n}\r\n\r\nMech.prototype = new Droid();\r\n\r\nvar r2d2 = new Mech('astromech');\r\nr2dr.speak(); // I am astromech
\r\n\r\n

Prototyp funkcji Mech przypisaliśmy do obiektu Droid, dzięki czemu Mech dziedziczy wszystkie własności obiektu Droid. Użyliśmy funkcji call, która wywołuje nadrzędny obiekt z wartością this, wskazująca na obecny obiekt, dzięki temu ustawiając wartość this.type zapisuje się ona w obecnym obiekcie, zamiast nadrzędnym.

\r\n\r\n

# Klasy i dziedziczenie w ES6

\r\n

Jeśli chcesz pisać w ES6, musisz zainstalować kompilator babel lub przetestować kod online np. na stronie http://jsbin.com

\r\n

Skoro w standardzie ES6 języka Javascript pojawiło się słowo kluczowe class, czy oznacza to, że wprowadzono normalne klasy? Tak naprawdę zmieniła się tylko składnia kodu na krótszą i czytelniejszą, jednak za kulisami wszystko działa tak samo jak w przypadku funkcji z prototypem.

\r\n\r\n

Spróbujmy teraz stworzyć klasę w ES6 i stworzyć jej instancję:

\r\n\r\n
 \r\nclass Ship {\r\n  constructor(options) {\r\n    this.speed = options.speed;\r\n    this.hasHyperdrive = options.hasHyperdrive;\r\n  }\r\n\r\n  getSpeed() {\r\n    return this.speed;\r\n  }\r\n}\r\n\r\nvar TieFighter = new Ship({\r\n  speed: 1200,\r\n  hasHyperdrive: false\r\n});\r\n\r\nconsole.log(TieFighter.getSpeed()); //1050
\r\n\r\n

W tym przypadku, nie widzimy już słowa kluczowego function w metodach. Wystarczy tylko nazwa, argumenty w okrągłym nawiasie i para nawiasów klamrowych. Nasz obiekt zwraca funkcją getSpeed jedną z wartości. Nowe instancje tworzymy za pomocą słowa kluczowego new, a funkcja constructor wywoływana jest automatycznie przy tworzeniu nowej instancji klasy.

\r\n\r\n

Stwórzmy teraz kolejną klasę StarShip, która będzie dziedziczyła z klasy Ship:

\r\n\r\n
 \r\nclass StarShip extends Ship {\r\n\tgetSpeed() {\r\n\t\tvar speed = super.getSpeed();\r\n\t\tconsole.log(speed, ", but Hyperdrive allows entering hyperspace");\r\n\t}\r\n}\r\n\r\nvar FalconMillenium = new StarShip({\r\n  speed: 1050,\r\n  hasHyperdrive: true\r\n});\r\n\r\nFalconMillenium.getSpeed(); //"1050, but Hyperdrive allows entering hyperspace"
\r\n\r\n

extends oznacza, że klasa StarShip dziedziczy wszystko z co klasa Ship posiada. Jednak w naszym kodzie skorzystaliśmy z polimorfizmu, który w ES6 także ma uproszczoną składnię.

\r\n\r\n

# Na czym polega polimorfizm?

\r\n\r\n

Polimorfizm umożliwia różne zachowanie tych samych metod. Jeśli w obiekcie nadpiszemy funkcję o tej samej nazwie, to pojawi się w łańcuchu prototypów jako pierwsza i właśnie ona się wykona.

\r\n

W powyższym kodzie użyliśmy słowa kluczowego super, który pozwala na wywołanie funkcji klasy, z której dany obiekt dziedziczy. Dzięki temu możemy przypisać wartość do zmiennej i wyświetlić ją w inny sposób.

2017-04-02 00:00:00 es61-czy-javascript-jest-jezykiem-zorientowanym-obiektowo cjfsgdao0000fi3um8hz4dspc 2017-04-02 00:00:00 2017-04-02 00:00:00 cj147itc000cri3um2icvd53k ES6#2 Var, Let, Const - zasieg zmiennych w JS http://www.idaszak.com/article/2017/04/05/es6-2-var-let-const

\r\n\r\n

W poprzednim poście opisałem jak wygląda obiektowość, jakie są jej problemy oraz przedstawiłem jak jest to rozwiązane w ES6. Tym razem pokażę jakie utrudnienia możemy napotkać w Javascript zajmując się zasięgiem zmiennych. Wrócimy krótko do zagadnienia jakim jest strict mode oraz IIFE, zainteresujemy się zmiennymi globalnymi oraz dowiemy się jak let oraz const zastępuje var. Zaczynajmy!

\r\n

\r\n\r\n

# Zasięg zmiennych i funkcji w Javascript

\r\n

Na początku powinniśmy wyjaśnić sobie jak działa zasięg funkcji oraz zmiennych. Czy zmienna zadeklarowana poprzez var jest dostępna poza tą funkcją?

\r\n\r\n
 \r\nfunction drive(a){\r\n  var b = 2;\r\n  \r\n  function start(){\r\n    //...\r\n  }\r\n  var c = 3;\r\n}\r\nstart(); // błąd\r\nconsole.log(a); //błąd\r\nconsole.log(b); //błąd\r\nconsole.log(c); //błąd
\r\n\r\n

W powyższym przykładzie stworzyliśmy funkcję drive i zagnieżdżoną funkcję start. W funkcjach zasięg zmiennych i funkcji zagnieżdżonych zamyka się na najbliższej zewnętrznej funkcji. To właśnie dlatego wywołując wewnętrzną funkcję poza funkcją drive otrzymaliśmy błąd, który mówi że taka funkcja nie istnieje. To samo tyczy się zmiennych, które są zadeklarowane wewnątrz tej funkcji.

\r\n

Spróbujmy teraz troszkę zmodyfikować nasz kod. Sprawdzimy teraz jak to jest ze zmiennymi globalnymi.

\r\n\r\n
 \r\nvar z = 100;\r\nfunction drive(){\r\n  \r\n  function start(){\r\n    \r\n    function engineStart(){\r\n      console.log(z);\r\n    }\r\n    engineStart();\r\n  }\r\n  start();\r\n}\r\ndrive();//100
\r\n\r\n

W powyższym kodzie mamy podwójnie zagnieżdżoną funkcję. Wewnątrz drive, funkcja engineStart poszukuje zmiennej z, której nie znajduje w swoim zasięgu zmiennych, dlatego szuka jej o jeden stopień wyżej, czyli w funkcji start. Nie ma tam tej zmiennej, więc przechodzi później do funkcji drive. Tam też jej nie znajduje, więc udaje się do zasięgu globalnego i wypisuje tą zmienną. W przypadku, którym mielibyśmy tą zmienną zadeklarowaną jako globalną i drugą, o takiej samej nazwie wewnątrz funkcji, engineStart wypisałaby pierwszą na którą natrafi.

\r\n

Czy jest to pożądane zachowanie, czy raczej niebezpieczny efekt uboczny? Bez takiego mechanizmu programowanie w Javascript byłoby niesamowicie utrudnione, jednak musimy bardzo uważać, żeby nie sprawiło to nieoczekiwanych kłopotów. Spójrzmy na przykład:

\r\n\r\n
 \r\nfor (var i = 0; i < 5; i++){\r\n    console.log(i);\r\n}\r\nconsole.log('na koniec pętli:', i);
\r\n\r\n

Deklarujemy zmienną i w bloku pętli for, więc zakładamy, że na zewnątrz tego bloku nie będzie dostępna. Niestety wynik tego kodu jest dosyć nieoczekiwany:

\r\n\r\n
 \r\n0\r\n1\r\n2\r\n3\r\n4\r\n"na koniec pętli:5"
\r\n\r\n

Dlaczego jest to złe? Dobrą praktyką pisania kodu jest ukrywanie kodu w funkcjach i tworzenie minimalnej ilości zmiennych. W takim przypadku musielibyśmy tworzyć inną zmienną do każdej pętli. Co spowodowało taki wynik? Javascript ma tylko jeden mechanizm zasięgu i są to funkcje. A więc jak możemy naprawić nasz kod?

\r\n

# IIFE, strict mode i hoisting

\r\n

Na temat IIFE oraz strict mode pisałem już w innym poście, przy okazji opisywania dobrych praktyk w AngularJS
http://www.idaszak.com/article/2017/03/23/daj-sie-poznac-2-projekt-konkursowy-mistrzmakro dlatego pominę wstępne tłumaczenie.

\r\n

Użyjmy IIFE do stworzenia zasięgu funkcji, który nie pozwoli naszej zmiennej i stać się zmienną globalną:

\r\n\r\n
 \r\n(function(){\r\n  for (var i = 0; i < 5; i++){\r\n      console.log(i);\r\n  }\r\n})();\r\nconsole.log('na koniec pętli:', i); //błąd
\r\n\r\n

Dzięki temu, console.log(i); wyrzuca błąd, że nie ma takiej zmiennej.

\r\n

A co jeśli w przypadku IIFE zapomnimy zadeklarować zmiennej słowem kluczowym var?

\r\n\r\n
 \r\n(function(){\r\n  for (i = 0; i < 5; i++){\r\n      console.log(i);\r\n  }\r\n})();\r\nconsole.log('na koniec pętli:', i); //"na koniec pętli:5"
\r\n\r\n

Zmienna została wyciągnięta do zasięgu globalnego, przez co jest znowu dostępna poza blokiem funkcji!

\r\n

Dlaczego tak się wydarzyło? Odpowiedzialny jest za to hoisting, czyli wyszukiwanie i wyciąganie deklaracji zmiennych do góry przed kompilacją kodu. Żeby to zobrazować, spójrzmy na fragment kodu:

\r\n\r\n
 \r\nfunction drive(){\r\n  x=7;\r\n  console.log(x);//7\r\n  var x;\r\n}\r\ndrive();\r\nconsole.log(x);//błąd
\r\n\r\n

Zmienna została normalnie zadeklarowana i nie jest dostępna poza zasięgiem tej funkcji.

\r\n

Jak uniknąć przypadkowego tworzenia zmiennych globalnych? Tutaj przychodzi z pomocą tryb strict mode:

\r\n\r\n
 \r\n"use strict";\r\n(function(){\r\n  for (i = 0; i < 5; i++){\r\n      console.log(i);\r\n  }\r\n})();\r\nconsole.log('na koniec pętli:', i); //błąd
\r\n\r\n

Nie pozwoli nam on stworzyć przypadkowej zmiennej globalnej.

\r\n

Jednak wadą tych rozwiązań jest komplikowanie kodu. Czy nie da się tego napisać prościej? Z pomocą nadchodzi ES6.

\r\n

# ES6 let i const

\r\n

W ES6 poza słowem kluczowym var do deklarowania zmiennych służy także let, które pozwala na deklarowanie zmiennej dostępnej w obecnym zasięgu i zagnieżdżonych funkcjach. Nasz kod wygląda w taki sposób przy użyciu let:

\r\n\r\n
 \r\nfor (let i = 0; i < 5; i++){\r\n    console.log(i);\r\n}\r\nconsole.log('na koniec pętli:', i);//błąd
\r\n\r\n

Kolejną rzeczą, która została dodana, jest znane już z innych języków programowania const. Zmienna zadeklarowana w taki sposób nie może zmienić swojej wartości później w programie.

\r\n\r\n
 \r\nconst a = 1;\r\na = 2; //błąd
\r\n\r\n

Używanie const zapobiega przypadkowej zmianie wartości.

\r\n

Let umożliwia stworzenie innego zasięgu zmiennych, niż tylko zasięgu funkcji, a const pozwala stworzyć stałą zamiast zmiennej. To bardzo przydatne mechanizmy, dlatego powinniśmy z nich korzystać na codzień.

2017-04-05 00:00:00 es62-var-let-const-zasieg-zmiennych-w-js cjfsgdao0000fi3um8hz4dspc 2017-04-05 00:00:00 2017-04-05 00:00:00 cj19xa80000ddi3um6svdco21 Daj Sie Poznac #4 OOP. Model w AngularJS http://www.idaszak.com/article/2017/04/09/daj-sie-poznac-4-projekt-konkursowy-mistrzmakro
\t\r\n\r\n\r\n
\r\n


\r\n

W poprzednich częściach projektu Mistrz Makro, pisanego w AngularJS stworzyliśmy wstępny szablon projektu, wyjaśniliśmy jak korzystać z Gita, zrozumieliśmy czym jest i do czego służy JSON, dowiedzieliśmy się co to MVC i zaimplementowaliśmy kontroler oraz serwis, które pozwoliły wyświetlić nam odebrane z JSON dane w konsoli. W dzisiejszej, czwartej już części, skupimy się na tym żeby umieścić nasze dane w modelu, żeby w kolejnej części dyrektywa tworząca quiz mogła z nich swobodnie korzystać. Zaczynajmy!

\r\n

\r\n\r\nJeśli pobrałeś już moje repozytorium z Githuba, co opisałem w poprzednim poście to możesz teraz przeskoczyć do kolejnego commita, który pokaże Ci kod z tego posta:\r\n\r\n
$ git checkout 1b3cb2d8eee6994d93ad28fd3f6ce037b0b6a771
\r\n\r\n

# Tworzymy model dla makroskładników

\r\n

AngularJS to framework MVC, czyli Model, Widok oraz Kontroler. Zajmiemy się tym razem Modelem, czyli przechowywaniem danych aplikacji. Na początek, musimy stworzyć serwis, w którym będzie zapisany pojedyńczy produkt:

\r\n\r\n
 \r\n(function() {\r\n  'use strict';\r\n\r\n  angular\r\n    .module('quizProject')\r\n    .service('Macro', MacroModel);\r\n\r\n  function MacroModel() {\r\n\r\n    var Macro = function(id, name, kcal, protein, carb, fat, img) {\r\n      this.id = id || 0;\r\n      this.name = "";\r\n      this.kcal = kcal || 0;\r\n      this.protein = protein || 0;\r\n      this.carb = carb || 0;\r\n      this.fat = fat || 0;\r\n      this.img = img || "";\r\n    }\r\n\r\n    Macro.prototype = {\r\n      setId: function(id) {\r\n        this.id = id;\r\n      },\r\n\r\n      setName: function(name) {\r\n        this.name = name;\r\n      },\r\n\r\n      setKcal: function(kcal) {\r\n        this.kcal = kcal;\r\n      },\r\n\r\n      setProtein: function(protein) {\r\n        this.protein = protein;\r\n      },\r\n\r\n      setCarb: function(carb) {\r\n        this.carb = carb;\r\n      },\r\n\r\n      setFat: function(fat) {\r\n        this.fat = fat;\r\n      },\r\n\r\n      setImg: function(img) {\r\n        this.img = img;\r\n      },\r\n  \r\n    };\r\n    return Macro;\r\n  }\r\n})();
\r\n\r\n

Na wzór klasy tworzymy funkcję prototypową, która posiada takie parametry jak id, name, kcal, protein, carb, fat, img i nadaje im wartości domyślne:

\r\n\r\n
 \r\nvar Macro = function(id, name, kcal, protein, carb, fat, img) {\r\n  this.id = id || 0;\r\n  this.name = "";\r\n  this.kcal = kcal || 0;\r\n  this.protein = protein || 0;\r\n  this.carb = carb || 0;\r\n  this.fat = fat || 0;\r\n  this.img = img || "";\r\n}
\r\n\r\n

Wszystkie te parametry odpowiadają tym z naszego pliku answers.json:

\r\n\r\n
 \r\n{\r\n"questions":[\r\n    {\r\n      "id": "1",\r\n      "name": "bułka",\r\n      "kcal": 600,\r\n      "protein": 30,\r\n      "carb": 60,\r\n      "fat": 6,\r\n      "img": "img1.jpg"\r\n    },\r\n    {\r\n      "id": "2",\r\n      "name": "pizza",\r\n      "kcal": 900,\r\n      "protein": 20,\r\n      "carb": 80,\r\n      "fat": 20,\r\n      "img": "img2.jpg"\r\n    }\r\n  ]\r\n}
\r\n\r\n

Do prototypu tej funkcji, dodajemy funkcje, które będą dostępne w każdym utworzonym obiekcie. Dzięki nim, będziemy mogli przypisać nasze dane pobrane z serwisu do odpowiednich parametrów. Rozbiliśmy to na kilka pomniejszych funkcji, które pobrany parametr przypisują do zmiennej aktualnego obiektu, co wskazuje this.:

\r\n\r\n
 \r\nMacro.prototype = {\r\n  setId: function(id) {\r\n    this.id = id;\r\n  },\r\n\r\n  setName: function(name) {\r\n    this.name = name;\r\n  },\r\n\r\n  setKcal: function(kcal) {\r\n    this.kcal = kcal;\r\n  },\r\n\r\n  setProtein: function(protein) {\r\n    this.protein = protein;\r\n  },\r\n\r\n  setCarb: function(carb) {\r\n    this.carb = carb;\r\n  },\r\n\r\n  setFat: function(fat) {\r\n    this.fat = fat;\r\n  },\r\n\r\n  setImg: function(img) {\r\n    this.img = img;\r\n  },\r\n\r\n};
\r\n\r\n

# Tworzymy model dla produktów

\r\n

Kolejnym krokiem będzie stworzenie drugiego modelu, który będzie pełnił rolę listy obiektów z modelu makroskładników.

\r\n\r\n
 \r\n(function() {\r\n  'use strict';\r\n\r\n  angular\r\n    .module('quizProject')\r\n    .service('ProductModel', ProductModel);\r\n\r\n  function ProductModel() {\r\n    var _list = [];\r\n\r\n    return {\r\n      addItem: function(model) {\r\n        return _list.push(model);\r\n      },\r\n\r\n      listOfItems: function(){\r\n        return _list;\r\n      },\r\n\r\n    }\r\n  }\r\n})();
\r\n\r\n

Serwis, który widzimy posiada prywatną tablicę, na której manipulacje możemy wykonywać za pomocą utworzonych metod. W tym przypadku jest to addItem oraz listOfItems. W pierwszym przypadku, addItem pozwala dodać obiekt stworzony przez MacroModel do tablicy. listOfItems zwraca nam całą listę aktualnych obiektów.

\r\n

# Kontroler czyli łączymy modele oraz serwis

\r\n

Nasz kontroler z poprzedniego posta po drobnych modyfikacjach, wygląda w taki sposób:

\r\n\r\n
 \r\n(function() {\r\n  'use strict';\r\n\r\n  angular\r\n    .module('quizProject')\r\n    .controller('MainController', MainController);\r\n\r\n  function MainController($scope, GetJson, $http, Macro, ProductModel) {\r\n\r\n    var promiseAnswers = GetJson.getData();\r\n\r\n    var Model = new Macro();\r\n    $scope.Model = Model;\r\n        \r\n    promiseAnswers.then(function(data){\r\n      data.questions.forEach(function(answer) {\r\n        $scope.Model.setId(answer.id);\r\n        $scope.Model.setName(answer.name);\r\n        $scope.Model.setKcal(answer.kcal);\r\n        $scope.Model.setProtein(answer.protein);\r\n        $scope.Model.setCarb(answer.carb);\r\n        $scope.Model.setFat(answer.fat);\r\n        $scope.Model.setImg(answer.img);\r\n\r\n        ProductModel.addItem($scope.Model);\r\n        console.log(ProductModel.listOfItems());\r\n        $scope.Model = new Macro();\r\n      });\r\n    });\r\n\r\n  };\r\n})();
\r\n\r\n

Na początku zaczynamy od wstrzykiwania zależności, które opisywałem w poprzedniej cześci. Dzięki temu zabiegowi, będziemy mogli odwoływać się do naszych modeli z poziomu kontrolera.

\r\n\r\n
 \r\nfunction MainController($scope, GetJson, $http, Macro, ProductModel) {
\r\n\r\n

Dodaliśmy Macro oraz ProductModel, czyli nazwy serwisów, dzięki czemu możemy teraz wykonać operację new Macro();:

\r\n\r\n
 \r\n  var Model = new Macro();\r\n  $scope.Model = Model;
\r\n\r\n

W ten sposób tworzymy nowy obiekt dla makroskładników jednego z produktów i nazywamy go Model.

\r\n\r\n
 \r\npromiseAnswers.then(function(data){\r\n  data.questions.forEach(function(answer) {\r\n    $scope.Model.setId(answer.id);\r\n    $scope.Model.setName(answer.name);\r\n    $scope.Model.setKcal(answer.kcal);\r\n    $scope.Model.setProtein(answer.protein);\r\n    $scope.Model.setCarb(answer.carb);\r\n    $scope.Model.setFat(answer.fat);\r\n    $scope.Model.setImg(answer.img);\r\n\r\n    ProductModel.addItem($scope.Model);\r\n    console.log(ProductModel.listOfItems());\r\n    $scope.Model = new Macro();\r\n  });\r\n});
\r\n\r\n

Nasza funkcja z poprzedniego posta, która pozwoliła wyświetlić promise, wysłany z serwisu GetJson jest teraz zmieniona w taki sposób, żeby odebrane dane dodawać do obiektu model. Odwołujemy się do Modelu i jego metod takich jak setId.

\r\n\r\n
 \r\n  ProductModel.addItem($scope.Model);\r\n  console.log(ProductModel.listOfItems());\r\n  $scope.Model = new Macro();
\r\n\r\n

Następnie dodajemy model do tablicy obiektów znajdującej się w ProductModel za pomocą metody addItem. Wyświetlamy całość listy obiektów i ponownie tworzymy nowy obiekt, który wypełnimy kolejnymi danymi.

\r\n

widok konsoli

\r\n

W taki sposób powinna wyglądać konsola po uruchomieniu aplikacji. Wyświetlona jest tablica zawierająca dwa obiekty, których każdy parametr odpowiada tym z answers.json.

2017-04-09 00:00:00 daj-sie-poznac-4-oop-model-w-angularjs cjfsgdao0000fi3um8hz4dspc 2017-04-09 00:00:00 2017-04-09 00:00:00 -cj1h2hhc000e9i3um3ec91mle ES6#3 Destrukturyzacja czyli nowe podejscie do tablic i obiektow http://www.idaszak.com/article/2017/04/14/es6-3-destrukturyzacja-nowe-podejscie-do-tablic-i-obiektow

\r\n\r\n

W serii poświęconej standardowi ES6 języka Javascript opisałem już pojawiające się tam słowo kluczowe class, pokazałem przykłady zastosowania let oraz const. Tym razem zajmiemy się destrukturyzacją i różnicami między operatorem spread i rest. Umożliwiają one użycie nowego sposobu obsługiwania tablic oraz obiektów, który jest szybszy, łatwiejszy oraz precyzyjniejszy. Możemy dzięki nim wydobywać najróżniejsze, nawet zagnieżdżone wartości, przy użyciu skróconego zapisu. Zaczynajmy!

\r\n

\r\n\r\n

Jeśli nie czytałeś jeszcze wcześniejszych części, to rzuć okiem na http://www.idaszak.com/article/2017/04/05/es6-2-var-let-const,
ponieważ w poniższym kodzie będziemy korzystać z let oraz const. Zapraszam także do zapoznania się z klasami w ES6:
http://www.idaszak.com/article/2017/04/02/czy-javascript-jest-obiektowy

\r\n\r\n

# Destrukturyzacja tablic

\r\n

Standardowym podejsciem do obsługi tablic, jest odwoływanie się do poszczególnych jej elementów za pomocą operatora []:

\r\n\r\n
 \r\nvar array = ["raz","dwa","trzy"];\r\nvar first = array[0]; \r\nvar second = array[1]; \r\nvar third = array[2]; \r\nconsole.log(first, second, third); //"raz" "dwa" "trzy"
\r\n\r\n

Dzięki destrukturyzacji, możemy zapisać to w dużo prostszy i bardziej zwięzły sposób:

\r\n\r\n
 \r\nconst [first, second, third] = array;\r\nconsole.log(first, second, third); //"raz", "dwa", "trzy"
\r\n\r\n

Nie musimy przypisywać do zmiennej każdego z elementów, możemy je pomijać:

\r\n\r\n
 \r\nconst [x, ,z] = array;\r\nconsole.log(x, z); //"raz" "trzy"\r\nconst [,y] = array;\r\nconsole.log(y); //"dwa"
\r\n\r\n

Jak wygląda prosty przykład zastosowania destrukturyzacji tablicy? Możemy bez wykorzystywania zmiennej tymczasowej zamienić wartości dwóch zmiennych:

\r\n\r\n
 \r\nvar a = 1, b = 2;\r\n[b, a] = [a, b];\r\nconsole.log(a, b);//2 1
\r\n\r\n

Kolejną funkcjonalnością ES6 w odwoływaniu się do elementów tablicy jest operator spread ..., dzięki któremu możemy dotrzeć do pozostałych elementów, poza wybranymi:

\r\n\r\n
 \r\nconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\r\nconst [a, b, c, d, ...others] = arr;\r\nconsole.log(a); //1\r\nconsole.log(others) //[5, 6, 7, 8, 9, 10]
\r\n\r\n

Możemy wykonać także kolejną dekonstrukcję wybranego elementu:

\r\n\r\n
 \r\nconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\r\nconst [x, y, ...[z, , ...rest] = arr;\r\nconsole.log(rest); //[5, 6, 7, 8, 9, 10]\r\nconsole.log(z); //3
\r\n\r\n

Zastosowanie operatora spread? ES5 umożliwił korzystanie z funkcji .concat dla tablicy, co wygląda w taki sposób:

\r\n\r\n
 \r\nvar boys = ["Kyle", "Douglas", "Matt"];\r\nvar girls = ["Rebecca","Kate"];\r\nvar people = boys.concat(girls);\r\nconsole.log(people); //["Kyle", "Douglas", "Matt", "Rebecca", "Kate"]
\r\n\r\n

W ES6 możemy skorzystać z operatora spread, co wygląda znacznie czytelniej:

\r\n\r\n
 \r\nlet people = [...boys, ...girls];\r\nconsole.log(people); //["Kyle", "Douglas", "Matt", "Rebecca", "Kate"]
\r\n\r\n

# Destrukturyzacja obiektów

\r\n

Destrukturyzacja obiektów jest bardzo podobna do destrukturyzacji tablic, z tą różnicą, że korzystamy z nazwy kluczy obiektu:

\r\n\r\n
 \r\nconst object = {a: "1", b: "2", c: "3"};\r\nconst {a, c} = object;\r\nconsole.log(a, c);//1 3
\r\n\r\n

Możemy też stworzyć klucz, dzięki któremu dodamy kolejną wartość do tablicy:

\r\n\r\n
 \r\nconst key = "d";\r\nobject[key] = "4";\r\nconsole.log(object);// {a: "1", b: "2", c: "3", d: "4"}
\r\n\r\n

Analogicznie do destrukturyzacji tablic, w obiektach możemy odwoływać się do zagnieżdżonych wartości:

\r\n\r\n
 \r\nconst obj = {x: {y: "5", z: "6"}};\r\nconst {x: {z: value}} = obj;\r\nconsole.log(value);//6
\r\n\r\n

Możemy także korzystać z operatora spread ...:

\r\n\r\n
 \r\nconst object = {a: "1", b: "2", c: "3"};\r\nconst {a, ...others} = object;\r\nconsole.log(others); //{b: "2", c: "3"}
\r\n\r\n

# Spread a Rest?

\r\n

Poznaliśmy już operator spread, który umożliwia nam rozszerzenie zmiennej na wiele elementów, która działa zarówno na tablicach jak i funkcjach. Jednak w ES6 jest jeszcze jeden operator składający się z trzech kropek.

\r\n

rest to operator o jakby przeciwstawnym działaniu, dlatego że pozwala na zamknięcie dowolnej ilości argumentów funkcji w jedną tablicę.

\r\n

Żeby dowiedzieć się, jak działa operator rest ... i jakie ma zastosowanie, stwórzmy sobie funkcję, która pozwoli na dodanie wszystkich argumentów przez nią przekazanych.

\r\n\r\n
 \r\nfunction add() {\r\n  return arguments.reduce(function(previousValue, currentValue) {\r\n      return previousValue + currentValue;\r\n    });\r\n}\r\nadd(1, 2, 3); // TypeError: arguments.reduce is not a function
\r\n\r\n

arguments to tablica, zawierająca wszystkie przekazane argumenty. Wykonujemy na niej funkcję reduce, która skraca nam naszą tablicę zgodnie z wzorem w podanej jako argument funkcji, czyli w tym przypadku dodaje każdy kolejny element.

\r\n

Niestety, tak napisany kod nie działa, jednak można naprawić go funkcją rest ...

\r\n\r\n
 \r\nfunction add(...numbers) {\r\n  return numbers.reduce(function(previousValue, currentValue) {\r\n      return previousValue + currentValue;\r\n    });\r\n}\r\nadd(1, 2, 3); // 6
\r\n\r\n

W tym przypadku dowolna ilość argumentów przekazanych do funkcji może zostać użyta do stworzenia ich sumy.

2017-04-14 00:00:00 es63-destrukturyzacja-czyli-nowe-podejscie-do-tablic-i-obiektow cjfsgdao0000fi3um8hz4dspc 2017-04-14 00:00:00 2017-04-14 00:00:00 -cj1kwdh1c00eqi3umhc7pbv0y Daj Się Poznać #5 Dyrektywa w AngularJS - część 1 https://www.idaszak.com/article/2017/04/16/daj-sie-poznac-5-projekt-konkursowy-mistrzmakro
\t\r\n\r\n\r\n
\r\n


\r\n

W poprzednich częściach projektu Mistrz Makro udało nam sie stworzyć kontroler oraz serwis AngularJS, które pozwoliły naszej aplikacji zapisywać i wyświetlać dane pobrane z pliku JSON. W dzisiejszej części, bardzo krótko opiszę jak planuję stworzyć dyrektywę i jak miałby działać główny mechanizm aplikacji. Utworzymy dyrektywę, która wyświetli nam wszystkie potrzebne informacje z modeli. Zajmiemy się głównie plikiem widoku, który nasza dyrektywa utworzy. Dopiero w kolejnej części sprawimy żeby dyrektywa zadziałała. Zaczynajmy!

\r\n\r\n\r\nJeśli pobrałeś już moje repozytorium z Githuba, co opisałem w poprzednim poście to możesz teraz przeskoczyć do kolejnego commita, który pokaże Ci kod z tego posta:\r\n\r\n
$ git checkout b57974c18ad12830b4a67d2bad1c4ba58891f6e3
\r\n\r\n

# Nowa metoda modelu ProductModel

\r\n

Musimy cofnąć się do poprzedniej części projektu Mistrz Makro, gdzie tworzyliśmy modele dla naszej aplikacji, ponieważ będziemy musieli utworzyć nową metodę. Pozwoli nam ona na wyświetlenie konkretnego produktu, czy dania za pomocą przekazanego id. Plik product.model.js:

\r\n\r\n
 \r\ngetQuestion: function(id) {\r\n  if(id < _list.length) {\r\n    return _list[id];\r\n  } else {\r\n    return false;\r\n  }\r\n}
\r\n\r\n

Jeśli podane przy wywołaniu funkcji id jest mniejsze niż ilość elementów tablicy obiektów _list, to zwraca konkretne makroskładniki. Możemy teraz wywołać tą funkcję przykładowo w kontrolerze:

\r\n\r\n
 \r\nconsole.log(ProductModel.getQuestion(0));
\r\n\r\n

Podany kod wyświetli nam element o indeksie 0 pobrany z pliku JSON.

\r\n\r\n

# Tworzymy widok dyrektywy

\r\n

Stworzymy teraz strukturę pliku HTML, który zostanie wstrzyknięty do naszego widoku poprzez dyrektywę. Nie będzie jeszcze gotowa do użycia, ponieważ potrzebujemy jeszcze kodu Javascript, ale tym zajmiemy się w części kolejnej.

\r\n\r\n
 \r\n<div class="container" ng-show="inProgress">\r\n  <div class="row">\r\n    <div class="col-md-12">\r\n      <div ng-show="!quizEnd">\r\n        <img ng-src="/app/images/" alt="">\r\n        <h2></h2>\r\n        <p>Kcal:</p><input type="number" name="macro1">\r\n        <p>Białko:</p><input type="number" name="macro2">\r\n        <p>Węglowodany:</p><input type="number" name="macro3">\r\n        <p>Tłuszcz:</p><input type="number" name="macro4">\r\n        <button ng-click="check()" ng-show="">Submit</button>\r\n      \r\n        <div ng-show="">\r\n          <button ng-click="next()">Next</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div ng-show="quizEnd">\r\n        <button ng-click="reset()">Play again</button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class="container" ng-show="!inProgress">\r\n  <div class="row">\r\n    <button ng-click="start()">Start</button>\r\n  </div>\r\n</div>
\r\n\r\n

Powyższy kod zapisujemy jako macro.directive.html, najlepiej w podfolderze html folderu directive.

\r\n

Korzystamy tutaj z bootstrapa, a będąc dokładniejszym - z jego grida, który pozwoli na szybkie pozycjonowanie elementów quizu. Jest to jak na razie wstępny zarys, więc jeszcze możemy coś zmieniać w tym kodzie.

\r\n\r\n
 \r\n<div class="container">\r\n  <div class="row">\r\n    <div class="col-md-12">\r\n    </div>\r\n  </div>\r\n</div>
\r\n\r\n

Ta część kodu pozwala na stworzenie Bootstrapowego kontenera, wydzielenia pierwszego rzędu elementów oraz określenia jego szerokości na 12 linii z 12 możliwych.

\r\n\r\n
 \r\n<div class="container" ng-show="inProgress">
\r\n\r\n

Parametr ng-show określa czy dany kontener ma być wyświetlony czy ukryty. Jest to zależne od zmiennej inProgress, która określi czy quiz już się zaczął, czy jeszcze jesteśmy na ekranie startowym aplikacji.

\r\n\r\n
 \r\n<div ng-show="!quizEnd">\r\n  <img ng-src="/app/images/" alt="">\r\n  <h2></h2>\r\n  <p>Kcal:</p><input type="number" name="macro1">\r\n  <p>Białko:</p><input type="number" name="macro2">\r\n  <p>Węglowodany:</p><input type="number" name="macro3">\r\n  <p>Tłuszcz:</p><input type="number" name="macro4">\r\n  <button ng-click="check()" ng-show="">Submit</button>\r\n\r\n  <div ng-show="">\r\n    <button ng-click="next()">Next</button>\r\n  </div>\r\n</div>
\r\n\r\n

W przypadku jeśli quiz nie jest zakończony, co specyfikuje zmienna quizEnd, aplikacja powinna wyświetlić odpowiedni produkt wyświetlając takie elementy jak: img i name. Dla poszczególnych makroskładników będą to pola input, które są typu number, ponieważ użytkownik będzie musiał wstawić tam odpowiednią liczbę. Pola name pozwolą nam zidentyfikować inputy podczas weryfikacji quizu.

\r\n

Po naciśnięciu przycisku Submit zatwierdzimy nasze odpowiedzi, które sprawdzi funkcja check(). Po wysłaniu ukryjemy ten przycisk i sprawimy żeby pojawił się kolejny, który pozwoli na przejście do kolejnego zadania w naszym quizie. Będzie to przycisk Next i jego obecnością będziemy manipulować także za pomocą ng-show.

\r\n\r\n
 \r\n<div class="container" ng-show="!inProgress">\r\n  <div class="row">\r\n    <button ng-click="start()">Start</button>\r\n  </div>\r\n</div>
\r\n\r\n

Na samym dole jest ostatni container, który podczas wykonania quizu pojawi się tylko raz, jako ekran początkowy. Użytkownik po wduszeniu przycisku start uruchomi funkcję start(), dzięki której zmienna inProgress typu boolean zmieni swoją wartość na przeciwną i zmieni wyświetlane kontenery inicjując start quizu.

2017-04-16 16:20:00 daj-sie-poznac-5-dyrektywa-w-angularjs-czesc-1 cjfsgdao0000fi3um8hz4dspc 2017-04-16 16:20:00 2017-04-16 16:20:00 -cj23o3ls000gui3umecgf5ii5 Jak wyciągnąć coś ze studiów? https://www.idaszak.com/article/2017/04/29/jak-wyciagnac-cos-ze-studiow


\r\n

Jesteś studentem? Piszesz właśnie projekt w języku, którego nienawidzisz? A może musisz korzystać z martwej technologii? Denerwuje Cię uczenie się inline cssów? Pisanie stron opartych na tabelkach? Uznałeś już że studia nie dadzą Ci nic więcej poza papierkiem? W takim razie jak wyciągnąć coś ze studiów? Postaram się odpowiedzieć na to w tym krótkim artykule.

\r\n\r\n\r\n

Studenci są grupą społeczną z różnymi przywilejami, którymi między innymi są zniżki na przejazdy transportu miejskiego i kolei. Jednak studenci kierunków informatycznych i nie tylko, mogą się poszczycić kolejnymi względami, a mianowicie są to darmowe licencje programów. Pewnie niektóre z nich bardzo dobrze znacie i może nawet już z nich korzystacie. Postanowiłem jednak wypisać wszystkie te, które przydadzą się programistom i web designerom.

\r\n\r\n

# Microsoft

\r\n
    \r\n\t
    \r\n\t
  • Microsoft Office
    • \r\n\t\tJako studenci możemy otrzymać pakiet Office 365, czyli Microsoft Word, Microsoft Excel oraz Microsoft Powerpoint, całkowicie za darmo, pod warunkiem że nasza uczelnia bierze udział w tym programie. Uzyskaj dostęp: tutaj\r\n\t\r\n\t
  • Microsoft Imagine (Dreamspark)
    • \r\n\t\tPodobnie, jak Office 365, dostęp do DreamSparka otrzymują tylko studenci uczelni biorących udział w programie. Otrzymujemy dzięki temu darmowy system operacyjny Windows 10, 8.1 lub 7. W paczce otrzymujemy również Visual Studio Code, które ostatnio jest bardzo popularnym IDE do Javascriptowych aplikacji. Przede wszystkim otrzymujemy wersję Enterprise Visual Studio 2017, która pozwala programować w wielu językach, oraz wiele innych użytecznych programów. Uzyskaj dostęp: tutaj.
    Co więcej, otrzymujemy także dostęp do Microsoftowej chmury Azure całkowicie za darmo. Więcej na ten temat możemy przeczytać na stronie AleYakTo\r\n
\r\n

# Github Student Pack

\r\n

Żeby otrzymać Github Student Pack, wystarczy posiadać zaświadczenie o studiowaniu, bądź zeskanowaną legitymację studencką i wysłać ją poprzez: link

\r\n

Musimy wybrać indywidualne konto studenckie, uzupełnić dane szkoły, załączyć opisane wyżej skany i wytłumaczyć jak planujemy korzystać z Githuba.

\r\n

Co możemy zyskać z Github students pack?

\r\n
    \r\n\r\n\t\r\n\t
  • Github
    • \r\n\t

    Normalnie prywatne repozytorium kosztuje 7$ miesięcznie, jednak tak długo jak posiadamy status studenta, będziemy mogli tworzyć prywatne repozytoria za darmo, bez limitów!

    \r\n\t\r\n\t
  • Namecheap
    • \r\n\t

    Możemy stworzyć darmową domenę .me na rok oraz otrzymać do niej certyfikat SSL, jednak taki sam certyfikat za darmo oferuje także Cloudflare.

    \r\n\t\r\n\t
  • DigitalOcean
    • \r\n\t

    Darmowy hosting oparty na chmurze - otrzymujemy 50$ do wykorzystania w platformie.

    \r\n\t\r\n\t
  • Bitnami
    • \r\n\t

    Kolejny hosting oparty na chmurze, całkowicie za darmo na rok.

    \r\n\t\r\n\t
  • Flatiron School
    • \r\n\t

    Darmowe miesięczne członkostwo w kursie Web Developmentu, na bootcampie online, warte 149$.

    \r\n\t\r\n\t
  • Thinkful
    • \r\n\t

    Kurs HTML, CSS oraz Javascript, dostępny za darmo przez jeden miesiąc.

    \r\n\t\r\n\t
  • HackHands
    • \r\n\t

    Pomoc programistyczna dostępna 24/7 - otrzymujemy 25$ do wykorzystania.

    \r\n\t

    Znajduje się tam także kilka innych rzeczy, jednak dalej odsyłam do strony Github Student Pack

    \r\n
\r\n

# Jetbrains Tools

\r\n
\r\n\r\n\r\n\r\n\r\n
\r\n


\r\n

Jeśli programujesz w Javie, PHP, Ruby, Pyhtonie, Javascript, Objective-C lub .NET, na pewno znajdziesz tutaj dla siebie ciekawe środowisko całkowicie za darmo. Uzyskaj dostęp: tutaj.

\r\n

Zachęcam szczególnie do przetestowania WebStorma, który jest popularnym IDE do Javascript

\r\n

# Axure RP Pro

\r\n

\r\n

Możemy otrzymać darmową licencję programu, służącego do prototypowania stron internetowych, dostępnego zarówno dla Mac jak i PC. Uzyskaj dostęp: tutaj

\r\n

# Atlassian Jira

\r\n

\r\n

Jako studenci możemy otrzymać darmowy dostęp do narzędzia JIRA, które pozwala na zarządzanie projektem Agile. Uzyskaj dostęp: tutaj

2017-04-29 19:36:00 jak-wyciagnac-cos-ze-studiow cjfsgdao0000fi3um8hz4dspc 2017-04-29 19:36:00 2017-04-29 19:36:00 -cj29j074000hii3um81iba02o Daj Się Poznać #5 Dyrektywa w AngularJS - część 2 https://www.idaszak.com/article/2017/05/04/daj-sie-poznac-6-projekt-konkursowy-mistrzmakro
\t\r\n\r\n\r\n
\r\n


\r\n

W poprzednich częściach tworzyliśmy aplikację AngularJS Mistrz Makro, która jest quizem, pozwalającym na zgadywanie makroskładników produktu przedstawionego na zdjęciu. Udało się nam stworzyć modele, pozwalające na zarządzanie danymi aplikacji. Odebraliśmy dane z pliku JSON i wyświetliliśmy je w konsoli. W poprzedniej części zaczęliśmy budować główny mechanizm napędzający aplikacje, czyli dyrektywę. Stworzyliśmy jej część składającą się z pliku HTML. Tym razem znów zajmiemy się dyrektywą i utworzymy plik Javascript, który sprawi, że nasz quiz zacznie działać tak jak powinien. Zaczynajmy!

\r\n\r\n\r\nJeśli pobrałeś już moje repozytorium z Githuba, co opisałem w poprzednim poście to możesz teraz przeskoczyć do kolejnego commita, który pokaże Ci kod z tego posta:\r\n\r\n
$ git checkout 28c29bb2082ce088dc554c5c73cd01c02163d8c9
\r\n\r\n

# Zmiany w pliku HTML dyrektywy

\r\n

W stosunku do poprzedniego postu, w pliku HTML dyrektywy dodaliśmy tylko paragrafy, które wyświetlają wyniki, oraz dodatkowy stan inProgress. Tak prezentuje się cały kod:

\r\n\r\n
 \r\n<div class="container" ng-show="inProgress">\r\n  <div class="row">\r\n    <div class="col-md-12">\r\n\r\n      <div ng-show="!quizEnd">\r\n        <h2></h2>\r\n        <img ng-src="/app/assets/">\r\n        <p>Kcal:</p><input type="number" ng-model="macro1">\r\n        <p ng-show="!answerMode"></p>\r\n        <p>Białko:</p><input type="number" ng-model="macro2">\r\n        <p ng-show="!answerMode"></p>\r\n        <p>Węglowodany:</p><input type="number" ng-model="macro3">\r\n        <p ng-show="!answerMode"></p>\r\n        <p>Tłuszcz:</p><input type="number" ng-model="macro4">\r\n        <p ng-show="!answerMode"></p>\r\n        <button ng-click="check()" ng-show="answerMode">Submit</button>\r\n      \r\n        <div ng-show="!answerMode">\r\n          <button ng-click="nextQuestion()">Next</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div ng-show="quizEnd">\r\n        <button ng-click="reset()">Play again</button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class="container" ng-show="!inProgress">\r\n  <div class="row">\r\n    <button ng-click="start()">Start</button>\r\n  </div>\r\n</div>
\r\n\r\n

Po każdym inpucie dodaliśmy paragraf, który wyświetla się jeśli nie jesteśmy w stanie answerMode, czyli w momencie kiedy wpisaliśmy wartość do inputów i wdusiliśmy przycisk sprawdzający. Wyświetlimy tam wyniki danego pytania.

\r\n\r\n
<p ng-show="!answerMode"></p>
\r\n\r\n

Stan inProgress znajduje się w dwóch głównych containerach i pozwala na wyświetlenie quizu dopiero po wduszeniu przycisku start.

\r\n\r\n

# Tworzymy plik JS Dyrektywy

\r\n

Na początku, dyrektywę tworzymy tak samo jak każdy plik AngularJS, czyli wstawiamy IIFE, podłączamy nasz główny moduł i tworzymy dyrektywę, którą nazwałem "quiz".

\r\n\r\n
(function() {\r\n  'use strict';\r\n\r\n  angular\r\n    .module('quizProject')\r\n    .directive('quiz', quiz);
\r\n\r\n

Następnie tworzymy funkcje zgodnie z dokumentacją dyrektywy:

\r\n\r\n
function quiz(ProductModel) {\r\n  return {\r\n    restrict: 'AE',\r\n    scope: {},\r\n    templateUrl: 'app/main/directive/html/macro.directive.html',\r\n    link: function(scope, elem, attrs) {
\r\n\r\n

Restrict pozwala na ograniczenie w jaki sposób będziemy mogli wywoływać naszą dyrektywę. Do wyboru mamy cztery sposoby - A, C, E, M, jednak domyślnie jest to AE i właśnie tak będzie w naszej aplikacji. Jednak czym się różnią i w jaki sposób ją wywołują?

\r\n\r\n
A = <div quiz></div>          <!-- jako Atrybut-->\r\nC = <div class="quiz"></div>  <!-- jako Klasa -->\r\nE = <quiz></quiz>             <!-- jako Element-->\r\nM = <!--directive:quiz -->    <!--  jako Komentarz-->
\r\n\r\n

Scope pozwala na stworzenie wyizolowanego zasięgu zmiennych i pobranie w razie potrzeby wartości przy wywołaniu dyrektywy. Nam jednak nie będzie to potrzebne. Przykład takiego użycia:

\r\n\r\n
<div quiz name="ABC"></div>
\r\n\r\n
scope: {\r\n  MyQuestionName: '@name'\r\n},
\r\n\r\n

TemplateUrl przechowuje link do pliku HTML dyrektywy. Link jest funkcją, która wykonuje się przy wywołaniu dyrektywy.

\r\n

Teraz możemy wewnątrz funkcji link tworzyć funkcje.

\r\n\r\n

Pierwszą funkcja, którą stworzymy będzie start, która wywołuje się po wduszeniu przycisku "start", po włączeniu aplikacji. Ustawia wszystkie stany, tak, aby mogły się pojawić kolejne elementy w widoku.

\r\n\r\n
scope.start = function() {\r\n  scope.id = 0;\r\n  scope.quizEnd = false;\r\n  scope.inProgress = true;\r\n  scope.getQuestion();\r\n};
\r\n\r\n

Po wywołaniu funkcji id wyświetlanego elementu ustawia się na zero. Dzięki zmiennej quizEnd wiemy że quiz się rozpoczął i nie zakończył. Zmienna inProgress wyświetla na ekranie quiz. Następnie wywołujemy zmienną getQuestion().

\r\n\r\n
scope.getQuestion = function() {\r\n  var q = ProductModel.getQuestion(scope.id);\r\n  if(q) {\r\n    scope.name = q.name;\r\n    scope.kcal = q.kcal;\r\n    scope.protein = q.protein;\r\n    scope.carb = q.carb;\r\n    scope.fat = q.fat;\r\n    scope.img = q.img;\r\n    scope.answerMode = true;\r\n  } else {\r\n    scope.quizEnd = true;\r\n  }\r\n};
\r\n\r\n

Funkcja getQuestion odbiera z ProductModel dane, wybrane przez aktualną wartość zmiennej scope.id, poprzez funkcję:

\r\n\r\n
var q = ProductModel.getQuestion(scope.id);
\r\n\r\n

A następnie przypisuje pobrane dane do odpowiadających im zmiennych. Zmieniamy stan answerMode, dzięki czemu pojawiają się produkt i inputy, które będziemy mogli wypełnić. Jeśli nasza funkcja nie znajdzie odpowiednich danych, to zakończy quiz zmienną quizEnd. Tak prezentuje się aplikacja po wduszeniu przycisku start:

\r\n

aplikacja po wduszeniu start

\r\n

Możemy teraz wpisać wartości numeryczne w pola, jednak nie są one walidowane w żaden sposób i prawdopodobnie pozostawię użytkownikowi wybór jakie pola wypełnić.

\r\n

Po wduszeniu przycisku Submit, wywoła się funkcja check(), która wygląda w taki sposób:

\r\n\r\n
scope.check = function(){\r\n  scope.Res = [];\r\n  scope.answerMode = false;\r\n  scope.Res[0] = test(scope.kcal, scope.macro1);\r\n  scope.Res[1] = test(scope.protein, scope.macro2);\r\n  scope.Res[2] = test(scope.carb, scope.macro3);\r\n  scope.Res[3] = test(scope.fat, scope.macro4);\r\n};
\r\n\r\n

Funkcja check() zmienia stan answerMode na false, aby określić w aplikacji, że user już zatwierdził swoją odpowiedź. następnie tworzymy tablicę, w której przechowamy wyniki porównujące wartość podaną przez użytkownika z wartością w naszej aplikacji.

\r\n

Funkcja test:

\r\n\r\n
var test = function(modelData, viewData){\r\n  if(modelData > viewData) return modelData - viewData + " za mało";\r\n  if(modelData < viewData) return viewData - modelData + " za dużo";\r\n  if(modelData == viewData) return "idealnie!";\r\n};
\r\n\r\n

Funkcja test, jest funkcją nie przypisaną do scope, ponieważ nie będziemy wywoływać jej w widoku aplikacji, tylko bezpośrednio w dyrektywie. Funkcja ta przyjmuje dwa argumenty - wartość z inputa, oraz odpowiadającą wartość z aplikacji. Po porównaniu tych dwóch wartości, zwracana jest różnica wraz z opisem czy wartość była za mała czy za duża. W przypadku trafienia poprawnej wartości, funkcja zwraca string "idealnie!". Po przypisaniu tych wartości do tablicy scope.Res, możemy wyświetlić ją w widoku aplikacji. Stanie się tak, ponieważ paragrafy, które wyświetlają tą tablice, wyświetlą się w momencie, kiedy zmienimy stan answerMode na fałsz, co przed chwilą się wydarzyło. Tak wygląda nasza aplikacja, w momencie kiedy nie wpisaliśmy żadnej wartości i wdusiliśmy przycisk submit:

\r\n

aplikacja po wduszeniu submit

\r\n

Następna funkcja wywołuje się po wduszeniu klawisza next, który wyświetla się po wykonaniu funkcji check(). Nazywa się nextQuestion()

\r\n\r\n
scope.nextQuestion = function() {\r\n  scope.id++;\r\n  scope.getQuestion();\r\n}
\r\n\r\n

Pozwala tylko na zwiększenie id, aby wyszukać kolejny produkt i znowu wywołuje funkcję qetQuestion()

\r\n\r\n
scope.reset = function() {\r\n  scope.inProgress = false;\r\n}
\r\n\r\n

Ostatnią już funkcją tej dyrektywy jest scope.reset(), które wywoływany jest przez przycisk play again, pojawiający się w momencie kiedy w bazie zabraknie pytań. Funkcja zmienia stan inProgress, dzięki czemu wracamy do przycisku start.

\r\n\r\n

# Cały kod dyrektywy

\r\n

Tak prezentuje się cały kod Javascript dyrektywy, którą zapisałem jako macro.directive.js:

\r\n\r\n
(function() {\r\n  'use strict';\r\n\r\n  angular\r\n    .module('quizProject')\r\n    .directive('quiz', quiz);\r\n\r\n  function quiz(ProductModel) {\r\n      return {\r\n        restrict: 'AE',\r\n        scope: {},\r\n        templateUrl: 'app/main/directive/html/macro.directive.html',\r\n        link: function(scope, elem, attrs) {\r\n\r\n          scope.start = function() {\r\n            scope.id = 0;\r\n            scope.quizEnd = false;\r\n            scope.inProgress = true;\r\n            scope.getQuestion();\r\n          };\r\n\r\n          scope.check = function(){\r\n            scope.Res = [];\r\n            scope.answerMode = false;\r\n            scope.Res[0] = test(scope.kcal, scope.macro1);\r\n            scope.Res[1] = test(scope.protein, scope.macro2);\r\n            scope.Res[2] = test(scope.carb, scope.macro3);\r\n            scope.Res[3] = test(scope.fat, scope.macro4);\r\n          };\r\n\r\n          var test = function(modelData, viewData){\r\n            if(modelData > viewData) return modelData - viewData + " za mało";\r\n            if(modelData < viewData) return viewData - modelData + " za dużo";\r\n            if(modelData == viewData) return "idealnie!";\r\n          };\r\n\r\n          scope.getQuestion = function() {\r\n            var q = ProductModel.getQuestion(scope.id);\r\n            if(q) {\r\n              scope.name = q.name;\r\n              scope.kcal = q.kcal;\r\n              scope.protein = q.protein;\r\n              scope.carb = q.carb;\r\n              scope.fat = q.fat;\r\n              scope.img = q.img;\r\n              scope.answerMode = true;\r\n            } else {\r\n              scope.quizEnd = true;\r\n            }\r\n          };\r\n\r\n          scope.nextQuestion = function() {\r\n            scope.id++;\r\n            scope.getQuestion();\r\n          }\r\n\r\n        }\r\n      }\r\n    };\r\n})();
\r\n\r\n

Proszę się nie martwić surowym wyglądem aplikacji, na stylowanie przyjdzie jeszcze czas - w najbliższych częściach postów Daj się Poznać.

2017-05-03 22:00:00 daj-sie-poznac-5-dyrektywa-w-angularjs-czesc-2 cjfsgdao0000fi3um8hz4dspc 2017-05-03 22:00:00 2017-05-03 22:00:00 -cj2eorfuo00hyi3umb5o22yjq ES6#4 Arrow functions czyli funkcje strzałkowe https://www.idaszak.com/article/2017/05/07/es6-4-arrow-functions-funkcje-strzalkowe

\r\n\r\n

W poprzednich częściach serii dotyczącej standardu ECMASCRIPT6 języka Javascript poznaliśmy słowo kluczowe class, dowiedzieliśmy się czym jest let i const oraz spread i rest przy okazji omawiania destrukturyzacji. Tym razem zajmiemy się chyba najbardziej rozpoznawalną funkcjonalnością ES6, czyli funkcjami strzałkowymi. Arrow Functions pozwalają na skrócenie i zwiększenie czytelności naszego kodu, co jest bardzo pożądanym zjawiskiem przez wszystkich programistów. Zachaczymy też trochę o podstawy programowania funkcyjnego, ponieważ to właśnie przy okazji pisania takiego kodu najbardziej są przydatne te funkcje. Zaczynajmy!

\r\n\r\n\r\n

Jeśli nie czytałeś jeszcze wcześniejszych części, to rzuć okiem na http://www.idaszak.com/article/2017/04/05/es6-2-var-let-const,
ponieważ w poniższym kodzie będziemy korzystać z let oraz const. Zapraszam także do zapoznania się z klasami w ES6:
http://www.idaszak.com/article/2017/04/02/czy-javascript-jest-obiektowy

\r\n\r\n

# Czym są arrow functions?

\r\n

Funkcje strzałkowe, czyli arrow functions zastępują nam funkcje anonimowe, oferując znacznie krótszą składnie.

\r\n

Aby je zastosować używamy znaku =>, czyli grubej strzałki, której składnia wzięła się z CoffeScripta, czyli języka kompilowanego do Javascriptu. Jeśli znasz taki język jak Haskell, to pewnie już spotkałeś się z takimi funkcjami.

\r\n

Zacznijmy od prostego przykładu, który zobrazuje różnice między funkcjami.

\r\n\r\n
 \r\nconst a = 2;\r\n\r\nconst multiply = function (number) {\r\n  return number * a;\r\n}.bind(this);\r\n\r\nconsole.log(multiply(2)); //4
\r\n\r\n

Tak wygląda zwykła funkcja, przyjmująca jeden argument, która posiada przypisaną aktualną wartość this, czyli this z momentu deklaracji, zamiast tego z momentu wywołania. Użycie bind w tym przykładzie jest bardzo istotne, ponieważ właśnie w taki sposób działają funkcje strzałkowe. Zobaczmy teraz jak można taką funkcję skrócić:

\r\n\r\n
 \r\nconst a = 2;\r\n\r\nconst multiply = number => number * a;\r\n\r\nconsole.log(multiply(2)); //4
\r\n\r\n

W tym przypasku nie musieliśmy już pisać słowa kluczowego function ani return. Po lewej stronie strzałki znajdują się argumenty, które przyjmuje funkcja, a po prawej wartość, bądź wyrażenie, które zostanie zwrócone.

\r\n\r\n

# Zastosowanie arrow functions - funkcja filter

\r\n\r\n
 \r\nconst characters = [\r\n\t{name: Butch , role: Boxer},\r\n\t{name: Vincent, role: Hitman},\r\n\t{name: Winston, role: Problem solver},\r\n\t{name: Jules, role: Hitman},\r\n]
\r\n\r\n

Stworzyliśmy właśnie listę obiektów, składających się z wyszkolonych osób do wynajęcia, jednak w naszym przypadku lista nie jest satysfakcjonująca, ponieważ do naszego zadania potrzebujemy tylko płatnych zabójców! W takim przypadku możemy użyć funkcji filter, aby stworzyć listę osób, które mają rolę Hitman.

\r\n\r\n
 \r\nconst HitMan = characters.filter(function(ev){\r\n   return ev.role == 'Hitman';\r\n});\r\n\r\nconsole.log(HitMan); //[{name: "Vincent", role: "Hitman"}, {name: "Jules", role: "Hitman"}]
\r\n\r\n

Jednak użyjmy teraz arrow function => i spójrzmy, jak bardzo skróci nasz kod.

\r\n\r\n
 \r\nvar HitMan = characters.filter(ev => ev.role == 'Hitman');\r\nconsole.log(HitMan); //[{name: "Vincent", role: "Hitman"}, {name: "Jules", role: "Hitman"}]
\r\n\r\n

A co w przypadku jeśli funkcja przyjmuje więcej niż jeden argument lub nie przyjmuje żadnych argumentów?

\r\n

W przypadku wielu argumentów, musimy pamiętać, żeby zamknąć nasze argumenty w nawiasie okrągłym:

\r\n\r\n
 \r\nlet max = (a, b) => a > b ? a : b;
\r\n\r\n

W powyższym przykładzie użyliśmy skróconej formy warunku if, gdzie naszym warunkiem jest a > b, wartością zwróconą w przypadku prawdy jest pierwszy argument po znaku zapytania, czyli a, a w przypadku fałszu jest to b znajdujące się po dwukropku.

\r\n

W przypadku kiedy nasza funkcja strzałkowa nie przyjmuje żadnych argumentów, wstawiamy znak ().

\r\n\r\n
 \r\nvar arg = 72;\r\nvar foo = () => arg;\r\n\r\nfoo(); //72
2017-05-07 12:40:00 es64-arrow-functions-czyli-funkcje-strzalkowe cjfsgdao0000fi3um8hz4dspc 2017-05-07 12:40:00 2017-05-07 12:40:00 -cj2nlwnk000iti3um8pzgarb1 Daj Się Poznać #7 Upgrade do AngularJS 1.6 - Components, ES6, Webpack https://www.idaszak.com/article/2017/05/13/daj-sie-poznac-7-upgrade-angular-1.5-es6-webpack
\t\r\n\r\n\r\n
\r\n


\r\n

W poprzednich częściach tworzyliśmy aplikację AngularJS Mistrz Makro, która jest quizem, pozwalającym na zgadywanie makroskładników produktu przedstawionego na zdjęciu. Udało nam się ukończyć wstępny zarys działającej aplikacji. Tym razem zajmiemy się zmianą kodu do wersji AngularJS 1.6. Nasza aplikacja będzie przerobiona na najnowszy standard, pozwalający na łatwiejszą zmianę do Angulara (2/4) w razie potrzeby. Skorzystamy także z Babela, który pozwoli nam pisać kod w ES6, dzięki czemu zastosujemy sporo rzeczy, które poznaliśmy przy serii postów o ES6. Zaczynajmy!

\r\n\r\n\r\nJeśli pobrałeś już moje repozytorium z Githuba, co opisałem w poprzednim poście to możesz teraz przeskoczyć do kolejnego commita, który pokaże Ci kod z tego posta:\r\n\r\n
$ git checkout 1a8c63fba51ef10ff143c719c30e8430c1759ab9
\r\n\r\n

# Co się zmieni w stosunku do poprzedniego kodu?

\r\n\r\n

Przede wszystkim skorzystamy tym razem z innego startera. NG6-starter ze skonfigurowanym gulpem, webpackiem, babelem do ES6, przygotowany do korzystania z SASS oraz testowania będzie naszym wyborem.

\r\n
    \r\n
  • Dyrektywa zostanie zamieniona przez component
    • \r\n
  • Class - Użyjemy klas z ES6 do tworzenia serwisów i komponentów. Więcej na ten temat możesz dowiedzieć się tutaj.
    • \r\n
  • Webpack - zamiast bowera skorzystamy z webpacka.
    • \r\n
  • arrow functions - w kodzie będziemy używali funkcji strzałkowych z ES6. Przeczytać na ten temat możesz tutaj.
    • \r\n
  • let skorzystamy także z nowego słowa kluczowego, które poznaliśmy w ES6. Więcej: tutaj.
    • \r\n
\r\n\r\n

# GetJson service - zmiany

\r\n\r\n

Serwisy tworzymy jako klasy z konstruktorem i metodami.

\r\n\r\n
 \r\nexport default class GetJson {\r\n  constructor($http) {\r\n    this._$http = $http;\r\n  }\r\n\r\n  getData() {\r\n    let request = {\r\n      url: 'answers.JSON',\r\n      method: 'GET',\r\n    };\r\n    return this._$http(request).then((res) => res.data);\r\n  }\r\n}
\r\n\r\n

Tworzymy klasę GetJson gotową do eksportu i użycia w komponencie. W konstruktorze, który wywołuje się przy stworzeniu obiektu mamy wstrzykiwanie zależności, dzięki któremu możemy korzystać z funkcji $http. Metoda getData określa ścieżkę pliku i typ komunikacji. Jako wartość zwracaną mamy this._$http, z którego korzystamy tak jak przypisaliśmy to w konstruktorze. Funkcja zwraca dane z piku answers.JSON.

\r\n\r\n
 \r\nimport angular from 'angular';\r\n\r\nimport productsList from './productsList';\r\nimport GetJson from './GetJson';\r\n\r\nexport default angular\r\n  .module('app.services', [])\r\n  .service({ productsList })\r\n  .service({ GetJson });
\r\n\r\n

W pliku services.js importujemy nasz serwis i rejestrujemy go do modułu app.services.

\r\n\r\n

# Modele z danymi - zmiany

\r\n

Wcześniej mieliśmy pliki macro.model.js oraz product.model.js, które były serwisami, do których zapisywaliśmy nasze dane. Tym razem stworzymy jeden serwis składający się z dwóch klas.

\r\n

Tworzymy plik ProductsList.js zawierający dwie klasy.

\r\n\r\n
 \r\nclass Macros {\r\n  constructor(id, name, kcal, protein, carb, fat, img){\r\n    this.id = id;\r\n    this.name = name;\r\n    this.kcal = kcal;\r\n    this.protein = protein;\r\n    this.carb = carb;\r\n    this.fat = fat;\r\n    this.img = img;\r\n  }\r\n}
\r\n\r\n

Macros to pierwsza klasa odpowiadająca za macro.model.js. Nie będzie wykorzystywana poza tym plikiem, więc nie musimy jej eksportować. Nasza klasa tworzy nowe obiekty z podanych wartości.

\r\n

Kolejną klasą w tym pliku będzie ProductsList czyli odpowiednik product.model.js.

\r\n\r\n
 \r\nexport default class ProductsList {\r\n  constructor() {\r\n    this.list = [];\r\n  }\r\n\r\n  add(id, name, kcal, protein, carb, fat, img){\r\n    const macros = new Macros(id, name, kcal, protein, carb, fat, img);\r\n    this.list.push(macros);\r\n  }\r\n\r\n  getList(id){\r\n    return id < this.list.length ? this.list[id] : false; \r\n  }\r\n}
\r\n\r\n

Eksportujemy klasę, ponieważ będziemy korzystać z niej w naszym komponencie. W konstruktorze tworzymy listę, w której będziemy przechowywać obiekty. Metoda add dodaje nasze dane do obiektu wytworzonego przez klasę Macros, a następnie dołącza go do tablicy this.list. Metoda getList wyszukuje obiekt o podanym id i go zwraca. Serwis rejestrujemy tak jak to było w przypadku GetJson.

\r\n\r\n

# Directive - zmiana na Component - controller

\r\n\r\n

Nasz plik macro.directive.js zostanie zastąpiony plikiem controller.js

\r\n\r\n
 \r\nexport default class Quiz {\r\n  /**\r\n   * @param {ProductsList} productsList\r\n   */\r\n  constructor(productsList, GetJson) {\r\n    "ngInject";\r\n    this.productsList = productsList;\r\n    this.GetJson = GetJson;\r\n\r\n    this.id = 0;\r\n    this.quizEnd = true;\r\n    this.inProgress = false;\r\n    this.Res = [];\r\n    this.id = 0;\r\n    this.name = "";\r\n    this.kcal = "";\r\n    this.protein;\r\n    this.carb;\r\n    this.fat;\r\n    this.img = "";\r\n    this.answerMode = false;\r\n\r\n    this.init();\r\n  }
\r\n\r\n

Stworzyliśmy klasę Quiz, w którą wstrzykujemy productsList i GetJson. Nasz konstruktor ustawia wartości początkowe i wywołuje metodę this.init();.

\r\n\r\n
init(){\r\n  let answers = this.GetJson.getData();\r\n  answers.then(data => {\r\n    data.questions.forEach(answer => {\r\n      this.productsList.add(answer.id,\r\n                            answer.name,\r\n                            answer.kcal,\r\n                            answer.protein,\r\n                            answer.carb,\r\n                            answer.fat,\r\n                            answer.img);\r\n    });\r\n  });\r\n}
\r\n\r\n

Funkcja init() zmieniła się nieznacznie w stosunku do naszego poprzedniego kodu. Odbieramy dane z GetJson i dodajemy je do serwisu productsList za pomocą metody add().

\r\n\r\n
start() {\r\n  this.id = 0;\r\n  this.quizEnd = false;\r\n  this.inProgress = true;\r\n  this.getQuestion();\r\n}\r\n getQuestion() {\r\n  var q = this.productsList.getList(this.id);\r\n  if(q) {\r\n    this.name = q.name;\r\n    this.kcal = q.kcal;\r\n    this.protein = q.protein;\r\n    this.carb = q.carb;\r\n    this.fat = q.fat;\r\n    this.img = q.img;\r\n    this.answerMode = true;\r\n  } else {\r\n    this.quizEnd = true;\r\n  }\r\n}\r\n\r\nnextQuestion() {\r\n  this.id++;\r\n  this.getQuestion();\r\n}\r\n\r\nreset() {\r\n  this.inProgress = false;\r\n  this.score = 0;\r\n}
\r\n\r\n

Funkcje start(), getQuestion(), nextQuestion(), reset() pozostają praktycznie bez zmian, poza różnicami w składni.

\r\n\r\n
check(){\r\n  let test = function(modelData, viewData){\r\n    if(!viewData) return "";\r\n    if(modelData == viewData) return "idealnie!";\r\n    return modelData > viewData ? modelData - viewData + " za mało" : viewData - modelData + " za dużo";\r\n  };\r\n  this.Res = [];\r\n  this.answerMode = false;\r\n  this.Res[0] = test(this.kcal, this.macro1);\r\n  this.Res[1] = test(this.protein, this.macro2);\r\n  this.Res[2] = test(this.carb, this.macro3);\r\n  this.Res[3] = test(this.fat, this.macro4);\r\n}
\r\n\r\n

Funkcja check() została tylko troszkę skrócona, a funkcja test została dołączona wewnątrz metody.

\r\n\r\n

# Directive - zmiana na Component - pozostałe pliki

\r\n

Nasz komponent musimy określić w pliku quiz.component.js. Restrict, bindings, template znamy już z dyrektywy.

\r\n\r\n
import template from './mainFile.html';\r\nimport controller from './controller';\r\n\r\nlet quizComponent = {\r\n  restrict: 'E',\r\n  bindings: {},\r\n  template,\r\n  controller,\r\n  controllerAs: 'c'\r\n};\r\n\r\nexport default quizComponent;
\r\n\r\n

Nowością jest controllerAs, który określa jak będziemy odwoływać się do zmiennych i metod, zamiast użycia $scope.

\r\n

Używamy tym razem odwołania c.zmienna zamiast $scope.zmienna. Poza tymi zmianami, plik html naszej dyrektywy pozostaje taki sam:

\r\n\r\n
<div class="container" ng-show="c.inProgress">\r\n  <div class="row">\r\n    <div class="col-md-12">\r\n\r\n      <div ng-show="!c.quizEnd">\r\n        <h2></h2>\r\n        <img ng-src="/assets/">\r\n        <p>Kcal:</p><input type="number" ng-model="c.macro1">\r\n        <p ng-show="!c.answerMode"></p>\r\n        <p>Białko:</p><input type="number" ng-model="c.macro2">\r\n        <p ng-show="!c.answerMode"></p>\r\n        <p>Węglowodany:</p><input type="number" ng-model="c.macro3">\r\n        <p ng-show="!c.answerMode"></p>\r\n        <p>Tłuszcz:</p><input type="number" ng-model="c.macro4">\r\n        <p ng-show="!c.answerMode"></p>\r\n        <button ng-click="c.check()" ng-show="c.answerMode">Submit</button>\r\n      \r\n        <div ng-show="!c.answerMode">\r\n          <button ng-click="c.nextQuestion()">Next</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div ng-show="c.quizEnd">\r\n        <button ng-click="c.reset()">Play again</button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class="container" ng-show="!c.inProgress">\r\n  <div class="row">\r\n    <button ng-click="c.start()">Start</button>\r\n  </div>\r\n</div>
\r\n\r\n

Ostatnim plikiem jest components.js, który pozwala zarejestrować nasz komponent do kolejnego modułu app.components:

\r\n\r\n
import angular from 'angular';\r\n\r\nimport quizComponent from './quiz.component';\r\n\r\nexport default angular\r\n  .module('app.components', [\r\n  ])\r\n  .component('quiz', quizComponent);
2017-05-13 18:30:00 daj-sie-poznac-7-upgrade-do-angularjs-16-components-es6-webpack cjfsgdao0000fi3um8hz4dspc 2017-05-13 18:30:00 2017-05-13 18:30:00 cjua4yhew01ili3umgu6dbldy 4Developers 2019 – szybkie podsumowanie https://sarvendev.com/2019/04/4developers-2019-szybkie-podsumowanie/

To jak tam, już implementujecie wszędzie nowe rozwiązania zasłyszane podczas konferencji? Ja wróciłem jakieś 4 godziny temu do domu i pomyślałem, że może napiszę jakieś podsumowanie. Wrażenia bardzo pozytywne, jedynie cały czas mam lekki niedosyt, że tak szybko to minęło, a mogłem jedynie zobaczyć małą część prezentacji. Tak, aby w dzień konferencji funkcjonować w miarę […]

\n

Artykuł 4Developers 2019 – szybkie podsumowanie pochodzi z serwisu SarvenDev.

2019-04-09 18:46:17 4developers-2019-szybkie-podsumowanie ck2uky50o000gi3um2qmhblbo 2019-04-09 18:46:17 2019-04-09 18:46:17 cj2w16v4000jii3um7kcw2kvn Podstawy Programowania Funkcyjnego #1 - fundamenty https://www.idaszak.com/article/2017/05/19/podstawy-programowania-funkcyjnego-1-fundamenty \r\n\r\n

\r\n\r\n

W tej serii możecie nauczyć się razem ze mną Podstaw Programowania Funkcyjnego. Będzie to świetny sposób na poznanie zastosowań standardu Javascript - ES6. Nawet jeśli piszesz kod obiektowo, warto poznać kilka podstaw, które pozwolą pisać krótszy i czytelniejszy kod. Na sam początek zaczniemy od fundamentów i poznamy najważniejsze zasady. Zaczynajmy!

\r\n\r\n\r\n

# Argumenty funkcji

\r\n

W języku Javascript, funkcja może przyjmować różną ilość argumentów i zależnie od ich ilości możemy wykonać w niej inny fragment kodu. Wcześniej, czyli przed wprowadzeniem standardu ES6 mogliśmy korzystać tylko ze specjalnej zmiennej arguments, jednak mamy teraz lepsze możliwości, a korzystanie z tej zmiennej uznawane jest za złą praktykę.

\r\n

Spójrzmy na poniższy kod, który korzysta z tej zmiennej:

\r\n\r\n
 \r\nvar show = function(a, b) {\r\n    console.log(arguments);\r\n}\r\nshow('pierwszy', 'drugi'); //{ '0': 'pierwszy', '1': 'drugi' }
\r\n\r\n

Zakładając że nie znamy ilości argumentów, które pojawią się w tej funkcji, możemy wywołać funkcję length do zmiennej arguments:

\r\n\r\n
 \r\nvar show = function() {\r\n    console.log(arguments.length);\r\n}\r\nshow('a','b','c','d'); //4
\r\n\r\n

Skoro zmienna arguments działa całkowicie w porządku, to można zadać pytanie, dlaczego nie powinno się jej stosować?

\r\n

arguments.length jest bardzo użytecznym zastosowaniem, jednak problem zaczyna się w momencie, gdy chcielibyśmy użyć argumentów z tej zmiennej, bo nie jest ona prawdziwą tablicą.

\r\n

Jak więc zastąpić arguments? Na ratunek przychodzi zmienna rest, którą omówiliśmy już przy okazji postu dotyczącego destrukturyzjacji. Pojawia się tam przykład, który tłumaczy różnicę pomiędzy arguments a ... czyli operatorem reszty.

\r\n\r\n

# Rest - destrukturyzacja

\r\n

Jak działa rest?

\r\n\r\n
 \r\nfunction show( x, y, ...args ) {\r\n\tconsole.log( x, y, args );\r\n}\r\nshow(); //undefined undefined []\r\nshow( 1, 2, 3, 4, 5, 6); //1 2 [3, 4, 5, 6]
\r\n\r\n

jak widzimy, argumenty nie przypisane do odpowiadającym im zmiennych, wchodzą w skład tablicy args.

\r\n

To teraz proste zadanie, z którym miałem okazję zetknąć się przy zgłębianiu tajników języka Prolog. Użytkownik może podać dowolną ilość argumentów, z zaznaczeniem że ich minimalna ilość to 2. Zadaniem funkcji jest zwrócić tablicę z argumentami, jednak argument podany jako pierwszy ma znajdować się na jej samym końcu.

\r\n\r\n
 \r\nconst shift = (head, ...tail) => [tail, head];\r\nshift(1,2,3); //[2, 3, 1]
\r\n\r\n

# Argumenty domyślne i tablica argumentów

\r\n

Dzięki tablicy argumentów, możemy odwoływać się do poszczególnych argumentów oraz wykonywać na niej inne funkcje takie jak np. filter. Nie musimy także określać ilości przekazywanych argumentów. Jest jeszcze jedna funkcjonalność dodana w ES6, o której jeszcze nie wspominaliśmy na tym blogu, a mianowicie - argument domyślny, czyli taki, który ustawiamy, jeśli argumentów będzie mniej niż oczekujemy.

\r\n\r\n
 \r\nfunction show(y, x = 2){\r\n  console.log(y * x);\r\n}\r\nshow(2); //4\r\nshow(2, 3); //6
\r\n\r\n

Wcześniej musieliśmy sobie radzić z argumentem domyślnym w taki sposób:

\r\n\r\n
 \r\nfunction show(y, x) {\r\n  x = x || 2;\r\n  console.log(y * x);\r\n}
\r\n\r\n

# Purity - czyste funkcje

\r\n

W programowaniu funkcyjnym powinniśmy trzymać się w miarę możliwości zasady czystości funkcji.

\r\n

Funkcja powinna być prosta i przyjmować argumenty, w innym wypadku byłaby bezużyteczna. Czyste funkcje, nie powinny modyfikować zmiennych spoza swojego zasięgu i zmiennych globalnych, dlatego muszą zwracać jakąś wartość. Dzięki prostocie tych funkcji możemy zwiększać reusability kodu zgodnie z zasadą KISS, czyli Keep It Simple, Stupid. Nasze programy staną się łatwiejsze do późniejszej modyfikacji. Funkcje, które modyfikują lub operują na zmiennych spoza swojego zasięgu mają efekt uboczny - nie zawsze zwracają przewidywalny wynik. Czysta funkcja musi zwrócić zawsze ten sam wynik dla takich samych wartości. Oczywiście nie da się wyeliminować całkowicie funkcji, które nie są czyste, ale w miarę możliwości powinniśmy starać się ich unikać.

2017-05-19 16:00:00 podstawy-programowania-funkcyjnego-1-fundamenty cjfsgdao0000fi3um8hz4dspc 2017-05-19 16:00:00 2017-05-19 16:00:00 cjxc3rhao01mdi3um2f9n99dk Testy mutacyjne – czyli testujemy testy https://sarvendev.com/2019/06/testy-mutacyjne-czyli-testujemy-testy/

Pisanie testów ma nas upewnić, że wytwarzany przez nas kod działa poprawnie. Często wyznaczamy sobie współczynnik code coverage i przy wyniku blisko stuprocentowym możemy powiedzieć, że zaimplementowane rozwiązania są poprawne. Na pewno? Może jest jakieś narzędzie, które dam nam lepszy feedback? Testy mutacyjne Testowanie mutacyjne polega na modyfikacji małych części kodu i sprawdzaniu w jaki […]

\n

Artykuł Testy mutacyjne – czyli testujemy testy pochodzi z serwisu SarvenDev.

2019-06-25 17:47:30 testy-mutacyjne-czyli-testujemy-testy ck2uky50o000gi3um2qmhblbo 2019-06-25 17:47:30 2019-06-25 17:47:30 @@ -2980,6 +3009,7 @@ cj39bvdhc00kri3um3pmmg4ub Daj Się Poznać #9 Ekran wynikowy, czyszczenie input cj47gc5aw00n3i3umf33aeu7g Czy potrzeba w IT wydarzeń tylko dla kobiet? http://www.wakeupandcode.pl/czy-potrzeba-w-it-wydarzen-tylko-dla-kobiet/

Czy wydarzenia w IT tylko dla kobiet to kółka wzajemnej adoracji czy szansa na spróbowanie swoich sił w programowaniu? Czy dziewczyny faktycznie muszą mieć dedykowane kursy czy warsztaty, by wziąć w nich udział? Czy w IT naprawdę tak brakuje kobiet? O tym wszystkim w dzisiejszym wpisie. Jak pewnie wiecie, na początku czerwca zorganizowałam wydarzenie Programuj, […]

\n

Artykuł Czy potrzeba w IT wydarzeń tylko dla kobiet? pochodzi z serwisu Wake up and Code.

2017-06-21 20:29:11 czy-potrzeba-w-it-wydarzen-tylko-dla-kobiet ckhgqbfog000ii3um332tat33 2017-06-21 20:29:11 2017-06-21 20:29:11 cjh6lbeuw0128i3um0bzqcb4h Przemyślenia po lekturze „Zaufanie czyli waluta przyszłości” https://sarvendev.com/2018/05/przemyslenia-po-lekturze-zaufanie-czyli-waluta-przyszlosci/

Książkę „Zaufanie czyli waluta przyszłości” kupiłem przedpremierowo. Posiadam już w sumie książkę Michała Szafrańskiego „Finansowy ninja”, ale nie miałem jeszcze okazji jej w końcu przeczytać. Inaczej było z tytułową pozycją, która również miała czekać na swoją kolej, jednak gdzieś tam w wolnej chwili pomyślałem „a sprawdzę co tam we wstępie jest”, następnie „dobra to jeszcze […]

\n

Artykuł Przemyślenia po lekturze „Zaufanie czyli waluta przyszłości” pochodzi z serwisu SarvenDev.

2018-05-14 18:36:59 przemyslenia-po-lekturze-zaufanie-czyli-waluta-przyszlosci ck2uky50o000gi3um2qmhblbo 2018-05-14 18:36:59 2018-05-14 18:36:59 cji0p1r28013hi3um945r1ulb Zmiany na blogu https://sarvendev.com/2018/06/zmiany-na-blogu/

Po roku prowadzenia bloga postanowiłem wprowadzić w nim kilka pomysłów, które zebrałem przez ostatni czas. Z racji, że wypadło mi jeszcze kilka innych rzeczy, z planowanych kilku tygodni prac zrobiło się „trochę” dłużej, przez co jedyny wpis jaki powstał to ten odnośnie książki „Zaufanie czyli waluta”. Generalnie planowałem dużo więcej rzeczy, ale trzeba było wyłączyć […]

\n

Artykuł Zmiany na blogu pochodzi z serwisu SarvenDev.

2018-06-04 20:14:32 zmiany-na-blogu ck2uky50o000gi3um2qmhblbo 2018-06-04 20:14:32 2018-06-04 20:14:32 +ckst0okpe00020wla0ld6q2zb Frontend Thursday vol. 52 (Annual Edition) https://blog.vived.io/frontend-thursday-vol-52/ Przygotowujemy cotygodniowe przeglądy już od ponad roku i dlatego najwyższa pora przyjrzeć się najważniejszym trendom i wydarzeniom z tego okresu. Łapcie kubek gorącej kawy i zapraszamy do lektury! 2021-08-26 14:10:41 frontend-thursday-vol.-52-(annual-edition) ckmor5k8y000044moj65m13y0 2021-08-26 14:24:13.01 2021-08-26 14:24:13.01 cji4ui3yo013mi3umfpuo3ipj Array destructing – php 7.1 https://sarvendev.com/2018/06/array-destructing-php-7-1/

Kiedyś pisałem dosyć dużo kodu w javascript (es6). Wykorzystywałem różne możliwość języka, których później brakowało mi w php. Jedną z nich było tzw. destructuring assignment. Przykład w ES6 const user = [1, 'name']; const [id, name] = user; console.log(id); // 1 console.log(name); // name W php 5.6 też dało się coś takiego zrobić, ale tylko […]

\n

Artykuł Array destructing – php 7.1 pochodzi z serwisu SarvenDev.

2018-06-07 17:58:18 array-destructing-php-71 ck2uky50o000gi3um2qmhblbo 2018-06-07 17:58:18 2018-06-07 17:58:18 cjialvkwo013ti3um2juzbuxt Linux – adapter usb do hdmi https://sarvendev.com/2018/06/linux-adapter-usb-do-hdmi/

Zwykle korzystałem z PC do programowania, ale po ostatniej zmianie pracy przesiadłem się na laptopa. Co niestety spowodowało pewien problem, a mianowicie jak podłączyć dwa monitory mając tylko jedno gniazdo HDMI. Taka sytuacja może nie jest problemem, ale jak jesteś użytkownikiem linuksa od 10 lat i nie masz zamiaru go zmieniać to sprawa nie jest […]

\n

Artykuł Linux – adapter usb do hdmi pochodzi z serwisu SarvenDev.

2018-06-11 18:43:27 linux-adapter-usb-do-hdmi ck2uky50o000gi3um2qmhblbo 2018-06-11 18:43:27 2018-06-11 18:43:27 cjiouabgw0146i3um23djgyhi Generatory w php https://sarvendev.com/2018/06/generatory-w-php/

Generatory zostały dodane stosunkowo dawno, bo jeszcze w wersji php 5.5. Jednak wydaje się, że są rzadko spotykane w różnych projektach, a może jednak czasem warto mieć świadomość ich istnienia, gdyż idealnie dopasowują się do niektórych problemów. Czym są generatory? Generatory są funkcjami, które pozwalają w wydajny sposób iterować po dużych zbiorach danych. Różnicą w […]

\n

Artykuł Generatory w php pochodzi z serwisu SarvenDev.

2018-06-21 17:47:38 generatory-w-php ck2uky50o000gi3um2qmhblbo 2018-06-21 17:47:38 2018-06-21 17:47:38 @@ -3021,6 +3051,7 @@ cj9g6lj6o00tzi3um3szreq7y Deklaratywny Shadow DOM https://blog.comandeer.pl/java cjan1g88000vji3um08bre9sq Interfejsy w JS https://blog.comandeer.pl/javascript/2017/11/30/interfejsy-w-js.html Wszyscy kochamy Javę, dlatego wszyscy chcemy interfejsów w JS, prawda? 2017-11-30 22:15:00 interfejsy-w-js cki52vf40000ci3um2x784hhn 2017-11-30 22:15:00 2017-11-30 22:15:00 cjbvbodi800wki3umed382sfm Co za rok! https://blog.comandeer.pl/na-luzie/2017/12/31/co-za-rok.html Rok 2017 w końcu się skończył. A przyznam się szczerze, że ciągnął mi się już niewiarygodnie. Pora go zatem podsumować. 2017-12-31 22:03:08 co-za-rok cki52vf40000ci3um2x784hhn 2017-12-31 22:03:08 2017-12-31 22:03:08 cjagt7ixs00v7i3umc50kfofs JavaScript: Pierwszy projekt – Quiz http://www.wakeupandcode.pl/javascript-pierwszy-projekt-quiz/

W zeszłym tygodniu przeprowadziłam na fanpage’u ankietę dotyczącą tematyki następnego wpisu. Wygrały pomysły na własne projekty w JS. Ruszamy więc na blogu z nową serią pt. JavaScript: Pierwszy projekt. Na sam początek małe wprowadzenie. Nie chciałam Wam tu wrzucać po prostu listy pomysłów na własne projekty. Chcę podejść do tematu praktycznie. W ramach serii będą […]

\n

Artykuł JavaScript: Pierwszy projekt – Quiz pochodzi z serwisu Wake up and Code.

2017-11-26 13:37:40 javascript-pierwszy-projekt-quiz ckhgqbfog000ii3um332tat33 2017-11-26 13:37:40 2017-11-26 13:37:40 +ckt02cfvd00020wjzj29wbduw Baza danych z potężnymi możliwościami - Neo4j https://fsgeek.pl/post/grafowa-baza-danych-neo4j/ Najczęściej korzystamy z baz relacyjnych np.: mySQL, Mariadb czy PostgreSQL. Potem są dokumentowe np.: Mongo i klucz-wartość np.: Redis. I na tym kończy się zazwyczaj znajomość baz danych. A są jeszcze bazy grafowe np.: Neo4j, które dają nam ogromne możliwości przy niektórych zastosowaniach. 2021-08-31 16:00:00 baza-danych-z-poteznymi-mozliwosciami-neo4j ckhxjb6o0000yi3umb3hg09jv 2021-08-31 12:45:09.337 2021-08-31 12:45:09.337 cjan6b3qw00vki3umdbe14h3i Nic mi się nie udało http://www.wakeupandcode.pl/nic-mi-sie-nie-udalo/

Słowa mają moc. I to ogromną. Nie zdajemy sobie sprawy, jak wiele zależy od tego, co mówimy, jak sami siebie nastawiamy do danego tematu. Ja dziś chcę napisać o tym, co zrobiłam w trakcie minionych miesięcy. I dlaczego uważam, że nic mi się nie udało. Według Ciebie początek tego wpisu brzmi jak z taniej książki […]

\n

Artykuł Nic mi się nie udało pochodzi z serwisu Wake up and Code.

2017-12-01 00:30:59 nic-mi-sie-nie-udalo ckhgqbfog000ii3um332tat33 2017-12-01 00:30:59 2017-12-01 00:30:59 cjayl9enk00vui3um4d6a6fy8 Jak oswoić algorytmy? http://www.wakeupandcode.pl/jak-oswoic-algorytmy/

Czas na to, by zapoznać się z algorytmami! W pierwszym gościnnym wpisie w historii bloga Joanna Hulek wyjaśni Wam, jak oswoić algorytmy. Chodźcie poczytać! Kilka słów wyjaśnienia na początek – z Joasią poznałam się w grupie Programuj, dziewczyno! i całkiem niedawno prowadziłyśmy razem na Facebooku live o tym, jak się uczyć programowania. Asia bardzo fajnie […]

\n

Artykuł Jak oswoić algorytmy? pochodzi z serwisu Wake up and Code.

2017-12-09 00:15:02 jak-oswoic-algorytmy ckhgqbfog000ii3um332tat33 2017-12-09 00:15:02 2017-12-09 00:15:02 cjbun2vf400whi3um3qavhc56 Moje plany na 2018 rok http://www.wakeupandcode.pl/moje-plany-na-rok-2018/

Już jutro zacznie się kolejny rok. Czas więc skonkretyzować swoje plany! Dziś artykuł o tym, co planuję w kwestii pracy, bloga i grupy. No i trochę o nowych projektach! Co roku, pod koniec grudnia robię plany na nowy rok. Mam kilka pytań, które sobie zadaję, a potem odpowiedzi zapisuję w zeszycie. Jest trochę podsumowywania minionego […]

\n

Artykuł Moje plany na 2018 rok pochodzi z serwisu Wake up and Code.

2017-12-31 10:34:34 moje-plany-na-2018-rok ckhgqbfog000ii3um332tat33 2017-12-31 10:34:34 2017-12-31 10:34:34 @@ -3030,7 +3061,6 @@ cjcinsxio00x7i3um87mg6umb Wyzwanie: Podstawy HTML i CSS – Dzień 1 http://www. cjck3udyo00xai3um4qwehx2x Wyzwanie: Podstawy HTML i CSS – Dzień 2 http://www.wakeupandcode.pl/podstawy-html-i-css-dzien-2/

I oto nadszedł dzień drugi wyzwania, w którym poznajemy podstawy HTML i CSS. Dzisiaj przed nami tajemnice CSS. 3..2..1.. Start! Instrukcja obsługi wyzwania Ten wpis jest pierwszym z trzech, które ukażą się na blogu przez najbliższe dni. Każdego dnia w artykule znajdziecie omówienie podstawowych zagadnień z HTML i CSS oraz zadania do zrobienia. Przejście przez […]

\n

Artykuł Wyzwanie: Podstawy HTML i CSS – Dzień 2 pochodzi z serwisu Wake up and Code.

2018-01-18 06:18:06 wyzwanie-podstawy-html-i-css-dzien-2 ckhgqbfog000ii3um332tat33 2018-01-18 06:18:06 2018-01-18 06:18:06 cjclio6nc00xdi3umfwue6ubb Wyzwanie: Podstawy HTML i CSS – Dzień 3 http://www.wakeupandcode.pl/podstawy-html-i-css-dzien-3/

Przed nami ostatni dzień wyzwania, czyli dalsza część przygody pt. podstawy HTML i CSS. Gotowi? Zaczynamy! Małe ogłoszenie Na sam początek informacja – wczoraj ruszyły zapisy na moje warsztaty online! Jestem ogromnie podekscytowana tym projektem 🙂 To 2-godzinne sesje, podczas których poznacie HTML i CSS i nauczycie się jak zakodować pierwszą stronę internetową. Do wyboru […]

\n

Artykuł Wyzwanie: Podstawy HTML i CSS – Dzień 3 pochodzi z serwisu Wake up and Code.

2018-01-19 06:00:57 wyzwanie-podstawy-html-i-css-dzien-3 ckhgqbfog000ii3um332tat33 2018-01-19 06:00:57 2018-01-19 06:00:57 cj6y51nhk00qvi3umf6m3hecp Artykuł „Strona internetowa dostępna dla każdego, czy to możliwe? Grzechy i grzeszki twórców stron internetowych” https://www.webkrytyk.pl/2017/08/30/artykul-strona-internetowa-dostepna-dla-kazdego-czy-to-mozliwe-grzechy-i-grzeszki-tworcow-stron-internetowych/ Bardzo dobrze, że świadomość dostępności stron internetowych w Polsce stoi na coraz wyższym poziomie. To jednak sprawia, że pojawia się problem klęski urodzaju. Artykułów traktujących o dostępności zaczyna pojawiać się bardzo dużo, a tylko niektóre z nich są warte uwagi. Dzisiaj przyjrzę się artykułowi Strona internetowa dostępna dla każdego, czy to możliwe? Grzechy i grzeszki […] 2017-08-29 22:02:17 artykul-strona-internetowa-dostepna-dla-kazdego-czy-to-mozliwe-grzechy-i-grzeszki-tworcow-stron-internetowych cki2dml0o000di3umgjexb6pk 2017-08-29 22:02:17 2017-08-29 22:02:17 -cj87rpyw800sii3umbhnh1jo6 nFinity.pl https://www.webkrytyk.pl/2017/09/30/nfinity-pl/ Dawno już w sumie nie przyglądałem się stronie żadnej agencji interaktywnej, więc pora to nadrobić! Dzisiaj padło na nFinity, bo ta nazwa ostatnio obiła mi się o uszy. Wygląd i działanie Pierwsza rzecz, jaka mnie bardzo pozytywnie zaskoczyła, to fakt, że strona jest niemal w pełni funkcjonalna bez JS-a. Niemal, bo nie da się otworzyć menu, … Czytaj dalej nFinity.pl 2017-09-30 20:26:41 nfinitypl cki2dml0o000di3umgjexb6pk 2017-09-30 20:26:41 2017-09-30 20:26:41 cj9cz95ug00tti3um81pp98zl W3Schools.com https://www.webkrytyk.pl/2017/10/29/w3schools-com/ Dzisiaj nieco złamię zasadę działania WebKrytyka i napiszę o stronie, która nie jest polska, niemniej jest u nas niezwykle popularna. Mowa oczywiście o W3Schools. Poruszałem już ten temat, ale dzisiaj go nieco rozwinę i przedstawię w mniej emocjonalnej formie. Artykuł opisuje stan zasobów W3Schools na dzień 29 października 2017 roku. Od tego dnia w zasobach W3Schools mogły … Czytaj dalej W3Schools.com 2017-10-29 16:36:07 w3schoolscom cki2dml0o000di3umgjexb6pk 2017-10-29 16:36:07 2017-10-29 16:36:07 cjamrpshc00vii3um9klu1xy3 ICHERRY.pl https://www.webkrytyk.pl/2017/11/30/icherry-pl/ Pora na kolejną stronę agencji interaktywnej do kolekcji! Tym razem ICHERRY.pl. Strona wygląda schludnie i elegancko, w tym względzie nie mam nic do zarzucenia. Co ciekawe, strona wygląda praktycznie identycznie z działającym JS-em, jak i bez niego – brakuje wyłącznie przykładowych prac zaciąganych z Dribble. To spory plus. Pokazuje też, że można w dzisiejszych czasach … Czytaj dalej ICHERRY.pl 2017-11-30 17:42:30 icherrypl cki2dml0o000di3umgjexb6pk 2017-11-30 17:42:30 2017-11-30 17:42:30 cjbv3pjw000wji3um5kuhhmmx Język JavaScript. Absolutne podstawy https://www.webkrytyk.pl/2017/12/31/jezyk-javascript-absolutne-podstawy/ Kodologia.pl udostępniła ostatnio darmowy kurs Język JavaScript. Absolutne podstawy. Postanowiłem mu się zatem przyjrzeć. Pierwsze, co rzuca się w oczy, to pewnego rodzaju niedbałość w samym sposobie tworzenia kursu. Jest w nim bardzo dużo literówek i różnego rodzaju błędów ortograficznych i interpunkcyjnych, np. Kurs zawiera zadania dotyczące omawianych fragmentów języka JavaScript oraz serię zadań w … Czytaj dalej Język JavaScript. Absolutne podstawy 2017-12-31 18:20:06 jezyk-javascript-absolutne-podstawy cki2dml0o000di3umgjexb6pk 2017-12-31 18:20:06 2017-12-31 18:20:06 @@ -3040,6 +3070,7 @@ cje6djxwo00z0i3umgzeh5ysf Novi Builder https://www.webkrytyk.pl/2018/02/28/novi- cjffwjo60010ei3umgcr18vb5 How2HTML.pl https://www.webkrytyk.pl/2018/03/31/how2html-pl/ Dzisiaj przyjrzymy się nieco bliżej jednemu z popularniejszych kursów HTML w Polsce, How2HTML. Sprawdźmy, czy zasługuje na swoją popularność! Uwaga ogólna W kursie jest bardzo dużo błędów ortograficznych i interpunkcyjnych. Najbardziej razi pisownia wyrazów takich jak naprawdę (tutaj zapisywane jako na prawdę). Strona główna Na stronie głównej znajduje się minisłowniczek pojęć, a w nim także … Czytaj dalej How2HTML.pl 2018-03-31 21:41:51 how2htmlpl cki2dml0o000di3umgjexb6pk 2018-03-31 21:41:51 2018-03-31 21:41:51 cjglyektc011ii3uma3ih845r Smultron.pl https://www.webkrytyk.pl/2018/04/30/smultron-pl/ Dzisiaj klasyczny WebKrytyk – króciutka recenzja strony WWW. Tym razem padło na stronę firmy Smultron. Wygląd i działanie Strona nie pokazuje dużej części treści w sytuacji, gdy JS nie działa. To sprawia, że istnieje możliwość niezobaczenia treści przez część odwiedzających. Dodatkowo taki sposób animowania treści (ukrycie jej „na chama”, od razu) może spowodować niezaindeksowanie treści … Czytaj dalej Smultron.pl 2018-04-30 08:00:12 smultronpl cki2dml0o000di3umgjexb6pk 2018-04-30 08:00:12 2018-04-30 08:00:12 cjcw9qaqg00xoi3um0bpz09rx Junior Developer: Jak to jest po kursie programowania? http://www.wakeupandcode.pl/junior-developer-po-kursie/

Junior developer po kursie programowania – czy to ma znaczenie? Czy brak kierunkowych studiów bardzo utrudnia wykonywanie zadań? Jak wygląda typowy dzień pracy? Czy naprawdę można zostać programistą po weekendowym kursie? Ten wpis jest drugim z serii o junior developerach. W pierwszym artykule pisałam o tym, kiedy zacząć szukać pierwszej pracy jako młodszy programista. Dziś […]

\n

Artykuł Junior Developer: Jak to jest po kursie programowania? pochodzi z serwisu Wake up and Code.

2018-01-26 18:36:07 junior-developer-jak-to-jest-po-kursie-programowania ckhgqbfog000ii3um332tat33 2018-01-26 18:36:07 2018-01-26 18:36:07 +ckr55ac2n00020wl436vlfq8o 10 krajów w 2 lata [#progravlog 3] https://tworcastron.pl/blog/10-krajow-w-2-lata-progravlog-3/

Właśnie wróciłem z urlopu. Baterie naładowane! Zawsze po takich urlopach mam power do pracy, 2 dni po powrocie zmontowałem już 3 odcinki na YouTuba 😀  Ale nie zawsze tak było, […]

\n

Artykuł 10 krajów w 2 lata [#progravlog 3] pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-07-15 16:29:36 10-krajow-w-2-lata-progravlog-3 ckbbw3jvs000li3umgw19edq9 2021-07-15 16:46:56.159 2021-07-15 16:46:56.159 cjd9c1v0000y5i3um7wqoayp8 Junior Developer: Czy kurs przygotował mnie do pracy? cz. 2 http://www.wakeupandcode.pl/junior-developer-praca-cz2/

Część druga moich przemyśleń o pracy jako Junior Developer po kursie programowania. Tym razem piszę m.in. o tym, na ile kurs przygotował mnie do pracy i jak wyglądała kwestia zarobków przy zmianie branży. Pierwszą część tego wpisu możecie znaleźć tutaj. Czy kurs przygotował mnie do pracy? Od razu prosto z mostu odpowiem na najważniejsze dziś […]

\n

Artykuł Junior Developer: Czy kurs przygotował mnie do pracy? cz. 2 pochodzi z serwisu Wake up and Code.

2018-02-04 22:02:06 junior-developer-czy-kurs-przygotowal-mnie-do-pracy-cz-2 ckhgqbfog000ii3um332tat33 2018-02-04 22:02:06 2018-02-04 22:02:06 cjdcphjeg00yai3umbfoxby6f Wirtualne przyjęcie na pierwsze urodziny Wake up and Code, czyli jakie blogi czytam http://www.wakeupandcode.pl/urodziny/

Wake up and Code kończy rok! A skoro urodziny, musi być przyjęcie i oczywiście, goście. Zapraszam więc Was na wirtualne przyjęcie. W roli gości wystąpią blogi, które czytam regularnie 🙂 Trochę o programowaniu, trochę o planowaniu i dbaniu o siebie. Ciekawi moich propozycji? Dokładnie rok temu ukazał się tutaj pierwszy wpis. Zakładam, że pewnie nikt […]

\n

Artykuł Wirtualne przyjęcie na pierwsze urodziny Wake up and Code, czyli jakie blogi czytam pochodzi z serwisu Wake up and Code.

2018-02-07 06:41:31 wirtualne-przyjecie-na-pierwsze-urodziny-wake-up-and-code-czyli-jakie-blogi-czytam ckhgqbfog000ii3um332tat33 2018-02-07 06:41:31 2018-02-07 06:41:31 cjdjafl6w00yfi3um7ssrfsv5 Jak się uczę: JavaScript http://www.wakeupandcode.pl/jak-sie-ucze-javascript/

Czas na powrót serii „Jak się uczę”. Pytaliście i pytaliście, i w końcu jest! Post z materiałami, z których uczyłam się (i nadal uczę) JavaScriptu. Od podstaw po bardziej zaawansowane zagadnienia. JavaScript nadchodzi! Mała uwaga na początek – podane poniżej źródła dotyczą tzw. Vanilla JS, czyli „zwykłego” JavaScriptu. Nie będę tutaj poruszać tematu bibliotek ani […]

\n

Artykuł Jak się uczę: JavaScript pochodzi z serwisu Wake up and Code.

2018-02-11 21:14:29 jak-sie-ucze-javascript ckhgqbfog000ii3um332tat33 2018-02-11 21:14:29 2018-02-11 21:14:29 @@ -3077,6 +3108,7 @@ cjls9z4e0017ni3uma3p50hmz Własna aplikacja krok po kroku cz. 1 http://www.wakeu cjmd3ynew0184i3um438m4lwn Lista lektur na jesień http://www.wakeupandcode.pl/lista-lektur-na-jesien/

I oto nadszedł czas na kolejną serię jesiennych lektur. Dzisiaj polecę coś typowo o programowaniu, coś dla rozrywki i coś dla zaplanowania swojej kariery. Ruszamy! Na sam początek – jak macie ochotę spojrzeć na moje wcześniejsze polecenia książkowe odsyłam Was tutaj i tutaj . A teraz pozwólcie, że przedstawię Wam kolejne lektury, po które według […]

\n

Artykuł Lista lektur na jesień pochodzi z serwisu Wake up and Code.

2018-09-22 07:24:05 lista-lektur-na-jesien ckhgqbfog000ii3um332tat33 2018-09-22 07:24:05 2018-09-22 07:24:05 cjuaa9qg001imi3umcuru61sp Światełko w tunelu https://blog.comandeer.pl/swiatelko-w-tunelu.html Być może mój pesymizm związany z końcem HTML5 okaże się przesadzony. Wszystko wskazuje bowiem, że negocjacje pomiędzy W3C a WHATWG faktycznie do czegoś prowadzą i wypracowano wstępny zarys porozumienia. 2019-04-09 21:15:00 swiatelko-w-tunelu cki52vf40000ci3um2x784hhn 2019-04-09 21:15:00 2019-04-09 21:15:00 cjvayklk001jyi3um7kth2f05 20 lat WCAG https://blog.comandeer.pl/20-lat-wcag.html Dzisiaj przypada niezwykle ważna rocznica: 20-lecie powstania standardu WCAG! I choć dla mnie to dość odległe czasy, które niekoniecznie pamiętam, inni pamiętają dobrze. 2019-05-05 13:15:00 20-lat-wcag cki52vf40000ci3um2x784hhn 2019-05-05 13:15:00 2019-05-05 13:15:00 +ck3lvngco01tii3umc40116qe Marcin Wesel, Praktyczne PHP https://www.webkrytyk.pl/2019/11/30/marcin-wesel-praktyczne-php/ Dzisiaj na tapet trafiła książka Marcina Wesela, Praktyczne PHP. Zupełnie inaczej wyobrażałem sobie tę książkę. Mam wrażenie, że jej treść po prostu rozmija się z tytułem. Nie jest to bowiem pokazanie praktycznego wykorzystania PHP, a raczej przyśpieszony kurs programowania w tym języku. Co więcej, wygląda na to, że, nie licząc ostatniego rozdziału, treść jest faktycznie dostępna … Czytaj dalej Marcin Wesel, Praktyczne PHP 2019-11-30 17:56:21 marcin-wesel-praktyczne-php cki2dml0o000di3umgjexb6pk 2019-11-30 17:56:21 2019-11-30 17:56:21 cjrnyylgg01ewi3um1v7ng9q0 Bartłomiej Miś, Nie potrzebujesz frameworków Angular, React lub Vue.js! Stwórz dynamiczną stronę WWW BEZ ICH UŻYCIA w 1h! https://www.webkrytyk.pl/2019/02/02/bartlomiej-mis-nie-potrzebujesz-frameworkow-angular-react-lub-vue-js-stworz-dynamiczna-strone-www-bez-ich-uzycia-w-1h/ Trafił w moje ręce darmowy e-book poświęcony zagadnieniom wydajności stron WWW, Nie potrzebujesz frameworków Angular, React lub Vue.js! Stwórz dynamiczną stronę WWW BEZ ICH UŻYCIA w 1h! Bartłomieja Misia. E-book ma raptem 25 stron i ostrzega na pierwszej stronie, że zawiera mega przydatną treść, więc stwierdziłem, że nie zaszkodzi do niego zajrzeć. Główna treść zaczyna … Czytaj dalej Bartłomiej Miś, Nie potrzebujesz frameworków Angular, React lub Vue.js! Stwórz dynamiczną stronę WWW BEZ ICH UŻYCIA w 1h! 2019-02-02 21:08:04 bartlomiej-mis-nie-potrzebujesz-frameworkow-angular-react-lub-vuejs-stworz-dynamiczna-strone-www-bez-ich-uzycia-w-1h cki2dml0o000di3umgjexb6pk 2019-02-02 21:08:04 2019-02-02 21:08:04 cjtxdjmhs01i6i3um73ew440y PKiN.pl https://www.webkrytyk.pl/2019/03/31/pkin-pl/ Dzisiaj w ramach odskoczni od materiałów edukacyjnych przyjrzymy się stronie PKiN.pl, czyli oficjalnej witrynie Pałacu Kultury i Nauki. Wygląd i działanie Pierwsze, co rzuca się w oczy, to fakt, że strona nie przekierowuje na HTTPS. Co więcej, próba ręcznego wymuszenia bezpiecznego połączenia kończy się błędem. To dość niepokojące, zwłaszcza, że od dawna wiadomo, jak ważną rolę pełni … Czytaj dalej PKiN.pl 2019-03-31 20:25:40 pkinpl cki2dml0o000di3umgjexb6pk 2019-03-31 20:25:40 2019-03-31 20:25:40 cjud5pddc01iti3umf21ed93r Maciej Rościszewski, Zawód front-end developer. 11 kroków do zostania webmasterem https://www.webkrytyk.pl/2019/04/11/maciej-rosciszewski-zawod-front-end-developer-11-krokow-do-zostania-webmasterem/ Ostatnio znajoma zapytała mnie, co sądzę o książce Macieja Rościszewskiego Zawód front-end developer. 11 kroków do zostania webmasterem. Nic nie sądziłem, bo nie czytałem, niemniej postanowiłem nadrobić braki. Książka powtarza dokładnie te same mity/nieprawdziwe informacje, co zdecydowana większość kursów w Polsce: DOCTYPE nie jest znacznikiem, to preambuła dokumentu HTML i w żaden sposób nie określa typu … Czytaj dalej Maciej Rościszewski, Zawód front-end developer. 11 kroków do zostania webmasterem 2019-04-11 21:30:30 maciej-rosciszewski-zawod-front-end-developer-11-krokow-do-zostania-webmasterem cki2dml0o000di3umgjexb6pk 2019-04-11 21:30:30 2019-04-11 21:30:30 @@ -3095,7 +3127,6 @@ cjnhgit5s019di3um7awd84pj Syndrom oszusta, czyli dlaczego wystąpiłam na konfer cjnogghnc019gi3um4j4x4huw Jak uczyć się angielskiego pod kątem programowania? http://www.wakeupandcode.pl/angielski-a-programowanie/

Czy angielski jest konieczny w branży IT? Czy warto zaczynać naukę programowania bez jego znajomości? Jakie są sprawdzone sposoby na naukę? Jak uczyć się angielskiego pod kątem programowania? Na te i inne pytania odpowiedziała podczas wczorajszego live na YouTube Justyna Falkowska, która prowadzi bloga, vloga i podcast Językobranie. Jeśli chcecie obejrzeć nagranie z relacji na […]

\n

Artykuł Jak uczyć się angielskiego pod kątem programowania? pochodzi z serwisu Wake up and Code.

2018-10-25 10:39:03 jak-uczyc-sie-angielskiego-pod-katem-programowania ckhgqbfog000ii3um332tat33 2018-10-25 10:39:03 2018-10-25 10:39:03 cjnsx4agw019ki3umg32gd0z1 Sprawdź się! Kilka prostych zadań z JavaScriptu http://www.wakeupandcode.pl/sprawdz-sie-kilka-prostych-zadan-z-javascriptu/

Masz chwilę? Chcesz sprawdzić, jak tam z Twoimi podstawami JavaScriptu? Oto pierwszy wpis z nowej serii „JavaScript: Sprawdź się!” Zapraszam do zabawy! Na czym polega zabawa? W tym wpisie znajdziesz 3 zadania z podstaw JavaScriptu. Rozwiąż je, a link podaj w komentarzu (najlepiej w formie nowego pena z Codepen). Następnie sprawdź zadania osobie, która podała […]

\n

Artykuł Sprawdź się! Kilka prostych zadań z JavaScriptu pochodzi z serwisu Wake up and Code.

2018-10-28 13:36:32 sprawdz-sie-kilka-prostych-zadan-z-javascriptu ckhgqbfog000ii3um332tat33 2018-10-28 13:36:32 2018-10-28 13:36:32 ckgxzqdc0029bi3umgjahgi6e Web Intents i naiwniak, czyli dlaczego nie możemy mieć fajnych rzeczy? https://blog.comandeer.pl/web-intents-i-naiwniak-czyli-dlaczego-nie-mozemy-miec-fajnych-rzeczy.html Wieki temu Paul Kinlan zaproponował nowy standard internetowy: Web Intents. Osobiście czułem, że może to być jedna z większych rewolucji w historii Sieci. I co? I wyszło jak zawsze – czyli w sumie nie wyszło… 2020-10-31 18:00:00 web-intents-i-naiwniak-czyli-dlaczego-nie-mozemy-miec-fajnych-rzeczy cki52vf40000ci3um2x784hhn 2020-10-31 18:00:00 2020-10-31 18:00:00 -ck3lvngco01tii3umc40116qe Marcin Wesel, Praktyczne PHP https://www.webkrytyk.pl/2019/11/30/marcin-wesel-praktyczne-php/ Dzisiaj na tapet trafiła książka Marcina Wesela, Praktyczne PHP. Zupełnie inaczej wyobrażałem sobie tę książkę. Mam wrażenie, że jej treść po prostu rozmija się z tytułem. Nie jest to bowiem pokazanie praktycznego wykorzystania PHP, a raczej przyśpieszony kurs programowania w tym języku. Co więcej, wygląda na to, że, nie licząc ostatniego rozdziału, treść jest faktycznie dostępna … Czytaj dalej Marcin Wesel, Praktyczne PHP 2019-11-30 17:56:21 marcin-wesel-praktyczne-php cki2dml0o000di3umgjexb6pk 2019-11-30 17:56:21 2019-11-30 17:56:21 ck4twyai801usi3um43h25yzo Audyt strony WWW od Linuxpl.com https://www.webkrytyk.pl/2019/12/31/audyt-strony-www-od-linuxpl-com/ Nie tak dawno temu Linuxpl.com uruchomił usługę automatycznego audytu stron WWW. Postanowiłem nieco bliżej przyjrzeć się wynikom generowanym przez to narzędzie. Zacznijmy od tego, że jestem mocno zdziwiony, że to narzędzie nie używa Lighthouse’a. Na chwilę obecną jest to de facto standard, zwłaszcza w dziedzinie narzędzi do testowania wydajności stron WWW. Od pewnego czasu można … Czytaj dalej Audyt strony WWW od Linuxpl.com 2019-12-31 13:34:38 audyt-strony-www-od-linuxplcom cki2dml0o000di3umgjexb6pk 2019-12-31 13:34:38 2019-12-31 13:34:38 ck61do36w01w2i3um7j5fbh3k Wpadki i wypadki #10 https://www.webkrytyk.pl/2020/01/31/wpadki-i-wypadki-10/ Kiedy już wszyscy zwątpili – łącznie ze mną – oto jest: nowy odcinek Wpadek i wypadków! Dzisiaj będzie bardzo krótko, o wzorcu, który bardzo często można spotkać na stronach – menu hamburgerowym. Czyli tak naprawdę przycisku, który otwiera menu, Choć jest na niemal każdej stronie, bardzo często jest zrobiony źle i w sposób niedostępny. Przyjrzyjmy się … Czytaj dalej Wpadki i wypadki #10 2020-01-30 23:36:41 wpadki-i-wypadki-10 cki2dml0o000di3umgjexb6pk 2020-01-30 23:36:41 2020-01-30 23:36:41 ck75bd7d401x2i3umbvfm4ohg FireArt.pl https://www.webkrytyk.pl/2020/02/27/fireart-pl/ Dzisiaj na WebKrytyku tradycyjnie, a więc ocena strony WWW. Padło na FireArt.pl Uwagi ogólne/wygląd Strona działa wyłącznie po HTTP, próba przełączenia się na HTTPS pokazuje standardową zaślepkę hostingu (screen). Wskaźnik focusu nie jest widoczny w sekcji Realizacje na stronie głównej. Co ciekawe, ten problem nie występuje na podstronie Realizacje. Kontrast pomiędzy kolorem nagłówków a tłem … Czytaj dalej FireArt.pl 2020-02-27 22:23:01 fireartpl cki2dml0o000di3umgjexb6pk 2020-02-27 22:23:01 2020-02-27 22:23:01 @@ -3105,6 +3136,7 @@ ckajwp6dk022ci3um1hfw13in Kurs dostępności – EduWeb.pl https://www.webkrytyk ckc11gvg80244i3umdo7n47ae Krzysztof Pianta, Code with me. Zostań game developerem https://www.webkrytyk.pl/2020/06/29/krzysztof-pianta-code-with-me-zostan-game-developerem/ Dzisiaj w WebKrytyku przyjrzymy się książce Krzysztofa Pianty Code with me. Zostań game developerem. W przypadku tej książki wypada zacząć od kwestii dość podstawowej: jej logicznego podziału. Książka ma 352 strony i jest podzielona na 8 rozdziałów. Problem w tym, że rozdział pierwszy kończy się… na stronie 280. Praktycznie 80% książki zajmuje jeden rozdział. Pozostałe … Czytaj dalej Krzysztof Pianta, Code with me. Zostań game developerem 2020-06-29 21:53:23 krzysztof-pianta-code-with-me-zostan-game-developerem cki2dml0o000di3umgjexb6pk 2020-06-29 21:53:23 2020-06-29 21:53:23 ckdaqbmxk025fi3um09vdf803 Wpadki i wypadki #11 https://www.webkrytyk.pl/2020/07/31/wpadki-i-wypadki-11/ Oto kolejny odcinek Wpadek i wypadków! Dzisiaj zajmiemy się wzorcem, który ostatnimi czasy zdobywa naprawdę sporą popularność: umieszczaniem linków w przyciskach i przycisków w linkach. Mówię tutaj o konstrukcjach typu: <a href="#"> <button>Jestem przyciskiem w linku</button> </a> <button> <a href="#">Jestem linkiem w przycisku</a> </button> Tego typu konstrukcje są złe z kilku powodów: Z perspektywy semantyki … Czytaj dalej Wpadki i wypadki #11 2020-07-31 21:18:47 wpadki-i-wypadki-11 cki2dml0o000di3umgjexb6pk 2020-07-31 21:18:47 2020-07-31 21:18:47 ciz73v2e00077i3umdhtqelpk 50 twarzy JS: 0. Wprowadzenie http://kot-zrodlowy.pl/javascript/2017/02/15/50-twarzy-js.html Cześć, to znowu ja. Tym razem wymyśliłam, że zacznę serię artykułów. Z góry zapewniam, że będzie ich 50 (oprócz dzisiejszego), a ich tematyka to najbardziej uwielbiany i jednocześnie znienawidzony ... 2017-02-15 15:21:27 50-twarzy-js-0-wprowadzenie cjy7sgxs0000bi3umeb9z90rn 2017-02-15 15:21:27 2017-02-15 15:21:27 +ckfpxlz4w027ui3um1in1266k Wpadki i wypadki #12 https://www.webkrytyk.pl/2020/09/30/wpadki-i-wypadki-12/ Zapraszam na kolejne Wpadki i wypadki! Dzisiaj na tapet wzięty zostanie wzorzec, który swego czasu już omawiałem: nawigacja na stronie typu one-page, płynnie przewijająca do odpowiednich sekcji na stronie. Zacznijmy od prostego przykładu: <nav class="navigation"> <ul class="navigation__menu menu"> <li class="menu__item"> <a href="#" id="about-me-link" class="menu__link">About me</a> </li> <li class="menu__item"> <a href="#" id="offer-link" class="menu__link">Offer</a> </li> <li class="menu__item"> … Czytaj dalej Wpadki i wypadki #12 2020-09-30 21:58:44 wpadki-i-wypadki-12 cki2dml0o000di3umgjexb6pk 2020-09-30 21:58:44 2020-09-30 21:58:44 cjnyxxb6g019ti3um24o7a1iq Zmiana branży na urlopie macierzyńskim? To jest możliwe! http://www.wakeupandcode.pl/zmiana-branzy-na-urlopie-macierzynskim/

Front-end, Back-end, Scrum. Tym dziś zajmują się bohaterki tego tekstu. Jeszcze jakiś czas temu pracowały w zupełnie innych zawodach, ale podczas urlopu macierzyńskiego postanowiły zmienić wszystko. Jak to zrobiły i zaplanowały? Przeczytajcie ich historie! Wczoraj odbył się live, podczas którego rozmawiałam z jedną z bohaterek tego tekstu, Agnieszką Chudzicką. Agnieszka postanowiła zmienić branżę mając dwójkę […]

\n

Artykuł Zmiana branży na urlopie macierzyńskim? To jest możliwe! pochodzi z serwisu Wake up and Code.

2018-11-01 18:45:43 zmiana-branzy-na-urlopie-macierzynskim-to-jest-mozliwe ckhgqbfog000ii3um332tat33 2018-11-01 18:45:43 2018-11-01 18:45:43 cjo32knbs019wi3um1trv7xm3 Praca głęboka w praktyce. O tym, jak nagrałam kurs online w 2 tygodnie http://www.wakeupandcode.pl/praca-gleboka-w-praktyce/

Koncepcja pracy głębokiej zainteresowała mnie już jakiś czas temu. Stosowałam ją do nauki, a teraz wypróbowałam przy realizacji dużego projektu. Ciekawi Was, jak wygląda praca głęboka w praktyce? Zapraszam do lektury! Jeśli nie wiecie, czym jest praca głęboka i chcecie poczytać o niej więcej, odsyłam najpierw do wpisu o tym, jak się uczyć. Tam pisałam, […]

\n

Artykuł Praca głęboka w praktyce. O tym, jak nagrałam kurs online w 2 tygodnie pochodzi z serwisu Wake up and Code.

2018-11-04 16:06:55 praca-gleboka-w-praktyce-o-tym-jak-nagralam-kurs-online-w-2-tygodnie ckhgqbfog000ii3um332tat33 2018-11-04 16:06:55 2018-11-04 16:06:55 cjo9282co01a4i3um1mfz967h Skąd wiedzieć, że czas na zmianę branży na IT? http://www.wakeupandcode.pl/skad-wiedziec-ze-czas-na-zmiane-branzy-na-it/

Trzeci artykuł w ramach serii „Projekt: Zmiana branży”. Dziś o tym, skąd wiedzieć, że czas na zmianę branży na IT. Czyli rady od Joanny Zielonki, Stratega Rozwoju. Wczoraj odbył się kolejny live w ramach projektu. Miałam przyjemność rozmawiać z Joanną Zielonką, Strategiem Rozwoju. Poruszyłyśmy temat planowania kariery, zmian w życiu zawodowym. Asia opowiedziała też, jak […]

\n

Artykuł Skąd wiedzieć, że czas na zmianę branży na IT? pochodzi z serwisu Wake up and Code.

2018-11-08 20:43:45 skad-wiedziec-ze-czas-na-zmiane-branzy-na-it ckhgqbfog000ii3um332tat33 2018-11-08 20:43:45 2018-11-08 20:43:45 @@ -3114,7 +3146,6 @@ cjp6s505c01b4i3um63cvdez4 Jak zaprojektować swoją pierwszą aplikację http:// cjpd0lrk001bhi3umdutd405c Od czego zacząć naukę programowania http://www.wakeupandcode.pl/od-czego-zaczac-nauke-programowania/

Od czego zacząć naukę programowania? Jak poznać podstawy? Jak dowiedzieć się, czy to jest coś dla Was? Dziś wpis z przydatnymi linkami, które wprowadzą Was w świat kodowania! Właśnie czytacie setny wpis na blogu. Z tej okazji postanowiłam napisać artykuł, który pozwoli poznać podstawy kodowania tym z Was, którzy nie mieli jeszcze ku temu okazji. […]

\n

Artykuł Od czego zacząć naukę programowania pochodzi z serwisu Wake up and Code.

2018-12-06 19:49:12 od-czego-zaczac-nauke-programowania ckhgqbfog000ii3um332tat33 2018-12-06 19:49:12 2018-12-06 19:49:12 cjpgqije801boi3umbvdu7i3f Sprawdź się! Porcja zadań z JavaScriptu http://www.wakeupandcode.pl/sprawdz-sie-porcja-zadan-z-javascriptu/

Zaczynacie swoją przygodę z JavaScriptem? A może chcecie odświeżyć swoją wiedzę? Przed Wami zadania z JavaScriptu, które pozwolą poćwiczyć umysł i Wasze umiejętności! Do kodu! Ostatni wpis z zadaniami z JS wzbudził Wasze ogromne zainteresowanie. Wiele osób zdecydowało się podzielić swoim kodem, a także wziąć udział w code review. Dziś ponownie zapraszam Was do zabawy. […]

\n

Artykuł Sprawdź się! Porcja zadań z JavaScriptu pochodzi z serwisu Wake up and Code.

2018-12-09 10:17:50 sprawdz-sie-porcja-zadan-z-javascriptu ckhgqbfog000ii3um332tat33 2018-12-09 10:17:50 2018-12-09 10:17:50 cki52vf4002avi3umg3jgcdi8 Dzień Niebieskiej Czapki https://blog.comandeer.pl/dzien-niebieskiej-czapki.html Dzisiaj 30 listopada – a więc Dzień Niebieskiej Czapki (ang. Blue Beanie Day). Wszystkiego najlepszego dla wszystkich webdeveloperów! 🎉 2020-11-30 21:42:00 dzien-niebieskiej-czapki cki52vf40000ci3um2x784hhn 2020-11-30 21:42:00 2020-11-30 21:42:00 -ckfpxlz4w027ui3um1in1266k Wpadki i wypadki #12 https://www.webkrytyk.pl/2020/09/30/wpadki-i-wypadki-12/ Zapraszam na kolejne Wpadki i wypadki! Dzisiaj na tapet wzięty zostanie wzorzec, który swego czasu już omawiałem: nawigacja na stronie typu one-page, płynnie przewijająca do odpowiednich sekcji na stronie. Zacznijmy od prostego przykładu: <nav class="navigation"> <ul class="navigation__menu menu"> <li class="menu__item"> <a href="#" id="about-me-link" class="menu__link">About me</a> </li> <li class="menu__item"> <a href="#" id="offer-link" class="menu__link">Offer</a> </li> <li class="menu__item"> … Czytaj dalej Wpadki i wypadki #12 2020-09-30 21:58:44 wpadki-i-wypadki-12 cki2dml0o000di3umgjexb6pk 2020-09-30 21:58:44 2020-09-30 21:58:44 ckgwugx94029ai3umf6hxd9w0 WyleczDepresje.pl https://www.webkrytyk.pl/2020/10/30/wyleczdepresje-pl/ Dzisiaj nieco bliżej przyjrzymy się stronie WyleczDepresje.pl. Wygląd i działanie W przypadku tego typu stron, których głównym celem jest przekazanie informacji jak największej liczbie osób, kluczowe jest właśnie to, by jak najwięcej osóby było w stanie je przeczytać. Dlatego strona powinna działać również w przypadku, gdy JS nie działa. Wyświetlanie tekstu nie powinno wymagać nic ponad … Czytaj dalej WyleczDepresje.pl 2020-10-30 22:44:55 wyleczdepresjepl cki2dml0o000di3umgjexb6pk 2020-10-30 22:44:55 2020-10-30 22:44:55 cki2dml0o02asi3umh93tczdn Kurs JavaScript nabierz wprawy od Codengi https://www.webkrytyk.pl/2020/11/29/kurs-javascript-nabierz-wprawy-od-codengi/ Trafiłem ostatnio przypadkiem na Codengę. Stwierdziłem zatem, że w sumie mogę rzucić okiem na jakiś kurs. Padło na Kurs JavaScript nabierz wprawy Zanim przejdzę do treści samego kursu, muszę zauważyć, że sam interfejs nie jest do końca dostępny, np. nie widać wskaźnika focusu na niektórych elementach (np. przyciskach). Przez to dość trudno rozwiązuje się poszczególne zadania, … Czytaj dalej Kurs JavaScript nabierz wprawy od Codengi 2020-11-29 00:19:45 kurs-javascript-nabierz-wprawy-od-codengi cki2dml0o000di3umgjexb6pk 2020-11-29 00:19:45 2020-11-29 00:19:45 chy741z6g0035i3um1229gm2n Nowy blog na temat języka JavaScript i nie tylko http://jcubic.pl/2014/07/nowy-blog-javascript.html

Jest to pierwszy post na blogu Głównie JavaScript. Od czasu do czasu\nbędę zamieszczał wpisy na tematy związane głównie z Front-Endem, czyli CSS, HTML i\nJavaScript, ale mogą pojawić się także posty na inne tematy. Treścią bloga będzie głównie\nJavaScript i na nim postarm się skupić. Będę omawiał podstawowe jak i zaawansowane\naspekty tworzenia aplikacji internetowych, skupiając się na warstwie Front-End.

\n\n\n
\n *** To tylko fragment wpisu! Kliknij na tytuł aby przeczytać całość. 2014-07-29 10:57:43 nowy-blog-na-temat-jezyka-javascript-i-nie-tylko ckfdlon7c0009i3umeitx0nz4 2014-07-29 10:57:43 2014-07-29 10:57:43 @@ -3143,6 +3174,7 @@ cjvws9ii001ksi3umf2dq2di9 O co chodzi z React Hooks? http://www.wakeupandcode.pl cjws3ebxk01lti3um1fq2aefg Kodowanie na macierzyńskim – oczekiwania a rzeczywistość http://www.wakeupandcode.pl/kodowanie-na-macierzynskim/

Kodowanie na macierzyńskim – czy to w ogóle możliwe? Przez wiele lat wydawało mi się, że urodzenie dziecka jest równoznaczne z końcem kariery. Wszystko zostaje w tyle, a na przód wysuwa się dziecko. Na szczęście, z czasem spotkałam na swojej drodze wiele mam, które z sukcesem łączyły pasje, pracę i wychowanie dziecka. Wtedy moje myślenie […]

\n

Artykuł Kodowanie na macierzyńskim – oczekiwania a rzeczywistość pochodzi z serwisu Wake up and Code.

2019-06-11 17:41:53 kodowanie-na-macierzynskim-oczekiwania-a-rzeczywistosc ckhgqbfog000ii3um332tat33 2019-06-11 17:41:53 2019-06-11 17:41:53 ck0wl3va801pzi3um63die6kj Lubisz języki obce? Zacznij kodować! https://www.wakeupandcode.pl/lubisz-jezyki-obce-zacznij-kodowac/

Od lat słyszysz, że jesteś humanistą/humanistką? Twoją mocną stroną jest nauka języków obcych? Wydaje Ci się, że w takim razie jedyna opcja to filologia? A co, jeśli powiem Ci, że możliwe, że idealnie nadajesz się do programowania? Temat na dziś to: języki obce a kodowanie! Ten wpis jest częścią cyklu Okiem filologa. Poprzedni artykuł serii, […]

\n

Artykuł Lubisz języki obce? Zacznij kodować! pochodzi z serwisu Wake up and Code.

2019-09-23 15:47:32 lubisz-jezyki-obce-zacznij-kodowac ckhgqbfog000ii3um332tat33 2019-09-23 15:47:32 2019-09-23 15:47:32 cjrq3uoow01f2i3umhdpj0qom Obserwujemy wszystko w Przeglądarce https://jcubic.pl/2019/02/obserwujemy-wszystkow-przegladarace.html

Obserwujemy wszystko w Przeglądarce

Lupa i książka

W przeglądarkach\n występują różne zdarzenia. Są one asynchroniczne, mimo że przeglądarka jest jednowątkowa, pomijając wątki worker’ów. Możemy się podpiąć pod te mechanizmy zdarzeń za pomocą różnych API\n dostępnych w przeglądarkach.


Kliknij aby zobaczyć cały artykuł 2019-02-04 09:00:32 obserwujemy-wszystko-w-przegladarce ckfdlon7c0009i3umeitx0nz4 2019-02-04 09:00:32 2019-02-04 09:00:32 +cjdsnxbmg00yni3umgmhw5byz 5 Bibliotek do przetwarzania obiektów JavaScript i JSON https://jcubic.pl/2018/02/5-bibliotek-i-narzedzi-do-json-a.html

5 Bibliotek do przetwarzania obiektów JavaScript i JSON

Klocki Lego

JSON to\n standard opracowany przez Douglasa Crockforda, na początku roku 2000, służący do zapisu obiektów w postaci tekstu. Dzisiaj trudno sobie wyobrazić pisanie aplikacji internetowych bez tego\n formatu. W tym wpisie przedstawię 5 ciekawych bibliotek i narzędzi, które operują na obiektach JSON lub obiektach JavaScript.


Kliknij aby\n zobaczyć cały artykuł 2018-02-18 10:42:07 5-bibliotek-do-przetwarzania-obiektow-javascript-i-json ckfdlon7c0009i3umeitx0nz4 2018-02-18 10:42:07 2018-02-18 10:42:07 ck166qlk001q8i3umhp7c0deh Gdy ktoś krytykuje Twój kod… Czyli feedback w code review https://www.wakeupandcode.pl/feedback-w-code-review/

Jesteś osobą, która dopiero uczy się kodowania albo stawia pierwsze kroki w pracy jako junior developer? Chcesz wiedzieć, jak przygotować się na feedback w code review? Jak wyciągnąć z niego lekcje? Ten wpis jest dla Ciebie! Uważam, że zaskakująco mało początkującym mówi się o tym, że nie wystarczy, by kod działał. Kiedy taka osoba wrzuca […]

\n

Artykuł Gdy ktoś krytykuje Twój kod… Czyli feedback w code review pochodzi z serwisu Wake up and Code.

2019-09-30 09:03:00 gdy-ktos-krytykuje-twoj-kod-czyli-feedback-w-code-review ckhgqbfog000ii3um332tat33 2019-09-30 09:03:00 2019-09-30 09:03:00 ck2hoqec001ryi3um6tr01xq0 Feedback w procesie rekrutacyjnym https://www.wakeupandcode.pl/feedback-proces-rekrutacyjny/

Przed Tobą poszukiwanie pierwszej pracy jako junior developer? Zastanawiasz się, jak najlepiej to ogarnąć? A może by tak zmienić podejście i feedback w procesie rekrutacyjnym uczynić głównym celem poszukiwania pracy? Zdaję sobie sprawę, że to może wydać się dziwne. W końcu proces rekrutacyjny ma nam dać pracę, a nie feedback. Nie czarujmy się jednak. Kiedy […]

\n

Artykuł Feedback w procesie rekrutacyjnym pochodzi z serwisu Wake up and Code.

2019-11-02 14:51:54 feedback-w-procesie-rekrutacyjnym ckhgqbfog000ii3um332tat33 2019-11-02 14:51:54 2019-11-02 14:51:54 ck3opasgo01tmi3um9mrk4bmt 50 dni z kodem, czyli na półmetku #100DaysofCode https://www.wakeupandcode.pl/polmetek-100daysofcode/

Minęło pięćdziesiąt dni, odkąd zdecydowałam się wziąć udział w wyzwaniu #100DaysofCode. Od tych pięćdziesięciu dni codziennie siadam do kodu (no, prawie codziennie, ale o tym dalej). Co daje mi wyzwanie i czy wytrwam pełne sto dni? Poczytajcie! O co chodzi w tym wyzwaniu? Wszystko zaczęło się od tego artykułu, w którym jego autor, Alexander Kallaway, […]

\n

Artykuł 50 dni z kodem, czyli na półmetku #100DaysofCode pochodzi z serwisu Wake up and Code.

2019-12-02 17:21:51 50-dni-z-kodem-czyli-na-polmetku-100daysofcode ckhgqbfog000ii3um332tat33 2019-12-02 17:21:51 2019-12-02 17:21:51 @@ -3161,7 +3193,6 @@ ckbxuw6940240i3ume105aeot Błędy w kodzie. Mój system debugowania https://www. ckcxeqtr40255i3umgrzs2col Jak uczyć się programowania bez wysiłku https://www.wakeupandcode.pl/jak-uczyc-sie-programowania-bez-wysilku/

Przyszły wakacje, przyszły upały! Nie zawsze chce się siedzieć na kodem. Jak uczyć się programowania bez wysiłku? Jak w swoją codzienność wpleść kod? Ale się naszukałam dobrej nazwy tego, co chcę dzisiaj opisać! Dlaczego? Otóż idealnie mi pasowało tutaj angielskie słówko effortless. Czyli coś, co jest lekkie, łatwe i swobodne. Taka moim zdaniem powinna być […]

\n

Artykuł Jak uczyć się programowania bez wysiłku pochodzi z serwisu Wake up and Code.

2020-07-22 13:33:40 jak-uczyc-sie-programowania-bez-wysilku ckhgqbfog000ii3um332tat33 2020-07-22 13:33:40 2020-07-22 13:33:40 ckdliqxuo025qi3um941nc6k4 Tutorial hell. Co to i jak sobie z tym poradzić? https://www.wakeupandcode.pl/tutorial-hell/

Kończysz jeden kurs online i od razu zaczynasz kolejny? Zamiast swojego projektu piszesz kod z tutoriali? Masz wrażenie, że samodzielnie nie wpadniesz na rozwiązania? Być może wpadasz w pułapkę tutorial hell! Sprawdź, jak się z niej wydostać. Tutorial hell – co to takiego? Wydaje mi się, że to wyrażenie dość trudno zgrabnie przenieść na język […]

\n

Artykuł Tutorial hell. Co to i jak sobie z tym poradzić? pochodzi z serwisu Wake up and Code.

2020-08-08 10:32:12 tutorial-hell-co-to-i-jak-sobie-z-tym-poradzic ckhgqbfog000ii3um332tat33 2020-08-08 10:32:12 2020-08-08 10:32:12 cjs6nxu0g01fsi3um9fcdbjgu Co to jest Transducer? https://jcubic.pl/2019/02/co-to-jest-transducer.html

Co to jest Transducer?

Kobieta w Kapeluszu rzucająca karty w powietrze
\n

Dzisiaj przedstawię ciekawą koncepcje z programowania funkcyjnego, a mianowicie transducer, czyli według Wikipedii przetwornik.


Kliknij aby zobaczyć cały artykuł 2019-02-15 23:07:10 co-to-jest-transducer ckfdlon7c0009i3umeitx0nz4 2019-02-15 23:07:10 2019-02-15 23:07:10 -cjdsnxbmg00yni3umgmhw5byz 5 Bibliotek do przetwarzania obiektów JavaScript i JSON https://jcubic.pl/2018/02/5-bibliotek-i-narzedzi-do-json-a.html

5 Bibliotek do przetwarzania obiektów JavaScript i JSON

Klocki Lego

JSON to\n standard opracowany przez Douglasa Crockforda, na początku roku 2000, służący do zapisu obiektów w postaci tekstu. Dzisiaj trudno sobie wyobrazić pisanie aplikacji internetowych bez tego\n formatu. W tym wpisie przedstawię 5 ciekawych bibliotek i narzędzi, które operują na obiektach JSON lub obiektach JavaScript.


Kliknij aby\n zobaczyć cały artykuł 2018-02-18 10:42:07 5-bibliotek-do-przetwarzania-obiektow-javascript-i-json ckfdlon7c0009i3umeitx0nz4 2018-02-18 10:42:07 2018-02-18 10:42:07 cjeckgsyw00z8i3um6qmxgncz O czym pamiętać tworząc bibliotekę Open Source w JavaScript https://jcubic.pl/2018/03/o-czym-pamietac-tworzac-biblioteke-open-source.html

O czym pamiętać tworząc bibliotekę Open Source w JavaScript

Logos for JavaScript tools\n

Jeśli masz zamiar napisać swoją własną bibliotekę Open Source w JavaScript, jest kilka rzeczy, o których warto pamiętać.


Kliknij aby zobaczyć cały artykuł 2018-03-04 09:00:41 o-czym-pamietac-tworzac-biblioteke-open-source-w-javascript ckfdlon7c0009i3umeitx0nz4 2018-03-04 09:00:41 2018-03-04 09:00:41 cjeqss3aw00zri3um226cc9qj Przeciążanie funkcji i metod w JavaScript https://jcubic.pl/2018/03/przeciazanie-funkcji-w-javascript.html

Przeciążanie funkcji i metod w JavaScript

Przeładowana ciężarówka w Indiach
\n

JavaScript jest językiem dynamicznym, w którym funkcje mogą przyjmować wiele argumentów. Nie ma w nim jednak mechanizmu, który by wywoływał inne funkcje w zależności do liczby\n argumentów (czyli nie obsługuje przeciążania funkcji). W tym wpisie przedstawię jak prosto można taki mechanizm dodać do języka.


Kliknij aby zobaczyć cały artykuł 2018-03-14 08:02:11 przeciazanie-funkcji-i-metod-w-javascript ckfdlon7c0009i3umeitx0nz4 2018-03-14 08:02:11 2018-03-14 08:02:11 cjgahwki80110i3um5ckd1vjn Selektor CSS dla rodzica https://jcubic.pl/2018/04/selektor-css-dla-rodzica.html

Selektor CSS dla rodzica

Ręka niemowlaka dotyka pomarszczonej ręki dorosłego
\n

Specyfikacja CSS3 nie udostępniała żadnej możliwości zaznaczania rodzica, natomiast moduł Selectors Level 4, który jest\n szkicem (ang. draft) udostępnia taką możliwość.


Kliknij aby zobaczyć cały\n artykuł 2018-04-22 07:32:50 selektor-css-dla-rodzica ckfdlon7c0009i3umeitx0nz4 2018-04-22 07:32:50 2018-04-22 07:32:50 @@ -3177,12 +3208,14 @@ cj0a4tbio0094i3umgno71izy Laravel Valet czyli proste i szybkie środowisko PHP n cj0fi3154009vi3um0kef9gve Laravel Valet i wiele wersji PHP jednocześnie https://webmastah.pl/laravel-valet-i-wiele-wersji-php-jednoczesnie/ Laravel Valet - wiele wersji PHP jednocześnie

Jak konfigurować Laravel Valet lub w ogóle Nginx na MacOS żeby mieć wiele wersji PHP odpalonych jednocześnie? Jak skonfigurować żeby uruchomić stare aplikacje? Czyli piekło "legacy" :D

\n

Artykuł Laravel Valet i wiele wersji PHP jednocześnie pochodzi z serwisu webMASTAH.

2017-03-18 17:01:25 laravel-valet-i-wiele-wersji-php-jednoczesnie ckcf8vjeg000ai3um1mox19e8 2017-03-18 17:01:25 2017-03-18 17:01:25 cj0jbx2mo00a7i3um0izvgv1j 3 powody, dla których dev musi być na infoShare 2017 https://webmastah.pl/3-powody-dla-ktorych-dev-musi-byc-na-infoshare-2017/ infoShare 2017

Mocny line-up dla deweloperów, eksperci ze Slacka, Netflixa oraz Google, liczne warsztaty i mnóstwo okazji do networkingu. To główne powody, dla których każdy programista powinien pojawić się na tegorocznym infoShare 17-19 maja w Gdańsku. W tym roku szczególny nacisk zostanie położony na software development i tematykę devops. Wśród tematów znajdą się m.in.: >Mastering browser devtools, Java performance, Kubernetes, Docker networking, czy microservices patterns.

\n

Artykuł 3 powody, dla których dev musi być na infoShare 2017 pochodzi z serwisu webMASTAH.

2017-03-21 09:19:54 3-powody-dla-ktorych-dev-musi-byc-na-infoshare-2017 ckcf8vjeg000ai3um1mox19e8 2017-03-21 09:19:54 2017-03-21 09:19:54 cj3395q3c00kai3umh88q92ye Daj Się Poznać 2017 [tydzień #13] – wdrożenie http://webroad.pl/inne/7068-dsp2017-wdrozenie-tydzien13 Przyznam się szczerze, że nie licząc kilku dzisiejszych poprawek zrobiłem w minionym tygodniu kompletne nic. Może na swoją obronę położę tu datę moich urodzin, przez co oddałem się w pełni popołudniowym godzinom lenistwa. Dzisiaj jednak przybiło mnie to, bo jest środa, a w środy zwykle miałem w changelogu garść zmian, które ochoczo prezentowałem. Postanowiłem więc […] 2017-05-24 17:17:27 daj-sie-poznac-2017-tydzien-13-wdrozenie ckir2fk800008i3um9c21fesl 2017-05-24 17:17:27 2017-05-24 17:17:27 +ck04c9wgw01pbi3umcyokd0b8 Jak posortować tablicę napisów z polskimi znakami https://jcubic.pl/2019/09/sortowanie-ciagow-znakow-polskie-znaki.html

Jak posortować tablicę napisów z polskimi znakami

Zdjęcie wzróru z kwadratowych przegórdek\n

Będzie to bardzo krótki wpis. Możliwe, że będzie to pierwszy z serii. Przedstawię w nim jak posortować tablicę alfabetycznie, która zawiera ciągi z polskimi znakami (ang.\n array of strings).


Kliknij aby zobaczyć cały artykuł 2019-09-03 21:22:44 jak-posortowac-tablice-napisow-z-polskimi-znakami ckfdlon7c0009i3umeitx0nz4 2019-09-03 21:22:44 2019-09-03 21:22:44 cj06fqsew008ri3umhevdfjs0 HTTP methods z Go i MongoDB – część 2 – GET https://www.dawidrylko.com/http-methods-go-mongodb-czesc-2-get/#utm_source=rss&utm_medium=rss&utm_campaign=http-methods-go-mongodb-czesc-2-get

Dawid Ryłko

\n

Dobrze zaplanowana praca, to podstawa. W poprzedniej części HTTP methods, nauczyliśmy się tworzyć produkty, za pomocą metody POST. W tym wpisie czas na pobieranie listy produktów oraz pojedynczego produktu po ID. Dzięki tym trzem endpointom będziemy mogli skutecznie i efektywnie rozpocząć pracę nad front-endem naszej aplikacji. HTTP methods – GET Do pobierania elementów z bazy MongoDB użyjemy Czytaj więcej

\n

Artykuł HTTP methods z Go i MongoDB – część 2 – GET pochodzi z serwisu Dawid Ryłko.

2017-03-12 08:45:59 http-methods-z-go-i-mongodb-czesc-2-get cj76ksqao000ei3uma7499rwf 2017-03-12 08:45:59 2017-03-12 08:45:59 cj0bccpg0009ei3umabtg6jp5 Shopping Manager mockup https://www.dawidrylko.com/shopping-manager-mockup/#utm_source=rss&utm_medium=rss&utm_campaign=shopping-manager-mockup

Dawid Ryłko

\n

Pracuję efektywnie, jeśli mam jasno sprecyzowane cele i wymagania. Najwyższy czas skupić się nad logiką aplikacji. Poniższy wpis, to pseudo makieta konkursowego projektu Shopping Manager. Shopping Manager – Funkcjonalność Aplikacja Shopping Manager ma na celu pomoc w racjonalnym robieniu zakupów spożywczych, optymalizację wydatków finansowych związanych z żywieniem oraz łatwym i przejrzystym zarządzaniem listą zakupową oraz budżetem Czytaj więcej

\n

Artykuł Shopping Manager mockup pochodzi z serwisu Dawid Ryłko.

2017-03-15 19:09:54 shopping-manager-mockup cj76ksqao000ei3uma7499rwf 2017-03-15 19:09:54 2017-03-15 19:09:54 cj0dxnivs009mi3umfu8kdo0n HTTP methods z Go i MongoDB – część 3 – PUT i DELETE https://www.dawidrylko.com/http-methods-z-go-i-mongodb-czesc-3-put-i-delete/#utm_source=rss&utm_medium=rss&utm_campaign=http-methods-z-go-i-mongodb-czesc-3-put-i-delete

Dawid Ryłko

\n

W poprzednich dwóch częściach cyklu nauczyliśmy się tworzyć produkty, pobierać listę produktów oraz pojedynczy produkt za pomocą ID. Poniższy wpis zademonstruje, w jaki sposób możemy zaaktualizować produkt oraz jak go usunąć, czyli poznamy metody PUT i DELETE. HTTP methods – PUT Aktualizacja produktu Do aktualizacji produktu wykorzystamy wiedzę, którą zdobyliśmy do tej pory – czyli Czytaj więcej

\n

Artykuł HTTP methods z Go i MongoDB – część 3 – PUT i DELETE pochodzi z serwisu Dawid Ryłko.

2017-03-17 14:41:43 http-methods-z-go-i-mongodb-czesc-3-put-i-delete cj76ksqao000ei3uma7499rwf 2017-03-17 14:41:43 2017-03-17 14:41:43 cj0h0v2yw009zi3um9xjucw3x Angular 2 – Angular CLI – pierwsze kroki https://www.dawidrylko.com/angular-2-angular-cli-pierwsze-kroki/#utm_source=rss&utm_medium=rss&utm_campaign=angular-2-angular-cli-pierwsze-kroki

Dawid Ryłko

\n

Szybki i przyjemny frontend aplikacji internetowej, to marzenie wielu deweloperów. Na przeciw oczekiwaniom programistów wyszedł Google, z produktem Angular CLI. Dedykowany command-line interface ma jedno zasadnicze zadanie, przyspieszyć i maksymalnie uprościć pracę w standardowych czynnościach związanych z tworzeniem i zarządzaniem projektem. Instalacja Angular CLI Pierwszy etap pracy z Angular CLI, to globalne zainstalowanie paczki @angular/cli przez npm: npm Czytaj więcej

\n

Artykuł Angular 2 – Angular CLI – pierwsze kroki pochodzi z serwisu Dawid Ryłko.

2017-03-19 18:34:53 angular-2-angular-cli-pierwsze-kroki cj76ksqao000ei3uma7499rwf 2017-03-19 18:34:53 2017-03-19 18:34:53 cj0muyxkw00api3um6dzg95e7 Angular2 – HTTP – pobieranie danych – @angular/http https://www.dawidrylko.com/angular2-http-pobieranie-danych/#utm_source=rss&utm_medium=rss&utm_campaign=angular2-http-pobieranie-danych

Dawid Ryłko

\n

W poprzednim wpisie utworzyliśmy aplikację w Angular2 z pomocą Angular CLI. W tym wpisie stworzymy prosty serwis do pobierania danych z API oraz wyświetlimy wynik naszej pracy w przeglądarce. Do komunikacji wykorzystamy paczkę Angular2 – HTTP (@angular/http). HTTP Module Http Module nie należy do rdzenia Angular2. Jest dodatkowym modułem wykorzystywanym do komunikacji w sieci. Aby go wykorzystać należy zaimportować Czytaj więcej

\n

Artykuł Angular2 – HTTP – pobieranie danych – @angular/http pochodzi z serwisu Dawid Ryłko.

2017-03-23 20:36:32 angular2-http-pobieranie-danych-angularhttp cj76ksqao000ei3uma7499rwf 2017-03-23 20:36:32 2017-03-23 20:36:32 cj0qsa8bs00b4i3umda378zx7 Shopping Manager – jadłospis, produkt, przepis https://www.dawidrylko.com/shopping-manager-jadlospis-produkt-przepis/#utm_source=rss&utm_medium=rss&utm_campaign=shopping-manager-jadlospis-produkt-przepis

Dawid Ryłko

\n

Do usystematyzowania pracy nad projektem Shopping Manager, należy w tym momencie sprecyzować, jak będą wyglądać kluczowe elementy naszego systemu. W tym krótkim wpisie zastanowię się jakie pola powinien mieć jadłospis produkt oraz przepis. Planowanie Aplikacja Shopping Manager powinna pozwolić użytkownikowi na określenie budżetu tygodniowego. Na tej podstawie powinien być generowany jadłospis. Jadłospis zawiera zbiór przepisów, a każdy Czytaj więcej

\n

Artykuł Shopping Manager – jadłospis, produkt, przepis pochodzi z serwisu Dawid Ryłko.

2017-03-26 14:32:25 shopping-manager-jadlospis-produkt-przepis cj76ksqao000ei3uma7499rwf 2017-03-26 14:32:25 2017-03-26 14:32:25 +ckti84wgh00020wmt1rat80vh React Children & TypeScript - jak to ogarnąć? https://frontlive.pl/blog/react-children-i-typescirpt Koncepcja dzieci w Reakcie pojawia się nam już w bardzo wczesnych etapach nauki. Ich sposób działania po chwili okazuje się bardzo prosty, ale w praktyce children oferują znacznie więcej, są trochę tricki i potrafią zaskoczyć 🤔 Jak więc sobie z nimi radzić i na co uważać podczas ich wykorzystania? 2021-09-13 00:00:00 react-children-and-typescript-jak-to-ogarnac ckgvhpmo0001ji3umfm7ubw86 2021-09-13 05:47:06.449 2021-09-13 05:47:06.449 cj0y485rs00bwi3umapzhcu0e Angular2 – Reactive Forms – wprowadzenie do formularzy https://www.dawidrylko.com/angular2-reactive-forms-wprowadzenie-formularzy/#utm_source=rss&utm_medium=rss&utm_campaign=angular2-reactive-forms-wprowadzenie-formularzy

Dawid Ryłko

\n

Angular2 pozwala nam na stworzenie dwóch rodzajów formularzy: reactive forms (zwane też model-driven forms) i template-driven forms. Oba rodzaje znajdują się w bibliotece @angular/form. W tym wpisie przyjrzymy się pierwszej z technik tworzenia formularzy, czyli reactive forms. Reactive forms Reactive forms, jak sama nazwa wskazuje wspomagają reaktywny styl budowania aplikacji. Formularze tworzy się w wygodny i szybki sposób. Łatwo Czytaj więcej

\n

Artykuł Angular2 – Reactive Forms – wprowadzenie do formularzy pochodzi z serwisu Dawid Ryłko.

2017-03-31 17:41:07 angular2-reactive-forms-wprowadzenie-do-formularzy cj76ksqao000ei3uma7499rwf 2017-03-31 17:41:07 2017-03-31 17:41:07 cj10oilso00c9i3umf5sf41wp Angular2 – Reactive Forms – tworzenie formularza reaktywnego https://www.dawidrylko.com/angular2-reactive-forms-tworzenie-formularza-reaktywnego/#utm_source=rss&utm_medium=rss&utm_campaign=angular2-reactive-forms-tworzenie-formularza-reaktywnego

Dawid Ryłko

\n

W poprzednim wpisie dowiedzieliśmy się czym są reaktywne formularze. Czas na wprowadzenie teorii w życie. W tym krótkim wpisie dowiemy się, że tworzenie formularza reaktywnego nie jest tak skomplikowane, jak nam się wydaje. Przygotowanie Na początku przygotujmy sobie miejsce, gdzie stworzymy nasz formularz. Do przygotowania struktury użyjemy komendy Angular CLI: ng g c product/product-form. W katalogu product, został Czytaj więcej

\n

Artykuł Angular2 – Reactive Forms – tworzenie formularza reaktywnego pochodzi z serwisu Dawid Ryłko.

2017-04-02 12:44:39 angular2-reactive-forms-tworzenie-formularza-reaktywnego cj76ksqao000ei3uma7499rwf 2017-04-02 12:44:39 2017-04-02 12:44:39 cj16of7u800d0i3umge9u80pa CORS – golang – gorilla/handlers https://www.dawidrylko.com/cors-golang-gorilla-handlers/#utm_source=rss&utm_medium=rss&utm_campaign=cors-golang-gorilla-handlers

Dawid Ryłko

\n

Dzisiejszy wpis został wymuszony przez zaistniałą sytuację. Powrócił bowiem jak bumerang problem, który zignorowałem wcześniej. Stąd też rozprawka zatytułowana: CORS – golang, która jest opisem problemu z Cross-Origin Resource Sharing na serwerze w języku Go. Trochę teorii CORS (Cross-Origin Resource Sharing) to technologia pozwalająca na wykonywanie asynchronicznych zapytań do każdego miejsca w sieci. Warunek jest jeden, musimy dostać zgodę Czytaj więcej

\n

Artykuł CORS – golang – gorilla/handlers pochodzi z serwisu Dawid Ryłko.

2017-04-06 17:28:38 cors-golang-gorillahandlers cj76ksqao000ei3uma7499rwf 2017-04-06 17:28:38 2017-04-06 17:28:38 @@ -3195,6 +3228,7 @@ cjoq8kkfs01api3um7pkg3qs5 Jak napisać prostą bibliotekę obsługi DOM zamiast cjpfqdcsw01bmi3umbo3l4hi2 System komentarzy "HashOver" jako alternatywa dla Disqus https://jcubic.pl/2018/12/system-komentarzy-hashover-alternatywa-disqus.html

System komentarzy "HashOver" jako alternatywa dla Disqus

Napis 'Comments' po anielsku
\n

W zeszły miesiącu usunąłem komentarze Disqus, zastępując je aplikacją HashOver (w wersji next, czyli to co kiedyś\n będzie HashOver 2.0), która jest dostępna na licencji GNU Affero GPL i napisana w PHP, dlatego można jej\n użyć, gdy masz swój blog na współdzielonym hostingu tak jak ja. Nawet gdy jest to blog plików statycznych, tak jak Głównie JavaScript.

Nie musicie się przejmować wersją\n licencji Affero, która wymusza udostępnienie kodu źródłowego, nawet jeśli mamy aplikacje gdzieś na serwerze i jej nie kopiujemy, ponieważ zawiera wbudowaną przeglądarkę kodu PHP.

\n

Zmiana systemu komentarzy była spowodowana tym, że w konsoli dostawałem 404 z jakiejś dziwnej domeny i były jakieś dziwne ciasteczka. Disqus dodaje też reklamy, na szczęście tylko\n jeśli ma się odpowiednio duży ruch na stronie, którego jeszcze nie przekroczyłem. W tym wpisie przedstawie jak dodać HashOver do strony, który jest dość prosty, ale najważniejszą częścią\n będzie, jak zaimportować komentarze z Disqus.


Kliknij aby zobaczyć cały artykuł 2018-12-08 17:26:02 system-komentarzy-hashover-jako-alternatywa-dla-disqus ckfdlon7c0009i3umeitx0nz4 2018-12-08 17:26:02 2018-12-08 17:26:02 cjpwtrzxk01cdi3umdggbc4n2 Zmiana styli CSS gdy JavaScript jest włączony lub nie w samym CSS https://jcubic.pl/2018/12/zmiana-styli-css-wylaczony-javascript.html

Zmiana styli CSS gdy JavaScript jest włączony lub nie w samym CSS

Włącznik Światła z ikonką\n żarówki

Gdy mamy layout i chcemy, aby pojawił się baner, że aplikacja wymaga JavaScript’u, najczęstszym rozwiązaniem jest dodanie klasy do html np.\n no-js i usunięcie jej w JavaScripcie.

Jest jednak sposób, aby to zrobić, w samym CSS.


Kliknij aby zobaczyć cały artykuł 2018-12-20 16:33:29 zmiana-styli-css-gdy-javascript-jest-wlaczony-lub-nie-w-samym-css ckfdlon7c0009i3umeitx0nz4 2018-12-20 16:33:29 2018-12-20 16:33:29 cjqthw1g001dii3umgky4bses Gigantyczne liczby w JavaScript https://jcubic.pl/2019/01/gigantyczne-liczby-javascript.html

Gigantyczne liczby w JavaScript

Napis 'Big Int' na tle cyfr będących pierwszymi z silini z tysiąca\n

W języku JavaScript typ number, czyli dowolna zwykła liczba, jest w istocie typu float. Dlatego liczba wartości tego typu jest ograniczona, klasycznym problemem tego typy\n liczb jest np.: 0.2 + 0.1 != 0.3. Istnieje jednak nowe API oraz biblioteki, które umożliwiają operacje na liczbach całkowitych o dowolnej\n wielkości. Można ich także użyć do obliczeń zmiennoprzecinkowych.


Kliknij aby zobaczyć cały\n artykuł 2019-01-12 13:17:06 gigantyczne-liczby-w-javascript ckfdlon7c0009i3umeitx0nz4 2019-01-12 13:17:06 2019-01-12 13:17:06 +cktmvbkoq00020wlbfd3yhtyy Frontend Thursday vol. 55 https://vived.io/frontend-thursday-vol-55/

W dzisiejszej edycji mamy dla Was draft pipeline operator, który trafił do drugiego etapu procesu TC39, Corepack czyli menadżer menadżerów pakietów i nowy format zdjęć od Google.

\n

Artykuł Frontend Thursday vol. 55 pochodzi z serwisu Vived.

2021-09-16 11:43:35 frontend-thursday-vol.-55 ckmor5k8y000044moj65m13y0 2021-09-16 11:47:13.658 2021-09-16 11:47:13.658 cj1xxg05s00g7i3umcei33jjf Chatbot, Wit.ai – środowisko graficzne https://www.dawidrylko.com/chatbot-wit-ai-srodowisko-graficzne/#utm_source=rss&utm_medium=rss&utm_campaign=chatbot-wit-ai-srodowisko-graficzne

Dawid Ryłko

\n

W poprzednim wpisie dowiedzieliśmy się czym są chatboty, do czego mogą służyć oraz było kilka słów o jednym z systemów do ich tworzenia. Dzisiaj przyjrzymy się nieco bardziej środowisku graficznemu Wit.ai oraz zaczniemy projektować prostego chatbota. Tworzenie aplikacji Wit.ai Tworzenie aplikacji w Wit.ai jest bardzo proste i intuicyjne. W górnej belce należy kliknąć znak +. Zostaniemy przekierowani na Czytaj więcej

\n

Artykuł Chatbot, Wit.ai – środowisko graficzne pochodzi z serwisu Dawid Ryłko.

2017-04-25 19:10:58 chatbot-witai-srodowisko-graficzne cj76ksqao000ei3uma7499rwf 2017-04-25 19:10:58 2017-04-25 19:10:58 cj228npkg00goi3um1npdfpuv Migracja do Angular4 https://www.dawidrylko.com/migracja-do-angular4/#utm_source=rss&utm_medium=rss&utm_campaign=migracja-do-angular4

Dawid Ryłko

\n

Nowy Angular żyje i ma się nad wyraz dobrze. Efektem było wypuszczenie nieco ponad miesiąc temu wersji 4.0.0, z kolei zaledwie przedwczoraj wyszła wersja 4.1.0. W tym wpisie omówimy po krótce nową wersję oraz przeprowadzimy migrację z wersji Angular2 do Angular4. Angular4 – co nowego? Mniej znaczy szybciej Projektanci frameworka postawili sobie za cel przyspieszenie oraz zredukowanie Czytaj więcej

\n

Artykuł Migracja do Angular4 pochodzi z serwisu Dawid Ryłko.

2017-04-28 19:35:58 migracja-do-angular4 cj76ksqao000ei3uma7499rwf 2017-04-28 19:35:58 2017-04-28 19:35:58 cj28x62yg00hei3umdtel2k5o Automatyczny deploy aplikacji Angular na Heroku https://www.dawidrylko.com/automatyczny-deploy-aplikacji-angular2-na-heroku/#utm_source=rss&utm_medium=rss&utm_campaign=automatyczny-deploy-aplikacji-angular2-na-heroku

Dawid Ryłko

\n

Proces deploymentu, to dla deweloperów temat rzeka. Mamy obecnie wiele możliwości oraz wiele gotowych rozwiązań. W tym wpisie zademonstruję jak wykonać deploy aplikacji napisanej przy użyciu frameworka Angular na Heroku. Przygotowanie Na początku musimy trochę zmodyfikować package.json, który został wygenerowany za pomocą Angular CLI. Nasza aplikacja będzie budowana bezpośrednio na serwerze Heroku, dlatego musimy przenieść Czytaj więcej

\n

Artykuł Automatyczny deploy aplikacji Angular na Heroku pochodzi z serwisu Dawid Ryłko.

2017-05-03 11:48:43 automatyczny-deploy-aplikacji-angular-na-heroku cj76ksqao000ei3uma7499rwf 2017-05-03 11:48:43 2017-05-03 11:48:43 @@ -3220,25 +3254,27 @@ cin1ohwqo0059i3um5n137drl Meet.js Summit 2016 - kino, film i porodówka http://f civbaes800063i3um0kil4up7 Warsztat Gamedev.js: Tworzenie gier HTML5 - od pomysłu do realizacji http://feedproxy.google.com/~r/end33r/~3/HIMmDK9yv2g/ Czas odkurzyć nieco bloga i zaproponować tym, którzy tu jeszcze zaglądają jedyną i niepowtarzalną okazję - nauki tworzenia gier HTML5 ze mną w roli głównej. Warsztat odbędzie się już 20 listopada w Warszawie.
\r\n
\r\n

Gamedev.js Warsztat

Tworzenie gier HTML5 - od pomysłu do realizacji; zajrzyjcie na stonę wydarzenia, jeśli chcecie poznać szczegóły. Całość jest pod szyldem Gamedev.js, z organizacją pomaga mi Grzegorz Bagrowski, a miejsce w siedzibie Avivy oraz wsparcie logistyczne oferuje Van Anh Dam z Fundacji Girls Code Fun organizującej spotkania Koła Programistek Miejskich. Ja poprowadzę część dotyczącą programowania, a przede mną gościnnie pojawi się Nikola Adamus i opowie o projektowaniu gier - niekoniecznie komputerowych.
\r\n
\r\nCeny biletów chcieliśmy ustalić na jak najniższym poziomie - tak, by nie być na tym stratnym, ale jednocześnie zapewnić Wam jak najlepsze warunki, a przy okazji zmierzyć także zainteresowanie takim tematem. Pierwsze 5 sztuk early bird kosztują jedynie 59 PLN, a normalne to wydatek 79 PLN - jak za cały dzień warsztatu w gronie ekspertów, z obiadem i przekąskami to chyba rozsądna cena.
\r\n
\r\nCzy będzie to pierwszy warsztat z wielu? Gdzie i w jakiej formie może nastąpić kontynuacja? Ciężko powiedzieć - zobaczymy jakie będzie zainteresowanie, po wydarzeniu na pewno będziemy mądrzejsi. Jeśli więc jesteś zainteresowany nauką projektowania gier i wprowadzeniem do tworzenia gier HTML5 z frameworkiem Phaser, chcesz łatwo i przyjemnie wchłonąć wiedzę na ten temat, to kup bilet i przyjdź! 2016-11-09 18:57:00 warsztat-gamedevjs-tworzenie-gier-html5-od-pomyslu-do-realizacji cj0e03c5c0005i3umcmdvbfnx 2016-11-09 18:57:00 2016-11-09 18:57:00 ciwevk2yo0068i3umbq9th11n Druga edycja warsztatu Gamedev.js http://feedproxy.google.com/~r/end33r/~3/BvDE906Dn14/ Pierwsze szkolenie z Tworzenia gier HTML5 cieszyło się tak dużym zainteresowaniem, że postanowiliśmy jak najszybciej zorganizować jego drugą edycję.
\r\n
\r\n

Gamedev.js Warsztat

Bilety na szkolenie, które odbyło się 20 listopada, rozeszły się w niecałe 24 godziny - tego chyba nikt się nie spodziewał. Opinie po wydarzeniu były pozytywne, a co najmniej kilka osób pytało się o kolejne, więc już w najbliższą niedzielę 11 grudnia w siedzibie Avivy w Warszawie spotkamy się po raz drugi.
\r\n
\r\nTym razem, we współpracy z fundacją Girls Code Fun, zdecydowaliśmy się przeznaczyć połowę biletów dla dziewczyn - zapraszamy wszystkie panie, które chciałyby poznać tajniki projektowania, a także programowania gier HTML5.
\r\n
\r\nPlan pozostaje taki sam jak wcześniej - Nikola opowie o projektowaniu, a ja o programowaniu z frameworkiem Phaser. Nie czekaj, kup bilet i bądź z nami w niedzielę! 2016-12-07 11:52:00 druga-edycja-warsztatu-gamedevjs cj0e03c5c0005i3umcmdvbfnx 2016-12-07 11:52:00 2016-12-07 11:52:00 ciz4bpt1c0074i3umcoxtcy1e Gamedev.js Warszawa #1 można uznać za udany http://feedproxy.google.com/~r/end33r/~3/FWb4Utruvdc/ Pod koniec stycznia wystartowały spotkania Gamedev.js w Warszawie - świetna okazja, by zebrać warszawską (a może i Polską) społeczność twórców gier HTML5 w jednym miejscu.
\r\n
\r\n

Gamedev.js Warszawa #1

Pierwsza edycja odbyła się dwa tygodnie temu, we wtorek 31 stycznia w lokalu Państwomiasto. Wypadła bardzo dobrze - przyszło około 50-60 osób, nie było żadnych problemów technicznych, a opinie ludzi były jedynie pozytywne. Zdjęcia (autorstwa współorganizatora, Grześka Bagrowskiego) znajdziecie tutaj, natomiast linki do nagrań z prelekcji (autorstwa Kamila Grabowskiego z Whitestream) są poniżej:
\r\n
\r\n
\r\nMożna tez obejrzeć całą playlistę z tego wydarzenia - pamiętajcie, by zasubskrybować kanał jeśli chcecie być na bieżąco z nagraniami z kolejnych spotkań. Pierwsza edycja odbyła się przy wsparciu sponsorów: Mozilli oraz Iterators - wielkie dzięki za zaufanie od samego początku! Podziękowania także dla prelegentów, którzy poświęcili czas, by opowiedzieć o swoich projektach. Pamiętaj: jeśli masz coś ciekawego o czym chciałbyś opowiedzieć przed społecznością, to odezwij się na kontakt@gamedevjs.com.
\r\n
\r\n

Gamedev.js Warszawa #1 people


\r\nPo ilości uczestników widać, że meetup ma spory potencjał - planujemy już kolejne spotkania, które chcielibyśmy organizować w miesięcznych odstępach. Co prawda nagrywanie prelekcji oraz kupony na piwo wiążą się z kosztami, ale wydaje nam się, że to jest jedyna słuszna droga. Chcielibyśmy także w przyszłości przygotować nasze naklejki, koszulki i inne gadżety, dlatego poszukujemy sponsorów - zgłoś się na kontakt@gamedevjs.com jeśli Twoja firma jest w stanie wspomóc naszą inicjatywę.
\r\n
\r\nDrugie spotkanie odbędzie się już w następną środę, 22 lutego - zapraszamy wszystkich chętnych, wpadajcie! 2017-02-13 16:38:00 gamedevjs-warszawa-1-mozna-uznac-za-udany cj0e03c5c0005i3umcmdvbfnx 2017-02-13 16:38:00 2017-02-13 16:38:00 +cktn8wbyx00020wlcwxfkik3a Co znajdziecie w moim kursie React? ⌨️ hello roman #168 https://www.youtube.com/watch?v=vM2LbeHX7zs ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\nLista tematów w kursie React:\nPodstawy React:\n- Czym jest React i JSX?\n- Konfiguracja współczesnego developmentu (Webpack i Babel) \n- Create React App i struktura projektu \n- CSS Modules vs Styled Components \n- Obsługa eventów \n- Cykl życia komponentów / komponenty klasowe\n- Inputy, formularze i podstawy routingu\n\nTematy średniozaawansowane:\n- React Context\n- Testy z Jest i React Testing Library\n- Axios, podłączenie HeadlessCMS \n- Tworzenie fasady backendu z Mock Service Worker \n- Konfiguracja i użycie Storybooka \n- Logowanie do aplikacji (uwierzytelnianie) \n- Testy jednostkowe i integracyjne\n\nReact Zaawansowany:\n- Zaawansowane inputy z użyciem Downshift \n- Tworzenie Modale z użyciem React Portal \n- Mockowanie bazy danych z Mock Service Worker Data \n- Wzorzec globalnej obsługi błędów w aplikacji \n- Starsze wzorce w React – Higher Order Components i Render Props \n- Zaawansowane Hooki w React oraz tworzenie własnych \n- Redux od podstaw \n- Użycie Redux Toolkit w aplikacji \n- Podłączenie Redux Toolkit do API\n- Testy E2E z użyciem Cypress \n- Podejście do refactorowania projektu \n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter/\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-09-16 17:51:06 co-znajdziecie-w-moim-kursie-react-hello-roman-168 ckiswuz9s0017i3um5mg4h7q1 2021-09-16 18:07:17.145 2021-09-16 18:07:17.145 cj0mj387c00ami3um3vce4v0f HTML z palca? Jak zwierzęta? Tylko Emmet! [film] https://webmastah.pl/html-z-palca-jak-zwierzeta-tylko-emmet/ emmet

Div, span, lista, lista, link, link. Mozolne pisanie HTMLa „z palca”. Znacie to? A gdyby można było automagicznie dużo szybciej? Poznajcie Emmeta.

\n

Artykuł HTML z palca? Jak zwierzęta? Tylko Emmet! [film] pochodzi z serwisu webMASTAH.

2017-03-23 15:03:57 html-z-palca-jak-zwierzeta-tylko-emmet-film ckcf8vjeg000ai3um1mox19e8 2017-03-23 15:03:57 2017-03-23 15:03:57 cj0zrxj3400c5i3um4hm26l2b Kurs Vue.js krok po kroku – wprowadzenie i hello world https://webmastah.pl/kurs-vue-js-krok-po-kroku-wprowadzenie-i-hello-world/

Dokładając swoją cegiełkę do popularności vue.js chciałbym przedstawić poniższy kurs jako wprowadzenie i pierwsze kroki z tym frameworkiem. Kurs przejdzie od totalnych podstaw, poprowadzi za rękę i doprowadzi cię do miejsca w którym wykonasz już proste komponenty i będziesz mógł dalej zgłębiać swoją wiedzę w tym temacie.

\n

Artykuł Kurs Vue.js krok po kroku – wprowadzenie i hello world pochodzi z serwisu webMASTAH.

2017-04-01 21:32:28 kurs-vuejs-krok-po-kroku-wprowadzenie-i-hello-world ckcf8vjeg000ai3um1mox19e8 2017-04-01 21:32:28 2017-04-01 21:32:28 cj1170wog00cci3um87qo8d6r Prosty deploy przez GITa https://webmastah.pl/prosty-deploy-przez-gita/ Git deploy

Temat wypychania aplikacji na produkcję jest dosyć szeroki. Mamy sporo możliwości, choćby korzystając z takiego oprogramowania jak chyba najpopularniejsze Capistrano, Mina, czy wspomagając się narzędziami typu Ansible. Ale nie zawsze potrzebujemy strzelać z armaty do muchy. Przy mini projektach przesyłanych na naszego VPSa można to zrobić w banalnie prosty sposób przy wykorzystaniu GITa, którego i tak używamy.

\n

Artykuł Prosty deploy przez GITa pochodzi z serwisu webMASTAH.

2017-04-02 21:22:46 prosty-deploy-przez-gita ckcf8vjeg000ai3um1mox19e8 2017-04-02 21:22:46 2017-04-02 21:22:46 cj15ehchk00cxi3umc2fwcy7z webMASTAH.weekly.033 – Programiści – rozpuszczone dzieci internetu https://webmastah.pl/webmastah-weekly-033-programisci-rozpuszczone-dzieci-internetu/

- Czy jesteś krętaczem czy programistą : Kariera programisty
\n- Programiści – rozpuszczone dzieci internetu
\n- Umiejętności i kwalifikacje przydatne w pracy programisty
\n- JAK ZROBIĆ KROK DALEJ JAKO JUNIOR DEVELOPER?
\n- What's New in the Bootstrap 4 Grid

\n

Artykuł webMASTAH.weekly.033 – Programiści – rozpuszczone dzieci internetu pochodzi z serwisu webMASTAH.

2017-04-05 20:02:35 webmastahweekly033-programisci-rozpuszczone-dzieci-internetu ckcf8vjeg000ai3um1mox19e8 2017-04-05 20:02:35 2017-04-05 20:02:35 cj19rmbq000dbi3um1zyg658n Kurs Vue.js krok po kroku – Chrome DevTools https://webmastah.pl/kurs-vue-js-krok-po-kroku-chrome-devtools/ vuejs-chrome-devtools

Zanim przejdziemy do praktycznej części kursu warto wykonać jeszcze jeden drobny krok i zainstalować vue-devtools. To rozszerzenie dla przeglądarki Chrome, która bardzo ułatwia pracę z vue.js. W prosty i czytelny sposób pokazuje nam „debug mode” naszej aplikacji i ułatwia pracę na poszczególnych elementach.

\n

Artykuł Kurs Vue.js krok po kroku – Chrome DevTools pochodzi z serwisu webMASTAH.

2017-04-08 21:21:27 kurs-vuejs-krok-po-kroku-chrome-devtools ckcf8vjeg000ai3um1mox19e8 2017-04-08 21:21:27 2017-04-08 21:21:27 ck4bt8cvk01ufi3umhznmbopt Tryb ciemny dostępny w CSS https://jcubic.pl/2019/12/tryb-ciemny-css.html

Tryb ciemny dostępny w CSS

Zdjęcie czaszki na cmentarzu

Mamy\n dostęp do nowej ciekawej funkcji, która jest częścią specyfikacji CSS: Media Queries Level 5. Jest już dostępna w nowoczesnych przeglądarkach.

W tym wpisie\n przedstawię funkcję, dzięki której można wykryć, czy strona internetowa, powinna prezentować się w ciemniejszych kolorach.


Kliknij aby zobaczyć cały artykuł 2019-12-18 21:30:38 tryb-ciemny-dostepny-w-css ckfdlon7c0009i3umeitx0nz4 2019-12-18 21:30:38 2019-12-18 21:30:38 -ck04c9wgw01pbi3umcyokd0b8 Jak posortować tablicę napisów z polskimi znakami https://jcubic.pl/2019/09/sortowanie-ciagow-znakow-polskie-znaki.html

Jak posortować tablicę napisów z polskimi znakami

Zdjęcie wzróru z kwadratowych przegórdek\n

Będzie to bardzo krótki wpis. Możliwe, że będzie to pierwszy z serii. Przedstawię w nim jak posortować tablicę alfabetycznie, która zawiera ciągi z polskimi znakami (ang.\n array of strings).


Kliknij aby zobaczyć cały artykuł 2019-09-03 21:22:44 jak-posortowac-tablice-napisow-z-polskimi-znakami ckfdlon7c0009i3umeitx0nz4 2019-09-03 21:22:44 2019-09-03 21:22:44 ck0oaad8001pri3umcu836t12 Prosty Czat w JavaScript, PHP i SQLite https://jcubic.pl/2019/09/prosty-czat-javascript-php-sqlite.html

Prosty Czat w JavaScript, PHP i SQLite

Grafika Wektorowa przedstawiająca symbloliczną aplikacje\n czatu na telefonie

Server-sent events (SSE) to alternatywa dla Web Sockets (gniazd) dla serwerów, które nie mają\n możliwości odpalania nic na portach. Czyli np. w przypadku zwykłych kont współdzielonych (ang. shared hosting), które najczęściej udostępniają tylko PHP. W tym wpisie przedstawię jak napisać\n prosty, nowoczesny czat w JavaScript i PHP, korzystając z Server-sent events oraz AJAX, przy wykorzystaniu popularnej bazy danych SQLite.


Kliknij aby zobaczyć cały artykuł 2019-09-17 20:22:30 prosty-czat-w-javascript-php-i-sqlite ckfdlon7c0009i3umeitx0nz4 2019-09-17 20:22:30 2019-09-17 20:22:30 ck1es9lpc01qki3um9n18173s 20 rzeczy, które warto znać ucząc się tworzenia stron i aplikacji www https://jcubic.pl/2019/10/co-trzeba-wiedziec-nauka-stron-aplikacji-www.html

20 rzeczy, które warto znać ucząc się tworzenia stron i aplikacji www

Zdjęcie z\n książką o CSS i HTML, laptopem i notatnikiem z napisem: 20 rzeczy, które warto znać ucząc się tworzenia stron i aplikacji www

Zanim zaczniesz naukę tworzenia stron\n oraz aplikacji internetowych, warto poznać kilka podstawowych rzeczy. W tym wpisie przedstawię co powinieneś znać. Są to informacje, które możesz poznawać w trakcie nauki. Tutaj masz w jednym\n miejscu 20 punktów, które oprócz HTML, CSS oraz JavaScript powinieneś znać, gdy zajmujesz się tworzeniem stron lub aplikacji internetowych.


Kliknij aby zobaczyć cały artykuł 2019-10-06 09:27:48 20-rzeczy-ktore-warto-znac-uczac-sie-tworzenia-stron-i-aplikacji-www ckfdlon7c0009i3umeitx0nz4 2019-10-06 09:27:48 2019-10-06 09:27:48 ck2unrnc801shi3um29z837qa Konferencja Front-End w Grudniu w Warszwie https://jcubic.pl/2019/11/konferencja-javascript-grudzien-2019.html

Konferencja Front-End w Grudniu w Warszwie

Grafika zawierająca zdjęcie z\n prelegentem z konferencji oraz tekstem Front-End conference oraz logo konferencji

W grudniu w Warszawie odbędzie się ciekawa jednodniowa konferencja. Chodzi o ConfrontJS. Mój blog objął patronat medialny nad konferencją. Z tej okazji oferuje 25% zniżki na bilety oraz\n konkurs gdzie można wygrać darmowy bilet na konferencje.


Kliknij aby zobaczyć cały\n artykuł 2019-11-11 16:45:53 konferencja-front-end-w-grudniu-w-warszwie ckfdlon7c0009i3umeitx0nz4 2019-11-11 16:45:53 2019-11-11 16:45:53 ck3ljbcp401thi3umgv01ciia 15 Pytań na rozmowę rekrutacyjną z HTML5 https://jcubic.pl/2019/11/pytania-rekrutacyjne-html5.html

15 Pytań na rozmowę rekrutacyjną z HTML5

Zdjecie przedstawiające kod HTML na ekranie\n komputera

Były pytania z CSS oraz JavaScript i druga część.\n Aby jednak mieć komplet pytań technologicznych na Front-End developera, teraz pora na pytania rekrutacyjne z HTML, a dokładnie chodzi\n o pytania z HTML5.

Wydaje mi się, że raczej pytania na rozmowach rekrutacyjnych będą dotyczyły języków JavaScript oraz CSS. Tego typu pytania zadałbym jednak pewnie na\n rozmowie rekrutacyjnej na web mastera lub web designera. Więc może się komuś przydadzą.

W pytaniach zamieściłem dwie zagadki z kodem HTML. Są to ciekawostki na pograniczu HTML oraz JavaScript. Gdy rekrutujesz, na stanowisko programisty\n JavaScript, możesz zadać jedną z nich.


Kliknij aby zobaczyć cały artykuł 2019-11-30 12:11:01 15-pytan-na-rozmowe-rekrutacyjna-z-html5 ckfdlon7c0009i3umeitx0nz4 2019-11-30 12:11:01 2019-11-30 12:11:01 ck3xj4wcw01twi3um68lg76os 10 książek o tym jak powstał Internet i Komputery https://jcubic.pl/2019/12/ksiazki-historia-internetu-komputerow-linux-unix.html

10 książek o tym jak powstał Internet i Komputery

Zdjecie przedstawiające Kena\n Thmpsona oraz Denisa Riche przed komputerem PDP-11

W tym roku, czyli w 2019, Internet\n obchodził 50 urodziny. Dokładnie 29 października 1969, wysłana została wiadomość „LO” między pierwszymi węzłami ARPANET-u. Jest to ostatnia szansa, aby napisać wpis, jaki miałem\n zamiar (jest grudzień). A jest nim 10 książek o historii komputerów i internetu, plus dwie bonusowe pozycje. Internet to w dużej mierze Open Source (chodzi o zasadę współpracy, niekoniecznie o\n sam ruch), który wywodzi się z ruchu Free Software, a który z kolei wywodzi się z ruchu hakerskiego i swobodnego dzielenia się kodem. Mówiąc haker, mam na myśli oryginalne znaczenie tego słowa,\n czyli eksperta od informatyki (uber-programistę). Jest też historia UNIX’a i Linux’a, bez których historia byłaby niekompletna oraz historia komputerów osobistych (ang. personal\n computer).


Kliknij aby zobaczyć cały artykuł 2019-12-08 21:39:14 10-ksiazek-o-tym-jak-powstal-internet-i-komputery ckfdlon7c0009i3umeitx0nz4 2019-12-08 21:39:14 2019-12-08 21:39:14 cj1hok4l400eci3um7ju289qt Płynne przewijanie strony – smooth scrolling http://webroad.pl/javascript/182-jquery-plynne-przewijanie-strony-smooth-scrolling Ten krótki, piątkowy wpis poświęciłem na odświeżenie poradnika z przed sześciu lat. Pomimo swojego wieku był jest on jednym z najchętniej czytanych postów na tym blogu, nie mogę go więc tak po prostu zarchiwizować i zapomnieć. Jeśli korzystasz z jQuery w swoim projekcie, śmiało możesz wykorzystać poniższy trik na uzyskanie efektu płynnego przewinięcia do wybranego […] 2017-04-14 10:17:55 plynne-przewijanie-strony-smooth-scrolling ckir2fk800008i3um9c21fesl 2017-04-14 10:17:55 2017-04-14 10:17:55 +cjpzg9kq001cfi3umflxo6yzl Prezent Last Minute? Ebooki w dużej promocji na Święta. https://webroad.pl/ksiazka/7260-prezent-last-minute-ebooki-w-duzej-promocji-na-swieta Zbyt późno zorientowałeś się, że Święta są właściwie tuż za rogiem, a przeraża Cię wizja spędzenia weekendu w zatłoczonej galerii handlowej? Nie martw się! Masz jeszcze szansę na podarowanie bliskiej Ci osobie elektronicznego prezentu w formie ebooka. Zobacz wszystkie ebooki w promocji Przedstawiam tu moje wybrane propozycje. W ostatnim akapicie dowiesz się też, w jaki […] 2018-12-22 12:38:33 prezent-last-minute-ebooki-w-duzej-promocji-na-swieta ckir2fk800008i3um9c21fesl 2018-12-22 12:38:33 2018-12-22 12:38:33 cj1b42ytk00dii3umawe2bxsd Festiwal technologiczny 4Developers 2017 https://webmastah.pl/4developers-2017/ 4Developers 2017

Coroczny festiwal programistów dobiegł końca. Nie dziwcie się używaniu formy „festiwal”. Blisko 1800 uczestników i 14 jednoczesnych ścieżek to faktycznie impreza jedyna w swoim rodzaju. A jak było w tym roku?

\n

Artykuł Festiwal technologiczny 4Developers 2017 pochodzi z serwisu webMASTAH.

2017-04-09 19:58:05 festiwal-technologiczny-4developers-2017 ckcf8vjeg000ai3um1mox19e8 2017-04-09 19:58:05 2017-04-09 19:58:05 cj1n88t0w00f0i3um12be5wws Entuzjaści DevOps łączcie się! Złap zniżkę i dołącz do najbardziej prestiżowej konferencji DevOps w Polsce! https://webmastah.pl/atmosphere2017/ atmosphere 2017

Najlepsi eksperci, przedsiębiorcy, propagatorzy kultury DevOps w Polsce i na świecie, studenci oraz fani technologicznych nowinek - już po raz piąty spotkają się w Krakowie, aby wymieniać się doświadczeniami i pomysłami. Konferencja Atmosphere odbędzie się 16-17 maja w Hotelu Forum, a my przygotowaliśmy dla Ciebie specjalną zniżkę.

\n

Artykuł Entuzjaści DevOps łączcie się! Złap zniżkę i dołącz do najbardziej prestiżowej konferencji DevOps w Polsce! pochodzi z serwisu webMASTAH.

2017-04-18 07:27:50 entuzjasci-devops-laczcie-sie-zlap-znizke-i-dolacz-do-najbardziej-prestizowej-konferencji-devops-w-polsce ckcf8vjeg000ai3um1mox19e8 2017-04-18 07:27:50 2017-04-18 07:27:50 cj1tq7im800fpi3umfs7r3h9c Czym jest CAA w DNS i jak go okiełznać? https://webmastah.pl/czym-jest-caa-w-dns-i-jak-go-okielznac/ CAA DNS

Co to jest rekord CAA w DNS? Jak go utworzyć? Jak sprawdzić wpisy CAA w DNS? O czym mówi rekord CAA wystawcom certyfikatów SSL?

\n

Artykuł Czym jest CAA w DNS i jak go okiełznać? pochodzi z serwisu webMASTAH.

2017-04-22 20:37:20 czym-jest-caa-w-dns-i-jak-go-okielznac ckcf8vjeg000ai3um1mox19e8 2017-04-22 20:37:20 2017-04-22 20:37:20 cj1v5riz400fui3um8gez0fli Kurs Vue.js krok po kroku – warunki i pętle https://webmastah.pl/kurs-vue-js-krok-po-kroku-warunki-i-petle/ Vue.js - warunki i pętle

Po dwóch odcinkach wprowadzających wreszcie możemy przystąpić do konkretów. Dzisiaj nauczymy się jak korzystać z warunków i pętli w Vue.js. V-IF, V-ELSE, V-SHOW, V-FOR.

\n

Artykuł Kurs Vue.js krok po kroku – warunki i pętle pochodzi z serwisu webMASTAH.

2017-04-23 20:40:34 kurs-vuejs-krok-po-kroku-warunki-i-petle ckcf8vjeg000ai3um1mox19e8 2017-04-23 20:40:34 2017-04-23 20:40:34 cj23sjpo000gwi3umdz996j1a 11 Podcastów związanych z PHP https://webmastah.pl/11-podcastow-zwiazanych-z-php/

Podcasty ostatnio przeżywają drugą młodość i to nie tylko w stanach. Także u nas widać wzmożoną aktywność podcasterów i dużo nowych pozycji. Dzisiaj chciałbym wam przedstawić 11 najbardziej znanych pocastów związanych tematycznie z PHP.

\n

Artykuł 11 Podcastów związanych z PHP pochodzi z serwisu webMASTAH.

2017-04-29 21:40:30 11-podcastow-zwiazanych-z-php ckcf8vjeg000ai3um1mox19e8 2017-04-29 21:40:30 2017-04-29 21:40:30 cj1hs8v4w00efi3umbfmc9ftn Życzenia na Wielkanoc 2017 http://webroad.pl/ogloszenia/6900-zyczenia-na-wielkanoc-2017 Zbliża się Wielkanoc. Część z Was kończy jeszcze szybki, super ważny deploy i już… już weekend, można odpocząć (albo naprawiać produkcję). Na Święta robię sobie krótką przerwę od pisania, a wracam z nowymi pomysłami w nadchodzący wtorek.  Wielkanoc 2017 Przy okazji chciałbym życzyć Wam słonecznych, spokojnych i pełnych uśmiechu Świąt Wielkiej Nocy. Niech wszelkie błędy […] 2017-04-14 12:01:08 zyczenia-na-wielkanoc-2017 ckir2fk800008i3um9c21fesl 2017-04-14 12:01:08 2017-04-14 12:01:08 +ckttznlva00020wl921e7o0s7 Twoja Armia Robotów: Program Zautomatyzowanych startuje! 🚀 https://www.youtube.com/watch?v=EhFP0OWK1qA Strona Programu\nhttps://zautomatyzowani.pl/program\n\nHarmonogram Programu:\nhttps://www.notion.so/automatyzacje/Program-Marketing-i-Biznes-na-Autopilocie-571a840aefef4d7e8502fd28a282ad67\n\nZniżka -500 zł netto 🎁\nhttps://app.easycart.pl/checkout/zautomatyzowani/program?plan=price_1JazHHKVOPYN5GTe48lt0z4d 2021-09-21 11:21:21 twoja-armia-robotow:-program-zautomatyzowanych-startuje! ckieg15g0001bi3um0fj3gred 2021-09-21 11:22:56.758 2021-09-21 11:22:56.759 ck6fft72g01wei3umauibcdt5 Powiadomienia - Push Notifications (aplikacja czatu) https://jcubic.pl/2020/02/powiadomiena-push-notifications.html

Powiadomienia - Push Notifications (aplikacja czatu)

Zdjęcie autorstwa\n **[freestocks.org](https://www.pexels.com/pl-pl/@freestocks?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)** z\n **[Pexels](https://www.pexels.com/pl-pl/zdjecie/dotykac-dzwonic-ekran-dotykowy-google-nexus-4-12829/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)\n

W tym wpisie pokażę jak dodałem, już jakiś czas temu, fajną funkcje do prostej aplikacji czatu. Funkcją tą są powiadomienia, gdy ktoś coś napisze na czacie.

\n

Jeśli jesteś zainteresowany jak napisać taki czat, polecam najpierw przeczytać artykuł „Prosty Czat w JavaScript, PHP i\n SQLite”. Rozwiązanie to używa technologii Server-sent events (SSE), której można używać, gdy z jakiegoś powodu nie możemy użyć gniazd (ang. Web Sockets).

W celu\n dodania funkcji powiadomień użyłem powiadomień typu Push (ang. Push Notifications), service workera oraz Firebase, aby uprościć sobie życie.


Kliknij aby zobaczyć cały artykuł 2020-02-09 19:45:25 powiadomienia-push-notifications-aplikacja-czatu ckfdlon7c0009i3umeitx0nz4 2020-02-09 19:45:25 2020-02-09 19:45:25 ck9fcizns020ni3um1y8734is Jak parować nawiasy lub inne znaki w JavaScript? https://jcubic.pl/2020/04/parowanie-nawiasow-javascript.html

Jak parować nawiasy lub inne znaki w JavaScript?

Grafika Wektorwa z Tekstem Parowanie\n Nawiasów w JavaScript oraz grafika wektorowa przedstawiająca Laptopa oraz dwa wyrażenia z nawiasami

Pisząc mój interpreter języka Lisp (dokładnie dialektu Scheme) o\n nazwie LIPS, zdecydowałem się dodać obsługę nawiasów kwadratowych, ponieważ niektóre książki do języka Scheme, mieszają nawiasy okrągłe\n oraz kwadratowe. Jednak aby nie komplikować parsera, nie sprawdzał on, czy nawiasy do siebie pasują i np. można było wywołać kod z pomieszanymi nawiasami.

W tym wpisie\n przedstawię jak napisać poprawne parowanie nawiasów, czyli funkcję, która może się przydać nie tylko przy parsowaniu języka Lisp. [Spoiler] Do tego celu nie warto nawet próbować, używać Wyrażeń\n Regularnych (RegExp).


Kliknij aby zobaczyć cały artykuł 2020-04-25 08:12:37 jak-parowac-nawiasy-lub-inne-znaki-w-javascript ckfdlon7c0009i3umeitx0nz4 2020-04-25 08:12:37 2020-04-25 08:12:37 ckb90okvk0235i3um6odrgil0 Programowanie jest jak ekspres do kawy https://jcubic.pl/2020/06/czym-jest-programowanie.html

Programowanie jest jak ekspres do kawy

Ekspres do kawy oraz gotowa filiżanka z aromatyczną kawą\n

Zastanawiałeś się kiedyś jak najlepiej opisać, czym jest istota programowania dla osób, które nie programują? Co byś odpowiedział, gdyby ktoś cię zapytał „Co to jest\n programowanie?” albo „Co tak naprawdę robią programiści?”.?

W tym wpisie przedstawie, ciekawy sposób w jaki można opisać programowanie osobom, które nie programują.

\n
Kliknij aby zobaczyć cały artykuł 2020-06-10 07:13:50 programowanie-jest-jak-ekspres-do-kawy ckfdlon7c0009i3umeitx0nz4 2020-06-10 07:13:50 2020-06-10 07:13:50 @@ -3278,17 +3314,18 @@ cj3uc8tig00mfi3um6ild6hy6 Kilka słów o nadchodzącej finałowej gali Daj Się cj3vwta0g00mli3um9un805jy Dodałem możliwość wysyłki przypomnień SMS w mojej aplikacji ASP.NET http://webroad.pl/aspnet/7167-dodalem-mozliwosc-wysylki-przypomnien-sms-w-mojej-aplikacji-asp-net Po krótkiej przerwie, jaką sobie zrobiłem w pisaniu aplikacji todo.team czas wrócić do wytężonej pracy. Jeśli jeszcze nie wiesz, dostałem się do ścisłego finału DSP, a todo.team jest owocem tego projektu. Oprócz wiadomości e-mail, które są jednym z trzech filarów powiadomień postanowiłem wdrożyć eksperymentalnie możliwość przypominania o zadaniach z poziomu SMS. Skorzystałem z możliwości, jakie […] 2017-06-13 18:37:10 dodalem-mozliwosc-wysylki-przypomnien-sms-w-mojej-aplikacji-aspnet ckir2fk800008i3um9c21fesl 2017-06-13 18:37:10 2017-06-13 18:37:10 cj7fu64g800rfi3um0oycb2l1 Gdańskie 4Developers zaprasza! Nie masz jeszcze wejściówki? Możesz dostać ją na moim blogu! http://webroad.pl/konkursy/7188-gdanskie-4developers-zaprasza-nie-masz-jeszcze-wejsciowki-mozesz-dostac-ja-na-moim-blogu Po sporym sukcesie organizacyjnym ogólnopolskiej edycji 4Developers 2017 nadszedł czas na mniejsze, acz częstsze spotkania regionalne. Pierwsze z nich odbędzie się w Gdańsku, dokładnie za tydzień, 18 września. Zastanawiasz się nad agendą? Nie wiesz, czy warto się pojawić? Poniżej przedstawiam subiektywnie wybrane prelekcje. Jeśli znasz już agendę, a nie masz jeszcze wejściówki, zajrzyj do ostatniego […] 2017-09-11 07:17:41 gdanskie-4developers-zaprasza-nie-masz-jeszcze-wejsciowki-mozesz-dostac-ja-na-moim-blogu ckir2fk800008i3um9c21fesl 2017-09-11 07:17:41 2017-09-11 07:17:41 cj7oj0g4g00rqi3ume37392vy Ebooki tańsze o minimum 50% na Helionie! Subiektywny przegląd https://webroad.pl/ksiazka/7200-ebooki-tansze-o-minimum-50-na-helionie Takie promocje nie zdarzają się często. Helion, jak na dobrego gospodarza urodzin przystało, wyprawił świetne poprawiny w postaci ogromnych promocji na wszystkie ebooki. Zniżki zaczynają się aż od 50%! Znajdziesz tutaj przegląd wybranych przeze mnie pozycji, z których naprawdę warto skorzystać. Promocja trwa do 18. września włącznie. Wszystkie ebooki w promocji znajdziesz na stronie Helion.pl 2017-09-17 09:15:16 ebooki-tansze-o-minimum-50-na-helionie-subiektywny-przeglad ckir2fk800008i3um9c21fesl 2017-09-17 09:15:16 2017-09-17 09:15:16 -cjpzg9kq001cfi3umflxo6yzl Prezent Last Minute? Ebooki w dużej promocji na Święta. https://webroad.pl/ksiazka/7260-prezent-last-minute-ebooki-w-duzej-promocji-na-swieta Zbyt późno zorientowałeś się, że Święta są właściwie tuż za rogiem, a przeraża Cię wizja spędzenia weekendu w zatłoczonej galerii handlowej? Nie martw się! Masz jeszcze szansę na podarowanie bliskiej Ci osobie elektronicznego prezentu w formie ebooka. Zobacz wszystkie ebooki w promocji Przedstawiam tu moje wybrane propozycje. W ostatnim akapicie dowiesz się też, w jaki […] 2018-12-22 12:38:33 prezent-last-minute-ebooki-w-duzej-promocji-na-swieta ckir2fk800008i3um9c21fesl 2018-12-22 12:38:33 2018-12-22 12:38:33 cjqfhe7ts01cwi3um4ev8d360 Kosmiczne promocje na ebooki w Helionie! https://webroad.pl/ksiazka/7278-kosmiczne-promocje-na-ebooki-w-helionie Takie promocje rzadko się zdarzają. Helion (i Ebookpoint) przecenił ebooki w związku z akcją #ZACZYTANI2019. Oszczędzić możesz nawet 150zł na najdroższych pozycjach. Jeśli nie lubisz przeszukiwać stron internetowych Księgarni, przygotowałem zestawienie wszystkich ebooków będących w promocji w postaci pliku Excel. Zobacz całe zestawienie na moim OneDrive W zestawieniu wziąłem pod uwagę książki, które: pojawiły się w sprzedaży od […] 2019-01-02 17:54:28 kosmiczne-promocje-na-ebooki-w-helionie ckir2fk800008i3um9c21fesl 2019-01-02 17:54:28 2019-01-02 17:54:28 cjmghthc80188i3umdc16gdjh Nowa Strona Danych – Hackathon Ministerstwa Cyfryzacji https://webmastah.pl/nowa-strona-danych-hackathon-ministerstwa-cyfryzacji/

Ministerstwo Cyfryzacji pokazało nową odsłonę portalu z danymi publicznymi - dane.gov.pl.
\nMasz pomysł jak go ulepszyć? Jak zmienić go w jeszcze bardziej użyteczny? Weź udział w Hackathonie - nowa strona danych i stwórz narzędzia, które ułatwią korzystanie z otwartych danych.

\n

Artykuł Nowa Strona Danych – Hackathon Ministerstwa Cyfryzacji pochodzi z serwisu webMASTAH.

2018-09-24 16:15:17 nowa-strona-danych-hackathon-ministerstwa-cyfryzacji ckcf8vjeg000ai3um1mox19e8 2018-09-24 16:15:17 2018-09-24 16:15:17 cjoacfgao01a6i3um2xaoefju Zespół Slavic zwycięzcą Hackathonu – Nowa strona danych https://webmastah.pl/zespol-slavic-zwyciezca-hackathonu-nowa-strona-danych/

W weekend 27-28 października jedenaście zespołów – specjalistów branży IT i data science – przez dwa dni pracowało nad pomysłami na nowe funkcjonalności portalu dane.gov.pl, walcząc o nagrodę główną Hackathonu Ministerstwa Cyfryzacji – Nowa strona danych. Jury pod przewodnictwem Agaty [...]

\n

Artykuł Zespół Slavic zwycięzcą Hackathonu – Nowa strona danych pochodzi z serwisu webMASTAH.

2018-11-09 18:17:12 zespol-slavic-zwyciezca-hackathonu-nowa-strona-danych ckcf8vjeg000ai3um1mox19e8 2018-11-09 18:17:12 2018-11-09 18:17:12 cjrj8r9co01eni3um1ifr3fj9 4Developers 2019: Rusza kolejna edycja największego Festiwalu Technologicznego w Polsce https://webmastah.pl/4developers-2019-rusza-kolejna-edycja-najwiekszego-festiwalu-technologicznego-w-polsce/ 4developers 2018

2000 uczestników i niemal 100 cenionych ekspertów z branży IT w jednym miejscu. Przed nami ogromne, interdyscyplinarne spotkanie polskiej społeczności programistycznej. W ciągu jednego dnia specjaliści i pasjonaci IT będą mogli uczestniczyć w niemal 100 praktycznych prelekcjach. Już 8 kwietnia 2019 w Warszawie odbędzie się kolejna edycja 4Developers 2019!

\n

Artykuł 4Developers 2019: Rusza kolejna edycja największego Festiwalu Technologicznego w Polsce pochodzi z serwisu webMASTAH.

2019-01-30 13:43:27 4developers-2019-rusza-kolejna-edycja-najwiekszego-festiwalu-technologicznego-w-polsce ckcf8vjeg000ai3um1mox19e8 2019-01-30 13:43:27 2019-01-30 13:43:27 cjuiqt4jk01j1i3um413o4mbp Nowa DevOps-owa konferencja już w czerwcu w Katowicach https://webmastah.pl/nowa-devops-owa-konferencja-juz-w-czerwcu-w-katowicach/

Metodyka DevOps szturmem zdobywa rynek IT organizując i ułatwiając pracę tysiącom osób. Nic też dziwnego, że wciąż rośnie zarówno zapotrzebowanie na specjalistów w tej dziedzinie, jak i na szkolenia dla tych, którzy stawiają w DevOps-ie pierwsze kroki. W odpowiedzi na te potrzeby powstała nowa konferencja poświęcona metodyce DevOps, automatyzacji i monitoringowi procesów IT - Just DevOps!

\n

Artykuł Nowa DevOps-owa konferencja już w czerwcu w Katowicach pochodzi z serwisu webMASTAH.

2019-04-15 19:20:08 nowa-devops-owa-konferencja-juz-w-czerwcu-w-katowicach ckcf8vjeg000ai3um1mox19e8 2019-04-15 19:20:08 2019-04-15 19:20:08 +ckg7m96yg028gi3umfpzz5n77 Wykluczające się zależności w composer.json https://webroad.pl/inne/7505-wykluczajace-sie-zaleznosci-w-composer-json Czasami bywa tak, że kilka bibliotek instalowanych przez Composera używa tych samych zależności. Nie ma problemu, kiedy korzystają one z tych samych wersji. Komplikacje powstają gdy jedna z nich wymaga starszej wersji, a druga nowszej. Jak sobie z tym poradzić, zanim dostawca biblioteki przygotuje aktualizację? Przykładem takiego błędu jest obecnie (stan na 12.10.2020) instalacja FreshMail […] 2020-10-13 07:00:43 wykluczajace-sie-zaleznosci-w-composerjson ckir2fk800008i3um9c21fesl 2020-10-13 07:00:43 2020-10-13 07:00:43 cjw7omii001l6i3umfsuy54i3 Co użytecznego można stworzyć z danych publicznych w 8 dni? https://webmastah.pl/co-uzytecznego-mozna-stworzyc-z-danych-publicznych-w-8-dni/

Ministerstwo Cyfryzacji zaprasza na Hackathon #OtwarteDane, podczas którego przekonacie się, jak wiele zastosowań mają otwarte dane publiczne.

\n

Artykuł Co użytecznego można stworzyć z danych publicznych w 8 dni? pochodzi z serwisu webMASTAH.

2019-05-28 10:52:57 co-uzytecznego-mozna-stworzyc-z-danych-publicznych-w-8-dni ckcf8vjeg000ai3um1mox19e8 2019-05-28 10:52:57 2019-05-28 10:52:57 cjzsqape801oxi3umdf9wfvhx Już niedługo SpreadIT, ostatnie dni sprzedaży biletów! https://webmastah.pl/juz-niedlugo-spreadit-ostatnie-dni-sprzedazy-biletow/

SpreadIT to jedna z największych w Polsce, konferencji branżowych poświęconych tematykom Software Architecture, Software Craftsmanship oraz GameDev, która na stałe zawitała już na jesiennej mapie wydarzeń zlokalizowanych na śląsku. Siódma edycja SpreadIT już po raz drugi odbędzie się w Katowicach. [...]

\n

Artykuł Już niedługo SpreadIT, ostatnie dni sprzedaży biletów! pochodzi z serwisu webMASTAH.

2019-08-26 18:22:02 juz-niedlugo-spreadit-ostatnie-dni-sprzedazy-biletow ckcf8vjeg000ai3um1mox19e8 2019-08-26 18:22:02 2019-08-26 18:22:02 ck4wiej5s01uti3um8euxbbl3 webMASTAH.weekly.054 – Wróciłem! https://webmastah.pl/webmastah-weekly-054-wrocilem/

- Różnica między __proto__ a prototype
\n- Mastering JS console.log like a Pro
\n- PHP version 7.4 is here! Quick overview of new features
\n- Understanding JavaScript Decorators

\n

Artykuł webMASTAH.weekly.054 – Wróciłem! pochodzi z serwisu webMASTAH.

2020-01-02 09:10:40 webmastahweekly054-wrocilem ckcf8vjeg000ai3um1mox19e8 2020-01-02 09:10:40 2020-01-02 09:10:40 ck5zo44i001vxi3um9bsu0uuf Programiści z całego kraju czekają na kolejną edycję 4Developers https://webmastah.pl/programisci-z-calego-kraju-czekaja-na-kolejna-edycje-4developers/ 4developers 2020

20 kwietnia 2020 w Warszawie pasjonaci IT spotkają się ponownie, na Największym Interdyscyplinarnym Festiwalu Technologicznym w Polsce. Ponad 2000 uczestników, doświadczeni eksperci i profesjonaliści oraz przeszło 100 praktycznych prelekcji - wszystko to w ciągu jednego dnia podczas wielkiego spotkania polskiej społeczności programistycznej.

\n

Artykuł Programiści z całego kraju czekają na kolejną edycję 4Developers pochodzi z serwisu webMASTAH.

2020-01-29 18:53:33 programisci-z-calego-kraju-czekaja-na-kolejna-edycje-4developers ckcf8vjeg000ai3um1mox19e8 2020-01-29 18:53:33 2020-01-29 18:53:33 ck6ajjsnk01w9i3umdau93cfv webMASTAH.weekly.055 – Spięte poślady polskiego IT 😎 https://webmastah.pl/webmastah-weekly-055-spiete-poslady-polskiego-it-%f0%9f%98%8e/

- Spięte poślady polskiego IT?
\n- PHP in 2020
\n- My PhpStorm settings after 8 years of use
\n- UUIDs are Popular, but Bad for Performance
\n- Hashing passwords on the server-side, a dead end?

\n

Artykuł webMASTAH.weekly.055 – Spięte poślady polskiego IT 😎 pochodzi z serwisu webMASTAH.

2020-02-06 09:31:14 webmastahweekly055-spiete-poslady-polskiego-it ckcf8vjeg000ai3um1mox19e8 2020-02-06 09:31:14 2020-02-06 09:31:14 +cksfud5x700020wmdhezvl9sb CSS for JavaScript Developers - recenzja kursu https://www.youtube.com/watch?v=4DEvnsn2nXg Kurs stworzony przez JoshaWComeau to jeden z najlepszych kursów traktujących o pisaniu CSSów w projektach z frameworkami frontendowymi. Tak się składa, że miałem to szczęście i zainwestowałem w przedsprzedaży. Niedługo rusza oficjalna sprzedaż dlatego dzisiaj recenzja :)\n\nhttps://css-for-js.dev/ - Oficjalna strona kursu\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-08-17 06:44:03 css-for-javascript-developers-recenzja-kursu ckmoh2k1y000050l0rtc97ktd 2021-08-17 09:06:22.651 2021-08-17 09:06:22.651 ckcf8vjeg024mi3umdjida1m5 Docker na Maca ssie? Przyspieszamy synchronizację plików Mutagenem https://webmastah.pl/docker-na-maca-ssie-przyspieszamy-synchronizacje-plikow-mutagenem/#utm_source=rss&utm_medium=rss&utm_campaign=docker-na-maca-ssie-przyspieszamy-synchronizacje-plikow-mutagenem Docker on Mac Mutagen

Docker na maka ssie. Problemy z wydajnością, problemy z wolnym odczytem. Czy można temu zaradzić?

\n

Artykuł Docker na Maca ssie? Przyspieszamy synchronizację plików Mutagenem pochodzi z serwisu WEBMASTAH.

2020-07-09 20:29:31 docker-na-maca-ssie-przyspieszamy-synchronizacje-plikow-mutagenem ckcf8vjeg000ai3um1mox19e8 2020-07-09 20:29:31 2020-07-09 20:29:31 cjqnhmxk001d8i3umgc6m1g4s Piekło zamarzło. Prywatne repozytoria w GitHub za darmo https://webroad.pl/inne/7291-pieklo-zamarzlo-github-za-darmo Wczoraj na oficjalnym blogu GitBub przeczytałem informację o tym, że została właśnie wprowadzona opcja nielimitowanych, prywatnych repozytoriów dla darmowych kont. Use private repositories with three of your closest collaborators *for free* 🙌https://t.co/rSJrtvsXfS pic.twitter.com/oRVpNP1c3r — GitHub (@github) 7 stycznia 2019 Jest to dobra wiadomość jedynie dla tych najmniejszych projektów i developerów, gdyż ograniczeniem darmowej wersji będzie […] 2019-01-08 08:23:24 pieklo-zamarzlo-prywatne-repozytoria-w-github-za-darmo ckir2fk800008i3um9c21fesl 2019-01-08 08:23:24 2019-01-08 08:23:24 cjqpokr4001dfi3umc69853iv Trwa rekrutacja prelegentów na 4Developers 2019 https://webroad.pl/konferencje/7300-trwa-rekrutacja-prelegentow-na-4developers-2019 Każdego roku wspieram jak tylko mogę największą w Polsce konferencje dla programistów 4Developers. Rozpoczęły się właśnie przygotowania do edycji 2019. Trwa szeroka rekrutacja prelegentów. Jeśli nie czujesz się na siłach aby wystąpić w roli prowadzącego, wciąż możesz usiąść po drugiej stronie sceny. Bilety (również studenckie – w bardzo niskiej cenie) dostępne są pod adresem https://4developers2019.evenea.pl. […] 2019-01-09 21:13:12 trwa-rekrutacja-prelegentow-na-4developers-2019 ckir2fk800008i3um9c21fesl 2019-01-09 21:13:12 2019-01-09 21:13:12 @@ -3308,7 +3345,7 @@ ckfvdornc0281i3umhg0c6q52 Co słychać Bootstrapie 5? https://webroad.pl/html5-c ckg17euw00288i3umg7lp2ohk Podłączanie się z PHP do Microsoft Web Services za pomocą NTLM z autoryzacją domenową https://webroad.pl/php/7583-podlaczanie-sie-z-php-do-microsoft-web-services-za-pomoca-ntlm-z-autoryzacja-domenowa Jakiś czas temu potrzebowałem z poziomu PHP podłączyć się do Web Service, aby dobrać się do danych serwowanych przez Microsoft Dynamics NAV (obecnie Dynamics 365 Business Central). Wszystko byłoby proste gdyby nie kilka punktów, które zatrzymały mnie w miejscu: pierwszy mój kontakt z SOAP oraz konieczność uwierzytelniania NTLM użytkownikiem utworzonym z poziomu Active Directory. Na […] 2020-10-08 19:18:36 podlaczanie-sie-z-php-do-microsoft-web-services-za-pomoca-ntlm-z-autoryzacja-domenowa ckir2fk800008i3um9c21fesl 2020-10-08 19:18:36 2020-10-08 19:18:36 ckg2espqo0289i3um1c8m2tb3 Format zdjęć WebP sprawdza się w sieci znakomicie https://webroad.pl/webdesign/7646-format-zdjec-webp-sprawdza-sie-w-sieci-znakomicie Chciałbym dziś krótko pochwalić format zdjęć WebP. Ostatnio poprawiałem wydajność strony i PageSpeed Insights zwrócił mi uwagę, aby używać nowszych formatów zdjęć, zamieniając PNG i JPEG na WebP właśnie. Przekonwertowałem więc kilka zdjęć, między innymi zdjęcie w tle tego bloga, nie skupiając się zbyt na szczegółach kompresji. Efekt? Różnice w jakości są zauważalne, lecz niewielkie. […] 2020-10-09 15:33:06 format-zdjec-webp-sprawdza-sie-w-sieci-znakomicie ckir2fk800008i3um9c21fesl 2020-10-09 15:33:06 2020-10-09 15:33:06 ckg6o69z4028di3uma0cs9y1a Generowanie, automatyczne odnawianie i podłączanie darmowych certyfikatów SSL od Let’s Encrypt w Apache https://webroad.pl/hosting/7685-generowanie-automatyczne-odnawianie-i-podlaczanie-darmowych-certyfikatow-ssl-od-lets-encrypt-w-apache Poprzedni wpis na temat Let’s Encrypt opisywał generowanie darmowego certyfikatu za pomocą uwierzytelniania domeny przez odpowiedni wpis w DNS. Działa to świetnie, dopóki nie zachodzi potrzeba generowania i odnawiania certyfikatów w bardziej zautomatyzowany sposób. Dzisiaj pokażę, jak wygenerować certyfikat SSL za pomocą tzw. ACME challenge, czyli uwierzytelniania własności domeny przez wgranie do webroota odpowiedniego pliku. […] 2020-10-12 15:06:40 generowanie-automatyczne-odnawianie-i-podlaczanie-darmowych-certyfikatow-ssl-od-lets-encrypt-w-apache ckir2fk800008i3um9c21fesl 2020-10-12 15:06:40 2020-10-12 15:06:40 -ckg7m96yg028gi3umfpzz5n77 Wykluczające się zależności w composer.json https://webroad.pl/inne/7505-wykluczajace-sie-zaleznosci-w-composer-json Czasami bywa tak, że kilka bibliotek instalowanych przez Composera używa tych samych zależności. Nie ma problemu, kiedy korzystają one z tych samych wersji. Komplikacje powstają gdy jedna z nich wymaga starszej wersji, a druga nowszej. Jak sobie z tym poradzić, zanim dostawca biblioteki przygotuje aktualizację? Przykładem takiego błędu jest obecnie (stan na 12.10.2020) instalacja FreshMail […] 2020-10-13 07:00:43 wykluczajace-sie-zaleznosci-w-composerjson ckir2fk800008i3um9c21fesl 2020-10-13 07:00:43 2020-10-13 07:00:43 +ckub59ymk00020wmg11wxh4r9 dev.js Summit 2021 https://blog.comandeer.pl/devjs-summit-2021.html Już 14 października 2021 roku odbędzie się dev.js Summit – największa polska konferencja poświęcona JavaScriptowi i frontendowi! Będzie to wydarzenie całkowicie bezpłatne i odbywające się online. 2021-10-03 11:21:00 dev.js-summit-2021 cki52vf40000ci3um2x784hhn 2021-10-03 11:32:22.796 2021-10-03 11:32:22.796 ckgai8p5s028ii3umdpdadeko Klonowanie repozytorium z GitHub za pomocą autoryzacji kluczem SSH https://webroad.pl/inne/7581-klonowanie-repozytorium-z-github-za-pomoca-autoryzacji-kluczem-ssh Każdy potrafi sklonować repozytorium z GitHuba przez HTTPS. Po czym jednak poznać prawdziwego master-developera? Autoryzuje się za pomocą klucza SSH! Oczywiście trochę żartuję, jednak jest to umiejętność, którą warto poznać, znać i stosować. Przemawiają za tym choćby względy bezpieczeństwa – nigdzie nie musimy podawać loginu i hasła do konta na GitHub. Generowanie klucza SSH W […] 2020-10-15 07:31:40 klonowanie-repozytorium-z-github-za-pomoca-autoryzacji-kluczem-ssh ckir2fk800008i3um9c21fesl 2020-10-15 07:31:40 2020-10-15 07:31:40 cgs2a30g00029i3uma5ab278b Gotowe szablony na stronę WWW https://piecioshka.pl/blog/2011/09/02/gotowe-szablony-na-strone-www.html

Od pewnego momentu naszła mnie ochota aby troszeczkę zmienić layout mojej\nstrony oraz homepage-u mojej biblioteki JavaScript\npklib.\nDlatego zabrałem się za poszukiwanie nowych layoutów w serwisach\noferujących darmowe albo płatne layouty.

\n\n
\n Baner reklamujący artykuł\n
\n\n

Zrobiłem krótki research w środowisku grafik designerów i jak się okazało\nkoszt layoutu zaczyna się od 1500 pln,- :smiley: Cena jest dość wysoka,\nale za przelanie swojego wyobrażenia strony internetowej\ndo formatu PSD\nnie jest szybko i łatwą sprawą.

\n\n

Postawiłem jednak, że poszukam gotowego layouty zrobionego przez\nfreelancerów którzy sprzedali swoje layouty serwisom, które je oferują na\nsprzedaż.

\n\n

Jednym z takich serwisów jest\nwww.4templates.com. Baza\nlayoutów jest dość obszerna i ma ponad 90 stron z różnego rodzaju\nlayoutami. Sądzę że, każdy znajdzie tu coś dla siebie. Koszt za\npojedynczy egzemplarz zaczyna się od 5 dolarów, a górna granica to około 30$.

\n\n

Jako przykład mogę podać layout który zakupiłem dla strony głównej\nbiblioteki pklib.

\n\n

Krótkie poszukiwania darmowego layoutu szybko skłoniły mnie do stwierdzenia,\nże to co darmowe w tym przypadku nie jest dobre, niestety.

\n\n

Podsumowanie

\n\n

Polecam zakup layouty ze względu na:

\n\n
    \n
  • jakość wykonania projektu graficznego
    • \n
  • nowoczesny układ
    • \n
  • dobra jakość kodu
    • \n
  • możliwość dowolnej przeróbki
    • \n
\n\n

Na koniec zamieszczam kilka wartościowych linków:

\n\n 2011-09-01 22:00:00 gotowe-szablony-na-strone-www ckbw97zyw0007i3umdszu2ola 2011-09-01 22:00:00 2011-09-01 22:00:00 cgs3piv40002ai3um05q41nj5 Klient FTP - plugin czy program? https://piecioshka.pl/blog/2011/09/03/klient-ftp-plugin-czy-program.html

\n Publikacja aplikacji na zewnętrzne serwery bardzo często przysparza\n programistom wiele problemów z ich klientami FTP - Fire Transfer\n Protocol. Niektóre się wyłączają, inne nie mają przydatnej opcji\n "edycji w locie".\n

\n\n

\n W locie oznacza edycję plików bezpośrednio na serwerze, bez konieczności\n kopiowania pliku do edycja na nasz dysk twardy.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n

Total Commander

\n\n

\n Moim początkom z wgrywaniem plików na serwer zawsze towarzyszył\n Total Commander.\n Aplikacja darmowa do użytku prywatnego. Za komercyjną licencję należy\n zapłacić. Istnieją dwie opcję licencji do kupienia:\n

\n\n
    \n
  • standardowa
    • \n
  • dla studenta
    • \n
\n\n

\n Więcej informacji pod tym adresem.\n

\n\n

\n Total Commander do kombajn, nie ma co ukrywać, posiada bardzo dużo opcji\n konfiguracyjnych. Ale czy podczas kopiowania plików na serwer są one nam\n potrzebne?\n

\n\n

Plugin do przeglądarki Mozilla Firefox

\n\n

\n Dla mnie nie, więc poszukałem czegoś lżejszego. Znalazłem plugin\n do Firefox-a o nazwie FireFTP.\n

\n\n

\n Plugin instaluje się jak inne dowolne pluginy. Jest kompatybilny\n ze wszystkimi wersjami FF. Znajduję się w repozytorium pluginów pod\n adresem: https://addons.mozilla.org/pl/firefox/addon/fireftp/,\n więc instalacja polega na wpisaniu nazwy wtyczki do okienka:\n `Narzędzia → Dodatki`\n

\n\n

\n Możliwości pluginu są dla mnie wystarczające. Konfiguracja nie odstrasza,\n tak jak w przypadku TC. Do codziennego upload-owania plików to\n jest wystarczający.\n

\n\n

\n Może istnieje jeszcze inne narzędzie? Nie wiem.\n

2011-09-02 22:00:00 klient-ftp-plugin-czy-program ckbw97zyw0007i3umdszu2ola 2011-09-02 22:00:00 2011-09-02 22:00:00 @@ -3328,6 +3365,7 @@ chom1aow0002xi3umg9y12mtx DevMeetings: Responsive Web Design [Relacja Live] http chqvhe8w0002yi3umh7od2n8h eval() czy JSON.parse() - porównanie szybkości https://piecioshka.pl/blog/2014/01/26/eval-czy-json-parse-porownanie-szybkosci.html

\n Web aplikacje mocno wykorzystują format\n JSON w procesie komunikacji\n klient (przeglądarka) - serwer. Zastanówmy się jak możemy poradzić sobie\n z parsowaniem danych zapisanych w tym formacie.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Format JSON

\n\n

\n Jest to najpopularniejszy format w aplikacjach Front-end-owych ze\n względu na podobieństwo formatu JSON to obiektu literałowego w\n JavaScript. Dodatkowo, po sparsowaniu danych, korzystanie z nich\n odbywa się w identyczny sposób jak byśmy używali zwykłego obiektu w JS.\n

\n\n

\n Silniki przeglądarek udostępniają API, które pozwala na podstawową\n obsługę tego formatu.\n

\n\n
    \n
  • \n

    \n JSON.parse() - konwersja z: String do:\n Object\n

    \n\n
    var data = '{ "foo": "bar" }';\n\nJSON.parse(data);\n// zwróci obiekt: Object { foo: "bar" }\n\ntypeof JSON.parse(data) === "object"\n// true
    \n\n
    • \n
  • \n

    \n JSON.stringify() - konwersja z:\n Object do: String\n

    \n\n
    var data = { foo: "bar" };\n\nJSON.stringify(data);\n// zwróci string: { "foo":"bar" }\n\ntypeof JSON.stringify(data) === "string"\n// true
    \n\n
    • \n
\n\n

\n Ale kiedyś, kiedy IE było liderem na rynku przeglądarek i nie miało\n konkurencji, parsowaniem danych przychodzących z serwera zajmowała się\n funkcja eval(). Wtedy jeszcze\n biblioteka\n Douglasa Crockforda nie istniała.\n

\n
\n\n
\n

Badania

\n\n

\n Pewnego dnia zaciekawił mnie performance dwóch metod parsowania danych:\n eval() oraz JSON.parse(). Skorzystałem z najpopularniejszej platformy\n do przeprowadzania takich testów, mianowicie skorzystałem\n z jsperf.com. Link do moich badań:\n jsperf.com/eval-or-json-parse.\n Testy przeprowadziłem na dość długim łańcuchu znaków, aby testy były\n bardziej miarodajne.\n

\n\n

\n Wyniki badań były zaskakujące.\n

\n\n
\n \n
\n\n

\n Opera, przeglądarka która ma obecnie (2014/01) 6.40% rynku lepiej radzi\n sobie z parsowaniem za pomocą eval(). Przewaga pomiędzy\n parsowanie funkcją eval() a JSON.parse() na\n tej przeglądarce jest ogromna. Blisko 10 razy szybciej.\n

\n\n

Dane dla Opera 12.15:

\n\n
    \n
  • JSON.parse() - 7,461 ops/sec
    • \n
  • eval() - 67,859 ops/sec
    • \n
\n\n

\n Reszta przeglądarek (poza IE), mianowicie Chrome, Firefox,\n Safari (poza 7.0.1) radzi sobie lepiej z parsowanie przy użyciu\n JSON.parse().\n

\n
\n\n
\n

Wnioski

\n\n

\n Gdy naszą docelową przeglądarką jest Internet Explorer lub Opera to\n polecam korzystać z metody eval(). Oczywiście, jeśli\n aplikacja korzysta z wiarygodnego źródła danych.\n

\n\n

\n W przeciwnym przypadku rekomenduje korzystać z\n JSON.parse(), chociażby z powodu wydajności.\n

\n\n

\n Drugim punktem który stoi za korzystaniem z JSON.parse()\n jest działanie tej metody. Funkcja eval() nie parsuje\n danych, ona po prostu uruchamia kod który zostanie jej przekazanym w\n postaci łańcucha znaków. To jest największe niebezpieczeństwo tej\n funkcji. Metoda JSON.parse() rzuci wyjątkiem kiedy w\n parametrze nie będzie poprawnego formatu wg specyfikacji\n JavaScript Object Notation.\n

\n
2014-01-25 23:00:00 eval-czy-jsonparse-porownanie-szybkosci ckbw97zyw0007i3umdszu2ola 2014-01-25 23:00:00 2014-01-25 23:00:00 chqyc9y80002zi3umax8o6ak8 WRUG styczniowy o debugowaniu, Neo4j i Ember.js https://piecioshka.pl/blog/2014/01/28/wrug-spotkanie-styczniowe-o-debugowaniu-neo4j-i-ember-js.html

\n 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.\n

\n\n

\n Planowałem obecność ze względu na obecność talka o frameworku Ember.js.\n

\n\n
\n \n\n
\n Warsaw Ruby Users Group (WRUG)\n
\n
\n\n
\n

Talk #1: Coder's lab

\n\n

\n Pierwsza prezentacja zaprezentowała była przez Piotr Zientara, z wykształcenia "filozof",\n który po 9-cio tygodniowym kursie Coder's lab, nauczył się programować.\n Do takiego stopnia, że firma Rebased (o ile dobrze pamiętam) nawiązała z nim współpracę :smiley:.\n Piotr świetnie zaprezentował historię oraz ideę debugowania. Najważniejszą informacją była geneza słowa bug (w kontekście IT).\n Otóż sławna programistka Grace Hooper podczas\n problemu z maszyną na której pracowała znalazła ćmę - bug'a. Od tamtej pory słowo debugging oznaczało naprawę błędu.\n

\n\n

\n Dzięki uprzejmości Piotra załączam prezentację.\n

\n\n \n\n
\n\n

\n Prezentację poprowadził Piotr Zientara z Rebased.\n

\n
\n\n\n

•

\n\n\n
\n

Talk #2: Ember.js

\n\n

\n Drugi speech był o Ember.js. Zgodnie z opisem przed spotkaniem, liczyłem, że podczas tej prezentacji zostanie mi przedstawione:\n

\n\n
    \n
  • W jaki sposób mogę napisać prościutką aplikację?
    • \n
  • Jak działa Ember.js?
    • \n
  • Na co zwracać uwagę podczas tworzenia aplikacji?
    • \n
  • Jaka jest idea aplikacji opierających się na tym frameworku?
    • \n
\n\n

\n Niestety, jednak po tym speechu nie mogę powiedzieć, że znam odpowiedzi na wszystkie w.w pytania.\n

\n\n

\n 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.\n

\n\n

\n Prezentację poprowadził Piotr "Drogomir" Sarnacki.\n

\n
\n\n\n

•

\n\n\n
\n

Talk #3

\n\n

\n Trzecie przemówienie odbyło się beze mnie.\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Więcej tutaj: WRUG / Spotkanie styczniowe o debugowaniu, Neo4j i Ember.js.\n

\n\n

\n Do zobaczenia na WRUGu!\n

\n
2014-01-27 23:00:00 wrug-styczniowy-o-debugowaniu-neo4j-i-emberjs ckbw97zyw0007i3umdszu2ola 2014-01-27 23:00:00 2014-01-27 23:00:00 chr175nk00030i3um3933deoz Narzędzia Świata: more.js https://piecioshka.pl/blog/2014/01/30/narzedzia-swiata-more-js.html

\n Duże tabele danych z duża ilością tekstu w komórkach? Czytelność takich\n tabel pozostawia wiele do życzenia. Jeśli ten problem spotkał i Ciebie,\n jest na to proste rozwiązanie:\n more.js\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Zasada działania

\n\n

\n To proste narzędzie daj Ci zwarty układ tabelaryczny kosztem\n wyświetlenia całej zawartości komórki. Działa ona w ten sposób,\n że sprawdza każdą komórkę pod kątem długości w niej tekstu. Jeśli jest\n jego za dużo, skraca, do liczby znaków zdefiniowanych podczas\n inicjalizacji. Dodaje tym samym link "more" który po kliknięciu\n pokazuje całą zawartość komórki oraz dodaje link "less" aby móc\n przywrócić zawartość komórki do skróconej wersji.\n

\n
\n\n
\n

Jak to wygląda w praktyce?

\n\n
    \n
  • \n

    Przed zastosowaniem biblioteki:

    \n \n
    • \n
  • \n

    Po zastosowaniu more.js lub po kliknięciu 'less' (collapse):

    \n \n
    • \n
  • \n

    Po zastosowaniu more.js i kliknięciu 'more' (expand):

    \n \n
    • \n
\n
\n\n
\n

Jak skorzystać z more.js?

\n\n
<script src="https://rawgithub.com/piecioshka/more.js/master/more.js"></script>\n<script> new More('#big-table', 10); </script>
\n\n

\n Jak widać, najważniejsza jest konfiguracja:\n

\n\n
    \n
  • \n selektor do tabeli - np. #big-table, table (wtedy\n mechanizm zostanie zastosowany na wszystkich tabelach na stronie)\n
    • \n
  • \n dozwolona liczba znaków w komórce - np. 10, 20\n
    • \n
\n
\n\n
\n

Więcej

\n\n

\n Demo: https://piecioshka.pl/projects/more.js/example/
\n Źródło: github.com/piecioshka/more.js\n

\n
2014-01-29 23:00:00 narzedzia-swiata-morejs ckbw97zyw0007i3umdszu2ola 2014-01-29 23:00:00 2014-01-29 23:00:00 +ckikdndfs02bhi3umexn9f83y Jak wysłać formularz przyciskiem nieznajdującym się w formularzu? https://webroad.pl/html5-css3/7816-jak-wyslac-formularz-przyciskiem-nieznajdujacym-sie-w-formularzu Standardowo przycisk z atrybutem type=”submit” wysyła formularz, w którym bezpośrednio się znajduje. Jak zatem wysłać formularz przyciskiem, który znajduje się poza nim, w zupełnie innym miejscu dokumentu HTML? Atrybut form dla elementu <button> Za pomocą atrybutu form, do którego przekażemy identyfikator formularza, można wywołać zdarzenie wysłania tego formularza. [crayon-5fd385ee17b73670276533/] To wszystko. 2020-12-11 14:40:13 jak-wyslac-formularz-przyciskiem-nieznajdujacym-sie-w-formularzu ckir2fk800008i3um9c21fesl 2020-12-11 14:40:13 2020-12-11 14:40:13 chu4lcxs00031i3um34bg6av8 Backbonejs: problem z unikalnymi właściwościami obiektowymi https://piecioshka.pl/blog/2014/04/18/backbonejs-problem-z-unikalnymi-wlasciwosciami-obiektowymi.html

\n W dniu dzisiejszym Backbone.js zaskoczył mnie kolejny raz.\n Niestety tym razem negatywnie...\n

\n\n
\n Baner reklamujący artykuł\n
\n\n

Właściwości

\n\n

\n Tworzenie "klas", które dziedziczą po sobie właściwości jest czym\n naturalnym w Backbone. Nadpisywanie tychże właściwości jest równie\n proste. Przykład:\n

\n\n
var AbstractWidget = Backbone.View.extend({\n    template: "foo.html"\n});\n\nvar MenuWidget = AbstractWidget.extend({\n    template: "bar.html"\n});\n\nvar v = new MenuWidget();\nv.template; // bar.html
\n\n

\n Niestety, takie działanie jest tylko do właściwości prymitywnych.\n

\n\n

Problem

\n\n

\n Inaczej sytuacja wygląda gdy mamy do czynienia z obiektami:\n

\n\n
var AbstractWidget = Backbone.View.extend({});\n\nvar MenuWidget = AbstractWidget.extend({\n    templateParams: {},\n\n    initialize: function () {\n        this.templateParams.id = _.uniqueId();\n    }\n});\n\nvar x = new MenuWidget();\nvar v = new MenuWidget();\nx.templateParams.id; // 2\nv.templateParams.id; // 2
\n\n

\n Co ciekawe... gdy zamienimy kolejność wywołania ostatnich linijek:\n

\n\n
var x = new MenuWidget();\nx.templateParams.id; // 1\n\nvar v = new MenuWidget();\nv.templateParams.id; // 2\n\n// Ale gdy uruchamiamy następującą linię:\nx.templateParams.id; // 2
\n\n

Rozwiązanie

\n\n

\n Problemy leży o podnóża działań JavaScript.\n

\n\n
var AbstractWidget = Backbone.View.extend({});\n\nvar MenuWidget = AbstractWidget.extend({\n    templateParams: {},\n\n    initialize: function () {\n        // czyścimy obiektowe właściwości\n        this.templateParams = {};\n\n        this.templateParams.id = _.uniqueId();\n    }\n});\n\nvar x = new MenuWidget();\nvar v = new MenuWidget();\nx.templateParams.id; // 1\nv.templateParams.id; // 2
\n\n

\n Przedstawiam 2 bardzo ważne zasady programowaniu w JavaScript:\n

\n\n
    \n
  • Wartości prymitywne\n string, number, boolean, null, undefined są przekazywane\n przez wartość.
    • \n
  • Wartości obiektowe przez referencję!
    • \n
\n\n 2014-04-17 22:00:00 backbonejs-problem-z-unikalnymi-wlasciwosciami-obiektowymi ckbw97zyw0007i3umdszu2ola 2014-04-17 22:00:00 2014-04-17 22:00:00 ckh1pqzag029gi3umhbnnc9kq Import dużej bazy danych MySQL (MariaDB) za pomocą CLI https://webroad.pl/hosting/7749-import-duzej-bazy-danych-mysql-mariadb-za-pomoca-cli Kiedy baza danych zaczyna się rozrastać, ciężkie staje się używanie GUI (np. phpMyAdmin) podczas importów wielkich bazodanowych zrzutów. Na szczęście można użyć do tego CLI. Życie od razu staje się prostsze. Zaloguj się do serwera przez SSH, a następnie wykonaj poniższą komendę: [crayon-5fa1188dd7ca0897679914/] Zadziałało! Import dużej bazy MySQL w PLESK Nie jest fajnie jednak podawać […] 2020-11-03 08:31:37 import-duzej-bazy-danych-mysql-mariadb-za-pomoca-cli ckir2fk800008i3um9c21fesl 2020-11-03 08:31:37 2020-11-03 08:31:37 ckh9iwnow029qi3um0nlx4joo Kopia bazy danych MySQL (MariaDB) za pomocą CLI https://webroad.pl/hosting/7759-kopia-bazy-danych-mysql-mariadb-za-pomoca-cli Pisałem w poprzednim poście o tym, jak wykonać szybki import bazy danych MySQL za pomocą CLI. Aby wypełnić lukę i zamknąć temat dzisiaj przedstawiam krótką metodę na wykonanie pełnego zrzutu bazy do pliku. Zobacz, jak wgrać kopię bazy danych na serwer za pomocą CLI Zrzut bazy danych MySQL (MariaDB) Zakładam, że kopie zapasowe znajdować się […] 2020-11-08 19:42:14 kopia-bazy-danych-mysql-mariadb-za-pomoca-cli ckir2fk800008i3um9c21fesl 2020-11-08 19:42:14 2020-11-08 19:42:14 @@ -3337,7 +3375,6 @@ ckhri0f2g02aei3umafbf1pv4 Pobieranie całego katalogu z serwera zdalnego przez L ckiftqivs02b7i3um7lkr4wlf Od Alpha do Beta w pół roku? Nieźle! Czekamy na Bootstrap 5 https://webroad.pl/inne/7783-od-alpha-do-beta-w-pol-roku-niezle-czekamy-na-bootstrap-5 Nareszcie pojawiła się pierwsza beta Bootstrapa 5. Poza wcześniej już opisywanymi nowościami pojawiło się kilka nowych udogodnień oraz szereg mniejszych i większych zmian. Pojawiło się również wsparcie dla tekstu pisanego od prawej do lewej strony. Układ right-to-left (RTL) Oficjalna dokumentacja Bootstrapa odwołuje się już do nowej, piątej wersji. Zobaczymy w niej zmiany w nazewnictwie kluczowych […] 2020-12-08 10:11:43 od-alpha-do-beta-w-pol-roku-niezle-czekamy-na-bootstrap-5 ckir2fk800008i3um9c21fesl 2020-12-08 10:11:43 2020-12-08 10:11:43 ckih8iy6o02bbi3umesb956jf Byte My Code Online: spotkaj światowej sławy ekspertów IT już 12 grudnia https://webroad.pl/konferencje/7793-byte-my-code-online-spotkaj-swiatowej-slawy-ekspertow-it-juz-12-grudnia Zbliża się czwarta edycja konferencji ByteMyCode powered by UBS! W tym roku uczestnicy spotkają się w wirtualnym świecie, a tematem przewodnim edycji będzie: „Współczesny Inżynier rok później: innowacyjna adaptacja do #NewNormal„. Na cyfrowej scenie wystąpią światowej sławy gwiazdy IT.  ByteMyCode 2020 to seria technicznych, praktycznych rozmów na temat uczenia maszynowego, sztucznej inteligencji, chmury, nauki o danych […] 2020-12-09 09:53:30 byte-my-code-online-spotkaj-swiatowej-slawy-ekspertow-it-juz-12-grudnia ckir2fk800008i3um9c21fesl 2020-12-09 09:53:30 2020-12-09 09:53:30 ckiiyxtj402bfi3um25h99x3d Automatyczne skracanie tekstu w CSS – sposób na jedną linię i dłuższy akapit https://webroad.pl/html5-css3/6622-automatyczne-skracanie-tekstu-w-css Pytaliście w komentarzach jak skracać tekst znajdujący się w kilku wierszach, w akapicie. Jest to obecnie możliwe również za pomocą CSS. Postanowiłem więc odświeżyć ten wpis z przed lat i dostosować go do bieżących możliwości przeglądarek. Pierwsza część zawiera to, co było tutaj do tej pory – skracanie tekstu w jednej linii. Druga część poradnika […] 2020-12-10 15:00:40 automatyczne-skracanie-tekstu-w-css-sposob-na-jedna-linie-i-dluzszy-akapit ckir2fk800008i3um9c21fesl 2020-12-10 15:00:40 2020-12-10 15:00:40 -ckikdndfs02bhi3umexn9f83y Jak wysłać formularz przyciskiem nieznajdującym się w formularzu? https://webroad.pl/html5-css3/7816-jak-wyslac-formularz-przyciskiem-nieznajdujacym-sie-w-formularzu Standardowo przycisk z atrybutem type=”submit” wysyła formularz, w którym bezpośrednio się znajduje. Jak zatem wysłać formularz przyciskiem, który znajduje się poza nim, w zupełnie innym miejscu dokumentu HTML? Atrybut form dla elementu <button> Za pomocą atrybutu form, do którego przekażemy identyfikator formularza, można wywołać zdarzenie wysłania tego formularza. [crayon-5fd385ee17b73670276533/] To wszystko. 2020-12-11 14:40:13 jak-wyslac-formularz-przyciskiem-nieznajdujacym-sie-w-formularzu ckir2fk800008i3um9c21fesl 2020-12-11 14:40:13 2020-12-11 14:40:13 ckiqb0bbs02bni3um1dr60iru Jak zaznaczyć poprawnie i błędnie wypełnione pola formularza w CSS? https://webroad.pl/html5-css3/7801-jak-zaznaczyc-poprawnie-i-blednie-wypelnione-pola-formularza-w-css Znacie ten ból podczas wypełniania formularza na stronie internetowej? Ciągłe komunikaty – wypełnij to pole, niepoprawny format. Klikamy i klikamy, czasem kilka razy w przycisk wysyłania, za każdym razem dowiadując się o błędach walidacji. Co zrobić, aby takim jak my, żyło się lepiej? Zaoferować choćby minimalną, niewielką pomoc w postaci pseudo-klas CSS :valid i :invalid. […] 2020-12-15 18:12:55 jak-zaznaczyc-poprawnie-i-blednie-wypelnione-pola-formularza-w-css ckir2fk800008i3um9c21fesl 2020-12-15 18:12:55 2020-12-15 18:12:55 ci05saf400039i3um6lds65fi WarsawJS Meetup #1 https://piecioshka.pl/blog/2014/09/17/warsawjs-meetup-1.html

\n 16-09-2014 ta data zostanie na długo w mojej pamięci, z uwagi na pierwszy meetup jako organizator,\n ale też jako prelegent, przed tak dużą publicznością!\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Talk #1: The future of JavaScript - ES6 Adam Babik

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Ember for Multi Page applications Krzysztof Modras

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: Commercial OpenStreetMap implementation Marcin Cimaszewski

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #4: First app on Samsung Smart TV platform Piotr Kowalski

\n\n \n
\n\n
\n

Invitation

\n\n

\n W imieniu organizatorów WarsawJS serdecznie zapraszam na pierwsze spotkanie!\n

\n\n \n
\n\n
\n

[Aktualizacja]

\n\n

\n Dziękujemy za przybycie!\n

\n\n \n
2014-09-16 22:00:00 warsawjs-meetup-1 ckbw97zyw0007i3umdszu2ola 2014-09-16 22:00:00 2014-09-16 22:00:00 ci1pign40003di3umavhqcj54 WarsawJS Meetup #2 https://piecioshka.pl/blog/2014/10/26/warsawjs-meetup-2.html

\n Drugie spotkanie organizacji WarsawJS. Zapraszam do obejrzenia zapowiedzi\n oraz trzech prelekcji, które wydarzyły się podczas tego meetupu.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Talk #1: What if we don't have API? [EN] Tomasz Ducin

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: How do we structure code in Ember? [EN] Piotr Zientara

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: oAuth in JS Daniel Kopka

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #4: Samsung MultiScreen: let your mobile talk to your TV! [EN] Paweł Pruszkowski

\n\n \n
\n\n
\n

Invitation

\n\n

\n Zapraszam w imieniu organizatorów WarsawJS!\n

\n\n \n
\n\n
\n

[Aktualizacja]

\n\n

\n Dziękujemy za przybycie!\n

\n\n \n
2014-10-25 22:00:00 warsawjs-meetup-2 ckbw97zyw0007i3umdszu2ola 2014-10-25 22:00:00 2014-10-25 22:00:00 @@ -3345,6 +3382,7 @@ ci1y58ww0003ei3um1nns3rhq Jak wyłączyć reklamy w systemie? https://piecioshka ci2faj4w0003fi3um9n4f9668 WarsawJS Meetup #3 https://piecioshka.pl/blog/2014/11/13/warsawjs-meetup-3.html

\n Kolejna edycja WarsawJS już wkrótce. To już 3-cie spotkanie! Tym razem\n wszystkie prelekcje po polsku!\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Talk #1: Wzorce projektowe dla aplikacji enterprise w Node.js Konrad Kowalski / Robert Kawecki

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Tworzenie kartograficznych wizualizacji danych z wykorzystaniem LeafletJS oraz OpenStreetMap Wiktor Niesiobędzki

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3- AngularJS pierwsze kroki Dariusz Kalbarczyk / Arkadiusz Kalbarczyk

\n\n \n
2014-11-12 23:00:00 warsawjs-meetup-3 ckbw97zyw0007i3umdszu2ola 2014-11-12 23:00:00 2014-11-12 23:00:00 ci3taxy80003hi3umhtgpawpj WarsawJS Meetup #4 https://piecioshka.pl/blog/2014/12/18/warsawjs-meetup-4.html

\n W miniony poniedziałek odbyło się już #4 spotkanie organizacji WarsawJS.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Talk #1: Zastosowanie JavaScript (Node.js) w robotyce Marcin Borkowski

\n\n

\n Marcin poprowadził około 50 minutową prezentację na temat Cylon.js (cylonjs.com).\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Large Applications Routing Using AngularJS UI-Router [EN] Piotr Błaszczak

\n\n

\n Piotr opowiedział o routingu w AngularJS.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: What RESTful API is not Tomasz Skowroński

\n\n

\n Ostatnią prelekcje poprowadził Tomasz Skowroński który opowiedział o REST i wyjaśnił jaka jest różnica między REST a CRUD.\n

\n\n \n
\n\n
\n

Zdjęcia

\n\n

\n Zdjęcia ze spotkania dostępne pod adresem: meetup.com/WarsawJS/photos/25801548/\n

\n
2014-12-17 23:00:00 warsawjs-meetup-4 ckbw97zyw0007i3umdszu2ola 2014-12-17 23:00:00 2014-12-17 23:00:00 ci4t0y8w0003ji3um2f5p1xb6 Golang Warsaw #2 https://piecioshka.pl/blog/2015/01/12/golang-warsaw-2.html

\n Dziś odbyło się drugie spotkanie\n Golang Warsaw.\n Jest to nowa organizacja w naszym mieście (dopiero drugie spotkanie w\n systemie comiesięcznym). Wiodącym językiem\n Go.\n

\n\n

\n Będzie to moje pierwsze spotkanie z ludźmi pracującym w tym języku.\n Nie ukrywam, że chciałbym dowiedzieć się czegoś o tym nowym, tak mocno\n reklamowanym języku.\n

\n\n

\n Godzina 18:15 - Zaczynamy!\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Talk #1: Testowanie w Go

\n\n

\n Pierwsza prelekcja - Tomasz Grodzki (github.com/tg) opowiedział\n o testowaniu aplikacji napisanym w Go. Miałem nadzieje, że dowiem się czegoś o testowaniu oraz debugowaniu aplikacji.\n

\n\n

\n Tomek powiedział, że w Go można łatwo pisać aplikację na wielu procesorach, ze względu na to, że ma dzielone wątki.\n Go ma wiele wbudowanych rzeczy, m. in. biblioteka pomocna w testach (testing).\n

\n\n

Testowanie kodu napisanego w Go

\n\n

\n Pisanie pierwszego testu: do danego pliku dodajemy na końcu:\n _test.go.\n

\n\n

Pierwsza metoda:

\n\n
package party\n\nimport "testing"\n\nfunc TestBeer(t * testing.T) {\n    if !FridgeContains("beer") {\n        t.Fatal("expected some cold beer");\n    }\n}
\n\n

Druga metoda (from outside):

\n\n
package part_test\n\nimport (\n    "testing"\n    "rihanna.com/party"\n)\n\nfunc TestBeer(t *testing.T) {\n    if !party.FridgeContains("beer") {\n        t.Fatal("expected some cold beer");\n    }\n}
\n\n

Uruchomienie testów

\n\n
$ go test .\n$ go test rihanna.com/party\n$ go test ./... # odpala wszystkie testy w głąb
\n\n

\n testing.T - nasze magiczne 't'. Biblioteka pomocna w testach.\n Zawiera mnóstwo metod tj: Error, Errorf, Fail, FailNow, Failed, Fatal, Fatalf, Log, Logf, Parallel, Skip, SkipNow, Skipf, Skipped.\n

\n\n

\n Logi pokazują się tylko w przypadku kiedy dany test nie przeszedł.\n Jeśli uruchomimy testy w parametrem verbose, pokażemy wszystkie logi (nawet w tych testach które przeszły).\n

\n\n

\n Testy z parallel będą się uruchamiały jednocześnie.\n

\n\n

Examples - część testu

\n\n
func ExampleHandsUp() {\n    fmt.PrintLn(HandsUp("o o o")\n    // Output:\n    // \\o/ \\o/ \\o/\n}\n\nfunc Example() // package\nfunc ExampleF() // function\nfunc ExampleT() // type\nfunc ExampleT_M() // method\n\nfunc Example*_xyz() // more...
\n\n

Dokumentacja

\n\n
$ go doc -ex=true . # budowanie dokumentacji
\n\n

\n Narzędzie to potrafi postawić webserwer oraz wygenerować dokumentację HTML.\n

\n\n

Trzeci rodzaj testów to benchmarks.

\n\n
func BenchmarkHeadSpin(b *testing.B) {\n    for i := 0; i < b.N; i++ {\n        HeadSpin()\n    }\n}
\n\n

\n Uruchamiamy je za pomocą:\n

\n\n
$ go test -bench . # ta kropka to wyrażenie regularne
\n\n

\n go test sam sobie dopiera ile iteracji ma zrobić w ciągu\n zadanego okresu czasowego. Parametr benchtime zmienia ten\n okres czasu.\n

\n\n

\n \n testing.B = testing.T + (ReportAllocs, ResetTimer, RunParallel, SetBytes, SetParallelism, StartTimer, StopTimer)\n \n

\n\n
    \n
  • ReportAllocs - raportuje alokację pamięci
    • \n
\n\n

Więcej kontroli

\n\n
// since go 1.4\nfunc TestMain(m *testing.M) {\n    os.Exit(m.Run())\n}
\n\n

Tyle odnośnie podstaw testowania

\n\n

\n Jeśli do go test przekażesz flagę, której go\n test nie rozpozna przekaże te parametry do MainTest.\n

\n\n

\n W bibliotece standardowej mamy kilka rzeczy, które ułatwiają\n testowanie:\n

\n\n
    \n
  • net/httptest
    • \n
  • testing/iotest - do testowania wejścia / wyjścia
    • \n
  • testing/quick - do testowania: generuje losowe argumenty naszej funkcji
    • \n
\n\n

net / httptest

\n\n
    \n
  • httptest.ResponseRecorder
    • \n
  • httptest.Server - automatycznie nasłuchuje na localhost z wybranym przez system porcie, oraz zwraca nam URL do siebie
    • \n
\n\n

testing / iotest

\n\n
    \n
  • iotest.DataErrReader
    • \n
  • iotest.TimeoutReader - za drugim razem gdy będzie czytał, zwróci iotest.ErrTimeout
    • \n
  • HalfRead - czyta dane do połowy - pomocne do testowania, co się stanie, jeśli nasza fn dostanie mniej danych niż się spodziewa
    • \n
  • OneByteReader - czy nasz fn radzi sobie ze skrajnymi wartościami
    • \n
  • TruncateWrite - zapisze przekazaną liczbę bajtów, ale poinformuje, że zapisał komplet danych - taka oszukańcza fn :smiley:
    • \n
\n\n

testing / quick

\n\n
    \n
  • Black box testing
    • \n
  • Generuje losowe ciągi znaków
    • \n
  • quickCheck and quick.CheckEqual
    • \n
  • inspirowana QuickCheck z Haskell-a
    • \n
\n\n

\n Reflect - dość skomplikowana biblioteka do losowania wartości - więcej golang.org/pkg/reflect/\n

\n\n

quick.Config

\n\n
type Config struct {\n    // Set max number of iterations\n    MaxCount int\n\n    // Scale max number of iterations\n    MaxCountScale flaot64\n\n    // Source of random number\n    Rand *rand.Rand\n\n    // Generator of values\n    Values func ([]reflect.Value, *rand.Rand)\n}
\n\n

Polecane narzędzia

\n\n
    \n
  • go vet - sprawdza popularne błędy w kodzie
    • \n
  • -race flag - stara się wykryć kiedy używamy zmienny z\n różnych go routings
    • \n
  • Go bardzo lubi interfejsy, powinniśmy korzystać z nich, ponieważ lepiej się potem testuje
    • \n
\n\n

Profile

\n\n

\n go test pozwala zapisywać wynik do pliku.\n

\n\n
    \n
  • go test -covertprofile cover.out
    • \n
  • go test -cpuprofile cpu.out
    • \n
  • go test -memprofile mem.out
    • \n
\n\n

\n Nie działa to na OSX: github.com/golang/go/issues/6047\n

\n\n

Pokrycie kodu

\n\n
$ go test -cover\n\n# prezentacja na stronie internetowej\n$ go test -coverprofile=c.pro\n$ go test cover -html=c.pro
\n\n

Referencje

\n\n
    \n
  • golang.org/pkg/testing
    • \n
  • blog.golang.org
    • \n
  • go help test
    • \n
  • go help testflag
    • \n
\n
\n\n\n

•

\n\n\n
\n

Talk #2

\n\n

\n Była tylko jedna prelekcja, niestety, ze względu na chorobę drugiego prelegenta.\n

\n\n

Do zobaczenia na następnym Golang!

\n
2015-01-11 23:00:00 golang-warsaw-2 ckbw97zyw0007i3umdszu2ola 2015-01-11 23:00:00 2015-01-11 23:00:00 +ckbt9jpo8023ri3umglj5474n Licencje na oprogramowanie https://typeofweb.com/licencje-oprogramowania/#utm_source=rss&utm_medium=rss&utm_campaign=licencje-oprogramowania

Type of Web - Blog o programowaniu. 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…

\n

Każdy szanujący się programista korzysta z oprogramowania open source. Warto pamiętać, że wykorzystując otwarte oprogramowanie musimy przestrzegać warunków licencji, na jakiej zostało ono udostępnione. Licencje typu open source z reguły udzielają zgody na używanie, modyfikowanie i dystrybucję oprogramowania w dowolnym celu, z zastrzeżeniem warunków chroniących jego pochodzenie i otwartość. Istnieje …

\n

Artykuł Licencje na oprogramowanie pochodzi z serwisu Type of Web.

2020-06-24 11:17:23 licencje-na-oprogramowanie ckiopy3xs0006i3umgmnv8l52 2020-06-24 11:17:23 2020-06-24 11:17:23 ci4uge3k0003ki3umcsmia2qo WarsawJS Meetup #5 https://piecioshka.pl/blog/2015/01/13/warsawjs-meetup-5.html

\n W najbliższy piątek, 16 stycznia, odbędzie się WarsawJS Meetup #5.
\n Miejsce to jak zwykle Państwomiasto ul. Andersa 29. Zaczynamy o 18:30!\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Talk #1: Co potrafi SVG? Dariusz Biedrzycki

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Games development for Smart TV Kamil Kiełbasa

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: Functional and reactive programming techniques, patterns\n and tools on the Front-end [EN] Piotr Klibert

\n\n \n
\n\n
\n

Invitation

\n\n

\n Zapraszam do oglądania!\n

\n\n \n\n

\n Zapisujcie się na:\n

\n\n \n\n

Do zobaczenia w piątek!

\n
\n\n
\n

[Aktualizacja]

\n\n

\n Dziękuję serdecznie wszystkim za przybycie. Zapraszam do galerii zdjęć:\n

\n\n

\n meetup.com/WarsawJS/photos/25852054/\n

\n
2015-01-12 23:00:00 warsawjs-meetup-5 ckbw97zyw0007i3umdszu2ola 2015-01-12 23:00:00 2015-01-12 23:00:00 ci4vvty80003li3um2d0f69lu WRUG styczniowy o rrd-tool, sztuce i organizowaniu projektów https://piecioshka.pl/blog/2015/01/14/wrug-spotkanie-styczniowe-o-rrd-tool-sztuce-i-organizowaniu-projektow.html

\n Dziś wybrałem się na kolejny w tym tygodniu event, a mianowicie WRUG.\n

\n\n
\n \n\n
\n Warsaw Ruby Users Group (WRUG)\n
\n
\n\n
\n

Talk #1: RRDTool

\n\n

\n Pierwsza prelekcja nt. RRD (Round Robin Database) czyli o bazie danych\n która się nie rozszerza. Jest sztywna liczba zadeklarowanych komórek\n w które można wprowadzić dane, a kiedy danych będzie więcej niż jest\n miejsca w bazie danych, każda kolejna wartość nadpisze te wprowadzone\n na samym początku.\n

\n\n

\n Dla mnie mechanizm tej bazy jest bardzo podobny do kolejki FIFO.\n Czyli pierwszy element który zostanie zapisany, zostaje wyrzucony\n (zastąpiony) danymi na końcu, tj. kiedy baza już będzie pełna.\n

\n\n
\n\n

\n Prezentację poprowadził Kamil "y3ti" Grabowski z Rebased.\n

\n\n
Więcej nt. RRDTool
\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Sztuka w programowaniu

\n\n

\n To był mój pierwszy talk o sztuce w programowaniu jaki dane mi było wysłuchać.\n Nigdy nie sądziłem, że tak można myśleć o programowaniu jak o sztuce.\n

\n\n

\n Marta przedstawiła, że w 2004 roku, ktoś wpadł na pomysł wpuszczenia całego kodu jądra linux-a\n do syntezatora mowy. Gdyby ktoś chciał wówczas przesłuchać całego kodu napisanego w C oraz w Perlu\n musiałby spędzić około 2 lata na tym :smiley:\n

\n\n

\n Dodatkowo dowiedzieliśmy się o kilku językach, które nie mają zastosowania komercyjnego.\n Wśród nich jest tzw. Brainfuck.\n

\n\n

\n Prezentację poprowadziła Marta "ameba" Paciorkowska z 3ofcoins.\n

\n
\n\n\n

•

\n\n\n
\n

Talk #3: Organizacja projektów informatycznych

\n\n

\n Ostatni talk na spotkaniu dotyczył prowadzenia projektów. Jarek zaczął omawiać od wskazywania błędów\n w projekcie github.com/discourse/discourse,\n a dokładnie, struktura katalogów była bardzo słaba. Wszelkie warstwy aplikacji były wymieszane.\n

\n\n

\n Najciekawszym wg mnie był slajd dotyczący tworzenia nowego projektu:\n

\n\n 
\n    Jeśli naprawdę jesteś przekonana/przekonany, że masz świetny pomysł, to:\n     - Wydziel osobne repozytorium\n     - "Zaprogramój" swój pomysł\n     - Dokładnie udokumentuj przynajmniej cały zewnętrzny interfejs tego programu\n     - Udostępnij projekt jako Open Source\n     - Przekonaj trzy niepodległe Ci osoby do jego używania\n     - Przekonaj się, że nikt nie chce tego używać\n     - Usuń to repozytorium i ogarnij się.\n
\n\n

\n Prezentację poprowadził Jarosław "Sztywny" Rzeszótko z Holtzbrinck Ventures.\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Kolejne spotkanie WRUG było dla mnie bardzo pozytywne. Dowiedziałem się, dużo ciekawych rzeczy nt. RRDTool\n oraz prowadzenia projektów (utrzymania, czy też zarządzania). Dodatkowo, Marta zaszczepiła w mojej głowie\n myśl, że programowanie to nie tylko pisanie kodu, ale też swego rodzaju sztuka.\n

\n\n

\n Więcej znajdziecie tutaj: wrug.eu/2015/01/11/spotkanie-styczniowe/\n

\n
2015-01-13 23:00:00 wrug-styczniowy-o-rrd-tool-sztuce-i-organizowaniu-projektow ckbw97zyw0007i3umdszu2ola 2015-01-13 23:00:00 2015-01-13 23:00:00 ckir2fk8002boi3um6prm5d4y Wykrywanie systemowych preferencji trybu ciemnego lub jasnego w CSS https://webroad.pl/html5-css3/7825-wykrywanie-systemowych-preferencji-trybu-ciemnego-lub-jasnego-w-css Ostatnio bardzo modny ale i za razem praktyczny – z punktu widzenia użytkownika – jest temat udostępniania wszem i wobec ciemnych wersji interfejsu aplikacji webowych. Sam jestem zwolennikiem tego ruchu i z utęsknieniem wypatruję kolejnych usług, które taką formę oferują. Co ciekawe, za pomocą CSS3 i reguł dostępnych w Media Queries Level 5 możemy wykryć […] 2020-12-16 07:00:36 wykrywanie-systemowych-preferencji-trybu-ciemnego-lub-jasnego-w-css ckir2fk800008i3um9c21fesl 2020-12-16 07:00:36 2020-12-16 07:00:36 @@ -3352,7 +3390,8 @@ ck7dg4feg01x9i3um5pb9c0f6 Dowiedz się ile zarabiają gwiazdy frontendu! https:/ ck7up224001xui3um58n635i9 Praca zdalna: Lista 20 przydatnych narzędzi https://typeofweb.com/praca-zdalna-narzedzia/#utm_source=rss&utm_medium=rss&utm_campaign=praca-zdalna-narzedzia

Type of Web - Blog o programowaniu. 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…

\n

Jakie narzędzia sprawiają, że praca zdalna z domu staje się prostsza? Ostatnie zagrożenie epidemiologiczne, z którym przychodzi nam się mierzyć sprawiło, że pracodawcy szukało rozwiązań pozwalających na omijanie do biura, w związku z czym pracownicy i pracowniczki wielu firm przeszli w tryb Home Office. Jednak, dla niektórych praca zdalna jest …

\n

Artykuł Praca zdalna: Lista 20 przydatnych narzędzi pochodzi z serwisu Type of Web.

2020-03-16 16:40:30 praca-zdalna-lista-20-przydatnych-narzedzi ckiopy3xs0006i3umgmnv8l52 2020-03-16 16:40:30 2020-03-16 16:40:30 ck9illh40020ui3um284tcek3 Podsumowanie roku 2019 https://typeofweb.com/podsumowanie-roku-2019/#utm_source=rss&utm_medium=rss&utm_campaign=podsumowanie-roku-2019

Type of Web - Blog o programowaniu. 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…

\n

Nieco spóźnione, ale oto i ono: Podsumowanie mojego roku 2019. Długo zwlekałem z napisaniem tego posta głównie ze względu na sytuację panującą na świecie… wiele moich planów uległo zmianie; musiałem też przeprioretyzować pewne sprawy. Ale jest też kilka bardzo dobrych wiadomości! Rok 2019 2019 był dla mnie definitywnie rokiem podróży. …

\n

Artykuł Podsumowanie roku 2019 pochodzi z serwisu Type of Web.

2020-04-27 14:49:48 podsumowanie-roku-2019 ckiopy3xs0006i3umgmnv8l52 2020-04-27 14:49:48 2020-04-27 14:49:48 ckb990wls0236i3umc51ldt0p React Hooks: Piszemy własne hooki! https://typeofweb.com/react-hooks-wlasne-hooki/#utm_source=rss&utm_medium=rss&utm_campaign=react-hooks-wlasne-hooki

Type of Web - Blog o programowaniu. 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…

\n

Niewątpliwą zaletą React Hooks jest to, jak łatwo możemy wydzielać fragmenty logiki do własnych hooków. W tym artykule pokazuję Ci, jak napisać swoje hooki, jakie obowiązują zasady i jak sprawić, aby Twój kod był lepszy! Własny React Hook Przy tworzeniu własny hooków obowiązują nas te same reguły, co tych wbudowanych: …

\n

Artykuł React Hooks: Piszemy własne hooki! pochodzi z serwisu Type of Web.

2020-06-10 11:07:22 react-hooks-piszemy-wlasne-hooki ckiopy3xs0006i3umgmnv8l52 2020-06-10 11:07:22 2020-06-10 11:07:22 -ckbt9jpo8023ri3umglj5474n Licencje na oprogramowanie https://typeofweb.com/licencje-oprogramowania/#utm_source=rss&utm_medium=rss&utm_campaign=licencje-oprogramowania

Type of Web - Blog o programowaniu. 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…

\n

Każdy szanujący się programista korzysta z oprogramowania open source. Warto pamiętać, że wykorzystując otwarte oprogramowanie musimy przestrzegać warunków licencji, na jakiej zostało ono udostępnione. Licencje typu open source z reguły udzielają zgody na używanie, modyfikowanie i dystrybucję oprogramowania w dowolnym celu, z zastrzeżeniem warunków chroniących jego pochodzenie i otwartość. Istnieje …

\n

Artykuł Licencje na oprogramowanie pochodzi z serwisu Type of Web.

2020-06-24 11:17:23 licencje-na-oprogramowanie ckiopy3xs0006i3umgmnv8l52 2020-06-24 11:17:23 2020-06-24 11:17:23 +ciall3gg00042i3umgxjef1xx Narzędzia usprawniające prace z Git https://piecioshka.pl/blog/2015/06/07/narzedzia-usprawniajace-prace-w-git.html

\n Dziś obejrzałem prezentację Michała Lewandowskiego\n z Jinkubatora pt: Git - krok po kroku.\n (Link do prelekcji znajdziecie poniżej).\n

\n\n

\n Zachęciło mnie to do napisania posta, aby przelać "na papier" słowa\n wypowiedziane.\n

\n\n

\n Michał podczas prezentacji, przedstawił jak działa Git, w jaki sposób\n radzi on sobie z tworzeniem rewizji, branchy czy tagów. Na początku\n prezentacji Michał zareklamował narzędzie tig z którego\n miał często korzystać podczas weryfikacji stanu repozytorium, jednak\n chyba ze względu na stres korzystał z sourceTree :smiley:
\n Bardzo mnie zaciekawiło to narzędzie (tig oczywiście,\n nie sourceTree), zrobiłem więc szybki research i od razu\n postanowiłem, że się z nim zaprzyjaźnię.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Tig

\n\n

\n Kiedyś, gdy w ferworze rozglądałem się nad jakimiś narzędziami z GUI\n do zarządzania repozytorium, dowiedziałem się o istnieniu\n tig-a. Wtedy jednak narzędzie nie zrobiło na mnie\n jakiegoś wrażenia. Chciałem czegoś więcej. Czegoś co będzie miało\n jakiś interfejs użytkownika prezentowany w nowym oknie. Wybrałem\n wtedy narzędzie, które uruchamia się po uruchomieniu polecenia\n gitk.\n

\n\n

\n Jest ono bardzo lekkie:\n

\n\n
$ du -sh /usr/bin/gitk\n 88K    /usr/bin/gitk
\n\n

\n Tym samym działa szybko - a jest to dla mnie priorytem w doborze softu\n do codziennej pracy. Ile czasu można stracić używając wolnego\n oprogramowania to na pewno każdy z nas już się o tym przekonał.\n

\n\n

\n Pozwolę sobie zamieścić zrzut ekranu z głównego okna kiedy to\n uruchamiam tig-a na jednym z moich projektów:\n

\n\n \n\n

Opcje

\n\n

\n tig to bardzo szybkie narzędzie konsolowe, dzięki któremu\n mamy dostęp do wielu rzeczy korzystając z prostych skrótów\n klawiaturowych.\n

\n\n

\n Najważniejszym skrótem jest oczywiście dostęp do pomocy. Wchodzimy\n do programu i ... h.
Wchodzimy tym samym do ekranu\n z całą listą skrótów dostępnych pod tigiem.\n

\n\n
m view-main         Show main view\nd view-diff         Show diff view\nl view-log          Show log view\nt view-tree         Show tree view\nf view-blob         Show blob view\nb view-blame        Show blame view\nr view-refs         Show refs view\ns, S view-status       Show status view\nc view-stage        Show stage view\ny view-stash        Show stash view\ng view-grep         Show grep view\np view-pager        Show pager view\nh view-help         Show help view
\n\n

\n Lista powyżej jest listą ekranów do których mamy dostęp za pomocą\n pojedynczych literek jako skrótów klawiaturowych - zwykłych literek.\n

\n\n

\n Nie będę się starał opisywać całego programu, bo to nie o to\n chodzi - zresztą dziś zacząłem się nim interesować, więc potrzebuje\n jeszcze jakieś kilka tygodni codziennej pracy, aby móc się szerzej\n wypowiedzieć :smiley:\n

\n\n

\n Nie mniej jednak zachęcam do korzystania, ponieważ dzięki\n tig zarządzamy repozytorium nie wpisując całych poleceń\n do konsoli tylko korzystamy z łatwych skrótów. Nie czuję tutaj, abym\n nie wiedział co w danej chwili uruchomił za mnie program, tak jak ma\n to miejsce w tak skomplikowanych programach jak SourceTree\n czy chociażby GitHub for Mac.\n

\n
\n\n
\n

git flow

\n\n

\n Kolejnym narzędziem pomocnym w pracy z Git-em jest\n git flow. Nie jest to narzędzie zainstalowane domyślnie\n razem z Git-em, trzeba je zainstalować out-of-the-box.
\n (Link znajdziecie poniżej).\n

\n\n

\n git flow wymusza na nas utrzymanie porządku w branchach\n i tagach, nie poprzez przełączanie się bezpośrednio pomiędzy\n branchami, tylko według zasad zdefiniowanych w tzw flow.\n

\n\n

\n Nie mogę powiedzieć, że mam jakieś doświadczenie z takim podejściem,\n więc przytoczę tylko to co Michał\n (@lewandm4) przekazał na\n szkoleniu.\n

\n\n

\n Podstawową funkcjonalności jest przełączanie się pomiędzy feature-ami\n stworzonymi w projekcie poprzez:\n

\n\n
$ git flow feature start 12345-support-sign-up
\n\n

\n Kiedy zakończymy nad nim pracę informujemy, że feature został\n zakończony:\n

\n\n
$ git flow feature finish 12345-support-sign-up
\n\n

\n Wtedy taki branch zostaje zmergowany do brancha develop.\n Jest to branch w których nie prowadzimy żadnych prac, jest to taki\n kolektor, agregat, funkcjonalności realizowanych w innych branchach\n typu feature/xxx.
Hint: branch master jest\n odzwierciedleniem aplikacji na produkcji, czyli takiej która jest\n u klienta.\n

\n\n

\n Ten rysunek przedstawia jak wygląda praca z git flow:\n

\n\n \n\n

\n Bardzo ciekawą opcją jest jeszcze tworzenie release-ów\n aplikacji.
Z pomocą przychodzi tutaj polecenie:\n

\n\n
$ git flow release start 1.0
\n\n

\n git flow przełącza nas na specjalnego brancha, w którym\n możemy jeszcze tworzyć rewizję (np. podmiana numerka wersji w jakim\n README). Jest to bardzo wygodne rozwiązanie, bo jeśli nic nie musimy\n robić to po prostu wykonujemy finish tego procesu:\n

\n\n
$ git flow release finish 1.0
\n\n

\n Ze swojej strony bardzo zachęcam do chociażby wypróbowania takiego\n podejścia do zarządzania branchami w swoim projekcie.\n

\n\n

\n Najlepiej jak by cały zespół projektowy wykorzystywał te narzędzie,\n zachowalibyśmy spójność w całym projekcie, co jest w większych\n projektach nie tylko wskazane, ale bez spójności (procedur) szybko\n zrobiłby się jakiś b... nieporządek :smiley:\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Link do wcześniej wspomnianych rzeczy:\n

\n\n \n
2015-06-06 22:00:00 narzedzia-usprawniajace-prace-z-git ckbw97zyw0007i3umdszu2ola 2015-06-06 22:00:00 2015-06-06 22:00:00 +ciapvf0g00043i3umfgin55qm ECMAScript 6. Dlaczego warto spróbować już dziś? https://piecioshka.pl/blog/2015/06/10/ecmascript-6-dlaczego-warto-sprobowac-juz-dzis.html

Kiedy powstało narzędzie 6to5 które miało być translatorem nowej składni JavaScript\nnie rzuciłem się na niego, ze względu na to, że potrzebowałem dowodu, że działa w 100%.

\n\n

Temat odszedł trochę w zapomnienie. Dałem sobie spokój z poznawaniem nowej składni - skoro jeszcze\nnie została ona zatwierdzona żadną pieczęcią.

\n\n

Nie chciałem uczyć się czegoś nowego co jest tylko draftem. Cenię sobie stabilne rozwiązania.
\nKilka tygodni temu temat wrócił ze zdwojoną siłą... dlaczego?

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Powrót z dalekiej podróży...

\n\n

... bo 6to5 zmienił nazwę na Babel.js.

\n\n

Dało mi to nadzieję, że może coś się zmieniło w kwestii stabilności transpilera. Wgłębiłem się w temat\n i okazało się, że Babel.js wspiera w 75% wg kangax\n standard który jest zapisany w dokumencie, który ma być zatwierdzony "na dniach".

\n\n

Wydaje mi się to na tyle sensowną liczbą, że warto już dziś zacząć pisać z użyciem nowej składni.\n 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.

\n\n

Tak przedstawia się lista wsparcia feature–ów z ES6 przez Babel.js:

\n\n \n\n

Jak widać na powyższym obrazku lista nowych rzeczy jest wielka. Nowa składnia pozwala nam na uniknięcie wielu haków,\n chociażby znany wszystkich niby-obiekt, niby-tablica arguments, w którym znajduje się lista argumentów\n przekazanych do funkcji. Jednak to nie jest zwykła tablica, bo nie można na niej uruchomić metod z konstruktora Array.\n Takie zadanie jest możliwe po zastosowaniu rzutowania:

\n\n
function foo() {\n    var args = Array.prototype.slice.call(arguments);\n    var operation = args.slice(0, 1);\n    var things = args.slice(1);\n    console.log(operation, things);\n    // ...\n}
\n\n

Czy faktycznie taka linijka musi być w każdym miejscu kiedy chcemy operować na tablicy argumentów?

\n\n

ECMAScript 6 ma w swoich zbiorze ulepszeń rest parameters. Dzięki temu kod może wyglądać tak:

\n\n
function foo(...args) {\n    var operation = args.slice(0, 1);\n    var things = args.slice(1);\n    console.log(operation, things);\n    // ...\n}
\n\n

Prawda, że ładniej? :smiley:

\n
\n\n
\n

Skąd czerpać wiedzę?

\n\n

\n Pewnego czasu kupiłem kilka domen, które kierują na jedną: ecmascript6.pl.
\n Gdzie stworzyłem agregat linków do wartościowych artykułów, tutoriali nt. ES6. Zachęcam do częstego odwiedzania.\n Codziennie powstają nowe artykuły, tutoriale i prezentacje z konferencji.\n

\n\n

\n Chyba najbardziej zaangażowanym developerem jest Dr. Axel Rauschmayer.\n Na swoim blogu (www.2ality.com) stworzył już kilka bardzo dobrze\n opisanych artykułów dotyczących ECMAScript 6 (więcej w pkt 6. na stronie ecmascript6.pl.\n

\n\n

\n Ci z Was którzy lubią dużo czytać, na pewno zostaną pochłonięci przez książkę napisaną przez Nicholasa C. Zakasa\n pt. Understanding ECMAScript 6. Jest ona dostępna pod adresem: https://leanpub.com/understandinges6/read/.\n Jestem tym szczęśliwcem, który posiada wersję papierkową.\n

\n
\n\n
\n

Dlaczego więc warto?

\n\n
\n Komitet Ecma TC39 rozwija przed nami dywan.
\n Dywan po którym Ty i ja wkrótce będziemy stąpali.
\n Na dziś dzień jeszcze ten dywan nie został rozwinięty do końca,
\n dlatego gdy chcesz poczuć jak to jest po nim chodzić
\n musisz wykorzystać linoleum, które jest tylko skromnym zamiennikiem.

\n Linoleum w tej historii jest transpiler np. Babel.js bądź Traceur.
\n Dywanem jest ECMAScript 6\n Piotr Kowalski. 2015-06-10\n
\n
2015-06-09 22:00:00 ecmascript-6-dlaczego-warto-sprobowac-juz-dzis ckbw97zyw0007i3umdszu2ola 2015-06-09 22:00:00 2015-06-09 22:00:00 ckc5yw0y8024ci3um82wv3fc3 Hey.com – rewolucyjny email od twórców Basecampa? https://typeofweb.com/hey-com-rewolucyjny-email-od-tworcow-basecampa/#utm_source=rss&utm_medium=rss&utm_campaign=hey-com-rewolucyjny-email-od-tworcow-basecampa

Type of Web - Blog o programowaniu. 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…

\n

Od chwili, gdy pierwszy raz usłyszałem o Hey byłem niesamowicie podekscytowany. Zarządzanie mailami to coś, co wiecznie sprawia mi problem, a Inbox zero jest dla mnie praktycznie nieosiągalne. Dlatego ucieszyłem się, że ktoś próbuje coś w tym temacie zmienić i zbudować konkurencję dla Gmaila: Hey.com od twórców Basecampa! Rejestracja Gdy się …

\n

Artykuł Hey.com – rewolucyjny email od twórców Basecampa? pochodzi z serwisu Type of Web.

2020-07-03 08:40:02 heycom-rewolucyjny-email-od-tworcow-basecampa ckiopy3xs0006i3umgmnv8l52 2020-07-03 08:40:02 2020-07-03 08:40:02 ci53117k0003mi3umdgb36mir Narzędzia Świata: pokemon-picker https://piecioshka.pl/blog/2015/01/19/narzedzia-swiata-pokemon-picker.html

\n Jaka radość we mnie się pojawiła, kiedy zauważyłem w dniu wczorajszy\n w późnych godzinach nocnych pierwszą prośbę o zaakceptowanie zmian\n w projekcie:\n pokemon-picker.\n

\n\n

\n ...a wszystko to, dzięki mojemu lightning-owi podczas\n WarsawJS\n Meetup #5.\n Przynajmniej tak mi się wydaje! :smiley:\n

\n\n

\n Developerem zgłaszającym był mój kolega\n @adamminiuk.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Ale co to jest?

\n\n

\n Spieszę z wyjaśnieniem. Dosyć często kiedy do głowy wpadnie mi pomysł\n na projekt, czy to jakieś narzędzie, czy ciekawą grę, to mam problem\n z nazewnictwem...\n

\n\n

\n Postanowiłem więc, napisać projekt który będzie mi generował nazwę\n do innych. Chciałem, żeby to był jakiś "wybieracz" z wcześniej\n zdefiniowanej listy nazw, które akceptuje. Nie chciałem, żeby mi\n doklejał spółgłoski do samogłosek i w ten sposób generował jakąś dziwną\n nazwę.\n

\n\n

\n W stylu:\n

\n\n
    \n
  • Azubela
    • \n
  • Pakobywa
    • \n
\n\n

\n Chciałem, żeby to były nazwy, które z czymś mi się kojarzą, a że\n w dzieciństwie się oglądało to teraz można wykorzystać ten czas\n spędzony przed telewizorem.\n

\n
\n\n
\n

Użycie

\n\n
# install globally\n$ npm install -g pokemon-picker\n\n# choose random pokemon\n$ pokemon-picker
\n\n

\n Ostatnie polecenie powinno zwrócić coś w stylu:\n

\n\n
{\n    name: 'Talonflame',\n    types: [ 'Fire', 'Flying' ],\n    index: 672\n}
\n
\n\n
\n

Podsumowanie

\n\n

\n Warto chwalić się pomysłami, bo społeczność czuwa i nie wiadomo kiedy\n przyjdzie taki moment, w którym dostaniesz wsparcie od obcych osób.\n

\n
2015-01-18 23:00:00 narzedzia-swiata-pokemon-picker ckbw97zyw0007i3umdszu2ola 2015-01-18 23:00:00 2015-01-18 23:00:00 ci54gh280003ni3umaj5c5c48 Divshot vs GitHub - jako hosting do projektów webowych https://piecioshka.pl/blog/2015/01/20/divshot-vs-github-jako-hosting-do-projektow-webowych.html

\n Od kilku dni testuje Divshot. Narzędzie, które zostanie wykorzystane przy deploymencie\n aplikacji podczas zbliżającego się hackathon-u 2015.staticshowdown.com.\n

\n\n

\n Deployment moich czysto webowych aplikacji polegał na wykorzystaniu GitHub-a. Czyżby czas na zmianę?\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

GitHub

\n\n

\n Często do swoich aplikacji wykorzystuje GitHub Pages aby kod aplikacji upublicznić.\n

\n\n

\n Deployment aplikacji jest bardzo prosty wystarczy wgrać zmiany na origin/gh-pages i po chwili (Cache GitHub-a) mamy\n naszą aplikację na tzw. produkcji.\n

\n
\n\n
\n

Divshot

\n\n

\n Ciekawość mnie zżera na czym może polegać hosting\n Front-end-owy. Przecież bez hosting silnie\n wiąże się częścią aplikacji po stronie serwera. Zobaczmy czym się charakteryzuje taki hosting.\n

\n
\n\n
\n

Wady i zalety

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
GitHubDivshot
\n Hosting z 3 trybami dostępu: dla developera, staging (czyli\n taka preprodukcja) oraz produkcja\n -+
Blokowanie dostępu za pomocą HTTP Authentication+ (poprzez plik w projekcie)+ (wyklikujemy przy danej trybie dostępu lub divshot\n 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++
\n
\n\n
\n

Podsumowanie

\n\n

\n Wygląda to tak, jeśli chcemy wypchnąć nasz projekt w świat, aby sobie leżał bez większego nakładu pracy w\n jego utrzymanie, to GitHub Pages będzie lepszym rozwiązaniem.\n

\n\n

\n Jeśli jednak będziemy rozwijać ten projekt, albo jest on dla nas bardzo cenny z jakiegoś punktu widzenia\n i martwi nas jaka wersja jest obecnie na produkcji, a jaka na stagingu, to lepszym rozwiązaniem jest Divshot.\n

\n
\n\n
\n

Bibliografia

\n\n \n
2015-01-19 23:00:00 divshot-vs-github-jako-hosting-do-projektow-webowych ckbw97zyw0007i3umdszu2ola 2015-01-19 23:00:00 2015-01-19 23:00:00 @@ -3362,8 +3401,6 @@ ci5ygpy80003qi3um0h8m28vp WarsawJS Meetup #6 https://piecioshka.pl/blog/2015/02/ ci7l1rvk0003si3um5es784m9 WarsawJS Meetup #7 https://piecioshka.pl/blog/2015/03/23/warsawjs-meetup-7.html

\n #7 edycja WarsawJS już za nami.
\n Spotkaliśmy się w Państwomiasto o 18:30 aby podyskutować o JavaScript.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Talk #1: All that JS Tomasz Ducin

\n\n \n\n

\n Link do slajdów: slides.com/tkoomzaaskz/all-that-js\n

\n
\n\n\n

•

\n\n\n
\n

Talk #2: Czy 50 to dużo? Marcin Operacz

\n\n \n\n

\n Link do slajdów: github.com/moperacz/czy-50-to-duzo\n

\n
\n\n\n

•

\n\n\n
\n

Talk #3: AngularJS - Dyrektywy szyte na miarę Darek Kalbarczyk

\n\n \n\n

\n Link do slajdów: ng-poland.pl/warsawjs/\n

\n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2015-03-22 23:00:00 warsawjs-meetup-7 ckbw97zyw0007i3umdszu2ola 2015-03-22 23:00:00 2015-03-22 23:00:00 ci9afkcg00040i3um7owth2zk WarsawJS Meetup #8 https://piecioshka.pl/blog/2015/05/05/warsawjs-mettup-8.html

\n #8 edycja WarsawJS już za nami.
\n Spotkaliśmy się w Państwomiasto o 18:30 aby podyskutować o JavaScript.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Talk #1: User Friendly Website with WebSockets Adrian Woźniak

\n\n \n\n

\n Link do slajdów: github.com/Eraden/user-friendly-website-with-websockets\n

\n
\n\n\n

•

\n\n\n
\n

Talk #2: Experience Design Development. Jutro jest teraz Piotr Słowik

\n\n \n\n

\n Link do slajdów: wkrótce\n

\n
\n\n\n

•

\n\n\n
\n

Talk #3: React, Isomorphism and getting more functional [EN] Michał Kawalec

\n\n \n\n

\n Link do slajdów: github.com/mkawalec/warsawjs-presentation-template\n

\n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2015-05-04 22:00:00 warsawjs-meetup-8 ckbw97zyw0007i3umdszu2ola 2015-05-04 22:00:00 2015-05-04 22:00:00 cia30dds00041i3um9xgw0o1p WarsawJS Meetup #9 https://piecioshka.pl/blog/2015/05/25/warsawjs-meetup-9.html

\n #9 edycja WarsawJS już za nami.
\n Spotkaliśmy się w Państwomiasto o 18:30 aby podyskutować o JavaScript.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Talk #1: Understanding data binding [EN] Dominik Lubański

\n\n \n\n

\n Link do slajdów: slides.com/smalluban/understanding-data-binding\n

\n
\n\n\n

•

\n\n\n
\n

Talk #2: Responsive images the easy way [EN] Illarion Khapyorskiy

\n\n \n\n

\n Link do slajdów: illarionvk.github.io/warsawjs-responsive-assets/images/\n

\n
\n\n\n

•

\n\n\n
\n

Talk #3: What's up: JavaScript [EN] Sambath Kumar

\n\n \n\n

\n Link do slajdów: sambathl.github.io/warsawjs-presentation-template/\n

\n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2015-05-24 22:00:00 warsawjs-meetup-9 ckbw97zyw0007i3umdszu2ola 2015-05-24 22:00:00 2015-05-24 22:00:00 -ciall3gg00042i3umgxjef1xx Narzędzia usprawniające prace z Git https://piecioshka.pl/blog/2015/06/07/narzedzia-usprawniajace-prace-w-git.html

\n Dziś obejrzałem prezentację Michała Lewandowskiego\n z Jinkubatora pt: Git - krok po kroku.\n (Link do prelekcji znajdziecie poniżej).\n

\n\n

\n Zachęciło mnie to do napisania posta, aby przelać "na papier" słowa\n wypowiedziane.\n

\n\n

\n Michał podczas prezentacji, przedstawił jak działa Git, w jaki sposób\n radzi on sobie z tworzeniem rewizji, branchy czy tagów. Na początku\n prezentacji Michał zareklamował narzędzie tig z którego\n miał często korzystać podczas weryfikacji stanu repozytorium, jednak\n chyba ze względu na stres korzystał z sourceTree :smiley:
\n Bardzo mnie zaciekawiło to narzędzie (tig oczywiście,\n nie sourceTree), zrobiłem więc szybki research i od razu\n postanowiłem, że się z nim zaprzyjaźnię.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Tig

\n\n

\n Kiedyś, gdy w ferworze rozglądałem się nad jakimiś narzędziami z GUI\n do zarządzania repozytorium, dowiedziałem się o istnieniu\n tig-a. Wtedy jednak narzędzie nie zrobiło na mnie\n jakiegoś wrażenia. Chciałem czegoś więcej. Czegoś co będzie miało\n jakiś interfejs użytkownika prezentowany w nowym oknie. Wybrałem\n wtedy narzędzie, które uruchamia się po uruchomieniu polecenia\n gitk.\n

\n\n

\n Jest ono bardzo lekkie:\n

\n\n
$ du -sh /usr/bin/gitk\n 88K    /usr/bin/gitk
\n\n

\n Tym samym działa szybko - a jest to dla mnie priorytem w doborze softu\n do codziennej pracy. Ile czasu można stracić używając wolnego\n oprogramowania to na pewno każdy z nas już się o tym przekonał.\n

\n\n

\n Pozwolę sobie zamieścić zrzut ekranu z głównego okna kiedy to\n uruchamiam tig-a na jednym z moich projektów:\n

\n\n \n\n

Opcje

\n\n

\n tig to bardzo szybkie narzędzie konsolowe, dzięki któremu\n mamy dostęp do wielu rzeczy korzystając z prostych skrótów\n klawiaturowych.\n

\n\n

\n Najważniejszym skrótem jest oczywiście dostęp do pomocy. Wchodzimy\n do programu i ... h.
Wchodzimy tym samym do ekranu\n z całą listą skrótów dostępnych pod tigiem.\n

\n\n
m view-main         Show main view\nd view-diff         Show diff view\nl view-log          Show log view\nt view-tree         Show tree view\nf view-blob         Show blob view\nb view-blame        Show blame view\nr view-refs         Show refs view\ns, S view-status       Show status view\nc view-stage        Show stage view\ny view-stash        Show stash view\ng view-grep         Show grep view\np view-pager        Show pager view\nh view-help         Show help view
\n\n

\n Lista powyżej jest listą ekranów do których mamy dostęp za pomocą\n pojedynczych literek jako skrótów klawiaturowych - zwykłych literek.\n

\n\n

\n Nie będę się starał opisywać całego programu, bo to nie o to\n chodzi - zresztą dziś zacząłem się nim interesować, więc potrzebuje\n jeszcze jakieś kilka tygodni codziennej pracy, aby móc się szerzej\n wypowiedzieć :smiley:\n

\n\n

\n Nie mniej jednak zachęcam do korzystania, ponieważ dzięki\n tig zarządzamy repozytorium nie wpisując całych poleceń\n do konsoli tylko korzystamy z łatwych skrótów. Nie czuję tutaj, abym\n nie wiedział co w danej chwili uruchomił za mnie program, tak jak ma\n to miejsce w tak skomplikowanych programach jak SourceTree\n czy chociażby GitHub for Mac.\n

\n
\n\n
\n

git flow

\n\n

\n Kolejnym narzędziem pomocnym w pracy z Git-em jest\n git flow. Nie jest to narzędzie zainstalowane domyślnie\n razem z Git-em, trzeba je zainstalować out-of-the-box.
\n (Link znajdziecie poniżej).\n

\n\n

\n git flow wymusza na nas utrzymanie porządku w branchach\n i tagach, nie poprzez przełączanie się bezpośrednio pomiędzy\n branchami, tylko według zasad zdefiniowanych w tzw flow.\n

\n\n

\n Nie mogę powiedzieć, że mam jakieś doświadczenie z takim podejściem,\n więc przytoczę tylko to co Michał\n (@lewandm4) przekazał na\n szkoleniu.\n

\n\n

\n Podstawową funkcjonalności jest przełączanie się pomiędzy feature-ami\n stworzonymi w projekcie poprzez:\n

\n\n
$ git flow feature start 12345-support-sign-up
\n\n

\n Kiedy zakończymy nad nim pracę informujemy, że feature został\n zakończony:\n

\n\n
$ git flow feature finish 12345-support-sign-up
\n\n

\n Wtedy taki branch zostaje zmergowany do brancha develop.\n Jest to branch w których nie prowadzimy żadnych prac, jest to taki\n kolektor, agregat, funkcjonalności realizowanych w innych branchach\n typu feature/xxx.
Hint: branch master jest\n odzwierciedleniem aplikacji na produkcji, czyli takiej która jest\n u klienta.\n

\n\n

\n Ten rysunek przedstawia jak wygląda praca z git flow:\n

\n\n \n\n

\n Bardzo ciekawą opcją jest jeszcze tworzenie release-ów\n aplikacji.
Z pomocą przychodzi tutaj polecenie:\n

\n\n
$ git flow release start 1.0
\n\n

\n git flow przełącza nas na specjalnego brancha, w którym\n możemy jeszcze tworzyć rewizję (np. podmiana numerka wersji w jakim\n README). Jest to bardzo wygodne rozwiązanie, bo jeśli nic nie musimy\n robić to po prostu wykonujemy finish tego procesu:\n

\n\n
$ git flow release finish 1.0
\n\n

\n Ze swojej strony bardzo zachęcam do chociażby wypróbowania takiego\n podejścia do zarządzania branchami w swoim projekcie.\n

\n\n

\n Najlepiej jak by cały zespół projektowy wykorzystywał te narzędzie,\n zachowalibyśmy spójność w całym projekcie, co jest w większych\n projektach nie tylko wskazane, ale bez spójności (procedur) szybko\n zrobiłby się jakiś b... nieporządek :smiley:\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Link do wcześniej wspomnianych rzeczy:\n

\n\n \n
2015-06-06 22:00:00 narzedzia-usprawniajace-prace-z-git ckbw97zyw0007i3umdszu2ola 2015-06-06 22:00:00 2015-06-06 22:00:00 -ciapvf0g00043i3umfgin55qm ECMAScript 6. Dlaczego warto spróbować już dziś? https://piecioshka.pl/blog/2015/06/10/ecmascript-6-dlaczego-warto-sprobowac-juz-dzis.html

Kiedy powstało narzędzie 6to5 które miało być translatorem nowej składni JavaScript\nnie rzuciłem się na niego, ze względu na to, że potrzebowałem dowodu, że działa w 100%.

\n\n

Temat odszedł trochę w zapomnienie. Dałem sobie spokój z poznawaniem nowej składni - skoro jeszcze\nnie została ona zatwierdzona żadną pieczęcią.

\n\n

Nie chciałem uczyć się czegoś nowego co jest tylko draftem. Cenię sobie stabilne rozwiązania.
\nKilka tygodni temu temat wrócił ze zdwojoną siłą... dlaczego?

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Powrót z dalekiej podróży...

\n\n

... bo 6to5 zmienił nazwę na Babel.js.

\n\n

Dało mi to nadzieję, że może coś się zmieniło w kwestii stabilności transpilera. Wgłębiłem się w temat\n i okazało się, że Babel.js wspiera w 75% wg kangax\n standard który jest zapisany w dokumencie, który ma być zatwierdzony "na dniach".

\n\n

Wydaje mi się to na tyle sensowną liczbą, że warto już dziś zacząć pisać z użyciem nowej składni.\n 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.

\n\n

Tak przedstawia się lista wsparcia feature–ów z ES6 przez Babel.js:

\n\n \n\n

Jak widać na powyższym obrazku lista nowych rzeczy jest wielka. Nowa składnia pozwala nam na uniknięcie wielu haków,\n chociażby znany wszystkich niby-obiekt, niby-tablica arguments, w którym znajduje się lista argumentów\n przekazanych do funkcji. Jednak to nie jest zwykła tablica, bo nie można na niej uruchomić metod z konstruktora Array.\n Takie zadanie jest możliwe po zastosowaniu rzutowania:

\n\n
function foo() {\n    var args = Array.prototype.slice.call(arguments);\n    var operation = args.slice(0, 1);\n    var things = args.slice(1);\n    console.log(operation, things);\n    // ...\n}
\n\n

Czy faktycznie taka linijka musi być w każdym miejscu kiedy chcemy operować na tablicy argumentów?

\n\n

ECMAScript 6 ma w swoich zbiorze ulepszeń rest parameters. Dzięki temu kod może wyglądać tak:

\n\n
function foo(...args) {\n    var operation = args.slice(0, 1);\n    var things = args.slice(1);\n    console.log(operation, things);\n    // ...\n}
\n\n

Prawda, że ładniej? :smiley:

\n
\n\n
\n

Skąd czerpać wiedzę?

\n\n

\n Pewnego czasu kupiłem kilka domen, które kierują na jedną: ecmascript6.pl.
\n Gdzie stworzyłem agregat linków do wartościowych artykułów, tutoriali nt. ES6. Zachęcam do częstego odwiedzania.\n Codziennie powstają nowe artykuły, tutoriale i prezentacje z konferencji.\n

\n\n

\n Chyba najbardziej zaangażowanym developerem jest Dr. Axel Rauschmayer.\n Na swoim blogu (www.2ality.com) stworzył już kilka bardzo dobrze\n opisanych artykułów dotyczących ECMAScript 6 (więcej w pkt 6. na stronie ecmascript6.pl.\n

\n\n

\n Ci z Was którzy lubią dużo czytać, na pewno zostaną pochłonięci przez książkę napisaną przez Nicholasa C. Zakasa\n pt. Understanding ECMAScript 6. Jest ona dostępna pod adresem: https://leanpub.com/understandinges6/read/.\n Jestem tym szczęśliwcem, który posiada wersję papierkową.\n

\n
\n\n
\n

Dlaczego więc warto?

\n\n
\n Komitet Ecma TC39 rozwija przed nami dywan.
\n Dywan po którym Ty i ja wkrótce będziemy stąpali.
\n Na dziś dzień jeszcze ten dywan nie został rozwinięty do końca,
\n dlatego gdy chcesz poczuć jak to jest po nim chodzić
\n musisz wykorzystać linoleum, które jest tylko skromnym zamiennikiem.

\n Linoleum w tej historii jest transpiler np. Babel.js bądź Traceur.
\n Dywanem jest ECMAScript 6\n Piotr Kowalski. 2015-06-10\n
\n
2015-06-09 22:00:00 ecmascript-6-dlaczego-warto-sprobowac-juz-dzis ckbw97zyw0007i3umdszu2ola 2015-06-09 22:00:00 2015-06-09 22:00:00 cke8hx2yw0268i3um5i8ed7sv Napisałem książkę! Kilka słów o „TypeScript na poważnie” https://typeofweb.com/napisalem-ksiazke-kilka-slow-o-typescript-na-powaznie/#utm_source=rss&utm_medium=rss&utm_campaign=napisalem-ksiazke-kilka-slow-o-typescript-na-powaznie

Type of Web - Blog o programowaniu. 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…

\n

Książka mojego autorstwa „TypeScript na poważnie” została ukończona i jest możliwość zakupu po niższej cenie w przedsprzedaży. Kilka osób prosiło mnie o opisanie tego, jak proces twórczy i wydawniczy wygląda od podszewki – wszak zdecydowałem się self-publishing! Zapraszam więc do serii wpisów 🙂 Książkę „TypeScript na poważnie” w przedsprzedaży w niższej …

\n

Artykuł Napisałem książkę! Kilka słów o „TypeScript na poważnie” pochodzi z serwisu Type of Web.

2020-08-24 12:27:41 napisalem-ksiazke-kilka-slow-o-typescript-na-powaznie ckiopy3xs0006i3umgmnv8l52 2020-08-24 12:27:41 2020-08-24 12:27:41 ckfpheff4027si3um6ecbd4hu Self-publishing: Jak napisałem książkę w markdownie? https://typeofweb.com/self-publishing-jak-napisalem-ksiazke-w-markdownie/#utm_source=rss&utm_medium=rss&utm_campaign=self-publishing-jak-napisalem-ksiazke-w-markdownie

Type of Web - Blog o programowaniu. 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…

\n

Self-publishing: Jak napisałem książkę w markdownie? Wciąż dopytujecie się o proces self-publishing mojej książki „TypeScript na poważnie” od strony technicznej. W czym ją pisałem? Jak tworzyłem e-booki? Dlaczego zdecydowałem się na markdown? Jakich narzędzi używałem? Śpieszę odpowiedzieć – to wszystko w tym wpisie 🙂 Przedsprzedaż książki zakończyła się ogromnym sukcesem! Teraz …

\n

Artykuł Self-publishing: Jak napisałem książkę w markdownie? pochodzi z serwisu Type of Web.

2020-09-30 14:24:58 self-publishing-jak-napisalem-ksiazke-w-markdownie ckiopy3xs0006i3umgmnv8l52 2020-09-30 14:24:58 2020-09-30 14:24:58 ckiopy3xs02bji3umf5yy89zp Conditional types – TypeScript – typy warunkowe https://typeofweb.com/conditional-types-typescript-typy-warunkowe/#utm_source=rss&utm_medium=rss&utm_campaign=conditional-types-typescript-typy-warunkowe

Type of Web - Blog o programowaniu. 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…

\n

Typy warunkowe (conditional types) to prawdopodobnie najtrudniejsza część TypeScripta. Jednocześnie, jak to zwykle bywa, jest to element najpotężniejszy i dający ogromne możliwości tworzenia rozbudowanych i zaawansowanych typów, dzięki którym Twoje aplikacje staną się jeszcze bardziej bezpieczne. Tekst jest fragmentem książki „TypeScript na poważnie” mojego autorstwa. Jeśli artykuł Ci się podoba, to …

\n

Artykuł Conditional types – TypeScript – typy warunkowe pochodzi z serwisu Type of Web.

2020-12-14 15:35:34 conditional-types-typescript-typy-warunkowe ckiopy3xs0006i3umgmnv8l52 2020-12-14 15:35:34 2020-12-14 15:35:34 @@ -3374,6 +3411,11 @@ cibflccg00047i3um078p5bgz Jak założyć bloga korzystając z Jekyll? https://pi cibh0s7400048i3um0vpm3450 IT Manager Meetup #1 https://piecioshka.pl/blog/2015/06/29/it-manager-meetup-1.html

\n W stolicy powstała nowa inicjatywa zrzeszająca managerów z branży IT.\n Zaplanowałem sobie, że chcę zobaczyć na jakich zasadach będzie polegał\n ten nowy cykl spotkań.\n

\n\n

\n Na ostatnie Warsaw Meta Meetup, spotkaniu dla organizatorów meetup-ów\n w Warszawie, poznałem się z Dominiką Gmerek, która to zaprosiła mnie na nowy cykl spotkań.\n Jestem głodny takich nowych wyzwań, także nie mogłem odpuścić sobie tej przyjemności i odpuścić.\n

\n\n

\n Więcej o spotkaniu można dowiedzieć się na profilu wydarzenia:\n facebook.com/events/1459914867639803/\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Talk #1: Developer heaven

\n\n 
Prelegent: Maciej Cielecki (CTO w 10Clouds). Od 6 lat jest prezesem.
\n\n

\n Gdybyśmy nie chcieli wyprzedzić rynku trudno byłoby nam się przebić.\n Rekrutacja jest dosyć zaawansowana.\n

\n\n

Dwa kierunki:

\n\n
    \n
  • albo piekło
    • \n
  • albo niebo
    • \n
\n\n

Jaka jest rożnica między firmami produktowymi a usługowymi?

\n\n

Usługowe - programują dla innych.

\n\n

Plusy

\n\n
    \n
  • ludzie mogą skakać po projektach (zyskują w zmienianiu siebie)
    • \n
  • więcej człowiek może się nauczyć, kiedy jest rotacja pracownika\n między projektami
    • \n
  • w usługach inaczej się buduje strukturę
    • \n
\n\n

Minusy

\n\n
    \n
  • trudne jest poczucie celu np. Google, Uber
    • \n
\n\n

\n Super ważne w kontekście satysfakcji pracy - jak dobrą ma dokumentację i design.
\n Cały team design-owy i ux-owy który robi dobrą grafikę i makiety są one konsultowane technicznie.
\n Pozwala to programistom w projektowaniu architektury aplikacji.\n

\n\n

Agile is good, good agile is better.

\n\n

\n Dużo osób pracuje w Agile, ale nie wszyscy znają tą metodologię dokładnie.\n Codziennie ludzie spotykają na stand-up-ach i myślą, że to jest cały Agile :smiley:\n

\n\n

Dla programistów jest super ważne, aby nie byli managerami!

\n\n

\n

Zasada
\n Sprint jest nie do dotknięcia!\n

\n\n

Jeśli dobrze się planuje, to nie można mieszać zadaniami w sprint-cie.

\n\n

Tworzenie dużej dokumentacji na początek (bardzo dokładna):

\n\n
    \n
  • rozbijana na tickety w Jira
    • \n
  • wszystko wiadomo
    • \n
  • ktoś przemyślał całość
    • \n
  • w iteracjach uczestniczą też Ci, którzy robili dokumentację
    • \n
  • rzeczy się zmieniają - design jest aktualizowany na bieżąco
    • \n
\n\n

Anegdota o wychowaniu 8-latka

\n\n

\n Kiedyś pewien manager miał problem z wychowaniem swojego syna.\n Nie potrafił on przestrzegać pewnych słownych ustaleń.\n Tenże manager był "certyfikowanym scrum masterem" więc wiedział z czym się je "Scrum task board".\n Postanowił więc wykorzystać tą wiedzę w życiu codziennym.\n

\n\n

\n Stworzył tabelę na kartce papieru, gdzie zapisał ile czasu w ciągu dnia jego syna będzie przeznaczał\n na każde zadanie (zabawę, naukę). Tym samym kiedy zapisał, że w ciągu całego dnia\n tylko 1h na XBox, inna na coś innego, a ostatnia na naukę, to dziecko widząc taki plan\n dostosowywało się do niego.\n

\n\n
\n\n

\n Maciej polecił do przeczytania artykuł w serwisie Techcrunch: "Perks don't work".
\n Jest on dostępy pod adresem: techcrunch.com/2014/12/11/perks-dont-work/.\n

\n\n

\n W Dolinie Krzemowej developerzy nie mają satysfakcji z pracy, bo dużo\n zarabiają. Pracodawcy popełniają ten błąd, że motywują swoich\n pracowników tylko wyższymi zarobkami. Jest to złe podeście, bo przy\n pewnym stopniu zarobków ich wzrost o kilka procent nie cieszy tam\n mocno jak na początku swojej kariery.\n

\n\n

Emanowanie kulturą

\n\n

\n W 10Clouds zostało powołane nowe stanowisko HR Marketing Manager.\n Osoba na tym stanowisku zajmuje się przedstawianiem priorytetów firmowych\n oraz zasad panujących w relacjach między pracownikami.\n

\n\n \n "Procesy rekrutacyjne kończą się zawsze "ściągnięciem" ludzi którzy pasują\n do kultury panującej w firmie."\n \n\n

Saying goodbye

\n\n

Co zrobić kiedy trzeba zwolnić pracownika?

\n\n

\n Warto zwalniać ludzi którzy nie pasują dla wzrostu (rozwoju) firmy.\n

\n\n

Jak zwalniać ludzi?

\n\n
    \n
  • nigdy nie zwalniać ludzi pochopnie
    • \n
  • dać na początku "zółtą kartę"
    • \n
  • następnie dać sobie okres "żebyśmy spróbowali się dograć"
    • \n
\n\n

Zwalnianie osób niepasujących do zespołu wywołuje bezpieczeństwo u innych.

\n\n

Zarobki w firmie

\n\n

\n Maciek przybliżył historię pewnej firmy, która ma publiczny spritesheet z pensjami.
\n Istnieje nawet jawny algorytm wyliczania pensji.\n

\n\n

Headhunters

\n\n
    \n
  • nie emanują kulturą pracy w danej firmie
    • \n
  • lepiej mieć HR wewnętrzny
    • \n
\n\n

Droga developer → manager - Pros & Cons

\n\n

Plusy

\n\n
    \n
  • zrozumienie mentalności koderów (miejsce pracy)
    • \n
  • flow\n
      \n
    • spędzić trochę czasu aby wejść w stan nirvany
      • \n
    • koderzy lubią wyjść z takiego flow - nie są aspołeczni
      • \n
    • tylko osoby które sa wstanie wejść w takim flow są dobrymi koderami
      • \n
    • można zepsuć ten stan przychodząc i zaczepiając, np. robiąc spotkanie
      • \n
    \n
    • \n
  • flexible time
    • \n
\n\n

Minusy

\n\n
    \n
  • brak!
    • \n
\n\n

\n Kwintesencja programowania:\n

\n\n
    \n
  • zone: strefa mentalnego komfortu
    • \n
  • flow: stan euforii
    • \n
\n\n

Więcej na temat flow na stronie\n pinczek.pl/uczucie-przeplywu-czyli-jak-wejsc-w-flow/\n

\n\n
\n "Praca zdalna" nie oznacza pracy w domu!\n Maciej Cielecki\n
\n\n

\n Maciej poleca książkę 37signals pt. "Remote", która to omawia sposoby pracy zdalnej.
\n Więcej o książce na stronie domowej: 37signals.com/remote/\n

\n\n
\n\n

\n Warto wspomnieć, że nie powinno się wymagać asertywności od programistów.
\n Project Manager-owie, przekonają programistę do zobligowania się do zrobienia czegoś na jutro.
\n Developer, zdaje sobie sprawę, że jest to nie realne, ale się "postara".
\n Efekt jest taki, że developer nie skończy i będzie mu głupio, bo "obiecał",\n no i PM będzie miał problem, bo myślał, że zadanie zostało zrealizowane.\n

\n\n

Istnieją takie firmy gdzie jest bardzo dużo procedur:

\n\n
    \n
  • [MINUS] zamiast pracować to wypełnia się procedury
    • \n
  • [MINUS] to jest rozpraszające
    • \n
  • [MINUS] nie daje satysfakcji pracy ludziom
    • \n
\n\n

\n Lepiej jest nie tworzyć takich procedur, a już jakiś\n soft, który może pomóc w rozwiązaniu problemów!\n

\n\n

Kultura nie procedury!

\n\n
\n
Co lubia programiści?
\n
\n Lubią intelektualne wyzwania i to, żeby było one ciekawe.\n Na przykład zaczynają budować mega skomplikowany kod. Trzeba ich wtedy nauczyć, w którym miejscu stawiać\n granice, aby ten kod był możliwy do utrzymania na długi czas.\n
\n
\n\n

Jak można dostarczyć takich "intelektualnych wyzwań"?

\n\n
    \n
  • organizowanie hackday (aby użyć nowej technologii)
    • \n
  • jesteś w stanie raz na kilka miesięcy - zrobić "intelektualny challenge"
    • \n
  • czas, za która firma płaci
    • \n
  • okiem pracodawcy: zespół bada nowe technologie, które można użyć w nowych projektach
    • \n
  • trzeba przekonać prezesa aby zaakceptował budżet, bo dla firmy jednym plusem jest "research\n technologiczny"\n
    • \n
\n\n

Człowiek z "niewidzialny pistoletem"

\n\n

Ta osoba decyduje o wszystkich rzeczach. Ważna osoba (ten który ma władze) np. CTO

\n\n
    \n
  • \n jeśli ta osoba nie rozumie, to nic się nie stanie nowego w\n organizacji\n
    • \n
  • \n kultura developerska powinna być dostępna (jasna) do tego\n człowieka\n
    • \n
\n\n

\n "Niewidzialny pistolet" to metafora tego, że gdy na spotkaniu pojawi\n się pistolet to developer może czuć, że gdy powie coś złego się\n zwolniony.\n

\n\n
\n\n\n

•

\n\n\n
\n

Talk #2: Autostrada do nieba

\n\n 
Marek Grochala (CEO w Evojam) Mała firma - 14 osób
\n\n

Jak my robimy proces rekrutacji w Evojam?

\n\n
    \n
  • jak u nas działa
    • \n
  • to nie jest jedyny słuszny proces
    • \n
\n\n

Bardzo subiektywny proces rekrutacji.

\n\n

Plan

\n\n
    \n
  • po co szukamy nowego człowieka?
    • \n
  • my z definicji nie chcemy być dużą firmą, chcemy rosnąć wolniej ale dokładniej
    • \n
  • 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
    • \n
\n\n

\n Szukamy osoby która będzie pracowała dla zespołu, która dobrze się komunikowała.
\n Czasy samotnych wilków już minęły.\n

\n\n
\n Większość problemów wynika z problemów z komunikacją.\n Marek Grochala\n
\n\n

\n Nie zatrudniamy znajomych, rodziny, bo rodzi problemy w przypadku czarnych scenariuszy.\n Dylematy zwalniania rodziny i przyjaciół - wiemy z doświadczenia.\n

\n\n

Jak szukać? Byś sexi!

\n\n

\n Oszczędzić czas na spotkaniu? Napisać FAQ na stronie organizacji.
\n W procesie rekrutacyjnym chodzi o transparentność (jasne zasady)!
\n Podajemy przedziały zarobków na naszej stronie.\n

\n\n

Jakie są warunki pracy:

\n\n
    \n
  • warunki płacowe
    • \n
  • wymyśliła to osoba (programista), a nie bullshitgenerator.com/
    • \n
  • jak wygląda proces rekrutacji
    • \n
\n\n

Jak rekrutować?

\n\n
\n Pracuj.pl jest zdecydowanie większy od reszty.\n Marek Grochala\n
\n\n

\n Często są na takie oferty zgłaszają się headhunterzy. Rzadko jednak zaproponują dobrych kandydatów.\n

\n\n

Alternatywne metody:

\n\n
    \n
  • prezentacje na meetup-ach
    • \n
  • to nie jest szybkie rozwiązanie, ale działa
    • \n
  • ewangelizacja studentów na uczelni
    • \n
\n\n

5 kroków autostrady

\n\n
    \n
  1. \n Curriculum Vitae\n
      \n
    • Czy osoba w ogóle się nadaje na programowaniu?
      • \n
    • Kogo zna ta osoba? Jak się z nią pracuje?
      • \n
    • Gdzie pracował?
      • \n
    • Jak często zmieniał pracę? Warto czasem szybko zmieniać pracę.
      • \n
    \n
    2. \n
  2. Praca domowa\n
      \n
    • \n Bardzo ogólna praca domowa - od developera zależy jak\n zdefiniuje dziedzinę problemu.\n
      • \n
    • Specjalnie nie jest stricte zdefiniowane.
      • \n
    \n
    3. \n
  3. Spotkanie\n
      \n
    • Wspólnicy + człowiek z zespołu.
      • \n
    • Liberum Veto - jeśli jedna osoba powie NIE, to rezygnujemy z kandydata.
      • \n
    • Bardzo dużo pytań miękkich.
      • \n
    \n
    4. \n
  4. Oczekiwania finansowe\n
      \n
    • ..ale na końcu to my składamy ofertę na naszych warunkach finansowych!
      • \n
    • Nie patrzysz na doświadczenie.
      • \n
    • Jeśli oferta różni się od oczekiwań to tłumaczę zostaje wytłumaczone z jakiego powodu.
      • \n
    • Logiczna oferta - z czego wynika oferta.
      • \n
    • Główny cel to rozwój pracownika!
      • \n
    \n
    5. \n
  5. Dream team\n
      \n
    • Dobór systemu jaki chcesz, ma dać się zainstalować soft który jest potrzebny.
      • \n
    • Osoba musi zacząć tworzyć rewizje - kod musi przejść przez 2 osoby.
      • \n
    • Klientom sprzedajemy jakość - pierwsze rewizje w bólach
      • \n
    • Jak najszybciej dajemy dostęp i jak najszybciej kodowanie
      • \n
    \n
    6. \n
\n\n
\n\n\n

•

\n\n\n
\n

Talk #3: Szanuj Admina swego, bo możesz mieć gorszego

\n\n 
Maciek Broniarz (Kierownik Działu Sieci Komputerowych UW) 17 lat doświadczenia. W swojej historii zrobił dużo audytów bezpieczeństwa.
\n\n

Kim jest admin? Gość odpowiada za infrastrukturę

\n\n

\n DevOps - nowe stanowisko. Jest to developer która pozbywa się cech\n administratora.\n

\n\n

Co robi admin? Robi wszystko!

\n\n

\n Pilnuje to co udostępnia firma na świat, aby działało i w należyty sposób.\n Często jest tak, że admin jest jedyną osobą w firmie która wie jak coś działa,\n np. przy wdrożeniu uczy się całej aplikacji.\n

\n\n

Rekrutacja

\n\n

\n Gdy w pracy nastąpiła awaria to jest ona mocno stresująca.
\n Dobieramy ludzi w dosyć pedantyczny sposób: bezgraniczne zaufanie.
\n Kandydaci wklejają certyfikaty, ale nie potrafią podstaw.
\n

\n\n
TEST
\n\n

\n Telefon w dziwnej porze, aby zobaczyć jak sobie radzi w nie komfortowych\n warunkach. Cel: umieć odpowiedzieć na pytanie: "na ile ten gościu\n jest komunikatywny w rozmowie ze mną?"\n

\n\n

\n Najbardziej okrutne pytanie na rozmowie o pracę: jakie są Twoje\n najmocniejsze strony?\n

\n\n

Najważniejsze 3 rzeczy...

\n\n
    \n
  • umiejętności (merytoryka) - weryfikacja poprzez kwestionariusz, a następnie trzeba wypełnić test online,\n który weryfikuje wypełniony wcześniej kwestionariusz
    • \n
  • komunikacja - potrzebujemy gości, którzy umieją mówić różne rzeczy, przeforsują swoje rzeczy
    • \n
  • odporny na stres - ta umiejętność jest krytyczna, administratorzy pracują w trudnych warunkach,\n bo klient dzwoni zdenerwowany
    • \n
\n\n

Test kandydata pod kątem reakcji na "stressful situation"

\n\n Rozmowa rekrutacyjna. Podczas rozmowy z kandydatem, otwierają się delikatnie drzwi i cichym głosem osoba z zza\n drzwi\n mówi że nie zrobiła czegoś przed deadline.
\n Ty jako szef odpowiadasz w sposób stanowczy i wulgarny.
\n Cel jest pogląd jak kandydat radzi sobie na sytuację stresogenną.\n\n

"Całe życia z wariatami"

\n\n

\n Najlepiej jak wszyscy admini się rozumieją.\n Admin nie rozumie, że są jakieś deadline w projekcie.\n Programista - to gość którzy pisze kod - i to jest fajne.\n Admin - to jest osoba która np. naprawi drukarkę, ogólnie taka co wszystko zrobi.\n Super admin to taki który nie ma nic do roboty, bo robi swoją robotę i jest fenomenalny.\n

\n\n

Budowanie relacji z użytkownikiem

\n\n

Jak użytkownik jest miły i ma dobrą relacji z adminem to lepiej się dogadać co nie działa.

\n\n

Wymagania życiowe

\n\n

\n Relacja zbudowana na opanowaniu i szacunku.\n Bardzo łatwo jest pozwolić adminowi, aby zadłużył firmę i zakupił mnóstwo zabawek.\n Admin nie ma czasu wydawać pensji. Admin potrzebuje gadgetów.\n Jeśli administratorzy chcą mieć ileś rzeczy, aby lepiej im się pracowało to warto zastanowić się nad listą zakupów.\n Adminom bardziej przeszkadzają rzeczy których nie ułatwiają pracy, a nie, że pensja jest za mała.\n Adminom trzeba rotować zadania.\n Kupić mu dodatkowy serwer, aby mógł testować nowe rozwiązania.\n

\n\n

\n Awans i wynagrodzenie: nie ma sensownej ścieżki.
\n Adminem → Architekt → Manager innego smaku.\n Cały czas trzeba się troszczyć o admina, bo to co on robi jest bardzo ważne dla firmy.\n

\n\n
\n Łatwiej jest zrekrutować programistę niż wymienić administratora.\n Maciej Broniarz\n
\n\n

Solo czy zespołowo?

\n\n

\n Lepiej jest mieć 2+ adminów.\n Dużo komfortowa sytuacja, kiedy możemy się stymulować naukowo.\n

\n\n

Team building, czyli narty w Aspen

\n\n

\n Integracja zespołu jest krytyczna.\n Testy integracyjne - ciekawe rozwiązanie.\n

\n\n

\n Generujemy symulowanego fail-a w trudnej porze np. 6:15.\n Jeśli są w stanie coś takiego rozwiązać to są stanie dobrze współpracować.\n Nie można robić takich testów, jeśli nie ma się kompetencji :smiley:\n

\n\n

Imprezy firmowe

\n\n

Fajnie pracuje się z ludźmi z którymi lubi się przebywać!

\n\n

Jak zwalniać administratora

\n\n

Żadna polityka nie jest w stanie zabezpieczyć danych. Oto lista kilku kroków:

\n\n
    \n
  1. Odcinamy dostęp administratorowi.
    2. \n
  2. Zasada ograniczonego dostępu.
    3. \n
  3. Pilnować do czego taka osoba ma dostęp.
    4. \n
  4. Najlepiej rozstawać się na miękko.
    5. \n
  5. Gdy drastycznie, to podziękować słowami "już nie pracuj" i wyprosić z biura.
    6. \n
\n\n
\n Admina bierze się na lata.\n Maciej Broniarz\n
\n\n

Idealna praca admina

\n\n

\n Jasne określone warunki na system. Niech przygotuje budżet i hardware.
\n Jeśli administrator czuje, że nikt się nie wtrąca w prace to jest to praca marzeń.\n

\n\n
\n Najgorsze jak developer zarządza administratorami.
\n Słabe jest też kiedy administrator zarządza developerami.\n Maciej Broniarz\n
\n\n

\n Firma zarządzana przez adminów nie będzie przynosiła zamierzonych\n efektów.
\n\n Admina ma wiele sytuacji, kiedy musi poprawić coś\n zamiast developera, bo tak było prościej.\n

\n\n

\n Jak robimy się starsi to nie zawsze jesteśmy mądrzejsi.
\n Jak znaleźć admina to tylko po znajomościach.
\n Jest sporo ludzi z kompetencjami, ale przejada się im praca w korporacji.\n

\n\n
\n Prościej jest nauczyć kogoś z politechniki miękkich umiejętności,
\n niż mistrza miękkimi kompetencji nauczyć bycia administratorem.\n Maciej Broniarz\n
\n\n

Admini chodzą do firmy, gdzie robi się fajne rzeczy, a nie tam gdzie jest kasa.

\n\n

\n Ciężko jest znaleźć dobrego admina.\n Jako pracodawca warto pokazać co firma robi ciekawego w pracy.\n Wszystkie wydarzenia np. spotkania to jest fajny kanał komunikacyjny na rekrutacje admina.\n

\n\n
\n\n
\n

Podsumowanie

\n\n

\n Jestem bardzo pozytywnie zaskoczony jak interesujące może być spotkanie z ludźmi którzy na co dzień,\n mają podobne obowiązki co ja. Świetnie, że powstał taki event, gdzie będzie można podzielić się swoją wiedzą\n na ten temat, oraz wysłuchać co inni mają do powiedzenia w kwestii zarządzania ludźmi oraz firmą.\n

\n\n

\n W imieniu organizatorów IT Manager Meetup zapraszam serdecznie na kolejne spotkanie\n na którym to ja będę chciał opowiedzieć z jakimi problemami zetknąłem się na początku swojej\n kariery managerskiej.\n

\n
2015-06-28 22:00:00 it-manager-meetup-1 ckbw97zyw0007i3umdszu2ola 2015-06-28 22:00:00 2015-06-28 22:00:00 cic3vtts00049i3uma6wh2g2x Historia loga języka JavaScript https://piecioshka.pl/blog/2015/07/15/historia-loga-jezyka-javascript.html

\n Kiedy powstał JavaScript nie miał swojego loga.\n Wszystkie języki kiedy powstają mają swoje oficjalne loga.\n Mają ponieważ za każdym z języków stoi jakiś podmiot odpowiedzialny.\n

\n\n

\n Za JavaScript nikt nie jest odpowiedzialny.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n

\n Dlatego też, ten najpopularniejszy język dzisiejszych czasów (według serwisu\n githut.info/) nie posiada oficjalnego loga.\n

\n\n

\n JavaScript jest implementowany przez przeglądarki na swój sposób.\n Dlatego też nie ma jednolitego przewodnika do tego języka. Istnieją manuale napisane przez\n firmy, które tworzą przeglądarki, np.\n

\n\n\n\n

\n Pośrednio nad rozwojem JavaScript-u czuwa zespół TC39,\n który rozwija ECMAScript czyli standard, który jest używany w JavaScript, JScript oraz ActionScript.
\n Jednak oni nie są odpowiedzialni za implementację samego JavaScript-u.\n

\n\n
\n

"Oficjalne" logo JS

\n\n

\n 4-ego października 2011 roku podczas konferencji JSConf EU 2011\n Chris Williams wystąpił na scenie (youtube.com/watch?v=17rkSdkc5TI)\n i w swojej prezentacji, na temat negatywnych emocji, pokazał wszystkim swoją propozycję loga JS-a.\n

\n\n

\n Chris stworzył repozytorium na GitHub-ie (github.com/voodootikigod/logo.js),\n gdzie można zobaczyć jego propozycję:\n

\n\n
\n JavaScript logo\n\n
\n Logo JS-a zaproponowane przez Chrisa Willisa podczas konferencji\n JSConf EU 2011.\n
\n
\n\n

\n W tym projekcie znajdują się loga innych organizacji (konferencji, meetup-ów) JavaScript-owych.\n

\n
\n\n
\n

Dlaczego JS a nie JavaScript?

\n\n

\n Znak handlowy JavaScript jest zastrzeżony przez firmę ORACLE AMERICA, INC..\n

\n\n

\n Dla pewności można zajrzeć tutaj:
\n tsdr.uspto.gov/#caseNumber=75026640&caseType=SERIAL_NO&searchType=statusSearch\n

\n\n

Prawa do marki

\n\n

\n Kiedy to w 1995 roku Sun Microsystems stworzył język o nazwie Java,\n zastrzegł sobie od razu trademark-ów. Wśród nich znalazły się:\n

\n\n
    \n
  • JAVA
    • \n
  • JAVA COMMUNITY PROCESS
    • \n
  • JAVA COMPATIBLE
    • \n
  • JAVAONE
    • \n
  • JAVASCRIPT
    • \n
  • JAVABEANS
    • \n
  • JAVAFX
    • \n
\n\n

\n Kilka lat temu (w 2010 roku) Sun Microsystems zostało przejęte przez firmę Oracle.\n Dlatego też według prawa, to tylko ta firma może tylko stworzyć oficjalne logo dla JavaScriptu.\n Niestety, ale to nie Oracle zajmuje się rozwojem tego języka, więc prawdopodobnie nigdy nie doczekamy się oficjalnego loga.\n

\n\n

Chciałbym użyć logo JavaScriptu. Co robić?

\n\n

\n W dzisiejszych czasach, developerzy utożsamiają sobie skrót JS tylko\n z JavaScriptem, więc korzystanie z loga do JS-a jest właściwym\n podejściem.\n

\n\n

\n Chris podkreślił, że jeśli ktoś chce używać jego propozycji to on nie widzi żadnych przeciwwskazań do tego,\n aby używać go wszędzie tam gdzie się chce. Logo jest udostępniane na licencji WTFPL.\n

\n
\n\n
\n

Logo ECMAScript 6

\n\n

\n ECMAScript jest standardem stworzonym przez organizację Ecma International.\n Organizacja posiada swoje logo na swojej stronie domowej: ecma-international.org/.\n

\n\n

\n Jednak standardy raczej rzadko posiadają swoje loga,\n dlatego też i ECMAScript 6 nie posiada swojego loga.\n

\n\n

\n W takim razie jak można oddać światu zaufanie dla ES6?\n

\n\n

Siła społeczności

\n\n

\n Wszystko za sprawą projektu github.com/gilbarbara/logos\n autorstwa Gil Barbara. Zebrał on w jednym miejscu loga do wszystkich\n znanych projektów, języków, technologii.\n

\n\n

\n Dla wielu będzie to pierwsze miejsce w poszukiwaniu loga wybranej technologii w sieci.
\n Dla mnie na pewno.\n

\n\n
\n \n\n
\n Propozycja loga ECMAScript 6.\n
\n
\n
2015-07-14 22:00:00 historia-loga-jezyka-javascript ckbw97zyw0007i3umdszu2ola 2015-07-14 22:00:00 2015-07-14 22:00:00 cicqqvgg0004ai3umcshz6nuz AngularJS Warsaw #2 https://piecioshka.pl/blog/2015/07/31/angularjs-warsaw-2.html

\n Organizatorami spotkania są Arek Kalbarczyk i Darek Kalbarczyk, których książka\n AngularJS. Pierwsze kroki od 6 tygodni\n jest na 1 miejscu helion.pl.\n

\n\n

\n Poniżej załączam swoje notatki robione podczas prelekcji.\n Zastrzegam sobie, że w notatkach nie mam zawartych wszystkich rzeczy,\n które zostały opowiedziane przez prelegentów.\n

\n\n
\n \n\n
\n AngularJS Warsaw\n
\n
\n\n
\n

Talk #1: AngularJS UI Router [PL] Arek Kalbarczyk

\n\n

Czym jest SPA?

\n\n
    \n
  • Dzięki SPA wzrasta responsywność.
    • \n
  • Mamy wrażenie zbliżone do aplikacji desktopowej.
    • \n
\n\n

Routing

\n\n

\n Routing służy do przeładowywania widoków i szablonów.
\n Ułatwia modularyzację.
\n Dzięki routingowi można połączyć szablon i kontroler, nie trzeba wiązać dyrektywy.\n

\n\n

ngRoute

\n\n W wersji AngularJS 1.2 został wyodrębniony.\n\n

\n To on łączy URL i szablony, czyli aplikacja wie, że ma przeładowywać szablony.\n

\n\n

\n To on wie, do jakiejś ścieżki podłączyć dany moduł oraz wspiera,\n co się ma dziać kiedy, ścieżka nie jest odnaleziona.\n

\n\n

UI Router - zewnętrzna biblioteka do AngularJS

\n\n

\n Istotna zmiana względem ngRoute, który wiąże ze sobą ścieżki.\n W UI Router Wszystkie ścieżki są połączone poprzez stany.\n Jest to lepsze, bo można zmienić URLa.\n

\n\n

\n Można zrobić incepcję :smiley:\n

\n\n

\n W ngRoute nie mamy możliwości dziedziczenia szablonów.\n w UI Router można zrobić stany dziedziczące.\n

\n\n

\n Możemy na jednej stronie załączyć kilka niezależnych routingów.\n

\n\n

\n Co trzeba zrobić jeśli chcemy skorzystać z UI Router?\n

\n\n
    \n
  • trzeba wstrzyknąć moduł za pomocą dependency injection
    • \n
  • konfiguracja - za pomocą serwisu - providera w fazie konfiguracji ładowania
    • \n
  • nie musimy konfigurować w jednym pliku
    • \n
  • jak przełączać się pomiędzy stanami - za pomocą ui-sref
    • \n
  • ui-view wyświetla nasz szablony - może on być w dowolnym fragmencie body
    • \n
\n\n

Zagnieżdżony routing

\n\n
    \n
  • do szablonu można załadować kolejny widok - czyli jest to zagnieżdżenie
    • \n
  • nie warto przesadzać i robić 3 "podstanów"
    • \n
  • 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
    • \n
\n\n

Multi routing

\n\n
    \n
  • definiujemy tyle dyrektyw ile chcemy
    • \n
  • przypisujemy wartości: view-1, view-2, ...
    • \n
  • konfiguracja!\n
      \n
    • stan rodzica
      • \n
    • przekazujemy informację dot. zagnieżdżonych stanów (nazwa rodzica stanów)
      • \n
    \n
    • \n
\n\n

Struktura aplikacji

\n\n
.\n├── app\n│   ├── app.js\n│   └── modules\n│       ├── home\n│       │   ├── directives\n│       │   ├── homeController.js\n│       │   ├── homeView.html\n│       │   └── services\n│       ├── module2\n│       └── modules3\n├── assets\n│   ├── images\n│   └── styles\n├── index.html\n└── scripts
\n\n

UI Router SEO

\n\n
    \n
  • 23 maj 2014 roku - Googlebot parsuje JavaScript!
    • \n
  • czyli wchodząc na naszą stronę, jest w stanie zrozumieć naszą stronę i ją zindeksować
    • \n
  • robots.txt może blokować crawlery
    • \n
  • jeżeli chcemy osiągnąć prawdziwe wyniki to trzeba odwołać się do stałych metod
    • \n
  • przed hash znajduje się wykrzyknik - escaped fragments
    • \n
  • biblioteka prerender.io - pomaga nam przerenderować template po stronie serwera
    • \n
  • ciekawe udogodnienie ale nie rozwiązanie ost
    • \n
\n\n

Warto wiedzieć

\n\n
    \n
  • htmlMode na true
    • \n
  • base href na /
    • \n
  • obsługa historii:\n
      \n
    • możemy zaimplementować po stronie serwera, który będzie zapamiętywał stany na których byliśmy
      • \n
    • jeden wyjątek: każdy stan musi zawierać swoją unikalną ścieżkę
      • \n
    • oraz kilka innych kroków
      • \n
    \n
    • \n
  • jeśli chcemy uatrakcyjnić:\n
      \n
    • ng-enter
      • \n
    • ng-leave
      • \n
    \n
    • \n
\n\n

Na zakończenie...

\n\n \n\n

\n Slajdy: pro.ispringcloud.com/acc/Hgk7GNIxMjQ4/view/1248-hbbYD-3MyQB-hJwuz
\n Demo: github.com/akalbarczyk/Prelekcje
\n Czas trwania prelekcji: 18:35 - 19:01\n

\n\n
\n\n\n

•

\n\n\n
\n

Talk #2: AngularJS + Bootstrap - duet internetowej przyszłości [PL] Tomasz Żarnowiec

\n\n

Czym jest bootstrap?

\n\n
    \n
  • jest frameworkiem CSS
    • \n
  • ma predefiniowane klasy CSS
    • \n
\n\n

Koncepcja

\n\n
    \n
  • wszystkie elementy które są zdefiniowane opierają się na klasach nie na ID
    • \n
  • id jest złe - jeśli wykorzystamy ID to odnosimy się do jednego
    • \n
  • klasy są re-używalne, nie tak jak ID
    • \n
  • głowna zasada - mobile first
    • \n
  • w Bootstrap mamy media-queries
    • \n
  • boot dopasowuje tylko do szerokości - nigdy dla wysokości ekranu
    • \n
  • co ciekawe tabele - mogą być skalowalne! - z nie responsywnego elementu mamy responsywny
    • \n
\n\n

Jak użyć?

\n\n
    \n
  • podłączamy CSS w head
    • \n
  • podłączamy JS w body na dole\n
      \n
    • jQuery
      • \n
    • AngularJS
      • \n
    • Bootstrap
      • \n
    • następnie pluginy i dodatki JS-owe
      • \n
    \n
    • \n
  • ładujemy z CDN-a\n
      \n
    • bo nie mamy miejsca na serwerze
      • \n
    • definicja poprzez //cdnjs.com/bootstrap.js to strona ustala protokół po jakim ściągnie liba
      • \n
    \n
    • \n
\n\n

Grid (siatka) czyli podstawowy element bootstrapa

\n\n
    \n
  • każda kolumna ma prefix\n
      \n
    • col-[xs-sm-md-lg]-[1-12] - odnosi się do szerokości wyświetlacza
      • \n
    \n
    • \n
  • najpierw skalujemy mały ekran, a potem do tych większych
    • \n
  • 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)
    • \n
\n\n

Animacje!

\n\n
    \n
  • jQuery ma w sobie animacje, ale są one już w CSS
    • \n
  • jQuery i tak modyfikuje CSS
    • \n
  • jQuery opóźnia
    • \n
  • jeśli mamy mały element do animacji to jQuery
    • \n
  • jeśli duży content trzeba animować to tylko CSS
    • \n
  • lib: Animate.css - zawiera zdefiniowanych kilkadziesiąt animacji\n
      \n
    • dodajemy po bootstrapie do index.html
      • \n
    • bardzo lekka biblioteka: 20KB
      • \n
    \n
    • \n
\n\n

\n Mój klucz do frontowego sukcesu: nie przeładowujemy - nie odświeżaj.\n

\n\n

\n Slajdy: pro.ispringcloud.com/acc/I9z1QnkxMjU1/view/1255-R4pEa-5qwp8-iZQsK
\n Demo: github.com/tomaszzarnowiec/SPATemplate
\n Czas trwania prelekcji: 19:35 - 20:06\n

\n
\n\n\n

•

\n\n\n
\n

Talk #3: AngularJS - The Reactive Manifesto (v2.0) [PL] Marek Tuchalski

\n\n

Reactive Manifesto (v2.0)

\n\n
    \n
  • użytkownicy żądają responsywności rzędu 100ms
    • \n
  • w dużej mierze jest to marketingowy zabieg\n
      \n
    • aby sam typ programowania spopularyzować
      • \n
    \n
    • \n
  • istnieją 4 punkty:\n
      \n
    1. responsive - obsługa błędów, np pojawiła się 504, trzeba poinformować usera
      2. \n
    2. resilient - odporność\n
        \n
      • architektura serwisowa
        • \n
      • nie dotyczy Front-end-u - bardziej Back-end-u
        • \n
      • slack i gmail - przykładowe aplikacje, z których można korzystać kiedy połączenie z internetem zanika
        • \n
      \n
      3. \n
    3. elastic - Back-end-owa rzecz\n
        \n
      • skalowanie\n
          \n
        • automatyzacja mikroserwisów
          • \n
        • replikacja danych
          • \n
        • dodawania maszyn (manualna)
          • \n
        \n
        • \n
      \n
      4. \n
    4. message driven\n
        \n
      • systemy komunikują się poprzez wiadomości
        • \n
      • gdzie na Front-end-zie można użyć message driven?\n
          \n
        • systemy muszą działa async, aby nie blokować zasobów, kiedy tego nie potrzebujemy
          • \n
        \n
        • \n
      \n
      5. \n
    \n
    • \n
\n\n

Project share by role

\n\n

\n Reactive manifesto reklamuje Typesafe.\n Ludzie myślą, że to dotyczy tylko Back-end-ów\n Nieprawda!\n Aby aplikacja spełniała wymogi użytkowników to Front-end musi być\n responsywny!\n

\n\n

Demo of 1-page HR Hiring & Idea Sharing platform

\n\n
    \n
  • platforma, która ma zmieniać świat!
    • \n
  • handlujmy szybko
    • \n
  • obsługujmy błędy
    • \n
  • wpinajmy błędy, bo jak faktycznie klient zobaczy to abyśmy mogli się przed typ zabezpieczyć
    • \n
\n\n

DDoS - jak z tym żyć?

\n\n

\n Co jeśli przyjdzie nam przeżyć "Wykop Efekt" albo "Reddit Effect"?\n

\n\n

\n Poprawnie to się nazywa Efekt Slashdot-a.\n Więcej do poczytania na ten temat https://pl.wikipedia.org/wiki/Efekt_Slashdota\n

\n\n
    \n
  • Co powinna zrobić reaktywna apka?
    • \n
  • Pokazać 504 gateway timeout!
    • \n
  • bo lepiej jest pokazać aplikację dla części użytkowników, niż wcale
    • \n
\n\n

\n Facebook\n

    \n
  • continuous deployment
    • \n
\n\n Netflix\n\n
    \n
  • zabija swoje serwery
    • \n
  • gdzie się podnoszą następne
    • \n
\n

\n\n

Bądź gotowy na fail!

\n\n

\n Założenie:\n

\n\n
    \n
  • że zawsze dostanę odpowiedź jest bardzo złym założeniem
    • \n
  • to że dostaniemy 404 też jest złym założeniem
    • \n
  • obsługujemy grupy błędów (4xx, 5xx)
    • \n
\n\n

Jak to osiągnąć? Odpowiedź: Separation of concerns!

\n\n \n\n

\n Czas trwania prelekcji: 20:27 - 21:10
\n \n Prelegentem był Marek z firmy Evojam.
\n Kontakt: @marektuchalski
\n \n

\n\n
\n \n
Marek na scenie.
\n
\n
2015-07-30 22:00:00 angularjs-warsaw-2 ckbw97zyw0007i3umdszu2ola 2015-07-30 22:00:00 2015-07-30 22:00:00 +cioouev40005gi3um0qh654o0 Popularny błąd w obsłudze zdarzeń w JS https://piecioshka.pl/blog/2016/05/27/popularny-blad-w-obsludze-zdarzen-w-js.html

\n Chciałbym dzisiaj przedstawić problem z jakim możecie się spotkać podczas obsługi zdarzeń.\n Naturą języka jest asynchroniczność, spotykana jest w wielu miejscach.\n Asynchroniczne zapytania do serwera, czyli AJAX, to technika bardzo popularna w dzisiejszych czasach.\n

\n\n

\n Pewnym rodzajem asynchroniczności są też zdarzenia aplikacji. Częsty problem początkujących developerów objawia się tym,\n że próbują oni dostać się do DOMu, kiedy nie jest on jeszcze załadowany.\n Trzeba wtedy skorzystać z window.onload (albo lepszej formy window.addEventListener('DOMContentLoaded', ...').
\n Ewentualnie można skorzystać z load (window.addEventListener('load', ...) jeśli event DOMContentLoaded nie jest wspierany.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Customowe eventy

\n\n

\n Customowe eventy, to bardzo popularny wzorzec w aplikacjach webowych. Zdarzenia te nie są wyzwalane przez interakcję użytkownika,\n tylko przez samą aplikację. Dobrym przykładem może być zapytanie do serwera.\n

\n\n

\n Zerknijmy na taki kod:\n

\n\n
function ajax(url) {\n    var req = new Request(url);\n    req.on('load', function () {\n        Request.emit('success');\n    });\n    req.on('error', function () {\n        Request.emit('error');\n    });\n}
\n\n

\n Mamy zapytanie do serwera, gdzie na zakończenie wyzwolone zostanie odpowiednie zdarzenie.\n Kiedy zapytanie się powiedzie, zostanie wyzwolone zdarzenie success,\n w przypadku błędu - error.\n

\n\n

\n Chcielibyśmy teraz skorzystać z funkcji ajax, aby pobrać dane dotyczące użytkownika.\n Wykonujemy więc taki kod:\n

\n\n
Request.once('success', (response) => {\n    loadUserProfile(response);\n});\nRequest.once('error', () => {\n    loadFailUserPage();\n});\najax('/user');
\n\n

\n Nasłuchujemy na 2 zdarzenia:\n

\n\n
    \n
  • na poprawne pobranie danych z serwera wyświetlamy profil użytkownika
    • \n
  • kiedy zapytania zakończy się niepowodzeniem wyświetlamy błąd załadowania profilu
    • \n
\n\n

\n Na pierwszy rzuta oka nie ma tutaj nic dziwnego. A jednak. Co jeśli skorzytamy z funkcji ajax w innym miejscu?\n Chcemy pobrać zawartość kategorii produktów w sklepie internetowym, korzystając oczywiście z funkcji ajax.\n

\n\n
Request.once('success', (response) => {\n    loadCategory(response);\n});\nRequest.once('error', () => {\n    loadErrorCategoryPage();\n});\najax('/category/1234');
\n\n

\n Mamy problem. Dlaczego? Bo nie wyrejestrowaliśmy handlerów z pierwszego zapytania.\n Powiecie: "No ale przecież używamy tam once, to handler sam się wyrejestruje po wykonaniu zdarzenia."\n Zgadza się, ale tylko użyty handler się wyrejestruje. Nigdy nie będzie sytuacji, że zapytanie uruchomi\n dwa zdarzenie success i error.\n

\n\n
\n \n\n
\n Diagram z opisywaną sytuacją. Zakreśliłem problem jaki się pojawił owalem.\n
\n
\n
\n\n
\n

Rozwiązanie problemu

\n\n

\n Jest kilka rozwiązań opisywanego przeze mnie problemu. Najlepsze (dla użytego kodu) jest takie,\n aby w dowolnym handlerze wyrejestrować oba handlery.\n

\n\n
function categoryHelperSuccess(response) {\n    loadCategory(response);\n    clearCategoryHelpers(); // Usuwamy niepotrzebne handler\n};\n\nfunction categoryHelperError() {\n    loadErrorCategoryPage();\n    clearCategoryHelpers();\n};\n\n// Usuwamy nasłuchiwanie na zdarzenia: success i error,\n// aby zapobiec problemowi uruchamiania niepotrzebnych handlerów.\nfunction clearCategoryHelpers() {\n    Request.off('success', categoryHelperSuccess);\n    Request.off('error', categoryHelperError);\n};\n\nRequest.once('success', categoryHelperSuccess);\nRequest.once('error', categoryHelperError);\n\najax('/category/1234');
\n\n

\n Najlepsze rozwiązanie leży u podstaw tego kodu. Nie należy zapisywać się na zdarzenia obiektu współdzielonego.\n Wtedy nie będzie problemu. Lepsze rozwiązania w tym przypadku to używanie Promise-ów albo callback-ów.\n

\n\n
\n\n
\n

Testowy projekt

\n\n

\n Stworzyłem na potrzeby tego artykułu projekt na GitHubie.\n Chciałem pokazać Wam jak na faktycznym kodzie, objawia się opisywany przeze mnie problem.\n

\n\n

\n Wystarczy uruchomić przykład w przeglądarce (plik demo/index.html), albo w terminalu uruchomić polecenie node index.js,\n aby zobaczyć opisywany problem. Poniżej zrzut ekranu z błędem.\n

\n\n
\n \n\n
\n Błąd, który pojawi się w konsoli po stworzenie opisywanej\n architektury.\n
\n
\n
2016-05-26 22:00:00 popularny-blad-w-obsludze-zdarzen-w-js ckbw97zyw0007i3umdszu2ola 2016-05-26 22:00:00 2016-05-26 22:00:00 +ciot4qf40005hi3umds119kwf Fish - shell przyjazny każdemu https://piecioshka.pl/blog/2016/05/30/fish-shell-przyjazny-kazdemu.html

\n Powodem dla którego napisałem ten post jest przedstawienie ciekawej powłoki terminala, konkurenta\n domyślnej bash w taki sposób, aby szybko zacząć korzystanie z niego.\n Fish to o nim mowa.\n

\n\n

\n Nazwa jest interesująca, jednak tu nie chodzi o jakiekolwiek ryby. Rozwinięciem akronimu jest\n Friendly Interactive Shell. Przychylam się do tej nazwy. Powłoka jest bardzo elastyczna.\n Możliwości konfiguracyjne są bardzo duże, jest ona zdecydowanie łatwiejsza w porównaniu z domyślnym\n bashem - Bourne-Again Shell.\n

\n\n
\n Fish\n\n
\n Oficjalne logo powłoki.\n
\n
\n\n
\n

Jak zacząć?

\n\n

\n Od kilku lat używam OSXa. Ten artykuł będzie więc pisany z perspektywy programisty\n korzystającego na co dzień z tego systemu.\n

\n\n

\n Jestem jednak przekonany, że konfiguracja powłoki Fish, wygląda podobnie na wszystkich systemach Unixowych.\n Kilka lat temu moim podstawowym systemem był Linux, na którym też skonfigurowałem Fisha.\n

\n\n

\n Najprzyjemniejsza instalacja pakietów zawsze będzie zorientowana na wykorzystaniu managera pakietów.\n Jeśli chodzi o system OSX to nie ma takiego managera w domyślnej instalacji.\n Ze swojej strony polecam instalację Homebrew.\n Bardzo prosty i wolny od błędów, przynajmniej podczas mojego kilkuletniego doświadczenia.\n

\n\n

Instalacja

\n\n

\n Proces instalacji skupia się na wydaniu w terminalu takiego polecenia:\n

\n\n
$ brew install fish
\n\n

\n Po samej instalacji możemy przełączyć się na nową powłokę wykonując polecenie fish.\n Jednak idźmy krok dalej. Skonfigurujmy środowisko tak, aby zmienić domyślną powłokę.\n Aby uniknąć błędu:\n

\n\n
ERROR: /usr/local/bin/fish: non-standard shell
\n\n

\n należy w pliku /etc/shells, w którym znajduje się lista ze wspieranymi shellami,\n dodać nowy rekord ze ścieżką do Fisha. Edytujemy plik poleceniem:\n

\n\n
$ vim /etc/shells
\n\n

\n oraz dodajemy taką linijkę:\n

\n\n
...\n/usr/local/bin/fish\n...
\n\n
\n
Skąd wiem jaka jest ścieżka do pliku binarnego?
\n
Nie wiem, ale wydając polecenie which fish dostaniemy ścieżkę do pliku fish.
\n
\n\n

Zamiana domyślnego shella

\n\n

\n Do zmiany domyślnej powłoki dla obecnie zalogowanego użytkownika, korzystamy z polecenia:\n

\n\n
$ chsh -s `which fish`
\n\n

\n Parametr -s wymaga wskazania ścieżki do shella, uzyskujemy go dodając polecenie which fish\n otaczając je znakami backtick.\n

\n\n
\n\n
\n

Konfiguracja powłoki Fish

\n\n

\n Każdy shell posiada możliwość konfiguracji "pod siebie", czyli tak, aby praca w nim była przyjemnością,\n a nie udręką. Na przykład tworzenie aliasów skraca czas wpisywania tych samych komend.\n Główny plik konfiguracyjny dla powłoki Fish znajduje się w pliku:\n

\n\n
$ vim ~/.config/fish/config.fish
\n\n

\n Jeśli taki plik nie istnieje, to nie ma problemu, abyśmy go stworzyli.\n Uzupełnijmy konfigurację o podstawowy edytor powłoki. Oczywiście będzie nim Vim.
\n W pliku config.fish wpisujemy poniższą linijkę:\n

\n\n
set -U EDITOR vim
\n\n

\n Tworzy ona uniwersalną zmienną $EDITOR. Po restarcie powłoki,\n pod zmienną środowiskową $EDITOR będzie znajdował się edytor Vim.\n Dlaczego to jest takie ważne? Wiele narzędzi korzysta z tej zmiennej,\n aby użyć edytora podczas swoich prac, np. polecenie git commit korzysta z domyślnego edytora,\n aby zaprezentować developerowi zmiany w projekcie (jeśli takie istnieją).\n

\n\n

\n Bardzo prosty przykład pliku konfiguracyjnego ~/.config/fish/config.fish\n

\n\n
# Setup default editor\nset -u editor vim\n\n# Disable default greeting message\nset fish_greeting\n\n# Load private aliases\nsource ~/.aliases
\n\n
\n\n
\n

Vim na Fishu?

\n\n

\n Aby uniknąć błędu:\n

\n\n
syntastic: error: your shell /usr/local/bin/fish can't handle traditional UNIX syntax for redirections
\n\n

\n Trzeba do konfiguracji Vima, czyli w pliku .vimrc ustawić domyślną powłokę\n

\n\n
set shell=bash
\n\n

\n Więcej o błędzie można przeczytać w tym issue.\n

\n
\n\n
\n

Pytania i odpowiedzi

\n\n
\n
Jakie są zalety?
\n
\n Zalet jest dużo. Największe zalety to: duża społeczność, autosugestie, proste skrypty z konfiguracją, podpowiadanie mana.\n
\n\n
Jakiego języka trzeba używać pisząc skrypty dla Fisha?
\n
\n Pisząc skrypty będziemy używali shella według składni Posix.\n
\n\n
Gdzie jest miejsce na trzymanie konfiguracji powłoki?
\n
\n Plik ze wszelką konfiguracją związaną z Fishem znajduje się w katalog ~/.config/fish/.\n Główny plik konfiguracyjny jest w tym katalogu pod nazwą config.fish.\n
\n\n
Jakie rozszerzenie jest wymagane, aby skrypt był brany pod uwagę przez powłokę Fish?
\n
\n Nie ma żadnego wymaganego rozszerzenia. Można w katalogu ~/.config/fish/functions/\n tworzyć pliki z dowolnym rozszerzeniem, a nawet bez niego.\n
\n\n
Czy nazwa pliku w katalogu ~/.config/fish/functions/ ma znaczenie?
\n
\n Tak. Nazwa pliku musi odpowiadać funkcji, która zostanie dodana to środowiska i będzie dostapna\n jako polecenie. Rozszerzenie nie jest ważne.\n
\n\n
Czy można w konfiguracji config.fish definiować funkcje?
\n
\n Nie. Tam definiuje się tylko pojedyncze ustawienia - każde w innej linii.\n Funkcje definiujemy w katalogu ~/.config/fish/functions/.\n
\n\n
Jak zmienić domyślny prompt?
\n
\n Wystarczy stworzyć plik ~/.config/fish/fish_prompt.fish i stworzyć w nim funkcję\n o nazwie fish_prompt. Przykład:\n\n
function fish_prompt\n    echo ' > '\nend
\n
\n\n
Co to jest fish_right_prompt?
\n
\n prompt jest to tzw. znak zachęty. Znajduje się on zawsze po lewej stronie.\n Od tej wartości zaczyna się linia w której na końcu mam ustawiony kursor, gdzie możemy coś wpisać.\n Jednak co jeśli chcielibyśmy wpisać coś po prawej stronie? Mamy możliwość poprzez funkcję:\n\n
function fish_right_prompt\n    echo (date '+%H:%M:%S)\nend
\n\n

\n Jak to będzie wyglądało w praktyce? Poniżej przykład.\n

\n\n
\n \n\n
\n Powyższa funkcja w praktyce.\n
\n
\n\n

\n Więcej detali można znaleźć w\n oficjalnej dokumentacji.\n

\n
\n
\n
\n\n
\n

Ciekawostki

\n\n

Design

\n\n

\n Rzadko kiedy spotyka się tak dobrze zapisane zasady projektu, jak ma to miejsce w przypadku Fisha.\n Pełna lista praw i zasad dostępna jest tutaj.\n W dokumencie znajduje się lista następujących praw: "The law of orthogonality", "The law of responsiveness",\n "The law of user focus" oraz "The law of discoverability".\n

\n\n

\n Bardzo ciekawym prawem jest zasada, że jeśli wystąpi sytuacja,\n że 2 rozwiązania jest zaimplementowane podobnie, ale nie są\n identyczne, to jedno z nich trzeba usunąć a to drugie ulepszyć. Taka\n zasada powinna panować w każdym managerze paczek, np. w npm.\n Tylko kto by weryfikował każdą paczkę?\n

\n\n

\n Kolejne ciekawe prawo mówi, żeby doprowadzić do sytuacji, aby w jak najkrótszym czasie nowy użytkownik\n stał się ekspertem w danym narzędziu. Jest to oznaką zaprojektowania szybkiego wykrywania / odnajdywania\n nowych opcji programu. Każda funkcja powinna posiadać komentarz, aby była bardziej zrozumiała, jeszcze\n przed użyciem.\n

\n\n

Zdarzenia

\n\n

\n Bardzo ciekawe jest to, że powłoka umożliwia nam nasłuchiwania na zdarzeniach.\n Pierwszy raz spotykam się z taką możliwości, że np. jedno polecenie / narzędzie emituje zdarzenie,\n a inne nasłuchuje na nie i się uruchamia.
\n

\n\n

\n Więcej w tym temacie jest dostępne tutaj.\n

\n
\n\n
\n

Mój sposób na dotfiles

\n\n

\n W dzisiejszych czasach, developerzy mają swoje serwery np. na\n hosting, vps-y. Tam też chcielibyśmy mieć fish shella.\n Jak przenieść całą konfigurację na serwer?\n

\n\n

\n Pomysłem jest stworzenie projektu dotfiles z naszą\n konfiguracją środowiska pracy. Wystarczy na serwerze (miejscu\n docelowym) pobrać repozytorium i rozpropagować konfigurację w\n odpowiednie miejsce.\n

\n\n

\n Ze względu na liczbę konfiguracji środowiska większą niż 1 plik,\n warto skorzystać z narzędzia rsync, które zadba od\n skopiowanie / nadpisanie plików z projektu dotfiles\n w zdefiniowane przez nas miejsce. Osobiście używam takiego polecenia\n do instalacji konfiguracji powłoki Fish:\n

\n\n
$ rsync -rv ~/projects/dotfiles/.config/fish/* ~/.config/fish/
\n\n

\n Ze względu na tak długie polecenie polecam stworzyć sobie skrypt shellowy, w którym wyżej wymieniona linijka\n znajdzie swoje miejsce. Dzięki takiemu skryptowi będzie możliwość dodania jeszcze innych konfiguracji,\n np. Vima, Gita.\n

\n\n
\n\n\n

•

\n\n\n
\n

Źródła warte przeczytania

\n\n \n\n

\n Dobra wiadomość dla użytkowników Windowsa
\n Dostępna jest opcja FISHa z Cygwinem!\n

\n
2016-05-29 22:00:00 fish-shell-przyjazny-kazdemu ckbw97zyw0007i3umdszu2ola 2016-05-29 22:00:00 2016-05-29 22:00:00 +cipua6kg0005ii3umgyti4gul AngularJS Warsaw #8 https://piecioshka.pl/blog/2016/06/25/angularjs-warsaw-8.html

\n W minioną środę zawitałem z kolegą na warszawskie Włochy, gdzie w siedzibie firmy Microsoft odbyło się kolejne\n spotkanie z Angularem, czyli AngularJS Warsaw.\n

\n\n

\n Na spotkanie zapisało się 133 osoby i przyszło około 80. Taka prawidłowość występuje zawsze.\n Nigdy na spotkania nie przychodzi dokładnie tyle osób ile się zapisuje.\n Ale tak jest zawsze w życiu, chociażby zaproszenia na wesele. Zostaje zaproszonych 200 osób, a przychodzi 150.\n

\n\n\n\n

\n Link do wydarzenia: meetup.com/AngularJS-Warsaw/\n

\n\n

\n Podczas spotkania wysłuchaliśmy 4 prelekcji. A jedną z nich poprowadził nawet organizator całego zamieszania, Darek Kalbarczyk.\n Wszystkie prelekcje były zorientowane na framework AngularJS autorstwa\n Misko Havery'ego, Adam Abrons'a, pracujących w organizacji Google.\n

\n\n
\n

Talk #1: Tworzenie aplikacji wielojęzykowych w AngularJS Bartłomiej Narożnik

\n\n

\n Prelegent, został przedstawiony przez Darka (organizatora) jako jeden z najlepszych programistów z którymi pracował.\n

\n\n

Zarządzenie wielojęzykowością

\n\n
    \n
  • Podejście monarchistyczne - tylko tłumaczenie języka
    • \n
  • Podejście anarchistyczne - osobny Front-end
    • \n
  • Podejście federalistyczne - wspólna cześć, ale dla każdej kultury dostosowujemy aplikacje
    • \n
\n\n

Narzędzie angular-translate

\n\n
    \n
  • Obsługuje większość tego co oferuje Angular
    • \n
  • Parametryzacja
    • \n
  • Można przetłumaczyć całe fragmenty HTMLa
    • \n
  • Można dodać obsługę błędów
    • \n
\n\n

\n Instalacja bardzo prosta, wystarczy zdefiniować:\n

\n\n
    \n
  1. Zależność
    2. \n
  2. Język
    3. \n
  3. Struktura translacji (JSON)
    4. \n
\n\n

\n Dobrze się obsługuje, gdy mamy service. Jednakże filter również pasuje.\n Dyrektywa jest najbardziej popularna w użyciu.\n

\n\n

Zmienne w tłumaczeniach

\n\n

\n Trzeba podawać dodatkowo wartości tych zmiennych np. translate-values w dyrektywach.\n

\n\n

Zmiana języka

\n\n

\n Metoda use(key), gdzie key to klucz z językiem.
\n Uruchomienie metody bez parametru zwróci obecnie używany język.\n

\n\n

Pluralizacja

\n\n

\n Obsługuje messageformat.js.\n

\n\n

Obsługa błędów

\n\n

\n Jeśli jest problem z tłumaczeniem, np. jeśli klucz nie ma swojego\n odpowiednika, możemy dostać console.warn() z tego\n tytułu, albo też możemy zdefiniować swój handler.
Mamy mnóstwo\n zdarzeń, na które możemy nasłuchiwać, więc można stwierdzić,\n że możliwości są ogromne.\n

\n\n

Bezpieczeństwo

\n\n
    \n
  • angular-sanitize (z modułu)
    • \n
  • albo po prostu escape
    • \n
\n\n

\n Zalecane jest aby używać angular-sanitize.\n

\n\n

Jak wykryć język?

\n\n

\n Funkcja determinePreferredLanguage\n

\n\n
navigator.languages[0]\nnavigator.language\nnavigator.browserLanguage\nnavigator.systemLanguage\nnavigator.userLanguage
\n\n

\n Język z jakim jest zainstalowana przeglądarka, co nie koniecznie jest wystarczające,\n np. w dużych firmach mamy zainstalowane z domyślnymi ustawieniami (ang) a przecież mówimy po polsku.\n

\n\n

\n Lepsze rozwiązanie to parsowanie nagłówka HTTP "Accept-Language", gdzie wystarczy zmienić język w przeglądarce,\n wtedy będziemy mieli zawsze poprawny język odpowiadający preferencjom użytkownika.\n

\n\n Czas trwania 19:05 - 19:20 + 3\n
\n\n\n

•

\n\n\n
\n

Talk #2: AngularJS. Najczęściej zadawane pytania na rozmowie kwalifikacyjnej Dariusz Kalbarczyk

\n\n

\n Darek razem z Bartkiem przygotowują razem książkę o tytule takim jak tytuł tej prelekcji.\n

\n\n

Skąd pomysł na książkę?

\n\n

\n Ostatnimi czasy Darek rekrutował całymi dniami w Katowicach i Szczecinie kandydatów na developerów\n do firm, gdzie projekty oparte były na AngularJS.
\n Po przeprowadzonych rozmowach postanowił zebrać wszystkie pytania w jedno miejsce i napisać książkę.\n

\n\n

\n Według Darka, pracodawca poszukuje pracowników według takich 3 kryteriów:\n

\n\n
    \n
  • 33% - czy ma to czego firma oczekuje?
    • \n
  • 33% - czy mu się w ogóle chce?
    • \n
  • 33% - jak się sprawdzi w zespole?
    • \n
\n\n
\n \n\n
\n Darek Kalbarczyk opowiada o nowej książce, którą piszę razem ze swoim kolegą z pracy.\n
\n
\n\n

Seria pytań

\n\n

1. Dlaczego warto używać Angulara?

\n\n

\n Odp. z sali: "Jest pocięty", ale jest komponentyzacja, która przekłada się na testy,\n

\n\n

2. Czy angular jest zależny od jquery

\n\n

\n Odp. z sali: nie jest zależny, ponieważ posiada jqLite, czyli takie podstawy z biblioteki jQuery,\n jeśli jednak jQuery będzie dostępne przed osadzeniem Angulara, to wykorzysta on metody obiektu jQuery.\n

\n\n

3. Wymień najważniejsze cechy Angulara.

\n\n

\n Odp. z sali: moduły, SPA, i ... reszta cech.\n

\n\n

4. Co to są moduły w Angularze?

\n\n

\n Odp. z sali: Kontenery, podobne do przestrzeni nazw. Możemy definiować zależności.\n

\n\n

5. Jakie komponenty możemy definiować w modułach?

\n\n

\n Odp. z sali: kontrolery, dyrektywy, configi.\n

\n\n

6. Jak nazywa się moduł główny Angulara?

\n\n

\n Odp z sali: ng - moduł główny, ładowany domyślnie, podczas startu aplikacji.\n

\n\n

7. Jak Angular ładuje zależności?

\n\n

\n Odp. z sali: Dependency Injection.\n

\n\n

8. Kiedy są ładowane moduły zależne?

\n\n

\n Brak odpowiedzi.\n

\n\n

9. Co to jest globalne API?

\n\n

\n Odp. z sali: Metody obiektu angular, np. angular.copy.\n

\n\n

10. Jaka jest różnica jest pomiędzy prefiksem $ a $$?

\n\n

\n Odp. z sali: W Angularze za pomocą $ oznaczone są właściwości publiczne obiektu, a z $$ prywatne.\n

\n\n

11. Co to jest $scope i $rootScope?

\n\n

\n Odp. z sali:\n

\n\n
    \n
  • $rootScope jest to najwyższy rodzaj $scope (główny)
    • \n
  • $scope - obiekt skleja kontroler i widok.
    • \n
  • $scope-y mogą być zagnieżdżane.
    • \n
  • $rootScope.$new może tworzyć niezwiązane z niczym scope-y, można go zapakować w service i traktować jako obsługa sygnałów.
    • \n
\n\n

12. Wyjaśnij różnice pomiędzy ng-if oraz ng-show?

\n\n

\n Odp. z sali: ng-if usuwa z DOM, a ng-show korzysta ze styli CSS do ukrycia elementu.\n

\n\n

13. Jakie specjalne zmienne udostępnia ngRepeat?

\n\n

\n Odp. z sali: last, first, even, odd, index, middle.\n

\n\n

14. Co to jest i jak działa ng-include?

\n\n

\n Odp. z sali: Dyrektywa służy do ładowania plików statycznych. Niestety, ale nie można z innej domeny.\n

\n\n

15. Co jest szybsze $digest czy $apply?

\n\n

\n Odp. z sali: $digest jest szybszy bo jedzie tylko w dół.
\n $apply w górę i w dół.\n

\n\n

16. Jak działa funkcja $destroy dla danego zakresu?

\n\n

\n Odp. z sali: Usuwa $scope z pamięci.\n

\n\n

17. Jaka jest różnica pomiędzy $watch i $observe?

\n\n

\n Odp. z sali:
\n - $watch można wykorzystywać w dyrektywach w funkcji link i kontrolerach
\n - $observe tylko w dyrektywach w obiekcie attrs.\n

\n\n

18. Wymień metody serwisu $http?

\n\n

\n Odp. z sali: $get, $head, $post, $put, $delete, $jsonp, $patch\n

\n\n

19. Wymień metody wspierane przez serwis $resource?

\n\n

\n Odp. z sali: $get, $save, $query, $remove, $delete.\n

\n\n

20. Które dyrektywy wspierają animacje?

\n\n

\n Odp. z sali: ng-show, ng-if, ...\n

\n\n

21. Co to jest IIFE?

\n\n

\n Na to pytanie ja odpowiedziałem! Chciałem chociaż raz móc odpowiedzieć. Przy mojej znajomości Angulara (brak realizacji żadnego projektu)\n powiedziałem, że IIFE to pewnego rodzaju $scope dla Angulara.
\n Generalnie o IIFE można opowiadać i opowiadać, a odpowiedzi musiały być jak najbardziej trafne.\n

\n\n

\n Każda poprawna odpowiedź kończyła się otrzymaniem od organizatorów drobnych upominków.\n Według mnie jest to bardzo miły gest.\n

\n\n Czas trwania 19:30 - 19:50\n
\n\n\n

•

\n\n\n
\n

Talk #3: Host your AngularJS app like a PRO! Tomasz Wiśniewski

\n\n

\n Prelekcja sponsorowana.\n

\n\n

\n Tomasz opowiadał o Azure App Service.\n Usługa jest za darmo do 10 produkcyjnych aplikacji internetowych.\n

\n\n

\n Prelekcja zachęciła mnie do skorzystania z tego narzędzia! Także, spróbujmy dać szansę.\n Zachęcam do podzielenia się wnioskami w komentarzach.\n

\n\n Czas trwania 19:50 - 20:20\n
\n\n\n

•

\n\n\n
\n

Talk #4: Ionic kreator. Interfejs szybko łatwo i przyjemnie. Dariusz Biedrzycki

\n\n

\n Tworzenie UI w ionic-u jest żmudne oraz nudne, dlatego powstał Ionic Creator, który to ma "interfejs webowy".\n

\n\n

Kiedy ja używam takiego kreatora?

\n\n
    \n
  • Zaczynam projekt - wyklikując go
    • \n
  • Tworzę nowy template
    • \n
\n\n

\n Darek pokazuje jak się obsługuje kreator Ionica. Opisuje plusy i minusy tego narzędzia na żywo.\n Co prawda miał przygotowane slajdy, ale publiczność opowiedziała się za prezentacja z użyciem właściwego narzędzia.\n

\n\n

Zalety

\n\n
    \n
  • Szybkie tworzenie formularzy w aplikacji mobilnej
    • \n
  • Klient od razu widzi projekt
    • \n
\n\n

Minusy

\n\n
    \n
  • Nie da się wgrać do kreatora własnego projektu
    • \n
  • W bezpłatnej wersji można zrobić tylko 1 projekt
    • \n
  • Statyczny routing, czyli nie można parametryzować ścieżek
    • \n
\n\n Czas trwania 20:28 - 20:57\n
\n\n
\n

Podsumowanie

\n\n

\n Jako organizator WarsawJS cieszę się, że w warszawskiej społeczności\n developerów JavaScript, powstają nowe organizacje związane z tym językiem.\n

\n\n

\n Jako osoba lubiąca interakcje międzyludzkie, staram się być obecny\n na większości meetupów, nie zawsze mi się to udaje, ale jeśli jestem\n uczestnikiem takiego wydarzenia, to na 90%, kilka dni po wydarzeniu\n pojawi się wpis zawierający moje notatki ze spotkania.\n

\n\n

\n Najbliższe spotkanie AngularJS Warsaw odbędzie się za około 2 miesiące,\n na które organizatorzy serdecznie zapraszają!\n

\n
2016-06-24 22:00:00 angularjs-warsaw-8 ckbw97zyw0007i3umdszu2ola 2016-06-24 22:00:00 2016-06-24 22:00:00 +cipvpmf40005ji3um14hy54r4 WarsawJS Meetup #21 https://piecioshka.pl/blog/2016/06/26/warsawjs-meetup-21.html

\n Spotkanie organizacji WarsawJS odbyło się 11 maja\n w Państwomiasto. Wysłuchaliśmy trzech prelekcji o JavaScript. Ten meetup\n był szczególny pod trzema względami.\n

\n\n

\n Po pierwsze, na scenie widzieliśmy pasjonata Fizyki, Andriya\n Mykulyaka, który to opowiadał o najatrakcyjniejszym ostatnimi czasy dla\n mnie narzędziu Webpack.\n

\n\n

\n Po drugie, kolejną prelekcję po prowadził Dominik Lubański,\n który to opowiedział o prototypowaniu w JavaScript. Temat jest bardzo\n szeroki. Prelekcja zakończyła się krótką historią o serii książek\n YDKJS. Dominik powiedział, że w swojej firmie mocno ciśnie\n wszystkich, aby przeczytali całą serię. Ze względu, że nigdy nie\n przeczytałem choć jednego tomu, to postanowiłem, że zbiorę się w sobie i\n przeczytam cała, 6-cio tomową, serię. Zacząłem czytać i tak powstały\n 2 wpisy na blogu:\n

\n\n\n\n

\n Więcej postów z tej serii, już wkrótce!\n

\n\n

\n No i po trzecie! Ten meetup był bardzo atrakcyjny z\n jeszcze jednego powodu. Na warszawskiej scenie pojawiła się pierwsza dziewczyna.\n Paulina Kamińska opowiadała o bibliotece gsap.js, która to\n pomaga przy tworzeniu animacji.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Ze względu na moment w którym nagrywaliśmy zapowiedź, a było to na początku maja,\n postanowiliśmy upamiętnić naszą flagę państwową!\n

\n\n

\n Całą zapowiedź nagrywaliśmy sprzed budynku Warsaw Spire, nowo otwartego wówczas wieżowca w centrum miasta.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: Webpack - co to jest i z czym go jeść? [PL] Andriy Mykulyak

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Is there inheritance or delegation? [PL] Dominik Lubański

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: gsap.js, czyli animowanie bez CSS [PL] Paulina Kamińska

\n\n

\n Paulina jest była pierwszą prelegentką podczas meetupów WarsawJS.\n Dodatkowo, pierwszy raz opowiadała przed publicznością, więc myślę, że należą jej się pochwały!\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-06-25 22:00:00 warsawjs-meetup-21 ckbw97zyw0007i3umdszu2ola 2016-06-25 22:00:00 2016-06-25 22:00:00 +cipx529s0005ki3umaywk1ncq WarsawJS Meetup #22 https://piecioshka.pl/blog/2016/06/27/warsawjs-meetup-22.html

\n To już 22 spotkanie! Szybko leci. Tak się zastanawiając, to między każdym meetupem WarsawJS\n są tylko 4 tygodnie = 4 poniedziałki. To bardzo krótki okres czasu dla organizatorów, aby podczas spotkania\n wszystko zagrało jak powinno. Ale wiecie co? Mi się to podoba!\n

\n\n

\n Lubię pomagać ludziom, którzy chcą pomocy.\n A tak sobie tłumaczę, że Ci którzy przychodzą, chcą się rozwijać. Cieszę się, że mogę takim ludziom\n pomagać rozwijać ich wachlarz umiejętności. Rozwój swoich umiejętności to proces ciągły. Trwa on całe życie.\n A najfajniejsze w tym wszystkim jest to, że można zacząć rozwijać się jako developer w dowolnym wieku!\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Tym razem na sportowo! Lubię jeździć na deskorolce, to pomyślałem, że zabiorę Was na jeden z wielu\n warszawskich skateparków. W Parku Szymańskiego jest taki mini skatepark - jeden z pierwszych jaki poznałem.\n

\n\n
\n \n\n
\n Skatepark w Parku Szymańskiego.\n
\n
\n\n

\n Czerwcowe spotkanie zaowocowało w trzy prelekcje. Pierwsza i ostania były po angielsku.\n Generalnie to zazdroszczę prelegentom, którzy wychodzą na scenę i opowiadają kilkadziesiąt minut\n po angielsku. Muszą na pewno czuć się pewnie w tym języku. Także\n Artur, Tomasz - chapeau bas!\n

\n\n

\n Profil wydarzenia na portalu Meetup.com dostał\n mnóstwo komentarzy z pochwałami, czyli prelekcje podobały się nie tylko mi! To zawsze cieszy organizatorów.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: Node like a pro [EN] Artur Siery

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Back to the future - async JS handling [PL] Maciej Pawluk

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: JavaScript + Java = TypeScript [EN] Tomasz Ducin

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-06-26 22:00:00 warsawjs-meetup-22 ckbw97zyw0007i3umdszu2ola 2016-06-26 22:00:00 2016-06-26 22:00:00 cid3lu4g0004bi3um79c092w8 WarsawJS Meetup #11 https://piecioshka.pl/blog/2015/08/09/warsawjs-meetup-11.html

\n Widzieliśmy się 22 lipca po raz #11 w Państwomiasto o 18:30, aby porozmawiać o JavaScript.\n Było to niesamowite spotkanie, tyle ludzi podczas wakacji? Przerosło to nasze oczekiwania :smiley:\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Talk #1: Wprowadzenie do Socket.io [EN] Tomasz Marciszewski

\n\n

\n Twitter: @Koori_\n

\n\n \n\n

\n Link do slajdów: tmarciszewski.github.io/socket.io-introduction/\n

\n
\n\n\n

•

\n\n\n
\n

Talk #2: Mobile: od czego zacząć pisanie aplikacji na urządzenia mobilne [PL] Tomasz Pietrzak

\n\n

\n Twitter: @Fulkman\n

\n\n \n\n

\n Link do slajdów: fulkman.github.io/warsawjs-presentation/\n

\n
\n\n\n

•

\n\n\n
\n

Talk #3: Angular 2 – krótkie wprowadzenie [PL] Mateusz Kocz

\n\n

\n Twitter: @mateuszkocz\n

\n\n \n\n

\n Link do slajdów: mateuszkocz.github.io/warsawjs-presentation/\n

\n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2015-08-08 22:00:00 warsawjs-meetup-11 ckbw97zyw0007i3umdszu2ola 2015-08-08 22:00:00 2015-08-08 22:00:00 cid519z40004ci3um4fb4ham2 DevMeetings: ECMAScript 6: Warszawa https://piecioshka.pl/blog/2015/08/10/devmeetings-ecmascript-6-warszawa.html

\n Kila tygodni temu miałem przyjemność uczestniczenia w kolejnym DevMeetings-ie.\n Kolejny raz byłem w roli trenera - świetne uczucie, kiedy przekazuje się zdobytą wiedzę.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n

Miejsce

\n\n

\n 25 lipca spotkaliśmy się na 26 piętrze w budynku Golden Flor Plaza.\n

\n\n
\n \n
Widok na Centrum Warszawy.
\n
\n\n

Ekipa

\n\n

\n Skład mentorów był nieco okrojony względem ostatniego DevMeetingu w Krakowie,\n mianowicie uczestnikom pomagałem ja oraz Kuba - młody developer z Wrocławia, z dużymi umiejętnościami.\n

\n\n

Zadania

\n\n

\n Zadania do wykonania były takie same jak w Krakowie. Jedno trudniejsze, drugie łatwiejsze.\n Dobór zadań nie był narzucany z góry, jednak dla uczestników z mniejszym doświadczeniem\n proponowana była aplikacja Tinder. Konkurowała ona z aplikacją Foursquare.\n

\n\n

\n Wzorcowe aplikacje wykonane przez doświadczonych developerów:\n

\n\n\n\n

Podsumowanie

\n\n

\n Jestem bardzo zadowolony, że Piotr zaprosił mnie na kolejne spotkanie w roli mentora.
\n Tylu ludzi zgromadzonych w jednym miejscu nie z przymusu, lecz z chęci rozwoju,\n daje mi do zrozumienia, że jest mnóstwo osób, którzy chcą się uczyć programowania i wychodzą na przeciw temu,\n zamiast siedzieć w domu i starać się być aspołecznymi developerami.\n

\n\n 2015-08-09 22:00:00 devmeetings-ecmascript-6-warszawa ckbw97zyw0007i3umdszu2ola 2015-08-09 22:00:00 2015-08-09 22:00:00 cidm6k740004di3um2wzobd0l WarsawJS Meetup #12 https://piecioshka.pl/blog/2015/08/22/warsawjs-meetup-12.html

\n Spotkaliśmy się, jak zwykle w trzecią środę miesiąca w Państwomiasto (Andersa 29).\n Mieliśmy jak zwykle 3 prezentacje, gdzie pierwsza z nich była w pewien sposób wyjątkowa,\n gdyż była skierowana dla tych którzy dopiero zaczynają swoją przygodę z JavaScript.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Tym razem chcieliśmy wyszczególnić Universam na Rondzie Wiatraczna jako miejsce znane warszawiakom.\n Jest to pierwszy sklep samoobsługowy w Polsce.\n Kilka tygodni temu dowiedzieliśmy się, że ten budynek zostanie zburzony,\n a w jego miejscu powstanie biurowiec.\n

\n\n \n
\n\n
\n

Talk #1: Jak zacząć przygodę z JavaScriptem od zera? [PL] Bartłomiej Sobczuk

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: How to create a simple Node.js proxy for third-party APIs [EN] Illarion Khapyorskiy

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: Node.js on mobile [EN] Oguz Bastemur

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2015-08-21 22:00:00 warsawjs-meetup-12 ckbw97zyw0007i3umdszu2ola 2015-08-21 22:00:00 2015-08-21 22:00:00 @@ -3387,26 +3429,6 @@ cindovr40005bi3um60ep4qnr WarsawJS Meetup #20 https://piecioshka.pl/blog/2016/04 cioak0cg0005di3umewfnb52q Jak podsłuchać iPhona? https://piecioshka.pl/blog/2016/05/17/jak-podsluchac-iphona.html

\n Tym artykułem chciałbym pomóc wszystkim tym, którzy podobnie jak ja, tworzą aplikacje cross-platformowe,\n i mają problem z debugowaniem na urządzeniach z rodziny Apple. Przedstawię jak podsłuchać komunikację\n przeglądarki uruchomionej na iPhonie, iPadzie albo iPodzie.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n

\n Jako developer aplikacji multi-platformowych,\n często (moim zdaniem za często) poprawiam błędy pojawiające się tylko na jednej platformie. Nie jest to miłe.\n

\n\n

\n JESTEM OGROMNYM ZWOLENNIKIEM SPÓJNOŚCI\n

\n\n

\n ...dlatego moim marzeniem byłaby sytuacja taka, że jedno rozwiązanie powinno działać, albo nie działać wszędzie zarazem.\n

\n\n

\n Wolę mieć jasną sytuację, że jeśli na jednej platformie nie działa, to na pozostałych również.\n Wtedy wiem, że gdy na jednej zrobię poprawkę, to na wszystkich innych będzie także działało.
\n Niestety, to rzadkość w tym fachu.\n

\n\n
\n

Problem kompatybilności z Apple

\n\n

\n Jakiś czas temu w pewnym moim projekcie istniał problem przeglądarki\n uruchomionej na iPhonie komunikującej się z serwerem HTTP.\n Korzystając z przeglądarki Google Chrome, nie można niestety\n wejść w tryb developerski (remote debugging), czyli mieć\n połączenie komputer - urządzenie i weryfikować stan\n aplikacji uruchomionej na urządzeniu.\n

\n\n

\n Taki remote debugging działa tylko na urządzeniach z Androidem,\n które podłączymy do komputera z Windowsem / OSXem / Linuksem.\n

\n\n

\n Wtedy po podłączeniu telefonu z Androidem wchodzimy na komputerze (korzystamy z Google Chrome) na\n chrome://inspect i wybieramy urządzenie, które chcemy połączyć z naszym komputerem.\n

\n\n

\n Chcę po prostu podłączyć się do iPhona, ale jak? Może... to narysuję.\n

\n\n
\n \n\n
\n Ryc. 1. Połączenie MacBook z iPhonem albo iPadem.\n
\n
\n\n

\n Kabel podłączam. iTunes wykrywa urządzenie. Na razie wszystko gra. Co dalej?\n

\n\n

\n Tryb remote debugging działa w Safari (specjalnie nie\n nazywam tego programu przeglądarką ze względu na implementację\n specyfikacji W3C oraz kiepskie narzędzia developerskie -\n Google Chrome to jedyna\n słuszna przeglądarka). No dobra, przedstawię kroki jak skorzystać z\n remote debugging.\n

\n
\n\n
\n

Safari - Remote debugging

\n\n

\n Poniżej lista kroków, aby korzystać z DevToolsów (czytaj "narzędzi\n developerskich") dla Safari.\n

\n\n
    \n
  1. \n Pierwszy krok to konfiguracja sprzętowa: podłączasz kabelkiem iPhona z MacBookiem (to chyba jasne).\n
    2. \n
  2. \n iPhone: Drugim krokiem jest włączenie Inspektora w przeglądarce Safari. Wykonać to należy wchodząc w urządzeniu w:\n Ustawienia → Safari → Zaawansowane → Inspektor WWW.\n Przełączamy Inspektora w stan włączenia.\n
    3. \n
  3. \n iPhone: uruchamiasz Safari i wchodzisz na stronę example.org\n\n
    \n \n\n
    \n Ryc. 2. Otworzona strona example.org na iPhone.\n
    \n
    \n
    4. \n
  4. \n MacBook: uruchamiasz Safari i wybierasz z menu górnego Programowanie, a potem iPhone (albo iPad, albo iPod)\n\n
    \n \n\n
    \n Ryc. 3. Otwieramy zakładkę Programowanie → iPhone i widzimy wszystkie otwarte strony.\n
    \n
    \n\n Jeżeli będziesz w takiej sytuacji:\n\n
    \n \n\n
    \n Ryc. 4. Otwieramy zakładkę Programowanie → iPhone i nie widzimy otwartych stron.\n
    \n
    \n\n ...to w sekcji FAQ (na dole strony) znajdziesz rozwiązanie.\n
    5. \n
  5. \n MacBook: wybierasz stronę example.org klikając w element menu.\n\n
    \n \n\n
    \n Ryc. 5. Klikamy w konkretną stronę otwartą na Safari na iPhone.\n
    \n
    \n
    6. \n
  6. \n MacBook: naszym oczom ukazują się narzędzia\n developerskie znane z typowego debugowania pod Safari na OSX.\n\n
    \n \n\n
    \n Ryc. 6. Otwarte DevToolsy (narzędzia developerskie),\n które są podłączone do Safari uruchomionego na iPhone.\n
    \n
    \n
    7. \n
  7. \n Od teraz jesteśmy podłączeni konsolą do strony otworzonej na iPhonie. Możemy w pełni debugować naszą aplikację.\n
    8. \n
\n\n

\n Co jeśli jednak chcielibyśmy podłączyć się Wiresharkiem? Tutaj pojawia się problem, ponieważ nie wykrywa on\n podłączonego urządzenia!\n

\n
\n\n
\n

Wireshark podsłuchuje iPhona

\n\n

\n Wireshark to najlepszy sniffer (analizator pakietów) na rynku. Każdy kto uważa się za programistę sieciowego,\n a Ty jako programista aplikacji internetowych należysz do takich, to na pewno wiesz jak sobie poradzić z Wiresharkiem.\n

\n\n

\n Jeśli nie korzystałeś nigdy z tego programu, to polecam książkę pt. "Praktyczna analiza pakietów" autorstwa Chrisa Sandersa.\n Książka jest dostępna po polsku w księgarni internetowej Helion:\n helion.pl/ksiazki/praktyczna-analiza-pakietow-....htm\n Wkrótce na blogu pojawi się recenzja tej książki. Jeśli kogoś temat interesuje, to zachęcam do śledzenia mojego bloga.\n

\n\n
\n \n\n
\n Ryc. 7. Wireshark z listą interfejsów.\n
\n
\n\n

\n Na powyższym zrzucie ekranu nie widać połączenia (odpowiedni interfejs) z iPhonem.\n Rozwiązanie zagadki jest proste. Do komunikacji z tym urządzeniem brakuje odpowiedniego interfejsu! Dodajmy go!\n

\n\n

Dodajemy interfejs do komunikacji z iPhone

\n\n
    \n
  1. \n Za pomocą narzędzia rvictl, czyli Remote Virtual Interface Tool możemy zarządzać interfejsami.\n Zobaczmy jak wygląda pełny opis narzędzia:\n\n
    \n \n\n
    \n Ryc. 8. Program rvictl.\n
    \n
    \n
    2. \n
  2. \n

    \n Skorzystamy z opcji -s, aby uruchomić kanał komunikacyjny między MacBookiem a iPhonem.\n Potrzebujemy do tego UUID urządzenia (dowolnego z rodziny Apple: iPhone, iPad, iPod).\n

    \n\n

    Jeśli nie wiesz co to jest UUID, to odpowiedź znajdziesz w FAQ.

    \n\n

    Żeby to zrobić uruchamiamy program iTunes:

    \n\n
    \n \n\n
    \n Ryc. 9. Program iTunes.\n
    \n
    \n
    3. \n
  3. \n

    Następnie wybieramy nasze urządzenie:

    \n\n
    \n \n\n
    \n Ryc. 10. Wybieramy iPhona w programie iTunes.\n
    \n
    \n
    4. \n
  4. \n

    Klikamy w "Numer seryjny" aby pokazał nam się UUID urządzenia:

    \n\n
    \n \n\n
    \n Ryc. 11. Wyświetlony UUID urządzenia iPhone.\n
    \n
    \n
    5. \n
  5. \n

    Klikamy prawym przyciskiem myszy, pokazuje nam się menu kontekstowe z jedną opcją "kopiuj".

    \n
    6. \n
  6. \n

    Przechodzimy do konsoli i wpisujemy polecenie:

    \n\n
    $ rvictl -s [UUID]
    \n\n

    \n ...zastępując [UUID] skopiowanym ciągiem znaków.\n

    \n
    7. \n
  7. \n Resetujemy Wiresharka, a w nowej sesji programu widzimy listę interfejsów z nowym rv0:\n\n
    \n \n\n
    \n Ryc. 12. Wireshark z dłuższą listą interfejsów (pojawił się interfejs rv0)."\n
    \n
    \n
    8. \n
  8. \n Wybieramy interfejs rv0 (klikając 2x w daną pozycję)\n i od teraz możemy nasłuchiwać wszelką komunikację\n telefonu ze światem zewnętrznym!\n

    \n Przykład poniżej:\n\n
    \n \n\n
    \n Ryc. 13. Request HTTP do strony example.org widziany w programie Wireshark.\n
    \n
    \n
    9. \n
\n\n

\n Dzięki takiemu nasłuchiwaniu pakietów jesteśmy w 100% pewni jakie zapytania generuje urządzenie,\n oraz tym samym jakie dostaje odpowiedzi z serwera.\n

\n
\n\n
\n

FAQ

\n\n
\n
Nie widzę w Safari na MacBooku żadnej strony na moim iPhonie?
\n
\n Zerknij na iPhone, czy przypadkiem nie zgasł Ci ekran. Aby korzystać z Remote debugging, musisz ciągle\n mieć otwartą aplikację Safari na pierwszym planie (musi być widoczne).\n
\n\n
Co to jest UUID urządzenia?
\n
\n Pełne rozwinięcie akronimu to Universally unique identifier.\n Jednoznacznie identyfikuje urządzenie, które podłączyliśmy do\n komputera. Ciąg znaków jest 128-bitowy, więc ma 2128\n kombinacji. Więcej szczegółów dostępnych na Wikipedii (hasło:\n Universally_unique_identifier).\n
\n
\n
\n\n
\n

Podsumowanie

\n\n

\n Jak widać wystarczy kilka minut, aby podsłuchiwać dowolne narzędzie z rodziny Apple, czy to będzie iPhone, iPad czy iPod.\n Trzeba posiadać "kompatybilny" komputer z rodziny Apple. Po podłączeniu kabelkami możemy podglądać co tam "lata w tle".\n

\n\n

\n Na oficjalnej stronie firmy Apple, w sekcji dla developerów, znajduje\n się wyjaśnienie po angielsku, może dla kogoś będzie to przystępniejsza\n forma pozyskania wiedzy.
Zapraszam do oficjalnego manuala na\n developer.apple.com.\n

\n
2016-05-16 22:00:00 jak-podsluchac-iphona ckbw97zyw0007i3umdszu2ola 2016-05-16 22:00:00 2016-05-16 22:00:00 cioeubwg0005ei3um48ubbii0 Recenzja: Tajniki języka JavaScript. Zakresy i domknięcia https://piecioshka.pl/blog/2016/05/20/recenzja-tajniki-jezyka-javascript-zakresy-i-domkniecia.html

\n Historia zaczęła się na minionym\n WarsawJS,\n gdzie drugim prelegentem był\n Dominik Lubański.\n Prelekcja jest dostępna na kanale\n WarsawJS,\n jednak klikając na\n ten link\n wejdziecie bezpośrednio do momentu, który rozpoczyna moją przygodę\n z YDKJS ("You Don't Know JS").\n

\n\n
\n

Jak to się zaczęło?

\n\n

\n Dominik pod koniec swojej prelekcji powiedział, że "ciśnie" wszystkich\n w swojej firmie, aby przeczytali "od deski do deski" wszystkie książki You Don't Know JS.\n Cenię sobie kompetencje oraz doświadczenie w programowaniu Dominika, dlatego też jego słowa wziąłem sobie\n do serca i pomimo tego, że nie pracujemy razem, to sam przysiadłem do przeczytania YDKJS.\n

\n\n

\n Nigdy nie czytałem YDKJS. Wydawało mi się to zbyteczne. Myślałem sobie:\n

\n\n

\n YDKJS? Kolejna zwykła książka traktująca o JavaScript. Przeczytałem ich tak wiele, że nie zaszkodzi\n jeśli pominę tę serię.\n

\n\n

\n Myślałem tak aż do momentu tej prelekcji.\n

\n\n

\n Postawiłem sobie nowy cel: przeczytać całą serię!\n

\n
\n\n
\n

Dlaczego YDKJS?

\n\n

\n Wydawnictwo Helion.pl trochę pomogło i stworzyło specjalną ofertę promocyjną\n na swojej stronie: helion.pl/seria-JS.phtml,\n gdzie dostępna jest lista 5 książek You Don't Know JS autorstwa\n Kyle Simpsona. Książki, są przetłumaczone na język polski.\n

\n\n

\n Nie będę ukrywał, że książki lepiej mi się czyta w języku ojczystym. Mój poziom angielskiego wystarczy\n mi do komunikacji z obcokrajowcami, ale nie pozwala na płynne (a co najważniejsze, zachowując to samo tempo)\n czytanie podręczników.\n

\n\n

\n Wczoraj na łamach fanpaga WarsawJS zamieściłem link do tej promocji.
\n Nasuwa się pytanie: czy warto?\n

\n\n
\n \n
\n\n

\n Po kilku minutach od publikacji pojawił się komentarz (pod tym wpisem), że książka jest dostępna za darmo na publicznym profilu projektu YDKJS.\n

\n\n

\n To prawda. Projekt dostępny jest tutaj: github.com/getify/You-Dont-Know-JS\n

\n\n

\n Jednak uważam, że prawdziwe czytanie książki jest TYLKO w wersji papierowej.\n

\n\n

\n Tak zostałem wychowany i to już się nie zmieni. Oczywiście nie mówię tego bez porównania.\n Kupiłem sobie jakiś czas temu (może to już 2 lata)\n Kindla. Mam kilka ebooków na nim.\n Jednak... bez rewelacji. Nie czuję tego klimatu. Brakuje mi dotyku papieru. No cóż.\n

\n\n

\n Może i jestem osobą, która lubi nowinki techniczne, jednak książki mają to do siebie, że muszę\n je czuć podczas czytania. Lubię dbać o nie, obkładać szarym papierem jak w bibliotece.\n

\n\n

\n Dobra. Wracamy do meritum!\n

\n\n
\n\n

\n Kilka dni temu kupiłem wszystkie dostępne 5 książek z serii. Szósta książka jest w przygotowaniu\n (pewnie obecnie trwa proces tłumaczenia oryginału). Termin publikacji to sierpień, tego roku.\n

\n\n

\n Przedwczoraj zabrałem się za czytanie i napisałem o tym na Twitterze.
\n Zauważył ją autor książki, Kyle, polajkował i zaretweetował z komentarzem: "Polish translation".\n

\n\n

\n Zrobiło mi się miło. Jemu pewnie również.\n

\n\n \n
\n\n
\n

Jak czytam książki?

\n\n

\n Wspomniana książka składa się z około 100 stron.
\n Więc na przeczytanie całej potrzebuje około 2-3 godzin.\n

\n\n

\n Generalnie, gdy czytam książki to robię sobie notatki, ale nie takie normalne notatki gdzieś obok na kartce.\n Nie piszę również długopisem ani ołówkiem po książce - uważam to za pewnego rodzaju złamanie zasad.\n

\n\n
\n Pisanie długopisem albo ołówkiem po książce to bluźnierstwo!\n Piotr Kowalski\n
\n\n

\n Gdy czytam książki to naklejam stickery (takie małe karteczki), na których notuję jakieś informacje.\n Przykładem niech będzie moja prelekcja na\n "AngularJS Warsaw" nt. mojego podejścia do frameworka AngularJS\n po przeczytaniu dwóch książek. Zobaczcie slajdy.\n

\n\n

Moje notatki

\n\n

\n 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,\n na której karteczka znalazła swoje miejsce.\n

\n\n

\n Może przedstawię te kilkanaście punktów, gdzie chciałem napisać komentarz.\n

\n\n
\n \n\n
\n Sticker 1. Strona 18. Tekst z karteczki: LHS - co jest celem przypisania? RHS - co jest źródłem przypisania?\n
\n
\n\n

\n Co się kryje za terminem LHS? Rozwinięcia tego akronimu próżno szukać w książce.\n Jest za to coś ważniejszego, czyli wytłumaczenie pojęcia. W skrócie chodzi o to, że silnik\n gdy widzi taki kod:\n

\n\n
var a = 5;
\n\n

\n ...wykonuje 2 operacje. Pierwsza to definicja zmiennej:\n

\n\n
var a;
\n\n

\n druga to:\n

\n\n
a = 5;
\n\n

\n Ten drugi etap jest wyciągnięciem zmiennej w trybie do przypisania, czyli LHS
\n Drugi termin, czyli RHS oznacza, że silnik chce użyć zmienną. I tak o to prosty przykład:\n

\n\n
console.log(a);
\n\n

\n Mamy tutaj pobranie wartości zmiennej.\n

\n\n

\n Nigdy nie słyszałem, o takich nazwach trybów dostępu. Oczywiście, używałem obu tych form, jednak nie wiedziałem,\n że jest taka terminologia (zasada działania) zaimplementowana w silniku.\n

\n\n
    \n
  • LHS oznacza Left Hand Side
    • \n
  • RHS oznacza Right Hand Side
    • \n
\n\n

\n Dla dociekliwych, polecam przeczytać wpis opisujący bardziej dokładnie LHS i RHS:
\n https://john-dugan.com/hoisting-in-javascript/\n

\n\n
\n \n\n
\n Sticker 2. Strona 30. Tekst z karteczki: Wyszukiwanie zakresu zostanie zatrzymane po znalezieniu pierwszego dopasowania!\n
\n
\n\n

\n Karteczka czysto informacyjna. Jak silnik nie znajdzie zmiennej w zakresie, gdzie jest żądanie pobrania wartości,\n to szuka w zakresie wyższym. Jeśli znajdzie to przestaje szukać. Chociaż oczywiste, to warto zanotować.\n

\n\n
\n \n\n
\n Sticker 3. Strona 34. Tekst z karteczki: Wyciekająca zmienna globalna (with)\n
\n
\n\n

\n Kto używa with w dzisiejszych czasach? Chyba tylko Firebug.\n Sticker przypomina, że with jest bardzo złe bo, jeśli w obiekcie, który jest brany pod uwagę\n przez with nie znajdziemy właściwości, którą chcemy zaktualizować, to będzie ona ustawiona\n jako globalna. Przykład:\n

\n\n
var dog = {\n    name: ''\n};\nwith (dog) {\n    name = 'doggy';\n    surname = 'what?';\n}\nconsole.log(dog.name); // "doggy"\nconsole.log(dog.surname); // undefined\nconsole.log(window.surname); // "what?"
\n\n
\n \n\n
\n Sticker 4. Strona 46. Tekst z karteczki: ...czyli arrow function to wyrażenie funkcyjne!\n
\n
\n\n

\n Zgadza się! Arrow Function to nie funkcja a wyrażenie funkcyjne!\n Dlaczego? Każda funkcja podczas definicji musi posiadać nazwę, a ze względu na to, że w składni AF\n nie można zdefiniować nazwy to jest to wyrażenie funkcyjne! Dziwne, bo przecież są funkcje anonimowe,\n czyli takie, które nie posiadają nazwy. Temat warty dyskusji.\n

\n\n
\n \n\n
\n Sticker 5. Strona 55. Tekst z karteczki: Ciekawy zabieg wydajnościowy zw. z { }\n
\n
\n\n

\n Uważam to za interesujące, ponieważ w JavaScript mamy zasięg leksykalny, czyli funkcyjny.\n Zasięg zaczyna się na początku definicja funkcji i kończy wraz z jej końcem.\n Wyjątkiem jest konstrukcja try...catch, gdzie w bloku catch mamy zasięg blokowy!\n Czyli od klamerki { do klamerki }.\n

\n\n
try {\n    throw new Error('test');\n} catch (error) {\n    console.log(error); // zmienna `error` jest dostępna TYLKO pomiędzy `{}`\n}
\n\n

\n W specyfikacji ECMAScript 6 mamy wsparcie do zasięgu\n blokowego, gdy definiujemy zmienną wyrażeniami: let albo\n const.\n

\n\n

\n Pewną optymalizacją jest, aby nie definiować zmiennych na początku funkcji (w zasięgu blokowym),\n skoro używamy jej tylko w jednym miejscu. Przykład na pewno rozjaśni sprawę.\n

\n\n
function doSomething() {\n    let e = 0;\n\n    bar(foo);\n\n    var r = 'abc';\n\n    for (let t = 0; t < 3; t++) {\n        setTimeout(function () {\n            console.log(t);\n        }, 400);\n    }\n\n    let startLabel = 'start' + e;\n    let endLabel = 'end' + (10 - e);\n    console.log([startLabel, endLabel])\n}
\n\n

\n Na powyższym przykładzie widać, że zmienna e jest zdefiniowana bardzo wysoko.\n Lepiej od strony wydajności jest zdefiniować ją blisko użycia i opakować w klamerki:\n

\n\n
function doSomething() {\n    bar(foo);\n\n    var r = 'abc';\n\n    for (let t = 0; t < 3; t++) {\n        setTimeout(function () {\n            console.log(t);\n        }, 400);\n    }\n\n    {\n        let e = 0;\n        let startLabel = 'start' + e;\n        let endLabel = 'end' + (10 - e);\n        console.log([startLabel, endLabel])\n    }\n}
\n\n

\n Tworzymy wtedy zasięg TYLKO dla zmiennych e, startLabel i endLabel.\n No i tylko w tym zasięgu zmienna e jest potrzebna. Nie ma sensu jej wciskać do zasięgu zewnętrznego.\n

\n\n
\n \n\n
\n 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)\n
\n
\n\n

\n Może zacytuje kawałek kodu, o którym mowa:\n

\n\n
foo(); // 1\n\nvar foo;\n\nfunction foo() {\n    console.log(1);\n}\n\nfoo = function () {\n    console.log(2);\n};
\n\n

\n Tak to zinterpretuje silnik:\n

\n\n
function foo() {\n    console.log(1);\n}\n\nfoo(); // 1\n\nfoo = function () {\n    console.log(2);\n};
\n\n

\n Interesujący smaczek języka!\n

\n\n
\n \n\n
\n 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!\n
\n
\n\n

\n IIFE to nie domknięcie. Szok. Przez tyle lat tak myślałem.\n Prawdziwe domknięcie polega na tym, że uruchamiamy funkcję z zakresu, gdzie nie ma dostępnej danej zmiennej. Przykład zobrazuje to najlepiej.\n

\n\n
function MyModule() {\n    var secret = 123;\n\n    function getSecret() {\n        return secret;\n    }\n\n    return {\n        getSecret: getSecret\n    };\n}\n\nvar mod = MyModule();\nmod.getSecret(); // Uruchamiamy funkcję, która ma dostęp do zmiennej "secret". Tylko w ten sposób do niej się dobierzemy.
\n\n
\n \n\n
\n Sticker 8. Strona 80. Tekst z karteczki: Piękna definicja wzorca Singleton\n
\n
\n\n

\n Najpopularniejszy wzorzec projektowy, który bardzo często słyszę na rozmowach rekrutacyjnych jako odpowiedź na pytanie:\n A jakie znasz wzorce projektowe? SINGLETON!\n

\n\n

\n Świetny przykład znajduje się na 80-tej stronie. Może skrócę go do wersji minimum:\n

\n\n
var foo = (function () {\n    'use strict'; // tego w książce nie było\n\n    var secret = 12345;\n\n    function getSecret() {\n        return secret;\n    }\n\n    return {\n        getSecret: getSecret\n    };\n}());\n\nfoo.getSecret();
\n\n

\n Pięknie się tworzy takie implementacje.\n

\n\n
\n \n\n
\n Sticker 9. Strona 84. Tekst z karteczki: Błąd: zamiast module foo from "foo"; powinno być import foo from "foo";\n
\n
\n\n

\n No i mamy (niestety) pierwszy błąd w książce, bynajmniej znaleziony przeze mnie.\n Pod koniec 5-tego rozdziału autor chciał opisać moduły w ES6. Nazwa podrozdział "Pyszne moduły".\n Niestety kod źródłowy w przykładzie posiada rażące błędy.\n

\n\n
\n\n

\n Stworzyłem projekt na GitHubie opisujący błędny kod, wraz z kodem poprawionym.
\n Zapraszam do zapoznania się:\n github.com/piecioshka/errors-in-ydkjs-scope-closures-book\n

\n\n
\n\n

\n A o to lista błędów:\n

\n\n
    \n
  1. pierwszy problem to ścieżki, do plików lokalnych trzeba odnosić się poprzez ./ na początku
    2. \n
  2. nie ma w specyfikacji ECMAScript 6 słowa operatora module (taki w stylu import)
    3. \n
  3. nie ma takiej składni eksportowania jak export hello; (lista dostępnych możliwości), trzeba eksportować tak export {hello};
    4. \n
  4. 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)
    5. \n
  5. 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";
    6. \n
\n\n
\n \n\n
\n Sticker 10. Strona 92. Tekst z karteczki: Trochę szkoda, że nikt nie wspomniał o Babel.js\n
\n
\n\n

\n W książce jako transpiler wymieniony byl tylko Traceur.\n Z tego co pamiętam, to ma on zdecydowanie mniejsze pokrycia\n specyfikacji niż Babel.js.\n Babel ma bardzo przyjemne wsparcie do m.in Webpacka i jest zdecydowanie bardziej popularniejszy w społeczności.\n

\n\n
\n \n\n
\n Sticker 11. Strona 94. Tekst z karteczki: TODO: skorzystać z projektu "let-er"\n
\n
\n\n

\n let-er - nowe narzędzie - warto się zapoznać! Projekt autorstwa Kyle Simpsona pozwala na kompilację\n bloku kodu:\n

\n\n
let (x = "foo") {\n    console.log(x); // "foo"\n}
\n\n

\n Do zapisuj znanego nam z ES6:\n

\n\n
{\n    let x = "foo";\n    console.log(x); // "foo"\n}
\n\n

\n Narzędzie posiada opcję konwersji do ES3. Jak już wcześniej wspomniałem,\n w JavaScripcie jest zasięg funkcyjny, z 1 wyjątkiem, konstrukcja\n try...catch, w której mamy zasięg blokowy. Przykład:\n

\n\n
try { throw "foo" } catch (x) {\n    console.log(x);\n}
\n\n

\n Jeżeli chodzi o mnie to projektu raczej nie wykorzystam.\n Nie widzę praktycznego zastosowania.\n

\n
\n\n
\n

Moje doświadczenie

\n\n

\n Może trochę słów o książce. Czytało mi się ją szybko. Nie miałem jakiś\n problemów ze zrozumiem, o co autorowi chodzi. Książka dla mnie jest\n odświeżeniem tematu zakresów i domknięć. Polecam ją każdemu, kto\n zaczyna swoją przygodę z JavaScriptem.\n

\n\n

\n Mam nadzieje, że inne książki z serii będą miały podobny styl.\n Dziękuję Dominik, że zaszczepiłeś we mnie ten pomysł na przeczytanie\n całej serii.\n

\n
2016-05-19 22:00:00 recenzja-tajniki-jezyka-javascript-zakresy-i-domkniecia ckbw97zyw0007i3umdszu2ola 2016-05-19 22:00:00 2016-05-19 22:00:00 ciokk3b40005fi3umgmr96dh5 Recenzja: Tajniki języka JavaScript. Na drodze do biegłości https://piecioshka.pl/blog/2016/05/24/recenzja-tajniki-jezyka-javascript-na-drodze-do-bieglosci.html

\n Przeczytałem kolejną książkę z serii You Don't Know JS\n (YDKJS). Tym razem wziąłem na warsztat książkę pt.\n Tajniki języka JavaScript. Na drodze do biegłości.\n Generalnie, to zacząłem czytanie serii w nieodpowiedniej kolejności.\n Seria YDKJS rozpoczyna się właśnie tą książką, a przeczytałem dopiero\n ją teraz. Mam nadzieje, że przeczytanie jej w drugiej kolejności, zaraz\n po Tajniki języka JavaScript. Zakresy i domknięcia,\n nie będzie stanowiło dla mnie problemu.\n

\n\n

\n Zdradzę Wam sekret. Nie stanowiło.\n

\n\n

\n Autor serii, Kyle Simpson, pod koniec książki stworzył rozdział,\n gdzie opisał pokrótce całą serię i zdefiniował kolejność czytania.\n Przedstawia się ona następująco:\n

\n\n\n\n
\n

Reklama Helionu

\n\n

\n Cała seria dostępna jest\n tutaj. Helion przygotował\n landing page, aby reklamować YDKJS. Świetny pomysł. Uważam, że Helion\n od jakiegoś bardziej dba o marketing, i robi często promocje i oferty\n specjalne. Pamiętam, że jakoś 2-3 lata temu tak niestety nie było.
\n Nawet przed chwilą dostałem maila, pt: "Dzień Matki - skomponuj\n książkowy bukiet w promocji 3za2". Moją mamę, raczej nie\n interesują komputery, więc akurat nie trafili, ale za sam pomysł\n należą się brawa.\n

\n\n

\n Może i reklamuję wydawnictwo Helion swoim wpisem, ale nie widzę w tym\n nic dziwnego. Za dobre rzeczy należą się pochwały.\n

\n\n

\n Helion wykonuje dla nas (programistów) bardzo dobrą robotę.\n

\n\n

\n Każdy popełnia błędy, myślę, że Helion sam też wie, kiedy w książkę\n jest błąd czy to związany z tłumaczeniem, czy błąd merytoryczny, ale\n może wtedy jest już za późno na poprawę? Przecież rzadko, kto z nas\n czyta erraty.\n

\n\n

\n Ważne, aby unikać tłumaczenia kodu źródłowego po polsku. Inaczej można\n uzyskać jakieś "pieseły" albo inne ciekawe polsko-brzmiące słowa.\n

\n
\n\n\n\n
\n

Oryginalna wersja

\n\n

\n W poprzednim\n wpisie\n wyjaśniłem, dlaczego czytam książki po polsku. Jednak nie chciałbym,\n byście mnie żle zrozumieli. Nasza branża rozwija się non stop.\n Codziennie powstają nowe rzeczy dotyczące JavaScript oraz całego\n Front-end-u.\n

\n

\n Jeśli ktoś chce być na bieżąco ze wszystkimi nowinkami technicznymi,\n to musi opanować język angielskim, przynajmniej w takim stopniu, aby\n pozwolił mu czytać, posiłkując się od czasu do czasu słownikiem ang-pol.\n

\n\n

\n Seria książek YDKJS wydana przez Helion, jest po prostu przetłumaczona\n z jakiegoś czasu, kiedy specyfikacja ES6 nie była jeszcze w\n zatwierdzona. Miało to miejsce 17 czerwca 2015 roku. Tak więc, od 11\n miesięcy najnowszy standard nosi nazwę ES2015 (a.k.a. ES6).\n

\n\n

\n Czytając książki z serii YDKJS, możemy czasami widzieć, że autor\n nie był jeszcze pewien jak będzie wyglądała specyfikacja. Często to\n podkreśla, informując czytelnika, że kod może być przestarzały.\n

\n\n

\n Oryginalną wersję YDKJS: Up & Going znajdziecie\n na GitHubie pod tym\n linkiem.\n

\n
\n\n
\n

Moje notatki

\n\n

\n Chciałbym przedstawić teraz moje notatki, które pojawiły się podczas\n czytania TJJS. Na drodze do biegłości. Tym razem przykleiłem\n w książce 17 karteczek znajdując przy tym tylko 2 błędy. Błędy te\n bardziej były wynikiem złego tłumaczenia, niż w braku wiedzy na temat\n JavaScript.\n

\n\n
\n \n\n
\n Sticker 1. Strona 13. Tekst z karteczki: Książka wprowadza do\n programowania. Jest to pierwszy tom z serii YDKJS.\n
\n
\n\n

\n Jak już wspomniałem na początku wpisu, książka jest skierowana\n do wszystkich tych, którzy chcą zacząć swoją przygodę z\n programowaniem od JavaScriptu. Pierwszy tom serii YDKJS\n (w polskim tłumaczeniu TJJS) porusza podstawowe kwestie\n języka, takie jak opis składni, zmiennych, typów, domknięć itd.\n

\n\n
\n \n\n
\n Sticker 2. Strona 14. Tekst z karteczki: Wartość literalna? Co to?\n
\n
\n\n

\n Znalazłem w słowniku PWN informację, że literalny to synonim\n słowa dosłowny.\n

\n\n

\n Myślałem, że literalny to może być tylko obiekt, ale tu chodzi o polskie\n tłumaczenie, gdzie znaczenie jest trochę inne.\n

\n\n
\n \n\n
\n Sticker 3. Strona 23. Tekst z karteczki: "literał" czy to synonim "wartości literalnych"?\n
\n
\n\n

\n Według Wikipedii,\n słowem literał oznaczana jest jednostka leksykalna\n reprezentująca ustaloną wartość (liczbową, tekstową itp.) wpisaną\n przez programistę bezpośrednio w danym miejscu w kod programu.\n (...) Poza tym funkcje anonimowe są literałami dla typu funkcyjnego.\n (...) W przeciwieństwie do literałów, stałe i zmienne\n są identyfikatorami (...).\n

\n\n

\n Po tych wytłumaczeniach dalej bałbym się zastępować określenie\n literał wartością literalna. No trudno. Może kiedyś\n spotkam polonistę, który by mi to wytłumaczył.\n

\n\n
\n \n\n
\n Sticker 4. Strona 24. Tekst z karteczki: koercja? Co to?\n Jakie jest dokładne znaczenie?\n
\n
\n\n

\n Według słownika: koercja - natężenie pola magnetycznego potrzebne\n do rozmagnesowania danego ferromagnetyka. Jaki to ma związek z\n programowaniem? Może jakiś tam pośredni (może pole magnetyczne można\n jakoś zaprogramować, nie wiem). Wydaje mi się, że lepszym słowem\n byłoby użyci po prostu słowa rzutowanie.\n

\n\n

\n Znalazłem jeszcze tutaj,\n zestawienie ze sobą trzech wyrazów: Koercja, konwersja,\n rzutowanie. Jak widać, te wyrazy idą ze sobą w parze. Tak\n też je potraktujmy - jako synonimy.\n

\n\n
\n \n\n
\n Sticker 5. Strona 25. Tekst z karteczki: "kod tworzysz nie tylko\n dla komputera" święta racja!\n
\n
\n\n

\n To zdanie to jest święta racja. Kod, który piszemy, nie piszemy\n dla komputera, on jest dla nas, developerów. Komputer zrozumie dziwną\n składnię, człowiek już nie.
Jestem tego zdania, że kod trzeba\n pisać taki, aby się za niego nie wstydzić, kiedy do Twojego projektu\n dołączy nowa osoba i będzie musiała się w niego wdrożyć.\n

\n\n

\n Bardzo dobrym zwyczajem jest pisać komentarze. Po kilku latach\n doświadczenia z językiem, przyjąłem takie zasady:\n

\n\n
    \n
  • \n w funkcjach, metodach i procedurach, piszę komentarze\n jednolinijkowe\n
    • \n
  • \n nad funkcjami piszę JSDoc, do tworzenia którego wykorzystuję\n komentarze wielolinijkowe,\n korzystając ze specyfikacji tagów. Polecam przejrzeć wszystkie\n wspierane tagi na stronie\n usejsdoc.org.\n
    • \n
\n\n
\n \n\n
\n Sticker 6. Strona 26. Tekst z karteczki: "komentarze powinny\n wyjaśniać dlaczego?, a nie co?"\n
\n
\n\n

\n Kolejna mądrość. Czasami zdarza mi się zobaczyć taki kod:\n

\n\n
// Tworzę nowy obiekt\nvar fred = new Person();
\n\n

\n Jak sens ma ten komentarz? Żaden. Bez sensu jest tworzyć komentarz,\n które opisują co tu się robi. Przecież to widać po kodzie źródłowym.\n Zdecydowane lepiej było napisać tak:\n

\n\n
// Obiekt nowej osoby potrzebny, aby zarządzać jego danymi w procesie xyz.\nvar fred = new Person();
\n\n
\n \n\n
\n Sticker 7. Strona 29. Tekst z karteczki: A czy toFixed\n nie zwraca zawsze stringa?\n
\n
\n\n

\n W książce jest napisane, że: Jeżeli zachodzi konieczność\n to generowany jest ciąg tekstowy (string). Według specyfikacji,\n to toFixed zawsze zwraca stringa, nie tylko gdy zachodzi\n konieczność. Więcej informacji w\n specyfikacji.\n

\n\n
\n \n\n
\n Sticker 8. Strona 45. Tekst z karteczki: void chyba\n przypisując wynik tego operatora do zmiennej\n
\n
\n\n

\n Trochę wyrwane z kontekstu. Nakreślę go Wam. Książka chce określić\n różnice między:\n

\n\n
var a;
\n\n

\n względem:\n

\n\n
var a = undefined;
\n\n

\n Nie ma różnicy.
Na zakończenia akapitu jest zdanie:\n

\n\n
\n Zmienna może przejść do stanu "niezdefiniowanego" na wiele różnych\n sposobów, między innymi na skutek działania funkcji, która nie zwraca\n wartości, i przez użycie operatora void.\n Kyle Simpson\n
\n\n

\n Zrozumiałem to tak, jak by operator void coś robił.\n To nieprawda, no może nie wprost. On zapewnia, że wyrażenie zawsze\n zwróci wartość undefined. Autorowi musiało chodzić\n o taką operację.\n

\n\n
var a = void 0;
\n\n

\n Po wykonaniu takiego kodu, zmienna a również będzie miała\n wartość undefined.\n

\n\n
\n \n\n
\n Sticker 9. Strona 51. Tekst z karteczki: "Operator == sprawdza\n równość wartości wraz z dozwoloną koercją, natomiast === bez\n zezwolenia na koercję"\n
\n
\n\n

\n Bardzo ciekawe wytłumaczenie. Nigdy się z takim nie spotkałem,\n ale to prawda. Operator == nie sprawdza typów ponieważ\n żagluje nimi, sprowadza obie strony do tego samego typu, a potem\n dopiero porównuje. Natomiast operator ===, nie zmienia\n typów. Sprawdza na początku, czy są one takie same. Jeśli nie są to\n od razu zwraca false. Przykład:\n

\n\n
console.log(1 == '1'); // true\nconsole.log(1 === '1'); // false
\n\n
\n \n\n
\n Sticker 10. Strona 52. Tekst z karteczki: Zerknąć do specyfikacji\n ECMAScript 5\n
\n
\n\n

\n Wszystkie reguły koercji znajdziemy w\n specyfikacji,\n w rozdziale\n 11.9.3.\n

\n\n

\n Trzeba koniecznie się temu przyjrzeć!\n

\n\n

\n Algorytm jest trochę skomplikowany, nie będę go tutaj umieszczał.\n Zapraszam do przeczytania. Chociaż raz, każdy developer JavaScript\n powinien ten algorytm przeczytać. Rozumiem, że zapamiętanie całego\n procesu, może być trochę kłopotliwe, ale zawsze możemy posiłkować się\n internetem podczas weryfikacji, jak dokładnie wygląda ten algorytm\n koercji.\n

\n\n

\n No chyba, że jesteśmy na rozmowie rekrutacyjnej, ale to inny temat.\n

\n\n

\n Dodam jeszcze, że ten algorytm jest również w ECMAScript 6.\n

\n\n
\n \n\n
\n Sticker 11. Strona 60. Tekst z karteczki: Czy funkcje można\n deklarować w if-ie?\n
\n
\n\n

\n Dobre pytanie, czy można to robić? Jak sprawa wygląda w Trybie\n ścisłym? Zrobiłem do tego\n projekt\n na GitHubie, obrazujący co się będzie działo, gdy w strict\n mode będziemy próbowali zdefiniować funkcję w instrukcji\n warunkowej.\n

\n\n

\n Zapraszam do zapoznania się z nim:\n github.com/piecioshka/test-define-function-in-if.\n

\n\n
\n \n\n
\n Sticker 12. Strona 66. Tekst z karteczki: "publiczne API"? a może\n być niepubliczne? masło maślane\n
\n
\n\n

\n API czyli Application Programming Interface oznacza pewien\n interfejs, który wcale nie musi być publiczny. Więc można zrobić\n prywatne oraz publiczne API. Więcej można poczytać na\n Wikipedii.\n

\n\n

\n Pisząc tą karteczkę byłem w błędzie i myślałem, że API jednoznacznie\n daje nam do zrozumienia, że jest tylko PUBLICZNE. Po przeczytaniu\n Wikipedii wiem, że tak nie jest. Nie ma tutaj "masła maślanego".\n

\n\n
\n \n\n
\n Sticker 13. Strona 72. Tekst z karteczki: literówka: zamiast\n X !== x powinno być x !== x\n
\n
\n\n

\n Literówki się zdarzają. Jeśli zdarzają się w kodzie, to mogą one\n spędzić nam sen z powiek i zająć nas na bardzo długo. Takie błędy w\n książce, mogą co najwyżej spowodować problemy po przepisaniu kodu z\n książki do komputera.\n

\n\n
\n \n\n
\n Sticker 14. Strona 72. Tekst z karteczki:\n transpiling = transforming + compiling\n
\n
\n\n

\n Dobrze wiedzieć, od czego pochodzi słowo transpiling.\n W dobie transpilacji Babela i innych narzędzi tego typu.\n

\n\n
\n \n\n
\n Sticker 15. Strona 80. Tekst z karteczki: No nie wiem, czy koercja\n jest faktycznie tym, co powinienem używać w JS-ie\n
\n
\n\n

\n Rzutowanie, szczególnie te niejawne, czasami może przysporzyć problemy\n (szczególnie z falsy values). Jednak bez rzutowania\n jawnego daleko byśmy nie "pojechali" w programowaniu w języku JavaScript.\n

\n\n

\n A jak ja konwertuje zmienne? Używam funkcji konstruktorów!
\n Aby np. zrzutować string na number\n używam takiej konstrukcji:\n

\n\n
console.log( Number( '1.1' ) ); // 1.1
\n\n

\n Nie wiem, czemu, ludzie często używają funkcji parseInt\n - ona służy do konwersji na liczbę całkowitą.\n

\n\n
console.log( parseInt( '1.1' ) ); // 1
\n\n
\n \n\n
\n Sticker 16. Strona 83. Tekst z karteczki: destrukcja\n w ES6? chyba destrukturyzacja\n
\n
\n\n

\n Tutaj wina leży po stronie tłumaczenia. Autorowi chodziło\n o destructuring, czyli rozbijcie struktury.\n Zaprezentuje przykład o co chodzi z "destrukturyzacją".\n

\n\n
let [a] = [1, 2];\nconsole.log( a ); // 1
\n\n
\n \n\n
\n Sticker 17. Strona 85. Tekst z karteczki: Kto znajduje się\n w komitecie TC39?\n
\n
\n\n

\n Ostatnia karteczka. Czysto teoretyczna. Jak zdobyć listę członków\n komitetu zajmującego się rozwijaniem naszego ulubionego języka\n programowania? Wystarczy wejść na\n oficjalną stronę,\n na której znajduje się podział względem typu danego członka.\n Najważniejsi to "Ordinary members", czyli firmy, które mają\n największe prawa.\n

\n\n

\n Ordinary members - firmy zainteresowane i mające doświadczenie\n w kwestiach związanych z jednym lub więcej Technicznym Komitetem\n Stowarzyszenia, chcące korzystać z prawa do głosu na zgromadzeniu\n ogólnym i chcące korzystać z innych wyłącznych praw zdefiniowanych w\n Statucie i Regulaminie.\n

\n\n

\n Najlepszym źródłem na zdobycie listy członków w postaci listy osób\n będzie weryfikacja listy obecności w notatkach ze spotkań komitetu.\n Tutaj znajduje się\n projekt z notatkami z regularnych spotkań komitetu w sprawie\n specyfikacji standardu ECMAScript. Notatki z ostatniego spotkania\n możemy przejrzeć tutaj.\n Na liście obecności znajdują się:\n

\n\n
    \n
  1. Dave Herman
    2. \n
  2. Michael Ficarra
    3. \n
  3. Jordan Harband
    4. \n
  4. Adam Klein
    5. \n
  5. Mark Miller
    6. \n
  6. Brian Terlson
    7. \n
  7. Domenic Denicola
    8. \n
  8. Brad Nelson
    9. \n
  9. JF Bastien
    10. \n
  10. Joe Lencioni
    11. \n
  11. Sebastian Markbage
    12. \n
  12. Jeff Morrison
    13. \n
  13. Kevin Smith
    14. \n
  14. Lars Hansen
    15. \n
  15. Saam Barati
    16. \n
  16. Keith Miller
    17. \n
  17. Michael Saboff
    18. \n
  18. Eric Ferraiuolo
    19. \n
  19. Eric Faust
    20. \n
  20. Chip Morningstar
    21. \n
  21. Dean Tribble
    22. \n
  22. Shu-yu Guo
    23. \n
  23. Tim Disney
    24. \n
  24. Waldemar Horwat
    25. \n
  25. Bert Belder
    26. \n
  26. Peter Jensen
    27. \n
  27. Daniel Ehrenberg
    28. \n
  28. Caridy Patiño
    29. \n
  29. Diego Ferreiro Val
    30. \n
  30. Jean Fraucois Paradis
    31. \n
  31. Shelby Hubick
    32. \n
  32. Leo Balter
    33. \n
  33. Misko Hevery - autor Angular.js
    34. \n
  34. Allen Wirfs-Brock
    35. \n
  35. Kevin Gibbons
    36. \n
  36. Steven Lumis
    37. \n
  37. Zibi Braniecki
    38. \n
\n\n

\n Dość długa lista. Pewnie niepełna. Ktoś nie przyszedł. Nie szkodzi,\n przynajmniej teraz już widzę, ilu ludzi zaangażowanych jest w rozwój\n języka JavaScript.\n

\n
\n\n
\n

Podsumowanie

\n\n

\n O książce Tajniki języka JavaScript. Na drodze do biegłości\n mogę wypowiedzieć się w samych superlatywach. Pięknie opisuje ona\n podstawy i motywuje do tego, aby zacząć programować w JavaScript już\n dziś!\n

\n\n

\n Jak dla mnie, porusza ona ciut za mało tego co znajduje się w języku,\n ale może po prostu tak myślę, ze względu na doświadczenie w tej\n branży. Nie wiem. Grube lektury nigdy nie zachęcają.\n

\n\n

\n Kolejną książką którą opiszę na łamach mojego bloga będzie:\n Tajniki języka JavaScript. Wskaźnik this i prototypy obiektów.\n

\n
2016-05-23 22:00:00 recenzja-tajniki-jezyka-javascript-na-drodze-do-bieglosci ckbw97zyw0007i3umdszu2ola 2016-05-23 22:00:00 2016-05-23 22:00:00 -cioouev40005gi3um0qh654o0 Popularny błąd w obsłudze zdarzeń w JS https://piecioshka.pl/blog/2016/05/27/popularny-blad-w-obsludze-zdarzen-w-js.html

\n Chciałbym dzisiaj przedstawić problem z jakim możecie się spotkać podczas obsługi zdarzeń.\n Naturą języka jest asynchroniczność, spotykana jest w wielu miejscach.\n Asynchroniczne zapytania do serwera, czyli AJAX, to technika bardzo popularna w dzisiejszych czasach.\n

\n\n

\n Pewnym rodzajem asynchroniczności są też zdarzenia aplikacji. Częsty problem początkujących developerów objawia się tym,\n że próbują oni dostać się do DOMu, kiedy nie jest on jeszcze załadowany.\n Trzeba wtedy skorzystać z window.onload (albo lepszej formy window.addEventListener('DOMContentLoaded', ...').
\n Ewentualnie można skorzystać z load (window.addEventListener('load', ...) jeśli event DOMContentLoaded nie jest wspierany.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Customowe eventy

\n\n

\n Customowe eventy, to bardzo popularny wzorzec w aplikacjach webowych. Zdarzenia te nie są wyzwalane przez interakcję użytkownika,\n tylko przez samą aplikację. Dobrym przykładem może być zapytanie do serwera.\n

\n\n

\n Zerknijmy na taki kod:\n

\n\n
function ajax(url) {\n    var req = new Request(url);\n    req.on('load', function () {\n        Request.emit('success');\n    });\n    req.on('error', function () {\n        Request.emit('error');\n    });\n}
\n\n

\n Mamy zapytanie do serwera, gdzie na zakończenie wyzwolone zostanie odpowiednie zdarzenie.\n Kiedy zapytanie się powiedzie, zostanie wyzwolone zdarzenie success,\n w przypadku błędu - error.\n

\n\n

\n Chcielibyśmy teraz skorzystać z funkcji ajax, aby pobrać dane dotyczące użytkownika.\n Wykonujemy więc taki kod:\n

\n\n
Request.once('success', (response) => {\n    loadUserProfile(response);\n});\nRequest.once('error', () => {\n    loadFailUserPage();\n});\najax('/user');
\n\n

\n Nasłuchujemy na 2 zdarzenia:\n

\n\n
    \n
  • na poprawne pobranie danych z serwera wyświetlamy profil użytkownika
    • \n
  • kiedy zapytania zakończy się niepowodzeniem wyświetlamy błąd załadowania profilu
    • \n
\n\n

\n Na pierwszy rzuta oka nie ma tutaj nic dziwnego. A jednak. Co jeśli skorzytamy z funkcji ajax w innym miejscu?\n Chcemy pobrać zawartość kategorii produktów w sklepie internetowym, korzystając oczywiście z funkcji ajax.\n

\n\n
Request.once('success', (response) => {\n    loadCategory(response);\n});\nRequest.once('error', () => {\n    loadErrorCategoryPage();\n});\najax('/category/1234');
\n\n

\n Mamy problem. Dlaczego? Bo nie wyrejestrowaliśmy handlerów z pierwszego zapytania.\n Powiecie: "No ale przecież używamy tam once, to handler sam się wyrejestruje po wykonaniu zdarzenia."\n Zgadza się, ale tylko użyty handler się wyrejestruje. Nigdy nie będzie sytuacji, że zapytanie uruchomi\n dwa zdarzenie success i error.\n

\n\n
\n \n\n
\n Diagram z opisywaną sytuacją. Zakreśliłem problem jaki się pojawił owalem.\n
\n
\n
\n\n
\n

Rozwiązanie problemu

\n\n

\n Jest kilka rozwiązań opisywanego przeze mnie problemu. Najlepsze (dla użytego kodu) jest takie,\n aby w dowolnym handlerze wyrejestrować oba handlery.\n

\n\n
function categoryHelperSuccess(response) {\n    loadCategory(response);\n    clearCategoryHelpers(); // Usuwamy niepotrzebne handler\n};\n\nfunction categoryHelperError() {\n    loadErrorCategoryPage();\n    clearCategoryHelpers();\n};\n\n// Usuwamy nasłuchiwanie na zdarzenia: success i error,\n// aby zapobiec problemowi uruchamiania niepotrzebnych handlerów.\nfunction clearCategoryHelpers() {\n    Request.off('success', categoryHelperSuccess);\n    Request.off('error', categoryHelperError);\n};\n\nRequest.once('success', categoryHelperSuccess);\nRequest.once('error', categoryHelperError);\n\najax('/category/1234');
\n\n

\n Najlepsze rozwiązanie leży u podstaw tego kodu. Nie należy zapisywać się na zdarzenia obiektu współdzielonego.\n Wtedy nie będzie problemu. Lepsze rozwiązania w tym przypadku to używanie Promise-ów albo callback-ów.\n

\n\n
\n\n
\n

Testowy projekt

\n\n

\n Stworzyłem na potrzeby tego artykułu projekt na GitHubie.\n Chciałem pokazać Wam jak na faktycznym kodzie, objawia się opisywany przeze mnie problem.\n

\n\n

\n Wystarczy uruchomić przykład w przeglądarce (plik demo/index.html), albo w terminalu uruchomić polecenie node index.js,\n aby zobaczyć opisywany problem. Poniżej zrzut ekranu z błędem.\n

\n\n
\n \n\n
\n Błąd, który pojawi się w konsoli po stworzenie opisywanej\n architektury.\n
\n
\n
2016-05-26 22:00:00 popularny-blad-w-obsludze-zdarzen-w-js ckbw97zyw0007i3umdszu2ola 2016-05-26 22:00:00 2016-05-26 22:00:00 -ciot4qf40005hi3umds119kwf Fish - shell przyjazny każdemu https://piecioshka.pl/blog/2016/05/30/fish-shell-przyjazny-kazdemu.html

\n Powodem dla którego napisałem ten post jest przedstawienie ciekawej powłoki terminala, konkurenta\n domyślnej bash w taki sposób, aby szybko zacząć korzystanie z niego.\n Fish to o nim mowa.\n

\n\n

\n Nazwa jest interesująca, jednak tu nie chodzi o jakiekolwiek ryby. Rozwinięciem akronimu jest\n Friendly Interactive Shell. Przychylam się do tej nazwy. Powłoka jest bardzo elastyczna.\n Możliwości konfiguracyjne są bardzo duże, jest ona zdecydowanie łatwiejsza w porównaniu z domyślnym\n bashem - Bourne-Again Shell.\n

\n\n
\n Fish\n\n
\n Oficjalne logo powłoki.\n
\n
\n\n
\n

Jak zacząć?

\n\n

\n Od kilku lat używam OSXa. Ten artykuł będzie więc pisany z perspektywy programisty\n korzystającego na co dzień z tego systemu.\n

\n\n

\n Jestem jednak przekonany, że konfiguracja powłoki Fish, wygląda podobnie na wszystkich systemach Unixowych.\n Kilka lat temu moim podstawowym systemem był Linux, na którym też skonfigurowałem Fisha.\n

\n\n

\n Najprzyjemniejsza instalacja pakietów zawsze będzie zorientowana na wykorzystaniu managera pakietów.\n Jeśli chodzi o system OSX to nie ma takiego managera w domyślnej instalacji.\n Ze swojej strony polecam instalację Homebrew.\n Bardzo prosty i wolny od błędów, przynajmniej podczas mojego kilkuletniego doświadczenia.\n

\n\n

Instalacja

\n\n

\n Proces instalacji skupia się na wydaniu w terminalu takiego polecenia:\n

\n\n
$ brew install fish
\n\n

\n Po samej instalacji możemy przełączyć się na nową powłokę wykonując polecenie fish.\n Jednak idźmy krok dalej. Skonfigurujmy środowisko tak, aby zmienić domyślną powłokę.\n Aby uniknąć błędu:\n

\n\n
ERROR: /usr/local/bin/fish: non-standard shell
\n\n

\n należy w pliku /etc/shells, w którym znajduje się lista ze wspieranymi shellami,\n dodać nowy rekord ze ścieżką do Fisha. Edytujemy plik poleceniem:\n

\n\n
$ vim /etc/shells
\n\n

\n oraz dodajemy taką linijkę:\n

\n\n
...\n/usr/local/bin/fish\n...
\n\n
\n
Skąd wiem jaka jest ścieżka do pliku binarnego?
\n
Nie wiem, ale wydając polecenie which fish dostaniemy ścieżkę do pliku fish.
\n
\n\n

Zamiana domyślnego shella

\n\n

\n Do zmiany domyślnej powłoki dla obecnie zalogowanego użytkownika, korzystamy z polecenia:\n

\n\n
$ chsh -s `which fish`
\n\n

\n Parametr -s wymaga wskazania ścieżki do shella, uzyskujemy go dodając polecenie which fish\n otaczając je znakami backtick.\n

\n\n
\n\n
\n

Konfiguracja powłoki Fish

\n\n

\n Każdy shell posiada możliwość konfiguracji "pod siebie", czyli tak, aby praca w nim była przyjemnością,\n a nie udręką. Na przykład tworzenie aliasów skraca czas wpisywania tych samych komend.\n Główny plik konfiguracyjny dla powłoki Fish znajduje się w pliku:\n

\n\n
$ vim ~/.config/fish/config.fish
\n\n

\n Jeśli taki plik nie istnieje, to nie ma problemu, abyśmy go stworzyli.\n Uzupełnijmy konfigurację o podstawowy edytor powłoki. Oczywiście będzie nim Vim.
\n W pliku config.fish wpisujemy poniższą linijkę:\n

\n\n
set -U EDITOR vim
\n\n

\n Tworzy ona uniwersalną zmienną $EDITOR. Po restarcie powłoki,\n pod zmienną środowiskową $EDITOR będzie znajdował się edytor Vim.\n Dlaczego to jest takie ważne? Wiele narzędzi korzysta z tej zmiennej,\n aby użyć edytora podczas swoich prac, np. polecenie git commit korzysta z domyślnego edytora,\n aby zaprezentować developerowi zmiany w projekcie (jeśli takie istnieją).\n

\n\n

\n Bardzo prosty przykład pliku konfiguracyjnego ~/.config/fish/config.fish\n

\n\n
# Setup default editor\nset -u editor vim\n\n# Disable default greeting message\nset fish_greeting\n\n# Load private aliases\nsource ~/.aliases
\n\n
\n\n
\n

Vim na Fishu?

\n\n

\n Aby uniknąć błędu:\n

\n\n
syntastic: error: your shell /usr/local/bin/fish can't handle traditional UNIX syntax for redirections
\n\n

\n Trzeba do konfiguracji Vima, czyli w pliku .vimrc ustawić domyślną powłokę\n

\n\n
set shell=bash
\n\n

\n Więcej o błędzie można przeczytać w tym issue.\n

\n
\n\n
\n

Pytania i odpowiedzi

\n\n
\n
Jakie są zalety?
\n
\n Zalet jest dużo. Największe zalety to: duża społeczność, autosugestie, proste skrypty z konfiguracją, podpowiadanie mana.\n
\n\n
Jakiego języka trzeba używać pisząc skrypty dla Fisha?
\n
\n Pisząc skrypty będziemy używali shella według składni Posix.\n
\n\n
Gdzie jest miejsce na trzymanie konfiguracji powłoki?
\n
\n Plik ze wszelką konfiguracją związaną z Fishem znajduje się w katalog ~/.config/fish/.\n Główny plik konfiguracyjny jest w tym katalogu pod nazwą config.fish.\n
\n\n
Jakie rozszerzenie jest wymagane, aby skrypt był brany pod uwagę przez powłokę Fish?
\n
\n Nie ma żadnego wymaganego rozszerzenia. Można w katalogu ~/.config/fish/functions/\n tworzyć pliki z dowolnym rozszerzeniem, a nawet bez niego.\n
\n\n
Czy nazwa pliku w katalogu ~/.config/fish/functions/ ma znaczenie?
\n
\n Tak. Nazwa pliku musi odpowiadać funkcji, która zostanie dodana to środowiska i będzie dostapna\n jako polecenie. Rozszerzenie nie jest ważne.\n
\n\n
Czy można w konfiguracji config.fish definiować funkcje?
\n
\n Nie. Tam definiuje się tylko pojedyncze ustawienia - każde w innej linii.\n Funkcje definiujemy w katalogu ~/.config/fish/functions/.\n
\n\n
Jak zmienić domyślny prompt?
\n
\n Wystarczy stworzyć plik ~/.config/fish/fish_prompt.fish i stworzyć w nim funkcję\n o nazwie fish_prompt. Przykład:\n\n
function fish_prompt\n    echo ' > '\nend
\n
\n\n
Co to jest fish_right_prompt?
\n
\n prompt jest to tzw. znak zachęty. Znajduje się on zawsze po lewej stronie.\n Od tej wartości zaczyna się linia w której na końcu mam ustawiony kursor, gdzie możemy coś wpisać.\n Jednak co jeśli chcielibyśmy wpisać coś po prawej stronie? Mamy możliwość poprzez funkcję:\n\n
function fish_right_prompt\n    echo (date '+%H:%M:%S)\nend
\n\n

\n Jak to będzie wyglądało w praktyce? Poniżej przykład.\n

\n\n
\n \n\n
\n Powyższa funkcja w praktyce.\n
\n
\n\n

\n Więcej detali można znaleźć w\n oficjalnej dokumentacji.\n

\n
\n
\n
\n\n
\n

Ciekawostki

\n\n

Design

\n\n

\n Rzadko kiedy spotyka się tak dobrze zapisane zasady projektu, jak ma to miejsce w przypadku Fisha.\n Pełna lista praw i zasad dostępna jest tutaj.\n W dokumencie znajduje się lista następujących praw: "The law of orthogonality", "The law of responsiveness",\n "The law of user focus" oraz "The law of discoverability".\n

\n\n

\n Bardzo ciekawym prawem jest zasada, że jeśli wystąpi sytuacja,\n że 2 rozwiązania jest zaimplementowane podobnie, ale nie są\n identyczne, to jedno z nich trzeba usunąć a to drugie ulepszyć. Taka\n zasada powinna panować w każdym managerze paczek, np. w npm.\n Tylko kto by weryfikował każdą paczkę?\n

\n\n

\n Kolejne ciekawe prawo mówi, żeby doprowadzić do sytuacji, aby w jak najkrótszym czasie nowy użytkownik\n stał się ekspertem w danym narzędziu. Jest to oznaką zaprojektowania szybkiego wykrywania / odnajdywania\n nowych opcji programu. Każda funkcja powinna posiadać komentarz, aby była bardziej zrozumiała, jeszcze\n przed użyciem.\n

\n\n

Zdarzenia

\n\n

\n Bardzo ciekawe jest to, że powłoka umożliwia nam nasłuchiwania na zdarzeniach.\n Pierwszy raz spotykam się z taką możliwości, że np. jedno polecenie / narzędzie emituje zdarzenie,\n a inne nasłuchuje na nie i się uruchamia.
\n

\n\n

\n Więcej w tym temacie jest dostępne tutaj.\n

\n
\n\n
\n

Mój sposób na dotfiles

\n\n

\n W dzisiejszych czasach, developerzy mają swoje serwery np. na\n hosting, vps-y. Tam też chcielibyśmy mieć fish shella.\n Jak przenieść całą konfigurację na serwer?\n

\n\n

\n Pomysłem jest stworzenie projektu dotfiles z naszą\n konfiguracją środowiska pracy. Wystarczy na serwerze (miejscu\n docelowym) pobrać repozytorium i rozpropagować konfigurację w\n odpowiednie miejsce.\n

\n\n

\n Ze względu na liczbę konfiguracji środowiska większą niż 1 plik,\n warto skorzystać z narzędzia rsync, które zadba od\n skopiowanie / nadpisanie plików z projektu dotfiles\n w zdefiniowane przez nas miejsce. Osobiście używam takiego polecenia\n do instalacji konfiguracji powłoki Fish:\n

\n\n
$ rsync -rv ~/projects/dotfiles/.config/fish/* ~/.config/fish/
\n\n

\n Ze względu na tak długie polecenie polecam stworzyć sobie skrypt shellowy, w którym wyżej wymieniona linijka\n znajdzie swoje miejsce. Dzięki takiemu skryptowi będzie możliwość dodania jeszcze innych konfiguracji,\n np. Vima, Gita.\n

\n\n
\n\n\n

•

\n\n\n
\n

Źródła warte przeczytania

\n\n \n\n

\n Dobra wiadomość dla użytkowników Windowsa
\n Dostępna jest opcja FISHa z Cygwinem!\n

\n
2016-05-29 22:00:00 fish-shell-przyjazny-kazdemu ckbw97zyw0007i3umdszu2ola 2016-05-29 22:00:00 2016-05-29 22:00:00 -cipua6kg0005ii3umgyti4gul AngularJS Warsaw #8 https://piecioshka.pl/blog/2016/06/25/angularjs-warsaw-8.html

\n W minioną środę zawitałem z kolegą na warszawskie Włochy, gdzie w siedzibie firmy Microsoft odbyło się kolejne\n spotkanie z Angularem, czyli AngularJS Warsaw.\n

\n\n

\n Na spotkanie zapisało się 133 osoby i przyszło około 80. Taka prawidłowość występuje zawsze.\n Nigdy na spotkania nie przychodzi dokładnie tyle osób ile się zapisuje.\n Ale tak jest zawsze w życiu, chociażby zaproszenia na wesele. Zostaje zaproszonych 200 osób, a przychodzi 150.\n

\n\n\n\n

\n Link do wydarzenia: meetup.com/AngularJS-Warsaw/\n

\n\n

\n Podczas spotkania wysłuchaliśmy 4 prelekcji. A jedną z nich poprowadził nawet organizator całego zamieszania, Darek Kalbarczyk.\n Wszystkie prelekcje były zorientowane na framework AngularJS autorstwa\n Misko Havery'ego, Adam Abrons'a, pracujących w organizacji Google.\n

\n\n
\n

Talk #1: Tworzenie aplikacji wielojęzykowych w AngularJS Bartłomiej Narożnik

\n\n

\n Prelegent, został przedstawiony przez Darka (organizatora) jako jeden z najlepszych programistów z którymi pracował.\n

\n\n

Zarządzenie wielojęzykowością

\n\n
    \n
  • Podejście monarchistyczne - tylko tłumaczenie języka
    • \n
  • Podejście anarchistyczne - osobny Front-end
    • \n
  • Podejście federalistyczne - wspólna cześć, ale dla każdej kultury dostosowujemy aplikacje
    • \n
\n\n

Narzędzie angular-translate

\n\n
    \n
  • Obsługuje większość tego co oferuje Angular
    • \n
  • Parametryzacja
    • \n
  • Można przetłumaczyć całe fragmenty HTMLa
    • \n
  • Można dodać obsługę błędów
    • \n
\n\n

\n Instalacja bardzo prosta, wystarczy zdefiniować:\n

\n\n
    \n
  1. Zależność
    2. \n
  2. Język
    3. \n
  3. Struktura translacji (JSON)
    4. \n
\n\n

\n Dobrze się obsługuje, gdy mamy service. Jednakże filter również pasuje.\n Dyrektywa jest najbardziej popularna w użyciu.\n

\n\n

Zmienne w tłumaczeniach

\n\n

\n Trzeba podawać dodatkowo wartości tych zmiennych np. translate-values w dyrektywach.\n

\n\n

Zmiana języka

\n\n

\n Metoda use(key), gdzie key to klucz z językiem.
\n Uruchomienie metody bez parametru zwróci obecnie używany język.\n

\n\n

Pluralizacja

\n\n

\n Obsługuje messageformat.js.\n

\n\n

Obsługa błędów

\n\n

\n Jeśli jest problem z tłumaczeniem, np. jeśli klucz nie ma swojego\n odpowiednika, możemy dostać console.warn() z tego\n tytułu, albo też możemy zdefiniować swój handler.
Mamy mnóstwo\n zdarzeń, na które możemy nasłuchiwać, więc można stwierdzić,\n że możliwości są ogromne.\n

\n\n

Bezpieczeństwo

\n\n
    \n
  • angular-sanitize (z modułu)
    • \n
  • albo po prostu escape
    • \n
\n\n

\n Zalecane jest aby używać angular-sanitize.\n

\n\n

Jak wykryć język?

\n\n

\n Funkcja determinePreferredLanguage\n

\n\n
navigator.languages[0]\nnavigator.language\nnavigator.browserLanguage\nnavigator.systemLanguage\nnavigator.userLanguage
\n\n

\n Język z jakim jest zainstalowana przeglądarka, co nie koniecznie jest wystarczające,\n np. w dużych firmach mamy zainstalowane z domyślnymi ustawieniami (ang) a przecież mówimy po polsku.\n

\n\n

\n Lepsze rozwiązanie to parsowanie nagłówka HTTP "Accept-Language", gdzie wystarczy zmienić język w przeglądarce,\n wtedy będziemy mieli zawsze poprawny język odpowiadający preferencjom użytkownika.\n

\n\n Czas trwania 19:05 - 19:20 + 3\n
\n\n\n

•

\n\n\n
\n

Talk #2: AngularJS. Najczęściej zadawane pytania na rozmowie kwalifikacyjnej Dariusz Kalbarczyk

\n\n

\n Darek razem z Bartkiem przygotowują razem książkę o tytule takim jak tytuł tej prelekcji.\n

\n\n

Skąd pomysł na książkę?

\n\n

\n Ostatnimi czasy Darek rekrutował całymi dniami w Katowicach i Szczecinie kandydatów na developerów\n do firm, gdzie projekty oparte były na AngularJS.
\n Po przeprowadzonych rozmowach postanowił zebrać wszystkie pytania w jedno miejsce i napisać książkę.\n

\n\n

\n Według Darka, pracodawca poszukuje pracowników według takich 3 kryteriów:\n

\n\n
    \n
  • 33% - czy ma to czego firma oczekuje?
    • \n
  • 33% - czy mu się w ogóle chce?
    • \n
  • 33% - jak się sprawdzi w zespole?
    • \n
\n\n
\n \n\n
\n Darek Kalbarczyk opowiada o nowej książce, którą piszę razem ze swoim kolegą z pracy.\n
\n
\n\n

Seria pytań

\n\n

1. Dlaczego warto używać Angulara?

\n\n

\n Odp. z sali: "Jest pocięty", ale jest komponentyzacja, która przekłada się na testy,\n

\n\n

2. Czy angular jest zależny od jquery

\n\n

\n Odp. z sali: nie jest zależny, ponieważ posiada jqLite, czyli takie podstawy z biblioteki jQuery,\n jeśli jednak jQuery będzie dostępne przed osadzeniem Angulara, to wykorzysta on metody obiektu jQuery.\n

\n\n

3. Wymień najważniejsze cechy Angulara.

\n\n

\n Odp. z sali: moduły, SPA, i ... reszta cech.\n

\n\n

4. Co to są moduły w Angularze?

\n\n

\n Odp. z sali: Kontenery, podobne do przestrzeni nazw. Możemy definiować zależności.\n

\n\n

5. Jakie komponenty możemy definiować w modułach?

\n\n

\n Odp. z sali: kontrolery, dyrektywy, configi.\n

\n\n

6. Jak nazywa się moduł główny Angulara?

\n\n

\n Odp z sali: ng - moduł główny, ładowany domyślnie, podczas startu aplikacji.\n

\n\n

7. Jak Angular ładuje zależności?

\n\n

\n Odp. z sali: Dependency Injection.\n

\n\n

8. Kiedy są ładowane moduły zależne?

\n\n

\n Brak odpowiedzi.\n

\n\n

9. Co to jest globalne API?

\n\n

\n Odp. z sali: Metody obiektu angular, np. angular.copy.\n

\n\n

10. Jaka jest różnica jest pomiędzy prefiksem $ a $$?

\n\n

\n Odp. z sali: W Angularze za pomocą $ oznaczone są właściwości publiczne obiektu, a z $$ prywatne.\n

\n\n

11. Co to jest $scope i $rootScope?

\n\n

\n Odp. z sali:\n

\n\n
    \n
  • $rootScope jest to najwyższy rodzaj $scope (główny)
    • \n
  • $scope - obiekt skleja kontroler i widok.
    • \n
  • $scope-y mogą być zagnieżdżane.
    • \n
  • $rootScope.$new może tworzyć niezwiązane z niczym scope-y, można go zapakować w service i traktować jako obsługa sygnałów.
    • \n
\n\n

12. Wyjaśnij różnice pomiędzy ng-if oraz ng-show?

\n\n

\n Odp. z sali: ng-if usuwa z DOM, a ng-show korzysta ze styli CSS do ukrycia elementu.\n

\n\n

13. Jakie specjalne zmienne udostępnia ngRepeat?

\n\n

\n Odp. z sali: last, first, even, odd, index, middle.\n

\n\n

14. Co to jest i jak działa ng-include?

\n\n

\n Odp. z sali: Dyrektywa służy do ładowania plików statycznych. Niestety, ale nie można z innej domeny.\n

\n\n

15. Co jest szybsze $digest czy $apply?

\n\n

\n Odp. z sali: $digest jest szybszy bo jedzie tylko w dół.
\n $apply w górę i w dół.\n

\n\n

16. Jak działa funkcja $destroy dla danego zakresu?

\n\n

\n Odp. z sali: Usuwa $scope z pamięci.\n

\n\n

17. Jaka jest różnica pomiędzy $watch i $observe?

\n\n

\n Odp. z sali:
\n - $watch można wykorzystywać w dyrektywach w funkcji link i kontrolerach
\n - $observe tylko w dyrektywach w obiekcie attrs.\n

\n\n

18. Wymień metody serwisu $http?

\n\n

\n Odp. z sali: $get, $head, $post, $put, $delete, $jsonp, $patch\n

\n\n

19. Wymień metody wspierane przez serwis $resource?

\n\n

\n Odp. z sali: $get, $save, $query, $remove, $delete.\n

\n\n

20. Które dyrektywy wspierają animacje?

\n\n

\n Odp. z sali: ng-show, ng-if, ...\n

\n\n

21. Co to jest IIFE?

\n\n

\n Na to pytanie ja odpowiedziałem! Chciałem chociaż raz móc odpowiedzieć. Przy mojej znajomości Angulara (brak realizacji żadnego projektu)\n powiedziałem, że IIFE to pewnego rodzaju $scope dla Angulara.
\n Generalnie o IIFE można opowiadać i opowiadać, a odpowiedzi musiały być jak najbardziej trafne.\n

\n\n

\n Każda poprawna odpowiedź kończyła się otrzymaniem od organizatorów drobnych upominków.\n Według mnie jest to bardzo miły gest.\n

\n\n Czas trwania 19:30 - 19:50\n
\n\n\n

•

\n\n\n
\n

Talk #3: Host your AngularJS app like a PRO! Tomasz Wiśniewski

\n\n

\n Prelekcja sponsorowana.\n

\n\n

\n Tomasz opowiadał o Azure App Service.\n Usługa jest za darmo do 10 produkcyjnych aplikacji internetowych.\n

\n\n

\n Prelekcja zachęciła mnie do skorzystania z tego narzędzia! Także, spróbujmy dać szansę.\n Zachęcam do podzielenia się wnioskami w komentarzach.\n

\n\n Czas trwania 19:50 - 20:20\n
\n\n\n

•

\n\n\n
\n

Talk #4: Ionic kreator. Interfejs szybko łatwo i przyjemnie. Dariusz Biedrzycki

\n\n

\n Tworzenie UI w ionic-u jest żmudne oraz nudne, dlatego powstał Ionic Creator, który to ma "interfejs webowy".\n

\n\n

Kiedy ja używam takiego kreatora?

\n\n
    \n
  • Zaczynam projekt - wyklikując go
    • \n
  • Tworzę nowy template
    • \n
\n\n

\n Darek pokazuje jak się obsługuje kreator Ionica. Opisuje plusy i minusy tego narzędzia na żywo.\n Co prawda miał przygotowane slajdy, ale publiczność opowiedziała się za prezentacja z użyciem właściwego narzędzia.\n

\n\n

Zalety

\n\n
    \n
  • Szybkie tworzenie formularzy w aplikacji mobilnej
    • \n
  • Klient od razu widzi projekt
    • \n
\n\n

Minusy

\n\n
    \n
  • Nie da się wgrać do kreatora własnego projektu
    • \n
  • W bezpłatnej wersji można zrobić tylko 1 projekt
    • \n
  • Statyczny routing, czyli nie można parametryzować ścieżek
    • \n
\n\n Czas trwania 20:28 - 20:57\n
\n\n
\n

Podsumowanie

\n\n

\n Jako organizator WarsawJS cieszę się, że w warszawskiej społeczności\n developerów JavaScript, powstają nowe organizacje związane z tym językiem.\n

\n\n

\n Jako osoba lubiąca interakcje międzyludzkie, staram się być obecny\n na większości meetupów, nie zawsze mi się to udaje, ale jeśli jestem\n uczestnikiem takiego wydarzenia, to na 90%, kilka dni po wydarzeniu\n pojawi się wpis zawierający moje notatki ze spotkania.\n

\n\n

\n Najbliższe spotkanie AngularJS Warsaw odbędzie się za około 2 miesiące,\n na które organizatorzy serdecznie zapraszają!\n

\n
2016-06-24 22:00:00 angularjs-warsaw-8 ckbw97zyw0007i3umdszu2ola 2016-06-24 22:00:00 2016-06-24 22:00:00 -cipvpmf40005ji3um14hy54r4 WarsawJS Meetup #21 https://piecioshka.pl/blog/2016/06/26/warsawjs-meetup-21.html

\n Spotkanie organizacji WarsawJS odbyło się 11 maja\n w Państwomiasto. Wysłuchaliśmy trzech prelekcji o JavaScript. Ten meetup\n był szczególny pod trzema względami.\n

\n\n

\n Po pierwsze, na scenie widzieliśmy pasjonata Fizyki, Andriya\n Mykulyaka, który to opowiadał o najatrakcyjniejszym ostatnimi czasy dla\n mnie narzędziu Webpack.\n

\n\n

\n Po drugie, kolejną prelekcję po prowadził Dominik Lubański,\n który to opowiedział o prototypowaniu w JavaScript. Temat jest bardzo\n szeroki. Prelekcja zakończyła się krótką historią o serii książek\n YDKJS. Dominik powiedział, że w swojej firmie mocno ciśnie\n wszystkich, aby przeczytali całą serię. Ze względu, że nigdy nie\n przeczytałem choć jednego tomu, to postanowiłem, że zbiorę się w sobie i\n przeczytam cała, 6-cio tomową, serię. Zacząłem czytać i tak powstały\n 2 wpisy na blogu:\n

\n\n\n\n

\n Więcej postów z tej serii, już wkrótce!\n

\n\n

\n No i po trzecie! Ten meetup był bardzo atrakcyjny z\n jeszcze jednego powodu. Na warszawskiej scenie pojawiła się pierwsza dziewczyna.\n Paulina Kamińska opowiadała o bibliotece gsap.js, która to\n pomaga przy tworzeniu animacji.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Ze względu na moment w którym nagrywaliśmy zapowiedź, a było to na początku maja,\n postanowiliśmy upamiętnić naszą flagę państwową!\n

\n\n

\n Całą zapowiedź nagrywaliśmy sprzed budynku Warsaw Spire, nowo otwartego wówczas wieżowca w centrum miasta.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: Webpack - co to jest i z czym go jeść? [PL] Andriy Mykulyak

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Is there inheritance or delegation? [PL] Dominik Lubański

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: gsap.js, czyli animowanie bez CSS [PL] Paulina Kamińska

\n\n

\n Paulina jest była pierwszą prelegentką podczas meetupów WarsawJS.\n Dodatkowo, pierwszy raz opowiadała przed publicznością, więc myślę, że należą jej się pochwały!\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-06-25 22:00:00 warsawjs-meetup-21 ckbw97zyw0007i3umdszu2ola 2016-06-25 22:00:00 2016-06-25 22:00:00 -cipx529s0005ki3umaywk1ncq WarsawJS Meetup #22 https://piecioshka.pl/blog/2016/06/27/warsawjs-meetup-22.html

\n To już 22 spotkanie! Szybko leci. Tak się zastanawiając, to między każdym meetupem WarsawJS\n są tylko 4 tygodnie = 4 poniedziałki. To bardzo krótki okres czasu dla organizatorów, aby podczas spotkania\n wszystko zagrało jak powinno. Ale wiecie co? Mi się to podoba!\n

\n\n

\n Lubię pomagać ludziom, którzy chcą pomocy.\n A tak sobie tłumaczę, że Ci którzy przychodzą, chcą się rozwijać. Cieszę się, że mogę takim ludziom\n pomagać rozwijać ich wachlarz umiejętności. Rozwój swoich umiejętności to proces ciągły. Trwa on całe życie.\n A najfajniejsze w tym wszystkim jest to, że można zacząć rozwijać się jako developer w dowolnym wieku!\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Tym razem na sportowo! Lubię jeździć na deskorolce, to pomyślałem, że zabiorę Was na jeden z wielu\n warszawskich skateparków. W Parku Szymańskiego jest taki mini skatepark - jeden z pierwszych jaki poznałem.\n

\n\n
\n \n\n
\n Skatepark w Parku Szymańskiego.\n
\n
\n\n

\n Czerwcowe spotkanie zaowocowało w trzy prelekcje. Pierwsza i ostania były po angielsku.\n Generalnie to zazdroszczę prelegentom, którzy wychodzą na scenę i opowiadają kilkadziesiąt minut\n po angielsku. Muszą na pewno czuć się pewnie w tym języku. Także\n Artur, Tomasz - chapeau bas!\n

\n\n

\n Profil wydarzenia na portalu Meetup.com dostał\n mnóstwo komentarzy z pochwałami, czyli prelekcje podobały się nie tylko mi! To zawsze cieszy organizatorów.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: Node like a pro [EN] Artur Siery

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Back to the future - async JS handling [PL] Maciej Pawluk

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: JavaScript + Java = TypeScript [EN] Tomasz Ducin

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-06-26 22:00:00 warsawjs-meetup-22 ckbw97zyw0007i3umdszu2ola 2016-06-26 22:00:00 2016-06-26 22:00:00 -ciq1fdts0005li3umejl4ee79 Konferencja: PolyConf 2016 https://piecioshka.pl/blog/2016/06/30/konferencja-polyconf-2016.html

\n Zaiste - człowiek legenda.\n To dzięki niemu co roku mamy możliwość uczestniczenia w konferencji\n PolyConf (dawniej\n RuPy). Osobiście uczestniczyłem w PolyConf\n po raz pierwszy. Forma niewiele odbiega od wcześniej wspomnianego RuPy.\n Świetna przygotowanie od strony organizatorów. Tego można się spodziewać,\n od ekipy, która to robi już 10 lat.\n

\n\n

\n Konferencja trwała 3 dni: od 30 czerwca do 2 lipca, 2016 roku.\n

\n\n
\n \n\n
\n PolyConf 2016: June 30 - July 2, Poznań, Polska\n
\n
\n\n

\n Do Poznania dotarliśmy w składzie: Ja, Kamil Kiełbasa oraz Krzysztof\n Syrytczyk samolotem. Świat pięknie wygląda z perspektywy ptaka!\n

\n\n
\n \n\n
\n Widok na Poznań, z samolotu.\n
\n
\n\n

\n Poznań, to piękne miasto. A najładniejsze miejsce to chyba rynek.\n

\n\n
\n \n\n
\n Rynek poznański.\n
\n
\n\n
\n

Dzień 1

\n\n

\n Pierwszy dzień zaczęliśmy od tego co często robię, czyli poranny trening biegowy.\n Bieganie jest świetnym sposobem na rozpoczęcie dnia. Kiedy człowiekowi nie chce się iść do pracy,\n to po kilku kilometrach podnosi się poziom endorfin we krwi\n i od razu jest większa energia na wszystko.\n

\n\n
\n \n\n
\n Poranne bieganie pierwszego dnia konferencji. Trening na Endomondo:\n https://www.endomondo.com/users/15939217/workouts/756612189\n
\n
\n\n
\n \n\n
\n Identyfikator uczestnika.\n
\n
\n\n

\n Jak zwykle, kiedy jestem na konferencji (albo meetupie) to robię notatki.\n Jeśli jesteś zaciekawiony gdzie one są to zapraszam Cię do repozytorium\n na moim profilu na GitHubie: github.com/piecioshka/notes-polyconf-2016\n

\n\n

\n Pierwszy na scenie pojawił się organizator.\n Opowiadał on o swojej roli w organizacji oraz podziękował wszystkim za przybycie\n i zaprosił do uczestniczenia przez kolejne 3 dni w świetnym wydarzeniu.\n

\n\n
\n \n\n
\n Organizator - Zaiste.\n
\n
\n\n

\n Jak to na każdej konferencji do zebrania jest kilka giftów dla uczestników.\n Najlepszym jest oczywiście oryginalna naklejka z logiem konferencji.\n

\n\n
\n \n\n
\n Naklejki z logiem konferencji.\n
\n
\n\n

\n Dzień pierwszy konferencji zakończyliśmy w barze oglądając mecz Polska - Portugalia.\n Niestety w karnych przegraliśmy. W sercu pojawił się smutek. Jednak nie wolno\n zapominać, że doszliśmy tak wysoko - to przecież Ćwierćfinał Mistrzostw Europy.\n

\n
\n\n
\n

Dzień 2

\n\n

\n Drugi dzień zaczęliśmy świetnymi prelekcjami. Natomiast podczas przerwy obiadowej\n mogliśmy zagrać w bubble soccer.\n

\n\n
\n \n\n
\n Tak wygląda wielka kula do której się wchodzi aby wziąć udział w rozgrywkach Bubble Soccera.\n
\n
\n\n

\n Jedzenie i piecie podczas konferencji to bardzo ważne elementy. Człowiek z nudów nie ma co ze sobą zrobić.\n Nuda pojawia się, nie ze względu na słabe prelekcje, tylko na brak interakcji.\n Jeśli siedzimy 8 godzin i nic nie musimy robić, tylko słuchać, to siłą rzeczy ziewanie to normalne zjawisko.\n

\n\n

\n Organizatorzy wiedzą, że programiści lubią smakołyki, więc\n zorganizowali pyszne desery, które mi osobiście MOCNO przypadły go\n gustu i zjadłem ich 3.\n

\n\n
\n \n\n
\n Deser.\n
\n
\n\n

\n Ostatnim wykładem drugiego dnia był talk o projekcie Seif, który poprowadził Douglas Crockford.\n

\n\n
\n \n\n
\n Spotkanie z Douglas-em Crockford-em.\n
\n
\n\n

\n Na zakończenie dnia, zrobiliśmy sobie zdjęcie z Douglasem:\n

\n\n \n
\n\n
\n

Dzień 3

\n\n

\n Trzeciego dnia mieliśmy panel lightning talków, podczas których mogliśmy usłyszeć JavaScript!\n

\n\n
\n \n\n
\n Muzyka i efekty specjalne były zrealizowane dzięki odpowiednim bibliotekom w JavaScript.\n
\n
\n
\n\n
\n

Lesson learned, czyli czego się nauczyłem?

\n\n

\n Wskazówki do slajdów:\n

\n\n
    \n
  • na pierwszym slajdzie link do wersji online oraz do Twittera
    • \n
  • na każdym slajdzie w prawym dolnym rogu Twitter username
    • \n
\n\n

\n Bardzo dziękuję organizatorom, za włożone siły w organizację tak dużego przedsięwzięcia jakim jest\n konferencja ze speakerami z najwyższej półki.\n

\n\n
\n \n\n
\n Piękne niebo nad Warszawą.\n
\n
\n
2016-06-29 22:00:00 konferencja-polyconf-2016 ckbw97zyw0007i3umdszu2ola 2016-06-29 22:00:00 2016-06-29 22:00:00 -ciqmuzls0005mi3um5yn45d8s WarsawJS Meetup #23 https://piecioshka.pl/blog/2016/07/15/warsawjs-meetup-23.html

\n Po raz 23-ci zebraliśmy się aby posłuchać co piszczy w JS-ie. Standardowo mieliśmy 3 prelekcje.\n Tym razem zrobiliśmy (my, organizatorzy) jednak coś czego jeszcze nie było wcześniej...\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Postanowiliśmy, że nagramy sprzed Pałacu Kultury, gdzie umówiliśmy się z Mistrzem Polski w Trialu rowerowym - Michałem Nowakiem.\n Zapraszam w imieniu Michała do odwiedzenia jego fanpage:\n facebook.com/michalnowaktrial/\n

\n\n

\n Wpadliśmy na pomysł, że nagramy 2 zapowiedzi. Jedną standardowo po polsku, drugą natomiast w języku angielskim.\n Takie nagranie będzie celowało w zaproszenie na meetup osób anglojęzycznych.\n Z naszej dwójki to Piotr lepiej włada angielskim,\n więc zapowiedź w tym języku jest w całości opowiedziana przez niego.\n

\n\n

\n Zapraszam do oglądania! Szczególnie warto obejrzeć do końca! 💥\n

\n\n \n\n

\n I teraz "to samo" ale po angielsku.\n

\n\n \n
\n\n
\n

Talk #1: You don't need React to use virtual DOM [EN] Illarion Koperski

\n\n

\n Illarion przedstawił przykład użycia virtual-dom-a bez użycia React-a.\n Virtual DOM to pomysł. Idea, która została zaciągnięta do wielu bibliotek.\n Najpopularniejszą z nich jest oczywiście React - pewnie dlatego, że autorami biblioteki\n są nasi koledzy z firmy Facebook.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Building bulletproof and maintainable JS apps [EN] Michał Załęcki

\n\n

\n Michał opowiadał o nowych technologiach webowych, które pomagają nam, programistom, stworzyć\n kuloodporne aplikacje. Prelegent na co dzień pracuje we Wrocławiu i jest organizatorem\n React.js Wrocław oraz pracuje w\n woumedia.\n

\n\n

\n Usłyszeliśmy o tym co to jest MVC i jak się ten wzorzec rozwinął,\n do takiego stopnia, że powstał Flux i Redux. Zdaniem Michała nie są\n to najlepsze technologie, wkrótce powstaną jeszcze lepsze. Co\n ciekawe, prelegent uważa, że i jest wiele innych języków, które są\n lepsze od JavaScript-u.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: SOA and REST - Tying the knot [EN] Robert Kawecki + Damian Cikowski

\n\n

\n Panowie we dwóch wyszli na scenę i zainscenizowali scenkę. Rozmawiali o doborze technologii do nowej\n aplikacji typu enterprise, czyli bardzo bogatej w funkcjonalności. Panowie doszli do wniosku, że skorzystają z:\n

\n\n
    \n
  • DDD
    • \n
  • CQRS
    • \n
  • Event sourcing - services returns event
    • \n
  • SOAP JSON-RPC over WebSocket
    • \n
  • Client library: esdf-ws-client
    • \n
  • Single service that emulates HTTP GET for performance
    • \n
  • Universal language: RQL
    • \n
\n\n
\n \n\n
\n Prosto ze slide–ów: https://rkaw92.github.io/warsaw-soa-rest/\n
\n
\n\n

GUI

\n\n
    \n
  • Task-based UI
    • \n
  • React.js: actions - commands
    • \n
  • Event handlers in Flux stores mapped 1:1 to Domain Events
    • \n
\n\n
\n Architektura GUI został dobrana do aplikacji, a nie odwrotnie.\n Robert Kawecki 2016-07-13\n
\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-07-14 22:00:00 warsawjs-meetup-23 ckbw97zyw0007i3umdszu2ola 2016-07-14 22:00:00 2016-07-14 22:00:00 -cis6l5ts0005si3um1rmrezs6 WarsawJS Meetup #24 https://piecioshka.pl/blog/2016/08/23/warsawjs-meetup-24.html

\n No i mamy kolejne spotkanie "fanatyków" JavaScript-owych! Oczywiście, w pozytywnym tego słowa znaczeniu.\n Tym razem spotkaliśmy się 10 sierpnia w Państwomiasto\n i wysłuchaliśmy trzech prelekcji o JS-ie.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Ze względu na piękne słońce oraz niesamowite widoki tym razem wybraliśmy się na dach\n Biblioteki Uniwersyteckiej w Warszawie.\n Z dachu widać mnóstwo pięknych krajobrazów - świetne miejsce do nagrywania wideo, ale również do zwiedzania.\n Z tego też powodu, nie było łatwo nagrywać. Ciężko się skupić, gdy koło Ciebie kręci się mnóstwo ludzi.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: 9 demonów programisty JS [PL] Cezary Walenciuk

\n\n

\n Pierwsza prelekcja nie poruszała konkretnego kodu, ani biblioteki. Była ona z rodzaju tych miękkich.\n Uważam, że takie prelekcji pobudzają równie mocno do myślenia co stricte techniczne prelekcje.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: React w świecie nawiasów: ClojureScript, reagent [EN] Daniel Janus

\n\n

\n Daniel, doświadczony programista obecnie wykonujący swój zawód w firmie Rebased,\n opowiedział o Reagencie, czyli wykorzystaniu biblioteki React.js w języku ClojureScript.\n Niestety, ale Reagent nie rozwiązuje wszystkich problemów, ze względu na to, że jest on tylko prezentacyjną warstwą.\n

\n\n

\n Kolejne narzędzie omawiane podczas prelekcji to\n re-frame. Które to\n rozwiązuje problem braku innych warstw. Dzięki re-frame mamy unidirectional data flow.\n

\n\n

\n Ciekawostka: W ClojureScript nigdy nie napiszemy funkcji w stylu shouldComponentUpdate,\n ponieważ wszystko w tym języku jest pure.\n

\n\n
\n re-frame makes the code maintainable.\n Daniel Janus. 2016-08-10\n
\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: NativeScript: Gentle Introduction [PL] Paweł Kondraciuk

\n\n

\n Paweł - developer z Białegostoku. Człowiek, który wypalił się\n zawodowo w Pythonie przeszedł do Front-end-u.\n

\n\n
\n Nie ma HTML-a, nie ma DOMu.\n Paweł Kondraciuk. 2016-08-10\n
\n\n

\n Prelegent zrobić demo, korzystając z emulatora. Gdzie pokazał "mięso", czyli przykładowy projekt.\n Dowiedzieliśmy się, że JavaScript jest uruchomiony w UI Thread, dzięki temu JS ma dostęp do obiektów Java-owych.\n Stąd też kod zaprezentowany na poniższym listing uruchomi się bez błędu.\n

\n\n
// Android\nvar time = new android.text.format.Time();\ntime.set(1, 0, 2015);\nconsole.log(time.format("%D"));\n\n// iOS\nvar alert = new UIAlertView();\nalert.message = "Hello world!";\nalert.addButtonWithTitle("OK");\nalert.show();\n\n// https://pawelkondraciuk.github.io/warsawjs-nativescript/
\n\n

\n Dzięki Pawłowi dowiedzieliśmy się, że największą zaletą korzystania z NativeScript\n jest bardzo dużo wspólnego kodu - jeden wspólny codebase\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-08-22 22:00:00 warsawjs-meetup-24 ckbw97zyw0007i3umdszu2ola 2016-08-22 22:00:00 2016-08-22 22:00:00 -cisdqd340005ti3um3xvfdp7o Konferencja: Frontend Union Conf 2016 https://piecioshka.pl/blog/2016/08/28/konferencja-frontend-union-conf-2016.html

\n Dzisiejsza historia zaczyna się w litewskiej stolicy Wilnie, gdzie razem z Kasią\n polecieliśmy na konferencję Frontend Union Conf.\n

\n\n

\n Konferencja odbyła się dnia 2016-08-27 o godzinie: 10:00\n w budynku starego teatru? pod adresem ŠILTADARŽIO G. 6, w Wilnie.\n

\n\n

\n Niestety nie robiłem notatek, więc post nie będzie mocno techniczny.\n

\n\n
\n \n\n
\n Panorama miasta\n
\n
\n\n

\n Jako organizatorzy WarsawJS zostaliśmy zaproszeni na konferencję przez jednego ze współorganizatorów,\n Andreya.\n Dodam jeszcze, że Andrey jest organizatorem MoscowJS Meetup.\n

\n\n
\n

Wilno - piękne polskie miasto

\n\n \n\n

\n Była to nasza pierwsza wizyta, w tymże "polskim" mieście. Pierwszy dzień poświęciliśmy na zwiedzanie\n 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:\n

\n\n
    \n
  • litewskim
    • \n
  • rosyjskim
    • \n
  • i polskim
    • \n
\n\n
\n \n\n
\n Najstarszy kościół jaki w życiu widziałem. Powstał w XIV wieku.\n
\n
\n\n

\n Podczas zwiedzania kościołów, przez przypadek byliśmy świadkiem nabożeństwa, które było odprawiane po polsku,\n gdzie wiara modliła się za naród polski. Było to dla nas z jednej strony szokujące, z drugiej naturalne.\n

\n\n
\n \n\n
\n Miejsce gdzie mieszkał Adam Mickiewicz.\n
\n
\n\n

\n Wracając do meritum.\n

\n
\n\n
\n

Konferencja

\n\n

\n Konferencja nie była mocno popularna, tzn. sala na której siedzieliśmy mogła spokojnie pomieścić, jeszcze raz\n tą samą liczbę obecnych osób. Nie ma to większego znaczenia dla uczestników. Może bardziej dla organizatorów.\n

\n\n

\n Merytoryczna część talków była świetna. Na scenie pojawiły się takie gwiazdy jak:\n

\n\n \n\n

\n Ostatnia prelekcja nie poruszała tematyki technicznej, a bardziej społeczną.\n Otóż prelegent - Oleg Podsechin @olegpodsechin - wyszedł na scenę\n jako organizator meetupu HelsinkiJS.\n

\n\n

\n Oleg bardzo mnie zaciekawił swoim wystąpieniem, ze względu na to, że opowiadał o swoich doświadczeniach\n z organizowaniem meetup-ów. Mega interesujące jest zebrać dostać feeback o tym jak rosną inne społeczności JS-owe.\n

\n\n

\n Bardzo ciekawie i mądrze opowiadał o tym jak należy organizować meetupy, aby wiara przychodziła i wszyscy byli zadowoleni.\n Oleg przedstawił ciekawą listę:\n

\n\n
\n \n\n
\n Lista rzeczy, które należy zrobić, aby zorganizować meetup.\n
\n
\n\n

\n W sumie to zgadzam się, ze wszystkim co opowiadał. Ta lista to takie minimum.\n

\n
\n\n
\n

After party

\n\n

\n Po konferencji przyszedł czas na After party, które odbyło się na patio budynku przy którym była sala konferencyjna.\n Poniżej możecie zobaczyć drinki, które były dostępne w barze. Najmocniejszy to debugger. Hmm. Polecam.\n

\n\n
\n \n\n
\n Lista drinków.\n
\n
\n\n

\n Na konferencji poznaliśmy Martynę z Touk, która na poprzednim WarsawJS\n wygrała bluzę ufundowaną przez jednego ze sponsorów naszej organizacji,\n czyli firmę Softwarely.\n

\n\n \n
\n\n
\n

Podsumowanie

\n\n

\n Bardzo dziękujemy organizatorom za poświęcony czas i włożone siły w\n organizację konferencji. Nauczyłem się wielu rzeczy - po to w sumie\n ludzie uczęszczają na konferencje i meetupy: aby poznawać nowych ludzi,\n oraz aby poznawać nowe technologie.\n

\n\n \n
2016-08-27 22:00:00 konferencja-frontend-union-conf-2016 ckbw97zyw0007i3umdszu2ola 2016-08-27 22:00:00 2016-08-27 22:00:00 -cit20ukg0005vi3umgfi68jgv WarsawJS Meetup #25 - 2 urodziny :birthday: https://piecioshka.pl/blog/2016/09/14/warsawjs-meetup-25.html

\n Jak ten czas szybko leci? To już 2 lata od kiedy rozpoczęliśmy spotykać się regularnie\n i rozmawiać o JavaScript w naszym pięknym mieście, Warszawie.\n Podczas WarsawJS Meetup #25 gościliśmy około 100 osób, także sala wypchana po brzegi.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Jak wyglądały przygotowania?

\n\n

Rozstanie się z Rebased 1 września

\n\n

\n Jedną z pierwszych rzeczy które zrobiliśmy, to niestety rozstanie się\n z jednym z naszych sponsorów, firmą\n Rebased. Software house nie\n rekrutuje do swojego zespołu już developerów JavaScript, więc\n sponsorowanie imprezy, która ma na celu popularyzację tego języka\n wydaje się już nie mieć sensu.\n

\n\n

Nagranie zapowiedzi 1 września

\n\n

\n Tego samego dnia pojechaliśmy całą ekipą na most Józefa Poniatowskiego, gdzie korzystając\n z dobroci zachodzącego słońca oraz pięknej panoramy miasta nagraliśmy zapowiedź na kolejne\n spotkanie.\n

\n\n

\n Jeszcze tego samego dnia udało mi się skończyć 1 etap przy montażu, mianowicie\n synchronizację audio i wideo ze wszystkich źródeł. Proces trwał około 3-4h.\n

\n\n

\n Kolejnego dnia w piątek (02-09-2016), zacząłem wybierać sceny, które są miarę\n i mogą pójść do konkursu scen spośród których wybiorę te najlepsze, które zostaną\n na finalnej wersji zapowiedzi. Proces trwa zawsze długo. Tym razem ze względu\n na krótki czas nagrywania, który trwał około 4h.\n

\n\n

\n 03-09-2016. Kolejny dzień montowania. To już trzeci. A wersja finalna zapowiedzi jeszcze daleko.\n Według scenariusza, chciałem aby ta zapowiedź była trochę inna.\n

\n\n

\n Chciałem dodać do tej zapowiedzi 3 specjalne bonusy:\n

\n\n
    \n
  • historię WarsawJS - czyli jak to wszystko się zaczęło + zeszłoroczne urodziny
    • \n
  • przewodnik, o co chodzi z "żetonami" podczas WarsawJS, czyli jak z nich skorzystać
    • \n
  • oraz chciałem wymienić wszystkich zeszłorocznych prelegentów
    • \n
\n\n

\n Na dokończenie zapowiedzi w sobotę poświęciłem cały dzień (ok. 7h). Po tych godzinach miałem\n już dość komputera i pojechałem trochę się rozerwać na zakupach 😄\n

\n\n

Publikacja zapowiedzi 5 września 2016

\n\n

\n Niedzielę poświęciłem na delikatny odpoczynek. Zresztą publikowanie w niedzielę zapowiedzi\n nigdy nie wiązało się z dużym zainteresowaniem, więc publikację zaproszenia w formie wideo\n przesunąłem na poniedziałek.\n

\n\n

\n Ciekawi mnie jak będzie wam podobał się wynik mojej 14-godzinnej pracy.\n Tego dnia stworzyłem też wydarzenia w social mediach.\n

\n\n

Załatwienie tortu

\n\n

\n Razem z Kasią poszukaliśmy cukierni, gdzie mogliśmy zamówić sobie spersonalizowany tort.\n Znaleźliśmy cukiernię ale-tort.pl na Saskiej Kępie.\n Świetna lokalizacja i świetna strona skusiły nas do zakupu.\n

\n\n

\n Piękny tort odebraliśmy w dniu urodzin - na kilka godzin przed głównym wydarzeniem.\n Jesteście ciekawi jak się prezentował?\n

\n\n \n
\n\n
\n

Invitation

\n\n

\n Zapraszam do oglądania :exclamation:\n

\n\n \n
\n\n
\n

Talk #1: New collections in JS (from ECMAScript 2015): Map, Set, WeakMap, WeakSet [PL] Piotr Kowalski

\n\n

\n Przygotowania do prelekcji zacząłem ok. 2 tygodnie przed terminem.\n Stworzenie samych slajdów to dość żmudny proces, który zawsze owocuje\n idealnymi slajdami, na które już nie chce się patrzeć.\n

\n\n

\n Temat na prelekcję narodził się, kiedy mój kolega miał problem ze swoją implementacją.\n Zerknąłem na kod i od razu zacząłem robić slajdy, aby pokazać jak można dany problem\n rozwiązać lepiej korzystając z dobrodziejstw\n ECMAScript 2015, a dokładnie kolekcji\n Map, Set, WeakMap\n i WeakSet.\n

\n\n

\n Stworzyłem około 70 slajdów głównych oraz około 10 slajdów moimi osobistymi wskazówkami.\n Te dodatkowe slajdy dodałem z myślą o krótkim lightning talku, który chciałem wygłosić.\n

\n\n

\n W poniedziałek i wtorek przed środowym meetupem przeprowadzałem testy przed kamerą.\n

\n\n
\n \n\n
\n

1 próba przed WarsawJS Meetup #25

\n
\n
\n\n
\n \n\n
\n

2 próba przed WarsawJS Meetup #25

\n
\n
\n\n

\n Jak widzicie prelekcje oscylowały w około 30 minut. Niestety, ale główna prelekcja trwała około 50 minut.\n Zdaje sobie sprawę, że jest to zdecydowanie za długo. Człowiek nie jest w stanie utrzymać uwagi\n przez tak długi okres. Jednak mogę trochę się wybronić tym, że mój sposób na prelekcję był taki\n aby wciągnąć publiczność w dyskusję. Wydaje mi się, że te kilkanaście zadanych pytań może potwierdzić,\n że mi się udało!\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Writing your first Amazon lambda using JS [EN] Piotr Zientara

\n\n

\n Piotr od początku sygnalizował mi, że chce zrobić live coding.
My, organizatorzy wiemy jedno:\n live coding ZAWSZE stwarza problemy. Zawsze jest jakiś nieprzewidziany problem, który niweczy\n poczynania speakera. Całe szczęście ten live coding przeszedł bez problemu. Za co chwała Piotrowi!\n

\n\n

\n Mój imiennik opowiadał jak stworzyć pierwszą lambdę na Amazon S3 korzystając z naszego pięknego\n języka - JavaScript.\n

\n\n

\n Prelekcja odbywała się po angielsku. Jestem zawsze pod wrażeniem osób, które są wstanie wyjść\n na scenę i powiedzieć coś w obcym języku. Mogę sobie tylko wyobrazić jak duży stres towarzyszy\n takiemu prelegentowi.\n

\n\n \n
\n\n
\n

Lightning talks

\n\n

\n Po prelekcji Piotra Zientary, wyszedłem jeszcze na lightning talka. Skorzystałem z moich przygotowanych\n slajdów, jednak kolejny raz nie zmieściłem się w czasie. Ta w teorii krótka prelekcja trwała\n ponad 3 razy dłużej niż zakładałem, czyli około 15 minut (sic!).\n

\n\n

\n Przepraszam wszystkich, których tak długo trzymałem na zakończenie eventu!\n

\n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-09-13 22:00:00 warsawjs-meetup-25-2-urodziny-birthday ckbw97zyw0007i3umdszu2ola 2016-09-13 22:00:00 2016-09-13 22:00:00 -cit3gaf40005wi3um7hvfbama Konferencja: Codemotion Warsaw 2016 https://piecioshka.pl/blog/2016/09/15/konferencja-codemotion-warsaw-2016.html

\n Dziś miałem przyjemność bycia uczestnikiem na konferencji\n Codemotion Warsaw 2016 jako partner tego eventu\n z ramienia WarsawJS. Nawiązaliśmy współpracę aby wymienić się w Social Mediach. Nieskomplikowany układ:\n my reklamujemy Ciebie, a Ty nas.\n

\n\n

\n Główną organizatorką była Agnieszka,\n która na co dzień pracuje w firmie Touk. Agnieszka jest znana z tego, że dość\n często coś organizuje, nie tylko w stolicy naszego kraju, ale też w innych miastach.\n

\n\n

\n 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\n czynników bilet możesz kupić taniej albo drożej. Jednym z takich czynników jest czas. Im wcześniej kupisz bilet\n tym jest tańszy, oraz im więcej biletów kupisz naraz to masz zniżkę.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n

\n Z każdej konferencji przywożę zbiór technologicznych notatek, które później wrzucam na GitHuba jako projekt.\n Tym razem nie było wyjątkowo, bo i z tej konferencji listę moich technicznych notatek, znajdziecie na moim\n profilu na GitHubie. Dokładny adres do albumu z notatkami wygląda tak: github.com/piecioshka/notes-codemotion-warsaw-2016.\n

\n\n

\n Zapraszam do zapoznania się. Reszta część wpisu będzie bardziej społeczno-organizacyjna.\n

\n\n
\n

Miło spędza się czas w dobrym towarzystwie

\n\n

\n Na konferencję pojechaliśmy we 3 z naszej firmy, oraz jeden kolega z zaprzyjaźnionej firmy.\n Lokalizacja była idealna. Centrum miasta. Może trochę miałem problemy, aby znaleźć kino,\n ze względu na to, że nigdy w nim nie byłem.\n

\n\n \n\n

\n Całe kino Atlantic było wynajęte, aby konferencja mogła toczyć się\n własnym życiem. 4 duże sale kinowe w których non stop były prowadzone\n prelekcje. Nie jestem do końca zwolennikiem kilku jednoczesnych sesji\n wykładowych, bo co mam zrobić, gdy będą ciekawiły mnie co najmniej\n 2 tematy, które są obecnie poruszane?\n

\n\n \n\n

\n Pierwszy talk był projekcie ConceptMap. Jego prelegentem była\n bardzo znana osobistość w świecie Javy - pan James Weaver - autor kilku książek o Javie.\n

\n\n

\n Najważniejszą rzeczą jaką wyniosłem z tej prelekcji była informację, że Wikipedia, na bazie której projekt map\n był omawiany, jest częścią organizacji WikiMedia.\n

\n\n

\n Kolejny talk jaki wybrałem, był o połączeniu się do urządzenia podłączonego przez protokół USB.\n Mocno hardware-owa prelekcja. Myślałem, że będzie inaczej. Nie interesują mnie jakoś mocno tematy hardware-owe.\n

\n\n \n\n

\n Najlepszymi dla mnie prelekcjami były te poprowadzone przez Nira Kaufmana.\n Nir pracuje w firmie 500tech. Co ciekawe podczas tej konferencji, Nir był podwójnym prelegentem.\n Pierwszy talk był o tym jak Angular 2 współpracuje z Redux-em. Nawet nie źle te 2 moduły ze sobą współpracują.\n Nie sądziłem, że można zrobić taką hybrydę.\n

\n\n

\n Natomiast druga prelekcja była o dekoratorach w JavaScript (nowa składnia, która nie jest jeszcze zatwierdzona).\n Mogę się tylko domyślać, jak Nir musiał być zmęczony po 2 wygłoszonych prelekcja podczas jednego dnia konferencji.\n Ciekawi mnie jak długo się przygotowywał do tych 2 talków.\n

\n\n \n\n

Najlepsza prelekcja

\n\n

\n Najlepiej wygłoszoną prelekcją podczas konferencji Codemotion Warsaw pt. "Regex fundamentals" była wykonana\n przez Juliette Reinders Folmer. To dzięki tej prelekcji zrozumiałem\n kilka ważnych aspektów z życia wyrażeń regularnych.\n Pani Juliette jest autorką kursu na temat fundamentów w RegExp. Link do slajdów: https://speakerdeck.com/jrf/regex-fundamentals.\n

\n\n

\n Podczas naszych testów używaliśmy narzędzia\n https://regexper.com/, które\n tłumaczy jak działa dane wyrażenie regularne.\n

\n\n

\n To dzięki Julii nauczyłem się co to jest Non-Capturing Groups. To jest taki typ regexpa,\n który nie szuka pojedynczych grup, tylko cały blok o który nam chodzi. Może dla jasności zademonstruje\n to na przykładzie:\n

\n\n
// Typo match-owanie\n/color=(red|green|blue)/.exec('color=red,green');\n// => ["color=red", "red"]\n\n// Match-owanie z użyciem NCG\n/color=(?:red|green|blue)/.exec('color=red,green');\n// => ["color=red"]
\n\n \n
\n\n
\n

Podsumowanie

\n\n

\n Gorące podziękowania składam na ręce organizatorom, na których czele stała Agnieszka Cieśla!\n Zazdroszczę jej, że ma już tak duże doświadczenie w realizacji takich event-ów.
\n Może kiedyś będzie konferencja naszej organizacji WarsawJS. Czas pokaże.\n

\n\n \n
2016-09-14 22:00:00 konferencja-codemotion-warsaw-2016 ckbw97zyw0007i3umdszu2ola 2016-09-14 22:00:00 2016-09-14 22:00:00 -civ4dw0w00061i3umf05nf3ew WarsawJS Meetup #26 https://piecioshka.pl/blog/2016/11/05/warsawjs-meetup-26.html

\n To już 26-te nasze spotkanie! Mi jako organizatorowi jest bardzo miło\n "gościć" tyle osób, które bez przymusu, z chęcią przychodzą w drugą środę\n miesiąca do Państwomiasto,\n aby posłuchać ciekawostek, nowinek, dobrych praktyk w języku JavaScript.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Zaproszenie dość szczególne. Dostałem od mojego działu drona-zabawkę. Chciałem go wykorzystać aby dodać\n czegoś nowego do naszych zapowiedzi. Może i dron-zabawka, ale świat z 4-5 metrów wygląda inaczej.\n

\n\n

\n Ciężko mi było w te kilka minut lotu nagrać jakieś ciekawe ujęcie. Dodałem do zapowiedzi te, które wyszły\n najlepiej, czyli najstabilniej.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: Web Components. Are we there yet? [PL] Dominik Lubański

\n\n
\n Elementy w HTML mogę być: Semantyczny, funkcjonalny, czy też wizualny.\n Dominik Lubański. 2016-10-12\n
\n\n

\n Elementy mogą być definiowanie deklaratywne, czyli zapisanie w pliku HTML.\n

\n\n

\n Komunikacja z API elementów, które są bardziej skomplikowane i posiadają swoje metody może polegać\n na uruchomieniu imperatywnym (rozkazującym).\n

\n\n

\n 4 specyfikacje w połączeniu definiują Web Component-y:\n

\n\n
    \n
  • Shadow DOM
    • \n
  • Custom Elements
    • \n
  • Templates
    • \n
  • HTML Imports
    • \n
\n\n
\n Shadow DOM uruchamiamy imperatywnie. Nie możemy deklaratywnie\n stwierdzić, że element gdzieś ma Shadow DOM.\n Dominik Lubański. 2016-10-12\n
\n\n

\n Specyfikacja Templates daje programistom definiowania\n kontenerów <template>, które nie są wyświetlane,\n pomimo, że ona żywym drzewem w DOM.\n

\n\n

\n Dominik serdecznie zachęca do wykorzystania Web Components, aby\n zunifikować biblioteki, które tworzą UI.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Kind of JavaScript [EN] Mariusz Nowak

\n\n

\n Dobra organizacja wartości w JSie zakłada podział na:\n

\n\n
    \n
  • Immutable\n
      \n
    • Primitive non-value\n
        \n
      • undefined
        • \n
      • null
        • \n
      \n
      • \n
    • Primitive value\n
        \n
      • number
        • \n
      • boolean
        • \n
      • string
        • \n
      • symbol
        • \n
      \n
      • \n
    \n
    • \n
  • Mutable
    • \n
\n\n

\n Różnica między null a undefined w JavaScript?\n

\n\n
    \n
  • null - jest wartością, która mówi, że nie ma wartości
    • \n
  • undefined - mówi, że nie ma wartości, nie ma klucza, nie ma niczego
    • \n
\n\n

Dobra praktyka

\n\n

\n Usuwanie klucza z obiektu powinno odbywać się poprzez nadpisanie wartości null-em,\n zamiast wykorzystywać operator delete.\n

\n\n
obj.foo = null; // Good practice ✔\ndelete obj.foo; // Bad practice ✖
\n\n

\n Mariusz wytłumaczył jak działa Object Boxing, czyli dlaczego prymitywy mają właściwości.\n Kolejne dwa terminy, które po prelekcji będą dla nas jasne, to:\n

\n\n
    \n
  • \n Type Coercion - rzutowanie typów, to poważny temat. Przy pracy z językiem, stykamy się\n z koercją w wielu miejscach. Ważne jest zrozumienie tego mechanizmu\n i zapoznanie się np. Falsy Values.\n
    • \n
  • \n Duck Typing - czyli, porównywanie obiektu, na podstawie jego zawartości,\n np. czy posiada właściwości takie jak?\n
    • \n
\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #3: Angular 2 quickstart, Angular 2 automated unit testing [PL] Robert Gurgul

\n\n

\n Ze względu na to, że aplikacje tworzone w oparciu o framework Angular 2 tworzone są w TypeScript,\n to będzie istniała pewna różnica między środowiskami developerskimi projektów\n opartych na Angular 1 (starym) oraz Angular 2 (nowym). Elementem tym będzie transpilator.\n

\n\n

\n Robert podczas prelekcji pokazał narzędzie angular-cli - narzędzie automatyzując\n oraz standaryzujące budowanie aplikacji Angularowych.\n

\n\n
\n Ostatnio zastanawiałem się nad tym "dlaczego w ogóle lubię\n programować?"
Lubię programować, bo lubię widzieć co zrobiłem.\n Gdy napiszę fajny kod, lubię sprawdzić czy on działa.\n Robert Gurgul. 2016-10-12\n
\n\n

\n Robert poleca jazdę pociągiem, bo wtedy ze względu na brak internetu możemy pisać testy.\n Dobre testy to takie, które mock-ują całą komunikację z serwerem, więc faktycznie\n nie potrzebujemy internetu do dopisania do naszej aplikacji kilkunastu testów.\n W pełni się z tym zgadzam. Swoją drogą, żyjemy w XXI wieku i w pociągach dalekobieżnych\n dalej nie ma sieci Wi-Fi. Ciekawe czy nasze dzieci będą kiedykolwiek w takiej sytuacji.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
2016-11-04 23:00:00 warsawjs-meetup-26 ckbw97zyw0007i3umdszu2ola 2016-11-04 23:00:00 2016-11-04 23:00:00 -civioajk00064i3umdaaneivn Hackathon: Node Knockout #6 (2016) https://piecioshka.pl/blog/2016/11/15/hackathon-node-knockout-2016.html

\n W miniony weekend brałem udział w maratonie dla programistów, czyli hackathonie!\n Od kilku lat jestem wiernym fanem hackathonu o nazwie Node Knockout,\n gdzie podstawową zasadą jest wykorzystanie technologii Node.js w aplikacjach\n biorących udział w zawodach.\n

\n\n

\n Tematyka na takich zawodach jest dowolna. Można tworzyć aplikacje ale też i gry.\n Docelowym środowiskiem musi być przeglądarka internetowa. Dlatego też tworzenie aplikacji\n mobilnych, desktopowych czy na Smart TV albo Smart Watch odpada.\n

\n\n
\n \n
\n\n
\n

Co to jest Hackathon?

\n\n

\n Hackathon jest zlepkiem 2 słów: hack oraz marathon.\n Podstawową ideą jest tworzenie czegoś, albo projektu programistycznego,\n albo czegoś z dziedziny hardware-u, non-stop, czyli bez przerwy,\n w określonych wcześniej ramach czasowych. Bardzo często jest to 48 godzin.\n Jeśli po 48 godzinach dalej będziemy rozwijać naszą aplikację\n zostaniemy zdyskwalifikowani.\n

\n\n

\n Ostatnio nawet polski rząd stworzył hackathon. Więcej\n tutaj.\n

\n
\n\n
\n

Zespół

\n\n

\n Mój zespół liczył 3 osoby. W teamie Dumplings do którego należałem,\n znajdowały się jeszcze 2 osoby: Katarzyna oraz Krzysztof.\n

\n\n

\n Kasia jest grafikiem komputerowym, taka umiejętność w tworzeniu aplikacji, czy gier\n jest nieoceniona. Jestem przekonany, że gdybyśmy z Krzyśkiem napisali super grę,\n ale nie miała by ona grafiki to nikomu by się nie podobała.
\n Według mnie grafika w grach to około 50% odbioru,\n reszta to: szybkość grania i ładowania, obsługa sterowania, interesująca fabuła itd.\n

\n
\n\n
\n

Opis gry, stworzonej w 34 godziny

\n\n

\n Hackathon zaczął się o w 0:00 UTC 12 listopada, więc czasu polskiego 1:00 w sobotę.\n A kończył 23:59:59 UTC w 13 listopada, czyli sekundę przed końcem niedzieli.\n Polskiego czasu to 0:59:59 w poniedziałek.\n

\n\n

\n Jako zespół realizowaliśmy projekt w następujących ramach czasowych:\n

\n\n
    \n
  • Sobota: 7:00 - 1:00 (niedziela) = 18
    • \n
  • Niedziela: 9:00 - 1:00 (poniedziałek) = 16
    • \n
\n\n

\n HINT: Ważne jest, aby w ciągu tych dwóch dni zrobić przerwę na sen.\n Człowiek nie jest w stanie pracować przez 48 godzin non-stop.\n W takich zawodach wygrywają osoby, które dobrze zarządzą swoim czasem podczas hackathonu.\n

\n\n
\n \n\n
\n Screen z gry.\n
\n
\n\n

\n Gra dostępna jest pod adresem: dumplings.2016.nodeknockout.com/.\n

\n\n

\n 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\n tych zawodów poprzez uzupełnienie formularza:\n

\n\n
\n \n\n
\n Formularz oceny projektów biorących udział w hackathonie Node Knockout 2016.\n
\n
\n\n

\n A jeśli jesteś geekiem (albo po prostu developerem) i interesuję Cię jak gra wygląda od środka,\n to zapraszam Cię do odwiedzenia repozytorium projektu:\n github.com/rumblex/nodeknockout2016-dumplings.\n

\n
\n\n
\n

Pitch video

\n\n

\n Organizatorzy wpadli na pomysł, aby zawodnicy nagrywali krótkie wideo o swojej grze.\n Na tzw. pitch video warto wytłumaczyć jakieś skomplikowane aspekty gry - jeśli takie są.\n

\n\n \n\n

\n Ze względu na to, że gra nie została skończona, tj. nie zrealizowaliśmy w niej wymaganych feature-ów,\n to nie musiałem opisywać o co chodzi w tej grze.\n

\n
\n\n
\n

Wskazówki

\n\n

\n Podczas hackathonu robiłem notatki, aby móc Ci je teraz przedstawić.\n Notatki te są swego rodzaju wskazówkami dla wszystkich tych, którzy\n zamierzają wziąć udział w imprezach takiego typu.\n

\n\n
    \n
  1. Przygotować kilka pomysłów na projekt na kilka dni przed zawodami
    2. \n
  2. \n Wybrać jeden projekt dzień lub dwa przed zawodami. W ostateczności\n można go wybrać w ciągu pierwszych minut trwania hackathonu.\n Jednak wtedy poświęcamy czas zawodów na wymyślanie architektury,\n co jest dość czasochłonne.\n
    3. \n
  3. \n Rozpisać jego architekturę projektu tak, aby hackathon polegał już na samej\n implementacji.\n
    4. \n
  4. \n Podczas realizacji projektu warto jest zadbać o takie rzeczy jak:\n
      \n
    • Dodać favicon
      • \n
    • Pokazać użytkownikowi wersję z package.json
      • \n
    • Dodać dźwięki do gry
      • \n
    \n
    5. \n
  5. \n Wskazówki dotyczące realizacji gry:\n
      \n
    • Domyślne pozycje playera, aby pozbyć się problemu z błędem pozycji u innych klientów
      • \n
    • Ustawienie velocity na 1, aby były kolizje (o tym problemie opiszę poniżej) gdy używa się\n Phaser.js
      • \n
    • Dodać error handling gdy używa się Socket.io
      • \n
    • Ładnie zrobione intro pomaga w odbiorze
      • \n
    • Jak się dowiedzieć, z czym chcielibyśmy ustawić kolizję na mapie?\n\n
      function getCollisionTilesets() {\n    // Uzupełnić nazwy plików ze sprite-ami\n    return [<..nazwy..>].forEach((tileset) => {\n        return this.map.tilesets[tileset].frameid;\n    });\n}\n\nthis.map.setCollision(getCollisionTilesets());
      \n
      • \n
    \n
    6. \n
  6. Zrobić zaślepkowy obrazek, dla robotów robiących screenshot-y
    7. \n
  7. Opisać swoją pracę dopiero po skończonym kodowaniu\n
      \n
    • Jeśli gra jest multiplayer to warto to napisać!
      • \n
    \n
    8. \n
  8. Warto nagrać pitch video oraz oceniać innych zawodników, wtedy oni będą też oceniać naszą aplikację
    9. \n
  9. \n Jaką wersję Node.js wspiera hosting na którym będzie uruchomiona aplikacja. Mieliśmy błąd uruchomienia\n aplikacji, z powodu syntax errora, który był wygenerowany przez tworzenie class.\n Niestety, ale starsze wersje Node.js nie wspierają ich nawet gdy uruchomisz skrypt z opcją --harmony.\n
    10. \n
\n\n

\n Najważniejszą radą jaką mogę Ci dać, to gdy tworzysz grę na w takich zawodach,\n to postaraj się aby była ona grywalna. Nie ważne, że będzie prosta,\n ważne jest to, aby była gotowa do używania.\n

\n\n

\n Niestety, ale nam się nie udało zrealizować ten najważniejszej zasady,\n dlatego też nie mamy szans na jakikolwiek zwycięstwo. No może poza\n design-em, bo tutaj Kasia przerosła samą siebie!\n

\n\n
\n \n\n
\n Screen z gry.\n
\n
\n
\n\n
\n

Problemy

\n\n

\n Na zakończenie, chciałem podzielić się z Wami największymi problemami jaki mieliśmy podczas\n hackathonu. Były to dwa.\n

\n\n
\n

Problem z brakiem kolizji

\n\n

\n 2 godziny męczyłem się ze znalezieniem przyczyny dlaczego nie ma kolizji pomiędzy naszym samochodem\n a mapą. Przypomniałem sobie, że aby kolizja w świecie\n Phaser.js wystąpiła,\n to velocity obiektu, którym sterujemy nie może być równa 0.\n

\n\n

\n Po tym jak sobie przypomniałem, od razu stworzyłem nowy projekt, gdzie zachodzi kolizja między obiektem\n którym sterujemy a mapą. Niestety, ale w przykładach na phaser.io/examples/\n nie znalazłem takiego przykładu.\n

\n\n

\n Projekt dostępny jest na moim GitHubie: github.com/piecioshka/test-phaser-collision\n

\n
\n\n
\n

Problem z uruchomieniem aplikacji

\n\n

\n Największym problemem było to, że każda próba deployu kończyła się niepowodzeniem,\n choć w środowisku lokalnym aplikacja działała poprawnie. Błąd był następujący:\n

\n\n
events.js:160\nthrow er; // Unhandled 'error' event\n^\n\nError: listen EADDRINUSE :::5000
\n\n

\n Nie miałem pojęcia dlaczego akurat na środowisku produkcyjnym dany problem istnieje.\n Obecnie problem nie istnieje, a został rozwiązany dodaniem zmiennej środowiskowej PORT\n oraz zabiciem wszystkich procesów nginx oraz haproxy na docelowym serwerze.\n Z tego miejsca chciałem podziękować Kamilowi, który pomógł\n mi w tej sysadmin-owej kwestii.\n

\n
\n
\n\n
\n

Podsumowanie

\n\n

\n Chciałem podziękować organizatorom za organizację zawodów kolejny raz.\n Była to szósta edycja. Mogę się domyślać, jak wiele czasu trzeba było poświęcić na przygotowanie\n środowisk dla zawodników, oraz przygotowanie strony internetowej, która będzie informowała na bieżąco\n o stanie zawodów (bardzo motywujący był licznik czasu na stronie głównej).\n

\n\n

\n Jeśli nie brałeś udziału w takich zawodach, to polecam. Kod tworzony nie musi (a nawet nie może z powodu czasu)\n być najpiękniejszy - on po prostu musi działać. Moje pierwsze hackathony nauczyły mnie dużo.\n Poznawałem nowe biblioteki, które na swój sposób pomagały mi zrealizować zamierzony cel, czyli stworzyć grę!\n

\n\n

\n Tegoroczna edycja Node Knockout powiększyła liczbę hackathonów w których brałem udział do 5.\n Post na temat zeszłorocznej edycji (gdzie zająłem 2 miejsce w kategorii Solo Winner) jest dostępny tutaj: NKO 2015.\n

\n\n
\n \n\n
\n Screen z gry.\n
\n
\n
2016-11-14 23:00:00 hackathon-node-knockout-6-2016 ckbw97zyw0007i3umdszu2ola 2016-11-14 23:00:00 2016-11-14 23:00:00 -civoe1y800065i3um42w8fnwj WarsawJS Meetup #27 https://piecioshka.pl/blog/2016/11/19/warsawjs-meetup-27.html

\n Ten meetup był delikatnie inny niż poprzednie. Jako organizatorzy WarsawJS chcieliśmy trochę poeksperymentować.\n Tym samym, dołożyliśmy do standardowych 3 prelekcji mini workshop, aby zobaczyć, ile osób będzie\n zainteresowanych naszą nową inicjatywą WarsawJS Workshop.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Film nagrywaliśmy w dość chłodny (bo musiałem mieć rękawiczki) dzień na pl. Trzech Krzyży, w centrum miasta.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: Single-page application loading time optimization. Powered by Webpack, React, Node.js and isomorphic-style-loader [PL] Michał Janaszek

\n\n

\n Prelekcja była nt. optymalizacji działania strony aplikacji webowej.\n Skupiała się ona w większości na sposobie przyspieszenia ładowania się.\n

\n\n
\n JSX jest dobry do opisu elementów wizualnych.\n Michał Janaszek\n
\n\n

\n Pierwotnie analizowana aplikacja, przed załadowaniem treści pokazywała użytkownikowi tekst Loading\n 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].\n

\n\n

\n Michał, przeprowadził aplikację przez kolejne 3 fazy i zredukował czas ładowania aplikacji do 257 [ms],\n a użytkownik nie był w stanie zobaczyć napisu Loading, ponieważ go po prostu nie było w aplikacji,\n zastąpiła go docelowa treść aplikacji.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: GraphQL in a nutshell [PL] Kamil Grabek

\n\n

\n Podczas prelekcji dowiedzieliśmy się czym jest GraphQL oraz o kilku jego zaletach np. o tym,\n że GraphQL ma ściśle określony typ.\n

\n\n
\n W skrócie jest to idea, w jaki sposób powinna odbywać się komunikacja\n klient-serwer.\n Kamil Grabek\n
\n\n

\n Część kliencka aplikacji, gdzie jest wykorzystany GraphQL, jest w stanie powiedzieć serwerowi co chce dostać\n w odpowiedzi na zapytania.\n

\n\n

\n Technologia GraphQL jest dość młoda. Ma dopiero 2 lata. Facebook - ze względu na to, że jest autorem projektu\n - korzystał już wcześniej. Technologia się rozwija, także dajmy jej szansę i zobaczymy jak za kilka lat będzie\n wyglądał protokół komunikacji klient-serwer.\n

\n\n

\n Kamil po swojej prezentacji poprowadził mini workshopy z GraphQL, na których obecnych było ponad 20 osób.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
\n\n
\n

Podsumowanie

\n\n

\n Ze względu na to, że nasz eksperyment się powiódł, tj. na workshopach zostało kilkadziesiąt osób, to kolejne\n spotkanie (grudniowe), również będzie zawierało mini workshop o GraphQL, a dokładniej o Relay, ale o tym\n dowiecie się podczas kolejnej zapowiedzi wideo.\n

\n\n

\n Do zobaczenia za miesiąc :exclamation:\n

\n
2016-11-18 23:00:00 warsawjs-meetup-27 ckbw97zyw0007i3umdszu2ola 2016-11-18 23:00:00 2016-11-18 23:00:00 -civwyp2800066i3umcwrh33y8 Konferencja: ngPoland 2016 https://piecioshka.pl/blog/2016/11/25/konferencja-ng-poland-2016.html

\n W zeszły wtorek (22-11-2016) byłem uczestnikiem pierwszej polskiej\n konferencji poświęconej w 100% najpopularniejszemu frameworkowi w świecie\n JavaScript-u, czyli Angular-owi.\n Ciekawią Cię jakie są moje wrażenia z konferencji\n ngPoland? Czytaj dalej.\n

\n\n
\n \n\n
\n Oficjalne logo tegorocznej konferencji.\n
\n
\n\n

\n Techniczne notatki jak zawsze są dostępne na GitHubie. Są tworzone one\n podczas wydarzenia. Zapraszam:\n github.com/piecioshka/notes-ng-poland-2016\n

\n\n
\n

Lokalizacja

\n\n

\n Kto się spodziewał, że konferencja odbędzie się na stadionie narodowym?\n Większość pewnie zadawała sobie pytanie, czy wydarzenie przypadkiem\n nie odbędzie się na płycie boiska?\n

\n\n

\n Niestety, ale na płycie boiska znajdują się 2 lodowiska, które\n przyciągają wszelkich zainteresowanych do swobodnej przejażdżki.\n

\n\n

\n PGE Narodowy to piękny obiekt\n z zewnątrz ale i od środka. Obiekt zawiera wiele salek, które można\n wynająć w celach biznesowych\n (Business Link).\n

\n\n \n
\n\n
\n

Rejestracja

\n\n

\n Przed wejściem na salę z prelekcjami czekała rejestracja. Każdy\n uczestnik musiał się zarejestrować. Podczas rejestracji trzeba było\n pokazać swój bilet. W zamian dostawało się smycz z logo sponsora\n Acaisoft.\n

\n\n

\n Jako uczestnicy dostawaliśmy też kuferek z poczęstunkiem (słodycze)\n i jeszcze kilka fantów. Świetny pomysł! Człowiek od razu na starcie\n jest miło przywitany - sprzyja to lepszemu odbiorowi całej konferencji.\n

\n\n \n
\n\n
\n

Partnerzy ... a wśród nich\n WarsawJS

\n\n

\n Zakładaliśmy WarsawJS w celu aktywizacji warszawskich\n programistów JavaScript. Wszelkie formy networkingu oczywiście\n popieramy, dlatego też jesteśmy partnerami wielu inicjatyw, a\n konferencja ngPoland jest jedną z\n nich.\n

\n\n

\n Zawsze cieszy widok, tylu ludzi zainteresowanych JavaScriptem.\n Szczególnie tych zakochanych w konkretnym frameworku. Ci\n developerzy starają się użyć tego narzędzia wszędzie gdzie się da - nie\n zawsze ma to pozytywne skutki :smiley:\n

\n\n

\n Frameworki są stworzone, żeby rozwiązywać problemy. Nie ma frameworka,\n który rozwiązuje wszystkie problemy, więc i nie takiego, którego można\n użyć w dowolnym zastosowaniu.\n

\n\n

\n Tomasz Ducin podczas swojej prelekcji na ngPoland\n powiedział:\n

\n\n
\n Don't focus on tools, focus on the problem.\n Tomasz Ducin\n
\n\n

\n W pełni się z nim zgadzam. Chciałbym aby wszyscy myśleli podobnie.\n

\n\n \n\n

\n Jak możecie zobaczyć, partnerami konferencji było mnóstwo organizacji\n zaangażowanych w aktywizację społeczności programistów, nie tylko\n warszawskich! Jak dobrze się przypatrzycie obrazkowi powyżej zobaczycie,\n że wśród sponsorów jest organizacja\n ng-poznan, która\n działa na podobnej zasadzie co organizacja\n AngularJS Warsaw,\n od której zaczynali organizatorzy konferencji, czyli:\n

\n\n \n\n

\n Z tego co wiem, to do współorganizatorów trzeba dodać\n Emilię Łuszkiewicz.\n

\n
\n\n
\n

Prezentacja organizatorów

\n\n

\n Konferencja zaczęła się punktualnie o godzinie 9:00, gdzie na scenie\n pojawili się kuzyni: Arek i Darek - organizatorzy. Podziękowali\n wszystkim za przybycie oraz zaprosili do wysłuchania 16 prelekcji\n na temat Angular-a (w obu wersjach 1.x oraz 2.x).\n

\n\n

\n Prelekcje jak i cała konferencja odbywała się w języku angielskim.\n To już standard na międzynarodowych konferencjach.\n

\n
\n\n
\n

Co tam się działo?

\n\n \n\n

\n Druga prelekcja i już banany na scenie!!?\n

\n\n

\n Osoby, które zostały zaproszone do bycia speakerami nie były z tzw.\n ulicy. Prelegenci znali się już przed konferencją, więc mogli zrobić\n coś interesującego, jak chociażby wspólne śpiewanie!\n

\n\n

\n Tracy Lee opowiadała o tym\n jak stowrzyć projekt w oparciu o\n angular-cli, ale\n przed tym jak zaczęła wgłębiać się w temat, zaprosiła swojego dobrego\n kolegę Bena Lesh-a z którym zaczęła śpiewać.\n

\n\n

\n Jeszcze przed rozpoczęciem na scenie pojawił się człowiek-banan -\n wydaje mi się, że był to Uri Shaked, który śpiewał i tańczył\n jednocześnie. Wszystko to przed publicznością liczącą kilkuset osób.\n

\n\n

\n Było to dla mnie NIESAMOWITE!\n

\n
\n\n
\n

Nagroda

\n\n

\n Organizatorzy przed lunchem, wpadli na pomysł, na realizację planu i\n wręczeniu kilku nagród pod szyldem: ng-awards.\n

\n\n

\n Dostałem nagrodę jako przedstawiciel organizacji WarsawJS - największej\n społeczności JavaScript-owej w Warszawie. Chciałem zaznaczyć, że\n brawa należą się wszystkim organizatorom WarsawJS, aktualnym\n

\n\n \n\n

\n oraz tym, którzy zrezygnowali z pełnienia tej funkcji, tj:\n

\n\n \n\n

\n W imieniu wszystkich całej organizacji bardo\n dziękuję :exclamation: :smiley:\n

\n\n \n
\n\n
\n

Spiderman na scenie!

\n\n

\n Jako 8 na scenie w roli speakera pojawił się\n Gerard Sans, który\n to opowiadał o tworzeniu aplikacji opartej na frameworku Angular2, którą\n realizował na potrzeby chorego Spider-mana.\n

\n\n

\n Brawa za kreatywność. Sala miała ubaw po pachy :smiley:\n

\n\n \n
\n\n
\n

Konkurs na najbardziej zwariowane zdjęcie

\n\n \n\n

\n Organizatorzy podczas otwarcia konferencji opowiadali o konkursie\n jaki będzie się toczył podczas wydarzenia, a mianowicie zawodów na\n najbardziej kreatywne zdjęcie tego dnia.\n

\n\n

\n Postanowiliśmy z Piotrem wzięć udział. Stąd też powyższe zdjęcie.\n Proszę nie martwcie się o nasze zdrowie psychiczne - wszystko gra :smiley:\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Na wstępie podsumowania, chciałem podziękować za możliwość uczestnictwa\n ekipie WarsawJS na tej konferencji. Jest to świetny dowód wsparcia\n warszawskich społeczności developerskich.\n

\n\n

Ocena od strony organizatora

\n\n

\n Konferencja od strony organizacyjnej stała na bardzo wysokim poziomie.\n Nie ma się do czego przyczepić :smiley:\n

\n\n

\n Mogę śmiało dać w skali 1-5 ocenę 5. Good job.\n

\n\n

Ocena strony merytorycznej

\n\n

\n Jako zwolennik wszystkiego co JavaScript-owe to dla mnie wszelkie\n rozmowy, prelekcje czy filmy są super. Więc nie jestem tutaj dobrą osobą\n na ocenę. Jeśli jednak miałbym dać jakąś cyferkę, to oczywiście\n 5 w tej samej skali co powyżej.\n

\n\n

Inne artykułu traktujące o ngPoland

\n\n

\n Pozwolę sobie na stworzenie listy artykułów o konferencji, które\n zostały napisane przez innych uczestników.\n

\n\n \n
\n\n
\n \n\n
\n Uri Shaked na scenie i jego zabawka - Raspberry PI, na której\n uruchomił grę "Simon says...".\n
\n
2016-11-24 23:00:00 konferencja-ngpoland-2016 ckbw97zyw0007i3umdszu2ola 2016-11-24 23:00:00 2016-11-24 23:00:00 -ciw6ys0w00067i3umhgv99j3c Historia języka JavaScript https://piecioshka.pl/blog/2016/12/02/historia-jezyka-javascript.html

\n Jako świadomy programista języka JavaScript, chciałem przedstawić wam\n historię tego języka. Wpis będzie również zawierał informację o powstaniu\n języka Java.\n

\n\n
\n JavaScript logo\n\n
\n Logo JS-a zaproponowane przez Chrisa Willisa podczas konferencji\n JSConf EU 2011.\n
\n
\n\n
\n

tl;dr

\n\n
    \n
  • \n

    lata 70 zeszłego wieku

    \n

    \n Z uwagi na rosnące zapotrzebowanie producentów urządzeń,\n potrzebne było oprogramowania, które będzie w stanie działać\n na wszystkich typach urządzeń.\n

    \n
    • \n
  • \n

    lata 90 zeszłego wieku

    \n

    \n Sun Microsystems stworzyło język Java (nazwa pochodzi\n od kawy produkowanej na wyspie Jawa), którego ideą był\n WORA - Write once, run anywhere.\n

    \n
    • \n
  • \n

    \n Netscape Communications chciało wprowadzić do swojej\n przeglądarki dynamikę znaną z programów desktopowych.\n

    \n
    • \n
  • \n

    \n Sun Microsystems chciało aby\n Netscape Communications wprowadziło do swojej\n przeglądarki Javę.\n

    \n
    • \n
  • \n

    \n Netscape Communications nie zgodziło się. Chciało\n wprowadzić coś co trafi do szerszego grona odbiorców niż tylko\n programistom Javy.\n

    \n
    • \n
  • \n

    kwiecień 1995

    \n

    \n W Netscape Communications zatrudnili programistę, który\n z języków: Java, Scheme i Self skonstruował nowy język o nazwie\n LiveScript.\n

    \n
    • \n
  • \n

    \n Sun Microsystems, jako partner w biznesowej ofensywie\n na Microsoft nie był zadowolony z tego pomysłu i chciał\n unicestwić projekt LiveScript.\n

    \n
    • \n
  • \n

    koniec roku 1995

    \n

    \n Firma Netscape Communications wpadła na pomysł zmiany\n nazwy na JavaScript, który jakoby miał mieć coś wspólnego z\n Javą.\n

    \n
    • \n
  • \n

    \n Sun Microsystems zaakceptowało pomysł, ale przejęło\n prawa do marki udzielając licencji na używanie nazwy tylko\n firmie Netscape Communications.\n

    \n
    • \n
  • \n

    czerwiec 1997

    \n

    \n Netscape Communications wraz z ECMA tworzy\n standard nowego języka - ECMAScript.\n

    \n
    • \n
\n
\n\n
\n

Od czego to się wszystko zaczęło?

\n\n

\n W XVII w. na wyspę Jawa została sprowadzona przez Holendrów kawa\n gatunku Arabica (nazwana później Liberica, a potem Robusta).\n

\n\n

\n W dniu 9 listopada 1981 roku powstała w Mountain View firma\n Silicon Graphics, założona przez James H. Clarka,\n która była amerykańskim producentem wysokiej jakości hardware-u\n (sprzętu komputerowego) oraz software-u.\n

\n\n

\n W 1982 roku, 24 lutego powstała firma Sun Microsystems,\n zajmowała się podobnie jak Silicon Graphics produkcją\n oprogramowania.\n

\n\n

\n W 1986 roku na uniwersytecie w Illinois w USA, powstała komórka\n zajmująca się rozwojem oraz wdrażaniem krajowego oprogramowania\n komputerowego.\n

\n
\n\n
\n

Po co ta Java?

\n\n

\n W 1990 firma Sun Microsystems powołała komórkę Sun Labs,\n która miała zajmować się nowymi technologiami webowymi, rozwijaniem\n nowego języka programowania oraz sieciami komputerowymi.\n

\n\n

\n W tym samym czasie, w komórce ds. rozwoju nowego języka, James Gosling\n razem z grupą innych ludzi zajmowali się tworzeniem języka, który\n mógłby być uruchamiany na komputerach z dowolną konfiguracją sprzętową.\n

\n\n

\n Programy napisane w C lub C++ mogły być uruchamiane tylko\n na urządzeniach z takim samym procesorem, aby wykorzystać w pełni\n potencjał maszyny. Nie nadawały się więc do nowych urządzeń,\n które miały inną konfigurację sprzętową. Dlatego też powstał projekt\n stworzenia nowego języka, który nadawałby się lepiej do oprogramowania\n użytkowego niż C i C++.\n

\n\n

\n Początkowo język nazwano "Oak", ze względu na wielki dąb w pobliżu\n budynku w którym prowadzono prace. Ponieważ istniał już język o takiej\n nazwie należało znaleźć alternatywę. Po długich dyskusjach olśnienie\n przyszło podczas wyjścia do sklepu z kawą.\n

\n\n

\n Java to nazwa kawy produkowanej na wyspie o takiej samej nazwie.\n Jest to też slangowe określenie kawy w USA.\n

\n
\n\n
\n

Narodziny najpopularniejszej przeglądarki internetowej

\n\n

\n Na początku lat 90. James H. Clark odszedł z Silicon Graphics.\n

\n\n

\n W 1993 roku National Center for Supercomputing Applications wypuściła\n przeglądarką webową o nazwie NCSA Mosaic. Nie była to pierwsza\n przeglądarka na rynku, ale jako pierwsza pozwalała na wyświetlanie\n obrazków (wspierała tag <img>).\n

\n\n

\n W tym samym roku James H. Clark poznał Marca Andreessena, z którym\n zamierzał podbić rynek przeglądarek.\n

\n\n

\n W 1994 roku, w Mountain View, panowie razem zarejestrowali\n firmę Mosaic Communications. Zatrudnili autorów przeglądarki\n NCSA Mosaic w celu stworzenia nowej pod nazwą Mosaic Navigator,\n która miała nie mieć ani jednej linijki kodu z pierwotnej wersji.\n

\n\n

\n (Wewnątrz projektu nową przeglądarkę nazywano "Mozilla", czyli\n "Mosaic killer". Celem nowo powstałej firmy, było stać się liderem na\n rynku przeglądarek.)\n

\n\n

\n 15 grudnia 1994 roku miała miejsce premiera pierwszej wersji\n przeglądarki Mosaic Netscape 1.0. Po kilku miesiącach udało się\n zdobyć ponad 70% rynku. Zyskanie takiej popularności przyniosło\n wspieranie tagu ≶blink> (powodującego mruganiem tekstu) oraz\n elementów formularza.\n

\n\n

\n (Aby uniknąć problemów z NSCA, nazwa przeglądarki została zmieniona na\n Netscape Navigator, a po kilku miesiącach - w tym samym roku -\n firma zmieniła nazwę na Netscape Communications.)\n

\n
\n\n
\n

Narodziny języka LiveScript

\n\n

\n Marc Andreessen stwierdził, że świat webu potrzebuje czegoś bardziej\n zaawansowanego, czegoś co będzie klejem dla obecnego HTMLa. Model\n przeglądarkowy utracił interaktywność. Dlatego Java była taka\n atrakcyjna, bo przywracała interaktywność w przeglądarce\n co pozwalało rywalizować z aplikacjami desktopowymi.\n

\n\n

\n Początkowo firma chciała, aby dynamika była podobna do mechanizmu\n HyperCard, systemu rozwijanego przez Billa Atkinsona w Apple, który\n miał na celu ułatwienie programowania na platformę Macintosh.\n Dostępnych było mnóstwo przycisków, do których można było przypisać\n dowolne skrypty. Firma Netscape Communications chciał zrobić\n coś podobnego, ale na stronie internetowej.\n

\n\n

\n W 1995 roku firma Netscape Communications zatrudniła\n kolejnego programistę z MicroUnity, który wcześniej pracował\n w Silicon Graphics, Brendana Eicha. Brendan na rozmowie\n rekrutacyjnej powiedział, że chciałby w przeglądarce\n Netscape Navigator osadzić interpreter języka programowania\n Scheme. Firmie bardzo to się spodobało, bo właśnie tego oczekiwali\n od nowego kandydata.\n

\n\n \n\n

\n Po rozpoczęciu prac, firma zorientowała się jak wygląda język Scheme\n i zarządziła zmiany, w obawie że w obecnej formie nowy język będzie\n mało atrakcyjny. Firma zaproponowała, aby Brendan osadził język\n przypominający np. Visual Basic albo Javę - czyli języki już cieszące\n się popularnością.\n

\n\n

\n Netscape Communications w porozumieniu z\n Sun Microsystems chciało dodać do swojej przeglądarki wsparcie\n dla języka Java, aby konkurować z Microsoft-em pod kątem nowych\n technologii. Netscape Communications zdecydowało, że język,\n który stworzą i dodadzą do swojej przeglądarki, będzie uzupełnieniem\n do języka Java o podobnej składni. Z miejsca wykluczało to więc\n osadzenia takich języków jak Python czy Perl. Aby bronić swojej idei\n wobec konkurencyjnych propozycji firma potrzebowała jednak prototypu.\n

\n\n

\n Brendan zmiksował elementy trzech języków: Java - ponieważ\n powiedziano mu, że musi użyć tego języka oraz dwóch innych bardzo\n interesujących języków: Scheme (dialekt Lispa, skąd pochodzi pomysł\n first-class functions) oraz Self (język który\n bazował na Smaltalku, skąd zaczerpnięty został pomysł\n prototypów), które nie były znane na rynku programistów.\n Wykorzystywane były głównie przez twórców innych języków języków\n programowania. Taki wybór okazał się sporym zaskoczeniem.\n

\n\n

\n Projekt został przeniesiony do Sun Labs firmy Sun Microsystems,\n aby od czasu do czasu móc wspierać rozwój projektu odnośnie języków\n Java i Self. Z jakiegoś powodu firma Sun Microsystems\n podjęła decyzję o zaprzestaniu rozwoju jednego z nich. Wybrali Self.\n

\n\n

\n Brendan Eich stworzył w maju nowy język. Zrobił to w 10 dni.\n

\n\n

\n W swojej opowieści Brendan dodaje, że razem ze swoim kolegą z pracy,\n Kippem Hickmanem, rywalizowali, który język da się lepiej osadzić\n w przeglądarce. Po kilku dniach przełożony obu developerów, Bil Joy,\n przekonał ich do porzucenia projektu umieszczenia Javy w przeglądarce,\n ze względu na problemy jakie pojawiły się przy osadzaniu wirtualnej\n maszyny. Nie była ona kompatybilna z maszyną firmy Sun\n Microsystems.\n

\n\n

\n Pierwsza wersja nowego języka nazywała się Mocha, ale w wersji beta\n przeglądarki Netscape Navigator 2.0, która została\n opublikowana we wrześniu, nazwa została zmieniona na LiveScript.\n

\n\n

\n Dnia 23 maja 1995 roku firma Sun Microsystems podczas\n konferencji SunWorld, ogłosiła powstanie nowego języka programowania\n Java.\n

\n
\n\n
\n

Narodziny języka JavaScript

\n\n

\n Nowy język Java wraz z przeglądarką Netscape Navigator,\n wzbudziły wiele emocji, dlatego też Sun Microsystems\n oraz Netscape Communications podjęły decyzję o\n współpracy przeciwko firmie Microsoft, w obawie że\n pojedynczo nie wytrzymają konkurencji.\n

\n\n

\n Największym punktem spornym w tym układzie był LiveScript.\n Sun Microsystems chciało dodać Javę do przeglądarki\n Netscape Navigator oraz zakończyć pracę nad LiveScriptem.\n Firma Netscape Communications nie zgodziła się na taki zabieg\n ponieważ wierzyli, że uda im się stworzyć coś w rodzaju funkcjonalności\n HyperCard. Z powodu braku porozumienia współpraca prawie została\n zerwana.\n

\n\n

\n Aby załagodzić stosunki nazwa została zmieniona na JavaScript.\n I tak w 3 wersji beta przeglądarki Netscape Navigator 2.0\n LiveScript został zastąpiony nazwą JavaScript.\n

\n\n

\n Ostateczny wybór wprowadził zamieszanie jako iż wiele osób myślało,\n że JavaScript jest efektem ubocznym powstania Javy, która\n cechowała się większą popularnością.\n

\n\n

\n Wybór został scharakteryzowany jako chwyt marketingowy firmy\n Netscape Communications aby pochwalić się wynalezienie nowego\n webowego języka programowania.\n

\n\n

\n Spór ucichł - zmiana nazwy pomogła. Z drobnym wyjątkiem - firma\n Sun Microsystems zastrzegła prawa własności do znaku\n towarowego. Najciekawsze jest to, że firma nie miała nic wspólnego z\n nazwą, a nawet próbowała zabić ten język. W drodze przysługi Sun\n Microsystems udzieliło firmie Netscape Communications\n licencji na używanie nazwy nowego języka programowania, co było o tyle\n satysfakcjonujące, że posiadali ją na wyłączność.\n

\n\n

\n Na dzień 4 grudnia 1995 przypadają narodziny języka JavaScript\n tj. wtedy firma Netscape Communications wydała oficjalne oświadczenie\n (link poniżej) o nowym, otwartym, multi-platformowym języku.\n

\n\n

\n Można powiedzieć, że stabilna wersja języka JavaScript z numerem 1.0\n pojawiła się wraz z opublikowaniem przeglądarki Netscape\n Navigator 2.0, a miało to miejsce 18 września 1995 roku.\n

\n
\n\n
\n

Narodziny języka JScript oraz ECMAScript

\n\n

\n Microsoft przypatrywał się temu z boku. Postanowił,\n że skopiuje język pod inną nazwą. Nie mogli używać nazwy JavaScript\n - prawa do niej miała firma Sun Microsystems (z którą\n Microsoft nie miał dobrych stosunków). Swoją kopię\n silnika nazwali JScript.\n

\n\n

\n Z kolei firma Netscape Communications - gdy zobaczyła, że\n konkurencja kopiuje jej język, i że może on zostać przejęty i\n rozszerzany przez kogoś innego - postanowiła stworzyć standard.\n Początkowo próbowała ustandaryzować swój język w organizacji W3C,\n ale niestety współpraca nie została nawiązana.\n

\n\n

\n Dopiero organizacja ECMA (European Computer Manufacturers Association\n z siedzibą w Genewie) zdecydowała się nawiązać współpracę, dzięki temu\n firma Netscape Communications mogła wykupić u nich standard.\n Było to w czerwcu w 1997 roku. Była to długa droga dla firmy\n z Kaliforni, ale się udało.\n

\n\n

\n Firma chciała ustandaryzować język, ale nie chciała nazywać go\n JavaScript, ponieważ tylko Netscape Communications mógł\n nazywać ten język JavaScript. Komitet starał się wymyślić inną nazwę.\n Koniec końców, został opublikowany dokument, który zawierał nazwę\n ECMAScript.\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Historia naszego pięknego języka jest burzliwa, ale warto ją znać.\n Dobrą praktyką jest tworzenie tl;dr (too long;\n don't read), czyli krótkiego podsumowania. W 10 punktach\n zawarłem najważniejsze zwroty akcji o początkach tworzenia języka\n JavaScript.\n

\n
\n\n
\n

Bibliografia

\n\n \n
2016-12-01 23:00:00 historia-jezyka-javascript ckbw97zyw0007i3umdszu2ola 2016-12-01 23:00:00 2016-12-01 23:00:00 -ciwgyuzk00069i3umfnmb2mk5 "JavaScript" to nie to samo co "Java" https://piecioshka.pl/blog/2016/12/09/javascript-to-nie-to-samo-co-java.html

\n Podczas mojej pracy zawodowej przychodzi mi czasem rozmawiać z ludźmi,\n których domeną nie jest programowanie. Tym samym nie znają języków\n programowania oraz różnic jakie pomiędzy nimi występują a tym bardziej ich\n zastosowania.\n

\n\n

\n Tym artykułem chciałbym nauczyć ludzi "nietechnicznych", o dziwnym zbiegu\n okoliczności jaki ma miejsce w świecie programowania, mianowicie kolizji\n nazw dwóch języków, wymienionych przeze mnie w tytule.\n

\n\n

\n Na wstępie chciałem zaznaczyć, że tym artykułem nie mam zamiaru nikogo\n obrażać, a tylko naświetlić problem jaki występuje, kiedy nazwy różnych\n języków programowania stosowane są zamiennie.\n

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Skrót?

\n\n

\n Niestety, ale "Java" to nie jest skrót od "JavaScript".\n

\n
\n\n
\n

Dla ...rekrutera

\n\n

\n Praca rekrutera to ciężki kawałek chleba. Musi wyszukiwać programistów\n na rynku pracy, umawiać się z nimi na spotkania, towarzyszyć w całym\n procesie rekrutacji.\n

\n\n

\n Cały ten proces wymaga skupienia oraz kompletu informacji o profilu\n programisty jaki jest poszukiwany.\n

\n\n

\n Poszukiwanie programisty to chyba najtrudniejszy etap w całym procesie\n zatrudniania nowej osoby. I tutaj popełnianych jest wiele błędów\n przez początkujących Human Resource Managerów.\n

\n\n

\n Znalezienie stosownego kandydata wiąże się z wysyłaniem ogromnej ilości\n zapytań. Łatwo jest tutaj popełnić mały błąd, który może zaważyć\n na odbiorze firmy do której rekruterzy poszukują pracowników.\n

\n\n

\n Nie ważne jest to, czy błąd został popełniony z pośpiechu, czy z\n niedbalstwa. My programiści szybko wyłapiemy błędy.\n

\n\n

\n Może warto aby HR managerzy byli wykształcenia technicznego? Nie wiem.\n Można tylko gdybać.\n

\n\n

\n Poszukiwanie osoby na stanowisko JavaScript Developera to nie jest\n to samo, co poszukiwanie kandydata na stanowisko Java Developera.\n

\n\n

\n Nie chce tutaj omawiać innych błędów, które się zdarzają, np. gdy\n dostaje się maile z innym imieniem i nazwiskiem odbiorcy. Tutaj niech\n wytłumaczeniem będzie szum komunikacyjny jaki towarzyszy rekruterom.\n\n

\n\n

Rada

\n\n

\n Moja rada jest prosta. Przywiązujcie wagę do nazwy stanowiska na jakie\n szukacie programisty. Java to zupełnie inny język niż JavaScript.\n Nie należy tego mieszać. Nigdy.\n

\n
\n\n
\n

Dla ...pracowników księgarni

\n\n

\n Większość z nas, programistów, lubi czytać książki techniczne.\n Zawierają one (zwykle) poukładaną wiedzę na temat danej dziedziny.\n

\n\n

\n Księgarnie mają to do siebie, że zawsze panuje w nich podział\n\n tematyczny. Taki stan rzeczy bardzo odpowiada programistom, których\n cechuje logiczne myślenie.\n

\n\n

Moja historia

\n\n

\n Wchodząc do księgarni, szukam regału z książkami dotyczącymi\n programowania. Gdy już znajdę, szukam tych, które interesują mnie\n najbardziej, tj. związanych z szeroko pojętym Front-end-em.\n

\n\n

\n Moim oczom ukazuje się cała gablotka na pierwszy rzut oka interesujących\n dla mnie książek. Jednak gdy podejdę bliżej, widzę książki pt.\n "Java. Podstawy.", "Java. Kompendium". Na mojej twarzy zawsze maluje się\n wtedy uśmiech, gdy widzę jak książki o JavaScripcie mieszają się\n z książkami o Javie.\n

\n\n

\n Chciałbym kiedyś wejść do księgarni i nie natknąć się na taką sytuację.\n Miałbym wtedy większe zaufanie, że osoby pracujące w księgarni\n wiedzą z jakimi książkami mają do czynienia.\n

\n\n

Rada

\n\n

\n Moja rada jest prosta. Jeżeli, koleżanko albo kolego, pracujesz w\n księgarni i masz za zadanie poukładać książki w dziale INFORMATYKA,\n to proszę abyś robił/a to uważnie. Programisty JavaScript nie\n interesują książki o Javie i odwrotnie. Zapamiętaj proszę.\n

\n
\n\n
\n

Dla ...początkującego programisty

\n\n

\n Jeśli zaczynasz swoją przygodę z programowaniem, to prędzej czy później\n dowiesz się, że Java i JavaScript to zupełnie inne języki. Ale jeśli\n zabraknie Ci dowodów, to chciałbym Co przedstawić podobieństwa i\n różnice tych dwóch języków powstałych w tym samym roku (1995).\n

\n\n

Podobieństwa

\n\n
    \n
  • \n Oba języki są multi-platformowe - uruchomią się na wszystkich\n konfiguracjach sprzętowych.\n
    • \n
  • \n Obiekty wbudowane Math i Date są takie same w obu językach.\n
    • \n
  • \n JavaScript zawiera listę zarezerwowanych słów prosto z Javy\n
    • \n
  • \n Składnia języka JavaScript była wzorowana na języku Java.\n
    • \n
\n\n

Różnice

\n\n
    \n
  • \n Autorem Javy jest Sun Microsystems.
    \n Autorem JavaScriptu jest Netscape Communications.\n
    • \n
  • \n Java jest językiem programowania.
    \n JavaScript jest językiem (programowania) skryptowym.\n
    • \n
  • \n Java jest językiem kompilowanym i uruchamianym w wirtualnej\n maszynie.
    \n JavaScript interpretowany i uruchamiany w przeglądarce.\n
    • \n
  • \n Oba języki programowania są zorientowane obiektowo, jednak\n JavaScript zawiera obiektowość prototypową,
    \n natomiast Java obiektowość klasyczną.\n
    • \n
  • \n W JavaScript nie ma klas (klasy z ES2015 to tylko syntactic sugar).\n W Javie są klasy.\n
    • \n
  • \n W JavaScript, obiekty nie posiadają prywatnych i chronionych właściwości\n i funkcji. W Javie można zdefiniować tryb dostępu do właściwości\n albo metody.\n
    • \n
  • \n W JavaScript nie ma metod, są funkcje obiektu.\n W Javie są metody, funkcję powiązane z klasą.\n
    • \n
\n\n

Rada

\n\n

\n Wielkim faux pas byłoby, gdybyś jako\n programista nie znał różnicy między tymi dwoma najpopularniejszymi\n językami programowania. Proszę przeczytaj ww. punkty i połowę z nich\n zapamiętaj. Nalegam.\n

\n
\n\n
\n

Zabawne porównania

\n\n

\n Jak już wspomniałem, te 2 języki programowania są zupełnie odmienne.\n W związku z tym powstało wiele zabawnych porównań wyśmiewających\n zestawianie ich nazw.\n

\n\n

\n O to lista najpopularniejszych:\n

\n\n
    \n
  • PL\n
      \n
    • koń i koniak
      • \n
    • rum i rumak
      • \n
    \n
    • \n
  • EN\n
      \n
    • ham and hamster
      • \n
    • car and carpet
      • \n
    • grape and grapefruit
      • \n
    \n
    • \n
\n\n

\n Więcej angielskich zwrotów znajdziesz na stronie\n javascriptisnotjava.io/\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Na koniec chciałem dodać, że pisząc ten artykuł chciałem zaznaczyć\n jasno, że istnieją duże różnice między tymi językami. Mieszanie nazw\n tychże języków, szczególnie wśród programistów, rodzi mnóstwo\n niepotrzebnych komplikacji i nieporozumień.\n

\n
2016-12-08 23:00:00 javascript-to-nie-to-samo-co-java ckbw97zyw0007i3umdszu2ola 2016-12-08 23:00:00 2016-12-08 23:00:00 -ciwmome80006ai3um603677mk WarsawJS Workshop #1 https://piecioshka.pl/blog/2016/12/13/warsawjs-workshop-1.html

\n 4 grudnia 2016 roku odbyły się pierwsze warsztaty pod szyldem\n WarsawJS, których byłem\n współorganizatorem. Myślą przewodnią tych warsztatów była nauka\n początkujących.\n\n Wszyscy Ci którzy nie mieli wcześniej styczności z programowaniem mogli\n przyjść i przez całe 8 godzin tworzyć projekt\n galerii zdjęć\n pod okiem trenerów.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Jak zrodził się pomysł?

\n\n

\n Po 2 latach organizowania meetupów stwierdziliśmy, że jako\n organizacja moglibyśmy spróbować swoich sił w zorganizowaniu czegoś\n więcej.\n

\n\n

\n Tym samym wpadliśmy na pomysł zorganizowania ankiety, która miała na\n celu weryfikację, czym uczestnicy meetupów byliby zainteresowani.\n Do wyboru w ankiecie były 2 opcje:\n

\n\n
    \n
  • konferencja
    • \n
  • warsztaty
    • \n
\n\n

\n Ponad połowa osób opowiedziała się za warsztatami.\n

\n\n \n
\n\n
\n

Plan

\n\n

\n Podczas WarsawJS Meetup #26\n założyliśmy event na Meetup.com oraz poprosiliśmy o sugestie\n atrakcyjnych tematów byłyby dla członków naszej organizacji.\n

\n\n

\n Link do eventu\n meetup.com/WarsawJS/events/234806304/\n gdzie opisane są zasady oraz wszelkie informacje techniczne potrzebne\n uczestnikom.\n

\n\n

\n Wielu ludzi opowiedziało się za Angularem, Reactem oraz innymi\n bibliotekami.\n

\n\n

\n Jednak, jak przez mgłę można było dostrzec liczne głosy, że może temat\n warsztatu gdzie moglibyśmy nauczyć się podstaw byłby dobrym pomysłem.\n Tak też zrobiliśmy.\n

\n\n

\n Po 2 miesiącach zbierania wyników, ogłosiliśmy na profilu\n wydarzenia jaki mamy plan na tematykę kolejnych warsztatów.\n Pozwolę sobie skopiować tę listę. W tym roku odbyło się jedno szkolenie:\n

\n\n
    \n
  • Grudzień 2016: Podstawy JavaScript (część 1) - dla początkujących
    • \n
\n\n

\n W następnym roku planujemy szkolenia z następujących tematów:\n

\n\n
    \n
  1. Styczeń 2017: Podstawy JavaScript (część 2) - dla średnio zaawansowanych
    2. \n
  2. Luty 2017: Angular 1
    3. \n
  3. Marzec 2017: Angular 2 (angular-cli)
    4. \n
  4. Kwiecień 2017: Node.js [tutaj mamy 3 propozycje]
    5. \n
  5. Maj 2017: Meteor.js
    6. \n
  6. Czerwiec 2017: Web Components
    7. \n
  7. Lipiec 2017: Portal społecznościowy w oparciu o Firebase
    8. \n
  8. Sierpień 2017: RxJS 5 - Reactive programming
    9. \n
  9. Wrzesień 2017: Gamedev: Wyścigi samochodowe z użyciem Phaser.js
    10. \n
  10. Październik 2017: React.js + Enzyme + Redux
    11. \n
  11. Listopad 2017: Vue.js
    12. \n
  12. Grudzień 2017: React Native - tworzenie aplikacji na iOSa i Androida
    13. \n
\n\n

\n Nie chcąc czekać jeszcze w tym roku zorganizować pierwsze warsztaty.\n

\n\n
\n \n\n
\n Praca wre!\n
\n
\n
\n\n
\n

Lokalizacja

\n\n

\n Znalezienie miejsca na zorganizowanie warsztatów nie sprawiło\n trudności, ze względu na świetną propozycję jaką dostaliśmy od\n Campus Warsaw.\n

\n\n \n\n

\n Campus Warsaw mieści się na ulicy Ząbkowskiej 27 - na Pradze Północ.\n Pod tym adresem znajdują się budynki, już nieaktywnej warszawskiej\n wytwórni wódek "Koneser".\n

\n\n

\n Większość zabudowań należących do wytwórni przetrwało II wojnę\n światową. Piękne mury budynki zawdzięczają czerwonej cegle, z której\n są zrobione. Na Wikipedii wyczytałem, że jest to styl\n neogotycki.\n

\n\n

\n Akurat w budynku w którym znajduje się biuro Campus Warsaw jest\n wyróżniająca się w tle brama wjazdowa - pozostałość po starej wytwórni.\n

\n\n
\n \n\n
\n Koneser - Warszawska wytwórnia wódek.\n
\n
\n\n

\n Lokalizacja jest wyśmienita. Blisko metra, tramwaju, pociągu\n czy autobusu. Fakt - z każdego środka komunikacji trzeba jeszcze\n przebyć 5-10 minut pieszo, ale to chyba nie problem :smiley:\n

\n
\n\n
\n

Bilety

\n\n

\n 5 dni przed eventem uruchomiliśmy rejestrację za pomocą systemu\n Evenea. Bilety sprzedały się w oka\n mgnieniu. Nie spodziewaliśmy się tak szybkiej sprzedaży. Po 3\n godzinach wszystkie bilety były wykupione.\n

\n\n

\n Po wyprzedaniu biletów na stronie eventu zaczęły pojawiać się\n zapytania, czy ktoś ma może bilet do odsprzedania. Miło kiedy ludziom\n zależy na czymś czego jest się twórcą :smiley:\n

\n
\n\n
\n

Bycie trenerem...

\n\n

\n ...to brzmi dumnie! Uwielbiam uczyć ludzi, patrzeć jak nagle\n rozumieją co do nich mówię i sami tworzą ciekawe rozwiązania!\n

\n\n \n\n

\n Mieliśmy 4 trenerów dostępnych podczas warsztatów:\n

\n\n \n\n
\n \n\n
\n Trenerzy pierwszego edycji WarsawJS Workshop.\n
\n
\n\n

\n Tym samym liczba uczestników była limitowana pod tym kątem. Chciałem,\n jako organizator, aby każdy z trenerów pomagał grupie maksymalnie 10\n osobowej.\n

\n
\n\n
\n

Prework & Postwork

\n\n

\n Jako organizatorzy wpadliśmy na pomysł, aby przed pierwszym\n spotkaniem przygotować zadanie, które wprowadzi w programowanie\n Front-end.\n

\n\n

\n Postanowiliśmy, że wyślemy do uczestników zadanie, którego celem\n będzie realizacja strony z napisem "Hello world". Dla doświadczonego\n developera wydaje się, że jest to zadanie zbyt proste. Jednak ze\n względu na to, że uczestnikami pierwszego workshopu będą ludzie bez\n doświadczenia to takie wyzwanie idealnie się wpasowuje.\n

\n\n

\n Dziś wysłaliśmy drugie zadanie. Tym razem w formie pracy domowej, czyli\n tzw. postworka. Celem takiego zadania jest rozwijanie wiedzy nabytej\n podczas WarsawJS Workshop.\n

\n\n

\n Jako organizatorzy liczymy na to, że w naszej skrzynce za kilka dni\n pojawią się maile z linkami do waszych projektów. Na każdego maila\n odpowiemy przesyłając techniczny feedback.\n

\n\n \n
\n\n
\n

Słowo na koniec

\n\n

\n Bardzo dziękujemy wszystkim za przybycie. Mamy nadzieje, że nie\n odpuścicie rozwijania swoich kompetencji programistycznych i\n będziecie zgłębiać tajniki JavaScriptu!\n

\n\n

\n Organizowanie warsztatów było dla nas, organizatorów, nowym i bardzo\n ciekawym wyzwaniem dającym wiele frajdy. Dziękujemy za\n przybycie!\n

\n\n \n
2016-12-12 23:00:00 warsawjs-workshop-1 ckbw97zyw0007i3umdszu2ola 2016-12-12 23:00:00 2016-12-12 23:00:00 -ciwqyxy80006ci3um5ity9ph0 Długość artykułu w minutach https://piecioshka.pl/blog/2016/12/16/dlugosc-artykulu-w-minutach.html

\n Kilka lat temu gdy powstała platforma\n Medium.com ich artykuły\n rozpoczynały się od bardzo przydatnej informacji - ile czasu zajmie\n przeczytanie danego artykułu.\n

\n\n
\n \n\n
\n Informacja o liczbie minut jakie trzeba poświęcić aby przeczytać\n artykuł.
W tym serwisie znajduje się ona zawsze pod nagłówkiem\n artykułu.\n
\n
\n\n
\n

Co nam po takiej informacji?

\n\n

\n Każdy z nas czyta artykuły w sieci. Niektóre są krótsze, niektóre\n dłuższe. Artykuły zawierające mniej tekstu mają to do siebie, że czas\n potrzebny na ich przeczytanie jest proporcjonalnie krótszy.\n

\n\n

\n Po otworzeniu danego artykułu podejmujemy mikro decyzję, czy czytamy\n go od razu czy jednak zostawiamy na później, czego powodem może być\n np. brak czasu w danej chwili.\n

\n\n

\n Taki mikro wybór jest dokonywany przez nas, internautów, bardzo szybko.\n Jest kilka czynników, które mogą pomóc nam podjąć tę decyzję.\n

\n\n

\n Co jeśli przed otworzeniem artykułu, np. na liście postów, pokażemy\n informację czasie potrzebnym na zapoznanie się z danym artykułem?\n Internauta podejmie decyzję jeszcze przed kliknięciem w zachęcający\n tytuł. Oszczędzi to mu czas i nerwy, które mogą się pojawić, gdy\n jakiś artykuł okaże się dłuższy niż czas, który czytelnik może mu\n poświęcić.\n

\n
\n\n
\n

Dobre zasady pisania postów

\n\n

\n Jeśli post zawiera interesujące tło, albo obrazki w artykule są\n ciekawe, mózg czytelnika otrzymuje bodziec, który sygnalizuje, że jest\n się na stronie godnej uwagi i może warto przeczytać znajdujący się na\n niej artykuł.\n

\n\n

\n Dobrze sformatowana treść również zaprasza czytelnika do przeczytania\n artykułu w całości. Gdy internauta zobaczy ścianę tekstu, to jest bardzo\n duża szansa, że zamknie kartę przeglądarki.\n

\n
\n\n
\n

Projekt: jekyll-time-to-read-in-polish

\n\n

\n Chciałem zamieścić taką informację o długości artykułu stworzyłem więc\n projekt, który pomaga mi zrealizować ten cel. Projekt dostępny jest\n na moim profilu na GitHubie. Plugin analizuje liczbę słów\n znajdujących się w artykule.\n

\n\n

\n Jeśli korzystasz z Jekyll-a to polecam Ci wypróbowanie tego dodatku\n na łamach swojego bloga. Link do projektu znajduje się w nagłówku tej\n sekcji.\n

\n
\n\n
\n

Podsumowanie

\n\n

\n Pokazanie (orientacyjnej) informacji o czasie, jaki trzeba\n poświęcić, aby przeczytać artykuł pomaga internaucie odpowiedzieć\n sobie na pytanie, które zadawane jest przed rozpoczęciem czytania\n dowolnej treści w sieci:\n

\n\n

\n Czy jestem w stanie / chce mi się poświęcić X minut, aby\n przeczytać post o takim tytule?\n

\n
2016-12-15 23:00:00 dlugosc-artykulu-w-minutach ckbw97zyw0007i3umdszu2ola 2016-12-15 23:00:00 2016-12-15 23:00:00 -ciy0p17k0006ni3umf24beg08 WarsawJS Meetup #28 https://piecioshka.pl/blog/2017/01/17/warsawjs-meetup-28.html

\n Ostatnie spotkanie w Państwomiasto.\n Żal zmieniać miejsce, ale taki stan rzeczy był do przewidzenia. Liczba\n osób, które chcą brać udział w naszych spotkaniach zwiększa się z meetupu\n na meetup.\n

\n\n

\n Podczas ostatniego spotkania w 2016 roku mieliśmy dwie prelekcje\n oraz mini workshop poprowadzony przez Kamila. Każdy mógł przyjść ze swoim\n komputerem i w ciągu 30 minut zakodować serwer w Node.js w oparciu o\n architekturę GraphQL.\n

\n\n
\n \n WarsawJS\n \n
\n\n
\n

Invitation

\n\n

\n Zapowiedź nagrywaliśmy podczas\n \n WarsawJS Workshop #1\n , czyli nowej inicjatywie organizacji WarsawJS, która ma\n miejsce w Campus Warsaw.\n

\n\n

\n Zapraszam do oglądania!\n

\n\n \n
\n\n
\n

Talk #1: Rapid prototyping and easy testing in Ember with Ember CLI\n Mirage [EN] Krzysztof Białek

\n\n

\n Krzysztof opowiadał o Mirage, czyli narzędziu do testowania aplikacji\n tworzonych w oparciu o Ember.js.\n Zapraszam wszystkich pasjonatów tego frameworka do obejrzenia tej\n anglojęzycznej prelekcji developera z\n Rebased.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Talk #2: Declarative UI. Relay is the way? [PL]\n Kamil Grabek

\n\n

\n Kontynuacja tematu który został rozpoczęty podczas\n \n WarsawJS Meetup #27\n i prelekcji pt. "GraphQL in a nutshell" tego samego speakera.\n

\n\n

\n Kamil opowiadał o innym podejściu do budowania aplikacji webowych.\n Zapraszam wszystkich developerów, którzy tworzą architekturę dla\n nowego, dużego systemu webowego, aby obejrzeli tę prelekcję.\n

\n\n

\n Podobnie jak miesiąc temu Kamil poprowadził mini-workshop budując\n pełnoprawny serwer GraphQL. Może w przyszłym roku będzie\n cały dzień z GraphQL-em? Zastanowimy się.\n

\n\n \n
\n\n\n

•

\n\n\n
\n

Sponsorzy spotkania

\n\n \n
\n\n
\n

Podsumowanie

\n\n

\n Bardzo dziękujemy PM za te ponad 2 lata udostępniania nam przestrzeni w\n sali konferencyjnej. Jako organizatorzy uważamy, że nie mogliśmy lepiej\n rozpocząć. Świetna lokalizacja w centrum miasta z super jedzeniem.\n

\n\n

\n Będzie co wspominać. Dziękujemy :heart:\n

\n
2017-01-16 23:00:00 warsawjs-meetup-28 ckbw97zyw0007i3umdszu2ola 2017-01-16 23:00:00 2017-01-16 23:00:00 cjcvn127k00xni3umcuvthcup Jak napisać 'Ź' w WebStorm na macOS? https://piecioshka.pl/blog/2018/01/26/jak-napisac-z-w-webstorm-na-macos.html

Skróty skróty, kto ich nie lubi? Skróty są świetne, do momentu kiedy nie\nprzysparzają problemów. Heh. Uwielbiam truizmy.

\n\n
\n Baner reklamujący artykuł\n
\n\n
\n

Zadanie

\n

Drogi czytelniku, mam zadanie dla Ciebie.
\nOtwórz WebStorma i w dowolnym pliku napisz dużą literkę Ź [zi].

\n
\n\n

Jeśli Ci się udało kliknij w serduszko pod artykułem.

\n\n

Jeśli nie to napisz komentarz z opisem co się stało :smile:

\n\n

Jak napisać “Ź” w moim ulubionym edytorze? :pray:

\n\n

Zdecydowanie większa część z Was na pewno nie mogła poradzić sobie z zadaniem.

\n\n

“Ktoś” wykorzystał kombinację przycisków do zamknięcia okien w edytorze.

\n\n

Zapytacie, po co ktoś miałby podpinać skrót pod normalną literę alfabetu?
\nNo tak, ale czyjego alfabetu?

\n\n
\n WebStorm Keymap Task Management\n\n
\n Skrót OPTION + SHIFT + X jest wykorzystany w pluginie\n Task Management
do czyszczenia kontekstu (Clear\n Context).\n
\n
\n\n

Developerzy edytora nie wiedzą, że w polskim alfabecie istnieje\ntak “skomplikowana” litera jak “Ź”, stąd też wykorzystują ją do swoich\nniecnych celów.

\n\n
\n

Plugin Task Management jest domyślnie zainstalowany w WebStormie na każdym\nsystemie, jednak tylko na macOS przysparza problemów.

\n
\n\n

Aby wyłączyć domyślne zachowanie edytora wykonaj:

\n\n
    \n
  1. Wejdź do sekcji WebStorm → Settings → Plug-ins
    2. \n
  2. Wyłącz “checkbox” obok pluginu Task Management
    3. \n
\n\n

Po restarcie WebStorma będziesz mógł wpisać opisywany znak :wink:

\n\n
\n\n

Więcej informacji na jetbrains.com.

2018-01-26 08:00:38 jak-napisac-z-w-webstorm-na-macos ckbw97zyw0007i3umdszu2ola 2018-01-26 08:00:38 2018-01-26 08:00:38 cjd1dnsyo00xsi3umgyg5an1x Interaktywna aktualizacja zależności w projekcie https://piecioshka.pl/blog/2018/01/30/interaktywna-aktualizacja-zaleznosci-w-projekcie.html

Dziś chciałbym przedstawić Ci narzędzie, które często wykorzystuję.

\n\n

Wyobraź sobie projekt, nad którym pracujesz i dbasz o niego.\nZależy Ci na zawsze aktualnych zależnościach, bo z nową wersją spodziewasz \nsię, że:

\n\n
    \n
  • będą działały szybciej
    • \n
  • będą bezpieczniejsze
    • \n
  • będą bardziej elastyczne
    • \n
  • będą mniej zajmowały?
    • \n
\n\n
\n Baner reklamujący artykuł\n
\n\n

Interaktywna aktualizacja :package:

\n\n

Narzędzie o którym dzisiaj mowa nazywa się npm-check.

\n\n
\n

Porada

\n

Proponuję instalację globalną, gdyż tego narzędzia będziesz używać w każdym \nswoim projekcie, no i nie ma sensu trzymać różnych wersji.

\n
\n\n

Tak więc, na początku wykonaj to polecenie:

\n
~/projects/ $ npm install -g npm-check\n
\n\n

A potem w katalogu projektu, którego chcesz zaktualizować zależności:

\n\n
~/projects/my-project-x $ npm-check -u\n
\n\n

Demo :rocket:

\n\n

Myślę, że najlepszym opisem projektu będzie poniższa prezentacja działania,\nna jednym z moim starych projektów:

\n\n\n\n
\n\n

Napisz w komentarzu jak Ty aktualizujesz zależności :wink:

2018-01-30 08:25:00 interaktywna-aktualizacja-zaleznosci-w-projekcie ckbw97zyw0007i3umdszu2ola 2018-01-30 08:25:00 2018-01-30 08:25:00 cjd2qs2dc00xvi3um66d8bgs9 TypeScript: Jak zacząć? https://piecioshka.pl/blog/2018/01/31/typescript-jak-zaczac.html

Kojarzysz TypeScript? Nigdy nie używałeś? Chciałbyś spróbować?\nJeśli tak to w tym artykule przedstawię Ci szybki sposób wykorzystania.

\n\n
\n \n\n
\n Miejsce: Campus Warsaw\n
\n
\n\n

Po co?

\n\n

No właśnie. Zawsze przed użyciem jakiegoś narzędzia warto odpowiedzieć sobie \nna pytanie: po co mi <nazwa technologii>? Jeśli już mamy argumenty “za” i \njest ich więcej niż tych “przeciw” to świetnie.

\n\n

Jak to jest z TypeScriptem?

\n\n

TypeScript mi pomaga w kilku aspektach. Może to nie jest zbyt dobre miejsce \nna ten temat, ale w krótkich “żołnierskich” słowach przedstawię Wam \nnajważniejsze zalety TypeScripta (IMO).

\n\n
    \n
  • \n

    1. Interfejsy

    \n\n

    W projektach w których biorę udział (i tam gdzie jest TS) każdy obiekt ma \n zdefiniowaną strukturę. Pomaga to wyeliminować błędy typu undefined is not an\n object na poziomie kompilacji.

    \n\n
    \n

    Kompilacja to proces, kiedy kod zamieniany jest na zrozumiały dla \nprogramu, który go uruchomi (w naszym przypadku będzie to przeglądarka).\nZachodzi on przed wykonaniem kodu przez przeglądarkę.\nPrzeglądarki internetowe interpretują kod, tj. uruchamiają go linijka po \nlinijce. W skrajnej sytuacji błąd może nigdy nie wystąpić. W językach \n“kompilowalnych” czyli w TypeScript, kompilator w fazie “tłumaczenia” \nkrzyknie kiedy nie zrozumie jakiegoś kawałka kodu.

    \n
    \n
    • \n
  • \n

    2. Typy wartości

    \n\n

    Era sprawdzania typu minęła. Dokładnie wiem z jakim typem wartości \n zmiennej mam do czynienia. Nie sprawdzam, czy jest stringiem, czy \n numberem. Po prostu ustalam podczas definicji jeden typ i do końca \n życia aplikacji będę miał ten typ zapewniony.

    \n
    • \n
\n\n

•

\n\n

Jak napisać prosty projekt w TypeScript?

\n\n
    \n
  1. \n

    Zmiana rozszerzenia głównego pliku

    \n\n

    Należy zaktualizować rozszerzenie głównego pliku *.js na *.ts.
    \n Zmiany dokonujemy w systemie plików.

    \n\n

    Oczywiście trzeba jeszcze zmienić ścieżkę do tego pliku w index.html.

    \n
    2. \n
  2. \n

    Napisz kod w TypeScript

    \n\n

    Przykładowy kod wzięty z przykładowego projektu:

    \n\n 
     // main.ts\n import { Lib } from './lib';\n import { pure } from './pure';\n    \n console.log(':: main ::');\n new Lib();\n pure();\n
    \n
    3. \n
  3. \n

    Uruchomienie projektu (w trybie developerskim)

    \n\n

    Jako narzędzie do uruchamiania projektu wykorzystamy parcel.\n Zainstalujmy go na początku.

    \n\n 
     $ npm install -g parcel-bundler\n
    \n\n

    Polecenie wykonujemy w katalogu projektu:

    \n\n 
     $ parcel index.html\n
    \n
    4. \n
\n\n

Od teraz aplikacja jest dostępna pod adresem http://localhost:1234 :rocket:

\n\n

Psst… Na moim GitHubie znajdziesz kod omawianej aplikacji.

\n\n

•

\n\n

Doświadczenie z TypeScriptem

\n\n

Na swoim publicznym GitHubie mam kilka projektów w TypeScript.\nOpowiem Ci o dwóch testowych:

\n\n
    \n
  • \n

    test-jasmine-typescript

    \n\n

    Projekt powstał aby dokonać konfiguracji projektu, gdzie wykorzystywana \n jest biblioteka Jasmine, a testy jednostkowe pisane są w TypeScript.

    \n
    • \n
  • \n

    test-typescript-webpack

    \n\n

    Super prosta konfiguracja TypeScript + Webpack.

    \n
    • \n
\n\n

Mam też kilka projektów prywatnych o których nie za bardzo mogę opowiadać.\nMogę delikatnie uchylić “rąbka tajemnicy”, że od jakiegoś czasu pracujemy\nz zespołem nad nowym projektem, który oparty jest na Angularze 5 - tym samym\nużywamy TypeScripta i jest :heart:

\n\n

•

\n\n
\n

Prośba

\n

Drogi czytelniku, mam do Ciebie pytanie:
\nOdpowiedz mi proszę w komentarzu, dlaczego Ty używasz TypeScripta?

\n
\n\n

Z pozdrowieniami dla Aleksandra.

2018-01-31 07:20:00 typescript-jak-zaczac ckbw97zyw0007i3umdszu2ola 2018-01-31 07:20:00 2018-01-31 07:20:00 @@ -3428,6 +3450,235 @@ ck9pkxrjc0216i3um05td18sw Nowy początek https://piecioshka.pl/blog/2020/05/02/n ckb650ipk0232i3umh96xg2di Dziękuję WarsawJS 💛 https://piecioshka.pl/blog/2020/06/08/warsawjs-dziekuje.html

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

\n\n
\n

W społeczności siła!

\n
\n\n
\n Baner promujący artykuł\n
\n\n

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

\n\n

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

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

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

\n\n

•

\n\n

Artykuły o wydarzeniach WarsawJS (na tym blogu)

\n\n\n\n

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

\n\n

•

\n\n

Jak to się zaczęło?

\n\n

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

\n\n
\n \n \n \n \n \n \n
\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n
\n \n \n \n \n \n \n
\n\n

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

\n\n

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

\n\n
\n

Regularność stała się naszym mottem!

\n
\n\n

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

\n\n

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

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

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

\n\n

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

\n\n

Konflikt zażegnany. Uff! ;)

\n\n

Kalendarium

\n\n

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

\n\n
    \n
  • \n

    2014-06-15

    \n\n

    Oficjalne rozpoczęcie działalności

    \n\n

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

    \n\n

    Poniżej znajdziecie zrzut ekranu z pierwszego maila w mojej skrzynce\n odbiorczej dotyczącego “WarsawJS”.

    \n\n
    \n \n \n \n
    \n
    • \n
  • \n

    2014-09-14

    \n\n

    Nagranie pierwszego zaproszenia na meetup

    \n\n
    \n\n

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

    \n\n

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

    \n\n

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

    \n\n

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

    \n\n
    \n\n

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

    \n\n

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

    \n\n

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

    \n\n

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

    \n
    • \n
  • \n

    2014-09-16

    \n\n

    Pierwszy meetup — WarsawJS Meetup #1

    \n\n
    \n \n \n \n
    \n\n

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

    \n\n

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

    \n\n

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

    \n\n

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

    \n\n

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

    \n
    • \n
\n\n

•

\n\n

Meetupy w “Państwomiasto”

\n\n

Rok 2014

\n\n
\n \n \n \n \n \n \n
\n\n

Rok 2015

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

Pierwsze urodziny 🎉

\n\n

(2015-09-16)

\n\n

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

\n\n
\n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n
\n\n

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

\n\n

Więcej zdjęć w galerii.

\n\n

•

\n\n

Rok 2015

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n
\n Piękni i Młodzi\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

•

\n\n
    \n
  • \n

    2016-05-11

    \n\n

    Pierwsza kobieta na scenie — Paulina Kamińska

    \n\n

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

    \n\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n\n

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

    \n\n

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

    \n
    • \n
\n\n

•

\n\n

Rok 2016

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

Drugie urodziny 🎉

\n\n

(2016-09-14)

\n\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

•

\n\n

Rok 2016

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
    \n
  • \n

    2016-12-04

    \n\n

    Pierwszy workshop — WarsawJS Workshop #1

    \n\n

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

    \n\n

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

    \n\n

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

    \n\n \n\n

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

    \n\n

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

    \n\n

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

    \n\n

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

    \n\n
    \n\n

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

    \n
    • \n
  • \n

    2017-01-11

    \n\n

    Pierwsza zmiana miejsca dla inicjatywy WarsawJS Meetup

    \n\n

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

    \n\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n\n

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

    \n\n

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

    \n\n

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

    \n
    • \n
\n\n

•

\n\n

Wspieramy WOŚP

\n\n

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

\n\n
\n \n \n \n
\n Koszulka z podpisami społeczności\n
\n
\n\n

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

\n\n

Zdjęcia z WarsawJS Meetup #30

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

•

\n\n

Meetupy w “The Place”

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n
\n 2/3 składu organizacyjnego (wtedy jeszcze byłem szczupły)\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n
\n Przed wydarzeniem. Organizatorzy i prelegenci.\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n
\n Nie wiem co tu się dzieje... ale kodziwo leci!
\n Zdjęcie pewnie robione podczas jednego z moich lightning talków.\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n
\n\n

•

\n\n

Workshop prowadzony samodzielnie — WarsawJS Workshop #9 — RxJS

\n\n

(2017-08-20)

\n\n

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

\n\n
\n \n \n \n \n \n \n
\n\n

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

\n\n

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

\n\n

•

\n\n

Trzecie urodziny 🎉

\n\n

(2017-09-13)

\n\n
\n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n

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

\n\n

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

\n\n

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

\n\n

•

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

•

\n\n

Pierwsza wzmianka w gazecie

\n\n

(2018-02-12)

\n\n

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

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

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

\n\n\n\n

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

\n\n

•

\n\n

Rok 2018

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

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

\n\n

•

\n\n
    \n
  • \n

    2018-02-16

    \n\n

    Pierwszy hackathon — Edukaton 2018

    \n\n

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

    \n\n

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

    \n\n

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

    \n\n

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

    \n\n

    Z tego miejsca składam serdeczne podziękowania ekipie:

    \n\n
      \n
    • Van Anh Dam
      • \n
    • Tomasz Dobrowolski
      • \n
    • Karolina Wysocka
      • \n
    • Katarzyna Grabowska
      • \n
    • Piotr Zientara
      • \n
    • oraz innym, którzy również przyczynili się do tego wydarzenia!
      • \n
    \n\n

    Podczas tego wydarzenia mieliśmy możliwość współpracy z byłą Minister\n Cyfryzacji panią Anną Streżyńską,\n którą zaprosiliśmy do Jury.

    \n\n

    Zdjęcia w galerii na fanpage’u.

    \n
    • \n
  • \n

    2018-10-10

    \n\n

    Nagrywanie wydarzenia WarsawJS Meetup #50

    \n\n

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

    \n\n

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

    \n\n

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

    \n\n

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

    \n\n

    Poniżej znajdziecie vlog z tego dnia:

    \n\n
    \n
    • \n
  • \n

    2018-10-28

    \n\n

    Pierwsza konferencja — ConFrontJS 2018

    \n\n

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

    \n\n
    \n\n

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

    \n\n
    \n \n \n \n
    \n\n

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

    \n\n

    Zdjęcia w galerii na fanpage’u

    \n
    • \n
\n\n

•

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

Czwarte urodziny 🎉

\n\n

(2018-09-12)

\n\n
\n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n
\n\n

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

\n\n

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

\n\n

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

\n\n

•

\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n

•

\n\n
    \n
  • \n

    2018-12-12

    \n\n

    Ostatni meetup w “The Place”

    \n\n

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

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

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

    \n
    • \n
\n\n

•

\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n

•

\n\n
    \n
  • \n

    2019-04-09

    \n\n

    Pierwszy szkolenie komercyjne — WarsawJS MasterClass #1

    \n\n

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

    \n\n

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

    \n\n

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

    \n
    • \n
\n\n

•

\n\n

WarsawJS w Himalajach!

\n\n

(2019-05-23)

\n\n

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

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

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

\n\n

•

\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

Piąte urodziny 🎉

\n\n

(2019-09-11)

\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n

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

\n\n

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

\n\n

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

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

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

\n\n

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

\n\n

•

\n\n

Rok 2019

\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n

•

\n\n
    \n
  • \n

    2019-12-07

    \n\n

    Druga konferencja — ConFrontJS 2019

    \n\n

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

    \n\n
    \n \n \n \n
    \n\n

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

    \n\n

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

    \n\n

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

    \n\n
    \n\n

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

    \n\n

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

    \n\n

    Zerknijcie tylko na ten timeline:

    \n\n \n
    • \n
\n\n

•

\n\n

Rok 2020

\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n
\n\n

Szkolenia — WarsawJS Workshop

\n\n
\n \n \n \n
\n Mocna ekipa z drugiego szkolenia, które było poświęcone językowi JavaScript.\n Nie ma nic piękniejszego, niż współpraca z ludźmi, którzy są\n zaangażowani.\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n
\n
\n Podsumowanie wydarzenia przez trenera WarsawJS Workshop #5\n
\n
\n\n
\n \n \n \n \n \n \n
\n\n
\n \n \n \n
\n Jedno z moich ulubionych zdjęć. Prosto z Matrixa!\n Wiecie dlaczego tak dobrze tutaj wyglądam? Bo szkoliłem ludzi\n z pasją. Kiedy wkładasz w coś serce, to nie ważne, że czegoś nie wiesz,\n najważniejsze, że się starasz! To te starania są tak cenne dla innych.\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n
\n Och! Szkolenia to frajda sama w sobie. Tyle ludzie w jednym miejscu,\n którzy chcą się rozwijać jako inżynierzy kodu! Było wspaniale być,\n częścią ekipy, która to wszystko rozkręcała!\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n
\n A tak wyglądała ekipa podczas szkolenia z React.js dla zaawansowanych.\n Serdeczne podziękowania dla trenerów regularnych i trenerów\n wspomagających.\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n \n \n
\n W drugiej połowie 2019 roku wszystkie szkolenia były organizowane\n w siedzibie firmy Sumo Logic.\n Lepszego biura w tym mieście nie widziałem.\n
\n
\n\n
\n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n \n
\n\n

A jak wyglądał 42. workshop?

\n\n

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

\n\n

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

\n\n

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

\n\n

Wydarzenia online

\n\n

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

\n\n

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

\n\n
    \n
  • WarsawJS Meetup #68
    • \n
  • WarsawJS Meetup #69
    • \n
  • WarsawJS Workshop #43
    • \n
  • WarsawJS Workshop #44
    • \n
\n\n

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

\n\n

Czy warto być organizatorem?

\n\n

Tak, warto!

\n\n

Doświadczenie w organizowaniu wydarzeń

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

Możliwość poznania innych organizatorów

\n\n

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

\n\n

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

\n\n

Podziękowania 💛❤️

\n\n

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

\n\n

…dla Społeczności

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

…dla Sponsorów

\n\n

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

\n\n

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

\n\n

…dla Wolontariuszy

\n\n

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

\n\n
    \n
  • Kinga Wigurska-Bąk
    • \n
  • Natalia Kędziora
    • \n
  • Tati Platonova
    • \n
  • Michał Szymczak
    • \n
  • Tomasz Budrewicz
    • \n
  • Mirek Stasiak
    • \n
\n\n
\n \n \n \n
\n W byciu wolontariuszem ważne jest dobrze się bawić!\n
\n
\n\n

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

\n\n
    \n
  • Anna Lukianova
    • \n
  • Łukasz Basaj
    • \n
\n\n
\n \n \n \n
\n Och! Co tu się dzieje! Czy ja właśnie używam jQuery do dodawania liczb?\n
\n
\n\n

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

\n\n

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

\n\n

…dla Współpracowników

\n\n

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

\n\n
    \n
  • Maciej Machniewski
    • \n
\n\n

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

\n\n

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

\n\n
    \n
  • Tiffany Horan
    • \n
\n\n

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

\n\n
    \n
  • Barry Solone
    • \n
\n\n

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

\n\n

…dla Rady Fundacji

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

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

\n\n

…dla Organizatorów

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n
    \n
  • Paulina Modras
    • \n
  • Krzysztof Modras
    • \n
  • Marcin Cimaszewski
    • \n
\n\n

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

\n\n
    \n
  • Katarzyna Grabowska
    • \n
  • Piotr Zientara
    • \n
\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n
\n

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

\n
\n\n

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

\n\n

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

\n\n

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

\n\n

•

\n\n

Podsumowanie 5 lat organizacji. Film stworzonym na wydarzenie urodzinowe.

\n\n
\n\n

•

\n\n
\n \n \n \n
\n Dziękuję 💙\n
\n
2020-06-08 06:51:47 dziekuje-warsawjs ckbw97zyw0007i3umdszu2ola 2020-06-08 06:51:47 2020-06-08 06:51:47 ckbj8uvyw023ii3umfnws72p0 Co to jest runtime? https://piecioshka.pl/blog/2020/06/17/runtime.html

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

\n\n

“Błąd został zauważony w czasie Runtime, czy Kompilacji?”

\n\n

Zdefiniujmy dwa ważne procesy:

\n\n
\n

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

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

\n
\n\n

oraz:

\n\n
\n

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

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

\n
\n\n

“Runtime do uruchomienia języka X”

\n\n

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

\n\n

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

\n\n\n\n
\n \n
\n\n

Błędy

\n\n

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

\n\n
TS2322: Type '(p: any) => void' is not assignable to type 'void'.\nTS2339: Property 'url' does not exist on type 'Page'.\nTS2307: Cannot find module './service'.\nTS2529: Duplicate identifier 'Promise'.\n\n
\n\n

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

\n\n
Uncaught TypeError: undefined is not a function\nUncaught ReferenceError: Invalid left-hand side in assignment\nUncaught TypeError: Converting circular structure to JSON\nUncaught TypeError: Cannot read property ‘foo’ of null\nUncaught RangeError: Maximum call stack size exceeded\n
2020-06-17 11:00:23 co-to-jest-runtime ckbw97zyw0007i3umdszu2ola 2020-06-17 11:00:23 2020-06-17 11:00:23 ckbw97zyw023zi3um1lv17iso Diagram klas w UML (przykłady w JavaScript) https://piecioshka.pl/blog/2020/06/26/uml-diagram-klas.html

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

\n\n

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

\n\n
\n

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

\n
\n\n

Klasa

\n\n

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

\n\n

Rysunek w ASCII art:

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

Przykład w kodzie JavaScript:

\n\n
class Computer {\n    // Prywatna właściwość\n    #startTime = 0;\n\n    // Publiczna metoda\n    powerOn() {\n        this.#startTime = Date.now();\n        // ...\n    }\n}\n\n// Sprawdźmy to!\nconst c = new Computer();\nc.powerOn();\nconsole.log(c instanceof Computer); // true\n
\n\n

•

\n\n

Relacje

\n\n

1. Association

\n\n
\n

PL: Asocjacja

\n
\n\n

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

\n\n

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

\n\n
    \n
  • \n

    Rysunek w ASCII art:

    \n\n 
      +-----------+     +----------+\n  | Developer |-—-->| Computer |\n  +-----------+     +----------+\n
    \n\n

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

    \n
    • \n
  • \n

    Przykład w kodzie JavaScript:

    \n\n 
      class Computer {\n      // ...\n  }\n  class Developer {\n      workOn(c /* Computer */) {\n          // ...\n      }\n  }\n\n  // Sprawdźmy to!\n  const c = new Computer();\n  const d = new Developer();\n  l.workOn(c);\n
    \n
    • \n
\n\n

•

\n\n

2. Inheritance / Generalization (is-a)

\n\n
\n

PL: Generalizacja, Dziedziczenie

\n
\n\n

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

\n\n

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

\n\n

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

\n\n
    \n
  • \n

    Rysunek w ASCII art:

    \n\n 
      +--------+      +----------+\n  | Laptop |-—--|>| Computer |\n  +--------+      +----------+\n
    \n\n

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

    \n
    • \n
  • \n

    Przykład w kodzie JavaScript:

    \n\n 
      class Computer {\n      powerOn() {\n          // ...\n      }\n  }\n  class Laptop extends Computer {}\n\n  // Sprawdźmy to!\n  const l = new Laptop();\n  l.powerOn();\n  console.log(l instanceof Computer); // true\n
    \n
    • \n
\n\n

•

\n\n

3. Realization / Implementation

\n\n
\n

PL: Realizacja / Implementacja

\n
\n\n

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

\n\n

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

\n\n
    \n
  • \n

    Rysunek w ASCII art:

    \n\n 
      +----------+           +------------------+\n  | Computer | - — - - |>| ProductInterface |\n  +----------+           +------------------+\n
    \n\n

    (przerywana linia z pustym trójkątem)

    \n
    • \n
  • \n

    Przykład w kodzie TypeScript:

    \n\n 
      interface Product {\n      getPrice(): number;\n  };\n\n  class Computer implements Product {\n      getPrice() {\n          return 99.95;\n      }\n  }\n\n  // Sprawdźmy to!\n  const c = new Computer();\n  c.getPrice(); // 99.95\n  // ...\n
    \n\n

    Powyższy snippet w Stackblitz, gotowy do modyfikacji:\n https://stackblitz.com/edit/uml-class-diagram-realization

    \n
    • \n
\n\n

•

\n\n

4. Dependency

\n\n
\n

PL: Zależność

\n
\n\n

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

\n\n

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

\n\n
    \n
  • \n

    Rysunek w ASCII art:

    \n\n 
      +---------+       +----------+\n  | Sticker | - - > | Computer |\n  +---------+       +----------+\n
    \n\n

    (przerywana linia ze strzałką)

    \n
    • \n
  • \n

    Przykład w kodzie JavaScript:

    \n\n 
      class Sticker {\n      stick(t /* Computer */) {\n          // ...\n      }\n  }\n\n  class Computer {\n      // ...\n  }\n\n  // Sprawdźmy to!\n  const c = new Computer();\n  const s = new Sticker();\n  s.stick(c);\n
    \n
    • \n
\n\n

•

\n\n

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

\n\n
\n

PL: Agregacja

\n
\n\n

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

\n\n

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

\n\n

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

\n\n
    \n
  • \n

    Rysunek w ASCII art:

    \n\n 
      +----------+     +-----+\n  | Computer |<>---| CPU |\n  +----------+     +-----+\n
    \n\n

    (ciągła linia z pustym rombem)

    \n
    • \n
  • \n

    Przykład w kodzie JavaScript:

    \n\n 
      class CPU {}\n  class HardDrive {}\n\n  class Computer {\n      constructor(cpu, hardDrive) {\n          this.cpu = cpu;\n          this.hardDrive = hardDrive;\n      }\n  }\n\n  // Sprawdźmy to!\n  const c = new Computer(new CPU(), new HardDrive('500GB'));\n
    \n
    • \n
\n\n

•

\n\n

6. Composition

\n\n
\n

PL: Kompozycja

\n
\n\n

Specjalny rodzaj agregacji.

\n\n

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

\n\n

Klasa B nie może istnieć samodzielnie.

\n\n

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

\n\n
    \n
  • \n

    Rysunek w ASCII art:

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

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

    \n
    • \n
  • \n

    Przykład w kodzie JavaScript:

    \n\n 
      class CPU {}\n  class HardDrive {}\n\n  class Computer {\n      constructor() {\n          this.cpu = new CPU();\n          this.hardDrive = new HardDrive('500GB');\n      }\n  }\n\n  // Sprawdźmy to!\n  const c = new Computer();\n
    \n
    • \n
\n\n

•

\n\n

Przykład

\n\n

Poniżej realizacja Diagramu Klas. Diagram stworzony podczas studiów.

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

tl;dr

\n\n
\n \n
\n Wszystkie relacje w jednym miejscu.\n
\n
2020-06-26 13:31:35 diagram-klas-w-uml-przyklady-w-javascript ckbw97zyw0007i3umdszu2ola 2020-06-26 13:31:35 2020-06-26 13:31:35 +ckqyydlse00020wjp0bee21q9 Dołączyłem do kursu ANF – Architektura Na Froncie https://devpebe.com/2021/07/10/dolaczylem-do-kursu-anf-architektura-na-froncie/ Dołączyłem do kursu ANF od Macieja Aniserowicza! Myślę, że to dobra decyzja, która pozwoli mi na zdobycie cennej wiedzy. Co to za kurs? Jest to kurs dla frontend developerów na poziomie mida lub seniora. Zgodnie z opisem na oficjalnej stronie kurs przeznaczony jest dla osób, którzy chcą poznać „architekturę na froncie”. Cytując informację ze strony […] 2021-07-10 14:06:15 dolaczylem-do-kursu-anf---architektura-na-froncie ckiplfn1c001ci3um4nlf8o4x 2021-07-11 08:46:54.35 2021-07-11 08:46:54.35 +ckqyydnqm00180wjptnppvhik Masonry grid - tutorial https://www.youtube.com/watch?v=5Bs-Hr9odmI Masonry grid to jeden z moich ulubionych sposobów na prezentację obrazków z różnym ratio. W tym odcinku przedstawiam prosty sposób na uzyskanie takiego efektu dla prostej listy przy użyciu cssowych kolumn.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-07-07 06:30:10 masonry-grid-tutorial ckmoh2k1y000050l0rtc97ktd 2021-07-11 08:46:56.878 2021-07-11 08:46:56.878 +ckqyydnjz00090wjpq89zbsf3 React&TypeScript: Jak zacząć #00 https://www.youtube.com/watch?v=uQn_1OmC1f4 Film - wstęp do rozpoczęcia pracy z Reactem i TypeScriptem, czyli jak rozpocząć prace jeżeli chcemy rozpocząć nowy projekt lub tylko spróbować.\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Przywitanie\n01:53 1 sposób - Create React App\n11:52 2 sposób - edytory internetowe\n16:02 3 sposób - własny boilerplate\n19:22 Zakończenie 2021-07-08 15:30:38 reactandtypescript:-jak-zaczac-00 ckjpkgp9u000012mnlbnkxu51 2021-07-11 08:46:56.639 2021-07-11 08:46:56.639 +ckqyydoke00240wjpyw3e370x JVM Tuesday vol. 45 https://blog.vived.io/jvm-tuesday-vol-45-2/ Dzisiaj mamy dla Was tylko dwa tematy - ale przebicie się przez jeden z nich zajmie dłuższą chwilę, więc wydaje się, że może to i lepiej. Pamiętajcie - Wasz głos się liczy. 2021-07-06 12:00:00 jvm-tuesday-vol.-45 ckmor5k8y000044moj65m13y0 2021-07-11 08:46:57.95 2021-07-11 08:46:57.95 +ckqyydph900360wjpsibims3q Frontend Thursday vol. 45 https://blog.vived.io/frontend-thursday-vol-45/ W tym tygodniu mamy dla Was kolejną betę TypeScript, trochę dywagacji na temat Enzyme.js i pełne wsparcie dla selektora `image-set`. 2021-07-08 10:56:40 frontend-thursday-vol.-45 ckmor5k8y000044moj65m13y0 2021-07-11 08:46:59.133 2021-07-11 08:46:59.133 +ckqyydph600340wjpoto9qbav Czy musisz znać programowanie funkcyjne? https://www.youtube.com/watch?v=kCF2nSu1Fd8 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/PBzsDm4z 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n\nW dzisiejszym odcinku opowiadam czym jest programowanie funkcyjne i czy musimy się nim przejmować, gdy zaczynamy swoją przygodę z programowaniem.\n \n📖 Ksiązka - https://github.com/MostlyAdequate/mostly-adequate-guide 📖\n\n\nFilip Mamcarczyk\nKacper Sokołowski\n\nIcons made by https://www.flaticon.com/authors/dinosoftlabs from www.flaticon.com 2021-07-10 18:00:10 czy-musisz-znac-programowanie-funkcyjne ckj9sdcq7000051l5pzwpbq9f 2021-07-11 08:46:59.13 2021-07-11 08:46:59.131 +ckqyydqqa00610wjp0b2jbvqq Code review dla ludzi z Discorda ⚡️ JS / React / Next.js https://www.youtube.com/watch?v=GFG8BONrY-k W tej serii robię code review i oceniam projekty zgłoszone przez widzów na moim Discordzie https://fullstak.pl/discord 😃 2021-07-09 07:45:45 code-review-dla-ludzi-z-discorda-js-react-next.js ckivz8t54001di3umfv7i4q26 2021-07-11 08:47:00.754 2021-07-11 08:47:00.754 +ckqyydrld00780wjpjh9zy9de Gotowe automatyzacje dla twórcow z Integromat i Airtable https://fsgeek.pl/post/automatyzacje-integromat-airtable/ Automatyzacje są uzależniające. Zaczynasz od jednej, potem nagle masz kilka i ciągle rośnie. W tym poście opisuję swoje kolejne automatyzacje, które wprowadziłem ostatnio do swojego bloga. 2021-07-06 16:00:00 gotowe-automatyzacje-dla-tworcow-z-integromat-i-airtable ckhxjb6o0000yi3umb3hg09jv 2021-07-11 08:47:01.873 2021-07-11 08:47:01.873 +ckqyydvcs00950wjpscixso8k Względne postrzeganie czasu: model matematyczny https://typeofweb.com/wzgledne-postrzeganie-czasu-model-matematyczny/#utm_source=rss&utm_medium=rss&utm_campaign=wzgledne-postrzeganie-czasu-model-matematyczny

Type of Web - Blog o programowaniu. 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…

\n

Wielu osobom wydaje się, że im stajemy się starsi, tym czas szybciej płynie. Mamy tysiące wspomnień ze wczesnej młodości, a później trudno nam odróżnić rok od roku. Ale czy aby na pewno tylko nam się wydaje? Czy to zjawisko jest jakoś opisane i uzasadnione? Gęstość zdarzeń a postrzeganie czasu Gdy rozmawiałem o …

\n

Artykuł Względne postrzeganie czasu: model matematyczny pochodzi z serwisu Type of Web.

2021-07-07 14:47:50 wzgledne-postrzeganie-czasu:-model-matematyczny ckiopy3xs0006i3umgmnv8l52 2021-07-11 08:47:06.748 2021-07-11 08:47:06.748 +ckqzh48rn00020wky10vsoy6h Obrona pracy dyplomowej https://devszczepaniak.pl/obrona-pracy-dyplomowej/

Ten wpis będzie dość nietypowy w kontekście innych wpisów z mojego bloga. Temat obrony pracy dyplomowej spędzał mi przez jakiś czas sen z powiek. Na szczęście obrona pracy dyplomowej jest już za mną, a do następnej mam jeszcze sporo czasu. W tym wpisie chciałbym się z Tobą podzielić moimi przemyśleniami i spostrzeżeniami odnośnie stresu przed … Czytaj dalej Obrona pracy dyplomowej

\n

Artykuł Obrona pracy dyplomowej pochodzi z serwisu Devszczepaniak.pl.

2021-07-11 17:17:22 obrona-pracy-dyplomowej ckiyvf2eg0012i3um2h8g0dup 2021-07-11 17:31:30.276 2021-07-11 17:31:30.275 +ckr07ebxs00020wl5fg4m7yb9 React Testing Library - testy accessibility https://frontlive.pl/blog/react-testing-library-testy-accessibility Testować accessibility możemy różnymi narzędziami i na różne sposoby... W tym wpisie na tapet bierzemy testy dostępności skupione na zakresie komponentu z pomocą biblioteki `jest-axe` 🧪 2021-07-12 00:00:00 react-testing-library-testy-accessibility ckgvhpmo0001ji3umfm7ubw86 2021-07-12 05:47:10.96 2021-07-12 05:47:10.96 +ckr0rdi1a00020wldva79sbyg Q&A - Pierwsze urodziny kanału https://www.youtube.com/watch?v=2BvpmSwNHs0 Przemyślenia po roku prowadzenia kanału. Chwila dla was widzów. Będzie możliwość połączenia na live i porozmawiania. 2021-07-12 14:47:57 qanda-pierwsze-urodziny-kanalu ckmoh2k1y000050l0rtc97ktd 2021-07-12 15:06:24.526 2021-07-12 15:06:24.526 +ckra6nr0300020wjgig67jjyj Command design pattern https://frontstack.pl/command-design-pattern/?utm_source=rss&utm_medium=rss&utm_campaign=command-design-pattern

Kolejnym wzorcem projektowym na naszej liście jest Command design pattern, nazywany również po prostu „Poleceniem”. Wzorzec ten jest przydatny w sytuacji, gdy chcemy oddzielić obiekty wydające polecenia od obiektów, które te polecenia będą wykonywać. Wyobraźmy sobie scenariusz, gdzie nasza aplikacja korzysta z dużej liczby wywołań API do jakiegoś konkretnego serwisu. Co w przypadku gdy serwis […]

\n

The post Command design pattern appeared first on Frontstack.pl.

2021-07-19 05:14:30 command-design-pattern ckc4s1jmo001ii3um6ovu5nhk 2021-07-19 05:24:12.531 2021-07-19 05:24:12.531 +ckr0tlcna00020wmjljjzooqp Jak zastosować State Machine w praktyce? | Wzorzec State Machine #2 https://www.youtube.com/watch?v=XRUFIQgOXJQ W tym odcinku miniserii o State Machine przechodzimy do prezentacji wzorca oraz zastosowania go w praktyce. Dowiesz się jak zamodelować stan i jego przejścia oraz napisać logikę, która pozwoli Ci zarządzać stanem komponentu React w sposób prostszy i mniej podatny na błędy.\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-07-12 16:00:15 jak-zastosowac-state-machine-w-praktyce-or-wzorzec-state-machine-2 ckiyt1v9s001fi3umcgnxbgiu 2021-07-12 16:08:30.022 2021-07-12 16:08:30.022 +ckr1y6kor00020wme0h75qs5f JVM Tuesday vol. 46 https://blog.vived.io/jvm-tuesday-vol-46/ W dniu dzisiejszym mamy dla Was GraalVM od Facebooka, GraphQL od Springa, a także raport podsumowujący pierwsze miesiące życia Scali 3. Zapraszamy do lektury! 2021-07-13 11:00:00 jvm-tuesday-vol.-46 ckmor5k8y000044moj65m13y0 2021-07-13 11:04:44.859 2021-07-13 11:04:44.859 +ckr2fbm1100020wi5w5teejzr Lokalizacja użytkownika https://frontstack.pl/lokalizacja-uzytkownika/?utm_source=rss&utm_medium=rss&utm_campaign=lokalizacja-uzytkownika

Na naszych stronach i aplikacjach webowych coraz częściej sięgamy po narzędzia, które pozwalają nam dowiedzieć się nieco więcej na temat odwiedzającego. Dzięki temu możemy zaproponować mu treści bądź funkcjonalności, które będą dużo bardziej spersonalizowane. Dość popularną techniką z tym związaną jest lokalizacja użytkownika. W tym krótkim artykule omówimy sobie dwa najpopularniejsze sposoby na to, aby […]

\n

The post Lokalizacja użytkownika appeared first on Frontstack.pl.

2021-07-13 18:57:59 lokalizacja-uzytkownika ckc4s1jmo001ii3um6ovu5nhk 2021-07-13 19:04:33.349 2021-07-13 19:04:33.349 +ckr3bjkt800020wjna7lm5qvs React&TypeScript: Propsy #01 https://www.youtube.com/watch?v=HsI6m0a4iPk Omawiamy propsy w komponencie klasowym oraz funkcyjnym.\n\nSandbox:\nhttps://codesandbox.io/s/doman-code-ts-react-props-3sx2k\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Przywitanie\n00:32 Propsy w komponencie klasowym\n08:16 Modyfikator readonly w propsach klasowego komponentu\n13:17 Propsy w komponencie funkcyjnym\n11:26 Różnica pomiędzy brakiem a destrukturyzacją propsów\n14:45 defaultProps\n15:42 type FunctionComponents\n17:53 type FC\n19:56 Podsumowanie\n21:16 Zakończenie 2021-07-14 10:00:15 reactandtypescript:-propsy-01 ckjpkgp9u000012mnlbnkxu51 2021-07-14 10:06:32.732 2021-07-14 10:06:32.732 +ckr4jej1900020wmfnc4hnsm4 Do czego jest typ never? #TypeScript https://www.youtube.com/watch?v=B_cm1kGsnxY 🚀 COTYGODNIOWA DAWKA WIEDZY NA MAILA: https://jsdzem.pl/newsletter\n\n🔴 Zobacz przykład jak korzystać z typu never w języku TypeScript. Pokazuję pewną sytuację, gdzie TS może Cię zaskoczyć. Co oznacza zbiór pusty? Dowiesz się także, co to jest test wyczerpania zwany jako exhaustive check.\n\n0:00 - Krótka powtórka z podstawówki\n0:53 - Test wyczerpania\n2:43 - Jak pozbyć się undefined?\n6:22 - Utworzenie funkcji assertUnreachable\n10:42 - Jakie są dobre praktyki i ich korzyści?\n\n🔥 Nauczę Cię myśleć jak programista, przestrzegę Cię przed typowymi błędami oraz pomogę Ci zbudować warsztat na miarę zawodowca. Na tym kanale dowiesz się jakie triki stosuję na codzień w pracy jako frontend developer.\n\n👨‍🏫 Nazywam się Jakub Pusiak i tworzę kanał JS Dżem. Zawodowo jestem programistą (inżynier oprogramowania, software engineer) i czerpię z tego ogromną satysfakcję. Byłem też trenerem w szkole programowania. Teraz publikuję filmy na YouTube. 2021-07-15 06:30:01 do-czego-jest-typ-never-typescript ckkb3uw6b00002smi6pw37cjt 2021-07-15 06:34:20.253 2021-07-15 06:34:20.253 +ckr4t2oir00020wmi9d5c7tbc Frontend Thursday vol. 46 https://blog.vived.io/frontend-thursday-vol-46/ W dzisiejszej edycji mamy dla Was wsparcie dla Custom Elements w Vue 3, rozpoczęcie prac nad komponentami działającymi bez modułów w Angularze i kawałek dobrego tekstu o tym jak (nie)działą npm audit. 2021-07-15 10:51:35 frontend-thursday-vol.-46 ckmor5k8y000044moj65m13y0 2021-07-15 11:05:03.651 2021-07-15 11:05:03.651 +ckr8wbts500020wl6a5gp078i Software Craftsmanship Sunday vol. 46 https://blog.vived.io/software-craftsmanship-sunday-vol-46/ Dzisiaj znowu w niedzielę, ale mamy dla Was trzy dość obszerne tematy, które mam nadzieję umilą Wam niedziele przed powrotem do ulubionej pracy - jeśli praca nie jest ulubiona, polecamy zwłaszcza sekcje trzecią. Tak czy siak - wszystkich zapraszamy do lektury. 2021-07-18 07:41:26 software-craftsmanship-sunday-vol.-46 ckmor5k8y000044moj65m13y0 2021-07-18 07:47:13.925 2021-07-18 07:47:13.925 +ckratofa400020wmsofe1c5j3 Czym jest GitHub Copilot? Czy pozbawi programistów pracy? https://www.youtube.com/watch?v=KlTGJqVAjVw Premiera GitHub Copilot rozeszła się szerokim echem po świecie programowania. Jesteśmy przyzwyczajeni do autokompletowania wyrażeń a nawet całych linijek kodu, ale generowanie sugestii całych funkcji, klas czy komponentów przez sztuczną inteligencję budzi wiele emocji. \n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-07-19 16:00:11 czym-jest-github-copilot-czy-pozbawi-programistow-pracy ckiyt1v9s001fi3umcgnxbgiu 2021-07-19 16:08:35.164 2021-07-19 16:08:35.164 +cksg25gtu00020wmsfoaxma4x JVM Tuesday vol. 51 - Projekt Wakefield oraz zbuduj własnego Springa 🌿 https://blog.vived.io/jvm-tuesday-vol-51/ W dzisiejszej edycji tylko dwie informacje (no, tak naprawdę trzy, ale jedna ciutkę zakamuflowana). Z lektury dowiecie się, jak wyglądają pracę nad wsparciem Waylanda a także... jak krok po kroku zbudować Springa.\n\nZapraszamy do lektury! 2021-08-17 12:15:32 jvm-tuesday-vol.-51-projekt-wakefield-oraz-zbuduj-wlasnego-springa ckmor5k8y000044moj65m13y0 2021-08-17 12:44:20.466 2021-08-17 12:44:20.466 +ckraw1dsl00020vl4ew3frudj SVG - Zastosowanie i optymalizacja obrazków wektorowych https://www.youtube.com/watch?v=AgXB6J4Yrxk 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/PBzsDm4z 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n0:00 Intro\n1:23 Co to jest SVG?\n3:32 Jak załączyć obrazki SVG do strony\n4:30 Optymalizacja SVG\n6:16 Outro\n\nW dzisiejszym odcinku opowiadam czym jest grafika wektorowa. Pokazuję jak używać obrazków SVG i jak można je zoptymalizować.\n \nTutoriale:\nhttps://www.youtube.com/watch?v=FCOeMy7HrBc\nhttps://www.youtube.com/watch?v=PQxtlY19kto&list=PLL8woMHwr36F2tCFnWTbVBQAGQ6nTcXOO\n\n\nFilip Mamcarczyk\nKacper Sokołowski\n\nIcons made by https://www.flaticon.com/authors/dinosoftlabs from www.flaticon.com 2021-07-19 17:00:10 svg-zastosowanie-i-optymalizacja-obrazkow-wektorowych ckj9sdcq7000051l5pzwpbq9f 2021-07-19 17:14:38.997 2021-07-19 17:14:38.997 +ckrbqeenx00020wjy8owe9zug Notion API - wstęp https://www.youtube.com/watch?v=MpoB9K-0kJ4 Pierwszy odcinek z serii o NotionAPI. Pokazuję w nim jak stworzyć integracje i połączyć się z bazą danych stworzoną w aplikacji Notion. Fajna okazja na stworzenie sobie fajnego projektu do portfolio, gdzie możesz pokazać jak pracujesz z zewnętrznym API używając dowolnego frameworka.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-07-19 15:21:02 notion-api-wstep ckmoh2k1y000050l0rtc97ktd 2021-07-20 07:24:35.133 2021-07-20 07:24:35.133 +ckrbw6pbt00020wmi4rf2mpb7 JVM Tuesday vol. 47 https://blog.vived.io/jvm-tuesday-vol-47/ Piszesz sobie "JVMowy Wtorek", szukasz źródeł do jednej z sekcji... a tutaj okazuje się, że Java 17 godzinę temu dostała Feature Freeze 🥶, więc Twoja narracja o sezonie ogórkowym 🥒 jest trochę nie na miejscu 😉 . Zapraszam więc do lektury nowej edycji! 2021-07-20 10:00:00 jvm-tuesday-vol.-47 ckmor5k8y000044moj65m13y0 2021-07-20 10:06:33.401 2021-07-20 10:06:33.401 +ckrc1unns00020wk0p0diqdqh ADR powie ci prawdę o projekcie https://fsgeek.pl/post/adr-architecture-decision-record/ Mówi ci coś skrót ADR? Jest to sposób dokumentacji projektu, który uwzględnia decyzje architektoniczne, jakie zachodzą w danym projekcie. Brzmi poważnie, ale da się to prosto wprowadzić i czerpać (czasem duże) zyski. 2021-07-20 16:00:00 adr-powie-ci-prawde-o-projekcie ckhxjb6o0000yi3umb3hg09jv 2021-07-20 12:45:09.064 2021-07-20 12:45:09.064 +ckrejki7e00020wmnnhs2afmy Next.js + TypeScript + Vercel | SETUP https://www.youtube.com/watch?v=kt29hvU_srg 🚀 COTYGODNIOWA DAWKA WIEDZY NA MAILA: https://jsdzem.pl/newsletter\n\n🔴 Pokazuję jak ustawić framework Next.js do programowania w języku TypeScript. Zobacz jak szybko możesz postawić bardzo przyjemne środowisko na platformie Vercel. Poznaj korzyści płynące z takiej konfiguracji.\n\n0:00 - Zakładam nowy projekt na platformie Vercel\n0:59 - Sklonowanie projektu na komputer\n1:39 - Instalowanie TypeScripta w projekcie Next.js\n3:47 - Dostosowywanie zawartości projektu\n6:30 - Mega proste deployowanie na produkcję\n8:01 - Jak działa środowisko Vercela?\n\n🔥 Nauczę Cię myśleć jak programista, przestrzegę Cię przed typowymi błędami oraz pomogę Ci zbudować warsztat na miarę zawodowca. Na tym kanale dowiesz się jakie triki stosuję na codzień w pracy jako frontend developer.\n\n👨‍🏫 Nazywam się Jakub Pusiak i tworzę kanał JS Dżem. Zawodowo jestem programistą (inżynier oprogramowania, software engineer) i czerpię z tego ogromną satysfakcję. Byłem też trenerem w szkole programowania. Teraz publikuję filmy na YouTube. 2021-07-22 06:30:04 next.js-+-typescript-+-vercel-or-setup ckkb3uw6b00002smi6pw37cjt 2021-07-22 06:36:40.874 2021-07-22 06:36:40.874 +ckresj3i000020vmisj3p23kd position: absolute wyjaśnione w 10 minut https://www.youtube.com/watch?v=uDjv-CsXqbs 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/q88RUeTHbU 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nFilip Mamcarczyk \nKacper Sokołowski 2021-07-22 10:36:24 position:-absolute-wyjasnione-w-10-minut ckj9sdcq7000051l5pzwpbq9f 2021-07-22 10:47:31.704 2021-07-22 10:47:31.704 +ckrexrbzy00020wmakvqkdxc7 Frontend Thursday vol. 47 https://blog.vived.io/frontend-thursday-vol-47/ W dzisiejszej edycji mamy dla Was informacje o nowych wersjach Embera, V8 i Firefoxa oraz zmianę cyklu wydawniczego Electrona. 2021-07-22 12:50:59 frontend-thursday-vol.-47 ckmor5k8y000044moj65m13y0 2021-07-22 13:13:54.046 2021-07-22 13:13:54.046 +ckrf6efdc00020wmtyy9q9dcn Event Bubbling, Capture, Propagation https://tworcastron.pl/blog/event-bubbling-capture-propagation/

Poziom niezrozumienia event bubblingu w DOMie można przyrównać do this w JSie. Po tym filmiku zobaczycie, że jest to tak naprawdę proste i sensowne. Właśnie wjechał nowy odcinek z serii […]

\n

Artykuł Event Bubbling, Capture, Propagation pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-07-22 16:49:55 event-bubbling-capture-propagation ckbbw3jvs000li3umgw19edq9 2021-07-22 17:15:48.432 2021-07-22 17:15:48.432 +ckrhgf7u200020wmk6i3mbhom Software Craftsmanship Saturday vol. 47 https://blog.vived.io/software-craftsmanship-sunday-vol-47/ W dniu dzisiejszym - jedna z większych afer związanych z "prywatnością" od lat oraz dwa interesujące case study od Facebooka.\n\nZapraszamy do lektury! 2021-07-24 07:25:44 software-craftsmanship-saturday-vol.-47 ckmor5k8y000044moj65m13y0 2021-07-24 07:31:53.834 2021-07-24 07:31:53.834 +ckrhlxoml00020wmg920nfbmx React&TypeScript: State #02 https://www.youtube.com/watch?v=iVDUZYSgonk Omawiamy state w komponencie klasowym oraz funkcyjnym.\n\nDodatkowo wrócimy do propsów i uzupełnimy wiedzę o nich jak rozwinięcie, ponieważ jest to częściowo powiązane w typowaniem stanu.\n\nSandbox:\nhttps://codesandbox.io/s/doman-code-ts-react-state-gi1ef\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Przywitanie 2021-07-24 10:00:32 reactandtypescript:-state-02 ckjpkgp9u000012mnlbnkxu51 2021-07-24 10:06:13.485 2021-07-24 10:06:13.485 +ckrjd0u0400020wl2x2j2ico4 Inversion of Control z użyciem Dependency Injection https://devszczepaniak.pl/inversion-of-control-z-uzyciem-dependency-injection/

Inversion of Control jest bardzo wartościowym wzorcem postępowania podczas pisania programów pisanych w oparciu o programowanie zorientowane obiektowo. W tym artykule dowiesz się, na czym polega Inversion of Control (lub też swojskie – odwrócenie sterowania), a także poznasz jedną z najczęściej spotykanych form zastosowania odwrócenia sterowania czyli Dependency Injection (wstrzyknięcie zależności). W artykule wykorzystuję przykłady … Czytaj dalej Inversion of Control z użyciem Dependency Injection

\n

Artykuł Inversion of Control z użyciem Dependency Injection pochodzi z serwisu Devszczepaniak.pl.

2021-07-25 15:17:52 inversion-of-control-z-uzyciem-dependency-injection ckiyvf2eg0012i3um2h8g0dup 2021-07-25 15:32:16.228 2021-07-25 15:32:16.228 +ckrjl546l00020wl9hb80s3hs Szybka konfiguracja projektu Tailwind CSS / UI / Vite https://www.youtube.com/watch?v=rkkd2PliG0Y Tailwind CSS w połączeniu z Tailwind UI wykorzystuję w niemal każdym projekcie od prawie dwóch lat. Ich główną korzyścią jest bardzo szybki development oraz fakt że ułatwiają utrzymanie spójności interfejsu. \n\nW tym filmie pokazuję jak łatwo skonfigurować nowy projekt oraz kilka praktyk które wykorzystuję w codziennej pracy. \n\nWspomniane linki: \nhttps://tailwindcss.com/\nhttps://tailwindui.com/\nhttps://vitejs.dev/\nhttp://figmaster.co/\n\nChcesz zawsze pozostać na bieżąco z programowaniem? \n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2021-07-25 19:00:10 szybka-konfiguracja-projektu-tailwind-css-ui-vite ckieg15g0001bi3um0fj3gred 2021-07-25 19:19:32.973 2021-07-25 19:19:32.973 +ckrkdesab00020wmi84otdb33 Hosting stron i aplikacji webowych https://frontstack.pl/hosting-stron-i-aplikacji-webowych/?utm_source=rss&utm_medium=rss&utm_campaign=hosting-stron-i-aplikacji-webowych

Stworzenie swojej pierwszej strony lub aplikacji to nie lada wyczyn dla początkującego programisty 🙂. Jedną z pierwszych rzeczy, o których myślimy tuż po zakończeniu projektu to pochwalenie się nim światu. Pozostaje tylko pytanie – jak to zrobić? W tym wpisie przyjrzymy się najpopularniejszym darmowym usługom, dzięki którym przeniesiemy naszą pracę z lokalnego komputera do Internetu. […]

\n

The post Hosting stron i aplikacji webowych appeared first on Frontstack.pl.

2021-07-26 08:08:00 hosting-stron-i-aplikacji-webowych ckc4s1jmo001ii3um6ovu5nhk 2021-07-26 08:30:53.363 2021-07-26 08:30:53.363 +ckrkv5n9g00020vldre2k0bf1 Bądź jak Jeff BEZOS i Richard BRANSON - Jak osiągać ambitne cele https://www.youtube.com/watch?v=gx82Jh2Zp6g Kiedy prezydent Kennedy deklarował w 1962r., że Stany Zjednoczone w ciągu dekady umieszczą człowieka na Księżycu, to słuchacze jego przemówienia mieli w sobie tyle samo nadziei co przerażenia. Technologia nie istniała, know-how nie było, a budżet nie był zabezpieczony.\n\nFinał tej historii był tylko jeden - obietnice udało się spełnić, a już dekadę później technologia lotów w kosmos wydawała się trywialna i zupełnie w zasięgu ręki ludzkości. Jak do tego doprowadzono?\n\nTen znakomity przykład "moonshot thinking" to główny temat książki "Think like a Rocket Scientist" której recenzję prezentujemy w najnowszym odcinku na naszym kanale. Jakie są nasze wrażenia i jaką ocenę daliśmy tej pozycji? Zapraszamy do obejrzenia!\n\nZdjęcie w tle: https://pixabay.com/photos/rocket-launch-rocket-take-off-nasa-67721/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-07-26 16:00:20 badz-jak-jeff-bezos-i-richard-branson-jak-osiagac-ambitne-cele ckiyt1v9s001fi3umcgnxbgiu 2021-07-26 16:47:40.036 2021-07-26 16:47:40.036 +ckrlm6ezv00020vjt22vpl1en 🍿Web Prasówka #16 https://www.youtube.com/watch?v=T-HefHKQi1c Najciekawsze newsy ze świata WebDev.\n⚡️ #react​​​, #javascript​​​, CSS, backend, #frontend​​​, heheszki, nowe technologie and more. 2021-07-27 05:21:30 web-prasowka-16 ckivz8t54001di3umfv7i4q26 2021-07-27 05:24:05.611 2021-07-27 05:24:05.611 +ckrlxim5a00020wmktehct0q5 JVM Tuesday vol. 48 https://blog.vived.io/jvm-tuesday-vol-48/

1. Wydano GraalVM 21.2 🏆

Wiem, że ciągłe czytanie nowości z GraalVM to dla większości osób lizanie cukierka przez papierek, ale tak naprawdę większość najbardziej intrygujących aspektów

2021-07-27 10:30:00 jvm-tuesday-vol.-48 ckmor5k8y000044moj65m13y0 2021-07-27 10:41:30.526 2021-07-27 10:41:30.526 +ckrmakmlt00020wjxko9lg5fl Jak typować React Context? #TypeScript https://www.youtube.com/watch?v=_fW3FbXx35U 🚀 COTYGODNIOWA DAWKA WIEDZY NA MAILA: https://jsdzem.pl/newsletter\n\n🔴 Type safety w React Context? Musiałem troszkę pogłówkować zanim znalazłem dla mnie najlepszy sposób na otypowanie konteksty z TypeScriptem. W tym odcinku dowiesz się jak wnioskować typy bezpośrednio z custom hooka. Zobaczysz jak poradzić sobie z problemem domyślnej wartości kontekstu, aby nie pisać żadnych assercji lub zaślepek.\n\n0:00 - Problem z domyślną wartością kontekstu\n1:03 - Co będę robił - hook useSettings\n1:48 - Tworzenie kontekstu od zera\n3:54 - Wnioskowanie typu danych kontekstu\n6:11 - Używanie kontekstu w komponencie\n10:37 - Tworzenie custom hooka useSettings\n\n🔥 Nauczę Cię myśleć jak programista, przestrzegę Cię przed typowymi błędami oraz pomogę Ci zbudować warsztat na miarę zawodowca. Na tym kanale dowiesz się jakie triki stosuję na codzień w pracy jako frontend developer.\n\n👨‍🏫 Nazywam się Jakub Pusiak i tworzę kanał JS Dżem. Zawodowo jestem programistą (inżynier oprogramowania, software engineer) i czerpię z tego ogromną satysfakcję. Byłem też trenerem w szkole programowania. Teraz publikuję filmy na YouTube. 2021-07-27 16:30:04 jak-typowac-react-context-typescript ckkb3uw6b00002smi6pw37cjt 2021-07-27 16:46:59.441 2021-07-27 16:46:59.441 +ckrmg1skn00020wlal3w39egd Asynchroniczność i Event Loop w JS 🔥 #shorts https://www.youtube.com/watch?v=jpGV1Cu3V3g #shorts\n\n👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/q88RUeTHbU 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\nEvent loop i async javascript to trudny temat, dlatego mamy dla Was krótki frontendowy poradnik, który pomoże Wam zrozumieć te mechanizmy.\n\nFilip Mamcarczyk \nKacper Sokołowski 2021-07-27 19:01:05 asynchronicznosc-i-event-loop-w-js-shorts ckj9sdcq7000051l5pzwpbq9f 2021-07-27 19:20:18.407 2021-07-27 19:20:18.407 +ckrmnfry400020wmlxp83tnw7 #2 NotionApi - projekt graficzny i setup https://www.youtube.com/watch?v=Hn1EqvE9bX4 Druga część o NotionAPI. Pokazuję jak tworzę projekt graficzny dla aplikacji do zbierania pytań na Q&A oraz sugestii filmów na kanał programistafrontend.\n\nLinki z odcinka:\n\nhttps://hype4.academy/ - Hype4Academy\nhttps://www.youtube.com/channel/UC_Dq0oUEi7uXhdUX8prunbw - kanał Michała Malewicza\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-07-27 22:29:17 2-notionapi-projekt-graficzny-i-setup ckmoh2k1y000050l0rtc97ktd 2021-07-27 22:47:08.092 2021-07-27 22:47:08.092 +ckrn5x2jc00020wl870e63by8 Github Actions - Wykonywanie poleceń SSH, automatyczny deploy https://www.youtube.com/watch?v=bhi22MqO7RY Z tego wideo dowiesz się czym jest Github Actions oraz jak w prosty sposób zautomatyzować deploy kodu na własny serwer VPS. W tym konkretnym przypadku posłużyłem wtyczką, która umożliwia wykonywanie poleceń przez SSH. \n\n0:00:00 - Co umożliwia Github Actions?\n0:03:00 - Nowe workflow\n0:06:00 - Marketplace Github Actions\n0:07:40 - Wykonywanie poleceń SSH \n0:10:20 - Sekrety\n0:12:00 - Klucz dostępowy do serwera\n0:13:30 - Manualne odpalenie workflow \n0:16:00 - Automatyczny deploy z brancha\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-07-27 19:36:49 github-actions-wykonywanie-polecen-ssh-automatyczny-deploy ckivz8t54001di3umfv7i4q26 2021-07-28 07:24:28.056 2021-07-28 07:24:28.056 +ckrn6qalq00020vjzgfvv53l5 Drogie bugi w CSS, Yarn 3.0, Zły npm audit, Polska Cyber Armia, Przyszłość Weba 🍿Web Prasówka #16 https://www.youtube.com/watch?v=T-HefHKQi1c Najciekawsze newsy ze świata WebDev.\n⚡️ #react​​​, #javascript​​​, CSS, backend, #frontend​​​, heheszki, nowe technologie and more. 2021-07-28 07:36:32 drogie-bugi-w-css-yarn-3.0-zly-npm-audit-polska-cyber-armia-przyszlosc-weba-web-prasowka-16 ckivz8t54001di3umfv7i4q26 2021-07-28 07:47:11.534 2021-07-28 07:47:11.534 +ckrnav9x700020vjpldj0tyml Praca Hybrydowa: State of the Union na Lipiec 2021 https://blog.vived.io/praca-hybrydowa-state-of-the-union-na-lipiec-2021/

Swego czasu przeczytałem bardzo mądry cytat: “Praca Zdalna była prosta, to Praca Hybrydowa będzie stanowić wyzwanie”. Podpisuję się pod nim rękami i nogami - próba ułożenia pracy hybrydowej tak,

2021-07-28 09:30:00 praca-hybrydowa:-state-of-the-union-na-lipiec-2021 ckmor5k8y000044moj65m13y0 2021-07-28 09:43:02.395 2021-07-28 09:43:02.395 +ckrniikyv00020wjs7zjbeenl Decorator Design Pattern https://frontstack.pl/decorator-design-pattern/?utm_source=rss&utm_medium=rss&utm_campaign=decorator-design-pattern

Decorator Design Pattern, nazywany również po prostu dekoratorem lub nakładką, jest wzorcem projektowym, dzięki któremu będziemy mogli dynamicznie rozszerzać funkcjonalność posiadanych przez nas klas. Co ważne, funkcjonalności te nie będą dodawane do głównej klasy w postaci kolejnych metod. Nie będziemy również tworzyć dziesiątek podklas rozszerzających klasę główną. Zamiast tego, skorzystamy tutaj z tzw. dekoratorów w […]

\n

The post Decorator Design Pattern appeared first on Frontstack.pl.

2021-07-28 13:07:15 decorator-design-pattern ckc4s1jmo001ii3um6ovu5nhk 2021-07-28 13:17:07.111 2021-07-28 13:17:07.111 +ckrnr0zn900020wmp5fktmj73 Łatwa i szybka konfiguracja z Github poprzez SSH https://www.oskarkowalow.pl/blog/latwa-i-szybka-konfiguracja-z-github-poprzez-ssh W tym wpisie opiszę jak w łatwy sposób połączyć się z Github-em za pomocą SSH.\nDzięki takiemu połączeniu możemy rozpocząć pracę ze zdalnym… 2021-07-28 00:00:00 latwa-i-szybka-konfiguracja-z-github-poprzez-ssh ckocpwuso0019afl7he6igw3f 2021-07-28 17:15:22.869 2021-07-28 17:15:22.869 +ckrp0nfh900020wkzp3e38ywj Frontend Thursday vol. 48 https://blog.vived.io/frontend-thursday-vol-48/ W dzisiejszej edycji mamy dla Was Yarn 3.0 i zbliżające się wielkimi krokami nowe Firebase JS SDK. 2021-07-29 14:26:09 frontend-thursday-vol.-48 ckmor5k8y000044moj65m13y0 2021-07-29 14:32:32.541 2021-07-29 14:32:32.541 +ckrp5hhvk00020wlai8e771vg 5 sposobów na podmianę wyrazów w tekście | join, replace, replaceAll https://tworcastron.pl/blog/5-sposobow-na-podmiane-wyrazow-w-tekscie-join-replace-replaceall/

5 sposobów na podmianę wyrazów w tekście | join, replace, replaceAll [wideo]

\n

Artykuł 5 sposobów na podmianę wyrazów w tekście | join, replace, replaceAll pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-07-29 16:35:42 5-sposobow-na-podmiane-wyrazow-w-tekscie-or-join-replace-replaceall ckbbw3jvs000li3umgw19edq9 2021-07-29 16:47:53.792 2021-07-29 16:47:53.792 +ckrqixt9e00020wl7fuo8svlb Instalowanie zależności w projekcie poprzez npm install https://www.oskarkowalow.pl/blog/instalowanie-zaleznosci-w-projekcie-poprzez-npm-install NPM (z angielskiego node package manager ) to domyślny menedżer pakietów używany w środowisku uruchomieniowym Javascript w NodeJS.\nDzięki… 2021-07-30 00:00:00 instalowanie-zaleznosci-w-projekcie-poprzez-npm-install ckocpwuso0019afl7he6igw3f 2021-07-30 15:52:16.226 2021-07-30 15:52:16.226 +ckrqyf83900020wmiki6gk90m VOoDoODESIGN.pl https://www.webkrytyk.pl/2021/07/31/voodoodesign-pl/ Ostatnio na jednym forum pojawiła się reklama VOoDoODESIGN.pl. Postanowiłem więc przyjrzeć się tej stronie nieco bliżej. Działanie Pierwsze, co rzuca się w oczy, to niestandardowy kursor myszy. Nie jest on jednak zaimplementowany jako kursor, ale po prostu obrazek, który śledzi natywny kursor myszy. Z kolei natywny kursor jest ukryty przy pomocy cursor: none. To sprawia … Czytaj dalej VOoDoODESIGN.pl 2021-07-30 23:00:52 voodoodesign.pl cki2dml0o000di3umgjexb6pk 2021-07-30 23:05:42.837 2021-07-30 23:05:42.837 +ckrrfjzr700020wmaoyc3rgjj Software Craftsmanship Saturday vol. 48 https://blog.vived.io/software-craftsmanship-saturday-vol-48/ Tydzień temu mieliśmy dla Was mocno techniczne Case Studies, dzisiaj będzie nieco "miękcej", jednak niemniej ciekawie. Przyjrzymy się bowiem najnowszemu raportowi JetBrains, ale również porozmawiamy o pieniążkach i wirtualnych wszechświatach nieograniczonych doświadczeń. Zapraszam do lektury! 2021-07-31 06:55:56 software-craftsmanship-saturday-vol.-48 ckmor5k8y000044moj65m13y0 2021-07-31 07:05:18.787 2021-07-31 07:05:18.787 +ckrt3jxz200020wl21kb3oukf Optymalizacja scrollowania na stronie / Zoptymalizowany Front-end https://www.youtube.com/watch?v=5EAJJvov9ys Z tego wideo dowiesz się:\n- że kiedykolwiek użytkownik scrolluje stronę, przeglądarka musi ją na nowo "namalować" - im mniej operacji "paint", tym lepiej\n- jeśli podczas scrollowania jakieś elementy się przesuwają (parallax), najprawdopodobniej spowoduje to efekt "jank"\n- że korzystając z narzędzia DevTools / Rendering / Paint Flashing, możesz łatwo wychwycić, które elementy podczas scrollowania są malowane na nowo; to samo tyczy się opcji "Scrolling Performance Issues"\n- które style CSS są kosztowne (np. border-radius, position: fixed)\n- kiedy korzystać z requestAnimationFrame\n- czym są Passive Event Listeners\n\nSzkolenie o optymalizacji frontendu: https://www.webdevinsider.pl/zoptymalizowany-frontend 2021-08-01 10:51:24 optymalizacja-scrollowania-na-stronie-zoptymalizowany-front-end ckjrjuqf900002bk2kpgy4181 2021-08-01 11:04:53.438 2021-08-01 11:04:53.438 +ckrt7sv4z00020wl4ugx6unp8 Komentarze w kodzie https://devszczepaniak.pl/komentarze-w-kodzie/

Tematowi komentarzy w kodzie poświęciłem kiedyś wpis, w czasach gdy blog nie istniał w obecnej formie i pod obecną nazwą. Niestety, nie posiadam treści zawartej w tamtym wpisie, ale pamiętam, że wywołał on dyskusję, co pozwoliło na wymianę poglądów i punktów widzenia. Temat wydaje mi się na tyle ciekawy, że warto do niego wrócić. Ponowne … Czytaj dalej Komentarze w kodzie

\n

Artykuł Komentarze w kodzie pochodzi z serwisu Devszczepaniak.pl.

2021-08-01 12:53:31 komentarze-w-kodzie ckiyvf2eg0012i3um2h8g0dup 2021-08-01 13:03:48.131 2021-08-01 13:03:48.131 +ckrta0omd00020vmgxe3zmgr4 Czym jest Scrum? https://www.oskarkowalow.pl/blog/czym-jest-scrum Załóżmy, że wraz z innymi osobami chcesz stworzyć jakiś produkt.\nPodczas jego planowania i wytwarzania pojawi się masa pytań i problemów, z… 2021-08-01 00:00:00 czym-jest-scrum ckocpwuso0019afl7he6igw3f 2021-08-01 14:05:52.165 2021-08-01 14:05:52.165 +ckrucnobu00020wladdxm4aka Web Developerka w Japoni - Justyna Marciniak https://www.youtube.com/watch?v=szeqXwRFyCg Rozmowa z Justyną Marciniak o życiu w Japonii i zdobyciu tam pierwszej pracy jako Web Developerka. \n\nJustynę znajdziecie na instagramie: https://www.instagram.com/j45t7/\n\n0:00:00 - Intro\n0:03:00 - Skąd pomysł na wyjazd?\n0:07:00 - Przebranżowienie\n0:20:00 - Przygotowanie do wyjazdu\n0:25:00 - Koszty życia\n0:33:00 - Nowe znajomości \n0:34:00 - Branża IT w Japonii\n0:43:00 - Trzęsienia ziemi \n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-08-02 08:00:12 web-developerka-w-japoni-justyna-marciniak ckivz8t54001di3umfv7i4q26 2021-08-02 08:07:30.282 2021-08-02 08:07:30.282 +ckruhr84f00020wl6ut11gzp5 Hackaton z Express / Tailwind / Vue / MongoDB / DigitalOcean https://www.youtube.com/watch?v=F96cH75mdUg Potrzebowałem aplikacji do zbierania opinii oraz wyświetlania ich w formie listy, możliwej do osadzenia na stronie www. Do jej stworzenia wykorzystałem Express.js, Tailwind CSS & Tailwind UI, odrobinę Vue.js oraz bazę MongoDB. Całość umieściłem na serwerze DigitalOcean. \n\nW tym filmie pokazuję poszczególne kroki które podjąłem do tego aby przygotować aplikację oraz podkreślam kompromisy na które musiałem pójść ze względu na krótki czas developmentu. \n\nPrzygotowanie całej aplikacji trwało około 10 godzin w ciągu dwóch dni.\nChcesz zawsze pozostać na bieżąco z programowaniem? \n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: #JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2021-08-02 10:30:05 hackaton-z-express-tailwind-vue-mongodb-digitalocean ckieg15g0001bi3um0fj3gred 2021-08-02 10:30:13.983 2021-08-02 10:30:13.983 +ckrumleut00020wk7arik4rjx VS Code czy WebStorm - jaki edytor dla front-end developera? #javascript #frontend https://www.youtube.com/watch?v=uOUaG-yiMgI VS Code czy WebStorm? Kiedy w styczniu rozpoczynałem pracę w nowej firmie, nie sądziłem że poza zmianą domeny tak radykalnie zmienią się też narzędzia z którymi pracuję. Maka zastąpił Linux, Node'a zastąpił PHP a VSCode zastąpił cały pakiet narzędzi od firmy JetBrains.\n\nPo kilku miesiącach pracy z IntelliJ i PHPStormem zmiany dotarły wreszcie na mój pulpit prywatny, gdzie miejsce VS Code powoli zastępuje WebStorm. Jak wypadają oba edytory w bezpośrednim porównaniu? Właśnie o tym w najnowszym filmie!\n\nKoniecznie dajcie znać w komentarzach który edytor bardziej odpowiada waszym preferencjom.\n\nW środku:\n\n00:00 - Intro\n01:00 - Moje edytory\n03:00 - Poznaj WebStorma\n05:05 - Co w środku\n08:37 - Praca z kodem\n12:27 - Wsparcie dla GITa\n16:07 - Refaktoryzacja\n21:45 - Outro\n\n💻 PRACA: Dołącz do mojego zespołu w edrone - https://edrone.me/en/jobs/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-08-01 17:50:44 vs-code-czy-webstorm-jaki-edytor-dla-front-end-developera-javascript-frontend ckiyt1v9s001fi3umcgnxbgiu 2021-08-02 12:45:40.853 2021-08-02 12:45:40.853 +ckrunmmul00020wmoco725gu4 Co to jest HTML, CSS i Javascript? #shorts https://www.youtube.com/watch?v=RdSzP3oMkus 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/q88RUeTHbU 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n#shorts\n\nKrótki film dla początkujących, w którym tłumaczymy czym są HTML, CSS i Javascript.\n\nFilip Mamcarczyk\nKacper Sokołowski\n\nIkonki autorstwa Freepik pobrane ze strony Flaticon. 2021-08-02 13:00:09 co-to-jest-html-css-i-javascript-shorts ckj9sdcq7000051l5pzwpbq9f 2021-08-02 13:14:37.485 2021-08-02 13:14:37.485 +ckrutvepw00020wl657vp04sa Trzy filary Scruma https://www.oskarkowalow.pl/blog/trzy-filary-scruma Na filarach scruma oparty jest cały proces scrumowy i pielęgnacja jego efektywnego funkcjonowania.\nBez nich nie można dobrze poruszać się w… 2021-08-02 00:00:00 trzy-filary-scruma ckocpwuso0019afl7he6igw3f 2021-08-02 16:09:24.549 2021-08-02 16:09:24.548 +ckrxs2kj500020wk1z70b6x0r React Query – jak zarządzać stanem serwerowym https://frontcave.pl/react-query-jak-zarzadzac-stanem-serwerowym/

Spis treści Wprowadzenie Fejkowe API dzięki ServiceWorker Zastosowanie React Query React Query a lista postów useQuery w liście postów useMutation w liście postów Lista komentarzy w poście useQuery w liście komentarzy useMutation w liście postów Pełen przykład React Query na Github Klikalny przykład React Query na Github Pages Podsumowanie Wprowadzenie Dlaczego warto poznać React Query? … Czytaj dalej React Query – jak zarządzać stanem serwerowym

\n

Artykuł React Query – jak zarządzać stanem serwerowym pochodzi z serwisu Front Cave.

2021-08-04 17:27:24 react-query---jak-zarzadzac-stanem-serwerowym ckirm3wzs001li3umfdkcfl6k 2021-08-04 17:42:17.969 2021-08-04 17:42:17.969 +ckrxsyed000020wl87qfw6udn React&TypeScript: Hooki #3 https://www.youtube.com/watch?v=04sbF4I6pjA Omawiamy współpracę TypeScripta z hookami takimi jak:\nuseEffect\nuseLayoutEffect\nuseRef\nuseReducer\n\nSandbox:\nhttps://codesandbox.io/s/doman-code-ts-hooki-rc6j4\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Przywitanie 2021-08-04 18:00:00 reactandtypescript:-hooki-3 ckjpkgp9u000012mnlbnkxu51 2021-08-04 18:07:02.964 2021-08-04 18:07:02.963 +ckryy2qti00020wjqy5lfkih0 Czy warto korzystać z Material UI? ⌨️ hello roman #165 https://www.youtube.com/watch?v=HFLzAZk3VtU ⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter/\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-08-05 13:00:15 czy-warto-korzystac-z-material-ui-hello-roman-165 ckiswuz9s0017i3um5mg4h7q1 2021-08-05 13:18:09.99 2021-08-05 13:18:09.99 +ckrz138ib00020wlj527ljvoh Frontend Thursday vol. 49 https://blog.vived.io/frontend-thursday-vol-49/ W dzisiejszej edycji brak dużych releasów znanych z poprzedniej, ale mamy nadzieję że i tak będziecie zadowoleni 😉 Mamy dla Was duże ogłoszenie o Vue, dalsze pastwienie się nad Internet Explorerem, oraz kolejny “atak” na npm. 2021-08-05 14:14:42 frontend-thursday-vol.-49 ckmor5k8y000044moj65m13y0 2021-08-05 14:42:31.763 2021-08-05 14:42:31.763 +cks1h4otg00020wl9k2pu8j06 Software Craftsmanship Saturday vol. 49 https://blog.vived.io/software-craftsmanship-saturday-vol-49/ W dniu dzisiejszym Post-Mortem z użycia Uczenia Maszynowego do wykrywania Covida, ankieta "Stack Overflow Developer Survey 2021", a także zasady bezpieczeństwa dla Kubernetesa opublikowane przez National Security Agency. Polecamy! 2021-08-07 07:36:53 software-craftsmanship-saturday-vol.-49 ckmor5k8y000044moj65m13y0 2021-08-07 07:47:05.764 2021-08-07 07:47:05.764 +cks1m3edx00020wlftkw0hr7x React&TypeScript: Context API #4 https://www.youtube.com/watch?v=oeyI6J_hRVQ Omawiamy współpracę TypeScripta z Context API zarówno w komponentach funkcyjnych jak i komponentach klasowych.\n\nSandbox:\nhttps://codesandbox.io/s/doman-code-ts-context-api-2r8el\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Rozpoczęcie\n00:19 Context API - funkcje\n14:42 Context API - klasy\n27:55 Zakończenie 2021-08-07 10:00:32 reactandtypescript:-context-api-4 ckjpkgp9u000012mnlbnkxu51 2021-08-07 10:06:03.669 2021-08-07 10:06:03.669 +cks2ypgk400020wle79oetvvg Jak typować funkcje w propsach? #TypeScript https://www.youtube.com/watch?v=BHuk2imgm0M 🚀 COTYGODNIOWA DAWKA WIEDZY NA MAILA: https://jsdzem.pl/newsletter\n\n🔴 Kolejny przykład z życia. Wyjaśniam jaka jest różnica pomiędzy funkcjami a metodami w kontekście TypeScripta. Argument funkcji jest typowany kontrawariantnie a argument metody jest biwariantny. Co to w ogóle znaczy? Bez zbędnego wyjaśniania! Zobaczmy jak to się ma w praktyce 🤓\n\n0:00 - Komponent ColorPicker\n0:46 - Jakie propsy ma ColorPicker?\n3:06 - Problem z biwariantną funkcją\n4:56 - Argumenty funkcji są kontrawariantne\n8:20 - Argumenty metod są biwariantne\n9:10 - Dlaczego TypeScript zezwala na biwariantne argumenty?\n10:53 - Czy można zrobić coś lepiej?\n12:04 - Kiedy używać metod?\n\n\n\n🔥 Nauczę Cię myśleć jak programista, przestrzegę Cię przed typowymi błędami oraz pomogę Ci zbudować warsztat na miarę zawodowca. Na tym kanale dowiesz się jakie triki stosuję na codzień w pracy jako frontend developer.\n\n👨‍🏫 Nazywam się Jakub Pusiak i tworzę kanał JS Dżem. Zawodowo jestem programistą (inżynier oprogramowania, software engineer) i czerpię z tego ogromną satysfakcję. Byłem też trenerem w szkole programowania. Teraz publikuję filmy na YouTube. 2021-08-08 08:45:00 jak-typowac-funkcje-w-propsach-typescript ckkb3uw6b00002smi6pw37cjt 2021-08-08 08:46:54.484 2021-08-08 08:46:54.484 +cks4ty0bo00020wl35lwqqil7 Czy SCRUM działa? - O praktykach zwinnych w teorii i praktyce #agile #scrum https://www.youtube.com/watch?v=jPcusmXre9I Czy SCRUM działa? Biorąc pod uwagę liczbę dostępnych na rynku Scrum Masterów (wg LinkedIna ok. 70 tys. w samej Polsce) wydawałoby się, że rozumienie tego frameworka i jego zalet to oczywista oczywistość. Praktyka pokazuje jednak, że nic bardziej mylnego - wielu programistów na dźwięk tego słowa na "S" dostaje natychmiastowej gęsiej skórki.\n\nDzisiaj zastanawiam się co jest powodem takiego stanu rzeczy oraz co my programiści możemy zrobić, żeby poprawiać jakość naszej pracy i przede wszystkim jakość dostarczanych na produkcję rozwiązań.\n\nVideo: https://www.youtube.com/watch?v=AuUadPoi35M\nArtykuł: https://medium.com/serious-scrum/will-scrum-fall-victim-to-its-own-success-7cc488dea09b\nScrum Guide: https://scrumguides.org/scrum-guide.html\nAgile manifesto: https://agilemanifesto.org/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-08-09 16:00:24 czy-scrum-dziala-o-praktykach-zwinnych-w-teorii-i-praktyce-agile-scrum ckiyt1v9s001fi3umcgnxbgiu 2021-08-09 16:09:07.62 2021-08-09 16:09:07.62 +cks4zrib100020wmelt66e49c Docker – Dockerfile i tworzenie obrazów https://frontstack.pl/docker-dockerfile-tworzenie-obrazow/?utm_source=rss&utm_medium=rss&utm_campaign=docker-dockerfile-tworzenie-obrazow

Docker i jego podstawy – ciąg dalszy 🙂. W poprzednim poście dowiedzieliśmy się, czym jest obraz i w jaki sposób możemy tworzyć z niego kontenery. Dzisiaj pójdziemy krok dalej i nauczymy się, w jaki sposób możemy stworzyć taki obraz samodzielnie i następnie wykorzystywać go do uruchamiania kontenerów. Jako frontend-owcy jesteśmy zaznajomieni z JavaScript, dlatego też […]

\n

The post Docker – Dockerfile i tworzenie obrazów appeared first on Frontstack.pl.

2021-08-09 18:49:05 docker---dockerfile-i-tworzenie-obrazow ckc4s1jmo001ii3um6ovu5nhk 2021-08-09 18:52:02.029 2021-08-09 18:52:02.029 +cks5mbmqv00020wmf8w2h4szn #4 NotionAPI - stylowanie i deployment https://www.youtube.com/watch?v=X90n0zxXURw Ostatnia część z krótkiej serii. Stylujemy formularz przy pomocy styled-components i robimy deployment na vercelu.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-08-10 03:32:39 4-notionapi-stylowanie-i-deployment ckmoh2k1y000050l0rtc97ktd 2021-08-10 05:23:32.455 2021-08-10 05:23:32.455 +cks5wfzot00020wjo0cu72xj5 React&TypeScript: useRef/forwardRef/createRef #4 https://www.youtube.com/watch?v=w6TsMF6LJqc Omawiamy współpracę TypeScripta funkcją forwardRef oraz createRef, przy okazji przypomnimy sobie useRefa.\n\nSandbox:\nhttps://codesandbox.io/s/doman-code-react-ts-refs-sg15v\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Rozpoczęcie\n00:18 useRef\n03:38 forwardRef - funkcje\n09:42 createRef\n12:20 forwardRef - klasy\n17:28 createRef typowanie drugi sposób\n19:20 Zakończenie 2021-08-10 10:00:33 reactandtypescript:-userefforwardrefcreateref-4 ckjpkgp9u000012mnlbnkxu51 2021-08-10 10:06:52.013 2021-08-10 10:06:52.013 +cks6244a200020wmivnd1imca JVM Tuesday vol. 50 - dużo Microsoftu, MicroProfile oraz dekada Kotlina https://blog.vived.io/jvm-tuesday-vol-50/ W dniu dzisiejszym - Microsoft oraz rewolucję, którą robią w Javie, nowy MicroProfile oraz dziesięciolecie Kotlina 🥳 2021-08-10 12:39:38 jvm-tuesday-vol.-50-duzo-microsoftu-microprofile-oraz-dekada-kotlina ckmor5k8y000044moj65m13y0 2021-08-10 12:45:35.786 2021-08-10 12:45:35.786 +cks6aokq800020wl4uiyvi3nr Jak poprawnie używać nagłówków HTML? #shorts https://www.youtube.com/watch?v=NMAthgiNoB0 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/q88RUeTHbU 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n#shorts\n\nKrótki poradnik dla początkujących, w którym tłumaczymy jak korzystać z tagów h1, h2, h3, h4, h5 i h6 :)\n\nFilip Mamcarczyk\nKacper Sokołowski\n\nIkonki autorstwa Freepik pobrane ze strony Flaticon. 2021-08-10 16:30:01 jak-poprawnie-uzywac-naglowkow-html-shorts ckj9sdcq7000051l5pzwpbq9f 2021-08-10 16:45:27.152 2021-08-10 16:45:27.152 +cks8mc0he00020wmfcv48plu3 Nowy skrót na GitHub! Otwórz repo i naciśnij kropkę! #ToDziała https://www.youtube.com/watch?v=Qr3XZoJIgxM Dziś pojawiła się informacja o nowym skrócie klawiaturowym na GitHubie.\nJak dla mnie to #GameChanger\n\nhttps://twitter.com/github/status/1425505817827151872 2021-08-12 07:46:22 nowy-skrot-na-github!-otworz-repo-i-nacisnij-kropke!-todziala ckir8ypi0000ki3um2pa1fvzp 2021-08-12 07:47:08.786 2021-08-12 07:47:08.786 +cks8xs5iq00020wmns6hqxb6p Frontend Thursday vol. 50 https://blog.vived.io/frontend-thursday-vol-50/ W dniu dzisiejszym trzy duże wydania: nowe Vue, dziewięćdziesiąta pierwsza edycja Firefoxa z masą usprawnień do promocji oraz mega interesujące z inżynierskiego punktu widzenia zmiany. Zapraszamy do lektury 🥳 2021-08-12 12:53:24 frontend-thursday-vol.-50 ckmor5k8y000044moj65m13y0 2021-08-12 13:07:37.586 2021-08-12 13:07:37.586 +cksg25nol00110wmsri7msdse Moje własne miejsce na linki - case study https://fsgeek.pl/post/case-study-projektu-do-trzymania-linkow/ Ostatnio ukończyłem swój poboczny projekt - klon Linktree na potrzeby mojego bloga. Po co w ogóle mi to było? Dlaczego zmieniłem architekturę w środku projektu? I co zyskałem dzięki temu projektowi? 2021-08-17 16:00:00 moje-wlasne-miejsce-na-linki-case-study ckhxjb6o0000yi3umb3hg09jv 2021-08-17 12:44:29.349 2021-08-17 12:44:29.349 +cks8xs6bk00110wmnb1smr5vq Chodzący programista! Recenzja XIAOMI WALKINGPAD R1 PRO ⌨️ hello roman #166 https://www.youtube.com/watch?v=eyrnUig5DYk ⭐️ Skorzystaj z kodu HELLOROMAN przy zakupach na:\nhttps://walkingpad.pl/pages/walkingdesk?utm_source=Influencer&utm_medium=youtube&utm_campaign=hello_roman&utm_id=HelloRoman\n\n⭐️ Model, z którego korzystam:\nhttps://walkingpad.pl/products/xiaomi-walkingpad-r1?utm_source=Influencer&utm_medium=youtube&utm_campaign=hello_romanR1&utm_id=HelloRomanR1\n\n⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter/\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-08-12 13:00:30 chodzacy-programista!-recenzja-xiaomi-walkingpad-r1-pro-hello-roman-166 ckiswuz9s0017i3um5mg4h7q1 2021-08-12 13:07:38.624 2021-08-12 13:07:38.624 +cks9zwtsy00020wjw3oc6k1i8 Rozdajemy książkę "JavaScript od Podstaw" #podajdalejprogramowanie https://www.youtube.com/watch?v=7iKkPzeVIaM Akcja “Podaj dalej”: https://kt.academy/pl/podajdalej\n\nJavaScript od Podstaw | Przeprogramowani ft. Gość: Marcin Moskała\nSpotify: https://open.spotify.com/episode/03VcSeqPsWtLqxIO6s9AMq?si=5wOo7iRwSuGj-zMAyOqHqA&dl_branch=1\nYouTube: https://www.youtube.com/watch?v=TXxuha3IfXI\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-08-13 05:39:20 rozdajemy-ksiazke-"javascript-od-podstaw"-podajdalejprogramowanie ckiyt1v9s001fi3umcgnxbgiu 2021-08-13 06:55:01.09 2021-08-13 06:55:01.09 +cksbksrwu00020wme7oj2wnk8 Software Craftsmanship Saturday vol. 50 https://blog.vived.io/software-craftsmanship-saturday-vol-50/ Witajcie w naszej najdłuższej, oraz najlepiej "zresearchowana" edycja do tej pory. A w niej Chiny, Apple oraz zmiany w Ethereum w kontekście uwarunkowań społecznych i legislacyjnych.\n\nZróbcie sobie herbatkę/kawkę i zapraszamy do lektury. 2021-08-14 09:22:33 software-craftsmanship-saturday-vol.-50 ckmor5k8y000044moj65m13y0 2021-08-14 09:27:30.126 2021-08-14 09:27:30.126 +cksd58e3100020wmp2rmwzxuo Mój mózg jako Open Source - Obsidian / GitBook / Keyboard Maestro https://www.youtube.com/watch?v=stusnt_XECw W myśl koncepcji "Digital Garden" postanowiłem stworzyć minimalistyczny i wygodny system notowania, który umożliwi mi dzielenie się wiedzą oraz da możliwość łatwego wyszukiwania treści. \n\nW efekcie połączyłem Githuba, Gitbooka, #Obsidian oraz #KeyboardMaestro do tego aby stworzyć sobie środowisko, które mi to umożliwi. \n\n- Makro wysyłające zmiany do repozytorium (do importu) http://space.overment.com/dGqOL5tZvdDpZAMTRb9F/\n- Makra z zakładki "Brain" (do wglądu) http://space.overment.com/Siafkrc8vplO3lgefq8W\nChcesz zawsze pozostać na bieżąco z programowaniem? \n\n📩 Zapisz się na newsletter:\nhttps://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1\n\n🎓 Więcej moich kursów znajdziesz na:\nhttps://overment.com/eduweb (reflink)\n\nTworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. \n\nZnajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze dbam o to, aby treści na filmach były maksymalnie aktualne. 2021-08-15 11:35:01 moj-mozg-jako-open-source-obsidian-gitbook-keyboard-maestro ckieg15g0001bi3um0fj3gred 2021-08-15 11:47:17.197 2021-08-15 11:47:17.197 +cksersq2u00020wkxwscyrrp3 Scrum Team i jego role https://www.oskarkowalow.pl/blog/scrum-team-i-jego-role Podstawowym elementem Scruma jest zespół , czyli Scrum Team.\nTo właśnie Scrum Team jest odpowiedzialny za dostarczanie złożonych produktów… 2021-08-16 00:00:00 scrum-team-i-jego-role ckocpwuso0019afl7he6igw3f 2021-08-16 15:06:43.59 2021-08-16 15:06:43.59 +cksesqh4s00020wla0ycmv63p Czym jest dług techniczny i jak nim zarządzać? https://www.youtube.com/watch?v=35ovTH8Y7Ww Patronem odcinka o długu technicznym jest Bitnoise (https://www.bitnoi.se/). Zapraszamy na drugą edycję spotkań Bitnoise_meet pt. “Świadomy dług technologiczny, czyli jak nie zginąć pod własną kulą śnieżną.”\n\n26 sierpnia 2021 - POZNAŃ, Rojber Pub, godz. 18.00: https://bit.ly/FB_BM2_Poznan\n9 września 2021 - WROCŁAW, Bar Barbara, godz. 18.00: https://bit.ly/FB_BM2_Wroclaw\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-08-16 11:04:31 czym-jest-dlug-techniczny-i-jak-nim-zarzadzac ckiyt1v9s001fi3umcgnxbgiu 2021-08-16 15:32:58.3 2021-08-16 15:32:58.3 +cksfmppoe00020wmhf0x7c66p Własne style CSS dla zaznaczonej frazy wskazanej w adresie URL za pomocą ::target-text https://webroad.pl/html5-css3/7941-wlasne-style-css-dla-zaznaczonej-frazy-wskazanej-w-adresie-url-za-pomoca-target-text Ciekawostka, wspierana obecnie tylko przez Chromium, czyli selektor ::target-text pozwala na stylowanie zaznaczenie frazy w tekście strony internetowej na podstawie specjalnego parametru w adresie URL. Jak to działa? Wpisujemy w pasku adresu następujący przykład: https://webroad.pl/#:~:text=partner%20technologiczny.  Kluczowym fragmentem jest: [crayon-611b49da4aa87272387261/] Spowoduje to zaznaczenie frazy po wejściu na stronę. Kiedy dodamy następujący kod CSS: [crayon-611b49da4aa91673255277/] Zaznaczenie stanie […] 2021-08-17 05:27:06 wlasne-style-css-dla-zaznaczonej-frazy-wskazanej-w-adresie-url-za-pomoca-::target-text ckir2fk800008i3um9c21fesl 2021-08-17 05:32:11.198 2021-08-17 05:32:11.198 +cksft2wqn00020wjyzeylqm4d Co to jest Sprint Review? https://www.oskarkowalow.pl/blog/co-to-jest-sprint-review Przegląd Sprintu (ang. Sprint Review ) to spotkanie organizowane na koniec każdego Sprintu na którym obecni są członkowie Zespołu… 2021-08-17 00:00:00 co-to-jest-sprint-review ckocpwuso0019afl7he6igw3f 2021-08-17 08:30:24.575 2021-08-17 08:30:24.575 +cksg9gp8t00080vlh9baftg6w Darmowy audyt Twojej strony interentowej! #shorts https://www.youtube.com/watch?v=jYaHPzUCIoA 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/q88RUeTHbU 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n#shorts\n\nLighthouse to darmowe narzędzie dostępne w Google Chrome Devtools i w Firefox jako szybka. Możecie dzięki niemu sprawdzić swoją stronę pod kątem SEO, performance, najlepszych praktyk i acessibility.\n\nFilip Mamcarczyk\nKacper Sokołowski\n\nIkonki autorstwa Freepik pobrane ze strony Flaticon. 2021-08-17 16:00:23 darmowy-audyt-twojej-strony-interentowej!-shorts ckj9sdcq7000051l5pzwpbq9f 2021-08-17 16:09:01.901 2021-08-17 16:09:01.901 +cksh25q5f00020wl2ughakrzy Wywoływanie żądania HTTP przez PowerShell w zadaniu zaplanowanym Windows https://webroad.pl/inne/7925-wywolywanie-zadania-http-przez-powershell-w-zadaniu-zaplanowanym-windows Jest jeden (znany mi) prosty sposób, aby wywołać żądanie HTTP przez PowerShell z poziomu menadżera zadań zaplanowanych w Windows. Nie trzeba przy tym tworzyć żadnych dodatkowych skryptów, czy programów. Wykorzystuję tę możliwość do uruchamiania zadań, które muszą zwyczajnie odbić jakiś adres URL w udostępnianych API. Korzystam z polecenia Invoke-WebRequest. Utwórzmy na początek nowe zadanie zaplanowane […] 2021-08-18 05:31:15 wywolywanie-zadania-http-przez-powershell-w-zadaniu-zaplanowanym-windows ckir2fk800008i3um9c21fesl 2021-08-18 05:32:18.723 2021-08-18 05:32:18.723 +cksh6zarl00020wkzpap3zvd7 Co to jest Retrospekcja Sprintu? https://www.oskarkowalow.pl/blog/co-to-jest-retrospekcja-sprintu Retrospekcja Sprintu (ang. Sprint Retrospective ) to najważniejsze wydarzenie w Scrumie , podczas którego wszyscy członkowie Zespołu… 2021-08-18 00:00:00 co-to-jest-retrospekcja-sprintu ckocpwuso0019afl7he6igw3f 2021-08-18 07:47:16.929 2021-08-18 07:47:16.929 +ckshow9a700020wmksvucndsh Moja Armia Robotów z Keyboard Maestro / Integromat / Airtable / Zapier https://www.youtube.com/watch?v=wb1XMxPu3ts Mija kolejny rok od momentu w którym w moim zespole pojawił się pierwszy robot. Dzisiaj jest ich cała armia a każdy z nich wspiera mnie w realizacji różnych zadań, które realizuję w swoich projektach. \n\nW tym filmie pokażę Wam w jaki sposób organizuję narzędzia takie jak Keyboard Maestro, Hazel, Integromat, Airtable i Zapier do tego aby łatwo publikować moje materiały w sieci. 2021-08-18 15:56:43 moja-armia-robotow-z-keyboard-maestro-integromat-airtable-zapier ckieg15g0001bi3um0fj3gred 2021-08-18 16:08:48.127 2021-08-18 16:08:48.127 +cksht4rdx00020wl9wtpjbvo8 CSS Variables – czemu warto je znać? https://frontcave.pl/css-variables-czemu-warto-je-znac/

Spis treści Wprowadzenie Czym są CSS Variables? Bardzo praktyczne użycie CSS Variables Implementacja edytora wizualnego do CSS Variables Klikalny przykład na Github Pages Pełen kod przykładu na Github Podsumowanie Wprowadzenie Przed pojawieniem się CSS Custom Properties (znane też jako CSS Variables) implementacja takich funkcjonalności jak różne motywy, tryb ciemny czy danie możliwości konfigurowania kolorystyki dynamicznie … Czytaj dalej CSS Variables – czemu warto je znać?

\n

Artykuł CSS Variables – czemu warto je znać? pochodzi z serwisu Front Cave.

2021-08-18 17:58:02 css-variables---czemu-warto-je-znac ckirm3wzs001li3umfdkcfl6k 2021-08-18 18:07:23.301 2021-08-18 18:07:23.301 +ckshvpyvd00020wl96ku5wcjq Code review dla widzów z Discorda https://www.youtube.com/watch?v=p1lcFPZNTC8 W tej serii robię code review i oceniam projekty zgłoszone przez widzów na moim Discordzie https://fullstak.pl/discord 😃\n\n#javascript #react #nextjs 2021-08-18 18:54:10 code-review-dla-widzow-z-discorda ckivz8t54001di3umfv7i4q26 2021-08-18 19:19:52.009 2021-08-18 19:19:52.009 +cksin4unu00020wmnmzq00za0 Po co nam Planowanie Sprintu? https://www.oskarkowalow.pl/blog/po-co-nam-planowanie-sprintu Każdy Sprint zaczyna się od Planowania Sprintu (ang. Sprint Planning ).\nJest to spotkanie, podczas którego Zespół Scrumowy ustala, jakie… 2021-08-19 00:00:00 po-co-nam-planowanie-sprintu ckocpwuso0019afl7he6igw3f 2021-08-19 08:07:16.026 2021-08-19 08:07:16.026 +cksix1ulv00020wl8n2h6cl9d Frontend Thursday vol. 51 - Deno 1.13, React Native 0.65, Angular pozbywa się JITa https://blog.vived.io/frontend-thursday-vol-51/ W dzisiejszej edycji mamy dla Was nowe Deno (dlaczego piszemy o alternatywie Node w frontendowym przeglądzie - szczegóły w środku), nowy React Native, a na samym końcu - bardzo ciekawa architektoniczna zagwozdka Twórców Angulara.\n\nZapraszamy do lektury! 2021-08-19 12:16:39 frontend-thursday-vol.-51-deno-1.13-react-native-0.65-angular-pozbywa-sie-jita ckmor5k8y000044moj65m13y0 2021-08-19 12:44:52.147 2021-08-19 12:44:52.147 +cksk1uvwj00020wmnjxqanbp7 Po co nam Doskonalenie Backlogu Produktu? https://www.oskarkowalow.pl/blog/po-co-nam-doskonalenie-backlogu-produktu Doskonalenie Backlogu Produktu (ang. Product Backlog Refinement ) polega na... doskonaleniu Backlogu Produktu 😅.\nWięc jak to właściwie… 2021-08-20 00:00:00 po-co-nam-doskonalenie-backlogu-produktu ckocpwuso0019afl7he6igw3f 2021-08-20 07:47:11.491 2021-08-20 07:47:11.491 +cksonjdw400020wmeaepzxsw1 Chain of responsibility https://frontstack.pl/chain-of-responsibility/?utm_source=rss&utm_medium=rss&utm_campaign=chain-of-responsibility

Chain of responsibility jest wzorcem behawioralnym, który jest stosunkowo łatwy do zrozumienia, więc część teoretyczna tego wpisu będzie dość krótka. Przykłady w tym przypadku przyniosą nam większą korzyść 🙂 Łańcuch zobowiązań Chain of responsibility, zwany również Łańcuchem zobowiązań, pozwala nam podzielić obsłużenie jakiegoś zadania / żądania przez wiele pojedynczych obiektów obsługujących. Obiekty te są niejako […]

\n

The post Chain of responsibility appeared first on Frontstack.pl.

2021-08-23 13:00:32 chain-of-responsibility ckc4s1jmo001ii3um6ovu5nhk 2021-08-23 13:05:11.188 2021-08-23 13:05:11.188 +ckskifvx400020vmyozmg1mo8 Czym są NFT i jak sprzedać plik JPG za 69 milionów? https://www.youtube.com/watch?v=ScWBZM7_TVA Czym są NFT? Czy to kolejna kryptowaluta? To pytanie wciąż nie schodzi z nagłówków wielu portali technologicznych oraz stron poświęconym biznesowi i ekonomii. Non-fungible tokens, czyli cyfrowe prawa własności, to prawdopodobnie podstawa handlu w świecie cyfrowym kolejnych dekad.\n\nW dzisiejszym odcinku opowiadam czym jest NFT oraz jakie konsekwencje dla świata może przynieść właśnie ta tachnologia.\n\nWięcej o NFT: https://www.garyvaynerchuk.com/what-is-nft-non-fungible-token-guide/\nOpenSea: https://opensea.io/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-08-20 15:07:19 czym-sa-nft-i-jak-sprzedac-plik-jpg-za-69-milionow ckiyt1v9s001fi3umcgnxbgiu 2021-08-20 15:31:25.144 2021-08-20 15:31:25.144 +ckslrv5ec00020wjsv7d78nt5 Send ETH payments using React.js / MetaMask https://www.youtube.com/watch?v=QJZUItAsdfg In this video you will learn how to:\n1. Send ETH payments in React.js\n2. Communicate with crypto wallet in the browser \n3. Get faucet money\n4. Validate Ethereum address \n5. Send transactions using ethers \n6. Check tx status in the block explorer\n\n0:00:00 - React.js form \n0:02:00 - MetaMask intro\n0:03:00 - Detect wallet \n0:04:10 - Connect app to wallet\n0:06:00 - Ethers library\n0:08:00 - Start transaction\n0:09:20 - Convert ether to wei\n0:10:10 - Validate Ethereum address\n0:12:00 - Transaction at block explorer\n0:14:00 - Get funds for testing\n\nCode: https://codesandbox.io/s/react-eth-metamask-7vuy7\nFaucet: https://faucet.ropsten.be/\nMetaMask: https://metamask.io/\nEthers library: https://docs.ethers.io/v5/\nReact.js: https://reactjs.org/docs/getting-started.html\n\n\n#react #ethereum #metamask\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-08-21 12:21:53 send-eth-payments-using-react.js-metamask ckivz8t54001di3umfv7i4q26 2021-08-21 12:42:59.988 2021-08-21 12:42:59.988 +cksm8ftbb00020wmnyfrbh3pl Pamięć Internetu https://blog.comandeer.pl/pamiec-internetu.html Dzisiaj nietypowo, nieprogramistycznie. Publikuję swój tekst, który kiedyś napisałem na potrzeby zupełnie innego medium niż mój blog. 2021-08-21 20:07:00 pamiec-internetu cki52vf40000ci3um2x784hhn 2021-08-21 20:26:57.959 2021-08-21 20:26:57.959 +ckso723vu00020wmyoe6gkjtb Języki obce z Node.js i JavaScriptem - rozwijaj się przez programowanie! https://www.youtube.com/watch?v=l_At2LLwdRg Nauka języków obcych to zawsze jeden z bardziej popularnych celów osób, które stawiają na własny rozwój. Dzisiaj pokażemy wam, jak przy pomocy odrobiny programistycznego zacięcia można do nauki (np. włoskiego) podejść z nieco innej strony niż zwykle.\n\nKoniecznie dajcie znać w komentarzach z jakich technik nauki języków obcych korzystacie wy - co się sprawdza, a co nie działa? Ilu z was zostało z techniką Anki po filmie Marcina?\n\nNauka angielskiego: https://www.youtube.com/watch?v=BULNVhJibD4\nTim Ferriss: https://tim.blog/category/the-tim-ferriss-show-transcripts/\nDeepL: https://www.deepl.com/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-08-22 07:01:32 jezyki-obce-z-node.js-i-javascriptem-rozwijaj-sie-przez-programowanie! ckiyt1v9s001fi3umcgnxbgiu 2021-08-23 05:23:51.21 2021-08-23 05:23:51.21 +ckspktkwg00020wl8hz38vbzv Blokowanie nagłówków tabeli HTML w pionie poziomie za pomocą CSS https://webroad.pl/html5-css3/7939-blokowanie-naglowkow-tabeli-html-w-pionie-poziomie-za-pomoca-css Słyszałem gdzieś kiedyś opinię, w której to blokowanie nagłówków tabeli z poziomu CSS działa tylko i wyłącznie w demach artykułów, w których się znajdują. Postaram się dzisiaj zagiąć czasoprzestrzeń tak, by końcowy efekt wyszedł z tej czarnej dziury przez horyzont zdarzeń i zadziałał również u Ciebie (oczywiście jeśli mówimy o najnowszych przeglądarkach). Przygotowanie szkieletu tabeli […] 2021-08-24 04:30:14 blokowanie-naglowkow-tabeli-html-w-pionie-poziomie-za-pomoca-css ckir2fk800008i3um9c21fesl 2021-08-24 04:36:54.16 2021-08-24 04:36:54.16 +ckspv6s3f00020vmtfnwn2mxe 10 najgorszych bibliotek npm, których możesz użyć w Node https://tworcastron.pl/blog/10-najgorszych-bibliotek-npm-ktorych-mozesz-uzyc-w-node/

Korzystasz z npm? Mam nadzieję, że poniższych bibliotek nie ma w Twoim projekcie. Poznaj 10 najbardziej absurdalnych, najbardziej bezsensownych, najgorszych bibliotek npm, których możesz użyć w swoim projekcie! Wolisz czytać? […]

\n

Artykuł 10 najgorszych bibliotek npm, których możesz użyć w Node pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-08-24 09:07:37 10-najgorszych-bibliotek-npm-ktorych-mozesz-uzyc-w-node ckbbw3jvs000li3umgw19edq9 2021-08-24 09:27:06.171 2021-08-24 09:27:06.171 +cksq0z53t00020wmn9t7h2n55 JVM Tuesday vol. 52 Podsumowanie roku / JVMowy Iceberg ❄️ 🏔 https://blog.vived.io/jvm-tuesday-vol-52-podsumowanie-roku-jvmowy-iceberg/

🥳 Jesteśmy z Wami od roku! 🥳

Od 52 tygodni (nie zgubiliśmy po drodze ani jednego 🥰) informujemy Was o wszystkim, co dzieje się w JVMowym ekosystemie. Postanowiliśmy z tej okazji trochę poświętować i podsumować ostatnie

2021-08-24 11:50:19 jvm-tuesday-vol.-52-podsumowanie-roku-jvmowy-iceberg ckmor5k8y000044moj65m13y0 2021-08-24 12:09:07.481 2021-08-24 12:09:07.481 +cksq2y9x100020wjjr9cm6g2u Prettier - najelpsze rozszerzenie do Visual Studio Code! ✨ #shorts https://www.youtube.com/watch?v=Db9CZwuVows 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/q88RUeTHbU 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n#shorts\n\nPrettier to bardzo użyteczne narzędzie do Visual Studio Code, dzięki któremu zaoszczedzimy mnóstwo czasu pisząc kod!\n\n\nFilip Mamcarczyk\nKacper Sokołowski\n\nIkonki autorstwa Freepik pobrane ze strony Flaticon. 2021-08-24 13:00:06 prettier-najelpsze-rozszerzenie-do-visual-studio-code!-shorts ckj9sdcq7000051l5pzwpbq9f 2021-08-24 13:04:26.293 2021-08-24 13:04:26.293 +cksr09jgc00020vlb463mioe5 Zatrudniłem robota - początki automatyzacji https://www.youtube.com/watch?v=BpU47KBonhQ Jak zaczynam autmatyzować procesy powstawania filmów na ten kanał i nie tylko. Pierwszy odcinek z dłuższej serii na kanale, gdzie będę dzielił się z Tobą postępami w mojej automatyzacji przeróżnych rzeczy. Zaczniemy od prostych komend do kontroli wersjii i tworzenia folderu startowego dla nowego projektu na YouTube.\n\nFB: https://www.facebook.com/Programistafrontend-108775494324661/\n🎯: https://www.programistafrontend.pl/\nIG: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-08-25 04:30:57 zatrudnilem-robota-poczatki-automatyzacji ckmoh2k1y000050l0rtc97ktd 2021-08-25 04:36:59.196 2021-08-25 04:36:59.196 +cksrkl1xh00020wjlle7ze6ed Scroll Snap – polepszanie zachowania przesuwanych elementów https://webroad.pl/html5-css3/7813-scroll-snap-polepszanie-zachowania-przesuwanych-elementow Czy spotkałeś się z elementami na stronach internetowych, których przesuwanie i przeglądanie na urządzeniu mobilnym wołało o pomstę do nieba? Na pewno tak. To choćby różnego rodzaju karty informacyjne lub zdjęcia w galerii. Istnieje jednak sposób, który znacznie uprzyjemni korzystanie z nich, a wymaga dodania jedynie kilku linijek w CSS i znany jest pod nazwą […] 2021-08-25 14:00:10 scroll-snap---polepszanie-zachowania-przesuwanych-elementow ckir2fk800008i3um9c21fesl 2021-08-25 14:05:48.677 2021-08-25 14:05:48.677 +cksu44ucf00020wmnycff7awv Czym jest Node runtime? Wyjaśniam runtime, V8, libv, JIT https://tworcastron.pl/blog/czym-jest-node-runtime-wyjasniam-runtime-v8-libv-jit/

jeśli pracowałeś kiedykolwiek z Nodem to pewnie nie obce są Ci pojęcia takie jak runtime, v8, libv. Jednak czy wiesz czym dokładnie jest runtime Noda? Co to w ogóle znaczy i co się w nim znajduje? […]

\n

Artykuł Czym jest Node runtime? Wyjaśniam runtime, V8, libv, JIT pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-08-27 08:42:57 czym-jest-node-runtime-wyjasniam-runtime-v8-libv-jit ckbbw3jvs000li3umgw19edq9 2021-08-27 08:48:37.023 2021-08-27 08:48:37.023 +cksuai2kr00020vl2utan95bb LQIP - technika optymalizacji frontendu https://www.youtube.com/watch?v=XtEEDIdvoVg \N 2021-08-27 11:24:22 lqip-technika-optymalizacji-frontendu ckjrjuqf900002bk2kpgy4181 2021-08-27 11:46:51.915 2021-08-27 11:46:51.915 +cksuigv9i00020wmki0l9hjqn DOBRY PROGRAMISTA / ZŁY PROGRAMISTA - To nie takie proste! https://www.youtube.com/watch?v=ACAjfzREW5A Dobry programista czy zły programista? Co wpływa na rezultaty jakie osiągasz w miejscu w pracy?\n\nTak jednowymiarowe podejście do oceny każdego z nas to tylko połowa tego całego skomplikowanego równania (albo nierówności?) dotyczącego rynku pracy. Układ sił w którym to pracownik jest oceniany a pracodawca ocenia przestaje powoli przystawać do stawiania na prawdziwą transparentność i szczere relacje w miejscu pracy.\n\nNa dzisiaj nie jesteśmy jeszcze gotowi na publiczne wskaźniki satysfakcji w danym miejscu pracy ale kto wie - być może to kwestia kolejnych kilku lat i świadomych pracodawców, którzy podchodzą do pracownika jak do partnera, a nie... zasobu?\n\nArtykuł z filmu: https://thinkpurpose.com/2016/10/27/i-am-an-average-employee/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-08-27 15:02:39 dobry-programista-zly-programista-to-nie-takie-proste! ckiyt1v9s001fi3umcgnxbgiu 2021-08-27 15:29:52.71 2021-08-27 15:29:52.71 +cksvnjir800020wju041queul Software Craftsmanship Weekly vol. 52 - autorski przegląd wydarzeń z ostatnich 12 miesięcy. https://blog.vived.io/software-craftsmanship-saturday-vol-52/

🥳 Jesteśmy z Wami od roku! 🥳

Od 52 tygodni (nie zgubiliśmy po drodze ani jednego 🥰) informujemy Was o wszystkim, co dzieje się w świecie technologii. Postanowiliśmy z tej okazji trochę poświętować i podsumować

2021-08-28 10:30:47 software-craftsmanship-weekly-vol.-52-autorski-przeglad-wydarzen-z-ostatnich-12-miesiecy. ckmor5k8y000044moj65m13y0 2021-08-28 10:39:40.724 2021-08-28 10:39:40.724 +cksxmjfkl00020wmfm8osboas Jak dostałem pracę jako Frontend Developer? https://frontlive.pl/blog/jak-zostalem-frontend-developerem Czy w 2021 roku początkujący programista może liczyć na znalezienie pracy? Oczywiście, że tak. Bez studiów informatycznych. Bez większego doświadczenia komercyjnego. Wystarczyć wysłać jedno, jedyne CV... 2021-08-30 00:00:00 jak-dostalem-prace-jako-frontend-developer ckgvhpmo0001ji3umfm7ubw86 2021-08-29 19:47:09.333 2021-08-29 19:47:09.333 +cksypsp4s00020wl2r2n9abja Zarządzanie stanem z XState | Wzorzec State Machine #3 https://www.youtube.com/watch?v=AIN-_KgU4BQ Poznaj XState, najpopularniejszą bibliotekę do zarządzania stanem z użyciem wzorca State Machine. Dzięki XState ograniczysz boilerplate, zwizualizujesz State Machine na interaktywnym wykresie oraz uzyskasz dostęp do szeregu nowych funkcji takich jak context czy guardy.\n\nXState: https://xstate.js.org/docs/\nXState Visualizer: https://xstate.js.org/viz/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-08-29 17:04:13 zarzadzanie-stanem-z-xstate-or-wzorzec-state-machine-3 ckiyt1v9s001fi3umcgnxbgiu 2021-08-30 14:06:06.652 2021-08-30 14:06:06.652 +ckszkwcmw00020vl4jeb1r9u8 Poprawne ustawienia uprawnień dla plików i folderów domeny w PLESK https://webroad.pl/inne/7922-poprawne-ustawienia-uprawnien-dla-plikow-i-folderow-domeny-w-plesk Czasami zdarza mi się zarządzać domenami z poziomu SSH na hostingu obsługiwanym przez PLESK i robiąc to z konta super-admina nadpiszę nieopacznie uprawnienia i grupy uprawnień dla plików i katalogów. Wówczas przestają mi działać link do magazynu plików, uploady i różne inne, nieokreślone rzeczy. Poniżej zamieszczam krótką ściągę z popranymi uprawnieniami zasobów w PLESK dla […] 2021-08-31 04:30:54 poprawne-ustawienia-uprawnien-dla-plikow-i-folderow-domeny-w-plesk ckir2fk800008i3um9c21fesl 2021-08-31 04:36:45.176 2021-08-31 04:36:45.176 +ckszvljck00020wmhyb6axv2e 8 powodów dlaczego każdy webdeveloper powinien znać Node.js https://tworcastron.pl/blog/8-powodow-dlaczego-kazdy-webdeveloper-powinien-znac-node-js/

Znasz Noda? Nie? Pora to zmienić. Node jest narzędziem, które powinien obecnie znać każdy webdeveloper. Poniżesz przedstawię ku temu 8 konkretnych powodów.  Wolisz czytać? Pod wideo znajdziesz wersję tekstową. 1. […]

\n

Artykuł 8 powodów dlaczego każdy webdeveloper powinien znać Node.js pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-08-31 09:31:05 8-powodow-dlaczego-kazdy-webdeveloper-powinien-znac-node.js ckbbw3jvs000li3umgw19edq9 2021-08-31 09:36:16.437 2021-08-31 09:36:16.437 +ckt012ea500020wjj04sxjary Przeprowadzka https://blog.vived.io/przeprowadzka/

Przepinamy bloga na nowy silnik. Nie powinno Was to w żaden sposób zaboleć, ale jeśli z jakiegoś powodu przestaną pojawiać się Wam w czytnikach RSS posty - jeśli z jakiegoś powodu automatyczne przekierowanie nie zadziała&

2021-08-31 12:02:53 przeprowadzka ckmor5k8y000044moj65m13y0 2021-08-31 12:09:21.101 2021-08-31 12:09:21.101 +ckt012nj700120wjjcppzqhqy Naciśnij kropkę na Githubie! #shorts https://www.youtube.com/watch?v=2w7KrWhDSMc Będąc na stronie repozytorium na Github naciśnij kropkę (".") na klawiaturze, albo w adresie URL zmień .com na .dev.\n\nDzięki temu będziesz mógł edytować swój kod z poziomu przeglądarki!\n\nFilip Mamcarczyk\nKacper Sokołowski 2021-08-31 12:00:01 nacisnij-kropke-na-githubie!-shorts ckj9sdcq7000051l5pzwpbq9f 2021-08-31 12:09:33.091 2021-08-31 12:09:33.091 +ckujt417s00020wlkkjg0o2qm SupaBase.io + Next.js ⚡️ First-look / overview https://www.youtube.com/watch?v=A67qwycQjAU Learn basics of SupaBase (open-source Firebase alternative). 2021-10-09 12:46:50 supabase.io-+-next.js-first-look-overview ckivz8t54001di3umfv7i4q26 2021-10-09 13:01:46.408 2021-10-09 13:01:46.408 +ckt03yzpd00020wl9awt1r2vf JVM Tuesday vol. 53 – Nowy Micronaut, nowy Kotlin, lepsze JavaDocs https://vived.io/jvm-tuesday-vol-53-nowy-micronaut-nowy-kotlin-lepsze-javadocs/

1. Micronaut 3.0 Wydany 🔬 Jako że poprzednią edycję “zawłaszczyło” nam podsumowanie roku, nie mieliśmy okazji poinformować Was o ważnej premierze w świecie javowych frameworków. Micronaut (i może trochę śp. Dropwizard) parę lat temu zapoczątkował nowy rzut javowych frameworków, chcący rzucić rękawice dotychczas niepokonanemu Springowi. Był to moment, gdy po latach starań Java EE zgubiła […]

\n

Artykuł JVM Tuesday vol. 53 – Nowy Micronaut, nowy Kotlin, lepsze JavaDocs pochodzi z serwisu Vived.

2021-08-31 13:14:08 jvm-tuesday-vol.-53---nowy-micronaut-nowy-kotlin-lepsze-javadocs ckmor5k8y000044moj65m13y0 2021-08-31 13:30:41.089 2021-08-31 13:30:41.089 +ckt0cnuud00020wl30n2qxir9 Wpadki i wypadki #13 https://www.webkrytyk.pl/2021/08/31/wpadki-i-wypadki-13/ Dzisiaj chyba najkrótszy odcinek Wpadek i wypadków w historii, poświęcony animacjom. Bardzo częstym motywem pojawiającym się na stronach internetowych są wszelkiego rodzaju animacje „wjeżdżania” i pojawiania się treści, które odpalają się wraz z tym, jak użytkownik przewija stronę. Jedną z bibliotek umożliwiających tego typu animację jest AOS, na podstawie którego przygotowałem prymitywny przykład. Wszystko wydaje … Czytaj dalej Wpadki i wypadki #13 2021-08-31 17:20:56 wpadki-i-wypadki-13 cki2dml0o000di3umgjexb6pk 2021-08-31 17:33:58.117 2021-08-31 17:33:58.116 +ckt0ff2vr00020wmparztdtp5 JavaScript - zrozumieć funkcje https://www.youtube.com/watch?v=-7zFkvcerTE W tym krótkim filmie swoimi słowami wyjaśniam najważniejsze pojęcia związane z funkcjami w JSie. Materiał głównie przeznaczony dla początkujących. W odcinku dowiesz się min:\n\n- jak deklarować funkcje\n- znaczenie zmiennych lokalnych i globalnych\n- co to są parametry funkcji\n- jak definiować wartości domyślne\n- troszkę o return z funkcji\n- dlaczego nazwa funkcji ma znaczenie?\n\n🎯: https://www.programistafrontend.pl/ 2021-08-31 08:05:22 javascript-zrozumiec-funkcje ckmoh2k1y000050l0rtc97ktd 2021-08-31 18:51:07.479 2021-08-31 18:51:07.478 +ckt1je5ul00020wl8uujibw08 blur/focus jak podglądnąć dane które znikają? http://kody.wig.pl/html/blur-focus-jak-podgladnac-dane-ktore-znikaja/ Zapewne się spotkałeś/łaś z tym, że czasami chcąc podglądnąć dane które pojawiają się np. na warstwie nagle znikają. Wszystko jest dobrze do czasu gdy klikniesz w menu kontekstowe w Chrome - ostatni element "zbadaj" otwiera się DevTools w chrome i ta warstwa znika. Posłużę się przykładem a dokładnie stroną z takim zachowaniem, będzie to www.algolia.com. […] 2021-09-01 13:24:14 blurfocus-jak-podgladnac-dane-ktore-znikaja ckijj62co001hi3um2kbkcy0a 2021-09-01 13:30:09.309 2021-09-01 13:30:09.309 +cktx6ok3d00090vjkfk9zlriu #shorts - modal http://kody.wig.pl/javascript/shorts-modal/ Dzisiaj będzie o tym jak najszybciej i najprościej zrobić warstwę modalną, a dokładnie taką która ma ładną animacje opacity gdy warstwa się pojawia jak i gdy znika. Pierwsza część, np. kliknięcie na element oraz pojawienie się warstwy modalnej jest proste do wykonania. Mamy div na stronie który jest naszą warstwą ukrywaną przez display: none do […] 2021-09-23 17:00:50 shorts-modal ckijj62co001hi3um2kbkcy0a 2021-09-23 17:02:56.953 2021-09-23 17:02:56.953 +ckt1skw7o00020wmkzi8gxt22 Dowiedz się czemu warto czekać na pseudoklasę :has! https://frontcave.pl/dowiedz-sie-czemu-warto-czekac-na-pseudoklase-has/

Spis treści Wprowadzenie Pseudoklasa :has Jak działa pseudoklasa :has? Jakie pseudoklasa :has ma wsparcie i jaką biblioteką go zasymulować? Użycie pseudoklasy :has do stylowania formularzy na bazie walidacji pól Stworzenie skryptu transformującego CSS Style odpowiadające za kolorystykę walidacji Wymagany kod JS Efekt działania aplikacji Klikalny przykład na Github Pages Pełny kod przykładu na Github Podsumowanie … Czytaj dalej Dowiedz się czemu warto czekać na pseudoklasę :has!

\n

Artykuł Dowiedz się czemu warto czekać na pseudoklasę :has! pochodzi z serwisu Front Cave.

2021-09-01 17:41:13 dowiedz-sie-czemu-warto-czekac-na-pseudoklase-:has! ckirm3wzs001li3umfdkcfl6k 2021-09-01 17:47:19.956 2021-09-01 17:47:19.956 +ckt2tnke900020wjob9o3cd25 Frontend Thursday vol. 53 https://vived.io/frontend-thursday-vol-53/

1. Typescript 4.4 Trochę ponad tydzień temu opublikowany został TypeScript 4.4, a musicie wiedzieć, że pojawienie się kolejnej wersji tego języka, to zawsze małe święto w naszym frontendowym świecie. W końcu jak wynika z State of JS 2020, na co dzień z języka Microsoftu korzysta ponad 75% JavaScript developerów, z czego ponad 90% jest usatysfakcjonowanych […]

\n

Artykuł Frontend Thursday vol. 53 pochodzi z serwisu Vived.

2021-09-02 11:02:32 frontend-thursday-vol.-53 ckmor5k8y000044moj65m13y0 2021-09-02 11:05:10.401 2021-09-02 11:05:10.401 +ckt2yu4qy00020wjmodu4venx Jak rozgryźć istniejący projekt? ⌨️ hello roman #167 https://www.youtube.com/watch?v=xksbwionW9M Repozytorium z odcinka: https://github.com/helloroman/hr-study-buddy\n\n⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter/\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-09-02 13:15:03 jak-rozgryzc-istniejacy-projekt-hello-roman-167 ckiswuz9s0017i3um5mg4h7q1 2021-09-02 13:30:14.794 2021-09-02 13:30:14.794 +ckt38qf0x00020wl8byda6ssv Dodawanie aliasu do partycji C w Ubuntu na Windowsie (WSL) https://devpebe.com/2021/09/02/dodawanie-aliasu-do-partycji-c-w-ubuntu-na-windowsie-wsl/ rzeczy najbardziej podstawowych, które ułatwiają codzienne czynności. W Ubuntu na Windowsie (WSL) przydatny będzie alias do partycji C. 2021-09-02 18:00:13 dodawanie-aliasu-do-partycji-c-w-ubuntu-na-windowsie-(wsl) ckiplfn1c001ci3um4nlf8o4x 2021-09-02 18:07:17.649 2021-09-02 18:07:17.649 +ckt3bbyub00020wl7hs9o9pr2 Node – kurs kompletny. PREMIERA! https://tworcastron.pl/blog/node-kurs-kompletny-premiera/

Właśnie ruszyła premiera mojego najnowszego kursu “Node – kurs kompletny“. Oto co dla Was przygotowałem: 140 lekcji ponad 13 godzin materiałów wideo kilkanaście ćwiczeń wraz z rozwiązaniami kod do pobrania […]

\n

Artykuł Node – kurs kompletny. PREMIERA! pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-09-02 19:12:57 node---kurs-kompletny.-premiera! ckbbw3jvs000li3umgw19edq9 2021-09-02 19:20:02.339 2021-09-02 19:20:02.339 +ckt4hq35100020wmislprusic Top 6 podcastów w 2021 roku (technologia, filozofia, lifestyle) https://www.youtube.com/watch?v=irlt3BwHhUE Mamy dla Was rekomendacje sześciu podcastowych materiałów opublikowanych w 2021, które szczególnie przypadły nam do gustu. Szeroki zakres tematów, gospodarzy i gości - każdy znajdzie coś dla siebie.\n\n(Film powstawał w nietypowych warunkach więc wybaczcie nam tę hollywoodzką jakość produkcji)\n\nPolecane odcinki:\nWojciech Zaremba u Lexa Fridmana: https://www.youtube.com/watch?v=U5OD8MjYnOM\nBarry Barish u Lexa Fridmana: https://podcasts.apple.com/pl/podcast/lex-fridman-podcast/id1434243584?l=pl&i=1000532847492\nQuentin Tarantino u Joe Rogana: https://open.spotify.com/episode/5cdu4y60lq6QXyUbhMpVWH\nSam Harris w Unspeakable Podcast: https://podcasts.apple.com/pl/podcast/the-unspeakable-podcast/id1524832743?i=1000532824830\nBitcoiner Book Club u Jordana Petersona: https://www.youtube.com/watch?v=iVym9wtopqs\nŻulczyk u Wojewódzkiego i Kędzierskiego: https://newonce.net/epizod/zulczyk-kiedy-wyjsc-z-imprezy 2021-09-03 14:24:18 top-6-podcastow-w-2021-roku-(technologia-filozofia-lifestyle) ckiyt1v9s001fi3umcgnxbgiu 2021-09-03 15:06:44.965 2021-09-03 15:06:44.965 +ckt5jg1ao00020wjnvuz41x59 Software Craftsmanship Saturday vol. 53 https://vived.io/software-craftsmanship-saturday-vol-53/

W dniu dzisiejszym - trochę nowych, kontrowersyjnych regulacji 🇨🇳 🇰🇷 🇦🇺; Docker każe sobie płacić za lokalny development 🐳; a także kilka interesujących informacji z branży producentów procesorów.

\n

Artykuł Software Craftsmanship Saturday vol. 53 pochodzi z serwisu Vived.

2021-09-04 08:29:37 software-craftsmanship-saturday-vol.-53 ckmor5k8y000044moj65m13y0 2021-09-04 08:42:41.424 2021-09-04 08:42:41.424 +ckt5mfr9q00020wlflh4o2jo6 Testy wydajnościowe hostingu i strony WWW: krok po kroku https://jcubic.pl/2021/09/testy-wydajnosciowe-hostingu-strony-www.html

Testy wydajnościowe hostingu i strony WWW: krok po kroku

Widoczne ręcę człowieka pracującego przy\n laptopie obok serwerów

Nie chcesz brać za pewnik zapewnień od firmy hostingowej? I bardzo dobrze! Przecież możesz samodzielnie przeprowadzić test wydajnościowy strony\n oraz serwera. Zobacz, jak to zrobić, żeby uzyskać rzetelne wyniki, które pozwolą Ci dokonać dobrego wyboru.


Kliknij aby zobaczyć cały artykuł 2021-09-03 16:24:06 testy-wydajnosciowe-hostingu-i-strony-www:-krok-po-kroku ckfdlon7c0009i3umeitx0nz4 2021-09-04 10:06:27.278 2021-09-04 10:06:27.278 +ckt6dm22200020wjyjg1jv00b Który hosting jest najszybszy? 9 rzeczy, które mają największe znaczenie https://typeofweb.com/ktory-hosting-jest-najszybszy-9-rzeczy-ktore-maja-najwieksze-znaczenie Hosting to jeden z najważniejszych filarów strony internetowej. To w dużej mierze od niego właśnie zależy, czy będzie ona szybka, stabilna i bezpieczna. A jak wybrać serwer, który faktycznie pozwoli Twojej witrynie „wrzucić wyższy bieg”? Zobacz, jakie elementy wpływają na szybkość serwera. 2021-09-04 11:39:42 ktory-hosting-jest-najszybszy-9-rzeczy-ktore-maja-najwieksze-znaczenie ckiopy3xs0006i3umgmnv8l52 2021-09-04 22:47:10.826 2021-09-04 22:47:10.826 +ckt7kkrq400020wl24d8tm4oi Sign and Verify messages with React.js and MetaMask https://www.youtube.com/watch?v=vhUjCLYlnMM Learn how to generate and verify signatures from React.js code using MetaMask wallet. \nCode: https://codesandbox.io/s/react-eth-metamask-signatures-ibuxj\n#react #metamask #ethereum\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-09-05 18:30:42 sign-and-verify-messages-with-react.js-and-metamask ckivz8t54001di3umfv7i4q26 2021-09-05 18:49:54.268 2021-09-05 18:49:54.268 +ckt7ur68300020wk0mut4tdow Artykuł „Nauka JavaScript – zbiór kursów, materiałów edukacyjnych i definicji” https://www.webkrytyk.pl/2021/09/06/artykul-nauka-javascript-zbior-kursow-materialow-edukacyjnych-i-definicji/ Czasami niektóre rzeczy sprawiają, że mimowolnie unosi się nam brew z powodu niebotycznego zdziwienia. Dzisiaj ten efekt u mnie wywołał artykuł Adama Łopusiewicza Nauka JavaScript – zbiór kursów, materiałów edukacyjnych i definicji. Zacznijmy od zdania znajdującego się we wstępie: Jak widzicie, z JavaScriptu korzystają największe portale internetowe, co tylko dowodzi temu, że warto nim się … Czytaj dalej Artykuł „Nauka JavaScript – zbiór kursów, materiałów edukacyjnych i definicji” 2021-09-05 23:29:47 artykul-"nauka-javascript---zbior-kursow-materialow-edukacyjnych-i-definicji" cki2dml0o000di3umgjexb6pk 2021-09-05 23:34:49.155 2021-09-05 23:34:49.155 +ckt8dwcyr00020wmawdz81uz9 Instalacja Javy na macOS https://www.oskarkowalow.pl/blog/instalacja-javy-na-mac-os Zainstalujemy Java Development Kit (JDK) na systemie macOS wykorzystując SDKMAN (The Software Development Kit Manager).\nJak dla mnie, jest… 2021-09-06 00:00:00 instalacja-javy-na-macos ckocpwuso0019afl7he6igw3f 2021-09-06 08:30:43.875 2021-09-06 08:30:43.875 +ckt8hc8pt00020vlcpyu3ukoh React&TypeScript: Event #6 https://www.youtube.com/watch?v=GrJSuOWmOCk Pokażemy sobie jak otypować handlery które posiadają event, całość podana jak na talerzu przez TypeScript :)\n\nSandbox:\nhttps://codesandbox.io/s/doman-code-react-ts-events-poo9q\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Rozpoczęcie\n00:18 MouseEvent\n03:52 KeyboardEvent\n07:10 ChangeEvent\n08:55 FormEvent\n09:56 Funkcja z eventem jako props\n12:59 Zakończenie 2021-09-06 10:00:13 reactandtypescript:-event-6 ckjpkgp9u000012mnlbnkxu51 2021-09-06 10:07:03.713 2021-09-06 10:07:03.713 +ckt8pw1pk00020wmofajr7tem Byliśmy na Olimpiadzie! Relacja z Just Join Olympics - Sopot 2021 https://www.youtube.com/watch?v=F3zHqjekmY4 Just Join Olympics 2021 za nami! Przygotowaliśmy dla was podsumowanie całego wydarzenia, w tym oczywiście najlepsze ujęcia reprezentanta Przeprogramowanych oraz zmagania ekip które wzięły udział we wszystkich dyscyplinach.\n\nMusimy przyznać, że kreatywność organizatorów naprawdę dopisała - obok "klasycznych" konkurencji takich jak Rzut Dyskiem czy Sprint (z laptopem) uczestnicy brali udział w Skoku Przez Firewall i próbowali utrzymać Work-Life Balance tak długo, jak to możliwe. Jak im poszło? Przekonajcie się razem z nami, a jak się podobało i chcecie za rok zobaczyć reprezentację Przeprogramowanych, to klikajcie łapki w górę ⚡️⚡️⚡️\n\nNie możemy się doczekać kolejnej edycji!\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-09-05 18:07:25 bylismy-na-olimpiadzie!-relacja-z-just-join-olympics-sopot-2021 ckiyt1v9s001fi3umcgnxbgiu 2021-09-06 14:06:24.68 2021-09-06 14:06:24.68 +cktxim3cx00020wl6cbqd9iq0 Ile kosztuje zmiana zawodu po 30 ? https://www.youtube.com/watch?v=z-VuLaJWS0Y Zmiana zawodu po 30 ? W tym filmie staram się przedstawić Ci swój bilans zmiany branży na IT. Zostawiłem 10 lat doświadczenia w branży samochodowej, by zostać programistą frontend. Czy było warto?\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-09-23 22:07:55 ile-kosztuje-zmiana-zawodu-po-30 ckmoh2k1y000050l0rtc97ktd 2021-09-23 22:36:57.345 2021-09-23 22:36:57.345 +ckt9qcbqi00020wlb2pvxilg1 Wybór wersji Javy w Intelij Idea https://www.oskarkowalow.pl/blog/wybor-wersji-javy-w-intelij-idea Jak zmienić wersję Javy w Intelij Idea? Z górnego panelu wybierz File > Project Structure . Zobaczysz taki ekran: W zakładce Project pod… 2021-09-07 00:00:00 wybor-wersji-javy-w-intelij-idea ckocpwuso0019afl7he6igw3f 2021-09-07 07:06:50.346 2021-09-07 07:06:50.346 +ckt9zhsz900020wjz0ogmlg97 Darmowy hosting statycznej strony internetowej #shorts https://www.youtube.com/watch?v=riJ8A5ycAGM 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/q88RUeTHbU 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n#shorts\n\nNetlify:\nhttps://www.netlify.com/\nhttps://docs.netlify.com/\n\nGihubPages:\nhttps://pages.github.com/\n\nFilip Mamcarczyk\nKacper Sokołowski 2021-09-07 11:15:05 darmowy-hosting-statycznej-strony-internetowej-shorts ckj9sdcq7000051l5pzwpbq9f 2021-09-07 11:23:02.517 2021-09-07 11:23:02.517 +ckta5bcuu00020wjkemnu9zom Full Stack Dev Q&A #5 - Konsultacje na żywo https://www.youtube.com/watch?v=FWFaSBz27HQ Chcesz zadać nam pytanie dotyczące szeroko pojętego full-stack developmentu lub omówić wybrany temat z tego obszaru? Dołącz do naszych konsultacji na żywo, które organizujemy po to, aby jeszcze lepiej adresować Wasze potrzeby i pytania, których wiele pojawia się każdego dnia.\nWysokiej jakości stream oraz sesja pytań i odpowiedzi jest dostępna na eduweb: \nhttps://eduweb.pl/wydarzenia/full-stack-dev-qa-5 2021-09-07 13:46:55 full-stack-dev-qanda-5-konsultacje-na-zywo ckieg15g0001bi3um0fj3gred 2021-09-07 14:05:59.382 2021-09-07 14:05:59.382 +cktahi88e00020wjmuuuun7pi Przyszły programisto ucz się publicznie https://www.youtube.com/watch?v=125JVrrEFws Publiczna nauka jest czymś bardzo ważnym w moim życiu. W tym filmie chcę pokazać Ci plusy publicznego uczenia się. Nawet w trakcie trwania procesu nauki już na samym początku. Wcale nie musisz być mega specjalistą. Twoje świeże spojrzenie pozwoli innym początkującym znaleźć rozwiązanie problemu.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-09-07 19:27:40 przyszly-programisto-ucz-sie-publicznie ckmoh2k1y000050l0rtc97ktd 2021-09-07 19:47:15.374 2021-09-07 19:47:15.374 +cktamh5lh00020wmgpuqxariz Jeden znak jest warty więcej niż tysiąc ifów https://blog.comandeer.pl/jeden-znak-jest-warty-wiecej-niz-tysiac-ifow.html Czasami niektóre błędy są bardzo trudne do zdebugowania, bo występują stosunkowo rzadko, a i czają się w miejscach, w których byśmy się ich nie spodziewali. 2021-09-07 21:46:00 jeden-znak-jest-warty-wiecej-niz-tysiac-ifow cki52vf40000ci3um2x784hhn 2021-09-07 22:06:23.381 2021-09-07 22:06:23.381 +cktbc7u7000020wmnbc0qleeg Jak zaimplementować JWT (JSON Web Token) w Node.js API https://tworcastron.pl/blog/jak-zaimplementowac-jwt-json-web-token-w-node-js/

JSON Web Token jest jedną z popularnych metod autoryzacji, dlatego w dzisiejszym odcinku pokażę Wam jak go zaimplementować w Nodowym API. Jeste to jeden ze 140 odcinków pełnego kursu Noda.  […]

\n

Artykuł Jak zaimplementować JWT (JSON Web Token) w Node.js API pochodzi z serwisu TwórcaStron.pl - Blog dla programistów i nie tylko.

2021-09-08 10:01:02 jak-zaimplementowac-jwt-(json-web-token)-w-node.js-api ckbbw3jvs000li3umgw19edq9 2021-09-08 10:06:58.716 2021-09-08 10:06:58.716 +cktbexh1l00020wmcgb8uepud JVM Wednesday vol.54 – Spring porzuca stare Javy, plan na Jakartę EE 10 https://vived.io/jvm-wednesday-vol-54-spring-porzuca-stare-javy-plan-na-jakarte-ee-10/

W dniu dzisiejszym duża bomba od Spring Teamu, plany na Jakarta EE 10 oraz kilka mniejszych wydań (Quarkus, JavaFX, Scala).

\n

Zapraszamy do lektury dzisiejszej, ciut spóźnionej edycji.

\n

Artykuł JVM Wednesday vol.54 – Spring porzuca stare Javy, plan na Jakartę EE 10 pochodzi z serwisu Vived.

2021-09-08 11:12:40 jvm-wednesday-vol.54---spring-porzuca-stare-javy-plan-na-jakarte-ee-10 ckmor5k8y000044moj65m13y0 2021-09-08 11:22:53.961 2021-09-08 11:22:53.961 +cktbm81bp00020wmjdiidgqgs Sztuczna Inteligencja - Przemysław Pobrotyn | Przeprogramowani ft. Gość #15 https://www.youtube.com/watch?v=u1N8p5M7Foc Przemysław Pobrotyn to doświadczony programista, prelegent i naukowiec zajmujący się praktycznym wykorzystaniem AI/ML. W dobie postępującej automatyzacji wszystkiego i aplikowania algorytmów sztucznej inteligencji do każdej urządzenia wokół nas uznaliśmy, że czas na zaproszenie właśnie takiego gościa - osoby, która pomoże nam zrozumieć ile szans, zagrożeń i marketingu jest w AI w 2021r. Serdecznie zapraszamy na rozmowę i oczywiście zapraszamy do zadawania pytań w komentarzach - te najlepsze na pewno padną w trakcie rozmowy! Do usłyszenia już we wtorek, 14 wrzesnia o 18:00! 2021-09-08 14:41:30 sztuczna-inteligencja-przemyslaw-pobrotyn-or-przeprogramowani-ft.-gosc-15 ckjcy6q5400001hkzvyh1xycf 2021-09-08 14:47:04.117 2021-09-08 14:47:04.117 +cktbm87iw00110wmjp19zgn3p Sztuczna Inteligencja - Przemysław Pobrotyn | Przeprogramowani ft. Gość #15 https://www.youtube.com/watch?v=I6jBzKj7Jq8 Przemysław Pobrotyn to doświadczony programista, prelegent i naukowiec zajmujący się praktycznym wykorzystaniem AI/ML. W dobie postępującej automatyzacji wszystkiego i aplikowania algorytmów sztucznej inteligencji do każdej urządzenia wokół nas uznaliśmy, że czas na zaproszenie właśnie takiego gościa - osoby, która pomoże nam zrozumieć ile szans, zagrożeń i marketingu jest w AI w 2021r. Serdecznie zapraszamy na rozmowę i oczywiście zapraszamy do zadawania pytań w komentarzach - te najlepsze na pewno padną w trakcie rozmowy! Do usłyszenia już we wtorek, 14 wrzesnia o 18:00! 2021-09-08 14:41:30 sztuczna-inteligencja-przemyslaw-pobrotyn-or-przeprogramowani-ft.-gosc-15 ckiyt1v9s001fi3umcgnxbgiu 2021-09-08 14:47:12.152 2021-09-08 14:47:12.152 +cktd077oc00020wmmnr05rwbi Headless CMS w praktyce https://www.youtube.com/watch?v=n_I2i6vBN1M Nagranie po live tylko dla zapisanych osób: \nhttps://sklep.fullstak.pl/szkolenie/headless-cms-praktyka\n\nCzego się dowiesz: \n- Co to jest Headless CMS?\n- Zalety i wady\n- Strapi\n- GraphCMS\n- WordPress jako Headless 😱\n- Przykłady użycia w Next.js\n\n#headless #nextjs #wordpress 2021-09-09 13:49:08 headless-cms-w-praktyce ckivz8t54001di3umfv7i4q26 2021-09-09 14:06:06.492 2021-09-09 14:06:06.492 +cktd2d36y00020wi88oe7g9e0 Frontend Thursday vol. 54 https://vived.io/frontend-thursday-vol-54/

W dzisiejszej edycji mamy dla informacje o nowym VS Code i pierwsze przecieki dotyczące ES2022.

\n

Artykuł Frontend Thursday vol. 54 pochodzi z serwisu Vived.

2021-09-09 14:55:10 frontend-thursday-vol.-54 ckmor5k8y000044moj65m13y0 2021-09-09 15:06:39.85 2021-09-09 15:06:39.85 +cktd83aj300020wjt9j8hplov Postaci normalne w relacyjnych bazach danych https://devszczepaniak.pl/postaci-normalne/

W tym wpisie poruszam temat normalizacji relacyjnych baz danych oraz omawiam postaci normalne, do których można sprowadzić bazę danych. Do omówionych zagadnień przygotowane zostały również przykłady. Czym jest normalizacja? Zgodnie z definicją zamieszczoną w Encyklopedii PWN, normalizacja może być rozumiana jako: […] działalność mająca na celu uzyskanie optymalnego w danych okolicznościach stopnia uporządkowania w określonym … Czytaj dalej Postaci normalne w relacyjnych bazach danych

\n

Artykuł Postaci normalne w relacyjnych bazach danych pochodzi z serwisu Devszczepaniak.pl.

2021-09-09 17:42:02 postaci-normalne-w-relacyjnych-bazach-danych ckiyvf2eg0012i3um2h8g0dup 2021-09-09 17:47:00.495 2021-09-09 17:47:00.495 +cktedgh0400020wmh2v1vhutz AOP w połączeniu z Kotlin Coroutines https://vived.io/aop-w-polaczeniu-z-kotlin-coroutines/

Jak zmusić AspectJ/Spring AOP do działania z korutynami? Zobaczmy jak połączyć programowanie aspektowe z asynchronicznością.

\n

Artykuł AOP w połączeniu z Kotlin Coroutines pochodzi z serwisu Vived.

2021-09-10 13:00:32 aop-w-polaczeniu-z-kotlin-coroutines ckmor5k8y000044moj65m13y0 2021-09-10 13:04:59.668 2021-09-10 13:04:59.668 +cktek16v800020wifkwklp0qp CO WIDZI TESLA - AI i Tesla Autopilot w praktyce https://www.youtube.com/watch?v=LxFiSS4nQus Dzisiaj zapraszam was na krótką wycieczkę po świecie sztucznej inteligencji którą w swoich samochodach wykorzystujeTesla 🧠\n\nNa podstawie wykładu Andrew Karpathy'ego - szefa AI w Tesli - staram się przełożyć najważniejsze fakty z całego procesu analizy danych i przedstawić wam je w możliwie najbardziej zrozumiałej formie. W środku nie tylko o tym jak widzi Tesla wspierana przez Autopilota, ale również o tym dlaczego zamiast kierownicy w nowych modelach znajdziecie wolant i ile danych zbieranych jest w trakcie jednego kursu wspomnianymi samochodami.\n\nWykład - https://www.youtube.com/watch?v=eZOHA6Uy52k\nDane - https://electrek.co/2020/10/24/tesla-collecting-insane-amount-data-full-self-driving-test-fleet/\nAutopilot - https://lexfridman.com/tesla-autopilot-miles-and-vehicles/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-09-10 16:00:11 co-widzi-tesla-ai-i-tesla-autopilot-w-praktyce ckiyt1v9s001fi3umcgnxbgiu 2021-09-10 16:09:04.004 2021-09-10 16:09:04.004 +cktemxhsa00020wmi0l9q1wb9 #shorts - instalowanie i update wordpress w docker-compose http://kody.wig.pl/wordpress/shorts-instalowanie-i-update-wordpress-w-docker-compose/ Zaczynamy serię małych, krótkich wpisów. Coś na wzór yotube #shorts tylko że w wersji pisanej 😉 Tak jak tytuł sugeruje, dzisiaj będzie o wp na dokerze. Zazwyczaj gdy pracuję nad jakąś stroną staram się odzwierciedlić środowisko na którym ta storna będzie stała. Chodzi mi o to aby serwer, wersja czy baza oraz wszystko dodatki były […] 2021-09-10 17:18:33 shorts-instalowanie-i-update-wordpress-w-docker-compose ckijj62co001hi3um2kbkcy0a 2021-09-10 17:30:10.378 2021-09-10 17:30:10.378 +cktfl29zb00020wi5fo7ptopg Software Craftsmanship Saturday vol. 54 – ProtonMail, Epic, Apple, Theranos i Bitcoin 😮‍💨 https://vived.io/software-craftsmanship-saturday-vol-54/

Przed sądem stanęło żywe uosobienie motta Doliny Krzemowej, a w innym procesie jeden z jego gigantów odniósł "porażkę na smutno". Nie do śmiechu jest również autorom ProtonMaila, za to masę zabawy mają użytkownicy Reddita. Zapraszamy do nowej edycji!

\n

Artykuł Software Craftsmanship Saturday vol. 54 – ProtonMail, Epic, Apple, Theranos i Bitcoin 😮‍💨 pochodzi z serwisu Vived.

2021-09-11 09:13:16 software-craftsmanship-saturday-vol.-54---protonmail-epic-apple-theranos-i-bitcoin ckmor5k8y000044moj65m13y0 2021-09-11 09:25:40.487 2021-09-11 09:25:40.487 +cktga1u2z00020wibeejo1b0n Deploy your first Solidity smart contract with Remix IDE https://www.youtube.com/watch?v=bZKVfXmzRDw In this video, I will show you how to deploy smart contracts using Remix IDE (web app for Solidity development). As example, I created a simple contract that can receive and store ether. Owner of the contract can withdraw accumulated funds to any valid public address. \n\nRemix IDE: \nhttps://remix.ethereum.org/\n\nCode from video:\nhttps://gist.github.com/Chmarusso/d8d5349084b57c6f02c32ea30dbed79c\n\nSolidity official docs: \nhttps://docs.soliditylang.org/\n\nLearn Solidity by example:\nhttps://cryptozombies.io/\nhttps://www.youtube.com/watch?v=hMwdd664_iw&list=PLO5VPQH6OWdULDcret0S0EYQ7YcKzrigz\n\n#solidity #ethereum #smartcontracts\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-09-11 20:33:52 deploy-your-first-solidity-smart-contract-with-remix-ide ckivz8t54001di3umfv7i4q26 2021-09-11 21:05:10.283 2021-09-11 21:05:10.283 +cktihfg5v00020wkyoxkhmenb React&TypeScript: Children #7 https://www.youtube.com/watch?v=oxysSiVpJws Omówimy sobie w jaki sposób otypować children jako props samodzielnie bez aliasu typu React.FC.\n\nSandbox:\nhttps://codesandbox.io/s/doman-code-react-ts-children-bxk2q\n\nZapraszam do komentowania, dawania łapek w górę oraz subskrybowania kanału (wraz z dzwoneczkiem - jeżeli chcesz jako pierwsza/y otrzymywać powiadomienie o nowych filmach).\n\nZapraszam również do moich innych playlist:\n👉 TypeScript z Domanem\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7PmdS1m4i9UEM2LMkUuX5G\n👉 Poznajemy JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7oglEGILrvTc97gGo_UvMe\n👉 Doman Recenzuje\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7d8Dudc38A4RK_Nlq8CR6z\n👉 Doman Talki\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx5tK5hR7lIMCYgto6VPaaQL\n👉 TDD Kata JavaScript\nhttps://youtube.com/playlist?list=PLvLDnOjb-Hx7_vLX7xR_Cc1pUDRBfcA87\n\nMoje kursy:\n👉 React od podstaw (współautor wraz z Samurajem Programowania)\nhttps://websamuraj.pl/kurs-react-js-od-podstaw/\n👉 Programowanie obiektowe w JavaScript - opanuj, tworząc gry!\n(współautor wraz z Samurajem Programowania, Michałem Dziedzińskim - Dziedziuch Programuje oraz Kacprem Sieradzińskim)\nhttps://www.mentorzy.it/kursy/programowanie-obiektowe-w-javascript\n\n00:00 Rozpoczęcie\n00:20 JSX.Element\n03:48 JSX.Element[]\n05:52 string\n07:25 number\n08:20 ReactText\n09:56 ReactChild\n11:54 ReactNode\n16:00 ReactNodeArray\n19:24 Zakończenie\n19:47 Czas z rodziną (powód braku nowych filmików) :)\n12:59 Zakończenie 2021-09-13 10:00:33 reactandtypescript:-children-7 ckjpkgp9u000012mnlbnkxu51 2021-09-13 10:07:15.091 2021-09-13 10:07:15.091 +cktjzksrz00020wl5fhwe8i9h 🍿Web Prasówka #18 https://www.youtube.com/watch?v=EEPg3A1-tDI ⚡️ #webdev​​​, #js​​​, #frontend, backend, heheszki, nowe technologie and more. 2021-09-14 11:13:09 web-prasowka-18 ckivz8t54001di3umfv7i4q26 2021-09-14 11:23:03.983 2021-09-14 11:23:03.983 +cktk61n2c00020wju66lp478h JVM Tuesday vol.55 – Spring porzuca stare Javy, plan na Jakartę EE 10 https://vived.io/jvm-tuesday-vol-55-spring-porzuca-stare-javy-plan-na-jakarte-ee-10/

🎉 Nadeszła era Javy 17 🎉.

\n

Mamy zatem nowy LTS. Ale w tej edycji mamy też dla was ciekawy artykuł czemu właściwie warto zaktualizować aplikacje wspierające JDK 8 . Oprócz tego - JSF żyje i straszy 🤡

\n

Artykuł JVM Tuesday vol.55 – Spring porzuca stare Javy, plan na Jakartę EE 10 pochodzi z serwisu Vived.

2021-09-14 14:07:45 jvm-tuesday-vol.55---spring-porzuca-stare-javy-plan-na-jakarte-ee-10 ckmor5k8y000044moj65m13y0 2021-09-14 14:24:07.433 2021-09-14 14:24:07.433 +cktk6vh9t00020wjfu8axp5ji Kiedy zacząć uczyć się frameworków frontendowych? #shorts https://www.youtube.com/watch?v=hSve2ajeIko 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/q88RUeTHbU 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n#shorts\n\nAngular, Vue czy React są bardzo kuszące, ale zanim zaczniemy ich naukę upewnijmy się, że znamy dobrze podstawy!\n\nFilip Mamcarczyk\nKacper Sokołowski 2021-09-14 14:31:45 kiedy-zaczac-uczyc-sie-frameworkow-frontendowych-shorts ckj9sdcq7000051l5pzwpbq9f 2021-09-14 14:47:19.601 2021-09-14 14:47:19.601 +cktkia7ls00020wmsb9f5y6dv Techniczny blog w NextJS https://www.youtube.com/watch?v=DxjusuDryWs W dzisiejszym odcinku pokażę Ci jak skonfigurować sobie projekt bloga technicznego opartego na NextJS. Do tworzenia treści użyjemy sobie MDXowej składni. Stylowaniem zajmie się biblioteka StyledComponents.\n\nhttps://github.com/Dan86de/techblog-starter - Link do kodu z odcinka\n\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-09-14 19:29:09 techniczny-blog-w-nextjs ckmoh2k1y000050l0rtc97ktd 2021-09-14 20:06:42.688 2021-09-14 20:06:42.688 +cktlp7w0d00020wlgu8uqsi5f TA PRACA JEST NUDNA https://www.youtube.com/watch?v=gJ7te7Gpj-U Przy okazji ostatniej konferencji gdzie opowiadałem o product engineeringu znowu usłyszałem, że praca w firmach produktowych to raczej nuda i monotonia. Stack jest jednolity, projekty zmieniają się rzadko, a my bardzo szybko rozumiemy czego spodziewać się od danego pracodawcy do końca naszego zatrudnienia...\n\nDzisiaj, na podstawie historii projektów w Facebooku i Etsy postaram się odbić tę podkreconą i odpowiedzieć jak ja sam patrzę na pracę w firmie produktowej oraz co sprawia, że inżynier z pracy w takim miejscu może czerpać naprawdę sporo satysfakcji. Być może więcej, niż z pracy w miejscu, gdzie jedyna zmiana zawsze będzie dotyczyć frameworka stosowanego na produkcji.\n\nCzekam na wasze opinie - gdzie warto pracować, a gdzie praca to faktycznie "nuda"?\n\nŹródła:\n\nReakcje: https://medium.com/facebook-design/reactions-not-everything-in-life-is-likable-5c403de72a3f\nLike: https://www.quora.com/Whats-the-history-of-the-Awesome-Button-that-eventually-became-the-Like-button-on-Facebook\nData-driven: https://www.youtube.com/watch?v=SZOeV-S-2co\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-09-15 16:00:19 ta-praca-jest-nudna ckiyt1v9s001fi3umcgnxbgiu 2021-09-15 16:08:37.837 2021-09-15 16:08:37.837 +cktlvje6r00020wmm5kf0nlzr #shorts - zmniejsz/zwiększ font w edytorze wp http://kody.wig.pl/javascript/shorts-zmniejsz-zwieksz-font-w-edytorze-wp/ Wpis ten jest tak naprawdę uzupełnieniem wpisu dodanie niestandardowych przycisków za pomocą quicktag w wordpress Niestety ale ten edytor quicktag jest bardzo prymitywny i jak dla mnie ma zbyt mały font ;). Nadszedł ten dzień w którym stwierdziłem że nie będę powiększał okna za pomocą ctrl + +/- również powiększamy stronę w podglądzie - "to […] 2021-09-15 19:00:17 shorts-zmniejszzwieksz-font-w-edytorze-wp ckijj62co001hi3um2kbkcy0a 2021-09-15 19:05:32.307 2021-09-15 19:05:32.307 +cktlw28qs00020wl28063dp88 Tworzenie formularza w React – Kurs React – cz. 10 https://devpebe.com/2021/09/15/tworzenie-formularza-w-react-kurs-react-cz-10/ Jak tworzyć formularze w React? W tej części kursu przedstawię jak stworzyć bardzo prosty formularz bez użycia zewnętrznych bibliotek (np. formik, redux-form). 2021-09-15 19:12:16 tworzenie-formularza-w-react---kurs-react---cz.-10 ckiplfn1c001ci3um4nlf8o4x 2021-09-15 19:20:11.716 2021-09-15 19:20:11.716 +cktlzu02o00020wjmpikc95d4 Retro-Gaming czyli wspomnień czar https://nowoczesny-frontend.pl/retro-gaming-czyli-wspomnien-czar/ Dziś nie będzie o frontendzie czy nawet o programowaniu jako takim. Dziś chciałbym się podzielić kilkoma zdjęciami i wspomnieniami z przeszłości. Okazją do tych wspomnień… 2021-09-15 20:49:10 retro-gaming-czyli-wspomnien-czar ckcv2snww001ei3um3wmeeaom 2021-09-15 21:05:45.696 2021-09-15 21:05:45.696 +cktnzieu600020wmhzn6dlj4j Mechanizm wykrywania zmian – Default vs OnPush https://a-frontman.pl/mechanizm-wykrywania-zmian-default-vs-onpush/?utm_source=rss&utm_medium=rss&utm_campaign=mechanizm-wykrywania-zmian-default-vs-onpush

Za wykrywanie, że dane w komponencie się zmieniły, a jego widok trzeba przerysować odpowiada mechanizm wykrywania zmian…

\n

Artykuł Mechanizm wykrywania zmian – Default vs OnPush pochodzi z serwisu a - frontman.

2021-09-17 06:12:15 mechanizm-wykrywania-zmian---default-vs-onpush ckio5ucds001qi3um0occaae7 2021-09-17 06:32:17.31 2021-09-17 06:32:17.31 +cktolfo7z00020wmna029nfpc Moja strategia efektywnej nauki programowania https://www.youtube.com/watch?v=B6rcu-Rh6nQ Cryptozombies: https://cryptozombies.io/\nFreeCodeCamp: https://www.freecodecamp.org/\nHarvardCS50: https://www.youtube.com/watch?v=ByKj8TSgfjI\nAnki: https://www.youtube.com/watch?v=ouCkE8GvU7g\nPomodoro: https://www.youtube.com/watch?v=Uz5AzAuBoac\nZarządzaniu nauką w czasie: https://www.youtube.com/watch?v=iDNNwSMCpa4\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-09-17 16:00:05 moja-strategia-efektywnej-nauki-programowania ckiyt1v9s001fi3umcgnxbgiu 2021-09-17 16:46:01.055 2021-09-17 16:46:01.055 +cktph2z1r00020wkxgvkyt3w4 Software Craftsmanship Saturday vol. 55 – Facebook Files, podatności w Azure, odszedł twórca ZX Spectrum https://vived.io/software-craftsmanship-saturday-vol-55-facebook-files-podatnosci-w-azure-odszedl-tworca-zx-spectrum/

W dniu dzisiejszym mamy dla Was śledztwo dziennikarskie WSJ na temat Facebooka oraz poważną podatność w Azure. Pożegnamy też twórce jednego z najważniejszych komputerów w historii 😭

\n

Artykuł Software Craftsmanship Saturday vol. 55 – Facebook Files, podatności w Azure, odszedł twórca ZX Spectrum pochodzi z serwisu Vived.

2021-09-18 07:25:19 software-craftsmanship-saturday-vol.-55---facebook-files-podatnosci-w-azure-odszedl-tworca-zx-spectrum ckmor5k8y000044moj65m13y0 2021-09-18 07:31:56.271 2021-09-18 07:31:56.271 +cktpq79lc00020vjrdfo4nyxw Wzorzec projektowy Proxy https://devszczepaniak.pl/wzorzec-projektowy-proxy/

Ten wpis jest kolejnym wpisem z serii wpisów o wzorcach projektowych. Po przeczytaniu tego wpisu, zachęcam Cię do zapoznania się z innymi wpisami z tej serii: Wzorzec projektowy Factory (Fabryka) Wzorzec projektowy Singleton Wzorzec projektowy Command (Polecenie) Tym razem omówię strukturalny wzorzec projektowy Proxy (Pełnomocnik). Proxy jako serwer pośredniczący Często pierwszym skojarzeniem ze słowem proxy … Czytaj dalej Wzorzec projektowy Proxy

\n

Artykuł Wzorzec projektowy Proxy pochodzi z serwisu Devszczepaniak.pl.

2021-09-18 11:32:23 wzorzec-projektowy-proxy ckiyvf2eg0012i3um2h8g0dup 2021-09-18 11:47:13.104 2021-09-18 11:47:13.104 +cktqw9bys00020wkveqjo0gde Sprawdź jak walidować formularze w czystym JS! https://frontcave.pl/sprawdz-jak-walidowac-formularze-w-czystym-js/

Spis treści Wprowadzenie Walidowanie formularzy Baza pod przykłady Customowe wiadomości dla walidacji standardowej Customowy sposób prezentacji rezultatów walidacji Klikalny przykład na Github Pages Pełny kod przykładu na Github Podsumowanie Wprowadzenie Walidowanie formularzy nie zawsze jest prostym zadaniem – najczęściej wyłączamy domyślną walidację i piszemy bardzo customowy kod. Okazuje się jednak, że JS ma wbudowane Constraint … Czytaj dalej Sprawdź jak walidować formularze w czystym JS!

\n

Artykuł Sprawdź jak walidować formularze w czystym JS! pochodzi z serwisu Front Cave.

2021-09-19 07:10:49 sprawdz-jak-walidowac-formularze-w-czystym-js! ckirm3wzs001li3umfdkcfl6k 2021-09-19 07:24:33.364 2021-09-19 07:24:33.364 +cktrlt1za00020wlkmdt7tk3a How to mint NFT and publish it on OpenSea using ERC1155 smart contract https://www.youtube.com/watch?v=J4p1sdo3Rz4 ERC1155: \nhttps://eips.ethereum.org/EIPS/eip-1155\nhttps://docs.openzeppelin.com/contracts/3.x/erc1155\n\nRemix IDE:\nhttps://remix.ethereum.org/\n\nOpenSea marketplace: \nhttps://testnets.opensea.io/\n\nNFTs explained: \nhttps://nftschool.dev/concepts/non-fungible-tokens\n\n#nft #ethereum #opensea\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-09-19 19:04:31 how-to-mint-nft-and-publish-it-on-opensea-using-erc1155-smart-contract ckivz8t54001di3umfv7i4q26 2021-09-19 19:19:43.942 2021-09-19 19:19:43.942 +cktstqgqk00020vl12s6h1n2c MODUŁY W JĘZYKU JAVASCRIPT - Module Pattern vs Common JS vs AMD vs ES Modules https://www.youtube.com/watch?v=5upaxzBNbmQ Moduły to klucz do skalowalnej aplikacji w dowolnym języku programowania. Dzisiaj opowiadamy jak z nich korzystać w kontekście JavaScriptu.\n\nZapewne wielu z was spotykając się po raz pierwszy z tematem modułów zadawała sobie pytanie - czy uczyć się CommonJS, AMD, ES Modules, a może jeszcze czegoś innego? Jak to działa, czy jest od siebie zależne albo skąd w ogóle takie a nie inne podziały?\n\nWłaśnie o tym wszystkim opowiadamy w najnowszym filmie, w którym to przejdziemy przez kolejne ewolucje modularyzacji kodu JS - zaczniemy od wzorca projektowego Revealing Module Pattern, przejdziemy do świata CommonJS, następnie poznamy AMD żeby na koniec zapoznać się ze współczesnymi ES Modules. Zapraszamy!\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-09-20 15:18:04 moduly-w-jezyku-javascript-module-pattern-vs-common-js-vs-amd-vs-es-modules ckiyt1v9s001fi3umcgnxbgiu 2021-09-20 15:49:26.204 2021-09-20 15:49:26.204 +cktsyo9w900020wjoo64mwsua Dlaczego uwielbiam pracować zdalnie? 8 korzyści pracy zdalnej https://devpebe.com/2021/09/20/dlaczego-uwielbiam-pracowac-zdalnie-8-korzysci-pracy-zdalnej/ Od wielu miesięcy pracuje zdalnie. Dlaczego pracuję zdalnie? Na to pytanie jest dosyć prosta odpowiedź. Co sprawia, że uwielbiam pracować zdalnie? Jakie są korzyści pracy zdalnej? 2021-09-20 17:59:13 dlaczego-uwielbiam-pracowac-zdalnie-8-korzysci-pracy-zdalnej ckiplfn1c001ci3um4nlf8o4x 2021-09-20 18:07:42.105 2021-09-20 18:07:42.105 +cktu4jth100020wl47ew2geic JVM Tuesday vol.56 – Java 17… again. A także Refleksja w czasie kompilacji 🤯 https://vived.io/jvm-tuesday-vol-56-java-17-again-a-takze-refleksja-w-czasie-kompilacji/

Tydzień temu mieliśmy okazję poinformować wszystkich o premierze Javy 17. Wtedy jednak jeszcze nie spodziewałem się takiego wysypu publikacji dotyczących tego wydania. Oracle klasycznie wykorzystało nowe JDK do obwieszczenia kilku interesujących zmian, ale tym razem doczekaliśmy również kilku ciekawych, zewnętrznych publikacji.

\n

Artykuł JVM Tuesday vol.56 – Java 17… again. A także Refleksja w czasie kompilacji 🤯 pochodzi z serwisu Vived.

2021-09-21 13:37:19 jvm-tuesday-vol.56---java-17...-again.-a-takze-refleksja-w-czasie-kompilacji ckmor5k8y000044moj65m13y0 2021-09-21 13:39:58.069 2021-09-21 13:39:58.069 +cktu8gvpf00020wl8lyuhj7mi Angular, React czy Vue - który framework wybrać? #shorts https://www.youtube.com/watch?v=nC0RssQABmc 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/q88RUeTHbU 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n#shorts\n\nDokumentacje:\nAngular: \nhttps://angular.io/start\n\nReact:\nhttps://reactjs.org/tutorial/tutorial.html\n\nVue:\nhttps://vuejs.org/v2/guide/\n\nFilip Mamcarczyk\nKacper Sokołowski 2021-09-21 15:22:31 angular-react-czy-vue-ktory-framework-wybrac-shorts ckj9sdcq7000051l5pzwpbq9f 2021-09-21 15:29:39.459 2021-09-21 15:29:39.459 +cktvcdq5500020wk3iu9eqc77 Zatrudnianie juniorów i seniorów a produktywność – model i symulacja https://typeofweb.com/zatrudnianie-juniorow-i-seniorow-a-produktywnosc-model-i-symulacja Jakiś czas temu w czeluściach Internetu wpadłem na niezwykle ciekawy artykuł, który mówił o zatrudnianiu juniorów do zespołu i ich wpływie na wydajność pracy. Przedstawiał kilka prostych symulacji, z których wprost wynikało… no właśnie, co z nich wynikało? Czy „opłaca się” zatrudniać osoby bez doświadczenia? Na końcu artykułu interaktywna symulacja! 2021-09-19 15:57:42 zatrudnianie-juniorow-i-seniorow-a-produktywnosc---model-i-symulacja ckiopy3xs0006i3umgmnv8l52 2021-09-22 10:06:56.921 2021-09-22 10:06:56.921 +cktwyksix00020wl96tjy279b Dlaczego stoję na standupach? ⌨️ hello roman #169 https://www.youtube.com/watch?v=AE9KFTn8Kko Skorzystaj z kodu helloroman i odbierz zniżkę na biurko Deskwise! \nWięcej o Deskwise na stronie https://deskwise.pl/\n\nSpecyfikacja mojego biurka:\nModel Älskar\n- Blat dębowy, fazowany i zaokrąglony\n- Stelaż czarny\n- Wymiary 160x80* sorry za pomyłkę w odcinku \n- Kolor linoleum Charcoal\n- Kanał kablowy uchylany\n- Przepust kablowy na środku \n- Oświetlenie Ambient LED \n\n⭐️ Wesprzyj kanał za 34,99 zł na miesiąc i uzyskaj dostęp do wszystkich moich kursów na kanale: \nhttps://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g/join\n\n📓 Kup Hello Notes na https://sklep.helloroman.pl\n\n🔔 Subskrybuj mój kanał - https://www.youtube.com/helloroman?sub_confirmation=1\n\n📌 Sprawdź też:\nInstagram - http://instagram.com/siemaroman\nFacebook - https://facebook.com/helloroman.vlog\nMoja strona - https://helloroman.com\n\n📫 Mój newsletter - https://helloroman.com/newsletter/\n✉️ Kontakt - helloroman.vlog@gmail.com\n\nW moich filmach znajdziecie wiele praktycznych porad, jak zacząć swoją przygodę z programowaniem, na co uważać, jak motywować się do pracy, aby nie stracić zapału. Wspólnie odkrywać będziemy możliwości jakie kryją JavaScript, HTML i CSS – pomogę Wam także zrozumieć, jak skutecznie wykorzystywać potencjał popularnych frameworków, takich jak Vue lub React. 2021-09-23 13:00:04 dlaczego-stoje-na-standupach-hello-roman-169 ckiswuz9s0017i3um5mg4h7q1 2021-09-23 13:16:04.329 2021-09-23 13:16:04.329 +cktwyktm800120wl9zao2drzo Frontend Thursday vol. 56 https://vived.io/frontend-thursday-vol-56/

W tym tygodniu mamy dla Was betę Gatsby 4.0 i świeżo wydany MUI 5.0 (dawniej Material-UI)

\n

Artykuł Frontend Thursday vol. 56 pochodzi z serwisu Vived.

2021-09-23 12:59:02 frontend-thursday-vol.-56 ckmor5k8y000044moj65m13y0 2021-09-23 13:16:05.744 2021-09-23 13:16:05.744 +cktyk79qi00020xl4rm076pi4 Piszemy klona Reduxa/Vuexa! Własna biblioteka w 20 minut #javascript #vue #react https://www.youtube.com/watch?v=NQ87bmff1mM Czy tak popularne biblioteki jak Redux i Vuex można sklonować w 20 minut, używając przy tym 40 linijek kodu?\n\nOkazuje się, że tak! Jako, że popularność wspomnianych bibliotek wynika właśnie z prostoty ich obsługi, to i klonowanie API w ramach ćwiczeń nie powinno być szczególnie trudnym zadaniem. Dzisiaj zaprezentuję ci jak przy pomocy odrobiny reverse-engineeringu odtworzyć podstawowe mechanizmy Vuexa i dać ci możliwość rozwinięcia takiego projektu we własnym zakresie.\n\nZapraszamy na premierę!\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-09-24 16:00:11 piszemy-klona-reduxavuexa!-wlasna-biblioteka-w-20-minut-javascript-vue-react ckiyt1v9s001fi3umcgnxbgiu 2021-09-24 16:09:11.178 2021-09-24 16:09:11.178 +cktzjvm4i00020vml0b6a4kp2 Software Craftsmanship Weekly vol.56 – The State of DevOps, zyski AWS, cyfrowy juan https://vived.io/software-craftsmanship-weekly-vol-56-the-state-of-devops-zyski-aws-cyfrowy-juan/

No, wreszcie mamy edycje, która z posiada interesujące, strikte inżynierskie tematy, a nie Facebooki, Apple czy Google. Żeby jednak było po "naszemu" i żebyście nie dostali za dużego szoku - nie zabraknie jednak Crypto i Chin. Zapraszamy do lektury!

\n

Artykuł Software Craftsmanship Weekly vol.56 – The State of DevOps, zyski AWS, cyfrowy juan pochodzi z serwisu Vived.

2021-09-25 08:45:16 software-craftsmanship-weekly-vol.56---the-state-of-devops-zyski-aws-cyfrowy-juan ckmor5k8y000044moj65m13y0 2021-09-25 08:47:53.538 2021-09-25 08:47:53.538 +cku01j68a00020wmnfiqcfl3i Jak zadawać dobre pytania techniczne? https://devszczepaniak.pl/jak-zadawac-dobre-pytania-techniczne/

Nie ma na świecie programisty, który wiedziałby wszystko. Duża część pracy programistów poświęcona jest poszukiwaniu dobrych i optymalnych rozwiązań. Często jednak nie udaje się odnaleźć zadowalającej odpowiedzi. W takim przypadku konieczne staje się zadawanie pytań. Ten wpis pokaże Ci jak zadawać dobre pytania techniczne, bo wbrew pozorom nie jest to takie łatwe. Przed zadaniem pytania … Czytaj dalej Jak zadawać dobre pytania techniczne?

\n

Artykuł Jak zadawać dobre pytania techniczne? pochodzi z serwisu Devszczepaniak.pl.

2021-09-25 16:56:45 jak-zadawac-dobre-pytania-techniczne ckiyvf2eg0012i3um2h8g0dup 2021-09-25 17:02:06.154 2021-09-25 17:02:06.154 +cku1cuaoq00020wl1el1tcbrl DevTools / WebPageTest - efektywne testowanie wydajności frontendu wg procesu https://www.youtube.com/watch?v=f8ue76ZpFw8 28. września 2021 o godz. 20:00, podczas live'a, dogłębnie omówię narzędzia DevTools i WebPageTest oraz pokażę na ich podstawie prawidłowy proces testowania wydajności stron WWW, celem wysnucia prawidłowych wniosków.\n\nKurs online Zoptymalizowany Frontend (ruszyła sprzedaż, specjalna oferta tylko do 30.09.2021, godz. 20:00!): https://www.webdevinsider.pl/zoptymalizowany-frontend 2021-09-26 14:52:27 devtools-webpagetest-efektywne-testowanie-wydajnosci-frontendu-wg-procesu ckjrjuqf900002bk2kpgy4181 2021-09-26 15:06:27.098 2021-09-26 15:06:27.098 +cku2uixh300020wmm4rnaaxfz Daty i czas w JavaScript z Day.js. Alternatywa dla Moment.js. https://www.youtube.com/watch?v=4oePL9JPN0k Praca z datami i czasem JS bez biblioteki nie należy do najprostszych zadań. Jaką alternatywę wybrać dla Moment.js, które od ponad roku uznawane jest za technologię legacy? W tym odcinku Marcin prezentuje Day.js, które charakteryzuje mała wielkość paczki (2 KB) oraz duże podobieństwo do Moment.js.\n\nhttps://github.com/you-dont-need/You-Dont-Need-Momentjs\nhttps://day.js.org/\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-09-27 16:00:08 daty-i-czas-w-javascript-z-day.js.-alternatywa-dla-moment.js. ckiyt1v9s001fi3umcgnxbgiu 2021-09-27 16:09:16.023 2021-09-27 16:09:16.022 +cku30agzo00020wmc9t6bdohe Zrozumieć JavaScript - set https://www.youtube.com/watch?v=974-EqF40b0 Tym odcinkiem chcę zapoczątkować większą serię na tym kanale. Zrozumieć JavaScript to seria, gdzie wspólnie będziemy starali się zrozumieć różne pojęcia związane z progarmowaniem w JavaScript.\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-09-26 19:55:43 zrozumiec-javascript-set ckmoh2k1y000050l0rtc97ktd 2021-09-27 18:50:39.108 2021-09-27 18:50:39.108 +cku41f3gv00020xmhgmxkve3a JVM Tuesday vol.57 – Loom coraz bliżej, Jakarta EE w liczbach, usprawniona serializacja w Kotlinie https://vived.io/jvm-tuesday-vol-57-loom-coraz-blizej-jakarta-ee-w-liczbach-usprawniona-serializacja-w-kotlinie/

W dzisiejszej edycji opada już kurz po bitwie (czy raczej premierze Javy 17) i możemy zacząć patrzeć w przyszłość - a ta rysuje się bardzo interesująco. Zapraszamy do nowej edycji!

\n

Artykuł JVM Tuesday vol.57 – Loom coraz bliżej, Jakarta EE w liczbach, usprawniona serializacja w Kotlinie pochodzi z serwisu Vived.

2021-09-28 11:52:54 jvm-tuesday-vol.57---loom-coraz-blizej-jakarta-ee-w-liczbach-usprawniona-serializacja-w-kotlinie ckmor5k8y000044moj65m13y0 2021-09-28 12:10:00.655 2021-09-28 12:10:00.655 +cku42mpqz00020vminvf5t74p Trade/sell NFTs automatically from Solidity smart contract https://www.youtube.com/watch?v=XLrhD6GHi0E #solidity #nft #ethereum\n\nFree Web3 Starter for JS Devs (email course):\nhttps://bit.ly/web3starter\n\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-09-28 05:40:27 tradesell-nfts-automatically-from-solidity-smart-contract ckivz8t54001di3umfv7i4q26 2021-09-28 12:43:55.739 2021-09-28 12:43:55.739 +cku5aarma00020wjuksvix1hk UI | UX | Współpraca design ↔ dev | Magdalena Ostoja-Chyżyńska https://www.youtube.com/watch?v=B7SCwO9WRPs O współpracy programistów i programistek z designerami i designerkami rozmawiałem z Magdaleną Ostoją-Chyżyńską – założycielką studia UX GIRL i UX/UI Designerką z 10-letnim doświadczeniem\n\n00:00 Start\n03:00 UI / UX\n07:00 Jak wygląda współpraca designerów i developerów\n11:00 UX Girl i praca\n28:40 6 porad dla programistów\n35:40 Zatrudnianie designerów\n41:20 Zakończenie\n\nLinki:\n– UX GIRL https://www.uxgirl.com/\n– Wystąpienie z WarsawJS https://www.youtube.com/watch?v=dWljarx88gQ\n\n📘 Kup „TypeScript na poważnie”: https://sklep.typeofweb.com\n\n🔔 Subskrybuj mój kanał: https://www.youtube.com/typeofweb?sub_confirmation=1\n\n🔗 Znajdziesz mnie na:\nBlog – https://typeofweb.com\nFacebook – https://facebook.com/typeofweb\nInstagram – https://instagram.com/michal_typeofweb\nPodcast – https://anchor.fm/typeofweb\n\n✋ Dołącz do społeczności na Discordzie! https://discord.typeofweb.com\n\nMusic: www.bensound.com 2021-09-29 08:48:00 ui-or-ux-or-wspolpraca-design-dev-or-magdalena-ostoja-chyzynska cklidcb3o00002pma33gvhnbe 2021-09-29 09:06:21.394 2021-09-29 09:06:21.394 +cku5oggdz00020wlkn96e0qqr MediaRecorder API – sprawdź jak nagrywać z poziomu Web! https://frontcave.pl/mediarecorder-api-sprawdz-jak-nagrywac-z-poziomu-web/

Spis treści Wprowadzenie Użycie MediaRecorder Jak działa MediaRecorder API? Pobieranie streamu z kamery Pobieranie streamu z udostępniania ekranu Pobieranie streamu z canvasa Klikalny przykład na Github Pages Pełny kod przykładu na Github Podsumowanie Wprowadzenie Sporo osób nie wie o istnieniu MediaRecorder API – a umożliwia ono nagrywanie z poziomu przeglądarki internetowej. Warto znać to API … Czytaj dalej MediaRecorder API – sprawdź jak nagrywać z poziomu Web!

\n

Artykuł MediaRecorder API – sprawdź jak nagrywać z poziomu Web! pochodzi z serwisu Front Cave.

2021-09-29 15:32:00 mediarecorder-api---sprawdz-jak-nagrywac-z-poziomu-web! ckirm3wzs001li3umfdkcfl6k 2021-09-29 15:42:41.399 2021-09-29 15:42:41.399 +cku5qnzjj00020wl12ef5cnqo MDBootstrap, czyli biznes i open source - Michał Szymański | Przeprogramowani ft. Gość #16 https://www.youtube.com/watch?v=Y3Rl8eIUELQ Open-source i własny biznes w jednym? Brzmi jak marzenie wielu deweloperów! Praktyka pokazuje jednak, że tego typu połączenia często pozostają tylko w sferze marzeń. Michał Szymański - współtwórca popularnego pakietu komponentów MDBoostrap - opowie nam co zrobić aby marzenia przekuć w rzeczywistość i w oparciu o popularne narzędzia dla front-end developerów rozkręcić dobrze prosperującą firmę. Na naszą rozmowę zapraszamy już w środę o 18:00! 2021-09-29 16:27:05 mdbootstrap-czyli-biznes-i-open-source-michal-szymanski-or-przeprogramowani-ft.-gosc-16 ckjcy6q5400001hkzvyh1xycf 2021-09-29 16:44:32.047 2021-09-29 16:44:32.047 +cku5qo58k00120wl1nahverm8 MDBootstrap, czyli biznes i open source - Michał Szymański | Przeprogramowani ft. Gość #16 https://www.youtube.com/watch?v=AJ-_6DefOXU Open-source i własny biznes w jednym? Brzmi jak marzenie wielu deweloperów! Praktyka pokazuje jednak, że tego typu połączenia często pozostają tylko w sferze marzeń. Michał Szymański - współtwórca popularnego pakietu komponentów MDBoostrap - opowie nam co zrobić aby marzenia przekuć w rzeczywistość i w oparciu o popularne narzędzia dla front-end developerów rozkręcić dobrze prosperującą firmę. Na naszą rozmowę zapraszamy już w środę o 18:00! 2021-09-29 16:27:05 mdbootstrap-czyli-biznes-i-open-source-michal-szymanski-or-przeprogramowani-ft.-gosc-16 ckiyt1v9s001fi3umcgnxbgiu 2021-09-29 16:44:39.428 2021-09-29 16:44:39.428 +ckucapm9m00020vl59mi6h74v Zrozumieć HTML - wstęp https://www.youtube.com/watch?v=ybQJbdDQMzY Zapowiedź drugiej większej serii w sezonie zimowym na kanale Programistafrontend. Postaramy się wspólnie zrozumieć HTMLową składnię na większym poziomie. Specjalnie na tę okazję przygotowałem roadmapę wg. której będziemy wspólnie rozwijać swoje HTMLowe umiejętności.\n\nLink do roadmapy:\nhttps://drive.google.com/file/d/1Pmfhe9o9dwQW7uveWeq12r-1Gu_xNFW9/view?usp=sharing\n\n🎯: https://www.programistafrontend.pl/\n📸: https://www.instagram.com/programistafrontend/\n📧: daniel@programistafrontend.pl 2021-10-04 06:29:06 zrozumiec-html-wstep ckmoh2k1y000050l0rtc97ktd 2021-10-04 06:52:17.53 2021-10-04 06:52:17.53 +ckuce8tvc00020wkyglzkvu7t Jak być na bieżąco w branży IT? Sprawdź nowe możliwości! https://vived.io/jak-byc-na-biezaco-w-branzy-it-sprawdz-nowe-mozliwosci/

Ten wpis będzie nietypowy, bo tym razem nie piszemy, o tym co się wydarzyło w świecie technologii, a u nas w aplikacji Vived. Koniecznie przeczytajcie, bo zmienia się sporo i zdecydowanie na lepsze!

\n

Artykuł Jak być na bieżąco w branży IT? Sprawdź nowe możliwości! pochodzi z serwisu Vived.

2021-10-04 08:25:03 jak-byc-na-biezaco-w-branzy-it-sprawdz-nowe-mozliwosci! ckmor5k8y000044moj65m13y0 2021-10-04 08:31:12.696 2021-10-04 08:31:12.696 +ckuculloe00020wjowt93o1dr JAK ZMIENIĆ PRACĘ JAKO PROGRAMISTA (TOP 10 PORAD) https://www.youtube.com/watch?v=ceiWMT4GxXs Zmiana pracy to jedna z najtrudniejszych decyzji jaką będziemy musieli podjąć na pewnym etapie naszej kariery. W najnowszym filmie mamy dla was 10 porad o tym, jak robić to dobrze.\n\n(PS. Początkowe slow-motion autora wynika z wczesnej godziny nagrywania filmu ;) )\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-10-04 16:01:38 jak-zmienic-prace-jako-programista-(top-10-porad) ckiyt1v9s001fi3umcgnxbgiu 2021-10-04 16:09:02.462 2021-10-04 16:09:02.462 +ckucvxu9x00090wmgr2j98zia Transfer ERC20 token from your Solidity smart contract https://www.youtube.com/watch?v=9tYkS7YyOjU Every valid public address can receive an ERC20 token/coin. That's really powerful because your smart contracts can receive and hold coins as well. In this video, I will show you how to allow your smart contract to actually transfer any ERC20 token that your contract received. \n\nCode from this video: https://gist.github.com/Chmarusso/5b2012b7dc9afec33ec19d1583046f4a\n\nCheck out my open email course: https://bit.ly/web3starter\n\n#solidity #erc20 #ethereum\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-10-04 16:30:12 transfer-erc20-token-from-your-solidity-smart-contract ckivz8t54001di3umfv7i4q26 2021-10-04 16:46:33.093 2021-10-04 16:46:33.093 +ckucy55xk00020wjp5x6nampp Nadpisanie poprzedniego commita https://www.oskarkowalow.pl/blog/nadpisanie-poprzedniego-commita Niejednokrotnie przydaje się nadpisanie poprzedniego commita.\nPoprzez nadpisanie mam na myśli na przykład zmianę commit message, edycję kodu… 2021-10-04 00:00:00 nadpisanie-poprzedniego-commita ckocpwuso0019afl7he6igw3f 2021-10-04 17:48:14.024 2021-10-04 17:48:14.024 +ckuduyckz00020wlgswvykynf Full Stack Dev Q&A #6 - Konsultacje na żywo https://www.youtube.com/watch?v=-H_7O6S-u74 Chcesz zadać nam pytanie dotyczące szeroko pojętego full-stack developmentu lub omówić wybrany temat z tego obszaru? Dołącz do naszych konsultacji na żywo, które organizujemy po to, aby jeszcze lepiej adresować Wasze potrzeby i pytania, których wiele pojawia się każdego dnia.\n\nStream wysokiej jakości oraz sesja pytań i odpowiedzi jest dostępna na eduweb\nhttps://eduweb.pl/wydarzenia/full-stack-dev-qa-6 2021-10-05 08:51:21 full-stack-dev-qanda-6-konsultacje-na-zywo ckieg15g0001bi3um0fj3gred 2021-10-05 09:06:43.379 2021-10-05 09:06:43.379 +ckue9a2f400020wljw26s3r3x JVM Tuesday vol.58 – Mariana Trench, WildFly, UTF-8 https://vived.io/jvm-tuesday-vol-58-mariana-trench-wildfly-utf-8/

Wszyscy piszą dziś o Facebooku, to my też. Ale jeśli jesteście znudzeni tematem wczorajszej awarii (do tej wrócimy sobie w sobotę, jak opadnie kurz po bitwie), to mamy dla was facebookowy linter. A także informacje o zmianach w WildFly oraz zmianie domyślnego kodowania Javy.

\n

Artykuł JVM Tuesday vol.58 – Mariana Trench, WildFly, UTF-8 pochodzi z serwisu Vived.

2021-10-05 13:44:23 jvm-tuesday-vol.58---mariana-trench-wildfly-utf-8 ckmor5k8y000044moj65m13y0 2021-10-05 15:47:44.704 2021-10-05 15:47:44.704 +ckuflyj8600020wju7pwregs4 Zdecentralizowany handel grami - Szymon Jankowski z Hashup.it https://www.youtube.com/watch?v=ZE4Hfhtsq2E Rozmowa z founderem nowego ambitnego zdecentralizowanego projektu Hashup.it (https://hashup.it/)\n\nSociale: \nhttps://www.instagram.com/hashup.it/\nhttps://github.com/hashup-it\nhttps://twitter.com/HashUp_it\nhttps://www.facebook.com/groups/197840615394908\n\nKontakt do Szymona i jego teamu: hello@hashup.it\n\n0:00:00 Intro, pierwsza przygoda z krypto\n0:11:00 - Czym jest Hashup?\n0:27:00 - Stos technologiczny\n0:34:00 - Wysokie opłaty za gas\n0:36:00 - Problem każdego marketplace\n0:50:00 - Plany na przyszłości \n0:55:00 - Czy blockchain ma przyszłość?\n\n#podcast #blockchain #hashup\n\nBlog: https://fullstak.pl/\nInstagram: https://instagram.com/fullstak_pl/\nDiscord: https://discord.gg/Ft9nb4C\nTwitter: https://twitter.com/ArtiChmaro 2021-10-06 14:30:10 zdecentralizowany-handel-grami-szymon-jankowski-z-hashup.it ckivz8t54001di3umfv7i4q26 2021-10-06 14:30:27.798 2021-10-06 14:30:27.798 +ckujr87rx00020wl5xxn5mjpp 15 inspiracji stanowisk GAMINGowych https://devpebe.com/2021/10/09/15-inspiracji-stanowisk-gamingowych/ Przyjazne i ergonomiczne stanowisko do pracy jako programista to podstawa. A może to za mało? Jeśli interesują Was gry lub ten styl urządzania stanowisk komputerowych to znajdziecie tutaj kilkanaście inspiracji. Jaki powinien być GAMING ROOM? Wszystko zależy od osobistych preferencji. Najczęstsze motywy pojawiające się podczas urządzania stanowiska GAMINGowego to: taśmy LED oświetlające różne części stanowiska, […] 2021-10-09 11:55:07 15-inspiracji-stanowisk-gamingowych ckiplfn1c001ci3um4nlf8o4x 2021-10-09 12:09:02.301 2021-10-09 12:09:02.301 +ckuhcpp8z00020wl7go2wfe3c TOP 5 wtyczek do Visual Studio Code https://www.youtube.com/watch?v=YRt1U2S6_HY 👉 Zapisz się na newsletter: https://zaczynamyprogramowac.pl 👈\n🎤 Discord: https://discord.gg/q88RUeTHbU 🎤\n🔥 Zapisz się do grupy na FB: https://www.facebook.com/groups/zaczynamy.programowac/ 🔥\n\nOdwiedź nasz fanpage: https://www.facebook.com/jakZaczacProgramowac\nSubskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1\n\n#shorts\n\nVisual Studio Code plugin możecie zainstalować klikająć CTRL+SHIFT+X (CMD+SHIFT+X) w VSC. Dobrej zabawy!\n\n\nFilip Mamcarczyk\nKacper Sokołowski\n\nIkonki autorstwa Freepik pobrane ze strony Flaticon. 2021-10-07 19:43:57 top-5-wtyczek-do-visual-studio-code ckj9sdcq7000051l5pzwpbq9f 2021-10-07 19:47:11.507 2021-10-07 19:47:11.507 +ckuhwoapj00020wmemm0aqfk3 Komunikacja komponentów. @Input() i @Output() https://a-frontman.pl/komunikacja-komponentow-input-i-output/?utm_source=rss&utm_medium=rss&utm_campaign=komunikacja-komponentow-input-i-output

Komunikacji komponentów rodzic-dziecko używamy statystycznie rzecz ujmując CZĘSTO. Jeżeli stosujemy się do dobrych praktyk tworzenia komponentów przez…

\n

Artykuł Komunikacja komponentów. @Input() i @Output() pochodzi z serwisu a - frontman.

2021-10-08 05:02:35 komunikacja-komponentow.-@input()-i-@output() ckio5ucds001qi3um0occaae7 2021-10-08 05:05:58.327 2021-10-08 05:05:58.327 +ckuijoyae00020wl8v8v4wbat Jak podejmować lepsze decyzje? Recenzja książki "Decisive" https://www.youtube.com/watch?v=7F9lO4zyepY Zarówno w życiu prywatnym jak i zawodowym jesteśmy zmuszeni do nieustannego podejmowania decyzji - na jakie stanowisko aplikować, w jakiej technologii pracować, z czego rezygnować żeby mieć więcej czasu, kogo zwolnić, kogo zatrudnić, czy iść na trening, gdzie wyjechać na wakacje, jaki samochód wybrać albo który kurs kupić. Brzmi jak codzienność?\n\nPrezentowana dzisiaj książka "Decisive" to próba zamodelowania tego w jaki sposób postępujemy w takich sytuacjach przy akceptacji wszystkich uprzedzeń i nawyków naszych przodków. Spoiler alert - warto przeczytać, ale dzięki filmowi dowiecie się dodatkowo - dlaczego. Zapraszamy!\n\n✅ Zasubskrybuj nasz kanał - http://bit.ly/przeprogramowani-sub\n\n📷 Przeprogramowany Instagram - https://www.instagram.com/przeprogramowani/\n✍🏻 Marcin na Twitterze - https://twitter.com/mkczarkowski\n✍🏻 Przemek na Twitterze - https://twitter.com/psmyrdek\n\n⚡️Opanuj JavaScript ⚡️\nhttps://przeprogramowani.pl/kurs\n\n🔥Bądź na bieżąco i zapisz się do newslettera 🔥 \nhttps://przeprogramowani.pl/newsletter\n\n⬇️ Więcej materiałów znajdziesz na naszym Facebooku ⬇️\nhttps://www.facebook.com/przeprogramowani \n\nPoznajmy się - https://forms.gle/wSbq3QXq19L3opQx8 2021-10-08 15:22:45 jak-podejmowac-lepsze-decyzje-recenzja-ksiazki-"decisive" ckiyt1v9s001fi3umcgnxbgiu 2021-10-08 15:50:20.054 2021-10-08 15:50:20.054 +ckujiletx00020wl3laysi9pd Software Craftsmanship Weekly vol. 58 – Facebook, Net Neutrality, R2 vs S2 i 🦑 https://vived.io/software-craftsmanship-weekly-vol-58-facebook-net-neutrality-r2-vs-s2-i-squid/

Memy z dzisiejszej edycji są wynikiem współpracy miliardów użytkowników Facebooka, którzy wreszcie mieli czas na coś pożytecznego (więc robili memy). Dlatego są naprawdę dobre, milordzie 🍷. Oprócz tego będzie jednak też na poważnie - alternatywa od Cloudflare dla S3 oraz Net Neutrality

\n

Artykuł Software Craftsmanship Weekly vol. 58 – Facebook, Net Neutrality, R2 vs S2 i 🦑 pochodzi z serwisu Vived.

2021-10-09 07:57:03 software-craftsmanship-weekly-vol.-58---facebook-net-neutrality-r2-vs-s2-i ckmor5k8y000044moj65m13y0 2021-10-09 08:07:21.429 2021-10-09 08:07:21.429 +ckujr87ys00120wl52squx8fw Efekt parallax wykonany w czystym CSS https://robertorlinski.pl/efekt-parallax-w-czystym-css/ Pewnie kojarzysz efekt, w którym konkretna część strony internetowej przesuwa się w innej szybkości niż reszta. Niestety zwykle bazuje on na dodatkowych skryptach JavaScript, które w tym przypadku są zbędne i mogą tylko niepotrzebnie spowalniać naszą stronę. Zbędne, bo właśnie - ten efekt możemy wdrożyć znacznie przyjemniej, tylko stylizując nasz element w CSS. Szczególnie w obecnych […] 2021-10-09 11:46:00 efekt-parallax-wykonany-w-czystym-css ckig8bkw0000zi3umgy3obxsr 2021-10-09 12:09:02.548 2021-10-09 12:09:02.548 +\. + + +-- +-- Data for Name: Member; Type: TABLE DATA; Schema: public; Owner: postgres +-- + +COPY public."Member" (id, role, email) FROM stdin; +4b013034-0ee1-4f45-abf6-39e2297fc576 ADMIN michal@miszczyszyn.com +\. + + +-- +-- Data for Name: _prisma_migrations; Type: TABLE DATA; Schema: public; Owner: postgres +-- + +COPY public._prisma_migrations (id, checksum, finished_at, migration_name, logs, rolled_back_at, started_at, applied_steps_count) FROM stdin; +a7a54267-9944-4a4d-babb-5247ae23234f f9d70a1c017e09a2461e3a6288bf9d09ac60089f21ba2b762b89c0311a293d44 2021-10-05 09:34:21.968953+00 20201211172208_initial \N \N 2021-10-05 09:34:21.675109+00 1 +a323bcef-194c-4a62-8e7a-b1efeaae9a5b fab2a15e4fa3ae3e9869a7d3641cda3bde7307bef5d56f061504271ebeabb9f0 2021-10-05 09:34:22.223923+00 20201223211356_develop \N \N 2021-10-05 09:34:22.048207+00 1 +a3a38bbc-8abf-43da-a623-4233f3411169 21ee01cde777bc1489728f0d03af7b386d6392081064686cc0afb62a6944d63c 2021-10-05 09:34:22.475881+00 20201226213902_migration \N \N 2021-10-05 09:34:22.303205+00 1 +e5da80ae-b576-4852-b314-8d19dcf89b3c ef12c05ccefa638056d8091c39d6b66faff213a2d5374c5a7095c83652ef3015 2021-10-05 09:34:22.729002+00 20201230152803_add_last_article_published_at \N \N 2021-10-05 09:34:22.546718+00 1 +e5a9f59c-1a84-4001-a45e-10eb5c64a9f7 ceec57aae3b6501d3fc08f2379cd0546b0e4cbc0775125f6d8f1ab8b63281b22 2021-10-05 09:34:23.022723+00 20201230195946_auth \N \N 2021-10-05 09:34:22.80176+00 1 +690b02c5-3e10-455f-9313-34fe010ba182 e5ba83edf59fdb6e0c46538f86fe98766ed1e2416f8752f7cafd8385005a39fb 2021-10-05 09:34:23.28086+00 20210103110839_add_notify \N \N 2021-10-05 09:34:23.097477+00 1 +aa434d5c-5c0e-4bda-9319-fb0704ab97ea e545e623dacb8816e1e705f370d6435f7e280301f490097e78cb33e885b9c421 2021-10-05 09:34:23.584063+00 20210705155436_remove_auth \N \N 2021-10-05 09:34:23.355576+00 1 +faed984f-8022-49f5-afdc-0e4be8964da8 136bfef8ddf75a0c033107a381907751a9e3f8148526f932b6dcdd04ffa4d3b8 2021-10-05 09:34:23.843908+00 20210705155617_remove_news \N \N 2021-10-05 09:34:23.65885+00 1 +2ceab038-f069-470f-853e-a67ad2d86c86 3280067a12779b9a2e03accd4ce779ba35cbee07afbc181f6b45444bc4311549 2021-10-05 09:34:24.102314+00 20210707153644_members \N \N 2021-10-05 09:34:23.920511+00 1 +408b3011-7fca-4279-a5c0-1623369872d2 3c2e7d779d2f597eef9fa516f8358bb204670029c87c48d25bf5049497bc015c 2021-10-05 09:34:24.361797+00 20210707154050_add_email_and_trigger \N \N 2021-10-05 09:34:24.180996+00 1 +5605cce8-9a1e-47d9-ba8f-10d6d482bbd1 122d743a0403e77ad7e0ed9447f5b8826f2fbdbc55612d936eff004dd13c2eec 2021-10-05 09:34:24.623516+00 20210708153008_a \N \N 2021-10-05 09:34:24.440196+00 1 +61001c38-de3b-4fb1-9dc5-4b6fb7a2a7d3 dff52b1b0c7fab49956e8d4efc0813f25ac2fc54d8986de92d5b421659faf8fd 2021-10-05 09:34:24.896367+00 20210708154300_replace_triggers \N \N 2021-10-05 09:34:24.698814+00 1 +d6fc7008-fc95-4703-a8ad-4ff92ed6dc26 ce7a635d9ac7eace14247a54746c18ccff40d85ac034fd9f691bd714d307c176 2021-10-05 09:34:25.153859+00 20211004205041_remove_triggers \N \N 2021-10-05 09:34:24.970152+00 1 \. diff --git a/api-helpers/api-hofs.ts b/api-helpers/api-hofs.ts index 67fc5e82..1299d3c1 100644 --- a/api-helpers/api-hofs.ts +++ b/api-helpers/api-hofs.ts @@ -102,7 +102,7 @@ export const withAsync = ( Object.entries(err.output.headers).forEach(([key, val]) => val && res.setHeader(key, val)); return res.status(err.output.statusCode).json(err.output.payload); } else { - logger.error(err); + logger.error(err instanceof Error ? err : { err }); Sentry.captureException(err); return res.status(500).json(err); } @@ -155,11 +155,9 @@ export function withAuth(role?: UserRole) { }); } -export function withMethods( - methods: { - readonly [key in HTTPMethod]?: (req: R, res: NextApiResponse) => unknown; - }, -) { +export function withMethods(methods: { + readonly [key in HTTPMethod]?: (req: R, res: NextApiResponse) => unknown; +}) { return (req: R, res: NextApiResponse) => { const reqMethod = req.method as HTTPMethod; const handler = methods[reqMethod];