DEV Community: Alexandra

JS30 Days 11- 14

Alexandra — Sat, 19 Jun 2021 21:00:04 +0000

This post is a few days late because I had a bit of a setback this week. My apartment lost power and internet for a couple of days, everything is fixed now but it was definitely stressful to deal with.

Day 11 - Custom HTML5 Video Player 📀

GitHub
The versaitlity of event listeners is amazing. I was suprised that with a few choice event listeners and functions that most of the functionality of a video player can be created. I had thought that this one would be way more complicated than it was. I think my favorite function created in this app was handleProgress() for updating the progress bar while the video was playing.

Day 12 - KOANMI Code, Key Sequence Detection

GitHub
KONAMI code is when someone inputs a sequence of keys and then it causes something to happen like an easter egg on a site. To make that happen there needs to be key sequence detection on an input/the window/etc for that secret key to be heard. I like that this exercise gave some more pracitce with using .splice() on an array and I loved that there is such a thing as cornify_add(). The creativity of fellow developers is always amazing to me.

Day 13 - Slide in on Scroll

GitHub
This was a little more complicated than I expected. This one created a page where images were hidden and would slide into the frame and become visible on scroll. Since the event listener was on scroll, a debounce function was used. The debounce function is available in many languages and it limits the rate that a function will fire at. So it will only run the function we need through debounce by the designated amount of time given which makes for a smoother running and more efficient application.

Day 14 -

GitHub
This exercise was all about Object and Arrays and making a reference vs. a copy and how they can be manipulated. If you make a reference to an array and update that array it will edit the original array as well because it is an array reference and not an array copy. So they both are pointing to the same array. To fix this a copy needs to be made instead. There are a few techniques to do this. You could .slice() to make a copy of an array. You can also create a new array and concat the old one or even use the ES6 spread operator. When those new copies of arrays are created and updated, the original one is not changed. This also applies to objects.

JS30 Days 6-10

Alexandra — Wed, 09 Jun 2021 22:45:53 +0000

Day 6 - Ajax Type Ahead

GitHub
Today's exercise created a search feature. It used an external json source for the fetched data and then the data was filtered through for this project. After creating an empty array, the data was fetched and then pushed into the array. A few functions were built out that filtered that array and event listeners were added to grab what was typed into the search bar. This was a fun exercise which used RegEx which is something I am still learning about. It put a variable in a regular expression and I did not know that there were flags you could use like 'g' for global and 'i' for insensitive, so it can pick up both upper and lower case. I also learned the importance of getting data and functionality first before hooking it up to event listeners. All in all a fun little project to build out!

Day 7 - Array Cardio Part 2 🏋️‍♀️

GitHub
This was a quick exercise that went over the array methods .some, .every, .find, and .findIndex. I had not worked too much with .some or .every before so I definitely learned something new today! .some() checks if at least one element in an array passes the text provided by the function and will return true or false based on if the element is there or not. This does not modify the array. .every() returns a boolean if all elements in the array pass the function's test.

Day 8 - HTML5 Canvas 👩‍🎨🎨

GitHub
My favorite exercise so far! Using vanilla JavaScript you create an in browser canvas to doodle on.

Creating a canvas with .getContext was something that I had never done before and I definitely want to do more in depth research on the different aspects of it. This exercise also used event listeners and functions to listen for the events needed to draw onto the created canvas' x and y axis. This exercise also utilized mothereffinghsl to get the color gradiant hue for our drawn line working in conjunction with the event listeners.

Day 9 - DevTools Tricks

GitHub

Loved this overview. I learned a few things about DevTools that I did not know before as well as all the varieties of console. that can be used. I had mostly used console.log() and console.dir() before and was surprised at just how many there are and the variety of ways they can be used! I feel like I've been missing out not knowing about console.table()!!

Day 10 - Hold Shift and Check Checkboxes ✅

GitHub

This exercise worked with checkboxes and using the shift key to be able to select multiple checkboxes at a time. This was done by programmatically setting the boxes to checked with JavaScript until you click the last one. Until the last one clicked is selected, our flag variable gets set to false which makes this functionality work both when selecting from the bottom to the top top or vice versa, by setting the variable equal to this or to lastChecked. The variable is declared with the let keyword because it is a variable that can change.

