Speaking & Workshops

In this talk, I will walk through how I built the themevitals.com website which displays web performance data by Shopify theme populated with data from HTTP Archive and CrUX. In a similar talk for the 11ty meetup, I spoke more about the static website building process. In this talk, I will focus more on what data is available in HTTP Archive and CrUX and show this example of how I use it.

Today we have Sia Karamalegos joining us to talk about performance on the web. Sia is a freelance web developer, speaker, writer, teacher, tech community organizer and Google developer expert in web technologies.

On this bonus episode of Honest Ecommerce, we have Sia Karamalegos. She is a freelance developer and web performance engineer, a Google Developer Expert in web technologies, and formerly worked on the Shopify performance team. We talk about the difference between Lighthouse and Core Web Vitals, why site performance matters for bounce and conversion rates—not just SEO, how ThemeVitals collects and uses real-world data to benchmark Shopify themes, and how both merchants and theme developers can use it to make better performance decisions and so much more!

In this informal talk, I will walk through how I built the themevitals.com website which displays web performance data by Shopify theme. It starts by processing monthly query data, then using that data to generate SVG charts on the server side. Then, 11ty builds all the pages, rendering the data and charts in a user-friendly and accessible way.

Lighthouse 100 is a common goal for developers seeking to make their sites fast, but does this really center user experience? In this talk, I'll cover how to get a broader perspective on how real users are experiencing your website performance and better strategies for improving it.

