Webbidevaus.fi

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:TommiMatt Pocock Typescript-videotOverloads vs. GenericsAnttiAnssi Kelan kitaratB-bender

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 linkitEU ja iOS:n selainmoottoritWebbisivujen transitiotSolidJSSelainten natiivi datetime-komponenttiNode.js fetch-APIParse, don't validateValidaattorit: Zod, Yup ja PurifyTypeScriptin utility-tyypitVirheiden nappaus try-catchissaJakson nostotAnttiHelixAstroNvimTommiCorridor 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 linkitMatias Twitterissähttps://webbidevaus.fi/57https://open-wc.org/discover/slack/https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elementshttps://github.com/mdn/web-components-examples/blob/main/popup-info-box-web-component/main.jshttps://lit.devhttps://shoelace.style/https://github.com/github/time-elementsMatiaksen talkki React Finland 2021:ssäSuomen kotiolutdiscordMatiaksen olut-IOT-laiteMatiaksen podcast Shy BoysJakson fiiliksetTommi: ESP32 + Ikea ilmanlaaduntunnistin = ilmanlaatusensoriAntti: Nintendo 3DSMatias: 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 linkitNicole Sullivanien twiitti CSS:n tulevista ominaisuuksistaCSS :has( ) A Parent Selector Now blogipostausSteven Pembertonin twiitti !importatistaReact 18 jukaistiinKoodiklinikan VS Code -laajennoslistaJakson fiiliksetTommi: SeveranceAntti: 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 linkitLitmus.comin blogi eri sähköpostien dark mode käsittelystäGoogle hylkää FLoCinGooglen blogaus TopicseistaReact SVGRTypeScript project referencesTurborepoChrome versio 100 voi rikkoa internetinJakson fiiliksetTommi: Pirre-kissaAntti: 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 linkitTrueNASSynology DS220+Postgres - Faster LIKE/ILIKEPostgreSQL Full-Text SearchOrdering fuzzy search results by relevancy using trigramsThe Art of PostgreSQLState of JavaScript 2021The Third Age of JavaScriptState of JS 2021 awardsMost Adopted Feature: Nullish CoalescingMost Adopted Technology: esbuildHighest Satisfaction: ViteHighest Interest: ViteMost Write-Ins: ElmJakson fiiliksetAntti: Parks & RecreationTommi: 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 linkitPush-notifikaatiot IOS:n PWA:lle: https://firt.dev/ios-14.5b/Pipeline operator use cases: https://2ality.com/2022/01/pipe-operator.htmlPipeline operator proposal: https://github.com/tc39/proposal-pipeline-operatorTRPC: https://trpc.ioDevtools.fm TRPC-jakso: https://devtools.fm/episode/21Devops with Docker Mooc: https://devopswithdocker.com/Devops with Kubernetes Mooc: https://devopswithkubernetes.comState of JS survey 2021: https://app.stateofjs.com/survey/state-of-js/2021Blogipostaus State of JS surveyn vuodosta: https://dev.to/sachagreif/disclosing-a-state-of-javascriptstate-of-css-data-breach-2lg1TypeScript: https://www.typescriptlang.orgJos tyyppejä ei ole, DefinitelyTyped voi auttaa: http://definitelytyped.orgTyyppipredikaateista dokumentaatiota: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicatesJakson fiiliksetAntti: Daft Punk - ALIVE 2021: EPILOGUETommi: 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.LinkitRubyn kotisivu - https://www.ruby-lang.org/en/Ruby on Rails kotisivu - https://rubyonrails.orgHotwire kotisivu - https://hotwired.devOikea Hotwirea hyödyntävä sovellus, SpinaCMS - https://spinacms.comTuomaksen kotskasivu - https://tuomas.ioViikon hyvät fiiliksetTommi: 3D-tulostettu Iron Man kypäräTuomas: Witted ilmoitti halusta listautua pörssiinAntti: ETF-rahastot

