Andre Landgraf smiling into the camera

Andre Landgraf

A tech enthusiast and student who loves to develop fullstack software solutions.

100 Days of Code

Day 37 of 100

>>> React 18 Fixes

Projects

  • react-router-isomorphic-link
    • Fixed React.FC children prop issue with React 18.
    • Fixed className prop bug.
    • Removed all react-router specific props from rendering into anchor tag.

Day 36 of 100

>>> Alignments

Projects

  • Vela Pilates
    • Went over all pages of velapilates and fixed styling issues.
    • Investigated builder.io, might be a better fit than Contentful!

Day 35 of 100

>>> Working Referrals

Projects

  • Vela Pilates
    • Finalized the referrals logic on velapilates.
    • Created a new admin page to see successful referrals for each referral code.
    • Finished the user's view of their referrals.

Day 34 of 100

>>> Robots and Referrals!

Projects

  • Vela Pilates
    • Refactored some more JavaScript to TypeScript.
    • Moved all static images to Cloudinary.
    • Moved the old referral logic over to Contentful.
    • Created a simple page for users to see their successful referrals.

Day 33 of 100

>>> And Cut!

Projects

  • react-ssml-dom
    • Finished editing my video on Remix + Voice

Day 32 of 100

>>> And Action!

Projects

  • Vela Pilates
    • Fully refactored styled-components to Tailwind.
  • react-ssml-dom
    • Recorded a short video about my Remix voice implementation!

Day 31 of 100

>>> Pilates

Projects

  • Vela Pilates
    • Further refactored styled-components to Tailwind.
    • Refactored all SVG files to React components.

Day 30 of 100

>>> Dijkstra

Leetcode

  • Dijkstra's Algorithm:
    • How to use Dijkstra's Algorithm without knowing all the nodes in the graph.
    • How to exit Dijkstra's Algorithm early after finding the one shortest path from A to B.

Day 29 of 100

>>> Dijkstra

Leetcode

  • Dijkstra's Algorithm:
    • How to use Dijkstra's Algorithm to track the shortest path (not just the costs).

Day 28 of 100

>>> Published

Projects

  • react-router-isomorphic-link:
    • Reiterated on the documentation.
    • Published the package to npm. 🥳
    • Tweeted about it!

Day 27 of 100

>>> All sorts of links

Projects

  • react-router-isomorphic-link:
    • Fixed bugs in the package / unit tests.
    • Added some documentation.

Day 26 of 100

>>> State Machines

Projects

  • react-router-isomorphic-link:
    • Added some unit tests to the package.

Day 25 of 100

>>> State Machines

Leetcode

  • Worked with state machines (DFAs) for uni.

Projects

  • react-router-isomorphic-link:
    • Started abstracting a Link wrapper component I use in every project into a small package.

Day 24 of 100

>>> Leetcode is Funcode

Leetcode

  • Shortest Path Problem
  • Dijkstra's Algorithm
  • Priority Queues

Day 23 of 100

>>> Bugs and other insects.

Projects

  • react-datalist-input
    • Fixed some bugs in the v3 release of react-datalist-input.
    • Also removed some experimental code that I forgot to remove earlier.

Day 22 of 100

>>> Refactoring

Projects

  • react-ssml-dom
    • Published ssml-dom and updated react-ssml-dom to make use of it.

Day 21 of 100

>>> Refactoring

Projects

  • react-ssml-dom
    • Created a new package called ssml-dom and abstracted away some code that was in react-ssml-dom before.

Day 20 of 100

>>> Covid-SSML

Projects

  • react-ssml-dom
    • Created the Dialogflow model for my Covid-SSML demo app and tested it out on Google Assistant!
    • Started moving code from the demo app to react-ssml-dom. Will continue tomorrow!

Day 19 of 100

>>> Covid-SSML

Projects

  • react-ssml-dom
    • Finished refactoring my demo app covid-ssml to the react-ssml-dom changes!
    • Have to wrap up some more things and will create a Google Assistant model next - but almost done!

Day 18 of 100

>>> DatalistInput v3

Projects

  • Vela Pilates:
    • Upgraded to React 18.
    • Started testing version 3.0.0 of react-datalist-input.
  • react-datalist-input:
    • Finally pushed version 3.0.0 of react-datalist-input. A huge rewrite that I have been working on for quite a while. Still some bugs to fix but it's released!

Day 17 of 100

>>> React 18

Projects

  • Vela Pilates:
    • Finally released a new version of the velapilates including an update to the design (using TailwindCSS).
  • react-datalist-input:
    • Replaced custom useId hook with new React 18 useId hook. Really cool!
    • Replaced custom useDebounce hook with new React 18 useDeferredValue hook. Really cool!

Learning

  • Played around with React 18, specifically useId and useDeferredValue.

Day 16 of 100

>>> Global variables

Projects

  • react-ssml-dom:
    • Further refactored covid-ssml using the updated version of react-ssml-dom.
    • Decided how I want to handle conversation meta data in my Remix app: global object called conversation similar to the window object in the browser.

Day 15 of 100

>>> Back from my trip to Seattle!

Projects

  • Personal Website:
    • Updated the 100DaysOfCode journal to enable gap days between the 100 days of code.
    • Added option to fetch md files from fs instead of GitHub for local dev.

Learning

  • Learned about generator functions in JavaScript and the yield keyword.

Day 14 of 100

>>> Rabbit holes.

Projects

  • Investigated how to move forward with react-ssml-dom and web+voice via React/Remix.

Learning

  • Investigated the Web Speech API
  • Had a first look at nlp.js

Day 13 of 100

>>> Void

