{"id":10183,"date":"2021-02-11T09:05:23","date_gmt":"2021-02-11T08:05:23","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-24\/"},"modified":"2022-09-19T13:16:46","modified_gmt":"2022-09-19T11:16:46","slug":"frontend-thursday-vol-24","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/","title":{"rendered":"Frontend Thursday vol. 24"},"content":{"rendered":"<p>Hej <br \/>W tym tygodniu zima znowu zaatakowa\u0142a \u2744\ufe0f, ale nie zaskoczy\u0142a tw\u00f3rc\u00f3w weekly i mamy dla Was przegl\u0105d frontendowych news\u00f3w, gotowy do porannej kawy \u2615\ufe0f. \u00a0Mamy nadziej\u0119, \u017ce trzymacie si\u0119 cieplutko na home office  \u00a0i zapraszamy do lektury .<\/p>\n<h2 id=\"1-remotion-create-videos-programmatically-in-react\" data-num=1>1. Remotion &#8211; Create videos programmatically in React <\/h2>\n<p>Ten tydzie\u0144 zaczynamy od biblioteki, kt\u00f3ra rozprzestrzeni\u0142a si\u0119 w mediach spo\u0142eczno\u015bciowych w wirusowym tempie (a pomy\u015ble\u0107, \u017ce jeszcze rok temu to por\u00f3wnanie mia\u0142oby du\u017co mniejsz\u0105 wag\u0119 emocjonaln\u0105\u2026 ). Mowa o Remotion, kt\u00f3re pozwala na tworzenie wideo przy u\u017cyciu Reacta. Je\u015bli jeszcze nie dotar\u0142y do Was \u017cadne dzie\u0142a pochodz\u0105ce z tej biblioteki, to koniecznie sprawd\u017acie te udost\u0119pnione przez autora <a href=\"https:\/\/www.youtube.com\/watch?v=gwlDorikqgY\">tu<\/a> i <a href=\"https:\/\/www.youtube.com\/watch?v=Y0SNPeTz09w\">tu<\/a>. Trzeba przyzna\u0107, \u017ce wygl\u0105da to profesjonalnie i nie odbiega od rynkowego standardu.<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Spo\u0142eczno\u015b\u0107 Reacta po opublikowaniu Remotion<\/figcaption><\/figure>\n<p>Jak dzia\u0142a biblioteka? Najpierw tworzymy komponent `Composition`, do kt\u00f3rego przekazujemy podstawowe dane, takie jak wysoko\u015b\u0107 i szeroko\u015b\u0107 w pikselach, czy po\u017c\u0105dane FPS-y. Nast\u0119pnie do `Composition` przekazujemy nasz w\u0142asny komponent odpowiedzialny za wyrenderowanie filmu i tutaj dzieje si\u0119 wi\u0119kszo\u015b\u0107 magii. Wewn\u0105trz stworzonego wcze\u015bniej kontekstu dost\u0119pny jest hook `useCurrentFrame()`, kt\u00f3ry zwraca aktualn\u0105 klatk\u0119 animacji i na podstawie tej informacji renderujemy odpowiedni kontent. Na tym poziomie mo\u017cecie korzysta\u0107 w\u0142a\u015bciwie ze wszystkich bibliotek, jakie sobie wymarzycie (szczeg\u00f3lnie ciekawi mnie, co uda si\u0119 wymy\u015bli\u0107 wszystkim maniakom three.js ). Co wa\u017cne, wydajno\u015b\u0107 nie jest tu szczeg\u00f3lnie istotna, bo nie jest to kod, kt\u00f3ry trafia do klienta.<\/p>\n<p><!--kg-card-begin: markdown--><\/p>\n<pre><code class=\"language-js\">const MyVideo = () =&gt; {\n  const frame = useCurrentFrame();\n  const opacity = frame &gt;= 20 ? 1 : (frame \/ 20);\n  return (\n    &lt;div style={{\n      flex: 1,\n      justifyContent: &#039;center&#039;,\n      alignItems: &#039;center&#039;,\n      opacity: opacity\n    }}&gt;\n      Hello World!\n    &lt;\/div&gt;\n  )\n}\nexport const RemotionVideo: React.FC = () =&gt; {\n  return (\n    &lt;&gt;\n      &lt;Composition\n        id=&quot;MyVideo&quot;\n        component={MyVideo}\n        durationInFrames={150}\n        fps={30}\n        width={1920}\n        height={1080}\n      \/&gt;\n    &lt;\/&gt;\n  );\n};\n<\/code><\/pre>\n<blockquote>\n<p>Prosty przyk\u0142ad wideo jakie mo\u017cna stworzy\u0107 przy u\u017cyciu Remotion<\/p>\n<\/blockquote>\n<p><!--kg-card-end: markdown--><\/p>\n<p>W trakcie developmentu (a mo\u017ce nale\u017ca\u0142oby powiedzie\u0107 monta\u017cu? ) mamy dost\u0119pne preview z timelinem z prawdziwego zdarzenia. Kiedy dzie\u0142o jest ju\u017c gotowe, odpalamy build, podajemy \u015bcie\u017ck\u0119 do pliku docelowego i `ffmpg` uruchamia magi\u0119, dzi\u0119ki kt\u00f3rej otrzymujemy plik mp4.<\/p>\n<p>Remotion opr\u00f3cz licencji Open Source i by\u0107 mo\u017ce bycia bardziej przyjaznym dla deweloper\u00f3w ni\u017c egzotyczne narz\u0119dzia jak `After Effects`, ma jeszcze jednego asa w r\u0119kawie : mo\u017cna go uruchomi\u0107 w aplikacji serwerowej i w dokerze. Opcja jest o tyle ciekawa, \u017ce daje ca\u0142\u0105 mas\u0119 mo\u017cliwo\u015bci i chodzi tu nie tylko o generowanie filmik\u00f3w powitalnych z imieniem u\u017cytkownika.<\/p>\n<p>Jakie jest moje zdanie na temat tego narz\u0119dzia? To fajna ciekawostka, ale nie do ko\u0144ca rozumiem, sk\u0105d tyle zamieszania. Dla os\u00f3b zawodowo zajmuj\u0105cych si\u0119 wideo takie narz\u0119dzie nie jest nawet opcj\u0105 do rozwa\u017cenia. Dla programist\u00f3w jest to ciekawa alternatywa, ale na d\u0142u\u017csz\u0105 met\u0119 skorzystanie z bran\u017cowych standard\u00f3w powinno by\u0107 lepsz\u0105 opcj\u0105. Jedynym \u015bwiate\u0142kiem nadziei jest wi\u0119c zastosowanie serwerowe i tutaj czekam, co poka\u017ce pr\u0119\u017cna spo\u0142eczno\u015b\u0107 Reacta.<\/p>\n<h3 id=\"-r-d-a-\">\u0179r\u00f3d\u0142a:<\/h3>\n<p><a href=\"https:\/\/github.com\/JonnyBurger\/remotion\">https:\/\/github.com\/JonnyBurger\/remotion<\/a><\/p>\n<p>https:\/\/www.remotion.dev\/<\/p>\n<h2 id=\"2-npm-7-is-now-generally-available\" data-num=2>2. npm 7 is now generally available! \u2764\ufe0f<\/h2>\n<p>Po prawie trzech latach od premiery wersji 6, wreszcie si\u0119 doczekali\u015bmy! npm 7 sta\u0142 si\u0119 og\u00f3lnie dost\u0119pny, czyli zosta\u0142 oznaczony jako `latest` i od tego tygodnia domy\u015blnie b\u0119dzie instalowa\u0142 si\u0119 przy odpaleniu `npm install &#8211;global npm`. Po trzech latach pracy deweloperzy chwal\u0105 si\u0119, \u017ce uda\u0142o im si\u0119 znacz\u0105co usprawni\u0107 proces releas\u00f3w (oko\u0142o 2 tygodniowo), zwi\u0119kszy\u0107 pokrycie testami (z 77% na 97%) , zmniejszy\u0107 liczb\u0119 dependencji (z 123 na 67) i generalnie poprawi\u0107 wydajno\u015b\u0107.<\/p>\n<p>Opr\u00f3cz uj\u0119tych powy\u017cej generalnych usprawnie\u0144 w nowej wersji mamy 2 usprawnienia. Zmianie uleg\u0142 lockfile i teraz ma umo\u017cliwia\u0107 on reprodukowalne buildy i b\u0119dzie kompatybilny z yarn.lock. Jak dla mnie w tym momencie jedna z wi\u0119kszych zalet yarna zosta\u0142a wyeliminowana i powoli traci on swoje argumenty.<\/p>\n<p>O ile pierwsza zmiana raczej nie sprawia problem\u00f3w przy aktualizacji, to druga mo\u017ce by\u0107 ju\u017c bardziej problematyczna. Od npm w wersji 4 w przypadku wyst\u0105pienia konflikt\u00f3w w peer dependencies generowane by\u0142o ostrze\u017cenie. W nowym wydaniu ostrze\u017cenie zosta\u0142o zamienione na b\u0142\u0105d (warto zaznaczy\u0107 jednak, \u017ce b\u0119dzie on zwracany tylko, je\u015bli jego naprawa jest w naszym zasi\u0119gu &#8211; konflikty g\u0142\u0119boko w naszym drzewie zale\u017cno\u015bci pozostan\u0105 warningami).<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e23e8366.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Terminal wi\u0119kszo\u015bci deweloper\u00f3w po aktualizacji do npm7<\/figcaption><\/figure>\n<h3 id=\"-r-d-a--1\">\u0179r\u00f3d\u0142a:<\/h3>\n<blockquote class=\"wp-embedded-content\" data-secret=\"n89w019sDv\"><p><a href=\"https:\/\/github.blog\/2021-02-02-npm-7-is-now-generally-available\/\">npm 7 is now generally available!<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;npm 7 is now generally available!&#8221; &#8212; The GitHub Blog\" src=\"https:\/\/github.blog\/2021-02-02-npm-7-is-now-generally-available\/embed\/#?secret=qA75X9KE7x#?secret=n89w019sDv\" data-secret=\"n89w019sDv\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<h2 id=\"3-vuex-4-released\" data-num=3>3. Vuex 4 released <\/h2>\n<p>Na samym pocz\u0105tku musz\u0119 si\u0119 Wam do czego\u015b przyzna\u0107: nauka Vue ju\u017c od dawna le\u017cy na mojej kupce wstydu. Zawodowo mia\u0142em styczno\u015b\u0107 zar\u00f3wno z Reactem, jak i Angularem, ale pr\u0105dy mojej kariery nigdy nie \u015bci\u0105gne\u0142y mnie do frameworku tak wychwalanego przez deweloper\u00f3w. Mo\u017ce powiedziawszy to publicznie znajd\u0119 w sobie wystarczaj\u0105co motywacji, \u017ceby dokopa\u0107 si\u0119 do tego zadania\u2026 Z t\u0105 wiedz\u0105 przejd\u017amy jednak do newsa, kt\u00f3rym chce si\u0119 z Wami podzieli\u0107.<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e249b1b3.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Autor Frontendowego Czwartku widz\u0105c kolejnego newsa z \u015brodowiska Vue<\/figcaption><\/figure>\n<p>Od wydania Vue 3.0 min\u0119\u0142o ju\u017c pi\u0119\u0107 miesi\u0119cy, ale dopiero teraz doczekali\u015bmy si\u0119 migracji najpopularniejszej biblioteki do zarz\u0105dzania stanem aplikacji, czyli Vuex. Lead time jest co najmniej niepokoj\u0105cy i ciekaw jestem, czy proces migracji b\u0119dzie r\u00f3wnie czasoch\u0142onny dla standardowych aplikacji, czy te\u017c jest to przypadek szczeg\u00f3lny zwi\u0105zany z niskopoziomowo\u015bci\u0105 biblioteki.<\/p>\n<p>Sko\u0144czmy jednak ponure rozwa\u017cania i zobaczmy, co si\u0119 zmieni\u0142o. Dwie najwi\u0119ksze nowo\u015bci to wsparcie dla TypeScriptu i nowego api do kompozycji. Pobie\u017cnie przegl\u0105daj\u0105c breaking changes, wydaje si\u0119, \u017ce proces migracji nie powinien by\u0107 ekstremalnie trudny w por\u00f3wnaniu z samym procesem migracji z Vue 2 do Vue 3.<\/p>\n<p><!--kg-card-begin: markdown--><\/p>\n<pre><code class=\"language-js\">import { computed } from &#039;vue&#039;\nimport { useStore } from &#039;vuex&#039;\nexport default {\n  setup () {\n    const store = useStore()\n    return {\n      \/\/ access a state in computed function\n      count: computed(() =&gt; store.state.count),\n      \/\/ access a getter in computed function\n      double: computed(() =&gt; store.getters.double)\n    }\n  }\n}\n<\/code><\/pre>\n<blockquote>\n<p>Composition API wykorzystane w Vuex<\/p>\n<\/blockquote>\n<p><!--kg-card-end: markdown--><\/p>\n<h3 id=\"-r-d-a--2\">\u0179r\u00f3d\u0142a:<\/h3>\n<p><a href=\"https:\/\/next.vuex.vuejs.org\/guide\/composition-api.html\">https:\/\/next.vuex.vuejs.org\/guide\/composition-api.html<\/a><\/p>\n<p><a href=\"https:\/\/next.vuex.vuejs.org\/guide\/migrating-to-4-0-from-3-x.html\">https:\/\/next.vuex.vuejs.org\/guide\/migrating-to-4-0-from-3-x.html<\/a><\/p>\n<h2 id=\"4-10-bad-typescript-habits-to-break-this-year\" data-num=4>4. 10 bad TypeScript habits to break this year \t<\/h2>\n<p>Na koniec mam dla Was <a href=\"https:\/\/startup-cto.net\/10-bad-typescript-habits-to-break-this-year\/\">kawa\u0142ek dobrej TypeScriptowej ewangelizacji<\/a>, kt\u00f3rej nigdy za wiele. Artyku\u0142 jest o tyle ciekawy, \u017ce nie oferuje suchej listy zasad, ale dla ka\u017cdego przypadku pochyla si\u0119 nad alternatywami i porusza ich wady wzgl\u0119dem sugerowanej wersji. Je\u015bli tylko b\u0119dziecie mie\u0107 chwil\u0119, to koniecznie zerknijcie.<\/p>\n<hr \/>\n<p>Je\u015bli chcesz otrzymywa\u0107 tego typu tre\u015bci spersonalizowane pod Ciebie, pobierz Vived!<\/p>\n<ul>\n<li><a href=\"https:\/\/apple.co\/3fB8Kcf\">App Store<\/a> <\/li>\n<li><a href=\"https:\/\/bit.ly\/3m421dx\">Play Store<\/a> <\/li>\n<li><a href=\"https:\/\/bit.ly\/3m9Bewn\">Wersja PWA<\/a> <\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Hej W tym tygodniu zima znowu zaatakowa\u0142a \u2744\ufe0f, ale nie zaskoczy\u0142a tw\u00f3rc\u00f3w weekly i mamy dla Was przegl\u0105d frontendowych news\u00f3w, gotowy do porannej kawy \u2615\ufe0f. \u00a0Mamy nadziej\u0119, \u017ce trzymacie si\u0119 cieplutko na home office \u00a0i zapraszamy do lektury . 1. Remotion &#8211; Create videos programmatically in React Ten tydzie\u0144 zaczynamy od biblioteki, kt\u00f3ra rozprzestrzeni\u0142a si\u0119 [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10183","post","type-post","status-publish","format-standard","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"5"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Frontend Thursday vol. 24 - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 24 - Vived\" \/>\n<meta property=\"og:description\" content=\"Hej W tym tygodniu zima znowu zaatakowa\u0142a \u2744\ufe0f, ale nie zaskoczy\u0142a tw\u00f3rc\u00f3w weekly i mamy dla Was przegl\u0105d frontendowych news\u00f3w, gotowy do porannej kawy \u2615\ufe0f. \u00a0Mamy nadziej\u0119, \u017ce trzymacie si\u0119 cieplutko na home office \u00a0i zapraszamy do lektury . 1. Remotion &#8211; Create videos programmatically in React Ten tydzie\u0144 zaczynamy od biblioteki, kt\u00f3ra rozprzestrzeni\u0142a si\u0119 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-11T08:05:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 24\",\"datePublished\":\"2021-02-11T08:05:23+00:00\",\"dateModified\":\"2022-09-19T11:16:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/\"},\"wordCount\":1028,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/\",\"name\":\"Frontend Thursday vol. 24 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif\",\"datePublished\":\"2021-02-11T08:05:23+00:00\",\"dateModified\":\"2022-09-19T11:16:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 24\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Thursday vol. 24 - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 24 - Vived","og_description":"Hej W tym tygodniu zima znowu zaatakowa\u0142a \u2744\ufe0f, ale nie zaskoczy\u0142a tw\u00f3rc\u00f3w weekly i mamy dla Was przegl\u0105d frontendowych news\u00f3w, gotowy do porannej kawy \u2615\ufe0f. \u00a0Mamy nadziej\u0119, \u017ce trzymacie si\u0119 cieplutko na home office \u00a0i zapraszamy do lektury . 1. Remotion &#8211; Create videos programmatically in React Ten tydzie\u0144 zaczynamy od biblioteki, kt\u00f3ra rozprzestrzeni\u0142a si\u0119 [&hellip;]","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/","og_site_name":"Vived","article_published_time":"2021-02-11T08:05:23+00:00","article_modified_time":"2022-09-19T11:16:46+00:00","og_image":[{"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif","type":"","width":"","height":""}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 24","datePublished":"2021-02-11T08:05:23+00:00","dateModified":"2022-09-19T11:16:46+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/"},"wordCount":1028,"commentCount":0,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif","articleSection":["Frontend"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/","name":"Frontend Thursday vol. 24 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif","datePublished":"2021-02-11T08:05:23+00:00","dateModified":"2022-09-19T11:16:46+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-24\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 24"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"<p>Hej <br \/>W tym tygodniu zima znowu zaatakowa\u0142a \u2744\ufe0f, ale nie zaskoczy\u0142a tw\u00f3rc\u00f3w weekly i mamy dla Was przegl\u0105d frontendowych news\u00f3w, gotowy do porannej kawy \u2615\ufe0f. \u00a0Mamy nadziej\u0119, \u017ce trzymacie si\u0119 cieplutko na home office  \u00a0i zapraszamy do lektury .<\/p><h2 id=\"1-remotion-create-videos-programmatically-in-react-\">1. Remotion - Create videos programmatically in React <\/h2><p>Ten tydzie\u0144 zaczynamy od biblioteki, kt\u00f3ra rozprzestrzeni\u0142a si\u0119 w mediach spo\u0142eczno\u015bciowych w wirusowym tempie (a pomy\u015ble\u0107, \u017ce jeszcze rok temu to por\u00f3wnanie mia\u0142oby du\u017co mniejsz\u0105 wag\u0119 emocjonaln\u0105\u2026 ). Mowa o Remotion, kt\u00f3re pozwala na tworzenie wideo przy u\u017cyciu Reacta. Je\u015bli jeszcze nie dotar\u0142y do Was \u017cadne dzie\u0142a pochodz\u0105ce z tej biblioteki, to koniecznie sprawd\u017acie te udost\u0119pnione przez autora <a href=\"https:\/\/www.youtube.com\/watch?v=gwlDorikqgY\">tu<\/a> i <a href=\"https:\/\/www.youtube.com\/watch?v=Y0SNPeTz09w\">tu<\/a>. Trzeba przyzna\u0107, \u017ce wygl\u0105da to profesjonalnie i nie odbiega od rynkowego standardu.<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Spo\u0142eczno\u015b\u0107 Reacta po opublikowaniu Remotion<\/figcaption><\/figure><p>Jak dzia\u0142a biblioteka? Najpierw tworzymy komponent `Composition`, do kt\u00f3rego przekazujemy podstawowe dane, takie jak wysoko\u015b\u0107 i szeroko\u015b\u0107 w pikselach, czy po\u017c\u0105dane FPS-y. Nast\u0119pnie do `Composition` przekazujemy nasz w\u0142asny komponent odpowiedzialny za wyrenderowanie filmu i tutaj dzieje si\u0119 wi\u0119kszo\u015b\u0107 magii. Wewn\u0105trz stworzonego wcze\u015bniej kontekstu dost\u0119pny jest hook `useCurrentFrame()`, kt\u00f3ry zwraca aktualn\u0105 klatk\u0119 animacji i na podstawie tej informacji renderujemy odpowiedni kontent. Na tym poziomie mo\u017cecie korzysta\u0107 w\u0142a\u015bciwie ze wszystkich bibliotek, jakie sobie wymarzycie (szczeg\u00f3lnie ciekawi mnie, co uda si\u0119 wymy\u015bli\u0107 wszystkim maniakom three.js ). Co wa\u017cne, wydajno\u015b\u0107 nie jest tu szczeg\u00f3lnie istotna, bo nie jest to kod, kt\u00f3ry trafia do klienta.<\/p><!--kg-card-begin: markdown--><pre><code class=\"language-js\">const MyVideo = () =&gt; {\n  const frame = useCurrentFrame();\n  const opacity = frame &gt;= 20 ? 1 : (frame \/ 20);\n  return (\n    &lt;div style={{\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n      opacity: opacity\n    }}&gt;\n      Hello World!\n    &lt;\/div&gt;\n  )\n}\nexport const RemotionVideo: React.FC = () =&gt; {\n  return (\n    &lt;&gt;\n      &lt;Composition\n        id=&quot;MyVideo&quot;\n        component={MyVideo}\n        durationInFrames={150}\n        fps={30}\n        width={1920}\n        height={1080}\n      \/&gt;\n    &lt;\/&gt;\n  );\n};\n<\/code><\/pre>\n<blockquote>\n<p>Prosty przyk\u0142ad wideo jakie mo\u017cna stworzy\u0107 przy u\u017cyciu Remotion<\/p>\n<\/blockquote>\n<!--kg-card-end: markdown--><p>W trakcie developmentu (a mo\u017ce nale\u017ca\u0142oby powiedzie\u0107 monta\u017cu? ) mamy dost\u0119pne preview z timelinem z prawdziwego zdarzenia. Kiedy dzie\u0142o jest ju\u017c gotowe, odpalamy build, podajemy \u015bcie\u017ck\u0119 do pliku docelowego i `ffmpg` uruchamia magi\u0119, dzi\u0119ki kt\u00f3rej otrzymujemy plik mp4.<\/p><p>Remotion opr\u00f3cz licencji Open Source i by\u0107 mo\u017ce bycia bardziej przyjaznym dla deweloper\u00f3w ni\u017c egzotyczne narz\u0119dzia jak `After Effects`, ma jeszcze jednego asa w r\u0119kawie : mo\u017cna go uruchomi\u0107 w aplikacji serwerowej i w dokerze. Opcja jest o tyle ciekawa, \u017ce daje ca\u0142\u0105 mas\u0119 mo\u017cliwo\u015bci i chodzi tu nie tylko o generowanie filmik\u00f3w powitalnych z imieniem u\u017cytkownika.<\/p><p>Jakie jest moje zdanie na temat tego narz\u0119dzia? To fajna ciekawostka, ale nie do ko\u0144ca rozumiem, sk\u0105d tyle zamieszania. Dla os\u00f3b zawodowo zajmuj\u0105cych si\u0119 wideo takie narz\u0119dzie nie jest nawet opcj\u0105 do rozwa\u017cenia. Dla programist\u00f3w jest to ciekawa alternatywa, ale na d\u0142u\u017csz\u0105 met\u0119 skorzystanie z bran\u017cowych standard\u00f3w powinno by\u0107 lepsz\u0105 opcj\u0105. Jedynym \u015bwiate\u0142kiem nadziei jest wi\u0119c zastosowanie serwerowe i tutaj czekam, co poka\u017ce pr\u0119\u017cna spo\u0142eczno\u015b\u0107 Reacta.<\/p><h3 id=\"-r-d-a-\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/github.com\/JonnyBurger\/remotion\">https:\/\/github.com\/JonnyBurger\/remotion<\/a><\/p><p>https:\/\/www.remotion.dev\/<\/p><h2 id=\"2-npm-7-is-now-generally-available-\">2. npm 7 is now generally available! \u2764\ufe0f<\/h2><p>Po prawie trzech latach od premiery wersji 6, wreszcie si\u0119 doczekali\u015bmy! npm 7 sta\u0142 si\u0119 og\u00f3lnie dost\u0119pny, czyli zosta\u0142 oznaczony jako `latest` i od tego tygodnia domy\u015blnie b\u0119dzie instalowa\u0142 si\u0119 przy odpaleniu `npm install --global npm`. Po trzech latach pracy deweloperzy chwal\u0105 si\u0119, \u017ce uda\u0142o im si\u0119 znacz\u0105co usprawni\u0107 proces releas\u00f3w (oko\u0142o 2 tygodniowo), zwi\u0119kszy\u0107 pokrycie testami (z 77% na 97%) , zmniejszy\u0107 liczb\u0119 dependencji (z 123 na 67) i generalnie poprawi\u0107 wydajno\u015b\u0107.<\/p><p>Opr\u00f3cz uj\u0119tych powy\u017cej generalnych usprawnie\u0144 w nowej wersji mamy 2 usprawnienia. Zmianie uleg\u0142 lockfile i teraz ma umo\u017cliwia\u0107 on reprodukowalne buildy i b\u0119dzie kompatybilny z yarn.lock. Jak dla mnie w tym momencie jedna z wi\u0119kszych zalet yarna zosta\u0142a wyeliminowana i powoli traci on swoje argumenty.<\/p><p>O ile pierwsza zmiana raczej nie sprawia problem\u00f3w przy aktualizacji, to druga mo\u017ce by\u0107 ju\u017c bardziej problematyczna. Od npm w wersji 4 w przypadku wyst\u0105pienia konflikt\u00f3w w peer dependencies generowane by\u0142o ostrze\u017cenie. W nowym wydaniu ostrze\u017cenie zosta\u0142o zamienione na b\u0142\u0105d (warto zaznaczy\u0107 jednak, \u017ce b\u0119dzie on zwracany tylko, je\u015bli jego naprawa jest w naszym zasi\u0119gu - konflikty g\u0142\u0119boko w naszym drzewie zale\u017cno\u015bci pozostan\u0105 warningami).<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e23e8366.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Terminal wi\u0119kszo\u015bci deweloper\u00f3w po aktualizacji do npm7<\/figcaption><\/figure><h3 id=\"-r-d-a--1\">\u0179r\u00f3d\u0142a:<\/h3><p>https:\/\/github.blog\/2021-02-02-npm-7-is-now-generally-available\/<\/p><h2 id=\"3-vuex-4-released-\">3. Vuex 4 released <\/h2><p>Na samym pocz\u0105tku musz\u0119 si\u0119 Wam do czego\u015b przyzna\u0107: nauka Vue ju\u017c od dawna le\u017cy na mojej kupce wstydu. Zawodowo mia\u0142em styczno\u015b\u0107 zar\u00f3wno z Reactem, jak i Angularem, ale pr\u0105dy mojej kariery nigdy nie \u015bci\u0105gne\u0142y mnie do frameworku tak wychwalanego przez deweloper\u00f3w. Mo\u017ce powiedziawszy to publicznie znajd\u0119 w sobie wystarczaj\u0105co motywacji, \u017ceby dokopa\u0107 si\u0119 do tego zadania\u2026 Z t\u0105 wiedz\u0105 przejd\u017amy jednak do newsa, kt\u00f3rym chce si\u0119 z Wami podzieli\u0107.<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e249b1b3.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Autor Frontendowego Czwartku widz\u0105c kolejnego newsa z \u015brodowiska Vue<\/figcaption><\/figure><p>Od wydania Vue 3.0 min\u0119\u0142o ju\u017c pi\u0119\u0107 miesi\u0119cy, ale dopiero teraz doczekali\u015bmy si\u0119 migracji najpopularniejszej biblioteki do zarz\u0105dzania stanem aplikacji, czyli Vuex. Lead time jest co najmniej niepokoj\u0105cy i ciekaw jestem, czy proces migracji b\u0119dzie r\u00f3wnie czasoch\u0142onny dla standardowych aplikacji, czy te\u017c jest to przypadek szczeg\u00f3lny zwi\u0105zany z niskopoziomowo\u015bci\u0105 biblioteki.<\/p><p>Sko\u0144czmy jednak ponure rozwa\u017cania i zobaczmy, co si\u0119 zmieni\u0142o. Dwie najwi\u0119ksze nowo\u015bci to wsparcie dla TypeScriptu i nowego api do kompozycji. Pobie\u017cnie przegl\u0105daj\u0105c breaking changes, wydaje si\u0119, \u017ce proces migracji nie powinien by\u0107 ekstremalnie trudny w por\u00f3wnaniu z samym procesem migracji z Vue 2 do Vue 3.<\/p><!--kg-card-begin: markdown--><pre><code class=\"language-js\">import { computed } from 'vue'\nimport { useStore } from 'vuex'\nexport default {\n  setup () {\n    const store = useStore()\n    return {\n      \/\/ access a state in computed function\n      count: computed(() =&gt; store.state.count),\n      \/\/ access a getter in computed function\n      double: computed(() =&gt; store.getters.double)\n    }\n  }\n}\n<\/code><\/pre>\n<blockquote>\n<p>Composition API wykorzystane w Vuex<\/p>\n<\/blockquote>\n<!--kg-card-end: markdown--><h3 id=\"-r-d-a--2\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/next.vuex.vuejs.org\/guide\/composition-api.html\">https:\/\/next.vuex.vuejs.org\/guide\/composition-api.html<\/a><\/p><p><a href=\"https:\/\/next.vuex.vuejs.org\/guide\/migrating-to-4-0-from-3-x.html\">https:\/\/next.vuex.vuejs.org\/guide\/migrating-to-4-0-from-3-x.html<\/a><\/p><h2 id=\"4-10-bad-typescript-habits-to-break-this-year-\">4. 10 bad TypeScript habits to break this year \t<\/h2><p>Na koniec mam dla Was <a href=\"https:\/\/startup-cto.net\/10-bad-typescript-habits-to-break-this-year\/\">kawa\u0142ek dobrej TypeScriptowej ewangelizacji<\/a>, kt\u00f3rej nigdy za wiele. Artyku\u0142 jest o tyle ciekawy, \u017ce nie oferuje suchej listy zasad, ale dla ka\u017cdego przypadku pochyla si\u0119 nad alternatywami i porusza ich wady wzgl\u0119dem sugerowanej wersji. Je\u015bli tylko b\u0119dziecie mie\u0107 chwil\u0119, to koniecznie zerknijcie.<\/p><hr \/><p>Je\u015bli chcesz otrzymywa\u0107 tego typu tre\u015bci spersonalizowane pod Ciebie, pobierz Vived!<\/p><ul><li><a href=\"https:\/\/apple.co\/3fB8Kcf\">App Store<\/a> <\/li><li><a href=\"https:\/\/bit.ly\/3m421dx\">Play Store<\/a> <\/li><li><a href=\"https:\/\/bit.ly\/3m9Bewn\">Wersja PWA<\/a> <\/li><\/ul><p><\/p>","innerContent":["<p>Hej <br \/>W tym tygodniu zima znowu zaatakowa\u0142a \u2744\ufe0f, ale nie zaskoczy\u0142a tw\u00f3rc\u00f3w weekly i mamy dla Was przegl\u0105d frontendowych news\u00f3w, gotowy do porannej kawy \u2615\ufe0f. \u00a0Mamy nadziej\u0119, \u017ce trzymacie si\u0119 cieplutko na home office  \u00a0i zapraszamy do lektury .<\/p><h2 id=\"1-remotion-create-videos-programmatically-in-react-\">1. Remotion - Create videos programmatically in React <\/h2><p>Ten tydzie\u0144 zaczynamy od biblioteki, kt\u00f3ra rozprzestrzeni\u0142a si\u0119 w mediach spo\u0142eczno\u015bciowych w wirusowym tempie (a pomy\u015ble\u0107, \u017ce jeszcze rok temu to por\u00f3wnanie mia\u0142oby du\u017co mniejsz\u0105 wag\u0119 emocjonaln\u0105\u2026 ). Mowa o Remotion, kt\u00f3re pozwala na tworzenie wideo przy u\u017cyciu Reacta. Je\u015bli jeszcze nie dotar\u0142y do Was \u017cadne dzie\u0142a pochodz\u0105ce z tej biblioteki, to koniecznie sprawd\u017acie te udost\u0119pnione przez autora <a href=\"https:\/\/www.youtube.com\/watch?v=gwlDorikqgY\">tu<\/a> i <a href=\"https:\/\/www.youtube.com\/watch?v=Y0SNPeTz09w\">tu<\/a>. Trzeba przyzna\u0107, \u017ce wygl\u0105da to profesjonalnie i nie odbiega od rynkowego standardu.<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e21e4c2a.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Spo\u0142eczno\u015b\u0107 Reacta po opublikowaniu Remotion<\/figcaption><\/figure><p>Jak dzia\u0142a biblioteka? Najpierw tworzymy komponent `Composition`, do kt\u00f3rego przekazujemy podstawowe dane, takie jak wysoko\u015b\u0107 i szeroko\u015b\u0107 w pikselach, czy po\u017c\u0105dane FPS-y. Nast\u0119pnie do `Composition` przekazujemy nasz w\u0142asny komponent odpowiedzialny za wyrenderowanie filmu i tutaj dzieje si\u0119 wi\u0119kszo\u015b\u0107 magii. Wewn\u0105trz stworzonego wcze\u015bniej kontekstu dost\u0119pny jest hook `useCurrentFrame()`, kt\u00f3ry zwraca aktualn\u0105 klatk\u0119 animacji i na podstawie tej informacji renderujemy odpowiedni kontent. Na tym poziomie mo\u017cecie korzysta\u0107 w\u0142a\u015bciwie ze wszystkich bibliotek, jakie sobie wymarzycie (szczeg\u00f3lnie ciekawi mnie, co uda si\u0119 wymy\u015bli\u0107 wszystkim maniakom three.js ). Co wa\u017cne, wydajno\u015b\u0107 nie jest tu szczeg\u00f3lnie istotna, bo nie jest to kod, kt\u00f3ry trafia do klienta.<\/p><!--kg-card-begin: markdown--><pre><code class=\"language-js\">const MyVideo = () =&gt; {\n  const frame = useCurrentFrame();\n  const opacity = frame &gt;= 20 ? 1 : (frame \/ 20);\n  return (\n    &lt;div style={{\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n      opacity: opacity\n    }}&gt;\n      Hello World!\n    &lt;\/div&gt;\n  )\n}\nexport const RemotionVideo: React.FC = () =&gt; {\n  return (\n    &lt;&gt;\n      &lt;Composition\n        id=&quot;MyVideo&quot;\n        component={MyVideo}\n        durationInFrames={150}\n        fps={30}\n        width={1920}\n        height={1080}\n      \/&gt;\n    &lt;\/&gt;\n  );\n};\n<\/code><\/pre>\n<blockquote>\n<p>Prosty przyk\u0142ad wideo jakie mo\u017cna stworzy\u0107 przy u\u017cyciu Remotion<\/p>\n<\/blockquote>\n<!--kg-card-end: markdown--><p>W trakcie developmentu (a mo\u017ce nale\u017ca\u0142oby powiedzie\u0107 monta\u017cu? ) mamy dost\u0119pne preview z timelinem z prawdziwego zdarzenia. Kiedy dzie\u0142o jest ju\u017c gotowe, odpalamy build, podajemy \u015bcie\u017ck\u0119 do pliku docelowego i `ffmpg` uruchamia magi\u0119, dzi\u0119ki kt\u00f3rej otrzymujemy plik mp4.<\/p><p>Remotion opr\u00f3cz licencji Open Source i by\u0107 mo\u017ce bycia bardziej przyjaznym dla deweloper\u00f3w ni\u017c egzotyczne narz\u0119dzia jak `After Effects`, ma jeszcze jednego asa w r\u0119kawie : mo\u017cna go uruchomi\u0107 w aplikacji serwerowej i w dokerze. Opcja jest o tyle ciekawa, \u017ce daje ca\u0142\u0105 mas\u0119 mo\u017cliwo\u015bci i chodzi tu nie tylko o generowanie filmik\u00f3w powitalnych z imieniem u\u017cytkownika.<\/p><p>Jakie jest moje zdanie na temat tego narz\u0119dzia? To fajna ciekawostka, ale nie do ko\u0144ca rozumiem, sk\u0105d tyle zamieszania. Dla os\u00f3b zawodowo zajmuj\u0105cych si\u0119 wideo takie narz\u0119dzie nie jest nawet opcj\u0105 do rozwa\u017cenia. Dla programist\u00f3w jest to ciekawa alternatywa, ale na d\u0142u\u017csz\u0105 met\u0119 skorzystanie z bran\u017cowych standard\u00f3w powinno by\u0107 lepsz\u0105 opcj\u0105. Jedynym \u015bwiate\u0142kiem nadziei jest wi\u0119c zastosowanie serwerowe i tutaj czekam, co poka\u017ce pr\u0119\u017cna spo\u0142eczno\u015b\u0107 Reacta.<\/p><h3 id=\"-r-d-a-\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/github.com\/JonnyBurger\/remotion\">https:\/\/github.com\/JonnyBurger\/remotion<\/a><\/p><p>https:\/\/www.remotion.dev\/<\/p><h2 id=\"2-npm-7-is-now-generally-available-\">2. npm 7 is now generally available! \u2764\ufe0f<\/h2><p>Po prawie trzech latach od premiery wersji 6, wreszcie si\u0119 doczekali\u015bmy! npm 7 sta\u0142 si\u0119 og\u00f3lnie dost\u0119pny, czyli zosta\u0142 oznaczony jako `latest` i od tego tygodnia domy\u015blnie b\u0119dzie instalowa\u0142 si\u0119 przy odpaleniu `npm install --global npm`. Po trzech latach pracy deweloperzy chwal\u0105 si\u0119, \u017ce uda\u0142o im si\u0119 znacz\u0105co usprawni\u0107 proces releas\u00f3w (oko\u0142o 2 tygodniowo), zwi\u0119kszy\u0107 pokrycie testami (z 77% na 97%) , zmniejszy\u0107 liczb\u0119 dependencji (z 123 na 67) i generalnie poprawi\u0107 wydajno\u015b\u0107.<\/p><p>Opr\u00f3cz uj\u0119tych powy\u017cej generalnych usprawnie\u0144 w nowej wersji mamy 2 usprawnienia. Zmianie uleg\u0142 lockfile i teraz ma umo\u017cliwia\u0107 on reprodukowalne buildy i b\u0119dzie kompatybilny z yarn.lock. Jak dla mnie w tym momencie jedna z wi\u0119kszych zalet yarna zosta\u0142a wyeliminowana i powoli traci on swoje argumenty.<\/p><p>O ile pierwsza zmiana raczej nie sprawia problem\u00f3w przy aktualizacji, to druga mo\u017ce by\u0107 ju\u017c bardziej problematyczna. Od npm w wersji 4 w przypadku wyst\u0105pienia konflikt\u00f3w w peer dependencies generowane by\u0142o ostrze\u017cenie. W nowym wydaniu ostrze\u017cenie zosta\u0142o zamienione na b\u0142\u0105d (warto zaznaczy\u0107 jednak, \u017ce b\u0119dzie on zwracany tylko, je\u015bli jego naprawa jest w naszym zasi\u0119gu - konflikty g\u0142\u0119boko w naszym drzewie zale\u017cno\u015bci pozostan\u0105 warningami).<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e23e8366.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Terminal wi\u0119kszo\u015bci deweloper\u00f3w po aktualizacji do npm7<\/figcaption><\/figure><h3 id=\"-r-d-a--1\">\u0179r\u00f3d\u0142a:<\/h3><p>https:\/\/github.blog\/2021-02-02-npm-7-is-now-generally-available\/<\/p><h2 id=\"3-vuex-4-released-\">3. Vuex 4 released <\/h2><p>Na samym pocz\u0105tku musz\u0119 si\u0119 Wam do czego\u015b przyzna\u0107: nauka Vue ju\u017c od dawna le\u017cy na mojej kupce wstydu. Zawodowo mia\u0142em styczno\u015b\u0107 zar\u00f3wno z Reactem, jak i Angularem, ale pr\u0105dy mojej kariery nigdy nie \u015bci\u0105gne\u0142y mnie do frameworku tak wychwalanego przez deweloper\u00f3w. Mo\u017ce powiedziawszy to publicznie znajd\u0119 w sobie wystarczaj\u0105co motywacji, \u017ceby dokopa\u0107 si\u0119 do tego zadania\u2026 Z t\u0105 wiedz\u0105 przejd\u017amy jednak do newsa, kt\u00f3rym chce si\u0119 z Wami podzieli\u0107.<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0e249b1b3.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>Autor Frontendowego Czwartku widz\u0105c kolejnego newsa z \u015brodowiska Vue<\/figcaption><\/figure><p>Od wydania Vue 3.0 min\u0119\u0142o ju\u017c pi\u0119\u0107 miesi\u0119cy, ale dopiero teraz doczekali\u015bmy si\u0119 migracji najpopularniejszej biblioteki do zarz\u0105dzania stanem aplikacji, czyli Vuex. Lead time jest co najmniej niepokoj\u0105cy i ciekaw jestem, czy proces migracji b\u0119dzie r\u00f3wnie czasoch\u0142onny dla standardowych aplikacji, czy te\u017c jest to przypadek szczeg\u00f3lny zwi\u0105zany z niskopoziomowo\u015bci\u0105 biblioteki.<\/p><p>Sko\u0144czmy jednak ponure rozwa\u017cania i zobaczmy, co si\u0119 zmieni\u0142o. Dwie najwi\u0119ksze nowo\u015bci to wsparcie dla TypeScriptu i nowego api do kompozycji. Pobie\u017cnie przegl\u0105daj\u0105c breaking changes, wydaje si\u0119, \u017ce proces migracji nie powinien by\u0107 ekstremalnie trudny w por\u00f3wnaniu z samym procesem migracji z Vue 2 do Vue 3.<\/p><!--kg-card-begin: markdown--><pre><code class=\"language-js\">import { computed } from 'vue'\nimport { useStore } from 'vuex'\nexport default {\n  setup () {\n    const store = useStore()\n    return {\n      \/\/ access a state in computed function\n      count: computed(() =&gt; store.state.count),\n      \/\/ access a getter in computed function\n      double: computed(() =&gt; store.getters.double)\n    }\n  }\n}\n<\/code><\/pre>\n<blockquote>\n<p>Composition API wykorzystane w Vuex<\/p>\n<\/blockquote>\n<!--kg-card-end: markdown--><h3 id=\"-r-d-a--2\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/next.vuex.vuejs.org\/guide\/composition-api.html\">https:\/\/next.vuex.vuejs.org\/guide\/composition-api.html<\/a><\/p><p><a href=\"https:\/\/next.vuex.vuejs.org\/guide\/migrating-to-4-0-from-3-x.html\">https:\/\/next.vuex.vuejs.org\/guide\/migrating-to-4-0-from-3-x.html<\/a><\/p><h2 id=\"4-10-bad-typescript-habits-to-break-this-year-\">4. 10 bad TypeScript habits to break this year \t<\/h2><p>Na koniec mam dla Was <a href=\"https:\/\/startup-cto.net\/10-bad-typescript-habits-to-break-this-year\/\">kawa\u0142ek dobrej TypeScriptowej ewangelizacji<\/a>, kt\u00f3rej nigdy za wiele. Artyku\u0142 jest o tyle ciekawy, \u017ce nie oferuje suchej listy zasad, ale dla ka\u017cdego przypadku pochyla si\u0119 nad alternatywami i porusza ich wady wzgl\u0119dem sugerowanej wersji. Je\u015bli tylko b\u0119dziecie mie\u0107 chwil\u0119, to koniecznie zerknijcie.<\/p><hr \/><p>Je\u015bli chcesz otrzymywa\u0107 tego typu tre\u015bci spersonalizowane pod Ciebie, pobierz Vived!<\/p><ul><li><a href=\"https:\/\/apple.co\/3fB8Kcf\">App Store<\/a> <\/li><li><a href=\"https:\/\/bit.ly\/3m421dx\">Play Store<\/a> <\/li><li><a href=\"https:\/\/bit.ly\/3m9Bewn\">Wersja PWA<\/a> <\/li><\/ul><p><\/p>"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=10183"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10183\/revisions"}],"predecessor-version":[{"id":10652,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10183\/revisions\/10652"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}