Dan Brioli
Web developer and hobbyist game dev. Tech. Economics. Leadership. Visit https://www.danbrioli.com/

These are requirements that you need to enact today for developing modern web app front ends.

Image for post
Image for post
Thomas Tastet, Unsplash

1. Organize Your Files Properly

I keep components and every asset that each component requires inside their own folder. This helps to compartmentalize components from a file organization perspective, and it lets you see everything that each component needs right there alongside the component itself — right where its file is stored.

Some developers acquired a terrible habit a long time ago. The habit that they acquired that has absolutely ruined their file management ability was grouping similar files together. They keep all of their CSS in one folder. They keep all of their JS in one folder. …

Make your preprocessor variables make sense!

A desktop with various design tools and a computer screen.
A desktop with various design tools and a computer screen.
Lubos Volvkov, UX Store, Unsplash

You know what they say:

Programmers are good at three things — naming stuff, and off-by-one errors.

Use these 5 quick tips to fix your SASS variables and get the most out of your preprocessor, right from the start of your project.

1: Justify Your Variable Use

Don’t make a variable that you use just once. Don’t make a variable for a primary color that you aren’t going to need to potentially change at any point in the future. Variables are supposed to be variable, right? …

Listen up, me, because I’m only going to say this once.

Eyeglasses held up to an eye exam.
Eyeglasses held up to an eye exam.
Hindsight is something something something. Photo: David Travis, Unsplash.

To me, age 8: Don’t listen to her, she doesn’t actually know who you are or who you will want to be. Find ways around all of the arbitrary rules you get caught up in to do the things you want to do. Trust me, they exist. I know, I know — rules are there for a reason, you’ve got to follow them. But honestly… you usually don’t. It’s easier to ask for forgiveness than permission.

To me, age 11: You won’t even remember who these people are. Start ignoring others’ opinions sooner. 95% of the people at any point in your life will have zero impact on it beyond what you allow them to have. Most of them are perpetually negative, come from a culture of defeatism, and will never even step foot outside of this town to see what else the world might hold for them. …

Think Trump’s going away in 2021? Well, you’re wrong. He’s making an app.

Image for post
Image for post
Obviously, without a Twitter account, POTUS is at a loss when it comes to getting his message out.

The events at the nation’s capital the other day were a disturbing reminder that there are still plenty of “patriots” who aren’t interested in democratic processes at all, despite their exclamations and hand-wringing about unsubstantiated claims of electoral fraud. I am sure that as time goes on, plenty of revelations will occur over the events that transpired on January 6th — but I won’t try to guess what those will be. I am absolutely sure that they will be illuminating when they show up in the headlines. …

Don’t let “good enough” be the enemy of “best.”

A man standing in snow in front of a mountain peak.
A man standing in snow in front of a mountain peak.
Joshua Earle, Unsplash

The Photographer

Follow me on a mental journey for a moment.

You are a photographer, traversing an idyllic and picturesque mountain range. You’ve been climbing all morning. There was birdsong earlier, but it is mostly quiet, now. You only hear the wind in your ears and the rocks that have been let loose from contact with your boots. The rocks only breach the sound of the wind briefly before tumbling out of both eyesight and earshot. The sun is shining but it is cold at this altitude. …

Once you use them, you‘ll never build apps the same way again.

Image for post
Image for post
Beatriz Pérez Moya, Unsplash

There is no by-the-book best practice for your React app’s file structure. Ultimately, these decisions are based on what works best for you and your team. These two tips are what finally helped me make sense of the chaos that is managing React components and assets in my IDE.

Tip 1: Use This Versatile Folder Structure

If you generate a new React app — from create-react-app, for instance — you will see everything that was created is just stuffed into the src folder. …

This simple tutorial will have your visual art hosted online — for free — in 30 minutes!

Image for post
Image for post
Markus Winkler, Unsplash

A Place You Can Call A Homepage

This is the quick-and-easy guide for anyone who needs a free hosting solution for a simple image gallery with no file compression — ideal for a visual artist. I’ve broken down all of the steps so that you will have a portfolio up and running in 30 minutes. We will be using Github Pages, which is a free service provided by a company called Github.

If you use this tutorial and would like help with adding any additional features, let me know and I will write up tutorials for them! …

One’s funny and one’s not, but they’re both related.

Image for post
Image for post

90/90 — The Funny One

The 90/90 rule is a tongue-in-cheek “law” of software development. It states:

The first 90% of the code you write is responsible for the first 90% of development time. The last 10% of the code you write is responsible for the last 90% of development time.

Obviously, 90% plus 90% is greater than 100%. That’s the point. It’s meant to show us that project planning always underestimates actual development time.

Anyone who has worked on a project from start to finish understands this concept. Everyone gets together and they talk out the project specifications in a series of seemingly-never-ending meetings. The milestones are set in stone. The project makes leaps and bounds for most of its development time. The largest and easiest parts of the codebase are released to a development server. It kinda looks like the whole thing is almost done. A few more sprints to handle the details and the project will be complete. …

Take advantage of these easy tips to get productive results in the areas that mean the most to you.

Image for post
Image for post

Cal Newport wrote a book titled Deep Work: Rules for Focused Success in a Distracted World. In this book, he built up an idea that he called deep work. His ideas focus on allowing yourself to perform work in a distraction-free environment so that you can push your mental and physical efforts to their limit.

The general thesis is that most of the work that fills our daily workload is shallow work. You send emails, you respond to tickets, and you have chats with co-workers. You bounce in and out of different activities to put fires out. …

The GUI won’t help you, but backticks will.

Image for post
Image for post

I was guilty of not knowing these formatting rules when I was new to Medium’s story editor. It isn’t readily apparent how you’re supposed to create blocks of code or inline code formatting.

Here’s how you do it.

What Is A Code Block?

Oh, c’mon now! You know what a code block is.

console.log("This is a code block!");
console.log("It's used to display more than one line of code in a monospace font with a slightly different background color than the main body's text.");

When you’re in the Medium story editor, type three backticks (`) at the start of a new section to create a code block section. You’ll get exactly what you expect — a monospace font designed for reading code easily. …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store