DEV Community: caitlinnorse

Docker Doolittle

caitlinnorse — Thu, 15 Apr 2021 01:19:46 +0000

According to amazon,

What is Docker?

Docker is a software platform that allows you to build, test, and deploy applications quickly. Docker packages software into standardized units called containers that have everything the software needs to run including libraries, system tools, code, and runtime. Using Docker, you can quickly deploy and scale applications into any environment and know your code will run.

How Does it Work?

Docker works by providing a standard way to run your code. Docker is an operating system for containers. Similar to how a virtual machine virtualizes server hardware, containers virtualize the operating system of a server. Docker is installed on each server and provides simple commands you can use to build, start, or stop containers.

Why Use Docker?

Using Docker lets you ship code faster, standardize application operations, seamlessly move code, and save money by improving resource utilization. With Docker, you get a single object that can reliably run anywhere. Docker's simple and straightforward syntax gives you full control. Wide adoption means there's a robust ecosystem of tools and off-the-shelf applications that are ready to use with Docker.

What is Monolithic Architecture?

Monolithic Architecture is one big system or “container” where all of the components of an app are assembled. A Monolithic application is tightly coupled and entangled as the application evolves, making it difficult to isolate services for purposes such as independent scaling or code maintainability.

Examples:

Drupal
Etsy

What is Microservice Architecture?

Microservices are loosely coupled application services, each independently built and maintained. Collectively and working together, they form an application. They are usually organized to align individually to business functions, such as a payment or a messaging service.

Examples:

Amazon
Netflix
Uber

Monolithic vs Microservices

Benefits of Monolithic Architecture:

Simple to develop.
Simple to test. For example you can implement end-to-end testing by simply launching the application and testing the UI with Selenium.
Simple to deploy. You just have to copy the packaged application to a server.
Simple to scale horizontally by running multiple copies behind a load balancer.

Drawbacks of Monolithic Architecture:

This simple approach has a limitation in size and complexity.
Application is too large and complex to fully understand and made changes fast and correctly.
The size of the application can slow down the start-up time.
You must redeploy the entire application on each update.
Impact of a change is usually not very well understood which leads to do extensive manual testing.
Continuous deployment is difficult.
Monolithic applications can also be difficult to scale when different modules have conflicting resource requirements.
Another problem with monolithic applications is reliability. Bug in any module (e.g. memory leak) can potentially bring down the entire process. Moreover, since all instances of the application are identical, that bug will impact the availability of the entire application.
Monolithic applications has a barrier to adopting new technologies. Since changes in frameworks or languages will affect an entire application it is extremely expensive in both time and cost.

Benefits of Microservices Architecture

It tackles the problem of complexity by decomposing application into a set of manageable services which are much faster to develop, and much easier to understand and maintain.
It enables each service to be developed independently by a team that is focused on that service.
It reduces barrier of adopting new technologies since the developers are free to choose whatever technologies make sense for their service and not bounded to the choices made at the start of the project.
Microservice architecture enables each microservice to be deployed independently. As a result, it makes continuous deployment possible for complex applications.
Microservice architecture enables each service to be scaled independently.

Drawbacks of Microservices Architecture

Microservices architecture adding a complexity to the project just by the fact that a microservices application is a distributed system. You need to choose and implement an inter-process communication mechanism based on either messaging or RPC and write code to handle partial failure and take into account other fallacies of distributed computing.
Microservices has the partitioned database architecture. Business transactions that update multiple business entities in a microservices-based application need to update multiple databases owned by different services. Using distributed transactions is usually not an option and you end up having to use an eventual consistency based approach, which is more challenging for developers.
Testing a microservices application is also much more complex then in case of monolithic web application. For a similar test for a service you would need to launch that service and any services that it depends upon (or at least configure stubs for those services).
It is more difficult to implement changes that span multiple services. In a monolithic application you could simply change the corresponding modules, integrate the changes, and deploy them in one go. In a Microservice architecture you need to carefully plan and coordinate the rollout of changes to each of the services.
Deploying a microservices-based application is also more complex. A monolithic application is simply deployed on a set of identical servers behind a load balancer. In contrast, a microservice application typically consists of a large number of services. Each service will have multiple runtime instances. And each instance need to be configured, deployed, scaled, and monitored. In addition, you will also need to implement a service discovery mechanism. Manual approaches to operations cannot scale to this level of complexity and successful deployment a microservices application requires a high level of automation.

