Challenges of Developing for Slow Internet Connections: Be mindful of slow connection issues during development, prioritize optimization, and use tools like LogRocket to gain insights into user interactions and network requests.
As developers, we need to consider the challenges of developing for slow or spotty Internet connections, as not everyone has access to high-speed gigabit networks. In the latest Syntax episode, Scott Talinski and Wes Baus discussed this topic based on their personal experiences and the importance of being mindful of potential issues when developing locally, where everything loads instantly. They identified slow download speeds as the most common complaint, which can be exacerbated by multiple users sharing the same connection. LogRocket, a sponsor of the episode, was highlighted as a solution to help developers understand and fix issues in their production environments, providing valuable insights into user interactions, network requests, and error logs. Overall, the episode emphasized the importance of being aware of slow connection issues and adapting development practices to ensure a better user experience for all.
Designing for slow and unreliable internet connections: Designing for slow and unreliable internet connections is essential for creating user-friendly interfaces. Prioritize offline access and design for potential internet issues to create better user experiences for all users.
Designing interfaces for slow and unreliable internet connections is crucial, as many users still experience these issues despite having fast connections the majority of the time. This can be caused by various factors such as latency, intermittent connections, and slow internet service providers. Even in large cities, users may experience these issues due to their environment or location. One important consideration for designers is installing a service worker that will cache a site, allowing users to access the site even when they are offline. This can provide a great user experience and is worth the effort, as not all users may be thinking about the importance of designing for slow connections. Moreover, developers and designers should be mindful of their own internet connections and the potential issues they may face, even with seemingly fast connections. This can help them better understand the challenges their users face and design interfaces that are more robust and reliable. In conclusion, designing for slow and unreliable internet connections is an essential aspect of creating user-friendly interfaces, and it's important for developers and designers to keep this in mind, even if they themselves have fast connections. By prioritizing offline access and designing for potential internet issues, we can create better user experiences for all users, regardless of their internet connection speed or reliability.
Making vital information available offline: Caching data offline, like maps or address lookups, can enhance user experience in situations with limited data or slow internet connection, but there are limitations and complexities to consider.
Making vital information available offline can be crucial in certain situations, such as when someone has limited data or slow internet connection. Caching data offline, like maps or address lookups, can be especially helpful in these cases. However, there are limitations to what can be cached, such as video content. Service workers can help with caching, but they come with risks and complexities. Regarding loading UIs, skeleton screens can improve perceived loading times on slow connections, but they may also slow down the perceived loading time if the actual loading time is faster than a certain threshold. Ultimately, the choice between skeleton screens, loading spinners, or blank screens depends on the specific use case and user experience considerations.
Providing Clear Loading Indicators: Clear loading indicators are essential for a good user experience. React Suspense may address unpredictable loading times and lack of visual feedback, while handling form submissions and country selection requires better indicators to maintain user engagement and satisfaction.
Providing clear and effective loading indicators is crucial for a good user experience. The discussion highlighted issues with unpredictable loading times and the lack of visual feedback when making requests, which can lead to frustration and confusion. React Suspense, a potential future feature, aims to address this by allowing developers to control when and how loading components are displayed. Another issue raised was the need for better handling of form submissions and country selection, with some websites failing to provide adequate loading indicators or disabling the entire form during loading. Overall, it's essential to recognize the importance of providing clear and timely feedback to users during the loading process to maintain engagement and satisfaction.
Managing Network Requests and Handling Potential Issues: When dealing with country/state selection, manually changing settings can lead to duplicates. Handle XHR failures and cancel requests to reduce network traffic. Consider worst-case scenarios and provide clear feedback to users. Offer real-time upload progress indicators for large files.
Developing web applications involves managing various network requests and handling potential issues to ensure a smooth user experience. When dealing with country or state selection in an application, it's important to remember that users outside of specific regions may need to manually change their country and province settings, which can lead to duplicate requests and potential inefficiencies. Another crucial aspect is handling XHR (XMLHttpRequest) failures and canceling requests. While Fetch now supports abort controllers, many developers may not account for XHR requests being canceled, leading to unnecessary network traffic and potential issues. Additionally, considering worst-case scenarios, such as network interruptions or slow uploads, is essential. Providing clear and accurate feedback to users about the status of their requests can help alleviate frustration and uncertainty. Lastly, when dealing with large uploads, providing users with real-time feedback about the progress of their uploads is crucial. Misleading or unclear upload progress indicators can cause confusion and frustration for users, potentially leading to unnecessary worry or wasted time. By implementing proper error handling, canceling requests when necessary, and providing clear feedback to users, developers can create a more efficient and user-friendly web application experience.
Real-time feedback for large file transfers: Clear, real-time feedback is essential for efficiently managing large file transfers and ensuring a smooth development experience.
Key takeaway from this episode of Syntax is the importance of having real-time feedback when working with large file transfers or backups. Casey and Wes discussed their experiences with Time Machine and Backblaze, highlighting the value of knowing exactly how many files are being transferred and the current status of the process. This level of detail allows developers to quickly assess the situation and identify potential issues, saving time and reducing frustration. In the upcoming episodes, they will dive deeper into optimizing images, scripts, CSS, and video for slow connections, as well as strategies for handling intermittent connections and improving font loading. Overall, the key takeaway is that having clear, real-time feedback is essential for efficiently managing large file transfers and ensuring a smooth development experience.
Hasty Treat - Developing for Slow and Spotty Connections
Recent Episodes from Syntax - Tasty Web Development Treats
824: Taylor Otwell's opinions on PHP, React, Laravel and Lamborghini Memes
In this episode of Syntax, Wes and Scott talk with Taylor Otwell, the creator of Laravel. Taylor shares insights on his journey from creating Laravel in his free time to building a strong community and user base. He discusses Laravel’s growth, including the major features and tools that were developed over the years. Taylor also shares his outlook on the PHP ecosystem, productivity tips, and plans for Laravel Cloud, a new deployment platform for PHP and Laravel applications.
Show Notes
- 00:00 Welcome to Syntax!
- 00:29 Laracon
- 03:13 Laravel’s inspiration and features
- 07:18 Why don’t we have a “Laravel for JavaScript”?
- 09:02 What parts of Laravel came first?
- 10:07 The Laravel ecosystem
- 12:29 Laravel Cloud
- 14:00 What parts of Laravel are Intertia and what parts are React?
- 15:57 How many people are using Laravel?
- 16:59 Taylor’s productivity and development philosophy
- 24:43 Brought to you by Sentry.io
- 25:19 What makes a beautiful API?
- 29:33 Taylor’s thoughts on typing PHP
- 30:41 Features Taylor would like to see in PHP
- 33:03 What people get wrong about modern PHP
- 34:22 PHP stacks and CMSs
- 37:30 Taylor’s thoughts on WordPress
- 38:14 Lambo memes
- 43:44 Taylor’s coding setup
- 45:36 Sick Picks + Shameless Plugs
Sick Picks
- Taylor:
Shameless Plugs
- Taylor: Laravel Cloud
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
823: Is Cursor AI the VS Code Killer?
Scott and Wes serve up a discussion on AI coding assistants with a deep look at Cursor AI, exploring its unique features like multi-line auto-complete and Smart Rewrites. They also discuss why Cursor’s intuitive UI stands out and tackle the big question: is it worth the investment?
Show Notes
- 00:00 Welcome to Syntax!
- 01:16 Brought to you by Sentry.io.
- 01:48 Handling objections around AI assistants.
- 02:55 Context windows and how they’re improving functionality.
- 04:08 Cursor’s UI.
- 04:51 This is cool, why is it not a plugin?
- 08:12 What makes the UI interesting.
- 09:13 Smart Rewrites.
- 11:44 It can create multiple files.
- 13:05 Using the chat interface.
- 16:32 Another chat example.
- 20:22 The main features of Cursor.
- 21:55 Multi-line auto-complete.
- 23:55 Using docs for additional context.
- 27:26 AI is here to help you, not replace you.
- 33:27 Is it worth it?
- 33:55 The pricing.
- 44:10 Sick Picks & Shameless Plugs.
Sick Picks
- Scott: The Iron Historian, Scott’s Salt & Pepper Mills.
- Wes: Oxo Salt & Pepper Mills.
Shameless Plugs
- Scott: Syntax.fm Zed Theme.
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
822: Receipt Printer with JavaScript
Wes unveils his Hack-Week project —a thermal printer controlled by JavaScript that prints out Sentry.io errors in real-time. Scott and Wes dive into the nitty-gritty of how it works, from the ESC/POS protocol to tackling socket issues, and whether the project was worth the effort.
Show Notes
- 00:00 Welcome to Syntax!
- 00:38 Brought to you by Sentry.io.
- 01:10 What is Hack Week?
- 01:41 The project.
- 02:40 Why a receipt printer?
- 03:55 How do these printers work?
- 05:20 Communicating with the printer.
- 07:24 ESC/POS Encoder.
- ESC/POS Encoder.
- 08:42 Socket issues.
- 09:56 Using Transformers.js to stop ‘toxic comments’.
- 10:48 Back to socket issues.
- 12:18 Integrating with Sentry.
- 15:01 Printing images with Playwright.
- 16:17 Was it worth it?
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
821: Is Tauri the Electron Killer?
In this episode of Syntax, Wes and Scott talk with Daniel Thompson-Yvetot about Tauri. They dive into what Tauri is, the motivations behind its development, its open-source ecosystem, use cases, and more.
Show Notes
- 00:00 Welcome to Syntax!
- 02:01 What is Tauri?
- 02:59 What’s new in Tauri 2.0?
- 06:41 The benefits of Tauri over Electron
- 11:28 Can you use Node?
- 14:21 Mac, Linux, and Windows
- 25:05 How does Tauri make money?
- 30:05 Brought to you by Sentry.io
- 30:30 Accessing Swift from JavaScript
- 31:44 What’s the hardest part of a project like this?
- 37:00 Some of the apps that have shipped with Tauri
- 43:18 The future of Tauri
- 50:23 Sick Picks & Shameless Plugs
Links
Sick Picks
- Daniel: 5secondfilms
Shameless Plugs
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
820: Potluck: 8000 ESLint Errors × HTML Time Tag × 7 Meg React Bundle × CSS Modules
In this Potluck episode of Syntax, Scott and Wes answer your questions, from weighing the trade-offs between numerous small npm packages and a few larger ones to managing the challenges of work-from-home life. They also explore CSS modules, strategies for shrinking JavaScript bundles, and even where to find the best replacement ear cups for your headphones.
Show Notes
- 00:00 Welcome to Syntax!
- 00:38 Commentating basketball.
- 01:16 Brought to you by Sentry.io.
- 02:09 The video podcast doesn’t translate well to audio.
- 04:08 Many small npm packages vs a few large.
- 09:55 Developers dealing with WFH, ADHD, and kids.
- 15:59 CSS modules for scoping styles to components.
- 20:55 Scoped CSS in React?
- 23:21 Reducing JS bundle sizes.
- 29:44 Balancing learning, doing, and teaching.
- 33:04 Making maps local first.
- 36:20 How to pronounce ‘schema’.
- 37:09 HTML .
- 40:11 Where to get replacement ear cups for headphones?
- 42:21 ESLint and hiding errors.
- 48:48 Sick Picks & Shameless Plugs.
Sick Picks
- Scott: Allen Wrench Set.
- Wes: Clarkson’s Farm – Amazon Prime.
Shameless Plugs
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
819: Fun & Profitable Side Projects for Developers
Scott and Wes serve up a hasty discussion on side projects, sharing their latest Hack Week experiments and tips on how to turn fun ideas into profitable ventures. They cover everything from finding inspiration to choosing the right tech, and even offer advice on how to finish what you start.
Show Notes
- 00:00 Welcome to Syntax!
- 01:11 Brought to you by Sentry.io.
- 01:27 Wes’ Hack Week project.
- 02:30 Scott’s Hack Week project.
- 04:18 Where do you get ideas for side projects?
- 09:22 End goals for a side project.
- 14:47 Other end goals.
- 16:45 What tech should you use?
- 20:34 Keeping notes.
- 23:14 Finishing side projects.
- 26:39 Shameless Plugisode!
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
818: CJ × Hosting Meetups - Lunch and Learn
In this episode of Syntax, Wes and Scott talk with CJ Reynolds about the resurgence of meetups in a post-COVID world. They discuss the benefits of attending and speaking at meetups, and the logistics of organizing them. CJ also shares his experiences running the DenverScript meetup, including sourcing speakers, finding venues, and ensuring a welcoming community.
Show Notes
- 00:00 Welcome to Syntax!
- 01:35 Brought to you by Sentry.io
- 01:49 CJ’s history hosting meetups
- 06:35 How do you structure a meetup?
- 09:50 How do you raise awareness for a meetup and get people to attend?
- 13:27 How to pay for a meetup
- 15:22 How to get speakers at meetups
- 16:50 The length of these talks
- 17:03 Does live-streaming hurt attendance?
- 19:32 Is there a vetting process for finding speakers?
- 24:26 A meetup doesn’t have to be talks
- 27:48 What’s the worst part about hosting a meetup?
- 29:37 What was your first meetup like?
- 33:27 What’s the best meetup you’ve been to and why?
- 37:10 How to be a good attendee
- 40:45 Are meetups back?
- 44:00 Tips for organizing a great meetup
- 45:29 How to find a meetup
- 47:37 Sick Picks & Shameless Plugs
Sick Picks
Shameless Plugs
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
817: You Need These 30 Apps - PART 1
Scott and Wes kick off part 1 of a 2-part series, breaking down 30 must-have apps for web developers and productivity enthusiasts. From file management tools to media utilities, they cover everything you need to supercharge your workflow.
Show Notes
- 00:00 Welcome to Syntax!
- 01:03 Brought to you by Sentry.io.
- 01:27 File management applications.
- 18:43 Media applications.
- 18:52 Automator HIEC to JPG.
- 20:04 Rant on QuickView.
- 20:32 DVD idea.
- 22:06 IINA.
- 24:07 Capture One.
- 25:02 YouTube Enhance.
- 27:16 HandBrake.
- 28:05 MakeMKV.
- 30:33 Overkill for Mac.
- 33:42 Search by Image.
- 37:09 eqMac.
- 37:37 Utility applications.
- 40:19 Alternatives to popular Mac applications.
- 50:25 Sick Picks & Shameless Plugs.
Sick Picks
- Scott: Wilde Chips
- Wes: Apple TV+: The Big Conn
Shameless Plugs
- Scott: Syntax on YouTube
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
816: Why Your CSS Sucks
Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess.
Show Notes
- 00:00 Welcome to Syntax!
- 00:33 Breakdancing in the Olympics.
- 05:29 Brought to you by Sentry.io.
- 05:44 Why your CSS sucks.
- 07:01 You’re styling the wrong element.
- 11:01 Nesting too deep.
- 12:37 You don’t understand specificity.
- 14:56 Your classes don’t use a system.
- 16:24 You’re using values instead of CSS vars.
- 20:16 You don’t understand block vs inline vs inline-block.
- 21:16 You aren’t using the right tool for the job.
- 24:15 You’re setting the value in too many places.
- 24:31 You’re scoping to tightly or not tightly enough.
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
815: Deno 2 with Ryan Dahl
In this episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno 2.0, its new features and use of web standards, and how it seamlessly integrates with popular frameworks like Next.js. Ryan shares insights on the motivations behind Deno’s creation, its emphasis on simplicity and security, and offers his take on the evolving JavaScript ecosystem.
Show Notes
- 00:00 Welcome to Syntax!
- 00:34 What is Deno?
- 05:08 Deno 2.0
- 07:49 NPM compatibility
- 09:40 What parts of Node aren’t doable in Deno?
- 11:22 Do we need a hard break from Require?
- 13:51 Package management
- 16:25 Security and performance benefits of Deno
- 20:57 Brought to you by Sentry.io
- 20:57 Thoughts on Bun and Node additions
- 26:25 Ryan’s favorite Deno projects
- 28:42 Will we ever see a unified file system API?
- 31:49 Typescript
- 36:12 Jupyter Notebooks with Deno
- 39:11 AI and WASM in JavaScript
- 42:01 Deno 2.0 features and future
- 43:08 Sick Picks & Shameless Plugs
Sick Picks
- Ryan: McCarren Park
Shameless Plugs
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Related Episodes
Connectors, enablers and scouts: Innovation, financial services, Big Ben and UX
Innovative intranets from around the globe (10-minute talk)
13. Giddy: Unlocking DeFi for the Masses with Eric & Ethan Parker
Welcome to EARLY, the podcast about web3 business from Bankless Consulting.
DSide's guests today are Eric and Ethan Parker, the founders of Giddy, a mobile crypto wallet that is designed to make self-custody easy and accessible for everyone. In this episode, they discuss this mission and how their focus on User Experience is crucial in achieving this goal.
The idea for Giddy started as an ad-hoc consulting business, where they showed clients how to onboard onto DeFi and manage their private keys. They discovered that private keys were a significant barrier to entry for many people because of their complexity. Giddy's breakthrough was finding a balance between security and ease-of-use and enabling average people to recover their private keys if mismanaged, reducing the risk of a single point of failure.
In terms of upcoming features for Giddy, they are focused on improving staking efficiency, increasing the number of staking pools provided by the app, and onboarding onto ETH Mainnet. The founders also discuss how they see DeFi continuing to disrupt the traditional finance industry. They believe that DeFi will eventually become mainstream, and traditional financial institutions will have to adapt or risk becoming irrelevant.
Overall, Eric and Ethan Parker's insights into the current and future state of DeFi wallet technology were fascinating, and their mission to make DeFi accessible to everyone is admirable. It will be exciting to see how Giddy continues to evolve and innovate in this space!
***Timestamps***
0:00 - Eric & Ethan Parker Background
4:30 - Pathway from intro into DeFi to the founding of Giddy
7:05 - The Mission of Giddy
10:41 - High-level background on Gas Fees on Giddy
13:25 - Why did you choose Polygon for your first blockchain?
15:20 - What are some key considerations in Private Key Technology?
30:11 - Thoughts on the current-state of the native mobile wallet sector?
24:21 - Giddy’s future blockchain targets
30:11 - Thoughts on the future-state of the native mobile wallet sector?
32:24 - New features upcoming for Giddy
34:20 - How do you see DeFi continue to disrupt the TradFi industry?
38:20 - What other industries are ripe for Web3 Tech?
***Additional Resources***
- Giddy Website
- Giddy Twitter
- Ethan Parker Twitter
- Eric Parker Twitter
- Giddy Discord invite link
- Giddy Reddit
- LinkedIn Page
If you found this show informative, enlightening, fun, or just plain fire - please leave us a review on Apple podcasts to help us grow!
Be sure to follow us and our guest on social media to unlock the latest web3 alpha.
***Links***
Agile, design thinking and you…
#1137 - Duncan Trussell
