-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblog_feed.html
221 lines (213 loc) · 20.7 KB
/
blog_feed.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Make Anything | Will Lynch - Blog</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="background">
<div class="row">
<div class="col-sm-12" id="navigation">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Make Anything</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="active"><a href="blog_feed.html">Blog</a></li>
</ul>
<!--social nav links -->
<ul class="nav navbar-nav navbar-right" id="social">
<li><a href="http://twitter.com/wlynch16" class="twit">Twitter</a></li>
<li><a href="http://facebook.com/wlynch91" class="fbook">Facebook</a></li>
<li><a href="http://github.com/lynch16" class="ghub">Github</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div> <!--navbar row-->
<div class="container">
<div class="row shadow" id="blog">
<div class="col-sm-9 blog_feed">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
Angular Assessment
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>This is the last assessment of the Learn.co online developer program. I chose to build an app that will encourage people to be more involved in their state legislations by providing easy access to data and a way to share that information. The idea for this application came from a realization that many of my friends do not know much about what is happening in their state legislations or even who represents them. In this age of information, I wanted to provide them a format for accessing the relevent information for the next election. </p>
<p>The application is built with an AngularJS frontend and Ruby on Rails API backend. The RoR backend pulls most of its data from the OpenStates.org API, but also uses a SQLite database to provide additional functionality.</p>
<p>The first stage of this application is to provide basic information on all the legislators throughout the United States. Users can either explore legislators by state and chamber, or search for the legislators by their home address. This search feature will be particularly useful in the future as it returns the legislators in their district that they are directly able to vote for.</p>
<p>Future stages will provide access to bills and voting records and the ability to explore commitees. Additionally, I hope to eventually include data regarding campaign finance and possible correlations between voting records and donations. Hopefully, by next voting season, I will have an application that can easily provide information to voters so that they can make educated decisions in the next election.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
Rails Assessment App
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p> For this assessment, I built an MVC to manage access to different machines that the Manchester Makerspace. The Makerspace has officers that manage each of the workshops. This app will allow them to set criteria for what a member needs to know before using the equipment and also sign off on those skills for different members. Also, it tracks the skill level so that members will know who to go to for help and relieve some of the burden on officers for signing everyone out on a skill. </p>
<p>
Because this app had so many parts, I created a workflow of how the tables are related and what actions everyone is allowed to access/edit. Also, I had to add extra features to meet the assessment requirements. Since I wanted to actually use this for the Makerspace, I spent a lot of time working on the layout of the forms. One of the hardest ones was getting the nested checklists to display properly and then function properly. I actually ended up using a js script to dynamically add skills to a workshop to make it more convenient to mass asssign skills.
</p>
<p>
The hardest part about getting my app to work was setting up OmniAuth with Devise. I found several difference instructions but they were contridictory and apparently not up to date. I was able to get it working for gMail quickly enough but the Slack oauth functionality was not as easy. Even the documentation on their site was not correct. I eventually had to find clues from a recent update notice; for some reason, Slack didn't update the instructions that they direct you to.
</p>
</div>
</div>
</div>
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Sinatra Web App
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>As part of my second assessment with Learn.co, I was tasked with creating a simple web app using Sinatra and ActiveRecord. I wanted to make something usable in my day to day job, so I decided to create a loan management system to help track the different aspects of an SBA 504 loan.</p>
<p>One of the requirements was that users can only modify the content that they create. This doesn't really match the way that LMS systems work at my type of business, but I included it to pass the assessment. When I revise this project to put it into use, I will most likely replace this feature with one that simply updates a "last user" variable.</p>
<p>Putting the app together was quite straightforward since I had made several other Sinatra apps during the course of the program. The biggest issue I had was actually setting the initial program to run with the correct dependencies. I realzied that simply deleting the Gemfile.lock and created databases was the easiest approach to configuration. I am also a little unsure of where to insert Rack::Flash as it doesn't seem to work when I put it in config.ru. I put it in the ApplicationController class, which seems to work fine, but I'm not sure if this is convential.</p>
<p>I felt comfortable enough after creating the app to create a layout.erb with css styling. Adding the css styling was very difficult because I couldn't figure out how the app would read the css files. I did a bunch of research but most of it was very contradicting and didn't work for my application. Eventually, I got it working by putting the css files in a subfolder of public called styles. While this worked, I would have thought that putting it in a subfolder called css would work too, but it didnt.</p>
<p>I'm pretty happy with how the app came out, but I would like to add more features once I learn Javascript, such as being able to sort the lists of entities and loans. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
CLI Climate Tracker Ruby Gem
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>
This project was the first Assessment of the Learn.co program. The objective of the project was to create a CLI ruby gem that pulls data from an API or website to create list and detail views. I took a look through the examples that were provided and thought that they were essentially all the same concept of finding a service near you through a popular website. I wanted to learn more about APIs so I took a different approach.
</p>
<p>
Having studied climate change for my undergrad, I wanted to build something that I would find interesting, useful and expandable. I decided to build a gem that uses the NOAA Climate API to display and compare average temperatures for where I lived. I thought it would be interesting to be able to compare the average temperature of today to the year that I was born. At least, that is where my process on this gem began.
</p>
<p>
After searching through the NOAA Climate API for several hours, I realized that there were some limitations in getting the data that threatened the accuracy of my gem. The API is limited to return a maximum of 1000 values per request. I was at first going to compare yearly averages but because of this limit, I had to be more specific and compare average monthly temperatures. Once I had the API figured out, I created a blank ruby application to play around with different request variables and ways to access the values stored within the retrieved data. The API returns a JSON string, which I parsed into a hash. The first key of the hash, by default, is labeled "results" conveniently enough. The value of results is an array of data points. The data points are hashes themselves, the keys of which vary by request type.
</p>
<p>
Once I figured all of this out, it was time to start building the actual app. I used Bundler to set up the initial file and proceeded to work my way through the CLI class and then the NOAA Data class. When I first started the CLI class, I put almost everything into two methods: one to welcome the user and take inputs, and one to interact with the NOAA Data class. However, the more I built, the more I saw a need for more methods to try and stick with DRY principles. The NOAA Data class was fairly simple to build since I had done so much work prior in testing out the API. Knowing that I needed a list view and detail view to complete my assignment, I decided to expand the app to cover every state in the U.S.. Now, the user is able to select from a list of supported states, enter a date, and return the average monthly temperature for that date. Alternatively, users can decide to make a comparison between two data points, which is why I call it a tracker. Of note, users can choose to forgo the list of states and just enter one from memory. The option to view the list of states not only indicates what format the input expects, but also will update for any additions or deletions NOAA makes (i.e. adding Puerto Rico).
</p>
<p>
I'm quite satisfied with the end product having met my initial goals of creating something useful, interesting, and expandable. Future changes will add more functionality to how the user interacts with the NOAA API and save the results of queries to reduce having to query the same dataset twice.
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Why I am learning to code
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>I graudated college with a plan of working in the legal field for a few years and then applying to law school to study environmental law. After three years of working as a paralegal, I realized I no longer wanted to continue a career in the legal field and began looking for something else. I had a hard time finding something as all of the initial options required returning to school for 2-4 years. While I was not opposed to returning to school, the thought of giving up my income and accepting a lot of debt to try a new career made me nervous.</p>
<p>As I honed my search, I identified several criteria that my future career would have. First, I wanted a career that would allow me to move and travel as I saw fit. I moved almost every three years growing up and loved the experience of moving all over the country and would like to be able to do that once I had a family of my own. Next, I decided that I wanted to build things for a living rather than sell things. I don't remember where I heard it, but there is a phrase that has stuck with me: "In business, everyone is either building or selling." At first, I didn't think this applied while working in the legal field but upon further consideration, I saw that I was selling legal services. Having been a maker all of my life, I wanted a career that aligned with the love I have for building things. Lastly, I wanted a career that did not requrie a long lead tiem to start.</p>
<p>During my search for a new career, I became heavily involved with Manchester Makerspace. At the makerspace, I met several software engineers and had the opportunity to discuss their work-life and how they got to their current position. After looking into it further, I found that a career in software development met all of my above criteria. Also, I had already gotten my feet wet in the subject having done coding for 3D printing and microelectronics projects so I knew that I already liked it. I'm just starting out in my newly chosen field but am so far, incredibly pleased with my decision.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<h4>Archives</h4>
<ul>
<li><a href="why_code.html">Why I'm learning to code</a></li>
<li><a href="climate_api_blog.html">Building my first ruby gem</a></li>
<li><a href="sinatra_assessment.html">Building a web app through Sinatra</a></li>
<li><a href="rails_assessment.html">Building a web app on Rails</a></li>
<li><a href="jquery_assess.html">Expanding Rails with JQuery</a></li>
<li><a href="angular_assess.html">AngularJS and Ruby on Rails Application</a></li>
</ul>
</div>
</div> <!--main blog content row-->
</div> <!--master container-->
</div><!--background-->
<div class="light-grey">
<div class="container">
<div class="row" id="details">
<div class="col-sm-4 border">
<h3>Contact</h3>
<p>
email: <a href="mailto:[email protected]">[email protected]</a>
</p>
</div>
<div class="col-sm-4 block_links border">
<h3>Links</h3>
<p>
<a href="contact.html">Contact</a>
<a href="projects.html">Projects</a>
</p>
</div>
<div class="col-sm-4 block_links">
<h3>Follow</h3>
<p>
<div id="hide">
<a href="http://twitter.com/wlynch16">Twitter</a>
<a href="http://facebook.com/wlynch91">Facebook</a>
<a href="http://github.com/lynch16">Github</a>
</div>
<div id="social">
<a href="http://twitter.com/wlynch16" class="twit">Twitter</a>
<a href="http://facebook.com/wlynch91" class="fbook">Facebook</a>
<a href="http://github.com/lynch16" class="ghub">Github</a>
</div>
</p>
</div>
</div><!--details row-->
</div> <!--container-->
</div> <!--light-grey-->
<footer>
© 2016 William Lynch
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>