Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Dietitian by Design


DEMO: http://drewcodes.io/bwc/

Background

This was a custom commissioned piece for a local NYC based dietitian. The dietitian was looking to brand herself and create a bit of web presence since she is relatively new to her field. The site itself was meant to be coded and installed onto a WordPress installation, so everything was pretty much built from the ground up.

The Focus

Seeing that the website had to be user friendly, and the client is very much unfamiliar with WordPress tools; I opted to build a template that would add user-friendly content editing tools. The site had to be simple, easy to navigate by the client and maintainable for the near foreseeable future.

The core design this time was done entirely on paper, rather than the usual graphic software. I spent some time looking through a selection of royalty free photos (the client wanted to use her own images but could not immediately supply them) and framing out the vibe and feel of the site. I had the client put together a collection of pictures, colors and words that would act as a virtual “inspiration board” that would allow me to really focus on building a delivering a feel that matches her tone and expectations.

The Code

The template was then coded using HTML, LESS (compiled into CSS), Javascript, jQuery and PHP. A custom script was also used to scale and resize the entire site proportionately regardless of browser width. This allowed the site to render and display across various devices and screen sizes (anything wider than 500px) and keep media queries down to a minimum.

For devices under 500px, one set of media queries was used to stack and relocate content, sections and ordering. Since the custom script maintains the site’s ratio aspect; I didn’t have to worry about the possibility of dealing with other possible device sizes. This kept the stylesheet lighter, didn’t require an external library like Bootstrap or Semantic UI, and still provides a great user experience.

Extras…

The site is deployed from a front end perspective, so it did require some additional plugins to complete the additional requested functionalities that the client requested. The contact form is added on using Contact Form 7, and a calendar scheduling plugin was set up for the client’s booking and scheduling of services. While it is completely possible to build a form on the back end; it wasn’t feasible due to the client’s budget and minimum needs. Hopefully down the road, I’ll be able to create something for this site.

Restaurant Website Redesign


DEMO: http://drewcodes.io/chowhouse

Background

Anyone that knows me knows that I love food. It’s just something I live for. Exploring new cuisines, sharing a meal with family and friends, and ultimately discovering new things. You can call it my “second job” if you’d like.

The Chow House is the new restaurant on the Bleecker Street strip. With such an eclectic mix of different restaurants, bars, and dessert shops; Chow House was bringing something new to the neighborhood in the form of authentic Sichuan recipes straight from China to your table.

The Concept

The Chow House isn’t just another project for me. After having dinner one evening with some good company; I fell in love with the food, the presentation and the atmosphere. I felt that there was something special about the place and I wanted people to see the incredible gem this restaurant is going to become.

The restaurant’s motif is centered around red, black and white. Falling on the graces of authentic Chinese furniture and traditional lanterns hanging about; the restaurant was certainly thought out in a classical presentation of an old Jet Li Hong Kong film. There’s something about the allure of reds and blacks that seem to elicit the most emotional responses from people. Whether its on a Valentine’s Day card or even on the local supermarket sale sign; it’s good to take notice when the colors are demanding to be front and center.

For this concept I focused on laying out the minimalistic vibe of the restaurant. I chose to forego the heavy, often over-designed restaurant layout so that the photographs of the food speak for themselves. Sichuan dishes tend to rock artsy swirls of red, yellows and greens in a medley that looks almost like a surreal Salvador Dali painting. The plating of the dishes are simple, white porcelain that allows the food’s vibrant and unique colors to captivate your attention. My job was to find a way to let the food do all the fancy presentation while maintaining a functional layout.

The Process

The initial wireframe of the website was done by hand. I chose to lay out the site in a familiar pattern where most users can immediately jump to what’s important; the food.

The artwork consists of photographs that were professionally taken at the restaurant, along with a couple of stand-in pieces due to some images being unavailable.

I used a combination of Pixelmator and Affinity Designer to modify and treat the images to reflect the site’s motifs and color palette. While I could’ve chosen to do the tints and some of the manipulation using code; I didn’t feel that it was necessary. Perhaps when the site is nearing its finalized version, I may opt to recreate the color treatments via code to allow easy updates using untreated images and avoiding the need for a designer to treat them.

The site is coded using standard HTML5, CSS and Javascript. The stylesheet was written in LESS, while the Javascript includes a mixture of jQuery and custom scripts to deal with the responsive handling. The website’s size is scalable and is set to collapse into mobile after the screen width hits 500px or less. I chose to do all my sliders and animations using CSS, triggered by Javascript, which will keep the site lean on resources and running more or less the same across different browsers.

The Menu

The built in menu on the site is a miniature version of another project I’m currently building for the restaurant. It’s a modest and simple slider that stands in for an online-ordering platform menu. While simplistic; I really wanted a slider layout that allowed easy mobile responsiveness without losing the presentation of colorful images while displaying the menu items.

There are plans to add an online-ordering platform that will eventually replace this slider function. It’s important in my eyes as a designer who is also a fan of the food and its visuals; that I keep the photos of the dishes available for curious eyes to see. I know I like seeing what my food will look like before I order it. It helps let me know if the dish is right for me.

The Minor Features

While it’s not blatantly out there; I did add some recurring usage of the restaurant’s motifs. The mobile version the site features a simple white menu layout, including a mini contact section. The map on the site is a Snazzy Map implementation of the color motif, which avoids the ugly vanilla Google Maps map that you would see elsewhere.

The effects and animations are subtle. In desktop mode, the navigation menu collapses in height; lending more screen space to display beautiful images and more information. The menu section features hidden words that appear on hover, unveiling additional information without cluttering the interface.

Moving Forward…

As this concept continues to evolve, I look forward to designing and building this project almost like a visual art piece that mimics the beautiful food in the photos. This is certainly a project that I am really enjoying and I look forward to seeing it completed and live.

Building with React


What is React?

React is everyone’s favorite front end technology… but what is it? React.js is a Javascript library developed by Facebook in 2013. The library was Facebook’s solution to creating user interfaces (UI’s) and single page applications (or SPA’s as they’re affectionately known). A single page application is a web application that has dynamic functionality without ever having to refresh the page. Think about how your Facebook notifications just appears to pop up when you receive a new comment or like. Even the re-rendering of only the News Feed when you scroll up or down. These are examples of single page application functionality built using React.

Components

React is a very ingenious library that is conceived around the idea of reusable components and state management. A “component” is just a chunk of code that you can call, use or render when needed and can also be removed from view when not needed. This keeps the code very modular and allows flexibility in scaling an application, while also maintaining a simpler way to debug and troubleshoot your code without running through hundreds or thousands of lines of code.

React is also built using the ES6 or ES2016 version of Javascript. While ES6 isn’t a whole lot different, some of the features of ES6 do have their usefulness. In ES6, the “var” keyword is now replaced with “let” or “const” to distinguish which variables can be used, overwritten and/or locked. This prevents a lot of unnecessary confusion when writing or debugging code in large applications where you may have mistakenly redefine a variable’s value or type. ES6 also streamlines the syntaxes for writing functions, keeping your code a bit more concise and readable.

JSX and Babel

While Javascript ES6 has not been fully adopted by all browsers, we can transpile the ES6 code into ES5 code using Babel. Babel would be assigned the task of grabbing the ES6 code you’ve written and translate it into ES5 code that browsers can understand and render onto your page. The process also allows you to write in more semantically recognizable code called JSX.

JSX is a lot more readable to humans, though it does not necessarily mean it can be understood by the browsers. Babel would reconfigure the code, or transpile the code, into something that the browser can completely understand and render.

Virtual DOM

What’s also cool is that React has a built in feature to run code in a virtual DOM, which saves you time. The purpose of the virtual DOM within React is to create a virtual rendering in the in-memory data structure cache, so it can compare what is currently rendered on a page versus what to render next. React is smart enough to detect only the differences and re-render what is necessary, without changing anything that is the same. This virtual DOM feature saves you re-rendering time because the application just doesn’t have to re-render every single element of the page.

User Interfaces and Components

React’s main purpose is to help front end developers create user interfaces that dynamically changes as it interacts with its users. In traditional front end development, pages typically have to refresh or redirect to a new link or page in order to repopulate data or show a different feature of the site. Using React, front end developers can now build web pages that will never (if rarely) have to refresh or redirect to a different URL because the same page can be used to show different features.

This means you can now design different components that will show different UI’s depending on what the user is interacting with. Each component is a modular piece of HTML-like code that renders HTML elements to a page. Since React is written in Javascript, components can also include in-line Javascript code, similar to writing back end templates in Express.js or PHP.

Imagine that your user doesn’t have to wait for a new page to load just to access your contact form or view a new section of your site. This is done through the power and magic of state management.

State Management

Since users are interacting and moving about on a single website, it’s important to have a way to track what the site is currently rendering and what to render next. This “tracking” is called state and React has a beautiful state management feature built into the library. Without getting too deep and technical, state management allows developers to assign different values to a component’s state depending on what a user is presently doing. Whether its a simple to-do application or a full stack Netflix clone, users will engage with the website in a way that needs to change values of some sort and cause the site to re-render the appropriate state or component.

 

Why Build with React?

React is a client-side solution for building web applications. While traditional applications that require a back end server still exist, the benefits of having a client-side web application is that it would shorten processing and rendering time of the application.

Think of all those times you’ve waited for a page to load after clicking a link. The delay can be attributed to a number of possible reasons such as a large number of users are requesting the page at once, or the server being busy processing other things on its bandwidth.

In React, you can sidestep this by providing the application all it’s necessary code, components and routes on the client side. Since the information is already available on the user’s end, the change of state, rendered components or even linking to another “page” is all happening on their machine.

React has a great tool called React Router. React Router allows developers to build applications and simulate back end routes without actually having a back end. As a developer, you would write routes and assign them to numerous components that are to be rendered, while disabling the browser from actually making a page refresh or requiring it to make a call to a server. This is totally awesome and doesn’t restrict you from only building “one page” applications. You can build a single-page-application (or SPA) that mimics a full website with multiple pages and routes all from the same page.

Moy Yat Kung Fu


DEMO: moyyatvingtsunkungfu.com


Preface

