DEV Community: Krisztián Maurer

Understanding Neural Networks: A Simple Interactive Visualization ⚙️

Krisztián Maurer — Sat, 07 Dec 2024 19:09:24 +0000

As I dove deeper into neural networks and machine learning, I often found myself wondering, "How does this magic work?" To truly understand, I realized it was crucial to grasp the core principles and fundamental building blocks of neural networks.

While there are many visualizations of neural networks available online, I felt that most of them skip over the most essential part: the neuron. A single neuron is the foundation of all the complexity, yet its workings are often glossed over in favor of larger, more complex network diagrams.

To bridge this gap, I created a simple interactive visualization that focuses solely on a single neuron. With this tool, you can explore:

How inputs are processed.
How weights influence the neuron.
How the neuron transforms data using activation functions.

By interacting with sliders and observing real-time updates, I hope this visualization helps you better understand the magic happening inside a single neuron.

Check out the visualization here: Neural Network Neuron Interactive Visualization

I’d love to hear your thoughts!

Alien Invasion: Developer's Call

Krisztián Maurer — Sun, 29 Sep 2024 16:32:51 +0000

This is a submission for the Web Game Challenge, Build a Game: Alien Edition

What I Built

I created a game called Alien Invasion: Developer's Call, where developers must defend Earth from an alien invasion using their coding skills. The game features a series of coding challenges that test different aspects of programming, from controlling Vim Snake to crafting regular expressions and writing targeting algorithms.

The story follows an alien invasion in 2054 where Earth's defenses have been disabled by flawless alien code. Developers are the last line of defense, and players must complete each challenge to save the world. The game consists of four main missions:

Demo

You can play the game here: Alien Invasion: Developer's Call - Live Demo

The code is available on GitHub: GitHub Repository

Journey

The idea behind Alien Invasion: Developer's Call was to combine coding challenges with an engaging narrative about an alien invasion. I wanted to create a fun way for developers to test and improve their coding skills in a game format.

Process

Game Design: I designed the game to include different types of coding challenges, starting with a simple Vim Snake game and gradually increasing difficulty with regular expressions and algorithmic challenges.
Tech Stack: I used React for the UI, Vite for fast builds, and TypeScript to maintain type safety throughout the project.
Deployment: I deployed the game using GitHub Pages, which made it easy to host a live version for players to access directly from their browser.
Text-to-Speech: I integrated a text-to-speech feature to make the game's story listenable, adding to the immersive experience.

What I Learned

Regular Expressions: Creating the challenges helped me improve with RegExp and see how flexible and powerful they can be in games.
State Management: Managing state across React components was crucial for smooth gameplay. Handling transitions between missions was a rewarding challenge.
User Experience: Balancing difficulty, providing hints, and giving clear feedback helped create an engaging experience.
Game Flow and Story: I learned to manage the flow between missions, ensuring each challenge fit into the narrative.
Time Management: I only had 3 days to complete the project, so I used AI to speed things up and made compromises where needed.

What I'm Proud Of

I'm especially proud of the Turret Defense Challenge, where players write their own aiming script. It’s a fun way to test creativity and algorithmic skills.

What’s Next

Some features I wanted to add but didn't have time for:

Developer Roles: Players could choose roles like web dev or hacker, each improving certain skills.
Difficulty Levels: I planned to introduce easy, medium, and hard game modes.
More Challenges: I'd like to add more coding tasks, like debugging and data structure challenges.
Multiplayer Mode: A future version could include multiplayer missions for collaboration or competition.
Leaderboard: Adding a leaderboard to allow players to see how they rank.

Generating training data with OpenAI function calling

Krisztián Maurer — Sat, 22 Jun 2024 22:26:55 +0000

As I delve into the fields of Machine Learning and AI, it's clear that the quality of training data is crucial. Creating training data, such as labeling 10,000 texts or images, can be a tedious task. However, OpenAI models can be used to automate this process. OpenAI models can generate specific training or fine-tuning data for our own models. In this blog post, I will discuss how this works.

(btw did you know that GPT can generate memes?)

Why Use Function Calling for This?

One of the most useful features of OpenAI is function calling. It can call our functions with a predefined schema, ensuring consistency. When generating training data, this consistency is crucial. For example, most label values must follow a schema with a predefined set of options. Additionally, you can add logic to these functions to handle the clean, consistent data, such as saving it to a database or a CSV file.

My Motivation

In my latest side project, I created an RSS reader with AI features.
One of the features is to categorize post content as "positive," "negative," or "neutral." This allows users to filter out negative posts if they prefer. While I found many models that do a good job, I plan to fine-tune one with RSS feed data to improve accuracy. However, if I want to create a more advanced sentiment classifier with custom labels, I need to create my own training dataset and train my model. Whether I use an existing model or create one, I need high-quality training data. This is why I brainstormed and found the following method.

Labeling Data with OpenAI

First, gather some data. From this data, you can create a fine-tuned dataset by labeling or adding new machine learning features. Here's a simple guide:

Provide Proper Context for OpenAI:
- Add a clear system prompt, e.g., "Your task is to label the provided data."
- Include the data context in the prompt, e.g., "Label this blog post with the label_tool: 'blog post content...'."
Create the Function Schema for OpenAI:
- Provide a detailed description of the tool.
- Clearly define the parameters, using enums and other schema elements to restrict responses.
Create the Function Defined by the Schema:
- This function can process the data, save it, or perform other tasks. In my case, it can add a new row to a training data CSV file, creating a new training element.

By following these steps, you can accurately and consistently label data, making it ready for training your models.

Let's Look at a Simple Code Example

Here is a simple example of a text labeling tool. Keep in mind you can do much more complex things than this, such as creating complex ML features or utilizing image recognition or text-to-speech features. But to keep it clear, I chose this example:

In this example, I add a label to any text which can be ['positive', 'negative', 'neutral'] and write the result to a CSV file so it can be later used to teach or fine-tune a model.




import {ITool, ToolSchema} from './interfaces/tool.interface';
import {ToolUtils} from "../utils/tool-utils";
import * as path from 'path';
import {createObjectCsvWriter as createCsvWriter} from 'csv-writer';

export class LabelTool implements ITool<string[], { inputText: string }> {
    private csvWriter;

    constructor(private readonly labels: string[] = ['positive', 'negative', 'neutral'], private readonly csvFilePath: string = path.join('labeled_text.csv')) {
        this.csvWriter = createCsvWriter({
            path: this.csvFilePath,
            header: [
                {id: 'label', title: 'Label'},
                {id: 'text', title: 'Text'},
            ],
            append: true
        });
    }

    // The openAI model will call this fn with the proper "options" parameter, the ctx just our optional additional context.
    async callback(
        options: { label: string },
        ctx: { inputText: string },
    ): Promise<any> {

        // write the new labeled data row to a csv
        await this.csvWriter.writeRecords([{
            label: options.label,
            text: ctx.inputText
        }]);

        console.log(`Add CSV row: ${options.label} | ${ctx.inputText}`);

        return `Added label successfully: ${options.label}`;
    }

