DEV Community: Interaction Designs

Creating a Blog with 11ty and 11ty Templates

Interaction Designs — Thu, 21 Apr 2022 18:43:19 +0000

There's levels to 11ty

11ty Hello-World Blog

The first example of 11ty we'll look at is a simple hello-world style blog.
We'll use the documentation to start a project with 11ty. Following these instructions, we install the necessary packages to our project to be able to run in 11ty.

Plug-ins are very useful with 11ty but they are not needed. In this example, I used a syntax highlighter plug-in.

Once these steps are done you're all set up and ready to create your site in markdown.

The simple blog I made looks like this:

If you'd like to see the code for the site check out my simple example on Github, all the site content is held in the README.md file.

11ty Blog with Template

The next example we'll look at goes more into depth of 11ty. We are creating this site from this template.

This site works by making a collection of markdown files that hold each post and get displayed by linking to those files in the index.html.

Here we are able to link on any page, the location of another file.

Each post follows a similar format (title, description, date, tags, layout, post content):

If you'd like to see the code for this 11ty blog, check out my Github.

Google 11ty Blog

Lastly, we'll look at a template created by Google that uses 11ty to make a blog. If you'd like to check out the template yourself, this is their Github.

Similarities

Google's 11ty template is structured almost exactly like the pervious blog template we looked at. All of the posts are held in one folder and each post has a bit of metadata linked with it then room for the post content.

Differences

The biggest difference you'll notice is the Google template is a lot more esthetically pleasing than the previous 11ty template. On this template there is also a way to make a draft post. By adding draft: true in the metadata of the post it will hide that post from the production site and only view it in your developer mode.

Why is this template worth using?

Google created this template to have the highest performance, accessibility, best practices, and SEO possible (which is very important since this is how Google rates if your site is put high on the engine's search page). With their template you will be able to take full advantage of Google's search algorithm.

I made a quick sample blog that can be found on my Github and looks surprisingly well for not doing any additional formatting or additional styling.

New to Docker? Try it out for free!

Interaction Designs — Wed, 20 Apr 2022 17:26:43 +0000

Docker is a powerful tool used to for containerization of microservices. This provides a quick way to spin up sections of an application or website that are needed at the time and spin them down after their function is served. This process saves server space, money, and makes it easier for pushing updates and fixes to a part of the project without breaking the whole thing.

The Good and Bad

Downside... the full power of Docker costs money. But you are able to use a free virtual server on Play with Docker to sharpen your skills, test out projects or just learn how it all works.

Try it Out

If you click the link above, you'll be brought to Docker's free service where you get the full experience of Docker for 4 hours at a time.

I'm going to show deploying a project on Github named HAXcms. HAXcms is a next-gen content management system fully built out of the open source project HAX (Headless Authoring eXperience).

Steps

Click the "Login" button on Play with Docker's homepage, and either login or create a new account (don't worry it's free). Once you're logged in, hit the "Start" button and you will be brought to a page that looks like this:

From here you want to click the "+Add New Instance" button, which will spin up a virtual server for you to run your project on.
Now since we've started an instance we can begin running commands to build and run our project. Start by cloning the HAXcms project into your instance by clicking in the black box, typing git clone https://github.com/elmsln/HAXcms.git, then hit 'Enter'.
You'll see the progress of the project being cloned into your environment.
Once it's done cloning, let's navigate to that folder with cd HAXcms.
Now we're going to build an image of the project. We do this by running docker build . -t haxcms. docker build is our command to run the build, . selects the files in our project and -t haxcms declares the name of the image we're making.
Once your image is built, we're ready to run the project in our container! Run docker run -dp 80:80 haxcms and you'll notice a blue "80" link shows up next to the "Open Port" button.

Click that link and a new tab will open with the running project on your computer.

You're all set!

That's the basics to getting a project running with Play with Docker. If you'd like to run your own project or another project you've found, you can follow the same steps and replace the HAXcms areas with any project you'd like.

Deploy your next site using Vercel

Interaction Designs — Tue, 19 Apr 2022 12:43:52 +0000

What is Vercel?

Vercel is a "Function as a Service" platform to allow anyone to build, launch, and maintain any site for... free! Although there are paid models all the functionality to get a site up and running is completely free and relatively simple to use.

Why is there a web components tag on this post?

Currently, to deploy a site testing out web components you need what feels like an entire infrastructure behind it just to see if a simple button is working the right way.
Now with Vercel's deployment, web components has never been easier!

Getting Started

First, create a Vercel account. I'd recommend creating the account with the Github option, so your Vercel account is linked to your repositories. I would also recommend only sharing projects you want to deploy with your Vercel account so that Vercel does not try to deploy with other repos.

How to Deploy

Importing the Project

There are two main ways to deploy your site with Vercel; using the Vercel CLI or through Github.

I'm going to explain the Github route since I personally think it is the best way to link your projects and keep them updated in Vercel.

All of the docs for alternative routes can be found on Vercel's documentation.

Now that you've linked your Github account to Vercel you will see a dashboard much like this without any existing projects.

Here you can click "New Project" and select the Github repository you want to deploy. If you've turned on the selective repo sharing, you will need to

Select "Add Github Account" in the drop down

Choose your Github account
Scroll down to "Repository Access" and choose the repo you want to share

Hit the "Save" button
Hit the "Import" button on that project

Configuring

The best part of Vercel is most deployment configuration is done for you. The main three areas you need to edit next are "Root Directory", "Build and Output Settings", and "Environment Variables". Other than that... you're done.

To deploy a project with web components, you will need a rollup-config file along with a build command that runs that file.

If you need help with that configuration, check out the files in one of my Github repos

Deployed!

That's it! Hit the big "Deploy" button and watch your project come to life on a free site that is constantly updated with each push to your repo's main branch. There is no other updates needed on your side as Vercel will automatically rebuild your site with each new pull request.

Getting Started with Docker Desktop

Interaction Designs — Tue, 12 Apr 2022 20:40:29 +0000

What is Docker?

Docker is a platform used to ship microservices in small containers that most likely hold tiny pieces of an entire application. Docker allows for each microservice container to be ran and closed based on its current usage.

How do we use it?

Setup

We'll be looking at Docker Desktop to set up our containers but there is also a free web version on Docker's website.

If you do not already have Docker Desktop and you want to install it, you can follow the tutorial on Docker's site. If you already have it installed or are using the online 'Play with Docker' feel free to follow along on your own machine.

Steps

DockerFile

The first step is to have a program that we want to ship to Docker. For this example, I'm using a simple to-do app found on github here. If you look through the files on this to-do app, you'll find a 'DockerFile'. This file is needed to be able to ship anything to Docker, this is what tells Docker what to do with your files.

In this to-do app we have a few lines in our DockerFile:

FROM node:10-alpine
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]
EXPOSE 3000

