Inline (a)Wait for JavaScript Constructors

I have been working on some new code and found a need to make a series of calls to server-side PHP, where it would process data in a MySQL database, munch on some data and then return a result. I wanted to perform this operation inside a class constructor, so I could essentially do something like this:

const myObj = new MyClassToCallTheServer();
let someValue = myObj.doSomegthingWithTheServerData();
view raw inline1.js hosted with ❤ by GitHub

The problem is that a constructor in JavaScript cannot be declared async and you cannot place an await on your server call. So, something like this fails:

export default class MyClassToCallTheServer {
#internvalValue = null;
constrcutor() {
// this.#internalValue = await this.#callTheServer(); <– the await will fail to compile
this.#internalValue = this.#callTheServer();
}
doSomethingWithTheServerData = () => {
// the #internalValue is still null becasue we could not await in the constructor
return this.#internalValue;
}
#callTheServer = async() => {
// imagine some code here with a fetch command…
return serverData;
}
}
view raw inline2.js hosted with ❤ by GitHub

To get around this, I learned a new trick, so I thought I would share:

export default class MyClassToCallTheServer {
#internvalValue = null;
#loading = false;
constrcutor() {
this.#internalValue = this.#callTheServer();
}
doSomethingWithTheServerData = async () => {
while(this.#loading) await new Promise(resolve => setTimeout(resolve, 10));
// the #internalValue is not null because we waited
return this.#internalValue;
}
#callTheServer = async() => {
this.#loading = true;
// imagine some code here with a fetch command…
this.#loading = false;
return serverData;
}
}
view raw inline3.js hosted with ❤ by GitHub

Small modification to the original code above and done:

const myObj = new MyClassToCallTheServer();
let someValue = await myObj.doSomegthingWithTheServerData();
view raw inline4.js hosted with ❤ by GitHub

I threw post this together fairly quickly, but hopefully it makes sense. ☺️

Outlook Signature Add-in

I recently got a question about this add-in created as a sample by the Microsoft Office Developer Team. It is provided as a sample and is a challenging bit of code to follow. It all started because I was trying to provide some advice to someone who is new to the OfficeJS world (but not Office development in general). They wanted to build a cross-platform add-in for a cause. After tinkering with it for a few hours, I managed to get it to work. But then I looked it over and it was quite a bit of tinkering on my part.

In most cases I create Add-ins based on React, but because I have done a lot of Trello development of late, I have gotten into more of a pure ES6 vibe. The code provided in the add-in as I stated was hard to follow because I think I am losing my jQuery and ES5 JavaScript skills.

Anyway, as I said, I spent a few hours today and worked on getting it into ES6 format by moving most of the code into classes, removing redundant code, removing redundant HTML pages, consolidating CSS and adding a lot of additional JSDoc comments throughout the code.

Hopefully, this version is a bit easier to follow for those that develop in a more modern ES6 style.

NOTE: This looks and behaves exactly the same, but I have not thoroughly tested it. So, it might be a bit rough here and there. If you encounter issues please let me know. 😁

Card Priority Badge Makes Top List

A popular annual list of top installed Trello Power-ups (Blue Cat Reports) has called out one of my Trello Power-Ups for its quick growth. At less than a year old is already have over 5000+ active installs.

See the article here: https://www.bluecatreports.com/blog/power-up-stats-2022/

Install Card Priority Badge here: https://trello.com/power-ups/622beeb83f53e80ce0e50001

See all my Power-Ups here: https://kryl.com/?page=/trello

Outlook Calendar for Trello is Released

I have really enjoyed writing this bit of code because it stretched from Trello API to Office 365 API, two of my favorite programming interfaces. This Power-Up is similar to the default Trello Calendar Power-up, the key difference being is that it connects to your Outlook Calendar. So, you can see all your Trello Tasks and your Outlook appointments/meetings, side by side in one place, you can link your appointments to Trello cards and vice-versa. With a month view and a weekly view, you can manage your calendar easily by dragging and dropping your Trello Cards on the calendar to create linked appointments for specific tasks all in one place.

Check it out here:

https://trello.com/power-ups/637307154b117e05a423c8a1

Determine MIME type from base64

