Frontend Greatness

Follow Frontend Greatness
Share on
Copy link to clipboard

A podcast that helps frontend developers go from good to great. Hosted by Ari Koponen.

Ari-Pekka Koponen


    • Aug 30, 2021 LATEST EPISODE
    • infrequent NEW EPISODES
    • 46m AVG DURATION
    • 15 EPISODES


    Search for episodes from Frontend Greatness with a specific topic:

    Latest episodes from Frontend Greatness

    Automated Visual Testing With Kimmo Brunfeldt

    Play Episode Listen Later Aug 30, 2021 47:33


    Kimmo Brunfeldt a software developer and an entrepreneur joins Ari Koponen on the Frontend Greatness podcast to talk about "Automated Visual Testing." In this episode: - Common challenges with visual testing - Tools for visual testing - Discussion on if visual testing worth all the trouble --- Episode Notes Social - Kimmo on Twitter: https://twitter.com/kimmobrunfeldt - Ari on Twitter: https://twitter.com/apkoponen Show Notes - Swarmia: https://www.swarmia.com/ - PhantomJS: https://phantomjs.org/ - CasperJS: https://github.com/casperjs/casperjs - SlimerJS: https://github.com/laurentj/slimerjs - Puppeteer: https://github.com/puppeteer/puppeteer - Playwright: https://github.com/microsoft/playwright - Squint: https://github.com/kimmobrunfeldt/squint - Cypress: https://www.cypress.io/ - Percy: https://percy.io/ - Chromatic: https://www.chromatic.com/ Kimmo's Recommendations - Frontend Focus: https://frontendfoc.us/ - Dan Abramov's blog: https://overreacted.io/

    Cross-Platform Frontend Development with Sallar

    Play Episode Listen Later Jul 28, 2021 45:26


    Sallar, an independent software engineer and the co-creator of the open-source Buttercup password manager joins Ari Koponen on the Frontend Greatness podcast to talk about "Cross-Platform Frontend Development." In this episode: - What should every frontend developer know about cross-platform frontend development? - Pro-tips for cross-platform frontend development - Common cross-platform platform myths busted --- Episode Notes Social - Sallar on Twitter: https://twitter.com/sallar - Buttercup on Twitter: https://twitter.com/buttercup_pw - Ari on Twitter: https://twitter.com/apkoponen Show Notes - "Building the Future of Our Desktop Apps" from Spotify Engineering: https://engineering.atspotify.com/2021/04/07/building-the-future-of-our-desktop-apps/ - Electron.js: Ehttps://www.electronjs.org/ - Expo: https://expo.dev/ - React Native: https://reactnative.dev/ - Flutter: https://flutter.dev/ Sallar's Recommendations - Read timeless books - Just build something all by yourself

    DX is UX With Evyatar

    Play Episode Listen Later Jun 16, 2021 47:02


    Evyatar, a Front End Engineer at Facebook and the author of the Vest validations framework joins Ari Koponen on the Frontend Greatness podcast to talk about "DX is UX." In this episode: - Why developer experience and ergonomics matter? - How you build tools and libraries that developers love to use? - How are DX and UX principles similar. --- Episode Notes Social - Evyatar's Twitter: https://twitter.com/AlushEvyatar - Ari's Twitter: https://twitter.com/apkoponen Show Notes - Evyatar's blog post on DX: https://medium.com/fiverr-engineering/creating-apis-for-the-human-developer-c0f51a6d9366 - Vest: https://github.com/ealush/vest - Yup: https://github.com/jquense/yup - Zod: https://github.com/colinhacks/zod - Joi: https://github.com/sideway/joi Evyatar's Recommendations - "The Design of Everyday Things" by Donald A. Norman: https://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/1452654123 - Christoph Nakazawa's blog: https://cpojer.net/

    ux vest dx zod joi everyday things front end engineer evyatar donald a norman
    Better Web Typography with Oliver Schöndorfer

    Play Episode Listen Later May 27, 2021 47:26


    Oliver Schöndorfer, a UI Designer and Typographer, who helps developers improve their websites through pimped typography joins Ari Koponen on the Frontend Greatness podcast to talk about "Better Web Typography." Oliver's YouTube Channel “Pimp my Type”: http://pimpmytype.com Newsletter with weekly font recommendations for web and app design: https://pimpmytype.com/newsletter In this episode: - How can you make typography on the web better? - Choosing fonts for your next web project - Using variable fonts to improve typography and performance --- Episode Notes Social - Oliver's Twitter: https://twitter.com/glyphe - Pimp My Type: http://pimpmytype.com - Ari's Twitter: https://twitter.com/apkoponen Show Notes - Web Almanac - Fonts: https://almanac.httparchive.org/en/2020/fonts/ - "5 steps to faster web fonts": https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/ - Prevent Faux Fonts: https://alistapart.com/article/say-no-to-faux-bold/ - Avoid Google Fonts: https://wicki.io/posts/2020-11-goodbye-google-fonts/ - Rasmus Anderssons (@rsms): https://twitter.com/rsms - The "Il1 ag" rule. Oliver's Recommendations - Zack Leatherman: https://twitter.com/zachleat - "Web Typography" by Richard Rutter: https://www.amazon.co.uk/Web-Typography-designing-typography-responsive/dp/099566420X - Typography.guru on YouTube: https://www.youtube.com/typographyguru

    newsletter ui designer typographer oliver sch il1 web typography richard rutter
    From Redux to XState with David Khourshid

    Play Episode Listen Later May 5, 2021 39:18


    David Khourshid, the creator of XState, a pianist, and a software developer, joins Ari Koponen on the Frontend Greatness podcast to talk about "From Redux to XState." In this episode: - Which parts of Redux you can replace with XState? - Can/should you manage all your state with state machines? - How to persuade your colleagues to use state machines? --- Episode Notes Social - David's Twitter: https://twitter.com/DavidKPiano - Ari's Twitter: https://twitter.com/apkoponen Show Notes - XState: https://xstate.js.org/ - XState Visualizer: https://xstate.js.org/viz/ - XState Catalogue: https://xstate-catalogue.com - "Video with Rainbow colored shirts": https://youtu.be/7erJ1DV_Tlo - Emmet: https://emmet.io/ David's Recommendations - Statecharts.dev: https://statecharts.dev/ - Matt Pocock: https://twitter.com/mpocock1 - XState Discord: https://discord.gg/xstate - Keyframers Youtube: https://youtube.com/keyframers - Constructing the User Interface with Statecharts: https://www.goodreads.com/book/show/4589003

    video rainbow redux constructing user interfaces xstate david khourshid statecharts
    Building an Online Network of Peers with Chris Bongers

    Play Episode Listen Later Apr 21, 2021 40:40


    Chris Bongers is a digital nomad and the author of daily-dev-tips.com joins A-P Koponen on the Frontend Greatness podcast to talk about "Building an Online Network of Peers." In this episode: - How Christ ended building a network of peers. - Why a network of peer outside your current company is so valuable. - How to find and connect with peers online. --- This episode is sponsored by Supermetrics. They are hiring Senior React Developers: https://careers.supermetrics.com/jobs/1070468-senior-react-developer --- Episode Notes Social - Chris' Twitter: https://twitter.com/DailyDevTips1 - A-P's Twitter: https://twitter.com/apkoponen Show Notes - Daily Dev Tips Blog: https://daily-dev-tips.com/ - Blogging for Devs: https://bloggingfordevs.com/ - Reactiflux: https://www.reactiflux.com/ Chris' Recommendations - Hacktoberfest: https://hacktoberfest.digitalocean.com/ - Hackathons - Instead of consuming, interact with content. - daily.dev: http://daily.dev/ - Hashnode: https://hashnode.com/ - Dev.to: http://dev.to/ - freeCodeCamp: https://www.freecodecamp.org/ - The Odin Project: https://www.theodinproject.com/

    Building Complex Forms with Erik Rasmussen

    Play Episode Listen Later Apr 7, 2021 55:25


    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

    Sharing Code using NPM Libraries with Eemeli Aro

    Play Episode Listen Later Mar 24, 2021 50:44


    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.

    Overcoming adversity using “Sisu” with Jamon Holmgren

    Play Episode Listen Later Mar 10, 2021 53:54


    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/

    Layouts and Spacing with Mark Dalgleish - Part 1/2

    Play Episode Listen Later Feb 24, 2021 42:21


    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.

    Layouts and Spacing with Mark Dalgleish - Part 2/2

    Play Episode Listen Later Feb 24, 2021 39:52


    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.

    Content Management with Jake Dohm

    Play Episode Listen Later Feb 10, 2021 49:07


    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

    recommendations wordpress sanity cms good work wix content management contentful dohm content management system cms prismic craft cms james q quick statamic
    Rendering on the Server with Fredrik Höglund

    Play Episode Listen Later Jan 28, 2021 52:40


    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

    Automate All the Things with James Elderfield

    Play Episode Listen Later Jan 14, 2021 48:48


    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”

    Folder Structure with Sergey Bekharsky

    Play Episode Listen Later Dec 28, 2020 42:05


    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/

    Claim Frontend Greatness

    In order to claim this podcast we'll send an email to with a verification link. Simply click the link and you will be able to edit tags, request a refresh, and other features to take control of your podcast page!

    Claim Cancel