I’m Not in it to Become a Developer

There’s a misconception floating around that a writer going to a development bootcamp will inevitably want to gain the title of “Software Engineer”. That is not the case with me. Recently, I was speaking with someone who told me (like many others have) that I would make more money as an engineer. All I had to do was keep learning and practicing. In this, I had to question whether they think that writing is beneath development. Or whether development is more worthwhile of a pursuit than writing.

Here’s the thing. I have always wanted to be a writer – even before I knew I wanted to be one. Language fascinates me and I think about it every single day – letters, symbols, sayings, miscommunications, non-verbal movements. I vividly remember writing songs in both French and English alone in my room when I was 8 years old. When I was 10, I kept a detailed botanical journal. Fast-forward to 16, I started skipping school and going to the public library. There, I checked out bulky volumes of all of the Classical authors I could get my hands on, especially female authors. I read every Jane Austen novel, even the one she half-finished, Sanditon. The Bronte sisters, Don Quixote, H.G. Wells, anything that strangers online told me was a Classic.

As soon as I could leave my house at 18, I enrolled myself in community college with the help of a government loan, a grant, and a scholarship. I spent my community college years buying and selling books online to make ends meet (along with working 2-3 jobs at a time). I took classes in linguistics, literature, anthropology, art, and studied four hours a day. Then I transferred to a four-year university, where I changed my major from Anthropology to English.

During this time, I became very interested in Victorian Era literature and even wrote a thesis on mental illness in the Victorian Era. I also studied philosophy  and came to love Foucault, especially his works on mental illness and the prison system. When I got out of college,  I wrote two books and they’re safely hidden from the world on my Google Drive.

Contrary to what people may think, writing is much more than just getting words out onto a page. I mean, it is just getting words on a page, but it requires an absolutely enveloping amount of self-discipline, love of language, and yearning to articulate. There is no end goal for a writer. I am not seeking to get out of writing. It is what I do and it is what I’ve always wanted to do. And I’m so thankful that I can do it as a job. It helps me refine my skills and learn more of my craft daily. My career as a writer means that I can never avoid what I know I will always come back to – writing, communicating, telling stories, helping people understand concepts better, connecting.

And here’s something else – the people who tell me I could make more money as a developer don’t know the work I put in to this day to hone my skills and to be a writer. I read books on writing. I write in a journal. I periodically do courses of The Artist’s Way. I work on my self-discipline (running is a great way to do this). It’s my way of life. It wouldn’t matter if I could double my salary as a developer. I don’t write because it’s lucrative (but it definitely can be). I write because it’s how I untangle my brain, how I sit in the calm with myself, how I record and find myself walking through life.

I’m not in it to become a developer. I’m in it to develop as a writer.


How I Built My Developer Portfolio

In this article, I’ll go over how I built my developer portfolio. You can use this information to gather ideas on how to construct your own. I work as a technical writer, and I think it’s very important for me to demonstrate both my writing and coding skills. So I actually opted to have two different sites, this one to show my writing skills and have fun blogging, and my developer portfolio at falondarville.io. I didn’t want to crowd one website with too many “hats”, and I also wanted my developer website to be very simple.

What Content I Included

Let’s go over the content of my developer portfolio. I split my developer portfolio into the following sections:

  1. Jumbotron, containing a customized “logo” of my full name. If you have multiple websites like I do, make sure that there is some tie-in so that potential employers easily recognize your cohesive brand online. Luckily, I have a very uncommon name, so it’s easy for employers to locate my work. If you have a more common name, you may have to rely more heavily on design elements to set your portfolio apart. In this jumbotron area, I also included links to my writing website (what you’re reading now) and my LinkedIn.
  2. Simple summary, in which I include brief bullet points describing who I am. I separated this section out into two: “at work” and “outside work” to introduce a bit of my personality.
  3. Project description cards that highlight my work. I included the projects I am most proud of first and made sure to link to the published work (hosted on Heroku) as well as the code itself (on GitHub).
  4. Technologies That I Work With, a simple list of technologies I have learned and used.
  5. What I Do at Work, a detailed overview of my job.
  6. Select Articles From My Blog links to my blog articles. This was important for my development portfolio since I am a technical writer.
  7. Education and Academic Achievements, a list of some of my degrees, credentials, and certificates.
  8. YouTube Channel, an embedded video from my YouTube channel about my journey in coding bootcamp.

