Development - Creative Nebula

CODE & DEVELOPMENT

Next-Gen Web Development

Our approach is rooted in cutting-edge methodologies like separation of concerns, atomic design, and functional programming.

What sets us apart is our unwavering commitment to clean, efficient code. We believe in keeping logic separate from templating, harnessing the power of technologies like Twig to ensure our projects are scalable and maintainable.

Sep 2022

Websites and the planet; being eco-conscious in a non-eco world.

Create eco-friendly websites by minimising CPU strain with fewer timers and animations. Opt for CSS Animations and avoid network polling. Prioritize sustainability.

When it comes to dynamic functionality, we rely on the prowess of JavaScript to deliver seamless user experiences without burdening the server with unnecessary requests.

We’re constantly innovating, developing custom caching solutions, REST API filters, language model integrations, and more. By harnessing the full potential of the tools at our disposal, we’re able to deliver unparalleled performance and functionality

React software development showing a macbook pro with account card details, the terminal and VSCode

CODE & DEVELOPMENT

Swift Swap

With its streamlined linear DOM structure, Swift Swap builds a new dynamic page reloading structure with JavaScript organisation for modularised code structure. Swift Swap empowers developers to achieve lightning-fast performance whilst staying true to native JS capabilities.

Apr 2024

Introducing Swift Swap DynamicPage: for linear DOM state management

DynamicPage, a versatile JavaScript library, simplifies state management and enables dynamic page rendering. It empowers developers to handle state changes and trigger page reloads with ease, enhancing user experience and application performance.

With Swift Swap, managing dynamic content becomes a breeze. Whether you’re refreshing a single element or building a complete page overhaul.

Additionally, swift-swap utilises variable caching and prefetching to deliver a seamless performance with quick response times.

Download Swift Swap

swift-swap/dynamic-reload

app.js

index.html

about.html

header.js

header.twig

install.sh

import { DynamicPage } from 'swift−swap/src/PageFlow.js';
import EventListenerManager from './js/libraries/EventListenerManager';
import header from './header';
const eventManagerListener = new EventListenerManager();
const state = {}
let renderList = [() => {
    eventManagerListener.removeAll();
    document.querySelectorAll('a').forEach(link => {
        eventManagerListener.add(link, 'click', (event) => {
              event.preventDefault();
            document.body.classList.add('page−transition');
           window.scrollTo({ top: 0, behavior: 'instant'});
                   
             setTimeout(() => {
                window.history.pushState({}, '', link.href);                    
                dynamicPage._makeRequest(link.href); // Make Request and Render
            }, 1000);
        });
    });
}];
renderList = [...renderList, () => {
    setTimeout(() => document.body.classList.remove('page−transition'), 800);
}];
renderList = [...renderList, Header({ val: state, parent: 'header'}).RenderComponent];
const dynamicPage = new DynamicPage({source: 'DynamicPage', target: 'App'}, renderList, true);
dynamicPage._makeRequest(window.location.href); // Make Request and Render index.html to the page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF−8">
    <meta name="viewport" content="width=device−width, initial−scale=1.0">
    <title>My Swift−Swap Demo</title>
</head>
<body>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <App class="container">
         <DynamicPage>
           <h1>Hello, World!</h1>
        </DynamicPage>
    </App>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF−8">
    <meta name="viewport" content="width=device−width, initial−scale=1.0">
    <title>About | My Swift−Swap Demo</title>
</head>
<body>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <App class="container">
         <DynamicPage>
           <h1>About us!</h1>
        </DynamicPage>
    </App>
</body>
</html>

import { PageFlow, HTMLflow, uuid, DatasetHandler } from 'swift−swap/src/PageFlow.js';
// HTML Rendered Module
const header = ({ val, parent }) => {
    // Add More items to State
    const localState = {
          ...val,
          switchName : 'Clear Inputs',
          switchValue : ''
      };
       // Include PageFlow Dependancies
       const [_, variables] = new PageFlow(parent, { ...localState});
     // Initialise Component
       const dataset = new DatasetHandler(document.querySelector('dataset')).parseData();
       // Typical Functions
       const functions = {
           testCallback: (_this) => {
            variables.switchName = 'different';
            return variables.switchName
           },
           clearCallback: (_this) => {
               return ' ';
           },
           defaultCallback: (_this) => {
              return '12';
           }
       }
       // Render Component (Loops the HTML values)
       const RenderComponent = () => {
           const id = uuid();    
           document.querySelectorAll(parent + ' [html]').forEach((item) => {
               HTMLflow(_, {item}, functions, id); // HTMLflow renders components
           });
           _.render();
       };
       return {
           RenderComponent: RenderComponent // Return the Render Component
       };
};
export { header as default }

