Author: tinabear817

Posted on

A Little Front-End, A Little Back-end, and A Lot of Fun

Week 2 of the CenterCentre fellowship was a rollercoaster of information. The speed at which I am learning new systems and processes is blowing my mind.

I quickly got a handle on the marketing emails that are supposed to be the majority of my job in the first three months of this fellowship. I’m to prepare the documents, code the emails, and schedule them as necessary. This is a fairly straight forward process and requires FSOE (First Set of Eyes) and SSOE (Second Set of Eyes) at a few stages of the process. It’s a tried and true process, and it works well for this company.

In reality, emails were a fraction of my focus this week. Per the senior dev fellow’s suggestion, getting the emails prepared ahead of time frees up my schedule to work on projects and other tasks throughout the week. And, boy, he was right! I spent a couple of hours preparing planned emails for this and the coming weeks. The rest of the time was spent learning as much as I could from the departing dev team lead and trying to ingest as much information as I could.

A Little Front-End

I learned how to deploy landing pages with CloudFlare, GitHub and our CRM.

This week I learned to create a landing page using the CSS framework and designs created by CenterCentre. They have a great resource page that I can use to maintain consistency among our webpages.

To prepare my landing page, I created a funnel in their CRM with my personal domain. Then, using CloudFlare, I created a DNS record to connect my subdomain. Finally, I created my own GitHub repository for this project and attached it to the subdomain in CloudFlare.

Once that was established, I began adding files to my repository. These included the index.html file and the folder housing the styling sheets. After a bit of trial and error, I managed to create a semi-acceptable landing page with Lorem Ipsum text in place of content.

Woo hoo! My first front-end dev project complete! I learned how to deploy landing pages with CloudFlare, GitHub and our CRM.

A Little Back-End

I learned how to backup our WordPress sites on DigitalOcean.

Another project this week included backing up our WordPress sites on DigitalOcean. If you’ve followed along with my journey last year, you’ll recognize that my experience with dev ops and back-end work is limited. I’m the queen of knocking out a quick and dirty front-end project, but I’ve always struggled a bit with the back-end of my projects, including the databases.

For this project, we needed to create a new domain in DigitalOcean and backup our files from our company servers. We even had the documentation from the previous dev fellows who successfully completed this on one of the sites. Sounds simple, right?

Well, as every developer knows, some things don’t go as planned. The senior fellow and I struggled at nearly every step. But this trial and error was extremely helpful in teaching us the process of this move. By the end of today, we managed to set up the new domain and it works seamlessly. It was a real effort over two or three days, but I feel like I know this process in and out.

Next week, I plan on filming some Loom videos to document this process for the next dev fellows. It will be my first major contribution to the documentation and my first chance to create videos through Loom.

A Little Fun

As my dev team lead’s last day is today and our company is growing smaller, I proposed that a voluntary daily Zoom Coffee Meeting might be a great way for the fellows at our company to get to know each other.

One of the best parts of my day at CenterCentre has been the Zoom Coffee Meetings with my dev team lead and the senior dev fellow. We talked about anything and everything, and I learned a great deal about my team. Mostly, we talked about topics other than our jobs, but we would occasionally venture into topics about work or projects we were focusing on that day.

In our company, we have both Marketing and Dev Fellows. In total, we have six fellows that spend much of the day communicating through Slack, email, and Zoom meetings. As a person who has experience in both virtual and in-person work settings, I know the importance of building strong relationships with co-workers. In an in-person setting, these relationships develop naturally, usually through lunch dates or in the break room between meetings. Virtually, that gets a little more difficult.

Luckily, my dev team lead agreed with my proposal and advocated for us to have the opportunity for Zoom Coffee Meetings. The bosses agreed and we had our first Zoom Coffee yesterday! And our second today! Getting to know the marketing fellows has been a treat and I’m looking forward to our daily casual chats in the future. As the fellows move on to new adventures and new fellows come in, we can have a safe place to meet and share our hopes, goals, and dreams, and to talk through some of the issues we face individually and as a team.

