Codesplitters Podcast
By Poul Hansen, Kevin Andries and Mikkel Rom
Codesplitters PodcastNov 25, 2022
21: Web apps in safari, native CSS nesting and starting out with Nuxt
This episode weβre back with some exciting Safari news after Apples WWDC.
We also look into native CSS nesting, which is almost available in all evergreen browsers!
To wrap it all up we discuss using Nuxt for the very first time.
20: Exciting WebKit news and the AI uprising
This episode we go over some exciting new things coming to WebKit.
We also discuss our takes and experiences with AI tools such as chatGPT, Github Copilot and more.
Links:
19: Open source & communities with Lars Brink
Today we talk about getting into open source and building communities with our guest, Lars Brink.
Links:
18: PostCSS vs SASS
Today we discuss the pros and cons of both PostCSS and SASS, and if SASS is still needed today.
Links:
https://postcss.org/
https://www.postcss.parts/
https://github.com/postcss/autoprefixer
https://sass-lang.com/
17: Modernising the Umbraco Backoffice with Web Components and Lit - with Filip Bech
Today we invited Filip Bech, CTO at Umbraco, on the show to talk about the Umbraco CMS, how to go headless, Web Components libraries and frameworks.
Filip also shares some of the thoughts behind the modernisation of the Umbraco backoffice where they are using an API-First approach going from AngularJS to Lit.
π Links:
https://umbraco.com/
https://github.com/umbraco/Umbraco.UI
https://lit.dev/
https://vitejs.dev/
https://umbraco.com/products/umbraco-heartcore/
https://angularjs.org/
https://codesplitterspodcast.com/episodes/11-technology-throwbacks-a-tribute-to-angularjs-and-jquery/
https://twitter.com/Filipbech
https://twitter.com/Umbraco
16: UX and frontend collaboration with Thomas Hjortsberg
Thomas Hjortsberg is a good friend and ex-colleague of ours. He joins us to talk about collaboration between UX and frontend, and shares his wise words and war-stories based on his many years of UX experience.
15: Fig, Bun, dialog-element, :readonly gotchas and bookmarking strategies π
In this episode we share a few nice tools, extensions and gotchas with each other. We also ended up talking about how we like to organize our bookmarks.
π Links:
- Fig.io
- Bun is a fast all-in-one JavaScript runtime
- Todo Tree extension for VS Code
- Webstorm
- Dialog
- :readonly
- Jest todo: https://jestjs.io/docs/api#testtodoname - example: it.todo("should do this thing")
- Cypress.io
- Playwright.dev
14: Dogs, Safari, Vue/Nuxt, Histoire and Angular 14
We talk about Mikkels new puppy and some other dog-talk. Once again we discuss cool new features in Safari, such as container queries and subgrid, etc.
We also talk about updates in Vue, Nuxt and Angular 14.
There is also a new story-tool in town - Histoire.
π Links:
https://developer.apple.com/documentation/safari-release-notes/safari-16-release-notes
https://blog.vuejs.org/posts/vue-2-7-naruto.html
https://histoire.dev/
https://blog.angular.io/angular-v14-is-now-available-391a6db736af
https://storybook.js.org/showcase/
https://tailwindui.com/
https://astro.build
https://www.patterns.dev/posts/islands-architecture/
https://qwik.builder.io/
https://remix.run
13: Pizza, new Safari releases, dialog-element, :focus-visible, optional chaining and polyfills
This time we talk about our passion for homemade pizza, newly released Safari features, the element, :focus-visible, optional chaining and polyfills.
π Links:
Ooni pizza ovens: https://eu.ooni.com/
Safari releases: https://developer.apple.com/documentation/safari-release-notes
Dialog element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
:focus-visible: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
The Optional Chaining Operator, βModernβ Browsers, and My Mom: https://blog.jim-nielsen.com/2022/a-web-for-all/
12: Being a consultant
In this episode we step a little bit away from talking about technologies and tools, instead we talk about being a consultant. What it means and how it's different from being an in-house developer or a freelance developer. We also discuss what different constellations we have been part of and some of the nice things of being a consultant.
11: Technology throwbacks - A tribute to AngularJS and jQuery
AngularJS reached end of LTS (Long Term Support) on 31st of December 2021, so we're saying goodbye to an old friend and go back in time and talk about our first encounters with AngularJS and remember all the goods and the bads. We also talk about some other legendary tools and frameworks such as jQuery, jQuery-UI and bootstrap.
π Links:
AngularJS: https://docs.angularjs.org/misc/version-support-status
jQuery: https://jquery.com/
jQuery UI: https://jqueryui.com/
Bootstrap: https://getbootstrap.com/
Check out all our episodes on our website:
https://codesplitterspodcast.com/
Follow us on Twitter:
https://twitter.com/CodeSplitters
Poul: https://twitter.com/insanicae
Kevin: https://twitter.com/kandries89
Mikkel: https://twitter.com/mikkelrom
10: 2021 reflections
We look back at 2021 and reflect on what projects we worked on and what we learned. We also talk a bit about our plans with the podcast for 2022.
π Links:
React and web components: https://reactjs.org/docs/web-components.html
Check out all our episodes on our website: https://codesplitterspodcast.com/
Follow us on Twitter: https://twitter.com/CodeSplitters
Poul: https://twitter.com/insanicae
Kevin: https://twitter.com/kandries89
Mikkel: https://twitter.com/mikkelrom
9: Mikkels thoughts on using Tailwind and Angular
In this episode we focus on Mikkels experiences working with Angular and Tailwind, for the first time. What was weird? What was great? What was bad? Would he use those technologies again?
With Poul being the Angular expert and Kevin being the Tailwind expert, we talk about all the pros and cons and misconceptions of both Angular and Tailwind.
π Links:
Check out all our episodes on our website:
https://codesplitterspodcast.com/
Follow us on Twitter:
https://twitter.com/CodeSplitters
Poul: https://twitter.com/insanicae
Kevin: https://twitter.com/kandries89
Mikkel: https://twitter.com/mikkelrom
8: Testing from a beginners standpoint
In this episode we talk about testing. Kevin wants to learn more about testing, so Poul and Mikkel try to guide him into how to get started.
We also talk about how to sell testing, why should we spend time writing tests and the different types of tests.
π Links:
Jest
https://jestjs.io/
Testing Library
https://testing-library.com/
Testing Javascript
https://testingjavascript.com/
LightHouse
https://developers.google.com/web/tools/lighthouse
Axe
https://www.deque.com/axe/
Storybook
https://storybook.js.org/
Storybook a11y add-on
https://storybook.js.org/addons/@storybook/addon-a11y
Check out all of our episodes on our website:
https://codesplitterspodcast.com/
Follow us on Twitter:
Codesplitters: https://twitter.com/CodeSplitters
Poul: https://twitter.com/insanicae
Kevin: https://twitter.com/kandries89
Mikkel: https://twitter.com/mikkelrom
7: The fall of IE
Since IE will be retired on June 15th 2022, we're talking a bit about how it was back in the days when we had to support old IE versions. Β What does this retirement of IE mean to us as frontend developers? Β What about the UX side of the decision of dropping IE support? What problems will disappear together with the support of IE? What web features will we be able to use?
π LINKS
- "The Internet Explorer 11 desktop application will be retired on June 15, 2022"
IE retirement announcement:Β - Slack Huddle
https://slack.com/intl/en-dk/help/articles/4402059015315-Start-a-huddle-in-a-channel-or-direct-message - HTTP 203 - Is Safari the new IE?
https://http203.libsyn.com/is-safari-the-new-ie - Moving users to Microsoft Edge from Internet Explorer
https://docs.microsoft.com/da-dk/microsoft-edge/web-platform/ie-to-microsoft-edge-redirection - Browser-update
https://browser-update.org/ - shame.css
https://csswizardry.com/2013/04/shame-css/ - :focus-visible
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible - object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit - CSS Scroll Snap
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap - Flexbox gap
https://caniuse.com/flexbox-gap - WebP images
https://caniuse.com/webp - CSS Custom Properties
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties - line-clamp
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp - :is()
https://developer.mozilla.org/en-US/docs/Web/CSS/:is - :where()
https://developer.mozilla.org/en-US/docs/Web/CSS/:where - String.includes
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes - Template Literals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals - Dynamic Imports
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports
6: Modern CSS and JS we're excited about π€©
In this episode we're really excited to talk about some of the recently released web platform features. Some of them have been here for a little while, some are very new and some are still just experimental. 2021 has been a year full of new CSS features and many more are coming. We talk about what excites us the most in frontend-land and which new features solve problems we have had in the past.
- IE retirement announcement: "The Internet Explorer 11 desktop application will be retired on June 15, 2022"
- Spread operator ...
- Nullish coalescing ??
- Project FUGU
- TypeScript
- Container queries @container
Experimental flag in Chrome Canary: #enable-container-queries
CodePen demo
Ahmad Shadeed: Say Hello To CSS Container Queries
Piccalilli: Container Queries are actually coming
MDN: CSS Container Queries
web.dev: The New Responsive
Miriam Suzanne / Oddbird: Container Queries
Polyfill - :focus-visible
- :focus-within
- aspect-ratio
- gap for flexbox (and grid)
- CSS Grid
- @supports
5: Web Components, front and center
Explainer: CSS Shadow ::part and ::theme
4: Component libraries and design systems
In this episode we talk about component libraries and design systems. We talk about what they are and we share our own experiences using different tools for building component libraries such as PatternLab, Fractal and Storybook. We also share our recommendation on how to get started with this and what tool to choose. And then we of course also talk about bacon π₯
π LINKSThe benefits of component libraries and when not to use one - by Mikkel Rom
3: Utility CSS and Tailwind
In this episode we talk about utility CSS, utility-first approaches with frameworks such as Tailwind and why these could be useful to have in your styling setup or design system.
***************
π LINKSAdam Wathan on utility first CSS
https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
Tailwind
https://tailwindcss.com/
Tailwind cheat sheet
https://nerdcave.com/tailwind-cheat-sheet
Tachyons
https://tachyons.io/
CSS Stats
https://cssstats.com/
ITCSS
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
BEMIT
https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/
In Defense of Utility-First CSS
https://frontstuff.io/in-defense-of-utility-first-css
Tailwind versus BEM
https://thoughtbot.com/blog/tailwind-versus-bem
2: Productivity, Working from home, Code Editor tips and the Best debugging tool
It's 2021 and we're still in pandemic lock-down so we talk about how we're handling working from home, exercising, being productive and the tools we use to be efficient.
***************
π LINKSNotion
https://www.notion.so/
Todoist
https://todoist.com/
Webstorm
https://www.jetbrains.com/webstorm/
Webstorm shortcuts
https://www.jetbrains.com/help/webstorm/mastering-keyboard-shortcuts.html
VSCode
https://code.visualstudio.com/
Peacock extension by John Papa
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)
Bracket pair colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
GitLens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Slack
https://slack.com/
MS Teams
https://www.microsoft.com/en-us/microsoft-teams/group-chat-software
Asana
https://asana.com/
1: Code-splitting
In this very first episode of Codesplitters podcast, Poul, Mikkel and Kevin start by introducing themselves and what this podcast will be about.
We talk about code-splitting; what it is, when to split and when not to split your code. We also talk about when is a good time to think about performance in the lifetime of a project. What about old jQuery code or third-party plugins. How to do code-splitting when using Webpack or when using a JS framework. What about lazy-loading JavaScript components when you need them? Can you code-split when using a CMS? ES Modules? Can you code-split CSS? What about critical CSS?
***************
π Links
Lighthouse
https://developers.google.com/web/tools/lighthouse
Code splitting in webpack
https://webpack.js.org/guides/code-splitting/
Reduce JavaScript payloads with code splitting
https://web.dev/reduce-javascript-payloads-with-code-splitting/
Route-level code splitting in Angular
https://web.dev/route-level-code-splitting-in-angular/Β
Extract critical CSS
https://web.dev/extract-critical-css/
Snowpack
https://www.snowpack.dev/
Skypack (previously Pika Package)
https://www.skypack.dev/
Webcomponents
https://www.webcomponents.org/introduction