DEV Community: Francesca Ansell

Week 11 Blog Post

Francesca Ansell — Sun, 07 Nov 2021 22:45:47 +0000

Time and money control everything in our lives. Have you ever thought about what you would do if neither where an issue? If I had the opportunity I would create an app to identify areas of need and direct supplies there. Now more than ever our healthcare industry is struggling to support the amount of people who need care, whether it be support with physical supplies or technologies to intake patient information. Often these 'supplies' are actually people like nurses. This application could help establish areas that need traveling nurses and connect potential employees there. In states of emergency hospitals could donate or sell extra equipment, ppe, etc. to hospitals in need. An application of this type would need multiple hospitals/facilities to adopt it for it to be useful. Or it could be used within networks of hospitals for example UPMC, or Allegany Health Network. I would not personally use this app but a company I work for in the future may use this app.

I have the programing skills, and knowledge of the healthcare industry to see this project through. I also have the user interface design, user experience, and software development life cycle skills. I know what areas of healthcare to target and the geographic areas that need the most attention, such as rural areas. I also have the leadership skills to identify what people, and resources are needed to make this app successful.

I believe that technology has the power to improve the healthcare industry if used correctly. The most glaring issue now seems to be lack of communication between hospitals and doctor due to competition. Hospital administration often cares more about making money and bringing in new patients than perfecting the outcomes of their existing patients. Although this is not always true the bottom line is that hospitals need to make money to keep there doors open at all.

I truly don't believe my life would drastically change if time and money where no issue. I would still want to be a UX/UI designer that works on the EHR system. Possibly I would pick a smaller, more patient oriented company that in the real world would offer less pay. If time where no issue I would be able to dedicate my life to my career and not have to worry about delegating my time for my family or friends.

Week 7 Blog Post

Francesca Ansell — Mon, 11 Oct 2021 16:21:58 +0000

Write a blog post about considerations when building a web component and considerations when building the element's API (metacognition of the exercise we engaged in)

In order to create a web component is is important to consider what parts and standards are needed. This is good practice when creating any sort of coding project. Some things that we are considering when building a webcomponent are:

What are the characteristics of the card?
What design considerations must we take into account?
What accessibility concerns do we potentially have?
What security concerns do we potentially have?
What "states" does this card have?
What do we call it?
What areas do we need to account for flexible content / HTML entry of any kind?
Do we have room for additional reusable atoms to be produced?
What should we call each of them?

All of these consideration could be applied to different projects (such as how we used them in our button project.)

How you are going to break it down into multiple elements

In this assignment our card will have a scaffold, banner, and icon. This will allow the card to be even more usable by the programmer. The banner and icon web components can be interchanged with different banners and icon. This allows for lots of personalization and reusability which is very important.

What do you expect to be difficult

I expect splitting up the work for this assignment to be difficult. I do not understand how each person will be able to do a different part of the card and still distribute the work equally. The person working on the scaffold will have to wait until the icon is down etc. Because I am isolating it is also difficult to understand assignment descriptions because most include slang.

What's more manageable now that you made the button

After completing the button I have a decent idea of how web components are constructed and then used as their own tag. I also understand the idea of properties and states which in the past I have found difficult.

https://github.com/3B4B/project-two

Button Project Updates

Francesca Ansell — Tue, 28 Sep 2021 14:41:01 +0000

In my Webcomponents class I am making a button. My partner Jimmy and I decided to be unique we will be creating a circular button. So far the project is going okay. We continue to make small bursts of progress but I have yet to really make great strides with the project. I missed class last week because of the Fall Career Fair but I know that my partners used a CSS generator which helped us a lot. Last week was very chaotic for me but this week I will have lots of time to sit down and work on this button. Hopefully I will be able to find a laptop charger because I left mine in Pittsburgh. This week will be the final push to make sure all functionality is working and the styles are the way I want them.

This is what our reusable button looks like right now.

My goals for the project includes dynamic loading, checking all accessibility issues, and perfecting our CSS styles. Jimmy is working on getting disable to work right now.

