Modern Design Strategies

The Challenge

Technology and Compiling Dependencies are Cart before the Horse is Ready, Process Management. Production begins before Mission Critical Content and Business Goals can be set.

Preface this with: There is so much to know, why not simplify when you can.

Set up 360 implementation when the Design is being concepted.

Set Implementation Journeys for:

  • Templates
  • APIs
  • Data

Vanilla CSS/HTML/JS can be utilized. Data Model and Logic with APIs and Live Data. Do not limit your UX to data that is dependent on ETL with time, or technical debt – gated access – dependencies. It is much easier, more secure, and collaborative to implement an API when in Prototype/Ideation. API Data is free and can be readily typed and transformed, in real time. User and Role Management can actively be modeled per Compliance and Product Requirement. Holistically think of Front End, ERMs, Omni Channel, Omni Device, when in Product Dev.

Establish use anywhere transport anywhere Design and Product Ideation Tool Chain. Create Data, Typing, Cacheing, Storage, Fetching that can be copied and pasted with Vanilla Logic Usability to any CMS, CRM, Database. Free to use tools that can push to any Cloud: AWS/Google/Azure on Prem Postgres. Can automatically sync with Token Managed Data and Role Permission workflow.

Use Script as needed in Nested Templates that can be updated without a build that will break. Script should apply to Omni Channel, Multi Device, Global and Personalization, without complex build and deployments that will break applications. You do not need a database, to get started. APIs can build and scale without setup, cost and flexibly scale to need and automation.

The Front End should be Design and Brand Rich. Use the Reverse Mullet Approach. Party should definitely be in the front.

Minify, optimize for Testing after usability has been defined. One of the great things about “Modern, Emerging” Frameworks like Svelte Kit/11ty, is that they will let you simultaneously plan Front and Back End with code splitting and Hoisting Strategies that don’t involve a lot of technical knowledge.

In spite of being efficient and known workflow unstructured compiles like SASS will override historical compiles. Last compile, will break Live Operations. Vanilla usage of Variables and Structured File Systems can be utilized to simply outline update process.

Non Destructive Development should be adopted when possible. All Stakeholders will be postively enabled with this strategy at forefront.

APIs for beginners

An API is generally a JSON based list that can serve as a Dynamic DB or source of UI data.

Programatically bring “server side” dynamic schema to “client side”, Viewport/DOM. Select, Query, with CRUD: Create, Read, Update, Delete operations (see Xano). Functions and Logic can be moderated with simple directions. Client and Server Side can be set up with User and Product Defined Logic and Planning.

Database UX and Prototyping

Xano

Dynamic Data Endpoint Manager. Resolve and Push Logic Modeled Data, in Real Time. Easy setup.

Customized API Modeling and Publishing

API endpoint with Swagger CRUD (Create Read Update Delete) operations. Publish unique Data endpoints. 

Replace a traditional Database with unbreakable secure dynamic endpoint gives the product development process extreme flexibility with real time design / prototyping /deployment opportunities.

Type, Schema Model, plus *Nested* Functions. Conditional POST, Transform, Publish, Sync via on demand API creation.

Collections including users and role management can be referenced in logic tools that are drag and drop. Real Time Block Ledger can be logged with timestamp and forwarding usability.

Use as Documentation, and or as an Asset Manager. Can be linked to the front end to live update without breaking published deployments.

Join and analyze data safely with complex conditions, that are outside of “proprietary” application layer that is protected by security Guardrails. (ie: Medical ERPs, Enterprise CRMs, Protected Databases)

Push and Pull data in real time, or on a schedule, with access control, moderation and scaling with CI/CD (Continuous Integration, Continuous Deployment) real time operation – with timestamps – workflows.

The technical stack is Docker, Postgres SQL, Kubernetes, Google Cloud.

Authentication APIS: Magic Link, oAuth, Memberstack, Wized can be connected via a token based workflow.

Health History Schema
Health History Schema with Block Ledger and Real Time Function Modeling Endpoints. Hooks to embedded VUE based intake workflow, with Vanilla File System. APP can be embedded anywhere: Web, APP, Mobile, Point of Sale, Medical Device.

Monitor and Model Data with secure token managed entitlement in Back Office Portal. Private Secure API keys are stored without visibility to Public Facing UI / UX Functions. Data Endpoints can be secured with .env File System. Data Synchronizes without public accessible feed exposure.

Put all HIPAA based operations into private synchronized Back End/Serverside Operations and Conditional Logic.

Conditional Data Store, State Management can be passed down or published to external synchronized API and User Segmentation with real time versioned data ledgers.

