Colby Fayock

Images and videos play a large role in any website or application. From a simple profile picture to a high resolution image of your next Amazon drone delivery, providing visuals helps to tell a story or at least set up some interesting context for that story.

But images and videos can easily bloat your site’s resources, wasting the bandwidth of your visitors and potentially hurting your store’s conversion rate or application’s engagement rates. And while there are manual tools to help us solve this, educating the team managing the site only gets us so far.

Instead we can look to automation to handle our optimization, leveraging modern tooling within our existing development pipelines and infrastructure to automatically compress our images and videos without overcompressing and serving them in modern formats, further helping to lower the file size and time it takes to download.

We’ll see how we can use tooling to make integration optimization easy as well as how we can hook into build processes like Netlify to automate our media optimization with Cloudinary.

This session was presented as part of TheJam.dev 2023. For a full list of available session recordings go to https://thejam.dev

Everyone Wins When You Optimize Media by Colby Fayock

Certified Fresh Events

Presented at All Things Open 2022
Presented by Colby Fayock - Cloudinary

Title: Scaling WordPress with Next.js
Abstract: When it comes to Content Management Systems (CMS), WordPress is still king. But it’s not the most scalable of solutions and it can be tough working on custom solutions with it as a developer.

WordPress however is still a compelling solution. It has a familiar publishing experience for technical and non-technical people alike with a long history of developers supporting the ecosystem with plugins and development support.

How does WordPress fit in with a world full of modern CMS solutions and how can we still leverage it to build scalable websites with Next.js?

We’ll walk through how we can take advantage of Next.js, utilizing its APIs, to develop a fully static WordPress website. We’ll walk through a Next.js concept Starter and how I was able to bring some of the best parts of WordPress to the static web.

Find more info about All Things Open:
On the web: https://www.allthingsopen.org/
Twitter: https://twitter.com/AllThingsOpen
2022 conference: https://2022.allthingsopen.org/

Scaling WordPress with Next.JS - Colby Fayock

All Things Open

In this DevReach 2022 session, Colby Fayock, Sr. Developer Experience Engineer at Cloudinary, talks about the ways we can effectively leverage media for stores to showcase products and create engaging experiences, the media’s role in ecommerce, and how we can take advantage of it while optimizing delivery.

Experiences on the web have grown increasingly visual, from displaying product images to interactive NFTs. But ignoring how media is delivered can impact Core Web Vitals, create a bad UX with slow loading pages, hurt your store’s conversion and potentially lose sales.
---
Welcome to DevReach 2022! Catch all the exciting in person sessions from this years conference at The Westin Boston Seaport District & dive into expert topics on .NET, JavaScript, Accessibility, Design, Machine Learning, Testing and more!

00:00 - Intro
00:30 - Session Starts

---
Follow us on social and say “Hi!” We’d love to hear from you! 

🐦 Twitter: @devreach / http://twitter.com/devreach
👥 Facebook:  DevReach/  http://facebook.com/DevReach

#ecommerce #devreach #ux

Engaging Ecommerce with the Visual Web | DevReach 2022

Progress Telerik

GraphQL Galaxy 2021 #GraphQLGalaxy #GraphQL #GitNation
Website – https://graphqlgalaxy.com/

Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://portal.gitnation.org/events/graphql-galaxy-2021

Talk: Exploring the WordPress Graph with Next.js & WPGraphQL 
Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance. With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users. We’ll explore these advantages and how these pieces fit together with modern tools like Next.js to build great experiences for the web.


This event would not take place without the support of sponsors:

🏆 Platinum Sponsors
The Graph → https://thegraph.com/en/
GraphCMS → graphcms.com
Neo4j → https://neo4j.com/

🥇 Gold Sponsors
StackHawk → https://www.stackhawk.com/
Layer0 → www.layer0.co
GraphCDN → https://graphcdn.io/ 
Shopify → https://shopify.engineering 
Yugabyte → https://www.yugabyte.com/
NeuraLegion → https://www.neuralegion.com/
StepZen → https://stepzen.com/
Tyk → https://tyk.io/
Apollo → https://www.apollographql.com/
Fauna → https://fauna.com/
Nhost → https://nhost.io/

