DEV Community: Evan Kennedy

Hax the...Flash Card?

Evan Kennedy — Mon, 13 Dec 2021 00:40:11 +0000

I've been having a lot of fun working on a flash card web component that's used as a sort of language-learning study device and I have to say, this project went from a weird, janky-looking beast straight out of windows 95, to something that looks a bit more similar to what you would see on an educational website today. This is what is currently looks like:
One of my favorite features of this card are the interesting flag buttons at the top that allow the user to change the language. This post details my experience getting this feature added to my web component.

Implement i18 Functionality:

The first step is to import i18 functionality into my card with the following line:
import { I18NMixin } from '@lrnwebcomponents/i18n-manager/lib/I18NMixin.js';
The I18 Mixin is a sort of super class created by non other than the BTO Pro himself. I18 always for language internationalization functionality in lit. In order to get the basic implementation into my project I used the following article from BTO Pro: https://dev.to/btopro/i18n-in-web-components-2gii
I also used the following sample repos, also from BTO Pro, to see how I18 could be incorporated into a functioning Web Component:
https://github.com/elmsln/lrnwebcomponents/blob/master/elements/self-check/self-check.js
https://github.com/elmsln/lrnwebcomponents/blob/master/elements/word-count/word-count.js
After reading through these articles, and several discussions with the BTO Pro, this is how I implemented my i18 flags:

Create Language support in Locales using JSON:

In order for the elements within the card to become translatable into the four other languages I wanted to implement (Spanish, French, German, and Polish) I had to create translations for the card elements in my locales folder.
This image is an example of what the Polish Translation for the elements in the card should be, written into a JSON file.

Once the JSON files were created in locales we want to register those locales into our Flashcard with the following code:
Now that locales contain the translations needed for each element on the card we need to next create buttons and icons that allow the user to change the element language by clicking the correct language button next to the corresponding flag.

Creating Flag Buttons and Icons:

Creating the labeled language buttons was relatively straightforward, however the flags gave me a little bit of trouble. Here are buttons themselves in my demo:
As you can see in the screenshot, each button has a toggle language function on click labeled after the language the user wishes to change to, along with an icon of the flag associated with the language. While this created the icons for changing language, I still needed to implement the language functionality.

Implementing Toggle Language onClick:

The first issue I ran into was wiring up the toggleLanguage function with the i18 functionality. I was able to create a script in my demo that allows the toggleLanguage function access to the i18 functionality supported in my web component.
The screenshot above allows my toggleLanguage function access to the i18 language manager and store. Right after this I also realized that I was getting lots of error because I was attempting to import icons using simple-icons without having simple-icons implemented!
This screenshot shows where I imported BTO Pro's simple-icons functionality. Simple-icons is another part of @lrnwebcomponents that allow users to import basic icons into their components, such as national flags!

The Result

The Resulting card I produced had full i18 functionality for all 5 languages I added: English, Spanish, French, Polish, and German. If you would like to see the other functions of the card rather than just read about my weird esoteric obsession's with European languages and see why this card could be a very useful educational component check out my team's repo here: https://github.com/TheKodingKrab/flash-card

The Outdoors in the digital age...

Evan Kennedy — Sun, 07 Nov 2021 19:50:01 +0000

In a word where an increasing amount of our lives is spent staring behind screens, I've found that it often helps me to spend an equal amount of time in the great outdoors. I, any probably tons of others since the start of the pandemic, have found that going outside and getting immersed in nature is a great way to clear your head and just relax. In a world where technology has made our lives more connected and convenient than ever I want technology to make the outdoors more accessible to everyone. I know that may sound like some tree-hugging hippie moonshot but, if we spent more time looking up how to get outside and off of our devices rather than use our devices to find more excuses to sit around and use them, I think the world would be a little less stressed.

The Idea

