#QuickCuppa - Thoughts on GatsbyJS, the React-based SSG framework

UI Therapy | UI Design and Development Podcast

#Tech #Arts #Graphic Design #Jake Hopking #Design #Development #Web Design #Web Development #Frontend #User Interface #Programming #Technology

36:51

Traditional banks often lack personalized service, and local businesses struggle to find true partnership in financial institutions. Meanwhile, higher education faces scrutiny over relevance and ROI in a world where information is nearly free. Harry Allen helped launch Studio Bank to blend technology with high-touch service, fueled by community investment. At Belmont, he's applying the same entrepreneurial mindset to modernize university operations and embed practical learning experiences, like a one-of-a-kind partnership with Dolly Parton, into academia. In this episode, Harry L. Allen, co-founder of Studio Bank and now CFO at Belmont University, unpacks the bold vision behind launching a community-first bank in a city dominated by financial giants. He shares the leadership lessons that shaped his journey, how to lead through crisis, and why mentorship is the key to filling today's leadership vacuum. Key Takeaways Leveraging both financial and social capital creates a unique, community-first banking model. High-tech doesn't mean low-touch, Studio Bank fused innovation with personal relationships. Leadership means showing up, especially during crisis. Universities must shift from being information hubs to delivering real-world experience. Succession and mentorship are vital to cultivating the next generation of leaders. Chapters 00:00 Introduction to Harry L. Allen 01:49 The Birth of Studio Bank 04:29 Leveraging Technology in Community Banking 07:25 The Courage to Start a New Venture 10:37 Leadership Challenges in High Growth 13:02 Leading Through Crisis: The COVID Experience 17:55 Transitioning from Banking to Education 21:16 The Role of Leadership in Higher Education 25:16 Adapting to Challenges in Higher Education 30:04 The Leadership Vacuum in Society 33:17 Advice for Emerging Leaders 35:21 The American Dream and Community Impact No Limit Leadership is the go-to podcast for growth-minded executives, middle managers, and team leaders who want more than surface-level leadership advice. Hosted by executive coach and former Special Forces commander Sean Patton, this show dives deep into modern leadership, self-leadership, and the real-world strategies that build high-performing teams. Whether you're focused on leadership development, building a coaching culture, improving leadership communication, or strengthening team accountability, each episode equips you with actionable insights to unlock leadership potential across your organization. From designing onboarding systems that retain talent to asking better questions that drive clarity and impact, No Limit Leadership helps you lead yourself first so you can lead others better. If you're ready to create a culture of ownership, resilience, and results, this leadership podcast is for you.…

5 years ago 32:20

MP3•Episode home

UIT 5: In this week's episode I share my thoughts on the use of GatsbyJS and whether I feel it's a viable static site generator framework.
What are static sites?
Static sites have been around for a very long time, and realistically are the original website: simply HTML, CSS, and JavaScript. They are not rendered during runtime; there is no server-side code, no database, etc.
What’s a static site generator?
It’s a tool that generates static sites whenever you decide to run a build on your code base.
Contrast this to typical javascript frameworks and libraries, these usually generate HTML content on the client side during runtime.
How is this different from server-side rendering? The primary difference is that there is no server-side code. So, unlike a framework such as Django, Gatsby does not render anything on the server when a request is made. Everything is generated at the build time of the application.
A few benefits of a static site are: speed, the simplest infrastructure, search engine optimization, and security.
GatsbyJS
“Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps”

Built on top of ReactJS
GraphQL for data
Uses any source for content; I use MDX (JSX in Markdown)

Pros

Love React, writing components is a joy.
Because it’s built on ReactJS has access to a huge ecosystem of packages.
...

Full show notes available at https://uitherapy.fm/episodes/5/
Links

Free Stickers: https://uitherapy.fm/journal/free-stickers/
GatsbyJS: https://www.gatsbyjs.org/
GraphQL: https://graphql.org/
Static web page: https://en.wikipedia.org/wiki/Static_web_page
JSX: https://reactjs.org/docs/introducing-jsx.html
MDX: https://mdxjs.com/
hopking.io: https://hopking.io/
Django: https://www.djangoproject.com/
Wagtail CMS: https://wagtail.io/
Django-graphene: https://docs.graphene-python.org/projects/django/en/latest/

Support the show

8 episodes

#QuickCuppa - Thoughts on GatsbyJS, the React-based SSG framework

UI Therapy | UI Design and Development Podcast

published 5 years ago

MP3•Episode home

Built on top of ReactJS
GraphQL for data
Uses any source for content; I use MDX (JSX in Markdown)

Pros

Love React, writing components is a joy.
Because it’s built on ReactJS has access to a huge ecosystem of packages.
...

