DEV Community: JosephTJK

App Idea

JosephTJK — Tue, 07 Dec 2021 00:21:24 +0000

If you could build an app or website or technology of any kind. What would it do?

During my last summer internship, I participated in a Volunteer Time Off activity that was so much fun. It was through an NGO that focuses on representing poor neighborhoods on the google maps. Basically this was a mapping activity for societies that are impoverished and left out of google maps because they are presumed irrelevant. I really enjoyed this activity and understood the power of representation. These societies lacked access to representation on google maps hence their restaurants roads and business couldn't benefit from google reviews, gps systems, uber, lyft and so many other services that require google maps. That activity made me think of the number of poor people who lack access to the most basic needs like food. I would build a website that gave people access to resources especially food. Most homeless people or families go hungry because they cannot afford food yet restaurants, school dining facilities and hotels end up throwing food at the end of the working shifts that is not eaten. I would partner with the community leaders to create a site where restaurants can post un used food that is in great condition at the end of each working day so that families in need of food can have it rather than the food going to waste.

Who would it be for? What would they use it for? How would you use it?

This site would be for connecting people that desperately in need of food with restaurants that are willing to donate uneaten food at the end of shifts that was doomed for waste if not purchased. I would try to convince active collaboration with community food banks since they have databases of people that are facing food crisis. These people would be given exclusive access to the site before opening it up to the rest of the community incase there is extra food that is available.

If money was no concern , time no concern what would you do with your life and the skills you have assembled if you could dedicate to one thing?

If money was no concern, I would focus on ensuring every child has access to great education that is not focused on getting a job and money but rather developing their full potential in whatever they are passionate about.
So many people lack access to the most basic needs like food water shelter and good health. Access to education that focuses on encouraging the curiosity to keep learning but at the same time free from quotidian worries like school fees and grades would lead advancement in fields of medicine research and technology. I would wish for the next generation to live a happy fulfilled life full of love, joy, happiness and greatness.

Slot Composition in Lit

JosephTJK — Sat, 27 Nov 2021 20:58:08 +0000

During our class sessions, we discussion various ways that we can leverage using <slot> for the web components project. We are supposed to use slot to various dynamic customizations to the card as shown below

What is slot composition

Slot composition is used to pass code through elements. Code from things like the icon or the header of the card can be passed through. Slotting gives you the ability to pass dynamic content between different elements that you create, while supporting the ability to structure the rendered HTML and content however you see fit!

Application

For this project, our group is using the <slot> to make the card more dynamic and flexible. The <slot> acts a placeholder in web components that you can then populate with any mark up you would like. This allows for flexibility when creating different web components.

Examples

The screenshot below shows a good example of how to implement the slot tag in your code.

Learning Card: Web Components

JosephTJK — Wed, 24 Nov 2021 20:33:12 +0000

Web Components

For this project, our group had to create a Learning Card utilizing web components. It utilizes three technologies (HTML, CSS, and JavaScript) to create custom elements that can be reused anywhere.
We had to think of different considerations for the different properties the learning card might have, as well as the states it can have and how easily customizable it can be .
Some of the main things to consider for this project are accessibility, responsiveness, customization and re-usability.

The Learning Card will contain multiple elements: a header, banner, icon, and body,

Learning Points

In the process of completing this project, we are excited to learn the process of creating custom elements that can be used over and over again in different ways. It is also really nice to learn how to combine each individual custom element into a full card. Another learning point is the accessibility and responsiveness of the card. Learning how to implement action events and various states for the various elements is a great way we hope to master some of the concepts shared in the class discussion.

We are very excited about this project and hope to learn as much as we can about web components

Web Components: Progress

JosephTJK — Tue, 23 Nov 2021 19:49:42 +0000

Progress Update

For this IST 402 project, we were assigned to create a Call To Action (CTA ) button that would work on every platform. Essentially every well-designed website on the internet has a CTA button to allow the users to interact and navigate to other pages or components. My partner and I leveraged the class discussions to explore the various ideas for the functionality of the button and learnt a lot.

Issues

