DEV Community: Audrey Roy Greenfeld

Announcing the Margarita Humanitarian Foundation Developer Blog

Audrey Roy Greenfeld — Sun, 03 Oct 2021 03:01:21 +0000

This blog is a friendly place for developers involved with Margarita Humanitarian Foundation's open source projects to share coding tips and tricks.

const help = (others) => {...}

All Our GitHub Contributors Invited

This offer is open to anyone who's had 1 or more pull requests merged into a project in the @margaritahumanitarian GitHub organization.

If you're not a contributor yet, see our repos for issues to work on. We welcome everyone! You can also ask for help getting started in https://discord.gg/kf3SKPMm

What to Write About

Anything that's fun or useful to other coders! For example:

TIL posts (Today I Learned)
Tips for getting into open source
Even super-short posts are fine, such as little React or Tailwind CSS tricks plus accompanying screenshots
Dev tricks that you want to keep notes on to remember later

What Is Margarita Humanitarian Foundation?

We're a nonprofit public charity helping those who need help the most. For more info, see margaritahumanitarian.org.

Join Me at PyCon Asia Pacific 2020 Online

Audrey Roy Greenfeld — Thu, 10 Sep 2020 19:46:21 +0000

PyCon APAC (Asia Pacific) is a major Python conference held every year in a different country in Asia, this year in Malaysia as a virtual online conference.

I'll be speaking in 2 sessions:

Special Interview: Audrey Feldroy

Chee Yim Goh, director of Women Who Code Kuala Lumpur and cofounder of IdealHub, will be interviewing me. Join us as we share stories about teaching in the Python world, talk about my Python books and projects, and more.

Malaysian Standard Time	Pacific Standard Time
Saturday, Sept. 19, 2020 from 11:20am-12pm	Friday, Sept. 18, 2020 from 8:20-9pm

Python Patterns for the Future

This is the main panel at PyCon APAC. As the Python web framework person and as the creator of the open-source project Cookiecutter (over 500k monthly downloads), I'll be sharing my insights on where Python is headed over the next 3-5 years and beyond.

Malaysian Standard Time	Pacific Standard Time
Sunday, Sept. 20, 2020 from 10-11am	Saturday, Sept. 19, 2020 from 7-8pm

How to Watch

PyCon APAC 2020 is a livestream that anyone can attend remotely. Get a ticket for MYR20.00 ($4.79 US), then follow their email instructions to access the talks on the event calendar.

Turn a REST API into a GraphQL API

Audrey Roy Greenfeld — Mon, 27 Apr 2020 06:46:18 +0000

I really like working with GraphQL APIs. I like being able to get data in the shape I want, and using subscriptions to get it in realtime. This weekend I discovered that transforming a REST API into a GraphQL one is easier than it sounds.

This is a walkthrough of turning one REST endpoint to GraphQL. Once you can do one, you can do more 😀

The REST API Endpoint We'll Transform

To keep things simple, we'll use a simple GET REST endpoint as our starting point:

GET https://pokeapi.co/api/v2/pokemon/pikachu/

Now let's create a GraphQL endpoint.

Define the GraphQL Schema for a Pokemon Object

First we define our GraphQL type for the Pokemon data we'll be returning from our new API endpoint:

type Pokemon {
  id:       String!
  name:     String!
  base_experience:  Int!
}

For the sake of example, we're limiting the fields, but add more if you want.

Define the GraphQL Query Type

Then we define a GraphQL query called getPokemon that takes an id and returns a Pokemon object:

type Query {
  getPokemon(id: String!): Pokemon
}

Define the Query Resolver

When a getPokemon GraphQL query comes in, under the hood of our resolver, we send a GET request to /pokemon/<id>/:

const resolvers = {
  Query: {
      getPokemon: async (_, { id }) => {

          const response = await fetch(MY_REST_URL + '/pokemon/' + id + '/');
          return response.json();
      },
  }

Try the Query in GraphQL Playground

A copy of the above code is editable here on Glitch, and running live here with interactive querying via GraphQL Playground

Go to GraphQL Playground and try the query we just created:

query {
  getPokemon(id: "pikachu"){
    id
    base_experience
  }
}

It responds with real data from PokeAPI:

{
  "data": {
    "getPokemon": {
      "id": "25",
      "base_experience": 112
    }
  }
}

Yay! As a practice exercise, try implementing another field besides base_experience:

Remix my Glitch app
Add the field to the Pokemon schema
Add it to your query and see the results in GraphQL Playground

With this knowledge and a little practice, there's so much you can do. Enjoy!

JAMStack Fun: Combining StackBit, Forestry, Netlify, Gatsby, Hasura, Glitch

Audrey Roy Greenfeld — Wed, 22 Apr 2020 08:21:06 +0000

For days 6-7 of #100DaysOfCode, I did various JAMStack experiments with SaaS and open-source tools, putting them together to see what would happen.

Trying Out Stackbit

I signed up for a Stackbit account and used their site builder to create a project:

Theme: Azimuth
Site generator: Gatsby
CMS: Forestry (Always wanted to try it!)
Deployment: GitHub repository with Netlify build + deploy (the only current options available. I look forward to Gitlab coming soon!)

I connected my Forestry and GitHub accounts.

Stackbit says it deployed my site. Ooh, it's really live:

I clicked Claim to claim the Netlify project. It worked, yay.

Then I clicked Edit in Forestry to edit the content.

Trying Out Forestry

Forestry provides a GUI for editing Gatsby content. It also supports Hugo, Gridsome, Jekyll, and other static site generators.

It's pretty cool, and I could see it being useful for people who can't build their static site locally or are editing from a mobile device.

The lag between updating a site via Forestry and seeing the new deployed version on Netlify was a few minutes. For my purposes, I find running npm run develop easier because I can see the static site changes on localhost in seconds.

Adding a Netlify Function

Next I added a Netlify function. Initially it'll do almost nothing, but I could see it implementing something dynamic and server-side like what you would expect of an Express or Django web application.

I cloned the GitHub repo, then created a Netlify function by copying functions/hello.js by @kentcdodds into my project. I added it to my build in netlify.toml. Then I git committed and then went to Netlify to watch the build go.

Now that the function's deployed, it's here:
https://curious-rosemary-e8299.netlify.app/.netlify/functions/hello?name=Uma

Whatever you pass into name gets shown on the page by the function:

// functions/hello.js from https://kentcdodds.com/blog/super-simple-start-to-serverless
exports.handler = async event => {
    const subject = event.queryStringParameters.name || 'World'
    return {
      statusCode: 200,
      body: `Hello ${subject}!`,
    }
  }

I'd like to expand this into something real and maybe have it get triggered by a form submission via a Netlify form like the contactForm provided by the sample code. But in the interest of time, I'm saving that for another day to focus on getting the Gatsby site to display dynamic remote API data.

Experimenting with Gatsby

It's been years since I last used React, so getting Gatsby to do what I wanted was a challenge. My hope at this point was to replicate what a Django ListView does in JAMstack.

I created an items.js page to play in:

import React from "react"
export default ({ data }) => (
    <div>
        Hello!
    </div>
)

Next, I looked into populating the page with dynamic data. If I could grab data onto this static page from a remote GraphQL endpoint, that would be great.

Gatsby uses GraphQL, so I started with using that as test data:

import React from "react"
export default ({ data }) => (
    <div>
        <h1>Items List {data.site.siteMetadata.title}</h1>
        <p>This is a static site, but it's loading items dynamically from GraphQL:</p>
        <ul>
          {data.site.siteMetadata.header.nav_links.map(x=> <li>{x.label}</li>)}
        </ul>
    </div>
)

export const query = graphql`
  query {
    site {
      siteMetadata {
        header {
          nav_links {
            label
          }
        }
      }
    }
  }
`

Setting Up a GraphQL API with Hasura

Hasura is an open-source, Heroku-deployable tool that can take existing databases and give you a GraphQL API.

I did the first part of the Hasura tutorial and loved it. Now I have a todos table I can query:

query MyQuery {
  todos {
    id
    title
  }
}

The response from Hasura with my sample data:

{
  "data": {
    "todos": [
      {
        "id": 1,
        "title": "My First Todo"
      },
      {
        "id": 2,
        "title": "Second Todo"
      }
    ]
  }
}

Adding a New Gatsby GraphQL Root

I did an npm install gatsby-source-graphql then added my Hasura GraphQL API to gatsby-config.js:

I see that the example from the Gatsby docs points at https://api.graphcms.com/simple/v1/swapi which is down.

Looks like that site, GraphCMS, was featured on ProductHunt today...I'll sign up and see if they have an updated sample endpoint. Hmm, it looks like an interesting rabbit hole for another day.

In Hasura, I went to Remote Schemas > *Try it with Glitch* and found hasura-sample-remote-schema.glitch.me/

With @danielfeldroy 's help we added the new root to gatsby-config.js:

        {
            resolve: "gatsby-source-graphql",
            options: {
              // This type will contain remote schema Query type
              typeName: "query",
              // This is the field under which it's accessible
              fieldName: "hasuraSample",
              // URL to query from
              url: "https://hasura-sample-remote-schema.glitch.me/",
            },
          },

Then he figured out this query worked in Glitch:

query {
  hello 
}

In http://127.0.0.1:8000/___graphql we got this query to work:

query {hasuraSample {
  hello
}}

Showing Remote GraphQL Data on a Gatsby Page

Finally, I updated items.js to be:

import React from "react"
export default ({ data }) => (
    <div>
        <h1>Items List</h1>
        <p>This is a static site, but it's loading items dynamically from GraphQL:</p>
        <ul>
          {data.hasuraSample.hello}
        </ul>
    </div>
)

export const query = graphql`
  query {hasuraSample {
    hello
  }}
`

With that, http://localhost:8000/items now shows a static Gatsby page with the live data from the Glitch-hosted Hasura Sample Remote Schema!

It was really fun to play around and put all these JAMstack toys together, particularly the ones that auto-configured themselves and auto-deployed. Every piece served a purpose and did it well. That was cool!

Day 5 of #100DaysOfCode: Dev.to Cover Image Generator

Audrey Roy Greenfeld — Mon, 20 Apr 2020 06:45:41 +0000

Tonight I created this cover image generator:

It uses JavaScript to draw on an HTML5 canvas.

To change the text:

Fork this on CodePen: https://codepen.io/audreyfeldroy/pen/rNOMxad
In the JS panel, change the lines with ctx.fillText to be the text you want.
Break any long lines into two lines, or shrink the fonts.

You'll probably also want to change:

The colors
The fonts
The parameters of the fractal tree

Have fun! I'd love to see what you create, so please share your posts/forks in the comments below.

Day 4 of #100DaysOfCode: Building My First Square App with Glitch

Audrey Roy Greenfeld — Sun, 19 Apr 2020 00:25:44 +0000

Today I built my first working Square app!

I started with Square's official Order-Ahead Sample App, a Node/Express project.

Following its accompanying tutorial in the Square docs:

Configuration

I created an Order Ahead app in https://developer.squareup.com/apps/ (you need a Square account to do this)

I updated config.json with the sandbox app ID and token.

Running npm test failed. I did npm install and tried again. It worked:

$ npm test

> order-ahead-sample-app@0.0.0 test /Users/arg/projects/3rd-party/connect-api-examples/connect-examples/v2/node_orders-payments
> NODE_ENV=sandbox node ./bin/www

First Local Run

I went to http://localhost:3000/ and saw a page with "Sandbox Location Business Nickname" at the top. Yay, the app runs locally!

Generating Test Data

I ran the example script to seed the sandbox store catalog with test data. It generated a bunch of restaurant food items:

$ npm run seed

> order-ahead-sample-app@0.0.0 seed /Users/arg/projects/3rd-party/connect-api-examples/connect-examples/v2/node_orders-payments
> NODE_ENV=sandbox node ./bin/script/seed-catalog.js generate

Successfully uploaded item: #Italian Sandwich
Successfully uploaded item: #Steak Tacos
Successfully uploaded item: #Autumn Soup
Successfully uploaded item: #Sunny-Side Egg on Toast
Successfully uploaded item: #Fried Chicken Sandwich
Successfully uploaded item: #Salmon with Zucchini
Successfully uploaded item: #Oatmeal with Fruit
Successfully uploaded item: #Mediterranean Yogurt Bowl
Successfully uploaded item: #Meatballs
Successfully uploaded item: #Pancakes with Fruit
Successfully uploaded item: #Bacon Cheeseburger
Successfully uploaded item: #Grilled Steak

Placing a Sample Order

Restarting the local server with npm test, I now see those test items. I can click them to see a pop-up with detail and a Buy This button:

Clicking Buy This leads to Choose Delivery Method:

Under Delivery Method, the only option is Pickup.
Under Pickup Location, the only option is Sandbox Location Business Nickname.

The next screen was Review and Complete Your Order. I entered the test card:

I clicked Pay with Card and it gave me this Order Confirmation:

Verifying the Order in the Sandbox

Sure enough, the order shows up under Orders:

I can mark it In Progress, then Ready, then Picked Up using the upper right button.

That's great that the sample Square app works locally.

Getting It Running on Glitch

I made a copy of the node_orders-payments folder as OrderAhead.

I copied GitHub's Node.gitignore as the project .gitignore.

The code's now in a GitHub repo: https://github.com/feldroy/OrderAhead

In Glitch, I clicked New Project > Clone from Git Repo and pasted in git@github.com:feldroy/OrderAhead.git. The screen went black and it didn't like that. I tried again with https://github.com/feldroy/OrderAhead.git and that worked.

The Square tutorial had me put credentials into config.json earlier, which I .gitignored. I moved those to .env and now load them from there in util/square-connect-client.js:

const config = {
  "path": "https://connect.squareupsandbox.com",
  "squareApplicationId": process.env.SQUARE_APPLICATION_ID,
  "squareAccessToken": process.env.SQUARE_ACCESS_TOKEN
}

Here's the Glitch app:

The Deployed Demo Site

You can experiment with this and even place test orders using the demo credit card.

Play with the live demo: https://orderahead.glitch.me/

Finally, if you're new to Square, here's an invite to get free processing on up to $1,000 in credit card transactions for the first 180 days.

Day 3 of #100DaysOfCode: JS Fractals in CodePen and Observable

Audrey Roy Greenfeld — Sat, 18 Apr 2020 03:57:46 +0000

Yesterday I saw @lautarolobo's tutorial on coding fractal trees in JS, and I knew I had to try it. Besides, it's Fractal Friday!

I opened up CodePen and was going to use HAML, then realized that the Pug HTML processor was available. Why not try Pug while I'm at it, right? My Pug code was nice and short:

h1 Fractal Tree
canvas#my_canvas(width="1000", height="800")

I gave the canvas a nice light gray background so I could see the bounds:

#my_canvas { background-color: #efefef; }

Then I defined the recursive draw() function as per the first tree version in @lautarolobo's tutorial, where each execution:

Moves to startX, startY
Draws a line of length len, angle angle
Calls itself to draw left and right branches until len < 10

I brought the code over to Observable and hooked it up to sliders controlling the two values that were hardcoded: the ratio of new branch length to old, and the angle at which a new branch sprouts.

I got the slider code from Huy Nguyen's Fractal Tree notebook which is similar to this but more configurable.
I could have implemented this in CodePen but it would have been much more verbose than in Observable (I think)

The above is just a screenshot because I don't think you can embed live running code on dev.to (unless I'm wrong?). Check out the interactive slider version: https://observablehq.com/@audreyr/fractal-tree-1

