I'm working in the public sector / a goverment agency. I'm responsible for the digitalization of a specific area. Sadly, if you are in the public sector but not in the IT area directly, the resources and the tools available to support the daily job and create new solutions are very very limited. The justification is “for security reasons and no budget.”.

Anyway, we still Need to accomplish specific Tasks. My colleagues are working with certificates. The certificates can be checked online on the issuer Website. Because the cerficates are bound to personal data, a QR code with link and a hash is provided on every certificate, so that you don't need to fill manually all required form fields to check the certificate.

What is this all About?

The issue is, that my colleages do not have any devices to read the QR code and also can't use the freely available QR code readers from the internet, since they are handling with personal data, which should be kept private. They asked me if I can help them and find a way to read the QR codes in a comfortable and at the same time secure way?

I can offer a lot of different solutions using C# or NodeJS or similar programming languages and environments, however I don't have them. So my only option was to use vanilla JavaScript and static/local HTML pages. I wrote the first half of the functionality myself and vibe coded some specific functionality and the styling (roughly the second half).

The certificates are saved either as PDFs or as images. Also there are different certificate providers and the QR code is positioned on different locations on the page. I need either a solution that can crop the QR code and scan it or scan the complete page automatically and read the QR code. Let's summarize the conditions:

• it should work completely locally (loaded data, should not leave the device)

• it should use existing, already installed Software (not possible to install new software)

• it should not cost anything (fees or software buy)

Conclusion: Technology stack is limited to vanilla JavaScript and pre-installed browsers.

Solution and the support of AI.

Let's see what is possible and how. I broke down the technical requirements into the following parts:

1. Load a file and read its content in (browser-)memory using an html input element

2. If the loaded file is PDF or image show it (bonus: PDF paging, when a document has multiple pages)

3. Create a comfortable UI option to crop the QR Code and take it's content as an input for the QR code reader

4. Scan QR code and retrieve content (bonus: if possible, without the need to specify where the QR code is located, and so omit the previous part)

5. Styling - because no one likes ugly weg pages anymore. 😉

Let's gooo.

1. This part is straight foreward and an empty html page with file picker was created in minutes.

2. I already used Mozilla PDF.js viewer in the past, which is also build-in into Firefox, so I didn't look for other viewers. It's a modern free open source solution, that supports loading PDF Content in memory from an ArrayBuffer, which is one of the possible Outputs from the Input element. I extended the html page with a canvas and added the code to load the and show the PDF content on the canvas.

Aaaand opening the web page as a file from the disk - what my colleagues will do - failed.

The issue was, that at the time of working on the first version, I didn't have access to a web Server (also not locally), and the browser showed an error - CORS while loading the PDF.js library using the file:// protocol.

Access to script at 'file:///C:/Projects/QRCodeReader/js/pdf.min.mjs' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

Since every file is viewed as Origin, loading does not work, because the Same-Origin-Policy is violated. Luckily Chrome, Edge and Firefox offer an easy way to get around and allow loading from pages loaded using the file:// protocol.

Chrome and MS Edge have the same core and thus the same command line Option

--allow-file-access-from-files

Starting Chrome/MS Edge from the CLI like this solves the issue:

"c:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

"c:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --allow-file-access-from-files

Firefox does not have a command line option, however it has a configuration option for the same functionality:

• navigate to about:config

• and set the security.fileuri.strict_origin_policy option to false

I personally even prefer the Firefox variant better, since the change is permanent and the Chrome solution needs special preparations.

Fortunately, discovering this problem and solving it helped me with the next step - loading the QR code reader libraries - otherwise, I would have had the same problem when loading them too.

3. This is the part where I started vibe coding. It could have taken me definitely longer to implement the cropping functionality on my own. 😉

I used Google Gemini and it was almost a one-shot solution, that works exactly as expected - select an area from the canvas with the mouse, crop it and convert the data into an Image. The AI handled all the logic about scaling, moving and transforming. When I supplied my current code and asked to modify this, so that it works also for Images, the solution was easier then I thought - the canvas usage and handling logic applies without any changes for an image - the only change was just to show the image on the canvas instead of the PDF.js viewer.

4. There are a few good QR code Javascript libaries out there. A lot of them a for pecific frameworks or only for NodeJS, so for obvious reasons I could not use them. Initially I found the old but good jsqrcode (https://github.com/LazarSoft/jsqrcode). It worked very well, however only for precise QR code images - this means I could have only offered a solution in which you need every time to crop the QR code and read it or implement automatic cropping of an area of the image/document depending on the different certificate types. Possible, but not comfortable or easy. I searched further and found Nimiq QR Code scanner (https://github.com/nimiq/qr-scanner) which not only supports ESM but also scanning a complete image that contains somewhere a QR code. Yay. Full scan - here we go. 🚀

I decided to try it and it worked pretty good. It even has a file for older versions, that do not support modules functionality.

5. Last but not least - now that the web page was ready and worked as expected I thought, that it could use some color. Nobody likes ugly pages in 2026 anymore. My first thought was to use TailwindCSS. I instructed the AI and it created a light and good styling. The problem with it - the cropping did not work anymore properly. Ouch.

I started debugging and discussing the issue with the AI. At some point instead of trying to fix scaling factors and z-index of elements I told the AI to replace the TailwindCSS classes with custom CSS. And again It did a great job - it took the styling and created custom classes, that didn't broke the cropping anymore, but looked exactly like the TailwindCSS styling. Problemo solved. 🥳

A few months later we finally have out own web server and now everyone can easily use the QR code reader from it, instead of starting Chrome with extra arguments in order to scan a document.

If you need a QR Code reader solution that works completelly offline for PDF documents and image files, you can grab the open source code from GitHub - https://github.com/keenthinker/vibe-qr-scanner.

As always, questions, suggestions, and feedback are welcome at any time.

Recently, I decided to breathe new life into my 10-year-old Surface Pro 3 by installing Linux on it. To my surprise, this old device turned out to be perfectly capable of running small, locally hosted large language models (LLMs) - for example, IBM’s Granite series, in order to have a local AI system.

Yes, really! With 8 GB of RAM, an Intel i7 (4th Gen), and no GPU, you can run compact LLMs at quite an acceptable speed.

However, during this experiment I learned a very important lesson about Retrieval-Augmented-Generation (RAG) - and it completely changed how I think about embeddings and context preparation.

💡The key realization

When building AI RAG solutions locally, using orchestration frameworks such as LangChain, LlamaIndex, or Haystack, I discovered that while general-purpose LLMs can generate embeddings, they’re far from optimal for that task.

That was my “aha” moment. Specialized embedding models like nomic-embed-text or all-MiniLM exist for a reason - and using them makes all the difference.

🥼The experiment

I use Ollama to run LLMs locally. For testing, I downloaded the relatively small IBM Granite4:micro-h (1.9 GB) model.

I started with a simple prototype in LangChain:

• Create an embedding object

• Specify Granite 4 as the embedding model

• Generate a vector for the text “Hello, world”

Everything worked smoothly. Encouraged, I added a memory store and implemented a similarity search.

Then I decided to use something more substantial - a full Wikipedia article as context. That’s when things got interesting.

After launching the server and sending a request… - I waited. And waited. And waited some more. Eventually, LangChain timed out.

At first, I assumed it was a framework issue. So I rebuilt the same solution using LlamaIndex. Same result. That’s when I realized the issue wasn’t with the frameworks at all.

The problem was the embedding model. I was using a general LLM instead of a specialized embedding model.

Once I switched to a proper embedding model, everything changed - it worked beautifully!

✅ 70 KB of text (roughly 17K tokens) processed (embed) in about 3 minutes.
✅ Splitting the text into smaller chunks with a bit of overlap further improved performance and efficiency.

🧭The takeaway

The lesson here is simple but powerful:

👉 Embedding models are critical for preparing your data before retrieval and generation.

They’re not just an optional optimization - they’re the foundation of a well-performing RAG system.

Embedding models are purpose-built for exactly this - creating embedding vectors. Unlike general LLMs (like LLaMA), which are designed primarily to generate text, embedding models are trained to represent the meaning of text in a compact, multi-dimensional vector space. Each dimension captures subtle aspects of context, similarity, and relationships between words or phrases, allowing the model to “understand” how pieces of text relate to each other.

Tokens play a crucial role here: the model breaks text into discrete tokens and maps them into vectors, preserving semantic relationships across even large inputs. This careful token-level representation makes embedding models not only faster but also far more reliable, especially when your RAG system depends on accurate similarity searches and retrieval. In short, embeddings turn text into a numerical language the model can reason over efficiently - something general-purpose LLMs aren’t optimized for.

🔜What’s next

Along the way, I created an introductory presentation for my (non-technical) colleagues that explains how large language models (LLMs) work, with a hands-on demo of a Retrieval-Augmented-Generation (RAG) system build using an orchestration framework. The overview also covers how these frameworks operate and why they're useful for building and managing complex AI workflows (tying together key components like embedding generation, similarity search, and LLM querying into a seamless workflow).

In my next post, I’ll walk through the technical side - including the code and setup - for anyone who wants to experiment with local LLMs on modest hardware - stay tuned.

However, I’ve faced one recurring challenge: Bootstrap themes. While the framework is great, creating visually appealing themes from scratch isn’t my strong suit, and finding the perfect pre-made theme can be time-consuming.

That’s when I decided to explore alternatives. After some research, I landed on TailwindCSS - and I was immediately impressed. The websites built with TailwindCSS looked stunning, so I decided to give it a try.

A different philosophy

The first thing I noticed is that TailwindCSS works differently from Bootstrap. Let me explain:

• Bootstrap is primarily a layout system. While it offers predefined components, you still need to write your own CSS to customize things like colors, typography, or specific UI elements.

• TailwindCSS, on the other hand, uses "utility-first" CSS. It provides small, reusable utility classes that let you style elements directly in your HTML.

For example, with Bootstrap, you might start with a predefined button component and then add custom styles for size, colors, or corners. With TailwindCSS, you can define everything directly in the HTML by chaining utility classes. Need rounded corners, larger text, and a custom color? You simply add the relevant classes, and you’re good to go.

The power of TailwindCSS

Because TailwindCSS relies on utility classes, your CSS output can grow quite large. To solve this, Tailwind introduced a just-in-time (JIT) compiler. This tool generates only the CSS your project actually uses, based on your code, templates, and views.

That’s where things get interesting. Unlike Bootstrap, where you simply include the full CSS file in your project, Tailwind requires a build process to compile and optimize your CSS. This makes Tailwind a popular choice for modern frameworks like Vue, React, and Next.js.

But what if you’re not using those frameworks?

TailwindCSS with Express and pure JavaScript

I still prefer to keep things simple and stick with Express. So, I dug into the possibilities of using TailwindCSS without any additional UI frameworks. To my delight, it’s not only possible but also straightforward!

There are a few articles on this topic, but none I found provided detailed steps or worked correctly on the first try. In this guide, I’ll walk you through how to set up TailwindCSS in your Node.js project using pure JavaScript and Express. No Vue, no Next.js - just simple, effective styling in your familiar setup.

Ready to modernize your styling game while keeping your workflow simple? Let’s get started!

Step 1: Setting up your project

1. Create a Node.js Project
   Start by creating a new Node.js project. Navigate to your project directory and run:

    npm init
   

   For the entry point, I typically name the file server.js.

2. Install dependencies
   Next, install the necessary packages:

   • Express - Web framework for Node.js

   • EJS - Templating engine for Express

   • TailwindCSS - CSS framework

   • @tailwindcss/postcss - TailwindCSS plugin

   • PostCSS - CSS transformation tool

   • PostCSS CLI - Command-line interface for PostCSS

   • Autoprefixer - Plugin for adding vendor prefixes to CSS

Install them with the following command:

    npm install express ejs tailwindcss @tailwindcss/postcss postcss postcss-cli autoprefixer

3. Set up the project structure
   Create the following files and directories:

   • server.js - Your main server file.

   • assets/ - Directory for static files like styles and images.

   • assets/css/ - Subdirectory for CSS input and output files.

   • views/pages/ - Directory for EJS templates.

Your project structure should now look like this:

1. Write the Express server code
   Add the basic Express configuration to server.js:

    const express = require('express');  
    const path = require('path');  
   
    const app = express();  
    const port = process.env.PORT || 3000;  
   
    // Set up EJS  
    app.set('view engine', 'ejs');  
    app.set('views', path.join(__dirname, 'views'));  
   
    // Serve static files from the 'assets' base directory
    app.use(express.static(path.join(__dirname, 'assets')));  
   
    // Define the root endpoint  
    app.get('/', (req, res) => {  
        res.render('pages/index', { title: 'TailwindCSS with Express!' });  
    });  
   
    // Start the server  
    app.listen(port, () => {  
        console.log(`Server is running at http://localhost:${port}`);  
    });
   

2. Add the initial EJS template
   Create an index.ejs file in the views/pages/ directory and add a basic HTML5 structure:

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <title>TailwindCSS with Express!</title>  
    </head>  
    <body>  
        <!-- Your content will go here -->  
    </body>  
    </html>
   

   At this stage, starting the server with node server.js will display an empty HTML page.

Step 2: Configuring TailwindCSS

Now, let’s set up and configure TailwindCSS in your project.

1. Create required files
   Add the following files to your project:

   • tailwind.config.js - TailwindCSS configuration file.

   • postcss.config.mjs - PostCSS configuration file.

   • assets/css/tailwind.css - CSS file to import TailwindCSS into your project.

2. Set up tailwind.config.js
   Add this content to the tailwind.config.js file - import Tailwindcss configuration and specify location of the files containing CSS:

    /** @type {import('tailwindcss').Config} */  
    module.exports = {  
        content: ['./views/pages/*.ejs'],  
        theme: {  
            extend: {},  
        },  
        plugins: [  
            {  
                tailwindcss: {},  
                autoprefixer: {},  
            },  
        ],  
    };
   

   Tip: The content property specifies where TailwindCSS should look for classes. Update the path to match the location of your EJS templates. Use glob patterns to include multiple directories or files if needed.

3. Set up postcss.config.mjs
   Add this content to the postcss.config.mjs file:

    export default {  
        plugins: {  
            "@tailwindcss/postcss": {},  
        },  
    };
   

   Note: Since the project isn’t configured to use ES modules by default, the file must have a .mjs extension. If you enable "type": "module" in your package.json, you can rename it to .js.

4. Set up tailwind.css
   In the assets/css/tailwind.css file, import TailwindCSS with this simple line:

    @import "tailwindcss";
   

5. Add a build script
   Configure a script in package.json to generate the CSS file:

    "scripts": {  
        "tailwind:css": "postcss assets/css/tailwind.css -o assets/css/style.css"  
    }
   

   This script compiles TailwindCSS classes used in your EJS templates into a single style.css file located in assets/css/.

6. Generate the CSS file
   Run the following command to build your CSS file:

    npm run tailwind:css
   

   This will create the style.css file in the assets/css/ directory, which contains all the necessary CSS for your project.

   By now, your project structure should resemble the following layout:

   

Step 3: Using TailwindCSS in EJS templates

To start using TailwindCSS in your EJS templates, follow these steps:

1. Include the CSS file
   Update your index.ejs file to include the compiled style.css file. Add this line to the <head> section:

    <link href="./css/style.css" rel="stylesheet">
   

   Note: You don’t need to include assets in the path because it’s already set as the base directory for static files.

2. Add TailwindCSS classes
   Let’s style a simple div using TailwindCSS classes. Add the following block to your index.ejs file:

    <div class="text-fuchsia-600 text-center py-10 text-2xl">  
        Hello, TailwindCSS!  
    </div>
   

   This will make the text fuchsia, center it, add padding to the top, and increase the font size.

3. Rebuild and restart
   To see the changes, you’ll need to:

   • Rebuild the CSS file:

       npm run tailwind:css
     

   • Restart the server:

       node server.js
     

After restarting, open the app in your browser to see the styled text.

4. Streamline the development workflow
   For a more convenient workflow, add scripts to your package.json to combine tasks. Update the scripts section with the following:

    "scripts": {  
        "start": "node server.js",  
        "tailwind:css": "postcss assets/css/tailwind.css -o assets/css/style.css",  
        "serve": "npm run tailwind:css && npm run start"  
    }
   

   Now, running npm run serve will build the CSS and start the server in one step.

Optional: Enable auto-restart with nodemon and live CSS updates

To further streamline development, you can set up two tools:

• Nodemon to automatically restart the server when changes are made.

• A PostCSS watch option to recompile CSS whenever files are updated.

Step 1: Install nodemon

Install Nodemon as a development dependency:

npm install --save-dev nodemon

Step 2: Update scripts in package.json

Add the following scripts to your package.json file:

"scripts": {  
    "start": "node server.js",  
    "tailwind:css": "postcss assets/css/tailwind.css -o assets/css/style.css",  
    "serve": "npm run tailwind:css && npm run start",  
    "tailwind:css-cont": "postcss assets/css/tailwind.css -o assets/css/style.css -w",  
    "serve-cont": "nodemon server.js"  
}

Here’s what these scripts do:

• tailwind:css-cont: Runs PostCSS in watch mode (-w), which automatically recompiles the CSS whenever files change.

• serve-cont: Uses Nodemon to restart the server automatically whenever server-side code changes.

Step 3: Run scripts in parallel

Start both scripts to enable live updates:

1. Run the CSS watch script:

    npm run tailwind:css-cont
   

2. Run the server watch script:

    npm run serve-cont
   

How it works

• Any changes to your EJS templates or other files using TailwindCSS classes will trigger the CSS file to rebuild automatically.

• Updates to the server code will restart the server without requiring manual intervention.

With this setup, your development cycle becomes much faster and more convenient. Changes to your project will be visible immediately in the browser.

Conclusion

Congratulations! You’ve successfully set up TailwindCSS in your Node.js project using Express and pure JavaScript. You can now leverage the power of TailwindCSS to style your web applications without the need for additional frameworks.

A quick recap of the required steps:

• Set up the project structure: Create the necessary directories and files for Express.js and TailwindCSS integration

• Install dependencies: Add Express.js, TailwindCSS, PostCSS, and supporting plugins to the project

• Configure TailwindCSS: Set up TailwindCSS and PostCSS configuration files

• Generate and include styles: Compile TailwindCSS into a usable stylesheet and linked it in the EJS templates

The complete source code is available in the examples directory on GitHub: https://github.com/keenthinker/blogpostscode.

Microsoft's Windows lock screen greets daily with captivating images. In this article, you will learn where to find this images and how to get them: either directly navigating to the image directory or utilizing a purpose-built Windows application.

Understanding the Windows special folders

Before we dive into how to get the images, let's understand what Windows special folders are. These are system folders with specific technical meanings, and their locations and names are fixed and predefined, meaning they cannot be changed.

One main directory for these special folders is your Windows user directory, always found under c:\users. For example, my Windows username is pavel, so my user directory is c:\users\pavel.

Within the user directory, there's another special folder called AppData. According to the Microsoft documentation

The directory that serves as a common repository for application-specific data for the current (roaming) user.

The Application Data folder itself has a subfolder called Local, which is meant for storing files needed only locally for your user profile.

The images directory is a subfolder in your User-AppData-Local-Directory.

The full path to the lock screen images directory is:

c:\users\<your-user-name>\appdata\local\packages\microsoft.windows.contentdeliverymanager_cw5n1h2txyewy\localstate\assets

The (cryptic) path and name of the directory holding the images are the same for both Windows 10 and Windows 11 -microsoft.windows.contentdeliverymanager_cw5n1h2txyewy.

My personal lock screen image directory is:

c:\users\pavel\appdata\local\packages\microsoft.windows.contentdeliverymanager_cw5n1h2txyewy\localstate\assets

Now let's locate and finally view the images.

Option 1: Navigating directly to the location

Step 1: Go to the image location

Windows has preset variables, and one is for the user's AppData\Local directory. The variable name is localappdata. You can check it in the command shell by typing echo %localappdata%. In PowerShell, you can use $env:localappdata. On my computer, the result is:

To access the lock screen images, follow these easy steps:

1. Press Win + R to open the Run dialog.

2. Enter %localappdata%\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets and hit Enter.

   

3. Voila! You've launched the File Explorer and navigated to the folder where Windows stores its lock screen images.

   

Step 2: "Decoding" the images

The images in this directory lack proper names and file extensions, but don't be discouraged. Just copy the files to another folder, add the .jpg extension to each, and marvel at your curated collection. Optionally you can rename them with a meaningful name.

Option 2: Windows Lock Screen Image Viewer Application

Introducing the Windows Lock Screen Image Viewer

I made the Windows Lock Screen Image Viewer application for personal use. Using the application, I (and also you) can quickly preview images, save them to a custom location, or open the containing folder with just a single click.

Follow these steps to elevate your exploration:

1. Download the application or the source from GitHub.

2. Install the application by following the on-screen instructions (I'm currently working on creating an installation package).

3. Launch the application, and you're instantly greeted with the current lock screen image.

Revealing the beautiful images

Navigate effortlessly through all current lock screen images using the simple interface.

Want to locate the image directory? Simply click the "Open Directory" button, and File Explorer will guide you there seamlessly.

If you want to save the image to a custom directory click the "Click to save selected image" button - it will take the default name and add a file extension, but you can always change the name of the copy.

Conclusion

Whether you choose the direct approach or the Windows Lock Screen Image Viewer, uncovering the source of Microsoft Windows lock screen images is now within your grasp. Enjoy the visual journey!

If you have any questions or feedback - don't hesitate to contact me - leave a comment and I'll be happy to answer.

I still do. Nothing quite matches the speed and simplicity of crafting a Windows app with a sleek UI using Windows Forms.

Haven't done this in a while, and I wanted to try something that required a user interface (UI). So, I downloaded Visual Studio (Community edition 2022, the latest at the time of writing this article) and clicked on "Create new project." I chose the language (C#) and platform (Windows). Suddenly, I saw two very similar options:

• Windows Forms App

• Windows Forms App (.NET Framework)

I thought, "Uh, why do I have two options?"

Then it hit me — since 2016, there have been two different versions of the .NET Platform:

1. .NET Framework - the traditional, Windows-only version known as ".NET Framework 1.x / 2.x / 3.x / 4.x."

2. .NET - the cross-platform .NET (Core) versions, like 5 / 6 / 7 / 8

The .NET Framework is the first generation of the software development platform by Microsoft that provides a comprehensive and consistent programming model for building Windows (-centric) applications, Web applications and services.

The .NET is the successor of the .NET Framework, that is cross-platform (allows development for Windows, Linux and macOS) with enhanced performance and a new and regular release cadence.

This was confirmed by the project creation configuration screen:

1. The "Windows Forms App (.NET Framework)" option includes a .NET Framework version selection

   

2. The "Windows Forms App" option includes a .NET version selection

   

A quick check of the project configuration file ( csproj) reveals distinctly different configurations as well:

1. The configuration for .NET Framework is quite long and extensive

   

2. In contrast, the configuration for .NET is very short and, as expected, specifically targets the .NET platform.

   

This difference is crucial because there are still external libraries and components exclusively available for the .NET Framework. If you create a project under the wrong configuration without checking, these libraries won't function as expected in a .NET project.

For additional information about the .NET Framework, you can explore the documentation on Microsoft Learn here (https://learn.microsoft.com/en-us/dotnet/framework/) and in this overview (https://learn.microsoft.com/en-us/dotnet/framework/get-started/overview). To download the .NET Framework, visit the official download page (https://dotnet.microsoft.com/en-us/download/dotnet-framework).

For additional information on .NET, you can find more details here (https://dotnet.microsoft.com/en-us/). To download the latest version, visit this page (https://dotnet.microsoft.com/en-us/download/dotnet).

That wraps up this article, and I hope you find this information helpful.
Whether you're using the traditional ".NET Framework" or the modern ".NET," grasping these details is crucial for crafting WinForms projects in Visual Studio. If you have more questions or thoughts, don't hesitate to reach out.

Enjoy coding in the ever-changing world of .NET development!

Nowadays, most of our tools that we use every day are online. For example I want to write every day, so accessing Hashnode or any other blogging platform should be an easy task to do - preferably one click to open and start writing, instead of:

1. open the browser
2. navigate to the page
3. login
4. start writing

James Clear explains in his book Atomic Habits that one of the ways to create and maintain good habits is to make them attractive in an environment where the habit-supporting activities or objects are easily accessible.

In my case, this means that I should find a way to open the Hashnode site quickly and easily to make writing on my blog a habit.

So how can the four-step process described above be optimized?

First refinement - use a password manager

As suggested in the article How to be a productive developer use a password manager to speed up logging into the site. But there is still room for improvement.

Second refinement - always logged in

If you are on your personal computer, then don't log out from the site you use often. Instead use the option "keep me logged in" or similar, so that whenever you visit the site you are already signed in. But here, too, there is room for improvement.

Third refinement - Progressive Web Apps

Wouldn't it be nice if it was possible to somehow make the website accessible "outside" the browser?

Progressive Web App (PWA) to the rescue!

According to this article What are Progressive Web Apps?:

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

Furthermore, Microsoft writes in Overview of Progressive Web Apps (PWAs) the following:

The qualities of a PWA combine the best of the web and compiled apps. PWAs run in browsers, like websites, but have access to app features like the ability to work offline, be installed on the operating system, support push notifications and periodic updates, access hardware features, and more.

In layman (my!) words a PWA is:

A web page that can be installed and started offline and it looks and behaves as a native application (no matter the operating system), which includes for example sending notifications, support of desktop features, access to computer devices.

What does a PWA look like?

In this image you can see the Hashnode PWA (framed with the red border) running alongside two native Windows apps - Excel and Calculator.

As you can see the look and feel is by all three the same

• own window
• icon is visible in the taskbar and in the start menu and can be pinned to the taskbar

How to install a PWA

Installation is pretty straightforward and looks almost the same in all major browsers (except Firefox, who does not support PWAs!).

I used Microsoft Edge to document how to deal with a PWA, but it looks the same in Google Chrome. For this article I have created a simple site that currently does nothing, but is available as PWA - https://hipstapas-pwa.vercel.app/.

Let's get started.

Once a site available as PWA is visited with a browser that supports PWAs, you will be notified in the address bar, that this site can be installed:

Alternatively, the installation can also be done from the Apps menu:

Once installed, you will be asked where to make the app visible:

If you click on App permissions in the system menu of the PWA, you will be taken to the page with the browser PWA permissions, from which the various permissions can be configured:

If a PWA is no longer required, uninstalling it is just as easy as installing it.. Either navigate to Installed apps configuration section in the browser and click on the X to deinstall the PWA:

Or alternatively, if the app is pinned to the start menu, simply right-click to open the context menu and select uninstall.

Conclusion

Now you know how to open your favorite online tool with one click!

Many well-known sites are available as PWA, for example:

• Notion
• Discord
• Twitter
• Google Mail
• Microsoft Office online
• GitHub
• Gumroad
• Hashnode
• Figma

Do you use PWAs and if so, which ones?

If you have any questions or feedback - don't hesitate to contact me - leave a comment and I'll be happy to answer.

Happy and productive work! 😊

We all strive to be more productive so that we have more time at the end of the day, regardless of the type of work we want to do. The saying goes:

Work smart, not hard.

I have a family and a day job and have little time for my projects. So when I sit in front of the computer, I want to be as productive as possible.

The examples in this article are for Windows and focus on software development and content creation, but the advice is general and should work for anyone who works on a computer, regardless of operating system and goals.

You could also be productive

This is how I work to be productive.

Learn and configure the (command line) options of the tools you use mostly

If you create web applications use some kind of watcher to accelerate the development loop.

Examples:

• nodemon for NodeJS
• Develop ASP.NET Core apps using a file watcher for .NET

If you are faster using a GUI you are comfortable with, use it instead of the command line tool directly. For example I do prefer to use the build-in graphical support for GIT in Code or Visual Studio instead of the command line for the basic operations (pull, push, sync, branch - which are sufficient in 95% of the time).

Use utility tools, Addons and automate as much as you can

I use the Microsoft PowerToys pack

Microsoft PowerToys is a set of utilities for power users to tune and streamline their Windows 10 experience for greater productivity.

I use a lot the following features:

1. Zones - distribute applications that you are working with in parallel (evenly) on the monitor
2. Image Resize - I do resize my images in the right size for my blog articles using the automatic resizer - one click instead of open Paint.NET, enter width and height, confirm, save.
3. Search and run - search fast for applications or content on your machine

When it comes to prototyping and automation in the programming language of my choice, I'm a huge fan of LINQPad and .NET Interactive - I can write and document my own utilities without creating a project. I can create prototypes, experiment and automate tasks in seconds.

If a tool you use supports some kind of extensions and there is an extension for a task you do often, then it's most of the time a good idea to install and use this Addon (e.g. VSCode).

Autostart

Configure autostart for tools you use often (password manager, screenshot taker and so on). Once Windows is up and running you are just a click away from the start or execution of a task.

Login everywhere

On your personal computer login on every site you use/visit often and/or use a password manager. It will save you so much time typing (and confirming in case of MFA). I'm logged in on the most sites I use daily, like GitHub, Mail, Twitter, Hashnode, Figma and so on.

If such sites are available as PWA, install them and use them as if they are native applications. I'm writing currently a follow up article on this topic.

Please note - if you share a computer with someone and you don't want that everybody has access to your sites where you are already loggedin, you can use either different profiles or don't stay loggedin the whole time, but use a password manager.

Use a password manager

Use a password manager (offline/online) to automate or accelerate login in. The more security comes as a free bonus. 😀

Shortcuts

In general, learn a few useful and important keyboard shortcuts for you (operating system, IDEs, specific tools and so on). Use drag and drop with the mouse if it is faster and convenient for you.

There are a few Windows key combinations that I personally find very useful in order to move, resize and stick a window to the screen, run pinned applications an so on. This allows you for example to put two applications next to each other, that are evenly distributed on the monitor:

• Win+⬅ resize to take the left half of the monitor
• Win+➡resize to take the right half of the monitor
• Win+⬆ maximize window
• Win+⬇resize to last used width and height
• Win+E open new instance of Windows Explorer
• Win+R run a command
• Win+Shift+S take a screenshot
• Win+1..0 start the application pinned to the taskbar on position 1 to 10 (position 1 is the the one immediately after the start menu)

Conclusion and inspiration for this article

I hope this article motivates you and helps you be more productive so that you can have more time or complete the projects you dream of even faster.

What tools do you use or what do you do to be productive? Share the tools or your habits in the comments to inspire and help others.

If you have any questions in general - don’t hesitate to reach out - leave a comment and I'll answer resp. help gladly.

This article was inspired by the wonderful video of Scott Hanselman (@shanselman on Twitter) Overwhelmed with Programming? Here's small things to help - Computer Stuff They Didn't Teach You #14.

The title of the book is

Video recording and streaming with 0 investments

You can get already the book for free on Gumroad!

Allow me to explain. 😊

Why am I writing an eBook?

I do like to try new things out and then I share my experience because sharing is caring, right? 😊

Also I recently read a very nice article about the Feynman learning technique.

The Feynman Technique is a four-step process for understanding any topic. This technique rejects automated recall in favor of true comprehension gained through selection, research, writing, explaining, and refining.

It's an iterative process consisting of the following steps:

1. Choose a concept to learn. Select a topic you’re interested in learning about and write it at the top of a blank page in a notebook.
2. Teach it to yourself or someone else. Write everything you know about a topic out as if you were explaining it to yourself. Alternately, actually teach it to someone else.
3. Return to the source material if you get stuck. Go back to whatever you’re learning from – a book, lecture notes, podcast – and fill the gaps in your knowledge.
4. Simplify your explanations and create analogies. Streamline your notes and explanation, further clarifying the topic until it seems obvious. Additionally, think of analogies that feel intuitive.

The point is, that through sharing we expand our knowlege regarding the newly learned stuff and understand it better and better so we can also apply it better.

What will I write about

The last few months I did explore three topics:

• recording my computer desktop in order to create video tutorials
• recording myself with the camera while presenting the video tutorials
• live streaming

I wrote about this topics in a series of articles on my personal blog. Now I want to bundle everything and create a nice looking guide in the form of an ebook - for you and also for my personal use.

The real reason I'm writing an eBook

There are also a few other reasons, why I want to create an eBook. I want to learn:

• how to create an eBook
• about typography and styling
• about the different publishing formats
• about publishing platforms and publishing software
• the costs of creating an eBook

I want to write a technical book and just focus on the content and not learn the publishing process as I write. I am now taking the opportunity to acquire the knowledge so that I can only concentrate on writing later.

Follow me on my learning journey

You are more than welcome to follow me on my journey if you also want to learn about the process of writing and creating an eBook.

Let's connect on

• Twitter
• IndieHackers
• Hashnode

I recently started learning about making videos and streaming. I documented my insights in the article series Video recording and streaming with 0 investments.

I find it nice, when in personal videos the speaker is looking straight into the camera – it shows respect and honesty. You see this all the times in formal speeches. As a non-native English speaker, I do prepare my texts upfront, I rehearse them before recording. Still, some texts are long or the time is not always sufficient and it takes a lot of practice to speak freely and yet correctly in front of the camera.

One possibility is to have your speech in front of you on paper and look at it from time to time, but this is not always convenient. Say hello to the Teleprompter (also known as Autocue).

What is a Teleprompter

The teleprompter was invented in the 50’s for the movie industry and for political speeches. It is a surface, that displays your text so you can read it. It is often combined with a camera behind a (semitransparent) surface, so that at the same time you are reading you also look straight in the camera. The audience perceives this as if the speaker is looking directly into the camera.

Source: Wikipedia, https://en.wikipedia.org/wiki/Teleprompter#/media/File:Teleprompter_schematic.svg

In modern times, where people are recording videos with their mobile phones, there are smaller and cheaper variants – you put your tablet or phone as the source of the text and another phone or camera to record. Just search for “teleprompter” on Amazon. There are also teleprompter apps for mobile phones and or tablets (again, search in the app stores of google and apple for “teleprompter”).

The problem with this solution: if you have only one mobile phone and you shoot your videos with it, then it is not possible to read and shoot at the same time. There are apps that can do this, but they usually are not free and I am not ready yet to spend money for such apps.

Why I created a simple teleprompter web page

As a developer, I often check how far I can go and what I can achieve and create by myself. Sometimes it works and I end up with a nice solution that helps me a lot and sometimes it doesn’t work, but at the end I always learn something new. I asked myself:

How can I read my text and at the same time look (almost) in the camera of my mobile phone for my recording with the hardware that I own?

I do own a small tripod, so I thought it could work, if I put the camera in front of the monitor and read the text from a small window in the monitor.

I needed a teleprompter app for my desktop PC. As already mentioned, there are a few to find – and again all cost money and I am still not ready to spend money yet for such apps. I decided to create a very simple teleprompter application on my own.

The iterative approach of creating a simple prompter application

I started by answering all the “what” questions to document the requirements 😀.

What does a teleprompter do?

• it shows text
• it scrolls the text at a given speed

Everything else is just more comfort.

What technology should I use to create it?

Since the video recording and streaming software is availabel for all major platforms, it should run on Windows, Linux and Apple, so a web page running locally should be a good fit. Scrolling and some styling should be easy to do with HTML, CSS and a little bit of JavaScript.

I am aware of the scrollTop property of an HTML element:

The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.

Sounds good and exactly what I want to do ... just slowly.

Ah, I also know, that jQuery offers an animate functionality (yes, jQuery is still alive) – maybe it could be used for smoth scrolling?

Perform a custom animation of a set of CSS properties.

Let’s start with all this knowledge and see the result.

Show me the code

On the way.

Create an empty html page (no content, just the structure)

Let's create the placeholder page, shall we? This should be an easy task to do in VSCode and Emmet.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pseudo Teleprompter</title>

        <style>
        </style>

        <script>
        </script>
    </head>
    <body>
    </body>
</html>

Now add the jQuery library and some example text

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pseudo Teleprompter</title>

        <style>
        </style>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
        <script>
            $(document).ready(() => {
            });            
        </script>
    </head>
    <body>
        <p>
            When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.
        </p>
        <p>
            If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element. These animations will not begin until the first one completes. When .stop() is called, the next animation in the queue begins immediately. If the clearQueue parameter is provided with a value of true, then the rest of the animations in the queue are removed and never run.
        </p>
        <p>
            If the jumpToEnd argument is provided with a value of true, the current animation stops, but the element is immediately given its target values for each CSS property. In our above .slideUp() example, the element would be immediately hidden. The callback function is then immediately called, if provided.
        </p>
        ... omitted for the sake of brevity
    </body>
</html>

The fun part – how to make the text scroll

It is actually quite easy to do this using jQuery animate in combination with scrollTop.

Let's see exactly how.

Animate

The animate function, accepts four parameters, but our case needs only the first three of them:

• properties (required)

  An object of CSS properties and values that the animation will move toward. In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated.

• duration (optional)

  A string or number determining how long the animation will run.

• easing (optional)

  A string indicating which easing function to use for the transition.

Let's keep everything simple and just scroll the complete page. This means the selector will be html, body.

$('html, body').animate(...);

The animated property will be scrollTop.

$('html, body').animate({ scrollTop: ... }, ..., ...);

The end value for the scrolling will be the end of the page. But how do we get the end of the page or some custom value?

jQuery offers the offset css helper method:

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

Let's put an HTML element at the end of the page with id='endoftext' and use it to fetch the max scroll value:

$('endoftext').offset().top

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pseudo Teleprompter</title>

        <style>
        </style>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
        <script>
            $(document).ready(() => {
            });            
        </script>
    </head>
    <body>
        <div>
            <p>
                When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.
            </p>
            <p>
                If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element. These animations will not begin until the first one completes. When .stop() is called, the next animation in the queue begins immediately. If the clearQueue parameter is provided with a value of true, then the rest of the animations in the queue are removed and never run.
            </p>
            <p>
                If the jumpToEnd argument is provided with a value of true, the current animation stops, but the element is immediately given its target values for each CSS property. In our above .slideUp() example, the element would be immediately hidden. The callback function is then immediately called, if provided.
            </p>
            ... omitted for the sake of brevity
        </div>
        <span id='endoftext'></span>
    </body>
</html>

Now let's use this in the animate function.

$('html, body').animate({
                scrollTop: $('#endoftext').offset().top
            }, ..., ...);

Let's configure the scrolling speed. For this we will set the duration. The value is in milliseconds, so 1000 means 1 second! The documentation states:

A string or number determining how long the animation will run.

Attention: the duration (and thus the scrolling) speed depends on the PC performance – the faster you PC is, the more milliseconds you need to add in order to make the text to scroll slower!

The value on my current PC for smooth scrolling speed is around 55000.

Last but not least the important easing option:

A string indicating which easing function to use for the transition.

What is an easing function? The jQuery UI documentation explains it like this:

Easing functions specify the speed at which an animation progresses at different points within the animation.

In other words: the animation movement will be different for the different easing functions. Since we want a straight smooth animation, we need to use the linear function - constant change over time.

$('html, body').animate({
                scrollTop: $('#endoftext').offset().top
            }, 55000, 'linear');

The code so far:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Teleprompter</title>
    <style>
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <script>
        $(document).ready(() => {
            $('html, body').animate({
                scrollTop: $('#endoftext').offset().top
            }, 55000, 'linear', () => {});
        });
    </script>
</head>
<body>
    <div>
        <p>
            When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.
        </p>
        <p>
            If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element. These animations will not begin until the first one completes. When .stop() is called, the next animation in the queue begins immediately. If the clearQueue parameter is provided with a value of true, then the rest of the animations in the queue are removed and never run.
        </p>
        <p>
            If the jumpToEnd argument is provided with a value of true, the current animation stops, but the element is immediately given its target values for each CSS property. In our above .slideUp() example, the element would be immediately hidden. The callback function is then immediately called, if provided.
        </p>
        ...
    </div>
    <span id='endoftext'></span>
</body>
</html>

It looks like this:

You could view the first version online on my GitHub Pages (make the browser window smaller if the complete text is already visible on your monitor and the text does not scroll - it scrolls, it just needs a scrollbar).

Help - I want to stop the scrolling (animation)

This looks good, right? But did you noticed, that if the text is long (or the window narrow) the scrolling keeps going and going until the end of the page and it's not possible to do anything and in order to start again or test something you need to wait for the animation to reach the end?

Let's change this using the counterpart of animate which is stop:

Stop the currently-running animation on the matched elements.

Applied to the current animation selector means:

$('html, body').stop();

Now only one thing is missing - in order to call this action we will need a clickable UI element. Let's use styling to create always visible, on top of the page controls.

Styling

The main task is done - text is scrolling, but additionaly to the missing button, the page could look a little bit better. I wear glasses and I found out, that while recording the white page of the prompter is visible on my glasses - doesn't look so good. And also the text size could be better.

Let's start with adding a very simple styling - make the background dark and the text gray and larger:

   <style>
        body {
            background-color: black;
            color: lightgray;
            font-size: xx-large;
            text-align: center;
        }
    </style>

The result:

You could view the second version here.

Now that the text is looking good let's add the stop button and actually also a start button so that the cycle is complete. This is done in 3 steps:

1. Add the html element that will be made clickable using the jQuery click handler and styled with the custom CSS class buttonStop

   <div><span id="buttonStart" class="buttonStart">Start</span></div>
   <div><span id="buttonStop" class="buttonStop">Stop</span></div>
   

2. Bind the click event in order to trigger to stop function once the page (DOM) is loaded using the jQuery ready handler

   $(document).ready(() => {
    $('#buttonStart').click(() => {
        $('html, body').animate({
            scrollTop: $('#endoftext').offset().top
        }, 55000, 'linear');
    });
    $('#buttonStop').click(() => {
        $('html, body').stop();
    });
   });
   

3. Style the html element to be always visible on a fixed position using the CSS properties

   • position - sets how an element is positioned in a document; fixed means The element is removed from the normal document flow, and no space is created for the element in the page layout
   • top - specify the vertical position of a positioned element

   • left - specify the horizontal position of a positioned element

     <style>
     .buttonStart {
        position: fixed;
        float: left;
        top: 92%;
        left: 82%;
        background-color: lightgray;
        color: red;
        cursor: pointer;
     }
     
     .buttonStop {
        position: fixed;
        float: left;
        top: 92%;
        left: 92%;
        background-color: lightgray;
        color: red;
        cursor: pointer;
     }
     </style>
     

     The result looks like this:

You could view the third version here.

Final touch of comfort (for me personally)

I also wanted to add something to enhance the comfort (from my perspective), something like the triangle markers in the middle of a real teleprompter screen. I decided to keep this simple and just to add a fixed horizontal line as a marker.

The html code is straightforward: <p><hr class='ruler'/></p>.

The styling looks like this:

.ruler {
    position: fixed;
    border-color: red;
    top: 5%;
    left: 1%;
    width: 100%;
}

And the final version looks like this:

You could view the final version here.

Conclusion

And that was it. I hope you enjoyed reading this article as much as I enjoyed creating it. I already used the prompter while recording videos.

You can find the complete source code in my GitHub article repository.

If you try the prompter on your computer, don’t forget to play a bit with the milliseconds to achieve the speed you want to see.

What can be improved?

• add some more visuals / controls (size, speed, reset, and so on)
• style the existing controls
• maybe there is a way to change the color of the already presented text from the text to come, like a caraoke prompt? 😊

Introduction

This is part 4 of the series Video recording and streaming with 0 investments.

This article will walk you through some of the OBS features that will make your videos and streams look professional.

All articles and videos from the series can be found here:

• Introduction.
• Part 1 discusses desktop recording.
• Part 2 discusses how to show yourself with the camera.
• Part 3 discusses streaming.
• Part 4 is all about some nice features of OBS - scenes, transitions, static images, and so on. This article.

Let’s start.

Recap OBS basics and prerequisites

A very short recap of the OBS basics

OBS stands for Open Broadcaster Software – a free and open source software for live streaming and screen recording available for Windows, Linux and macOS. It can be downloaded from here: https://obsproject.com/.

In order to record something, you need to configure the output and the video settings first. The layout consists of different panels like:

• Captured content
• Capture sources
• Control panel
• Audio
• and so on

In the previous articles the Scenes and Scene Transitions panels were not discussed - they will be discussed here.

You can find more details about

• the OBS basics in Part 1 – desktop recording
• the camera usage in Part 2 – show yourself with the camera

Prerequisites

Since this article shows how to use some functions and apply some effects in OBS, there are no prerequisites necessary – just OBS. 😀

Capture Sources

A capture source is, in my opinion, the most important component in OBS – it lets you capture something, that is recorded or streamed – without this source, there is nothing to show or play.

Capture sources are stacked and the one on the top is completely visible and covers all other below. Reordering the sources changes the “captured content”.

Once added, all capture sources can be resized with the mouse. Normally both width and height are scaled together. If you want to resize only the width or the height of a source, press and hold the ALT key and resize the desired side with the mouse.

So far 5 different capture sources have been shown and used in this series:

• Display Capture – the complete desktop
• Window Capture – a selected application window
• Video Capture Device – camera (video input)
• Audio Input Capture – microphone (audio input)
• Media Source – local video or audio file or remote stream

There are a lot more capture sources in OBS:

The following sources are presented in this article:

• Color Source – rectangle area filled with a color
• Image – a static image
• Image Slide Show – a slide show (often known as “carousel”)
• Media Source – video or audio as input
• Text (GDI+) – a static text

Almost any effect can be achieved with a combination of these five sources (and the previous ones). Let’s take a closer look at them.

Color Source

The color source is a rectangular area with a configurable background color.

It can be used as a background or to fill a gap or to cover other sources or as a panel (for example in combination with a Text source).

Image

The image source displays an image, that can be selected from the local drives. It can be used exactly as the color source - background or cover other sources and so on.

Add an image source:

Select an image to display:

Confirm the changes and ...:

Use the image source:

Image Slide Show

This source shows and rotates a list of images. Images can be added either one by one or there is also the option to add a complete directory. Once images are added, this source component shows them in the specified order one after another.

The configuration allows you to set the transition type and time.

Media Source

This source can play video and audio files. It can also render streamed data. This option was used to connect the mobile phone as a webcam.

How to enable and use both options?

Play from local file

This is the default configuration. When adding a new media source, the option Local File is already checked. Just select a video or an audio file, add the source and it will be played.

Play from stream

Check the Local File option off to configure a stream. Enter the address of the stream in the Input field:

A usage with stream can be seen in Part 2.

Text (GDI+)

Last but not least, some static texts are always required. Enter the desired text in the Text field:

This source has a lot of useful options, like:

• changing the font type
• reading the input from a file
• defining background and foreground colors that support transparency and gradient
• alignment

Combinations

Now that you know a few options, you can use them in combination to create extensive setups using different capture sources at once. The next image shows the use of 5 sources – text, video, media, color, image:

Filters and effects on sources

OBS doesn't stop at combining different sources. It also offers filters for some sources. These can be used to create really professional looking effects. A particularly useful filter is the “Chroma Key”, when it is applied to a video capture source. It filters a selected color from the captured area, so that all spots that are with the selected color can be made transparent.

Filters are applied as follows:

1.select the capture source and press the Filters button above the panel

2.Open the Effect Filters menu and select the Chroma Key entry

3.If you have a green screen (https://en.wikipedia.org/wiki/Chroma_key) leave the defaults or choose a different color. I happen to own a green blanket that can be used as a green screen

4.The blanket is now transparent.

Another very useful filter is the Image Mask/Blend. It can be used to give a source a specific shape. An example would be to make the video round instead of rectangular.

For this effect you will need to have the mask image. In this case it is a simple image with black background and white circle in the middle:

In OBS choose the video source and press Filters. Add Image Mask/Blend from the Effect Filters panel and select the mask image:

Now the video capture is in a circle and no longer in a rectangle.

One last filter that might be useful is the Apply LUT effect. LUT is an abbreviation for Lookup Table*. LUTs are used to filter a range of specific colors in an image.

If you want to make your recording black and white, OBS comes with predefined LUTs found in the OBS installation directory.

1. Select the video source and press the Filters button above
2. Add Apply LUT from the Effect Filters panel
3. Press the Browse button after the Path input
4. select the black_and_white.png image and press Open

The video is now black and white.

The effects can also be combined and the order is also important.

Scenes

Scene in OBS is a named collection of capture sources. OBS allows you to have multiple scenes. There is always one active scene – this means, that this and only this scene is visible to the viewers.

You can create more than two scenes in the Scenes panel. Selecting a scene in the Scenes panel, makes it immediately visible to the viewers.

Here are two different scenes 1 and 2:

Studio mode

Here is where the special layout Studio Mode comes into play. Additionally, to the live-view, it enables a preview panel, in which scenes can be edited and changed, without the viewers seeing these changes.

The additional preview panel is always on the left side, and the live-view panel is always on the right side.

Scenes can be swapped using the Transition button in the middle between the two panels.

In studio mode, the currently selected scene in the Scenes panel is in preview and in case of a transition it will be swapped with the current live-scene.

There are a few different transition type effects. All of them can be selected and configured from the Scene Transitions panel.

Conclusion

That was the fourth and the last part from the series Video recording and streaming with 0 investments.

In this article, you learned how to take full advantage of OBS. Detailed information about OBS can be found in the project’s wiki: https://obsproject.com/wiki/

If at any point you get stuck and need help or you have any questions in general or you have a suggestion for an article on a specific topic - don’t hesitate to reach out - leave a comment and I'll help gladly.

In this series you saw and learned what OBS is, how to record and stream your desktop and show yourself with the camera on YouTube, Twitch and Discord. All of this for free and possible with 0 investments!

I hope you liked the series.

I had a lot of fun writing the articles and recording the videos and learned a lot in the process.

Have fun recording and streaming with OBS. 😊

Enjoy reading.

The journey of my first SaaS

It all started in 2016 - I was impressed by a wonderful idea. I sat down, did a little research, found the right technology for my needs, created a POC, and bought a domain name. Searched for competitors and found only similiar products, but my product was unique and I was convinced of the idea.

It worked and I was so happy. I had plans. I have to manage to solve some technical tasks, but still - the main concept worked.

I told a friend about the idea and in the discussion he suggested a solution to my technical problem and it worked (again).

I jumped for joy. I was sure I had to start a company and asked my friend if he would like to become a co-founder. He gladly accepted the offer. We started a company in mid-2016 - self funded - start capital €1337. We dreamed that our side-project will be profitable one day.

So far it sounds like a movie and the truth is it was like in a movie. But then of course the reality hit us.

My friend was working for a big company, important position on a big project and when I wanted to advertise the product and our fresh startup he said, I better not do it because he might get into trouble.

And I did not - we said - it will grow over time. Well, but to grow at all you need at least to tell the world, that you have a product - if you don't do this - your product is like a buried grain of sand in the desert.

I was blinded by my dreams to not see this and I kept working and improving the product. Initially there was only the free version and no API. I added an API, plans and stripe payments, polished the product, wrote documentation and examples. Still - no one ever found and used the product. Nevermind I thought - I used it.

Don't get me wrong - I'm not blaming my friend that we didn't succeed. There is always a solution and I think we could have found a suitable one if we had a little more experience and talked about it more. We both were "learning by doing" entrepreneurs. A side project, part-time and a family, is a challenge (at least for me).

We applied to Microsoft Bizspark and were accepted. Got credits for Azure, which was awesome, because the monthly credits just covered our monthly hosting expenses.

Our initial self-funding was melting like an ice cream in the open on a hot day - company bank account and domains were already burning a lot of money. At the end of the year we need to make tax return - to save money for a tax consultant, we bought software and I sweated many nights to fill out and file the tax return.

At some point (I think one and a half years later) we went out of money, so we took loans from ourselves and the wheel was spinning again.

Still no advertisement because of the big company, still no customers, still a lot of expenses. It's not that we didn't tried. A list of the different channels for announcements and contacts:

• initially Twitter and Facebook, but at some point removed Facebook. I posted regularly announcements on Twitter. At the time we never invested in making our audience at least on twitter bigger.
• We applied a couple of times to some TechCrunch events/competitions. Created/added a profile in CrunchBase.
• We indicated in BizSpark that we are open for investors/cooperation.
• Applied once to a national innovation competition organized by a large bank (the SaaS product was about secure end to end message exchange).
• Added the company to a national (almost local) Startup register page and described the product (the register is created by the local stock exchange company).
• I never wrote any cold emails or made any cold phone calls, altough there were B2B and B2C use cases.

In 2019 after 3 years, BizSpark had come to an end for us and I entered my credit card in Azure in order to pay the bills. I reduced some resources and managed to cut the monthly expenses into half, but still I was giving away €80 per month for a SaaS that I used only once in a while.

I was not giving hope and was searching for ways to find customers without shouting so loud. It didn't worked at all.

I read recently about someone spending more money on his product, than the product brings and the essence of the story was to let go if it's not profitable and not working for any reasons.

So I finally gave up and I will pursue my dream of becoming an entrepreneur in a different way.

Five years later (and a few thousand €) I stopped the Azure services and deleted them! I was sad to give up on "my first baby", but on the other side releaved.

The end

I am happy, that I tried what I thought at the time was correct and learned so much on the way. I will not do it again - I will do it differently without a company, without loosing time and money and being more open and loud about my product.

What I learned so far from all this

I guess I can confirm a lot from what I read and see about product delevepment, money, building in public and working with other people:

• the product should be profitable from the beginning - it does not need to be millions from day one, but €1 is already an indicator that there is interest. Maybe the €1 is a littble bit exaggerated, audience and subscribers are a sufficient indicator too and can be used to measure whether there is interest in the beginning, which is a potential gain later. So yeah, you don't have to make a dollar from day one, but at least you have to have users.
• audience is very important - it will boost your visibility, so be open and talk about your product whatever it is; build an audience on at least one channel; write and talk; give discounts; create a landing page and start collecting emails
• ask for reviews, create and share products metrics with the world
• you don't need a company to start and try something out or to validate an idea - at the end of the day, the overhead of managing a company is overwhelming compared to the benefits if there is no profit. You can accept money for a product also as a private person; on the other hand back then one reason to start a company (GmbH in Germany or Ltd. in UK or Inc. in USA) was regarding the personal security - not to be personally liable. If you start a company as a side-project talk openly about it but make sure, that your contract as employee is allowing you to have and work additionaly on your own company
• it is invaluable to have a partner and discuss with someone ideas and exchange thoughts, but choose careful and be honest to each other

I am still convinced of my idea and maybe I will try to build it with new technologies for fewer money. I'm planing to reuse the old code, change it to a newer tech-stack (so it costs less per month - my goal is €0 if no one is using it) and try again.

This time I will be building in public.

Let's see how my next try goes.

Post on IndieHackers

The original post on IndieHackers can be found here: https://www.indiehackers.com/post/i-finally-gave-up-my-failed-saas-49cf75c6b5

I appreciate all the people on IH who have given me positive feedback and asked good and open questions.

There is often the need to create programs for Windows that should be started only once.

Following the DRY principle repetitive code should be extracted (for example in a static helper class).

After that, all that is left to do, is wrap the core application logic in this code.

Please note, that this article does not implement and discuss the Singleton Pattern. If you are looking for implementation of the singleton pattern in C# look at Jon Skeet's excellent article.

Implementation

Mutex - a system-wide unique name

The helper utility in this article is implemented as a static class with one static method.

The class uses a named Mutex to flag system-wide, that the application is already running.

Mutex is an abbreviation of [mutual exclusion](https://en.wikipedia.org/wiki/Mutual_exclusion) - term used usually in a context of threading, where using mutexes is an option to prevent race conditions, when multiple threads need to access the same data.

This pattern works as expected, only if the name of the mutex object is unique - no other mutex on the system, on which the application should run, has the same name.

Example of a unique mutex name is:

_ApplicationName_GUID_

If the application name is ServicesControllerUtility and a GUID is created with Guid.NewGuid().ToString().ToUpper(), then a unique mutex name would look like this:

_ServiceControllerUtility_192A9AC4-1317-4340-816E-80A497EC1A83_

A detailed example how to create and use a named mutex can be found in the documentation article about Mutex Constructor.

The second parameter of the Mutex constructor - isFirstInstance - is the important one - if it is true, then the mutex does not yet exist and this means, that the unique code is not yet called.

mutex = new Mutex(true, uniqueApplicationDescription, out isFirstInstance);

Using Anonymous delegates to make the helper flexible

Because every application code is different, the helper class should be able to execute dynamic code. This is possible in C# using Action Delegates and Lambda expressions.

Examples of Action delegates and lambda expressions:

void Main()
{
    Action<int> print = i => Console.WriteLine(i);

    execute (() => Console.WriteLine("Hello, world!"));
    execute (() => print(2 + 2));
}

private void execute(Action action)
{
    action();
}

In this case the parameter onceInstanceAction of the Start method is of type Action, and it should be used to call the code, that starts the application.

public static void Start(string uniqueApplicationDescription, string applicationTitle, Action oneInstanceAction, Action instanceNotUniqueAction = null)...

Using the helper class

The helper class creates the mutex and runs the given code once, on the first application start. The default behaviour, if the application is started again, is to show a message box to inform the user.

SingleInstance.Start("uniqueMutexName", "Application title", () =>
{
    Application.EnableVisualStyles();
    Application.SetCompatibleTextRenderingDefault(false);
    Application.Run(new ApplicationForm());
});

Sometimes this is not sufficient - for example every attempt after the first one, should be logged. For that case the class accepts a second anonymous delegate, that overrides the default behaviour if the first action is already executed:

Action customAlreadyStartedBehaviourAction = () =>
{
    Logger.WriteInformation(string.Format("{0} - Application is already running.", DateTime.Now.ToShortTimeString()));
};

SingleInstance.Start("uniqueMutexName", "Application title", () =>
{
    Application.EnableVisualStyles();
    Application.SetCompatibleTextRenderingDefault(false);
    Application.Run(new ApplicationForm());
}, customAlreadyStartedBehaviourAction);

The complete helper class can be downloaded from this gist: SingleInstance.cs.

Comments and feedback are always appreciated.

Introduction

This is part 3 of the series Video recording and streaming with 0 investments.

In this article you will see how to use OBS for streaming in order to not only show yourself (this is possible also without OBS), but also to share your screen or a specific window while streaming. You’ll learn how to stream on YouTube, Twitch and Discord.

Streaming is a huge and complex topic and that is why this article covers only some basics and 3 well-known platforms from many.

All articles and videos from the series can be found here:

• Introduction.
• Part 1 discusses desktop recording.
• Part 2 discusses how to show yourself with the camera.
• Part 3 discusses streaming. This article.
• Part 4 will be about some nice features of OBS - scenes, transitions, static images, and so on.

Let’s start.

Recap OBS basics and mobile phone as webcam

A very short recap of the OBS basics

OBS stands for Open Broadcaster Software – a free and open source software for live streaming and screen recording available for Windows, Linux and macOS. It can be downloaded from here: https://obsproject.com/.

In order to record something, you need to configure the output and the video settings first. The layout consists of different panels like:

• Captured content
• Capture sources
• Control panel
• Audio
• and so on

You can ignore for now the Scenes and Scene Transitions panels. For this article only the Capture sources and the Control panel panels are relevant. You can find more details about the OBS basics in Part 1 – desktop recording

A very short recap of how to add a camera

If you have a webcam (build-in or external connected via USB) or a digital camera connected to your computer with an adaptor, just add Video Capture Device capture source in order to use the camera output.

In order to use the camera output from your android mobile phone you need to connect the device with your computer. This can be done using an android app like IP Webcam or similar. In OBS add a capture source of type Media source, deactivate the option Local File and enter IP address and port number shown in the IP WebCam app followed by videofeed.

Example: https://192.168.0.100:8080/videofeed

You can find more details about the camera usage in Part 2 – show yourself with the camera

Prerequisites for this part

In order to stream with or without OBS you need to have

• a camera (build-in, webcam, digital camera) or an android mobile phone as an alternative (this will work only with OBS, see Part 2 – show yourself with the camera)
• Internet access
• you need to register for each platform you want to use – all three platforms shown here are free!

What is Streaming

Streaming is an event in which you broadcast your sending live to the audience. Unlike a recording you can’t edit it – it’s in real time. It is an interesting and valuable opportunity for discussing your broadcast with the people, that are currently watching.

The most of the streaming platforms offer recording the live stream, so that it can be released later as a video. OBS also allows you to record the streaming session for later use. An example would be to premiere live a conference and then offer later the recording.

There are a lot of different streaming platforms, but all of them offer more or less three different streaming options:

1. Streaming directly from the browser using the connected webcam.
2. Streaming using special software (sometimes with hardware support) like OBS
3. Streaming directly from a mobile device

Each of this option has its advantages and limitations, which I will briefly summarize.

This article will cover only options 1 and 2 (without hardware support). After this article you will be able to explore option 3 on your own – modern mobile phones have both build-in camera and a microphone and it is very easy to stream from the phone.

Note: When start streaming with OBS, if you see an error message like this don’t panic – this means, that the video driver is too old (not updated) or not supported by OBS. Fortunately OBS supports also software encoding, which can be set and then streaming will work just fine.

YouTube

I am sure there is no need to introduce YouTube – https://youtube.com – Google’s video and streaming platform.

In order to start streaming with YouTube

1. Login to your account
2. Select the Create menu
3. Choose Go Live

Note: If this is your first time streaming in YT, you need to wait one-time for 24 hours: “Enabling your first live stream may take up to 24 hours. Once enabled, you can live stream instantly.” Source: https://support.google.com/youtube/answer/2474026?hl=en

You see three options on the left:

• Stream
• Webcam
• Manage

Webcam

The easiest way to stream in YouTube is the Webcam option - when selected it connects to the available camera and the streaming can be started immediately.

The most important option is the second one, right after the streaming name – for which audience and how should be the stream available:

• Public - anyone can search for and view
• Unlisted - anyone with the link can view
• Private - only you can view

Then go to next, preview the settings and if you are happy with them, press Go Live.

🎉Congratulations - you are live now:

The link for the stream, if not copied before starting it, can be found in the Share Livestream window:

For the audience it looks like this:

And that was it. To end the stream, press END STREAM.

There are a few interesting options worth mentioning:

• scheduling live streams: plan the live stream start and inform your audience before the start
• enable or disable the chat with the audience

All webcam live streams in YT are automatically recorded. After the end of the stream, they can be found in YouTube Studio in the Content section:

Stream

Have you noticed, that when using the Webcam option for streaming, it was not possible to share the screen and or a specific window?

This is only possible with the help of streaming software. In this case we will use OBS in order to create a professional looking live stream for the audience.

This works in two steps:

1. YouTube offers a stream key that is used to uniquely identify each user connecting to the YouTube servers from outside in order to stream
2. The stream key is configured in the software that supports streaming so that the captured content can be transferred to the streaming platform servers

Step 1. Select Streaming from the left in YouTube. In the upper left corner of the window YouTube is telling you to connect your streaming software in order to go live. Below is the streaming key.

!!! NOTE: NEVER SHARE YOUR STREAMING KEY TO ANYONE !!!

Copy your streaming key to the clipboard and open OBS Studio.

Step 2. In OBS Studio open the settings and go to the Streaming section. Choose YouTube – RTMP from the Service list, paste your stream key and apply and save the settings.

Add your desired video and capture source and then in the Controls panel press the Start streaming button:

And you are live again on YouTube. The streaming link can be found again in the Share window:

This is again how it looks for the audience:

Now you have the full controls over what is shown in the live stream and which capture sources are used. This makes possible to stream using your mobile device as a webcam (shown in Part 2 Video recording and streaming with 0 investments - show yourself with the camera)!

Important

This stream is recorded by YouTube, but it will be saved automatically in YouTube Studio only if after End Stream the summary / editing window is not dismissed!

Another option is to stream and record at the same time in OBS and upload the recording later in YouTube.

Twitch

Twitch or Twitch.tv is, newer than YouTube, but similar, video streaming platform. It has a lot of menus and when you first see it, it looks complicated, but over time you get used to it and it gets easier.

It does not offer only Webcam streaming – software or hardware is always needed. This means in order to start streaming with OBS, the streaming key is needed.

Go to the twitch site (register) and login. On the right is the personal menu – select the Creator dashboard from it:

Navigate to Settings – Channel and copy the Primary stream key:

Switch to OBS, open the settings, select the Stream configuration section and set Twitch as a Service. Either configure the copied stream key or connect your account. I am using the stream key:

Configure the desired capture sources and start the streaming in OBS by pressing the Start Streaming button in the Control panel.

Switch back to Twitch and navigate to the Stream Manager section in your dashboard – you are online on Twitch:

In Twitch your stream is always available over your channel and has always the same url: https://www.twitch.tv/[username].

Mine is: https://www.twitch.tv/keenthinker.

This is how it looks for the viewers:

Similar to YouTube, there are also here a lot of options to explore under Settings – Channel. Twitch can also store the live streams automatically, but in contrast to YouTube, only for 14 days and this option should be activated in the settings Creator Dashboard -> Settings -> Channel -> Store past broadcast:

If you want your recording after the 14 days, record it (while streamed) using OBS and uploaded it later to Twitch or any other platform!

Discord

Discord - https://discord.com/ - is a digital platform for communities. Users can communicate with each other using video, audio, and text. What is really interesting about Discord is the fact that everything can be done in the browser - including sharing your screen - all without an account.

Instead of channels like in YouTube and Twitch, the concept of Discord is to create a server and have multiple channels, private chats, video and audio calls (which can be streamed) from the server.

Note: Due to the nature of Discord, viewers can also be participants and not only chat but also show themselves with their camera. This behavior can be changed in the settings.

Let’s see how this works.

Navigate to the Discord homepage

• press the Open Discord in your browser button
• enter a name
• accept the Terms of Service and the Privacy Policy

and finally submit with the arrow button:

Almost there - to go further you need to enter your birthdate and afterwards either create a new server or choose from a predefined template (with already existing channels and settings).

In this case I am choosing the Education template.

Hint: you will be asked multiple times if you want to claim your account – everything works fine without an account. You don't need to create an account if you don't want to.

This is how it looks in the browser once the registration and the login are done:

To start streaming just click on an audio channel, press the Video button and your stream will start.

The link to the stream can be found in the Invite window (beneath the video window):

Now the viewers (or the participants) can view and discuss the stream:

You can also share your desktop or a selected application – press either the Screen button on the right of Video or the Share Your Screen button beneath the video window:

It looks like this from the viewers perspective:

Discord does not offer recording. If you want to record your stream with OBS, you can pop-out the video in separate window and record only this window where only your video and your share screen or application is visible:

Discord offers also a desktop application with the same functionality.

Conclusion

That was the third part from the series Video recording and streaming with 0 investments.

Now you know how to stream and show your desktop or a specific application. I leave it up to you as an exercise to explore the various options in each streaming platform.

There are interesting options when it comes to streaming, for example - https://restream.io/multistreaming - stream simultaneously on multiple platforms (supported by OBS).

Part 4 will be about some nice features of OBS Studio - scenes, transitions, static images, and so on.

If at any point you get stuck and need help or you have any questions in general or you have a suggestion for an article on a specific topic - don’t hesitate to reach out - leave a comment and I'll help gladly.

Have fun streaming and publishing your videos. 😊

Introduction

This is part 2 of the series Video recording and streaming with 0 investments.

In this article you will see how to show yourself with the camera to your audience using the free OBS Studio software.

I’ll show you how to add and use the build-in camera (if you have a laptop with a video capture device), a USB camera and also how to use your mobile phone as a webcam.

All articles from the series can be found here:

• Introduction.
• Part 1 discusses desktop recording.
• Part 2 discusses how to show yourself with the camera. This article.
• Part 3 discusses streaming.
• Part 4 will be about some nice features of the OBS software - scenes, transitions, static images, and so on.

Let’s start.

Recap OBS basics

A very short recap of the OBS basics.

OBS stands for Open Broadcaster Software – a free and open source software for live streaming and screen recording available for Windows, Linux and macOS. It can be downloaded from here: https://obsproject.com/.

In order to record something, you need to configure the output and the video settings first.

The layout consists of different panels like:

• Captured content
• Capture sources
• Control panel
• Audio
• and so on

You can ignore for now the Scenes and Scene Transitions panels.

For this article only the Capture sources panel is relevant.

You can find more details about the OBS basics in Part 1 – desktop recording

Prerequisites for this part

If you want to see / show yourself in OBS you need to have

• either some sort of camera (build-in or webcam)
• and/or an android mobile phone
• and Wireless network access point to which both the computer and the mobile phone are connected (only needed when the mobile device is used as a webcam)

Add a camera as a video capture device

This option works for any normal camera. In this case normal means a camera that is build-in, or connected using a standard connector like USB (for example a webcam) or HDMI (for example a digital camera).

You can add such cameras as video input very easily in OBS:

1. Go to the Capture sources panel
2. Add a Video Capture Device
3. Choose the available camera

And you are ready to go.

Normally OBS uses when possible default values and they match the most use cases. You can of course change a lot of settings if you wish too. Two configuration options are worth mentioning:

• Resolution/FPS type
• Use custom audio device

Resolution/FPS type

OBS uses the device default resolution. If for some reason you want to change the camera resolution, you need to set this option to Custom in order to be able to change:

• Resolution predefined resolution combinations
• FPS predefined frame rate values
• Video Format

Use custom audio device

My webcam has a build-in microphone. In order to select it from the video capture source configuration, the option Use custom audio device needs to be selected. This way there is no need to add a separate audio capture source.

Of course, you can add the audio input later as a separate capture source of type Audio Input Capture and select there the microphone you wish to use.

Use your mobile phone as a video capture device

Now we come to the interesting part. I didn’t have a webcam for a long time and I still don’t want to buy an adapter to use my digital camera for recording or pay for an android app. I searched for alternatives and found the option described below.

IP Webcam

There are a lot of applications that can turn your android mobile phone into a web camera. I tried IP Webcam and it worked seamlessly so show how to use it with OBS.

The application is free and can be installed from the Google Playstore : https://play.google.com/store/apps/details?id=com.pas.webcam&hl=de&gl=US

Disclaimer: no, I am not the developer, although my name is also Pavel 😉

Once installed, run it and you will land on the start screen which is just a list of menu items. You can change the video capture settings (similar to OBS, for example resolution) from the Video preferences. The audio is enabled by default.

I suggest for the beginning to leave the settings as they are. Experimenting and fine tuning can be done at any time later.

What actually IP Webcam does behind the scenes is to start a server, that transmits the camera stream.

In order to use the mobile phone’s camera, go to the Start server menu item at the bottom of the list on the start screen and press it. The view goes in landscape mode and your camera is turned on (on my screenshot you see my orange wall 😊).

At the bottom of the screen the local IP address is shown, in my case – my internal IP is 192.168.0.94 and it is accessible over port 8080.

Make a note of your IP address and port number - you'll need them in OBS to connect the camera.

Before connecting with OBS you can preview and configure your webcam in a web browser. Open one and navigate to https://[ IP address]:[port number] (in my case https://192.168.0.94:8080):

This is a tiny camera control center. Press the Video renderer – Browser button to see the streamed image (in my case my jawbone jambox with mr. smiley on top 😊)

Below the preview window you will find different camera options (focus, quality, zoom, camera to use – front or back, and so on).

We have now seen, that the mobile device is streaming correctly, we can use it in OBS.

To stop the server and thus the camera, press the Actions… button in the upper right corner on your mobile device and then press Stop.

OBS Settings to use the camera of the mobile phone

There are apparently different ways to connect the mobile camera once IP Webcam is started, but only the one I am presenting here worked for me.

In order to connect the camera, you will need to

• add a Media Source instead of a Video Capture Device.
• uncheck the Local file box
• in the Input field enter your ip and port and add /videofeed at the end – in my case it looks like this: https ://192.168.0.94:8080/videofeed
• press OK to add the media source

You should see your camera image

The microphone of the mobile device can be enabled from the control center and it will work directly.

And that was it.

Alternatives

I mentioned, that there are alternatives to the IP Webcam application. For example:

• There is also a paid version, without ads, of IP Webcam and it costs around $5.
• DroidCam (also free and paid version) https://play.google.com/store/apps/details?id=com.dev47apps.droidcam
• NDI – a professional company, that is specialized in software connected to recording and streaming (https://www.ndi.tv/). The app costs around $20 https://play.google.com/store/apps/details?id=com.newtek.ndi.hxcam
• … others that I don’t know 😊

Conclusion

That was the second part from the series Video recording and streaming with 0 investments.

Now you know how to show yourself while recording your desktop or a specific application.

Part 3 will be about live streaming.

If at any point you get stuck and need help or you have any questions in general or you have a suggestion for an article on a specific topic - don’t hesitate to reach out - leave a comment and I'll help gladly.

Happy recording and enjoy watching yourself in your video. ;-)

Introduction

This is part 1 of the series Video recording and streaming with 0 investments.

This article shows how to create a desktop recording using the free OBS Studio software.

All articles and videos from the series can be found here:

• Introduction
• Part 1 discusses desktop recording. This article.
• Part 2 discusses how to show yourself with the camera.
• Part 3 discusses streaming.
• Part 4 will be about some nice features of the OBS software - scenes, transitions, static images, and so on.

Let’s begin recording.

There are many applications that can record the desktop, but OBS Studio is really professional and has a lot of functionalities that make recording or streaming very easy.

OBS stands for Open Broadcaster Software – a free and open source software for live streaming and screen recording available for Windows, Linux and macOS.

It can be downloaded from here: https://obsproject.com/ resp. https://obsproject.com/download.

Once downloaded - install or unpack or build it and finally run it.

Please do not be afraid by the view when you see the application for the first time. It looks complicated, but in reality, it is designed quite logically and once you know the basics, you can get along very quickly.

When run for the first time, your screen should look like this:

OBS Studio Layout

Only the following four panels of the application are relevant to start with:

1. Captured content
2. Capture sources
3. Control panel
4. Audio

You can ignore for now the Scenes and Scene Transitions panels.

1. Captured content

This is the area that shows what your audience will see later in the video or sees while you stream. The more capture sources there are, the more windows are shown in this content area.

2. Capture sources

This is the panel where you add the sources you want to record or show. OBS supports a lot of sources, like: the complete desktop, a particular window, already recorded video, static images, remote sources (used in Part 2 for the camera input) and others.

The following fields are of interest for the beginning:

• Display Capture encloses the whole screen in the recording (you need to select which one you want, if you have multiple monitors)
• Window Capture encloses a chosen single window. You can choose the desired window from the drop-down list

The different sources can be added with the + symbol at the bottom of the panel and resp. removed with the - symbol.

Sources are stacked if there is more than one. The order can be changed using the move up 🔼 and move down 🔽 symbols.

3. Control Panel

Here are the controls. For now, of interest are only 2 buttons (in Part 3 and 4 two more will be added):

• Start Recording – starts, pauses and stops the recording
• Settings - opens the settings dialog (basic settings are explained in the section Minimum required settings)

4. Audio

In this area resides the audio mixer that shows the currently configured and used audio input devices and the sound level of each. By default, the desktop sound is always configured and captured. If you have a build-in microphone (the most laptops do), then this one is also configured and captured by default.

Minimum required settings

Now that we've taken apart the layout, let's turn to the settings.

Before you start recording, you need to configure a few settings from at least two sections:

• Output
  • Recording path where the recording should be stored. Mine are landing in my recordings subdirectory
  • Recording quality quality of the recording. I go with medium
  • Recording format the format of the recording (mp4, mkv, flv, and so on). Common formats are mp4 and mkv. I save my recordings as mp4, in order to be able to edit them later with the free Windows Video Editor.
• Video
  • Base / Output Resolution since monitors have different resolutions, set the canvas resolution to be the same as your monitor resolution in order to prevent black stripes on the right and at the bottom
• (Optional) Audio if you want to record your voice, ensure that the Mic/Auxiliary audio setting is set to Default or if you have more than one microphone, select the desired to use. Of course, you can use this section to disable all sounds (desktop and microphone).
• (Optional) Hotkeys shortcuts are very helpful particularly if you have only one monitor and you don't want to edit your video to remove the start and the end from a desktop recording, because OBS Studio is to see when starting and stopping the recording. Personally, I always configure two hotkeys: Start Recording and Stop Recording. This way I can start and stop recording without showing OBS or edit the video afterwards.

Screen recording

Once the configuration is all set you are ready to go. Select the capture source and press the „Start Recording“ button from the control panel or your selected hotkey. Your video is being recorded and saved under the configured directory in the configured format. You can navigate to the directory and check for the file.

While a recording is running, it can be paused and then resumed. The difference with a stop is, that when the recording is resumed, the same video goes further - if you stop and start the recording again, every time a new video is created.

Hint: if you have only one monitor and you configure Display Capture as a capture source, you will see a funny inception image - window in a window in a window and so on. This is normal and your video will look nevertheless fine.

Desktop sounds and microphone

Sometimes you don’t want to record your desktop sound or the audio from the microphone. You can mute the desktop sound and or the microphone from the Audio mixer panel.

Conclusion

That was the first part from the series Video recording and streaming with 0 investments.

Now you know how to record your desktop or a specific application.

Part 2 will be about adding your camera using either your mobile phone or another video input device.

If at any point you get stuck and need help or have any questions in general or have a suggestion for an article on a specific topic - don’t hesitate to reach out - leave a comment and I'll help gladly.

Happy recording and enjoy watching your video.

Motivation or why this topic

Nowadays, interactive media content such as desktop recordings and live broadcasts with the camera switched on are very popular. There are many different areas of application: video blogging, pre-recorded online courses, live streaming for conferences or courses and many more.

The media content can be distributed / streamed via various platforms like YouTube, Facebook, Twitter, Twitch, Discord, Gumroad and others. This content can also be monetized as some point!

Maybe you want to know how this works and try it out yourself to see if this is something for you?

If so, then you are like me! I also recently wanted to know how to do desktop recording, how to stream, how to show myself to my audience.

There are many articles and explanatory videos what to buy in order to start - camera, lights, microphones, software, noise canceling plates, tripods and so on.

Don't get me wrong - all of these accessories are helpful and at some point you will need them to create high quality recordings, but you don't need them if you just want to see how recording works.

Personally, I want to try something first before investing money in it. It doesn't always work and not for everything, but you can always check whether it is possible for the new adventure.

I've researched how desktop recording and streaming can be done for free and I've documented my findings. Have fun reading and watching!

Who is this article for

This article and video series is for people who have never done a desktop recording or streaming before.

The recording and streaming software is available for Windows, Linux, and macOS so anyone can try it out.

To keep the topic understandable, it has been divided into 4 parts.

• Introduction - this short article
• Part 1 discusses desktop recording.
• Part 2 discusses how to show yourself with the camera.
• Part 3 discusses streaming.
• Part 4 will be about some nice features of the OBS software - scenes, transitions, static images, and so on.

Since I only have a Windows computer and an Android device, I will show you how the Android camera can be used as a webcam.

Apple users / owners are welcome to comment or expand the article.

For each article there is a corresponding video! You can find and watch each video at any time again on my YouTube channel.

If you have any questions feel free to leave a comment on the video or on the blog - I would be happy to help you.

Prerequisites

You need

• a computer
• a mobile phone (optional, part 2 can always be skipped)
• a bit of time 😊

and that’s it!

Have fun reading, watching, recording and streaming!

Each of us has our own perception of estethics and our own taste when it comes to design or UI / UX.

Personally, I think it's nice when the pictures in my articles have rounded edges. I find the rounded corners and the color border elegant - my very own perception. Like this:

I know that Hashnode gives us the ability to control the styling of the blog with CSS.

Since I am more familiar with back-end programming than front-end programming, I was of the opinion that I would create a program for image transformations faster than using CSS to do the styling the way I want it.

And so I wrote a small tool to automatically transform my screenshots so that I don't have to deal with CSS. 😀

My thoughts on what I need

Most of the articles I write have lots of pictures. I prepare the pictures in advance if I can, then write the text and add the pictures in the right place.

This means that when I start writing, I will need the finished images. Sometimes, of course, new images emerge while writing.

This means that it would be most practical if it were possible to just copy the images somewhere and they should be transformed automatically. It will not be convenient to start the transformation program for a single image each time.

So some kind of transformation service was needed.

The simple image processor

The program consists of two main parts:

1. The first part is the service that monitors a directory and processes new image files that occur there.

2. The second part is the actual image transformation or processing: image file as input and modified image file as output. The original file remains unchanged.

My preferred language to implement the service is C# with .NET Core (so the service and the transformation can be used under Windows, Linux and macOS).

The service

The service is a FileSystemWatcher that monitors a directory for new files and processes them. The directory and the file extensions that are monitored are configurable.

<configuration>
  <appSettings>
    <add key="baseDirectory" value="c:\temp\resize"/>
    <add key="fileFilter" value="*.jpg"/>
    <add key="cornerRadius" value="25"/>
  </appSettings>
</configuration>

The service monitors the configured (main) directory for new files with the configured extension. Within are two subdirectories done and original. The changed files are saved in done and the unchanged original files in original.

private void watch()
{
    using (FileSystemWatcher watcher = new FileSystemWatcher())
    {
        watcher.Path = baseDirectory;
        watcher.NotifyFilter = NotifyFilters.LastAccess
                             | NotifyFilters.LastWrite
                             | NotifyFilters.FileName
                             | NotifyFilters.DirectoryName;

        watcher.Filter = fileFilter;
        watcher.IncludeSubdirectories = false;
        watcher.Created += OnCreated;
        watcher.EnableRaisingEvents = true;

        Console.WriteLine($"Watching '{baseDirectory}' for new '{fileFilter}' images. \r\nPress 'q' to quit.");
        while (Console.Read() != 'q') ;
    }
}

The watcher has just one handler - when a file is added to the directory. This handler has only one job and that is to process the file.

private void OnCreated(object source, FileSystemEventArgs e)
{
    Console.WriteLine($"File '{e.FullPath}' added to directory");
    processImage(e.FullPath);
}

private void processImage(string file)
{
    var imageProcessor = new ImageProcessor();
    imageProcessor.AddRoundCornersAndSave(file, subDirectory(DONE), cornerRadius);
    file.MoveTo(subDirectory(ORIGINAL));
}

When the service is started with dotnet run and is running, it looks like this:

The solution with the FileSystemMonitor is acceptable as long as you have a few files every now and then. If you have a lot of image processing to do, it may be better to create your own custom directory monitor. Have a look at the FileSystemWatcher.InternalBufferSize property.

The image processor

The image processor uses the Graphics class to draw the desired look.

At this graphics level you can do literally everything.

The image processor

• creates a graphics object from the original image in order to be able to draw
• clips the image using a GraphicsPath to create the rounded corners (basically makes the image at the corners transparent)
• draws a border around the image with a custom color, in this case gray, using again a graphics path object

// ...
var imageSize = stretch(image.Width, image.Height);
var destinationRectangle = new Rectangle(0, 0, imageSize.Item1, imageSize.Item2);

Bitmap roundedImage = new Bitmap(imageSize.Item1, imageSize.Item2);
roundedImage.SetResolution(image.Width, image.Height);
// ...
using (Graphics g = Graphics.FromImage(roundedImage))
{
    g.CompositingMode = CompositingMode.SourceCopy;
    // more code here, cutted for clarity ...

    // create transparent corners
    g.SetClip(gp);
    using (var wrapMode = new ImageAttributes())
    {
        wrapMode.SetWrapMode(WrapMode.TileFlipXY);
        // add the original image
        g.DrawImage(image, destinationRectangle, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, wrapMode);
    }
    // draw a gray border
    g.DrawPath(penGray, gpBorder);
}

And that's all. 😎

Now all I need to get images in the way I want them, is to start the application, put new screenshots in the configured directory and get the result from the done directory.

If you have questions about the code in detail, don't hesitate to ask.

Further development and source code of the service

The source code is available on GitHub - https://github.com/keenthinker/SimpleImageProcessor.

The project is constantly being developed. Currently the followig is planned:

• create documentation regarding usage and how to build the project
• create release package
• extend the ImageProcessor class so that multiple transformations can be provided as input at the same time and applied in sequence using the same graphics object
• extend the configuration with the rounded corner radius
• extend the configuration with the desired resolution - remove fixed resolution (width and height)
• add aspect ratio

The source code can be used as the basis for other applications, for example image transformation website.

You are more than welcome to try the software. Any feedback is greatly appreciated.

Today of all times, most people long for security on the Internet. It is important that the sources used are trustworthy. This also applies to source code. So there is a need to mark the source code and the changes to the source code as trustworthy.

The code repository GitHub supports the option of signing changes to the source code by the contributor. This is made possible by commit signature verification.

What are signed commits

A LinuxJournal article describes pretty well why signed commits are helpful:

When you sign a Git commit, you can prove that the code you submitted came from you and wasn't altered while you were transferring it. You also can prove that you submitted the code and not someone else.

Being able to prove who wrote a snippet of code isn't so you know who to blame for bugs so the person can't squirm out of it. Signing Git commits is important because in this age of malicious code and back doors, it helps protect you from an attacker who might otherwise inject malicious code into your codebase. It also helps discourage untrustworthy developers from adding their own back doors to the code, because once it's discovered, the bad code will be traced to them.

The following describes what must be done so that signed commits can be created in order to mark source code changes as trustworthy in GitHub.

How to enable signature verification

Github describes what needs to be done pretty well. I've compressed the instructions and added pictures to make them more compact.

Prerequisites

I am using Windows, but since for the key creation GPG is used, it should also work for other operating systems, as long GPG is available for it!

If not already done, Download GnuPG and GIT and install them.

I am using GPG from within the GIT bash to create my key pair.

Step 0 - Preparation

It is helpful to have a few tools at hand in order to be able to complete some tasks faster.

• Your favourite editor for storing temporary data
• Your password manager (why: the generation of a GPG key pair requires a passphrase. If you are using a password manager I suggest to already create a new entry for your future GitHub PGP key pair in order to save time later.)
• Your GitHub email address (or no-reply alias, if activated)
• open a browser and log in to GitHub

Step 1 - generate a GPG key

1. Open your terminal of choice where you have access to git
2. Enter and execute $ gpg --full-generate-key
3. Optional: if your GPG version is < 2.1.17 (check with $ gpg --version) then the command is $ gpg --default-new-key-algo rsa4096 --gen-key

Now a few details have to be entered. Some are mandatory, some are recommendations:

• Your key must use RSA (GitHub requirement)
• Add length: 4096 (it is not recommended to choose a larger size)
• Add expiration: never
• Enter your Id information (Name and verified email. If your email is set to private, then use the no-reply email)
• Enter your new GPG password (twice)(from your password manager)
• Perform some operations like moving the mouse a bit, typing on the keyboard while bytes are generated

It looked like this for me:

Step 2 - check

1. Execute $ gpg --list-secret-keys --keyid-format LONG
2. This should show the newly generated key. In my case it is 0B2D217BA3515579
3. Copy the value in the editor - you will need it several times later

Step 3 - extract the needed GPG data

1. Id - you will need the key id from step 2 (found on the line starting with sec)
2. You will need the GPG key. This can be exported with the following command: $ gpg --armor --export [insert id from step 2]
3. Copy the GPG key with the two lines at the beginning and the end

   -----BEGIN ...
   ...
   -----END PGP ....
   

Step 4 - add the GPG key to your GitHub account

1. Go to your GitHub settings page. There is a SSH and GPG keys entry
2. Click New GPG Key
3. Paste the GPG key text here and save

Step 5 - tell your local GIT about your signing key

1. Enter and execute: $ git config --global user.signingkey [insert id from step 2]

Step 6 (optional) - activate sign commits with GPG by default

1. Enter and execute this command $ git config --global commit.gpgsign true

Step 7 - sign your commits

$ git commit -S -m "added 2020"

Enter your PGP password when asked.

Your commits in GitHub are now signed and thus verified.

Step 8 (bonus) - VSCode

VSCode is smart and it takes the global GIT settings into account and commits triggered from VSCode are also signed. If you want to commit without signing, you need to do so explicitely.

Conclusion

Now all commits can be trusted. 😀

If you have any questions, don't hesitate to ask me using the comments section.

We all have our habits. It also affects those of us who write software. A habit of many programmers is the display language of the programming language.

We are used to reading the compiler's messages in a certain language! And this is not necessarily our mother tongue or the language of the country we live in.

When I learned to program, I always had everything in english, so that framework messages in another language now irritate me.

Not that we don't understand the messages, but it looks strange and sometimes there are more and better explanations to be found in other languages than in the system language.

The case of the .NET Core installation package

The .NET Core installation package comes with a few language packs (cs, de, en, es, fr, it, ja, ko, pl, pt-BR, ru, zh-Hans, zh-Hant), but sets the operating system language as a default one, which may not be the language in which we want to see the messages.

The language directories could be found in the .NET Core SDK folder (run dotnet --info in a command prompt / terminal and look for the Base Path entry). In my case on Windows: C:\Program Files\dotnet\sdk\3.1.401\.

What can you do?

You can change the .NET Core display language using an environment variable.

• The name of the variable is DOTNET_CLI_UI_LANGUAGE.
• The value is the language locale code (for example: en or pt-BR).

How to change the display language

• Open a command prompt / terminal
• Check the current display language (for example by running dotnet --help): In my case it is in german.
• Set the DOTNET_CLI_UI_LANGUAGE variable to the desired language. Example to set it to english: set DOTNET_CLI_UI_LANGUAGE=en
• Check the result (for example by running dotnet --help again):

And that was it. More (historical) details about the environment variable can be found on GitHub in this issue: https://github.com/microsoft/vstest/issues/821

Conclusion

As I often tend to forget such details like the name of the variable, I tweetet recently about it. 😁

If you have any questions, don't hesitate to ask me using the comments section.

This is my first post using Hashnode, and I think it is fair to be about how awesome Hashnode.com really is!

Recently I wanted to start blogging again about my software ramblings and by chance I saw a tweet about hashnode, so I decided to give it a try.

It took really one minute:

• I read the Quincy Larson's article
• and I followed the instructions after the Hashnode account creation

And that was it - this blog is operational on it's own domain!

Thank you, Hashnode! 🎉

Next posts about .NET, Azure, software development in general and digitization are on it's way!

Stay tuned!