We have created a lot of our Javascript code in VSCode. At first when developing this button we didn't understand how to change the button styles and functionality based on provided attributes. We started with plain HTML and CSS. Based on previous classes about web design with HTML and CSS, we thought we would have to make use of the constructor but found it easiest to style our button using pure CSS. We also needed to figure out conditional rendering for attributes like icon and link, which we tried to do originally using regular if statements but after doing some research on the lit element docs found a much easier inline way of computing these.

Successes

Learning about all of the different components that go into a CTA button has been a very informative experience. We were able to overcome Some hurdles that had proved to be difficult during the the project like implementing the icon, capturing all the essential button states, accessibility, linking the button to the external website, and resolving merge conflicts on GitHub.

Working in an open-source environment has been extremely beneficial in getting inspiration from our team mates, and for addressing issues with code in a timely manner. Overall, working on a web component for the first time has allowed me to learn a lot about the way websites function, and about the complexity that goes into creating something as simple as a button.

JS Frameworks-Boilerplates Comparison

JosephTJK — Tue, 23 Nov 2021 19:21:13 +0000

In Week 3 of class, our group had to install four boilerplates into our git repo:

Angular
Vue
React
StencilJS.

Similarities between the Boilerplates

Each single one of the boilerplates possesses a package.json file showing the installed dependencies and available scripts to run the boilerplate.
Each boilerplate has basic dev tools to get it set up and running in an environment.
Each boilerplate has README files

Best Boilerplate

Of all the four boilerplates, I would say the React Boilerplate is the easiest to setup and use. It's intuitive nature makes it very easy to set up the boilerplate. For the class project, I chose react and I seemed to have a much easier time than all of my other teammates in getting it up and running. Having never used it before, I appreciated that React had everything I needed to make changes to the main page encapsulated into one folder. React also has a great amount of support for its components and dependences which really helps when configuring any issues incase they arise.

Preferred Boilerplate for next project

I think I would stick to the React boilerplate because it has the highest number of people working to support it which can really make a big difference when desiring a quick plug-and-play experience.
The only downside is that React requires adding libraries to make it a complete framework and leverage some of its advanced features. However it is still the easiest to setup and get running.

Link to get the react boilerplate:
https://github.com/react-boilerplate/react-boilerplate

Link to my group's organization:
https://github.com/ist402groupj/boilerplates

Installing Open WC on PC

JosephTJK — Tue, 23 Nov 2021 18:03:03 +0000

Open Web Components is very accessible for anyone interested in trying various ideas for building web components.

Tools Needed

A laptop
Node JS/ npm
VS Code IDE

Steps for getting started

Download and install the correct versions of node js (https://nodejs.org/en/) and visual studio code (https://code.visualstudio.com/download)
Follow the instructions on the links to download nodejs and vs code correctly. To check if the download was successful. Type node -v on the terminal to check the version.

Installing Yarn

Install yarn using the link [https://yarnpkg.com/] to your PC.
Open the link and type the following command in your terminal
npm install - global yarn

Incase you run into permission issues just add sudo infront of your previous command. sudo npm install -global yarn

Installing Open WC Boilerplate

Create a local folder on your PC for your projects
Open your terminal and Navigate to the folder
Run npm init@open-wc
Once the download begins you will be prompted with four questions
Scaffold a New Project
Select "Web Components to scaffold
Toggle through each of the next options Linting, Testing, Demoing using the arrow key and select each
Select No for Typescript
Type lowercase "hello-world" for your tag name
Click yes for disk
Click yes with yarn for installing all the dependencies

You are all set now and Enjoy your web programming!!!

IST 402: Introduction

JosephTJK — Wed, 22 Sep 2021 17:08:32 +0000

Introduction

Hello, my name is Joseph Tumwebaze. I am a senior studying Information Science and Technology: Integration and Application option. Outside of class, I am involved in WIREDIN an IST club for diversity in tech. I also play piano for a student campus organization called Chi Alpha.
I love people, technology, music, and good food.
Fun fact about me is that I am lefthanded.

Why web development?

Web development is one of those skills that will easily become the new form of literacy in the future. With exponential technical advancement, I think knowledge of web development in the future would be as essential as it is to know how to write today. I chose to take this web development class to compliment my Product Manager skills and career interests. I thought it was a good technical skill to have. I am excited about the projects that we are going to do in this class, and I look forward to learning a lot.