Terra Libraries

At Terra, we take immense pride in our commitment to delivering efficient, high-performance, and innovative solutions to meet the diverse needs of web development projects. Over the years, we have dedicated ourselves to simplifying the development process while ensuring that the quality and effectiveness of the final product remain uncompromised. Our goal is to empower developers, designers, and teams by offering them tools that minimize friction in their workflows and accelerate the build process without sacrificing precision or creativity.

As part of this mission, we have meticulously developed a series of pre-built packages that are designed to be reliable, flexible, and easy to integrate into any project, regardless of its scale or complexity. These packages have been crafted based on industry best practices and real-world challenges, ensuring that they are not only practical but also powerful enough to address a wide range of use cases. Whether it’s enhancing user interfaces, optimizing website performance, or facilitating interactive experiences, these packages are built with the sole purpose of making web development more intuitive and efficient.

Our collection of pre-built packages offers developers a versatile toolkit, allowing them to focus on what matters most: delivering outstanding user experiences. By reducing the time spent on repetitive or foundational tasks, these tools enable developers to allocate more time and energy to innovation and problem-solving. The packages we provide are rigorously tested, well-documented, and optimized for performance, making them an essential part of any modern developer’s toolkit.

Below, we provide detailed descriptions of each package along with practical use cases and code examples to demonstrate how they can be integrated into your workflow. Each package is designed to be lightweight and modular, ensuring they can be adapted to a wide range of project types. By leveraging these tools, developers can maintain high-quality standards while also accelerating development timelines, ultimately delivering exceptional web applications with greater efficiency.

We invite you to explore these packages, experiment with their features, and discover how they can enhance your development process. Whether you’re building a small website or a complex web application, these tools are built to simplify your work, reduce repetitive coding tasks, and give you more control over the final product.

Terra Helpers

The Terra Helpers package offers a collection of utility functions that play an integral role in the development lifecycle, serving as the backbone for streamlined processes and accelerated project timelines. These helpers are crafted to simplify complex tasks, boost productivity, and foster sustainable growth in our projects. Whether you’re preloading assets to enhance user experience, integrating third-party services like reCAPTCHA, or incorporating HubSpot for marketing automation, these functions ensure that essential operations are handled efficiently and with minimal overhead.

Preload

Images

The preloadImages function asynchronously loads images using the ImagesLoaded library. It resolves a Promise when all images are loaded. You can pass a callback function for post-loading actions, and enable debugging to log details about the loading process.

import { preloadImages } from "@terrahq/helpers/preloadImages";
/**
 * This function is useful for optimizing media-heavy pages, ensuring that images are loaded before initiating user interactions or animations.
 */
await preloadImages({
    selector: "img", // Loads all images by default
    callback: () => console.log("All images loaded"),
    debug: false, // Set to true for detailed logs
});

Videos

The preloadVideos function preloads video elements asynchronously, leveraging the canplaythrough event. It resolves when all videos can play through or a specified time limit is reached.

import { preloadVideos } from "@terrahq/helpers/preloadVideos";
/**
 * This function ensures that videos are ready for playback without causing unnecessary delays.
 */
await preloadVideos({
    selector: document.querySelectorAll(".js--video"),
    maxTime: 1300, // Maximum wait time
    callback: (payload) => console.log("Videos preloaded"),
    debug: true, // Logs detailed info
});

Lottie

The preloadLotties function preloads Lottie animations asynchronously using lottie-web. It resolves a Promise after all animations are loaded.

import { preloadLotties } from "@terrahq/helpers/preloadLotties";
/**
 * This is ideal for preloading animations before they are rendered to the user, improving visual performance.
 */
await preloadLotties({
    selector: document.querySelectorAll(".js--lottie-element"),
    callback: (payload) => console.log("All Lotties loaded", payload),
    debug: true,
});

Marketing Integration

Helper function to submit forms directly to HubSpot using axios, with options for debugging and a callback function for handling the response.

import { submitToHubspot } from "@terrahq/helpers/hubspot";
/**
 * This function simplifies HubSpot form submissions, handling both client-side and server-side requests.
 */
await submitToHubspot({
    portalId: "YOUR_PORTAL_ID",
    formId: "YOUR_FORM_ID",
    formInputs: {
        firstName: "John",
        lastName: "Doe",
        email: "john.doe@example.com",
    },
    callback: (result) => console.log(result),
    debug: true,
});

