Mandy Hartman shared insights on how to get the most out of web development learning. Drawing from her own experiences transitioning into the field, Hartman presented key strategies for new learners.

Mandy highlighted the importance of structuring learning by consistently dedicating specific daily blocks for acquiring new skills or understanding new topics. She endorsed the power of community, encouraging learners to find support and motivation in groups like workshop-specific Discord channels or Slack groups.

Additionally, Hartman highlighted the importance of building a portfolio through side projects to showcase skills to potential employers, and stressed on the importance of leveraging support networks, including friends, family, and mentors.

Hartman's talk was an inspiring and practical guide for those embarking on their web development learning journeys, emphasizing structured learning, community support, practical application, and portfolio building.

Learn web development effectively with Mandy Hartman's expert tips. Discover structured routines and community support for success!








Epic Web Conference 2024

Mandy Hartman

Getting The Most Out of Your Learning Investment

Alex Anderson provides a thorough examination of "local-first" computing, tracing its origins from the early days of mainframe and client-server models to present-day mobile apps and edge computing. He emphasize how the trend towards thicker clients and localized tasks is affecting web development.

Local-first computing has seven ideals that it lives by that Alex dives into in this talk:

Easier ideals: 
- No spinners
- Data not trapped on one device
- Network is optional
- Seemless collaboration with your colleagues

Harder ideals:
- The long now
- Security and privacy by default
- The user retains ultimate ownership and control

Discussing the principles involved and their development implications, Alex considers the challenges of data synchronization, the necessity of offline functionality, and the complexities of multi-user scenarios. He also introduce resources for local-first software development, such as AutoMerge, Yjs, and localfirstweb.dev.

Alex uses a recipe app to demonstrate how local-first computing can be effectively implemented. He highlight the use of RepliCache, a client-side sync framework, and discuss strategies to improve web app performance using Remix. 

The talk concludes by exploring how web apps have serious limitations, even when implemented as Progressive Web Apps (PWAs), when examined under the lense of the local-first ideals. Web apps particularly struggle to uphold the last 3 ideals as data on the web is not permanent and hard to properly secure. Alex remains optimistic about the future of local-first computing in web development seeing them as levers to pull when needed, encouraging developers to explore these techniques to enhance user experience and data control.

Alex Anderson explores "local-first" computing's impact on web development, advocating for its future with tools like AutoMerge and RepliCache.

Alex Anderson

The Recipe for Local-First

Jacob Parris explores the intricacies of building and maintaining high-performance web applications at scale. He delves into the technical considerations that come into play when choosing the right architecture for an application, emphasizing the importance of stability before speed.

Jacob discusses the merits of server-side rendering (SSR) for providing user-customized content, highlighting it as an effective method to prevent layout shift from asynchronous asset loading. He underscores that optimizing the user experience is key when deciding the architecture of an application.

The talk also covers advanced data management strategies, such as local-first synchronization, as a way to manage local and remote data. Jacob introduces RepliCache as a promising tool to manage local data synchronization.

The presentation delves into the world of CRUD operations and User Experience, with a specific focus on the use of client cache loader. Jacob explains how layering improvements to the app—starting with reliable server loaders—can enhance performance.

Furthermore, he discusses the Remix progressive web app (PWA) package, endorsing the strategy of building a strong foundation using server loaders and then progressively enhancing apps' features.

Jacob Parris guides high-performance web apps, prioritizing stability over speed with SSR, data sync, and progressive enhancement for UX.

Jacob Paris

High-Performance CRUD Apps

Lina Mahrouch provided an in-depth analysis of Remix's capabilities in her presentation. 

Remix stands out for its commitment to web standards and its ability to provide an amazing developer experience through its 'loaders' and 'actions' features. These features simplify data fetching and backend communication, promoting seamless data flow and efficient feature management in web applications.

Adding flexibility to the framework, Remix incorporates both file-based and config-based routing. Its recent transition to a Vite plugin has enhanced its capabilities, allowing for better integrations and improvements for developers. The framework's application is not confined to eCommerce. It's also used in AI tools, search engines, and portfolio sites, demonstrating its broad utility.

Lina Mahrouch highlights Remix framework's strengths, adherence to standards, simplified data flow, and diverse application beyond eCommerce.

Lina Mahrouch

Things You Probably Didn't Know About Remix

Tyler Benfield focused on the importance of optimizing database performance to improve the overall functioning of applications. It was highlighted that an application's speed is often dictated by its slowest database query. Therefore, optimization efforts should prioritize improving database performance.

Tyler demonstrated the significant potential of database performance enhancement, mainly through the use of indexes. Indexes were compared to an alphabetically organized address book, speeding up data retrieval from unindexed tables. He emphasized the need to consider multiple columns within a single index to optimize queries effectively.

Other database performance factors considered were network latency, open database connections, and the use of caching for inherently slow queries. Tyler recommended the use of connection poolers and stressed the importance of the database and application's proximity to minimize latency.

Tyler emphasized continuous monitoring and tracking of database query performance trends, recommending indexing all frequently used queries and foreign keys for immediate improvements.

Optimizing database performance as crucial for application speed, focusing on indexes, minimizing network latency, and monitoring query trends.

Tyler Benfield

Epic App Performance Starts With the Database

In this talk, Scott Hanselman demystifies myths surrounding AI and explains its working principles. He addresses the need for context in AI responses and highlights how AI predictive abilities hinge upon human input for training.

A key aspect of the talk revolves around the ethical implications of AI. Scott emphasizes human responsibility in steering AI towards morally sound outcomes and stresses the importance of setting clear boundaries.

