DEV Community: Taylor-Bracone

Getting Started with Wireframes & Prototypes for Applications

Taylor-Bracone — Wed, 06 Apr 2022 17:57:24 +0000

Beginning Stages

Recently, I have been working on developing comps for an application. One of the first things we decided to accomplish is agreed upon criteria. My team and I spent days just coming up with different ways to reach a common goal of solving usability concerns. In these sessions, we were whiteboarding ideas that could form into something larger accomplishing the resolution of some issues. Whiteboarding is definitely a technique and tool that should be used to facilitate ideas. Just like companies use this technique, we use it as an instrument to increase productivity and effectiveness. One of our earlier sessions resulted in the image that is seen below.

Purpose

Our main objective is to make the feel of the application feel like a journey to the user with a cohesive design. The goal is to make a smooth user experience whether you have a lot of experience or none at all. It is also being redesigned to look a little like doodle jump with the grid like structure. The image below is for reference for those of you that do not know what doodle jump is.

Application Flow to date

When talking more about the flow of the application, it starts off simple with two possible points either portfolio or course. From there, a type can be chosen such as Technology, Arts, Business, and or Photography. At any point the user can revert or exit the journey or flow of the application. Lastly, the style can be edited and changed. The flow is also determined based on if the user is a new or returning users which will be stored.

Collapse Card

One of the main parts of the application that I was responsible for the card itself. Below is an image that shows the different possible card forms and its full expansion. To draw the user in and save space, the card is collapsable. It also shows the variations overtime and how our vision altered. We also took the approach from Wiredjs. I recommend playing around with it, very cool. The variations are very apparent.

Event Planning

This application is one of many applications out there that are dipping their toes in the land of web components. Web components are still very new and ever-growing. While I have been developing on HAX-the-Web, I am also the Project Manager for HAXCamp 2022. < hax-camp > is an unconference dedicated to all things Web Components!This year's event is being student-run and we anticipate there being discussions about openwc, lit, performance, element composition, css, hax.psu, pedagogy, and design systems. If this work flow is something that you are interested in, I would encourage signing up for this event. It is much more than this, larger than you know and a way to connect with students, faculty, staff, and professional in the industry.

Teaser

Teaser
Want to learn more about LitElement, VanillaJS, and others? Come learn with us!
Interested in framework-agnostic components you can use in your existing React, Angular, Vue, Backbone, and CMS Projects? It's all we're talking about!
Have you made some cool web components and want to show them off? Join us!
Need to figure out tooling, building, SEO, polyfills, and other considerations? Let's figure it out together!
Do you want to learn more about web components from top to bottom? Join us as we all discover together!
Want to learn more about HAX, HAXcms, and all things HAXTheWeb? Join us and find out!

Final Remarks

Attached below are the two flyers for the event. More information can be found on our website for HAXCamp 2022 and Sign Up Here!.

Awesome One!

Professional One!

Getting Started with Vercel Based Development

Taylor-Bracone — Sun, 13 Mar 2022 02:17:32 +0000

Vercel

More recently, I learned about Vercel and what is has to offer. Companies such as Netflix, TikTok, Hulu, and Uber to name a few use Vercel's platform. Vercel is a platform that creates for a smooth creation and deployment of applications. It enables a more efficient way to develop, preview, and ship. It is great for productions because it has automatic deployments. Getting started with Vercel is pretty simple and easy.

How to Get Started with Vercel

Once a repository is created through a GitHub account, make sure that all code is pushed. The first thing about Vercel is to make sure that it is hooked up to you GitHub account. From there you can import by creating a new project from the Git Repository. The import could take seconds up to minutes. From there is should be deployed and become a .vercel.app.

When you open it in an IDE such as VSCode, there should be a folder created within the directory .vercel with a project.json file that contains the project and org ID.

Another important aspect when working with Vercel is to note that in the .gitignore file .vercel is added. These are files that are ignored when added to version control in a GitHub repository.

Vercel Example to Build

When first running the Vercel example project (ist-vercel-demo), I ran into a few issues that prevented a smooth deployment. One of the errors that I received pertained to the Output Directory "public" that was documented to be found after the Build was completed. It is important to note also the direction it is pointed out and following the commands that follow vercel dev.

This could be resolved by the Project Settings, in Advanced enable Directory Listing and override the Output Directory in General.