Click here to watch me talk about Docker

Cool articles to check out:

https://opensenselabs.com/blog/articles/microservices-architecture-drupal-development
https://articles.microservices.com/monolithic-vs-microservices-architecture-5c4848858f59
https://www.tutorialspoint.com/difference-between-monolithic-and-microservices-architecture
https://aws.amazon.com/docker/

Web Components Galore

caitlinnorse — Mon, 29 Mar 2021 06:17:20 +0000

What's a Web Component?

Web Components are a suite of different technologies that allow you to create reusable custom elements that have their functionality encapsulated away from the rest of your code. Reusing code as much as possible is a good idea as a developer. Writing the same complex code over and over again can quickly clutter your page and make it nearly unreadable.

Web components aim to solve this issue by allowing users to create versatile custom elements with encapsulated functionality that can be reused wherever necessary without the fear of code collisions.
Creating a web component is similar to other types of programming. You begin by creating a class in which you specify your web components functionality, register your new custom element by calling the method and passing in the element to be defined, attach a shadow DOM or an HTML template if necessary, and use your custom element as needed.

Why Use a Web Component?

At the start of the web, the internet had a small set of tags. These were used to build web pages out of tags, and most everything was written in markup. Today, things are a little different. Web components are standard in over 89% of all internet traffic without the need for heavy and bloated tech layers. It is easy to find HTML and CSS blocks that someone else made for you to copy and paste into your web pages. This does sometimes lead to some obstacles when reusing components from different frameworks.

Web components allow us to extend HTML so that we can fill in the gaps in functionality with our own tags. They are an umbrella term for four different W3C specifications:

Custom Elements – Lets you define your own HTML tabs
HTML Templates – Enables you to define blocks of markup with the ability to inject dynamic content into
Shadow DOM – Gives you the ability to scope markup and styles in a separate DOM tree
HTML Imports – Provides a way to include and reuse HTML documents in other HTML documents

Combined, this package gives you:

Composability – Being able to create whole sites and apps by putting different elements together
Encapsulation – Isolating markup, style, and behavior logic so they don’t leak into the rest of the page
Reusability – Extending existing elements to create new elements, allowing you to stop “reinventing the wheel”

How do Web Components Improve Accessibility?

Custom Elements allow users to create a variant of an element to make is suit their needs.
- Have customized built-in elements (takes an existing HTML element and extends its capability) and autonomous elements (created more or less from scratch)
Accessibility Object Model – an experimental JavaScript API being incubated at W3C by Google, Apple, and Mozilla.
- Has several new features intended to solve existing accessibility use cases

How do Web Components help Future Proof Development/Improve Transparency

They free us from the frequently changing front-end frameworks by taking advantage of standards that all browser vendors have agreed on implementing
No longer dependent on a specific front-end framework (like Angular, React, or Vue)
Gives developers the freedom to use any JavaScript frameworks and building & testing tools

Who is Using Web Components?

YouTube
Comcast
EA Sports

Helpful Links

My Video

https://studio.youtube.com/video/PP7toGbuCSU/edit

Git Me a Lesson on How to Use Git

caitlinnorse — Mon, 22 Feb 2021 06:56:18 +0000

What is Git?

Git is a distributed version control system, which means that it tracks the history of changes as people and teams collaborate on projects together. Because it is a distributed version control system, it is used commonly for open source and commercial software development. Users have full access to every file, branch, and iteration of a project, without the need for a constant connection to a central repository. This means that developers can work any time, anywhere, and collaborate asynchronously.

Why Should I Learn Git?

