DEV Community: Zigmas Slušnys

WorktreesNuts: The VSCode Extension You Didn't Know You Needed

Zigmas Slušnys — Mon, 15 May 2023 19:56:12 +0000

Hello, DEV Community! I hope you're sitting comfortably because today, I'm going to change your Git workflow forever. And I promise, it's not in the "I just changed all the IDE settings while you were at lunch" kind of way. More like, "here's a superpower you didn't even know you could have" kind of way.

What's Up with Git?

Git is great. It's like that loyal old dog that fetches your slippers, your newspaper, and occasionally a live grenade. We've all had those days when switching between branches feels less like coding and more like playing minesweeper in a war zone. One wrong move and BOOM! There goes your uncommitted code.

Git Worktrees to the Rescue!

Now, what if I told you there's a way to juggle between branches like a pro without ever stepping on a landmine? No, I'm not talking about cloning the repo for every branch like a caveman. I'm talking about Git worktrees.

Git worktrees let you check out multiple branches at once in different directories. It's like having a parallel universe for each branch where you can tamper with the space-time continuum without affecting the others. But managing these universes manually is a task only suited for a tenured professor at Hogwarts.

Enter WorktreesNuts

To make your journey through the multiverse smooth, we've created WorktreesNuts, a VSCode extension. It's like having a tour guide who not only knows all the secret passageways but also carries your luggage.

Here's What It Does (Spoiler Alert: It's Awesome!)

Worktree Switcheroo: With a fancy keyboard shortcut (Ctrl+Cmd+R), you can hop between worktrees like a quantum particle. Who needs quantum supremacy when you've got WorktreesNuts?
Go To File, But Better: The good old Command+P now only shows you files in the active worktree. It's like having GPS that doesn't lead you to a different continent.
Status Bar Show-off: Flaunt your active worktree with a status bar item that's as clear as a sunny day in the Sahara desert.
Efficient File Indexing: We've taught WorktreesNuts to read .gitignore and ignore files that you wouldn't touch with a ten-foot pole.
Worktree Management: 🔜 With WorktreesNuts, you willbe able to create and delete worktrees without opening the terminal. It's as magical as it sounds.

Here's how it works

Get It Now!

WorktreesNuts is the VSCode extension you didn't know you needed. It makes Git worktrees work for you. It's like having your cake and eating it too, except the cake is your code, and you don't have to worry about the calories.

Enter parallel universe here!

Open Source Because Sharing is Caring

We're sharing WorktreesNuts with the world, and we're eager for you to make it even better. You can find us on GitHub here. Contribute, criticize, or just drop by to say hi!

I hope you love using WorktreesNuts as much as we loved making it. Give it a try, and let us know what you think. Remember, in the world of Git worktrees, you're only as nuts as your tools.

So, hop on, strap in, and let's make Git worktrees cool again! And remember, with WorktreesNuts, the only thing you'll regret is that you didn't find it sooner.

Happy coding!

What skill you never thought to be useful which you can't live without now?

Zigmas Slušnys — Tue, 19 May 2020 21:01:39 +0000

How to create a video from an image with Python

Zigmas Slušnys — Wed, 15 Jan 2020 10:08:24 +0000

How did I come up with the idea?

I've been using instagram for quite a while posting stories of images and videos of all sorts of things so I thought to make an effect that would take my image and "recolorize" it in which would kind of spark life into a picture. Therefore I set myself to a task to create something as basic as "recolorizing" a picture.

Check the GitHub repository at https://github.com/slushnys/recolorize

Disclaimer: I'm not using any algorithms to bring colors to black and white images, all this does is reapplying existing ones back while creating a movie out of it.

Steps I had to take were (workflow):

Take a colorful image
Resize the image so it would take less time to process.
Research imageio library to help with image processing.
Save it to the disk
BONUS: Save it to google cloud storage.

Steps of my implementation

Getting familiar with Pillow library

First of all I just wanted to get to know how to manipulate the image and to do that I knew one way, to use Pillow library (fork of PIL) that has a lot of capabilities to work with image data. I would strongly suggest anyone interested in image manipulation to check it out. Check out some documentation at https://pillow.readthedocs.io/en/stable/index.html

You have to install with command:

python -m pip install Pillow

After trying out the library and reading some specific part of documentation I was able to open the image and reduce the color of it or increase it on demand.

