DEV Community: Jimmy Kane

Making your applications run consistently with Docker

Jimmy Kane — Sat, 26 Mar 2022 19:29:35 +0000

We all have been there. You have code that runs locally on your machine just fine so you push it to version control, someone else comes along and runs your code and it doesn’t work. It is a very frustrating position to be in, especially as a rather new programmer like myself. This problem though isn’t always this small, sometimes code that works fine on our machines and in the development server crashes in production.

To aid this problem, there is a way to package or contain your code as well as running it in a common form so it preforms the same way, no matter where it is! This idea is called containerization and it provides a consistent environement for code and projects to run in. One of the most popular companies in this space is Docker.

Getting Started with Docker Playground & Tutorial

If your familar with A Tour of GO Docker has a similar learning playground called Docker Playground. Here you can play around with a command line and run Docker commands and containers for FREE. This does though require an account though I just signed in using my GitHub account. For this tutorial we are going to be getting the Docker 101 Tutorial running so you have access to the documentation to begin your learning.

Step 1: Create a new Instance

Select the + ADD NEW INSTANCE button to create a new session/instance of the Docker terminal.

Step 2: Run the Docker Tutorial container

As it mentions on the labs page, click in the black terminal area next to the $ and paste in the following:
docker run -dp 80:80 docker/getting-started:pwd

Step 3: Open the tutorial

You may now notice a blue 80 next to the Open Port button, click this and you should have a new page open containing the Docker tutorial/

Understanding DockerFiles

To create a container for a project, there needs to be a set of instructions to tell Docker how to compile and run the project. Some services like pipelines use .yaml files to do this, Docker has its own method called DOCKERFILES. An example can be found here and we’ll disect what the red words mean now.

FROM

This is always the first command in a DockerFile and it declares what the base image of the container is. Think of this like the OS your code needs to run in, for our example our code is a Node app, thus it runs node:12. If you want to learn more, here is an article for your viewing pleasure.

WORKDIR

This establishes where your base working directory is inside of the container. If you open up terminal or command prompt now, the base working directory is your user folder. Image inside of your container, you are establishing where the terminal starts out.

COPY

This works exactly like the cp command in linux/unix. The first parameter is file to be moved and the second parameter is where you are moving it to. This example has two:

The first copies the package.json file to /home/node/app/package.json
The second command uses the . which represents all files and folders in a directory. In this line, it copies everything from the repo to the container at //home/node/app/..

RUN

This allows you to run a command like you would in the terminal but inside of the container. So this container will run yarn install to install all dependies from package.json. This triggers while the docker image is being built.

CMD

This takes in array of params and when the container is run, this command is run inside of the container. This example runs yarn start which starts the Node server. This command differs from RUN in the sense that this only runs when some runs the container, NOT while it is being built.

Vercel & Eleventy

Jimmy Kane — Wed, 16 Mar 2022 23:51:58 +0000

# What is Vercel & Developer’s Experience

Vercel is a Function-as-a-Service(FaaS). Traditionally, developers would need to create CI/CD pipelines to build and then host their applications somewhere on the internet. This pipeline would require input for the commands to compile the project, package the project as a container, load and run the container, as well as setting up the hostname and paths for the site/application. Vercel basically takes care of that whole process for you and well “it just works”. Vercel will create serverless AWS Lamba functions, compile and host your application, and do most of the configuration for you.

Deploying your first project

