Hearthstone Stat Dashboard – Development pt4

Sorting the Data

Next task on my list was to figure out how to sort the data.

I started by adding a key on the side that I wanted to use as buttons to sort by most wins or most losses. This fiddle was really useful: http://jsfiddle.net/hibbard_eu/C2heg/

I had to play around with it a bit though as I had children elements that I needed to use. I figured out I could use .children(). I also added the parseInt as it wasn’t sorting columns that had zero wins/losses correctly but after adding that and a few tweaks I got it all working great.Screen Shot 2015-08-24 at 8.42.33 PM

Back to the history section

After getting that done I went back to the top section as I wanted to display less history upfront. I may add in the ability for the use to click a button to show more bur for now the lsit was too long. I used :nth-last-of-type(1n+7) on the li items to shorten it.

I then started playing with how to add a time ago column, so you could see how it was since a match had been played. I am still figuring that part out right now and dabbling with timeago.yarp.com/

Screen Shot 2015-08-24 at 8.20.33 PM

Things still to do

  • Edit the win loss buttons to better display that they are to sort by most wins/losses
  • Add a tooltip to display amount of matches won/lost
  • Add a total win rate percentage to the page
  • Try and get the time part working in the history
  • More general styling

Hearthstone Stat Dashboard – Development pt3

The Bar Chart pt 2
 

After getting the table looking good with html and css, I then went on to create the DOM table data in jQuery. It was shaping up ok but I quickly realized that styling the table columns was going to be a bit tricky especially spacing them out evenly. I also like the idea of having the table responsive  which was going to be hard.

I found this article on alternative ways to evenly space items: https://www.google.com/search?client=safari&rls=en&q=https://css-tricks.com/equidistant-objects-with-css/

So I decided to go with the flex box option.

I started by again constructing it in html to see the layout and make sure it all worked ok. I made sure that using percentages would display the stacked columns. I then started making them in jQuery again.

Using the keys value I was able to pull out the names of the heroes. I then realized that using the values.___ I could pull the wins, losses etc.

I then wrote a function to turn the data into percentages with some help from here. I also found that 0 was returning as NaN so adding in a if statement that converted NaN to 0 if the wins or losses come back as 0. This was useful in helping me with that.

 Things I need to do:
  • Commit to git more often
  • Clean up my css
  • Make hover colors
  • Make tooltip?
  • Make a sortable option
Styling and cleaning up

I then turned all my css into Sass and started fully using Sass. I split up my sass into different partials to help manage the different sections and also grouped all the colors being used into one area.

I then went through and pulled out any unused CSS rules. Using the console I was able to find a few but then went through myself and optimized.

After that I started styling the page a bit more. Still not happy with the layout as of yet but at least getting it consistent was great. I added another column of list items with the type of game and next want to add date played. I briefly looked into the sorting and will take a stab at that soon too which will be great.

Hearthstone Stat Dashboard – Development pt2

The Bar Chart

After all that, I wanted to now start creating a bar graph representing the win/losses of the matches which uses a different set of JSON data.

Screen Shot 2015-08-20 at 9.02.08 PM

It has a lot more levels of scope so was hard to implement. I tried using d3.js and got nowhere and then moved onto google visualizations library and was able to get that to work but only with an edited JSON file where I took the hero’s name and made it a value rather than a key i.e. “hero”: “warrior”,

After that test I was pretty happy however I wanted to have more control over the graph and thought it would be a cool test to see if I could make a bar graph by constructing a table in jQuery similar to how I contracted a set of list items for the history data above.

I also wanted to be able to use the raw JSON file rather than having to edit it.

I found this which I figured I could use as a base https://css-tricks.com/making-charts-with-css/ then work out how to create that structure in jQuery

I also looked up how to turn numbers into a percentage as that would be useful for creating the win/loss amounts in the stacked version I would want: http://stackoverflow.com/questions/8522673/make-a-number-a-percentage

Screen Shot 2015-08-21 at 9.08.34 PM

I hacked around with the code from that bar chart and got a stacked representation looking ok with the wins populating from the bottom to top and losses from top to bottom. I hardwired in the numbers for now but when I plug in the percentage values they should meet in the middle.

I then wanted to make sure I could access the win/loss data ok as I was having trouble doing that before. It turns out with my previous function it was way easier to dive into the different levels of data.

I also learnt that the heroes were keys not values which made sense and got some help from my friend Ri with how to call them by using Object.keys(data) to get a list of just the names.

Next Steps

Next stage is to start creating the table in JavaScript.

End goal is to have a stacked sortable bar chart where you can sort by most wins or most losses with raw JSON data. like this kind of thing but without the fancy animation http://bl.ocks.org/mbostock/3885705

Hearthstone Stat Dashboard – Development pt1

The Idea

I wanted to create a bar chart that would pull in an API from track-o-bot to use live JSON data to populate the chart. This started purely as a learning tool for me to play around with JavaScript and jQuery.

The Server

Previously when using treehouse we used their server to view the data but as I was developing locally I had to create my own.

Using this gist I was able to create a server using node.js. I already had it installed through home-brew so it was just a case of updating it all and installing the server.

The first test

Started by copying the office in/out JavaScript I did for a part of the Treehouse course.

