Real Time Collaboration

About this blog:

This is a VUE based builder (not optimized) for experiments on “legacy” SQL based systems with a database. VUE can live on any platform: Drupal, WordPress, Shopify, SF Commerce, Magento, Site Core. Dynamic APIs can be rendered within this blog or exported for Client Server Rendered workflows. Familiar editing and page building, can be utilized for proof of concept tools for someone who is familiar with CMS like WordPress, Drupal, Salesforce, AEM. Vue/React components can be built to mirror the non “optimized” content contribution. The same codebase/iframe GraphQL feed can be structured externally.

More modern cms: Directus, Sanity, Xano, Retool, Supabase, can be modeled from the Layout, Framework, Mapped Design within this editing model. GraphQL and APIs can also access ACF and Custom Fields created within standard publishing, that might already exist within the organization.

It is not an example of optimized workflow.
See Sanity, Directus, Next JS file systems and dynamic publishing.

I know this is on a “slow” wordpress environment.

Strategy

You will need more than a flat visual plan. You need to address 360 management, content creation and purpose.

How will the Design Pattern be used? What are the functional requirements? Usability that is more than “just responsive”

  • Does the design need to be evergreen with brand
  • Does the page / product need to be dynamic
  • Does the page need to load quickly
  • Does the primary user need to collaborate
  • What are the security requirements?
  • How are passwords managed and updated
  • What are your “collections”
  • What are the dependencies of the collections referencing each other
  • Are there other APIs that need to connect: ie warehouse management, events and logic managed by GA4, metrics and reporting, data moderation and update watchers
  • Who needs to update the information
  • Where does the ability to update design live?
  • Do you need Dynamic Pages, Collections, Products
  • Where do the forms post and what are the tracking / triggers that alert in real time

API based file system

Use when you need a “reactive” with “typescripting” collection workflow and file stack, in a database.

API first file system that can deploy to Database based deployment

API based file system

Use when you need a “reactive” with “typescripting” collection workflow and file stack, with a cloud / local host workflow. Cloud and Desktop automatically sync.

API first file system that can deploy without a database

Data Fetching / Rendering 

Secure API data is in the file system. GraphQL and Groq enable “designed” query logic.

Advanced Rendering Patterns. Selected Dynamic Methods of rendering based on usability.

Types of Rendering Dynamic Content 

Next on top of  React. Why do we need this?

Next solves multiple pain points for React. 

  • Breaks up monolithic compile bundles that serve at client. Next can incrementally deliver components to client with logic with security that includes entitlement.
  • Next provides “head” configuration that holds SEO/ADA/CDN-Global CSS, JS, API hooks linking
  • Next and .env provisioning provides secure data fetching and cacheing needed for Apps and IP based workflows including combined web, and PWA deployment. (Framework, can cache on web or device) active real time data/content/security can be pushed via service workers (caching) and document manifest. (Hybrid Web and Mobile Device workflows). A mobile application is: UI, Feed, and wrapping in native “zip” file.

SSG Static Site Generation-Plain HTML, CSS, JS hosted at a Serving endpoint / CDN.

ISR Incremental Static Regeneration-Data Providers utilize Client Static Framework with Data Source. Dependency of Data to Load strategies need to be built in between Skeleton Client Side Logic and API calls to Dynamic Serving Endpoints.

SSR Server Side Rendering

CSR Client Side Rendering

Data / API and Skeleton Design utilize combined inline, Atomic, and Conditional UI.

Pages / Components are divided into Pre Rendered Pages and Pages that are available on demand. In Next JS you have a “configurable” Head as a Semantic Element, that will allow for rendering logic and inclusion of Meta Data that includes SEO, and dynamic fetch requirements. Static / Components have this as web defaults.

Collections: Products, Blogs, Users, Pages (are a subset of Collections) and references to Semantic Items (Navigation, Header, Sidebar, Title, Subhead, Image…) can be created in a File System that is managed by linking architecture, regardless of serving, CMS, CRM.