In writing my new Outlook Add-in (Send to Trello), I got stuck on attachments. The first version did not include an attachments option because of two unique problems that compounded each other:

  1. The Office Add-in API no longer provides a Media Type/MIME Type with an attachment request. I am able to get the “blob()” from Office, but other than the file extension there is not a way to determine the type. But sometimes a file does not have an extension, or the extension is wrong, etc.
  2. The Trello API will not let you upload without supplying a MIME type, you cannot just give it a Base64 string as an attachment and let them figure it out.

So, I found out something interesting while researching a workaround. Most every base64 string of a specific file type starts with the same “prolog” of text. Using this, combined with the fallback of the file extensions, I was able to get attachments to work (for the attachment types supported by Trello). So, v1.02 will now include attachments.

Anway, as for the workaround I found, this might be ugly, but wanted to share it anyway:

/**
* Returns the data type based on the base64 string
* @param {String} base64String
* @param {String} fileName
* @returns {String}
*/
detectMimeType(base64String, fileName) {
var ext = fileName.substring(fileName.lastIndexOf(".") + 1);
if (ext === undefined || ext === null || ext === "") ext = "bin";
ext = ext.toLowerCase();
const signatures = {
JVBERi0: "application/pdf",
R0lGODdh: "image/gif",
R0lGODlh: "image/gif",
iVBORw0KGgo: "image/png",
TU0AK: "image/tiff",
"/9j/": "image/jpg",
UEs: "application/vnd.openxmlformats-officedocument.",
PK: "application/zip",
};
for (var s in signatures) {
if (base64String.indexOf(s) === 0) {
var x = signatures[s];
// if an office file format
if (ext.length > 3 && ext.substring(0, 3) === "ppt") {
x += "presentationml.presentation";
} else if (ext.length > 3 && ext.substring(0, 3) === "xls") {
x += "spreadsheetml.sheet";
} else if (ext.length > 3 && ext.substring(0, 3) === "doc") {
x += "wordprocessingml.document";
}
// return
return x;
}
}
// if we are here we can only go off the extensions
const extensions = {
xls: "application/vnd.ms-excel",
ppt: "application/vnd.ms-powerpoint",
doc: "application/msword",
xml: "text/xml",
mpeg: "audio/mpeg",
mpg: "audio/mpeg",
txt: "text/plain",
};
for (var e in extensions) {
if (ext.indexOf(e) === 0) {
var xx = extensions[e];
return xx;
}
}
// if we are here – not sure what type this is
return "unknown";
}

New Outlook Add-in: Send to Trello

I have been using Trello for a while now and one of the features I have found most useful is to take an email I received and turn it into a Kanban item on my backlog to address later. This allows me to archive the email but keeps it on my “Trello radar” as I work at my own pace through my personal backlog.

Recently, Trello removed their add-in from the Microsoft Office store. If you have the add-in installed, you will see this error:

Well, since they say necessity is the mother of all invention and I really had to fill the gap as it is part of my routine, I rolled my own. 🤓 To add a degree of difficulty, I wrote this in VS Code in Linux running in Windows Subsystem for Linux (WSL). See my previous post. It was a fun exercise as I am on vacation and using the time tom learn new things, engage in self-improvement and relax (coding is relaxing to me 🤓🤓🤓). In the end, I learned something and created something for everyone to enjoy.

Say hello to the recently published: Send to Trello Outlook Add-in.

Give it a try and let me know what you think.

Developing in Linux on Windows

I have been working more and more with Linux lately. The job as a Program Manager has put some of my skills to the test. Oddly, I actually taught a semester of Linux back in my “college professor days.” And despite the kicking and screaming, funny enough, I am close to becoming a novice beginner at it.

Last year, I took the deep dive, spending nearly 100% of my personal time in Linux – command line and UI wise. I had an Ubuntu VM in the cloud that I worked with and repurposed on one of my old laptops with a distro of Elementary OS (essentially a MacOS like shell on top of Ubuntu).

Well, recently, I have been playing about with the Windows Subsystem for Linux. In the early days this was what I called a novelty. You could open a command prompt and start bashing out Linux commands and feeling totally geeky 🤓. However, recently, I found that you can now run Linux Applications in a window from Windows 11. This was a bit of a game changer, as now I can run Linux and Windows (side-by-side).

So, I just got through developing and testing an Office JS add-in (which I just published to the store) from Linux using VS Code and Microsoft Edge. It will hopefully be released soon, and I will blog it here (Send to Trello for Outlook Add-in).

