{ "version": "https://jsonfeed.org/version/1.1", "title": "John's 11ty-starter template Blog", "language": "en", "home_page_url": "https://example.com", "feed_url": "https://example.com/feed/en.feed.json", "description": "TODO", "author": { "name": "John Forcina", "url": "https://example.com" }, "items": [{ "id": "https://example.com/11ty-starter/posts/en/second/", "url": "https://example.com/11ty-starter/posts/en/second/", "title": "Using the Wikipedia API via the wikipedia-query tag", "content_html": "

While familiar with them, prior to this week in class I had never used an API. APIs are useful tools that enable developers to connect to another service, Wikipedia in the case of this blog post, and communicate data.

\n

Fetch \n \n \n \n\n\n\n

\n

fetch is a JavaScript interface for making HTTP requests and receiving responses. It is a common way to retrieve data over the internet via APIs. In this lab, using fetch enables me to make an HTTP GET request for information from the Wikipedia API and send the response to be rendered by a web component. Take a look at how fetch is used in the wikipedia-query.js file:

\n
updateArticle(search, headers, language) {
    fetch(
      `https://${language}.wikipedia.org/w/api.php?origin=*&action=query&titles=${search}&prop=extracts&format=json`,
      headers
    )
      .then((response) => {
        if (response.ok) return response.json();
      })
      .then((json) => {
        this.handleResponse(json);
      });
  }
\n

After sending the request to the Wikipedia API (which I’ll go over next) the resulting JSON response is sent to a LitElement to be rendered in HTML.

\n

The DOM is updated when variables are updated and may require the page to be re-rendered with new data. fetch can be used to assign variables data from an API. When the API is called and the variables are updated, the DOM is updated and the page is re-rendered.

\n

Wikipedia API \n \n \n \n\n\n\n

\n

The Wikipedia API allows developers to connect to Wikipedia and search or manage wiki entries. While the API has several actions, in this lab specifically I am using the query function. According to the API documentation: “The action=query module allows you to fetch information about a wiki and the data stored in it, such as the wikitext of a particular page, the links and categories of a set of pages, or the token you need to change wiki content.” This lab is specifically querying for extracts of the specified pages.

\n

To use the API in this lab, I placed the wikipedia-query tag in the LocationFromIP.js file that is responsible for retrieving the location of the user who opens the page and rendering it on an embedded Google Map. I took the city and state data from the location API and stored it in two objects.

\n

I placed three tags at the bottom of the render function for the map iframe and link.

\n
render() {
    const url = `https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed`;
    return html`
      <iframe title=\"Where you are\" src=\"${url}\"></iframe>
      <p>
        <a href=\"https://www.google.com/maps/@${this.lat},${this.long},14z\"
          >https://www.google.com/maps/@${this.lat},${this.long},14z</a
        >
      </p>
      <wikipedia-query search=\"${this.city}, ${this.state}\"></wikipedia-query>
      <wikipedia-query search=\"${this.city}\"></wikipedia-query>
      <wikipedia-query search=\"${this.state}\"></wikipedia-query>
    `;
  }
}
\n

The way the Wikipedia API works in this lab starts with the wikipedia-query tag. The location value is sent to the API as the search value for the fetch. After receiving the request, the API searches for a wiki page that matches the title sent. If a match is found, a JSON response is sent containing HTML extracts for that wiki page. An example JSON response for State College, Pennsylvania is shown below:

\n
batchcomplete\": \"\",
\"warnings\": {
\"extracts\": {
\"*\": \"HTML may be malformed and/or unbalanced and may omit 
inline images. Use at your own risk. Known problems are 
listed at 
https://www.mediawiki.org/wiki/Special:MyLanguage/Extension:TextExtracts#Caveats.\"
}
},
\"query\": {
\"pages\": {
\"131800\": {
\"pageid\": 131800,
\"ns\": 0,
\"title\": \"State College, Pennsylvania\",
\"extract\": \"<link rel=\\\"mw-deduplicated-inline-style\\\" href=\\\"mw-data:TemplateStyles:r1033289096\\\">\\n<p class=\\\"mw-empty-elt\\\">\\n</p>\\n<p><b>State College</b> is a home rule municipality in Centre County in the Commonwealth of Pennsylvania.  It is a college town, dominated economically and demographically by the presence of the University Park campus of the Pennsylvania State University (Penn State).\\n</p><p>State College is the largest designated borough in Pennsylvania. It is the principal borough of the six municipalities that make up the State College area, the largest settlement in Centre County and one of the principal cities of the greater State College-DuBois Combined Statistical Area with a combined population of 236,577 as of the 2010 United States Census. In the 2010 census, the borough population was 42,034 with approximately 105,000 living in the borough plus the surrounding townships often referred to locally as the \\\"Centre Region.\\\" Many of these Centre Region communities also carry a \\\"State College, PA\\\" address although they are not part of the borough of State College.  \\\"Happy Valley\\\" and \\\"Lion Country\\\" are other terms used to identify the State College area including the borough as well as the townships of College, Harris, Patton, and Ferguson.\\n</p>\\n\\n\\n<h2><span id=\\\"History\\\">History</span></h2>\\n<p>State College evolved from a village to a town to serve the needs of the Pennsylvania State College, founded as the Farmers' High School of Pennsylvania in 1855. State College was incorporated as a borough on August 29, 1896, and has grown with the college, which was renamed The Pennsylvania State University in 1953.\\n</p><p>In 1973 State College adopted a home rule charter which took effect in 1976; since then, it has not been governed by the state's Borough Code, although it retains \\\"Borough of State College\\\" as its official name.\\n</p><p>The university has a post office address of University Park, Pennsylvania. When Penn State changed its name from College to University in 1953, its president, Milton S. Eisenhower, sought to persuade the town to change its name as well. A referendum failed to yield a majority for any of the choices for a new name, and so the town remains State College. After this, Penn State requested a new name for its on-campus post office in the HUB-Robeson Center from the U.S. Post Office Department. The post office, which has since moved across an alley to the McAllister Building, is the official home of ZIP code 16802 (University Park)...
\n

