Ben Diamond

This will be weird. I have pretty aggravating ADHD that makes project organization and planning tricky. I was finding myself torn on how to sort my React components and the resources they require in a manner that made sense to me, but it resulted in a lot of projects being re-initialized repeatedly because "it's not quite right".

Vue destroyed that anxiety with its single-file component (SFC) model and composition API. When a single .vue file can pack its relevant requirements into a script, template, and style tag, I no longer need to consider how dependencies need to be organized. I just write exactly what the component needs into the file, and save it wherever I require it.

As for static assets, Vite helped with this by defaulting root paths to the /public folder, keeping my imports short and my assets away from my code.

My current portfolio project uses /src, /src/components, and /src/modules for the Vue parts, and /public contains my logos, images, stylesheets, etc. The level of specificity has helped me compartmentalize my tasks and make the development process feel manageable and digestible, no matter how large it gets.

As I was running through freeCodeCamp's curriculum, I was becoming frustrated by Replit's black box nature as a shared server solution for Node app testing. I wanted to move into a proper workflow with Git and a dedicated deployment solution just for educational or non-commercial purposes. Heroku solved that for me in spades.

Not only does Heroku support free app deployment if you don't use their extra service handlers, but you can directly hook into your GitHub repos and automatically update the app whenever you commit to the main branch. It's a simple way to get an app running as fast as possible if you wish to share a proof of concept or prototype before moving to dedicated servers.

I used Beautify's VS Code extension for a long time, until I happened into Prettier after checking out some alternatives when I required JSX file formatting. Prettier makes a lot of smart decisions that occasionally look silly on the surface (e.g. splitting inline HTML tags to new lines by their brackets to prevent unexpected white space) but requires little to no configuration... which is exactly the point. I want a code formatting solution that allows me to shut my brain off and work on what matters: writing quality code. That's literally their tagline, I believe.

The only .prettierrc config I've ever needed:

{
    "useTabs": true,
    "tabWidth": 4
}

And you're ready to roll.

TypeScript's strong enforcement of object typing and detailed linting is the best way to prevent coding slip-ups before you even know they exist. Coupled with support for ECMA2015 and quality documentation, it should sincerely be a standard.

I'm personally new to TS and incorporating it into a React workflow, but refactoring existing work into TS or creating a new app with TS in mind is intuitive and straightforward. Concepts like generics and interfaces can take time to use efficiently, but it's worth the effort.