#JavaScript30

Alexandra — Fri, 04 Jun 2021 01:39:38 +0000

I have to admit, when we were doing the JavaScript module in bootcamp it was tough. Half of the time I had no idea what was going on, we had just learned Ruby and Ruby on Rails and making the transition to learning JavaScript felt like such a 180. When I feel like I'm not good at something my reaction isn't to avoid it, I want to master it out of spite! Since practice makes perfect I decided to take on #JavaScript30.

I will be blogging about the challenge but making an individual post per day is a bit excessive to me so the plan is to do 5 days per post.

You can check out this GitHub repo for my code! Each day will be uploaded into it's own file.

Day 1 - JavaScript Drum Kit 🥁

GitHub
The first day of #JavaScript30 is making a fun browser-based drum kit that is triggered by keystrokes. This is accomplished by correlating the key on your keyboard with a data-key which uses data atrributes to hook up the audio and the CSS for the 'playing' animation. Wes Bos has a great resource keycode.info which gives you the number associated with each key on your keyboard.

In this exercise I learned about data-* attributes and transition events, as well as the important reminder that when you have an array of events you can't listen on all of them at the same time. You have to exclusively loop over every element and attach an event listener.

To customize this project I swapped out the provided background image with a 35mm photo I took at Jay Pritzker Pavillion in Millenium Park a few years ago.

Day 2 - Clock 🕐

GitHub

This was a fun exercise that combined CSS and JavaScript to create a working clock. I learned about transform and transition in CSS, which I have never really worked with before, and used them in conjunction with JavaScript. A quick simple exercise before I went to a Memorial Day BBQ!

Day 3 - CSS Variables and JavaScript

GitHub

Ok definitely learned some things about CSS and how to manipulate it with JS today plus some more about data-* attributes. Like how you can just set them to pretty much anything and how the dataset is an object that will contain all of the data attributes from that specific element. It takes everything that has data-* on that element and puts it into an object for you, super cool!

Day 4 - Array Cardio Day 1

GitHub

Whew! This was a fun challenge. I definitely needed the practice working with arrays and am glad this is a part of the series. During bootcamp we did get a lot of practice with map and filter but I had not done a lot of work with reduce before. It is so useful! This exercise also had some great practice with ternaries which are my favorite!

Day 5 - Flex Panel Image Gallery

GitHub

I loved this one! I had been meaning to learn more about flex in CSS and this was a great exercise. Wes Bos really makes it look so easy. One thing I learned was that an element in CSS can be both a flex item and a flex container. I also really like how this exercised combined CSS and JavaScript to create a dynamic site! I customized mine with Polaroid images I took on a trip to California a few years ago.

I'm really glad I took on #JavaScript30! The videos are fun and easy to follow along with and have clear direction. I'll be posting again in 5 days about the next five parts of the challenge.

Bootcamp Reflection

Alexandra — Sat, 22 May 2021 22:41:52 +0000

It's been a week since I graduated from Flatiron School's Software Engineering program. It feels a little surreal to be a week free of lectures, projects, and meeting up with cohort-mates.

Getting into bootcamp and embarking on this track was a little unexpected. I had not worked since March 2020 when bars and restaurants in Chicago were shut down at the start of the pandemic. I spent the next few months just waiting to see what would happen and if or when I would get my jobs back. Late in the summer my friend James told me he was looking into coding bootcamps and suggested I do one with him, he said that Flatiron had the best one according to Career Karma. "Don't you have to be good at math?" I asked. He sent me a couple of articles that said you did not have to be good at math to code. Great! The only math I was good at was calculating tip percentages.

I decided to go for it.

I applied to Flatiron, started the pre-pre-work, and applied to one of their scholarship programs. My friend James ended up not applying but I got through the interview process and even ended up getting a full ride scholarship to the program with the Cognizant U.S. Foundation NexTech 100 Scholarship.

I was floored. One of the top coding bootcamps with only a 6% acceptance rate not only admitted me but I was able to get a scholarship that covered the cost of the entire program!! It was huge, this is when I started to think maybe I am cut out for this and I knew if I just worked hard I could radically change my life.