<div class="header">
    <div class="function">
        {% for post in posts %}
            <a href="{{ post.link }}">{{ post.title }}</a>
            <a html class="is−counter" @ref="11_{{loop.index}}" @update="44" @trigger="click" callback="testCallback" postCallback="testCallback" defaultCallback="defaultCallback">{{'{{ switchName }}'}}</a>
        {% endfor %}
    </div>
</div>

npm i swift−swap

CODE & DEVELOPMENT

Cookie Guardian

Cookie Guardian empowers developers with JavaScript callbacks tailored to specific rules, ensuring granular control over cookie behavior.

Apr 2024

Meet Cookie Guardian: The Friendly Cookie Helper for Websites!

Cookie Guardian: Compliance, data protection, and precise control. Elevating browsing with customizable banners and seamless integration, all while prioritizing privacy.

With Cookie Guardian, you can effortlessly integrate complex logic to handle diverse scenarios, from user preferences to session management.

Cookie Guardian equips you with the tools to navigate cookie management.

Download Cookie Guardian

cookie-guardian

app.js

install.sh

import CookieGuardian from 'cookie−guardian/src/cookie−guardian.js';
const cookieGuardian = new CookieGuardian({
    desc: '',
    unclassifiedText: '',
    marketingText: '',
    statisticsText: '',
    preferencesText: '',
    requiredText: '',
    policyLink: '/privacy−policy',
    acceptText: 'Accept',
    declineText: 'Decline',
    stopAllCookies: false,
    preferences: () => {
        console.log('Preferences Enabled');
    },
    statistics: () => {
        console.log('Statistics Enabled');
    },
    marketing: () => {
        console.log('Marketing Enabled');
    },
    unclassified: () => {
        console.log('Unclassified Enabled');
    }
});

npm i cookie−guardian

CODE & DEVELOPMENT

Form Guardian

Inspired by the simplicity of Contact Form 7, Form Guardian streamlines the form-building process while seamlessly integrating with dynamically reloaded content. Designed for efficiency, this plugin simplifies form creation and submission handling, ensuring smooth operation across your website’s evolving content.

Apr 2024

Introducing Form Guardian: The Hassle-Free WordPress Email Plugin

Form Guardian is a straightforward yet powerful alternative to Contact Form 7 that promises simplicity, reliability, and effectiveness.

Built with a focus on user-friendly implementation, this plugin utilises classic HTML syntax to render fields, making form creation a breeze for developers of all skill levels.

Simply install the plugin, set up your form and insert the shortcode into your desired page or post– your sleek and functional contact form is ready to go.

Download Form Guardian

form-guardian

page.php

page.twig

example.form

<?php
     echo do_shortcode('[form_guardian id="381"]');
?>

 {{ function('do_shortcode', '[form_guardian id="381"]') }}

<label>
   <span>First Name <span class="required">*</span></span>
   <input type="text" name="first−name" placeholder="Enter First Name" value="" required pattern="^[a−zA−Z]+$" minlength="2" maxlength="30" />
</label>
<label>
   <span>Email <span class="required">*</span></span>
   <input type="email" name="email" placeholder="Email" value="" pattern="^[a−zA−Z0−9._%+−]+@[a−zA−Z0−9.−]+\.[a−zA−Z]{2,}$" required minlength="2" />
</label>
<label>
   <span>Message <span class="required">*</span></span>
   <textarea type="text" name="message" placeholder="Enter Message" value="" required minlength="2"></textarea>
</label>
<label for="enquiry−type">
  <span>Enquiry Type:</span>
  <select name="enquiry−type" id="enquiry−type">
    <option value="unselected">−− Please Select −−</option>
    <option value="branding">Branding</option>
    <option value="websites">Websites</option>
</select>
</label>
<fieldset>
 <legend>GDPR & Privacy</legend>
 <label for="gdpr−checkbox">
   <input type="checkbox" id="gdpr−checkbox" name="gdpr" required>
   <span>I agree to the terms and conditions and consent to the processing of my personal data as described in the privacy policy.</span>
 </label>
</fieldset>