As I always say, do more than is required of you when you are learning web development. Put some work out on the internet for employers and future colleagues to see (regardless of what you specialize in). You may feel nervous about it at first, think you are just a beginner, or think you’re too far behind others who’ve had a website for years. But over time, you will have a body of work that indicates to people viewing your portfolio that you are interested in continuous learning and self-improvement.

How I Built It

I built my developer portfolio using Bootstrap. I wanted it to look clean and simple. The code is stored on GitHub. It’s imperative for developers to know git, and practicing commands in your terminal to save your code to GitHub repositories is an excellent way to get comfortable.

Okay, here’s the cool part. My portfolio hosting is free! GitHub has a feature called GitHub Pages. This feature allows you to host a simple front-end site on their platform. If you follow their instructions, any code that you push to a configured repository will appear on username.github.io. But if you noticed, my development portfolio lives on falondarville.io. That’s because GitHub allows you to host a custom domain. Just purchase your domain name; I used namecheap.

 


What Does a Technical Writer Do?

In this article, I’ll talk about what I do as a technical writer (for software products). I’m also going to let you know what I think a technical writer should be able to do. First off, let’s talk about my background and credentials. Basically, what qualifies me to be a technical writer? I have a Bachelors degree in English. I entered the job market immediately after graduation and was a private investigator for fraud and liability cases for several years. I briefly hopped over to project management (8 months) before returning to investigations. After a while, I didn’t see myself growing at the investigations companies and I wanted to write more, so I started freelance writing. But it was a lot of marketing-type writing, which I don’t particularly enjoy. I decided that I would join a coding bootcamp. I’d been interested in web development ever since I was a project manager and worked with engineers often. I completed the coding bootcamp being comfortable with technologies including  JavaScript, MySQL, and I also independently taught myself Python.

When it comes down to it, I’m a writer who likes to code. It’s more important than ever for technical writers to know how to code. That might sound like a bold statement, and make some writers unsettled. I know, you already have a specialization and that’s writing. But if you want to be a technical writer, what’s going to set you apart is learning why software operates the way it does. Writing is not just about teaching and conveying. It’s also about experiencing and experimenting. If writers stay in their writing bubble, there’s always going to be a buffer between them and engineers.

At my past two positions as a technical writer, my goal has been to move documentation to code. And to actually do that. Not to push that responsibility onto developers.

What a Technical Writer Does.

Traditionally, a technical writer interacts with people who are knowledgeable about a product. They collect information and use that to construct manuals, guides, and robust documentation. They may do this in a word processor. And sometimes a more tech-savvy individual will review the work for technical accuracy. I think a technical writer should do more. In our technology-driven society, let’s not let writers get left behind. We are important to companies. We make closeted information available; we increase understand and by extension, we encourage strong communication. The role of a technical writer has to be more than delivering word docs. It must involve practices that blend the role of writer and developer.

What a Technical Writer Should Do.

A technical writer should drive a company towards a version-control, code-driven documentation system. In my mind, a technical writer needs to future-proof documentation and make it align with the work method of engineers. We can start to imagine a technical writer as an appendage of the engineering department. Their methodology should be similar, meaning that during the technical writer’s day-to-day, they should be working in an IDE, using git religiously, and thinking about scalability and content design.  In order to do this, a technical writer needs to acquire a skill-set that is similar to that of a junior level engineer.

 


Upgrading your Mac to Catalina

I’m compiling some notes here for those upgrading their Mac to Catalina because there’s a lot of contradicting information online. This article is meant for a developer audience.

Your terminal will default to zsh instead of bash.

From what I have experienced so far, my terminal workflow is nothing different. I work out of my terminal directly for interacting with Git. You may have some issues at first. The following are some things to note about customizing zsh.

  1. You do not need to download a framework like oh-my-zsh.
  2. Instead, create a system file called .zshrc in your root directory. This file is very similar to your .bash-profile.
  3. Move your bash settings over to your new .zshrc file.
  4. I had issues with running Ruby on Catalina, so I had to add the following to my .zshrc file: export GEM_HOME=”$HOME/.gem” I also had to update Xcode.