Moy Yat Ving Tsun Kung Fu is a martial arts school located in New York City. The school was founded by Grandmaster Moy Yat, a former student of the famed Kung Fu master Yip Man and former classmate of Bruce Lee. Today, the school has become the international headquarters for all of their satellite schools located around the globe.

Redesigning

When I first saw the school’s site, I quickly noticed that the site was in need of an update. The original site had the branding of the school’s colors and motifs, but the site lacked a modern UI and mobile friendly structure.

The original layout in desktop mode.

 

Same page, but in mobile mode.

 

The original site was based on an older theme that would be too troublesome to retcon the code. It would be much easier to just redesign the entire layout and create an entirely new theme. For inspiration, I decided to visit some of the websites for their satellite schools and eventually visit their newly created website that was dedicated to the school’s federation.

 

The International Moy Yat Ving Tsun Federation website.

 

The newly created federation site included a new branding motif that I decided to adopt into the school’s new UI design. It was only appropriate that I included the same colors and logo because the federation’s headquarters was also the same school I was redesigning a website for.

 

Layouts

I also interviewed the school’s leader, Sifu William Moy, into understanding more about his father Grandmaster Moy Yat. Grandmaster Moy Yat was the founder, however, he had passed away back in 2001. I needed to collect some stories for inspiration and understanding of what the school’s beliefs were and generate the necessary content for the new website.

After sharing some stories, I came to learn that Grandmaster Moy Yat was an artist, a painter and very traditional Kung Fu master. I decided to translate this into designing a simple and elegant presentation of what the school stood for. The new site’s layout would be a one page site, implementing the red branding as a backdrop for showcasing the school’s history, leader profiles and some images.

Sifu William Moy’s profile, including a video interview clip.

 

Furthermore, this site had to be mobile friendly. I adapted Bootstrap to fit into the site’s color palette and customized the brand logo. The menu also required a custom breakpoint to be applied as all the navigation menu items became too long to fit.

The menu spilled over due to the size of the new navigation menu and brand logo.

 

This was remedied with a media query breakpoint to collapse the menu into a mobile menu at 969px.

 

The mobile layout, built using Bootstrap.

Final Touches

Once the site was completed, there were some final touches to the design to make the experience more natural. I added a smooth scroll effect that would slide the website from one section to the next. The default experience would appear that the sections just appeared into place and felt too rigid. The slightly slowed down sliding effect created a much more elegant feel.

The second thing I added was to utilize Scroll Magic. Scroll Magic is an external library that helps you create particular events as you scroll through the page. In this case, I implemented unhiding sections of the website that were initially hidden on loading the page. The transition was then modified to unhide and ease out with a little bit of animation. The final result would be sections appearing to materialize out of nowhere.

Javascript code for implementing Scroll Magic.

 

Finally, an interactive Google Maps map was added to the contact section of the site. The map was generated on Google Maps, which created a line of code to embed. I modified the code to fit in line with the column stylings in Bootstrap and remain mobile friendly across various devices. The map can be clicked and loaded onto either a full desktop browser or open the Google Maps app on a mobile device. Thanks Google for making this map feature available and so easy to implement!

Google Maps for all your Google mapping needs!

 

The finished design was then converted into a WordPress theme (see my entries on WordPress for how I go about this process) and zipped up for use. Since the original site was a WordPress site, it was fairly simple to switch out the previous layout and just upload the new theme. While this theme I created does not presently have features to update the content in the future, I plan on adding additional components to WordPress to accommodate custom fields that will modify the site’s content.

Github User Search


A React project built using Github’s user and repository API.

Demo: Github User Search


 

Project Scope

This project was to build a search application utilizing Github’s API. The application would allow you to search for a user, via a username, and return the user’s name, avatar and a listing of all the repos that the user has on Github.

The app could be built in a number of ways, but for this particular project, I am building with React. React has that polished, client-side experience that users enjoy where the application doesn’t require reloading. Reloading and routing to different pages can be expensive in terms of processing and rendering time. To minimize this, React would simply perform all the rendering on the client side.

Planning in React

React is a great technology to build with if you plan appropriately. I know that sometimes you can’t account for everything, but it’s always best to define the scope of your project and determine what’s going to be the best way to achieve the goals you’ve set.

Since this project was based around searching through GitHub’s API, I needed to plan out the components needed to make the API calls and components to render the results to. It helps if you draw out the React app on paper or wireframe the design before starting to code out the app. It will help you visually identify which components are needed for this app to function. Below is a visual of what layout I wanted to use for this application. The red text highlights what each component is and the numeric order is how I chose to list them within the parent component.

Laying out the components for the Github Search app.

 

In React, you have to a few things to keep track of. The first is the passing of props down to the children components and the second is the calling of methods in parent components to manipulate props. Because of this, the first component to be laid out would be the Github search parent component. This component would include an initial state that would create an object to store information (or props) to be used throughout the app. The parent component will also define methods that can be passed to children components and executed when they are invoked by the children components.

The starting point of the Github Search app.

API Call

Since this application will be making use of Github’s API call, it is important to place the API call somewhere in the application. In this case, I chose to place the call within a method defined in the parent component. This call would only be invoked when the search button is clicked or the user presses “Enter” on their keyboard. The component that contains the search bar and submission button would initiate the method and run the method’s call to the API. Below is the method defined below, called “handleSearching”:

 

A method defined for making a $.getJSON call to the API when a username has been submitted.

 

The Search component that renders the input box and submission button. Line 80 includes a call for the handleSearching method when the form is submitted.

 

Once the call is initiated, the information would be sent back in the form of a JSON object. Since we initially set the state of application to include an object of key/value pairs, we simply need to just assign the appropriate data to each key as seen on Lines 28 to 31 in the above screenshot. Once assigned, we can later access these keys to populate our User Badge component with the user’s name, avatar and their following/followers information as shown below:

 

User Badge component that is used to render the user’s information after the API call is successful.

 

Github also has a separate API for looking up repositories from a user. Since it’s not attached to the first API, I have to repeat the call for the second API to retrieve the data on a user’s set of repos. The second API call is actually shorter, since we’re just retrieving one array of objects.

 

The data that gets returned gets set to the state’s repos key.

 

Mapping

The data returned from the second API call is an array of objects. Unfortunately, you can’t really loop through the objects to access the data needed for rendering the list of repos. The method preferred by React is to map through the array of objects.

Why map?

Well, for starters, we don’t really know how many objects an array contains. It could be 1 or it could be 1,000,000 objects. The second problem is we can’t loop through the objects to render each repo listing to the UI. By using the .map() method, we can run through the entire array of objects and tell .map() what to return to us.

In this case, we want to retrieve each repo’s information and display them into a list of cards that appear on the user’s screen. Below is a screenshot of the RepoList component that only appears when the API call is successful and available to the component via props:

The map method will generate a new div element with all the repo information for each object it encounters in the array.

 

Finally, the components are all nested inside of the GithubSearch parent component and then rendered to the HTML page in a dedicated container.

 

Parent component with props being passed to children components.

 

Final rendering of the app to the HTML container.

Designing a Site


Check out my past designs here.


Designing can sometimes be scary. The “perfect design” should seem almost like it wasn’t even designed at all. Everything about its elements, such as the experience, colors, shapes, typography and appeal should feel balanced and just right.

In this entry, I want to discuss my design process that I use when developing a new concepts for clients. The design process is just one of four parts of my development process when I build websites entirely from scratch.

The design process includes:

  1. Wireframing UX
  2. Prototypes
  3. Branding
  4. Designing UI

Wireframing UX

Wireframing is a process used to design a website’s general layout or user experience (UX). In the early stages of creating a website, it’s best to figure out what kind of structure your site will have and where all the content will be laid out. Since colors, images and logos are usually undecided at this stage, most wireframes are either black and white or in greyscale.

The reason why this phase is called “user experience” is because the focus is on simplifying the user’s experience with interacting with your site. Having easily recognizable menus, content structure and mobile-friendly rendering of the page’s elements make up a great user experience. This is not to be confused with “user interface” which is primarily focused on the aesthetics of the site after the UX has been designed.

So how do you wireframe something?

Most designers use professional software such as Photoshop, Illustrator, Sketch or InDesign to create designs on their computers. These same software often includes file presets for wireframe designs in various device sizes such as a desktop, tablet or mobile device.

You can also just create a custom size canvas on your software and begin wireframing.

To wireframe, you simply start drawing out boxes on your canvas to represent different website elements such as navigation menus, text content, images and more. There seems to be a lot of variation in what these “boxes” look like, so you can simply Google some wireframes for a general idea of what designers use when creating their layouts. You can keep it simple. No decisions have to be made about colors or fonts. Just where everything should go on a site. Here’s an example from Wikipedia, below.

 

An example of a wireframe. Image courtesy of Wikipedia

 


Tip: I personally use Pixelmator (a Mac alternative to Photoshop) and InDesign to create my wireframes. There’s absolutely no right or wrong software to use. Use the software that you are most comfortable with.


 

Designing using Pixelmator on my MacBook.

 

In fact, I sometimes prefer to just hand draw my wireframes using a paper and pencil. It’s usually convenient for sketching out quick ideas while meeting with clients. It also helps resolve any website flow issues before you even code it!

You may have to do a few different wireframes for clients who are unfamiliar with the process and adjust the design until you’ve finalized the layout. From there, you’ll want to create a prototype!

 

Prototyping

Your client wants to play around with the design already! Coding the site will take hours or weeks to complete, so how do you get your client something to try?

Create a prototype!

Prototypes are nothing more than just some wireframes that are connected to each other using prototyping software that gives the impression of a working site or application.

To create a prototype, just get the images of your wireframes, upload them onto the software as a single project and begin linking them together using “hotspots”. Hotspots are just sections you select to interact with another wireframe.

For example, if a user clicks on a “send e-mail” button on one wireframe, the hotspot should link to another wireframe showing that an e-mail was sent. This gives the client a sense of what the layout’s functionalities are before you even code anything.

I personally use Invision when prototyping on my computer, however, I have also used Marvel on my smartphone to prototype hand drawn designs on the spot. Prototyping has saved me a lot of awkward conversations by just showing my clients exactly what I have envisioned in my mind.

 

