General

12 Web Development Podcasts That Inform and Inspire

May 5, 2022

6 min read

Podcasts can be a great source of entertainment and education. But with the sheer volume of podcasts out there, sometimes it is hard to know what to listen to.

In this article, I will share my favorite podcasts to listen to that discuss the latest in web technologies and careers.

Modern Web
CodeNewbie
The Changelog: Software Development, Open Source
JS Party: JavaScript, CSS, Web Development
Front End Happy Hour
Developer Tea
React Podcast
JavaScript Jabber
Syntax
HTML All The Things
Virtual Coffee Podcast
freeCodeCamp

Modern Web

The Modern Web podcast explores the latest in web development by interviewing leading industry professionals. Past guests have included Evan You (Creator of Vue.js), Jem Young (Engineering Manager at Netflix) and Mark Thompson (Developer Relations Engineer at Google).

The hosts are all Software Architects at This Dot Labs and they do a great job coming up with thought provoking questions for the guests.

My favorite episode is when Jesse Tomchak interviewed Jem Young and discussed his role as an engineering manager and the challenges he has faced so far.

CodeNewbie

If you are new developer and looking to learn more about the industry, then CodeNewbie is the podcast for you. Saron Yitbarek (host) and the rest of the team do a great job selecting a diverse range of topics and make it accessible to all developers.

Some of the guests have included Danny Thompson, Arit Amana, Cassidy Williams, Quincy Larson and Angie Jones.

My favorite episode is titled How freeCodeCamp has evolved over time with Quincy Larson. This episode chronicles Quincy's journey with freeCodeCamp and covers future developments for the organization.

The Changelog: Software Development, Open Source

The Changelog has over 400 episodes of interviews with leading industry professionals discussing everything from AI, to open source, UI/UX, engineering management, and more.

Adam Stacoviak and Jerod Santo do a great job creating engaging conversations with their guests and keeping it educational for the audience. Some of their guests have included Feross Aboukhadijeh, Annie Sexton and legendary computer scientist Brian Kernighan.

My favorite episode would have to be the interview on Brian Kernighan as he shares his thoughts on how software has evolved over his 50+ year career.

JS Party: JavaScript, CSS, Web Development

If you are interested in learning about all things JavaScript, then JS Party is the place to start. You will learn about the latest developments in popular web technologies, performance, open source projects and more.

Each week, they have a different set of hosts that include Jerod Santo, Feross Aboukhadijeh, Kevin Ball, and Amelia Wattenberger. Some of their previous guests have included Kent Dodds, Zach Leatherman, and Jen Looper.

My favorite episode is titled Remix helps bridge the network chasm where Kent Dodds talks about this new framework and why it is a good addition to the web ecosystem.

Front End Happy Hour

If you are looking for a laid back podcast discussing all things frontend web development, then take a listen to Front End Happy Hour.

Each week, a panel of Software Engineers from Netflix, Twitch, & Atlassian will invite guests to discuss their experiences with frontend development over a casual conversation with drinks. Previous guests have included Sumana Mohan, Joe King, Nazanin Delam, and Dan DiGangi.

My favorite episode is titled Standing out in a crowded bar where the hosts bring on Taylor Desseyn and Jono Grayson to discuss ways to stand out in the job market.

Developer Tea

Developer Tea produces short impactful episodes on career advancement. Jonathan Cutrell (host) covers a variety of topics including effectively working with management, staying motivated, and building better work relationships with your team.

A good episode to listen to would be Swizec Teller's two part episode on the Senior Engineering Mindset.

React Podcast

If you learning about React and want to hear about the latest developments, then the React Podcast is for you.

Michael Chan (host) interviews leading professionals about their thoughts on the industry and all things React development. Previous guests have included Shawn Swyx Wang, Cassidy Williams and Kent C. Dodds.

My favorite episode is titled Kent C. Dodds on Epic React where they discuss his popular React course and how it will help you level up as a developer.

JavaScript Jabber

JavaScript Jabber covers all things JavaScript including frontend architecture, Web3, React, D3 and more. The panel of hosts include Aimee Knight, AJ O'Neal, Charles Max Wood, Dan Shappir, and Steve Edwards.