Edellisessä jaksossa tutustuttiin Svelteen mutta asiaa oli enemmän kuin jaksoon mahtui! Toisen jakson aiheet sukeltavat tilanhallintaan, reititykseen ja Svelte Kit -frameworkiin.LinkitSvelte Kit kotisivu - https://kit.svelte.devElder.js - https://elderguide.com/tech/elderjs/, https://github.com/elderjs/elderjsRoutify - https://routify.devPlenti - https://plenti.coSkaalautuuko Svelte - https://github.com/halfnelson/svelte-it-will-scale/blob/master/README.mdSkaalautuuhan Svelte - https://svelte-scaling.acmion.comMiten Level Up Tutorials vaihtoi Reactista Svelteen: https://youtu.be/ezk6qAIXe68React Hookkien Svelte-vastineet - https://github.com/joshnuss/react-hooks-in-svelteReact Forget “kääntäjä” - https://youtu.be/lGEMwh32socSvelte Summit videot - https://sveltesummit.comViikon hyvät fiiliksetTommi: Lepo ja tylsistyminenAntti: 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.LinkitSvelten kotisivu - https://svelte.devSvelten integraatioita - https://github.com/sveltejs/integrationsResponsive Svelte (exploring Svelte's reactivity) - https://youtu.be/fvY1TAKNPgYSvelte Society - https://sveltesociety.devSvelte Discord - https://discord.com/invite/yy75DKsViikon hyvät fiiliksetTommi: Piparkakkutalon rakennusAntti: 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ö.LinkitPHPhttps://bulletproofphp.dev/yes-php-is-worth-usingRemixRemixBlogitutorial@containerhttps://alistapart.com/article/responsive-web-design/Say Hello to Container QueriesContainer Queries for Designershttps://youtu.be/JsN_iE3prm0https://github.com/GoogleChromeLabs/container-query-polyfillContainer Query Unitshttps://drafts.csswg.org/css-contain-3/#container-lengths@nesthttps://www.w3.org/TR/2021/WD-css-nesting-1-20210831/@layerhttps://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/@whenhttps://css-tricks.com/proposal-for-css-when/https://tabatkins.github.io/specs/css-when-else/@scopeEarly Days for CSS ScopingViikon hyvät fiiliksetTommi: Corne-näppäimistön rakentaminenAntti: 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?Linkithttps://laravel.comhttps://symfony.comhttps://laravel-mix.com/https://craftcms.com/https://statamic.comhttps://www.djangoproject.comhttps://palletsprojects.com/p/flask/https://fastapi.tiangolo.comhttps://www.fastify.ioViikon hyvät fiiliksetTommi: Pendergast-kirjatAntti: 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.LinkitstylelintCSS LintheadwindTrunk-based developmentGithub FlowAlkuperäinen Git Flow -kirjoitusConventional commitshttps://commitlint.js.org/Viikon hyvät fiiliksetTommi: TanssiminenAntti: Tuorepuuro

Webbidevauksen toimituksessa kuopaistiin palautelaatikosta pari kysymystä vastattavaksi. Ennen kysymyksiin vastaamista Antti nosti muutaman mielenkiintoisen linkin keskusteltavaksi.https://remix.run/blog/seed-funding-for-remixRemix 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 CSSState 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.TKMVAntti 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 fiiliksetTommi: Talon talvivalmistelutAntti: 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

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! ☀️LinkitCSS-Tricks: A look at buiding with AstroAstro GithubissaAstro.buildKysymyksetMiksi 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 valinnatAntti: Phoenix Wright: Ace Attorney TrilogyRiku: 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!LinkitDJI Mini 2CopilotKysymyksetKuinka usein teidän päivittäisessä työssä tulee SEO vastaan? Kuinka paljon webbidevaajan pitäisi tietää SEOsta? (Giacomo)Google Search ConsoleSaako 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 2021Moikka! 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 valinnatAntti:Kummeli Yle AreenassaKummeli 30 vuottaRiku: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!LinkitSVGAntin mindmap-demoTypeScriptTagged Union Types in TypeScriptReact 18 alphaThe Plan for React 18React 18: Terms and functionalityReact Server ComponentsReact 18 Alpha is out! Now what?startTransition:New feature: startTransitionA better React 18 startTransition demoPythagoras tree demoTailwind 2.2v2.2.0Jakson valinnatAntti: Base16 Terminal Colors for Visual Studio CodeRiku: Graphile Starter

Antti näkee Objective C:tä JS:ssä, Riku kutsuu Postgresiä suoraan frontista, Google kannustaa RSS:n käyttöön. Oikeasti? Oikeasti!LinkitPostGraphileThe data model behind Notion's flexibilityLearn CSShttps://twitter.com/addyosmani/status/1395106082029068289Recoil 0.3.0Sublime Text 4Google IONode 12 vuottaKysymyksetMiten kaikille koodareille riittää töitä ?emilioAloitin webbidevaus podcastin kuuntelun, kun jaksoja oli tullut ulos 101. Kuuntelin kaikki jaksot(1-104) ennen kun jakso 105 oli julkaistu. Kysymykseni: Onko tämä kahden tarran arvoinen suoritus? Ps. Erityiskiitos tailwind jaksosta! Perätuulta ollut jokaisessa projektissani jakson kuunneltuni!JyriOnko Java Spring jo auttamattomasti outdated?anonyymiJakson valinnatRiku: Paints & Friends Akryylikaato - workshopKuvat InstagramissaAntti: The Spaghetti Westerns Music