Prototyping on Invision. Hotspots are in blue.

 

Prototyping is important. If you prototype your wireframe designs and test them, it will save you a ton of time figuring out flaws with the website’s flow, design and how users interact with it. It also creates an ideal visual for developers to code the site and minimizes confusion.

I used to be guilty of developing without a design, but it’s now part of my development process and I love it.

Branding

Branding is everything. Whether you’re an individual or a company, branding is what makes you and your site stand out.

So what is branding?

Branding is the collective idea of what you are trying to convey to your audience. It’s more than just a logo or some catchy name for a website. It’s about the “whole picture” of the website and what your website represents. Here are some examples of branding:

  • Who is your audience? How can you relate to them?
  • How you present yourself or the company. Are you sharing your philosophy?
  • Choices of colors. Are the colors for your website eliciting the right emotions from your audience?
  • The tone of your site, content and images.
  • Selection of fonts. Are they playful? Professional? Laid-back?

Obviously, you can’t answer these questions for your clients. It’s something they need to provide you so you can spin off designs that fit their vibe.

I come from an e-commerce background where branding is vital to a product’s success. So when I ask clients to provide me some branding ideas, I specifically request that they send me a bunch of inspiration that represents either them or the idea of their website. Think of this as creating an “inspiration board” and draw from it.

I do not restrict their inspirations. In fact, I encourage everything from photos to music, memes, color swatches, CD covers and anything else that they feel is representational of their future website. I paint as a hobby, so I usually draw inspiration from listening to music while I paint. In the same way, I would play my client’s choice of music while I design to really drive the inspirations home!

 

An inspiration board.

 


Tip: You can create an inspiration board on your computer, on a real poster board or keep the collection of images, sounds and colors in a folder that you can review.


 

Designing UI’s

You’ve made it through 50% of the struggle, so now comes the fun (sometimes hard) part… Creating colored designs for your client. The technical term would be user interface.

A user interface is what the users are seeing on their screen when they are on your site and interacting with it. The UI created encompasses the aesthetics, typography, branding and color palette of the site’s brand or theme. The UX of a site could be absolutely perfect, but failure to design an eye-pleasing and pleasant interface for users can cause a drop in the number of visitors to your site.

Now that your client has agreed to your website layout, gave the thumbs up on the prototype and submitted the inspirations for branding the site, you must start churning out designs!

Getting started is usually hard when trying to imagine some visuals for an empty canvas. I usually open up my image software and start throwing random images and colors from the inspirations given and see what fits my flow as I build upon it. Stick to the wireframe structure! We didn’t waste all that time to just ignore it.

Colors

Inspirations also comes in many colors… so what colors do you use?

You’re going to need to create some color palettes. Select 3 to 5 colors to theme a design around and identify the main colors from the “sub-colors” for use on the site. It would also help to place the colors side-by-side so you can see how they contrast with each other.

There’s also a great resource that I love using for creating color palettes called COLOURlovers. What’s great about COLOURlovers is that you have access to an online tool to select the colors, create a palette and even get the exact hexidecimal code or RGB for each color right from their site. You can then save each color palette you’ve created and reference them during the colored design process.

 

COLOURpalette.com is your friend!

 

Create 2 or 3 additional color palettes so that you have some different choices when designing the colored designs in the next phase.

The first design won’t be perfect. It’s really to get your creative juices flowing and brainstorming new ideas as you fill the canvas with colors, images and placeholder text. Remember that you’re really looking to create 3 to 5 designs using the same wireframe as the layout and structure. Just continue flipping through variations of the same layout using different color palettes and images.

Fonts

This is also a great time to start exploring fonts. I personally try to explore fonts using Google Fonts as a starting point. Google Fonts, at least to me, provides real useable fonts that can be coded into the website without additional costs or purchases. There also a ton of other font websites as well, and I always encourage exploring 4 to 6 different fonts to incorporate into your designs.

 

Google Fonts are awesome.

 

Fonts are more than just pretty calligraphy to look at. They exude a vibe, a tone and feel to your website designs. Think about the tone of the inspirations from the previous branding step. What tone and textures do they create when you look at them? Use those feelings to select the right fonts for conveying those feelings back. Don’t select fonts because they look nice, because more often than not, they won’t fit with the feel of the design.

Organizing Your Designs

When creating designs in color, it’s important to keep your designs organized. I don’t mean to just keep them in the same folder or on the same hard drive. When you start designing shapes, colors, images and fonts, you will begin to amass a large number of elements in a single design document in your design application. It is vital that you group together your design’s elements and keep track of them as you design away at your ideas. You’ll want to remember the exact colors you selected, the size of the images you created and the exact fonts you used.

A simple method for organizing the design is just creating groups for each parent element of the design. Think of each grouping in terms of menus, sections, contact forms, etc. Label the groupings so they are semantic and easily identified. The last thing you want is 39 rectangles on a design with no grouping or label.

 

In the right-side menu, I have all my design elements grouped together.

 

For most designers, this grouping of elements is especially important before sending the final design to a developer to code. Developers will be hard at building and styling the website to the design they were given, so they don’t always have the time to figure out what colors you’ve selected or what fonts you used in the layout.

These groupings can then be exported to other designers and developers to share what was created and done to the design and its elements. This saves a lot of questions and allows the design process to move forward.

Once the design has been completed, it is now ready to be coded into a real website!

Interfaces and Designs


Read about my design process.


Below are some examples of my design work from past and current projects. The designs of each project below were created using a four part process that includes wireframing the website’s layout, prototyping, branding/rebranding, and creating full-colored designs.

The tools used to created these designs include Photoshop, Pixelmator, Sketch, InDesign, Invision, Marvel and hand sketches.

 

Moy Yat Kung Fu

A rebranding and redesign for a NYC martial arts school, focused on mobile optimization.



 

 


Bakery Website Concept

A conceptual design for a pastry chef who wanted to explore a web platform for online orders and catering.


 

 


Better with Betty Design Concept

UI design for a registered dietitian seeking web presence and a platform for sharing nutrition tips and recipes. This particular design is currently an active project, with a mobile design to come.

From a Wireframe to a Colored Design

 


Extra Credit NYC

Creating a canvas for a NYC based artist to share photography, articles and more. The client requested a custom menu slider in the form of a sticky note which would animate in and out of the frame when users interacted with the menu. Below are samples of the color variations in designs created during the design phase, along with a screenshot of the finalized design.

 

 

Some previous designs that were rendered.

Developing with WordPress


WordPress rocks my socks. It’ll rock yours too.


In the last write-up, I talked about getting started with custom WordPress theme designs. I went over some design processes and some important key things to remember when coding the website . In this entry, I want to take a look at the process of converting a static website to a dynamic WordPress site.

I won’t get too detailed about every part of the process. Instead, I will go over some brief overviews of each step of the conversion process and share some great resources on how to complete a conversion with your own project.

Keep in mind that the conversion won’t be a one step process. There are several steps, so it may seem like converting the static site is taking forever to happen. Just bear with me…

 

Underscores Starter Theme

We have our basic design coded into a static website. The next step is to create a “skeletal” theme to use for the conversion of our design into a WordPress theme.

Instead of creating the skeleton theme from scratch, we’re going to use a tool called Underscores.

No, I don’t mean underscores like the ones in grammar. I mean Underscores, the WordPress starter theme!

 

Check out Underscores. It’s awesome and you will love yourself for it.

 

Underscores is basically a barebones theme and will make your development life easier. Instead of creating all the necessary files from scratch in your editor, you can download the basic starter files from Underscores. Think of it as a “blank WordPress theme template” that saves us time. You could recreate these files yourself but it’ll just be tedious and unnecessary.

Just fill out the options on the Underscores.me site and download the Underscores starter theme. Unzip the folder and open the folder in your favorite text editor.

This Underscores theme will now serve as the base for your WordPress theme conversion. All the files and folders within the download will need to be modified to show your theme’s custom layout and design.

 

 

My favorite thing about Underscores is not the files, but the preconfigured file tree that’s created with each download. I don’t have to worry too much about remember which folders I need and which files go where. It’s all pre-built into the download.

 

Installing WordPress

 

 

We have our static coded site and a starter theme. However, we don’t have WordPress installed anywhere. You can’t really develop a theme for WordPress if you can’t test it out and use it on WordPress, right?

Go to WordPress.org and download a fresh copy of the latest stable version. You don’t want to use a nightly build or any version that isn’t finalized because there could be bugs and errors. Once you download the WordPress installation, do NOT start installing it yet.

 

WordPress Database

WordPress requires a database so you can store and modify your content. Without the database, any new content added or updates that is not hard coded will be lost once the website is refreshed or reloaded. WordPress uses a database called MySQL.

To set up this database, you will need to modify the wp-config-sample.php file for setting up a local database.

 

 

This file is key to setting up your database. Keep in mind that this is a local installation that we’ll be using and the database will not reflect the final theme. Once modified, you’ll save this file as wp-config.php and WordPress will automatically recognize the new file.

Now we can continue with the WordPress installation!

To install WordPress locally to your machine, use a local server environment like MAMP or XAMPP to serve the WordPress installation folder. I personally use the free version of MAMP and it does the job for me.

 

MAMP running on my Macbook, with the server on.

 

Go to the localhost address that was configured in MAMP/XAMPP and complete the installation following the prompts. The installation will request your database information from the wp-config.php file, so make sure you have that available!

By having WordPress installed on your local machine, you can run WordPress and install your theme just like you would on a web host on the Internet. This is also a great way to continue developing when you don’t have Internet access and you want to preview your work in a browser.

Install Underscores Starter Theme

Now that WordPress is installed, you need to install and activate your Underscores starter theme that you’ve downloaded. Keep the file as a compressed zip file and install it using the WordPress Dashboard.

We want to install this starter theme and activate it because when we begin to convert our static website design, we can monitor the changes to each file that we’re making.

The installation of the file, on your local machine will be located in the themes folder inside of your WordPress installation folder. Once the conversion is completed and finalized, we will be compressing this theme’s folder to use as the completed WordPress theme.