You can find our button here

Comparing Boilerplates

Francesca Ansell — Mon, 13 Sep 2021 17:59:39 +0000

In this blog post I will be comparing a React, Stencil, Vue, and Angular boiler-plates. A boilerplate is a reusable template to start your projects with.
The stencil boiler plate included a readme file that explains the properties and their attributes which was extremely helpful in understanding the code. I was able to quickly install the dependencies and run the program without any issues. I do not recognize some of the folder conventions such as dist, and www. It is easily understood this boilerplate creates a web component. Overall the boiler plates has lots of folders and files that I am unsure how to utilize.

The Vue Boilerplate uses folder structure and naming conventions I immediately realize. The Vue boilerplate was much easier to digest and understand. This boilerplate was also very easy to start up.

The angular boilerplate reminded me of a react project with a views, images, and styles folder. I had a lot of trouble getting this project to run due to 'gulp' which I have never used before.

I added the react boilerplate. This boilerplate had a large amount of miscellaneous files that I have never seen before and do not know how to utilize. It also had a large amount of folders and nested folders. I was able to install the dependencies and run the program without any trouble. This boilerplate includes lots of comments to help you navigate.

I believe the best developer experience, and boiler plate I would choose to create an application with would be the VUEjs boilerplate. It was very easy to understand and navigate which allows the developer to focus on other things such as improved functionality.

Group repo: https://github.com/3B4B/boilerplates
React Boilerplate: https://github.com/react-boilerplate/react-boilerplate

Introduction #2

Francesca Ansell — Mon, 30 Aug 2021 02:27:28 +0000

Hi everyone my name is Francesca and I am a student at penn state. This year I will be graduating with a major in Human Centered Design and Development with a minor in Health Policy Administration. Between both the classroom and an internship at Merck I have gained experience in Front End Development, User Experience, User Interface Design, and Project Management. This summer in my role at Merck I learned to communicate effectivity between IT and the Business. I used my problem-solving skills to organize information, streamline workflows and increased productivity. My greatest goal is to make an impact on the healthcare system by applying an exceptional user experience to consumer engagement. I have experience in front end development from multiple classes, but still have lots to learn.

I want to get involved in front end development because I enjoy problem solving and creating highly versatile and enjoyable interfaces. Web development is necessary in every industry which gives me a multitude of future career paths. Web development makes me excited and ignites a passion in me that networking and hardware does not. I specifically enjoy languages like HTML, CSS, and javascript. Front end development allows me to use my design and user experience skills along with my coding skills. From this class I want to strengthen my javascript skills and be able to truly unpack concepts that I only understand on the surface level. I decided to take IST 402 again after really enjoying the last 3 weeks of last semesters IST 402 class.

Getting started using open-wc

Francesca Ansell — Mon, 30 Aug 2021 02:23:43 +0000

In this post I am going to go over how to get started setting up tooling to use open-wc. Open Web Components is a way to create boilerplate web components that can expanded to your needs.

Download all dependences

In order to use Open-WC you will need to download Node.js and npm. Node.js is an open source javascript runtime environment and can be download here. Npm (Node package module) is a package manager which will allows you to install dependencies necessary to your projects. You can also download yarn which is an alternative package manager. Installing node.js and a package manager are absolutely necessary to being able to create an open-wc web component.

Use the command prompt to create a web component

Once you have downloaded the necessary software you can verify by running the following lines in your command prompt node -v and npm -v. If you get a version number back you are in good shape. Next create a project by running npm init @open-wc. You can select options using the arrow keys and the space bar. To create a new webcomponents choose to scaffold a new project, and webcomponent. I choose to add linting, testing, and demo capabilities as well. Next choose whether or no to run typescript, I do not use typescript. Choose the tag name of your webcomponent. The name should contain a hyphen so it is apparent it is not a native tag.

Open-wc will display the proposed file structure and you should choose to write it to the your disk. Finally install dependencies using npm.

Thanks it! Now you have your very own web components. To open and run this web component run cd projectName and npm start in the command prompt. In order to edit the webcomponent you will need to use an IDE such a VS code.

