Forem: Abraham Duno

Study.taxi — a Duolingo clone for everything and anything: an AI WebApp Experiment

Abraham Duno — Tue, 06 May 2025 00:54:54 +0000

In an era where traditional education systems are being challenged by technological innovation, study.taxi emerges as a new approach to learning on the go. This AI-powered course creation platform is a procedurally generated educational tool — it’s a clone of how we consume educational content, with a shift on how we create it.

The Problem with Traditional Learning

Traditional learning courses often follow a one-size-fits-all approach, leaving many niche learners behind. Whether it’s the pace of learning, the teaching style, or the content itself, conventional education systems struggle to accommodate individual learning needs. This is where study.taxi steps in, offering a solution that’s as unique as each learner.

At its core, study.taxi is an AI-powered platform that generates personalized courses for any subject imaginable. What sets it apart is its ability to create procedurally generated, multi-options gamified lessons that adapt to each learner’s needs. Whether you’re a beginner taking your first steps in a subject or an expert looking to build a habit and deepen your knowledge, study.taxi provides an intuitive interface for your learning journey.

Key Features

AI-Powered Personalization
— Multiple AI models working in harmony
— Content generation tailored to individual learning styles
— Adaptive difficulty levels
User-Centric Design
— Intuitive interface for both learners and educators
— Mobile-optimized experience for learning on the go
— Advanced learning analytics for progress tracking
Modern Tech Stack
— Built on Next.js for optimal performance
— Powered by Supabase for robust data management
— Enhanced with 3D visualization capabilities through react-three ecosystem.

The Technology Behind the Innovation

study.taxi leverages cutting-edge technology to deliver its promise of personalized learning:

AI Integration: Multiple AI models work together to generate and personalize content
3D Visualization: The platform incorporates three.js for immersive learning experiences
Real-time Collaboration: Built-in tools for study groups and collaborative learning
Progress Tracking: Advanced analytics to monitor learning outcomes

The Road Ahead

The platform’s roadmap reveals an ambitious vision for the future of education:

Enhanced AI model selection for even better course customization
Mobile-first approach for ubiquitous native app learners
Advanced profile analytics for deeper insights into learning patterns
Tools for educators to create and manage courses and donations
Multiplayer collaborative features to foster community learning along channels and chat groups

study.taxi stands out by combining AI technology with proven learning methodologies, it creates a platform that can adapt to any learning style, pace, or subject matter.

The platform’s commitment to personalization and engagement through gamification makes learning not just effective but enjoyable. This approach could be the key to solving one of education’s biggest challenges: maintaining learner engagement while ensuring effective knowledge transfer.

Important links: study.taxi

Website / Application: study.taxi

Anonymous feedback: study.taxi/feedback

Contact: x.com/webduno

Jueguificacion

Abraham Duno — Sat, 06 Apr 2024 00:43:29 +0000

Una metodología general orientada a soluciones para tratar problemas comunes.

¿Qué es la Jueguificacion o Ludificación?

La gamificación es un patrón de abstracción por el cual un sistema es capaz de formar propiedades universales de los juegos. La intencion de las personas a interactuar y disfrutar de todo tipo de contextos de sistemas es incorporando a los elementos y mecánicas de juegos de mesa o videojuegos.
Una estrategia de transformacion exitosa implica identificar principios de diseño de juegos y recompensas que se tengan sentido con los objetivos del proyecto y las preferencias de los usuarios. Es importante promover la gestion del tiempo de manera efectiva y actualizar la estrategia con el tiempo basándose en la retroalimentación y el comportamiento de los usuarios. Esto también puede usarse para reforzar comportamientos positivos y crear nuevos hábitos y rutinas desglosando tareas complejas en pasos más pequeños y manejables y recompensando los comportamientos positivos.
Etapas de un Juego

Creación, Actualización y Accion o Comportamiento:

1. Creando un Mundo
2. Actualizando los Objetivos
3. Generando las acciones del Jugador

Elementos de un Juego

Mundo
- DOM
- NPC
Objetivo
- Largo
- Corto
Jugador
- Control
- Estadísticas

Tipos de Juegos

1 = Juguete
1 + 2 = Caja de arena
1 + 2 + 3 = Misión

Etapas de un Juego

Paso 1: Creacion

