For the past few weeks I&#8217;ve been working on a side project and documenting it in a series of blog posts. It&#8217;s been a pretty lengthy project so I wanted to take a quick break and write about my first experience publishing a package to NPM. The more I work in the code editor, I begin to see the need for helper functions that have common usage regardless of the project. My previous solutions for this were to re-write the helper function from scratch or, moderately more efficiently, copy and paste one I had written in a different project. 



Today I decided it was time to at least start collecting these helpers in their own repo so I didn&#8217;t have to go hunting down that one project from months ago where I think I last used the function. I created a GitHub repo <a rel="noreferrer noopener" href="https://github.com/lucsedirae/helper-library" target="_blank" data-type="URL" data-id="https://github.com/lucsedirae/helper-library">https://github.com/lucsedirae/helper-library</a> and loaded the couple of helpers into an index.js file that I am constantly searching for to get it started. 



Then the thought occurred to me that it would be nice to just install this index.js file via NPM and be able to import the functions like I would any other NPM published dependency. I wasn&#8217;t sure where to start so I did some Googling and discovered the process was actually really easy and NPM gives you unlimited public access packages with their basic free tier membership.



<h2>Initializing package.json</h2>



The first step after cloning down my repo that I initialized from the GitHub website GUI was to run <code>npm init</code> from the root directory of my new repo on my local machine. This executes a command line script that asks for basic information about your package and creates a package.json file in the project directory. It&#8217;s important to have a readme file, a license file, and make sure the NPM &#8220;entry point&#8221; is the name of the file you want to store your functions in. The default entry point suggested by the <code>npm init</code> script is index.js so that&#8217;s what I went with.



Inside index.js I wrote out the couple of helpers I am always searching for. The one I needed this morning was <code>formatDate()</code>. It&#8217;s a simple function that takes in an <code>incoming</code> UTI time stamp value, creates a new JavaScript date value using the Date constructor and then returns that new value using the toLocaleDateString method. I have some plans to expand the functionality of this over time so I use it regularly as a helper instead of doing both of those other processes inline for each use case. This is a much lighter-weight solution than importing a time-handling library like moment.js and keeps my codebase clean.



I pushed these initial functions up to my GitHub repo and was ready to publish the package to NPM.



<h2>Publish to NPM</h2>



Before you can actually publish your package you need to create an NPM account. You can do this from their website at <a rel="noreferrer noopener" href="https://www.npmjs.com/" data-type="URL" data-id="https://www.npmjs.com/" target="_blank">https://www.npmjs.com/</a> or from the command line by running <code>npm adduser</code>. Make sure to select a password longer than 10 characters. NPM will send you an email to confirm your address and once you have clicked on their confirmation link you are ready to publish.



Publishing was as easy as running <code>npm publish --access public</code> from the command line inside the root directory of the package you wish to publish. Once that script completed, I was able to test my publication inside a project. My package is published as my GitHub user name so I navigated to the project I wanted to use the function in and ran <code>npm i lucsedirae</code>. Then I imported the function in the file where I needed it to run:



 <code>import { formatDate } from 'lucsedirae';</code>



Then called the function:



<code>  const todaysDate = formatDate(Date.now());</code>



And voila! It worked like a charm!



<h2>Caution!</h2>



I noticed after running <code>npm i lucsedirae</code> that there were a lot of vulnerability notices in the terminal. I haven&#8217;t had a chance to dig into how to fix these issues but I do plan on doing so to expand my understanding of NPM and its package publishing environment. So, with that said, I would not recommend using a package like this in a production environment. When I publish my project I will replace that import with the helper functions hosted in a utils file inside the project until I better understand the security implication with using my own NPM package. But as a learning experience and a way to store common helper functions for practice projects, I was really satisfied with the results.

Publishing my first NPM package

In the previous post I laid out the scaffolding for my back end code. It took a little time to think through the code I would need. I referred to some past projects and a tutorial I had taken when I was first learning React. During the process of pseudo-coding there were a couple times where I felt like the effort was outweighing the eventual benefits. What&#8217;s the point of writing one comment line to describe another single line importing a model after all?



<h2>Pseudo-Coding</h2>



After completing the process, I felt different about that &#8220;extra work&#8221;. The result was akin to painting by numbers. Once I finished pseudo-coding, it only took a fraction of the time I would normally spend writing up a node API to get all of the pieces in place and functioning properly. I was able to cut and paste some code from older projects quickly and easily given that every piece of functionality already had a home in the document. The structure of the pseudo-code comments also made writing the completely new code blocks a breeze. The concept of what needed to happen was already in place, so I saved a ton of time in trying to think through the logic on the fly. Additionally, my code is much easier to follow because I left many of my pseudo-code comments in place or modified them slightly to explain what each piece of logic was doing. 



In a real-world production environment, this may be overkill. I&#8217;m aware of the debate that surrounds comments and the addage &#8220;Write fewer comments by writing cleaner code&#8221;. The idea behind this phrase is that if your code is written well enough, comments become unnecessary because your code can speak for itself. I&#8217;m not sure I&#8217;ll ever fully adopt this mindset, as I find it much easier to not only understand what I&#8217;ve written but also to navigate the document seeing the comments acting as headers for each block. At least for my personal projects, I intend to continue writing comments that explain what is happening in each significant section and just let the compiler make up for my inflated file sizes. Here&#8217;s an example of my commenting practices in the server.js file:



<figure class="wp-block-image size-large is-resized"><img src="https://wp.jondeavers.net/wp-content/uploads/2021/10/ServerJs2-1-1024x880.png" alt="" class="wp-image-121" width="350" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/10/ServerJs2-1-1024x880.png 1024w, https://wp.jondeavers.net/wp-content/uploads/2021/10/ServerJs2-1-300x258.png 300w, https://wp.jondeavers.net/wp-content/uploads/2021/10/ServerJs2-1-768x660.png 768w, https://wp.jondeavers.net/wp-content/uploads/2021/10/ServerJs2-1.png 1278w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



Similarly, in my routes files, having this &#8220;roadmap&#8221; in place allowed me to think about some future development ideas and leave breadcrumbs for adding new features in the future. For example, since this app is designed to track progress in weight loss and blood pressure, it&#8217;s not practical for a user to easily be able to go back and edit or delete old entries. Ideally you would want your user to have that ability but place it behind a roadblock that requires the user to confirm they want to edit their history and be aware of those implications. Since that was outside the scope of my initial minimum viable product definition, I left room for it in the API and color-coded the future development notes using Better Comments VSCode extension.



<figure class="wp-block-image size-large is-resized"><img src="https://wp.jondeavers.net/wp-content/uploads/2021/10/metricsRoutes-1024x772.png" alt="" class="wp-image-122" width="350" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/10/metricsRoutes-1024x772.png 1024w, https://wp.jondeavers.net/wp-content/uploads/2021/10/metricsRoutes-300x226.png 300w, https://wp.jondeavers.net/wp-content/uploads/2021/10/metricsRoutes-768x579.png 768w, https://wp.jondeavers.net/wp-content/uploads/2021/10/metricsRoutes.png 1529w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



Notice the route definitions on lines 16-18. This is a labeling convention I picked up by following the React Front to Back Tutorial by <a rel="noreferrer noopener" href="https://www.traversymedia.com/" data-type="URL" data-id="https://www.traversymedia.com/" target="_blank">Brad Traversy</a>. I mentioned his tutorial in the previous post and loved this idea of having detailed descriptions of each route so I&#8217;ve implemented it in my own API&#8217;s. Thanks Brad!



<h2>Postman</h2>



I&#8217;d love to tell you that server.js fired right up on the first try after finishing the coding process. I&#8217;d love to, but I can&#8217;t. A few oversights still popped up and I had to troubleshoot a couple of minor bugs in my routes before I got to this beautiful console message:



<figure class="wp-block-image size-full is-resized"><img src="https://wp.jondeavers.net/wp-content/uploads/2021/10/console.png" alt="" class="wp-image-123" width="350" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/10/console.png 654w, https://wp.jondeavers.net/wp-content/uploads/2021/10/console-300x120.png 300w" sizes="(max-width: 654px) 100vw, 654px" /></figure>