This all went down in late October. The next step was to complete the course's pre-work. I found the pre-work fun. I loved learning more about programming, writing code, and getting it to work. Finding solutions is so satisfying to me. It was here that I really found my stride and felt like I made a great decision to do this.

I completed the pre-work before the end of the year and was slated to start in January, however there was a bit of a mix up and I was switched to the February 1st start date. The extra two weeks to prepare myself before starting the program were helpful, though I do wish I spent them practicing more and reading more instead of goofing off, watching Dawson's Creek, and relaxing. Maybe the rest was necessary though because the next 15 weeks ended up being intense!

First day of class I was pretty nervous. It was more than 10 years since I graduated from college so a while since I had been in a classroom setting. On top of that, it was almost a year into the pandemic and outside of my partner and the couple of people in our "quarentine bubble" I had not really seen or spoken to anyone and I was nervous about having to talk and interact with people I had never met before. That first week was a bit of a whirlwind getting into the swing of things as well as the deluge of information we learned every day. I had to re-learn how to manage my time to stay on top of labs and study. I also had to re-learn how to study too. It was a bit of a steep curve. And then the stress of the code challenge in the second week! The third week was less stressful as it focused on the project for that phase. I got to interact more in depth with my project partners too.

One of the things I wish I had done sooner was make friends and reach out to my fellow classmates. We were all going through the same thing and until I actually started talking to them I didn't realize that they were just as stressed and overwhelmed as I was. That is probably my #1 tip to anyone going through a similar experience, is to reach out and make friends with your classmates.

The rest of the program followed a similar pattern. Tons of info in week one! Code challenge stress week two! Fun project to test your skills with classmates in week three! By the end of the second phase I learned to ✨trust the process✨ That it was okay to be a little overwhelmed with all the new information in the first week of a phase but that by the time the code challenged rolled around if you had studied hard and practiced enough you'd have the aptitude to succeed. My #2 tip at this point would be to not fall behind in doing the work and, if possible, try to read ahead so that the lecture material isn't totally unfamiliar.

Time definitely moved differently in the program. It was simultaniously speeding by but also dragging. Looking back at Phase 2 from Phase 4 it felt like months had passed. Those 15 weeks felt like a year but each week seemed to happen in the blink of an eye. I am really glad to have been able to have had this experience, I definitely learned a lot. I went from having very minimal exposure to coding, just a little bit of html knowledge from my LiveJournal days, to being able to build out a fully fleshed web application on my own.

A major lesson I learned as well was that those 15 weeks were just the tip of the iceberg. There is so much more to learn and explore and I'm excited about what is to come. Even though the program is over, I have a lot more work to do to keep growing as a developer but that feels less overwhelming than it could be because Flatiron gave me the tools to succeed.

A week out of the program, so what's next? Other than diving head on into the job hunt, I plan on tackling Wes Bos' #JavaScript30 challenge and blogging about it. I want to strengthen my JavaScript fundamentals because that was one part of the program I really struggled with so I would like to master it. I also picked up a few books that I want to read and review as well. I am also deciding if I want to teach myself Python or Java next, let me know which path you think would be best in the comments below!

I would love to hear from other bootcamp grads on your experiences as well as finding work after graduation! Feel free to connect with me on LinkedIn as well.

Before I started down this path I was feeling a little stagnant and unsure, but after completing this program the possibilities feel limitless. I'm excited to see where life will take me.

React & State

Alexandra — Wed, 21 Apr 2021 16:51:33 +0000

What do you do when you have dynamic data in React? Use state!

A component's state, unlike its props, can change during the component's life. For a prop to change, its parent would need to send down new props which the component would use to remake itself, taking the new props into consideration. The React Hook, useState gives us a way to maintain and update information in a component without needing the parents to continuously send the dynamic information down to the child components as props.

With React Hooks we can write React applications with only function components.
useState is a function that is imported from React, it's a React Hook, which lets us "hook" into React's internal state inside of our function component. Once imported you can call a hook inside of the component.

Once imported into your component's file, you can call it inside of the function component.

