Frontend First - podcast cover

Frontend First

Sam Selikoff, Ryan Torontofrontendfirst.fm
A podcast about modern UI development on the web. Hosted by Sam Selikoff and Ryan Toronto.
Last refreshed:
Follow this podcast in the Metacast mobile app to refresh it and see new episodes.
Download Metacast podcast app
Podcasts are better in Metacast mobile app
Don't just listen to podcasts. Learn from them with transcripts, summaries, and chapters for every episode. Skim, search, and bookmark insights. Learn more

Episodes

Lenient libraries, strict applications

Topics include: 04:01: Welcome to Node Dependency Hell. 14:00: How should the way we declare dependencies change if an addon is an implementation detail of another addon? 21:45: Can Ember CLI address these problems a layer above Yarn/npm? 23:25: Is JavaScript's fractured module ecosystem (CommonJS in node vs. ES6 modules in the frontend) contributing to the problem? 26:21: Someone's app broke when they installed their dependencies due to a Mirage dependency changing. How can we reliably solve th...

Feb 06, 20191 hr 2 minEp. 51

Mirage, meet Addon Docs!

Topics include: 01:17: Mirage's new Addon Docs site 35:55: Ember Bind Helper 45:23: Why start with Acceptance Tests? Links: EmberCLI Mirage Ember Bind Helper Sam Selikoff on Twitter Ryan Toronto on Twitter...

Jan 30, 20191 hr 11 minEp. 50

There's a bug in my FastBoot

Topics include: 0:00 Housekeeping: Upgrades, trainings, and nested dropdowns 12:24: FastBoot bug 1: How HTML responses turn into DOM nodes 37:22: FastBoot bug 2: XMLHTTPRequest and redirects Links: Sam Selikoff on Twitter Ryan Toronto on Twitter

Jan 23, 20191 hrEp. 49

The forgotten middle class

Topics include: 03:16: Incidental complexity in SPA development 33:04: Dealing with undocumented but relied-upon behavior in OSS libraries Links: Sam Selikoff on Twitter Ryan Toronto on Twitter

Jan 16, 201955 minEp. 48

Grab bag: Web vs Native, stale data, and build environments

Topics include: 0:00: Making movies 05:08: Ryan Florence's tweet about Twitter App 18:08: Ember Data stores across browsers 32:58: Laravel's ascending option 35:51: YouTube transition to UI pattern 42:15: Ember's build environments Links: Sam's Star Wars movie Ryan Florence on Twitter's PWA...

Jan 09, 201956 minEp. 47

Thoughts on tracked properties

Sam and Ryan discuss the wording behind the proposed "@tracked" syntax and how it shapes their understanding of Ember's new programming model. They also talk about 404 pages, data ownership, and their upcoming EmberConf trainings. Topics include: 0:00: Tracked properties 13:27: 404 pages 26:38: Smart components 41:00: EmberConf trainings Links: Ember Conf Component Side Effects EmberData Storefront Ember Animation Liquid Fire...

Dec 19, 201856 minEp. 46

Incremental Ember upgrades

Sam and Ryan discuss a new process for upgrading Ember apps and Sam's experience using it on EmberMap's codebase. They also talk about leadership in Open Source projects and lessons learned from Mirage. Topics include: 04:45: What is a leader's job? 13:17: Step-by-Step: Upgrading EmberMap Links: Most leaders don't even know the game they are in ember-cli-update Dependabot...

Dec 12, 201859 minEp. 45

The elephant in the room

Sam and Ryan discuss the difficulty of working with a design system that doesn't have good escape hatches, how implementing HTML and CSS can be more complex and time-consuming than coding user behavior, and some creative approaches to ensuring JSON:API payloads represent canonical server-side state. Topics include: 04:15: Design systems and when they break down 22:38: The complexity of implementing designs in HTML and CSS 34:38: JSON:API mutations. How incomplete response payloads can put your E...

Dec 05, 20181 hr 5 minEp. 44

Going all in on "outside in"

Sam and Ryan discuss getting Mirage and Ember to work in CodeSandbox, how FastBoot affects different approaches to rendering responsive content, and different ways an outside-in mindset can benefit product teams and open-source software projects. Topics include: 2:50: Getting Ember and Mirage working on CodeSandbox. Coding in the browser. 10:30: How FastBoot affects the use of screen width services 24:40: Going all-in on outside-in development. Starting at the end. Links: CodeSandbox Mirage boil...

Nov 28, 201842 minEp. 43

A less constrained environment

Sam and Ryan discuss new videos on async testing and declarative form validations. They also talk about why it's so hard to create good abstractions in Ember, or more generally the front-end landscape. They discuss constraints versus flexibility, and how the size of a library's problem space affects the likelihood of arriving at a good abstraction. Topics include: 01:14: Lessons learned from the Async Testing series 06:20: Forms: declarative validations, building blocks & escape hatches 12:5...

Nov 21, 201841 minEp. 42

Recursive partial application