🥈 Silver Sponsors 
Stream → https://getstream.io/

Exploring the WordPress Graph with Next.js & WPGraphQL - Colby Fayock, GraphQL Galaxy 2021

React Conferences by GitNation

React Advanced 2021 ##ReactAdvanced #GitNation
Website – https://reactadvanced.com/

Follow the link to watch the full version of all the conference talks, QnA’s with speakers and hands-on workshop recordings → https://portal.gitnation.org/events/react-advanced-conference-2021

Talk: Automating All the Code & Testing Things with GitHub Actions
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.


This event would not take place without the support of sponsors:

🏆 Platinum Sponsors
Toptal → https://www.toptal.com/freelance-jobs
The Graph → https://thegraph.com/en/
Focus Reactive → https://focusreactive.com/

🥇 Gold Sponsors
StackHawk → https://www.stackhawk.com/
Sanity → https://www.sanity.io
Kontent by Kentico → https://kontent.ai/
Sourcegraph → https://about.sourcegraph.com/
Shopify → https://shopify.engineering/
Ionic → https://ionicframework.com/
JetBrains → https://www.jetbrains.com/
Progress KendoReact → https://www.telerik.com/kendo-react-ui/
Sentry → https://sentry.io/
Snyk → https://snyk.io/
Neuralegion→ https://www.neuralegion.com/

🥈 Silver Sponsors
Stream → https://getstream.io/
CodeSandbox → https://codesandbox.io/
Smarkets → https://smarkets.com/about/
3T → https://studio3t.com/
Modus Create → https://moduscreate.com/
Theodo → https://www.theodo.co.uk/
Commercetools  → https://commercetools.com/
Strapi → https://strapi.io/
MUX → https://mux.com/
Callstack → https://callstack.com/
hackajob → https://hackajob.co/talent
Hasura → https://hasura.io/
twilio → https://twilio.com/ahoy/
zeroheight → http://www.zeroheight.com/

Automating All the Code & Testing Things with GitHub Actions - Colby Fayock, React Advanced 2021

As the web becomes more visual, media is growingly becoming a vital part of any development project. While we might have the displaying of images and videos covered, media management like uploading and organization can get tricky and messy if you’re not managing your media mangement in a sane way. So how do we manage it all? Dev tech is a moving target, solidifying the need for manageable tooling, on top of needing the ability for our infrastructure components to easily communicate, providing a consistent experience for our visitors.

We’ll see how we can take advantage of serverless functions and APIs to pull in Cloudinary, a media experience platform, to give us the tools to build full stack applications that leverage media to deliver high quality experiences for our visitors from secure uploads to media analysis.

For the full list of sessions and recordings from Moar Serverless 2022 visit https://cfe.dev/events/moar-serverless-2022/

Managing Media Without a Server by Colby Fayock

Engaging Ecommerce with the Visual Web
Experiences on the web have grown increasingly visual, from simply showing an image of a product in an online store to interactive media that gives you a digital hands-on look at your new NFT.
While sometimes this is just for fun, being able to provide a great visual experience in the world of ecommerce helps to engage your potential customers, giving them an opportunity to get a closer look at your products and helping your store with conversion.
But it’s not as simple as dumping a bunch of photographs on a product page. Not paying attention to how your media is being delivered can impact your website or app’s Core Web Vitals turning those fun visuals into a bad user experience with slow-loading pages due to unoptimized images that can end up hurting conversion instead of helping.
How can we leverage media to engage our potential customers while still providing a great overall UX? We’ll talk about media’s role in ecommerce, methods we can use to showcase our products effectively, and how we can make sure we’re delivering media in a way that won’t negatively impact our store’s experience.

Bio
Learning by doing is the best way to level up as a developer, and it’s how Colby teaches Javascript, React, and other tools of the web. Colby has gained real-world experience tackling challenges like ecommerce with ThinkGeek, satellite dashboards, and working as a Developer Experience Engineer at Cloudinary. He shares that experience with the community through articles, multiple books, courses on YouTube, egghead.io, and Level Up Tutorials, along with open source work on GitHub and Twitter Spaces to help aspiring developers learn how to build great experiences for the web.

Engaging Ecommerce with the Visual Web - Colby Fayock

