How to make your logo visible in the inbox with a BIMI record

I just heard of BIMI for the first time a few weeks ago. Most of the resources I can find are trying to sell DMARC management services. While these services are useful and valuable I was trying to figure out some rules of thumb to self manage my own DNS with regard to DMARC/DKIM/SPF/BIMI compliance.

First thing to note is that in order to get your email logo on the inbox, you need to comply with BIMI standards. That means you need to:

  • Create a BIMI record
  • Configure domain names
  • Configure DKIM & SPF
  • Create your DMARC rules
  • Monitor your DMARC
  • Lock down your DMARC

Set up your BIMI record

I have this step early in the blog because you can set it’s the simplest step. You won’t get the snazzy BIMI logo until you complete all of the steps.

Create an SVG version of your logo and upload it somewhere on your CDN or wherever you serve your images. You can probably put it in the same directory as the ubiquitous favicon.ico file.

Add a TXT record to your DNS that points to the newly uploaded SVG file.

default._bimi.acme.com

v=BIMI1; l=https://cdn.acme.com/_email/logos/acme-icon.svg

Configure your domain names

If you’re putting together your email system from scratch, (i.e. you work for a 1-10 person startup and you happen to be the devops guy) see other post for guidance on how to Setup your email domains and SPF records. This is a hairy process that IT people need to be involved with because it requires mucking with DNS and planning out how you will send emails in the future. Do it right early!

Configure DKIM & SPF for your domains.

In order to pass DMARC both your SPF and DKIM need to validate.

The SPF record means that you added the 3rd party services to your DNS, as described above.

The DKIM is a signature key that you share with your email sending service(s). These services will add the DKIM signature to the email headers of every message they send for you so that recipient ISPs can verify that emails that have your domain on it are coming from you.

In order to qualify for BIMI, you need to make sure the SPF and DKIM are “aligned“. For example, f you use Sendgrid, you should have sengrid in your SPF and sendgrid in the DKIM signature.

Create your DMARC rules

In order for your logo to show up on emails, your DMARC must be set to “quarantine” or “reject”.

Now, monitor the results of your DMARC (SPF+DKIM) configuration

Using a service such as Valimail, you can get reports of which domains and IP addresses are attempting to send mail using your domain names. If you recognize IP addresses or domains that are “failing” that should not be, then you need to check configuration of those services. In keeping with the Sendgrid example, if you are using them as your provider and you see a sendgrid.net in your “Mostly failing IPs” box then something is wrong with your SPF/DKIM DNS configuration.

Definitely a phish/spam/spoofer

Once DMARC you have quarantine on, and your SPF and DKIM are “aligned” your BIMI logo might start showing up!

I say “might” because not all email providers suppport the the BIMI standard. Anecdotally, as of 2020, I do believe Hotmail, Yahoo mail have logos in emails. Gmail has its own brand of JSON-LD syntax to jam logos into the inbox

Iterable recipe: inject data from a custom event into userProfile for email template

An email I’ve been working on needs to refer back to information from a previous event.

... TEMPLATE ...

Hi {{firstName}}, 

Thank you for watching {{title of movie I watched}}!

... RENDERED ...

Hi Jeff, 

Thank you for watching STRANGER THINGS!

The problem here is that the I wanted to reference the title of a video that was watched in the past within a blast email. This is not possible without saving the information somewhere in Iterable. In my case I decided to store the data on the user’s profile.

To save data from an event onto the user profile I use a workflow and the Change Contact Field node.

The event data might look like this:

{
    "eventName": "Video : Watched",
    "eventType": "customEvent",
    "email": "<EMAIL_ADDRESS>",
    "dataFields": {
        "video_title": "Stranger Things",
    }
}
  1. Create workflow
  2. Add node “change contact field”
  3. In the CHANGE CONTACT FIELD node define the data I want to save in JSON format.
{"video_title":"{{video_title}}"}
## (You should use better field names than this) ##

Now when the event comes through Iterable will replace the template variable with the new value on the user profile and thus making it accessible on any email template.

Here I can put the saved_program_title into the subject line or email template body using the Handlebars.

Podcast generic takeaways

As a long time wantrepreneur with a brutal commute I listen to a lot of podcasts about business, real estate, investing, and online marketing. Podcasts and books in these realms have common threads that I believe must be basic common traits for being “successful” at what doing what you want to do.

The best way to learn is to start doing it.

Most people never even try. Just start. Do little things. Get over the fear of failure. Trying and failing is better than not trying at all. Take “massive action.”

Basically every business related podcast mentions this fact.  BiggerPockets almost every episode. Grant Cardone for sure. Pat Flynn pretty regularly.

Learn from a mentor or coach.

On the Rich Dad Radio podcast Robert Kiyosaki of Rich Dad, Poor Dad pushes for people to get a coach constantly. Pat Flynn of Smart Passive Income frequently touts coaching as well. Yes they have some financial interest in persuading you to use their companies as your coach but you don’t have to use them. I’m starting to think it could be valuable to me. Tim Ferriss uses many coaches to be more efficient (not a shortcut!) when picking up new skills.