Project Red Pill

Francesca Ansell — Sat, 01 May 2021 16:54:20 +0000

For the final project in IST 402, I created my very own web component. I took an issue ELMNSln and got to work.

Step I: Assess the task

So the goal was to create a reusable web comment to promote a product. This web component needed to support Lazy Loading, Slots, and user customization using props. Originally I tried to use wcfactory to create the skeleton for my web component but the tooling is currently not compatible with windows. So I had to use the backup.... open w-c.

Step II: Building the Skeleton

I used open w-c to start my web component. Open w-c can be used to create a boilerplate template that developers can start building on. Features you can add to your scaffolding include Linting, Testing, Demoing, and Building. I choose to add all of these upgrades to my web component.

When I actually started coding my goal was to create something that looked like the inspiration and work backward from there.

Step III: Realize you are doing everything wrong

Originally I had a grid inside my web components and 4 of everything... title, picture, description, etc.

Repitiion = Bad

Step IV: Finish

To finish my web component I implemented the underlining of the first word, set the description to a slot, and change icon and color sources to more acceptable places for this particular project.

During class, my professor was able to help me figure out how to underline only the first word in the title. We used the updated method and passed changed properties. The algorithm checks to see if the prop name is the title. Then if it is title it checks to see if when the title is split by spaces there is more than 1 output. Finally using temp variables and the split, shift, and join functions split the title into the first word and the rest of the words.

To support the design pattern lazy loading I extended the IntersectionObserverMixin class from ELMNS. (Check it out here). Within my own code, all I had to do was make sure I import it, extend it, and conditionally render my HTML based on if the element is visible using a property from the IntersectionObserverMixin called elementVisable.

In the final product, the user is able to update the title, image, accent color, icon, and description for their product offering. The description can be an actual HTML element because the description is a slot in the actual .js file.

This was an awesome learning experience for me to build something from start to finish, and problem solve along the way.

Here is an example of what my web components look like in the browser and a few snippets of code.

The webcomponet

static get properties() {
    let props = {};
    if (super.properties) {
      props = super.properties;
    }
    return {
      ...props,
      title: { type: String },
      description: { type: String },
      source: { type: String },
      icon: { type: String },
      _titleOne: { type: String },
      _titleTwo: { type: String },
    };
  }

  constructor() {
    super();
    this.alt = '';
    this.accentColor = 'pink';
    this.dark = false;
  }

  updated(changedProperties) {
    if (super.updated) {
      super.updated(changedProperties);
    }
    changedProperties.forEach((oldValue, propName) => {
      if (propName === 'title') {
        if (this.title.split(' ').length > 1) {
          const tmp = this.title.split(' ');
          this._titleOne = tmp.shift();
          this._titleTwo = tmp.join(' ');
        } else {
          this._titleOne = this.title;
        }
      }
    });
  }

  render() {
    return html`
      ${this.elementVisible
        ? html` <!-- Container -->
            <div class="container">
              <img
                class="image"
                src="${this.source}"
                alt="${this.alt}"
                height="150px"
                width="200px"
              />

              <div class="square">
                <!-- Icon, Header -->
                <div class="squareTitle">
                  <!-- icon -->
                  <div class="icon-background">
                    <simple-icon
                      id="simple-icon"
                      accent-color="${this.accentColor}"
                      ?dark="${this.dark}"
                      icon="${this.icon}"
                    ></simple-icon>
                  </div>
                  <!-- header -->
                  <h4>
                    <span class="underline">${this._titleOne}</span>&nbsp;<span
                      >${this._titleTwo}</span
                    >
                  </h4>
                </div>

                <!-- descripton -->
                <div class="sqaureDescription">
                  <slot name="description">${this.description}</slot>
                </div>
              </div>
            </div>`
        : ``}
    `;
  }
}

Demo page