# Open the image with the library
dir_name = os.path.dirname(__file__)
abs_path_to_image = os.path.join(dir_name, './test_image.jpeg')
image = Image.open(file)
color_percentage = 0.5 # 50%
enhanced_image = ImageEnhance.Color(image).enhance(color_percentage)
enhanced_image.show() # opens your enhanced image

Create a video out of this image enhancement

So what are videos? Videos are just a list of frames (images) that are ran fast enough so your eyes wouldn't see the jitter between images changing. That's about 24 frames per second. What we need to do is to multiply the frames per second needed by the seconds of the transition. I took 5 seconds for the transition therefore 5*24=106. Then for each frame in that range I took that image and enchanced it bit by bit to from 0% to 100% of colors so it would look like it's regaining color.

Ofcourse you need to write the manipulated image data into some sort of buffer so it would be possible to convert to a movie and this is where imageio came to help me. I found this to be very easy, fast and efficient with a easy API to work with. You can check the documentation at https://imageio.github.io/

total_frames = seconds * fps

color_percentage_for_each_frame = (100 / total_frames) / 100

write_to = 'output/{}.mp4'.format(output) # have a folder of output where output files could be stored.

writer = imageio.get_writer(write_to, format='mp4', mode='I', fps=fps)

for i in range(total_frames):
    if i < total_frames:
        processed = ImageEnhance.Color(im).enhance(
            color_percentage_for_each_frame * i)
        writer.append_data(np.asarray(processed))
    else:
        writer.append_data(np.asarray(im))
writer.close()

All this code does is creates a buffer in a variable of writer where all the image data is going to be stored and when you close the writer, it will create you the movie file from all the processed images.

Wrap this functionality in a server

To complete the implementation we simply wrapped up the functionality in a Flask webserver that would allow me to have a simple user interface of uploading a file and downloading a file. We used Flask because it's a lightweight server that can encapsulate simple tasks providing easy to access functionality.

Conclusion

I had fun trying to figure how to do this, and I think there could be a lot of improvements done in order to reduce the size of the video that's being outputted, also there should be performance gains when creating the video itself as currently, it is processor intensive.

BONUS

For the sake of integration, we have also an option to store the processed files in a buffer that would be later saved in google cloud storage on completion. If you're interested in this functionality, check out the Github repository.

For the future, I would like to encapsulate this functionality within a mobile app in order to make a simple filter for people to customize their pictures.

How to host Nuxt.js application on firebase with a single command

Zigmas Slušnys — Sun, 12 Jan 2020 11:23:36 +0000

Introduction

I wished to copy a famous website that is lingering across Europe where people share their found deals with others and like that save money (its pepper.com in case anyone is wondering (not that i'm doing this as an ad or anything)).

Therefore I set myself with a task - to learn Nuxt.js as it is a server side rendered (SSR) framework that encapsulates a Node.js server with Vue.js and renders content that is possible to be crawled by google's crawlers in order to be indexed and listed on the search giant.

You can check the demo at:

https://dealas-962d3.firebaseapp.com/

You can fine the full repository at:

https://github.com/slushnys/dealas

Challenges I faced in order to finish my application

Understanding the lifecycles of SSR and how to inject data into a page for it to be rendered and be indexed.
Understand firebase functions.
Learn how to host the code and functions to the cloud on google firebase.

What I have learned

Async data

Even though it's pretty clear in the documentation of nuxt.js (https://nuxtjs.org/guide/async-data) that this method is to retrieve the data of certain resource before the component is rendered.

Also, at that point of time you don't have the access to this within that method, as per documentation:

You doNOThave access of the component instance throughthisinside asyncData because it is called before initiating the component.

Another thing I learned the hard way is that the asyncData method for retrieving information is only called for a page being rendered, not a regular component where you might try to be filling a select box with data from your api.

Firebase functions

For this part you will need to install firebase under your global npm packages

npm i -g firebase-tools

don't forget to login to firebase after with

firebase login

I had previous experience with running google cloud functions with python language, however I've never made myself learn how do javascript functions run on demand in Google Cloud Platform. This was about to change because i was determined to have my website deployments automated so i wouldn't need to manually do all that work.

// functions/index.js

const functions = require("firebase-functions");
const { Nuxt } = require("nuxt-start");

const nuxtConfig = require("./nuxt.config.js");

const config = {
  ...nuxtConfig,
  dev: false,
  debug: false,
  buildDir: ".nuxt",
  publicPath: "public"
};

const nuxt = new Nuxt(config);

let isReady = false;

async function handleRequest(req, res) {
  if (!isReady) {
    try {
      isReady = await nuxt.ready();
    } catch (error) {
      process.exit(1);
    }
  }
  await nuxt.render(req, res);
}

exports.ssrapp = functions.https.onRequest(handleRequest);

You might think what is that nuxt-start pacakge you see at the beginning of the index.js file 🤔 Well it's a package that takes away the overhead and lets you start the package without many dependencies in production.

On top of that, we don't want to render the unfinished page, therefore on our request handler function handleRequest we wait to see if nuxt is ready and render the full page only then when it is.

Exporting ssrapp is the most important for our application to work on cloud as the each request will be handled by our handleRequest function which is assigned to our google functions onRequest event listener.

But wait... who's going to call the ssrapp function when it's on the cloud and when will google cloud function know which function to call?

Firebase configuration

In this section I'll discuss my learning points on deploying nuxt to the cloud which in my case - was my biggest painpoint to figuring out why my application doesn't work. Lets first take a look at my ./firebase.json configuration file.

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "source": "functions",
    "predeploy": [
    "rm -rf functions/.nuxt && npm --prefix src run build && mkdir -p functions/.nuxt/dist && cp -r src/.nuxt/dist/ functions/.nuxt/dist && cp src/nuxt.config.js functions/"
    ]
  },
  "hosting": {
    "predeploy": [
      "rm -rf public/* && mkdir -p public/nuxt && cp -r functions/.nuxt/dist/client/ public/nuxt && cp -a src/static/. public/"
    ],
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "ssrapp"
      }
    ]
  }
}

There are different configurations for different services here as you can see by the keys of this dictionary, it includes - firestore, functions and hosting.

firestore keys' value includes the rules that you can set up for your firestore real time database. This should include your configuration to disable users reading your database for malicious purposes.

functions keys' value includes predeploy command, exactly this caused me the most of my troubles as I've taken this configuration from other tutorial I tried to apply to my use case. This resulted in my application crashing and not properly rendering when deployed.

hosting keys' value includes the predeployment script that takes files and uploads them to firebase hosting with a rewrite of source function to be the one we defined in our index.js file as ssrapp.

The reason my deployments were failing: this was actually pretty simple yet took me the longest to figure out. I have overwritten my nuxt.config.js buildDir default value of .nuxt/ to ../nuxt/. This in result caused some errors building some packages of 3rd party libraries I was using (especially Vuetify). I really hope this saves time to someone who's trying to deploy their website on firebase.

I haven't figured put much time soon after to figure out why the deployments weren't successful with a custom build directory of nuxt after I finally deployed my application, therefore I'm not going to contemplate on this.

Conclusion

It was a fun experience creating a Nuxt.js web application which is quite a powerful tool that one can use for basically any development needs, from a small website, to a bigger and meaner application release to production. Firebase also gives a very flexible real time database events that your application can listen on demand whenever certain action happens.

What challenges have you faced while trying to use Nuxt or Firebase? Let me know in the comment section.

Bonus

I've experimented with TypeScript so I refactored the repository to have typescript implementation of nuxt and new Vue 3 composition-api including it in ikelti.vue file if anyones interested in checking out how that integrates, i would be keep to receive some feedback.

Cross-platform native development differences between Flutter and NativeScript

Zigmas Slušnys — Thu, 09 Jan 2020 10:32:06 +0000

Introduction

I am going to compare the amount of code and the ease of entry to begin developing mobile apps with Flutter and NativeScript concerning functionality that needs direct access to native platform APIs. We're not going to compare performance, plugins or programming languages.

Flutter

As we all have heard, Flutter has been a widely talked topic which is a native mobile development framework that's using Dart as its programming language.

It caught my eye as well and I decided to give it a shot and jump the hype train in order to try to ride it out and see what the fuss is all about.

NativeScript

This is another native performance like development framework using JavaScript as its programming language. The interesting approach NativeScript takes is to use JavaScript Virtual Machines - Google’s V8 for Android and WebKit’s JavaScriptCore implementation distributed with iOS 7.0+ in order to get access to the native APIs of both platforms.

Use case

While looking into flutter a question hit me to see how easy it is to work with native APIs from both Android and iOS platforms accessing platform specific functions. I've found the original flutter post about battery level access in order to display it on the application screen
(check out the post here: https://flutter.dev/docs/development/platform-integration/platform-channels )

This lead me to remember how I used to access native APIs of NativeScript and therefore got me writing this post you're reading right now.

NativeScript

In the case of NativeScript - it uses platform declaration files that have been written to easily navigate through native api's of the device. Lets see what does it take to Check and have a continuously updated level of battery on our screen.

Repository can be found at: https://github.com/slushnys/nativescript-battery-level-check

// main-view-model.ts
// Logic of the battery checking

export class BatteryLevelModel extends Observable {
    public batteryLevel: number;

    constructor() {
        super();
        this.initBatteryStatus();
    }

    private initBatteryStatus(): void {
        if (isAndroid) {
            appModule.android.registerBroadcastReceiver(
                android.content.Intent.ACTION_BATTERY_CHANGED,
                (context, intent: android.content.Intent) => {
                    const level = intent.getIntExtra(android.os.BatteryManager.EXTRA_LEVEL, -1);
                    const scale = intent.getIntExtra(android.os.BatteryManager.EXTRA_SCALE, -1);
                    this.set("batteryLevel", Math.round((level / scale) * 100));
                }
            );
        } else {
            UIDevice.currentDevice.batteryMonitoringEnabled = true;
            this.set("batteryLevel", Math.round(UIDevice.currentDevice.batteryLevel * 100));

            appModule.ios.addNotificationObserver(UIDeviceBatteryLevelDidChangeNotification, () => {
                const newLevel = Math.round(UIDevice.currentDevice.batteryLevel * 100);
                this.set("batteryLevel", newLevel);
            });
        }
    }
}

So what's happening here you may ask? Its pretty simple when you think about it - we can browse through native API reference for android and ios devices and implement exactly the same functionality writing TypeScript using same namespaces, classes and functions in order to achieve our desired results.

Flutter

I'm no expert in nether Dart nor Flutter, however to my understanding in order to check the battery level on a flutter application, we would need to understand and implement objective-c/swift or java/kotlin code. Lets have a short example on how flutter implements this functionality from their example page:

Repository can be found at: https://github.com/slushnys/flutter/tree/master/examples/platform_channel_swift

Android implementation part is in Java language

package com.example.platformchannel;

import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.ContextWrapper;
import android.content.Intent;
import android.content.IntentFilter;
import android.os.BatteryManager;
import android.os.Build.VERSION;
import android.os.Build.VERSION_CODES;
import android.os.Bundle;
import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.EventChannel;
import io.flutter.plugin.common.EventChannel.EventSink;
import io.flutter.plugin.common.EventChannel.StreamHandler;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
import io.flutter.plugin.common.MethodChannel.Result;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {
  private static final String BATTERY_CHANNEL = "samples.flutter.io/battery";
  private static final String CHARGING_CHANNEL = "samples.flutter.io/charging";

  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    GeneratedPluginRegistrant.registerWith(flutterEngine);

    new EventChannel(flutterEngine.getDartExecutor(), CHARGING_CHANNEL).setStreamHandler(
      new StreamHandler() {
        private BroadcastReceiver chargingStateChangeReceiver;
        @Override
        public void onListen(Object arguments, EventSink events) {
          chargingStateChangeReceiver = createChargingStateChangeReceiver(events);
          registerReceiver(
              chargingStateChangeReceiver, new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
        }

        @Override
        public void onCancel(Object arguments) {
          unregisterReceiver(chargingStateChangeReceiver);
          chargingStateChangeReceiver = null;
        }
      }
    );

    new MethodChannel(flutterEngine.getDartExecutor(), BATTERY_CHANNEL).setMethodCallHandler(
      new MethodCallHandler() {
        @Override
        public void onMethodCall(MethodCall call, Result result) {
          if (call.method.equals("getBatteryLevel")) {
            int batteryLevel = getBatteryLevel();

            if (batteryLevel != -1) {
              result.success(batteryLevel);
            } else {
              result.error("UNAVAILABLE", "Battery level not available.", null);
            }
          } else {
            result.notImplemented();
          }
        }
      }
    );
  }

  private BroadcastReceiver createChargingStateChangeReceiver(final EventSink events) {
    return new BroadcastReceiver() {
      @Override
      public void onReceive(Context context, Intent intent) {
        int status = intent.getIntExtra(BatteryManager.EXTRA_STATUS, -1);

        if (status == BatteryManager.BATTERY_STATUS_UNKNOWN) {
          events.error("UNAVAILABLE", "Charging status unavailable", null);
        } else {
          boolean isCharging = status == BatteryManager.BATTERY_STATUS_CHARGING ||
                               status == BatteryManager.BATTERY_STATUS_FULL;
          events.success(isCharging ? "charging" : "discharging");
        }
      }
    };
  }

  private int getBatteryLevel() {
    if (VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {
      BatteryManager batteryManager = (BatteryManager) getSystemService(BATTERY_SERVICE);
      return batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY);
    } else {
      Intent intent = new ContextWrapper(getApplicationContext()).
          registerReceiver(null, new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
      return (intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) * 100) /
          intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);
    }
  }
}

iOS implementation part is in Swift programming language.

import UIKit
import Flutter

enum ChannelName {
  static let battery = "samples.flutter.io/battery"
  static let charging = "samples.flutter.io/charging"
}

enum BatteryState {
  static let charging = "charging"
  static let discharging = "discharging"
}

enum MyFlutterErrorCode {
  static let unavailable = "UNAVAILABLE"
}

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate, FlutterStreamHandler {
  private var eventSink: FlutterEventSink?

  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    guard let controller = window?.rootViewController as? FlutterViewController else {
      fatalError("rootViewController is not type FlutterViewController")
    }
    let batteryChannel = FlutterMethodChannel(name: ChannelName.battery,
                                              binaryMessenger: controller.binaryMessenger)
    batteryChannel.setMethodCallHandler({
      [weak self] (call: FlutterMethodCall, result: FlutterResult) -> Void in
      guard call.method == "getBatteryLevel" else {
        result(FlutterMethodNotImplemented)
        return
      }
      self?.receiveBatteryLevel(result: result)
    })

    let chargingChannel = FlutterEventChannel(name: ChannelName.charging,
                                              binaryMessenger: controller.binaryMessenger)
    chargingChannel.setStreamHandler(self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }

  private func receiveBatteryLevel(result: FlutterResult) {
    let device = UIDevice.current
    device.isBatteryMonitoringEnabled = true
    guard device.batteryState != .unknown  else {
      result(FlutterError(code: MyFlutterErrorCode.unavailable,
                          message: "Battery info unavailable",
                          details: nil))
      return
    }
    result(Int(device.batteryLevel * 100))
  }

  public func onListen(withArguments arguments: Any?,
                       eventSink: @escaping FlutterEventSink) -> FlutterError? {
    self.eventSink = eventSink
    UIDevice.current.isBatteryMonitoringEnabled = true
    sendBatteryStateEvent()
    NotificationCenter.default.addObserver(
      self,
      selector: #selector(AppDelegate.onBatteryStateDidChange),
      name: UIDevice.batteryStateDidChangeNotification,
      object: nil)
    return nil
  }

  @objc private func onBatteryStateDidChange(notification: NSNotification) {
    sendBatteryStateEvent()
  }

  private func sendBatteryStateEvent() {
    guard let eventSink = eventSink else {
      return
    }

    switch UIDevice.current.batteryState {
    case .full:
      eventSink(BatteryState.charging)
    case .charging:
      eventSink(BatteryState.charging)
    case .unplugged:
      eventSink(BatteryState.discharging)
    default:
      eventSink(FlutterError(code: MyFlutterErrorCode.unavailable,
                             message: "Charging status unavailable",
                             details: nil))
    }
  }

  public func onCancel(withArguments arguments: Any?) -> FlutterError? {
    NotificationCenter.default.removeObserver(self)
    eventSink = nil
    return nil
  }
}

And that is not taken into account the part where you have to define channels so that your flutter application could communicate to the implemented native functionality. Maybe I'm being biased right now, but I feel that to implement a simple functionality in NativeScript is much more simple, user friendly and accessible to beginners with less learning curve.

Conclusion

At the end of the day, it's all about the problems that you're trying to solve. For me, flutter has the advantage using Skia as a drawing framework to represent each pixel fluently. That's what people are excited about - design. From functional point of view - if I would want to implement something platform specific I would probably choose NativeScript as I don't want to learn the intrinsics of Swift/Objective-C or Java/Kotlin in order to achieve something as simple as a battery level check.

Let me know what you think and which on would you choose and why?