DEV Community: Schemetastic (Rodrigo)

Intradash - Dashboard + Bento Builder

Schemetastic (Rodrigo) — Mon, 28 Jul 2025 05:59:00 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

Intradash is a webapp dashboard with widgets that give you easy access to your data, but also lets you build your own spaces so you can organize things as you see fit (more on that later).

Some main features include:

Expandable Dashboard Widgets

A problem with compact UI sections, is that it can be hard to find data or tedious to navigate, that is why each dashboard widget has a button that can allow you to maximize that widget and be more focused and comfortable.

Create your own Bento

In my experience working with others, I've noticed that sometimes, being organized is very difficult. Maybe there is an event, or there are different tasks that you realize daily or every certain amount of time, and it would be a lot easier if you could have predefined spaces with just exactly what you need without jumping from one place to another.

That's why I added the “Bento Builder”, in simple words, these are customizable spaces with layouts similar to a bento, there, you can place different widgets and set the data you want.

Demo

🌐 Live Preview:
Intradash Preview

🔗 Repo:
Code Here

Journey

As a person who have created templates in the past, I think this was an interesting experience, and I learned new things watching the Axero templates they provide.

I'd been a front-end developer for a while now, but recently I'd been trying to improve my design and UI/UX skills, and I'm glad I could put into practice some of the things I've learned there. 😁

Even though the project still needs some workarounds, I think, that by far, as a front-end developer, this has been one of the more complex and interesting projects I've done, and I think it shows well the concept I want to demonstrate. I'm happy I've chosen Svelte for this project, made things a lot easier.

Sidekick Bot - Generate Editable Designs With The Help of AI

Schemetastic (Rodrigo) — Mon, 27 Jan 2025 05:57:00 +0000

This is a submission for the Agent.ai Challenge: Full-Stack Agent, but also could qualify for Assembly of Agents and Productivity-Pro Agent (See Details)

⚠️ DISCONTINUED PROJECT, THE EDITOR IS NO LONGER MAINTAINED

If you saw the cover of this post, you already saw this agent in action!

What I Built

One common issue when generating images with AI is that it is hard to get text right, that's why I built an Agent that also incorporates an editor, you can give the agent instructions that you want to include in the design, such as the color of the design, title and content, then, with an embedded editor you can make tweaks to the design.

How does it work?

Demo

✨Link to the agent!✨
✨Demo video of how Sidekick Bot works

This is the image you can see in the demo video:

It has potential for way more than what you see

Currently, it only supports 2 types of designs (Covers and Image Text Posts), and I know the editor is not the most complete, and it requires some tweaks (keep in mind that this was built in very few days), but following this approach you could create a lot of types of assets and designs, these are some examples: charts, social media posts, invoices, PDF's, lists, and a lot more.

Agent.ai Experience

It was fun using the builder to create in a series of steps a tool that it can be helpful to a human, it wasn't that hard to learn.

Where I struggled a little, was obtaining the defined variables in the agent, but finally I got my way around with this code:
let agentVars = JSON.parse(event["body"]).context.

I know that Agent.ai is relatively new, so I can't imagine what kind of crazy tools are going to be built with it as it advances more in its development and more people start to catch up. If I could give a suggestion, it would be to make more interactive and visually appealing videos on how to build agents in a way that people feel more attracted to the product (because I couldn't find too much of them). Generally it was a good experience, I'm glad I participated.

IMPORTANT NOTICE! You may have noticed that this post was modified after the challenge entry period ended, this is because yesterday I had problems deploying code to AWS Lambda, other users in the community also reported this problem. So, I couldn't finish my project yesterday, it was until today when code deployments finally was working, so I deployed the code I needed, and I decided to modify this post with more updated info (including, also, a fix I forgot to change) and images, and also I added a demo video of the project working in the Sidekick Bot website.

Roadmap AI - Process of learning a new skill

Schemetastic (Rodrigo) — Fri, 17 Jan 2025 14:25:34 +0000

This is a submission for the GitHub Copilot Challenge : Transitions and Transformations

What I Built

This is a metaphor about learning a new skill. Below, I explain the metaphor, but I would recommend that first you try the project with the demo link and then read the explanation to see if you caught everything.

This project generates a roadmap using AI, then you begin your journey collecting gems (= step/knowledge in the map), every amount of gems you collect, you get to play a minigame where you need to press a button to fill an energy bar to transform your gems into a new creation, every level is more difficult than the previous one. There's a little surprise when you finish the last level!

Accessibility features

When the dialog (wooden letter sign) appears, it automatically receives focus (for example, you can observe a dashed outline square in the content area).
The whole game can be played using keyboard only (though requires a bit of a heavy tabbing and shift+tabbing).
I applied the :hover styles to :focus on several elements to have a clearer visual cue for when an element is being focused.
I used some aria-labels
I applied focus outlines to some elements that in some moments don't have any hover animation but can be focused (gems and locks that still can't be unlocked).

Metaphor Explanation [⚠️ SPOILER ALERT]

