Musings of a dad with too much time on his hands and not enough to do. Wait. Reverse that.

Tag: miscellany (Page 4 of 8)

Coding Google Apps Script

Like most people, I use a great many of the free applications provided by Google. Unlike a lot of people, I like to occasionally collect data on how I’m using some of these applications, especially Gmail.

Unfortunately, there do not appear to be easy ways to collect usage data from Gmail; however, Google does provide a scripting platform, Google Apps Script, that allows you to code against Google’s various APIs and get at most of the data you might be interested in.

Recently, I found myself interested in analyzing the categories of email coming into my inbox. How could I collect simple email properties like date, subject line, and category and write the results to a CSV for further analysis?

Step 1: Launch a new spreadsheet

Navigate to Google Docs in your browser and launch a new spreadsheet. This tutorial was excellent help.

Step 2: Launch the script editor

Following that tutorial, open up a new instance of the Script Editor under the Tools menu. This step is pretty important because it seems to “bind” your scripting work to the new spreadsheet. Initially, I simply started a new scripting project in Apps Script apart from any spreadsheet and found no way to get that work to write to any of my spreadsheets.

Step 3: Code away

In this endeavor, my goal was pretty simple: grab particular email metadata and write the data to a spreadsheet. This required me coding against both the GmailApp API and the Spreadsheet API. Here’s the code I ultimately came up with (I believe this is vanilla JavaScript):

function write_gmail_stats() {
  //get reference to active spreadsheet
  var sheet = SpreadsheetApp.getActiveSheet();
  // get collection of email categorized as "promotions" sent after 31 Mar 2020
  var promos = GmailApp.search('category:promotions after:2020/03/31');
  //iterate through the email collection and write date, subject, and category to spreadsheet
  for (var i = 0; i < promos.length; i++){
    var m = promos[i];
    var d = m.getLastMessageDate();
    var s = m.getFirstMessageSubject();
    sheet.appendRow([d, s, "promotions"]);
  }
  
  var social = GmailApp.search('category:social after:2020/03/31');
  //iterate through the email collection and write date, subject, and category to spreadsheet
  for (var i = 0; i < social.length; i++){
    var m = social[i];
    var d = m.getLastMessageDate();
    var s = m.getFirstMessageSubject();
    sheet.appendRow([d, s, "social"]);
  }
  
  var primary = GmailApp.search('category:primary after:2020/03/31');
  //iterate through the email collection and write date, subject, and category to spreadsheet
  for (var i = 0; i < primary.length; i++){
    var m = primary[i];
    var d = m.getLastMessageDate();
    var s = m.getFirstMessageSubject();
    sheet.appendRow([d, s, "primary"]);
  }
}

This code will take the date, subject, and category name of the three default categories in Gmail and write the results to my spreadsheet. To keep my results modest, I crafted a search query to only look at email from April (this support page was very helpful in figuring out the query I needed). The results worked out pretty well:

Sweet! This certainly beats screen scraping or manual data collecting.

Fun with SVG

Andrew Wang-Hoyer’s work of just SVG and CSS

This amazing collection of SVG animations really piqued my interest the other day. Andrew has over 200 of these on his site with the code on his Github page. This work is so cool, I decided to take a crack at it:

(Sorry, but the only way I could figure out how to get this HTML to appear in the blog page without messing up the rest of the page is through the dreaded iframe tag.)

In any event, I certainly pose no threat to Andrew, but SVG is hard! Here’s the code I came up with for this gem:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href='https://fonts.googleapis.com/css?family=Dekko' rel='stylesheet'>
    </head>
    <svg
    preserveAspectRatio="xMidYMid meet"
    version="1.1"
    viewBox="0 0 50 10"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="water-color" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:white;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#add8e6;stop-opacity:1" />
            </linearGradient>
        </defs>
        <style>
            /* <![CDATA[ */
                .logo-frame {
                    border-bottom: solid black .2;
                    fill: url(#water-color);
                }
                .logo {
                    font: italic 6px 'Dekko';
                    fill: white;
                    stroke: black;
                    stroke-width: 0.2;
                    font-stretch: semi-condensed;
                }
                @keyframes water-line {
                    0%  {transform: translateX(0px)}
                    25% {transform: translateX(0.5px)}
                    50% {transform: translateX(-0.5px)}
                    100%{transform: translateX(0px)}
                }
                .water-line {
                    stroke: #add8e6;
                    fill: transparent;
                    stroke-width: 0.1;
                    animation: water-line 10s linear infinite;
                }
            /* ]]> */
        </style>
        <rect
            class="logo-frame"
            x="1.0"
            y="3.0"
            height="6"
            width="46"
        />
        <text x="1.5" y="8" class="logo">DadOverflow.com</text>
        <path d="M 1 2 C 1 3, 5 3, 5 2 C 5 3, 9 3, 9 2 C 9 3, 13 3, 13 2 C 13 3, 17 3, 17 2 C 17 3, 21 3, 21 2 C 21 3, 25 3, 25 2 C 25 3, 29 3, 29 2 C 29 3 33 3, 33 2 C 33 3, 37 3, 37 2 C 37 3, 41 3, 41 2 C 41 3, 45 3, 45 2" class="water-line"/>
    </svg>
</html>

Figuring out that water line “path” was especially hard, but once I figured out the first wave or two, the rest weren’t too difficult. I get the impression that a lot of SVG developers use tools like Adobe Illustrator to solve those problems in easier ways. Here’s another cool post I found animating SVG with CSS. Take a look at both posts and get animating on SVG today!

Dark Mode

On my workstations and phone, I’ve been trying to switch my applications over to “dark mode” themes where, instead of black letters on bright white backgrounds, you get white letters on dark backgrounds. This color change just seems to feel better on my eyes.

On the more recent versions of Windows 10, switching to dark mode is pretty easy. What’s nicer still is that many applications–like Firefox, Chrome, and Windows Explorer–will simply inherit that dark mode setting from the operating system, so you don’t have to go hunt around in the settings of these applications individually.

On my Android phone, many applications are also beginning to provide dark mode options and, for my background wallpaper, I simply used Zedge to find a free, dark space image to complete the theme.

Give dark mode a try on your devices and see if it helps reduce the strain on your eyes!

« Older posts Newer posts »

© 2024 DadOverflow.com

Theme by Anders NorenUp ↑