My first fully solo project without any tutorials or code alongs.
The process and/or work flow I followed has been a little bumpy so far. I have to establish a routine and workflow for how I will continue to work from here on process. I figured I should begin to figure out what works and what doesn’t along the way. Even if this is my first project for front end web development that includes user interaction with the site. I would like to share my processes so far and the tools, resources, & workflow that I use.
I have been using Atom (my text editor of choice) for a while now and it just works for me. I like to keep things at a minimum so I did not go crazy on the packages & themes I installed. Though I do like customization and the freedom to do so. I like how it offers you the freedom to hack it to get it how you want but it is still a suitable editor without any changes right out of the gate. The packages & themes I have installed consist of:
You can click on the name of each package or theme for more information on each one.
Color Picker: To be able to choose colors from within the editor visually.
Emmet: To help speed of the process coding frequently used snippets.
File-Icons: To display the icons for the file type in the tree view section.
Minimap: To display a mini map of my code and be able to navigate to different sections quickly
Open-in-browsers: This puts shortcut icons on the bottom of HTML files to quickly open the document in the chosen browser. It supports all the major browsers you would expect.
Accents UI: The theme for the editor
Gruvbox-Plus-Syntax: to style the syntax.
To get started I designed the site in Photoshop. I made a rough mockup of what I want to build just as a visual reference in case I need it. When I say rough, it is really rough! It is not meant to be a complete mockup. I kind of got anxious when I was designing the site and just wanted to get straight to the code. It is pretty bare bones when it comes to mockups. I plan on going back to finish it for when I add the site to my portfolio.
Before I began any actual code. I went over the site goals and separated it into features. I added those features to my to-do list. I use the app Todoist for this sort of task. I have been using it for my own to-do list for the past year or so and it is great! So great that I purchased the premium version last year and I have been using it ever since, it is definitely a must-have for me. To give you an idea of how I broke it down take a look at the images:
The next step for me was to setup the folder structure for my project and any future projects. I do not store files locally on my Mac unless I need to for some odd reason. I use a Western Digital My Cloud network attached storage, to store my files. During the time I was setting up my project folders. I realized I would be doing this a lot. So what I did was created all the files and made the folder structure. Then I saved them with all the files linked to each other and setup. That way I can hit the ground running without spending 10 minutes setting up the files, folders and getting them linked. So I would not get confused I named the root folder as newProject and all I have to do is duplicate it and rename it and I’m ready to code!
The last thing I done was sign up for Toggl. I want to be able to track my time each week and compare it to my starting goals at the beginning of each way. This will allow me to see how much I am getting accomplished. It will also allow me to see how much it takes for me to complete certain tasks. Then I can track my improvement overtime to see how much faster I am getting when completing certain tasks. By running an audit of my time like this. I will be able to better plan in the future and become even more productive. My goal is to code outside of my 40 hour work week at least 25-30 hours a week with time spent on code. This week I got started a bit late so I am sure I wont hit that goal. However, starting next week it will give me a more accurate representation of where my time is going. Check back later this week to find out the bugsI have run into and how I have resolved them so far(if I have). Until next time happy coding!