Update. I went back to using bash because I was having a lot of issues once I started working with Slate again (it uses Ruby).

Basically, I was not able to bundle install on one of my projects. I finally got it to work after switching back to Bash and following the instructions on this StackExchange answer.

I’ll update this article if I come across more modifications I’ve had to make since upgrading to Catalina.


Generate Graphs Using mermaid.js

In this tutorial, I’ll show you how to build graphs without using any design software. We’ll be using the library mermaid.js to do this. This tool allows us to write a few simple lines of code and is customizable. It’s great for writing technical documentation and for coders who want to hammer out some quick logic schemes.

We’re going to build this very simple flowchart. If you’d like, clone the accompanying GitHub repository rather than copy and paste the following code segments.

The first thing we’ll do is create a new project. Inside of our new directory, create a JavaScript file and build a server of your choosing. I’m going with JavaScript for this one. In the following, I use Express, a Node.js framework, as well as the Node.js module called path.

const express = require('express')
const app = express()
const path = require('path')
const port = 3000

app.get('/', (req, res) => res.sendFile(path.join(__dirname + '/index.html')))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Alright, next let’s create an HTML file. In this file, I’ve given us an H1 describing the chart. Then I’ve linked to the Mermaid.js CDN. I have also included the necessary mermaid.initialize script tag.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mermaid Diagrams</title>
</head>
<body>
	<h1 style="margin-left:25px">A Basic Left to Right Flowchart</h1> 

	<script src="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js"></script>
	<script>mermaid.initialize({startOnLoad:true});</script>
</body>
</html>

Now we’re all set up, we just have to create the graph. Below the H1, add a div with the class mermaid. Mermaid.js looks for the class named mermaid when it’s generating graphs, so this step is essential.

Next, let’s define what type of graph this is going to be. We’re building a simple flowchart. Specifically, this flowchart is organized left to right, and we designate this by writing graph LR. See the Mermaid.js documentation for all of the available options. Yes, even though we are working with an HTML file, the syntax for Mermaid.js looks like Markdown.

We need to indent all of the components of our graph. Our first step has the ID A, and text Set Up Your JavaScript Server. A connects to B. We follow this pattern through step D.

After we have defined the four basic and sequential steps of our flowchart, we add a link to step D by defining our click ability. On this line, we define our destination URL, as well as the tooltip text, Flowchart instructions.

Finally, let’s add some styling to the third step to make it look more mermaid-ish. Define style, followed by the step ID that the styling should apply to, C. Then define the three optional style types: fill, stroke, and stroke-width.


<div class="mermaid" id="lefttoright">
graph LR
    A(Set Up Your JavaScript Server)-->B(Create an HTML file);
    B-->C(Link your JavaScript server and the Mermaid CDN);
    C-->D(Write your flowchart);
    click D "https://mermaidjs.github.io/#/flowchart" "Flowchart instructions"
    style C fill:#90ee90,stroke:#333,stroke-width:1px;
</div>


Start your server and look at your new flowchart! Check out the accompanying repository for this tutorial on GitHub.


Creating a Python Virtual Environment Using virtualenv

There are loads of tutorials out there for getting started with Python, but all of the ones I’ve come across miss some critical information. It’s often that the writer makes unfounded assumptions and beginners are left to piece and hobble together scraps from across the web to accomplish a simple task.

In the following, I’ll give you some basics about creating a Python virtual environment. I really do mean basics, things that I’m not going to assume you know about this process. Use this as a reference when you want to revisit how to start a new project or you blank on a terminal command.

By the way, I am working on a Mac, so your commands may look slightly different on other OS.

What you will need:

  1. A code editor. I use Sublime.
  2. Basic knowledge of your terminal.
  3. Python installed. If you have a Mac, you already have a version of Python installed.

If you want to check for Python on your computer, use the following command: python -V

My output for this command was: Python 2.7.16

What’s a virtual environment?

