jeremy laskar

slack-wordle

2022-01-08T17:00:00-08:00

slack-wordle

Wordle for Slack! This slack bot downloads the official Wordle bundle from the official Wordle website and executes it in a VM, delivering the results directly to your slack client.

Javascript, Node, Express, Slack bots

Source & install instructions available on Github.

Building my Oahu Guide on Github Pages

2022-01-08T17:00:00-08:00

Oahu Guide

Shortly after moving to Oahu in 2018, I started putting together a guide to our favorite places for guests that would visit us. Originally, this took the form of a straightforward GDoc that I'd print out for folks. Over time, I added more formatting to the document, like a map with annotations. However, google docs was clunky for this purpose - every time I wanted to add a location to the map, I'd have to edit the custom map, take a screenshot with the right dimensions, and paste it into a page in the document. Most painfully, if I wanted the locations in the guide to be in a specific order, I'd have to adjust a bunch of the formatting to make everything flow nicely.

After a couple years, I started sharing the guide online with folks. It covers a lot of places on Oahu which aren't covered by most guides and so it became quite popular, however it was still a painstaking process to edit it. I decided that I would redo the guide, except this time as a website so that it would be easier to make changes. The new guide needed to satisfy a few requirements:

Easy to view, on both desktop and mobile
Nicely formatted when printed
Easy to update

I ended up choosing Github Pages to host the guide. I'd done some Jekyll work with pages before (like this site) and felt like I didn't really need a whole frontend infrastructure - or any backend. Since I was already using google maps in the document version of the guide, I decided to try and continue using google maps. Initially, I played around with the Static Maps API - attempting to make an exact clone of the google doc - but the functionality was far too limited. Plus, I definitely had the desire for more interactivity than a static map. So, I switched to the Maps Javascript API.

If you check out the source code for the site, you'll see that there's really two main pieces to rendering the map: The YAML, which contains all the information to render the map, as well as the markdown text needed to generate the sidebar; and the map layout template, which contains all the javascript necessary to render the map.

The YAML breaks down the page in a pretty straightforward manner:

- Map: each map generates a section in the sidebar, and a container that the JS can use to detect when that map should be loaded. - Polygon: The guide is broken down into sections, which you can see in the overview map at the top of the page. The polygon parameters define which area each sub-map represents. - Markers: the individual items on each map, consisting of: a title, a description, the lon/lat coordinates on the map, and an optional image.

In the map layout, the first thing we do is take the YAML and turn it into a JSON array. Then, we can load the maps API and render the data as necessary. In addition, there's a little extra JS in the layout to handle things like click events and loading the different maps when the user scrolls down. That's pretty much it, just a sprinkle of javascript to get everything up and running.

A couple months after launching the map, disaster struck: the site was a victim of it's own success. I had run up against google maps' free tier API limits. I set out to find an open source alternative, and settled on the following:

I'm super happy with this solution - the maps are sharp and crisp, and MapLibre's API is very close to google maps - I was able to move the maps over to the new libraries within a couple hours.

Hope this guide will help anyone on their mapping journey! Please hit me up with any questions.

Source available on Github.

synthwave-x-fluoromachine

2019-05-01T18:00:00-07:00

synthwave-x-fluoromachine

synthwave-x-fluoromachine is a fork of @robbowen's Synthwave '84 theme, merged with @fullerenedream's Fluoromachine theme for VSCode.

CSS, VSCode extensions

Source & install instructions available on Github.

Fictiv

2018-05-29T18:00:00-07:00

fictiv

I've been working with Fictiv since 2018, first as a lead frontend developer; and since 2021, as an engineering manager. In my time there, I've led the launch of the multiple new products, as well as countless features for the user-facing, admin-facing, and computational geometry teams.

In addition to my coding responsibilities, I've worked to mentor my fellow developers in best practices for modern frontend development and user experience. As an engineering manager, I have spun up several new development teams at the company, as well as taken existing teams and optimized their processes around productivity and developer wellbeing.

I've been working with Fictiv in a fully-remote capacity since the beginning of 2019.

React/Redux, GraphQL, Python, Ruby, AWS

Visit fictiv.com »

standup-helper

2018-03-26T01:00:00-07:00

standup-helper

At Disqus, teams meet for a daily standup to check-in and share the latest updates on projects and ask questions. Since we have a distributed team working across different time zones, having standup at a fixed time isn’t ideal. We experimented with a few standup bots for Slack but found that they didn’t provide enough context around what people were working on. Specifically, we wanted a better way to connect a developer’s update to the related Trello card(s).

To solve this problem, we created Standup Helper, an open source Slackbot. It integrates with Trello by linking people’s responses to the cards they’re assigned to.

Using this information, Standup Helper creates an interactive, asynchronous dashboard that our team can use to augment our standups with useful, persistent data such as:

Active/inactive tasks, linked to their corresponding Trello cards

Recently merged PRs and PRs in review (integrates with Phabricator)

Upcoming Out of Offices (integrates with an OOO ICS feed)

Custom notes, interrupt notifications, and sidebar requests

Standup Helper lets us get process out of the way so we can focus our standups around meaningful conversations.

Source + install instructions available on Github.

phab-trello

2018-03-26T00:00:00-07:00

phab-trello

Disqus uses Phabricator for our version control, and we use Trello for our scrum & task management. There was no integration between these tools, so we created one.

We decided to use webhooks rather than the Phabricator API, so that we could preserve separation of concerns and keep our Phabricator server from being directly exposed.

Source + install instructions available on Github.

hangoutlook

2018-03-25T23:00:00-07:00

hangoutlook

Once upon a time, there was a company. And the company ran Gsuite and used Google Hangouts and all was well. Hangout boxes setup in the conference rooms displayed upcoming schedules & let you connect to calls.

