Steve Aragon's Blog

Win some. Lose all the rest.

[stevearagon]

GraphQL Ruby: Clean Up your Query Type — AlphaSights Engineering

From RESTful to GraphQL

A post I wrote for my company's blog

[stevearagon]

How do you TDD on the frontend?

In Ruby/Rails, I have worked on a few projects using TDD. The basics were pretty simple. You make a test for something you want your class to do. Run the test. Fail the test. Write code to make test pass. And repeat. This is very simplified of course.

One of the projects I am on at work is building a new frontend (in Ember) for an exisiting app. I would like to TDD it. I often try to but I always just end up writing tests afterwards that verify the that the feature works. At least I can refactor at this point, but it seems it would be easier if I could drive the developing through tests. I guess it's tough when much of the frontend depnds on how things look visually, which is touhg/impossible to test.

I am going to do more research on the topic and hopefully something comes to fruition.

[stevearagon]

A new(?) way to visually plan

I was thinking of a new way to visaully plan out tasks you want to complete. When trying to complete a task, the biggest obstacles for me is trying to get a good idea of what needs to be done and where to start all of this (I am guessing many people struggle with this).

The task I was trying to complete when I started thinking more about this was merging an old sports models I had with a new version. I used to scrape, store and manipulate sports data using Microsoft Excel. After I started to learn more about computer programming, I found better ways to get data from the web. I started using Ruby and APIs to pull data in json form and store it in a Psql database. Getting the data was 1000x faster (exaggeration).

Analyzing and manipulating data was still much easier using Excel. I looked at alternatives such as using plain old ruby to calculate tings and possibly using R. It seemed to me that the work I needed to put in just to get back to the level of my Excel analysis was not worth the time. I tried to, but Excel just felt easier to do analysis. So, my next thought was to just use Ruby to get data and then Excel for analysis. And that's how I got to the task of merging the parts of both together.

I decided to start planning this process by working from the outside in. Here is an image of how I planned it:

I started with the main task and slowly worked my way in figuring out what I needed to do to complete the outer task. I think that's how most people normally plan things, but I have never seen a planning tool that would visually display things like this. I am guessing it probably doesn't work as well on pen and paper.

So, I wanted to make an electronic planner that uses this method. A visual planner where you can keep where you can keep nesting within something infinitely. It's basically like a node system but represented in a different way visually. I don't know why, but I like the way how things go deeper internally.

[stevearagon]

Infinite Scroll in Ember

I was working on a movie stills (movie screenshots) website for a friend. When looking at a large collection of pictures, it seemed pagination was necessary. Not only did my friend want pagination, he wanted infinite scroll. This was a app with Rails on the backend and Ember on the front end. To get this done, I did some kind of hacky things. When I have some time in the future, I definitely want to improve the implementation.

In the application.hbs template I put in some javasscript to trigger the refreshing of the photo collection when the user scrolls to the bottom:

I made a component called stills-list. Whenever the window is scrolled to the bottom, the the html element '.load-button' will be clicked, triggering the action 'onLoadNext'. Here is the template:

Here is the component code where the action 'onLoadNext' is defined: So, this is how I implemented an infinite scroll within my Ember/Rails app.

[stevearagon]

How I setup a form in Ember

I started coding back in March 2015 when I started applying for coding bootcamps. Initially, I cut my teeth creating simple server-side rendered Rails apps.

When making a form in a Rails app, you created a view that used the an html form element. You threw some inputs in there and added a submit button. When you hit submit on this form, all of the input data is sent back to the serve in some params. Now that I am using Ember for my frontend, I create forms a little differently.

I started learning Ember at the beginning of October 2015. Since then, I have created a form or two working on one of my company's Ember apps. When creating a form in Ember, I start off creating properties in my controller that are initally set to null or an empty string.

Then in the template, where your html and handlerbars go, you put in input elements with associated onchange actions.

onchange={{action mut 'sampleProperty'}}

Now, whenever this input element's value is changed by the user, it will modify whatever property you input after 'mut'. Finally, you will add a button and assign it an action which will be to create/update a model. This action that will create/update will take all the updated properties and send them back to your API to modify the record.

I haven't really made forms any other way in Ember, so I am not aware of the advantages and disadvantages. As I learn more about Ember, I will try and come back with my thoughts.

[stevearagon]

Random Scene

