DEV Community: Matthew Wigoff

Getting to know Docker and its Power

Matthew Wigoff — Thu, 28 Apr 2022 19:19:04 +0000

Why Docker is Powerful
Docker is a platform for building, running, and shipping applications. We can easily package up our applications with all the files they need to run on any Operating System. Docker uses containers. In this isolated environment, Docker can use many versions of node at the same time. If an application uses Node 14 and another application uses Node 9, both of these applications will run on the same machine at the same time because of Docker's containers. Another powerful aspect of a Docker container is that they don't take up much memory on your hard drive.

src: https://jfrog.com/knowledge-base/the-basics-a-beginners-guide-to-docker/

Getting Started with Docker
Download Docker for your specific Operating System at Docker Docs
For Windows, you may get an installation incomplete message stating your Linux kernel needs to be updated. Follow the link in the error message and go down to step 4 to download the latest Linux kernel on your machine.

To get familiar with how Docker works go to Labs - Play with Docker and follow the steps here

In the session, click on Add New Instance to get started.
Clone the repository in and use the ls -la command to verify the contents of the folder.

Establish the Container. In the CLI type 'docker build -t todoapp .' to build an image for the application. The (.) after the command tells the system the Dockerfile can be found in the current directory. The -t is to tag the image with a descriptive name.
List your images. Type 'docker images' in the CLI to see the new todoapp image.
Run the Container. Now that the image is established, use the command 'docker run -d -p 3000:3000 todoapp' to run the new container based on the new image.
Now that you have containerized your application, you are able to create multiple todoapps.
That wraps it up for setting up with Docker

Working with 11ty/eleventy to make Blogs

Matthew Wigoff — Wed, 27 Apr 2022 23:13:27 +0000

11ty is a static site generator that can build sites using HTML and CSS. 11ty takes complex markdown files and JSON files and condenses them resulting in an API for us to leverage content and build templates with.

Learn 11ty from Scratch Article

Starting with 11ty

First ensure you have the latest versions of NPM and NODE installed on your PC. Simply type npm -v or node -v in your terminal to see the version of npm and node you currently have.
Create a folder, preferably named 11ty, and open it using the Visual Studio code editor. While in Visual Studio code editor under the 11ty folder, create a .gitignore file. What this does is ignores any file that ends with the extension after the asterisk (*)

Add a .eleventy.js file under the 11ty folder you created. This file will empower your 11ty site to produce the final output.
Add dependencies to your 11ty site. Now we will install a package.json file. This allows npm to handle the project's dependencies properly. In your 11ty folder run 'npm init -y' in your terminal. This will allow npm to generate the package.json file for you.
With all of those steps complete, now it's time to install eleventy. Run the command 'npm install @11ty/eleventy' in your terminal.
Create a folder and label it 'src'. Under this folder create a file named index.md. For this blog post, I will simply be typing Hello World! in the index.md file. Save all your scripts in VS code editor and type 'npx eleventy --serve' in your terminal and click on the Local URL. You should see a page that looks like this:

Pre-established Eleventy Blog Template
Go to eleventy base blog to clone the repository to your local file/folder.

The cool thing about leveraging this repo is that it comes pre-built with links, tags, and posts. All that is required of you is to edit the information in the files. Here is an example of how I edited the firstpost.md file:

Pretty awesome? Yes, very.

Now to take a look at how everything came out, in your terminal execute the npm install command. After all dependencies are loaded in, type npx eleventy --serve in your terminal. This is how my blog post webpage turned out:

11ty Blog Post Part 3
For this eleventy site, we will be following the steps provided in the first section, getting started with 11ty, however we will be adding a little more to it. The work is credited to Learn Eleventy From Scratch Article. To run the site easier, change the scripts section of the package.json from "test": "echo \"Error: no test specified\" && exit 1" to "start": "npx eleventy --serve". What this does is allows you to type npm start to serve the site. Follow the steps in the article to complete building your sample eleventy site.

First User Experience
From here, we have a thorough understanding of the concept behind 11ty/eleventy. The Part 3, with leveraging a sample of someone else's eleventy site was the most time consuming but in depth learning experience from all three static sites created. The easiest and most fundamental was the actual blog post 11ty site. This includes a great template to organize things and get started with eleventy.

Links and Repositories
eleventy sample repo
Site 2
Hello World Beginners Setup

Option 3 - API/Product Owner - Wikipedia-Query

Matthew Wigoff — Wed, 27 Apr 2022 20:07:15 +0000

What is an API
API Stands for Application Programming Interface. An API is the glue for two systems communicating with one another to exchange credentials to access information. An API integrates the front-end with back-end.

Fetch
The fetch() functionality provides a wait time to achieve a successful connection of fetching a resource from the network to establish a promise from the availability of the response.

The way a fetch() API works is first pass in a URL. This is the first property. The second property is optional, however this is where you put in the post request.

Consider the below image for example. (this.locationEndpoint + userIPdata.ip) is fetching the 'https://freegeoip.app/json/' URL. The '.then(resp.ok){
return resp.json();}'
block of code is returning a promise, specifically the .json function.

