Hieman pidemmän podcast-paussin aikana IT-maailmassa on tapahtunut paljon! Jakso alkaa ei niin mieltä nostattavissa tunnelmissa Big Tech -irtisanomisten muodossa. Muita aiheita ovat Twitterin nykytilanne Elon Muskin johdossa, Anti-SPA-liike ja React-vastaisuus, iOS Web Push Notifikaatioiden ja Container Queryjen saapuminen, uudenlainen lähestyminen web-sivuihin Arc-selaimen muodossa sekä tekoälyn nostama huomio. Jakson linkit: Big Tech irtisanomiset CSS Tricksin mahdollinen arkistointi - https://twitter.com/AdamRackis/status/1626403356116656128 Suurten Amerikkalaisten yritysten kasvu irtisanomisista huolimatta -https://www.businessinsider.com/impact-of-big-tech-layoffs-amazon-meta-microsoft-google-salesforce-2023-2 Twitterin tapahtumat aikajanalla - https://twitterisgoinggreat.com/ Web Push notifikaatiot iOS Safariin Push Notifikaatiot iOS 16.4 Betassa - https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/ Apple Developer video web Pushista - Meet Web Push for iOS Container queryt nyt kaikissa selaimissa Arc-selain Anti-SPA-liike Josh Collinsworth: The self-fulfilling propechy of React Eric Bailey: Modern Health, frameworks, performance, and harm Alex Russell: The Market for Lemons Zach Leatherman: A Historical Reference of React Criticism AI Github Copilot DALL-E 2 Midjourney Stable Diffusion ChatGPT

Jakson kantavana teemana toimii yksinkertaistaminen. Kesän aikana Tommi päivitti omaa sivuprojektiaan poistamalla Tailwindin ja lisäämällä Typescriptin. Antti päätyi käyttämään omassa sivuprojektissaan Ansiblea ja Dokkua. Loman virkistämä Tommi päätyi pohtimaan monoliitin ja mikropalvelun käyttöä ja ennenaikaista optimointia. Jakson nostot Tommi Matt Pocock Typescript -videot Overloads vs. Generics Antti Anssi Kelan kitarat B-bender

Onko logien lukeminen webbisovelluksista ylipäätään mahdollista Azuressa? Miten käy selainkehitykselle, jos Apple joutuu sallimaan WebKitin lisäksi muita selainmoottoreita iOS:lle? Kuinka syvä on Tommin tuska TypeScript-polulla? Miksi tässä on vain kysymyksiä? Jakson linkit EU ja iOS:n selainmoottorit Webbisivujen transitiot SolidJS Selainten natiivi datetime-komponentti Node.js fetch-API Parse, don’t validate Validaattorit: Zod, Yup ja Purify TypeScriptin utility-tyypit Virheiden nappaus try-catchissa Jakson nostot Antti Helix AstroNvim Tommi Corridor Digital, vanha Batman uuteen Batmaniin

Onko The Year of Web Components vihdoin täällä?! Ovatko varjo-DOM ja kaverit lupaus uudesta ja mahtavasta vai onko lisävauhdin tarve edelleen läsnä? Mitä ovat HTML-nokat? Vieraana mahtava Matias Huhta Suomen Turusta. Jakson linkit Matias Twitterissä https://webbidevaus.fi/57 https://open-wc.org/discover/slack/ https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements https://github.com/mdn/web-components-examples/blob/main/popup-info-box-web-component/main.js https://lit.dev https://shoelace.style/ https://github.com/github/time-elements Matiaksen talkki React Finland 2021:ssä Suomen kotiolutdiscord Matiaksen olut-IOT-laite Matiaksen podcast Shy Boys Jakson fiilikset Tommi: ESP32 + Ikea ilmanlaaduntunnistin = ilmanlaatusensori Antti: Nintendo 3DS Matias: Olut-IOT-laite