<div id="grid-container">
    <product-offering 
      source="../assets/Images/placeholder1.jpeg" 
      title="Real-world projects from industry experts" 
      accent-color = "cyan"
      description="With real world projects and immersive content built in partnership with top tier companies, you’ll master the tech skills companies want."
      icon="communication:business"
      >
      <div slot="description">With real world projects and immersive content <b>built in partnership with top tier companies, </b> you’ll master the tech skills companies want.</div>
    </product-offering>

    <product-offering 
      source="../assets/Images/placeholder2.jpeg" 
      title="Technical mentor support" 
      icon = "social:group" 
      accent-color="pink"
      description="With real world projects and immersive content built in partnership with top tier companies, you’ll master the tech skills companies want."
    >
      <div slot="description">Our knowledgeable mentors guide your learning and are focused on answering your questions, motivating you and keeping you on track.</div>
    </product-offering>

    <product-offering 
      source="../assets/Images/placeholder3.jpeg" 
      title="Career services" 
      icon = "image:wb-incandescent" 
      description="With real world projects and immersive content built in partnership with top tier companies, you’ll master the tech skills companies want."
      accent-color="green"
      >
      <div slot="description">You’ll have access to resume support, Github portfolio review and LinkedIn profile optimization to help you advance your career and land a high-paying role.</div>
    </product-offering>

    <product-offering 
      source="../assets/Images/placeholder4.jpeg" 
      title="Flexible learning program" 
      icon = "timeline"  
      description="With real world projects and immersive content built in partnership with top tier companies, you’ll master the tech skills companies want."
      accent-color= "blue"
      >
      <div slot="description">Get a custom learning plan tailored to fit your busy life. Learn at your own pace and reach your personal goals on the schedule that works best for you.</div>
    </product-offering>
</div>

The Differences Between Monolithic and Microservice Architecture

Francesca Ansell — Mon, 19 Apr 2021 03:47:29 +0000

Big words I know. First in order to determine the difference between the two let's define each one.

Monolithic

Monolithic architecture in the tech industry are services that are completed in a single unit. Each part of the program is contained within one unit. A great and common example of this is drupal. Within a drupal site, you have a theme, template reprocessing, views, entity APIs, fields API, and more all making up the CMS.

Amazon, Netflix, and Apple used to be a monolithic server but has since switched. The downside of having such a singular server was that amazon had to be sure the server capacity was able to handle all the traffic possible. This caused them to lose lots of money which no one wants. In addition, if a single part needed to be updated developers were required to rebuild and redeploy the entire server.

Having a Monolithic server would be like having all the lights in your house be in a series circuit. You wouldn't be able to turn on just your bedroom light and instead would have to turn on all the lights in the house. This would make your electric bill very high and waste a lot of money. Not only this but if one light bulb in your house goes out then you can't use any lights in your house! Now I am not trying to say one bug will always bring down an entire monolithic server but you get the picture.

Microservice

Microservices were built as the solution to the tedious and inefficient monolithic architecture.

A Microservice breaks down each component into a smaller set of independent components. Each component is in charge of carrying out whatever process they are in charge of as a separate service. This inherently means that each component has its own logic and functions. Each of these components is independently deployable and small. So to fix a bug or update a component developers no longer need to rebuild and deploy the entire server, just the part they are working on. Microservices allow the servers to scale to anticipated captities and limit themselves during downtime to save money.

So back to the house example. Instead, our house electric is made up of parallel circuits so that you can scale to capacity (turn on as many lights as you need) and fix one problem without updating the whole system (change one light bulb while the rest are still on).

I think this image does a great job of visually comparing the two.

Check out these articles I used to help understand these topics:

Why Netflix, Amazon, and Apple Care About Microservices

Using web components and contributing to open source

Francesca Ansell — Mon, 29 Mar 2021 13:50:38 +0000

What is a web component?

If you have taken any software engineering or coding classes professor love to talk about encapsulation. Web components are real-life examples of encapsulation. If you don't know encapsulation is basically the reuse of code in order to create more organization and usable projects. Web components are a great way to reuse code and make your life easier! For example, the web component I will use in this demo was created by another programmer, but if I was say... building my own website I could use his web component in my own project.

Find a project