Sam and Ryan discuss an elegant solution to the async nested dropdown problem, a FastBoot success story regarding inlined CSS, pre-warming FastBoot's cache, and implementing a new design alongside an existing design language. Topics include: 01:11: Solving the nested dropdown by recursively currying an action 25:00: Inlined CSS and caching with FastBoot 40:22: Challenges implementing a new design in an existing design language Links: PurgeCSS...

Nov 14, 20181 hr 2 minEp. 41

Compose wisely

Sam and Ryan chat about the challenges of testing custom asynchronous code. They also talk about React's new Hooks API, and discuss situations where hooks might be more composable than yields and contextual components. Topics include: 00:00 – Testing custom asynchronous code, like an animated bar chart 25:23 – React's new Hooks API Links: EmberMap Async testing series API docs for Ember's testing helpers Overview of React Hooks with Dan Abramov and Sophie Alpert 90% Cleaner React with Hooks – Ry...

Nov 06, 201859 minEp. 40

A dropdown nest

Sam and Ryan talk about the challenges of building nested dropdowns, whether a component reading data from its children is an anti-pattern, how angle-bracket syntax encourages new components, and whether “CSS best practices” exist. Topics include: 00:40 – Thinking through a nested drop-down navigation menu 35:15 – Building an component & angle-bracket syntax 45:00 – Layout UI primitives 46:35 – What are CSS best practices? How might Tailwind encourage these? 52:17 – "Semantic" classes. Shoul...

Oct 30, 201856 minEp. 39

Your frontend is ready for production

Sam and Ryan talk about their upcoming email course on Ember component patterns, wrapping up their EmberMap series on Functional CSS, refactoring some FastBoot code in Node, and how Mirage might be useful if it could run as a real server. Topics include: 0:30 - Email course in Ember Component Design 8:00 - EmberMap course on Functional CSS with Ember Do you have a preferred API for styled component variants? See Sam's tweet below. 14:00 - FastBoot, and refactoring and testing Node code 31:10 - P...

Oct 19, 201855 minEp. 38

Scope down!

Sam and Ryan talk about lessons from Jason Fried's Q&A about scoping down product features, and how that applies to our open-source work. They also talk about inlining critical-path CSS with FastBoot. Topics include: Inlining CSS with FastBoot (0:08) Scoping down (14:26) Jason Fried's Q&A at Laracon Scoping down at work and in OSS How to handle OSS contributors who add scope How bugs indicate a larger-than-expected problem space How to say no to new features you can't commit to supportin...

Oct 12, 20181 hr 1 minEp. 37

Can small libraries be conventional?

Sam and Ryan chat about two new EmberMap series, Forms and Async testing, as well as Sam's keynote at EmberCamp and the best way to avoid product gaps in open-source software. They also answer some listener questions. Topics include: Forms (1:18) Splitting forms into containers and presenters Avoiding premature abstractions (7:03) Which components do you carry from project to project? Asynchronous testing (14:47) Testing animations Sam's keynote at EmberCamp on Product gaps (19:04) Product gaps ...

Oct 03, 20181 hr 6 minEp. 36

The Product Gap

Sam and Ryan continue their discussion about the role of product in an engineer's daily working life. They talk about what product gaps are, the symptoms of product gaps on tech teams, and what you can do about product gaps if you're on a team with no product manager. Topics: 2:05 – All about product More product responsibilities fall on engineers than ever before Coders can help surface valuable info to business teams about the tradeoffs of their product decisions Learning product makes coders ...

Sep 27, 20181 hr 3 minEp. 35

80% done, 80% to go

Sam and Ryan talk about the cost of using engineering as discovery, the consequences of embedding product decisions throughout the design and development phases of a project, and other lessons that software engineers can learn from product developers. They also chat about how they categorize Github issues. Topics: 0:00 – GitHub issue categorization The importance of issue triage Prioritizing bugs over features Getting Things Done 7:53 – Managing product 7:53 - Engineering issues as a symptom of ...

Sep 12, 201855 minEp. 34

Ember Octane

Sam and Ryan talk about the Ember 2018 Roadmap RFC and its focus on improving communication, completing in-progress work, and shipping Ember Octane. They also talk about how to verify complex addon behavior by using full-blown test apps and addons. Topics: 0:00 – Test apps Using full apps and addons in a subdirectory of an addon to facilitate testing complicated scenarios Avoiding implementation details of the build pipeline in testing 12:14 – Ember Octane The Ember 2018 Roadmap RFC The concept ...

Aug 29, 201843 minEp. 33

Melanie Sumner on empowering JavaScript engineers

Mel chats with Sam about getting into Ember, lessons learned from collaborating at work an in open source, and how to make it easier for JavaScript engineers to use better UI patterns. Topics: 0:00 – How Mel got into Ember at JPMorgan 4:45 – Feeling welcome in the Ember community 7:45 – Investing in Ember for the long-term 9:00 – Communicating vision, removing our ego, and empowering others to do work 17:07 – Learning team projects 19:30 – Improving the native accessibility story for Ember 27:25...

Aug 22, 201853 minEp. 32

I am a lighthouse