If I could dedicate myself to one technology to help bring my ideas to life it would an app that aggregates information, based on location, on any nearby outdoor activity imaginable. The app would have a series of maps, geotagged photos, locations, and areas that are hotspots for things like hiking, mountain biking, skiing, fishing, kayaking, and an endless amount of other outdoors adventures that I'm forgetting to mention. The best part about the platform is that it would be open-source and would allow users to upload their own attractions, recommendations, and ideas. My whole idea behind the app would be for regular people living all across the world could share their local outdoor wonders with a massive audience of people looking to go off the beaten path and experience new locations and activities. Everyone can be a tourist and see big attractions like anyone else, but this app would be for people who want to get to the places where no one knows about yet.

The Plan (assuming I have unlimited time and money...which would be nice)

Assuming I could just use the skills I have now to go out and do anything I wanted with no worries about time, money, or any other limitation, I would want to create technologies that unite people around their commonalities. I would want to create technologies that help people pursue their passions, whatever they may be. One very earlier example of a website that inspired me was a website called swimmingholes.com. I used it lots of times when I was younger to find rope swings, waterfalls, and various other hard to reach swimming holes. Unfortunately, the website was eventually taken down probably because it made suggestions for swimming holes that were on private lands. To be clear, no one should be trespassing on anyone's property just to get to a swimming hole unless you have permission. The thing that really inspired me about swimmingholes.com was that it was just 3 guys who had an idea to create a website where people with cool swimming hole locations could share them. The website had maps of each location, it had directions to each location, and it had reviews of each spot from some of the people who went there. That kind of open source platform where unique locations can be shared is what I would want to create on a much bigger scale. I wish that people across this country had an app as popular, addicting, and enticing as the TikToks and Instagrams of the world but instead of making people scroll through their phones I want it to inspire them to use their phone as a guide to incredible places waiting to be found. I my skillset, and the future skills I will need to develop, enable me to find better ways of solving problems, to create new and efficient ways to performing tasks or designing systems that, above all, save time and are efficient. I think that technology should make all of our lives are seamless and efficient as possible so that we can free ourselves from doing repetitive tasks and useless busywork in order to create more time for ourselves. I want people to work smarter, not harder. By doing that we can create a world where we don't have to stare in front of a blue screen all day, and can use our phones to actually help us put them down and go outside.

Much ado about Slots

Evan Kennedy — Sun, 24 Oct 2021 19:50:46 +0000

I've been working on developing a so-called "learning card" lately and one of the ways I can finally get it to both be functionally sound and look visually appealing is by using slots. The tag in HTML is an element that lets us create separate DOM trees with our own custom elements and bring these trees together. Below is a basic example of what this looks like in HTML:

I've been using slots similar to this to try and style the "learning card" in different ways. Below is an example of the card I am working on, but keep in mind this card is subject to change over time:

To make this project a bit easier to manage and to get a good overview of how elements within a card interact with each other I've seperated this card project into 4 different parts: An icon element, A card scaffold, A banner with a header, sub header, and icon, combining scaffold and icon into one card. A bit easier said than done but this is where slots come in...

By using Slots we can pass HTML into the header, sub header, and body of the card to style it in ways that we want. The first thing I did was the header:
This is just a basic example of the header title and two slots for our header and sub header that allows us to pass HTML into these slots.

Now that I have a sub header and header slot for my card I can focus on putting icons into the Card and putting content into the card body. Below is an example of what code I used to render my icons on the card:

This allows me to put custom icons such as a lightbulb, question mark, and beaker on the card to make it more stylish and visually appealing.

Getting content into the body of the card was a little bit more difficult, but I was able to get some bullet points into the card with this code below:

Now every time I click on the card banner the body content displays two bullet points:
*Plz
*Work
Thankfully my plea was answered and this code ACTUALLY WORKED and now I can actually put some meaningful content into the body of the card other than "Plz work".

Overall my card is still very much a work in progress and with all of the success I've discussed in this post I've had just as many setbacks, errors, and issues that I will likely continue to run into until this card is finalized. If you want to see how I am progressing with the "learning card" you can see my progress here: https://github.com/TheKodingKrab/project-two