Platform Links to Content

For more content about read an article by Michael Potter: Red Hat Article.

More reading on Vercel:
Vercel Reading #1.
Vercel Reading #2.

Other Sites on Vercel Deployed

Following the steps above, Vercel can be used to deploy. It is easy in just a few button clicks once registered to get a deployment. Below shows the visualizations of the 11ty site(s) that I have been working on recently to better comprehend and understand. This can be read more in the article: 11ty Article.

1:

2:

3:

CI/CD Pipeline

The pipeline steps would be to build, test, release, and deploy. Below shows a visualization. Vercel has Build and Output Settings that allow the configuration of the project build. Within GitHub, there are GitHub Actions which provide the CI/CD pipeline that updates in real time. The set up, while different, is also simple and allows for a smooth way to maintain and not need to run manually. This all creates the eXperience.

Thank You!

Getting Started with 11ty

Taylor-Bracone — Sun, 27 Feb 2022 23:42:55 +0000

Getting Started with 11ty

Eleventy (11ty) is a powerhouse of a tool that is used to mix templates and languages. Very flexible. It was noted that eleventy was created for "flexibility, betting on JavaScript, not a JavaScript framework" (Zach, 2018) Content can be written in markdown and go to a developed template. The best way I have found to begin working on 11ty is to look at developed projects and some starter code for further exploration. Here are some examples.

Different & User Experience 11ty Sites-- Basic 11ty and hax11ty

This is a video demonstration on development: Video Demonstration.

This is a screenshot of a baseline for performance.

From the hello world template of 11ty to the working template provided functionality. Blog posts were also added to the column of the working site.

More...

Usability is key. 11ty is good for compiling everything in one place to create a smooth, cohesive experience. It scaffolds and works off projects and uses directories.

Links to Relevant Sites

hax11ty
hello world
repo
repo 2
repo 3

Docker 101/DockerFile on a MacOS Laptop

Taylor-Bracone — Thu, 24 Feb 2022 18:11:37 +0000

Welcome to another post about Docker! If you need help with the installation please refer to my other post titled Docker Installation on a MacOS Laptop.

Why Docker is Powerful?

Docker is an open platform application for developing, running, and shipping off applications through containers. Docker is powerful because it takes a larger application and breaks it down into smaller more chuckable pieces aka services. Microservices are a cloud based approach where a single application is made up of different working smaller services. Below is an image that shows some structure. Everyone can communicate in one single place. Each of the services can be considered a microcomputer. Some known companies that are notable which use Docker are Spotify, Yelp, and Uber to name a few.

How to get Started with Play with Docker
Go to Docker Playground to start to play with Docker. After you will be able to start to add a new instance. From there, you are able to access your own server to run Docker. To start to see this come to light, you can start an instance to run an application. A Dockerfile describes how the actual container is built. A snippet that shows this is...
FROM node:10-alpine WORKDIR /app COPY . . RUN yarn install --production CMD ["node", "/app/src/index.js"] EXPOSE 3000

To build a container, run docker build -t todoapp . Then you can look at images, docker images and then run a container docker run -d -p 3000:3000 todoapp and multiple ones
docker run -d -p 3001:3000 todoapp docker run -d -p 3002:3000 todoapp docker run -d -p 3003:3000 todoapp

Screenshots of the NewsAPI Microservice

Below shows the success of a web component communicating with a backend microservice and the newsapi.org.

SUCCESS!

How to Create a DockerFile for Repo

Find the GitHub Repo and run it on Docker Playground
Run touch Dockerfile
Select the editor to open and see the file.
Click on Dockerfile (double click) and enter...

# syntax=docker/dockerfile:1 FROM node:12-alpine RUN apk add --no-cache python2 g++ make WORKDIR /app COPY . . RUN yarn install --production CMD ["node", "src/index.js"]

Run docker build -t getting-started .
Run docker run -dp 3000:3000 getting-started to start.
When open it, should be running locally on the port.

Bonus Feature: Image below shows using touch the created Dockerfile for Nasa Image Search!!!!!

CONGRATULATIONS!

Front End Devs: Find IP Address/ Longitude and Latitude

Taylor-Bracone — Mon, 31 Jan 2022 04:23:07 +0000

IP Address / Location API Element