CSS on kohta valmis! Tommi linkkihaavista löytyi pari kiinnostavaa twiittiä; tämän vuoden aikana Chromeen tulevat uudet CSS-ominaisuudet ja Steven Pembertonin kannanotto !importantin käytöstä. Jakson React-osiossa vilkaistiin, mitä React 18 tuo mukanaan. Lisäksi vinkataan VS Coden käyttäjille Koodiklinikan kuratoitu laajennuslista. Loppupuolella keskustellaan etätyöskentelystä ja aikavyöhykkeiden yli työskentelystä. Jakson linkit Nicole Sullivanien twiitti CSS:n tulevista ominaisuuksista CSS :has( ) A Parent Selector Now blogipostaus Steven Pembertonin twiitti !importatista React 18 jukaistiin Koodiklinikan VS Code -laajennoslista Jakson fiilikset Tommi: Severance Antti: LEGO Masters Suomi

Tommi jakaa viimeaikaisia sähköpostin tyylittelyyn ja dark modeen liittyviä kokemuksia. Palataan hetkeksi jaksoon 110 muistelemaan FLoCia, kun Google on palannut piirrustuspöydälle idean kanssa. Antti kertoo miten helppoa ts-koodin jakaminen on monorepossa, ja lopuksi mietitään rikkooko Firefoxin ja Chromen 100-versiot internetin (ja kuinka pahasti). Jakson linkit Litmus.comin blogi eri sähköpostien dark mode käsittelystä Google hylkää FLoCin Googlen blogaus Topicseista React SVGR TypeScript project references Turborepo Chrome versio 100 voi rikkoa internetin Jakson fiilikset Tommi: Pirre-kissa Antti: Trailer Park Boys

Antilla on tarve tallennella kaikenlaista mediaa verkkolevylle ja Tommi kertoo omasta mediaserveristään. Lisäksi Antti pääsee opiskelemaan uusia PostgreSQL-asioita nykyisen projektinsa myötä. Jakson pääaiheena pureuduttiin State of JavaScriptin vastauksiin ja vedettiin niistä hieman johtopäätöksiä. Jakson linkit TrueNAS Synology DS220+ Postgres - Faster LIKE/ILIKE PostgreSQL Full-Text Search Ordering fuzzy search results by relevancy using trigrams The Art of PostgreSQL State of JavaScript 2021 The Third Age of JavaScript State of JS 2021 awards Most Adopted Feature: Nullish Coalescing Most Adopted Technology: esbuild Highest Satisfaction: Vite Highest Interest: Vite Most Write-Ins: Elm Jakson fiilikset Antti: Parks & Recreation Tommi: Arduino-koodailut

Tommi päätti sukeltaa TypeScriptin maailmaan pari kuukautta takaperin. Mihin haasteisiin hän törmäsi, mitkä ovat fiilikset ja kuinka syvään päätyyn tuli sukellettua? Tuliko Tommista TypeScript-käännytetty? Vai aiheuttavatko tyypitykset liikaa kohinaa koodiin? Preshown aikana ihmetellään iOS:n betaversiossa olevaa PWA-push-notifikaatiotukea ja JavaScriptin pipeline operaattoria. Lisäksi havaitaan että Tommi ei osaa roastata Antin uuden projektin teknologiastäkkiä. Jakson linkit Push-notifikaatiot IOS:n PWA:lle: https://firt.dev/ios-14.5b/ Pipeline operator use cases: https://2ality.com/2022/01/pipe-operator.html Pipeline operator proposal: https://github.com/tc39/proposal-pipeline-operator TRPC: https://trpc.io Devtools.fm TRPC-jakso: https://devtools.fm/episode/21 Devops with Docker Mooc: https://devopswithdocker.com/ Devops with Kubernetes Mooc: https://devopswithkubernetes.com State of JS survey 2021: https://app.stateofjs.com/survey/state-of-js/2021 Blogipostaus State of JS surveyn vuodosta: https://dev.to/sachagreif/disclosing-a-state-of-javascriptstate-of-css-data-breach-2lg1 TypeScript: https://www.typescriptlang.org Jos tyyppejä ei ole, DefinitelyTyped voi auttaa: http://definitelytyped.org Tyyppipredikaateista dokumentaatiota: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates Jakson fiilikset Antti: Daft Punk - ALIVE 2021: EPILOGUE Tommi: Horizon Zero Dawn