Xano

8base

Native Salesforce and Stripe API integrations with token management.

Entitlement and Role Based Management Tools are default Amplify/Cognito

GraphQL based data modeling tool.

Query/Mutations based workflow with drag and drop schema management. Super easy to use. Roles Management (for compliance: HIPAA/PCI) is managed with simple drag and drop lo code, highly collaborative, development work flow. 

This product has native real time connections to Salesforce, and to Stripe, without any configuration or security risk. Instantly access 250 plus Salesforce API endpoints without exposing, Admin/ Primary Developer Stakeholder only access to private information. Great tool for Design and Marketing collaboration. Information is updated in real time, privately with greater security than standard Database, or SQL managed data, that needs ETL strategy. The data interacts in real time, with business logic determined by Content Stakeholders, not limited by technical stack. Workflows and white listed management endpoints can be managed with a team, in real time, without risking proprietary development data risk.

As a default, 8base has built in authentication using AWS Cognito. The application backend is an AWS, stack. 

This workflow is perfect for gated private Dashboards with Subscription management, pre built.

You can also customize users roles and authentication methods, with tiered authentication management UX modeling tools.

8base
AWS Amplify

Supabase

A Headless Database

Firebase like API Builder

Database Alternative

Substitute this open source Database, with Row Based Ledger Services. Access Moderation and functions. Utilize Row Based Security. Permissions setting with conditional usage. Fully HIPAA / PCI compliant.

Data can be served with API endpoints and pointed to “gated” Enterprise Data Serving or can be utilized as a free to use “middleware” data store.

User and Role Moderation is Token based with moderated usage. Can utilize Javascript (Vanilla), Python, Dart (Flutter).

Free to use low barrier entry. “Upgraded” usage is $25/month with unlimited API calls – No Rate Limits, per Enterprise requirement. Open Source and Schema will export to on premise Data Models after Proof of Concept/Schema has been developed.

Supabase

Templates and File Systems

11ty

Templates and Compiling in File System 

Natural Content Curation with GIT based CI CD

Nested Templates with Partials and Collections built into the dynamic CI CD workflow can be simply managed with 11ty, and nested component (any: Svelte, Vue, SVG-Spline/3D/Geo, React).

Fully reactive, with logic, loops and conditions that can be combined with any combination Framework: Angular, Vue, React, Svelte.

Context “head” can be modular and bring in Node based packages based on logic.

This is a “vanilla” approach, to a similar workflow for Nuxt/Vue, Sapper/Svelte. Support for Liquid/Markdown, Nunjucks, GO, Handlebars, Mustache, EJS, Pug is supported.

After the Atomic Design has been set up:
Templates, Partials, Design Strategy has been compiled and organized. Download static / asset bundles. Make sure Accessibility components are labeled. Test speed and minify CSS/JS.

Now it is time to define Cacheing, Meta Fields and Omni Device Strategies. This will include JSON Manifest file and Service Worker, set up.

Use regular UI/UX development patterns. Templates, Partials, Collections, and front matter, that sets up variables and scope. 11ty is a collection based compile/framework with a build process and front matter with a Design Rich UI Template system. Logic and conditional dynamic file rendering is practically done. Addition of PWA tools generates a Design Friendly front end development system.

Routing and Files are natural HTML based. Dynamic Data is generated with JSON/List management and linked/nested templates. Add Manifest Elements in Global Templates/Wrappers.

<head>
    <title etc…>
+   <meta name="theme-color" content="#f00">
+   <link rel="shortcut icon" href="/favicon.ico">
+   <link rel="apple-touch-icon" href="/path/to/icon.png">
+   <link rel="manifest" href="/path/to/your.webmanifest">
</head>

Use built in logic and cacheing included in Frame Work and File Structure.

<script>
const Cache = require("@11ty/eleventy-cache-assets");

module.exports = async function() {
  let url = "https://api.github.com/repos/11ty/eleventy";

  /* This returns a promise */
  return Cache(url, {
    duration: "1d", // save for 1 day
    type: "json"    // we’ll parse JSON for you
  });
};
</script>


/* cache remote images - Asset Management Friendly */
<script>
    const Cache = require("@11ty/eleventy-cache-assets");

module.exports = async function() {
  let url = "https://www.zachleat.com/img/avatar-2017-big.png";
  let imageBuffer = await Cache(url, {
    duration: "1d",
    type: "buffer"
  });
  // Use imageBuffer as an input to the `sharp` plugin, for example

  // (Example truncated)
}
</script>
11ty Resources
PWA Plugin

