Developer Insights
Join millions of viewers! Our engineers craft human-written articles solving real-world problems weekly. Enjoy fresh technical content and numerous interviews featuring modern web advancements with industry leaders and open-source authors.
Understanding the Difference Between `:focus` and `:focus-visible` in CSS
Understanding the Difference Between :focus and :focus-visible in CSS I have learned my fair share about the importance of keyboard accessibility, so I know that visual indication of the focused element is very important. But the well-known :focus pseudo-class is not always the best fit for this job. That's where :focus-visible comes in. Let's look at the differences between these two pseudo-classes and explore the best practices for using them effectively. What is the :focus Pseudo-Class? The :focus pseudo-class is a CSS selector that applies styles to any element that receives focus, regardless of how that focus was triggered. This includes focus events from keyboard navigation, mouse clicks, and touch interactions. Example Usage of :focus ` In this example, the button will display a blue outline whenever it is focused, whether the user clicks on it with a mouse, taps it on a touchscreen, or navigates to it using the keyboard. What is the :focus-visible Pseudo-Class? The :focus-visible pseudo-class is more specialized. It only applies styles to an element when the browser determines that the focus should be visible. This typically occurs when the user navigates via the keyboard or assistive technologies rather than through mouse or touch input. Example Usage of :focus-visible ` Here, the button will only show a blue outline when focused through keyboard navigation or another input method that usually requires visible focus indicators. Key Differences Between :focus and :focus-visible :focus - Behavior: Applies to any element that receives focus, regardless of the input method. - Use Cases: Ensures that all interactions with the element are visually indicated, whether by mouse, keyboard, or touch. :focus-visible - Behavior: Applies styles only when the focus should be visible, such as using a keyboard or assistive technology. - Use Cases: Ideal for scenarios where you want to provide focus indicators only to keyboard and assistive technology users while avoiding unnecessary outlines for mouse and touch users, typically required by design. Accessibility Implications :focus - Pros: - Guarantees that all users can see when an element is focused, which is critical for accessibility. - Cons: - Can lead to a suboptimal experience for mouse users, as focus styles may appear unnecessarily during mouse interactions. :focus-visible - Pros: - Enhances user experience by showing focus indicators only when necessary, thus keeping the interface clean for mouse and touch users. - Tailors the experience for keyboard and assistive technology users, providing them with clear visual cues. - Cons: - Additional considerations may be required to ensure that focus indicators are not accidentally omitted, especially in older browsers that do not support :focus-visible. - There may be cases where you want to show focus indicators for all users, regardless of input method. Best Practices for Using :focus and :focus-visible To achieve the best accessibility and user experience, combining both :focus and :focus-visible in your CSS is often a good idea. Combining :focus and :focus-visible ` Here is a Stackblitz example of what such styling could look like for you to try out and play with. Additional Tips - Test with Keyboard and Assistive Technology: Ensure that your web application is navigable using a keyboard (Tab, Shift + Tab, etc.) and that focus indicators are visible for those who rely on them. It's never a bad idea to include accessibility testing in your e2e testing suite. - Provide Clear Focus Indicators: Make sure that focus indicators are prominent and easy to see. A subtle or hard-to-spot focus indicator can severely impact accessibility for users who rely on keyboard navigation. Conclusion The :focus-visible pseudo-class offers a more refined way to manage focus indicators, improving accessibility and user experience, particularly for keyboard and assistive technology users. By understanding the differences between :focus and :focus-visible, and applying best practices in your CSS, you can create more accessible and user-friendly web applications. Remember, accessibility should never be an afterthought. By thoughtfully applying focus styles, you ensure that all users, regardless of how they interact with your site, can easily navigate and interact....
Nov 8, 2024
3 mins
Fly.io for Easier Cloud Deployment with Annie Sexton
Annie Sexton, Developer Advocate at Fly.io, to discuss Fly.io’s approach to simplifying cloud deployment. Annie shares Fly.io's unique position as a public cloud that offers the flexibility of infrastructure control with a streamlined developer experience. They explore Fly.io’s private networking and distributed app capabilities, allowing developers to deploy applications close to users worldwide with ease. Annie also addresses common challenges in distributed systems, including latency, data replication, and the balance between global reach and simple, single-region projects. Chapters: - 00:00 - 01:32 Introduction to the Modern Web Podcast and Guests - 01:33 - 04:00 Overview of Fly.io and Annie’s Role as Developer Advocate - 04:01 - 06:35 What Makes Fly.io Stand Out Among Cloud Platforms - 06:36 - 08:57 Distributed Applications: Benefits and Use Cases - 08:58 - 11:28 Understanding Distributed Web Servers and Private Networking - 11:29 - 13:49 Challenges in Distributed Data and Replication Techniques - 13:50 - 16:12 Fly.io’s Unique Solutions for Data Consistency - 16:13 - 18:34 When to Consider a Distributed Setup for Your Application - 18:35 - 20:35 Tools and Tips for Evaluating Geographical Distribution Needs - 20:36 - 22:22 Simplifying Global Deployment with Fly.io’s Command Features - 22:23 - 24:18 Considerations for Latency and Performance Optimization - 24:19 - 26:45 Balancing Simplicity with Advanced Control for Developers - 26:46 - 29:04 Easy Deployment for Hobbyists and Smaller Projects - 29:05 - 31:27 Getting Started on Fly.io with Fly Launch - 31:28 - 33:48 Developer Advocacy and Meeting Diverse Needs in the Cloud - 33:49 - 36:15 Catering to Beginners and Experienced Developers Alike - 36:16 - End Closing Remarks and Where to Find Fly.io and the Hosts Follow Annie Sexton on Social Media Linkedin: https://www.linkedin.com/in/annie-sexton-11472a46/ Github: https://github.com/anniebabannie Sponsored by This Dot: thisdot.co...
Nov 6, 2024
2 mins
How to Create a Memorable Conference Experience with Vincent Mayers
In this episode of the Modern Web Podcast, Danny Thompson, Director of Technology at This Dot Labs, sits down with Vincent Mayers, a seasoned tech conference organizer with over 15 years of experience. They discuss the intricacies of running successful conferences, including the challenges of selecting event locations, building community engagement, and creating memorable experiences for attendees. Vincent also shares insights into the evolution of tech conferences, from the importance of shorter talks to the value of the "hallway track" for networking. Tune in for an inside look at how these events shape the tech ecosystem and tips for organizing your own conferences! Chapters - 00:00 - Introduction - 01:45 - Vincent Mayers' Background - 03:50 - Choosing Conference Locations - 06:10 - Building Community and Spreading the Word - 08:40 - Sponsorship and Funding Challenges - 11:00 - Securing Speakers for Tech Conferences - 14:20 - Improving the Conference Experience - 16:30 - Badge Design and the Attendee Experience - 18:50 - Engaging Attendees Beyond Talks - 21:00 - The Role of Tech Conferences in the Java Ecosystem - 23:12 - Attendees Still Using Older Java Versions - 26:00 - Balancing Cutting-Edge Tech with Fundamentals - 28:15 - Evolving Attention Spans in Tech Conferences - 30:00 - The Importance of the Hallway Track - 33:19 - Closing Remarks Follow Vincent Mayers on Social Media Twitter: https://x.com/vincentmayers Linkedin: https://www.linkedin.com/in/vincentmayers/ Github: https://github.com/vincentmayers Sponsored by This Dot....
Nov 6, 2024
1 min
The “Bottom-Up” Roadmap to Leadership with Ty Allen, Fractional CPO at Neso Advisors
Ty Allen, Founder and Fractional CPO at Neso Advisors, discusses his product management journey, from his early days at Georgia Tech and a successful startup to leading teams across various industries. Ty shares valuable insights on building adaptable roadmaps, balancing tech debt with feature development, and connecting product strategy to company vision. He also highlights the importance of a “bottom-up” roadmap approach and maintaining flexibility while ensuring strategic alignment. Chapters - 00:00 - 01:32 — Introduction to Leadership and Product Management - 01:33 - 04:16 — The Early Days: From Georgia Tech to Startup Success - 04:17 - 08:03 — Product Strategy and Roadmap Essentials - 08:04 - 12:23 — The Power of Adaptable Roadmaps - 12:24 - 16:30 — Managing Tech Debt and Security in Roadmaps - 16:31 - 19:52 — The Commercial Lens: Monetizing Features and Value Creation - 19:53 - 23:23 — Balancing Innovation and Maintenance - 23:24 - 27:29 — Aligning Product Teams with Company Goals - 27:30 - End — Final Thoughts: Roadmap Wisdom and Career Advice Follow Ty Allen on Social Media Linkedin: https://www.linkedin.com/in/tylerallen/ Sponsored by This Dot: thisdot.co...
Nov 4, 2024
1 min
Angular Signals for Simpler State Management and DOM Performance
In this episode of the Modern Web Podcast, host Rob Ocel is joined by Adam Rackis, Danny Thompson, and guest Braydon Coyer, Senior Front-End Developer at LogicGate to talk about using Angular Signals for improved state management and DOM performance. Braydon explains how Signals simplify Angular development and offer better readability and efficiency compared to traditional methods like RxJS. The conversation also touches on hiring in the AI era, discussing challenges around take-home tests and live coding, and how AI tools like ChatGPT are changing the interview process. Chapters - 00:00 - Introduction - 00:57 - The Angular Renaissance - 02:24 - Signals in Angular - 03:27 - Transitioning to Signals - 04:19 - Signals in Utility Development - 05:09 - RxJS and Signals - 07:52 - Signals vs Other State Management Solutions - 09:34 - Testing Signals - 10:29 - Control Flow and Standalone Components in Angular - 12:02 - Angular's Evolution and Accessibility - 13:28 - Angular’s Framework Governance - 17:10 - Hiring in the Age of AI - 19:15 - Pair Programming and Real-Time Problem Solving - 22:24 - The Role of AI in Interviews - 27:58 - Wrapping Up Follow Braydon Coyer Twitter: https://x.com/BraydonCoyer Linkedin: https://www.linkedin.com/in/braydon-coyer/ Github: https://github.com/braydoncoyer...
Oct 30, 2024
1 min
Java’s AI Evolution: Semantic Caching JVM, and GenAI Architectures with Theresa Mamarella & Brian Sam-Bodden
In this episode of the Modern Web Podcast, Danny Thompson, Director of Technology at This Dot Labs, hosts a conversation with Theresa Mammarella, JVM Engineer at IBM, and Brian Sam-Bodden, Applied AI Engineer at Redis. They explore their talks at JCONF in Dallas, Texas, covering topics like GenAI architectures in the Java community and OpenJDK's Project Valhalla. Their conversation covers Java’s evolution, AI applications, semantic caching, and how these technologies are impacting development workflows and performance optimization. Chapters - 00:00 - Introduction - 01:00 - Brian on GenAI in the Java Community - 01:47 - Java’s Safe Evolution Path - 02:17 - Teresa on Project Valhalla - 03:54 - Value Classes and Performance - 04:33 - Brian on Semantic Caching - 06:54 - Challenges of Rewording Prompts - 09:15 - What is RAG Architecture? - 11:34 - Java’s Role in AI - 13:57 - Cost of LLMs and Caching Strategies - 15:57 - Teresa on Java’s Future - 18:22 - Learning Resources for Java Developers - 20:44 - Addressing Misconceptions About Java - 22:39 - Final Thoughts Follow Theresa Mammarella & Brian Sam on Social Media Theresa Mammarella Twitter: https://x.com/t_mammarella Brian Sam-Bodden Twitter: https://x.com/bsbodden Theresa Mammarella Linkedin: https://www.linkedin.com/in/tmammarella/ Brian Sam-Bodden Linkedin: https://www.linkedin.com/in/sambodden/...
Oct 29, 2024
1 min
How to Create a Website from Scratch with Nuxt Studio, Nuxt Content, and Nuxt UI
In this JS Drop, Simone is joined by Ferdinand and Baptiste from Nuxt Labs to explore the latest updates in the Nuxt ecosystem. Ferdinand kicks off with an introduction to Nuxt Labs and its dual mission of supporting the open-source Nuxt framework while building sustainable products like Nuxt Studio, Nuxt Content, and Nuxt UI. Baptiste takes over with a live demo, showcasing how to create a website from scratch using Nuxt Studio. He demonstrates the platform’s powerful content management features, showing how Nuxt Content integrates to manage and edit website content easily. Baptiste highlights Nuxt UI components and how they simplify coding by providing ready-to-use elements. The demo also features live editing and previews, making collaboration easier for both technical and non-technical users. Ferdinand wraps up by emphasizing Nuxt Studio’s user-friendly design and hints at exciting future updates, including branch management and internationalization support. This session highlights Nuxt Labs' commitment to enhancing the Vue.js ecosystem with versatile, user-focused tools. Follow Baptiste Leproux and Ferdinand Coumau: Baptiste Twitter: https://x.com/larbish Ferdinand Twitter: https://x.com/CoumauFerdinand Baptiste Linkedin: https://www.linkedin.com/in/baptiste-leproux-618842b0/ Ferdinand Linkedin: https://www.linkedin.com/in/ferdinand-coumau-nuxt/ Sponsored by This Dot...
Oct 25, 2024
1 min
The HTML Dialog Element: Enhancing Accessibility and Ease of Use
The new dialog element streamlines the implementation of accessible dialogs, modals, and other kinds of non-modal dialogs....
Oct 25, 2024
4 mins
Unit Testing, TypeScript, and AI: Enhancing Code Quality and Productivity in 2024
In this episode of the Modern Web Podcast, host Rob Ocel and co-hosts Adam Rackis, Tracy Lee, and Danny Thompson discuss the importance of unit testing for maintaining code quality and reliability, emphasizing its role in scaling projects and ensuring long-term stability. The conversation also highlights the benefits of TypeScript in improving code safety and developer productivity, sharing experiences on how it catches errors early in the process. They also examine the growing role of AI in automating development tasks, weighing the efficiency gains against the risks of over-reliance on automation while stressing the importance of understanding the underlying processes. Chapters 00:00 - Introduction and Episode Overview 02:59 - The Importance of Unit Testing 10:03 - Best Practices for Implementing Unit Tests 17:15 - TypeScript’s Role in Code Safety and Productivity 2:30 - AI in Software Development: Automating Tasks 29:16 - Balancing AI Automation with Developer Expertise 32:07 - Final Thoughts and Closing Remarks Sponsored by This Dot: thisdot.co...
Oct 23, 2024
1 min
Lessons from Building Netlify with Matt Biilmann, CEO at Netlify
Matt Biilmann, CEO and co-founder of Netlify, for an in-depth discussion about the company's incredible growth journey—from a bootstrapped two-person startup to a global platform serving over 5 million developers and powering sites for major companies like Unilever and Asana. Matt reflects on the key lessons he’s learned while scaling Netlify, including raising $212 million in venture capital and growing the team to 200 employees. He shares valuable insights on balancing day-to-day operations with long-term vision, navigating the challenges of hiring experienced leaders, and fostering a culture of clarity and focus. Matt also highlights the importance of reducing friction for web development teams and ensuring fast time-to-market for web projects. Chapters - 00:00 - Introduction - 01:00 - The Origins of Netlify - 02:30 - Netlify’s Growth Journey - 04:00 - Impact of Netlify on the Web Ecosystem - 05:30 - Building the Right Team - 07:45 - From Developer to CEO: Evolving as a Leader - 10:00 - The Balance Between Vision and Operations - 12:00 - Delegating vs. Staying Hands-On - 15:30 - Hiring Experienced Leaders - 18:00 - Building Diverse Teams - 20:00 - Intuition in Leadership - 22:30 - Simplifying Goals and Objectives - 25:00 - The Shift in Tech Leadership - 28:00 - Changing Expectations for Engineers - 30:00 - Advice for Startup Founders - 32:00 - Where to Find Matt Online - 33:00 - Conclusion Follow Matt Biilmann on Social Media Twitter: https://x.com/biilmann Linkedin: https://www.linkedin.com/in/mathias-biilmann-christensen-a5a3805/ Github: https://github.com/biilmann Sponsored by This Dot: thisdot.co...
Oct 22, 2024
2 mins
"How do I undo my most recent commit?" - Mastering the git reset command
Ever messed up a commit? Learn how to undo it like a pro! Our new blog post breaks down the git reset command, helping you navigate those "oops" moments with confidence....
Oct 18, 2024
2 mins
How a First Reddit Engineer Builds Strong Engineering Cultures with Jeremy Edberg
In this episode of the Leadership Exchange, host Tracy Lee welcomes Jeremy Edberg, CEO of DeVos and former first employee at Reddit, to discuss leadership, engineering culture, and team building. They review Jeremy's career journey from Reddit to Netflix and beyond, sharing insights on scaling engineering teams, the impact of culture on development practices, and hiring strategies. Jeremy reflects on the evolution of his management style, emphasizing the importance of human connection in leadership, while also sharing lessons learned from his time at companies with strong engineering cultures. Chapters - 00:00 - Introduction and Guest Welcome - 00:48 - Jeremy’s Background and Career Journey - 01:51 - Introduction to DeVos and Its Founders - 02:30 - Throwback: Reddit Meetups and "Chad Berg" Chanting - 03:05 - Rebuilding the Reddit Engineering Team - 05:16 - Challenges of Scaling and Maintaining Reddit's Culture - 07:08 - The Role of Code in Driving Team Culture - 08:14 - Differences in Team Dynamics at Reddit and Netflix - 09:07 - Working at Netflix vs. Cloudflare - 09:38 - The "Sports Team, Not a Family" Philosophy at Netflix - 11:21 - Understanding the Keeper Test at Netflix - 14:27 - Evolving Netflix's Culture to Support Diversity and Inclusion - 16:05 - Misconceptions About Netflix's Work Environment - 17:17 - Work-Life Balance at Netflix: High Performance in a Chill Setting - 20:28 - Key Elements of a Good Engineering Culture - 23:09 - How Jeremy's Leadership Style Has Evolved - 24:34 - Advice for Building Successful Engineering Teams - 25:26 - Closing Remarks and Sponsor Thanks - 26:13 - Where to Follow Jeremy Online Follow Jeremy Edberg Twitter: https://x.com/jedberg Linkedin: https://www.linkedin.com/in/jedberg/ Sponsored by Wix Studio: wix.com/studio...
Oct 15, 2024
2 mins
Let's innovate together!
We're ready to be your trusted technical partners in your digital innovation journey.
Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.