Web Components, element APIs, and what to consider...

Evan Kennedy — Sun, 10 Oct 2021 18:38:08 +0000

Project Comp:

When designing a new web component there's several things we need to consider: what kind of elements and attributes is it going to use? How accessible is it? What kind of functionality should it have when someone interacts with it? To get a good sense of these things I found a comparison:

This is an example of what I want to create, a "learning card" that can be broken down into several elements such as:

An Icon at the top
A banner with a header and sub-header
HTML slots at the bottom When designing these elements I'd have to consider what kinds of color contrasts should there be? Is there a light mode and dark mode? I'd also have to make sure that the font is readable and correctly color contrasted.

Potential Difficulties:

I have two main issues I'm concerning about when designing this card. The first is that I am not entirely sure yet how I can put a link either in the header banner or within the card content. I think I will try to figure this out by comparing my previous web components using buttons and seeing what kind of comparisons I can draw from that as well as find some open source projects of cards with links in them. My second concern is trying to create a state for the card for mobile use. I think I can solve this by using media queries and adjusting the screen size to detect for the pixel length of mobile devices.

What's Manageable:

So far I think its been pretty ease to create different accessibility and color contrast states that made the card look readable and easily accessible. Changing the different border colors, text colors, fonts, and background colors have made the card look accessible and easy to read. While not all of the elements within the card are accessible yet, most the the card could be read by a screen reader.

What's next:

While the card is at a good base level of readability, I still want to make it have more functionality such as having a state for mobile devices, and having links within the card. While the card still leaves a bit left to desired I believe it will be in a very polished state in the near future.

Progress with CTA buttons with web components...

Evan Kennedy — Sun, 26 Sep 2021 18:54:08 +0000

When I first started trying to create a call-to-action button using web components I had a bit of difficulty learning how to style CSS variables, and some difficulty getting my component to work due to some, very, interesting issues I had with yarn. Despite my initial difficulties and setbacks I've become much more comfortable developing my button and I have some ideas as to how I can make it better.

We were able to fix an issue with icons on our CTA button. When disabled, if the icons were clicked they would go to our link when they should have been is disabled. This was fixed by using a host: ([disabled]) state for our icons that disabled pointer events when the button was disabled. We were also able to add hover, focus, and active states to our cta button to ensure it had adequate functionality.

One of the biggest issues I had was not with coding with JavaScript itself, necessarily. I had issues starting the button using @open-wc but it was mostly with yarn. After some much needed help I was able to succesfully run my component with npm. I decided that since yarn on my PC is completed messed up beyond all belief I will be using npm to run my component going forward. I also had a few issues with pushing my code to GitHub and with using git in general, but I have since gotten those issues resolved.

Going forward I want to expand the functionality of the button to add some effects to it when clicked. For example I want to see if we can make a fireworks or confetti effect once clicking the button. I feel like adding some effects and making the button just more aesthetically pleasing is a good way to familiarize myself with the structure of web components code and with JavaScript, CSS, and HTML in general.

If you want to see my, very much still in progress, web component you can find it here:
https://github.com/TheKodingKrab/cta-button/tree/main/CEEK

Comparing Boilerplates...

Evan Kennedy — Mon, 13 Sep 2021 23:55:07 +0000

My Experience:
While downloading multiple different boilerplates in VueJS, React, Angular, and StencilJS it felt like I had to go through the same general process when cloning boilerplates into a new repo. I had to install some dependencies using npm, cd into the right directory and use npm to start the boilerplate. However, I did use yarn to install the Vue.js boilerplate rather than npm. StencilJS was probably the most basic boilerplate but it was also the easiest and fastest to install. Vue.js by far too the longest to download, while Angular and React downloaded and ran faster than Vue.js but much slower than StencilJS.

File Comparison:
When looking through the code of each boilerplate I found that each one had a Readme file, a license file, a src directory, some basic javascript, and a package.json file. However, Vue.Js had the biggest file structure out of all of them with more .js and json files than react, angular, or StencilJS.