If you plan on going into the technological workforce, you will more than likely have some experience with Git. According to Github, “more than 70% of developers use Git, making it the most-used VCS in the world”. Using Git allows developers interaction with the history of their project, cloning, creating branches, committing, merging, comparing changes across versions of code, and so much more. It allows multiple developers to work separately and together, without the fear of overwriting others work or making detrimental and irrecoverable changes.

How Does Git Work?

Git works by using repositories. Repositories are like Git projects. They contain all of the files and folders associated with the project, as well as a list of the files revision history. Each change that is made is a “commit”, which is a linked-list relationship, which is then organized into branches that are multiple lines of development. Once changes have been made, you can make a Pull Request, which is a way of submitting contributions to the project. Your team and you will be able to discuss the changes by commenting, testing, and reviewing the open pull test. When a decision has been made, you can then merge the material .

All in all, Git may seem very confusing and difficult to master, but it is a valuable tool to have in the workplace. I promise, you will never be able to Git away from it!

A Guide to Git

Click Here to listen to me talk about Git & Github.

Check out my Channel!

Website Auditing

caitlinnorse — Sun, 14 Feb 2021 22:48:00 +0000

Introduction

When creating a website, it is important to make sure you create something of value. It needs to perform well, look good, and be accessible to as many people as possible. It doesn’t hurt if it is also popular and comes up as one of the top results on search engines.

In order to ensure a website is up to par, performing an audit on it can be very help. Audits evaluate the visibility of your website on a search engine based on certain criteria which may include how effective or accessible it is, how well it performs, evaluating the best practices, evaluating the SEO, and more. This is useful for creating a website that will outperform others like it.

Web.dev and Wave

Two popular auditing websites are Web.dev and Wave. Web.dev gives you scores on the Performance, Accessibility, Best Practices, and SEO of a website. It allows users to input the website link, and then evaluates it. Wave goes a little more in depth, evaluating specific aspects of the webpage and giving feedback.

Evaluating The Blue Band Webpage

Using these websites, I decided to evaluate the Blue Band official webpage. The Blue Band website is a crucial tool for recruiting new members. I am aware that it is a little outdated, as the videos posted on the website were recorded at least 4 years ago. I wanted to evaluate the website to see if there was anything that could be improved upon so that the Blue Band could have the best possible web page for recruiting new members.

What is SEO

Something I do not know much about is SEO. According to moz.com, “SEO stands for Search Engine Optimization, which is the practice of increasing the quantity and quality of traffic to your website through organic search engine results.”

Meta Description

When entering the Blue Bands website into Web.dev, it scored a fairly high SEO score (80), but still came back with some errors. The first error that was presented was that the “Document does not have a meta description”. This means that there is either no page description included, or the meta description field is left empty. This can be an issue, because having these descriptions makes the page easier to find when searching.

A way to fix this error would be adding a description. It is fairly easy to add the description to the web page using HTML. The most effective descriptions are clear, concise, and specific. Make sure that the description is unique, and try to stay away from too vague of words, for this could mark the web page as spam.

Link Crawlability

Another SEO issue that was reported was “Links are not crawlable”. Web crawling is where automated programs called “bots” browse the web to index web pages by the content they contain. This index allows that page to be found by users. The crawlability is its accessibility according to these “bots”.

There are a few ways to improve a websites crawlability. Some of it is by fixing the web pages meta tags. There may be issues within the page that limit the bots crawling capabilities. There may be issues with Meta tags or robots.txt, Internal broken links, Server related Problems, Issues with Sitemap XML, Mistakes with Website Architecture, or Outdated technologies in Web-Design.
The issue that is most likely causing this error on the Blue Band page is that there is an internal absent link. Using the Wave audit website, I was able to see that there is an empty link present on this website which is interrupting the web crawling process. Broken or empty links waste search bots time, which will prevent it from reaching the quality and relevant pages. To fix this, remove or change the empty link from the web page.

Target Sizing

The last SEO issue that was presented on Web.dev is “Tap targets are not sized appropriately”. According to Web.dev, tap targets are the “areas of a web page that users on touch devices can interact with. Buttons, links, and form elements all have tap targets.” Search engines rank pages based on how mobile friendly they are, so making sure tap targets are big and far enough apart is what will help pages become more mobile friendly.