Her eyes moved side to side. There wasn’t a smile on her face nor a frown. What do you call the inbetween? She grabbed her toast, broke it in half and then took another bite. She wiped the crumbs from her mouth and laughed. She thought about if Abbott had really gotten better? His mind seemed sharp but he used to be sharper. Doctors projected recovery to take years. He seemed above 90% in a couple of months. How should I treat him? He’s been through so much. Abbott reached for the butter and stared at his mother. He asked “Did I really have seizures? I can’t remember anything for a two week period. I see all these scars on my body. I ask everyone questions. The doctors, nurses, family, friends. No one can ever give me anything specific. Anything that helps. They tell me that its good I can’t remember. That I shouldn’t remember. Well I want to.” “It was really bad. You would sit there and repeatedly say words as if your brain was stuck on one idea. One day you would repeat “Seven. Seven. Seven.” Someone would ask you about balloons that were sent from your office. ‘What balloons? I don’t know them!’ you would respond. The scars you see are from injections, torn out IVs, knicks from jumping out of bed. This was you in August.”

[stevearagon]

New Bike: The Surly Pacer

I have only seriously biked on a 2003 Giant TCR (see below. Not my bike in the picture, but same exact frame with a few different parts). And when I say seriously biked, I mean biking 30-40 miles a weeks for the past five months. This isn't a long weekly distance at all. I bike to commute and bike a 5-10 mile ride on the weekend.

This Giant TCR is an aluminum frame, which means the ride was super stiff. I feel every single divot in the road. The bike was very light and fast though. I took a test ride on a 2015 Surly Pacer, a steel frame road bike, and the ride was 10x more comfortable although the frame a bit heavier. I think my Giant TCR is 17-20 pounds while this Surly Pacer is 24-30 pounds.

I ended up buying the Surly Pacer. I am no bike expert, but I am excited to see the subtle differences between an aluminum and steel bike. My Surly Pacer gets in on Wednesday. I am still going to ride my Giant TCR, but will probably ride the Pacer as my daily commuter unless it rains.

Over the next few months, I will slowly upgrade my Pacer as well as fix up my TCR. I will have a review of the Pacer by next week. Disclaimer: This will be a review by someone who has ridden two different road bikes ever.

[stevearagon]

a/A W9D5 - Sixth Cents Presentation Day

The moment we (people in my cohort and I) have all been waiting for: Final Project Presentations. We spent most of the morning ensuring that our web apps didn't have any remaining bugs that would haunt our click-through/presentation of our projects.

I had a few bugs with working with some of my seed data (seed data is fake information you use to populate your site). I worked on that until maybe 30-45 mins before presentation time.

Earlier in the morning, I also tried to put in an element(for me it was spinner) that would inform the user that the page was currently loading. I looked into using the spin.js plugin. I had no trouble starting the spinner, but stopping it at the right time was a problem. Most people would probably stop their spinner after their AJAX requests were done. For me at least on the landing page, I needed the spinner to go until my budget charts were generated. Generating the charts took the longest amount of time. I couldn't figure out what event I would use to stop the spinner on. I will look into this more.

There are a few things I will probably try to work on the next few days to add. Number one is pagination.

P.S. presentation went well. I noticed one bug show up that was due to incorrect seed data. I had an expense that wasn't a negative amount which messed with one of the budget charts.

[stevearagon]

a/A W9D4 - Sixth Cents Day 11 (Final Day)

So I pretty much completed Sixth Cents, a site clone of Mint.com. (link here). I’ll probably work more on it after we present them tomorrow, but this is the final product for class.

Today I finished a few of the non-core features of the app that were required. These were omniauth which allows a user to log in/sign up using another website's authentication. I used Twitter for mine. You can do multiple ones if you’d like, but I’ll save that for another day.

The other feature was adding the ability for users to upload files using the Paperclip gem and Amazon S3. The only file I needed users to upload was an avatar which is shown on the top left side, in a very small square. I guess if I wanted to allow users to upload a spreadsheet of transactions, I could use this file uploading feature of the app.

I didn’t add other new features because I want everything to work during our presentations tomorrow. I will probably do some more styling and fix small bugs before we show off our apps tomorrow afternoon.

[stevearagon]

a/A W9D3 - Sixth Cents Day 10

We're almost at the end of the 11 day window we were given to complete our clone of a popular site. I have been working hard on styling and making some gauges to track a user's budgets. I think my styling looks ok so far. Is it me or does styling a page take way longer than you think? I have to complete a few more things on the final day tomorrow. They will probably(hopefully) be twitter omniauth, pagination, and file hosting. Definitely a lot of stuff for a day.

[stevearagon]