Concluding with an emphasis on careful model integration to avoid misuse, Scott underlines the significance of privacy and community engagement in achieving a better understanding and more efficacious application of AI technologies.

Scott Hanselman demystifies AI, emphasizing human input and ethics, discussing GitHub Copilot and responsible integration.

Scott Hanselman

AI - "Iron Man or Ultron"

Michael Chan shares his expertise on modern practices in component building and testing. This talk primarily revolved around the utility and alternatives to Storybook, a popular tool for developers building component libraries.

The importance of evaluating different testing tools to find what caters to one's specific needs was also underscored. Preference was expressed for the React testing library, due to its focus on accessibility, with other tools like Chromatic and Storybook also receiving commendation.

However, certain limitations of Storybook were pointed out, suggesting it might not serve all React developers equally. As an alternative, the 'Component Story Format' at the core of Storybook was explored, with a tic-tac-toe tutorial in React used to demonstrate its capabilities.

The conversation concluded with the optimism for a future of simpler, less tool-reliant component testing.

Chan explores component building and testing, React Testing Library over Storybook. Limitations, alternatives, and future trends in component testing.

Michael Chan

Chantastic

Snapshot-driven Development Capture Visual Tests in Flow

Saron Yitbarek shares insights on the importance of 'learning in public', testing business ideas and the rise of newsletters in the web development industry. She discusses her entrepreneurial journey, including the product validation phase, fundraising, struggles with product engagement, and eventual pivot to newsletter development.

Saron illustrates the importance of audience ownership and direct idea sharing through newsletters. Starting under a company research project with her newsletter "Not a Designer", Saron managed to reach 1,000 subscribers in a month. This success, she state, showed the importance of not just achieving milestones, but enjoying the creation process itself.

Saron emphasizes that 'learning in public' with both successes and failures of the creative process can cultivate career resilience and valuable connections. Starting a newsletter or creating content on social media platforms could ultimately help improve skills, build networks and buffer against the uncertainties of the world.

In the ever-evolving web development industry, Saron recommends embracing public learning as a way to navigate changes, prepare for shifting landscapes, and shield careers from uncertainties.

Saron Yitbarek promotes 'learning in public' through newsletters, stressing its value for career resilience and networking in web development.

Saron Yitbarek

Not a Designer

Artem Zakharchenko introduces Mock Service Worker (MSW) API support for WebSockets. A detailed discussion about the use and benefits of a mock environment in the initial stage of development was discussed, with Artem emphasizing the enhanced control it offers over WebSocket events.

The concept of mock-first development was introduced as a way of allowing developers to start work in an environment where the server has not yet been established, with the assistance of MSW. This approach was further unpacked, exploring how it could provide significant benefits when dealing with WebSocket events, which cannot be intercepted using Service Worker API.

Artem demonstrated how to use MSW to develop a WebSocket application. The demonstration involved real-time user interface interactions and event handling. In transitioning from mock to full pass-through mode, MSW can simulate a duplex connection similar to normal WebSockets.

A feature of MSW that was highlighted is its ability to observe and modify server interactions. Through setting up a message listener, a developer can manipulate values coming from the server as well as the client. Artem further noted that MSW is the first API mocking library in the JavaScript ecosystem to support both HTTP and WebSocket protocols.

The talk concluded with an invitation for audience engagement and contribution, encouraging developers to use the pre-release version of MSW and provide feedback.

Artem Zakharchenko presents MSW's WebSocket support, enabling mock-first development for better control and real-time testing.

Artem Zakharchenko

Mocking WebSockets with MSW

Glauber Costa, the founder of Turso, challenges the usual narrative surrounding SQLite by discussing its potential use for production applications. By addressing SQLite's significant technical capabilities, Glauber uses this talk to dispel the common misconceptions regarding its limitations.

Glauber dives into the following misconceptions and shows you how they might not be the limitation you though:

- Maximum database size
- Read/Write performance
- SQLite back-up strategies
- Horizontal scaling

In conclusion, Glauber encourages developers to consider SQLite for production applications and to explore further resources available on Turso's [GitHub page](https://github.com/tursodatabase).

Glauber Costa challenges SQLite misconceptions for production apps, citing its capabilities and real-world performance, offering tools like Turso for support.

Glauber Costa

Seriously SQLite

Ryan Florence delves into the evolution of JavaScript, with a particular focus on the ES6 feature `const`. The discussion dives into the `let` and `const` keywords, elements that have had a transformative impact on JavaScript practices, but also stirred noteworthy debates within the coding community.

Misunderstandings around the `const` keyword were addressed, with emphasis on its role as a constant and not a variable. Moreover, Ryan clarified that using `const` does not inherently prevent content mutation. The complexities involved in achieving immutability in JavaScript were also discussed.

The talk underscores the influence of entities such as Udacity and Airbnb on JavaScript coding conventions, stirring a dialogue about the enforcement of coding standards that are not always consistently applied.

In examining the implications of ES6 features, Ryan suggested that strict adherence to rules around variable declaration may not significantly enhance code quality.

In an unexpected twist, the session also ventured into the phonetics of language, specifically the pronunciation of JavaScript keywords and how hard the word `const` is to say.

The talk concluded with a challenge to the audience to broaden their understanding of JavaScript's language features and their applications, highlighting the urgency to focus on user experience over strict coding regulations.

Ryan Florence delves into ES6 evolution, highlighting let and const, immutability complexities, and coding conventions' influence in JavaScript.

Ryan Florence

Let me be