The '.then(data => {
console.log(data);'
block of code returns the data latitude, longitude, city, and region name.

Wikipedia Query
The below code snippet adds the Wikipedia Query Search for location, city, and region.

Importing the wikipedia-query web component allows us to use the html wikipedia page.

Git Repository

Getting Started with Vercel

Matthew Wigoff — Tue, 15 Mar 2022 00:53:16 +0000

About Vercel

Vercel is a high-performance front-end framework and static website platform. Vercel is great for front-end teams because 1. It is easy to use and 2. It generates an efficient way of creating static sites. Pertaining to the Developer Experience (DX), Vercel provides clarity, an ease of use, stability, and function.

Creating a Project and Deploying with Vercel

First, create a personal account on Vercel and link it to your GitHub account. You can also create your personal account with your email, GitLab, or Bitbucket.

Second, from the Dashboard, select New Project and you have the option to import from an existing Git repository or use one of Vercel's many templates. In the Build & Development settings, I recommend changing the root directory to dist or _site.

Third, through a build step, you will deploy your project to transform it into a production-ready site. Once your project has been successfully deployed, it will be saved to your dashboard.

Vercel Command Line Interface Commands

Make a preview deployment:
$ vercel
Make a production deployment:
$ vercel --prod

My Vercel Deployments

my vercel-demo on GitHub
my vercel dashboard

My Dashboard:

My Weather App Vercel demo:
weather app vercel demo page

My 11ty Vercel demo:
11ty vercel demo

Another 11ty Vercel demo:
another 11ty vercel demo

Citations

Building Basic Web Components (open-wc)

Matthew Wigoff — Fri, 21 Jan 2022 21:37:55 +0000

Hi, I'm Matthew. My goal is to make you feel comfortable using the node.js command prompt to open web components.

node.js
To get started, download node.js. Go to https://nodejs.org/en/download/. Select the Long-Term Support (LTS) option for your operating system (OS); Windows, Mac, Linux, etc.

Visual Studio Code Editor
Along with node.js, you will need a code editor. I prefer Visual Studio Code. Go to https://code.visualstudio.com/ and download the latest version for your OS.

npm and yarn
Check to see if you have npm and yarn installed. You can do this by typing npm -v and yarn -v in your node.js command prompt.

If you do not have npm or yarn installed, run the command "npm install -g npm" (without the quotes) for npm, and "yarn install" (again without quotes) for yarn. Npm is an online repository to publish node.js projects and it is a command-line tool to interact with specific online repositories for package installation. Npm provides you the ability to publish open-source applications on the web.

Folder for Projects/Clone Repository
In order to clone your repository from GitHub into a folder, add a folder on your desktop, or wherever. To access the folder from node.js command prompt, you will have to change directories. Follow the below images for an example. Run the command "git clone (your link)" to clone your repository from GitHub.

Using node.js Command Prompt to Connect to open-wc
To connect your repository to open-wc, navigate to your folder using command prompt. For me, I typed the following commands into node.js command prompt:

cd desktop
cd edtechjoker_labs
cd edtechjoker-lab1
npm init @open-wc
Answer the questions at this point
a. 'Do you want to write this file structure to a disk? >> Yes
b. Do you want to overwrite 'File Path'? >> Yes for all files
c. Do you want to install dependencies? >> Yes, with npm
cd hello-world
npm run start

VOILA, you have created your web component.

Your computer should then open a web page that looks like:

Editing src code in HelloWorld.js
Now you can edit code in your HelloWorld.js file in Virtual Studio Code editor. Open Virtual Studio Code and select File > Open Folder and select folder you uploaded the Hello World folder to. In Virtual Studio Code, under the src drop down, double click the HelloWorld.js file. Now you can edit the file as you choose to. To push the changes from the file to your GitHub repository, enter the following commands in your node.js command prompt:

git commit -am "" (without the carrots)
git push origin main

It will look something like:

Works Cited
1) Cesar Jr RodriguezCesar Jr Rodriguez 1, and Suresh AttaSuresh Atta 117k3737 gold badges188188 silver badges293293 bronze badges.
“Whats the Meaning of 'Static Get' in Javascript (ES6)?” Stack Overflow, 1 Mar. 1965,
stackoverflow.com/questions/42884751/whats-the-meaning-of-static-get-in-javascript-es6.

2) “Export - Javascript: MDN.” JavaScript | MDN, developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export.

3) “Import - Javascript: MDN.” JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.

4) “Increment (++) - Javascript: MDN.” JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment.

5) “JavaScript Object Constructors.” JavaScript Constructors, www.w3schools.com/js/js_object_constructors.asp.

6) Node.js. “What Is NPM?” Node.js, nodejs.org/en/knowledge/getting-started/npm/what-is-npm/#:~:text=npm%20is%20two%20things%3A%20first,A%20plethora%20of%20Node.

7) React Render HTML, www.w3schools.com/react/react_render.asp.

8) “Return - Javascript: MDN.” JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return.

9) “Static - Javascript: MDN.” JavaScript | MDN, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static.