Core Concepts

Javascript Logic

Jargon

  • The core set of data types are:

    • Numbers
    • Strings
    • Boolean
    • Objects
    • Arrays

  • Variables/Nouns – ‘the name’ and Operators/Verbs ‘the action’. Typical script would be declare/name an object, make changes to it with evaluation. Javascript will use math like notation to enable actions. +,=,==,!=, <=, >=.

  • Functions. Are like Paragraphs, can be combined actions with logic and squence.

  • Arguments / Parameters are attributes of the data that build the Functions.

  • Control Structures are conditional statements like if, else, switch. Loops will map through objects/parameters and model them with iterative filters and list based mapping.

Query the “Client Side” DOM

Each “semantic” section with an ID can be Queried and “value” can be isolated for DOM manipulation. Core concepts: 

document.getElementbyId(‘name-of-class-or-sectionID’).value

can pull the #element and mutate within the DOM Logic Tree, or push to “client side” data storage and manipulation.

This process can be threaded, or asynchronous – multiple query/returns are outlined in API building tools: Xano, 8base and or Collection/JSON/Template live update tools: 11ty, Svelte Kit.

Data can be managed with state management stores, in file system (11ty, Svelte Kit) or with native cacheing preloading in SVG C Data with use in call back stack.

SVG Viewport is a native DOM 
//SVG C Data - you can embed minified base 64 js and css in "head configuration" of widget. Use anywhere

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
        <style type="text/css">
            /* <![CDATA[ */
            .some_styles {}
            /* ]]> */
        </style>

        
        <!-- SVG content here -->
    </svg>
</body>
</html>

//Inline SVG JS
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
    <script>//<![CDATA[
        …code…
    //]]>
    </script>
</svg>


//External JS File | Base 64 for minification
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
    <script xlink:href="external.js" />
</svg>
If you use SVG with interactive functions you can design with Responsive CSS/JS media from Illustrator (Figma/XD) Prototype.

SVG is the OG “React” Component. It works every where. Pivot the compile and minification before deployment. Concept UI/Layout first and then add script.

In the “olden” days, we used to do the design first and then optimize / build script.
Interactive SVG
Inline Javascript

Selectors

Query

Selection of W3Cag Standardized query calls. After selectors have been modeled with “Client” Side operations. Methods and State Dependencies hooked links to “Server” Side should be defined with as much rigor as “what it looks like”.

Selectors

Static Export from Webflow

Utilize use anywhere / JAM stack for use in any Web, Native, APP build process. Fully Vanilla CSS/JS Responsive with Accessibility and Content Modeling Version Control.

Export / Collaborate / Prototype / Collection Model CSS JS HTML with Collections

Add a manifest.json and service worker with Cache Strategy to your stack and you have a very quick PWA. Publish to GIT/host with Netlify. SSL and CI CD in a few minutes. Scale and grow with ideation and multi channel stakeholder input. Schema model with APIs in real time.

Webflow to PWA

Unity UI Builder

2D view is a Global Viewport. Web, Mobile, Device and App Build can provision to Gaming, Web, Point of Sale. API feeds and live data feeds can be incorporated into the Product Development Lifecycle.

USS/Unity CSS, JS, JSON building tools with a graphical interface. (A lot like Webflow – you can stack in Build System)

  1. StyleSheets: Manage StyleSheets and USS Selectors to share styles across UI Documents (UXML) and elements.
  2. Hierarchy: Select, reorder, reparent, cut, copy, paste, delete elements in the UI hierarchy of your document.
  3. Library: Create new elements or instance other UI Documents (UXML).
  4. Viewport: See what your UI Document (UXML) looks like and edit elements visually directly on the Canvas.
  5. Code Previews: See what the UI Builder is creating as text for both the UI Document (UXML) and the StyleSheets (USS).
  6. Inspector: Use it to change the attributes and style properties of the selected element or USS selector.
Unity UI Builder

PWA/Progressive Web App

Web Based File Stack/System/Configuration that will compile to “static-converted files and suffixed file types”.  Native Application Wrappers, can convert to Native Apps with access to device-mobile specific usability.

  • Must run with HTTPs or Localhost

  • Must have Manifest JSON file

  • Must have Service Worker

  • Must be responsive

  • Any vanilla stack can be a SPA/with Framework and Data Handling. 

    Straight CSS, JS, HTML, with a caching strategy will work.

Service Workers
A service worker is a JavaScript file you add to your website. You can use it to do offline and background stuff, such as make your website display pages when offline or display push notifications when your site is not open.