Sponsori: FuturiceTsekkaa avoimet paikat osoitteesta futurice.com/careers!LinkitVue.jsTypescript type safety in templateWhy isn't Vue 3 getting typescript type checking in templates at compile time?TypeholeVSCode extensionTyped holesStackblitz - Introducing WebContainers: Run Node.js natively in your browserGoogle AMP is dead! AMP pages no longer get preferential treatment in Google searchJakson valinnatRiku: Fluffy Jiggly Japanese Pancake RecipeAntti: Backyard Squirrel Maze 2.0 - The Walnut Heist

Framework vai kirjasto? JSX vai templatet? Mitkä ovat ratkaisevat erot Vuen ja Reactin välillä, ja mikä saisi vaihtamaan toiseen? Safariin on saapunut uusia ominaisuuksia aina flexbox gapista Sirin varassa pyörivään Speech recognition rajapintaan.LinkitNew WebKit Features in Safari 14.1Effect of the Last Week on Ruby on RailsCSS counterRedux Toolkit & RTK Queryhttps://rtk-query-docs.netlify.app/https://github.com/reduxjs/redux-toolkit/releases/tag/v1.6.0-alpha.1VS Coden GitHub -laajennusKysymyksetMiksi ette vaihtaisi Reactista Vueen?What Vue.js Does Better Than React@vueuse/motionJakson valinnatRiku: PapillonAntti: The Grand Budapest Hotel

Mikä on Googlen tällä hetkellä käyttäjillään testaama pahamaineinen seurantatyökalu FLoc? Koodimysteerejä selvitellään myös aina TypeScriptin AST:stä VSCode lisäosien koodaamiseen, kun Riku on aloittanut taas varsin kokeellisen harrasteprojektin

Vauhdista liikkuvaan projektijunaan hyppääminen ei koskaan ole helppoa. Millä mielellä hommaan kannattaa lähteä ja mitä ottaa huomioon? Voiko vauhtiin pääsyä nopeuttaa?Mitä mieltä olemme open sourcesta? Web pyörii ilmaisen koodin varassa, mutta ovatko Github-tähdet lopulta riittävä korvaus open source - kehittäjille? Onko tähän havaittavissa muutosta?Kuuntele niin tiedät!LinkitContainer queriesKysymyksetOnko codebaseen tutustumisessa oikotietä onneen?Dependency cruiserMitä mieltä olette open sourcesta?Mikä on nykyään paras tapa tilanhallintaan React-sovelluksissa?Redux ToolkitrecoiljotaizustandxstateuseContext, useReducerreact-queryMiksi puolet "modernista javascript-kehityksestä" on oikeasti buildityöjalujen tunkkaamista?IIFE:t (immedeately invoked function expression)require-js, browserify, grunt, gulpJakson valinnatRiku: Jaffa KirsikkaAntti: The Incredibles 1 & 2

Onko Tailwind JIT nyt sitten 5/5 vai 0/5? Mikä tekee Vitestä Webpackia nopeamman? Tuleeko Harmaja viimein popularisoimaan funktionaalisen reaktiivisen ohjelmoinnin webissä? Pikalataa annos fronttikehityksen uusia tuulia tästä!Build your own ReactLambda Calculus - ComputerphileAnttiViteesbuildwmrSnowpackTailwind JITRikuHarmajaBacon.jsJavaScript ES2021 Features You Need to KnowTemporalProposalFixing JavaScript Date – Getting StartedMixins Are Dead. Long Live CompositionJakson valinnatRiku: 3 Kaverin Vegaaninen Jäätelö, Lakritsi & VadelmaAntti: finmech.group