Full show notes available at https://uitherapy.fm/episodes/5/
Links

Free Stickers: https://uitherapy.fm/journal/free-stickers/
GatsbyJS: https://www.gatsbyjs.org/
GraphQL: https://graphql.org/
Static web page: https://en.wikipedia.org/wiki/Static_web_page
JSX: https://reactjs.org/docs/introducing-jsx.html
MDX: https://mdxjs.com/
hopking.io: https://hopking.io/
Django: https://www.djangoproject.com/
Wagtail CMS: https://wagtail.io/
Django-graphene: https://docs.graphene-python.org/projects/django/en/latest/

Support the show

8 episodes

#Tech #Arts #Graphic Design #Jake Hopking #Design #Development #Web Design #Web Development #Frontend #User Interface #Programming #Technology

All episodes

UI Therapy | UI Design and Development Podcast

1
#Series - Efficient and scalable Sketch documents - Part One: Symbols 23:59

5 years ago23:59

23:59

UIT 8: In this weeks episode I start a series on using Sketch to build and maintain efficient and scalable design documents. Overview Share with the audience why the absence. Cover important aspects of symbols in Sketch. Talk about the future content in this series. Symbols Symbols, when used properly, help to vastly speed up your workflow by giving you ways to save and reuse common elements across your designs and design systems. They also form the foundation of Sketch libraries (I will cover this in a future episode of this series). When you make changes to a Symbol, those changes appear everywhere you use it in your designs. One of the major added benefits of symbols is overrides, which allow you to change specific parts of individual Symbols, without altering the underlying symbol itself. I cover these symbol subtopics in this episode: Organise with good naming conventions Nest symbols, and treat them akin to an atomic symbol Name the layers inside the symbol with generic names Create atom variations at equal sizes Learn how to pin the layers that make up your symbols for correct resizing Pinning Before you create a symbol, make sure you spend the minute or so necessary to correctly pin, or anchor, all the elements that make up your component. It makes for drastically simpler and less pain when you eventually find you need to resize them. It’s essential practice for things like forms and buttons. Once you understand the benefits you’ll start setting it on everything! Full show notes available at https://uitherapy.fm/episodes/8 Links Great Ormond Street Hospital Sketch Sketch: Symbols Sketch: Smart Layout Sketch: Resizing Sketch: Fix Size Sketch: Pin to Edge Support the show…

UI Therapy | UI Design and Development Podcast

1
#QuickCuppa - Design tips for developers Part One 17:54

5 years ago17:54

17:54

UIT 7: In this weeks episode I share five fundamental tips aimed at developers who want to build their design skills and design appreciation. Think and plan As a developer, you wouldn't start building an app or Website without some planning! It's the same for design. Give it the time it deserves. Establish requirements... So before jumping straight to the code, establish a plan. I'd suggest downloading and printing out some gridded PDFs, but using sticky notes, a whiteboard, or sketching in a notepad are all great options. Don't skip this step even if you think you have all the details in your head. When you finalize your wireframes, review it and you will probably notice you are missing something. Develop a solid understanding of UX principles One of the most important tips I can give is to get a decent understanding of user experience design. If you can always design with the user in mind, and not your own personal preference (because you aren't usually the target audience) then the slightly less important user interface design will be able to absorb some perhaps more quirky design choices. This might seem like common sense, but I've worked with many CEOs, product owners, project managers and developers who don't appreciate the value of good UX, and it shows. There are a series of ‘laws' associated with UX design, and I'd recommend digesting these over time. Pick one a day and keep it in your mind throughout your work day. 'Laws of UX' defines twenty laws, with a few examples being: Aesthetic Usability Effect : Users often perceive aesthetically pleasing design as design that's more usable. Fitts's Law : The time to acquire a target is a function of the distance to and size of the target. Law of Proximity : Objects that are near, or proximate to each other, tend to be grouped together. Law of Similarity : The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated. Use a colour palette Unless you've studied colour theory, colour harmony doesn't come naturally to most of us. And trying to come up with colour combinations that complement one another during the design process can be a real bottleneck to beautiful aesthetics or at least seriously slow down the process whilst you try to work out if this colours works here and there... As a solid starting point for a new project I'd suggest a tool like Coolors, and check their Trending palettes... which gives you seemingly endless options. Over time, you'll develop your own preferences and learn to recognise which colours complement each other, but this is a great starting point... Full show notes available at https://uitherapy.fm/episodes/7 Links Laws of UX Sneakpeekit Free Online Graph Paper Gridzzly Coolors Canva Colormind Adobe Color Designer News Codepen Dribbble Awwwards Episode 4 Full show notes available at https://uitherapy.fm/episodes/7 Support the show…

UI Therapy | UI Design and Development Podcast

1
How do we unbundle the Jamstack, thoughts on meta-frameworks, Toast and Party Corgi with Chris Biscardi 1:40:43

5 years ago1:40:43

1:40:43

UIT 6: In this week’s episode I talk with Chris Biscardi about the Jamstack, gatsbyJS and his own meta-framework called Toast, amongst many other interesting digressions :) Overview Introduction JamStack Toast Party Corgi MDX Conf Wrap Questions Introduction Got into the industry via ActionScript, then moved over JS when Adobe killed it off. Worked at Docker, Dropbox and recently finished a contract with GatsbyJS. Talk a bit about the Party Corgi Podcast, and the rainbow corgi logo (which is cute). Chris shares that he has nerves with his podcast too (after I apologies for a few nervous erm/ahhs etc). I’ve left these in unedited because the conversation took a nice direction. What is the Jamstack Jamstack and serverless are pretty much the same thing, and are both associated with Build vs Buy Paradigm i.e. if the technology is your core competency then build it, else buy it. It’s basically the reduction in complexity associated with large devops pipelines i.e. you’re not running a kubernetes or large distributed infrastructure. Instead you’re basically shipping a zip file that’s then deployed on to Amazon S3 or a CDN, and you’re serving a bunch or static files. All the compute necessary to generate your site is done at build time. A reasonable understanding of where the reduction in complexity ends up; is instead with the developer. One may have removed the need for a server to host a dynamic site with databases etc, but the same functionality has to be achieved at build time in a way that shouldn’t be too complex for the developer. Full show notes available at https://uitherapy.fm/episodes/6 Chris Biscardi ActionScript JAMStack Serverless computing Build vs Buy Paradigm Amazon S3 Amazon Lambda What’s a CDN Sapper NextJS Create React App GatsbyJS VueJS VuePress Grunt Gulp Brunch Joel Hooks SWC ES Build Rust WASM Neon Cloudinary Styled Components Emotion HMR ... Full show notes available at https://uitherapy.fm/episodes/6 Support the show…

