DEV Community: 🅲🅰🆁🆃🅴🆁

Talks from SeattleJS Conf 2023 (free)

🅲🅰🆁🆃🅴🆁 — Fri, 01 Sep 2023 22:01:00 +0000

The talks from SeattleJS Conf 2023 have been posted online, for free!

https://www.youtube.com/playlist?list=PLLiioAbFTbKMJMlJnhkiKy7IfsnsCVAb5

Talk rundown:

What to Know About Deno 2.0 by Kevin Whinnery
Rebuilding in Rust for Good Reason by Eve Porcello
50 shades of React rendering with Next.js by Ben Ilegbodu
FLIP no more; Viva View Transitions by Adam Argyle
Creating a Design System using Design Tokens With Amplify by Erik Hanchett
Move over passwords, passkeys are my new best friend! by Daphne Liu
Understanding LangChain Agents and Tools with Twilio (or with SMS) by Lizzie Siegle
Building a Real-Time Multiplayer Reactions Component by John Pham
Every Process, Everywhere, All at Once by Luis Montes
ES13 and Beyond: The Future of JavaScript by Christina Zhu
Static Analysis: Don't Fear the Linter! by Josh Goldberg
A Plea for Boring Tech by Jason Lengstorf

Tutorial: Sending Mobile Push Notifications Using Courier and Their New Android SDK

🅲🅰🆁🆃🅴🆁 — Thu, 31 Aug 2023 20:07:00 +0000

If you're building mobile applications, learning how to deliver push notifications is essential to creating engaging experience and notifying your users of urgent tasks or updates.

Sending push notifications to Android apps is pretty straightforward, but quickly gets complex when you start to consider sequencing notifications across multiple devices, managing tokens, complying with regional regulations, localizing notifications, and respecting user preferences. 😬

Enter Courier, a platform designed to streamline this process. Courier’s Android SDK provides a comprehensive solution for push notifications, simplifying the complex task of managing product-triggered communications across different platforms.

In this tutorial, we will focus on Courier's push notification capabilities within Android apps, covering the setup process, key features, and how to send a test push notification. By the end, you’ll see how Courier can make managing Android push notifications a more manageable task, leaving you with more time to focus on creating a great user experience.

Tutorial → https://www.courier.com/blog/android-sdk-push-notifications-using-courier/

Github Repo → https://github.com/trycourier/tutorial-android-push-notifs

Building a Virtual Conference Ticket with Begin, AWS & Puppeteer

🅲🅰🆁🆃🅴🆁 — Tue, 14 Sep 2021 03:44:47 +0000

This year, inspired by the folks at Next.js Conf, I decided to build virtual tickets for my conference CascadiaJS. It's a fun feature for attendees because they get to help spread the word about an event they're excited about.

Here is the user flow for attendees choosing to create a virtual ticket:

They click a link to create the virtual ticket.
This sends them to Github for an OAuth flow.
On success, Github returns with OAuth code.
Web app stores success marker in DB for this attendee.
Web app fires event to generate the virtual ticket image.

Let's walk through each of these steps!

0. Using Begin to build on AWS

The CascadiaJS 2021 web app is built on a framework called Arc and hosted on AWS via a new platform called Begin. The combination of Arc and Begin make it easy to build a full-stack web application that takes full advantage of AWS services like Lambda, DynamoDB and SNS without 99% of the boilerplate.

1. Creating the Github OAuth link.

First, you'll need to go to Github and create an OAuth application. Once you do this, you'll be provided with a Client ID and you can create a Client Secret. Store both of these values in your environment variables.

Building the link to kick-off a Github OAuth flow is as simple as constructing the URL below with your Client ID:

<a href="https://github.com/login/oauth/authorize?client_id=${ clientID }">Get Added to Directory</a>

2. This sends them to Github for an OAuth flow.

When the user lands on this page, they'll see the name of your Github OAuth app and the logo you've uploaded. Make sure these are things that folks will trust.

3. On success, Github returns with OAuth code.

Once the user authorizes this connection, Github will redirect to the Authorization callback URL that you will have configured and will pass along a code as a query parameter.

4. Web app stores success marker in DB for this attendee.

In the HTTP function that handles the OAuth callback, we use the code passed in the request to retrieve the public information for this Github user. We then update the attendees ticket record to store their Github username and avatar:

let info = await github(req)
await data.set({ table: 'tickets', ...ticket, github: info.login, avatar: info.avatar })

5. Web app fires event to generate the virtual ticket image.

Finally, the stuff you've really been waiting for: generating dynamic images!

First, since this image generation process can take time, I chose to kick-off an asynchronous job using Arc events which are sugar for more easily using AWS SNS. This way the HTTP functions returns to the user immediately, while imagine generation happens in the background.

const name = 'ticket-shared'
const payload = { number: ticket.number }
await arc.events.publish({ name, payload })

The event function, when invoked, is provided with the unique ticket number for this attendee. It uses this number to generate the image of virtual ticket:

let file = await screenshot({ number })

Let's dig into the screenshot module, since that's where the magic happens:

const chromium = require('chrome-aws-lambda')
require('puppeteer-core')

function getBaseUrl() {
  let url
  if (process.env.NODE_ENV === 'testing') {
      url = 'http://localhost:3333'
  }
  else  {
      url = `https://${ process.env.NODE_ENV === 'staging' ? 'staging.' : '' }2021.cascadiajs.com`
  }
  return url
}

module.exports = async function screencap({ number }) {
    let browser
    let baseUrl = getBaseUrl()
    // set-up headless browser
    let height = 628
    let width = 1200
    let deviceScaleFactor = 1
    try {
      browser = await chromium.puppeteer.launch({
        args: chromium.args,
        defaultViewport: {
          height, width, deviceScaleFactor
        },
        executablePath: await chromium.executablePath,
        headless: chromium.headless,
        ignoreHTTPSErrors: true,
      })
      let page = await browser.newPage()
      await page.goto(`${ baseUrl }/tickets/${ number }?social`)
      const file = await page.screenshot()
      await browser.close()
      return file
    } finally {
      if (browser) {
        await browser.close()
      }
    }
  }

This module uses chrome-aws-lambda and puppeteer-core to fire up a headless Chrome browser and navigate to a webpage that dynamically builds a page for the attendee's virtual ticket. It then takes a screenshot of this webpage and returns the buffer of bytes.

This is a good time to note that you want to configure the Lambda associated with this event handler to be pretty beefy and not to timeout too quickly. You can accomplish by setting properties in arc.config:

@aws
runtime nodejs14.x
timeout 90
memory 3008
@arc
shared false

The shared false command tells Arc not to build and include code and dependencies from the applications shared folder. This is really important because Lambda has a hard 250MB limit on code/deps and chrome-aws-lambda and puppeteer-core gobble up a ton of that space.

We then save this generated screen to s3:

    const s3 = new AWS.S3()
    let fileName = `ticket-${ number }.png`
    await s3
      .putObject({
        Bucket: process.env.ARC_STATIC_BUCKET,
        Key : process.env.ARC_STATIC_PREFIX + '/' + fileName,
        ContentType: 'image/png',
        Body: file,
        ACL: 'public-read',
      })
      .promise()

The ARC_STATIC_BUCKET and ARC_STATIC_PREFIX are automatically available in your app's environment variables thanks to Begin.

The last step is to attach this beautiful image to the attendee's custom ticketing page. If you go to my ticketing page and view the source you'll see <meta> tags for Open Graph and Twitter image URLs:

    <meta property="og:image" content="${ socialUrl }" />
    <meta name="twitter:image" content="${ socialUrl }">
    <meta name="twitter:card" content="summary_large_image">

Phew! I'm sure I skipped a few steps, but you get the gist of how this works and find this helpful! The source code for the CascadiaJS web app can be found on Github at:

https://github.com/cascadiajs/cascadiajs-2021

Refactoring JavaScript using JavaScript

🅲🅰🆁🆃🅴🆁 — Fri, 27 Mar 2020 18:23:29 +0000

As we look ahead to CascadiaJS 2020 (🤞🏽) I thought I'd share some of the awesome talks from our 2019 event. Enjoy!

Saimon Sharif

With codemods, engineers can programmatically refactor their code, saving hundreds of hours while reducing tech debt. I’ll share my love, struggles, and successes applying them in a large codebase. We’ll see my favorite codemods along with tips on how to use them effectively, and also write one from scratch.

Watch the talk (24:22)

When writing too much code kills your business