Now it was time to test out my API using one of my favorite tools in all of web development; Postman. Postman is a free (for solo developers) tool for testing REST API&#8217;s during development without having a front end client. <a rel="noreferrer noopener" href="https://www.postman.com/" data-type="URL" data-id="https://www.postman.com/" target="_blank">You can download it here.</a> I&#8217;ll write a post dedicated to using Postman in the future, but for this post, I&#8217;ll share some screenshots and give an overview of how it is used.



Postman allows you to create HTTP requests using a URL field similar to what you would find in a web browser like Chrome, Firefox, or Safari:



<figure class="wp-block-image size-full is-resized"><img src="https://wp.jondeavers.net/wp-content/uploads/2021/10/postman_postreq.png" alt="" class="wp-image-125" width="350" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/10/postman_postreq.png 643w, https://wp.jondeavers.net/wp-content/uploads/2021/10/postman_postreq-300x153.png 300w" sizes="(max-width: 643px) 100vw, 643px" /></figure>



Sometimes these requests can get pretty complex and so as you develop your API you can save collections of requests and easily access them later as you update or modify your API.



<figure class="wp-block-image size-full is-resized"><img src="https://wp.jondeavers.net/wp-content/uploads/2021/10/postman_collect.png" alt="" class="wp-image-126" width="348"/></figure>



Postman returns the body of your request in easy to read JSON format as well:



<figure class="wp-block-image size-full is-resized"><img src="https://wp.jondeavers.net/wp-content/uploads/2021/10/postman_res.png" alt="" class="wp-image-127" width="350" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/10/postman_res.png 445w, https://wp.jondeavers.net/wp-content/uploads/2021/10/postman_res-300x166.png 300w" sizes="(max-width: 445px) 100vw, 445px" /></figure>



Side-note, Batman is a gracious alpha-tester for most of my API work. 



<h2>Summary</h2>



Just like in the console previously, not all of my requests worked perfectly the first time. On the whole, however, this pseudo-coding process turned what used to be a day-or-three-long project into a functioning node server and REST API in just a couple hours. Next up, we bootstrap the front end client and pseudo-code the front end UI in React!

Side Project Journey Part 4 – Back End Coding

The first two parts of this series were focused on desiging the user interface of my new side project called Bioledger. The first step was hand-sketching the UI elements on a sketchpad. The sketches don&#8217;t look great but they did give me a clear plan for what I needed to create on the screen. The second step was to translate those hand sketches into a digital version that gave me a representation of what the final project would look like on a mobile device. Figma and its community-built tools made that process relatively easy. Now I have some solid reference points for beginning the actual development process. I feel good about where I am in the process so far but a couple of things have changed from my original plan. Let&#8217;s take a look at the original outline from part 1:



<ul><li>Design product<ol><li>(complete) Sketch out the UI on paper including any necessary elements and a basic navigation flow</li><li>(complete) Use the sketches as a basis for a more detailed design on a digital design tool (i.e. Figma)</li></ol></li><li>Develop back end<ol><li>Using the designs developed in step 1, map out the data structure for the necessary mongoose Schema(s)</li><li>Build a node.js express server that handles an API for the MongoDB database using Schemas and controllers informed by the previous step</li></ol></li><li>Develop front end client<ol><li>Utilizing Next JS, bootstrap a client and add necessary pages, fields and layout components</li><li>Style front-end using CSS modules</li></ol></li></ul>



<h2>Process Modifications</h2>



This was a great outline to get the ball rolling, but as I&#8217;ve spent more time thinking about the code I&#8217;ll need to write I&#8217;ve decided there&#8217;s a couple changes I&#8217;d like to make. Firstly, step 1 should be more accurately labeled &#8220;Design User Interface&#8221; since that step was focused just on UI and not on the architecture of the codebase. That&#8217;s an easy change. 



Next up is in step 2 where I&#8217;m missing a couple key steps that I think will be helpful in the development process. The second sub-step in my outline is a little too broad. I&#8217;d like to get a little more granular with the back end design process. Also, I&#8217;d like to pseudo-code each of those sub-steps in the code editor so that I&#8217;m being more deliberate with my planning both inside and outside the editor.



Lastly, in the third step, I&#8217;ve decided to not use Next JS as a React framework. Next is a powerful tool and comes with a large amount of powerful features but its primary use is to build and serve statically rendered content from the server. This project will not be hosting any static content and so it will be unnecessary to utilize its most important feature. Also, Next makes handling navigation really easy but I want to really code my routing in a more visible way that gives me easier access to the handling of public and private routes. In order to achieve this I&#8217;m replacing the Next bootstrapping with create-react-app and will handle routing with the NPM package react-router-dom instead.



Here&#8217;s an updated version of my design/development outline:



<ul><li>Design User Interface<ol><li>(complete) Sketch out the UI on paper including any necessary elements and a basic navigation flow</li><li>(complete) Use the sketches as a basis for a more detailed design on a digital design tool (i.e. Figma)</li></ol></li><li>Develop back end<ol><li>Using the designs developed in step 1, map out the data structure for the necessary mongoose Schema(s)</li><li>Code config files <ol><li>db.js &#8211; export method for connecting to database</li><li>production.json &#8211; json file holding config keys for deployment</li></ol></li><li>Pseudo code the server entry point file (server.js) <ol><li>Dependencies</li><li>Database connection</li><li>Middleware initializations</li><li>Define routes</li><li>Port &amp; server initialization</li></ol></li><li>Pseudo code the routes files <ol><li>Dependencies</li><li>Init router</li><li>Define each CRUD route in comments</li><li>Write comments as placeholder for the logic each CRUD operation will handle inside the route</li><li>Repeat this process for each route file<ul><li>auth</li><li>metrics</li><li>users</li></ul></li></ol></li><li>Code schemas using data map written in step 1<ol><li>User schema</li><li>Metrics schema</li></ol></li><li>Code server &amp; routes according to pseudo comments</li></ol></li><li>Develop front end client<ol><li>Utilizing create-react-app, bootstrap a client and add necessary pages, fields and layout components</li><li>Style front-end using CSS modules</li></ol></li></ul>



This is looking a lot more detailed now. The outline will eventually serve as a template for designing future projects once I&#8217;ve completed the development process.



<h2>Initializing Project Directory</h2>



It&#8217;s finally time to start working with some files and the code editor! I created a directory for my project and initialized the project with npm init to create a package.json file. From there I installed my list of dependencies (for the back end) in the command line. 



My preferred text editor is VSCode so I opened up the project directory and created the files I would need for my server. Here&#8217;s a look at my file structure:



<figure class="wp-block-image size-full is-resized"><img src="https://wp.jondeavers.net/wp-content/uploads/2021/10/file_structure.png" alt="" class="wp-image-110" width="350" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/10/file_structure.png 630w, https://wp.jondeavers.net/wp-content/uploads/2021/10/file_structure-228x300.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></figure>