Dan Farrelly talk focuses on strategies for improving API performance and reliability using events and background functions. Dan emphasizes the need for efficient and optimal user experience, highlighting how complex operations and the evolution of API endpoints can cause bloated code, slow application performance, and potential reliability issues.

These potential pitfalls, such as multiple failure points in processes dependent on third-party APIs, can be mitigated by offloading non-critical logic from the API's critical path and moving to asynchronous operations. The implementation of tools like queues facilitates the management of these background jobs and ensures their reliable execution.

Dan also advocates for robust recovery plans, logging for debugging, and the adoption of event-driven architecture for APIs. The latter provides several benefits such as improved decoupling, scalability, and more efficient API designs. This approach supports parallel execution of independent functionalities and facilitates better recovery, debugging, and analysis.

Finally, Dan emphasizes the importance of creating APIs that are fast, reliable, and user-friendly, while also ensuring that extra processing doesn't affect the API's performance or the user's experience.

Dan Farrelly: Optimize API performance—prioritize critical tasks, leverage queues, plan for recovery, and embrace event-driven architecture.








Dan Farrelly

Improve performance and reliability of your API with events and background functions

Hosts Andrew and Justin are joined by Microsoft's VP of Developer Community, Scott Hanselman, "Chantastic" Michael Chan, former Chromatic developer and incoming WorkOS team member, and Yuna from Google's Chrome team.

The panel focused on the key roles and functions of Developer Relations (DevRel), emphasizing its significance as the bridge between product developers and the user community. The panelists highlighted the importance of empathy and efficient communication in DevRel, and described this role as the backbone of the product development process.

The discussion also touched on the concept of "level privilege," which refers to the ability of senior engineers to freely voice their opinions. A crucial point that emerged from this is the importance of clearly defining and understanding the roles and objectives of a DevRel position.

The conversation then shifted towards the transformative potential of Artificial Intelligence (AI) in web development and developer education. Panelists predicted a shift in learning methodologies brought about by AI and explored various applications of AI, including debugging code and prototyping user interfaces. However, concerns were also raised regarding AI's ethical implications in academic settings and its environmental impact.

The discussion concluded with reflections on the democratization of creativity enabled by AI and the role of inherent difficulties in the creative field. Overall, the panelists provided an insightful discussion on the evolving dynamics of developer relations and the future of AI in web development.

DevTools FM podcast DevRel's empathy, AI's web dev impact, ethical concerns, creativity democratization reflections.

DevTools.fm

DevTools.fm Live Recording

This insightful lightning talk from Adam Argyle delves into CSS custom properties in modern web development. The central theme of the discussion revolves around the use of these properties - or "variables in a bottle" - for developing dynamic themes and enhancing type-safety.

Adam discusses the creation of a comprehensive theming system based on a single color, with derived properties modifying this base color for a consistent and easily adaptable theme across applications. Crucially, features like dark mode implementation become much easier with CSS custom properties.

One of the highlighted challenges is the loosely typed nature of custom CSS properties, which can lead to systemic issues in development. Adam proposes the use of type-checking tools (TypeScript) coupled with the CSS `@property` feature, to create typed custom properties and avoid these pitfalls.

On the topic of embracing progressive enhancement, the session highlights the successful adoption of `@property` by browsers like Chrome and Safari. One practical application discussed is its use for type guarding in Tailwind 4.

The discussion culminated with a look into the future of CSS custom properties, with Adam speculating on new functionalities and inviting conversation about upcoming specifications for typed CSS variables. Adam emphasizes the power of CSS and encourages developers to harness its full capabilities, such as mathematical functions and scroll-driven animations, for enhanced web development.

Adam Argyle's lightning talk: CSS custom properties for dynamic themes, type-safety. Advocates typed custom properties, explores future features.








Adam Argyle

Lightning in a bottle with CSS custom properties

Sandrina Pereira focused on the importance of web accessibility, stressing the need for empathy when considering the diverse ways users interact with digital content. This talk highlighted the Web Content Accessibility Guidelines (WCAG), simplified into four principles, and touched upon various compliance tools available to developers.

Sandrina pointed out the limitations of automated accessibility evaluation tools, noting their effectiveness decreases as the interactivity of a website increases. The importance of manual testing, such as keyboard navigation, was underlined to ensure a comprehensive understanding of accessibility.

Techniques for implementing accessibility enhancements and improving navigation were outlined, with the use of Accessible Rich Internet Applications (ARIA) attributes and CSS techniques being described. Sandrina also addressed accessibility challenges in highly animated websites, proposing solutions to improve user interactions.

Accessible interactions were emphasized as being more than just about meeting technical standards; they require an empathetic understanding of the diverse ways users engage with content.

Sandrina Pereira stresses web accessibility, advocating empathy, manual testing, and ARIA attributes for improved interaction.

Sandrina Pereira 

Accessible interactions in JavaScript apps

Simon Vrachliotis gives a talk showing how, with the use of TailwindCSS, the designer-developer hand-off can be a resiliant part of your teams workflow. Simon discussed the traditional challenges faced during the design handover process and how TailwindCSS can address these issues, making it easier for both sides to work effectively towards a common goal.

The importance of adopting prototyping early in the design process was stressed, alongside the value of designers learning front-end tasks. TailwindCSS was shown to offer the quickest feedback loop from idea to live CSS in the browser, making it a powerful tool for rapid design changes and prototyping.

Simon celebrated TailwindCSS for its ability to bridge the gap between design and development, fostering a more inclusive and efficient working environment. By augmenting the design process and enhancing communication between team members, TailwindCSS was acknowledged as an invaluable asset in the modern web development toolkit.

