DEV Community: Arina Nasri

Cypress Testing Framework

Arina Nasri — Sun, 09 Jun 2024 18:40:35 +0000

Cypress is a testing framework for Javascript that allows you to easily create tests for your web application. You're able to test the app directly in the browser, debug issues directly in the browser, and eliminates flaky tests by interacting with your application the same way users do so you can discover bugs before users do.

In this blog, I will discuss how to create tests in your application using Cypress!

Step 1: Download Cypress and Add npm Script
You're going to need to download Cypress using npm install cypress --save-dev and then you can add the script to your package.json file by adding "cy:open": "cypress open".

Step 2: Open Cypress
Then, you can open Cypress from the project root using npx cypress open or npm run cy:open and this will open the cypress launchpad. If its your first time using Cypress, you will see a page like so

Step 3: Decide between E2E testing or Component testing
This is where you will decide on whether to use End to End testing or Component testing.

E2E Testing

Great at verifying your app runs as intended from the front end to the back end
Good for making sure your entire app is functioning as a cohesive whole
Testing this way helps ensure your tests and the user's experience are the same

Component Testing

Tests individual components, not the app as a whole
Focus on testing only the component's functionality and not worry about testing the component as part of the larger app
Just because all component tests pass, it does not mean the app is functioning as a whole

The documentation recommends using E2E if you are unsure of which type you want and you can always choose a different type later.

Step 4: Quick Configuration
This will show all of the configuration files being added to your project.

Step 5: Choosing a Browser
You will be presented with a list of compatible browsers Cypress found on your system and you can choose what works best for you. I will be using Chrome.

Step 6: Add a Test File
You are going to click Create new spec

and this will prompt you with choosing the path for your new spec. You can just accept the default path name. Then, you will see that the spec was successfully added and you can just exit out from that. Now that spec will be displayed in your E2E specs and you can click on it to see Cypress launch it.

Step 7: Write a test
Depending on if your test passes or fails, Cypress will update like so

or like so

The tests reload in real time so once you create a test, you should see it pass or fail in real time. Tests in Cypress use describe and it from Mocha and expect from Chai which are popular frameworks that many people have used before, making it very accessible and easy to use. They also have an ESLint plugin for projects that use Cypress https://github.com/cypress-io/eslint-plugin-cypress

Step 8: How to Write a Good Test
To write a good test, you should cover 3 things: set up the application state, take an action, and make an assertion about the resulting application state. First put the app into a specific state, then take some action in the app that causes it to change, and finally check the resulting app state. A rule of thumb with writing tests is to write clear test descriptions, avoid unnecessary repetition in tests, and to structure tests in a readable and maintainable way.

Step 9: Debugging
With Cypress, the test code runs in the same loop as your app so you have access to the code running on the page, as well as the things the browser makes available to you. Cypress makes debugging easy by using the .debug() method like so

Then, you're able to use the Developer Tools to get a view of what is going on

You can also use .pause() to run the test command by command.

And that's it! The best way to learn is by doing and the Cypress documentation is a really good and easy tool to use to put testing into action! Happy testing!

Sources
https://www.cypress.io/
https://docs.cypress.io/guides/overview/why-cypress
https://docs.cypress.io/guides/getting-started/opening-the-app
https://docs.cypress.io/guides/core-concepts/testing-types#What-is-E2E-Testing
https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test
https://docs.cypress.io/guides/guides/debugging

How to deploy an AWS EC2 Instance

Arina Nasri — Sun, 26 May 2024 19:56:11 +0000

While building your applications as a software developer, an important step in the process is to deploy your app for the world to see. If you have never done it before, it can seem very scary and daunting so this blog is meant to serve as a How To tutorial as well as educate on what specific terminology means when you go to deploy. There are many different deployment services, but for this blog, I will be focusing on deploying an EC2 instance on AWS.

What is Amazon EC2?
Amazon EC2 is a web service provided by AWS where users can rent virtual computers to run their own applications. When launching an EC2 instance (which is basically just a server), the instance is within an Availability Zone in the region. The instance is secured with a security group which is just a virtual firewall that controls traffic on your deployment. Then, a private key is stored on your local computer and a public key is stored on your instance. This key pair is used to verify the identity of the user.

