Frontend Greatness

Frontend Greatness

By Ari-Pekka KoponenTechnology
Download on the App Store

Frontend Greatness episodes

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

    40 min
  • 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

    50 min
  • 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

    53 min
  • 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”


    49 min
  • 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/

    43 min

About Frontend Greatness

From the publisher's feed

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