<?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: Pooja DebRoy</title>
    <description>The latest articles on DEV Community by Pooja DebRoy (@pvd5206).</description>
    <link>https://dev.to/pvd5206</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%2F696880%2F9d5e4ea3-aa6d-4f94-99c3-c121689e04b9.png</url>
      <title>DEV Community: Pooja DebRoy</title>
      <link>https://dev.to/pvd5206</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pvd5206"/>
    <language>en</language>
    <item>
      <title>The technology I'd like to build</title>
      <dc:creator>Pooja DebRoy</dc:creator>
      <pubDate>Tue, 14 Dec 2021 04:28:03 +0000</pubDate>
      <link>https://dev.to/pvd5206/the-technology-id-like-to-build-418c</link>
      <guid>https://dev.to/pvd5206/the-technology-id-like-to-build-418c</guid>
      <description>&lt;p&gt;If I could build technology of any kind, I would like to build an accessible sort of AI technology that would collect data about a person for the entirety of their lifetime, store their memories, and possibly be able to simulate them for friends or family after that being has passed. This technology would basically immortalize a person. Although the concept immortalizing a person might be problematic as it may inhibit people from being able to properly grieve, it would preserve data, like memories, for families of the passed individual. This technology would also allow families to have as much data and information about their family tree as possible. This technology would also raise many privacy concerns, but I'm going to pretend that those don't exist for the purposes of this assignment.&lt;/p&gt;

&lt;p&gt;I, personally, would've used this technology to learn about experiences that my grandparents went through during the 1900's, as they were alive during many historical events. Since they are no longer living, I find that receiving anecdotes of their experiences from my parents doesn't feel as complete. If there was some sort of database I could use to access their specific experiences with as much detail as possible, I'd have much more clarity in my family's history. As someone who was adopted as a baby, I would also use this kind of technology to learn more about my biological family. Being able to access this type of data would keep me informed about important things like my genetic medical history.&lt;/p&gt;

&lt;p&gt;For others, this technology could also potentially be used to store memories of individuals suffering from Alzheimer's or Dementia. That way their memories can be passed down to future generations. &lt;/p&gt;

&lt;p&gt;This invention would mainly consist of data collection. The simulation aspect of the technology would be heavily based off of current strides being taken in the development of AI. &lt;/p&gt;

&lt;p&gt;If money and time were no concern, I would like to take the skills I've assembled over the course of my lifetime and dedicate them to helping those who are less fortunate, less educated, and in conditions of inferior health. I value humanitarian efforts and would try to do anything in my bandwidth to assist others and try to give them a more comfortable life like what I am fortunate enough to have. I am still trying to find a way I can use my background in tech and apply it to this goal of mine. The field of HCDD would be the closest potential avenue for me to reach this goal, as I could support the efforts to make technology easier to use for those who are disabled. I am continuing to explore my options.&lt;/p&gt;

&lt;p&gt;Week 11 blog post 9&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Slot Composition</title>
      <dc:creator>Pooja DebRoy</dc:creator>
      <pubDate>Tue, 14 Dec 2021 03:51:50 +0000</pubDate>
      <link>https://dev.to/pvd5206/slot-composition-41ce</link>
      <guid>https://dev.to/pvd5206/slot-composition-41ce</guid>
      <description>&lt;p&gt;We used slots when creating our learning cards for project 2. One example of slotting we used is the content for the card getting passed through our frame and into our scaffold of our final card. Here is a code snippet of the slots we used for our card:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;render() {
    return html`
      &amp;lt;card-frame&amp;gt;
        &amp;lt;card-header slot="banner" type="${this.type}"&amp;gt;
          &amp;lt;h1
            slot="header"
            aria-label="Main header"
            style="font-family: 'Open Sans', sans-serif; font-weight: 300;"
          &amp;gt;
            &amp;lt;slot name="header"&amp;gt;${this.heading}&amp;lt;/slot&amp;gt;
          &amp;lt;/h1&amp;gt;
          &amp;lt;h2
            slot="subheader"
            aria-label="Sub Header"
            style='font-family: "Open Sans", sans-serif; font-weight: 500;'
          &amp;gt;
            &amp;lt;slot name="subheader"&amp;gt;${this.subheading}&amp;lt;/slot&amp;gt;
          &amp;lt;/h2&amp;gt;
        &amp;lt;/card-header&amp;gt;
        &amp;lt;toggle-content
          style="margin-right: 5em; min-height: 40px; display: flex;"
          slot="content"
        &amp;gt;
          &amp;lt;slot&amp;gt;&amp;lt;/slot&amp;gt;
        &amp;lt;/toggle-content&amp;gt;
      &amp;lt;/card-frame&amp;gt;
    `;
  }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see, there are slots allocated for the header, sub-header, as well as content. Each slot contains the font, font weight, and text size depending on the specific portion of the card frame. We used slotting to pass the header, icon, and frame with content to the final card.&lt;/p&gt;

