Simon says…go!!!!

Just a quick update from my post yesterday – I did finish it! Very chuffed with myself. Testing against the master array was a lot simpler than I expected, so too was passing over control. I managed a couple of breakthroughs late last night and this morning which meant I just needed to tidy up a few points such as a winners message after level 20 and putting in some audio.

I didn’t like the sound of the beeps freecodecamp supplied so I tried to find my own effects.  I found one resource with a few sound effects from star wars, so I thought this was too good an opportunity to turn down, particularly with a Chewbacca sound effect! However, when Chewy kicks off 3 times in a row, you need a mute button, so I had to put that in!

Anyways, short and sweet – here’s my codepen (I’d recommend you look in full-page view btw!).  3 more algorithm challenges and I complete the front-end certificate!

Tic-Tac-Toe, Simon says…no. FreeCodeCamp

The roller-coaster continues…

I’ve had less time to sort my projects this week and while I completed my tic-tac-toe project, I was unable to get through all of the Simon game challenge.  To be honest, even with an extra day holiday tomorrow I think it’s a stretch, this rabbit hole looks to be a deep one!  Here’s my freecodecamp weekend:

Tic-Tac-Toe

Deceptive! I looked at this challenge and thought it was something I could definitely get my teeth stuck into, and with my Maths background I thought it would be easy to implement a minimax formula later to have an ultimate tic-tac-toe game.  So – just sort the rest out first, get a basic comp player up and running and solve later right??  Not so fast there! This challenge brought up some new problems that I hadn’t considered fully from the outset.

My biggest issue was trying to run before I could crawl. I’ve always looked at my code thinking “how can I cut this down to be more eloquent from the beginning”. This thought was particularly prevalent coming into the challenge as I spoke to someone in the industry earlier in the week.  They mentioned a site called Codility, where you can test your baseline skills and see how well you compare against others in the field.  The first challenge they have is a refactoring test which, tbh, I struggled with. I also know that GitHub is the place everyone goes to judge your coding ability, and if my current content was there it would be a rugged landscape of if & else statements where DRY is considered and thrown away. So I wanted to really challenge myself and write better code from the off, especially with the focus of not repeating myself….that didn’t go so well.

This was all to my disadvantage. I’ve read it before though, so it’s my own fault for not paying attention – solve the problem first, refactor later.  I missed this important step and ended up really struggling to get my game to work straight away. This cost me some time in getting everything finalised, but taught me an important lesson in the meantime.

It was good to learn simple things like passing over control to the computer and vice versa. Dialog boxes were a new and annoying phenomenon to me. With codepen constantly refreshing, and the box reloading, that got tiring really quickly.

Looking over my code now as I write this blog, there are so many obvious refactoring opportunities which I think “why didn’t you do that in the first place”, but I think I should just refer to my earlier comment!  I’ve decided that after my front-end certificate is over I’m going to go over my code from all my codepen challenges and refactor as much as I can. Then maybe later on in my journey I’ll refactor again as my knowledge grows and I spot new ways to improve my code. But for now, lets get this finished!

CSS still eludes me. Man I need some design lessons! It’s not where I see my skills lie and it’s not something I particularly want to master, but I do desperately need to gain some basic knowledge on this topic!  Here’s my codepen:

Simon Game

I haven’t had an awful lot of time on this one to be honest. To date I’ve set up my buttons, sorted the css and click functions to make them appear to lighten up for a small period of time. Everything was going pretty well, until I needed to implement a delay between buttons getting called.  My last blog post talked about the ups and downs I felt as I completed my earlier challenges and this was no different. I managed to call a pattern from a master array and send that to the button functions which I felt pretty good for, and then instantly I realised that an array of more than 1 just wasn’t getting called. I read this post about the issue which basically says that my code waits for no man, and just fired off all buttons simultaneously, even though I had a setTimeout call involved.  Probably an hour or so in and out of the issue and then reading other blog posts, I sorted out some code, still struggled, then one typo and boom!  Problem solved.  I mean, I still don’t get why it wasn’t working before and now it miraculously does….but still, it works!

Confused girl

