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.
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.
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
- 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.
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
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
- 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.
Use of Glyphicons, Dropdowns, Navs, Breadcrumbs, Jumbotron, Alerts, Wells and more.
Grid system, Forms, Buttons, Helper classes, etc.
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.