CITYJS CONFERENCE

Many large software platforms offer robust marketplaces, allowing users to easily enhance their workflows and processes. As developers, you can easily contribute innovative plugins and extensions to benefit the community. Find out how members of Cloudinary’s Developer Relations team launched a Build Plugin on the Netlify platform, helping users deliver highly optimized images and videos on their deployed site.

Key Takeaways from the Workshop:
1. Understanding how SaaS platforms and developers can work together to build plugins and extensions that benefit their user community

2. How to use the Cloudinary Build Plugin on Netlify to optimize media on every deploy, increasing the likelihood of elevating your Core Web Vitals scores

3. Knowing the benefits of Cloudinary's transformations that can optimizing the format and compression level for all of your site's imagery and videos

Instructors:
- Colby Fayock, Senior Developer Experience Engineer at Cloudinary
- Mike Chirokas, Product Marketing Manager at Netlify

Automating Image & Video Optimizations via Plugins with Cloudinary & Netlify (45-Minute Workshop)

Cloudinary

Engaging eCommerce with the Visual Web - Colby Fayock - JSDayCAN22

Canarias JS

Experiences on the web have grown increasingly visual, from displaying product images to interactive NFTs, but not paying attention to how media is delivered can impact Core Web Vitals creating a bad UX with slow loading pages, hurting your store’s conversion and potentially losing sales.

Engaging Ecommerce with the Visual Web by Colby Fayock

Ecommerce depends on highly dynamic solutions personalizing experiences for customers from the price of a product to the total cost of that customer’s shopping cart. How can we leverage React and tools like Next.js to bring that dynamic experience to the static web?

In this talk, we’ll explore the challenges of ecommerce in a static world. We’ll talk about what tools are available to us and how we can take advantage of them to build dynamic web apps with a practical example of a Next.js app.

For more session recordings from TheJam.dev, visit https://cfe.dev

Getting Personal with Ecommerce, React & the Static Web

Colby Fayock, Applitools
Getting Personal with Ecommerce, React, & the Static Web
All Things Open 2021

Getting Personal with Ecommerce, React, & the Static Web

Find the latest React.js talks & workshops at https://portal.gitnation.org
 
  🗓 React Summit Remote Edition 2021 #ReactSummit
Website – https://remote.reactsummit.com/

Watch the full version of all the conference talks including QnA sessions on GitNation Video platform, follow the link → http://bit.ly/rsre2021-yt-talks-qna

Talk: Scaling WordPress with Next.js

As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools that Next.js provides us to scale WordPress to the world. We’ll talk about what APIs we can use to easily wrangle WordPress content and how we can make the dynamic bits static.


This event would not take place without the support of sponsors:

🏆 Platinum Sponsors

Focus Reactive → https://focusreactive.com/
Nx → https://nx.dev/
AWS Amplify  → https://docs.amplify.aws/
WP Engine → https://wpengine.com/
Shopify → https://shopify.engineering/
Rangle → https://rangle.io/

🥇 Gold Sponsors
Rollbar → https://rollbar.com/product/
MUX → https://mux.com/
JetBrains → https://www.jetbrains.com/
Microsoft → https://aka.ms/devopsjsfm
Storyblok → https://www.storyblok.com/
Cloudinary → https://cloudinary.com/ 
Cleo → https://www.meetcleo.com/ 
Prismic → https://prismic.io/  
G2i  → https://www.g2i.co/
Netlify → https://www.netlify.com/
DataDog → https://www.datadoghq.com/

🥈 Silver Sponsors
StackHawk → https://www.stackhawk.com/
Kontent → https://kontent.ai/
Magic → https://magic.link/
Aldeia → https://aldeia.world/
Nacelle → https://nacelle.com/
Influxdata → https://www.influxdata.com/
Progress KendoReact → https://www.telerik.com/
Neo4j→https://neo4j.com/
Tara → https://tara.ai/

Scaling WordPress with Next.js – Colby Fayock, React Summit Remote Edition 2021

Exploring the WordPress Graph with Next.js & WPGraphQL, by Colby Fayock: Developer Advocate at Applitools

