jQuery

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.

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.

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.

Lingo and Explorations in JavaScript

Blog post

A screenshot of the project Lingo

One of my favorite game shows from back in the mid 2000’s was the game Lingo. My wife and I used to occasionally watch the show, and would play each other on the online Flash version. Soon after this, the show went off the air, and eventually the game disappeared from the Internet. My wife and I continued to play Lingo in paper-and-pencil format, usually on the back of diner place-mats.

For those who have never played the game before, here is the general idea: You have to guess a five-letter word to which you are given the first letter. After each guess is made, you are told whether each character that you guess is: 1) in the word, and/or 2) in the correct position in the word. Read MoreLingo and Explorations in JavaScript

Lingo!

Project

A screenshot of the project Lingo

This is a clone of the game and game show Lingo. It was my first attempt at creating a game web app. It was also my first attempt at applying some Object Oriented JavaScript concepts that I had been reading about in the book Eloquent JavaScript.

Also being the first major project I completed since launching this blog, I documented the process of creating it. You can read more about my goals for the project, and my process of achieving those goals here.

How I Got Here – Part 3

Blog post

After creating a few projects for others, I decided it was time to create a website for myself. I was unknowingly going through a bit of an identity crisis at the time. I hadn’t figured out the difference between a web designer and a web developer. I guess I always assumed that both jobs were done by the same person.

I also had thought about the possibility of freelancing at this point, so I purchased the domain derricowebdesign.com (which now just redirects to this blog). I then created my fourth project, a landing page/personal business site: D’Errico Web Design:

Read MoreHow I Got Here – Part 3

The Rhythm Randomizer

Project

The Rhythm Randomizer Screenshot

The Rhythm Randomizer is a web app to aid in learning to practice and sight-read musical rhythms. Users select various options, such as duration, time signature, notes, and rests, and the app will randomly generate a rhythm within the specified options.  The generated rhythm can then be clicked to generate a new rhythm with the same options.

This project is my first web app.  I created it to help teach my students at my job as a public school band director. The original version of the app was created in a weekend in April 2014, using nothing but HTML, CSS, and JavaScript. In August 2014, after learning PHP and MySQL, I redesigned the website to move the logic and data to the server side. Javscript (and jQuery), are run client side for AJAX requests and UI animations.

In the future, I plan on adding more options for users, clearer UI elements to allow the user to better use the app, and a feature to allow the app to remember options from one session to the next using both session cookies, and a user login account.

D’Errico Web Solutions

Project

D'Errico Web Solutions Screenshot

This project serves at the first iteration of my personal landing page on the internet. The project features sections about me and my work, as well as a contact form. Sections are presented on cards, which slide up when navigating to a different section. There is also a project viewer with similar jQuery animations.

Included in this project are several firsts for me, including building a responsive site and jQuery animations. The project was originally hosted at www.derricowebdesign.com, which I had purchased before I figured out that I was more of a developer than a designer.

This blog is meant to replace the project, which will eventually be hosted on a subdomain for posterity’s sake, and the original domain will forward to here.

Woodstown High School Marching Band Practice Page

Project

Woodstown High School Marching Band Practice Page Screenshot

This is a web app that assists the students at a local high school marching band in learning and practicing the music for their field show. A user selects her instrument part, what she want to hear (her instrument, all instruments, all instruments excluding her), and whether she would like to hear a click track. A mp3 or ogg file is then fetched matching the specifications selected by the user. The user can also print a PDF of the music for the selected instrument.

This was my first attempt at using PHP and AJAX together, as the appropriate sound file is fetched with an AJAX call and then displayed in an HTML5 audio element.

I also happened to be the music arranger for WHS’s field show for the season, and included the practice page along with the arrangement. This is a one-off project specific to the 2014 field show.