Keep in mind, once the Underscores theme is installed, you won’t see any real difference. WordPress will look plain and boring… but that’s okay! We’re gonna make it pretty once the theme is done.

Let’s start converting this thing already!

 

Converting to WordPress

So here’s the part you’ve been waiting for! Converting that static website you coded in HTML/CSS/Javascript and making it into a beautiful WordPress theme. This part is usually the most exciting for me as I get to really make the site “come to life” through the use of a dynamic CMS.

Now, remember you already coded your design as a static site? Well, since the code is already written, you can simply copy and paste your code into the appropriate locations in the Underscores theme to begin converting them.

As you may have noticed on some websites, most of them have a consistent navigation bar (header) and a footer. No matter which page you are on, they are pretty consistent. However, to recreate this “feature” on a static website, you’ll have to repeat yourself each time you code a new webpage for the site. Sure, you can copy and paste the code but it’s still not DRY (Don’t Repeat Yourself) code.

In WordPress, we solve this using something called a template. This concept is not unique to WordPress, but it’s a very prominent technique used to build and develop themes.

Imagine being able to take just the navigation header of your website, or the footer, place it all in one file and have it automatically insert itself into every new page you create. Wouldn’t that be cool?

That’s exactly what templates do. In the Underscores theme, you’ll notice that there are a number of PHP files that are actually template files. Each PHP file has a unique and semantic name that’s easy to figure out what its purpose is.

Some examples of the PHP template files are:

  • archive.php – Your blog archive design
  • header.php – The header/navigation menu you created
  • footer.php – The footer design you’ve created
  • index.php – The main landing page or blog roll
  • contact.php – Your contact page
  • content.php – Individual blog post layout

So if you want to create that header or footer, you can copy and paste your HTML code from your static website and paste them into the header.php or footer.php file. Any content or design features that are static can be left as is, while any sections that should be dynamic will be replaced with a PHP tag and script.

Once you’ve modified the header.php or footer.php templates, you can then call for each template inside of pages that you want to see them populate. For example, you would call for the header template first in the index.php file, whatever else you want sandwiched between, followed by a call for the footer template.

 

Line 10 in this code is a PHP call for the header.php template

 

WordPress will read and display all HTML onto the browser. Any line in the PHP file that has a template call will insert the HTML from the template as if it was already there.

I do want to note that in my image above, all the WordPress functions, methods and template calls are in blue. All the HTML code is highlighted in red text.

Now that we know what templates are, we can now identify key templates that we need for our WordPress theme and begin to convert them by modifying each file. Most websites will need modifications to the index.php, archive.php, content.php, contact.php, header.php and footer.php files.

All libraries that your design will be dependent on should be located in your assets folder, including all Javascript files, images and additional CSS files.

 


Helpful tip: It is best to include actual files of the libraries and not link to a CDN. This prevents a library update from breaking your theme and rendering it unusable. Download the libraries and place them in your assets folder.


 

As you modify each file, you can actively check your WordPress install on your local server for changes and updates. If you modified the header and added a custom navigation menu, it should now appear on your local WordPress site no matter which page you are on. If not, go back and check the file for errors.

 


Tip: Typical errors are syntax errors like forgetting a closing PHP tag, incorrectly using single quotes or double quotes or loading a resource from the wrong path or link.


 

Repeat the modifications for all the remaining pages of your static website design with the corresponding PHP template files. Be sure to test each page that you are creating for working functionality such as responsiveness from Bootstrap or a Javascript feature that you’ve previous included with your design.

Also, don’t forget to include all your script tags for Javascript and jQuery files in your footer.php file.

 

WordPress Resource

A huge and amazing resource that will become your best friend is the WordPress Codex. The WordPress Codex is the go-to collection of documentation, list of key features, support forum and troubleshooting guide to the WordPress experts.

 

 

What’s great about WordPress is the huge support it has from developers from all over the world. That means if you were to ever experience any trouble setting something up or modifying a template, you are very likely to find a solution using the WordPress Support Forums.

It’s helped me out of sticky spots more than I’m willing to admit! The WordPress Support Forum usually has discussions about errors, problems making certain PHP WordPress function calls and more. You can use their search to find a quick answer for pretty much anything.

When I first went on the WordPress Codex site, I was a bit intimidated but with a little bit of browsing and looking up some questions I had, it became very easy to navigate. I could say the same about MDN back when I first started learning Javascript a few years ago, but now I can’t live without MDN!

 

Wrapping Up

This entry is already becoming the longest entry I’ve written so far. While I didn’t intend to write a full tutorial on WordPress theme development, I did cover the overview of what key steps are needed to create a custom theme for yourself.

Designing and building a custom WordPress theme isn’t for the faint of heart. It’s a pretty long process that most people don’t want to deal with because there are a lot of moving parts and many technologies involved. I guess that’s why premium themes are popular! If you’re a developer who enjoys the creative process and the tinkering nature of converting a static page into a dynamic CMS-based site, then this is a totally rewarding process. I was super intimidated at first at the number of steps required to develop a theme but I’ve come to really enjoy it. In fact, this site was built using a custom developed WordPress theme and it’s made my life much easier to update and add new projects and blog entries.

 

Developing with WordPress


WordPress is awesome. Seriously.


 

In my last entry, I gave an overview about what WordPress is, options for themes and a couple of methods on how to get started. It was important to set some basic understanding of how WordPress works before discussing the inner workings of a theme. While most people can get their first website or blog together in under an hour using WordPress.com or a WordPress install on their personal host, you are stuck with the free themes or whatever premium themes fit your budget.

It feels a little bit limiting if you have a specific layout in mind. Perhaps none of the themes you saw online quite fit the color scheme you wanted or maybe the font was not a good fit for your brand. This is where creating custom themes from scratch shines.

For this entry, I want to talk about custom WordPress themes, also known as WordPress Theme Development.

 

Getting Started

Before you get started with WordPress theme development, you do need to know a few front end technologies first. These technologies are pretty common and if you don’t know these yet, then I recommend learning them before considering creating custom themes.

When I first got started with WordPress, I thought there was another box of “magic” technologies I had to pick up to make all those really cool themes. As it turned out, I already knew most of them.

So what should you know?

  • HTML
  • CSS
  • Bootstrap (similar responsive design framework or custom media queries will work here too!)
  • Javascript
  • PHP

As you can tell, creating a theme requires front end technologies that are core to pretty much every website out there today. HTML to frame out your site’s structure, CSS to style the site, Bootstrap for mobile responsive design, Javascript for core functionalities and PHP to hook this whole thing up in WordPress.

I do want to make one note about PHP.

PHP is a back end scripting language. Don’t let this intimidate you. PHP is similar to Javascript, so if you know Javascript then picking up PHP won’t be too hard. PHP will be used to help implement WordPress functionalities into your theme and will not be used to run any fancy algorithms. You can use Javascript for that.

Also, ignore the chatter about PHP being a good or bad language. It works, it’s built into WordPress, WordPress powers 27% of the web so that means PHP is going be around for a very long time. It’s got some kinks, but you’re rarely going to come across it.

 

Design Your Theme

As with any good UX/UI designer, web developer or both, you should always begin your theme with a concept sketch. This “sketch” is called wireframing or wireframes. By creating a wireframe first, you work out the page’s layout, navigation menu and structure for the site’s content.

Sure, you can start by coding immediately, but it’s often harder to come up with a polished out design if you’re making it up as you go. It’s much easier just following your wireframe almost as a template for you model your code on.

Keep in mind that wireframing doesn’t mean you have all your colors, images, logos and icons ready. It just a bunch of boxes on a screen, or piece of paper, laying out the components for you.

 

An example of a wireframe. Image courtesy of Wikipedia.

 

You can choose to wireframe your design using professional software like Photoshop, Illustrator or Balsamiq or you can simply draw the wireframes on a piece of paper. I personally use the latter since I enjoy hand drawing my ideas and it takes me less time to draft up a concept on paper than it does to wireframe on the computer. It’s also more cost effective too!

Once the wireframe is done, start adding the colors, images and content that’s supposed to go into the design and start polishing out the final look. Once you’ve decided that the design is final, you can now begin coding the website in your editor.

 

Coding the Design

If you’re like me, then you probably thought that after you completed your design, you would just somehow magically turn it into a WordPress theme using some new programming language or framework. Seriously… I thought there was some much more complicated route beyond my development skills that I have yet to learn.

In actuality, it turns out that the front end technologies we discussed earlier are the magic tools that will drive the coding portion of creating a theme.

You can’t get away from good old HTML, CSS, Javascript and PHP. Bootstrap can be substituted with Semantic UI, other mobile responsive libraries or simply custom writing some DOM manipulations and media queries.

To begin coding, think of your theme as a regular static website. Begin building out every element, styling and function as you normally would with any other static website. Create the separate CSS styling sheet and Javascript files that your project may require as well. If you’re using any additional libraries (such as jQuery, Bootstrap, Semantic UI, etc.), be sure to download the files for those libraries and save them for local use on your computer. You will need all these files to build out the assets required for running your static website, and ultimately your theme. Don’t worry… the files may seem like a lot of code but it’s all text and really tiny in the scheme of theme building.

Once your static website is complete, test all the libraries for bugs and errors. Handle this now as opposed to later, since you want to catch errors while they’re easy to manage. Once you start converting the static site to a WordPress theme, things may get a little hairy.

Also, be sure to design all necessary pages for the site. Most sites, or blogs, will need a homepage, a contact page, some custom pages for additional content, a blog roll and archive. Also, having a 404 page design will help too. Check out some 404 page ideas on Google if you’re not sure what I’m talking about.

 


Tip: If you are building a custom theme for a client, you may want to check with them if a design is already available. Save yourself some time from having to start from scratch by requesting the designs before you start coding. Some clients already have a designer working with them.


 

In the next entry, I want to explore how conversion process and I’ll share some other cool resources for making WordPress themes awesome.

Coming next: Converting Static Websites to WordPress Themes

Developing with WordPress


WordPress is awesome. Seriously.


WordPress is a powerful, FREE and open-source content management system (or CMS) platform for creating websites and blogs. It powers 27% of the Internet as it is often used to build personal websites, e-commerce sites and various platforms for all types of people and organizations.

