Sharks Playoffs Coding Adventures

This is Sharks Territory

Pictured above is my wife on our Honeymoon in Cabo san Lucus during the Sharks playoff run in 2014. We brought along our Sharks Territory sign, but it didn’t help much with the crushing loss of that year. But now they’re back in the heat for the cup and I’ve taken my fandom and combined it with some front-end projects to create some Sharks Playoffs coding adventures.

Sharks Logo in CSS

See the Pen San Jose Sharks Logo by Anthony Skelton (@ajskelton) on CodePen.


The first project was to make the San Jose Sharks Logo in HTML and CSS. This was the first time I did a CSS art project and it took a different way of thinking to accomplish. I started with the triangle and then began to create layers of shapes to create the shark. The teeth gave me the hardest time. Using a lot of linear-gradients I was able to create the jagged look and then reverse it for the other side.

I’m really happy with how the logo turned out, but I don’t think I’ll do another project like this for awhile. The pen was very well recieved, and was featured on the front page of Codepen.

Player Cards

See the Pen San Jose Sharks Material Cards by Anthony Skelton (@ajskelton) on CodePen.

I started working with the Material Design elements and wanted to make cards for each of the 2016 roster with their stats. I started by building one card using images and stats from the Sharks website. After I had one built I didn’t want to code out the HTML for each and every card so I built a JSON file with all of the players name, numbers, images and stats. Normally I would use an API to grab this info but I couldn’t find one that had public access. Then I looped through the JSON file creating each card. Now that they’re onto the finals I hope to update this with the playoff stats and perhaps add some animation to reveal the stats.

Power Play Chomp

See the Pen Sharks Chomp by Anthony Skelton (@ajskelton) on CodePen.

When the Sharks go on a Power Play the fans with do a “Chomp” with their arms. With a 27% Power Play in the playoffs they’ve been doing a whole lot of chomping so far. I built this pen at the beginning of the Conference Finals when they took on the St. Louis Blues. The hashtage the team came up with was #SilenceTheBlues so I used this in the text that the teeth are chomping on. I built the text with variables so you can easily update the two sets of text.

For the animation I have the text moving at the opposite direction and speed of the teeth so that they remain stationary in the center. I also use a step-start timing so the text changes instantly when the teeth are fully closed.

More to come

With the Stanly Cup Finals starting on Monday I’ve got some more time to update and work on more pens. Go Sharks!

Free Code Camp Intermediate Front End Development Projects

Laptop Coding

I’m going through Free Code Camps developer program and I just finished the Intermediate Front End Development Projects. I enjoy the teaching style of FCC compared to other online learning resources. It focuses more on you finding solutions and not just changing things from the examples to find an answer. Here are the four projects that I made for the Front End Development Projects.

Build a Random Quote Machine

See the Pen Random Quotes by Anthony Skelton (@ajskelton) on CodePen.

This was a fun project to get started using Ajax. After registering for the API key and getting configured I had my quotes coming in. I probably spent more time working on the design than the functionality and went through a couple different looks. I decided to go with the fade out fade in look, and got some practice chaining events by using the complete function of jQuery’s fadeOut to make sure the data didn’t change before the text had been removed.

Show the Local Weather

See the Pen Local Weather Application by Anthony Skelton (@ajskelton) on CodePen.

EDIT: This pen broke at some point, it’s on my list to fix.

My main struggle with this project was choosing what icons to display for the current weather. I looked at a bunch of options, and probably would have gone with svg icons from icomoon, but I hadn’t signed up for Codepen Pro yet so I didn’t have the ability to host any files. I could have previewed the icon font, but since that only worked for 24 hours I figured it was best to use something else.

I found a great pen from Josh Bader  with six animated weather icons in pure css. I used the codes returned from the weather api to determine which icon would be displayed.

Build a Wikipedia Viewer

See the Pen Custom Wikipedia Viewer by Anthony Skelton (@ajskelton) on CodePen.

The main problem I encountered with this project was in my Ajax call. I kept getting the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error. After a while of hitting my head on the wall I found I need to add more header information, and declaring¬†dataType: “jsonp” did the trick.

For the design I used the Bourbon framework and added the search results as links from the Bourbon Refills Pattern Library. I liked the way I could include a thumbnail image as well as a variable chuck of text for the results.

Use the Twitch.tv JSON API

See the Pen TwitchTV Channel Status by Anthony Skelton (@ajskelton) on CodePen.

The tricky part of this pen was dealing with a nested Ajax call. The streams api returns limited information when a channel is offline. Not even the logo is available. In my success function I first check if the stream is online. If it’s not that’s when I do a second Ajax request using the same channel name but to the channel endpoint. This gives me the logo that I need to display. Since I’m separating the online from offline channels this gives me the opportunity to append them to different container divs.

Wrapping up the Front End Development Projects

I’m now over halfway through the Intermediate algorithms in the next section of Free Code Camp. I’m learning a lot of new techniques as well as good problem solving to get through some of the complicated questions. I’ll write up more about my progress as my time with the program continues.