Finally, I experimented with different left vs. right branch ratios back in CodePen and got some pretty results. Here's left branchPercent 0.5, right 0.8:

Day 2 of #100DaysOfCode: Playing With Stripe, Tailwind, and Vue

Audrey Roy Greenfeld — Fri, 17 Apr 2020 06:59:43 +0000

I know I was supposed to start Day 2 with debugging that fs error from Day 1, but I was really dreading that. I'll pick that up sometime in the future when I'm ready.

I got started coding late in the day, and my brain was too tired to do much. I almost gave up. But because of the challenge, I felt like I should try to code something fun.

I decided to play with Stripe Elements, Tailwind CSS, and Vue.js today on Glitch. I remixed my vuejs-tailwind-starter project to create Subscribe to be Featured, a simple app where people or companies can subscribe to have their names listed on the page. It doesn't work yet, but you can see and play with the code here: https://glitch.com/edit/#!/subscribetobefeatured

My husband @danielfeldroy joined me, pair-programming with me through Glitch, which is like a shared Google Doc but for code editing. It was a nice little coding date while our daughter was asleep.

Thanks @danielfeldroy for your help, and for helping me get going when I felt too worn out to code. 💘

My tips of the day:

Nerdcave's Tailwind Cheat Sheet is awesome.
Derick Sozo's article Integrating Stripe Elements and Vue.js to Set Up a Custom Payment Form was helpful today.
I liked working with plain Tailwind + PostCSS in CodePen first to allow for fast visual iteration, then bringing over the element to my full JS app in Glitch once I got the styling right. Glitch ran a bit slow, even with the app boosted. It may be my fault for not having the most optimized package.json scripts, though.
Having played with both over the past week, Stripe subscriptions have a lot of features, flexibility, and come with gorgeous widgets, but Paddle subscriptions have decent widgets and are much easier to get started with. I do like both payment platforms.