A virtual environment is a place for you to install packages that are specific to your project. Packages give your code special abilities. For example, I built a Slack bot called Nice Vegan Bot. You can type @niceveganbot and “fact please” in any Slack channel and you will be returned a fact about veganism from my MySQL database. For this bot, I used the package slackClient, which allowed me to feed my application with my Slack API token.

I came from a background in JavaScript where I installed packages using npm (and yarn a few times). When you’re working with Python, it’s highly suggested that you use a virtual environment for your project rather than install packages globally to your machine. A virtual environment simply keeps your dependencies isolated to your specific project. Get in the practice of using a virtual environment for all of your Python projects and you will alleviate the risk of package conflicts on your machine.

How to create a virtual environment.

Let’s make a new Python project and add a virtual environment.

In the following instructions, you will be asked to run commands that start with pip. pip is the package installer for Python. You already have pip if you have Python, so go ahead and run those commands.

Install virtualenv, a popular virtual environment package. Skip this step if you already have virtualenv installed. This command installs virtualenv globally so that you can add it to as many Python projects as you’d like.

pip install virtualenv

For reference, you can run this command to check which pip packages you have installed globally: pip list

CD into your Python project.

cd sample-application

Create a virtual environment specific to this project. The second part of the command below is anything we want to name the environment. So in this case, I called it ENV.

virtualenv ENV

Now we need to activate our new environment, ENV. Run the following command. If you named your environment anything other than ENV, replace ENV with the name of your environment.

source ENV/bin/activate

Now you’ll know that your environment is running when it appears in your project command line. You’ll see that the environment is listed in parentheses.

(ENV) Falons-MacBook-Pro:sample-application falondarville$

At this point, you can go ahead and install the packages you need for this specific project. The Python Package Index is your go-to reference for pip packages available.

Finally, to stop your environment, run deactivate

Now you know how to add a virtual environment to your Python project to keep your dependencies separate and potentially avoid package conflicts.


How I Operated During My Coding Bootcamp

A coding bootcamp is just a map. You have a general idea of the route you’re taking, but you’ve never been down that exact path. You also don’t know what the destination is. In the bootcamp, some of the work is going to be done for you – you’ll have technologies picked out, class times chosen, and feedback that’ll help you hone your skills. But at the end of the day, the coding bootcamp is not going to pull the weight for you. There’s a lot of work outside of the coding bootcamp to do, and a lot of self-motivation. I started prepping for my bootcamp before day one. You can read a bit about that part of my journey in this article. Here’s what I did to put myself ahead during the bootcamp.

Prioritize Often

The bootcamp I was part of met for ten hours of class per week. Throughout the week, it was my responsibility to allocate my time properly so I could be prepared for upcoming lessons, homework, and side goals (like diving deeper into MySQL). I kept a thorough record of what I had to accomplish in my paper planner. I’ve tried different methods of organization, and paper planners have always been what I stick to. I have purchased one each year for the past nine years and use mine religiously. I carry my planner everywhere with me.

Prioritizing has never been difficult for me, but I know that others have more difficulty with it. I have noticed that those with trouble prioritizing often are vocal about not having enough time. There are always ways to re-prioritize and simplify. I think that the reason I have not had much trouble with prioritizing is that I like to keep my life relatively uncomplicated. If an activity or relationship is draining and does not have enough value to compensate for the time and effort I put in, I will cut ties. There are other ways to prioritize, but the most important takeaway is that prioritizing is iterative. It requires consistent revision and attention.

Make it About You

No matter how great your support network is and how much external motivation you’re getting, the coding bootcamp is about your capability to return to yourself. I had to have a few reminders of this during bootcamp. At the onset of the coding bootcamp, I sat with some very negative students who often complained about how difficult the lessons were and about their lack of time outside of work to dedicate to their assignments and studying. I adopted the group mentality and complained a lot as well. Moving to another table and becoming more reserved in my interactions made me revisit why I chose to enter the bootcamp in the first place.

I also earnestly considered exiting the bootcamp about halfway through because I didn’t feel challenged enough. I didn’t trust that completing the program was going to open up opportunities for me. I didn’t see the destination; I was in the middle of an unfamiliar path that didn’t make much sense to me. How was it all going to tie together? What would I do once I got out of the program? After speaking to several people about this, I determined that I had already invested time and money into this track. I had to come back to myself and understand my initial motivations for entering the program, and disregard all of the negative reasons for not continuing.

