DEV Community: Kern Designs

Getting Started with Vercel

Kern Designs — Mon, 14 Mar 2022 19:16:21 +0000

Vercel

Vercel is a new technology, specifically a FaaS, that is growing fast. It's a platform used to host sites. Vercel is one of the easiest to learn and developers all over are falling in love.

Functions as a Service

FaaS are a type of services that allow customers to focus on what they are interested in doing (normally managing application functionalities) without having to build or maintain infrastructure they don't know how to use and don't want to take the time to learn. Usually a FaaS is associated with developing and launching an app.

How to get started with Vercel

Set up an Account
On the Vercel Website select sign up or login.
Link your GitHub
Use the Continue with GitHub option to link your accounts.
Choose a new project
On the home page, you should see an option to make a new project.
Select a repo to deploy
You should see a list of options from your GitHub because you linked the two. Choose an updated repository to deploy it. I chose an 11ty site I had.
Configure and Deploy
Change anything you want to and select the Deploy button.
Congrats!
You should have a working project! It should not be on your dashboard.

Clicking on it will give you more information.

IST Vercel Demo

Now that you understand the basics of Vercel, here is how I deployed it using the command line.

Clone Repo
I chose this repository online in order to help us.
Set up the repositroy
Use npm install and npm i -g vercel in order to install all the right dependencies. Start the project with vercel dev.
Log into Vercel on the command line
This will prompt you to ensure you're logged in. Your projects should now be linked.

Learn 11ty

Kern Designs — Mon, 28 Feb 2022 00:10:34 +0000

Hello! Today were going to be learning 11ty! The intro tutorial can be found here here. In order to do this, I created three different 11ty sites.

Hello World

For this hello world site, I used the original tutorial. I added some blogposts to the site and linked them on new pages. Once I made my basic site and checked it on local host, I pushed my changes to GitHub. If you do that you can then deploy them to GitHub pages by simply creating a gh-pages branch. Here are some simple directions to create your website. You can find my website here.

Base template

In order to use a template, you should open the GitHub repository. I used this basic one. Select Use This Template and clone the repo to your machine. All you have to do then to add your information is input your posts as markdown. Here is my GitHub repo and my sample site.

Second template

One last example uses a template based off the original one, found here. Again, I used the template, cloned, and added my posts. Here is my GitHub repo and my sample site.

Thanks for checking out these materials! Keep coding!

Create a DockerFile

Kern Designs — Tue, 22 Feb 2022 18:08:51 +0000

So you're interested in Docker? You came to the right spot. Today I'm going through what it is, a video tutorial on how to get started, and a tutorial on how to create a DockerFile.

What is Docker

Before you even install and try to run docker, you should probably understand what it is. Docker is a light-weight way of running a program through containers and microservices. Monolith Server Architecture is a thing of the past because we traditionally hosted resources in one environment. This made it versatile, but also heavy and very difficult to update changes. Microservices are used to split up tasks into specific operations. In the picture below, you can see all the small microservices one interface may be running on multiple machines. The whole functionality of a backend is now in thousands of containers all over the world.

Get started

You can follow this tutorial to learn more about how to run docker on your browser. Remember when copying and pasting into docker you may have to use ctrl shift p.

Create a DockerFile

Run your GitHub repo in the docker playground.
Run touch Dockerfile
Select Editor to open the file system. You should see your file.
Double click on the Dockerfile in order to edit its contents.
Paste in the basic information shown below.

# syntax=docker/dockerfile:1
FROM node:12-alpine
RUN apk add --no-cache python2 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "src/index.js"]

Run docker build -t getting-started .
Start the app with docker run -dp 3000:3000 getting-started
Open http://localhost:3000/. You should see a running app.

You now have a working Dockerfile! Congrats and keep coding!

How to Create a GitHub Repository

Kern Designs — Thu, 17 Feb 2022 23:42:28 +0000

GitHub is a wonderful tool for beginner programmers to learn how to use. It allows for saving code to the cloud and continuous integration. In order to use GitHub developers commit, or add, changes to code in a shared repository, or folder. This allows teams to work together and resolve issues early in the development process.

Create Repository

1. Open GitHub in a Browser
Pull up GitHub here.

2. Login or Create Account
If you are creating an account, remember to save your password!

3. Create a New Repo
Once you have successfully logged in, there will be a sidebar on the left of your screen. Click on the green new button with the book label.

4. Follow the Steps to Add Basic Information

Ensure No template is selected. We are not using a template today, but you are welcome to experiment with this in the future.
Choose a repository name. This should be unique, which the site will tell you. You can also add a description to your repository.
Decide public or private. This is your personal preference.
Select Add a README file. This includes a blank initial file in your repository.