    // learn more about json schemas here https://json-schema.org/learn/getting-started-step-by-step
    async getSchema(ctx: { inputText: string }): Promise<ToolSchema> {

        // this is the provided schema for the LLM
        return {
            type: 'function',
            function: {
                name: 'set_label',
                description: 'Set label to text',
                function: ToolUtils.getToolFn(this, ctx),
                parse: JSON.parse,
                parameters: {
                    type: 'object',
                    properties: { // thies properties will be in the callback "options" param
                        label: {
                            type: 'string',
                            description: 'label of the input text',
                            enum: this.labels // restrict the possible strings
                        },
                    },
                },
            },
        };
    }
}

With this tool, you can make requests to OpenAI and iterate over your data that needs to be labeled.




import OpenAI from "openai";
import {LabelTool} from "./tools/label.tool";
require('dotenv').config()

const client = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
});

(async () => {
    const inputTexts = [ // the OpenAI model will label thies with ['positive', 'negative', 'neutral']
        "I love this product!",
        "This is the worst thing I have ever bought.",
        "It's okay, not great but not bad either.",
        "Not worth the money.",
        "Best purchase ever!",
    ];

    for (const inputText of inputTexts) {
        console.debug(`Prompt: Label this text: ${inputText}`);

        const tool = new LabelTool(['positive', 'negative', 'neutral']);
        const context = { inputText: inputText };
        const prompt = `Label this text: ${inputText}`;
        const system = 'You are a helpful assistant generating training data';

        const runner = client.beta.chat.completions.runTools({
            model: 'gpt-3.5-turbo',
            messages: [
                {
                    role: 'system',
                    content: system,
                },
                {
                    role: 'user',
                    content: prompt,
                },
            ],
            tools: [await tool.getSchema(context)],
            tool_choice: 'auto', // If you pass tool_choice: {function: {name: …}} instead of auto, it returns immediately after calling that function
        });

        const finalContent = await runner.finalContent();
        console.log(`AI response: ${finalContent}
        `);
    }
})();

Let's run it:



➜  git:(main) ✗ npx ts-node index.ts

Log result:



Prompt: Label this text: I love this product!
Add CSV row: positive | I love this product!
AI response: The text "I love this product!" has been labeled as positive.

Prompt: Label this text: This is the worst thing I have ever bought.
Add CSV row: negative | This is the worst thing I have ever bought.
AI response: The text "This is the worst thing I have ever bought." has been labeled as negative.

Prompt: Label this text: It's okay, not great but not bad either.
Add CSV row: neutral | It's okay, not great but not bad either.
AI response: The text "It's okay, not great but not bad either." has been labeled as neutral.

Prompt: Label this text: Not worth the money.
Add CSV row: negative | Not worth the money.
AI response: The text "Not worth the money." has been labeled as "negative".

Prompt: Label this text: Best purchase ever!
Add CSV row: positive | Best purchase ever!
AI response: The text "Best purchase ever!" has been labeled as positive.

CSV file:



Label,Text
positive,I love this product!
negative,This is the worst thing I have ever bought.
neutral,"It's okay, not great but not bad either."
negative,Not worth the money.
positive,Best purchase ever!

Of course, there are many ways to simplify and extend this method, but I chose this example to give you an idea. You can try out the code in this GitHub repository: https://github.com/MaurerKrisztian/training_data_genration_with_openai

Using OpenAI's function calling can make it much easier to create high-quality training data. Whether you're labeling text, images, audio, or other data, this method ensures that the labels are accurate and consistent. This can save a lot of time and effort when training or fine-tuning your machine learning models.

Thank you for reading this blog post! I'm still experimenting with this idea, so if you have any thoughts on how this method can be used or expanded, please leave a comment.

Automate Your Node.js Version Switching

Krisztián Maurer — Wed, 13 Mar 2024 12:45:50 +0000

Imagine you're working on a project using Node.js. But suddenly, your project doesn't work. After some time spent figuring out the problem, you discover you were using the wrong version of Node.js for your project. You switch to the correct version, and everything starts working again.

Now, think about someone who works on many different projects, each needing a different version of Node.js. Every time they move to a different project, they have to remember to switch to the right version. This can be really annoying and slow them down.

This article is like a magic trick for fixing that problem. It shows how to set up your terminal to automatically change to the right version of Node.js for whatever project you're working on. If you use Bash or Zsh, you can make it so that every time you open a project, your terminal checks to see which version of Node.js that project needs. If you don't have it yet, your computer will even download it for you. This means you can jump from one project to another without having to stop and think about which version of Node.js you need. It's all taken care of for you, making everything much smoother and letting you focus on the fun part: creating stuff.

If the node version you need isn't found and has to be installed, here's what it will look like:

To get started, the first step is installing nvm. It's a simple command:

npm i -g nvm

With nvm installed, I will guides you through the process of adding specific scripts to your .bashrc or .zshrc file. These scripts enable your shell to automatically find the .nvmrc file in your project directory and switch to or install the Node.js version it specifies. This automation simplifies the workflow for developers, making it easier to manage multiple projects with different Node.js version requirements.

Note: This trick works on my Ubuntu setup. Not sure how to make it happen on Windows, though!

BASH

Pop open your .bashrc file with vi ~/.bashrc, and then add this script to the end of your file... wait, how do you escape this text-editing black hole? Ah, just type :wq to wave goodbye. But hey, if you're not into memorizing escape spells, maybe give nano a try for editing files sudo apt-get install nano then nano ~/.bashrc. It's like the friendly neighbor of text editors —always there to lend a hand without the cryptic commands.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion


nvm_auto_use() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
export -f nvm_auto_use
PROMPT_COMMAND="nvm_auto_use; $PROMPT_COMMAND"

Then run source ~/.bashrc. Done.

ZSH

For those rocking the Zsh terminal, setting things up is a similar, just swapping out for another script. And you probably don't need the whole "how to escape from vim" saga. To get started, just add this to the end of your ~/.zshrc file:

autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

Then run source ~/.zshrc. Done.

Thanks for sticking around till the end! I hope you found this guide useful.

Make the OpenAI Function Calling Work Better and Cheaper with a Two-Step Function Call 🚀

Krisztián Maurer — Sun, 10 Mar 2024 10:55:50 +0000

I tried using OpenAI's feature for running local functions in a project with many functions. It worked well, even with lots of functions, but the cost of using OpenAI's API increased significantly. This happened because when we send function details (in JSON format) along with our main request, it counts as part of our input tokens, making it more expensive. The problem is, we often send more functions than necessary, even though the AI only needs a few of them to respond to our request.

So, I had an idea to save money and improve performace: What if we only send the details of the functions the AI actually needs? Here's how it works: First, we send a request with our main question or task, including a list of all the functions we could use, but we don't send the detailed instructions for those functions yet. We just give a brief description of each. Then, the AI tells us exactly which functions it needs to answer our question or complete our task. After that, we send another request with the detailed instructions only for those needed functions.

This method can significantly lower the cost per message because we only send the details for the functions that are necessary.

From another point of view, this method also makes the AI work faster and better. When we send too many detailed functions, we end up giving the AI too much information to handle at once. This can slow down its performance because it has to deal with a lot of extra details. However, if we only send the essential information that the AI needs, we help it stay focused and efficient. This way, we can even add more useful information without overloading it. For example, when using GPT-3 with many functions, we quickly hit the maximum amount of information it can consider at one time. By being selective about what we send, we avoid reaching this limit too soon.