Start Early and Code Often

The bootcamp I went to had weekly homework assignments that required us to use the topics we had learned in the previous week of instruction. I started all of the homework assignments as soon as I completed the previous homework. Doing this gave me plenty of time to think about the assignment, organize how I was going to writing the code, and provide a buffer in case things went wrong. I was methodical about my work, committing often and writing appropriate commit messages. With larger  projects, I gave myself three days of buffer for deployment because there’s inevitably something that’s going to go wrong, whether it’s with the service (in my case, Heroku), or with configurations on my end.

While I am not going to have the luxury of a three day buffer for deployment in the real world, I have learned a great deal about deployment. Anticipating issues and accounting for that in my timelines is a valuable tool in development. Organization is always going to be to my advantage. Another advantage that I offered myself was coding often. Since the beginning of the bootcamp in January, I made it a goal to commit code each day to GitHub. I do this to track my own diligence and keep myself on track. I know that dropping off would be counter-productive. I operate like this because I know that my personality loves consistency, and seeing the chart on GitHub makes me feel that even though I have not accomplished huge feats in this industry, I am still working everyday to know more and get better.

Tie Coding to the Other Things You Do

I like to see connections in the things that I dedicate my time to. So it was natural that I would incorporate coding into writing. Bringing the subject of coding into my blog has helped me solidify that these sides of me can coexist quite nicely. I enjoy being creative and didn’t want to have to give that up when going into web development. While coding is itself highly creative, I wanted to keep on writing and creating other types of media. I would say that web development has actually given me more of a creative edge, because I became inspired through coding to start interviewing people in the industry in my YouTube series, Coders Talk.

Everyone comes to web development with unique qualities and backgrounds. Those can only serve you if you leverage them in ways that accentuate your strengths. Tying coding into the other parts of my creative endeavors has helped me create more meaningful interactions and start to view creativity as a more public act. Before coding, I would not have had the confidence to create YouTube videos. Nor would I have had the confidence to ask people to talk to me one-on-one about their experiences. I’ve joined a huge community of people bent on self-improvement, who challenge themselves to learn and expand their abilities. I admire that about this industry, and it’s pushed me to do more.

Navigating a coding bootcamp is both a community and individual act. There are parts that you’ll have to go alone – namely keeping the momentum going, being consistent, and allowing yourself the time to learn. Oftentimes, community is also going to be involved. Your tools, lessons, and technologies are going to be handed to you, but you’ll have to learn to use them diligently and correctly. Operating in your best interest during bootcamp involves prioritizing, planning, and staying the course. Of course there are ways to get through bootcamp without taking full advantage of your time and strengths, but that will reflect in your abilities and body of work.


Development Notes for Caw

These are the development notes for the full-stack application Caw. This is a friendly user interface for the Watson Personality Insights AI. Basically, this AI takes in a portion of text containing more than 100 words and preferably over 1,200 words. With this, the AI provides some data about the author’s personality traits. Caw allows users to either plug in their text without logging in, or to create an account so that searches and results can be saved for future reference.

Github Repository

Note that this application was deployed on Heroku, a free hosting platform. If the page does not initially load, this is because the “dynos” are asleep. Please wait a few minutes, and you will be able to access the app.

Use the app here

Technologies and Methods Used


This project was built using React.js, JavaScript, Bootstrap 4, HTML and CSS, React Router for directing the proper components to their URLs, Express for the server, MySQL for the database, Sequelize to create the database models and ORM structure, and axios for front-end requests to the back-end.

I used two packages in this application that I have not used previously:

  • personality-sunburst-chart handles the graphical representation of the Watson Personality Insights data
  • sweet-alert is an easy way to add a beautifully styled alert. I used this to notify users that they have successfully created an account and prompt them to sign in

Note that I had installed and used email-regex, but decided to take this out after some issue with the React built. I originally thought that the issue stemmed from this package, but the issue had to do with uglify.js.