When you are done select the green create repository button.

Clone to Machine

5. Click the Green Code Button
At this point, your repository will have opened up. In order to get a copy on your own machine, select the green code button in the top right corner.

6. Choose the Clone Option
Chose the copy link button under the Clone section in order to get the repository copied to your clipboard.

7. Open VS Code
Using VS code, which you can download and install here, editing code is much easier. Terminals are included in the IDE for easy access.

8. Select Clone Git Repository
Select the clone git repository option on the hope page, under the start panel.

9. Paste in the Copied link
Paste in the link we copied from GitHub into the box that says provide repository URL. Select Clone from URL.

10. Select or Create folder
Choose where you want to locally find this code.

11. Open Repository
Find a way to open the new cloned repository. There may be a popup on the right corner offering to open it. If you cannot find that you may select the Open Folder option in the start menu.

Make Changes

12. Find README
Open the README file, which you should see in the left side bar. Clicking on it will open it.

13. Edit the Code
Add your changes to the code. The README is written in markdown. I just added a description to the repository.

# helloworld

This is a repository for teaching GitHub basics.

14. Save
Save your changes. You can also add more folders or files in any language. GitHub can handle it all.

Save to Github

15. Open a Terminal
Hover over the Terminal Header and select New Terminal.

16. Add Changes
Click into the terminal and type in the command git add .. This will save your changes.

17. Commit Changes
Use the command git commit -m “added readme description” to commit your changes with a message. You can decide what you want to write inside the quotes.

18. Pull
Use the git pull command before pushing your changes up to the GitHub. This ensure that any changes a teammate has made is in your local branch.

19. Push
Run the git push command. This will send any changes back to GitHub.

You did it!

In order to check that your changes were saved you can head back to GitHub. You will see a time stamp and commit message on the file.

Learn How API's Work

Kern Designs — Mon, 31 Jan 2022 03:47:28 +0000

API's are confusing. I barely understand them myself, but they are so useful. Outsourcing code can make your life so much easier. API's are very helpful in communicating with other services. Today I'm gong to go through what happens when you request from the Wikipedia API with data from a locational API.

The request

A fetch call is used to send a request to the locational API. This is so the API will help them retrieve data. In this example we fetch the location and IP address of of the user. The request code is shown below. You can see that the data is then saved as variables.

return fetch(this.locationEndpoint + userIPData.ip)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        console.log(data);
        this.lat = data.latitude;
        this.long = data.longitude;
        this.city = data.city;
        this.state = data.region_name;
        console.log(`${this.lat} ${this.long}`);
        return data;
      });

Wikipedia API

The Wikipedia API has many functions but we are using the query function. In this function the action of querying sends us the information that we are looking for. In our code we stored the response from the location in variables. We can use these variables as the search when we call the Wikipedia API.

<wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
<wikipedia-query search="${this.city}"></wikipedia-query>
<wikipedia-query search="${this.state}"></wikipedia-query>

Once these are called in the page the response is displayed as a Wikipedia article if one exists. With the use of these two APIs and very little coding on our part we have a working program that displays an article specific to the user.

How to Install Docker On Windows OS

Kern Designs — Sat, 15 Jan 2022 22:22:51 +0000

So you're getting started in web components. Maybe someone you know told you to work in docker. What does that mean? How do you even install it? What should you do with it? I'm going to walk you through an install with Windows 10. Then we'll talk about what to do with docker.

What is a container based system?

And now for the most important question...

Why a container based system?

I could list some classic tech bull about "[insert new technology] is the future". The honest answer is docker is the best tool to run an app in any environment. This is because of the microservice architecture. You can have exactly same setup everywhere and quickly move the whole infrastructure. Containers can be spun up very quickly, which changes the way we look at tech.

1: Download Docker

You can use this link to download the desktop app. Like any other download once that is complete you should open it up.

2: Open Docker

Upon opening it you're probably gonna have a ton of issues. Don't stress, its normal. As soon as it boots it will most likely tell you that you need to do things with the Linux kernel. It's unlikely you already have it and you need it in order to give docker the tooling that it needs.

3: Download the Linux kernel

You should click the link that it sends you in order to start the download.

4: Restart and open

It should be walking you through this but after you download the Linux kernel, restart your computer. When you reboot you can open docker. If you did this right, you'll find a tutorial waiting for you. You are more then welcome to use theirs but after that I would try to finish this tutorial to really get a handle on the useful things docker can help with.

5: The Docker GitHub Crossover