Did you ever notice those social media share images that automatically pop up for a site and think to yourself, "wow, it would be really cool if I could get that set up for my blog"? In this talk, Sia will show you how she uses 11ty shortcodes and Cloudinary to generate unique share images for each page and blog post on her site. (Cloudinary has a free tier that's generous enough that most personal sites fit under.)

See event link for details!

Lighthouse 100 is a common goal for developers seeking to make their sites fast, but does this really center user experience? In this talk, I'll cover how to get a broader perspective on how real users are experiencing your website performance and better strategies for improving it.

Master of Ceremonies

How does JavaScript impact user experience and what are the implications? What tools can I use to better understand my performance and focus on the most important problems? In this session, Sia will walk through the answers to these questions and more.

Webmentions are an exciting standard which help enable the IndieWeb. We can own our own content, hosted on our own domains, without sacrificing social connection and replies with other people! In this talk, I discuss what webmentions are and how to implement them. The code is based on an Eleventy site, but the concepts should be applicable to any site.

Performance is important. Tooling can be hard. Do flame charts and waterfalls intimidate you? Come learn how to use common performance tools such as Chrome DevTools, Lighthouse, and webpagetest.org. We'll profile several websites with different performance issues to illustrate how to use each tool. In this talk, I'll live-profile several sites to help you see how to approach performance analysis. It's best if you already know how to use the Chrome Dev Tools inspector, but we will approach the performance tools from a beginner's starting point. Attendees should be comfortable with HTML at a minimum.

In this month’s “State of” event, we’re bringing you the State of Web Performance. We will be talking with Community members, library authors and maintainers to discuss community initiatives, how to identify Performance challenges, metrics to measure and resources to help you.

103 Early Hints allow us to preconnect and even preload resources before the main document arrives. Come learn how the partnership between Shopify, Google, and Cloudflare led to this performance breakthrough, how Shopify is continuing to experiment with it at scale, and thoughts on what the future holds.

Excited to have the Shopify Merchant Performance Team join me next week as we explore their raison d'être + what to expect from this team as they help shape the future of e-commerce by keeping things fast! Join us.

In this month’s “State of” event, we’re bringing you the State of Web Performance. We will be talking with Community members, library authors and maintainers to discuss community initiatives, how to identify Performance challenges, metrics to measure and resources to help you.

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. In this hands-on workshop, we’ll learn about the most common performance pitfalls and fix latency, image, and JavaScript issues in a sample web application. You must understand HTML, CSS, JavaScript, and running npm scripts to get the most out of this workshop. Understanding webpack is helpful but not required.

Performance is important. Tooling can be hard. Do flame charts and waterfalls intimidate you? Come learn how to use common performance tools such as Chrome DevTools, Lighthouse, and webpagetest.org. We'll profile several websites with different performance issues to illustrate how to use each tool. In this talk, I'll live-profile several sites to help you see how to approach performance analysis. It's best if you already know how to use the Chrome Dev Tools inspector, but we will approach the performance tools from a beginner's starting point. Attendees should be comfortable with HTML at a minimum.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

In episode 3 of this series, , Sia Karamalegos (@TheGreenGreek) is joining Matt Ling (@mattling_dev) from Stripe to build out an end-to-end eCommerce store selling digital goods, using 11ty, Netlify serverless functions, and Stripe. In this third and final episode you’ll learn how to leverage a Netlify serverless function to build a webhook endpoint to listen and react to payment events such as a Checkout Session completing to fulfill your orders.

In episode 2 of this series, Sia Karamalegos (@TheGreenGreek) is joining Matt Ling (@mattling_dev) from Stripe to build out an end-to-end eCommerce store selling digital goods, using 11ty, Netlify serverless functions, and Stripe. In this second episode you’ll learn how to leverage Netlify serverless functions to create Checkout Sessions using the Stripe API and collect payments from your customers.

In episode 1 of this series, Sia Karamalegos (@TheGreenGreek) joins Matt Ling (@mattling_dev) from Stripe to build out an end-to-end eCommerce store selling digital goods, using 11ty, Netlify serverless functions, and Stripe. In this first episode you’ll learn how to model a product catalog in Stripe using Products and Prices and how to query and render them using Stripe-node and 11ty.

A lot of e-commerce solutions exist, but many of them charge a monthly fee. How could we build a site with the lowest hosting costs possible? Sometimes the biggest challenge is coming up with an architecture that will work. In this talk, I will show you how I'm building an Eleventy shop for digital downloads using Stripe, Netlify, Sendgrid, and AWS. It's a sneak peek for a longer series where we will go step-by-step in the build.

Sia Karamalegos joins the WebPageTest Live stream to talk about her research for this year's Web Almanac about the state of web performance.

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. In this hands-on workshop, we’ll learn about the most common performance pitfalls and fix latency, image, and JavaScript issues in a sample web application. You must understand HTML, CSS, JavaScript, and running npm scripts to get the most out of this workshop. Understanding webpack is helpful but not required.

Performance is important. Tooling can be hard. Do flame charts and waterfalls intimidate you? Come learn how to use common performance tools such as Chrome DevTools, Lighthouse, and webpagetest.org. We'll profile several websites with different performance issues to illustrate how to use each tool. In this talk, I'll live-profile several sites to help you see how to approach performance analysis. It's best if you already know how to use the Chrome Dev Tools inspector, but we will approach the performance tools from a beginner's starting point. Attendees should be comfortable with HTML at a minimum.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Webmentions are an exciting standard which help enable the IndieWeb. We can own our own content, hosted on our own domains, without sacrificing social connection and replies with other people! Eleventy is JavaScript-based static site generator that requires no client-side JavaScript, making it performant by default.

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. In this hands-on workshop, we’ll learn about the most common performance pitfalls and fix latency, image, and JavaScript issues in a sample web application. You must understand HTML, CSS, JavaScript, and running npm scripts to get the most out of this workshop. Understanding webpack is helpful but not required.

Webmentions are an exciting standard which help enable the IndieWeb. We can own our own content, hosted on our own domains, without sacrificing social connection and replies with other people! Eleventy is JavaScript-based static site generator that requires no client-side JavaScript, making it performant by default.

Let Cloudinary make your image management easier! In this talk, I'll show how to set up responsive images in Eleventy using Cloudinary and Eleventy shortcodes. If time permits, I'll also show how I generate social share images using Cloudinary and Eleventy.

In this mini-workshop with Sia Karamalegos, we're going to finally get that to-do list item done - building and deploying your blog. We'll use Eleventy and Netlify, and if you've bought a domain, we'll also set that up too.

Serverless functions are a key skill to know when moving to Jamstack applications or serverless architecture. Going serverless means having no server to manage while also having the ability to scale infinitely. In this talk, we'll start with a basic, static Eleventy website then build in dynamic features like form handling and secure API access using serverless functions. We'll use the Netlify CLI to set up our dev environment and deploy to production on Netlify.

Serverless functions are a key skill to know when moving to Jamstack applications or serverless architecture. Going serverless means having no server to manage while also having the ability to scale infinitely. In this talk, we'll start with a basic, static Eleventy website then build in dynamic features like form handling and secure API access using serverless functions. We'll use the Netlify CLI to set up our dev environment and deploy to production on Netlify.

Webmentions are an exciting standard which help enable the IndieWeb. We can own our own content, hosted on our own domains, without sacrificing social connection and replies with other people! Eleventy is JavaScript-based static site generator that requires no client-side JavaScript, making it performant by default.

Images account for 50% of the bytes downloaded to load a website. How can you make sure that your users only download the smallest image necessary while preserving image quality? In this talk, we'll focus on the underlying concepts in HTML and CSS for serving responsive images, which you can take with you no matter which tool you use.Which file formats suit which image types best? How can you use art direction in images to show the best image for a viewport layout? Come learn about this and more!

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. In this hands-on workshop, we’ll learn about the most common performance pitfalls and fix latency, image, and JavaScript issues in a sample web application. You must understand HTML, CSS, JavaScript, and running npm scripts to get the most out of this workshop. Understanding webpack is helpful but not required.

Performance is important. Tooling can be hard. Do flame charts and waterfalls intimidate you? Come learn how to use common performance tools such as Chrome DevTools, Lighthouse, and webpagetest.org. We'll profile several websites with different performance issues to illustrate how to use each tool. In this talk, I'll live-profile several sites to help you see how to approach performance analysis. It's best if you already know how to use the Chrome Dev Tools inspector, but we will approach the performance tools from a beginner's starting point. Attendees should be comfortable with HTML at a minimum.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Serverless functions are a key skill to know when moving to Jamstack applications or serverless architecture. Going serverless means having no server to manage while also having the ability to scale infinitely. In this talk, we'll start with a basic, static Eleventy website then build in dynamic features like form handling and secure API access using serverless functions. We'll use the Netlify CLI to set up our dev environment and deploy to production on Netlify.

Webmentions are an exciting standard which help enable the IndieWeb. We can own our own content, hosted on our own domains, without sacrificing social connection and replies with other people! In this talk, I discuss what webmentions are and how to implement them. The code is based on an Eleventy site, but the concepts should be applicable to any site.

Fonts are lovely but can slow down our loads. How can we make them faster? We all love fonts. From Google Fonts to Typekit, Hoefler&Co and more, they give character and tone to our websites. The down side of fonts is that they can really slow down our loads. In this talk we'll learn about common pitfalls like critical requests depth and how to use resource hints to play tricks with latency to load web applications faster. We'll walk through a network profile to understand what's going on in the browser and how to make it faster.

What is this cult of Eleventy and why do they think it's so great? Come learn about the JavaScript-based static site generator that requires no client-side JavaScript.

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. In this hands-on workshop, we’ll learn about the most common performance pitfalls and fix latency, image, and JavaScript issues in a sample web application. You must understand HTML, CSS, JavaScript, and running npm scripts to get the most out of this workshop. Understanding webpack is helpful but not required.

Web performance matters. From SEO to bottom-line revenue impacts, performance can make or break your app. However, fixing performance feels like a quagmire of expert-level topics. What if I told you JavaScript bundle sizes could be cut up to 50% by doing one thing only? Nearly 90% of web traffic runs on modern browsers, but we're transpiling all of our JavaScript to ES5. That’s expensive. In this talk, we'll learn about differential serving, or serving both modern bundles and legacy bundles using webpack. This talk is framework agnostic, and best if you have at least a basic understanding of JavaScript.

Images account for 50% of the bytes downloaded to load a website. How can you make sure that your users only download the smallest image necessary while preserving image quality? In this talk, we'll focus on the underlying concepts in HTML and CSS for serving responsive images, which you can take with you no matter which tool you use.Which file formats suit which image types best? How can you use art direction in images to show the best image for a viewport layout? Come learn about this and more!

Images account for 50% of the bytes downloaded to load a website. How can you make sure that your users only download the smallest image necessary while preserving image quality? In this talk, we'll focus on the underlying concepts in HTML and CSS for serving responsive images, which you can take with you no matter which tool you use.Which file formats suit which image types best? How can you use art direction in images to show the best image for a viewport layout? Come learn about this and more!

In this talk to students interested in technology fields at Delgado Community College, I describe my career journey and what it took to get to where I needed to be at each stage, including the pitfalls, privileges, and where I still want to go.

Fonts are lovely but can slow down our loads. How can we make them faster? We all love fonts. From Google Fonts to Typekit, Hoefler&Co and more, they give character and tone to our websites. The down side of fonts is that they can really slow down our loads. In this talk we'll learn about common pitfalls like critical requests depth and how to use resource hints to play tricks with latency to load web applications faster. We'll walk through a network profile to understand what's going on in the browser and how to make it faster.

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. In this hands-on workshop, we’ll learn about the most common performance pitfalls and fix latency, image, and JavaScript issues in a sample web application. You must understand HTML, CSS, JavaScript, and running npm scripts to get the most out of this workshop. Understanding webpack is helpful but not required.

#IamRemarkable is a Google initiative empowering women and underrepresented groups to celebrate their achievements in the workplace and beyond. This 90-minute workshop highlights to participants the importance of self promotion in their careers and provides them with the tools to practice this skill. I am an official #IamRemarkable facilitator.

Web performance matters. From SEO to bottom-line revenue impacts, performance can make or break your app. However, fixing performance feels like a quagmire of expert-level topics. What if I told you JavaScript bundle sizes could be cut up to 50% by doing one thing only? Nearly 90% of web traffic runs on modern browsers, but we're transpiling all of our JavaScript to ES5. That’s expensive. In this talk, we'll learn about differential serving, or serving both modern bundles and legacy bundles using webpack. This talk is framework agnostic, and best if you have at least a basic understanding of JavaScript.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Web performance matters. From SEO to bottom-line revenue impacts, performance can make or break your app. However, fixing performance feels like a quagmire of expert-level topics. What if I told you JavaScript bundle sizes could be cut up to 50% by doing one thing only? Nearly 90% of web traffic runs on modern browsers, but we're transpiling all of our JavaScript to ES5. That’s expensive. In this talk, we'll learn about differential serving, or serving both modern bundles and legacy bundles using webpack. This talk is framework agnostic, and best if you have at least a basic understanding of JavaScript.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. In this hands-on workshop, we’ll learn about the most common performance pitfalls and fix latency, image, and JavaScript issues in a sample web application. You must understand HTML, CSS, JavaScript, and running npm scripts to get the most out of this workshop. Understanding webpack is helpful but not required.

Preact is a fast, 3kB alternative to React with the same modern API! Let's go crazy and live code a new #FrontEndParty website that uses the Meetup API to populate the upcoming event.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. In this hands-on workshop, we’ll learn about the most common performance pitfalls and fix latency, image, and JavaScript issues in a sample web application. You must understand HTML, CSS, JavaScript, and running npm scripts to get the most out of this workshop. Understanding webpack is helpful but not required.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. In this hands-on workshop, we’ll learn about the most common performance pitfalls and fix latency, image, and JavaScript issues in a sample web application. You must understand HTML, CSS, JavaScript, and running npm scripts to get the most out of this workshop. Understanding webpack is helpful but not required.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org. In this hands-on workshop, we’ll learn about the most common performance pitfalls and fix latency, image, and JavaScript issues in a sample web application. You must understand HTML, CSS, JavaScript, and running npm scripts to get the most out of this workshop. Understanding webpack is helpful but not required.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

#IamRemarkable is a Google initiative empowering women and underrepresented groups to celebrate their achievements in the workplace and beyond. This 90-minute workshop highlights to participants the importance of self promotion in their careers and provides them with the tools to practice this skill. I am an official #IamRemarkable facilitator.

Resource hints are a cool way to play tricks with latency to load web applications faster. Come learn all about resource hints as we apply them to Google Fonts to make them faster.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Every user’s hardware is different, and processing speed can hinder user experience on client-side rendered React applications. Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do. It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.

Images account for more than 40% of the bytes downloaded to load a website. How can you make sure that your users only download the smallest image necessary while preserving image quality? Which file formats suit which image types best? How can you use art direction in images to show the best image for a viewport layout? Come learn about this and more! A basic understanding in HTML and CSS is required to get the most out of this talk. (Can be easily converted to a half-day workshop)

Are you afraid of your build tool? Fret no more. Come learn the basics of Webpack, using the new version 4. We'll learn about the new features such as sensible defaults as well as the core features. During this half-day workshop, we will build a simple application using JavaScript, HTML, CSS, and images to understand all parts of setting up the build tool.

What is Real User Monitoring versus Synthetic Testing in the realm of front-end performance? What are some of the tools available to measure both? In this talk we'll do an overview of measurement methods and do a deep-dive on the Navigation, Resource, and User Timing APIs.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Come learn about intermediate to advanced topics for building real-world ReactJS Web applications in this full-day workshop. We will start by learning about the core fundamentals of Redux including pure functions, actions, reducers, the store, and subscriptions. Then we will integration Redux into a React app, learning about components vs containers, accessing the store, async actions, middleware, and thunks. Next, we will layer in React Router 4, learning about params, queries, and redirects; prompt before navigation, and scrollToTop. Time permitting and based on audience preferences, we can learn about using component libraries, styling, ES6+, and more! Basic knowledge of React is required for this workshop.

Images account for more than 40% of the bytes downloaded to load a website. How can you make sure that your users only download the smallest image necessary while preserving image quality? Which file formats suit which image types best? How can you use art direction in images to show the best image for a viewport layout? Come learn about this and more! A basic understanding in HTML and CSS is required to get the most out of this talk. (Can be easily converted to a half-day workshop)

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Are you afraid of your build tool? Fret no more. Come learn the basics of Webpack, using the new version 4. We'll learn about the new features such as sensible defaults as well as the core features. During this half-day workshop, we will build a simple application using JavaScript, HTML, CSS, and images to understand all parts of setting up the build tool.

Every user’s hardware is different, and processing speed can hinder user experience on client-side rendered React applications. Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do. It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.

(Workshop)

Every user’s hardware is different, and processing speed can hinder user experience on client-side rendered React applications. Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do. It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Every user’s hardware is different, and processing speed can hinder user experience on client-side rendered React applications. Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do. It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.

Come learn about intermediate to advanced topics for building real-world ReactJS Web applications in this full-day workshop. We will start by learning about the core fundamentals of Redux including pure functions, actions, reducers, the store, and subscriptions. Then we will integration Redux into a React app, learning about components vs containers, accessing the store, async actions, middleware, and thunks. Next, we will layer in React Router 4, learning about params, queries, and redirects; prompt before navigation, and scrollToTop. Time permitting and based on audience preferences, we can learn about using component libraries, styling, ES6+, and more! Basic knowledge of React is required for this workshop.

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions? From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

App loading and run-time affect your bottom line. Fancy features aren’t worth anything if users leave the app out of frustration. Every second counts! React is super fast, but you could be shooting yourself in the foot with design decisions. Come learn how to make your React apps lightning fast! Page abandonment increases with every second of load time.Also, profiling and debugging performance issues can seem like an overwhelming topic to learn.In this session, we’ll cover the usual suspects of performance issues, from the basics of using the correct build, to the fundamentals of immutable data, to higher- level tools like Perf, shouldComponentUpdate, PureComponent, and memoizing computed props in Redux. We will both cover the concepts and walk through examples step- by - step so that by the end of this session you will feel like a React Speed Racer.You’ll get the most out of this session if you’re at least comfortable with React and ES6 syntax.

Professionalism in Software Engineering

RESTful APIs can make fetching data pretty hairy sometimes, but fetching data doesn’t have to be so difficult. Enter GraphQL... the query language where you can ask for exactly what you need with a single HTTP request. Come learn what all the buzz is about!

The Talk About Talks: Submitting Your First CFP

RESTful APIs can make fetching data pretty hairy sometimes, but fetching data doesn’t have to be so difficult. Enter GraphQL... the query language where you can ask for exactly what you need with a single HTTP request. Come learn what all the buzz is about!

App loading and run-time affect your bottom line. Fancy features aren’t worth anything if users leave the app out of frustration. Every second counts! React is super fast, but you could be shooting yourself in the foot with design decisions. Come learn how to make your React apps lightning fast! Page abandonment increases with every second of load time.Also, profiling and debugging performance issues can seem like an overwhelming topic to learn.In this session, we’ll cover the usual suspects of performance issues, from the basics of using the correct build, to the fundamentals of immutable data, to higher- level tools like Perf, shouldComponentUpdate, PureComponent, and memoizing computed props in Redux. We will both cover the concepts and walk through examples step- by - step so that by the end of this session you will feel like a React Speed Racer.You’ll get the most out of this session if you’re at least comfortable with React and ES6 syntax.

Every user’s hardware is different, and processing speed can hinder user experience on client-side rendered React applications. Server-side rendering and code-splitting can drastically improve user experience by minimizing the work that the client has to do. It’s easy to get lost in the lingo, so come learn what it all means and how to easily build universal React apps using the Next.js framework. We’ll walk through the concepts and use code examples to cement your understanding. You’ll get the most out of this session if you’re comfortable with React and ES6 syntax.