Day 1 of #100DaysOfCode: Trying Out Tanker for End-to-End Encryption

Audrey Roy Greenfeld — Thu, 16 Apr 2020 06:59:27 +0000

For the longest time, it's been on my bucket list to figure out how to implement end-to-end encryption for web apps. So I'm starting with it as my first day of #100DaysOfCode.

I did a quick search and discovered @dmerejkowsky's post on adding end-to-end encryption to Mastodon. He uses Tanker's API to encrypt Mastodon direct messages.

Tanker looks promising:

I followed Tanker's Encrypt and decrypt data in a web app tutorial, converting it from React to Vue as I went along.

I remixed https://glitch.com/edit/#!/vuejs-tailwind-starter to create a new Vue.js project with Tailwind CSS.

I added my Tanker app ID to 🔑.env.

In package.json > Add Package, I added:

@tanker/client-browser
@tanker/fake-authentication

I then added the imports as per the tutorial:

import FakeAuthentication from '@tanker/fake-authentication';
import { Tanker } from '@tanker/client-browser';

At this point I ran into the error Module not found: Error: Can't resolve 'fs'. Commenting the second line out gets rid of the error.

I tried installing graceful-fs which didn't help. Uninstalled it. Found a Glitch forum post about fs that said fs is already part of node.js.