To wrap up this week, I have a host of notes and tasks I need to add to my FreeForm app. Next week, I hope to share with you what that workspace looks like and how I’m using it to add to my Career Management Document. Until then, happy St. Patrick’s Day and have a great weekend!

Posted on

First Week of the CenterCentre UIE Fellowship

My first week at CenterCentre ended with a bang! I learned an incredible amount in five days and I’m still reeling from being given this opportunity.

CenterCentre is a unique company which is part school for UX (user experience) designer sand part UX training for companies and individuals. There are several products to keep track of, but the majority of them are built around training provided by the co-ceos, Jared Spool and Dr. Leslie Jensen-Inman. I get to work closely with both of them, as well as, a great team of long-term employees and other fellows, both marketing and dev.

Several things happened this week that are notable. First, our Dev Team lead announced he would be leaving in the next couple of weeks. During out interviews, I discovered that he immigrated from Bosnia and Herzegovina just like me! Our circumstances were vastly different, but it felt wonderful to meet someone in this field that I could talk to about cultural experiences. He is a wonderful teacher and an incredible manager, and I’m blessed that I get to work with him for any amount of time. He suggested a great article about documenting this experience written by a previous employee. I will write more on this in a future post.

Before being hired, during my interviews, I noticed that there were many, many applications, tools, and languages discussed. I prepared myself mentally for what that would look like, but I was still astonished by the sheer amount of resources I would be keeping track of and utilizing. Some of the tools are familiar, like WordPress and Gmail, while others are a labyrinth of new experiences.

As a person that tends to be incredibly organized, this fellowship is definitely testing my skills. My desk is covered in sticky notes and note pads, so I was delighted to discover that my iPhone and iPad’s new IOS updated included an app called Freeform. I began using this app to organize my notes and group them together based on my own system. I ordered a stylus to also draw connections and write quick notes directly into the app.

As time progresses, I hope to continue writing about this experience. I believe I’m going to learn a great deal from this fellowship, as well as, the people I get to work with. My Senior Fellow has been an absolute beast at teaching my everything I need to know while simultaneously teaching me to be a better developer. His advice is on point and I’m impressed by his articulation and professionalism. I’m really excited to be a part of this amazing team and I can’t wait to see what next week has in store for me.

Posted on

PHP ? “Enjoy the Game” : “Try PHP!”

I’m trying to find as much time to practice PHP as I can in between holiday festivities. I had a chance to write a short word-based game in PHP for one of my Codecademy assignments. I liked it so much, I decided to create a repository to remember it!

What Is This?

For this Codecademy challenge, I was tasked with writing a word-based game using conditional statements. This was a great way to practice nested conditionals and using ternary operators.

How To Play

The player has 25 turns to complete the game. There is a set of instructions at the start of the game that list the available commands. The player inputs those commands (exactly as presented) and tries to beat the game in 25 turns or less.

What I Enjoyed

I’m very familiar with conditional statements as I’ve used them often in programming, but it was fun to practice them nonetheless. I enjoyed the plot of this game and it was very simple to create.

Check out the repository and try out the game. You can run the program by inputting php index.php and follow along with the directions in the console. Enjoy!

Posted on

Welcome to PHP!

During my job search, I had the opportunity to interview for a backend engineering position that uses PHP. Most of my experience with backend languages is in Python and NodeJS, so I decided to sign up for the Codecademy PHP course to learn the basics of PHP. I have been learning this language for the last few days and I’m about halfway through the course.

I created a Magic 8 Ball program written in PHP which prompts the user to input a yes or no question and gives the user an answer. I’m new to PHP and this was a fun activity from Codecademy to practice conditional statements. I added a bit of my own flare to the program, but for the most part, it is a classic Magic 8 Ball program.

I enjoyed this activity and decided to save it as a reminder of my first week learning PHP. I hope to return to this repository in the future when I am more experienced with PHP to remind myself how far I’ve come. As for now, I’m enjoying learning this new language and looking forward to growing my skills in backend engineering.

