Ben Mulford
  • Home
  • About
  • Contact
  • Portfolio
  • Home
  • About
  • Contact
  • Portfolio

Be Curious.

Fun Star Wars Code Challenge

1/23/2019

 
Picture
A friend of mine sent me a message last night showing me a code challenge for a job application/interview for a position that he's trying for at his current company. It involved Star Wars and using a JavaScript framework, so needing the practice, I thought, "I can do this and it'll be fun". So I did. You can find the challenge requirements and my solution code on my GitHub page (the requirements are in the Readme if you want to give the challenge a go yourself). The result of my efforts is visible here: ​https://thedevbc.github.io/starwarscodechallenge/. Let me know if you think I fully met the requirements.

I chose to use Angular partly because that's what I know right now, and I didn't want to take a lot of time learning the basics of something else. I also wanted more practice with Angular and learn some more of it's features/capabilities and things that I usually don't mess with, one being Angular Material. For work, I build components in Angular, but we have our own custom theme, so I'd never played around with Angular Material much. This seemed like the perfect opportunity.

What I Learned

Here's some thoughts about my experience of this exercise:
  1. Angular CLI makes getting an app up and running pretty quick and easy.
  2. NPM (Node Package Manager) makes adding other people's code to your project (and managing that code) a breeze. Type a one line command into terminal, and oila! you have what you need. In this case, I just followed the Angular Material guide to add Material Design components and theme to my project. Once an app is created, and you add some packages, npm will make sure you have dependencies by simply running 'npm install' in the app's main folder. So if you download the source code to Angular app, run 'npm install' in the respective folder, and it will make sure its dependencies are there for you to work with when developing. (Note: learn the difference between 'npm install' and 'npm update', and how package.json works. If you're not careful running npm commands can mess things up.)
  3. The first issue I had was getting things centered on the page. The horizontal centering wasn't too big of a deal, but I had to use some Google Fu to get some guidance for the vertical centering. I decided to use Flex layout. My favorite guide on flex is https://css-tricks.com/snippets/css/a-guide-to-flexbox/. That's a good rundown of what you need to know when laying things out with flexbox. If you want something even 'better' than flexbox, learn CSS Grid layout. Both are great for responsive design, the difference is flexbox works in one-dimension (horizontal/vertical) at a time, while Grid allows you to work with both dimensions (to do this with flexbox involves nesting elements).
  4. Angular Production build - I hadn't deployed an Angular app before, so this was a new process for me. Angular CLI is helpful, and angular.io has the guides you need.
  5. Publishing to GitHub Pages - the deployment guide at angular.io includes a section on deploying to GitHub pages, which again, Angular CLI to the rescue!
  6. Visual Studio Code is awesome! I love working in VS Code (or just Code to many).
    1. It has a built in terminal feature that makes using NPM and Angular CLI quick and easily accessible.
    2. It integrates with Git, so putting the code on GitHub was a breeze (again, Angular CLI helped too, when I created the app I noticed a message about initializing git). I just added a new repository to my account using the GitHub website and GitHub provided a couple of commands to run in my terminal to upload my code to the repository (after you create a repo, there's a section called "...or push an existing repository from the command line" that has the info).
    3. There are a ton of helpful extensions for Code. (Maybe I'll list those another time, or just search for 'best vs code extensions'.
  7. I like Angular's compartmentalization. I like how my html, css, and javascript/typescript are in separate files instead of all together in one js file. Eventually it all ends up in a js file, but for development I like this separation of concerns. Maybe I'm doing React wrong, but my experience with a React component is that it's all together, which was hard to get used to after working with Angular.
  8. Angular Material - I need more time working with it. This project required very little use of it. I need to figure out how to better use the components and add colors. One addition I might work on is adding a field and and Add button to add movies to the list. Whatever your opinions are of Material Design, it's a clean, modern look, which seems to be preferable at the moment. Using a library like this is good for a consistent look throughout your app.

Have Fun!

It was a quick little fun project. It took me about 2 hours to complete (not including writing this post about it). If you have questions or feedback, let me know. I'm happy to help. This is a great way to get some practice with the JavaScript framework of your choice. In fact, you could do something with a Harry Potter theme if that's your thing! (Or Marvel movies!)

Happy coding and stay curious!

    About Me

    I am a Software Developer, a career shift made in 2018. So far, I have experience with C# .Net and Angular. I continue to let curiosity lead me into learning new technologies. I plan to share what I learn along the way about technology and personal/career life. Previously, my vocation was United Methodist pastor. So in addition to coding, I'll share about theology, the Church and The Bible. I also enjoy running, music, and I'm a deeply committed father and husband. Maybe my experiences will help you. I know it helps me to share.

    Archives

    January 2019
    May 2018
    March 2018
    February 2018
    May 2017
    March 2017
    January 2017
    June 2016
    May 2016
    March 2016
    February 2016
    November 2015
    September 2015
    August 2015
    June 2015
    May 2015
    April 2015
    March 2015
    November 2014
    September 2014
    March 2014
    September 2013
    August 2013
    July 2013
    June 2013
    March 2013
    February 2013
    January 2013
    December 2012
    November 2012
    October 2012
    September 2012
    July 2012
    June 2012

    Categories

    All
    Angular
    Atonement
    Attractional
    Baseball
    Beatles
    Camps
    Code
    Communion
    Confessions Of A Pastor
    Election
    Evangelism
    Goodbye
    Javascript
    Kingdom
    Leadership
    Missional
    Missouri Annual Conference
    Moving
    Prayer
    Questions That Haunt A Pastor
    Royals
    Running
    Sent
    Sports
    United Methodist Church
    Vision
    Voting
    Young Adults
    Youth

    RSS Feed

We keep moving forward, opening new doors, and doing new things, because we're curious and curiosity keeps leading us down new paths.

- Walt Disney

Read more at: https://www.brainyquote.com/quotes/walt_disney_132637?src=t_curious

Contact Me