Marvel: 'Infinity War' Is The Most Ambitious Crossover Event In History
Me:

In all seriousness docker is perfect for running your projects, but how does that happen? Patrick McDowell explains this in his article with a really helpful diagram.

6: Create a Dev Environment

To get started, open a new dev environment. You can find them under the Dev Environment tab on the left. Your screen should look like this.

7: Link your repository

Once you hit get started you can follow the directions to set it up. I am going to clone an already existing repository to get it running locally on my computer. Choose your repository and open it on GitHub. Below you can see how to get the link. Choose the green Code dropdown, click the SSH tab, and copy the link. You may have to set up an SSH key if you haven't or use the HTTPS link.

On docker, input that link. You can see the example below. It may take a minute for docker to prepare it but trust me its much faster than other clones. You should get a success screen afterwards.

8: Start Coding

Now you should be all good to go and you can open this in VS Code. You may be prompted to add some extensions in in order to do this. No big deal, it should be helpful.

Congrats you have successfully connected to a container! Keep coding!

Test Your Knowledge with Web Components

Kern Designs — Sun, 12 Dec 2021 22:05:56 +0000

The Project

I've said it once and I'll say it again. Web components are the future because of their versatility. I recently set out to recreate a flashcard using web components and though I should keep you all updated on the journey. Here is the original flashcard compared with my recreation below.

As you can see they styling is the same, but the biggest difference is the ability to change with user input. In an attempt to allow the card to be used in HAX, I added that functionality. Below you can see me editing the flashcard.

The Process

So while this may seem like an easy implementation, it took a decent amount of tooling and wiring. In order to make the editable menu options I added the properties into the user menu with the json code shown below. This adds the textbox into the menu.

"settings": {
    "configure": [
      {
        "property": "front",
        "title": "Flash-Card-Question",
        "description": "The question that the user will be asked",
        "inputMethod": "textfield"
      },
      {
        "property": "back",
        "title": "Flash-Card-Answer",
        "description": "The answer to the question",
        "inputMethod": "textfield"
      }
    ]
}

Now that the ability is there I have to add the functionality so that is actually changes something. This requires wiring them together. In the JavaScript file you have to create the properties. You can see them below as the front(question) and back(answer) in the properties block. In the render function you can see the divs with slot called. Because of the way this is wired you have to add the slot to a div for HAX to find it.

  static get properties() {
    return {
      ...super.properties,
      inverted: { type: Boolean },
      keyword: { type: String },
      front: {type: String },
      back:{type: String },
      sideToShow: { type: String, reflect: true, attribute: 'side-to-show' },
    };
  }

  render() {
    return html`
      <krusty-image img-src="${this.keyword}"></krusty-image>
      <flash-card-body sideToShow='${this.sideToShow}'>
      <slot slot="front" name="front"><div slot="front">${this.front}</div></slot>
      <slot slot="back" name="back"><div slot="back">${this.back}</div></slot>
      </flash-card-body>
    `;
  }

As you can see this isn't terribly difficult but you do have to understand what is happening. If you want to see the whole project it is posted on github and on npmjs.

Contemplating Life

Kern Designs — Mon, 08 Nov 2021 01:18:30 +0000

At some point you have to stop what you're doing and think about your life. This is something I like to do daily. What is my future? What do I want to do? Who do I want to work for? Do I want to work for anyone? The answer to these questions is that I don't have an answer, but that's okay. My future could be a lot of things.

Development

One of my current front runners is working as a front end developer. My goal is to find a job where I can change lives through building a useful website. What does that mean? I would like to build usable websites. I want to improve lives. I envision my life working on an app or website to make the world a better place. And yes I recognize how cheesy that sounds.

What is the App

Most industry jobs may pay well, but will they really help the world? What kind of website does this and how do I find it? I would love to help people by teaching them things that they cannot learn easily for free. Khan Academy started with a guy tutoring his niece on YouTube. Personally I have really enjoyed the tutorial videos I have made. If money were not a problem that seems like a great way to make an impact on people.

By making tutorial videos I can share my skills. I can explain technology to people who want to learn. This can manifest itself through a YouTube channel, a website, or even an app.

Overall I have no idea what I want to do, but that's the beauty of life. I have years to make decisions and change them and do it all over again. Nobody gets it right the first time around.

Slot Patrol

Kern Designs — Sun, 24 Oct 2021 23:55:31 +0000

Web components are great for their flexibility and versatility. One thing that makes that possible is their ability to have slots. An HTML element allows us to create separate DOM trees and code them together into one element. Below you can see how the element contains both an emoji and a message.