UI Therapy | UI Design and Development Podcast

1
#QuickCuppa - Thoughts on GatsbyJS, the React-based SSG framework 32:20

5 years ago32:20

32:20

UIT 5: In this week's episode I share my thoughts on the use of GatsbyJS and whether I feel it's a viable static site generator framework. What are static sites? Static sites have been around for a very long time, and realistically are the original website: simply HTML, CSS, and JavaScript. They are not rendered during runtime; there is no server-side code, no database, etc. What’s a static site generator? It’s a tool that generates static sites whenever you decide to run a build on your code base. Contrast this to typical javascript frameworks and libraries, these usually generate HTML content on the client side during runtime. How is this different from server-side rendering? The primary difference is that there is no server-side code. So, unlike a framework such as Django, Gatsby does not render anything on the server when a request is made. Everything is generated at the build time of the application. A few benefits of a static site are: speed, the simplest infrastructure, search engine optimization, and security. GatsbyJS “Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps” Built on top of ReactJS GraphQL for data Uses any source for content; I use MDX (JSX in Markdown) Pros Love React, writing components is a joy. Because it’s built on ReactJS has access to a huge ecosystem of packages. ... Full show notes available at https://uitherapy.fm/episodes/5/ Links Free Stickers: https://uitherapy.fm/journal/free-stickers/ GatsbyJS: https://www.gatsbyjs.org/ GraphQL: https://graphql.org/ Static web page: https://en.wikipedia.org/wiki/Static_web_page JSX: https://reactjs.org/docs/introducing-jsx.html MDX: https://mdxjs.com/ hopking.io: https://hopking.io/ Django: https://www.djangoproject.com/ Wagtail CMS: https://wagtail.io/ Django-graphene: https://docs.graphene-python.org/projects/django/en/latest/ Support the show…

UI Therapy | UI Design and Development Podcast

1
#QuickCuppa - Thoughts on creativity, innovation and intuition in design 38:54

5 years ago38:54

38:54

UIT 4: In this week's episode I share my thoughts on creativity, intuition and introduce the terms 'Qualitative Design' and 'Quantitative Design'. Overview Welcome subscribers Introduce #QuickCuppa format Talk about the Free Stickers giveaway, open to everyone Share thoughts on creativity Innovation The following doesn’t necessarily directly apply to UI design, but I think it’s important to keep in mind as I continue through this exploration into creativity. Firstly, design can begin with the recognition of societal changes or trends. This involves listening carefully to users’ voices and needs. This can be called ‘demand-driven’ or design. Secondly, design can begin with discovery or development in science, technology or the arts. This can be called ‘genesis-driven’ design. Example being a new platform or media type: app design etc. Thirdly, design can begin with the generation of a product idea aimed at bridging the gap between demand and genesis. These three approaches are not mutually exclusive, and they can and usually are applied in parallel. Both demand and genesis are essential for design, and in actual cases of breakthrough design, the three approaches are often integrated. Full show notes, including multimedia assets available at https://uitherapy.fm/episodes/4/ Links View stickers on Instagram Mami Kajiho, my wife and creator of the London themed illustrations Design Fixation - A Cognitive Model [PDF] History of the graphical user interface Thinking outside of the box Qualitative research Quantitative research Think aloud protocol Neumorphism in user interfaces Support the show…