Simon Vrachliotis highlights TailwindCSS for seamless designer-developer collaboration, emphasizing rapid prototyping and efficient communication.

Simon Vrachliotis

Unleashing Designers with Tailwind CSS

Michelle Bakels has had experiences of stress and burnout in the tech industry. In this talk, Michelle uses those experiences to emphasize the importance of understanding and addressing health issues in tech-related fields. Stress, overworking, and burnout are common problems among developers, with an alarming 83% having experienced work-related burnout.

Michelle, alongside Gabe Greenberg at G2I, introduced the Developer Health Program, which aims to raise awareness and provide resources on prevalent health issues within the industry. The talk identified chronic stress leading to burnout as a significant concern and explored the negative impacts of an adrenalized work environment and workaholism on physical and mental health.

Contrary to the common belief that success in tech requires overworking, Michelle argued for the importance of rest, leisure, and effective time management. They recommended an Essentialism Plan to focus on high-priority tasks, promote clarity in planning, and prevent burnout. The talk concluded by emphasizing the significance of self-care, healthy sleep patterns, and mental well-being in the tech industry.

Michelle Bakels discusses tech industry burnout, introducing the Developer Health Program with Gabe Greenberg to advocate awareness and self-care.

Michelle Bakels

Tech Broke My Heart

Una Kravets talk explored the newest evolution of CSS and HTML, specifically focusing on scroll animations, accessibility, and UI positioning. CSS continues to become more powerful, allowing for a clear separation of styling and content, as well as minimizing third-party dependencies. A significant portion of the talk revolved around enhancing user experience through scroll-driven animations. New techniques for creating user-responsive animations were introduced, including how to create a scroll timeline that interacts with the scrolling viewport.

To ensure a seamless user experience regardless of browser support, progressive enhancement was stressed. An example of this is to use CSS's '@supports' rule to check for feature compatibility. Una provided advanced CSS techniques for dynamic styling based on scroll position and overflow detection.

The topic then shifted to UI components, with a highlight on the Popover API. Techniques for animating popovers and compensating for lack of broad browser support were covered. This led to a discussion on positioning elements using anchors and the 'position: try' CSS property.

Finally, Una underscored the importance of attributing semantics to popovers to enhance web accessibility, including working closely with accessibility experts. The session concluded with encouragement for developers to continue exploring these new features of CSS and HTML.

Una Kravets explores CSS evolution, emphasizing scroll animations, accessibility, UI positioning, and progressive enhancement for better user experiences.

Una Kravets

Less Cruft, More Power: Leverage the Power of the Web Platform

Zeno Rocha explores the emerging trend of developer-first products, noting the increased influence of developers in tech adoption within companies. Zeno traced the evolution of tools through 4 distinct generations created for developers, starting with early offerings like Splunk and JetBrains, evolving to API-centric tools like Auth0 and Firebase, and culminating in current tools like Gatsby and Netlify that emphasize immediate production integration.

The rest of the talk answers the question 'How to create developer happiness?'

The answer comes in the form of 5 categories:
- Cognitive Overload
- The Little Things
- Buyer vs User Dilemma 
- Treat Docs as Code
- Developer Obsessed

Emphasizing the importance of developer happiness, Zeno discussed the detrimental effects of overwhelming choices, drawing from Hick's Law, which states that decision time increases with the number of alternatives. Zeno stressed how attention to detail in developer tools enhances user experience, noting how this care reflects technical competence and excellence.

The talk highlighted the contrast between buyer and user experiences, pointing out the pitfalls of focusing solely on either. Zeno introduced the static usability effect, suggesting tools with visually appealing designs are often perceived as more user-friendly.

Drawing parallels with Maslow's hierarchy of needs, Zeno proposed a similar hierarchy for developers interacting with technology products, emphasizing that tools should not just be functional but also delight users. The presentation ended with a call for continuous improvement and innovation in the tech and programming space.

Zeno Rocha explores developer-first products' rise, emphasizing their influence on tech adoption and the importance of developer happiness and usability.

Zeno Rocha

The Next Generation of Developer-First Products

Kent C. Dodds opens up the Epic Web Conference with a talk celebrating the aspects of the web that make it awesome (and epic).

The talk, themed "What makes the web epic," opened with Kent expressing enthusiasm about the developments in web technologies and acknowledging the pivotal contributions of web developers through time. The talk celebrated the evolution and resilience of the web in the modern tech era.

Major highlights of the discussion included the reflection on the Webs diversity, flexibility, resilience, and universality. The web's commitment to users, compatibility with older content, and ubiquity across devices and platforms were underscored. Kent emphasized the importance of web standards and preservation in aligning with Tim Berners-Lee's vision of a universally accessible web.

Diverse uses of web technologies also featured in the talk, showcasing their application in automated tasks, household appliances, and even space technology. The web was celebrated as a platform for diverse experiences.

The collaborative ecosystem of the web is another noteworthy point in the talk. Kent acknowledged the importance of community contributions in continually driving the web's innovation and advancement.

The talk concluded with an encouraging note for web developers, stressing the crucial role you play in shaping the web's future, and inspiring you to continue innovating, experimenting, and developing on the web platform.

Kent C. Dodds celebrates the web's diversity and resilience at Epic Web Conference, inspiring developers to shape its future.

Kent C. Dodds

What Makes the Web Epic

Barry McGee discusses Shopify's scaling tactics in eCommerce, particularly focusing on adopting AI applications and a React framework. The talk started by outlining Shopify's eCommerce platform's broad reach, including multi-channel sales capabilities and a user-centric tracking feature in the Shopify Shop app.