According to my development outline, some of my files would be redundant to pseudo-code so I went ahead and coded out the config files (sorry, won&#8217;t be sharing those) and my models files. 



<figure class="wp-block-image size-large is-resized"><img src="https://wp.jondeavers.net/wp-content/uploads/2021/10/schema-1-892x1024.png" alt="" class="wp-image-112" width="350" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/10/schema-1-892x1024.png 892w, https://wp.jondeavers.net/wp-content/uploads/2021/10/schema-1-261x300.png 261w, https://wp.jondeavers.net/wp-content/uploads/2021/10/schema-1-768x882.png 768w, https://wp.jondeavers.net/wp-content/uploads/2021/10/schema-1.png 965w" sizes="(max-width: 892px) 100vw, 892px" /></figure>



One of the best features of VSCode is its absolutely massive collection of community-created extensions. These extensions help streamline the development process and add functionality to the core of VSCode&#8217;s functionality. I utilize and extension called &#8220;Better Comments&#8221; to color code comments in my code which is helpful when organizing your codeblocks. You can find it on the VSCode marketplace in the app or <a rel="noreferrer noopener" href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments" data-type="URL" data-id="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments" target="_blank">on their website</a>. 



I pseudo-coded the server.js and routes files using this extension.



<figure class="wp-block-image size-full is-resized"><img src="https://wp.jondeavers.net/wp-content/uploads/2021/10/serverJS.png" alt="" class="wp-image-113" width="350" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/10/serverJS.png 731w, https://wp.jondeavers.net/wp-content/uploads/2021/10/serverJS-300x240.png 300w" sizes="(max-width: 731px) 100vw, 731px" /></figure>



<figure class="wp-block-image size-large is-resized"><img src="https://wp.jondeavers.net/wp-content/uploads/2021/10/userRoute-1024x910.png" alt="" class="wp-image-114" width="350" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/10/userRoute-1024x910.png 1024w, https://wp.jondeavers.net/wp-content/uploads/2021/10/userRoute-300x267.png 300w, https://wp.jondeavers.net/wp-content/uploads/2021/10/userRoute-768x682.png 768w, https://wp.jondeavers.net/wp-content/uploads/2021/10/userRoute.png 1221w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



At this point I am ready to code out my routes and server.js file. From there we&#8217;ll be able to test the routes in a development environment using the Postman tool. As a side-note, I&#8217;d like to say that I had all of this necessary functionality in my head, ready to be committed to comments but that wouldn&#8217;t be truthful. I referred back to a project I developed with my team in boot camp that had a lot of this functionality already coded up. Some of it mirrors that project exactly but some I had to modify as I thought about the differences in how this project will handle data. Special thanks to <a rel="noreferrer noopener" href="https://www.traversymedia.com/" data-type="URL" data-id="https://www.traversymedia.com/" target="_blank">Brad Traversy of Traversy Media</a> for his React Front to Back course available on Udemy. That course provided a blue-print for both of these projects. If you are learning React and need a tutorial, I encourage you to visit his website and check out his offerings. 



Next up we&#8217;ll be reviewing our development outline again, taking a look at the back end code itself, and testing our routes using Postman.

Side Project Journey Part 3 – Back End Planning

In part one of this series I laid out my plans to document the development process of a side project called Bioledger and showed my (poorly) hand-drawn sketches for a user interface. In this post I plan to share my digital mockup of the UI that I built using Figma. One of the main motivations for starting this series is to build a project using a plan. So before diving into the design, here&#8217;s how that is going so far&#8230;



Planning is hard. I&#8217;m the type of person who wants instant gratification and I love being in the code editor writing, editing, and thinking about the code. While I appreciate great visual design, I&#8217;m not a designer. Similarly, pseudo-coding and white-boarding code seems like a great idea but my instincts are still to dive into the code editor and start hacking away. Thankfully, pushing myself to stop and make a plan for this project is already paying off.



<h2>Moving the UI design from paper to Figma</h2>



Figma is a design tool that you can <a rel="noreferrer noopener" href="https://figma.com" data-type="URL" data-id="https://figma.com" target="_blank">try out and use as a solo developer </a>for free. It has a robust community with tons of free assets, plugins, and tutorials to utilize directly in the app. It&#8217;s also utterly confounding to use if you have no experience with design tools of this type. I highly recommend working through some tutorials when starting out in Figma to avoid the frustration of trying to use it as a painting program. It&#8217;s a tool built by designers for designers and so you have to understand how a designer thinks before getting the most out of the tool. 



Figma allows you to not just mock up a UI but to simulate programmatic features including animations, clickable navigation, and much more. My app is pretty simple and with my limited experience with the tool I decided to focus on building a more polished digital version of the sketches I made in my sketchbook until I have more experience using Figma&#8217;s more complex features. After watching some tutorials and reading some articles on the fundamentals of web design, I was able to create a basic UI that I felt comfortable would look good and function well as a finished product for this project.



<figure class="wp-block-image size-medium is-resized"><img loading="lazy" src="https://wp.jondeavers.net/wp-content/uploads/2021/09/figma1-254x300.png" alt="" class="wp-image-101" width="380" height="460"/></figure>



The picture above displays the 5 main views my minimum viable product should include:



<ul><li>A landing/user login view</li><li>User registration view</li><li>A form for entering daily metrics</li><li>A screen that displays once that day&#8217;s metrics have been logged</li><li>A data visualization view with some mock charts</li></ul>



<h2>A Closer Look</h2>



<figure class="wp-block-image size-full"><img loading="lazy" width="339" height="607" src="https://wp.jondeavers.net/wp-content/uploads/2021/09/figma2.png" alt="" class="wp-image-102" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/09/figma2.png 339w, https://wp.jondeavers.net/wp-content/uploads/2021/09/figma2-168x300.png 168w" sizes="(max-width: 339px) 100vw, 339px" /></figure>



Notice at the very top of the image, the screen view is labled with the name of the component to eventually be rendered using React, a short description of the view, and a URL endpoint. Labeling the views allows me to easily refer to each one during the development process and know exactly where it fits in the UI flow. I used a <a rel="noreferrer noopener" href="https://www.figma.com/community/plugin/980021361387673169/Forms" data-type="URL" data-id="https://www.figma.com/community/plugin/980021361387673169/Forms" target="_blank">community plugin that easily lets you incorporate forms in your design</a>. Congratulations to user <a rel="noreferrer noopener" href="https://www.figma.com/@OneBlinq" data-type="URL" data-id="https://www.figma.com/@OneBlinq" target="_blank">@OneBlinq</a> for the intuitive and easy to use plugin. It worked great and only took a few minutes to design all of my project&#8217;s forms. I also labeled dynamic data in the view using arrow brackets. I don&#8217;t know if this is a common practice or not but it made it easy for me to identify what needs to be dynamic when coding the project.



<h2>Summary</h2>



All in all, Figma comes with a steep learning curve, especially if you don&#8217;t have a background in design. However, I&#8217;m really happy with the design and feel confident that the effort it took to put this design together will help make my development process move more smoothly with better final results.



Next up is laying out a plan for my back end and database. Instead of adding data properties to a schema as I run across the need during the coding process, I want to have a reference and think through how the data will be stored, retrieved, modified and deleted. If you have feedback or suggestions on this process feel free to <a href="https://twitter.com/jondeavers" data-type="URL" data-id="https://twitter.com/jondeavers" target="_blank" rel="noreferrer noopener">connect with me on Twitter</a>. I&#8217;d be gratful for the feedback and happy to help!

Side Project Journey Part 2 – Wireframe & API Design

As a web developer, I am constantly looking to improve my skills. I&#8217;ve completed a full stack boot camp, followed dozens of tutorials, and built my own projects from scratch. As my skills have developed certain things have come into focus. Firstly, I know where my strengths lie; organizing code in a readable and maintainable codebase is a borderline obsession for me. I like small, modular components that keep individual files to a manageable size. React is a framework I have genuinely come to love. It has provided me with a much greater competency in &#8220;vanilla&#8221; JavaScript and a practical, consistent path to rendering my vision in the browser. Node.js was a struggle to get comfortable with at first, but building simple API&#8217;s has given me a much deeper understanding of how the web works as a synergistic system of front-end views and back-end models and controllers.



I am also more aware of my weaknesses. At the top of that list is as a designer. Like many developers, I like to explore new ideas and tools but sometimes that case of &#8220;shiny object syndrome&#8221; will keep me from completing or even making progress on a project. Often I will start a project in the code editor. This isn&#8217;t always a bad idea, but it does lead to more frustration than would be necessary had I started with a design and &#8220;roadmap&#8221; through the development process. My dev directory is full of abandoned, half-baked projects. 



After taking some time to analyze these strengths and weaknesses, I decided to try and shore up the weaker parts of my skill set and start a new project where I follow a specific development process. I also wanted to document this process in hopes that it will keep me accountable to finishing the project and hopefully be of value to others.



 Here&#8217;s my plan:



Project Name



Bioledger &#8211; A biometric tracking application



Tech Stack / Tools



<ul><li>Figma &#8211; For designing the UI based on hand sketches</li><li>Node JS &#8211; JavaScript runtime for web server</li><li>Express &#8211; Node framework for building a web server</li><li>MongoDB &#8211; Relational database for data storage</li><li>Mongoose &#8211; MongoDB framework for building REST API</li><li>React &#8211; UI framework for front-end client</li><li>Next JS &#8211; React toolkit for handling routing, image optimization, and server-side rendering of static data</li></ul>



User Story



As a user working to become healthier, I want an application where I can log in daily and easily track my weight and blood pressure readings. I also want to see my progress displayed in easy-to-read charts. 



Development Process



<ol><li>Design product<ol><li>Sketch out the UI on paper including any necessary elements and a basic navigation flow</li><li>Use the sketches as a basis for a more detailed design on a digital design tool (i.e. Figma)</li></ol></li><li>Develop back end<ol><li>Using the designs developed in step 1, map out the data structure for the necessary mongoose Schema(s)</li><li>Build a node.js express server that handles an API for the MongoDB database using Schemas and controllers informed by the previous step</li></ol></li><li>Develop front-end client<ol><li>Utilizing Next JS, bootstrap a client and add necessary pages, fields and layout components</li><li>Style front-end using CSS modules</li></ol></li></ol>



<h2>Initial Sketches</h2>



There&#8217;s a reason I like to be creative using digital tools. I am certainly not a visual artist. However, I&#8217;ve been following a <a rel="noreferrer noopener" href="https://www.udemy.com/course/complete-web-designer-mobile-designer-zero-to-mastery/" data-type="URL" data-id="https://www.udemy.com/course/complete-web-designer-mobile-designer-zero-to-mastery/" target="_blank">design course on Udemy</a> that recommends beginning the design process with sketches and so I&#8217;m following their advice. Below are my (very) rough drafts of the UI for this project. 



<figure class="wp-block-image size-medium"><img loading="lazy" width="185" height="300" src="https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160512517-1-185x300.jpg" alt="" class="wp-image-91" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160512517-1-185x300.jpg 185w, https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160512517-1-633x1024.jpg 633w, https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160512517-1-768x1243.jpg 768w, https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160512517-1-949x1536.jpg 949w, https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160512517-1-1266x2048.jpg 1266w, https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160512517-1-scaled.jpg 1582w" sizes="(max-width: 185px) 100vw, 185px" /></figure>



<figure class="wp-block-image size-medium"><img loading="lazy" width="300" height="185" src="https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160526716-1-300x185.jpg" alt="" class="wp-image-93" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160526716-1-300x185.jpg 300w, https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160526716-1-1024x630.jpg 1024w, https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160526716-1-768x472.jpg 768w, https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160526716-1-1536x945.jpg 1536w, https://wp.jondeavers.net/wp-content/uploads/2021/09/PXL_20210928_160526716-1-2048x1260.jpg 2048w" sizes="(max-width: 300px) 100vw, 300px" /></figure>



This process is subject to change. I&#8217;ll do my best to explain my thoughts as I work through the steps and if you have any suggestions, feedback, or questions please <a rel="noreferrer noopener" href="https://twitter.com/jondeavers" target="_blank">connect with me on Twitter</a> and I&#8217;d be grateful for the advice and be happy to help.

Side Project Journey Part 1 – Initial Design

One of my main goals throughout boot camp was to add a fully-featured blog to my developer profile. I love to write and often writing helps me learn by cementing the concepts I learn conceptually in my mind as I explain them in detail. This was a more difficult task than I anticipated mainly due to the tremendous variety of options available for CMS back ends and front end frameworks. 



React is my go-to UI framework but its core functionality presents several challenges for building out a content site out of the box. Content needs to be crawlable in order for search engines to properly index the site and React is by nature a non-persistent framework. The data you have in state is temporary and isn&#8217;t always displayed especially to crawler bots like Google uses to index its searches. Additionally, a content management system is a much more robust database for storing content than anything I could build using a self-made MongoDB/express API. 



<h2>Where to begin</h2>



I am a huuuuuge fan of Scott Tolinski and Wes Bos over at the <a rel="noreferrer noopener" href="https://syntax.fm/" data-type="URL" data-id="https://syntax.fm/" target="_blank">Syntax podcast</a>. Those two have kept me motivated, introduced me to new technologies, and cleared up a ton of questions I had during boot camp. Unfortunately, I have chronic shiny object syndrome and so every week I would dive into new tools and tech that I was barely (if at all) able to comprehend, let alone implement well. They&#8217;ve discussed at least half a dozen CMS&#8217;s over the years in detail. <a rel="noreferrer noopener" href="https://sanity.io" data-type="URL" data-id="https://sanity.io" target="_blank">Sanity</a>, <a rel="noreferrer noopener" href="https://www.contentful.com/" data-type="URL" data-id="https://www.contentful.com/" target="_blank">Contentful</a>, <a rel="noreferrer noopener" href="https://ghost.org/" data-type="URL" data-id="https://ghost.org/" target="_blank">Ghost</a>, and <a rel="noreferrer noopener" href="https://www.netlifycms.org/" data-type="URL" data-id="https://www.netlifycms.org/" target="_blank">Netlify&#8217;s CMS</a> just to name a few. 



One option that I had barely considered but was always in the back of my mind was WordPress. Honestly, I didn&#8217;t really give WordPress much consideration until now. I had managed WordPress sites for years as a GUI admin. It had been around forever and I fell into the trap of dismissing it due to a stigma that new tech is always better tech. I was overlooking a very obvious reason to consider it though; it had been around forever.



WordPress is an open source CMS that is the framework for 40% of all websites. Let that sink in. Nearly half of the entire internet is built on WordPress. The reason that statistic is compelling is because WordPress works, it works well, and it is cheap and easy to set up.



<h2>How to get WordPress into React</h2>



After settling on a CMS, I had to figure out how to get that back end data into my front end React code. WordPress does not ship out of the box with a REST API and that posed a problem for me. REST API&#8217;s were the only way I knew how to interact with a server in my front end code. Fortunately, there&#8217;s a massive plugin library that comes along with WordPress and it has a solution. 



<a rel="noreferrer noopener" href="https://www.wpgraphql.com/" data-type="URL" data-id="https://www.wpgraphql.com/" target="_blank">WPGraphQl </a>is a plugin that generates a REST API from your WordPress admin panel. It is, quite simply, amazing. Especially if you are new to writing your own code and the concept of talking to a PHP server with your JavaScript front end seems daunting. If you are seeing the QL tacked onto the end of Graph and having nightmarish flashbacks to trying to learn MySQL like I did, don&#8217;t worry. The queries you use to grab data with GraphQL are almost self-explanatory. As a bonus, WPGraphQL provides you with a helpful GUI to help create exactly the query you need to write. No more late nights wrestling with syntax.



<figure class="wp-block-image size-medium"><img loading="lazy" width="300" height="159" src="https://wp.jondeavers.net/wp-content/uploads/2021/09/image-300x159.png" alt="" class="wp-image-84" srcset="https://wp.jondeavers.net/wp-content/uploads/2021/09/image-300x159.png 300w, https://wp.jondeavers.net/wp-content/uploads/2021/09/image-768x408.png 768w, https://wp.jondeavers.net/wp-content/uploads/2021/09/image.png 872w" sizes="(max-width: 300px) 100vw, 300px" /><figcaption>WPGraphQL IDE</figcaption></figure>



Access the GraphQL IDE from the WPGraphQL menu in your WP admin panel after you have the plugin installed in your WordPress site. The explorer tree on the left allows you to search through all of the options in WP&#8217;s data models and grab exactly the data you&#8217;re looking for. When you are ready to bring the query into your project, you can click the play icon at the top of the IDE and the app will run the query so you can make sure you have everything you&#8217;re looking for. 



<h2>How to display WPGraphQL results in React</h2>



The next step in this process was figuring out how to safely and effectively insert my WordPress data in my React app. There are many solutions available. I&#8217;ve tried two: Gatsby and NextJS. Gatsby is a powerful tool and is fast. Like, really fast. But it also relies on a lot of configuration files. This did make the actual JavaScript code look and feel pretty clean. But it was a super steep learning curve for a rookie developer like me. The tool is relatively new and so the tutorials available were spotty and quickly outdated. They often opened more questions than they answered.



Next JS, on the other hand, takes a different approach. Instead of setting up multiple configuration files to connect WordPress to your React app, Next relies on a specific file structure and syntax to statically generate HTML files from WP&#8217;s back end. It has its own steep learning curve but, at least for the way my brain is wired, it was a lot easier to pick up and become productive with.



Next requires you to keep all of your &#8220;pages&#8221; in a pages folder. This felt a little constrictive after writing dozens of apps using create-react-app but it came with a huge benefit. Routing is handled for you by following this file structure. Simply import a Link component from Next&#8217;s library, give it an href attribute equal to &#8220;/pagename&#8221; and wrap the link in an anchor tag, then wrap that anchor tag with the Link component.



<code>import Link from 'next/link'</code>



<code>&lt;Link href='/blog'&gt; &lt;a&gt; Click here to go to the blog page &lt;/a&gt; &lt;/Link&gt;</code>



That&#8217;s it. Clicking on that anchor in your app will automatically find a file in the pages subdirectory called &#8220;blog.js&#8221; and Next will navigate to that page. No router setup, no sweat. That alone was enough to keep me learning more about what Next JS could do. 



Though the routing was impressive, what I really needed from Next was static page generation. This solves the aforementioned problem with React content not being inherently persistent. Next works, like most static site generators, by reaching out to the CMS, in our case WordPress, at build time and caching all of the content it pulls in. It then generates individual html files that are rendered in your application. This improves speed; your app isn&#8217;t making a call to WordPress every time someone loads the page. It also improves security; since all of the html files are generated at build time and there&#8217;s no &#8220;live&#8221; connection when a user views your content, there is less opportunity for bad actors to hack into WP&#8217;s PHP servers and damage your site. 



Instead of setting up config files that tell React how to interface with WordPress, Next relies on functions that you write but whose names are predefined and will automatically make the API call available through props in the React component.



<code>export&nbsp;async&nbsp;function&nbsp;getStaticProps()&nbsp;{&nbsp;&nbsp;</code> <code>const&nbsp;res&nbsp;=&nbsp;await&nbsp;fetch('https://wp.yourwordpresssite.net/graphql',&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>method:&nbsp;'POST',&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>headers:&nbsp;{&nbsp;'Content-Type':&nbsp;'application/json'&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>body:&nbsp;JSON.stringify({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>query:&nbsp;`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>query&nbsp;MyQuery&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>posts(first:&nbsp;1)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> edges&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> node&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> id&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> title&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> slug&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> content&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> author&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> node&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> id&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> `,&nbsp;&nbsp;&nbsp;&nbsp;</code> <code> }),&nbsp;&nbsp;</code> <code>});</code> <code> const&nbsp;json&nbsp;=&nbsp;await&nbsp;res.json(); </code> <code>return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;props:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>posts:&nbsp;json.data.posts,&nbsp;&nbsp;&nbsp;&nbsp;</code> <code>},&nbsp;&nbsp;</code> <code>};}</code>