Rahaa tulee jo ovista ja ikkunoista, eikä koulun penkillä istuminen enää innosta? How to proceed? Te kysytte, me vastaamme! Entä mitä mieltä Riku ja Antti ovat progressiivisten web-sovellusten tulevaisuudesta ja nykytilasta? Miten aloittaa uuden ohjelmointikielen opiskelu? Meiltä mielipiteet jokaiseen vaivaan!Jakson sponsorina Futurice!Futuricen avoimet duunitTomin fromfrom-kirjastoIkkunastudio 102Juhiksen järjestämä Koodiklinikan palkkakysely:http://bit.ly/koodiklinikka-palkkakysely-vastauksetJa @akx'n rakentamat lisäanalyysit täältä:https://koodiklinikka.github.io/palkkakysely/KysymyksetKiitos mahtavasta sisällöstä! Onko teillä kokemusta graafitietokannoista? Mistä ja toimiiko hyvin node.js:n kanssa? Olen jonkin verran kikkaillut Neo4jn kanssa, se on todella kätevä. Oon vaa vielä kahden vaiheella, uskallanko ottaa ihan tuotanto käyttöön (en tiedä toimiiko backupit yms kunnolla) (Devi Niko)Oletteko töissänne ja/tai omissa projekteissanne kehittäneet progressiivisia web sovelluksia (PWA) ja onko teillä mielipiteitä niiden nykytilasta ja tulevaisuudesta web sovellusten kehityksessä? (Allan)Web app manifestngrokTyökalu lokaalisti pyörivän sovelluksen testaamiseen ulkoverkon läpiOnko koulua järkeä käydä loppuun jos pääsee heti töihin? Kohta ensimmäinen vuosi takana ja jos saan kesätöistä heti vakipaikan niin kannattaako siirtyä työelämään vai käydä se koulu loppuun? Tullut harrasteltua koodausta jo ennen koulua, ainakin ensimmäisen vuoden opetus oli aivan pelleilyä (youtube > amk)Miten aloitatte uuden ohjelmointikielen/teknologian opiskelun? Luetteko kirjan, katsotteko videon, selaatteko läpi dokumentaation? Ja mitä suosittelisitte? (Ode)

Koneoppimista ja tietoturvaa tutkitaan paljon yliopistoissa, mutta miten on webbidevauksen laita? Tähän kysymykseen on vastaamassa Inteliltä W3C-konsortiossa toimiva Anssi Kostiainen ja web-teknologioista väitellyt Mikko Pohja, yksi Bytecraftin perustajaosakkaista. Vierailevana juontajana tässä jaksossa väitöskirjatutkijana Aalto-yliopistossa toimiva Giacomo Mariani.LinkitW3CErwiseAnssi Kostiainen TwitterissäMikko Pohja Twitterissäbytecraft.fiGiacomo Mariani TwitterissäGiacomo Mariani medium.com:ssa

Antti on ottanut Redux-toolkitin käyttöön. Mitä etuja se antaa pelkkään Reduxiin nähden? Entä tulevatko react-query ja vastaavat korvaamaan koko perinteisen datan lataamisen?Tätä jaksoa sponsoroi Futurice! Tsekkaa lisää ja avoimet paikat osoitteessa https://futurice.com/careers.LinkitRedux Toolkitreact-queryKysymyksetMP tästä listasta ja mielipiteistä? https://chriskiehl.com/article/thoughts-after-6-yearsTeremoro! Olen mietiskellyt, että jos vielä "vanhoilla päivillä" tässä vaihtaisi alaa ja alkaisi vähän koodailemaan. Jotain onkin tullut jo nakeloitua, mutta erittäin alussa ollaan. Olen kuunnellut tässä teidän erinomaisia höpinöitä ja kiitos niistä, mutta yksi asia on jäänyt mietityttämään: mulle on jäänyt kuva, että kun teillä alkaa loma tai muu vapaa-aika niin ensimmäinen tai ehkä toinen asia mitä tehdään on testataan jotain "tekkiä" tai koodaillaan muuten vaan. Tämä kirvoittaakin kysymykseni, että jos mielii edes rividevaajaksi työelämään niin onko pinnalla pysyäkseen syytä käyttää vaparitkin koodinpätkien kanssa painiessa? Vai tuleeko tämmöinen kysymykseen vasta pyrkiessä God-tier -devaajaksi? :) (Boomer)Milloin on koodaus-workflown kannalta paras aika painaa tallennusta editorissa, ottaen huomioon esim. prettierin joka formatoi koodin savea painettaessa? (Def)Mitä tarkoittaa asynkronisuus ohjelmoinnissa? (Heebo)Jakson valinnatAntti: Ring Fit AdventureRiku: Grammarly