a/A W9D2- Sixth Cents  Day 8

At the sorta halfway point of our projects, we had two of our classmates review our sites. I haven't really styled much of my page, as I focused on the functionality, and that was where I was docked points from my peers.Overall, I think I did ok.

For the rest of the day I worked on two things: Backbone auth and styling my page. Backbone auth took a lot less time that I thought. Styling one page takes a lot more time than I thought. It seems I will be styling until we present our projects Friday morning, and maybe I will put in one more piece of functionality.

[stevearagon]

a/A W9D1 - Sixth Cents Day 5-7

The beginning and end of making an app seem the hardest. The best thing I learned so far in the process is being discplined in naming everything correctly, ordering things properly and following your plan. As I fix some bugs and style, It probably takes me a little bit longer to find certain things. If I properly tagged my css file or stayed very consistent in class naming for my elements, things would be a bit easier.

I finished most of the basic functionality but had plan on completing displaying trends (which I partly have), searching through transactions (I have basic filters for transactions) and emailing alerts on accounts (I am still thinking about what the best way to do alerts is, but I probably just need to use whatever way I can think of right now).

We will have our current projects, no matter what state, reviewed by our peers tomorrow. f u n

[stevearagon]

a/A W8D5 - Sixth Cents Day 4

I had an issue with pushing my app up to Heroku today. Long story short, don’t rake assets:precompile. This will create a static assets folder that will be uploaded to heroku. Changes to your assets will not be reflected in your next push going forward. I ended up doing this while trying to troubleshoot another problem.

Other than that whole thing, the day went by smoothly. I completed the budgets page (not styled yet like most of my site) where you can create budgets and view a list of your budgets. I ran into one problem with how I initially set up my budgets.

On Mint.com, you create a budget. Then every month going forward will have this monthly budget. Your monthly budgets are then static for the month after you complete it. So, I ended up thinking that I would need two types of budgets. One table of budget instructions and one of recorded budgets. The budget instructions are what the user enters. This will always be avaiable for users to edit. The recorded budgets table will be created at the close of every month from the available budget instructions.

I still have a lot more work to do, but I seem to be getting somewhere.

[stevearagon]

a/A W8D4 - Sixth Cents Day 3

I am continuing to build my Mint.com clone today. So far, I have built out Backbone models & collections for bank accounts, transactions and budgets. I think I have a couple more to build: Alerts & Bills (possibly goals).

There isn't much on the best practices in Backbone, so I never feel 100% confident on how I am implementing things. I built out some filter links to view a user’s transactions, but I am doing it in a roundabout way. If you want to see all transactions, you pull all the user’s transactions from the database at one time. If you look at an account’s transactions, another sql query is fired that pulls the association of transactions on an account. I will try and make the account transactions page just filter from the initial pull of all transactions. Good luck to me.

[stevearagon]

a/A W8D3 - Sixth Cents Day Two

Day two of a two week project. I feel the beginning of these types of projects is the toughest. Oh wait, this is the first time I am doing somehting like this.

As I mentioned yesterday, I am making Sixth Cents which is a clone of mint.com. I planned on completing the back end for making transactions which belong to accounts (these accounts are your accounts at a bank i.e. your checking account at Bank of America).

After today, users now have the ability to manually enter accounts and transactions. You can view your accounts on the landing page and then click on an account to see the transactions by account. The most difficult thing was making sure I pulled the right data and had access to it at the right time to display on the page. Also, I ran into some async issues, but I feel a lot better about the topic after trouble shooting it today. Well, on to the next day.

[stevearagon]

a/A W8D2 - Start of Final Projects

For the next two weeks, our class will be working solo on clones of popular sites. We will be using a combination of Rails and Backbone to build these clones.

Out of an approved list of web apps, I chose Mint.com. I named my clone Sixth Cents. I am pretty familiar with the site and thought some of the functionality would be cool to implement.

As a requirement, we had to make a detailed plan and schedule for our project. On the first day, I planned on completing user sign up and sign in as well as building out the Accounts model, controllers and views in Rails and Backbone. I am still a little foggy using the Composite View and am glad I will get to work on it more with this clone.

[stevearagon]

a/A W8D1 - Trello Clone Day 2

We continued with the second and last day of our Trello clone. I built most of the base functionality of the clone but did not build it with a composite view. So, I went back to implement that, but had trouble getting it all to work. I definitely feel a little weaker than I should be at Backbone. We begin our personal projects, so I should be getting really familiar with Backbone. I am cloning Mint.com which will require lots of subviews.