Basic tool call example

Let's look at a basic example of how function calling works. We start by sending the AI a question or task along with a list of all function schemas it can use. If the AI needs more information or has to do a specific job to answer our question, it picks one of the functions we've given it to help find the answer.

When you use tool or function calling, you're essentially giving the AI model a way to 'call out' to an external function. This could be anything from performing a complex mathematical calculation, accessing a database for specific information, running a custom algorithm, or even interacting with web services. The function executes the task and returns the result to the AI, which then incorporates this information into its response.
https://platform.openai.com/docs/guides/function-calling

Two-Step Tool Call example

The process is simpler than it sounds, and here's a straightforward explanation:

Start with a Single Tool: We begin by using a special tool called the "tool descriptor." This tool takes one parameter, a list named neededTools, which specifies the tools that might be needed. You list all the available tools here.

Requesting Specific Tools: If the AI determines it needs certain tools to complete its task, it requests them through the "tool descriptor" by specifying which tools it needs from the neededTools list.

Providing the Requested Tools: Once the AI requests specific tools, we then supply these requested tools to the AI.

AI Uses the Tools: Now that the AI has the tools it specifically asked for, it can go ahead and process the request, using the tools as needed to come up with a final answer. Occasionally, during this process, the AI might realize it needs an additional tool it didn't request initially. If that happens, the process starts over, and we provide the newly requested tool.

Here's a simple way to look at it using an example: Imagine we have 100 tools available, but the AI only needs 2 to answer a question. Instead of sending all 100 tool descriptions upfront, we initially send just the "tool descriptor" request. Then, based on the AI's needs, we only provide the 2 necessary tools. By using just 3 tool JSON schemas instead of 100, we save resources and make things more efficient. This approach uses fewer tokens, which is cheaper, and it also boosts performance. Having too many details can actually make the AI less accurate.

Check out how this method works with this code example: https://github.com/MaurerKrisztian/two-step-llm-tool-call

Thanks for taking the time to read! I hope you found it helpful. If you're interested in seeing how to do this in Python, just let me know in the comments.

Who Ate My Disk Space? It's "node_modules" Again! 🕵️‍♂️

Krisztián Maurer — Thu, 28 Sep 2023 15:17:16 +0000

Hey there! If you've used Node.js, you've probably seen the node_modules folder. It's where all the extra stuff for your project goes. But sometimes, it gets really big, really fast. I wanted to know just how big, so I made a script to check it out.

What I Made:

It's a simple tool that looks through your projects, finds the node_modules folders, and tells you how big they are. And it uses colors to be cool!

Why I Made This:

Curiosity: Which project has the biggest node_modules? 🤔
Cleaning: Some folders just have too much stuff. 🧹
Fun: I thought it'd be a fun little project. 😄
AI: Can AI craft this for me? (Absolutely, with a bit of direction!)

The script

#!/bin/bash

# ANSI color codes
RED="\033[31m"
GREEN="\033[32m"
YELLOW="\033[33m"
RESET="\033[0m"

# Set the starting directory for the search. Default is root if no argument is provided.
START_DIR=${1:-/}

# Find top-level node_modules directories directly under a project within the specified directory
# and exclude those inside the .cache directory
directories=$(find "$START_DIR" -type d -name "node_modules" -not -path "*/node_modules/*/*" -not -path "*/.cache/*" 2>/dev/null)

total_size=0

# Loop through each directory and calculate its size
for dir in $directories; do
    # Check if the parent directory of node_modules is not another node_modules (to avoid nested ones)
    parent_dir=$(dirname "$dir")
    if [[ $(basename "$parent_dir") != "node_modules" ]]; then
        size=$(du -sh "$dir" | cut -f1)
        echo -e "${YELLOW}Size of $dir: ${GREEN}$size${RESET}"

        # Convert size to bytes for summation
        bytes=$(du -sb "$dir" | cut -f1)
        total_size=$((total_size + bytes))
    fi
done

# Convert total size back to human-readable format
human_readable_total=$(numfmt --to=iec-i --suffix=B $total_size)

echo -e "${RED}Total size of all top-level node_modules within $START_DIR: ${GREEN}$human_readable_total${RESET}"

*gh gist

Want to Try? Here's How:

Write down the script in node_modules_size.sh.
Get it ready with: chmod +x node_modules_size.sh.
Start it up: ./node_modules_size.sh.
For a specific place: ./node_modules_size.sh /path/to/place.

Wrap Up

So, if you're wondering where all your computer's space went, this tool might help. Give it a go and see what you find! 🚀📁

Perfboard Designer in Html Canvas And The Underlying Solutions In My Project

Krisztián Maurer — Tue, 11 Jul 2023 19:45:10 +0000

If you're an electronics hobbyist like me, you might have faced a common problem. After designing a circuit and testing it on a breadboard, you want a more reliable way to store it. That's where perfboards come in. They provide a budget-friendly option for creating robust circuits.

Perfboards have holes where you can place your components and then solder the connections between them. Simple circuits are easy to handle, but things get tricky with complex circuits and limited space.

Ensuring the right connections becomes crucial, and doing it on the go can lead to a messy outcome or running out of space. While there are programs available for designing PCB / perfboards, they aren't beginner-friendly. I tried a few, but they didn't cater to hobbyists who simply wanted to design prefboards.

Then I came across Tinkercad, a more beginner-friendly designer. However, being a programmer with basic HTML canvas knowledge, I thought of creating my own solution. How hard could it be, right?

For my initial prototype, I started with plain HTML and JavaScript. As the project grew more complex, I switched to using Vite and TypeScript. If the project continues to expand, I may consider migrating to a more advanced framework like React or Vue.js. But for now, my focus is on creating a usable canvas.

Hey ChatGPT, can you help me?

I reached out to ChatGPT to help me with the starting point. With a few iterations, it provided a decent starting code that saved me about 4 hours. However, as things got more complicated, the prompt became challenging, and I decided to stick with the code I had. I refactored and continued the development myself.

I introduced fixes and new features, such as hover effects and expanding the dot grid based on user input. But as the plain HTML and JavaScript code grew messy and hard to read, I decided to rewrite it in TypeScript and separate the functionalities. Using Vite, I built my TypeScript code and refactored it, resulting in simpler and more flexible code.

Current Features:

In just one weekend, I aimed to create a usable minimum viable product (MVP) and implemented the following features:

Resize the dot grid
Dots
- Add color
- Add descriptions / delete
- Move dot
- Select dot
- Hover dot - add effect, shows the whole description
Lines
- Add color
- Connect two dots
- Delete lines
- Select lines
- Hover effect
Save the project as an image
Save the project to a file for sharing or future use
Save and load projects from local storage
ICs (show pin number and description) *incomplete
Reset the project
Undo / redo changes
Keyboard shortcuts

Check out the GitHub codebase or the live demo

Solving a Problem:

Choosing the right project to start can be challenging. The best learning project is one that solves your own problems. It's more enjoyable and satisfying to work on something that interests you and addresses your needs.

I knew a little about canvas before, but now I understand it better. I learned that if I want to make a complicated canvas project, I need to create a virtual version of everything, keep things separate, and make use of the coordinate system and event handlers. And I realized that it's really just building upon the previous building blocks that I created.