If you haven't played the game, I advise you to do it.

The gems are equal to acquiring knowledge, but they are in the rough because knowledge itself is not enough, you need to put it into practice to make something out of it. To build something, you need a set amount of gems because the more complex the project, the more knowledge it requires, also they require more skill (remember the skill button?).

Level 1: is simple and basic because starter projects tend to be like that and aren't that challenging.

Level 2: a fog appears called "imposter syndrome", something many people feel when they start to get more serious and progressing, but still feel like is not enough and that can lead to disorientation, the fog doesn't stop you from pressing the button, but it requires more effort, because to overcome imposter syndrome, you need to keep pushing through and through until you make it.

Level 3: insecurity holes appear in your energy bar, and you can't press the skill button. Insecurities can make us feel paralyzed, and they can appear no matter how much experience you have. When you click the holes (insecurities), you get a view of your previous made projects, as you do it, they dissipate. When we feel insecure it is a great idea to take a look back to what we have achieved, when we see that we have overcome challenges in the past we remember who we are and what we are capable of.

SCREENSHOTS

Repo

schemetastic / roadmap-ai

Generate a roadmap with AI in a gamified way.

Roadmap AI

Create a roadmap using AI interactively and visualize it in a gamified way.

SvelteKIt installation instructions

sv

Everything you need to build a Svelte project, powered by sv.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

View on GitHub

Copilot Experience

Copilot is still a new experience for me, but I'm starting to find the sweet spot for it. Most of the cases I'd like to use the small completions (1-5 lines) rather than the large ones, and I like how it saves time with regexes and split strings, or write utility functions that sometimes can be a bit annoying to write. I think my sweet spot is that it be my copilot, and most of the time I'd like to be the pilot, and is very nice when it suggests something that I didn't think about, or that I needed promptly. Honestly, I've had some wow moments with it.

GitHub Models

The project uses gpt-4o-mini (from the marketplace) in the backend to generate the roadmaps.

In the chat in VS Code I used GPT 4o.

Conclusion

What I want to achieve is that when you select a roadmap and as you play the game, I want you to visualize yourself in the real journey, the real stuff. 2025 has just begun, why not?

Start time: 10:33, Jan 16, Honduras
End time: 10:18, Jan 17 Honduras~

This is actually my second attempt in this category of the challenge, but in the first one I couldn't finish it on time because I tried to do so much in so little time (also I was a bit rusty with Svelte). So I wanted another chance and built a similar idea but for this one I was more mentally prepared and more familiarized with Svelte (also, I only slept like 2 hours (but it was fun, haha)), and I tried to make it more simple (from a code logic stand view) but better, and yes, completely from scratch.

✨ Personal Note ✨: Building this project reminded me of the good 'ol days when I was around 12–14 years old, and I would spend countless hours in Scratch making my own games, actually, that's how I've got into programming 🫶🏽.

ReadOnePage - Spend more time reading and learning, and less time in social media

Schemetastic (Rodrigo) — Wed, 15 Jan 2025 23:48:03 +0000

This is a submission for the GitHub Copilot Challenge : Fresh Starts, but also could qualify for New Beginnings

Intro

I've noticed that often I've found myself in the situation where I am jumping from one social media to another and dumb-scrolling and feeling like a slave without being able to stop myself. No surprise, social media is usually designed to be addictive, and people spend countless hours in it. I know that many people feel like this too. The problem isn't just wasting time, it is believed that too much time in social media can decrease our attention span, and that makes us less productive.

For this year, 2025, I would like to spend less time in social media and activities that doesn't make me happy, I want to learn more and be more focussed. And the app I built has the intention to kickstart anyone having trouble with focus and at the same time learn.

What I Built

I've built a project that help you to read more in an interactive way, you can choose from a variety of topics, choose a reading mode, and after that you'll be prompted 3 questions.

Screenshots

(Screenshots may be a bit outdated because I added them before finishing the project)

Repo

schemetastic / read-one-page-app

A web app in Svelte that can help you to improve your focus with interactive reading

OnePageRead

A web app in Svelte that can help you to improve your focus with interactive reading

Svelte installing instructions:

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

View on GitHub

Copilot Experience

I liked it, and it was very good predicting what I needed a lot of the times. I'll provide more feedback in a comment.

GitHub Models

I did use gpt-4o-mini to generate the questions and answers after each reading

Conclusion

I believe it can improve people life by helping them to read more and stay away from social media.

This is actually my second attempt building a similar web app, in my first attempt I tried to build a reading app in Next.js, but I couldn't finish on time, so I wanted a second chance with this one, but this time I'm using Svelte, and of course starting from scratch.

Start time: 18:50 Jan 24 (Honduras)
End time: <18:00

Disclaimer: Some content is generated with AI, this means that isn't always accurate.

Jan 19 edit to this post (after the 24 hours)
Quick clarification on the "Self-Paced" reading mode, the description there says: “On finish you'll get how much time did you spend reading”, and that doesn't happen, initially that was the idea, but I was running out of time, and I was on a rush because I had to go earlier to do something else, and I forgot to delete that part of the instructions, because I decided that I wasn't going to build that... anyway, just clarifying to be honest with you.

