If you want to make configurations on an ESP32 via the Web Serial API, you must first ensure that the ESP32 is programmed so that it can receive commands via its serial interface and respond to them accordingly. This usually requires firmware that has been specially developed to interpret commands and implement settings or actions on the device.

Let's do it!

I've prepared a all in one Demo for you. All you need is a Computer with a Chromium based browser, an microcontroller and a USB cable to connect both devices.

At first, let's give it a try:
https://vergissberlin.github.io/example-serial-web-api/

If you are interested in learning more about this particular example, take a look at the code: https://github.com/vergissberlin/example-serial-web-api

If you want to know how to get started in general, read on.

How it works in short

Establish a connection

Firstly, we establish a connection to the microcontroller:

let port;

async function connect() {
    port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600 });

    // Event listener for incoming data
    port.addEventListener('input', ({ data }) => {
        let decoder = new TextDecoder();
        let text = decoder.decode(data);
        console.log('Received:', text);
    });
}

connect(); // Call connect() when your application starts

Send data

Now we can send data like so:

async function send() {
    if (!port) return;
    let data = "Hello Arduino!";
    const writer = port.writable.getWriter();
    await writer.write(new TextEncoder().encode(data));
    await writer.releaseLock();
}

Receive the data with you controller

Receiving the data is surprisingly easy:

void setup() {
  Serial.begin(9600);
}

void loop() {
  if (Serial.available() > 0) {
    String receivedData = Serial.readString();
    Serial.println("Received: " + receivedData);
  }
}

Serial.readString() can be used to pull the data directly from the stream.

Summary

The Web Serial API facilitates browser-based communication with hardware devices via the serial interface, commonly used with development boards like ESP32 or Arduino Uno for data exchange.

Configuring an ESP32 via the Web Serial API requires programming it to receive and respond to commands through its serial interface, typically with specialized firmware.

Check out this all-in-one demo: Web Serial API Demo and explore the code on GitHub for deeper insights. Establishing a connection and sending/receiving data is straightforward, as demonstrated through the provided JavaScript and Arduino examples.

Here are some reasons why you should version the pubspec.lock file:

1. Reproducibility: By versioning the pubspec.lock file, you can ensure that other developers working on your project use the exact same versions of the dependencies. This ensures that your project works consistently in different environments.

2. Protection against changes: If you do not version the pubspec.lock file and instead use only the pubspec.yaml file to define dependencies, updates to package versions can cause unexpected problems. The pubspec.lock file ensures that the defined versions are maintained until you deliberately update them.

Continuous Integration (CI): If you are using Continuous Integration in your development process, the pubspec.lock file is important to ensure that the CI environment uses the same dependencies as your local development environment.

1. Versioning the SDK: The pubspec.lock file also contains information about the version of the Flutter SDK used for your project. This is important to ensure that your project is compatible with the correct Flutter SDK version.

To ensure that the pubspec.lock file is versioned correctly, you should make sure that you commit it along with the pubspec.yaml file in your version control system (like Git). This ensures that other developers use the same package versions when they check out the project and install the dependencies.

https://vergissberlin.github.io/example-openai-vuejs/

Wanna know how?

For a chat with a bot, all you need is a GET request that contains the request and an API key. I decided to route the request through a proxy so that I don't have to make my API key public.

Roughly speaking, the following steps are currently necessary:

1. First you have to register with OpenAI and get an API key.

2. then you have to install the OpenAI module for NodeJS by executing the following command: npm install openai.

3. then you have to import the OpenAI module into the NodeJS application and initialise the API key:

var openai = require('openai'); openai.apiKey = "API key";

1. Now you can use the various functions of the OpenAI API by calling the appropriate methods on the OpenAI object. For example, one could generate the text of a document with the generate() method:

    openai.generate({
        prompt: "text used as a template",
        model: "Name of the model used",
        temperature: 0.5 
    }, function(error, response) {
        if (error) console.error(error);
        else console.log(response.text);
    });
   

   That's it!

   Cost

   The cost of using the OpenAI API varies depending on the specific API you are using. Some of the APIs are free to use, while others have a cost associated with them. It's also worth noting that the cost of using the API may change over time. I recommend checking the pricing page on the OpenAI website for the most up-to-date information on the cost of using the API.

   Here is a link to the pricing page: https://beta.openai.com/pricing

   To take control of your cost, they provide a nice tool where you can set limits, and you can see the current usage:

   

   Dive deeper

   If you want to know more about it,

   1. take a look into my repo: https://github.com/vergissberlin/example-openai-vuejs

   2. Take a look into the API documentation at: https://beta.openai.com/docs/quickstart/build-your-application

In this article, we will try out the faker implementations in NodeJS, Python and Ruby.

Why these languages? To be honest, I am not an expert with these languages, but these languages are known for being able to work on parallel processes and that's what we need! Because faker needs a lot of power for calculations and memory. We also need a fast hard drive, because we will work with files and that produces a lot of IO processes.

How much-falsified data does a man need?

That depends of course on your project. To measure changes in the performance between commit, I suggest using so many items that your test does not run longer than 10 minutes on average. But for a full integration test, you should use nearly the same amount + 10% as like you have later in production. My use case is that I need 20 million users, divided into CSV files with 10 thousand users in each file. That means at least, the outcome is 200 hundred files, 19 GB of test data. So let's get do it!

Parallel processes

Women are known to be capable of multitasking. Developer's best friend can do this too! My lovely Mac has 4 CPUs. That means we can run 4 processes of generating the fake data in parallel without overloading him. Here is an output from HTOP, which is an advanced version of top, the process monitor for the CLI. On the top left, you can see, that my for cores waiting for orders.

output from HTOP

Wai Ting Loooooong! With parallel processes

NodeJS

… is known to run asynchronously. But unfortunately not truly on parallel processes. In runs all in the same process, but asynchronous. The gives use not the benefit we want, with a high performance 12 core processors on board because JavaScript is a single-threaded language. We can use only one of them, except we work with child processes or workers! I could work with workers or child processes directly, but the library worker pool gives us a nice wrapper API to play around easily with the different techniques.

Worker types

With worker pool, you have the option to choose between the worker types process and thread. In case of 'process', child_process will be used. In case of 'thread', worker_threads will be used. I was curious to find out if child_process or worker_threads is better for generating test data. 1st test: 90,000 test users

In my first test 90000 test users are generated. They are distributed over 18 CSV files. Surprisingly for me, processes are a little bit faster than threads (child processes). But that already counts when you generate gigabytes of test data!

In my second test, I generated larger amounts of data. 5 million test users spread over 50 CSV files. So there are 100,000 test users in each file.

Fake it yourself!

You come so far now it's time to give it a try on your own! Checkout the repository:

Summary

Faker is an awesome concept. It is developed in many programming languages. In that cases, I tested the JavaScript version, and I am pretty happy with the outcome. Now I am curious how faker performs in other languages like Python, Ruby, PHP, Java or go! Sounds like a good contest to me :) Give it a try! With parallel processing, it was almost 4 times faster than on a single process in my tests. And child_processes are up to 5% faster than worker_threads. Download and try Download the example project, and try it on your machine!

Knowledge sharing is one of the keys to sustainable, successful businesses. Maybe my approach will help you and your colleagues to reach this goal faster and happier.

Rules

1. one round lasts 20 minutes
2. afterwards there is a 10-minute evaluation
3. everyone writes human-readable code (no compression)
4. use of any documentation is allowed
5. The entire event is recorded. A moderator switches to the participants' screens via screen-sharing and asks questions.

Entertainment

To entertain the spectators and participants during the competition, the participants take turns describing what they are currently working on. Furthermore, they are asked prepared questions. Here are a few examples:

Pot 1 – Serious questions

• What are your tasks at Netresearch?
• Have you had another job before?
• What else do you do when you are not programming?
• What is your favourite programming language?

Pot 2 – Fun questions / tasks

• Tell a joke!
• What profession would your parents have imagined for you?
• If you had become a girl/boy, what would your first name be?

Pot 3 – Tricky questions

• What can you find on http://info.cern.ch ? – The first website ever.
• Have you ever peed standing up?
• Have you ever stolen a sweet from a colleague's desk?
• What was your most embarrassing experience at work?

Pot 4 – Nasty questions for an applicant

• How do you feel about being criticised?
• What was your biggest mistake - and what have you learned from it?
• When was the last time you disregarded a rule or regulation, and why?
• What added value would your attitude bring to our company?

Tools

To participate in the event, the opponents will need the following items:

• Video conferencing software with the possibility to share the screen
• Microphone and a webcam
• A browser

To organise such an event, you will need

• Video conferencing software with screen sharing capability
• OBS for recording and streaming
• Voting tool
• Coding Battle platform such as cssbattle.dev

Prizes

At the end of a competition, the award ceremony is always a crowning event. The appreciation of the winner's performance by all participants. For our first battle, I chose CSS. Getting the frontend developers excited wasn't particularly difficult, but I wanted to get more colleagues on board from the backend as well, so I asked our marketing department for prizes for the winners.

• Audience Award (Voting)
• The Highest score in CSS Battle platform

Summary

Imparting knowledge in a playful way is not a new invention. My goal with this article is to show that this can also work for knowledge exchange in companies in the IT sector. At our first Coding Battle, we had a lot of fun and learned a lot. Organising an event like this takes a lot of effort the first time. The second time, it's much easier. So the key to success is regularity.

I would be pleased if you would also conduct a battle in your company and tell me about your experiences! You want to know more about it? Get in touch with me!

This is how it looks like

If you want to send an email in HTML format, there is a lot to consider, because the different email clients have certain expectations about how the HTML code of the email should be structured. To make this task easier, there is MJML. MJML stands for Mailjet Markup Language to help developers code emails in a simpler and more efficient way. And to facilitate the use of MJML in Node-RED, I have written a node.

In this article, we will install the node and send a well-structured, beautiful-looking email as an example.

node-red-contrib-mjml

Installation

As a requirement, you need to have Node-RED to be installed. Then change directory to your Node-RED installation and run:

npm install @vergissberlin/node-red-contrib-mjml

OR go to your pallet settings in your Node-RED admin UI and search for "mjml".

Basic template example

Let's now set up a basic flow with which we can send our first mail.

1. Copy and import the following flow into your Node-RED: https://github.com/vergissberlin/node-red-contrib-mjml/blob/main/examples/Parse%20node%20example.json
2. Configure the credentials and receiver address in the email node and press the deploy button
3. Use the button one the debug node to trigger the email proccess.

You will get an email which looks like this:

Pretty cool, right?

Deep look into the markup and how to use it

MJML has a great documentation, and an online-editor where you can create your email templates easily. There are other pretty fancy looking, ready to use and bulletproof templates available on their website.

MJML is a markup language like HTML and here is the example we use in our flow:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>
        <mj-divider border-color="#F45E43"></mj-divider>
        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">
            Hello World
        </mj-text>
        <mj-text>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when 
          an unknown printer took a galley of type and scrambled it to make a type 
          specimen book. It has survived not only five centuries, but also the leap into 
          electronic typesetting, remaining essentially unchanged. It was popularised in the 
          1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
          more recently with desktop publishing software like Aldus PageMaker including 
          versions of Lorem Ipsum.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Now we can use variables for sensor data like so:

[…]
        <mj-text>Random number: {msg.payload}</mj-text>
[…]

Summary

Send beautiful, well-structured email with Node-RED is now an easy task to do. If you like to take a look into the source code, you can do it. It's open source and published on GitHub.

Links

• Node-RED repository
• Node-RED
• MJML documentation
• MJML templates

Repository on GitHub

In software development, there is sometimes a need to copy a large amount of file from one directory to another. For instance, when you have shared volumes in a Docker environment with different services, some services need to have access to the application source files, you put the source code in a volume which is shared between these services. On an initial boot up, or on an update of the app image, there is a need to update the files in the volume.

Test arrangement

For our testing scenario, we try to use a common use case. It is an application image with 140195 files. I used an installed Magento 2 within its all its dependencies.

As a benchmark tool for the CLI, I used hyperfine on macOS.

Test use cases

1. On an initial boot up, the target directory is empty. We have to copy all files from one directory to another.
2. The second use case to just update files where is a change.

CP

CP is a very basic functionality in Linux based shells. It’s made to copy files. It is possible to copy recursively. It keeps the directory structure. The target directory should be empty. Perfect! Let’s get do it!

Test with cp

hyperfine \
    'cp -upr --sparse=never src tmp-cp' \
    'cp -upr --sparse=never src tmp-cp'

It copies file by file from source to target without checking if there are any changes in it.

hyperfine 'cp -upr --sparse=never src tmp-cp' 'cp -upr --sparse=never src tmp-cp'
Benchmark #1: cp -upr --sparse=never src tmp-cp
  Time (mean ± σ):     11.744 s ± 32.450 s    [User: 775.2 ms, System: 2396.0 ms]
  Range (min … max):    1.284 s … 104.094 s

Benchmark #2: cp -upr --sparse=never src tmp-cp
  Time (mean ± σ):      1.397 s ±  0.086 s    [User: 326.0 ms, System: 1033.2 ms]
  Range (min … max):    1.308 s …  1.511 s

rsync

Rsync copies files either to or from a remote host, or locally on the current host as like CP. It tries to improve the speed by using an index file. Rsync finds files that need to be transferred using a "quick check" algorithm that looks for files that have changed in size or in last-modified time. Any changes in the other preserved attributes (as requested by options) are made on the destination file directly when the quick check indicates that the file’s data does not need to be updated.

So we assume that there is no improvement on the first copy, but on updating files.

Test with rsync

hyperfine \
    'rsync -a src tmp-rsync' \
    'rsync -a src tmp-rsync'

Benchmark #1: rsync -a src tmp-rsync
  Time (mean ± σ):      7.710 s ± 19.948 s    [User: 1.330 s, System: 2.346 s]
  Range (min … max):    1.254 s … 64.481 s

Benchmark #2: rsync -a src tmp-rsync
  Time (mean ± σ):      1.424 s ±  0.147 s    [User: 543.1 ms, System: 837.6 ms]
  Range (min … max):    1.281 s …  1.779 s

Tar

tar creates and manipulates streaming archive files.

Test with tar

hyperfine 'tar -qxf src.tar -C tmp-tar' 'tar -qxf src.tar -C tmp-tar'
Benchmark #1: tar -xf src.tar
  Time (mean ± σ):     53.214 s ±  4.403 s    [User: 3.303 s, System: 12.450 s]
  Range (min … max):   50.510 s … 65.249 s
Benchmark #1: tar -xf src.tar -C tmp-tar
  Time (mean ± σ):     54.455 s ±  0.434 s    [User: 3.551 s, System: 12.724 s]
  Range (min … max):   54.006 s … 55.305 s

Consumption

These tests have shown that CP is slightly faster than RSYNC when updating. However, CP takes significantly more time to initially copy the files. TAR is faster on the first copy as CP, but it has no advantages over RSYNC.

In addition, there may also be security-relevant files such as .env, which may contain passwords. Once such a file has been versioned, it could be somewhat difficult to get it out of the version history.

There are several generators on the web to create a .gitignore file. There are also prefabricated templates on GitHub that you can choose from when creating a repository. There are many files to think about.

But that doesn't have to be the case! Instead of excluding all files that you don't like, you can also explicitly specify in the .gitignore which files should end up in the version management.

Pros and cons

✅ Protection against unintentional commit of files of OS, IDE or test files

✅ Improve security (exclude .env files automatically)

❌ On commit, take care that all your files are included

How to do it the other way around

First we ignore all files

# Ignore all files
/*

to then exclude the files that we really want to have versioned. You can specify individual files, but also entire directories.

# Ignore all files
/*

# Except these files
!/app/
!/README.md

Beware! There is one special thing to note here. All files are really excluded. Including the .gitignore file itself. We must therefore also explicitly add it to the list of wanted files.

# Ignore all files
/*

# Except these files
!/app/
!/README.md
!/.gitignore

Ignore files within a subdirectory

That use case is al little bit tricky. Imagine you have a file in the APP directory that you want to ignore, but not the other files it contains. Than you have to do that

# Ignore all files
/*

# Except these files
!/app/
!/README.md
!/.gitignore

# But ignore this file without the allowed path
/app/.env

Conclusion

With the other way around in the .gitignore you have full control what's going into the repository. You do not check in files accidentally. But if you create files, you may have to think about it more than before if it is not within the ignore path! This change brings some advantages. At the beginning, however, it takes a little getting used to for many people to always remember to expand the file list when they add a new file or directory. This is a principle that can also be used for other software. As for example in the .dockerignore.

In an industry with complex problems, we need people who think and act independently. In the wiki of my employer Netresearch there is an appropriate graphic that describes the company culture well. Or the aspired corporate culture as presented self-critically.

I am very happy to work in the IT industry, that became clear to me again today.

Best regards André

Credits and links

Cliparts

• Mean Boss Cliparts #2867138 http://clipart-library.com/clipart/880897.htm
• Mean Boss Cliparts #2867116 http://clipart-library.com/clipart/880641.htm
• Mean Boss Cliparts #2867135 http://clipart-library.com/clipart/880874.htm
• Boss Cliparts #34897 http://clipart-library.com/clipart/271303.htm

Book

• The Art of Action: How Leaders Close the Gaps between Plans, Actions and Results https://amzn.to/2ZS5uWC

Video

So, why I am so excited?

I can imagine myself laughing at myself one day when I read this in the distant future, or I cry and say to my granddaughter "We used to write code by hand, and it was legible, clear and beautiful, not like what the AI does today."

When I tried AI for the first time, I was so amazed! One line after the other filled with meaningful content (aka code), and I just pressed the tab key, tab key, tab key …

Even a chicken can program in that way!

If CoPilot where allowed to bring the sentence "From today's perspective, […]" to an end, it would write:

we can see the AI as a tool that can help us write code 
that is more readable, more maintainable, and more efficient.

Oh shit wait! It really completed the 🤖🤖🤖 sentence, and it is more readable, more maintainable, and more efficient! 🤖🤖🤖

STOP!! Go away! Arrrrgghhh!

The Sorcerer's Apprentice, (Göthe, Der Zauberlehrling, 1798)

I have need of Thee! from the spirits that I called Sir, deliver me!

Back now, broom, into the closet! Be thou as thou wert before! Until I, the real master call thee forth to serve once more!

Links

• GPT-3 on Wikipedia
• OpenAI
• GitHub CoPilot
• Visual Studio Code

Note: The co-pilot usually sits on the right-hand side.

Advantages

At Netresearch, we use this method and derive many advantages from it:

• Direct knowledge exchange about methods, tools used and ways of working.
• Improvement of code quality through direct code review, which leads to more robust code.
• Improving collaboration through communication
• When you have to describe approaches verbally, new ideas come up and thinking errors are noticed.
• In dialogue, the best solution can be found.
• A shared sense of achievement makes people more satisfied with the result.

Stereotype

In the short term, you might think that you need twice as much development time for a feature, but in fact, the elimination of a code review, the exchange of knowledge and the more robust code do not result in additional costs in the long term.

Disadvantages

The strong feeling that you are desperate to get to the keyboard because you just can't seem to describe the problem in a way that your co-pilot understands. This can take years of your life and lead to grey hair! Also, your nails may break if you grip the seat cushion of your office chair too hard.

Rules

You and your boss are convinced, and you wonder how to start? There are a few rules for pair programming that you should follow:

1. Switch keyboard control at least every 15 Minutes. It helps that both programmers are on track, the hole time.
2. Writing code is accompanied by language.
3. You have to pinch yourself to say, "I'll do it quickly".
4. Pair programming is not a must. Sometimes there are routine tasks where knowledge cannot be shared.
5. Tidy up your desk to prepare that you are not alone.
6. If your meat each other in real life, take a shower in the morning :D

Pair programming remotely

Sitting together at a computer is probably the most beautiful thing of all. Probably many stock photos were taken during pair programming, where one of the developers smiles and points at the monitor. Something silly like that ... or this ! tsss ...

But how does pair programming work when the workplaces are kilometres apart? There are a few techniques for this, such as git handover, but what I would like to introduce today is Code With Me by JetBrains.

One day I actually read through one of the tips that pop up when you open Android Studio / WebStorm / PHPStorm / RubyMine / PyCharm / GoLand / CLine or another derivate of IntelliJ IDE and discovered this feature. There are already several other editors that allow you to work together on a file, but with Code With Me, JetBrains from the Czech Republic has taken it to a new level.

1. Invitations to a pair programming session via a link,
2. control of access rights,
3. audio and video chat are also integrated.
4. A follow-up mode, in which you can also follow when your partner opens a new file or scrolls down.

You can start a pair programming session by clicking on the user icon in the top right-hand corner.

Summary

I don't want to repeat the prejudice, but you should know them if your project manager counter-argues with the following arguments in order to be prepared. The prejudice "One problem to solve + two programmers working on it = twice the effort" is false. You improve code quality, which mean at least less bugs. You share knowledge and improve your communication skills.

Questions

Have you ever tried couples programming or even mob programming at regular intervals? What are your experiences with it? How have your bosses reacted?

• "It's another project. I don't know much about it. Don't wanna break something, so I just copied it."
• "I don't have time, maybe later …"
• "Maybe later on, I want to have something different in each function/template/class, so it's better to copy it."

Advantages - to keep it DRY

• If you have to change something later on, you may have to do it twice (or even multiple times) to achieve your goal. So it is easier to maintain.
• Less code - is better code. Just remember, if you copy something, you must copy the tests as well! You do test, don't you? 🤨

Ways to take care about it without even thinking

Automatization is the key. No matter which language do you use in your current project, there is a copy paste detector out there. There are some for specific languages:

• JavaScript jscpd
• PHP phpcpd

… and some with cross language support like PMD or Basta.

Usage

Easy to install and simple to use. You can even export machine-readable reports to show the results in a graph over time, for example. In my case, I used XML for my C++ report, which is compatible with good old Jenkins.

./run.sh cpd --files /path/to/source --language cpp --format xml

Summary

It doesn't take much effort to keep things dry. Just pull up your pants and take care of it! Automation with tests and copy-and-paste detectors can help to improve your code quality and the maintainability of your software.

Questions

1. Are you try? Sometimes?
2. Do you inspect your code automatically?
3. If yes, which tool do you use to visualize the results?

Example

You may say the answer to that question is easy? But it's not what you think!

For better testing, we split our function, so that any function hast a single responsibility. So, each function is very readable and easy to test with unit tests. As an example, let's create a primitive calculator, which is able to add, subtract, multiply or divide two arguments each other.

Good example?

// Add two arguments to each other
function add(a, b) {
    return a + b;
}

// Subtraction of two numbers
function subtract(a, b) {
  return a - b;
}

// Multiply the first argument by the second
function multiply(a, b) {
  return a * b;
}

// Divides the first argument by the second
function divide(a, b) {
  return a / b;
}

// Delegate two numbers and their operant to the correct function
function calculator(a, b, operator) {
  switch (operator) {
    case '+':
      return add(a, b);
    case '-':
      return subtract(a, b);
    case '*':
      return multiply(a, b);
    case '/':
      return divide(a, b);
    default:
      return 'Error';
  }
}

Bad example?

// caclulator which can add, subtract, multiply and divide two numbers
function calculator(a, b, operator) {
    let result = 0;
    switch (operator) {
        case "+":
            result = a + b;
            break;
        case "-":
            result = a - b;
            break;
        case "*":
            result = a * b;
            break;
        case "/":
            result = a / b;
            break;
    }
    return result;
}

At first glance, the 2nd example is much easier to read, and it would be correct if there were no future with users and their new function requests, such as combining operators and rules like dot before dash. If you start to implement the new functions in that way, you will run in trouble pretty quickly.

Summary 🌈

If someone in the future ask you what the hell KISS means, do you know the answer? Probably not when it comes to the details because not everyone likes it as colourful as you do. Pair programming can help you and your friends to get better programmer with (a) KISS 💋

1. Your code should be easy to read
2. The complexity (nested <=3) should be low

Question

Which one is easier to read? The second one? Do you see shades between? Leave a comment!

And now

Create your account on hashnode and do it like the same! It's for free …