The code block above defines an asynchronous function called &#8220;getStaticProps()&#8221; and when Next&#8217;s compiler reads that function it knows to make the props object available to the component by simply adding it as an argument in the component (this assumes you are working with functional components).



<code>export default function Blog ({posts}) { return( &lt;--- Your JSX here---&gt; ) }</code>



The object &#8220;posts&#8221; contains all of the data we retrieved using the GraphQL query. From there you can destructure the data, add it to state, render it on the screen or manipulate it to suit your needs.



I hope this post has encouraged you to explore Next and WordPress. If you have questions, feel free to reach out to me via <a rel="noreferrer noopener" href="https://twitter.com/jondeavers" data-type="URL" data-id="https://twitter.com/jondeavers" target="_blank">Twitter</a> or at my homepage: <a rel="noreferrer noopener" href="https://jondeavers.net" target="_blank">https://jondeavers.net</a>.

Using Next.js to add a WordPress blog to dev profile

I recently started a full-stack web development boot camp at a local university. After months of poking around YouTube and Google with little-to-no direction and a total lack of foundational understanding, I decided it was time for some structure. I needed someone to tell me what I needed to know in order to learn what I wanted to know.



It turns out this decision is one of the best I&#8217;ve ever made. Not only am I learning at a break-neck speed, I&#8217;ve also found a group of fellow students who are equally as passionate and excited about the journey as I am. Together we&#8217;ve taken concepts that seemed foreign and confusing at first and work-shopped them into tools that we can use to build professional and creative projects.



