dweb

{ Dynamic Web }
Dynamic Web provides a summary of coding principles employed to build a dynamic web site using HTML, CSS, Javascript, NodeJS and AWS Architecture. The techniques shown below will produce a database driven website that dynamically creates web pages based on a url request.
{ AWS Architechture }
  • Route 53
  • Load Balancer
  • S3
  • EC2
  • RDS
  • Lambda
{ Follow A Request }
  1. Route 53 - processes site request and sends to Load Balancer
  2. Load Balancer - handles http(s) requests and sends to proper target(s)
  3. EC2 - serves the request
{ Inside The EC2 }
  1. HAProxy - picks up the request and sends it to the proper "Node"
  2. NodeJS - uses wildcard(*) method and middlewares to process and display request
  3. Redis - handles sessions for the Node application
{ In The App }
Express - defines a basic folder structure (MVC)
{ Folder Structure }
  • router - contains scripts for processing and routing a request
  • view - contains single index.ejs file that is dynamically updated based on request
  • public - contains scripts to display pages ( ie. css, javascript )
  • process - contains scripts that process content from a database, reads files etc.
  • lib - contains specialized scripts that dynamically builds static page for rich SEO
  • db - contains database connection scripts
  • cmd - contains scripts for minifying css and javascript
{ Public }
  • components - reusable scripts such as header, footer, messengers etc.
  • css - app wide stylesheets (ie. html, body and other main elements style)
  • js - app wide javascript (ie, window functioning, cookie and/or local storage etc.)
  • x-scripts - contains additional scripts needed for special tasks
  • zone - contains all scripts to build specific pages for the website.
{ In The Zone }
The "Zone" directory holds scripts that build and control a specific page.
  • _css - zone wide stylesheets
  • _js - zone wide javascript
  • init.js - script that initializes the zone
  • fetch.js - ajax function
  • show.js - script to display page - handles sizing of html elements
{ _js }
  • area - specific scripting for the zone
  • etc - addtional scripts
{ Minification }
  • All pertinent documents are minified to speed up page loads.
  • Public and Zone directories house the minified documents.
  • Only the css and js folders are targeted for minification.
  • During minification process relative paths are applied to css documents.
{ Wildcard(*) Routing }
  • URL is processed based on its name and not on a physical directory and index.
  • URL is checked against the database and then directed to the proper "Zone" for displaying page.
  • Middleware scripts are checked during page request. If a match is found the page is rendered or request is redirected.
{ Page Builder }
The Page Builder allows for the creation of a web page including text, images and videos. Text is edited by using the CKEditor while images and videos are accessed from AWS S3 Bucket. Images and videos are specifically tagged with type and size. A specific algorithm handles the scaling of images and videos. Text sizing is controlled with CSS.
{ Database Records }
  • Records consist of different types ( ie. pages, inventory etc.)
  • Inventory consists of images and videos used in building pages
{ AWS S3 and Lambda }
  • Inventory records are uploaded to AWS S3 and a reference is created in the database with size and type.
  • AWS lambda is used to run FFmpeg for the creation of video thumbnail during upload.
  • Images are scaled down if too large for web display and then sent to the AWS S3 Bucket.
{ Page Display }
All pages are mobile friendly and change based on screen sizing. SEE various types below.
  1. Classic Page : Page with side menu to the right
  2. Brochure : Wide layout great for large graphics and short text..
  3. Gallery : Image or Video gallery
  4. Text On Alpha : Text on alpha transparency over an image (on mobile goes to Wraparound Text)
  5. Wraparound Text : Text that wraps around image