In order to fix this for the Blue Band page, the icons will most likely need to be made bigger. When trying to access this page on a mobile device, it is difficult to navigate. A big popup window immediately opens, and it is difficult to hit the x to close the window on a mobile device.

Click Here to see me demonstrating how to use Web.dev and Wave.

Below are some links I used to understand what these terms mean!
Crawlability
Targets
What is SEO
Meta Description

Vue Basics

caitlinnorse — Thu, 11 Feb 2021 01:55:27 +0000

JavaScript is hard and makes me sad. Unfortunately, it is one of those languages that takes an incredibly long time to master, and time is something I barely have as a 20-something college student. BUT, I did manage to scrape by with the most basic understanding of how to create a Vue component that could interact with HTML and CSS.

Vue is a JavaScript library, and is described on their website, is a “progressive framework for building user interfaces”. It assists with front end development in web-based user applications. It is flexible because it can interface with many other JavaScript frameworks or libraries, which allows users to write powerful and diverse web applications. Vue interfaces with by using Vue field variables between curly braces {{variable}} and replacing those variables with the corresponding data from the Vue component.

For this project, I updated my resume to include a Vue component that would display the top bar of information. My goal was for the Vue component to provide all the dynamic data such as my name, picture, and links to my Codepen and YouTube channel. By creating a Vue component, the HTML can be modified without regard to the data, meaning it is easily adaptable. My thinking was, if someone wanted to design my heading differently, as long as they used the same variables that are in my Vue component they could make it their own. An example would be if you are getting the data from a database, the Vue component could gather all of the data and feed it to the HTML and CSS to display.

If you want to check out the page I made, Click Here!
If you want to check out the YouTube video I made on Vue, Click Here!

Nice to Meet You!

caitlinnorse — Mon, 25 Jan 2021 04:02:59 +0000

Hello, and welcome to this technological journey we are about to embark on!

A Little Bit About Me

My name is Caitlin Norse, and I am a Senior (going on Super Senior) in the IST Design & Development major at THE Pennsylvania State University. I am the product of two Computer Scientists that fell in love and taught their kids to fall in love with technology. I currently reside in Bucks County, Pennsylvania, and I spend most of my time watching trashy reality TV and painting silly pictures. When I am back at school, I spend a lot of my time marching around with my friends in the Penn State Blue Band! I play the most random instrument there is, and I can almost guarantee you have never heard of. (It’s called a mellophone so don’t ask me what it is, just look it up.)

Where I Am

It was a long journey to get where I am today, filled with many tears and luckily a few good decisions. While embarking on my Penn State journey, I was originally a member of the “Undecided” club. I knew I would have to decide on what I wanted to do for the rest of my life, but that was a decision that I would postpone for as long as I could. Eventually, I set my sights on the IST Data Science major and pursued that track. I soon realized that this major was chock-full of calculus terms that were way beyond my comprehension skills, and I was quickly approaching my senior year with not much to show for it. I spoke to many advisors about what I should do, (including my advisors’ advisor,) and it seemed that I could struggle through another two years of Data Science courses I could not afford to fail, or I could change my major. While examining my experience in the courses I had taken, my strengths in programming stood out significantly. Luckily, the courses I had taken thus far allowed me to change my major while also being able to graduate within the next two years.

My Experience so Far

The classes that influenced my decision to pursue another career path included Python and Java courses, while also taking courses in SQL, R, Neo4j, and other database programming languages. I also have some experience in C # which I took in high school. I have experience using invoicing systems as I worked for my fathers’ company for many summers growing up.

Where I'm Headed

For my professional career, I am would like to become a System’s Analyst one day. Though I had to stray from Data Science as a major, I hope to one day come back to Data Analysis, because I find it incredibly complex and intriguing.
Thanks for listening to me pour my heart out! 😊

Check Out My Content!

My YouTube Channel
How to Use MOOC.fi