Mitä kuuluu Ruby on Railsille? Jakson vieraana Tuomas Jomppanen kertomassa Rails-kuulumisia. Samalla päästiin kuulemaan, mistä Hotwiressa on kyse. Jakson sponsorina Flockler! Katso lisää osoitteessa flockler.com/webbidevaus. Linkit Rubyn kotisivu - https://www.ruby-lang.org/en/ Ruby on Rails kotisivu - https://rubyonrails.org Hotwire kotisivu - https://hotwired.dev Oikea Hotwirea hyödyntävä sovellus, SpinaCMS - https://spinacms.com Tuomaksen kotskasivu - https://tuomas.io Viikon hyvät fiilikset Tommi: 3D-tulostettu Iron Man kypärä Tuomas: Witted ilmoitti halusta listautua pörssiin Antti: ETF-rahastot

Edellisessä jaksossa tutustuttiin Svelteen mutta asiaa oli enemmän kuin jaksoon mahtui! Toisen jakson aiheet sukeltavat tilanhallintaan, reititykseen ja Svelte Kit -frameworkiin. Linkit Svelte Kit kotisivu - https://kit.svelte.dev Elder.js - https://elderguide.com/tech/elderjs/, https://github.com/elderjs/elderjs Routify - https://routify.dev Plenti - https://plenti.co Skaalautuuko Svelte - https://github.com/halfnelson/svelte-it-will-scale/blob/master/README.md Skaalautuuhan Svelte - https://svelte-scaling.acmion.com Miten Level Up Tutorials vaihtoi Reactista Svelteen: https://youtu.be/ezk6qAIXe68 React Hookkien Svelte-vastineet - https://github.com/joshnuss/react-hooks-in-svelte React Forget “kääntäjä” - https://youtu.be/lGEMwh32soc Svelte Summit videot - https://sveltesummit.com Viikon hyvät fiilikset Tommi: Lepo ja tylsistyminen Antti: Netflix ja sarjat

Tommi on käyttänyt Svelteä pidemmän aikaa, myös ihan oikeassa työssä. Jakson aikana tutustutaan tähän "blazing fast" UI-kirjastoon. Tommi kertoo Svelten historiasta ja miksi Rich Harris (ei Rich Hickey) alun perin alkoi rakentaa Svelteä. Lisäksi jutellaan muun muassa komponenttikehityksestä Sveltessä, 2-way data bindauksesta, Svelten reaktiivisuudesta, animaatoista ja transitioista, sekä Svelten ympärillä olevasta komponenttiekosysteemistä. Kaikkea ei edes yritetty mahduttaa yhteen jaksoon, joten toinen jakso Sveltestä on tulossa. Linkit Svelten kotisivu - https://svelte.dev Svelten integraatioita - https://github.com/sveltejs/integrations Responsive Svelte (exploring Svelte's reactivity) - https://youtu.be/fvY1TAKNPgY Svelte Society - https://sveltesociety.dev Svelte Discord - https://discord.com/invite/yy75DKs Viikon hyvät fiilikset Tommi: Piparkakkutalon rakennus Antti: Acapulco-sarja AppleTV:stä

Edellinen bäkkärijakso aktivoi palautekanavia, joten Tommi päätyi tarkentamaan kommenttia PHP:sta ja sen muutoksista. Tämän lisäksi aikaisemmassa jaksossa mainittu Remix julkaistiin ja Antti kokeili, miten se toimii. Jakson pääaiheena on CSS, erityisesti sen mahdolliset uudet ominaisuudet. Suurinta keskustelua webbipuolella on viimeaikoina aiheuttanut Container Queryt. Tähän aiheeseen pureudutaan syvemmin. Hieman lyhyemmin käydään läpi nesting CSS preprosessoreista tuttu nesting, CSS Cascade Layers, @when-sääntö, sekä @scope-sääntö. Linkit PHP https://bulletproofphp.dev/yes-php-is-worth-using Remix Remix Blogitutorial @container https://alistapart.com/article/responsive-web-design/ Say Hello to Container Queries Container Queries for Designers https://youtu.be/JsN_iE3prm0 https://github.com/GoogleChromeLabs/container-query-polyfill Container Query Units https://drafts.csswg.org/css-contain-3/#container-lengths @nest https://www.w3.org/TR/2021/WD-css-nesting-1-20210831/ @layer https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/ @when https://css-tricks.com/proposal-for-css-when/ https://tabatkins.github.io/specs/css-when-else/ @scope Early Days for CSS Scoping Viikon hyvät fiilikset Tommi: Corne-näppäimistön rakentaminen Antti: Avantouinti