For the longest time, I wasn’t much of a WordPress user. I didn’t understand what features it provided other than being an easy to deploy blog platform with an endless selection of theme options. I guess this lack of understanding kept me away from looking deeper into WordPress’ amazing features and endless functionality.

As a web developer, it was inevitable that I would finally sit down and work with WordPress as a developer and implement some of its awesomeness into my projects.

 

Content Management System?

What is a content management system?

A “Content Management System”, otherwise known as a “CMS”, is software used to organize and managing a collection of various types of digital content. Most WordPress users are simply bloggers, where a CMS is used to create, edit and manage blog posts. Outside of the blog-sphere, a CMS could also be used to update news articles, edit sales copies, add new features to a webpage, update landing page slogans and more. The options really are endless.

Aside from being a great way to manage your digital content, WordPress also has a HUGE backing of support due to its open source status. That means you have tons of documentation, forums and tutorials that can help you in a bind when completing new projects or fixing bugs.

WordPress also has an option to install and use third party plug-ins. A plug-in is a piece of software that enhances WordPress’ core functionality or adds on new features such as a shopping cart or custom WYSIWYG editors. Some are free and some are paid.

And my favorite part about WordPress:

It’s great for creating a pseudo-full stack website without a ton of technical knowledge about the back end. That means for new users who are not tech savvy can deploy a website with minimal knowledge of databases and/or a back end scripting language. How awesome is that?!

 

WordPress Themes

Before I dive into creating custom WordPress themes, I do want to talk a bit about themes in general. I’m in no way an expert in UX/UI design, but I do have an art background and have some fundamental understanding of how it would apply to UX/UI designs.

First, what is a theme?

A theme, or “skin” as some people call them, is a pre-designed layout that includes custom color palettes, fonts and maybe some additional features like a photo carousel or landing page slider. At its core, a theme is just a way to keep the stylings consistent when navigating from one webpage to the next, on the same website.

 

 

Themes can be found on WordPress.org for a free or in the Appearance section of your WordPress Admin Dashboard. While they are great for people who getting started, they probably aren’t as flashy and cool looking as the paid themes you might find elsewhere on the web. Paid themes, also known as premium themes, can cost as much as $99 or more, but are often worth it for WordPress users who don’t want to deal with the design aspects themselves. Paid themes also often include some additional built-in functionality that would not be available in free themes.

Which is better?

It just comes down to what you’re creating and what your budget and timeframe looks like.

If you’re strapped for time and need to deliver something quickly, grab a theme and go. If you’re working a client to create a custom theme, then perhaps a theme from the Internet isn’t the way to go. I’ll talk more about WordPress theme development in my next entry. With WordPress, you have options and options are always good!

 

Getting Started with WordPress

There are tons of tutorials on creating your first website using WordPress. While this write-up is in no way a tutorial, I wanted to create an informative entry to explain what WordPress is and how it’s changed the way I develop.

I’ll give you the basic rundown of what you typically need to get started with a WordPress website today. I recommend checking out free video tutorials on YouTube for you visual learners and any of the standard read-along tutorials you’d find on Google for everyone else.

 

 

There are two ways to get started with your first WordPress website:

The first one is to go over to WordPress.com to get started quickly. WordPress.com provides a quick and easy way to deploy a website in minutes, using one of their tiered plans. WordPress.com includes hosting and little to no database setup. That means a non-techie user who wants to get their site up can quickly throw together something with little assistance.

 

 

There is a free plan for users who don’t want to sign up for any of the paid stuff.

The paid plans offers more bandwidth, storage, removal of ad’s and more.

Wait, didn’t I say WordPress is free?

WordPress, the software is indeed free. The WordPress software can be found at WordPress.org. This takes me to option number two…

 

 

The second way to get started with WordPress is to install it onto your personal host. Most web hosts have an option in their cPanel to install and deploy WordPress. It takes just 5 minutes or less to set up and you don’t have to pay WordPress a dime.

Of course you’ll have to pay for your own web host and manage the host yourself. However, it could potentially save you a lot money in the long run as well. I would recommend that you are somewhat comfortable with basic web technologies to go this route. There will be a little bit of configuring to do with the database, domain name setup and navigating of the cPanel (which is sometimes confusing!).

If you’re not sure which method works best for you, I highly recommend going to YouTube and checking out some quick videos on both a WordPress.com setup and a WordPress setup on cPanel.

Both methods described above include access to WordPress’ selection of free themes. Premium themes can be purchased pretty much anywhere on the web, installed into WordPress’ Dashboard and activated in minutes.

Whew! This is a long write-up already. In the next entry, I’m going to talk about WordPress theme development. I’m a developer, so it only makes sense if I talk about how to develop something right?

Coming up next: Custom WordPress Themes!

Simon Game


Demo: Javascript Simon Game


The Simon Game. An iconic piece of 1970s and 1980s pop culture. I remember growing up in the 80s and seeing the commercial for one of these hand held devices, though my parents never actually bought me one. The Simon Game is simply a memorization game where a player follows a sequence of lights and sounds.

The rules are simple: The device plays a sequence and you repeat it by tapping the colored buttons. If you fail to repeat the sequence, the game would replay the sequence and give you another chance.

There’s also a “strict” mode where the player has just one chance to match the sequence. If the player fails to repeat the sequence, the game will restart back at level 1.

The game has 20 total moves, progressing faster as you advance through the sequences.

 

Where to start?

The first thing I thought was: “How do I break this game down so I could build it in Javascript?”

I won’t get into any details about the HTML or CSS behind the game. All the images, colors, animations and design is entirely done in CSS.


If you’re curious about how I structured some of my HTML or CSS, you can check out my code here.


The game’s primary functions will require:

  • 20 random moves for the computer’s sequence.
  • A way to track the player’s moves.
  • Some sort of check to see if the player’s sequence matches the computer’s sequence.
  • Create a “strict” mode to restart at level 1 when the player fails to match on the first attempt.

The game will begin with a “new game” configuration. All the configurations are assigned to individual variables, including the sound bites, speed of the game, level and with the game powered off.

 

 

Empty arrays are used to track the sequences for the computer and the player. In this game, I chose to have two arrays for the computer and one for the player. The first computer array will have a set of 20 random moves generated at the start of the game. The second computer array will receive one move at a time, allowing the game to advance across 20 levels while being able to track and check the sequences against the player’s sequences.


Note: You could also use objects in place of the variables to organize the different game settings as well. All the game settings can be defined using JSON dot or bracket notation.


Start Small

To make this game more modular, I decided to create multiple, smaller functions that would interact with each other through out the game.

While the functions aren’t the exact textbook definition of functional programming, I think it’s close enough to my needs to make the game’s code accessible and easy to edit.

 

 

By creating smaller function modules, I can organize each function to address one set of tasks to complete as you play through the game.

I can also call on only the functions I need during the game play, only when I need them. Having smaller, modular code is a lot easier to debug in my opinion. If something’s broken, or doesn’t behave as predicted, I can trace back the issue and locate it among a small function rather than search the entire file of code.

Just keep in mind that sometimes your projects can span hundreds, or thousands of lines of code. Make your life easy by planning and organizing your code ahead of time.

Here’s an example of creating some individual, smaller functions for tracking the sequence’s speed:

 

 

The counter keeps track as to what level the player is currently on. Based on the level, if it’s above level 4, level 8 or level 12, the corresponding speed of the lights and sounds will increase. A setTimeout is being used here to “turn on” and “turn off” the lights on the colored buttons, via a CSS class styling.

 

Tracking the sequence…

To track the sequence for both the computer and the player, I chose to generate numbers between 1 and 4. Each number would correspond with a particular color and sound.

 

 

The player’s sequence is also generating a number between 1 and 4. This allows easy comparison between the computer’s sequence and the player’s sequence because the values are the same type and values.

 

 

Once all these smaller functions and variables have been set up, I was ready to tie the game up into one large function.

Keep in mind that in Javascript, the order you place functions aren’t as important as other languages such as Java or Python. Due to Javascript’s nature with creating space in its memory upon starting the application, you can hoist a function from any part of the code’s file to work. This is not the same nor true for other programming languages!

In my project, I chose to organize the variables and functions in order of declared first, then called later. I figure this would be great practice so I wouldn’t get sloppy when working with similar logic in other programming languages.

 

The Hardest Problem to Solve…

While completing the game’s final logic, I was stumped with a pretty vital piece of the game’s flow. I could not seem to figure out the best way to check the player’s sequence against the computer’s sequence.

What do I mean?

Well, if a player were to input their sequence, how would I be able to check if the user is done inputting their sequence before the game can check it?

At first I thought I could use a timer to allow a timeout of some sort. While this is technically feasible, I could multiply the length of time allowed for a player to input their sequence as the levels advance.

I then realize this is a silly method because it would slow the game play and experience down if the player were to input sequences faster than the allowed time.

I won’t lie that I did struggle with this piece of logic for a day or so.

It wasn’t until I was sitting at a red light with my girlfriend that I stumbled on the solution!

 

The Check!

The solution wasn’t necessarily simpler in any way. It was just different from how I initially interpreted a possible solution.

In order to check the sequence, all I had to do was check each move based on its indices. If each move in the player’s array and each move in the computer’s array was the same, then there was a second check to run.

The second check would simply check to see if length of the player’s moves array was the same length as the computer’s moves array.

In other words, if the computer played 12 moves, did the player complete 12 moves too?

If the player did not, then the sequence would not progress forward. It would simply wait until the number of moves is matched.

 

 

Once that logic was completed, the rest of the game’s logic was easy to complete. Just simply advance each level, speed up the game’s lights and sounds as the player advances and then check for a win or lose scenario once 20 levels are up!

This project is one that I am really proud of completing. I went about building this game from start to finish in just 5 days of non-stop coding and tinkering. Initially, I was doubtful if this was something I was capable of completing as it seemed really complex. I decided to challenge myself by planning and structuring out my game and it’s logic on paper and building the necessary components (or functions!) to make this game work. Anything I couldn’t figure out immediately, I chose to experiment various ideas on it until it worked.

