Chris Woodley

Chris Woodley

FOP Connect

fopconnect.com

FOP Connect

FOPConnect features online content derived from the FOP Journal quarterly magazine intended for members of the National Fraternal Order of Police (NFOP).

The goals of this website were to:

  • Build an online social community to connect members of the NFOP.
  • Offer exclusive content to members of the NFOP.
  • Provide content on small screen devices.
  • Offer NFOP members a chance to win during limited time sweepstakes.
  • Sell advertising space for law enforcement related advertisers.
  • Collect opt-ins for e-newsletter distribution through website membership signup.

Full Stack Developer Role

  • Front-end development of a WordPress theme incorporating responsive layout techniques.
  • Back-end development of PHP scripts to transfer over 50,000 NFOP members from PHPFox to the WordPress CMS.
  • Back-end development of a verification system that verified users who register or login into fopconnect.com against a separate database containing valid members of the NFOP.
  • Back-end development of a reporting application that allowed membership data based on chosen criteria(s) to be downloaded from the WordPress database.
  • Performed periodic website updates and create various quarterly HTML e-newsletters.

Challenges

  • Picking the right CMS. Compared WordPress, Joomla, and Drupal. Chose WordPress because of its large community and support.
  • Learning WordPress theme development. Relied on the WordPress Codex.
  • Researching actively developed plugins that included functionality that complemented the goals of the website. Made great use of WordPress plugin repository and WPMUDEV.
  • Familiarizing myself with all of the filters and actions to customize WordPress functionality and output. Relied on the WordPress Codex.
  • Incorporating Twitter Bootstrap CSS framework into my workflow and creating the responsive theme. Understood how it all worked by relying on the Twitter Bootstrap documentation.
  • Serving ads using Google DoubleClick for Publishers (DFP) to a responsive website. Discovered I could serve ads using the Non-JavaScript method. This allowed me make use of the max-width CSS property to automatically resize the ads on small devices.
  • Learning Sass functions, mixins, variables, placeholder, extends and import functions during the development the website. Relied on the documentation.
  • Verifying member signup and logins against an extra database layer. Used various WordPress and BuddyPress hooks to query the databases and to verify users who are members of the NFOP. Used MySQL prepared statements for extra security.
  • Learning PHPFox and WordPress database schema in order to develop a PHP script that transferred existing members from PHPFox to WordPress. Relied on PHPMyAdmin to study the tables primary and foreign key relationships in both systems.
  • Managing member e-newsletter opt-ins through BuddyPress custom profile fields. The opt-in's were not managed by a 3rd party solution such as MailChimp, iContact, or Constant Contact. The solution was to build a custom reporting app that exported users based on what e-newsletters they were subscribed to. The list was then used for e-newsletter distribution.

What I Have Learned

  • Criteria's that should be considered while choosing a CMS such as documentation, user and developer community, open source versus commercial and overall acceptance.
  • WordPress theme development including the understanding of the template hierarchy, template tags, filters, and actions.
  • Twitter Bootstrap CSS Framework. After, I have finished the project I realized this framework included a lot of unused CSS which created a lot of bloat. This caused to me learn what makes a website responsive and to build my own responsive pattern library.
  • Basic knowledge Sass. I also learned that I shouldn't nest my CSS selectors more the three levels deep due to maintenance, bloat, and specificity issues.
  • Google DFP Ad server and how to serve the ads onto the website. Responsive ad units at the time were non-existent. However, I discovered a non-JavaScript method to serving the ads which allowed me make use of the max-width CSS property.

In closing, this was one of my favorite projects to work on since I was able to level up my skills by diving deep into real world problems surrounding mobile and desktop experience. In the end, I ended up re-developing the website using my own pattern library taking into account all of the things I have learned the first time I have developed it.