chore(nxdev): update schedule for conference (#6847)

nx-dev/feature-conf/src/lib/conf-schedule.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 interface ScheduleItem {
   description: string;
   speakers: Array<string>;
@@ -7,87 +9,265 @@ interface ScheduleItem {
 }
 
 export function ConfSchedule(): JSX.Element {
+  const [activeDay, setActiveDay] = useState(1);
+
   const scheduleItemsFor16: ScheduleItem[] = [
     {
       type: 'event',
-      time: '10-10:45am (EST)',
-      title: 'Keynote - Setup Next.js to use Tailwind with Nx',
-      description:
-        'This article is a part of a series around building a blog with Nx, Next.js, Tailwing, Storybook and Cypress. In the previous article we learned how to set up Next.js in an Nx workspace. In this article, we carry that forward, by adding Tailwing CSS support to our setup.',
-      speakers: ['Jeff Cross / Nrwl', 'Victor Savkin / Nrwl'],
+      time: '10-10:45am',
+      title: 'Keynote',
+      description: '',
+      speakers: ['Jeff Cross', 'Victor Savkin / Nrwl'],
     },
     {
       type: 'break',
-      time: '10:45-11am (EST)',
+      time: '10:45-11am',
       title: 'Break',
       description: '',
       speakers: [],
     },
     {
       type: 'event',
-      time: '10-10:45am (EST)',
-      title: 'Keynote - Setup Next.js to use Tailwind with Nx',
+      time: '11-11:25am',
+      title: 'Go-To-Market with Nx',
       description:
-        'This article is a part of a series around building a blog with Nx, Next.js, Tailwing, Storybook and Cypress. In the previous article we learned how to set up Next.js in an Nx workspace. In this article, we carry that forward, by adding Tailwing CSS support to our setup.',
-      speakers: ['Jeff Cross / Nrwl', 'Victor Savkin / Nrwl'],
+        'Does a startup really need a tool like Nx from Day One? Let’s take a look at Nx through the eyes of a startup trying to ship its first project. How does Nx accelerate the growth and adaptation necessary for a new venture?',
+      speakers: ['Jason Jean / Nrwl'],
+    },
+    {
+      type: 'event',
+      time: '11:30-11:55am',
+      title: 'Micro Frontends and Nx Monorepos: The Best of Two Worlds?',
+      description: `Micro Frontends “by the book” are managed in different repositories. However, many Angular developers value the comfort and features provided by monorepos. This session will use Nx and Module Federation to show how to get the best of both worlds including sharing libraries between micro frontends, enforcing isolation, and deployment strategies.`,
+      speakers: ['Manfred Steyer / Angular Architects'],
+    },
+    {
+      type: 'event',
+      time: '12-12:25pm',
+      title:
+        'Generators, Executors and Plugins - Automating for Speed and Quality with the Nx Devkit',
+      description: `One of Nx’s primary advantages is seamless integration of different tools through automation which we roughly categorized into: executors, generators, and plugins. Nx comes with different packages that already have all of these built-in, but you can also leverage the @nrwl/devkit API to create custom generators, executors and plugins to meet the needs of your specific workspace.`,
+      speakers: ['Juri Strumpflohner / Nrwl'],
+    },
+    {
+      type: 'break',
+      time: '12:25-12:45pm',
+      title: 'Q&A',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'break',
+      time: '12:45-1:30pm',
+      title: 'Lunch Break',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'break',
+      time: '1:30-1:55pm',
+      title: 'TBD',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'event',
+      time: '2-2:25pm',
+      title: 'Revealing the Identity of the "x" in Nx',
+      description: `Have you heard of Nx? Is it the missing variable in the algebraic expression to solving the nature of our universe? It just might be. Many JavaScript developers live in a universe of TypeScript these days, and Nx is a distinguished variable in solving a multitude of universal TypeScript challenges. Let's explore how Nx can be transformational when it comes to harnessing the power of our TypeScript codebases and how it can help keep us in-line with it's evolutionary journey.`,
+      speakers: ['Nathan Walker / nStudio'],
+    },
+    {
+      type: 'break',
+      time: '2:30-2:45pm',
+      title: 'Q&A',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'break',
+      time: '2:45-3:00pm',
+      title: 'Break',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'event',
+      time: '3pm-3:25pm',
+      title: 'Design Systems for Enterprise',
+      description: `If you are part of a large organization or team, chances are you need a design system. A combination of Nx and Storybook will make that process more efficient, more enjoyable, and definitely more scalable. Storybook helps you build "UI components in isolation". Combined with Nx and the architecture of a Nx workspace, you can have your UI libraries easily "browsable" and testable by your whole dev and UI/UX teams.`,
+      speakers: ['Katerina Skroumpleou', 'Rares Matei / Nrwl'],
+    },
+    {
+      type: 'break',
+      time: '3:30-3:55pm',
+      title: 'Community Lightning Talks',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'break',
+      time: '4:00-4:20pm',
+      title: 'Q&A',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'event',
+      time: '4:20-4:30pm',
+      title: 'Closing Remarks',
+      description: '',
+      speakers: ['Jeff Cross', 'Brandon Roberts / Nrwl'],
     },
   ];
   const scheduleItemsFor17: ScheduleItem[] = [
     {
       type: 'event',
-      time: '10-10:45am (EST)',
-      title: 'Keynote - Setup Next.js to use Tailwind with Nx',
-      description:
-        'This article is a part of a series around building a blog with Nx, Next.js, Tailwing, Storybook and Cypress. In the previous article we learned how to set up Next.js in an Nx workspace. In this article, we carry that forward, by adding Tailwing CSS support to our setup.',
-      speakers: ['Jeff Cross / Nrwl', 'Victor Savkin / Nrwl'],
+      time: '10-10:45am',
+      title: 'Nrwl/Nx Team Panel',
+      description: '',
+      speakers: ['Nrwlians'],
     },
     {
       type: 'break',
-      time: '10:45-11am (EST)',
+      time: '10:45-11am',
       title: 'Break',
       description: '',
       speakers: [],
     },
+    {
+      type: 'break',
+      time: '11-11:25am',
+      title: 'Community Lightning Talks',
+      description: '',
+      speakers: [''],
+    },
     {
       type: 'event',
-      time: '10-10:45am (EST)',
-      title: 'Keynote - Setup Next.js to use Tailwind with Nx',
+      time: '11:30-11:55am',
+      title: 'Debugging a NestJS Application',
       description:
-        'This article is a part of a series around building a blog with Nx, Next.js, Tailwing, Storybook and Cypress. In the previous article we learned how to set up Next.js in an Nx workspace. In this article, we carry that forward, by adding Tailwing CSS support to our setup.',
-      speakers: ['Jeff Cross / Nrwl', 'Victor Savkin / Nrwl'],
+        "In this talk, we'll discuss the process of debugging a NestJS application within Nx.",
+      speakers: ['Yvonne Allen'],
+    },
+    {
+      type: 'event',
+      time: '12-12:25pm',
+      title: 'Optimizing Workspaces for Nx',
+      description: `In this talk, we’ll discuss the concerns to consider when architecting an Nx workspace, and discuss how to be proactive in managing your dependency graph to get the most out of developer productivity, and reduce the risk of dreaded circular dependencies.`,
+      speakers: ['Zack DeRose / Nrwl'],
+    },
+    {
+      type: 'break',
+      time: '12:25-12:45',
+      title: 'Q&A',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'event',
+      time: '1:30-1:55pm',
+      title: 'Solving Problems with the Dependency Graph',
+      description: `The dependency graph can be a powerful part of your workspace, but it can be hard to parse 
+        much information from the visualization, especially in large projects. In this talk, you’ll learn about 
+        strategies to cut your graph down to size to understand more visually and also how to use the 
+        JSON output of the graph when a visual just won’t cut it.`,
+      speakers: ['Philip Fulcher / Nrwl'],
+    },
+    {
+      type: 'event',
+      time: '2:00-2:25pm',
+      title: 'ESLint: Your Nx Workspace Rules',
+      description: `In this talk we will cover what it takes to create and run lint rules directly in your Nx workspace which are specific to your workspace’s own requirements and best-practices. Want to avoid using developer time to police your contributing conventions in PR reviews? How to add auto fixing so the correct solutions are a command away? How to leverage existing utilities from the ESLint ecosystem to avoid writing invalid rules? Then this talk is for you!`,
+      speakers: ['James Henry'],
+    },
+    {
+      type: 'break',
+      time: '2:30-2:45pm',
+      title: 'Q&A',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'break',
+      time: '2:45-3:00',
+      title: 'Break',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'event',
+      time: '3:00-3:25pm',
+      title: 'Optimize your development workflow with Nx Cloud',
+      description: `It's 2021 - time to break away from unintelligent CI set ups, and rudimentary local development 
+      workflows. This talk covers how different features of Nx Cloud power up your Nx development.`,
+      speakers: ['Kirils Ladovs / Nrwl'],
+    },
+    {
+      type: 'event',
+      time: '3:30-3:55pm',
+      title: 'Lose Your Fear of Package Updates',
+      description: `How can you scare any engineer in two words? Version updates. One of Nx’s superpowers is being able 
+      to run common commands incrementally -- but what about commands that we run less frequently? Learn how Nx makes 
+      the upgrade path to latest so simple that you and your team won’t want to miss a version bump for your framework 
+      again.`,
+      speakers: ['Altan Stalker / Nrwl'],
+    },
+    {
+      type: 'break',
+      time: '4:00-4:20',
+      title: 'Q&A',
+      description: '',
+      speakers: [],
+    },
+    {
+      type: 'event',
+      time: '4:20-4:30pm',
+      title: 'Closing Remarks',
+      description: '',
+      speakers: ['Jeff Cross', 'Brandon Roberts / Nrwl'],
     },
   ];
 
-  return (
+  return activeDay === 1 ? (
     <div className="border-t border-gray-600">
       <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
         <div className="date-container-l grid grid-cols-2 font-input-mono divide-x divide-gray-600">
           <div className="p-8 text-center bg-blue-nx-dark">September 16</div>
-          <div className="p-8 text-center">September 17</div>
+          <div className="p-8 text-center" onClick={() => setActiveDay(2)}>
+            September 17
+          </div>
         </div>
       </div>
       <section className="w-full border-t border-b border-gray-600 divide-y divide-gray-600">
         {scheduleItemsFor16.map((item) =>
           item.type === 'event' ? scheduleRow(item) : breakRow(item)
         )}
       </section>
-      <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
-        <div className="date-container-r grid grid-cols-2 font-input-mono divide-x divide-gray-600">
-          <div className="p-8 text-center">September 16</div>
-          <div className="p-8 text-center bg-blue-nx-dark">September 17</div>
+    </div>
+  ) : (
+    <div>
+      <div className="border-t border-gray-600">
+        <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
+          <div className="date-container-r grid grid-cols-2 font-input-mono divide-x divide-gray-600">
+            <div className="p-8 text-center" onClick={() => setActiveDay(1)}>
+              September 16
+            </div>
+            <div className="p-8 text-center bg-blue-nx-dark">September 17</div>
+          </div>
         </div>
+        <section className="w-full border-t border-b border-gray-600 divide-y divide-gray-600">
+          {scheduleItemsFor17.map((item) =>
+            item.type === 'event' ? scheduleRow(item) : breakRow(item)
+          )}
+        </section>
       </div>
-      <section className="w-full border-t border-b border-gray-600 divide-y divide-gray-600">
-        {scheduleItemsFor17.map((item) =>
-          item.type === 'event' ? scheduleRow(item) : breakRow(item)
-        )}
-      </section>
     </div>
   );
 }
 
 const scheduleRow = (item: ScheduleItem): JSX.Element => (
-  <div key={item.title} className="w-full">
+  <div key={item.title + item.time} className="w-full">
     <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
       <article className="w-full grid grid-cols-1 md:grid-cols-5 md:divide-x md:divide-gray-600">
         <div className="px-5 pt-12 pb-8 md:py-12 font-input-mono">
@@ -111,7 +291,7 @@ const scheduleRow = (item: ScheduleItem): JSX.Element => (
 );
 
 const breakRow = (item: ScheduleItem): JSX.Element => (
-  <div key={item.title} className="w-full">
+  <div key={item.title + item.time} className="w-full">
     <div className="max-w-screen-lg xl:max-w-screen-xl mx-auto text-white">
       <div className="w-full grid grid-cols-1 md:grid-cols-5">
         <div className="px-5 pt-12 pb-8 md:py-12 font-input-mono">

nx-dev/feature-conf/src/lib/conf-speakers.tsx

@@ -17,13 +17,15 @@ export function ConfSpeakers(): JSX.Element {
       twitter: 'victorsavkin',
     },
     {
-      description: 'Coming soon.',
+      description:
+        'Isaac is an Architect at Nrwl. He helps maintain the documentation for Nx at nx.dev and has created two video courses available at nxplaybook.com. Isaac is an Instructor at egghead.io and has written blog posts on Advanced Angular Component Design.',
       imageUrl: '/images/conf/isaac-mann.webp',
       name: 'Isaac Mann',
       twitter: 'MannIsaac',
     },
     {
-      description: 'Coming soon.',
+      description:
+        'From the faraway lands of Scotland (but without the Scottish accent), Rares works at Nrwl on NxCloud, helping teams speed up and scale their development. He enjoys learning by teaching and has Egghead.io courses on TypeScript and Reactive Programming.',
       imageUrl: '/images/conf/rares-matei.webp',
       name: 'Rares Matei',
       twitter: '__rares',
@@ -35,13 +37,6 @@ export function ConfSpeakers(): JSX.Element {
       name: 'Manfred Steyer',
       twitter: 'ManfredSteyer',
     },
-    {
-      description:
-        "Diana Rodriguez is a Full Stack Developer & DevOps lover of all things web and cloud! With 20+ years experience and a strong background in back end and infrastructure Diana likes to bring together the best of both worlds. She's super enthusiastic about encouraging people to start a career in development and a fan of Python, IoT, Automation and things to nerd about.",
-      imageUrl: '/images/conf/diana-rodriguez.webp',
-      name: 'Diana Rodriguez',
-      twitter: 'cotufa82',
-    },
     {
       description:
         'James leverages his expert knowledge of Nx to help the biggest enterprises on the planet provide maximum value to their customers. He is a prolific open-source contributor, ESLint Core Team Alum, and has worked on a number of projects alongside the TypeScript Team.',
@@ -56,6 +51,46 @@ export function ConfSpeakers(): JSX.Element {
       name: 'Nathan Walker',
       twitter: 'wwwalkerrun',
     },
+    {
+      description:
+        "Juri Strumpflohner lives in the very northern part of Italy and is currently working as a JavaScript Architect and Engineering Manager at Nrwl, where he consults for some of the world's biggest companies around the globe. Juri is a Google Developer Expert in Web Technologies & Angular, speaks at international conferences, teaches on Egghead.io, or writes articles on [https://juri.dev](https://juri.dev/)/. He's also a core member of Nx.",
+      imageUrl: '/images/conf/nrwl-logo.webp',
+      name: 'Juri Strumpflohner',
+      twitter: 'juristr',
+    },
+    {
+      description: 'Kirils is a Software Engineer at Nrwl, working on Nx.',
+      imageUrl: '/images/conf/nrwl-logo.webp',
+      name: 'Kirils Ladovs',
+      twitter: 'kirjai',
+    },
+    {
+      description:
+        'Based in Atlanta, GA, Altan is an engineer on the Nx Cloud team. He enjoys web tech, mechanical keyboards, and drone photography.',
+      imageUrl: '/images/conf/nrwl-logo.webp',
+      name: 'Altan Stalker',
+      twitter: 'StalkAltan',
+    },
+    {
+      description: 'Coming soon.',
+      imageUrl: '/images/conf/nrwl-logo.webp',
+      name: 'Katerina Skroumpelou',
+      twitter: 'psybercity',
+    },
+    {
+      description:
+        'Zack is a Senior Engineer and Engineering Manager at Nrwl, as well as a Google Developer Expert for Angular. When not in front of a computer screen, Zack enjoys a robust family life at scale, with his wife and 6 kids in San Tan Valley, AZ.',
+      imageUrl: '/images/conf/nrwl-logo.webp',
+      name: 'Zack DeRose',
+      twitter: 'zackderose',
+    },
+    {
+      description:
+        'Jason is an architect at Nrwl and a part of the Nx Core Team. He works with Fortune 500 companies across different industries to enable them to develop like Google, Microsoft, and Facebook. Jason is also an enthusiast of board games and mechanical keyboards.',
+      imageUrl: '/images/conf/nrwl-logo.webp',
+      name: 'Jason Jean',
+      twitter: 'frozenpandaz',
+    },
   ];
 
   function chunkList<ITEM>(itemList: ITEM[], chunkSize: number): Array<ITEM[]> {