Check out the GitHub codebase or the live demo

Create contexts

To begin, I wanted the canvas HTML element and its 2D context to be globally accessible. So, I created two static variables. However, you can accomplish this without using a class; it depends on your personal preference.

export class Canvas {
  static c = Utils.getSafeHtmlElement<HTMLCanvasElement>("myCanvas");
  static ctx = Canvas.c.getContext("2d") as CanvasRenderingContext2D;
}

I also created some globally accessible variables, such as dot spacing, selected dot, and lines etc. The State class represents the current project's state.

(the Utils.getSafeHtmlElement basicly just a getElementById)

Dot grid

We need to generate a dot grid that represents the holes on the board.

export function createDotGrid(horizontalDotNumbers: number, verticalDotNumbers: number) {
  Canvas.c.width = horizontalDotNumbers * State.dotSpace;
  Canvas.c.height = verticalDotNumbers * State.dotSpace;

  State.dots = [];
  for(let x =  State.dotSpace / 2; x < Canvas.c.width; x +=  State.dotSpace){
    for(let y =  State.dotSpace / 2; y < Canvas.c.height; y +=  State.dotSpace){
      State.dots.push({x: x, y: y, description: null, color: "#a4a0a0"});
    }
  }
}

We adjust the canvas size to accommodate all the dots by multiplying the spacing with the number of dots.

If you want to draw the dots with a constant canvas size and dynamically change the spacing based on the number of dots, you can do something like this:

const xSpacing = Canvas.c.width / horizontalDotNumbers;
const ySpacing = Canvas.c.height / verticalDotNumbers;
...

However, for my project, I believe it's better to stick with a constant spacing.

Next, we generate the dot grid using a double for loop.

To understand this calculation, we need to know how the canvas coordinate system works:

The top left is (0,0), and the bottom right is (canvas.width, canvas.height).

I'm not drawing the dots at this point because I want them to be changeable later. So, I store them in an array as a virtual representation (State.dots).

The interface for the dots looks like this:

export interface IDot {
  color?: string;
  description?: string | null;
  x: number,
  y: number,
}

The required properties are the x and y coordinates on the canvas. Later on, I will add the ability to include a description and change the color.

Okay, we have nothing on the canvas. Let's draw these dots on the canvas.

function drawDot(dot){
  Canvas.ctx.beginPath();
  Canvas.ctx.arc(dot.x, dot.y, State.dotRadius, 0, Math.PI*2);
  Canvas.ctx.fillStyle = dot.color;
  Canvas.ctx.fill();
}

In my case, a dot represents a circuit *(the board holes). To draw a circuit, we add an arc with a start angle of 0 and an end angle of Math.PI*2. The coordinates are calculated in the previous section, and we can color them using the fillStyle, which fills them with the specified color.

Next, we need to call this function for each stored dot. To handle the drawing when something changes, we can create a function called redrawCanvas(). If your project requires constant updates, such as for animation, this function can serve as the equivalent (check out the requestAnimationFrame if you need a constant fps).

export function redrawCanvas() {
  resetCanvas();

  // Draw dots
  for(let i = 0; i < State.dots.length; i++) {
    drawDot(State.dots[i]);
  }
}

In this code, we first call the resetCanvas() function to clear the canvas. Then, we iterate over each dot in the State.dots array and call the drawDot() function to draw each dot on the canvas.

The resetCanvas() function clears the canvas by setting the fillStyle to the canvas background color, using clearRect() to clear the canvas's width and height, and then filling the canvas with the specified background color using fill().

export function resetCanvas(){
  Canvas.ctx.fillStyle = State.canvasBackgroundColor
  Canvas.ctx.clearRect(0, 0, Canvas.c.width, Canvas.c.height);
  Canvas.ctx.fillRect(0, 0, Canvas.c.width, Canvas.c.height);
  Canvas.ctx.fill()
}

Looks fine, but it lacks interactivity. The real magic of HTML canvas comes alive when you can interact with it. Let's try to add some interaction to make it more engaging.

Dot hover effect

It would be helpful to show which dot is being hovered over, as we will later select and connect it to another dot.

To determine the hovered dot, we need to consider three things: the mouse coordinates, the dot coordinates, and the canvas element coordinates.

By adding a mouse move event listener to the canvas, we can obtain the precise mouse coordinates when it is positioned over the canvas.

Canvas.c.addEventListener('mousemove', function(e) {
  const rect = Canvas.c.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  // Check if mouse is within a dot
  State.hoverDot = undefined;
  for(let i = 0; i < State.dots.length; i++) {
    const dot = State.dots[i];
    const dx = x - dot.x;
    const dy = y - dot.y;
    if(dx * dx + dy * dy < State.dotSelectionRadius * State.dotSelectionRadius){
      State.hoverDot = dot;
      break;
    }
  }

  redrawCanvas();
  // ... Continue with other interactions
});

In this code, we add a 'mousemove' event listener to the Canvas.c element (the canvas). Whenever the mouse moves within the canvas, the provided function will be executed.

We start by getting the position and size of the canvas relative to the viewport using getBoundingClientRect(). This information is stored in the rect variable.

Next, we calculate the X and Y coordinates of the mouse relative to the canvas by subtracting the left and top coordinates of the canvas (rect.left and rect.top) from the clientX and clientY values provided by the event.

Then, we check if the mouse is within the proximity of any dot. We iterate over the State.dots array and calculate the distance between the mouse coordinates (x, y) and each dot's coordinates (dot.x, dot.y). If the squared distance is less than the squared dotSelectionRadius, we consider the dot as hovered and store it in State.hoverDot.

if(dx * dx + dy * dy < State.dotSelectionRadius * State.dotSelectionRadius) { ... }: This line checks if the squared distance between the mouse cursor and the current dot is less than the squared radius of the dot's selection area. The distances are cant be negative, this is the simplest solution to achieve the distance calculation

Squaring the distances (dx * dx and dy * dy) and the radius (State.dotSelectionRadius * State.dotSelectionRadius) allows for a distance comparison without the need to calculate square roots, which can improve performance.

After updating the hover state, we call redrawCanvas() to redraw the canvas and reflect the hover effect.

Now, whenever the mouse moves on the canvas, we will check if there is a dot being hovered over and store it in the State.hoverDot variable.

lets add a it to the drawDot(dot: IDot) function.

...
if(dot == State.selectedDot) {
    Canvas.ctx.strokeStyle = "#00f";
    Canvas.ctx.lineWidth = 5;
    Canvas.ctx.stroke();
 }

...

When drawing the dots, if a dot is selected, it will be displayed as a larger dot.

(my mouse capture is not working, but you can see the main thing)

Great! Now that we can hover over a dot and store the hovered dot, we can use that reference to select a dot and assign it a description and color.

Dot select

The click event handling and indicating the selected dot is relatively straightforward, considering the previous effort put into calculating the hover position.

We simply need to listen for a click event and, if there is a hovered dot, set it as the selected dot. We can indicate the selection differently.

function setSelection(){
    if(State.hoverDot){
        State.selectedDot = dot;
    }
}

Canvas.c.addEventListener('mousedown', function(e) {
  setSelection(e);
})

When we draw a dot in the drawDot(dot: IDot) function, let's add a visual indication to the selected dot by coloring it differently.