My favorite episode is about Sam Sycamore's story on transitioning from landscape construction worker to full time developer.

Syntax

The Syntax podcast explores all this web related including the latest in Gatsby, AWS, Web3, Remix and more. Wes Bos and Scott Tolinski (hosts) do a great job creating fun and educational content for their listeners.

My favorite episode to listen to would be the JavaScript × STUMP’D episode where the two hosts try to answer JavaScript interview questions.

HTML All The Things

HTML All The Things cover all things web development, web design and small business. Matt Lawrence and Mike Karan (hosts) discuss a variety of topics including entrepreneurship, how to handle stress, Web3, web performance, and more.

My favorite episode to listen to is the one titled The Dark Side of Web Development which provides a look into the not so pleasant side of this industry.

Virtual Coffee Podcast

Virtual Coffee is a community of developers at all stages of their software journey who collaborate and support each other along the way. Each week, Dan Ott and Bekah Hawrot Weigel interview one of the community members to discuss their journey into tech.

My favorite episode is titled Yolanda Haynes - Breaking into Tech: It Takes Time which follows her journey into web development and the lessons she learned along the way.

There are plenty of inspiring stories to listen to on The Virtual Coffee Podcast that are both entertaining and educational.

freeCodeCamp

freeCodeCamp is an educational non-profit company with a mission to provide free programming education to everyone regardless of age, race or socioeconomic background. Their podcast features a lot of stories on how career changers made the transition into web development.

My favorite episode is titled How a former music teacher taught herself to code and landed a job at GitHub.

Conclusion

I hope you enjoyed my list of 12 podcasts that will inform and inspire your coding journey! I enjoy listening to these podcasts during work and I hope you do too.

Here are some more podcasts I am looking forward to exploring in the future and have been well received by the developer community.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Jessica Wilkins

Jessica Wilkins is a classical musician turned Software Engineer. Prior to joining the tech industry, she spent her time running her own sheet music company (JDW Sheet Music) as well as performing and teaching in Los Angeles, CA. She enjoys working with React and TypeScript. She is also a prolific technical writer for freeCodeCamp.

@codergirl1991 @jdwilkin4

Performance Analysis with Chrome DevTools