As for organizing the project, I used GitHub’s built-in Projects tab, which allows you to create a project tied to a specific repository. I created several columns including: To Do, In Progress, and Completed. I also created a daily diary of my progress, a copy of which appears below. On top of that, I kept written lists and notes in a notebook. I committed to GitHub often and used commit names that were logical, descriptive, and concise.

Challenges and Learning Summary


This project started out as a React Native application. However, given that the MVP was due within several days of me beginning, I chose to change course and build a React application instead. The reason being that I had a difficult time making progress on the original plan for the application, specifically the Twitter log in. Please refer to the proposal to see how much the application was divergent from the end result.

Building USUME prior to this application gave me a strong foundation for this project. There were many similar pieces: the passport configuration and usage, the overall structure of relation between the Express server and the React front-end, and the sign up and login logic.

The Watson Personality Insights AI was easy to work with and well documented. I knew that I wanted to visualize the data for the users, and looked into chart.js and canvas do accomplish this. However, I did not end up having to create my own visualization. I used a package that took the data from the API response and populated a sunburst chart. This package saved me a lot of time and trouble, and really emphasizes the community aspect of coding. Without the effort that those developers went through to create that package, I would have had a lot more work to do.

Day by Day Progress


6/21/2018

  1. Finish setting up React-Native-App
  2. Create Twitter login component that includes the app title (currently a placeholder) and the Twitter login button (that’s not linked to Twitter)
  3. Set up the App component with RootStack and routing to login page
  4. Created new Twitter application to receive API keys through Twitter Developers
  5. Set up auth0 with Twitter on the auth0 website
  6. Confronting an error that is totally unknown. Terminal is only saying “Failed building JavaScript bundle”. Found some syntax errors with some help, however, the code is still not running.

6/22/2018

  1. Could not get Auth0 working, so I deleted all the code that was used to configure it. I have to find another package for Twitter login that’s specific to React Native.
  2. Feeling very discouraged, and nervous that there are only a few days left before the MVP is due.
  3. Did some research and determined that create-react-native-app is not going to let me run link because Expo is handling the iOS and android files, which are the exact files that I need to reconfigure when I use the Twitter login package.
  4. I ejected create-react-native-app, which added the iOS and android folders. This way, I anticipate that I will be able to configure the proper files.
  5. Came up with the app name of Caw because it’s the sound that a Crow makes, and it’s louder than a Tweet.
  6. Spent a few hours dealing with Twitter login attempts at configuration. Basically, the packages out there require you to have an iOS folder, which I don’t have when I use Expo. Expo takes care of that for me. So I rebuilt the entire app not using create-react-native-app, but I was not able to build. The issue is not clear. I ended up reverting to the branch I last pushed to GitHub because nothing I was doing was working (which means I was able to build the files and view the app on Expo). Now I have to still figure out how I’m going to do the Twitter login.
  7. So after hours of frustration with figuring out the Twitter login on a mobile app, I decided that Twitter login is going to work better through React (not React Native). So I started a new project using create-react-app and an Express server.
  8. Created homepage and analysis components for the React application.
  9. Created React Router to direct traffic correctly.
  10. Added logo to homepage.
  11. Set up Express and cors to handle cross origin, set up the proxy as well.
  12. Set up Watson Personality Insights API that takes the content input from the analysis page and returns various criteria.

6/23/2018

  1. Starting to style the analytics page
  2. Looked into Chart.js and Canvas
  3. Found an article about using chart.js with React but I may not have to use canvas

6/24/2018

  1. Decided not to use Chart.js because there was a super easy npm package that I could use instead that would create the chart for me with all of the data mapped out. This package was made specifically to take data from the Watson Personal Insights API. It’s called personality-sunburst-chart
  2. Set up chart using the npm package to render with data from the API call

6/25/2018

  1. Sign up logic completed, including checking for emails that have already signed up. This is done through checking with the database
  2. Create database, config for JAWS_DB down the line when I go live
  3. Create model for the Users table that has to store email, password, and id
  4. Add password encryption using crypt
  5. Add sign up form to the homepage, all styled
  6. Add front end validation for length of email and password
  7. Disable button until validation is met
  8. Re-code button linking to analysis page since the redirect stopped working