It hasn&#8217;t been an easy road, however, and the learning curve is definitely steep. Over the course of several homework assignments I&#8217;ve discovered that often the biggest obstacle standing between me and a fully functional script is my own brain.



Learning so much so fast makes me want to cram the fruits of every lesson into a JavaScript file and make sure I&#8217;m demonstrating my understanding of how everything works. The problem is that this approach often results in overly complicated functions that break easily because I&#8217;m overlooking a core principle in functional coding: keep it simple, stupid.



Before classes started I had the rare (for me) foresight to pick up a book called&nbsp;The Pragmatic Programmer&nbsp;by Andy Hunt and Dave Thompson. The book has been updated since its initial publication in 1999 but it is still a static piece of tech in a world that evolves by the hour.



Fortunately, this is not a book about syntax or any specific languages. The book speaks to the mindset required to be a great programmer. I didn&#8217;t have the opportunity to finish reading it before classes started so I&#8217;m in a holding pattern until graduation. After all, there is such a thing as mental bandwidth limits.



The best lesson I&#8217;ve learned from reading through the first handful of chapters is this: stay grounded. Staying grounded to me means being mindful of the logic, following it through each step. It means staying open-minded; allowing your ego to stand aside while you learn from your fellow students and instructors. It means creating code from the perspective of your end user and not necessarily your own; letting overly elaborate functions and methods take the backseat to accessibility, readability, and usability.



We&#8217;re only a little over a month in to the boot camp and there&#8217;s a long road ahead between now and graduation. Over the course of the next five months, I plan to ground myself when necessary by thinking back to the lessons learned from Andy and Dave&#8217;s book.

Overthinking Web Development as a Beginner

As a new developer, still deeply in the learning process, there are so many interesting tools introduced each day. I am currently enrolled in a bootcamp and loving it. Sometimes the curriculum is like trying to drink water from a fire hose. There&#8217;s a ton of information coming at us during class and it&#8217;s a lot of work to produce solid results for the homework assignments.



Once in a while you have an assignment where you really click with the material and the work only takes a few days instead of the whole week. The first time I was lucky enough for that to happen, I spent the rest of the week packing my current homework assignment with additional features and refactoring code down to the most efficient blocks I could produce. That &#8220;extra-curricular&#8221; work taught me quite a bit and the practice time spent going a little overboard was invaluable.



This week, I really felt comfortable with our assignment and came to that same fork in the crossroads; do I continue to improve this project or do I work on something new? The practice would come in handy and it would be fun to share the extra features with the like-minded students of our study group. But I am approaching web development with the goal of freelancing and building my own business.



So I started to think; what holes are in my portfolio right now? I brainstormed for a solid hour and most of the projects I dreamed up would require more knowledge than I currently had. I&#8217;d also rather improve my grasp on past material than study forward. Eventually it dawned on me. Let&#8217;s take a look at the portfolio to date and start to apply to those old assignments what I&#8217;ve learned in the weeks since those prior assignments had been completed.



The natural first project I thought of was my profile page. Created in the first week of class, this page was woefully outdated. Sure, at the time, it received a grade I was proud of. But looking back and knowing now what I didn&#8217;t know then, all sorts of ideas on how to redesign and improve the page started popping into my head.



So I spent the better part of a weekend building out version 2.0 of my developer profile page. I incorporated a ton of features from bootstrap that I had become more comfortable with. I used jQuery and JavaScript to consolidate the page from multiple html files down to a single dynamically programmed index.html. I finally learned some palette restraint and made conservative but unique styling choices with CSS. And I published the page to GitHub pages with a feeling of satisfaction that was more than just the type you feel when you finish a homework assignment. This time I knew the project had been real-world productive. I didn&#8217;t have time constraints or instructions to restrict me, and so I felt free to be as creative as I wanted. All while showcasing the skillset that continues to evolve with each week.



The conclusion for me is to make this a regular part of my learning process. Revisit old projects, look for improvements, and continue to seek out new tools, techniques, and tricks. If you&#8217;d like to see my newly redesigned profile page, feel free to visit&nbsp;<a href="https://lucsedirae.github.io/">https://lucsedirae.github.io/</a> (update: this version of the site is no longer maintained. New portfolio site is @ https://jondeavers.net )

Keeping A Portfolio Page Current While Learning

I&#8217;m currently a student in a full-stack web development boot camp. We are just about to turn in our first group project and I learned a lot during this process. I learned some handy tricks in JavaScript and CSS, but more importantly, the lessons learned from this assignment were lessons about working with people in a creative and collaborative environment. I&#8217;m making a career pivot after almost 20 years in sales and collaborating is rarely an option in that field. Even when you&#8217;re part of a team, there&#8217;s an underlying layer of competition involved.