In the end, having a fully working Simon game allowed me to achieve two things: 1) I finally have my own Simon game to play with after 20+ years. 2) I manage to tie up a slew of front end web technologies together to build something using algorithms and some fancy CSS styling.

Yelp Camp


Demo: Yelp Camp Full Stack Application


I really enjoy front end development. I’m a creative person by nature, so having the opportunity to create and shape something into a functioning site or application is a challenge I regularly enjoy.

However, I was always curious about the back end.

I would create and code these forms on the front end and code in different types of requests without fully understanding why I do it. It seemed like back end developers and engineers were wizards and a part of me wanted to understand this wizardry!

 

Back End Wizardry

In 2016, I decided to explore back end technologies. While it’s certainly a tall order, I made the choice to learn back end through a web development course focused on full stack Javascript. While I was already familiar with front end technologies, it was the idea of building a back end that alluded me.

The full stack project that was to build a clone of Yelp. Not entirely identical but functioned like Yelp for the most part.

This clone is Yelp Camp, a review site for campgrounds. Get it? Yelp for camping?

The front end of the application was built using HTML, CSS, Bootstrap and Javascript. The back end was going to be built using MongoDB, Express and Node.js.

 

Routes

The first thing I had to learn was how to create routes using Express. Express is a Javascript framework that helps developers create routes quickly and easily.

 

 

Routes are basically what they sound like; it’s the page or URL that a user is requesting.

When you go into the browser and you type in a URL, you are making an HTTP  GET Request. This request is answered by a server (a computer that contains all the sites and files you are requesting) and sends back a response.

By creating routes, you get to make the decision of what to provide users when they request different pages, non-existent pages or anything else on your server.

You are essentially the gatekeeper of the website.

 


Fun fact: Thanks to the magic of Node.js, Javascript is used as back end scripting language. Prior to this, back end scripts were limited to Java, Python or PHP for the most part.


 

REST?

The next step was to learn and understand RESTful Routes. Representational State Transfer, or REST, is an architectural philosophy that encourages developers to use HTTP as it was meant to be used. It’s similar to CRUD (Create, Read, Update, Destroy) in concept, however, it expands into seven distinct routes:

  1. IndexGet Request
  2. NewGet Request
  3. CreatePost Request
  4. ShowGet Request
  5. EditGet Request
  6. UpdatePut Request
  7. DestroyDelete Request

Each one of these routes are created for different purposes, depending on the functionality of the webpage. For example, you would want a separate page for updating information (a PUT request) in a database and not submitting information using a GET request. This would result creating a new entry in the database with the same information. Kinda self-defeating.

Now that I learned how to create routes, what will the users see when they reach those routes?

 

EJS & Templates

By far, this must have been my favorite part about learning back end. I’ve always wondered how back end developers created templates that were reusable and how they manage to populate dynamic data in them.

EJS is short for Embedded Javascript. It’s basically a template that you can create in HTML and embed Javascript code within it. Using EJS, you can now implement Javascript (via Node.js) and create something similar to front end code.

Once an EJS template was created, you could make a call for the template to load onto different pages without having to re-type all the code again. Isn’t that cool?!

Embedding Javascript also opened a brand new world of programming for me. I was able to quickly apply what I learned here with creating WordPress themes and populating my files with templates.

 

 

I was also about to use Javascript to access databases and write algorithms in my EJS file as well. This meant that I could access data from a database and ensure that everything could be looped through for content and data. My mind was blown!

 

Database

For Yelp Camp, I used MongoDB. I had zero database experience prior to starting this project, so I didn’t know what I was missing out on or if MongoDB was better or worse than other databases. MongoDB is a NoSQL database that is popular among MEAN/MERN stack developers. While rising in popularity, MySQL is still far more favored in building full stack applications. I’m still a little fuzzy why one is more desirable over the other, but I definitely see some benefits of both.

 


MEAN Stack – MongodDB/MySQL, Express, Angular.js and Node.js

MERN Stack – MongoDB/MySQL, Express, React.js and Node.js


 

MongoDB is based on the JSON concept. Someone basically noticed that JSON objects are really cool in formatting and storing different types of data all in one place. I guess the same “someone” decided that it would work great for storing data on a database, thus MongoDB was born.

To create the database, you simply head over to the MongoDB website to install MongoDB through your terminal. Once up and running, you can connect the database to your application via Mongoose.

 

 

I also had to create a login system for this application. While it is completely possible to build a login and authentication system, I used Passport.js for this project. Passport is a middleware used to create a hash, secure passwords and authenticate logins for users. Passport.js is also compatible with popular login platforms such as Facebook and Google.

 


Check out Passport.js


 

The Rabbit Hole

When I first saw how heavily involved the terminal was going to be, I initially freaked out. I was ready to reverse my gears back to “Front End World” and never come back. After having completed this full stack application, I have to say that I very much enjoyed the process!

Despite enjoying creative options on the front end, I did very much basked in the back end world where I didn’t have to make decisions about the colors on a page, the form’s layout, etc.

Isimply figure out which page I’m sending a user to, provide some error handling and make sure the server was up when it was supposed to be. At least in a nutshell.

This was a tough learning experience for me, but it was also a very rewarding learning experience because I got out of my front-end comfort zone and learn about something new.

The back end rabbit hole can get pretty deep. On the surface, a lot of what I built was very fundamental and doesn’t even encompass the algorithms that many engineers write to access databases or process the data before passing it to the front end. The list of back end technologies also span endlessly, with different scripting languages to choose from, different databases and finally different implementation of the technology.

While I would love to get more deeper into back end, I wouldn’t mind settling somewhere in the middle and doing full stack development in the near future. I could never walk away from my love of front end, but I could still see myself enjoying the tasks of setting up RESTful routes, writing algorithms to process data and creating templates.

Back end, you complete me.

Twitch API


Demo: Twitch.tv Channel Viewer


Twitch.tv is a popular video streaming website that is best known for their video game live-streams. There are literally tons of channels and users on there daily, along with a dedicated chat room for each channel. Users enjoy interacting with the channel’s content creator as well as interacting with other users via chat.

Twitch.tv also provides a great (and free) API for developers to use. Twitch.tv originally did not require a key to develop applications with its API, but recently requested that developers register for an API key so they could begin checking to see what their API was being used for.

 

Who’s Online? Offline?

To start this project, I needed a list of channels to provide the API with so I could look up their statuses. Since this was one of FreeCodeCamp’s required intermediate projects, we’ll use the FreeCodeCamp’s account to see if they’re online and if the channels they follow are also online.

For the overall design, I wanted to create a user interface that was very easy to navigate and familiar to people. I decided to go with a TV guide approach since everyone’s seen one of those, right?

The first part to this project was laying out the HTML for all the data to populate into. While I could have simply chosen just one container to have the data append to, I decided to break it up into three separate div’s.

The first div would be used to populate all channels that were online, the second div would be for channels that were offline and a third for channels with no information available.

 

 

The reason behind this was for easy manipulation in the CSS and Javascript portion of the project. I wanted users to be able to view, at a glance, which channels were active, offline or unavailable based on a color scheme that I would style into the CSS code.

For now, we’ll just worry about getting the data into their proper containers first.

 

Get the Data

The data for this API is provided in JSON format. To access the data, I needed to do an AJAX call to the API. Unfortunately, I wasn’t able to use a $.getJSON call to work for this project as it required a way to provide the API with the API Key. Some APIs will allowed you to concatenate an API directly into the URL when making a GET request, but Twitch.tv does not offer this option. Also, AJAX calls are a bit more robust with the option to handle errors.

I built and nested three AJAX calls inside each other for this project. The first one did an initial check to see if FreeCodeCamp was online, the second checked for channels that FreeCodeCamp follows and a third one to check for imaginary channels to ensure the application was working correctly.

 

 

The data that gets returned is one giant object. The object, of course, needs a name to be referred to so you can manipulate the data and populate the HTML skeleton I laid out earlier. For the sake of simplicity, I just called everything “data” and added a number to the end to distinguish them.

Using dot or bracket notation, you can navigate the objects to get to the nested elements and their values. The object contains everything from the channel name to the channel’s URL and profile icon.

 


Helpful Tip: If you have a hard time navigating through the object and it’s elements, I recommend getting on Google Chrome and downloading a JSON formatter plugin from the Chrome Web Store. Mozilla also has similar plugins for their browser as well.


 

Based on the channels online status, each channel is then appended to the online HTML container or offline container. The .append() method is used to add each item into the container, along with some HTML code and attributes to create a link and display the channel’s logo.

 

 

I also added three buttons to the top of the application allowing users to select which channels to view; online, offline or all. The buttons are simply adding and removing CSS classes that will either display the containers selected or none.

 

 

I also color coded the sections, making the online channels appear in teal, the offline channels in a burgundy/pink color and unavailable channels appear in gray. There are also little circular “lights” to the left of each channel’s icon, indicating if they are red or green. The same circular “lights” are also present in the buttons at the top of the application for easy visual navigation.

 

Green– what?

Animations on the web can either be really cool or just straight up annoying to see. I felt the way the channels appeared on the application felt stoic. They just appeared and disappeared without a real “professional” finish to it.

To remedy this, I decided to experiment with Greensock Animation Platform (or GSAP) to add a little bit of animated movements with the channels. The initial loading of the application will load as normal, without any animation. As users interact with the application, the channels will appear to fade in and load from the left or just fade in for all the channel containers at once.

It was a subtle move but I felt that it polished out the application a bit more for the user experience.

I do want to note that I did have the option to do these exact same animations using just CSS without requiring the GSAP library. It would’ve been a tad bit more tedious but it would not have been impossible. I’ve learned that sometimes CSS animation has its pros and cons versus Javascript based animations. I think this application could’ve benefitted from either one honestly.

Tic Tac Toe


Demo: Tic Tac Toe


Tic Tac Toe. The game you’ve learned to play since you were a kid. All you needed was to draw a 3 x 3 grid and take turns filling the grid with an X or an O. The winner of the game is the player who gets three-in-a-row first.

For this project, recreating a game of Tic Tac Toe was going to be interesting. I started off this project by hand drawing a rough wireframe of the game’s grid and mocking it up crudely in HTML and CSS.

 

 