Sam and Ryan chat (on new mics!) about Ryan's recent video on declarative keyboard events, changes to EmberMap's FastBoot architecture, and some of Ryan's recent work on FastBoot testing. Topics: 0:00 – Ryan's video on declarative keyboard events; other declarative components that haven't been discovered 9:52 – Our evolving FastBoot architecture; which parts can be generalized; a high Lighthouse score; a long uncanny valley 29:11 – Sam's Mirage work, fixing bugs, approaching 1.0; Mirage as a too...

Aug 15, 20181 hr 2 minEp. 31

Jonathan Jackson on FastBoot Rehydration and Codemods

Jon joins Sam and Ryan to talk about his recent work on rehydration in FastBoot and all the creative ways we can use Codemods to automate the routine parts of our jobs. Topics: 0:00 – How Jon got into Ember at HashRocket 4:45 – Jon and Chase starting the EmberWeekend podcast 7:30 – Greenfield vs. brownfield projects at a consultancy 13:30 – Infrastructure complexities in Ember's ecosystem 18:07 – Jon's work on FastBoot rehydration 41:29 – Jon's work on Codemods & the new testing APIs Links: ...

Aug 09, 20181 hr 28 minEp. 30

Provide this!

Sam and Ryan chat about provider components in Ember, including the first renderless components they wrote, the different types of data components can provide, and the patterns of template composition that providers unlock. They also talk about the need for a unified API for styling Ember components. Topics: 0:40 – Our first provider components 10:12 – Using providers to isolate the business logic for a form 27:35 – Patterns of composition in templates 34:35 – How to constrain more flexible inte...

Jul 20, 201852 minEp. 29

Jen Weber on imaginary bars

Jen talks to Sam and Ryan about her journey learning from and giving back to Ember, and how she keeps her community contributions sustainable by tying them back to personal goals and rewards. Topics: 7:00 – Learning Ember at General Assembly 9:00 – How did you go from learner to contributor? 13:25 – Thoughts on Slack, Stack Overflow and Discourse 18:12 – What advice do you have for folks looking to contribute back to Ember? 24:66 – What are some things you'd like to see change about Ember? 30:39...

Jul 13, 201838 minEp. 28

Mirage, meet Node

Sam and Ryan talk about their initial attempts to get Mirage running in Node, the benefits and workflows that it will unlock, some different approaches for using code in both the browser and Node, and how we might test FastBoot apps in the future. Topics: 4:28 – Getting Mirage to run in Express 21:58 – How to use addons like Mirage work in Node 42:53 – Testing FastBoot apps

Jul 06, 201855 minEp. 27

Let's be optimistic

Sam and Ryan talk about how to deal with building non-optimistic UIs using Ember and Ember Data, and how constrained visual design tools might help us build better UIs. They also answer some questions and talk about their current series on Functional CSS and Rendering tests. Topics: 0:00 – What's new on EmberMap 8:06 – Options for non-optimistic UI in Ember Data 22:34 – Visual programming Questions: 34:08 – What techniques do you have for authorization (not authentication)? 40:42 - How might you...

Jun 30, 201853 minEp. 26

A man can dream

Sam and Ryan talk about bringing the ideas of declarative rendering over to our data layers, how easy it is for data to become stale in SPAs, and more stories from their recent adventures in FastBoot land. Topics: 0:00 – Declarative data fetching 18:50 – Stale data in SPAs 30:46 – FastBoot

Jun 23, 201850 minEp. 25

Wrapping libraries reponsibly

Sam and Ryan chat about what to do when a node module breaks in FastBoot, how to best wrap 3rd-party libraries in an Ember Addon, and how to test the filesystem. They also answer some listener questions. Topics: 0:00 – Node modules in FastBoot 13:55 – Ember Addons that wrap 3rd-party libraries 19:07 – Testing the filesystem with Broccoli Test Helpers Q&A: 32:11 – How can I speed up my Ember CLI build times? 38:31 – What do you think about the Angle Bracket Polyfill? Would you use it? 42:08 –...

Jun 15, 201852 minEp. 24

Bugs vs. features

Sam and Ryan chat about some ideas around caching in FastBoot, different ways of prioritizing work, and the difference between easy things and hard things in Ember. Topics 0:00 – Caching & FastBoot 16:18 – Project process, workflow, bugs, features, and issue urgency 37:47 – Easy vs. hard things in Ember. Ember focusing on its strengths.

Jun 07, 20181 hr 8 minEp. 23

Toran Billups on Hot Reloading

Toran talks to Sam and Ryan about his project Ember CLI Hot Loader, which is an implementation of component-based hot module reloading for Ember apps. Topics: 0:00 – Losing hot reloading when moving from handwritten CSS to functional css 2:16 – Why Toran wrote the Hot Reloader 4:45 – How the hot reloader leverages Ember CLI to reload components 8:31 – The need for hot reloading 14:56 – Are there situations where you don’t want to use the hot reloader? 19:05 – What’s the easiest way to try using ...

May 29, 201842 minEp. 22
For the best experience, listen in Metacast app for iOS or Android