The data I have had objects within objects so it took me a while to figure out how to access data within objects. I found that $.each(response.history,function (index, hero) {…} adding the response.history made the for loop look one level deeper

 Screen Shot 2015-08-12 at 2.54.55 PM
The API 

Then after having this set up working the plan was top replace the local JSON data with the API call to the track-o-bot server.

This was having real issues getting the data to show through onto the site, i could see that it was getting called correctly in the console but it was being blocked.

The error was that its “MIME type (‘application/json’) is not executable, and strict MIME type checking is enabled.”

I did a lot of digging around online and editing the code and tried different browsers to no avail and I read that it might have something to do with the server is not set to output the MIME type to application/JavaScript which was not something on my side.

I contacted the guy who made the API after researching for a bit of time and it turns out it was an issue on his end and he wasn’t planning to fix it.

I decided to move forward with downloaded JSON for now but my husband is working on making an application to access the track-o-bot API and pull the data into another server that I can use with JSONP.

Things I have been working on lately

In no order this is what I have been up to:

Treehouse Learning

Team Treehouse has been a great platform for learning and I have been enjoying working through it! I started on the Web Design track and only have one section left however I decided to leave the last one for now and switched to the Front End Development track as i was really interested in learning more about Javascript. These are my stats so far:Screenshot 2015-06-09 13.08.23

The Front End course has felt like way more of a challenge than the Web Design one for me as I have quite a solid foundation in design so there was a few nice new HTML and CSS information I picked up but the rest was more of a recap.

The Javascript modules in the Front End course have been all complete learning for me though. It has been really fun trying to wrap my head around it and I have been loving the challenges, even if they feel like they are taking me a while. I also picked up this book which really helps!


Robbie’s Website Design and Implementation

The bulk of Robbie’s website is now complete. I made the design mobile first by creating the CSS for mobile screen sizes first then scaling up with media queries.

 Desktop View

The full sized page has the full background and it shaping up nicely. I was having a few issues with the full sized background not scaling correctly when resign the browser but I added in a Javascript resize script which helped with that.

Screenshot 2015-06-09 12.49.16

Desktop View

Screenshot 2015-06-09 12.49.18

Desktop View (with link hover effect shown)

Things I need to work on:

I need to add in a few more media queries for max screen width so it doesn’t scale too large and review my current media queries to make sure they are all working nicely. I also need to add in the footer.

Mobile View

The full sized picture and text felt like too many elements on smaller devices so by adding the picture in a circle it increased the whitespace and gave it room to breathe.

Screenshot 2015-06-09 12.49.13

Mobile view

Things I need to work on: 

From a usability point of view, I need to figure out if there is a better way to display the links on a mobile device as the mouse hover animation doesn’t work with touch.


Little Red CSS animation test

I decided to do a wee test to start playing with CSS animations which was very exciting!

Here is my progress: Little Red turns her head

I used the assets I created for my Little Red Riding test to created a CSS keyframe animation. My goal in time would be to get my CSS animation to the same stage as my After Effects version. So it loads in the web and will eventually look like this:

Little Red Riding Hood from Leanne Thng on Vimeo.

I also figured out how to get this working on Github pages.


Parallax Treehouse

The old parallax sample I wrote about a while back had a few issues I discovered when looking back over it. The main problem was that it was clipping some areas when the mouse moved around the screen. After learning more about CSS selectors I was able to fix it up and it works a lot better now. You can see it live here: Parallax Sample

parallax-test


 Personal Website

The code on my website is now mobile first. It was a bit of a confusing process changing existing CSS into mobile first CSS but it was fun diving back into it and also got a chance to tidy up some of my old code after learning some new techniques. There shouldn’t be any noticeable changes on the website itself but it should load a wee bit faster on mobile devices.

Screenshot 2015-06-09 13.06.08


Next steps

So that about covers my month or so, it has been pretty busy and all work has been done in my spare time as I am still animating for Maia during the day.

My plan is to finish off the Web design track and continue the Front End Development one, I am around 40% complete at this point. 😀

Starting a new web design project

For a personal project in Treehouse I decided to make a one page ‘About me’ website for my husband Robbie as he wanted one.

 IMG_0963IMG_0962
I started the process by looking for inspiration and collected a lot of reference in Pinterest. I just popped them in to my master Website Inspiration Pinterest board.

Website inspiration on Pinterest.

I started going down the route of having the circle avatar and really liked this kind of idea.
Screen Shot 2015-05-13 at 3.28.27 PM
I started by diving straight into the code as i wanted to test getting the circular frame. I did it by using the clip-path property. I then decided that I should block out the overall layout of it in Photoshop. It was surprising but I wasn’t really feeling it for the large screen format.
 Screen Shot 2015-05-13 at 3.27.11 PM
I stopped that idea there and tried another approach. I think the image i was using of him would work really well in large format so I gave it a shot and it did look really good. I like how the paper balls he is throwing can help frame the text and it all feels very connected.

Screen Shot 2015-05-13 at 3.27.26 PMScreen Shot 2015-05-13 at 3.27.33 PM

After a few iterations I think i like this one below the best. I thought i would like the social icons but I think i prefer the text. My idea is to also do a nice CSS transition for when you hover over the highlighted words, maybe make them fill red with white text. I was thinking i could do a small test of that in a code pen.
Next phase is to get this up and running! I may still use the circle frame for when it turns into mobile format so i might mock that up in photoshop to see how it looks!

Final Little Red Riding Hood… for now!

Little Red Riding Hood from Leanne Thng on Vimeo.

I finally got round to finishing this up. It was a great little project to work on and I learnt a lot about working in After Effects. My goal with this was to learn a bit more about 2D animation so that I have a bit more of the principles down.

Ideally I would like to take this practice and figure out how to make this kind of stuff move natively on the web as I feel like web based animation is a really exciting space and would love to learn more about it all.