Random note: I used to think that having fancy HTML and CSS was impressive. After a few years of writing code, I’ve come to realize having less HTML isn’t a bad thing! It’s what you do with your HTML that counts.


 

Game Functions

We all know that the objective of this game is to get “three-in-a-row.” While that’s simple enough, recreating the game in Javascript required building some key pieces to the game. The first was to have a clickable playing grid.

At first, I thought about just creating a bunch of div tags and creating event listeners for clicks on the div’s. Instead, I opted to use <a> tags and the .btn Bootstrap class to create clickable buttons. Once styled in CSS, the buttons would no longer appear as buttons, but just as little white squares that can be used for the game play. CSS wizardry/trickery I suppose.

The second thing I wanted to address was creating a “reset” or “start” point where all the game’s settings would begin. The nine spaces in the game would appear as blank spaces, which would later be occupied with X’s and O’s as a player engages with the game.

 

 

The var turns assigns the blank spaces in each of the grid spaces, a score count is set to zero for both the player and computer and track winning points for each. There are two reset functions built into this game; one to simply reset the game when the player wants start over and a second reset that would automatically trigger when the game comes to a tie. Without this second reset, the game would not advance forward and leave the game “stuck” or “frozen” in the same state.

By default, the user would be set to use X in game play, while the computer is assigned O, although it would’ve been just fine assigning each player no defined value.

I did, however, create a function that give the user the option to select either X or O before starting the game.

 

 

Game Play

The logic behind this game was simple. The player can select any blank space on the grid and place their X or O on there, while the computer’s algorithm is programmed to search for a blank space at random using Math.random() and checking to see if the space is occupied by an X or O.

 

 

I do digress that while the logic is simplified, I could have chosen to make the game harder by programming the computer to strategically check the best scenarios for making three in a row. The perfect game of Tic Tac Toe is usually one that almost always ends in a tie.

I guess this is why they have chickens in Vegas playing Tic Tac Toe against people for money prizes.

As the game progresses, there is a control flow set up to check for matching sequences. The sequences basically are predetermined “paths” that any X’s or O’s could take to make three in a row. This control flow is built into the function winCondition().

 

 

If any of those conditions are met, the game will stop and declare a winner. The game will cease to continue, a point is awarded to the winner and the game will reset (via reset2(), the second reset from above) and the next round will start.

 

UX Design

As I said earlier, the HTML skeleton of this game was pretty plain. There were endless ideas on how to best style and design the UI for optimum playing and user experience. For this project, I thought it would be fun to design and implement a bit of character into the game’s user experience.

The first thing I wanted to address was simplicity of starting the game.

By default, the game does not start until the player has selected X or O.  I didn’t want to add a “start” button, which felt out of touch with the paper and pencil version we’re used to seeing.

After the player selects their starting X or O, I added a display box in the game’s console. This display box is used to show different messages during game play, including who’s turn it is, when the computer is “thinking” and declaring a winner or a tie.

 

 

Yes, I said “computer is ‘thinking'”…

 

 

 

I thought it’d be clever to include a bit of code to simulate that the computer was “thinking” about its next move.

In actuality, computers process things so quickly, it never really takes longer than a few nanoseconds or milliseconds to return a result. To create this simulated “thinking”, I added some Javascript to use setTimeout based on randomly generated numbers. The timeout would be decremented in seconds and trigger after every move the player makes. Once the timeout is completed, the computer’s move would then be placed on the game’s grid and continue on to the player’s turn again.

Simulated “thinking”, get it?

 

 

I know lots of other Tic Tac Toe games just simply plop their computer’s move onto the screen right after a player makes a move. It always felt too “forced” or “preconceived” when in reality it’s not. The computer technically is “thinking” by checking for available places to make a move. This logic, while preprogrammed into the game, isn’t predetermined in anyway thus giving players a chance to win.

Get Your Local Weather


Demo: Get Your Local Weather App


The weather app. Everyone has one on their phone. It lets us know the temperature, if it’s sunny or raining outside and what the high and low temperatures will be throughout the day. In fact, it was the first app I really enjoyed using on my iPhone 3G back in the day when I first bought my first smartphone.

To build a weather app, you’re going to need to get the weather info from somewhere. Obviously I do not own any weather instruments to check for all these things. I might have a thermometer somewhere but that’s about it. It’s not going to help me figure out the weather conditions in San Francisco, Los Angeles or Alaska since I’m here in New York City.

The solution? Use an API.

 

What’s an API?

API stands for Application Programming Interface. It’s just fancy wording for a collection of dynamic data that can be plugged right into your project. For some API’s, this could just be a collection of available movie reviews or a bus schedule. The API can contain a lot of useful data to build great applications, but it’s entirely up to you as to how you want to implement it into your project.

Some APIs require the use of an API key. An API key is a unique signature that a developer needs to access the data. This same key also provides the company providing the API some method to track who is using their data and for what purposes. It’s important that if you’re using an API key; that you do NOT keep this API key in your immediate accessible source code. If you must hide the API key, you may need to look into how to provide this through your own server in the back end.

There are lots of awesome API resources out there, but my favorite site to go to for APIs is Programmable Web.

They have literally thousands of APIs, including a weather API. If you ever needed some data to use in your projects, I highly recommend checking them out.

 

Getting Started with an API

To use an API, you need to call the API. Just like calling someone on the telephone, you need some sort of “phone number” to reach the person before they can answer. This “phone number” is actually a URL provided by the API’s documentation. The URL may need to be modified a bit depending on what the API is for and what purpose it is serving.

For the weather application, I needed to use an API that could get the coordinates of a user based on their browser’s location.

While I could have tried other ways such as location based on zip code or city name, I felt that having the coordinates of the user’s current location would provide the most accurate and up to date weather information.

Plus, it works great on mobile devices!

The first call I used was a $.getJSON call for the coordinates. Google provides a simple method using a piece of Javascript code to check the browser’s location. I decided to use a IP address look-up and check for the coordinates, since sometimes a user’s IP address will triangulate a location. Not all devices have a GPS in them and not all devices have their location on.

Once the coordinates are available, I plugged them straight into the API call, also a $.getJSON call. This call will look up the available data on the weather conditions at those exact coordinates.

 

 

The coordinates are declared as two variables, which are concatenated within the second API call. The API URL for the actual weather data is defined within the var api.

By concatenating the coordinates directly into the API URL, it will continue to dynamically change based on a user’s location and we won’t have to hard code a set of coordinates.

 

Get Your Weather — Now!

When the API call is successful, the data will be sent back in a JSON format. Each piece of data is nested according to a category or name that branches out. To access each item, I used dot notation to grab the data and populate it into my application via jQuery.

 

 


jQuery is a Javascript framework that’s great for developers who want to shorten some of their development time.


 

Alongside with the data, I included all necessary conversion formulas to each weather item. This would ensure that the final value of the variable is already converted before it is displayed to the end-user. For example, the temperature is provided in celsius rather than fahrenheit. Speaking of which…

 

Celsius? Fahrenheit?

 

Since I did not want to isolate this app to just users who use fahrenheit as their main unit of measurement, I added a button to switch back and forth between the two weather units.

The button for the switch between the two units of measurement is done via a toggle. It switches back and forth based on a boolean value declared as tempToggle. When clicked, the button will assign the boolean a true or false value and based on this boolean value, the temperature’s units will switch between celsius and fahrenheit. I also included a switch between both the high and low temperatures as well.

 

Last minute details…

One final stylistic touch was to add some CSS to the background of the application. Some users, like myself, are visual and prefer to see images that can quickly identify the gist of the information presented.

Based on how warm or how cold it is outside, the background image will set accordingly. This feature was built using a simple control flow of if/else statements where the program will check the current temperature and see if it falls within a certain range of pre-determined temperatures. Based on that, Javascript would initiate a change in the CSS of the application and swap the background images.

I also added a display to the app to show the current date. It wasn’t necessary but I figured why not?

 

 

There is a section dedicated to showing the weather icons provided by the API, but not all weather data from every location has an icon available. I simply added it on as another if/else statement to provide the icon image if available.

That pretty much wraps up this project. I might consider re-doing this project in a few months and create one that shows you what to wear as opposed to just the weather. We only check the weather so we know whether or not to bring a jacket or umbrella, right?

Wikipedia Search


DEMO: Wikipedia Search


Wikipedia pretty much replaced all encyclopedias. I remember growing up seeing commercials on TV for the latest set of encyclopedias for sale, which later on went to become encyclopedias on CD-ROM. By the time I was in college, Wikipedia became a common household name and was synonymous with writing final research papers.

Just for the crowd that doesn’t already know; Wikipedia is a collection of encyclopedia entries put together through the contributions of users from around the world. It’s also an amazing, open source collection of images, sounds and information that can freely be shared and used for many things.

Wikipedia is, in one word, awesome.

Without Wikipedia, I’m sure we would all know a little less about the world.

For this project, I decided to build a streamlined Wikipedia search interface. Graciously, Wikipedia does provide a free and open API for anyone to use. The API and its documentation is presented one page and very easy to navigate.

 


Check out the Wikipedia API here.


The API

APIs are a developer’s best friend. Well, it is to me at least!

Having access to APIs to build applications is like having super powers.

Have an idea for an app? Chances are you will benefit from an API out there.

Wikipedia’s API is pretty simple. If you look up the documentation, it’s just a URL that you modify to include a search term of choice. Concatenate the search term into the URL and you pretty much retrieve the first ten items that match that search term.

It can’t be any simpler than that.

To make this search intuitive and easy, a text input box is provided to accept a search value from the user. This is assigned as the variable searchTerm. The value is then concatenated into the Wikipedia API url and placed into an AJAX call.

 

 

Unlike a $.getJSON call, an AJAX call has a lot more options and capability. It can do more than just send a “get” request and it provides a developer options to handle errors in the event that the API call is unsuccessful. AJAX calls also provide a place to insert an API Key if you have one.

For this project, the request is a GET request and the data coming back is in JSON format. As with all JSON formats, the data is nested in an object-like fashion (JSON and objects are not the same thing!) and can be accessed in dot or bracket notation.