Check out my GitHub repository for this program!

Black billiard eight ball isolated on white background. Vector realistic pool or snooker ball with number 8 in front and side view
Posted on

Starting a New App: CounTic

As a teacher, I often had to track student behavior for a variety of reasons. Most of the tracking was logged on paper and, occasionally, an Excel spreadsheet. I hated these antiquated methods because they usually involved carrying a clipboard or laptop from lesson to lesson or room to room. I wished there was an easier method that I could access via my phone or tablet.

I decided to build a tracking app myself. I’m using React and Bootstrap to build the frontend. So far I’ve added a Types component where the user can log the category of the event being counted. For example, Behavior, Symptom, or Positive Response. I’ve added an Add Card component that allows the user to enter the name and description of event being counted and allows it to be assigned a category. The user decides what color to assign each category and the card changes colors based on this category.

Next, I’m going to build the cards that will hold each event and the counter to keep track of the events. These cards will be color coded according to the category, or Type, assigned to them. The card will include the name, description, and counter. The card will also allow the user to click on a link to a modal that lists all of the tics and the date and time they were selected. This is important as much of the tracking teachers do is to record the number of incidents and date/time for the specific events.

On another page, I will have a table that lists all of the events and their types, along with dates they were created. I plan allowing users to create accounts and manage their tracking so that they can come back and revisit their counts as needed. All of this data will be stored in a MySQL database that I plan to build myself. I haven’t decided how I want to build the backend yet, as I’m thinking about trying something other than NodeJS and ExpressJS.

Below is a screenshot of the current status of my build. I’m loving the colors and how well the components are exchanging data so far. This app is easier in many regards than the banking app, but is challenging as I have no reference for how it should be built. I’m enjoying this task I’ve set for myself and I can’t wait to continue building on this idea. Check out my GitHub Repo for this application!

Posted on

Happy Holidays!

It has been a busy few weeks at my house with Thanksgiving and traveling to Virginia to be with family. I haven’t posted in a while and a lot has been happening in my coding journey.

Before Thanksgiving Break, I did a quick TypeScript course on Codecademy, which helped me better understand how TypeScript complies JavaScript and ensures an added level of safety to projects. I took a break to spend some time with family and play as much Pokemon Aucer as I possibly could.

As many new (and old) developers can attest to, the tech world took a big dive and some companies have begun laying off thousands of workers. This makes the job search significantly more difficult and has been heavy on my mind. I have applied for many, many, many jobs and I’m becoming burned out on the job hunt process.

In between applying for jobs, spending time with my family, and playing video games, I began learning about React Native. React Native is a software framework used to develop applications for mobile devices. It uses the same JavaScript most frontend developers are familiar with to build Native apps.

I am currently through the first module of the Codecademy’s React Native course. I was tasked with building a simple create account form for a dog social media app using <Text>, <TextInput>, <View>, and <ScrollView>. I elaborated on several aspects for this project, such as adding a header with an icon, adding a dropdown for breeds, and styling the page to my liking. It was an enjoyable experience and I am looking forward to learning more applicable skills in this course.

This course is an intermediate level course and has very little added support, like some of the other courses Codecademy offers. The modules have no solution files or videos, which challenges me to use my existing skills and experience with JavaScript and React. If you would like to see my code for this project, you can visit my repository on GitHub.

Posted on

Back to Codecademy with Redux Practice

Now that I’ve completed the MITxPRO Coding Bootcamp, I’m going back to Codecademy to bolster some gaps in my knowledge. Currently, I am learning about Redux and how to manage state and actions using this JavaScript library.

For my first assignment, I was tasked with building a Redux reducer function for a Wagon Train game. I had to add an initial state with supplies, distance, and days. Then, I had to add actions such as gather, travel, and tippedWagon. As a bonus, I added the property of cash, then added the actions of sell, buy, and theft. Check out the repository here.

I’m excited get back to learning new things after working on my capstone for several weeks. Redux is an extremely popular library so it’ll be a great skill to develop.

Posted on

It’s Finished!