&lt;p&gt;Here is a link to our repo for LearningCard: &lt;a href="https://github.com/pvd5206/penstat-project2"&gt;https://github.com/pvd5206/penstat-project2&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Week 9 blog post 8&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Comparing different Boilerplates</title>
      <dc:creator>Pooja DebRoy</dc:creator>
      <pubDate>Tue, 14 Dec 2021 03:34:46 +0000</pubDate>
      <link>https://dev.to/pvd5206/comparing-different-boilerplates-kam</link>
      <guid>https://dev.to/pvd5206/comparing-different-boilerplates-kam</guid>
      <description>&lt;p&gt;Across all boilerplates, there will be the same code structure of having README, package.json, node_modules, src, etc. These boilerplates are also all component-based. Differences between boilerplates range from what kind of DOM is being used, whether JavaScript is used as the programming language or something else, and the scalability.&lt;/p&gt;

&lt;p&gt;For the duration of the course, I used the React boilerplate, which I found very easy to install and use. It was a beginner-friendly boiler plate, and I was able to understand how to make components pretty quickly. The React boiler plate has less of a steep learning curve than some of the other boilerplates I looked into. For these reasons, I would suggest the react boilerplate to someone wanting to start building an app. &lt;/p&gt;

&lt;p&gt;I pulled my boilerplate from here: &lt;a href="https://github.com/react-boilerplate/react-boilerplate"&gt;https://github.com/react-boilerplate/react-boilerplate&lt;/a&gt;&lt;br&gt;
Here is my organization's repo: &lt;a href="https://github.com/PenStat/PenStat-CTA"&gt;https://github.com/PenStat/PenStat-CTA&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Week 3 blog post 4&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Considerations when building a web component and building the element's API</title>
      <dc:creator>Pooja DebRoy</dc:creator>
      <pubDate>Mon, 11 Oct 2021 03:28:30 +0000</pubDate>
      <link>https://dev.to/pvd5206/considerations-when-building-a-web-component-and-building-the-element-s-api-j39</link>
      <guid>https://dev.to/pvd5206/considerations-when-building-a-web-component-and-building-the-element-s-api-j39</guid>
      <description>&lt;p&gt;Accessibility&lt;br&gt;
Security&lt;br&gt;
Design&lt;/p&gt;

&lt;p&gt;Need to account for flexible html&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Project 1 Button Update</title>
      <dc:creator>Pooja DebRoy</dc:creator>
      <pubDate>Tue, 28 Sep 2021 18:05:09 +0000</pubDate>
      <link>https://dev.to/pvd5206/project-1-button-uptdate-ge2</link>
      <guid>https://dev.to/pvd5206/project-1-button-uptdate-ge2</guid>
      <description>&lt;p&gt;For our Penguin button, we were able to implement the hover/focus and active states of the button, as well as the link tag. The buttons are also navigable via keyboard. We implemented the dark variation of the button. &lt;/p&gt;

&lt;h1&gt;
  
  
  Roadblocks we ran into:
&lt;/h1&gt;

&lt;p&gt;We had an issue where the size of the area to activate the hover/focus state of the button was far larger than the penguin image we were using. We were able to fix this issue by changing the size pixel value under our host section of our get styles(). &lt;/p&gt;

&lt;h1&gt;
  
  
  What we have learned:
&lt;/h1&gt;

&lt;p&gt;How to implement dark variation of the button&lt;br&gt;
Making the size of the hover/focus area the same as the size of the button&lt;br&gt;
Implementing a hover/focus state&lt;/p&gt;

&lt;h1&gt;
  
  
  Next steps:
&lt;/h1&gt;

&lt;p&gt;We working on creating the disabled state of the button as well as the support for an icon. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/pvd5206/PenStat-CTA/tree/master/penguin-button"&gt;Link to my fork in the repo&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Installing open wc</title>
      <dc:creator>Pooja DebRoy</dc:creator>
      <pubDate>Wed, 01 Sep 2021 22:43:26 +0000</pubDate>
      <link>https://dev.to/pvd5206/installing-open-wc-2jcm</link>
      <guid>https://dev.to/pvd5206/installing-open-wc-2jcm</guid>
      <description>&lt;h2&gt;
  
  
  Installation
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Install Node js from the site &lt;a href="https://nodejs.org/en/"&gt;https://nodejs.org/en/&lt;/a&gt; and download the 14.17.6 LTS version for Mac&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Install yarn by opening your terminal and typing&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install -g yarn
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;you can check if yarn downloaded correctly by typing&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;yarn --version 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;from your home directory.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Once you have created a folder to house all of your projects
&lt;/h2&gt;

&lt;p&gt;You will access that folder in your terminal and type&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;run npm init @open-wc
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You will create a hello-world boilerplate with a new project scaffold; a web component; all options checked for linting, testing, and demoing; does not use typescript; is named hello-world; and installed with yarn&lt;/p&gt;

&lt;h2&gt;
  
  
  Running the web component
&lt;/h2&gt;

&lt;p&gt;Type&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd hello-world
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;then type&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm run start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and you're all set!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Introduction </title>
      <dc:creator>Pooja DebRoy</dc:creator>
      <pubDate>Tue, 31 Aug 2021 17:47:50 +0000</pubDate>
      <link>https://dev.to/pvd5206/introduction-dhn</link>
      <guid>https://dev.to/pvd5206/introduction-dhn</guid>
      <description>&lt;p&gt;Hi everyone! My name is Pooja DebRoy and I am a Senior in the IST Integration and Application Option. I am taking this class because I am interested in learning about web development. I don't have any experience using any web development languages, but I am hoping my background in Java and Python will come in handy. &lt;/p&gt;

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