6/26/3018

  1. Created dropdown log in form on the homepage
  2. Started implementing passport. I modeled this from my previous React project, USUME.
  3. Rebuilt the state and names for the signup form to account for the two forms on the homepage. They needed to be distinguishable.
  4. Created a loggedin page that will be accessible only when the user is verified.
  5. Installed the email-regex npm package and implemented this to check that the string inputted into the signup form takes the form of an email. This is the first time I have used this package and I remember that when I was building USUME, I was having trouble getting my regex expression to work with my front end validation. I ended up making a validation file for USUME that contained a regex email check function.
  6. Note that I still need to figure out how to decrease the size of the sunburst chart. At the moment, the chart is cutting off so not all of the text is readable. There is no good documentation provided by the developers of this package regarding this issue.
  7. Added text explaining the service on the homepage, and what happens when you sign up for the service, what happens when you log in, and what happens when you opt to use the service without signing up or logging in.

6/27/2018

  1. Fixed the styling on the sunburst svg so that the whole image appears correctly and is not cut off.
  2. Set up second sequelize model for the logged in saved searches.
  3. Added loggedin, logout, and * to React Router
  4. Made notes about the remainder of the functionality to be implemented. Users will be able to access their search history through a listings page, and also be able to see detail pages for each result.

6/28/2018

  1. Change the database association so that a user can have many saved searches and results. MySQL was a good choice for this project because the data is always going to be structured in the same way.
  2. Added logout functionality that ends the user session and redirects the user to the homepage.
  3. Added logout link to loggedin page
  4. Added links that direct the user to the homepage on the loggedin page and the analysis page
  5. Added check to see if user is logged in, which is handled by passport

6/30/2018

  1. Made it so that the loggedin page is not accessible if you are not logged in.
  2. When you search and are logged in, your searches are pushed to the database. The detail listing page holds the results as well, so now I just have to be able to print them to the panels with the date and search text snippet.

7/1/2018

  1. authUser route now works, which means that when you log in, the API grabs the past searches you have made
  2. Altered authUser route so that all data is passed to the front end
  3. Reordered loggedin.js to display results if they exist
  4. Printed date to results page. These date are currently stored in a datetime format, so they will need to be converted.

7/2/2018

  1. Created cards to display the data from past searches. Styled the cards
  2. Displayed snippet of search query on the cards as well as the dates
  3. Fixed the panel date time so it would show human readable date using the npm package moment

7/3/2018

  1. Prolonged logged in session by modifying the cookie session time (note that this would not matter later, as there were other issues cutting my session times short – namely when errors were arising)
  2. Broke my code by breaking out the log in modal into a separate component.
  3. Wrote a blog post about the million voices in web development.

7/4/2018

  1. Fixed the login component so that now it works again. I basically reverted it back to what I had before, but now the signup and login components are separate.
  2. I started linking the saved search cards to a detail page.

7/5/2018

  1. Created detail page as a new component.
  2. Created a new route that will get me information from the saved search cards to their detail pages

7/6/2018

  1. Conditionally altered link on homepage to say My Account instead of Log In when the user is logged in. Do so on other pages.
  2. Added descending order to search cards on the loggedin page so that the most recent search would appear first.
  3. Made sunburst chart work on the detail page, and styled the chart so that it doesn’t bleed into the text box above.

7/7/2018

  1. Added “email is already in use” error message to sign up form
  2. Installed sweet-alert npm package to create a message to the user when they have successfully signed up. This prompts a neat looking modal that thanks the user for signing up and encourages them to sign in to begin saving their searches.
  3. Cleared up some of the extra packages required in the routes
  4. Changed saved search card styling to eliminate text decoration underlining on hover
  5. Polished my presentation slides, which I started a few days ago.
  6. Set up Heroku application with JawsDB and the hidden variables.
  7. Encountered unsuccessful builds and was not able to resolve the issue today.
  8. Delete usage instances of email-regex npm package, originally thinking that the issue stemmed from this package.

7/8/2018

  1. Deployed final build to Heroku. Note that the issue with the build was with minifying the files, so I had to opt not to minify. I confirmed that the app now work on Heroku and did some final functionality testing.
  2. Finalized notes