Web Portfolio
This document is a work in progress.
Below is a showcase of my skills and abilities as a web developer. I’s broken into two major sections. The first section represents a set of Principles of Development, akin to Principles of Design. It contains a short description of each principle along with evidence that supports it in a concise yet thorough manner. The second section focuses on specific technologies and includes sample demonstrations of my work.
Principles of Development
Develop Technical Standards & Documentation
Communication is important, even if you’re sitting alone at your computer all day. Developers shouldn’t release their code and products out to the world without explaining what it does and how to use it. Commenting your code well, writing good documentation and style guides, and releasing a strong API are all essential skills for any developer.
Reference Common Libraries & Frameworks
Many developers like to start a new project from scratch because they want to use their own code. But why reinvent the wheel? One of the strongest principles a developer can have is the ability to reuse code—that includes old code they’ve written, as well as old code from other developers. The former involves abstracting reusable components, and the latter involves modifying or building on top of others’ code to meet your requirements.
- npm package: xmeter
- A default stylesheet with a set of tools that make designing with vertical rhythm easy.
Abstract Reusable Components
- Node module on npm: extendclass
- A simple prototype-based subclassing function. May be imported and reused in any project, eliminating the need to rewrite code.
Delegate Separation of Concerns
Functionality should be separated into components. Each component should be responsible for exactly one function, and perform that function extremely well. Object-oriented programming technologies such as Java implement this principle by nature. On the web, a site’s content, presentation, and behavior should be separated into HTML, CSS, and JavaScript, respectively.
- StackOverflow Answer: Is it alright use to
target="_blank"in HTML5?8 votes - A discussion on the seperable behaviors of HTML, CSS, and JS.
- GitHub Pull Request: w3c / elements-of-html / #14merged
- Changed JavaScript from automating inline styles to automating addition of CSS class.
Adhere to Semantic Versioning & Release
- Blog Article: Semantic Versioning
- My article on SemVer.
Effectively Use Branching & Workflow
- Blog Article: Branching Model
- My article on branching with Git.
Support Accessibility, Assistive Technologies, and Old User Agents
Maximize Performance
Stay Up-To-Date with New Features
Technologies & Systems
Diverse, Semantic Data
- GitHub Pull Request: jadejs / jade / #1703merged
- Moves tagline from hidden element to
img[alt] attribute. - StackOverflow Answer: Is it good to design a web page, using tags other than
<div>?4 votes - Mentions new sectioning elements introduced in HTML5.
- StackOverflow Answer: What is the difference between
<p>,<div>, and<span>in HTML & XHTML?4 votes - A discussion on Flow Content vs. Phrasing Content.
Microdata & Schema.org
- My Résumé
- My résumé is riddled with Microdata using the
Schema.org vocabulary.
Organizations, schools, cities, addresses, events, times, job positions, awards, people,
and even sports teams are marked up with the infamous
itemscope,itemtype, anditempropattributes. Scroll through the source code for the details. - GitHub Repo (soon to be an npm package?): referencelistWIP
- This program uses D3.js to generate a list of references from a JavaScript object. The output is in HTML with Schema.org microdata.
Layout, Vertical Rhythm, Colors, and other Design Schemes
- StackOverflow Answer:Force a group of dynamic links to hold still?2 votesaccepted
- A demonstration of my old CSS grid system.
- Blog Article: Flexbox Layout
- A tutorial on using CSS3 Flexbox to lay out a page.