Here is how I did it:

  1. First, I would suggest installing Windows Terminal. I can spend a whole blog post on this and might, but it allows you to run CMD, PowerShell and BASH all side by side in tabs. It is awesome.
  2. Open Terminal and install WSL. From a PowerShell tab type “wsl –install”. By default, this will put Ubuntu 20 (behind the scenes) on your system.
  3. Once installed and you restart the Windows Terminal App, you should see Ubuntu as an option for opening a new Tab.
  4. Select that. If it is your first time, you will need to supply it with a username and password.
  5. Once setup, you simply need to start installing apps:
    • Type: “sudo apt update” to start updating the apps, this is like “Windows Update” for Linux.
    • Next, type: “sudo apt install x11-apps -y” to get the basic software installed.
    • Next, you will want to install Microsoft Edge:
      • To install Edge use the code from this page: https://www.microsoftedgeinsider.com/en-us/download?platform=linux-deb (scroll down past the ‘download’ links).
      • Before you run it, you will want to type: “sudo su” and sign in. This signs you in as SUPER USER so that you can do things as an administrator.
      • After it is installed type “exit” to return to normal user mode.
    • Finally, install VS Code, like this: in the Terminal Window, type: “microsoft-edge” which will open Edge. From there go to Bing, search for “install VSCode on Linux” and it should not be too difficult to follow the steps you find. But to help out a bit… 😊 Follow the steps for Ubuntu, here: https://code.visualstudio.com/docs/setup/linux.
  6. Now you can type “code” in the Linux command prompt and VSCode for Linux will open in a separate window. From there you can build your application and test it in Edge for Linux as well. That is what I did.

The coup-de-grace, it places these applications right on your START menu:

So, a friend asked me…”Uh, so.. like.. why?” I answered, “Uh… Because, I can!” 🤓

It has been a fun journey, learning something new and as it turns out, it has come in handy quite a few times in the new role as different aspects of the system we are developing cross paths with Linux. I also have a sneaky suspicion that this Windows/Linux integration lines are going to get a bit more “blurred” in the coming years (100% personal opinion).

Yeah! A Trello Type Definitions File

To date I have created four Trello Power-Ups that I use every day to fill a gap that I need in order to scrum my life’s “backlog.” I was first turned towards Trello when I read Deep Work by Cal Newport. Since then I created:

Each time I created a Power-Up, I found myself going back to the documentation over and over again for the most trivial items. So, I finally sat down and hacked out a type definitions file based on the existing Trello Power-Up Documentation.

You can find all the information about the type library I created here:

https://github.com/davecra/Trello-Power-Up-TypeDefs

New Trello Power-up: Demote a Card

Continuing to use Trello I found a need to take cards that had been sitting around a while and put them in a place other than Archive (and forget them). What I had been doing was copy/pasting them in checklists in another card and as needed taking the check list items and promoting them back to a card. However, after performing the manual process (which could take a lot of time) enough times, I decided it was time for another Power-Up. So, I created the Demote a Card Power-Up:

https://trello.com/power-ups/630d74e4e1bab6013d6c1160/demote-a-card

Also — while building this Power-Up, I also got a tad frustrated that there was not any IntelliSense code assistance from the Trello Library. So, I build one in JSDOC and will likely be publishing that on GitHub soon. Not sure how many other developers there are out there that write Power-Ups, but my hope is it might be useful.

Trello Writers Block – Browser Extension

I have been in full-bore developer mode of late, trying new things and writing a lot of code. One area I thought I would give a try is browser extensions. I find myself wanting to tag pages so that I can reference them later in something I am writing or working on. And because I like to store information in Trello, I wanted something that combined both. So, here is an extension I created that will do just that. It takes the page you are on and then creates an MLA or APA reference and then adds it to a card in Trello for you.

I published this to both the Microsoft Edge and the Google Chrome store:

The following screen shots show you what it looks like when you are using it:

Extension in action on my website.
The card once it is added to Trello.

This browser extension is useful if you are a student writing a paper (supports MLA and APA formats), an author writing a book, or a blogger or someone doing research and keeping track of references using notecards. Because Trello is a digital version of notecards and it is available everywhere and stored in the cloud, you don’t have to worry about the dog eating your homework. 😱

Add it to your browser and let me know what you think.