Tea Loop - A/B testing with DevCycle

Schemetastic (Rodrigo) — Sun, 22 Dec 2024 21:30:00 +0000

This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse

What I Built

I built a Next.js app for a hypothetical startup called Tea Loop.

Context: Tea Loop is starting to offer tea based products, they started with 6 different tea flavors (Honey Lavender, Raspberry Mint, Peach, Pomegranate, Rose & Lavender and Black Tea Lemon), they don't know which is more appealing to their audience, that's why they decided to show a different flavor every time a user visit their site, to measure their interest, they would track every time a user clicks on the CTA (the button that says "Get it! $12.00"), of that way they can find out which flavor is more appealing and use that flavor for advertisement before they invest money in it.

Demo

Live Preview: https://tea-loop-next-js.vercel.app/
Stats page: https://tea-loop-next-js.vercel.app/stats

Variants generated at a random distribution with DevCycle and applied every time the page is refreshed:

Results from the DevCycle dashboard:

Results from the stats page (using the API):

My Code

Repo: https://github.com/schemetastic/tea-loop-next-js

My DevCycle Experience

Personally I don't have too much experience working on progressive web apps, but I like marketing, so I knew that DevCycle was going to be a great tool for marketing, and personally, I believe that it should highlight a bit more it's marketing capabilities to their possible customers because people tend to be very focused on results. I'd like that they offer a wide range of possibilities and adaptations for different technologies.

I experienced a few bugs (apparently), and some difficulties to understand the documentation and how to implement it, but I received a great customer support through Discord (Shout out to Leslie and the DevCycle team for their amazing support and patience!), and that was crucial for me to finish the MVP of the project. Overall, I had a lot of fun with this project and I felt very happy everytime I refreshed the website and I saw a different variant of the headers. I think that DevCycle has a lot of potential as a tool.

Additional Prize Categories

As mentioned above, I did use the API to obtain the metrics as seen in the stats page:
https://tea-loop-next-js.vercel.app/stats

Changes may take between 5-10 minutes to update

Other notes: I generated some images with AI using Flux, most or all have some edition made by me; The repo is licensed under the MIT License, but it includes more license info for third party content; Results in total or partially where generated by me by clicking on the CTA button.

Append object to path - Util function #3

Schemetastic (Rodrigo) — Fri, 15 Nov 2024 22:17:50 +0000

In the past days I've shared with you a few JS utilities, to loop objects recurrently, and also to get data in a nested object or to verify an object path programmatically.

In today's utility, you'll get a function to append another object inside an object at a specific path.

`appendObj(parentObj, childObj, path = [], cloneParent = false, cloneChild = true)`

/**
 * 
 * @param {Object} parentObj the object itself
 * @param {string[]} path the sequence to append
 * @param {Object} dataTo the data you want to insert
 * @returns {Object} the passed object with a the appended object
 */
function appendObj(parentObj, childObj, path = [], cloneParent = false, cloneChild = true) {
    // Verify the parameters
    if (getType(parentObj) != "object") throw TypeError("The `parentObj` argument is not an object")
    if (getType(childObj) != "object") throw TypeError("The `childObj` argument is not an object")
    if (getType(path) != "array") throw TypeError("The `path` argument is not an array")
    if (getType(cloneParent) != "boolean") throw TypeError("The `cloneParent` argument is not a boolean")
    if (getType(cloneChild) != "boolean") throw TypeError("The `cloneChild` argument is not a boolean")

    // clone the parent object
    if (cloneParent) parentObj = structuredClone(parentObj)

    // clone the child object to avoid shallow copies
    if (cloneChild) childObj = structuredClone(childObj)

    // If the path is empty assign it at the root
    if (path.length == 0) {
        Object.assign(parentObj, childObj)
        return parentObj;
    }

    // Link a reference to the parent object
    let objRef = parentObj;

    // Create path and then assign the object
    path.forEach((item, index) => {
        if (!Object.keys(objRef).includes(item)) objRef[item] = {}
        if (index < path.length - 1) {
            objRef = objRef[item]
        } else {
            if (getType(objRef[item]) != "object") objRef[item] = {}
            objRef = objRef[item]
            Object.assign(objRef, childObj);
        }

    });

    // return the object
    return parentObj;
}

/**
 * A method to detect data types more accurately
 * Credits: Chris Ferdinandi, https://gomakethings.com/
 * @param {*} data the data to be verified
 * @returns {String} the data type
 */
export function getType(data) {
  return Object.prototype.toString.call(data).toLowerCase().slice(8, -1)
}

/**
 * License: MIT, https://opensource.org/license/mit
 * Copyright (c) 2024 Rodrigo Isaias Calix
 */

How to use it?

The function requires at least 3 parameters, and 2 optional, in this order:

parentObj: This is the main object where you want to append another object
childObj: The object you want to append
path: a strings array that indicates the path to append the object
cloneParent: A boolean that indicates if the parent object you should be cloned or just referenced, default is false.
cloneChild: A boolean that indicates if the children object should be cloned or just referenced, default is true.

Usage examples:

With a referenced parent (default)

let products = {
    externalDevices: {
        keyboard: {
            usb: 45,
            bluetooth: 25,
        }
    }
}

const obj = {
    mouses: {
        usb: 60,
        bluetooth: 80
    }
}

appendObj(products, obj, ["externalDevices"]);

console.log(products)
/*
{
    externalDevices: {
        keyboard: {
            usb: 45,
            bluetooth: 25,
        },
        mouses: {
            usb: 60,
            bluetooth: 80
        }
    }
}
*/

As you can see, you don't need to assign anything to the original object variable, because by default the function uses the original object as a reference and adds to it any data.

With a cloned parent

let copyObj = appendObj(products, obj, ["externalDevices"], true);

console.log(products)
/*
{
    externalDevices: {
        keyboard: {
            usb: 45,
            bluetooth: 25,
        }
    }
}
*/

console.log(copyObj)
/*
{
    externalDevices: {
        keyboard: {
            usb: 45,
            bluetooth: 25,
        },
        mouses: {
            usb: 60,
            bluetooth: 80
        }
    }
}
*/

Unlike the previous example, this time the original object doesn't change because it is cloned. You could also, use the products variable to assign it to itself.

Creating an empty object path

appendObj(products, {}, ["externalDevices", "mouses", "bluetooth"]);
console.log(products);

/*
{
    externalDevices: {
        keyboard: {
            usb: 45,
            bluetooth: 25,
        },
        mouses: {
            bluetooth: {}
        }
    }
}
*/

Things you need to know before you use it

When cloneParent is set to false the parent object is just referenced, this means that you don't need to assign the object again to the parent, in other words, if you just run the function itself it will automatically add the data to the original object. If it is set to true the function will return a clone of the parent object, but the original object will be unaffected.
When clonechildren is set to true it will create a clone of the object and append it. But if you set it to false it will put a shallow copy of it, this means that if the original object has variables in it and the variables change, any reference could reflect that change too, use with caution.
If you set the path to an empty array ([]) it will assign the object to the root of the parent object
If the path of the object is not defined, it will be created automatically. For example, if in the products object products.devices.audio.microphones "devices" doesn't exist, it will create the path up to "microphones".
In the destination of the path, if the destination is an object, the child object will be assigned inside that object along any other data it has, this means that it will override any identical object property inside. If the destination is not an object, it will override the whole value.

If you found this useful, I'll be sharing more content like this on DEV!

You can also find me on X: https://x.com/schemetastic

And remember to save it for later 🔖

Get and verify paths in a nested object - util functions #2

Schemetastic (Rodrigo) — Thu, 14 Nov 2024 16:00:00 +0000

Yesterday I shared with you a utility function to recurrently loop an object in JS, one of the features it has, is that you can get an array with a path to the nested object that is currently being looped. However, when working with nested objects, you may want to retrieve or verify data from a specific path at any given moment, that's what today's utility functions do.

getDataFromObj(obj, path): retrieve data from a given path in an object
isValidObjPath(obj, path): verify if a given path exists in an object

`getDataFromObj(obj, path)`

Feel free to copy and paste this code

/**
 * Retrieves data from an object on a given path
 * @param {Object} obj the object to get the data from
 * @param {string[]} path an array of strings containing the keys of the object to look at
 * @returns {*} the retrieved data or a Reference Error if not found
 */

function getDataFromObj(obj, path){
  // Validate arguments
  if(getType(obj) != "object"){
    throw TypeError("The `obj` argument is not an object");
  }
  if(getType(path) != "array"){
    throw TypeError("The `path` argument is not an array");
  }

  // Get the data or a ReferenceError if not found
  const data = (()=>{
    let currentData = obj;

    for(let i = 0; i < path.length; i +=1 ){
      if(Object.keys(currentData).includes(path[i])){
        currentData = currentData[path[i]];
        continue;
      } else{
        currentData = ReferenceError("The object path is not defined");
        break;
      }
    }
    return currentData;
  })();

  return data;
}

/**
 * A method to detect data types more accurately
 * Credits: Chris Ferdinandi, https://gomakethings.com/
 * @param {*} data the data to be verified
 * @returns {String} the data type
 */
function getType(data){
  return Object.prototype.toString.call(data).toLowerCase().slice(8, -1)
}

/**
 * License: MIT, https://opensource.org/license/mit
 * Copyright (c) 2024 Rodrigo Isaias Calix
 */

Usage:

You must pass 2 arguments:
obj: The object from where you want to retrieve the data
path: An array indicating the sequence to follow

If the path exists it will return the value (even if the value is undefined), if the path doesn't exist it will return a ReferenceError object, it doesn't throw an error, just returns the error object.