When it comes to performance, developers often use Lighthouse, Perfbuddy, or similar performance analysis tools. But when the target site has protection against bots, getting information is not that simple. In this blog post, we are going to focus on where to look for signs of performance bottlenecks by using Chrome Devtools. Preparations Even when access to automated performance analysis tools is restricted, the Network, Performance, and Performance Insights tabs of Chrome Devtools can still be leveraged. To do that, some preparations can be made. When starting our analysis, I recommend opening the page we want to analyse in incognito mode. So we separate the analysis from our regular browser habits, cookies, and possible browser extensions. When we load the page for the first time, let's make sure we disable caching in the Network tab, so resources are always fetched when we reload. Some pages heavily rely on client-side storage mechanisms such as indexedDB, localStorage, and sessionStorage. Cookies can also interfere. Therefore, it's good to leverage the "Application" tab's Clear site data button to make sure lingering data won't interfere with your results. Some antivirus software with network traffic filtering can also interfere with your requests. They can block, slow down, or even intercept and modify certain network requests, which can greatly affect loading time and the accuracy of your results. If the site under analysis is safe, we recommend disabling network traffic filtering temporarily. We strongly suggest just looking at the page and reloading it a few times to get a feeling of its performance. A lot of things cannot be detected by human eyes, but you can look for flickers and content shifts on the page. These performance issues can be good entry points to your investigation. Common bottlenecks: resources Let's start at the Network tab, where we can identify if resources are not optimised. After we reload the page, we can use the filters on the network tab to focus on image resources. Then we can see the information of these requests, including the size of the images, the time it took to load each image, and any errors that occurred. The waterfall chart is also useful. This is where you can see the timing of each image resource loading. We should look for evidence that the image resources are served from a CDN, with proper compression. We can check the resources one by one, and see if they contain Content-Encoding: gzip or Content-Encoding: br headers. If these headers are missing, we found one bottleneck that can be fixed by serving images using gzip or brotli compression while serving them. Headers on resource requests can tell other signs of errors. It can also happen that images are served from a CDN, such as fastly, but if there are fastly-io-error headers on the resources, it can mean that something is misconfigured. We also need to check the dimensions of the images. If an image is larger than the space it's being displayed in, it may be unnecessarily slowing down the page. If we find such bottlenecks, we can resize the images to match the actual dimensions of the space where they are being displayed to improve loading time. Server-side rendering can improve your SEO altogether, but it is worth checking the size of the index.html file because sometimes it can be counterproductive. It is recommended to try and keep HTML files under 100kb to keep the TTFB (Time To First Byte) metric under 1 second. If the page uses polyfills, it's worth checking what polyfills are in use. IE11 is no longer supported, and loading unnecessary polyfills for that browser slows down the page load time. Performance Insights Tab The performance Insights Tab in Chrome DevTools allows users to measure the page load of a website. This is done by running a performance analysis on the website and providing metrics on various aspects of the page load process, such as the time it takes for the page to be displayed, the time it takes for network resources to be loaded, and the time it takes for the page to be interactive. The performance analysis is run by simulating a user visiting the website and interacting with it, which allows the tool to accurately measure the performance of the page under real-world conditions. This information can then be used to identify areas of the website that may be causing slowdowns and to optimize the performance of the page. Follow the steps to run an analysis: 1. Open the Chrome Devtools 2. Select the "Performance insights" tab 3. Click on the Measure page load button The analysis provides us with a detailed waterfall representation of requests, color coded to the request types. It can help you identify requests that block/slow down the page rendering, and/or expensive function calls that block the main thread. It also provides you with information on important performance metrics, such as DCL (DOM Content Loaded), FCP (First Contentful Paint), LCP (Largest Contentful Paint) and TTI (Time To Interactive). You can also simulate network or CPU throttling, or enable the cache if your use case requires that. DCL refers to the time it takes for the initial HTML document to be parsed and for the DOM to be constructed. FCP refers to the time it takes for the page to display the first contentful element, such as an image or text. LCP is a metric that measures the loading speed of the largest element on a webpage, such as an image or a block of text. A fast LCP helps ensure that users see the page's main content as soon as possible, which can improve the overall user experience. TTI refers to the time it takes for the page to become fully interactive, meaning that all of the necessary resources have been loaded and the page is responsive to user input. Performance Tab The "start profiling and reload page" button in the Performance tab of Chrome DevTools allows users to run a performance analysis on a website and view detailed information about how the page is loading and rendering. By clicking this button, the tool will simulate a user visiting the website and interacting with it, and will then provide metrics and other information about the page load process. Follow the steps to run an analysis 1. Open the Chrome Devtools 2. Select the "Performance" tab 3. Click on the button with the "refresh" icon A very useful part of this view is the detailed information provided on the main thread. We can interact with call stacks and find functions that might run too long, blocking the main thread, and delaying the TTI (Time To Interactive) metric. Selecting a function gives all kinds of information on that function. You can see how long that function was running, and what other functions it called, and you can also directly open that function in the Sources tab. Identifying long-running, blocking functions is crucial in finding performance bottlenecks. One way to mitigate them is to move them into worker threads. --- Chrome DevTools is a powerful tool for analyzing the performance of web applications. By using the network tab, you can identify issues with resources that might slow down page load. With the Performance insights and Performance tabs, we can identify issues that may be causing the website to load slowly, and take steps to optimize the code for better performance. Whether you're a beginner or an experienced developer, Chrome DevTools is an essential tool for analyzing and improving the performance of web applications....

Jan 9, 2023

6 mins

DevToolsSEOWeb PerformanceWeb Development

How to Style Using SCSS in Nuxt