For this example, I will be using Twitter Embed from

elmsln / lrnwebcomponents

@lrnwebcomponents Monorepo for NPM based element definitions

lrnwebcomponents

Welcome to the lrnwebcomponents project!

ELMS:LN produced web components for any project

Quick-start

Notice: You will need to use Node version 6.0 or higher. Verify that you have yarn enabled — if not install yarn globally. These web components are written in ES6 and build routines compile to es5 to encompass legacy browsers.

Quick Install

$ curl -fsSL https://raw.githubusercontent.com/elmsln/lrnwebcomponents/master/scripts/lrnwebcomponentsme.sh -o lrnwebcomponentsme.sh && sh lrnwebcomponentsme.sh

Manual Install

$ git clone https://github.com/elmsln/lrnwebcomponents.git
$ cd lrnwebcomponents
$ yarn global add @wcfactory/cli
$ yarn global add polymer-cli
$ yarn global add lerna
$ yarn global add web-component-analyzer
$ yarn install

Syncing Your Fork

$ git remote add upstream https://github.com/elmsln/lrnwebcomponents.git
$ git fetch upstream
$ git pull

Windows

Git bash should already be installed on your Windows machine and can be found by searching through your computer's applications or by right-clicking anywhere inside of the File Explorer Cygwin command line is lightly tested,…

View on GitHub

The creator is my professor