Network, network, network.

It doesn’t matter if you’re an introvert. Networking can be achieved online in your pajamas through forums, social media, and Facebook Groups. Face-to-face meetings are better but the point is that building honest relationships with people is fundamental to success. 

Give more than you receive.

Serving others well (especially helping out your network) will return 100x whatever time/energy/expense you put in. Karma. Don’t give with the expectation of something in return. This is basic human kindness but I think it does take some effort.

Limit number of php-cgi processes spawned by nginx

Here’s how to Mine was around here somewhere.

File was here

sudo nano /usr/bin/php-fastcgi

Original file looked something like this.

#!/bin/bash
/usr/bin/spawn-fcgi -a 127.0.0.1 -p 10005 -u www-data -g www-data -f /usr/bin/php-cgi

Added -C argument to enforce a limit.

#!/bin/bash
/usr/bin/spawn-fcgi -C 2 -a 127.0.0.1 -p 10005 -u www-data -g www-data -f /usr/bin/php-cgi

http://forum.slicehost.com/index.php?p=/discussion/3671/limit-number-of-php-cgi-processes-nginx/p1

I just got a notice from my VPS host that my box was using too much swap and therefore impacting other users on the machine. As such, my provider did a hard reset on my instance which summarily stopped my web app (I don’t start the app on startup. I should.)

I just upgraded my server a few versions up the Ubuntu chain because of the heartbleed SSL bug so obviously it was something related to the upgrade. I’m not super savvy with figuring out which components changed so I figured if I could just cut back on the memory usage things wouldn’t go to swap. My server is running an app and a couple of old Drupal blogs that don’t get much traffic but I like to keep around for nostalgia. So, I figured I could sacrifice substantial performance on the blogs.

Things I changed to hopefully save memory:
/etc/mysql/my.cnf
* reduce max_connections to 50 from Not specified.

/etc/php/cgi/php.ini
* reduce memory_limit from 128M to 64M

/usr/bin/php5-cgi
* add “-C” flag to constrain number of processes to 3. (default was 5)

The php5-cgi change by far had the largest affect because each php5-cgi process was using 25MB per thread (~125MB, or 50% of my 256MB VPS).

HTML Email: Image height is 1px high for Gmail in IE10

Lately I have had to redo some of the HTML emails. We had an outside contractor do most of the work and he did a fantastic job. However, I was noticing that under a very specific condition, the email images were not rendering properly in desktop Gmail on Internet Explorer 10. I have no idea how many people are using GMail+IE10 but since this is our first real contact with the user, I though it would be important to ensure the best user experience possible. Broken images are not a good experience.

Here is the problem:
Email image poorly rendered

Old HTML

<img class="imageScale" 
style="display: block; width: 550px; height:auto;" 
width="550" height="auto" src="{{ img_url }}" 
border="0" />

New HTML

<img class="imageScale" 
style="display: block; width: 550px;" src="{{ img_url }}" 
border="0" />

Final outcome:
email-good

Why does it fix it?

I came across a couple of quirks at play in this porblem.

First, I learned that GMail automatically converts CSS height attribute to min-height with reckless abandon.

Second, the original HTML IMG tags have height:auto. With GMail’s reckles height conversion it becomes min-height:auto which essentially means 0px or 1px.

To solve, I removed height attributes on the img tags. It turns out that all of the browsers will automatically just render the image at full size of the parent container. In this case we have a series of nested tables that set maximum width of the parent to about 550 and the minimum width is 100% of screen width.

Delete old iOS backups to reclaim disk space

source:apple.com

source:apple.com

Just yesterday Apple released a critical patch that fixes a major security flaw. That Mac OS update required 3GB free on my machine.  That’s trouble! I have an older MacBook Air with a 128GB hard drive so I’ve been hovering with under 2GB of available disk space for a long time.

Even after some aggressive spring cleaning of Applications and old file attachments I still did not have enough disk space for the Mac OS update. At this point it dawned on me that I had recently  used iTunes to setup a new iPad that I bought and all the apps autmatically synchronized onto the new iPad without downloading anything. All that data must be stored somewhere.

So, I had to find out where iTunes keeps its backups. A cursory Google search found Apple iOS Backups which reveals that iOS backup files are housed in ~/Application Support/MobileSync/Backup for Macs. Sure enough, my mobile backup folder had 4 subfolders hogging up 20GB(!) of disk space. Since we only have 2 iOS devices in the house it was clear that iTunes still had backups for an old iPhone 3GS that I had given to my mom.

The folders contain encrypted iOS backups so I didn’t know which folder corresponded to each of my devices. Consequently, you have to delete your unwanted iOS backups using iTunes. The instructions “Deleting a Backup in iTunes” show that you can delete backups in iTunes >Preferenes > Devices.

Clearing out the old iOS backups gave me back 10GB of hard drive space! I haven’t had this much free disk space since I bought this laptop 3 years ago.

 

Working on a real iOS app.

