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.
•  jQuery javascript library, used primarily for manipulating the DOM, to speed development, and to reduce coding.
•  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.

     Interactive webpages:

• 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.
  It is currently without javascript interaction as this is an ongoing project.


• 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:

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  - 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.

     Native Apps for Android, using JavaScript, jQuery Mobile library, and Cordova / PhoneGap:

The following samples pages are from tutorial projects, each one demonstrating a different unique feature or capability, as described next to each entry.

• Placeholder  - For portfolio sample
• Placeholder  - For portfolio sample

     User-Interface mock-ups / wireframing for app development

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.

• 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.

     Back-end and Dev-Ops workflows and tools:

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.

• Placeholder  - Using Vagrant and Linux virtual machines, sandboxing, LAMP stack.
• Placeholder  - Using Docker containers for sandboxing, collaborative development, and software deployment.
• Placeholder  - Setting up a MEAN stack, 100% JavaScript! The MEAN stack uses four pieces of software: MongoDB, ExpressJS, AngularJS, and NodeJS.

     Fun with JavaScript and embedded processors / microcomputers:

• Using JavaScript with micro-computers, like the Beaglebone Black. This is a hobby interest of mine that combines programming, electronics, and interactive
  audio / visual instruments and controllers.
• Placeholder  - Building a JavaScript powered MIDI controller for a virtual synthesizer, using the Beaglebone Black.

     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.