Tommin podcast-äänessä on ollut parantamisen varaa, jota on korjattu mikrofonia vaihtamalla. Tämän päivityksen myötä varmistettiin, että äänenlaatu olisi voinut parantua tarkistamalla tallennussoftan asetukset. Palautelaatikkoon oli tullut backend-aiheisia kysymyksiä, joista napattiin tähän jaksoon PHP- ja Python-aiheisia kysymyksiä. Mikä olisi WordPressiä tekevälle backend-devaajalle sopivaa haastetta kehittymisen kannalta? Entä onko PHP jälleen cool, kun Laravel tarjoaa avaimet käteen -ratkaisun? Linkit https://laravel.com https://symfony.com https://laravel-mix.com/ https://craftcms.com/ https://statamic.com https://www.djangoproject.com https://palletsprojects.com/p/flask/ https://fastapi.tiangolo.com https://www.fastify.io Viikon hyvät fiilikset Tommi: Pendergast-kirjat Antti: Witcher-kirjat

Koodin siistinä pitäminen on haastavaa. Onneksi näihin löytyy lisää koodia, joilla oman koodin saa pysymään siistinä. Antti ja Tommi käyvät läpi kattavan listan eri tavoista ja työkaluista, joiden avulla koodin siistimiseen ei tarvitse kiinnittää huomiota. Ja keskustellaanpa sitä vähän gitin käytöstäkin. Linkit stylelint CSS Lint headwind Trunk-based development Github Flow Alkuperäinen Git Flow -kirjoitus Conventional commits https://commitlint.js.org/ Viikon hyvät fiilikset Tommi: Tanssiminen Antti: Tuorepuuro

Webbidevauksen toimituksessa kuopaistiin palautelaatikosta pari kysymystä vastattavaksi. Ennen kysymyksiin vastaamista Antti nosti muutaman mielenkiintoisen linkin keskusteltavaksi. https://remix.run/blog/seed-funding-for-remix Remix on Michael Jacksonin ja Ryan Florencen luoma React-framework, joka sai 3 miljoonan dollarin rahoituksen. Rahoituksen johdosta Remix tullaan julkaisemaan open sourcena. https://wicg.github.io/sanitizer-api/ HTML Sanitizer API esittelee uuden rajapinnan selaimiin, jonka avulla kehittäjillä olisi mahdollisuus sanitoida käyttäjien syötteet selaimessa. HTML Sanitizer API on vielä vedosasteella. State of CSS State of CSS on vuosittain tehtävä kysely, jossa kehittäjät pääsevät kertomaan miten he käyttävät CSS:ää. Vuoden 2021 kysely on menossa juuri nyt. TKMV Antti ja Tommi pohdiskelevat, mitä 80% työaika voisi tarkoittaa. Lisäksi he kertovat millaiset koodaussetupit heiltä löytyy kotoa, ja kuinka he ehkäisevät omia selän ja hartiaseudun vaivoja. Puhetta oli sen verran että jaksoon vastattavaksi otetut arkkitehtuurikysymykset oli mahdollista kätevästi siirtää toiseen jaksoon. Viikon hyvät fiilikset Tommi: Talon talvivalmistelut Antti: Kuntosalikäynnit

Webbidevauksen tauko jäi lyhyeksi, kun postilaatikkoon tupsahti työhakemus juontajan pestiin. Niinpä työhaastattelu oli luontevaa tehdä jakson muodossa. Jakson aikana tutustutaan hakemuksen jättäneen Tommin taustoihin. Millainen kaveri on kyseessä? Miksi hän haluaa Webbidevaukseen mukaan? Mitkä ovat ajatukset Reactista ja TypeScriptistä?

Tässä jaksossa katsaus sovellusten rakentamiseen Elixirillä ja Phoenix Frameworkillä. Miten Erlangin virtuaalikone eroaa Node.js - sovelluksesta ja mitä ovat LiveViewit? Tämän jakson jälkeen webbidevaus.fi jää tauolle määrittelemättömän pituiseksi ajaksi. Haluamme kiittää kuuntelijoitamme ja sponsoreitamme viimeisestä kolmesta vuodesta podcastin parissa 🙏 Linkit Introduction to Elixir Phoenix Framework Jakson valinnat Antti: Suuri keramiikkakisa Riku: Yes Yes Yes