Now it’s dawned on me that I need to consider how I’m going to pass control to the user, test against the current pattern, give feedback, etc, etc.  This one’s going to be the toughest one yet, and that’s why I don’t think I’ll be able to complete it all by the end of tomorrow.  But I’ll give it a good go!

If you’ve read this far, I thank you for that and I’ll pass on some knowledge I’ve gained from this weekend – Janis Ian – At Seventeen – awesome chill out coding tune. Coupled with the Girl from Ipanema and I’m set.

Toodles.

My freeCodeCamp weekend

This weekend has given me some of the mental highs/lows that I’ve read about for Code Newbies and it has enforced a belief in karma that I never once thought about.

I started the weekend excited to get through as much of the remaining freecodecamp challenges as possible, eyeing up the two first advanced projects on the front-end course.

Javascript calculator

Friday night saw me start FreeCodeCamp’s first advanced project – the javascript calculator.  Quincy Larson warns at the start that this will take some time to grasp what’s going on, and initially I didn’t have this struggle, completing the majority of a basic MVP in a relatively short space of time. Feeling good, I posted as much on my twitter account.

The instant I did this, I went back to my calculator and discovered I couldn’t multiply by anything higher than 9 – my model immediately invoked a calculation on the press of the first number after an operator. This issue took me about an hour to figure out the solution for, and a similarly proportionate amount of motivation with it. I left my project for the night with the aim to solving my clear and decimal point buttons for the morning.

Saturday morning proved to be the main frustrating portion of the weekend. Not fully appreciating the brief of the project, I decided to construct a clear entry button for my calculator. Panic then sets in as think I need to start again from scratch as I try to envisage creating a master array that details every point in the process so that the last entry can be popped off, then having to reduce the array to summarise the calculation.  After a review of the video I realised that both clear buttons had the Clear All functionality, which I had already done. Now…this feels like the cheap and easy way out, and maybe one day I’ll revisit my calculator to incorporate this feature (not likely), but for now, I ploughed on.

For my decimal point I decided include a period as a string first and then calling a Number() method to the string. In hindsight I don’t fully know why I thought this would work – it didn’t. The hardest part was seeing my console display 2.3 while my calculator displayed 23. I felt like Happy Gilmore telling his ball to get in his hole.

Happy-Gilmore-Adam-Sandler

I once saw a TedTalk video that discussed spatial thinking and how a child chess prodigy would walk away from the board, look completely disinterested then come back with an amazing move. Having his brain wander he was able to clear his mind and think more clearly. Well…I went to the shops to buy some toilet roll, came back and solved my issue in 2 mins.  Don’t know how I did it, I think I might have blocked this whole process from my memory, but maybe I should give chess a go???

Rounding it all off, the functionality of my calculator was pretty sound (I hope!) – css still leaves a lot to be desired, so much so that I think I need to do a proper css course soon. How can centering on a page be so difficult?!

Pomodoro Clock

On the crest of a wave I decided to dive headfirst into the pomodoro clock Saturday night, probably to my disadvantage – I tried to plan and scope out exactly how I wanted to approach this but:

  1. I thought it was pretty simple; and
  2. I’m pretty hyped so minimal planning needed, lets crack on!

Yeh, that wasn’t great.  I started really confident, plodding along getting everything sorted, and really got the basic countdown finished, allowing for different states that you may be in (e.g. starting a new timer, starting from paused, finishing the timer). But then I hadn’t allowed for the start of the break period. And this is where my struggles returned.

The more and more I dug into the rabbit hole I realised I was further and further away from the end. In a blind panic I decided to completely rehaul my javascript a good couple of times. How can something so simple be so difficult for me to code? I realised that as I hadn’t planned as much as I should have on this occasion then I just got myself tangled in my old mess of code. So a final restart was needed and this was much better. I realised I wanted to set one timer function which covered both states, rather than creating two separate ones and jumping from the two. This last design was a good one, and my countdown easily flitted between active/resting states. Feeling pretty good…then karma tapped me on the shoulder. As soon as I paused my counter, I get some output that was completely wrong. I started the counter again and more weird output. Apparently this iteration of the paused state didn’t carry over so well.

So here I am. Having seen these ridiculous states I decided to summarise my coding weekend, partly to share my experiences (which overall are very positive) but also, selfishly, in the hope of getting some more grandmaster inspiration.