Headless Wordpress using its built-in REST API is a powerful solution to scale WordPress to the web, but complex relationships can easily turn into chains of requests, making maintainability difficult along with the potential cost of performance. With WPGraphQL, we can harness the benefits of GraphQL, leading to a better developer experience and optimized request logic, making sure we’re only delivering what we need to our users.

Hope you enjoy!
______________________

#GraphQLConf2021 is the global #GraphQL online conference organized by @GraphCMS and @commercetools

Stay tuned for updates on GraphQL Conf 2022. Join Discord: https://discuss.graphqlconf.org

Follow for updates:

GraphQL Conf:
Twitter: https://twitter.com/thegraphqlconf
LinkedIn: https://linkedin.com/company/graphql-conf
Discord: http://discuss.graphqlconf.org/

GraphCMS:
Twitter: https://twitter.com/graphcms
LinkedIn: https://linkedin.com/company/graphcms
Slack: https://graphcms.slack.com

commercetools:
Twitter: https://twitter.com/commercetools
LinkedIn: https://linkedin.com/company/commercetools

Exploring the WordPress Graph with Next.js & WPGraphQL | Colby Fayock

Hygraph

Presented by Colby Fayock, Developer Advocate at Applitools at Jamstack Conf 2021. 

When thinking about modern, performant web apps, WordPress isn’t typically the first platform to come to mind. But as content management systems are concerned, WordPress is still king due to its long history and well-crafted UX. Can we break WordPress out of its serverful shell and use newer tech to deliver a fast and highly scalable web app? In this talk, Colby Fayock talks about how to get the best of both worlds, and derive a “WordPress at the Edge” approach. He shows an approach for how we can use WPGraphQL and Next.js to catch WordPress up with the modern web and build great experiences on the Jamstack.

Related Resources:
Deploying Next.js on the Jamstack: The Definitive Guide: https://www.netlify.com/resources/guides/next-js-on-the-jamstack
https://www.netlify.com/with/wordpress/ 

---- 
https://www.netlify.com
https://jamstack.org/

Headless WordPress at the Edge with Next.js & the Jamstack | Colby Fayock

Jamstack TV

"Testing is a hard, but critical part of a development workflow. Without it, bugs can easily sneak through to production, costing us money or worse, costing our customers money! But setting up those tests can be a pain as you typically need to add very specific code to test very specific things, meaning, those tests are specifically fragile and easy to break with new code.

Visual Testing is a way to cover your project using screenshots from your web or native app allowing you to perform real-world actions and make sure they behave as you expect.

In this talk, we’ll walk through what visual testing is and how we can take advantage of Applitools Eyes visual testing powered by AI to make sure we’re maintaining a high level of quality of our apps."

About Colby:
Learning by doing is the best way to learn and it’s how Colby Fayock helps others learn Javascript, React, and the static web. His work includes technical writing, videos on YouTube, courses on egghead.io, two books, and working with the development community as a Developer Advocate for Applitools. 

React Day New York 2021
https://reactnewyork.com/

#React #Conference #ReactDayNewYork

Adding a second pair of eyes with visual testing - Colby Fayock | React Day New York

Crystallize

Typical testing tools tend to only scratch the web’s surface, missing key components that make our applications work and stay usable. Colby Fayock discusses how you can use Applitools and Cypress to dig deeper into your testing workflows visualizing and interacting with what your visitors are actually seeing and using.

Testing Beyond The Dom: An In-Depth Demo Of Applitools

Applitools: AI-Powered Test Automation Platform

As modern as the web is, WordPress is still king. It’s not the most scalable, but is still compelling with its long history and UX. How can we leverage Next.js to bring WordPress to the modern web? We’ll walk through the tools Next.js provides us to scale WordPress to the world.

Conference Website: https://globaltechconferences.com/event/react-virtual-conference-2021/

C# Corner - Community of Software and Data Developers: https://www.c-sharpcorner.com

C# Live - Dev Streaming Destination: https://csharp.live
#react #webdevelopment #wordpress #Nextjs

Scaling WordPress with Next js || React Virtual Conference 2021

CSharp TV