How the IP address was fed into the API of the GeoIP to detect the Longitude and Latitude Coordinates

Initial Thoughts
fetch can be used to get information from the perspective API and provide that for the component in question. Use of fetch function which is already within the update() function. Below shows the instance that gets the information from the API that would be stored.

Deep Dive
fetch is drawing from the API and allowing the data to use in JSON data.

.then(data => { this.ip = data.ip; this.country = `${data.country}`; this.city = `${data.city}`; this.location = `${data.city}, ${data.country}`; return data; });

It shows how the data that was retrieved will be written. For example, here it shows it broken down by the IP, city, state, country, location. It is important to note how it is presented and formatted. It took a while to figure out the best way to call and then print the data that was recieved.

Deeper Dive for Longitude and Latitude with the API

FreeGeoIP API

Link: https://freegeoip.app/json/

This line of code above comes from the constructor as it is linking the GeoIP API to allow for access to work in harmony with one another. The FreeGeoIP API is used to get the longitude and latitude at a given location. Through this communication should result in a render.

More
To learn more, visit the links below.
My Repository: https://github.com/Taylor-Bracone/API-Project/tree/master
Team Repository: https://github.com/Da-Penguins/API-Project

Please stay tuned for more post on this topic!

Docker Installation on a MacOS Laptop

Taylor-Bracone — Thu, 13 Jan 2022 20:49:12 +0000

Docker Installation on Machine

Docker is used universally. This post will hopefully help others to install and understand docker a bit better. The first step to succeed is the installment using some basic links that are provided below.

This is the link for installing Docker Desktop on Mac: https://docs.docker.com/desktop/mac/install/

This is the link for installing Docker Engine on Ubuntu: https://docs.docker.com/engine/install/ubuntu/

Personally I have a Mac, so I used the first link to continue with the installment. Once on the site, clicking the link to download depends on the type of chip (Intel or Apple). This will automatically download a Docker.dmg, which then will have to be dragged and dropped into the Applications folder. From there, you can choose to drop it into the bar on the bottom of applications. This part is totally optional, but I recommend for easy access and use. It also is important to note that updates to Docker will be found in Settings/Preferences. It is important to update, so that you have the newest version, which is not outdated.

From this point, it is time to get started. Whatever repository you are using should be download/clone to your device and contain a Dockerfile. This will allow Docker to be used and can then use the command docker build -t hax. This says to build Docker and name it hax, since the repository I am using is HAXcms. On Docker, there is an image section that should be listed as recently created on the files. From there, run but add the optional settings of local host, for example 80, to use. Once that is completed, Containers/Apps should be listed and able to run right away. The image below shows in the black circle the hax that is listed. I use Docker for a lot of projects, so please ignore the excess information.

What is Docker?

Docker is a platform, an open platform application that is used to build containers for developing, running, and shipping off applications. Everything that needs to communicate to one another can do it in one place. Simple.

Why is Docker Useful?

Docker is useful because it makes it simple to run through containers. It also helps to be more efficient and scales better because time is money. It makes it more streamline. The key words that people use to describe it is fast and reliable. Some companies that use Docker are Netflix, Target, Verizon, The Container Store to name a few.

Final Project- Flash Card

Taylor-Bracone — Sun, 12 Dec 2021 22:55:38 +0000

Recently, for our final project my group and I have been working on a flash card. Its main purpose is to further learning and education. This was what we modeled it after: flashcard. The way that I initially thought of it was a smaller and similar version of Quizlet. I always like to compare and map out similar implementations.

This was the model that was in the back of our minds. It is very simple. Some of the notable points was the correct and incorrect indication as well as the question it pertains to with the image. In order to obtain the image and document it the same way, we used a keyword for the question. The check answer will then indicate the reset and restart.

Aspects

Visual Documentation of Your Card:

This image shows the simple flash card as well as the translated answer and check answer to Spanish by means of the locales. Some more notable stylistic changes is the white border surrounding the pulled image with a changeable card that has a shadow to produce depth.

This is what it would look like if the answer was correct before the restart of the flash card back into its general form. As seen, once someone submits an answer it blocks out another submission. It has the same consistent styles throughout.

This is what it would look like if the answer was incorrect before the restart of the flash card back into its general form. As previously mentioned, it blocks out another submission, so that the only task is to retry by using the restart.

