JavaScript

Self-Hosting a Video Using Video.js and HLS

Blog post

video playing on a mobile phone

For a project at 50onRed, I was recently faced with a new technical challenge. I was building a landing page for a video, and one of the requirements of this project was to self-host the video, rather than just uploading to YouTube and embedding on the page.

Before even starting the project, I knew that I was facing a lot of unknowns. Where would we host the video? How do you use an HTML5 Video element? How do I make sure the video will work on all browsers on all platforms? What can I do to make the video play consistently on a variety of connection speeds?

Read MoreSelf-Hosting a Video Using Video.js and HLS

CMS Developer

After completing my internship with 50onRed, I was offered a position as a CMS (Content Management System) Developer for the company.

As a CMS Developer, my responsibilities involve building and maintaining marketing sites for the company’s core products, and several viral content sites. All of the sites run WordPress, so the majority of my duties involve regular WordPress maintenance: updating core/themes/plugins, selecting and installing plugins, and assisting the content writers with any technical help.

I have also had many opportunities to dig into the more advanced aspects of WordPress. I have modified existing themes to extend their functionality or appearance, and have created new themes from scratch. An examples of these include redesigns of both the blog and careers pages of the company website. I have also developed several WordPress plugins for use on our sites. These include an AB testing plugin, an ad unit manager, an OpenGraph tag manager, and a custom integration with the Jazz (formerly Resumator) API.

In my work, I focus on making sure the sites perform well. I use several plugins to manage the minification of assets and compression of images. Our sites are hosted on WPEngine, and I take advantage of the tools they provide to help our sites perform well. I also take pride in the cleanliness of the code I write. I am regularly refactoring for readability and documentation. I choose to write PHP in an object-oriented style, which helps with organization and maintanability.

Software Engineering Intern

I joined 50onRed as part of their RedLabs internship program. The goal of the program is to provide real-world work and learning experiences by working alongside the engineering and product teams. As an intern, I worked with other interns to complete projects, and worked with engineers on core company products.

During my time in the RedLabs program, I became proficient in Python and the Flask micro-framework, as these technologies are dominant in the company’s core products. I also learned to integrate with 3rd party API’s, the best example of this being a Slack integration called MusicBot. In working on core products, my concentration was on front-end technologies. I learned Jinja templating, and leveled-up my HTML, CSS, and JavaScript skills. The company uses a number of in-house repositories for various components (such as forms, tables, etc.). I contributed to these repositories, adding new features, and writing unit tests for existing code.

I also worked directly with members of the engineering and product teams. I participated in daily standups, and was regularly assigned tickets in Jira. All of my contributions were code-reviewed, which provided invaluable feedback.

Front-End Developer

Hangify is an events discovery and aggregation app for college campuses for iOS, Android, and the web.

My work as a front-end developer for Hangify revolved around the development of the initial version of the iOS app. I joined the team after the creation of an AngularJS app, which was being ported to iOS using Ionic and Cordova. My responsibilities involved refactoring existing code for cleanliness (an example was moving inline styles throughout the project to Sass files), adapting code to work with the native iOS platform (using native iOS storage rather than browser localstorage), and new app features and improvements. Some of the features I worked on specifically included implementing infinite scrolling on the events list page, and lazy loading for images throughout the app. I also fixed bugs that were reported to us.

This was my first professional experience as a web developer, and provided a first-time opportunity to work with a development team. I learned to make use of git branching and merging, learned how to submit a pull request, took part in weekly sprint planning meetings, and regularly collaborated with other team members.

YadaGuru

Project

YadaGuru is a college application reminder web application. It is a CodeForPhilly

project, on which myself and another developer work. The purpose of the app is to help college students through the college application process by giving them regular reminders to write essays, get recommendation letters, complete applications, etc. Students use the app by supplying their application due date, and a list of reminders are generated and presented to the student, grouped by date due and category. Students can then print out the reminders or export them to Google Calendar.

Read MoreYadaGuru

The Hair Saloon and More

Project

Hair Saloon Screen Shot

This is a brochure site for a hair salon in our area. It is essentially a custom WordPress theme. I chose WordPress as a CMS, because it was an easy way to allow the business owners to update the content if needed. The header is a scan of the business card, and the colors/fonts were selected to match it. The slideshow on the front page uses the slides.js plugin.

My process of building the site has been documented here.

YadaGuru Update

Blog post

The YadaGuru team

In addition to my position at 50onRed, I have continued to volunteer for CodeForPhilly. I work on a project called YadaGuru, a college application reminder app, which I posted about before. At the time of that post (June), we were working on MVP, with a goal to release it to a group of test users to get some feedback.

During the rest of the summer, we finished building the admin portion of the app, and our guidance counselor, Katelyn, was able to finish writing all of the reminder content. We also added a Google Calendar integration, the ability to save as a PDF, and an option to export to iCal. Through the help of Katelyn, we also had a group of students from The City School ready to test out our app.

Read MoreYadaGuru Update

Not Your Mommy’s Blog

Project

Screenshot of Not Your Mommy's Blog

Not Your Mommy’s Blog uses a custom WordPress theme called ‘Tiles,’ which I created. The theme is responsive, and features my first attempt at a slider/carousel to display recent posts.

This is my first start-to-finish project for another client, though the client is my wife, so I am not sure if that counts.  :-)

This theme is built from scratch, and contains only features and elements needed by my wife. Perhaps in the future, I might modify the theme, and submit it to the WordPress Theme Directory.

Update: This theme was redesigned in September of 2016. I used the Roots Sage starter theme, which I chose because of its integration with Bootstrap CSS. The overall layout contains many of the same elements, but with a cleaner design.

I also introduced a few tools into my personal setup with this project, including SASS pre-processing, Gulp task runner, and VVV for developing locally.

Callbacks

Blog post

So, this past week I completed my first major task for Hangify. We are currently working on version 1.0 of the iOS mobile app. The app’s front end is written in Angular, and then we use Cordova platform and the Ionic framework to compile to an iOS app. One of my jobs in this sprint was to refactor storage of login credentials from local browser storage to native application storage on the iDevice.

At our sprint planning meetings, we begin by going through our tasks in Asana from the previous sprint, which hopefully have all been finished. After that, we assign new tasks to everyone for the next sprint, and assign each task a number from the Fibonacci series to quantify how difficult/how long the will be. Read MoreCallbacks

Hangify

Blog post

Hangify Logo

Ugh, was February 5th really my last post? There goes my New Year’s Resolution of blogging regularly. Well anyway, I feel like I have a good excuse this time…

The last month-and-a-half have been a crazy-awesome learning experience for me. I wanted to take some time to reflect on this time, as it has been very exciting.

It all started at the January Philadelphia JavaScript Developers Meetup. After the presentations, we were hanging out at a nearby bar/restaurant. Usually, I don’t really know anyone at these meetups, so I try to make an effort to sit with someone I don’t know, tell my story, and ask for advice. Read MoreHangify