Kysymysjakso, eli tarroja taas jaossa! Miten harjaantua CSS:ssä? Mitä mieltä olemme Denosta? Kannattaako koodia kirjoittaa huonommin kuin osaisi?Palautetta:Olipa mukava kuunnella keskustelua vimistä! Vimin opetteluun aivan ehdoton ykkössuosikkini on VIM-adventures! (https://vim-adventures.com/) 25$/6kk lisenssi ei kyllä sieltä halvimmasta päästä ole mutta voin sanoa että on hintansa väärti. Toistoja tulee paljon ja monipuolisesti sekä komentorepertuaari pelin jälkeen sellainen että jopa hjkl jää vähälle käytölle tositoimissa :O (miikka)Kysymykset:Mitä mieltä olette Node.js:n uudesta kilpailijasta Denosta, josta julkaistiin juuri 1.0-versio? Mielestäni TypeScript sisäänleivottuna on kutkuttava ajatus. Toisaalta mahdollisuus importata riippuvuuksia suoraan URL-osoitteesta herättää vähän ristiriitaisia fiiliksiä.Mitä komponenttikirjastoja olette käyttäneet Reactin kanssa? Ovatko esim. React Bootstrap, React Material-UI, PrimeReact tuttuja? Tai jos ette käytä valmiita komponenttikirjastoja, miksi näin? (Joni)Reach UIAnt DesignCarbon Design SystemTere, deno vs nodejs aiheena tulevissa podcasteissa? (xvideos)Miten harjaantua css:n parissa? Tietty tekemällä oppii, mutta projektit kosahtaa aina siihen että logiikka onnistuu huomattavasti helpommin kun jonkun laatikon tyylittely (Kaikennäköstä)Minkä ikäisiä olette? (veikkaus: Antti 42, Riku 36)Millä työkalulla React-sovelluksen E2E-testit kannattaa kirjoittaa? Cyprees, Puppeteer, Playwright, vai joku muu? PS. Haluan tarroja!!! (A-P Koponen)Kuinka paljon annatte arvoa koodin luettavuudelle? Ratkaisetteko esimerkiksi usein jonkin koodausongelman ”huonommin” kuin osaisitte, jotta se olisi luettavampi? Esimerkkejä voisi olla reduce, bittien shiftailu tai vaikka se niin rakas funktionaalinen ohjelmointi. (Teemu Perämäki)The Wrong AbstractionMilloin on myöhäistä ottaa projektiin uusia isompia kirjastoja tms. mukaan? Jos olen jo huomattavan pitkällä projektissa, voinko vielä ottaa mukaan esim. tilanhallintakirjaston tai tyylikirjaston jotka vaatisivat suuria muutoksia koodiin?Onko teillä kokemuksia ison projektin uudelleenkirjoittamisesta? Milloin se on mielestänne tarpeellista? Jos on kokemusta, mitkä olivat suurimmat haasteet ja mitä tällaisessa projektissa tulisi ottaa huomioon? (Jaakko)Jakson valinnatAntti: Kaikki vanhat Nintendo-lehdetRiku: The Wire

Vuoden 2020 lopussa Reactiin esiteltiin uusi jännittävä kokeellinen ominaisuus - Zero-Bundle-Size Server Components. Komponentteja voidaan siis suorittaa osin palvelimen puolella, mutta miten tämä eroaa SSR:stä, SSG:stä ja muista kryptisistä akronyymeistä? Antti on ottanut käyttöönsä VSCodeVIM:in, ja tämän jakson kuunneltuasi otat sinäkinFollow-upHazelHow to Automatically Empty Trash in Mac OS After 30 DaysVegaanihaasteLinkitBoost Your Coding Fu With Visual Studio Code and VimVSCodeVimReactjs.org: Introducing Zero-Bundle-Size React Server ComponentsAddy Osmani: React Server ComponentsSwyx: An Annotated Guide to React Server ComponentsReact Server Components DemoJakson valinnatRiku:Queens GambitAntti:Das Boot

JavaScript täytti 25 vuotta! Neljännesvuosisadan kunniaksi Antti ja Riku muistelevat mitä kaikkea noihin vuosiin on kuulunutkaan, ja peilaavat tapahtumia omiin kokemuksiinsa. Tällä kertaa vuorossa vähän nykyhistoriaa aina vuodesta 2011 tähän päivään. Hyppää kyytiin!JavaScript 25 v!2011Ember.jsMoment.jsBrowserifyEnsimmäinen kerta kun require() toimii fronttikoodissaGruntBootstrapStylus2012TypeScriptwebpackBower2013ReactElectronGulpSublime Text 22014io.jsOikea semver, päivitetty V8FlowAtomImmutable.js2015io.js ja Node yhdistetään → Node 4ES2015 (ES6)import/exportlet, consttemplate literalsspreading, destructuringarrow functionsclasspromiseReduxVS Codenpm 3.0.0 - flat dependencies!2016left-pad un-publish messYarn, lock fileasync/awaitAngular vs. AngularJS2017Prettier2018React hooks2019Svelte 32020DenoVue 3Jakson valinnatRiku:Mozi Dual Display Desk StandAntti:DaisyDisk

Mitä on funktionaalinen ohjelmointi, ja millä tavalla sitä voisi hyödyntää webbisovelluksissa? Antti on lähtenyt testaamaan asiaa Webbidevauksen uuden webbisivun kanssa. Mitä mieltä Riku ja Antti ovat funktionaalisen lähestymisen hyödyllisyydestä webbimaailmassa?LinkitpurifyHaskell MOOCLearn You a Haskellwebbidevaus-next.netlify.appProfessor Frisby's Mostly Adequate Guide to Functional ProgrammingRamda & @types/ramdaRemeda.jshttps://github.com/webbidevaus/webbidevaus-next/blob/main/util/episodes.tsJakson valinnatRiku:Remeda.jsSDKMANApple Airpods ProAntti:Professor Frisby's Mostly Adequate Guide to Functional ProgrammingFunctional-Light JavaScript Frontend MastersissaFunctional-Light -kirjaOta yhteyttä!@webbidevauswebbidevaus.fi

Riku ja Antti käyvät läpi viime viikkojen uudet löydökset ja kokemuksia jaetaan mm. Vue 3:sta, Chakra UI:sta ja Reactin formikirjastoista. Käsittelyssä myös tyyppien vs. koodin generointi -muna-kana-ongelma.LinkitHeadless UIVue 3Composition APICSS-selektorin parsinta TypeScript-tyypeilläChakra UIGraphQL-CodegenApollo ClientFormikreact-hook-formTemplate literal types -TypeScript-PRIntroducing the New JSX Transformgithub.com/tc39/proposal-pipeline-operatorRemeda.jsGraphQL Code GeneratorQuickTypeJakson valinnatRiku: Figma CommunityAntti: Good Sudoku

TypeScriptistä on jälleen saapunut uusi versio, mutta mitä uutta se varsinaisesti tarjoaa? Tässä jaksossa käydään läpi uuden version ominaisuudet, ja kurkataan nopeasti myös TypeScriptin tulevaisuuteen.LinkitBetterTouchToolhaskell.mooc.fiAVIF has landedFluid FrameworkPanic Nova -twiittiTypeScript 4.0TypeScript Deep DiveTypeScript: Variadic Tuple Types PreviewTemplate literal types and mapped type 'as' clausesJakson valinnatRiku: SeinfeldAntti:Tony Hawk's Pro Skater 1+2Poolside.fm

KysymyksetOlen lähiaikoina hakemassa ensimmäistä IT-alan työtäni ja kaipaan neuvoja. Miten ohjelmoija laatii CVn? Millaisia suosittelijoita kannattaa pyytää? Millaisia työhaastattelut on? (Salvador Dali)Miksi suositte Reactia yli esim. Angularin ja Vuen ja milloin käyttäisitte edellämainittuja mielummin kuin Reactia?Onko Gitin osaaminen ihan välttämätöntä? Osaan siis käyttää Githubia sujuvasti mutta itse Git lukuisine kryptisine kommentoineen on lähes kokonaan hämärän peitossa. Eijaksaonkopakko? (Sudo apt remove git)Oh shit, git! (Dangit, git!)Atlassian GitRikun useiten käytetyt Git-komennot viimeiseltä 6 kuukaudeltagit status (x772)git push (x207)git add (x204)git commit -m (x200)git checkout (x147)git pull (x143)git diff (x101)git add -p (x84)git checkout -b (x76)git checkout (x52)git push --no-verify (x37)Oletteko olleet tiimeissä, jossa työkieli on englanti? Kuinka kovan luokan artikulaatiota ja englannin ääntämistä odotetaan yritykseltä, joka vaatii työhakemuksessaan ”must be fluent in english?” Ymmärrän ja kirjoitan englantia mielestäni hyvin, mutta sen puhuminen pistää hävettämään. (Joona)LinkitHelsinki Dev LunchGrailsHasuraApollo ClientJakson valinnatAntti:YouTube - Jason LengstorfLet's Learn Apollo Client 3!Riku:Ponzu200ml soijakastiketta2 sitruunan mehu20-30g sokeria

Mitä uutta webbikehityksen maailmassa on tapahtunut viime aikoina? Tässä jaksossa nopea katsaus niin kehitystyökaluihin kuin uusiin JavaScript ja CSS ominaisuuksiin.LinkitReact Fast refreshpmmmwh/react-refresh-webpack-pluginVSCode Dev ContainersCreate a devcontainer.json fileGithub CodespacesHasuraApollo 3PostGraphilePrismaNext.js 9.5Svelte & TypeScriptfor await...ofHow to easily read all data from a ReadableStream?Subgridhttps://gridbyexample.com/examples2/example2-1/Flexbox gapConic gradientJakson valinnatRiku: Induktioliesi/ Brave New WorldAntti: Affinity PhotoOta yhteyttä!@webbidevauswebbidevaus.fi

Kannattaako aloittelevana devaajana perehtyä moneen teknologiaan samanaikaisesti? Miten kaikille koodareille riittää töitä? Tässä jaksossa vastataan pitkästä aikaa teidän kysymyksiinne! Katsaus myös tämän vuoden Applen WWDC-tapahtumaan.KysymyksetMitä mieltä olette siitä että perehtyy näin aloittelevana devaajana moneen teknologiaan samanaikaisesti? Esim. työssä turhautuu perusnettisivujen väsäämiseen niin harrasteena ottaa sitten nettikursseja reactista mutta haluaakin rinnalle kokeilla vue:ta? Lisäksi vielä näistä johdettuja polkuja. Meneekö tässä puurot ja vellit sekaisin? LauraKannattaako Knockout.js:ää vielä käyttää, vai onko jo täysin vanhentunut? Vai kannattaisiko siirtyä React.js:n pariin? Miksi? Devi NikoMiten kaikille koodareille riittää töitä ? EmilioLinkithttps://developer.apple.com/safari/extensions/https://developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-noteshttps://developer.apple.com/app-clips/https://www.macrumors.com/2020/06/22/webp-safari-14/https://www.honeycode.aws/Jakson valinnat:Antti: Tikkataulu!Riku: War Stories

Nyt ollaan

End-to-end testaus Cypressillä on kivaa aina niin kauan kun asiat menevät putkeen. Mutta aina (koskaan) näin ei ole. Tässä jaksossa sekoittuu sopivassa suhteessa Antin CD-kokoelmien nostalgisointi ja armottoman tiukka tekkianalyysi. Onko Snowpack 2.0 seuraava Create React App, ja onko buildityökalulla / devausympäristöllä enää mitään merkitystä? Onko jo aika jollekin uudelle?LinkitHTML5 BoilerplateCypressSnowpack 2.0Jakson valinnatAnttiVegaaninen soijarouhelasagneOld Man's WarRikuFlowers for AlgernonOta yhteyttä!@webbidevauswebbidevaus.fi

Pojat jutustelevat sivuprojekteistaan, jotka ovat erilaisuudestaan huolimatta yllättävän samanlaisia.LinkitNotionDUN DUN DUNTechCrunch - GitHub gets a built-in IDE with Codespaces, discussion forums and moreAirtableNetlify CMSJakson valinnatThe Imagineering StoryBillionsOta yhteyttä!@webbidevauswebbidevaus.fi

Webbidevaus jää hetkiseksi tauolle. Pojat esittävät kootut selitykset ja pyytävät teitä, arvon kuulijat, kommentoimaan ja osallistumaan!Ota yhteyttä!@webbidevauswebbidevaus.fi

Millaista tekkiä eräät Suomen suosituimmista nettisivuista, is.fi ja hs.fi, pitävät sisällään? Jakson vieraana webbiperfin asiantuntijanakin tunnettu Olavi Haapala, joka on ollut mukana koodaamassa sivujen uutta versiota.Olavi Haapalaolavihaapala.fitechweeklies.futurice.comiltametsuri.fiLinkit@size-limit/fileSpeedCurveElm Pages11tyJakson valinnatRiku: Office SpaceAntti: Oma ääni -podcastOlavi: Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19)Ota yhteyttä!@webbidevauswebbidevaus.fi