Explanations

Tutorial and Approaches

In order to make this element that we are proud of was that we had to separate it into three major part and their own documentation for each. It appears very simple but it has also a lot of working and moving parts. First, the image and that support which uses the keyword to produce an image to the question, the question and the answer box (as a whole), and the whole card itself including the locales and translations.

We used slots which can be shown below in order to produce the card itself. sideToShow represents what should be seen at first versus hidden from the user in order to check but not give the answer away. The purpose is to test knowledge and not give it away.

render() {
    return html`
      <krusty-image img-src="${this.keyword}"></krusty-image>
      <flash-card-body sideToShow='${this.sideToShow}'>
      <slot slot="front" name="front"><div slot="front">${this.front}</div></slot>
      <slot slot="back" name="back"><div slot="back">${this.back}</div></slot>
      </flash-card-body>
    `;
  }

We used files in the locales folder in order to name the translation of the different languages such as the one shown below in Spanish. That comes from flash-card-body-es.json.

{
    "yourAnswer": "Tu Respuesta",
    "checkAnswer": "Respuesta",
    "restartActivity": "Reiniciar la actividad"
}

One issue that took a while to figure out is how to get the answer and check answer on the same line. The solution to this issue is using divs such as the code shows below.

<div>
        <p id="question">
          <slot name="front"></slot>
          <slot name="back"></slot>
        </p>
        <input
          id="answer"
          type="text"
          .placeholder="${this.t.yourAnswer}"
          @input="${this.inputChanged}"
          .value="${this.userAnswer}"
        />
        <button
          id="check"
          ?disabled="${this.userAnswer === ''}"
          @click="${this.checkUserAnswer}"
        >
          ${this.t.checkAnswer}
        </button>
      </div>

Relevant Links

Github Link:
https://github.com/TheKodingKrab/flash-card

NPM link:Stay Tuned!

Final Thoughts

I really enjoyed furthering my knowledge and learning all about web components through this class and beyond. Stay tuned for new posts in the next semester as I continue my knowledge and add more tools under my toolbelt!

Disneyland but Different

Taylor-Bracone — Fri, 05 Nov 2021 19:31:12 +0000

The Idea: What Would It Do?

If I could build an app of any kind, the first thing that comes to mind pertains to wait times for ordering food. Just like Disney has wait times for rides, food service places should have wait times for lines to order food. Especially in a college town, time is money, so to limit the amount of time waiting would be priceless. Some could argue order ahead, but that is not always the case or an option for certain establishments.

Who Would It Be Used For?

This application would be used for the time efficient human being, college student, or working class. It really would be used by anyone universally. If you believe time is money, this application is for you.

How Would They Use It? How Would You Use It?

The restaurant, during business hours, will show up on the application with the wait time if you were to get online and order at the restaurant. If it were closed, it would merely say check back later- closed. This is very dear to my heart because ever since I got to college I realized that my time is slim and should not be wasted when I am able to work around it. The other day, I was at Chipotle where the line was pretty short. It was deceiving. From the time I got on line to the time I was able to pay with my food was upwards to an hour. Unnecessary pain. That was insane especially when there are places locally that make similar foods such as El Jefe’s or even Yallah Taco a block or two away. Universally, I think this would be very helpful for an average person that wants time back in their life, very few people do not fall in this category.

If Money was No Concern, Time No Concern; What Would You do With Your Life and the Skills You've Assembled if you Could Dedicate it to One Thing?

This is a question that has been asked of me many times and sometimes haunts me in my sleep (in a good way). What it boils down to is I want to help people and make people’s lives easier in any way possible through technology. Through the courses that I have taken and will be taking throughout my college career, I believe have set me in the right direction on this path. I also still feel like I have more to learn especially about myself.

When I first entered college, I came in as a Computer Science major in the College of Engineering at Penn State. Shortly thereafter, I got a job as a research assistant/developer and really found myself. I loved the project I was on and the impact that I was making on someone's life. As Winston Churchill once said, "if you find a job you love, you'll never work again...."

My current major in the College of Information Sciences and Technology is Human-Centered Design and Development. The main difference to me is that I get the overall design thinking model: emphasize, define, ideate, prototype, and test. Basically, who are you solving this for, what do they specifically need, how will you solve this matter, and why does it work for them moving forward are the key questions. Helping people with technology has been a constant and dedication of mine.

