Webbidevaus.fi

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

Postilaatikkoomme on saapunut henkilökohtaisia kysymyksiä

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

Yksi komponentti projektihakemiston juuressa voi riittää yllättävän pitkälle. Mutta mitä sitten kun projektissa on 20 näkymää ja 5 hengen tiimi? Tässä jaksossa paljastetaan Webbidevauksen tarkoin varjellut reseptit suurten React-sovellusten kehittämiseen aina hakemistorakenteesta modularisointiin

Webbikehitys monimutkaistuu vuosi vuodelta, mutta samaa aikaa myös vanhat työskentelytavat palaavat aina vain uudelleen pintaan. Onko nykyinen SPA-malli jo pohjimmiltaan vioittunut ajatusmalli sovellusten rakentamiseen?KysymyksetKun urheilija on lomalla, hän pitää taukoa lajiharjoittelusta. Kun jäin itse lomalle, aloin heti koodata yhtä pitkään odottanutta harrasteprojektia. Jäin miettimään, että pitäiskö? Olisiko aivoille parempaa kuitenkin tehdä jotain muuta? (@mrjaamo)Olen ollut havaitsenivani, että keskustelu ns. web-kehittäjäscenessä on ottanut askeleita kohti paluuta perusasioihin. Muutaman vuoden takaisen framework-kisan päätyttyä muutaman isomman voittoon (ehkä? -kö) on alkanut kuulua entistä enemmän ääniä sen puolesta, että tekisimme webiä niin kuin ennen vanhaa 1.0 -aikoihin, ilman SPA-frameworkia tai korkeintaan kevyin Javascript-lisukkein. Toki uusin työkaluin, mutta mallilla, jossa serveri pääosin rendaa CSS:ää ja HTML:ää. (esimerkkiä keskustelusta https://twitter.com/dan_abramov/status/125961415

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.honeycod

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

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