Introduction SASS makes working on large projects more organized. It allows you to use variables, nested rules, mixins, and functions. The preferred styling method in Nuxt is component file styling, and integrating SASS into your project can make your component file styling appear more understandable. How to Import SASS in Nuxt To add SASS after setting up your Nuxt application, we will first install SASS and sass-loader. Let's run either of these commands depending on our package manager. ` Component File Styling With SASS and sass-loader installed in our project, we can now write SCSS in our component file. Lets see an example: ` In the example above, all we need to specify is lang="scss" on the style tag, and we can now write scss in that component. Global File Import and Variables To import SCSS files that are global, like variables and mixins files, we need to install style-resources: ` Next, we can update our nuxt.config.js file by adding the module we just installed to the buildModules. ` Next, let's create a global variables.scss file in our assets/style folder. Add a single variable inside: ` Next, we need to import this file inside the nuxt.config file: ` Now we have the variables in our variables.scss available in all our components for use. Next, let's test it out by updating our button component. ` We have updated our button variant color to be our global SCSS variable ($primary and $white). Mixins Mixins in SASS are used to write styles that can be reused in other parts of the code. Let's create a sample mixin to center an item. ` Next, we need to import our mixin in Nuxt config: ` Now, let's update our button component with our mixin: ` Functions Functions in SASS are used to write complex operations or behaviours that can be reused in other parts of the code. Let's create a function to handle a media query for our application. ` This is a basic example of what a function can be used for. More complex cases, like calculating percentage, can also be done. Let's import our mixin in Nuxt config: ` Let's update our button component with our function: ` We have been able to add SASS to our Nuxt project, and also looked at some ways in which SASS can make our codebase look cleaner. I hope this article has been helpful to you. If you encounter any issues, you can reach out to me on Twitter or Github....

Aug 17, 2022

2 mins

Web DevelopmentNuxtJS

How to Resolve Nested Queries in Apollo Server

When working with relational data, there will be times when you will need to access information within nested queries. But how would this work within the context of Apollo Server? In this article, we will take a look at a few code examples that explore different solutions on how to resolve nested queries in Apollo Server. I have included all code examples in CodeSandbox if you are interested in trying them out on your own. Prerequisites This article assumes that you have a basic knowledge of GraphQL terminology. Table of Contents - How to resolve nested queries: An approach using resolvers and the filter method - A refactored approach using Data Loaders and Data Sources - What are Data Loaders - How to setup a Data Source - Setting up our schemas and resolvers - Resolving nested queries when microservices are involved - Conclusion How to resolve nested queries: An approach using resolvers and the filter method In this first example, we are going to be working with two data structures called musicBrands and musicAccessories. musicBrands is a collection of entities consisting of id and name. musicAccessories is a collection of entities consisting of the product name, price, id and an associated brandId. You can think of the brandId as a foreign key that connects the two database tables. We also need to set up the schemas for the brands and accessories. ` The next step is to set up a resolver for our Query to return all of the music accessories. ` When we run the following query and start the server, we will see this JSON output: ` ` As you can see, we are getting back the value of null for the brands field. This is because we haven't set up that relationship yet in the resolvers. Inside our resolver, we are going to create another query for the MusicAccessories and have the value for the brands key be a filtered array of results for each brand. ` When we run the query, this will be the final result: ` ` This single query makes it easy to access the data we need on the client side as compared to the REST API approach. If this were a REST API, then we would be dealing with multiple API calls and a Promise.all which could get a little messy. You can find the entire code in this CodeSandbox example. A refactored approach using Data Loaders and Data Sources Even though our first approach does solve the issue of resolving nested queries, we still have an issue fetching the same data repeatedly. Let’s look at this example query: ` If we take a look at the results, we are making additional queries for the brand each time we request the information. This leads to the N+1 problem in our current implementation. We can solve this issue by using Data Loaders and Data Sources. What are Data Loaders Data Loaders are used to batch and cache fetch requests. This allows us to fetch the same data and work with cached results, and reduce the number of API calls we have to make. To learn more about Data Loaders in GraphQL, please read this helpful article. How to setup a Data Source In this example, we will be using the following packages: - apollo-datasource - apollo-server-caching - dataloader We first need to create a BrandAccessoryDataSource class which will simulate the fetching of our data. ` We will then set up a constructor with a custom Dataloader. ` Right below our constructor, we will set up the context and cache. ` We then want to set up the error handling and cache keys for both the accessories and brands. To learn more about how caching works with GraphQL, please read through this article. ` Next, we are going to set up an asynchronous function called get which takes in an id. The goal of this function is to first check if there is anything in the cached results and if so return those cached results. Otherwise, we will set that data to the cache and return it. We will set the ttl(Time to Live in cache) value to 15 seconds. ` Below the get function, we will create another asynchronous function called getByBrand which takes in a brand. This function will have a similar setup to the get function but will filter out the data by brand. ` Setting up our schemas and resolvers The last part of this refactored example includes modifying the resolvers. We first need to add an accessory key to our Query schema. ` Inside the resolver, we will add the accessories key with a value for the function that returns the data source we created earlier. ` We also need to refactor our Brand resolver to include the data source we set up earlier. ` Lastly, we need to modify our ApolloServer object to include the BrandAccessoryDataSource. ` Here is the entire CodeSandbox example. When the server starts up, click on the Query your server button and run the following query: ` Resolving nested queries when microservices are involved Microservices is a type of architecture that will split up your software into smaller independent services. All of these smaller services can interact with a single API data layer. In this case, this data layer would be GraphQL. The client will interact directly with this data layer, and will consume API data from a single entry point. You would similarly resolve your nested queries as before because, at the end of the day, there are just functions. But now, this single API layer will reduce the number of requests made by the client because only the data layer will be called. This simplifies the data fetching experience on the client side. Conclusion In this article, we looked at a few code examples that explored different solutions on how to resolve nested queries in Apollo Server. The first approach involved creating custom resolvers and then using the filter method to filter out music accessories by brand. We then refactored that example to use a custom DataLoader and Data Source to fix the "N+1 problem". Lastly, we briefly touched on how to approach this solution if microservices were involved. If you want to get started with Apollo Server and build your own nested queries and resolvers using these patterns, check out our serverless-apollo-contentful starter kit!...