Tässä jaksossa pikakatsaus staattisien sivujen generointiin Astrolla. Lisäksi vastataan kysymyksiin tietorakenteiden tärkeydestä webbikehityksessä, riittävistä taidoista ensimmäistä työpaikkaa hakiessa ja tärkeimmistä asioista etätyössä. Rentouttavaa kesää kaikille! ☀️ Linkit CSS-Tricks: A look at buiding with Astro Astro Githubissa Astro.build Kysymykset Miksi jaksojen sivuilla (esim https://webbidevaus.fi/102) ei ole title-tägiä? Miten tärkeänä pidette, että osaa tunnetuimpia tietorakenteita ja algoritmejä, kun kyse webbikehityksestä? (Tomi) Mitä mieltä ootte Storybook? (MaijaXD) Olen liiketalouden ohella opiskellut koodaamista nyt n. vuoden ajan. Olisi mukava kuulla teiltä hieman syventävää pohdintaa millaisia odotuksia/taitoja ohjelmoinnin osalta vaaditaan ensimmäistä työpaikkaa hakiessa. Itselleni tutuksi on tullut mm. C#, javascript, HTML, CSS, mySQL, MSSQL, React, Git ja python alkeet. Uskaltaisiko näillä eväillä jo hakea työpaikkaa? Mitä koette tärkeiksi asioiksi devaustiimin nykymaailman etätyössä, kun etänä työskentelee tiimeissä myös useimmat niistäki joilla siitä ei oo aiempaa kokemusta? Jakson valinnat Antti: Phoenix Wright: Ace Attorney Trilogy Riku: Pirkka Toukkis

Tässä jaksossa Antti ja Riku juttelevat droneista, 5G:stä, sekä Github Copilotin mahdollisuuksista osana koodarin työkalupakkia. Lisäksi vastaillaan kysymyksiin freelance-projektien hankkimisesta, sopivien kirjastojen valinnasta projekteihin, SEO:sta ja monesta muusta. Jakson nimi tietysti OpenAI:n generoima! Linkit DJI Mini 2 Copilot Kysymykset Kuinka usein teidän päivittäisessä työssä tulee SEO vastaan? Kuinka paljon webbidevaajan pitäisi tietää SEOsta? (Giacomo) Google Search Console Saako töissä yleensä käyttää haluamaansa editoria vai halutaanko että koko tiimi käyttää VScodea. (vim user) Ootteko joutuneet tiukkojen teknisten tehtävien / kysymysten eteen työhaastatteluissa? Minkälaisia tehtäviä kannattaa teettää, jos on palkkaamassa fronttidevaajaa 2021? Assignment brief for junior developers, fall 2021 Moikka! Mikä on aloittelevalle webbikehittäjälle paras tapa hankkia Suomessa projekteja freelance-pohjalta? Onko esimerkiksi palveluita, joiden kautta ensisijaisesti kannattaisi etsiä itselleen hommia ja tarjota osaamistaan, jos ei vielä ole vanhasta takaa liiemmälti kontakteja? Entä mitä sudenkuoppia pitäisi osata välttää, kun tekee tällaista sopimusta asiakkaan kanssa (aikataulutus, palkkiot jne.) (Miqsu) Millä asioilla on sinulle merkitystä, kun valitset sopivia kirjastoja projektiasi varten? Lähdekoodin avoimuus? GitHub-tähtien määrä? Muut kriteerit? (Kosminen) Jakson valinnat Antti: Kummeli Yle Areenassa Kummeli 30 vuotta Riku: Curb Your Enthusiasm

Katsaus React 18 Alphaan ja Tailwind versioon 2.2. Onko any:n tai as-castauksen käyttö TypeScriptissä aina koodihaju? Puhutaan myös SVG-kuvista ja kuvien generoinnista Node.js:llä. Tätä jaksoa sponsoroi Futurice. Tsekkaa duunit osoitteessa futurice.com/careers! Linkit SVG Antin mindmap-demo TypeScript Tagged Union Types in TypeScript React 18 alpha The Plan for React 18 React 18: Terms and functionality React Server Components React 18 Alpha is out! Now what? startTransition: New feature: startTransition A better React 18 startTransition demo Pythagoras tree demo Tailwind 2.2 v2.2.0 Jakson valinnat Antti: Base16 Terminal Colors for Visual Studio Code Riku: Graphile Starter