Agenda
0:00 Opening/Guest Intro
02:58 Ekene Eze Presentation - Understanding the Jamstack
31:25 Forkwell Announcement & Break
44:56 Christopher Pecoraro Presentation - The Jamstack: a case study using Sanity, Gatsby, and Netlify
01:10:35 Colby Fayock Presentation - Getting Personal with Ecommerce, React, & the Static Web
01:32:09 Q&A/After Talk

・Slido Anonymous Q&A
https://app.sli.do/event/kp02isjx

Forkwell has a vision to shape the future with creators, together. We are now providing "The Global Dev Study" - An online event that allows developers to build software and applications with the latest technologies.

Forkwell will continue to host multiple study groups with the purpose of inviting speakers who are familiar with each field of information technology, from the perspective of those who are active on the front lines, to comprehensively learn the latest insight and updates about information technology.

At this event, we will have Kani Munidasa as the moderator, and a diverse range of speakers, internationally acclaimed software developers who are expert in their own fields.
We would be glad if we could create a comprehensive study session where you can learn the latest information technologies required to enhance a software developer’s career!

The Global Dev Study #2 - How to Build Fast and Secure Websites with JAMstack

フォークウェル公式 ITエンジニアのキャリアと学び

What's a personal brand for a developer? Understand the importance of building a consistent and impactful personal developer brand on the internet from this video. 

----

Hashnode Bootcamp III aims to remove all the fuss around building a personal brand as a developer — from having a healthy open source profile to maintaining an influential developer blog, showing your work online, and more!

Learn more: https://hashnode.com/bootcamp/batch-3

--- 

Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Create a developer blog for FREE now. 

Sign up: https://hashnode.com

---

~~ Session Info ~~

Hosted by: 
Catalin Pit, Developer Advocate at Hashnode
Blog: http://catalins.tech
Twitter: https://twitter.com/catalinmpit

Edidiong Asikpo, Developer Advocate at Hashnode
Blog: http://edidiongasikpo.com/
Twitter: https://twitter.com/Didicodes

Speaker: 
Colby Fayock, Developer Advocate at Applitools
Blog: https://www.colbyfayock.com
Twitter: http://twitter.com/colbyfayock

Stand out by building a personal brand - Colby Fayock at Hashnode Bootcamp III

Hashnode

Bringing Quality Design Systems to Life with Storybook and Applitools

Our co-founder Charles and CEO François explore Next.js with our good friend Colby Fayock.

On the menu:
0:00 Ramblings and a way too long intro
7:31 What is Next.js?
20:59 How does it compare to Gatsby?
20:19 How does it work?
29:03 Q&A

SPA SEO: https://snipcart.com/spa-seo

Subscribe to our Youtube channel to get video content updates and more Snipcart tutorials!

You can also subscribe to our newsletter to be notified about our next event: http://bit.ly/2R0SXJg

Or follow us on: 

Twitter: https://twitter.com/snipcart
Facebook: https://facebook.com/Snipcart/

Thoughts, questions? Drop a comment below!
---
Follow Colby Fayock on Twitter: https://twitter.com/colbyfayock
His course on egghead.io: https://egghead.io/courses/create-an-ecommerce-store-with-next-js-and-stripe-checkout-562c

Snipcart & Friends Present: WTF is Next.js

Snipcart

Seasoned and beginner alike, developers have a habit of jumping right into a framework or new technology that makes a lot of promises while also glazing over important fundamentals that without, tend to hold back a website or application’s potential. Without some basic knowledge of HTML, you might inadvertently exclude people from learning about your company through your website due to poor accessibility. Lacking an understanding or simply being afraid of CSS, you might be more prone to add unnecessary libraries on top of libraries that just add to the weight of the page, impacting how quickly your app can load.

In this talk, we’ll go over some basic HTML and CSS strategies that can immediately be used right along side of your favorite JavaScript frameworks like React that will provide another range of benefits like better accessibility, simpler code, and ways you can improve SEO by letting search engines like Google more easily figure out what your page is about.

Presenter: Colby Fayock
Event: Byteconf React 2020

Thanks to Colby Fayock for giving us permission to publish his talk!

Level Up With the Fundamentals of Web Development

freeCodeCamp Talks

How to build powerful yet intuitive map interfaces with everyday technologies like JAMstack, React, and Leaflet — and how they can help save lives.