Shopify's growth motivated the adaptation of Shop Pay and the 'Pay, Track, Repeat' customer retention cycle. The continued expansion triggered the introduction of Shop's web variant, maintaining synchronization between mobile and web platforms.

Barry also covers Shop's decision to move to the web, particularly their shift from using Ruby on Rails towards Remix to capitalize on Shopify's acquisition and the ability to use React across both the mobile and web platforms. This shift aligns with the team's ability to use continuous deployment processes for quicker feedback and easier experimentation.
AI garnered specific attention for its role in enhancing eCommerce product discoverability. Shopify uses AI and natural language processing to refine user search experiences, extending beyond mere keyword matching. An interactive shopping assistant aids the AI models by observing user behavior and collecting feedback.

Shopify recommends simplicity in development, treating URLs as a state's single source of truth and utilizing experiment flags for A/B testing and feature flags for internal testing. These practices are essential for effective upscale operations.

Barry concludes with a summary of critical takeaways, emphasizing starting small, reusing design systems, leveraging native platform capabilities, avoiding over-abstraction, validating processes, and gauging success. These practices have been crucial in the successful scaling of Shop.App with Remix and AI technology.

Barry McGee highlights Shopify's eCommerce scaling, leveraging AI, React, and multi-channel sales for efficient growth and user-centric experiences.

Barry McGee

Building shop.app at scale with Remix and AI

There is no great test without a great test name. Here are five tips to help you name your test cases in JavaScript.

1. **Start with a verb**: A test is there to check how something works. So, start its name with a verb. This is one of the simplest ways to introduce consistency to your test names.

```javascript
//❌ Tests validate behaviors.
// Behaviors are actions, actions are verbs!
it("homepage");
it("greeting message");

// ✅ Starting with a verb sets the rest
// of the test name on the right path.
it("navigates to the homepage");
it("displays the greeting message");
```

2. **Use subject-less third person**: In other words, imagine there is "it" before the test name. So, it becomes "fetches the user by ID," "displays the greeting message." Not only will the test names read more naturally this way, but it will also improve their consistency and predictability across the entire code base.

```javascript
//🧐 This is a stylistic tip.
it("fetch the user by id");
it("display the greeting message");

// ✅ Following this tip helps you stay
// consistent in your naming and allows
// to disambiguate between nouns and verbs
it("fetches the user by id");
it("displays the greeting message");
```

3. **Omit implied verbs**: Verbs like "tests," "should," "must," "asserts," and "validates" bring no value to the test name because they're implied. Instead, focus on what it is the test is doing. "Navigates to the homepage," "displays the greeting message," "validates the request headers." This way, you can reduce the visual clutter of the test name and help the test focus on what matters – the intention behind the system.

```javascript
// ❌ Omit verbs like "tests", "should",
// "must", "checks", etc. Those are implied.
it("tests the homepage");
it("should display the greeting message");
it("must validate the request headers");

// ✅ Focus on what the system does.
it("navigates to the homepage");
it("displays the greeting message");
it("validates the request headers");
```

4. **Describe the intention, not the implementation**: I know it may be tempting to put a lot of technical details into the test name. It may even seem useful sometimes, but it's not. Those details bring no value to the test name. They only harm the test.

```javascript
// ❌ Implementation details have no place in tests,
// and that includes the test names.
it("performs a GET request to the /user endpoint");

// ✅ Focus on WHAT the system does, not HOW.
it("fetches the user");
```

5. **Keep it short:** Long sentences can be really great to convey a lot of information, to give a lot of detail and context, but it's not what you want from your test name. Neither is it what you want from your test. You really want it to be focused on one particular thing, one behavior.

In fact, if you have a really long test name, perhaps that's an indication that this test does way too much and should be split in multiple smaller tests.

```javascript
// ❌ Watch out for phrases and flavors
// that bring little value to the test name.
it("redirects the user back to the product detail page");

// ✅ Rephrase, remove repetition, and utilize
// domain-specific terms to keep test names short.
// e.g. PDP = product detail page

it("redirects to the PDP");
```


Discover the importance of well-named test cases and learn five tips to help improve your test naming strategy in JavaScript.

How to Write Better Test Names

Kent shares exciting updates to the Epic Stack, introducing powerful new features like Prisma SQL, Tigris object storage, and the latest version of Tailwind v4. 

He also highlight the contributions of over 160 open-source collaborators who helped shape the project. He mentions his newly introduced Epic Programming Principles and Web Style Guide, which are designed to streamline development processes and ensure consistency across projects. 

Additionally, Kent showcases the Epic CLI tool, aimed at simplifying project updates by automating feature integration and patch generation. 

Of things Epic

So, you know how JavaScript can feel like a chaotic, constantly shifting landscape, and you're afraid its history is just a dry list of forgotten tech? It seems safer to just keep up with the latest framework, right? But what if understanding that past could unlock a deeper comprehension of the web today and make you a significantly better developer?

Imagine finally grasping why jQuery was a revolution, how Node.js changed everything, and the real problems today's frameworks are solving! This captivating talk takes you on that very journey. You’ll witness JavaScript's birth in a mere 10 days, navigate the fiery browser wars, see AJAX make web pages dynamic without reloads, and understand how Google's V8 engine gave JS the speed it needed to conquer the server-side. This isn't just a history lesson; it’s the essential context that transforms you from a coder into a truly informed engineer, ready to make smarter decisions.

Annie Sexton

JavaScript: The Origin Story