My weekend has gone and I’ve sat 12inches away from my monitor for the majority of it. But I’ve thoroughly enjoyed every minute and I’m looking forward to next weekends’ challenges already. It’s easy to say this now that most of my problems are resolved – had I written this at the decimal issue this post would be a whole lot bleaker! Over the rest of the evening and this week I hope to finalise my pomodoro clock so that I’m ready for the tic-tac-toe game I hear so many Code Newbies attempt.  That leaves Simon’s game and 3 more algorithm challenges before I complete my front-end certificate.  Looking forward to that day!

Much Code. Many typing. Wow.

Wow indeed.

This weekend saw me have a complete coding binge on freecodecamp.com. Whilst I was able to log on during the week, the small amount of time after work and lack of brain function meant I found my time was best spent on smaller algorithms and focusing on one/two problems a day. But this weekend saw an assault on the outstanding intermediate projects which I needed to tackle.

Wikipedia Viewer

Firstly I completed a simple wiki viewer which can be found below:

I enjoyed this challenge. It taught me how to show outputs in the form of bullet points, using a fade in effect and most importantly – successfully using an API call after the nightmare of the random quote generator! I can’t describe how much of a relief it was finally seeing and working with some JSON data after all of my previous troubles.

I think given the extensive use of javascript in the algorithms sections/other projects I’ve become much more comfortable with that language. My lack of css knowledge is showing in the design of my projects, so I’d like to get more experience there once I’ve completed the front-end project. Maybe the daily css challenges could help me in this area, but I’m far more comfortable working with javascript at the moment. I particularly enjoy writing a function to perform correctly for one iteration and then extending for further cases. I find this method makes it much easier to develop as I work with one case at a time, making sure it’s in the format I want and then extend for more iterations.

I did however struggle for a solid hour and a half wondering why my anchor wasn’t updating from my javascript. I did a few things and was outputting the anchor ref which stated it was updated, but whilst clicking through it would always revert to my original codepen site, meaning the link wasn’t right. Turned out after 1.5 hours it was due to a premature closing anchor tag before I closed a bullet. 1.5 hours man…. 😐

Overall though this was a cool project and it taught me a lot. Mostly about anchor tags and closing them properly.

Twitch API

Well…sort of twitch api. According to the website you’d need an API key for this and for security reasons freeCodeCamp are suggesting using dummy data. This was kind of a shame as it felt like a cheat, but the most important thing was getting the website up and running with what we had to work with.

My proudest moment with this project was my dynamic bullet points. There is no way to make that sentence sound less sad. For me I felt that as an important mark and something that I’ll likely use more often in the future. I think this was quite a straightforward challenge for me in the end, most likely due to the lack of API knowledge required. Working with a data set already set up was far easier for me and I was able to program up my javascript according to that data.

It isn’t the prettiest and I cold have spent more time trying to get it to look nicer but I was very happy with my delayed fade in/out functions. That was a cool little trick for me to learn. I’ve still not figured out the scroll into view method but I’ll be sure to give it a go in one of my next projects, or when I refactor these ones when I tidy up for my portfolio site.

This project gave me a lot more confidence in what I was doing and showed me I was learning a lot. But still it showed my weaknesses lie in presentation. I remember a primary school teacher telling me that very same thing…

Random Quote Generator

If I was better at wordpress, I’d figure out how to play operatic singing voices in the pits of hell type music when coming to the RQG section. This was definitely my nemesis. After having so many issues trying to get any data from the forismatic API I gave in and went for something else. People told me it was a CORS issue and no matter how much I read up and asked I still had no idea why it couldn’t work. I went with another API and it was ready straight away. This was so frustrating. I had people say it was the browser I was using, other people got it to work, others still couldn’t. But mine was never working no matter what I tried. This project was started a while before the others and could have easily derailed me from learning code altogether – i was THAT frustrated. Fortunately I persevered and got something I’m pretty happy with. Again, css has proven an issue, particularly when changing browser sizes. I’ve put everything in a “container-fluid” div which I thought would help but apparently not.