May 17, 2023

6 mins

GraphQL

Transforming Auth in an AI World with Rod Boothby

In today's digital landscape, the need for secure identity verification has become paramount. With the increasing risks of personal data exposure and the rise of sophisticated cyber threats aided by Artificial Intelligence, it is crucial to adopt robust verification processes to protect individuals and organizations alike. In a recent discussion with Rod Boothby, CEO of ID Partner Systems, the significance of trusted institutions for identity verification was emphasized, particularly the efficiency of bank-based ID verification over traditional methods. One of the key takeaways from the conversation was the importance of continuous authentication. As technology advances, so do the methods employed by cybercriminals. Deepfake technology, for instance, poses a significant threat to identity verification systems. To combat this, tighter security measures and continuous authentication are essential. By constantly verifying and validating user identities, organizations can stay one step ahead of potential fraudsters. Rod Boothby also highlighted the need for a developer-focused approach to identity verification. By providing developers with the tools and resources they need, companies like ID Partner Systems aim to streamline the verification process and enhance security. This approach not only ensures a more efficient experience for users but also allows for the integration of behavioral biometrics, which can further strengthen the verification process. Download this episode here....

Apr 22, 2024

1 min

Engineering Leadership

12 Web Development Podcasts That Inform and Inspire

Modern Web

CodeNewbie

The Changelog: Software Development, Open Source

JS Party: JavaScript, CSS, Web Development

Front End Happy Hour

Developer Tea

React Podcast

JavaScript Jabber

Syntax

HTML All The Things

Virtual Coffee Podcast

freeCodeCamp

Conclusion

Jessica Wilkins

You might also like

Performance Analysis with Chrome DevTools

How to Style Using SCSS in Nuxt

How to Resolve Nested Queries in Apollo Server

Transforming Auth in an AI World with Rod Boothby

You might also like

Performance Analysis with Chrome DevTools

How to Style Using SCSS in Nuxt

How to Resolve Nested Queries in Apollo Server

Transforming Auth in an AI World with Rod Boothby