Manifest JSON file.
This is a list of description, meta data and “header” information that is required when provisioning is set up for Native Eligibilty and Publish.

Button

Service Workers

Generate cache, that enables offline first usability. Add cache strategy by adding wildcard JS/CSS/images to precache/cache. These will be the files that appear without connectivity.

Workbox is a prebuilt library that enables Service Worker, cache management.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

workbox.routing.registerRoute(
 /\.(?:css|js)$/,
new workbox.strategies.StaleWhileRevalidate({
  "cacheName": "assets",
  plugins:[
	new workbox.expiration.Plugin({
		maxEntries: 1000,
		maxAgeSeconds: 1800
	})
  ]
})
);

workbox.routing.registerRoute(
 /\.(?:png|jpg|svg|gif)$/,
new workbox.strategies.CacheFirst({
  "cacheName": "images",
  plugins:[
	new workbox.expiration.Plugin({
		maxEntries: 1000,
		maxAgeSeconds: 1800
	})
  ]
})
);

<script>
    if("serviceWorker" in navigator){
    	.register ('../sw.js')
        .then (reg => console.log('Service Worker: Registered'))
        .catch (err => console.log('Service Worker: ${err}'))
	}
</script>

//sw.js file

<script>

const staticAssets = [
'./',
'./css/styles.css',
'./js/main.js'  
];
    
    
//Call Install Event
    self.addEventListener:( 'install', async e => {
    	const cache = await caches.open(cacheName);
        await cache.addAll(staticAssets);
        return self.skipWaiting();
    });
    
    
 //Activate
     self.addEventListener:( 'activate', e => {
    	self.clients.claim();
    });
    
    
//Cache Cleaning
 async function cacheFirst(req){
    const cache = await caches.open(cacheName);
    const cached = await cache.match(req);
    return cached || fetch(req);    
 }   
    
async function networkAndCache(req){
	const cache = await caches.open(cacheName);
    try{
    const fresh = await caches.open(cacheName);
    await cache.put(req, fresh.clone());
    return fresh;
    } catch (e) {
    const cached = await cache.match(req);
    return cached;
    }
    }
}
</script>

Manifest JSON 

{
  "name": "Your site – a cool web app",
  "short_name": "Your site",
  "description": "Here goes your awesome description",
  "icons": [
    {
      "src": "icon32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "icon512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "index.html",
  "display": "fullscreen",
  "theme_color": "#f00",
  "background_color": "#f00"
}
Add Service Worker with Strategy and Manifest File with ICONs and requirements per Device/OS. Wrap in OS Provisioning. Serve entitlement and distribution with Stores, Cloud Services: AEM, Unity, Torrent/Peer Sharing.
Manifest JSON Builder

Omni Device Provisioning

References

You can design with single application tools. Provision and data model utilizing Vanilla / Headless Stores and Logic Mapping Tools.

11ty Resources
PWA Plugin
Workbox
Service Worker Reference
Svelte Kit with Capacitor Apps

Capacitor

Provisioning Mobile Apps with Native App Shell.

Regular JS, CSS, HTML with Data Handling, State Management, wrapped in provisioning that also has access to Device Specific features: mapping, camera, push notifications, geo sensors.

Permissions and alerts can also be modified with prebuilt tools. This is similar to Cordova/Phonegap with modified usage. “Standard” app submission and distribution to App Store applies.

Capacitor

Bubblewrap

Android Native Wrapper with access to TWA (Trusted Web App) functions: Native Usability: Push, Bluetooth, Location, Camera etc.

With PWA and minimum Lighthouse Score of 80, a native application can be made using command line provisioning

Simply reuse web based templates/data/API s in real time and wrap with Native Application and CI CD deployment.

Bubble Wrap

PWA Builder

Auditing Tool for PWA readiness/Lighthouse Score.
Utilizes Bubblewrap as a deployment tool.

PWA Builder

Unity

Unity App Provisioning Tools.

Utilize 2D and 3D geo spatial View Ports and App Wrappers. Distribute utilizing Gaming and Multi User entitlement, cloud and distribution network.

SDKs and Plugins include: Shopify SDK, Vuforia/AR/VR plugin, Pro Builder Architectural Modeling and Scenes Builder, GEO Spatial After Effects/Cinema 4D plugins. Prebuilt gamification, level strategy tools are enabled with package import.

Includes can include any JS/CSS static library and codebase.

Unity Provisioning
Yoonsun Lee

Portfolio

© 2020 All rights reserved. Powered by Yoonsun Lee.