Johnny Magrippis Personal Site

The personal website of software engineer Johnny Magrippis. Yours truly!

Live Site

You can view the result of all this code at magrippis.com.

Notable tech used

Questions & Contributions

The web is vast and technologies change all the time! This project once was a frontend in Angular talking to a RESTful API written in php. Then a Apollo React frontend talking to a GraphQL backend! It's all in the version history 😁

Feel free to ask why a feature is implemented in a particular way, or push "Best Practices" and request neat features!

Coding Challenges

This repo also houses jmagrippis’ Coding Challenges! Visit the index, find one you like, and give it a whirl!

Prep

You will need the version of Node specified in the .nvmrc installed: it is recommended to use nvm for hassle-free node version management, and simply running nvm i at the project root.

Yarn v1 is recommended for installing this project's dependencies. npm which would have been installed alongside node should work almost just as well.

Assuming you went with yarn, go to the root of the project and run:

yarn

... and everything you need to run this project and its tests will be downloaded for you. Prep complete!

Starting the dev server

If you clone this project and go to the root directory, running:

yarn dev

Will spin up the dev server, running on port 3500. For example, visiting http://localhost:3500/coding-challenges/2020/cycling-element would get you to the spec for the Cycling Element challenge, and http://localhost:3500/coding-challenges/2020/cycling-element/playground where you could be trying to fulfil the spec.

Running tests

Regardless if you’ve got the server running, the following command will start the test runner:

yarn test --watch

Tests will rerun when any code changes, so you may start adding MyComponent.test.tsx files with expectations and see turn from red to green as you fulfill the spec.

The testing framework of choice is Jest and React Testing Library is also setup, and heavily recommended for the UI testing.

Running e2e tests

For these you will need the server running at http://localhost:3500/.

We're using Cypress to ensure the app "actually works"™ in production, and to follow BDD with responsive-design and accessibility in mind.

Responsive design especially, is tricky to meaningfully test using the Jest tests from the previous section. In contrast, edge-cases, mutating / destructive scenarios are trickier to test e2e and it's where the Jest tests shine!

My blogpost on BDD and E2E testing a responsive web app sums up how I set up a very similar config during live-streams on Twitch 🙂

In any case, to develop the app with the tests running side-by-side to the browser using the Cypress Dashboard, run:

yarn bdd

Our automated tests that run against deployments are defined in .github/workflows/e2e.yml. They essentially run the following command, only visiting the deployment url instead of the local server:

yarn e2e

Gitmoji commit guide

A fellow engineer introduced me to the Gitmoji and I am giving it a shot! I do think that list there is a bit too extensive, but the ones I am using here are:

💡 for new blogposts
🔊 for new milestones
✨ for new features
⬆️ for upgrading dependencies
♿️ for accessibility improvements
📝 for updating documentation
🐛 for fixing bugs
🎨 for improving code structure
💄 for purely visual updates
⚡️ for improving performance
♻️ for refactoring code

License

For learning purposes, this repo is licensed under the MIT license.

kilimchoi/magrippis