Presenter: Colby Fayock
Event: Accento Confrence

Thanks to Colby Fayock for giving us permission to post this talk.

Building Maps with Impact on React and the JAMstack - Talk by Colby Fayock

We take for granted being able to find a local coffee shop or nearby gas station using the map on our phone. Those maps not only help find a boost towards the end of the day - they help scientists and first responders save lives around the world. With the power of Javascript and the JAMstack, we’ll walk through what libraries help make creating mapping tools possible. We’ll talk about how maps impact all of our lives and some of the technical challenges faced when developing the mapping tools scientists use every day to debug the earth.

About Speaker:
Colby Fayock is a Lead UX & Front End Engineer at Element 84 that’s passionate about tackling challenges that can help save people’s lives and make the world a better place including video streaming services, e-commerce with ThinkGeek.com, satellite dashboards, and helping first responders.

C# Corner - Community of Software and Data Developers
https://www.c-sharpcorner.com

Building Maps with Impact on React and the JAMstack by Colby Fayock || Rect Virtual Conference

Colby Fayock is a Lead UX & Front End Engineer that’s passionate about tackling challenges that can help save people’s lives and make the world a better place. Some of his work includes high volume video streaming services, ecommerce with ThinkGeek.com, satellite tasking dashboards, and helping first responders provide disaster relief.
When Colby’s not heads down with his work, he also helps others to “learn by doing” through articles, videos, and courses about Javascript, React, and the Jamstack. Colby has published two ebooks including 50 Projects for React & the Static Web and Jamstack Handbook.

Today, Colby will be talking about putting down the javascript. Bootcamps and tutorials tend to throw those curious to learn right into Javascript. They ignore the fundamentals of web development missing key pieces to the puzzle of the web. He’ll show us how the basics of HTML and CSS can level up your Javascript and enhance SEO, performance, and accessibility.


Learn more about Techlahoma at https://techlahoma.org
You can support our non-profit through any of the following:
- Volunteering https://help-wanted.techlahoma.org
- Donations https://donate.techlahoma.org
- Subscribing to our Twitch channel for free if you have an Amazon Prime account: https://www.twitch.tv/subs/techlahoma

Put Down the JavaScript: Level Up With the Fundamentals of Web Development - Colby Fayock

Techlahoma

Colby Fayock
Front End Developer @ Element 84
Talk resources: https://www.colbyfayock.com/conf42-2020
LinkedIn: https://www.linkedin.com/in/colbyfayock/

A growing trend in the front end world is the idea that you can dive right in to Javascript and succeed. For better or worse you probably can, but you’re building on top of a fragile foundation. We’ll talk about how you can level up your Javascript by getting back to the basics of HTML and CSS.

Seasoned and beginner alike, developers have a habit of jumping right into a framework or new technology that makes a lot of promises while also glazing over important fundamentals that without, tend to hold back a website or application’s potential. Without some basic knowledge of HTML, you might inadvertently exclude people from learning about your company through your website due to poor accessibility. Lacking an understanding or simply being afraid of CSS, you might be more prone to add unnecessary libraries on top of libraries that just add to the weight of the page, impacting how quickly your app can load.

—

🥈 Silver Sponsors:
Element 84
Google
KMMX
Plasmic
Theodo
Trivadis

—

0:00 Intro
0:17 Talk

—

Website 🚀🪐 https://www.conf42.com
Reach out 📧📭 mark@conf42.com
Conf42 Discord  🧑‍🤝‍🧑💬 https://discord.com/invite/dT6ZsFJ5ZM
LinkedIn 👨‍💼💼 https://www.linkedin.com/company/49110720/
Twitter 🎵🐦https://twitter.com/conf42com
Conf42Cast @ Spotify 🎧 https://tinyurl.com/bnyj6a8y

Put down JS - how building fundamentals will help you LvlUp! | Colby Fayock | Conf42 JavaScript 2020

Conf42

Colby Fayock
Front End Developer @ Element 84
Talk resources: https://www.colbyfayock.com/conf42-2020
LinkedIn: https://www.linkedin.com/in/colbyfayock/