How Do I Do All Of This?
STEP 1
Navigate to this link https://aws.amazon.com/pm/ec2-amd/?gclid=Cj0KCQjwmMayBhDuARIsAM9HM8fECNLSOTLaAhm8LO-C2FZOAD-P1EM_HVdhW0oIU57xQXfKCTZO91oaAvNOEALw_wcB&trk=dfddd7d7-36f1-4ece-bbba-bddb99e3d295&sc_channel=ps&ef_id=Cj0KCQjwmMayBhDuARIsAM9HM8fECNLSOTLaAhm8LO-C2FZOAD-P1EM_HVdhW0oIU57xQXfKCTZO91oaAvNOEALw_wcB:G:s&s_kwcid=AL!4422!3!651751059243!e!!g!!amazon%20web%20server!19852662164!145019249497 and click Sign In to the Console on the top right

STEP 2
Once logged in, you will be greeted with the home page. On the top right corner you will see a drop down bar with specific locations, like so

Here, you will be clicking on a region where the instance will be deployed. This is when the availability zones come into play because AWS has these zones (essentially data centers) located around the world. You can pick a region based on where your users will be located or a region that has the compliance requirements you seek.

STEP 3
Now, you can use the search bar to search EC2 and once you click that, you will be greeted with this page

The resources tab is where you can see all the different features EC2 provides. Instances is the virtual server you will create, dedicated hosts is a physical server for your own use, load balancers is used to distribute your application/network traffic across multiple targets, security groups are the virtual firewalls for your instance, volumes provide storage for data that ie needed even if an instance is terminated, auto scaling groups adjust the number of EC2 instances in response to changes in demand, elastic IPs are static IPv4 addresses that can be associated with EC2 instances, key pairs are the public and private keys used to secure your instance, placement groups control the placement of instances in the AWS Cloud to meet requirements, and snapshots are backups of EBS volumes. For our purpose, we will be clicking the orange Launch Instance button.

STEP 4
Now we are launching an instance.

First you must input a name for your instance.
Then, you pick which AMI you'd like to use. AMI is a template that contains the software configuration required to launch an instance. There are a lot of them, but I personally use Ubuntu.
Then you pick the specific tier you'd like to use. This is where you would find an AMI that fits the needs of your specific application and for my purposes, the given free tier is fine for me.
Then you must pick an instance type that meets your computing, memory, networking, or storage needs. If you're creating a large application that will require a lot of data to be held in storage and/or lots of traffic, you may need to pick an instance type with larger memory and a higher vCPU. Again, for my purpose, a t2.micro is fine.
Then, you pick a key pair. If you hadn't made one prior to launching the instance, thats fine and you can just click create new key pair.
Then we deal with network settings. You should create a new security group. There are 3 options: Allow SSH traffic from, Allow HTTPS traffic from the internet, and allow HTTP traffic from the internet. Allow SSH traffic from helps connect to your instance. SSH is a protocol used for secure remote access to a server. It allows for two computers to communicate and share data securely over an unsecured network. This is where you transfer your files through SSH to a remote server. If you click Allow SSH traffic from you can choose between allowing it from anywhere, custom, or my IP. It is best to only allow SSH traffic from IP addresses that need access to the deployment.
Finally, you can scroll to the bottom and click Launch Instance.

STEP 5
Now you're able to navigate to your instances through the resources view.

You'll need to click Instances and then click on your instance's Instance ID link. Once you do that, this will give you all the information about your instance. While in here, take note of the Public IPv4 address and the Public IPv4 DNS address. These will be important later.

For now, you're going to want to click on security, then the security groups link. This is where you can edit the inbound rules of your instance. These are the settings that control the incoming traffic to your instance. They specify the protocol, port range, and the source of the traffic. One rule should already be there from when you initially created the instance, and you can add a rule to allow traffic from the port you used in your application.

STEP 6 (if you use google authentication, if not just skip)
You are going to need to navigate to Google Cloud and go to APIs and Services and create a new credential for OAuth 2.0 Client IDs. Here, you will link your Public IPv4 DNS link with the specific port you used and the endpoint like so

STEP 7
Now we can finally work in the terminal. For reference, I use a Macbook Air and specifically work with iTerm and VIM. Also, since my instance is Ubuntu that will be reflected in the terminal.
Remember that .pem file we downloaded that holds our key? We are going to move that to a more secure space in our local computer. For me, I put it in my .ssh file.