Miscellaneous Helpers

Breakpoints

This helper provides pre-defined responsive breakpoints for Terra projects.

import { breakpoints } from "@terrahq/helpers/breakpoints";

let bk = breakpoints.reduce((target, inner) => Object.assign(target, inner), {});
console.log(bk.mobile);

Scroll Manipulation

The manipulateScroll function enables or disables page scrolling.

import { manipulateScroll } from "@terrahq/helpers/manipulateScroll";

manipulateScroll("block"); // Disables scrolling
manipulateScroll("scroll"); // Enables scrolling

TerraDebugger

Helper function to develop better testing for Developers + UX/ui, it returns breakpoint name and clickup space.

import { terraDebugger } from "@terrahq/helpers/terraDebugger";

function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.has(param); // returns true if the parameter is present, otherwise false
}

var terraDebug = getQueryParam("debug");

if (terraDebug) {
    terraDebugger({ submitQA: "your_QA_app" });
}

Dig Elements

Helper function designed to inspect a specified HTML element for mutations in its styles, classes, data attributes, or the structure of its children.

The function returns a Promise resolving in true or rejecting with error message.

1 - Style Search

Promise.all(
    elements.map(async (element) => {
        await digElement({
            element: element,
            search: {
                type: "style",
                lookFor: ["max-height"],
            },
            intervalFrequency: 1500,
            timer: 5000,
            debug: true,
            callback: () => console.log("COMPLETED!"),
        });
    })
)
    .then(() => {
        console.log("READY");
    })
    .catch((error) => console.log(error.message));

2 - Class Search

Promise.all(
    elements.map(async (element) => {
        await digElement({
            element: element,
            search: {
                type: "class",
                lookFor: ["test-class"],
            },
            intervalFrequency: 1500,
            timer: 5000,
            debug: true,
            callback: () => console.log("COMPLETED!"),
        });
    })
)
    .then(() => {
        console.log("READY");
    })
    .catch((error) => console.log(error.message));

3 - Attribute Search and look for a specific value

Promise.all(
    elements.map(async (element) => {
        await digElement({
            element: element,
            search: {
                type: "class",
                attribute: "data-test",
                lookFor: ["value"],
            },
            intervalFrequency: 1500,
            timer: 5000,
            debug: true,
            callback: () => console.log("COMPLETED!"),
        });
    })
)
    .then(() => {
        console.log("READY");
    })
    .catch((error) => console.log(error.message));

Google Scripts Detection

This utility function, hasGoogleScripts, is designed to asynchronously check for the presence of Google Analytics and Google Tag Manager scripts on a webpage. It returns a promise that resolves with a boolean value indicating whether the specified Google scripts are detected within a given timeframe. It’s tipically used when you delay 3rd party scripts

import { hasGoogleScripts } from "@terrahq/helpers/hasGoogleScripts";

await hasGoogleScripts().then((detected) => {
    if (detected) {
        // Code to execute if the specified Google scripts are detected, e.g., load GTM
        this.loadGTM();
    } else {
        // Code to execute if the scripts are not detected within the specified time
        this.terraDebug ? console.log("Google Scripts not detected") : null;
    }
});

Recaptcha

Helper to add recaptcha v3 to forms. It has several functions. 1st Asynchronously loads the reCAPTCHA script from Google with the specified API key.

import { GET_RECAPTCHA_SCRIPT_FROM_GOOGLE } from "@terrahq/helpers/recaptcha";

var publicKey = "XXXXXXX";
var loadRecaptchaScript = await GET_RECAPTCHA_SCRIPT_FROM_GOOGLE({
    API_KEY: publicKey,
});

2nd Asynchronously retrieves a reCAPTCHA client token by executing the reCAPTCHA challenge.

import { GET_RECAPTCHA_CLIENT_TOKEN } from "@terrahq/helpers/recaptcha";

var google_access_token = await GET_RECAPTCHA_CLIENT_TOKEN({
    API_KEY: publicKey,
    action: "submit",
});

3rd Validates a Google reCAPTCHA token on the server-side using either PHP or Node.js.

import { VALIDATE_RECAPTCHA_SERVER } from "@terrahq/helpers/recaptcha";