Mikä on vaikein ohjelmointiin liittyvä tekninen asia, jonka olette joutuneet opettelemaan? Kasuaalia rupattelua Rikun Sonos + Spotify + Ikea Trådfri - projektista, Elmistä, isoihin koodiprojekteihin perehtymisestä ja japanilaisista limuista.LinkitWhy I’m leaving Elmnode-sonos-http-apiReasonSpotify APIIkea TrådfriJakso 37 - Elisa Heikura, Koodarikuiskaaja!Tips to eating orangesKysymyksetHei Riku ja Antti. Ei mikään kysymys, mutta halusin kiittää - teidän podcastien ansiosta opin miten syödä appelsiinejä. Kiitos. Elämäni on nyt paremmassa kunnossa koska tiedän miten appelsiinejä syödään. (Anonyymi 1)Edellisessä jaksossa totesitte prettierin hyödyistä jotain tyyliin, että se standardisoi koodin ulkoasun ja on hyvä, että on joku objektiivinen totuus, minkä mukaan mennään. Kaikilla kuitenkin on joku oma näkemys, niin on parempi, jos vaan pakotetaan kaikki samaan formaattiin, niin siitä ei tarvitse vääntää tai edes välittää. Sitten kuitenkin naureskelitte, että kuka nyt css-propertyt aakkostaa. C'moon jätkät. Eikös tuohon päde ihan samat syyt laittaa css aakkosjärjestykseen kuin prettierin käytön kohdalla? (Aakkoset 4eva)Mikä on vaikein ohjelmointiin liittyvä tekninen asia, jonka olette joutuneet opettelemaan? (sudo apt remove sudoTässä tulee ekan kyssärin jälkeen pari bonusta, jotka voi olla ohjelman flown kannalta parempi lukea lähempänä Jackson valintoja, kun juttu on jo lähtenyt tangentille. Te kun ootte molemmat lähteneet isosta konsulttitalosta "lähiaikoina", minkälaiset tekijät vaikutti päätöksiinne laittaa verokorttitulostin kuumaksi? Ja kun molemmat ilmesesti jatkoitte tekemään konsulttihommia toisaalle, niin harkitsitteko tuotehommia missään välissä? (Rintti ja Aku) Bonus 1: Mitä DAW:ia Antti käyttää musisoinnissa? Saataisko nyt vanhaa joulujingleä vastaava tiivistunnelmainen karanteenijingle? Bonus 2: Tekikö Riku Japanissa ollessaan rankingia paikalisille limuille? Mikä oli lemppari?Jakson valinnatAntti: tldr (webbiclientti: https://tldr.ostera.io/)Riku: 2 cents