In full view I generally quite like the look of it. I don’t like, however, how my buttons move with the size of the text box. But the functionality is there, particularly with the tweeting out which I was quite chuffed with.

Overall the most important thing this project taught me was not to let a fricking API stand in my way! Man I’m still so p*ssed…

Overall

Like I said I’ve learnt a lot. I like to think that my maths background has helped in how I structure my code in each iterations of a for loop, e.g. linking text to a parameter to have dynamic values. I think I have a good grasp on how to tackle problems, my issue is then putting them in a way that looks good! I’ve got 8 algorithm challenges and 4 advanced projects to go through before I can get my front-end certificate which I’d be extremely happy to get. The advanced projects look cool too, bringing in some games and audio to the programs so I’m looking forward to tackling these next week.

It’s been a while

Hello!

My last blog post was done over a month ago and for the majority of that period I haven’t able to code all that much.  I have some very intense exams in April each year and so all of my free time is taken revising.  However over the last week I’ve managed to get back to where I want to be.  The free time gained from exams has gone straight into coding and, this weekend in particular, I’ve seen massive gains in knowledge/exposure.

FreeCodeCamp

This is the main source of learning for me now on.  My last post covered my basic Tribute page which was the first project in the freeCodeCamp basic front-end project portion.  The second task – my portfolio page – was put on hold as I felt that I didn’t know some of the key aspects required to actually complete it.  In hindsight I was wrong.  In the end I’ve come back to it and you can check it out here:

This is very simple at the moment, but covered the basics.  I had a few issues, mostly around positioning elements in the centre of the page, particularly on the click of the Nav bar as the section would always revert to the top.  However I’ve gathered some feedback on the 1st iteration which brought out some bigger problems, in particular how to scroll through the page rather than jump on the click of a link. This is still an issue at the moment however I will definitely be coming back to this project in the future as I look to implement much of the code for my full portfolio page.

In addition I completed the javascript and basic algorithm sections.  I enjoyed this as it was a good problem solving portion and it taught me much about how to address problems, formulate solutions and then document them in the code.  There were a couple of tricky challenges early on, but then I really got a head of steam and got through them at a quick pace.  So I was feeling pretty good about myself….

…until I met the JSON API intermediate front-end projects.  Man I can’t get this sorted.  I’m at the random quote generator and can’t get my data from the random quote API.  This has been my issue today and I just can’t seem to figure it out.  In the end I’ve abandoned it (and the other API projects) to go onto intermediate algorithms.  I know I should stick out with what I’m struggling with however I’ve been on that one API issue pretty much all day, I feel like I need to get away from it for a little bit and keep progressing.  Tomorrow I’ll take another look and see what I can do.  I bet it’s a semi-colon…

semicolon

Tech Events

It’s been a really intriguing week for me following my exam as there have been a lot of tech events in the city and I’ve managed to experience some of what’s out there.  I managed to get myself to see a coding event where contestants were shown jpeg of a famous website which they had to recreate in 15 mins.  This was intense!  They were all really impressive and showed a great talent for what they do.

I was also able to get myself along to a coding for beginners class where they brought you through the basics of Ruby.  We created a couple of very simple games, including a form of hangman.  It was really good to see and I was happy that I followed everything along and nothing went over my head.  This gave me encouragement to carry on with my studies and get as much done as possible.  And I look to continue this over the coming months.

The week also had some drop-in sessions where you could attend talks by local companies and take a tour of their offices.  For me not working in the industry this was very interesting.  It’s such a culture shock compared to my own industry which is much more strict/rigid/boring! It’s also really good to see how the professionals address problems they’re having and the experience gave me some good tips on how to progress (mostly about comments in the code!).

As previously mentioned, next on my list are the API projects. I really need to produce a good quality piece of work rather than just completing algorithms!  I’m on around day 9 of my 100 days of code challenge and in that time I’d like to complete the front-end portion of freeCodeCamp (I’m currently around 1/3 of the way in).  If I complete more then even better. If I can get through the first couple of APIs this week/weekend with a few more algorithms, then finish the rest off the week after I think I’ll be happy.

Onwards!

*PS If you’ve taken a  look at my codepen or have any advice on anything coding related I’d love to hear it!  Man I need some help…!