A Place for Everything and Everything In Its… Please Don’t Move That
How do you organize your code? What are some suggestions you find on the web?
Have you ever seen a prop storage room that’s somewhere between Doc Brown’s apartment and an episode of Hoarders? For some of us, we may know exactly where everything is. Should we ever need an Outatime license plate or a flux capacitor, we’d probably remember to look between the clocks that read 7:53 am and the countless opened cans of Kal Kan dog food. While there may be a method to the madness (and let’s be honest, the method is madness) sooner or later we’re going to misplace something that we really need, and the only way to find it is by retracing our steps and going back in time. Much like a seasoned prop room, when completed projects continue to pile up for a developer, useful code can be difficult to find, leading you towards an endless spiral of looking in folders, within folders, within folders. Unless your last name is McFly, who’s got time for that?
If you’re a beginning coder, or you’re looking for some tips and tricks to keep your code organized, check out Dan Fletcher’s blog post, Beginner’s Tip: Organize Your Coding Projects. In this article, Fletcher does a great job of pointing out what tools to use and skills to learn to aid in organization such as really becoming familiar with Git, but also highlighting what not to do. What he suggests is to avoid organizing code by language and nesting. Rather, maintain a flat folder structure and use a spinal case (kebab-case) naming convention for your work. This helps avoid digging for folders within folders and eradicates the need to remember case-sensitive characters within file names while searching for your work.
But what about when you’re starting to really begin app development? You’ve got this great idea for, let’s say, time travel and you’re going to need a structure of organization within the project itself. That’s when we start talking about dividing work into routers, controllers, and static files. By keeping everything clean and separate, you or a small team can avoid code conflicts because your file structure is separated by tasks.
According to Terlici (Stefan Fidanov & Vasil Lyutskanov), it’s best to follow an MVC design or Model-View-Controller pattern. For an in-depth look, you can check out their article here, but here’s a quick run-down.
A router according, to Divpusher, is the path for requests and determines what happens when the user visits a page. A controller is what accepts a user’s request and determines where it should go and what should happen with the request. For a visual explanation look at this example from Divpusher. A static file according to Matt Layman, from mattlayman.com, is a file that doesn’t change while an application is running. Layman asserts that the most common types of static files would be CSS files, Javascript files, and images. For more help with Django and Python, you can check out his website.
So, while Doc Brown might know exactly where everything is in that workshop of his, be it 1955 or 2015, you can bet that keeping your code organized is indeed, timeless.
“The whole difference between construction and creation is exactly this. That a thing constructed can only be loved after it is constructed- but a thing created is loved before it exists.”
— Charles Dickens
Can you describe your workflow when you create a web page or web app?
If you’ve read this blog, you’ll know that my approach to coding comes from a theatrical background. For me, the ties between web development and theatre are countless, and this includes the importance of having a solidified process towards project work. Step one for me in producing, directing, or performing in a play is to read the script. I let the story affect me as an audience member and see what strikes me before I begin to delve into the hows of putting the text onto the stage. Ultimately, what is the overall lesson that the story is teaching? What is its purpose? Likewise, the first step for me as I begin to create a web page or app is answering the same question. What is the purpose of the app? Who is its target audience and what similar pages or apps are already out there trying to solve the same challenge? With those questions in mind, I begin to surf the web and see what inspires me. I look for what is working well for others, and in the same vein, try to find what can be improved.
The second step then is to write out (by paper sometimes) the steps or basic functionality that I’m trying to accomplish. For example, my cornerstone project is a memorization app. While there are a lot of memorization apps and pages out there, my approach is going to be a tad different, but more on that will be in a later post once the app is complete. So, in the second step, it’s really all about the basics. First, identify the problem or challenge, and then second, try to find a solution with code. This then leads me to step three, logic.
The good news is that the backend language of my app is Node.js. So, now that I know what I’m writing with, I can start to piece out the logic and start tackling the hows of what I’m creating.
All this to say, that while the components of functionality come into place, what’s always cropping up for me is the design aspect of the app. How is this app supposed to make someone feel? And while that may seem irrelevant for some, I believe that design is just as important as functionality. Here’s what I mean: memorization is often tied to public speaking, and in turn, public speaking is often tied to fear. While this may not be the case for everyone, (believe it or not, some of us quite enjoy speaking publicly), the effect that design can have on one’s goals to tackle a piece of text plays a significant role in a person’s productivity and habit building. In turn, design in some ways can be viewed as functionality itself. For a great look at how design challenges play into habit building, check out this article about Chris Delbuck’s (Calm’s Head of Product Design) approach. By the way, if you haven’t used Calm before, I highly suggest it. They’ve got the best commercials ever. I promise you’ll thank me.
So after research, logic, and sketches, all while striving to answer what is the ultimate job of the app, my workflow consists of trial and error in an attempt to create something meaningful and useful. As Charles Dickens once wrote, “The whole difference between construction and creation is exactly this. That a thing constructed can only be loved after it is constructed- but a thing created is loved before it exists.” Let’s face it. The more we love what we’re working on, the better the outcome.
You can’t work out how to solve a coding problem, where do you find the answer? Why? How do you know?
My brother-in-law, who’s always ahead of the game and probably knew PHP before he could talk, speaks of Stack Overflow like it’s a great friend with easy-to-understand advice. While that’s true, and the answer to a question has been asked before, but answered 100 times as many on Stack Overflow, for me personally, I’m still getting used to it. I feel at times like I walked into the wrong room. Everyone’s got a brand new phone and I’m still carrying a PDA. I’m getting used to it and developing those skills of looking for the green checkmark next to the top answer. But for me, I need a little bit of both text, and if I can find it, a video explaining a solution or at least a tool to use. Rather than just get a solution, I need to know why this works, and when I find a great channel like Programming With Mosh, Traversy Media, or a personal favorite Fun Fun Function, I feel that I’ve learned more than just an answer to a single problem. I can now walk away with a few tools to solve common problems along the way.
What problems have you solved that didn’t involve coding?
Am I the only one who feels that a literal walk away from the screen, a couple of deep breaths, and thinking about nothing solves a lot of issues in programming? Yeah, we all know this is a good approach towards life’s challenges, and I think I’ve been pretty clear as to where I stand as a fan of Calm, but really allowing a paradigm shift to take place is a great way to avoid a lot of pitfalls. Programming demands embracing a sense of adaptability. Which, now that we’re talking about it, Theatre demands the same. Both fields require collaboration and when challenges arise, sometimes the best ways to solve a problem require a deep breath and forget about it for a short while. Then, once your mind has been cleared, you can come back with an understanding of what someone else on your team is trying to convey.
The problems that I’ve often had to solve that didn’t involve coding usually stemmed from miscommunication. One person had an idea, the other person was asked to make that idea come to fruition, and mountains of challenges were created. Maybe there weren’t enough resources, or maybe the two people were not on the same page. For me, dealing with creative content that seems to be manifested from nowhere at times, calls for giving and receiving clear directions. When misunderstanding happens, I’ve found it’s always best to not take it personally, but come at it again with a fresh perspective. Oftentimes, when challenges arise, it doesn’t always mean that the answer was wrong, but that someone might not be asking the right question, and once you do, you’ll get the answer that you were looking for.
Talk about your preferred development environment. (What IDE or text editor do you enjoy, and why.)
Visual Studio Code is my preferred and only IDE. Why, partly because I haven’t delved into anything else just yet, and why try to fix it when it ain’t broke? The extensions are great, like Prettier, Rainbow Tags, and a myriad of color themes. But above all, VS Code is free, and when something that is free works this well, I’m hooked and got nowhere else to go.
How are you keeping up with the latest developments in web development?
Thank goodness for APIs and suggestions. The more I search for answers to questions about class projects, or go down a wormhole over CSS Tricks, the information starts to just come to you. My news sources span anywhere from Medium articles, YouTube tutorials, and Twitter to say the least. And while all of these have some reputable sources, sites like Codecademy and Wes Bos always provide great in-depth tutorials about developments in web development.
