<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: klh6157</title>
    <description>The latest articles on DEV Community by klh6157 (@klh6157).</description>
    <link>https://dev.to/klh6157</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1007050%2F2420eebc-aba2-4a51-b972-c0320fbad84f.png</url>
      <title>DEV Community: klh6157</title>
      <link>https://dev.to/klh6157</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/klh6157"/>
    <language>en</language>
    <item>
      <title>Project 2</title>
      <dc:creator>klh6157</dc:creator>
      <pubDate>Mon, 20 Mar 2023 02:08:59 +0000</pubDate>
      <link>https://dev.to/klh6157/hw-part-2-scoping-project-2-1mhb</link>
      <guid>https://dev.to/klh6157/hw-part-2-scoping-project-2-1mhb</guid>
      <description>&lt;p&gt;The scope of project to will be to create a badge list with a high level search bar that is similar or exactly to that of the Amazon Web Services Intro, the example/image is the image below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hryiLYGg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6a449txu8t1igv62x98.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hryiLYGg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6a449txu8t1igv62x98.png" alt="Image description" width="800" height="591"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We will need elements like images, title, description, and the name of the creator of the badges. To create the badges, the title of the badges, and the names of the creators will be needed so that they are able to be searched on the search bar. The title, description, and the names will be created using a String. The information we will need from the backend to make the list work is to use something that stores the data so that the badge can be search on the search bar like the name of the creator and the title of the badge can be searched. This is to allow the search bar to be functional and working instead of being static. Another information about backend we will need is the structure and API in order to create a more consistent and better structure performing badge list.&lt;/p&gt;

&lt;p&gt;Some lines of code we can apply to the project can be this&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qMrMmHZJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgumb91hndms8lr7k1ng.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qMrMmHZJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgumb91hndms8lr7k1ng.png" alt="Image description" width="800" height="582"&gt;&lt;/a&gt;&lt;br&gt;
We can use this snip of code in the .json file to assign different properties with different assigned values to the badges like the badge images. This concept is better then hardcoding in different elements into our design.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Mv8Lq_q3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r68uwnbt5u7wyjzyi9xa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Mv8Lq_q3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r68uwnbt5u7wyjzyi9xa.png" alt="Image description" width="800" height="867"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We can use this snip of code to read the .json file. This concept creates an array that is filled with information from the file. This can be used to assign values to different elements.&lt;/p&gt;

&lt;p&gt;The project itself is to create something similar to the Amazon Web Services Intro which can be seen in the picture above in the beginning. There will be 5 to 10 badges at least in the badge list which will all have different images, names, and creators this is to make each of the badges unique from each other. They will all be able to be searched. The badges will be named based on what we make the badge list on. We are still deciding on the concept of the badges which is to be determined. How we will initially conceive on attacking the problems will be through trial and error. When we get an error, we will talk together and see what we can do to fix it, we can use the power of the internet and google to find solutions. We can also ask the TA's and Professors for help even asking other groups can help.&lt;/p&gt;

&lt;p&gt;The current progress made to the project is slow but we are getting there. The image below shows the progress of the badge list. It does render the the badge and as well collapse it when the plus is click on and goes back when click on again&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yKUKsfaa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7q583z4z8i03ofg6g8u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yKUKsfaa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7q583z4z8i03ofg6g8u.png" alt="Image description" width="800" height="331"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Since, the drop down works and we were able to make one badge. We used the same method to create 10 different badges. The image below shows a few of the badges.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--t9OXmKle--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnlwbfizgvvn5y57icdn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--t9OXmKle--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnlwbfizgvvn5y57icdn.png" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We used API in order to create the badge list information like the title, image, description, the creator, and many others. The API also allows us to search various parts of the badges to help quickly filter out the information to get the badge we are looking for.&lt;/p&gt;

&lt;p&gt;The search bar does allow inputs but there is still no output being outputted. The image below shows that, it is still disorganized as the formatting is not fixed but will be fix, the search bar is there and can have a input but does not show a output&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QinZQ8ES--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6j2yhrg5zkh8o6swxsg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QinZQ8ES--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6j2yhrg5zkh8o6swxsg.png" alt="Image description" width="614" height="391"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The search bar now works and is more organized compare to before. The image below shows the current search bar&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ldZ3Wmku--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxss1ospuzmaatksb4in.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ldZ3Wmku--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxss1ospuzmaatksb4in.png" alt="Image description" width="267" height="112"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;After weeks of working on project 2. We have progress pretty far into the project. The image below shows our final progress on the project. The badge list is there, the search bar works. The simple icons kind of work and kind of do not.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PNbuQ_8a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53nrrr8rzquh00m8a80o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PNbuQ_8a--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53nrrr8rzquh00m8a80o.png" alt="Image description" width="800" height="377"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is the final product of our project that we have created it has a search bar and collapses when clicked on. It is similar to the image below but with a search bar added to filter out and search&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hryiLYGg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6a449txu8t1igv62x98.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hryiLYGg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6a449txu8t1igv62x98.png" alt="Image description" width="800" height="591"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>A New Developer in the Field</title>
      <dc:creator>klh6157</dc:creator>
      <pubDate>Tue, 28 Feb 2023 02:08:38 +0000</pubDate>
      <link>https://dev.to/klh6157/follow-up-response-4406</link>
      <guid>https://dev.to/klh6157/follow-up-response-4406</guid>
      <description>&lt;ul&gt;
&lt;li&gt;What is confusing about platforms?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The most confusing thing about platforms is the various different performance they have and the features they provide. React for example, due to React itself. It is causing significant cut in senior competences in the general industry because there are too many who only knows react and nothing else related to web development. React is a popular platform and is used globally. However, due to lacking any significance in web development with its performance and features, it is confusing to wonder how even with this. React is not worth investing more people to learn and rather learn something else.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How could web components and VanillaJS standards be taught in a way that is more approachable?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Web components and VanillaJS standards can taught in a way that is more approachable compare to React by making them more accessible then React. React is simple and can be easily learn by many and can be pick up easy. By giving more support and help in learning web components and VanillaJS standard can they become more approachable. Web components and VanillaJS standard as well need to be more expose to the public like React, where it still now is being exposed by many to others. Web components and VanillaJS standard need to do this as well in order for it to be more approachable.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The easiest to work with on the 1st stab was Angular. The reason for this is because compare to React and Vue. In Angular, I simply copy and pasted all my HTML and CSS and it just works compare to Vue and React where I had to edit my HTML and CSS in order for them to work properly.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Think back on the tooling. What parts were confusing? What clicked with you immediately?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The parts that were confusing to me was mostly everything, there was not really anything that clicked to me immediately at the time. However, the more I start to work on it more and more. I start to understand more of it bit by bit.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What additional readings did you have to do in order to make sense of things.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The additional reading which help me make sense of things was looking through stack overflow, other github posts, and videos which were all very useful in helping me make more sense of things&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