Slot Slot Slot

Taylor-Bracone — Mon, 25 Oct 2021 03:31:19 +0000

If you are following along with my post, as you may know I am on a team with my fellow peers and we are continuing to work on our web components to make a working card. The census of the team was to break the card up among all of us through different components such as the icon, the card framework, the banner, everything all together.

Slot Composition:

Utilizing slots can help to make content look and seem more aseptically pleasing. I took the liberty of drafting some very basic level HTML to further show how to create separate DOM trees with different elements all rolled up into one, together.

We are looking to use slots to pass the HTML into the different parts of the card such as the header, sub header, and the overall body as mentioned above.

Our Code & Examples:
Our code is still a work in progress and we are still working out some kinks as we speak. Learning-card has been recently created with a decent amount of slots.

In this image, the div wraps around the entire created banner with icon called with the header. The two slots inside that are contained, pertain to the header and the sub header. This maps on a different scale to what I mentioned above. This shows how slots are used inside the component.

Link to Repo:
https://github.com/TheKodingKrab/project-two
https://github.com/Taylor-Bracone/project-two

Design Considerations

Taylor-Bracone — Mon, 11 Oct 2021 03:59:01 +0000

Introduction
Currently with a group of my peers, I am working on making a web component with the use of a button and a card.

Breakdown & Details
We discussed and were debating how we are going to separate different elements. The card has a lot of main components some of which are the icon(s), the banner on top, and the description on the bottom of the card or body content provides, and the scaleability that it all entails. The body of the card should also contain lists, links, and buttons to encompass the wanted outcome. These are the multiple elements that go into the makeup of the card that we are looking to produce with the inclusion of our button.

Experiences & Potential Difficulties
We as a team decided that we wanted the card to be able to be styled in many different ways. I believe that this will be an easier task since prior knowledge and experience have gone into it from the beginning of the class that I'm taking. While, the more complex task will arise when creating and changing the states.

Repo Link:
https://github.com/TheKodingKrab/project-two

Web Components- Call to Action (CTA) Button

Taylor-Bracone — Sun, 26 Sep 2021 21:40:51 +0000

Currently, in IST 402, we’ve been working on web components in the effort to make a call to action (CTA) button. The button that we are designing was inspired by the website Headspace, a meditation calming website (https://www.headspace.com). To begin the workings of our button, we created a web component with open wc and continued from there.

Difficulties/Issues
My partner and I have been working hard to understand issues that have arisen on both of our ends in the efforts to make this button. One of the hardest things so hard is dealing with merge conflicts within Github as well as at times yarn. Another struggle that we dabbled with was not changing to the correct directory at some points. While these all seem minor they made huge differences.

This was my first time using a fork in Github. When doing so, you have to remember to fetch and merge before a git pull can occur to stay up to date on the changes. The purpose of the fork is so that changes can be made without directly affecting the original repository. Eventually, we figured it out.

Successes
In class, we went over how to add an icon to my button. This was a huge success and easier than I imagined it would be. The button also has different states such as disable versus active and hovered to name a few. CSS was also included to mimic the scheme of the website we were modeling it after. Appearance and accessibility is very important. Overall, I enjoyed the planning and thought process that went into the composing button. I can’t wait to expand my knowledge further.

State of Element(s):

Repo: https://github.com/Taylor-Bracone/cta-button/tree/main

Boilerplates

Taylor-Bracone — Wed, 22 Sep 2021 00:23:41 +0000

There are a few commonalities between the boilerplate code. For starters, they all contain HTML, CSS, and JavaScript files. Another commonality is that they all have their own dependencies. Also, React and VueJS do not have typescripts. On the other hand, Angular and StencilJS do.

I have some prior experience using React and, more recently, a little bit of VueJS. Furthermore, I think that VueJS is the easiest to get going. If I were to build an application tomorrow, I would use VueJS. VueJS, from what I have learned, has responsive visual components which are easy to use and integrate. Another word that is worth mentioning pertaining to VueJS is how flexible it is.

Organizations Repo:
https://github.com/TheKodingKrab/boilerplates

Boilerplate Repo:
https://github.com/react-boilerplate/react-boilerplate