Scaling frontend applications often leads to the frustrating reality of agonizingly slow build times, nightmarish dependency management, and significant bottlenecks when multiple teams try to release features simultaneously. The perceived safety of sticking with monolithic builds can quickly become a drag on productivity and innovation, leaving developers to endure painful coordination and slow rollouts.

There's a powerful alternative: a world where teams ship features independently, where shared components update instantly across all applications without the "dependency hell" of chained NPM installs, and where your app still operates as a single, cohesive unit for the user. 

This talk unveils Module Federation, a robust solution forged in the fires of massive-scale development at companies like ByteDance. You'll discover its core concepts – how it enables you to decompose your frontend into independently buildable and deployable "remotes" that are consumed by a "host" application at runtime. It offers sophisticated version control for shared dependencies and crucial singleton support for libraries like React, ensuring stability and consistency. 

Zack also explores Module Federation's evolution, clarifies why it's often superior to import maps for complex, dynamic scenarios, and culminates in a live demonstration of its integration with Epic Stacks. Witness firsthand how components and even entire login pages can be federated, transforming your approach to building and delivering large-scale applications, boosting engineering output, and accelerating feature delivery.

Zack Jackson

Epic Federation

This talk delivers actionable strategies, not formulas, to dramatically increase your odds of success and build that resilience. You'll learn the surprisingly simple power of "becoming known for a thing" by consistently talking about your interests, leveraging the availability bias to make opportunities materialize. 

Aaron talks about the importance of "asking for what you want," taking incremental steps to build proof of your abilities and confidently pursue your goals. Crucially, you'll understand how to "operate in the world as it exists," recognizing and using systemic patterns to your advantage rather than fruitlessly railing against them. 

Finally, he also made emphasis to "act like you belong" once you're in the room, fostering a quiet confidence that allows you to contribute effectively and seize new possibilities. 

These strategies  Aaron shares were born from real-world experience including navigating a layoff with a young family, empower you to take control, stay in motion, and build a career where you're not just surviving, but thriving.

Aaron Francis

Epic Bets: Practical Tips For Betting on Yourself

Madison Kanna talks about "learning out loud" and its  importance in the current landscape, particularly with the rise of AI. She mentiones that while AI can automate numerous processes, it cannot replicate an individual's unique human authenticity, which is the foundation of a personal brand.

Madison isn't talking about becoming a content machine. Instead, she's suggesting we simply share our authentic learning journeys. 

She actually shared a personal story about getting job offers after being laid off, all because people already knew her work online. Beyond employment opportunities, she points out that an established presence gives you a solid foundation for launching projects and connecting with like-minded people.

So how do you start? Madison recommends "starting where you're at"—don't wait until you're an expert. People actually love watching others grow and improve. 

She also talks about creating what she calls a "positive feedback loop," where sharing what you're learning brings encouragement, which motivates you to keep learning and sharing. It's a simple but effective cycle that builds momentum over time.

Madison Kanna

Why You Should Learn Out Loud in 2025 

Andre, a DevRel fellow at NEON, talks about "epic image optimization." He shared his own journey into this area, which started about five months ago when he was looking for a better way to handle images for his event site, All Things Web. Finding existing solutions a bit complex without prior experience, he decided to "just do things" and build his own solution.