We take for granted being able to find a gas station on our phone, but those maps not only help find that needed coffee fix - they help scientists and first responders save lives. We’ll talk about the impact maps can have and the challenges in developing these tools with Javascript and the JAMstack.

Working on building apps and interfaces is as challenging as it is rewarding. On one hand, being able to work on tools scientists use every day and giving first responders the ability to help save lives is rewarding in itself, but getting to those goals is technically challenging considering building an application with useful map features, making it intuitive, and having infrastructure behind it that gives the map the features needed to be useful in the first place.

---

🥈 Silver Sponsors:
Element 84
Google
KMMX
Plasmic
Theodo
Trivadis

---

0:00 Intro
0:17 Talk

---

Website 🚀🪐 https://www.conf42.com
Reach out 📧📭 mark@conf42.com
Conf42 Discord  🧑‍🤝‍🧑💬 https://discord.com/invite/dT6ZsFJ5ZM
LinkedIn 👨‍💼💼 https://www.linkedin.com/company/49110720/
Twitter 🎵🐦https://twitter.com/conf42com
Conf42Cast @ Spotify 🎧 https://tinyurl.com/bnyj6a8y

Building maps with Impact on React and the Jamstack | Colby Fayock | Conf42 JavaScript 2020

Getting satellite imagery and remote sensing data in the hands of scientists and first responders helps to increase the potential to save lives and have an impact on the world. The tooling needs to be fast and reliable, help reduce time-to-science, and be cost effective–allowing teams to focus their limited funds on bigger problems. We’ll talk about how we tackled these challenges with the Jamstack to provide search for NASA, satellite tasking for Capella Space, and tools for disaster response.

Bringing Remote Sensing and Disaster Relief to the Jamstack

Working on building apps and interfaces is as challenging as it is rewarding. On one hand, being able to work on tools scientists use every day and giving first responders the ability to help save lives is rewarding in itself, but getting to those goals is technically challenging considering building an application with useful map features, making it intuitive, and having infrastructure behind it that gives the map the features needed to be useful in the first place.

We’ll talk about the technical challenges we face building maps and how the JAMstack has helped with that process. Attendees can learn how the technology we use every day can help save lives as well as a brief overview of the Javascript libraries used to render maps in a browser such as React and Leaflet. Maps are a powerful tool that provide much more than we take for granted and can help people understand another powerful use case of the tools they work with everyday.

Building Maps with Impact on React and the JAMstack by Colby Fayock

JNation

How to build powerful yet intuitive map interfaces with everyday technologies like JAMstack, React, and Leaflet — and how they can help save lives

Links:

 * more on the talk: https://2020.accento.dev/talks/impact-react-jamstack/
 * more on Colby: https://2020.accento.dev/speakers/colby-fayock/
 * Colby on Twitter: https://twitter.com/colbyfayock
 * Colby's website: https://www.colbyfayock.com/

Chapters:

0:00 Intro
1:10 Talk
28:54 Q&A

"Building Maps with Impact on React and the JAMstack" - Colby Fayock

AccentoDev

Colby Fayock is a Lead UX & Front End Engineer at Element 84. Colby provided an overview of different uses of maps on websites, as well as how to build map apps using React Leaflet and Gatsby. By using Gatsby, he was able to focus on building a map, not a whole frontend from scratch. He helped create a Gatsby recipe to automatically add React Leaflet to a project, as well as a Gatsby starter and theme.

Maps are used in all sorts of websites, from showing local restaurants to images taken by satellites. Colby explains how mapping apps can be just like any other JAMstack app, with JavaScript and data from APIs compiled down into markup that can be deployed on several different services. Gatsby’s strength here is that it allowed him to avoid hassles with tooling and create a recipe, starter, and even component library to make future projects easier. Element 84 built Fogg, its component library, as a Gatsby theme, so that it’s easy to plug into a project.

Want to keep up with Colby or ask him questions about his tutorial? Follow him on Twitter @colbyfayock! And, be sure to check out his newest book, Jamstack Handbook: https://jamstackhandbook.com/

Supercharge your Map Apps with Gatsby, with Colby Fayock

Gatsby

Welcome to the recording of the Global React Meetup hosted by This Dot Media.  

Speakers: 

Ryan Dsouza (@ryands1701)

&