After many months and many long days, my capstone for the MITxPro Coding Bootcamp is finally finished!

I used my frontend Bad Bank website and added a backend and database to it. Specifically, I created the backend using ExpressJS and NodeJS, and incorporated a MongoDB database. I deployed my frontend and backend on Heroku and my database as a serverless MongoDB instance on Mongo Atlas. This sounds so much easier than it felt at the time!

For the backend, the ExpressJS web framework worked great and I used NodeJS to build my APIs. I used POST to create accounts by sending information through the body. Rich explained that using a POST request would also make querying for users safer, so I used that to return user information as well. When updating information I used the HTTP PUT verb and for getting all accounts, I used the GET verb.

To help abstract the data from the logic, I wrote functions for the Data Access Layer, or DAL. This was by far the most difficult part. I used MongoClient to connect to my MongoDB serverless instance where my database was deployed. I had several connection issues, but finally figured out that Heroku needed the MongoDB environmental variables to facilitate the connection. This made it so that I only had to call the process.env when making the connection to the database URL. The next issue I faced was that the database return took longer than the API calls and this was interfering with my results. I had to make the DAL function async and await each and every part of the connection. This took a really long time to figure out and I ran out of time to add extra authentication and roles to the database like I wanted.

My first full stack application is now complete! Its a fully deployed and functional website which you can check out here! I had a great time making this application and I look forward to improving it in the future.

You can check out my GitHub repository for the code that created this beautiful application.

Posted on

Firebase Practice

This week, MITxPro introduced us to serverless services with Firebase. This platform was developed by Google and provides developers the ability to create mobile and web applications with services. It gives developers tools that they often would have to build themselves like fire storage, databases, authentication, and many more.

For example, in today’s challenge, I was tasked to add Google Authentication to a login form. The template code was provided for me but I had to add a popup that provided the user an option to create and account and login using their Google account. If you’ve ever set up authentication for an application, you know how difficult this task can be.

Well, Firebase made this so easy! I had to troubleshoot a few things and learned a bunch about how to work with Firebase’s interface. Once I got it set up, it worked like a charm.

I really enjoyed this activity and I look forward to using Firebase in the future. If you would like to see my code, visit my GitHub repository here!

Posted on

Numbers App

## What It Is

This is a Codecademy project in which I used React, Bootstrap, and a couple of APIs to create an app that provides the user with math facts, trivia, and practice. The purpose of the project was to utilize APIs and provide the user with ‘messages’.

## How It Works

When the app is opened, the user is provided a welcome message and three options: Math Facts, Math Trivia, and Math Practice. The user can select one of the paths, which redirects them using Routing to a new page.

For Math Facts, the user can choose to input a number or select `Random`. They will be provided a ‘fact’ about that number using the Numbers API.

For Math Trivia, the user selects `Generate` and is given a trivia question about a random, unknown number. The user can input a guess as to what the number is, select `Submit`, and then select `Result` to check their answer. If needed, they are provided a calculator which is hidden unless the user selects `Show Calculator`. Depending on the result, the user will receive a message letting them know whether they were correct or incorrect in their guess. This also uses the Numbers API.

Lastly, the Math Practice page utilizes the xMath API to generate addition, subtraction, multiplication, or division questions. The calculator component is provided on this page as well. The user can input a number, click `Submit`, then check if their answer is correct using the `Result` button. They will be given a message stating if they got the answer correct or incorrect. Unfortunately, this API was not functioning the last time I checked, so I may need to remove this page if it isn’t fixed.

## What I Found Difficult

The most difficult part of this build was refactoring the code. I didn’t want the API calls to be made directly from the components, so I had to create a util folder and create individual files for each API. Once this was done, the code worked great.

## What I Would Improve

I would really love to add more pages and activities to this app. I could include a page that has math videos directly pulled from the YouTube API. I could add links to other Math learning resources or embed games into the app itself.

Check out my GitHub Repository for this App. You can pull it and see if you can improve my code or add some fun pages. Let me know what you think in the comments.