var response_from_server = await VALIDATE_RECAPTCHA_SERVER({
    type: "node",
    postUrl: "yoursite.com/api/validate_recaptcha",
    action: "recaptcha_validate",
    google_access_token: google_access_token,
});

Note : you could use these reference as a draft, this is not production ready, samples for Node or PHP

Wordpress

Helper function designed to get the ID/s of the specified pages/post types looking by slug (it works only for WordPress projects).

Get ID by Slug

import { getIDbySlug } from "@terrahq/helpers/getIDbySlug";

const payload = {
    slug: "my-page-slug",
    type: ["pages", "posts"],
    callback: () => {
        console.log("This is a callback!");
    },
    debug: true,
};

const postID = await getIDbySlug(payload);
if (postID) {
    console.log(`Found post with ID: ${postID}`);
} else {
    console.log("No post found with the specified slug.");
}

Get ID by Title

Helper function designed to get the ID/s of the specified pages/post types looking by title (it works only for WordPress projects).

import { getIDbyTitle } from "@terrahq/helpers/getIDbyTitle";

const payload = {
    title: "my-page-title",
    type: ["pages", "posts"],
    callback: () => {
        console.log("This is a callback!");
    },
    debug: true,
};

const postID = await getIDbyTitle(payload);
if (postID) {
    console.log(`Found post with ID: ${postID}`);
} else {
    console.log("No post found with the specified title.");
}

Js Utils

This package provides a collection of utility functions that simplify everyday tasks in JavaScript development. Whether you need to manipulate classes, detect browser types, or identify devices, this package offers functions that can make your life easier. Main developer of this package is Andrés.

Example

import { u_addClass, u_show, u_toggleClass, u_stringToBoolean , u_getAttr,u_stringToBoolean,u_browser,u_browser,u_system,u_take_your_time } from '@andresclua/jsutil';

// Add a class to an element
u_addClass('.add-class'), 'add-new-class');;

// Show all elements with the class 'show-me'
u_show(document.querySelectorAll('.show-me'));

// Detect device type
u_toggleClass('.toggle-classes-on-me', 'class1 class2');

// Get browser information
console.log(u_getAttr('.js--u_get', 'data-name'));

// String to boolean example
const boolValue = u_stringToBoolean("True"); // returns true
const anotherBoolValue = u_stringToBoolean("0"); // returns false

// Feature detection is where you don’t try to figure out which browser is rendering your page, but instead, you check to see if the specific feature you need is available.
const isChrome = u_browser('chrome'); // returns true if Chrome, false if not, null if unrecognized

// operative system
u_system('ios') // returns true if Ios Device, false if not, null if unrecognized

// fancy Set Timeout
u_take_your_time(1200).then(() => {
   console.log('after 1200 ms')
});

Collapsify

The collapsify package provides a seamless way to implement collapsible elements, accordions, or tabbed content. This package handles the state and behavior of such interactive UI components with ease. Main responsable for this package is Guido.

Example

var SimpleExample = new Collapsify();

<button class="c--btn-a c--btn-a--is-active" type="button" data-collapsify-control="simpleContent" aria-expanded="true">Show/Hide Content</button>
<div class="c--content-a c--content-a--is-active" data-collapsify-content="simpleContent" aria-hidden="false">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea deleniti nisi maxime sequi corporis labore repellat impedit, id vel, esse ad, culpa praesentium? Nobis quam fugiat natus, at nisi
        cumque.
    </p>
</div>

This package allows for flexible, customizable collapsible elements, making it ideal for creating FAQ sections, accordions, or tabbed interfaces without having to write custom JavaScript.

Modal

The modal package provides an easy-to-use Modal class for managing modal windows within your application. This package handles modal opening, closing, and interactions seamlessly.

Example

const modal = new Modal({
        backdrop: 'c--modal-backdrop-a', // class of the backdrop
        backdropActiveClass: 'c--modal-backdrop-a--is-active', // active class of the backdrop
        element: document.querySelector(".c--modal-a")
        elementClass: 'c--modal-a', // class of the modal
        modalIdTarget: 'modal-1', // ID of the modal
        modalActiveClass: 'c--modal-a--is-active', // active class of the modal
        onHide: () => {
            // do something when the modal closes
        },
        onShow: () => {
            // do something when the modal pops up
        }
    });