El aspecto de “crear” en la gamificación o jueguificación implica diseñar elementos similares a juegos que involucren y motiven a los usuarios, como puntos, metas, tareas y recompensas. Es importante establecer un diagrama de juego para definir cómo se usarán estos elementos.

El siguiente paso es “observar” cómo los usuarios interactúan con el sistema gamificado y actualizar la lógica del juego según sea necesario.

Paso 2: Actualizacion

Esto implica monitorear el comportamiento del usuario y recolectar y gestionar datos sobre cosas como la frecuencia con la que los usuarios interactúan con los elementos, cuáles acciones son más populares y qué tipos de comportamientos se están fomentando.

Para aprovechar al máximo la gamificación, se deben crear objetivos específicos, medibles, alcanzables, relevantes y limitados por tiempo (SMART) para rastrear el progreso, mantener la motivación y lograr el éxito.

Paso 3: Accion

Finalmente, el paso de la “accion” implica usar las percepciones obtenidas de observar el comportamiento del usuario para refinar y optimizar los elementos de gamificación.

El éxito de una estrategia de gamificación depende en última instancia de cómo se comportan y se sienten los usuarios al usar el sistema, y hacer ajustes según sea necesario es clave para mantener su efectividad.

La jueguificacion o gamificación es una herramienta poderosa para involucrar a los usuarios y motivar comportamientos positivos. Las actualizaciones y ajustes regulares son necesarios para garantizar su efectividad. Recuerda, jugar es la forma más avanzada de investigar.

Conoce mas de como transformar aplicaciones de navegador a juegos 3D para movil siguiendo nuestras redes sociales

Pagina del Juego Princial: https://webpov.vercel.app
Twitter: https://x.com/webpov
Youtube: https://youtube.com/@webpov

What is a Super Synced Software

Abraham Duno — Tue, 27 Jun 2023 15:36:48 +0000

Layer 1: Owned Data
The first layer of data is the owned data, which is data that is created and owned by the developer.
Owned Data includes three sub-layers of data that are owned and controlled by the developer. Handwritten data is manually created and can be modified easily. File-based databases are imported from external files and can be modified through server code. Database schema connections are queried from connected databases and can be modified through queries.
1.1 Handwritten by Developer
This sub-layer comprises of data that is handwritten by the developer and is available from the server. It doesn't need to be imported, queried, fetched, or retrieved, and it is manually mutable data.
1.2 File-based Database
This sub-layer consists of data that is available from the server and is imported from a file (.env, json, csv, etc.). This data can be mutated via server code.
1.3 Database Schema Connection
This sub-layer consists of data that is available from the server and is queried from a connected database. This data can be mutated via queries.

Layer 2: Fetched Data
The second layer of data is the fetched data, which is data that is fetched from external sources.
Fetched Data includes three sub-layers of data that are fetched from external sources. Cached data is fetched from 3rd party servers and cached on re-entry. Fetched data from 3rd party endpoints is always updated on re-entry. Data saved in the browser is retrieved from the browser's local storage and can be modified by the user.
2.1 Stored in Cache
This sub-layer comprises data that is available from the server and is fetched from a third-party server. The data is cached upon re-entering, and it can be mutated via endpoint requests.
2.2 Fetched from 3rd Party Endpoint
This sub-layer consists of data that is available from the server and is fetched from a third-party server. The data is always updated upon re-entering, and it can be mutated via endpoint requests.
2.3 Saved in Browser
This sub-layer consists of data that is available from the client and is retrieved from the browser's local storage. This data can be mutated by the user and defaults to data available from the server.

Layer 3: User Data
The third and final layer of data is the user data, which is data that is generated by the user.
User Data includes three sub-layers of data that are generated and modified by the user. Authorized local endpoint data is fetched from 3rd party servers but called through a local endpoint that is authorized. Fetched data from 3rd party endpoints is available from the client and can be modified. Data saved in the browser is an empty list that can be filled by the user and is reactive.
3.1 Authorized Local Endpoint
This sub-layer comprises data that is available from the client and is fetched from a third-party server, but calling a local endpoint. The data and request are authorized.
3.2 3rd Party Endpoint Data
This sub-layer consists of data that is available from the client and is fetched from a third-party endpoint.
3.3 Saved in Browser
This sub-layer comprises an empty list ready to be filled by the user. This data is reactive and user-generated.