Since Wikipedia’s API automatically sends back the top ten matching results, we simply loop through the entire object as one item (data) and append each item into a container with the id of “output”. The code is also written to return the data with the URL set as an active hyperlink for users to click on.

 


Note: Without looping through the data, you won’t be able to access all the results that are returned from the AJAX call. Looping ensures that you are receiving all the data that is provided back to your AJAX call.


 

Upon completion of populating the results, the search bar (text input bar) returns to the value of just “” or simply nothing. This essentially resets the text input for a new search whenever the user is ready.

There is also a simple error handling message of alerting the user (or developer) that there is an error if the API request fails.

I also don’t like clicking on buttons after completing a form or search bar, so I felt it would be nice to have the option to hit “enter” after filling it out and seeing results immediately. For this, I simply had and event handler set up in jQuery to wait for a keypress matching key 13, otherwise known as the “Enter” key. Upon this event, the event handler will trigger the search as if you had clicked on the “Search” button.

 

 

JSONP

One thing I do want to note before I wrap this up is that the request is coming from an unsecured HTTP source. Browsers like Google Chrome will not allow cross-origins (or the use of one source from HTTPS and another from HTTP) sources in the same application. It’s a bit of a pain in the butt, but preventing Cross-Origins Resource Sharing (or CORS) is actually a good thing! It’s built to provide an extra layer of protection for users, preventing unsecured or unwanted resources from downloading onto your program or application and doing anything malicious.

To remedy this issue, jQuery has something built-in called JSON or JSON Padding. JSONP is a way to bypass the CORS issue by simply adding on &callback=? to the end of your API URL. JSONP makes this work because same-original policies aren’t enforced on script tags. This is great for when you don’t want to find other complicated solutions to get your application up and running… however, you will have to implement jQuery into your code or else you can kiss this solution goodbye.

 

 

Bronx FreeCodeCamp


Members of the Bronx FreeCodeCamp Study Group with myself.

Visit the Bronx FreeCodeCamp Study Group Page


 

There are numerous coding, development and programming groups scattered all over New York City. Most of them are located in Manhattan and/or within college campuses and universities. There are developer groups that specialize in WordPress, React.js, Javascript, Python and more. You just had to find one of them online or check your Meetup app to see when their next meeting was.

Unlike Manhattan, the Bronx had maybe one developer group. There would occasionally be special events that taught people to code, but it would be for only a few weeks and then wrap up. Seeing that there weren’t too many options, I decided to trek into Manhattan to meet with local aspiring developers learning a curriculum from Free Code Camp.

I packed my messenger bag with my laptop, a charger and a Metrocard and headed to the East Village to meet with a Facebook study group called the New York City FreeCodeCamp Group.

The group routinely met at coffee shops to work on coding together. Upon arriving, I met with some friendly and laid back people who were super welcoming and knowledgeable about code. I hung out with one of the group’s leaders, Mike, who sat me down and shared some Javascript resources with me. All the members were deep in critical thinking while working through their projects, as I began to wonder why something like this didn’t exist in the Bronx?

 

Early Days…

I followed the New York City FreeCodeCamp Group on Facebook for a while before I even attended my first meeting. I guess it must’ve been something in the universe calling because suddenly someone in the group proposed the idea of starting a study group in the Bronx. Other members quickly responded with interest and the scheduling of the first meeting was underway!

Unfortunately, due to being unavailable, I couldn’t attend the first few initial meetings. One of the group members started a dedicated Bronx FreeCodeCamp Study Group on Facebook and I decided to follow the group to check on their next meeting.

 

 

Then one day in December, I finally made it to a meeting. A study group in the Bronx! I was just excited that I get the chance to sit down and work on code with others without commuting all the way to Manhattan.

Except when I walked in, there were just only two other people there.

Wait. What?

 

If You Host It, They Will Come…

After talking to the other two members, it became apparent that the meetings weren’t as consistent as they had hoped for. The initial group of members who started this group seem to have abandoned the project altogether. I was a bit bummed because I was hoping to work with some more advanced developers and learn a thing or two. The other two members were in the same boat. Despite this apparent failure, we agreed that we were interested in continuing the group and would continue to meet if at least two people attended.

For the next few weeks, it literally was just another member and myself. We didn’t mind it so much since we were able to pair program together and work through some projects. We also came up with clever ways of keeping ourselves accountable with learning something new about web technologies each week and sharing it for discussion.

As time went on, we began announcing our weekly meetings in hopes that others would come and join us. We tried to select a favorable day of the week and time slot that would accommodate most members. In just a few short months, the group was quickly growing, leading to more members expressing interest to attend our weekly meetings. The Bronx’s Coffee n’ Code sessions finally became more than just a two person meeting. We were soon hosting events for a dozen or more people.

 

 

Be The Type of Leader You’d Want to See

Having come from a leadership position in my e-commerce background, I felt that it was necessary to sustain a great relationship with our members. It’s sometimes hard, or awkward, to meet new people and talk about new topics that you’re unsure of. I made it a point to share stories about my learning experiences and spend time getting to know new members who were attending for the first time.

This eventually led to me teaching new aspiring developers how to get started with developing and programming. I soon became a “Code Counselor” that would help some of our members navigate through the Front End Web Development Program on FreeCodeCamp.org. Not only was I able to help others learn code, but it furthered my understanding of web technologies and programming in Javascript. I owe a good portion of my proficiency with web development to teaching others and I recommend that other developers should do the same.

Later in 2016, the group became so large that we started doing two meetings each week just to accommodate members with different schedules. The meetings rotated between two local coffee shops and a mall food court.

The food court location turned out to be amazing for our members because it was accessible by public transportation, access to food for members who were getting out of work, free WiFi and plenty of seats and tables for everyone.

By the end of 2016, I received an e-mail from The Microsoft Store of Westchester asking if the study group was interested in hosting an event at their store. The store’s event coordinator offered to host any of our meetings, provide free snacks and drinks as well as access to their laptops, tablets and video games.

Sounded totally awesome for a nerd like me.

I shared the news with the group, which was met with much enthusiasm and led to us holding a few of our meetings at the Microsoft Store. The store’s staff was super friendly, generous and welcoming. We even had access to a projector to use for presentations!

 

Moving Forward

As of today, the Bronx FreeCodeCamp Study Group boasts 350+ members and continues to grow. Our group leaders are still hosting Coffee n’ Code meetings and we recently added virtual meetings via Google Hangouts. The study group continues to provide a place for Bronx residents and developers to meet, share code, pair program and learn together. I am very proud of our study group and what we’ve accomplished over the last couple of years together. If you’re ever in the Bronx, I encourage you to stop by and join us for a Coffee n’ Code session!

Pomodoro Clock


Demo: Pomodoro Clock


The Pomodoro Clock is based on the “pomodoro technique“, a productivity concept that was designed to help people maximize their productivity and minimize slacking off. By giving small 5 minute breaks after every 25 minute session, users of this technique avoid unnecessary needs to dilly dally with unproductive tasks. At the same time, having more frequent breaks makes the user feel that their tasks are a bit less daunting.

It’s pretty genius in my opinion.

I’m an advocate for pomodoro clocks. In fact, I use it very often. Usually, I trick myself into starting the clock when I’m not feeling productive. I would tell myself that I only had to complete 25 minutes of this task and then I can go do whatever I want. I usually use my 5 minute break to go grab something to snack on, check social media or check emails before getting back to work.

The concept is pretty straight forward:

  1. Start a task for 25 minutes.
  2. Take 5 minute breaks in between every 25 minute session.
  3. Repeat 4 times and take a full half hour break.
  4. Be productive and be awesome at it!

 

Functionality Design

To build this clock, I’m going to need a way to keep time or track it. While it would have been totally awesome to just have a pre-built timer method, we will have to use the setInterval method in Javascript.

The setInterval method allows developers to create a pacing to the function or program you’re writing. You can decide how quickly your program is counting and when it should cease.

To begin, I wanted to lay out the basic starting point of the application. By default, my application begins with a 25 minute session. This number is hard coded into the HTML, which is parsed into Javascript via jQuery’s parseInt() method.

The break time is also set to 5 minutes by default.

 

 

Despite the hard coded times I’ve predetermined, users can adjust the time using buttons to increment or decrement the clock. Buttons are available for both the main 25 minute session and the break session on the same UI. The buttons are only visible before starting the application. Once it starts, the buttons are hidden to prevent any accidental adjustments.

Once the user is done selecting their preferences, they can begin the application by hitting “Start”.

I also have a reset and a stop button, which is hidden until the 25 minute session has concluded. Alongside with the conclusion of the session, an alert with a buzzer sound bite is played to let users know that the timer is up.

After, the break clock will appear and begin counting down.

 

Tick Tock… Down the Clock

seconds() function is used to count down from the start time. The setInterval will decrement the count, one second at a time (line 12 of the above code) and continue on until the time has reached zero.

 

 

I did have to create a formula for converting the seconds into minutes and seconds. On line 45, I implemented the conversion using an if/else statement to ensure that once the seconds reached “60”, it would add itself onto the minutes and start over from “00”.

Once the count for the timer is down to zero, the function will then play the buzzer audio and clear the setInterval using clearInterval.

The break timer is then initiated to begin its timer using the same setInterval and clearInterval methods.

 

 

Buttons, buttons, buttons

To wrap up the application’s functions, I needed to build the functions for the buttons of the timer. A reset button to return all the application’s values back to its initial starting point, functions for incrementing and decrementing the times desired by the user to use with the timer and a set of buttons for incrementing and decrementing the time for the break.

 

 

Again, all the buttons are not displayed by default. Just the ones that are needed, depending on the state of the application you’re in. They remain hidden until certain conditions of the application has been met such as the timer reaching zero or resetting the timer. The display of these buttons are handled via jQuery using a .hide() method. The items, if they were not hidden, I feel would congest the UI of the application and appear confusing and hard to use.

The only thing I probably would do different if I were to rebuild this application again is to create a much more interesting UI, perhaps implement it using React and avoid having to hide buttons and displays. React would be a great solution for managing the application’s state and rendering what needs to be displayed while using the timer.