The Making of Po Shen's Workshop

Here's a list of web development technologies I used to create this site, and how I used them. If you are curious about any of these, be sure to check out the Resources Page for links and descriptions on how to do some of these things yourself.

 

Overview

Localhost

Macbook Laptop Environment

  • Apache server
  • PHP - latest stable version
  • MySQL - latest stable version
  • PHPMyAdmin
  • Created Self-signed SSL certificate to use for development

Local Directory Structure

Set up a local directory structure to organize the site, and installed git to track version control. I typically use Bitbucket as a repository but chose to keep this website's project directory local for now.

Tools & Subscriptions

Used to use BBEdit text editor, but now I use Atom

Created an Adobe account, and used Adobe Illustrator to create the site images - mostly as SVG files. I like SVG images because they scale nicely on fluid layouts.

Also use Illustrator for creating mockups, flow charts, UI/UX design elements, and more.

Testing

I have an old tower which has Linux Mint installed, and an iPhone and iPad, all of which are great for testing the site on different devices and browsers. I also use a number of websites which allow developers to perform cross-browser compatibility testing. I'll list my favorites here soon.

 

PHP Back to Top

PHP was my first language (besides baby squeeks). After 15 years I've come to appreciate how much work the developers have done. I'd like better explanations and more samples in the API docs, but it has been nice over the years thinking, "hey, I need PHP to do X" and then I see they have a method for that.

Configuration Script

Set up a configuration file to:

  • Specify headers for security and cache control
  • Create an encryption string (a random nonce) for secure form submission (nonce is confirmed server side when forms are submitted)
  • Define constants for site paths (for cleaner code)
  • Define default timezone setting (required in php). For example: date_default_timezone_set("America/Los_Angeles");
  • Set coding to utf-8 for mb_* functions: mb_internal_encoding("UTF-8");
  • Tell PHP that we'll be outputting UTF-8 to the browser: mb_http_output('UTF-8');
  • Set database connection constants
  • Establish output buffering with ob_start() (buffer is automatically flushed at the end of each script, though I've done so explicitly by calling ob_end_flush())
  • Define a custom start session function
  • Set a custom error handler function

Document Fragments & Templates

Create global PHP scripts to include or require for reuse, such as page header, footer, sidebars and rollout panels. Including external scripts on pages really makes the code clean and easy to read and maintain.

I also use PHP to load only those resources needed by each web page.

 

JavaScript, JQuery & AJAX Back to Top

JavaScript & JQuery

I am continually happy to see how JQuery smoothly integrates with JavaScript. I appreciate having some understanding of JavaScript, and I think this gives me a better insight into when to use frameworks to speed things up, and to handle complicated code (like cross-browser nightmares). The JQuery API docs are really pretty good. I wish all API docs had such nice samples and clear explanations.

Form validation is done first client-side with JavaScript & JQuery (why bother the mighty server until you have to?).

AJAX

AJAX is used handle server-side form validation and also security by sending along a randomly generated nonce, or code, as a client-server handshake. I've utilized JQuery's implementation for this - so nice.

 

HTML(5) & CSS(3) Back to Top

HTML(5)

HTML5 shows how cool HTML is getting to be as it grows up. I like all the new stuff, and once I figured out how and when to use <section> and <article> tags, all was well in the world.

  • Use of tags, like <cite>, <section>, <article>, <figure>, <figcaption> and lots more (secret: I used php's htmlspecialchars() to display those previous HTML tags)
  • Use of HTML5 form input elements
  • Use of Aria accessibility attributes

CSS(3)

  • External style sheets. I like having a style sheet that has styles for the whole site, and then some specific style sheets as needed. This makes each file more encapsulated - I know where styles are coming from!
  • Global styles for fonts, line-height, box-sizing, commonly used elements, header and footer, etc.
  • Media Queries to modify styles for larger or smaller device displays.

 

Bootstrap Back to Top

I hear tell of those who express concern over everyone using Bootstrap components, styles, etc. for their websites. Bootstrap styles are customizeable. Moreover, it is quite helpful when creating sites with responsive design. I find it also helps me stay mindful of making elements large enough for touch devices. Truth is, I kinda like most of Bootstrap's default styles.

Bootstrap Components

Use of Glyphicons, Dropdowns, Navs, Breadcrumbs, Jumbotron, Alerts, Wells and more.

Bootstrap CSS

Grid system, Forms, Buttons, Helper classes, etc.

Bootstrap JavaScript

Dropdown, Popover, Alert, Collapse, etc.

 

Wordpress Back to Top

WordPress is used for the Blog. I manually uploaded WordPress (rather than using my webhost's one-click install feature), and created my own custom theme to keep the look and feel of Po Shen's Workshop.

 

APIs Back to Top

There are a whole bunch of awesome people out there who have kindly made their hard work available to us mortals, such as google maps.

Google Maps

Used google maps developer API to customize a fun map on this site's home page. I used my own .png image as a marker and added mouseover/output event listeners to change to size of the image, as well as display a nice info window when the user selects the marker icon.

Back to Top