...
if(dot == State.selectedDot){
    Canvas.ctx.strokeStyle = "#00f"; // blue
    Canvas.ctx.lineWidth = 5;
    Canvas.ctx.stroke();
  }
...

Adding Description to Dot

To enable the functionality of adding descriptions to dots, we can implement a dialog box. The entered description can then be saved to the selected dot and displayed beneath it.

Let's begin by adding an "Add Description" button to the HTML. Afterwards, we can obtain the corresponding button element and listen for a click event on it.

Utils.getSafeHtmlElement<HTMLButtonElement>('addDescriptionBtn').addEventListener('click', function() {
  addDescriptionToDot();
});

function addDescriptionToDot(){
  if(State.selectedDot){
    const description = prompt("Enter a description for the dot");
    State.selectedDot.description = description;
    State.selectedDot = undefined;
    redrawCanvas();
  } else {
    alert("Please select a dot first by clicking on it");
  }
}

If there is no selected dot, we cannot determine which dot's description to set, so we will display an alert message.

If there is a selected dot, we will set its description to the entered string and then unselect the dot.

We can utilize the dot reference to modify State.dots.

The removal function follows a similar pattern:

if(dot.description){
    Canvas.ctx.font = "10px Arial";
    Canvas.ctx.textAlign = "center";
    Canvas.ctx.fillStyle = dot.color;
    if (dot == State.hoverDot){
      Canvas.ctx.fillText(dot.description, dot.x, dot.y + State.dotRadius + 10);
    }else {
      Canvas.ctx.fillText(dot.description.substring(0, 5), dot.x, dot.y + State.dotRadius + 10);
    }
  }

Since we know the dot's position, we can position the description around it.

To avoid messy overlapping descriptions, especially when they are too long, we can display a substring of the description. However, if the dot is being hovered over, we will show the entire description.

Line

It looks good. Now, let's add another important element: the line that represents the path between two holes where solder / cable connection is placed.

export interface ILine {
  start: IDot,
  end: IDot,
  color?: string;
}

A line is made up of two dots: a starting dot and an ending dot. It can also have a color, but we'll keep it optional for now.

Now, let's talk about when and how we should connect two dots:

We connect two dots when one dot is selected and the newly selected dot is different from the currently selected dot. In simpler terms, we connect two dots when we click on them.

The starting point of the line will be the selected dot, and the ending point will be the dot we hover over.

function addNewLineIfNeeded(){
    if (!State.hoverDot){
      return;
    }
    if(State.selectedDot && State.selectedDot != State.hoverDot){
      const newLine: ILine = {start: State.selectedDot, end: State.hoverDot, color: "#777676"};
      State.lines.push(newLine);

      // Reset selection
      State.selectedDot = undefined;
      State.selectedLine = newLine;
      redrawCanvas();
    } else {
      // Select this dot
      State.selectedDot = State.hoverDot;
      State.selectedLine = undefined;
      redrawCanvas();
    }
}

we can put this code to the setSelection(event) function what runs when we click before we selecting a dot.

function setSelection(event) {
  addNewLineIfNeeded()
  selectDot()
}

then we have an array of lines, now time to draw them on the canvas.

function drawLine(line: ILine){
  Canvas.ctx.beginPath();
  Canvas.ctx.moveTo(line.start.x, line.start.y);
  Canvas.ctx.lineTo(line.end.x, line.end.y);
  Canvas.ctx.strokeStyle = line?.color || "#777676";
  Canvas.ctx.lineWidth = (line == State.selectedLine) ? 5 : (line == State.hoverLine) ? 4 : 3;
  Canvas.ctx.stroke();
}

we have the start and end coordinate, so we move to the start position then draw a line to the end position, and color it.
When the line is hovered over, it appears thicker, and when selected, it becomes even thicker.

Select line

It would be useful to have the ability to delete or change the color of a line, so we need a way to select the line.

The line selection is somewhat similar to dot selection but slightly more complex.

// This function is used to select a line on a canvas based on the user's mouse click event
export function selectLine(event) {
  // Check if there is a hoverDot, if so, return early and do not select any lines
  if (State.hoverDot) {
    return;
  }

  // Get the bounding rectangle of the canvas
  const rect = Canvas.c.getBoundingClientRect();

  // Calculate the relative coordinates of the mouse click event within the canvas
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  // Iterate over each line in the State.lines array
  for (let i = 0; i < State.lines.length; i++) {
    const line = State.lines[i];

    // Calculate the differences between the line's start and end points and the mouse click coordinates
    const dx1 = line.start.x - x;
    const dy1 = line.start.y - y;
    const dx2 = line.end.x - x;
    const dy2 = line.end.y - y;

    // Calculate the distances from the start and end points of the line to the mouse click coordinates
    const d1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); // distance from start dot to point
    const d2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); // distance from end dot to point

    // Calculate the distance between the start and end points of the line
    const d = Math.sqrt(
      Math.pow(line.end.x - line.start.x, 2) + Math.pow(line.end.y - line.start.y, 2)
    );

    // Check if the mouse click is within a certain tolerance distance from the line
    if (Math.abs(d - (d1 + d2)) < State.lineSelectTolerance) {
      // Line is selected
      State.selectedLine = line;
      State.selectedDot = undefined;

      // Redraw the canvas
      redrawCanvas();

      // Exit the function after selecting the line
      return;
    }
  }

  // Click is in empty space, reset selection
  State.selectedDot = undefined;
  State.selectedLine = undefined;

  // Redraw the canvas
  redrawCanvas();
}

We can also include a hover effect for the lines. Remove the selected line e.g. by clicking a button etc.

Check out the GitHub codebase or the live demo

Future Plans:

Create a more user-friendly tools menu
Finish the IC feature
Add a component creator
Migrate to React or Vue

Contributing:

I'm not particularly skilled with CSS, so if you'd like to contribute (e.g. to the tools menu design), your help would be greatly appreciated.

That's all for now. We covered a lot of things, and I hope it was useful. If you have any questions, feel free to leave a comment. Thank you for reading!

What is it like to be a software developer?

Krisztián Maurer — Mon, 22 May 2023 20:15:48 +0000

I am writing this article for beginners who are not yet aware of what awaits them. I hope it will give you a better insight into what it means to work in this profession.

First of all, the journey from zero knowledge to the first job is one of the most challenging, in my opinion. There are several paths, each with its own advantages and disadvantages.

Learning

Learning is a constant requirement. It's important to understand from the beginning that if you venture into programming, it's good to enjoy learning because there will never be a time when you don't need to learn something new. You will probably learn a lot while working, but I recommend sideprojects. Read more: Do you need side projects?

Workday

You will likely work in a Scrum-type team, so it's good to familiarize yourself with it. There will be daily meetings to discuss progress and tasks for the day. Most of the time, you'll be working on bug fixes or new features. Often, it's not just about typing code, but understanding the context takes up more time. You will read more code than you write, and over time, your ability to understand things will improve, and you'll be able to understand things faster. When faced with a problem, you probably won't start typing everything from memory. Instead, a few things won't be clear, so you'll look them up on Google, search for solutions, think about which one is the best, implement it, and then your senior colleague will review your pull request and suggest improvements. You make the necessary changes, and the cycle starts again.