These lines define our Docker container configuration and it runs a few commands in our container. COPY . . gets our code in the container then the RUN line installs all of our dependencies needed for the app, CMD runs a few more needed commands for this app and finally EXPOSE declares the port we want to run the container on.

Build

Next, we want to build an image of our application. We'll build this by using our command line. We can navigate to the to-do app folder, '5-nodejs-todo-app', in our command prompt and run the command:
docker build -t [appName].
docker build is what initiates the building of our image. -t indicates the name of the image will come next in the command. [appName] stands for the place where you insert whatever name you want (usually relating to what the image is).
For this example, I used docker build -t todoapp.

If you are using Docker Desktop you'll see a new image appear under the 'Images' tab.

Run

Finally, we can run our application with Docker. Once the image is built, there are two ways we can create and run a container based on that image. The first we'll look at is in the command prompt. We can run our container by writing the command:
docker container run --name [nameForContainer] -p [hostPort]:[containerPort] -d [image ID]
docker container run is the command to begin and run our container. --name says the name of the container we are making is coming next. [nameForContainer] can be any name that describes the container you are currently making (I used todoapp again). -p defines the ports we went to use. [hostPort] is the port you want to open on your machine to run the Docker container. [conatinerPort] is the port in the container you're making that links to the open port on your computer. -d says the container should run detached from the command prompt we are in (this is because I'd like to see the feedback in the Docker Desktop rather than the command prompt). [image ID] is where we place the ID of the image we made in the previous command. This ID can be found on Docker Desktop under the images tab, named 'Image ID'.

The full command I used is:
docker container run --name todoapp -p 3000:3000 -d e02b378878b0

You're All Set!

Head to localhost:3000 in your browser and you should see your To-Do app running!

Leveraging APIs for Microservices

Interaction Designs — Tue, 01 Feb 2022 02:43:13 +0000

The main idea of what were going to look at is using an IP locator API to define a location and display that location on google maps (internally and externally) and wire that location to a different, existing component.

API Calls

Calling an API and receiving/storing its data is actually pretty simple as long as the API is designed correctly. In this case, we're going to look at an API called free GIO IP. Here we are able to get the general location (country, state, city, longitude, latitude) of an IP address.

To make the call we are going to use a fetch function that will access a link we pass into it and return the JSON data that is received from that link.

