Skip to main content
Frontend Greatness

Frontend Greatness

By Ari-Pekka Koponen
A podcast that helps frontend developers go from good to great. Hosted by A-P Koponen.
Listen on
Where to listen
Apple Podcasts Logo

Apple Podcasts

Breaker Logo

Breaker

Castbox Logo

Castbox

Google Podcasts Logo

Google Podcasts

Overcast Logo

Overcast

Pocket Casts Logo

Pocket Casts

RadioPublic Logo

RadioPublic

Spotify Logo

Spotify

Currently playing episode

Overcoming adversity using “Sisu” with Jamon Holmgren

Frontend Greatness

1x
Building Complex Forms with Erik Rasmussen
Erik Rasmussen, the author of two popular form libraries, Redux Form and Final Form, joins A-P Koponen on the Frontend Greatness podcast to talk about "Building Complex Forms." In this episode: - What every frontend developer should know about building forms. - How Redux Form led to the birth of Final Form and what issues it solves. - Form validation and performance optimization tips. --- Episode Notes Social - Erik's Twitter: https://twitter.com/erikras - A-P's Twitter: https://twitter.com/apkoponen Show Notes - Erik's website: https://erikras.com/ - Erik's "Happy Hour Podcast": https://twitter.com/happyhourdotfm - Final Form: https://final-form.org/ - Redux Form: https://redux-form.com/ - React Hook Form: https://react-hook-form.com/ - Formik: https://formik.org/ - Yup: https://github.com/jquense/yup/ - React Select: https://react-select.com/ - Final Form examples: https://final-form.org/docs/react-final-form/examples/ Erik's Recommendations - Kent C. Dodds: https://twitter.com/kentcdodds - Josh W. Comeau: https://twitter.com/JoshWComeau - David K: https://twitter.com/DavidKPiano - Harry Wolff: https://www.youtube.com/channel/UCgdeMp2ZBnovi12THmLc47g
55:25
April 7, 2021
Sharing Code using NPM Libraries with Eemeli Aro
Eemeli Aro, an open-source developer and a Software Developer at Vincit, joins A-P Koponen on the Frontend Greatness podcast to talk about "Sharing Code using NPM Libraries." In this episode: - How to make an impact by developing Open Source libraries - Pro tips for sharing code within your own organization when using NPM libraries - How to get started with building NPM libraries --- Episode Notes Social - Eemeli's Twitter: https://twitter.com/Eemeli_Aro - A-P's Twitter: https://twitter.com/apkoponen Show Notes - Vincit: https://www.vincit.fi/en/ - Github Packages: https://github.com/features/packages - JFrog Artifactory: https://jfrog.com/artifactory/ - npm-pack: https://docs.npmjs.com/cli/v7/commands/npm-pack - Conventional Commits: https://www.conventionalcommits.org/ - standard-version: https://github.com/conventional-changelog/standard-version - Create your own NPM card: https://natterstefan.medium.com/how-to-create-your-personal-npm-business-card-816dfc66ca8 - Good First Issue: https://goodfirstissue.dev/ Eemeli's Recommendations - Read other people's code: Pick a few libraries with great documentation and see how they're built.
50:45
March 24, 2021
Overcoming adversity using “Sisu” with Jamon Holmgren
Jamon Holmgren, the co-founder Infinite Red and the maintainer of mobx-state-tree, joins A-P Koponen on the Frontend Greatness podcast to talk about "Overcoming adversity using “Sisu”." In this episode: - What is "Sisu"? - What kind of adversities can you face as a developer? - How can you learn to better deal with adversity? - Learning to know what motivates you. - Learning to ask for help from others. --- Episode Notes Social - Jamon's Twitter: https://twitter.com/jamonholmgren - A-P's Twitter: https://twitter.com/apkoponen Show Notes - Infinite Red: https://infinite.red/ - Jamon's tractor: https://twitter.com/jamonholmgren/status/1366201301244149762 - Lasse Virén in Münich Olympics 1972: https://www.riemurasia.net/video/10000-metrin-finaali-Munchenin-kesaolympialaisissa-1972/208200 - 16 Basic Desires: https://psychology.wikia.org/wiki/16_basic_desires_theory_of_motivation - Self-determination theory: https://en.wikipedia.org/wiki/Self-determination_theory Jamon's Recommendations - "The Culture Code" by Daniel Coyle: http://danielcoyle.com/the-culture-code/
53:55
March 10, 2021
Layouts and Spacing with Mark Dalgleish - Part 1/2
Mark Dalgleish, the co-author of CSS-modules, who currently works at SEEK building Playroom and frontends with the Braid Design System, joins A-P Koponen on the Frontend Greatness podcast to talk about "Layouts and Spacing". The episode is split into two parts for easier listenability. In part 1: - What is the goal of a good layout and spacing system? - Best practices for layouts and spacing. In Part 2: - Layout Components you should use in your everyday work. - How to get started with layout components and consistent spacing. - Mark's thoughts on going from good to great as a frontend developer. --- Episode Notes Social - Mark's Twitter: https://twitter.com/markdalgleish - A-P's Twitter: https://twitter.com/apkoponen Show Notes - Capsize: https://seek-oss.github.io/capsize/ - Braid Design System: https://seek-oss.github.io/braid-design-system/ - "Margin is like side-effect" -tweet: https://twitter.com/wongmjane/status/1242370883320049664 - Tailwind's Spacing Scale: https://tailwindcss.com/docs/customizing-spacing - Mark's talk on design best practices: https://www.youtube.com/watch?v=xxbc3wAztl0 - Chakra UI's layout components: https://chakra-ui.com/docs/layout/aspect-ratio Mark's Recommendations - Build something in the open. - Talk in a meetup or conference.
42:22
February 24, 2021
Layouts and Spacing with Mark Dalgleish - Part 2/2
Mark Dalgleish, the co-author of CSS-modules, who currently works at SEEK building Playroom and frontends with the Braid Design System, joins A-P Koponen on the Frontend Greatness podcast to talk about "Layouts and Spacing". The episode is split into two parts for easier listenability. In part 1: - What is the goal of a good layout and spacing system? - Best practices for layouts and spacing. In Part 2: - Layout Components you should use in your everyday work. - How to get started with layout components and consistent spacing. - Mark's thoughts on going from good to great as a frontend developer. --- Episode Notes Social - Mark's Twitter: https://twitter.com/markdalgleish - A-P's Twitter: https://twitter.com/apkoponen Show Notes - Capsize: https://seek-oss.github.io/capsize/ - Braid Design System: https://seek-oss.github.io/braid-design-system/ - "Margin is like side-effect" -tweet: https://twitter.com/wongmjane/status/1242370883320049664 - Tailwind's Spacing Scale: https://tailwindcss.com/docs/customizing-spacing - Mark's talk on design best practices: https://www.youtube.com/watch?v=xxbc3wAztl0 - Chakra UI's layout components: https://chakra-ui.com/docs/layout/aspect-ratio Mark's Recommendations - Build something in the open. - Talk in a meetup or conference.
39:52
February 24, 2021
Content Management with Jake Dohm
Jake Dohm, a frontend developer at Good Work, who is building his own CMS, joins A-P Koponen on the Frontend Greatness podcast to talk about "Content Management". In this episode: - What should every frontend developer know about content management? - What makes a good Content Management System (CMS) different from a basic admin panel? - What do you need to consider, when choosing a CMS? - How to get started with content management as a frontend developer? --- Episode Notes Social - Jake's Twitter: https://twitter.com/jakedohm - A-P's Twitter: https://twitter.com/apkoponen Show Notes - WordPress.org: https://wordpress.org/ - WordPress.com: https://wordpress.com/ - Wix: https://www.wix.com/ - Craft CMS: https://craftcms.com/ - Contentful: https://www.contentful.com/ - Prismic: https://prismic.io/ - Sanity: https://www.sanity.io/ - Statamic: https://statamic.com/ - KeyStoneJS: https://www.keystonejs.com/ Jake's Recommendations - egghead.io: https://egghead.io/ - James Q Quick: https://www.youtube.com/channel/UC-T8W79DN6PBnzomelvqJYw - Ryan Chenkie: https://www.youtube.com/c/RyanChenkie/videos - Sanity's YouTube channel: https://www.youtube.com/channel/UCGz69JwGRptteFAaX8hSKCQ - Sarah Kapehe Sevilleja: https://www.youtube.com/c/Kapehe
49:08
February 10, 2021
Rendering on the Server with Fredrik Höglund
Fredrik Höglund, the author of two React Server-Side Rendering libraries and a Frontend Lead at PriceRunner joins A-P Koponen on the Frontend Greatness podcast to talk about "rendering on the server". In this episode: - What should every frontend developer know about rendering on the server? - What approaches there are for rendering React apps on the server? - What are React Server Components? - How are React Server Components different from Next.js SSR? - How can you render your SPA on the server? --- Episode Notes Social - Fredrik's Twitter: https://twitter.com/ephemjs - A-P's Twitter: https://twitter.com/apkoponen Show Notes - Next.js :https://nextjs.org/ - Remix: https://remix.run/features - Gatsby: https://www.gatsbyjs.com/ - RedwoodJS: https://redwoodjs.com/ - Blitz.js: https://blitzjs.com/ - React Server Components: https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html - Razzle: https://razzlejs.org/ - PriceRunner: https://www.pricerunner.com/ - Prerender.io: https://prerender.io/ - Dynamic Rendering: https://developers.google.com/search/docs/guides/dynamic-rendering Fredrik's Recommendations - Great reading on different types of rendering, not React specific: https://developers.google.com/web/updates/2019/02/rendering-on-the-web - Various resources: https://reactresources.com/topics/server-side-rendering - Learn Next.js: https://nextjs.org/learn/basics/create-nextjs-app - Official ReactDOMServer docs: https://reactjs.org/docs/react-dom-server.html - Avoid XSS vulnerabilities: https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0 Fredrik's SSR Challenge Easy - Create a Razzle app and take a look at server.js. - Razzle docs: https://razzlejs.org/ Medium - Add React Query or Redux, fetch data on the server, and hydrate that to the client. - React Query docs: https://react-query.tanstack.com/guides/ssr - Redux docs: https://redux.js.org/recipes/server-rendering Hard - Using react-router, add multiple pages, and a page-level abstraction for data fetching. - React Router docs: https://reactrouter.com/web/guides/server-rendering - How after.js does it: https://github.com/jaredpalmer/after.js/blob/master/packages/after.js/src/loadInitialProps.tsx
52:41
January 28, 2021
Automate All the Things with James Elderfield
James Elderfield, Ph.D., an award-winning automation specialist™ and a Software developer at Supermetrics joins A-P Koponen on the Frontend Greatness podcast to talk about how to "automate all the things" --- Video version: https://youtu.be/qKG0z-SH1_U --- Episode Notes Social - James' Twitter: https://twitter.com/jadelderfield - A-P's Twitter: https://twitter.com/apkoponen Show Notes - Prettier: https://prettier.io/ - Black: https://black.readthedocs.io/en/stable/ - ESLint: https://eslint.org/ - SonarQube: https://www.sonarqube.org/ - Betterer: https://github.com/phenomnomnominal/betterer - Full Stack Radio "Typescript and Testing": https://fullstackradio.com/144 - jscodeshift (JavaScript or TypeScript codemods): https://github.com/facebook/jscodeshift - XKCD "Automation": https://xkcd.com/1319/ - "Game of Life": https://refactoringui.com/book/ James' Recommendations Use your Google-fu to find good articles and prior-art: - “X getting started" - “X quick start” - “X best practices”
48:49
January 14, 2021
Folder Structure with Sergey Bekharsky
Sergey Bekharsky,  the founder of "HTML Shit" and a Senior JavaScript developer from Supermetrics joins A-P Koponen on the Frontend Greatness podcast to talk about "Folder Structure" --- Video version: https://www.youtube.com/watch?v=v7dsfjXD7Dw --- Episode Notes Social - Sergey's Twitter account: https://twitter.com/bekharsky - Sergey's "HTML Shit"  Telegram (in Russian): https://t.me/htmlshit - A-P's Twitter: https://twitter.com/apkoponen Show Notes - "React Folder Structure in 5 Steps" by Robin Wieruch: https://www.robinwieruch.de/react-folder-structure - "move files around until it feels right" by Dan Abramov https://react-file-structure.surge.sh/ - Feature slices: https://sova.dev/application-structure/ - Atomic Design by Brad Frost: https://atomicdesign.bradfrost.com/ Sergey's Recommendations - Lea Verou's site: https://lea.verou.me/ - Web.dev: https://web.dev/ - Kent C. Dodds site: https://kentcdodds.com/
42:06
December 28, 2020