My Preference:
If I had to start developing with one of these immediately, I'd probably start with react. It's fairly easy to use and while it did take a bit longer than some of the other boilerplates, to install dependencies and run it, there's already so much existing support and functionality for react that I don't think it would take long for an amateur developer learn the basics of react relatively quickly.

The boilerplates I worked with are here under this repo:
https://github.com/TheKodingKrab/boilerplates

Tutorial: Installing open-wc

Evan Kennedy — Sat, 28 Aug 2021 21:33:13 +0000

1.) Downloading Node.js and NPM:
To download both Node.js and NPM I used a tutorial at the following link: https://phoenixnap.com/kb/install-node-js-npm-on-windows

I downloaded the Node.js installer for Windows from here: https://nodejs.org/en/download/

After downloading the installer I ran the Node.js install wizard and clicked next. Agree to the terms of service and hit next. The installer will then prompt the user for an install location. Enter an install location and hit next. The install will then ask you if you need additional components to install. Select NPM and click next. Next, click the install button to finally install both Node.js and NPM. To confirm that Node.js and NPM are installed, open the command prompt and enter the commands node -v and npm -v to see the current version of Node.js and NPM installed on your machine.

2.) Installing Yarn:
I used the following tutorial to download yarn on my windows 10 machine: https://classic.yarnpkg.com/en/docs/install/#windows-stable

With NPM now installed on your machine you can use it to install yarn. Just open the command prompt and run this command: npm install --global yarn

After the command runs, confirm the version of yarn installed on your machine by running the following command: yarn --version

3.) Installing VSCode:
To get started downloading VSCode download the VSCode installer from the following link: https://code.visualstudio.com/docs/?dv=win

Upon opening the installer Accept the License terms and click Next. Then Select Additional tasks the installer should complete like whether or not you want to add a desktop icon and adding VSCode to PATH and click next. Then click install to begin installing VSCode on your device.

4.) Installing git:
To download git for Windows go to the following link: https://git-scm.com/download/win

Download and run the git installer. After opening the installer click next on the Information page. Then select which components you want the installer to download or leave the options as default then click next. The next step is to choose an SSH executable. I chose the default option to use bundled OpenSSH then hit next. The last step gives you the option to enable experimental support for pseudo consoles and an option to enable experimental built-in file system monitor. You can choose to enable these if you wish or leave the settings as default, as I did, and click install. After the git download completes, confirm the downloaded version by opening the command prompt and typing the following command: git --version.

5.) Confirm web components boilerplate:
To confirm that you have all necessary components downloaded, open the command prompt and run the following command: npm init @open-wc
If all components were downloaded correctly you should get a message allowing you to Scaffold a new project with Open Web Components.

Introduction

Evan Kennedy — Sat, 28 Aug 2021 20:36:54 +0000

My name is Evan Kennedy, I am from Bucks County, PA, and I am a senior studying cybersecurity. I am an avid outdoorsman, I love fishing, running, biking, hiking, and canoeing. In my free time I love finding new spots to fish around State College, and I also enjoy tying my own flies for fly fishing. The reason I’m interested in Web Development is that I think it’s fundamental to understanding emerging cyber threats across the internet. During the summer I worked with Merck’s IT risk management team and part of my job was to monitor assets for potential vulnerabilities. One of things my mentor stressed while working with him over the summer is just how dangerous it was for any company asset to be internet facing. He told me that that are tons of ways hackers can create fake websites and use botnets to gain access to company devices through attacks like Cross-site scripting. He stressed to me that the internet is the most dynamic and complex threat environment in cybersecurity and one of the main ways cyber-criminals exploit vulnerable employees is through new and innovative ways of creating websites that can trick an average internet user into clicking on a link or attachment that can compromise their device. I think learning about web development will help me understand the fundamental building blocks of websites and how they work as well as how they can be exploited. Learning about web development not only allows me to develop valuable new skills I can apply in the future and will help me better understand how websites can be used for security purposes.