In the code above we first start fetch and pass our link that looks like this https://freegeoip.app/json/[ip address]. Fetch then returns a response of the data grabbed from the API associated with the IP we passed in. The .then section is where we can go through that response and store the data in our program. Here, we are taking the longitude, latitude, city, and state and saving them to our existing properties.

Displaying our Data with Google Maps

Internally

First, we're going to look at embedding a Google Map into our program using an <iframe>. Since we have the longitude and latitude (found earlier ^) of the location we want to display, we can use those in our iframe to embed the map.

That may have sounded difficult and hard to implement but it really comes down to two lines of code.

const url = `https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed`;
<iframe title="Where you are" src="${url}"></iframe>

Our url holds the link to google's mapping api and right after the /maps?q= in the link, we place in the latitude and longitude we have already found. Then, all we have left is to place that url into the src of our <iframe> and the map will display, embedded in our page.

For more info on using the Google Maps Platform check out their developer page.

Externally

To create a link in our page that takes up to Google Maps with our desired location already in the view window is not too different from before. We can create a simple <a> tag and place the link for an external path with our long and lat we've received before.

<a href="https://www.google.com/maps/@${this.lat},${this.long},14z">
    See on Google
</a>

Here we've created a link that leads to google map's site with our long and lat coordinates and a zoom of 14 (,14z).

Wiring with an Existing Component

Let's say you want to use the data we received to utilize a different web component.

For this example, we'll look at a tag named <wikipedia -query> that will perform a wikipedia search and embed the page found into our site.
Wikipedia-query info: Github npmjs

Set Up

We'll start by wiring the component into our program so we can implement the project. First, adding the package location to our dependencies in package.json.

Then we'll run an npm install on our project to get all the needed assets to run wikipedia-query.

Once the install is finished, we want to add a "bare import" to our program file to be able to access the tag we just installed. A "bare import" is a convention where we let LitElement find what exact file we are looking for rather than specifically declaring one. This is important for improving the maintainability of our code since file locations and structures can change over time.

In this example, our "bare import" will look like this:

import '@lrnwebcomponents/wikipedia-query';

Notice we only specify the general area of what we are importing and not a specific file name.

Utilization

Now that we're all set up, we can do objectively the easiest part. Remember we want to use the <wikipedia-query> tag to display a wiki page of the location we received from our API earlier.

To implement our <wikipedia-query> tag we pass our location into it's search property and let the tag do the rest of the work for us.

//finding wiki based on city and state
<wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>

//finding wiki based on city
<wikipedia-query search="${this.city}"></wikipedia-query>

//finding wiki based on state
<wikipedia-query search="${this.state}"></wikipedia-query>

Wrap It Up

The main point in this post is the effectiveness of the fetch function. We are able to set a call to any API, receive the JSON data, and use that data in any way we want.

Everything I talked about in this post is held in a small project that does more than is explained but is mostly centered around these topics.

Feel free to clone and play with the program on your own to see how it all plays together: Github

FYI: Everything discussed in this post is location in the LocationFromIP.js file in the src folder.

Introspection (and Mirrors?)

Interaction Designs — Mon, 13 Dec 2021 06:52:50 +0000

Smart Mirror

A project I've been thinking about making for a little while now is a smart mirror. Most people have mirrors in their bedroom and bathrooms and most people start and end their day going into the bathroom and the bedroom. I would like to build and code a smart mirror that could be utilized as a day planner, alarm clock, speaker system, and capable of all sorts of everyday tasks.

The most important thing I like about the smart mirror idea is that it would be used as a tool rather than an entertainment device. People look at enough screens throughout the day, if this mirror could be used as a routine tool rather than a time waster, I'd feel like I did my job.

It's definitely not a device everybody needs but it could be a device that could improve the productivity of someone's day.

I originally thought of this idea as a gift for my sister and I still plan for it to be, but I do think if I'd actually build it and write the code behind it, others would want one too.

Money? Who needs it... Time? It's just a construct

If I were to live life without money or time being a concern I'd like to live it seeing and experiencing everything amazing this world has to offer while helping as many people I can along the way. We live in such a remarkable time where it really feels like anything is possible.

It only takes one great idea and a whole lot of drive to create something amazing. Both are tough to come by but I believe my drive stems from the wanting of making myself the best possible version I can. I then hope to use my skills and passion to motivate and ultimately better the lives of those around me.

I don't know how yet, but I'd hope one day I can either build something or have the next idea to change people's lives for the better. Looking around it seems there's so many superficial things in our lives that we put importance over the real things that make us amazing humans. When it comes down to the question, "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'd answer with, utilizing everything I've learned from others and through myself to dedicate myself towards the well-being of others. Whether that will be on a tech project, social service, or anything else, I want my life to make an impact on this world.