In an element that I have been recently creating, called the learning-card, that has multiple slots. I have to scaffold a banner (header, sub header, icon), a body, an icon and the overall scaffold into one element. You can see a picture of it below.

In the banner render function you can see how the whole banner is defined in a div wrapper. Inside I call the icon and then scaffold in a header wrapper. There are two slots inside that to hold the header and sub header. This is a great example of how slots scaffold inside of a component.

render() {
    return html`
      <div class="banner-wrapper">
        <learning-icon type="${this.icon}"></learning-icon>
        <div class="header-wrapper">
          <slot name="header"></slot>
          <slot name="subheader"></slot>
        </div>
      </div>
    `;
  }

This project is still growing but check out what I've done: https://github.com/TheKodingKrab/project-two. You can also learn about issues I've encountered in many of my other blogposts.

Web Component Considerations

Kern Designs — Sun, 10 Oct 2021 21:39:48 +0000

I am working on a new project. Basically, I'm writing a web component that works as a car. There will be a header in a block, body, and an icon. When you are building a web component there are a lot of considerations to take into account, especially accessibility ones.

Design consideration

When were designing you have to decide what you want the object to do. For this card I wanted to allow the user to customize it well. I want to allow for changing the header, background colors, icons, body content, and size. The body content should be able to have lists, links, and buttons.

Accessibility Concerns

In order to account for non visual users it has to be accessible via keyboard. This means that any buttons inside of the card can be tabbed to. The icon needs alt-text so you know what the icon is. Any text inside should render for the screen reader as well as a translator for different languages. It also needs to support color contrast and dark modes for visually impaired users.

Expected Difficulties

Even though I haven't done much with the card yet I can look forward to what I expect to happen. I don't think the changing of properties will be very hard. The title, color and body shouldn't be hard. Changing the button inside may come with complications, especially if we want it to be tabable. I am mostly concerned with the translations. I believe that will be difficult to do.

Helpful Skills

Luckily, I have some experience in this area. I recently made a button and that was tabable. This should help with those problems in the case that they occur. I also have made dark modes for projects before and would love to implement that into the card.

Thanks for reading! Follow along with the repository here!

Creating a Call to Action Button

Kern Designs — Thu, 23 Sep 2021 18:44:18 +0000

I wrote a button web component. It's not perfect, but it's mine. As you know, I've been working on web components for a while now. Last week I started writing a new one. My goal for this project has been to get more comfortable with JavaScript and my abilities.

Issues

One of the things I am continuously learning is Windows OS is awful. I'm a long time user and would normally say I love it but over the past few weeks it has been horrible. Yarn and Windows must be mortal enemies that decided to come together to make my life hell. They won. Yarn has been so difficult to use. I finally figured it out but I would not recommend mixing Windows and Yarn in the future.

Successes

Good thing that happened - utilizing other elements and libraries actually was much easier than I remember! With like five lines of code there is now an icon in my button. That was so easy. I will definitely be doing that in the future. I also used different states of the button. This was also much easier than I thought it would be. The button can change when its active, disabled, hovered, and focused. Most of this was done through CSS although I did have to use JS for the disabled property. Overall, this button was a success!

Here it is!

This has been a great experience for me to learn. I successfully feel much more confident and I have a working button! Keep your eyes peeled for it to be on npm, but for now check out my GitHub repo.

https://github.com/hvk5388/cta-button/tree/main/hktb

Boilerplate Structure

Kern Designs — Sun, 12 Sep 2021 22:23:58 +0000

There are a lot of different options out there in terms of boilerplates. Everyone seems to be strongly in one camp or another, and if you're not in theirs, you're wrong. I decided to deep dive into what they are and their similarities and differences. To do this, I chose Vue.js, Angular, React, and StencilJS.

Commonalities

So what commonalities are there between the boilerplate code? Each framework contains HTML, CSS, and JS in a source directory to run the boilerplate. Angular, React, and StencilJS also all include back end code you won't have to write yourself. Because of this, as well as all the dependencies, Angular and React will take a lot longer to install. This makes sense based on the amount of files.

So which is the easiest?

Vue has the clearest file structure to understand, by far. This is mostly because of how few files in has in comparison. Unfortunately, Vue is not as well know as other technologies like React. This means you can find much more on the web to help you with it. If I was starting to build an "app" tomorrow, which would I use? I would go with React. I have a little experience with it as well as the knowledge of its resources. The scaling of React is going to be much easier because of the amount of development it has had.

If you're interested in learning more about the structure check out https://github.com/TheKodingKrab/boilerplates. In this repo you can find Vue.js, Angular, React, and Stencil.js.