<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Michael Warren</title>
    <description>The latest articles on DEV Community by Michael Warren (@mwarrn).</description>
    <link>https://dev.to/mwarrn</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F845367%2F445e6b27-3280-41ba-834d-9afc2a2effcb.png</url>
      <title>DEV Community: Michael Warren</title>
      <link>https://dev.to/mwarrn</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mwarrn"/>
    <language>en</language>
    <item>
      <title>Project: Simple Todo App with React and Ruby (Sinatra)</title>
      <dc:creator>Michael Warren</dc:creator>
      <pubDate>Mon, 15 Aug 2022 03:33:00 +0000</pubDate>
      <link>https://dev.to/mwarrn/project-simple-todo-app-with-react-and-ruby-sinatra-4143</link>
      <guid>https://dev.to/mwarrn/project-simple-todo-app-with-react-and-ruby-sinatra-4143</guid>
      <description>&lt;p&gt;&lt;em&gt;This post will be updated as I make corrections to this project.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/mwarrn/phase-3-sinatra-react-project"&gt;Backend&lt;/a&gt; | &lt;a href="https://github.com/mwarrn/phase-3-project"&gt;Frontend&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Project Goals&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Use Active Record to interact with a database.&lt;/li&gt;
&lt;li&gt;Have a minimum of two models with a one-to-many relationship.&lt;/li&gt;
&lt;li&gt;Create API routes in Sinatra that handles at least three different CRUD actions for at least one Active Record model.&lt;/li&gt;
&lt;li&gt;Build a separate React frontend application that interacts with the API to perform CRUD actions.&lt;/li&gt;
&lt;li&gt;Use good OO design patterns with separate classes for each model and instances and class methods as necessary.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Active Record has two models: &lt;code&gt;Category&lt;/code&gt; (which has many &lt;code&gt;todos&lt;/code&gt;) and &lt;code&gt;Todo&lt;/code&gt; (belongs to &lt;code&gt;category&lt;/code&gt;), and each table has a &lt;code&gt;name&lt;/code&gt; column.&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;ApplicationController&lt;/code&gt; has &lt;code&gt;post&lt;/code&gt;, &lt;code&gt;get&lt;/code&gt;, &lt;code&gt;path&lt;/code&gt;, and &lt;code&gt;delete&lt;/code&gt; routes set up for the frontend to interact with.&lt;/p&gt;

&lt;p&gt;At the time of submission, I am currently in the middle of finishing building all of the CRUD React components for the frontend to interact with the API created in Sinatra.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Additional advanced features for future versions&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Site membership with secure sign-in (using the &lt;a href="https://rubygems.org/gems/bcrypt/"&gt;bcrypt gem&lt;/a&gt;?)&lt;/li&gt;
&lt;li&gt;Option to add deadline for each task&lt;/li&gt;
&lt;li&gt;Points system for completing a task (productivity gamification)&lt;/li&gt;
&lt;li&gt;Animation with &lt;a href="https://www.framer.com/motion/"&gt;Motion&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>beginners</category>
    </item>
    <item>
      <title>Getting Started with Data Visualization in React using Chart.js</title>
      <dc:creator>Michael Warren</dc:creator>
      <pubDate>Sun, 17 Jul 2022 19:49:36 +0000</pubDate>
      <link>https://dev.to/mwarrn/getting-started-with-data-visualization-in-react-using-chartjs-4kgp</link>
      <guid>https://dev.to/mwarrn/getting-started-with-data-visualization-in-react-using-chartjs-4kgp</guid>
      <description>&lt;p&gt;I recently developed a CRUD application with React, and one of the unique features I wanted to add was a way to visualize the data used in the application as a line chart and bar chart. In my research, I found that there are several libraries specifically designed for React to accomplish this instead of directly using &lt;a href="https://d3js.org/"&gt;D3.js &lt;/a&gt;. Some of the libraries I considered include: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/FormidableLabs/victory"&gt;Victory&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/reaviz/reaviz"&gt;REAVIZ&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/uber/react-vis"&gt;react-vis&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://react-chartjs-2.js.org/"&gt;react-chartjs-2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;After some experimentation, I found that react-chartjs-2 was the easiest for me to grasp. react-chartjs-2 is a set of React components for &lt;a href="https://www.chartjs.org/"&gt;Chart.js&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I found these two videos incredibly helpful for getting started with Chart.js:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/RF57yDglDfE"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Ge6PQkpa6pA"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;In my case, I needed to use &lt;code&gt;fetch&lt;/code&gt; to access the data from a JSON file, and pass it into the &lt;code&gt;data&lt;/code&gt; property. I used this video as a guide: &lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/qZ17lr6Vn94"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;And I used these two component examples to model my display for the data:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://react-chartjs-2.js.org/examples/line-chart"&gt;Line Chart&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://react-chartjs-2.js.org/examples/vertical-bar-chart"&gt;Bar Chart&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>Developing with Intention</title>
      <dc:creator>Michael Warren</dc:creator>
      <pubDate>Sun, 19 Jun 2022 19:18:10 +0000</pubDate>
      <link>https://dev.to/mwarrn/developing-with-intention-38p9</link>
      <guid>https://dev.to/mwarrn/developing-with-intention-38p9</guid>
      <description>&lt;p&gt;One of the things I've overlooked while learning software engineering in the past and up until recently is the incredible usefulness of maintaining systematic inventory of my knowledge. I realized this (quite painfully!) after diving back into programming after a 2-year hiatus. In short, my concern is with being able to answer with certainty: &lt;strong&gt;What do I know?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In designing my knowledge-tracking system, I'm still experimenting with finding the platform that works best for me, whether online, handwritten, or a combination of the two. But at this point, I'm not allowing the format to become a distraction or constraint. I've accepted that the "best" format is the one that allows me to unload the mental struggle of trying to keep track of all this information.&lt;/p&gt;