Inventory Simulation for General App Development

Abraham Duno — Wed, 17 May 2023 00:23:43 +0000

All applications are just "inventories" of arbitrary data.

A while back, after years of software design and development, I've come to realize that most of the software out there, is in it's essence; an inventory data tracking system.

It all comes down to state machines and the most efficient way to funnel the specific type of data, generally coming from the most obscure corners of a hard-coded file, to the live rendering of the last just-typed key code by the user. All you need to do, is make the data travel throughout the system as seamlessly as possible, to the end of the current data-layer.

While I do think its important to make distinctions between an app specific goals and objectives and its architecture, it is my opinion that following "CRUD" practices makes us follow the path of "all apps are just state machines".

Chatting with LLMs about it, it is clear that they rather validate "all apps are just state machines" over "all apps are just inventory-like systems" because it seems that generalizing is frowned upon among LLMs, but ultimately they do agree on the general statement and the abstraction of the core idea, that most apps are doing, is receiving, computing and giving data to the user, meaning the magic is indeed gone from all conventional apps.

LLMs however give a glimpse of hope into the future of software architecture and the mystical ways "applications" or "higher-intelligence" entities evolve. Unanswered questions for the future, what is software, what is an LLM? what is an entity, and again; what are applications?

AI Code Refactoring Tests

Abraham Duno — Mon, 15 May 2023 21:28:58 +0000

I want to test Bard, ChatGPT, and Bing; they will try to help me refactor a component that wraps around another one. The code is for a simple alert notification component made in a Next.js app (React) using TypeScript.

I coded this component a while back while learning about React hooks, and I strongly believe it has a lot of room for improvement.

Working Code (Bad Code)

import { useEffect } from "react"
import { useState } from "react"
import { useTimeout } from "usehooks-ts"


function AlertContainer({
    msg,
    delay = 4000,
    s__msg,
    badgeClass="ims-badge-faded",
}: any) {
    useEffect(()=>{
        if (msg == "") return

    },[msg])
    const onHide = ()=>{
        s__msg("")
    }

    if (msg != "") {
        return <AlertNotification s__msg={s__msg} delay={delay} onHide={onHide} alertMsg={msg} badgeClass={badgeClass} />
    }
    return <></>
}

/**
 * Primary message to user with crucial information
 */
export function AlertNotification ({
    onHide=()=>{}, delay=4000, badgeClass="ims-badge-faded", alertMsg="",s__msg,
}: any) {
    const [visible, setVisible] = useState(true)

    const hide = ()=>{
        s__msg("")
        setVisible(false)
        onHide()
    }
    // console.log("delay", delay)
    // useEffect(()=>{
    useTimeout(()=>{
        if (!!delay) {
            hide()
        }
    }, delay)
// },[delay])

    if (alertMsg == "") return <></>
    return (
        <div className={
                `${visible ? (!!delay ? "appear-once-4 " : "appear-appear ") : ""} appear-hiding pos-fixed top-0 left-50p mt-3 z-999 translate-x--50`
            }
        >
            <div className={` ${badgeClass} px-3 py-2`}>
                {alertMsg}
            </div>
        </div>
    )
}

export default AlertContainer

To compare the responses of different AI Tutors, I will send the same prompt to each one and add the sentence "think about this" to encourage a general response.

I am expecting a good explanation of the code in the style of a documentation page.

ChatGPT

Bing

Bard

I chose the versions I did because they are all free and open versions of LLMs. GPT-4 is likely to give the best results at the current time, but I’m solely testing free products to provide a reference for the price-quality ratio.

Additionally i tested vicuna13b and gpt4all.

Vicuna

GPT4All

10 minutes later...

Refactoring

Clearing the chat history when generating code is important, as the iterative nature of past messages affect the accuracy of achieving a 0-error code.

Now I'll explain my thinking process on coming up with a good first prompt, then follow the same prompts after in the same order to get me to a decent production ready result straight out of the tutor's response.

As per my previous experiments i have a 3 step process in mind to get to a good result.

First thing is straight up send the code in quotes so the tutors understand the limits of whats text and whats code with the context, a code description and a goal. As you you may guess we'll use one of the descriptions given to us by the tutors themselves on a previous life.

New First Prompt:

The code provided is a React component that displays an alert message to the user and dissapears thnks to a css class plus some react hooks logic. im using typescript
your task is refactor the code so that the duration is not only 4000ms, fix the logic and make it more dynamic
generate only the code snippet with a optimized version of the components

code:"""
// ... code
"""

Secondly, if an answer has more than five errors after the first prompt, I do not attempt to fix them manually. Instead, I send a second prompt that says "The code you gave me has errors. Please detect and fix them."

However, I have not had good results with this approach after many attempts. It seems that code generation is currently more advanced than code refactoring using LLMs.

In future tests, I plan to completely abstract the component's idea in order to generate good and clean code from scratch. I believe that this will be a better approach for "refactoring" code as long as the logic is simple and probably done before. Past experiments have hinted to the fact that the current state of intelligence provided by free LLMs alternatives is on par with previously posted code on stackoverflow, reddit, github or other code-sharing platforms.

AI Code Generation Experiments

Abraham Duno — Tue, 28 Mar 2023 14:59:38 +0000

`
im making simple browser game of simulated bitcoin trading, merged with mindful breathing practices
generate a 1 month development sprint plan with initiatives, epics, story and tasks about

follow this format for stories "As a I want so that"
remember to generate the response in a structured tables format
`

generate a game in a single block of code (for copy paste), use native javascript and canvas, don't use any third parties libraries the game is like the of pong, but rotated 90deg, the ball goes up and down, and only goes from left to right, and the movement of the ball is influenced by the candle price of a candle of the bitcoin price, use the native js fetch function, to build the "level" for the game, fetch from the public binance api the player scores once it places the platform correctly where the price bounced, just like the point you get, on pong once you bounce correctly the ball to the oponent

`make a standalone component that wraps around this component and rotates the light around the 0,0,0 of the scene

"""

        <pointLight castShadow color={"#ffddcc"} intensity={1.2} position={[xOut*2, yOut*2, zOut*1.5]} />
        <fog attach="fog" args={['#000000', 5, 10]} />

"""
`

generate a js code-snippet, the html only where it will be pasted uses threejs (thru cdn) and no other third party libraries the scene has controller with 2 buttons (1 big box, with 2 smaller boxes on top) each button (smaller cube) when clicked respectively and lowers the "y" position as so to appear "pressed", only one button can be in a "pressed" state at one time only generate the js copy-pasteable block of code

generate a business plan for the digital startup complete with idea name, a short one liner, target user persona, user's pain points to solve, main value propositions, sales & marketing channels, revenue stream sources, cost structures, key activities, key resources, key partners, idea validation steps, estimated 1st year cost of operation, and potential business challenges to look for. Write the result in a markdown table

Act as a tech writer. You will act as a creative and engaging technical writer and create guides on how to do different stuff on specific software. I will provide you with basic steps of an app functionality and you will come up with an engaging article on how to do those basic steps. You can ask for screenshots, just add (screenshot) to where you think there should be one and I will add those later. These are the first basic steps of the app functionality: "1.Click on the download button depending on your platform 2.Install the file. 3.Double click to open the app"

Gamification

Abraham Duno — Thu, 23 Mar 2023 23:08:49 +0000

Gamified Abstraction Modeling Engine.

A general solution-oriented methodology for dealing with common problems

What is Gamification?

Gamification is an abstraction pattern by which the mind is able to form universal properties of distinct objects. This encourages people to engage with and enjoy all type of system contexts by incorporating game elements and mechanics. Succinctness is key.
A successful gamification strategy involves identifying game design principles and rewards that align with project objectives and user preferences, managing time effectively, and updating the strategy over time based on user feedback and behavior. This can also be used to reinforce positive behaviors and create new habits by breaking down complex tasks into smaller, more manageable steps and rewarding positive behaviors.

Stages of a Game

Creation, Update, Behavior:

Creating a World
Updating the Goals
Behaving the Player

Elements of a Game

World

Goal

Long
Short

Player

Control
Stats

Types of Games

1 = Toy
1 + 2 = Sandbox
1 + 2 + 3 = Mission

Stages of a Game

Create

The "create" aspect of gamification involves designing game-like elements that will engage and motivate users, such as points, goals, tasks, and rewards. It's important to establish a game diagram to define how these elements will be used.
The next step is to "observe" how users interact with the gamified system and update the game logic as needed.