LinkitBret Victor - Inventing on PrincipleOverreacted: A Complete Guide to useEffectHow to fetch data with React Hooks?Awesome React Hookszeit - swruseHooks(

Pitkästä aikaa myös webbidevaus.fi nauhoitetaan etänä

Kuuntele jakso ja testaa oletko luova näpertelijä, ongelmanratkaisija, vain töissä täällä vai koodi connoisseur

Ei hätää! Hyvin kirjoitettu koodi testaa itse itseään, vai?Kaikki ovat varmasti samaa mieltä siitä, että testaaminen on tärkeä osa ohjelmistokehitystä. Mutta kuka sitä oikeasti tekee ja miten? Tässä jaksossa perehdytään JavaScript-sovellusten testaamiseen, eri tapoihin testata ja kuumimpiin testaustyökaluihin.Testaustaidot ovat olennainen osa jokaisen ohjelmistokehittäjän työkalupakkia. Hyvin testattu koodi varmistaa nopean kehitystahdin ja hyvät yöunet koko tiimille nyt ja tulevaisuudessa.Tule mukaan Rikun järjestämään koulutukseen Tampereella 23.4.

Pelottaako Chrome DevToolsin miljoona painiketta ja ikonia? Ei hätää, tässä jaksossa käydään läpi mitä ainakin osalla niistä pystyy tekemään. Riku ja Antti listasivat itselleen hyödyllisimmät ominaisuudet ja muutaman molemmille kokonaan uuden tuttavuuden. Kurkataan Chromen lisäksi myös Firefoxiin ja ominaisuuksiin, joita vain siltä puolelta löytyy!LinkitGoogle fonts "text" attribuuttiWhat's new in DevTools (Chrome 80)Debugger statementLive expressionDOM change breakpointsFocus-within$0, $_ ja muut DevTools console utilitytChrome DevTools console.* APIDevTools dark modeCracoJakson valinnatRiku: Bald and bankruptAntti: Settings SyncOta yhteyttä!@webbidevauswebbidevaus.fi

Mitä kaikkea on hyvä tietää webbifonteista vuonna 2020? Tässä jaksossa rautainen annos webbifonttien historiaa ja katsaus tulevaisuuteen. Mitä ovat variable fontsit, voiko niitä jo käyttää ja mitä hyötyä niistä on? Miten FOUT, FOIT ja font-display vaikuttavat sivun käyttökokemukseen?LinkitCufonGooglen WOFF2-konvertteriA Comprehensive guide to font loading strategiesFont-Display - SuperchargedAxis-PraxisGoogle Fonts Early AccessGooglen variable fonts demoZach Leathermanin fonttiaiheiset jututJakson valinnatRiku: KeihäsmatkatAntti: Ikean induktiolaturiOta yhteyttä!@webbidevauswebbidevaus.fi

Webissä on liian vähän animaatioita! Miten niitä tehdään, miksi ne ovat tärkeitä ja mitä niiden käyttämisessä tulisi muistaa? Tässä jaksossa vieraana alan ekspertti Janne Kallunki.LinkitFLIPVue.js Transitionswill-changeanimate.cssWeb Animations APIVivus instantReact transition groupReact-springGreensockTailwind transition propertyJakson valinnatJanne: The HURiku: Vihreä TabascoAntti: The KeyframersOta yhteyttä!@webbidevauswebbidevaus.fi