Projects

  • Didn't do much today as I had to organize a few things however, I finished & presented a uni project today!

Day 12 of 100

>>> Void

Projects

  • Didn't do much today as I had to organize a few things however, I finished a uni project, which turned out to be a good learning experience!

Day 11 of 100

>>> It's the Remix

Projects

  • Fixed some things up in react-ssml-dom to make it work nicely together with Remix.
  • Created a demo application remix-voice, which showcases how to use react-ssml-dom together with Remix.run and React to build voice UIs!

Learning

  • Further investigated React Server Components, especially diving into the react-dom package to see how suspense is used when rendering static markup. It's very complicated and I had a hard time following the logic...

Day 10 of 100

>>> Coffee & Code

Projects

  • Cleaned up react-ssml-dom and published the changes as 2.0.0-experimental.1!
    • I removed the "conversation" logic but I haven't found a great alternative yet.
    • Since I removed the "conversation" logic, the demo app is currently broken.

Learning

  • Investigated React's upcoming Server Components. They seemed like a great replacement to the "conversation" logic in react-ssml-dom but they seem to be quite a bit more complicated. I will probably just use data fetching outside of React for now and then use Remix for the more complex demos.

Day 9 of 100

>>> Counting is hard.

Projects

  • Refactored react-ssml-dom to TypeScript. This will make it easier to include it into my TypeScript-based Remix demo apps!

Day 8 of 100

>>> Voice UIs

Learning

  • Played around with Remix for voice UIs. Spent a lot of time experimenting with the entry.server.ts file. Tried to make Remix work both for voice-only UIs (rendering SSML instead of HTML) and web pages with voice support. I will create a demo for both in the next weeks!

Projects

  • I read through the code of an old research project of mine - react-ssml-dom - which I will use under the hood of my Remix-based voice UIs.

Day 7 of 100

>>> Interview and Recruiter Call

Leetcode

  • One technical interview about JavaScript & React!

Day 6 of 100

>>> Playing Games

Learning

  • Implemented a small browser game from scratch (inspired by Mary Rose Cook's Space Invaders). Learned a lot about: canvas, audio, the web navigator object, and animation frames today!

Projects

  • Worked on my portfolio site:
    • Added a demo overview page
    • Added a first demo: Jump n' Run

Day 5 of 100

>>> A Little Lost

Projects

  • Worked on my portfolio site:
    • Added meta data to the different routes
    • Started updating basic UI components with new primary & secondary colors
    • Updated outline styling on hover and focus

Day 4 of 100

>>> Good Things Take While

Leetcode

  • Quick Sort Implementation

Learning

  • Watched this really cool conference talk by Mary Rose Cook about the basics of game dev on the web.

Day 3 of 100

>>> Practice makes Perfect!

Leetcode

  • Merge Sort Implementation

Learning

  • Hands-on practice with animations:
    • Added animations to the icons on my resume at andre-landgraf.dev

Day 2 of 100

>>> Leetcode, Uni, and This Journal!

Learning

  • CSS Animations & Transitions (Level Up Tutorials):
    • Hands-On Squash & Stretch animations with css transform, transition, and cubic-bezier.
  • React-3D (Level Up Tutorials):
    • Getting started with the fundamentals of Three.js: Scenes, Light, Camera, and Meshes!

Leetcode

  • Two Sum (using Map instead of Sort & Traverse)
  • String.prototype.repeat Polyfill

Projects

  • 100DaysOfCode Journal at andre-landgraf.cool (mostly copy-paste from past projects):
    • Fetch files from GitHub
    • Render md files with custom React components)
    • Embed Tweets
    • Cool gamified Font!

Day 1 of 100

>>> Hello World!

Community

  • Answered one question on StackOverflow:
    • "How to programmatically submit a form in Remix.run"

Learning

  • CSS Animations & Transitions (Level Up Tutorials):
    • Simple Squash & Stretch animations with css transform, transition, and cubic-bezier.

Leetcode

  • Two Sum / Three Sum / Four Sum

Day 0 of 100

>>> My Goals for the next 100 Days!

There is just so much I want to do this year! I can probably not finish all of this but I will try to tick as many boxes as possible in the next 100 days of code!

  • Learning
    • CSS Animations & Transitions [ ]
    • 3D for websites (WebGL, Three.js, and react-three-fiber) [ ]
    • Data Viz for the web (D3.js) [ ]
  • Leetcode
    • Crush coding interviews [X]
  • Community (StackOverflow, Remix.run Discord, Meetup, Twitter, ...)
    • Speak at Remix.run Meetup Bay Area [ ]
  • Open Source
    • Publish ARIA-compliant version of react-datalist-input [X]
    • Contribute code to Remix.run project [ ]
    • React + Voice
      • Experiment with Remix to create voice applications [X]
      • Create a virtual talk (video) about the application of React/Remix for voice apps [ ]
      • Experiment with web + voice apps using Remix [ ]
  • Projects
    • Particular.Cloud
      • Fix lambda timeout (mongoose connection) on Vercel (deploy to fly.io) [ ]
      • Release crowd-sourcing feature [ ]
      • Open source npm packages & VS Code extension [ ]
      • Add docs search and command panel using Algolia [ ]
    • Vela Pilates
      • Refactor from Gatsby & JavaScript to Remix.run & TypeScript [ ]
      • Replace remaining styled-components code with Tailwind CSS [ ]
      • Implement new referral logic [ ]
      • Implement new reminder logic [ ]
      • Expore/design live-stream course logic [ ]
    • andre-landgraf.cool
      • Apply learnings [ ]
      • Showcase projects [ ]
      • Showcase 100 days of code progress [X]