When it is called inside of the function component this now creates a new dynamic state variable that the function has access to. This state variable has an initial value of whatever is passed into useState() when it is called. This can be any primitive value: string, integer, boolean, null, etc. useState also returns an array that contains two things. The first is the current value for the state variable. The second thing that the array contains is a setter function to update the state variable.

The state variable is pretty straightforward, it is what the state is. This variable can change, their value can be updated, due to the setter function. The setter function just sets or updates the state. To do this, to update the state, you call the setter function. This function also re-renders the component. When it does, it tells React to call that function again and figure out what changed and what to return based on the new state.

useState Step-By-Step Recap:

Import the useState hook:
Set up the initial state, use the same naming convention for variable and setter function.
- ex: [state, setState] or [banana, setBanana] or [fooBar, setFooBar], etc you get the idea.
Use the state variable in the component.
Call the setter function to update the state.

An Example

Here, when the button element is clicked, it runs the increment function. This calls on the setCount function to update the count variable by one and re-render the component.

When a site is loaded, the initial render is the ReactDOM.render(), which builds all of the initial JSX by calling all components once. Then when the state is updated in a component somewhere in the application, the setState function of useState re-renders that component and any of its child components with the new state. And then each and every time that state is modified React automatically re-renders the component and its child components and updates the DOM based on these new values.

State is only for the values that are expected to change, the dynamic values, during the component's life. So only use it where needed. The more state you have, the more difficult it can be to keep track of all of the changes happening.

So, when to use state?

Three Key Questions to determine state:

Is it passed from a parent via props?
- If so, it's not state!
Can you compute it based on any other state or props in the component?
- Yes? Not state!
Does it remain unchanged over time?
- If so, it is not state!!!

Often, several components need to reflect the same dynamic data so the state needs to be lifted to their closest common parent and then passed down to the children as a prop.

When working with arrays and updating state never mutate the array! It's best to make copies of them because React will only re-render the component when we set state with a new value. This means that a copy needs to be made of the original array to pass the setter function instead of mutating the original array directly and passing a reference to the original array. Also, be sure to never mutate state directly.

Need to add to an array? Use the spread operator! You will get a copy of the array with the new value added in.

Do you need to remove something from an array? Use filter! Filter will return a new array based on which elements match the criteria in the callback function.

Do you need to update the array? Map it out! Map will return a new array without mutating the original array!

🔥🔥🔥Hot tip: React Dev Tools(Chrome / Firefox) can look at what the state is for each individual component.

Sources
ReactDocs on State
How to Manage React State with Arrays

JavaScript: Call Me By Your Variable

Alexandra — Thu, 01 Apr 2021 14:24:39 +0000

Variables are an essential component of Javascript, they are containers used to store values which can then be called on and used throughout Javascript programs. JavaScript uses reserved keywords to declare its variables. Up until 2015, the only var was used to declare variables but now there are new and better ways to declare a variable in Javascript! What happened in 2015? It was the finalization of the second major revision to the Javascript language. The update was to make sure that web pages could operate across different web browsers and held several key changes to the language, one of them being the update in variables. This update is called ECMAScript 2015 or ES6.

Back to variables though! A variable must have a unique name, you can assign a value to a variable using the equal (=) operator either when you declare it or before using it depending on which word you use to set the variable. In Javascript you're looking for either var, let, or const before the variable's name.

Three different ways to declare a variable give you a lot of flexibility in Javascript, so what's the difference? And what are the best uses for each case?

First up is var, and it is the worst one to use, you'll make yourself look like a total dinosaur if you implement it in your code (also if you peep any code that's still using it, it is outdated!). Before 2015 it was the first and only way to write a variable. But there is no reason to use var now to declare variables, it is super outdated!
var declarations, wherever they occur, are processed before any code is executed so this causes some problems. There are scope issues - var variables are not block-scoped and there are problems with hoisting, I'll touch on that more later. If you do use var, know that once a variable has been created with var it can be reassigned multiple times!

Do you know which are block-scoped? let and const.
let and const are the new go-to's. Good-bye, var!

With const a variable cannot be redeclared or reassigned
good because we know that that variable will always have the same value and will always point to the same object. Even though the object properties can still be modified it will still point to that object! When you use const, the value must be assigned initially. const is valuable to other devs because they will know what it is referring to everywhere it's referenced in the code. Using const as the default variable keyword is a best practice situation.

