DEV Community: Peyton McGinnis

Conquering the Cloud Resume Challenge

Peyton McGinnis — Fri, 22 Mar 2024 03:39:45 +0000

GitHub Repository
Completed Project

🤔 What is the Cloud Resume Challenge?

In developing skills for my future career, a friend recommended the

Cloud Resume Challenge (AWS Edition)

as a practical way to develop cloud development and problem-solving skills. The challenge offers high-level instructions for building a basic serverless application with a static frontend using AWS, Google Cloud, or Azure. The AWS route took me about 3 days to complete (besides the recommended AWS certification).

⚔️ Take the challenge!

I highly recommend anyone else trying to improve their cloud development skills to complete this project. It teaches you:

How to think cloud -- frontend, backend, API endpoints, ...
How to use a cloud platform like AWS
How IaC simplifies provisioning and deploying your application

And, it improves your problem-solving skills and analysis of edge cases.

📚 Stack

Backend
- AWS SAM -- Serverless Application Model (deploys as AWS CloudFormation)
  - AWS API Gateway
    - AWS Lambda
  - AWS DynamoDB
Frontend
- AWS CloudFront
  - AWS S3 static site
- Netlify + Netlify DNS
CI/CD: GitHub Actions

(ง'̀-'́)ง The Challenge

Setup

I created a basic HTML/CSS frontend with some placeholder content to start off with. I then initialized the git repo and pushed to GitHub using the GitHub CLI.

🪣 S3

AWS S3 buckets are an inexpensive and convenient way to host static sites (plain HTML/JS/CSS). Normally I've used Netlify, but since this frontend doesn't have a build step, S3 is much easier.

I wanted to use a subdomain of sergix.dev to point to my static site, cloudresume.sergix.dev. I found that the S3 bucket first has to explicitly be named cloudresume.sergix.dev.

One of the biggest difficulties with learning AWS is policy configuration. Everything in AWS has a designated ARN (Amazon Resource Name) that designates each individual created resource. For example, my S3 bucket's ARN is arn:aws:s3:::cloudresume.sergix.dev. Access policies for resources can then be configured for AWS IAM roles, users, or directly attached to the resource. To make the S3 bucket publicly accessible, a policy must be directly attached to the bucket:

{
    "Version": "2012-10-17",
    "Id": "Cloud-Resume-Challenge-S3-Policy",
    "Statement": [
        {
            "Sid": "AllowStaticWebsiteAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cloudresume.sergix.dev/*"
        }
    ]
}