const products = {
  computers: {
    laptop: 20,
    desktop: 15,
    mini: 8
  },
  cameras: 20,
  externalDevices: {
    keyboard: {
      usb: 45,
      bluetooth: 25,
      other: undefined
    }
  }
}

// This would log 25
console.log(getDataFromObj(products, ["externalDevices", "keyboard", "bluetooth"]))

// this would return a ReferenceError object (not a throw, just the error object)
console.log(getDataFromObj(products, ["externalDevices", "mouse"]))

// this would return `undefined`
console.log(getDataFromObj(products, ["externalDevices", "keyboard", "other"]))

`isValidObjPath(obj, path)`

The utility code:

/**
 * verify if an object has an specific path
 * @param {Object} obj the object to be verified
 * @param {string[]} path an array of strings containing the keys of the object to look at
 * @returns {Boolean} `true` if found, otherwise `false`
 */
function isValidObjPath(obj, path){
  // Validate arguments
  if(getType(obj) != "object"){
    throw TypeError("The `obj` argument is not an object");
  }
  if(getType(path) != "array"){
      throw TypeError("The `path` argument is not an array");
  }

  // shallow copy of the object to be verified
  let currentData = obj;

  // Verify the path
  for(let i = 0; i < path.length; i +=1 ){
    if(Object.keys(currentData).includes(path[i])){
      currentData = currentData[path[i]];
      continue;
    } else{
      return false;
    }
  }

  return true;
}

/**
 * A method to detect data types more accurately
 * Credits: Chris Ferdinandi, https://gomakethings.com/
 * @param {*} data the data to be verified
 * @returns {String} the data type
 */
function getType(data){
  return Object.prototype.toString.call(data).toLowerCase().slice(8, -1)
}

/**
 * License: MIT, https://opensource.org/license/mit
 * Copyright (c) 2024 Rodrigo Isaias Calix
 */

Usage:

You must pass 2 arguments:
obj: The object that you want to verify if a path exists
path: An array indicating the sequence to follow

If the path you are searching exists, it will return true, otherwise it will return false

const products = {
  computers: {
    laptop: 20,
    desktop: 15,
    mini: 8
  },
  cameras: 20,
  externalDevices: {
    keyboard: {
      usb: 45,
      bluetooth: 25,
      other: undefined
    }
  }
}

// This would log true
console.log(isValidObjPath(products, ["externalDevices", "keyboard", "bluetooth"]))

// this would log false
console.log(isValidObjPath(products, ["externalDevices", "mouse"]))

// this would log true
console.log(isValidObjPath(products, ["externalDevices", "keyboard", "other"]))

Why an array as the path instead of a string with slashes or dots? (e.g. "computers.laptop")

Because object property names can also be a string with a large range set of characters, which includes dots, so, for example, "computers.laptop": {[...]} would be a valid object, an array would allow more flexibility and accuracy.

If you found this useful, I'll be sharing more content like this on DEV!

You can also find me on X: https://x.com/schemetastic

And remember to save it for later 🔖

Recurrently loop an object in JS - util function #1

Schemetastic (Rodrigo) — Wed, 13 Nov 2024 15:00:00 +0000

Currently, I'm working on some personal projects and I thought it was a good idea to share some code I need for my them, and also some things I'm learning along the way, so I'll be sharing more of that soon. I hope you find it useful too! 😉

Today I'm sharing with you a utility function to help you loop through nested objects, on each iteration of the object you can run a callback and get useful data.

Use case examples:

Filter or sorting data of an object
To help you navigate through a directory tree UI which is represented in an object
Handle nested options in a UI
Handle categories and subcategories
Looping through data when pulled from a database

`loopObj` utility function

You can just copy and paste these functions

/**
 * Loops an object recurrently
 * @param {Object} obj the object to be looped
 * @param {Function} callback a function that will run on each iteration
 */
function loopObj(obj, callback, path = [], nestLevel = 0){
  // validate params (`path` and `nestLevel` are added automatically)
  if(getType(obj) != "object"){
    throw TypeError("The `obj` argument is not an object")
  }
  if(getType(callback) != "function"){
    throw TypeError("The `callback` argument is not a function")
  }

  // Loop the object
  for (let key in obj){
    // Run the callback
    callback(key, obj[key], obj, path, nestLevel)
    // Loop a nested object
    if(getType(obj[key]) == "object") loopObj(obj[key], callback, [...path, key], nestLevel + 1)
  }
}

/**
 * A method to detect data types more accurately
 * Credits: Chris Ferdinandi, https://gomakethings.com/
 * @param {*} data the data to be verified
 * @returns {String} the data type
 */
function getType(data){
  return Object.prototype.toString.call(data).toLowerCase().slice(8, -1)
}

/**
 * License: MIT, https://opensource.org/license/mit
 * Copyright (c) 2024 Rodrigo Isaias Calix
 */

How to use it:

Example snippet:

// example object
const products = {
  computers: {
    laptop: 20,
    desktop: 15,
    mini: 8
  },
  cameras: 20,
  externalDevices: {
    keyboard: {
      usb: 45,
      bluetooth: 25,
    }
  }
}

