Excel Send to Trello

Well, that was fast. My latest add-in is published. Excel Send to Trello.

As per my previous post, the thing I found most interesting was how Excel full client seems to fail if you configure your server .htaccess file to prevent caching. Well, I found out that my Outlook Send to Trello add-in actually had the same problem too. The Outlook client just happened to refresh this morning and my icon disappeared there too. In Office online it seems to work, but in the full client you cannot seem to force the client to NOT cache. I see my files all pulled down locally in the Wef folder and my concern is that when I update the add-in it will not go get the latest every time… I have actually seem and beat my head over this problem a few times. But the solution there for anyone working on a BETA site for example making changes and all of a sudden the full-client stops refreshing your updates, this is a good article to keep handy.

But when Wef strikes in production, I have found customers are not so excited to blow away this folder and find all their add-ins, preferences, stored cached credentials and other goodies for each and every add-in are gone. Ergo why I added the no-cahce to the .htacess. Oh well. 🙁

Also, just to share something else as I am delving more and more into publishing add-ins for real. As an Office Developer, in the traditional sense (aka boomer 😛, VBA/VSTO/COM), there are aspects of living in an HTML web world that I still learning (although this is an old one it comes up now and again because I forget something).

You have to worry about various attack vectors and sanitizing HTML strings. There are LOTS of libraries and solutions out there and Mozilla even has documented a possible standard supported in several browsers, but not all. It is a tricky thing because some sanitizers do too much or not enough, and then you also rely on a dependency which has now burned me more often than just owning things that might be a hundred lines of code for my own common library of goodies.

So, I have created my own based on various library implementations, and found the best option is to escape most of the stuff you find “injected” rather than remove it.

/**
* Sanitizes the string for possible malicious values
* @param {String} string
* @returns {String}
*/
static sanitizeString = (string) => {
try {
string = string.replace(/(javascript:|onerror)/gi, "");
string = string.replace(/undefined/gi, "");
string = string.replace(/<script/gi, "&lt;script");
string = string.replace(/<iframe/gi, "&lt;iframe");
string = string.replace(/<object/gi, "&lt;object");
string = string.replace(/<embed/gi, "&lt;embed");
string = string.replace(/<applet/gi, "&lt;applet");
string = string.replace(/<form/gi, "&lt;form");
string = string.replace(/<meta/gi, "&lt;meta");
string = string.replace(/<link/gi, "&lt;link");
string = string.replace(/<a\s/gi, "&lt;a ");
string = string.replace(/<img\s/gi, "&lt;img ");
string = string.replace(/="/gi, "&#x3D;&#39;");
string = string.replace(/='/gi, "&#x3D;&#39;");
string = string.replace(/=`/gi, "&#x3D;&#x60;");
string = string.replace(/\/>/gi, "&#x2F;&gt;");
return string;
} catch (e) {
return `[[SANITIZED STRING MALFORMED: ${e}]]`;
}
};

The important thing is that in the web world, anytime you take data from one service to another, or take input in a field, or grab input from some element on a page and insert it back into another element in your code, there is a hack waiting to happen if you do not sanitize.

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.

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.

New Trello Power-Up: Board Wiki

I just completed another Power-Up for Trello, called Board Wiki.

I have really taken to using Trello to help organize many aspects of my life and one area that kept annoying me was that I always had to have a card setup on various lists for “meta” information or things like my weekly, quarterly and yearly plans (see Cal Newport). After thinking about it a bit, I realized since it makes sense to keep all this in one place, why not have a wiki to capture this, so this new Power-Up was created.

Trello Board Wiki Power-Up

I have now created several Power-Ups a couple Office Web Add-ins and just published (still in review) an Edge Extension. To see everything I have published, check out my website.