My Stack logo

My Stack


Stack Decisions

Application and Data

(16)
JavaScript
Node.js
React
HTML5
PHP
Java
MySQL
TypeScript
CSS 3
ES6
Bootstrap
Vue.js
Sass
ExpressJS
Heroku
Markdown

Utilities

(4)
Google Analytics
PayPal
WooCommerce
Twilio

DevOps

(8)
Git
GitHub
Visual Studio Co ...
npm
Webpack
Babel
Prettier
Vite

Business Tools

(4)
WordPress
Google Fonts
Font Awesome
Asana

More stacks from Ben Diamond

Want more information about this stack?
Avatar of thednbgremlin
Web Designer & Developer at Self-employed·

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.

READ MORE
17 upvotes·13.9K views
Avatar of thednbgremlin
Web Designer & Developer at Self-employed·

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.

READ MORE
15 upvotes·3 comments·37.3K views
Jack Heaton
Jack Heaton
·
May 13th 2022 at 4:20PM

I was looking into using Vue, and also have experienced similar feelings about project organization in React (and Next.js for that matter).

Thanks for sharing this, it's a helpful take!

·
Reply
Ben Diamond
Ben Diamond
·
June 2nd 2022 at 4:24PM

I'm glad my concerns resonated with people! The only change I made since this post is putting static resources in [/src/assets] and using [/public] for direct HTML imports, as I switched to trying Tailwind and it made more sense to have my stylesheets as a [/src] directory.

·
Reply
Jack Heaton
Jack Heaton
·
June 3rd 2022 at 12:50PM

Hmm that's good to know! Thanks again for sharing Ben, cheers!

·
Reply
Avatar of thednbgremlin
Web Designer & Developer at Self-employed·

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.

READ MORE
6 upvotes·17.5K views
Avatar of thednbgremlin
Web Designer & Developer at Self-employed·

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.

READ MORE
3 upvotes·1.4K views