DEV Community: Justin Kelly

Trading-Card Web Component

Justin Kelly — Mon, 13 Dec 2021 18:38:29 +0000

Tutorial
To create the trading card element I started with a very basic border outline to create the “edge” for the card. I used the CSS border property to create the outline by styling the div element that contains the entire card. After the outline I started to work on the alignment of the elements within the card, and the background colors. We chose to include the name at the top, then the image, and additional details below the image. In addition to alignment and coloring, I started to work on the card content and filling in the details to the proper areas on the card face.

We started working as a group on the visual design of the card and the color contrasting features. We chose a holiday theme for the trading card project and made 4 cards to display Santa, Mrs. Claus, The Grinch and Buddy the Elf. Our team then worked on the optional icon support by including the simple-icons library in our project. We then took a short break from code development to get a head start on the storybook features, but encountered some challenges in the initial setup with the page continuously loading. Next steps in development included mapping the key values for each card, and separating each card into its own unique element in the demo.

updated(changedProperties) { }

The updated changed properties function was essential for the implementation of multiple card components in our project. Using the need property, we were able to update the display of each card for multiple variations. There are some styling and accessibility concerns to address, but we are making progress on those as our final web component gets close to completion.

A time consuming challenge we faced while developing the trading card was the wiring of the demo. We had issues because we were unsure of how to implement each key from the map into a separate HTML element on the frontend. We also struggled when working with HAX as this was the first experience any of us had with trying to implement and contribute a feature to a large project.

We failed to allow editing via HAXTheWeb wiring because of the way the attributes are set by the map. We wanted to include this capability but were unsure of how to dynamically set the current attributes and allow for customization at the same time. Our final project is complete but it is an understatement to say we are disappointed with the lack of variability and accessibility.

My Ideal App

Justin Kelly — Sat, 11 Dec 2021 19:12:49 +0000

If I could build an app, website or technology of any kind, then I would create an open source software designed to help users discover new music. One implementation of this application could utilize SoundCloud’s API. The current API has the capability to embed songs, search for artists and songs while crediting the artists with streams. Although SoundCloud has some of its own methods for recommending content to users, this specialized software will expand on these features so a user can browse new content when they are open to receiving suggestions.

Who would it be for?
This technology could showcase creative work and my favorite projects, while also allowing others to use the technology in any way they like. I think music lovers would enjoy navigating this type of technology, and developers could contribute improvements if they are inclined.

Developers could use the technology to develop their own similar tool. Making it open sourced, I would not mind if someone were to use the software as inspiration for their own ideas. In addition to someone taking from the application, maintaining an open source project for this purpose would increase transparency and give value to the community.

No Time, No Money
If money and time were no concern, I could spend my life dedicated to this app and its operation in the music world. Realistically, if money were no concern then I would probably be working on the application from a beach somewhere. If I had disposable income I would absolutely hire a development team to help me work on the project, although we might spend most of our time coding from a beachfront bar with our toes in the sand.

(Image from Akin Ozcan - stock.adobe.com)

Fonts with LitElement

Justin Kelly — Sat, 11 Dec 2021 19:05:34 +0000

In HTML, fonts are typically applied using the CSS font-family property. This property can list one or more font families and each value can be specified as either a family name or a generic name.

font-family: "Gill Sans Extrabold", sans-serif;
Alternatively, fonts can be imported from an external CSS stylesheet.

render() { 
return html` <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">`;} 
}

There is also the capability to import fonts with a script tag if the font is in a JavaScript file. For our button project this is how we were able to import additional fonts that were not previously available when using the CSS font family property.

The imported script font can then be used like other font-family properties:

return css`
      :host {
        display: block;
        padding: 10px;
        color: var(--cta-btn-text-color, orange);
        font-family: Butcherman, fantasy;
        font-size: 30px;
      }`

Framework Boilerplates in JavaScript

Justin Kelly — Sat, 11 Dec 2021 19:02:16 +0000

Our group assignment was to implement JavaScript boilerplate code, with each group member doing a different framework.

What commonalities are there between the boilerplate code?
The file structure of the boilerplate code was very similar between the examples. Each had a package.json for dependencies, folders for the source/app, and read me files. All boilerplates had steps for the basic setup.

What is duplicate / overlapping?
Source folders are commonly overlapping in the boilerplates, although they have some discrepancies in the different files they contain.

Which do you think is the easiest DX (Developer eXperience) to get going?
React seems to have the easier developer experience for getting started. The initial setup seems more intuitive than the other boilerplates. The folder names like app, docs, internal, and server make it very clear which area of the code you are working in.

If starting to build an "app" tomorrow, which would you prefer and why?
If I was going to build an app tomorrow I would certainly prefer React for the reasons outlined above about its easier setup process. I think maintaining code with React would also be less confusing than some of the other boilerplates because of the slight differences in the file structure.

Provide a links in your post to your organization as well as the repo that you got your boilerplate from
Organization on GitHub
Boilerplate repository

Web Component Design Considerations

Justin Kelly — Sun, 10 Oct 2021 23:18:25 +0000

While building a web component, our project team considered various features and use cases that would be necessary for the design. When developing a card, we will have better control on the design of each particular area by sectioning off multiple elements. For example, we plan to work on the header and footer as two of the elements, which will be useful for information that is consistently on the top and bottom margins of the page. In addition to the header and footer, one element will be for navigation. A top navigation bar is one part of the user interface that is also consistent in its content, and provides users steady access to practical functions. We also plan to have an element to preview content which could be helpful for increasing the overall readability.

We expect the header, navigation, and content preview to be the most challenging to implement. The header and navigation bar will need to be synchronized in a way that keeps the two elements from becoming redundant. To address this, we need to make a decision on which information is included within the header, and which content should instead be placed elsewhere in the card or in the navigation bar. The glaring challenge for a preview element is determining what content is in the preview compared to what is hidden by default. The element needs enough content to be indicative of what is being previewed, and still be useful enough that it is worth having the preview element in the first place. After making the button, I feel much more confident collaborating using GitHub. I also think that designing this component will be easier now that we have had experience with the development process for a web component. We hope to keep it simple, and achieve a component that is functional and reusable.

Web Component Progress

Justin Kelly — Mon, 27 Sep 2021 02:25:48 +0000

Link to our progress

Issues

So far we have the general features and functions of the web component, but there is still a lot of work that can be done. The part I seem to be struggling with the most is the HTML implementation of the button. Being the first component we are developing for this course, I am particularly focused on making the button accessible for future use. One detail of the button that needs improvement is its documentation. I understand that this is one of the upcoming tasks, and I look forward to getting more experienced in this part of the development process.

Learning

The simple-icon web component was the first library I have implemented into a project using a package management tool. I found the import to be very straightforward, and was quickly browsing the various icons to experiment with the look and feel of the button. This experience helped me to understand how we could use other web components in future development. In addition to the library import, I learned a lot about the structure of HTML, and also how to more effectively implement the <a> tag within an application.