Update
This involves monitoring user behavior and collecting and managing data on things like how often users engage with the elements, which actions are most popular, and what types of behaviors are being encouraged.
To make the most of gamification, specific, measurable, achievable, relevant, and time-bound (SMART) goals need to be created to track progress, stay motivated, and achieve success.

Behave

Finally, the "behave" step involves using the insights gained from observing user behavior to refine and optimize the gamification elements.
The success of a gamification strategy ultimately depends on how users behave and feel when using the system, and making adjustments as necessary is key to maintaining its effectiveness.

Conclusion

Gamification is a powerful tool for engaging users and motivating positive behaviors. Regular updates and adjustments are necessary to ensure its effectiveness. Remember, play is the highest form of research.

CSSCSS 1.0.7 Released!

Abraham Duno — Sat, 04 Mar 2023 15:57:26 +0000

We're excited to announce the release of CSSCSS version 1.0.7!

New Features

Font Family

We've added the tx-sans font family, which is sets the font family property to the popular Open Sans font. You can now use this font family in your CSS by simply including the following class:

tx-sans

CSS Code: .tx-sans {font-family: 'Open Sans', sans-serif;}

Transparent Backgrounds

We've also added support for transparent backgrounds with the new bg-trans class. This makes it easy to create backgrounds that are transparent, without having to write any complicated CSS. Here's how you can use it:

bg-trans

CSS Code: .bg-trans {background: transparent;}

Inset Box Shadow

Finally, we've added support for inset box shadows. This allows you to create more complex box shadows that appear inside an element. Here's how you can use it:

box-shadow-i-1

CSS Code: .box-shadow-i-1 {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); }

Upgrade Instructions
To upgrade to CSSCSS 1.0.7, simply update your package.json file with the new version number:
"dependencies": { "csscss": "^1.0.7" }
Then, run npm install to install the new version.

Conclusion

We hope you enjoy using CSSCSS 1.0.7! As always, if you have any questions or feedback, please don't hesitate to get in touch with us.

CUB Methodology

Abraham Duno — Thu, 02 Mar 2023 19:50:59 +0000

Introducing the CUB Methodology: A Fresh Approach to Software Development

Software development is a complex process that requires careful planning and execution. The CUB methodology is a new approach that combines Scrum framework and UML design principles to create a more efficient and effective development process by focusing on three main stages of software development; create, update and behave.

Create

First up is Create. This is where the development team collaborates with the Product Owner to create a product backlog. To help with this process, they use UML use case diagrams to model the interactions between users and the system, and UML class diagrams to model the structure of the system.

Update

Once the product backlog is created, it's time for the Update stage. This is where the team adapts their processes and practices based on feedback received from the previous sprint. To aid in this process, they use UML sequence diagrams to model the interactions between objects in the system over time.

Behave

Finally, there's Behave. Throughout the development process, the team must ensure that the system behaves as intended. To help with this, they use UML object diagrams to model specific instances of classes and test how objects interact with each other. They also use UML component and deployment diagrams to model the physical components of the system and make sure they're deployed correctly.

Let's take a closer look at how the CUB methodology can be applied to both front-end and back-end development.

Front-End CUB: Creating Robust and Responsive Web Applications

The CAB method can be applied to front-end development to create robust and responsive web applications. The following is a breakdown of how the CAB method can be used in front-end development:

Create:

UML class diagrams can be used to model the structure of the web application.
In the "Create" phase, the front-end development team can use Server-side Rendering (SSR) to create the initial structure of the web application. SSR generates the HTML for a web page on the server-side and sends it to the client-side for display. This ensures fast loading times and better search engine optimization (SEO).

Update:

Client-side Fetching and First Web Paint techniques can be used to improve the user experience. UML sequence diagrams can be used to model the interactions between client-side and server-side components of the web application.
In the "Update" phase, the team can use Client-side Fetching and First Web Paint techniques to improve the user experience. Client-side Fetching allows the client-side to fetch data asynchronously and dynamically from the server, improving the web application's performance. First Web Paint is the first time the user sees the web application displayed on their device. The team can optimize the First Web Paint experience by reducing the time to first paint and improving the perceived load time.

Behave:

Reactivity and Routing can be implemented to create a reactive web application.
UML component diagrams can be used to model the physical components of the web application, including the various pages and their relationships.
In the "Behave" phase, the team can focus on creating a reactive web application by using frameworks such as React or Vue. These frameworks allow for real-time updates of web application data without requiring the page to refresh. UML object diagrams can be used to model specific instances of classes and to test how objects interact with each other. Routing can be implemented to ensure that the web application's different pages are accessible and navigable.

Back-End CUB: Creating Scalable and Secure Web Applications

The CUB methodology can be applied to back-end development to create scalable and secure web applications. The following is a breakdown of how the CUB method can be used in back-end development:

Create:

In the "Create" phase, a web server is set up with a server-side programming language like Node.js, Python, or PHP. The server is configured to handle HTTP requests and responses. UML use case diagrams can be used to model the interactions between users and the system.

Update:

In the "Update" phase, the team adapts their processes and practices based on feedback received from the previous sprint. The system is adapted to work with a database management system like MySQL or PostgreSQL. Stored procedures can be created to execute database commands repeatedly. UML sequence diagrams can be used to model the interactions between objects in the system over time.

Behave:

In the "Behave" phase, the team should focus on ensuring the system behaves as intended. A router can be created to map URLs to the appropriate code in the back-end. Controllers can be created to handle the business logic of the system. Security measures can be implemented to protect the system from unauthorized access. Logging and monitoring can be set up to track system performance. UML component and deployment diagrams can be used to model the physical components of the system and to ensure they are deployed correctly.

Conclusion

Overall, the CUB methodology can help software development teams create robust and secure back-end systems by focusing on the creation, updating, and behavior of the system. By using UML diagrams to monitor progress, communicate with stakeholders, and ensure everyone is on the same page, software development teams can streamline their work and deliver high-quality systems. Give the CUB methodology a try in your next software development project and see the difference it can make!

Insight Development

Abraham Duno — Thu, 02 Mar 2023 19:14:01 +0000

The Power of Blogging for Developers: How Sharing Your Knowledge Can Benefit Your Career

I. Introduction:

Explanation of the importance of writing blog posts for developers

As a developer, you may believe that your job is solely to write code and solve problems. However, sharing your knowledge and experiences through blog posts can provide many benefits for your personal and professional growth. In this article, we will explore the advantages of writing blog posts and how it can establish you as an expert in your field, help you build a strong professional network, and improve your skills.

II. Establishing Expertise:

Benefits of showcasing knowledge and expertise; potential for new job opportunities and career growth

As a developer, one of the most significant benefits of writing blog posts is the opportunity to establish yourself as an expert in your field. When you share your insights on topics such as patterns, frameworks, and workflows, you showcase your knowledge and expertise to potential clients and employers. By demonstrating your expertise, you can differentiate yourself from other developers and increase your chances of getting hired or securing new business. Writing blog posts can also help you stay up-to-date with the latest industry trends, which can further improve your expertise.

III. Building Your Professional Network:

Opportunities for building connections with other developers; establishing a stronger professional network; potential for collaboration and mentorship

Writing blog posts can also help you build a stronger professional network. By sharing your knowledge and experiences, you can engage with other developers and build connections within the community. This can lead to potential collaboration opportunities, mentorship, and new job opportunities. Additionally, by engaging with your readers and responding to comments, you can establish yourself as an active member of the community, which can lead to more opportunities and connections.

IV. Improving Your Skills:
Reflection on own processes and identification of areas for improvement; gaining a deeper understanding of your own work

In addition to external benefits, writing blog posts can help you improve your skills. By putting your thoughts and experiences into words, you can reflect on your own processes and identify areas for improvement. This can help you develop better coding practices and improve your skills as a developer. Additionally, by writing blog posts, you can gain a deeper understanding of your own work, which can help you approach challenges in new and innovative ways.

V. Conclusion:

Recap of the benefits of writing blog posts and encouragement to start writing blog posts for personal and professional growth

In summary, writing blog posts as a developer can provide numerous benefits. By sharing your knowledge and experiences, you can establish yourself as an expert in your field, build a strong professional network, and improve your skills. Writing blog posts is an excellent way to differentiate yourself from other developers, and it can lead to new job opportunities and career growth. So if you are a developer who has not yet started writing blog posts, consider giving it a try and see how it can benefit your personal and professional growth.