From 4c2c7fea6fcbe27c2fa98adf98acbf9938151725 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 11 Jan 2023 14:28:30 +0100 Subject: [PATCH 1/2] Some followups and polish for the tutorial --- tutorials/mastodon-toot-embed/index.md | 14 ++- .../properties-and-methods.md | 90 ++++++------------- .../mastodon-toot-embed/rendering-the-data.md | 8 +- 3 files changed, 39 insertions(+), 73 deletions(-) diff --git a/tutorials/mastodon-toot-embed/index.md b/tutorials/mastodon-toot-embed/index.md index 954b2eb..c72cebc 100644 --- a/tutorials/mastodon-toot-embed/index.md +++ b/tutorials/mastodon-toot-embed/index.md @@ -6,12 +6,12 @@ excerpt: Build out an embeddable Mastodon post using just the url {% stub %} -In this tutorial, we will walk through the process of creating a custom element that can be used to easily display +In this tutorial, we will walk through the process of creating a Web Component that can be used to display Mastodon posts on any website or application. -Our aim will be to create a `` element will allow users to share and display posts (sometimes called -"toots") from the Mastodon social network, and will include features such as the ability to show or hide the user handle -and avatar image, as well as the option to customize the appearance of the toot. +Mastodon is a decentralized and open-source social network that allows users to share short posts, called "toots", and interact with other users on the network. It is similar to Twitter, but with a focus on privacy, freedom of speech, and community building. + +Our aim will be to create a element that will allow users to share and display Mastodon posts on other websites or applications. Here's an example of a Mastodon toot embed. We'll be making something similar. @@ -19,11 +19,7 @@ Here's an example of a Mastodon toot embed. We'll be making something similar. We will start by setting up the project files and dependencies, and then move on to defining the Mastodon toot embed element class, extending the HTMLElement class, and registering the element with the browser. We will also cover adding -properties and methods to the element, using a shadow DOM for improved styling and separation of concerns, and adding -interactivity to the element. - -Finally, we will look at integrating the Mastodon toot embed element with a real-world project, including tips for -building and using the element in a production environment. +properties and methods to the element and using a shadow DOM for improved styling. Throughout this tutorial, we will explore the various features and capabilities of Web Components, and how they can be used to build reusable and modular components for the web. diff --git a/tutorials/mastodon-toot-embed/properties-and-methods.md b/tutorials/mastodon-toot-embed/properties-and-methods.md index a8013ac..2e23cf0 100644 --- a/tutorials/mastodon-toot-embed/properties-and-methods.md +++ b/tutorials/mastodon-toot-embed/properties-and-methods.md @@ -7,8 +7,9 @@ title: Fetching the data Now we can start fetching the data from the mastodon servers! -We need to make sure that we have a valid URL to get the data from. We'll be using the `src` attribute to store the URL -for the toot. Lets set up getters and setters for `src`. +## Setting up the attribute setter and getter + +We'll be using the src attribute to store the URL for the toot. Let's set up getters and setters for src. ```js class TootEmbedElement extends HTMLElement { @@ -22,34 +23,34 @@ class TootEmbedElement extends HTMLElement { } // ... - get src() {} - set src(value) {} + get src() { + const src = this.getAttribute("src") + if (!src) return "" + + return src + } + + set src(value) { + this.setAttribute("src", value) + } } TootEmbedElement.define() ``` -We want to do two things. Persist the `src` value to a `src` attribute on the element _and_ make sure that the URL isn't -malformed. +## Parsing the URL -To make sure that the URL isn't malformed, we pass it through the URL constructor before returning the attribute value. +To make sure that the URL is valid, we pass it through the URL constructor before returning the attribute value. ```js class TootEmbedElement extends HTMLElement { // ... - static define(tagName = "toot-embed") { - customElements.define(tagName, this) - } - - connectedCallback() { - this.textContent = "Hello World!" - } - // ... get src() { const src = this.getAttribute("src") if (!src) return "" + // Check if the URL is valid return new URL(src, window.location.origin).toString() } } @@ -57,75 +58,38 @@ class TootEmbedElement extends HTMLElement { TootEmbedElement.define() ``` -And we can persist the value to an attribute using `setAttribute`: +## Fetching the data + +Now we can use the fetch method to make a network request and display the data that we receive. ```js class TootEmbedElement extends HTMLElement { // ... - static define(tagName = "toot-embed") { - customElements.define(tagName, this) - } - - connectedCallback() { - this.textContent = "Hello World!" - } - - get src() { - const src = this.getAttribute("src") - if (!src) return "" - - return new URL(src, window.location.origin).toString() - } - // ... - set src(value) { - this.setAttribute("src", value) + async load() { + const response = await fetch(this.src) + this.textContent = JSON.stringify(await response.json()) } } TootEmbedElement.define() ``` -Now getting the data from the mastodon servers is a matter of using `fetch` to make a network request and display the -data that we receive. +Finally inside the connectedCallback method we use the load method to retrieve and display data from the src attribute -```js +``` class TootEmbedElement extends HTMLElement { // ... - static define(tagName = "toot-embed") { - customElements.define(tagName, this) - } - // ... - connectedCallback() { this.load() } - - // ... - get src() { - const src = this.getAttribute("src") - if (!src) return "" - - return new URL(src, window.location.origin).toString() - } - - set src(value) { - this.setAttribute("src", value) - } - // ... - - async load() { - const response = await fetch(this.src) - this.textContent = JSON.stringify(await response.json()) - } } TootEmbedElement.define() ``` -Now we should be getting data! You should be seeing something like this in your browser: +Now you should be getting data! You should be seeing something like this in your browser: -![A browser screenshot showing the toot-embed component at it's current stage. The example page reads: "Here's an example toot: " followed by a dump of JSON data for a random Mastodon toot.](/images/tutorials/mastodon-toot-embed/fig2.png) +A browser screenshot showing the toot-embed component at it's current stage. The example page reads: "Here's an example toot: " followed by a dump of JSON data for a random Mastodon toot. -Yuk! Just a bunch of data spilled all over. We're gonna have to make this look prettier. In the next section we'll go -over templating this data into a better looking component. +Yuk! Just a bunch of data spilled all over. We're gonna have to make this look prettier. In the next section, we'll go over how to template this data into a better looking component. diff --git a/tutorials/mastodon-toot-embed/rendering-the-data.md b/tutorials/mastodon-toot-embed/rendering-the-data.md index 6140120..ec0d124 100644 --- a/tutorials/mastodon-toot-embed/rendering-the-data.md +++ b/tutorials/mastodon-toot-embed/rendering-the-data.md @@ -70,7 +70,13 @@ You should now see the Mastodon toot data displayed in a more structured and pre ![A browser screenshot showing the toot-embed component at it's current stage. The example page reads: "Here's an example toot: " followed by a display of the Mastodon toot data including the avatar image, display name, and toot content.](/images/tutorials/mastodon-toot-embed/fig3.png) It's still not very good to look at! The image is way to big and the whole layout is a bit off. Let's add some -rudimentary styles to the component in a `