Spoiler alert: I thoroughly enjoyed the group dynamic and felt lucky to have landed with the team I did. We learned about each other&#8217;s skillsets and strengths and weaknesses as well as our own. Here are some of the highlights:



Decisiveness I have to be honest, our first night felt a little messy. We spent the majority of our 3 hour session trying to get a consensus on a project. Not because there were passionate disagreements but because it felt difficult choosing something that was important, but also within reach of our current skillsets. We still hadn&#8217;t learned anything about server-side programming or any sort of third party storage. That ultimately became the deciding factor in making our choice between our two top candidates.



I felt a little conflicted here. I was fully on board with our ultimate choice in project. It was partly my idea. But I also felt a responsibility to really give it 100% effort so that the decision to commit to that idea really resulted in exceeding the potential of our backup idea. That sounds a little strange to say even as I type it, but essentially I wanted to feel confident that the route we were taking was going to truly produce a better application and wasn&#8217;t just a matter of taking the easy route.



At the end of that first night we all agreed readily on one major philosophy for the project; once we made that choice, we weren&#8217;t looking back. It was full steam ahead with our decision. Two weeks sounded like an eternity at the beginning of the project. But currently with only one class left before our presentation, we wish we had another week. I was glad we decided to commit to an idea in those early hours and move forward to delivering our minimum viable product.



Project management Collaboration is hard. It&#8217;s a completely separate layer of skill. Through the first couple months of work prior to our group assignment, I had developed a pretty fluid workflow and pace to my development work. Having to learn to operate in concert with several teammembers taught me the value of focus.



Perhaps in the real world I will occasionally not be bound by constraints on time and other resources. My guess is that, more often than not, the opposite will be true. With a due date looming and several other moving pieces revolving around my efforts I learned quickly that I need to focus on a task, knock it out, test it and push my commits to version control. There were several times when someone was waiting on me to complete a task or vice versa. In my previous method of &#8220;solo&#8221; development, I frequently would get inspired and leave a function unfinished to pursue the shiny object. Now, I&#8217;ve learned to drop a comment where that new feature should go and make an issue to revisit it when the workflow allows.



Delegation 4 years of my aforementioned 2 decades of sales experience was spent managing people in a large sales organization. That was a roller-coaster of an experience but it taught me some valuable inter-personal skills.



As a natural introvert, it took a lot of practice to learn to take charge of a situation. I was always afraid of stepping on toes or insulting someone. What I realized over time was that there is a big difference between holding someone accountable to their responsibilities and being an over-bearing jerk.



That is not to say we experienced any inter-personal drama. But we were in need of someone to organize our collective thoughts and democratically map out the chart of progress. I volunteered for that role and dove into the projects and issues tools on GitHub.



It&#8217;s difficult to manage my own scattered brain, but having to juggle my own thought process while being aware of what was happening in the several other branches of our repo made the value of those tracking tools apparent. In future projects, I would want to increase my granularity with those tools. I typically found myself spending 15 minutes before class started cleaning up issues that had been solved in the past two days. It still provided a record and a roadmap of our progess.



Version control This is a dangerous topic. In the first few days of our collaboration, I completely scrambled our codebase multiple times due to mishandling of pull requests and a failure to better plan out protocols for our version control. Yet, by the end of week 1, we were merging the majority of our pull requests without any conflicts and the application was progressing nicely.



Since the early days of this boot camp I have committed and pushed early and often. It&#8217;s been a life-preserver one more than one occasion. I was intimidated by having to process gobs of pull requests if everyone took the same approach. Surprisingly, it was less of a time investment to process large quantities of pull requests which could auto-merge than it was to have to resolve conflicts throughout 100 lines of new code.



Hurdle-jumping One of the most surprising and beneficial lessons was learning to pass the football. The biggest pain points in this boot camp have always revolved around roadblocks I&#8217;d encounter tackling a homework assignment on my own. Fortunately, we had developed a tight-knit study group consisting of most of the cohort and help was always a Discord or Slack ping away. But you still felt like you were on an island of sorts.



With this team, communication was frequent and constant. The hours between class sessions were almost all dotted with short collaborative conversations in our Slack message group. Most of the real progress made on the codebase was written in those gaps.



The all-hands on deck approach of our team allowed us to hand off an issue and quickly get a second or third set of eyes on the code to help troubleshoot. This rapid response was really what saved the project and made it possible to produce an application we were proud of. It gave us sufficient time to spend on deciphering endless console errors and returned data format trifles in our chosen API calls.



Trusting your teammate to innovate and create My current career is in real estate. As a Realtor, I do not work on a team. I do work for a supportive broker and have access to an array of talent via the experience of my office-mates. Ultimately, though, I am self-employed and it&#8217;s easy to develop a control complex in that environment.



I really had to fight the urge to try and override someone else&#8217;s decision throughout this project. I had my own vision for how the project would look and in my current position I would have no one presenting alternative options. I knew going into this boot camp that this was a weakness in my professional life that I needed to work on.



While I am not surprised, I am relieved to confirm that every time I had a difference of opinion about a certain feature and deferred to someone else&#8217;s judgment the finished product was that much better for it. The lesson for myself here is that if I am passionate about a certain feature, then I need to make sure I&#8217;ve considered all the pros and cons before going to the mat for it. I believe that if an idea is truly the best way to go then its best shot at adoption is to develop the idea to a point where it can convince everyone else of its own merits.



This is almost certainly an optimistic way to think about every decision and situation. There will be times where I feel I support a superior option and another option wins out. I hope in those moments I am able to remember that the winning idea has someone behind it who is just as passionate about it as I am about my own. In that case, it deserves an honest effort and will potentially benefit from complimentary ideas from my own option.



The importance of comments Comments had long been a mystery to me. I was of the mind that my code should be so clean, well thought out, and organized that it would speak for itself. That&#8217;s a tall order in a time crunch with three other coders all bouncing ideas off each other. Also, there were times I ran across something someone had added and asked myself, &#8220;What the heck is this?&#8221;. Turns out there&#8217;s a saying about people who live in glass houses.



I soon realized how beneficial it was to have a brief summary of a function commented out right above that function&#8217;s code block. A little date stamp with some initials would save a lot of alt-tabbing between my IDE and my GitHub repo while researching commit history. I even discovered how valuable comments can be as storage containers. It was very helpful to provide a link to an API&#8217;s documentation right above an ajax call for easy reference.



In Summary And so here we are. 90% of the way to our minimum viable product. And with time left to be able to put some vanity touches on our app with CSS, add in last minute functionality that enhances the experience, or even dry out that script.js file that was always on the brink of becoming unwieldy.



I&#8217;ve learned a lot about coding and about myself. Not least of all, I&#8217;ve learned a lot about the people I worked with and for that I am grateful.



Thanks for taking the time to read. I would love to hear what you think and how your early group-efforts went. Comment below or find my contact info on my profile page.

Important Things I Learned Working In A Group

Merriam-Webster defines the term &#8220;whip-lash&#8221; as &#8220;injury resulting from a sudden sharp whipping movement of the neck and head.&#8221; That&#8217;s how I feel on a regular basis while working my way through a full-stack web development bootcamp. As the knowledge comes in, I race to implement everything I&#8217;m learning into a homework assignment or pratice project. Inevitably, during every work session, I hit a wall bringing my workflow to a screaching halt while I power through a couple tutorials on YouTube or comb through documentation.



This rhythm of the learning process is likely (and hopefully) never going to stop. The intervals between full-stops may grow larger but one of the aspects of web and software development that drew me in was the ability to never run out of things to learn. The allure of having a constant stream of new tools and techniques to explore makes me excited for the future. This process can feel like a roller-coaster, full of ups and downs. The downs can be challenging but the ups make it all worth it. The best kind of &#8220;up&#8221; is coming across a watershed event, something that completely redefines your level of competency. One such moment, for me, was discovering the power of Chrome dev tools.



<h2>Under the browser&#8217;s hood</h2>