For this demonstration we will be doing everything inside of the (Vercel GUI)[https://vercel.com/] with (this GitHub repo)[https://github.com/liljimmyk99/ist-vercel-demo]. The thing can be accomplished by local code and the Vercel CLI.

Once you have created a new account, you will want to intergrate your GitHub/GitLab account as this will automatically pull your repositiories. When this is done, select New Project and you’ll see the following screen. Navigate to the repositiory you’d like to deploy, in my case it is ist-vercel-demp, and select import.

If you are using a framework that is natively supported like Eleventy, React, Vue, or Angular just to name a few, most of these setting will be filled in for you. Since my project is none of those, it is a web-component, I have to manually change these settings. I know from testing this locally, my built project is in a dist folder that is created. Thus my Output Directory must be overrided and switched. I don’t need to change the Build Command or Install Command as the presets are correct for my situation. Your situation may not use the defaults and can be overrided. My application also has environmental variables that are required, but I can easily add them here. When you are satisfied with the settings, you can click Deploy

You will have to wait a couple seconds/minutes for the build and deploy routines to run. You can follow and skim through the logs as the process goes on. On the project is complied, you click a button and it leads you to your project’s page.

Here you can see deployments of your projects, it’s domain name, the branch it used for the deployment, the logs from Build, the logs for serverless functions in the application, and domains created for the application. Satisfied with your information, select Visit to be taken to your website!

Other Examples

Eleventy Hello World

Vercel: (https://11ty-hello-world-five.vercel.app/README)[https://11ty-hello-world-five.vercel.app/README]
GitHub: (https://github.com/liljimmyk99/11ty-Hello-World)[https://github.com/liljimmyk99/11ty-Hello-World]

Eleventy Basic Blog

Vercel: (https://vercel.com/liljimmyk99/eleventy-basic-blog)[https://vercel.com/liljimmyk99/eleventy-basic-blog]
GitHub: (https://github.com/liljimmyk99/eleventy-basic-blog)[https://github.com/liljimmyk99/eleventy-basic-blog]

Intro to 11ty

Jimmy Kane — Sun, 13 Mar 2022 23:11:46 +0000

What is 11ty? It is a static site generator that converts markdown, Nunjuck, or JS files into HTML and CSS. This is great for those new to web development and just want to create a site as fast as possible.

Hello World

To get started, open terminal to a directory you’d like the site to exist. Enter the following commands, touch Readme.md and code .. This should create the a markdown file and open vs code. To get started add a file header such as # Hello There and some basic text below. like what I have here. To generate html it takes 2 commands, npx @11ty/eleventy and npx @11ty/eleventy —serve. This will generate a directory called __site white will contain html and —serve will cause a server to spin up. Open the localhost port displayed and go to /readme/index.html to see your site!

Template Blog

Say you want a more professonal looking site without having to do a lot of extra work, you’re in luck! 11ty has a community that has created templates that are available at this site. For this example, we will use the eleventy-base-blog, make sure to go to this repo and select the USE THIS TEMPLATE button to make a copy of the project in your namespace.

Once you have cloned and pulled the repo to your machine, open the folder in VS Code. You want to look in the posts directory and here you is where you can add/update posts. I decided to clear out the posts and change them with my own dev.to posts. When ready to view the code again there are two commands to run: npx eleventy and npx eleventy —serve.

Feel free to add more files and get more creative styling! Now that you know the basics, what are you waiting for, start coding!

Links:
11ty Hello World Repo: https://github.com/liljimmyk99/11ty-Hello-World
11ty Hello World gh-page: https://liljimmyk99.github.io/11ty-Hello-World/
11ty Basic Blog Repo: https://github.com/liljimmyk99/eleventy-basic-blog

HAXCMS in Docker

Jimmy Kane — Sun, 16 Jan 2022 23:42:49 +0000

What is Docker

Docker is a platform as a service(PaaS) product that containerizes applications with only necessary dependencies. As a result, no matter what OS runs the container, it will behave the same. Using a tool such as Kubernetes allows for multiple containers and thereby instances of the same application to be deployed at once. Docker allows containers to be tagged allowed for versioning and additional metadata to be saved. In production environments, docker is used to create containers but Kubernetes is used to deploy containers.

How to Install Docker for Mac

Go to https://www.docker.com/products/docker-desktop and download Docker Desktop
Move Docker Desktop to the Applications Folder

Close the Installer
Open Docker Desktop
You may get the following prompt, just select open and continue
Create a Docker account and sign in.

Building an Image and Running Container

Go the HAXCMS GitHub repo and download it.
Open VSCode to the repo or terminal and navigate to the directory
Build the docker repo and name it by using the following command docker build . -t <Insert Wanted Name Here>
Run the container by using the 'docker run -dp 80:80 '
Open browser to localhost:80

How to stop container

Open Terminal
Run docker ps
Run docker stop <containerID>

My Possible Futures

Jimmy Kane — Sun, 07 Nov 2021 22:39:40 +0000

We all have ideas of what the future could look like. We all have ideas to make the future better. We all have dreams about what could happen. For me, I ponder what if I could do X thing. If I could build an app, website, or technology of any kind, What would it do? A little background on me, I run the Penn State College of Information Sciences and Technology Peer Tutoring program. I have been in this role for the past 3 years now and it gives me a source of great pride for me to help my fellow peers. A personal project for me would to build a college-specific tutoring video library. This service would be similar to LinkedIn Learning where a student would select a course and follow along with the modules, but the module has short videos and links going over each topic. Each topic would be explained in a few different ways to match different learning modes and provide the best possible asynchronous tutoring experience. My goal is to provide a tutoring experience to all college students regardless of whether or not they have access to an in-person tutor. Similar to how students are automatically added to their learning management system's courses, students would have access to our service the same way. Students would go to their course, select the tutoring tab, and select the topic they are struggling with.

Outside of an application development lens; if money and time were of no concern; what would I do with my life and the skills I've assembled if I could dedicate it to one thing? I would create a trades school with "majors" in fields students could have a future in. These majors would be in subjects where good-paying jobs are common and may not be traditional college majors. Automotive technician, diesel technician, electrician, plumbing, programming, accounting, cyber security, among many others. The school would focus on real-world problems, experience, and building a portfolio. I feel that college inadvertently locks undecided students into believing a typical college education is the only way to go. I know it's not the case and I want a school that gives students a way to know if a trade is their favorite career path or college. I probably can say if I went to this type of school, I don't know if I would be a programmer since I love to work with my hands. If I can make anyone's career choice easier than mine, I would be fulfilled professionally!

in LitElement

Jimmy Kane — Mon, 25 Oct 2021 00:31:47 +0000

When designing new web components, the goal is to keep them as abstract as possible so that they can be used over and over again. If web components are made specifically for a given project and need something similar for another, you'll just be coping the same exact code over and over again. That would violate the DRY coding principal or simply put "Don't Repeat Yourself".

In a previous post, I talked about how I am developing a card like the one below. One of the assignment criteria is to have 4 components: the entire card itself, a scaffold of the card, the icon, and banner. To keep the card dynamic, all text fields and the icon can be set thanks to slots and I will show you how we have done that thus far.

Lets start with the inner most component the Learning-Icon. This is a relatively simple component as it will display a different a SVG based on the type attribute passed into it.

The Learning-Icon is then used within the Learning-Banner but say that I later create an Icon called Quiz-Icon. If I hardcoded in the Learning-Icon the banner will be tied to just the learning card. To add this flexibility I made use of the tag and named it "icon". Same thing applies to the headings, to keep the styling and content of them open to the user I also used slots and gave them names. You do not need to name your slots, if you don't, it will fill slots in the order you pass them in. However it just takes an extra attribute just to ensure that slots and their values are paired correctly; so why not do it.

As mentioned above say I want to have a Math-Card or a Computer-Card, they are both basically the same. They both will have a header of some kind, and some sort of content, thus we will create a template with some base styling and framework. I called this Learning-Scaffold as we plan to this card used in a learning context. This card has two named slots, one for the banner and the other for the content.

Now bringing it all together we define a Learning-Card which implements a Learning-Scaffold. From here I define all of these components and all of their slots.

Considerations when building a Web-Component

Jimmy Kane — Sun, 10 Oct 2021 22:05:44 +0000

So you are considering making a web component for a project, what should you consider before you code a single line? How should much you consider making the component specific to the application or general? In this post, I will go over my team's design considerations for a display card component we are developing for class.

Our card should look like the card below and it will be used in online-course websites for Math or Science courses. Each card regardless of type has two titles, an icon, and a large section meant to put bulleted text. When deciding how to attack this project we asked a series of questions:

What are the characteristics of the card?
What design considerations must we take into account?
What accessibility concerns do we potentially have?
What security concerns do we potentially have?
What "states" does this card have?
What do we call it?
Do we have room for additional reusable atoms to be produced? Let's go and answer some of these questions. I broke it down already but we have a header and sub-header text, an icon, a content area for a bulleted list, and a colorized banner in the header. Looking at the example card it is possible to imagine someone may have a long title or have a smaller icon or several other exceptions. In general, we must consider scaling of text for the header and list; the color of the banner based on content, changeable icons, and consistency of the margins and padding just to name a few. When it comes to accessibility we need to ensure that the text inside of the card is accessible to a screen reader; the font on the card is a reasonable size; have a high contrast option; ensure the text inserted can be for any language, and ensure the card can be "tabbed" through. Security for us is boiled down to SVG file vulnerabilities and content modification most of the content is loaded in via an API. A card can be clicked, disabled, and focused/hovered. Cards also have a state based on if they are a Math or Science card. To keep this card abstract we can have a colored banner, Icon, Skeletal Card which outlines a header and body subcomponent, and the entire card itself to help with margins. What difficulties do I expect to experience? Mainly how to adjust font size and padding based on the length of the text and slotted content. I do not have a lot of experience with CSS so learning to dynamically change it will be difficult for me. This component will be practicing encapsulation from other languages except in HTML. Planning of the slot values will also be difficult. Considering how four components do need to work with one another, planning these values will be more difficult than coding them.

CTA Button Web Component

Jimmy Kane — Sat, 25 Sep 2021 22:59:39 +0000

For my Web components class at Penn State, we have been tasked with creating a Call-To-Action(CTA) button. So for my partner and I have some basic CSS applied to our button so we can visualize the changes in states: disabled, active/hover, and active/clicked. In general, our project currently is just a template of everything we need to still complete. We still need to work on the disabled state, inverted/high contrast mode, and the finalized styling to have a circular button instead of a rectangular button.

Our progress has not been without challenges though; mainly understanding the requirements for the project and understanding the Open-WC boilerplate. My partner and I midunderstood the directions since we initially did not have a tag and we tried to make a button from scratch. Once we had a chance to meet with the professor again we realized we needed to have the tag and that immediately helped solve a lot of our issues. Since I am still new to web components, I did have trouble figuring out where the tests, storybook, and styling of the component took place in the example.

So far I have learned the basics of the Open-WC framework and how powerful web components are. I now understand the directory structure of this project and how useful storybook is! Also, web components are an example of practicing DRY(Don't Repeat Yourself) in web development. Especially in large organizations having the same look, feel, and function to web components is essential. My partner and I still have work to do and I still have tons to learn from here the rest of the semester!

Link to the current element: https://github.com/3B4B/circle-button-fj

Web Component Framework Breakdown

Jimmy Kane — Sun, 12 Sep 2021 21:52:19 +0000

This week in my Web Components class, we looked into 4 popular Web Component Frameworks: Angular, React, StencilJS, and VueJS. Each group member took one framework and followed the boilerplate/"Hello World" example to understand how projects in these frameworks are structured. Below I will show the results of our research and testing as well as providing my personal opinions on a framework I would use.

Across all four frameworks, there were some similarities to the way they worked. All four use JavaScript to create/define their components as well as the interactions with them. Stencil JS does use TypeScript files however TypeScript is then translated to JavaScript. The frameworks also have a similar file structure in a sense that each component is given it's own directory to be defined within the project. What is in these directories varies by project. Most use a JavaScript function and returns that return HTML but VueJS uses.Vue Files instead. Lastly, all of these frameworks have a base index.html file which is where all the custom components are added to/called.

Based on looking at these frameworks, I think VueJS has the easiest development experience because it has the fewest amount of files out of all four frameworks. I found when looking at the boilerplates for these frameworks, I easily understood where everything was in the VueJS directory. I did not need to dig very far to find where the custom component was defined and what files interacted with it. Since I have not used it to build anything, I don't know if can efficiently handle interactions like in other frameworks. I have heard of React and Angular from my previous internships, but I have not heard of VueJS before. This leads me to wonder how vast the development community is.

With a few finds from our research, I would probably work with React to build an application. I know from personal experience that the react community is vast. The JavaScript files declaring components looks like HTML and is easy to understand what the code does. I also can easily follow the file structure of this project, there are more files than VueJS, but it is still easy to follow along.

To view the boilerplates my group generated, please visit our GitHub Repo here: https://github.com/3B4B/boilerplates

Installing open-wc on MacOS

Jimmy Kane — Sun, 29 Aug 2021 03:08:31 +0000

In order to install open-wc we need to install some software, namely NodeJS/npm, and yarn. We will start with NodeJS. First, navigate to https://nodejs.org/en/ and install the LTS version, at the time of writing that is 14.17.5. Once the installer finishes downloading, open it and follow the prompts. If npm is already installed on your machine preform the npm install -g npm@latest to install the latest version of NPM

Upon completion of installing Node, open Terminal and type in the following commands: node -v and npm -v to verify that your installation was successful.

To install yarn, open terminal type the following command: curl -o- -L https://yarnpkg.com/install.sh | bash. Upon the completion of the command preform the following command to verify installation: yarn -v.

With our dependencies installed, let’s create a test project called “hello-world”. Let’s change directories such as Documents. Open termainal and type cd Documents. Type ‘pwd’ to verify the output is /Users/<Your User Name>/Documents. Then type npm init @open-wc and select the following options: Scaffold a new project, Web Component, enable Linting, Testing, and Demoing, do NOT use typescript, name it hello-world, select yes to write files to your hard drive, and Yes with Yarn.

To verify the project worked, type the following commands cd hello-world and then npm start. If your web browser opens, then your job is done. To stop the project, return to terminal and hit ‘control’ + ‘c’

console.log(Hello World)

Jimmy Kane — Fri, 27 Aug 2021 01:13:16 +0000

Hello World, my name is Jimmy Kane and I am a Senior at Penn State Main. I'm majoring in Human-Centered Design and Development with a minor in Information Sciences and Technology. I am currently enrolled in an Introduction to Web Components course which I am excited to take this semester! Most of my coding experience overall has been backend web/server development. I had the chance to intern with Penn State Enterprise IT in their Software Engineering department which is where most of my realworld experience is from. In this internship I developed a webscraper with an AWS Lambda and AWS DynamoDB; a Podcast Management System API built using a AWS DynamoDB linked to an AWS S3 bucket via an AWS Lambda Function and API Gateway; and I worked on the custom Penn State Alexa Skill.

Outside of Penn State my first internship was with the Bensalem Township School District’s IT department. I got to see the inner workings of a small IT organization that does not code. I was able to learn about Cisco Meraki, a Mobile Device Management system(MDM), the planning and executing of large IT projects, and being able to translate IT jargon to the average person’s diction level. I also had the opportunity to Intern with Ford Motor Company IT this past summer as a Design Thinking Intern. I was able to see how design thinking is applied by professionals in a large company and pick up some tricks by these professions for interviews.