Our other variable superstar is let. let is cool because its value can be reassigned. This is helpful and required when using for and while statements in iteration because we are incrementing a counter variable. You cannot use const in these situations because it cannot be reassigned so it cant be used since the counter's value is being reassigned to the variable each time it's being iterated over.

So that's the basics, what else do we need to know?

Variables have naming conventions, they should:

start with a lower case letter
don't use spaces! camelCase them instead
don't use Javscript reserved words
case matters when you call on them

Declaration and assignment can happen in a single line of code or can be declared and then assigned. In order to retrieve a declared variable, you can call it by its name. A key thing to note is that upon declaration, all variables are auto-assigned the value of undefined until a value is assigned.

Do not set a variable to undefined. They are undefined until a value is explicitly set.

A variable can be set without the keywords of const, let, or var keyword.

one = 1;

Those variables without our keywords are always globally scoped regardless of where they sit in the code.

const, let, and var can also be global variables which means that if a variable is not declared inside of a function or block it's in the global scope/global execution context.
Global variables should only be used as a last resort. It is best practice to only make them available where they're needed and nowhere else. If they're used frequently set them as a global variable in order to keep your code from repeating unnecessarily.

So what's up with hoisting? Hoisting variables is something to be aware of. It is Javascript's behavior of moving declarations to the top so, in other words: a variable can be used before it has been declared.

There are two ways to keep the Javascript engine from hoisting variables:

if the current project requires the use of var, declare everything at the top of its scope, if you need to declare a variable in a function: declare it at the top of the function
but also...just don't use var! variables declared with const and let do technically get hoisted but the javascript engine doesn't allow them to be referenced before they've been initialized!

What is the takeaway from this?
DON'T USE VAR!!!

Rule of thumb:

never use var
use let when you know the value of a variable will change
use const for every other variable

Best practice: always declare with const and if you realize the value has to change you can circle back and change it to let from const!

Accessibility...Rules!

Alexandra — Tue, 09 Mar 2021 06:33:36 +0000

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." - Tim Berners-Lee, W3C Director and inventor of the World Wide Web

The web has revolutionized modern life and leveled the playing field, bringing people together. However, equal access does not equate to equity of access. Equality? Equity? What's the difference? An analogy I like to relate the two is that of a bicycle. Say you give everyone the same bicycle. That's equality. However, everyone is different. We're a beautifully varied group of people with different needs so the same bike is not going to fit every person. Kids need kid bikes, some people need small bikes, some people need tall bikes. Some people ride tricycles. Some people peddle with their hands. Some people use a recumbent bike. Everyone gets a bike but that bike suits the individual. That's equity. 🚲💨

More than ever it is so important to create an equitable, accessible, usable, and inclusive user interface. Creating accessibility is not just relegated to the content of a site or app but it is something that we need to tackle on the development level in order to create and design products that are efficient for all users and overall inclusive so that everyone can be involved. This is not just an extra step in your process but the only way we should be coding!

Accessibility makes your site more user-friendly, it provides mainstream accessibility capabilities that can work in tangent with assistive technologies for users. It makes your site or application more adaptive for people with auditory, cognitive, neurological, physical, speech, or visual differences that affect interaction with the web. By utilizing these guiding principles we can address the uneven user experience for people with disabilities so that they may equally access, navigate, and contribute to websites, applications, and their tools.

A few key ways to make your application more accessible:

Alternative Text

ALT text for images describes the image. This is read by screen readers. Providing ALT text has become more popular on social media in recent years with users providing their own descriptive texts for their images to make their pages more inclusive. Alternative text is read by screen readers and should be clear and concise in the description. It is also useful if the user has a slow internet connection so they have a description of the image without needing it to load. If it is an image that is purely decorative then assign it a "null" value

    alt = " "

in the alt text so that the screen reader can gloss over it.

Bonus: ALT text helps with SEO!
* On the flip side provide captions for video/auditory content!

Clear Headers, Links, and Text

