done

Author: AssafKr

public/1.png

@@ -8,12 +8,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/2.png

@@ -1,88 +1,7 @@
-import React from "react";
-import {
-  Deck,
-  Slide,
-  Heading,
-  FlexBox,
-  Box,
-  FullScreen,
-  Progress,
-  Text,
-  OrderedList,
-  ListItem,
-  Appear,
-  UnorderedList,
-} from "spectacle";
-import { WhyUseReactSlide } from "./presentation/WhyUseReactSlide";
-
-const theme = {
-  colors: {
-    primary: "#ffffff",
-    secondary: "#ffffff",
-    background: "#9e719a",
-  },
-  fonts: {
-    header: "'Montserrat', sans-serif",
-    text: "'Quicksand', sans-serif",
-  },
-};
-
-const template: React.FC = () => (
-  <FlexBox
-    justifyContent="space-between"
-    position="absolute"
-    bottom={0}
-    width={1}
-  >
-    <Box padding="0 1em">
-      <FullScreen color={"white"} size={30} />
-    </Box>
-    <Box padding="1em">
-      <Progress color={"white"} size={10} />
-    </Box>
-  </FlexBox>
-);
+import { PerformanceDeck } from "./presentation/Deck";
 
 function App() {
-  return (
-    <Deck
-      theme={theme}
-      template={template}
-      transition={{
-        from: {
-          opacity: 0,
-        },
-        enter: {
-          opacity: 1,
-        },
-        leave: {
-          opacity: 0,
-        },
-      }}
-    >
-      <Slide>
-        <Heading>React Is Killing Your Performance And It's Your Fault 🚀</Heading>
-      </Slide>
-      <Slide>
-        <Heading>About me</Heading>
-        <Appear>
-          <OrderedList>
-            <ListItem>Software Developer for the last 10 years</ListItem>
-            <ListItem>Worked at Checkpoint, Microsoft and Soluto</ListItem>
-          </OrderedList>
-        </Appear>
-      </Slide>
-      <WhyUseReactSlide />
-      <Slide>
-        <Heading>But... it comes with a price 💴</Heading>
-        <UnorderedList>
-          <ListItem>
-            To enjoy the declarative API, 
-          </ListItem>
-        </UnorderedList>
-      </Slide>
-    </Deck>
-  );
+  return <PerformanceDeck />;
 }
 
 export default App;

public/3.png

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { SlowRendering } from "./Inner";
+
+export const Draggable = React.forwardRef<HTMLDivElement>((_, ref) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [position, setPosition] = useState<{ top: number; left: number }>({
+    top: 0,
+    left: 0,
+  });
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        position: "absolute",
+        width: "500px",
+        height: "500px",
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+        borderRadius: "25px",
+        cursor: "grab",
+        background: "white",
+        overflowY: "auto",
+      }}
+      onMouseMove={(e) => {
+        if (isDragging)
+          setPosition({ top: e.clientY - 250, left: e.clientX - 250 });
+      }}
+      onMouseDown={() => {
+        setIsDragging(true);
+      }}
+      onMouseUp={() => setIsDragging(false)}
+    >
+      <SlowRendering text={"Drag me 🐉"} />
+    </div>
+  );
+});

public/drake-bad.jpg

@@ -0,0 +1,17 @@
+import React from "react";
+import { Text } from "spectacle";
+
+export const SlowRendering: React.FC<{ text: string }> = ({ text }) => {
+  let start = new Date().getTime();
+  for (let i = 0; i < 1e7; i++) {
+    if (new Date().getTime() - start > 200) {
+      break;
+    }
+  }
+
+  return (
+    <div style={{ userSelect: "none", padding: "30px" }}>
+      <Text>{text}</Text>
+    </div>
+  );
+};