But then the company was acquired and had to switch to Outlook, and there was felt a great disturbance in the force, as if millions of meetings suddenly cried out in terror and were suddenly silenced. Outlook meeting room calendars could not connect to the Hangout boxes, and conference rooms were in chaos.

Hangoutlook was created as a solution to this chaos. It parses an ICS calendar URL and displays a meeting room screen which looks and acts exactly like Hangouts, with some added bonuses:

Parses Google Hangout URLs, as well as custom URL patterns for other call URLs

Generates a meeting name if there's none specified

Works with anything that can generate an ICS file

Alt-click meetings to join them in present mode

Awesome backgrounds from Unsplash

Chrome OS compatible - Use hangoutlook-redirector to monitor & redirect hangouts -> hangoutlook

Source + install instructions available on Github.

ifttt-ghpages: Automate your Github Pages blog

2017-11-23T14:30:00-08:00

How to automate your Github Pages blog - for free - with IFTTT and Glitch

_Update 06/29: This article has been translated into Uzbek by GetColorings - check it out here: http://getcolorings.com/uz-automate-github

Earlier this month, I finally decided that it was time to migrate my personal blog from Tumblr to Github Pages. The one thing holding me back was social media cross-posting; On Tumblr, I had been using IFTTT to create new posts based on my social media sharing, but IFTTT doesn’t natively support Github Pages.

To solve this problem, I created ifttt-ghpages, a small webhook you can run for free on Glitch that creates posts on Github Pages from IFTTT actions.

This blog uses ifttt-ghpages to integrate my activity from Github, Twitter, Instagram and Spotify. The great thing about IFTTT is its flexibility - IFTTT supports hundreds of services and you can use any of them to automate your blog posts! For this example, we’re going to setup a trigger that automatically cross-posts new images from Instagram on our blog.

Some things to note before we continue:

This guide assumes that you have already setup a Github Pages site, which is using the Jekyll site generator. If you’re unfamiliar with Github Pages, you should create one first before moving on.
ifttt-ghpages takes advantage of Github Pages’ automated Jekyll build system - if you are pregenerating your site pages, or using a static site generator other than Jekyll, ifttt-ghpages does not currently support these use cases (although pull requests for new functionality are welcome!)

Let’s start by creating a fork of ifttt-ghpages on Glitch. Glitch calls forks “remixes”. Go to the ifttt-ghpages preview, and click Remix your own to create your own copy of the project.

Now that you’ve got your own copy of ifttt-ghpages, we’ll need to specify the environment variables needed to run the app. In glitch, the .env file contains your environment variables - and this file is special because only users you’ve invited to collaborate on your project can see the values within. This lets you store sensitive data in Glitch, such as API keys, without risk of exposing them to other users.

Open the .env file and you’ll see 4 variables to set:

GH_USER: your Github username.
GH_REPO: the repo that contains your Github Pages
GH_TOKEN: Your GitHub user token, which we will use to push new commits to your repo via the Github API. You can generate a user token here.
WEBHOOK_TOKEN: A random token of your choice which we will specify in our requests from IFTTT in order to verify the request is not coming from someone else. This token can be anything but I reccomend generating a UUID using a site such as https://www.uuidtools.com.

That’s all the setup necessary in Glitch. Hold onto the project name Glitch gave you, as well as the WEBHOOK_TOKEN you set - we’re going to need them when we setup IFTTT. If you’d like, you can change the project name to something easier to remember.

OK, now that we have Glitch setup properly, let’s create a new trigger in IFTTT - IFTTT calls these Applets. Login to IFTTT and create a New Applet.

On the new applet page, select the this link and choose Instagram for your service, then the trigger Any new photo by you. for the that action, choose the Webhooks service, then the trigger Make a web request. Setup your webhook as follows:

URL: https://YOUR-PROJECT-NAME.glitch.me/?token=YOUR-TOKEN - use the project name and WEBHOOK_TOKEN variables from the Glitch project we created earlier.
Method: POST
Content Type: text/plain
Body: A YAML-formattted Jekyll document, with newlines replaced with |||. There are several examples specified in this project’s Github repo, but here’s the example for Instagram: ---|||layout: post|||title: {{Caption}} - Tweet|||network: instagram|||date: {{CreatedAt}}|||---|||{{EmbedCode}}

Technical note: Initially I had built ifttt-ghpages to accept JSON, but had trouble escaping JSON & newlines properly with IFTTT so I’ve instead used the format above.

And you’re all set! Now when you create a post on instagram, you’ll notice a new commit to your Github Pages repo shortly afterwards:

As I mentioned earlier, the possibilities are only limited by the number of services & triggers IFTTT supports. Some ideas based on other IFTTT triggers:

SMS: Post to your blog from your mobile phone
Google Assistant: Post to your blog with your voice
Pocket: Post to your blog when you save an article
Phillips Hue: Sync your website background with your current lighting
Nest Cam: Post an image to your blog when your camera sees motion
Trello: use a trello board as a backend for your blog posts

ifttt-ghpages

2017-11-15T23:00:00-08:00

ifttt-ghpages

This is a node app (which you can run on Glitch for free) that lets you create new posts in a Jekyll-based Github Pages site, based on IFTTT actions. This lets you automatically aggregate a variety of networks and communication mediums into your static blog without client-side javascript. It's used to generate many of the blog posts on this site!

Source available on Github.

Trello Collapsible Lists

2017-07-17T00:00:00-07:00

Trello Collapsible Lists

This is a browser extension I put together that lets you collapse Trello lists to make boards easier to read. You can install it from the Chrome Web Store or from addons.mozilla.org for Firefox.

Source available on Github.