DEV Community: mnmartinelli

Experimenting with API microservices

mnmartinelli — Mon, 02 May 2022 03:58:54 +0000

Adding Wikipedia's API to my project

Wikipedia is a monolith in terms of knowledge of almost any subject. In my recent project, a user's location is displayed via Google Maps based off their IP address using Free Geo IP.

Since we are able to determine a user's city and state already, the project has expanded to incorporate wikipedia-query source. This web-component calls the Wikipedia API, receives JSON data back and is able to display information about a user's city or state.

Install/Setup

Wikipedia-query needs to be added as a dependency in package.json.
Import into the project: import '@lrnwebcomponents/wikipedia-query';

Usage of location

//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>

Wikipedia-query can display more than location information and can be included in your project today. Please visit wikipedia-query documentation and Wikipedia Offical API documentation

Vercel Deployment explained

mnmartinelli — Mon, 02 May 2022 03:27:20 +0000

Vercel who?

Vercel is designed to increase developer efficiency. Allowing teams to develop, preview and ship static sites on the fly. Built with performance in mind, Vercel deploys instantly and scales automatically.

Vercel Quickstart

Vercel developed their own CLI, however I found it easier to use their website. You'll want to start by creating your own account or by signing up through GitHub.

After you have created an account, create a new project.

Then, connect Vercel to your GitHub account and import the repository you'd like to deploy.

In this guide, I forked my repo from here. Also, feel free to view my repo

Build & Development Settings

Please save and change your settings to the following:

Build Command change setting to npm run-script build
Output Directory change setting to: dist
Install Command change setting to: npm install

Additional Settings:

Vercel has many features for developers to take advantage of, including: Environment variables, Integrations, logs, analytics, and Severless functions (premium feature).
If you would like to learn more, please visit the official documentation

Time to Deploy

Press the Deploy button and you'll all finished! Congratulations on deploying with Vercel. If you run into any issues, be sure to check the build log.

Open-WC Beginner Guide

mnmartinelli — Mon, 02 May 2022 00:25:07 +0000

Welcome to the world of Web Components!

Open-WC is a powerful tool to develop web-components fast. With some simple JavaScript here, and few installs there, you'll be an experienced developer in no time.

I highly recommend using Linux or WSL for web development, however this step is optional and all install links will be provided below. If you would look to install WSL with a customized terminal look and feel, follow my guide here.

Dependencies Required:

NodeJS NodeJS includes NPM and both can be installed with one command:

$ sudo apt-get install -y nodejs

Optional Installs:

VS-Code
Recommended VSCode extensions:

Open-WC Installation/Setup:

Create a folder and enter into the directory:
```
$ mkdir open-wc-demo
$ cd open-wc-demo
```
NPM install Open-WC
```
$ npm init @open-wc
```
Select "Scaffold a new project" using the enter key.
Select "Web Component" using the enter key.
Select All (Linting, Testing, & Demoing) by pressing "a" and then enter key.
Please select "No" to not use typescript. We will be using Javascript.
Then give your web-component a name, I will be calling mine "open-wc-test".
Select Yes to write the file structure to the disk.
Then, select "Yes, with npm" to install all dependencies.
Lastly, to test if everything works run npm start

Developing with Open-WC

Learn more from Lit Documentation,
Learn more from Open-WC Documentation

Hello World example provided by Lit Playground

The ultimate starter setup

mnmartinelli — Sun, 01 May 2022 23:29:42 +0000

TLDR; This guide will setup WSL2 Ubuntu web development environment with oh-my-posh customization.

Prequesites

Install Windows Terminal
- Download
Install the latest version of PowerShell
- Download
Install VSCode
- Download

Setup WSL2

Update to the latest version of Windows before proceeding
Navigate to 'Turn Windows features on or off'
Enable 'Windows Subsystem for Linux' and Virtual Machine Platform
- Press 'ok', then following the instructions on-screen and restart the system.
After the system reboots, Install the latest version of Ubuntu
- Ubuntu-20.04 Download
Launch Windows Terminal, navigate to settings, and change the Default profile to 'PowerShell'
Open Ubuntu, setup a username and password
Switch back to PowerShell and enter the command:
```
wsl -l -v
```

1. If Ubuntu is running on WSL version 1, you'll need to change to version '2', Enter the following command:
```
wsl --set-version Ubuntu-20.04 2
```
if you're not using another OS:
```
wsl --set-version <os-name> 2
```
WSL2 might require a kernel update, if so please follow the link and install. Then run this command again:
```
wsl --set-version Ubuntu-20.04 2
```
Download Linux kernel update from MS
To make sure everything is running smoothly, restart windows Terminal and run the command:
```
wsl -l -v
```
Now WSL2 is setup and you can run the linux kernel directly with:
```
wsl
```

Customize PowerShell

Download Caskaydia Cove Nerd Font from nerdfonts.com
- Direct Download
- Extract zip folder and install all fonts.
- Then navigate to Windows Terminal Settings, Under profiles select 'Defaults' and change the font to 'CaskaydiaCove NF'
Install Oh My Posh and customize profile
- Oh My Posh Documentation
- In PowerShell enter: winget install JanDeDobbeleer.OhMyPosh
Create PowerShell profile
```
echo $PROFILE
```

Most likely this folder and file does not exist, you will have to create a 'PowerShell' folder and a 'Microsoft.PowerShell_profile.ps1' file in that location.

#command to create a folder
mkdir PowerShell

change directory to insider the 'PowerShell' folder

#creates file
echo $PROFILE >> Microsoft.PowerShell_profile.ps1

Open file in VS code
```
code .
```
Trust author and Install recommend extension

Replace text with:

oh-my-posh --init --shell pwsh --config ~/jandedobbeleer.omp.json | Invoke-Expression

save changes and restart shell.
OR
Install the theme I'm using from Scott Hanselman's Guide
Download Zip
Extract zip
Locate oh-my-posh\themes. For example, my theme folder was found here:
```
C:\Users\Michael\AppData\Local\Programs\oh-my-posh\themes
```
Place ohmyposhv3-v2.json inside themes folder

Replace text inside Microsoft.PowerShell_profile.ps1 with:

oh-my-posh --init --shell pwsh --config <add file path to theme here> | Invoke-Expression

Save file and restart shell. Your profile should look something like this:

Optional Plugins:

Terminal-Icons

Enter into PowerShell:

Install-Module -Name Terminal-Icons -Repository PSGallery

Then add the following to $profile
```
Import-Module -Name Terminal-Icons
```

PSReadLine

Enter into PowerShell

Install-Module PSReadLine -AllowPrerelease -Force

Then add the following to $profile

Import-Module PSReadLine
Set-PSReadLineOption -PredictionSource History
Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -EditMode Windows