As a personal endeavor I’m trying to make an iOS app. Making a native app for iOS has been on my to-do list for at least 2-3 years but I could never figure out the Objective C language and I haven’t done a lot of object-oriented programming. With newfound determination I have been trying to learn this stuff when I have downtime at work. I’ve had a lot of downtime lately so my learning progress has been good!

Things I’ve been skimming through:

Stanford undergraduate course on iOS through iTunes U (Not Recommended)

I started off trying to learn iOS by following Stanford University courseware via iTunes U. I thought “hey, Stanford is a great school. This should inspire me.” Big mistake — I despised computer science lectures when I was in college 10 years ago and evidently I still hate them. The first few lectures were long-winded and impractical for the purposes of building a simple app.

Big Nerd Ranch Guide (2012)

Big Nerd Ranch guide proved useful for understanding some fundamentals of Objective C. It’s densely written and some of the chapters are difficult to parse in my head. This is slightly easier to deal with than a boring iTunes U lecture but it has heavy reliance on extending code in preceding chapters so you cannot jump around from chapter-to-chapter to pick what you need. I would prefer a just-in-time piecemeal approach.

Beginning iOS 6 Development (Apress, Jan 2013)

This book is written more simply than Big Nerd Ranch. I ran through the first few chapters and finally understood the workflow of using XCode to create the UI by linking buttons to actions and code. Understanding XCode was a major breakthrough for me. The first handful of chapters are useful because the examples are step-by-step and do not depend heavily on using code from previous examples.

Apple’s documentation (horrible)

Large swaths of Apple’s iOS documentation and example code is outdated. However, I slogged through some of the examples to help understand some of the components that are not discussed in the other 2 books.

Various web tutorials

As you would expect this day in age, there are tons of video tutorials on the web, YouTube and other content authors who blog about learning iOS on their own. These are often helpful. The problem with these tutorials is that many of them are for older versions of XCode and iOS. Working with iOS has apparently changed quite substantially over the years because the code samples can often look completely different from modern stuff. I’m sure the recent release of iOS 7 makes this truer than ever.

Stack Overflow

Whenever I run into  issues Stack Overflow has the answer 97% of the time. Long live SO!

Make a media player – http://www.codigator.com/tutorials/how-to-make-a-custom-ios-music-player/

Understanding the design of the Angular JS framework

AngularJS Logo

 

I’ve been trying to figure out Angular JS for a little while but I don’t have a deep understanding of software engineering patterns or practices. My theory is that I haven’t been able to figure out the framework because I don’t understand the theory behind Angular’s design. The documentation on the website is thorough yet written like an engineering manual. It uses a lot of CS jargon that will explode your brain into a million pieces.

Here are some resources that helped me understand the “why” of Angular.

Angular JS Directives

  • AngularJS directives and the computer science of JavaScript [Adobe]
  • a directive is a way to  provide some custom behavior HTML. Commonly at the element or attribute level
    • <mydirectivelement> <span mydirectivename="">.
  • Directives are like jQuery plugins – they are reusable UI components/widgets. Examples
    • autocomplete search box
    • dropdown menu
    • header toolbars
  • Directives can be used as building blocks to create a UI. Use directives liberally.
  • Separate your view code out using templateUrl instead of template inline if your HTML is going to be more than just a single line.
  • When creating an reusable component use an ‘isolate‘ scope so that the component will not read or modify data of the parent scope.
  • ‘isolate’ scope will isolate (verb) the component from others of the same type. Thus they will not share the same instance variables.
  • question… Do ‘isolate’ and ‘transclude’ contradict each other?
    • Answer: No. Isolate and Transclude are unrelated. Transclude allows you to have HTML within your directive that will be preserved rather than being blown away when Angular replaces the directive’s placeholder with the actual rendered template code.
    • Angular JS Transclusion Basics video tutorial [egghead.io]

The Angular  documentation for directives is incredibly hard to understand. I do have a CS degree and I don’t understand half the terminology in it. Probably because I did poorly in school but that’s a story for another day.

Angular Service vs Factory vs Provider?

  • Angular service or factory? [iffycan]
    • service and factory are convenience functions that result in a provider
  • Angular JS service vs factory vs provider [Stack Overflow]
    • service returns a function that you can use later
    • factory returns a value
    • provider is the base class of the above 2 convenience functions.
  • provider is configurable.
    • In jQuery terms it’s similar to how $.get() and $.post() are convenience functions to $.ajax(). $.ajax() can be configured to your exact specifications while the 2 subclasses are simpler to use.

Read Example Code

Angular Seed [github] is a very good starting point for your app. The Angular JS documentation website links to the source on github but the documentation does not push using the seed quite enough. I did not notice the Angular Seed for a long time while I was trying to understand how to use the framework .

Angular JS FoodMe [github] App by Igor Minar is a fully functioning Angular JS using best practices. This project is built off the Angular Seed. When you look at FoodMe and Angular Seed you will notice some commonalities. Studying FoodMe and Angular Seed together made things more salient for me.

Angular JS ToDo MVC [todomvc/github] has four variations of how Angular JS can be used to create a basic To-Do list application. I suggest looking at either the Architecture example or the Optimized example.