🅲🅰🆁🆃🅴🆁 — Thu, 26 Mar 2020 18:36:44 +0000

Cross-posted from Indie Hackers

About a year ago I shipped Fizbuz v1. It was built on AWS Lambda, DynamoDB and Auth0. I had discovered a new, but really interesting, open source tool called Architect that made it really easy to spin-up AWS resources and build fast, and for a while I was really productive. And it worked well... for a bit.

Starting Fast

After doing customer discovery and building a prototype on Rails, I had clear backend requirements:

Serverless architecture
REST API for simple read/writes
GraphQL API for complex reads
APIs & the data layer bootstrapped by GraphQL type definitions

I had never built a web application using Lambda or DynamoDB, so I was in full "learn" mode. I soaked up everything I could about how to build these kinds of applications and ended up building a ton of API and data layer tooling from scratch.

This felt very productive at the time and I was incredibly proud of how slick it was that I could define a new business object in GraphQL and that matching REST API endpoints and data layer CRUD operations would be automatically provisioned with minimal additional work.

Slowing Down

After a furious few months of coding, I shipped v1 of Fizbuz and started onboarding users. As I came in contact with users, I started to collect more and more feedback on how to improve the product.

This is where I started noticing a slow-down in my ability to ship new features. As I would context switch from non-technical tasks (talking to customers, doing discovery, networking, etc) back to the code, I would sometimes have a hard time understanding how the code worked. Since I wasn't using third-party tools for commons tasks like client-side data fetching or API request processing or database interaction, I couldn't rely on documentation or Google to get unstuck.

The issue came into much sharper focus when I would try to onboard other developers for contract work. Since I wasn't using tooling that they were familiar with, too much time was wasted getting them up to speed on how the system worked, rather than spending time on shipping new customer-facing features.

Screeching to a Halt

A few days ago a user alerted me that when they were using Fizbuz, they noticed that the app seemed to be caught in an infinite loop and was making an endless series of HTTP requests to the server. This wasn't visible in the UI, which is why I hadn't noticed, so I dove into the codebase to figure out what was wrong.

It turned out that I had refactored some client-side data fetching code in order to be more compliant with React best practices around Hooks and Exhaustive Deps. I unwittingly broke perfectly good code and created an infinite loop. In this case, the requests were idempotent reads, but next time who knows? What if they had been writes?

Moving Forward

I love making things, I think all developers do. And I'm proud of much of the code I wrote. It solved a real problem for me and did so in an elegant way. But I had to look myself in the mirror and ask myself this:

Do I really care about building tools to layer REST and GraphQL APIs on top of DynamoDB?

I decided that I care more help developers build better networks and find better opportunities, and my engineering cycles for the rest of the year will be spent on building product and features that deliver on this.

I am currently in the process of evaluating stacks that meet my original requirements and talking to developers who have experience with these stacks and are available for contract work. Right now it looks like AWS AppSync, Prisma and Hasura are strong contenders for the backend and data layer.

I'll be writing more about my journey to ship a v2 of Fizbuz, so please feel free to follow along!

If you have any suggestions on a stack I should look at, please feel free to leave a comment.

Accessibility is a Hydra

🅲🅰🆁🆃🅴🆁 — Thu, 26 Mar 2020 16:20:10 +0000

As we look ahead to CascadiaJS 2020 (🤞🏽) I thought I'd share some of the awesome talks from our 2019 event. Enjoy!

EJ Mason

When Hercules fought the hydra, its heads would grow back no matter how many times he cut them off. Web accessibility professionals put repeated effort toward fighting accessibility barriers, and often feel like their work is never done. If we want to prevail against accessibility barriers, we have to understand our own hydra: we have to talk about ableism.

Watch the talk (22:06)

Authentication for the REST of Us

🅲🅰🆁🆃🅴🆁 — Wed, 25 Mar 2020 15:24:04 +0000

As we look ahead to CascadiaJS 2020 (🤞🏽) I thought I'd share some of the awesome talks from our 2019 event. Enjoy!

Divya Sasidharan

Authentication is a complicated subject that is hard to grok, let’s unpack all kinds of auth concepts and examine how we can apply them to our applications.

Watch the talk (26:08)

[Video] The Future of the Decentralized Web

🅲🅰🆁🆃🅴🆁 — Fri, 16 Aug 2019 18:53:58 +0000