Slots for Tots - A Dive into Slots with Web Components

Interaction Designs — Mon, 13 Dec 2021 04:07:39 +0000

What are slots?

When writing reusable web components we come across the need to let a programmer easily enter any content they want to make the component work for their project. In a low-level sense we traditionally could use variables like this:
<div>${this.variable}</div>
<demo-project variable="Boring text"></demo-project>

This would get the job done for entering "Boring text" into our div but what if we wanted to put a <ul> with 3 <li> elements in place?

This is where slots come in. We can take that code and create a simple slot such as this:
<div><slot></slot></div>
And pass our list elements in like this:

<demo-project>
  <ul>
    <li>Exciting text 1</li>
    <li>Exciting text 2</li>
    <li>Exciting text 3</li>
  </ul>
</demo-project>

Now we'll be able to see that entire list in our div to be used in any way we want.

Why slots for tots?

Banking of the clever slogan 'toys for tots', slots for tots (some would say is much more clever) is a way of explaining that slots enhance the ability to add custom children elements to a designated parent element. When the list above is 'slotted' into our div, that unordered list and each list element become children of our div. We are then able to go through the list and use, alter, move, etc. each element as if it was a normal ingrained list.

But wait! There's more...

After using slots a few times, you might run into the issue of needing two or more slots. This becomes a problem with the code we have since our <demo-project> tag only has one spot available for a slot.

To fix this, we can use a named slot rather than a regular slot. Named slots give the ability to select which slot we want our custom content to go to.

Let's take our <demo-project> for example. If we wanted to add a header into one slot and a button into another we could do something like this:

<div>
  <slot name=header></slot>
  <slot name=button></slot>
</div>

<demo-project>
  <span slot=header><h2>Even more exciting header</h2></span>
  <span slot=button><button>Even more exciting button</button></span>
</demo-project>

By naming our slots and using slot=[name of slot] we're able to direct where we want our slotted content to go.

Having fun yet?

I hope so because knowing how to slot content can open up a huge amount of possibilities. What if you want to slot content to other components inside your main? Sure! You can use slots to pass virtually anything, anywhere. Let's say you want to slot a header into a sub-component while slotting a list into your main component:

sub-component

<div>
  <slot name=header></slot>
</div>

demo-project

<div>
  <sub-component>
    <h5 slot=header>${this.header}</h5>
  </sub-component>
  <slot></slot>
</div>

demo / index.html

<demo-project header="Most exciting header">
  <ul>
    <li>Most exciting list item 1</li>
    <li>Most exciting list item 2</li>
    <li>Most exciting list item 3</li>
  </ul>
</demo-project>

The result looks like this:

Most exciting header

Most exciting list item 1
Most exciting list item 2
Most exciting list item 3

Wrap it up

If you're interested in slots and want to look at a more in-depth use of them, I've created a project that does just that.
Check out the Github and feel free to install this project into your own project from npm.

Considerations when Designing a Web Component

Interaction Designs — Mon, 11 Oct 2021 03:36:19 +0000

Before we make a web component we have to understand what we're making and plan out what we want to include in the functionality of the component.

The Comp

Let's look to create a web component that displays a card. Our proposed design is to be able to make at least these three example cards with the same component.

The Breakdown

Looking at the image we can see each card has two sections, the header, and body content.

We should look at what elements are needed for each section:

Header

SVG Icon
Header Text
Sub-header Text

Body

Body Text

The Approach and Possible Challenges

Approach

Based on our component breakdown we can see we'll need to make two sections that can be styled independently.

The header section will include our icon and two headers placed side-by-side. We can make the icon, header, and sub-header editable properties so that a user can change the content during implementation. We also need to make the background color of this section editable to set the banner color in our header.

The body section has text that needs to be easily editable. Rather than making a property, like with the headings, we could utilize a slot in our body to not only make the implementation process easier but also make the content more accessible.

Challenges

The biggest challenge I see is using different states to change the entire card's content. We can implement property states that will change all the text areas, icons, and colors based on a preset keyword. For example, looking at the design picture above, the third card could be a state named "question" which would dynamically change the background color of the header to blue and the icon to the question bubble. We can have several of these preset states that make it simpler for the person implementing our component.

Previous Experience

Luckily, my team and I have had some experience making a web component in the past. Recently, we've made a button that plays short audio clips. In this button, we've touched on some aspects of dynamic states, such as a dark mode or when the button is disabled. We should be able to use the skills we learned previously and expand upon them to make this card component as reusable and reliable as possible.