This allows any client to s3:GetObject and retrieve any object (/*) in the bucket.

↪️⤵️ DNS Routing

My website sergix.dev is hosted on Netlify, my favorite web development and deployment platform. My website's domain also routes its DNS through Netlify's DNS, and so I can configure any DNS records through Netlify.

I created a CloudFront distribution to be in front of the S3 bucket and for DNS integration. The CloudFront distribution configures an Origin, in this case an S3 static site bucket, to redirect traffic to. I then added a CNAME record in Netlify DNS that points to the CloudFront public distribution domain name assigned by AWS. This gives HTTP-only routing, but this will be changed to HTTPS in the next step.

🔒 HTTPS

First, I created an SSL certificate in ACM (Amazon Certificate Manager) and then added a CNAME DNS record to sergix.dev with the required validation information. AWS uses this key/value pair in the DNS record to verify that I own the domain and to appropriately provision the SSL certificate for my domain.

I then added the new ACM certificate to my CloudFront distribution by just selecting the certificate.

Now, HTTPS is ready to go!

🛢 DynamoDB

AWS DynamoDB is a document-based database that flexibly stores items based on a primary key and each individual item can have its own defined columns. Creating a DynamoDB instance is easy to setup and only requires a primary key and primary key type. I chose WebPropertyName: String as my primary key since I didn't know at first how many different pieces of data the frontend would want to store and need to access.

⚡ Lambda API

AWS Lambda is a serverless function platform that runs Python, Node.js, or other server-side code whenever a request is received. I chose to write my function and tests in Python.

This challenge requires a visitor count function that is displayed on the frontend. I decided to add an action query parameter to the endpoint that performs one of two actions when the GET API is requested:

get: return the current visitor count
increment: increment then return the visitor count

The query parameters are available via the event object's queryStringParameters in the lambda_handler function, which is the entry point for the Lambda function.

The function uses the Python boto3 library developed by AWS to interact directly with the DynamoDB instance in the visitorcount table:

# aws-sam/visitor_count/app.py

dynamodb = boto3.resource('dynamodb', region_name='us-east-1')
table = dynamodb.Table('visitorcount')

# ...

table.get_item(
   Key={ 'WebPropertyName': 'VisitorCount'}
)

I also created an AWS API Gateway public endpoint that restricts any access to the function to the appropriate HTTP methods. I only have GET enabled for this function, and so the gateway only allows those requests.

</> Frontend JavaScript

I added a classic XMLHttpRequest to the frontend (we're going pre-Promise here...) that just calls the endpoint once the document loads and waits for a response:

// www/index.js

// when the document is loaded
document.addEventListener("DOMContentLoaded", function(event) {
    var xhr = new XMLHttpRequest();

   // when the request finishes...
    xhr.onreadystatechange = function() {

      // if it was successful,
        if (this.readyState === 4 && this.status === 200) {
            // update HTML
        }
    };

   // prepare the request object
    xhr.open("GET", baseURL + "/visitor-count?action=increment", true);

    // send the request!
   xhr.send();
})

However, I immediately ran into the dreaded CORS errors when requesting the endpoint. After searching on StackOverflow and countless other resources for the configuration I was missing, I ended up with the following solution:

Disable authorization in the AWS API Gateway (since this endpoint is public anyway)
Manually add the CORS header to all responses in Lambda:

   'headers': {
        'Access-Control-Allow-Origin': '*'
    },

⚙️ AWS SAM

This challenge then asks you to reconstruct the three critical application resources into AWS's Serverless Application Model: DynamoDB, Lambda, and API Gateway.

SAM is a simplified frontend for AWS CloudFormation designed specifically for serverless applications that typically utilize these resources. SAM is an infrastructure as code (IaC) platform that takes a configuration file and any associated resources (code, static resources, ...) and automatically provisions and deploys those resources on AWS.

This mindset shift from manually deploying resources and servers to automatic provision was difficult for me -- one of my biggest barriers was that IaC is not a procedural, batch-script-deployment way of thinking. With batch-script or Docker-style deployment, you step-by-step (1) authenticate, (2) provision, (3) upload/update, and (4) run. However, IaC brings this all together into a declarative, rather than procedural, environment. The declarative (YAML) configuration is then automatically provisioned and executed (deployed) by the SAM platform. The advantage of IaC, and the problem that it solves, is that all of my resources are then plainly defined with specific versioning and resource requirements, and this configuration can be easily replicated.

SAM Templates

SAM templates are similar to other YAML configuration formats. You can run all SAM-configuration locally using the sam CLI, which is packaged separately from the aws CLI.

After initializing the SAM directory using sam init, I investigated the default YAML configuration. Each service is defined under the Resources section and all AWS console configuration can be defined there. It does, however, take a while to find the approprite configuration object definition in the SAM specification. (SAM objects can also use normal CloudFormation objects as well.)

After tinkering with the Lambda resource configuration, I ended up with the following resource object that deploys my Lambda function:

# aws-sam/template.yaml

VisitorCountFunction:
   Type: AWS::Serverless::Function
   Properties:
         CodeUri: visitor_count/
         Handler: app.lambda_handler
         Runtime: python3.10
         Architectures:
         - x86_64
         Events:
         VisitorCountHttpApi:
            Type: Api
            Properties:
               Path: /visitor-count
               Method: get

The VisitorCountHttpApi is an inline EventSource object that defines an API Gateway, instead of creating a separate resource definition.

The DynamoDB resource is configured in just a few lines:

# aws-sam/template.yaml

VisitorCountTable:
    Type: AWS::Serverless::SimpleTable
    Properties:
      TableName: visitorcount
      PrimaryKey:
        Name: WebPropertyName
        Type: String

(The Lambda function ensures that the appropriate table item exists.)

In this current configuration, the DynamoDB table is deleted whenever new changes are deployed. To persist, a CloudFormation change set can be used, but I have not configured it yet.

👤 IAM Policies

The most tedious part about setting up SAM was applying the proper IAM roles. In more secure setups, you would configure an IAM identity, but for this project I just created a normal IAM user and authenticated SAM using the IAM access key. The IAM role attaches all necessary access policies for DynamoDB, S3, Lambda, etc. However, SAM would continuously fail to deploy because of a missing access policy, so I had to manually update the IAM policies until all necessary services were included.

In addition, an inline policy had to be attached directly to the Lambda resource in the SAM configuration to enable DynamoDB access, which is delegated from the IAM user:

# aws-sam/template.yaml

VisitorCountFunction:
   Type: AWS::Serverless::Function
   Properties:
      # ...
      Policies:
      - Statement:
         - Sid: DynamoReadWriteVisitorCountPolicy
            Effect: Allow
            Action:
            - dynamodb:GetItem
            - dynamodb:Scan
            - dynamodb:Query
            - dynamodb:DescribeTable
            - dynamodb:PutItem
            - dynamodb:UpdateItem
            Resource: '*'

🚀 GitHub Actions

This challenge requires GitHub actions pipelines for CI/CD. I thought that this would be one of the simpler parts of this project; however, it was unfortunately a painful process of trying to figure out how to setup SAM to work inside a workflow.

Backend

For SAM, you first have to authenticate on every workflow job using aws-actions/configure-aws-credentials@v4, then grabbing the environment variables defined for those secrets in the repository. I was stuck for a while on this since I forgot that GitHub repos can have sandboxed environments set up that contain separate credentials, and so I had to manually add that detail to the workflow job by adding environment: aws-sam.

After this, though, it was a straightforward process of using sam build and sam deploy to deploy the repository on: [push]. (Albeit, with even more IAM policy wrangling.)

Tests

Python tests were automatically generated by sam init, so I tweaked them to run the AWS SAM Lambda function and API Gateway. The template worked very well by just running pytest in the repository, and it tests both the increment and get actions by ensuring the function returns just an integer in the response body:

# aws-sam/tests/unit/test_handler.py

# apigw_get_event: pytest fixture that returns a JSON request object
def test_lambda_handler_get(apigw_get_event):
    ret = app.lambda_handler(apigw_get_event, "")
    data = json.loads(ret["body"])

    assert ret["statusCode"] == 200
    assert type(data) is int

Then, this test was added to the GitHub action by scaffolding pytest and running the test. If the test succeeds, the SAM deployment runs:

# .github/workflows/sam-pipeline.yaml

jobs:
  pytest:
    runs-on: ubuntu-latest
    environment: aws-sam
    steps:
    # ...
    - run: |
        pip install pytest
        pytest
  sam-build-deploy:
    needs: pytest
    # ...

Frontend

Although the challenge asks you to split the frontend and backend into two repos, I decided to just split the resources in the same repo into two different subdirectories. Each workflow runs whenever a change is pushed to its respective directory:

# .github/workflows/sam-pipeline.yaml

on:
  push:
    paths:
      - 'aws-sam/**'

Thankfully, the frontend CI/CD configuration was much simpler than the backend configuration. Although AWS authentication is still needed, S3 has a sync command that syncs the given directory with the designated bucket:

# .github/workflows/www.yaml

aws s3 sync ./ s3://cloudresume.sergix.dev --delete

Then, if this command succeeds, it invalidates the CloudFront cache so that the edge cache contains the latest copy of the S3 bucket:

# .github/workflows/www.yaml

aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_ID }} --paths '/*'

Click here to see the final result!

Next Steps

Although the project is complete, I would still like to accomplish the following:

Persist DynamoDB table across deploys using changesets
Use a static endpoint for the API Gateway under my subdomain, i.e. https://cloudresume.sergix.dev/visitor-count
Complete an AWS certification

Thank you for reading!

You can find me and my blog at sergix.dev.

GitHub Repository
Completed Project

Add CSS to your GitHub READMEs

Peyton McGinnis — Wed, 09 Dec 2020 18:25:17 +0000

Today on Hacker News, a link to a repository popped up with the intriguing title,

"CSS in GitHub Readmes"

The repository contains some interesting code and explanation.

Setting it up

In your repository, add a new SVG file with whatever name you like, such as header.svg.

Then, embed the image in your README using some plain ol' HTML:

<img src="header.svg" width="800" height="400">

Adding your CSS

The following template is all you need to get started. Add this code to your SVG file:



<svg fill="none" viewBox="0 0 800 400" width="800" height="400" xmlns="http://www.w3.org/2000/svg">

  <foreignObject width="100%" height="100%">

    <div xmlns="http://www.w3.org/1999/xhtml">

  <span class="nt">&lt;style&gt;</span>
    <span class="c">/* your CSS */</span>
  <span class="nt">&lt;/style&gt;</span>

  <span class="c">&lt;!-- your HTML --&gt;</span>

<span class="nt">&lt;/div&gt;</span>



</foreignObject>

</svg>

How does this work?

According to the repo,

You can put HTML (actually XHTML) and CSS inside a <foreignObject> tag inside a SVG file inside an <img> tag inside your readme. 🤯

The <foreignObject> tag is a valid SVG element that can contain any form of XML data. The XML data type (namespace) is specified using the inner tag's xmlns attribute. In this case, we'll use the XHTML namespace:

<div xmlns="http://www.w3.org/1999/xhtml">

Now all of the code inside this <div> will be rendered as XHTML!

Take extra care when writing XHTML markup. The browser forces much more strict rules than regular HTML, and you might notice some issues that the browser would typically ignore for non-XHTML markup.

What about JavaScript?

GitHub has very specific content loading policies on their servers, and when loading any type of asset the server first sanitizes the data to ensure no foreign JavaScript executes in the browser. Trying to embed <script> tags or using inline onclick attributes results in content policy errors in your browser.

Why can't I interact with the SVG's contents?

When rendering the SVG, GitHub loads it inside an <img> tag that removes the interactivity from the SVG. However, any animations are still rendered in the image.

Hope you enjoyed this fun experiment!

Check out what I did with it here.

Let's develop a website that fits you. Don't settle for a template.

Visit my portfolio to see what I'm about.

Effective application action design

Peyton McGinnis — Sat, 05 Dec 2020 19:10:19 +0000

Read this on my blog

Some of these recommendations are my own opinions on solving the core issue presented. As with many problems in UX, a panacea doesn't exist. A good designer will test their applications thoroughly to determine their best approach.

The Importance of Intention
Types of actions
Order
Reduce choices
Separation
Visual weight
Microcopy
Destructive primary actions
Conclusion
Research

The Importance of Intention

User Experience (UX) designers determine how we live our technological lives. UX engineers specifically design each interaction we experience with our devices by psychologically influencing how we interpret information through the organization and visual style of an interface. By composing accessible, user-friendly interfaces, the user has a positive response to the application, and will likely continue using it. A major part of interface design is providing the user with actions. An interface can have a variety of user actions, each with a different intention and goal, that guide the user through the application and allow the user to accomplish tasks. However, this variety can overwhelm and confuse the user if not designed properly since each action visible on the interface adds cognitive overhead. Each choice increases the complexity of the user's decision.

How do you, as a designer or developer, effectively guide the user to the action they should take?

Types of actions

There are 3 main types of actions: primary, secondary, and tertiary.

Primary action — the primary goal and intended action of an interface.
Secondary action — an alternative to the primary action that is typically less utilized.
Tertiary action — a miscellaneous action the user could take.

Each action type serves a different purpose for the user. Normally, the primary action has a positive result, such as a dialog confirmation or form submission, while the secondary action is its negation, such as canceling a dialog's action or returning to the previous step in a form. Sometimes, though, these roles are flipped — the Destructive primary actions section later in this article describes these situations.

Order

Mario Martin

@hydrosound

'Ok-key’ and ‘cancel-key’, which one should be set up on the left? It’s an eternal war of button sort between UI designers preferring ‘ok/cancel’ type and the adherents of ‘cancel/ok’ type
#UI #UX #UXDesign #Webdesign
medium.muz.li/ok-key-and-can…

12:51 PM - 19 Apr 2018

3 10

The presented order of actions in an interface is a hotly debated topic among UX designers (see this UX StackExchange question and the above tweet). The two sides of the argument are (as I have defined):

Linguistic order (Primary action | Secondary action)

Since most Western cultures and the English language read left-to-right, give the primary action first.
Progressive order (Secondary action | Primary action)

Most primary actions involve concluding a step or progressing to the next step in an application, so order the actions as if they were labeled Previous and Next.

Both arguments have a good point. So what do we choose?

In short, it doesn't really matter.

Surveys show that the order itself has marginal significance. What actually matters is consistency. If you choose to order your actions a certain way in one part of your application, maintain that order in your entire application. A user's first interaction will set their expectation, and you must meet that expectation throughout their entire experience.

Which order is most common?

Some designers argue that since Windows is the most popular operating system and it uses the linguistic order, all web applications should use the same order. However, many style guides (including Apple's Human Interface Guidelines) implement progressive order. If you're building a web application, you can perform tests to find out which order your users are most familiar with, but ultimately it doesn't make much of a difference.

Here's a few examples I found with what order they specify.

UX Guide	Linguistic Order	Progressive Order
Apple Human Interface Guidelines	❌	✔️
GNOME	❌	✔️
Material (+ Android)	❌	✔️
Ubuntu	❌	✔️
Windows User Experience Guidelines	✔️	❌
Linux	✔️	❌
Java	✔️	❌
New York State User Experience Toolkit	✔️	❌

To clarify, I did not search for any specific order. The fact that the choice is split 50/50 is a coincidence, but it generously emphasizes the point.

What if you have more than two options?

The primary action and its secondary, negative action should be the first and last actions, in either order. This follows the Serial Position Effect, a composition of the Primacy Effect and Recency Effect, which states that the first and last items in a list are psychologically perceived to have greater significance than those in the middle.

Reduce choices

Hick's Law, in essence, states that "the time it takes to make a decision increases with the number and complexity of choices."

Users have to make countless choices when interacting with your application. To help the user efficiently decide on their intended action, a simple (but difficult) solution is to reduce the number of visible choices of actions the user can make. This reduces the cognitive overhead the application forces on the user.

An interface should only provide one primary action. Each section of your application should have one goal. However, multiple secondary or tertiary actions are acceptable since there could be various alternatives to the primary action.

Separation

The visual separation of actions greatly influences how they are interpreted. Typically, actions that relate to the same objective (whether it be confirming or denying that objective) should be grouped together visually with similar visual style so that the user can easily discover related controls quickly.

Visually separating controls results in interesting user behavior. Typically, when actions are placed on opposite ends of an interface horizontally, they are initially interpreted in progressive order, even if they are not actually ordered that way.

Incorrect alignment of actions confuses the user. In modal dialogs, actions should be aligned to the right of the interface. In virtually every other type of interface, the actions should be left-aligned.

In general, keep primary and secondary actions in the same visual group and aligned left.

Visual Weight

Make the primary action of an interface stand out to draw the user's attention. Various stylistic attributes can be applied to create visual prominence, such as color, border, and iconography. A combination of these can also be used to clarify importance and intention. Secondary actions should have a less prominent style that heavily contrasts with the primary action. Sufficient contrast also alleviates issues colorblind users might have when using your application. If you removed the action labels, could you identify the primary action?

Color

Color is an invaluable tool in UX design since humans naturally associate colors with different emotions. Green evokes positive emotions and is commonly related to progression, such as the green signal on a traffic light, while red is normally associated with danger and urgency, such as a stop sign. Positive primary actions should have a positive color such as green or blue, and negative primary actions have a negative color such as red or orange. Secondary actions should be a neutral color such as gray.

Notice, however, the specific examples I used to illustrate the associations of green and red: traffic signals. Cultural differences should be a slight consideration in your designs since some cultures have atypical color associations. Analyze your target audience and decide whether you need to comply with these differences.

Icons

Used strategically, icons clarify an action's purpose and effectively add visual weight. Buttons in particular benefit from the proper use of an icon preceding its label. Use icons only on primary actions since adding icons to secondary actions quickly confuses the user with unnecessary visual weight.

Icons should almost always be paired with a textual label. Many icons, even common ones, create confusion if not explicitly explained in their contexts.

Microcopy

Every action needs to have a corresponding textual label, whether it is explicit (visual), implicit (ARIA attributes), or both. Your users obviously need to know what an action does, and well-written microcopy helps your user determine the primary action of an interface. An action's label should be clear and concise.

Action verbs

You should rarely use just the words OK or Yes as an action's label. These terms provide no contextual information relating to the primary action and require the user to repeatedly verify the interface's intention. Associate the action with an action verb. Clarify the action the user is about to perform by replacing passive nouns and interjections with imperatives. A well-chosen verb + noun combination typically meets the requirements of an unambiguous action label.

Finality

While the Cancel label functions well in most circumstances, consider the finality of your chosen verbs. If the action does not modify any user information and is reversible (non-final), choose a less destructive verb such as Go Back or Return. A verb with a safe connotation reduces the time the user spends considering their choice of action. However, if the action does modify information and perform a potentially irreversible procedure, use a strong verb.

In addition, an undo tertiary action present in the interface affirms the user that any potentially destructive actions can be reversed, reducing the finality of the operations and enabling the user to quickly take action.

Destructive primary actions

Many rules come with exceptions, and the ones I have listed so far are no exception. Occasionally, a user needs to intentionally perform a truly destructive (irrecoverable) action. These cases need to be specifically and separately addressed to prevent unwanted consequences.

As mentioned previously, adding an undo tertiary action relieves some of the user's stress in performing the action, but because the action is intended to be destructive, you should assume the worst-case scenario.

I provide the following advice when dealing with destructive actions in an interface:

When the primary action is negative (destructive), the secondary action needs to be positive.
Secondary destructive actions should be separated into a separate visual group and can be aligned opposite the primary action.

Doug Collins

@dougcollinsux

Provide physical separation between vital #controls to avoid catastrophic consequences - like shifting into park at 60 MPH when you're trying to turn the volume down.

#UX #userexperience #uxdesign #automotivedesign #ui #userinterface #uidesign #design #automotivedesign #cars

15:38 PM - 20 Jun 2018

13 30
Destructive actions should initially be disabled, requiring a "safety" primary action to be performed first to verify the user's intention.
In some cases, primary destructive actions should be visually de-emphasized. Swap the visual weights and style of the primary and secondary actions. The secondary positive action may technically be the user's intended action since interfaces with destructive consequences can be opened mistakenly.

These guidelines ensure the user does not unintentionally perform an unwanted action in your interface.

Conclusion

Despite these guidelines, the most important factor to consider in designing actions in your application is consistency. Consistency reassures your user that each interface will behave according to their expectations, and a consistent application efficiently guides the user throughout their journey. Without proper consideration of each action's visual presentation, your application irresponsibly neglects your users' expectations and needs. Responsible applications need responsible designers willing to consider these seemingly "insignificant" details.

Research

Research notes
Figma prototype

Sources

Let's develop a website that fits you. Don't settle for a template.
Visit my portfolio to see what I'm about.

Web Monetization Plugin for Gridsome

Peyton McGinnis — Tue, 02 Jun 2020 20:13:31 +0000

UPDATE: This plugin is now featured on the homepage of the WICG's Web Monetization website under "Web Monetization Tools". So excited! 😄

Here's my entry for the Grant For The Web x DEV Community hackathon. I hope you find it useful!

Link to repository
NPM

What I built

A web monetization plugin for the Gridsome static site generator.

Submission Category:

Foundational Technology

Plugins and integrations initiate acceptance for new web technologies. This plugin helps developers using the Vue-based Gridsome static site generator to avoid interacting directly with the DOM and easily attach events, modify monetization tags, and get monetization state with just a few lines.

Demo (CodeSandbox)

Open the demo in a separate tab. Monetization is disabled in <iframe> by default.

Link to Code

Sergix / gridsome-plugin-monetization

Web monetization for Gridsome.

gridsome-plugin-monetization

Web monetization plugin for Gridsome.

📖 Release Notes

Setup

Add gridsome-plugin-monetization dependency to your project

yarn add gridsome-plugin-monetization # or npm install gridsome-plugin-monetization

Add gridsome-plugin-monetization to the plugins section of gridsome.config.js

{
  plugins: [
    {
      use: "gridsome-plugin-monetization",
      options: {
        paymentPointer: "$wallet.example.com/alice", // your payment pointer
        global: true, // add monetization to every page; default: true
      },
    },
  ],
}

Usage

For gridsome-plugin-monetization to work properly, you must specify your payment pointer (paymentPointer) in the gridsome plugin options as shown above.

NOTE: As of now, any of the following methods are unable to be accessed at build time through component data or templates due to SSR constraints.

Methods

`$monetization.enable()`

Enables web monetization for the current page if not already enabled.

Returns: HTMLElement | false

`$monetization.disable()`

Disables web monetization for the current page if not already disabled.

…

View on GitHub

How I built it

Gridsome plugins are fairly simple to write. For client plugins (such as this), all you have to do is make a gridsome.client.js, and you export a function such as the following:

export default function (Vue, options, context) {
  const $monetization = {}

  // server code
  // ...

  if (!process.isClient) return

  // client-only code
  // ...

  Vue.prototype.$monetization = $monetization
}

Then, you link your plugin to a Gridsome project via npm link gridsome-plugin-monetization for plugin development and testing.

I used the context to interact with Gridsome's build step when the global option in the plugin configuration is enabled.

I attempted to keep the code as composable and clean as possible, but when interacting with the DOM it can be a challenge. 😆

Example/Usage

Full setup instructions and documentation are in the repository's README.

Install via npm or yarn —

yarn add gridsome-plugin-monetization # or npm install gridsome-plugin-monetization

Add the plugin to Gridsome, and set your paymentPointer —

// gridsome.config.js

module.exports = {
  // ...
  plugins: [
    {
      use: "gridsome-plugin-monetization",
      options: {
        paymentPointer: "$wallet.example.com/alice",
        global: false, // enabled on every page (default: true)
      },
    },
  ],
}

Use in your components, pages, and layouts by accessing Vue.prototype.$monetization —

// component.vue

export default {
  methods: {
    enableExtraContent() {
      // ...
    }
  },
  mounted() {
    this.$monetization.enable()
    this.$monetization.onStart(() => this.enableExtraContent)
  }
}

Additional Resources/Info

Due to the nature of server-side rendering and static sites, and the state of the monetization API (as well as Gridsome's plugin API), the plugin's methods are only accessible via the client and cannot be used in a component's data, computed, and <template>.

For now, the best way to use the API is to declare defaults within your component's data and add event hooks within your component's mounted() hook. This way, the DOM has time to load before attempting to access the monetization API.

Thank you for reading! God bless!

You can find me at sergix.dev.
Reach out at hello@sergix.dev for anything that's on your mind!

My New Personal Website!

Peyton McGinnis — Sun, 31 May 2020 01:23:58 +0000

Code hosted on GitHub

It's finally done!

After about a week-and-a-half of design and development, my personal portfolio site has been completed.

Currently, it only shows off a few designs and a couple websites I've worked on, but I really enjoyed building it and maybe starting a new personal blog.

Stack

The site was built with -

Gridsome static site generator
Tailwind for styling
Netlify for hosting
Figma for UI prototyping

For those of you who don't know, Gridsome is an awesome static site generator for Vue. If you're interested in making a personal site and love Vue, it's the way to go!

All the blog posts are written in plain markdown and pulled in via the Gridsome filesystem plugin and the GraphQL layer Gridsome provides.

Future features

I'm looking to add -

Web monetization
Fathom analytics
Comment system (might roll my own via Netlify Functions and AWS)

...and hopefully some other interesting features in the future!

Thanks for reading! God bless!

Contact me at hello@sergix.dev.

DEV UI Update

Peyton McGinnis — Tue, 12 May 2020 15:09:06 +0000

It seems like the DEV.to team's been hard at work as always with a big UI overhaul and a monster commit!

Quick question to the DEV team: how does it determine when to show comments for a post on the homepage? It seems like some posts show one or two comments but most don't.

Discussion Subscribe Button

Peyton McGinnis — Wed, 06 May 2020 02:40:47 +0000

A meta discussion about discussions. Can't get any more meta.

Is this a new feature? or am I just blind?

Workdrop — #Twiliohackathon Entry

Peyton McGinnis — Thu, 30 Apr 2020 03:52:58 +0000

Here's my entry for #twiliohackathon. I hope you enjoy it!

GitHub Repository (MIT Licensed)
Stackshare
Live Demo

I'm a senior in high school.

When South Carolina, my state of residency, announced the closing of schools statewide, teachers scrambled to quickly find working solutions for eLearning.

Some issues, such as videos (YouTube) and classroom sessions (Zoom), were solved quickly. Other problems took some more research, and one seemed particularly difficult: assignment collection.

Our school had a student system set up prior to COVID-19 that had an integrated homework collection system, but it was archaic and scarcely used, and ended up creating more problems than it solved.

My english teacher in particular became particularly frustrated as the school resorted to collecting files by email, which quickly becomes unmanageable, especially considering all the other email teachers receive. It would be much simpler to even just receive one email with all the assignments.

I took notice of this. When the #Twiliohackathon was announced, I remembered that Twilio owns SendGrid, and it seemed impossible to not take this opportunity to create a solution to this evident problem.

What is workdrop?

Workdrop is a simplicity-conscious web app for teachers and educators needing to request files from their students.

Who made it?

This project was completed in around 15 days by me, Peyton McGinnis (sergix).

What makes it different?

Most people refer to Dropbox as already having solved this problem.

However, when trying to figure out how I could explain how to use Dropbox's request feature, and coupled with Dropbox's pricing, I knew it would be difficult to recommend to one teacher and end up needing to have the school finance it.

But, in particular, Workdrop focuses on one thing, assignment collection, and is good at that one feature. Some may think this is a disadvantage, but that was my intention with building the app.

Teachers are not often tech savvy, and piling feature upon feature increases mental overhead and frustration for someone trying to accomplish a task as simple as requesting an assignment. In most schools, the teacher simply writes their assignment on the whiteboard/blackboard and every student then knows it's due. It should be just as simple online.

How does it work? 🤔

My series here on DEV.to has detailed the set up process and design, but the concept is simple.

A teacher visits the website. They click on "Request an Assignment". They enter the name of the assignment, their students' emails, an attached message, and their email. Then, they submit this information.

An email is sent to the teacher with a link to access their student's submissions. An email is also sent to each student with a link to submit their assignment.

When a file is submitted by a student, the teacher can access the submissions page and download the assignment.

The Stack

Frontend

Vue.js
Nuxt.js
TailwindCSS
Sentry
Netlify

Backend

MongoDB Atlas
MongoDB Stitch
AWS S3
Twilio SendGrid

Is it scalable?

I built workdrop to scale up and down very easily. The frontend is hosted as a static site on Netlify, and the backend runs a MongoDB Atlas cluster and an AWS S3 bucket. Each of these services tend to scale very well, and since workdrop's core logic is very simple it wouldn't be hard to integrate more services, such as a Redis edge cache.

At the moment, every one of these services is being hosted for free. The only thing I've paid for so far is the domain name, workdrop.app.

Live demo!

The app can be accessed online at workdrop.app and is a fully-functioning web application.

The code ⌨️

All code is hosted in this GitHub repository.

Twilio API integration ✉️

This project uses Twilio SendGrid as the core communication API to send out assignment emails.

Category entry 👍

For my project, I would like to enter the Covid-19 Communications category. While I suppose it could fit into a couple different categories, remote education was specifically listed for this category so I thought it would be best to enter.

The about page on the workdrop website goes into more detail, and is nicely illustrated.

Application security 🔒

As I detailed in my previous post, I have properly set up (to my knowledge) a secure S3 instance that is only accessible via my MongoDB Stitch instance.

All these services are secured with multi-factor authentication, and my domain is SSL-enforced.

Every API key has only been created when absolutely needed and is not stored anywhere in plaintext (except the Sentry DSN, but that's intended to be plaintext.)

Future features 🆕

Just because this hackathon has ended does not mean I'm done with workdrop. There's still a pile of improvements and small features needed before I really put it into full-production mode, but the application is definitely at a usable state.

In addition, I'd like to move away from an email-less solution entirely, but this would only (in my understanding) be viable through a mobile app. I've looked into and heavily considered using NativeScript-Vue.

Lastly, I would like to add SMS support, but I would need to use a link minimizer and I haven't found a great solution quite yet.

A note on the Terms of Use and Privacy Policy 📝

Since Workdrop is currently being hosted and readily available to users, I thought it would be wise to craft a Terms of Use and Privacy Policy agreement.

The Terms of Use states that the project is MIT licensed, and mostly is intended to protect against unlawful types of file submissions.

The Privacy Policy states some simple notes about data collection and usage. Workdrop does not store any analytics or usage data, and only stores data that the user provides that is critical for the application's function.

As of right now, as another user pointed out, I cannot under United States law allow children under 13 to access the app without becoming COPPA compliant. I'm taking steps to ensure that this becomes available, but since the target audience for Workdrop is currently middle and high school students it doesn't affect much.

A final note

Thank you Twilio and DEV for hosting this hackathon! It was a great experience to learn some new serverless stuff, and it's always a joy to learn a new API. Thank you so much for reading! God bless!

Workdrop — The Frontend

Peyton McGinnis — Thu, 30 Apr 2020 03:43:59 +0000

This continues my entry for #twiliohackathon!

GitHub Repository (MIT Licensed)
Stackshare

In a previous post, Workdrop — UI Design and Prototyping, I went over my project's design system and some basic UI elements. This post will summarize the actual frontend, built with Nuxt.

Nuxt setup

Usually, I use Gridsome for my Vue SPA's, but it seems like Nuxt is much more oriented towards dynamic applications that are constantly interacting with a backend.

When creating my project, I did not use SSR mode because I wanted to host my site on Netlify. I suppose using SSR would reduce client bundle size, but for now it'll stay an SPA.

`nuxt.config.js`

Nuxt provides a really nice config file for configuring <head> contents, plugins, middleware, routing, and other build settings.

I inserted some custom <meta> tags for OpenGraph tag support and some other service integration for PWAs.

// nuxt.config.js

export default {
  // ...

  head: {
    title: process.env.npm_package_name || '',
    meta: [
      // ...
      {
        name: 'apple-mobile-web-app-status-bar-style',
        content: 'black-translucent',
      },

      { name: 'twitter:card', content: 'workdrop' },
      { name: 'twitter:url', content: 'https://www.workdrop.app/' },
      { name: 'twitter:title', content: 'workdrop' },
      {
        name: 'twitter:description',
        content: 'An assignment requesting app for teachers and educators.',
      },

      { property: 'og:title', content: 'workdrop' },
      { property: 'og:type', content: 'website' },
      { property: 'og:url', content: 'https://www.workdrop.app/' },
      { property: 'og:image', content: 'https://www.workdrop.app/ogimage.png' },
  },

  // ...
}

Plugins

For error tracking, I'm using Sentry. All you have to do to add Sentry integration to your Nuxt project is install @nuxtjs/sentry and add it to your modules and set your Sentry DSN:

// nuxt.config.js

{
  // ...

  modules: [
    // ...
    '@nuxtjs/sentry'
    // ...
  ],

  sentry: {
    DSN: '[Your DSN]'
  },
  // ...
}

Tailwind and PurgeCSS

When creating a new Nuxt project, you can choose to automatically setup TailwindCSS and PurgeCSS, which go together like bread and butter.

However, global styling rules can be slightly frustrating to configure since PurgeCSS will automatically remove CSS that it doesn't think is being used.

To circumvent this, I added a donotpurge.css (appropriately named) stylesheet that is loaded along with the ignored assets loaded with Tailwind:

/* tailwind.css */

/* purgecss start ignore */
@import 'tailwindcss/base';
@import '~/assets/css/donotpurge.css';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

The Design

In my earlier post I discussed the basics of the design system, but did not disclose the full UI. Well, here it is!

Now, onto the actual implementation .

Navigation

For desktop navigation, it's a pretty simple Navbar with a little stylish border animation:

For mobile, I normally like to implement a fullscreen navigation menu to make the links larger and easier to tap. I right-justified the text since most people are right handed to make it easier to reach.

Also, I really considered some of the details in the simplicity of my app, considering the target audience. In this project, I tried to move away from non-labeled buttons for the most part, so rather than using a hamburger icon to open the menu it simply says "MENU", which obviates its function. I actually am considering doing this with all my projects from now on.

The footer is very basic as well:

Landing Page

For the landing page, I am using an illustration from isometric.online as mentioned in my previous post. I customized the colors to fit the design system.

I wanted to get my users up and running ASAP, so the "Request an Assignment" button takes you to the request form without needing to sign in.

About page

I really enjoyed laying out this page's content. Since it doesn't require a lot of interaction, I had a lot more creative freedom.

Request page

This page was very interesting to design and program.

The form is split into four parts, and each part requires one specific piece of information. This way, it's clear each step of the way what is needed and reduces mental overhead.

In the code, it's a bit hacky, but I used a dynamic Vue component. To transition between each part of the form, each form emits a continue or back event. This calls a method that increments a counter and changes the dynamic component to the step of the form that the counter is on.

<component
  :is="currentFormSection"
  @continue="nextStep"
  @back="previousStep"
></component>

const FORM_STEPS = [
  'RequestFormAssignmentName',
  'RequestFormStudents',
  'RequestFormMessage',
  'RequestFormEmail',
  'RequestFormReview',
]

export default {
  // ...
  computed: {
    currentFormSection() {
      return FORM_STEPS[this.currentStep]
    }
  }
  // ...
}

I really want to refactor this to use a state machine library such as XState, but for the time being it works well.

Form errors

Whenever a field is empty of invalid, such as emails, it opens my custom toast notification through a reference.

<toast ref="errorToast" title="Uh oh!" icon="error">
  We couldn't create the assignment. Refresh and try again.
</toast>

this.$refs.errorToast.open()

Form data

Since the form switches between components, it was obvious that Vuex would be needed as a centralized store. The Vuex module is very straightforward:

// store/request.js

export const state = () => ({
  assignmentName: '',
  students: [{ email: '', valid: false }],
  message: '',
  email: '',
})

export const mutations = {
  addStudent(state, email) {
    state.students.push({ email: '', valid: false })
  },
  editStudent(state, { index, newEmail }) {
    state.students[index].email = newEmail
  },
  setStudentValid(state, { index, valid }) {
    state.students[index].valid = valid
  },
  removeStudent(state, { index }) {
    state.students.splice(index, 1)
  },
  setAssignmentName(state, assignmentName) {
    state.assignmentName = assignmentName
  },
  setEmail(state, email) {
    state.email = email
  },
  setMessage(state, message) {
    state.message = message
  },
  clear(state) {
    state.assignmentName = ''
    state.students = [{ email: '', valid: false }]
    state.message = ''
    state.email = ''
  },
}

Email Validation Microinteraction

A few weeks ago, I found a very nice email validation microinteraction from dribbble that had been converted into an actual CSS keyframe transition.

I took the code and converted it into a Vue component, and thought this would be a great opportunity to use it!

From Aaron Iker on dribbble

Submit page

The submit page has two possible states: accessing and submitting. The state depends on the provided queries in the URL. Currently, the solution is pretty ugly, but it works.

When accessing submissions, the assigner has the capability to individually download each submission or download them all simultaneously. I plan to integrate zip.js or a similar library to compress the downloads when downloading them all.

When submitting, I used FilePond to easily integrate a nice file uploading component in my page. When a file is submitted, it gets the AwsService from MongoDB Stitch and calls PutObject on the file object.

However (and this had me stuck for a couple days), when using Stitch you have to convert the file to a specific binary type using MongoDB's BSON type by first converting an ArrayBuffer from the file's contents to a UInt8Array:

// pages/submit.vue

const reader = new FileReader()

reader.onload = (e) => {
  const fileData = new Uint8Array(reader.result)
  const fileBson = new BSON.Binary(fileData)

  // upload to S3
  // ...
}

reader.readAsArrayBuffer(file)

The Logic

So now that I've detailed the design, here's a high-level layout of the entire application's flow:

Thank you for reading! The next post will be the official submission. God bless!

Workdrop — Setting Up Serverless

Peyton McGinnis — Mon, 27 Apr 2020 16:46:42 +0000

This continues my entry for #twiliohackathon!

GitHub Repository (MIT Licensed)
Stackshare

Before we get going with the frontend, I'll describe a summary of some of the serverless setup with MongoDB Stitch, AWS, and Twilio SendGrid.

MongoDB

I already discussed setting up a MongoDB cluster in the second entry in this series, but now it's time to get cooking with serverless.

Functions

MongoDB Stitch, of course, has serverless functions built-in, and makes Atlas database interactions a breeze.

Requests

The architecture is pretty simple: users enter their assignment name, student emails, a personalized message, and their email. Then, it sends all that data to a MongoDB function.

There are two collections in the database: requests and submissions.

Before the user's data is put in the requests collection, two UUID tokens are generated by a separate function:

// generateToken()

const uuid = require("uuid");

const token = uuid.v4('workdrop.app', uuid.v5.DNS);
const accessor = uuid.v4('workdrop.app', uuid.v5.DNS);

return { token, accessor };

The first token will be sent out to the requester and each student. The second accessor token will only be sent out to the requester, and will allow them to access a page where they can download the submissions.

Those tokens are inserted along with the user data in a new document.

// createRequest
const { token, accessor } = context.functions.execute("generateToken");

const requestsCollection = context.services.get("my-cluster").db("workdrop").collection("requests");

const newRequest = {
  token, accessor, name, email, request_emails, message
};

requestsCollection.insertOne(newRequest)
  .then(result => console.log(`Successfully inserted request with _id: ${result.insertedId}`))
  .catch(err => console.error(`Failed to insert request: ${err}`));

After this document is inserted, a trigger calls another function which uses the Twilio SendGrid API to send out the emails.

Submissions

For submissions, the client first connects to MongoDB and then, through the MongoDB API, connects to the AWS S3 bucket (details below). The submitted file is uploaded to AWS, and the returned URL is sent to MongoDB through a function virtually identical to the request function.

AWS

Setting up AWS can be pretty complicated sometimes, especially involving authentication. This was my first time setting up an S3 bucket and permissions.

First, you need to create your account. This will create a root user, which has access to everything in AWS. You should quickly enable multi-factor authentication and have a strong and secure password for your root user.

Your serverless app should never (and I'm not even sure if it can) authenticate with AWS via the root user. Instead, you create a special IAM user where you specify your exact permissions. API keys and secrets are then generated specifically for this user.

For myself, I simply created a new policy called workdrop-stitch and added the S3 GetObject and PutObject permissions.

After setting up AWS via the management console, I went back over to MongoDB and setup a new Third-Party Service, selecting AWS.

Then, you specify your API key and you're off to go!

Twilio SendGrid

Here's the somewhat critical part of my entry: Twilio API integration. For my project, the Twilio service I'm using is Twilio SendGrid.

Even if using a Twilio API wasn't a part of the hackathon requirements, I'm certain I would be still using SendGrid because of how fantastic its API is.

Sender authentication

In order to properly ensure that emails sent out with SendGrid are verified with all email clients and services, you must set up some DNS records to validate your domain with SendGrid. Then, you can have the emails sent out from your app look like xxxxxx@workdrop.app instead of using SendGrid's default xxxxxx@sendgrid.net.

Setup is straightforward and simple, especially if you're using CloudFlare DNS as a proxy or Netlify's DNS. All that's required is creating a few specific CNAME records that point to sendgrid.net. Instructions specific to your user are in your SendGrid dashboard.

A note on SendGrid with SSL

If you have to have SSL security on all traffic through your domain, keep in mind that if you're using Click Tracking with SendGrid (which I do have disabled for my app at the moment), you'll have to direct your traffic through a seperate proxy secured with a certificate for your domain. This is because the CNAME record used to point the traffic from your domain to SendGrid's tracking servers is not HTTPS secured, so most browsers will simply refuse to connect to the link if HTTPS is enforced on your domain. And keep in mind, .app and .dev domains are SSL-enforced.

Using the API

For JavaScript, you can either use the SendGrid Node.JS API or manually call the API via REST.

Here's an example of my app's REST API call using JavaScript and MongoDB Stitch:

// sendRequestEmails()

// context.http.post is provided by MongoDB Stitch functions

context.http.post({ 
    "url": "https://api.sendgrid.com/v3/mail/send",
    "headers": { Authorization: [`Bearer [API_KEY]`] },
    "body": {
        "personalizations": [{
          "to": [{
                "email": "example@example.com"
      }],
    }],
        "from": {
          "email": "no-reply@workdrop.app"
        }
    },
    "encodeBodyAsJSON": "true"
)
  .then(res => {
      console.log(`EMAIL SUCCESS [${res.statusCode}]`);
  })
  .catch(res => {
      console.log(`EMAIL ERROR [${res.statusCode}]`);
  });

AWS S3 Policy Setup

Here's the part of the project that was the most frustrating for me.

AWS policies can be very difficult to set up, especially for someone like me who never has done it before. And any information on specific policies can be difficult to find on forums and other sites.

User management

First, after you create your AWS root account, you must create an IAM user that your app will use to connect to your services.

When creating your IAM user, you must enable programmatic access since this will only be accessed through an API and not the AWS console.

S3 Policy

You can attach an arbitrary number of policies to any IAM user to enable it to perform specific actions across AWS services.

For S3, there are two primary policies that we need to enable: GetObject and PutObject.

In addition, I found that I had to enable GetObjectAcl and PutObjectAcl.

After enabling these policies, you simply select the bucket resource from your account in the Resources field pictured above.

Bucket setup

After creating these policies, you have to manage a couple permissions for your S3 bucket.

In the Permissions tab of your bucket, you need to enable all block public accecss settings except Block public access to buckets and objects granted through new access control lists (ACLs). This involves the GetObjectAcl and PutObjectAcl permissions we had to set up earlier so authenticated APIs can access our bucket properly.

Next, in the Bucket Policy tab, you need to insert an ARN policy to control access from users. Anything within brackets [] below will need to be replaced with your information. AWS has a policy generator that can help.

{
    "Version": "2012-10-17",
    "Id": "[policy ID]",
    "Statement": [
        {
            "Sid": "[Sid]",
            "Effect": "Allow",
            "Principal": {
                "AWS": "[Your AWS user ARN]"
            },
            "Action": [
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "[Your S3 bucket resource ID]"
        }
    ]
}

Lastly, in the CORS configuration tab, you need to put the following XML. This allows any cross-origin request to be authenticated with the S3 API.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Now onto the frontend. Thank you for reading! God bless!

I need some help with a software engineering research paper!

Peyton McGinnis — Tue, 21 Apr 2020 04:19:30 +0000

Hey everyone! 👋

Edit:
Thank you to everyone who has sent me their contributions! The requirement for my paper has been fulfilled and everyone has been a great help to me.

As a senior in high school, one of my requirements for graduating this semester is completing a vocational research paper. Essentially, I research and write about a field I would like to enter, and obviously I decided to write about software engineering!

Part of the paper is having someone (or multiple people) currently in the field of software engineering/development complete a questionnaire inquiring about their job.

As great as this is for receiving experience and answers to common questions about entering the field of software, I do not personally know anyone who works in developing software. So I've decided to reach out here and see if anyone would like to contribute!

The details

The questionnaire is simply a short (8 questions) list of questions that you would type out the answers to and send back to me via email.

Your answers will not be used in any manner outside of submitting the paper to my school. Your name will be the only disclosed information.

If you are interested in helping out a budding software developer, please reply below! I'll send out the questionnaire to the email that is public on your profile.

And of course, your time and answers are extremely valuable to me. I am passionate about software development and engineering, and I would love any advice you can give.

Thank you! 😄

Workdrop — UI Design and Prototyping

Peyton McGinnis — Mon, 13 Apr 2020 00:23:55 +0000

This continues my series on my #twiliohackathon submission! Thanks for reading!

GitHub Repository (MIT Licensed)
Stackshare

Normally, I do all my UI/UX design and prototyping with Adobe XD, but given all the great things I've been reading about Figma, I thought I'd give it a whirl.

Basic Theme

Starting out, I created a new project in Figma and created an iPhone 8 size layer. (mobile first!)

As you can see in the post cover image, I already have a logo designed, but I haven't fully decided on a theme yet.

Colors

I've decided to go with a mostly monochromatic color scheme so that the actions really pop out with bright neons, such as mint and red for success and error, respectively.

I'm not that great with colors, but here's a base pallette I hope will work well (I used ColorDesigner to put this together):

Obviously, I can change the colors as needed, but I'll stick with it for now.

The full color pallette:

Background — #FAFAFA
Foreground — #121212
Error — #F23034
Note/Info — #732DD9
Success — #4FED77
Warning — #FFD10F
Interaction — #1C3FFD

Type choice

I absolutely love type design, and my go-to typeset for web projects is TT Hoves, which sadly isn't free but it's well worth the cost.

*TT Hoves type specimen by TypeType

Completed design system

After finishing the main theme, I created local styles in Figma for both the colors and the type and then exported it as a library for use in my other Figma files.

Components

Now that we have a basic theme down, it's time to start on a couple of the components.

Notifications

I played around a bit with some icons and colors, and got to a place where I liked the notification design. I'm trying to keep the design mostly flat, but I'll end up adding some box shadows later on. I also adjusted some of the text colors to be accessible with a minimum contrast of 7.0.

Buttons

The top button is the primary action button. Each page will only have one primary action, as to make clear the suggested action the user should take. The bottom button is the secondary action button, which is an alternative but likely action the user could perform.

Illustrations

To make the interface pop, I added some illustrations from isometric.online, which provides free, open-sourced (MIT) isometric illustrations. I customized the colors in them to conform to the design system.

The full UI

As of now, I have completed the entirety of the UI, but I will not be showing it off until the hackathon is completed. Check back later to see it in action!

DEV Community: Peyton McGinnis

Conquering the Cloud Resume Challenge

🤔 What is the Cloud Resume Challenge?

⚔️ Take the challenge!

📚 Stack

(ง'̀-'́)ง The Challenge

Setup

🪣 S3

↪️⤵️ DNS Routing

🔒 HTTPS

🛢 DynamoDB

⚡ Lambda API

</> Frontend JavaScript

⚙️ AWS SAM

SAM Templates

👤 IAM Policies

🚀 GitHub Actions

Backend

Tests

Frontend

Click here to see the final result!

Next Steps

Thank you for reading!

Add CSS to your GitHub READMEs

Setting it up

Adding your CSS

How does this work?

What about JavaScript?

Why can't I interact with the SVG's contents?

Hope you enjoyed this fun experiment!

Effective application action design

Table of Contents

The Importance of Intention

Types of actions

Order

Which order is most common?

What if you have more than two options?

Reduce choices

Separation

Visual Weight

Color

Icons

Microcopy

Action verbs

Finality

Destructive primary actions

Conclusion

Research

Sources

Web Monetization Plugin for Gridsome

UPDATE: This plugin is now featured on the homepage of the WICG's Web Monetization website under "Web Monetization Tools". So excited! 😄

What I built

Submission Category:

Demo (CodeSandbox)

Link to Code

Sergix / gridsome-plugin-monetization

Web monetization for Gridsome.

gridsome-plugin-monetization

Setup

Usage

Methods

$monetization.enable()

$monetization.disable()

How I built it

Example/Usage

Additional Resources/Info

Thank you for reading! God bless!

My New Personal Website!

It's finally done!

Stack

Future features

Thanks for reading! God bless!

DEV UI Update

Discussion Subscribe Button

Workdrop — #Twiliohackathon Entry

What is workdrop?

Who made it?

What makes it different?

How does it work? 🤔

The Stack

`$monetization.enable()`

`$monetization.disable()`

`nuxt.config.js`