Usability Tools like Sanity, Directus, Webflow Collections lets the Schema/Data to be “typed” and published into API available endpoints for data fetching. 

“Typescript” is “designed” with WYSWYG collection mapping.

File system is agnostic to CMS, CRM, Build engines. React/VUE/Svelte/E Com/CRM can host the same full stack application, without jeopardizing guardrails/and or secure configuration management.

A New Approach

Boil the Ocean

You will need to overhaul the entire system to effect change. Thoughtful Design with a content lead Design makes sense.

The responsive templates of yesterday, will need to be modified with new strategies. It is very easy to get to 300 different hex shades of the “corporate” blue, when you have multiple people pushing an endless CSS list to a single compile, that keeps on growing.

Modifiers will help to simplify Design Challenges.

Tailwind, UI Kit load attributes to the side of classes. This makes design and code a lot simplier/cleaner.

Reasons why non linear CSS/Semantic architecture is important. Accessibility can be structured, when 360 content (that is vanilla CSS/JS) is created. Meta and SEO data can be curated and paired with Accessibility and SEO Tagging for 360 Campaign and Content strategy. 

Minified and Compiled CSS – with GIT enabled CDN – publish, can be published and updated in real time, without disrupting Live and Deployed Tested Build Process.

Design Patterns

Shopify Case Study

Next JS Hydrogen Headless Shopify

Design and File System Patterns for Headless E Commerce

Next E Commerce and comparison to Shopify’s Hydrogen File System/Component builds. Comparison study.

Even if you don’t use Shopify for e commerce, you can use the APIs and user tracking for segmentation and targeting. Transactional Flows can be used for deposits, customization, and fulfillment. Events like deposits have been made and links to delivery APIs can be connected without a lot of infrastructure creation. (ie some customers purchase tiered level of service, some customers purchase custom orders) Shopify Customers and Orders can be tagged and trigger events that tailor to individual user or entitled checkout experience.

Headless Shopify allows for transactions to occur securely within walled deployment and application builds.

Atomic Samples

Modifiers Designing Semantically

Design Systems are not equal. Responsive design that allows for side modifiers over a “stack” of attributes, will simplify existing state.

Addition of modifier libraries can also help legacy systems that “break” with updates, and cannot fold into Global Strategies: Flex, Grid.

UI/Real Time Data Loading

With “traditional” Data Warehousing (a Database), UI could exist with a simple stackable compile. Watchers like Gulp, Grunt could detect CSS/JS updates and compiling to a running list. (Bootstrap, Foundation, Material Design – the CSS that appears last, overides the former)

Now with Data and API dependent on data and UI with Lifecycle Mounting Tools: React/Vue/Svelte, state and UX needs to be applied to a non linear design strategy. You can load UI with state and logic, by creating #Semantic UI with attributes, that side loads.

Semantic Design Libraries: Tailwind, Semantic UI, Ant Design, UI Kit lets you side load data inline, with conditional logic, without triggering a class change. 

Switch UI with hashable #data modifier (VUE)

Change usability and UI with modifier based design components and easily managed logic. Load any #hashable div, and or API / Schema managed / Life Cycle Hook.

Programatic UI / Lifecycle Loading/VUE

Utilize File Systems and Conditional Data Typing to outline and structure functions and logic. If you cannot compile (React/Next). You can substitute Vue in “legacy” CMS flows: Angular 1 and 2/VUE based UI, CMS, CRM any static HTML.

<div class="uk-margin-remove-adjacent">

<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">New User</a></li>
    <li><a href="#">Reorder</a></li>
    <li><a href="#">Cart</a></li>
</ul>
<ul class="uk-switcher uk-margin">
    <li>  <a href="#" uk-switcher-item="2">  Switch to item 3</a></li>
    <li>  <a href="#" uk-switcher-item="next">  Next item</a></li>
    <li> <a href="#" uk-switcher-item="previous">  Load Account</a>
    <div class="uk-align-right uk-margin-remove-adjacent">
    <ul class="uk-iconnav">
             <li><a href="#"><span uk-icon="icon: bag"></span> (2)</a></li>
     </ul>
    </div>
    
    
    
    </li>