Until I started the journey of web development, I never put much thought into my browser. I liked the look and feel of Chrome over Microsoft&#8217;s browser offerings and so I made it my default a decade or more ago. That is pretty much all the thought I had put into my browser until now. When we first learned that right clicking and selecting &#8220;inspect&#8221; on a page in Chrome gave access to a whole new world of data and information, I was intrigued, but didn&#8217;t quite understand the scope of what this tool allowed me to do. What was apparent to me, though, was that I was looking at the inner workings of an incredibly complex tool that I had always taken for granted. As time has passed and my skills have improved, the dev tools are making their real power known to me and they allow me insight and access into the development process that improves the speed at which I work&nbsp;AND&nbsp;the speed at which I learn. In this series I will share what I&#8217;ve learned so far about Chrome&#8217;s dev tools. So right click on your page, select &#8220;inspect&#8221; and follow along. FYI &#8211; I am aware that other browsers also offer developer tools and that some have features that Chrome doesn&#8217;t offer. My experience is limited to Chrome&#8217;s suite of tools and so I will focus on that browser for this series.



<h2>Elements tab</h2>



<figure class="wp-block-image is-resized"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PgG_4u-8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/39la9t7ciqyoilhcov6e.jpg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PgG_4u-8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/39la9t7ciqyoilhcov6e.jpg" alt="devtools1" width="300"/></a></figure>



The elements tab is the default view upon opening up Chrome dev tools. It displays the most basic of web-page information, the HTML markup of the currently displayed page. Being able to see how the HTML is formatted while looking at the rendered page made grasping the underlying structure of my pages much easier to understand and plan out. This was especially helpful as I learned how to start using grid frameworks like Bootstrap that significantly increase the amount of elements on my page. Here are some useful notes on how to use the elements tab:



<h3>Hovering</h3>



<figure class="wp-block-image is-resized"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rH2KqS7l--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/sw4842zlah1zzmkjeaml.jpg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rH2KqS7l--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/sw4842zlah1zzmkjeaml.jpg" alt="devtools4" width="300"/></a></figure>



Hovering over an element in the Elements tab will highlight it on the rendered page. This makes tracking down exactly where your elements wind up on the page much easier. In the image above, you can see an icon at the top left corner of the dev tools window that looks like a square with an arrow pointer in it. Clicking on this will let you hover over elements on the rendered page to see information. Clicking on an element in this view will automatically navigate to the Elements window to the corresponding HTML line.



<h3>Style Visualization</h3>



<figure class="wp-block-image is-resized"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--92frASGX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6qshj6v77kwxhmiakxdz.jpg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--92frASGX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6qshj6v77kwxhmiakxdz.jpg" alt="devtools2" width="300"/></a></figure>



On the right hand side of the Elements tab you will find a second window with even more tabbed options available (see image above). The &#8220;Styles&#8221; tab will show you any associated CSS that is being applied to the selected element. This is invaluable when trying to figure out if a framework or CSS library is applying a style to your element or if you&#8217;re trouble-shooting styling on a specific element. Right beside the &#8220;Styles&#8221; tab you will find the &#8220;Computed&#8221; tab. This tab displays a box that visually represents the selected element and notes the amount of margin, border, and padding that is being applied via CSS or natively to that element (see image below). <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4c2M2n_d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/uy1zq5wt77nnauon1iuq.jpg"></a> What&#8217;s really impressive here is that you can test out changes in your CSS styling right there in Chrome&#8217;s dev tool. Just click inside the &#8220;Styles&#8221; tab and add, remove, or modify CSS properties and see their effects applied in real time to the page you have loaded. These changes don&#8217;t get saved to your files permanently, so it&#8217;s a great way to test out changes or trouble-shoot styling that isn&#8217;t quite lining up as expected without breaking your stylesheet. Just remember that you will need to copy these changes to your code editor and save them in your stylesheet in order for them to be permanent. Once you navigate away from the page you loaded, the changes are lost.



<h3>Event Listeners</h3>



<figure class="wp-block-image is-resized"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7nyxHDs9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/tdh9k0x07xw1nhisuenb.jpg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7nyxHDs9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/tdh9k0x07xw1nhisuenb.jpg" alt="devtools5" width="300"/></a></figure>



The next tab on our Elements sub-window is the Event Listeners tab. This tab will show any event listeners that are active on the page or a selected element. Event listeners are pieces of code that are &#8220;listening&#8221; for something to happen in order to trigger something else. A basic example would be button. Buttons have a piece of code attached called a &#8220;click listener&#8221; that is waiting for the user to click the button and then that listener instructs the broswer to do something else specific after the click is &#8220;heard&#8221;. Sometimes there are different types of listeners on a single element or there are many &#8220;listening&#8221; elements across the page. Navigating to this tab makes tracking down those listeners and seeing what purpose they serve much easier than scanning through your codebase.



<h3>Accessibility</h3>



<figure class="wp-block-image is-resized"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jzrDjYDi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ej1a2s0u07m5afd2m5qs.jpg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jzrDjYDi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ej1a2s0u07m5afd2m5qs.jpg" alt="devtools6" width="300"/></a></figure>



Our very first bootcamp homework assignment was to refactor an HTML page to make it more accessible, paying close attention to &#8220;semantic HTML&#8221; to improve the ability for tools like screen readers to make sense of the elements on the page. The &#8220;Accessibility&#8221; tab in the dev tools is a massive time saver for this task. Elements that are not semantically labeled will return a &#8220;generic&#8221; descriptor in this section. This provides a road map on how you can take a second look at the elements your page is comprised of and allow you to change their element tags to more accurately reflect their purpose and allow a larger number of people to easily access your content.



<h3>&#8220;HTMLify&#8221; Dynamically Generated Markup</h3>



<figure class="wp-block-image is-resized"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yqw9-ad0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/hajx82skwpz4qdwtwqn6.jpg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yqw9-ad0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/hajx82skwpz4qdwtwqn6.jpg" alt="devtools7" width="300"/></a></figure>



My last tip for the &#8220;Elements&#8221; tab is probably my favorite. I much prefer to generate my page content dynamically using jQuery and JavaScript over hard-coding HTML. This allows me to have minimal content in my index.html and never navigate away from the main page while still being able to deliver well organized content dynamically. While in the dev tools, the &#8220;Elements&#8221; tab will display the active HTML that is being rendered on the page even if it was created dynamically outside the HTML file. In the example above, everything that is shown inside of the &#8220;main&#8221; element tag was written using jQuery and JavaScript. As the user navigates the menus of my developer profile page, the content of &#8220;main&#8221; is replaced with different markup. This makes it easy for me to see what my HTML file would look like if it were hard-coded HTML and not dynamic JavaScript.



<h2>Summary</h2>



Thanks for taking the time to read my post. In the next installment I will take a closer look at the &#8220;Console&#8221; tab of Chrome&#8217;s dev tools and really start to dig into the browser&#8217;s hidden power. If you would like to see what I&#8217;ve been up to or get in touch, check out my&nbsp;<a href="https://lucsedirae.github.io/">developer profile page</a>&nbsp;on GitHub.

Intro to Chrome Dev Tools – Part 1

Currently I am half-way through a 6-month full-stack web development boot camp. Since day one we&#8217;ve been using Bootstrap as an HTML framework. I am not ashamed to admit, I&#8217;ve been in love with it ever since. It makes my &#8220;this had to have been made circa 2002&#8221; web designs look modern and relevant in today&#8217;s environment both on desktop and mobile with little fuss. Recently, though, I&#8217;ve been experimenting with new frameworks so that I don&#8217;t cement one method of design in my head with Bootstrap&#8217;s syntax. I wanted to share my thoughts on each. Firstly, here is a list of the pros and cons of continuing to use Bootstrap for every project:



<h2>Bootstrap 4</h2>







<h3>Pros</h3>



<ul><li>Incredible documentation&nbsp;&#8211; Bootstrap&#8217;s Documentation page is world class in terms of organization and ease of use. For a new dev, it set a high standard that has rarely been met in my experience.</li><li>Full featured&nbsp;&#8211; There&#8217;s a reason that one of the chief cons of BS4 (spoiler alert) is its size. This framework has just about everything covered for complex and richly featured web designs.</li><li>Intuitive grid system&nbsp;&#8211; I cannot over-emphasize how helpful Bootstrap was in helping me understand the concept of CSS grids. Rows divisible by 12 columns each is about as visually elegant as it gets.</li></ul>



