DEV Community: Victor Aremu

Glance — A VSCode extension for viewing SVG sprites easy-peasy.

Victor Aremu — Wed, 23 Jun 2021 23:14:02 +0000

When working on a front-end project that uses SVG sprites, I often misremember icon names or dis-remembered that I had previously added them. Consequently, I developed an extension for my favorite editor to help solve this issue.

Glance is a VSCode extension for viewing SVG sprites easy-peasy. Its features include:

A viewer for SVG sprites
Search icons
Copy icon's Id or SVG to clipboard
Appearance controls

Available on VS Code Market place
https://marketplace.visualstudio.com/items?itemName=ahkohd.glance

It's open-sourced, contributions are welcomed 🤗
https://github.com/ahkohd/glance

Disable two-finger swipe left/right page navigation gesture of Chromium-based browsers on macOS.

Victor Aremu — Thu, 30 Jul 2020 21:14:57 +0000

Chromium-based browsers i.e (Chrome, Brave) by default are shipped with two-finger gestures used for navigating to next or previous page depending on the direction you swipe.
If for some reason you want to disable this feature, you can do this by setting AppleEnableSwipeNavigateWithScrolls to FALSE.

Open your Terminal app, copy the commands below, paste it in your terminal, hit the enter key to run it.

appName="TypeTheNameOfTheChromiumBaseBrowserInstalledOnYourMacHere"
bundleID=$(osascript -e 'id of app "'$appName'"')
defaults write $bundleID AppleEnableSwipeNavigateWithScrolls -bool FALSE

Remember to set appName=”To The Name Of The Chronimum Based Browser Installed on your Mac”. For example, I have Brave Browser installed, mine goes like this appName=”Brave”

Close your Terminal app, then restart your browser, do the gesture, it’s gone right? 🍻🌚

Care to know what these commands do?

Below, I provide step by step explanation of each command.

# Set your app name - the Chromium Browser (i.e Chrome, Brave) in a variable.
appName="Brave"

# Get the bundle Id of the Chromium Browser, store it in a variable.
bundleID=$(osascript -e 'id of app "'$appName'"')

# Example: Get the bundle Id of Brave browser
# Returns:
# com.brave.Browser

# Now let's set a flag to disable the gesture navigation.
defaults write $bundleID AppleEnableSwipeNavigateWithScrolls -bool FALSE

Bouns

Okay, I want the gesture back what do I do? Easy, just close your browser. Open your Terminal app, copy and paste the commands below, hit the enter key. Make sure your set the appName to the browser’s name.

appName="TypeTheNameOfTheChromiumBaseBrowserInstalledOnYourMacHere"
bundleID=$(osascript -e 'id of app "'$appName'"')
defaults write $bundleID AppleEnableSwipeNavigateWithScrolls -bool TRUE

Flutter Grocery Shopping App UI template kit.

Victor Aremu — Sun, 01 Sep 2019 10:55:38 +0000

So I saw a Grocery Shopping App UI design at Uplabs, then I decided to write it in Flutter because I really liked it. ✌

Design screens are on Uplabs. It’s premium, purchase it if you want to use it commercially.
Disclaimer: I am not in anyway in affiliate with the designer of the screens. I just love the UI and decided to code it in Flutter😽

Download Android App

🎥 Demo

Don’t forget to star⭐ the repo if you like what you see😉. Source code available on GitHub.

https://github.com/ahkohd/FlutterGrocery-ShoppingAppUI

I created Switch - 🦄 A key combo window manager that lets you zap between your favorite apps lightning fast.

Victor Aremu — Thu, 29 Aug 2019 20:41:05 +0000

Switch - A keycombo window manager built with `Electron` & `Node.js` with some native bindings using `N-API`.

Switch between your favorite apps lightning fast. (Windows, macOS - Under development)

Demo ⚡

Get It Now 🤞 >>

Features 🔥

Switch fast between apps.
Favorite apps loadout each mapped to your Num keys 0-9.
A dock to add favs.
The convenience of use by both left and right-handed users with the use of Alt-left or Alt-right.

Feel free to contribute on Github 👨‍❤️‍💋‍👨

NOTE: Switch works on Windows, macOS support is under development. All contributions are welcomed. 🙌

Thoughts On Creating Forms using Angular Pipes

Victor Aremu — Sun, 30 Jun 2019 16:01:44 +0000

While working on my last Angular project. I can’t help but notice how unease I felt with lots of HTML input tags spanning through the component template code I was working on. “There should be a more neat way to abstract these input tags”, I murmured.

Afterward, I decided to draft some syntax of my idea of what the abstraction should look like. Aha! What could be the perfect tool for the job? Pipes, holy smokes yes! pipes.

Angular pipes provide a very sleek abstraction, a right tool for the abstraction quest. So I came up with the pipe syntax below, neat uh?

Quick Disclaimer: I was just trying to experiment.

Now we have a valid pipe syntax that contains sufficient parameters needed to create an input tag. It’s time we write a pipe that transforms our syntax to a pseudo HTML tag. The pipe will return a result which contains an input tag syntax wrapped in double square brackets.

Here is what the code pipe code looks like. pipeform.pipe.ts

import {
  Pipe,
  PipeTransform
} from '@angular/core';

@Pipe({
  name: 'PipeForm'
})
export class FormPipe implements PipeTransform {
  // transforms the pipe input and returns a string following this format `[[<input/>]]`
  transform(elem: string, type: string, options ? : object): string {
    // declare output container..
    let out: string;
    // switch between the type if element we want to create
    switch (elem) {
      case 'input':
        // case input tag, 
        out = `[[<input type="${type}"`;
        // loop through the options parameter and format it into the out variable like HTML attributes.
        Object.entries(options).forEach((value: string[]) => {
          out += ` ${value[0]}="${value[1]}"`;
        });
        break;
    }
    // append the final, ending string.
    out += '/>]]';
    // we done here ;-)
    return out;
  }

}

Yes! That works but just returns a dummy string right? Finally, I then realized that I needed some sort of container which I can then use to parse the result returned by the pipe and create the actual input elements then inject them into the DOM using Renderer2. So I needed to update my initial syntax. To use pipe-forms, you have to wrap it inside the ngx-pipeform component which will act as a renderer for the pipe-form. So the updated syntax looks like👇

Now let’s create the component that will serve as a wrapper for pipe-forms. Here is a brief on how it works.

It takes the result returned by pipeform pipe, then parses it.
Creates the input tag elements and then injects them into the DOM.

Here is what the code looks like. pipeform.component.ts

import {
  Component,
  ViewContainerRef,
  AfterViewInit,
  Renderer2
} from '@angular/core';

@Component({
  selector: 'ngx-pipeform',
  template: `<ng-content></ng-content>`,
})
export class PipeformComponent implements AfterViewInit {

  constructor(private viewRef: ViewContainerRef, private rd: Renderer2) {}

  ngAfterViewInit(): void {
    // after view init, lets get things done..
    // filter node type of text..
    // if text matches pipeform syntax, replace it with the input tag
    // the create the element and inject it into the dom with Renderer2.
    // lets travel through the DOM..
    this.recurseDomChildren(this.viewRef.element.nativeElement);
  }

  recurseDomChildren(start) {
    let nodes;
    if (start.childNodes) {
      nodes = start.childNodes;
      this.loopNodeChildren(nodes);
    }
  }

  loopNodeChildren(nodes) {
    let node;
    for (let i = 0; i < nodes.length; i++) {
      node = nodes[i];
      // try to parse each node..
      this.pipeFormParse(node);
      if (node.childNodes) {
        this.recurseDomChildren(node);
      }
    }
  }

  pipeFormParse(node) {
    // if the content of this node is a text node
    if (node.nodeType === 3) {
      // get its text content
      const textContent = node.textContent;
      // match the occurence of the pipe-form syntax, if found return an array of the result.
      const pipeForms = textContent.match(/\[\[(.*?)]]/gi);
      if (pipeForms) {
        // strip the double square brackets from all of the results.
        const readyElements = pipeForms.map(item => item.split('[[')[1].split(']]')[0]);
        // create a div container with Renderer2
        let elem = this.rd.createElement('div');
        // insert the prepaired input tag into the div.
        elem.innerHTML = readyElements.join(' ');
        // replace this current node with the new div node we just created.
        node.parentElement.replaceChild(elem, node);
      }
    }
  }
}

Cheers! It works 😂🍻, but there are still a lot of improvements, questions, and comments we need to go over. I will leave it for you to decide.

Example hosted on Stackblitz

Live demo on Stackblitz - https://angular-pipe-form.stackblitz.io/ Feel free to check the source code https://stackblitz.com/edit/angular-pipe-form

My Questions

It works, but does it worth the effort?
What does it cost, I mean performance in the production environment?
Does the syntax look a bit nicer or cleaner?

Improvements

Styling the pipe-forms.
Making it work with Angular Models, I haven’t attempted this.
Form validations, please!
Maybe a nice optimization of the DOM traversing logics.

Final Verdict

Very well 😉, My aim here is just to see if we can use pipes to create forms. Yes, we can! But is it a good approach? Isn’t this out of context of what pipes meant for? Amigo, I don’t know, was just trying out new ways to get things done. Express your thoughts in words as comments below.

Till next time! Peace out.💜

VS Code Tweet - A Twitter client one click away at VS CODE sidebar.

Victor Aremu — Thu, 21 Feb 2019 16:24:36 +0000

I just released VS Code Tweet - A Twitter client one click away at VS CODE sidebar⚡. Code, Tweet, and loop. 😂🤣
No more switching of windows while coding and trying to tweet, do it inside VS CODE🔥.

Get from VS Code market place
https://marketplace.visualstudio.com/items?itemName=ahkohd.vscode-tweet

Full walkthrough on how to setup
https://medium.com/@victoraremu/tweeting-from-your-favorite-text-editor-uhh-vs-code-tweet-94ad484fd7a5

Git Hub Repo
https://github.com/ahkohd/vscode-tweet

Search the web faster and smarter with Inline Search Chrome/Firefox extension

Victor Aremu — Sat, 24 Nov 2018 14:08:16 +0000

Recently I was reading an article on Wikipedia and I came across this word which I had no idea of want it meant, but I was too famished by the article which made me reluctant to open a new tab to search for the meaning. I can recall soliloquizing “do I have to open a new tab to do this”.

Spark, an idea just flashed in, why can’t I write an extension for Google Chrome and yes of course for Mozilla Firefox that can make me search stuffs with search engines without leaving the page. “Yeah for sure I would love too”, I said to my self as I continue to read the article.

After reading I headed up to Figma to make some design on the idea and after that a week rolled by as I eventually developed the extension.

Inline search an extension for Chrome and Firefox that allows you to use your favorite search engines on the fly without having to open new tab. Get to search Google, Wikipedia, Bing and Yahoo as quickly as possible, all you just need to do is highlight what to search and hit the shortcut.

Have a look at Inline Search in action while writing a post on medium.

Download Inline Search for Chrome

Download Inline Search for Firefox

Inline Search source code is available on Github for contribution. Thanks!