In case memory might be the culprit, I upgraded to a paid Glitch subscription and boosted my app. That didn't help.

At this point I'm stuck.

That was a rough Day 1. I was hoping to at least get through the Tanker tutorial. If anyone wants to help debug this, here's the code: https://glitch.com/edit/#!/morning-pages

I'm also open to suggestions of other tools/libraries for web app end-to-end encryption.

#100DaysOfCode for the Experienced Developer

Audrey Roy Greenfeld — Wed, 15 Apr 2020 03:41:27 +0000

I've noticed that most people who do the #100DaysOfCode challenge are beginners learning to code. I've been coding for many years, so I wasn't sure if it was for me.

Here's why I've decided to start the challenge:

1. Play With Cool New Toys

There are so many fun developer tools that I haven't had a chance to try. For example, @vivgui told me about the joys of Tailwind CSS back in 2018, and I only got around to learning it a few days ago. Whoa, its CSS classes make composing UIs so much fun! There's also collaborative JS coding tool Glitch, which @danielfeldroy just got me into, and its cousin Observable for JS notebooks. And there's the realtime GraphQL engine Hasura which I'm eager to play with more.

2. Make Fun Stuff

Making stuff is fun. If I can't be at my local makerspace making art on the laser cutter, or in my art studio experimenting with messy mixed media painting, then at least I can code.

The Hard Part

I'm not sure if an hour a day is really doable for me. The toddler, business, family obligations, and stress are already leaving me exhausted. I'll try for an hour, but if some days I can only do 10 minutes, that's still better than skipping a day.

Overall Goal: Coding as Play

It's easy to get caught up in the mentality of "Coding is work." My intention with this challenge is for it to be fun experimentation and play. If it's not fun, I'll stop doing it. I'm hoping it'll help me make time for personal fun every day.