UI Therapy | UI Design and Development Podcast

1
Snowpack and Pika: the next generation of bundler, package manager and CDN for the modern Web with Fred K Schott 1:14:53

5 years ago1:14:53

1:14:53

UIT 3: The first two minutes before the episode ‘officially’ starts we talk a bit about why I’m creating this podcast, and then talk about how Fred started on his Pika journey. It’s nice content so I’ve included (note, that the recording quality for Fred during this segment is lower quality. Fred talks about how he got into programming, and goes on to talk about his time at Google working on Polymer, the native components system for the Web. At this time JS was going through a similar transformation (think ES6 and ES Modules, which is for allowing the browser to import modules), which contrasted to the ES5 way of a single document with hierarchical organisation, was a paradigm shift for JS. Pika began as a way to explore this new technology. The old world of ES5 however did allow for an immediate feedback loop of write/reload/see changes applied (this was lost with NPM and bundlers). ES6 created the opportunity to re-enable this instant feedback loop, and Pika’s focus is to make that happen... Complete notes at https://uitherapy.fm/episodes/3/ Links Fred Schott: https://fredkschott.com/ FKS on Twitter: https://twitter.com/fredkschott Project Polymer: https://www.polymer-project.org/ ESM: https://2ality.com/2014/09/es6-modules-final.html What is The Node Way?: https://fredkschott.com/post/2014/12/the-node-way/ Browserify: http://browserify.org/ Webpack: https://webpack.js.org/ 11ty: https://www.11ty.dev/ Parcel: https://parceljs.org/ Snowpack: https://www.snowpack.dev/ Rollup: https://rollupjs.org/ Svelt: https://svelte.dev/ Drew Powers: https://blog.logrocket.com/snowpack-vs-webpack/ SASS Language: https://sass-lang.com/ Pika: https://www.pika.dev/ Pika CDN: https://www.pika.dev/cdn Pika Code: https://www.pika.dev/code Pika Registry: https://www.pika.dev/registry Pika CDN package example: https://cdn.pika.dev/react Github Codespaces: https://github.com/features/codespaces/ Component.studio: https://components.studio / Webpack Module Federation: https://webpack.js.org/concepts/module-federation/ OS Awards: https://osawards.com/javascript/ TailwindCSS: https://tailwindcss.com/ ESNEXTCONF: https://www.esnextconf.com/ ES Build: https://github.com/evanw/esbuild SWC: https://github.com/swc-project/swc Support the show…

UI Therapy | UI Design and Development Podcast

1
The design and use of psychology for good UX in games and beyond with Kingsley Hopking 1:01:53

5 years ago1:01:53

1:01:53

UIT 2: Kingsley talks about how he prototypes games, the current project he and his team is working on (a 3D Platformer game called Frog Island). He also talks about another side project of his; a procedural games engine to generate worlds. Kingsley talks about his thesis; ‘Approach for designing complexity in games’ which focuses the UX in games, and how principles from psychology and design theory can be used to teach players about affordances and signifiers. Also explores chunking of complex information (and abstractions), spaced learning techniques and the limitations of the human mind in terms of maximum amount of working memory. We also explore the idea of soft tutorials in games, and how they might be usable within Web or App experiences too. We talk about his game, Frog Island, where he employs a lot of the ideas from the thesis as a test case. Tracking in-game to find and fix broken aspects of the UX. Finally we move onto wrap-up questions. Complete notes at https://uitherapy.fm/episodes/2/ Links Frog Island: https://ojaypopedev.itch.io/frog-island BeardyKing: https://twitter.com/beardyking Frogislandgame: https://twitter.com/frogislandgame Shader Graph: https://unity.com/shader-graph Celia Hodent - The Gamer's Brain: How Neuroscience and UX Can Impact Video Game Design: https://uitherapy.fm/thegamersmind Game Maker’s Toolkit: https://twitter.com/gamemakerstk Unity: https://unity.com/ Unreal Engine: https://www.unrealengine.com/ Frostbite Engine: https://www.ea.com/frostbite Cryengine: https://www.cryengine.com/ Support the show…

UI Therapy | UI Design and Development Podcast

1
The painful first episode 28:36

5 years ago28:36