// calling the function
loopObj(products, (key, value, obj, path, nestLevel)=>{
  console.log(key, value, path, nestLevel)
});

This will output something like this:

When calling the loopObj function, as the first argument you must pass the object you want to loop, and as the second, a callback. On each iteration, the callback will pass 5 arguments in this order:

key (string), the current key property of the object
value (any), the value of that property (e.g. a nested object or any other value that it has)
obj (object), the object that is currently being looped (either be the parent or a nested object)
path (array), the path of the current item being looped
nestLevel (number), starting from 0 (the root), it tells you how deep the level of the current loop is.

If you found this useful, I'll be sharing more content like this on DEV!

You can also find me on X: https://x.com/schemetastic

And remember to save it for later 🔖

KonNiche - Skill-Based Feedback to Improve Your Projects

Schemetastic (Rodrigo) — Mon, 28 Oct 2024 03:00:00 +0000

This is a submission for the Wix Studio Challenge: Community Edition.

My Community Platform

We all have strong points, but also, we all have weak points. That's a reality when it comes to build a project or a product, think about this: When you make a landing page, it may be visually appealing, but what about the user experience? Or what about your copywriting? Or its accessibility?

That's what KonNiche is about, connecting people with different backgrounds who have different niches and skills in a thread based system.

This is how it works:

The system is based on collectives, a collective refers to a page that contains photos and content of a project, each collective can have up to 3 topics of discussion, and you can participate in any of those with comments.

Give

Help others with their projects by giving valuable feedback in their collectives, at the same time, this can help you to build authority in a specific field.

Get

By publishing a collective, you create the opportunity to let others help you in your weak points, or they can let you know where you nailed it.

Mean of the word collective: “refers to a group of entities that share a common interest or goal and work collaboratively towards achieving it”

Demo

Preview link: https://schemetastic.wixstudio.io/konniche

Home Header

Notifications Interface

Development Journey

Velo APIs

$w: used to select elements, datasets, add events, etc.
wixLocation: when a collective is created, this API redirects the user to the newly created collective page.
wixData: to query specific data from collections.

Wix Apps

Wix Comments

With Velo, using the $w method, and selecting the comments element, I changed comment threads with the setResourceId() method.
Ref in the documentation: $w > WixComments > setResourceId()

Also, I used in the backend the wixComments_onCommentCreated event to detect when a user makes their first comment and award them with a badge that is visible in their profiles.

Wix Members Area

currentMember from "wix-members-frontend": to obtain data from the logged users.
members from "wix-members.v2": to obtain data from different users, such as profile photos, slug, nickname.

Features made with Velo

Notifications: When someone comments on your collective, you receive a notification.
First comment badge: when you post your first comment, you receive a badge
Form validation of the collectives: you can't upload images larger than 1MB and different elements have custom validations.
Filtered collectives using repeaters and adding custom data with Velo

Why is it called KonNiche? (⚠️ puns next ahead)

KonNiche = Connect Niche (why not ConNiche? ... Nah)
Konnichi = 🇯🇵 Japanese word for “today”, because the best way to start a project is beginning today and start gathering feedback, that's how you improve. You build, gather feedback, improve, and iterate.

But if that wasn't punny enough for you, I'd like to think about the KonNiche interface as the KonNiche UI (🇯🇵) 🥁

Quick disclaimer: some images such as the persons included in the header illustration were already in my possession before the contest started.

Huge thanks to Anna Kulikova for being one of the test users! Do me a favor and follow her on X!

Schemetastic Renders - Free 3D renders for your next project

Schemetastic (Rodrigo) — Mon, 13 May 2024 04:55:00 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

A web app that allows you to download 3D renders that you can use for free in your projects. You can download them in .png, .webp and .avif in various image qualities and sizes.

Important note: I tried to pay a lot of attention to user accessibility for this project, At the last section of this article I'll talk about it in detail (since this very often is not seen with such an ease).

Demo

✨ Link to Schemetastic Renders ✨

The renders app page:

✨ Try this by yourself!

Home page:

Platform Primitives

The whole website relies heavily on the Netlify image CDN, keeping in mind that all the downloadable render images (90 images) are in .png format at full scale, for example:

In the renders page, all gallery images are loaded dynamically with the Netlify CDN, this helps to get smaller thumbnails in .webp format which saves a lot of bandwidth and resources. Also the preview image is changed dynamically with quality compression in .webp format in a smaller size.

Also, the generated downloads are fetched with a request to the Netlify Image CDN based on the user preferences.

The gallery in the home page that showcase the designs also uses the Netlify Image CDN, each gallery item contains 2 images (one without color and another with color) depending on the device viewport and the layout, some images are loaded in a smaller size. This was achieved storing the /.netlify/images?url data with its queries in CSS variables and changing the background-image values with media queries.

Implementation of Blobs for analytics

I implemented blobs with Netlify edge functions to keep track of how many times each design is downloaded.