Sitting in front of a computer

Developers spend most of their time sitting in front of a computer. If you have a problem with that, it's a big issue. However, they also have short breaks, meetings, meal breaks, and so on. Personally, I make sure to get up every hour to make tea or coffee or simply to clear my mind.

Joy of creating

One of the best things about being a software developer is the joy of creating something new. I love starting from scratch and building software from the ground up, turning ideas into real things that people can use. It's satisfying to see my work come to life.

You can build all sorts of cool things using your imagination and skills.

The fun part is that you get to solve puzzles and find smart ways to make things work. It's like a challenge that you can conquer. And there's always something new to learn because technology is always changing.

When you create something from scratch, you feel proud and in charge. You have the freedom to design and build things just the way you want. It's like being the boss of your own digital world.

As a software developer, I have a special power. I can take abstract ideas and turn them into practical software. I know how to write code and use tools to make ideas become real.

Difficulties

There will be days when you feel like you're too stupid for this, don't know too much, etc. Programmers often face some tough challenges when they are working on their projects. One of the first difficulties is understanding what the client or project manager wants. Sometimes, they may not explain things clearly, which can lead to mistakes. Another problem is designing the software to handle lots of data and users without slowing down. It's also hard to choose the right tools and technologies because there are so many options available. As projects get bigger, it becomes tricky to manage all the complicated parts and organize the code. Finding and fixing bugs is another big challenge that can take a lot of time. Meeting deadlines and delivering good quality work in a short time is stressful too. Working in teams can be hard because everyone has different ideas and styles. And as technology keeps changing, coders need to keep learning new things to stay updated. It's not easy to balance writing efficient code with making it easy to understand and maintain. Despite these difficulties, coders keep learning and adapting to become better at their work. In coding, it's important to be okay with not knowing everything for sure and be comfortable with being uncomfortable.

I really enjoy working in the field of coding. It's a profession that lets me be creative and solve problems using technology. Even though it can be challenging at times, the feeling of accomplishment when I build something or solve a tough coding problem is incredibly satisfying. Overall, I'm very happy with my career choice in coding.

Thank you for your time. 🙏 What is your experience being a programmer? Leave a comment. 🙂

AI-Powered GitHub Issue Management 🦾

Krisztián Maurer — Sun, 14 May 2023 15:06:48 +0000

What I built

I have developed an innovative GitHub Action that enhances GitHub issues with the power of artificial intelligence. Its primary functionalities includes finding related issues, providing concise summaries of issues and all associated comments, generating progress updates, recommending suitable labels, and more.

Category Submission:

Maintainer Must-Haves: Make the lives of Open Source maintainers easier.

App Link

https://github.com/marketplace/actions/clarify-and-improve-issues-with-openai-gpt

Screenshots

https://github.com/MaurerKrisztian/issue-improver-action-demo/issues/2

Description

This GitHUb Action can be triggered to gather the relevant issue data, make usefully comments/suggestions with OpenAI GPT models.

Basically, it works like this: prompts are sent to a GPT model, and its response appears as a comment on an issue. The prompt text can contain placeholders like {{issueTitle}}, {{issueBody}}, {{allComments}}, etc. These placeholders are replaced with the actual data from the current issue, but they can also include other information, not just limited to the issue itself.



    "summary": {
      "title": "Summary",
      "prompt": "Provide a concise summary of the main points and objectives presented in the issue '{{issueTitle}}' and its content: {{issueBody}}."
    },

One of the key components is the "sections". Each section must have at least a title and prompt parameter. In the action workflow yml, you can specify which sections you require. During the action run, the selected sections' prompts are processed using the OpenAI GPT model. The prompts have default values (refer to src/config/default-config.ts), but you can completely customize them and create your own sections. The generated responses will be added as comments to the issue.

Built in sections and inputs:

Input	Required	Default	Info
openai-key	Yes	N/A	OpenAI API key
config-file	No	issue-improver-config.json	Configuration file
add-related-issues-section	No	false	Create a related issues section.
add-summary-section	No	false	Create a summary section.
add-comment-summary-section	No	false	Create comment summary
add-custom-section	No	N/A	custom section title/id comma separated string. "*" means include all.
add-label-section	No	false	Create label suggesion
model	No	'text-davinci-003'	OpenAI model
max-tokens	No	150	OpenAI max_tokens (response length)
debug-mode	No	false	Enable debug mode: Don't create comment

related-issues-section
Find related issues among open issues. Some issues are duplicates, while others are related to each other. These details are useful to the maintainer.
label-section
The action will analyze the issue and all available labels, descriptions, and data to suggest relevant labels.
summary-section
Summarize the issue text.
custom-section
In the configuration file, specifically under the sections.custom section, you have the ability to create custom sections with your own prompts.
comment-summary-section
Summarize all comment at the current issue, make progress report etc. Occasionally, certain GitHub issues can be overwhelming with an abundance of comments, making it difficult to comprehend the situation. To address this, I have developed a comment summary feature.

debug mode

If you turn on debug mode, it will do the following: resolve prompts, give you more detailed logs of what's happening, and not create comment.. To enable this, set the debug-mode input to true.

If you want to test the action without making comments to any issues, it's useful to turn on debug mode. This will allow you to view the logs and see what comment would be created if debug mode was turned off. Once you're satisfied with the results, you can turn off debug mode.

Action example:

This action will trigger when new issue is opened,
and creates a comment including: related-issues-section, summary-section, label-section, custom-section



name: Improve issues

on:

  issues:

    types: [opened]

jobs:

  gpt-comment:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v3

      - name: Create useful comment with AI

        uses: MaurerKrisztian/issue-improver-action@v1

        with:

          openai-key: ${{ secrets.GPT_KEY }}

          max-tokens: 400

          add-related-issues-section: true

          add-summary-section: true

          add-label-section: true

          add-custom-section: "my_custom_section1,my_custom_section2"

Comment Summary

The YAML code below demonstrates how to activate comment summary, progress report, using the "!summarize" command.



on:

  issue_comment:

jobs:

  comment-summary:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v3

      - name: Comment summary

        uses: MaurerKrisztian/issue-improver-action@v1

        if: contains(github.event.comment.body, '!summarize')

        with:

          openai-key: ${{ secrets.GPT_KEY }}

          max-tokens: 400

          add-comment-summary-section: true

Custom section:

All section prompts is fully customisable.
To create custom sections / prompts, simply create a JSON file (location is the config-file input) and modify the prompts and section titles as desired. This will owerwite the default config (see: src/config/default-config.ts).

Additionally, you can add new custom sections to the sections.custom array within the configuration file.

Example config:



{

  "sections": {

    "custom": [

      {

        "title": "Joke",

        "prompt": "Make a joke about this: {{issueTitle}}"

      },

      {

        "title": "Poem",

        "prompt": "Write a short poem about this: {{issueTitle}}"

      }

    ],

    "relatedIssues": {

      "title": "Related Issues",

      "prompt": "From the list of open issues: {{openIssues}}, identify the most relevant ones related to '{{issueTitle}}' and provide a brief description of their similarities. Just the very simmilar related issues to '{{issueTitle}}' shoud be included in the answer, if none is very similar, andwer with 'none',"

    },

    "summary": {

      "title": "Summary",

      "prompt": "Provide a concise summary of the main points and objectives presented in the issue '{{issueTitle}}' and its content: {{issueBody}}."

    },

    "commentSummary": {

      "title": "Comment summary",

      "prompt": "Review the comments in {{issueComments}} for the issue '{{issueTitle}}' and its content: {{issueBody}}. Extract the key takeaways, notable updates, and any consensus reached, and provide a concise summary of the discussion."

    },

    "labelSuggestion": {

      "title": "Label Suggestion",

      "prompt": "Analyze the issue '{{issueTitle}}' and its content: {{issueBody}}, and suggest appropriate labels from the available labels {{allLabels}} that accurately represent the topic, scope, and complexity of the issue. The response shoud only include a label and why its suitable."

    }

  }

}

Available placeholders:

Name	Description
`{{issueTitle}}`	The issue title
`{{issueBody}}`	The issue body
`{{issueComments}}`	All issue comment
`{{issueAuthor}}`	Issue creator
`{{allLabels}}`	All available labels in the repository
`{{openIssues}}`	All open issues in the repository

To optimize the usage of GitHub Action time, the resolution of placeholders is cached and only resolved when necessary. This helps to avoid unnecessary wastage of valuable GitHub Action resources.

If you need a different placeholder, open an issue or send a PR.

I have set up a demo repository with the configured action. Feel free to explore and try it out by visiting the following link: https://github.com/MaurerKrisztian/issue-improver-action-demo

Link to Source Code

https://github.com/MaurerKrisztian/issue-improver-action

Permissive License

MIT

Background (What made you decide to build this particular app? What inspired you?)

My inspiration for creating this specific application stemmed from a curiosity about the ways in which AI can assist us in tasks and simplifying processes. I wanted to explore the potential of artificial intelligence in improving productivity and efficiency.

I have noticed that many open-source projects have few maintainers and a lot of issues. Some issues are duplicates, while others are related to each other, some have a lot of comments and hard to keep up with it. These details are useful to the maintainer. With the assistance of AI, this action will try to solve thies.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

This is my first custom GitHub Action, I learned a lot about how it works. I found GitHub Actions to be a very helpful tool for automating many tasks. My project used both the GitHub API and OpenAI API.

Testing a custom GitHub Action can be tough. Unlike regular code, it needs certain things to happen on GitHub to work correctly. This makes it harder to check if everything is working fine, especially when you can only rely on logs within GitHub for debugging. Thankfully, I discovered a tool named act after some struggles. This tool lets you run your GitHub Actions locally, which makes testing a lot easier and faster. It's a real game-changer for developing GitHub Actions.

I also used GitHub Actions in my project repository to build the TypeScript code and push it to the "latest" branch. Because I didn't want to keep node_modules and dist in the main branch. I also made a release and test workflow.

The development process was filled with learning and challenges. It gave me a deeper understanding of GitHub Actions, AI, and their potential in improving productivity and efficiency.

Additional Resources/Info

I received valuable improvement suggestions from Kris, Thank you!

Future Plans:

Add more placeholders
Add support for more OpenAI models
Add support for lengthy context by splitting it into multiple chunks
Experiment with other use cases to expand the range of applications
Continuously improve prompts to enhance user experience

Improve GitHub issues with AI 🦾

Krisztián Maurer — Thu, 27 Apr 2023 13:23:11 +0000

I would like to share the progress of my GitHub + DEV 2023 Hackathon project and receive feedback. The project is a Github action that triggers when a new issue is created. It creates a comment that includes a summary, related issues, and custom sections with the assistance of OpenAI API.

I have noticed that many open-source projects have few maintainers and a lot of issues. Some issues are duplicates, while others are related to each other. These details are usefull to the maintainer. With the assistance of AI, this action will create a "related issues" section in the comment.

In addition, I believe it is beneficial to summarize lengthy issues and provide feedback to the issue author on how to improve the issue text. I am also considering adding a label suggestion / assigne features.

What are your thoughts on this project? Are there any additions or changes that would be useful?

For further information, please visit this project on Github.

https://github.com/MaurerKrisztian/issue-improver-action

Hello world in electornics

Krisztián Maurer — Fri, 10 Mar 2023 18:29:04 +0000

I started to get interested in hobby electronics alongside programming a while ago. I think the two fields are similar and exciting projects can be created by combining them.

Are you interested in both electronics and programming? Do you want to create exciting projects that combine the two fields? In this article, I will show you how to light up an LED / LED strip, the "Hello World" of electronics, and explain the importance of resistors and voltage, paralell vs series circuits, how to put them together, howto check the components datasheet. Before someone start programming microcontrollers I think thies thing a must know.

What is needed for this project:

LEDs
Resistors
Power supply, Breadboard, jumping cables

Here is the circuit diagram that we will make:

You may have the following question:
Why do you need a resistor for the LED? and what does its value depend on?

We have to look at the LED current and voltage requirements

Let's say this is a LED 5 mm Red, if we take a look at its data sheet (you can quickly find a PDF description online, just search for the type), we see this about optimal operation:

I would be interested in how much Voltage is required to operate the LED optimaly. This is the forward voltage V(f).

The forward voltage is the amount of voltage needed to get current to flow across a diode. This is important to know because if you are trying to get a signal through a diode that is less than the forward voltage, you will be disappointed.
The amount of light emitted by an LED is directly proportional to the forward current flowing through it, up to a certain point.

The optimal voltage in my case is between 2V - 2.8V, so if we allow more than 2.8V to pass through, it is likely to burn out th LED and we will have to throw it away. We adjust the voltage up to 2.8V to control the brightness of the LED.

Let's say we have a 9V battery that we want to operate from. The voltage that the led receives should be somehow limited, this is where the Ohm's law and resistors can help us.

For Current, we can also find on the datasheet that I(f)=20mA (milliamer) which is 0.02A (Ampere).

The forward current of a LED is the electrical current that flows through the LED when it is in forward bias. In other words, it is the current that is required to make the LED emit light.

Ohm's law: I (Current) = V (Voltage) / R (Resistance)

This doesn't really say much at first. Let's see how we can apply it and maybe it will be clearer.

We have a 9V power source and the LED requires 2V, which means that the resistor needs to consume 7V so that the LED can get 2V.

What will be the value of Resistor?

R = V(s) - V(f) / I(f)
R = 7V (drop) / 0.02 I (LED I(f))
R = 350 Ohm

Let's look at the max as well

R = (9V - 2.8V) / 0.02I = 310 Ohm

so that we stay in the 2 - 2.8 volt range, a resistor between 310 Ohm and 350 Ohm is needed in this case.

Our circuit is now functional and the LED will not explode.

Lets go, order the components

power supply - 9V battery ~4$ or use other power source e.g usb breadboard see below
Breadboard + (Power Supply) + Jump Cable Wires ~15$ (essecial for every prototypeing)

1 LED - ~0,1$ (before buying check the datasheet)
2 resistor ~ 0,03$ (A smaller one and a larger one, based on what kind of power source and led you have)

since the LEDs, resistors, cables are so cheap and will be useful in almost every project, it is worth buying in a kit.

To have a basic starter kit that you can use for future projects, budget around $16-$25

Circuit build:

Breadbord