With that, I'm committing to #100DaysOfCode! Starting tomorrow I'll post about what I code each day.

TIL: Put script tags in head and use the defer attribute

Audrey Roy Greenfeld — Fri, 10 Apr 2020 11:13:42 +0000

I noticed the starter webpage project on Glitch had this in the <head> section:

<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>

I was surprised to see a <script> tag in the <head> section, since I thought the best practice was to put these before </body>. That couldn't be right...the Glitch devs seem to care about things like this. Then I saw the defer attribute.

MDN says about defer:

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

Flavio Copes has a nice writeup on defer and async. My key takeaways:

defer only works in the head section.
With defer the browser fetches the script in parallel with parsing the HTML. Even if the browser finishes fetching the script, it doesn't run it until it's done HTML parsing.
Use defer not async because parsing ideally should complete before script execution.
The best practice is what Glitch does, shown above. Put <script src="..." defer> in <head>.

Do you agree with this best practice?

TIL: The Best Way to Compress JPG Files with ImageMagick

Audrey Roy Greenfeld — Thu, 09 Apr 2020 18:57:02 +0000

Got a JPEG that's too big to upload?

Lazy to open Photoshop?

ImageMagick to the rescue!

What Is ImageMagick?

ImageMagick is a tool for editing images. When you install it, you can type convert at the command line (followed by whatever parameters you want) to resize, optimize, distort, and draw on images.

If you don't have it yet, follow the instructions at imagemagick.org to install it. (I did brew install imagemagick to get it onto my Mac.)

How Do You Compress JPG Files With It?

Honestly, every time I've needed to optimize images, I've always googled "imagemagick convert compress jpg" and copy-pasted from StackOverflow.

Today I decided it's time to:

Learn which convert arguments/parameters are best for balancing quality with file size
Write it up on here as a handy copy-paste reference for future me

Let's now look at the top two ImageMagick JPEG compression strategies from this StackOverflow post, then try combining them.

Option 1: Lighthouse Compression Strategy

According to one StackOverflow poster, this strategy focuses on following Google Lighthouse's guide on how to pass the "Optimize Images" Lighthouse audit in Chrome DevTools:



convert feldroy-512x512-unoptimized.jpg \
-sampling-factor 4:2:0 \
-strip \
-quality 85 \
-interlace JPEG \
-colorspace RGB \
feldroy-512x512-pagespeed.jpg

Note: Lighthouse was formerly Google Pagespeed Insights.

Option 2: Gaussian Blur Strategy

This strategy was the most upvoted post on StackOverflow due to its age (2011). It's also quite good. Blurring smooths out any high-frequency color and tonal changes:



convert feldroy-512x512-unoptimized.jpg \
-strip \
-interlace Plane \
-gaussian-blur 0.05 \
-quality 85% \
feldroy-512x512-gaussian.jpg

Option 3: Combined Strategy

Combining the above 2 options, we get:



convert feldroy-512x512-unoptimized.jpg \
-sampling-factor 4:2:0 \
-strip \
-quality 85 \
-interlace Plane \
-gaussian-blur 0.05 \
-colorspace RGB \
feldroy-512x512-combined.jpg

Results

As you can see, the combined strategy (Option 3) had the best results with my test JPEG:



$ ls -lh
total 360
-rw-r--r--  1 arg  staff    23K Apr  9 10:55 feldroy-512x512-combined.jpg
-rw-r--r--  1 arg  staff    28K Apr  9 05:30 feldroy-512x512-gaussian.jpg
-rw-r--r--  1 arg  staff    27K Apr  9 05:21 feldroy-512x512-pagespeed.jpg
-rw-r--r--@ 1 arg  staff    95K Feb 24 06:57 feldroy-512x512-unoptimized.jpg

Looking at the original and resulting files side-by-side, they all looked good to me, though someone with better eyesight may be pickier:

Other Things to Know

You can also use ImageMagick to resize images to smaller pixel dimensions or even convert between file formats (like .png to .jpg). Here's an article by @listnux showing cool things you can do with it.

Finally, if you have a better way to compress jpg files with ImageMagick convert or even other tools, I'd love to hear your tips.