&lt;p&gt;Here are the main areas I am tracking so that I learn and develop with intention:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Discovering&lt;/strong&gt; - These are new concepts and terms I have either actively or passively encountered through lessons, assignments, YouTube videos or elsewhere, which require me to dig deeper to properly grasp. I simply make a note of them for my upcoming study sessions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Understanding&lt;/strong&gt; - These are concepts I often pull from the above. At any given time, there should not be too many concepts or terms in this category or else I am risking information overload. Each of these will likely require me to invest numerous hours in developing an app with them. I will also search sites like &lt;a href="https://leetcode.com/problemset/all/"&gt;LeetCode&lt;/a&gt; for learning them through problem solving. &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Learned&lt;/strong&gt; - If I can correctly use and explain a concept or term, I consider that I have reached a proficient level in it and track it here. Keeping track of this helps me stay motivated and encouraged in my learning when I see how far along I’ve come... and to avoid the dreaded imposter's syndrome!&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Toolkit&lt;/strong&gt; - These are my code snippets, recipes, and common refactoring patterns. This is all code that I understand but tend to come back to when considering how to solve certain problems.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>beginners</category>
    </item>
    <item>
      <title>My Journey to Software Development</title>
      <dc:creator>Michael Warren</dc:creator>
      <pubDate>Mon, 11 Apr 2022 01:46:31 +0000</pubDate>
      <link>https://dev.to/mwarrn/my-journey-to-software-development-2k35</link>
      <guid>https://dev.to/mwarrn/my-journey-to-software-development-2k35</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FCHGWjgX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlvlyvu851tp2q3p9nr6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FCHGWjgX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlvlyvu851tp2q3p9nr6.png" alt="Image description" width="880" height="551"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why did I want to pursue Software Development?&lt;/strong&gt;&lt;br&gt;
My fascination with software, and computers in general, began early on in my childhood. My father had a major interest in computers and networking as a hobby, and so this meant that he would invest in the latest technology that our family could afford at the time of what was part of the personal computer revolution. My older brother and I would spend hours on the Commodore 64 at home, playing games and just digging into it trying to figure out how it works. The latest issue of &lt;a href="https://arstechnica.com/staff/2018/11/first-encounter-compute-magazine-and-its-glorious-tedious-type-in-code/"&gt;COMPUTE!&lt;/a&gt; would frequently be lying around the house, and we would pour through it, typing in code from the magazine to make our own games. Seeing the game come together was often as exciting as playing the game itself!&lt;/p&gt;

&lt;p&gt;This interest would carry on as I would try to play around and innocently hack into the Apple Lisa and Macintosh computers at school. My father, the early adopter, soon had a bulletin board system (BBS) that he would host at home. His BBS was the earliest resemblance of the Internet that I experienced. I was amazed at how it was possible to communicate with others on computers. Eventually with the widespread availability of dialup Internet and the evolution of the Web, I was making my own webpages on GeoCities with the earliest version of HTML at 56kbps!&lt;/p&gt;

&lt;p&gt;I could share many other childhood memories, &lt;strong&gt;but in short,&lt;/strong&gt; what interests me most about software development is that it is how I can provide a creative, logical solution to a problem of any scale, thereby improving my life and the lives of others in countless ways. The fact that it remains a high paying career field with a lot of flexibility provided through remote work just makes it even more an ideal path to me!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What led me here?&lt;/strong&gt;&lt;br&gt;
While my journey to software development is full of many positive memories, my journey to Flatiron School itself is a bit of a rollercoaster ride. Prior to applying to this program, I applied (and was declined) three different times at Amazon Technical Academy, which is an internal upskill program for training non-tech roles into becoming software development engineers. The program does not share any feedback for what you need to improve on, so each time I felt a bit lost as to what I am doing wrong.&lt;/p&gt;

&lt;p&gt;If that sounds rough, just consider that prior to &lt;em&gt;that&lt;/em&gt;, I graduated from college with a degree in Application Development! Several setbacks in my personal life made it incredibly challenging to go through the grind of applying for jobs at the time. I simply wasn't in the right place for whiteboard interview prep, and right about that time was also when the COVID-19 pandemic began. My focus shifted to making sure I could cover my living expenses with my position at the fulfillment center.&lt;/p&gt;

&lt;p&gt;Ironically, being engrossed in non-tech work led me back to software development as I gradually discovered some flaws and shortcomings in the warehouse management software we use at my site. I dusted off Visual Studio Code to write some custom Tampermonkey scripts using JavaScript to improve the functionality of this software, and several of them have proven extremely useful and have been shared network wide. &lt;strong&gt;My biggest lesson?&lt;/strong&gt; Keep grinding!&lt;/p&gt;

&lt;p&gt;I had previously heard about Flatiron School's in-person programs, but it was by a random Google search that I discovered its online Amazon Career Choice program. This program is giving me the opportunity to review (and relearn!) many of the topics I covered while completing my bachelor's degree.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Where do I want to go with software development?&lt;/strong&gt;&lt;br&gt;
My hope is that living in the Greater Seattle Area will give me access to a lot of entry level positions. Of course, it only makes sense to apply to internal roles at Amazon, but there are so many other interesting opportunities here, whether at major companies or startups. My primary focus is on gaining an exceptional understanding of the fundamentals of software development. As I mentioned earlier, I've been getting my feet wet with software development since I was very young, and the time has come for me to enter the water and swim!&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