Each design has its own key, and it stores as its main value the amount of times that has been downloaded. This value is retrieved every time you access to a specific design page, you can see there how many times that design has been downloaded. But also, as its metadata it stores in which format, quality and size type the image was downloaded, this data is only retrieved in the analytics page, that you can access here:

✨ Downloads Analytics Page ✨

Accessibility

I paid a lot of attention to this, so I'm dedicating a section to it, to explain briefly which accessibility features it has.

You can navigate using your keyboard

Buttons and interactive elements has styles on focus, and you can press them with the enter key.

Lots of alt attributes on 90+ images

Variants has their own alt text, and thumbnail images alt text is also prefixed with “thumbnail of”

ARIA attributes

About the creation of the renders

All images were created using AI, and I manually added color to them, this was one of the most intensive labors of the whole web app, here are just a few samples of the involved work:

If you came all the way down here, and you like the things I build,hey! Why don't we connect here in DEV, or Twitter, Instagram, I do also use Product Hunt. Do you wanna talk? Do you need help in the front-end? Would you like to know what amazing things I will build or what will happen to this project? I'm very friendly, (almost all the time), I promise 😉

BTW, I will add more renders to the project very soon! Stay tuned!

12 Copy & paste CSS gradients + 10 Free HD mesh gradients

Schemetastic (Rodrigo) — Fri, 26 Apr 2024 15:01:00 +0000

As front-ends we usually need appealing backgrounds to use them as hero headers, sometimes to attract a person into a specific product and make them look more desirable, or also as covers for posts so they don't look so plain. So I thought it would be nice if I shared with you some CSS gradients and some PNG mesh gradients to help you out with this task.

These are some of my personal favorites:

Warm Winter



 /*Warm Winter - Gradient*/
background-color: white;
background-image: radial-gradient(at 19% 54%, hsla(55,100%,77%,0.34) 0px, transparent 50%),
    radial-gradient(at 3% 47%, hsla(45,100%,80%,0.8) 0px, transparent 50%),
    radial-gradient(at 98% 3%, hsla(226,100%,53%,0.87) 0px, transparent 50%),
    radial-gradient(at 94% 44%, hsla(44,100%,79%,0.8) 0px, transparent 50%),
    radial-gradient(at 53% 29%, hsla(13,100%,72%,0.87) 0px, transparent 50%),
    radial-gradient(at 65% 14%, hsla(273,100%,68%,0.83) 0px, transparent 50%),
    radial-gradient(at 14% 14%, hsla(16,100%,76%,1) 0px, transparent 50%);

Orange Glitch



 /*Orange Glitch - Gradient*/
background-color: white;
background-image: radial-gradient(at 53% 49%, hsla(25,98%,62%,1) 0px, transparent 50%),
    radial-gradient(at 14% 44%, hsla(307,88%,74%,0.85) 0px, transparent 50%),
    radial-gradient(at 91% 47%, hsla(58,96%,68%,0.69) 0px, transparent 50%),
    radial-gradient(at 51% 43%, hsla(328,100%,51%,0.6) 0px, transparent 50%),
    radial-gradient(at 56% 58%, hsla(108,66%,77%,1) 0px, transparent 50%);

Oily Bubblegum dark version



/Oily Bubblegum - Gradient/

background-color: #121212;

background-image: radial-gradient(at 50% 50%, hsla(341,100%,71%,1) 0px, transparent 50%),

    radial-gradient(at 55% 45%, hsla(259,60%,71%,1) 0px, transparent 50%),

    radial-gradient(at 46% 45%, hsla(82,61%,65%,1) 0px, transparent 50%),

    radial-gradient(at 54% 55%, hsla(67,64%,79%,1) 0px, transparent 50%),

    radial-gradient(at 45% 55%, hsla(212,98%,75%,1) 0px, transparent 50%);

About the 10 mesh gradients

Even though CSS gradients can be more than enough in many situations, some designs aren't easy to do with just CSS, that's why I'm also giving for free 10 HD mesh gradients in 1920x1080px and 1080x1080px in PNG format that can give your project a fresh and different look.

What's included?

10 PNG HD backgrounds 1080x1080px & 1920x1080px

3 variants of a full-height header

A social media template

This is not a “pay what you want” or “How much would you pay for this?” product, it is an actual Free $0.00 item that you can even use commercially

🔗 Link Here! ✨

Why am I doing this?

I love web design, specially the front-end, in the past years I've found myself in the situation of starting projects that I never finish, partially because I'm a perfectionist. I've always wanted to make a living out of designing and coding, and I also wanted to have a space for front-ends and designers to share my passion and offer resources to them. And why offer free stuff? I believe generosity is a key to success, so the free stuff I'm offering is high quality (premium like).

This specific item, I made it to cheer me up to do larger projects and get a starting point, so I started with something simpler where my perfectionism wouldn't get too much into (still then, I couldn't hold myself too much).

If you would like to be part of this space and get more new resources, make sure to stick with me, feel free to message me:

BTW, any specific background that you specially liked?

CSS Quiz Time #1 - Elemons gotta catch 'em * ♫