To connect components on a breadboard, simply insert the leads of the component into the holes on the board. Each row of holes is connected internally, so you can connect components by inserting them into different holes on the same row or by connecting them across rows using jumper wires. Jumper wires are short wires with connectors on each end that can be used to connect components on different rows or columns of the breadboard.

It's good to have a multimeter because usually, the values don't exactly match what's written on paper. The power supply voltage should be 5V but it's only 4.49V, and the resistor also deviates by 1-3-5%, but this won't be a problem if we calculate the optimal value, because it usually falls within that range.

What if we want to make a seriez of led? Let's put 2 led in seriez.

Something is wrong the led bearly light up, and if I more than 2 its not working.

Explonation:

In a series circuit, the voltage is divided among the components, meaning that the voltage drops across each component. But, the current remains the same throughout the circuit because there is only one path for the current to flow. Therefore, the voltage drop is V(led1) + V(led2) + V(resitor). So if we want to make 10 LED circuit in series that means we need at least 10 * (LED)V voltage. In my case around 20V.

but we can do it with paralell with the same volate.

In a parallel circuit, each component has the same voltage across it. This means that the total voltage of the circuit is equal to the voltage across each component. However, the current is divided among the branches of the circuit. Each branch of the circuit receives a fraction of the total current, and the sum of the currents in each branch is equal to the total current of the circuit.

so if we want to create a paralell 10 LED or 100 LED circut the voltage requirement is remain the same. But the Current requiroment add up. 100 LED needs 20mA * 100Led = 2000mA, If the power supply not capable giveing this amount of current the circit will not work.

Congratulations, you are now an electrical engineer! 😀

Dockerize fullstack application and automate releases 🚀

Krisztián Maurer — Tue, 29 Nov 2022 18:58:26 +0000

You've probably come across an open-source full-stack project that you wanted to try out, but it was hard to start because of UI, API dependencies, database, env config, versions. I tried to make this experience better.

What are the problems when somebody wants to start up a full-stack project?

Let's look at a common setup:

Clone the UI, clone the API, if it is in a separate repo, find it, install dependencies, find the requirements, set up a database, setup API, environment variables, and don't forget that your tools versions are correct, e.g. Nodejs, etc.

We feel that going through this just to try out an interesting project is a long and painful process.

How could this process be simplified?

API and UI can be in one repository, this can be disputed, but if the code is in one place, it makes it easier to have an overview, especially if there are additional microservices. There are already several monorepo solutions that solve this e.g. Nx, Turbo, if we are building a more complicated project.
Let's Dockerize! a docker build solves a few problems: the environment and versions will be OK. However, it's not that simple either.. although we've simplified the process, we still need docker build, create image, container, and start it multiple times e.g. if we have UI and API, then this has to be done twice. This would be difficult for a beginner to do this and it's still complicated.

Docker-compose: Docker Compose is a tool that was developed to help define and share multi-container applications. This is what we need.

Let's say you need a UI, API, and MongoDB database. For that, we can write something like this: docker-compose.build.yml

version: '2' # specify docker-compose version

# Define the services/containers to be run
services:
  angular: # name of the first service
    build: ui # specify the directory of the Dockerfile
    ports:
      - "4200:4200" # specify port forewarding

  express: #name of the second service
    build: api # specify the directory of the Dockerfile
    ports:
      - "3000:3000" #specify ports forewarding

  database: # name of the third service
    image: mongo # specify image to build container from
    ports:
      - "3333:27017" # specify port forewarding

This will build the Dockerfile in the "ui" and "api" folders, adds a MongoDB database, and everything on the appropriate port.

Start command:

docker-compose --file ./docker-compose.build.yml up

and everything is running.

In the current state, the start process will be something like this

git clone project-name
cd project-name
sudo docker-compose --file ./docker-compose.build.yml up

If we look back at how many difficulties we had to go through to start the project, the experience is already light-years better

Could this experience be any better?

Yes!

You have to clone the project, you have to wait for the build (which can be very slow).

We can create the images ourselves, and then we only need a docker-compose file that points to these images (no need to clone a project and wait for a docker build).

e.g.

version: '2' # specify docker-compose version

# Define the services/containers to be run
services:
  angular: # name of the first service
    image: ghcr.io/maurerkrisztian/dont-break-the-chain-ui:latest 
    ports:
      - "4200:4200" # specify port forewarding

  express: #name of the second service
    image: ghcr.io/maurerkrisztian/dont-break-the-chain-api:latest 
    ports:
      - "3000:3000" #specify ports forewarding

  database: # name of the third service
    image: mongo # specify image to build container from
    ports:
      - "3333:27017" # specify port forewarding

These images can be built and published manually, but I'm lazy and would probably forget, so I put together a GitHub action. The registry can be DockerHub or even the GitHub docker registry, in this case, it's easier to keep things in one place, and I think you should choose the GitHub registry.

The images appear next to the GitHub repository and you can view them. cool!

name: Create and publish a Docker image

on:
  release:
    types: [created]
  workflow_dispatch:

env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}

jobs:
  build-and-push-image-api:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Log in to the Container registry
        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Extract metadata (tags, labels) for Docker
        id: meta
        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}-api

      - name: Build and push Docker image
        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
        with:
          context: ./api
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
  build-and-push-image-ui:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Log in to the Container registry
        uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
        with:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Extract metadata (tags, labels) for Docker
        id: meta
        uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
        with:
          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}-ui

      - name: Build and push Docker image
        uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
        with:
          context: ./ui
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}

another advantage is that you don't have to login because the GITHUB_TOKEN is enough to authenticate yourself in the GitHub registry, which is created automatically (for this action, you don't need to add any GH Action environment variable)

This action will be triggered when new release happens or manually

here is a release action that creates the changelog and version in the root package.json, tag, then triggers the docker builds which is publishes all images at the same time, so images with the same version always work together.

Release action:

name: Releases
on:
  workflow_dispatch:

jobs:
  generate-changelog-and-push-to-main:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: conventional Changelog Action
        id: changelog
        uses: TriPSs/conventional-changelog-action@v3.7.1
        with:
          github-token: ${{ secrets.MY_GITHUB_TOKEN }}
          version-file: './package.json'

      - name: create release
        uses: actions/create-release@v1
        if: ${{ steps.changelog.outputs.skipped == 'false' }}
        env:
          GITHUB_TOKEN: ${{ secrets.MY_GITHUB_TOKEN }}
        with:
          tag_name: ${{ steps.changelog.outputs.tag }}
          release_name: ${{ steps.changelog.outputs.tag }}
          body: ${{ steps.changelog.outputs.clean_changelog }}

You will need a MY_GITHUB_TOKEN env.

So now when you start a release, it generates the changelog, and versions. Triggers the docker workflow
which builds images and pushes them to the GitHub registry.

Final experience

for the maintainer:

You can release your project with 1 button press, which updates everything.

User:

Copy docker-build.latest.yml and run it

docker-compose --file ./docker-compose.latest.yml up

it's fast because you don't need to build and everything works together, you don't need to download any dependencies for the project.

I'm not DevOps, just a full-stack developer, if you can improve this, please leave a comment.
Here is a demo repo: https://github.com/MaurerKrisztian/dont-break-the-chain

Thanks for reading.❤️ I hope this was helpful.