Move your key: mv path-to-key ~/.ssh (for example, if your key is called Healthier and its currently in your downloads folder, you're going to type mv Downloads/Healthier.pem ~/.ssh)
Cd into .ssh and run ls -a to check and see if the key is there
Cd out of .ssh and now we are going to need to set the permission of the file to be read-only for the owner. To do this, you are going to do chmod 400 ~/.ssh/key. This means that the owner has read access to the private key file, and no one else can access it
Finally we can ssh into our instance
The command to run is ssh -i ~/.ssh/keyname.pem ubuntu@ec2address since we know our key is in the .ssh file and ubuntu is the root user for our instance because that is what we originally chose. Your ec2 address can be found in the Public IPv4 address in your instance
Once you are ssh'd in, you can run any install/file setup steps necessary for your project and then navigate to your instance's link

Deploying your application is a great way to show your colleagues/friends the application you have been working on. There are many different deployment options but Amazon's EC2 service is the easiest for me to navigate. Happy deploying!

Sources
https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/concepts.html
https://docs.aws.amazon.com/ec2/

In Depth on CSS

Arina Nasri — Sun, 21 Apr 2024 18:18:29 +0000

When I decided to learn how to code I had two goals in mind: learn enough about Javascript where I can work a high-wage job to support myself and my family and to make a super cute Tumblr page that will make 15 year old me proud. I am well on my way to accomplishing the first goal, but after going forward with Operation Spark, I have learned that in order to make a super cute Tumblr page, I need to become an expert in CSS.

What is CSS?
CSS stands for Cascading Style Sheets and ir describes how HTML elements are to be displayed on screen, paper, or in other media. It is essentially what gives a web-browser pizazz.

CSS Syntax
In order to implement CSS, you would follow this syntax.

P is a selector in CSS, it points to the HTML element you want to style. Color/Font-size is a property and blue/12px is its value. Elements with an id are referred to as id name {} and elements with a class are referred to as .class name {}. To edit every HTML element you can just do * {}.

How to Add CSS
Externally
This is an external style sheet where you make an individual file to deal with all CSS styling and should be saved with a .css extension. Then you must import the file into your HTML file.

Internally
This is when you edit the HTML page with completely by adding in a style tag to your HTML file and inputting whatever style you want.

Inline
This is used to apply a style for a single element and to do this, you must input a style attribute to a specific element you would like to change.

What Can You Do with CSS?
Color

Change background color using background-color: (color)
Change text color using style="color: (color)" in the text elementC
Change border color using border: (#px solid color)
Colors can be specified by using RGB values, HEX values, HSL values, RGBA values, and HSLA values

Background

Change background color using background-color and can also change opacity by adding opacity after
Change background image using background-image
Can make the background image repeat by using background-repeat: repeat-x or make it not repeat using background-repeat: no-repeat
Background-attachment which specified whether the background image should scroll or not scroll with the rest of the page (scroll, fixed)

Border

Border-style property specifies what kind of border to display
Border-style: dotted
Border-style: dashed
Border-style: solid
Border-style: double
Border-style: groove
Border-style: ridge
Border-style: inset
Border-style: outset
Border-style: none
Border-style: hidden

Can define the width of the border using border-width: #px
Can define rounded borders by using border-radius: #px

Padding

Can define the padding of each side of an element using padding-top, padding-right, padding-bottom, padding-left and making the value be #px
Can also do short hand by doing padding: 25px 50px 75px 100px
The first value will be the top, second the right, third the bottom, and fourth the left

Height, Width, Max-width

Height and width have the following values:
Auto which is default
Length which defined the height/width in px, cm, etc
% which defined the height/width in percent of the containing block
Initial which sets the height/width to its default value
Inherit which makes the height/width inherit from its parent value

Text

Text alignment is implemented by using text-align and one of the following values: center, left, right, justify
You can also decorate a text by using:
text-decoration-line and the values overline, line-through, underline, overline underline
text-decoration-color and the value being some color
text-decoration-style and the values being the same as border-style above
text-decoration-thickness and the values being auto, #px, or a %
text-decoration being a shorthand property to add line, color, style, and thickness all in one line
Text-transform is used to specify uppercase, capitalization, and lowercase in a text
Text spacing can be used by:
Text-indent: #px
Letter-spacing: #px
Line-height: some decimal
Word spacing: #px
You can also select certain fonts for the text by adding font-family

There is so much more than this to explore within CSS, but this is the in-depth for the basics! If you're interested in exploring more, W3Schools has amazing modules on the subject.

Sources
https://www.w3schools.com/css/css_intro.asp
https://developer.mozilla.org/en-US/docs/Web/CSS

Mac Keyboard Shortcuts Every Developer Should Know

Arina Nasri — Sat, 13 Apr 2024 20:51:18 +0000

While doing pair work in class, time and time again my partner will be like "Arina, you know there's a keyboard shortcut for that, right?" and no, I did not know there was a keyboard shortcut for that, but I wish I did because why did I just scroll through 300 lines of code in order to highlight it when I could've just used command-a?

Keyboard shortcuts are essential in time efficiency and having them memorized can really make coding a whole lot easier. If you're anything like me and are uneducated about what keyboard shortcuts are most helpful while coding, this article is for you!

What keys should you be familiar with?
On mac, the keys that are used in every shortcut includes a combo of one or multiple of these + a letter of some sort.
Command (or Cmd) ⌘
Shift ⇧
Option (or Alt) ⌥
Control (or Ctrl) ⌃
Caps Lock ⇪
Fn

Common Shortcuts Everyone Should Know
Command-X: Cuts out the selected item
Command-C: Copies the item
Command-V: Pastes the item
Command-Z: Undo (which is really important if you're typo-prone like me)
Shift-Command-Z: Redo, reverses the undo command
Command-A: Select all items
Command-F: Find items in document
Command-G: Used after command-f to find the next item that matches it if there are multiple
Command-H: Hide the window you are currently on
If you want to hide all other windows besides the one you're on, use Option-Command-H
Command-M: Minimize window to the dock
If you want to minimize all windows, use Option-Command-M
Command-S: Saves current document (Super important if you're not using autosave on your coding application!!)
Command-T: Open a new tab
Command-W: Close the tab you're on
If you want to close all tabs, use Option-Window-T
Option-Command-Esc: Force quit an app
Control-Command-F: Makes the app full screen

Navigating Apps
Command-Tab: Switches to the next most recently used app among your open apps
Control-Tab: Move forward through tabs
Control-Shift-Tab: Move backward through tabs

Text Navigation Shortcuts
Command-Left Arrow: Jump to beginning of a line
Command-Right Arrow: Jump to end of a line
Option-Left Arrow: Jump to beginning of current word
Option-Right Arrow: Jump to end of current word
Command-Up Arrow: Jump to beginning of all text
Command-Down Arrow: Jump to end of all text
Adding shift to any of these also allows you to highlight said text

VSCode Specific Shortcuts That Saved My Life
Option-Z: If you use split screen on VSCode with another app, this will wrap the text so that you can read every line of code without needing to scroll
Control-Shift-P: Opens up command palette
Control-Alt-Up/Down Arrow: Multiple cursors
Control-Shift-K: Delete a line
Shift-Alt-Up/Down Arrow: Creates a copy of the current line up or down the current line
Control-B: Opens up sidebar
Control-P: Search file
Control-`: Toggles terminal

Hopefully these shortcuts help you in your coding journey!

Sources
https://support.apple.com/en-us/HT201236
https://www.elementalidad.com/2017-11-06-keyboard-shortcuts
https://www.xda-developers.com/keyboard-shortcuts-mac/
https://www.wearedevelopers.com/magazine/vs-code-shortcuts

What is UI/UX and what makes a good UI/UX?

Arina Nasri — Fri, 05 Apr 2024 00:52:54 +0000

While texting a good friend the other day, I was telling her about what it was like being in a coding bootcamp and she started asking me many different questions. One of those questions was about UI and UX and the difference between the two, and honestly, I came to a blank. After this conversation, I realized I don't even know what UI/UX is.

So what is UI and UX? Is it the same thing? My research points to no.

UI is a shortened term for user interface. UI is the point of human-computer interaction and communication in a device a.k.a, it's display screens, keyboards, mouse, and the appearance of a desktop. It is also the way a user interacts with an application or a website. (Churchville).

Let's take a look at the UI of the tumblr page I created when I was 15. As you can see, the page has a title, a home button, a message button, an archive button, and a theme button. Then on the bottom, it shows all the posts I have on my page. When a user looks at the page, they are able to click on a button and it should take them to what that button represents.

So for example, if the user clicks message, they can now send me a message (yay) and if they click home, it'll take them back to the home page with all the posts. My tumblr contains a very basic example of UI, however it does show an example of UI thats easily accessible and visually appealing (I hope). Any user on the site would know exactly what pressing home, message, archive, and theme would entail with little difficulty.

The important aspects of UI would include its navigation and layout, input and output controls, feedback mechanisms, visual design, accessibility considerations, error handling and recovery, consistency standards, and personalization and customization. Navigation and layout includes helping users move throughout the app or website without any complexity. Input and output controls deal with getting data from the user through an input and outputting it through the output device. Feedback mechanisms is similar to receiving confirmation messages when buying something online. Visual design and accessibility considerations is just as it states. Error handling and recovery is like "incorrect password" if someone enters one and consistency standards is keeping the same sort of layout throughout the application or website, such as having send, submit, and next buttons on every page. Finally, personalization and customization is the ability to personalize the UI to fit every user's needs and wants. (Collins).

Furthermore, what makes a good UI? According to Tom Collins, these are the main components.

Keep your UI simple to use
Every element should be obvious and discoverable
Elements should perform as per the expectations
Use proper alignment for elements
Save your users' time by minimizing the number of tasks in every action but focusing on the main function
Provide a help menu
Always provide the next step

UI is an extremely important aspect of being a software developer. If you work for any company, you're going to have to incorporate UI into your application or website if you need to make one, and it is best practice to implement all of the aspects listed above.

UX is a shortened term for user experience. Essentially, it refers to the feelings users experience when using a product, application, system, or service. It can encompass anything between how well the user can navigate the product, how easy it is to use, and more. (ProductPlan).

The differences between UI and UX is that UI is what the users sees and how they interact with the product, whereas UX is more broad and is more dependent on what the user does related to the product. (ProductPlan).

However, UI and UX do work hand in hand. You could have a UI that is very advanced and implements so many new cool features, but if the features aren't what the user wants or are too complicated to use, the user's experience will be negative and make them less likely to use or interact with the app. The same goes the other way; if the user finds an application or website that is visually appealing or is exactly the kind of app or site they want, but it is too hard to navigate or the buttons don't work, they won't use the application or website.

In conclusion, the best sort of application or website is one that uses UI properly, while also taking UX into account. it is important to know the differences between the two so that when making an application or website, you make it be the best it can be so more users become likely to use it.

Sources:
Fred Churchville https://www.techtarget.com/searchapparchitecture/definition/user-interface-UI
Tom Collins https://www.browserstack.com/guide/what-is-user-interface
ProductPlan https://www.productplan.com/glossary/user-experience/

Javascript Variables

Arina Nasri — Tue, 27 Feb 2024 01:18:28 +0000

Variables are named containers for data in Javascript. With variables, we are able to store values in memory and then enact specific actions on those values whenever necessary. Variables are able to hold simple and complex data types.

We create variables using declarative keywords. The declarative keywords include key, let, and const. You create the variable by first typing out one of the declarative keywords and then whatever you'd like to call your variable. To assign it, you then type an equal sign(=) and set it to whatever data type you'd like.

Each variable name is case sensitive meaning lastname and lastName would be different so when you refer to the variable later, make sure to refer to it properly. All variable names should be written in camelCase so lastName is proper notation whereas lastname is not.

Var, let, and const are the three declarative keywords. When Javascript was first created, the only way to create variables was by using var, however, var was error-prone, specifically when it came to hoisting and being scoped to specific blocks of code. Due to this, let and const were made.

Var and let are reassignable, but const is not.

Let and const can not be hoisted. Hoisting refers to the process where the interpreter appears to move the declaration of functions, variables, classes, or imports to the top of their scope, prior to execution of the code (MDN Web Docs). With var, you can reference the value before it is declared, but you can't do that with let and const. Only the variable name is hoisted to the top and not their assignment. Variables only get hoisted inside their own scope.

Var is not scoped to if blocks or loop blocks, but let and const are scoped to both.

To summarize, variables are named containers for data in Javascript and an essential to master when coding. Variables can hold simple or complex data types and must be written in camelCase. The three declarative keywords for variables are var, let, and const. Var is reassignable, but is not scoped to if blocks or loop blocks. Let is reassignable and scoped to if blocks and loop blocks, but it is not hoisted. Const is not reassignable or hoisted, but it is scoped to if blocks and loop blocks.

References:
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting