Creating an email censoring filter in Vuejs

This is a neat little function you can use as a filter in Vuejs to partially censor emails so for instance myemail@example.com will show as m****l@e*********m. In other words, show the first and last letter before and after the @ delimiter.

filters: {
    censorEmail(val) {
        try {
            let arr = val.split("@");
            let wrd = arr[0][0] + "*".repeat(arr[0].length-2) + arr[0].slice(-1);
            let wrd2 = arr[1][0] + "*".repeat(arr[1].length-2) + arr[1].slice(-1);
            return wrd + "@" + wrd2;   
        } catch (error) {
            return "Not a valid email";
        }
    }
}

There’s not really any validation for a proper email address happening, we just check if the input value contains a @. If not, it simply returns “Not a valid email”.

v-model in child components

If you’re having trouble using v-model for input elements in child components then welcome to the club. Here’s a quick way to solve it by using $emit to pass data back to parent:

App.vue:

<ChildComponent 
    v-bind:myvar="myvar"
    @myfunction="myfunction"
/>

<script>
export default {
    name: "App",
    components: {
        ChildComponent,
    },
    data: function() {
        return {
            myvar: "foo"
        }
    },
    methods: {
        myfunction(val) {
            this.myvar = val;
        }
    }
};
</script>

ChildComponent.vue:

<template>
    <input :value="myvar" @input="$emit('myfunction', $event.target.value)">
</template>

<script>
export default {
    name: 'ChildComponent',
    props: {
        myvar: String,
    }
};
</script>

Idle Mobster – Simple game made in Vuejs

So to learn Vuejs I decided to make a simple idle game. You know, one of those games that kinda plays itself by upgrading stuff and increasing your income etc.

This game is inspired by the old school mafia text-based browser games, so you’ll find the usual stuff like petty crime, upgrading weapons and managing businesses.

Current state of the game is very simple and there’s no prestige system implemented yet, but I have many features planned ahead. It’s still a work in progress, but I released it on itch.io (which is also my first time so learning by doing):

The code will eventually be available at my github site (probably github.com/kek91/idle-mobster (will update this post when it’s published).

Format number in Javascript for Integer and Float types

I was stuck trying to format a Number variable when creating an output filter in Vuejs.

Originally I used

filters: {
    filterNumber(val) {
        if(typeof(val) == "number") {
            return new Intl.NumberFormat().format(val);
        }
        return val;
    }
}

That will output a number like “123456” as “123 456”. But I also want it to skip decimals. Using .toFixed(0) doesn’t work as that only accept Float variables. Casting the Intl variable to Float using parseFloat() around it didn’t work either.

The solution was to use .toLocaleString() instead, like this:

filters: {
    filterNumber(val) {
        if(typeof(val) == "number") {
            return val.toLocaleString('US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
        }
        return val;
    }
}

Custom button in WordPress navigation for opening prompt() and mailto event

This is a neat little trick you could to do spice up the administration experience for your customers if you sell websites using WordPress as CMS.

First of all you’re gonna have to add a new entry/link in your admin sidebar. To do this, you could use a plugin such as Admin Menu Editor or code it manually through your theme functions.php file by following this instruction.

Now for the exciting part. In the URL for your menu/sidebar link, you’re going to use an inline javascript function which fires a prompt() dialog which shows some general contact information, in addition to actually firing a mailto() event if the user clicks OK.

Paste the following code as the target URL for your link. Remember to edit the text/mail/phone etc. \n just means a newline to make it look a little better. After all, this is just an ugly javascript prompt dialog, not some sexy bootstrap dialog. 

javascript:(function(){
    let subj = prompt("Hi! Contact us at\n\nEmail: support@company.com\nTelephone: 123 45 678.\n\nEnter subject below and press OK to send us an email.\n","Issue regarding WordPress");
    if(subj) { window.location.href = "mailto:support@company.com?Subject="+subj+""; }
})();

Once that’s done, refresh your admin panel and it could look something like this:

For more inline javascript bullshittery you can take a look at this browser bookmark which appends stupid emojis all over the website.

Javascript bookmark function to add emojis to website ?

After fiddling around with some DOM manipulation I figured an emoji generator would be fun…

Add a new bookmark to your browser and paste the following code into the URL target:

javascript:(function(){
    const c='&#128512;';
    let domh= document.getElementsByTagName('h1');
    let domp= document.getElementsByTagName('p');
    for(let i=0; i<domh.length; i++) {
        domh[i].innerHTML+=c
    }
    for(let i=0; i<domp.length; i++) {
       const s='<span style="font-size:'+Math.random()*1000/5+'px;">';
       const se='</span>';
       domp[i].innerHTML=s+c+se+domp[i].innerHTML+c.repeat(i);
    }
})();

 

Quick explanation:

First of we define the emoji (&#128512;) in the c variable.

Then we scan the website for every h1 and p tags.

For every h1 tag we append the smiley.

For every p tag, we prepend the smiley in a random size by using inline span and styling, then we append a few more smileys at the end.

 

This is really stupid, but it’s just a quick demonstration that Javascript functions in bookmarks can be used for many useful things. For instance I have one shortcut which opens a prompt() where I enter a Dell servicetag, then it redirects me to the Dell website to check ProSupport warranty.

 

Here’s a pic of this website destroyed by stupid emojis:

 

jQuery serialize empty result on bad HTML form

TIL that jquery’s $('#someform').serialize(); will output nothing if there’s a syntax error in the form HTML markup.

I actually added a parameter to a <select> field, so it looked like <select type="type" name="type"> , obviously I wasn’t paying much attention because type="type" shouldn’t be there at all. As soon as I removed that parameter jquery serialize would work as intended again.

hours_spent_debugging_pebkac += 1;

Quickly turn any HTML file/site into a desktop app

Step 1: Locate your chrome.exe application

Copy the full path to your Google Chrome executable, for example:

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

Step 2: Create a new shortcut on your desktop

Enter the following as the shortcut target:

"path/to/chrome.exe" --app=file.html

Examples

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" -incognito --app=https://it-db.com

This will create a shortcut to open Google Chrome in “Desktop app” mode (no URL bar or menus etc) and point to the url after the --app= parameter.
The -incognito isn’t neccessary, just for showing the possibility.

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --app=C:\Users\kek\Downloads\cyberchef.htm

Same as above, but this will open a local file on my computer (cyberchef.htm) as a desktop app.

You could even distribute apps as single compressed html files and a corresponding shortcut, as long as the user has Chrome installed and you can figure out the chrome.exe path. Then you’d never have to go through the hassle by using Electron and compile it as an .exe.