</ul>
</div>

CSS / Collaboration

Visually collaborate, minify and reset before build

You can include in static build and or component based (Next) (Vue/Svelte) compile.

Publish to static 11ty file system by default.

Use with Tailwind or Vanilla Design System. You don’t need to just use 1 library. 

Simplify based on need.

Webflow Content and 360 Product Curation

Similar output and flexibility to Tailwind. Webflow CSS has the additional advantage of Visual Preview.

VUE/Svelte can be nested into head/page/div/section configuration of static Webflow build tools. Use Webflow static file system instead of Nuxt, Sapper, Sveltekit, with the same output, and dynamic Accessibility/SEO Modeling opportunity.

1 click template/page/UTM routing converter can export to Markdown/11ty CMS with CI CD vanilla CMS build to 11ty.

Infinite Scaling and Deployment can accommodate Automation, GEO/Globalization, Personalization Dashboard Management.

Export static HTML/CSS/JS to any component building template system: 11ty, Next, Nuxt, Sveltekit. Use with Tailwind. Animation and Full Screen iframe/form code are supported in the CSS/JS.

Vanilla CSS stack with prefix / BEM naming opportunity
Vanilla CSS stack with prefix / BEM naming opportunity

Add vanilla responsive Usability and ADA Compliance code to Figma conversions. Export to any template system

Generate validation and form methods and test to APIs and webhooks. Use export like Angular, or POST to form endpoint.
Vanilla CSS stack with prefix / BEM naming opportunity

Utility Based System Design

UI Kit and Tailwind

Both systems have modifiers and small components with code libraries that can be copied and pasted, with great documentation.

Systems plus, with Modifiers

Rethinking Bootstrap, Foundation, Material Design

Most of us and many themes, templates rely on old school kickback Bootstrap, it is time to revisit how these systems effect ability to effectively design.

With the advent of PWA to App Development the Design System is no longer embedded into the static asset serving stack. 

Simplified modeling and Global / Scoped Design needs to be outlined.

Utility First

Traditional Example


<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

With Modifiers

Tailwind

Use Tailwind as the containers, and include an atomic design system in the master CSS. Use multiple systems, based on Content Collborators’ level of expertise.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

Tailwind Components UI

Components that can be copied

UI Kit

More than the basics

In addition to the basic UI Containers, you can manage Animation, Semantic Viewports, Data Loading. Vue Based components, that are protype friendly.

 Functional Components (e.g. Notification) should omit the element parameter.

// Passing a selector and an options object.
var sticky = UIkit.sticky('.sticky', {
    offset: 50,
    top: 100
});

// Functional components should omit the 'element' argument.
var notifications = UIkit.notification('MyMessage', 'danger');
//Vanilla JS
Selecting DOM elements using the # or . notation: 
document.querySelector('.button')

Waiting for page DOM to load:
document.addEventListener("DOMContentLoaded", () => { ... })

Executing AJAX requests:
fetch('/api.json').then(response => response.text()).then(body => console.log(body))

Utilize API first file systems on top of “legacy” deployment. Create a file system and serve on in database, CMS, e commerce engine of choice.

Examples: Sanity, Directus generates add ons for data and can deploy anywhere.

Webflow to Jamstack

Webflow to Next JS

A full stack Next JS site that auto updates with a Webflow sync is a great way to “split” front end and Next JS workflows. Easy to use, Webflow to Next JS webhooks to continuous integration publishing. Editing without Next JS technical building is enabled.

Webflow to 11ty

Fully editable with user friendly WordPress like with Forms exporter is full stack 11ty file system.

Git enabled version control can source from the same updates.

Other Builders

Builder io, Plasmic

Builder io and Plasmic are other options that will visually generate iterative visual code that can be used to design API and component views.

© 2020 All rights reserved. Powered by Yoonsun Lee.