The response is rendered in HTML to be displayed on the page.

\n

This API is a useful tool for people trying to access information about anything Wikipedia has a wiki on. You can check out the API documentation here. Take a look at the source code for this lab in my github repository to learn more about how I completed it.

\n", "date_published": "2022-01-30T00:00:00Z" },{ "id": "https://example.com/11ty-starter/posts/en/first/", "url": "https://example.com/11ty-starter/posts/en/first/", "title": "Getting started with web components", "content_html": "

Prior to this week, when I thought of web development I thought of HTML and CSS. I only had a vague understanding of JavaScript and had heard of Node.js but didn’t know what it was. Now join me in getting all the necessary tooling installed to launch a simple hello-world web component.

\n

What are web components? \n \n \n \n\n\n\n

\n

Web components are a collection of web platform APIs that can be used to create custom and reusable HTML tags to be used in web pages and web apps. Learn more about them here.

\n

We’ll be using open-wc in this post. It simplifies the process of developing web components by providing guides, tools, and libraries. Check out the open-wc website to learn more.

\n

Node.js \n \n \n \n\n\n\n

\n

This is the easiest step. To download Node.js, head over to https://nodejs.org/ and click to download the LTS version for more stability. Download the installer and run it.

\n

Why do you need Node.js? Node is a lightweight JavaScript runtime that allows you to run server-side programming to quickly build network applications.

\n

npm \n \n \n \n\n\n\n

\n

npm is a package manager for JavaScript and is the default package manager for Node.js. Basically, npm lets you use code written by others in your own project without having to write it yourself.

\n

When you installed Node, npm was installed at the same time. You can check if it was installed and see which version you have by opening terminal and running npm --version

\n

\"Image

\n

Yarn \n \n \n \n\n\n\n

\n

Yarn is another JavaScript package manager, similar to npm. This is an optional step, you can choose to install it after installing Node and npm. To install, open terminal and run npm install --global yarn

\n

You can check to make sure it installed by running yarn --version

\n

\"Image

\n

Create a directory for your web component \n \n \n \n\n\n\n

\n

Now that all the tooling is installed, you’re just about ready to get started. First, create a directory for your project. I created one by running mkdir -p ~/Documents/git/ist402 but you can name it or place it wherever you want.

\n

Starting your open-wc component \n \n \n \n\n\n\n

\n

After navigating to your desired directory, run npm init @open-wc If there are no problems, you should be greeted with this screen:

\n

\"Image

\n

Congratulations! You’re ready to start working on your web component. Push enter to start your new project and choose the settings you want. Here’s a list of everything I chose:

\n\n

To start your component, run either npm start or yarn start depending on which package manager you installed. Your default web browser will launch and you’ll see your web component!

\n

\"Image

\n

What do these files do? \n \n \n \n\n\n\n

\n

Even a simple Hello World web component relies on many files for their functionality. You can check them out yourself (especially the /src folder) and see what’s going on behind the scenes.

\n

Checking out Lit playground was very helpful in understanding the JavaScript used in a boilerplate web component like the one I just made.

\n

I went through and commented what I thought several code blocks do. Take a look at my git repository for this lab and see that I still have a lot to learn about web components myself!

\n", "date_published": "2022-01-16T00:00:00Z" } ] }