Web Component Progress

Interaction Designs — Sat, 02 Oct 2021 02:30:16 +0000

We are currently making a reusable button web component in one of my classes. I'm going to run through the current status of the project.

When clicked the button will play a randomly picked audio clip from a selection of meme audios. Currently, the button has five properties (link, title, icon, disabled, play) that can be adjusted to personalize the button for yourself. When clicked the button plays an audio clip then opens the link in a new window. The button has functionality that will updated properties based on other properties. For example, is the play property is set to true, the button will also be disabled to prevent spamming. We also included various CSS properties to not only shape the button but change how it looks based on different states. For example, when the button is hovered over, the text and button color will change. Also, when the button is playing an audio clip, the button color will change as well.

Link to repo: https://github.com/IST-402-Group-1/KMBtn
(I haven't pushed most of the changes yet)

Web Component Frameworks

Interaction Designs — Mon, 13 Sep 2021 04:38:34 +0000

Ever been confused by web programming? No? ...stop lying

JavaScript runs the majority of web pages and with JS we can create custom web components. Since web components are relatively new they may be tough to pick up and implement. To ease the pain we all feel, people have made frameworks to slightly ease the burden of creating web components.

We'll compare some of the most popular frameworks (Angular, Vue, React) and a toolchain (Stencil) to determine the pluses and minuses that apply across them.

Commonalities

Angular, React and Stencil are all similar in the way they conduct their file structures. Package.json is located in the main directory while the main page content is located in a designated folder. The outlier, Vue holds all the main content in the root directory. Misleadingly, Vue also puts .vue files in the /src folder which could be seen as confusing to a vanillaJS veteran.

Angular and Stencil use typescript which makes a newbie shiver but can be learned fairly quickly with experience in JS. On the other hand, React and Vue run (frontend-wise) on JS.

Duplicate / Overlapping Frameworks

Once you begin using each framework, you begin to notice a good amount of how they work overlaps with each other. We get this duplication since these frameworks are open to use and shape into any project anybody wants. This makes contributors adding the effective parts of other frameworks to the one your using.

Easiest vs. Bias

Overall, Vue seems the easiest to use since it's not very complicated to learn and running with.

But who likes doing the easy one?

I've had experience in a past internship with Angular and although Vue wouldn't be tough to pick up if needed, if I had to choose a one to get a website going today, I'd be more confident in using Angular.

GitHub

Group Repo
My Fork with Boilerplate
Stencil Hello-World Boilerplate

Getting started with open-wc

Interaction Designs — Mon, 30 Aug 2021 04:06:37 +0000

In this post we'll go through all the steps to set up a web component using open-wc in windows. We'll go through the needed dependencies and steps to get a web component going.

Before we start

We need a few things before creating a web component. First we'll install Node.js from their website. Next, we'll install npm by opening a command prompt and typing

npm install

It is optional to also install yarn which can be done with your command prompt as well.

npm install -g yarn

Creating a Web Component

Now we're ready to actually create a web component.

Start by using the command prompt to go into your desired folder. For example, cd "project folder"

Then initiate the web component by using this command.

npm init @open-wc

We now have a few options to pick from.

First we can can choose to scaffold a new project or expand upon an existing one. To create a new component we'll pick the scaffolding option by using the arrow keys and pressing the space bar.

Next, we can choose between creating a web component or an application. We'll choose a web component.

The third set of choices are optional and will determine what will be set up automatically. Use the space bar to select your options, I choose to select all of them. To move on click the enter key.

Then we choose whether to use typescript or not. I choose not to.

Enter a name for your web component.

Now, we'll choose to write the proposed file structure to the disk and pick what dependencies to setup the web component with. You can choose to install with npm or if you previously installed yarn you can install using yarn.

You're all set!

Running and Editing your Web Component

The web component we just created can be ran by changing the directory in the command prompt to the folder that has been created. Ex. cd test-project

Then running the component with, npm run start.

Lastly, to edit the component in VS Code use the same commands as previously to change the directory to the project folder then type the command, code .

Introduction

Interaction Designs — Mon, 30 Aug 2021 03:06:42 +0000

Hi everyone! I'm Mike Wagner and unfortunately starting my senior year this year. My major is IST in the Human Centered Design and Development branch. I started at Penn State in engineering but found after freshman year I enjoy the tech realm more.

I have a decent amount of experience and knowledge with web development from other classes but also have been introduced and somewhat worked with web components from taking IST 402 last semester.

I'm excited for this class and making a memorable last year!