Since I completed the Bloc front-end web development online bootcamp, I have been looking for ways to take my coding skills to the next level.
I still had a lot of GI Bill benefits remaining (about 24 months) so I was interested in using them before they expire for me in 2019. While there are a very limited number of coding bootcamps that you can attend with the GI Bill, certificate programs at universities are frequently covered by the GI Bill. So I reached out to the people in charge of Seattle University’s Web Development Certificate program and learned that it was recently approved for the GI Bill.
With free self-teaching options like Free Code Camp and low cost options like Lynda.com and Treehouse, I didn’t want to pay a lot of money out of pocket for a program. Seattle University’s Web Development Certificate is a year long and costs $16,000 in tuition, however with my 60% benefit with the Post 9/11 GI Bill, I determined that my out of pocket costs would be zero.1
The veterans department at Seattle University also told me that the program is considered exclusively online or distance learning although it requires frequent in-person labs and meetups in Seattle. GI Bill benefits (specifically monthly housing allowance) are reduced significantly for exclusively online programs so my out of pocket costs would have been thousands of dollars. However, the program director was able to resolve this issue with the veterans department changed the classification of the program to in-residence or on-campus.
I took some time to get acclimated to the format of the course which is taken through the popular Canvas platform. The content is delivered via videos, text pages, external resources like blog articles, and discussion boards. The in-person portion of the course involves labs at Seattle University and meetups with speakers from the web development field.
I attended the monthly networking meetup for the program this week, which was a presentation by a recruiter at The Creative Group. I also attended my first lab which was a meeting on campus where two instructors helped students with any questions they had. It is like office hours but you are required to attend two lab sessions each month.
There are required readings assigned and additional optional readings that is recommended to explore deeper into a topic. This week we read about the history of the Internet and how it works. The coding practice included adding HTML markup to a page of text and images. We are currently using Code Anywhere which is a cloud-based text editor and then we are pushing our changes to Github pages so that the code becomes a webpage that can be viewed online.
There is an active Slack room for the program and there is usually an instructor on there to help out with any issues. I had a question about the coding exercise and an instructor answered my question within minutes. Slack also allows students to communicate with each other in real-time which is great for a mostly online program because it makes it easier to socialize with fellow students.
I also had the chance this week to meet up with a designer and developer at Moz, a marketing software company and got to tour the office. I want to continue to work on meeting and connecting with people in the development community.
This week was focused on learning about the fundamentals of CSS and implementing some CSS properties and values to a simple webpage. We push our code to Github Pages so my webpage is available to view online at http://charlessipe.github.io/wats1010-css/.
This week we continued learning about CSS with a focus on CSS layout. There were several required readings on topics like the box model and the 8-hour Lynda CSS Layout course was recommended.
Our project this week was to add CSS layout properties and values to a basic HTML page about Edgar Allen Poe.
I attended a lab session this week at Seattle University so it was great to interact with the instructors in person. There are multiple instructors at the lab to help with any issues you come across or to answer any questions you have. The only challenge was to find parking on campus on a weeknight. The visitor lot was completely full so I ended up parking about a mile away from the classroom.
I learned a neat shortcut for selecting multiple cursors at the same time which is helpful if you need to edit multiple lines of code at the same time.
On Mac you have to enable three finger drag, which is in System Preferences > Accessibility > Mouse & Trackpad. Then you can hold option while three finger dragging to enable cursors on multiple lines simultaneously. I also learned that highlighting a code block and then holding shift and then tab will reverse tab that section of code.
This week we learned about graphics and video and I learned how to encode a webm video file to mp4 and then display it on a page with the video HTML tag. I used the Miro open-source video player to convert the video file. We also read articles about web standards and regulations that developers should keep in mind when building web sites.
My project for the week involved encoding a webm video to mp4 and displaying it on a page. http://charlessipe.github.io/wats1010-embedded-media/
There was a lot of reading this week, mainly chapters 3,4,7,8 from the online textbook Web Style Guide. We learned about information architecture concepts, wireframing, and usability.
This week we worked on styling the CSS of the CSS Zen Garden webpage. Here is my attempt at redesigning the site: http://charlessipe.github.io/wats1010-css-zen-garden/
This week the reading consisted of articles about Restful APIs and Caching. I learned why CDNs are useful since they can serve content from a closer location therefore increasing page speed. Restful APIs provide endless opportunities for combining data from different websites in interesting ways which is awesome.
This week we started the design and development of a imaginary product page.
Since students publish their projects on GitHub Pages, I was able to view over 20 examples of past student projects by looking at the Network Graph of the original Github repo and then modifying the URLs of student Github repos into a Github Pages URL.
I created a wireframe/mockup of my design of a product page for the “API Superstore” and used Adobe Illustrator CS4 since I like it more than the wireframe tool Balsalmiq.
I am involved with the non-profit Operation Code, an organization that helps military veterans learn how to code and advocates for allowing veterans to use the GI Bill for code schools or coding bootcamps. They have a pretty active Slack channel and I was able to connect with a software developer in Seattle who is interested in speaking at an upcoming Seattle University web developer’s meetup. I introduced her to the program director and she may speak at a future meetup.
This week we had time to work on coding the HTML and CSS of the imaginary product page which is coming along well. I am using the Bootstrap framework for the website and it makes it easier to get my design up and running quickly.
We were assigned to write a mini summary about a research topic of our own choosing for this week about web development culture. I chose to research whiteboard interviews and found some interesting articles criticizing whiteboard interviews as a way to evaluate candidates. Some of the criticisms are that it poorly simulates a real development environment and creates unnecessary pressure. One alternative that I learned about at a Code Fellows panel on getting hired in tech is an approach by the company Substantial. Instead of whiteboard interviews they give candidates a problem to work on overnight on their own laptop. However, many employers are still relying on whiteboarding so I have set up several white boards at home to practice.
This week I finished up coding up the imaginary product page and the final version is at http://charlessipe.github.io/wats1010-product-page/
This completes the first two courses in the program: Foundations of the Web and Intro to Web Development.
I heard there are around 40 students enrolled in the program this quarter so they had to get a second classroom for the labs.
The first project was the classic problem FizzBuzz which I’ve heard of but never attempted previously. I was able to work it out pretty quickly.
We also read some articles about choosing a good domain for the Hosting and Servers course. Our project for the course was to host our Github pages URL on our personal domain by creating a CNAME and pointing it to our personal domain. My Github pages URL is now http://portfolio.charlessipe.com/
We also learned about some useful Unix commands to navigate the terminal. There was a “scavenger hunt” which consisted of using Unix commands to answer a list of questions.
The project for the week was to build a fortune cookie webpage that displayed a random fortune when you click the button. My project is live at http://portfolio.charlessipe.com/wats1020-dom-basics/
In the hosting course we got acquainted with Digital Ocean. We set up a droplet, which is a private server, and cloned a Github repo into the droplet. You can log into your private server from the terminal using the command ssh [email protected]
The folks at Operation Code let me know about the Github Student Pack which is a collection of freebies and discounts for student developers. It includes a $50 credit to Digital Ocean which is pretty sweet.
This week we focused on learning jQuery to add interactivity to a webpage at http://portfolio.charlessipe.com/wats1020-dom-manipulation/. The project included using jQuery to show and hide text using click events and jQuery methods. We also updated a bar graph based on the number of votes by incrementing the vote count when the voting button was clicked.
In the web hosting course we learned and practiced with command line text editors like Vi and Nano which are helpful when you need to edit a file that is on a remote server like Digital Ocean.
In the web hosting course we learned about hosting a static site with Digital Ocean and hosted the 2048 game.
This week we learned about AJAX or XHR and the project was to create a Flicker image search that would append images to the page based on the value entered onto the form.
My version of the Flicker search is available at http://portfolio.charlessipe.com/wats1020-flickr-search/
We used a jQuery getJSON method to request the data from the Flicker API. It took me longer to get the grid layout to align the images since the size of the images varied.
In the web hosting course we worked on getting a dynamic PHP website served on a Digital Ocean server using Apache. The code for the website was provided so we just had to get it hosted by configuring the virtual host.
Getting familiar with adding CNAME or ANAME records is eye-opening because you could potentially create an app and host it and then add it to a client’s subdomain without having to touch their code.
In the hosting course we learned about how to install WordPress manually on a server on Digital Ocean by following the directions from the tutorial How To Install WordPress on Ubuntu 14.04.
We also started planning our final projects for the quarter and I am attempting to build an employee training tracker and a video voter app.
The weekly required reading is taking about 3 hours per week give or take. I was on vacation with my family this week but managed to get most of the reading and coding assignments done.
This week we learned about responsive design, mobile-first design, and adaptive design which involves dynamically changing the content based on the screen size. We also read up on things to consider when choosing a WordPress plugin.
This week’s project was to create a responsive layout for a card matching game.
It is connected to a Firebase database so the status of each item’s checkmark is being stored. It also calculates the total percentage of training completed with a progress bar at the bottom of the page.
There is still a lot to improve on like refactoring the code but I’m making good progress so far. In the hosting course I am building a video voter that shows a list of videos on a topic and allows users to vote on individual videos.
This week ends the second quarter and I have reached the half-way mark of the program.
I turned in my employee training tracker app with some basic functionality completed. However I haven’t had a chance to add user authentication so that people could log in and store which items they have completed. I also need to refactor the code because there is a lot of unnecessary repetition.
The video voter app still lacks the ability to store votes which I could add by updating the WordPress mySQL database. I would need to read up on how to do that. Also, I wasn’t able to pull in data from the YouTube API for the view counts. I don’t think the YouTube API provides view count data anymore or I just haven’t found the right documentation yet.
I attended a mini-hackathon at Galvanize in Seattle with three other students from Seattle University and it was a fun experience.
— Lee Ngo (@LeePNgo) June 9, 2016
The theme of the hackathon was eighties rehab and our team’s idea was a quiz to determine how addicted you are to the 80’s.
We used the SlickQuiz jQuery plugin to get a simple quiz working in a short amount of time.
We have a couple weeks before the next quarter starts so I have been working on my training tracker app. I was able to get app to show which items were checked previously and the updated progress bars based on the items completed (it stores and retrieves the data from Firebase).
You can check out the app at http://portfolio.charlessipe.com/employee-training-tracker/
In the User Science class we are reading the Steve Krug’s classic “Don’t Make Me Think” which is a pretty short read and provides a lot of really useful insights into how people really use the Web.
One insight is that people often look for the quickest solution that might work instead of the best solution. For example, most people do not read instructions but instead try using the item intuitively.
We continued reading Don’t Make Me Think and wrote a usability report of a website of our choosing. All students publish their reports on the website http://responserequest.com/ (my usability reports are published at http://responserequest.com/sipec/).
We also got a brief introduction to SASS and SCSS which adds useful features to CSS like variables and functions (called mixins).
This week we learned about deploying our very basic web application so it is available online through Github Pages which is free. We are using the online book “Introduction to Building Webapps” which walks you through how to deploy your application to Github Pages.
My application is live at http://portfolio.charlessipe.com/dev-env-test/
We also read a couple more chapters of Don’t Make Me Think about user experience testing where you observe people using a website and identify issues that they experience. We were assigned with observing three people using a site and writing up a report on the results of the test.
In the UX course we continued reading Don’t Make Me Think which covered concepts like mobile usability and website accessibility.
The monthly speaker meetup was on Tuesday and the speaker was Jeff Meyerson, host of the Software Engineering Podcast. The talk was titled “You Are Not a Commodity” and it was a really interesting discussion about how corporations tend to view software developers as commodities and how there are increasing opportunities for developers outside the corporation. If you are interested in this topic, Jeff discusses it on this episode titled 10 Philosophies for Engineers.
This week we worked on bootstrapping an Angular application with Yeoman, Grunt, and Bower. We used Grunt build control to deploy the app online at Github pages: http://portfolio.charlessipe.com/angular-app/#/
We followed the directions from Introduction to Building Webapps so it wasn’t difficult to get a basic Angular application started and deployed online.
In the UX course we focused on learning about accessibility principles which included tactics like adding image alt tags to images and including a text transcript for videos.
On the side I started working on an open source project at Operation Code. I worked on an issue and committed some code changes to the Github repo at Github.com. I then made a pull request and got the changes approved and merged.
Operation Code is built with Ruby on Rails which I have some very basic knowledge of. However, as a web application framework there are some commonalities with Angular application development. I was able to clone the repo to my computer and then serve the Rails app locally with some help. I had to install Postgresql onto my computer and then use some rails commands like bundle install, rake db:seed, and thin start –ssl to get the app running locally. One of the speakers at the Seattle University Web Developers Meetup suggested working on open source projects to show your abilities to potential employers.
This week we worked on adding data into our Angular app with RESTful APIs. We used the $Resource service that is built into Angular and generated a factory with Yeoman using the “yo angular:factory namehere” command.
I started out trying to pull Yelp rating data into my application but had some trouble getting the API request accepted due to a invalid signature error. So I decided to use the Google Places API instead and that worked right away.
It is currently displaying the business rating and the latest reviews from Google Places.
Here is my Angular factory:
I’m making progress on my customer survey application with Angular. I have set up some routes, or different views for different URLs.
I added Firebase and Angular Fire to my app with Bower and created a Firebase object in my main controller so I could add information to the database when someone submits the survey form.
I had a front-end developer interview this week and spent a good amount of time researching the company and familiarizing myself with Shopify and their liquid templating language. The interview was with the company CEO and I think it went well although they are looking for someone with more experience for this position.
I’m reading the book Grit by Angela Duckworth about the importance of long-term effort in achieving goals. Grit is valuable in web development because you have to stick with it over the long-term and not give up when setbacks inevitably happen.
In the UI/UX course we went through the free course, Fundamentals of Digital Analytics from Google Analytics Academy which provided some useful information on how to set up goal tracking and marketing funnel analysis in Google Analytics.
I have been able to make some good progress on my customer feedback survey application at http://portfolio.charlessipe.com/angular-app/.
I was able to push the value inputs from the survey form to the Firebase database and save the values in Firebase. I was also able to get data from Firebase and display it on the dashboard page.
I wasn’t sure why the data from Firebase wasn’t displaying on the page but I figured out that the page was probably loading the $scope.businessName before it was updated from the data from Firebase. I used $apply() to update $scope after the Firebase data was loaded.
I’ve made good progress on my survey application and have added a lot of functionality to the app at http://portfolio.charlessipe.com/angular-app/.
I added a nice banner image to the homepage from Unsplash.com. Unsplash provides a ton of professional quality large images that can be used for free.
I added email authentication using Firebase’s authentication feature. Users can log in with one of the test email and password combinations ([email protected] and popcorn84). I manually created the test logins in the Firebase graphical interface for now.
I like working with Firebase and I haven’t had much trouble getting it to work. There was a major update to the product so sometimes it is unclear what code works with the old version and what works for the new version. There can also by async issues because the page loads before the data has been received from Firebase which can be addressed by utilizing promises.
Currently you can log in on the login page with one of test logins (the test logins are listed on the homepage). When you log in, the alert box at the top displays that you have logged in. The user identification number (UID) is then cached to the $scope variable as $scope.currentUserId. The application checks the $scope.currentUserId and displays the matching content for that user on the dashboard page. It also uses the $scope.currentUserId to switch to the current Google Place ID and pass it to the Google places service that makes the API request and returns the latest reviews from that business to display on the dashboard.
I also added a logout function so the user is logged out when the “Log Out” button is clicked on the login page.
The survey page requires that the password match in order to submit the form. If the correct password is not entered, a red alert box displays that states the password is incorrect.
I’ve made it through 75% of the program and have just one quarter left.
This week was spent polishing up my application and sharing it with my classmates on the discussion page.
In the break between summer and fall quarter, I traveled down to San Francisco for the Github Universe conference. I received a free ticket from Operation Code and met up with the founder of the organization, David Molina.
The conference was a great learning experience and I met several developers and six other veterans learning to code from the Operation Code organization. On the second day David gave a talk on how conference attendees could help the organization by volunteering to mentor a veteran.
The final quarter of the program has started and the first lab was on Tuesday where we did brief introductions to meet our fellow students and new instructors.
One of the new students offered to create a logo for anyone that needed help and she designed an awesome logo for my Ranked Blogs application that I built during the Bloc coding bootcamp.
We are starting to work on our portfolios for the program by creating a personal statement and planning document.
The two final courses are Professional Practice and Web Development Capstone Project.
In the Professional Practice course we started working on a group project for a Poetry Magazine website. It is a simulated work environment project to practice collaborating with a team.
I already had an idea of what I wanted my portfolio to look like and found a Photoshop template on Themeforest to use as the design. I used Bootstrap for the CSS framework and the banner background image from Unsplash.
This week we learned about writing user stories for our imaginary group project to build a poetry magazine website.
We also worked on creating wireframes and planning documents for our professional portfolio.
This weekend I attend the T-Mobile IoT hackathon and it was a great experience. I was able to work alongside experienced developers all weekend and we were selected as a finalist. There was also a lot of free food. I highly recommend hackathons for students looking for employment because it gives you an opportunity to work with people who may want to recruit you to their company or team. I’ve heard of developers getting job offers from simply attending a hackathon.
Our project is called Nahm and it measures water input to an appliance like a shower or sink and tracks the water usage in the web application and iPhone app.
I put the finishing touches on my portfolio which is live at http://portfolio.charlessipe.com/ including adding some more projects to my home page.
I also worked on my hackathon project by adding some charts with Chart.js that update automatically when the Firebase database is updated with new water data.
In the professional practice course, I collaborated with my team to make time estimates of our user stories for our poetry magazine website. We entered our estimates into a Github repo wiki which is very easy to use.
My hackathon team ended up winning first place at the T-Mobile IoT Hackathon so it ended up being a really great experience. My team presented our project at the Seattle Interactive Conference on Tuesday and it was cool to see the Seattle University program director, Shawn attend the presentation to show his support.
This week I worked on putting together planning documents and wireframes for my final capstone project, Code Coach.
The goal is to create a directory of coaches, organized by category, who can help developers reach their goals through pair programming and mentorship.
Code Coach solves the problem of finding a good coach who can help a developer improve their skills by providing guidance, feedback, and motivation.
In the professional practice course, we worked on creating issues in Github for specific tasks to complete during our first sprint (using the Agile Scrum methodology).
This week I dug in and made progress on my Angular application Code Coach.
The tasks I accomplished this week were:
1. Setting up an Angular and Bootstrap scaffold with Yeoman.
2. Setting up routes using Yeoman.
3. Deploying to Github Pages with Grunt Build Control
4. Adding the Firebase database
5. Adding Firebase storage in order for users to upload a profile picture
6. Created category pages to display coaches in a specific category from the Firebase database using ng-repeat and Angular filters.
If you have any questions about the program, I would be happy to help. My email is csipe84 at gmail.com
1. The Post 9/11 GI Bill covers 60% of tuition for me and I receive 60% of the monthly housing allowance (MHA) which for SU is $1975 per month. The program is 10 credits per quarter or about 83% of full time, so my monthly housing allowance is about .83*.6($1975) or $983.55/per month. I should also receive a book stipend, which I estimate to be .83*.6($1000) per year ($41.50/per month). I am responsible for 40% of tuition that is about $533.33 per month. MHA + Book Stipend is about $1025.05 per month so I should be in the positive by $491.72 per month. However MHA is not paid when class is not in session so MHA is reduced in any month where there are days without class (e.g. spring break). It can be complicated to figure out how much your actual school costs will be when using the GI Bill, especially if you have less than the 100% benefit.