DEV Community: The Open Coder

How to add I18N Support to your Web Components

The Open Coder — Sun, 12 Dec 2021 20:52:47 +0000

Recently I have been working on recreating a flash card as a web component. Here's a screenshot of the card (Click the image to try it out):

While this card is really well designed and has a decent UX, it's missing accessibility (a11y) and internationalization (i18n). To fix this we can recreate the card using LitElement, so that the flash card can be used anywhere.

Development Approach

The first decision I made was to use slots for passing in the question and answer. If you don't know what slots are check out my post about using slots.

Slots in LitElement for Dummies

The Open Coder ・ Oct 24 ・ 2 min read

To achieve this, I created an <answer-box> tag for handling the input and checking of the answer. Here's a snippet from the <answer-box> render function:

render() {
    return html`
      <div>
        <p id="question">
          <slot name="front" id="front"></slot>
          <slot name="back" id="back"></slot>
        </p>
    ...

As you can see all the user has to do is pass in the front and back of the card when creating a <flash-card>:

<flash-card>
  <p slot="front">What is strawberry in Spanish?</p>
  <p slot="back">fresa</p>
</flash-card>

Once the slots were working, I wanted to extend the functionality of the original design to be more accessible. For example, the original card has no audial component for hearing the answer, and it doesn't support multiple languages. When working with JavaScript in the browser we can make good use of two awesome classes for enhancing a11y and i18n.

SpeechSynthesisUtterance

SpeechSynthesisUtterance is an awesome built-in class for text-to-speech in the browser. First, I instantiate the class in the constructor with:

constructor() {
  ...
  this.speech = new SpeechSynthesisUtterance();
  this.speech.lang = navigator.language.substring(0, 2); // uses language of the browser
  ...
}

Here we are creating the class and setting the language of the synthetic voice to be the same as the browser's default language. Next, we need a function to run whenever the user clicks on the sound icon:

speakWords() {
    const side = this.back ? 'front' : 'back';
    const comparison = this.shadowRoot
      .querySelector(`[name="${side}"]`)
      .assignedNodes({ flatten: true })[0]
      .querySelector(`[name="${side}"]`)
      .assignedNodes({ flatten: true })[0].innerText;
    this.speech.text = comparison;
    window.speechSynthesis.speak(this.speech);
  }

The first two lines have to do with checking the data passed into the slot and determining what the correct answer is. Then on line 3 we set this.speech.text to the correct answer that was passed in. Finally, line 4 makes your browser speak the correct answer.

I18NMixin

i18n in web components

Bryan Ollendyke ・ Mar 3 ・ 2 min read

#webcomponents #i18n #a11y

I18NMixin is a "mixin" written by Bryan Ollendyke for managing internationalization (I18N) in Lit. To instantiate the mixin in my project I wrote:

import { I18NMixin } from '@lrnwebcomponents/i18n-manager/lib/I18NMixin.js';
...

export class AnswerBox extends I18NMixin() {
  ...
  constructor() {
    ...
    this.i18store = window.I18NManagerStore.requestAvailability();
    this.speech.lang = this.i18store.lang;
    ...
  }
  ...
}

After importing and extending the project, all I'm doing here is setting the manager to a variable so I can access it later. You might also recognize that I am setting the default voice from before to the language specified by our mixin. Now by simply adding these few lines I can start to translate parts of my web component. For instance, I need the placeholder text in the input and the text in the button to say "Your Answer" and "Check Answer". To do that I add:

constructor() {
  super()
  this.t = {
    yourAnswer: 'Your answer',
    checkAnswer: 'Check answer'
  };
  this.registerLocalization({
    context: this,
    localesPath: new URL('../locales/', import.meta.url).href,
      locales: ['es', 'fr', 'ja'],
  });
  ...
}

Here we are using the this.t variable provided from our mixin to establish the variables we want to be translatable. Then, I specify the path to the files and languages that we are supporting. Here's an example of the ./locales/answer-box.ja.json file:

{
    "yourAnswer": "あなたの答え",
    "checkAnswer": "答えをチェック"
}

As you can see we simply add a file to our ./locales folder with the format of component-name.2-letter-lang-code.json and directly translate our variables. Lastly, we add our this.t variables to our code:

render() {
  return html`
    ...
    <input
      id="answer"
      type="text"
      .placeholder="${this.t.yourAnswer}"
      @input="${this.inputChanged}"
      .value="${this.userAnswer}"
    />
    ...
    <button
      id="check"
      ?disabled="${this.userAnswer === ''}"
      @click="${this.checkUserAnswer}"
    >
      ${this.t.checkAnswer}
    </button>
    ...
  `
}

So wherever we use this.t above, it will translate the variables if we support the language specified. Obviously, our component only supports 4 so far, so we have a ways to go.

Final Thoughts

You might have noticed that I made a <flash-card> component, but only showed code from <answer-box>. That's because I just wanted to highlight two cool conventions for increasing i18n in web components. If you're interested in how the styling was done and how the whole component was put together check out our repo:

PenStat / penguin-project-three

A Project EdTechJoker creation

See https://github.com/elmsln/edtechjoker/blob/master/fall-21/projects/p3-haxtheweb/README.md for requirements to complete this project.

Quickstart

To get started:

yarn install
yarn start
# requires node 10 & npm 6 or higher

Navigate to the HAX page to see it in context. Make sure to change rename-me in ALL parts of the repo to your project name.

Scripts

start runs your app for development, reloading on file changes
start:build runs your app after it has been built using the build command
build builds your app and outputs it in your dist directory
test runs your test suite with Web Test Runner
lint runs the linter for your project
format fixes linting and formatting errors

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

View on GitHub

Demo

Link to npmjs

Ideas for an Open Metaverse

The Open Coder — Sun, 07 Nov 2021 16:33:58 +0000

With all of the new changes Facebook is making, I think it's important to talk about this topic. I've been a long time fan of VR, and I would consider myself an early adopter of the technology. You can never forget that first experience you have in a VR headset where you realize how amazing the possibilities are. But not much has changed since I bought my Oculus Rift in 2018. There's been some hardware upgrades from HTC and Oculus, and some new players entering the space with nice headsets like the Valve Index. However, the only application for this technology has largely been gaming and very few productivity applications. Now that Facebook (Meta) has announced there new direction with the "metaverse", I think it's important to talk about what that should look like beyond just Meta's products.

The Metaverse

The metaverse has been described as a place where you can virtually meet, work and play using a VR headset, glasses or your device. The easiest way to catch up on what that really means is to watch this video of Meta's recent announcements:

From what we've been shown, it seems like they want to focus on social experiences through virtual meetings and work. Because they own Oculus, the largest player in the VR space, it's obvious they will be making the first machines that make this stuff possible. However, what empowers this technology is the world we build around it, which should not be left up to the largest corporations in America.

An Open Metaverse

If you've read any of my other posts, you'll know that I believe in open-source technology and its ability to innovate properly. From what Meta has shown us, they seem to already be starting to build the applications that will power the metaverse. Although their announcements will push for more developers to invest in the metaverse, there are some large implications for 1 company developing what could end up being our day to day lives.

Security and Privacy

In the couple decades that open-source software has existed, it has been obvious that security and privacy has been an overarching benefit. We all know Microsoft and Apple don't have our best interests in mind when we use their operating systems. When it comes to security, Linux has dominated every other operating system, because the code is openly available to anyone. That means more people see the code, understand the problems, and fix it. It's quite possibly the most simple and effective benefit of open-source.

Protocols

A few parallels to the early days of the internet can be made here. Contrary to public belief, the metaverse will create more ways for humans to collaborate and socialize. A lot of the comments I've seen are along the lines of "This is sad. No one will talk to each other in person anymore." If the past two years have shown us anything it's that more and more people don't care about working in-person for the "social benefits". Additionally, we live in a world where we can take our computers anywhere and interact with other people wherever we want. This technology will only make this interaction more realistic and normal than it already is. There's no evidence for us to think this will be any different than the introduction of computers to the masses.

Beyond the social aspect of the internet, we can compare the current vision of the metaverse to the early days of the internet. The internet was really nothing without protocols. There's no way we could have come this far without things like TCP/UDP and HTTP. Similarly, we need protocols for how experiences in the metaverse will be served. What file formats to support? How do we ensure a secure connection? What software will act as the "browser" between virtual worlds? These types of questions need to be tackled before a bunch of large corporations start making their own incompatible versions of the metaverse.

Development

This is something Meta addressed, but I want to change the way they are looking at this piece of the puzzle. We shouldn't rely on Meta to create the tools for developers to create virtual experiences. I would look more towards technology like Unreal Engine or Unity which are freely available to anyone. If we take this a step further, we should create open-source tools for us to create virtual experiences, so that there is the same standard for quality and security at every point in the pipeline. The internet could have never succeeded if there were not some level of agreement on how to develop websites that are compatible with browsers.

Why Should We Invest in the Open Metaverse?

Well for starters, a couple massive corporations are investing billions of dollars into the metaverse. If developers standby and let them call the shots for too long, there is a possibility for our virtual experiences to be flooded with ads and privacy invasion.

Beyond the dystopian commentary, let's think about how national governments have regulated technology. We've been shown that corporations will unethically use their power over our social networks and devices in order to sell our data for profit. Whether that data has larger implications in other parts of society never mattered to these companies. All the while, our governments have done nothing to stop it. If we build the metaverse upon the foundations of open-source technology, we can largely prevent corporations from invading our privacy.

My belief is that the metaverse is inevitable. It's only a matter of time before people adopt this technology, which I think will benefit society for the most part. However, I think it's important that developer communities take some time to deliberate over how the metaverse should work, so we can get around some of the mistakes that have been made before.

Personally, I want to contribute to building the metaverse. Ever since I first used VR, I understood how far the technology could go, and I'm sure there are many other applications we cannot begin to understand yet. I believe this technology could empower new ways of working together that would drastically increase productivity and collaboration in the workplace. It has the power to change how we socialize on the internet and bring more empathy into the conversations we have with strangers. My hope is that the metaverse will make us understand that there's someone behind a profile picture, and they are worth more than just their data.

Some More Info

If you're looking for more information about this topic, check out this article.

Slots in LitElement for Dummies

The Open Coder — Sun, 24 Oct 2021 18:25:00 +0000

Slots allow us to write very flexible web components. And no, I'm not talking about slot machines. I'm talking about the <slot> tag.

If you've seen one of my other posts, I shared that I'm making a card component. Here's the design I'm following:

I've broken this design into 4 elements:

An icon element
A banner element with header, subheader, and icon
A scaffold / outline for the card
Putting all of these together to make one card element

To keep the design flexible, we can use slots to pass any HTML into the header, subheader, and body content of the card. In order to achieve this we use the name attribute in the parent element and the slot attribute in the child. Here's what that looks like for the parent banner element:

// render method for the <card-banner>
render() {
    return html`
      <div class="banner-wrapper" style="display: flex;">
        <card-icon type="${this.icon}" style="width: 100px"></card-icon>
        <div class="header-wrapper">
          <slot name="header"></slot>
          <slot name="subheader"></slot>
        </div>
      </div>
    `;
  }

Like I stated before, this banner is made up of an icon, <card-icon>, and a header and subheader which are the two slots inside header-wrapper. To pass HTML into these slots, we simply say slot="header" and slot="subheader". Here's an example of how the HTML is slotted in the final card element that puts everything together:

// render method for <learning-card>
render() {
    return html`
      <card-frame>
        <card-header slot="banner" type="${this.type}">
          <h2 slot="header">I'm the header</h2>
          <h3 slot="subheader">I'm the subheader</h3>
        </card-header>
        <div slot="content"><slot></slot></div>
      </card-frame>
    `;
  }

In this example, we pass an <h2> tag into the header and a <h3> tag into the subheader. You might also notice that I'm using slots to separate the banner and content parts of the card. You'll find that in the <card-frame>:

// render method for <card-frame>
render() {
    return html`
      <div>
        <slot id="top-part" name="banner"></slot>
        <slot id="bottom-part" name="content"></slot>
      </div>
    `;
  }

So, the frame lets us pass HTML to a banner and content slot, and then we use slot="header" or slot="subheader" to pass the HTML we want into the card-banner. Finally, we have one last unnamed slot in the <learning-card>.

// inside render function of <learning-card>
<div slot="content"><slot></slot></div>

This inner slot let's us pass whatever we want into the <learning-card> content area. So when we call the card like:

<learning-card>
    <ul>
        <li>I'm the first bullet</li>
        <li>I'm the second bullet</li>
    </ul>
</learning-card>

The <ul> will become the bottom content of the card similar to the bulleted lists in the design comp.

Here's the repo if you want to track the progress of this card, as it is almost finished:

PenStat / penstat-project2

Open-wc Starter App

Quickstart

To get started:

npm init @open-wc
# requires node 10 & npm 6 or higher

Scripts

start runs your app for development, reloading on file changes
start:build runs your app after it has been built using the build command
build builds your app and outputs it in your dist directory
test runs your test suite with Web Test Runner
lint runs the linter for your project
format fixes linting and formatting errors

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

View on GitHub

Considerations for Building a Web Component

The Open Coder — Sun, 10 Oct 2021 17:36:11 +0000

There are a lot of things to consider when creating a new web component. What attributes and properties do we need? How are we going to style it? Are there accessibility concerns? What about security? The list goes on. Today, I'll go through the thought process of a making a new component with an example.

The Design Comp

As you can see in the image above, we are going to make a "learning card" that consists of a couple things.

An SVG icon
Banner with Header and Subheader
Slotted HTML in the bottom

If we consider the design there's a few things we want to be mindful of when putting this thing together. First off, you might notice the color and icon match a different subheader. So maybe we want to check the subheader to set the color and icon. You might also notice there are different fonts, font sizes, and padding to consider. Design-wise this should be relatively simple, as long as we can make everything responsive and set the overflow.

Let's Break It Down

Looking at the comp above, we can break it down into one component consisting of three other components.

Icon with circle around it
Banner with Header, Subheader, and Icon component
A "skeleton" or outline of the card (A component with something in the top and something in the bottom)
Put these all together to make a "learning card"

By breaking this component down, we'll be able to reuse any of these components in the future, and we can have more control over how things interact. For each of the components we'll have to ask ourselves those initial questions:

What are the props and attributes?
Design concerns?
Accessibility?
Security?

Once we have an answer to each of these questions, we tackle each component until we are able to put everything together.

Expectations and Previous Experience

I expect this component will be relatively easy to put together. However, there are a few things that I think might be challenging. The first is I don't know much about slotting content. This will be done in the "skeleton" / outline component, and we want to make sure that any HTML can be arranged in the card. The second challenge will be keeping the design consistent. We want the left margin to be consistent in the bottom half, and make sure content overflows in a natural way for both the banner and the bottom portion. If we can make the card responsive and slot content properly, then I think this will be a really good example of atomic design.

In the past I made a penguin button, and I learned some valuable things from this experience. After that project, I have a better understanding of using properties to control the different attributes on a web component. I also learned a cool way to control the style of the component using CSS variables and Open WC's API. Overall, I learned how to answer those initial questions before creating the component which will be valuable when building this card.

elmsln / project-two

Edtechjoker project two - card

Open-wc Starter App

Quickstart

To get started:

npm init @open-wc
# requires node 10 & npm 6 or higher

Scripts

start runs your app for development, reloading on file changes
start:build runs your app after it has been built using the build command
build builds your app and outputs it in your dist directory
test runs your test suite with Web Test Runner
lint runs the linter for your project
format fixes linting and formatting errors

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

View on GitHub

Lessons from Making a Call-to-Action Button

The Open Coder — Mon, 27 Sep 2021 01:30:48 +0000

For the past couple weeks my class has been working on a call-to-action button. These buttons are categorized as the most important on the page—think like the “Sign Up Now” button on every website you’ve ever been on. So naturally, my group decided to recreate the login button from Club Penguin PS: You have to click Play Now! first.

Recreating an old clunky, Flash button in Open Web Components is actually way dumber and more annoying than you would think. I started the component by getting the penguin animation down. Normally you would do hover animations in CSS, BUT we are changing the source of the image in the DOM. Therefore, CSS can’t do anything for us. Enter JavaScript. This was easily achieved (and later improved by my teammate Jonah) by attaching event listeners to our button for mouse enter and mouse exit. When the mouse enters the button, change the image. When the mouse leaves the button, change the image back to the original.

Once we finished the main animation of the button, Jonah and I started splitting the work. He would be in charge of button logic, and I would do the styling. I was able to follow a demo to figure out how to get the properties to change the CSS variables. However, I think there is an easier way to do this, which I will refactor to if possible. I have found that CSS work is more annoying in web components, or maybe I’ve just never put this much detail into a single button. But I keep finding myself making more syntax errors in CSS than ever before with the OWC workflow. We are still in the process of determining what properties of the styling we should expose in our component, so the rest of the CSS will be finished this week.

Admittedly, there is still a lot of work to be done on this button, since my team has been busy with other work. We plan to create a small, medium, and large size for the button, so the user won’t be able to mess up the penguin animation (that’s the most important part of our button, duh). Other than that, we just need to finalize the styling of the button and work on accessibility.

PenStat / PenStat-CTA

PenStat-CTA

Repo for Call To Action buttons based on classic childhood games: https://play.cprewritten.net/

View on GitHub

Comparing Popular Web Component Frameworks

The Open Coder — Sun, 12 Sep 2021 18:10:00 +0000

This week in class, we made a GitHub repo consisting of 4 "Hello World!" projects for Angular, React, Vue, and StencilJS. Today I'll be comparing their approaches to front-end development and choosing which I think is the best for building a web application.

PenStat / boilerplates

boilerplates

View on GitHub

Similarities

Each framework (I know Stencil isn't a framework, but for simplicity we'll say frameworks) except Vue has a /app or /src directory for the code. These folders always contain the HTML, CSS, and JavaScript that makes the component or web app run. In the Vue boilerplate this is just in the base directory.
Dependencies. Dependencies. Dependencies. Because we're working on the web, there's always a ton of dependencies and long installs, although some are longer than others. React and Angular both take forever, while StencilJS and Vue are quick.
Stencil and Angular both use TypeScript, while Vue and React don't. I'm pretty sure any of these could use TypeScript, but it's interesting to include TS in your boilerplate. I don't know any TS, so it just adds confusion when trying to understand a new framework.
React, Stencil, and Vue have some JSX, but none in Angular. From what I can understand, I don't see JSX being used in Angular, but every framework I come across uses JSX nowadays. I'm guessing Angular might just be too old for that.
The React, Angular, and StencilJS boilerplates have routing or back-end code added in. This is nice to have for a new project, so you don't have to write it from scratch.

Easiest to get started with

I would have to say the easiest to start using would be Vue. From what I know about Vue and can see in this boilerplate, it's very simple and easy to begin with. You don't have to know a ton of JavaScript or TypeScript to make little components. Angular would definitely be the hardest to start, since there are a ton of packages and files plus TypeScript involved. Although React has some similarities to Angular in folder size and structure, this would be the second easiest to start just because there are so many people using it. You can find React examples for just about anything now, whereas Vue is still gaining adoption.

Which would I choose for building a web app?

I would have to go with React for a serious web application. Although Vue, and I guess Stencil, are easy to get started, I don't know much about scaling them for a full site. Also, there will be less examples of them online. Then we have the choice of Angular or React which are pretty closely related: backed by big companies, used on a ton of sites, lots of documentation/examples, lots of dependencies, and large, complicated file systems. I choose React here only because I don't know TypeScript, and I like JSX. I don't want to learn another templating language, and I have no plans to dive into TS anytime soon. I also like React's file structure, since the pages, components, and server are all separated out the gate. With these choices in mind, I think I could scale a site with React pretty easily and have a lot of support online when I run into problems.

To get the Angular boilerplate, I followed the docs here: https://angular.io/cli

Welcome Back to the Open Coder!

The Open Coder — Sun, 29 Aug 2021 18:36:35 +0000

Who is the Open Coder?

Hi there! Welcome back to the Open Coder. I will be reviving these blog posts for a final semester of school. My name is Griffin Sullivan. I'm an undergraduate student at Penn State studying Human-Centered Design and Development. I've always had a strong interest and passion for computers and technology, and for the past couple of years that passion has focused on open-source software. I like learning about web technologies, machine learning, and open-source development. I spend a lot of my time learning about these aspects of technology, because I think they have the strongest ability to create change.

Why Web Development?

Although I listed 3 specific areas of technology, my class this semester will focus mostly on web development and some open-source software. What I enjoy about web development is the ability to share my work with anyone, and it usually just works. Nowadays, everyone has a browser and can check out anything you make, so it's nice that web development is very easy to share with people. I also like the clear separation of structure, design, and logic that HTML, CSS, and JavaScript provides. Beyond this, I generally just enjoy writing JavaScript. Because of my passion for open-source, obviously I'm going to like JS, since there are so many frameworks and libraries that are available for free. I'm excited to dive deeper into building web components this semester, and I can't wait to share what I make on here!

Setting up Open Web Components

Summing up my first "sprint" on HAX

The Open Coder — Fri, 30 Apr 2021 02:13:15 +0000

If you haven't read any of my other posts, I've recently began contributing to an open source project called HAX. HAX is an effort to build tools usable by anyone in every platform. Think WordPress but without the PHP constraints.

Anyways, my professor is the creator and gave interested students the option to skip the final project and pick up an issue on his project and fix it. So for the past couple of weeks we've been writing code, doing code reviews, talking about Web Components, LitElement, and a bunch of other front-end rabbit holes. It has been a really fun experience, and I've learned more about open source and web development in a couple weeks than I have in other classes. Today, I want to reflect on the experience and talk about my contribution.

The eXperience

The first class we started developing, we all chose an issue in the issue queue. Previously, I've talked about a property I added to another component for making a wikipedia-query tag that works with any wikipedia language. So I thought, "I have some experience. Let's try something harder." And that's where I went wrong. So I picked up an issue that was to enable a "learning mode" for their video player that basically disables the ability to fast forward, rewind, replay, enable transcript, etc. The use case is for quizzes or training where you want to ensure the user is viewing the entire video and not skipping around or searching for key terms.

I didn't realize how intense the video player component was, and I ended up spending the next two weeks trying to understand how it worked, and to simply pass a boolean prop from one component to another. After a lot of errors and slack messaging my professor, I finally got it to work. However, throughout the process I didn't regret the issue I chose, because every class we were going over someone else's component which made for a really great learning experience.

I think this is a fresh approach to learning how to code, because every student had their issues, and we got to see how they overcame them. This gave us all the ability to experience their failures as well as their solutions, so we all learned together. So even though I was just arbitrarily learning about a massive component, I got to learn a lot more about LitElement from what my peers were showing in class.

My Contribution

enableLearningMode start #528

btopro posted on Apr 27, 2021

View on GitHub

I've posted my PR for the code I worked on for this sprint. To give a basic rundown of what I had to do it was split between working on the a11y-media-player element and the hax properties in video-player.

What I did in a11y-media-player was add a new property called learningMode that is set to default by false. In this element there was already a prop called disableSeek which turned off the ability to drag the video player slider and click the forward, backward and replay buttons. I then had to add a statement to the updated function that sets the value of disableSeek to the value of learningMode. I then copied this format with disableTranscript to get the transcript to be hidden when learning mode is enabled. Finally, I had to add these three properties to the hidden and disabled attributes for all the different buttons of the video player in the a11y-media-player.html file.

For the hax properties file in video-player, I only had to add learningMode as a property to the json file where I described what it does. You also declare it as boolean here, and then add it to the tag. This enables a checkbox in the actual h-a-x editor for selecting learning mode for the video you want to add.

Throughout this process I learned a lot about the larger elements in HAX and what it's like to work with large web components. I'm glad I got to figure out how to navigate this element, as well as learn about what my fellow classmates were doing. In the fall I will be taking this course again with the same professor who wants to make the class all about web development and code reviews. So I am very much looking forward to keeping this blog alive and learning more like we did the past two weeks.

Video coming soon.... after finals.... and I take a couple days to enjoy doing nothing...

Why use Microservice Server Architecture?

The Open Coder — Sat, 10 Apr 2021 19:02:49 +0000

Traditionally, software server architecture has been described as a monolith, where all of the resources are hosted in one large environment. Within the past few years, DevOps specialists at many different countries around the world have been able to design a far more approved approach to server architecture called microservices.

What are Microservices?

A microservice is a small piece of the backend of a software application which runs in a virtualized environment. We can use these microservices to handle highly specific operations like authorizing a login or retrieving data from an API. By splitting these tasks up, we can encapsulate the functionality of the backend into thousands of tiny container instances. These containers can be running anywhere around the world, and we have the ability to destroy them and rebuild whenever we want. So, why do we take this approach to server architecture?

What is a Monolith?

A monolith server architecture basically keeps all of your resources, APIs, nodes, etc. in one large server. All of the infrastructure for your application is kept together, which means if one thing fails, it can crash your entire project. Now not all the software can be kept in one place, but the majority of it is kept together and all directly connected.

Advantages of Microservices

Microservices bring a unique advantage over the monolith server architecture. We can completely separate all the different functions of our backend into separate parts that can all be scatter across our network. This way their problems and errors don't affect each other. Also, this gives us the ability to update, delete, move, or create new microservices very easily. Because containers are so flexible, we can restart them and put them wherever we want. Lastly, we also have the ability to expand by simply adding new containers with microservices. We don't have to worry about the affect of adding and removing nodes on the entire project, as our system can be easily scaled without having to understand the inner workings of every container.

As you can see, there are some major benefits to using a microservice architecture. It gives large projects the ability to separate concerns between the different functions of their software. Along with this, we can easily scale a highly flexible system, all by using configured code running in virtualized containers.

Video Demo

Contributing to Open Source

The Open Coder — Sun, 04 Apr 2021 17:51:42 +0000

Over the past two weeks, I've made my first 3 commits to a real, open source project. Open source has been something I've been passionate for around 2 years now, and its one of the trends in technology right now that I really enjoy learning more about. Today, I'm going to talk about what it's like to contribute to open source software, and how you can get started.

The First Commit

I think the easiest way to get started is do something completely irrelevant to the code. Let's say you find a cool project on GitHub, and you want to get involved. Don't start by trying to find the biggest software bug in their system or trying to solve an issue that's been in the queue for months with no one being able to fix it. These bugs will kill your spirit, since you have no idea what the intricacies of the project are. Start by finding a super simple issue in the queue that no one wants to waste time on, or even fix a typo in the README or on one of the pages. For example, my first commit to HAX was changing the word "You're" to "Your" in one of the demos. Stuff like this will help you get your name on the project, and you'll begin to understand the layout of the project and the other contributors.

Get Connected

I can't really say much about this, since the founder of the project I worked on is my professor. However, if you can find someone to message that is a consistent developer on the project, you will save yourself a lot of trouble. People who are passionate about a project will want to help you. They'll tell you what issues to go after, what future development tasks you could start, or help you when you get stuck. Don't be afraid to reach out, because developers need help on these things. Open source relies on the idea that your project can get contributions from people outside your team.

Big Projects are Fun to Work On

If you can find a sizable project that really interests you, you'll get a ton out of it. I love personal projects and creating random ideas that I have, but these things are short lived usually. I don't work out all the kinks. I hack it together, and go "Look what I made! Click that! Whoa nice transition!" and then forget about it. With a real project, you can get your hands dirty, mess with the code, add a cool feature, and people will actually use it. There's a different kind of joy you get, cause you know the project won't be a forgotten graveyard in someone's GitHub. Find something you love and dive into it when you start to get comfortable. I promise you'll enjoy it more than work and more than your other projects, because it's some of the most meaningful code you'll ever write.

So that's my introduction to contributing to open source. I'm still new, but this certainly won't be the end of my open source development journey. I hope you enjoy working on this stuff as much as I do!

The Repo and My Recent Contribution

elmsln / lrnwebcomponents

@lrnwebcomponents Monorepo for NPM based element definitions

lrnwebcomponents

Welcome to the lrnwebcomponents project!

ELMS:LN produced web components for any project

Quick-start

Notice: You will need to use Node version 6.0 or higher. Verify that you have yarn enabled — if not install yarn globally. These web components are written in ES6 and build routines compile to es5 to encompass legacy browsers.

Quick Install

curl -fsSL https://raw.githubusercontent.com/elmsln/lrnwebcomponents/master/scripts/lrnwebcomponentsme.sh -o lrnwebcomponentsme.sh && sh lrnwebcomponentsme.sh

Manual Install

git clone https://github.com/elmsln/lrnwebcomponents.git
cd lrnwebcomponents
yarn global add @wcfactory/cli
yarn global add polymer-cli
yarn global add @web/test-runner
yarn global add @web/test-runner-commands
yarn global add @web/test-runner-puppeteer
yarn global add @web/test-runner-playwright
yarn global add lerna
yarn global add web-component-analyzer
yarn install

Syncing Your Fork

git remote add upstream https://github.com/elmsln/lrnwebcomponents.git
git fetch upstream
git pull

Windows

Git bash should already be installed on your Windows machine and can be found by searching through your computer's applications or by right-clicking anywhere inside of the File Explorer Cygwin…

View on GitHub

Why use Web Components?

The Open Coder — Sun, 28 Mar 2021 23:23:59 +0000

Component structured web pages are nothing new in 2021, yet you can still find tons of websites and content management systems not taking advantage of all their benefits. Today, I will be going over why large companies should start using web components to build their sites, and the major benefits they provide.

Shadow DOM

Web components use the Shadow DOM to separate the document model for component from the rest of the DOM it is in. It works similarly to a video element or iframe where the element's attributes and CSS can't be changed by the rest of the page, and likewise, it's own attributes can't change the rest of the page. This is useful for large companies as they have thousands of developers who are all creating their own pages and components. If you want to interchangeably use components on a page, you won't need to worry about messing up the styling of the rest of the page.

Ease of Use

Although there are some new standards and practices to learn, once you're up and running, you can simply add or create new custom elements to your page with ease. Once a custom element has been published, you can add it into the top of your HTML page with a script tag using the module attribute. This means you don't have to worry about anything going on under the hood, and you don't need a build sequence to use the element. You can simply add it and start running with it. This is especially huge for large companies, as anyone can publish a custom element like a standard logo for their company and then everyone who needs to use the logo on a page just adds the custom HTML to their page after initializing the module.

Custom Elements don't rely on huge projects

This is a fairly straightforward point, but it seems like most people don't take into account how big of a deal this can be. Many web development frameworks and projects can have version breaking changes that sometimes require completely rewriting your system. On top of this you usually need other tooling to help keep your component versions consistent across large sites. With custom elements, you're creating everything with mostly vanilla JS, and you're not going to rely on companies that create frameworks like React or Angular. This is important for large companies who have many developers making different sites, as a single change won't break everything. You can also use different methods for making sure all of your custom elements are running the correct versions.

As you can see, there's some major benefits to using web components. It's important that these standards continue to be adopted by smaller players in the web development community, so that we can continue to build a future web where components are easily shared and work for free.

Video Demo

Create your own GitLab instance with Reclaim.Cloud

The Open Coder — Fri, 19 Feb 2021 20:42:18 +0000

So you're tired of using GitHub and you want a custom, secure alternative? Well, you've come to the right place. Today, I'm going over a really simple way to set up your own GitLab instance using reclaim.cloud. Reclaim.cloud is a cloud hosting service that allows you to pay for what you use rather than pay for limits and not use all of it.

Prerequisites

Sign up for an account at https://reclaim.cloud/signup/
Upgrade to a professional account (you'll need the pro account in order to give you enough computing power to host a GitLab server)

Set up and install

Go to https://reclaim.cloud/applications/ and click on the DevOps Lab - GitLab Server. Type in your email address and you should receive an email with a link to deploy the server.

After signing in you'll see that you can change the domain name to whatever you like (if its available) and you can change the display name in your reclaim.cloud dashboard. It should automatically pick a server region that is best for you.

Once you're done with that continue to install and you'll need to wait a while for the server to install and set up. Eventually you'll get two emails, one saying it's done installing, and a second saying it has been deployed. When you return to the dashboard, it should say the server deployed, and it will give you the root password, which you should take note of for using later.

Configure your server

Now before we try to sign in, go to your reclaim.cloud dashboard and click on the change environment topology icon under your GitLab Server's display name.

You should see a bunch of different configurations you can apply to your server. For this instance, we just need to increase the cloudlets to the maximum value of 32 under Vertical Scaling per Node so that our server has enough CPU power and RAM to handle running GitLab.

Test it out!

Now you can launch your GitLab server by pressing Open in Browser or by typing your domain name into your search engine's URL search. You can sign in using the root admin sign in information that you got before, and then you can begin using GitLab like normal.

Why companies should use GitLab

Authentication

GitLab has a clear advantage over GitHub here, by giving you all the control with the security of the server and it's data. You can set the access levels to just about anything and use different groupings of employees to set these levels. In GitHub, once you're invited to a repo or group, you can only be set by read or write privileges for everything.

DevOps and CI

GitLab has been focusing on it's CI for much longer than GitHub, which means it is just better and more customizable (and free). You can also integrate other CI platforms if you don't want to use the standard GitLab CI. GitHub on the other hand does have CI, but it is lacking in comparison to GitLab, since it doesn't have a deployment platform and requires additional set up with other applications like Heroku.

Customizability

As a GitLab admin, you can basically control anything you want in your repos. Other than working with the authentication scopes of users and CI pipelines, you can track analytics, PRs, and issues, as well as manage different operations (like Kubernetes) and packages.

My Final Opinion

I personally love having the ability to customize so many different things in GitLab. I plan on using a Raspberry Pi to set up a home Git server at some point just to play around with. What's great about having the option between GitLab and GitHub, is they each have their own time and space. If I was working on a company project with a DevOps team, QE team, Developers, and Project Managers then GitLab is perfect, since you can set scopes and integrate anything. However, if you just want to upload personal apps, collaborate on open source projects, and show off your talent to potential employers, then GitHub is perfectly fine and easy to use under these circumstances. For my personal needs I like GitHub, but I hope that any team I work with in the future uses GitLab.