Headers: Screen readers are linear and go from top to bottom so it is key to make sure that you structure your pages in a clear and meaningful way. This includes structural headings which describe your page's hierarchy going from H1, to H2, H3, and so on. These are read out to the user as "Heading level one," etc. Headings should also be styled to group content so they are easier to read and understand for the user.
Link texts: should describe what the URL is going to do, avoid creating ones that say "Click here" or "Read more". Assistive software can navigate through links by creating a list of them.
- Tips for creating good links:
  1. Avoid URLS because screen readers will read them out in their entirety to the user.
  2. Use keywords and be concise
  3. Integrate it into the content but make sure it reads well out of the context of the text.
  4. Specify if it is going to download something and what it will be downloading.
  5. Don't be repetitive with links to the same destination.
Contrast is key: Some folx need contrast to distinguish the text from the background. For others, bright colors(high luminance) aren't legible compared to those with a lower luminance. Be mindful of using color to relay information to the user and don't just rely on color perception to differentiate information.

Make use of labels!

Overall a consistent style, naming convention, and layout will help to make a site more user-friendly. Using concise headings and context cues can help users to determine where they are in your application and help with navigation.

Accessibility is important to me because of my own personal experiences with hearing loss. Yet I knew very little about accessibility in the broader sense when I began to research this topic. Some things I knew about, like screen readers and subtitles, but there is so much more to making the web accessible than I can cover in a simple blog post and I am still so new to this!

As I continue to learn, keeping other people's experiences in mind is going to make me a better developer in the end. If you have any tips on making the web/apps more accessible please drop a comment below!

Key sources:

W3C Accessibility Guidelines

How People with Disabilities Use the Web

Ruby Methods Broken Down

Alexandra — Mon, 15 Feb 2021 23:47:59 +0000

Ruby methods are actions and instructions for Ruby objects that are wrapped in def...end keywords. They can be repeatable actions so you don't have to code the same bit over and over, you can apply the method to the class or the instance instead and keep your code friendly and DRY (Don’t Repeat Yourself)!

So what is a class? And what is an instance? Say you have a Vehicle. The vehicle would be the class and the methods would be the parts that define a vehicle: the wheels, steering, fuel, frame. A bicycle can be created by that class so it would be an instance of a vehicle. And since everything in Ruby is an object you can call methods on both the class object and you can call methods on the instance object.

While the syntax is similar, both begin with def and end with...end, they are not interchangeable. Class methods only work when they're called on Classes and instance methods are only good for instances of a class. Mix this up and you'll get slapped with a NoMethodError.

Class methods are recognizable because they're called on the class itself and are denoted with a "." in the method (eg: self.method). They define a function to the class itself and any object generated from that class.

Instances themselves are generated by the class and their instance methods define a function to one instance, or object, of a class.

Ideally, each method deals with one task, so what do you do when you have something more complex to achieve? In comes the helper method. These methods help other methods do their job by taking on a smaller task that is accessible and can be called on in other methods.

Between Class Methods, Instance Methods, and Helper Methods you can code complex problems in Ruby that are easy to understand and free of repetition!

Sources
RailsTips
StackOverflow

DEV Community: Alexandra

JS30 Days 11- 14

Day 11 - Custom HTML5 Video Player 📀

Day 12 - KOANMI Code, Key Sequence Detection

Day 13 - Slide in on Scroll

Day 14 -

JS30 Days 6-10

Day 6 - Ajax Type Ahead

Day 7 - Array Cardio Part 2 🏋️‍♀️

Day 8 - HTML5 Canvas 👩‍🎨🎨

Day 9 - DevTools Tricks

Day 10 - Hold Shift and Check Checkboxes ✅

#JavaScript30

Day 1 - JavaScript Drum Kit 🥁

Day 2 - Clock 🕐

Day 3 - CSS Variables and JavaScript

Day 4 - Array Cardio Day 1

Day 5 - Flex Panel Image Gallery

Bootcamp Reflection

React & State

An Example

JavaScript: Call Me By Your Variable

Variables have naming conventions, they should:

There are two ways to keep the Javascript engine from hoisting variables:

Rule of thumb:

Accessibility...Rules!

Alternative Text

Clear Headers, Links, and Text

Make use of labels!

Ruby Methods Broken Down