think-a-doo

tech check

thinkadoo@gmail.com

HTML5 and CSS3 Patterns


Design

A HTML5 CSS3 design demonstrating:

  • Forms
  • Graphs
  • Tables
  • Email
  • Lists

I buy a foundation theme like the example above and use the components to build a user friendly interface for business applications.


Mobile

Designed for all screen sizes and purposes:

  • Monitor
  • Control

This is an example. I normally buy a professionally designed theme and build on it instead of reinventing the wheel.


Photos

A simple application which demonstrates:

  • Bootsrap
  • Hacking CSS
  • Responsive behaviour

Quick fun "freestyle" css hack.


Calendar

A simple application which demonstrates:

  • Bootsrap
  • FullCalendar
  • OverRiding CSS

Planned CSS Styling in Bootstrap over riding the native application theme.

PHP Patterns


CRUD

A PHP application demonstrating:

  • List
  • Create
  • Read
  • Update
  • Delete

It opens with a form. After the form is filled in or skipped, it takes you to a list view. The list view shows you what is in the Database Table linked to it. All data administration applications I have created, have these features in common.


Graphs

A PHP application with Javascript for the Graph implementations:

  • JQuery DOM
  • JS Events
  • CRUD

The two graphs get their data from the table below them. JQuery is used to select the values in the DOM. This DOM based approach does not scale well in application programming. This application proves I can do it.


Gallery

File management is a feature in every business application:

  • Uploading
  • Image Processing
  • Content Management
  • Displaying

Building on the CRUD pattern you have seen so far, this application adds file management. It changes file names of the files you upload to a guaranteed unique name. It produces thumbnails. It can watermark images.


Mobi

The Mobi application demonstrates a blended approach:

  • Silex MVC
  • Silex Rest API
  • Symfony PHP libraries
  • JQuery Mobile
  • Ajax Data
  • Ajax Views

Using a server side MVC approach while implementing JQuery Mobile for views. The view is served up by PHP and the data is rendered with JQuery after an Ajax call to the API returns.


API

This application is a comprehensive tech check:

  • PHP blended UI
  • ReSTfull API
  • Unit Tests
  • DB Migrations
  • Entity Scaffolding
  • Modular Architecture

The aim is to show how a code generation/scaffolding approach can improve consistency in team development scenarios. How API testing is done. How Data Migrations work with Symfony libraries. How to implement a modular application.


GitHub

See the API application here:

  • "src" contains (mvc) modules
  • "tests" is just that
  • "web" is www or htdocs
  • "db" is migrations manager
  • "builder" is the scaffolder
  • "builder" will accept UML soon

In the API project you can see code quality and standards applied. Composer is used for dependency management. This link is probably the best to evaluate my current PHP5 work. Thinkadoo is my PHP related GitHub account.


Prototype API

See the API Prototyping application here:

  • Create Table
  • Create Fields
  • Set up Relations
  • Consume the API CRUD

This is my API prototyping solution. I develop AngularJS or AureliaJS Apps and need a quick API with CRUD using ReST level 2 convention. This app does it all from the browser.


Prototype Blog

See the Prototype Blog here:

  • Access the API
  • Get a response
  • Iterate over results
  • Render Blog

This Blog uses JQuery to get the content of the "posts" table created on the Prototyping application.

Javascript Patterns


Todo

An AngularJS (client) application which demonstrates:

  • Modular Architecture
  • MVC separation
  • Offline first design
  • Local data persistence

Modules are the foundation of large application maintainability. This version of the app shows how to make a basic MVC separation of concerns and wrap it in an AngularJS module. It is an opinionated implementation.


Employees

A Durandal (client) application which demonstrates:

  • Modular Architecture
  • MVC separation
  • Offline first design

This application demonstrates the use of Breeze to manage data on the client. It demonstrates how the client server relationship can be redesigned with a Fat Client architecture in mind.


GitHub

See the JS applications here:

  • todo

This link is probably the best to evaluate my current JavaScript work.


Dashboard

Designed for all screen sizes and purposes:

  • Monitor
  • Control

This is an example. I normally buy a professionally designed theme and build on it instead of reinventing the wheel.


NoSQL Local DB

A simple application which demonstrates:

  • Local NoSQL
  • In Memory DB
  • IndexedDB Wrapper
  • Local Persistence

An IndexedDB used to support a NoSQL DB API (www.forerunnerdb.com). You dont have to query the IndexedDB way to use its persistence features.


PouchDB

PouchDB syncing with CouchDB:

  • Local persistence first
  • Remote sync second

This AngularJS application focusses only on local persistance and gets sync to a remote db for free. Its a "think offline first" example which clearly demonstrates the benefits of that approach.


Aurelia

A simple application which demonstrates:

  • Seperate Domain from Infrastructure
  • ES6 develop ES5 release

Durandal offered the right value on top of Knockout and jQuery. Aurelia re-thinks the solution and refines the approach. It is revolutionary.


Template

A simple application which demonstrates:

  • Async : Sync
  • Data Wrangling
  • Template Rendering
  • Local Filter

Call two Api endpoints for data that needs to be combined. Render a report with JQuery and filter it interactively.

Architecture Patterns


Microservices

An introduction to microservices:

  • Build the smallest and simplest components as services
  • Deploy these services independently
  • Orchestrate them using a REST like API
  • Focus on Simplicity
  • Devops and Docker is the foundation




Platform Investigations


METEOR

A complete platform:

  • One language everywhere
  • Unified package system
  • Hot deploys
  • Live updates
  • Radically less code

Meteor is a complete open source platform for building web and mobile apps in pure JavaScript.


Android

This site as an Android Application demonstrates:

  • Polling live updates
  • Local storage
  • External content
  • Native events access
  • App vs Site

You can dowload the App here from your Android device Browser. It should prompt you to install it. You will see a polling example along with this site content dynamically imported into it.