Webbidevaus.fi

Mitä parikoodaus on? Entä pahamaineinen mob programming? Kuinka perustella asiakkaalle/kollegoille/pomolle, että itse asiassa 1 + 1 on enemmän kuin 2? Niko Heikkilä kertoo sinulle pari- ja porukkaohjelmoinnista kaiken, mitä siitä tarvitsee tietää. nikoheikkila.fi fosstodon.org/@nikoheikkila https://fi.linkedin.com/in/nikoheikkila Nikon linkkivinkit Kirjallisuus Software Teaming: A Mob Programming, Whole-Team Approach by Woody Zuill Code with the Wisdom of the Crowd: Get Better Together with Mob Programming by Mark Pearl Artikkelit The Costs and Benefits of Pair Programming. Cockburn, A; Williams, L. InfoQ: From Async Code Reviews to Co-Creation Patterns Gregor Riegler: Solo Programming Considered Harmful Videot Dragan Stepanović: Async code reviews are choking your company’s throughput Muut Remote Mob Programming mob.sh — tool for smooth Git handover

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 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 🙏LinkitIntroduction to ElixirPhoenix FrameworkJakson valinnatAntti: Suuri keramiikkakisaRiku: 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! ☀️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