Progressive enhancement
- Older browsers don't miss out on any functionality but the UX is richer in modern, capable browsers.
- Uses PIE polyfill where possible for older browsers
- CSS animations on icons(pulse) and profile pic(swing), pseduo elements use single colon syntax, rounded corners on form fields (input, textarea & buttons)
Header
- Icon font means support older internet explorer browsers as well as Retina screen Can apply CSS: background-color transition on hover and pulse animation
Menu
- svg with png fallback used for logo
Contact Form
- Cross Origin Request Sharing (CORS) part of HTML5 spec - ie8/9 use non standard XDomainRequest for handling CORS. jQuery doesn't support ie8/9 CORS, polyfill used. Also other rules apply such as contentType header must be text/plain.
Github pages
- Version Controlled with a repository in the cloud and UI interface of Github Cost effective (Free Hosting) on robust infrastructure
Jekyll
Why use Jekyll for content mangement:
- No Database layer = No db server, no db client means content within flat files that can be edited with text editor
- HTML Server not required minimal as built into program. No configuration required for apache, nginx
- Secure: As a static site so if it is hacked, users can't use techniques like privilege escalation to get access to the system resources no server side scripting.
- More flexible hosting options. Hosting cheap shared host
- Far easier version control. Version controlling programs with databases and where changes are done remotely is more involved.
Contact Form
-
Static site can not process HTML forms, so I built a webservice in PHP hosted on Appfog (free hosting tier) that processes form and spits back validation etc. Piggybacks off Postmark web service as an email server, sends HTML formatted emails.
Look and feel
-
Stripped away gradients, shadows, reflections, textures etc characteristic of web 2.0 for a flatter minimal design with retina compatabilities
Resources
- Minimal footprint (reduced HTTP requests) with minified javascript and single css file (SASS css preproccessing, requireJS AMD modules in development compiled for production)
Workflow
- Mac user, Virtual Machine test internet explorer
- GruntJS for automation (CSS pre-processing, Async JS Module loading and minification, bower for dependency management)
- Custom form elements
- Sprite heavy design use of css pre processors
- Hijacking browser functionality like scrolling
- Twitter API (depreciated)
- Wordpress, shared cPanel hosting environment
Git
- Experience with Amazon Beanstalk & Appfog intergrate git into their deployment workflow with command line clients