Web Development Portfolio:
Tools and Software that I use:
-  Adobe CS6 - Photoshop, for image slicing, scaling, and other tasks.
-  Adobe CS6 - Illustrator, Acrobat Pro, for creating and manipulating vector graphics, SVGs, and PDF documents.
-  Sublime, text editor, for coding.
-  Google Chrome, for developer tools, and testing HTML5 compliance (as well as the other major browsers).
-  Codekit for web development projects, provides local server for live updating of web pages served across local area network. Includes features for compiling SASS,
LESS, & Stylus to standard CSS. Includes Bower plug-in. Facilitates minifying and concatenating files for speedier serving of web pages.
-  Bootstrap, framework with HTML/CSS templates for UI elements, and aids in mobile-first responsive design. Bootstrap uses jQuery plug-ins to add useful interactive
features, like carousels, persistent navbars, and more.
-  HTML5 Boilerplate, web dev project template.
-  NPM, node package manager.
-  Terminal, the Mac OS X command line interface, for working in UNIX / Bash shell.
-  Vagrant (and VirtualBox) for creating Linux virtual machines within a sandboxed development environment, ideally configured to match the production server environment
where a website, or app, will eventually be deployed.
-  Git and Github, for version control & code management. Code repository for sharing and collaborating on coding projects.
-  Fugu and Fetch, for FTP & SFTP uploading and downloading, with SSH capability, via GUI interfaces. Uploading or modifying websites can also be done from the command
line, but GUI's are often good enough.
- A sample web page  - This interactive web page is responsive, optimized for mobile devices and for desktop monitors. It includes an image carousel, a persistent static navigation
bar across the top, and two buttons for hyperlinks at the bottom.
- Placeholder  - For portfolio sample
Single page web apps:
- Placeholder  - Using HTML5, CSS3, and jQuery.
- Placeholder  - Using HTML5, CSS3, and Meteor.js + MongoDB.
Info. Graphics / Data Visualization:
- Placeholder  - static web page sample
- Placeholder  - dynamic web page sample, updates periodically via AJAX calls.
Images created using Adobe Illustrator:
- Adobe Illustrator SVG sample #1  - This is a vector graphics UI designed to be used in an Augmented Reality context. This UI is not yet interactive, but shows the visual interface
that will work as an alternative UI for a commercially available desktop application, a virtual synthesizer that responds to MIDI control, specifically the GForce Oddity 2 synthesizer.
This UI could be tailored for a interaction via a touch screen from a web browser, or more ideally via Augmented Reality in conjunction with an AR headset.
This UI is intentionally larger than the browser window, however you can still view it in it's entirety by using the arrow keys to move up or down, and left or right. You can also
scroll up and down with a scroll wheel, or pan left and right with 'shift' + the scroll wheel. You can zoom in or out by simultaneously pressing the 'command' and '+' or '-' keys.
- Adobe Illustrator SVG sample #2  - This is a schematic diagram for a vacuum tube amplifier. This image is intentionally larger than the browser window, in order to make it easier to read.
- Adobe Illustrator SVG sample #3  - This is a layout diagram showing the physical connections and components for a vacuum tube amplifier. This image is intentionally larger than
the browser window, in order to make it easier to read and view.
Adobe Photoshop - preparing images for responsive webpages:
- Placeholder  - Photoshop, used to optimize images for speedier loading times, for different screen sizes and device profiles.
Acquiring a domain name, a hosting service, and deploying a website:
- Placeholder  - Acquiring a domain name, a hosting service, and deploying a website to the server via secure FTP.
- Placeholder  - Deploying a website via SSH, using Fugu.
- Placeholder  - Deploying a website via GitHub.
Common web development tasks and workflows:
- Placeholder  - My current development set-up and tools: I'm using Mac OS X, Google Chrome, Sublime 2, CodeKit 2 (for a live refreshing local server +
pre-compilers for SASS, LESS, and Stylus), and also (html5-boilerplate_v5) for Bootstrap projects.
- Placeholder  - Using CodeKit to concatenate and minify files.
- Placeholder  - Compiling SASS and LESS into standards compliant CSS.
- Placeholder  - Configuring sandboxed development environment using virtual machine to match production server environment for trouble-free deployment of website.
- Placeholder  - how to use jQuery plugins, and grab one to add a needed component to a web page.
- Placeholder  - DOM traversal basics.
- Placeholder  - My understanding of how a Client and Server talk to each other.
- Placeholder  - My understanding of RESTful web services and GET, POST, PUT, and DELETE requests.
- Placeholder  - How to do GET requests with jQuery / AJAX.
- Placeholder  - Using Sublime Text editor, plug-ins and simple tricks to increase coding efficiency.
- Placeholder  - Using Git and Github for version control.
- Placeholder  - Learn to use, then show samples of using Mocha, Jasmine, and Karma for unit testing
- Placeholder  - Command line proficiency part one, using the Bash shell.
- Placeholder  - Command line proficiency part two, tips & shortcuts, using the Bash shell.
- Placeholder  - Using Chrome browser's development tools.
- Placeholder  - Adding Bootstrap dependencies to a project.
- Placeholder  - Creating webpage animations using Canvas and CSS.
- Placeholder  - Using JWPlayer to serve video from your own website, instead of using Youtube, Vimeo, or some other service.
- Placeholder  - Hosting a video server and using video playlists. Include info. on how to include advertisements between (or embedded within) video segments.
- Placeholder  - How to use an external caching service.
- Placeholder  - Preparing media content for optimized web serving. Detail the difference between web serving and progressive streaming.
The following links show examples of some important web development workflows and procedures that I've learned so far, as well as demonstrated use of
development tools for various tasks.
- Placeholder  - For portfolio sample
- Placeholder  - For portfolio sample
The following samples pages are from tutorial projects, each one demonstrating a different unique feature or capability, as described next to each entry.
User-Interface mock-ups / wireframing for app development
- Placeholder  - Keynote simple App mock-up sample.
- Placeholder  - Axure simple App mock-up sample.
- Placeholder  - Using Gliffy.com for simple diagramming.
- Placeholder  - Using Illustrator for more complex diagramming, and building symbol libraries.
The following links show application mock-ups using different tools, such as Keynote and Keynotopia, as well as Axure. Descriptions of workflow, diagramming
tools, and functionality are offered for each of these.
Back-end and Dev-Ops workflows and tools:
- Placeholder  - Using Vagrant and Linux virtual machines, sandboxing, LAMP stack.
- Placeholder  - Using Docker containers for sandboxing, collaborative development, and software deployment.
The following links show different tools and procedures useful for server-side workflows, and any other useful procedures or skills that I've learned that
may apply to either software development in general, or to deployment strategies.
audio / visual instruments and controllers.
About this portfolio website:
- This website was made using the HTML5 Boilerplate template, and uses Bootstrap and LESS. Bootstrap keeps the pages responsive, in this case the pages
are optimized for two sizes specifically, desktop screen size and smartphone screen size. It still works with tablets, but not as neatly. The persistent navigation
bar at the top of each page allows vertical scrolling while remaining at the top, and on smartphone-sized screens the navbar collapses, and a "hamburger" button
in the top right corner reveals a drop-down menu for site navigation.