<h3>Cons</h3>



<ul><li>It&#8217;s huge&nbsp;&#8211; One of the biggest complaints that I&#8217;ve read about when exploring alternatives to BS is the size of the codebase. I haven&#8217;t personally run into issues here, but my applications are still relatively rudimentary. I can see this becoming an issue at scale and for accessibility reasons given the amount of data needed to render on a browser with a slow connection or dated hardware.</li><li>It does a little too much&nbsp;&#8211; Sometimes I want more control over the finer details of my design. Bootstrap handles so many elements of design and offers a ton of built-in components but these can cause styling conflicts when building out my own stylesheet. For some projects it would be nice to rely more on my own styling and lean on a framework for the basics, like an intuitive grid system.</li></ul>



Let&#8217;s meet the alternatives:



<h2>Materialize</h2>



<a href="https://materializecss.com/">https://materializecss.com/</a> Familar, maybe a little too familar&nbsp;&#8211; For the sake of clarification: I haven&#8217;t permanently shelved any of these options. I&#8217;ve only dabbled in each and so will come back as my skills develop and explore the finer details of each of these tools. With that said, Materialize felt a little too similar to Bootstrap to require learning the differences in syntax. It was missing some of the built-in components I had come to rely on as well. Everything I read about Materialize pointed to it being a full featured framework but with less bulk than Bootstrap. As mentioned above, I haven&#8217;t seen cases of performance strain in any of my projects yet so that benefit wasn&#8217;t readily apparent. Since I am currently only using maybe 20-30% of the power BS offers, it felt like a lot of duplication using Materialize and therefor not worth the time investment to keep digging. The incredibly clean look of Materialize was one of its standout features. Squared corners and clean lines gave the HTML a very sleak, modern feel out of the box. That and the potential performance gains definitely make this framework one to revisit in a future project.



<h2>Foundation</h2>



<a href="https://get.foundation/">https://get.foundation/</a> A roller coaster of emotions&nbsp;&#8211; Foundation is the tool I wanted to love the most but ultimately generated the most heartburn. This framework strips away a lot of the complexity of Bootstrap&#8217;s syntax while remaining modular enough to offer a robust catalog of snippets and components, many made by outside contributors. I just felt a little out of my depth on it. There were the expected growing pains of working with a new framework or library where one spends hours pouring over documentation and YouTube tutorials to get a handle on the basics. The point where it became too much of an obstacle for my project was when trying to assign a font-family attribute. I was test-driving Foundation on the third verison of my developer profile between bootcamp homework projects. I wanted to import a Google Font into my landing page for the header and I could not find a way to assign it a attribute in the stylesheet. Some Googling of the issue found a solve for it, but it required making configuration changes in the package&#8217;s CSS files. For that project I am relying on CDN&#8217;s for outside libraries and frameworks and so Foundation is making its way back on the shelf to wait for another day. The ability to quickly build in mobile responsiveness and easily maintain design consistency was very attractive. I also really like how the grid system is handled in Foundation. I feel it would have been tough to learn grid with but, with a &#8220;foundational&#8221; (sorry, couldn&#8217;t help it) understanding of grid, the control Foundation provides over both the x and y axes was a welcome change. Once I have more experience in server side deployment and am no longer relying solely on CDN&#8217;s, I will be revisiting Foundation.



<h2>Simple Grid</h2>



<a href="https://simplegrid.io/">https://simplegrid.io/</a> Joyfully bare bones&nbsp;&#8211; Simple Grid is the least robust, most feature limited, and my personal favorite of all the frameworks I&#8217;ve tried, excluding my beloved Boostrap of course. This framework focuses solely on making pages responsive via CSS Grid. SG&#8217;s grid system is a very similar syntax to Bootstrap but less cumbersome. Instead of a class&nbsp;<code>&lt;col-md-6&gt;</code>, a simple&nbsp;<code>&lt;col-6&gt;</code>&nbsp;is needed and SG handles the rest. There are no pre-built components and very little other than the grid itself is provided. So why is it my favorite? Because it provides a wide-open canvas to design and build my own CSS library and have full control over customization of the project&#8217;s HTML. Because of this skeletal approach, Simple Grid won&#8217;t make sense on every project. Sometimes time-constraints will require a more full-featured framework. Consistency of design is also a great reason to work with a more robust framework. But for side projects and certain other tasks, the race-car performance and granularity of styling that SG allows makes it a permanent addition to my toolbox.



<h2>The bottom line</h2>



Ultimately, Bootstrap is still my go-to choice. I see potential in all of the frameworks and the experience of thinking about the grid and design differently were well worth the experimentation. But BS4 just does everything well. I look forward to the day when performance is a big enough concern to look for a more performant solution. I have some great ideas for functional applications that would be a perfect fit for the bare bones efficiency of Simple Grid once our class dives into React. But for now, I&#8217;ll be continuing to lift my skills up by their, you guessed it, Bootstraps.



<h3>What are you using?</h3>



What frameworks are you currently using? I&#8217;d love to see some suggestions for other frameworks to explore.

Experimenting with Bootstrap Alternatives

API stands for &#8220;application programming interface&#8221;. APIs allow one application to &#8220;talk-to&#8221; another, allowing for the transfer of stored data or instructions. API&#8217;s are everywhere in your daily life; from the embedded YouTube videos on social media applications to the smart speaker on your kitchen counter. They make it possible for software developed at different times by different people to interact and thereby increase functionality and productivity.



<hr class="wp-block-separator"/>



<h2>How does an API work?</h2>



For the following example, we will be working in JavaScript (jQuery enabled) with&nbsp;<a href="https://www.artists.bandsintown.com/support/api-installation">The One API</a>&nbsp;(a fun Lord of the Rings Themed API). Consult the API documentation for specific instructions on usage. Many APIs require an authenticating id token to access. The instructions for acquiring that token are also found within the API&#8217;s documentation.



Consider the following code:



The URL string below is the path of your API and can be found in API documentation 



<pre class="wp-block-code"><code>const lotrQuote = "https://the-one-api.dev/v2/quote/";
$.ajax({
 url: lotrQuote,
 method: "GET"
 }).then(function(response){
 console.log(response);
 })
</code></pre>



In this example, the variable&nbsp;<code>lotrQuote</code>&nbsp;is defined as a string that contains an API route. When called by the jQuery&nbsp;<code>.ajax</code>&nbsp;method in line 2, the API is queried and returns either JSON or XML data. That data is passed into our&nbsp;<code>.then</code>&nbsp;callback function and rendered to the console in its raw form.



<hr class="wp-block-separator"/>



<h2>Examples of APIs</h2>



There are tons of APIs available to the public that are free to use so check out a site like&nbsp;<a href="https://public-apis.xyz/">public-apis.xyz</a>&nbsp;to explore and get creative with a wide variety of options. Here are a few examples of common public APIs that you may already be familiar with in your day-to-day life:



&#8211;<a href="https://developers.google.com/apis-explorer">Google&#8217;s public API suite</a>&nbsp;&#8211; Google has an overwhelming collection of public APIs that developers can try for free. They do have pretty strict security on their id keys and free usage is capped by a daily limit so test sparingly. This suite facilitates all the embedded &#8220;Google Maps&#8221; you see on other developers&#8217; apps and websites. And that&#8217;s just the tip of the iceberg, so dive in.



&#8211;<a href="https://mailchimp.com/developer/api/marketing/">Mailchimp&#8217;s Marketing API</a>&nbsp;&#8211; Mailchimp is an email marketing platform that powers the email marketing needs of many of the websites you read every day. Those sites and apps are able to make use of Mailchimp&#8217;s platform by utilizing the power of their marketing API.



&#8211;<a href="https://openweathermap.org/api">OpenWeather API</a>&nbsp;&#8211; OpenWeather is a free and open weather data API that can be used to power anything from small widgets to whole applications. According to the reporting site&nbsp;<a href="https://trends.builtwith.com/websitelist/OpenWeatherMap">Built With</a>, many news organizations use OpenWeather on their sites.



<hr class="wp-block-separator"/>



<h2>Experiment</h2>



Simply messing around with free API&#8217;s can teach you a lot about your language&#8217;s syntax and programming concepts in general. Create something fun and useful today!