Schemetastic (Rodrigo) — Mon, 08 Apr 2024 14:30:00 +0000

(In advance apology to Pokémon fans)

1 - How to properly apply `border-box` to ALL elements?

Easy peasy 🍋👊💦 right?

*{
  box-sizing: border-box;
}

~“Now all elements shouldn't collapse when the padding and the border is set”

Me some days ago in 2024

Well, think again. But before I'd show you how, I'll give you a clue, and after I'll give you the answer... okay, let's jump right into it!

...

Solution! 💡

*,
*::before,
*::after{
  box-sizing: border-box;
}

While working on a component (freebie that I'll share soon) I was having issues adding an overlay, after some head scratching I've realized that box-sizing wasn't affecting any ::after or ::before element. The same goes for any pseudo-element.

Let me demonstrate this to you:

With:

Without:

BTW I asked the AI if I should worry about potential performance issues for doing this and it told me that I shouldn't... No worries then!

2 - How to select all immediate children?

Now, with this markup:

<div class="parent">
  <ul>
    <li> Nested:
      <ul>
        [...]
      </ul>
    </li>
    [...]
  </ul>
  <ol>
    [...]
  </ol>
  <figure>
    [...]
  </figure>
</div>

Imagine that you want to add a background-color and border-radius but only to the immediate children of the .parent element.

In this context, you can have any type of elements as children.

Solution! 💡

.parent>*{
  background-color: white;
  border-radius: 12px;
}

In other words, this selector means: select all immediate children of .parent

Knowing this, becomes useful when you want to apply styles to elements, and you don't have a specific way to determine the markup of the children or when you want to shorten markup... for example, if you have a container with a lot of flex rows only, instead of adding a .row class to every element you can just .container>* and apply flex 💪.

3 - How to select all the siblings placed

after an element?

<nav data-is-mobile="true">
  <ul class="items">
    [...]
  </ul>
  <a href="..."> Sign-up</a>
  <button class="openMenu"></button>
</nav>

Imagine that you have a nav menu, and when the attribute data-is-mobile equals true, you want to show all elements after the <ul> as they are only relevant in mobile screens.

Solution! 💡

nav[data-is-mobile="true"] .items~* {
  visibility: visible;
}

nav[data-is-mobile="false"] .items~* {
  visibility: hidden;
}

With the ~ selector we can select any number of siblings after a selector, with the asterisk we indicate that we want to select them all. Keep in mind that the + selector would only select the first sibling element.

This method is very handy to select sibling elements when specific conditionals are met.

Did you catch 'em all?

I'll be producing more of these quizzes soon!

Official Instagram account: @schemetastic
My YouTube Channel: @schemetastic

DEV Community: Schemetastic (Rodrigo)

Intradash - Dashboard + Bento Builder

What I Built

Expandable Dashboard Widgets

Create your own Bento

Demo

Journey

Sidekick Bot - Generate Editable Designs With The Help of AI

What I Built

How does it work?

Demo

It has potential for way more than what you see

Agent.ai Experience

Roadmap AI - Process of learning a new skill

What I Built

Accessibility features

Metaphor Explanation [⚠️ SPOILER ALERT]

SCREENSHOTS

Repo

schemetastic / roadmap-ai

Generate a roadmap with AI in a gamified way.

Roadmap AI

sv

Creating a project

Developing

Building

Copilot Experience

GitHub Models

Conclusion

ReadOnePage - Spend more time reading and learning, and less time in social media

Intro

What I Built

Screenshots

Repo

schemetastic / read-one-page-app

A web app in Svelte that can help you to improve your focus with interactive reading

OnePageRead

A web app in Svelte that can help you to improve your focus with interactive reading

Creating a project

Developing

Building

Copilot Experience

GitHub Models

Conclusion

Tea Loop - A/B testing with DevCycle

What I Built

Demo

My Code

My DevCycle Experience

Additional Prize Categories

Append object to path - Util function #3

appendObj(parentObj, childObj, path = [], cloneParent = false, cloneChild = true)

How to use it?

Things you need to know before you use it

Get and verify paths in a nested object - util functions #2

getDataFromObj(obj, path)

Usage:

isValidObjPath(obj, path)

Usage:

Why an array as the path instead of a string with slashes or dots? (e.g. "computers.laptop")

Recurrently loop an object in JS - util function #1

loopObj utility function

How to use it:

KonNiche - Skill-Based Feedback to Improve Your Projects

My Community Platform

This is how it works:

Give

Get

Demo

Home Header

Notifications Interface

Development Journey

Velo APIs

Wix Apps

Wix Comments

Wix Members Area

Features made with Velo

Why is it called KonNiche? (⚠️ puns next ahead)

Schemetastic Renders - Free 3D renders for your next project

What I Built

`appendObj(parentObj, childObj, path = [], cloneParent = false, cloneChild = true)`

`getDataFromObj(obj, path)`

`isValidObjPath(obj, path)`

`loopObj` utility function

1 - How to properly apply `border-box` to ALL elements?