Colby Fayock (@colbyfayock)


Host: Pato Vargas, Senior Software Engineer, This Dot Labs

This Meetup is sponsored by This Dot Labs, a web, mobile, and cloud consultancy offering services including mentorship, training, staff augmentation, and consulting. 

Whether you need help with React, Angular, Vue, Node, Bazel, mobile, GraphQL, .Net, Kubernetes, GCP, AWS, Azure, or more, you can find us online at thisdotlabs.com.

Global React Meetup featuring Ryan Dsouza and Colby Fayock

This Dot Media

"Put Down the Javascript: Level Up with the Fundamentals of Web Development" - Colby Fayock at #Byteconf React 2020

Follow Colby Fayock on Twitter: https://twitter.com/colbyfayock

Seasoned and beginner alike, developers have a habit of jumping right into a framework or new technology that makes a lot of promises while also glazing over important fundamentals that without, tend to hold back a website or application’s potential. Without some basic knowledge of HTML, you might inadvertently exclude people from learning about your company through your website due to poor accessibility. Lacking an understanding or simply being afraid of CSS, you might be more prone to add unnecessary libraries on top of libraries that just add to the weight of the page, impacting how quickly your app can load.

In this talk, we’ll go over some basic HTML and CSS strategies that can immediately be used right along side of your favorite Javascript frameworks like React that will provide another range of benefits like better accessibility, simpler code, and ways you can improve SEO by letting search engines like Google more easily figure out what your page is about.


#Byteconf React 2020, a fully remote + free two-day React conference, went live on May 1st & 2nd, 2020. Subscribe to our channel so you don't miss our future free events!

🐦 Follow Bytesized Code on Twitter  https://twitter.com/bytesizedcode  

🐦 Follow your host Kristian on Twitter  https://twitter.com/signalnerve 

Join our Discord: https://www.bytesized.xyz/discord


Join our Patreon for only $5/mo and you'll get early access to our videos, and shout-outs during future Byteconf streams: https://www.patreon.com/join/bytesizedcode

Thanks to our patrons – Art, Jacob, Jan, Jared, Jeanne, Jen, Juan, Lars, Remy, and Ryan!

 ---

💛 BYTESIZED CODE is building a developer community for everyone! We publish weekly programming tutorials and guides, and also produce the unique online conference Byteconf, where developers around the world learn in a live-streamed, 100% free dev conference. Join our community! https://www.bytesized.xyz

WEB DEVS: BEFORE JS, LEARN THE FUNDAMENTALS

Kristian Freeman

Summary
We take for granted being able to find a gas station on our phone, but those maps not only help find that needed coffee fix - they help scientists and first responders save lives. We’ll talk about the impact maps can have and the challenges in developing these tools with Javascript and the JAMstack.

Colby Fayock is a Senior Front End Engineer and UX Designer at Element 84 in Alexandria, VA. Some of the projects Colby and his team have worked on include NASA and commercial satellite mapping interfaces, as well as helping first responders with Disaster Response solutions.

FrontConf 2020 Sponsors job offers:
Jambit - (Senior) Frontend Developer (m/w/d) in München: https://www.jambit.com/arbeiten-bei-jambit/jobs/frontend-developer/
xbAV - Frontend Developer (m/f/d) https://www.xbav.de/en/karriere/frontend-developer-mfd
Celonis - Senior Frontend Engineer (m/f/x) https://www.celonis.com/careers/jobs/categories/engineering?id=4012484003&location=Munich%2C%20Germany

FrontConf 2020 - Colby Fayock - Building Maps with Impact on React and the JAMstack

Munich Frontend Events

Maps are a large part of what we do in our everyday lives and how people help save other's save lives. How does Gatsby help and where does it fit in?

Slides: https://www.slideshare.net/ColbyFayock/mapping-gatsby-from-space

Colby Fayock @colbyfayock

From Gatsby [Spark] at Element 84 HQ on May 29, 2019.

Gatsby [Spark]
--
Lightning talk style meetup centered around Gatsby and the JAMstack ecosystem.

https://www.meetup.com/Gatsby-Spark/


Element 84
---
Element 84 is a software development firm that designs and builds ambitious software products engineered for high scalability.

My Talks