Andre explained how he started with a GitHub gist from Jacob from the Remix team and iterated on it, eventually creating an open-source package called [OpenIMG](https://github.com/andrelandgraf/openimg). This package, which he's happy to have recently merged into the Epic Stack, provides a simple image component for the frontend and a Vite plugin. The real work, he noted, happens on the backend via an optimizer endpoint you add to your application.

He then showed a live playground, demonstrating the core principles of image optimization: resizing images appropriately and using modern formats like AVIF or WebP. Andre also highlighted the benefit of stream processing, where images are processed in chunks, significantly reducing server memory usage compared to loading entire large images into a buffer.

The main challenge, Andre pointed out, is that modern high-resolution devices produce very large image files, and optimizing them is CPU-intensive. His package is designed for convenience in small to medium-sized applications by keeping everything within the web server. However, he advised that for sites with many users or images, it's better to offload optimization to a serverless function that can scale more effectively. For those just starting with the Epic Stack, though, local optimization is a great starting point for improving web performance.

Andre Landgraft 

Epic Image Optimization

Josh's talk focuses on the concept of Learning Driven Development (LDD), emphasizing a paradigm shift in how developers approach the learning process. Josh highlights the inefficiency of traditional learning methods where developers are first expected to acquire knowledge before building, suggesting instead that learning should happen concurrently with creation.

Josh argues this reversed approach addresses the common challenge developers face when presented with extensive learning requirements before starting projects. By sharing his personal experience automating security reviews through AI, Josh demonstrates how encountering a specific problem naturally drove him to learn about embeddings and vector databases, illustrating the effectiveness of problem-driven learning.

Josh advocates for three key principles in the LDD approach: making learning personal by connecting it to individual problems, focusing on identifying problems rather than tools, and maintaining continuous creation as the engine of ongoing learning. 

Josh Cirre

LDD: Learning Driven Development 

Jared Forsyth's talk breaks down type inference, showing how it automatically adds missing type annotations to code. He explains why this matters: understanding type inference helps you deal with errors in languages like TypeScript and better evaluate different type systems.

Using a Fibonacci function example, Jared shows how the algorithm creates type variables for declarations, then unifies expressions with expected types to discover concrete types through substitution. The unification process simply aims to make two types identical by substituting variables, revealing type errors when incompatible types meet.

Jared points out that while Hindley-Milner can't handle classes or inheritance like TypeScript, it's better at inferring function parameter types, recursive return types, and empty array types. For those interested in going deeper, he's created a type inference debugger tool that visualizes the entire process.

The talk positions type inference not just as a practical feature but as an exciting research area worth exploring further.

Jared Forosyth

Hindley and Milner Walk Into a Bar

Leah Thompson's talks how Twitch streaming could potentially create networking opportunities in tech. She recently started working at Laravel, she busts the myth that you need fancy gear—she started with just a MacBook Air, basic streaming software, and background music.

Reframing networking as genuine friendship-building, it's about making real friends, not just promoting yourself. Don't spam other streamers' chats with your links; instead, hang out in streams, share content across platforms, talk with your viewers, and support others through raids.

The benefits extend beyond Twitch: you get better at technical interviews, learn concepts deeper by teaching them, and unlock opportunities like job referrals and speaking gigs. Leah shared that her own first conference talk came because she had proof of explaining tech concepts on stream. Her story shows how putting yourself out there can open doors you didn't expect. 

Leah Thompson 

Networking Through Streaming on Twitch 

In this talk, Fran Zekan dives into how React Server Components (RSCs) and server actions unlock the ability to ship full-stack, composable components—components that encapsulate not just UI, but also data fetching and server logic. Drawing from patterns in Rails Engines and WordPress plugins, Fran explores how React’s evolving architecture makes it possible to publish and reuse self-contained components that truly work out of the box.

Fran Zekan

Shipping Reusable Full-Stack Components

Alex kicks things off by declaring his love for the web and excitement about how powerful browsers have become. Alex talks about how the web's biggest strength is its universality—you build something, send someone a link, and boom, they’re using it. No installs, no hassle. But for a long time, browsers were limited. You couldn’t do things like write to the file system or send push notifications without a server. So people used tools like Electron to get around that, but it kind of broke the magic of the web.

Now, though, we’re in a golden age of web APIs. Alex walks through a bunch of cool browser features that used to require plugins like Flash or extra tools, but are now built right in—from accessing microphones and geolocation to rendering 3D graphics. Then it get hands-on with the Web Audio API, showing how you can generate and manipulate sound waveforms, and even play instruments using MIDI devices in the browser. They also demo using a game controller with the Web Gamepad API. The whole talk is a love letter to the modern web and how much more capable it’s become—without losing the simplicity that makes it special.

The Weird Web

Eve Porcello from Moon Highway took the stage with a creative and playful talk blending AI, JavaScript, and live audience interaction. She introduced “Kira” - Kira Corbet (short for Keynote Information Regurgitation Assistant), a custom AI-powered presentation tool built with React, Next.js, p5.js, and the ML5.js library. Kira helped co-present by identifying images and demoing pitch detection powered by a pre-trained model.

Eve walked through how the app detects microphone input and translates pitch to musical notes, showcasing hooks and functions like usePitchDetection and startPitch. To test it out, six volunteers were called onstage to match musical notes—live! The app visualized detected notes in real-time. 

Kira Corbett

Building an AI Assistant to Deliver Your Best Presentations

In this session, Devin walks us through how to turn an idea into a fully functional web app in under 20 minutes using Cursor. Starting with dinnernotonyourown.com, an app designed to help developers plan dinner together, he demonstrates the entire process. 

First, Devin sets up the project with the Epic Stack (React, Node.js, PostgreSQL, Tailwind CSS), utilizing Cursor for seamless collaboration and code sharing. The tech stack integrates APIs like Google Places for restaurant searches, setting up back-end functionality with Express and Node, and crafting a clean, responsive front-end with React. Throughout the demo, Devin emphasizes Cursor's role in streamlining the development process, guiding us through its rules and steps for collaborative work, efficient debugging, and quick deployment. 

By the end, the app is fully functional, showcasing the power of the right tools, like Cursor, to turn ambitious ideas into real-world apps quickly.

Devon Neill

Idea to production in 20 minutes

Brooks Leibbrand, Developer Relations Manager at Remix, discusses the evolution of React Router and the key features introduced in React 19. He traces React Router’s development from its early days Router to Remix’s v6, focusing on improvements in app performance and user experience. 

Brooks highlights major updates in React 19, including enhanced hydration, support for custom elements, and better error handling. He also explains how React 19 improves compatibility with web components and uses modern web APIs for enhanced performance.  Brooks emphasizes how these advancements lead to a more efficient and streamlined developer experience.

Brooks Lybrand

What React 19 Means for React Router

Shruti shares her journey into working on accessibility full-time, and how it completely changed the way she thinks about building for the web.

One of her main points is that accessibility isn’t just about ticking off checkboxes or getting a high Lighthouse score. It’s about making things work for real people—people who use screen readers, rely on keyboards, or deal with cognitive or temporary disabilities. And the only way to do that well is to think about accessibility from the start—not bolt it on at the end.

She shares an example of a zigzag ramp that technically meets accessibility standards but clearly wasn’t built with real people in mind. It’s a perfect example of what happens when accessibility is treated as an afterthought. Instead, she makes the case that accessibility should be part of the process from the start—like mixing blueberries into muffin batter, not tossing them on top after it’s already baked.

She also gives super practical advice—like designing with enough contrast, thinking about zoom and readability, and keeping content short and clear. Her biggest message? Accessibility helps everyone. It's not a nice-to-have or something only big companies should care about—it’s just good design.

Shruti Kapoor

Building Accessible Web Apps

Everyone's talking about AI—even at the playground—and it’s starting to feel like developers are being replaced faster than we can keep up.

But Mark offers a reality check: this isn’t about resisting progress, it’s about honoring the effort it took to get here. Many developers switched careers or learned to code from scratch—now they're being told it was all for nothing. That’s exhausting.

The good news? We’re not powerless. These models were trained on our work, and we still play a vital role in shaping the future. The term “AI engineer” is evolving—from experts in machine learning to anyone using AI tools creatively.

Yes, the tech is moving fast. But we’re still here, still needed, and still capable of doing great things—even in the age of AI.



Mark Techson

Beyond Code Assist: Driving Impact as a next-gen Developer

Have you ever struggled to use a website with one hand, in bright sunlight, or on a bumpy ride? These everyday moments highlight the barriers that many people with disabilities face constantly—except they can't opt out. This talk explores why accessibility is essential for everyone, not just a select group.

Britney Elek, a senior engineer at GitHub, breaks down accessibility from a developer’s perspective. She shares practical ways to improve usability for all, from handling situational and physical limitations to considering bandwidth restrictions. You’ll learn about key principles (perceivable, operable, understandable, robust), common user barriers, and actionable techniques to start building more inclusive websites.

Brittany Ellich

Demystifying Web Accessibility for Developers

In this talk, Om Gate, a full-stack developer, explores the new features introduced in React 19, highlighting improvements in performance, efficiency, and developer experience.

React Compiler:


Optimizes code by eliminating unnecessary re-renders and computations, automating optimizations that were previously manual (e.g., useMemo, memo).

Server Components:


React 19 introduces Server Components, which enhance server-side rendering (SSR) by separating client and server rendering. Server components are rendered on the server and sent as a streamable data payload, reducing the time to interactivity and improving performance.

Server Functions:


Server Functions allow for secure, server-side operations like authentication without exposing sensitive logic to the client. This keeps the client-side experience faster and more secure.

React 19 brings several powerful enhancements, making apps more efficient and easier to develop, with a focus on automatic optimization and a better balance between server and client-side rendering.



Om Gate

What's New in React 19 And How to Use It

In this talk, Nicolas shares practical strategies for working with legacy code—code that’s not necessarily old, but code you’re afraid to change. He redefines legacy code as something that still delivers value but lacks the confidence needed for safe updates. To address this, Nicolas introduces hotspot analysis, a technique that uses Git history to identify risky, frequently changed parts of the codebase. He also explains approval testing (also known as characterization or snapshot testing), which allows you to create quick safety nets around existing code without writing detailed specs. These techniques help teams improve their codebases incrementally and safely—even under pressure.



Nicolas Carlo

4 Techniques to Tame a Legacy Codebase

In this talk, Nicolas, a developer and legacy code specialist, breaks down the misunderstood concept of refactoring—defined as: changing the structure of code without altering its behavior. That includes keeping bugs in place until structural improvements are made.

He emphasizes that true refactoring is only possible when behavior is verified, ideally through automated tests. If there are no tests, you're dealing with legacy code, and the paradox begins: you want to refactor safely, but need tests to do that—yet you can’t test without refactoring first.

Nicolas proposes a structured, recipe-driven approach to navigating this paradox, especially when working with untested legacy code. The core principle? A three-step loop:

Create new code → Replace occurrences → Delete the old code.

6 Safe Refactorings for Untested Legacy Code

It's great that there are so many options in web development, but choosing between tools and frameworks can lead to decision fatigue.

Kent C. Dodds addresses this issue by introducing the Epic Stack, an opinionated yet flexible stack designed to streamline the development process.

The Epic Stack aims to strike a balance between flexibility and over-abstraction by minimizing third-party services, minimizing setup friction, and optimizing for offline development. 

It's not just a project starter kit, but also a reference implementation with comprehensive documentation covering the "why and how" of each part of the stack.

Understanding the Epic Stack will equip you with a structured and adaptable approach to making more informed decisions in your development work, wheter you adopt the stack as-is or use it as a reference in creating your own!

Kent C. Dodds introduces the Epic Stack, a starter kit and reference implementation for building web applications.

The Epic Stack

In this talk, Kent C. Dodds discusses how adopting the philosophy of "Don't solve problems, eliminate them!" can lead to better long-term outcomes.

The concept of the Problem Tree is introduced as a way to think through a problem and its potential approaches to finding solutions (and more potential problems along the way).

Through "real life" examples like electric vehicles eliminating emissions to better air quality as well as code-specific examples including the role of React Hooks in evolving how components are built, Kent makes the case for shifting your problem-solving approach.

Kent C. Dodds discusses how adopting the philosophy of "Don't solve problems, eliminate them!" can lead to better long-term outcomes.

In this talk, Kent C. Dodds discusses the topic of problem-solving in both code and "real life" scenarios. Through a continuous cycle of identifying problems and eliminating them, software is able to evolve to become more ergonomic for the developer and give a better user experience.

Don't Solve Problems, Eliminate Them!

There are two ways to make code faster: Either deleting code, or reducing the amount of operations it is doing. But since deleting code isn't the most practical solution, reducing operations by caching is the preferred approach.

In this talk, Kent C. Dodds explores the fundamentals of caching through a series of illustrated examples.

Topics include working cache keys, cache management, rendering strategy tradeoffs, and other best practices.

Caching is a deep area, but after this talk you'll be prepared to dig in further to determine the best course of action for your own applications!

Kent C. Dodds discusses the fundamentals of caching including vocabulary, solid practices, general considerations, and recommendations.

Talks from Epic Web Conf 2025