DEV Community: Drew Ronk

Quick and Easy Deployment with Vercel

Drew Ronk — Sun, 13 Mar 2022 19:56:39 +0000

Recently, I learned about a platform called Vercel, which allows for fast and accessible deployment of static sites and frontend frameworks. Given how much legwork can be involved in getting a site deployed, a system like this can be a game-changer for developers who don't need an overly complex deployment of their frontend.

Businesses have started to see the value in this too, as the platform now has a ton of customers, including: McDonald's, The Washington Post, Facebook, Patreon, Uber... The list is impressively long and filled with household names.

So, what makes Vercel so special? Let's find out.

What is Vercel?

Simply put, Vercel is a Function as a Service (FaaS). This essentially means that the platform handles most of the extra stuff involved with deploying a website, so developers don't have to. That "extra stuff" could be infrastructure such as servers or the extensive CI/CD configuration needed to deploy a site, both of which take some work on the developer's end to get set up and maintained.

What makes Vercel so great? It's super good at the whole FaaS thing and makes it really easy for developers to go from localhost to having a site anyone can access. Vercel provides a short and easily-repeated process for developers to deploy their sites through the platform, allowing for additional configuration but taking care of most of it already--making life a lot easier for someone (like me) who just wants a quick and easy way of deploying a site. It also automatically scales due to its offer of serverless deployment for users, and allows developers to customize integrations and setup for their projects.

Getting Started

To better understand Vercel, let's import a project into Vercel from GitHub. To do so, first set up an account with Vercel (it's free) and link your GitHub account in Vercel. On your Vercel Dashboard, you'll see a New Project button. Click that, and you should see the following screen:

As you can see, I have the option to import from a Git Repo on the left and Vercel has access to my GitHub projects. Before importing a project to deploy, make sure your project is up-to-date in GitHub. When you click the import button, you'll have some configuration to do with your project:

In most cases, you won't have any issues here. If your Framework Preset box on this page is set to "Other," your project isn't using a framework that Vercel automatically supports. That's perfectly fine, you may just need to update the "Output Directory" dialog box in the Build and Output Settings to match your specific project's expected output directory (often "_site" or "dist". If you notice your project is not deploying properly, this can also be done in the Settings tab of your project once it's set up.

As long as you like the name of your project, you can hit the Deploy button! When you do, you'll probably see a page like this, and you're good to go!

Now, your site is deployed through Vercel and you can access it any time from the link the platform provides. Any time you update the main branch of the GitHub repository you linked Vercel, the site automatically updates to reflect your changes.

If you'd like to see more, Vercel also has a very useful docs page with demos of how to set up quite a few commonly-used frontend frameworks.

My Experience Thus Far

Using Vercel, I've already deployed four websites!

The first three were 11ty demos I discussed in this article, all of which were incredibly easy thanks to Vercel's support for 11ty. Even the last demo in my 11ty article, which fought me tooth and nail when I tried to deploy it using GitHub Actions, deployed with ease using Vercel.

The last demo site I deployed was from RedHat's Michael Potter, which can be found here. As the demo uses Lit, I had to clone the project locally via GitHub, install Vercel globally, run npm install, and run vercel dev to get the project properly tied to Vercel. I also had to override the "Output Directory" dialog box in the Build and Output Settings and set it to "dist" for the project to successfully deploy. These extra steps seem to be a common thing for frameworks outside those automatically supported by Vercel, but I could be wrong.

Included below are the links to all four projects, as well as screenshots of how they look on Vercel:

The Developer Experience

One of Vercel's main goals is to improve DX, and I'd say they do so successfully. Where other CI/CD offerings such as GitHub Actions require most of the setup to be manually done by the developer, Vercel abstracts a lot of this and only asks for input from the developer where absolutely necessary. This allows for faster feedback loops during development and less confusion for the developer, which I really appreciated. Where I felt like I was a little in the weeds with GitHub Actions and was basically just guessing at what needed to be fixed when I ran into an issue, Vercel was guiding me in the right direction by default and offering me the option to do more once we got a basic setup. I really appreciated this kind of experience as I am not well-versed with site deployment.

Static Site Generation: Working with Eleventy

Drew Ronk — Mon, 28 Feb 2022 06:26:07 +0000

I recently learned about Static Site Generation (SSG) via Eleventy (11ty), and wanted to use this post to talk about how it went when I tried to use it to make a blog. 11ty is a Static Site Generator that simplifies this workflow by providing tons of plugins and a clean, intuitive developer experience. As 11ty already has a basic Getting Started Guide, this is going to read more like a review than a tutorial.

In this review, we'll be talking about three Eleventy-based templates that I tried out:

11ty's Getting Started Guide
11ty's Base Blog
Malte Ubl's Google-co-signed "Eleventy High Performance Blog"

I'll compare the three as I experienced them, and briefly comment on what it took to get them up and running.

1. 11ty: Getting Started Guide

The most basic of the three options I'll be discussing, this was was essentially a "Hello World" boilerplate of 11ty. As I knew very little about 11ty going into messing around with it, its lack of templating had me confused ~pretty~ quickly. However, I recognize that this was meant to be a clean slate for someone looking to have a no-frills experience with 11ty, and that's exactly what it was. I didn't feel like I was dealing with a bunch of unnecessary code, and it was very simple to work with once I did some googling.

As the two templates I worked with (see options 2 and 3) had a blog-like setup, I modelled this in the same way. As you can see above, I was able to pretty quickly get some HTML up with 11ty and link to some static sites written in markdown, such as a previous blog post I had created and placed in this project:

Yes, it looks like unformatted HTML--because it is. I put a markdown file in my directory, and out came a really clean HTML file in its own directory. Pretty cool.

If you'd like to see how I did this, here's the GitHub repo and the site I have my project hosted on.

2. 11ty: Base Blog

This was the first template I tried, also created by 11ty. Out of the three options I'm discussing, I liked this one the most for learning 11ty's features without feeling in over my head. I was able to quickly understand the logic behind the project's organization and how the components fit together, and the README that came with it was simple without being ambiguous.

My favorite aspect of this one is that it included a lot of stylistic touches, such as having preset CSS and out-of-the-box components like a navigation bar. It made the experience of building a blog site really fast and accessible, while giving me a hint at what was possible with 11ty. Here's the home page I was able to create within ten minutes of running npm install for the first time:

As is the case with 11ty in general, all it took was me putting some formatted markdown in a file in the directory to produce this:

If you'd like to see my attempt at this, here's the GitHub repo and the site I have my project hosted on. If the site shows the page without rendered CSS, yeah that confused me too--I've had a great time with GitHub Actions lately.

3. Malte Ubl x Google: Eleventy High Performance Blog

The third option I'll be discussing was also a template, created by Google's Malte Ubl. I stumbled across this while looking at 11ty templates, and was really impressed by how verbose this option was. Where the 11ty Base Blog provided a strong framework from which to build, this provided a fully-functioning, highly-stylized website that only needed to be filled in.

Despite this being the case, I felt this template was more advanced than needed for my intent and purpose--which was actually harmful when I went to deploy it with GitHub actions. That said, it shares a lot of the benefits of 11ty's Base Blog while also including some really cool advanced features, such as support for Google Analytics and out-of-the-box testing. Plus, the pre-loaded CSS, built-in progress bar, and automatically-estimated reading times made the site look incredibly professional from the first time I built it. I was in over my head fast, but I was learning the entire time and quickly found myself looking at a high-quality product. Here's what I came up with using this template:

And a sample post:

The one problem I ran into with this one was when it came to CI/CD. I got the project's built-in CI to work, but for the life of me couldn't get GitHub Actions to let me build this project for deployment. The project has built-in support for Netlify, I just didn't feel like venturing down that rabbit hole.

So, thank GitHub Actions for this meme.

If you'd like to see my code, here's the GitHub repo and here's where I would have put my site (ya know, if I had one).

Getting Started with Docker: Docker Playground

Drew Ronk — Thu, 24 Feb 2022 23:32:32 +0000

In a previous article, I stumbled my way through a tutorial on how to install Docker for Windows 11; however, I made it pretty clear I had no idea how to use Docker (let alone what it was) at the time. So, I'm going to use this post to learn more by starting the tutorial on Docker's website: Docker Playground, which is their free way to learn the system. I'm also going to talk a little about Docker itself, and discuss how to create a Dockerfile using this microservice as a backdrop. Let's get to it!

Why is Docker so Powerful?

I talk a little about this in that post I linked above, but Docker is incredibly powerful. This is because container-based architecture allows for the creation of instances of an application, allowing a developer to customize and replicate these instances as much as they want without interfering with anything else on a user's system.

Docker takes this to another level, as it allows developers to toss everything needed to run an app into one easily-distributed package, then ship it to any system that can support the application. This makes the application easier to manage--because they're not relying on users to have (most) of the necessary dependencies--and infinitely scalable. Which is a huge deal, because it allows users to have a faster, lighter experience with an application that is still tied into the same backend.

With that in mind, let's try it out.

Docker Playground

Docker Playground is Docker's free, online tutorial for learning Docker. Once you get through the initial steps, they provide a verbose guide that can get you going with a container. So, I'll go through the first couple of steps to get going then I'll leave the rest to you!

Step 1: Access Play With Docker and Sign In

First, we'll navigate to the Play with Docker starting page, which should look like this:

Click Start, and you'll be prompted to sign in with a GitHub or Docker account. Feel free to do whichever is easier for you, but do not purchase anything if you decide to create a Docker account--the tutorial and Docker Playground are free.

Step 2: Create a New Instance

Once you are signed in, click the "Add New Instance" button to create a virtualized container in Docker Playground. If you did so successfully, your page will look something like this:

Step 3: Access the Docker 101 Tutorial

To access the Docker 101 Tutorial, you actually have to use the instance you've just created. So, type the following command in the Command Line Interface on Docker Playground and hit Enter:

docker run -dp 80:80 docker/getting-started:pwd

After this command processes, you'll see that a hyperlinked "80" has appeared next to the "Open Port" button at the top of the screen, like so:

Click this link, and you'll be taken to the Docker 101 tutorial. From there, you can navigate through the tutorial and learn more about Docker via the Docker Playground!

Creating a Dockerfile

A Dockerfile is a set of instructions, called a Docker image, which Docker uses to build your application within a container. As these instructions essentially define how the Docker container will handle the process of running your application, it is important that this file exists in your container prior to you attempting to run your application. Below, we'll look at an example of a Dockerfile that was created for a NewsAPI Microservice, then show what having this Dockerfile properly configured can do for you.

How are Dockerfiles created?

When you're configuring a container, typically you'll be creating a custom Dockerfile. To do so, you just create a text file titled "Dockerfile" in your container's directory, then insert the commands necessary for your container.

What's in a Dockerfile?

This can depend on what the Dockerfile is being used for, but in this case we actually have two: one for the visual web component, and another for the server that accesses an API. To avoid confusion, we'll just focus on the server. Below is what we have in that file:



FROM node:12

WORKDIR /home/node/app

COPY package.json ./
RUN yarn install

COPY . .

CMD [ "yarn", "start" ]

The capitalized words in this file represent commands, which Docker uses to create an environment conducive for your application to run--regardless of the system it's on. Let's look at each of these commands:

FROM

The first thing we see here is the "FROM" instruction. This is always the first command in a Dockerfile, as it indicates that this Dockerfile is the base image is for the container.

WORKDIR

This instruction key establishes the working directory where subsequent commands will be run.

COPY

The first time this command is shown, it's copying our application's package.json file into the working directory. The way we can see this is the ./ that follows package.json in the command, which signifies that this is the destination for our copy. In this case, copying this will allow us to then use that package.json to install the app's necessary dependencies using:

RUN

RUN can be used in a variety of ways, but in this example it's being used to run a yarn install command--which installs all the dependencies needed to allow our application to run in the Docker container.

COPY (again)

We already talked a little about COPY, but this time the thing that's being copied is a shorthand, . ., which indicates that everything (.) is being copied to the working directory, allowing the container to be configured to work with the application.

CMD

And finally, we have CMD. The CMD command takes in an array of parameterized commands, which will then be run when the Dockerfile is used to build your application. So, this CMD's array equates to yarn start, which is a command that uses yarn to start the application. As this is the final command in the Dockerfile, at this point our application is built within the container!

If you'd like to learn more about Dockerfile commands, this article breaks each down with great examples.

What's Next?

At this point, you can run the application since you've successfully built it using the Dockerfile. In the case of our example, this would involve running the docker-compose up command. Which allows you to view our example application's front-end, which lists hyperlinked articles from NewsAPI:

APIs: Fetching Data and an Example via Wikipedia

Drew Ronk — Mon, 31 Jan 2022 05:26:31 +0000

APIs, or Application Programming Interfaces, are an incredibly useful tool for accessing data from an external source. Retrieving, storing, and using this data typically requires a programmatic API call, which can be done using a language such as JavaScript. In this article, we'll be discussing how data can be retrieved via the fetch() function in JavaScript, then analyzing a commonly-used API that can be accessed through an HTML tag: the Wikipedia API.

fetch()ing Data

When working with an API, a common starting point is calling upon the API to retrieve some information. This info can then be stored in a variable within your application, which gives you plenty of options for using and manipulating that data. One way this can be done in JavaScript is using the fetch() function, which directly calls upon an API by treating the API's link as a parameter.

Below is an example fetch() call, which accesses an API called "FreeGeoIP" that returns a user's IP address when called:

As you can see, the getGEOIPData() function handles the fetch() method call, where the API's link is one of the parameters passed into fetch(). The API call reaches out to the API at this link, then uses the response that is returned to determine whether to store data from the fetch() call. In this case, a successful API call would grant us access to information such as the IP address' geographic coordinates, city, and state, which we are storing further down in the getGEOIPData() function.

Since I'm working with LitElement in this case, you can see I'm assigning the data I got back to global variables that were initially created in the application's constructor. This allows me to mutate the location information in my constructor, and carry my data changes throughout my entire web page, every time I make another call to the API--such as when I press a button to call it or refresh the page.

The Wikipedia API

Using the data we stored in getGEOIPData(), we could learn more about the location that our IP address is tied to by working with the Wikipedia API. The Wikipedia API can be accessed using a fetch() call as well, or through this very cool HTML tag that simplifies the call into an embeddable component. For this article, we'll be using that tag, which is called wikipedia-query. This is incredibly useful, as a simple import and implementation of the tag allows us to embed a preview of a Wikipedia article directly into our web page, like so:

All you'd end up adding to your HTML, or in my case the render() function in my Lit implementation, is a wikipedia-query tag with the search parameter tied to whatever I want. Below, you can see the three different options I went with--all of which are information I pulled from the IP address data returned from the API call discussed earlier:

Using a tag like those pictured above and an import call, I could very easily learn more about my current location based on the IP address that my device is using to access the internet--all in a web page!

Here's the import statement you'd need to make it work: import { WikipediaQuery } from '@lrnwebcomponents/wikipedia-query/wikipedia-query.js';

All of this is possible because Wikipedia's powerful API allows a user to enter a search term into an API call, and returns bundled information that can then be elegantly presented to a user.

This is just scratching the surface of APIs and their capabilities, but it shows just how limitless their uses and possibilities can be!

Getting Started with Docker: Windows 11

Drew Ronk — Mon, 17 Jan 2022 01:59:14 +0000

Before writing this article, I had never worked with Docker before. In fact, I didn't even know what it was. However, through a lot of Googling and trial-and-error, I found enough information to go from crawling to slowly walking. Let's get you there too.

In this demo, I'll be covering what Docker is, how to download it on Windows 11 OS, and getting Docker Desktop up and running with an example GitHub repo.

What is Docker?

Docker is a platform-as-a-service (PAAS) software that allows users to put their entire application into a virtual "container." This means that, rather than using your desktop to host an application, you can isolate your entire app within a single container--allowing you to manage multiple applications at once and utilize multiple versions of required software for your applications. All of this means you can manipulate your applications with more power and flexibility than was previously possible.

For more information about containers and Docker's logic, go to this guide.

Downloading Docker for Windows 11

Before we get into the steps, you need to make sure your machine is running Windows 11 and is at least 64-bits. You can do this by navigating to the Windows Settings application and going to System > About. In this menu, you'll find your System Type and Windows Edition.

Step 1: Download and Install Docker Desktop

Click this link and click the "Download for Windows" button. Your version should be automatically detected.

Once you've downloaded the installer, run it. At this point, you'll be taken through the setup wizard. When you finish this, you should be able to open the application.

Step 2: Uh oh.

Docker has some ancillary tools that you also need to install just to get it up and running, so you'll likely receive an error when you first try to open it. It happened to me, and this is the error message I saw:

Do not worry, the resolution is very simple...

Step 3: Install WSL 2

WSL, or the Windows Subsystem for Linux, helps ensure Docker can compatibly run with your Windows computer. To install it, you can click the link in the error message shown above if it pops up on your screen when you try to open Docker, or you can go to this link.

Go through steps four and five of the instructions in that link, then try closing Docker and opening it again.

Step 4: The Tutorial

When you re-open Docker, it should open successfully and you'll see a tutorial. I highly recommend going through it, as it's brief but helpful in getting you acclimated to the system.

(Optional) Step 5: Sign in/up

Since this was my first time using Docker, I had to sign up using the button in Docker Desktop. If you've never used Docker, it's worth creating an account so you can use the platform to its fullest.

At this point, you've successfully installed Docker Desktop! Next, we'll take a look at how to get started with an example demo.

Example with HAXcms

To get started, we'll need a GitHub repo with a fully-fledged application. In my case, I'll be using HAXcms: a content management system that encapsulates the incredibly accessible authoring experience of HAX. Let's get going!

Step 1: The Dev Environments Tab

Navigate to the "Dev Environments" Tab in Docker Desktop, and click the "Create" button. Click the "Get Started" button in the guide that pops up, and the following screen should appear:

As you can see in the image, I've already put a link into the "Enter the Git Repository" box. Below, I'll show you where to get a link to put in this box.

Step 2: Getting the HTTPS Link From a GitHub Repo

Navigate to your GitHub repo of choice, and select the green "Clone" button. A dropdown menu should populate, and you'll want to copy the link that appears in the HTTPS tab. Kind of like this:

Paste the link you copied into the "Enter the Git Repository" box, and click the "Continue" button.

The Dev Environment will take a little time to generate, then you'll see a page indicating that it's all set up.

Step 3: Get Going in VSCode

At this point, your Dev Environments tab in Docker Desktop should be showing the container you created and your Containers/Apps tab will show that your container is running. Way to go!

Now, you can start working with your container in VSCode. To do this, click on the container listed in your Dev Environments tab. It should look similar to this:

To open VSCode, just click the button. When you do, you may have to install one or two additional tools--or even VSCode itself if you don't have it already. If this is the case, follow the steps provided and you'll be viewing your container's code in no time!

For more information about Docker and initial steps, feel free to view this guide from freeCodeCamp. I found it very useful, especially for learning about Docker's basic commands. Good luck!

Reflection: (new) Magic Wand Questions

Drew Ronk — Sun, 07 Nov 2021 23:19:48 +0000

Even though I'm only a senior in college, I feel as though I've been asked questions about my aspirations and dreams a lot. You know, the "if you had a magic wand what would you do with your life" type things. I've pretty much always answered those with some version of "I don't know," and the reason for that is because I really don't. I grew up learning to think in aggressively practical terms, so the dreaming thing is still kind of new to me. I honestly can't stand the interview question: "Where do you think you'll be in five years?" because... I don't know where I'll be tomorrow, let alone half a decade from now. I get that's not the point of the question, but I digress.

Despite the fact that I'm not a huge fan of planning, or questions that make me think about the future, I'm gonna try to answer a few of them today. These were recently posed to me by a professor who told my class he's living his answers to these questions--so I figure answering them myself is worth a try.

If you could build an app, website, or technology of any kind, What would it do?

Simply put, I'd build a website that displays updated, easily understood information about the climate crisis. Yes, I care about the environment. The site's primary goal would be to provide unbiased and unfiltered accounts of the current and future consequences of climate change in a clear, digestible manner. Possible solutions (on an individual and societal level) would be included as well, but the priority is to show apathetic people why they should care. Another major goal of the site is to make it clear that it takes more than individual effort to solve this problem, mainly by comparing corporations and governments' contributions to this crisis alongside consumers. Corporations' decision to make climate change seem like an unsolvable predicament by placing all of the responsibility on individual consumers is absolutely horrible, and it's a narrative I'd like to change. I know it's lofty, but I don't really care.

Who would it be for? How would they use it? How would you use it?

My target audience for this site is someone who knows absolutely nothing about climate change. If knowledge is power, and action requires power, then helping people learn enough to do right by themselves and others is exactly what I want to do. My goal with this site isn't to belittle people, tell them they're wrong, or even change their opinions. Everyone deserves the opportunity to see a situation without there being some ulterior motive baked into its portrayal. I think this is an especially relevant problem with the rhetoric around climate change and the perceptions people maintain about it. Someone who visits the site could use it to see a different perspective, or just to see an explanation of the issue that isn't so overly technical or politically tainted that they can't get through it without feeling exhausted.

In turn, I would use this site as an opportunity to help others. Information shouldn't be stuck behind a paywall, and becoming a more informed person shouldn't require extreme effort or some sort of buy-in. Making this site free for visitors and as accessible as possible would allow me to utilize my skills to (hopefully) make a difference in someone's life.

If money was no concern, time no concern; what would you do with your life and the skills you've assembled if you could dedicate it to one thing?

I think the first thing I'd do is create the website I described above. It's something I've always been interested in doing, but I've never seen it as a source of revenue so much as an opportunity to do the right thing. Past that, I don't foresee myself doing software/web development on a daily basis. I enjoy it, but if it's not benefitting anyone it's a waste of my time. My passion is helping people, so that's what I'd dedicate my life to. I know that's ridiculously general, but I don't want to do just one thing and almost everything I currently do is because money and time are concerns. I'd likely use my programming skills to do it, but I'd just try to do right by others.

Learning new things and meeting new people are two of the most exciting things in life for me, so I'd devote a lot of my time to working for organizations who seek to improve the quality of life for those in adverse situations. More specifically, I'd like to focus on helping people without housing and those affected by climate change. I would start by working directly with those people while informing others of the realities of these issues (this is where web development could come in), but my eventual goal would be to work on policy that fixes the source of these problems. This isn't all I'd do with myself, I'd probably try new food, learn new skills, and travel as much as I physically can, but I want to spend most of my time making a difference in someone else's life.

Externally Sourced Fonts: Implementation in Lit vs. Vanilla JS Projects

Drew Ronk — Mon, 25 Oct 2021 04:02:59 +0000

Fonts are a great way to tailor your web content to your intended audience through simple stylistic changes. These style adjustments are typically implemented via CSS, which has a series of predefined fonts that can be chosen from via the font-family attribute. However, fonts can also be imported, using resources such as Google Fonts to access a vast library of custom fonts to make your text stand out. One consideration when importing these fonts is the way in which you do so, which can have a significant impact in whether the font is applied to your web page.

Importing with Vanilla JS

When using CSS in tandem with Vanilla JS, two options exist for importing a font from an external source: the <link> tag or an @import statement within an already linked CSS file.

With the <link> tag, the reference to the external source where we are getting the font would be in our main page's HTML. By linking the external source as a stylesheet, we can then reference it in the CSS file we are already using to style our page. To reference the font we imported in our CSS file, we would simply place the name of the font at the beginning of the font-family rule. Google Fonts provides an already-formatted version of this process, giving both the necessary HTML and the CSS rule required to use a font.

Example HTML for this implementation:

Example CSS Rule for this implementation, which is added to our project's CSS file:

With the @import statement, we avoid editing the HTML by directly importing the needed font into our already-existing CSS file. We could then reference the font's name as we did in our other implementation by placing the name of the font at the beginning of the font-family rule. Google Fonts also provides a already-formatted version of this process, giving the necessary import statement and CSS rule required to use a font.

Example of font import:

The problem with a direct import to CSS, as shown above, is that it is a newer format that some frameworks do not account for. One such framework is Lit.

Importing with Lit

Given that Lit renders CSS differently from a Vanilla JS project, it has added sanitization measures that remove certain things from the embedded CSS. Unfortunately, one such thing is the @import command. This means that directly importing an external font into CSS is not currently supported in Lit. Instead, we have to use a <link> tag. To use a font within a specific component, this could be achieved by placing the font in the font-family CSS rule of the component's .JS file, then adding the necessary <link> tag to the HTML in index.html. Thus, the CSS renders with the HTML from the .JS file.

Example HTML for this implementation, placed in index.html:

Example CSS Rule for this implementation, placed in JavaScript of yourComponent.js:

Considerations When Rendering Fonts

Font-Display

According to CSS Tricks, the font-display CSS property dictates how files, such as an externally-retrieved font, are downloaded and rendered. One possible option for the font-display property is swap, which immediately loads a local CSS font (the first available in the font-family property) until the imported font is downloaded and displayed. This initial font is called a fallback, and allows for the page to render notably faster than other options of font-display because the page is not stuck waiting for a font to use. The one caveat to this is that the page's font may briefly appear in an "unstyled" state, which could be undesirable to some developers.

Rendering Methodologies

Rendering web pages can be done in a few different ways, and should be chosen based on the desired use cases for a developer's work. Google Developers has a useful article in which they break down five of the most common rendering methodologies, elaborating upon their pros and cons and when using each would be helpful. The following diagram provides a brief overview of the article's comparison:

Sources:

Considerations for Building Web Components

Drew Ronk — Mon, 11 Oct 2021 01:56:27 +0000

When building a web component, designing the component itself should start with examining considerations for its design, security, and accessibility. Considerations can vary based on what the component's eventual purpose, but common goals for web components include easy access and reusability. As such, major considerations could be the different properties a component might have, as well as the states the component can maintain and how much customization can be applied to it.

In my case, I'm currently working with my team to design an infographic card. The ultimate goal is for this to be a web component that can be modified based on a user's requirements, but maintains a fairly consistent layout and structure. The card will have a colored banner that includes an icon, title, and sub-title, as well as a content box beneath it to hold text. Major considerations for this card include how the card will resize based on different information inputted by a user, as well as what properties must be modified to ensure someone can customize the card to their specific use case.

Atomic Design

To ensure this card is reusable at every level, my team and I intend to utilize the principles of atomic design. This will allow us to break our larger card up into smaller components, which will then be combined to create a cohesive product. The following will be smaller "atoms" which will eventually become our molecule: a functioning card.

The icon
The banner (includes the icon, header text, and sub-header text)
The skeleton of the card (a card that contains header and content sections)
The complete card (a composition of the above atoms)

Difficulties

While atomic design is likely to help our team build this card efficiently and pay closer attention to the necessary requirements and considerations, there are nearly guaranteed to be bumps in the road. Responsive resize within a fixed area can be fairly difficult, and a major use case we'll be trying to account for is someone placing a multi-line title in the banner. Taking the time to design elegant adjustments to our banner component should, hopefully, result in a better card all-around.

Another consideration I had not immediately thought of is security. Even though we aren't accessing any user data or providing any sensitive data, the SVG (small vector graphic) format we'll be using for our card's icon is a known attack vector for embedded JavaScript attacks. As such, we need to make sure that a bad actor cannot misuse a valuable component of our card to harm users who interact with our product. This could reflect poorly on us and those using our component, not to mention the person whose information is made vulnerable by such an attack.

Lessons Learned

Having already built a web component, a button, I feel our team is coming into this project with a clearer understanding of how to interact with and build web components. The structure of LitElement was previously foreign to us, so our first project allowed us to strengthen our knowledge of how Lit works. In addition, I got much more comfortable with CSS during the first assignment. As our team made a circular button that responsively resizes based on its content, I was dealing with CSS I had never touched before. This ultimately pushed me to learn enough to maybe be dangerous, so I'm looking forward to taking those lessons with me into working on this card.

Progress Update: Button Web Component

Drew Ronk — Mon, 27 Sep 2021 01:52:41 +0000

Since starting the development of a call-to-action (CTA) button for IST 402, I have encountered quite a few challenges while learning a lot about open web components and LitElement. My partner and I chose to develop a CTA button modeled after a circular button on an e-commerce clothing site, which would act as a building block for learning about atomic web design.

Progress

Thus far, my partner and I have created the button component itself, linked it, and have completed a lot of the responsive CSS behavior for the button itself. This includes resizing the button when different text is inserted into it, as well as changes in state when it is hovered over and focused on. We plan to also create behavior for "active" and "disabled" states, and are currently working on these. In addition, we've added optional icon support that features conditional rendering, allowing for the creation and removal of an icon in our button from the "inspect" tab of a browser. We have began working on our button's dark mode behavior as well, designing a way for dark mode to be initiated within the button's tag.

Here is the repository that exhibits our progress thus far: circle-button-ad Repository

Challenges

Building a responsive, reusable circular button is hard. As the lead developer in my partner team, I learned this very quickly and figured out my knowledge of CSS was not great almost immediately. That said, lots of browsing CSS on overly-specific sites has led to me learning a lot more about it than I assumed I would when starting this button. I can proudly say I know more about styling a button than I did when I started this assignment.
As web components are something I've never extensively worked with until now, this also presented a learning curve. LitElement seemed intuitive when I was using a hello-world boilerplate, but getting familiar with its inner workings took more time than I'd like to admit. This isn't a shortcoming of the structure so much as it is my lack of experience with it. As I've continued to work in the directory structure that our web component is set up, I've become more familiar with it and feel that my understanding of our button has gotten much better. For instance, learning how the demo folder's index.html file interacts with my JavaScript file in my src folder has allowed me to vastly improve the way I visually test the functionality of our button--and increase its customizability.

JS Frameworks: Comparing Boilerplates

Drew Ronk — Mon, 13 Sep 2021 04:19:14 +0000

Having explored "Hello World" boilerplates created with Vue.js, Stencil.js, React, and Angular for IST 402, certain similarities and differences among some of JavaScript's most popular frameworks came to the forefront. In this post, I will also provide feedback on my choice between the four when it comes to developer experience.

Similarities and Differences

The most striking similarity between the four boilerplates I investigated was the significant number of dependencies they required. Prior to running any of the boilerplates, npm install was followed by a long series of dependency installations, and a new (and very large) node_modules folder within the project files. Once this was complete, though, all of the boilerplates were able to run locally and presented a similar webpage experience. As all of these projects run, at some level, on JavaScript, they also maintained a fairly similar file structure: an index.html file that maintained the markup that would display when the application was run, as well as package.json and ReadMe files.

A significant difference between the four boilerplates is where they get their logic from for the base page. In Stencil's case, this actually a TypeScript file--not JavaScript--and is located in the same folder as its index.html. The other three, on the other hand, utilize JavaScript as their main driver for the logic of their pages. However, where this JavaScript is stored varies, and in the case of Vue.js, it is combined with HTML tags in a special file type that has a .vue extension. Another noteworthy difference here is that Stencil is actually not technically a framework, despite me noting it as one for the sake of simplicity. Rather, it is labeled as a "toolchain," which can be used to create web components in conjunction with many popular JS frameworks.

Developer Experience

Of the four boilerplates, I found the React project to be the easiest to get going. Whether this was good design by the creator of the boilerplate I had tested or just React's intuitive nature, I noticed that getting the boilerplate up and running was very easy. This, compared to the amount of dependency-checking and messing around I had to do with Angular and Vue, was a breath of fresh air. Having never used it before, I appreciated that React had everything I needed to make changes to the main page encapsulated into one folder. In a similar vein, I noticed React seems to have a large community of support behind many of its components and dependencies, which would have been helpful had I run into any issues getting my code to run.

Which would I choose?

Despite what I just said about React, given the opportunity to begin building an app on impulse I'd choose to work with Stencil.js. It was almost as easy as React to get up and running, and I think it'd be easier to manipulate past the "getting started" phase of working with it. Stencil's prioritization of web component compatibility is really attractive given how tough it can be to ensure all users can view your application. Further, the added accessibility that Stencil provides due to its ability to be embedded into other web frameworks also seems to add a useful level of flexibility. Although I do not know TypeScript, which it relies on for its logic, every option would have its adjusting due to the amount of jargon the other frameworks employ.

*These conclusions were reached based on the research performed by my team and the boilerplates that are located in this GitHub repository. I located my specific boilerplate, which was written with Vue.js, here.

Setting up open-wc on Windows 10

Drew Ronk — Mon, 30 Aug 2021 03:59:25 +0000

To set up Open Web Components, or open-wc, on your Windows 10 machine, we will complete the following steps:

Install the latest version of Node LTS and NPM
Install Yarn
Set up open-wc

Note: To perform the following steps, please be sure to have administrative privileges on your machine and access to the internet.

Node and NPM

Node.js and its package manager, known as Node Package Manager (npm) can be installed from this link. Be sure to choose the LTS version when selecting which build of Node to download, and follow the installation prompts that appear upon successful download of the Node installer.

During the installation process, you may be asked to grant certain permissions or accept agreements. You must do so to properly utilize Node.

NPM will automatically install with Node, and you can verify that both of these programs are up-to-date by opening Windows PowerShell and typing the following:

To determine Node's version: node -v
To determine npm's version: npm -v

Yarn

Yarn, an alternative version of the aforementioned npm, can be installed from the command line using the following steps:

Open Windows PowerShell.
Type npm install -g yarn and press Enter.

If you receive a permissions-related error upon entering this command, your account may not have administrative permissions. To circumvent this, attach sudo to the beginning of your command. In this case, the command would be sudo npm install -g yarn.

Optional: To verify the latest version of yarn has been installed, you can enter the command yarn -v.

Open-wc

Now that we have our dependencies installed, we can set up open-wc!

Before taking these steps, be sure to navigate to the directory in which you would like to do so.

In PowerShell, this can be done using the cd command, followed by your desired directory path.

Once you are in the folder that will contain your web component, you can utilize the following commands in PowerShell to create your component:

npm init @open-wc
Select "Scaffold a new project" from the options that appear.
Choose "Web Component" from the new list of options.
A list of three tooling options (Linting, Testing, and Demoing) will appear. Enable all three.
Select "no" when asked if you are using Typescript.
Give your project a name (using lowercase only).
Select "Yes" to the following prompts: "Write this file structure to a disk" and "Using yarn."

Upon the completion of these steps, your web component is complete!

You can verify this by using cd followed by your project's name to view the directory entry of your project.

IST 402: Introduction

Drew Ronk — Mon, 30 Aug 2021 02:58:27 +0000

Introduction

Hi Everyone,

My name is Drew and I'm a senior at Penn State studying the Design & Development track of the Information Sciences and Technology major. Although I am also pursuing a minor in Security and Risk Analysis, my true interests lie in web development--which is why I'm writing this introduction!

Outside of the classroom, I work as a Learning Assistant within the College of IST and volunteer as an IST Diplomat, working as a student ambassador for the College. I really enjoy hanging out with my friends, keeping up with everything PSU sports, and being outside (pickup football, snowboarding, and spikeball are some favorites).

Web Dev?

This past summer, I had the opportunity to work as a full-stack software engineer for Alarm.com. I was interested in web development prior to the internship; but, if my time there taught me anything, it's that I really enjoy working on things that end users directly interact with. Thus, I'm taking this Web Components course to improve my web development skills as I look for full-time careers.

The environment and its current state have become a recent passion/concern of mine, so my goal upon graduation is to find a career where I can positively impact the environment's declining state. I took a few climate science classes last semester, and while I did not enjoy the nitty-gritty of climatology, I saw the opportunity to make a difference with something I do enjoy. Web development may not seem like the place to start fighting climate change, but I think accessibility to information is an integral part of encouraging some long-overdue improvement to society's environmental practices. Hearing Professor Ollendyke mention that we would be prioritizing accessibility for the work we do in this course really excited me, so I'm looking forward to learning more!

DEV Community: Drew Ronk

Quick and Easy Deployment with Vercel

What is Vercel?

Getting Started

My Experience Thus Far

1. 11ty: Getting Started Guide

2. 11ty: Base Blog

3. Malte Ubl x Google: Eleventy High Performance Blog

4. IST Vercel Demo

The Developer Experience

Static Site Generation: Working with Eleventy

1. 11ty: Getting Started Guide

2. 11ty: Base Blog

3. Malte Ubl x Google: Eleventy High Performance Blog

Getting Started with Docker: Docker Playground

Why is Docker so Powerful?

Docker Playground

Step 1: Access Play With Docker and Sign In

Step 2: Create a New Instance

Step 3: Access the Docker 101 Tutorial

Creating a Dockerfile

How are Dockerfiles created?

What's in a Dockerfile?

FROM

WORKDIR

COPY

RUN

COPY (again)

CMD

What's Next?

APIs: Fetching Data and an Example via Wikipedia

fetch()ing Data

The Wikipedia API

Getting Started with Docker: Windows 11

What is Docker?

Downloading Docker for Windows 11

Step 1: Download and Install Docker Desktop

Step 2: Uh oh.

Step 3: Install WSL 2

Step 4: The Tutorial

(Optional) Step 5: Sign in/up

Example with HAXcms

Step 1: The Dev Environments Tab

Step 2: Getting the HTTPS Link From a GitHub Repo

Step 3: Get Going in VSCode

Reflection: (new) Magic Wand Questions

If you could build an app, website, or technology of any kind, What would it do?

Who would it be for? How would they use it? How would you use it?

If money was no concern, time no concern; what would you do with your life and the skills you've assembled if you could dedicate it to one thing?

Externally Sourced Fonts: Implementation in Lit vs. Vanilla JS Projects

Importing with Vanilla JS

Importing with Lit

Considerations When Rendering Fonts

Font-Display

Rendering Methodologies

Considerations for Building Web Components

Atomic Design

Difficulties

Lessons Learned

Progress Update: Button Web Component

Progress

Challenges

JS Frameworks: Comparing Boilerplates

Similarities and Differences

Developer Experience

Which would I choose?

Setting up open-wc on Windows 10

Node and NPM

Yarn

Open-wc

IST 402: Introduction

Introduction

Web Dev?