.ltag__user__id__254952 .follow-action-button { background-color: #1aff00 !important; color: #000000 !important; border-color: #1aff00 !important; }

Bryan OllendykeFollow

@elmsln @haxcamp @btopro #HAXTheWeb #drupal #webcomponents #edtech ✻ Full stack unicorn Adjunct professor teaching about webdev, ethics, and everything in between

Install necessary dependencies

This project requires downloading and installing yarn, as well as forking the repo and cloning it locally. No matter what project you decided to contribute to be sure to check their readme page! Personally, I use npm all the time, but this project needs yarn and cannot run with npm. If you need git instructions see my git article here.

Edit some code!

I updated the demo page for the Twitter/embed web component. A demo page can help demonstrate what the web component is supposed to do and the syntax in which to do it. This is the tweet I decided to add

WeRateDogs®

@dog_rates

This is Peyton. He was diagnosed with brain cancer back in January. He’s been so brave during his treatments and as of this week, he is officially a radiation graduate! You can help Peyton with the cost of his care by clicking below. 14/10

gofundme.com/f/help-peyton-…

16:42 PM - 26 Mar 2021

How sweet right?

Sumbitt to the development team

Just because you changed one line of code does not mean you are done. Next, you have to submit a pull request to be reviewed by the project's main development team. Github will check for any conflicts etc. that could break their project.

If you've come to this far and your request gets accepted congrats you have hopefully been able to contribute to an open-source project. Welcome to the real world.

Check out my youtube video to go with this blog post.

Getting started with Git!

Francesca Ansell — Wed, 24 Feb 2021 01:15:50 +0000

Using Git and GitHub is one of the most popular ways to collaborate on code with other team members. When using GitHub you will have a local and remote repository (or repo).

Some key terms you should know are:

clone
pull
add
commit
push
branch

Cloning a repo creates a copy of a repo either locally or remotely. Git add puts changed files in a staging area so that they can be committed. A commit saves your changes and prepares then to be pushed. A push sends the code from your local repo to the remote repo in GitHub. A pull retrieves the code from the remote repo and merges it with your local code.

Branches are extremely useful when working with other team members. You can make different branches and then then merge them together later on. Say you want to work on a specific part of the project. If you make a branch from the current state of the project you can attempt to implement whatever you want without worry of making a catastrophic error.

This image gives an example of how merging effects your project.

Personally I prefer to use git in the command line. I think as a future software developer it is important to be familiar and confident in the command prompt; however, there are a variety of ways to use GitHub. Some of these ways include the command line, VS code extensions, git hub desktop, and github.com. In this video I explain using GitHub in the command line and in VS code.

Auditing lousalternator.com

Francesca Ansell — Mon, 15 Feb 2021 04:17:42 +0000

For this assignment, I choose to audit my dad's business's website... lousalternator.com. I ran two reports, Lighthouse and WAVE. Before I ran these reports however I asked the owner of the website if they were happy with it. He stated that it was slow, but looked better than most other website options. He made these assumptions with no web development background. Based on these two reports three areas of the website that I believe should be improved are contrast, implementing HTTPS, and adding a description to the metadata.

First relating to accessibility the contrast of the page is not high enough. The website includes only 4 colors: white, black, grey, and blue. The lack of contrast does not allow the significant difference between the background and foreground. Based on the WAVE report the element that creates the errors is light blue text against the white background. I suggest changing the color of the text to a dark blue or dark grey color.

Second, relating to best web practices I suggest protecting this website with HTTPS. Even though you can not purchase anything on the site and cannot input any sensitive information it is still extremely important to protect the owners and users. This issue can be solved by obtaining a single certificate for a single secure origin. The article 'Secure your site with HTTPS' give good information on how to secure your website and issues after obtaining a certificate to avoid like blocking crawling and making sure the webserver supports SNI

Third, relating to SEO, aka optimizing for search rankings, the website is missing an alternative text tag and missing metadata descriptions. These are important so that when the search engine returns a list of websites that lousalternator occurs as high as possible on the list. Both of these errors are very easy to fix just by adding alternative text to the image and inserting a description of the webpage in the metadata description.

Overall the website scored well overall but bad in performance. These changes can easily be made to improve the quality of the website and possibly create more traffic to the site.

Linked here is a video I made explaining this post and my design suggestions.

References
Secure your site with HTTPS

React Framework vs. LitElement Library

Francesca Ansell — Sun, 07 Feb 2021 17:46:35 +0000

First up React.

React is a javascript framework used to created user interfaces. It is may up of isolated snippets of code called "components". You use react as an element within your code that you can either store in a variable or pass around. You pass information in 'props' or properties. Here is a method used in the React introduction tutorial.

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

This class defines the squares in a Tic Tac Toe board. Value is the prop that defines the states (null or X). You can see this class also uses a constructor used to initialize the state.

Next LitElement.

LitElement is a library that advertises itself as a fast and lightweight way to design user interfaces. You can use LitElement in your .js file, or in a framework like react or vue. LitElement follows web components standards which allow you to use it in many different ways. Like, React you use properties to keep track of the attributes and other necessary information related to your elements. Here is a template provided by LitElement.

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {

  // Implement render to define a template for your element.
  render(){
    /**
     * Return a lit-html `TemplateResult`.
     *
     * To create a TemplateResult, tag a JavaScript template literal
     * with the html helper function.
     */
    return html
      <div>
        <p>A paragraph</p>
      </div>
    ;
  }
}
customElements.define('my-element', MyElement);

Okay, so what is the difference, and what's similar?

A framework includes code libraries, scripting language, and other software needed to create a project. It is a skeleton of the application you are attempting to build, and as the developer, you fill out the skeleton to create your application. One popular framework you may already know is bootstrap. Similar to using abstract classes in languages like java and python.

A library providers smaller helper functions that the user calls, like LitElement. Another example of a library is jQuery. You call a library within your code which allows you to reuse code another developer has already created.

An important point of comparison is that a framework is abstract whereas in a library you reuse code that exists on its own.

React and LitElement both use keywords such as 'extend', 'super', 'return', and 'render'. Both of these are used in javascript so there are definitely going to be some similarities. Both also use properties to pass information. Both use keywords such as 'extend', 'super', 'return', and 'render'.

Both can be installed locally fairly easily using npm in the command line. Both need to be imported into your .js file.

Framework (React)

A collection of patterns and libraries
Abstract
Skeleton
Similar to implementing a java abstract class
An application in and of itself
Calls your code

Library (LitElement)

Well defined actions
Code reuse
Usually Require fewer dependencies
Called within your code

Here is a popular image that I think gives a good visual of the difference between the two.

Here is a video I made on the subject.